diff --git a/demos/esm-dev-app/dist/main.js b/demos/esm-dev-app/dist/main.js
index c0af9aa12f..3d346e5199 100644
--- a/demos/esm-dev-app/dist/main.js
+++ b/demos/esm-dev-app/dist/main.js
@@ -1,45 +1,44 @@
 /*! For license information please see main.js.LICENSE.txt */
-(()=>{"use strict";const e=globalThis,t=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;class o{constructor(e,t,n){if(this._$cssResult$=!0,n!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const i=this.t;if(t&&void 0===e){const t=void 0!==i&&1===i.length;t&&(e=n.get(i)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&n.set(i,e))}return e}toString(){return this.cssText}}const a=(i,n)=>{if(t)i.adoptedStyleSheets=n.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const t of n){const n=document.createElement("style"),o=e.litNonce;void 0!==o&&n.setAttribute("nonce",o),n.textContent=t.cssText,i.appendChild(n)}},s=t?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new o("string"==typeof e?e:e+"",void 0,i))(t)})(e):e,{is:r,defineProperty:l,getOwnPropertyDescriptor:d,getOwnPropertyNames:u,getOwnPropertySymbols:c,getPrototypeOf:h}=Object,_=globalThis,p=_.trustedTypes,b=p?p.emptyScript:"",g=_.reactiveElementPolyfillSupport,m=(e,t)=>e,f={toAttribute(e,t){switch(t){case Boolean:e=e?b:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},v=(e,t)=>!r(e,t),k={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:v};Symbol.metadata??=Symbol("metadata"),_.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=k){if(t.state&&(t.attribute=!1),this._$Ei(),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),n=this.getPropertyDescriptor(e,i,t);void 0!==n&&l(this.prototype,e,n)}}static getPropertyDescriptor(e,t,i){const{get:n,set:o}=d(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get(){return n?.call(this)},set(t){const a=n?.call(this);o.call(this,t),this.requestUpdate(e,a,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??k}static _$Ei(){if(this.hasOwnProperty(m("elementProperties")))return;const e=h(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(m("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(m("properties"))){const e=this.properties,t=[...u(e),...c(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const i=this._$Eu(e,t);void 0!==i&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(s(e))}else void 0!==e&&t.push(s(e));return t}static _$Eu(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return a(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$EC(e,t){const i=this.constructor.elementProperties.get(e),n=this.constructor._$Eu(e,i);if(void 0!==n&&!0===i.reflect){const o=(void 0!==i.converter?.toAttribute?i.converter:f).toAttribute(t,i.type);this._$Em=e,null==o?this.removeAttribute(n):this.setAttribute(n,o),this._$Em=null}}_$AK(e,t){const i=this.constructor,n=i._$Eh.get(e);if(void 0!==n&&this._$Em!==n){const e=i.getPropertyOptions(n),o="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:f;this._$Em=n,this[n]=o.fromAttribute(t,e.type),this._$Em=null}}requestUpdate(e,t,i){if(void 0!==e){if(i??=this.constructor.getPropertyOptions(e),!(i.hasChanged??v)(this[e],t))return;this.P(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$ET())}P(e,t,i){this._$AL.has(e)||this._$AL.set(e,t),!0===i.reflect&&this._$Em!==e&&(this._$Ej??=new Set).add(e)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e)!0!==i.wrapped||this._$AL.has(t)||void 0===this[t]||this.P(t,this[t],i)}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach((e=>e.hostUpdate?.())),this.update(t)):this._$EU()}catch(t){throw e=!1,this._$EU(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Ej&&=this._$Ej.forEach((e=>this._$EC(e,this[e]))),this._$EU()}updated(e){}firstUpdated(e){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[m("elementProperties")]=new Map,y[m("finalized")]=new Map,g?.({ReactiveElement:y}),(_.reactiveElementVersions??=[]).push("2.0.4");const x=globalThis,w=x.trustedTypes,$=w?w.createPolicy("lit-html",{createHTML:e=>e}):void 0,C="$lit$",I=`lit$${(Math.random()+"").slice(9)}$`,E="?"+I,S=`<${E}>`,T=document,A=()=>T.createComment(""),D=e=>null===e||"object"!=typeof e&&"function"!=typeof e,V=Array.isArray,L="[ \t\n\f\r]",H=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,M=/-->/g,B=/>/g,O=RegExp(`>|${L}(?:([^\\s"'>=/]+)(${L}*=${L}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),N=/'/g,U=/"/g,P=/^(?:script|style|textarea|title)$/i,z=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),R=(z(1),z(2),Symbol.for("lit-noChange")),j=Symbol.for("lit-nothing"),G=new WeakMap,F=T.createTreeWalker(T,129);function W(e,t){if(!Array.isArray(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==$?$.createHTML(t):t}const q=(e,t)=>{const i=e.length-1,n=[];let o,a=2===t?"<svg>":"",s=H;for(let t=0;t<i;t++){const i=e[t];let r,l,d=-1,u=0;for(;u<i.length&&(s.lastIndex=u,l=s.exec(i),null!==l);)u=s.lastIndex,s===H?"!--"===l[1]?s=M:void 0!==l[1]?s=B:void 0!==l[2]?(P.test(l[2])&&(o=RegExp("</"+l[2],"g")),s=O):void 0!==l[3]&&(s=O):s===O?">"===l[0]?(s=o??H,d=-1):void 0===l[1]?d=-2:(d=s.lastIndex-l[2].length,r=l[1],s=void 0===l[3]?O:'"'===l[3]?U:N):s===U||s===N?s=O:s===M||s===B?s=H:(s=O,o=void 0);const c=s===O&&e[t+1].startsWith("/>")?" ":"";a+=s===H?i+S:d>=0?(n.push(r),i.slice(0,d)+C+i.slice(d)+I+c):i+I+(-2===d?t:c)}return[W(e,a+(e[i]||"<?>")+(2===t?"</svg>":"")),n]};class K{constructor({strings:e,_$litType$:t},i){let n;this.parts=[];let o=0,a=0;const s=e.length-1,r=this.parts,[l,d]=q(e,t);if(this.el=K.createElement(l,i),F.currentNode=this.el.content,2===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(n=F.nextNode())&&r.length<s;){if(1===n.nodeType){if(n.hasAttributes())for(const e of n.getAttributeNames())if(e.endsWith(C)){const t=d[a++],i=n.getAttribute(e).split(I),s=/([.?@])?(.*)/.exec(t);r.push({type:1,index:o,name:s[2],strings:i,ctor:"."===s[1]?Q:"?"===s[1]?ee:"@"===s[1]?te:X}),n.removeAttribute(e)}else e.startsWith(I)&&(r.push({type:6,index:o}),n.removeAttribute(e));if(P.test(n.tagName)){const e=n.textContent.split(I),t=e.length-1;if(t>0){n.textContent=w?w.emptyScript:"";for(let i=0;i<t;i++)n.append(e[i],A()),F.nextNode(),r.push({type:2,index:++o});n.append(e[t],A())}}}else if(8===n.nodeType)if(n.data===E)r.push({type:2,index:o});else{let e=-1;for(;-1!==(e=n.data.indexOf(I,e+1));)r.push({type:7,index:o}),e+=I.length-1}o++}}static createElement(e,t){const i=T.createElement("template");return i.innerHTML=e,i}}function Y(e,t,i=e,n){if(t===R)return t;let o=void 0!==n?i._$Co?.[n]:i._$Cl;const a=D(t)?void 0:t._$litDirective$;return o?.constructor!==a&&(o?._$AO?.(!1),void 0===a?o=void 0:(o=new a(e),o._$AT(e,i,n)),void 0!==n?(i._$Co??=[])[n]=o:i._$Cl=o),void 0!==o&&(t=Y(e,o._$AS(e,t.values),o,n)),t}class J{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,n=(e?.creationScope??T).importNode(t,!0);F.currentNode=n;let o=F.nextNode(),a=0,s=0,r=i[0];for(;void 0!==r;){if(a===r.index){let t;2===r.type?t=new Z(o,o.nextSibling,this,e):1===r.type?t=new r.ctor(o,r.name,r.strings,this,e):6===r.type&&(t=new ie(o,this,e)),this._$AV.push(t),r=i[++s]}a!==r?.index&&(o=F.nextNode(),a++)}return F.currentNode=T,n}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class Z{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,n){this.type=2,this._$AH=j,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=n,this._$Cv=n?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=Y(this,e,t),D(e)?e===j||null==e||""===e?(this._$AH!==j&&this._$AR(),this._$AH=j):e!==this._$AH&&e!==R&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>V(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}S(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.S(e))}_(e){this._$AH!==j&&D(this._$AH)?this._$AA.nextSibling.data=e:this.T(T.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,n="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=K.createElement(W(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===n)this._$AH.p(t);else{const e=new J(n,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=G.get(e.strings);return void 0===t&&G.set(e.strings,t=new K(e)),t}k(e){V(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,n=0;for(const o of e)n===t.length?t.push(i=new Z(this.S(A()),this.S(A()),this,this.options)):i=t[n],i._$AI(o),n++;n<t.length&&(this._$AR(i&&i._$AB.nextSibling,n),t.length=n)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e&&e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class X{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,n,o){this.type=1,this._$AH=j,this._$AN=void 0,this.element=e,this.name=t,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=j}_$AI(e,t=this,i,n){const o=this.strings;let a=!1;if(void 0===o)e=Y(this,e,t,0),a=!D(e)||e!==this._$AH&&e!==R,a&&(this._$AH=e);else{const n=e;let s,r;for(e=o[0],s=0;s<o.length-1;s++)r=Y(this,n[i+s],t,s),r===R&&(r=this._$AH[s]),a||=!D(r)||r!==this._$AH[s],r===j?e=j:e!==j&&(e+=(r??"")+o[s+1]),this._$AH[s]=r}a&&!n&&this.j(e)}j(e){e===j?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class Q extends X{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===j?void 0:e}}class ee extends X{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==j)}}class te extends X{constructor(e,t,i,n,o){super(e,t,i,n,o),this.type=5}_$AI(e,t=this){if((e=Y(this,e,t,0)??j)===R)return;const i=this._$AH,n=e===j&&i!==j||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==j&&(i===j||n);n&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class ie{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){Y(this,e)}}const ne=x.litHtmlPolyfillSupport;ne?.(K,Z),(x.litHtmlVersions??=[]).push("3.1.2");const oe=globalThis,ae=oe.trustedTypes,se=ae?ae.createPolicy("lit-html",{createHTML:e=>e}):void 0,re="$lit$",le=`lit$${(Math.random()+"").slice(9)}$`,de="?"+le,ue=`<${de}>`,ce=document,he=()=>ce.createComment(""),_e=e=>null===e||"object"!=typeof e&&"function"!=typeof e,pe=Array.isArray,be="[ \t\n\f\r]",ge=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,me=/-->/g,fe=/>/g,ve=RegExp(`>|${be}(?:([^\\s"'>=/]+)(${be}*=${be}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),ke=/'/g,ye=/"/g,xe=/^(?:script|style|textarea|title)$/i,we=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),$e=we(1),Ce=we(2),Ie=Symbol.for("lit-noChange"),Ee=Symbol.for("lit-nothing"),Se=new WeakMap,Te=ce.createTreeWalker(ce,129);function Ae(e,t){if(!Array.isArray(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==se?se.createHTML(t):t}class De{constructor({strings:e,_$litType$:t},i){let n;this.parts=[];let o=0,a=0;const s=e.length-1,r=this.parts,[l,d]=((e,t)=>{const i=e.length-1,n=[];let o,a=2===t?"<svg>":"",s=ge;for(let t=0;t<i;t++){const i=e[t];let r,l,d=-1,u=0;for(;u<i.length&&(s.lastIndex=u,l=s.exec(i),null!==l);)u=s.lastIndex,s===ge?"!--"===l[1]?s=me:void 0!==l[1]?s=fe:void 0!==l[2]?(xe.test(l[2])&&(o=RegExp("</"+l[2],"g")),s=ve):void 0!==l[3]&&(s=ve):s===ve?">"===l[0]?(s=o??ge,d=-1):void 0===l[1]?d=-2:(d=s.lastIndex-l[2].length,r=l[1],s=void 0===l[3]?ve:'"'===l[3]?ye:ke):s===ye||s===ke?s=ve:s===me||s===fe?s=ge:(s=ve,o=void 0);const c=s===ve&&e[t+1].startsWith("/>")?" ":"";a+=s===ge?i+ue:d>=0?(n.push(r),i.slice(0,d)+re+i.slice(d)+le+c):i+le+(-2===d?t:c)}return[Ae(e,a+(e[i]||"<?>")+(2===t?"</svg>":"")),n]})(e,t);if(this.el=De.createElement(l,i),Te.currentNode=this.el.content,2===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(n=Te.nextNode())&&r.length<s;){if(1===n.nodeType){if(n.hasAttributes())for(const e of n.getAttributeNames())if(e.endsWith(re)){const t=d[a++],i=n.getAttribute(e).split(le),s=/([.?@])?(.*)/.exec(t);r.push({type:1,index:o,name:s[2],strings:i,ctor:"."===s[1]?Be:"?"===s[1]?Oe:"@"===s[1]?Ne:Me}),n.removeAttribute(e)}else e.startsWith(le)&&(r.push({type:6,index:o}),n.removeAttribute(e));if(xe.test(n.tagName)){const e=n.textContent.split(le),t=e.length-1;if(t>0){n.textContent=ae?ae.emptyScript:"";for(let i=0;i<t;i++)n.append(e[i],he()),Te.nextNode(),r.push({type:2,index:++o});n.append(e[t],he())}}}else if(8===n.nodeType)if(n.data===de)r.push({type:2,index:o});else{let e=-1;for(;-1!==(e=n.data.indexOf(le,e+1));)r.push({type:7,index:o}),e+=le.length-1}o++}}static createElement(e,t){const i=ce.createElement("template");return i.innerHTML=e,i}}function Ve(e,t,i=e,n){if(t===Ie)return t;let o=void 0!==n?i._$Co?.[n]:i._$Cl;const a=_e(t)?void 0:t._$litDirective$;return o?.constructor!==a&&(o?._$AO?.(!1),void 0===a?o=void 0:(o=new a(e),o._$AT(e,i,n)),void 0!==n?(i._$Co??=[])[n]=o:i._$Cl=o),void 0!==o&&(t=Ve(e,o._$AS(e,t.values),o,n)),t}class Le{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,n=(e?.creationScope??ce).importNode(t,!0);Te.currentNode=n;let o=Te.nextNode(),a=0,s=0,r=i[0];for(;void 0!==r;){if(a===r.index){let t;2===r.type?t=new He(o,o.nextSibling,this,e):1===r.type?t=new r.ctor(o,r.name,r.strings,this,e):6===r.type&&(t=new Ue(o,this,e)),this._$AV.push(t),r=i[++s]}a!==r?.index&&(o=Te.nextNode(),a++)}return Te.currentNode=ce,n}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class He{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,n){this.type=2,this._$AH=Ee,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=n,this._$Cv=n?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=Ve(this,e,t),_e(e)?e===Ee||null==e||""===e?(this._$AH!==Ee&&this._$AR(),this._$AH=Ee):e!==this._$AH&&e!==Ie&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>pe(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}S(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.S(e))}_(e){this._$AH!==Ee&&_e(this._$AH)?this._$AA.nextSibling.data=e:this.T(ce.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,n="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=De.createElement(Ae(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===n)this._$AH.p(t);else{const e=new Le(n,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=Se.get(e.strings);return void 0===t&&Se.set(e.strings,t=new De(e)),t}k(e){pe(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,n=0;for(const o of e)n===t.length?t.push(i=new He(this.S(he()),this.S(he()),this,this.options)):i=t[n],i._$AI(o),n++;n<t.length&&(this._$AR(i&&i._$AB.nextSibling,n),t.length=n)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e&&e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class Me{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,n,o){this.type=1,this._$AH=Ee,this._$AN=void 0,this.element=e,this.name=t,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=Ee}_$AI(e,t=this,i,n){const o=this.strings;let a=!1;if(void 0===o)e=Ve(this,e,t,0),a=!_e(e)||e!==this._$AH&&e!==Ie,a&&(this._$AH=e);else{const n=e;let s,r;for(e=o[0],s=0;s<o.length-1;s++)r=Ve(this,n[i+s],t,s),r===Ie&&(r=this._$AH[s]),a||=!_e(r)||r!==this._$AH[s],r===Ee?e=Ee:e!==Ee&&(e+=(r??"")+o[s+1]),this._$AH[s]=r}a&&!n&&this.j(e)}j(e){e===Ee?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class Be extends Me{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===Ee?void 0:e}}class Oe extends Me{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==Ee)}}class Ne extends Me{constructor(e,t,i,n,o){super(e,t,i,n,o),this.type=5}_$AI(e,t=this){if((e=Ve(this,e,t,0)??Ee)===Ie)return;const i=this._$AH,n=e===Ee&&i!==Ee||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==Ee&&(i===Ee||n);n&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class Ue{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){Ve(this,e)}}const Pe=oe.litHtmlPolyfillSupport;Pe?.(De,He),(oe.litHtmlVersions??=[]).push("3.1.2");class ze extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=((e,t,i)=>{const n=i?.renderBefore??t;let o=n._$litPart$;if(void 0===o){const e=i?.renderBefore??null;n._$litPart$=o=new He(t.insertBefore(he(),e),e,void 0,i??{})}return o._$AI(e),o})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return Ie}}ze._$litElement$=!0,ze.finalized=!0,globalThis.litElementHydrateSupport?.({LitElement:ze});const Re=globalThis.litElementPolyfillSupport;Re?.({LitElement:ze}),(globalThis.litElementVersions??=[]).push("4.0.4");const je={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:v},Ge=(e=je,t,i)=>{const{kind:n,metadata:o}=i;let a=globalThis.litPropertyMetadata.get(o);if(void 0===a&&globalThis.litPropertyMetadata.set(o,a=new Map),a.set(i.name,e),"accessor"===n){const{name:n}=i;return{set(i){const o=t.get.call(this);t.set.call(this,i),this.requestUpdate(n,o,e)},init(t){return void 0!==t&&this.P(n,void 0,e),t}}}if("setter"===n){const{name:n}=i;return function(i){const o=this[n];t.call(this,i),this.requestUpdate(n,o,e)}}throw Error("Unsupported decorator location: "+n)};function Fe(e){return(t,i)=>"object"==typeof i?Ge(e,t,i):((e,t,i)=>{const n=t.hasOwnProperty(i);return t.constructor.createProperty(i,n?{...e,wrapped:!0}:e),n?Object.getOwnPropertyDescriptor(t,i):void 0})(e,t,i)}function We(e){return Fe({...e,state:!0,attribute:!1})}const qe=(e,t,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,i),i);function Ke(e,t){return(i,n,o)=>{const a=t=>t.renderRoot?.querySelector(e)??null;if(t){const{get:e,set:t}="object"==typeof n?i:o??(()=>{const e=Symbol();return{get(){return this[e]},set(t){this[e]=t}}})();return qe(i,n,{get(){let i=e.call(this);return void 0===i&&(i=a(this),(null!==i||this.hasUpdated)&&t.call(this,i)),i}})}return qe(i,n,{get(){return a(this)}})}}let Ye;function Je(e){return(t,i)=>qe(t,i,{get(){return(this.renderRoot??(Ye??=document.createDocumentFragment())).querySelectorAll(e)}})}const Ze=1048576,Xe=1073741824,Qe={ATTACHMENT_BROWSE:"Browse",ATTACHMENT_DRAG_DROP_ZONE:"Drop files here."},et={ATTACHMENT_BROWSE:"参照",ATTACHMENT_DRAG_DROP_ZONE:"ここにファイルをドロップします。"},tt={ATTACHMENT_BROWSE:"选择文件",ATTACHMENT_DRAG_DROP_ZONE:"拖动文件到此。"},it={ATTACHMENT_BROWSE:"選擇檔案",ATTACHMENT_DRAG_DROP_ZONE:"拖曳檔案到此。"},nt="'items' property is not array.",ot="'value' property is not unique in items.",at="'value' property is not specified in items.",st="'files' property is not array.",rt="'value' property is not array.",lt="'value' property is not string.",dt="'selectedIndex' property is not array.",ut="'selectedIndex' property is not number.",ct="'columns' property is not array.",ht="'field' property is not specified in columns.",_t="'field' property is not unique in columns.",pt="'rowsPerPage' property is not positive integer.",bt="'data' property is not array.",gt="'container' property is not HTMLElement.";class mt{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,i){this._$Ct=e,this._$AM=t,this._$Ci=i}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}class ft extends mt{constructor(e){if(super(e),this.it=j,2!==e.type)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===j||null==e)return this._t=void 0,this.it=e;if(e===R)return e;if("string"!=typeof e)throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;const t=[e];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}}ft.directiveName="unsafeHTML",ft.resultType=1;const vt=(e=>(...t)=>({_$litDirective$:e,values:t}))(ft),kt=24,yt=12,xt="AM",wt="PM",$t='"max" must be greater than or equal to "min".',Ct="Time is out of valid range.",It="'timeStep' property is not number.",Et="00:00",St="23:59",Tt="'value' property format is not valid.",At="'max' property format is not valid.",Dt="'min' property format is not valid.",Vt="'timeStep' property format is not valid.",Lt={MONTH_SELECT:["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"],YEAR_SELECT_POSTFIX:"",WEEK_DAYS:[{text:"SUN",abbr:"Sunday"},{text:"MON",abbr:"Monday"},{text:"TUE",abbr:"Tuesday"},{text:"WED",abbr:"Wednesday"},{text:"THU",abbr:"Thursday"},{text:"FRI",abbr:"Friday"},{text:"SAT",abbr:"Saturday"}],INVALID_FORMAT:"Format is not valid.",INVALID_TIME_FORMAT:"Format is not valid.",CALENDAR_FOOTER_TEXT:{none:"None",today:"Today",close:"Close"},TIME_IS_OUT_OF_VALID_RANGE:"Time is out of valid range."},Ht={MONTH_SELECT:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],YEAR_SELECT_POSTFIX:"年",WEEK_DAYS:[{text:"日",abbr:"日"},{text:"月",abbr:"月"},{text:"火",abbr:"火"},{text:"水",abbr:"水"},{text:"木",abbr:"木"},{text:"金",abbr:"金"},{text:"土",abbr:"土"}],INVALID_FORMAT:"日付の形式が不正です。",INVALID_TIME_FORMAT:"時刻の形式が不正です。",CALENDAR_FOOTER_TEXT:{none:"選択を解除",today:"今日",close:"閉じる"},TIME_IS_OUT_OF_VALID_RANGE:"時刻が有効な範囲外です。"},Mt={MONTH_SELECT:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],YEAR_SELECT_POSTFIX:"年",WEEK_DAYS:[{text:"周日",abbr:"周日"},{text:"周一",abbr:"周一"},{text:"周二",abbr:"周二"},{text:"周三",abbr:"周三"},{text:"周四",abbr:"周四"},{text:"周五",abbr:"周五"},{text:"周六",abbr:"周六"}],INVALID_FORMAT:"日期格式不正确。",INVALID_TIME_FORMAT:"时间格式不正确。",CALENDAR_FOOTER_TEXT:{none:"清空",today:"今天",close:"关闭"},TIME_IS_OUT_OF_VALID_RANGE:"时间超出有效范围。"},Bt={MONTH_SELECT:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],YEAR_SELECT_POSTFIX:"年",WEEK_DAYS:[{text:"周日",abbr:"周日"},{text:"周一",abbr:"周一"},{text:"周二",abbr:"周二"},{text:"周三",abbr:"周三"},{text:"周四",abbr:"周四"},{text:"周五",abbr:"周五"},{text:"周六",abbr:"周六"}],INVALID_FORMAT:"日期格式不正確。",INVALID_TIME_FORMAT:"時間格式不正確。",CALENDAR_FOOTER_TEXT:{none:"清空",today:"今天",close:"關閉"},TIME_IS_OUT_OF_VALID_RANGE:"時間超出有效範圍。"},Ot=(e,t)=>{const i=Xt(e,t);let n=new Date(i.start),o=[];const a=[];for(;n<=i.end;)o.push(Ft(n)),7===o.length&&(a.push(o),o=[]),n.setDate(n.getDate()+1),n=new Date(n);return a},Nt=(e,t)=>{let i,n;i=Math.floor(e/60),n=e%60;const o=i%kt<yt?xt:wt;return i=t?i%yt:i%kt,0===i&&t&&(i=yt),i<10&&(i="0"+i),n<10&&(n="0"+n),{label:i+":"+n+(t?" "+o:""),value:i+":"+n+(t?" "+o:"")}},Ut=e=>{const t=e.split(":");let i=parseInt(t[0],10),n=parseInt(t[1],10);return isNaN(i)||isNaN(n)?0:(i<0?i=0:i>=kt&&(i=23),n<0?n=0:n>=60&&(n=59),60*i+n)},Pt=(e,t)=>{const i=Ut(e),n=Ut(t);return i>n?1:i===n?0:-1},zt=e=>{let t=e%yt;return t=0===t?yt:t,t},Rt=e=>e>=yt?wt:xt,jt=e=>{const[t,i]=e.split(" "),[n,o]=t.split(":");return i?`${Gt(n,i)}:${o}`:e},Gt=(e,t)=>{const i=parseInt(e,10);return Zt(t===wt?i===yt?12:i+12:i===yt?0:i)},Ft=e=>{const t=new Date(e),i=t.getFullYear(),n=Zt(t.getMonth()+1),o=Zt(t.getDate());return{text:`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`,attr:`${i}-${n}-${o}`}},Wt=(e,t)=>{if(t&&!Kt(t)){const i=t.split("-");if(3!==i.length)return t;const n=i[0],o=i[1],a=i[2];return"en"===e?`${o}/${a}/${n}`:`${n}-${o}-${a}`}return t},qt=(e,t)=>{if(Kt(t))return t;const i="en"===e,n=i?"/":"-",o=t.split(n);return`${i?o[2]:o[0]}-${i?o[0]:o[1]}-${i?o[1]:o[2]}`},Kt=e=>null==e||0===e.length||!/[^(^\s*)|(\s*$)]/.test(e),Yt=(e="ja")=>{const t=new Date,i=t.getFullYear(),n=Zt(t.getMonth()+1),o=Zt(t.getDate());return"ja"===e||"zh"===e?i+"-"+n+"-"+o:n+"/"+o+"/"+i},Jt=(e,t)=>{if(t&&!Kt(t)){const i="en"===e,n=i?"/":"-";if(new Date(`${t}${i?"":"T00:00:00"}`).getDate()!==parseInt(t.split(n)[i?1:2],10))return!1;const o=/^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/(\d{4})$/;if("en"===e)return null!==t.match(o);const a=/^(\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/g;return null!==t.match(a)}return!1},Zt=(e,t=2)=>{const i=`0000000000${e}`;return i.substr(i.length-t)},Xt=(e,t)=>{const i=new Date(e,t);i.setDate(1);const n=new Date(i);n.setDate(n.getDate()-n.getDay());const o=new Date(e,t);o.setMonth(o.getMonth()+1,0);const a=new Date(o);a.setDate(a.getDate()+(6-a.getDay()));const s=(a.getTime()-n.getTime())/864e5;return a.setDate(a.getDate()+(42-s)),{start:n,end:a}},Qt=e=>{switch(e){case"en":default:return Lt;case"zh":return Mt;case"ja":return Ht;case"zh-TW":return Bt}},ei=e=>{const t=[];t.push({value:`${e} 12`,label:`${e} 12`});for(let i=1;i<=11;i++)t.push({value:`${e} ${Zt(i)}`,label:`${e} ${Zt(i)}`});return t},ti=()=>Ce`
+(()=>{"use strict";const e=globalThis,t=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;class o{constructor(e,t,n){if(this._$cssResult$=!0,n!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const i=this.t;if(t&&void 0===e){const t=void 0!==i&&1===i.length;t&&(e=n.get(i)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&n.set(i,e))}return e}toString(){return this.cssText}}const a=(i,n)=>{if(t)i.adoptedStyleSheets=n.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const t of n){const n=document.createElement("style"),o=e.litNonce;void 0!==o&&n.setAttribute("nonce",o),n.textContent=t.cssText,i.appendChild(n)}},s=t?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new o("string"==typeof e?e:e+"",void 0,i))(t)})(e):e,{is:r,defineProperty:l,getOwnPropertyDescriptor:d,getOwnPropertyNames:u,getOwnPropertySymbols:c,getPrototypeOf:h}=Object,_=globalThis,p=_.trustedTypes,b=p?p.emptyScript:"",g=_.reactiveElementPolyfillSupport,m=(e,t)=>e,f={toAttribute(e,t){switch(t){case Boolean:e=e?b:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},v=(e,t)=>!r(e,t),k={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:v};Symbol.metadata??=Symbol("metadata"),_.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=k){if(t.state&&(t.attribute=!1),this._$Ei(),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),n=this.getPropertyDescriptor(e,i,t);void 0!==n&&l(this.prototype,e,n)}}static getPropertyDescriptor(e,t,i){const{get:n,set:o}=d(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get(){return n?.call(this)},set(t){const a=n?.call(this);o.call(this,t),this.requestUpdate(e,a,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??k}static _$Ei(){if(this.hasOwnProperty(m("elementProperties")))return;const e=h(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(m("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(m("properties"))){const e=this.properties,t=[...u(e),...c(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const i=this._$Eu(e,t);void 0!==i&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(s(e))}else void 0!==e&&t.push(s(e));return t}static _$Eu(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return a(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$EC(e,t){const i=this.constructor.elementProperties.get(e),n=this.constructor._$Eu(e,i);if(void 0!==n&&!0===i.reflect){const o=(void 0!==i.converter?.toAttribute?i.converter:f).toAttribute(t,i.type);this._$Em=e,null==o?this.removeAttribute(n):this.setAttribute(n,o),this._$Em=null}}_$AK(e,t){const i=this.constructor,n=i._$Eh.get(e);if(void 0!==n&&this._$Em!==n){const e=i.getPropertyOptions(n),o="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:f;this._$Em=n,this[n]=o.fromAttribute(t,e.type),this._$Em=null}}requestUpdate(e,t,i){if(void 0!==e){if(i??=this.constructor.getPropertyOptions(e),!(i.hasChanged??v)(this[e],t))return;this.P(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$ET())}P(e,t,i){this._$AL.has(e)||this._$AL.set(e,t),!0===i.reflect&&this._$Em!==e&&(this._$Ej??=new Set).add(e)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e)!0!==i.wrapped||this._$AL.has(t)||void 0===this[t]||this.P(t,this[t],i)}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach((e=>e.hostUpdate?.())),this.update(t)):this._$EU()}catch(t){throw e=!1,this._$EU(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Ej&&=this._$Ej.forEach((e=>this._$EC(e,this[e]))),this._$EU()}updated(e){}firstUpdated(e){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[m("elementProperties")]=new Map,y[m("finalized")]=new Map,g?.({ReactiveElement:y}),(_.reactiveElementVersions??=[]).push("2.0.4");const x=globalThis,w=x.trustedTypes,$=w?w.createPolicy("lit-html",{createHTML:e=>e}):void 0,C="$lit$",I=`lit$${Math.random().toFixed(9).slice(2)}$`,E="?"+I,S=`<${E}>`,T=document,A=()=>T.createComment(""),D=e=>null===e||"object"!=typeof e&&"function"!=typeof e,V=Array.isArray,L="[ \t\n\f\r]",H=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,M=/-->/g,B=/>/g,O=RegExp(`>|${L}(?:([^\\s"'>=/]+)(${L}*=${L}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),N=/'/g,U=/"/g,P=/^(?:script|style|textarea|title)$/i,z=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),R=(z(1),z(2),z(3),Symbol.for("lit-noChange")),j=Symbol.for("lit-nothing"),G=new WeakMap,F=T.createTreeWalker(T,129);function W(e,t){if(!V(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==$?$.createHTML(t):t}class q{constructor({strings:e,_$litType$:t},i){let n;this.parts=[];let o=0,a=0;const s=e.length-1,r=this.parts,[l,d]=((e,t)=>{const i=e.length-1,n=[];let o,a=2===t?"<svg>":3===t?"<math>":"",s=H;for(let t=0;t<i;t++){const i=e[t];let r,l,d=-1,u=0;for(;u<i.length&&(s.lastIndex=u,l=s.exec(i),null!==l);)u=s.lastIndex,s===H?"!--"===l[1]?s=M:void 0!==l[1]?s=B:void 0!==l[2]?(P.test(l[2])&&(o=RegExp("</"+l[2],"g")),s=O):void 0!==l[3]&&(s=O):s===O?">"===l[0]?(s=o??H,d=-1):void 0===l[1]?d=-2:(d=s.lastIndex-l[2].length,r=l[1],s=void 0===l[3]?O:'"'===l[3]?U:N):s===U||s===N?s=O:s===M||s===B?s=H:(s=O,o=void 0);const c=s===O&&e[t+1].startsWith("/>")?" ":"";a+=s===H?i+S:d>=0?(n.push(r),i.slice(0,d)+C+i.slice(d)+I+c):i+I+(-2===d?t:c)}return[W(e,a+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),n]})(e,t);if(this.el=q.createElement(l,i),F.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(n=F.nextNode())&&r.length<s;){if(1===n.nodeType){if(n.hasAttributes())for(const e of n.getAttributeNames())if(e.endsWith(C)){const t=d[a++],i=n.getAttribute(e).split(I),s=/([.?@])?(.*)/.exec(t);r.push({type:1,index:o,name:s[2],strings:i,ctor:"."===s[1]?X:"?"===s[1]?Q:"@"===s[1]?ee:Z}),n.removeAttribute(e)}else e.startsWith(I)&&(r.push({type:6,index:o}),n.removeAttribute(e));if(P.test(n.tagName)){const e=n.textContent.split(I),t=e.length-1;if(t>0){n.textContent=w?w.emptyScript:"";for(let i=0;i<t;i++)n.append(e[i],A()),F.nextNode(),r.push({type:2,index:++o});n.append(e[t],A())}}}else if(8===n.nodeType)if(n.data===E)r.push({type:2,index:o});else{let e=-1;for(;-1!==(e=n.data.indexOf(I,e+1));)r.push({type:7,index:o}),e+=I.length-1}o++}}static createElement(e,t){const i=T.createElement("template");return i.innerHTML=e,i}}function K(e,t,i=e,n){if(t===R)return t;let o=void 0!==n?i.o?.[n]:i.l;const a=D(t)?void 0:t._$litDirective$;return o?.constructor!==a&&(o?._$AO?.(!1),void 0===a?o=void 0:(o=new a(e),o._$AT(e,i,n)),void 0!==n?(i.o??=[])[n]=o:i.l=o),void 0!==o&&(t=K(e,o._$AS(e,t.values),o,n)),t}class Y{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,n=(e?.creationScope??T).importNode(t,!0);F.currentNode=n;let o=F.nextNode(),a=0,s=0,r=i[0];for(;void 0!==r;){if(a===r.index){let t;2===r.type?t=new J(o,o.nextSibling,this,e):1===r.type?t=new r.ctor(o,r.name,r.strings,this,e):6===r.type&&(t=new te(o,this,e)),this._$AV.push(t),r=i[++s]}a!==r?.index&&(o=F.nextNode(),a++)}return F.currentNode=T,n}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class J{get _$AU(){return this._$AM?._$AU??this.v}constructor(e,t,i,n){this.type=2,this._$AH=j,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=n,this.v=n?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=K(this,e,t),D(e)?e===j||null==e||""===e?(this._$AH!==j&&this._$AR(),this._$AH=j):e!==this._$AH&&e!==R&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>V(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==j&&D(this._$AH)?this._$AA.nextSibling.data=e:this.T(T.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,n="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=q.createElement(W(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===n)this._$AH.p(t);else{const e=new Y(n,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=G.get(e.strings);return void 0===t&&G.set(e.strings,t=new q(e)),t}k(e){V(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,n=0;for(const o of e)n===t.length?t.push(i=new J(this.O(A()),this.O(A()),this,this.options)):i=t[n],i._$AI(o),n++;n<t.length&&(this._$AR(i&&i._$AB.nextSibling,n),t.length=n)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e&&e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this.v=e,this._$AP?.(e))}}class Z{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,n,o){this.type=1,this._$AH=j,this._$AN=void 0,this.element=e,this.name=t,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=j}_$AI(e,t=this,i,n){const o=this.strings;let a=!1;if(void 0===o)e=K(this,e,t,0),a=!D(e)||e!==this._$AH&&e!==R,a&&(this._$AH=e);else{const n=e;let s,r;for(e=o[0],s=0;s<o.length-1;s++)r=K(this,n[i+s],t,s),r===R&&(r=this._$AH[s]),a||=!D(r)||r!==this._$AH[s],r===j?e=j:e!==j&&(e+=(r??"")+o[s+1]),this._$AH[s]=r}a&&!n&&this.j(e)}j(e){e===j?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class X extends Z{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===j?void 0:e}}class Q extends Z{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==j)}}class ee extends Z{constructor(e,t,i,n,o){super(e,t,i,n,o),this.type=5}_$AI(e,t=this){if((e=K(this,e,t,0)??j)===R)return;const i=this._$AH,n=e===j&&i!==j||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==j&&(i===j||n);n&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class te{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){K(this,e)}}const ie=x.litHtmlPolyfillSupport;ie?.(q,J),(x.litHtmlVersions??=[]).push("3.2.0");const ne=globalThis,oe=ne.trustedTypes,ae=oe?oe.createPolicy("lit-html",{createHTML:e=>e}):void 0,se="$lit$",re=`lit$${Math.random().toFixed(9).slice(2)}$`,le="?"+re,de=`<${le}>`,ue=document,ce=()=>ue.createComment(""),he=e=>null===e||"object"!=typeof e&&"function"!=typeof e,_e=Array.isArray,pe="[ \t\n\f\r]",be=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ge=/-->/g,me=/>/g,fe=RegExp(`>|${pe}(?:([^\\s"'>=/]+)(${pe}*=${pe}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),ve=/'/g,ke=/"/g,ye=/^(?:script|style|textarea|title)$/i,xe=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),we=xe(1),$e=xe(2),Ce=(xe(3),Symbol.for("lit-noChange")),Ie=Symbol.for("lit-nothing"),Ee=new WeakMap,Se=ue.createTreeWalker(ue,129);function Te(e,t){if(!_e(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==ae?ae.createHTML(t):t}class Ae{constructor({strings:e,_$litType$:t},i){let n;this.parts=[];let o=0,a=0;const s=e.length-1,r=this.parts,[l,d]=((e,t)=>{const i=e.length-1,n=[];let o,a=2===t?"<svg>":3===t?"<math>":"",s=be;for(let t=0;t<i;t++){const i=e[t];let r,l,d=-1,u=0;for(;u<i.length&&(s.lastIndex=u,l=s.exec(i),null!==l);)u=s.lastIndex,s===be?"!--"===l[1]?s=ge:void 0!==l[1]?s=me:void 0!==l[2]?(ye.test(l[2])&&(o=RegExp("</"+l[2],"g")),s=fe):void 0!==l[3]&&(s=fe):s===fe?">"===l[0]?(s=o??be,d=-1):void 0===l[1]?d=-2:(d=s.lastIndex-l[2].length,r=l[1],s=void 0===l[3]?fe:'"'===l[3]?ke:ve):s===ke||s===ve?s=fe:s===ge||s===me?s=be:(s=fe,o=void 0);const c=s===fe&&e[t+1].startsWith("/>")?" ":"";a+=s===be?i+de:d>=0?(n.push(r),i.slice(0,d)+se+i.slice(d)+re+c):i+re+(-2===d?t:c)}return[Te(e,a+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),n]})(e,t);if(this.el=Ae.createElement(l,i),Se.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(n=Se.nextNode())&&r.length<s;){if(1===n.nodeType){if(n.hasAttributes())for(const e of n.getAttributeNames())if(e.endsWith(se)){const t=d[a++],i=n.getAttribute(e).split(re),s=/([.?@])?(.*)/.exec(t);r.push({type:1,index:o,name:s[2],strings:i,ctor:"."===s[1]?Me:"?"===s[1]?Be:"@"===s[1]?Oe:He}),n.removeAttribute(e)}else e.startsWith(re)&&(r.push({type:6,index:o}),n.removeAttribute(e));if(ye.test(n.tagName)){const e=n.textContent.split(re),t=e.length-1;if(t>0){n.textContent=oe?oe.emptyScript:"";for(let i=0;i<t;i++)n.append(e[i],ce()),Se.nextNode(),r.push({type:2,index:++o});n.append(e[t],ce())}}}else if(8===n.nodeType)if(n.data===le)r.push({type:2,index:o});else{let e=-1;for(;-1!==(e=n.data.indexOf(re,e+1));)r.push({type:7,index:o}),e+=re.length-1}o++}}static createElement(e,t){const i=ue.createElement("template");return i.innerHTML=e,i}}function De(e,t,i=e,n){if(t===Ce)return t;let o=void 0!==n?i.o?.[n]:i.l;const a=he(t)?void 0:t._$litDirective$;return o?.constructor!==a&&(o?._$AO?.(!1),void 0===a?o=void 0:(o=new a(e),o._$AT(e,i,n)),void 0!==n?(i.o??=[])[n]=o:i.l=o),void 0!==o&&(t=De(e,o._$AS(e,t.values),o,n)),t}class Ve{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,n=(e?.creationScope??ue).importNode(t,!0);Se.currentNode=n;let o=Se.nextNode(),a=0,s=0,r=i[0];for(;void 0!==r;){if(a===r.index){let t;2===r.type?t=new Le(o,o.nextSibling,this,e):1===r.type?t=new r.ctor(o,r.name,r.strings,this,e):6===r.type&&(t=new Ne(o,this,e)),this._$AV.push(t),r=i[++s]}a!==r?.index&&(o=Se.nextNode(),a++)}return Se.currentNode=ue,n}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class Le{get _$AU(){return this._$AM?._$AU??this.v}constructor(e,t,i,n){this.type=2,this._$AH=Ie,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=n,this.v=n?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=De(this,e,t),he(e)?e===Ie||null==e||""===e?(this._$AH!==Ie&&this._$AR(),this._$AH=Ie):e!==this._$AH&&e!==Ce&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>_e(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==Ie&&he(this._$AH)?this._$AA.nextSibling.data=e:this.T(ue.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,n="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=Ae.createElement(Te(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===n)this._$AH.p(t);else{const e=new Ve(n,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=Ee.get(e.strings);return void 0===t&&Ee.set(e.strings,t=new Ae(e)),t}k(e){_e(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,n=0;for(const o of e)n===t.length?t.push(i=new Le(this.O(ce()),this.O(ce()),this,this.options)):i=t[n],i._$AI(o),n++;n<t.length&&(this._$AR(i&&i._$AB.nextSibling,n),t.length=n)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e&&e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this.v=e,this._$AP?.(e))}}class He{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,n,o){this.type=1,this._$AH=Ie,this._$AN=void 0,this.element=e,this.name=t,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=Ie}_$AI(e,t=this,i,n){const o=this.strings;let a=!1;if(void 0===o)e=De(this,e,t,0),a=!he(e)||e!==this._$AH&&e!==Ce,a&&(this._$AH=e);else{const n=e;let s,r;for(e=o[0],s=0;s<o.length-1;s++)r=De(this,n[i+s],t,s),r===Ce&&(r=this._$AH[s]),a||=!he(r)||r!==this._$AH[s],r===Ie?e=Ie:e!==Ie&&(e+=(r??"")+o[s+1]),this._$AH[s]=r}a&&!n&&this.j(e)}j(e){e===Ie?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class Me extends He{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===Ie?void 0:e}}class Be extends He{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==Ie)}}class Oe extends He{constructor(e,t,i,n,o){super(e,t,i,n,o),this.type=5}_$AI(e,t=this){if((e=De(this,e,t,0)??Ie)===Ce)return;const i=this._$AH,n=e===Ie&&i!==Ie||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==Ie&&(i===Ie||n);n&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class Ne{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){De(this,e)}}const Ue=ne.litHtmlPolyfillSupport;Ue?.(Ae,Le),(ne.litHtmlVersions??=[]).push("3.2.0");class Pe extends y{constructor(){super(...arguments),this.renderOptions={host:this},this.o=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this.o=((e,t,i)=>{const n=i?.renderBefore??t;let o=n._$litPart$;if(void 0===o){const e=i?.renderBefore??null;n._$litPart$=o=new Le(t.insertBefore(ce(),e),e,void 0,i??{})}return o._$AI(e),o})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.o?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.o?.setConnected(!1)}render(){return Ce}}Pe._$litElement$=!0,Pe.finalized=!0,globalThis.litElementHydrateSupport?.({LitElement:Pe});const ze=globalThis.litElementPolyfillSupport;ze?.({LitElement:Pe}),(globalThis.litElementVersions??=[]).push("4.1.0");const Re={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:v},je=(e=Re,t,i)=>{const{kind:n,metadata:o}=i;let a=globalThis.litPropertyMetadata.get(o);if(void 0===a&&globalThis.litPropertyMetadata.set(o,a=new Map),a.set(i.name,e),"accessor"===n){const{name:n}=i;return{set(i){const o=t.get.call(this);t.set.call(this,i),this.requestUpdate(n,o,e)},init(t){return void 0!==t&&this.P(n,void 0,e),t}}}if("setter"===n){const{name:n}=i;return function(i){const o=this[n];t.call(this,i),this.requestUpdate(n,o,e)}}throw Error("Unsupported decorator location: "+n)};function Ge(e){return(t,i)=>"object"==typeof i?je(e,t,i):((e,t,i)=>{const n=t.hasOwnProperty(i);return t.constructor.createProperty(i,n?{...e,wrapped:!0}:e),n?Object.getOwnPropertyDescriptor(t,i):void 0})(e,t,i)}function Fe(e){return Ge({...e,state:!0,attribute:!1})}const We=(e,t,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,i),i);function qe(e,t){return(i,n,o)=>{const a=t=>t.renderRoot?.querySelector(e)??null;if(t){const{get:e,set:t}="object"==typeof n?i:o??(()=>{const e=Symbol();return{get(){return this[e]},set(t){this[e]=t}}})();return We(i,n,{get(){let i=e.call(this);return void 0===i&&(i=a(this),(null!==i||this.hasUpdated)&&t.call(this,i)),i}})}return We(i,n,{get(){return a(this)}})}}let Ke;function Ye(e){return(t,i)=>We(t,i,{get(){return(this.renderRoot??(Ke??=document.createDocumentFragment())).querySelectorAll(e)}})}const Je=1048576,Ze=1073741824,Xe={ATTACHMENT_BROWSE:"Browse",ATTACHMENT_DRAG_DROP_ZONE:"Drop files here."},Qe={ATTACHMENT_BROWSE:"参照",ATTACHMENT_DRAG_DROP_ZONE:"ここにファイルをドロップします。"},et={ATTACHMENT_BROWSE:"选择文件",ATTACHMENT_DRAG_DROP_ZONE:"拖动文件到此。"},tt={ATTACHMENT_BROWSE:"選擇檔案",ATTACHMENT_DRAG_DROP_ZONE:"拖曳檔案到此。"},it="'items' property is not array.",nt="'value' property is not unique in items.",ot="'value' property is not specified in items.",at="'files' property is not array.",st="'value' property is not array.",rt="'value' property is not string.",lt="'selectedIndex' property is not array.",dt="'selectedIndex' property is not number.",ut="'columns' property is not array.",ct="'field' property is not specified in columns.",ht="'field' property is not unique in columns.",_t="'rowsPerPage' property is not positive integer.",pt="'data' property is not array.",bt="'container' property is not HTMLElement.";class gt{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,i){this.t=e,this._$AM=t,this.i=i}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}class mt extends gt{constructor(e){if(super(e),this.it=j,2!==e.type)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===j||null==e)return this._t=void 0,this.it=e;if(e===R)return e;if("string"!=typeof e)throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;const t=[e];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}}mt.directiveName="unsafeHTML",mt.resultType=1;const ft=(e=>(...t)=>({_$litDirective$:e,values:t}))(mt),vt=24,kt=12,yt="AM",xt="PM",wt='"max" must be greater than or equal to "min".',$t="Time is out of valid range.",Ct="'timeStep' property is not number.",It="00:00",Et="23:59",St="'value' property format is not valid.",Tt="'max' property format is not valid.",At="'min' property format is not valid.",Dt="'timeStep' property format is not valid.",Vt={MONTH_SELECT:["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"],YEAR_SELECT_POSTFIX:"",WEEK_DAYS:[{text:"SUN",abbr:"Sunday"},{text:"MON",abbr:"Monday"},{text:"TUE",abbr:"Tuesday"},{text:"WED",abbr:"Wednesday"},{text:"THU",abbr:"Thursday"},{text:"FRI",abbr:"Friday"},{text:"SAT",abbr:"Saturday"}],INVALID_FORMAT:"Format is not valid.",INVALID_TIME_FORMAT:"Format is not valid.",CALENDAR_FOOTER_TEXT:{none:"None",today:"Today",close:"Close"},TIME_IS_OUT_OF_VALID_RANGE:"Time is out of valid range."},Lt={MONTH_SELECT:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],YEAR_SELECT_POSTFIX:"年",WEEK_DAYS:[{text:"日",abbr:"日"},{text:"月",abbr:"月"},{text:"火",abbr:"火"},{text:"水",abbr:"水"},{text:"木",abbr:"木"},{text:"金",abbr:"金"},{text:"土",abbr:"土"}],INVALID_FORMAT:"日付の形式が不正です。",INVALID_TIME_FORMAT:"時刻の形式が不正です。",CALENDAR_FOOTER_TEXT:{none:"選択を解除",today:"今日",close:"閉じる"},TIME_IS_OUT_OF_VALID_RANGE:"時刻が有効な範囲外です。"},Ht={MONTH_SELECT:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],YEAR_SELECT_POSTFIX:"年",WEEK_DAYS:[{text:"周日",abbr:"周日"},{text:"周一",abbr:"周一"},{text:"周二",abbr:"周二"},{text:"周三",abbr:"周三"},{text:"周四",abbr:"周四"},{text:"周五",abbr:"周五"},{text:"周六",abbr:"周六"}],INVALID_FORMAT:"日期格式不正确。",INVALID_TIME_FORMAT:"时间格式不正确。",CALENDAR_FOOTER_TEXT:{none:"清空",today:"今天",close:"关闭"},TIME_IS_OUT_OF_VALID_RANGE:"时间超出有效范围。"},Mt={MONTH_SELECT:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],YEAR_SELECT_POSTFIX:"年",WEEK_DAYS:[{text:"周日",abbr:"周日"},{text:"周一",abbr:"周一"},{text:"周二",abbr:"周二"},{text:"周三",abbr:"周三"},{text:"周四",abbr:"周四"},{text:"周五",abbr:"周五"},{text:"周六",abbr:"周六"}],INVALID_FORMAT:"日期格式不正確。",INVALID_TIME_FORMAT:"時間格式不正確。",CALENDAR_FOOTER_TEXT:{none:"清空",today:"今天",close:"關閉"},TIME_IS_OUT_OF_VALID_RANGE:"時間超出有效範圍。"},Bt=(e,t)=>{const i=Zt(e,t);let n=new Date(i.start),o=[];const a=[];for(;n<=i.end;)o.push(Gt(n)),7===o.length&&(a.push(o),o=[]),n.setDate(n.getDate()+1),n=new Date(n);return a},Ot=(e,t)=>{let i,n;i=Math.floor(e/60),n=e%60;const o=i%vt<kt?yt:xt;return i=t?i%kt:i%vt,0===i&&t&&(i=kt),i<10&&(i="0"+i),n<10&&(n="0"+n),{label:i+":"+n+(t?" "+o:""),value:i+":"+n+(t?" "+o:"")}},Nt=e=>{const t=e.split(":");let i=parseInt(t[0],10),n=parseInt(t[1],10);return isNaN(i)||isNaN(n)?0:(i<0?i=0:i>=vt&&(i=23),n<0?n=0:n>=60&&(n=59),60*i+n)},Ut=(e,t)=>{const i=Nt(e),n=Nt(t);return i>n?1:i===n?0:-1},Pt=e=>{let t=e%kt;return t=0===t?kt:t,t},zt=e=>e>=kt?xt:yt,Rt=e=>{const[t,i]=e.split(" "),[n,o]=t.split(":");return i?`${jt(n,i)}:${o}`:e},jt=(e,t)=>{const i=parseInt(e,10);return Jt(t===xt?i===kt?12:i+12:i===kt?0:i)},Gt=e=>{const t=new Date(e),i=t.getFullYear(),n=Jt(t.getMonth()+1),o=Jt(t.getDate());return{text:`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`,attr:`${i}-${n}-${o}`}},Ft=(e,t)=>{if(t&&!qt(t)){const i=t.split("-");if(3!==i.length)return t;const n=i[0],o=i[1],a=i[2];return"en"===e?`${o}/${a}/${n}`:`${n}-${o}-${a}`}return t},Wt=(e,t)=>{if(qt(t))return t;const i="en"===e,n=i?"/":"-",o=t.split(n);return`${i?o[2]:o[0]}-${i?o[0]:o[1]}-${i?o[1]:o[2]}`},qt=e=>null==e||0===e.length||!/[^(^\s*)|(\s*$)]/.test(e),Kt=(e="ja")=>{const t=new Date,i=t.getFullYear(),n=Jt(t.getMonth()+1),o=Jt(t.getDate());return"ja"===e||"zh"===e?i+"-"+n+"-"+o:n+"/"+o+"/"+i},Yt=(e,t)=>{if(t&&!qt(t)){const i="en"===e,n=i?"/":"-";if(new Date(`${t}${i?"":"T00:00:00"}`).getDate()!==parseInt(t.split(n)[i?1:2],10))return!1;const o=/^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/(\d{4})$/;if("en"===e)return null!==t.match(o);const a=/^(\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/g;return null!==t.match(a)}return!1},Jt=(e,t=2)=>{const i=`0000000000${e}`;return i.substr(i.length-t)},Zt=(e,t)=>{const i=new Date(e,t);i.setDate(1);const n=new Date(i);n.setDate(n.getDate()-n.getDay());const o=new Date(e,t);o.setMonth(o.getMonth()+1,0);const a=new Date(o);a.setDate(a.getDate()+(6-a.getDay()));const s=(a.getTime()-n.getTime())/864e5;return a.setDate(a.getDate()+(42-s)),{start:n,end:a}},Xt=e=>{switch(e){case"en":default:return Vt;case"zh":return Ht;case"ja":return Lt;case"zh-TW":return Mt}},Qt=e=>{const t=[];t.push({value:`${e} 12`,label:`${e} 12`});for(let i=1;i<=11;i++)t.push({value:`${e} ${Jt(i)}`,label:`${e} ${Jt(i)}`});return t},ei=()=>$e`
     <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.5V1.2764L6 7.5L12 1.2764V0.5L6 6.5L0 0.5Z" fill="#888888"/>
     </svg>
-    `;function ii(e,t){const i=e.querySelector(".kuc-base-datetime-listbox-1-17-0__listbox"),n=ni(e);if(!e.parentElement||!i||!n)return;const{inputToBottom:o,inputToTop:a}=n,s="kuc-base-datetime-header-month-1-17-0"===e.tagName.toLowerCase()?360:300,r=e.parentElement.getBoundingClientRect().height;return i.style.maxHeight=s+"px",e.parentElement.style.position="relative",o>=s?(i.style.height=s+"px","bottom"===t?void(i.style.top=r+"px"):void(i.style.bottom=r+"px")):"bottom"===t?(i.style.top=r+"px",void(i.style.height=o-18+"px")):(i.style.height=a-18+"px",i.style.top="auto",void(i.style.bottom=e.parentElement.getBoundingClientRect().height+"px"))}const ni=e=>{var t,i;if(!e.parentElement)return{inputToBottom:0,inputToTop:0,inputToRight:0,inputToLeft:0};const n=null!==(t=e.closest("kuc-base-date-1-17-0"))&&void 0!==t?t:e.closest("kuc-mobile-base-date-1-17-0"),o=(null!==(i=n.getElementsByClassName("kuc-base-date-1-17-0__input")[0])&&void 0!==i?i:n.getElementsByClassName("kuc-mobile-base-date-1-17-0__group")[0]).getBoundingClientRect().width;return{inputToBottom:window.innerHeight-e.parentElement.getBoundingClientRect().bottom,inputToTop:e.parentElement.getBoundingClientRect().top,inputToRight:window.innerWidth-e.parentElement.getBoundingClientRect().left,inputToLeft:e.parentElement.getBoundingClientRect().left+o}},oi={fromAttribute:e=>null===e,toAttribute:e=>e?null:""},ai={fromAttribute:e=>!e||-1===["en","ja","zh","zh-TW"].indexOf(e),toAttribute:e=>{const t=["en","ja","zh","zh-TW"];return-1!==t.indexOf(e)?e:-1!==t.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}},si=e=>e instanceof HTMLElement?e:vt(e),ri=e=>{if(void 0===e||""===e)return"";let t=[];return e.indexOf("-")>0&&(t=e.split("-")),t.length<2?`${e}-01-01`:2===t.length?`${Zt(t[0],4)}-${Zt(t[1])}-01`:t.length>2?`${Zt(t[0],4)}-${Zt(t[1])}-${Zt(t[2])}`:""},li=e=>{if(5===e.length||""===e)return e;const t=e.indexOf(":"),i=e.substr(0,t),n=e.substr(t+1,5);return`${Zt(i)}:${Zt(n)}`},di={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};let ui;const ci=new Uint8Array(16);function hi(){if(!ui&&(ui="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!ui))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return ui(ci)}const _i=[];for(let e=0;e<256;++e)_i.push((e+256).toString(16).slice(1));const pi=function(e,t,i){if(di.randomUUID&&!t&&!e)return di.randomUUID();const n=(e=e||{}).random||(e.rng||hi)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){i=i||0;for(let e=0;e<16;++e)t[i+e]=n[e];return t}return function(e,t=0){return _i[e[t+0]]+_i[e[t+1]]+_i[e[t+2]]+_i[e[t+3]]+"-"+_i[e[t+4]]+_i[e[t+5]]+"-"+_i[e[t+6]]+_i[e[t+7]]+"-"+_i[e[t+8]]+_i[e[t+9]]+"-"+_i[e[t+10]]+_i[e[t+11]]+_i[e[t+12]]+_i[e[t+13]]+_i[e[t+14]]+_i[e[t+15]]}(n)};class bi extends ze{createRenderRoot(){return this}async throwErrorAfterUpdateComplete(e){throw await this.updateComplete,new Error(e)}}const gi=(e,t,i)=>{const n=new CustomEvent(t,{detail:i,bubbles:!0,composed:!0});return e.dispatchEvent(n)},mi=e=>{const t="kuc-style-1-17-0";let i=document.getElementById(t);i||(i=document.createElement("style"),i.id=t,document.head.appendChild(i)),i.appendChild(document.createTextNode(e))},fi=()=>pi();function vi(e){if(!e||"object"!=typeof e)return{};const t={...e};for(const e in t)Object.prototype.hasOwnProperty.call(t,e)&&void 0===t[e]&&delete t[e];return t}function ki(e){return!(""!==e&&void 0!==e&&!/(^(\d{1,4})-(0?[1-9]|1[0-2])-(0?[1-9]|[12][0-9]|3[01])$)|(^(\d{1,4})$)|(^(\d{1,4})-(0?[1-9]|1[0-2])$)/g.test(e))}function yi(e){return!(""!==e&&!/^(2[0-3]|[01]?[0-9]):([0-9]|[0-5][0-9])$/.test(e))}function xi(e,t,i){const n=Math.round(e),o=Ut(t),a=Ut(i);return!isNaN(n)&&n>0&&n<=o-a}function wi(e){const[t,i,n]=e.split("-"),o=new Date(`${e}T00:00:00`),a=o.getFullYear(),s=o.getMonth(),r=o.getDate();return a===Number(t)&&s===Number(i)-1&&r===Number(n)}function $i(e){return"string"==typeof e}function Ci(e,t){return!(!/(^(\d{4})-(0[0-9]|1[0-2])-(0[1-9]|([12][0-9]|3[01]))$)|(^(\d{4})$)|(^(\d{4})-(0[0-9]|1[0-2])$)/g.test(e)||!/(^([01][0-9]|2[0-3])$)|(^([01][0-9]|2[0-3]):([0-5][0-9]))$|(^([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9])$/.test(t))}function Ii(e){return e.length<2||!e.some((t=>e.indexOf(t)!==e.lastIndexOf(t)))}function Ei(e){return!(e<.5||!Si(e))}function Si(e){return"number"==typeof e&&!Number.isNaN(e)}function Ti(e){return Array.isArray(e)}var Ai=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Di;(()=>{if(Di=window.customElements.get("kuc-attachment-1-17-0"),!Di){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.message="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.files=[],this._isDraging=!1,this._dragEnterCounter=0,this._locale=this._getLocale(),this._isFileOrDirectoryDrag=e=>{if(!e.dataTransfer)return!1;if(void 0!==e.dataTransfer.items)for(let t=0;t<e.dataTransfer.items.length;t++)if("file"===e.dataTransfer.items[t].kind.toLowerCase())return!0;if(void 0!==e.dataTransfer.types)for(let t=0;t<e.dataTransfer.types.length;t++)if("files"===e.dataTransfer.types[t].toLowerCase())return!0;return!1},this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!(e.has("files")&&!Ti(this.files)&&(this.throwErrorAfterUpdateComplete(st),1))}willUpdate(e){return e.has("language")&&(this._locale=this._getLocale()),!0}render(){return $e`
-      <div class="kuc-attachment-1-17-0__group">
+    `;function ti(e,t){const i=e.querySelector(".kuc-base-datetime-listbox-1-17-1__listbox"),n=ii(e);if(!e.parentElement||!i||!n)return;const{inputToBottom:o,inputToTop:a}=n,s="kuc-base-datetime-header-month-1-17-1"===e.tagName.toLowerCase()?360:300,r=e.parentElement.getBoundingClientRect().height;return i.style.maxHeight=s+"px",e.parentElement.style.position="relative",o>=s?(i.style.height=s+"px","bottom"===t?void(i.style.top=r+"px"):void(i.style.bottom=r+"px")):"bottom"===t?(i.style.top=r+"px",void(i.style.height=o-18+"px")):(i.style.height=a-18+"px",i.style.top="auto",void(i.style.bottom=e.parentElement.getBoundingClientRect().height+"px"))}const ii=e=>{var t,i;if(!e.parentElement)return{inputToBottom:0,inputToTop:0,inputToRight:0,inputToLeft:0};const n=null!==(t=e.closest("kuc-base-date-1-17-1"))&&void 0!==t?t:e.closest("kuc-mobile-base-date-1-17-1"),o=(null!==(i=n.getElementsByClassName("kuc-base-date-1-17-1__input")[0])&&void 0!==i?i:n.getElementsByClassName("kuc-mobile-base-date-1-17-1__group")[0]).getBoundingClientRect().width;return{inputToBottom:window.innerHeight-e.parentElement.getBoundingClientRect().bottom,inputToTop:e.parentElement.getBoundingClientRect().top,inputToRight:window.innerWidth-e.parentElement.getBoundingClientRect().left,inputToLeft:e.parentElement.getBoundingClientRect().left+o}},ni={fromAttribute:e=>null===e,toAttribute:e=>e?null:""},oi={fromAttribute:e=>!e||-1===["en","ja","zh","zh-TW"].indexOf(e),toAttribute:e=>{const t=["en","ja","zh","zh-TW"];return-1!==t.indexOf(e)?e:-1!==t.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}},ai=e=>e instanceof HTMLElement?e:ft(e),si=e=>{if(void 0===e||""===e)return"";let t=[];return e.indexOf("-")>0&&(t=e.split("-")),t.length<2?`${e}-01-01`:2===t.length?`${Jt(t[0],4)}-${Jt(t[1])}-01`:t.length>2?`${Jt(t[0],4)}-${Jt(t[1])}-${Jt(t[2])}`:""},ri=e=>{if(5===e.length||""===e)return e;const t=e.indexOf(":"),i=e.substr(0,t),n=e.substr(t+1,5);return`${Jt(i)}:${Jt(n)}`},li={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};var di,ui=new Uint8Array(16);function ci(){if(!di&&!(di="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return di(ui)}for(var hi=[],_i=0;_i<256;++_i)hi.push((_i+256).toString(16).slice(1));const pi=function(e,t,i){if(li.randomUUID&&!t&&!e)return li.randomUUID();var n=(e=e||{}).random||(e.rng||ci)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){i=i||0;for(var o=0;o<16;++o)t[i+o]=n[o];return t}return function(e,t=0){return(hi[e[t+0]]+hi[e[t+1]]+hi[e[t+2]]+hi[e[t+3]]+"-"+hi[e[t+4]]+hi[e[t+5]]+"-"+hi[e[t+6]]+hi[e[t+7]]+"-"+hi[e[t+8]]+hi[e[t+9]]+"-"+hi[e[t+10]]+hi[e[t+11]]+hi[e[t+12]]+hi[e[t+13]]+hi[e[t+14]]+hi[e[t+15]]).toLowerCase()}(n)};class bi extends Pe{createRenderRoot(){return this}async throwErrorAfterUpdateComplete(e){throw await this.updateComplete,new Error(e)}}const gi=(e,t,i)=>{const n=new CustomEvent(t,{detail:i,bubbles:!0,composed:!0});return e.dispatchEvent(n)},mi=e=>{const t="kuc-style-1-17-1";let i=document.getElementById(t);i||(i=document.createElement("style"),i.id=t,document.head.appendChild(i)),i.appendChild(document.createTextNode(e))},fi=()=>pi();function vi(e){if(!e||"object"!=typeof e)return{};const t={...e};for(const e in t)Object.prototype.hasOwnProperty.call(t,e)&&void 0===t[e]&&delete t[e];return t}function ki(e){return!(""!==e&&void 0!==e&&!/(^(\d{1,4})-(0?[1-9]|1[0-2])-(0?[1-9]|[12][0-9]|3[01])$)|(^(\d{1,4})$)|(^(\d{1,4})-(0?[1-9]|1[0-2])$)/g.test(e))}function yi(e){return!(""!==e&&!/^(2[0-3]|[01]?[0-9]):([0-9]|[0-5][0-9])$/.test(e))}function xi(e,t,i){const n=Math.round(e),o=Nt(t),a=Nt(i);return!isNaN(n)&&n>0&&n<=o-a}function wi(e){const[t,i,n]=e.split("-"),o=new Date(`${e}T00:00:00`),a=o.getFullYear(),s=o.getMonth(),r=o.getDate();return a===Number(t)&&s===Number(i)-1&&r===Number(n)}function $i(e){return"string"==typeof e}function Ci(e,t){return!(!/(^(\d{4})-(0[0-9]|1[0-2])-(0[1-9]|([12][0-9]|3[01]))$)|(^(\d{4})$)|(^(\d{4})-(0[0-9]|1[0-2])$)/g.test(e)||!/(^([01][0-9]|2[0-3])$)|(^([01][0-9]|2[0-3]):([0-5][0-9]))$|(^([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9])$/.test(t))}function Ii(e){return e.length<2||!e.some((t=>e.indexOf(t)!==e.lastIndexOf(t)))}function Ei(e){return!(e<.5||!Si(e))}function Si(e){return"number"==typeof e&&!Number.isNaN(e)}function Ti(e){return Array.isArray(e)}var Ai=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Di;(()=>{if(Di=window.customElements.get("kuc-attachment-1-17-1"),!Di){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.message="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.files=[],this._isDraging=!1,this._dragEnterCounter=0,this._locale=this._getLocale(),this._isFileOrDirectoryDrag=e=>{if(!e.dataTransfer)return!1;if(void 0!==e.dataTransfer.items)for(let t=0;t<e.dataTransfer.items.length;t++)if("file"===e.dataTransfer.items[t].kind.toLowerCase())return!0;if(void 0!==e.dataTransfer.types)for(let t=0;t<e.dataTransfer.types.length;t++)if("files"===e.dataTransfer.types[t].toLowerCase())return!0;return!1},this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!(e.has("files")&&!Ti(this.files)&&(this.throwErrorAfterUpdateComplete(at),1))}willUpdate(e){return e.has("language")&&(this._locale=this._getLocale()),!0}render(){return we`
+      <div class="kuc-attachment-1-17-1__group">
         <label
-          class="kuc-attachment-1-17-0__group__label"
+          class="kuc-attachment-1-17-1__group__label"
           ?hidden="${!this.label}"
           for="${this._GUID}-input"
           @click="${this._handleClickLabel}"
         >
-          <kuc-base-label-1-17-0
+          <kuc-base-label-1-17-1
             .text="${this.label}"
             .requiredIcon="${this.requiredIcon}"
-          ></kuc-base-label-1-17-0>
+          ></kuc-base-label-1-17-1>
         </label>
         <div
-          class="kuc-attachment-1-17-0__group__files ${this.disabled?" kuc-attachment-1-17-0__group__files--disabled":""}"
+          class="kuc-attachment-1-17-1__group__files ${this.disabled?" kuc-attachment-1-17-1__group__files--disabled":""}"
           @dragenter="${this._handleDragEnter}"
           @dragover="${this._handleDragOver}"
           @dragleave="${this._handleDragLeave}"
+          @drop="${this._handleDragDrop}"
         >
           <div
-            class="kuc-attachment-1-17-0__group__files__droppable"
-            @drop="${this._handleDragDrop}"
+            class="kuc-attachment-1-17-1__group__files__droppable"
             ?hidden="${!this._isDraging}"
           >
-          <div class="kuc-attachment-1-17-0__group__files__droppable__text">${this._locale.ATTACHMENT_DRAG_DROP_ZONE}</div>
+          <div class="kuc-attachment-1-17-1__group__files__droppable__text">${this._locale.ATTACHMENT_DRAG_DROP_ZONE}</div>
           </div>
           <ul
-            class="kuc-attachment-1-17-0__group__files__display-area"
-            ?hidden="${this._isDraging}"
+            class="kuc-attachment-1-17-1__group__files__display-area${this._isDraging?" kuc-attachment-1-17-1__group__files__not-droppable--dragenter":""}"
           >
           ${this.files.map(((e,t)=>this._getAttachmentItemTemplate(e,t)))}
           </ul>
-          <div class="kuc-attachment-1-17-0__group__files__browse-button"
-          ?hidden="${this._isDraging||this.disabled}">
-            <span class="kuc-attachment-1-17-0__group__files__browse-button__text">${this._locale.ATTACHMENT_BROWSE}</span>
-            <div class="kuc-attachment-1-17-0__group__files__browse-button__input-container">
-              <input class="kuc-attachment-1-17-0__group__files__browse-button__input-container__input" type="file" multiple 
+          <div class="kuc-attachment-1-17-1__group__files__browse-button${this._isDraging?" kuc-attachment-1-17-1__group__files__not-droppable--dragenter":""}"
+          ?hidden="${this.disabled}">
+            <span class="kuc-attachment-1-17-1__group__files__browse-button__text">${this._locale.ATTACHMENT_BROWSE}</span>
+            <div class="kuc-attachment-1-17-1__group__files__browse-button__input-container">
+              <input class="kuc-attachment-1-17-1__group__files__browse-button__input-container__input" type="file" multiple 
               .id="${this._GUID}-input"
               aria-required="${this.requiredIcon}"
               aria-invalid="${this.error}"
@@ -47,33 +46,33 @@
               @change="${this._handleChangeFiles}"></input>
             </div>
           </div>
-          <p class="kuc-attachment-1-17-0__group__files__browse-message${this.disabled?" kuc-attachment-1-17-0__group__files__browse-message--disabled":""}"
+          <p class="kuc-attachment-1-17-1__group__files__browse-message${this.disabled?" kuc-attachment-1-17-1__group__files__browse-message--disabled":""}"
             ?hidden="${!this.message}"
           >
             ${this.message}
           </p>
         </div>
-        <kuc-base-error-1-17-0
-          class="kuc-attachment-1-17-0__error"
+        <kuc-base-error-1-17-1
+          class="kuc-attachment-1-17-1__error"
           ?hidden="${!this.error}"
           .text="${this.error}"
           .guid="${this._GUID}"
-        ></kuc-base-error-1-17-0>
+        ></kuc-base-error-1-17-1>
       </div>
-    `}_getAttachmentItemTemplate(e,t){return $e`
-        <li class="kuc-attachment-1-17-0__group__files__display-area__item">
+    `}_getAttachmentItemTemplate(e,t){return we`
+        <li class="kuc-attachment-1-17-1__group__files__display-area__item">
           <div
             title="${e.name||""}"
-            class="kuc-attachment-1-17-0__group__files__display-area__item__name"
+            class="kuc-attachment-1-17-1__group__files__display-area__item__name"
           >
             ${e.name||""}
           </div>
           <div
-            class="kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container"
+            class="kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container"
             ?hidden="${this.disabled}"
           >
             <button
-              class="kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container__button"
+              class="kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container__button"
               aria-label="Cancel File"
               data-file-index="${t}"
               @click="${this._handleClickFileRemove}"
@@ -82,11 +81,11 @@
               ${this._getRemoveButtonIcon()}
             </button>
           </div>
-          <span class="kuc-attachment-1-17-0__group__files__display-area__item__size">
+          <span class="kuc-attachment-1-17-1__group__files__display-area__item__size">
             ${this._getFileSize(e.size)}
           </span>
         </li>
-      `}async updated(e){await this.updateComplete,this._updateFileNameMaxWidth()}_updateFileNameMaxWidth(){const e=this._labelEl.getBoundingClientRect().width;this._fileItemsEl.forEach((t=>{t.style.maxWidth=`calc(var(--kuc-attachment-width, ${e<191?191:e}px) - 14px)`}))}_getRemoveButtonIcon(){return Ce`<svg
+      `}async updated(e){await this.updateComplete,this._updateFileNameMaxWidth()}_updateFileNameMaxWidth(){const e=this._labelEl.getBoundingClientRect().width;this._fileItemsEl.forEach((t=>{t.style.maxWidth=`calc(var(--kuc-attachment-width, ${e<191?191:e}px) - 14px)`}))}_getRemoveButtonIcon(){return $e`<svg
         xmlns="http://www.w3.org/2000/svg"
         width="14"
         height="14"
@@ -99,19 +98,19 @@
           d="M5.93933 7.00001L1.96966 3.03034L1.43933 2.50001L2.49999 1.43935L3.03032 1.96968L6.99999 5.93935L10.9697 1.96968L11.5 1.43935L12.5607 2.50001L12.0303 3.03034L8.06065 7.00001L12.0303 10.9697L12.5607 11.5L11.5 12.5607L10.9697 12.0303L6.99999 8.06067L3.03032 12.0303L2.49999 12.5607L1.43933 11.5L1.96966 10.9697L5.93933 7.00001Z"
           fill="#a8a8a8"
         />
-      </svg>`}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_getLocale(){switch(this._getLanguage()){case"en":default:return Qe;case"zh":return tt;case"zh-TW":return it;case"ja":return et}}_handleClickFileRemove(e){const t=e.currentTarget,i=parseInt(t.getAttribute("data-file-index"),10);if(this.files){i===this.files.length-1&&this._inputEl.focus();const e=[...this.files];this.files.splice(i,1);const t={oldFiles:e,files:this.files,type:"remove-file",fileIndex:[i]};gi(this,"change",t),this.requestUpdate(),i<=this.files.length-1&&this._fileRemoveButtons[i].focus()}}_handleClickLabel(e){e.preventDefault()}_handleDragEnter(e){if(!this.disabled&&(this._dragEnterCounter++,1===this._dragEnterCounter&&this._isFileOrDirectoryDrag(e))){e.preventDefault();const t=2,i=1;this._groupFilesEl.style.height=this._groupFilesEl.getBoundingClientRect().height+"px",this._dragTextEl.style.width=this._groupFilesEl.getBoundingClientRect().width-2*i+"px",this._dragTextEl.style.height=this._groupFilesEl.getBoundingClientRect().height-2*(i+t)+"px",this._isDraging=!0}}_handleDragOver(e){this.disabled||(e.stopPropagation(),this._isFileOrDirectoryDrag(e)&&e.preventDefault())}_handleDragDrop(e){this.disabled||(e.preventDefault(),this._handleDragLeave(),this._isFileDrop(e)&&this._addFiles(e))}_isFileDrop(e){var t;if(e.dataTransfer&&e.dataTransfer.items)for(let i=0;i<e.dataTransfer.items.length;i++)if("function"==typeof e.dataTransfer.items[i].webkitGetAsEntry&&(null===(t=e.dataTransfer.items[i].webkitGetAsEntry())||void 0===t?void 0:t.isDirectory))return!1;return!0}_handleDragLeave(){this.disabled||(this._dragEnterCounter--,0===this._dragEnterCounter&&(this._groupFilesEl.style.height="var(--kuc-attachment-height, auto)",this._isDraging=!1))}_handleChangeFiles(e){e.preventDefault(),e.stopPropagation(),this._addFiles(e)}_addFiles(e){if(this.files){let t=e.dataTransfer?e.dataTransfer.files:e.target.files;t=Object.keys(t).map((e=>t[e]));const i=[...this.files],n=t.map(((e,t)=>i.length+t));t.forEach((e=>this.files.push(e)));const o={oldFiles:i,files:this.files,type:"add-file",fileIndex:n};gi(this,"change",o),this.requestUpdate()}this._inputEl.value=""}_getFileSize(e){return"number"==typeof e?this._formatFileSize(e):/^[1-9]\d*$/.test(e)?this._formatFileSize(parseInt(e,10)):"NaN size"}_formatFileSize(e){return e>=Xe?Math.round(e/Xe)+" GB":e>=Ze?Math.round(e/Ze)+" MB":e>=1024?Math.round(e/1024)+" KB":Math.round(e)+" bytes"}}Ai([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Ai([Fe({type:String})],e.prototype,"error",void 0),Ai([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Ai([Fe({type:String})],e.prototype,"label",void 0),Ai([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),Ai([Fe({type:String})],e.prototype,"message",void 0),Ai([Fe({type:Boolean})],e.prototype,"disabled",void 0),Ai([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Ai([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Ai([Fe({type:Array})],e.prototype,"files",void 0),Ai([We()],e.prototype,"_isDraging",void 0),Ai([Ke(".kuc-attachment-1-17-0__group__files")],e.prototype,"_groupFilesEl",void 0),Ai([Ke(".kuc-attachment-1-17-0__group__files__droppable__text")],e.prototype,"_dragTextEl",void 0),Ai([Ke(".kuc-attachment-1-17-0__group__files__browse-button__input-container__input")],e.prototype,"_inputEl",void 0),Ai([Ke(".kuc-attachment-1-17-0__group__label")],e.prototype,"_labelEl",void 0),Ai([Je(".kuc-attachment-1-17-0__group__files__display-area__item__name")],e.prototype,"_fileItemsEl",void 0),Ai([Je(".kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container__button")],e.prototype,"_fileRemoveButtons",void 0),window.customElements.define("kuc-attachment-1-17-0",e),mi('\n  kuc-attachment-1-17-0,\n  kuc-attachment-1-17-0 *,\n  kuc-attachment-1-17-0:lang(en),\n  kuc-attachment-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-attachment-1-17-0:lang(ja),\n  kuc-attachment-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n        sans-serif;\n  }\n  kuc-attachment-1-17-0:lang(zh),\n  kuc-attachment-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", sans-serif;\n  }\n  kuc-attachment-1-17-0:lang(zh-TW),\n  kuc-attachment-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n        Hei,"Heiti SC",sans-serif;\n  }\n  kuc-attachment-1-17-0 {\n    font-size: 14px;\n    display: inline-table;\n    vertical-align: top;\n    width: var(--kuc-attachment-width, 191px);\n    min-width: var(--kuc-attachment-width, 191px);\n  }\n  kuc-attachment-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-0__group {\n    width: 100%;\n    height: auto;\n    box-sizing: border-box;\n    position: relative;\n    display: block;\n  }\n  .kuc-attachment-1-17-0__group__label {\n    display: inline-block;\n    padding: 4px 0 8px 0;\n    color: #333333;\n    white-space: nowrap;\n  }\n  .kuc-attachment-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-0__group__files {\n    border: solid 1px #e3e7e8;\n    background-color: #eeeeee;\n    padding: 16px 4px;\n    display: block;\n    font-size: 14px;\n    overflow: hidden;\n    position: relative;\n    box-sizing: border-box;\n    width: var(--kuc-attachment-width, auto);\n    height: var(--kuc-attachment-height, auto);\n  }\n  .kuc-attachment-1-17-0__group__files--disabled {\n    cursor: not-allowed;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button {\n    border: 1px solid transparent;\n    position: relative;\n    display: inline-block;\n    margin-right: 16px;\n    padding: 8px;\n    text-decoration: none;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button[hidden]{\n    display: none\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button:focus-within {\n    border: 1px solid #3498db;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button:hover\n  .kuc-attachment-1-17-0__group__files__browse-button__text {\n    color: #217dbb;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button__text {\n    color: #3498db;\n    font-size: 14px;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button__input-container {\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    display: inline-block;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button__input-container__input {\n    cursor: pointer;\n    font-size: 999px;\n    vertical-align: middle;\n    height: 100%;\n    width: 100%;\n    line-height: 1.5;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area {\n    padding-inline-start: 0px;\n    list-style-type: disc;\n    margin-block-start: 0em;\n    margin-block-end: 0em;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item {\n    position: relative;\n    margin-bottom: 8px;\n    height: auto;\n    min-height: 24px;\n    border: 2px solid #f1f4f5;\n    background-color: #f1f4f5;\n    list-style: none;\n    display: flex;\n    align-items: center;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__name {\n    display: inline-block;\n    padding: 3px calc(4.6em + 4px) 3px 26px;\n    width: 100%;\n    max-width: 177px;\n    box-sizing: border-box;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-wrap: normal;\n    font-size: var(--kuc-attachment-item-font-size, 14px);\n    line-height: 1.2;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 12px);\n    left: 0;\n    width: 24px;\n    height: 24px;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container__button {\n    background-color: #f2f4f6;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid transparent;\n    padding: 0px;\n    width:100%;\n    height:100%;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container__button:hover {\n    background: #d8e1e6;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container__button:focus-within {\n    border: 1px solid #3498db;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container__button:focus {\n    outline: none;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__size {\n    display: inline-block;\n    position: absolute;\n    right: 0;\n    color: #888888;\n    padding: 0 3px 0 0;\n    max-width: 4.6em;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-wrap: normal;\n    font-size: var(--kuc-attachment-item-font-size, 14px);\n    line-height: 1.2;\n  }\n  .kuc-attachment-1-17-0__group__files__droppable {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin: auto 0;\n  }\n  .kuc-attachment-1-17-0__group__files__droppable[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-0__group__files__droppable__text {\n    background-color: #e2f2fe;\n    border: dashed 2px #3498db;\n    display: table-cell;\n    vertical-align: middle;\n    text-align: center;\n    color: #3498db;\n    font-size: 14px;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-message {\n    display: inline-block;\n    color: var(--kuc-attachment-message-color, #888888);\n    font-size: var(--kuc-attachment-message-font-size, 14px);\n    margin: 3px 0 0;\n    word-break: break-all;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-message--disabled {\n    color: #888888;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-message[hidden] {\n    display: none;\n  }\n'),Di=e}})();var Vi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Li;(()=>{if(Li=window.customElements.get("kuc-button-1-17-0"),!Li){class e extends bi{constructor(e){super(),this.className="",this.id="",this.text="",this.type="normal",this.content="",this.disabled=!1,this.visible=!0;const t=vi(e);Object.assign(this,t)}_handleClickButton(e){e.stopPropagation(),gi(this,"click")}_getButtonColorType(){return"normal"===this.type||"submit"===this.type||"alert"===this.type?this.type:"normal"}render(){return $e`
+      </svg>`}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_getLocale(){switch(this._getLanguage()){case"en":default:return Xe;case"zh":return et;case"zh-TW":return tt;case"ja":return Qe}}_handleClickFileRemove(e){const t=e.currentTarget,i=parseInt(t.getAttribute("data-file-index"),10);if(this.files){i===this.files.length-1&&this._inputEl.focus();const e=[...this.files];this.files.splice(i,1);const t={oldFiles:e,files:this.files,type:"remove-file",fileIndex:[i]};gi(this,"change",t),this.requestUpdate(),i<=this.files.length-1&&this._fileRemoveButtons[i].focus()}}_handleClickLabel(e){e.preventDefault()}_handleDragEnter(e){if(!this.disabled&&(this._dragEnterCounter++,1===this._dragEnterCounter&&this._isFileOrDirectoryDrag(e))){e.preventDefault();const t=2,i=1;this._groupFilesEl.style.height=this._groupFilesEl.getBoundingClientRect().height+"px",this._dragTextEl.style.width=this._groupFilesEl.getBoundingClientRect().width-2*i+"px",this._dragTextEl.style.height=this._groupFilesEl.getBoundingClientRect().height-2*(i+t)+"px",this._isDraging=!0}}_handleDragOver(e){this.disabled||(e.stopPropagation(),this._isFileOrDirectoryDrag(e)&&e.preventDefault())}_handleDragDrop(e){!this.disabled&&this._isDraging&&(e.preventDefault(),this._handleDragLeave(),this._isFileDrop(e)&&this._addFiles(e))}_isFileDrop(e){var t;if(e.dataTransfer&&e.dataTransfer.items)for(let i=0;i<e.dataTransfer.items.length;i++)if("function"==typeof e.dataTransfer.items[i].webkitGetAsEntry&&(null===(t=e.dataTransfer.items[i].webkitGetAsEntry())||void 0===t?void 0:t.isDirectory))return!1;return!0}_handleDragLeave(){this.disabled||(this._dragEnterCounter--,0===this._dragEnterCounter&&(this._groupFilesEl.style.height="var(--kuc-attachment-height, auto)",this._isDraging=!1))}_handleChangeFiles(e){e.preventDefault(),e.stopPropagation(),this._addFiles(e)}_addFiles(e){if(this.files){let t=e.dataTransfer?e.dataTransfer.files:e.target.files;t=Object.keys(t).map((e=>t[e]));const i=[...this.files],n=t.map(((e,t)=>i.length+t));t.forEach((e=>this.files.push(e)));const o={oldFiles:i,files:this.files,type:"add-file",fileIndex:n};gi(this,"change",o),this.requestUpdate()}this._inputEl.value=""}_getFileSize(e){return"number"==typeof e?this._formatFileSize(e):/^[1-9]\d*$/.test(e)?this._formatFileSize(parseInt(e,10)):"NaN size"}_formatFileSize(e){return e>=Ze?Math.round(e/Ze)+" GB":e>=Je?Math.round(e/Je)+" MB":e>=1024?Math.round(e/1024)+" KB":Math.round(e)+" bytes"}}Ai([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Ai([Ge({type:String})],e.prototype,"error",void 0),Ai([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Ai([Ge({type:String})],e.prototype,"label",void 0),Ai([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),Ai([Ge({type:String})],e.prototype,"message",void 0),Ai([Ge({type:Boolean})],e.prototype,"disabled",void 0),Ai([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Ai([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Ai([Ge({type:Array})],e.prototype,"files",void 0),Ai([Fe()],e.prototype,"_isDraging",void 0),Ai([qe(".kuc-attachment-1-17-1__group__files")],e.prototype,"_groupFilesEl",void 0),Ai([qe(".kuc-attachment-1-17-1__group__files__droppable__text")],e.prototype,"_dragTextEl",void 0),Ai([qe(".kuc-attachment-1-17-1__group__files__browse-button__input-container__input")],e.prototype,"_inputEl",void 0),Ai([qe(".kuc-attachment-1-17-1__group__label")],e.prototype,"_labelEl",void 0),Ai([Ye(".kuc-attachment-1-17-1__group__files__display-area__item__name")],e.prototype,"_fileItemsEl",void 0),Ai([Ye(".kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container__button")],e.prototype,"_fileRemoveButtons",void 0),window.customElements.define("kuc-attachment-1-17-1",e),mi('\n  kuc-attachment-1-17-1,\n  kuc-attachment-1-17-1 *,\n  kuc-attachment-1-17-1:lang(en),\n  kuc-attachment-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-attachment-1-17-1:lang(ja),\n  kuc-attachment-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n        sans-serif;\n  }\n  kuc-attachment-1-17-1:lang(zh),\n  kuc-attachment-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", sans-serif;\n  }\n  kuc-attachment-1-17-1:lang(zh-TW),\n  kuc-attachment-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n        Hei,"Heiti SC",sans-serif;\n  }\n  kuc-attachment-1-17-1 {\n    font-size: 14px;\n    display: inline-table;\n    vertical-align: top;\n    width: var(--kuc-attachment-width, 191px);\n    min-width: var(--kuc-attachment-width, 191px);\n  }\n  kuc-attachment-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-1__group {\n    width: 100%;\n    height: auto;\n    box-sizing: border-box;\n    position: relative;\n    display: block;\n  }\n  .kuc-attachment-1-17-1__group__label {\n    display: inline-block;\n    padding: 4px 0 8px 0;\n    color: #333333;\n    white-space: nowrap;\n  }\n  .kuc-attachment-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-1__group__files {\n    border: solid 1px #e3e7e8;\n    background-color: #eeeeee;\n    padding: 16px 4px;\n    display: block;\n    font-size: 14px;\n    overflow: hidden;\n    position: relative;\n    box-sizing: border-box;\n    width: var(--kuc-attachment-width, auto);\n    height: var(--kuc-attachment-height, auto);\n  }\n  .kuc-attachment-1-17-1__group__files--disabled {\n    cursor: not-allowed;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button {\n    border: 1px solid transparent;\n    position: relative;\n    display: inline-block;\n    margin-right: 16px;\n    padding: 8px;\n    text-decoration: none;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button[hidden]{\n    display: none;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button:focus-within {\n    border: 1px solid #3498db;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button:hover\n  .kuc-attachment-1-17-1__group__files__browse-button__text {\n    color: #217dbb;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button__text {\n    color: #3498db;\n    font-size: 14px;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button__input-container {\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    display: inline-block;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button__input-container__input {\n    cursor: pointer;\n    font-size: 999px;\n    vertical-align: middle;\n    height: 100%;\n    width: 100%;\n    line-height: 1.5;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area {\n    padding-inline-start: 0px;\n    list-style-type: disc;\n    margin-block-start: 0em;\n    margin-block-end: 0em;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item {\n    position: relative;\n    margin-bottom: 8px;\n    height: auto;\n    min-height: 24px;\n    border: 2px solid #f1f4f5;\n    background-color: #f1f4f5;\n    list-style: none;\n    display: flex;\n    align-items: center;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__name {\n    display: inline-block;\n    padding: 3px calc(4.6em + 4px) 3px 26px;\n    width: 100%;\n    max-width: 177px;\n    box-sizing: border-box;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-wrap: normal;\n    font-size: var(--kuc-attachment-item-font-size, 14px);\n    line-height: 1.2;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 12px);\n    left: 0;\n    width: 24px;\n    height: 24px;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container__button {\n    background-color: #f2f4f6;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid transparent;\n    padding: 0px;\n    width:100%;\n    height:100%;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container__button:hover {\n    background: #d8e1e6;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container__button:focus-within {\n    border: 1px solid #3498db;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container__button:focus {\n    outline: none;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__size {\n    display: inline-block;\n    position: absolute;\n    right: 0;\n    color: #888888;\n    padding: 0 3px 0 0;\n    max-width: 4.6em;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-wrap: normal;\n    font-size: var(--kuc-attachment-item-font-size, 14px);\n    line-height: 1.2;\n  }\n  .kuc-attachment-1-17-1__group__files__droppable {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin: auto 0;\n  }\n  .kuc-attachment-1-17-1__group__files__droppable[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-1__group__files__droppable__text {\n    background-color: #e2f2fe;\n    border: dashed 2px #3498db;\n    display: table-cell;\n    vertical-align: middle;\n    text-align: center;\n    color: #3498db;\n    font-size: 14px;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-message {\n    display: inline-block;\n    color: var(--kuc-attachment-message-color, #888888);\n    font-size: var(--kuc-attachment-message-font-size, 14px);\n    margin: 3px 0 0;\n    word-break: break-all;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-message--disabled {\n    color: #888888;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-message[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-1__group__files__not-droppable--dragenter {\n    visibility: hidden;\n  }\n'),Di=e}})();var Vi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Li;(()=>{if(Li=window.customElements.get("kuc-button-1-17-1"),!Li){class e extends bi{constructor(e){super(),this.className="",this.id="",this.text="",this.type="normal",this.content="",this.disabled=!1,this.visible=!0;const t=vi(e);Object.assign(this,t)}_handleClickButton(e){e.stopPropagation(),gi(this,"click")}_getButtonColorType(){return"normal"===this.type||"submit"===this.type||"alert"===this.type?this.type:"normal"}render(){return we`
         <button
           type="button"
-          class="kuc-button-1-17-0__button kuc-button-1-17-0__button--${this._getButtonColorType()}"
+          class="kuc-button-1-17-1__button kuc-button-1-17-1__button--${this._getButtonColorType()}"
           ?disabled="${this.disabled}"
           @click="${this._handleClickButton}"
         >
-          ${this.content?si(this.content):this.text}
+          ${this.content?ai(this.content):this.text}
         </button>
-      `}}Vi([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Vi([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Vi([Fe({type:String})],e.prototype,"text",void 0),Vi([Fe({type:String})],e.prototype,"type",void 0),Vi([Fe()],e.prototype,"content",void 0),Vi([Fe({type:Boolean})],e.prototype,"disabled",void 0),Vi([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),window.customElements.define("kuc-button-1-17-0",e),mi('\n  kuc-button-1-17-0,\n  kuc-button-1-17-0 *,\n  kuc-button-1-17-0:lang(en),\n  kuc-button-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-button-1-17-0:lang(ja),\n  kuc-button-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;\n  }\n  kuc-button-1-17-0:lang(zh),\n  kuc-button-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti, Hei,\n      "Heiti SC", sans-serif;\n  }\n  kuc-button-1-17-0:lang(zh-TW),\n  kuc-button-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-button-1-17-0 {\n    display: inline-block;\n    vertical-align: top;\n  }\n  kuc-button-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-button-1-17-0__button {\n    display: grid;\n    align-items: center;\n    align-content: center;\n    font-size: var(--kuc-button-font-size, 16px);\n    width: var(--kuc-button-width, "auto");\n    height: var(--kuc-button-height, 48px);\n    min-width: var(--kuc-button-width, 163px);\n    padding: 0px 16px;\n    user-select: none;\n    white-space: nowrap;\n  }\n  .kuc-button-1-17-0__button--normal {\n    background-color: var(--kuc-button-background-color, #f7f9fa);\n    color: var(--kuc-button-text-color, #3498db);\n    border: 1px solid #e3e7e8;\n  }\n  .kuc-button-1-17-0__button--normal:hover,\n  .kuc-button-1-17-0__button--normal:focus-visible,\n  .kuc-button-1-17-0__button--normal:active {\n    cursor: pointer;\n  }\n  .kuc-button-1-17-0__button--normal:hover {\n    background-color: var(--kuc-button-background-color-hover, #c8d6dd);\n  }\n  .kuc-button-1-17-0__button--normal:focus-visible {\n    background-color: var(--kuc-button-background-color-focus, #c8d6dd);\n  }\n  .kuc-button-1-17-0__button--normal:active {\n    background-color: var(--kuc-button-background-color-active, #c8d6dd);\n  }\n  .kuc-button-1-17-0__button--submit {\n    background-color: var(--kuc-button-background-color, #3498db);\n    color: var(--kuc-button-text-color, #ffffff);\n    border: 1px solid #e3e7e8;\n  }\n  .kuc-button-1-17-0__button--submit:hover,\n  .kuc-button-1-17-0__button--submit:focus-visible,\n  .kuc-button-1-17-0__button--submit:active {\n    cursor: pointer;\n  }\n  .kuc-button-1-17-0__button--submit:hover {\n    background-color: var(--kuc-button-background-color-hover, #1d6fa5);\n  }\n  .kuc-button-1-17-0__button--submit:focus-visible {\n    background-color: var(--kuc-button-background-color-focus, #1d6fa5);\n  }\n  .kuc-button-1-17-0__button--submit:active {\n    background-color: var(--kuc-button-background-color-active, #1d6fa5);\n  }\n  .kuc-button-1-17-0__button--alert {\n    background-color: var(--kuc-button-background-color, #e74c3c);\n    color: var(--kuc-button-text-color, #ffffff);\n    border: 1px solid #e3e7e8;\n  }\n  .kuc-button-1-17-0__button--alert:hover,\n  .kuc-button-1-17-0__button--alert:focus-visible,\n  .kuc-button-1-17-0__button--alert:active {\n    cursor: pointer;\n  }\n  .kuc-button-1-17-0__button--alert:hover {\n    background-color: var(--kuc-button-background-color-hover, #bf2718);\n  }\n  .kuc-button-1-17-0__button--alert:focus-visible {\n    background-color: var(--kuc-button-background-color-focus, #bf2718);\n  }\n  .kuc-button-1-17-0__button--alert:active {\n    background-color: var(--kuc-button-background-color-active, #bf2718);\n  }\n  .kuc-button-1-17-0__button:disabled {\n    background-color: #d4d7d7;\n    border: 1px solid #e3e7e8;\n    color: #888888;\n    cursor: not-allowed;\n  }\n  .kuc-button-1-17-0__button--normal:focus-visible,\n  .kuc-button-1-17-0__button--submit:focus-visible,\n  .kuc-button-1-17-0__button--alert:focus-visible {\n    outline: 1px solid #3498db;\n  }\n'),Li=e}})();const Hi=Li;var Mi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Bi extends bi{constructor(){super(...arguments),this.ariaLive="",this.guid="",this.text=""}render(){return $e`
-      ${this.ariaLive&&""!==this.ariaLive?$e`
+      `}}Vi([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Vi([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Vi([Ge({type:String})],e.prototype,"text",void 0),Vi([Ge({type:String})],e.prototype,"type",void 0),Vi([Ge()],e.prototype,"content",void 0),Vi([Ge({type:Boolean})],e.prototype,"disabled",void 0),Vi([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),window.customElements.define("kuc-button-1-17-1",e),mi('\n  kuc-button-1-17-1,\n  kuc-button-1-17-1 *,\n  kuc-button-1-17-1:lang(en),\n  kuc-button-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-button-1-17-1:lang(ja),\n  kuc-button-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;\n  }\n  kuc-button-1-17-1:lang(zh),\n  kuc-button-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti, Hei,\n      "Heiti SC", sans-serif;\n  }\n  kuc-button-1-17-1:lang(zh-TW),\n  kuc-button-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-button-1-17-1 {\n    display: inline-block;\n    vertical-align: top;\n  }\n  kuc-button-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-button-1-17-1__button {\n    display: grid;\n    align-items: center;\n    align-content: center;\n    font-size: var(--kuc-button-font-size, 16px);\n    width: var(--kuc-button-width, "auto");\n    height: var(--kuc-button-height, 48px);\n    min-width: var(--kuc-button-width, 163px);\n    padding: 0px 16px;\n    user-select: none;\n    white-space: nowrap;\n  }\n  .kuc-button-1-17-1__button--normal {\n    background-color: var(--kuc-button-background-color, #f7f9fa);\n    color: var(--kuc-button-text-color, #3498db);\n    border: 1px solid #e3e7e8;\n  }\n  .kuc-button-1-17-1__button--normal:hover,\n  .kuc-button-1-17-1__button--normal:focus-visible,\n  .kuc-button-1-17-1__button--normal:active {\n    cursor: pointer;\n  }\n  .kuc-button-1-17-1__button--normal:hover {\n    background-color: var(--kuc-button-background-color-hover, #c8d6dd);\n  }\n  .kuc-button-1-17-1__button--normal:focus-visible {\n    background-color: var(--kuc-button-background-color-focus, #c8d6dd);\n  }\n  .kuc-button-1-17-1__button--normal:active {\n    background-color: var(--kuc-button-background-color-active, #c8d6dd);\n  }\n  .kuc-button-1-17-1__button--submit {\n    background-color: var(--kuc-button-background-color, #3498db);\n    color: var(--kuc-button-text-color, #ffffff);\n    border: 1px solid #e3e7e8;\n  }\n  .kuc-button-1-17-1__button--submit:hover,\n  .kuc-button-1-17-1__button--submit:focus-visible,\n  .kuc-button-1-17-1__button--submit:active {\n    cursor: pointer;\n  }\n  .kuc-button-1-17-1__button--submit:hover {\n    background-color: var(--kuc-button-background-color-hover, #1d6fa5);\n  }\n  .kuc-button-1-17-1__button--submit:focus-visible {\n    background-color: var(--kuc-button-background-color-focus, #1d6fa5);\n  }\n  .kuc-button-1-17-1__button--submit:active {\n    background-color: var(--kuc-button-background-color-active, #1d6fa5);\n  }\n  .kuc-button-1-17-1__button--alert {\n    background-color: var(--kuc-button-background-color, #e74c3c);\n    color: var(--kuc-button-text-color, #ffffff);\n    border: 1px solid #e3e7e8;\n  }\n  .kuc-button-1-17-1__button--alert:hover,\n  .kuc-button-1-17-1__button--alert:focus-visible,\n  .kuc-button-1-17-1__button--alert:active {\n    cursor: pointer;\n  }\n  .kuc-button-1-17-1__button--alert:hover {\n    background-color: var(--kuc-button-background-color-hover, #bf2718);\n  }\n  .kuc-button-1-17-1__button--alert:focus-visible {\n    background-color: var(--kuc-button-background-color-focus, #bf2718);\n  }\n  .kuc-button-1-17-1__button--alert:active {\n    background-color: var(--kuc-button-background-color-active, #bf2718);\n  }\n  .kuc-button-1-17-1__button:disabled {\n    background-color: #d4d7d7;\n    border: 1px solid #e3e7e8;\n    color: #888888;\n    cursor: not-allowed;\n  }\n  .kuc-button-1-17-1__button--normal:focus-visible,\n  .kuc-button-1-17-1__button--submit:focus-visible,\n  .kuc-button-1-17-1__button--alert:focus-visible {\n    outline: 1px solid #3498db;\n  }\n'),Li=e}})();const Hi=Li;var Mi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Bi extends bi{constructor(){super(...arguments),this.ariaLive="",this.guid="",this.text=""}render(){return we`
+      ${this.ariaLive&&""!==this.ariaLive?we`
             <div
-              class="kuc-base-error-1-17-0__error"
+              class="kuc-base-error-1-17-1__error"
               .id="${this.guid}-error"
               role="alert"
               aria-live="${this.ariaLive}"
@@ -119,9 +118,9 @@
             >
               ${this.text}
             </div>
-          `:$e`
+          `:we`
             <div
-              class="kuc-base-error-1-17-0__error"
+              class="kuc-base-error-1-17-1__error"
               .id="${this.guid}-error"
               role="alert"
               ?hidden="${!this.text}"
@@ -129,20 +128,20 @@
               ${this.text}
             </div>
           `}
-    `}}Mi([Fe({type:String})],Bi.prototype,"ariaLive",void 0),Mi([Fe({type:String})],Bi.prototype,"guid",void 0),Mi([Fe({type:String})],Bi.prototype,"text",void 0),window.customElements.get("kuc-base-error-1-17-0")||(mi('\n  kuc-base-error-1-17-0,\n  kuc-base-error-1-17-0 *,\n  kuc-base-error-1-17-0:lang(en),\n  kuc-base-error-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-base-error-1-17-0:lang(ja),\n  kuc-base-error-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-base-error-1-17-0:lang(zh),\n  kuc-base-error-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-base-error-1-17-0:lang(zh-TW),\n  kuc-base-error-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-base-error-1-17-0 {\n    width: 100%;\n    font-size: 14px;\n    display: inline-table;\n    vertical-align: top;\n  }\n  kuc-base-error-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-base-error-1-17-0__error {\n    line-height: 1.5;\n    padding: 4px 18px;\n    box-sizing: border-box;\n    background-color: #e74c3c;\n    color: #ffffff;\n    margin: 8px 0px;\n    word-break: break-all;\n    white-space: normal;\n  }\n  .kuc-base-error-1-17-0__error[hidden] {\n    display: none;\n  }\n'),window.customElements.define("kuc-base-error-1-17-0",Bi));var Oi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Ni extends bi{constructor(){super(...arguments),this.requiredIcon=!1,this.guid="",this.text=""}render(){return $e`
+    `}}Mi([Ge({type:String})],Bi.prototype,"ariaLive",void 0),Mi([Ge({type:String})],Bi.prototype,"guid",void 0),Mi([Ge({type:String})],Bi.prototype,"text",void 0),window.customElements.get("kuc-base-error-1-17-1")||(mi('\n  kuc-base-error-1-17-1,\n  kuc-base-error-1-17-1 *,\n  kuc-base-error-1-17-1:lang(en),\n  kuc-base-error-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-base-error-1-17-1:lang(ja),\n  kuc-base-error-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-base-error-1-17-1:lang(zh),\n  kuc-base-error-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-base-error-1-17-1:lang(zh-TW),\n  kuc-base-error-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-base-error-1-17-1 {\n    width: 100%;\n    font-size: 14px;\n    display: inline-table;\n    vertical-align: top;\n  }\n  kuc-base-error-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-base-error-1-17-1__error {\n    line-height: 1.5;\n    padding: 4px 18px;\n    box-sizing: border-box;\n    background-color: #e74c3c;\n    color: #ffffff;\n    margin: 8px 0px;\n    word-break: break-all;\n    white-space: normal;\n  }\n  .kuc-base-error-1-17-1__error[hidden] {\n    display: none;\n  }\n'),window.customElements.define("kuc-base-error-1-17-1",Bi));var Oi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Ni extends bi{constructor(){super(...arguments),this.requiredIcon=!1,this.guid="",this.text=""}render(){return we`
       ${this._getTextTemplate()}
       <span
-        class="kuc-base-label-1-17-0__required-icon"
+        class="kuc-base-label-1-17-1__required-icon"
         ?hidden="${!this.requiredIcon}"
         >*</span
       >
-    `}_getTextTemplate(){return this.guid&&""!==this.guid?$e`
-          <span class="kuc-base-label-1-17-0__text" .id="${this.guid}-group"
+    `}_getTextTemplate(){return this.guid&&""!==this.guid?we`
+          <span class="kuc-base-label-1-17-1__text" .id="${this.guid}-group"
             >${this.text}</span
           >
-        `:$e` <span class="kuc-base-label-1-17-0__text">${this.text}</span> `}}Oi([Fe({type:Boolean})],Ni.prototype,"requiredIcon",void 0),Oi([Fe({type:String})],Ni.prototype,"guid",void 0),Oi([Fe({type:String})],Ni.prototype,"text",void 0),window.customElements.get("kuc-base-label-1-17-0")||(mi('\n  kuc-base-label-1-17-0,\n  kuc-base-label-1-17-0 *,\n  kuc-base-label-1-17-0:lang(en),\n  kuc-base-label-1-17-0:lang(en) * {\n      font-family: sans-serif;\n  }\n  kuc-base-label-1-17-0:lang(ja),\n  kuc-base-label-1-17-0:lang(ja) * {\n      font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-base-label-1-17-0:lang(zh),\n  kuc-base-label-1-17-0:lang(zh) * {\n      font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-base-label-1-17-0:lang(zh-TW),\n  kuc-base-label-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-base-label-1-17-0 {\n      font-size: 14px;\n      color: #333333;\n      display: inline-table;\n      vertical-align: top;\n  }\n  kuc-base-label-1-17-0[hidden] {\n      display: none;\n  }\n  .kuc-base-label-1-17-0__required-icon {\n      font-size: 20px;\n      vertical-align: -3px;\n      color: #e74c3c;\n      margin-left: 4px;\n      line-height: 1;\n  }\n  .kuc-base-label-1-17-0__required-icon[hidden] {\n      display: none;\n  }\n'),window.customElements.define("kuc-base-label-1-17-0",Ni));var Ui=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Pi;(()=>{if(Pi=window.customElements.get("kuc-checkbox-1-17-0"),!Pi){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.itemLayout="horizontal",this.label="",this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}_getNewValueMapping(e,t){const i=parseInt(t,10),n=Object.keys(this._valueMapping),o={...this._valueMapping};return n.indexOf(t)>-1?(delete o[i],o):(o[i]=e,o)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.dataset.index||"0",n=t.value,o=this.value?[...this.value]:this.value,a=this._getNewValueMapping(n,i),s=this.items.map((e=>e.value)),r=Object.values(a).filter((e=>s.indexOf(e)>-1));if(r===o)return;const l=Object.keys(a).map((e=>parseInt(e,10)));this.value=r,this.selectedIndex=l,gi(this,"change",{oldValue:o,value:r})}_handleFocusInput(e){e.target.parentNode.setAttribute("focused","")}_handleBlurInput(e){e.target.parentNode.removeAttribute("focused")}_getCheckboxIconSvgTemplate(e,t){return Ce`
+        `:we` <span class="kuc-base-label-1-17-1__text">${this.text}</span> `}}Oi([Ge({type:Boolean})],Ni.prototype,"requiredIcon",void 0),Oi([Ge({type:String})],Ni.prototype,"guid",void 0),Oi([Ge({type:String})],Ni.prototype,"text",void 0),window.customElements.get("kuc-base-label-1-17-1")||(mi('\n  kuc-base-label-1-17-1,\n  kuc-base-label-1-17-1 *,\n  kuc-base-label-1-17-1:lang(en),\n  kuc-base-label-1-17-1:lang(en) * {\n      font-family: sans-serif;\n  }\n  kuc-base-label-1-17-1:lang(ja),\n  kuc-base-label-1-17-1:lang(ja) * {\n      font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-base-label-1-17-1:lang(zh),\n  kuc-base-label-1-17-1:lang(zh) * {\n      font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-base-label-1-17-1:lang(zh-TW),\n  kuc-base-label-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-base-label-1-17-1 {\n      font-size: 14px;\n      color: #333333;\n      display: inline-table;\n      vertical-align: top;\n  }\n  kuc-base-label-1-17-1[hidden] {\n      display: none;\n  }\n  .kuc-base-label-1-17-1__required-icon {\n      font-size: 20px;\n      vertical-align: -3px;\n      color: #e74c3c;\n      margin-left: 4px;\n      line-height: 1;\n  }\n  .kuc-base-label-1-17-1__required-icon[hidden] {\n      display: none;\n  }\n'),window.customElements.define("kuc-base-label-1-17-1",Ni));var Ui=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Pi;(()=>{if(Pi=window.customElements.get("kuc-checkbox-1-17-1"),!Pi){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.itemLayout="horizontal",this.label="",this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(st),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(lt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}_getNewValueMapping(e,t){const i=parseInt(t,10),n=Object.keys(this._valueMapping),o={...this._valueMapping};return n.indexOf(t)>-1?(delete o[i],o):(o[i]=e,o)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.dataset.index||"0",n=t.value,o=this.value?[...this.value]:this.value,a=this._getNewValueMapping(n,i),s=this.items.map((e=>e.value)),r=Object.values(a).filter((e=>s.indexOf(e)>-1));if(r===o)return;const l=Object.keys(a).map((e=>parseInt(e,10)));this.value=r,this.selectedIndex=l,gi(this,"change",{oldValue:o,value:r})}_handleFocusInput(e){e.target.parentNode.setAttribute("focused","")}_handleBlurInput(e){e.target.parentNode.removeAttribute("focused")}_getCheckboxIconSvgTemplate(e,t){return $e`
     <svg
-      class="kuc-checkbox-1-17-0__group__select-menu__item__label__icon"
+      class="kuc-checkbox-1-17-1__group__select-menu__item__label__icon"
       width="21"
       height="21"
       viewBox="0 0 21 21"
@@ -158,15 +157,15 @@
         fill="white"
         stroke="${this._getSVGStrokeValue(e,t)}"
         stroke-width="2"/>
-      ${t?Ce`<path
+      ${t?$e`<path
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M5 11L6.5 9L9.5 11.5L14.5 6L16 7.5L9.5 14.5L5 11Z"
             fill="${e?"#d8d8d8":"#3498db"}"/>`:""}
     </svg>
-  `}_getSVGStrokeValue(e,t){return e?"#d8d8d8":t?"#3498db":"#d8d8d8"}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t),n=e.disabled||this.disabled;return $e`
+  `}_getSVGStrokeValue(e,t){return e?"#d8d8d8":t?"#3498db":"#d8d8d8"}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t),n=e.disabled||this.disabled;return we`
         <div
-          class="kuc-checkbox-1-17-0__group__select-menu__item"
+          class="kuc-checkbox-1-17-1__group__select-menu__item"
           itemLayout="${this.itemLayout}"
         >
           <input
@@ -175,7 +174,7 @@
             aria-required="${this.requiredIcon}"
             data-index="${t}"
             id="${this._GUID}-item-${t}"
-            class="kuc-checkbox-1-17-0__group__select-menu__item__input"
+            class="kuc-checkbox-1-17-1__group__select-menu__item__input"
             name="${this._GUID}-group"
             value="${void 0!==e.value?e.value:""}"
             ?disabled="${n}"
@@ -185,52 +184,52 @@
           />
           <label
             for="${this._GUID}-item-${t}"
-            class="kuc-checkbox-1-17-0__group__select-menu__item__label"
+            class="kuc-checkbox-1-17-1__group__select-menu__item__label"
             >${this._getCheckboxIconSvgTemplate(n,i)}${void 0===e.label?e.value:e.label}
           </label>
         </div>
-      `}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}render(){return $e`
+      `}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}render(){return we`
         <div
-          class="kuc-checkbox-1-17-0__group"
+          class="kuc-checkbox-1-17-1__group"
           role="group"
           aria-labelledby="${this._GUID}-group"
         >
-          <div class="kuc-checkbox-1-17-0__group__label" ?hidden="${!this.label}">
-            <kuc-base-label-1-17-0
+          <div class="kuc-checkbox-1-17-1__group__label" ?hidden="${!this.label}">
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .guid="${this._GUID}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </div>
           <div
-            class="kuc-checkbox-1-17-0__group__select-menu"
+            class="kuc-checkbox-1-17-1__group__select-menu"
             ?borderVisible="${this.borderVisible}"
             itemLayout="${this.itemLayout}"
           >
             ${this.items.map(((e,t)=>this._getItemTemplate(e,t)))}
           </div>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
             ariaLive="assertive"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}updated(){this._inputEls.forEach((e=>{e.checked=this.value.indexOf(e.value)>-1}))}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}}Ui([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Ui([Fe({type:String})],e.prototype,"error",void 0),Ui([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Ui([Fe({type:String})],e.prototype,"itemLayout",void 0),Ui([Fe({type:String})],e.prototype,"label",void 0),Ui([Fe({type:Boolean})],e.prototype,"borderVisible",void 0),Ui([Fe({type:Boolean})],e.prototype,"disabled",void 0),Ui([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Ui([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Ui([Fe({type:Array})],e.prototype,"items",void 0),Ui([Fe({type:Array})],e.prototype,"selectedIndex",void 0),Ui([Fe({type:Array})],e.prototype,"value",void 0),Ui([Je(".kuc-checkbox-1-17-0__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),Ui([We()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-checkbox-1-17-0",e),mi('\n  kuc-checkbox-1-17-0,\n  kuc-checkbox-1-17-0 *,\n  kuc-checkbox-1-17-0:lang(en),\n  kuc-checkbox-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-checkbox-1-17-0:lang(ja),\n  kuc-checkbox-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-checkbox-1-17-0:lang(zh),\n  kuc-checkbox-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-checkbox-1-17-0:lang(zh-TW),\n  kuc-checkbox-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-checkbox-1-17-0 {\n    font-size: 14px;\n    color: #333333;\n    display: inline-table;\n    vertical-align: top;\n    width: var(--kuc-checkbox-menu-width, 239px);\n    min-width: var(--kuc-checkbox-menu-width, 239px);\n    line-height: 1.5;\n  }\n  kuc-checkbox-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-checkbox-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    margin: 0px;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu {\n    white-space: nowrap;\n    width: var(--kuc-checkbox-menu-width, auto);\n    height: var(--kuc-checkbox-menu-height, auto);\n    color: var(--kuc-checkbox-menu-color, #333333);\n    font-size: var(--kuc-checkbox-menu-font-size, 14px);\n    display: flex;\n    align-items: flex-start;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu[itemLayout="vertical"] {\n    display: block;\n  }\n  .kuc-checkbox-1-17-0__group__label {\n    display: inline-block;\n    padding: 4px 0 8px 0;\n    white-space: nowrap;\n  }\n  .kuc-checkbox-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu[borderVisible] {\n    border-color: #e3e7e8;\n    border-width: 1px;\n    border-style: solid;\n    padding: 4px 0 0 4px;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item {\n    margin-bottom: 4px;\n    margin-right: 16px;\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    display: flex;\n    align-items: center;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item[focused] {\n    border: 1px solid #3498db;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item__input:hover\n    + .kuc-checkbox-1-17-0__group__select-menu__item__label {\n    color: var(--kuc-checkbox-menu-color-hover, #666666);\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item__label__icon {\n    position: absolute;\n    left: -30px;\n    box-sizing: border-box;\n    width: 21px;\n    height: 21px;\n    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;\n    content: "";\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item__input[disabled]\n    + .kuc-checkbox-1-17-0__group__select-menu__item__label {\n    color: #888888;\n    cursor: not-allowed;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item__label {\n    cursor: pointer;\n    position: relative;\n    margin-left: 32px;\n    display: flex;\n    align-items: center;\n    vertical-align: middle;\n    white-space: nowrap;\n    min-height: 24px;\n    line-height: 1.2;\n  }'),Pi=e}})();var zi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Ri;(()=>{if(Ri=window.customElements.get("kuc-combobox-1-17-0"),!Ri){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._selectorVisible=!1,this._searchText="",this._DISABLED_CLASS="kuc-combobox-1-17-0__group__select-menu__item--disabled",this._query="",this._matchingItems=[],this._GUID=fi();const t=vi(e);this._handleClickDocument=this._handleClickDocument.bind(this),Object.assign(this,t)}shouldUpdate(e){if(e.has("items")){if(!Ti(this.items))return this.throwErrorAfterUpdateComplete(nt),!1;if(!Ii(this.items.map((e=>e.value))))return this.throwErrorAfterUpdateComplete(ot),!1}return!(e.has("value")&&!$i(this.value)&&(this.throwErrorAfterUpdateComplete(lt),1))}willUpdate(e){e.has("value")&&(this._searchText=this._getSelectedLabel()||"")}render(){return $e`
-        <div class="kuc-combobox-1-17-0__group">
+      `}updated(){this._inputEls.forEach((e=>{e.checked=this.value.indexOf(e.value)>-1}))}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}}Ui([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Ui([Ge({type:String})],e.prototype,"error",void 0),Ui([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Ui([Ge({type:String})],e.prototype,"itemLayout",void 0),Ui([Ge({type:String})],e.prototype,"label",void 0),Ui([Ge({type:Boolean})],e.prototype,"borderVisible",void 0),Ui([Ge({type:Boolean})],e.prototype,"disabled",void 0),Ui([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Ui([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Ui([Ge({type:Array})],e.prototype,"items",void 0),Ui([Ge({type:Array})],e.prototype,"selectedIndex",void 0),Ui([Ge({type:Array})],e.prototype,"value",void 0),Ui([Ye(".kuc-checkbox-1-17-1__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),Ui([Fe()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-checkbox-1-17-1",e),mi('\n  kuc-checkbox-1-17-1,\n  kuc-checkbox-1-17-1 *,\n  kuc-checkbox-1-17-1:lang(en),\n  kuc-checkbox-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-checkbox-1-17-1:lang(ja),\n  kuc-checkbox-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-checkbox-1-17-1:lang(zh),\n  kuc-checkbox-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-checkbox-1-17-1:lang(zh-TW),\n  kuc-checkbox-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-checkbox-1-17-1 {\n    font-size: 14px;\n    color: #333333;\n    display: inline-table;\n    vertical-align: top;\n    width: var(--kuc-checkbox-menu-width, 239px);\n    min-width: var(--kuc-checkbox-menu-width, 239px);\n    line-height: 1.5;\n  }\n  kuc-checkbox-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-checkbox-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    margin: 0px;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu {\n    white-space: nowrap;\n    width: var(--kuc-checkbox-menu-width, auto);\n    height: var(--kuc-checkbox-menu-height, auto);\n    color: var(--kuc-checkbox-menu-color, #333333);\n    font-size: var(--kuc-checkbox-menu-font-size, 14px);\n    display: flex;\n    align-items: flex-start;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu[itemLayout="vertical"] {\n    display: block;\n  }\n  .kuc-checkbox-1-17-1__group__label {\n    display: inline-block;\n    padding: 4px 0 8px 0;\n    white-space: nowrap;\n  }\n  .kuc-checkbox-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu[borderVisible] {\n    border-color: #e3e7e8;\n    border-width: 1px;\n    border-style: solid;\n    padding: 4px 0 0 4px;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item {\n    margin-bottom: 4px;\n    margin-right: 16px;\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    display: flex;\n    align-items: center;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item[focused] {\n    border: 1px solid #3498db;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item__input:hover\n    + .kuc-checkbox-1-17-1__group__select-menu__item__label {\n    color: var(--kuc-checkbox-menu-color-hover, #666666);\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item__label__icon {\n    position: absolute;\n    left: -30px;\n    box-sizing: border-box;\n    width: 21px;\n    height: 21px;\n    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;\n    content: "";\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item__input[disabled]\n    + .kuc-checkbox-1-17-1__group__select-menu__item__label {\n    color: #888888;\n    cursor: not-allowed;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item__label {\n    cursor: pointer;\n    position: relative;\n    margin-left: 32px;\n    display: flex;\n    align-items: center;\n    vertical-align: middle;\n    white-space: nowrap;\n    min-height: 24px;\n    line-height: 1.2;\n  }'),Pi=e}})();var zi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Ri;(()=>{if(Ri=window.customElements.get("kuc-combobox-1-17-1"),!Ri){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._selectorVisible=!1,this._searchText="",this._DISABLED_CLASS="kuc-combobox-1-17-1__group__select-menu__item--disabled",this._query="",this._matchingItems=[],this._GUID=fi();const t=vi(e);this._handleClickDocument=this._handleClickDocument.bind(this),Object.assign(this,t)}shouldUpdate(e){if(e.has("items")){if(!Ti(this.items))return this.throwErrorAfterUpdateComplete(it),!1;if(!Ii(this.items.map((e=>e.value))))return this.throwErrorAfterUpdateComplete(nt),!1}return!(e.has("value")&&!$i(this.value)&&(this.throwErrorAfterUpdateComplete(rt),1))}willUpdate(e){e.has("value")&&(this._searchText=this._getSelectedLabel()||"")}render(){return we`
+        <div class="kuc-combobox-1-17-1__group">
           <div
-            class="kuc-combobox-1-17-0__group__label"
+            class="kuc-combobox-1-17-1__group__label"
             id="${this._GUID}-label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </div>
-          <div class="kuc-combobox-1-17-0__group__toggle">
+          <div class="kuc-combobox-1-17-1__group__toggle">
             <input
-              class="kuc-combobox-1-17-0__group__toggle__input"
+              class="kuc-combobox-1-17-1__group__toggle__input"
               role="combobox"
               type="text"
               .value="${this._searchText}"
@@ -248,9 +247,9 @@
               @click="${this._handleClickComboboxInput}"
               @blur="${this._handleBlurComboboxInput}"
             />
-            <div class="kuc-combobox-1-17-0__group__toggle__icon">
+            <div class="kuc-combobox-1-17-1__group__toggle__icon">
               <button
-                class="kuc-combobox-1-17-0__group__toggle__icon__button"
+                class="kuc-combobox-1-17-1__group__toggle__icon__button"
                 tabindex="-1"
                 type="button"
                 aria-labelledby="${this._GUID}-label"
@@ -264,7 +263,7 @@
             </div>
           </div>
           <ul
-            class="kuc-combobox-1-17-0__group__select-menu"
+            class="kuc-combobox-1-17-1__group__select-menu"
             role="listbox"
             id="${this._GUID}-listbox"
             aria-labelledby="${this._GUID}-label"
@@ -275,14 +274,14 @@
           >
             ${this._matchingItems.map(((e,t)=>this._getItemTemplate(e,t)))}
           </ul>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
             ariaLive="assertive"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}firstUpdated(){window.addEventListener("resize",(()=>{this._actionResizeScrollWindow()})),window.addEventListener("scroll",(()=>{this._actionResizeScrollWindow()}))}async updated(e){super.updated(e),await this.updateComplete,this._selectorVisible?(this._setMenuPosition(),this._scrollToView(),null===this._selectedItemEl||this._selectedItemEl.classList.contains(this._DISABLED_CLASS)?this._actionClearAllHighlightMenuItem():this._setHighlightAndActiveDescendantMenu(this._selectedItemEl),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument,!0)}),1)):setTimeout((()=>{document.removeEventListener("click",this._handleClickDocument,!0)}),1)}_getToggleIconSvgTemplate(){return Ce`
+      `}firstUpdated(){window.addEventListener("resize",(()=>{this._actionResizeScrollWindow()})),window.addEventListener("scroll",(()=>{this._actionResizeScrollWindow()}))}async updated(e){super.updated(e),await this.updateComplete,this._selectorVisible?(this._setMenuPosition(),this._scrollToView(),null===this._selectedItemEl||this._selectedItemEl.classList.contains(this._DISABLED_CLASS)?this._actionClearAllHighlightMenuItem():this._setHighlightAndActiveDescendantMenu(this._selectedItemEl),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument,!0)}),1)):setTimeout((()=>{document.removeEventListener("click",this._handleClickDocument,!0)}),1)}_getToggleIconSvgTemplate(){return $e`
       <svg
         width="36"
         height="36"
@@ -296,11 +295,11 @@
           d="M24.2122 15.6665L25 16.1392L19.7332 21.4998H18.2668L13 16.1392L13.7878 15.6665L18.765 20.6866H19.235L24.2122 15.6665Z"
           fill="#3498db"/>
       </svg>
-    `}_getItemTemplate(e,t){const i=this._isCheckedItem(e),n=e.disabled,o=void 0===e.label?e.value:e.label;let a=i?$e`<b>${o}</b>`:$e`${o}`;const s=this._query.trim().toLowerCase();if(s&&o){const e=o.toLowerCase().indexOf(s),t=e+s.length;a=$e`
+    `}_getItemTemplate(e,t){const i=this._isCheckedItem(e),n=e.disabled,o=void 0===e.label?e.value:e.label;let a=i?we`<b>${o}</b>`:we`${o}`;const s=this._query.trim().toLowerCase();if(s&&o){const e=o.toLowerCase().indexOf(s),t=e+s.length;a=we`
           ${o.slice(0,e)}<b>${o.slice(e,t)}</b>${o.slice(t)}
-        `}return $e`
+        `}return we`
         <li
-          class="kuc-combobox-1-17-0__group__select-menu__item ${n?this._DISABLED_CLASS:""}"
+          class="kuc-combobox-1-17-1__group__select-menu__item ${n?this._DISABLED_CLASS:""}"
           role="option"
           aria-selected="${i?"true":"false"}"
           value="${void 0!==e.value?e.value:""}"
@@ -311,9 +310,9 @@
           ${this._getComboboxIconSvgTemplate(i,n)}
           ${a}
         </li>
-      `}_getComboboxIconSvgTemplate(e,t){return Ce`
-      ${e?Ce`<svg
-          class="kuc-combobox-1-17-0__group__select-menu__item__icon"
+      `}_getComboboxIconSvgTemplate(e,t){return $e`
+      ${e?$e`<svg
+          class="kuc-combobox-1-17-1__group__select-menu__item__icon"
           width="11"
           height="9"
           viewBox="0 0 11 9"
@@ -325,9 +324,9 @@
             clip-rule="evenodd"
             d="M0 5L1.5 3L4.5 5.5L9.5 0L11 1.5L4.5 8.5L0 5Z"
             fill="${t?"#888888":"#3498db"}"/>
-        </svg>`:""}`}_handleMouseDownComboboxItem(e){const t=this._getItemElementWhenMouseOverDown(e.target).getAttribute("value");this._actionUpdateValue(t)}_handleMouseOverComboboxItem(e){const t=this._getItemElementWhenMouseOverDown(e.target);this._actionHighlightMenuItem(t)}_handleMouseLeaveMenu(){this._actionClearAllHighlightMenuItem()}_handleMouseDownMenu(e){e.preventDefault()}_handleClickToggleButton(e){e.preventDefault(),this._inputEl.focus(),this._inputEl.select(),this._resetToggleInputValue(),this._actionToggleMenu()}_handleInputComboboxInput(e){e.stopPropagation(),this._searchText=this._inputEl.value,this._query=this._inputEl.value,this._setMatchingItems()}_handleClickComboboxInput(e){e.stopPropagation(),this._inputEl.select(),this._setMatchingItems()}_handleChangeComboboxInput(e){e.stopPropagation()}_handleBlurComboboxInput(e){this._resetToggleInputValue()}_handleClickDocument(e){(e.target===this._toggleEl||this._toggleEl.contains(e.target))&&(this._inputEl.focus(),e.stopPropagation()),Array.from(this._disabledItemsEl).some((t=>t===e.target||t.contains(e.target)))||this._actionHideMenu()}_handleKeyDownComboboxInput(e){switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightPrevMenuItem();break;case"Tab":this._selectorVisible&&this._actionHideMenu();break;case"Down":case"ArrowDown":if(e.preventDefault(),!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightNextMenuItem();break;case"Enter":{e.preventDefault();const t=this._highlightItemEl;if(null===t)break;const i=t.getAttribute("value");this._actionUpdateValue(i),this._actionHideMenu();break}case"Escape":e.preventDefault(),this._selectorVisible&&e.stopPropagation(),this._resetToggleInputValue(),this._actionHideMenu();break;case"Home":this._selectorVisible&&(e.preventDefault(),this._actionHighlightFirstMenuItem());break;case"End":this._selectorVisible&&(e.preventDefault(),this._actionHighlightLastMenuItem())}}_getSelectedLabel(){const e=this.items.filter(((e,t)=>this._isCheckedItem(e)));return 0===e.length?"":void 0===e[0].label?e[0].value:e[0].label}_actionShowMenu(){""===this._query.trim()&&(this._matchingItems=this.items),0!==this.items.length&&0!==this._matchingItems.length&&(this._inputEl.focus(),this._selectorVisible=!0)}_actionHideMenu(){this._selectorVisible=!1,this._actionRemoveActiveDescendant()}_actionToggleMenu(){this._selectorVisible?this._actionHideMenu():this._actionShowMenu()}_actionHighlightFirstMenuItem(){let e=this._firstItemEl,t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightLastMenuItem(){let e=this._lastItemEl,t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightPrevMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.previousElementSibling),null===e&&(e=this._lastItemEl);let t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling,null===e&&(e=this._lastItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightNextMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.nextElementSibling),null===e&&(e=this._firstItemEl);let t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling,null===e&&(e=this._firstItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionClearAllHighlightMenuItem(){this._itemsEl.forEach((e=>{e.classList.remove("kuc-combobox-1-17-0__group__select-menu__highlight")})),this._actionRemoveActiveDescendant()}_setHighlightAndActiveDescendantMenu(e){this._actionHighlightMenuItem(e),this._actionSetActiveDescendant(e.id),this._scrollToView()}_actionHighlightMenuItem(e){this._actionClearAllHighlightMenuItem(),e.classList.add("kuc-combobox-1-17-0__group__select-menu__highlight")}_actionUpdateValue(e){if(this.value===e)return void this._resetToggleInputValue();const t={oldValue:this.value,value:e};this.value=e,this._query="",gi(this,"change",t)}_actionSetActiveDescendant(e){void 0!==e&&null!==this._inputEl&&this._inputEl.setAttribute("aria-activedescendant",e)}_actionRemoveActiveDescendant(){this._inputEl.removeAttribute("aria-activedescendant")}_setMatchingItems(){const e=this.items.filter((e=>{const t=new RegExp(this._query.trim().replace(/[.*+?^=!:${}()|[\]/\\]/g,"\\$&"),"gi");return e.label?t.test(e.label):!!e.value&&t.test(e.value)}));0===e.length?(this._matchingItems=[],this._actionHideMenu()):(this._matchingItems=e,this._actionShowMenu())}_getScrollbarWidthHeight(){const e=document.createElement("div");e.style.cssText="overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(e);const t=e.offsetWidth-e.clientWidth,i=e.offsetHeight-e.clientHeight;return document.body.removeChild(e),{scrollbarWidth:t,scrollbarHeight:i}}_getDistanceToggleButton(){const{scrollbarWidth:e,scrollbarHeight:t}=this._getScrollbarWidthHeight(),i=document.body.scrollHeight>window.innerHeight,n=document.body.scrollWidth>window.innerWidth;return{toTop:this._toggleEl.getBoundingClientRect().top,toBottom:window.innerHeight-this._toggleEl.getBoundingClientRect().bottom-(n?t:0),toLeft:this._toggleEl.getBoundingClientRect().left,toRight:window.innerWidth-this._toggleEl.getBoundingClientRect().left-(i?e:0)}}_setMenuPositionAboveOrBelow(){this._menuEl.style.height="auto",this._menuEl.style.bottom="auto",this._menuEl.style.overflowY="";const e=this._menuEl.getBoundingClientRect().height,t=this._getDistanceToggleButton();if(!(t.toBottom>=e))if(t.toBottom<t.toTop){const i=this._errorEl.offsetHeight?this._errorEl.offsetHeight+16:0;if(this._menuEl.style.bottom=`${this._toggleEl.offsetHeight+i}px`,t.toTop>=e)return;this._menuEl.style.height=`${t.toTop}px`,this._menuEl.style.overflowY="scroll"}else this._menuEl.style.height=`${t.toBottom}px`,this._menuEl.style.overflowY="scroll"}_setMenuPositionLeftOrRight(){this._menuEl.style.right="auto";const e=this._menuEl.getBoundingClientRect().width,t=this._getDistanceToggleButton();if(t.toRight>=e||t.toLeft<e||t.toRight<0)return;const i=this._toggleEl.offsetWidth-t.toRight;this._menuEl.style.right=i>0?`${i}px`:"0px"}_setMenuPosition(){this._setMenuPositionAboveOrBelow(),this._setMenuPositionLeftOrRight()}_scrollToView(){if(!this._highlightItemEl||!this._menuEl)return;const e=this._menuEl.getBoundingClientRect(),t=this._highlightItemEl.getBoundingClientRect();t.top<e.top&&(this._menuEl.scrollTop-=e.top-t.top),e.bottom<t.bottom&&(this._menuEl.scrollTop+=t.bottom-e.bottom)}_actionResizeScrollWindow(){!this._timeoutID&&this._selectorVisible&&(this._timeoutID=window.setTimeout((()=>{this._timeoutID=null,this._setMenuPosition()}),50))}_isCheckedItem(e){return e.value===this.value}_resetToggleInputValue(){const e=this._getSelectedLabel();this._searchText!==e&&(this._searchText=e||""),this._query=""}_getItemElementWhenMouseOverDown(e){return e.classList.value.split(" ").includes("kuc-combobox-1-17-0__group__select-menu__item")?e:this._getItemElementWhenMouseOverDown(e.parentElement)}}zi([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),zi([Fe({type:String})],e.prototype,"error",void 0),zi([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),zi([Fe({type:String})],e.prototype,"label",void 0),zi([Fe({type:String})],e.prototype,"value",void 0),zi([Fe({type:Boolean})],e.prototype,"disabled",void 0),zi([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),zi([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),zi([Fe({type:Array})],e.prototype,"items",void 0),zi([We()],e.prototype,"_selectorVisible",void 0),zi([Ke(".kuc-combobox-1-17-0__group__toggle")],e.prototype,"_toggleEl",void 0),zi([Ke(".kuc-combobox-1-17-0__group__toggle__input")],e.prototype,"_inputEl",void 0),zi([Ke(".kuc-combobox-1-17-0__group__select-menu")],e.prototype,"_menuEl",void 0),zi([Je(".kuc-combobox-1-17-0__group__select-menu__item")],e.prototype,"_itemsEl",void 0),zi([Ke(".kuc-combobox-1-17-0__group__select-menu__item")],e.prototype,"_firstItemEl",void 0),zi([Ke(".kuc-combobox-1-17-0__group__select-menu__item:last-child")],e.prototype,"_lastItemEl",void 0),zi([Ke(".kuc-combobox-1-17-0__group__select-menu__item[aria-selected=true]")],e.prototype,"_selectedItemEl",void 0),zi([Ke(".kuc-combobox-1-17-0__group__select-menu__highlight")],e.prototype,"_highlightItemEl",void 0),zi([Ke(".kuc-base-error-1-17-0__error")],e.prototype,"_errorEl",void 0),zi([Je(".kuc-combobox-1-17-0__group__select-menu__item--disabled")],e.prototype,"_disabledItemsEl",void 0),zi([We()],e.prototype,"_searchText",void 0),window.customElements.define("kuc-combobox-1-17-0",e),mi('\n  kuc-combobox-1-17-0,\n  kuc-combobox-1-17-0 *,\n  kuc-combobox-1-17-0:lang(en),\n  kuc-combobox-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-combobox-1-17-0:lang(ja),\n  kuc-combobox-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-combobox-1-17-0:lang(zh),\n  kuc-combobox-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-combobox-1-17-0:lang(zh-TW),\n  kuc-combobox-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體", "Microsoft JhengHei", "新宋体", NSimSun, STHeiti, Hei, "Heiti SC", sans-serif;\n  }\n  kuc-combobox-1-17-0 {\n    position: relative;\n    display: inline-table;\n    font-size: 14px;\n    color: #333333;\n    width: var(--kuc-combobox-toggle-width, 180px);\n    vertical-align: top;\n    line-height: 1.5;\n  }\n  kuc-combobox-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-combobox-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    margin: 0px;\n    position: relative;\n  }\n  .kuc-combobox-1-17-0__group__label {\n    padding: 4px 0px 8px 0px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n  .kuc-combobox-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-combobox-1-17-0__group__toggle {\n    position: relative;\n    display: flex;\n    width: var(--kuc-combobox-toggle-width);\n  }\n  input[type=text].kuc-combobox-1-17-0__group__toggle__input {\n    width: 100%;\n    height: var(--kuc-combobox-toggle-height, 40px);\n    box-sizing: border-box;\n    box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n    border: 1px solid #e3e7e8;\n    background-color: #ffffff;\n    color: var(--kuc-combobox-toggle-color, #000000);\n    font-size: var(--kuc-combobox-font-size, 14px);\n    line-height: 1.5;\n    padding: 0 40px 0 8px;\n    margin: 0;\n  }\n  input[type=text].kuc-combobox-1-17-0__group__toggle__input:focus {\n    outline: none;\n    border: 1px solid #3498db;\n    background-color: #e2f2fe;\n    box-shadow: none;\n  }\n  input[type=text].kuc-combobox-1-17-0__group__toggle__input:disabled,\n  .kuc-combobox-1-17-0__group__toggle__icon__button:disabled {\n    background-color: #d4d7d7;\n    box-shadow: none;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-combobox-1-17-0__group__toggle__icon {\n    position: absolute;\n    right: 0px;\n    top: 2px;\n    border-left: 1px solid #e3e7e8;\n  }\n  .kuc-combobox-1-17-0__group__toggle__icon__button {\n    width: 40px;\n    height: calc(var(--kuc-combobox-toggle-height, 40px) - 4px);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 0;\n    padding: 0;\n    border-style: none;\n    background-color: transparent;\n    cursor: pointer;\n  }\n  .kuc-combobox-1-17-0__group__select-menu {\n    min-width: 280px;\n    color: var(--kuc-combobox-menu-color);\n    padding: 8px 0;\n    border: 1px solid #e3e7e8;\n    box-sizing: border-box;\n    background-color: #ffffff;\n    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n    position: absolute;\n    z-index: 2000;\n    margin: 0;\n    list-style: none;\n  }\n  .kuc-combobox-1-17-0__group__select-menu[hidden] {\n    display: none;\n  }\n  .kuc-combobox-1-17-0__group__select-menu__item {\n    font-size: var(--kuc-combobox-font-size, 14px);\n    padding: 8px 16px 8px 24px;\n    line-height: 1;\n    position: relative;\n    cursor: pointer;\n    white-space: nowrap;\n  }\n  .kuc-combobox-1-17-0__group__select-menu__item:lang(en) b,\n  .kuc-combobox-1-17-0__group__select-menu__item:lang(ja) b,\n  .kuc-combobox-1-17-0__group__select-menu__item:lang(zh) b,\n  .kuc-combobox-1-17-0__group__select-menu__item:lang(zh-TW) b{\n    font-weight: 700;\n  }\n  .kuc-combobox-1-17-0__group__select-menu__item__icon {\n    position: absolute;\n    top: 50%;\n    left: 6px;\n    margin-top: -5px;\n  }\n  .kuc-combobox-1-17-0__group__select-menu__item[aria-selected="true"] {\n    color: var(--kuc-combobox-menu-color-selected, #3498db);\n  }\n  .kuc-combobox-1-17-0__group__select-menu__item--disabled,\n  .kuc-combobox-1-17-0__group__select-menu__item--disabled[aria-selected="true"] {\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-combobox-1-17-0__group__select-menu__highlight[role="option"] {\n    background-color: #e2f2fe;\n  }\n'),Ri=e}})();var ji=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Gi extends bi{constructor(){super(),this.year=(new Date).getFullYear(),this.postfix="",this._listBoxVisible=!1,this._handleScrollDocument=this._handleScrollDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("scroll",this._handleScrollDocument)}),1)}disconnectedCallback(){document.removeEventListener("scroll",this._handleScrollDocument),super.disconnectedCallback()}update(e){this._listBoxItems=this._getYearOptions().map((e=>({value:`${e}`,label:`${e}${this.postfix}`}))),super.update(e)}render(){return $e`
+        </svg>`:""}`}_handleMouseDownComboboxItem(e){const t=this._getItemElementWhenMouseOverDown(e.target).getAttribute("value");this._actionUpdateValue(t)}_handleMouseOverComboboxItem(e){const t=this._getItemElementWhenMouseOverDown(e.target);this._actionHighlightMenuItem(t)}_handleMouseLeaveMenu(){this._actionClearAllHighlightMenuItem()}_handleMouseDownMenu(e){e.preventDefault()}_handleClickToggleButton(e){e.preventDefault(),this._inputEl.focus(),this._inputEl.select(),this._resetToggleInputValue(),this._actionToggleMenu()}_handleInputComboboxInput(e){e.stopPropagation(),this._searchText=this._inputEl.value,this._query=this._inputEl.value,this._setMatchingItems()}_handleClickComboboxInput(e){e.stopPropagation(),this._inputEl.select(),this._setMatchingItems()}_handleChangeComboboxInput(e){e.stopPropagation()}_handleBlurComboboxInput(e){this._resetToggleInputValue()}_handleClickDocument(e){(e.target===this._toggleEl||this._toggleEl.contains(e.target))&&(this._inputEl.focus(),e.stopPropagation()),Array.from(this._disabledItemsEl).some((t=>t===e.target||t.contains(e.target)))||this._actionHideMenu()}_handleKeyDownComboboxInput(e){switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightPrevMenuItem();break;case"Tab":this._selectorVisible&&this._actionHideMenu();break;case"Down":case"ArrowDown":if(e.preventDefault(),!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightNextMenuItem();break;case"Enter":{e.preventDefault();const t=this._highlightItemEl;if(null===t)break;const i=t.getAttribute("value");this._actionUpdateValue(i),this._actionHideMenu();break}case"Escape":e.preventDefault(),this._selectorVisible&&e.stopPropagation(),this._resetToggleInputValue(),this._actionHideMenu();break;case"Home":this._selectorVisible&&(e.preventDefault(),this._actionHighlightFirstMenuItem());break;case"End":this._selectorVisible&&(e.preventDefault(),this._actionHighlightLastMenuItem())}}_getSelectedLabel(){const e=this.items.filter(((e,t)=>this._isCheckedItem(e)));return 0===e.length?"":void 0===e[0].label?e[0].value:e[0].label}_actionShowMenu(){""===this._query.trim()&&(this._matchingItems=this.items),0!==this.items.length&&0!==this._matchingItems.length&&(this._inputEl.focus(),this._selectorVisible=!0)}_actionHideMenu(){this._selectorVisible=!1,this._actionRemoveActiveDescendant()}_actionToggleMenu(){this._selectorVisible?this._actionHideMenu():this._actionShowMenu()}_actionHighlightFirstMenuItem(){let e=this._firstItemEl,t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightLastMenuItem(){let e=this._lastItemEl,t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightPrevMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.previousElementSibling),null===e&&(e=this._lastItemEl);let t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling,null===e&&(e=this._lastItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightNextMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.nextElementSibling),null===e&&(e=this._firstItemEl);let t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling,null===e&&(e=this._firstItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionClearAllHighlightMenuItem(){this._itemsEl.forEach((e=>{e.classList.remove("kuc-combobox-1-17-1__group__select-menu__highlight")})),this._actionRemoveActiveDescendant()}_setHighlightAndActiveDescendantMenu(e){this._actionHighlightMenuItem(e),this._actionSetActiveDescendant(e.id),this._scrollToView()}_actionHighlightMenuItem(e){this._actionClearAllHighlightMenuItem(),e.classList.add("kuc-combobox-1-17-1__group__select-menu__highlight")}_actionUpdateValue(e){if(this.value===e)return void this._resetToggleInputValue();const t={oldValue:this.value,value:e};this.value=e,this._query="",gi(this,"change",t)}_actionSetActiveDescendant(e){void 0!==e&&null!==this._inputEl&&this._inputEl.setAttribute("aria-activedescendant",e)}_actionRemoveActiveDescendant(){this._inputEl.removeAttribute("aria-activedescendant")}_setMatchingItems(){const e=this.items.filter((e=>{const t=new RegExp(this._query.trim().replace(/[.*+?^=!:${}()|[\]/\\]/g,"\\$&"),"gi");return e.label?t.test(e.label):!!e.value&&t.test(e.value)}));0===e.length?(this._matchingItems=[],this._actionHideMenu()):(this._matchingItems=e,this._actionShowMenu())}_getScrollbarWidthHeight(){const e=document.createElement("div");e.style.cssText="overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(e);const t=e.offsetWidth-e.clientWidth,i=e.offsetHeight-e.clientHeight;return document.body.removeChild(e),{scrollbarWidth:t,scrollbarHeight:i}}_getDistanceToggleButton(){const{scrollbarWidth:e,scrollbarHeight:t}=this._getScrollbarWidthHeight(),i=document.body.scrollHeight>window.innerHeight,n=document.body.scrollWidth>window.innerWidth;return{toTop:this._toggleEl.getBoundingClientRect().top,toBottom:window.innerHeight-this._toggleEl.getBoundingClientRect().bottom-(n?t:0),toLeft:this._toggleEl.getBoundingClientRect().left,toRight:window.innerWidth-this._toggleEl.getBoundingClientRect().left-(i?e:0)}}_setMenuPositionAboveOrBelow(){this._menuEl.style.height="auto",this._menuEl.style.bottom="auto",this._menuEl.style.overflowY="";const e=this._menuEl.getBoundingClientRect().height,t=this._getDistanceToggleButton();if(!(t.toBottom>=e))if(t.toBottom<t.toTop){const i=this._errorEl.offsetHeight?this._errorEl.offsetHeight+16:0;if(this._menuEl.style.bottom=`${this._toggleEl.offsetHeight+i}px`,t.toTop>=e)return;this._menuEl.style.height=`${t.toTop}px`,this._menuEl.style.overflowY="scroll"}else this._menuEl.style.height=`${t.toBottom}px`,this._menuEl.style.overflowY="scroll"}_setMenuPositionLeftOrRight(){this._menuEl.style.right="auto";const e=this._menuEl.getBoundingClientRect().width,t=this._getDistanceToggleButton();if(t.toRight>=e||t.toLeft<e||t.toRight<0)return;const i=this._toggleEl.offsetWidth-t.toRight;this._menuEl.style.right=i>0?`${i}px`:"0px"}_setMenuPosition(){this._setMenuPositionAboveOrBelow(),this._setMenuPositionLeftOrRight()}_scrollToView(){if(!this._highlightItemEl||!this._menuEl)return;const e=this._menuEl.getBoundingClientRect(),t=this._highlightItemEl.getBoundingClientRect();t.top<e.top&&(this._menuEl.scrollTop-=e.top-t.top),e.bottom<t.bottom&&(this._menuEl.scrollTop+=t.bottom-e.bottom)}_actionResizeScrollWindow(){!this._timeoutID&&this._selectorVisible&&(this._timeoutID=window.setTimeout((()=>{this._timeoutID=null,this._setMenuPosition()}),50))}_isCheckedItem(e){return e.value===this.value}_resetToggleInputValue(){const e=this._getSelectedLabel();this._searchText!==e&&(this._searchText=e||""),this._query=""}_getItemElementWhenMouseOverDown(e){return e.classList.value.split(" ").includes("kuc-combobox-1-17-1__group__select-menu__item")?e:this._getItemElementWhenMouseOverDown(e.parentElement)}}zi([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),zi([Ge({type:String})],e.prototype,"error",void 0),zi([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),zi([Ge({type:String})],e.prototype,"label",void 0),zi([Ge({type:String})],e.prototype,"value",void 0),zi([Ge({type:Boolean})],e.prototype,"disabled",void 0),zi([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),zi([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),zi([Ge({type:Array})],e.prototype,"items",void 0),zi([Fe()],e.prototype,"_selectorVisible",void 0),zi([qe(".kuc-combobox-1-17-1__group__toggle")],e.prototype,"_toggleEl",void 0),zi([qe(".kuc-combobox-1-17-1__group__toggle__input")],e.prototype,"_inputEl",void 0),zi([qe(".kuc-combobox-1-17-1__group__select-menu")],e.prototype,"_menuEl",void 0),zi([Ye(".kuc-combobox-1-17-1__group__select-menu__item")],e.prototype,"_itemsEl",void 0),zi([qe(".kuc-combobox-1-17-1__group__select-menu__item")],e.prototype,"_firstItemEl",void 0),zi([qe(".kuc-combobox-1-17-1__group__select-menu__item:last-child")],e.prototype,"_lastItemEl",void 0),zi([qe(".kuc-combobox-1-17-1__group__select-menu__item[aria-selected=true]")],e.prototype,"_selectedItemEl",void 0),zi([qe(".kuc-combobox-1-17-1__group__select-menu__highlight")],e.prototype,"_highlightItemEl",void 0),zi([qe(".kuc-base-error-1-17-1__error")],e.prototype,"_errorEl",void 0),zi([Ye(".kuc-combobox-1-17-1__group__select-menu__item--disabled")],e.prototype,"_disabledItemsEl",void 0),zi([Fe()],e.prototype,"_searchText",void 0),window.customElements.define("kuc-combobox-1-17-1",e),mi('\n  kuc-combobox-1-17-1,\n  kuc-combobox-1-17-1 *,\n  kuc-combobox-1-17-1:lang(en),\n  kuc-combobox-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-combobox-1-17-1:lang(ja),\n  kuc-combobox-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-combobox-1-17-1:lang(zh),\n  kuc-combobox-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-combobox-1-17-1:lang(zh-TW),\n  kuc-combobox-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體", "Microsoft JhengHei", "新宋体", NSimSun, STHeiti, Hei, "Heiti SC", sans-serif;\n  }\n  kuc-combobox-1-17-1 {\n    position: relative;\n    display: inline-table;\n    font-size: 14px;\n    color: #333333;\n    width: var(--kuc-combobox-toggle-width, 180px);\n    vertical-align: top;\n    line-height: 1.5;\n  }\n  kuc-combobox-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-combobox-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    margin: 0px;\n    position: relative;\n  }\n  .kuc-combobox-1-17-1__group__label {\n    padding: 4px 0px 8px 0px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n  .kuc-combobox-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-combobox-1-17-1__group__toggle {\n    position: relative;\n    display: flex;\n    width: var(--kuc-combobox-toggle-width);\n  }\n  input[type=text].kuc-combobox-1-17-1__group__toggle__input {\n    width: 100%;\n    height: var(--kuc-combobox-toggle-height, 40px);\n    box-sizing: border-box;\n    box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n    border: 1px solid #e3e7e8;\n    background-color: #ffffff;\n    color: var(--kuc-combobox-toggle-color, #000000);\n    font-size: var(--kuc-combobox-font-size, 14px);\n    line-height: 1.5;\n    padding: 0 40px 0 8px;\n    margin: 0;\n  }\n  input[type=text].kuc-combobox-1-17-1__group__toggle__input:focus {\n    outline: none;\n    border: 1px solid #3498db;\n    background-color: #e2f2fe;\n    box-shadow: none;\n  }\n  input[type=text].kuc-combobox-1-17-1__group__toggle__input:disabled,\n  .kuc-combobox-1-17-1__group__toggle__icon__button:disabled {\n    background-color: #d4d7d7;\n    box-shadow: none;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-combobox-1-17-1__group__toggle__icon {\n    position: absolute;\n    right: 0px;\n    top: 2px;\n    border-left: 1px solid #e3e7e8;\n  }\n  .kuc-combobox-1-17-1__group__toggle__icon__button {\n    width: 40px;\n    height: calc(var(--kuc-combobox-toggle-height, 40px) - 4px);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 0;\n    padding: 0;\n    border-style: none;\n    background-color: transparent;\n    cursor: pointer;\n  }\n  .kuc-combobox-1-17-1__group__select-menu {\n    min-width: 280px;\n    color: var(--kuc-combobox-menu-color);\n    padding: 8px 0;\n    border: 1px solid #e3e7e8;\n    box-sizing: border-box;\n    background-color: #ffffff;\n    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n    position: absolute;\n    z-index: 2000;\n    margin: 0;\n    list-style: none;\n  }\n  .kuc-combobox-1-17-1__group__select-menu[hidden] {\n    display: none;\n  }\n  .kuc-combobox-1-17-1__group__select-menu__item {\n    font-size: var(--kuc-combobox-font-size, 14px);\n    padding: 8px 16px 8px 24px;\n    line-height: 1;\n    position: relative;\n    cursor: pointer;\n    white-space: nowrap;\n  }\n  .kuc-combobox-1-17-1__group__select-menu__item:lang(en) b,\n  .kuc-combobox-1-17-1__group__select-menu__item:lang(ja) b,\n  .kuc-combobox-1-17-1__group__select-menu__item:lang(zh) b,\n  .kuc-combobox-1-17-1__group__select-menu__item:lang(zh-TW) b{\n    font-weight: 700;\n  }\n  .kuc-combobox-1-17-1__group__select-menu__item__icon {\n    position: absolute;\n    top: 50%;\n    left: 6px;\n    margin-top: -5px;\n  }\n  .kuc-combobox-1-17-1__group__select-menu__item[aria-selected="true"] {\n    color: var(--kuc-combobox-menu-color-selected, #3498db);\n  }\n  .kuc-combobox-1-17-1__group__select-menu__item--disabled,\n  .kuc-combobox-1-17-1__group__select-menu__item--disabled[aria-selected="true"] {\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-combobox-1-17-1__group__select-menu__highlight[role="option"] {\n    background-color: #e2f2fe;\n  }\n'),Ri=e}})();var ji=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Gi extends bi{constructor(){super(),this.year=(new Date).getFullYear(),this.postfix="",this._listBoxVisible=!1,this._handleScrollDocument=this._handleScrollDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("scroll",this._handleScrollDocument)}),1)}disconnectedCallback(){document.removeEventListener("scroll",this._handleScrollDocument),super.disconnectedCallback()}update(e){this._listBoxItems=this._getYearOptions().map((e=>({value:`${e}`,label:`${e}${this.postfix}`}))),super.update(e)}render(){return we`
       <button
-        class="kuc-base-datetime-header-year-1-17-0__toggle"
+        class="kuc-base-datetime-header-year-1-17-1__toggle"
         aria-haspopup="listbox"
         aria-expanded="${this._listBoxVisible}"
         tabindex="${this._listBoxVisible?"-1":"0"}"
@@ -336,28 +335,28 @@
         @click="${this._handleClickDropdownYearToggle}"
         @keydown="${this._handleKeyDownYearToggle}"
       >
-        <span class="kuc-base-datetime-header-year-1-17-0__toggle__label"
+        <span class="kuc-base-datetime-header-year-1-17-1__toggle__label"
           >${this.year}${this.postfix}</span
         >
-        <span class="kuc-base-datetime-header-year-1-17-0__toggle__icon"
-          >${ti()}
+        <span class="kuc-base-datetime-header-year-1-17-1__toggle__icon"
+          >${ei()}
         </span>
       </button>
       ${this._getListBoxTemplate()}
-    `}async updated(e){await this.updateComplete,e.has("_listBoxVisible")&&this._listBoxVisible&&this._handleScrollDocument(),super.update(e)}closeListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_handleScrollDocument(){const e=ni(this);e.inputToBottom>=e.inputToTop?ii(this,"bottom"):ii(this,"top")}_getListBoxTemplate(){return this._listBoxVisible?$e`
-          <kuc-base-datetime-listbox-1-17-0
+    `}async updated(e){await this.updateComplete,e.has("_listBoxVisible")&&this._listBoxVisible&&this._handleScrollDocument(),super.update(e)}closeListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_handleScrollDocument(){const e=ii(this);e.inputToBottom>=e.inputToTop?ti(this,"bottom"):ti(this,"top")}_getListBoxTemplate(){return this._listBoxVisible?we`
+          <kuc-base-datetime-listbox-1-17-1
             .items="${this._listBoxItems||[]}"
             .value="${this.year.toString()}"
-            class="kuc-base-datetime-header-year-1-17-0__listbox"
+            class="kuc-base-datetime-header-year-1-17-1__listbox"
             @kuc:listbox-click="${this._handleChangeListBox}"
             @kuc:listbox-blur="${this._handleFocusOutListBox}"
             @kuc:listbox-escape="${this._handleListBoxEscape}"
             aria-hidden="${!this._listBoxVisible}"
           >
-          </kuc-base-datetime-listbox-1-17-0>
-        `:""}_handleFocusOutListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_handleListBoxEscape(){this._handleFocusOutListBox()}_handleMouseUpDropdownToggle(e){e.preventDefault()}_handleMouseDownDropdownToggle(e){e.preventDefault()}_handleClickDropdownYearToggle(e){e.stopPropagation(),e.preventDefault(),this._listBoxVisible?this.closeListBox():this._openListBox(),gi(this,"kuc:year-dropdown-click",{value:this._listBoxVisible.toString(),oldValue:(!this._listBoxVisible).toString()})}_handleKeyDownYearToggle(e){"Tab"!==e.key&&(e.preventDefault(),this._openListBoxByKey(e.key))}_openListBoxByKey(e){[" ","Up","ArrowUp","Down","ArrowDown","Enter"].indexOf(e)>-1&&this._openListBox()}_handleChangeListBox(e){if(e.preventDefault(),e.stopPropagation(),this.closeListBox(),!e.detail.value)return;this.year=Number(e.detail.value);const t={value:`${this.year}`};gi(this,"kuc:year-dropdown-change",t)}_openListBox(){this._listBoxVisible=!0}_getYearOptions(){const e=[];Number.isInteger(this.year)||(this.year=(new Date).getFullYear());let t=this.year<100?0:this.year-100;const i=this.year>=9899?9999:this.year+100;for(;t<=i;t++)e.push(t);return e}}ji([Fe({type:Number})],Gi.prototype,"year",void 0),ji([Fe({type:String})],Gi.prototype,"postfix",void 0),ji([We()],Gi.prototype,"_listBoxVisible",void 0),ji([Ke(".kuc-base-datetime-header-year-1-17-0__toggle")],Gi.prototype,"_toggleEl",void 0),window.customElements.get("kuc-base-datetime-header-year-1-17-0")||(mi("\n.kuc-base-datetime-header-year-1-17-0__toggle {\n  position: relative;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 24px 0 8px;\n  line-height: 30px;\n  overflow: hidden;\n  background-color: white;\n  border: 1px solid transparent;\n  cursor: pointer;\n}\n.kuc-base-datetime-header-year-1-17-0__toggle__icon {\n  position: absolute;\n  flex: none;\n  width: 24px;\n  height: 32px;\n}\n.kuc-base-datetime-header-year-1-17-0__toggle__label {\n  font-size: 13px;\n  color: #333333;\n}\n.kuc-base-datetime-header-year-1-17-0__toggle:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n"),window.customElements.define("kuc-base-datetime-header-year-1-17-0",Gi));var Fi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Wi extends bi{constructor(){super(),this.language="auto",this.month=1,this._listBoxVisible=!1,this._locale=Qt("en"),this._monthLabel="",this._maxHeight=1e3,this._handleScrollDocument=this._handleScrollDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("scroll",this._handleScrollDocument)}),1)}disconnectedCallback(){document.removeEventListener("scroll",this._handleScrollDocument),super.disconnectedCallback()}update(e){e.has("language")&&(this._locale=Qt(this.language),this._listBoxItems=this._getListBoxItems()),e.has("month")&&(this._monthLabel=this._getMonthLabel()),super.update(e)}render(){return $e`
+          </kuc-base-datetime-listbox-1-17-1>
+        `:""}_handleFocusOutListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_handleListBoxEscape(){this._handleFocusOutListBox()}_handleMouseUpDropdownToggle(e){e.preventDefault()}_handleMouseDownDropdownToggle(e){e.preventDefault()}_handleClickDropdownYearToggle(e){e.stopPropagation(),e.preventDefault(),this._listBoxVisible?this.closeListBox():this._openListBox(),gi(this,"kuc:year-dropdown-click",{value:this._listBoxVisible.toString(),oldValue:(!this._listBoxVisible).toString()})}_handleKeyDownYearToggle(e){"Tab"!==e.key&&(e.preventDefault(),this._openListBoxByKey(e.key))}_openListBoxByKey(e){[" ","Up","ArrowUp","Down","ArrowDown","Enter"].indexOf(e)>-1&&this._openListBox()}_handleChangeListBox(e){if(e.preventDefault(),e.stopPropagation(),this.closeListBox(),!e.detail.value)return;this.year=Number(e.detail.value);const t={value:`${this.year}`};gi(this,"kuc:year-dropdown-change",t)}_openListBox(){this._listBoxVisible=!0}_getYearOptions(){const e=[];Number.isInteger(this.year)||(this.year=(new Date).getFullYear());let t=this.year<100?0:this.year-100;const i=this.year>=9899?9999:this.year+100;for(;t<=i;t++)e.push(t);return e}}ji([Ge({type:Number})],Gi.prototype,"year",void 0),ji([Ge({type:String})],Gi.prototype,"postfix",void 0),ji([Fe()],Gi.prototype,"_listBoxVisible",void 0),ji([qe(".kuc-base-datetime-header-year-1-17-1__toggle")],Gi.prototype,"_toggleEl",void 0),window.customElements.get("kuc-base-datetime-header-year-1-17-1")||(mi("\n.kuc-base-datetime-header-year-1-17-1__toggle {\n  position: relative;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 24px 0 8px;\n  line-height: 30px;\n  overflow: hidden;\n  background-color: white;\n  border: 1px solid transparent;\n  cursor: pointer;\n}\n.kuc-base-datetime-header-year-1-17-1__toggle__icon {\n  position: absolute;\n  flex: none;\n  width: 24px;\n  height: 32px;\n}\n.kuc-base-datetime-header-year-1-17-1__toggle__label {\n  font-size: 13px;\n  color: #333333;\n}\n.kuc-base-datetime-header-year-1-17-1__toggle:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n"),window.customElements.define("kuc-base-datetime-header-year-1-17-1",Gi));var Fi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Wi extends bi{constructor(){super(),this.language="auto",this.month=1,this._listBoxVisible=!1,this._locale=Xt("en"),this._monthLabel="",this._maxHeight=1e3,this._handleScrollDocument=this._handleScrollDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("scroll",this._handleScrollDocument)}),1)}disconnectedCallback(){document.removeEventListener("scroll",this._handleScrollDocument),super.disconnectedCallback()}update(e){e.has("language")&&(this._locale=Xt(this.language),this._listBoxItems=this._getListBoxItems()),e.has("month")&&(this._monthLabel=this._getMonthLabel()),super.update(e)}render(){return we`
       <button
-        class="kuc-base-datetime-header-month-1-17-0__toggle"
+        class="kuc-base-datetime-header-month-1-17-1__toggle"
         aria-haspopup="listbox"
         aria-expanded="${this._listBoxVisible}"
         tabindex="${this._listBoxVisible?"-1":"0"}"
@@ -366,38 +365,38 @@
         @click="${this._handleClickDropdownMonthToggle}"
         @keydown="${this._handleKeyDownMonthToggle}"
       >
-        <span class="kuc-base-datetime-header-month-1-17-0__toggle__label"
+        <span class="kuc-base-datetime-header-month-1-17-1__toggle__label"
           >${this._monthLabel}</span
         >
-        <span class="kuc-base-datetime-header-month-1-17-0__toggle__icon"
-          >${ti()}
+        <span class="kuc-base-datetime-header-month-1-17-1__toggle__icon"
+          >${ei()}
         </span>
       </button>
       ${this._getListBoxTemplate()}
-    `}async updated(e){await this.updateComplete,e.has("_listBoxVisible")&&this._listBoxVisible&&this._handleScrollDocument(),super.update(e)}_handleScrollDocument(){const e=ni(this);e.inputToBottom>=e.inputToTop?ii(this,"bottom"):ii(this,"top")}closeListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_getListBoxTemplate(){return this._listBoxVisible?$e`
-          <kuc-base-datetime-listbox-1-17-0
+    `}async updated(e){await this.updateComplete,e.has("_listBoxVisible")&&this._listBoxVisible&&this._handleScrollDocument(),super.update(e)}_handleScrollDocument(){const e=ii(this);e.inputToBottom>=e.inputToTop?ti(this,"bottom"):ti(this,"top")}closeListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_getListBoxTemplate(){return this._listBoxVisible?we`
+          <kuc-base-datetime-listbox-1-17-1
             .items="${this._listBoxItems||[]}"
             .value="${this.month.toString()}"
             .maxHeight="${this._maxHeight}"
-            class="kuc-base-datetime-header-month-1-17-0__listbox"
+            class="kuc-base-datetime-header-month-1-17-1__listbox"
             @kuc:listbox-click="${this._handleChangeListBox}"
             @kuc:listbox-blur="${this._handleFocusOutListBox}"
             @kuc:listbox-escape="${this._handleListBoxEscape}"
             aria-hidden="${!this._listBoxVisible}"
           >
-          </kuc-base-datetime-listbox-1-17-0>
-        `:""}_handleFocusOutListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_handleListBoxEscape(){this._handleFocusOutListBox()}_handleClickDropdownMonthToggle(e){e.stopPropagation(),e.preventDefault(),this._listBoxVisible?this.closeListBox():this._openListBox(),gi(this,"kuc:month-dropdown-click",{value:this._listBoxVisible.toString(),oldValue:(!this._listBoxVisible).toString()})}_handleMouseUpDropdownToggle(e){e.preventDefault()}_handleMouseDownDropdownToggle(e){e.preventDefault()}_handleKeyDownMonthToggle(e){this._handleTabKey(e.key)||(e.preventDefault(),this._openListBoxByKey(e.key))}_openListBoxByKey(e){[" ","Up","ArrowUp","Down","ArrowDown","Enter"].indexOf(e)>-1&&this._openListBox()}_handleTabKey(e){return"Tab"===e}_handleChangeListBox(e){if(e.preventDefault(),e.stopPropagation(),this.closeListBox(),!e.detail.value)return;this.month=Number(e.detail.value);const t={value:`${this.month}`};gi(this,"kuc:month-dropdown-change",t)}_openListBox(){this._listBoxVisible=!0}_getListBoxItems(){return this._locale.MONTH_SELECT.map(((e,t)=>({value:`${t+1}`,label:`${e}`})))}_getMonthLabel(){const e=this._locale.MONTH_SELECT.filter(((e,t)=>this.month===t+1));return e.length>0?e[0]:"JANUARY"}}Fi([Fe({type:String,attribute:"lang",reflect:!0})],Wi.prototype,"language",void 0),Fi([Fe({type:Number})],Wi.prototype,"month",void 0),Fi([We()],Wi.prototype,"_listBoxVisible",void 0),Fi([Ke(".kuc-base-datetime-header-month-1-17-0__toggle")],Wi.prototype,"_toggleEl",void 0),window.customElements.get("kuc-base-datetime-header-month-1-17-0")||(mi("\n.kuc-base-datetime-header-month-1-17-0__toggle {\n  position: relative;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 24px 0 8px;\n  line-height: 30px;\n  overflow: hidden;\n  background-color: white;\n  border: 1px solid transparent;\n  cursor: pointer;\n}\n.kuc-base-datetime-header-month-1-17-0__toggle__icon {\n  position: absolute;\n  flex: none;\n  width: 24px;\n  height: 32px;\n}\n.kuc-base-datetime-header-month-1-17-0__toggle__label {\n  font-size: 13px;\n  color: #333333;\n}\n.kuc-base-datetime-header-month-1-17-0__toggle:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n"),window.customElements.define("kuc-base-datetime-header-month-1-17-0",Wi));var qi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Ki extends bi{constructor(){super(...arguments),this.language="en",this.month=1,this.year=(new Date).getFullYear(),this._locale=Qt("en")}update(e){e.has("language")&&(this._locale=Qt(this.language)),super.update(e)}render(){return $e`
-      <div class="kuc-base-datetime-calendar-header-1-17-0__group">
+          </kuc-base-datetime-listbox-1-17-1>
+        `:""}_handleFocusOutListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_handleListBoxEscape(){this._handleFocusOutListBox()}_handleClickDropdownMonthToggle(e){e.stopPropagation(),e.preventDefault(),this._listBoxVisible?this.closeListBox():this._openListBox(),gi(this,"kuc:month-dropdown-click",{value:this._listBoxVisible.toString(),oldValue:(!this._listBoxVisible).toString()})}_handleMouseUpDropdownToggle(e){e.preventDefault()}_handleMouseDownDropdownToggle(e){e.preventDefault()}_handleKeyDownMonthToggle(e){this._handleTabKey(e.key)||(e.preventDefault(),this._openListBoxByKey(e.key))}_openListBoxByKey(e){[" ","Up","ArrowUp","Down","ArrowDown","Enter"].indexOf(e)>-1&&this._openListBox()}_handleTabKey(e){return"Tab"===e}_handleChangeListBox(e){if(e.preventDefault(),e.stopPropagation(),this.closeListBox(),!e.detail.value)return;this.month=Number(e.detail.value);const t={value:`${this.month}`};gi(this,"kuc:month-dropdown-change",t)}_openListBox(){this._listBoxVisible=!0}_getListBoxItems(){return this._locale.MONTH_SELECT.map(((e,t)=>({value:`${t+1}`,label:`${e}`})))}_getMonthLabel(){const e=this._locale.MONTH_SELECT.filter(((e,t)=>this.month===t+1));return e.length>0?e[0]:"JANUARY"}}Fi([Ge({type:String,attribute:"lang",reflect:!0})],Wi.prototype,"language",void 0),Fi([Ge({type:Number})],Wi.prototype,"month",void 0),Fi([Fe()],Wi.prototype,"_listBoxVisible",void 0),Fi([qe(".kuc-base-datetime-header-month-1-17-1__toggle")],Wi.prototype,"_toggleEl",void 0),window.customElements.get("kuc-base-datetime-header-month-1-17-1")||(mi("\n.kuc-base-datetime-header-month-1-17-1__toggle {\n  position: relative;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 24px 0 8px;\n  line-height: 30px;\n  overflow: hidden;\n  background-color: white;\n  border: 1px solid transparent;\n  cursor: pointer;\n}\n.kuc-base-datetime-header-month-1-17-1__toggle__icon {\n  position: absolute;\n  flex: none;\n  width: 24px;\n  height: 32px;\n}\n.kuc-base-datetime-header-month-1-17-1__toggle__label {\n  font-size: 13px;\n  color: #333333;\n}\n.kuc-base-datetime-header-month-1-17-1__toggle:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n"),window.customElements.define("kuc-base-datetime-header-month-1-17-1",Wi));var qi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Ki extends bi{constructor(){super(...arguments),this.language="en",this.month=1,this.year=(new Date).getFullYear(),this._locale=Xt("en")}update(e){e.has("language")&&(this._locale=Xt(this.language)),super.update(e)}render(){return we`
+      <div class="kuc-base-datetime-calendar-header-1-17-1__group">
         <button
           aria-label="previous month"
           type="button"
-          class="kuc-base-datetime-calendar-header-1-17-0__group__button kuc-base-datetime-calendar-header-1-17-0__group__button--previous-month"
+          class="kuc-base-datetime-calendar-header-1-17-1__group__button kuc-base-datetime-calendar-header-1-17-1__group__button--previous-month"
           @click="${this._handleClickCalendarPrevMonthBtn}"
           @keydown="${this._handleKeyDownCalendarPrevMonthBtn}"
         >
-          ${Ce`
+          ${$e`
     <svg
-      class="kuc-base-datetime-calendar-header-1-17-0__group__button-icon"
+      class="kuc-base-datetime-calendar-header-1-17-1__group__button-icon"
       width="9"
       height="14"
       viewBox="0 0 9 14"
@@ -412,18 +411,18 @@
       />
     </svg>`}
         </button>
-        <div class="kuc-base-datetime-calendar-header-1-17-0__group__center">
+        <div class="kuc-base-datetime-calendar-header-1-17-1__group__center">
           ${this._getYearMonthTemplate()}
         </div>
         <button
           aria-label="next month"
           type="button"
-          class="kuc-base-datetime-calendar-header-1-17-0__group__button kuc-base-datetime-calendar-header-1-17-0__group__button--next-month"
+          class="kuc-base-datetime-calendar-header-1-17-1__group__button kuc-base-datetime-calendar-header-1-17-1__group__button--next-month"
           @click="${this._handleClickCalendarNextMonthBtn}"
         >
-          ${Ce`
+          ${$e`
     <svg
-      class="kuc-base-datetime-calendar-header-1-17-0__group__button-icon"
+      class="kuc-base-datetime-calendar-header-1-17-1__group__button-icon"
       width="9"
       height="14"
       viewBox="0 0 9 14"
@@ -439,35 +438,35 @@
     </svg>`}
         </button>
       </div>
-    `}_getYearTemplate(){return $e`
-      <kuc-base-datetime-header-year-1-17-0
-        class="kuc-base-datetime-calendar-header-1-17-0__year"
+    `}_getYearTemplate(){return we`
+      <kuc-base-datetime-header-year-1-17-1
+        class="kuc-base-datetime-calendar-header-1-17-1__year"
         .postfix="${this._locale.YEAR_SELECT_POSTFIX}"
         .year="${this.year}"
         @kuc:year-dropdown-change="${this._handleYearDropdownChange}"
         @kuc:year-dropdown-click="${this._handleYearDropdownClick}"
       >
-      </kuc-base-datetime-header-year-1-17-0>
-    `}_getMonthTemplate(){return $e`
-      <kuc-base-datetime-header-month-1-17-0
-        class="kuc-base-datetime-calendar-header-1-17-0__month"
+      </kuc-base-datetime-header-year-1-17-1>
+    `}_getMonthTemplate(){return we`
+      <kuc-base-datetime-header-month-1-17-1
+        class="kuc-base-datetime-calendar-header-1-17-1__month"
         .month="${this.month}"
         .language="${this.language}"
         @kuc:month-dropdown-change="${this._handleMonthDropdownChange}"
         @kuc:month-dropdown-click="${this._handleMonthDropdownClick}"
       >
-      </kuc-base-datetime-header-month-1-17-0>
-    `}_getYearMonthTemplate(){return"zh"===this.language||"ja"===this.language||"zh-TW"===this.language?$e` ${this._getYearTemplate()}${this._getMonthTemplate()} `:$e` ${this._getMonthTemplate()}${this._getYearTemplate()} `}_handleMonthDropdownChange(e){e.stopPropagation(),e.preventDefault(),this.month=parseInt(e.detail.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleYearDropdownChange(e){e.stopPropagation(),e.preventDefault(),this.year=parseInt(e.detail.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleYearDropdownClick(){this._listBoxMonthEl&&this._baseDateTimeHeaderMonthEl.closeListBox()}_handleMonthDropdownClick(){this._listBoxYearEl&&this._baseDateTimeHeaderYearEl.closeListBox()}_handleClickCalendarPrevMonthBtn(e){e.stopPropagation(),1===this.month?(this.month=12,this.year--):this.month-=1,this._dispatchCalendarHeaderChangeEvent()}_handleKeyDownCalendarPrevMonthBtn(e){e.shiftKey&&"Tab"===e.key&&(e.preventDefault(),gi(this,"kuc:calendar-header-previous-shifttab"))}_handleClickCalendarNextMonthBtn(e){e.stopPropagation(),12===this.month?(this.month=1,this.year++):this.month+=1,this._dispatchCalendarHeaderChangeEvent()}_dispatchCalendarHeaderChangeEvent(){const e=this.year,t=this.month;gi(this,"kuc:calendar-header-change",{value:`${e}-${t}`})}}qi([Fe({type:String,attribute:"lang",reflect:!0})],Ki.prototype,"language",void 0),qi([Fe({type:Number,hasChanged(e){return(t=e)>0&&t<13;var t}})],Ki.prototype,"month",void 0),qi([Fe({type:Number,hasChanged(e){return(t=e)>=0&&t<1e4;var t}})],Ki.prototype,"year",void 0),qi([Ke(".kuc-base-datetime-calendar-header-1-17-0__month")],Ki.prototype,"_baseDateTimeHeaderMonthEl",void 0),qi([Ke(".kuc-base-datetime-calendar-header-1-17-0__year")],Ki.prototype,"_baseDateTimeHeaderYearEl",void 0),qi([Ke(".kuc-base-datetime-header-month-1-17-0__listbox")],Ki.prototype,"_listBoxMonthEl",void 0),qi([Ke(".kuc-base-datetime-header-year-1-17-0__listbox")],Ki.prototype,"_listBoxYearEl",void 0),window.customElements.get("kuc-base-datetime-calendar-header-1-17-0")||(mi('\nkuc-base-datetime-calendar-header-1-17-0,\nkuc-base-datetime-calendar-header-1-17-0 *,\nkuc-base-datetime-calendar-header-1-17-0:lang(en),\nkuc-base-datetime-calendar-header-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-calendar-header-1-17-0:lang(ja),\nkuc-base-datetime-calendar-header-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n  font-weight: 700;\n}\nkuc-base-datetime-calendar-header-1-17-0:lang(zh),\nkuc-base-datetime-calendar-header-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-base-datetime-calendar-header-1-17-0:lang(zh-TW),\nkuc-base-datetime-calendar-header-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\nkuc-base-datetime-calendar-header-1-17-0:lang(ja) kuc-base-datetime-listbox-1-17-0 * {\n  font-weight: 400;\n}\n.kuc-base-datetime-calendar-header-1-17-0__group {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  border-bottom: 1px solid #e3e7e8;\n  padding: 0;\n  white-space: nowrap;\n  width: 266px;\n  height: 44px;\n}\n.kuc-base-datetime-calendar-header-1-17-0__group__button {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  outline: none;\n  width: 38px;\n  height: 32px;\n  margin: 0;\n  text-align: center;\n}\n.kuc-base-datetime-calendar-header-1-17-0__group__button:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n.kuc-base-datetime-calendar-header-1-17-0__group__button-icon {\n  vertical-align: middle;\n}\n.kuc-base-datetime-calendar-header-1-17-0__group__center {\n  width: 190px;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n}\n.kuc-base-datetime-calendar-header-1-17-0__month {\n  margin: 0 4px 0 4px;\n}\n'),window.customElements.define("kuc-base-datetime-calendar-header-1-17-0",Ki));var Yi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Ji extends bi{constructor(){super(),this.month=1,this.year=2021,this.language="en",this.value="",this._month=1,this._year=2021,this._locale=Qt("en"),this._handleClickDocument=this._handleClickDocument.bind(this),this._handleKeyDownDocument=this._handleKeyDownDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument),document.addEventListener("keydown",this._handleKeyDownDocument)}),1)}disconnectedCallback(){document.removeEventListener("click",this._handleClickDocument),document.removeEventListener("keydown",this._handleKeyDownDocument),super.disconnectedCallback()}update(e){if(e.forEach(((e,t)=>{"language"===t&&(this._locale=Qt(this.language))})),e.has("month")&&(this._month=this.month),e.has("year")&&(this._year=this.year),e.has("value")){const{month:e,year:t}=this._separateDateValue();this._month=parseInt(e,10),this._year=parseInt(t,10)}super.update(e)}render(){return $e`
-      <table class="kuc-base-datetime-calendar-body-1-17-0__table" role="grid">
+      </kuc-base-datetime-header-month-1-17-1>
+    `}_getYearMonthTemplate(){return"zh"===this.language||"ja"===this.language||"zh-TW"===this.language?we` ${this._getYearTemplate()}${this._getMonthTemplate()} `:we` ${this._getMonthTemplate()}${this._getYearTemplate()} `}_handleMonthDropdownChange(e){e.stopPropagation(),e.preventDefault(),this.month=parseInt(e.detail.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleYearDropdownChange(e){e.stopPropagation(),e.preventDefault(),this.year=parseInt(e.detail.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleYearDropdownClick(){this._listBoxMonthEl&&this._baseDateTimeHeaderMonthEl.closeListBox()}_handleMonthDropdownClick(){this._listBoxYearEl&&this._baseDateTimeHeaderYearEl.closeListBox()}_handleClickCalendarPrevMonthBtn(e){e.stopPropagation(),1===this.month?(this.month=12,this.year--):this.month-=1,this._dispatchCalendarHeaderChangeEvent()}_handleKeyDownCalendarPrevMonthBtn(e){e.shiftKey&&"Tab"===e.key&&(e.preventDefault(),gi(this,"kuc:calendar-header-previous-shifttab"))}_handleClickCalendarNextMonthBtn(e){e.stopPropagation(),12===this.month?(this.month=1,this.year++):this.month+=1,this._dispatchCalendarHeaderChangeEvent()}_dispatchCalendarHeaderChangeEvent(){const e=this.year,t=this.month;gi(this,"kuc:calendar-header-change",{value:`${e}-${t}`})}}qi([Ge({type:String,attribute:"lang",reflect:!0})],Ki.prototype,"language",void 0),qi([Ge({type:Number,hasChanged(e){return(t=e)>0&&t<13;var t}})],Ki.prototype,"month",void 0),qi([Ge({type:Number,hasChanged(e){return(t=e)>=0&&t<1e4;var t}})],Ki.prototype,"year",void 0),qi([qe(".kuc-base-datetime-calendar-header-1-17-1__month")],Ki.prototype,"_baseDateTimeHeaderMonthEl",void 0),qi([qe(".kuc-base-datetime-calendar-header-1-17-1__year")],Ki.prototype,"_baseDateTimeHeaderYearEl",void 0),qi([qe(".kuc-base-datetime-header-month-1-17-1__listbox")],Ki.prototype,"_listBoxMonthEl",void 0),qi([qe(".kuc-base-datetime-header-year-1-17-1__listbox")],Ki.prototype,"_listBoxYearEl",void 0),window.customElements.get("kuc-base-datetime-calendar-header-1-17-1")||(mi('\nkuc-base-datetime-calendar-header-1-17-1,\nkuc-base-datetime-calendar-header-1-17-1 *,\nkuc-base-datetime-calendar-header-1-17-1:lang(en),\nkuc-base-datetime-calendar-header-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-calendar-header-1-17-1:lang(ja),\nkuc-base-datetime-calendar-header-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n  font-weight: 700;\n}\nkuc-base-datetime-calendar-header-1-17-1:lang(zh),\nkuc-base-datetime-calendar-header-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-base-datetime-calendar-header-1-17-1:lang(zh-TW),\nkuc-base-datetime-calendar-header-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\nkuc-base-datetime-calendar-header-1-17-1:lang(ja) kuc-base-datetime-listbox-1-17-1 * {\n  font-weight: 400;\n}\n.kuc-base-datetime-calendar-header-1-17-1__group {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  border-bottom: 1px solid #e3e7e8;\n  padding: 0;\n  white-space: nowrap;\n  width: 266px;\n  height: 44px;\n}\n.kuc-base-datetime-calendar-header-1-17-1__group__button {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  outline: none;\n  width: 38px;\n  height: 32px;\n  margin: 0;\n  text-align: center;\n}\n.kuc-base-datetime-calendar-header-1-17-1__group__button:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n.kuc-base-datetime-calendar-header-1-17-1__group__button-icon {\n  vertical-align: middle;\n}\n.kuc-base-datetime-calendar-header-1-17-1__group__center {\n  width: 190px;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n}\n.kuc-base-datetime-calendar-header-1-17-1__month {\n  margin: 0 4px 0 4px;\n}\n'),window.customElements.define("kuc-base-datetime-calendar-header-1-17-1",Ki));var Yi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Ji extends bi{constructor(){super(),this.month=1,this.year=2021,this.language="en",this.value="",this._month=1,this._year=2021,this._locale=Xt("en"),this._handleClickDocument=this._handleClickDocument.bind(this),this._handleKeyDownDocument=this._handleKeyDownDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument),document.addEventListener("keydown",this._handleKeyDownDocument)}),1)}disconnectedCallback(){document.removeEventListener("click",this._handleClickDocument),document.removeEventListener("keydown",this._handleKeyDownDocument),super.disconnectedCallback()}update(e){if(e.forEach(((e,t)=>{"language"===t&&(this._locale=Xt(this.language))})),e.has("month")&&(this._month=this.month),e.has("year")&&(this._year=this.year),e.has("value")){const{month:e,year:t}=this._separateDateValue();this._month=parseInt(e,10),this._year=parseInt(t,10)}super.update(e)}render(){return we`
+      <table class="kuc-base-datetime-calendar-body-1-17-1__table" role="grid">
         ${this._getHeaderItemsTemplate()}<!--
         -->${this._getDateItemsTemplate()}
       </table>
-    `}updated(e){e.has("value")&&this._focusDateEl(),super.update(e)}_handleClickDocument(){gi(this,"kuc:calendar-body-blur",{})}_handleKeyDownDocument(e){"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),gi(this,"kuc:calendar-body-blur",{}))}_handleClickDate(e){e.preventDefault(),e.stopPropagation();const t=e.target;t.setAttribute("aria-selected","true");const i=t.getAttribute("data-date")||"";this._dispatchClickEvent(i)}_handleKeyDownDate(e){let t=!1;switch(e.key){case"Up":case"ArrowUp":t=!0,this._moveToDate(-7);break;case"Down":case"ArrowDown":t=!0,this._moveToDate(7);break;case"Left":case"ArrowLeft":t=!0,this._moveToDate(-1);break;case"Right":case"ArrowRight":t=!0,this._moveToDate(1);break;case" ":case"Enter":{t=!0;const e=this._getSelectedValue();this._dispatchClickEvent(e);break}}t&&(e.stopPropagation(),e.preventDefault())}_dispatchClickEvent(e){const t={oldValue:this.value,value:e};gi(this,"kuc:calendar-body-click-date",t),this.value=e}_isToday(e){const t=new Date;return parseInt(e[0],10)===t.getFullYear()&&parseInt(e[1],10)===t.getMonth()+1&&parseInt(e[2],10)===t.getDate()}_moveToDate(e){let t=this.value;const i=this._getSelectedValue(),{day:n}=this._separateDateValue(i);t=`${this._year}-${Zt(this._month)}-${n}`;const o=new Date(`${t||this._getValueItemFocused()}T00:00:00`);if(isNaN(o.getTime()))return;o.setDate(o.getDate()+e);const a=this._getDateString(o),s=t;this.value=a,gi(this,"kuc:calendar-body-change-date",{oldValue:s,value:a})}_separateDateValue(e=this.value){const t=e.split("-");return{day:t[2],month:t[1],year:t[0]}}_getSelectedValue(){return this._highlightItem?this._highlightItem.dataset.date||"":this._selectedItem&&this._selectedItem.getAttribute("data-date")||""}_getValueItemFocused(){return this._focusedItem&&this._focusedItem.getAttribute("data-date")||""}_getDateClass(e,t){return t?this._isToday(e)?" kuc-base-datetime-calendar-body-1-17-0__table__date--selected--today":"":this._isToday(e)?" kuc-base-datetime-calendar-body-1-17-0__table__date--selected--today":" kuc-base-datetime-calendar-body-1-17-0__table__date--other-month"}_getDateString(e=new Date){return`${e.getFullYear()}-${Zt(e.getMonth()+1)}-${Zt(e.getDate())}`}_isSameDayOfMoment(e){const t=parseInt(e[1],10),i=parseInt(e[2],10),n=parseInt(e[0],10);let o=(new Date).getDate();if(!this.value.split("-")[2])return!1;if(this.value&&(o=new Date(`${this.value}T00:00:00`).getDate()),o===i&&t===this._month)return!0;const a=new Date(n,this._month,0).getDate();return o>a&&a===i&&t===this._month}_getHeaderItemsTemplate(){return $e`
+    `}updated(e){e.has("value")&&this._focusDateEl(),super.update(e)}_handleClickDocument(){gi(this,"kuc:calendar-body-blur",{})}_handleKeyDownDocument(e){"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),gi(this,"kuc:calendar-body-blur",{}))}_handleClickDate(e){e.preventDefault(),e.stopPropagation();const t=e.target;t.setAttribute("aria-selected","true");const i=t.getAttribute("data-date")||"";this._dispatchClickEvent(i)}_handleKeyDownDate(e){let t=!1;switch(e.key){case"Up":case"ArrowUp":t=!0,this._moveToDate(-7);break;case"Down":case"ArrowDown":t=!0,this._moveToDate(7);break;case"Left":case"ArrowLeft":t=!0,this._moveToDate(-1);break;case"Right":case"ArrowRight":t=!0,this._moveToDate(1);break;case" ":case"Enter":{t=!0;const e=this._getSelectedValue();this._dispatchClickEvent(e);break}}t&&(e.stopPropagation(),e.preventDefault())}_dispatchClickEvent(e){const t={oldValue:this.value,value:e};gi(this,"kuc:calendar-body-click-date",t),this.value=e}_isToday(e){const t=new Date;return parseInt(e[0],10)===t.getFullYear()&&parseInt(e[1],10)===t.getMonth()+1&&parseInt(e[2],10)===t.getDate()}_moveToDate(e){let t=this.value;const i=this._getSelectedValue(),{day:n}=this._separateDateValue(i);t=`${this._year}-${Jt(this._month)}-${n}`;const o=new Date(`${t||this._getValueItemFocused()}T00:00:00`);if(isNaN(o.getTime()))return;o.setDate(o.getDate()+e);const a=this._getDateString(o),s=t;this.value=a,gi(this,"kuc:calendar-body-change-date",{oldValue:s,value:a})}_separateDateValue(e=this.value){const t=e.split("-");return{day:t[2],month:t[1],year:t[0]}}_getSelectedValue(){return this._highlightItem?this._highlightItem.dataset.date||"":this._selectedItem&&this._selectedItem.getAttribute("data-date")||""}_getValueItemFocused(){return this._focusedItem&&this._focusedItem.getAttribute("data-date")||""}_getDateClass(e,t){return t?this._isToday(e)?" kuc-base-datetime-calendar-body-1-17-1__table__date--selected--today":"":this._isToday(e)?" kuc-base-datetime-calendar-body-1-17-1__table__date--selected--today":" kuc-base-datetime-calendar-body-1-17-1__table__date--other-month"}_getDateString(e=new Date){return`${e.getFullYear()}-${Jt(e.getMonth()+1)}-${Jt(e.getDate())}`}_isSameDayOfMoment(e){const t=parseInt(e[1],10),i=parseInt(e[2],10),n=parseInt(e[0],10);let o=(new Date).getDate();if(!this.value.split("-")[2])return!1;if(this.value&&(o=new Date(`${this.value}T00:00:00`).getDate()),o===i&&t===this._month)return!0;const a=new Date(n,this._month,0).getDate();return o>a&&a===i&&t===this._month}_getHeaderItemsTemplate(){return we`
       <thead>
         <tr>
-          ${this._locale.WEEK_DAYS.map((e=>$e`
+          ${this._locale.WEEK_DAYS.map((e=>we`
               <th
-                class="kuc-base-datetime-calendar-body-1-17-0__table__header"
+                class="kuc-base-datetime-calendar-body-1-17-1__table__header"
                 role="columnheader"
                 abbr="${e.abbr}"
               >
@@ -476,14 +475,14 @@
             `))}
         </tr>
       </thead>
-    `}_getDateItemsTemplate(){const e=Ot(this._year,this._month-1),t=this._locale.MONTH_SELECT[this._month-1];return $e`
+    `}_getDateItemsTemplate(){const e=Bt(this._year,this._month-1),t=this._locale.MONTH_SELECT[this._month-1];return we`
       <tbody>
-        ${e.map((e=>$e`
+        ${e.map((e=>we`
             <tr>
-              ${e.map((e=>{const i=e.text.split("-"),n=this._isSameDayOfMoment(i),o=parseInt(i[1],10)===this._month,a=(this.value===e.attr||n)&&o;return $e`
+              ${e.map((e=>{const i=e.text.split("-"),n=this._isSameDayOfMoment(i),o=parseInt(i[1],10)===this._month,a=(this.value===e.attr||n)&&o;return we`
                   <td
                     role="gridcell"
-                    class="kuc-base-datetime-calendar-body-1-17-0__table__date${a?"--selected":""}${this._getDateClass(i,o)}"
+                    class="kuc-base-datetime-calendar-body-1-17-1__table__date${a?"--selected":""}${this._getDateClass(i,o)}"
                     aria-selected="${this.value===e.attr}"
                     tabindex="${a?"0":"-1"}"
                     aria-current="${!!this._isToday(i)&&"date"}"
@@ -498,66 +497,66 @@
             </tr>
           `))}
       </tbody>
-    `}_focusDateEl(){this._focusedItem&&this._focusedItem.focus({preventScroll:!0})}}Yi([Fe({type:Number})],Ji.prototype,"month",void 0),Yi([Fe({type:Number})],Ji.prototype,"year",void 0),Yi([Fe({type:String,attribute:"lang",reflect:!0})],Ji.prototype,"language",void 0),Yi([Fe({type:String,reflect:!0})],Ji.prototype,"value",void 0),Yi([We()],Ji.prototype,"_month",void 0),Yi([We()],Ji.prototype,"_year",void 0),Yi([Ke('.kuc-base-datetime-calendar-body-1-17-0__table__date--selected[aria-selected="true"]')],Ji.prototype,"_selectedItem",void 0),Yi([Ke(".kuc-base-datetime-calendar-body-1-17-0__table__date--selected")],Ji.prototype,"_highlightItem",void 0),Yi([Ke('.kuc-base-datetime-calendar-body-1-17-0__table__date--selected[tabindex="0"]')],Ji.prototype,"_focusedItem",void 0),window.customElements.get("kuc-base-datetime-calendar-body-1-17-0")||(mi('\nkuc-base-datetime-calendar-body-1-17-0,\nkuc-base-datetime-calendar-body-1-17-0 *,\nkuc-base-datetime-calendar-body-1-17-0:lang(en),\nkuc-base-datetime-calendar-body-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-calendar-body-1-17-0:lang(ja),\nkuc-base-datetime-calendar-body-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-base-datetime-calendar-body-1-17-0:lang(zh),\nkuc-base-datetime-calendar-body-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\n\nkuc-base-datetime-calendar-body-1-17-0:lang(zh-TW),\nkuc-base-datetime-calendar-body-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table,\n.kuc-base-datetime-calendar-body-1-17-0__table tr {\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date,\n.kuc-base-datetime-calendar-body-1-17-0__table__date--selected {\n  border-spacing: 1px;\n  padding: 0px;\n  border: 1px solid #ffffff;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__header {\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 10px;\n  font-weight: 400;\n  color: #333333;\n}\n:lang(ja) th.kuc-base-datetime-calendar-body-1-17-0__table__header {\n  font-weight: 700;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date--selected,\n.kuc-base-datetime-calendar-body-1-17-0__table__date,\n.kuc-base-datetime-calendar-body-1-17-0__table__header {\n  box-sizing: border-box;\n  padding: 8px 0;\n  width: 36px;\n  height: 31px;\n  border: 1px solid #ffffff;\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 10px;\n  font-weight: 400;\n  color: #333333;\n  cursor: pointer;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__header:nth-child(1),\n.kuc-base-datetime-calendar-body-1-17-0__table__header:nth-child(7) {\n  color: #d4d7d7;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date:focus,\n.kuc-base-datetime-calendar-body-1-17-0__table__date--selected:focus {\n  outline: none;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date\n  .kuc-base-datetime-calendar-body-1-17-0__table__date__button:hover {\n  color: #000000;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date--selected {\n  border-color: #3498db;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date--selected--today,\n.kuc-base-datetime-calendar-body-1-17-0__table__date--today {\n  color: #ffffff;\n  background: #888888;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date--today:hover {\n  color: #333333;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date--other-month,\n.kuc-base-datetime-calendar-body-1-17-0__table__date--other-month:hover {\n  color: #d4d7d7;\n}\n'),window.customElements.define("kuc-base-datetime-calendar-body-1-17-0",Ji));var Zi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Xi extends bi{constructor(){super(...arguments),this.language="en",this._locale=Qt("en")}update(e){e.has("language")&&(this._locale=Qt(this.language)),super.update(e)}_handleClickCalendarFooterButtonNone(e){e.stopPropagation(),gi(this,"kuc:calendar-footer-click-none")}_handleClickCalendarFooterButtonToday(e){e.stopPropagation(),gi(this,"kuc:calendar-footer-click-today")}_handleKeyDownCalendarFooterButtonNone(e){"Tab"===e.key&&(e.shiftKey||(e.preventDefault(),gi(this,"kuc:calendar-footer-tab-none")))}render(){return $e`
-      <div class="kuc-base-datetime-calendar-footer-1-17-0__group">
+    `}_focusDateEl(){this._focusedItem&&this._focusedItem.focus({preventScroll:!0})}}Yi([Ge({type:Number})],Ji.prototype,"month",void 0),Yi([Ge({type:Number})],Ji.prototype,"year",void 0),Yi([Ge({type:String,attribute:"lang",reflect:!0})],Ji.prototype,"language",void 0),Yi([Ge({type:String,reflect:!0})],Ji.prototype,"value",void 0),Yi([Fe()],Ji.prototype,"_month",void 0),Yi([Fe()],Ji.prototype,"_year",void 0),Yi([qe('.kuc-base-datetime-calendar-body-1-17-1__table__date--selected[aria-selected="true"]')],Ji.prototype,"_selectedItem",void 0),Yi([qe(".kuc-base-datetime-calendar-body-1-17-1__table__date--selected")],Ji.prototype,"_highlightItem",void 0),Yi([qe('.kuc-base-datetime-calendar-body-1-17-1__table__date--selected[tabindex="0"]')],Ji.prototype,"_focusedItem",void 0),window.customElements.get("kuc-base-datetime-calendar-body-1-17-1")||(mi('\nkuc-base-datetime-calendar-body-1-17-1,\nkuc-base-datetime-calendar-body-1-17-1 *,\nkuc-base-datetime-calendar-body-1-17-1:lang(en),\nkuc-base-datetime-calendar-body-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-calendar-body-1-17-1:lang(ja),\nkuc-base-datetime-calendar-body-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-base-datetime-calendar-body-1-17-1:lang(zh),\nkuc-base-datetime-calendar-body-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\n\nkuc-base-datetime-calendar-body-1-17-1:lang(zh-TW),\nkuc-base-datetime-calendar-body-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table,\n.kuc-base-datetime-calendar-body-1-17-1__table tr {\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date,\n.kuc-base-datetime-calendar-body-1-17-1__table__date--selected {\n  border-spacing: 1px;\n  padding: 0px;\n  border: 1px solid #ffffff;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__header {\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 10px;\n  font-weight: 400;\n  color: #333333;\n}\n:lang(ja) th.kuc-base-datetime-calendar-body-1-17-1__table__header {\n  font-weight: 700;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date--selected,\n.kuc-base-datetime-calendar-body-1-17-1__table__date,\n.kuc-base-datetime-calendar-body-1-17-1__table__header {\n  box-sizing: border-box;\n  padding: 8px 0;\n  width: 36px;\n  height: 31px;\n  border: 1px solid #ffffff;\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 10px;\n  font-weight: 400;\n  color: #333333;\n  cursor: pointer;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__header:nth-child(1),\n.kuc-base-datetime-calendar-body-1-17-1__table__header:nth-child(7) {\n  color: #d4d7d7;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date:focus,\n.kuc-base-datetime-calendar-body-1-17-1__table__date--selected:focus {\n  outline: none;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date\n  .kuc-base-datetime-calendar-body-1-17-1__table__date__button:hover {\n  color: #000000;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date--selected {\n  border-color: #3498db;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date--selected--today,\n.kuc-base-datetime-calendar-body-1-17-1__table__date--today {\n  color: #ffffff;\n  background: #888888;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date--today:hover {\n  color: #333333;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date--other-month,\n.kuc-base-datetime-calendar-body-1-17-1__table__date--other-month:hover {\n  color: #d4d7d7;\n}\n'),window.customElements.define("kuc-base-datetime-calendar-body-1-17-1",Ji));var Zi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Xi extends bi{constructor(){super(...arguments),this.language="en",this._locale=Xt("en")}update(e){e.has("language")&&(this._locale=Xt(this.language)),super.update(e)}_handleClickCalendarFooterButtonNone(e){e.stopPropagation(),gi(this,"kuc:calendar-footer-click-none")}_handleClickCalendarFooterButtonToday(e){e.stopPropagation(),gi(this,"kuc:calendar-footer-click-today")}_handleKeyDownCalendarFooterButtonNone(e){"Tab"===e.key&&(e.shiftKey||(e.preventDefault(),gi(this,"kuc:calendar-footer-tab-none")))}render(){return we`
+      <div class="kuc-base-datetime-calendar-footer-1-17-1__group">
         <button
           type="button"
           tabindex="0"
-          class="kuc-base-datetime-calendar-footer-1-17-0__group__button kuc-base-datetime-calendar-footer-1-17-0__group__button--today"
+          class="kuc-base-datetime-calendar-footer-1-17-1__group__button kuc-base-datetime-calendar-footer-1-17-1__group__button--today"
           @click="${this._handleClickCalendarFooterButtonToday}"
         >
           ${this._locale.CALENDAR_FOOTER_TEXT.today}
         </button>
-        <span class="kuc-base-datetime-calendar-footer-1-17-0__group__center"></span>
+        <span class="kuc-base-datetime-calendar-footer-1-17-1__group__center"></span>
         <button
           type="button"
           tabindex="0"
-          class="kuc-base-datetime-calendar-footer-1-17-0__group__button kuc-base-datetime-calendar-footer-1-17-0__group__button--none"
+          class="kuc-base-datetime-calendar-footer-1-17-1__group__button kuc-base-datetime-calendar-footer-1-17-1__group__button--none"
           @click="${this._handleClickCalendarFooterButtonNone}"
           @keydown="${this._handleKeyDownCalendarFooterButtonNone}"
         >
           ${this._locale.CALENDAR_FOOTER_TEXT.none}
         </button>
       </div>
-    `}}Zi([Fe({type:String,attribute:"lang",reflect:!0})],Xi.prototype,"language",void 0),Zi([We()],Xi.prototype,"_locale",void 0),window.customElements.get("kuc-base-datetime-calendar-footer-1-17-0")||(mi('\nkuc-base-datetime-calendar-footer-1-17-0,\nkuc-base-datetime-calendar-footer-1-17-0 *,\nkuc-base-datetime-calendar-footer-1-17-0:lang(en),\nkuc-base-datetime-calendar-footer-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-calendar-footer-1-17-0:lang(ja),\nkuc-base-datetime-calendar-footer-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-base-datetime-calendar-footer-1-17-0:lang(zh),\nkuc-base-datetime-calendar-footer-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-base-datetime-calendar-footer-1-17-0:lang(zh-TW),\nkuc-base-datetime-calendar-footer-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\n.kuc-base-datetime-calendar-footer-1-17-0__group {\n  display: flex;\n  align-items: flex-end;\n  box-sizing: border-box;\n  padding: 0;\n  height: 27px;\n  white-space: nowrap;\n  width: 272px;\n}\n.kuc-base-datetime-calendar-footer-1-17-0__group__button {\n  background: transparent;\n  border: 1px solid transparent;\n  color: #3498db;\n  cursor: pointer;\n  font-size: 13px;\n  outline: none;\n}\n.kuc-base-datetime-calendar-footer-1-17-0__group__button:hover {\n  color: #217dbb;\n}\n.kuc-base-datetime-calendar-footer-1-17-0__group__button:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n.kuc-base-datetime-calendar-footer-1-17-0__group__center {\n  width: 100%;\n}\n'),window.customElements.define("kuc-base-datetime-calendar-footer-1-17-0",Xi));var Qi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class en extends bi{constructor(){super(...arguments),this.language="en",this.value="",this._month=1,this._year=(new Date).getFullYear()}update(e){e.has("value")&&this._updateValue(),super.update(e)}render(){return $e`
+    `}}Zi([Ge({type:String,attribute:"lang",reflect:!0})],Xi.prototype,"language",void 0),Zi([Fe()],Xi.prototype,"_locale",void 0),window.customElements.get("kuc-base-datetime-calendar-footer-1-17-1")||(mi('\nkuc-base-datetime-calendar-footer-1-17-1,\nkuc-base-datetime-calendar-footer-1-17-1 *,\nkuc-base-datetime-calendar-footer-1-17-1:lang(en),\nkuc-base-datetime-calendar-footer-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-calendar-footer-1-17-1:lang(ja),\nkuc-base-datetime-calendar-footer-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-base-datetime-calendar-footer-1-17-1:lang(zh),\nkuc-base-datetime-calendar-footer-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-base-datetime-calendar-footer-1-17-1:lang(zh-TW),\nkuc-base-datetime-calendar-footer-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\n.kuc-base-datetime-calendar-footer-1-17-1__group {\n  display: flex;\n  align-items: flex-end;\n  box-sizing: border-box;\n  padding: 0;\n  height: 27px;\n  white-space: nowrap;\n  width: 272px;\n}\n.kuc-base-datetime-calendar-footer-1-17-1__group__button {\n  background: transparent;\n  border: 1px solid transparent;\n  color: #3498db;\n  cursor: pointer;\n  font-size: 13px;\n  outline: none;\n}\n.kuc-base-datetime-calendar-footer-1-17-1__group__button:hover {\n  color: #217dbb;\n}\n.kuc-base-datetime-calendar-footer-1-17-1__group__button:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n.kuc-base-datetime-calendar-footer-1-17-1__group__center {\n  width: 100%;\n}\n'),window.customElements.define("kuc-base-datetime-calendar-footer-1-17-1",Xi));var Qi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class en extends bi{constructor(){super(...arguments),this.language="en",this.value="",this._month=1,this._year=(new Date).getFullYear()}update(e){e.has("value")&&this._updateValue(),super.update(e)}render(){return we`
       <div
-        class="kuc-base-datetime-calendar-1-17-0__group"
+        class="kuc-base-datetime-calendar-1-17-1__group"
         role="dialog"
         aria-modal="true"
         aria-label="Calender"
         @click="${this._handleClickCalendarGroup}"
         @keydown="${this._handleKeyDownCalendarGroup}"
       >
-        <kuc-base-datetime-calendar-header-1-17-0
+        <kuc-base-datetime-calendar-header-1-17-1
           .year="${this._year}"
           .month="${this._month}"
           .language="${this.language}"
           @kuc:calendar-header-change="${this._handleCalendarHeaderChange}"
-        ></kuc-base-datetime-calendar-header-1-17-0>
-        <kuc-base-datetime-calendar-body-1-17-0
+        ></kuc-base-datetime-calendar-header-1-17-1>
+        <kuc-base-datetime-calendar-body-1-17-1
           .year="${this._year}"
           .month="${this._month}"
           .value="${this.value}"
           .language="${this.language}"
           @kuc:calendar-body-change-date="${this._handleCalendarBodyChangeDate}"
-        ></kuc-base-datetime-calendar-body-1-17-0>
-        <kuc-base-datetime-calendar-footer-1-17-0
+        ></kuc-base-datetime-calendar-body-1-17-1>
+        <kuc-base-datetime-calendar-footer-1-17-1
           .language="${this.language}"
-        ></kuc-base-datetime-calendar-footer-1-17-0>
+        ></kuc-base-datetime-calendar-footer-1-17-1>
       </div>
-    `}async updated(e){await this.updateComplete,this._calculateBodyCalendarPosition(),super.updated(e)}_handleKeyDownCalendarGroup(e){"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),gi(this,"kuc:calendar-escape",{}))}_handleClickCalendarGroup(e){e.stopPropagation(),this._listBoxMonthEl&&this._monthEl.closeListBox(),this._listBoxYearEl&&this._yearEl.closeListBox()}_calculateBodyCalendarPosition(){const{inputToBottom:e,inputToTop:t,inputToRight:i,inputToLeft:n}=ni(this);e>=this._baseCalendarGroupEl.getBoundingClientRect().height||t<0||e>t?this._calculateCalendarPosition(i,n,"bottom"):this._calculateCalendarPosition(i,n,"top")}_calculateCalendarPosition(e,t,i){if(!this.parentElement)return;const n=this.parentElement.getElementsByClassName("kuc-base-date-1-17-0__input")[0],o=n.getBoundingClientRect().height,a=n.getBoundingClientRect().width;if(e<336&&e<t){const e=this.parentElement.getBoundingClientRect().width,t="bottom"===i?o:"auto",n="bottom"===i?"auto":o,s=e>a?e-a:0;return void this._setCalendarPosition({top:t,bottom:n,right:s})}const s="bottom"===i?o:"auto",r="bottom"===i?"auto":o;this._setCalendarPosition({bottom:r,top:s,left:0})}_setCalendarPosition({top:e="auto",left:t="auto",right:i="auto",bottom:n="auto"}){const o=this._baseCalendarGroupEl.parentElement;this.parentElement&&o&&(this.parentElement.style.position="relative",o.style.bottom="auto"===n?n:n+"px",o.style.top="auto"===e?e:e+"px",o.style.left="auto"===t?t:t+"px",o.style.right="auto"===i?i:i+"px")}_handleCalendarHeaderChange(e){const{year:t,month:i}=this._separateValue(e.detail.value);this._year=t,this._month=i}_handleCalendarBodyChangeDate(e){const{year:t,month:i}=this._separateValue(e.detail.value);this._year=t,this._month=i}_updateValue(){""===this.value&&(this.value=Yt().slice(0,7)+"-01");const{year:e,month:t}=this._separateValue(this.value);this._year=e,this._month=t}_separateValue(e){const t=e.split("-");return{year:parseInt(t[0],10),month:parseInt(t[1],10)}}}Qi([Fe({type:String,attribute:"lang",reflect:!0})],en.prototype,"language",void 0),Qi([Fe({type:String,reflect:!0})],en.prototype,"value",void 0),Qi([Ke(".kuc-base-datetime-calendar-1-17-0__group")],en.prototype,"_baseCalendarGroupEl",void 0),Qi([Ke(".kuc-base-datetime-calendar-header-1-17-0__month")],en.prototype,"_monthEl",void 0),Qi([Ke(".kuc-base-datetime-calendar-header-1-17-0__year")],en.prototype,"_yearEl",void 0),Qi([Ke(".kuc-base-datetime-header-month-1-17-0__listbox")],en.prototype,"_listBoxMonthEl",void 0),Qi([Ke(".kuc-base-datetime-header-year-1-17-0__listbox")],en.prototype,"_listBoxYearEl",void 0),Qi([We()],en.prototype,"_month",void 0),Qi([We()],en.prototype,"_year",void 0),window.customElements.get("kuc-base-datetime-calendar-1-17-0")||(mi("\n.kuc-base-datetime-calendar-1-17-0__group {\n  display: inline-block;\n  box-sizing: border-box;\n  width: 336px;\n  padding: 32px 32px 24px;\n  background: #ffffff;\n  box-shadow: 0 0 8px 2px rgb(0 0 0 / 10%);\n  text-align: center;\n  font-size: 13px;\n}\n"),window.customElements.define("kuc-base-datetime-calendar-1-17-0",en));var tn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class nn extends bi{constructor(){super(),this.value="",this.items=[],this.maxHeight=300,this.doFocus=!0,this._actionKeyboard=!1,this._firstHighlight=!0,this._handleClickDocument=this._handleClickDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument)}),1)}disconnectedCallback(){document.removeEventListener("click",this._handleClickDocument),super.disconnectedCallback()}getHighlightItemEl(){return this._highlightItemEl}render(){return $e`
+    `}async updated(e){await this.updateComplete,this._calculateBodyCalendarPosition(),super.updated(e)}_handleKeyDownCalendarGroup(e){"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),gi(this,"kuc:calendar-escape",{}))}_handleClickCalendarGroup(e){e.stopPropagation(),this._listBoxMonthEl&&this._monthEl.closeListBox(),this._listBoxYearEl&&this._yearEl.closeListBox()}_calculateBodyCalendarPosition(){const{inputToBottom:e,inputToTop:t,inputToRight:i,inputToLeft:n}=ii(this);e>=this._baseCalendarGroupEl.getBoundingClientRect().height||t<0||e>t?this._calculateCalendarPosition(i,n,"bottom"):this._calculateCalendarPosition(i,n,"top")}_calculateCalendarPosition(e,t,i){if(!this.parentElement)return;const n=this.parentElement.getElementsByClassName("kuc-base-date-1-17-1__input")[0],o=n.getBoundingClientRect().height,a=n.getBoundingClientRect().width;if(e<336&&e<t){const e=this.parentElement.getBoundingClientRect().width,t="bottom"===i?o:"auto",n="bottom"===i?"auto":o,s=e>a?e-a:0;return void this._setCalendarPosition({top:t,bottom:n,right:s})}const s="bottom"===i?o:"auto",r="bottom"===i?"auto":o;this._setCalendarPosition({bottom:r,top:s,left:0})}_setCalendarPosition({top:e="auto",left:t="auto",right:i="auto",bottom:n="auto"}){const o=this._baseCalendarGroupEl.parentElement;this.parentElement&&o&&(this.parentElement.style.position="relative",o.style.bottom="auto"===n?n:n+"px",o.style.top="auto"===e?e:e+"px",o.style.left="auto"===t?t:t+"px",o.style.right="auto"===i?i:i+"px")}_handleCalendarHeaderChange(e){const{year:t,month:i}=this._separateValue(e.detail.value);this._year=t,this._month=i}_handleCalendarBodyChangeDate(e){const{year:t,month:i}=this._separateValue(e.detail.value);this._year=t,this._month=i}_updateValue(){""===this.value&&(this.value=Kt().slice(0,7)+"-01");const{year:e,month:t}=this._separateValue(this.value);this._year=e,this._month=t}_separateValue(e){const t=e.split("-");return{year:parseInt(t[0],10),month:parseInt(t[1],10)}}}Qi([Ge({type:String,attribute:"lang",reflect:!0})],en.prototype,"language",void 0),Qi([Ge({type:String,reflect:!0})],en.prototype,"value",void 0),Qi([qe(".kuc-base-datetime-calendar-1-17-1__group")],en.prototype,"_baseCalendarGroupEl",void 0),Qi([qe(".kuc-base-datetime-calendar-header-1-17-1__month")],en.prototype,"_monthEl",void 0),Qi([qe(".kuc-base-datetime-calendar-header-1-17-1__year")],en.prototype,"_yearEl",void 0),Qi([qe(".kuc-base-datetime-header-month-1-17-1__listbox")],en.prototype,"_listBoxMonthEl",void 0),Qi([qe(".kuc-base-datetime-header-year-1-17-1__listbox")],en.prototype,"_listBoxYearEl",void 0),Qi([Fe()],en.prototype,"_month",void 0),Qi([Fe()],en.prototype,"_year",void 0),window.customElements.get("kuc-base-datetime-calendar-1-17-1")||(mi("\n.kuc-base-datetime-calendar-1-17-1__group {\n  display: inline-block;\n  box-sizing: border-box;\n  width: 336px;\n  padding: 32px 32px 24px;\n  background: #ffffff;\n  box-shadow: 0 0 8px 2px rgb(0 0 0 / 10%);\n  text-align: center;\n  font-size: 13px;\n}\n"),window.customElements.define("kuc-base-datetime-calendar-1-17-1",en));var tn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class nn extends bi{constructor(){super(),this.value="",this.items=[],this.maxHeight=300,this.doFocus=!0,this._actionKeyboard=!1,this._firstHighlight=!0,this._handleClickDocument=this._handleClickDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument)}),1)}disconnectedCallback(){document.removeEventListener("click",this._handleClickDocument),super.disconnectedCallback()}getHighlightItemEl(){return this._highlightItemEl}render(){return we`
       <ul
         style="max-height: ${this.maxHeight}px;"
-        class="kuc-base-datetime-listbox-1-17-0__listbox"
+        class="kuc-base-datetime-listbox-1-17-1__listbox"
         role="listbox"
         @mousedown="${this._handleMouseDownListBox}"
         @click="${this._handleClickListBox}"
       >
         ${this.items.map((e=>this._getListBoxItemTemplate(e)))}
       </ul>
-    `}async updated(e){await this.updateComplete,e.has("value")&&this._highlightSelectedItem(),this._setListBoxPosition(),this._scrollToView(),super.updated(e)}_handleClickDocument(){gi(this,"kuc:listbox-blur",{})}_handleClickListBox(e){e.stopPropagation()}_handleKeyDownListBox(e){switch(e.preventDefault(),e.stopPropagation(),e.key){case"Up":case"ArrowUp":this._actionKeyboard=!0,this._highlightPrevItemEl(),this._focusHighlightItemEl(),this._scrollToView();break;case"Down":case"ArrowDown":this._actionKeyboard=!0,this._highlightNextItemEl(),this._focusHighlightItemEl(),this._scrollToView();break;case"Home":this._actionKeyboard=!0,this._highlightFirstItem(),this._focusHighlightItemEl();break;case"End":this._actionKeyboard=!0,this._highlightLastItem(),this._focusHighlightItemEl();break;case"Tab":gi(this,"kuc:listbox-click",{});break;case"Escape":gi(this,"kuc:listbox-escape",{});break;case" ":case"Enter":{const e=this._highlightItemEl.getAttribute("value");gi(this,"kuc:listbox-click",{value:e||""});break}}}_handleMouseDownListBox(e){if(e.preventDefault(),e.stopPropagation(),e.target===e.currentTarget)return;const t=e.target.getAttribute("value")||"";gi(this,"kuc:listbox-click",{value:t})}_handleMouseOverItem(e){if(this._actionKeyboard)return void(this._actionKeyboard=!1);const t=e.target;this._setHighlightItemEl(t),this.doFocus&&this._focusHighlightItemEl(!1)}_setListBoxPosition(){const e=this._listBoxEl.getBoundingClientRect().height;if(!this._listBoxEl.parentElement||!this.parentElement)return;const t=window.innerHeight-this.parentElement.getBoundingClientRect().bottom,i=this.parentElement.offsetHeight;this._listBoxEl.style.bottom="auto",this._listBoxEl.style.left="auto",t>=e||(this.parentElement.style.position="relative",this._listBoxEl.style.bottom=i+"px",this._listBoxEl.style.left="0px")}_setHighlightItemEl(e){this._removeHighlight(),e.classList.add("kuc-base-datetime-listbox-1-17-0__listbox--highlight"),e.setAttribute("tabindex","0")}_highlightSelectedItem(){if(!this.doFocus)return;const e=Array.from(this._itemsEl).filter((e=>"true"===e.getAttribute("aria-selected")))[0];e&&(this._itemSelectedEl=e,this._setHighlightItemEl(e),this._focusHighlightItemEl())}_highlightFirstItem(){this._itemSelectedEl=this._firstItemEl,this._setHighlightItemEl(this._firstItemEl)}_highlightLastItem(){this._itemSelectedEl=this._lastItemEl,this._setHighlightItemEl(this._lastItemEl)}_highlightNextItemEl(){if(null===this._highlightItemEl||null===this._iconChecked)return void this._highlightFirstItem();const e=this._getNextItemEl();if(e)return this._setHighlightItemEl(e),this._firstHighlight=!1,void(this._itemSelectedEl=e);this._highlightFirstItem()}_getNextItemEl(){const e=this._iconChecked.parentElement;!this._itemSelectedEl&&e&&this._firstHighlight&&(this._itemSelectedEl=e);let t=this._highlightItemEl.nextElementSibling;return this._itemSelectedEl?this._itemSelectedEl.nextElementSibling?(t=this._itemSelectedEl.nextElementSibling,t):this._firstItemEl:t}_highlightPrevItemEl(){if(null===this._highlightItemEl||null===this._iconChecked)return void this._highlightLastItem();const e=this._getPreviousItemEl();if(e)return this._setHighlightItemEl(e),this._firstHighlight=!1,void(this._itemSelectedEl=e);this._highlightLastItem()}_getPreviousItemEl(){const e=this._iconChecked.parentElement;!this._itemSelectedEl&&e&&this._firstHighlight&&(this._itemSelectedEl=e);let t=this._highlightItemEl.previousElementSibling;return this._itemSelectedEl?this._itemSelectedEl.previousElementSibling?(t=this._itemSelectedEl.previousElementSibling,t):this._lastItemEl:t}_removeHighlight(){this._highlightItemEl&&(this._highlightItemEl.setAttribute("tabindex","-1"),this._highlightItemEl.classList.remove("kuc-base-datetime-listbox-1-17-0__listbox--highlight"))}_focusHighlightItemEl(e){const t=this._highlightItemEl;t&&(t.focus({preventScroll:!0}),!1!==e&&this._dispatchListBoxFocusChange())}_dispatchListBoxFocusChange(){const e=this._highlightItemEl.getAttribute("value")||"";gi(this,"kuc:listbox-focus-change",{value:e})}_scrollToView(){const e=this._highlightItemEl||this._getHighlightItemByValue();if(!e||!this._listBoxEl)return;const t=e.offsetHeight,i=this._listBoxEl.clientHeight/t/2;let n=e.offsetTop-i*t;n<0&&(n=0),this._listBoxEl.scrollTop=n}_getHighlightItemByValue(){const e=Array.from(this._listBoxEl.children),t=new Date(Date.parse(`2021/01/01 ${this.value}`));let i=e.find((e=>new Date(Date.parse(`2021/01/01 ${e.title}`))>=t));return i||(i=e[e.length-1]),this.doFocus&&i?(this._setHighlightItemEl(i),this._focusHighlightItemEl(),i):i}_getListBoxItemTemplate(e){const t=this.value===e.value&&this.doFocus;return $e`
+    `}async updated(e){await this.updateComplete,e.has("value")&&this._highlightSelectedItem(),this._setListBoxPosition(),this._scrollToView(),super.updated(e)}_handleClickDocument(){gi(this,"kuc:listbox-blur",{})}_handleClickListBox(e){e.stopPropagation()}_handleKeyDownListBox(e){switch(e.preventDefault(),e.stopPropagation(),e.key){case"Up":case"ArrowUp":this._actionKeyboard=!0,this._highlightPrevItemEl(),this._focusHighlightItemEl(),this._scrollToView();break;case"Down":case"ArrowDown":this._actionKeyboard=!0,this._highlightNextItemEl(),this._focusHighlightItemEl(),this._scrollToView();break;case"Home":this._actionKeyboard=!0,this._highlightFirstItem(),this._focusHighlightItemEl();break;case"End":this._actionKeyboard=!0,this._highlightLastItem(),this._focusHighlightItemEl();break;case"Tab":gi(this,"kuc:listbox-click",{});break;case"Escape":gi(this,"kuc:listbox-escape",{});break;case" ":case"Enter":{const e=this._highlightItemEl.getAttribute("value");gi(this,"kuc:listbox-click",{value:e||""});break}}}_handleMouseDownListBox(e){if(e.preventDefault(),e.stopPropagation(),e.target===e.currentTarget)return;const t=e.target.getAttribute("value")||"";gi(this,"kuc:listbox-click",{value:t})}_handleMouseOverItem(e){if(this._actionKeyboard)return void(this._actionKeyboard=!1);const t=e.target;this._setHighlightItemEl(t),this.doFocus&&this._focusHighlightItemEl(!1)}_setListBoxPosition(){const e=this._listBoxEl.getBoundingClientRect().height;if(!this._listBoxEl.parentElement||!this.parentElement)return;const t=window.innerHeight-this.parentElement.getBoundingClientRect().bottom,i=this.parentElement.offsetHeight;this._listBoxEl.style.bottom="auto",this._listBoxEl.style.left="auto",t>=e||(this.parentElement.style.position="relative",this._listBoxEl.style.bottom=i+"px",this._listBoxEl.style.left="0px")}_setHighlightItemEl(e){this._removeHighlight(),e.classList.add("kuc-base-datetime-listbox-1-17-1__listbox--highlight"),e.setAttribute("tabindex","0")}_highlightSelectedItem(){if(!this.doFocus)return;const e=Array.from(this._itemsEl).filter((e=>"true"===e.getAttribute("aria-selected")))[0];e&&(this._itemSelectedEl=e,this._setHighlightItemEl(e),this._focusHighlightItemEl())}_highlightFirstItem(){this._itemSelectedEl=this._firstItemEl,this._setHighlightItemEl(this._firstItemEl)}_highlightLastItem(){this._itemSelectedEl=this._lastItemEl,this._setHighlightItemEl(this._lastItemEl)}_highlightNextItemEl(){if(null===this._highlightItemEl||null===this._iconChecked)return void this._highlightFirstItem();const e=this._getNextItemEl();if(e)return this._setHighlightItemEl(e),this._firstHighlight=!1,void(this._itemSelectedEl=e);this._highlightFirstItem()}_getNextItemEl(){const e=this._iconChecked.parentElement;!this._itemSelectedEl&&e&&this._firstHighlight&&(this._itemSelectedEl=e);let t=this._highlightItemEl.nextElementSibling;return this._itemSelectedEl?this._itemSelectedEl.nextElementSibling?(t=this._itemSelectedEl.nextElementSibling,t):this._firstItemEl:t}_highlightPrevItemEl(){if(null===this._highlightItemEl||null===this._iconChecked)return void this._highlightLastItem();const e=this._getPreviousItemEl();if(e)return this._setHighlightItemEl(e),this._firstHighlight=!1,void(this._itemSelectedEl=e);this._highlightLastItem()}_getPreviousItemEl(){const e=this._iconChecked.parentElement;!this._itemSelectedEl&&e&&this._firstHighlight&&(this._itemSelectedEl=e);let t=this._highlightItemEl.previousElementSibling;return this._itemSelectedEl?this._itemSelectedEl.previousElementSibling?(t=this._itemSelectedEl.previousElementSibling,t):this._lastItemEl:t}_removeHighlight(){this._highlightItemEl&&(this._highlightItemEl.setAttribute("tabindex","-1"),this._highlightItemEl.classList.remove("kuc-base-datetime-listbox-1-17-1__listbox--highlight"))}_focusHighlightItemEl(e){const t=this._highlightItemEl;t&&(t.focus({preventScroll:!0}),!1!==e&&this._dispatchListBoxFocusChange())}_dispatchListBoxFocusChange(){const e=this._highlightItemEl.getAttribute("value")||"";gi(this,"kuc:listbox-focus-change",{value:e})}_scrollToView(){const e=this._highlightItemEl||this._getHighlightItemByValue();if(!e||!this._listBoxEl)return;const t=e.offsetHeight,i=this._listBoxEl.clientHeight/t/2;let n=e.offsetTop-i*t;n<0&&(n=0),this._listBoxEl.scrollTop=n}_getHighlightItemByValue(){const e=Array.from(this._listBoxEl.children),t=new Date(Date.parse(`2021/01/01 ${this.value}`));let i=e.find((e=>new Date(Date.parse(`2021/01/01 ${e.title}`))>=t));return i||(i=e[e.length-1]),this.doFocus&&i?(this._setHighlightItemEl(i),this._focusHighlightItemEl(),i):i}_getListBoxItemTemplate(e){const t=this.value===e.value&&this.doFocus;return we`
       <li
-        class="kuc-base-datetime-listbox-1-17-0__listbox__item"
+        class="kuc-base-datetime-listbox-1-17-1__listbox__item"
         role="option"
         tabindex="${t?"0":"-1"}"
         aria-selected="${t}"
@@ -569,8 +568,8 @@
         ${t?this._getCheckedIconSvgTemplate():""}
         ${void 0===e.label?e.value:e.label}
       </li>
-    `}_getCheckedIconSvgTemplate(){return Ce`<svg
-          class="kuc-base-datetime-listbox-1-17-0__listbox__item__icon"
+    `}_getCheckedIconSvgTemplate(){return $e`<svg
+          class="kuc-base-datetime-listbox-1-17-1__listbox__item__icon"
           width="11"
           height="9"
           viewBox="0 0 11 9"
@@ -583,9 +582,9 @@
             d="M0 5L1.5 3L4.5 5.5L9.5 0L11 1.5L4.5 8.5L0 5Z"
             fill="#3498db"
           />
-        </svg>`}}tn([Fe({type:String})],nn.prototype,"value",void 0),tn([Fe({type:Array})],nn.prototype,"items",void 0),tn([Fe({type:Number})],nn.prototype,"maxHeight",void 0),tn([Fe({type:Boolean})],nn.prototype,"doFocus",void 0),tn([Ke(".kuc-base-datetime-listbox-1-17-0__listbox")],nn.prototype,"_listBoxEl",void 0),tn([Je(".kuc-base-datetime-listbox-1-17-0__listbox__item")],nn.prototype,"_itemsEl",void 0),tn([Ke(".kuc-base-datetime-listbox-1-17-0__listbox__item")],nn.prototype,"_firstItemEl",void 0),tn([Ke(".kuc-base-datetime-listbox-1-17-0__listbox__item:last-child")],nn.prototype,"_lastItemEl",void 0),tn([Ke(".kuc-base-datetime-listbox-1-17-0__listbox--highlight")],nn.prototype,"_highlightItemEl",void 0),tn([Ke(".kuc-base-datetime-listbox-1-17-0__listbox__item__icon")],nn.prototype,"_iconChecked",void 0),tn([We()],nn.prototype,"_actionKeyboard",void 0),tn([We()],nn.prototype,"_firstHighlight",void 0),window.customElements.get("kuc-base-datetime-listbox-1-17-0")||(mi('\nkuc-base-datetime-listbox-1-17-0,\nkuc-base-datetime-listbox-1-17-0 *,\nkuc-base-datetime-listbox-1-17-0:lang(en),\nkuc-base-datetime-listbox-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-listbox-1-17-0:lang(ja),\nkuc-base-datetime-listbox-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-base-datetime-listbox-1-17-0:lang(zh),\nkuc-base-datetime-listbox-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-base-datetime-listbox-1-17-0:lang(zh-TW),\nkuc-base-datetime-listbox-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\n.kuc-base-datetime-listbox-1-17-0__listbox {\n  position: absolute;\n  z-index: 2000;\n  min-width: 280px;\n  margin: 0;\n  padding: 8px 0;\n  border: 1px solid #e3e7e8;\n  background-color: #ffffff;\n  list-style: none;\n  line-height: 1;\n  overflow-y: auto;\n  -webkit-tap-highlight-color: transparent;\n  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);\n}\n.kuc-base-datetime-listbox-1-17-0__listbox__item {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px 16px 8px 25px;\n  color: #333333;\n  cursor: pointer;\n  -webkit-tap-highlight-color: initial;\n  text-align: left;\n  font-size: 14px;\n  user-select: none;\n}\n.kuc-base-datetime-listbox-1-17-0__listbox__item[aria-selected="true"] {\n  color: #3498db;\n}\n.kuc-base-datetime-listbox-1-17-0__listbox--highlight {\n  background-color: #e2f2fe;\n  cursor: pointer;\n}\n.kuc-base-datetime-listbox-1-17-0__listbox__item__icon {\n  position: absolute;\n  left: 8px;\n  top: 10px;\n  background-color: transparent;\n}\n.kuc-base-datetime-listbox-1-17-0__listbox__item:focus {\n  outline: none;\n}\n'),window.customElements.define("kuc-base-datetime-listbox-1-17-0",nn));var on=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class an extends bi{constructor(){super(...arguments),this.inputAriaLabel="",this.inputId="",this.language="en",this.value="",this.disabled=!1,this.inputAriaInvalid=!1,this.required=!1,this._dateTimeCalendarVisible=!1,this._locale=Qt("en"),this._calendarValue="",this._inputValue="",this._valueForReset=""}update(e){e.has("inputId")&&(this._GUID=this.inputId),e.has("language")&&(this._locale=Qt(this.language),this._updateValueProp()),e.has("value")&&this._updateValueProp(),super.update(e)}render(){return $e`
+        </svg>`}}tn([Ge({type:String})],nn.prototype,"value",void 0),tn([Ge({type:Array})],nn.prototype,"items",void 0),tn([Ge({type:Number})],nn.prototype,"maxHeight",void 0),tn([Ge({type:Boolean})],nn.prototype,"doFocus",void 0),tn([qe(".kuc-base-datetime-listbox-1-17-1__listbox")],nn.prototype,"_listBoxEl",void 0),tn([Ye(".kuc-base-datetime-listbox-1-17-1__listbox__item")],nn.prototype,"_itemsEl",void 0),tn([qe(".kuc-base-datetime-listbox-1-17-1__listbox__item")],nn.prototype,"_firstItemEl",void 0),tn([qe(".kuc-base-datetime-listbox-1-17-1__listbox__item:last-child")],nn.prototype,"_lastItemEl",void 0),tn([qe(".kuc-base-datetime-listbox-1-17-1__listbox--highlight")],nn.prototype,"_highlightItemEl",void 0),tn([qe(".kuc-base-datetime-listbox-1-17-1__listbox__item__icon")],nn.prototype,"_iconChecked",void 0),tn([Fe()],nn.prototype,"_actionKeyboard",void 0),tn([Fe()],nn.prototype,"_firstHighlight",void 0),window.customElements.get("kuc-base-datetime-listbox-1-17-1")||(mi('\nkuc-base-datetime-listbox-1-17-1,\nkuc-base-datetime-listbox-1-17-1 *,\nkuc-base-datetime-listbox-1-17-1:lang(en),\nkuc-base-datetime-listbox-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-listbox-1-17-1:lang(ja),\nkuc-base-datetime-listbox-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-base-datetime-listbox-1-17-1:lang(zh),\nkuc-base-datetime-listbox-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-base-datetime-listbox-1-17-1:lang(zh-TW),\nkuc-base-datetime-listbox-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\n.kuc-base-datetime-listbox-1-17-1__listbox {\n  position: absolute;\n  z-index: 2000;\n  min-width: 280px;\n  margin: 0;\n  padding: 8px 0;\n  border: 1px solid #e3e7e8;\n  background-color: #ffffff;\n  list-style: none;\n  line-height: 1;\n  overflow-y: auto;\n  -webkit-tap-highlight-color: transparent;\n  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);\n}\n.kuc-base-datetime-listbox-1-17-1__listbox__item {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px 16px 8px 25px;\n  color: #333333;\n  cursor: pointer;\n  -webkit-tap-highlight-color: initial;\n  text-align: left;\n  font-size: 14px;\n  user-select: none;\n}\n.kuc-base-datetime-listbox-1-17-1__listbox__item[aria-selected="true"] {\n  color: #3498db;\n}\n.kuc-base-datetime-listbox-1-17-1__listbox--highlight {\n  background-color: #e2f2fe;\n  cursor: pointer;\n}\n.kuc-base-datetime-listbox-1-17-1__listbox__item__icon {\n  position: absolute;\n  left: 8px;\n  top: 10px;\n  background-color: transparent;\n}\n.kuc-base-datetime-listbox-1-17-1__listbox__item:focus {\n  outline: none;\n}\n'),window.customElements.define("kuc-base-datetime-listbox-1-17-1",nn));var on=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class an extends bi{constructor(){super(...arguments),this.inputAriaLabel="",this.inputId="",this.language="en",this.value="",this.disabled=!1,this.inputAriaInvalid=!1,this.required=!1,this._dateTimeCalendarVisible=!1,this._locale=Xt("en"),this._calendarValue="",this._inputValue="",this._valueForReset=""}update(e){e.has("inputId")&&(this._GUID=this.inputId),e.has("language")&&(this._locale=Xt(this.language),this._updateValueProp()),e.has("value")&&this._updateValueProp(),super.update(e)}render(){return we`
       <input
-        class="kuc-base-date-1-17-0__input"
+        class="kuc-base-date-1-17-1__input"
         id="${this._GUID}-label"
         type="text"
         text-align="center"
@@ -603,7 +602,7 @@
       <button
         aria-haspopup="dialog"
         aria-expanded="${this._dateTimeCalendarVisible}"
-        class="kuc-base-date-1-17-0__assistive-text"
+        class="kuc-base-date-1-17-1__assistive-text"
         @click="${this._handleClickButton}"
         @focus="${this._handleFocusButton}"
         @blur="${this._handleBlurButton}"
@@ -611,9 +610,9 @@
       >
         show date picker
       </button>
-      ${this._dateTimeCalendarVisible?$e`
-            <kuc-base-datetime-calendar-1-17-0
-              class="kuc-base-date-1-17-0__calendar"
+      ${this._dateTimeCalendarVisible?we`
+            <kuc-base-datetime-calendar-1-17-1
+              class="kuc-base-date-1-17-1__calendar"
               .language="${this.language}"
               .value="${this._calendarValue}"
               ?hidden="${!this._dateTimeCalendarVisible}"
@@ -626,22 +625,22 @@
               @kuc:calendar-escape="${this._handleCalendarEscape}"
               @kuc:calendar-body-blur="${this._handleCalendarBlurBody}"
             >
-            </kuc-base-datetime-calendar-1-17-0>
+            </kuc-base-datetime-calendar-1-17-1>
           `:""}
-    `}updated(e){e.has("inputAriaLabel")&&this.inputAriaLabel&&this._dateInput.setAttribute("aria-label",this.inputAriaLabel),super.updated(e)}_handleInputValue(e){const t=e.target.value;this._inputValue=t||""}_handleClickInput(){if(!this._dateTimeCalendarVisible)return this._valueForReset=this.value,this._calendarValue=this._getNewCalendarValue(this._inputValue||""),void this._openCalendar();this._closeCalendar()}_updateValueProp(){if(this.value){const e=this._setCalendarValueWhenInvalidValue();return this._inputValue=Wt(this.language,this.value),void(this._calendarValue=e||this.value)}const e=Yt();this._inputValue="",this._calendarValue=this._calendarValue?this._calendarValue.slice(0,7)+"-01":e.slice(0,7)}_setCalendarValueWhenInvalidValue(){if(this.value&&!wi(this.value)){const e=Yt();return this._calendarValue||e.slice(0,7)}return""}_getNewCalendarValue(e){if(Jt(this.language,e))return qt(this.language,e);if(!this._calendarValue)return"";let t=this._calendarValue.slice(0,7);return""===e&&(t=this._calendarValue.slice(0,7)+"-01"),t}_handleChangeInput(e){e.stopPropagation();const t=(null==e?void 0:e.target).value;if(this._calendarValue=this._getNewCalendarValue(t),this._calendarValue.length>7)return void this._dispathDateChangeCustomEvent(qt(this.language,t));const i={value:void 0,oldValue:this.value,error:this._locale.INVALID_FORMAT};this._inputValue=t,gi(this,"kuc:base-date-change",i)}_handleKeyDownInput(e){"Escape"===e.key&&this._closeCalendar()}_closeCalendar(){this._dateTimeCalendarVisible=!1}_openCalendar(){this._dateTimeCalendarVisible=!0}_handleShiftTabCalendarPrevMonth(){this._footerNoneBtn.focus()}_handleClickCalendarChangeDate(e){e.detail.oldValue=this.value,this.value=e.detail.value,gi(this,"kuc:base-date-change",e.detail)}_handleClickCalendarClickDate(e){this._closeCalendar(),e.detail.oldValue=this.value,this._dateInput.focus(),e.detail.oldValue!==e.detail.value&&(this.value=e.detail.value,gi(this,"kuc:base-date-change",e.detail))}_handleClickCalendarFooterButtonNone(){this._closeCalendar(),this._dateInput.focus(),this._inputValue="";const e=Yt();let t=this._setCalendarValueWhenInvalidValue();t||(t=this._calendarValue?this._calendarValue.slice(0,7)+"-01":e.slice(0,7)+"-01"),this._calendarValue=t,this._dispathDateChangeCustomEvent(void 0)}_handleTabCalendarFooterButtonNone(){this._previousMonth.focus()}_handleClickCalendarFooterButtonToday(){this._closeCalendar();const e=Yt();this._dateInput.focus(),this._dispathDateChangeCustomEvent(e)}_handleCalendarEscape(){const e=this._valueForReset;if(this._closeCalendar(),this._dateInput.focus(),e===this.value)return;const t={oldValue:this.value,value:e};this.value=e,gi(this,"kuc:base-date-change",t)}_handleCalendarBlurBody(e){e.preventDefault(),this._dateTimeCalendarVisible=!1}_dispathDateChangeCustomEvent(e){const t={value:e,oldValue:this.value};this.value=void 0===e?"":e,gi(this,"kuc:base-date-change",t)}_handleClickButton(){if(!this._dateTimeCalendarVisible)return this._valueForReset=this.value,this._calendarValue=this._getNewCalendarValue(this._inputValue||""),void this._openCalendar();this._closeCalendar()}_handleBlurButton(){this._dateInput.classList.remove("kuc-base-date-1-17-0__input--focus")}_handleFocusButton(){this._dateInput.classList.add("kuc-base-date-1-17-0__input--focus")}}on([Fe({type:String})],an.prototype,"inputAriaLabel",void 0),on([Fe({type:String})],an.prototype,"inputId",void 0),on([Fe({type:String,attribute:"lang",reflect:!0})],an.prototype,"language",void 0),on([Fe({type:String,reflect:!0})],an.prototype,"value",void 0),on([Fe({type:Boolean})],an.prototype,"disabled",void 0),on([Fe({type:Boolean})],an.prototype,"inputAriaInvalid",void 0),on([Fe({type:Boolean})],an.prototype,"required",void 0),on([Ke(".kuc-base-date-1-17-0__input")],an.prototype,"_dateInput",void 0),on([Ke(".kuc-base-datetime-calendar-header-1-17-0__group__button--previous-month")],an.prototype,"_previousMonth",void 0),on([Ke(".kuc-base-datetime-calendar-footer-1-17-0__group__button--none")],an.prototype,"_footerNoneBtn",void 0),on([We()],an.prototype,"_dateTimeCalendarVisible",void 0),window.customElements.get("kuc-base-date-1-17-0")||(mi("\ninput.kuc-base-date-1-17-0__input {\n  width: 100px;\n  height: 40px;\n  padding: 0px;\n  text-align: center;\n  border: 1px solid #e3e7e8;\n  color: #333333;\n  box-sizing: border-box;\n  font-size: 14px;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n\ninput.kuc-base-date-1-17-0__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\ninput.kuc-base-date-1-17-0__input--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: #333333;\n}\n.kuc-datetime-picker-1-17-0__group__inputs--date\n  input.kuc-base-date-1-17-0__input--focus {\n  border-color: #3498db;\n}\ninput.kuc-base-date-1-17-0__input:disabled {\n  color: #888888 !important;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.kuc-base-date-1-17-0__calendar {\n  position: absolute;\n  z-index: 2000;\n  background-color: #ffffff;\n  text-align: center;\n  box-sizing: border-box;\n}\n.kuc-base-date-1-17-0__assistive-text {\n  clip: rect(1px, 1px, 1px, 1px);\n  overflow: hidden;\n  position: absolute !important;\n  padding: 0px !important;\n  border: 0px !important;\n  height: 1px !important;\n  width: 1px !important;\n}\n"),window.customElements.define("kuc-base-date-1-17-0",an));var sn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let rn;(()=>{if(rn=window.customElements.get("kuc-date-picker-1-17-0"),!rn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.language="auto",this.value="",this.visible=!0,this._errorFormat="",this._errorText="",this._inputValue="",this._invalidValue="",this._valueConverted="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!(void 0!==this.value&&""!==this.value&&("string"==typeof this.value&&ki(this.value)?(this._valueConverted=ri(this.value),this._valueConverted&&!wi(this._valueConverted)&&(this.throwErrorAfterUpdateComplete(Tt),1)):(this.throwErrorAfterUpdateComplete(Tt),1)))}willUpdate(e){e.has("value")&&(void 0===this.value?this._inputValue=this._invalidValue:(this.value=""===this.value?this.value:this._valueConverted,this._inputValue=this.value,this._errorFormat="")),this._updateErrorText()}render(){return $e`
-        <div class="kuc-date-picker-1-17-0__group">
+    `}updated(e){e.has("inputAriaLabel")&&this.inputAriaLabel&&this._dateInput.setAttribute("aria-label",this.inputAriaLabel),super.updated(e)}_handleInputValue(e){const t=e.target.value;this._inputValue=t||""}_handleClickInput(){if(!this._dateTimeCalendarVisible)return this._valueForReset=this.value,this._calendarValue=this._getNewCalendarValue(this._inputValue||""),void this._openCalendar();this._closeCalendar()}_updateValueProp(){if(this.value){const e=this._setCalendarValueWhenInvalidValue();return this._inputValue=Ft(this.language,this.value),void(this._calendarValue=e||this.value)}const e=Kt();this._inputValue="",this._calendarValue=this._calendarValue?this._calendarValue.slice(0,7)+"-01":e.slice(0,7)}_setCalendarValueWhenInvalidValue(){if(this.value&&!wi(this.value)){const e=Kt();return this._calendarValue||e.slice(0,7)}return""}_getNewCalendarValue(e){if(Yt(this.language,e))return Wt(this.language,e);if(!this._calendarValue)return"";let t=this._calendarValue.slice(0,7);return""===e&&(t=this._calendarValue.slice(0,7)+"-01"),t}_handleChangeInput(e){e.stopPropagation();const t=(null==e?void 0:e.target).value;if(this._calendarValue=this._getNewCalendarValue(t),this._calendarValue.length>7)return void this._dispathDateChangeCustomEvent(Wt(this.language,t));const i={value:void 0,oldValue:this.value,error:this._locale.INVALID_FORMAT};this._inputValue=t,gi(this,"kuc:base-date-change",i)}_handleKeyDownInput(e){"Escape"===e.key&&this._closeCalendar()}_closeCalendar(){this._dateTimeCalendarVisible=!1}_openCalendar(){this._dateTimeCalendarVisible=!0}_handleShiftTabCalendarPrevMonth(){this._footerNoneBtn.focus()}_handleClickCalendarChangeDate(e){e.detail.oldValue=this.value,this.value=e.detail.value,gi(this,"kuc:base-date-change",e.detail)}_handleClickCalendarClickDate(e){this._closeCalendar(),e.detail.oldValue=this.value,this._dateInput.focus(),e.detail.oldValue!==e.detail.value&&(this.value=e.detail.value,gi(this,"kuc:base-date-change",e.detail))}_handleClickCalendarFooterButtonNone(){this._closeCalendar(),this._dateInput.focus(),this._inputValue="";const e=Kt();let t=this._setCalendarValueWhenInvalidValue();t||(t=this._calendarValue?this._calendarValue.slice(0,7)+"-01":e.slice(0,7)+"-01"),this._calendarValue=t,this._dispathDateChangeCustomEvent(void 0)}_handleTabCalendarFooterButtonNone(){this._previousMonth.focus()}_handleClickCalendarFooterButtonToday(){this._closeCalendar();const e=Kt();this._dateInput.focus(),this._dispathDateChangeCustomEvent(e)}_handleCalendarEscape(){const e=this._valueForReset;if(this._closeCalendar(),this._dateInput.focus(),e===this.value)return;const t={oldValue:this.value,value:e};this.value=e,gi(this,"kuc:base-date-change",t)}_handleCalendarBlurBody(e){e.preventDefault(),this._dateTimeCalendarVisible=!1}_dispathDateChangeCustomEvent(e){const t={value:e,oldValue:this.value};this.value=void 0===e?"":e,gi(this,"kuc:base-date-change",t)}_handleClickButton(){if(!this._dateTimeCalendarVisible)return this._valueForReset=this.value,this._calendarValue=this._getNewCalendarValue(this._inputValue||""),void this._openCalendar();this._closeCalendar()}_handleBlurButton(){this._dateInput.classList.remove("kuc-base-date-1-17-1__input--focus")}_handleFocusButton(){this._dateInput.classList.add("kuc-base-date-1-17-1__input--focus")}}on([Ge({type:String})],an.prototype,"inputAriaLabel",void 0),on([Ge({type:String})],an.prototype,"inputId",void 0),on([Ge({type:String,attribute:"lang",reflect:!0})],an.prototype,"language",void 0),on([Ge({type:String,reflect:!0})],an.prototype,"value",void 0),on([Ge({type:Boolean})],an.prototype,"disabled",void 0),on([Ge({type:Boolean})],an.prototype,"inputAriaInvalid",void 0),on([Ge({type:Boolean})],an.prototype,"required",void 0),on([qe(".kuc-base-date-1-17-1__input")],an.prototype,"_dateInput",void 0),on([qe(".kuc-base-datetime-calendar-header-1-17-1__group__button--previous-month")],an.prototype,"_previousMonth",void 0),on([qe(".kuc-base-datetime-calendar-footer-1-17-1__group__button--none")],an.prototype,"_footerNoneBtn",void 0),on([Fe()],an.prototype,"_dateTimeCalendarVisible",void 0),window.customElements.get("kuc-base-date-1-17-1")||(mi("\ninput.kuc-base-date-1-17-1__input {\n  width: 100px;\n  height: 40px;\n  padding: 0px;\n  text-align: center;\n  border: 1px solid #e3e7e8;\n  color: #333333;\n  box-sizing: border-box;\n  font-size: 14px;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n\ninput.kuc-base-date-1-17-1__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\ninput.kuc-base-date-1-17-1__input--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: #333333;\n}\n.kuc-datetime-picker-1-17-1__group__inputs--date\n  input.kuc-base-date-1-17-1__input--focus {\n  border-color: #3498db;\n}\ninput.kuc-base-date-1-17-1__input:disabled {\n  color: #888888 !important;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.kuc-base-date-1-17-1__calendar {\n  position: absolute;\n  z-index: 2000;\n  background-color: #ffffff;\n  text-align: center;\n  box-sizing: border-box;\n}\n.kuc-base-date-1-17-1__assistive-text {\n  clip: rect(1px, 1px, 1px, 1px);\n  overflow: hidden;\n  position: absolute !important;\n  padding: 0px !important;\n  border: 0px !important;\n  height: 1px !important;\n  width: 1px !important;\n}\n"),window.customElements.define("kuc-base-date-1-17-1",an));var sn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let rn;(()=>{if(rn=window.customElements.get("kuc-date-picker-1-17-1"),!rn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.language="auto",this.value="",this.visible=!0,this._errorFormat="",this._errorText="",this._inputValue="",this._invalidValue="",this._valueConverted="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!(void 0!==this.value&&""!==this.value&&("string"==typeof this.value&&ki(this.value)?(this._valueConverted=si(this.value),this._valueConverted&&!wi(this._valueConverted)&&(this.throwErrorAfterUpdateComplete(St),1)):(this.throwErrorAfterUpdateComplete(St),1)))}willUpdate(e){e.has("value")&&(void 0===this.value?this._inputValue=this._invalidValue:(this.value=""===this.value?this.value:this._valueConverted,this._inputValue=this.value,this._errorFormat="")),this._updateErrorText()}render(){return we`
+        <div class="kuc-date-picker-1-17-1__group">
           <label
-            class="kuc-date-picker-1-17-0__group__label"
+            class="kuc-date-picker-1-17-1__group__label"
             for="${this._GUID}-label"
             @click="${this._handleClickLabel}"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </label>
-          <kuc-base-date-1-17-0
+          <kuc-base-date-1-17-1
             .inputId="${this._GUID}"
             .inputAriaInvalid="${""!==this.error}"
             .disabled="${this.disabled}"
@@ -650,17 +649,17 @@
             .language="${this._getLanguage()}"
             @kuc:base-date-change="${this._handleDateChange}"
           >
-          </kuc-base-date-1-17-0>
-          <kuc-base-error-1-17-0
+          </kuc-base-date-1-17-1>
+          <kuc-base-error-1-17-1
             .text="${this._errorText}"
             .guid="${this._GUID}"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}updated(){this._invalidValue=""}_updateErrorText(){this._errorText=this._errorFormat||this.error}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_handleClickLabel(e){e.preventDefault()}_handleDateChange(e){e.stopPropagation(),e.preventDefault();const t={oldValue:this.value,value:""};e.detail.error?(this.value=void 0,this._invalidValue=this._dateInput.value,this._errorFormat=e.detail.error,this.error="",t.value=void 0):(this._errorFormat="",this.value=void 0===e.detail.value?"":e.detail.value,t.value=this.value),this._dispatchChangeEvent(t)}_dispatchChangeEvent(e){gi(this,"change",e)}}sn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),sn([Fe({type:String})],e.prototype,"error",void 0),sn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),sn([Fe({type:String})],e.prototype,"label",void 0),sn([Fe({type:Boolean})],e.prototype,"disabled",void 0),sn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),sn([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),sn([Fe({type:String})],e.prototype,"value",void 0),sn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),sn([Ke(".kuc-base-date-1-17-0__input")],e.prototype,"_dateInput",void 0),window.customElements.define("kuc-date-picker-1-17-0",e),mi('\nkuc-date-picker-1-17-0,\nkuc-date-picker-1-17-0 *,\nkuc-date-picker-1-17-0:lang(en),\nkuc-date-picker-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-date-picker-1-17-0:lang(ja),\nkuc-date-picker-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-date-picker-1-17-0:lang(zh),\nkuc-date-picker-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-date-picker-1-17-0:lang(zh-TW),\nkuc-date-picker-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\nkuc-date-picker-1-17-0 {\n  font-size: 14px;\n  color: #333333;\n  display: inline-table;\n  vertical-align: top;\n  max-width: var(--kuc-date-picker-input-width, 100px);\n  width: var(--kuc-date-picker-input-width, 100px);\n  line-height: 1.5;\n}\nkuc-date-picker-1-17-0[hidden] {\n  display: none;\n}\n.kuc-date-picker-1-17-0__group {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0px;\n  height: auto;\n  margin: 0px;\n}\n.kuc-date-picker-1-17-0__group__label {\n  display: inline-block;\n  padding: 4px 0px 8px 0px;\n  white-space: nowrap;\n}\n.kuc-date-picker-1-17-0__group__label[hidden] {\n  display: none;\n}\n.kuc-date-picker-1-17-0__group input[type=text].kuc-base-date-1-17-0__input {\n  width: var(--kuc-date-picker-input-width, 100px);\n  height: var(--kuc-date-picker-input-height, 40px);\n  padding: 0px;\n  text-align: center;\n  color: var(--kuc-date-picker-input-color);\n  border: 1px solid #e3e7e8;\n  box-sizing: border-box;\n  font-size: var(--kuc-date-picker-input-font-size, 14px);\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n\n.kuc-date-picker-1-17-0__group kuc-base-date-1-17-0 {\n  display: inline-flex;\n}\n\n.kuc-date-picker-1-17-0__group input[type=text].kuc-base-date-1-17-0__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\n.kuc-date-picker-1-17-0__group input[type=text].kuc-base-date-1-17-0__input--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: var(--kuc-date-picker-input-color, #333333);\n}\n.kuc-date-picker-1-17-0__group input[type=text].kuc-base-date-1-17-0__input:disabled {\n  color: #888888;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n'),rn=e}})();var ln=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class dn extends bi{constructor(){super(...arguments),this.language="en",this.max="",this.min="",this.value="",this.disabled=!1,this.hour12=!1,this.timeStep=30,this._listBoxVisible=!1,this._valueLabel="",this._doFocusListBox=!1,this._hours="",this._minutes="",this._suffix="",this._valueForReset="",this._locale=Qt("en")}update(e){(e.has("hour12")||e.has("timeStep")||e.has("max")||e.has("min"))&&(this._listBoxItems=((e,t,i,n)=>{const o=[],a=Math.round(t),s=Ut(n),r=Ut(i);if(a>0){const t=Math.floor((s-r)/a)+1;for(let i=0;i<t;i++){const t=Nt(r+i*a,e);o.push(t)}}return o})(this.hour12,this.timeStep,this.min,this.max),this._updateInputValue()),e.has("value")&&this._updateInputValue(),e.has("language")&&(this._locale=Qt(this.language)),super.update(e)}render(){return $e`
-      <div class="kuc-base-time-1-17-0__group" @click="${this._handleClickInputGroup}">
+      `}updated(){this._invalidValue=""}_updateErrorText(){this._errorText=this._errorFormat||this.error}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_handleClickLabel(e){e.preventDefault()}_handleDateChange(e){e.stopPropagation(),e.preventDefault();const t={oldValue:this.value,value:""};e.detail.error?(this.value=void 0,this._invalidValue=this._dateInput.value,this._errorFormat=e.detail.error,this.error="",t.value=void 0):(this._errorFormat="",this.value=void 0===e.detail.value?"":e.detail.value,t.value=this.value),this._dispatchChangeEvent(t)}_dispatchChangeEvent(e){gi(this,"change",e)}}sn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),sn([Ge({type:String})],e.prototype,"error",void 0),sn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),sn([Ge({type:String})],e.prototype,"label",void 0),sn([Ge({type:Boolean})],e.prototype,"disabled",void 0),sn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),sn([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),sn([Ge({type:String})],e.prototype,"value",void 0),sn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),sn([qe(".kuc-base-date-1-17-1__input")],e.prototype,"_dateInput",void 0),window.customElements.define("kuc-date-picker-1-17-1",e),mi('\nkuc-date-picker-1-17-1,\nkuc-date-picker-1-17-1 *,\nkuc-date-picker-1-17-1:lang(en),\nkuc-date-picker-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-date-picker-1-17-1:lang(ja),\nkuc-date-picker-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-date-picker-1-17-1:lang(zh),\nkuc-date-picker-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-date-picker-1-17-1:lang(zh-TW),\nkuc-date-picker-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\nkuc-date-picker-1-17-1 {\n  font-size: 14px;\n  color: #333333;\n  display: inline-table;\n  vertical-align: top;\n  max-width: var(--kuc-date-picker-input-width, 100px);\n  width: var(--kuc-date-picker-input-width, 100px);\n  line-height: 1.5;\n}\nkuc-date-picker-1-17-1[hidden] {\n  display: none;\n}\n.kuc-date-picker-1-17-1__group {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0px;\n  height: auto;\n  margin: 0px;\n}\n.kuc-date-picker-1-17-1__group__label {\n  display: inline-block;\n  padding: 4px 0px 8px 0px;\n  white-space: nowrap;\n}\n.kuc-date-picker-1-17-1__group__label[hidden] {\n  display: none;\n}\n.kuc-date-picker-1-17-1__group input[type=text].kuc-base-date-1-17-1__input {\n  width: var(--kuc-date-picker-input-width, 100px);\n  height: var(--kuc-date-picker-input-height, 40px);\n  padding: 0px;\n  text-align: center;\n  color: var(--kuc-date-picker-input-color);\n  border: 1px solid #e3e7e8;\n  box-sizing: border-box;\n  font-size: var(--kuc-date-picker-input-font-size, 14px);\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n\n.kuc-date-picker-1-17-1__group kuc-base-date-1-17-1 {\n  display: inline-flex;\n}\n\n.kuc-date-picker-1-17-1__group input[type=text].kuc-base-date-1-17-1__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\n.kuc-date-picker-1-17-1__group input[type=text].kuc-base-date-1-17-1__input--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: var(--kuc-date-picker-input-color, #333333);\n}\n.kuc-date-picker-1-17-1__group input[type=text].kuc-base-date-1-17-1__input:disabled {\n  color: #888888;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n'),rn=e}})();var ln=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class dn extends bi{constructor(){super(...arguments),this.language="en",this.max="",this.min="",this.value="",this.disabled=!1,this.hour12=!1,this.timeStep=30,this._listBoxVisible=!1,this._valueLabel="",this._doFocusListBox=!1,this._hours="",this._minutes="",this._suffix="",this._valueForReset="",this._locale=Xt("en")}update(e){(e.has("hour12")||e.has("timeStep")||e.has("max")||e.has("min"))&&(this._listBoxItems=((e,t,i,n)=>{const o=[],a=Math.round(t),s=Nt(n),r=Nt(i);if(a>0){const t=Math.floor((s-r)/a)+1;for(let i=0;i<t;i++){const t=Ot(r+i*a,e);o.push(t)}}return o})(this.hour12,this.timeStep,this.min,this.max),this._updateInputValue()),e.has("value")&&this._updateInputValue(),e.has("language")&&(this._locale=Xt(this.language)),super.update(e)}render(){return we`
+      <div class="kuc-base-time-1-17-1__group" @click="${this._handleClickInputGroup}">
         <input
           type="text"
-          class="kuc-base-time-1-17-0__group__hours"
+          class="kuc-base-time-1-17-1__group__hours"
           role="spinbutton"
           tabindex="${this._hours?"0":"-1"}"
           aria-label="Hour"
@@ -674,7 +673,7 @@
         ${this._getColonTemplate()}
         <input
           type="text"
-          class="kuc-base-time-1-17-0__group__minutes"
+          class="kuc-base-time-1-17-1__group__minutes"
           role="spinbutton"
           tabindex="${this._minutes?"0":"-1"}"
           aria-label="Minute"
@@ -690,7 +689,7 @@
       <button
         aria-haspopup="listbox"
         aria-expanded="${this._listBoxVisible}"
-        class="kuc-base-time-1-17-0__assistive-text"
+        class="kuc-base-time-1-17-1__assistive-text"
         @keydown="${this._handleKeyDownButton}"
         @focus="${this._handleFocusButton}"
         @blur="${this._handleBlurButton}"
@@ -699,9 +698,9 @@
         show time picker
       </button>
       ${this._getListBoxTemplate()}
-    `}updated(e){e.has("disabled")&&this._toggleDisabledGroup(),super.update(e)}_handleClickInputGroup(e){if(this.disabled)return;if(""===this.value)return this._toggleEl.focus(),void this._openListBox();const t=e.target;this._openListBox(),"INPUT"!==t.tagName.toUpperCase()?this._hoursEl.select():t.select()}_handleBlurListBox(e){e.preventDefault(),this._inputFocusEl||(this._listBoxVisible=!1)}_toggleDisabledGroup(){return this.disabled?this._inputGroupEl.classList.add("kuc-base-time-1-17-0__group--disabled"):this._inputGroupEl.classList.remove("kuc-base-time-1-17-0__group--disabled")}_updateInputValue(){var e;const t=((e,t)=>{const i=e.split(":"),n=parseInt(i[0],10),o=parseInt(i[1],10),a=n%kt;return isNaN(a)||isNaN(o)?{hours:"",minutes:"",suffix:""}:t?((e,t)=>{const i=Rt(e),n=zt(e);return{hours:Zt(n),minutes:Zt(t),suffix:i}})(n,o):{hours:Zt(a),minutes:Zt(o),suffix:""}})(this.value,this.hour12);this._hours=t.hours,this._minutes=t.minutes,this._suffix=t.suffix||"",this._valueLabel=this._getValueLabel(t),this._inputGroupEl&&(this._setValueToInput(t),null===(e=this._inputFocusEl)||void 0===e||e.select())}_getValueLabel(e){if(!e.hours||!e.minutes)return"";const t=`${e.hours}:${e.minutes}`;return e.suffix?t+` ${e.suffix}`:t}_setValueToInput(e){this._hoursEl.value=e.hours,this._minutesEl.value=e.minutes,this._suffixEl&&(this._suffixEl.value=e.suffix||"")}_handleKeyDownButton(e){switch(e.key){case"Tab":case"Escape":if("Escape"===e.key&&e.preventDefault(),!this._listBoxVisible)return;this._closeListBox();break;case"Enter":case" ":case"ArrowUp":case"ArrowDown":e.preventDefault(),e.stopPropagation(),this._openListBoxByKey();break;default:e.preventDefault(),e.stopPropagation(),this._handleDefaultKeyButton(e.key)}}_handleBlurButton(){this._inputGroupEl.classList.remove("kuc-base-time-1-17-0__group--focus")}_handleFocusButton(e){e.stopPropagation(),this._inputGroupEl.classList.add("kuc-base-time-1-17-0__group--focus")}_openListBoxByKey(){return!this._listBoxVisible&&(this._valueForReset=this.value,this._doFocusListBox=!0,this._listBoxVisible=!0,this._inputGroupEl.classList.remove("kuc-base-time-1-17-0__group--focus"),!0)}_handleListBoxEscape(){this._closeListBox(),this.value=this._valueForReset,this._actionUpdateInputValue(this.value),""!==this.value?this._hoursEl.select():this._toggleEl.focus()}_handleDefaultKeyButton(e){if(!/^[0-9]$/i.test(e)||""!==this.value)return;const t=this._computeNumberKeyValueHours(e);this._actionUpdateInputValue(t),this._hoursEl.select()}_handleChangeListBox(e){if(e.preventDefault(),e.stopPropagation(),this._closeListBox(),this._inputFocusEl=this._hoursEl,this._hoursEl.select(),!e.detail.value)return;const t=e.detail.value;this._actionUpdateInputValue(t)}_handleListBoxFocusChange(e){const t=e.detail.value,i=jt(t);this._actionUpdateInputValue(i)}_handleFocusInput(e){this._inputFocusEl=e.target,this._inputFocusEl.select(),this._inputGroupEl.classList.add("kuc-base-time-1-17-0__group--focus")}_handleBlurInput(e){this._inputFocusEl=null;const t=e.relatedTarget;t&&t instanceof HTMLInputElement&&[this._hoursEl,this._minutesEl,this._suffixEl].indexOf(t)>-1||(this._closeListBox(),this._inputGroupEl.classList.remove("kuc-base-time-1-17-0__group--focus"))}_handleTabKey(e){return"Tab"===e.key}_handleKeyDownInput(e){this._closeListBox(),this._handleTabKey(e)||this._handleSupportedKey(e)}_handlePasteInput(e){e.preventDefault()}_handleSupportedKey(e){e.preventDefault();const t=e.key;let i;switch(t){case"Enter":case"ArrowRight":this._actionSelectNextRange();break;case"ArrowLeft":this._actionSelectPreviousRange();break;case"ArrowUp":i=this._computeArrowUpDownValue(1),this._actionUpdateInputValue(i);break;case"ArrowDown":i=this._computeArrowUpDownValue(-1),this._actionUpdateInputValue(i);break;case"Backspace":case"Delete":i=this._computeDeleteValue(),this._actionUpdateInputValue(i);break;default:i=this._computeDefaultKeyValue(t),this._actionUpdateInputValue(i)}}_actionUpdateInputValue(e){const t=""===this.value?this.value:this._formatKeyDownValue(),i=jt(t),n=jt(e);i!==n&&(this.value=n,this._dispatchEventTimeChange(n,i))}_computeDeleteValue(){return this._inputFocusEl===this._minutesEl?this._formatKeyDownValue({minutes:"00"}):this._inputFocusEl===this._hoursEl?this._formatKeyDownValue({hours:"00"}):this._formatKeyDownValue()}_computeArrowUpDownValue(e){return this._inputFocusEl===this._hoursEl?this._computeArrowUpDownHourValue(e):this._inputFocusEl===this._minutesEl?this._computeArrowUpDownMinuteValue(e):this._computeKeyDownSuffixValue()}_computeKeyDownSuffixValue(e){if(!e){const e=this._suffix===xt?wt:xt;return this._formatKeyDownValue({suffix:e})}if(-1===["a","A","p","P"].indexOf(e))return this._formatKeyDownValue();const t="a"===e||"A"===e?xt:wt;return""===this.value&&this._hoursEl.select(),this._formatKeyDownValue({suffix:t})}_computeArrowUpDownHourValue(e){let t=parseInt(this._hours,10)+e;return this.hour12?(t%=yt,t=t<=0?yt:t):(t%=kt,t=t<0?23:t),this._formatKeyDownValue({hours:t.toString()})}_computeArrowUpDownMinuteValue(e){let t=parseInt(this._minutes,10)+e;return t%=60,t=t<0?59:t,this._formatKeyDownValue({minutes:t.toString()})}_computeDefaultKeyValue(e){return/^[0-9]$/i.test(e)?this._computeNumberKeyValue(e):this._inputFocusEl===this._suffixEl?this._computeKeyDownSuffixValue(e):this._formatKeyDownValue()}_computeNumberKeyValue(e){return this._inputFocusEl===this._minutesEl?this._computeNumberKeyValueMinutes(e):this._inputFocusEl===this._hoursEl?this._computeNumberKeyValueHours(e):this._formatKeyDownValue()}_computeNumberKeyValueMinutes(e){const t=this._getPreviousMinutes(this._minutes),i=Zt(t+e);return""===this.value?(this._hoursEl.select(),this._computeNumberKeyValueHours(e)):this._formatKeyDownValue({minutes:i})}_computeNumberKeyValueHours(e){const t=this._getPreviousHours(this._hours,e),i=Zt(t+e);return""===this.value?this._formatKeyDownValue({hours:i,minutes:"00"}):this._formatKeyDownValue({hours:i})}_getPreviousMinutes(e){let t;return t=parseInt(e,10)>10?(""+e)[1]:""+e,t=parseInt(t,10)>5?"0":t,t}_getPreviousHours(e,t){let i;i=parseInt(e,10)>10?(""+e)[1]:""+e;const n=parseInt(i+t,10);return i=this.hour12&&n>yt||!this.hour12&&n>=kt?"0":i,i}_actionSelectNextRange(){this._inputFocusEl!==this._hoursEl?this.hour12&&this._inputFocusEl===this._minutesEl&&this._suffixEl.select():this._minutesEl.select()}_actionSelectPreviousRange(){this._inputFocusEl!==this._suffixEl?this._inputFocusEl===this._minutesEl&&this._hoursEl.select():this._minutesEl.select()}_dispatchEventTimeChange(e,t){const i={value:e,oldValue:t};(Pt(e,this.min)<0||Pt(this.max,e)<0)&&(i.error=this._locale.TIME_IS_OUT_OF_VALID_RANGE),gi(this,"kuc:base-time-change",i)}_formatKeyDownValue(e={hours:this._hours,minutes:this._minutes,suffix:this._suffix}){const t=e.hours||this._hours,i=e.minutes||this._minutes,n=e.suffix||this._suffix,o=`${Zt(t)}:${Zt(i)}`;return n?`${o} ${n}`:o}_openListBox(){this._listBoxVisible||(this._doFocusListBox=!1,this._listBoxVisible=!0)}_closeListBox(){this._doFocusListBox=!1,this._listBoxVisible=!1}_getColonTemplate(){return this._hours?$e` <span class="kuc-base-time-1-17-0__group__colon">:</span> `:""}_getSuffixTemplate(){return this.hour12?$e`
+    `}updated(e){e.has("disabled")&&this._toggleDisabledGroup(),super.update(e)}_handleClickInputGroup(e){if(this.disabled)return;if(""===this.value)return this._toggleEl.focus(),void this._openListBox();const t=e.target;this._openListBox(),"INPUT"!==t.tagName.toUpperCase()?this._hoursEl.select():t.select()}_handleBlurListBox(e){e.preventDefault(),this._inputFocusEl||(this._listBoxVisible=!1)}_toggleDisabledGroup(){return this.disabled?this._inputGroupEl.classList.add("kuc-base-time-1-17-1__group--disabled"):this._inputGroupEl.classList.remove("kuc-base-time-1-17-1__group--disabled")}_updateInputValue(){var e;const t=((e,t)=>{const i=e.split(":"),n=parseInt(i[0],10),o=parseInt(i[1],10),a=n%vt;return isNaN(a)||isNaN(o)?{hours:"",minutes:"",suffix:""}:t?((e,t)=>{const i=zt(e),n=Pt(e);return{hours:Jt(n),minutes:Jt(t),suffix:i}})(n,o):{hours:Jt(a),minutes:Jt(o),suffix:""}})(this.value,this.hour12);this._hours=t.hours,this._minutes=t.minutes,this._suffix=t.suffix||"",this._valueLabel=this._getValueLabel(t),this._inputGroupEl&&(this._setValueToInput(t),null===(e=this._inputFocusEl)||void 0===e||e.select())}_getValueLabel(e){if(!e.hours||!e.minutes)return"";const t=`${e.hours}:${e.minutes}`;return e.suffix?t+` ${e.suffix}`:t}_setValueToInput(e){this._hoursEl.value=e.hours,this._minutesEl.value=e.minutes,this._suffixEl&&(this._suffixEl.value=e.suffix||"")}_handleKeyDownButton(e){switch(e.key){case"Tab":case"Escape":if("Escape"===e.key&&e.preventDefault(),!this._listBoxVisible)return;this._closeListBox();break;case"Enter":case" ":case"ArrowUp":case"ArrowDown":e.preventDefault(),e.stopPropagation(),this._openListBoxByKey();break;default:e.preventDefault(),e.stopPropagation(),this._handleDefaultKeyButton(e.key)}}_handleBlurButton(){this._inputGroupEl.classList.remove("kuc-base-time-1-17-1__group--focus")}_handleFocusButton(e){e.stopPropagation(),this._inputGroupEl.classList.add("kuc-base-time-1-17-1__group--focus")}_openListBoxByKey(){return!this._listBoxVisible&&(this._valueForReset=this.value,this._doFocusListBox=!0,this._listBoxVisible=!0,this._inputGroupEl.classList.remove("kuc-base-time-1-17-1__group--focus"),!0)}_handleListBoxEscape(){this._closeListBox(),this.value=this._valueForReset,this._actionUpdateInputValue(this.value),""!==this.value?this._hoursEl.select():this._toggleEl.focus()}_handleDefaultKeyButton(e){if(!/^[0-9]$/i.test(e)||""!==this.value)return;const t=this._computeNumberKeyValueHours(e);this._actionUpdateInputValue(t),this._hoursEl.select()}_handleChangeListBox(e){if(e.preventDefault(),e.stopPropagation(),this._closeListBox(),this._inputFocusEl=this._hoursEl,this._hoursEl.select(),!e.detail.value)return;const t=e.detail.value;this._actionUpdateInputValue(t)}_handleListBoxFocusChange(e){const t=e.detail.value,i=Rt(t);this._actionUpdateInputValue(i)}_handleFocusInput(e){this._inputFocusEl=e.target,this._inputFocusEl.select(),this._inputGroupEl.classList.add("kuc-base-time-1-17-1__group--focus")}_handleBlurInput(e){this._inputFocusEl=null;const t=e.relatedTarget;t&&t instanceof HTMLInputElement&&[this._hoursEl,this._minutesEl,this._suffixEl].indexOf(t)>-1||(this._closeListBox(),this._inputGroupEl.classList.remove("kuc-base-time-1-17-1__group--focus"))}_handleTabKey(e){return"Tab"===e.key}_handleKeyDownInput(e){this._closeListBox(),this._handleTabKey(e)||this._handleSupportedKey(e)}_handlePasteInput(e){e.preventDefault()}_handleSupportedKey(e){e.preventDefault();const t=e.key;let i;switch(t){case"Enter":case"ArrowRight":this._actionSelectNextRange();break;case"ArrowLeft":this._actionSelectPreviousRange();break;case"ArrowUp":i=this._computeArrowUpDownValue(1),this._actionUpdateInputValue(i);break;case"ArrowDown":i=this._computeArrowUpDownValue(-1),this._actionUpdateInputValue(i);break;case"Backspace":case"Delete":i=this._computeDeleteValue(),this._actionUpdateInputValue(i);break;default:i=this._computeDefaultKeyValue(t),this._actionUpdateInputValue(i)}}_actionUpdateInputValue(e){const t=""===this.value?this.value:this._formatKeyDownValue(),i=Rt(t),n=Rt(e);i!==n&&(this.value=n,this._dispatchEventTimeChange(n,i))}_computeDeleteValue(){return this._inputFocusEl===this._minutesEl?this._formatKeyDownValue({minutes:"00"}):this._inputFocusEl===this._hoursEl?this._formatKeyDownValue({hours:"00"}):this._formatKeyDownValue()}_computeArrowUpDownValue(e){return this._inputFocusEl===this._hoursEl?this._computeArrowUpDownHourValue(e):this._inputFocusEl===this._minutesEl?this._computeArrowUpDownMinuteValue(e):this._computeKeyDownSuffixValue()}_computeKeyDownSuffixValue(e){if(!e){const e=this._suffix===yt?xt:yt;return this._formatKeyDownValue({suffix:e})}if(-1===["a","A","p","P"].indexOf(e))return this._formatKeyDownValue();const t="a"===e||"A"===e?yt:xt;return""===this.value&&this._hoursEl.select(),this._formatKeyDownValue({suffix:t})}_computeArrowUpDownHourValue(e){let t=parseInt(this._hours,10)+e;return this.hour12?(t%=kt,t=t<=0?kt:t):(t%=vt,t=t<0?23:t),this._formatKeyDownValue({hours:t.toString()})}_computeArrowUpDownMinuteValue(e){let t=parseInt(this._minutes,10)+e;return t%=60,t=t<0?59:t,this._formatKeyDownValue({minutes:t.toString()})}_computeDefaultKeyValue(e){return/^[0-9]$/i.test(e)?this._computeNumberKeyValue(e):this._inputFocusEl===this._suffixEl?this._computeKeyDownSuffixValue(e):this._formatKeyDownValue()}_computeNumberKeyValue(e){return this._inputFocusEl===this._minutesEl?this._computeNumberKeyValueMinutes(e):this._inputFocusEl===this._hoursEl?this._computeNumberKeyValueHours(e):this._formatKeyDownValue()}_computeNumberKeyValueMinutes(e){const t=this._getPreviousMinutes(this._minutes),i=Jt(t+e);return""===this.value?(this._hoursEl.select(),this._computeNumberKeyValueHours(e)):this._formatKeyDownValue({minutes:i})}_computeNumberKeyValueHours(e){const t=this._getPreviousHours(this._hours,e),i=Jt(t+e);return""===this.value?this._formatKeyDownValue({hours:i,minutes:"00"}):this._formatKeyDownValue({hours:i})}_getPreviousMinutes(e){let t;return t=parseInt(e,10)>10?(""+e)[1]:""+e,t=parseInt(t,10)>5?"0":t,t}_getPreviousHours(e,t){let i;i=parseInt(e,10)>10?(""+e)[1]:""+e;const n=parseInt(i+t,10);return i=this.hour12&&n>kt||!this.hour12&&n>=vt?"0":i,i}_actionSelectNextRange(){this._inputFocusEl!==this._hoursEl?this.hour12&&this._inputFocusEl===this._minutesEl&&this._suffixEl.select():this._minutesEl.select()}_actionSelectPreviousRange(){this._inputFocusEl!==this._suffixEl?this._inputFocusEl===this._minutesEl&&this._hoursEl.select():this._minutesEl.select()}_dispatchEventTimeChange(e,t){const i={value:e,oldValue:t};(Ut(e,this.min)<0||Ut(this.max,e)<0)&&(i.error=this._locale.TIME_IS_OUT_OF_VALID_RANGE),gi(this,"kuc:base-time-change",i)}_formatKeyDownValue(e={hours:this._hours,minutes:this._minutes,suffix:this._suffix}){const t=e.hours||this._hours,i=e.minutes||this._minutes,n=e.suffix||this._suffix,o=`${Jt(t)}:${Jt(i)}`;return n?`${o} ${n}`:o}_openListBox(){this._listBoxVisible||(this._doFocusListBox=!1,this._listBoxVisible=!0)}_closeListBox(){this._doFocusListBox=!1,this._listBoxVisible=!1}_getColonTemplate(){return this._hours?we` <span class="kuc-base-time-1-17-1__group__colon">:</span> `:""}_getSuffixTemplate(){return this.hour12?we`
           <input
-            class="kuc-base-time-1-17-0__group__suffix"
+            class="kuc-base-time-1-17-1__group__suffix"
             role="spinbutton"
             tabindex="${this._suffix?"0":"-1"}"
             aria-label="${this._suffix||"suffix"}"
@@ -712,11 +711,11 @@
             ?disabled="${this.disabled}"
             value="${this._suffix}"
           />
-        `:""}_getListBoxTemplate(){return this._listBoxVisible?$e`
-          <kuc-base-datetime-listbox-1-17-0
+        `:""}_getListBoxTemplate(){return this._listBoxVisible?we`
+          <kuc-base-datetime-listbox-1-17-1
             maxHeight="165"
             aria-hidden="${!this._listBoxVisible}"
-            class="kuc-base-time-1-17-0__group__listbox"
+            class="kuc-base-time-1-17-1__group__listbox"
             .items="${this._listBoxItems||[]}"
             .value="${this._valueLabel}"
             .doFocus="${this._doFocusListBox}"
@@ -724,32 +723,32 @@
             @kuc:listbox-blur="${this._handleBlurListBox}"
             @kuc:listbox-focus-change="${this._handleListBoxFocusChange}"
             @kuc:listbox-escape="${this._handleListBoxEscape}"
-          ></kuc-base-datetime-listbox-1-17-0>
-        `:""}}ln([Fe({type:String,attribute:"lang",reflect:!0})],dn.prototype,"language",void 0),ln([Fe({type:String})],dn.prototype,"max",void 0),ln([Fe({type:String})],dn.prototype,"min",void 0),ln([Fe({type:String})],dn.prototype,"value",void 0),ln([Fe({type:Boolean})],dn.prototype,"disabled",void 0),ln([Fe({type:Boolean})],dn.prototype,"hour12",void 0),ln([Fe({type:Number})],dn.prototype,"timeStep",void 0),ln([We()],dn.prototype,"_listBoxVisible",void 0),ln([We()],dn.prototype,"_valueLabel",void 0),ln([We()],dn.prototype,"_doFocusListBox",void 0),ln([We()],dn.prototype,"_hours",void 0),ln([We()],dn.prototype,"_minutes",void 0),ln([We()],dn.prototype,"_suffix",void 0),ln([We()],dn.prototype,"_inputFocusEl",void 0),ln([Ke(".kuc-base-time-1-17-0__group__hours")],dn.prototype,"_hoursEl",void 0),ln([Ke(".kuc-base-time-1-17-0__group__minutes")],dn.prototype,"_minutesEl",void 0),ln([Ke(".kuc-base-time-1-17-0__group__suffix")],dn.prototype,"_suffixEl",void 0),ln([Ke(".kuc-base-time-1-17-0__assistive-text")],dn.prototype,"_toggleEl",void 0),ln([Ke(".kuc-base-time-1-17-0__group")],dn.prototype,"_inputGroupEl",void 0),window.customElements.get("kuc-base-time-1-17-0")||(mi("\n:lang(ja) .kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__hours,\n:lang(ja) .kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__minutes {\n  width: 2ch;\n}\n.kuc-base-time-1-17-0__group {\n  display: inline-flex;\n  position: relative;\n  justify-content: center;\n  -webkit-box-align: center;\n  align-items: center;\n  max-width: 85px;\n  width: 85px;\n  height: 40px;\n  color: #333333;\n  border: solid 1px #e3e7e8;\n  box-sizing: border-box;\n  padding: 0px 8px;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__hours {\n  border: 0px;\n  padding: 0px;\n  width: 2ch;\n  font-size: inherit;\n  outline: none;\n  background-color: transparent;\n  color: #333333;\n  caret-color: transparent;\n  user-select: none;\n}\n.kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__minutes {\n  border: 0px;\n  padding: 0px;\n  width: 2ch;\n  font-size: inherit;\n  outline: none;\n  background-color: transparent;\n  color: #333333;\n  caret-color: transparent;\n  user-select: none;\n}\n.kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__hours:focus {\n  border: 0px;\n}\n.kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__minutes:focus {\n  border: 0px;\n}\n.kuc-base-time-1-17-0__group__colon {\n  width: auto;\n  text-align: center;\n}\n.kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__suffix {\n  border: 0px;\n  width: 3ch;\n  text-align: right;\n  font-size: inherit;\n  outline: none;\n  appearance: none;\n  margin-left: 1px;\n  padding: 0px;\n  background-color: transparent;\n  color: #333333;\n  caret-color: transparent;\n  user-select: none;\n}\n.kuc-base-time-1-17-0__group--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: #333333;\n}\n.kuc-base-time-1-17-0__assistive-text {\n  clip: rect(1px, 1px, 1px, 1px);\n  overflow: hidden;\n  position: absolute !important;\n  padding: 0px !important;\n  border: 0px !important;\n  height: 1px !important;\n  width: 1px !important;\n}\n.kuc-base-time-1-17-0__group--disabled {\n  background-color: #d4d7d7;\n  box-shadow: none;\n  color: #888888;\n  cursor: not-allowed;\n}\n.kuc-base-time-1-17-0__group--disabled input:disabled,\n.kuc-base-time-1-17-0__group--disabled span {\n  cursor: not-allowed;\n  color: #888888;\n  -webkit-text-fill-color: #888888;\n}\n"),window.customElements.define("kuc-base-time-1-17-0",dn));var un=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let cn;(()=>{if(cn=window.customElements.get("kuc-datetime-picker-1-17-0"),!cn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.max="",this.min="",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this.timeStep=30,this._dateValue="",this._timeValue="",this._previousTimeValue="",this._previousDateValue="",this._errorFormat="",this._errorText="",this._dateConverted="",this._changeDateByUI=!1,this._changeTimeByUI=!1,this._inputMax="",this._inputMin="",this._timeConverted="",this._errorInvalidTime="",this._inputTimeStep=30,this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!((e.has("max")||e.has("min"))&&!this._checkAndUpdateMaxMinProperty())&&(!(e.has("timeStep")&&!this._checkAndUpdateTimeStepProperty())&&(void 0===this.value||""===this.value||("string"!=typeof this.value?(this.throwErrorAfterUpdateComplete(Tt),!1):(this._dateAndTime=this._getDateTimeValue(this.value),this._dateConverted=ri(this._dateAndTime.date),Ci(this._dateAndTime.date,this._dateAndTime.time)&&wi(this._dateConverted)?(this._timeConverted=li(this._dateAndTime.time.slice(0,5)),!e.has("value")||!(Pt(this._timeConverted,this._inputMin)<0||Pt(this._inputMax,this._timeConverted)<0)||(this.throwErrorAfterUpdateComplete(Ct),!1)):(this.throwErrorAfterUpdateComplete(Tt),!1)))))}willUpdate(e){this._changeDateByUI||this._changeTimeByUI?this._updateValueChangeByUI():this._updateValueWhenSetter()}_checkAndUpdateMaxMinProperty(){let e=this._inputMin,t=this._inputMax;if(void 0===this.max||""===this.max)t=St;else{if(!yi(this.max))return this.throwErrorAfterUpdateComplete(At),!1;t=this.max=li(this.max)}if(void 0===this.min||""===this.min)e=Et;else{if(!yi(this.min))return this.throwErrorAfterUpdateComplete(Dt),!1;e=this.min=li(this.min)}return Pt(t,e)<0?(this.throwErrorAfterUpdateComplete($t),!1):(this._inputMin=e,this._inputMax=t,!0)}_checkAndUpdateTimeStepProperty(){return Si(this.timeStep)?xi(this.timeStep,this._inputMax,this._inputMin)?(this._inputTimeStep=this.timeStep,!0):(this.throwErrorAfterUpdateComplete(Vt),!1):(this.throwErrorAfterUpdateComplete(It),!1)}_updateValueChangeByUI(){const e=this._validateDateTimeFormat();this.value=e?this.value:void 0,!e||this._dateValue||this._timeValue||(this.value="");const t=!this._dateValue&&this._timeValue,i=this._dateValue&&!this._timeValue;this._errorText=t||i?this.error||this._errorFormat||this._errorInvalidTime:e?this.error:this._errorFormat||this._errorInvalidTime}_validateDateTimeFormat(){const e=Boolean(this._timeValue)&&!this._dateValue,t=Boolean(this._dateValue)&&!this._timeValue;return!(this._errorFormat||this._errorInvalidTime||e||t)}_updateValueWhenSetter(){if(this._errorText=this.error,""===this.value||void 0===this.value)return this._previousTimeValue="",this._errorFormat="",void(this._errorInvalidTime="");this._setDateTimeValueSeparate(this._dateAndTime,this._dateConverted),this.value=this._getDateTimeString()}_setDateTimeValueSeparate(e,t){this._dateValue=t||this._dateInput.value,this._timeValue=this._dateValue&&wi(t)?li(e.time.slice(0,5)):this._previousTimeValue}update(e){e.has("value")&&(void 0===this.value&&this._setUndefinedValue(),""===this.value&&this._setEmptyValue()),(e.has("max")||e.has("min")||e.has("value"))&&void 0!==this.value&&(this._errorInvalidTime=""),super.update(e)}_setUndefinedValue(){if(!this._changeTimeByUI){if(this._errorFormat)return this._changeDateByUI?void(this._dateValue=this._dateInput.value):(this._dateValue="",void(this._timeValue=""));this._dateValue=this._previousDateValue,this._timeValue=this._previousTimeValue}}_setEmptyValue(){this._dateValue="",this._timeValue="",this._previousTimeValue="",this._previousDateValue="",this._errorFormat="",this._errorInvalidTime=""}render(){return $e`
+          ></kuc-base-datetime-listbox-1-17-1>
+        `:""}}ln([Ge({type:String,attribute:"lang",reflect:!0})],dn.prototype,"language",void 0),ln([Ge({type:String})],dn.prototype,"max",void 0),ln([Ge({type:String})],dn.prototype,"min",void 0),ln([Ge({type:String})],dn.prototype,"value",void 0),ln([Ge({type:Boolean})],dn.prototype,"disabled",void 0),ln([Ge({type:Boolean})],dn.prototype,"hour12",void 0),ln([Ge({type:Number})],dn.prototype,"timeStep",void 0),ln([Fe()],dn.prototype,"_listBoxVisible",void 0),ln([Fe()],dn.prototype,"_valueLabel",void 0),ln([Fe()],dn.prototype,"_doFocusListBox",void 0),ln([Fe()],dn.prototype,"_hours",void 0),ln([Fe()],dn.prototype,"_minutes",void 0),ln([Fe()],dn.prototype,"_suffix",void 0),ln([Fe()],dn.prototype,"_inputFocusEl",void 0),ln([qe(".kuc-base-time-1-17-1__group__hours")],dn.prototype,"_hoursEl",void 0),ln([qe(".kuc-base-time-1-17-1__group__minutes")],dn.prototype,"_minutesEl",void 0),ln([qe(".kuc-base-time-1-17-1__group__suffix")],dn.prototype,"_suffixEl",void 0),ln([qe(".kuc-base-time-1-17-1__assistive-text")],dn.prototype,"_toggleEl",void 0),ln([qe(".kuc-base-time-1-17-1__group")],dn.prototype,"_inputGroupEl",void 0),window.customElements.get("kuc-base-time-1-17-1")||(mi("\n:lang(ja) .kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__hours,\n:lang(ja) .kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__minutes {\n  width: 2ch;\n}\n.kuc-base-time-1-17-1__group {\n  display: inline-flex;\n  position: relative;\n  justify-content: center;\n  -webkit-box-align: center;\n  align-items: center;\n  max-width: 85px;\n  width: 85px;\n  height: 40px;\n  color: #333333;\n  border: solid 1px #e3e7e8;\n  box-sizing: border-box;\n  padding: 0px 8px;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__hours {\n  border: 0px;\n  padding: 0px;\n  width: 2ch;\n  font-size: inherit;\n  outline: none;\n  background-color: transparent;\n  color: #333333;\n  caret-color: transparent;\n  user-select: none;\n}\n.kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__minutes {\n  border: 0px;\n  padding: 0px;\n  width: 2ch;\n  font-size: inherit;\n  outline: none;\n  background-color: transparent;\n  color: #333333;\n  caret-color: transparent;\n  user-select: none;\n}\n.kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__hours:focus {\n  border: 0px;\n}\n.kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__minutes:focus {\n  border: 0px;\n}\n.kuc-base-time-1-17-1__group__colon {\n  width: auto;\n  text-align: center;\n}\n.kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__suffix {\n  border: 0px;\n  width: 3ch;\n  text-align: right;\n  font-size: inherit;\n  outline: none;\n  appearance: none;\n  margin-left: 1px;\n  padding: 0px;\n  background-color: transparent;\n  color: #333333;\n  caret-color: transparent;\n  user-select: none;\n}\n.kuc-base-time-1-17-1__group--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: #333333;\n}\n.kuc-base-time-1-17-1__assistive-text {\n  clip: rect(1px, 1px, 1px, 1px);\n  overflow: hidden;\n  position: absolute !important;\n  padding: 0px !important;\n  border: 0px !important;\n  height: 1px !important;\n  width: 1px !important;\n}\n.kuc-base-time-1-17-1__group--disabled {\n  background-color: #d4d7d7;\n  box-shadow: none;\n  color: #888888;\n  cursor: not-allowed;\n}\n.kuc-base-time-1-17-1__group--disabled input:disabled,\n.kuc-base-time-1-17-1__group--disabled span {\n  cursor: not-allowed;\n  color: #888888;\n  -webkit-text-fill-color: #888888;\n}\n"),window.customElements.define("kuc-base-time-1-17-1",dn));var un=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let cn;(()=>{if(cn=window.customElements.get("kuc-datetime-picker-1-17-1"),!cn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.max="",this.min="",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this.timeStep=30,this._dateValue="",this._timeValue="",this._previousTimeValue="",this._previousDateValue="",this._errorFormat="",this._errorText="",this._dateConverted="",this._changeDateByUI=!1,this._changeTimeByUI=!1,this._inputMax="",this._inputMin="",this._timeConverted="",this._errorInvalidTime="",this._inputTimeStep=30,this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!((e.has("max")||e.has("min"))&&!this._checkAndUpdateMaxMinProperty())&&(!(e.has("timeStep")&&!this._checkAndUpdateTimeStepProperty())&&(void 0===this.value||""===this.value||("string"!=typeof this.value?(this.throwErrorAfterUpdateComplete(St),!1):(this._dateAndTime=this._getDateTimeValue(this.value),this._dateConverted=si(this._dateAndTime.date),Ci(this._dateAndTime.date,this._dateAndTime.time)&&wi(this._dateConverted)?(this._timeConverted=ri(this._dateAndTime.time.slice(0,5)),!e.has("value")||!(Ut(this._timeConverted,this._inputMin)<0||Ut(this._inputMax,this._timeConverted)<0)||(this.throwErrorAfterUpdateComplete($t),!1)):(this.throwErrorAfterUpdateComplete(St),!1)))))}willUpdate(e){this._changeDateByUI||this._changeTimeByUI?this._updateValueChangeByUI():this._updateValueWhenSetter()}_checkAndUpdateMaxMinProperty(){let e=this._inputMin,t=this._inputMax;if(void 0===this.max||""===this.max)t=Et;else{if(!yi(this.max))return this.throwErrorAfterUpdateComplete(Tt),!1;t=this.max=ri(this.max)}if(void 0===this.min||""===this.min)e=It;else{if(!yi(this.min))return this.throwErrorAfterUpdateComplete(At),!1;e=this.min=ri(this.min)}return Ut(t,e)<0?(this.throwErrorAfterUpdateComplete(wt),!1):(this._inputMin=e,this._inputMax=t,!0)}_checkAndUpdateTimeStepProperty(){return Si(this.timeStep)?xi(this.timeStep,this._inputMax,this._inputMin)?(this._inputTimeStep=this.timeStep,!0):(this.throwErrorAfterUpdateComplete(Dt),!1):(this.throwErrorAfterUpdateComplete(Ct),!1)}_updateValueChangeByUI(){const e=this._validateDateTimeFormat();this.value=e?this.value:void 0,!e||this._dateValue||this._timeValue||(this.value="");const t=!this._dateValue&&this._timeValue,i=this._dateValue&&!this._timeValue;this._errorText=t||i?this.error||this._errorFormat||this._errorInvalidTime:e?this.error:this._errorFormat||this._errorInvalidTime}_validateDateTimeFormat(){const e=Boolean(this._timeValue)&&!this._dateValue,t=Boolean(this._dateValue)&&!this._timeValue;return!(this._errorFormat||this._errorInvalidTime||e||t)}_updateValueWhenSetter(){if(this._errorText=this.error,""===this.value||void 0===this.value)return this._previousTimeValue="",this._errorFormat="",void(this._errorInvalidTime="");this._setDateTimeValueSeparate(this._dateAndTime,this._dateConverted),this.value=this._getDateTimeString()}_setDateTimeValueSeparate(e,t){this._dateValue=t||this._dateInput.value,this._timeValue=this._dateValue&&wi(t)?ri(e.time.slice(0,5)):this._previousTimeValue}update(e){e.has("value")&&(void 0===this.value&&this._setUndefinedValue(),""===this.value&&this._setEmptyValue()),(e.has("max")||e.has("min")||e.has("value"))&&void 0!==this.value&&(this._errorInvalidTime=""),super.update(e)}_setUndefinedValue(){if(!this._changeTimeByUI){if(this._errorFormat)return this._changeDateByUI?void(this._dateValue=this._dateInput.value):(this._dateValue="",void(this._timeValue=""));this._dateValue=this._previousDateValue,this._timeValue=this._previousTimeValue}}_setEmptyValue(){this._dateValue="",this._timeValue="",this._previousTimeValue="",this._previousDateValue="",this._errorFormat="",this._errorInvalidTime=""}render(){return we`
         <fieldset
-          class="kuc-datetime-picker-1-17-0__group"
+          class="kuc-datetime-picker-1-17-1__group"
           aria-describedby="${this._GUID}-error"
         >
           <legend
-            class="kuc-datetime-picker-1-17-0__group__label"
+            class="kuc-datetime-picker-1-17-1__group__label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </legend>
-          <div class="kuc-datetime-picker-1-17-0__group__inputs">
-            <kuc-base-date-1-17-0
-              class="kuc-datetime-picker-1-17-0__group__inputs--date"
+          <div class="kuc-datetime-picker-1-17-1__group__inputs">
+            <kuc-base-date-1-17-1
+              class="kuc-datetime-picker-1-17-1__group__inputs--date"
               .value="${this._dateValue}"
               .language="${this._getLanguage()}"
               .disabled="${this.disabled}"
               inputAriaLabel="date"
               @kuc:base-date-change="${this._handleDateChange}"
-            ></kuc-base-date-1-17-0
-            ><kuc-base-time-1-17-0
-              class="kuc-datetime-picker-1-17-0__group__inputs--time"
+            ></kuc-base-date-1-17-1
+            ><kuc-base-time-1-17-1
+              class="kuc-datetime-picker-1-17-1__group__inputs--time"
               .value="${this._timeValue}"
               .hour12="${this.hour12}"
               .disabled="${this.disabled}"
@@ -758,17 +757,17 @@
               .max="${this._inputMax}"
               .language="${this._getLanguage()}"
               @kuc:base-time-change="${this._handleTimeChange}"
-            ></kuc-base-time-1-17-0>
+            ></kuc-base-time-1-17-1>
           </div>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this._errorText}"
             .guid="${this._GUID}"
             ?hidden="${!this._errorText}"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </fieldset>
-      `}updated(){this._resetState()}_resetState(){this._previousTimeValue="",this._previousDateValue="",this._changeDateByUI=!1,this._changeTimeByUI=!1}_handleDateChange(e){e.stopPropagation(),e.preventDefault(),this._changeDateByUI=!0;let t=this._dateValue;e.detail.error?(this._errorFormat=e.detail.error,this.error=""):(t=e.detail.value,this._errorFormat=""),this._updateDateTimeValue(t,"date")}_handleTimeChange(e){e.preventDefault(),e.stopPropagation(),this._changeTimeByUI=!0;const t=e.detail.value;e.detail.error?(this._errorInvalidTime=e.detail.error,this.error=""):this._errorInvalidTime="",this._updateDateTimeValue(t,"time")}_updateDateTimeValue(e,t){const i=this.value;"date"===t?this._dateValue=e||"":this._timeValue=e,this._previousTimeValue=this._timeValue,this._previousDateValue=this._dateValue;const n=this._errorFormat||this._errorInvalidTime?void 0:this._getDateTimeString(),o=this._errorFormat||this._errorInvalidTime?void 0:n;this.value=o,!this._validateDateTimeFormat()||this._dateValue||this._timeValue||(this.value="");const a={value:this.value,oldValue:i,changedPart:t};gi(this,"change",a)}_getDateTimeString(){if(!this._dateValue||!this._timeValue)return;if(!this.value)return`${this._dateValue}T${this._timeValue}:00`;const e=this.value.split(":");return 3===e.length?`${this._dateValue}T${this._timeValue}:${e[2]}`:`${this._dateValue}T${this._timeValue}:00`}_getDateTimeValue(e){if(""===e||void 0===e)return{date:"",time:""};const t=e.split("T"),i=t[0],n=t[1];if(e.indexOf("T")===e.length-1||t.length>2)return{date:i,time:""};if(!n)return{date:i,time:Et};const[o,a,s]=n.split(":");if(""===o||""===a||""===s)return{date:i,time:n};const r=`${o}:${a||"00"}`;return s?{date:i,time:`${r}:${s}`}:{date:i,time:r}}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}}un([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),un([Fe({type:String})],e.prototype,"error",void 0),un([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),un([Fe({type:String})],e.prototype,"label",void 0),un([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),un([Fe({type:String})],e.prototype,"max",void 0),un([Fe({type:String})],e.prototype,"min",void 0),un([Fe({type:String,hasChanged:(e,t)=>(""===e||void 0===e)&&e===t||e!==t})],e.prototype,"value",void 0),un([Fe({type:Boolean})],e.prototype,"disabled",void 0),un([Fe({type:Boolean})],e.prototype,"hour12",void 0),un([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),un([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),un([Fe({type:Number})],e.prototype,"timeStep",void 0),un([Ke(".kuc-base-date-1-17-0__input")],e.prototype,"_dateInput",void 0),window.customElements.define("kuc-datetime-picker-1-17-0",e),mi('\nkuc-datetime-picker-1-17-0,\nkuc-datetime-picker-1-17-0 *,\nkuc-datetime-picker-1-17-0:lang(en),\nkuc-datetime-picker-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-datetime-picker-1-17-0:lang(ja),\nkuc-datetime-picker-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-datetime-picker-1-17-0:lang(zh),\nkuc-datetime-picker-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-datetime-picker-1-17-0:lang(zh-TW),\nkuc-datetime-picker-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\nkuc-datetime-picker-1-17-0 {\n  font-size: 14px;\n  display: inline-table;\n  vertical-align: top;\n  line-height: 1.5;\n  max-width: calc(var(--kuc-date-time-picker-date-input-width, 100px) + var(--kuc-date-time-picker-time-input-width, 85px));\n  width: calc(var(--kuc-date-time-picker-date-input-width, 100px) + var(--kuc-date-time-picker-time-input-width, 85px));\n}\nkuc-datetime-picker-1-17-0[hidden] {\n  display: none;\n}\n.kuc-datetime-picker-1-17-0__group {\n  border: none;\n  padding: 0px;\n  height: auto;\n  display: flex;\n  flex-direction: column;\n  margin: 0px;\n}\n.kuc-datetime-picker-1-17-0__group__label {\n  display: inline-block;\n  padding: 4px 0px 8px 0px;\n  white-space: nowrap;\n}\n.kuc-datetime-picker-1-17-0__group__label[hidden] {\n  display: none;\n}\n.kuc-datetime-picker-1-17-0__group__inputs {\n  display: flex;\n  width: calc(var(--kuc-date-time-picker-date-input-width, 100px) + var(--kuc-date-time-picker-time-input-width, 85px));\n}\n.kuc-datetime-picker-1-17-0__group input[type=text].kuc-base-date-1-17-0__input {\n  width: var(--kuc-date-time-picker-date-input-width, 100px);\n  height: var(--kuc-date-time-picker-input-height, 40px);\n  color: var(--kuc-date-time-picker-input-color, #333333);\n  font-size: var(--kuc-date-time-picker-input-font-size, 14px);\n}\n.kuc-datetime-picker-1-17-0__group .kuc-base-time-1-17-0__group {\n  max-width: var(--kuc-date-time-picker-time-input-width, 85px);\n  width: var(--kuc-date-time-picker-time-input-width, 85px);\n  font-size: var(--kuc-date-time-picker-input-font-size, 14px);\n  height: var(--kuc-date-time-picker-input-height, 40px);\n  color: var(--kuc-date-time-picker-input-color, #333333);\n}\n.kuc-datetime-picker-1-17-0__group .kuc-base-time-1-17-0__group input[type=text].kuc-base-time-1-17-0__group__hours,\n.kuc-datetime-picker-1-17-0__group .kuc-base-time-1-17-0__group input[type=text].kuc-base-time-1-17-0__group__minutes,\n.kuc-datetime-picker-1-17-0__group .kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__suffix,\n.kuc-datetime-picker-1-17-0__group .kuc-base-time-1-17-0__group--focus  {\n  color: var(--kuc-date-time-picker-input-color, #333333);\n}\n'),cn=e}})();var hn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let _n;(()=>{if(_n=window.customElements.get("kuc-dialog-1-17-0"),!_n){class e extends bi{constructor(e){super(),this.icon="",this.title="",this.content="",this.footer="",this.header="",this.container=document.body,this.footerVisible=!0,this._isOpened=!1,this._triggeredElement=null,this._content="",this._footer="",this._header="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusFirstDummy(){const e=this._focusableElements[this._focusableElements.length-2];e&&e.focus()}_handleFocusLastDummy(){this._dialogEl.focus()}_handleKeyDownDialog(e){"Escape"===e.key&&(e.preventDefault(),this.close())}_handleClickCloseButton(e){this.close()}_getCloseButtonSvgTemplate(){return Ce`
+      `}updated(){this._resetState()}_resetState(){this._previousTimeValue="",this._previousDateValue="",this._changeDateByUI=!1,this._changeTimeByUI=!1}_handleDateChange(e){e.stopPropagation(),e.preventDefault(),this._changeDateByUI=!0;let t=this._dateValue;e.detail.error?(this._errorFormat=e.detail.error,this.error=""):(t=e.detail.value,this._errorFormat=""),this._updateDateTimeValue(t,"date")}_handleTimeChange(e){e.preventDefault(),e.stopPropagation(),this._changeTimeByUI=!0;const t=e.detail.value;e.detail.error?(this._errorInvalidTime=e.detail.error,this.error=""):this._errorInvalidTime="",this._updateDateTimeValue(t,"time")}_updateDateTimeValue(e,t){const i=this.value;"date"===t?this._dateValue=e||"":this._timeValue=e,this._previousTimeValue=this._timeValue,this._previousDateValue=this._dateValue;const n=this._errorFormat||this._errorInvalidTime?void 0:this._getDateTimeString(),o=this._errorFormat||this._errorInvalidTime?void 0:n;this.value=o,!this._validateDateTimeFormat()||this._dateValue||this._timeValue||(this.value="");const a={value:this.value,oldValue:i,changedPart:t};gi(this,"change",a)}_getDateTimeString(){if(!this._dateValue||!this._timeValue)return;if(!this.value)return`${this._dateValue}T${this._timeValue}:00`;const e=this.value.split(":");return 3===e.length?`${this._dateValue}T${this._timeValue}:${e[2]}`:`${this._dateValue}T${this._timeValue}:00`}_getDateTimeValue(e){if(""===e||void 0===e)return{date:"",time:""};const t=e.split("T"),i=t[0],n=t[1];if(e.indexOf("T")===e.length-1||t.length>2)return{date:i,time:""};if(!n)return{date:i,time:It};const[o,a,s]=n.split(":");if(""===o||""===a||""===s)return{date:i,time:n};const r=`${o}:${a||"00"}`;return s?{date:i,time:`${r}:${s}`}:{date:i,time:r}}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}}un([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),un([Ge({type:String})],e.prototype,"error",void 0),un([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),un([Ge({type:String})],e.prototype,"label",void 0),un([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),un([Ge({type:String})],e.prototype,"max",void 0),un([Ge({type:String})],e.prototype,"min",void 0),un([Ge({type:String,hasChanged:(e,t)=>(""===e||void 0===e)&&e===t||e!==t})],e.prototype,"value",void 0),un([Ge({type:Boolean})],e.prototype,"disabled",void 0),un([Ge({type:Boolean})],e.prototype,"hour12",void 0),un([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),un([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),un([Ge({type:Number})],e.prototype,"timeStep",void 0),un([qe(".kuc-base-date-1-17-1__input")],e.prototype,"_dateInput",void 0),window.customElements.define("kuc-datetime-picker-1-17-1",e),mi('\nkuc-datetime-picker-1-17-1,\nkuc-datetime-picker-1-17-1 *,\nkuc-datetime-picker-1-17-1:lang(en),\nkuc-datetime-picker-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-datetime-picker-1-17-1:lang(ja),\nkuc-datetime-picker-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-datetime-picker-1-17-1:lang(zh),\nkuc-datetime-picker-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-datetime-picker-1-17-1:lang(zh-TW),\nkuc-datetime-picker-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\nkuc-datetime-picker-1-17-1 {\n  font-size: 14px;\n  display: inline-table;\n  vertical-align: top;\n  line-height: 1.5;\n  max-width: calc(var(--kuc-date-time-picker-date-input-width, 100px) + var(--kuc-date-time-picker-time-input-width, 85px));\n  width: calc(var(--kuc-date-time-picker-date-input-width, 100px) + var(--kuc-date-time-picker-time-input-width, 85px));\n}\nkuc-datetime-picker-1-17-1[hidden] {\n  display: none;\n}\n.kuc-datetime-picker-1-17-1__group {\n  border: none;\n  padding: 0px;\n  height: auto;\n  display: flex;\n  flex-direction: column;\n  margin: 0px;\n}\n.kuc-datetime-picker-1-17-1__group__label {\n  display: inline-block;\n  padding: 4px 0px 8px 0px;\n  white-space: nowrap;\n}\n.kuc-datetime-picker-1-17-1__group__label[hidden] {\n  display: none;\n}\n.kuc-datetime-picker-1-17-1__group__inputs {\n  display: flex;\n  width: calc(var(--kuc-date-time-picker-date-input-width, 100px) + var(--kuc-date-time-picker-time-input-width, 85px));\n}\n.kuc-datetime-picker-1-17-1__group input[type=text].kuc-base-date-1-17-1__input {\n  width: var(--kuc-date-time-picker-date-input-width, 100px);\n  height: var(--kuc-date-time-picker-input-height, 40px);\n  color: var(--kuc-date-time-picker-input-color, #333333);\n  font-size: var(--kuc-date-time-picker-input-font-size, 14px);\n}\n.kuc-datetime-picker-1-17-1__group .kuc-base-time-1-17-1__group {\n  max-width: var(--kuc-date-time-picker-time-input-width, 85px);\n  width: var(--kuc-date-time-picker-time-input-width, 85px);\n  font-size: var(--kuc-date-time-picker-input-font-size, 14px);\n  height: var(--kuc-date-time-picker-input-height, 40px);\n  color: var(--kuc-date-time-picker-input-color, #333333);\n}\n.kuc-datetime-picker-1-17-1__group .kuc-base-time-1-17-1__group input[type=text].kuc-base-time-1-17-1__group__hours,\n.kuc-datetime-picker-1-17-1__group .kuc-base-time-1-17-1__group input[type=text].kuc-base-time-1-17-1__group__minutes,\n.kuc-datetime-picker-1-17-1__group .kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__suffix,\n.kuc-datetime-picker-1-17-1__group .kuc-base-time-1-17-1__group--focus  {\n  color: var(--kuc-date-time-picker-input-color, #333333);\n}\n'),cn=e}})();var hn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let _n;(()=>{if(_n=window.customElements.get("kuc-dialog-1-17-1"),!_n){class e extends bi{constructor(e){super(),this.icon="",this.title="",this.content="",this.footer="",this.header="",this.container=document.body,this.footerVisible=!0,this._isOpened=!1,this._triggeredElement=null,this._content="",this._footer="",this._header="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusFirstDummy(){const e=this._focusableElements[this._focusableElements.length-2];e&&e.focus()}_handleFocusLastDummy(){this._dialogEl.focus()}_handleKeyDownDialog(e){"Escape"===e.key&&(e.preventDefault(),this.close())}_handleClickCloseButton(e){this.close()}_getCloseButtonSvgTemplate(){return $e`
         <svg
-          class="kuc-dialog-1-17-0__dialog__header__close-button-svg"
+          class="kuc-dialog-1-17-1__dialog__header__close-button-svg"
           width="32"
           height="32"
           viewBox="0 0 32 32"
@@ -788,9 +787,9 @@
             fill="#888888"
           />
         </svg>
-      `}_getIconTemplate(){switch(this.icon){case"info":return Ce`
+      `}_getIconTemplate(){switch(this.icon){case"info":return $e`
             <svg
-              class="kuc-dialog-1-17-0__dialog__content__icon-info"
+              class="kuc-dialog-1-17-1__dialog__content__icon-info"
               width="18"
               height="18"
               viewBox="0 0 18 18"
@@ -808,9 +807,9 @@
                 fill="white"
               />
             </svg>
-          `;case"success":return Ce`
+          `;case"success":return $e`
             <svg
-              class="kuc-dialog-1-17-0__dialog__content__icon-success"
+              class="kuc-dialog-1-17-1__dialog__content__icon-success"
               width="18"
               height="18"
               viewBox="0 0 18 18"
@@ -826,9 +825,9 @@
                 fill="white"
               />
             </svg>
-          `;case"error":return Ce`
+          `;case"error":return $e`
             <svg
-              class="kuc-dialog-1-17-0__dialog__content__icon-error"
+              class="kuc-dialog-1-17-1__dialog__content__icon-error"
               width="18"
               height="18"
               viewBox="0 0 18 18"
@@ -846,9 +845,9 @@
                 stroke-width="0.5"
               />
             </svg>
-          `;case"warning":return Ce`
+          `;case"warning":return $e`
             <svg
-              class="kuc-dialog-1-17-0__dialog__content__icon-warning"
+              class="kuc-dialog-1-17-1__dialog__content__icon-warning"
               width="18"
               height="18"
               viewBox="0 0 18 18"
@@ -872,9 +871,9 @@
                 fill="#333333"
               />
             </svg>
-          `;case"question":return Ce`
+          `;case"question":return $e`
             <svg
-              class="kuc-dialog-1-17-0__dialog__content__icon-question"
+              class="kuc-dialog-1-17-1__dialog__content__icon-question"
               width="18"
               height="18"
               viewBox="0 0 18 18"
@@ -900,29 +899,29 @@
                 fill="white"
               />
             </svg>
-          `;default:return""}}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this._close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this._close(),!e)return this.throwErrorAfterUpdateComplete(gt),!1}return!0}update(e){e.has("content")&&(this._content=si(this.content)),e.has("footer")&&(this._footer=si(this.footer)),(e.has("header")||e.has("title"))&&(this._header=this.header?si(this.header):this.title),super.update(e)}_isValidContainerElement(){return this.container instanceof HTMLElement}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.container.appendChild(this),this.container.classList.add("kuc--has-dialog"),this.performUpdate(),this.setAttribute("opened",""),this._isOpened=!0,this._triggeredElement=document.activeElement,this._dialogEl&&this._dialogEl.focus()}close(){this._close(),gi(this,"close")}_close(){this._isOpened=!1,document.getElementsByTagName("body")[0].classList.remove("kuc--has-dialog"),this.removeAttribute("opened"),this._triggeredElement instanceof HTMLElement&&this._triggeredElement.focus()}render(){return $e`
+          `;default:return""}}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this._close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this._close(),!e)return this.throwErrorAfterUpdateComplete(bt),!1}return!0}update(e){e.has("content")&&(this._content=ai(this.content)),e.has("footer")&&(this._footer=ai(this.footer)),(e.has("header")||e.has("title"))&&(this._header=this.header?ai(this.header):this.title),super.update(e)}_isValidContainerElement(){return this.container instanceof HTMLElement}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.container.appendChild(this),this.container.classList.add("kuc--has-dialog"),this.performUpdate(),this.setAttribute("opened",""),this._isOpened=!0,this._triggeredElement=document.activeElement,this._dialogEl&&this._dialogEl.focus()}close(){this._close(),gi(this,"close")}_close(){this._isOpened=!1,document.getElementsByTagName("body")[0].classList.remove("kuc--has-dialog"),this.removeAttribute("opened"),this._triggeredElement instanceof HTMLElement&&this._triggeredElement.focus()}render(){return we`
         <span
-          class="kuc-dialog-1-17-0__first-dummy"
+          class="kuc-dialog-1-17-1__first-dummy"
           tabIndex="0"
           @focus="${this._handleFocusFirstDummy}"
         ></span>
         <div
-          class="kuc-dialog-1-17-0__dialog"
+          class="kuc-dialog-1-17-1__dialog"
           role="dialog"
           tabindex="-1"
           aria-labelledby="${this._GUID}-title"
           aria-modal="true"
           @keydown="${this._handleKeyDownDialog}"
         >
-          <div class="kuc-dialog-1-17-0__dialog__header">
+          <div class="kuc-dialog-1-17-1__dialog__header">
             <h2
-              class="kuc-dialog-1-17-0__dialog__header__title"
+              class="kuc-dialog-1-17-1__dialog__header__title"
               id="${this._GUID}-title"
             >
               ${this._header}
             </h2>
             <button
-              class="kuc-dialog-1-17-0__dialog__header__close-button"
+              class="kuc-dialog-1-17-1__dialog__header__close-button"
               type="button"
               aria-label="close"
               @click="${this._handleClickCloseButton}"
@@ -930,28 +929,28 @@
               ${this._getCloseButtonSvgTemplate()}
             </button>
           </div>
-          <div class="kuc-dialog-1-17-0__dialog__content">
-            <div class="kuc-dialog-1-17-0__dialog__content__icon">
+          <div class="kuc-dialog-1-17-1__dialog__content">
+            <div class="kuc-dialog-1-17-1__dialog__content__icon">
               ${this._getIconTemplate()}
             </div>
-            <div class="kuc-dialog-1-17-0__dialog__content__content">
+            <div class="kuc-dialog-1-17-1__dialog__content__content">
               ${this._content}
             </div>
           </div>
           <div
-            class="kuc-dialog-1-17-0__dialog__footer"
+            class="kuc-dialog-1-17-1__dialog__footer"
             ?hidden="${!this.footerVisible}"
           >
             ${this._footer}
           </div>
         </div>
         <span
-          class="kuc-dialog-1-17-0__last-dummy"
+          class="kuc-dialog-1-17-1__last-dummy"
           tabIndex="0"
           @focus="${this._handleFocusLastDummy}"
         ></span>
-        <div class="kuc-dialog-1-17-0__mask"></div>
-      `}}hn([Fe({type:String})],e.prototype,"icon",void 0),hn([Fe({type:String})],e.prototype,"title",void 0),hn([Fe()],e.prototype,"content",void 0),hn([Fe()],e.prototype,"footer",void 0),hn([Fe()],e.prototype,"header",void 0),hn([Fe()],e.prototype,"container",void 0),hn([Fe({type:Boolean})],e.prototype,"footerVisible",void 0),hn([We()],e.prototype,"_isOpened",void 0),hn([Ke(".kuc-dialog-1-17-0__dialog")],e.prototype,"_dialogEl",void 0),hn([Je("a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type='text']:not([disabled]), input[type='radio']:not([disabled]), input[type='checkbox']:not([disabled]), select:not([disabled]),[tabindex='0']")],e.prototype,"_focusableElements",void 0),window.customElements.define("kuc-dialog-1-17-0",e),mi('\n  kuc-dialog-1-17-0,\n  kuc-dialog-1-17-0 *,\n  kuc-dialog-1-17-0:lang(en),\n  kuc-dialog-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-dialog-1-17-0:lang(ja),\n  kuc-dialog-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-dialog-1-17-0:lang(zh),\n  kuc-dialog-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-dialog-1-17-0:lang(zh-TW),\n  kuc-dialog-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n\n  kuc-dialog-1-17-0 {\n    display: none;\n  }\n\n  kuc-dialog-1-17-0[opened] {\n    display: block;\n  }\n\n  .kuc-dialog-1-17-0__dialog {\n    min-width: 400px;\n    max-width: var(--kuc-dialog-max-width, 600px);\n    width: max-content;\n    font-size: 20px;\n    background-color: #ffffff;\n    position: fixed;\n    line-height: normal;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 10000;\n  }\n  \n  .kuc-dialog-1-17-0__dialog:focus-visible {\n    outline: 1px solid #3498db;\n  }\n\n  .kuc-dialog-1-17-0__dialog__header {\n    min-height: 64px;\n    border-bottom: 1px solid #e3e7e8;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .kuc-dialog-1-17-0__dialog__header__title {\n    font-size: var(--kuc-dialog-header-font-size, 24px);\n    color: var(--kuc-dialog-header-color);\n    padding: 0 24px;\n    align-self: center;\n    overflow-wrap: anywhere;\n    word-break: normal;\n    font-weight: 400;\n  }\n\n  .kuc-dialog-1-17-0__dialog__header__close-button {\n    width: 48px;\n    height: 48px;\n    border: none;\n    background-color: #ffffff;\n    margin-right: 12px;\n    margin-top: 11px;\n    cursor: pointer;\n  }\n\n  .kuc-dialog-1-17-0__dialog__header__close-button:focus-visible {\n    outline: 1px solid #3498db;\n  }\n\n  .kuc-dialog-1-17-0__dialog__header__close-button-svg {\n    vertical-align: middle;\n  }\n\n  .kuc-dialog-1-17-0__dialog__content {\n    border-bottom: #e3e7e8 solid 1px;\n    background-color: #f7f9fa;\n    padding: 24px;\n    display: flex;\n    overflow: auto;\n  }\n\n  .kuc-dialog-1-17-0__dialog__content__content {\n    line-height: 1.2;\n    overflow-wrap: anywhere;\n    word-break: normal;\n  }\n\n  .kuc-dialog-1-17-0__dialog__content__icon-info,\n  .kuc-dialog-1-17-0__dialog__content__icon-success,\n  .kuc-dialog-1-17-0__dialog__content__icon-error,\n  .kuc-dialog-1-17-0__dialog__content__icon-warning,\n  .kuc-dialog-1-17-0__dialog__content__icon-question {\n    margin-right: 16px;\n    width: 24px;\n    height: 24px;\n  }\n\n  .kuc-dialog-1-17-0__dialog__footer {\n    padding: 24px;\n    overflow-wrap: anywhere;\n    word-break: normal;\n  }\n\n  .kuc-dialog-1-17-0__dialog__footer[hidden] {\n    display: none;\n  }\n\n  .kuc-dialog-1-17-0__mask {\n    position: fixed;\n    top: 0;\n    right: 0;\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: #000000;\n    opacity: 0.6;\n    z-index: 9999;\n  }\n\n  .kuc--has-dialog {\n    overflow: hidden;\n  }\n\n  .kuc--has-dialog .kuc-dialog-1-17-0__dialog {\n    overflow-x: hidden;\n    overflow-y: auto;\n    max-height: 80vh;\n  }\n'),_n=e}})();var pn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let bn;(()=>{if(bn=window.customElements.get("kuc-dropdown-1-17-0"),!bn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.selectedIndex=-1,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._selectorVisible=!1,this._DISABLED_CLASS="kuc-dropdown-1-17-0__group__select-menu__item--disabled",this._hasValueInItems=!1,this._GUID=fi();const t=vi(e);this._handleClickDocument=this._handleClickDocument.bind(this),this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}_getSelectedLabel(){const e=this.items.filter(((e,t)=>this._isCheckedItem(e,t)));return 0===e.length?"":void 0===e[0].label?e[0].value:e[0].label}_getToggleIconSvgTemplate(){return Ce`
+        <div class="kuc-dialog-1-17-1__mask"></div>
+      `}}hn([Ge({type:String})],e.prototype,"icon",void 0),hn([Ge({type:String})],e.prototype,"title",void 0),hn([Ge()],e.prototype,"content",void 0),hn([Ge()],e.prototype,"footer",void 0),hn([Ge()],e.prototype,"header",void 0),hn([Ge()],e.prototype,"container",void 0),hn([Ge({type:Boolean})],e.prototype,"footerVisible",void 0),hn([Fe()],e.prototype,"_isOpened",void 0),hn([qe(".kuc-dialog-1-17-1__dialog")],e.prototype,"_dialogEl",void 0),hn([Ye("a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type='text']:not([disabled]), input[type='radio']:not([disabled]), input[type='checkbox']:not([disabled]), select:not([disabled]),[tabindex='0']")],e.prototype,"_focusableElements",void 0),window.customElements.define("kuc-dialog-1-17-1",e),mi('\n  kuc-dialog-1-17-1,\n  kuc-dialog-1-17-1 *,\n  kuc-dialog-1-17-1:lang(en),\n  kuc-dialog-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-dialog-1-17-1:lang(ja),\n  kuc-dialog-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-dialog-1-17-1:lang(zh),\n  kuc-dialog-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-dialog-1-17-1:lang(zh-TW),\n  kuc-dialog-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n\n  kuc-dialog-1-17-1 {\n    display: none;\n  }\n\n  kuc-dialog-1-17-1[opened] {\n    display: block;\n  }\n\n  .kuc-dialog-1-17-1__dialog {\n    min-width: 400px;\n    max-width: var(--kuc-dialog-max-width, 600px);\n    width: max-content;\n    font-size: 20px;\n    background-color: #ffffff;\n    position: fixed;\n    line-height: normal;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 10000;\n  }\n  \n  .kuc-dialog-1-17-1__dialog:focus-visible {\n    outline: 1px solid #3498db;\n  }\n\n  .kuc-dialog-1-17-1__dialog__header {\n    min-height: 64px;\n    border-bottom: 1px solid #e3e7e8;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .kuc-dialog-1-17-1__dialog__header__title {\n    font-size: var(--kuc-dialog-header-font-size, 24px);\n    color: var(--kuc-dialog-header-color);\n    padding: 0 24px;\n    align-self: center;\n    overflow-wrap: anywhere;\n    word-break: normal;\n    font-weight: 400;\n  }\n\n  .kuc-dialog-1-17-1__dialog__header__close-button {\n    width: 48px;\n    height: 48px;\n    border: none;\n    background-color: #ffffff;\n    margin-right: 12px;\n    margin-top: 11px;\n    cursor: pointer;\n  }\n\n  .kuc-dialog-1-17-1__dialog__header__close-button:focus-visible {\n    outline: 1px solid #3498db;\n  }\n\n  .kuc-dialog-1-17-1__dialog__header__close-button-svg {\n    vertical-align: middle;\n  }\n\n  .kuc-dialog-1-17-1__dialog__content {\n    border-bottom: #e3e7e8 solid 1px;\n    background-color: #f7f9fa;\n    padding: 24px;\n    display: flex;\n    overflow: auto;\n  }\n\n  .kuc-dialog-1-17-1__dialog__content__content {\n    line-height: 1.2;\n    overflow-wrap: anywhere;\n    word-break: normal;\n  }\n\n  .kuc-dialog-1-17-1__dialog__content__icon-info,\n  .kuc-dialog-1-17-1__dialog__content__icon-success,\n  .kuc-dialog-1-17-1__dialog__content__icon-error,\n  .kuc-dialog-1-17-1__dialog__content__icon-warning,\n  .kuc-dialog-1-17-1__dialog__content__icon-question {\n    margin-right: 16px;\n    width: 24px;\n    height: 24px;\n  }\n\n  .kuc-dialog-1-17-1__dialog__footer {\n    padding: 24px;\n    overflow-wrap: anywhere;\n    word-break: normal;\n  }\n\n  .kuc-dialog-1-17-1__dialog__footer[hidden] {\n    display: none;\n  }\n\n  .kuc-dialog-1-17-1__mask {\n    position: fixed;\n    top: 0;\n    right: 0;\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: #000000;\n    opacity: 0.6;\n    z-index: 9999;\n  }\n\n  .kuc--has-dialog {\n    overflow: hidden;\n  }\n\n  .kuc--has-dialog .kuc-dialog-1-17-1__dialog {\n    overflow-x: hidden;\n    overflow-y: auto;\n    max-height: 80vh;\n  }\n'),_n=e}})();var pn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let bn;(()=>{if(bn=window.customElements.get("kuc-dropdown-1-17-1"),!bn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.selectedIndex=-1,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._selectorVisible=!1,this._DISABLED_CLASS="kuc-dropdown-1-17-1__group__select-menu__item--disabled",this._hasValueInItems=!1,this._GUID=fi();const t=vi(e);this._handleClickDocument=this._handleClickDocument.bind(this),this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}_getSelectedLabel(){const e=this.items.filter(((e,t)=>this._isCheckedItem(e,t)));return 0===e.length?"":void 0===e[0].label?e[0].value:e[0].label}_getToggleIconSvgTemplate(){return $e`
       <svg
         width="36"
         height="36"
@@ -965,20 +964,20 @@
           d="M24.2122 15.6665L25 16.1392L19.7332 21.4998H18.2668L13 16.1392L13.7878 15.6665L18.765 20.6866H19.235L24.2122 15.6665Z"
           fill="#3498db"/>
       </svg>
-    `}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(lt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(ut),1))}willUpdate(e){if((e.has("items")||e.has("value"))&&(this._hasValueInItems=this.items.some((e=>e.value===this.value))),e.has("value")){if(""!==this.value||this._hasValueInItems)return;this.selectedIndex=-1}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}_getSelectedIndex(){if(!this.value&&!this._hasValueInItems)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}render(){return $e`
-        <div class="kuc-dropdown-1-17-0__group">
+    `}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}willUpdate(e){if((e.has("items")||e.has("value"))&&(this._hasValueInItems=this.items.some((e=>e.value===this.value))),e.has("value")){if(""!==this.value||this._hasValueInItems)return;this.selectedIndex=-1}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}_getSelectedIndex(){if(!this.value&&!this._hasValueInItems)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}render(){return we`
+        <div class="kuc-dropdown-1-17-1__group">
           <div
-            class="kuc-dropdown-1-17-0__group__label"
+            class="kuc-dropdown-1-17-1__group__label"
             id="${this._GUID}-label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </div>
           <button
-            class="kuc-dropdown-1-17-0__group__toggle"
+            class="kuc-dropdown-1-17-1__group__toggle"
             id="${this._GUID}-toggle"
             type="button"
             aria-haspopup="true"
@@ -991,15 +990,15 @@
             @click="${this._handleClickDropdownToggle}"
             @keydown="${this._handleKeyDownDropdownToggle}"
           >
-            <span class="kuc-dropdown-1-17-0__group__toggle__selected-item-label"
+            <span class="kuc-dropdown-1-17-1__group__toggle__selected-item-label"
               >${this._getSelectedLabel()}</span
             >
-            <span class="kuc-dropdown-1-17-0__group__toggle__icon">
+            <span class="kuc-dropdown-1-17-1__group__toggle__icon">
               ${this._getToggleIconSvgTemplate()}
             </span>
           </button>
           <ul
-            class="kuc-dropdown-1-17-0__group__select-menu"
+            class="kuc-dropdown-1-17-1__group__select-menu"
             role="listbox"
             aria-hidden="${!this._selectorVisible}"
             ?hidden="${!this._selectorVisible}"
@@ -1008,16 +1007,16 @@
           >
             ${this.items.map(((e,t)=>this._getItemTemplate(e,t)))}
           </ul>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
             ariaLive="assertive"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}firstUpdated(){window.addEventListener("resize",(()=>{this._actionResizeScrollWindow()})),window.addEventListener("scroll",(()=>{this._actionResizeScrollWindow()}))}async updated(){await this.updateComplete,this._selectorVisible?(this._setMenuPosition(),this._scrollToView(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument,!0)}),1)):setTimeout((()=>{document.removeEventListener("click",this._handleClickDocument,!0)}),1)}_handleMouseDownDropdownItem(e){const t=this._getItemElementWhenMouseOverDown(e.target),i=t.getAttribute("value"),n=t.dataset.index||"0";this._actionUpdateValue(i,n)}_handleMouseOverDropdownItem(e){const t=this._getItemElementWhenMouseOverDown(e.target);this._actionHighlightMenuItem(t)}_handleMouseLeaveMenu(){this._actionClearAllHighlightMenuItem()}_handleMouseDownMenu(e){e.preventDefault()}_handleMouseDownDropdownToggle(e){e.preventDefault()}_handleMouseUpDropdownToggle(e){e.preventDefault()}_handleClickDropdownToggle(e){e.stopPropagation(),this._actionToggleMenu()}_handleClickDocument(e){(e.target===this._buttonEl||this._buttonEl.contains(e.target))&&e.stopPropagation(),Array.from(this._disabledItemsEl).some((t=>t===e.target||t.contains(e.target)))||this._actionHideMenu()}_handleKeyDownDropdownToggle(e){switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),0===this.items.length)break;if(!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightPrevMenuItem();break;case"Tab":this._selectorVisible&&this._actionHideMenu();break;case"Down":case"ArrowDown":if(e.preventDefault(),0===this.items.length)break;if(!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightNextMenuItem();break;case"Enter":{if(e.preventDefault(),0===this.items.length)break;if(!this._selectorVisible){this._actionShowMenu();break}const{value:t,selectedIndex:i}=this._getInfoHighlightItem();if(null===t)break;this._actionUpdateValue(t,i),this._actionHideMenu();break}case"Escape":e.preventDefault(),this._selectorVisible&&e.stopPropagation(),this._actionHideMenu();break;case"Home":this._selectorVisible&&(e.preventDefault(),this._actionHighlightFirstMenuItem());break;case"End":this._selectorVisible&&(e.preventDefault(),this._actionHighlightLastMenuItem())}}_getInfoHighlightItem(){const e=this._highlightItemEl;return null===e?{value:null,selectedIndex:"-1"}:{value:e.getAttribute("value"),selectedIndex:e.dataset.index||"0"}}_actionShowMenu(){this._buttonEl.focus(),0!==this.items.length&&(this._selectorVisible=!0,null===this._selectedItemEl||this._selectedItemEl.classList.contains(this._DISABLED_CLASS)||this._setHighlightAndActiveDescendantMenu(this._selectedItemEl))}_actionHideMenu(){this._selectorVisible=!1,this._actionRemoveActiveDescendant()}_actionToggleMenu(){0!==this.items.length&&(this._selectorVisible?this._actionHideMenu():this._actionShowMenu())}_actionHighlightFirstMenuItem(){let e=this._firstItemEl,t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightLastMenuItem(){let e=this._lastItemEl,t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightPrevMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.previousElementSibling),null===e&&(e=this._lastItemEl);let t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling,null===e&&(e=this._lastItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightNextMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.nextElementSibling),null===e&&(e=this._firstItemEl);let t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling,null===e&&(e=this._firstItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionClearAllHighlightMenuItem(){this._itemsEl.forEach((e=>{e.classList.remove("kuc-dropdown-1-17-0__group__select-menu__highlight")})),this._actionRemoveActiveDescendant()}_setHighlightAndActiveDescendantMenu(e){this._actionHighlightMenuItem(e),this._actionSetActiveDescendant(e.id),this._scrollToView()}_actionHighlightMenuItem(e){this._actionClearAllHighlightMenuItem(),e.classList.add("kuc-dropdown-1-17-0__group__select-menu__highlight")}_actionUpdateValue(e,t){const i=parseInt(t,10);if(this.value===e&&this.selectedIndex===i)return;const n={oldValue:this.value,value:e};this.value=e,this.selectedIndex=i,gi(this,"change",n)}_actionSetActiveDescendant(e){void 0!==e&&null!==this._buttonEl&&this._buttonEl.setAttribute("aria-activedescendant",e)}_actionRemoveActiveDescendant(){this._buttonEl.removeAttribute("aria-activedescendant")}_getScrollbarWidthHeight(){const e=document.createElement("div");e.style.cssText="overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(e);const t=e.offsetWidth-e.clientWidth,i=e.offsetHeight-e.clientHeight;return document.body.removeChild(e),{scrollbarWidth:t,scrollbarHeight:i}}_getDistanceToggleButton(){const{scrollbarWidth:e,scrollbarHeight:t}=this._getScrollbarWidthHeight(),i=document.body.scrollHeight>window.innerHeight,n=document.body.scrollWidth>window.innerWidth;return{toTop:this._buttonEl.getBoundingClientRect().top,toBottom:window.innerHeight-this._buttonEl.getBoundingClientRect().bottom-(n?t:0),toLeft:this._buttonEl.getBoundingClientRect().left,toRight:window.innerWidth-this._buttonEl.getBoundingClientRect().left-(i?e:0)}}_setMenuPositionAboveOrBelow(){this._menuEl.style.height="auto",this._menuEl.style.bottom="auto",this._menuEl.style.overflowY="";const e=this._menuEl.getBoundingClientRect().height,t=this._getDistanceToggleButton();if(!(t.toBottom>=e))if(t.toBottom<t.toTop){const i=this._errorEl.offsetHeight?this._errorEl.offsetHeight+16:0;if(this._menuEl.style.bottom=`${this._buttonEl.offsetHeight+i}px`,t.toTop>=e)return;this._menuEl.style.height=`${t.toTop}px`,this._menuEl.style.overflowY="scroll"}else this._menuEl.style.height=`${t.toBottom}px`,this._menuEl.style.overflowY="scroll"}_setMenuPositionLeftOrRight(){this._menuEl.style.right="auto";const e=this._menuEl.getBoundingClientRect().width,t=this._getDistanceToggleButton();if(t.toRight>=e||t.toLeft<e||t.toRight<0)return;const i=this._buttonEl.offsetWidth-t.toRight;this._menuEl.style.right=i>0?`${i}px`:"0px"}_setMenuPosition(){this._setMenuPositionAboveOrBelow(),this._setMenuPositionLeftOrRight()}_scrollToView(){if(!this._highlightItemEl||!this._menuEl)return;const e=this._menuEl.getBoundingClientRect(),t=this._highlightItemEl.getBoundingClientRect();t.top<e.top&&(this._menuEl.scrollTop-=e.top-t.top),e.bottom<t.bottom&&(this._menuEl.scrollTop+=t.bottom-e.bottom)}_actionResizeScrollWindow(){!this._timeoutID&&this._selectorVisible&&(this._timeoutID=window.setTimeout((()=>{this._timeoutID=null,this._setMenuPosition()}),50))}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return $e`
+      `}firstUpdated(){window.addEventListener("resize",(()=>{this._actionResizeScrollWindow()})),window.addEventListener("scroll",(()=>{this._actionResizeScrollWindow()}))}async updated(){await this.updateComplete,this._selectorVisible?(this._setMenuPosition(),this._scrollToView(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument,!0)}),1)):setTimeout((()=>{document.removeEventListener("click",this._handleClickDocument,!0)}),1)}_handleMouseDownDropdownItem(e){const t=this._getItemElementWhenMouseOverDown(e.target),i=t.getAttribute("value"),n=t.dataset.index||"0";this._actionUpdateValue(i,n)}_handleMouseOverDropdownItem(e){const t=this._getItemElementWhenMouseOverDown(e.target);this._actionHighlightMenuItem(t)}_handleMouseLeaveMenu(){this._actionClearAllHighlightMenuItem()}_handleMouseDownMenu(e){e.preventDefault()}_handleMouseDownDropdownToggle(e){e.preventDefault()}_handleMouseUpDropdownToggle(e){e.preventDefault()}_handleClickDropdownToggle(e){e.stopPropagation(),this._actionToggleMenu()}_handleClickDocument(e){(e.target===this._buttonEl||this._buttonEl.contains(e.target))&&e.stopPropagation(),Array.from(this._disabledItemsEl).some((t=>t===e.target||t.contains(e.target)))||this._actionHideMenu()}_handleKeyDownDropdownToggle(e){switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),0===this.items.length)break;if(!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightPrevMenuItem();break;case"Tab":this._selectorVisible&&this._actionHideMenu();break;case"Down":case"ArrowDown":if(e.preventDefault(),0===this.items.length)break;if(!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightNextMenuItem();break;case"Enter":{if(e.preventDefault(),0===this.items.length)break;if(!this._selectorVisible){this._actionShowMenu();break}const{value:t,selectedIndex:i}=this._getInfoHighlightItem();if(null===t)break;this._actionUpdateValue(t,i),this._actionHideMenu();break}case"Escape":e.preventDefault(),this._selectorVisible&&e.stopPropagation(),this._actionHideMenu();break;case"Home":this._selectorVisible&&(e.preventDefault(),this._actionHighlightFirstMenuItem());break;case"End":this._selectorVisible&&(e.preventDefault(),this._actionHighlightLastMenuItem())}}_getInfoHighlightItem(){const e=this._highlightItemEl;return null===e?{value:null,selectedIndex:"-1"}:{value:e.getAttribute("value"),selectedIndex:e.dataset.index||"0"}}_actionShowMenu(){this._buttonEl.focus(),0!==this.items.length&&(this._selectorVisible=!0,null===this._selectedItemEl||this._selectedItemEl.classList.contains(this._DISABLED_CLASS)||this._setHighlightAndActiveDescendantMenu(this._selectedItemEl))}_actionHideMenu(){this._selectorVisible=!1,this._actionRemoveActiveDescendant()}_actionToggleMenu(){0!==this.items.length&&(this._selectorVisible?this._actionHideMenu():this._actionShowMenu())}_actionHighlightFirstMenuItem(){let e=this._firstItemEl,t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightLastMenuItem(){let e=this._lastItemEl,t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightPrevMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.previousElementSibling),null===e&&(e=this._lastItemEl);let t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling,null===e&&(e=this._lastItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightNextMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.nextElementSibling),null===e&&(e=this._firstItemEl);let t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling,null===e&&(e=this._firstItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionClearAllHighlightMenuItem(){this._itemsEl.forEach((e=>{e.classList.remove("kuc-dropdown-1-17-1__group__select-menu__highlight")})),this._actionRemoveActiveDescendant()}_setHighlightAndActiveDescendantMenu(e){this._actionHighlightMenuItem(e),this._actionSetActiveDescendant(e.id),this._scrollToView()}_actionHighlightMenuItem(e){this._actionClearAllHighlightMenuItem(),e.classList.add("kuc-dropdown-1-17-1__group__select-menu__highlight")}_actionUpdateValue(e,t){const i=parseInt(t,10);if(this.value===e&&this.selectedIndex===i)return;const n={oldValue:this.value,value:e};this.value=e,this.selectedIndex=i,gi(this,"change",n)}_actionSetActiveDescendant(e){void 0!==e&&null!==this._buttonEl&&this._buttonEl.setAttribute("aria-activedescendant",e)}_actionRemoveActiveDescendant(){this._buttonEl.removeAttribute("aria-activedescendant")}_getScrollbarWidthHeight(){const e=document.createElement("div");e.style.cssText="overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(e);const t=e.offsetWidth-e.clientWidth,i=e.offsetHeight-e.clientHeight;return document.body.removeChild(e),{scrollbarWidth:t,scrollbarHeight:i}}_getDistanceToggleButton(){const{scrollbarWidth:e,scrollbarHeight:t}=this._getScrollbarWidthHeight(),i=document.body.scrollHeight>window.innerHeight,n=document.body.scrollWidth>window.innerWidth;return{toTop:this._buttonEl.getBoundingClientRect().top,toBottom:window.innerHeight-this._buttonEl.getBoundingClientRect().bottom-(n?t:0),toLeft:this._buttonEl.getBoundingClientRect().left,toRight:window.innerWidth-this._buttonEl.getBoundingClientRect().left-(i?e:0)}}_setMenuPositionAboveOrBelow(){this._menuEl.style.height="auto",this._menuEl.style.bottom="auto",this._menuEl.style.overflowY="";const e=this._menuEl.getBoundingClientRect().height,t=this._getDistanceToggleButton();if(!(t.toBottom>=e))if(t.toBottom<t.toTop){const i=this._errorEl.offsetHeight?this._errorEl.offsetHeight+16:0;if(this._menuEl.style.bottom=`${this._buttonEl.offsetHeight+i}px`,t.toTop>=e)return;this._menuEl.style.height=`${t.toTop}px`,this._menuEl.style.overflowY="scroll"}else this._menuEl.style.height=`${t.toBottom}px`,this._menuEl.style.overflowY="scroll"}_setMenuPositionLeftOrRight(){this._menuEl.style.right="auto";const e=this._menuEl.getBoundingClientRect().width,t=this._getDistanceToggleButton();if(t.toRight>=e||t.toLeft<e||t.toRight<0)return;const i=this._buttonEl.offsetWidth-t.toRight;this._menuEl.style.right=i>0?`${i}px`:"0px"}_setMenuPosition(){this._setMenuPositionAboveOrBelow(),this._setMenuPositionLeftOrRight()}_scrollToView(){if(!this._highlightItemEl||!this._menuEl)return;const e=this._menuEl.getBoundingClientRect(),t=this._highlightItemEl.getBoundingClientRect();t.top<e.top&&(this._menuEl.scrollTop-=e.top-t.top),e.bottom<t.bottom&&(this._menuEl.scrollTop+=t.bottom-e.bottom)}_actionResizeScrollWindow(){!this._timeoutID&&this._selectorVisible&&(this._timeoutID=window.setTimeout((()=>{this._timeoutID=null,this._setMenuPosition()}),50))}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return we`
         <li
-          class="kuc-dropdown-1-17-0__group__select-menu__item ${e.disabled?this._DISABLED_CLASS:""}"
+          class="kuc-dropdown-1-17-1__group__select-menu__item ${e.disabled?this._DISABLED_CLASS:""}"
           role="option"
           tabindex="${!e.disabled&&i?"0":"-1"}"
           aria-selected="${i?"true":"false"}"
@@ -1030,9 +1029,9 @@
           ${this._getDropdownIconSvgTemplate(i,!!e.disabled)}
           ${void 0===e.label?e.value:e.label}
         </li>
-      `}_getDropdownIconSvgTemplate(e,t){return Ce`
-      ${e?Ce`<svg
-          class="kuc-dropdown-1-17-0__group__select-menu__item__icon"
+      `}_getDropdownIconSvgTemplate(e,t){return $e`
+      ${e?$e`<svg
+          class="kuc-dropdown-1-17-1__group__select-menu__item__icon"
           width="11"
           height="9"
           viewBox="0 0 11 9"
@@ -1044,16 +1043,16 @@
             clip-rule="evenodd"
             d="M0 5L1.5 3L4.5 5.5L9.5 0L11 1.5L4.5 8.5L0 5Z"
             fill="${t?"#888888":"#3498db"}"/>
-        </svg>`:""}`}_getItemElementWhenMouseOverDown(e){return e.classList.value.split(" ").includes("kuc-dropdown-1-17-0__group__select-menu__item")?e:this._getItemElementWhenMouseOverDown(e.parentElement)}}pn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),pn([Fe({type:String})],e.prototype,"error",void 0),pn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),pn([Fe({type:String})],e.prototype,"label",void 0),pn([Fe({type:String})],e.prototype,"value",void 0),pn([Fe({type:Number})],e.prototype,"selectedIndex",void 0),pn([Fe({type:Boolean})],e.prototype,"disabled",void 0),pn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),pn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),pn([Fe({type:Array})],e.prototype,"items",void 0),pn([We()],e.prototype,"_selectorVisible",void 0),pn([Ke(".kuc-dropdown-1-17-0__group__select-menu")],e.prototype,"_menuEl",void 0),pn([Je(".kuc-dropdown-1-17-0__group__select-menu__item")],e.prototype,"_itemsEl",void 0),pn([Ke("button.kuc-dropdown-1-17-0__group__toggle")],e.prototype,"_buttonEl",void 0),pn([Ke(".kuc-dropdown-1-17-0__group__select-menu__item")],e.prototype,"_firstItemEl",void 0),pn([Ke(".kuc-dropdown-1-17-0__group__select-menu__item:last-child")],e.prototype,"_lastItemEl",void 0),pn([Ke(".kuc-dropdown-1-17-0__group__select-menu__item[aria-selected=true]")],e.prototype,"_selectedItemEl",void 0),pn([Ke(".kuc-dropdown-1-17-0__group__select-menu__highlight")],e.prototype,"_highlightItemEl",void 0),pn([Je(".kuc-dropdown-1-17-0__group__select-menu__item--disabled")],e.prototype,"_disabledItemsEl",void 0),pn([Ke(".kuc-base-error-1-17-0__error")],e.prototype,"_errorEl",void 0),window.customElements.define("kuc-dropdown-1-17-0",e),mi('\n  kuc-dropdown-1-17-0,\n  kuc-dropdown-1-17-0 *,\n  kuc-dropdown-1-17-0:lang(en),\n  kuc-dropdown-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-dropdown-1-17-0:lang(ja),\n  kuc-dropdown-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-dropdown-1-17-0:lang(zh),\n  kuc-dropdown-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-dropdown-1-17-0:lang(zh-TW),\n  kuc-dropdown-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-dropdown-1-17-0 {\n    display: inline-table;\n    font-size: 14px;\n    color: #333333;\n    vertical-align: top;\n    width: var(--kuc-dropdown-toggle-width, 180px);\n    min-width: var(--kuc-dropdown-toggle-width, 180px);\n    line-height: 1.5;\n  }\n  kuc-dropdown-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-dropdown-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    margin: 0px;\n    position: relative;\n  }\n  .kuc-dropdown-1-17-0__group__label {\n    padding: 4px 0px 8px 0px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n  .kuc-dropdown-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-dropdown-1-17-0__group__toggle {\n    height: var(--kuc-dropdown-toggle-height, 40px);\n    box-sizing: border-box;\n    box-shadow: 1px 1px 1px #ffffff inset;\n    border: 1px solid #e3e7e8;\n    color: var(--kuc-dropdown-toggle-color, #3498db);\n    background-color: #f7f9fa;\n    padding: 0 0 0 24px;\n    display: grid;\n    grid: auto / auto-flow;\n    align-items: center;\n    align-content: center;\n    justify-content: space-between;\n    width: var(--kuc-dropdown-toggle-width, 100%);\n    cursor: pointer;\n  }\n  .kuc-dropdown-1-17-0__group__toggle:focus {\n    outline: none;\n    border: 1px solid #3498db;\n  }\n  .kuc-dropdown-1-17-0__group__toggle:disabled {\n    background-color: #d4d7d7;\n    box-shadow: none;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-dropdown-1-17-0__group__toggle__selected-item-label {\n    font-size: var(--kuc-dropdown-font-size, 14px);\n    text-align: left;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .kuc-dropdown-1-17-0__group__toggle__icon {\n    flex: none;\n    width: 38px;\n    height: 38px;\n  }\n  .kuc-dropdown-1-17-0__group__select-menu {\n    position: absolute;\n    min-width: 280px;\n    margin: 0;\n    padding: 8px 0;\n    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n    background-color: #ffffff;\n    z-index: 2000;\n    list-style: none;\n    box-sizing: border-box;\n  }\n  .kuc-dropdown-1-17-0__group__select-menu[hidden] {\n    display: none;\n  }\n  .kuc-dropdown-1-17-0__group__select-menu__item {\n    padding: 8px 16px 8px 24px;\n    line-height: 1;\n    position: relative;\n    cursor: pointer;\n    white-space: nowrap;\n    color: var(--kuc-dropdown-menu-color, #333333);\n    font-size: var(--kuc-dropdown-font-size, 14px);\n  }\n  .kuc-dropdown-1-17-0__group__select-menu__item__icon {\n    position: absolute;\n    top: 50%;\n    left: 6px;\n    margin-top: -5px;\n  }\n  .kuc-dropdown-1-17-0__group__select-menu__item[aria-selected="true"] {\n    color: var(--kuc-dropdown-menu-color-selected, #3498db);\n  }\n  .kuc-dropdown-1-17-0__group__select-menu__highlight[role="option"] {\n    background-color: #e2f2fe;\n  }\n  .kuc-dropdown-1-17-0__group__select-menu__item--disabled,\n  .kuc-dropdown-1-17-0__group__select-menu__item--disabled[aria-selected="true"] {\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n    color: #888888;\n  }\n'),bn=e}})();var gn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};const mn=517;let fn;(()=>{if(fn=window.customElements.get("kuc-field-group-1-17-0"),!fn){class e extends bi{constructor(e){super(),this.className="",this.content="",this.id="",this.label="",this.disabled=!1,this.expanded=!1,this.visible=!0,this._content="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}update(e){e.has("content")&&(this._content=si(this.content)),super.update(e)}render(){return $e`
+        </svg>`:""}`}_getItemElementWhenMouseOverDown(e){return e.classList.value.split(" ").includes("kuc-dropdown-1-17-1__group__select-menu__item")?e:this._getItemElementWhenMouseOverDown(e.parentElement)}}pn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),pn([Ge({type:String})],e.prototype,"error",void 0),pn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),pn([Ge({type:String})],e.prototype,"label",void 0),pn([Ge({type:String})],e.prototype,"value",void 0),pn([Ge({type:Number})],e.prototype,"selectedIndex",void 0),pn([Ge({type:Boolean})],e.prototype,"disabled",void 0),pn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),pn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),pn([Ge({type:Array})],e.prototype,"items",void 0),pn([Fe()],e.prototype,"_selectorVisible",void 0),pn([qe(".kuc-dropdown-1-17-1__group__select-menu")],e.prototype,"_menuEl",void 0),pn([Ye(".kuc-dropdown-1-17-1__group__select-menu__item")],e.prototype,"_itemsEl",void 0),pn([qe("button.kuc-dropdown-1-17-1__group__toggle")],e.prototype,"_buttonEl",void 0),pn([qe(".kuc-dropdown-1-17-1__group__select-menu__item")],e.prototype,"_firstItemEl",void 0),pn([qe(".kuc-dropdown-1-17-1__group__select-menu__item:last-child")],e.prototype,"_lastItemEl",void 0),pn([qe(".kuc-dropdown-1-17-1__group__select-menu__item[aria-selected=true]")],e.prototype,"_selectedItemEl",void 0),pn([qe(".kuc-dropdown-1-17-1__group__select-menu__highlight")],e.prototype,"_highlightItemEl",void 0),pn([Ye(".kuc-dropdown-1-17-1__group__select-menu__item--disabled")],e.prototype,"_disabledItemsEl",void 0),pn([qe(".kuc-base-error-1-17-1__error")],e.prototype,"_errorEl",void 0),window.customElements.define("kuc-dropdown-1-17-1",e),mi('\n  kuc-dropdown-1-17-1,\n  kuc-dropdown-1-17-1 *,\n  kuc-dropdown-1-17-1:lang(en),\n  kuc-dropdown-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-dropdown-1-17-1:lang(ja),\n  kuc-dropdown-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-dropdown-1-17-1:lang(zh),\n  kuc-dropdown-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-dropdown-1-17-1:lang(zh-TW),\n  kuc-dropdown-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-dropdown-1-17-1 {\n    display: inline-table;\n    font-size: 14px;\n    color: #333333;\n    vertical-align: top;\n    width: var(--kuc-dropdown-toggle-width, 180px);\n    min-width: var(--kuc-dropdown-toggle-width, 180px);\n    line-height: 1.5;\n  }\n  kuc-dropdown-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-dropdown-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    margin: 0px;\n    position: relative;\n  }\n  .kuc-dropdown-1-17-1__group__label {\n    padding: 4px 0px 8px 0px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n  .kuc-dropdown-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-dropdown-1-17-1__group__toggle {\n    height: var(--kuc-dropdown-toggle-height, 40px);\n    box-sizing: border-box;\n    box-shadow: 1px 1px 1px #ffffff inset;\n    border: 1px solid #e3e7e8;\n    color: var(--kuc-dropdown-toggle-color, #3498db);\n    background-color: #f7f9fa;\n    padding: 0 0 0 24px;\n    display: grid;\n    grid: auto / auto-flow;\n    align-items: center;\n    align-content: center;\n    justify-content: space-between;\n    width: var(--kuc-dropdown-toggle-width, 100%);\n    cursor: pointer;\n  }\n  .kuc-dropdown-1-17-1__group__toggle:focus {\n    outline: none;\n    border: 1px solid #3498db;\n  }\n  .kuc-dropdown-1-17-1__group__toggle:disabled {\n    background-color: #d4d7d7;\n    box-shadow: none;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-dropdown-1-17-1__group__toggle__selected-item-label {\n    font-size: var(--kuc-dropdown-font-size, 14px);\n    text-align: left;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .kuc-dropdown-1-17-1__group__toggle__icon {\n    flex: none;\n    width: 38px;\n    height: 38px;\n  }\n  .kuc-dropdown-1-17-1__group__select-menu {\n    position: absolute;\n    min-width: 280px;\n    margin: 0;\n    padding: 8px 0;\n    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n    background-color: #ffffff;\n    z-index: 2000;\n    list-style: none;\n    box-sizing: border-box;\n  }\n  .kuc-dropdown-1-17-1__group__select-menu[hidden] {\n    display: none;\n  }\n  .kuc-dropdown-1-17-1__group__select-menu__item {\n    padding: 8px 16px 8px 24px;\n    line-height: 1;\n    position: relative;\n    cursor: pointer;\n    white-space: nowrap;\n    color: var(--kuc-dropdown-menu-color, #333333);\n    font-size: var(--kuc-dropdown-font-size, 14px);\n  }\n  .kuc-dropdown-1-17-1__group__select-menu__item__icon {\n    position: absolute;\n    top: 50%;\n    left: 6px;\n    margin-top: -5px;\n  }\n  .kuc-dropdown-1-17-1__group__select-menu__item[aria-selected="true"] {\n    color: var(--kuc-dropdown-menu-color-selected, #3498db);\n  }\n  .kuc-dropdown-1-17-1__group__select-menu__highlight[role="option"] {\n    background-color: #e2f2fe;\n  }\n  .kuc-dropdown-1-17-1__group__select-menu__item--disabled,\n  .kuc-dropdown-1-17-1__group__select-menu__item--disabled[aria-selected="true"] {\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n    color: #888888;\n  }\n'),bn=e}})();var gn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};const mn=517;let fn;(()=>{if(fn=window.customElements.get("kuc-field-group-1-17-1"),!fn){class e extends bi{constructor(e){super(),this.className="",this.content="",this.id="",this.label="",this.disabled=!1,this.expanded=!1,this.visible=!0,this._content="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}update(e){e.has("content")&&(this._content=ai(this.content)),super.update(e)}render(){return we`
         <div
-          class="kuc-field-group-1-17-0__group"
+          class="kuc-field-group-1-17-1__group"
           role="group"
           aria-labelledby="${this._GUID}-control"
         >
           <button
             type="button"
             id="${this._GUID}-control"
-            class="kuc-field-group-1-17-0__group__toggle"
+            class="kuc-field-group-1-17-1__group__toggle"
             aria-controls="${this._GUID}-body"
             aria-expanded="${this.expanded&&!this.disabled}"
             ?disabled="${this.disabled}"
@@ -1061,21 +1060,21 @@
             @keydown="${this._handleKeyDownButton}"
           >
             ${this._getSvgTemplate()}
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${!1}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </button>
           <div
             id="${this._GUID}-body"
-            class="kuc-field-group-1-17-0__group__body"
+            class="kuc-field-group-1-17-1__group__body"
             ?hidden="${!this.expanded||this.disabled}"
             @change="${this._handleChangeBody}"
           >
             ${this._content}
           </div>
         </div>
-      `}updated(e){e.has("content")&&(this._groupEl.style.minWidth=mn+"px",requestAnimationFrame((()=>{this._updateContainerWidth()})))}_updateContainerWidth(){if(!this._bodyEl)return;const e=this._bodyEl.hasAttribute("hidden");e&&this._bodyEl.removeAttribute("hidden");const t=this._bodyEl.offsetWidth;e&&this._bodyEl.setAttribute("hidden",""),t<=mn||(this._groupEl.style.minWidth=t+"px")}_getSvgTemplate(){return this.expanded?$e`<svg
+      `}updated(e){e.has("content")&&(this._groupEl.style.minWidth=mn+"px",requestAnimationFrame((()=>{this._updateContainerWidth()})))}_updateContainerWidth(){if(!this._bodyEl)return;const e=this._bodyEl.hasAttribute("hidden");e&&this._bodyEl.removeAttribute("hidden");const t=this._bodyEl.offsetWidth;e&&this._bodyEl.setAttribute("hidden",""),t<=mn||(this._groupEl.style.minWidth=t+"px")}_getSvgTemplate(){return this.expanded?we`<svg
             width="13"
             height="8"
             viewBox="0 0 13 8"
@@ -1088,7 +1087,7 @@
               d="M11.7122 0.5L12.5 1.03608L7.23318 7.11548L5.76682 7.11548L0.5 1.03608L1.2878 0.5L6.26504 6.19318L6.73496 6.19318L11.7122 0.5Z"
               fill="#939393"
             />
-          </svg>`:$e`<svg
+          </svg>`:we`<svg
             width="8"
             height="13"
             viewBox="0 0 8 13"
@@ -1101,20 +1100,20 @@
               d="M0.5 1.2878L1.03608 0.5L7.11548 5.76682V7.23318L1.03608 12.5L0.5 11.7122L6.19318 6.73496V6.26504L0.5 1.2878Z"
               fill="#939393"
             />
-          </svg> `}_handleChangeBody(e){e.stopPropagation()}_handleKeyDownButton(e){"Tab"!==e.key&&(e.preventDefault(),"Enter"!==e.key&&" "!==e.key||this._handleClickButton(e))}_handleClickButton(e){if(e.target!==document.activeElement&&this._toggle.focus(),this.expanded){const e=this._bodyEl.getBoundingClientRect().width;e>mn&&(this._groupEl.style.minWidth=e+"px")}else this._groupEl.style.minWidth=mn+"px";this.expanded=!this.expanded;const t={expanded:this.expanded};gi(this,"change",t)}}gn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),gn([Fe()],e.prototype,"content",void 0),gn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),gn([Fe({type:String})],e.prototype,"label",void 0),gn([Fe({type:Boolean})],e.prototype,"disabled",void 0),gn([Fe({type:Boolean})],e.prototype,"expanded",void 0),gn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),gn([Ke(".kuc-field-group-1-17-0__group")],e.prototype,"_groupEl",void 0),gn([Ke(".kuc-field-group-1-17-0__group__body")],e.prototype,"_bodyEl",void 0),gn([Ke(".kuc-field-group-1-17-0__group__toggle")],e.prototype,"_toggle",void 0),window.customElements.define("kuc-field-group-1-17-0",e),mi('\n  kuc-field-group-1-17-0 .kuc-field-group-1-17-0__group__toggle .kuc-base-label-1-17-0__text,\n  kuc-field-group-1-17-0:lang(en) .kuc-field-group-1-17-0__group__toggle .kuc-base-label-1-17-0__text {\n    font-family: sans-serif;\n  }\n  kuc-field-group-1-17-0:lang(ja) .kuc-field-group-1-17-0__group__toggle .kuc-base-label-1-17-0__text {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-field-group-1-17-0:lang(zh) .kuc-field-group-1-17-0__group__toggle .kuc-base-label-1-17-0__text {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-field-group-1-17-0:lang(zh-TW) .kuc-field-group-1-17-0__group__toggle .kuc-base-label-1-17-0__text {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-field-group-1-17-0 {\n    display: inline-table;\n  }\n  kuc-field-group-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-field-group-1-17-0__group {\n    min-width: 517px;\n    padding: 0px 8px;\n    border: 1px solid #e3e7e8;\n    background-color: #f5f5f5;\n  }\n  .kuc-field-group-1-17-0__group h3 {\n    margin: 0px;\n    padding: 0px;\n  }\n  .kuc-field-group-1-17-0__group__toggle {\n    display: flex;\n    align-items: center;\n    border-style: none;\n    position: relative;\n    outline: none;\n    margin: 12px 0px 12px 8px;\n    min-height: 34px;\n    padding: 4px 8px 4px 24px;\n    color: #333333;\n    font-size: 16px;\n    cursor: pointer;\n    border: 1px solid transparent;\n    background-color: inherit;\n    line-height: 1.5;\n  }\n  .kuc-field-group-1-17-0__group__toggle:disabled {\n    color: rgba(0, 0, 0, 0.25);\n    cursor: not-allowed;\n  }\n  .kuc-field-group-1-17-0__group__toggle:disabled .kuc-base-label-1-17-0__text {\n    color: rgba(0, 0, 0, 0.25);\n    cursor: not-allowed;\n  }\n  .kuc-field-group-1-17-0__group__toggle .kuc-base-label-1-17-0__text {\n    font-size: 16px;\n  }\n  .kuc-field-group-1-17-0__group__toggle:disabled:focus {\n    outline: 0;\n    border: 1px solid transparent;\n  }\n  .kuc-field-group-1-17-0__group__toggle:focus {\n    outline: 0;\n    border: 1px solid #3498db;\n  }\n  .kuc-field-group-1-17-0__group__toggle svg {\n    position: absolute;\n    left: 8px;\n  }\n  .kuc-field-group-1-17-0__group__body {\n    padding: 0px 8px;\n    margin-left: 0px;\n    white-space: nowrap;\n    word-wrap: normal;\n    margin-bottom: 12px;\n  }\n'),fn=e}})();var vn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let kn;(()=>{if(kn=window.customElements.get("kuc-multi-choice-1-17-0"),!kn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._DISABLED_CLASS="kuc-multi-choice-1-17-0__group__menu__item--disabled",this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}render(){return $e`
-        <div class="kuc-multi-choice-1-17-0__group">
+          </svg> `}_handleChangeBody(e){e.stopPropagation()}_handleKeyDownButton(e){"Tab"!==e.key&&(e.preventDefault(),"Enter"!==e.key&&" "!==e.key||this._handleClickButton(e))}_handleClickButton(e){if(e.target!==document.activeElement&&this._toggle.focus(),this.expanded){const e=this._bodyEl.getBoundingClientRect().width;e>mn&&(this._groupEl.style.minWidth=e+"px")}else this._groupEl.style.minWidth=mn+"px";this.expanded=!this.expanded;const t={expanded:this.expanded};gi(this,"change",t)}}gn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),gn([Ge()],e.prototype,"content",void 0),gn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),gn([Ge({type:String})],e.prototype,"label",void 0),gn([Ge({type:Boolean})],e.prototype,"disabled",void 0),gn([Ge({type:Boolean})],e.prototype,"expanded",void 0),gn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),gn([qe(".kuc-field-group-1-17-1__group")],e.prototype,"_groupEl",void 0),gn([qe(".kuc-field-group-1-17-1__group__body")],e.prototype,"_bodyEl",void 0),gn([qe(".kuc-field-group-1-17-1__group__toggle")],e.prototype,"_toggle",void 0),window.customElements.define("kuc-field-group-1-17-1",e),mi('\n  kuc-field-group-1-17-1 .kuc-field-group-1-17-1__group__toggle .kuc-base-label-1-17-1__text,\n  kuc-field-group-1-17-1:lang(en) .kuc-field-group-1-17-1__group__toggle .kuc-base-label-1-17-1__text {\n    font-family: sans-serif;\n  }\n  kuc-field-group-1-17-1:lang(ja) .kuc-field-group-1-17-1__group__toggle .kuc-base-label-1-17-1__text {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-field-group-1-17-1:lang(zh) .kuc-field-group-1-17-1__group__toggle .kuc-base-label-1-17-1__text {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-field-group-1-17-1:lang(zh-TW) .kuc-field-group-1-17-1__group__toggle .kuc-base-label-1-17-1__text {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-field-group-1-17-1 {\n    display: inline-table;\n  }\n  kuc-field-group-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-field-group-1-17-1__group {\n    min-width: 517px;\n    padding: 0px 8px;\n    border: 1px solid #e3e7e8;\n    background-color: #f5f5f5;\n  }\n  .kuc-field-group-1-17-1__group h3 {\n    margin: 0px;\n    padding: 0px;\n  }\n  .kuc-field-group-1-17-1__group__toggle {\n    display: flex;\n    align-items: center;\n    border-style: none;\n    position: relative;\n    outline: none;\n    margin: 12px 0px 12px 8px;\n    min-height: 34px;\n    padding: 4px 8px 4px 24px;\n    color: #333333;\n    font-size: 16px;\n    cursor: pointer;\n    border: 1px solid transparent;\n    background-color: inherit;\n    line-height: 1.5;\n  }\n  .kuc-field-group-1-17-1__group__toggle:disabled {\n    color: rgba(0, 0, 0, 0.25);\n    cursor: not-allowed;\n  }\n  .kuc-field-group-1-17-1__group__toggle:disabled .kuc-base-label-1-17-1__text {\n    color: rgba(0, 0, 0, 0.25);\n    cursor: not-allowed;\n  }\n  .kuc-field-group-1-17-1__group__toggle .kuc-base-label-1-17-1__text {\n    font-size: 16px;\n  }\n  .kuc-field-group-1-17-1__group__toggle:disabled:focus {\n    outline: 0;\n    border: 1px solid transparent;\n  }\n  .kuc-field-group-1-17-1__group__toggle:focus {\n    outline: 0;\n    border: 1px solid #3498db;\n  }\n  .kuc-field-group-1-17-1__group__toggle svg {\n    position: absolute;\n    left: 8px;\n  }\n  .kuc-field-group-1-17-1__group__body {\n    padding: 0px 8px;\n    margin-left: 0px;\n    white-space: nowrap;\n    word-wrap: normal;\n    margin-bottom: 12px;\n  }\n'),fn=e}})();var vn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let kn;(()=>{if(kn=window.customElements.get("kuc-multi-choice-1-17-1"),!kn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._DISABLED_CLASS="kuc-multi-choice-1-17-1__group__menu__item--disabled",this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(st),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(lt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}render(){return we`
+        <div class="kuc-multi-choice-1-17-1__group">
           <div
-            class="kuc-multi-choice-1-17-0__group__label"
+            class="kuc-multi-choice-1-17-1__group__label"
             id="${this._GUID}-label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </div>
           <div
-            class="kuc-multi-choice-1-17-0__group__menu"
+            class="kuc-multi-choice-1-17-1__group__menu"
             role="listbox"
             aria-multiselectable="true"
             aria-describedby="${this._GUID}-error"
@@ -1125,16 +1124,16 @@
           >
             ${this.items.map(((e,t)=>this._getMenuItemTemplate(e,t)))}
           </div>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
             ariaLive="assertive"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}_handleMouseDownMultiChoiceItem(e){if(this.disabled)return;const t=e.target,i=t.getAttribute("value"),n=t.dataset.index||"0";this._handleChangeValue(i,n)}_handleMouseOverMultiChoiceItem(e){if(this.disabled)return;this._itemsEl.forEach((e=>{e.classList.contains("kuc-multi-choice-1-17-0__group__menu__highlight")&&e.classList.remove("kuc-multi-choice-1-17-0__group__menu__highlight")}));const t=e.currentTarget;t.classList.add("kuc-multi-choice-1-17-0__group__menu__highlight"),this._setActiveDescendant(t.id)}_handleMouseLeaveMultiChoiceItem(e){this.disabled||(e.currentTarget.classList.remove("kuc-multi-choice-1-17-0__group__menu__highlight"),this._setActiveDescendant())}_handleKeyDownMultiChoice(e){if(!this.disabled)switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),0===this.items.length)break;this._actionHighlightPrevMenuItem();break;case"Down":case"ArrowDown":if(e.preventDefault(),0===this.items.length)break;this._actionHighlightNextMenuItem();break;case"Spacebar":case" ":e.preventDefault(),this._actionUpdateValue()}}_actionHighlightPrevMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.previousElementSibling),null===e&&(e=this._lastItemEl,null===this._highlightItemEl&&(e=this._firstItemEl));let t=!1;this._actionClearAllHighlightMenuItem();for(let i=0;i<this._itemsEl.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling,null===e&&(e=this._lastItemEl);t||(e.classList.add("kuc-multi-choice-1-17-0__group__menu__highlight"),this._setActiveDescendant(e.id))}_actionHighlightNextMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.nextElementSibling),null===e&&(e=this._firstItemEl);let t=!1;this._actionClearAllHighlightMenuItem();for(let i=0;i<this._itemsEl.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling,null===e&&(e=this._firstItemEl);t||(e.classList.add("kuc-multi-choice-1-17-0__group__menu__highlight"),this._setActiveDescendant(e.id))}_actionClearAllHighlightMenuItem(){this._itemsEl.forEach((e=>{e.classList.remove("kuc-multi-choice-1-17-0__group__menu__highlight")}))}_actionUpdateValue(){this._itemsEl.forEach((e=>{if(e.classList.contains("kuc-multi-choice-1-17-0__group__menu__highlight")){const t=e.getAttribute("value"),i=e.dataset.index||"0";this._handleChangeValue(t,i)}}))}_getMultiChoiceCheckedIconSvgTemplate(e,t){return Ce`
-        ${t?Ce`<svg
-            class="kuc-multi-choice-1-17-0__group__menu__item__icon"
+      `}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}_handleMouseDownMultiChoiceItem(e){if(this.disabled)return;const t=e.target,i=t.getAttribute("value"),n=t.dataset.index||"0";this._handleChangeValue(i,n)}_handleMouseOverMultiChoiceItem(e){if(this.disabled)return;this._itemsEl.forEach((e=>{e.classList.contains("kuc-multi-choice-1-17-1__group__menu__highlight")&&e.classList.remove("kuc-multi-choice-1-17-1__group__menu__highlight")}));const t=e.currentTarget;t.classList.add("kuc-multi-choice-1-17-1__group__menu__highlight"),this._setActiveDescendant(t.id)}_handleMouseLeaveMultiChoiceItem(e){this.disabled||(e.currentTarget.classList.remove("kuc-multi-choice-1-17-1__group__menu__highlight"),this._setActiveDescendant())}_handleKeyDownMultiChoice(e){if(!this.disabled)switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),0===this.items.length)break;this._actionHighlightPrevMenuItem();break;case"Down":case"ArrowDown":if(e.preventDefault(),0===this.items.length)break;this._actionHighlightNextMenuItem();break;case"Spacebar":case" ":e.preventDefault(),this._actionUpdateValue()}}_actionHighlightPrevMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.previousElementSibling),null===e&&(e=this._lastItemEl,null===this._highlightItemEl&&(e=this._firstItemEl));let t=!1;this._actionClearAllHighlightMenuItem();for(let i=0;i<this._itemsEl.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling,null===e&&(e=this._lastItemEl);t||(e.classList.add("kuc-multi-choice-1-17-1__group__menu__highlight"),this._setActiveDescendant(e.id))}_actionHighlightNextMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.nextElementSibling),null===e&&(e=this._firstItemEl);let t=!1;this._actionClearAllHighlightMenuItem();for(let i=0;i<this._itemsEl.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling,null===e&&(e=this._firstItemEl);t||(e.classList.add("kuc-multi-choice-1-17-1__group__menu__highlight"),this._setActiveDescendant(e.id))}_actionClearAllHighlightMenuItem(){this._itemsEl.forEach((e=>{e.classList.remove("kuc-multi-choice-1-17-1__group__menu__highlight")}))}_actionUpdateValue(){this._itemsEl.forEach((e=>{if(e.classList.contains("kuc-multi-choice-1-17-1__group__menu__highlight")){const t=e.getAttribute("value"),i=e.dataset.index||"0";this._handleChangeValue(t,i)}}))}_getMultiChoiceCheckedIconSvgTemplate(e,t){return $e`
+        ${t?$e`<svg
+            class="kuc-multi-choice-1-17-1__group__menu__item__icon"
             width="11"
             height="9"
             viewBox="0 0 11 9"
@@ -1147,9 +1146,9 @@
               d="M0 5L1.5 3L4.5 5.5L9.5 0L11 1.5L4.5 8.5L0 5Z"
               fill="${e?"#888888":"#3498db"}"
             />
-          </svg>`:""}`}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getMenuItemTemplate(e,t){const i=this._isCheckedItem(e,t),n=e.disabled||this.disabled;return $e`
+          </svg>`:""}`}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getMenuItemTemplate(e,t){const i=this._isCheckedItem(e,t),n=e.disabled||this.disabled;return we`
         <div
-          class="kuc-multi-choice-1-17-0__group__menu__item ${n?this._DISABLED_CLASS:""}"
+          class="kuc-multi-choice-1-17-1__group__menu__item ${n?this._DISABLED_CLASS:""}"
           role="option"
           aria-selected="${i}"
           aria-required="${this.requiredIcon}"
@@ -1163,7 +1162,7 @@
           ${this._getMultiChoiceCheckedIconSvgTemplate(n,i)}
           ${void 0===e.label?e.value:e.label}
         </div>
-      `}_setActiveDescendant(e){void 0!==e&&null!==this._menuEl?this._menuEl.setAttribute("aria-activedescendant",e):this._menuEl.removeAttribute("aria-activedescendant")}_handleChangeValue(e,t){const i=this.value?[...this.value]:this.value,n=this._getNewValueMapping(e,t),o=this.items.map((e=>e.value)),a=Object.values(n).filter((e=>o.indexOf(e)>-1));if(a===i)return;const s=Object.keys(n).map((e=>parseInt(e,10)));this.value=a,this.selectedIndex=s,gi(this,"change",{oldValue:i,value:a})}_getNewValueMapping(e,t){const i=parseInt(t,10),n=Object.keys(this._valueMapping),o={...this._valueMapping};return n.indexOf(t)>-1?(delete o[i],o):(o[i]=e,o)}}vn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),vn([Fe({type:String})],e.prototype,"error",void 0),vn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),vn([Fe({type:String})],e.prototype,"label",void 0),vn([Fe({type:Boolean})],e.prototype,"disabled",void 0),vn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),vn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),vn([Fe({type:Array})],e.prototype,"items",void 0),vn([Fe({type:Array})],e.prototype,"selectedIndex",void 0),vn([Fe({type:Array})],e.prototype,"value",void 0),vn([Ke(".kuc-multi-choice-1-17-0__group__menu")],e.prototype,"_menuEl",void 0),vn([Je(".kuc-multi-choice-1-17-0__group__menu__item")],e.prototype,"_itemsEl",void 0),vn([Ke(".kuc-multi-choice-1-17-0__group__menu__item")],e.prototype,"_firstItemEl",void 0),vn([Ke(".kuc-multi-choice-1-17-0__group__menu__item:last-child")],e.prototype,"_lastItemEl",void 0),vn([Ke(".kuc-multi-choice-1-17-0__group__menu__highlight")],e.prototype,"_highlightItemEl",void 0),vn([We()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-multi-choice-1-17-0",e),mi('\n  kuc-multi-choice-1-17-0,\n  kuc-multi-choice-1-17-0 *,\n  kuc-multi-choice-1-17-0:lang(en),\n  kuc-multi-choice-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-multi-choice-1-17-0:lang(ja),\n  kuc-multi-choice-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-multi-choice-1-17-0:lang(zh),\n  kuc-multi-choice-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-multi-choice-1-17-0:lang(zh-TW),\n  kuc-multi-choice-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-multi-choice-1-17-0 {\n    display: inline-table;\n    font-size: 14px;\n    color: var(--kuc-multi-choice-menu-color, #333333);\n    width: var(--kuc-multi-choice-menu-width, 180px);\n    min-width: var(--kuc-multi-choice-menu-width, 180px);\n    line-height: 1.5;\n  }\n  kuc-multi-choice-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-multi-choice-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    margin: 0px;\n  }\n  .kuc-multi-choice-1-17-0__group__label {\n    padding: 4px 0px 8px 0px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n  .kuc-multi-choice-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-multi-choice-1-17-0__group__menu {\n    position: relative;\n    background: #ffffff;\n    border: 1px solid #e3e7e8;\n    box-sizing: border-box;\n    box-shadow: 1px 1px 12px #f5f5f5 inset, -1px -1px 12px #f5f5f5 inset;\n    padding: 6px 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    height: var(--kuc-multi-choice-menu-height, auto);\n    max-height: var(--kuc-multi-choice-menu-height, 134px);\n    width: var(--kuc-multi-choice-menu-width, auto);\n    font-size: var(--kuc-multi-choice-menu-font-size, 14px);\n  }\n  .kuc-multi-choice-1-17-0__group__menu:not([disabled]):focus {\n    outline: none;\n    border: 1px solid #3498db;\n  }\n  .kuc-multi-choice-1-17-0__group__menu[disabled] {\n    background-color: #dbdcdd;\n    box-shadow: none;\n    cursor: not-allowed;\n    color: #888888;\n    outline: none;\n  }\n  .kuc-multi-choice-1-17-0__group__menu__item {\n    padding: 4px 16px;\n    margin-bottom: 2px;\n    line-height: 1;\n    position: relative;\n    white-space: nowrap;\n  }\n  .kuc-multi-choice-1-17-0__group__menu__item__icon {\n    position: absolute;\n    top: 50%;\n    left: 16px;\n    margin-top: -6px;\n    pointer-events: none;\n  }\n  .kuc-multi-choice-1-17-0__group__menu__item--disabled {\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-multi-choice-1-17-0__group__menu__item[aria-selected="true"] {\n    color: var(--kuc-multi-choice-menu-color-selected, #3498db);\n    padding-left: 32px;\n  }\n  .kuc-multi-choice-1-17-0__group__menu__item--disabled[aria-selected="true"] {\n    color: #888888;\n    padding-left: 32px;\n  }\n  .kuc-multi-choice-1-17-0__group__menu[disabled]\n    .kuc-multi-choice-1-17-0__group__menu__item[aria-selected="true"] {\n    color: #888888;\n  }\n  .kuc-multi-choice-1-17-0__group__menu__highlight[role="option"] {\n    background-color: var(--kuc-multi-choice-menu-background-color-hover, #e2f2fe);\n    cursor: pointer;\n  }\n'),kn=e}})();var yn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let xn;(()=>{if(xn=window.customElements.get("kuc-notification-1-17-0"),!xn){class e extends bi{constructor(e){super(),this.className="",this.text="",this.type="danger",this.duration=-1,this.container=document.body,this._isOpened=!1;const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this._close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this._close(),!e)return this.throwErrorAfterUpdateComplete(gt),!1}return!0}_isValidContainerElement(){return this.container instanceof HTMLElement}_handleClickCloseButton(e){this.close()}_getCloseButtonColorType(){switch(this.type){case"info":case"success":return this.type;default:return"danger"}}_getCloseButtonSvgTemplate(){return Ce`
+      `}_setActiveDescendant(e){void 0!==e&&null!==this._menuEl?this._menuEl.setAttribute("aria-activedescendant",e):this._menuEl.removeAttribute("aria-activedescendant")}_handleChangeValue(e,t){const i=this.value?[...this.value]:this.value,n=this._getNewValueMapping(e,t),o=this.items.map((e=>e.value)),a=Object.values(n).filter((e=>o.indexOf(e)>-1));if(a===i)return;const s=Object.keys(n).map((e=>parseInt(e,10)));this.value=a,this.selectedIndex=s,gi(this,"change",{oldValue:i,value:a})}_getNewValueMapping(e,t){const i=parseInt(t,10),n=Object.keys(this._valueMapping),o={...this._valueMapping};return n.indexOf(t)>-1?(delete o[i],o):(o[i]=e,o)}}vn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),vn([Ge({type:String})],e.prototype,"error",void 0),vn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),vn([Ge({type:String})],e.prototype,"label",void 0),vn([Ge({type:Boolean})],e.prototype,"disabled",void 0),vn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),vn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),vn([Ge({type:Array})],e.prototype,"items",void 0),vn([Ge({type:Array})],e.prototype,"selectedIndex",void 0),vn([Ge({type:Array})],e.prototype,"value",void 0),vn([qe(".kuc-multi-choice-1-17-1__group__menu")],e.prototype,"_menuEl",void 0),vn([Ye(".kuc-multi-choice-1-17-1__group__menu__item")],e.prototype,"_itemsEl",void 0),vn([qe(".kuc-multi-choice-1-17-1__group__menu__item")],e.prototype,"_firstItemEl",void 0),vn([qe(".kuc-multi-choice-1-17-1__group__menu__item:last-child")],e.prototype,"_lastItemEl",void 0),vn([qe(".kuc-multi-choice-1-17-1__group__menu__highlight")],e.prototype,"_highlightItemEl",void 0),vn([Fe()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-multi-choice-1-17-1",e),mi('\n  kuc-multi-choice-1-17-1,\n  kuc-multi-choice-1-17-1 *,\n  kuc-multi-choice-1-17-1:lang(en),\n  kuc-multi-choice-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-multi-choice-1-17-1:lang(ja),\n  kuc-multi-choice-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-multi-choice-1-17-1:lang(zh),\n  kuc-multi-choice-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-multi-choice-1-17-1:lang(zh-TW),\n  kuc-multi-choice-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-multi-choice-1-17-1 {\n    display: inline-table;\n    font-size: 14px;\n    color: var(--kuc-multi-choice-menu-color, #333333);\n    width: var(--kuc-multi-choice-menu-width, 180px);\n    min-width: var(--kuc-multi-choice-menu-width, 180px);\n    line-height: 1.5;\n  }\n  kuc-multi-choice-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-multi-choice-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    margin: 0px;\n  }\n  .kuc-multi-choice-1-17-1__group__label {\n    padding: 4px 0px 8px 0px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n  .kuc-multi-choice-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-multi-choice-1-17-1__group__menu {\n    position: relative;\n    background: #ffffff;\n    border: 1px solid #e3e7e8;\n    box-sizing: border-box;\n    box-shadow: 1px 1px 12px #f5f5f5 inset, -1px -1px 12px #f5f5f5 inset;\n    padding: 6px 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    height: var(--kuc-multi-choice-menu-height, auto);\n    max-height: var(--kuc-multi-choice-menu-height, 134px);\n    width: var(--kuc-multi-choice-menu-width, auto);\n    font-size: var(--kuc-multi-choice-menu-font-size, 14px);\n  }\n  .kuc-multi-choice-1-17-1__group__menu:not([disabled]):focus {\n    outline: none;\n    border: 1px solid #3498db;\n  }\n  .kuc-multi-choice-1-17-1__group__menu[disabled] {\n    background-color: #dbdcdd;\n    box-shadow: none;\n    cursor: not-allowed;\n    color: #888888;\n    outline: none;\n  }\n  .kuc-multi-choice-1-17-1__group__menu__item {\n    padding: 4px 16px;\n    margin-bottom: 2px;\n    line-height: 1;\n    position: relative;\n    white-space: nowrap;\n  }\n  .kuc-multi-choice-1-17-1__group__menu__item__icon {\n    position: absolute;\n    top: 50%;\n    left: 16px;\n    margin-top: -6px;\n    pointer-events: none;\n  }\n  .kuc-multi-choice-1-17-1__group__menu__item--disabled {\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-multi-choice-1-17-1__group__menu__item[aria-selected="true"] {\n    color: var(--kuc-multi-choice-menu-color-selected, #3498db);\n    padding-left: 32px;\n  }\n  .kuc-multi-choice-1-17-1__group__menu__item--disabled[aria-selected="true"] {\n    color: #888888;\n    padding-left: 32px;\n  }\n  .kuc-multi-choice-1-17-1__group__menu[disabled]\n    .kuc-multi-choice-1-17-1__group__menu__item[aria-selected="true"] {\n    color: #888888;\n  }\n  .kuc-multi-choice-1-17-1__group__menu__highlight[role="option"] {\n    background-color: var(--kuc-multi-choice-menu-background-color-hover, #e2f2fe);\n    cursor: pointer;\n  }\n'),kn=e}})();var yn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let xn;(()=>{if(xn=window.customElements.get("kuc-notification-1-17-1"),!xn){class e extends bi{constructor(e){super(),this.className="",this.text="",this.type="danger",this.duration=-1,this.container=document.body,this._isOpened=!1;const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this._close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this._close(),!e)return this.throwErrorAfterUpdateComplete(bt),!1}return!0}_isValidContainerElement(){return this.container instanceof HTMLElement}_handleClickCloseButton(e){this.close()}_getCloseButtonColorType(){switch(this.type){case"info":case"success":return this.type;default:return"danger"}}_getCloseButtonSvgTemplate(){return $e`
         <svg
           width="32"
           height="32"
@@ -1173,7 +1172,7 @@
         >
           <title>close button</title>
           <path
-            class="kuc-notification-1-17-0__notification__close-button__icon-background--${this._getCloseButtonColorType()}"
+            class="kuc-notification-1-17-1__notification__close-button__icon-background--${this._getCloseButtonColorType()}"
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z"
@@ -1185,18 +1184,18 @@
             fill="white"
           />
         </svg>
-      `}_setAutoCloseTimer(){!Number.isFinite(this.duration)||this.duration<0||(this._clearAutoCloseTimer(),this._timeoutID=window.setTimeout((()=>{this.close()}),this.duration))}_clearAutoCloseTimer(){this._timeoutID&&window.clearTimeout(this._timeoutID)}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.container.appendChild(this),this.performUpdate(),this.classList.remove("kuc-notification-fadeout-1-17-0"),this.classList.add("kuc-notification-fadein-1-17-0"),this._isOpened=!0,this._setAutoCloseTimer()}_close(){this._isOpened=!1,this.classList.remove("kuc-notification-fadein-1-17-0"),this.classList.add("kuc-notification-fadeout-1-17-0"),this._clearAutoCloseTimer()}close(){this._close(),gi(this,"close")}render(){return $e`
+      `}_setAutoCloseTimer(){!Number.isFinite(this.duration)||this.duration<0||(this._clearAutoCloseTimer(),this._timeoutID=window.setTimeout((()=>{this.close()}),this.duration))}_clearAutoCloseTimer(){this._timeoutID&&window.clearTimeout(this._timeoutID)}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.container.appendChild(this),this.performUpdate(),this.classList.remove("kuc-notification-fadeout-1-17-1"),this.classList.add("kuc-notification-fadein-1-17-1"),this._isOpened=!0,this._setAutoCloseTimer()}_close(){this._isOpened=!1,this.classList.remove("kuc-notification-fadein-1-17-1"),this.classList.add("kuc-notification-fadeout-1-17-1"),this._clearAutoCloseTimer()}close(){this._close(),gi(this,"close")}render(){return we`
         <div
-          class="kuc-notification-1-17-0__notification kuc-notification-1-17-0__notification--${this.type}"
+          class="kuc-notification-1-17-1__notification kuc-notification-1-17-1__notification--${this.type}"
         >
           <pre
-            class="kuc-notification-1-17-0__notification__title"
+            class="kuc-notification-1-17-1__notification__title"
             aria-live="assertive"
             role="${this._isOpened?"alert":""}"
           ><!--
           -->${this.text}</pre>
           <button
-            class="kuc-notification-1-17-0__notification__close-button"
+            class="kuc-notification-1-17-1__notification__close-button"
             type="button"
             aria-label="close"
             @click="${this._handleClickCloseButton}"
@@ -1204,9 +1203,9 @@
             ${this._getCloseButtonSvgTemplate()}
           </button>
         </div>
-      `}}yn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),yn([Fe({type:String})],e.prototype,"text",void 0),yn([Fe({type:String})],e.prototype,"type",void 0),yn([Fe({type:Number})],e.prototype,"duration",void 0),yn([Fe()],e.prototype,"container",void 0),yn([We()],e.prototype,"_isOpened",void 0),window.customElements.define("kuc-notification-1-17-0",e),mi('\n  kuc-notification-1-17-0,\n  kuc-notification-1-17-0 *,\n  kuc-notification-1-17-0:lang(en),\n  kuc-notification-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-notification-1-17-0:lang(ja),\n  kuc-notification-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-notification-1-17-0:lang(zh),\n  kuc-notification-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-notification-1-17-0:lang(zh-TW),\n  kuc-notification-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-notification-1-17-0 {\n    color: #ffffff;\n    font-weight: 700;\n    text-align: center;\n    text-shadow: 1px -1px 0 rgba(0, 0, 0, 0.5);\n  }\n  kuc-notification-1-17-0 {\n    position: fixed;\n    display: inline-block;\n    top: 0;\n    left: 0;\n    width: 100%;\n    line-height: 1.5;\n    z-index: 10000;\n    margin-top: 16px;\n    pointer-events: none;\n    visibility: hidden;\n    animation-fill-mode: forwards;\n  }\n  .kuc-notification-fadein-1-17-0 {\n    animation-name: kuc-notification-fade-in-1-17-0;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n  }\n  .kuc-notification-fadeout-1-17-0 {\n    animation-name: kuc-notification-fade-out-1-17-0;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n  }\n  .kuc-notification-1-17-0__notification {\n    position: relative;\n    display: inline-block;\n    text-align: left;\n    padding: 16px 56px 16px 24px;\n    background-color: var(--kuc-notification-background-color, #e74c3c);\n  }\n  .kuc-notification-1-17-0__notification--info {\n    background-color: var(--kuc-notification-background-color, #3498db);\n  }\n  .kuc-notification-1-17-0__notification--success {\n    background-color: var(--kuc-notification-background-color, #91c36c);\n  }\n  .kuc-notification-1-17-0__notification--danger {\n    background-color: var(--kuc-notification-background-color, #e74c3c);\n  }\n  .kuc-notification-1-17-0__notification__title {\n    display: flex;\n    align-items: center;\n    margin: 0;\n    font-size: var(--kuc-notification-font-size, 16px);\n    color: var(--kuc-notification-color, #ffffff);\n    max-width: 500px;\n    min-height: 24px;\n    word-break: break-word;\n    white-space: pre-wrap;\n  }\n  .kuc-notification-1-17-0__notification__close-button {\n    position: absolute;\n    top: 4px;\n    right: 0;\n    width: 48px;\n    height: 48px;\n    background-color: transparent;\n    outline: none;\n    border: none;\n    pointer-events: auto;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 0;\n  }\n  .kuc-notification-1-17-0__notification__close-button__icon-background--danger {\n    fill: var(--kuc-notification-close-button-background-color, #c65040);\n  }\n  .kuc-notification-1-17-0__notification__close-button__icon-background--info {\n    fill: var(--kuc-notification-close-button-background-color, #448aca);\n  }\n  .kuc-notification-1-17-0__notification__close-button__icon-background--success {\n    fill: var(--kuc-notification-close-button-background-color, #9bbc65);\n  }\n  @keyframes kuc-notification-fade-in-1-17-0 {\n    0% {\n      visibility: visible;\n      top: -56px;\n    }\n    100% {\n      visibility: visible;\n      top: 0;\n    }\n  }\n  @keyframes kuc-notification-fade-out-1-17-0 {\n    0% {\n      visibility: visible;\n      top: 0;\n    }\n    10% {\n      visibility: visible;\n      top: 14px;\n    }\n    100% {\n      top: -56px;\n    }\n  }\n'),xn=e}})();var wn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let $n;(()=>{if($n=window.customElements.get("kuc-radio-button-1-17-0"),!$n){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.itemLayout="horizontal",this.label="",this.value="",this.selectedIndex=-1,this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(lt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(ut),1))}_findItemToFocus(){let e=-1;for(let t=0;t<this.items.length;t++){const i=this.items[t];i.disabled||(this.selectedIndex!==t||i.value!==this.value?-1===e&&(e=t):e=t)}return e}willUpdate(e){if(e.has("value")){if(""!==this.value)return;this.selectedIndex=-1}}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.value,n=t.dataset.index||"0",o=parseInt(n,10);if(this.value===i&&this.selectedIndex===o)return;const a={oldValue:this.value,value:i};this.value=i,this.selectedIndex=o,gi(this,"change",a)}_handleFocusInput(e){e.target.parentNode.setAttribute("focused","")}_handleBlurInput(e){e.target.parentNode.removeAttribute("focused")}_getRadioIconSvgTemplate(e,t){return Ce`
+      `}}yn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),yn([Ge({type:String})],e.prototype,"text",void 0),yn([Ge({type:String})],e.prototype,"type",void 0),yn([Ge({type:Number})],e.prototype,"duration",void 0),yn([Ge()],e.prototype,"container",void 0),yn([Fe()],e.prototype,"_isOpened",void 0),window.customElements.define("kuc-notification-1-17-1",e),mi('\n  kuc-notification-1-17-1,\n  kuc-notification-1-17-1 *,\n  kuc-notification-1-17-1:lang(en),\n  kuc-notification-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-notification-1-17-1:lang(ja),\n  kuc-notification-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-notification-1-17-1:lang(zh),\n  kuc-notification-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-notification-1-17-1:lang(zh-TW),\n  kuc-notification-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-notification-1-17-1 {\n    color: #ffffff;\n    font-weight: 700;\n    text-align: center;\n    text-shadow: 1px -1px 0 rgba(0, 0, 0, 0.5);\n  }\n  kuc-notification-1-17-1 {\n    position: fixed;\n    display: inline-block;\n    top: 0;\n    left: 0;\n    width: 100%;\n    line-height: 1.5;\n    z-index: 10000;\n    margin-top: 16px;\n    pointer-events: none;\n    visibility: hidden;\n    animation-fill-mode: forwards;\n  }\n  .kuc-notification-fadein-1-17-1 {\n    animation-name: kuc-notification-fade-in-1-17-1;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n  }\n  .kuc-notification-fadeout-1-17-1 {\n    animation-name: kuc-notification-fade-out-1-17-1;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n  }\n  .kuc-notification-1-17-1__notification {\n    position: relative;\n    display: inline-block;\n    text-align: left;\n    padding: 16px 56px 16px 24px;\n    background-color: var(--kuc-notification-background-color, #e74c3c);\n  }\n  .kuc-notification-1-17-1__notification--info {\n    background-color: var(--kuc-notification-background-color, #3498db);\n  }\n  .kuc-notification-1-17-1__notification--success {\n    background-color: var(--kuc-notification-background-color, #91c36c);\n  }\n  .kuc-notification-1-17-1__notification--danger {\n    background-color: var(--kuc-notification-background-color, #e74c3c);\n  }\n  .kuc-notification-1-17-1__notification__title {\n    display: flex;\n    align-items: center;\n    margin: 0;\n    font-size: var(--kuc-notification-font-size, 16px);\n    color: var(--kuc-notification-color, #ffffff);\n    max-width: 500px;\n    min-height: 24px;\n    word-break: break-word;\n    white-space: pre-wrap;\n  }\n  .kuc-notification-1-17-1__notification__close-button {\n    position: absolute;\n    top: 4px;\n    right: 0;\n    width: 48px;\n    height: 48px;\n    background-color: transparent;\n    outline: none;\n    border: none;\n    pointer-events: auto;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 0;\n  }\n  .kuc-notification-1-17-1__notification__close-button__icon-background--danger {\n    fill: var(--kuc-notification-close-button-background-color, #c65040);\n  }\n  .kuc-notification-1-17-1__notification__close-button__icon-background--info {\n    fill: var(--kuc-notification-close-button-background-color, #448aca);\n  }\n  .kuc-notification-1-17-1__notification__close-button__icon-background--success {\n    fill: var(--kuc-notification-close-button-background-color, #9bbc65);\n  }\n  @keyframes kuc-notification-fade-in-1-17-1 {\n    0% {\n      visibility: visible;\n      top: -56px;\n    }\n    100% {\n      visibility: visible;\n      top: 0;\n    }\n  }\n  @keyframes kuc-notification-fade-out-1-17-1 {\n    0% {\n      visibility: visible;\n      top: 0;\n    }\n    10% {\n      visibility: visible;\n      top: 14px;\n    }\n    100% {\n      top: -56px;\n    }\n  }\n'),xn=e}})();var wn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let $n;(()=>{if($n=window.customElements.get("kuc-radio-button-1-17-1"),!$n){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.itemLayout="horizontal",this.label="",this.value="",this.selectedIndex=-1,this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}_findItemToFocus(){let e=-1;for(let t=0;t<this.items.length;t++){const i=this.items[t];i.disabled||(this.selectedIndex!==t||i.value!==this.value?-1===e&&(e=t):e=t)}return e}willUpdate(e){if(e.has("value")){if(""!==this.value)return;this.selectedIndex=-1}}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.value,n=t.dataset.index||"0",o=parseInt(n,10);if(this.value===i&&this.selectedIndex===o)return;const a={oldValue:this.value,value:i};this.value=i,this.selectedIndex=o,gi(this,"change",a)}_handleFocusInput(e){e.target.parentNode.setAttribute("focused","")}_handleBlurInput(e){e.target.parentNode.removeAttribute("focused")}_getRadioIconSvgTemplate(e,t){return $e`
     <svg
-      class="kuc-radio-button-1-17-0__group__select-menu__item__label__icon"
+      class="kuc-radio-button-1-17-1__group__select-menu__item__label__icon"
       width="21"
       height="21"
       viewBox="0 0 21 21"
@@ -1219,11 +1218,11 @@
         r="10"
         fill="white"
         stroke="#e3e7e8" stroke-width="1"/>
-      ${t?Ce`<circle cx="10.5" cy="10.5" r="6.5" fill="${e?"#e3e7e8":"#3498db"}"/>`:""}
+      ${t?$e`<circle cx="10.5" cy="10.5" r="6.5" fill="${e?"#e3e7e8":"#3498db"}"/>`:""}
     </svg>
-  `}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t),n=e.disabled||this.disabled,o=void 0!==e.value?e.value:"",a=t===this._findItemToFocus()?"0":"-1";return $e`
+  `}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t),n=e.disabled||this.disabled,o=void 0!==e.value?e.value:"",a=t===this._findItemToFocus()?"0":"-1";return we`
         <div
-          class="kuc-radio-button-1-17-0__group__select-menu__item"
+          class="kuc-radio-button-1-17-1__group__select-menu__item"
           itemLayout="${this.itemLayout}"
         >
           <input
@@ -1232,7 +1231,7 @@
             aria-describedby="${this._GUID}-error"
             data-index="${t}"
             id="${this._GUID}-item-${t}"
-            class="kuc-radio-button-1-17-0__group__select-menu__item__input"
+            class="kuc-radio-button-1-17-1__group__select-menu__item__input"
             name="${this._GUID}-group"
             value="${o}"
             tabindex="${a}"
@@ -1243,43 +1242,43 @@
             @blur="${this._handleBlurInput}"
           />
           <label
-            class="kuc-radio-button-1-17-0__group__select-menu__item__label"
+            class="kuc-radio-button-1-17-1__group__select-menu__item__label"
             for="${this._GUID}-item-${t}"
             >${this._getRadioIconSvgTemplate(n,i)}${void 0===e.label?e.value:e.label}
           </label>
         </div>
-      `}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}render(){return $e`
+      `}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}render(){return we`
         <div
-          class="kuc-radio-button-1-17-0__group"
+          class="kuc-radio-button-1-17-1__group"
           role="radiogroup"
           aria-labelledby="${this._GUID}-group"
         >
-          <div class="kuc-radio-button-1-17-0__group__label" ?hidden="${!this.label}">
-            <kuc-base-label-1-17-0
+          <div class="kuc-radio-button-1-17-1__group__label" ?hidden="${!this.label}">
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .guid="${this._GUID}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </div>
           <div
-            class="kuc-radio-button-1-17-0__group__select-menu"
+            class="kuc-radio-button-1-17-1__group__select-menu"
             ?borderVisible="${this.borderVisible}"
             itemLayout="${this.itemLayout}"
           >
             ${this.items.map(((e,t)=>this._getItemTemplate(e,t)))}
           </div>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
             ariaLive="assertive"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}updated(){this._inputEls.forEach(((e,t)=>{e.checked=this.value===e.value&&t===this.selectedIndex}))}_getSelectedIndex(){if(!this.value)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}}wn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),wn([Fe({type:String})],e.prototype,"error",void 0),wn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),wn([Fe({type:String})],e.prototype,"itemLayout",void 0),wn([Fe({type:String})],e.prototype,"label",void 0),wn([Fe({type:String})],e.prototype,"value",void 0),wn([Fe({type:Number})],e.prototype,"selectedIndex",void 0),wn([Fe({type:Boolean})],e.prototype,"borderVisible",void 0),wn([Fe({type:Boolean})],e.prototype,"disabled",void 0),wn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),wn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),wn([Fe({type:Array})],e.prototype,"items",void 0),wn([Je(".kuc-radio-button-1-17-0__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),window.customElements.define("kuc-radio-button-1-17-0",e),mi('\n  kuc-radio-button-1-17-0,\n  kuc-radio-button-1-17-0 *,\n  kuc-radio-button-1-17-0:lang(en),\n  kuc-radio-button-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-radio-button-1-17-0:lang(ja),\n  kuc-radio-button-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-radio-button-1-17-0:lang(zh),\n  kuc-radio-button-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-radio-button-1-17-0:lang(zh-TW),\n  kuc-radio-button-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-radio-button-1-17-0 {\n    font-size: 14px;\n    color: #333333;\n    display: inline-table;\n    width: var(--kuc-radio-button-menu-width, 239px);\n    min-width: var(--kuc-radio-button-menu-width, 239px);\n    vertical-align: top;\n    line-height: 1.5;\n  }\n\n  kuc-radio-button-1-17-0[hidden] {\n    display: none;\n  }\n\n  .kuc-radio-button-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    margin: 0px;\n    width: 100%;\n  }\n\n  .kuc-radio-button-1-17-0__group__label {\n    display: inline-block;\n    padding: 4px 0 8px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-radio-button-1-17-0__group__label[hidden] {\n    display: none;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu {\n    display: flex;\n    align-items: flex-start;\n    width: var(--kuc-radio-button-menu-width, 100%);\n    height: var(--kuc-radio-button-menu-height);\n    color: var(--kuc-radio-button-menu-color, #333333);\n    font-size: var(--kuc-radio-button-menu-font-size, 14px);\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu[itemlayout="vertical"] {\n    display: block;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu[bordervisible] {\n    border-color: #e3e7e8;\n    border-width: 1px;\n    border-style: solid;\n    padding-top: 4px;\n    box-sizing: border-box;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item {\n    margin-left: 4px;\n    margin-bottom: 4px;\n    margin-right: 16px;\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    display: flex;\n    align-items: center;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item[focused] {\n    border: 1px solid #3498db;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item__input:hover\n    + .kuc-radio-button-1-17-0__group__select-menu__item__label {\n    color: var(--kuc-radio-button-menu-color-hover, #666666);\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item__label__icon {\n    position: absolute;\n    left: -30px;\n    box-sizing: border-box;\n    width: 21px;\n    height: 21px;\n    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;\n    content: "";\n    border-radius: 9px;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item__input[disabled]\n    + .kuc-radio-button-1-17-0__group__select-menu__item__label {\n    color: #888888;\n    cursor: not-allowed;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item__label {\n    cursor: pointer;\n    position: relative;\n    margin-left: 32px;\n    display: flex;\n    align-items: center;\n    vertical-align: middle;\n    white-space: nowrap;\n    line-height: 1.2;\n    min-height: 24px;\n  }\n'),$n=e}})();var Cn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let In;(()=>{if(In=window.customElements.get("kuc-base-pagination-1-17-0"),!In){class e extends bi{constructor(){super(...arguments),this.pagePosition=1,this.rowsPerPage=5,this.total=1,this.isNext=!0,this.isPrev=!0,this.visible=!0}render(){return $e`
-        <div class="kuc-base-pagination-1-17-0__group" ?hidden="${!this.visible}">
+      `}updated(){this._inputEls.forEach(((e,t)=>{e.checked=this.value===e.value&&t===this.selectedIndex}))}_getSelectedIndex(){if(!this.value)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}}wn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),wn([Ge({type:String})],e.prototype,"error",void 0),wn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),wn([Ge({type:String})],e.prototype,"itemLayout",void 0),wn([Ge({type:String})],e.prototype,"label",void 0),wn([Ge({type:String})],e.prototype,"value",void 0),wn([Ge({type:Number})],e.prototype,"selectedIndex",void 0),wn([Ge({type:Boolean})],e.prototype,"borderVisible",void 0),wn([Ge({type:Boolean})],e.prototype,"disabled",void 0),wn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),wn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),wn([Ge({type:Array})],e.prototype,"items",void 0),wn([Ye(".kuc-radio-button-1-17-1__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),window.customElements.define("kuc-radio-button-1-17-1",e),mi('\n  kuc-radio-button-1-17-1,\n  kuc-radio-button-1-17-1 *,\n  kuc-radio-button-1-17-1:lang(en),\n  kuc-radio-button-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-radio-button-1-17-1:lang(ja),\n  kuc-radio-button-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-radio-button-1-17-1:lang(zh),\n  kuc-radio-button-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-radio-button-1-17-1:lang(zh-TW),\n  kuc-radio-button-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-radio-button-1-17-1 {\n    font-size: 14px;\n    color: #333333;\n    display: inline-table;\n    width: var(--kuc-radio-button-menu-width, 239px);\n    min-width: var(--kuc-radio-button-menu-width, 239px);\n    vertical-align: top;\n    line-height: 1.5;\n  }\n\n  kuc-radio-button-1-17-1[hidden] {\n    display: none;\n  }\n\n  .kuc-radio-button-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    margin: 0px;\n    width: 100%;\n  }\n\n  .kuc-radio-button-1-17-1__group__label {\n    display: inline-block;\n    padding: 4px 0 8px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-radio-button-1-17-1__group__label[hidden] {\n    display: none;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu {\n    display: flex;\n    align-items: flex-start;\n    width: var(--kuc-radio-button-menu-width, 100%);\n    height: var(--kuc-radio-button-menu-height);\n    color: var(--kuc-radio-button-menu-color, #333333);\n    font-size: var(--kuc-radio-button-menu-font-size, 14px);\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu[itemlayout="vertical"] {\n    display: block;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu[bordervisible] {\n    border-color: #e3e7e8;\n    border-width: 1px;\n    border-style: solid;\n    padding-top: 4px;\n    box-sizing: border-box;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item {\n    margin-left: 4px;\n    margin-bottom: 4px;\n    margin-right: 16px;\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    display: flex;\n    align-items: center;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item[focused] {\n    border: 1px solid #3498db;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item__input:hover\n    + .kuc-radio-button-1-17-1__group__select-menu__item__label {\n    color: var(--kuc-radio-button-menu-color-hover, #666666);\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item__label__icon {\n    position: absolute;\n    left: -30px;\n    box-sizing: border-box;\n    width: 21px;\n    height: 21px;\n    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;\n    content: "";\n    border-radius: 9px;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item__input[disabled]\n    + .kuc-radio-button-1-17-1__group__select-menu__item__label {\n    color: #888888;\n    cursor: not-allowed;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item__label {\n    cursor: pointer;\n    position: relative;\n    margin-left: 32px;\n    display: flex;\n    align-items: center;\n    vertical-align: middle;\n    white-space: nowrap;\n    line-height: 1.2;\n    min-height: 24px;\n  }\n'),$n=e}})();var Cn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let In;(()=>{if(In=window.customElements.get("kuc-base-pagination-1-17-1"),!In){class e extends bi{constructor(){super(...arguments),this.pagePosition=1,this.rowsPerPage=5,this.total=1,this.isNext=!0,this.isPrev=!0,this.visible=!0}render(){return we`
+        <div class="kuc-base-pagination-1-17-1__group" ?hidden="${!this.visible}">
           <button
             title="previous"
-            class="kuc-base-pagination-1-17-0__group__pager-prev${this.isPrev?"":" kuc-base-pagination-1-17-0__group__pager-disable"}"
+            class="kuc-base-pagination-1-17-1__group__pager-prev${this.isPrev?"":" kuc-base-pagination-1-17-1__group__pager-disable"}"
             type="button"
             @click="${this._handleClickPrevButton}"
             @focus="${this._handleFocusPrevButton}"
@@ -1290,7 +1289,7 @@
             ${this._getPrevButtonSvgTemplate()}</button
           >${this._getCurrentPageNumberTemplate()}<button
             title="next"
-            class="kuc-base-pagination-1-17-0__group__pager-next${this.isNext?"":" kuc-base-pagination-1-17-0__group__pager-disable"}"
+            class="kuc-base-pagination-1-17-1__group__pager-next${this.isNext?"":" kuc-base-pagination-1-17-1__group__pager-disable"}"
             type="button"
             @click="${this._handleClickNextButton}"
             @focus="${this._handleFocusNextButton}"
@@ -1301,7 +1300,7 @@
             ${this._getNextButtonSvgTemplate()}
           </button>
         </div>
-      `}_handleClickPrevButton(e){e.stopPropagation(),gi(this,"kuc:pagination-click-prev")}_handleFocusPrevButton(){this._prevButtonEl.classList.add("kuc-base-pagination-1-17-0__group__pager--focus")}_handleBlurPrevButton(){this._prevButtonEl.classList.remove("kuc-base-pagination-1-17-0__group__pager--focus")}_handleMouseOverPrevButton(){this._prevButtonEl.classList.add("kuc-base-pagination-1-17-0__group__pager--horver")}_handleMouseLeavePrevButton(){this._prevButtonEl.classList.remove("kuc-base-pagination-1-17-0__group__pager--horver")}_handleClickNextButton(e){e.stopPropagation(),gi(this,"kuc:pagination-click-next")}_handleFocusNextButton(){this._nextButtonEl.classList.add("kuc-base-pagination-1-17-0__group__pager--focus")}_handleBlurNextButton(){this._nextButtonEl.classList.remove("kuc-base-pagination-1-17-0__group__pager--focus")}_handleMouseOverNextButton(){this._nextButtonEl.classList.add("kuc-base-pagination-1-17-0__group__pager--horver")}_handleMouseLeaveNextButton(){this._nextButtonEl.classList.remove("kuc-base-pagination-1-17-0__group__pager--horver")}_getPrevButtonSvgTemplate(){return Ce`
+      `}_handleClickPrevButton(e){e.stopPropagation(),gi(this,"kuc:pagination-click-prev")}_handleFocusPrevButton(){this._prevButtonEl.classList.add("kuc-base-pagination-1-17-1__group__pager--focus")}_handleBlurPrevButton(){this._prevButtonEl.classList.remove("kuc-base-pagination-1-17-1__group__pager--focus")}_handleMouseOverPrevButton(){this._prevButtonEl.classList.add("kuc-base-pagination-1-17-1__group__pager--horver")}_handleMouseLeavePrevButton(){this._prevButtonEl.classList.remove("kuc-base-pagination-1-17-1__group__pager--horver")}_handleClickNextButton(e){e.stopPropagation(),gi(this,"kuc:pagination-click-next")}_handleFocusNextButton(){this._nextButtonEl.classList.add("kuc-base-pagination-1-17-1__group__pager--focus")}_handleBlurNextButton(){this._nextButtonEl.classList.remove("kuc-base-pagination-1-17-1__group__pager--focus")}_handleMouseOverNextButton(){this._nextButtonEl.classList.add("kuc-base-pagination-1-17-1__group__pager--horver")}_handleMouseLeaveNextButton(){this._nextButtonEl.classList.remove("kuc-base-pagination-1-17-1__group__pager--horver")}_getPrevButtonSvgTemplate(){return $e`
         <svg
           width="9"
           height="15"
@@ -1315,7 +1314,7 @@
             fill="#888888"
           />
         </svg>
-      `}_getNextButtonSvgTemplate(){return Ce`
+      `}_getNextButtonSvgTemplate(){return $e`
       <svg
         width="9"
         height="15"
@@ -1329,35 +1328,35 @@
           fill="#888888"
         />
       </svg>
-      `}_getCurrentPageNumberTemplate(){const e=this._createCurrentPageInfo(),t=`${e.firstNum} - ${e.lastNum} / ${this.total}`;return $e`<span class="kuc-base-pagination-1-17-0__group__pager-current"
+      `}_getCurrentPageNumberTemplate(){const e=this._createCurrentPageInfo(),t=`${e.firstNum} - ${e.lastNum} / ${this.total}`;return we`<span class="kuc-base-pagination-1-17-1__group__pager-current"
         >${t}</span
-      >`}_createCurrentPageInfo(){const e=(this.pagePosition-1)*this.rowsPerPage+1;let t=this.pagePosition*this.rowsPerPage;return t=t>this.total?this.total:t,{firstNum:e,lastNum:t}}}Cn([Fe({type:Number})],e.prototype,"pagePosition",void 0),Cn([Fe({type:Number})],e.prototype,"rowsPerPage",void 0),Cn([Fe({type:Number})],e.prototype,"total",void 0),Cn([Fe({type:Boolean})],e.prototype,"isNext",void 0),Cn([Fe({type:Boolean})],e.prototype,"isPrev",void 0),Cn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Cn([Ke(".kuc-base-pagination-1-17-0__group__pager-prev")],e.prototype,"_prevButtonEl",void 0),Cn([Ke(".kuc-base-pagination-1-17-0__group__pager-next")],e.prototype,"_nextButtonEl",void 0),window.customElements.define("kuc-base-pagination-1-17-0",e),mi("\n  .kuc-base-pagination-1-17-0__group {\n    margin-top: 10px;\n  }\n  .kuc-base-pagination-1-17-0__group button {\n    cursor: pointer;\n  }\n  .kuc-base-pagination-1-17-0__group__pager-prev {\n    border: none;\n    background-color: transparent;\n    visibility: visible;\n    height: 23px;\n    vertical-align: middle;\n  }\n  .kuc-base-pagination-1-17-0__group__pager-next {\n    border: none;\n    background-color: transparent;\n    visibility: visible;\n    height: 23px;\n    vertical-align: middle;\n  }\n  .kuc-base-pagination-1-17-0__group__pager-next:hover svg path,\n  .kuc-base-pagination-1-17-0__group__pager-prev:hover svg path,\n  .kuc-base-pagination-1-17-0__group__pager-next:focus-visible svg path,\n  .kuc-base-pagination-1-17-0__group__pager-prev:focus-visible svg path\n  {\n    fill: #3498db;\n  }\n  .kuc-base-pagination-1-17-0__group__pager--focus,\n  .kuc-base-pagination-1-17-0__group__pager-next:focus-visible,\n  .kuc-base-pagination-1-17-0__group__pager-prev:focus-visible {\n    outline: 1px solid #3498db;\n  }\n  .kuc-base-pagination-1-17-0__group__pager--horver svg path {\n    fill: #3498db;\n  }\n  .kuc-base-pagination-1-17-0__group__pager-next svg,\n  .kuc-base-pagination-1-17-0__group__pager-prev svg {\n    margin-top: 3px;\n  }\n  .kuc-base-pagination-1-17-0__group__pager-disable {\n    visibility: hidden;\n  }\n  .kuc-base-pagination-1-17-0__group__pager-current {\n    display: inline-block;\n    height: 23px;\n    line-height: 23px;\n    vertical-align: middle;\n    font-size: 14px;\n    color: #333333;\n  }\n"),In=e}})();var En=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Sn;(()=>{if(Sn=window.customElements.get("kuc-readonly-table-1-17-0"),!Sn){class e extends bi{constructor(e){if(super(),this.className="",this.id="",this.label="",this.columns=[],this.data=[],this.pagination=!0,this.rowsPerPage=5,this.visible=!0,this._pagePosition=1,this._columnOrder=[],!e)return;const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return e.has("columns")&&!Ti(this.columns)?(this.throwErrorAfterUpdateComplete(ct),!1):e.has("data")&&!Ti(this.data)?(this.throwErrorAfterUpdateComplete(bt),!1):!(e.has("rowsPerPage")&&!Ei(this.rowsPerPage)&&(this.throwErrorAfterUpdateComplete(pt),1))}willUpdate(e){e.has("columns")&&(this._columnOrder=[],this.columns.map((e=>this._columnOrder.push(e.field?e.field:"")))),e.has("rowsPerPage")&&(this.rowsPerPage=Math.round(this.rowsPerPage))}render(){const e=this._createDisplayData();return!this.columns||this.columns.length<1?$e`
-            <table class="kuc-readonly-table-1-17-0__table">
+      >`}_createCurrentPageInfo(){const e=(this.pagePosition-1)*this.rowsPerPage+1;let t=this.pagePosition*this.rowsPerPage;return t=t>this.total?this.total:t,{firstNum:e,lastNum:t}}}Cn([Ge({type:Number})],e.prototype,"pagePosition",void 0),Cn([Ge({type:Number})],e.prototype,"rowsPerPage",void 0),Cn([Ge({type:Number})],e.prototype,"total",void 0),Cn([Ge({type:Boolean})],e.prototype,"isNext",void 0),Cn([Ge({type:Boolean})],e.prototype,"isPrev",void 0),Cn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Cn([qe(".kuc-base-pagination-1-17-1__group__pager-prev")],e.prototype,"_prevButtonEl",void 0),Cn([qe(".kuc-base-pagination-1-17-1__group__pager-next")],e.prototype,"_nextButtonEl",void 0),window.customElements.define("kuc-base-pagination-1-17-1",e),mi("\n  .kuc-base-pagination-1-17-1__group {\n    margin-top: 10px;\n  }\n  .kuc-base-pagination-1-17-1__group button {\n    cursor: pointer;\n  }\n  .kuc-base-pagination-1-17-1__group__pager-prev {\n    border: none;\n    background-color: transparent;\n    visibility: visible;\n    height: 23px;\n    vertical-align: middle;\n  }\n  .kuc-base-pagination-1-17-1__group__pager-next {\n    border: none;\n    background-color: transparent;\n    visibility: visible;\n    height: 23px;\n    vertical-align: middle;\n  }\n  .kuc-base-pagination-1-17-1__group__pager-next:hover svg path,\n  .kuc-base-pagination-1-17-1__group__pager-prev:hover svg path,\n  .kuc-base-pagination-1-17-1__group__pager-next:focus-visible svg path,\n  .kuc-base-pagination-1-17-1__group__pager-prev:focus-visible svg path\n  {\n    fill: #3498db;\n  }\n  .kuc-base-pagination-1-17-1__group__pager--focus,\n  .kuc-base-pagination-1-17-1__group__pager-next:focus-visible,\n  .kuc-base-pagination-1-17-1__group__pager-prev:focus-visible {\n    outline: 1px solid #3498db;\n  }\n  .kuc-base-pagination-1-17-1__group__pager--horver svg path {\n    fill: #3498db;\n  }\n  .kuc-base-pagination-1-17-1__group__pager-next svg,\n  .kuc-base-pagination-1-17-1__group__pager-prev svg {\n    margin-top: 3px;\n  }\n  .kuc-base-pagination-1-17-1__group__pager-disable {\n    visibility: hidden;\n  }\n  .kuc-base-pagination-1-17-1__group__pager-current {\n    display: inline-block;\n    height: 23px;\n    line-height: 23px;\n    vertical-align: middle;\n    font-size: 14px;\n    color: #333333;\n  }\n"),In=e}})();var En=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Sn;(()=>{if(Sn=window.customElements.get("kuc-readonly-table-1-17-1"),!Sn){class e extends bi{constructor(e){if(super(),this.className="",this.id="",this.label="",this.columns=[],this.data=[],this.pagination=!0,this.rowsPerPage=5,this.visible=!0,this._pagePosition=1,this._columnOrder=[],!e)return;const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return e.has("columns")&&!Ti(this.columns)?(this.throwErrorAfterUpdateComplete(ut),!1):e.has("data")&&!Ti(this.data)?(this.throwErrorAfterUpdateComplete(pt),!1):!(e.has("rowsPerPage")&&!Ei(this.rowsPerPage)&&(this.throwErrorAfterUpdateComplete(_t),1))}willUpdate(e){e.has("columns")&&(this._columnOrder=[],this.columns.map((e=>this._columnOrder.push(e.field?e.field:"")))),e.has("rowsPerPage")&&(this.rowsPerPage=Math.round(this.rowsPerPage))}render(){const e=this._createDisplayData();return!this.columns||this.columns.length<1?we`
+            <table class="kuc-readonly-table-1-17-1__table">
               <caption
-                class="kuc-readonly-table-1-17-0__table__label kuc-readonly-table-1-17-0__table__label--no-column"
+                class="kuc-readonly-table-1-17-1__table__label kuc-readonly-table-1-17-1__table__label--no-column"
                 ?hidden="${!this.label}"
               >
                 ${this.label}
               </caption>
             </table>
-          `:$e`
-            <table class="kuc-readonly-table-1-17-0__table">
+          `:we`
+            <table class="kuc-readonly-table-1-17-1__table">
               <caption
-                class="kuc-readonly-table-1-17-0__table__label"
+                class="kuc-readonly-table-1-17-1__table__label"
                 ?hidden="${!this.label}"
               >
                 ${this.label}
               </caption>
-              <thead class="kuc-readonly-table-1-17-0__table__header">
+              <thead class="kuc-readonly-table-1-17-1__table__header">
                 <tr>
                   ${this.columns.map(((e,t)=>this._getColumnsTemplate(e,t)))}
                 </tr>
               </thead>
-              <tbody class="kuc-readonly-table-1-17-0__table__body">
+              <tbody class="kuc-readonly-table-1-17-1__table__body">
                 ${e.map(((e,t)=>this._getDataTemplate(e,t)))}
               </tbody>
             </table>
-            <kuc-base-pagination-1-17-0
+            <kuc-base-pagination-1-17-1
               .pagePosition="${this._pagePosition}"
               .rowsPerPage="${this.rowsPerPage}"
               .total="${this.data.length}"
@@ -1366,28 +1365,28 @@
               .isNext="${this._toggleDisplayNextButton()}"
               @kuc:pagination-click-prev=${this._handleClickPreviousButton}
               @kuc:pagination-click-next=${this._handleClickNextButton}
-            ></kuc-base-pagination-1-17-0>
-          `}_createDisplayData(){if(!this.pagination)return this.data;const e=(this._pagePosition-1)*this.rowsPerPage+1,t=this._pagePosition*this.rowsPerPage;return this.data.filter(((i,n)=>n>=e-1&&n<=t-1))}_customWidthVariables(e){return`var(--kuc-readonly-table-header-${e}-width, var(--kuc-readonly-table-header-width, auto))`}_getColumnsTemplate(e,t){const i=this._customWidthVariables(t);return $e`
+            ></kuc-base-pagination-1-17-1>
+          `}_createDisplayData(){if(!this.pagination)return this.data;const e=(this._pagePosition-1)*this.rowsPerPage+1,t=this._pagePosition*this.rowsPerPage;return this.data.filter(((i,n)=>n>=e-1&&n<=t-1))}_customWidthVariables(e){return`var(--kuc-readonly-table-header-${e}-width, var(--kuc-readonly-table-header-width, auto))`}_getColumnsTemplate(e,t){const i=this._customWidthVariables(t);return we`
         <th
-          class="kuc-readonly-table-1-17-0__table__header__cell"
+          class="kuc-readonly-table-1-17-1__table__header__cell"
           ?hidden="${!1===e.visible}"
           style="width: ${i}; min-width: ${i}; max-width: ${i}"
         >
           ${e.title||""}
         </th>
-      `}_getDataTemplate(e,t){return $e`
+      `}_getDataTemplate(e,t){return we`
         <tr
-          class="kuc-readonly-table-1-17-0__table__body__row kuc-readonly-table-1-17-0__table__body__row-${t}"
+          class="kuc-readonly-table-1-17-1__table__body__row kuc-readonly-table-1-17-1__table__body__row-${t}"
         >
-          ${this._columnOrder.map(((t,i)=>{var n;const o=null===(n=this.columns[i].visible)||void 0===n||n;let a=e[t];this._isHTML(a)&&(a=$e`<div
-                class="kuc-readonly-table-1-17-0__table__body__row__cell-data--html"
+          ${this._columnOrder.map(((t,i)=>{var n;const o=null===(n=this.columns[i].visible)||void 0===n||n;let a=e[t];this._isHTML(a)&&(a=we`<div
+                class="kuc-readonly-table-1-17-1__table__body__row__cell-data--html"
               >
-                ${si(a)}
-              </div>`);const s=this._customWidthVariables(i);return $e`<td class="kuc-readonly-table-1-17-0__table__body__row__cell-data" ?hidden="${!o}" style="width: ${s}; min-width: ${s}; max-width: ${s}">${a}</td>`}))}
+                ${ai(a)}
+              </div>`);const s=this._customWidthVariables(i);return we`<td class="kuc-readonly-table-1-17-1__table__body__row__cell-data" ?hidden="${!o}" style="width: ${s}; min-width: ${s}; max-width: ${s}">${a}</td>`}))}
         </tr>
-      `}_toggleDisplayPreviousButton(){return this._pagePosition>1}_toggleDisplayNextButton(){return this._pagePosition<this.data.length/this.rowsPerPage}_handleClickPreviousButton(e){this._pagePosition<2||(Ei(this.rowsPerPage)?this._pagePosition-=1:this.throwErrorAfterUpdateComplete(pt))}_handleClickNextButton(e){Ei(this.rowsPerPage)?!1!==this._toggleDisplayNextButton()&&(this._pagePosition+=1):this.throwErrorAfterUpdateComplete(pt)}_isHTML(e){if(e instanceof HTMLElement)return!0;const t=document.createElement("div");return t.innerHTML=e,t.childElementCount>0}}En([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),En([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),En([Fe({type:String})],e.prototype,"label",void 0),En([Fe({type:Array})],e.prototype,"columns",void 0),En([Fe({type:Array})],e.prototype,"data",void 0),En([Fe({type:Boolean})],e.prototype,"pagination",void 0),En([Fe({type:Number})],e.prototype,"rowsPerPage",void 0),En([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),En([We()],e.prototype,"_pagePosition",void 0),En([We()],e.prototype,"_columnOrder",void 0),window.customElements.define("kuc-readonly-table-1-17-0",e),mi('\n  kuc-readonly-table-1-17-0 ,\n  kuc-readonly-table-1-17-0  *,\n  kuc-readonly-table-1-17-0:lang(en),\n  kuc-readonly-table-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-readonly-table-1-17-0:lang(ja),\n  kuc-readonly-table-1-17-0:lang(ja) * {\n      font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-readonly-table-1-17-0:lang(zh),\n  kuc-readonly-table-1-17-0:lang(zh) * {\n      font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-readonly-table-1-17-0:lang(zh-TW),\n  kuc-readonly-table-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-readonly-table-1-17-0 {\n    font-size: 14px;\n    color: #333333;\n    display: block;\n  }\n  kuc-readonly-table-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-0__table {\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    display: inline-block;\n  }\n  .kuc-readonly-table-1-17-0__table__header {\n    border-width: 0px 1px;\n    border-color: var(--kuc-readonly-table-header-background-color, #3498db);\n    border-style: solid;\n  }\n  .kuc-readonly-table-1-17-0__table__label {\n    text-align: left;\n    white-space: normal;\n    overflow-wrap: anywhere;\n    padding: 4px 0px;\n  }\n  .kuc-readonly-table-1-17-0__table__label[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-0__table__label--no-column {\n    overflow-wrap: break-word;\n  }\n  .kuc-readonly-table-1-17-0__table__header__cell {\n    background-color: var(--kuc-readonly-table-header-background-color, #3498db);\n    color: var(--kuc-readonly-table-header-color, #ffffff);\n    height: var(--kuc-readonly-table-header-height, 40px);\n    box-sizing: border-box;\n    text-align: left;\n    overflow: auto;\n    white-space: nowrap;\n    word-wrap: break-word;\n    padding: 4px 8px;\n    font-weight: 400;\n    font-size: var(--kuc-readonly-table-header-font-size, 12px);\n  }\n  .kuc-readonly-table-1-17-0__table__header__cell[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-0__table__body {\n    vertical-align: top;\n  }\n  .kuc-readonly-table-1-17-0__table__body__row__cell-data {\n    box-sizing: border-box;\n    padding: 4px 8px;\n    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    border-color: #e3e7e8;\n    border-style: solid;\n    border-width: 1px;\n  }\n  .kuc-readonly-table-1-17-0__table__body__row__cell-data[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-0__table__header__cell,\n  .kuc-readonly-table-1-17-0__table__body__row__cell-data {\n    scrollbar-width: none; /* Firefox */\n  }\n  .kuc-readonly-table-1-17-0__table__header__cell::-webkit-scrollbar,\n  .kuc-readonly-table-1-17-0__table__body__row__cell-data::-webkit-scrollbar {\n    width: 0; /* Safari and Chrome */\n    display: none\n  }\n  .kuc-readonly-table-1-17-0__table__body__row__cell-data--html {\n    white-space: normal;\n  }\n'),Sn=e}})();var Tn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let An;(()=>{if(An=window.customElements.get("kuc-spinner-1-17-0"),!An){class e extends bi{constructor(e){super(),this.text="",this.container=document.body,this._isOpened=!1;const t=vi(e);Object.assign(this,t)}_getSpinnerSvgTemplate(){return Ce`
+      `}_toggleDisplayPreviousButton(){return this._pagePosition>1}_toggleDisplayNextButton(){return this._pagePosition<this.data.length/this.rowsPerPage}_handleClickPreviousButton(e){this._pagePosition<2||(Ei(this.rowsPerPage)?this._pagePosition-=1:this.throwErrorAfterUpdateComplete(_t))}_handleClickNextButton(e){Ei(this.rowsPerPage)?!1!==this._toggleDisplayNextButton()&&(this._pagePosition+=1):this.throwErrorAfterUpdateComplete(_t)}_isHTML(e){if(e instanceof HTMLElement)return!0;const t=document.createElement("div");return t.innerHTML=e,t.childElementCount>0}}En([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),En([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),En([Ge({type:String})],e.prototype,"label",void 0),En([Ge({type:Array})],e.prototype,"columns",void 0),En([Ge({type:Array})],e.prototype,"data",void 0),En([Ge({type:Boolean})],e.prototype,"pagination",void 0),En([Ge({type:Number})],e.prototype,"rowsPerPage",void 0),En([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),En([Fe()],e.prototype,"_pagePosition",void 0),En([Fe()],e.prototype,"_columnOrder",void 0),window.customElements.define("kuc-readonly-table-1-17-1",e),mi('\n  kuc-readonly-table-1-17-1 ,\n  kuc-readonly-table-1-17-1  *,\n  kuc-readonly-table-1-17-1:lang(en),\n  kuc-readonly-table-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-readonly-table-1-17-1:lang(ja),\n  kuc-readonly-table-1-17-1:lang(ja) * {\n      font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-readonly-table-1-17-1:lang(zh),\n  kuc-readonly-table-1-17-1:lang(zh) * {\n      font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-readonly-table-1-17-1:lang(zh-TW),\n  kuc-readonly-table-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-readonly-table-1-17-1 {\n    font-size: 14px;\n    color: #333333;\n    display: block;\n  }\n  kuc-readonly-table-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-1__table {\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    display: inline-block;\n  }\n  .kuc-readonly-table-1-17-1__table__header {\n    border-width: 0px 1px;\n    border-color: var(--kuc-readonly-table-header-background-color, #3498db);\n    border-style: solid;\n  }\n  .kuc-readonly-table-1-17-1__table__label {\n    text-align: left;\n    white-space: normal;\n    overflow-wrap: anywhere;\n    padding: 4px 0px;\n  }\n  .kuc-readonly-table-1-17-1__table__label[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-1__table__label--no-column {\n    overflow-wrap: break-word;\n  }\n  .kuc-readonly-table-1-17-1__table__header__cell {\n    background-color: var(--kuc-readonly-table-header-background-color, #3498db);\n    color: var(--kuc-readonly-table-header-color, #ffffff);\n    height: var(--kuc-readonly-table-header-height, 40px);\n    box-sizing: border-box;\n    text-align: left;\n    overflow: auto;\n    white-space: nowrap;\n    word-wrap: break-word;\n    padding: 4px 8px;\n    font-weight: 400;\n    font-size: var(--kuc-readonly-table-header-font-size, 12px);\n  }\n  .kuc-readonly-table-1-17-1__table__header__cell[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-1__table__body {\n    vertical-align: top;\n  }\n  .kuc-readonly-table-1-17-1__table__body__row__cell-data {\n    box-sizing: border-box;\n    padding: 4px 8px;\n    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    border-color: #e3e7e8;\n    border-style: solid;\n    border-width: 1px;\n  }\n  .kuc-readonly-table-1-17-1__table__body__row__cell-data[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-1__table__header__cell,\n  .kuc-readonly-table-1-17-1__table__body__row__cell-data {\n    scrollbar-width: none; /* Firefox */\n  }\n  .kuc-readonly-table-1-17-1__table__header__cell::-webkit-scrollbar,\n  .kuc-readonly-table-1-17-1__table__body__row__cell-data::-webkit-scrollbar {\n    width: 0; /* Safari and Chrome */\n    display: none\n  }\n  .kuc-readonly-table-1-17-1__table__body__row__cell-data--html {\n    white-space: normal;\n  }\n'),Sn=e}})();var Tn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let An;(()=>{if(An=window.customElements.get("kuc-spinner-1-17-1"),!An){class e extends bi{constructor(e){super(),this.text="",this.container=document.body,this._isOpened=!1;const t=vi(e);Object.assign(this,t)}_getSpinnerSvgTemplate(){return $e`
         <svg
-          class="kuc-spinner-1-17-0__spinner__loader"
+          class="kuc-spinner-1-17-1__spinner__loader"
           viewBox="0 0 50 50"
           aria-hidden="true"
         >
@@ -1404,81 +1403,81 @@
           <circle r="4" cx="10.15" cy="10.15" opacity="0.9" />
           <circle r="4" cx="19.56" cy="4.72" opacity="1" />
         </svg>
-      `}_isValidContainerElement(){return this.container instanceof HTMLElement}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.parentElement&&this.parentElement.classList.remove("kuc--has-spinner"),this.container.appendChild(this),this.performUpdate(),this.container.classList.contains("kuc--has-spinner")||this.container.classList.add("kuc--has-spinner"),this._isOpened=!0}close(){this.parentElement&&this.parentElement.classList.remove("kuc--has-spinner"),this._isOpened=!1,this.parentNode&&this.parentNode.removeChild(this)}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this.close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this.close(),!e)return this.throwErrorAfterUpdateComplete(gt),!1}return!0}render(){return $e`
-        <div class="kuc-spinner-1-17-0__spinner" aria-live="assertive" role="alert">
+      `}_isValidContainerElement(){return this.container instanceof HTMLElement}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.parentElement&&this.parentElement.classList.remove("kuc--has-spinner"),this.container.appendChild(this),this.performUpdate(),this.container.classList.contains("kuc--has-spinner")||this.container.classList.add("kuc--has-spinner"),this._isOpened=!0}close(){this.parentElement&&this.parentElement.classList.remove("kuc--has-spinner"),this._isOpened=!1,this.parentNode&&this.parentNode.removeChild(this)}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this.close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this.close(),!e)return this.throwErrorAfterUpdateComplete(bt),!1}return!0}render(){return we`
+        <div class="kuc-spinner-1-17-1__spinner" aria-live="assertive" role="alert">
           ${this._getSpinnerSvgTemplate()}
           <div
-            class="kuc-spinner-1-17-0__spinner__text${this.text?"":" visually-hidden"}"
+            class="kuc-spinner-1-17-1__spinner__text${this.text?"":" visually-hidden"}"
           >
             ${this.text?this.text:"now loading…"}
           </div>
         </div>
-        <div class="kuc-spinner-1-17-0__mask"></div>
-      `}}Tn([Fe({type:String})],e.prototype,"text",void 0),Tn([Fe()],e.prototype,"container",void 0),window.customElements.define("kuc-spinner-1-17-0",e),mi('\n  kuc-spinner-1-17-0,\n  kuc-spinner-1-17-0 *,\n  kuc-spinner-1-17-0:lang(en),\n  kuc-spinner-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-spinner-1-17-0:lang(ja),\n  kuc-spinner-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-spinner-1-17-0:lang(zh),\n  kuc-spinner-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-spinner-1-17-0:lang(zh-TW),\n  kuc-spinner-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-spinner-1-17-0 {\n    font-size: 14px;\n    color: #333333;\n  }\n  .kuc-spinner-1-17-0__spinner {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 10000;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n  }\n  .kuc-spinner-1-17-0__spinner__loader {\n    width: var(--kuc-spinner-loader-width, 50px);\n    height: var(--kuc-spinner-loader-height, 50px);\n    animation: rotate-loading 1s steps(12) infinite;\n    fill: var(--kuc-spinner-loader-color, #99ccff);\n  }\n  .kuc-spinner-1-17-0__spinner__text {\n    margin: 10px 0;\n    font-size: var(--kuc-spinner-text-font-size, 14px);\n    color: var(--kuc-spinner-text-color, #333333);\n  }\n  .visually-hidden {\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    border: 0;\n    padding: 0;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    margin: -1px;\n  }\n  .kuc-spinner-1-17-0__mask {\n    position: fixed;\n    top: 0;\n    right: 0;\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: #666666;\n    opacity: 0.6;\n    z-index: 9999;\n  }\n  .kuc--has-spinner {\n    overflow: hidden;\n  }\n  @keyframes rotate-loading {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n'),An=e}})();var Dn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};const Vn="kuc-table-1-17-0__table__body__row__action-add",Ln="kuc-table-1-17-0__table__body__row__action-remove",Hn=e=>`var(--kuc-table-header-${e}-width, var(--kuc-table-header-width, auto))`;let Mn;(()=>{if(Mn=window.customElements.get("kuc-table-1-17-0"),!Mn){class e extends bi{constructor(e){if(super(),this.className="",this.id="",this.label="",this.columns=[],this.data=[],this.actionButton=!0,this.headerVisible=!0,this.visible=!0,!e)return;const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("data")||e.has("columns")){const e=this._getErrorValidateColumnsAndData();if(e)return this.throwErrorAfterUpdateComplete(e),!1}return!0}willUpdate(e){this._tBody&&(this._tBody.innerHTML="")}_getErrorMessageWhenValidateColumns(){return Ti(this.columns)?(e=>{for(let t=0;t<e.length;t++)if(!Object.prototype.hasOwnProperty.call(e[t],"field"))return!1;return!0})(this.columns)?(e=>{const t=this.columns.map((e=>e.field));return t.some((function(e,i){return t.indexOf(e)!==i}))})()?_t:"":ht:ct}render(){return!this.columns||this.columns.length<1?$e`<table class="kuc-table-1-17-0__table">
+        <div class="kuc-spinner-1-17-1__mask"></div>
+      `}}Tn([Ge({type:String})],e.prototype,"text",void 0),Tn([Ge()],e.prototype,"container",void 0),window.customElements.define("kuc-spinner-1-17-1",e),mi('\n  kuc-spinner-1-17-1,\n  kuc-spinner-1-17-1 *,\n  kuc-spinner-1-17-1:lang(en),\n  kuc-spinner-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-spinner-1-17-1:lang(ja),\n  kuc-spinner-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-spinner-1-17-1:lang(zh),\n  kuc-spinner-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-spinner-1-17-1:lang(zh-TW),\n  kuc-spinner-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-spinner-1-17-1 {\n    font-size: 14px;\n    color: #333333;\n  }\n  .kuc-spinner-1-17-1__spinner {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 10000;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n  }\n  .kuc-spinner-1-17-1__spinner__loader {\n    width: var(--kuc-spinner-loader-width, 50px);\n    height: var(--kuc-spinner-loader-height, 50px);\n    animation: rotate-loading 1s steps(12) infinite;\n    fill: var(--kuc-spinner-loader-color, #99ccff);\n  }\n  .kuc-spinner-1-17-1__spinner__text {\n    margin: 10px 0;\n    font-size: var(--kuc-spinner-text-font-size, 14px);\n    color: var(--kuc-spinner-text-color, #333333);\n  }\n  .visually-hidden {\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    border: 0;\n    padding: 0;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    margin: -1px;\n  }\n  .kuc-spinner-1-17-1__mask {\n    position: fixed;\n    top: 0;\n    right: 0;\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: #666666;\n    opacity: 0.6;\n    z-index: 9999;\n  }\n  .kuc--has-spinner {\n    overflow: hidden;\n  }\n  @keyframes rotate-loading {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n'),An=e}})();var Dn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};const Vn="kuc-table-1-17-1__table__body__row__action-add",Ln="kuc-table-1-17-1__table__body__row__action-remove",Hn=e=>`var(--kuc-table-header-${e}-width, var(--kuc-table-header-width, auto))`;let Mn;(()=>{if(Mn=window.customElements.get("kuc-table-1-17-1"),!Mn){class e extends bi{constructor(e){if(super(),this.className="",this.id="",this.label="",this.columns=[],this.data=[],this.actionButton=!0,this.headerVisible=!0,this.visible=!0,!e)return;const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("data")||e.has("columns")){const e=this._getErrorValidateColumnsAndData();if(e)return this.throwErrorAfterUpdateComplete(e),!1}return!0}willUpdate(e){this._tBody&&(this._tBody.innerHTML="")}_getErrorMessageWhenValidateColumns(){return Ti(this.columns)?(e=>{for(let t=0;t<e.length;t++)if(!Object.prototype.hasOwnProperty.call(e[t],"field"))return!1;return!0})(this.columns)?(e=>{const t=this.columns.map((e=>e.field));return t.some((function(e,i){return t.indexOf(e)!==i}))})()?ht:"":ct:ut}render(){return!this.columns||this.columns.length<1?we`<table class="kuc-table-1-17-1__table">
             <caption
-              class="kuc-table-1-17-0__table__label kuc-table-1-17-0__table__label--no-column"
+              class="kuc-table-1-17-1__table__label kuc-table-1-17-1__table__label--no-column"
               ?hidden="${!this.label}"
             >
               ${this.label}
             </caption>
-          </table>`:$e`
-            <table class="kuc-table-1-17-0__table">
-              <caption class="kuc-table-1-17-0__table__label" ?hidden="${!this.label}">
+          </table>`:we`
+            <table class="kuc-table-1-17-1__table">
+              <caption class="kuc-table-1-17-1__table__label" ?hidden="${!this.label}">
                 ${this.label}
               </caption>
               <thead
-                class="kuc-table-1-17-0__table__header"
+                class="kuc-table-1-17-1__table__header"
                 ?hidden="${!this.headerVisible}"
               >
                 ${this._getTableHeaderTemplate()}
               </thead>
-              <tbody class="kuc-table-1-17-0__table__body"></tbody>
+              <tbody class="kuc-table-1-17-1__table__body"></tbody>
             </table>
-          `}updated(e){if(0!==this.columns.length)for(let e=0;e<this.data.length;e++)this._addRowToTable(e,this.data[e])}_getTableHeaderTemplate(){return $e`
+          `}updated(e){if(0!==this.columns.length)for(let e=0;e<this.data.length;e++)this._addRowToTable(e,this.data[e])}_getTableHeaderTemplate(){return we`
         <tr>
           ${this.columns.map(((e,t)=>this._getColumnHeaderTemplate(e,t)))}
         </tr>
-      `}_getColumnHeaderTemplate(e,t){const i=Hn(t);return $e`
+      `}_getColumnHeaderTemplate(e,t){const i=Hn(t);return we`
         <th
-          class="kuc-table-1-17-0__table__header__cell"
+          class="kuc-table-1-17-1__table__header__cell"
           ?hidden="${!1===e.visible}"
           style="width: ${i}; min-width: ${i}; max-width: ${i}"
         >
-          <div class="kuc-table-1-17-0__table__header__cell-title">
-            ${e.title?si(e.title):""}<!--
+          <div class="kuc-table-1-17-1__table__header__cell-title">
+            ${e.title?ai(e.title):""}<!--
         --><span
-              class="kuc-base-label-1-17-0__required-icon"
+              class="kuc-base-label-1-17-1__required-icon"
               ?hidden="${!e.requiredIcon}"
               >*</span
             >
           </div>
         </th>
-      `}_getActionsCellWhenRemoveRow(e){let t=null,i=e;for(;this.data.length>1;){const e=this._table.rows[i];if(e){t=e.cells[this.columns.length];break}i--}return t}_getDefaultDataRow(e){const t={};for(const i in e)if(Object.prototype.hasOwnProperty.call(e,i)){if(Array.isArray(e[i])){t[i]=[];continue}if("object"==typeof e[i]&&null!==e[i]){t[i]={};continue}t[i]=""}return t}_addRowToTable(e,t){var i;const n=this._tBody.insertRow(e);n.classList.add("kuc-table-1-17-0__table__body__row");for(let o=0;o<this.columns.length;o++){const a=Hn(o),s=n.insertCell(o),r=this.columns[o];s.classList.add("kuc-table-1-17-0__table__body__row__cell-data"),s.style.width=a,s.style.maxWidth=a,s.style.minWidth=a,s.addEventListener("change",(e=>{this._handleChangeCell(e,r.field)})),s.hidden=!(null===(i=r.visible)||void 0===i||i);const l=r.render?r.render(t[r.field],t,e):t[r.field];l&&l.nodeType?s.appendChild(l):s.innerText=l||""}this.actionButton&&this._addActionsCellToNewRow(n)}_handleChangeCell(e,t){e.stopPropagation();const i=this._deepCloneObject(this.data),n=e.currentTarget.parentElement.rowIndex-1,o=this.data[n];if(t in o){let i=e.target.value;"detail"in e&&(i=e.detail.value),o[t]=i}const a={type:"change-cell",rowIndex:n,data:this._deepCloneObject(this.data),oldData:i,field:t};this._dispatchChangeEvent(a)}_handleAddRow(e){const t=this._deepCloneObject(this.data),i=this._getDefaultDataRow(this.data[0]);this._addRowToTable(e,i),this.data.splice(e,0,i);const n={type:"add-row",rowIndex:e,data:this._deepCloneObject(this.data),oldData:t};this._dispatchChangeEvent(n),this._toggleRemoveRowButton()}_handleRemoveRow(e){if(1===this.data.length)return;const t=e-1,i=this._deepCloneObject(this.data);this._table.deleteRow(e),this.data.splice(t,1);const n={type:"remove-row",rowIndex:t,data:this._deepCloneObject(this.data),oldData:i};this._dispatchChangeEvent(n),this._toggleRemoveRowButton(),this._focusActionsButtonWhenRemoveRow(e)}_focusActionsButtonWhenRemoveRow(e){const t=this._getActionsCellWhenRemoveRow(e);t?this._focusRemoveRowButton(t):this._focusFirstAddRowButton()}_focusRemoveRowButton(e){e.querySelector(`.${Ln}`).focus()}_focusFirstAddRowButton(){const e=this._table.rows[1].cells[this.columns.length].querySelector(`.${Vn}`);null==e||e.focus()}_toggleRemoveRowButton(){var e;const t=this._tBody.rows[0].lastChild.lastChild;if(1!==this.data.length){if(2===this.data.length){const i=null===(e=this._tBody.rows[1].lastChild)||void 0===e?void 0:e.lastChild;t.style.display=i.style.display="block"}}else t.style.display="none"}_getSvgDOM(e,t){const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("fill","none"),i.setAttribute("width","18"),i.setAttribute("height","18"),i.setAttribute("viewBox","0 0 16 16"),i.setAttribute("aria-hidden","true");const n=document.createElementNS("http://www.w3.org/2000/svg","path");return n.setAttribute("d",t),n.setAttribute("fill-rule","evenodd"),n.setAttribute("clip-rule","evenodd"),n.setAttribute("fill",e),i.appendChild(n),i}_addActionsCellToNewRow(e){const t={add:!0,remove:!0};if("object"==typeof this.actionButton&&(t.add=!Object.prototype.hasOwnProperty.call(this.actionButton,"add")||this.actionButton.add,t.remove=!Object.prototype.hasOwnProperty.call(this.actionButton,"remove")||this.actionButton.remove),!t.add&&!t.remove)return;const i=e.insertCell(this.columns.length);if(i.classList.add("kuc-table-1-17-0__table__body__row__action"),t.add){const t=this._getActionButtonDOM("add",e);i.appendChild(t)}if(t.remove){const t=this._getActionButtonDOM("remove",e);i.appendChild(t),1===this.data.length&&(t.style.display="none")}}_getActionButtonDOM(e,t){let i=Ln,n="Delete this row";const o="add"===e;o&&(i=Vn,n="Add row");const a=o?"#3498db":"#b5b5b5",s=o?"M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM12.0355 8.49997V7.49997H8.50008V3.96454H7.50008V7.49997H3.96443V8.49997H7.50008V12.0356H8.50008V8.49997H12.0355Z":"M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0355 7.49997V8.49997L3.96443 8.49997V7.49997H12.0355Z",r=this._getSvgDOM(a,s),l=document.createElement("button");return l.classList.add(i),l.setAttribute("title",n),l.appendChild(r),l.addEventListener("click",(()=>{const e=this._getErrorValidateColumnsAndData();e?this.throwErrorAfterUpdateComplete(e):o?this._handleAddRow(t.rowIndex):this._handleRemoveRow(t.rowIndex)})),l}_getErrorValidateColumnsAndData(){return this._getErrorMessageWhenValidateColumns()||(Ti(this.data)?"":bt)}_deepCloneObject(e){return JSON.parse(JSON.stringify(e))}_dispatchChangeEvent(e){gi(this,"change",e)}}Dn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Dn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Dn([Fe({type:String})],e.prototype,"label",void 0),Dn([Fe({type:Array})],e.prototype,"columns",void 0),Dn([Fe({type:Array})],e.prototype,"data",void 0),Dn([Fe()],e.prototype,"actionButton",void 0),Dn([Fe({type:Boolean})],e.prototype,"headerVisible",void 0),Dn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Dn([Ke(".kuc-table-1-17-0__table")],e.prototype,"_table",void 0),Dn([Ke(".kuc-table-1-17-0__table__body")],e.prototype,"_tBody",void 0),window.customElements.define("kuc-table-1-17-0",e),mi('\n    kuc-table-1-17-0,\n    kuc-table-1-17-0 *,\n    kuc-table-1-17-0:lang(en),\n    kuc-table-1-17-0:lang(en) * {\n        font-family: sans-serif;\n    }\n    kuc-table-1-17-0:lang(ja),\n    kuc-table-1-17-0:lang(ja) * {\n        font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n        sans-serif;\n    }\n    kuc-table-1-17-0:lang(zh),\n    kuc-table-1-17-0:lang(zh) * {\n        font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", sans-serif;\n    }\n    kuc-table-1-17-0:lang(zh-TW),\n    kuc-table-1-17-0:lang(zh-TW) * {\n       font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n         Hei,"Heiti SC",sans-serif;\n    }\n    kuc-table-1-17-0 {\n        font-size: 14px;\n        color: #333333;\n        display: block;\n    }\n    kuc-table-1-17-0[hidden] {\n        display: none;\n    }\n    kuc-table-1-17-0 kuc-* {\n        line-height: 1;\n    }\n    .kuc-table-1-17-0__table {\n        border-collapse: collapse;\n    }\n    .kuc-table-1-17-0__table__header {\n        border-width: 0px 1px;\n        border-color: var(--kuc-table-header-background-color, #3498db);\n        border-style: solid;\n        border-right: 0;\n    }\n    .kuc-table-1-17-0__table__header[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-0__table__header__cell {\n        box-sizing: border-box;\n        font-size: var(--kuc-table-header-font-size, 12px);\n        font-weight: 400;\n        background-color: var(--kuc-table-header-background-color, #3498db);\n        color: var(--kuc-table-header-color, #ffffff);\n        height: var(--kuc-table-header-height, 40px);\n        padding: 4px 8px;\n        text-align: left;\n        white-space: normal;\n    }\n    .kuc-table-1-17-0__table__header__cell-title {\n        overflow-wrap: break-word;\n        display: flex;\n        align-items: center;\n    }\n    .kuc-table-1-17-0__table__header__cell[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-0__table__header__cell .kuc-base-label-1-17-0__required-icon {\n        font-size: var(--kuc-table-header-font-size, 20px);\n        align-self: flex-start;\n    }\n    .kuc-table-1-17-0__table__body__row__cell-data {\n        box-sizing: border-box;\n        overflow-wrap: break-word;\n        white-space: normal;\n        border-color: #e3e7e8;\n        border-style: solid;\n        border-width: 1px;\n        padding: 8px 8px;\n        vertical-align: top;\n    }\n    .kuc-table-1-17-0__table__body__row__cell-data[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-0__table__body__row__action {\n        display: flex;\n        vertical-align: top;\n    }\n    .kuc-table-1-17-0__table__body__row__action button {\n        display: flex;\n        align-items: center;\n        width: 24px;\n        height: 24px;\n        background: transparent;\n        border: 1px solid transparent;\n        padding: 2px;\n        cursor: pointer;\n    }\n    .kuc-table-1-17-0__table__body__row__action button[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-0__table__body__row__action-add {\n        margin-left: 12px;\n    }\n    .kuc-table-1-17-0__table__body__row__action-remove {\n        margin-left: 4px;\n    }\n    .kuc-table-1-17-0__table__body__row__action-add:focus,\n    .kuc-table-1-17-0__table__body__row__action-remove:focus {\n        border: 1px solid #3498db;\n        outline: none;\n    }\n    .kuc-table-1-17-0__table__body__row__action-remove:hover path {\n        fill: #e74c3c;\n    }\n    .kuc-table-1-17-0__table__body__row__action[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-0__table caption {\n        text-align: left;\n        margin-bottom: 6px;\n        overflow-wrap: anywhere;\n        white-space: normal;\n    }\n    .kuc-table-1-17-0__table .kuc-table-1-17-0__table__label--no-column {\n        overflow-wrap: break-word;\n    }\n'),Mn=e}})();var Bn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let On;(()=>{if(On=window.customElements.get("kuc-tabs-1-17-0"),!On){class e extends bi{constructor(e){super(),this.className="",this.id="",this.value="",this.borderVisible=!0,this.visible=!0,this.items=[],this._selectedValue="",this._isClick=!1,this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("items")){if(!Ti(this.items))return this.throwErrorAfterUpdateComplete(nt),!1;for(let e=0;e<this.items.length;e++)if(void 0===this.items[e].value)return this.throwErrorAfterUpdateComplete(at),!1;if(!Ii(this.items.map((e=>e.value))))return this.throwErrorAfterUpdateComplete(ot),!1}return!(e.has("value")&&!$i(this.value)&&(this.throwErrorAfterUpdateComplete(lt),1))}willUpdate(e){let t=this._getMatchedTabIndex();-1===t&&(t=this._getFirstVisibleTabIndex()),t>-1&&(this._selectedValue=this.items[t].value)}render(){return $e`
-        <div class="kuc-tabs-1-17-0__group">
+      `}_getActionsCellWhenRemoveRow(e){let t=null,i=e;for(;this.data.length>1;){const e=this._table.rows[i];if(e){t=e.cells[this.columns.length];break}i--}return t}_getDefaultDataRow(e){const t={};for(const i in e)if(Object.prototype.hasOwnProperty.call(e,i)){if(Array.isArray(e[i])){t[i]=[];continue}if("object"==typeof e[i]&&null!==e[i]){t[i]={};continue}t[i]=""}return t}_addRowToTable(e,t){var i;const n=this._tBody.insertRow(e);n.classList.add("kuc-table-1-17-1__table__body__row");for(let o=0;o<this.columns.length;o++){const a=Hn(o),s=n.insertCell(o),r=this.columns[o];s.classList.add("kuc-table-1-17-1__table__body__row__cell-data"),s.style.width=a,s.style.maxWidth=a,s.style.minWidth=a,s.addEventListener("change",(e=>{this._handleChangeCell(e,r.field)})),s.hidden=!(null===(i=r.visible)||void 0===i||i);const l=r.render?r.render(t[r.field],t,e):t[r.field];l&&l.nodeType?s.appendChild(l):s.innerText=l||""}this.actionButton&&this._addActionsCellToNewRow(n)}_handleChangeCell(e,t){e.stopPropagation();const i=this._deepCloneObject(this.data),n=e.currentTarget.parentElement.rowIndex-1,o=this.data[n];if(t in o){let i=e.target.value;"detail"in e&&(i=e.detail.value),o[t]=i}const a={type:"change-cell",rowIndex:n,data:this._deepCloneObject(this.data),oldData:i,field:t};this._dispatchChangeEvent(a)}_handleAddRow(e){const t=this._deepCloneObject(this.data),i=this._getDefaultDataRow(this.data[0]);this._addRowToTable(e,i),this.data.splice(e,0,i);const n={type:"add-row",rowIndex:e,data:this._deepCloneObject(this.data),oldData:t};this._dispatchChangeEvent(n),this._toggleRemoveRowButton()}_handleRemoveRow(e){if(1===this.data.length)return;const t=e-1,i=this._deepCloneObject(this.data);this._table.deleteRow(e),this.data.splice(t,1);const n={type:"remove-row",rowIndex:t,data:this._deepCloneObject(this.data),oldData:i};this._dispatchChangeEvent(n),this._toggleRemoveRowButton(),this._focusActionsButtonWhenRemoveRow(e)}_focusActionsButtonWhenRemoveRow(e){const t=this._getActionsCellWhenRemoveRow(e);t?this._focusRemoveRowButton(t):this._focusFirstAddRowButton()}_focusRemoveRowButton(e){e.querySelector(`.${Ln}`).focus()}_focusFirstAddRowButton(){const e=this._table.rows[1].cells[this.columns.length].querySelector(`.${Vn}`);null==e||e.focus()}_toggleRemoveRowButton(){var e;const t=this._tBody.rows[0].lastChild.lastChild;if(1!==this.data.length){if(2===this.data.length){const i=null===(e=this._tBody.rows[1].lastChild)||void 0===e?void 0:e.lastChild;t.style.display=i.style.display="block"}}else t.style.display="none"}_getSvgDOM(e,t){const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("fill","none"),i.setAttribute("width","18"),i.setAttribute("height","18"),i.setAttribute("viewBox","0 0 16 16"),i.setAttribute("aria-hidden","true");const n=document.createElementNS("http://www.w3.org/2000/svg","path");return n.setAttribute("d",t),n.setAttribute("fill-rule","evenodd"),n.setAttribute("clip-rule","evenodd"),n.setAttribute("fill",e),i.appendChild(n),i}_addActionsCellToNewRow(e){const t={add:!0,remove:!0};if("object"==typeof this.actionButton&&(t.add=!Object.prototype.hasOwnProperty.call(this.actionButton,"add")||this.actionButton.add,t.remove=!Object.prototype.hasOwnProperty.call(this.actionButton,"remove")||this.actionButton.remove),!t.add&&!t.remove)return;const i=e.insertCell(this.columns.length);if(i.classList.add("kuc-table-1-17-1__table__body__row__action"),t.add){const t=this._getActionButtonDOM("add",e);i.appendChild(t)}if(t.remove){const t=this._getActionButtonDOM("remove",e);i.appendChild(t),1===this.data.length&&(t.style.display="none")}}_getActionButtonDOM(e,t){let i=Ln,n="Delete this row";const o="add"===e;o&&(i=Vn,n="Add row");const a=o?"#3498db":"#b5b5b5",s=o?"M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM12.0355 8.49997V7.49997H8.50008V3.96454H7.50008V7.49997H3.96443V8.49997H7.50008V12.0356H8.50008V8.49997H12.0355Z":"M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0355 7.49997V8.49997L3.96443 8.49997V7.49997H12.0355Z",r=this._getSvgDOM(a,s),l=document.createElement("button");return l.classList.add(i),l.setAttribute("title",n),l.appendChild(r),l.addEventListener("click",(()=>{const e=this._getErrorValidateColumnsAndData();e?this.throwErrorAfterUpdateComplete(e):o?this._handleAddRow(t.rowIndex):this._handleRemoveRow(t.rowIndex)})),l}_getErrorValidateColumnsAndData(){return this._getErrorMessageWhenValidateColumns()||(Ti(this.data)?"":pt)}_deepCloneObject(e){return JSON.parse(JSON.stringify(e))}_dispatchChangeEvent(e){gi(this,"change",e)}}Dn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Dn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Dn([Ge({type:String})],e.prototype,"label",void 0),Dn([Ge({type:Array})],e.prototype,"columns",void 0),Dn([Ge({type:Array})],e.prototype,"data",void 0),Dn([Ge()],e.prototype,"actionButton",void 0),Dn([Ge({type:Boolean})],e.prototype,"headerVisible",void 0),Dn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Dn([qe(".kuc-table-1-17-1__table")],e.prototype,"_table",void 0),Dn([qe(".kuc-table-1-17-1__table__body")],e.prototype,"_tBody",void 0),window.customElements.define("kuc-table-1-17-1",e),mi('\n    kuc-table-1-17-1,\n    kuc-table-1-17-1 *,\n    kuc-table-1-17-1:lang(en),\n    kuc-table-1-17-1:lang(en) * {\n        font-family: sans-serif;\n    }\n    kuc-table-1-17-1:lang(ja),\n    kuc-table-1-17-1:lang(ja) * {\n        font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n        sans-serif;\n    }\n    kuc-table-1-17-1:lang(zh),\n    kuc-table-1-17-1:lang(zh) * {\n        font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", sans-serif;\n    }\n    kuc-table-1-17-1:lang(zh-TW),\n    kuc-table-1-17-1:lang(zh-TW) * {\n       font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n         Hei,"Heiti SC",sans-serif;\n    }\n    kuc-table-1-17-1 {\n        font-size: 14px;\n        color: #333333;\n        display: block;\n    }\n    kuc-table-1-17-1[hidden] {\n        display: none;\n    }\n    kuc-table-1-17-1 kuc-* {\n        line-height: 1;\n    }\n    .kuc-table-1-17-1__table {\n        border-collapse: collapse;\n    }\n    .kuc-table-1-17-1__table__header {\n        border-width: 0px 1px;\n        border-color: var(--kuc-table-header-background-color, #3498db);\n        border-style: solid;\n        border-right: 0;\n    }\n    .kuc-table-1-17-1__table__header[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-1__table__header__cell {\n        box-sizing: border-box;\n        font-size: var(--kuc-table-header-font-size, 12px);\n        font-weight: 400;\n        background-color: var(--kuc-table-header-background-color, #3498db);\n        color: var(--kuc-table-header-color, #ffffff);\n        height: var(--kuc-table-header-height, 40px);\n        padding: 4px 8px;\n        text-align: left;\n        white-space: normal;\n    }\n    .kuc-table-1-17-1__table__header__cell-title {\n        overflow-wrap: break-word;\n        display: flex;\n        align-items: center;\n    }\n    .kuc-table-1-17-1__table__header__cell[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-1__table__header__cell .kuc-base-label-1-17-1__required-icon {\n        font-size: var(--kuc-table-header-font-size, 20px);\n        align-self: flex-start;\n    }\n    .kuc-table-1-17-1__table__body__row__cell-data {\n        box-sizing: border-box;\n        overflow-wrap: break-word;\n        white-space: normal;\n        border-color: #e3e7e8;\n        border-style: solid;\n        border-width: 1px;\n        padding: 8px 8px;\n        vertical-align: top;\n    }\n    .kuc-table-1-17-1__table__body__row__cell-data[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-1__table__body__row__action {\n        display: flex;\n        vertical-align: top;\n    }\n    .kuc-table-1-17-1__table__body__row__action button {\n        display: flex;\n        align-items: center;\n        width: 24px;\n        height: 24px;\n        background: transparent;\n        border: 1px solid transparent;\n        padding: 2px;\n        cursor: pointer;\n    }\n    .kuc-table-1-17-1__table__body__row__action button[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-1__table__body__row__action-add {\n        margin-left: 12px;\n    }\n    .kuc-table-1-17-1__table__body__row__action-remove {\n        margin-left: 4px;\n    }\n    .kuc-table-1-17-1__table__body__row__action-add:focus,\n    .kuc-table-1-17-1__table__body__row__action-remove:focus {\n        border: 1px solid #3498db;\n        outline: none;\n    }\n    .kuc-table-1-17-1__table__body__row__action-remove:hover path {\n        fill: #e74c3c;\n    }\n    .kuc-table-1-17-1__table__body__row__action[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-1__table caption {\n        text-align: left;\n        margin-bottom: 6px;\n        overflow-wrap: anywhere;\n        white-space: normal;\n    }\n    .kuc-table-1-17-1__table .kuc-table-1-17-1__table__label--no-column {\n        overflow-wrap: break-word;\n    }\n'),Mn=e}})();var Bn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let On;(()=>{if(On=window.customElements.get("kuc-tabs-1-17-1"),!On){class e extends bi{constructor(e){super(),this.className="",this.id="",this.value="",this.borderVisible=!0,this.visible=!0,this.items=[],this._selectedValue="",this._isClick=!1,this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("items")){if(!Ti(this.items))return this.throwErrorAfterUpdateComplete(it),!1;for(let e=0;e<this.items.length;e++)if(void 0===this.items[e].value)return this.throwErrorAfterUpdateComplete(ot),!1;if(!Ii(this.items.map((e=>e.value))))return this.throwErrorAfterUpdateComplete(nt),!1}return!(e.has("value")&&!$i(this.value)&&(this.throwErrorAfterUpdateComplete(rt),1))}willUpdate(e){let t=this._getMatchedTabIndex();-1===t&&(t=this._getFirstVisibleTabIndex()),t>-1&&(this._selectedValue=this.items[t].value)}render(){return we`
+        <div class="kuc-tabs-1-17-1__group">
           <ul
-            class="kuc-tabs-1-17-0__group__tab-list"
+            class="kuc-tabs-1-17-1__group__tab-list"
             role="tablist"
             @blur="${this._handleBlur}"
           >
             ${this.items.map(((e,t)=>this._getTabTemplate(e,t)))}
           </ul>
           <div
-            class="kuc-tabs-1-17-0__group__tab-panel"
+            class="kuc-tabs-1-17-1__group__tab-panel"
             ?border-visible="${this.borderVisible}"
           >
             ${this.items.map(((e,t)=>this._getTabContentTemplate(e,t)))}
           </div>
         </div>
-      `}_getTabTemplate(e,t){const i=e.value===this._selectedValue;return $e`<li
+      `}_getTabTemplate(e,t){const i=e.value===this._selectedValue;return we`<li
         role="presentation"
-        class="kuc-tabs-1-17-0__group__tab-list__tab"
+        class="kuc-tabs-1-17-1__group__tab-list__tab"
       >
         <button
           role="tab"
           ?hidden="${!1===e.visible}"
           aria-selected="${i}"
           tabindex="${i&&!e.disabled?"0":"-1"}"
-          class="kuc-tabs-1-17-0__group__tab-list__tab__button ${this._isClick?"kuc-tabs-1-17-0__group__tab-list__tab__button--click":""}"
+          class="kuc-tabs-1-17-1__group__tab-list__tab__button ${this._isClick?"kuc-tabs-1-17-1__group__tab-list__tab__button--click":""}"
           id="${this._GUID}-button-${t}"
           aria-controls="${this._GUID}-tabpanel-${t}"
           value="${e.value}"
@@ -1489,38 +1488,38 @@
         >
           ${e.label?e.label:""}
         </button>
-      </li>`}_getTabContentTemplate(e,t){const i=e.value===this._selectedValue;return $e`<div
-        class="kuc-tabs-1-17-0__group__tab-panel__content"
+      </li>`}_getTabContentTemplate(e,t){const i=e.value===this._selectedValue;return we`<div
+        class="kuc-tabs-1-17-1__group__tab-panel__content"
         role="tabpanel"
         id="${this._GUID}-tabpanel-${t}"
         aria-labelledby="${this._GUID}-button-${t}"
         ?hidden="${!i||!1===e.visible}"
         @change="${this._handleChangeEvent}"
       >
-        ${e.content?si(e.content):""}
-      </div>`}_handleMouseDown(e){this._isClick=!0}_handleClickTab(e){const t=e.target;t.blur();const i=this._getCurrentTabIndex(t.getAttribute("value"));if(this._tabButtons[i].focus(),this.value===t.value)return;const n=this._generateEventDetail(t.value);gi(this,"change",n)}_handleChangeEvent(e){e.stopPropagation()}_handleBlur(e){this._isClick=!1}_handleKeyDownTab(e){this._isClick=!1;let t=!1;switch(e.key){case"Left":case"ArrowLeft":t=!0,this._moveToAdjacentTab(e.target,"prev");break;case"Right":case"ArrowRight":t=!0,this._moveToAdjacentTab(e.target,"next");break;case"Home":t=!0,this._moveToLastFirstTab(e.target,"first");break;case"End":t=!0,this._moveToLastFirstTab(e.target,"last")}t&&(e.stopPropagation(),e.preventDefault())}_getCurrentTabIndex(e){let t=-1;for(let i=0;i<this.items.length;i++)if(this.items[i].value===e){t=i;break}return-1===t&&(t=this._getFirstVisibleTabIndex()),t}_getFirstVisibleTabIndex(){return this.items.findIndex((e=>!1!==e.visible))}_getMatchedTabIndex(){return this.items.findIndex((e=>!1!==e.visible&&e.value===this.value))}_moveToLastFirstTab(e,t){const i=this._getCurrentTabIndex(e.getAttribute("value")),n="last"===t?-1:1;let o="last"===t?this.items.length-1:0;for(;o!==i;){if(!1!==this.items[o].visible&&!0!==this.items[o].disabled){e.blur(),gi(this,"change",this._generateEventDetail(this._tabButtons[o].getAttribute("value"))),this._tabButtons[this._getCurrentTabIndex(this.value)].focus();break}o+=n}}_moveToAdjacentTab(e,t){const i=this._getCurrentTabIndex(e.getAttribute("value")),n="next"===t?1:-1;let o=i+n;for(;o!==i&&(o===this.items.length?o=0:-1===o&&(o=this.items.length-1),o!==i);){if(!1!==this.items[o].visible&&!0!==this.items[o].disabled){e.blur(),gi(this,"change",this._generateEventDetail(this._tabButtons[o].getAttribute("value"))),this._tabButtons[this._getCurrentTabIndex(this.value)].focus();break}o+=n}}_generateEventDetail(e){const t=this.value;return this.value=e,{oldValue:t,value:e}}}Bn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Bn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Bn([Fe({type:String})],e.prototype,"value",void 0),Bn([Fe({type:Boolean})],e.prototype,"borderVisible",void 0),Bn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Bn([Fe({type:Array})],e.prototype,"items",void 0),Bn([Je(".kuc-tabs-1-17-0__group__tab-list__tab__button")],e.prototype,"_tabButtons",void 0),Bn([We()],e.prototype,"_isClick",void 0),window.customElements.define("kuc-tabs-1-17-0",e),mi('\n  kuc-tabs-1-17-0,\n  kuc-tabs-1-17-0 *,\n  kuc-tabs-1-17-0:lang(en),\n  kuc-tabs-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-tabs-1-17-0:lang(ja),\n  kuc-tabs-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-tabs-1-17-0:lang(zh),\n  kuc-tabs-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-tabs-1-17-0:lang(zh-TW),\n  kuc-tabs-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-tabs-1-17-0 {\n    display: inline-block;\n  }\n  kuc-tabs-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-tabs-1-17-0__group__tab-list {\n    display: flex;\n    flex: 1;\n    padding: 16px 16px 0 16px;\n    margin: 0;\n    list-style: none;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab {\n    min-height: var(--kuc-tabs-tab-height, 48px);\n    height: var(--kuc-tabs-tab-height, 48px);\n    white-space: normal;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab__button:disabled {\n    color: GrayText;\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab__button {\n    height: 100%;\n    margin: 0;\n    padding: 0 24px;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    font-size: var(--kuc-tabs-tab-font-size, 14px);\n    background-color: var(--kuc-tabs-tab-background-color, #d4d7d7);\n    color: var(--kuc-tabs-tab-color, #333333);\n    border-style: none;\n    border-top: 1px solid #c7cbcb;\n    border-left: 1px solid #c7cbcb;\n    box-shadow: 1px 0 3px #c7cbcb inset;\n    box-sizing: border-box;\n    cursor: pointer;\n    line-height: 1.5;\n    width: var(--kuc-tabs-tab-width, auto);\n    min-width: var(--kuc-tabs-tab-width, 200px);\n    word-wrap: break-word;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab__button[hidden] {\n    display: none;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab__button:last-of-type {\n    border-right: 1px solid #c7cbcb;\n  }\n\n  .kuc-tabs-1-17-0__group__tab-list__tab__button:focus {\n    outline: none;\n    border: 1px solid #3498db;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab__button--click:focus{\n    border: none;\n    border-top: 1px solid #c7cbcb;\n    border-left: 1px solid #c7cbcb;\n    border-right: 1px solid #c7cbcb;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab__button[aria-selected="true"] {\n    background-color: var(--kuc-tabs-tab-background-color-selected, #ffffff);\n    color: var(--kuc-tabs-tab-color-selected, #333333);\n    box-shadow: none;\n  }\n  .kuc-tabs-1-17-0__group__tab-panel {\n    display:block;\n    padding: 0;\n    border-top: 0;\n  }\n  .kuc-tabs-1-17-0__group__tab-panel[border-visible] {\n    box-shadow: 0 0 8px 2px rgb(0 0 0 / 10%);\n  }\n  .kuc-tabs-1-17-0__group__tab-panel__content[hidden]{\n    display:none;\n  }\n'),On=e}})();var Nn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Un;(()=>{if(Un=window.customElements.get("kuc-text-1-17-0"),!Un){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.prefix="",this.suffix="",this.textAlign="left",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusInput(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputText(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}render(){return $e`
-        <div class="kuc-text-1-17-0__group">
+        ${e.content?ai(e.content):""}
+      </div>`}_handleMouseDown(e){this._isClick=!0}_handleClickTab(e){const t=e.target;t.blur();const i=this._getCurrentTabIndex(t.getAttribute("value"));if(this._tabButtons[i].focus(),this.value===t.value)return;const n=this._generateEventDetail(t.value);gi(this,"change",n)}_handleChangeEvent(e){e.stopPropagation()}_handleBlur(e){this._isClick=!1}_handleKeyDownTab(e){this._isClick=!1;let t=!1;switch(e.key){case"Left":case"ArrowLeft":t=!0,this._moveToAdjacentTab(e.target,"prev");break;case"Right":case"ArrowRight":t=!0,this._moveToAdjacentTab(e.target,"next");break;case"Home":t=!0,this._moveToLastFirstTab(e.target,"first");break;case"End":t=!0,this._moveToLastFirstTab(e.target,"last")}t&&(e.stopPropagation(),e.preventDefault())}_getCurrentTabIndex(e){let t=-1;for(let i=0;i<this.items.length;i++)if(this.items[i].value===e){t=i;break}return-1===t&&(t=this._getFirstVisibleTabIndex()),t}_getFirstVisibleTabIndex(){return this.items.findIndex((e=>!1!==e.visible))}_getMatchedTabIndex(){return this.items.findIndex((e=>!1!==e.visible&&e.value===this.value))}_moveToLastFirstTab(e,t){const i=this._getCurrentTabIndex(e.getAttribute("value")),n="last"===t?-1:1;let o="last"===t?this.items.length-1:0;for(;o!==i;){if(!1!==this.items[o].visible&&!0!==this.items[o].disabled){e.blur(),gi(this,"change",this._generateEventDetail(this._tabButtons[o].getAttribute("value"))),this._tabButtons[this._getCurrentTabIndex(this.value)].focus();break}o+=n}}_moveToAdjacentTab(e,t){const i=this._getCurrentTabIndex(e.getAttribute("value")),n="next"===t?1:-1;let o=i+n;for(;o!==i&&(o===this.items.length?o=0:-1===o&&(o=this.items.length-1),o!==i);){if(!1!==this.items[o].visible&&!0!==this.items[o].disabled){e.blur(),gi(this,"change",this._generateEventDetail(this._tabButtons[o].getAttribute("value"))),this._tabButtons[this._getCurrentTabIndex(this.value)].focus();break}o+=n}}_generateEventDetail(e){const t=this.value;return this.value=e,{oldValue:t,value:e}}}Bn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Bn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Bn([Ge({type:String})],e.prototype,"value",void 0),Bn([Ge({type:Boolean})],e.prototype,"borderVisible",void 0),Bn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Bn([Ge({type:Array})],e.prototype,"items",void 0),Bn([Ye(".kuc-tabs-1-17-1__group__tab-list__tab__button")],e.prototype,"_tabButtons",void 0),Bn([Fe()],e.prototype,"_isClick",void 0),window.customElements.define("kuc-tabs-1-17-1",e),mi('\n  kuc-tabs-1-17-1,\n  kuc-tabs-1-17-1 *,\n  kuc-tabs-1-17-1:lang(en),\n  kuc-tabs-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-tabs-1-17-1:lang(ja),\n  kuc-tabs-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-tabs-1-17-1:lang(zh),\n  kuc-tabs-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-tabs-1-17-1:lang(zh-TW),\n  kuc-tabs-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-tabs-1-17-1 {\n    display: inline-block;\n  }\n  kuc-tabs-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-tabs-1-17-1__group__tab-list {\n    display: flex;\n    flex: 1;\n    padding: 16px 16px 0 16px;\n    margin: 0;\n    list-style: none;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab {\n    min-height: var(--kuc-tabs-tab-height, 48px);\n    height: var(--kuc-tabs-tab-height, 48px);\n    white-space: normal;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab__button:disabled {\n    color: GrayText;\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab__button {\n    height: 100%;\n    margin: 0;\n    padding: 0 24px;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    font-size: var(--kuc-tabs-tab-font-size, 14px);\n    background-color: var(--kuc-tabs-tab-background-color, #d4d7d7);\n    color: var(--kuc-tabs-tab-color, #333333);\n    border-style: none;\n    border-top: 1px solid #c7cbcb;\n    border-left: 1px solid #c7cbcb;\n    box-shadow: 1px 0 3px #c7cbcb inset;\n    box-sizing: border-box;\n    cursor: pointer;\n    line-height: 1.5;\n    width: var(--kuc-tabs-tab-width, auto);\n    min-width: var(--kuc-tabs-tab-width, 200px);\n    word-wrap: break-word;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab__button[hidden] {\n    display: none;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab__button:last-of-type {\n    border-right: 1px solid #c7cbcb;\n  }\n\n  .kuc-tabs-1-17-1__group__tab-list__tab__button:focus {\n    outline: none;\n    border: 1px solid #3498db;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab__button--click:focus{\n    border: none;\n    border-top: 1px solid #c7cbcb;\n    border-left: 1px solid #c7cbcb;\n    border-right: 1px solid #c7cbcb;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab__button[aria-selected="true"] {\n    background-color: var(--kuc-tabs-tab-background-color-selected, #ffffff);\n    color: var(--kuc-tabs-tab-color-selected, #333333);\n    box-shadow: none;\n  }\n  .kuc-tabs-1-17-1__group__tab-panel {\n    display:block;\n    padding: 0;\n    border-top: 0;\n  }\n  .kuc-tabs-1-17-1__group__tab-panel[border-visible] {\n    box-shadow: 0 0 8px 2px rgb(0 0 0 / 10%);\n  }\n  .kuc-tabs-1-17-1__group__tab-panel__content[hidden]{\n    display:none;\n  }\n'),On=e}})();var Nn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Un;(()=>{if(Un=window.customElements.get("kuc-text-1-17-1"),!Un){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.prefix="",this.suffix="",this.textAlign="left",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusInput(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputText(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}render(){return we`
+        <div class="kuc-text-1-17-1__group">
           <label
-            class="kuc-text-1-17-0__group__label"
+            class="kuc-text-1-17-1__group__label"
             for="${this._GUID}-label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </label>
-          <div class="kuc-text-1-17-0__group__input-form">
-            <div class="kuc-text-1-17-0__group__input-form__prefix-outer">
+          <div class="kuc-text-1-17-1__group__input-form">
+            <div class="kuc-text-1-17-1__group__input-form__prefix-outer">
               <span
-                class="kuc-text-1-17-0__group__input-form__prefix-outer__prefix"
+                class="kuc-text-1-17-1__group__input-form__prefix-outer__prefix"
                 ?hidden="${!this.prefix}"
                 >${this.prefix}</span
               >
             </div>
-            <div class="kuc-text-1-17-0__group__input-form__input-outer">
+            <div class="kuc-text-1-17-1__group__input-form__input-outer">
               <input
-                class="kuc-text-1-17-0__group__input-form__input-outer__input"
+                class="kuc-text-1-17-1__group__input-form__input-outer__input"
                 id="${this._GUID}-label"
                 placeholder="${this.placeholder}"
                 textAlign="${this.textAlign}"
@@ -1535,21 +1534,21 @@
                 ?disabled="${this.disabled}"
               />
             </div>
-            <div class="kuc-text-1-17-0__group__input-form__suffix-outer">
+            <div class="kuc-text-1-17-1__group__input-form__suffix-outer">
               <span
-                class="kuc-text-1-17-0__group__input-form__suffix-outer__suffix"
+                class="kuc-text-1-17-1__group__input-form__suffix-outer__suffix"
                 ?hidden="${!this.suffix}"
                 >${this.suffix}</span
               >
             </div>
           </div>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}}Nn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Nn([Fe({type:String})],e.prototype,"error",void 0),Nn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Nn([Fe({type:String})],e.prototype,"label",void 0),Nn([Fe({type:String})],e.prototype,"placeholder",void 0),Nn([Fe({type:String})],e.prototype,"prefix",void 0),Nn([Fe({type:String})],e.prototype,"suffix",void 0),Nn([Fe({type:String})],e.prototype,"textAlign",void 0),Nn([Fe({type:String})],e.prototype,"value",void 0),Nn([Fe({type:Boolean})],e.prototype,"disabled",void 0),Nn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Nn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),window.customElements.define("kuc-text-1-17-0",e),mi('\nkuc-text-1-17-0,\nkuc-text-1-17-0 *,\nkuc-text-1-17-0:lang(en),\nkuc-text-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-text-1-17-0:lang(ja),\nkuc-text-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-text-1-17-0:lang(zh),\nkuc-text-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-text-1-17-0:lang(zh-TW),\nkuc-text-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\nkuc-text-1-17-0 {\n  font-size: 14px;\n  color: #333333;\n  display: inline-table;\n  vertical-align: top;\n  min-width: var(--kuc-text-input-width, 177px);\n  width: var(--kuc-text-input-width, 177px);\n  line-height: 1.5;\n}\nkuc-text-1-17-0[hidden] {\n  display: none;\n}\n.kuc-text-1-17-0__group {\n  border: none;\n  padding: 0px;\n  height: auto;\n  display: inline-block;\n  vertical-align: top;\n  width: 100%;\n  margin: 0px;\n}\n.kuc-text-1-17-0__group__label {\n  display: inline-block;\n  padding: 4px 0px 8px 0px;\n  white-space: nowrap;\n}\n.kuc-text-1-17-0__group__label[hidden] {\n  display: none;\n}\n.kuc-text-1-17-0__group__input-form {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n.kuc-text-1-17-0__group__input-form__prefix-outer__prefix {\n  padding-right: 4px;\n  white-space: nowrap;\n}\n.kuc-text-1-17-0__group__input-form__input-outer {\n  display: flex;\n  min-width: var(--kuc-text-input-width, 26px);\n  width: var(--kuc-text-input-width, 100%);\n}\ninput[type="text"].kuc-text-1-17-0__group__input-form__input-outer__input {\n  width: var(--kuc-text-input-width, 100%);\n  height: var(--kuc-text-input-height, 40px);\n  font-size: var(--kuc-text-input-font-size, 14px);\n  color: var(--kuc-text-input-color, #000000);\n  padding: 0 8px;\n  border: 1px solid #e3e7e8;\n  box-sizing: border-box;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n.kuc-text-1-17-0__group__input-form__input-outer__input[textAlign="left"] {\n  text-align: left;\n}\n.kuc-text-1-17-0__group__input-form__input-outer__input[textAlign="right"] {\n  text-align: right;\n}\ninput[type=text].kuc-text-1-17-0__group__input-form__input-outer__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\ninput[type=text].kuc-text-1-17-0__group__input-form__input-outer__input:disabled {\n  color: #888888;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.kuc-text-1-17-0__group__input-form__suffix-outer__suffix {\n  padding-left: 4px;\n  white-space: nowrap;\n}\n'),Un=e}})();const Pn=Un;var zn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Rn;(()=>{if(Rn=window.customElements.get("kuc-textarea-1-17-0"),Rn)return;class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._onResize=!1,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusTextarea(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeTextarea(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputTextArea(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}_handleMouseDownResize(){this._onResize=!0}_handleMouseUpDocument(){this._onResize=!1}_handleMouseMoveDocument(e){if(!this._onResize)return;const t=this._textarea.getBoundingClientRect();let i=e.clientX-t.left,n=e.clientY-t.top;i<16&&(i=16),n<16&&(n=16),this._container.style.width=i+"px",this._textarea.style.height=n+"px"}_getResizerButtonSvgTemplate(){return Ce`
+      `}}Nn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Nn([Ge({type:String})],e.prototype,"error",void 0),Nn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Nn([Ge({type:String})],e.prototype,"label",void 0),Nn([Ge({type:String})],e.prototype,"placeholder",void 0),Nn([Ge({type:String})],e.prototype,"prefix",void 0),Nn([Ge({type:String})],e.prototype,"suffix",void 0),Nn([Ge({type:String})],e.prototype,"textAlign",void 0),Nn([Ge({type:String})],e.prototype,"value",void 0),Nn([Ge({type:Boolean})],e.prototype,"disabled",void 0),Nn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Nn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),window.customElements.define("kuc-text-1-17-1",e),mi('\nkuc-text-1-17-1,\nkuc-text-1-17-1 *,\nkuc-text-1-17-1:lang(en),\nkuc-text-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-text-1-17-1:lang(ja),\nkuc-text-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-text-1-17-1:lang(zh),\nkuc-text-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-text-1-17-1:lang(zh-TW),\nkuc-text-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\nkuc-text-1-17-1 {\n  font-size: 14px;\n  color: #333333;\n  display: inline-table;\n  vertical-align: top;\n  min-width: var(--kuc-text-input-width, 177px);\n  width: var(--kuc-text-input-width, 177px);\n  line-height: 1.5;\n}\nkuc-text-1-17-1[hidden] {\n  display: none;\n}\n.kuc-text-1-17-1__group {\n  border: none;\n  padding: 0px;\n  height: auto;\n  display: inline-block;\n  vertical-align: top;\n  width: 100%;\n  margin: 0px;\n}\n.kuc-text-1-17-1__group__label {\n  display: inline-block;\n  padding: 4px 0px 8px 0px;\n  white-space: nowrap;\n}\n.kuc-text-1-17-1__group__label[hidden] {\n  display: none;\n}\n.kuc-text-1-17-1__group__input-form {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n.kuc-text-1-17-1__group__input-form__prefix-outer__prefix {\n  padding-right: 4px;\n  white-space: nowrap;\n}\n.kuc-text-1-17-1__group__input-form__input-outer {\n  display: flex;\n  min-width: var(--kuc-text-input-width, 26px);\n  width: var(--kuc-text-input-width, 100%);\n}\ninput[type="text"].kuc-text-1-17-1__group__input-form__input-outer__input {\n  width: var(--kuc-text-input-width, 100%);\n  height: var(--kuc-text-input-height, 40px);\n  font-size: var(--kuc-text-input-font-size, 14px);\n  color: var(--kuc-text-input-color, #000000);\n  padding: 0 8px;\n  border: 1px solid #e3e7e8;\n  box-sizing: border-box;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n.kuc-text-1-17-1__group__input-form__input-outer__input[textAlign="left"] {\n  text-align: left;\n}\n.kuc-text-1-17-1__group__input-form__input-outer__input[textAlign="right"] {\n  text-align: right;\n}\ninput[type=text].kuc-text-1-17-1__group__input-form__input-outer__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\ninput[type=text].kuc-text-1-17-1__group__input-form__input-outer__input:disabled {\n  color: #888888;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.kuc-text-1-17-1__group__input-form__suffix-outer__suffix {\n  padding-left: 4px;\n  white-space: nowrap;\n}\n'),Un=e}})();const Pn=Un;var zn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Rn;(()=>{if(Rn=window.customElements.get("kuc-textarea-1-17-1"),Rn)return;class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._onResize=!1,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusTextarea(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeTextarea(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputTextArea(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}_handleMouseDownResize(){this._onResize=!0}_handleMouseUpDocument(){this._onResize=!1}_handleMouseMoveDocument(e){if(!this._onResize)return;const t=this._textarea.getBoundingClientRect();let i=e.clientX-t.left,n=e.clientY-t.top;i<16&&(i=16),n<16&&(n=16),this._container.style.width=i+"px",this._textarea.style.height=n+"px"}_getResizerButtonSvgTemplate(){return $e`
       <svg height="16" width="16">
         <g fill="none" stroke="#b6b6b6" stroke-width="2">
           <line x1="14" x2="16" y1="15" y2="15" />
@@ -1560,22 +1559,22 @@
           <line x1="10" x2="12" y1="11" y2="11" />
         </g>
       </svg>
-      `}firstUpdated(){document.addEventListener("mousemove",(e=>this._handleMouseMoveDocument(e))),document.addEventListener("mouseup",(e=>this._handleMouseUpDocument()))}render(){return $e`
-        <div class="kuc-textarea-1-17-0__group">
+      `}firstUpdated(){document.addEventListener("mousemove",(e=>this._handleMouseMoveDocument(e))),document.addEventListener("mouseup",(e=>this._handleMouseUpDocument()))}render(){return we`
+        <div class="kuc-textarea-1-17-1__group">
           <label
-            class="kuc-textarea-1-17-0__group__label"
+            class="kuc-textarea-1-17-1__group__label"
             ?hidden="${!this.label}"
             for="${this._GUID}-label"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </label>
-          <div class="kuc-textarea-1-17-0__group__container">
+          <div class="kuc-textarea-1-17-1__group__container">
             <textarea
               id="${this._GUID}-label"
-              class="kuc-textarea-1-17-0__group__textarea"
+              class="kuc-textarea-1-17-1__group__textarea"
               placeholder="${this.placeholder}"
               .value="${this.value}"
               aria-describedby="${this._GUID}-error"
@@ -1588,35 +1587,35 @@
             >
             </textarea>
             <div
-              class="kuc-textarea-1-17-0__group__resizer"
+              class="kuc-textarea-1-17-1__group__resizer"
               @mousedown="${this._handleMouseDownResize}"
               ?hidden="${this.disabled}"
             >
               ${this._getResizerButtonSvgTemplate()}
             </div>
           </div>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}}zn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),zn([Fe({type:String})],e.prototype,"error",void 0),zn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),zn([Fe({type:String})],e.prototype,"label",void 0),zn([Fe({type:String})],e.prototype,"placeholder",void 0),zn([Fe({type:String})],e.prototype,"value",void 0),zn([Fe({type:Boolean})],e.prototype,"disabled",void 0),zn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),zn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),zn([Ke(".kuc-textarea-1-17-0__group__container")],e.prototype,"_container",void 0),zn([Ke(".kuc-textarea-1-17-0__group__textarea")],e.prototype,"_textarea",void 0),window.customElements.define("kuc-textarea-1-17-0",e),mi('\n  kuc-textarea-1-17-0,\n  kuc-textarea-1-17-0 *,\n  kuc-textarea-1-17-0:lang(en),\n  kuc-textarea-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-textarea-1-17-0:lang(ja),\n  kuc-textarea-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-textarea-1-17-0:lang(zh),\n  kuc-textarea-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-textarea-1-17-0:lang(zh-TW),\n  kuc-textarea-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-textarea-1-17-0 {\n    font-size: 14px;\n    color: var(--kuc-textarea-input-color, #333333);\n    display: inline-table;\n    vertical-align: top;\n    width: var(--kuc-textarea-input-width, 299px);\n    height: var(--kuc-textarea-input-height, 125px);\n    line-height: 1.5;\n  }\n  kuc-textarea-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-textarea-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    margin: 0px;\n    white-space: normal;\n  }\n  .kuc-textarea-1-17-0__group__label {\n    white-space: nowrap;\n    display: inline-block;\n    padding: 4px 0px 8px 0px;\n  }\n  .kuc-textarea-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-textarea-1-17-0__group__container {\n    position: relative;\n    display: inline-table;\n    width: var(--kuc-textarea-input-width, 100%);\n    min-width: var(--kuc-textarea-input-width, 100%);\n  }\n  textarea.kuc-textarea-1-17-0__group__textarea {\n    display: block;\n    border: 1px solid #e3e7e8;\n    box-sizing: border-box;\n    font-size: var(--kuc-textarea-input-font-size, 14px);\n    box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n    min-width: var(--kuc-textarea-input-width, 299px);\n    min-height: var(--kuc-textarea-input-height, 125px);\n    width: var(--kuc-textarea-input-width, 299px);\n    height: var(--kuc-textarea-input-height, 125px);\n    padding: 8px;\n    resize: none;\n    width: 100%;\n    background-color: #ffffff;\n    color: var(--kuc-textarea-input-color, #333333);\n  }\n  .kuc-textarea-1-17-0__group__textarea:focus {\n    outline: none;\n    border-color: #3498db;\n    box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n    border: 1px solid #3498db;\n    background-color: #ffffff;\n    color: var(--kuc-textarea-input-color, #333333);\n  }\n  .kuc-textarea-1-17-0__group__textarea:disabled {\n    color: #888888;\n    background-color: #d4d7d7;\n    box-shadow: none;\n    cursor: not-allowed;\n    resize: none;\n  }\n  .kuc-textarea-1-17-0__group__resizer {\n    position: absolute;\n    width: 16px;\n    height: 16px;\n    cursor: se-resize;\n    float: right;\n    margin: -16px 0px;\n    right: 0px;\n  }\n'),Rn=e})();var jn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Gn;(()=>{if(Gn=window.customElements.get("kuc-time-picker-1-17-0"),!Gn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.max="",this.min="",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this.timeStep=30,this._errorText="",this._inputValue="",this._errorInvalid="",this._inputMax="",this._inputMin="",this._inputTimeStep=30,this._valueConverted="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("max")||e.has("min")){let e=this._inputMin,t=this._inputMax;if(void 0===this.max||""===this.max)t=St;else{if(!yi(this.max))return this.throwErrorAfterUpdateComplete(At),!1;t=this.max=li(this.max)}if(void 0===this.min||""===this.min)e=Et;else{if(!yi(this.min))return this.throwErrorAfterUpdateComplete(Dt),!1;e=this.min=li(this.min)}if(Pt(t,e)<0)return this.throwErrorAfterUpdateComplete($t),!1;this._inputMin=e,this._inputMax=t}if(e.has("timeStep")){if(!Si(this.timeStep))return this.throwErrorAfterUpdateComplete(It),!1;if(!xi(this.timeStep,this._inputMax,this._inputMin))return this.throwErrorAfterUpdateComplete(Vt),!1;this._inputTimeStep=this.timeStep}return!(void 0!==this.value&&""!==this.value&&(yi(this.value)?(this._valueConverted=li(this.value),e.has("value")&&(Pt(this._valueConverted,this._inputMin)<0||Pt(this._inputMax,this._valueConverted)<0)&&(this.throwErrorAfterUpdateComplete(Ct),1)):(this.throwErrorAfterUpdateComplete(Tt),1)))}update(e){e.has("value")&&(void 0===this.value?""===this._errorInvalid&&(this._inputValue=""):(this.value=""===this.value?this.value:this._valueConverted,this._inputValue=this.value)),(e.has("max")||e.has("min")||e.has("value"))&&void 0!==this.value&&(this._errorInvalid=""),this._errorText=this._errorInvalid||this.error,super.update(e)}render(){return $e`
+      `}}zn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),zn([Ge({type:String})],e.prototype,"error",void 0),zn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),zn([Ge({type:String})],e.prototype,"label",void 0),zn([Ge({type:String})],e.prototype,"placeholder",void 0),zn([Ge({type:String})],e.prototype,"value",void 0),zn([Ge({type:Boolean})],e.prototype,"disabled",void 0),zn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),zn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),zn([qe(".kuc-textarea-1-17-1__group__container")],e.prototype,"_container",void 0),zn([qe(".kuc-textarea-1-17-1__group__textarea")],e.prototype,"_textarea",void 0),window.customElements.define("kuc-textarea-1-17-1",e),mi('\n  kuc-textarea-1-17-1,\n  kuc-textarea-1-17-1 *,\n  kuc-textarea-1-17-1:lang(en),\n  kuc-textarea-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-textarea-1-17-1:lang(ja),\n  kuc-textarea-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-textarea-1-17-1:lang(zh),\n  kuc-textarea-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-textarea-1-17-1:lang(zh-TW),\n  kuc-textarea-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-textarea-1-17-1 {\n    font-size: 14px;\n    color: var(--kuc-textarea-input-color, #333333);\n    display: inline-table;\n    vertical-align: top;\n    width: var(--kuc-textarea-input-width, 299px);\n    height: var(--kuc-textarea-input-height, 125px);\n    line-height: 1.5;\n  }\n  kuc-textarea-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-textarea-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    margin: 0px;\n    white-space: normal;\n  }\n  .kuc-textarea-1-17-1__group__label {\n    white-space: nowrap;\n    display: inline-block;\n    padding: 4px 0px 8px 0px;\n  }\n  .kuc-textarea-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-textarea-1-17-1__group__container {\n    position: relative;\n    display: inline-table;\n    width: var(--kuc-textarea-input-width, 100%);\n    min-width: var(--kuc-textarea-input-width, 100%);\n  }\n  textarea.kuc-textarea-1-17-1__group__textarea {\n    display: block;\n    border: 1px solid #e3e7e8;\n    box-sizing: border-box;\n    font-size: var(--kuc-textarea-input-font-size, 14px);\n    box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n    min-width: var(--kuc-textarea-input-width, 299px);\n    min-height: var(--kuc-textarea-input-height, 125px);\n    width: var(--kuc-textarea-input-width, 299px);\n    height: var(--kuc-textarea-input-height, 125px);\n    padding: 8px;\n    resize: none;\n    width: 100%;\n    background-color: #ffffff;\n    color: var(--kuc-textarea-input-color, #333333);\n  }\n  .kuc-textarea-1-17-1__group__textarea:focus {\n    outline: none;\n    border-color: #3498db;\n    box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n    border: 1px solid #3498db;\n    background-color: #ffffff;\n    color: var(--kuc-textarea-input-color, #333333);\n  }\n  .kuc-textarea-1-17-1__group__textarea:disabled {\n    color: #888888;\n    background-color: #d4d7d7;\n    box-shadow: none;\n    cursor: not-allowed;\n    resize: none;\n  }\n  .kuc-textarea-1-17-1__group__resizer {\n    position: absolute;\n    width: 16px;\n    height: 16px;\n    cursor: se-resize;\n    float: right;\n    margin: -16px 0px;\n    right: 0px;\n  }\n'),Rn=e})();var jn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Gn;(()=>{if(Gn=window.customElements.get("kuc-time-picker-1-17-1"),!Gn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.max="",this.min="",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this.timeStep=30,this._errorText="",this._inputValue="",this._errorInvalid="",this._inputMax="",this._inputMin="",this._inputTimeStep=30,this._valueConverted="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("max")||e.has("min")){let e=this._inputMin,t=this._inputMax;if(void 0===this.max||""===this.max)t=Et;else{if(!yi(this.max))return this.throwErrorAfterUpdateComplete(Tt),!1;t=this.max=ri(this.max)}if(void 0===this.min||""===this.min)e=It;else{if(!yi(this.min))return this.throwErrorAfterUpdateComplete(At),!1;e=this.min=ri(this.min)}if(Ut(t,e)<0)return this.throwErrorAfterUpdateComplete(wt),!1;this._inputMin=e,this._inputMax=t}if(e.has("timeStep")){if(!Si(this.timeStep))return this.throwErrorAfterUpdateComplete(Ct),!1;if(!xi(this.timeStep,this._inputMax,this._inputMin))return this.throwErrorAfterUpdateComplete(Dt),!1;this._inputTimeStep=this.timeStep}return!(void 0!==this.value&&""!==this.value&&(yi(this.value)?(this._valueConverted=ri(this.value),e.has("value")&&(Ut(this._valueConverted,this._inputMin)<0||Ut(this._inputMax,this._valueConverted)<0)&&(this.throwErrorAfterUpdateComplete($t),1)):(this.throwErrorAfterUpdateComplete(St),1)))}update(e){e.has("value")&&(void 0===this.value?""===this._errorInvalid&&(this._inputValue=""):(this.value=""===this.value?this.value:this._valueConverted,this._inputValue=this.value)),(e.has("max")||e.has("min")||e.has("value"))&&void 0!==this.value&&(this._errorInvalid=""),this._errorText=this._errorInvalid||this.error,super.update(e)}render(){return we`
         <fieldset
-          class="kuc-time-picker-1-17-0__group"
+          class="kuc-time-picker-1-17-1__group"
           aria-describedby="${this._GUID}-error"
         >
           <legend
-            class="kuc-time-picker-1-17-0__group__label"
+            class="kuc-time-picker-1-17-1__group__label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </legend>
-          <kuc-base-time-1-17-0
-            class="kuc-time-picker-1-17-0__group__input"
+          <kuc-base-time-1-17-1
+            class="kuc-time-picker-1-17-1__group__input"
             .value="${this._inputValue}"
             .hour12="${this.hour12}"
             .disabled="${this.disabled}"
@@ -1626,19 +1625,19 @@
             .language="${this._getLanguage()}"
             @kuc:base-time-change="${this._handleTimeChange}"
           >
-          </kuc-base-time-1-17-0>
-          <kuc-base-error-1-17-0
+          </kuc-base-time-1-17-1>
+          <kuc-base-error-1-17-1
             .text="${this._errorText}"
             .guid="${this._GUID}"
             ?hidden="${!this._errorText}"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </fieldset>
-      `}_handleTimeChange(e){e.preventDefault(),e.stopPropagation();const t={value:e.detail.value,oldValue:this.value};e.detail.error?(t.value=void 0,this.value=void 0,this._errorInvalid=e.detail.error,this.error=""):(this.value=e.detail.value,this._errorInvalid=""),this._inputValue=e.detail.value,gi(this,"change",t)}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}}jn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),jn([Fe({type:String})],e.prototype,"error",void 0),jn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),jn([Fe({type:String})],e.prototype,"label",void 0),jn([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),jn([Fe({type:String})],e.prototype,"max",void 0),jn([Fe({type:String})],e.prototype,"min",void 0),jn([Fe({type:String})],e.prototype,"value",void 0),jn([Fe({type:Boolean})],e.prototype,"disabled",void 0),jn([Fe({type:Boolean})],e.prototype,"hour12",void 0),jn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),jn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),jn([Fe({type:Number})],e.prototype,"timeStep",void 0),window.customElements.define("kuc-time-picker-1-17-0",e),mi('\nkuc-time-picker-1-17-0,\nkuc-time-picker-1-17-0 *,\nkuc-time-picker-1-17-0:lang(en),\nkuc-time-picker-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-time-picker-1-17-0:lang(ja),\nkuc-time-picker-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-time-picker-1-17-0:lang(zh),\nkuc-time-picker-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-time-picker-1-17-0:lang(zh-TW),\nkuc-time-picker-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\nkuc-time-picker-1-17-0 {\n  font-size: 14px;\n  color: var(--kuc-time-picker-input-color, #333333);\n  display: inline-table;\n  max-width: var(--kuc-time-picker-input-width, 85px);\n  width: var(--kuc-time-picker-input-width, 85px);\n  vertical-align: top;\n  line-height: 1.5;\n}\n.kuc-time-picker-1-17-0__group__input {\n  position: relative;\n}\nkuc-time-picker-1-17-0[hidden] {\n  display: none;\n}\n.kuc-time-picker-1-17-0__group {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0px;\n  height: auto;\n  margin: 0px;\n}\n\n.kuc-time-picker-1-17-0__group kuc-base-time-1-17-0 {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.kuc-time-picker-1-17-0__group .kuc-base-time-1-17-0__group {\n  max-width: var(--kuc-time-picker-input-width, 85px);\n  width: var(--kuc-time-picker-input-width, 85px);\n  font-size: var(--kuc-time-picker-input-font-size, 14px);\n  height: var(--kuc-time-picker-input-height, 40px);\n  color: var(--kuc-time-picker-input-color, #333333);\n}\n.kuc-time-picker-1-17-0__group .kuc-base-time-1-17-0__group input[type=text].kuc-base-time-1-17-0__group__hours,\n.kuc-time-picker-1-17-0__group .kuc-base-time-1-17-0__group input[type=text].kuc-base-time-1-17-0__group__minutes,\n.kuc-time-picker-1-17-0__group .kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__suffix,\n.kuc-time-picker-1-17-0__group .kuc-base-time-1-17-0__group--focus {\n  color: var(--kuc-time-picker-input-color, #333333);\n}\n.kuc-time-picker-1-17-0__group__label {\n  padding: 4px 0px 8px 0px;\n  display: inline-block;\n  white-space: nowrap;\n}\n.kuc-time-picker-1-17-0__group__label[hidden] {\n  display: none;\n}\n'),Gn=e}})();var Fn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Wn;(()=>{if(Wn=window.customElements.get("kuc-tooltip-1-17-0"),!Wn){class e extends bi{constructor(e){super(),this.className="",this.id="",this.placement="top",this.title="",this.container="",this.describeChild=!1,this._container="",this._GUID=fi();const t=vi(e);Object.assign(this,t),this._globalEscapeBound=this._globalEscape.bind(this)}update(e){e.has("container")&&(this._container=si(this.container)),super.update(e)}render(){return $e`
+      `}_handleTimeChange(e){e.preventDefault(),e.stopPropagation();const t={value:e.detail.value,oldValue:this.value};e.detail.error?(t.value=void 0,this.value=void 0,this._errorInvalid=e.detail.error,this.error=""):(this.value=e.detail.value,this._errorInvalid=""),this._inputValue=e.detail.value,gi(this,"change",t)}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}}jn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),jn([Ge({type:String})],e.prototype,"error",void 0),jn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),jn([Ge({type:String})],e.prototype,"label",void 0),jn([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),jn([Ge({type:String})],e.prototype,"max",void 0),jn([Ge({type:String})],e.prototype,"min",void 0),jn([Ge({type:String})],e.prototype,"value",void 0),jn([Ge({type:Boolean})],e.prototype,"disabled",void 0),jn([Ge({type:Boolean})],e.prototype,"hour12",void 0),jn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),jn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),jn([Ge({type:Number})],e.prototype,"timeStep",void 0),window.customElements.define("kuc-time-picker-1-17-1",e),mi('\nkuc-time-picker-1-17-1,\nkuc-time-picker-1-17-1 *,\nkuc-time-picker-1-17-1:lang(en),\nkuc-time-picker-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-time-picker-1-17-1:lang(ja),\nkuc-time-picker-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-time-picker-1-17-1:lang(zh),\nkuc-time-picker-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-time-picker-1-17-1:lang(zh-TW),\nkuc-time-picker-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\nkuc-time-picker-1-17-1 {\n  font-size: 14px;\n  color: var(--kuc-time-picker-input-color, #333333);\n  display: inline-table;\n  max-width: var(--kuc-time-picker-input-width, 85px);\n  width: var(--kuc-time-picker-input-width, 85px);\n  vertical-align: top;\n  line-height: 1.5;\n}\n.kuc-time-picker-1-17-1__group__input {\n  position: relative;\n}\nkuc-time-picker-1-17-1[hidden] {\n  display: none;\n}\n.kuc-time-picker-1-17-1__group {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0px;\n  height: auto;\n  margin: 0px;\n}\n\n.kuc-time-picker-1-17-1__group kuc-base-time-1-17-1 {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.kuc-time-picker-1-17-1__group .kuc-base-time-1-17-1__group {\n  max-width: var(--kuc-time-picker-input-width, 85px);\n  width: var(--kuc-time-picker-input-width, 85px);\n  font-size: var(--kuc-time-picker-input-font-size, 14px);\n  height: var(--kuc-time-picker-input-height, 40px);\n  color: var(--kuc-time-picker-input-color, #333333);\n}\n.kuc-time-picker-1-17-1__group .kuc-base-time-1-17-1__group input[type=text].kuc-base-time-1-17-1__group__hours,\n.kuc-time-picker-1-17-1__group .kuc-base-time-1-17-1__group input[type=text].kuc-base-time-1-17-1__group__minutes,\n.kuc-time-picker-1-17-1__group .kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__suffix,\n.kuc-time-picker-1-17-1__group .kuc-base-time-1-17-1__group--focus {\n  color: var(--kuc-time-picker-input-color, #333333);\n}\n.kuc-time-picker-1-17-1__group__label {\n  padding: 4px 0px 8px 0px;\n  display: inline-block;\n  white-space: nowrap;\n}\n.kuc-time-picker-1-17-1__group__label[hidden] {\n  display: none;\n}\n'),Gn=e}})();var Fn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Wn;(()=>{if(Wn=window.customElements.get("kuc-tooltip-1-17-1"),!Wn){class e extends bi{constructor(e){super(),this.className="",this.id="",this.placement="top",this.title="",this.container="",this.describeChild=!1,this._container="",this._GUID=fi();const t=vi(e);Object.assign(this,t),this._globalEscapeBound=this._globalEscape.bind(this)}update(e){e.has("container")&&(this._container=ai(this.container)),super.update(e)}render(){return we`
         <div
-          class="kuc-tooltip-1-17-0__group kuc-tooltip-1-17-0__group--${this._getPlacement()}"
+          class="kuc-tooltip-1-17-1__group kuc-tooltip-1-17-1__group--${this._getPlacement()}"
         >
           <div
-            class="kuc-tooltip-1-17-0__group__container"
+            class="kuc-tooltip-1-17-1__group__container"
             @focusin="${this._handleFocusinContainer}"
             @focusout="${this._handleFocusoutContainer}"
             @mouseenter="${this._handleMouseEnterContainer}"
@@ -1649,33 +1648,33 @@
           </div>
           ${this._getTitleTemplate()}
         </div>
-      `}updated(){this._initializeFirstChildElement(),this.describeChild?this._setChildTitleAttribute():this._setChildAriaLabelAttribute()}_handleMouseEnterContainer(){this._openTooltip()}_handleTouchStartContainer(){this._openTooltip()}_handleMouseLeaveContainer(e){const t=e.relatedTarget;this._titleWrapper&&this._titleWrapper.contains(t)||this._closeTooltip()}_initializeFirstChildElement(){if("string"!=typeof this._container){const e=this._groupContainerEL.firstElementChild;e&&!e.getAttribute("aria-describedby")&&(this._firstChildEl=e)}}_setChildTitleAttribute(){this._firstChildEl&&(this._firstChildEl.setAttribute("title",this.title),this._firstChildEl.removeAttribute("aria-label"))}_setChildAriaLabelAttribute(){this._firstChildEl&&(this._firstChildEl.setAttribute("aria-label",this.title),this._firstChildEl.removeAttribute("title"))}_getTitleTemplate(){return this.title?$e`
+      `}updated(){this._initializeFirstChildElement(),this.describeChild?this._setChildTitleAttribute():this._setChildAriaLabelAttribute()}_handleMouseEnterContainer(){this._openTooltip()}_handleTouchStartContainer(){this._openTooltip()}_handleMouseLeaveContainer(e){const t=e.relatedTarget;this._titleWrapper&&this._titleWrapper.contains(t)||this._closeTooltip()}_initializeFirstChildElement(){if("string"!=typeof this._container){const e=this._groupContainerEL.firstElementChild;e&&!e.getAttribute("aria-describedby")&&(this._firstChildEl=e)}}_setChildTitleAttribute(){this._firstChildEl&&(this._firstChildEl.setAttribute("title",this.title),this._firstChildEl.removeAttribute("aria-label"))}_setChildAriaLabelAttribute(){this._firstChildEl&&(this._firstChildEl.setAttribute("aria-label",this.title),this._firstChildEl.removeAttribute("title"))}_getTitleTemplate(){return this.title?we`
         <div
           id="${this._GUID}-title"
-          class="kuc-tooltip-1-17-0__group__title kuc-tooltip-1-17-0__group__title--hidden"
+          class="kuc-tooltip-1-17-1__group__title kuc-tooltip-1-17-1__group__title--hidden"
           role="tooltip"
           @mouseleave="${this._handleMouseLeaveTitle}"
         >
-          <div class="kuc-tooltip-1-17-0__group__title__wrapper">
-            <div class="kuc-tooltip-1-17-0__group__title__wrapper__arrow"></div>
-            <div class="kuc-tooltip-1-17-0__group__title__wrapper__text">
+          <div class="kuc-tooltip-1-17-1__group__title__wrapper">
+            <div class="kuc-tooltip-1-17-1__group__title__wrapper__arrow"></div>
+            <div class="kuc-tooltip-1-17-1__group__title__wrapper__text">
               ${this.title}
             </div>
           </div>
         </div>
-      `:$e``}_handleMouseLeaveTitle(e){const t=e.relatedTarget;this._groupContainerEL.contains(t)||this._closeTooltip()}_handleFocusinContainer(){this._openTooltip()}_handleFocusoutContainer(){this._closeTooltip()}_openTooltip(){this._updateChildElementAttributes(!0),this._showTooltip(),this._attachGlobalListener()}_closeTooltip(){this._updateChildElementAttributes(!1),this._hideTooltip(),this._removeGlobalListener()}_updateChildElementAttributes(e){if(this._firstChildEl&&this.describeChild){if(e)return this._firstChildEl.removeAttribute("title"),void this._firstChildEl.setAttribute("aria-describedby",`${this._GUID}-title`);this._firstChildEl.removeAttribute("aria-describedby"),this._firstChildEl.setAttribute("title",this.title)}}_showTooltip(){0!==this._tooltips.length&&this._tooltips.forEach((e=>{e.id===`${this._GUID}-title`&&e.classList.remove("kuc-tooltip-1-17-0__group__title--hidden")}))}_hideTooltip(){0!==this._tooltips.length&&this._tooltips.forEach((e=>{e.id===`${this._GUID}-title`&&e.classList.add("kuc-tooltip-1-17-0__group__title--hidden")}))}_attachGlobalListener(){document.addEventListener("keydown",this._globalEscapeBound)}_removeGlobalListener(){document.removeEventListener("keydown",this._globalEscapeBound)}_globalEscape(e){"Escape"!==e.key&&"Esc"!==e.key||this._closeTooltip()}_getPlacement(){return["top","bottom","left","right"].includes(this.placement)?this.placement:"top"}}Fn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Fn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Fn([Fe({type:String})],e.prototype,"placement",void 0),Fn([Fe({type:String})],e.prototype,"title",void 0),Fn([Fe()],e.prototype,"container",void 0),Fn([Fe({type:Boolean})],e.prototype,"describeChild",void 0),Fn([Ke(".kuc-tooltip-1-17-0__group__container")],e.prototype,"_groupContainerEL",void 0),Fn([Ke(".kuc-tooltip-1-17-0__group__title__wrapper")],e.prototype,"_titleWrapper",void 0),Fn([Je(".kuc-tooltip-1-17-0__group__title")],e.prototype,"_tooltips",void 0),window.customElements.define("kuc-tooltip-1-17-0",e),mi('\n  kuc-tooltip-1-17-0,\n  kuc-tooltip-1-17-0 *,\n  kuc-tooltip-1-17-0:lang(en),\n  kuc-tooltip-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-tooltip-1-17-0:lang(ja),\n  kuc-tooltip-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-tooltip-1-17-0:lang(zh),\n  kuc-tooltip-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-tooltip-1-17-0:lang(zh-TW),\n  kuc-tooltip-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  .kuc-tooltip-1-17-0__group__title--hidden {\n    display: none;\n  }\n  .kuc-tooltip-1-17-0__group {\n    position: relative;\n    display: inline-block;\n  }\n  .kuc-tooltip-1-17-0__group::after {\n    position: absolute;\n    right: -20%;\n    top: 100%;\n    left: -20%;\n    display: block;\n    height: calc(0.5em * 2);\n  }\n  .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper__text {\n    max-width: var(--kuc-tooltip-width, 250px);\n    width: var(--kuc-tooltip-width, auto);\n    min-height: var(--kuc-tooltip-height, 32px);;\n    height: var(--kuc-tooltip-height, auto);\n    padding: 6px 8px;\n    color: var(--kuc-tooltip-color, #ffffff);\n    text-align: start;\n    text-decoration: none;\n    word-wrap: break-word;\n    overflow: auto;\n    white-space: normal;\n    background-color: var(--kuc-tooltip-background-color, #000000);\n    font-size: var(--kuc-tooltip-font-size);\n    border-radius: 6px;\n    box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);\n    box-sizing: border-box;\n  }\n  .kuc-tooltip-1-17-0__group__title {\n    position: absolute;\n    top: calc(100% + calc(0.5em * 2));\n    left: 50%;\n    transform: translateX(-50%);\n    margin: 0;\n    border-radius: 0.25em;\n    color: var(--kuc-tooltip-color, #ffffff);\n    width: max-content;\n    z-index: 1000;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--top > .kuc-tooltip-1-17-0__group__title {\n    top: unset;\n    bottom: 100%;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--bottom > .kuc-tooltip-1-17-0__group__title {\n    width: max-content;\n    top: auto;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--left > .kuc-tooltip-1-17-0__group__title {\n    width: max-content;\n    height: fit-content;\n    margin: auto 0;\n    right: 100%;\n    left: auto;\n    top: 0;\n    bottom: 0;\n    transform: translateX(0);\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--right > .kuc-tooltip-1-17-0__group__title {\n    width: max-content;\n    height: fit-content;\n    margin: auto 0;\n    left: 100%;\n    top: 0;\n    bottom: 0;\n    transform: translateX(0);\n  }\n  .kuc-tooltip-1-17-0__group .kuc-tooltip-1-17-0__group__title__wrapper__arrow {\n    border: 0.5em solid transparent;\n    border-bottom-color: var(--kuc-tooltip-background-color, #000000);\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--top > .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper__arrow {\n    border-top-color: var(--kuc-tooltip-background-color, #000000);\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    margin: auto 0;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--left > .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper__arrow {\n    border-left-color: var(--kuc-tooltip-background-color, #000000);\n    border-bottom-color: transparent;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--right > .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper__arrow {\n    border-right-color: var(--kuc-tooltip-background-color, #000000);\n    border-bottom-color: transparent;\n    width: fit-content;\n    height: fit-content;\n    margin: auto 0;\n    top: 0;\n    bottom: 0;\n    right: 100%;\n    left: auto;\n  }\n  .kuc-tooltip-1-17-0__group .kuc-tooltip-1-17-0__group__title__wrapper {\n    display: flex;\n    align-items: center;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--top > .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper {\n    flex-direction: column-reverse;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--bottom > .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper {\n    flex-direction: column;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--left > .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper {\n    flex-direction: row-reverse;\n  }\n'),Wn=e}})();var qn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Kn;(()=>{if(Kn=window.customElements.get("kuc-mobile-button-1-17-0"),!Kn){class e extends bi{constructor(e){super(),this.className="",this.id="",this.text="",this.type="normal",this.content="",this.disabled=!1,this.visible=!0;const t=vi(e);Object.assign(this,t)}_handleClickButton(e){e.stopPropagation(),gi(this,"click")}_getButtonColorType(){return"normal"===this.type||"submit"===this.type?this.type:"normal"}render(){return $e`
+      `:we``}_handleMouseLeaveTitle(e){const t=e.relatedTarget;this._groupContainerEL.contains(t)||this._closeTooltip()}_handleFocusinContainer(){this._openTooltip()}_handleFocusoutContainer(){this._closeTooltip()}_openTooltip(){this._updateChildElementAttributes(!0),this._showTooltip(),this._attachGlobalListener()}_closeTooltip(){this._updateChildElementAttributes(!1),this._hideTooltip(),this._removeGlobalListener()}_updateChildElementAttributes(e){if(this._firstChildEl&&this.describeChild){if(e)return this._firstChildEl.removeAttribute("title"),void this._firstChildEl.setAttribute("aria-describedby",`${this._GUID}-title`);this._firstChildEl.removeAttribute("aria-describedby"),this._firstChildEl.setAttribute("title",this.title)}}_showTooltip(){0!==this._tooltips.length&&this._tooltips.forEach((e=>{e.id===`${this._GUID}-title`&&e.classList.remove("kuc-tooltip-1-17-1__group__title--hidden")}))}_hideTooltip(){0!==this._tooltips.length&&this._tooltips.forEach((e=>{e.id===`${this._GUID}-title`&&e.classList.add("kuc-tooltip-1-17-1__group__title--hidden")}))}_attachGlobalListener(){document.addEventListener("keydown",this._globalEscapeBound)}_removeGlobalListener(){document.removeEventListener("keydown",this._globalEscapeBound)}_globalEscape(e){"Escape"!==e.key&&"Esc"!==e.key||this._closeTooltip()}_getPlacement(){return["top","bottom","left","right"].includes(this.placement)?this.placement:"top"}}Fn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Fn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Fn([Ge({type:String})],e.prototype,"placement",void 0),Fn([Ge({type:String})],e.prototype,"title",void 0),Fn([Ge()],e.prototype,"container",void 0),Fn([Ge({type:Boolean})],e.prototype,"describeChild",void 0),Fn([qe(".kuc-tooltip-1-17-1__group__container")],e.prototype,"_groupContainerEL",void 0),Fn([qe(".kuc-tooltip-1-17-1__group__title__wrapper")],e.prototype,"_titleWrapper",void 0),Fn([Ye(".kuc-tooltip-1-17-1__group__title")],e.prototype,"_tooltips",void 0),window.customElements.define("kuc-tooltip-1-17-1",e),mi('\n  kuc-tooltip-1-17-1,\n  kuc-tooltip-1-17-1 *,\n  kuc-tooltip-1-17-1:lang(en),\n  kuc-tooltip-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-tooltip-1-17-1:lang(ja),\n  kuc-tooltip-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-tooltip-1-17-1:lang(zh),\n  kuc-tooltip-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-tooltip-1-17-1:lang(zh-TW),\n  kuc-tooltip-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  .kuc-tooltip-1-17-1__group__title--hidden {\n    display: none;\n  }\n  .kuc-tooltip-1-17-1__group {\n    position: relative;\n    display: inline-block;\n  }\n  .kuc-tooltip-1-17-1__group::after {\n    position: absolute;\n    right: -20%;\n    top: 100%;\n    left: -20%;\n    display: block;\n    height: calc(0.5em * 2);\n  }\n  .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper__text {\n    max-width: var(--kuc-tooltip-width, 250px);\n    width: var(--kuc-tooltip-width, auto);\n    min-height: var(--kuc-tooltip-height, 32px);;\n    height: var(--kuc-tooltip-height, auto);\n    padding: 6px 8px;\n    color: var(--kuc-tooltip-color, #ffffff);\n    text-align: start;\n    text-decoration: none;\n    word-wrap: break-word;\n    overflow: auto;\n    white-space: normal;\n    background-color: var(--kuc-tooltip-background-color, #000000);\n    font-size: var(--kuc-tooltip-font-size);\n    border-radius: 6px;\n    box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);\n    box-sizing: border-box;\n  }\n  .kuc-tooltip-1-17-1__group__title {\n    position: absolute;\n    top: calc(100% + calc(0.5em * 2));\n    left: 50%;\n    transform: translateX(-50%);\n    margin: 0;\n    border-radius: 0.25em;\n    color: var(--kuc-tooltip-color, #ffffff);\n    width: max-content;\n    z-index: 1000;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--top > .kuc-tooltip-1-17-1__group__title {\n    top: unset;\n    bottom: 100%;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--bottom > .kuc-tooltip-1-17-1__group__title {\n    width: max-content;\n    top: auto;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--left > .kuc-tooltip-1-17-1__group__title {\n    width: max-content;\n    height: fit-content;\n    margin: auto 0;\n    right: 100%;\n    left: auto;\n    top: 0;\n    bottom: 0;\n    transform: translateX(0);\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--right > .kuc-tooltip-1-17-1__group__title {\n    width: max-content;\n    height: fit-content;\n    margin: auto 0;\n    left: 100%;\n    top: 0;\n    bottom: 0;\n    transform: translateX(0);\n  }\n  .kuc-tooltip-1-17-1__group .kuc-tooltip-1-17-1__group__title__wrapper__arrow {\n    border: 0.5em solid transparent;\n    border-bottom-color: var(--kuc-tooltip-background-color, #000000);\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--top > .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper__arrow {\n    border-top-color: var(--kuc-tooltip-background-color, #000000);\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    margin: auto 0;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--left > .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper__arrow {\n    border-left-color: var(--kuc-tooltip-background-color, #000000);\n    border-bottom-color: transparent;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--right > .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper__arrow {\n    border-right-color: var(--kuc-tooltip-background-color, #000000);\n    border-bottom-color: transparent;\n    width: fit-content;\n    height: fit-content;\n    margin: auto 0;\n    top: 0;\n    bottom: 0;\n    right: 100%;\n    left: auto;\n  }\n  .kuc-tooltip-1-17-1__group .kuc-tooltip-1-17-1__group__title__wrapper {\n    display: flex;\n    align-items: center;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--top > .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper {\n    flex-direction: column-reverse;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--bottom > .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper {\n    flex-direction: column;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--left > .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper {\n    flex-direction: row-reverse;\n  }\n'),Wn=e}})();var qn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Kn;(()=>{if(Kn=window.customElements.get("kuc-mobile-button-1-17-1"),!Kn){class e extends bi{constructor(e){super(),this.className="",this.id="",this.text="",this.type="normal",this.content="",this.disabled=!1,this.visible=!0;const t=vi(e);Object.assign(this,t)}_handleClickButton(e){e.stopPropagation(),gi(this,"click")}_getButtonColorType(){return"normal"===this.type||"submit"===this.type?this.type:"normal"}render(){return we`
         <button
           type="button"
-          class="kuc-mobile-button-1-17-0__button kuc-mobile-button-1-17-0__button--${this._getButtonColorType()}"
+          class="kuc-mobile-button-1-17-1__button kuc-mobile-button-1-17-1__button--${this._getButtonColorType()}"
           ?disabled="${this.disabled}"
           @click="${this._handleClickButton}"
         >
-          ${this.content?si(this.content):this.text}
+          ${this.content?ai(this.content):this.text}
         </button>
-      `}}qn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),qn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),qn([Fe({type:String})],e.prototype,"text",void 0),qn([Fe({type:String})],e.prototype,"type",void 0),qn([Fe()],e.prototype,"content",void 0),qn([Fe({type:Boolean})],e.prototype,"disabled",void 0),qn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),window.customElements.define("kuc-mobile-button-1-17-0",e),mi('\n  kuc-mobile-button-1-17-0,\n  kuc-mobile-button-1-17-0 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-button-1-17-0:lang(zh),\n  kuc-mobile-button-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-button-1-17-0:lang(zh-TW),\n  kuc-mobile-button-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-button-1-17-0 {\n    display: inline-block;\n    vertical-align: top;\n  }\n  kuc-mobile-button-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-mobile-button-1-17-0__button {\n    min-width: var(--kuc-mobile-button-width, 100px);\n    width: var(--kuc-mobile-button-width, auto);\n    height: var(--kuc-mobile-button-height, 42px);\n    padding: 0 12px;\n    user-select: none;\n    font-weight: 700;\n    font-size: var(--kuc-mobile-button-font-size, 14px);\n    line-height: 1;\n    display: grid;\n    align-items: center;\n    align-content: center;\n  }\n  .kuc-mobile-button-1-17-0__button:focus {\n    outline: none;\n  }\n  .kuc-mobile-button-1-17-0__button--submit {\n    border: 2px solid;\n    border-color: var(--kuc-mobile-button-background-color, #206694);\n    background-color: var(--kuc-mobile-button-background-color, #206694);\n    color: var(--kuc-mobile-button-text-color, #ffffff);\n    border-radius: 6px;\n  }\n  .kuc-mobile-button-1-17-0__button--submit:focus {\n    border-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #206694));\n  }\n  .kuc-mobile-button-1-17-0__button--submit:active {\n    border-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #206694));\n  }\n  .kuc-mobile-button-1-17-0__button--submit:disabled {\n    color: #ffffff;\n    border-color: #a5a5a5;\n    background: #a5a5a5;\n  }\n  .kuc-mobile-button-1-17-0__button--normal {\n    border: 2px solid;\n    border-color: var(--kuc-mobile-button-background-color, #206694);\n    background-color: var(--kuc-mobile-button-background-color, #ffffff);\n    color: var(--kuc-mobile-button-text-color, #206694);\n    border-radius: 6px;\n  }\n  .kuc-mobile-button-1-17-0__button--normal:focus {\n    border-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #ffffff));\n  }\n  .kuc-mobile-button-1-17-0__button--normal:active {\n    border-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #ffffff));\n  }\n  .kuc-mobile-button-1-17-0__button--normal:disabled {\n    color: #a5a5a5;\n    border-color: #a5a5a5;\n    background-color: #ffffff;\n    cursor: default;\n  }\n'),Kn=e}})();var Yn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Jn extends bi{constructor(){super(...arguments),this.ariaLive="",this.guid="",this.text=""}render(){return $e`
-      ${this.ariaLive&&""!==this.ariaLive?$e`
+      `}}qn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),qn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),qn([Ge({type:String})],e.prototype,"text",void 0),qn([Ge({type:String})],e.prototype,"type",void 0),qn([Ge()],e.prototype,"content",void 0),qn([Ge({type:Boolean})],e.prototype,"disabled",void 0),qn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),window.customElements.define("kuc-mobile-button-1-17-1",e),mi('\n  kuc-mobile-button-1-17-1,\n  kuc-mobile-button-1-17-1 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-button-1-17-1:lang(zh),\n  kuc-mobile-button-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-button-1-17-1:lang(zh-TW),\n  kuc-mobile-button-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-button-1-17-1 {\n    display: inline-block;\n    vertical-align: top;\n  }\n  kuc-mobile-button-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-mobile-button-1-17-1__button {\n    min-width: var(--kuc-mobile-button-width, 100px);\n    width: var(--kuc-mobile-button-width, auto);\n    height: var(--kuc-mobile-button-height, 42px);\n    padding: 0 12px;\n    user-select: none;\n    font-weight: 700;\n    font-size: var(--kuc-mobile-button-font-size, 14px);\n    line-height: 1;\n    display: grid;\n    align-items: center;\n    align-content: center;\n  }\n  .kuc-mobile-button-1-17-1__button:focus {\n    outline: none;\n  }\n  .kuc-mobile-button-1-17-1__button--submit {\n    border: 2px solid;\n    border-color: var(--kuc-mobile-button-background-color, #206694);\n    background-color: var(--kuc-mobile-button-background-color, #206694);\n    color: var(--kuc-mobile-button-text-color, #ffffff);\n    border-radius: 6px;\n  }\n  .kuc-mobile-button-1-17-1__button--submit:focus {\n    border-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #206694));\n  }\n  .kuc-mobile-button-1-17-1__button--submit:active {\n    border-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #206694));\n  }\n  .kuc-mobile-button-1-17-1__button--submit:disabled {\n    color: #ffffff;\n    border-color: #a5a5a5;\n    background: #a5a5a5;\n  }\n  .kuc-mobile-button-1-17-1__button--normal {\n    border: 2px solid;\n    border-color: var(--kuc-mobile-button-background-color, #206694);\n    background-color: var(--kuc-mobile-button-background-color, #ffffff);\n    color: var(--kuc-mobile-button-text-color, #206694);\n    border-radius: 6px;\n  }\n  .kuc-mobile-button-1-17-1__button--normal:focus {\n    border-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #ffffff));\n  }\n  .kuc-mobile-button-1-17-1__button--normal:active {\n    border-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #ffffff));\n  }\n  .kuc-mobile-button-1-17-1__button--normal:disabled {\n    color: #a5a5a5;\n    border-color: #a5a5a5;\n    background-color: #ffffff;\n    cursor: default;\n  }\n'),Kn=e}})();var Yn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Jn extends bi{constructor(){super(...arguments),this.ariaLive="",this.guid="",this.text=""}render(){return we`
+      ${this.ariaLive&&""!==this.ariaLive?we`
             <div
-              class="kuc-base-mobile-error-1-17-0__error"
+              class="kuc-base-mobile-error-1-17-1__error"
               .id="${this.guid}-error"
               role="alert"
               aria-live="${this.ariaLive}"
@@ -1683,9 +1682,9 @@
             >
               ${this.text}
             </div>
-          `:$e`
+          `:we`
             <div
-              class="kuc-base-mobile-error-1-17-0__error"
+              class="kuc-base-mobile-error-1-17-1__error"
               .id="${this.guid}-error"
               role="alert"
               ?hidden="${!this.text}"
@@ -1693,20 +1692,20 @@
               ${this.text}
             </div>
           `}
-    `}}Yn([Fe({type:String})],Jn.prototype,"ariaLive",void 0),Yn([Fe({type:String})],Jn.prototype,"guid",void 0),Yn([Fe({type:String})],Jn.prototype,"text",void 0),window.customElements.get("kuc-base-mobile-error-1-17-0")||(mi('\n  kuc-base-mobile-error-1-17-0 {\n    display: block;\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-base-mobile-error-1-17-0:lang(zh),\n  kuc-base-mobile-error-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-base-mobile-error-1-17-0:lang(zh-TW),\n  kuc-base-mobile-error-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-base-mobile-error-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-base-mobile-error-1-17-0__error {\n    line-height: 1.5;\n    color: #000000;\n    background-color: #fdffc9;\n    border: 1px solid #e5db68;\n    border-radius: 0.4em;\n    padding: 0.4em 1em;\n    margin-top: 0.3em;\n    margin-left: 0.5em;\n  }\n  .kuc-base-mobile-error-1-17-0__error[hidden] {\n    display: none;\n  }\n'),window.customElements.define("kuc-base-mobile-error-1-17-0",Jn));var Zn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Xn extends bi{constructor(){super(...arguments),this.requiredIcon=!1,this.guid="",this.text=""}render(){return $e`
+    `}}Yn([Ge({type:String})],Jn.prototype,"ariaLive",void 0),Yn([Ge({type:String})],Jn.prototype,"guid",void 0),Yn([Ge({type:String})],Jn.prototype,"text",void 0),window.customElements.get("kuc-base-mobile-error-1-17-1")||(mi('\n  kuc-base-mobile-error-1-17-1 {\n    display: block;\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-base-mobile-error-1-17-1:lang(zh),\n  kuc-base-mobile-error-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-base-mobile-error-1-17-1:lang(zh-TW),\n  kuc-base-mobile-error-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-base-mobile-error-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-base-mobile-error-1-17-1__error {\n    line-height: 1.5;\n    color: #000000;\n    background-color: #fdffc9;\n    border: 1px solid #e5db68;\n    border-radius: 0.4em;\n    padding: 0.4em 1em;\n    margin-top: 0.3em;\n    margin-left: 0.5em;\n  }\n  .kuc-base-mobile-error-1-17-1__error[hidden] {\n    display: none;\n  }\n'),window.customElements.define("kuc-base-mobile-error-1-17-1",Jn));var Zn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Xn extends bi{constructor(){super(...arguments),this.requiredIcon=!1,this.guid="",this.text=""}render(){return we`
       ${this._getTextTemplate()}
       <span
-        class="kuc-base-mobile-label-1-17-0__required-icon"
+        class="kuc-base-mobile-label-1-17-1__required-icon"
         ?hidden="${!this.requiredIcon}"
         >*</span
       >
-    `}_getTextTemplate(){return this.guid&&""!==this.guid?$e`
-          <span class="kuc-base-mobile-label-1-17-0__text" .id="${this.guid}-group"
+    `}_getTextTemplate(){return this.guid&&""!==this.guid?we`
+          <span class="kuc-base-mobile-label-1-17-1__text" .id="${this.guid}-group"
             >${this.text}</span
           >
-        `:$e` <span class="kuc-base-mobile-label-1-17-0__text">${this.text}</span> `}}Zn([Fe({type:Boolean})],Xn.prototype,"requiredIcon",void 0),Zn([Fe({type:String})],Xn.prototype,"guid",void 0),Zn([Fe({type:String})],Xn.prototype,"text",void 0),window.customElements.get("kuc-base-mobile-label-1-17-0")||(mi('\n  kuc-base-mobile-label-1-17-0 {\n    display: inline-table;\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-base-mobile-label-1-17-0:lang(zh) ,\n  kuc-base-mobile-label-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-base-mobile-label-1-17-0:lang(zh-TW),\n  kuc-base-mobile-label-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-base-mobile-label-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-base-mobile-label-1-17-0__text {\n    text-shadow: 0 1px 0 #ffffff;\n    color: #888888;\n    white-space: normal;\n    font-size: 86%;\n  }\n  .kuc-base-mobile-label-1-17-0__required-icon {\n    font-size: 86%;\n    position: relative;\n    left: 3px;\n    color: #d01212;\n  }\n  .kuc-base-mobile-label-1-17-0__required-icon[hidden] {\n    display: none;\n  }\n'),window.customElements.define("kuc-base-mobile-label-1-17-0",Xn));var Qn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let eo;(()=>{if(eo=window.customElements.get("kuc-mobile-checkbox-1-17-0"),!eo){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}_getNewValueMapping(e,t){const i=parseInt(t,10),n=Object.keys(this._valueMapping),o={...this._valueMapping};return n.indexOf(t)>-1?(delete o[i],o):(o[i]=e,o)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.dataset.index||"0",n=t.value,o=this.value?[...this.value]:this.value,a=this._getNewValueMapping(n,i),s=this.items.map((e=>e.value)),r=Object.values(a).filter((e=>s.indexOf(e)>-1));if(r===o)return;const l=Object.keys(a).map((e=>parseInt(e,10)));this.value=r,this.selectedIndex=l,gi(this,"change",{oldValue:o,value:r})}_getCheckboxIconSvgTemplate(e){return Ce`
+        `:we` <span class="kuc-base-mobile-label-1-17-1__text">${this.text}</span> `}}Zn([Ge({type:Boolean})],Xn.prototype,"requiredIcon",void 0),Zn([Ge({type:String})],Xn.prototype,"guid",void 0),Zn([Ge({type:String})],Xn.prototype,"text",void 0),window.customElements.get("kuc-base-mobile-label-1-17-1")||(mi('\n  kuc-base-mobile-label-1-17-1 {\n    display: inline-table;\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-base-mobile-label-1-17-1:lang(zh) ,\n  kuc-base-mobile-label-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-base-mobile-label-1-17-1:lang(zh-TW),\n  kuc-base-mobile-label-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-base-mobile-label-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-base-mobile-label-1-17-1__text {\n    text-shadow: 0 1px 0 #ffffff;\n    color: #888888;\n    white-space: normal;\n    font-size: 86%;\n  }\n  .kuc-base-mobile-label-1-17-1__required-icon {\n    font-size: 86%;\n    position: relative;\n    left: 3px;\n    color: #d01212;\n  }\n  .kuc-base-mobile-label-1-17-1__required-icon[hidden] {\n    display: none;\n  }\n'),window.customElements.define("kuc-base-mobile-label-1-17-1",Xn));var Qn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let eo;(()=>{if(eo=window.customElements.get("kuc-mobile-checkbox-1-17-1"),!eo){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}_getNewValueMapping(e,t){const i=parseInt(t,10),n=Object.keys(this._valueMapping),o={...this._valueMapping};return n.indexOf(t)>-1?(delete o[i],o):(o[i]=e,o)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.dataset.index||"0",n=t.value,o=this.value?[...this.value]:this.value,a=this._getNewValueMapping(n,i),s=this.items.map((e=>e.value)),r=Object.values(a).filter((e=>s.indexOf(e)>-1));if(r===o)return;const l=Object.keys(a).map((e=>parseInt(e,10)));this.value=r,this.selectedIndex=l,gi(this,"change",{oldValue:o,value:r})}_getCheckboxIconSvgTemplate(e){return $e`
        <svg
-         class="kuc-mobile-checkbox-1-17-0__group__select-menu__item__label__icon"
+         class="kuc-mobile-checkbox-1-17-1__group__select-menu__item__label__icon"
          xmlns="http://www.w3.org/2000/svg"
          x="0px"
          y="0px"
@@ -1717,16 +1716,16 @@
          xml:space="preserve">
          <image width="44" height="34" x="0" y="0" href="${this._getSVGStrokeValue(e)}"/>
       </svg>
-       `}_getSVGStrokeValue(e){return e?"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAiCAQAAACOh/P6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN RQfkCQcFITUNIbrXAAADHklEQVRIx63US2sTURQH8P9kmsykQtoMSbStreZRkRBxY3BR7EJwEyuo WQiCmy4EBXHhyi8g4qYfQCjYpRgQBK0GEoUmohYUsURjKz4WrTTNNDYzmUcz42Lymkfz0nN298z9 zeXcM0OgJeLoJxLkhTn14+P5uJJoWR3oy9Kx5xcCl6s4RybuQ2muk60PhXtmWc/xh8GL+0GBnvGu 599D/S9wwetOH51yg4UEt4H+B7jgZVKTkX0oQYUKEcNwttB9wwUvkwpFHOCg1lLEMOgZX43uE9ZY OwTdqgh3g7b12NYGG4yQ4KEYkoUD9nsnfX2NW8HLpAIRG3iLGge2/G32AweiZ1hjCUuWB8vlr6+8 gWRqBetRFljPXmiC4CaZlD+iWjRBAQeWy19bSaMACWiFCW5yKB24MpQueK3ZWHRwORRRLFke23VW hAoQTTYWpZMBFwkRPz4VT3s2zSydDLkEwyTUm8Dp2CZMxKJ0MuiqoAInSPw00Inaa/+gasEK2FnL Xi3km2wdJmJROul3lWrbnLDr6IShrg8R5bXXs5t5sJCa/wpbnT3sYiE3rkHEeIRJab1OmOqtKWjs Z2zFxSYLDGjsIVdRdxoOCsYjxGrlzNPl2AlzvR4yeI1l47K+QsJxbGnMV8Ru45vXUoKKEap8KVCi H0y4tkx1FSpkVHRsTgdTeEdOgSEstvHwU9TZUWrDkt2FaDitHkaBK2ZHThEMTFsV7MCHX5ZsFZKp CXpYhcRzxczoNMFYbWdRtWBVyBa9NZwY1TptY1R0k4CQeXtj84vxyowwoGj02LSNUTqyBCrPn93k vmPbOAlmuAeaRGVx8RbWUYrvGofPCm7QB6dtTHVPdgCCxv6JW4y1NdwFbYfYht0bRlzJSTzHLh04 Yp8wj5gDUlu2DRxGWMlJXPnrK3+ACulbSHdk28JAWMlJkFYz/qAjJDdOS0PuyHaAa7S8mg0EHSEJ KkjQEB69uN2J7QgDYTUnazQVUkCBvftyDuvYac92AbfSzhB7JzOPDZQ7sV3BDXrJkV1+gt/g4kon Vg8TbZ8kMQg7BAjogtXHX2EwhA6/OKOlAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA5LTA3VDA1 OjMzOjUzKzAwOjAwOdR5sgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wOS0wN1QwNTozMzo1Mysw MDowMEiJwQ4AAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAiCAQAAACOh/P6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN RQfkCQcFIRBGJW6QAAACvklEQVRIx6XWQZKbRhSA4Z8GBhACenwC5wZUypXKMlRlmUVcXrtKHMEn meQEUmWfmnHZe65ATpDcIA3MMGKEhBdgGRAaWZqnjarp94H6PTWtNWg0tPEX54fARNzwT72qed8b Ny6weqFzhbO0Fg1rHlf9Ky+CdSw5X3q/O+x4WAro0S+ADSw5T4LQw6LBRFt+5rc9LV7CeokMA1xs bOYE+MvPixfCBpb0ExkGzDDR0bFG9EVwywahzwwDAWiIPf1pcSHcZ/U90NIuHrObv+UF8DTb0hoG utKjd+qgKzSA/R9mirWlN8lCw5Yn9RT9kh4shc6VtJdXUp9ENQzs18fZmkrdR2/Sr4/QC+e1dWuG m3AdVaqeYJ3QS3zp4xxhi+jHdD//215xF84TV17xRJEWI7pl/SSQ8wl2x5a1uu+xvaW4C/3kWl4T IJGhn1jSGLCz0E+k9HC6Bhuyj2nxg0r7o92cj13aDBsXn6BHt6yXSOlhY3QFHrJ59L/KOIA/9tJ0 dGYdbUsD0WOtSbZMs0ipnMcxfDtKE+jMCJBh8K8b2rgn2DzKVM6aYbkNcG496Q7SBOAAQhpJ/cG8 8eT8BFsx7iIBRmSmBmKQJtBx8HklXy2vL2BBwK//raNNumM3umBg4xFwrGTPsV3xflZ5VKbbEa2h Y2Jhoh+w9Ql2324/HaEFYrRIsGNDedd2wjEWxNctZ5o+jB0bylX2VqniGXawCX0PvWPDwyqLFcVB gx2FITtBt2weKwoqts/+sgGcd3Q9SX9j70+yI7giR6ksKu82B/SQPVWJEVxTUaBU9rZcDelz2YNX U03TfuIGd2F29z2fnTgJbaloaCAGd2Gitewf+YfsDHbyiLWlar/EMFvobCjjfJXxcAZ75Oy26+gm 3mIuqrhYZTyexR49FLZ0wyY2/qzSkpKns1jQmrOmf398ARuVc7WA4gOtAAAAJXRFWHRkYXRlOmNy ZWF0ZQAyMDIwLTA5LTA3VDA1OjMzOjE2KzAwOjAw76ZY7wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAy MC0wOS0wN1QwNTozMzoxNiswMDowMJ774FMAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVh ZHlxyWU8AAAAAElFTkSuQmCC"}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return $e`
+       `}_getSVGStrokeValue(e){return e?"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAiCAQAAACOh/P6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN RQfkCQcFITUNIbrXAAADHklEQVRIx63US2sTURQH8P9kmsykQtoMSbStreZRkRBxY3BR7EJwEyuo WQiCmy4EBXHhyi8g4qYfQCjYpRgQBK0GEoUmohYUsURjKz4WrTTNNDYzmUcz42Lymkfz0nN298z9 zeXcM0OgJeLoJxLkhTn14+P5uJJoWR3oy9Kx5xcCl6s4RybuQ2muk60PhXtmWc/xh8GL+0GBnvGu 599D/S9wwetOH51yg4UEt4H+B7jgZVKTkX0oQYUKEcNwttB9wwUvkwpFHOCg1lLEMOgZX43uE9ZY OwTdqgh3g7b12NYGG4yQ4KEYkoUD9nsnfX2NW8HLpAIRG3iLGge2/G32AweiZ1hjCUuWB8vlr6+8 gWRqBetRFljPXmiC4CaZlD+iWjRBAQeWy19bSaMACWiFCW5yKB24MpQueK3ZWHRwORRRLFke23VW hAoQTTYWpZMBFwkRPz4VT3s2zSydDLkEwyTUm8Dp2CZMxKJ0MuiqoAInSPw00Inaa/+gasEK2FnL Xi3km2wdJmJROul3lWrbnLDr6IShrg8R5bXXs5t5sJCa/wpbnT3sYiE3rkHEeIRJab1OmOqtKWjs Z2zFxSYLDGjsIVdRdxoOCsYjxGrlzNPl2AlzvR4yeI1l47K+QsJxbGnMV8Ru45vXUoKKEap8KVCi H0y4tkx1FSpkVHRsTgdTeEdOgSEstvHwU9TZUWrDkt2FaDitHkaBK2ZHThEMTFsV7MCHX5ZsFZKp CXpYhcRzxczoNMFYbWdRtWBVyBa9NZwY1TptY1R0k4CQeXtj84vxyowwoGj02LSNUTqyBCrPn93k vmPbOAlmuAeaRGVx8RbWUYrvGofPCm7QB6dtTHVPdgCCxv6JW4y1NdwFbYfYht0bRlzJSTzHLh04 Yp8wj5gDUlu2DRxGWMlJXPnrK3+ACulbSHdk28JAWMlJkFYz/qAjJDdOS0PuyHaAa7S8mg0EHSEJ KkjQEB69uN2J7QgDYTUnazQVUkCBvftyDuvYac92AbfSzhB7JzOPDZQ7sV3BDXrJkV1+gt/g4kon Vg8TbZ8kMQg7BAjogtXHX2EwhA6/OKOlAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA5LTA3VDA1 OjMzOjUzKzAwOjAwOdR5sgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wOS0wN1QwNTozMzo1Mysw MDowMEiJwQ4AAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAiCAQAAACOh/P6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN RQfkCQcFIRBGJW6QAAACvklEQVRIx6XWQZKbRhSA4Z8GBhACenwC5wZUypXKMlRlmUVcXrtKHMEn meQEUmWfmnHZe65ATpDcIA3MMGKEhBdgGRAaWZqnjarp94H6PTWtNWg0tPEX54fARNzwT72qed8b Ny6weqFzhbO0Fg1rHlf9Ky+CdSw5X3q/O+x4WAro0S+ADSw5T4LQw6LBRFt+5rc9LV7CeokMA1xs bOYE+MvPixfCBpb0ExkGzDDR0bFG9EVwywahzwwDAWiIPf1pcSHcZ/U90NIuHrObv+UF8DTb0hoG utKjd+qgKzSA/R9mirWlN8lCw5Yn9RT9kh4shc6VtJdXUp9ENQzs18fZmkrdR2/Sr4/QC+e1dWuG m3AdVaqeYJ3QS3zp4xxhi+jHdD//215xF84TV17xRJEWI7pl/SSQ8wl2x5a1uu+xvaW4C/3kWl4T IJGhn1jSGLCz0E+k9HC6Bhuyj2nxg0r7o92cj13aDBsXn6BHt6yXSOlhY3QFHrJ59L/KOIA/9tJ0 dGYdbUsD0WOtSbZMs0ipnMcxfDtKE+jMCJBh8K8b2rgn2DzKVM6aYbkNcG496Q7SBOAAQhpJ/cG8 8eT8BFsx7iIBRmSmBmKQJtBx8HklXy2vL2BBwK//raNNumM3umBg4xFwrGTPsV3xflZ5VKbbEa2h Y2Jhoh+w9Ql2324/HaEFYrRIsGNDedd2wjEWxNctZ5o+jB0bylX2VqniGXawCX0PvWPDwyqLFcVB gx2FITtBt2weKwoqts/+sgGcd3Q9SX9j70+yI7giR6ksKu82B/SQPVWJEVxTUaBU9rZcDelz2YNX U03TfuIGd2F29z2fnTgJbaloaCAGd2Gitewf+YfsDHbyiLWlar/EMFvobCjjfJXxcAZ75Oy26+gm 3mIuqrhYZTyexR49FLZ0wyY2/qzSkpKns1jQmrOmf398ARuVc7WA4gOtAAAAJXRFWHRkYXRlOmNy ZWF0ZQAyMDIwLTA5LTA3VDA1OjMzOjE2KzAwOjAw76ZY7wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAy MC0wOS0wN1QwNTozMzoxNiswMDowMJ774FMAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVh ZHlxyWU8AAAAAElFTkSuQmCC"}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return we`
         <label
           for="${this._GUID}-item-${t}"
-          class="kuc-mobile-checkbox-1-17-0__group__select-menu__item${e.disabled?" kuc-mobile-checkbox-1-17-0__group__select-menu__item--disabled":""}"
+          class="kuc-mobile-checkbox-1-17-1__group__select-menu__item${e.disabled?" kuc-mobile-checkbox-1-17-1__group__select-menu__item--disabled":""}"
           ?borderVisible="${this.borderVisible}"
         >
           <input
             type="checkbox"
             id="${this._GUID}-item-${t}"
-            class="kuc-mobile-checkbox-1-17-0__group__select-menu__item__input"
+            class="kuc-mobile-checkbox-1-17-1__group__select-menu__item__input"
             name="${this._GUID}-group"
             data-index="${t}"
             value="${void 0!==e.value?e.value:""}"
@@ -1736,36 +1735,36 @@
             ?disabled="${e.disabled||this.disabled}"
             @change="${this._handleChangeInput}"
           />
-          <div class="kuc-mobile-checkbox-1-17-0__group__select-menu__item__label">
+          <div class="kuc-mobile-checkbox-1-17-1__group__select-menu__item__label">
             ${this._getCheckboxIconSvgTemplate(i)}${void 0===e.label?e.value:e.label}
           </div>
         </label>
-      `}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}render(){return $e`
-        <fieldset class="kuc-mobile-checkbox-1-17-0__group">
+      `}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(st),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(lt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}render(){return we`
+        <fieldset class="kuc-mobile-checkbox-1-17-1__group">
           <legend
-            class="kuc-mobile-checkbox-1-17-0__group__label"
+            class="kuc-mobile-checkbox-1-17-1__group__label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-mobile-label-1-17-0
+            <kuc-base-mobile-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-mobile-label-1-17-0>
+            ></kuc-base-mobile-label-1-17-1>
           </legend>
           <div
-            class="kuc-mobile-checkbox-1-17-0__group__select-menu ${this.requiredIcon?"kuc-mobile-checkbox-1-17-0__group__select-menu--required":""}"
+            class="kuc-mobile-checkbox-1-17-1__group__select-menu ${this.requiredIcon?"kuc-mobile-checkbox-1-17-1__group__select-menu--required":""}"
             ?borderVisible="${this.borderVisible}"
             ?disabled="${this.disabled}"
           >
             ${this.items.map(((e,t)=>this._getItemTemplate(e,t)))}
           </div>
-          <kuc-base-mobile-error-1-17-0
+          <kuc-base-mobile-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ariaLive="assertive"
           >
-          </kuc-base-mobile-error-1-17-0>
+          </kuc-base-mobile-error-1-17-1>
         </fieldset>
-      `}updated(){this._inputEls.forEach((e=>{e.checked=this.value.indexOf(e.value)>-1}))}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}}Qn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Qn([Fe({type:String})],e.prototype,"error",void 0),Qn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Qn([Fe({type:String})],e.prototype,"label",void 0),Qn([Fe({type:Boolean})],e.prototype,"borderVisible",void 0),Qn([Fe({type:Boolean})],e.prototype,"disabled",void 0),Qn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Qn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Qn([Fe({type:Array})],e.prototype,"items",void 0),Qn([Fe({type:Array})],e.prototype,"selectedIndex",void 0),Qn([Fe({type:Array})],e.prototype,"value",void 0),Qn([Je(".kuc-mobile-checkbox-1-17-0__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),Qn([We()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-mobile-checkbox-1-17-0",e),mi('\n  kuc-mobile-checkbox-1-17-0,\n  kuc-mobile-checkbox-1-17-0 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-checkbox-1-17-0:lang(zh),\n  kuc-mobile-checkbox-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-checkbox-1-17-0:lang(zh-TW),\n  kuc-mobile-checkbox-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-checkbox-1-17-0 {\n    width: 100%;\n    display: inline-block;\n  }\n  kuc-mobile-checkbox-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-mobile-checkbox-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    box-sizing: border-box;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__label__text {\n    text-shadow: 0 1px 0 #ffffff;\n    color: #888888;\n    white-space: normal;\n    font-size: inherit;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__label__required-icon {\n    position: relative;\n    left: 3px;\n    color: #d01212;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__label__required-icon[hidden] {\n    display: none;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu {\n    margin-left: 0.5em;\n    margin-right: 0.5em;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu[bordervisible] {\n    border-color: #b3b3b3;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu[disabled],\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item--disabled {\n    background-color: #d5d7d9;\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu--required[bordervisible] {\n    border-color: #cf4a38;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item[bordervisible] {\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    height: 30px;\n    display: block;\n    border-bottom: 1px solid #b3b3b3;\n    padding: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item {\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    height: 30px;\n    display: block;\n    padding: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item:last-child {\n    border-bottom: 0px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu[bordervisible]\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item:first-child {\n    border-top-left-radius: 7px;\n    border-top-right-radius: 7px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu[bordervisible]\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item:last-child {\n    border-bottom-left-radius: 7px;\n    border-bottom-right-radius: 7px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item__input[disabled]\n    + .kuc-mobile-checkbox-1-17-0__group__select-menu__item__label {\n    background-color: #d5d7d9;\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item__label {\n    position: relative;\n    margin: -7px 0px 0px 34px;\n    display: inline-block;\n    vertical-align: middle;\n    white-space: nowrap;\n    padding: 11px 13px 13px 0px;\n    font-size: 14.04px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item__label__icon {\n    position: absolute;\n    top: 50%;\n    left: -30px;\n    margin-top: -13px;\n    box-sizing: border-box;\n    width: 22px;\n    height: 22px;\n    background-size: 22px 17px;\n    content: "";\n  }\n  .kuc-mobile-checkbox-1-17-0__group__error {\n    line-height: 1.5;\n    border: 1px solid #e5db68;\n    background-color: #fdffc9;\n    margin-top: 0.3em;\n    margin-left: 0.5em;\n    padding: 0.4em 1em;\n    border-radius: 0.4em;\n    color: #000000;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__error[hidden] {\n    display: none;\n  }\n'),eo=e}})();var to=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let io;(()=>{if(io=window.customElements.get("kuc-mobile-dropdown-1-17-0"),!io){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.selectedIndex=-1,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._hasValueInItems=!1,this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.value;if(this.value===i&&this.selectedIndex===t.selectedIndex)return;const n={oldValue:this.value,value:i};this.value=i,this.selectedIndex=t.selectedIndex,gi(this,"change",n)}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(lt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(ut),1))}willUpdate(e){if((e.has("items")||e.has("value"))&&(this._hasValueInItems=this.items.some((e=>e.value===this.value))),e.has("value")){if(""!==this.value||this._hasValueInItems)return;this.selectedIndex=-1}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}_getSelectedIndex(){if(!this.value&&!this._hasValueInItems)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return $e`
+      `}updated(){this._inputEls.forEach((e=>{e.checked=this.value.indexOf(e.value)>-1}))}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}}Qn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Qn([Ge({type:String})],e.prototype,"error",void 0),Qn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Qn([Ge({type:String})],e.prototype,"label",void 0),Qn([Ge({type:Boolean})],e.prototype,"borderVisible",void 0),Qn([Ge({type:Boolean})],e.prototype,"disabled",void 0),Qn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Qn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Qn([Ge({type:Array})],e.prototype,"items",void 0),Qn([Ge({type:Array})],e.prototype,"selectedIndex",void 0),Qn([Ge({type:Array})],e.prototype,"value",void 0),Qn([Ye(".kuc-mobile-checkbox-1-17-1__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),Qn([Fe()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-mobile-checkbox-1-17-1",e),mi('\n  kuc-mobile-checkbox-1-17-1,\n  kuc-mobile-checkbox-1-17-1 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-checkbox-1-17-1:lang(zh),\n  kuc-mobile-checkbox-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-checkbox-1-17-1:lang(zh-TW),\n  kuc-mobile-checkbox-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-checkbox-1-17-1 {\n    width: 100%;\n    display: inline-block;\n  }\n  kuc-mobile-checkbox-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-mobile-checkbox-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    box-sizing: border-box;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__label__text {\n    text-shadow: 0 1px 0 #ffffff;\n    color: #888888;\n    white-space: normal;\n    font-size: inherit;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__label__required-icon {\n    position: relative;\n    left: 3px;\n    color: #d01212;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__label__required-icon[hidden] {\n    display: none;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu {\n    margin-left: 0.5em;\n    margin-right: 0.5em;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu[bordervisible] {\n    border-color: #b3b3b3;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu[disabled],\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item--disabled {\n    background-color: #d5d7d9;\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu--required[bordervisible] {\n    border-color: #cf4a38;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item[bordervisible] {\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    height: 30px;\n    display: block;\n    border-bottom: 1px solid #b3b3b3;\n    padding: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item {\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    height: 30px;\n    display: block;\n    padding: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item:last-child {\n    border-bottom: 0px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu[bordervisible]\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item:first-child {\n    border-top-left-radius: 7px;\n    border-top-right-radius: 7px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu[bordervisible]\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item:last-child {\n    border-bottom-left-radius: 7px;\n    border-bottom-right-radius: 7px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item__input[disabled]\n    + .kuc-mobile-checkbox-1-17-1__group__select-menu__item__label {\n    background-color: #d5d7d9;\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item__label {\n    position: relative;\n    margin: -7px 0px 0px 34px;\n    display: inline-block;\n    vertical-align: middle;\n    white-space: nowrap;\n    padding: 11px 13px 13px 0px;\n    font-size: 14.04px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item__label__icon {\n    position: absolute;\n    top: 50%;\n    left: -30px;\n    margin-top: -13px;\n    box-sizing: border-box;\n    width: 22px;\n    height: 22px;\n    background-size: 22px 17px;\n    content: "";\n  }\n  .kuc-mobile-checkbox-1-17-1__group__error {\n    line-height: 1.5;\n    border: 1px solid #e5db68;\n    background-color: #fdffc9;\n    margin-top: 0.3em;\n    margin-left: 0.5em;\n    padding: 0.4em 1em;\n    border-radius: 0.4em;\n    color: #000000;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__error[hidden] {\n    display: none;\n  }\n'),eo=e}})();var to=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let io;(()=>{if(io=window.customElements.get("kuc-mobile-dropdown-1-17-1"),!io){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.selectedIndex=-1,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._hasValueInItems=!1,this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.value;if(this.value===i&&this.selectedIndex===t.selectedIndex)return;const n={oldValue:this.value,value:i};this.value=i,this.selectedIndex=t.selectedIndex,gi(this,"change",n)}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}willUpdate(e){if((e.has("items")||e.has("value"))&&(this._hasValueInItems=this.items.some((e=>e.value===this.value))),e.has("value")){if(""!==this.value||this._hasValueInItems)return;this.selectedIndex=-1}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}_getSelectedIndex(){if(!this.value&&!this._hasValueInItems)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return we`
         <option
           value="${e.value||""}"
           ?selected="${i}"
@@ -1773,24 +1772,24 @@
         >
           ${void 0===e.label?e.value:e.label}
         </option>
-      `}render(){return $e`
+      `}render(){return we`
         <label
-          class="kuc-mobile-dropdown-1-17-0__label"
+          class="kuc-mobile-dropdown-1-17-1__label"
           for="${this._GUID}-label"
           ?hidden="${!this.label}"
         >
-          <kuc-base-mobile-label-1-17-0
+          <kuc-base-mobile-label-1-17-1
             .text="${this.label}"
             .requiredIcon="${this.requiredIcon}"
-          ></kuc-base-mobile-label-1-17-0>
+          ></kuc-base-mobile-label-1-17-1>
         </label>
-        <div class="kuc-mobile-dropdown-1-17-0__input-form">
+        <div class="kuc-mobile-dropdown-1-17-1__input-form">
           <div
-            class="kuc-mobile-dropdown-1-17-0__input-form__select
+            class="kuc-mobile-dropdown-1-17-1__input-form__select
             ${this.requiredIcon?"kuc--required":""}"
           >
             <select
-              class="kuc-mobile-dropdown-1-17-0__input-form__select__input"
+              class="kuc-mobile-dropdown-1-17-1__input-form__select__input"
               id="${this._GUID}-label"
               aria-describedby="${this._GUID}-error"
               aria-required="${this.requiredIcon}"
@@ -1802,13 +1801,13 @@
             </select>
           </div>
         </div>
-        <kuc-base-mobile-error-1-17-0
+        <kuc-base-mobile-error-1-17-1
           .text="${this.error}"
           .guid="${this._GUID}"
           ariaLive="assertive"
         >
-        </kuc-base-mobile-error-1-17-0>
-      `}updated(e){e.has("selectedIndex")&&(this._selectEl.selectedIndex=this.selectedIndex),super.update(e)}}to([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),to([Fe({type:String})],e.prototype,"error",void 0),to([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),to([Fe({type:String})],e.prototype,"label",void 0),to([Fe({type:String})],e.prototype,"value",void 0),to([Fe({type:Number})],e.prototype,"selectedIndex",void 0),to([Fe({type:Boolean})],e.prototype,"disabled",void 0),to([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),to([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),to([Fe({type:Array})],e.prototype,"items",void 0),to([Ke(".kuc-mobile-dropdown-1-17-0__input-form__select__input")],e.prototype,"_selectEl",void 0),window.customElements.define("kuc-mobile-dropdown-1-17-0",e),mi('\n  kuc-mobile-dropdown-1-17-0,\n  kuc-mobile-dropdown-1-17-0 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-dropdown-1-17-0:lang(zh),\n  kuc-mobile-dropdown-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-dropdown-1-17-0:lang(zh-TW),\n  kuc-mobile-dropdown-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-dropdown-1-17-0 {\n    display: inline-block;\n    width: 100%;\n  }\n\n  kuc-mobile-dropdown-1-17-0[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__label[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__input-form {\n    word-wrap: break-word;\n    min-height: 1em;\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__input-form__select {\n    display: inline-block;\n    border-radius: 0.4em;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__input-form__select.kuc--required {\n    border: 1px solid #cf4a38;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__input-form__select__input {\n    min-width: 100px;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__input-form__select__input:disabled {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n'),io=e}})();var no=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let oo;(()=>{if(oo=window.customElements.get("kuc-mobile-multi-choice-1-17-0"),!oo){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=this.value?[...this.value]:this.value,n=Array.from(t.selectedOptions,(e=>e.value)),o=Array.from(t.selectedOptions,(e=>e.dataset.index)),a={value:n,oldValue:i};this.value=n,this.selectedIndex=o.map((e=>e?parseInt(e,10):0)),gi(this,"change",a)}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return $e`
+        </kuc-base-mobile-error-1-17-1>
+      `}updated(e){e.has("selectedIndex")&&(this._selectEl.selectedIndex=this.selectedIndex),super.update(e)}}to([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),to([Ge({type:String})],e.prototype,"error",void 0),to([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),to([Ge({type:String})],e.prototype,"label",void 0),to([Ge({type:String})],e.prototype,"value",void 0),to([Ge({type:Number})],e.prototype,"selectedIndex",void 0),to([Ge({type:Boolean})],e.prototype,"disabled",void 0),to([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),to([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),to([Ge({type:Array})],e.prototype,"items",void 0),to([qe(".kuc-mobile-dropdown-1-17-1__input-form__select__input")],e.prototype,"_selectEl",void 0),window.customElements.define("kuc-mobile-dropdown-1-17-1",e),mi('\n  kuc-mobile-dropdown-1-17-1,\n  kuc-mobile-dropdown-1-17-1 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-dropdown-1-17-1:lang(zh),\n  kuc-mobile-dropdown-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-dropdown-1-17-1:lang(zh-TW),\n  kuc-mobile-dropdown-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-dropdown-1-17-1 {\n    display: inline-block;\n    width: 100%;\n  }\n\n  kuc-mobile-dropdown-1-17-1[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__label[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__input-form {\n    word-wrap: break-word;\n    min-height: 1em;\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__input-form__select {\n    display: inline-block;\n    border-radius: 0.4em;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__input-form__select.kuc--required {\n    border: 1px solid #cf4a38;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__input-form__select__input {\n    min-width: 100px;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__input-form__select__input:disabled {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n'),io=e}})();var no=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let oo;(()=>{if(oo=window.customElements.get("kuc-mobile-multi-choice-1-17-1"),!oo){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=this.value?[...this.value]:this.value,n=Array.from(t.selectedOptions,(e=>e.value)),o=Array.from(t.selectedOptions,(e=>e.dataset.index)),a={value:n,oldValue:i};this.value=n,this.selectedIndex=o.map((e=>e?parseInt(e,10):0)),gi(this,"change",a)}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(st),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(lt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return we`
         <option
           value="${e.value||""}"
           data-index="${t}"
@@ -1817,24 +1816,24 @@
         >
           ${void 0===e.label?e.value:e.label}
         </option>
-      `}render(){return $e`
+      `}render(){return we`
         <label
-          class="kuc-mobile-multi-choice-1-17-0__label"
+          class="kuc-mobile-multi-choice-1-17-1__label"
           for="${this._GUID}-label"
           ?hidden="${!this.label}"
         >
-          <kuc-base-mobile-label-1-17-0
+          <kuc-base-mobile-label-1-17-1
             .text="${this.label}"
             .requiredIcon="${this.requiredIcon}"
-          ></kuc-base-mobile-label-1-17-0>
+          ></kuc-base-mobile-label-1-17-1>
         </label>
-        <div class="kuc-mobile-multi-choice-1-17-0__input-form">
+        <div class="kuc-mobile-multi-choice-1-17-1__input-form">
           <div
-            class="kuc-mobile-multi-choice-1-17-0__input-form__select
+            class="kuc-mobile-multi-choice-1-17-1__input-form__select
             ${this.requiredIcon?"kuc--required":""}"
           >
             <select
-              class="kuc-mobile-multi-choice-1-17-0__input-form__select__input"
+              class="kuc-mobile-multi-choice-1-17-1__input-form__select__input"
               id="${this._GUID}-label"
               aria-describedby="${this._GUID}-error"
               aria-required="${this.requiredIcon}"
@@ -1847,15 +1846,15 @@
             </select>
           </div>
         </div>
-        <kuc-base-mobile-error-1-17-0
+        <kuc-base-mobile-error-1-17-1
           .text="${this.error}"
           .guid="${this._GUID}"
           ariaLive="assertive"
         >
-        </kuc-base-mobile-error-1-17-0>
-      `}}no([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),no([Fe({type:String})],e.prototype,"error",void 0),no([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),no([Fe({type:String})],e.prototype,"label",void 0),no([Fe({type:Boolean})],e.prototype,"disabled",void 0),no([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),no([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),no([Fe({type:Array})],e.prototype,"items",void 0),no([Fe({type:Array})],e.prototype,"selectedIndex",void 0),no([Fe({type:Array})],e.prototype,"value",void 0),no([We()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-mobile-multi-choice-1-17-0",e),mi('\n  kuc-mobile-multi-choice-1-17-0,\n  kuc-mobile-multi-choice-1-17-0 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n\n  kuc-mobile-multi-choice-1-17-0:lang(zh),\n  kuc-mobile-multi-choice-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-multi-choice-1-17-0:lang(zh-TW),\n  kuc-mobile-multi-choice-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-multi-choice-1-17-0 {\n    display: inline-block;\n    width: 100%;\n  }\n\n  kuc-mobile-multi-choice-1-17-0[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__label[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form {\n    word-wrap: break-word;\n    min-height: 1em;\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select {\n    display: inline-block;\n    border-radius: 0.4em;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select.kuc--required {\n    border: 1px solid #cf4a38;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select__input {\n    min-width: 100px;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select__input:disabled {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select__input option:disabled {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select__input option:disabled[selected] {\n    background-color: #cecece; /* Chrome */\n    background-color: -moz-cellhighlight; /* Firefox */\n    opacity: 1;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select__input:disabled option {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n  }\n'),oo=e}})();var ao=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let so;(()=>{if(so=window.customElements.get("kuc-mobile-radio-button-1-17-0"),!so){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.selectedIndex=-1,this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}willUpdate(e){if(e.has("value")){if(""!==this.value)return;this.selectedIndex=-1}}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.value,n=t.dataset.index||"0",o=parseInt(n,10);if(this.value===i&&this.selectedIndex===o)return;const a={oldValue:this.value,value:i};this.value=i,this.selectedIndex=o,gi(this,"change",a)}_getRadioIconSvgTemplate(e,t){return Ce`
+        </kuc-base-mobile-error-1-17-1>
+      `}}no([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),no([Ge({type:String})],e.prototype,"error",void 0),no([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),no([Ge({type:String})],e.prototype,"label",void 0),no([Ge({type:Boolean})],e.prototype,"disabled",void 0),no([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),no([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),no([Ge({type:Array})],e.prototype,"items",void 0),no([Ge({type:Array})],e.prototype,"selectedIndex",void 0),no([Ge({type:Array})],e.prototype,"value",void 0),no([Fe()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-mobile-multi-choice-1-17-1",e),mi('\n  kuc-mobile-multi-choice-1-17-1,\n  kuc-mobile-multi-choice-1-17-1 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n\n  kuc-mobile-multi-choice-1-17-1:lang(zh),\n  kuc-mobile-multi-choice-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-multi-choice-1-17-1:lang(zh-TW),\n  kuc-mobile-multi-choice-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-multi-choice-1-17-1 {\n    display: inline-block;\n    width: 100%;\n  }\n\n  kuc-mobile-multi-choice-1-17-1[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__label[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form {\n    word-wrap: break-word;\n    min-height: 1em;\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select {\n    display: inline-block;\n    border-radius: 0.4em;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select.kuc--required {\n    border: 1px solid #cf4a38;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select__input {\n    min-width: 100px;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select__input:disabled {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select__input option:disabled {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select__input option:disabled[selected] {\n    background-color: #cecece; /* Chrome */\n    background-color: -moz-cellhighlight; /* Firefox */\n    opacity: 1;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select__input:disabled option {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n  }\n'),oo=e}})();var ao=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let so;(()=>{if(so=window.customElements.get("kuc-mobile-radio-button-1-17-1"),!so){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.selectedIndex=-1,this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}willUpdate(e){if(e.has("value")){if(""!==this.value)return;this.selectedIndex=-1}}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.value,n=t.dataset.index||"0",o=parseInt(n,10);if(this.value===i&&this.selectedIndex===o)return;const a={oldValue:this.value,value:i};this.value=i,this.selectedIndex=o,gi(this,"change",a)}_getRadioIconSvgTemplate(e,t){return $e`
       <svg
-        class="kuc-mobile-radio-button-1-17-0__group__select-menu__item__label__icon"
+        class="kuc-mobile-radio-button-1-17-1__group__select-menu__item__label__icon"
         width="21"
         height="21"
         viewBox="0 0 21 21"
@@ -1877,18 +1876,18 @@
           cy="10.5"
           r="10.15"
           stroke="#bbbbbb" stroke-width="1"/>
-        ${t?Ce`<circle cx="10.5" cy="10.5" r="6.5" fill="${"#5b5b5b"}"/>`:""}
+        ${t?$e`<circle cx="10.5" cy="10.5" r="6.5" fill="${"#5b5b5b"}"/>`:""}
       </svg>
-    `}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return $e`
+    `}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return we`
         <div
-          class="kuc-mobile-radio-button-1-17-0__group__select-menu__item${e.disabled?" kuc-mobile-radio-button-1-17-0__group__select-menu__item--disabled":""}"
+          class="kuc-mobile-radio-button-1-17-1__group__select-menu__item${e.disabled?" kuc-mobile-radio-button-1-17-1__group__select-menu__item--disabled":""}"
         >
           <input
             type="radio"
             aria-describedby="${this._GUID}-error"
             id="${this._GUID}-item-${t}"
             data-index="${t}"
-            class="kuc-mobile-radio-button-1-17-0__group__select-menu__item__input"
+            class="kuc-mobile-radio-button-1-17-1__group__select-menu__item__input"
             name="${this._GUID}-group"
             value="${void 0!==e.value?e.value:""}"
             aria-invalid="${""!==this.error}"
@@ -1897,60 +1896,60 @@
             @change="${this._handleChangeInput}"
           />
           <label
-            class="kuc-mobile-radio-button-1-17-0__group__select-menu__item__label"
+            class="kuc-mobile-radio-button-1-17-1__group__select-menu__item__label"
             for="${this._GUID}-item-${t}"
             >${this._getRadioIconSvgTemplate(this.disabled,i)}
             <div
-              class="kuc-mobile-radio-button-1-17-0__group__select-menu__item__label__value"
+              class="kuc-mobile-radio-button-1-17-1__group__select-menu__item__label__value"
             >
               ${void 0===e.label?e.value:e.label}
             </div>
           </label>
         </div>
-      `}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(lt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(ut),1))}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}render(){return $e`
-        <div class="kuc-mobile-radio-button-1-17-0__group">
+      `}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}render(){return we`
+        <div class="kuc-mobile-radio-button-1-17-1__group">
           <div
-            class="kuc-mobile-radio-button-1-17-0__group__label"
+            class="kuc-mobile-radio-button-1-17-1__group__label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-mobile-label-1-17-0
+            <kuc-base-mobile-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-mobile-label-1-17-0>
+            ></kuc-base-mobile-label-1-17-1>
           </div>
           <div
-            class="kuc-mobile-radio-button-1-17-0__group__select-menu"
+            class="kuc-mobile-radio-button-1-17-1__group__select-menu"
             ?borderVisible="${this.borderVisible}"
             ?disabled="${this.disabled}"
           >
             ${this.items.map(((e,t)=>this._getItemTemplate(e,t)))}
           </div>
-          <kuc-base-mobile-error-1-17-0
+          <kuc-base-mobile-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ariaLive="assertive"
           >
-          </kuc-base-mobile-error-1-17-0>
+          </kuc-base-mobile-error-1-17-1>
         </div>
-      `}updated(){this._inputEls.forEach(((e,t)=>{e.checked=this.value===e.value&&t===this.selectedIndex}))}_getSelectedIndex(){if(!this.value)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}}ao([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),ao([Fe({type:String})],e.prototype,"error",void 0),ao([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),ao([Fe({type:String})],e.prototype,"label",void 0),ao([Fe({type:String})],e.prototype,"value",void 0),ao([Fe({type:Number})],e.prototype,"selectedIndex",void 0),ao([Fe({type:Boolean})],e.prototype,"borderVisible",void 0),ao([Fe({type:Boolean})],e.prototype,"disabled",void 0),ao([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),ao([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),ao([Fe({type:Array})],e.prototype,"items",void 0),ao([Je(".kuc-mobile-radio-button-1-17-0__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),window.customElements.define("kuc-mobile-radio-button-1-17-0",e),mi('\n  kuc-mobile-radio-button-1-17-0,\n  kuc-mobile-radio-button-1-17-0 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n\n  kuc-mobile-radio-button-1-17-0:lang(zh) ,\n  kuc-mobile-radio-button-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-radio-button-1-17-0:lang(zh-TW),\n  kuc-mobile-radio-button-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-radio-button-1-17-0 {\n    width: 100%;\n    display: inline-block;\n  }\n\n  kuc-mobile-radio-button-1-17-0[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group {\n    border: none;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    vertical-align: top;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__label[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu {\n    margin-right: 0.5em;\n    margin-left: 0.5em;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu[bordervisible] {\n    border-color: #b3b3b3;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 0.4em;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item {\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    height: 45px;\n    display: block;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu[bordervisible]\n    .kuc-mobile-radio-button-1-17-0__group__select-menu__item {\n    border-bottom: 1px solid #b3b3b3;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu[bordervisible]\n    .kuc-mobile-radio-button-1-17-0__group__select-menu__item:last-child {\n    border-bottom: 0px;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item__label__icon {\n    position: absolute;\n    top: 50%;\n    box-sizing: border-box;\n    margin-top: -11px;\n    width: 21px;\n    height: 21px;\n    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;\n    content: "";\n    border-radius: 9px;\n    left: 8px;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item__label__value {\n    height: 45px;\n    line-height: 45px;\n    padding-left: 35px;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu[disabled], \n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item--disabled {\n    background-color: #d5d7d9;\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n  .kuc-mobile-radio-button-1-17-0__group__select-menu[bordervisible]\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item--disabled:last-child {\n    border-bottom-left-radius: 0.3em;\n    border-bottom-right-radius: 0.3em;\n  }\n  .kuc-mobile-radio-button-1-17-0__group__select-menu[bordervisible]\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item--disabled:first-child {\n    border-top-left-radius: 0.3em;\n    border-top-right-radius: 0.3em;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item__label {\n    position: absolute;\n    white-space: nowrap;\n    width: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 100%;\n    padding: 0px;\n  }\n'),so=e}})();var ro=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let lo;(()=>{if(lo=window.customElements.get("kuc-mobile-text-1-17-0"),!lo){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.prefix="",this.suffix="",this.textAlign="left",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusInput(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputText(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}render(){return $e`
+      `}updated(){this._inputEls.forEach(((e,t)=>{e.checked=this.value===e.value&&t===this.selectedIndex}))}_getSelectedIndex(){if(!this.value)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}}ao([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),ao([Ge({type:String})],e.prototype,"error",void 0),ao([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),ao([Ge({type:String})],e.prototype,"label",void 0),ao([Ge({type:String})],e.prototype,"value",void 0),ao([Ge({type:Number})],e.prototype,"selectedIndex",void 0),ao([Ge({type:Boolean})],e.prototype,"borderVisible",void 0),ao([Ge({type:Boolean})],e.prototype,"disabled",void 0),ao([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),ao([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),ao([Ge({type:Array})],e.prototype,"items",void 0),ao([Ye(".kuc-mobile-radio-button-1-17-1__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),window.customElements.define("kuc-mobile-radio-button-1-17-1",e),mi('\n  kuc-mobile-radio-button-1-17-1,\n  kuc-mobile-radio-button-1-17-1 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n\n  kuc-mobile-radio-button-1-17-1:lang(zh) ,\n  kuc-mobile-radio-button-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-radio-button-1-17-1:lang(zh-TW),\n  kuc-mobile-radio-button-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-radio-button-1-17-1 {\n    width: 100%;\n    display: inline-block;\n  }\n\n  kuc-mobile-radio-button-1-17-1[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group {\n    border: none;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    vertical-align: top;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__label[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu {\n    margin-right: 0.5em;\n    margin-left: 0.5em;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu[bordervisible] {\n    border-color: #b3b3b3;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 0.4em;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item {\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    height: 45px;\n    display: block;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu[bordervisible]\n    .kuc-mobile-radio-button-1-17-1__group__select-menu__item {\n    border-bottom: 1px solid #b3b3b3;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu[bordervisible]\n    .kuc-mobile-radio-button-1-17-1__group__select-menu__item:last-child {\n    border-bottom: 0px;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item__label__icon {\n    position: absolute;\n    top: 50%;\n    box-sizing: border-box;\n    margin-top: -11px;\n    width: 21px;\n    height: 21px;\n    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;\n    content: "";\n    border-radius: 9px;\n    left: 8px;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item__label__value {\n    height: 45px;\n    line-height: 45px;\n    padding-left: 35px;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu[disabled], \n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item--disabled {\n    background-color: #d5d7d9;\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n  .kuc-mobile-radio-button-1-17-1__group__select-menu[bordervisible]\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item--disabled:last-child {\n    border-bottom-left-radius: 0.3em;\n    border-bottom-right-radius: 0.3em;\n  }\n  .kuc-mobile-radio-button-1-17-1__group__select-menu[bordervisible]\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item--disabled:first-child {\n    border-top-left-radius: 0.3em;\n    border-top-right-radius: 0.3em;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item__label {\n    position: absolute;\n    white-space: nowrap;\n    width: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 100%;\n    padding: 0px;\n  }\n'),so=e}})();var ro=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let lo;(()=>{if(lo=window.customElements.get("kuc-mobile-text-1-17-1"),!lo){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.prefix="",this.suffix="",this.textAlign="left",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusInput(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputText(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}render(){return we`
         <label
-          class="kuc-mobile-text-1-17-0__label"
+          class="kuc-mobile-text-1-17-1__label"
           for="${this._GUID}-label"
           ?hidden="${!this.label}"
         >
-          <kuc-base-mobile-label-1-17-0
+          <kuc-base-mobile-label-1-17-1
             .requiredIcon="${this.requiredIcon}"
             .text="${this.label}"
-          ></kuc-base-mobile-label-1-17-0>
+          ></kuc-base-mobile-label-1-17-1>
         </label>
-        <div class="kuc-mobile-text-1-17-0__input-form">
+        <div class="kuc-mobile-text-1-17-1__input-form">
           <span
-            class="kuc-mobile-text-1-17-0__input-form__prefix"
+            class="kuc-mobile-text-1-17-1__input-form__prefix"
             ?hidden="${!this.prefix}"
             >${this.prefix}</span
           >
           <input
-            class="kuc-mobile-text-1-17-0__input-form__input"
+            class="kuc-mobile-text-1-17-1__input-form__input"
             id="${this._GUID}-label"
             placeholder="${this.placeholder}"
             textAlign="${this.textAlign}"
@@ -1965,27 +1964,27 @@
             @input="${this._handleInputText}"
           />
           <span
-            class="kuc-mobile-text-1-17-0__input-form__suffix"
+            class="kuc-mobile-text-1-17-1__input-form__suffix"
             ?hidden="${!this.suffix}"
             >${this.suffix}</span
           >
         </div>
-        <kuc-base-mobile-error-1-17-0 .guid="${this._GUID}" .text="${this.error}">
-        </kuc-base-mobile-error-1-17-0>
-      `}}ro([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),ro([Fe({type:String})],e.prototype,"error",void 0),ro([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),ro([Fe({type:String})],e.prototype,"label",void 0),ro([Fe({type:String})],e.prototype,"placeholder",void 0),ro([Fe({type:String})],e.prototype,"prefix",void 0),ro([Fe({type:String})],e.prototype,"suffix",void 0),ro([Fe({type:String})],e.prototype,"textAlign",void 0),ro([Fe({type:String})],e.prototype,"value",void 0),ro([Fe({type:Boolean})],e.prototype,"disabled",void 0),ro([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),ro([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),window.customElements.define("kuc-mobile-text-1-17-0",e),mi('\n  kuc-mobile-text-1-17-0,\n  kuc-mobile-text-1-17-0 * {\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-text-1-17-0:lang(zh),\n  kuc-mobile-text-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-text-1-17-0:lang(zh-TW),\n  kuc-mobile-text-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-text-1-17-0 {\n    display: block;\n  }\n  kuc-mobile-text-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-mobile-text-1-17-0__label {\n    display: inline-block;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n  .kuc-mobile-text-1-17-0__label[hidden] {\n    display: none;\n  }\n  .kuc-mobile-text-1-17-0__input-form {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n    display: flex;\n    align-items: center;\n  }\n  .kuc-mobile-text-1-17-0__input-form__prefix {\n    margin-right: 4px;\n    color: #888888;\n  }\n  .kuc-mobile-text-1-17-0__input-form__prefix[hidden] {\n    display: none;\n  }\n  .kuc-mobile-text-1-17-0__input-form__input {\n    width: 100%;\n    min-width: 20px;\n    padding: 0.4em;\n    border: 1px solid #b3b3b3;\n    outline: 0;\n    box-shadow: 0 1px 0 #ffffff, inset 0 2px 3px #dadada;\n    border-radius: 0.4em;\n    box-sizing: border-box;\n    text-align: left;\n  }\n  .kuc-mobile-text-1-17-0__input-form__input[aria-required="true"] {\n    border: 1px solid #cf4a38;\n  }\n  .kuc-mobile-text-1-17-0__input-form__input[textAlign="right"] {\n    text-align: right;\n  }\n  .kuc-mobile-text-1-17-0__input-form__input:disabled {\n    color: #999999;\n    background-color: #d5d7d9;\n    -webkit-text-fill-color: #999999;\n    opacity: 1;\n    -webkit-opacity: 1;\n  }\n  .kuc-mobile-text-1-17-0__input-form__suffix {\n    margin-left: 4px;\n    color: #888888;\n  }\n  .kuc-mobile-text-1-17-0__input-form__suffix[hidden] {\n    display: none;\n  }\n'),lo=e}})();var uo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let co;(()=>{if(co=window.customElements.get("kuc-mobile-textarea-1-17-0"),!co){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusInput(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputTextArea(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}render(){return $e`
+        <kuc-base-mobile-error-1-17-1 .guid="${this._GUID}" .text="${this.error}">
+        </kuc-base-mobile-error-1-17-1>
+      `}}ro([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),ro([Ge({type:String})],e.prototype,"error",void 0),ro([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),ro([Ge({type:String})],e.prototype,"label",void 0),ro([Ge({type:String})],e.prototype,"placeholder",void 0),ro([Ge({type:String})],e.prototype,"prefix",void 0),ro([Ge({type:String})],e.prototype,"suffix",void 0),ro([Ge({type:String})],e.prototype,"textAlign",void 0),ro([Ge({type:String})],e.prototype,"value",void 0),ro([Ge({type:Boolean})],e.prototype,"disabled",void 0),ro([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),ro([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),window.customElements.define("kuc-mobile-text-1-17-1",e),mi('\n  kuc-mobile-text-1-17-1,\n  kuc-mobile-text-1-17-1 * {\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-text-1-17-1:lang(zh),\n  kuc-mobile-text-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-text-1-17-1:lang(zh-TW),\n  kuc-mobile-text-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-text-1-17-1 {\n    display: block;\n  }\n  kuc-mobile-text-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-mobile-text-1-17-1__label {\n    display: inline-block;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n  .kuc-mobile-text-1-17-1__label[hidden] {\n    display: none;\n  }\n  .kuc-mobile-text-1-17-1__input-form {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n    display: flex;\n    align-items: center;\n  }\n  .kuc-mobile-text-1-17-1__input-form__prefix {\n    margin-right: 4px;\n    color: #888888;\n  }\n  .kuc-mobile-text-1-17-1__input-form__prefix[hidden] {\n    display: none;\n  }\n  .kuc-mobile-text-1-17-1__input-form__input {\n    width: 100%;\n    min-width: 20px;\n    padding: 0.4em;\n    border: 1px solid #b3b3b3;\n    outline: 0;\n    box-shadow: 0 1px 0 #ffffff, inset 0 2px 3px #dadada;\n    border-radius: 0.4em;\n    box-sizing: border-box;\n    text-align: left;\n  }\n  .kuc-mobile-text-1-17-1__input-form__input[aria-required="true"] {\n    border: 1px solid #cf4a38;\n  }\n  .kuc-mobile-text-1-17-1__input-form__input[textAlign="right"] {\n    text-align: right;\n  }\n  .kuc-mobile-text-1-17-1__input-form__input:disabled {\n    color: #999999;\n    background-color: #d5d7d9;\n    -webkit-text-fill-color: #999999;\n    opacity: 1;\n    -webkit-opacity: 1;\n  }\n  .kuc-mobile-text-1-17-1__input-form__suffix {\n    margin-left: 4px;\n    color: #888888;\n  }\n  .kuc-mobile-text-1-17-1__input-form__suffix[hidden] {\n    display: none;\n  }\n'),lo=e}})();var uo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let co;(()=>{if(co=window.customElements.get("kuc-mobile-textarea-1-17-1"),!co){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusInput(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputTextArea(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}render(){return we`
         <label
-          class="kuc-mobile-textarea-1-17-0__label"
+          class="kuc-mobile-textarea-1-17-1__label"
           for="${this._GUID}-label"
           ?hidden="${!this.label}"
         >
-          <kuc-base-mobile-label-1-17-0
+          <kuc-base-mobile-label-1-17-1
             .requiredIcon="${this.requiredIcon}"
             .text="${this.label}"
-          ></kuc-base-mobile-label-1-17-0>
+          ></kuc-base-mobile-label-1-17-1>
         </label>
-        <div class="kuc-mobile-textarea-1-17-0__form">
+        <div class="kuc-mobile-textarea-1-17-1__form">
           <textarea
-            class="kuc-mobile-textarea-1-17-0__form__textarea"
+            class="kuc-mobile-textarea-1-17-1__form__textarea"
             id="${this._GUID}-label"
             placeholder="${this.placeholder}"
             ?disabled="${this.disabled}"
@@ -1998,9 +1997,9 @@
             @input="${this._handleInputTextArea}"
           /></textarea>
         </div>
-        <kuc-base-mobile-error-1-17-0 .guid="${this._GUID}" .text="${this.error}">
-        </kuc-base-mobile-error-1-17-0>
-      `}}uo([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),uo([Fe({type:String})],e.prototype,"error",void 0),uo([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),uo([Fe({type:String})],e.prototype,"label",void 0),uo([Fe({type:String})],e.prototype,"placeholder",void 0),uo([Fe({type:String})],e.prototype,"value",void 0),uo([Fe({type:Boolean})],e.prototype,"disabled",void 0),uo([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),uo([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),window.customElements.define("kuc-mobile-textarea-1-17-0",e),mi('\n  kuc-mobile-textarea-1-17-0,\n  kuc-mobile-textarea-1-17-0 * {\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-textarea-1-17-0:lang(zh),\n  kuc-mobile-textarea-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-textarea-1-17-0:lang(zh-TW),\n  kuc-mobile-textarea-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-textarea-1-17-0 {\n    display: block;\n  }\n  kuc-mobile-textarea-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-mobile-textarea-1-17-0__label {\n    padding: 0;\n    margin: 0 0 4px 0;\n    display: inline-block;\n    font-weight: bold;\n    line-height: 1.5;\n    white-space: nowrap;\n  }\n  .kuc-mobile-textarea-1-17-0__label[hidden] {\n    display: none;\n  }\n  .kuc-mobile-textarea-1-17-0__form {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n  .kuc-mobile-textarea-1-17-0__form__textarea {\n    width: 100%;\n    height: 120px;\n    padding: 0.4em;\n    border: 1px solid #b3b3b3;\n    outline: 0;\n    box-shadow: 0 1px 0 #ffffff, inset 0 2px 3px #dadada;\n    border-radius: 0.4em;\n    box-sizing: border-box;\n    vertical-align: top;\n  }\n  .kuc-mobile-textarea-1-17-0__form__textarea[aria-required="true"] {\n    border: 1px solid #cf4a38;\n  }\n  .kuc-mobile-textarea-1-17-0__form__textarea:disabled {\n    color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n'),co=e}})();var ho=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let _o;(()=>{if(_o=window.customElements.get("kuc-mobile-notification-1-17-0"),!_o){class e extends bi{constructor(e){super(),this.className="",this.text="",this.duration=-1,this.container=document.body,this._isOpened=!1;const t=vi(e);Object.assign(this,t)}_handleClickCloseButton(e){this.close()}_getCloseButtonSvgTemplate(){return Ce`
+        <kuc-base-mobile-error-1-17-1 .guid="${this._GUID}" .text="${this.error}">
+        </kuc-base-mobile-error-1-17-1>
+      `}}uo([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),uo([Ge({type:String})],e.prototype,"error",void 0),uo([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),uo([Ge({type:String})],e.prototype,"label",void 0),uo([Ge({type:String})],e.prototype,"placeholder",void 0),uo([Ge({type:String})],e.prototype,"value",void 0),uo([Ge({type:Boolean})],e.prototype,"disabled",void 0),uo([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),uo([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),window.customElements.define("kuc-mobile-textarea-1-17-1",e),mi('\n  kuc-mobile-textarea-1-17-1,\n  kuc-mobile-textarea-1-17-1 * {\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-textarea-1-17-1:lang(zh),\n  kuc-mobile-textarea-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-textarea-1-17-1:lang(zh-TW),\n  kuc-mobile-textarea-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-textarea-1-17-1 {\n    display: block;\n  }\n  kuc-mobile-textarea-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-mobile-textarea-1-17-1__label {\n    padding: 0;\n    margin: 0 0 4px 0;\n    display: inline-block;\n    font-weight: bold;\n    line-height: 1.5;\n    white-space: nowrap;\n  }\n  .kuc-mobile-textarea-1-17-1__label[hidden] {\n    display: none;\n  }\n  .kuc-mobile-textarea-1-17-1__form {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n  .kuc-mobile-textarea-1-17-1__form__textarea {\n    width: 100%;\n    height: 120px;\n    padding: 0.4em;\n    border: 1px solid #b3b3b3;\n    outline: 0;\n    box-shadow: 0 1px 0 #ffffff, inset 0 2px 3px #dadada;\n    border-radius: 0.4em;\n    box-sizing: border-box;\n    vertical-align: top;\n  }\n  .kuc-mobile-textarea-1-17-1__form__textarea[aria-required="true"] {\n    border: 1px solid #cf4a38;\n  }\n  .kuc-mobile-textarea-1-17-1__form__textarea:disabled {\n    color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n'),co=e}})();var ho=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let _o;(()=>{if(_o=window.customElements.get("kuc-mobile-notification-1-17-1"),!_o){class e extends bi{constructor(e){super(),this.className="",this.text="",this.duration=-1,this.container=document.body,this._isOpened=!1;const t=vi(e);Object.assign(this,t)}_handleClickCloseButton(e){this.close()}_getCloseButtonSvgTemplate(){return $e`
       <svg
         height="12"
         width="12"
@@ -2011,15 +2010,15 @@
               d="m512.001 84.853-84.853-84.853-171.147 171.147-171.148-171.147-84.853 84.853 171.148 171.147-171.148 171.148 84.853 84.853 171.148-171.147 171.147 171.147 84.853-84.853-171.148-171.148z"/>
           </g>
         </svg>
-      `}_setAutoCloseTimer(){!Number.isFinite(this.duration)||this.duration<0||(this._clearAutoCloseTimer(),this._timeoutID=window.setTimeout((()=>{this.close()}),this.duration))}_clearAutoCloseTimer(){this._timeoutID&&window.clearTimeout(this._timeoutID)}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.container.appendChild(this),this.performUpdate(),this.classList.remove("kuc-mobile-notification-fadeout-1-17-0"),this.classList.add("kuc-mobile-notification-fadein-1-17-0"),this._isOpened=!0,this._setAutoCloseTimer()}close(){this._close(),gi(this,"close")}_close(){this._isOpened=!1,this.classList.remove("kuc-mobile-notification-fadein-1-17-0"),this.classList.add("kuc-mobile-notification-fadeout-1-17-0"),this._clearAutoCloseTimer()}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this._close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this._close(),!e)return this.throwErrorAfterUpdateComplete(gt),!1}return!0}_isValidContainerElement(){return this.container instanceof HTMLElement}render(){return $e`
-        <div class="kuc-mobile-notification-1-17-0__notification">
+      `}_setAutoCloseTimer(){!Number.isFinite(this.duration)||this.duration<0||(this._clearAutoCloseTimer(),this._timeoutID=window.setTimeout((()=>{this.close()}),this.duration))}_clearAutoCloseTimer(){this._timeoutID&&window.clearTimeout(this._timeoutID)}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.container.appendChild(this),this.performUpdate(),this.classList.remove("kuc-mobile-notification-fadeout-1-17-1"),this.classList.add("kuc-mobile-notification-fadein-1-17-1"),this._isOpened=!0,this._setAutoCloseTimer()}close(){this._close(),gi(this,"close")}_close(){this._isOpened=!1,this.classList.remove("kuc-mobile-notification-fadein-1-17-1"),this.classList.add("kuc-mobile-notification-fadeout-1-17-1"),this._clearAutoCloseTimer()}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this._close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this._close(),!e)return this.throwErrorAfterUpdateComplete(bt),!1}return!0}_isValidContainerElement(){return this.container instanceof HTMLElement}render(){return we`
+        <div class="kuc-mobile-notification-1-17-1__notification">
           <pre
-            class="kuc-mobile-notification-1-17-0__notification__title"
+            class="kuc-mobile-notification-1-17-1__notification__title"
             aria-live="assertive"
             role="${this._isOpened?"alert":""}"
           ><!---->${this.text}</pre>
           <button
-            class="kuc-mobile-notification-1-17-0__notification__close-button"
+            class="kuc-mobile-notification-1-17-1__notification__close-button"
             type="button"
             aria-label="close"
             @click="${this._handleClickCloseButton}"
@@ -2027,65 +2026,65 @@
             ${this._getCloseButtonSvgTemplate()}
           </button>
         </div>
-      `}}ho([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),ho([Fe({type:String})],e.prototype,"text",void 0),ho([Fe({type:Number})],e.prototype,"duration",void 0),ho([Fe()],e.prototype,"container",void 0),ho([We()],e.prototype,"_isOpened",void 0),window.customElements.define("kuc-mobile-notification-1-17-0",e),mi('\n  kuc-mobile-notification-1-17-0 {\n    display: block;\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n    visibility: hidden;\n    animation-fill-mode: forwards;\n    position: relative;\n    top: -100px;\n    left: 0;\n  }\n\n  kuc-mobile-notification-1-17-0:lang(zh),\n  kuc-mobile-notification-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-notification-1-17-0:lang(zh-TW),\n  kuc-mobile-notification-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  .kuc-mobile-notification-fadein-1-17-0 {\n    animation-name: kuc-mobile-notification-fade-in-1-17-0;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n    width: 100%;\n    position: fixed;\n    visibility: visible;\n  }\n\n  .kuc-mobile-notification-fadeout-1-17-0 {\n    animation-name: kuc-mobile-notification-fade-out-1-17-0;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n    width: 100%;\n    position: fixed;\n  }\n\n  .kuc-mobile-notification-1-17-0__notification {\n    background-color: #ffffcf;\n    background: linear-gradient(#ffda4a, #ffc32c);\n    width: 100%;\n    min-height: 48px;\n    z-index: 20;\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 14px;\n    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;\n    color: #333333;\n    text-align: center;\n    vertical-align: top;\n  }\n\n  .kuc-mobile-notification-1-17-0__notification__title {\n    display: inline-block;\n    vertical-align: middle;\n    padding: 17px 44px 11px 44px;\n    margin: 0 0 0 -20px;\n    text-align: left;\n    font-weight: inherit;\n    font-family: inherit;\n    word-break: break-word;\n    white-space: pre-wrap;\n  }\n\n  .kuc-mobile-notification-1-17-0__notification__close-button {\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 44px;\n    height: 48px;\n    padding: 0;\n    background-color: transparent;\n    border: none;\n    vertical-align: middle;\n    pointer-events: auto;\n    outline: none;\n  }\n  @keyframes kuc-mobile-notification-fade-in-1-17-0 {\n    0% {\n      top: -100px;\n      left: 0;\n    }\n    50% {\n      top: -50px;\n      left: 0;\n    }\n    100% {\n      top: 0;\n      left: 0;\n    }\n  }\n  @keyframes kuc-mobile-notification-fade-out-1-17-0 {\n    0% {\n      visibility: visible;\n      top: 0;\n      left: 0;\n    }\n    50% {\n      visibility: visible;\n      top: -50px;\n      left: 0;\n    }\n    100% {\n      top: -100px;\n      left: 0;\n    }\n  }\n'),_o=e}})();var po=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class bo extends bi{constructor(){super(...arguments),this.language="en",this.month=1,this.year=(new Date).getFullYear(),this._locale=Qt("en")}update(e){e.has("language")&&(this._locale=Qt(this.language)),this._monthOptions=this._generateMonthOptions(),this._yearOptions=this._generateYearOptions(),super.update(e)}render(){return $e`
-      <div class="kuc-base-mobile-datetime-calendar-header-1-17-0__group">
+      `}}ho([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),ho([Ge({type:String})],e.prototype,"text",void 0),ho([Ge({type:Number})],e.prototype,"duration",void 0),ho([Ge()],e.prototype,"container",void 0),ho([Fe()],e.prototype,"_isOpened",void 0),window.customElements.define("kuc-mobile-notification-1-17-1",e),mi('\n  kuc-mobile-notification-1-17-1 {\n    display: block;\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n    visibility: hidden;\n    animation-fill-mode: forwards;\n    position: relative;\n    top: -100px;\n    left: 0;\n  }\n\n  kuc-mobile-notification-1-17-1:lang(zh),\n  kuc-mobile-notification-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-notification-1-17-1:lang(zh-TW),\n  kuc-mobile-notification-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  .kuc-mobile-notification-fadein-1-17-1 {\n    animation-name: kuc-mobile-notification-fade-in-1-17-1;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n    width: 100%;\n    position: fixed;\n    visibility: visible;\n  }\n\n  .kuc-mobile-notification-fadeout-1-17-1 {\n    animation-name: kuc-mobile-notification-fade-out-1-17-1;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n    width: 100%;\n    position: fixed;\n  }\n\n  .kuc-mobile-notification-1-17-1__notification {\n    background-color: #ffffcf;\n    background: linear-gradient(#ffda4a, #ffc32c);\n    width: 100%;\n    min-height: 48px;\n    z-index: 20;\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 14px;\n    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;\n    color: #333333;\n    text-align: center;\n    vertical-align: top;\n  }\n\n  .kuc-mobile-notification-1-17-1__notification__title {\n    display: inline-block;\n    vertical-align: middle;\n    padding: 17px 44px 11px 44px;\n    margin: 0 0 0 -20px;\n    text-align: left;\n    font-weight: inherit;\n    font-family: inherit;\n    word-break: break-word;\n    white-space: pre-wrap;\n  }\n\n  .kuc-mobile-notification-1-17-1__notification__close-button {\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 44px;\n    height: 48px;\n    padding: 0;\n    background-color: transparent;\n    border: none;\n    vertical-align: middle;\n    pointer-events: auto;\n    outline: none;\n  }\n  @keyframes kuc-mobile-notification-fade-in-1-17-1 {\n    0% {\n      top: -100px;\n      left: 0;\n    }\n    50% {\n      top: -50px;\n      left: 0;\n    }\n    100% {\n      top: 0;\n      left: 0;\n    }\n  }\n  @keyframes kuc-mobile-notification-fade-out-1-17-1 {\n    0% {\n      visibility: visible;\n      top: 0;\n      left: 0;\n    }\n    50% {\n      visibility: visible;\n      top: -50px;\n      left: 0;\n    }\n    100% {\n      top: -100px;\n      left: 0;\n    }\n  }\n'),_o=e}})();var po=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class bo extends bi{constructor(){super(...arguments),this.language="en",this.month=1,this.year=(new Date).getFullYear(),this._locale=Xt("en")}update(e){e.has("language")&&(this._locale=Xt(this.language)),this._monthOptions=this._generateMonthOptions(),this._yearOptions=this._generateYearOptions(),super.update(e)}render(){return we`
+      <div class="kuc-base-mobile-datetime-calendar-header-1-17-1__group">
         <button
           aria-label="previous month"
           type="button"
-          class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__button kuc-base-mobile-datetime-calendar-header-1-17-0__group__button--previous-month"
+          class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__button kuc-base-mobile-datetime-calendar-header-1-17-1__group__button--previous-month"
           @click="${this._handleClickCalendarPrevMonthBtn}"
         >
           ${this._getLeftArrowIconSvgTemplate()}
         </button>
-        <div class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__center">
+        <div class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__center">
           ${this._getYearMonthTemplate()}
         </div>
         <button
           aria-label="next month"
           type="button"
-          class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__button kuc-base-mobile-datetime-calendar-header-1-17-0__group__button--next-month"
+          class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__button kuc-base-mobile-datetime-calendar-header-1-17-1__group__button--next-month"
           @click="${this._handleClickCalendarNextMonthBtn}"
         >
           ${this._getRightArrowIconSvgTemplate()}
         </button>
       </div>
-    `}updated(e){e.has("month")&&this._setSelectMonthWidth(this.month),e.has("year")&&this._setYearSelectedIndex(),super.update(e)}_setSelectMonthWidth(e){const t=this._monthOptions[e-1].label;if(!t)return;const i=document.createElement("span");i.innerText=t;const n=(e=>{const t=(e=>{const t=document.createElement("div");return t.style.cssText=`\n  height: 0px;\n  overflow: hidden;\n  display: inline-block;\n  font-size: 14px;\n  font-family: ${window.getComputedStyle(e).fontFamily};\n  `,t})(e),i=e.cloneNode(!0);if(i.hasAttribute("hidden"))return 0;t.appendChild(i),document.body.appendChild(t);const n=t.getBoundingClientRect().width;return document.body.removeChild(t),n})(i);this._selectMonthEl.selectedIndex=this.month-1,this._selectMonthEl.style.width=n+35+"px"}_setYearSelectedIndex(){this.year<100?this._selectYearEl.selectedIndex=this.year:this._selectYearEl.selectedIndex=100}_generateMonthOptions(){return this._locale.MONTH_SELECT.map(((e,t)=>({value:`${t+1}`,label:`${e}`})))}_generateYearOptions(){return this._getYearOptions().map((e=>({value:`${e}`,label:`${e}${this._locale.YEAR_SELECT_POSTFIX}`})))}_getYearOptions(){const e=[];Number.isInteger(this.year)||(this.year=(new Date).getFullYear());let t=this.year<100?0:this.year-100;const i=this.year>=9899?9999:this.year+100;for(t>=i&&(t=i-100);t<=i;t++)e.push(t);return e}_getYearMonthTemplate(){return"zh"===this.language||"ja"===this.language||"zh-TW"===this.language?$e` ${this._getYearTemplate()}${this._getMonthTemplate()} `:$e` ${this._getMonthTemplate()}${this._getYearTemplate()} `}_handleChangeMonthDropdown(e){e.stopPropagation(),e.preventDefault();const t=e.target;this.month=parseInt(t.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleChangeYearDropdown(e){e.stopPropagation(),e.preventDefault();const t=e.target;this.year=parseInt(t.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleClickCalendarPrevMonthBtn(e){e.stopPropagation(),1===this.month?(this.month=12,this.year--):this.month-=1,this._dispatchCalendarHeaderChangeEvent()}_handleClickCalendarNextMonthBtn(e){e.stopPropagation(),12===this.month?(this.month=1,this.year++):this.month+=1,this._dispatchCalendarHeaderChangeEvent()}_dispatchCalendarHeaderChangeEvent(){const e=this.year,t=this.month;gi(this,"kuc:mobile-calendar-header-change",{value:`${e}-${t}`})}_getOptionsMonthTemplate(){return this._monthOptions.map((e=>$e`
+    `}updated(e){e.has("month")&&this._setSelectMonthWidth(this.month),e.has("year")&&this._setYearSelectedIndex(),super.update(e)}_setSelectMonthWidth(e){const t=this._monthOptions[e-1].label;if(!t)return;const i=document.createElement("span");i.innerText=t;const n=(e=>{const t=(e=>{const t=document.createElement("div");return t.style.cssText=`\n  height: 0px;\n  overflow: hidden;\n  display: inline-block;\n  font-size: 14px;\n  font-family: ${window.getComputedStyle(e).fontFamily};\n  `,t})(e),i=e.cloneNode(!0);if(i.hasAttribute("hidden"))return 0;t.appendChild(i),document.body.appendChild(t);const n=t.getBoundingClientRect().width;return document.body.removeChild(t),n})(i);this._selectMonthEl.selectedIndex=this.month-1,this._selectMonthEl.style.width=n+35+"px"}_setYearSelectedIndex(){this.year<100?this._selectYearEl.selectedIndex=this.year:this._selectYearEl.selectedIndex=100}_generateMonthOptions(){return this._locale.MONTH_SELECT.map(((e,t)=>({value:`${t+1}`,label:`${e}`})))}_generateYearOptions(){return this._getYearOptions().map((e=>({value:`${e}`,label:`${e}${this._locale.YEAR_SELECT_POSTFIX}`})))}_getYearOptions(){const e=[];Number.isInteger(this.year)||(this.year=(new Date).getFullYear());let t=this.year<100?0:this.year-100;const i=this.year>=9899?9999:this.year+100;for(t>=i&&(t=i-100);t<=i;t++)e.push(t);return e}_getYearMonthTemplate(){return"zh"===this.language||"ja"===this.language||"zh-TW"===this.language?we` ${this._getYearTemplate()}${this._getMonthTemplate()} `:we` ${this._getMonthTemplate()}${this._getYearTemplate()} `}_handleChangeMonthDropdown(e){e.stopPropagation(),e.preventDefault();const t=e.target;this.month=parseInt(t.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleChangeYearDropdown(e){e.stopPropagation(),e.preventDefault();const t=e.target;this.year=parseInt(t.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleClickCalendarPrevMonthBtn(e){e.stopPropagation(),1===this.month?(this.month=12,this.year--):this.month-=1,this._dispatchCalendarHeaderChangeEvent()}_handleClickCalendarNextMonthBtn(e){e.stopPropagation(),12===this.month?(this.month=1,this.year++):this.month+=1,this._dispatchCalendarHeaderChangeEvent()}_dispatchCalendarHeaderChangeEvent(){const e=this.year,t=this.month;gi(this,"kuc:mobile-calendar-header-change",{value:`${e}-${t}`})}_getOptionsMonthTemplate(){return this._monthOptions.map((e=>we`
         <option
           ?selected="${parseInt(e.value,10)===this.month}"
           value="${e.value}"
         >
           ${e.label}
         </option>
-      `))}_getOptionsYearTemplate(){return this._yearOptions.map((e=>$e`
+      `))}_getOptionsYearTemplate(){return this._yearOptions.map((e=>we`
         <option
           ?selected="${parseInt(e.value,10)===this.year}"
           value="${e.value}"
         >
           ${e.label}
         </option>
-      `))}_getMonthTemplate(){return $e`
+      `))}_getMonthTemplate(){return we`
       <div
-        class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__month"
+        class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__month"
       >
         <select
-          class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__month__select"
+          class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__month__select"
           @change="${this._handleChangeMonthDropdown}"
         >
           ${this._getOptionsMonthTemplate()}
         </select>
       </div>
-    `}_getYearTemplate(){return $e`
+    `}_getYearTemplate(){return we`
       <div
-        class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__year"
+        class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__year"
       >
         <select
-          class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__year__select"
+          class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__year__select"
           @change="${this._handleChangeYearDropdown}"
         >
           ${this._getOptionsYearTemplate()}
         </select>
       </div>
-    `}_getLeftArrowIconSvgTemplate(){return Ce`
+    `}_getLeftArrowIconSvgTemplate(){return $e`
     <svg
       width="16"
       height="14"
@@ -2099,7 +2098,7 @@
         d="M8.70788 11.9567C9.0984 12.3472 9.0984 12.9804 8.70788 13.3709C8.31735 13.7614 7.68419 13.7614 7.29366 13.3709L2.34392 8.42118L0.929703 7.00696L2.34392 5.59275L7.29366 0.643003C7.68419 0.25248 8.31735 0.25248 8.70788 0.643003C9.0984 1.03353 9.0984 1.66669 8.70788 2.05722L4.68709 6.07801L14.0718 6.07801C14.6241 6.07801 15.0718 6.52572 15.0718 7.07801C15.0718 7.63029 14.6241 8.07801 14.0718 8.07801L4.82917 8.07801L8.70788 11.9567Z"
         fill="#206694"
       />
-    </svg>`}_getRightArrowIconSvgTemplate(){return Ce`
+    </svg>`}_getRightArrowIconSvgTemplate(){return $e`
     <svg
       width="16"
       height="14"
@@ -2113,17 +2112,17 @@
         d="M7.29396 2.0572C6.90344 1.66668 6.90344 1.03351 7.29396 0.642991C7.68449 0.252466 8.31765 0.252467 8.70817 0.642991L13.6579 5.59274L15.0721 7.00695L13.6579 8.42117L8.70817 13.3709C8.31765 13.7614 7.68448 13.7614 7.29396 13.3709C6.90344 12.9804 6.90344 12.3472 7.29396 11.9567L11.3148 7.93591L1.93 7.93591C1.37772 7.93591 0.93 7.48819 0.93 6.93591C0.93 6.38362 1.37772 5.93591 1.93 5.93591L11.1727 5.93591L7.29396 2.0572Z"
         fill="#206694"
       />
-    </svg>`}}po([Fe({type:String,attribute:"lang",reflect:!0})],bo.prototype,"language",void 0),po([Fe({type:Number,hasChanged(e){return(t=e)>0&&t<13;var t}})],bo.prototype,"month",void 0),po([Fe({type:Number,hasChanged(e){return(t=e)>=0&&t<1e4;var t}})],bo.prototype,"year",void 0),po([We()],bo.prototype,"_monthOptions",void 0),po([We()],bo.prototype,"_yearOptions",void 0),po([Ke(".kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__month__select")],bo.prototype,"_selectMonthEl",void 0),po([Ke(".kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__year__select")],bo.prototype,"_selectYearEl",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-header-1-17-0")||(mi('\nkuc-base-mobile-datetime-calendar-header-1-17-0,\nkuc-base-mobile-datetime-calendar-header-1-17-0 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-base-mobile-datetime-calendar-header-1-17-0:lang(zh),\nkuc-base-mobile-datetime-calendar-header-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-base-mobile-datetime-calendar-header-1-17-0:lang(zh-TW),\nkuc-base-mobile-datetime-calendar-header-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    box-sizing: border-box;\n    border-bottom: 1px solid #e3e7e8;\n    padding: 0;\n    white-space: nowrap;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: inherit;\n    border: 0;\n    margin: 0;\n    padding: 0;\n    min-width: 40px;\n    width: 40px;\n    height: 40px;\n    overflow: hidden;\n    text-indent: 100%;\n    white-space: nowrap;\n    word-wrap: normal;\n    cursor: pointer;\n    -webkit-appearance: button;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__button-icon {\n    vertical-align: middle;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__button:focus {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center {\n    text-align: center;\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    min-width: 186px;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center\n    > :first-child {\n    padding-left: 13px;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__month,\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__year {\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__month__select,\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__year__select {\n    font-size: 14px;\n    font-weight: 700;\n    padding: 0 22.4px 0 0;\n    line-height: 40px;\n    border: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    background: url("data:image/svg+xml,%3Csvg%0A%20%20%20%20width%3D%2211%22%0A%20%20%20%20height%3D%226%22%0A%20%20%20%20viewBox%3D%220%200%2011%206%22%0A%20%20%20%20fill%3D%22none%22%0A%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20d%3D%22M5.5061%206L0%200L11%200L5.5061%206Z%22%0A%20%20%20%20%20%20fill%3D%22%234b4b4b%22%0A%20%20%20%20%2F%3E%0A%20%20%3C%2Fsvg%3E")\n    no-repeat center right 0.6em #ffffff;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__month__select:focus,\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__year__select:focus {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__month {\n    margin: 0 4px 0 4px;\n}\n'),window.customElements.define("kuc-base-mobile-datetime-calendar-header-1-17-0",bo));var go=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class mo extends bi{constructor(){super(),this.month=1,this.year=2021,this.language="en",this.value="",this._month=1,this._year=2021,this._locale=Qt("en"),this._handleClickDocument=this._handleClickDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument)}),1)}disconnectedCallback(){document.removeEventListener("click",this._handleClickDocument),super.disconnectedCallback()}update(e){if(e.forEach(((e,t)=>{"language"===t&&(this._locale=Qt(this.language))})),e.has("month")&&(this._month=this.month),e.has("year")&&(this._year=this.year),e.has("value")){const{month:e,year:t}=this._separateDateValue();this._month=parseInt(e,10),this._year=parseInt(t,10)}super.update(e)}render(){return $e`
-      <table class="kuc-base-mobile-datetime-calendar-body-1-17-0__table" role="grid">
+    </svg>`}}po([Ge({type:String,attribute:"lang",reflect:!0})],bo.prototype,"language",void 0),po([Ge({type:Number,hasChanged(e){return(t=e)>0&&t<13;var t}})],bo.prototype,"month",void 0),po([Ge({type:Number,hasChanged(e){return(t=e)>=0&&t<1e4;var t}})],bo.prototype,"year",void 0),po([Fe()],bo.prototype,"_monthOptions",void 0),po([Fe()],bo.prototype,"_yearOptions",void 0),po([qe(".kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__month__select")],bo.prototype,"_selectMonthEl",void 0),po([qe(".kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__year__select")],bo.prototype,"_selectYearEl",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-header-1-17-1")||(mi('\nkuc-base-mobile-datetime-calendar-header-1-17-1,\nkuc-base-mobile-datetime-calendar-header-1-17-1 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-base-mobile-datetime-calendar-header-1-17-1:lang(zh),\nkuc-base-mobile-datetime-calendar-header-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-base-mobile-datetime-calendar-header-1-17-1:lang(zh-TW),\nkuc-base-mobile-datetime-calendar-header-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    box-sizing: border-box;\n    border-bottom: 1px solid #e3e7e8;\n    padding: 0;\n    white-space: nowrap;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: inherit;\n    border: 0;\n    margin: 0;\n    padding: 0;\n    min-width: 40px;\n    width: 40px;\n    height: 40px;\n    overflow: hidden;\n    text-indent: 100%;\n    white-space: nowrap;\n    word-wrap: normal;\n    cursor: pointer;\n    -webkit-appearance: button;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__button-icon {\n    vertical-align: middle;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__button:focus {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center {\n    text-align: center;\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    min-width: 186px;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center\n    > :first-child {\n    padding-left: 13px;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__month,\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__year {\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__month__select,\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__year__select {\n    font-size: 14px;\n    font-weight: 700;\n    padding: 0 22.4px 0 0;\n    line-height: 40px;\n    border: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    background: url("data:image/svg+xml,%3Csvg%0A%20%20%20%20width%3D%2211%22%0A%20%20%20%20height%3D%226%22%0A%20%20%20%20viewBox%3D%220%200%2011%206%22%0A%20%20%20%20fill%3D%22none%22%0A%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20d%3D%22M5.5061%206L0%200L11%200L5.5061%206Z%22%0A%20%20%20%20%20%20fill%3D%22%234b4b4b%22%0A%20%20%20%20%2F%3E%0A%20%20%3C%2Fsvg%3E")\n    no-repeat center right 0.6em #ffffff;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__month__select:focus,\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__year__select:focus {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__month {\n    margin: 0 4px 0 4px;\n}\n'),window.customElements.define("kuc-base-mobile-datetime-calendar-header-1-17-1",bo));var go=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class mo extends bi{constructor(){super(),this.month=1,this.year=2021,this.language="en",this.value="",this._month=1,this._year=2021,this._locale=Xt("en"),this._handleClickDocument=this._handleClickDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument)}),1)}disconnectedCallback(){document.removeEventListener("click",this._handleClickDocument),super.disconnectedCallback()}update(e){if(e.forEach(((e,t)=>{"language"===t&&(this._locale=Xt(this.language))})),e.has("month")&&(this._month=this.month),e.has("year")&&(this._year=this.year),e.has("value")){const{month:e,year:t}=this._separateDateValue();this._month=parseInt(e,10),this._year=parseInt(t,10)}super.update(e)}render(){return we`
+      <table class="kuc-base-mobile-datetime-calendar-body-1-17-1__table" role="grid">
         ${this._getHeaderItemsTemplate()}<!--
         -->${this._getDateItemsTemplate()}
       </table>
-    `}_handleClickDocument(){gi(this,"kuc:mobile-calendar-body-blur",{})}_handleClickDate(e){e.preventDefault(),e.stopPropagation();const t=e.target;t.setAttribute("aria-selected","true");const i=t.getAttribute("data-date");this._dispatchClickEvent(i)}_dispatchClickEvent(e){const t={oldValue:this.value,value:e};gi(this,"kuc:mobile-calendar-body-click-date",t),this.value=e}_isToday(e){const t=new Date;return parseInt(e[0],10)===t.getFullYear()&&parseInt(e[1],10)===t.getMonth()+1&&parseInt(e[2],10)===t.getDate()}_separateDateValue(e=this.value){const t=e.split("-");return{day:t[2],month:t[1],year:t[0]}}_getDateClass(e,t){return t?this._isToday(e)?" kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--today":"":" kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--other-month"}_isSameDayOfMoment(e){const t=parseInt(e[1],10),i=parseInt(e[2],10),n=parseInt(e[0],10);let o=(new Date).getDate();if(!this.value.split("-")[2])return!1;if(this.value&&(o=new Date(`${this.value}T00:00:00`).getDate()),o===i&&t===this._month)return!0;const a=new Date(n,this._month,0).getDate();return o>a&&a===i&&t===this._month}_getHeaderItemsTemplate(){return $e`
+    `}_handleClickDocument(){gi(this,"kuc:mobile-calendar-body-blur",{})}_handleClickDate(e){e.preventDefault(),e.stopPropagation();const t=e.target;t.setAttribute("aria-selected","true");const i=t.getAttribute("data-date");this._dispatchClickEvent(i)}_dispatchClickEvent(e){const t={oldValue:this.value,value:e};gi(this,"kuc:mobile-calendar-body-click-date",t),this.value=e}_isToday(e){const t=new Date;return parseInt(e[0],10)===t.getFullYear()&&parseInt(e[1],10)===t.getMonth()+1&&parseInt(e[2],10)===t.getDate()}_separateDateValue(e=this.value){const t=e.split("-");return{day:t[2],month:t[1],year:t[0]}}_getDateClass(e,t){return t?this._isToday(e)?" kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--today":"":" kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--other-month"}_isSameDayOfMoment(e){const t=parseInt(e[1],10),i=parseInt(e[2],10),n=parseInt(e[0],10);let o=(new Date).getDate();if(!this.value.split("-")[2])return!1;if(this.value&&(o=new Date(`${this.value}T00:00:00`).getDate()),o===i&&t===this._month)return!0;const a=new Date(n,this._month,0).getDate();return o>a&&a===i&&t===this._month}_getHeaderItemsTemplate(){return we`
       <thead>
         <tr>
-          ${this._locale.WEEK_DAYS.map((e=>$e`
+          ${this._locale.WEEK_DAYS.map((e=>we`
               <th
-                class="kuc-base-mobile-datetime-calendar-body-1-17-0__table__header"
+                class="kuc-base-mobile-datetime-calendar-body-1-17-1__table__header"
                 role="columnheader"
                 abbr="${e.abbr}"
               >
@@ -2132,17 +2131,17 @@
             `))}
         </tr>
       </thead>
-    `}_getDateItemsTemplate(){const e=Ot(this._year,this._month-1),t=this._locale.MONTH_SELECT[this._month-1];return $e`
+    `}_getDateItemsTemplate(){const e=Bt(this._year,this._month-1),t=this._locale.MONTH_SELECT[this._month-1];return we`
       <tbody>
-        ${e.map((e=>$e`
+        ${e.map((e=>we`
             <tr>
-              ${e.map((e=>{const i=e.text.split("-"),n=this._isSameDayOfMoment(i),o=parseInt(i[1],10)===this._month,a=(this.value===e.attr||n)&&o;return $e`
+              ${e.map((e=>{const i=e.text.split("-"),n=this._isSameDayOfMoment(i),o=parseInt(i[1],10)===this._month,a=(this.value===e.attr||n)&&o;return we`
                   <td
                     role="gridcell"
                     tabindex="${a?0:-1}"
                     aria-selected="${this.value===e.attr}"
                     aria-current="${!!this._isToday(i)&&"date"}"
-                    class="kuc-base-mobile-datetime-calendar-body-1-17-0__table__date${a?"--selected":""}${this._getDateClass(i,o)}"
+                    class="kuc-base-mobile-datetime-calendar-body-1-17-1__table__date${a?"--selected":""}${this._getDateClass(i,o)}"
                     data-date="${e.attr}"
                     aria-label="${i[2]} ${t}"
                     @click="${this._handleClickDate}"
@@ -2153,58 +2152,58 @@
             </tr>
           `))}
       </tbody>
-    `}}go([Fe({type:Number})],mo.prototype,"month",void 0),go([Fe({type:Number})],mo.prototype,"year",void 0),go([Fe({type:String,attribute:"lang",reflect:!0})],mo.prototype,"language",void 0),go([Fe({type:String,reflect:!0})],mo.prototype,"value",void 0),go([We()],mo.prototype,"_month",void 0),go([We()],mo.prototype,"_year",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-body-1-17-0")||(mi('\nkuc-base-mobile-datetime-calendar-body-1-17-0,\nkuc-base-mobile-datetime-calendar-body-1-17-0 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\n\nkuc-base-mobile-datetime-calendar-body-1-17-0:lang(zh),\nkuc-base-mobile-datetime-calendar-body-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\n\nkuc-base-mobile-datetime-calendar-body-1-17-0:lang(zh-TW),\nkuc-base-mobile-datetime-calendar-body-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table,\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table tr {\n    border-collapse: separate;\n    border-spacing: 0;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected {\n    border-spacing: 1px;\n    padding: 0px;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date {\n    max-width: 40px;\n    border-spacing: 1px;\n    cursor: pointer;\n    box-sizing: border-box;\n    width: 40px;\n    height: 40px;\n    border: 1px solid #ffffff;\n    text-align: center;\n    vertical-align: middle;\n    user-select: none;\n    color: #333333;\n    font-size: 14px;\n    font-weight: 400;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button {\n    border-spacing: 1px;\n    cursor: pointer;\n    box-sizing: border-box;\n    text-align: center;\n    vertical-align: middle;\n    color: #333333;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date,\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected,\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__header {\n    box-sizing: border-box;\n    height: 40px;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: 400;\n    font-size: 12px;\n    color: #333333;\n    padding: 0;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date {\n    font-size: 14px;\n}\nth.kuc-base-mobile-datetime-calendar-body-1-17-0__table__header {\n    font-weight: 700;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button,\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button,\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__header {\n    box-sizing: border-box;\n    border: 1px solid #ffffff;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button,\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button {\n    background: none;\n    cursor: pointer;\n    max-width: 40px;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected {\n    border: 1px solid #206694;\n    box-sizing: border-box;\n    text-align: center;\n    font-size: 14px;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button:focus-visible {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--today {\n    color: #333333;\n    background: #d8d8d8;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--other-month {\n    color: #a5a5a5;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected:focus {\n    outline: none;\n}\n'),window.customElements.define("kuc-base-mobile-datetime-calendar-body-1-17-0",mo));var fo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class vo extends bi{constructor(){super(...arguments),this.language="en",this._locale=Qt("en")}update(e){e.has("language")&&(this._locale=Qt(this.language)),super.update(e)}_handleClickCalendarFooterButtonClose(e){e.stopPropagation(),gi(this,"kuc:mobile-calendar-footer-click-close")}_handleClickCalendarFooterButtonNone(e){e.stopPropagation(),gi(this,"kuc:mobile-calendar-footer-click-none")}_handleClickCalendarFooterButtonToday(e){e.stopPropagation(),gi(this,"kuc:mobile-calendar-footer-click-today")}render(){return $e`
-      <div class="kuc-base-mobile-datetime-calendar-footer-1-17-0__group">
+    `}}go([Ge({type:Number})],mo.prototype,"month",void 0),go([Ge({type:Number})],mo.prototype,"year",void 0),go([Ge({type:String,attribute:"lang",reflect:!0})],mo.prototype,"language",void 0),go([Ge({type:String,reflect:!0})],mo.prototype,"value",void 0),go([Fe()],mo.prototype,"_month",void 0),go([Fe()],mo.prototype,"_year",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-body-1-17-1")||(mi('\nkuc-base-mobile-datetime-calendar-body-1-17-1,\nkuc-base-mobile-datetime-calendar-body-1-17-1 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\n\nkuc-base-mobile-datetime-calendar-body-1-17-1:lang(zh),\nkuc-base-mobile-datetime-calendar-body-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\n\nkuc-base-mobile-datetime-calendar-body-1-17-1:lang(zh-TW),\nkuc-base-mobile-datetime-calendar-body-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table,\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table tr {\n    border-collapse: separate;\n    border-spacing: 0;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected {\n    border-spacing: 1px;\n    padding: 0px;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date {\n    max-width: 40px;\n    border-spacing: 1px;\n    cursor: pointer;\n    box-sizing: border-box;\n    width: 40px;\n    height: 40px;\n    border: 1px solid #ffffff;\n    text-align: center;\n    vertical-align: middle;\n    user-select: none;\n    color: #333333;\n    font-size: 14px;\n    font-weight: 400;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button {\n    border-spacing: 1px;\n    cursor: pointer;\n    box-sizing: border-box;\n    text-align: center;\n    vertical-align: middle;\n    color: #333333;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date,\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected,\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__header {\n    box-sizing: border-box;\n    height: 40px;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: 400;\n    font-size: 12px;\n    color: #333333;\n    padding: 0;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date {\n    font-size: 14px;\n}\nth.kuc-base-mobile-datetime-calendar-body-1-17-1__table__header {\n    font-weight: 700;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button,\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button,\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__header {\n    box-sizing: border-box;\n    border: 1px solid #ffffff;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button,\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button {\n    background: none;\n    cursor: pointer;\n    max-width: 40px;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected {\n    border: 1px solid #206694;\n    box-sizing: border-box;\n    text-align: center;\n    font-size: 14px;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button:focus-visible {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--today {\n    color: #333333;\n    background: #d8d8d8;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--other-month {\n    color: #a5a5a5;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected:focus {\n    outline: none;\n}\n'),window.customElements.define("kuc-base-mobile-datetime-calendar-body-1-17-1",mo));var fo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class vo extends bi{constructor(){super(...arguments),this.language="en",this._locale=Xt("en")}update(e){e.has("language")&&(this._locale=Xt(this.language)),super.update(e)}_handleClickCalendarFooterButtonClose(e){e.stopPropagation(),gi(this,"kuc:mobile-calendar-footer-click-close")}_handleClickCalendarFooterButtonNone(e){e.stopPropagation(),gi(this,"kuc:mobile-calendar-footer-click-none")}_handleClickCalendarFooterButtonToday(e){e.stopPropagation(),gi(this,"kuc:mobile-calendar-footer-click-today")}render(){return we`
+      <div class="kuc-base-mobile-datetime-calendar-footer-1-17-1__group">
         <button
           type="button"
-          class="kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button--today"
+          class="kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button--today"
           @click="${this._handleClickCalendarFooterButtonToday}"
         >
           ${this._locale.CALENDAR_FOOTER_TEXT.today}
         </button>
         <button
           type="button"
-          class="kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button--none"
+          class="kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button--none"
           @click="${this._handleClickCalendarFooterButtonNone}"
         >
           ${this._locale.CALENDAR_FOOTER_TEXT.none}
         </button>
         <button
           type="button"
-          class="kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button--close"
+          class="kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button--close"
           @click="${this._handleClickCalendarFooterButtonClose}"
         >
           ${this._locale.CALENDAR_FOOTER_TEXT.close}
         </button>
       </div>
-    `}}fo([Fe({type:String,attribute:"lang",reflect:!0})],vo.prototype,"language",void 0),fo([We()],vo.prototype,"_locale",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-footer-1-17-0")||(mi('\nkuc-base-mobile-datetime-calendar-footer-1-17-0,\nkuc-base-mobile-datetime-calendar-footer-1-17-0 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\n\nkuc-base-mobile-datetime-calendar-footer-1-17-0:lang(zh),\nkuc-base-mobile-datetime-calendar-footer-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-base-mobile-datetime-calendar-footer-1-17-0:lang(zh-TW),\nkuc-base-mobile-datetime-calendar-footer-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n.kuc-base-mobile-datetime-calendar-footer-1-17-0__group {\n    display: flex;\n    justify-content: space-between;\n    box-sizing: border-box;\n    padding: 0;\n    white-space: nowrap;\n}\n.kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button {\n    background: transparent;\n    border: 1px solid transparent;\n    color: #206694;\n    height: 40px;\n    cursor: pointer;\n    font-size: 14px;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    font-weight: 700;\n}\n.kuc-base-mobile-datetime-calendar-footer-1-17-0__group__center {\n    width: 100%;\n}\n'),window.customElements.define("kuc-base-mobile-datetime-calendar-footer-1-17-0",vo));var ko=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class yo extends bi{constructor(){super(...arguments),this.language="en",this.value="",this._month=1,this._year=(new Date).getFullYear()}update(e){e.has("value")&&this._updateValue(),super.update(e)}render(){return $e`
+    `}}fo([Ge({type:String,attribute:"lang",reflect:!0})],vo.prototype,"language",void 0),fo([Fe()],vo.prototype,"_locale",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-footer-1-17-1")||(mi('\nkuc-base-mobile-datetime-calendar-footer-1-17-1,\nkuc-base-mobile-datetime-calendar-footer-1-17-1 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\n\nkuc-base-mobile-datetime-calendar-footer-1-17-1:lang(zh),\nkuc-base-mobile-datetime-calendar-footer-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-base-mobile-datetime-calendar-footer-1-17-1:lang(zh-TW),\nkuc-base-mobile-datetime-calendar-footer-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n.kuc-base-mobile-datetime-calendar-footer-1-17-1__group {\n    display: flex;\n    justify-content: space-between;\n    box-sizing: border-box;\n    padding: 0;\n    white-space: nowrap;\n}\n.kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button {\n    background: transparent;\n    border: 1px solid transparent;\n    color: #206694;\n    height: 40px;\n    cursor: pointer;\n    font-size: 14px;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    font-weight: 700;\n}\n.kuc-base-mobile-datetime-calendar-footer-1-17-1__group__center {\n    width: 100%;\n}\n'),window.customElements.define("kuc-base-mobile-datetime-calendar-footer-1-17-1",vo));var ko=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class yo extends bi{constructor(){super(...arguments),this.language="en",this.value="",this._month=1,this._year=(new Date).getFullYear()}update(e){e.has("value")&&this._updateValue(),super.update(e)}render(){return we`
       <div
-        class="kuc-base-mobile-datetime-calendar-1-17-0__group"
+        class="kuc-base-mobile-datetime-calendar-1-17-1__group"
         role="dialog"
         aria-modal="true"
         aria-label="Calender"
         @click="${this._handleClickCalendarGroup}"
       >
-        <kuc-base-mobile-datetime-calendar-header-1-17-0
+        <kuc-base-mobile-datetime-calendar-header-1-17-1
           .year="${this._year}"
           .month="${this._month}"
           .language="${this.language}"
           @kuc:mobile-calendar-header-change="${this._handleCalendarHeaderChange}"
-        ></kuc-base-mobile-datetime-calendar-header-1-17-0>
-        <kuc-base-mobile-datetime-calendar-body-1-17-0
+        ></kuc-base-mobile-datetime-calendar-header-1-17-1>
+        <kuc-base-mobile-datetime-calendar-body-1-17-1
           .year="${this._year}"
           .month="${this._month}"
           .value="${this.value}"
           .language="${this.language}"
-        ></kuc-base-mobile-datetime-calendar-body-1-17-0>
-        <kuc-base-mobile-datetime-calendar-footer-1-17-0
+        ></kuc-base-mobile-datetime-calendar-body-1-17-1>
+        <kuc-base-mobile-datetime-calendar-footer-1-17-1
           .language="${this.language}"
-        ></kuc-base-mobile-datetime-calendar-footer-1-17-0>
+        ></kuc-base-mobile-datetime-calendar-footer-1-17-1>
       </div>
-    `}updated(e){super.updated(e)}_handleClickCalendarGroup(e){e.stopPropagation()}_handleCalendarHeaderChange(e){const{year:t,month:i}=this._separateValue(e.detail.value);this._year=t,this._month=i}_updateValue(){""===this.value&&(this.value=Yt().slice(0,7)+"-01");const{year:e,month:t}=this._separateValue(this.value);this._year=e,this._month=t}_separateValue(e){const t=e.split("-");return{year:parseInt(t[0],10),month:parseInt(t[1],10)}}}ko([Fe({type:String,attribute:"lang",reflect:!0})],yo.prototype,"language",void 0),ko([Fe({type:String,reflect:!0})],yo.prototype,"value",void 0),ko([We()],yo.prototype,"_month",void 0),ko([We()],yo.prototype,"_year",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-1-17-0")||(mi("\n.kuc-base-mobile-datetime-calendar-1-17-0__group {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 290px;\n    padding: 0 10px;\n    background: #ffffff;\n    text-align: center;\n    font-size: 13px;\n    border: 1px solid #d8d8d8;\n}\n"),window.customElements.define("kuc-base-mobile-datetime-calendar-1-17-0",yo));var xo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class wo extends bi{constructor(){super(...arguments),this.inputId="",this.language="en",this.value="",this.disabled=!1,this.inputAriaInvalid=!1,this.required=!1,this._dateTimeCalendarVisible=!1,this._calendarValue="",this._inputValue=""}update(e){e.has("inputId")&&(this._GUID=this.inputId),(e.has("value")||e.has("language"))&&this._updateValueProp(),super.update(e)}render(){return $e`
-      <div class="kuc-mobile-base-date-1-17-0__group${this._getGroupClass()}">
+    `}updated(e){super.updated(e)}_handleClickCalendarGroup(e){e.stopPropagation()}_handleCalendarHeaderChange(e){const{year:t,month:i}=this._separateValue(e.detail.value);this._year=t,this._month=i}_updateValue(){""===this.value&&(this.value=Kt().slice(0,7)+"-01");const{year:e,month:t}=this._separateValue(this.value);this._year=e,this._month=t}_separateValue(e){const t=e.split("-");return{year:parseInt(t[0],10),month:parseInt(t[1],10)}}}ko([Ge({type:String,attribute:"lang",reflect:!0})],yo.prototype,"language",void 0),ko([Ge({type:String,reflect:!0})],yo.prototype,"value",void 0),ko([Fe()],yo.prototype,"_month",void 0),ko([Fe()],yo.prototype,"_year",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-1-17-1")||(mi("\n.kuc-base-mobile-datetime-calendar-1-17-1__group {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 290px;\n    padding: 0 10px;\n    background: #ffffff;\n    text-align: center;\n    font-size: 13px;\n    border: 1px solid #d8d8d8;\n}\n"),window.customElements.define("kuc-base-mobile-datetime-calendar-1-17-1",yo));var xo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class wo extends bi{constructor(){super(...arguments),this.inputId="",this.language="en",this.value="",this.disabled=!1,this.inputAriaInvalid=!1,this.required=!1,this._dateTimeCalendarVisible=!1,this._calendarValue="",this._inputValue=""}update(e){e.has("inputId")&&(this._GUID=this.inputId),(e.has("value")||e.has("language"))&&this._updateValueProp(),super.update(e)}render(){return we`
+      <div class="kuc-mobile-base-date-1-17-1__group${this._getGroupClass()}">
         <input
-          class="kuc-mobile-base-date-1-17-0__group__input"
+          class="kuc-mobile-base-date-1-17-1__group__input"
           type="text"
           id="${this._GUID}-label"
           readonly="readonly"
@@ -2218,7 +2217,7 @@
         />
         <button
           type="button"
-          class="kuc-mobile-base-date-1-17-0__group__button"
+          class="kuc-mobile-base-date-1-17-1__group__button"
           aria-label="calendar"
           @click="${this._handleClickOpenCalendar}"
           ?disabled="${this.disabled}"
@@ -2227,9 +2226,9 @@
         </button>
         ${this._getCalendarTemplate()}
       </div>
-    `}updated(e){this._dateTimeCalendarVisible&&this._setCalendarPosition(),super.updated(e)}_setCalendarPosition(){const{inputToBottom:e,inputToTop:t}=ni(this),i=this._inputEl.getBoundingClientRect().height;e>=t||(this._calendarEl.style.bottom=i+2+"px",this._calendarEl.style.top="auto")}_getGroupClass(){let e="";return this.disabled&&(e+=" kuc-mobile-base-date-1-17-0__group--disabled"),this.required&&(e+=" kuc-mobile-base-date-1-17-0__group--required"),e}_handleClickOpenCalendar(e){if(this._dateTimeCalendarVisible)return e.preventDefault(),void e.stopPropagation();this._calendarValue=this._getNewCalendarValue(this._inputValue||""),this._openCalendar()}_updateValueProp(){if(this.value)return this._inputValue=Wt(this.language,this.value),void(this._calendarValue=this.value);const e=Yt();this._inputValue="",this._calendarValue=this._calendarValue?this._calendarValue.slice(0,7)+"-01":e.slice(0,7)}_getNewCalendarValue(e){if(Jt(this.language,e))return qt(this.language,e);let t=this._calendarValue.slice(0,7);return""===e&&(t=this._calendarValue.slice(0,7)+"-01"),t}_closeCalendar(){this._dateTimeCalendarVisible=!1}_openCalendar(){this._dateTimeCalendarVisible=!0}_handleClickCalendarClickDate(e){this._closeCalendar(),e.detail.oldValue=this.value,e.detail.oldValue!==e.detail.value&&(this.value=e.detail.value,gi(this,"kuc:mobile-base-date-change",e.detail),this._btnToggleEl.focus())}_handleClickCalendarFooterButtonNone(){this._closeCalendar(),this._inputValue="";let e=this.value?this.value.slice(0,7)+"-01":"";e||(e=this._calendarValue.slice(0,7)+"-01"),this._calendarValue=e,this._dispathDateChangeCustomEvent("")}_handleClickCalendarFooterButtonToday(){this._closeCalendar();const e=Yt();this._dispathDateChangeCustomEvent(e)}_handleClickCalendarFooterButtonClose(){this._closeCalendar(),this._btnToggleEl.focus()}_handleCalendarBlurBody(e){e.preventDefault(),this._dateTimeCalendarVisible=!1}_dispathDateChangeCustomEvent(e){const t={value:e,oldValue:this.value};this.value=e,gi(this,"kuc:mobile-base-date-change",t),this._btnToggleEl.focus()}_getCalendarTemplate(){return this._dateTimeCalendarVisible?$e`
-          <kuc-base-mobile-datetime-calendar-1-17-0
-            class="kuc-base-mobile-date-1-17-0__calendar"
+    `}updated(e){this._dateTimeCalendarVisible&&this._setCalendarPosition(),super.updated(e)}_setCalendarPosition(){const{inputToBottom:e,inputToTop:t}=ii(this),i=this._inputEl.getBoundingClientRect().height;e>=t||(this._calendarEl.style.bottom=i+2+"px",this._calendarEl.style.top="auto")}_getGroupClass(){let e="";return this.disabled&&(e+=" kuc-mobile-base-date-1-17-1__group--disabled"),this.required&&(e+=" kuc-mobile-base-date-1-17-1__group--required"),e}_handleClickOpenCalendar(e){if(this._dateTimeCalendarVisible)return e.preventDefault(),void e.stopPropagation();this._calendarValue=this._getNewCalendarValue(this._inputValue||""),this._openCalendar()}_updateValueProp(){if(this.value)return this._inputValue=Ft(this.language,this.value),void(this._calendarValue=this.value);const e=Kt();this._inputValue="",this._calendarValue=this._calendarValue?this._calendarValue.slice(0,7)+"-01":e.slice(0,7)}_getNewCalendarValue(e){if(Yt(this.language,e))return Wt(this.language,e);let t=this._calendarValue.slice(0,7);return""===e&&(t=this._calendarValue.slice(0,7)+"-01"),t}_closeCalendar(){this._dateTimeCalendarVisible=!1}_openCalendar(){this._dateTimeCalendarVisible=!0}_handleClickCalendarClickDate(e){this._closeCalendar(),e.detail.oldValue=this.value,e.detail.oldValue!==e.detail.value&&(this.value=e.detail.value,gi(this,"kuc:mobile-base-date-change",e.detail),this._btnToggleEl.focus())}_handleClickCalendarFooterButtonNone(){this._closeCalendar(),this._inputValue="";let e=this.value?this.value.slice(0,7)+"-01":"";e||(e=this._calendarValue.slice(0,7)+"-01"),this._calendarValue=e,this._dispathDateChangeCustomEvent("")}_handleClickCalendarFooterButtonToday(){this._closeCalendar();const e=Kt();this._dispathDateChangeCustomEvent(e)}_handleClickCalendarFooterButtonClose(){this._closeCalendar(),this._btnToggleEl.focus()}_handleCalendarBlurBody(e){e.preventDefault(),this._dateTimeCalendarVisible=!1}_dispathDateChangeCustomEvent(e){const t={value:e,oldValue:this.value};this.value=e,gi(this,"kuc:mobile-base-date-change",t),this._btnToggleEl.focus()}_getCalendarTemplate(){return this._dateTimeCalendarVisible?we`
+          <kuc-base-mobile-datetime-calendar-1-17-1
+            class="kuc-base-mobile-date-1-17-1__calendar"
             .language="${this.language}"
             .value="${this._calendarValue}"
             ?hidden="${!this._dateTimeCalendarVisible}"
@@ -2239,8 +2238,8 @@
             @kuc:mobile-calendar-footer-click-close="${this._handleClickCalendarFooterButtonClose}"
             @kuc:mobile-calendar-body-blur="${this._handleCalendarBlurBody}"
           >
-          </kuc-base-mobile-datetime-calendar-1-17-0>
-        `:""}_getCalendarIconTemplate(){return $e`
+          </kuc-base-mobile-datetime-calendar-1-17-1>
+        `:""}_getCalendarIconTemplate(){return we`
       <svg width="24" height="24" viewBox="0 0 28 28" fill="none">
         <path
           fill-rule="evenodd"
@@ -2249,21 +2248,21 @@
           fill="#4b4b4b"
         />
       </svg>
-    `}}xo([Fe({type:String})],wo.prototype,"inputId",void 0),xo([Fe({type:String,attribute:"lang",reflect:!0})],wo.prototype,"language",void 0),xo([Fe({type:String,reflect:!0})],wo.prototype,"value",void 0),xo([Fe({type:Boolean})],wo.prototype,"disabled",void 0),xo([Fe({type:Boolean})],wo.prototype,"inputAriaInvalid",void 0),xo([Fe({type:Boolean})],wo.prototype,"required",void 0),xo([Ke(".kuc-mobile-base-date-1-17-0__group__button")],wo.prototype,"_btnToggleEl",void 0),xo([Ke(".kuc-mobile-base-date-1-17-0__group__input")],wo.prototype,"_inputEl",void 0),xo([Ke(".kuc-base-mobile-date-1-17-0__calendar")],wo.prototype,"_calendarEl",void 0),xo([We()],wo.prototype,"_dateTimeCalendarVisible",void 0),window.customElements.get("kuc-mobile-base-date-1-17-0")||(mi('\nkuc-mobile-base-date-1-17-0,\nkuc-mobile-base-date-1-17-0 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-mobile-base-date-1-17-0:lang(zh),\nkuc-mobile-base-date-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-mobile-base-date-1-17-0:lang(zh-TW),\nkuc-mobile-base-date-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n.kuc-mobile-base-date-1-17-0__group {\n    display: flex;\n    align-items: center;\n    position: relative;\n    border-radius: 5.148px;\n    background-color: #ffffff;\n}\n.kuc-mobile-base-date-1-17-0__group__input[aria-required="true"] {\n    border-color: #cf4a38;\n}\ninput.kuc-mobile-base-date-1-17-0__group__input {\n    color: #000000;\n    width: 100%;\n    height: 31.28px;\n    font-size: 99%;\n    -webkit-flex-grow: 1;\n    flex-grow: 1;\n    padding: 5.148px;\n    border-radius: 5.148px;\n    box-shadow: 0px 1px 0px #ffffff, inset 0px 2px 3px #dadada;\n    border: 1px solid #b3b3b3;\n    font-weight: 400;\n    -webkit-appearance: none;\n    appearance: none;\n    outline: 0;\n    background: transparent;\n    box-sizing: border-box;\n}\n.kuc-mobile-base-date-1-17-0__group--disabled {\n    background-color: #d5d7d9;\n    opacity: 1;\n}\n.kuc-mobile-base-date-1-17-0__group--disabled input {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n}\n.kuc-base-mobile-date-1-17-0__calendar {\n    position: absolute;\n    left: 0;\n    top: 39px;\n    z-index: 1000;\n}\n.kuc-mobile-base-date-1-17-0__group__button {\n    position: absolute;\n    display: flex;\n    right: 10px;\n    background-color: transparent;\n    border: 0;\n    padding: 0;\n    height: 100%;\n    align-items: center;\n}\n'),window.customElements.define("kuc-mobile-base-date-1-17-0",wo));var $o=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Co;(()=>{if(Co=window.customElements.get("kuc-mobile-date-picker-1-17-0"),!Co){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.language="auto",this.value="",this.visible=!0,this._dateConverted="",this._inputValue="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!(void 0!==this.value&&""!==this.value&&(ki(this.value)?(this._dateConverted=ri(this.value),""!==this._dateConverted&&!wi(this._dateConverted)&&(this.throwErrorAfterUpdateComplete(Tt),1)):(this.throwErrorAfterUpdateComplete(Tt),1)))}willUpdate(e){e.has("value")&&void 0!==this.value&&""!==this.value&&(this.value=this._dateConverted)}update(e){e.has("value")&&this._updateInputValue(),super.update(e)}render(){return $e`
-        <div class="kuc-mobile-date-picker-1-17-0__group">
+    `}}xo([Ge({type:String})],wo.prototype,"inputId",void 0),xo([Ge({type:String,attribute:"lang",reflect:!0})],wo.prototype,"language",void 0),xo([Ge({type:String,reflect:!0})],wo.prototype,"value",void 0),xo([Ge({type:Boolean})],wo.prototype,"disabled",void 0),xo([Ge({type:Boolean})],wo.prototype,"inputAriaInvalid",void 0),xo([Ge({type:Boolean})],wo.prototype,"required",void 0),xo([qe(".kuc-mobile-base-date-1-17-1__group__button")],wo.prototype,"_btnToggleEl",void 0),xo([qe(".kuc-mobile-base-date-1-17-1__group__input")],wo.prototype,"_inputEl",void 0),xo([qe(".kuc-base-mobile-date-1-17-1__calendar")],wo.prototype,"_calendarEl",void 0),xo([Fe()],wo.prototype,"_dateTimeCalendarVisible",void 0),window.customElements.get("kuc-mobile-base-date-1-17-1")||(mi('\nkuc-mobile-base-date-1-17-1,\nkuc-mobile-base-date-1-17-1 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-mobile-base-date-1-17-1:lang(zh),\nkuc-mobile-base-date-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-mobile-base-date-1-17-1:lang(zh-TW),\nkuc-mobile-base-date-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n.kuc-mobile-base-date-1-17-1__group {\n    display: flex;\n    align-items: center;\n    position: relative;\n    border-radius: 5.148px;\n    background-color: #ffffff;\n}\n.kuc-mobile-base-date-1-17-1__group__input[aria-required="true"] {\n    border-color: #cf4a38;\n}\ninput.kuc-mobile-base-date-1-17-1__group__input {\n    color: #000000;\n    width: 100%;\n    height: 31.28px;\n    font-size: 99%;\n    -webkit-flex-grow: 1;\n    flex-grow: 1;\n    padding: 5.148px;\n    border-radius: 5.148px;\n    box-shadow: 0px 1px 0px #ffffff, inset 0px 2px 3px #dadada;\n    border: 1px solid #b3b3b3;\n    font-weight: 400;\n    -webkit-appearance: none;\n    appearance: none;\n    outline: 0;\n    background: transparent;\n    box-sizing: border-box;\n}\n.kuc-mobile-base-date-1-17-1__group--disabled {\n    background-color: #d5d7d9;\n    opacity: 1;\n}\n.kuc-mobile-base-date-1-17-1__group--disabled input {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n}\n.kuc-base-mobile-date-1-17-1__calendar {\n    position: absolute;\n    left: 0;\n    top: 39px;\n    z-index: 1000;\n}\n.kuc-mobile-base-date-1-17-1__group__button {\n    position: absolute;\n    display: flex;\n    right: 10px;\n    background-color: transparent;\n    border: 0;\n    padding: 0;\n    height: 100%;\n    align-items: center;\n}\n'),window.customElements.define("kuc-mobile-base-date-1-17-1",wo));var $o=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Co;(()=>{if(Co=window.customElements.get("kuc-mobile-date-picker-1-17-1"),!Co){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.language="auto",this.value="",this.visible=!0,this._dateConverted="",this._inputValue="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!(void 0!==this.value&&""!==this.value&&(ki(this.value)?(this._dateConverted=si(this.value),""!==this._dateConverted&&!wi(this._dateConverted)&&(this.throwErrorAfterUpdateComplete(St),1)):(this.throwErrorAfterUpdateComplete(St),1)))}willUpdate(e){e.has("value")&&void 0!==this.value&&""!==this.value&&(this.value=this._dateConverted)}update(e){e.has("value")&&this._updateInputValue(),super.update(e)}render(){return we`
+        <div class="kuc-mobile-date-picker-1-17-1__group">
           <label
-            class="kuc-mobile-date-picker-1-17-0__group__label"
+            class="kuc-mobile-date-picker-1-17-1__group__label"
             for="${this._GUID}-label"
             @click="${this._handleClickLabel}"
             ?hidden="${!this.label}"
           >
-            <kuc-base-mobile-label-1-17-0
+            <kuc-base-mobile-label-1-17-1
               .requiredIcon="${this.requiredIcon}"
               .text="${this.label}"
-            ></kuc-base-mobile-label-1-17-0>
+            ></kuc-base-mobile-label-1-17-1>
           </label>
-          <kuc-mobile-base-date-1-17-0
-            class="kuc-mobile-date-picker-1-17-0__group__base__date"
+          <kuc-mobile-base-date-1-17-1
+            class="kuc-mobile-date-picker-1-17-1__group__base__date"
             .disabled="${this.disabled}"
             .value="${this._inputValue}"
             .inputId="${this._GUID}"
@@ -2272,17 +2271,17 @@
             .language="${this._getLanguage()}"
             @kuc:mobile-base-date-change="${this._handleDateChange}"
           >
-          </kuc-mobile-base-date-1-17-0>
-          <kuc-base-mobile-error-1-17-0 .guid="${this._GUID}" .text="${this.error}">
-          </kuc-base-mobile-error-1-17-0>
+          </kuc-mobile-base-date-1-17-1>
+          <kuc-base-mobile-error-1-17-1 .guid="${this._GUID}" .text="${this.error}">
+          </kuc-base-mobile-error-1-17-1>
         </div>
-      `}_updateInputValue(){void 0!==this.value&&""!==this.value?this._inputValue=this.value:this._inputValue=""}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_handleClickLabel(e){e.preventDefault()}_handleDateChange(e){e.stopPropagation(),e.preventDefault();const t={oldValue:this.value,value:""};this.value=e.detail.value,t.value=this.value,this._dispatchChangeEvent(t)}_dispatchChangeEvent(e){gi(this,"change",e)}}$o([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),$o([Fe({type:String})],e.prototype,"error",void 0),$o([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),$o([Fe({type:String})],e.prototype,"label",void 0),$o([Fe({type:Boolean})],e.prototype,"disabled",void 0),$o([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),$o([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),$o([Fe({type:String})],e.prototype,"value",void 0),$o([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),$o([We()],e.prototype,"_inputValue",void 0),window.customElements.define("kuc-mobile-date-picker-1-17-0",e),mi('\nkuc-mobile-date-picker-1-17-0,\nkuc-mobile-date-picker-1-17-0 * {\n  color: #333333;\n  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-mobile-date-picker-1-17-0:lang(zh),\nkuc-mobile-date-picker-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-mobile-date-picker-1-17-0:lang(zh-TW),\nkuc-mobile-date-picker-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\nkuc-mobile-date-picker-1-17-0 {\n  font-size: 13px;\n  color: #333333;\n  display: inline-table;\n  vertical-align: top;\n  width: 100%;\n}\nkuc-mobile-date-picker-1-17-0[hidden] {\n  display: none;\n}\n.kuc-mobile-date-picker-1-17-0__group {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0px;\n  height: auto;\n  margin: 0px;\n}\n.kuc-mobile-date-picker-1-17-0__group__label {\n  display: inline-block;\n  font-weight: bold;\n  line-height: 1.5;\n  padding: 0px;\n  white-space: nowrap;\n  margin: 0 0 4px 0;\n}\n.kuc-mobile-date-picker-1-17-0__group__base__date {\n  width: 130px;\n  margin-right: 0.5em;\n  margin-left: 0.5em;\n}\n.kuc-mobile-date-picker-1-17-0__group__label[hidden] {\n  display: none;\n}\n.kuc-mobile-date-picker-1-17-0__group input.kuc-base-date-1-17-0__input {\n  width: 100px;\n  height: 40px;\n  padding: 0px;\n  text-align: center;\n  border: 1px solid #e3e7e8;\n  box-sizing: border-box;\n  font-size: 14px;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n\n.kuc-mobile-date-picker-1-17-0__group input.kuc-base-date-1-17-0__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\n.kuc-mobile-date-picker-1-17-0__group input.kuc-base-date-1-17-0__input--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: #333333;\n}\n.kuc-mobile-date-picker-1-17-0__group input.kuc-base-date-1-17-0__input:disabled {\n  color: #888888;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n'),Co=e}})();var Io=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Eo extends bi{constructor(e){super(),this.guid="",this.language="en",this.value="",this.disabled=!1,this.hour12=!1,this.required=!1,this._timeStep=1,this._hours="",this._minutes="",this._suffix="",this._locale=Qt("en");const t=vi(e);Object.assign(this,t)}update(e){e.has("language")&&(this._locale=Qt(this.language)),e.has("hour12")&&(this._hourOptions=((e=!1)=>e?ei("AM").concat(ei("PM")):(()=>{const e=[];e.push({value:"00",label:"00"});for(let t=1;t<=23;t++)e.push({value:Zt(t),label:`${Zt(t)}`});return e})())(this.hour12)),e.has("_timeStep")&&(this._minuteOptions=((e=1)=>{const t=[];for(let i=0;i<=59;i+=e)t.push({value:Zt(i),label:Zt(i)});return t})(this._timeStep)),super.update(e)}render(){return $e`
+      `}_updateInputValue(){void 0!==this.value&&""!==this.value?this._inputValue=this.value:this._inputValue=""}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_handleClickLabel(e){e.preventDefault()}_handleDateChange(e){e.stopPropagation(),e.preventDefault();const t={oldValue:this.value,value:""};this.value=e.detail.value,t.value=this.value,this._dispatchChangeEvent(t)}_dispatchChangeEvent(e){gi(this,"change",e)}}$o([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),$o([Ge({type:String})],e.prototype,"error",void 0),$o([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),$o([Ge({type:String})],e.prototype,"label",void 0),$o([Ge({type:Boolean})],e.prototype,"disabled",void 0),$o([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),$o([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),$o([Ge({type:String})],e.prototype,"value",void 0),$o([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),$o([Fe()],e.prototype,"_inputValue",void 0),window.customElements.define("kuc-mobile-date-picker-1-17-1",e),mi('\nkuc-mobile-date-picker-1-17-1,\nkuc-mobile-date-picker-1-17-1 * {\n  color: #333333;\n  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-mobile-date-picker-1-17-1:lang(zh),\nkuc-mobile-date-picker-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-mobile-date-picker-1-17-1:lang(zh-TW),\nkuc-mobile-date-picker-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\nkuc-mobile-date-picker-1-17-1 {\n  font-size: 13px;\n  color: #333333;\n  display: inline-table;\n  vertical-align: top;\n  width: 100%;\n}\nkuc-mobile-date-picker-1-17-1[hidden] {\n  display: none;\n}\n.kuc-mobile-date-picker-1-17-1__group {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0px;\n  height: auto;\n  margin: 0px;\n}\n.kuc-mobile-date-picker-1-17-1__group__label {\n  display: inline-block;\n  font-weight: bold;\n  line-height: 1.5;\n  padding: 0px;\n  white-space: nowrap;\n  margin: 0 0 4px 0;\n}\n.kuc-mobile-date-picker-1-17-1__group__base__date {\n  width: 130px;\n  margin-right: 0.5em;\n  margin-left: 0.5em;\n}\n.kuc-mobile-date-picker-1-17-1__group__label[hidden] {\n  display: none;\n}\n.kuc-mobile-date-picker-1-17-1__group input.kuc-base-date-1-17-1__input {\n  width: 100px;\n  height: 40px;\n  padding: 0px;\n  text-align: center;\n  border: 1px solid #e3e7e8;\n  box-sizing: border-box;\n  font-size: 14px;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n\n.kuc-mobile-date-picker-1-17-1__group input.kuc-base-date-1-17-1__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\n.kuc-mobile-date-picker-1-17-1__group input.kuc-base-date-1-17-1__input--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: #333333;\n}\n.kuc-mobile-date-picker-1-17-1__group input.kuc-base-date-1-17-1__input:disabled {\n  color: #888888;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n'),Co=e}})();var Io=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Eo extends bi{constructor(e){super(),this.guid="",this.language="en",this.value="",this.disabled=!1,this.hour12=!1,this.required=!1,this._timeStep=1,this._hours="",this._minutes="",this._suffix="",this._locale=Xt("en");const t=vi(e);Object.assign(this,t)}update(e){e.has("language")&&(this._locale=Xt(this.language)),e.has("hour12")&&(this._hourOptions=((e=!1)=>e?Qt("AM").concat(Qt("PM")):(()=>{const e=[];e.push({value:"00",label:"00"});for(let t=1;t<=23;t++)e.push({value:Jt(t),label:`${Jt(t)}`});return e})())(this.hour12)),e.has("_timeStep")&&(this._minuteOptions=((e=1)=>{const t=[];for(let i=0;i<=59;i+=e)t.push({value:Jt(i),label:Jt(i)});return t})(this._timeStep)),super.update(e)}render(){return we`
       <fieldset
-        class="kuc-base-mobile-time-1-17-0__group${this.disabled?" kuc-base-mobile-time-1-17-0__group--disabled":""}${this.required?" kuc-base-mobile-time-1-17-0__group--required":""}"
+        class="kuc-base-mobile-time-1-17-1__group${this.disabled?" kuc-base-mobile-time-1-17-1__group--disabled":""}${this.required?" kuc-base-mobile-time-1-17-1__group--required":""}"
         aria-label="label-text"
       >
         <select
-          class="kuc-base-mobile-time-1-17-0__group__hours"
+          class="kuc-base-mobile-time-1-17-1__group__hours"
           aria-label="Hour"
           aria-describedby="${this.guid}-error"
           ?disabled="${this.disabled}"
@@ -2291,9 +2290,9 @@
           <option value selected></option>
           ${this._getOptionsHourTemplate()}
         </select>
-        <span class="kuc-base-mobile-time-1-17-0__group__colon">:</span>
+        <span class="kuc-base-mobile-time-1-17-1__group__colon">:</span>
         <select
-          class="kuc-base-mobile-time-1-17-0__group__minutes"
+          class="kuc-base-mobile-time-1-17-1__group__minutes"
           aria-label="Minute"
           aria-describedby="${this.guid}-error"
           ?disabled="${this.disabled}"
@@ -2303,20 +2302,20 @@
           ${this._getOptionsMinuteTemplate()}
         </select>
       </fieldset>
-    `}updated(e){e.has("value")&&this._updateInputValue(),super.update(e)}_updateInputValue(){const e=((e,t)=>{const i={hours:"",minutes:"",suffix:""},n=e.split(":"),o=parseInt(n[0],10),a=parseInt(n[1],10),s=o%kt;return isNaN(s)||(i.hours=Zt(t?zt(s):s),i.suffix=t?Rt(s):""),isNaN(a)||(i.minutes=Zt(a)),i})(this.value,this.hour12);this._hours=e.hours,this._minutes=e.minutes,this._suffix=e.suffix||"",this._setValueToInput(e)}_setValueToInput(e){this._minutesEl.value=e.minutes,e.suffix?this._hoursEl.value=e.suffix+" "+e.hours:this._hoursEl.value=e.hours}_handleChangeMinutes(e){e.preventDefault(),e.stopPropagation();const t=this._getTimeValueString(),i=e.target.value;this._minutes=i;const n=this._getTimeValueString();this.value=n,this._dispatchEventTimeChange(n,t)}_handleChangeHours(e){e.preventDefault(),e.stopPropagation();const t=this._getTimeValueString(),i=e.target.value.split(" ");2===i.length?(this._hours=i[1],this._suffix=i[0]):(this._hours=i[0],this._suffix="");const n=this._getTimeValueString();this.value=n,this._dispatchEventTimeChange(n,t)}_getTimeValueString(){const e=`${this._hours}:${this._minutes}`;return this._suffix?jt(`${e} ${this._suffix}`):jt(e)}_dispatchEventTimeChange(e,t){const i=":"===e?"":e,n={value:i,oldValue:":"===t?"":t};n.error=yi(i)?"":this._locale.INVALID_TIME_FORMAT,gi(this,"kuc:base-mobile-time-change",n)}_getOptionsMinuteTemplate(){return this._minuteOptions.map((e=>$e` <option value="${e.value}">${e.label}</option> `))}_getOptionsHourTemplate(){return this._hourOptions.map((e=>$e` <option value="${e.value}">${e.label}</option> `))}}Io([Fe({type:String})],Eo.prototype,"guid",void 0),Io([Fe({type:String,attribute:"lang",reflect:!0})],Eo.prototype,"language",void 0),Io([Fe({type:String})],Eo.prototype,"value",void 0),Io([Fe({type:Boolean})],Eo.prototype,"disabled",void 0),Io([Fe({type:Boolean})],Eo.prototype,"hour12",void 0),Io([Fe({type:Boolean})],Eo.prototype,"required",void 0),Io([We()],Eo.prototype,"_timeStep",void 0),Io([We()],Eo.prototype,"_hours",void 0),Io([We()],Eo.prototype,"_minutes",void 0),Io([We()],Eo.prototype,"_suffix",void 0),Io([We()],Eo.prototype,"_hourOptions",void 0),Io([We()],Eo.prototype,"_minuteOptions",void 0),Io([Ke(".kuc-base-mobile-time-1-17-0__group__hours")],Eo.prototype,"_hoursEl",void 0),Io([Ke(".kuc-base-mobile-time-1-17-0__group__minutes")],Eo.prototype,"_minutesEl",void 0),window.customElements.get("kuc-base-mobile-time-1-17-0")||(mi('\n    kuc-base-mobile-time-1-17-0,\n    kuc-base-mobile-time-1-17-0 * {\n        font-size: 13px;\n        font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n        "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n        "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n    }\n    kuc-base-mobile-time-1-17-0:lang(zh),\n    kuc-base-mobile-time-1-17-0:lang(zh) * {\n        font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n        Verdana, sans-serif;\n    }\n    kuc-base-mobile-time-1-17-0:lang(zh-TW),\n    kuc-base-mobile-time-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n        Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n        Verdana,sans-serif\n    }\n    kuc-base-mobile-time-1-17-0 {\n        width: 100%;\n        display: inline-block;\n        vertical-align: top;\n    }\n    kuc-base-mobile-time-1-17-0[hidden] {\n        display: none;\n    }\n    .kuc-base-mobile-time-1-17-0__group {\n        padding: 0;\n        margin: 0;\n        height: 31.28px;\n        border: 1px solid #b3b3b3;\n        border-radius: 5.2px;\n        box-sizing: border-box;\n        background-color: #ffffff;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-align-items: center;\n        align-items: center;\n        box-shadow: 0px 1px 0px #ffffff, inset 0px 2px 3px #dadada;\n    }\n    .kuc-base-mobile-time-1-17-0__group--required {\n        border-color: #cf4a38;\n    }\n    .kuc-base-mobile-time-1-17-0__group__hours {\n        padding: 5.148px 7.722px;\n    }\n    .kuc-base-mobile-time-1-17-0__group__minutes {\n        padding: 5.148px 7.722px;\n        -webkit-flex-grow: 1;\n        flex-grow: 1;\n    }\n    .kuc-base-mobile-time-1-17-0__group__hours,\n    .kuc-base-mobile-time-1-17-0__group__minutes {\n        font-size: 99%;\n        height: 100%;\n        color: #000000;\n        border: none;\n        border-radius: 5.148px;\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        background-color: transparent;\n    }\n    .kuc-base-mobile-time-1-17-0__group__colon {\n        color: #000000;\n    }\n    .kuc-base-mobile-time-1-17-0__group__hours:disabled\n        + .kuc-base-mobile-time-1-17-0__group__colon {\n        color: #999999;\n        -webkit-text-fill-color: #999999;\n        opacity: 1;\n    }\n    .kuc-base-mobile-time-1-17-0__group--disabled {\n        color: #999999;\n        -webkit-text-fill-color: #999999;\n        background-color: #d5d7d9;\n        opacity: 1;\n    }\n    .kuc-base-mobile-time-1-17-0__group__hours:disabled,\n    .kuc-base-mobile-time-1-17-0__group__minutes:disabled {\n        color: #999999;\n        -webkit-text-fill-color: #999999;\n        opacity: 1;\n    }\n    .kuc-base-mobile-time-1-17-0__group__hours:focus {\n        outline: none;\n    }\n    .kuc-base-mobile-time-1-17-0__group__minutes:focus {\n        outline: none;\n    }\n'),window.customElements.define("kuc-base-mobile-time-1-17-0",Eo));var So=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let To;(()=>{if(To=window.customElements.get("kuc-mobile-time-picker-1-17-0"),!To){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this._inputValue="",this._errorFormat="",this._isSelectError=!1,this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return void 0===this.value||""===this.value||!!yi(this.value)||(this.throwErrorAfterUpdateComplete(Tt),!1)}willUpdate(){void 0!==this.value&&""!==this.value&&(this.value=li(this.value))}update(e){e.has("value")&&!this._isSelectError&&(void 0===this.value?this._inputValue="":this._inputValue=this.value||"",this._errorFormat=""),super.update(e)}render(){return $e`
-        <div class="kuc-mobile-time-picker-1-17-0__group">
+    `}updated(e){e.has("value")&&this._updateInputValue(),super.update(e)}_updateInputValue(){const e=((e,t)=>{const i={hours:"",minutes:"",suffix:""},n=e.split(":"),o=parseInt(n[0],10),a=parseInt(n[1],10),s=o%vt;return isNaN(s)||(i.hours=Jt(t?Pt(s):s),i.suffix=t?zt(s):""),isNaN(a)||(i.minutes=Jt(a)),i})(this.value,this.hour12);this._hours=e.hours,this._minutes=e.minutes,this._suffix=e.suffix||"",this._setValueToInput(e)}_setValueToInput(e){this._minutesEl.value=e.minutes,e.suffix?this._hoursEl.value=e.suffix+" "+e.hours:this._hoursEl.value=e.hours}_handleChangeMinutes(e){e.preventDefault(),e.stopPropagation();const t=this._getTimeValueString(),i=e.target.value;this._minutes=i;const n=this._getTimeValueString();this.value=n,this._dispatchEventTimeChange(n,t)}_handleChangeHours(e){e.preventDefault(),e.stopPropagation();const t=this._getTimeValueString(),i=e.target.value.split(" ");2===i.length?(this._hours=i[1],this._suffix=i[0]):(this._hours=i[0],this._suffix="");const n=this._getTimeValueString();this.value=n,this._dispatchEventTimeChange(n,t)}_getTimeValueString(){const e=`${this._hours}:${this._minutes}`;return this._suffix?Rt(`${e} ${this._suffix}`):Rt(e)}_dispatchEventTimeChange(e,t){const i=":"===e?"":e,n={value:i,oldValue:":"===t?"":t};n.error=yi(i)?"":this._locale.INVALID_TIME_FORMAT,gi(this,"kuc:base-mobile-time-change",n)}_getOptionsMinuteTemplate(){return this._minuteOptions.map((e=>we` <option value="${e.value}">${e.label}</option> `))}_getOptionsHourTemplate(){return this._hourOptions.map((e=>we` <option value="${e.value}">${e.label}</option> `))}}Io([Ge({type:String})],Eo.prototype,"guid",void 0),Io([Ge({type:String,attribute:"lang",reflect:!0})],Eo.prototype,"language",void 0),Io([Ge({type:String})],Eo.prototype,"value",void 0),Io([Ge({type:Boolean})],Eo.prototype,"disabled",void 0),Io([Ge({type:Boolean})],Eo.prototype,"hour12",void 0),Io([Ge({type:Boolean})],Eo.prototype,"required",void 0),Io([Fe()],Eo.prototype,"_timeStep",void 0),Io([Fe()],Eo.prototype,"_hours",void 0),Io([Fe()],Eo.prototype,"_minutes",void 0),Io([Fe()],Eo.prototype,"_suffix",void 0),Io([Fe()],Eo.prototype,"_hourOptions",void 0),Io([Fe()],Eo.prototype,"_minuteOptions",void 0),Io([qe(".kuc-base-mobile-time-1-17-1__group__hours")],Eo.prototype,"_hoursEl",void 0),Io([qe(".kuc-base-mobile-time-1-17-1__group__minutes")],Eo.prototype,"_minutesEl",void 0),window.customElements.get("kuc-base-mobile-time-1-17-1")||(mi('\n    kuc-base-mobile-time-1-17-1,\n    kuc-base-mobile-time-1-17-1 * {\n        font-size: 13px;\n        font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n        "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n        "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n    }\n    kuc-base-mobile-time-1-17-1:lang(zh),\n    kuc-base-mobile-time-1-17-1:lang(zh) * {\n        font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n        Verdana, sans-serif;\n    }\n    kuc-base-mobile-time-1-17-1:lang(zh-TW),\n    kuc-base-mobile-time-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n        Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n        Verdana,sans-serif\n    }\n    kuc-base-mobile-time-1-17-1 {\n        width: 100%;\n        display: inline-block;\n        vertical-align: top;\n    }\n    kuc-base-mobile-time-1-17-1[hidden] {\n        display: none;\n    }\n    .kuc-base-mobile-time-1-17-1__group {\n        padding: 0;\n        margin: 0;\n        height: 31.28px;\n        border: 1px solid #b3b3b3;\n        border-radius: 5.2px;\n        box-sizing: border-box;\n        background-color: #ffffff;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-align-items: center;\n        align-items: center;\n        box-shadow: 0px 1px 0px #ffffff, inset 0px 2px 3px #dadada;\n    }\n    .kuc-base-mobile-time-1-17-1__group--required {\n        border-color: #cf4a38;\n    }\n    .kuc-base-mobile-time-1-17-1__group__hours {\n        padding: 5.148px 7.722px;\n    }\n    .kuc-base-mobile-time-1-17-1__group__minutes {\n        padding: 5.148px 7.722px;\n        -webkit-flex-grow: 1;\n        flex-grow: 1;\n    }\n    .kuc-base-mobile-time-1-17-1__group__hours,\n    .kuc-base-mobile-time-1-17-1__group__minutes {\n        font-size: 99%;\n        height: 100%;\n        color: #000000;\n        border: none;\n        border-radius: 5.148px;\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        background-color: transparent;\n    }\n    .kuc-base-mobile-time-1-17-1__group__colon {\n        color: #000000;\n    }\n    .kuc-base-mobile-time-1-17-1__group__hours:disabled\n        + .kuc-base-mobile-time-1-17-1__group__colon {\n        color: #999999;\n        -webkit-text-fill-color: #999999;\n        opacity: 1;\n    }\n    .kuc-base-mobile-time-1-17-1__group--disabled {\n        color: #999999;\n        -webkit-text-fill-color: #999999;\n        background-color: #d5d7d9;\n        opacity: 1;\n    }\n    .kuc-base-mobile-time-1-17-1__group__hours:disabled,\n    .kuc-base-mobile-time-1-17-1__group__minutes:disabled {\n        color: #999999;\n        -webkit-text-fill-color: #999999;\n        opacity: 1;\n    }\n    .kuc-base-mobile-time-1-17-1__group__hours:focus {\n        outline: none;\n    }\n    .kuc-base-mobile-time-1-17-1__group__minutes:focus {\n        outline: none;\n    }\n'),window.customElements.define("kuc-base-mobile-time-1-17-1",Eo));var So=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let To;(()=>{if(To=window.customElements.get("kuc-mobile-time-picker-1-17-1"),!To){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this._inputValue="",this._errorFormat="",this._isSelectError=!1,this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return void 0===this.value||""===this.value||!!yi(this.value)||(this.throwErrorAfterUpdateComplete(St),!1)}willUpdate(){void 0!==this.value&&""!==this.value&&(this.value=ri(this.value))}update(e){e.has("value")&&!this._isSelectError&&(void 0===this.value?this._inputValue="":this._inputValue=this.value||"",this._errorFormat=""),super.update(e)}render(){return we`
+        <div class="kuc-mobile-time-picker-1-17-1__group">
           <label
-            class="kuc-mobile-time-picker-1-17-0__group__label"
+            class="kuc-mobile-time-picker-1-17-1__group__label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-mobile-label-1-17-0
+            <kuc-base-mobile-label-1-17-1
               .guid="${this._GUID}"
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-mobile-label-1-17-0>
+            ></kuc-base-mobile-label-1-17-1>
           </label>
-          <div class="kuc-base-mobile-time-1-17-0__group__wrapper">
-            <kuc-base-mobile-time-1-17-0
+          <div class="kuc-base-mobile-time-1-17-1__group__wrapper">
+            <kuc-base-mobile-time-1-17-1
               .value="${this._inputValue}"
               .disabled="${this.disabled}"
               .hour12="${this.hour12}"
@@ -2324,31 +2323,31 @@
               .language="${this._getLanguage()}"
               .required="${this.requiredIcon}"
               @kuc:base-mobile-time-change="${this._handleTimeChange}"
-            ></kuc-base-mobile-time-1-17-0>
+            ></kuc-base-mobile-time-1-17-1>
           </div>
-          <kuc-base-mobile-error-1-17-0
+          <kuc-base-mobile-error-1-17-1
             .guid="${this._GUID}"
             .text="${this._errorFormat||this.error}"
             ariaLive="assertive"
-          ></kuc-base-mobile-error-1-17-0>
+          ></kuc-base-mobile-error-1-17-1>
         </div>
-      `}updated(){this._isSelectError=!1}_handleTimeChange(e){e.preventDefault(),e.stopPropagation();const t={value:e.detail.value,oldValue:this.value};if(this._inputValue=e.detail.value,e.detail.error)return this._isSelectError=!0,this._errorFormat=e.detail.error,this.value=void 0,t.value=void 0,this.error="",void gi(this,"change",t);this._isSelectError=!1,this._errorFormat="",this.value=e.detail.value,gi(this,"change",t)}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}}So([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),So([Fe({type:String})],e.prototype,"error",void 0),So([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),So([Fe({type:String})],e.prototype,"label",void 0),So([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),So([Fe({type:String,hasChanged:(e,t)=>(""===e||void 0===e)&&e===t||e!==t})],e.prototype,"value",void 0),So([Fe({type:Boolean})],e.prototype,"disabled",void 0),So([Fe({type:Boolean})],e.prototype,"hour12",void 0),So([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),So([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),So([We()],e.prototype,"_inputValue",void 0),So([We()],e.prototype,"_errorFormat",void 0),window.customElements.define("kuc-mobile-time-picker-1-17-0",e),mi('\n    kuc-mobile-time-picker-1-17-0,\n    kuc-mobile-time-picker-1-17-0 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n        "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n        "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n    }\n    kuc-mobile-time-picker-1-17-0:lang(zh),\n    kuc-mobile-time-picker-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n        Verdana, sans-serif;\n    }\n    kuc-mobile-time-picker-1-17-0:lang(zh-TW),\n    kuc-mobile-time-picker-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n        Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n        Verdana,sans-serif\n    }\n    kuc-mobile-time-picker-1-17-0 {\n    font-size: 13px;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    }\n    kuc-mobile-time-picker-1-17-0[hidden] {\n    display: none;\n    }\n    .kuc-mobile-time-picker-1-17-0__group__label {\n    display: inline-block;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n    }\n    .kuc-mobile-time-picker-1-17-0__group__label[hidden] {\n    display: none;\n    }\n    .kuc-base-mobile-time-1-17-0__group__wrapper {\n    padding-left: 0.5em;\n    max-width: 10px;\n    }\n'),To=e}})();var Ao=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Do;(()=>{if(Do=window.customElements.get("kuc-mobile-datetime-picker-1-17-0"),!Do){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this._dateConverted="",this._changeDateByUI=!1,this._changeTimeByUI=!1,this._previousTimeValue="",this._previousDateValue="",this._dateValue="",this._timeValue="",this._errorFormat="",this._errorText="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return void 0===this.value||""===this.value||("string"!=typeof this.value?(this.throwErrorAfterUpdateComplete(Tt),!1):(this._dateAndTime=this._getDateTimeValue(this.value),this._dateConverted=ri(this._dateAndTime.date),!(!Ci(this._dateAndTime.date,this._dateAndTime.time)||!wi(this._dateConverted))||(this.throwErrorAfterUpdateComplete(Tt),!1)))}willUpdate(e){this._changeDateByUI||this._changeTimeByUI?this._updateValueAndErrorWhenUIChange():(this._errorFormat="",this._updateErrorText(),this._updateValueWhenSetter())}update(e){e.has("value")&&(void 0===this.value&&this._setUndefinedValue(),""===this.value&&this._setEmptyValue()),super.update(e)}_updateValueWhenSetter(){this._errorFormat="",""!==this.value&&void 0!==this.value?(this._setDateTimeValueSeparate(this._dateAndTime,this._dateConverted),this.value=this._getDateTimeString()):this._previousTimeValue=""}_setDateTimeValueSeparate(e,t){this._dateValue=t,this._timeValue=this._dateValue&&wi(t)?li(e.time.slice(0,5)):this._previousTimeValue}_updateValueAndErrorWhenUIChange(){const e=this._checkDateTimeFormat();this.value=e?this.value:void 0,this._updateErrorText()}_checkDateTimeFormat(){const e=Boolean(this._timeValue)&&!this._dateValue,t=Boolean(this._dateValue)&&!this._timeValue;return!this._errorFormat&&!e&&!t}_setUndefinedValue(){if(!this._changeTimeByUI){if(this._errorFormat){if(this._changeDateByUI)return;return this._dateValue="",void(this._timeValue="")}this._dateValue=this._previousDateValue,this._timeValue=this._previousTimeValue}}_setEmptyValue(){this._dateValue="",this._timeValue="",this._previousTimeValue="",this._previousDateValue=""}_getDateTimeValue(e){if(""===e||void 0===e)return{date:"",time:""};const t=e.split("T"),i=t[0],n=t[1];if(e.indexOf("T")===e.length-1||t.length>2)return{date:i,time:""};if(!n)return{date:i,time:"00:00"};const[o,a,s]=n.split(":"),r=`${o}:${a||"00"}`;return s?{date:i,time:`${r}:${s}`}:{date:i,time:r}}render(){return $e`
+      `}updated(){this._isSelectError=!1}_handleTimeChange(e){e.preventDefault(),e.stopPropagation();const t={value:e.detail.value,oldValue:this.value};if(this._inputValue=e.detail.value,e.detail.error)return this._isSelectError=!0,this._errorFormat=e.detail.error,this.value=void 0,t.value=void 0,this.error="",void gi(this,"change",t);this._isSelectError=!1,this._errorFormat="",this.value=e.detail.value,gi(this,"change",t)}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}}So([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),So([Ge({type:String})],e.prototype,"error",void 0),So([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),So([Ge({type:String})],e.prototype,"label",void 0),So([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),So([Ge({type:String,hasChanged:(e,t)=>(""===e||void 0===e)&&e===t||e!==t})],e.prototype,"value",void 0),So([Ge({type:Boolean})],e.prototype,"disabled",void 0),So([Ge({type:Boolean})],e.prototype,"hour12",void 0),So([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),So([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),So([Fe()],e.prototype,"_inputValue",void 0),So([Fe()],e.prototype,"_errorFormat",void 0),window.customElements.define("kuc-mobile-time-picker-1-17-1",e),mi('\n    kuc-mobile-time-picker-1-17-1,\n    kuc-mobile-time-picker-1-17-1 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n        "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n        "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n    }\n    kuc-mobile-time-picker-1-17-1:lang(zh),\n    kuc-mobile-time-picker-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n        Verdana, sans-serif;\n    }\n    kuc-mobile-time-picker-1-17-1:lang(zh-TW),\n    kuc-mobile-time-picker-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n        Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n        Verdana,sans-serif\n    }\n    kuc-mobile-time-picker-1-17-1 {\n    font-size: 13px;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    }\n    kuc-mobile-time-picker-1-17-1[hidden] {\n    display: none;\n    }\n    .kuc-mobile-time-picker-1-17-1__group__label {\n    display: inline-block;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n    }\n    .kuc-mobile-time-picker-1-17-1__group__label[hidden] {\n    display: none;\n    }\n    .kuc-base-mobile-time-1-17-1__group__wrapper {\n    padding-left: 0.5em;\n    max-width: 10px;\n    }\n'),To=e}})();var Ao=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Do;(()=>{if(Do=window.customElements.get("kuc-mobile-datetime-picker-1-17-1"),!Do){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this._dateConverted="",this._changeDateByUI=!1,this._changeTimeByUI=!1,this._previousTimeValue="",this._previousDateValue="",this._dateValue="",this._timeValue="",this._errorFormat="",this._errorText="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return void 0===this.value||""===this.value||("string"!=typeof this.value?(this.throwErrorAfterUpdateComplete(St),!1):(this._dateAndTime=this._getDateTimeValue(this.value),this._dateConverted=si(this._dateAndTime.date),!(!Ci(this._dateAndTime.date,this._dateAndTime.time)||!wi(this._dateConverted))||(this.throwErrorAfterUpdateComplete(St),!1)))}willUpdate(e){this._changeDateByUI||this._changeTimeByUI?this._updateValueAndErrorWhenUIChange():(this._errorFormat="",this._updateErrorText(),this._updateValueWhenSetter())}update(e){e.has("value")&&(void 0===this.value&&this._setUndefinedValue(),""===this.value&&this._setEmptyValue()),super.update(e)}_updateValueWhenSetter(){this._errorFormat="",""!==this.value&&void 0!==this.value?(this._setDateTimeValueSeparate(this._dateAndTime,this._dateConverted),this.value=this._getDateTimeString()):this._previousTimeValue=""}_setDateTimeValueSeparate(e,t){this._dateValue=t,this._timeValue=this._dateValue&&wi(t)?ri(e.time.slice(0,5)):this._previousTimeValue}_updateValueAndErrorWhenUIChange(){const e=this._checkDateTimeFormat();this.value=e?this.value:void 0,this._updateErrorText()}_checkDateTimeFormat(){const e=Boolean(this._timeValue)&&!this._dateValue,t=Boolean(this._dateValue)&&!this._timeValue;return!this._errorFormat&&!e&&!t}_setUndefinedValue(){if(!this._changeTimeByUI){if(this._errorFormat){if(this._changeDateByUI)return;return this._dateValue="",void(this._timeValue="")}this._dateValue=this._previousDateValue,this._timeValue=this._previousTimeValue}}_setEmptyValue(){this._dateValue="",this._timeValue="",this._previousTimeValue="",this._previousDateValue=""}_getDateTimeValue(e){if(""===e||void 0===e)return{date:"",time:""};const t=e.split("T"),i=t[0],n=t[1];if(e.indexOf("T")===e.length-1||t.length>2)return{date:i,time:""};if(!n)return{date:i,time:"00:00"};const[o,a,s]=n.split(":"),r=`${o}:${a||"00"}`;return s?{date:i,time:`${r}:${s}`}:{date:i,time:r}}render(){return we`
         <fieldset
-          class="kuc-mobile-datetime-picker-1-17-0__group"
+          class="kuc-mobile-datetime-picker-1-17-1__group"
           aria-describedby="${this._GUID}-error"
         >
           <legend
-            class="kuc-mobile-datetime-picker-1-17-0__group__label"
+            class="kuc-mobile-datetime-picker-1-17-1__group__label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-mobile-label-1-17-0
+            <kuc-base-mobile-label-1-17-1
               .requiredIcon="${this.requiredIcon}"
               .text="${this.label}"
-            ></kuc-base-mobile-label-1-17-0>
+            ></kuc-base-mobile-label-1-17-1>
           </legend>
-          <div class="kuc-mobile-datetime-picker-1-17-0__group__input">
-            <kuc-mobile-base-date-1-17-0
-              class="kuc-mobile-datetime-picker-1-17-0__group__input--date"
+          <div class="kuc-mobile-datetime-picker-1-17-1__group__input">
+            <kuc-mobile-base-date-1-17-1
+              class="kuc-mobile-datetime-picker-1-17-1__group__input--date"
               .disabled="${this.disabled}"
               .value="${this._dateValue}"
               .inputId="${this._GUID}"
@@ -2357,9 +2356,9 @@
               .language="${this._getLanguage()}"
               @kuc:mobile-base-date-change="${this._handleDateChange}"
             >
-            </kuc-mobile-base-date-1-17-0>
-            <kuc-base-mobile-time-1-17-0
-              class="kuc-mobile-datetime-picker-1-17-0__group__input--time"
+            </kuc-mobile-base-date-1-17-1>
+            <kuc-base-mobile-time-1-17-1
+              class="kuc-mobile-datetime-picker-1-17-1__group__input--time"
               .value="${this._timeValue}"
               .disabled="${this.disabled}"
               .hour12="${this.hour12}"
@@ -2367,12 +2366,12 @@
               .language="${this._getLanguage()}"
               .required="${this.requiredIcon}"
               @kuc:base-mobile-time-change="${this._handleTimeChange}"
-            ></kuc-base-mobile-time-1-17-0>
+            ></kuc-base-mobile-time-1-17-1>
           </div>
-          <kuc-base-mobile-error-1-17-0
+          <kuc-base-mobile-error-1-17-1
             .guid="${this._GUID}"
             .text="${this._errorText}"
           >
-          </kuc-base-mobile-error-1-17-0>
+          </kuc-base-mobile-error-1-17-1>
         </fieldset>
-      `}updated(){this._resetState()}_resetState(){this._previousTimeValue="",this._previousDateValue="",this._changeDateByUI=!1,this._changeTimeByUI=!1}_updateErrorText(){this._errorText=this._errorFormat||this.error}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_handleDateChange(e){if(e.stopPropagation(),e.preventDefault(),e.detail.value===this._dateValue)return;this._changeDateByUI=!0;let t=this._dateValue;e.detail.error?(this._errorFormat=e.detail.error,this.error=""):t=e.detail.value,this._updateDateTimeValue(t,"date")}_handleTimeChange(e){e.preventDefault(),e.stopPropagation(),this._changeTimeByUI=!0;let t=this._timeValue;e.detail.error?(this._errorFormat=e.detail.error,this.error=""):this._errorFormat="",t=e.detail.value,this._updateDateTimeValue(t,"time")}_updateDateTimeValue(e,t){const i=this.value;"date"===t?this._dateValue=e||"":this._timeValue=e,this._previousTimeValue=this._timeValue,this._previousDateValue=this._dateValue;const n=this._errorFormat?void 0:this._getDateTimeString(),o=this._errorFormat?void 0:n;this.value=o;const a=this._errorFormat?void 0:n;this.value=a,gi(this,"change",{value:o,oldValue:i,changedPart:t})}_getDateTimeString(){if(""===this._dateValue&&""===this._timeValue)return"";if(!this._dateValue||!this._timeValue)return;if(!this.value)return`${this._dateValue}T${this._timeValue}:00`;const e=this.value.split(":");return 3===e.length?`${this._dateValue}T${this._timeValue}:${e[2]}`:`${this._dateValue}T${this._timeValue}:00`}}Ao([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Ao([Fe({type:String})],e.prototype,"error",void 0),Ao([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Ao([Fe({type:String})],e.prototype,"label",void 0),Ao([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),Ao([Fe({type:String,hasChanged:(e,t)=>(""===e||void 0===e)&&e===t||e!==t})],e.prototype,"value",void 0),Ao([Fe({type:Boolean})],e.prototype,"disabled",void 0),Ao([Fe({type:Boolean})],e.prototype,"hour12",void 0),Ao([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Ao([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Ao([We()],e.prototype,"_dateValue",void 0),Ao([We()],e.prototype,"_timeValue",void 0),Ao([We()],e.prototype,"_errorFormat",void 0),Ao([We()],e.prototype,"_errorText",void 0),window.customElements.define("kuc-mobile-datetime-picker-1-17-0",e),mi('\nkuc-mobile-datetime-picker-1-17-0,\nkuc-mobile-datetime-picker-1-17-0 * {\ncolor: #333333;\nfont-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-mobile-datetime-picker-1-17-0:lang(zh),\nkuc-mobile-datetime-picker-1-17-0:lang(zh) * {\nfont-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-mobile-datetime-picker-1-17-0:lang(zh-TW),\nkuc-mobile-datetime-picker-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\nkuc-mobile-datetime-picker-1-17-0 {\nfont-size: 13px;\ncolor: #333333;\ndisplay: inline-table;\nvertical-align: top;\nwidth: 100%;\n}\nkuc-mobile-datetime-picker-1-17-0[hidden] {\ndisplay: none;\n}\n.kuc-mobile-datetime-picker-1-17-0__group {\nborder: 0;\npadding: 0;\n}\n.kuc-mobile-datetime-picker-1-17-0__group__label {\ndisplay: inline-block;\nfont-weight: bold;\nline-height: 1.5;\npadding: 0px;\nwhite-space: nowrap;\nmargin: 0 0 4px 0;\n}\n.kuc-mobile-datetime-picker-1-17-0__group__label[hidden] {\ndisplay: none;\n}\n.kuc-mobile-datetime-picker-1-17-0__group__input {\ndisplay: flex;\nalign-items: center;\nmargin-right: 0.5em;\nmargin-left: 0.5em;\n}\n.kuc-mobile-datetime-picker-1-17-0__group__input--date {\nwidth: 130px;\nmargin-right: 10px;\n}\n.kuc-mobile-datetime-picker-1-17-0__group__input--time {\nmax-width: 10px;\n}\n'),Do=e}})();var Vo={d:(e,t)=>{for(var i in t)Vo.o(t,i)&&!Vo.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};Vo.d({},{r:()=>Lo});const Lo="1.17.0";var Ho={d:(e,t)=>{for(var i in t)Ho.o(t,i)&&!Ho.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};Ho.d({},{$:()=>Mo});const Mo=void 0,Bo=document.getElementById("app"),Oo=new Hi({className:"button-class",id:"button-id",visible:!0,text:"text",disabled:!1});Bo.appendChild(Oo);const No=new Pn({value:"Orange",className:"text-class",id:"text-id",textalign:"right",placeholder:"placeholder",label:"フルーツ",requiredIcon:!0,error:"エラーです"});Bo.appendChild(No)})();
\ No newline at end of file
+      `}updated(){this._resetState()}_resetState(){this._previousTimeValue="",this._previousDateValue="",this._changeDateByUI=!1,this._changeTimeByUI=!1}_updateErrorText(){this._errorText=this._errorFormat||this.error}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_handleDateChange(e){if(e.stopPropagation(),e.preventDefault(),e.detail.value===this._dateValue)return;this._changeDateByUI=!0;let t=this._dateValue;e.detail.error?(this._errorFormat=e.detail.error,this.error=""):t=e.detail.value,this._updateDateTimeValue(t,"date")}_handleTimeChange(e){e.preventDefault(),e.stopPropagation(),this._changeTimeByUI=!0;let t=this._timeValue;e.detail.error?(this._errorFormat=e.detail.error,this.error=""):this._errorFormat="",t=e.detail.value,this._updateDateTimeValue(t,"time")}_updateDateTimeValue(e,t){const i=this.value;"date"===t?this._dateValue=e||"":this._timeValue=e,this._previousTimeValue=this._timeValue,this._previousDateValue=this._dateValue;const n=this._errorFormat?void 0:this._getDateTimeString(),o=this._errorFormat?void 0:n;this.value=o;const a=this._errorFormat?void 0:n;this.value=a,gi(this,"change",{value:o,oldValue:i,changedPart:t})}_getDateTimeString(){if(""===this._dateValue&&""===this._timeValue)return"";if(!this._dateValue||!this._timeValue)return;if(!this.value)return`${this._dateValue}T${this._timeValue}:00`;const e=this.value.split(":");return 3===e.length?`${this._dateValue}T${this._timeValue}:${e[2]}`:`${this._dateValue}T${this._timeValue}:00`}}Ao([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Ao([Ge({type:String})],e.prototype,"error",void 0),Ao([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Ao([Ge({type:String})],e.prototype,"label",void 0),Ao([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),Ao([Ge({type:String,hasChanged:(e,t)=>(""===e||void 0===e)&&e===t||e!==t})],e.prototype,"value",void 0),Ao([Ge({type:Boolean})],e.prototype,"disabled",void 0),Ao([Ge({type:Boolean})],e.prototype,"hour12",void 0),Ao([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Ao([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Ao([Fe()],e.prototype,"_dateValue",void 0),Ao([Fe()],e.prototype,"_timeValue",void 0),Ao([Fe()],e.prototype,"_errorFormat",void 0),Ao([Fe()],e.prototype,"_errorText",void 0),window.customElements.define("kuc-mobile-datetime-picker-1-17-1",e),mi('\nkuc-mobile-datetime-picker-1-17-1,\nkuc-mobile-datetime-picker-1-17-1 * {\ncolor: #333333;\nfont-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-mobile-datetime-picker-1-17-1:lang(zh),\nkuc-mobile-datetime-picker-1-17-1:lang(zh) * {\nfont-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-mobile-datetime-picker-1-17-1:lang(zh-TW),\nkuc-mobile-datetime-picker-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\nkuc-mobile-datetime-picker-1-17-1 {\nfont-size: 13px;\ncolor: #333333;\ndisplay: inline-table;\nvertical-align: top;\nwidth: 100%;\n}\nkuc-mobile-datetime-picker-1-17-1[hidden] {\ndisplay: none;\n}\n.kuc-mobile-datetime-picker-1-17-1__group {\nborder: 0;\npadding: 0;\n}\n.kuc-mobile-datetime-picker-1-17-1__group__label {\ndisplay: inline-block;\nfont-weight: bold;\nline-height: 1.5;\npadding: 0px;\nwhite-space: nowrap;\nmargin: 0 0 4px 0;\n}\n.kuc-mobile-datetime-picker-1-17-1__group__label[hidden] {\ndisplay: none;\n}\n.kuc-mobile-datetime-picker-1-17-1__group__input {\ndisplay: flex;\nalign-items: center;\nmargin-right: 0.5em;\nmargin-left: 0.5em;\n}\n.kuc-mobile-datetime-picker-1-17-1__group__input--date {\nwidth: 130px;\nmargin-right: 10px;\n}\n.kuc-mobile-datetime-picker-1-17-1__group__input--time {\nmax-width: 10px;\n}\n'),Do=e}})();var Vo={d:(e,t)=>{for(var i in t)Vo.o(t,i)&&!Vo.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};Vo.d({},{r:()=>Lo});const Lo="1.17.1";var Ho={d:(e,t)=>{for(var i in t)Ho.o(t,i)&&!Ho.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};Ho.d({},{$:()=>Mo});const Mo=void 0,Bo=document.getElementById("app"),Oo=new Hi({className:"button-class",id:"button-id",visible:!0,text:"text",disabled:!1});Bo.appendChild(Oo);const No=new Pn({value:"Orange",className:"text-class",id:"text-id",textalign:"right",placeholder:"placeholder",label:"フルーツ",requiredIcon:!0,error:"エラーです"});Bo.appendChild(No)})();
\ No newline at end of file
diff --git a/demos/esm-dev-app/package-lock.json b/demos/esm-dev-app/package-lock.json
index 9923b9c445..c4ba07d4fc 100644
--- a/demos/esm-dev-app/package-lock.json
+++ b/demos/esm-dev-app/package-lock.json
@@ -11,8 +11,8 @@
       "devDependencies": {
         "@cybozu/eslint-config": "^23.0.0",
         "eslint": "^8.57.0",
-        "prettier": "^3.2.5",
-        "webpack": "^5.91.0",
+        "prettier": "^3.3.3",
+        "webpack": "^5.95.0",
         "webpack-cli": "^5.1.4"
       }
     },
@@ -269,21 +269,13 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.5.tgz",
       "integrity": "sha512-dhsC09y1gpJWnK+Ff4SGvCuSnk9DaU0BJZSzOwa6GVSg65XtTugLBITDAAzRU5duGBoXBHpdR/9jHGxJjNflJQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
       }
     },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
-      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
-      "dev": true,
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -751,10 +743,10 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "dev": true,
       "peerDependencies": {
         "acorn": "^8"
@@ -1057,12 +1049,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -1403,9 +1395,9 @@
       "dev": true
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -2242,9 +2234,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -3255,12 +3247,12 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -3678,9 +3670,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -4573,21 +4565,20 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dev": true,
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -5006,21 +4997,13 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.5.tgz",
       "integrity": "sha512-dhsC09y1gpJWnK+Ff4SGvCuSnk9DaU0BJZSzOwa6GVSg65XtTugLBITDAAzRU5duGBoXBHpdR/9jHGxJjNflJQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
       }
     },
-    "@types/eslint-scope": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
-      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
-      "dev": true,
-      "requires": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -5366,10 +5349,10 @@
       "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "dev": true
     },
-    "acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "dev": true,
       "requires": {}
     },
@@ -5599,12 +5582,12 @@
       }
     },
     "braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "requires": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       }
     },
     "browserslist": {
@@ -5834,9 +5817,9 @@
       "dev": true
     },
     "enhanced-resolve": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.2.4",
@@ -6470,9 +6453,9 @@
       }
     },
     "fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
@@ -7179,12 +7162,12 @@
       "dev": true
     },
     "micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "requires": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       }
     },
@@ -7487,9 +7470,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true
     },
     "prettier-linter-helpers": {
@@ -8080,21 +8063,20 @@
       }
     },
     "webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dev": true,
       "requires": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
diff --git a/demos/esm-dev-app/package.json b/demos/esm-dev-app/package.json
index 8c07363196..f6e487c920 100644
--- a/demos/esm-dev-app/package.json
+++ b/demos/esm-dev-app/package.json
@@ -13,8 +13,8 @@
   "devDependencies": {
     "@cybozu/eslint-config": "^23.0.0",
     "eslint": "^8.57.0",
-    "prettier": "^3.2.5",
-    "webpack": "^5.91.0",
+    "prettier": "^3.3.3",
+    "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4"
   }
 }
diff --git a/demos/typescript-app/dist/main.js b/demos/typescript-app/dist/main.js
index 075fc99445..4a83935522 100644
--- a/demos/typescript-app/dist/main.js
+++ b/demos/typescript-app/dist/main.js
@@ -1,45 +1,44 @@
 /*! For license information please see main.js.LICENSE.txt */
-(()=>{"use strict";const e=globalThis,t=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;class o{constructor(e,t,n){if(this._$cssResult$=!0,n!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const i=this.t;if(t&&void 0===e){const t=void 0!==i&&1===i.length;t&&(e=n.get(i)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&n.set(i,e))}return e}toString(){return this.cssText}}const a=(i,n)=>{if(t)i.adoptedStyleSheets=n.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const t of n){const n=document.createElement("style"),o=e.litNonce;void 0!==o&&n.setAttribute("nonce",o),n.textContent=t.cssText,i.appendChild(n)}},s=t?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new o("string"==typeof e?e:e+"",void 0,i))(t)})(e):e,{is:r,defineProperty:l,getOwnPropertyDescriptor:d,getOwnPropertyNames:u,getOwnPropertySymbols:c,getPrototypeOf:h}=Object,_=globalThis,p=_.trustedTypes,b=p?p.emptyScript:"",g=_.reactiveElementPolyfillSupport,m=(e,t)=>e,f={toAttribute(e,t){switch(t){case Boolean:e=e?b:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},v=(e,t)=>!r(e,t),k={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:v};Symbol.metadata??=Symbol("metadata"),_.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=k){if(t.state&&(t.attribute=!1),this._$Ei(),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),n=this.getPropertyDescriptor(e,i,t);void 0!==n&&l(this.prototype,e,n)}}static getPropertyDescriptor(e,t,i){const{get:n,set:o}=d(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get(){return n?.call(this)},set(t){const a=n?.call(this);o.call(this,t),this.requestUpdate(e,a,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??k}static _$Ei(){if(this.hasOwnProperty(m("elementProperties")))return;const e=h(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(m("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(m("properties"))){const e=this.properties,t=[...u(e),...c(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const i=this._$Eu(e,t);void 0!==i&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(s(e))}else void 0!==e&&t.push(s(e));return t}static _$Eu(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return a(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$EC(e,t){const i=this.constructor.elementProperties.get(e),n=this.constructor._$Eu(e,i);if(void 0!==n&&!0===i.reflect){const o=(void 0!==i.converter?.toAttribute?i.converter:f).toAttribute(t,i.type);this._$Em=e,null==o?this.removeAttribute(n):this.setAttribute(n,o),this._$Em=null}}_$AK(e,t){const i=this.constructor,n=i._$Eh.get(e);if(void 0!==n&&this._$Em!==n){const e=i.getPropertyOptions(n),o="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:f;this._$Em=n,this[n]=o.fromAttribute(t,e.type),this._$Em=null}}requestUpdate(e,t,i){if(void 0!==e){if(i??=this.constructor.getPropertyOptions(e),!(i.hasChanged??v)(this[e],t))return;this.P(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$ET())}P(e,t,i){this._$AL.has(e)||this._$AL.set(e,t),!0===i.reflect&&this._$Em!==e&&(this._$Ej??=new Set).add(e)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e)!0!==i.wrapped||this._$AL.has(t)||void 0===this[t]||this.P(t,this[t],i)}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach((e=>e.hostUpdate?.())),this.update(t)):this._$EU()}catch(t){throw e=!1,this._$EU(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Ej&&=this._$Ej.forEach((e=>this._$EC(e,this[e]))),this._$EU()}updated(e){}firstUpdated(e){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[m("elementProperties")]=new Map,y[m("finalized")]=new Map,g?.({ReactiveElement:y}),(_.reactiveElementVersions??=[]).push("2.0.4");const x=globalThis,w=x.trustedTypes,$=w?w.createPolicy("lit-html",{createHTML:e=>e}):void 0,C="$lit$",I=`lit$${(Math.random()+"").slice(9)}$`,E="?"+I,S=`<${E}>`,T=document,A=()=>T.createComment(""),D=e=>null===e||"object"!=typeof e&&"function"!=typeof e,V=Array.isArray,L="[ \t\n\f\r]",H=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,M=/-->/g,B=/>/g,O=RegExp(`>|${L}(?:([^\\s"'>=/]+)(${L}*=${L}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),N=/'/g,U=/"/g,P=/^(?:script|style|textarea|title)$/i,z=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),R=(z(1),z(2),Symbol.for("lit-noChange")),j=Symbol.for("lit-nothing"),G=new WeakMap,F=T.createTreeWalker(T,129);function W(e,t){if(!Array.isArray(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==$?$.createHTML(t):t}const q=(e,t)=>{const i=e.length-1,n=[];let o,a=2===t?"<svg>":"",s=H;for(let t=0;t<i;t++){const i=e[t];let r,l,d=-1,u=0;for(;u<i.length&&(s.lastIndex=u,l=s.exec(i),null!==l);)u=s.lastIndex,s===H?"!--"===l[1]?s=M:void 0!==l[1]?s=B:void 0!==l[2]?(P.test(l[2])&&(o=RegExp("</"+l[2],"g")),s=O):void 0!==l[3]&&(s=O):s===O?">"===l[0]?(s=o??H,d=-1):void 0===l[1]?d=-2:(d=s.lastIndex-l[2].length,r=l[1],s=void 0===l[3]?O:'"'===l[3]?U:N):s===U||s===N?s=O:s===M||s===B?s=H:(s=O,o=void 0);const c=s===O&&e[t+1].startsWith("/>")?" ":"";a+=s===H?i+S:d>=0?(n.push(r),i.slice(0,d)+C+i.slice(d)+I+c):i+I+(-2===d?t:c)}return[W(e,a+(e[i]||"<?>")+(2===t?"</svg>":"")),n]};class K{constructor({strings:e,_$litType$:t},i){let n;this.parts=[];let o=0,a=0;const s=e.length-1,r=this.parts,[l,d]=q(e,t);if(this.el=K.createElement(l,i),F.currentNode=this.el.content,2===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(n=F.nextNode())&&r.length<s;){if(1===n.nodeType){if(n.hasAttributes())for(const e of n.getAttributeNames())if(e.endsWith(C)){const t=d[a++],i=n.getAttribute(e).split(I),s=/([.?@])?(.*)/.exec(t);r.push({type:1,index:o,name:s[2],strings:i,ctor:"."===s[1]?Q:"?"===s[1]?ee:"@"===s[1]?te:X}),n.removeAttribute(e)}else e.startsWith(I)&&(r.push({type:6,index:o}),n.removeAttribute(e));if(P.test(n.tagName)){const e=n.textContent.split(I),t=e.length-1;if(t>0){n.textContent=w?w.emptyScript:"";for(let i=0;i<t;i++)n.append(e[i],A()),F.nextNode(),r.push({type:2,index:++o});n.append(e[t],A())}}}else if(8===n.nodeType)if(n.data===E)r.push({type:2,index:o});else{let e=-1;for(;-1!==(e=n.data.indexOf(I,e+1));)r.push({type:7,index:o}),e+=I.length-1}o++}}static createElement(e,t){const i=T.createElement("template");return i.innerHTML=e,i}}function Y(e,t,i=e,n){if(t===R)return t;let o=void 0!==n?i._$Co?.[n]:i._$Cl;const a=D(t)?void 0:t._$litDirective$;return o?.constructor!==a&&(o?._$AO?.(!1),void 0===a?o=void 0:(o=new a(e),o._$AT(e,i,n)),void 0!==n?(i._$Co??=[])[n]=o:i._$Cl=o),void 0!==o&&(t=Y(e,o._$AS(e,t.values),o,n)),t}class J{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,n=(e?.creationScope??T).importNode(t,!0);F.currentNode=n;let o=F.nextNode(),a=0,s=0,r=i[0];for(;void 0!==r;){if(a===r.index){let t;2===r.type?t=new Z(o,o.nextSibling,this,e):1===r.type?t=new r.ctor(o,r.name,r.strings,this,e):6===r.type&&(t=new ie(o,this,e)),this._$AV.push(t),r=i[++s]}a!==r?.index&&(o=F.nextNode(),a++)}return F.currentNode=T,n}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class Z{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,n){this.type=2,this._$AH=j,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=n,this._$Cv=n?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=Y(this,e,t),D(e)?e===j||null==e||""===e?(this._$AH!==j&&this._$AR(),this._$AH=j):e!==this._$AH&&e!==R&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>V(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}S(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.S(e))}_(e){this._$AH!==j&&D(this._$AH)?this._$AA.nextSibling.data=e:this.T(T.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,n="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=K.createElement(W(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===n)this._$AH.p(t);else{const e=new J(n,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=G.get(e.strings);return void 0===t&&G.set(e.strings,t=new K(e)),t}k(e){V(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,n=0;for(const o of e)n===t.length?t.push(i=new Z(this.S(A()),this.S(A()),this,this.options)):i=t[n],i._$AI(o),n++;n<t.length&&(this._$AR(i&&i._$AB.nextSibling,n),t.length=n)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e&&e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class X{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,n,o){this.type=1,this._$AH=j,this._$AN=void 0,this.element=e,this.name=t,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=j}_$AI(e,t=this,i,n){const o=this.strings;let a=!1;if(void 0===o)e=Y(this,e,t,0),a=!D(e)||e!==this._$AH&&e!==R,a&&(this._$AH=e);else{const n=e;let s,r;for(e=o[0],s=0;s<o.length-1;s++)r=Y(this,n[i+s],t,s),r===R&&(r=this._$AH[s]),a||=!D(r)||r!==this._$AH[s],r===j?e=j:e!==j&&(e+=(r??"")+o[s+1]),this._$AH[s]=r}a&&!n&&this.j(e)}j(e){e===j?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class Q extends X{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===j?void 0:e}}class ee extends X{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==j)}}class te extends X{constructor(e,t,i,n,o){super(e,t,i,n,o),this.type=5}_$AI(e,t=this){if((e=Y(this,e,t,0)??j)===R)return;const i=this._$AH,n=e===j&&i!==j||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==j&&(i===j||n);n&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class ie{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){Y(this,e)}}const ne=x.litHtmlPolyfillSupport;ne?.(K,Z),(x.litHtmlVersions??=[]).push("3.1.2");const oe=globalThis,ae=oe.trustedTypes,se=ae?ae.createPolicy("lit-html",{createHTML:e=>e}):void 0,re="$lit$",le=`lit$${(Math.random()+"").slice(9)}$`,de="?"+le,ue=`<${de}>`,ce=document,he=()=>ce.createComment(""),_e=e=>null===e||"object"!=typeof e&&"function"!=typeof e,pe=Array.isArray,be="[ \t\n\f\r]",ge=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,me=/-->/g,fe=/>/g,ve=RegExp(`>|${be}(?:([^\\s"'>=/]+)(${be}*=${be}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),ke=/'/g,ye=/"/g,xe=/^(?:script|style|textarea|title)$/i,we=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),$e=we(1),Ce=we(2),Ie=Symbol.for("lit-noChange"),Ee=Symbol.for("lit-nothing"),Se=new WeakMap,Te=ce.createTreeWalker(ce,129);function Ae(e,t){if(!Array.isArray(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==se?se.createHTML(t):t}class De{constructor({strings:e,_$litType$:t},i){let n;this.parts=[];let o=0,a=0;const s=e.length-1,r=this.parts,[l,d]=((e,t)=>{const i=e.length-1,n=[];let o,a=2===t?"<svg>":"",s=ge;for(let t=0;t<i;t++){const i=e[t];let r,l,d=-1,u=0;for(;u<i.length&&(s.lastIndex=u,l=s.exec(i),null!==l);)u=s.lastIndex,s===ge?"!--"===l[1]?s=me:void 0!==l[1]?s=fe:void 0!==l[2]?(xe.test(l[2])&&(o=RegExp("</"+l[2],"g")),s=ve):void 0!==l[3]&&(s=ve):s===ve?">"===l[0]?(s=o??ge,d=-1):void 0===l[1]?d=-2:(d=s.lastIndex-l[2].length,r=l[1],s=void 0===l[3]?ve:'"'===l[3]?ye:ke):s===ye||s===ke?s=ve:s===me||s===fe?s=ge:(s=ve,o=void 0);const c=s===ve&&e[t+1].startsWith("/>")?" ":"";a+=s===ge?i+ue:d>=0?(n.push(r),i.slice(0,d)+re+i.slice(d)+le+c):i+le+(-2===d?t:c)}return[Ae(e,a+(e[i]||"<?>")+(2===t?"</svg>":"")),n]})(e,t);if(this.el=De.createElement(l,i),Te.currentNode=this.el.content,2===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(n=Te.nextNode())&&r.length<s;){if(1===n.nodeType){if(n.hasAttributes())for(const e of n.getAttributeNames())if(e.endsWith(re)){const t=d[a++],i=n.getAttribute(e).split(le),s=/([.?@])?(.*)/.exec(t);r.push({type:1,index:o,name:s[2],strings:i,ctor:"."===s[1]?Be:"?"===s[1]?Oe:"@"===s[1]?Ne:Me}),n.removeAttribute(e)}else e.startsWith(le)&&(r.push({type:6,index:o}),n.removeAttribute(e));if(xe.test(n.tagName)){const e=n.textContent.split(le),t=e.length-1;if(t>0){n.textContent=ae?ae.emptyScript:"";for(let i=0;i<t;i++)n.append(e[i],he()),Te.nextNode(),r.push({type:2,index:++o});n.append(e[t],he())}}}else if(8===n.nodeType)if(n.data===de)r.push({type:2,index:o});else{let e=-1;for(;-1!==(e=n.data.indexOf(le,e+1));)r.push({type:7,index:o}),e+=le.length-1}o++}}static createElement(e,t){const i=ce.createElement("template");return i.innerHTML=e,i}}function Ve(e,t,i=e,n){if(t===Ie)return t;let o=void 0!==n?i._$Co?.[n]:i._$Cl;const a=_e(t)?void 0:t._$litDirective$;return o?.constructor!==a&&(o?._$AO?.(!1),void 0===a?o=void 0:(o=new a(e),o._$AT(e,i,n)),void 0!==n?(i._$Co??=[])[n]=o:i._$Cl=o),void 0!==o&&(t=Ve(e,o._$AS(e,t.values),o,n)),t}class Le{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,n=(e?.creationScope??ce).importNode(t,!0);Te.currentNode=n;let o=Te.nextNode(),a=0,s=0,r=i[0];for(;void 0!==r;){if(a===r.index){let t;2===r.type?t=new He(o,o.nextSibling,this,e):1===r.type?t=new r.ctor(o,r.name,r.strings,this,e):6===r.type&&(t=new Ue(o,this,e)),this._$AV.push(t),r=i[++s]}a!==r?.index&&(o=Te.nextNode(),a++)}return Te.currentNode=ce,n}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class He{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,i,n){this.type=2,this._$AH=Ee,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=n,this._$Cv=n?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=Ve(this,e,t),_e(e)?e===Ee||null==e||""===e?(this._$AH!==Ee&&this._$AR(),this._$AH=Ee):e!==this._$AH&&e!==Ie&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>pe(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}S(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.S(e))}_(e){this._$AH!==Ee&&_e(this._$AH)?this._$AA.nextSibling.data=e:this.T(ce.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,n="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=De.createElement(Ae(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===n)this._$AH.p(t);else{const e=new Le(n,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=Se.get(e.strings);return void 0===t&&Se.set(e.strings,t=new De(e)),t}k(e){pe(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,n=0;for(const o of e)n===t.length?t.push(i=new He(this.S(he()),this.S(he()),this,this.options)):i=t[n],i._$AI(o),n++;n<t.length&&(this._$AR(i&&i._$AB.nextSibling,n),t.length=n)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e&&e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class Me{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,n,o){this.type=1,this._$AH=Ee,this._$AN=void 0,this.element=e,this.name=t,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=Ee}_$AI(e,t=this,i,n){const o=this.strings;let a=!1;if(void 0===o)e=Ve(this,e,t,0),a=!_e(e)||e!==this._$AH&&e!==Ie,a&&(this._$AH=e);else{const n=e;let s,r;for(e=o[0],s=0;s<o.length-1;s++)r=Ve(this,n[i+s],t,s),r===Ie&&(r=this._$AH[s]),a||=!_e(r)||r!==this._$AH[s],r===Ee?e=Ee:e!==Ee&&(e+=(r??"")+o[s+1]),this._$AH[s]=r}a&&!n&&this.j(e)}j(e){e===Ee?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class Be extends Me{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===Ee?void 0:e}}class Oe extends Me{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==Ee)}}class Ne extends Me{constructor(e,t,i,n,o){super(e,t,i,n,o),this.type=5}_$AI(e,t=this){if((e=Ve(this,e,t,0)??Ee)===Ie)return;const i=this._$AH,n=e===Ee&&i!==Ee||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==Ee&&(i===Ee||n);n&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class Ue{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){Ve(this,e)}}const Pe=oe.litHtmlPolyfillSupport;Pe?.(De,He),(oe.litHtmlVersions??=[]).push("3.1.2");class ze extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=((e,t,i)=>{const n=i?.renderBefore??t;let o=n._$litPart$;if(void 0===o){const e=i?.renderBefore??null;n._$litPart$=o=new He(t.insertBefore(he(),e),e,void 0,i??{})}return o._$AI(e),o})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return Ie}}ze._$litElement$=!0,ze.finalized=!0,globalThis.litElementHydrateSupport?.({LitElement:ze});const Re=globalThis.litElementPolyfillSupport;Re?.({LitElement:ze}),(globalThis.litElementVersions??=[]).push("4.0.4");const je={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:v},Ge=(e=je,t,i)=>{const{kind:n,metadata:o}=i;let a=globalThis.litPropertyMetadata.get(o);if(void 0===a&&globalThis.litPropertyMetadata.set(o,a=new Map),a.set(i.name,e),"accessor"===n){const{name:n}=i;return{set(i){const o=t.get.call(this);t.set.call(this,i),this.requestUpdate(n,o,e)},init(t){return void 0!==t&&this.P(n,void 0,e),t}}}if("setter"===n){const{name:n}=i;return function(i){const o=this[n];t.call(this,i),this.requestUpdate(n,o,e)}}throw Error("Unsupported decorator location: "+n)};function Fe(e){return(t,i)=>"object"==typeof i?Ge(e,t,i):((e,t,i)=>{const n=t.hasOwnProperty(i);return t.constructor.createProperty(i,n?{...e,wrapped:!0}:e),n?Object.getOwnPropertyDescriptor(t,i):void 0})(e,t,i)}function We(e){return Fe({...e,state:!0,attribute:!1})}const qe=(e,t,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,i),i);function Ke(e,t){return(i,n,o)=>{const a=t=>t.renderRoot?.querySelector(e)??null;if(t){const{get:e,set:t}="object"==typeof n?i:o??(()=>{const e=Symbol();return{get(){return this[e]},set(t){this[e]=t}}})();return qe(i,n,{get(){let i=e.call(this);return void 0===i&&(i=a(this),(null!==i||this.hasUpdated)&&t.call(this,i)),i}})}return qe(i,n,{get(){return a(this)}})}}let Ye;function Je(e){return(t,i)=>qe(t,i,{get(){return(this.renderRoot??(Ye??=document.createDocumentFragment())).querySelectorAll(e)}})}const Ze=1048576,Xe=1073741824,Qe={ATTACHMENT_BROWSE:"Browse",ATTACHMENT_DRAG_DROP_ZONE:"Drop files here."},et={ATTACHMENT_BROWSE:"参照",ATTACHMENT_DRAG_DROP_ZONE:"ここにファイルをドロップします。"},tt={ATTACHMENT_BROWSE:"选择文件",ATTACHMENT_DRAG_DROP_ZONE:"拖动文件到此。"},it={ATTACHMENT_BROWSE:"選擇檔案",ATTACHMENT_DRAG_DROP_ZONE:"拖曳檔案到此。"},nt="'items' property is not array.",ot="'value' property is not unique in items.",at="'value' property is not specified in items.",st="'files' property is not array.",rt="'value' property is not array.",lt="'value' property is not string.",dt="'selectedIndex' property is not array.",ut="'selectedIndex' property is not number.",ct="'columns' property is not array.",ht="'field' property is not specified in columns.",_t="'field' property is not unique in columns.",pt="'rowsPerPage' property is not positive integer.",bt="'data' property is not array.",gt="'container' property is not HTMLElement.";class mt{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,i){this._$Ct=e,this._$AM=t,this._$Ci=i}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}class ft extends mt{constructor(e){if(super(e),this.it=j,2!==e.type)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===j||null==e)return this._t=void 0,this.it=e;if(e===R)return e;if("string"!=typeof e)throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;const t=[e];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}}ft.directiveName="unsafeHTML",ft.resultType=1;const vt=(e=>(...t)=>({_$litDirective$:e,values:t}))(ft),kt=24,yt=12,xt="AM",wt="PM",$t='"max" must be greater than or equal to "min".',Ct="Time is out of valid range.",It="'timeStep' property is not number.",Et="00:00",St="23:59",Tt="'value' property format is not valid.",At="'max' property format is not valid.",Dt="'min' property format is not valid.",Vt="'timeStep' property format is not valid.",Lt={MONTH_SELECT:["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"],YEAR_SELECT_POSTFIX:"",WEEK_DAYS:[{text:"SUN",abbr:"Sunday"},{text:"MON",abbr:"Monday"},{text:"TUE",abbr:"Tuesday"},{text:"WED",abbr:"Wednesday"},{text:"THU",abbr:"Thursday"},{text:"FRI",abbr:"Friday"},{text:"SAT",abbr:"Saturday"}],INVALID_FORMAT:"Format is not valid.",INVALID_TIME_FORMAT:"Format is not valid.",CALENDAR_FOOTER_TEXT:{none:"None",today:"Today",close:"Close"},TIME_IS_OUT_OF_VALID_RANGE:"Time is out of valid range."},Ht={MONTH_SELECT:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],YEAR_SELECT_POSTFIX:"年",WEEK_DAYS:[{text:"日",abbr:"日"},{text:"月",abbr:"月"},{text:"火",abbr:"火"},{text:"水",abbr:"水"},{text:"木",abbr:"木"},{text:"金",abbr:"金"},{text:"土",abbr:"土"}],INVALID_FORMAT:"日付の形式が不正です。",INVALID_TIME_FORMAT:"時刻の形式が不正です。",CALENDAR_FOOTER_TEXT:{none:"選択を解除",today:"今日",close:"閉じる"},TIME_IS_OUT_OF_VALID_RANGE:"時刻が有効な範囲外です。"},Mt={MONTH_SELECT:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],YEAR_SELECT_POSTFIX:"年",WEEK_DAYS:[{text:"周日",abbr:"周日"},{text:"周一",abbr:"周一"},{text:"周二",abbr:"周二"},{text:"周三",abbr:"周三"},{text:"周四",abbr:"周四"},{text:"周五",abbr:"周五"},{text:"周六",abbr:"周六"}],INVALID_FORMAT:"日期格式不正确。",INVALID_TIME_FORMAT:"时间格式不正确。",CALENDAR_FOOTER_TEXT:{none:"清空",today:"今天",close:"关闭"},TIME_IS_OUT_OF_VALID_RANGE:"时间超出有效范围。"},Bt={MONTH_SELECT:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],YEAR_SELECT_POSTFIX:"年",WEEK_DAYS:[{text:"周日",abbr:"周日"},{text:"周一",abbr:"周一"},{text:"周二",abbr:"周二"},{text:"周三",abbr:"周三"},{text:"周四",abbr:"周四"},{text:"周五",abbr:"周五"},{text:"周六",abbr:"周六"}],INVALID_FORMAT:"日期格式不正確。",INVALID_TIME_FORMAT:"時間格式不正確。",CALENDAR_FOOTER_TEXT:{none:"清空",today:"今天",close:"關閉"},TIME_IS_OUT_OF_VALID_RANGE:"時間超出有效範圍。"},Ot=(e,t)=>{const i=Xt(e,t);let n=new Date(i.start),o=[];const a=[];for(;n<=i.end;)o.push(Ft(n)),7===o.length&&(a.push(o),o=[]),n.setDate(n.getDate()+1),n=new Date(n);return a},Nt=(e,t)=>{let i,n;i=Math.floor(e/60),n=e%60;const o=i%kt<yt?xt:wt;return i=t?i%yt:i%kt,0===i&&t&&(i=yt),i<10&&(i="0"+i),n<10&&(n="0"+n),{label:i+":"+n+(t?" "+o:""),value:i+":"+n+(t?" "+o:"")}},Ut=e=>{const t=e.split(":");let i=parseInt(t[0],10),n=parseInt(t[1],10);return isNaN(i)||isNaN(n)?0:(i<0?i=0:i>=kt&&(i=23),n<0?n=0:n>=60&&(n=59),60*i+n)},Pt=(e,t)=>{const i=Ut(e),n=Ut(t);return i>n?1:i===n?0:-1},zt=e=>{let t=e%yt;return t=0===t?yt:t,t},Rt=e=>e>=yt?wt:xt,jt=e=>{const[t,i]=e.split(" "),[n,o]=t.split(":");return i?`${Gt(n,i)}:${o}`:e},Gt=(e,t)=>{const i=parseInt(e,10);return Zt(t===wt?i===yt?12:i+12:i===yt?0:i)},Ft=e=>{const t=new Date(e),i=t.getFullYear(),n=Zt(t.getMonth()+1),o=Zt(t.getDate());return{text:`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`,attr:`${i}-${n}-${o}`}},Wt=(e,t)=>{if(t&&!Kt(t)){const i=t.split("-");if(3!==i.length)return t;const n=i[0],o=i[1],a=i[2];return"en"===e?`${o}/${a}/${n}`:`${n}-${o}-${a}`}return t},qt=(e,t)=>{if(Kt(t))return t;const i="en"===e,n=i?"/":"-",o=t.split(n);return`${i?o[2]:o[0]}-${i?o[0]:o[1]}-${i?o[1]:o[2]}`},Kt=e=>null==e||0===e.length||!/[^(^\s*)|(\s*$)]/.test(e),Yt=(e="ja")=>{const t=new Date,i=t.getFullYear(),n=Zt(t.getMonth()+1),o=Zt(t.getDate());return"ja"===e||"zh"===e?i+"-"+n+"-"+o:n+"/"+o+"/"+i},Jt=(e,t)=>{if(t&&!Kt(t)){const i="en"===e,n=i?"/":"-";if(new Date(`${t}${i?"":"T00:00:00"}`).getDate()!==parseInt(t.split(n)[i?1:2],10))return!1;const o=/^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/(\d{4})$/;if("en"===e)return null!==t.match(o);const a=/^(\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/g;return null!==t.match(a)}return!1},Zt=(e,t=2)=>{const i=`0000000000${e}`;return i.substr(i.length-t)},Xt=(e,t)=>{const i=new Date(e,t);i.setDate(1);const n=new Date(i);n.setDate(n.getDate()-n.getDay());const o=new Date(e,t);o.setMonth(o.getMonth()+1,0);const a=new Date(o);a.setDate(a.getDate()+(6-a.getDay()));const s=(a.getTime()-n.getTime())/864e5;return a.setDate(a.getDate()+(42-s)),{start:n,end:a}},Qt=e=>{switch(e){case"en":default:return Lt;case"zh":return Mt;case"ja":return Ht;case"zh-TW":return Bt}},ei=e=>{const t=[];t.push({value:`${e} 12`,label:`${e} 12`});for(let i=1;i<=11;i++)t.push({value:`${e} ${Zt(i)}`,label:`${e} ${Zt(i)}`});return t},ti=()=>Ce`
+(()=>{"use strict";const e=globalThis,t=e.ShadowRoot&&(void 0===e.ShadyCSS||e.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;class o{constructor(e,t,n){if(this._$cssResult$=!0,n!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const i=this.t;if(t&&void 0===e){const t=void 0!==i&&1===i.length;t&&(e=n.get(i)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),t&&n.set(i,e))}return e}toString(){return this.cssText}}const a=(i,n)=>{if(t)i.adoptedStyleSheets=n.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const t of n){const n=document.createElement("style"),o=e.litNonce;void 0!==o&&n.setAttribute("nonce",o),n.textContent=t.cssText,i.appendChild(n)}},s=t?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return(e=>new o("string"==typeof e?e:e+"",void 0,i))(t)})(e):e,{is:r,defineProperty:l,getOwnPropertyDescriptor:d,getOwnPropertyNames:u,getOwnPropertySymbols:c,getPrototypeOf:h}=Object,_=globalThis,p=_.trustedTypes,b=p?p.emptyScript:"",g=_.reactiveElementPolyfillSupport,m=(e,t)=>e,f={toAttribute(e,t){switch(t){case Boolean:e=e?b:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let i=e;switch(t){case Boolean:i=null!==e;break;case Number:i=null===e?null:Number(e);break;case Object:case Array:try{i=JSON.parse(e)}catch(e){i=null}}return i}},v=(e,t)=>!r(e,t),k={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:v};Symbol.metadata??=Symbol("metadata"),_.litPropertyMetadata??=new WeakMap;class y extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=k){if(t.state&&(t.attribute=!1),this._$Ei(),this.elementProperties.set(e,t),!t.noAccessor){const i=Symbol(),n=this.getPropertyDescriptor(e,i,t);void 0!==n&&l(this.prototype,e,n)}}static getPropertyDescriptor(e,t,i){const{get:n,set:o}=d(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get(){return n?.call(this)},set(t){const a=n?.call(this);o.call(this,t),this.requestUpdate(e,a,i)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??k}static _$Ei(){if(this.hasOwnProperty(m("elementProperties")))return;const e=h(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(m("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(m("properties"))){const e=this.properties,t=[...u(e),...c(e)];for(const i of t)this.createProperty(i,e[i])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,i]of t)this.elementProperties.set(e,i)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const i=this._$Eu(e,t);void 0!==i&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const i=new Set(e.flat(1/0).reverse());for(const e of i)t.unshift(s(e))}else void 0!==e&&t.push(s(e));return t}static _$Eu(e,t){const i=t.attribute;return!1===i?void 0:"string"==typeof i?i:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise((e=>this.enableUpdating=e)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((e=>e(this)))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const i of t.keys())this.hasOwnProperty(i)&&(e.set(i,this[i]),delete this[i]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return a(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((e=>e.hostConnected?.()))}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach((e=>e.hostDisconnected?.()))}attributeChangedCallback(e,t,i){this._$AK(e,i)}_$EC(e,t){const i=this.constructor.elementProperties.get(e),n=this.constructor._$Eu(e,i);if(void 0!==n&&!0===i.reflect){const o=(void 0!==i.converter?.toAttribute?i.converter:f).toAttribute(t,i.type);this._$Em=e,null==o?this.removeAttribute(n):this.setAttribute(n,o),this._$Em=null}}_$AK(e,t){const i=this.constructor,n=i._$Eh.get(e);if(void 0!==n&&this._$Em!==n){const e=i.getPropertyOptions(n),o="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:f;this._$Em=n,this[n]=o.fromAttribute(t,e.type),this._$Em=null}}requestUpdate(e,t,i){if(void 0!==e){if(i??=this.constructor.getPropertyOptions(e),!(i.hasChanged??v)(this[e],t))return;this.P(e,t,i)}!1===this.isUpdatePending&&(this._$ES=this._$ET())}P(e,t,i){this._$AL.has(e)||this._$AL.set(e,t),!0===i.reflect&&this._$Em!==e&&(this._$Ej??=new Set).add(e)}async _$ET(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,i]of e)!0!==i.wrapped||this._$AL.has(t)||void 0===this[t]||this.P(t,this[t],i)}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach((e=>e.hostUpdate?.())),this.update(t)):this._$EU()}catch(t){throw e=!1,this._$EU(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach((e=>e.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EU(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Ej&&=this._$Ej.forEach((e=>this._$EC(e,this[e]))),this._$EU()}updated(e){}firstUpdated(e){}}y.elementStyles=[],y.shadowRootOptions={mode:"open"},y[m("elementProperties")]=new Map,y[m("finalized")]=new Map,g?.({ReactiveElement:y}),(_.reactiveElementVersions??=[]).push("2.0.4");const x=globalThis,w=x.trustedTypes,$=w?w.createPolicy("lit-html",{createHTML:e=>e}):void 0,C="$lit$",I=`lit$${Math.random().toFixed(9).slice(2)}$`,E="?"+I,S=`<${E}>`,T=document,A=()=>T.createComment(""),D=e=>null===e||"object"!=typeof e&&"function"!=typeof e,V=Array.isArray,L="[ \t\n\f\r]",H=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,M=/-->/g,B=/>/g,O=RegExp(`>|${L}(?:([^\\s"'>=/]+)(${L}*=${L}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),N=/'/g,U=/"/g,P=/^(?:script|style|textarea|title)$/i,z=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),R=(z(1),z(2),z(3),Symbol.for("lit-noChange")),j=Symbol.for("lit-nothing"),G=new WeakMap,F=T.createTreeWalker(T,129);function W(e,t){if(!V(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==$?$.createHTML(t):t}class q{constructor({strings:e,_$litType$:t},i){let n;this.parts=[];let o=0,a=0;const s=e.length-1,r=this.parts,[l,d]=((e,t)=>{const i=e.length-1,n=[];let o,a=2===t?"<svg>":3===t?"<math>":"",s=H;for(let t=0;t<i;t++){const i=e[t];let r,l,d=-1,u=0;for(;u<i.length&&(s.lastIndex=u,l=s.exec(i),null!==l);)u=s.lastIndex,s===H?"!--"===l[1]?s=M:void 0!==l[1]?s=B:void 0!==l[2]?(P.test(l[2])&&(o=RegExp("</"+l[2],"g")),s=O):void 0!==l[3]&&(s=O):s===O?">"===l[0]?(s=o??H,d=-1):void 0===l[1]?d=-2:(d=s.lastIndex-l[2].length,r=l[1],s=void 0===l[3]?O:'"'===l[3]?U:N):s===U||s===N?s=O:s===M||s===B?s=H:(s=O,o=void 0);const c=s===O&&e[t+1].startsWith("/>")?" ":"";a+=s===H?i+S:d>=0?(n.push(r),i.slice(0,d)+C+i.slice(d)+I+c):i+I+(-2===d?t:c)}return[W(e,a+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),n]})(e,t);if(this.el=q.createElement(l,i),F.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(n=F.nextNode())&&r.length<s;){if(1===n.nodeType){if(n.hasAttributes())for(const e of n.getAttributeNames())if(e.endsWith(C)){const t=d[a++],i=n.getAttribute(e).split(I),s=/([.?@])?(.*)/.exec(t);r.push({type:1,index:o,name:s[2],strings:i,ctor:"."===s[1]?X:"?"===s[1]?Q:"@"===s[1]?ee:Z}),n.removeAttribute(e)}else e.startsWith(I)&&(r.push({type:6,index:o}),n.removeAttribute(e));if(P.test(n.tagName)){const e=n.textContent.split(I),t=e.length-1;if(t>0){n.textContent=w?w.emptyScript:"";for(let i=0;i<t;i++)n.append(e[i],A()),F.nextNode(),r.push({type:2,index:++o});n.append(e[t],A())}}}else if(8===n.nodeType)if(n.data===E)r.push({type:2,index:o});else{let e=-1;for(;-1!==(e=n.data.indexOf(I,e+1));)r.push({type:7,index:o}),e+=I.length-1}o++}}static createElement(e,t){const i=T.createElement("template");return i.innerHTML=e,i}}function K(e,t,i=e,n){if(t===R)return t;let o=void 0!==n?i.o?.[n]:i.l;const a=D(t)?void 0:t._$litDirective$;return o?.constructor!==a&&(o?._$AO?.(!1),void 0===a?o=void 0:(o=new a(e),o._$AT(e,i,n)),void 0!==n?(i.o??=[])[n]=o:i.l=o),void 0!==o&&(t=K(e,o._$AS(e,t.values),o,n)),t}class Y{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,n=(e?.creationScope??T).importNode(t,!0);F.currentNode=n;let o=F.nextNode(),a=0,s=0,r=i[0];for(;void 0!==r;){if(a===r.index){let t;2===r.type?t=new J(o,o.nextSibling,this,e):1===r.type?t=new r.ctor(o,r.name,r.strings,this,e):6===r.type&&(t=new te(o,this,e)),this._$AV.push(t),r=i[++s]}a!==r?.index&&(o=F.nextNode(),a++)}return F.currentNode=T,n}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class J{get _$AU(){return this._$AM?._$AU??this.v}constructor(e,t,i,n){this.type=2,this._$AH=j,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=n,this.v=n?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=K(this,e,t),D(e)?e===j||null==e||""===e?(this._$AH!==j&&this._$AR(),this._$AH=j):e!==this._$AH&&e!==R&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>V(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==j&&D(this._$AH)?this._$AA.nextSibling.data=e:this.T(T.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,n="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=q.createElement(W(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===n)this._$AH.p(t);else{const e=new Y(n,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=G.get(e.strings);return void 0===t&&G.set(e.strings,t=new q(e)),t}k(e){V(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,n=0;for(const o of e)n===t.length?t.push(i=new J(this.O(A()),this.O(A()),this,this.options)):i=t[n],i._$AI(o),n++;n<t.length&&(this._$AR(i&&i._$AB.nextSibling,n),t.length=n)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e&&e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this.v=e,this._$AP?.(e))}}class Z{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,n,o){this.type=1,this._$AH=j,this._$AN=void 0,this.element=e,this.name=t,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=j}_$AI(e,t=this,i,n){const o=this.strings;let a=!1;if(void 0===o)e=K(this,e,t,0),a=!D(e)||e!==this._$AH&&e!==R,a&&(this._$AH=e);else{const n=e;let s,r;for(e=o[0],s=0;s<o.length-1;s++)r=K(this,n[i+s],t,s),r===R&&(r=this._$AH[s]),a||=!D(r)||r!==this._$AH[s],r===j?e=j:e!==j&&(e+=(r??"")+o[s+1]),this._$AH[s]=r}a&&!n&&this.j(e)}j(e){e===j?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class X extends Z{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===j?void 0:e}}class Q extends Z{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==j)}}class ee extends Z{constructor(e,t,i,n,o){super(e,t,i,n,o),this.type=5}_$AI(e,t=this){if((e=K(this,e,t,0)??j)===R)return;const i=this._$AH,n=e===j&&i!==j||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==j&&(i===j||n);n&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class te{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){K(this,e)}}const ie=x.litHtmlPolyfillSupport;ie?.(q,J),(x.litHtmlVersions??=[]).push("3.2.0");const ne=globalThis,oe=ne.trustedTypes,ae=oe?oe.createPolicy("lit-html",{createHTML:e=>e}):void 0,se="$lit$",re=`lit$${Math.random().toFixed(9).slice(2)}$`,le="?"+re,de=`<${le}>`,ue=document,ce=()=>ue.createComment(""),he=e=>null===e||"object"!=typeof e&&"function"!=typeof e,_e=Array.isArray,pe="[ \t\n\f\r]",be=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ge=/-->/g,me=/>/g,fe=RegExp(`>|${pe}(?:([^\\s"'>=/]+)(${pe}*=${pe}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),ve=/'/g,ke=/"/g,ye=/^(?:script|style|textarea|title)$/i,xe=e=>(t,...i)=>({_$litType$:e,strings:t,values:i}),we=xe(1),$e=xe(2),Ce=(xe(3),Symbol.for("lit-noChange")),Ie=Symbol.for("lit-nothing"),Ee=new WeakMap,Se=ue.createTreeWalker(ue,129);function Te(e,t){if(!_e(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==ae?ae.createHTML(t):t}class Ae{constructor({strings:e,_$litType$:t},i){let n;this.parts=[];let o=0,a=0;const s=e.length-1,r=this.parts,[l,d]=((e,t)=>{const i=e.length-1,n=[];let o,a=2===t?"<svg>":3===t?"<math>":"",s=be;for(let t=0;t<i;t++){const i=e[t];let r,l,d=-1,u=0;for(;u<i.length&&(s.lastIndex=u,l=s.exec(i),null!==l);)u=s.lastIndex,s===be?"!--"===l[1]?s=ge:void 0!==l[1]?s=me:void 0!==l[2]?(ye.test(l[2])&&(o=RegExp("</"+l[2],"g")),s=fe):void 0!==l[3]&&(s=fe):s===fe?">"===l[0]?(s=o??be,d=-1):void 0===l[1]?d=-2:(d=s.lastIndex-l[2].length,r=l[1],s=void 0===l[3]?fe:'"'===l[3]?ke:ve):s===ke||s===ve?s=fe:s===ge||s===me?s=be:(s=fe,o=void 0);const c=s===fe&&e[t+1].startsWith("/>")?" ":"";a+=s===be?i+de:d>=0?(n.push(r),i.slice(0,d)+se+i.slice(d)+re+c):i+re+(-2===d?t:c)}return[Te(e,a+(e[i]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),n]})(e,t);if(this.el=Ae.createElement(l,i),Se.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(n=Se.nextNode())&&r.length<s;){if(1===n.nodeType){if(n.hasAttributes())for(const e of n.getAttributeNames())if(e.endsWith(se)){const t=d[a++],i=n.getAttribute(e).split(re),s=/([.?@])?(.*)/.exec(t);r.push({type:1,index:o,name:s[2],strings:i,ctor:"."===s[1]?Me:"?"===s[1]?Be:"@"===s[1]?Oe:He}),n.removeAttribute(e)}else e.startsWith(re)&&(r.push({type:6,index:o}),n.removeAttribute(e));if(ye.test(n.tagName)){const e=n.textContent.split(re),t=e.length-1;if(t>0){n.textContent=oe?oe.emptyScript:"";for(let i=0;i<t;i++)n.append(e[i],ce()),Se.nextNode(),r.push({type:2,index:++o});n.append(e[t],ce())}}}else if(8===n.nodeType)if(n.data===le)r.push({type:2,index:o});else{let e=-1;for(;-1!==(e=n.data.indexOf(re,e+1));)r.push({type:7,index:o}),e+=re.length-1}o++}}static createElement(e,t){const i=ue.createElement("template");return i.innerHTML=e,i}}function De(e,t,i=e,n){if(t===Ce)return t;let o=void 0!==n?i.o?.[n]:i.l;const a=he(t)?void 0:t._$litDirective$;return o?.constructor!==a&&(o?._$AO?.(!1),void 0===a?o=void 0:(o=new a(e),o._$AT(e,i,n)),void 0!==n?(i.o??=[])[n]=o:i.l=o),void 0!==o&&(t=De(e,o._$AS(e,t.values),o,n)),t}class Ve{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:i}=this._$AD,n=(e?.creationScope??ue).importNode(t,!0);Se.currentNode=n;let o=Se.nextNode(),a=0,s=0,r=i[0];for(;void 0!==r;){if(a===r.index){let t;2===r.type?t=new Le(o,o.nextSibling,this,e):1===r.type?t=new r.ctor(o,r.name,r.strings,this,e):6===r.type&&(t=new Ne(o,this,e)),this._$AV.push(t),r=i[++s]}a!==r?.index&&(o=Se.nextNode(),a++)}return Se.currentNode=ue,n}p(e){let t=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(e,i,t),t+=i.strings.length-2):i._$AI(e[t])),t++}}class Le{get _$AU(){return this._$AM?._$AU??this.v}constructor(e,t,i,n){this.type=2,this._$AH=Ie,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=i,this.options=n,this.v=n?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=De(this,e,t),he(e)?e===Ie||null==e||""===e?(this._$AH!==Ie&&this._$AR(),this._$AH=Ie):e!==this._$AH&&e!==Ce&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):(e=>_e(e)||"function"==typeof e?.[Symbol.iterator])(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==Ie&&he(this._$AH)?this._$AA.nextSibling.data=e:this.T(ue.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:i}=e,n="number"==typeof i?this._$AC(e):(void 0===i.el&&(i.el=Ae.createElement(Te(i.h,i.h[0]),this.options)),i);if(this._$AH?._$AD===n)this._$AH.p(t);else{const e=new Ve(n,this),i=e.u(this.options);e.p(t),this.T(i),this._$AH=e}}_$AC(e){let t=Ee.get(e.strings);return void 0===t&&Ee.set(e.strings,t=new Ae(e)),t}k(e){_e(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let i,n=0;for(const o of e)n===t.length?t.push(i=new Le(this.O(ce()),this.O(ce()),this,this.options)):i=t[n],i._$AI(o),n++;n<t.length&&(this._$AR(i&&i._$AB.nextSibling,n),t.length=n)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e&&e!==this._$AB;){const t=e.nextSibling;e.remove(),e=t}}setConnected(e){void 0===this._$AM&&(this.v=e,this._$AP?.(e))}}class He{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,i,n,o){this.type=1,this._$AH=Ie,this._$AN=void 0,this.element=e,this.name=t,this._$AM=n,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=Ie}_$AI(e,t=this,i,n){const o=this.strings;let a=!1;if(void 0===o)e=De(this,e,t,0),a=!he(e)||e!==this._$AH&&e!==Ce,a&&(this._$AH=e);else{const n=e;let s,r;for(e=o[0],s=0;s<o.length-1;s++)r=De(this,n[i+s],t,s),r===Ce&&(r=this._$AH[s]),a||=!he(r)||r!==this._$AH[s],r===Ie?e=Ie:e!==Ie&&(e+=(r??"")+o[s+1]),this._$AH[s]=r}a&&!n&&this.j(e)}j(e){e===Ie?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class Me extends He{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===Ie?void 0:e}}class Be extends He{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==Ie)}}class Oe extends He{constructor(e,t,i,n,o){super(e,t,i,n,o),this.type=5}_$AI(e,t=this){if((e=De(this,e,t,0)??Ie)===Ce)return;const i=this._$AH,n=e===Ie&&i!==Ie||e.capture!==i.capture||e.once!==i.once||e.passive!==i.passive,o=e!==Ie&&(i===Ie||n);n&&this.element.removeEventListener(this.name,this,i),o&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class Ne{constructor(e,t,i){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(e){De(this,e)}}const Ue=ne.litHtmlPolyfillSupport;Ue?.(Ae,Le),(ne.litHtmlVersions??=[]).push("3.2.0");class Pe extends y{constructor(){super(...arguments),this.renderOptions={host:this},this.o=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this.o=((e,t,i)=>{const n=i?.renderBefore??t;let o=n._$litPart$;if(void 0===o){const e=i?.renderBefore??null;n._$litPart$=o=new Le(t.insertBefore(ce(),e),e,void 0,i??{})}return o._$AI(e),o})(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.o?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.o?.setConnected(!1)}render(){return Ce}}Pe._$litElement$=!0,Pe.finalized=!0,globalThis.litElementHydrateSupport?.({LitElement:Pe});const ze=globalThis.litElementPolyfillSupport;ze?.({LitElement:Pe}),(globalThis.litElementVersions??=[]).push("4.1.0");const Re={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:v},je=(e=Re,t,i)=>{const{kind:n,metadata:o}=i;let a=globalThis.litPropertyMetadata.get(o);if(void 0===a&&globalThis.litPropertyMetadata.set(o,a=new Map),a.set(i.name,e),"accessor"===n){const{name:n}=i;return{set(i){const o=t.get.call(this);t.set.call(this,i),this.requestUpdate(n,o,e)},init(t){return void 0!==t&&this.P(n,void 0,e),t}}}if("setter"===n){const{name:n}=i;return function(i){const o=this[n];t.call(this,i),this.requestUpdate(n,o,e)}}throw Error("Unsupported decorator location: "+n)};function Ge(e){return(t,i)=>"object"==typeof i?je(e,t,i):((e,t,i)=>{const n=t.hasOwnProperty(i);return t.constructor.createProperty(i,n?{...e,wrapped:!0}:e),n?Object.getOwnPropertyDescriptor(t,i):void 0})(e,t,i)}function Fe(e){return Ge({...e,state:!0,attribute:!1})}const We=(e,t,i)=>(i.configurable=!0,i.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,i),i);function qe(e,t){return(i,n,o)=>{const a=t=>t.renderRoot?.querySelector(e)??null;if(t){const{get:e,set:t}="object"==typeof n?i:o??(()=>{const e=Symbol();return{get(){return this[e]},set(t){this[e]=t}}})();return We(i,n,{get(){let i=e.call(this);return void 0===i&&(i=a(this),(null!==i||this.hasUpdated)&&t.call(this,i)),i}})}return We(i,n,{get(){return a(this)}})}}let Ke;function Ye(e){return(t,i)=>We(t,i,{get(){return(this.renderRoot??(Ke??=document.createDocumentFragment())).querySelectorAll(e)}})}const Je=1048576,Ze=1073741824,Xe={ATTACHMENT_BROWSE:"Browse",ATTACHMENT_DRAG_DROP_ZONE:"Drop files here."},Qe={ATTACHMENT_BROWSE:"参照",ATTACHMENT_DRAG_DROP_ZONE:"ここにファイルをドロップします。"},et={ATTACHMENT_BROWSE:"选择文件",ATTACHMENT_DRAG_DROP_ZONE:"拖动文件到此。"},tt={ATTACHMENT_BROWSE:"選擇檔案",ATTACHMENT_DRAG_DROP_ZONE:"拖曳檔案到此。"},it="'items' property is not array.",nt="'value' property is not unique in items.",ot="'value' property is not specified in items.",at="'files' property is not array.",st="'value' property is not array.",rt="'value' property is not string.",lt="'selectedIndex' property is not array.",dt="'selectedIndex' property is not number.",ut="'columns' property is not array.",ct="'field' property is not specified in columns.",ht="'field' property is not unique in columns.",_t="'rowsPerPage' property is not positive integer.",pt="'data' property is not array.",bt="'container' property is not HTMLElement.";class gt{constructor(e){}get _$AU(){return this._$AM._$AU}_$AT(e,t,i){this.t=e,this._$AM=t,this.i=i}_$AS(e,t){return this.update(e,t)}update(e,t){return this.render(...t)}}class mt extends gt{constructor(e){if(super(e),this.it=j,2!==e.type)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(e){if(e===j||null==e)return this._t=void 0,this.it=e;if(e===R)return e;if("string"!=typeof e)throw Error(this.constructor.directiveName+"() called with a non-string value");if(e===this.it)return this._t;this.it=e;const t=[e];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}}mt.directiveName="unsafeHTML",mt.resultType=1;const ft=(e=>(...t)=>({_$litDirective$:e,values:t}))(mt),vt=24,kt=12,yt="AM",xt="PM",wt='"max" must be greater than or equal to "min".',$t="Time is out of valid range.",Ct="'timeStep' property is not number.",It="00:00",Et="23:59",St="'value' property format is not valid.",Tt="'max' property format is not valid.",At="'min' property format is not valid.",Dt="'timeStep' property format is not valid.",Vt={MONTH_SELECT:["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER","DECEMBER"],YEAR_SELECT_POSTFIX:"",WEEK_DAYS:[{text:"SUN",abbr:"Sunday"},{text:"MON",abbr:"Monday"},{text:"TUE",abbr:"Tuesday"},{text:"WED",abbr:"Wednesday"},{text:"THU",abbr:"Thursday"},{text:"FRI",abbr:"Friday"},{text:"SAT",abbr:"Saturday"}],INVALID_FORMAT:"Format is not valid.",INVALID_TIME_FORMAT:"Format is not valid.",CALENDAR_FOOTER_TEXT:{none:"None",today:"Today",close:"Close"},TIME_IS_OUT_OF_VALID_RANGE:"Time is out of valid range."},Lt={MONTH_SELECT:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],YEAR_SELECT_POSTFIX:"年",WEEK_DAYS:[{text:"日",abbr:"日"},{text:"月",abbr:"月"},{text:"火",abbr:"火"},{text:"水",abbr:"水"},{text:"木",abbr:"木"},{text:"金",abbr:"金"},{text:"土",abbr:"土"}],INVALID_FORMAT:"日付の形式が不正です。",INVALID_TIME_FORMAT:"時刻の形式が不正です。",CALENDAR_FOOTER_TEXT:{none:"選択を解除",today:"今日",close:"閉じる"},TIME_IS_OUT_OF_VALID_RANGE:"時刻が有効な範囲外です。"},Ht={MONTH_SELECT:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],YEAR_SELECT_POSTFIX:"年",WEEK_DAYS:[{text:"周日",abbr:"周日"},{text:"周一",abbr:"周一"},{text:"周二",abbr:"周二"},{text:"周三",abbr:"周三"},{text:"周四",abbr:"周四"},{text:"周五",abbr:"周五"},{text:"周六",abbr:"周六"}],INVALID_FORMAT:"日期格式不正确。",INVALID_TIME_FORMAT:"时间格式不正确。",CALENDAR_FOOTER_TEXT:{none:"清空",today:"今天",close:"关闭"},TIME_IS_OUT_OF_VALID_RANGE:"时间超出有效范围。"},Mt={MONTH_SELECT:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],YEAR_SELECT_POSTFIX:"年",WEEK_DAYS:[{text:"周日",abbr:"周日"},{text:"周一",abbr:"周一"},{text:"周二",abbr:"周二"},{text:"周三",abbr:"周三"},{text:"周四",abbr:"周四"},{text:"周五",abbr:"周五"},{text:"周六",abbr:"周六"}],INVALID_FORMAT:"日期格式不正確。",INVALID_TIME_FORMAT:"時間格式不正確。",CALENDAR_FOOTER_TEXT:{none:"清空",today:"今天",close:"關閉"},TIME_IS_OUT_OF_VALID_RANGE:"時間超出有效範圍。"},Bt=(e,t)=>{const i=Zt(e,t);let n=new Date(i.start),o=[];const a=[];for(;n<=i.end;)o.push(Gt(n)),7===o.length&&(a.push(o),o=[]),n.setDate(n.getDate()+1),n=new Date(n);return a},Ot=(e,t)=>{let i,n;i=Math.floor(e/60),n=e%60;const o=i%vt<kt?yt:xt;return i=t?i%kt:i%vt,0===i&&t&&(i=kt),i<10&&(i="0"+i),n<10&&(n="0"+n),{label:i+":"+n+(t?" "+o:""),value:i+":"+n+(t?" "+o:"")}},Nt=e=>{const t=e.split(":");let i=parseInt(t[0],10),n=parseInt(t[1],10);return isNaN(i)||isNaN(n)?0:(i<0?i=0:i>=vt&&(i=23),n<0?n=0:n>=60&&(n=59),60*i+n)},Ut=(e,t)=>{const i=Nt(e),n=Nt(t);return i>n?1:i===n?0:-1},Pt=e=>{let t=e%kt;return t=0===t?kt:t,t},zt=e=>e>=kt?xt:yt,Rt=e=>{const[t,i]=e.split(" "),[n,o]=t.split(":");return i?`${jt(n,i)}:${o}`:e},jt=(e,t)=>{const i=parseInt(e,10);return Jt(t===xt?i===kt?12:i+12:i===kt?0:i)},Gt=e=>{const t=new Date(e),i=t.getFullYear(),n=Jt(t.getMonth()+1),o=Jt(t.getDate());return{text:`${t.getFullYear()}-${t.getMonth()+1}-${t.getDate()}`,attr:`${i}-${n}-${o}`}},Ft=(e,t)=>{if(t&&!qt(t)){const i=t.split("-");if(3!==i.length)return t;const n=i[0],o=i[1],a=i[2];return"en"===e?`${o}/${a}/${n}`:`${n}-${o}-${a}`}return t},Wt=(e,t)=>{if(qt(t))return t;const i="en"===e,n=i?"/":"-",o=t.split(n);return`${i?o[2]:o[0]}-${i?o[0]:o[1]}-${i?o[1]:o[2]}`},qt=e=>null==e||0===e.length||!/[^(^\s*)|(\s*$)]/.test(e),Kt=(e="ja")=>{const t=new Date,i=t.getFullYear(),n=Jt(t.getMonth()+1),o=Jt(t.getDate());return"ja"===e||"zh"===e?i+"-"+n+"-"+o:n+"/"+o+"/"+i},Yt=(e,t)=>{if(t&&!qt(t)){const i="en"===e,n=i?"/":"-";if(new Date(`${t}${i?"":"T00:00:00"}`).getDate()!==parseInt(t.split(n)[i?1:2],10))return!1;const o=/^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/(\d{4})$/;if("en"===e)return null!==t.match(o);const a=/^(\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/g;return null!==t.match(a)}return!1},Jt=(e,t=2)=>{const i=`0000000000${e}`;return i.substr(i.length-t)},Zt=(e,t)=>{const i=new Date(e,t);i.setDate(1);const n=new Date(i);n.setDate(n.getDate()-n.getDay());const o=new Date(e,t);o.setMonth(o.getMonth()+1,0);const a=new Date(o);a.setDate(a.getDate()+(6-a.getDay()));const s=(a.getTime()-n.getTime())/864e5;return a.setDate(a.getDate()+(42-s)),{start:n,end:a}},Xt=e=>{switch(e){case"en":default:return Vt;case"zh":return Ht;case"ja":return Lt;case"zh-TW":return Mt}},Qt=e=>{const t=[];t.push({value:`${e} 12`,label:`${e} 12`});for(let i=1;i<=11;i++)t.push({value:`${e} ${Jt(i)}`,label:`${e} ${Jt(i)}`});return t},ei=()=>$e`
     <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.5V1.2764L6 7.5L12 1.2764V0.5L6 6.5L0 0.5Z" fill="#888888"/>
     </svg>
-    `;function ii(e,t){const i=e.querySelector(".kuc-base-datetime-listbox-1-17-0__listbox"),n=ni(e);if(!e.parentElement||!i||!n)return;const{inputToBottom:o,inputToTop:a}=n,s="kuc-base-datetime-header-month-1-17-0"===e.tagName.toLowerCase()?360:300,r=e.parentElement.getBoundingClientRect().height;return i.style.maxHeight=s+"px",e.parentElement.style.position="relative",o>=s?(i.style.height=s+"px","bottom"===t?void(i.style.top=r+"px"):void(i.style.bottom=r+"px")):"bottom"===t?(i.style.top=r+"px",void(i.style.height=o-18+"px")):(i.style.height=a-18+"px",i.style.top="auto",void(i.style.bottom=e.parentElement.getBoundingClientRect().height+"px"))}const ni=e=>{var t,i;if(!e.parentElement)return{inputToBottom:0,inputToTop:0,inputToRight:0,inputToLeft:0};const n=null!==(t=e.closest("kuc-base-date-1-17-0"))&&void 0!==t?t:e.closest("kuc-mobile-base-date-1-17-0"),o=(null!==(i=n.getElementsByClassName("kuc-base-date-1-17-0__input")[0])&&void 0!==i?i:n.getElementsByClassName("kuc-mobile-base-date-1-17-0__group")[0]).getBoundingClientRect().width;return{inputToBottom:window.innerHeight-e.parentElement.getBoundingClientRect().bottom,inputToTop:e.parentElement.getBoundingClientRect().top,inputToRight:window.innerWidth-e.parentElement.getBoundingClientRect().left,inputToLeft:e.parentElement.getBoundingClientRect().left+o}},oi={fromAttribute:e=>null===e,toAttribute:e=>e?null:""},ai={fromAttribute:e=>!e||-1===["en","ja","zh","zh-TW"].indexOf(e),toAttribute:e=>{const t=["en","ja","zh","zh-TW"];return-1!==t.indexOf(e)?e:-1!==t.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}},si=e=>e instanceof HTMLElement?e:vt(e),ri=e=>{if(void 0===e||""===e)return"";let t=[];return e.indexOf("-")>0&&(t=e.split("-")),t.length<2?`${e}-01-01`:2===t.length?`${Zt(t[0],4)}-${Zt(t[1])}-01`:t.length>2?`${Zt(t[0],4)}-${Zt(t[1])}-${Zt(t[2])}`:""},li=e=>{if(5===e.length||""===e)return e;const t=e.indexOf(":"),i=e.substr(0,t),n=e.substr(t+1,5);return`${Zt(i)}:${Zt(n)}`},di={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};let ui;const ci=new Uint8Array(16);function hi(){if(!ui&&(ui="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto),!ui))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return ui(ci)}const _i=[];for(let e=0;e<256;++e)_i.push((e+256).toString(16).slice(1));const pi=function(e,t,i){if(di.randomUUID&&!t&&!e)return di.randomUUID();const n=(e=e||{}).random||(e.rng||hi)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){i=i||0;for(let e=0;e<16;++e)t[i+e]=n[e];return t}return function(e,t=0){return _i[e[t+0]]+_i[e[t+1]]+_i[e[t+2]]+_i[e[t+3]]+"-"+_i[e[t+4]]+_i[e[t+5]]+"-"+_i[e[t+6]]+_i[e[t+7]]+"-"+_i[e[t+8]]+_i[e[t+9]]+"-"+_i[e[t+10]]+_i[e[t+11]]+_i[e[t+12]]+_i[e[t+13]]+_i[e[t+14]]+_i[e[t+15]]}(n)};class bi extends ze{createRenderRoot(){return this}async throwErrorAfterUpdateComplete(e){throw await this.updateComplete,new Error(e)}}const gi=(e,t,i)=>{const n=new CustomEvent(t,{detail:i,bubbles:!0,composed:!0});return e.dispatchEvent(n)},mi=e=>{const t="kuc-style-1-17-0";let i=document.getElementById(t);i||(i=document.createElement("style"),i.id=t,document.head.appendChild(i)),i.appendChild(document.createTextNode(e))},fi=()=>pi();function vi(e){if(!e||"object"!=typeof e)return{};const t={...e};for(const e in t)Object.prototype.hasOwnProperty.call(t,e)&&void 0===t[e]&&delete t[e];return t}function ki(e){return!(""!==e&&void 0!==e&&!/(^(\d{1,4})-(0?[1-9]|1[0-2])-(0?[1-9]|[12][0-9]|3[01])$)|(^(\d{1,4})$)|(^(\d{1,4})-(0?[1-9]|1[0-2])$)/g.test(e))}function yi(e){return!(""!==e&&!/^(2[0-3]|[01]?[0-9]):([0-9]|[0-5][0-9])$/.test(e))}function xi(e,t,i){const n=Math.round(e),o=Ut(t),a=Ut(i);return!isNaN(n)&&n>0&&n<=o-a}function wi(e){const[t,i,n]=e.split("-"),o=new Date(`${e}T00:00:00`),a=o.getFullYear(),s=o.getMonth(),r=o.getDate();return a===Number(t)&&s===Number(i)-1&&r===Number(n)}function $i(e){return"string"==typeof e}function Ci(e,t){return!(!/(^(\d{4})-(0[0-9]|1[0-2])-(0[1-9]|([12][0-9]|3[01]))$)|(^(\d{4})$)|(^(\d{4})-(0[0-9]|1[0-2])$)/g.test(e)||!/(^([01][0-9]|2[0-3])$)|(^([01][0-9]|2[0-3]):([0-5][0-9]))$|(^([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9])$/.test(t))}function Ii(e){return e.length<2||!e.some((t=>e.indexOf(t)!==e.lastIndexOf(t)))}function Ei(e){return!(e<.5||!Si(e))}function Si(e){return"number"==typeof e&&!Number.isNaN(e)}function Ti(e){return Array.isArray(e)}var Ai=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Di;(()=>{if(Di=window.customElements.get("kuc-attachment-1-17-0"),!Di){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.message="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.files=[],this._isDraging=!1,this._dragEnterCounter=0,this._locale=this._getLocale(),this._isFileOrDirectoryDrag=e=>{if(!e.dataTransfer)return!1;if(void 0!==e.dataTransfer.items)for(let t=0;t<e.dataTransfer.items.length;t++)if("file"===e.dataTransfer.items[t].kind.toLowerCase())return!0;if(void 0!==e.dataTransfer.types)for(let t=0;t<e.dataTransfer.types.length;t++)if("files"===e.dataTransfer.types[t].toLowerCase())return!0;return!1},this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!(e.has("files")&&!Ti(this.files)&&(this.throwErrorAfterUpdateComplete(st),1))}willUpdate(e){return e.has("language")&&(this._locale=this._getLocale()),!0}render(){return $e`
-      <div class="kuc-attachment-1-17-0__group">
+    `;function ti(e,t){const i=e.querySelector(".kuc-base-datetime-listbox-1-17-1__listbox"),n=ii(e);if(!e.parentElement||!i||!n)return;const{inputToBottom:o,inputToTop:a}=n,s="kuc-base-datetime-header-month-1-17-1"===e.tagName.toLowerCase()?360:300,r=e.parentElement.getBoundingClientRect().height;return i.style.maxHeight=s+"px",e.parentElement.style.position="relative",o>=s?(i.style.height=s+"px","bottom"===t?void(i.style.top=r+"px"):void(i.style.bottom=r+"px")):"bottom"===t?(i.style.top=r+"px",void(i.style.height=o-18+"px")):(i.style.height=a-18+"px",i.style.top="auto",void(i.style.bottom=e.parentElement.getBoundingClientRect().height+"px"))}const ii=e=>{var t,i;if(!e.parentElement)return{inputToBottom:0,inputToTop:0,inputToRight:0,inputToLeft:0};const n=null!==(t=e.closest("kuc-base-date-1-17-1"))&&void 0!==t?t:e.closest("kuc-mobile-base-date-1-17-1"),o=(null!==(i=n.getElementsByClassName("kuc-base-date-1-17-1__input")[0])&&void 0!==i?i:n.getElementsByClassName("kuc-mobile-base-date-1-17-1__group")[0]).getBoundingClientRect().width;return{inputToBottom:window.innerHeight-e.parentElement.getBoundingClientRect().bottom,inputToTop:e.parentElement.getBoundingClientRect().top,inputToRight:window.innerWidth-e.parentElement.getBoundingClientRect().left,inputToLeft:e.parentElement.getBoundingClientRect().left+o}},ni={fromAttribute:e=>null===e,toAttribute:e=>e?null:""},oi={fromAttribute:e=>!e||-1===["en","ja","zh","zh-TW"].indexOf(e),toAttribute:e=>{const t=["en","ja","zh","zh-TW"];return-1!==t.indexOf(e)?e:-1!==t.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}},ai=e=>e instanceof HTMLElement?e:ft(e),si=e=>{if(void 0===e||""===e)return"";let t=[];return e.indexOf("-")>0&&(t=e.split("-")),t.length<2?`${e}-01-01`:2===t.length?`${Jt(t[0],4)}-${Jt(t[1])}-01`:t.length>2?`${Jt(t[0],4)}-${Jt(t[1])}-${Jt(t[2])}`:""},ri=e=>{if(5===e.length||""===e)return e;const t=e.indexOf(":"),i=e.substr(0,t),n=e.substr(t+1,5);return`${Jt(i)}:${Jt(n)}`},li={randomUUID:"undefined"!=typeof crypto&&crypto.randomUUID&&crypto.randomUUID.bind(crypto)};var di,ui=new Uint8Array(16);function ci(){if(!di&&!(di="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return di(ui)}for(var hi=[],_i=0;_i<256;++_i)hi.push((_i+256).toString(16).slice(1));const pi=function(e,t,i){if(li.randomUUID&&!t&&!e)return li.randomUUID();var n=(e=e||{}).random||(e.rng||ci)();if(n[6]=15&n[6]|64,n[8]=63&n[8]|128,t){i=i||0;for(var o=0;o<16;++o)t[i+o]=n[o];return t}return function(e,t=0){return(hi[e[t+0]]+hi[e[t+1]]+hi[e[t+2]]+hi[e[t+3]]+"-"+hi[e[t+4]]+hi[e[t+5]]+"-"+hi[e[t+6]]+hi[e[t+7]]+"-"+hi[e[t+8]]+hi[e[t+9]]+"-"+hi[e[t+10]]+hi[e[t+11]]+hi[e[t+12]]+hi[e[t+13]]+hi[e[t+14]]+hi[e[t+15]]).toLowerCase()}(n)};class bi extends Pe{createRenderRoot(){return this}async throwErrorAfterUpdateComplete(e){throw await this.updateComplete,new Error(e)}}const gi=(e,t,i)=>{const n=new CustomEvent(t,{detail:i,bubbles:!0,composed:!0});return e.dispatchEvent(n)},mi=e=>{const t="kuc-style-1-17-1";let i=document.getElementById(t);i||(i=document.createElement("style"),i.id=t,document.head.appendChild(i)),i.appendChild(document.createTextNode(e))},fi=()=>pi();function vi(e){if(!e||"object"!=typeof e)return{};const t={...e};for(const e in t)Object.prototype.hasOwnProperty.call(t,e)&&void 0===t[e]&&delete t[e];return t}function ki(e){return!(""!==e&&void 0!==e&&!/(^(\d{1,4})-(0?[1-9]|1[0-2])-(0?[1-9]|[12][0-9]|3[01])$)|(^(\d{1,4})$)|(^(\d{1,4})-(0?[1-9]|1[0-2])$)/g.test(e))}function yi(e){return!(""!==e&&!/^(2[0-3]|[01]?[0-9]):([0-9]|[0-5][0-9])$/.test(e))}function xi(e,t,i){const n=Math.round(e),o=Nt(t),a=Nt(i);return!isNaN(n)&&n>0&&n<=o-a}function wi(e){const[t,i,n]=e.split("-"),o=new Date(`${e}T00:00:00`),a=o.getFullYear(),s=o.getMonth(),r=o.getDate();return a===Number(t)&&s===Number(i)-1&&r===Number(n)}function $i(e){return"string"==typeof e}function Ci(e,t){return!(!/(^(\d{4})-(0[0-9]|1[0-2])-(0[1-9]|([12][0-9]|3[01]))$)|(^(\d{4})$)|(^(\d{4})-(0[0-9]|1[0-2])$)/g.test(e)||!/(^([01][0-9]|2[0-3])$)|(^([01][0-9]|2[0-3]):([0-5][0-9]))$|(^([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9])$/.test(t))}function Ii(e){return e.length<2||!e.some((t=>e.indexOf(t)!==e.lastIndexOf(t)))}function Ei(e){return!(e<.5||!Si(e))}function Si(e){return"number"==typeof e&&!Number.isNaN(e)}function Ti(e){return Array.isArray(e)}var Ai=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Di;(()=>{if(Di=window.customElements.get("kuc-attachment-1-17-1"),!Di){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.message="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.files=[],this._isDraging=!1,this._dragEnterCounter=0,this._locale=this._getLocale(),this._isFileOrDirectoryDrag=e=>{if(!e.dataTransfer)return!1;if(void 0!==e.dataTransfer.items)for(let t=0;t<e.dataTransfer.items.length;t++)if("file"===e.dataTransfer.items[t].kind.toLowerCase())return!0;if(void 0!==e.dataTransfer.types)for(let t=0;t<e.dataTransfer.types.length;t++)if("files"===e.dataTransfer.types[t].toLowerCase())return!0;return!1},this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!(e.has("files")&&!Ti(this.files)&&(this.throwErrorAfterUpdateComplete(at),1))}willUpdate(e){return e.has("language")&&(this._locale=this._getLocale()),!0}render(){return we`
+      <div class="kuc-attachment-1-17-1__group">
         <label
-          class="kuc-attachment-1-17-0__group__label"
+          class="kuc-attachment-1-17-1__group__label"
           ?hidden="${!this.label}"
           for="${this._GUID}-input"
           @click="${this._handleClickLabel}"
         >
-          <kuc-base-label-1-17-0
+          <kuc-base-label-1-17-1
             .text="${this.label}"
             .requiredIcon="${this.requiredIcon}"
-          ></kuc-base-label-1-17-0>
+          ></kuc-base-label-1-17-1>
         </label>
         <div
-          class="kuc-attachment-1-17-0__group__files ${this.disabled?" kuc-attachment-1-17-0__group__files--disabled":""}"
+          class="kuc-attachment-1-17-1__group__files ${this.disabled?" kuc-attachment-1-17-1__group__files--disabled":""}"
           @dragenter="${this._handleDragEnter}"
           @dragover="${this._handleDragOver}"
           @dragleave="${this._handleDragLeave}"
+          @drop="${this._handleDragDrop}"
         >
           <div
-            class="kuc-attachment-1-17-0__group__files__droppable"
-            @drop="${this._handleDragDrop}"
+            class="kuc-attachment-1-17-1__group__files__droppable"
             ?hidden="${!this._isDraging}"
           >
-          <div class="kuc-attachment-1-17-0__group__files__droppable__text">${this._locale.ATTACHMENT_DRAG_DROP_ZONE}</div>
+          <div class="kuc-attachment-1-17-1__group__files__droppable__text">${this._locale.ATTACHMENT_DRAG_DROP_ZONE}</div>
           </div>
           <ul
-            class="kuc-attachment-1-17-0__group__files__display-area"
-            ?hidden="${this._isDraging}"
+            class="kuc-attachment-1-17-1__group__files__display-area${this._isDraging?" kuc-attachment-1-17-1__group__files__not-droppable--dragenter":""}"
           >
           ${this.files.map(((e,t)=>this._getAttachmentItemTemplate(e,t)))}
           </ul>
-          <div class="kuc-attachment-1-17-0__group__files__browse-button"
-          ?hidden="${this._isDraging||this.disabled}">
-            <span class="kuc-attachment-1-17-0__group__files__browse-button__text">${this._locale.ATTACHMENT_BROWSE}</span>
-            <div class="kuc-attachment-1-17-0__group__files__browse-button__input-container">
-              <input class="kuc-attachment-1-17-0__group__files__browse-button__input-container__input" type="file" multiple 
+          <div class="kuc-attachment-1-17-1__group__files__browse-button${this._isDraging?" kuc-attachment-1-17-1__group__files__not-droppable--dragenter":""}"
+          ?hidden="${this.disabled}">
+            <span class="kuc-attachment-1-17-1__group__files__browse-button__text">${this._locale.ATTACHMENT_BROWSE}</span>
+            <div class="kuc-attachment-1-17-1__group__files__browse-button__input-container">
+              <input class="kuc-attachment-1-17-1__group__files__browse-button__input-container__input" type="file" multiple 
               .id="${this._GUID}-input"
               aria-required="${this.requiredIcon}"
               aria-invalid="${this.error}"
@@ -47,33 +46,33 @@
               @change="${this._handleChangeFiles}"></input>
             </div>
           </div>
-          <p class="kuc-attachment-1-17-0__group__files__browse-message${this.disabled?" kuc-attachment-1-17-0__group__files__browse-message--disabled":""}"
+          <p class="kuc-attachment-1-17-1__group__files__browse-message${this.disabled?" kuc-attachment-1-17-1__group__files__browse-message--disabled":""}"
             ?hidden="${!this.message}"
           >
             ${this.message}
           </p>
         </div>
-        <kuc-base-error-1-17-0
-          class="kuc-attachment-1-17-0__error"
+        <kuc-base-error-1-17-1
+          class="kuc-attachment-1-17-1__error"
           ?hidden="${!this.error}"
           .text="${this.error}"
           .guid="${this._GUID}"
-        ></kuc-base-error-1-17-0>
+        ></kuc-base-error-1-17-1>
       </div>
-    `}_getAttachmentItemTemplate(e,t){return $e`
-        <li class="kuc-attachment-1-17-0__group__files__display-area__item">
+    `}_getAttachmentItemTemplate(e,t){return we`
+        <li class="kuc-attachment-1-17-1__group__files__display-area__item">
           <div
             title="${e.name||""}"
-            class="kuc-attachment-1-17-0__group__files__display-area__item__name"
+            class="kuc-attachment-1-17-1__group__files__display-area__item__name"
           >
             ${e.name||""}
           </div>
           <div
-            class="kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container"
+            class="kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container"
             ?hidden="${this.disabled}"
           >
             <button
-              class="kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container__button"
+              class="kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container__button"
               aria-label="Cancel File"
               data-file-index="${t}"
               @click="${this._handleClickFileRemove}"
@@ -82,11 +81,11 @@
               ${this._getRemoveButtonIcon()}
             </button>
           </div>
-          <span class="kuc-attachment-1-17-0__group__files__display-area__item__size">
+          <span class="kuc-attachment-1-17-1__group__files__display-area__item__size">
             ${this._getFileSize(e.size)}
           </span>
         </li>
-      `}async updated(e){await this.updateComplete,this._updateFileNameMaxWidth()}_updateFileNameMaxWidth(){const e=this._labelEl.getBoundingClientRect().width;this._fileItemsEl.forEach((t=>{t.style.maxWidth=`calc(var(--kuc-attachment-width, ${e<191?191:e}px) - 14px)`}))}_getRemoveButtonIcon(){return Ce`<svg
+      `}async updated(e){await this.updateComplete,this._updateFileNameMaxWidth()}_updateFileNameMaxWidth(){const e=this._labelEl.getBoundingClientRect().width;this._fileItemsEl.forEach((t=>{t.style.maxWidth=`calc(var(--kuc-attachment-width, ${e<191?191:e}px) - 14px)`}))}_getRemoveButtonIcon(){return $e`<svg
         xmlns="http://www.w3.org/2000/svg"
         width="14"
         height="14"
@@ -99,19 +98,19 @@
           d="M5.93933 7.00001L1.96966 3.03034L1.43933 2.50001L2.49999 1.43935L3.03032 1.96968L6.99999 5.93935L10.9697 1.96968L11.5 1.43935L12.5607 2.50001L12.0303 3.03034L8.06065 7.00001L12.0303 10.9697L12.5607 11.5L11.5 12.5607L10.9697 12.0303L6.99999 8.06067L3.03032 12.0303L2.49999 12.5607L1.43933 11.5L1.96966 10.9697L5.93933 7.00001Z"
           fill="#a8a8a8"
         />
-      </svg>`}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_getLocale(){switch(this._getLanguage()){case"en":default:return Qe;case"zh":return tt;case"zh-TW":return it;case"ja":return et}}_handleClickFileRemove(e){const t=e.currentTarget,i=parseInt(t.getAttribute("data-file-index"),10);if(this.files){i===this.files.length-1&&this._inputEl.focus();const e=[...this.files];this.files.splice(i,1);const t={oldFiles:e,files:this.files,type:"remove-file",fileIndex:[i]};gi(this,"change",t),this.requestUpdate(),i<=this.files.length-1&&this._fileRemoveButtons[i].focus()}}_handleClickLabel(e){e.preventDefault()}_handleDragEnter(e){if(!this.disabled&&(this._dragEnterCounter++,1===this._dragEnterCounter&&this._isFileOrDirectoryDrag(e))){e.preventDefault();const t=2,i=1;this._groupFilesEl.style.height=this._groupFilesEl.getBoundingClientRect().height+"px",this._dragTextEl.style.width=this._groupFilesEl.getBoundingClientRect().width-2*i+"px",this._dragTextEl.style.height=this._groupFilesEl.getBoundingClientRect().height-2*(i+t)+"px",this._isDraging=!0}}_handleDragOver(e){this.disabled||(e.stopPropagation(),this._isFileOrDirectoryDrag(e)&&e.preventDefault())}_handleDragDrop(e){this.disabled||(e.preventDefault(),this._handleDragLeave(),this._isFileDrop(e)&&this._addFiles(e))}_isFileDrop(e){var t;if(e.dataTransfer&&e.dataTransfer.items)for(let i=0;i<e.dataTransfer.items.length;i++)if("function"==typeof e.dataTransfer.items[i].webkitGetAsEntry&&(null===(t=e.dataTransfer.items[i].webkitGetAsEntry())||void 0===t?void 0:t.isDirectory))return!1;return!0}_handleDragLeave(){this.disabled||(this._dragEnterCounter--,0===this._dragEnterCounter&&(this._groupFilesEl.style.height="var(--kuc-attachment-height, auto)",this._isDraging=!1))}_handleChangeFiles(e){e.preventDefault(),e.stopPropagation(),this._addFiles(e)}_addFiles(e){if(this.files){let t=e.dataTransfer?e.dataTransfer.files:e.target.files;t=Object.keys(t).map((e=>t[e]));const i=[...this.files],n=t.map(((e,t)=>i.length+t));t.forEach((e=>this.files.push(e)));const o={oldFiles:i,files:this.files,type:"add-file",fileIndex:n};gi(this,"change",o),this.requestUpdate()}this._inputEl.value=""}_getFileSize(e){return"number"==typeof e?this._formatFileSize(e):/^[1-9]\d*$/.test(e)?this._formatFileSize(parseInt(e,10)):"NaN size"}_formatFileSize(e){return e>=Xe?Math.round(e/Xe)+" GB":e>=Ze?Math.round(e/Ze)+" MB":e>=1024?Math.round(e/1024)+" KB":Math.round(e)+" bytes"}}Ai([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Ai([Fe({type:String})],e.prototype,"error",void 0),Ai([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Ai([Fe({type:String})],e.prototype,"label",void 0),Ai([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),Ai([Fe({type:String})],e.prototype,"message",void 0),Ai([Fe({type:Boolean})],e.prototype,"disabled",void 0),Ai([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Ai([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Ai([Fe({type:Array})],e.prototype,"files",void 0),Ai([We()],e.prototype,"_isDraging",void 0),Ai([Ke(".kuc-attachment-1-17-0__group__files")],e.prototype,"_groupFilesEl",void 0),Ai([Ke(".kuc-attachment-1-17-0__group__files__droppable__text")],e.prototype,"_dragTextEl",void 0),Ai([Ke(".kuc-attachment-1-17-0__group__files__browse-button__input-container__input")],e.prototype,"_inputEl",void 0),Ai([Ke(".kuc-attachment-1-17-0__group__label")],e.prototype,"_labelEl",void 0),Ai([Je(".kuc-attachment-1-17-0__group__files__display-area__item__name")],e.prototype,"_fileItemsEl",void 0),Ai([Je(".kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container__button")],e.prototype,"_fileRemoveButtons",void 0),window.customElements.define("kuc-attachment-1-17-0",e),mi('\n  kuc-attachment-1-17-0,\n  kuc-attachment-1-17-0 *,\n  kuc-attachment-1-17-0:lang(en),\n  kuc-attachment-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-attachment-1-17-0:lang(ja),\n  kuc-attachment-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n        sans-serif;\n  }\n  kuc-attachment-1-17-0:lang(zh),\n  kuc-attachment-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", sans-serif;\n  }\n  kuc-attachment-1-17-0:lang(zh-TW),\n  kuc-attachment-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n        Hei,"Heiti SC",sans-serif;\n  }\n  kuc-attachment-1-17-0 {\n    font-size: 14px;\n    display: inline-table;\n    vertical-align: top;\n    width: var(--kuc-attachment-width, 191px);\n    min-width: var(--kuc-attachment-width, 191px);\n  }\n  kuc-attachment-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-0__group {\n    width: 100%;\n    height: auto;\n    box-sizing: border-box;\n    position: relative;\n    display: block;\n  }\n  .kuc-attachment-1-17-0__group__label {\n    display: inline-block;\n    padding: 4px 0 8px 0;\n    color: #333333;\n    white-space: nowrap;\n  }\n  .kuc-attachment-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-0__group__files {\n    border: solid 1px #e3e7e8;\n    background-color: #eeeeee;\n    padding: 16px 4px;\n    display: block;\n    font-size: 14px;\n    overflow: hidden;\n    position: relative;\n    box-sizing: border-box;\n    width: var(--kuc-attachment-width, auto);\n    height: var(--kuc-attachment-height, auto);\n  }\n  .kuc-attachment-1-17-0__group__files--disabled {\n    cursor: not-allowed;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button {\n    border: 1px solid transparent;\n    position: relative;\n    display: inline-block;\n    margin-right: 16px;\n    padding: 8px;\n    text-decoration: none;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button[hidden]{\n    display: none\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button:focus-within {\n    border: 1px solid #3498db;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button:hover\n  .kuc-attachment-1-17-0__group__files__browse-button__text {\n    color: #217dbb;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button__text {\n    color: #3498db;\n    font-size: 14px;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button__input-container {\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    display: inline-block;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-button__input-container__input {\n    cursor: pointer;\n    font-size: 999px;\n    vertical-align: middle;\n    height: 100%;\n    width: 100%;\n    line-height: 1.5;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area {\n    padding-inline-start: 0px;\n    list-style-type: disc;\n    margin-block-start: 0em;\n    margin-block-end: 0em;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item {\n    position: relative;\n    margin-bottom: 8px;\n    height: auto;\n    min-height: 24px;\n    border: 2px solid #f1f4f5;\n    background-color: #f1f4f5;\n    list-style: none;\n    display: flex;\n    align-items: center;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__name {\n    display: inline-block;\n    padding: 3px calc(4.6em + 4px) 3px 26px;\n    width: 100%;\n    max-width: 177px;\n    box-sizing: border-box;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-wrap: normal;\n    font-size: var(--kuc-attachment-item-font-size, 14px);\n    line-height: 1.2;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 12px);\n    left: 0;\n    width: 24px;\n    height: 24px;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container__button {\n    background-color: #f2f4f6;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid transparent;\n    padding: 0px;\n    width:100%;\n    height:100%;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container__button:hover {\n    background: #d8e1e6;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container__button:focus-within {\n    border: 1px solid #3498db;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__remove-button__container__button:focus {\n    outline: none;\n  }\n  .kuc-attachment-1-17-0__group__files__display-area__item__size {\n    display: inline-block;\n    position: absolute;\n    right: 0;\n    color: #888888;\n    padding: 0 3px 0 0;\n    max-width: 4.6em;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-wrap: normal;\n    font-size: var(--kuc-attachment-item-font-size, 14px);\n    line-height: 1.2;\n  }\n  .kuc-attachment-1-17-0__group__files__droppable {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin: auto 0;\n  }\n  .kuc-attachment-1-17-0__group__files__droppable[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-0__group__files__droppable__text {\n    background-color: #e2f2fe;\n    border: dashed 2px #3498db;\n    display: table-cell;\n    vertical-align: middle;\n    text-align: center;\n    color: #3498db;\n    font-size: 14px;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-message {\n    display: inline-block;\n    color: var(--kuc-attachment-message-color, #888888);\n    font-size: var(--kuc-attachment-message-font-size, 14px);\n    margin: 3px 0 0;\n    word-break: break-all;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-message--disabled {\n    color: #888888;\n  }\n  .kuc-attachment-1-17-0__group__files__browse-message[hidden] {\n    display: none;\n  }\n'),Di=e}})();var Vi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Li;(()=>{if(Li=window.customElements.get("kuc-button-1-17-0"),!Li){class e extends bi{constructor(e){super(),this.className="",this.id="",this.text="",this.type="normal",this.content="",this.disabled=!1,this.visible=!0;const t=vi(e);Object.assign(this,t)}_handleClickButton(e){e.stopPropagation(),gi(this,"click")}_getButtonColorType(){return"normal"===this.type||"submit"===this.type||"alert"===this.type?this.type:"normal"}render(){return $e`
+      </svg>`}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_getLocale(){switch(this._getLanguage()){case"en":default:return Xe;case"zh":return et;case"zh-TW":return tt;case"ja":return Qe}}_handleClickFileRemove(e){const t=e.currentTarget,i=parseInt(t.getAttribute("data-file-index"),10);if(this.files){i===this.files.length-1&&this._inputEl.focus();const e=[...this.files];this.files.splice(i,1);const t={oldFiles:e,files:this.files,type:"remove-file",fileIndex:[i]};gi(this,"change",t),this.requestUpdate(),i<=this.files.length-1&&this._fileRemoveButtons[i].focus()}}_handleClickLabel(e){e.preventDefault()}_handleDragEnter(e){if(!this.disabled&&(this._dragEnterCounter++,1===this._dragEnterCounter&&this._isFileOrDirectoryDrag(e))){e.preventDefault();const t=2,i=1;this._groupFilesEl.style.height=this._groupFilesEl.getBoundingClientRect().height+"px",this._dragTextEl.style.width=this._groupFilesEl.getBoundingClientRect().width-2*i+"px",this._dragTextEl.style.height=this._groupFilesEl.getBoundingClientRect().height-2*(i+t)+"px",this._isDraging=!0}}_handleDragOver(e){this.disabled||(e.stopPropagation(),this._isFileOrDirectoryDrag(e)&&e.preventDefault())}_handleDragDrop(e){!this.disabled&&this._isDraging&&(e.preventDefault(),this._handleDragLeave(),this._isFileDrop(e)&&this._addFiles(e))}_isFileDrop(e){var t;if(e.dataTransfer&&e.dataTransfer.items)for(let i=0;i<e.dataTransfer.items.length;i++)if("function"==typeof e.dataTransfer.items[i].webkitGetAsEntry&&(null===(t=e.dataTransfer.items[i].webkitGetAsEntry())||void 0===t?void 0:t.isDirectory))return!1;return!0}_handleDragLeave(){this.disabled||(this._dragEnterCounter--,0===this._dragEnterCounter&&(this._groupFilesEl.style.height="var(--kuc-attachment-height, auto)",this._isDraging=!1))}_handleChangeFiles(e){e.preventDefault(),e.stopPropagation(),this._addFiles(e)}_addFiles(e){if(this.files){let t=e.dataTransfer?e.dataTransfer.files:e.target.files;t=Object.keys(t).map((e=>t[e]));const i=[...this.files],n=t.map(((e,t)=>i.length+t));t.forEach((e=>this.files.push(e)));const o={oldFiles:i,files:this.files,type:"add-file",fileIndex:n};gi(this,"change",o),this.requestUpdate()}this._inputEl.value=""}_getFileSize(e){return"number"==typeof e?this._formatFileSize(e):/^[1-9]\d*$/.test(e)?this._formatFileSize(parseInt(e,10)):"NaN size"}_formatFileSize(e){return e>=Ze?Math.round(e/Ze)+" GB":e>=Je?Math.round(e/Je)+" MB":e>=1024?Math.round(e/1024)+" KB":Math.round(e)+" bytes"}}Ai([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Ai([Ge({type:String})],e.prototype,"error",void 0),Ai([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Ai([Ge({type:String})],e.prototype,"label",void 0),Ai([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),Ai([Ge({type:String})],e.prototype,"message",void 0),Ai([Ge({type:Boolean})],e.prototype,"disabled",void 0),Ai([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Ai([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Ai([Ge({type:Array})],e.prototype,"files",void 0),Ai([Fe()],e.prototype,"_isDraging",void 0),Ai([qe(".kuc-attachment-1-17-1__group__files")],e.prototype,"_groupFilesEl",void 0),Ai([qe(".kuc-attachment-1-17-1__group__files__droppable__text")],e.prototype,"_dragTextEl",void 0),Ai([qe(".kuc-attachment-1-17-1__group__files__browse-button__input-container__input")],e.prototype,"_inputEl",void 0),Ai([qe(".kuc-attachment-1-17-1__group__label")],e.prototype,"_labelEl",void 0),Ai([Ye(".kuc-attachment-1-17-1__group__files__display-area__item__name")],e.prototype,"_fileItemsEl",void 0),Ai([Ye(".kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container__button")],e.prototype,"_fileRemoveButtons",void 0),window.customElements.define("kuc-attachment-1-17-1",e),mi('\n  kuc-attachment-1-17-1,\n  kuc-attachment-1-17-1 *,\n  kuc-attachment-1-17-1:lang(en),\n  kuc-attachment-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-attachment-1-17-1:lang(ja),\n  kuc-attachment-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n        sans-serif;\n  }\n  kuc-attachment-1-17-1:lang(zh),\n  kuc-attachment-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", sans-serif;\n  }\n  kuc-attachment-1-17-1:lang(zh-TW),\n  kuc-attachment-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n        Hei,"Heiti SC",sans-serif;\n  }\n  kuc-attachment-1-17-1 {\n    font-size: 14px;\n    display: inline-table;\n    vertical-align: top;\n    width: var(--kuc-attachment-width, 191px);\n    min-width: var(--kuc-attachment-width, 191px);\n  }\n  kuc-attachment-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-1__group {\n    width: 100%;\n    height: auto;\n    box-sizing: border-box;\n    position: relative;\n    display: block;\n  }\n  .kuc-attachment-1-17-1__group__label {\n    display: inline-block;\n    padding: 4px 0 8px 0;\n    color: #333333;\n    white-space: nowrap;\n  }\n  .kuc-attachment-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-1__group__files {\n    border: solid 1px #e3e7e8;\n    background-color: #eeeeee;\n    padding: 16px 4px;\n    display: block;\n    font-size: 14px;\n    overflow: hidden;\n    position: relative;\n    box-sizing: border-box;\n    width: var(--kuc-attachment-width, auto);\n    height: var(--kuc-attachment-height, auto);\n  }\n  .kuc-attachment-1-17-1__group__files--disabled {\n    cursor: not-allowed;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button {\n    border: 1px solid transparent;\n    position: relative;\n    display: inline-block;\n    margin-right: 16px;\n    padding: 8px;\n    text-decoration: none;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button[hidden]{\n    display: none;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button:focus-within {\n    border: 1px solid #3498db;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button:hover\n  .kuc-attachment-1-17-1__group__files__browse-button__text {\n    color: #217dbb;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button__text {\n    color: #3498db;\n    font-size: 14px;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button__input-container {\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    overflow: hidden;\n    display: inline-block;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-button__input-container__input {\n    cursor: pointer;\n    font-size: 999px;\n    vertical-align: middle;\n    height: 100%;\n    width: 100%;\n    line-height: 1.5;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area {\n    padding-inline-start: 0px;\n    list-style-type: disc;\n    margin-block-start: 0em;\n    margin-block-end: 0em;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item {\n    position: relative;\n    margin-bottom: 8px;\n    height: auto;\n    min-height: 24px;\n    border: 2px solid #f1f4f5;\n    background-color: #f1f4f5;\n    list-style: none;\n    display: flex;\n    align-items: center;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__name {\n    display: inline-block;\n    padding: 3px calc(4.6em + 4px) 3px 26px;\n    width: 100%;\n    max-width: 177px;\n    box-sizing: border-box;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-wrap: normal;\n    font-size: var(--kuc-attachment-item-font-size, 14px);\n    line-height: 1.2;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container {\n    display: inline-block;\n    position: absolute;\n    top: calc(50% - 12px);\n    left: 0;\n    width: 24px;\n    height: 24px;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container__button {\n    background-color: #f2f4f6;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid transparent;\n    padding: 0px;\n    width:100%;\n    height:100%;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container__button:hover {\n    background: #d8e1e6;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container__button:focus-within {\n    border: 1px solid #3498db;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__remove-button__container__button:focus {\n    outline: none;\n  }\n  .kuc-attachment-1-17-1__group__files__display-area__item__size {\n    display: inline-block;\n    position: absolute;\n    right: 0;\n    color: #888888;\n    padding: 0 3px 0 0;\n    max-width: 4.6em;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-wrap: normal;\n    font-size: var(--kuc-attachment-item-font-size, 14px);\n    line-height: 1.2;\n  }\n  .kuc-attachment-1-17-1__group__files__droppable {\n    display: block;\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin: auto 0;\n  }\n  .kuc-attachment-1-17-1__group__files__droppable[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-1__group__files__droppable__text {\n    background-color: #e2f2fe;\n    border: dashed 2px #3498db;\n    display: table-cell;\n    vertical-align: middle;\n    text-align: center;\n    color: #3498db;\n    font-size: 14px;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-message {\n    display: inline-block;\n    color: var(--kuc-attachment-message-color, #888888);\n    font-size: var(--kuc-attachment-message-font-size, 14px);\n    margin: 3px 0 0;\n    word-break: break-all;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-message--disabled {\n    color: #888888;\n  }\n  .kuc-attachment-1-17-1__group__files__browse-message[hidden] {\n    display: none;\n  }\n  .kuc-attachment-1-17-1__group__files__not-droppable--dragenter {\n    visibility: hidden;\n  }\n'),Di=e}})();var Vi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Li;(()=>{if(Li=window.customElements.get("kuc-button-1-17-1"),!Li){class e extends bi{constructor(e){super(),this.className="",this.id="",this.text="",this.type="normal",this.content="",this.disabled=!1,this.visible=!0;const t=vi(e);Object.assign(this,t)}_handleClickButton(e){e.stopPropagation(),gi(this,"click")}_getButtonColorType(){return"normal"===this.type||"submit"===this.type||"alert"===this.type?this.type:"normal"}render(){return we`
         <button
           type="button"
-          class="kuc-button-1-17-0__button kuc-button-1-17-0__button--${this._getButtonColorType()}"
+          class="kuc-button-1-17-1__button kuc-button-1-17-1__button--${this._getButtonColorType()}"
           ?disabled="${this.disabled}"
           @click="${this._handleClickButton}"
         >
-          ${this.content?si(this.content):this.text}
+          ${this.content?ai(this.content):this.text}
         </button>
-      `}}Vi([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Vi([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Vi([Fe({type:String})],e.prototype,"text",void 0),Vi([Fe({type:String})],e.prototype,"type",void 0),Vi([Fe()],e.prototype,"content",void 0),Vi([Fe({type:Boolean})],e.prototype,"disabled",void 0),Vi([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),window.customElements.define("kuc-button-1-17-0",e),mi('\n  kuc-button-1-17-0,\n  kuc-button-1-17-0 *,\n  kuc-button-1-17-0:lang(en),\n  kuc-button-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-button-1-17-0:lang(ja),\n  kuc-button-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;\n  }\n  kuc-button-1-17-0:lang(zh),\n  kuc-button-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti, Hei,\n      "Heiti SC", sans-serif;\n  }\n  kuc-button-1-17-0:lang(zh-TW),\n  kuc-button-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-button-1-17-0 {\n    display: inline-block;\n    vertical-align: top;\n  }\n  kuc-button-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-button-1-17-0__button {\n    display: grid;\n    align-items: center;\n    align-content: center;\n    font-size: var(--kuc-button-font-size, 16px);\n    width: var(--kuc-button-width, "auto");\n    height: var(--kuc-button-height, 48px);\n    min-width: var(--kuc-button-width, 163px);\n    padding: 0px 16px;\n    user-select: none;\n    white-space: nowrap;\n  }\n  .kuc-button-1-17-0__button--normal {\n    background-color: var(--kuc-button-background-color, #f7f9fa);\n    color: var(--kuc-button-text-color, #3498db);\n    border: 1px solid #e3e7e8;\n  }\n  .kuc-button-1-17-0__button--normal:hover,\n  .kuc-button-1-17-0__button--normal:focus-visible,\n  .kuc-button-1-17-0__button--normal:active {\n    cursor: pointer;\n  }\n  .kuc-button-1-17-0__button--normal:hover {\n    background-color: var(--kuc-button-background-color-hover, #c8d6dd);\n  }\n  .kuc-button-1-17-0__button--normal:focus-visible {\n    background-color: var(--kuc-button-background-color-focus, #c8d6dd);\n  }\n  .kuc-button-1-17-0__button--normal:active {\n    background-color: var(--kuc-button-background-color-active, #c8d6dd);\n  }\n  .kuc-button-1-17-0__button--submit {\n    background-color: var(--kuc-button-background-color, #3498db);\n    color: var(--kuc-button-text-color, #ffffff);\n    border: 1px solid #e3e7e8;\n  }\n  .kuc-button-1-17-0__button--submit:hover,\n  .kuc-button-1-17-0__button--submit:focus-visible,\n  .kuc-button-1-17-0__button--submit:active {\n    cursor: pointer;\n  }\n  .kuc-button-1-17-0__button--submit:hover {\n    background-color: var(--kuc-button-background-color-hover, #1d6fa5);\n  }\n  .kuc-button-1-17-0__button--submit:focus-visible {\n    background-color: var(--kuc-button-background-color-focus, #1d6fa5);\n  }\n  .kuc-button-1-17-0__button--submit:active {\n    background-color: var(--kuc-button-background-color-active, #1d6fa5);\n  }\n  .kuc-button-1-17-0__button--alert {\n    background-color: var(--kuc-button-background-color, #e74c3c);\n    color: var(--kuc-button-text-color, #ffffff);\n    border: 1px solid #e3e7e8;\n  }\n  .kuc-button-1-17-0__button--alert:hover,\n  .kuc-button-1-17-0__button--alert:focus-visible,\n  .kuc-button-1-17-0__button--alert:active {\n    cursor: pointer;\n  }\n  .kuc-button-1-17-0__button--alert:hover {\n    background-color: var(--kuc-button-background-color-hover, #bf2718);\n  }\n  .kuc-button-1-17-0__button--alert:focus-visible {\n    background-color: var(--kuc-button-background-color-focus, #bf2718);\n  }\n  .kuc-button-1-17-0__button--alert:active {\n    background-color: var(--kuc-button-background-color-active, #bf2718);\n  }\n  .kuc-button-1-17-0__button:disabled {\n    background-color: #d4d7d7;\n    border: 1px solid #e3e7e8;\n    color: #888888;\n    cursor: not-allowed;\n  }\n  .kuc-button-1-17-0__button--normal:focus-visible,\n  .kuc-button-1-17-0__button--submit:focus-visible,\n  .kuc-button-1-17-0__button--alert:focus-visible {\n    outline: 1px solid #3498db;\n  }\n'),Li=e}})();var Hi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Mi extends bi{constructor(){super(...arguments),this.ariaLive="",this.guid="",this.text=""}render(){return $e`
-      ${this.ariaLive&&""!==this.ariaLive?$e`
+      `}}Vi([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Vi([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Vi([Ge({type:String})],e.prototype,"text",void 0),Vi([Ge({type:String})],e.prototype,"type",void 0),Vi([Ge()],e.prototype,"content",void 0),Vi([Ge({type:Boolean})],e.prototype,"disabled",void 0),Vi([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),window.customElements.define("kuc-button-1-17-1",e),mi('\n  kuc-button-1-17-1,\n  kuc-button-1-17-1 *,\n  kuc-button-1-17-1:lang(en),\n  kuc-button-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-button-1-17-1:lang(ja),\n  kuc-button-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;\n  }\n  kuc-button-1-17-1:lang(zh),\n  kuc-button-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti, Hei,\n      "Heiti SC", sans-serif;\n  }\n  kuc-button-1-17-1:lang(zh-TW),\n  kuc-button-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-button-1-17-1 {\n    display: inline-block;\n    vertical-align: top;\n  }\n  kuc-button-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-button-1-17-1__button {\n    display: grid;\n    align-items: center;\n    align-content: center;\n    font-size: var(--kuc-button-font-size, 16px);\n    width: var(--kuc-button-width, "auto");\n    height: var(--kuc-button-height, 48px);\n    min-width: var(--kuc-button-width, 163px);\n    padding: 0px 16px;\n    user-select: none;\n    white-space: nowrap;\n  }\n  .kuc-button-1-17-1__button--normal {\n    background-color: var(--kuc-button-background-color, #f7f9fa);\n    color: var(--kuc-button-text-color, #3498db);\n    border: 1px solid #e3e7e8;\n  }\n  .kuc-button-1-17-1__button--normal:hover,\n  .kuc-button-1-17-1__button--normal:focus-visible,\n  .kuc-button-1-17-1__button--normal:active {\n    cursor: pointer;\n  }\n  .kuc-button-1-17-1__button--normal:hover {\n    background-color: var(--kuc-button-background-color-hover, #c8d6dd);\n  }\n  .kuc-button-1-17-1__button--normal:focus-visible {\n    background-color: var(--kuc-button-background-color-focus, #c8d6dd);\n  }\n  .kuc-button-1-17-1__button--normal:active {\n    background-color: var(--kuc-button-background-color-active, #c8d6dd);\n  }\n  .kuc-button-1-17-1__button--submit {\n    background-color: var(--kuc-button-background-color, #3498db);\n    color: var(--kuc-button-text-color, #ffffff);\n    border: 1px solid #e3e7e8;\n  }\n  .kuc-button-1-17-1__button--submit:hover,\n  .kuc-button-1-17-1__button--submit:focus-visible,\n  .kuc-button-1-17-1__button--submit:active {\n    cursor: pointer;\n  }\n  .kuc-button-1-17-1__button--submit:hover {\n    background-color: var(--kuc-button-background-color-hover, #1d6fa5);\n  }\n  .kuc-button-1-17-1__button--submit:focus-visible {\n    background-color: var(--kuc-button-background-color-focus, #1d6fa5);\n  }\n  .kuc-button-1-17-1__button--submit:active {\n    background-color: var(--kuc-button-background-color-active, #1d6fa5);\n  }\n  .kuc-button-1-17-1__button--alert {\n    background-color: var(--kuc-button-background-color, #e74c3c);\n    color: var(--kuc-button-text-color, #ffffff);\n    border: 1px solid #e3e7e8;\n  }\n  .kuc-button-1-17-1__button--alert:hover,\n  .kuc-button-1-17-1__button--alert:focus-visible,\n  .kuc-button-1-17-1__button--alert:active {\n    cursor: pointer;\n  }\n  .kuc-button-1-17-1__button--alert:hover {\n    background-color: var(--kuc-button-background-color-hover, #bf2718);\n  }\n  .kuc-button-1-17-1__button--alert:focus-visible {\n    background-color: var(--kuc-button-background-color-focus, #bf2718);\n  }\n  .kuc-button-1-17-1__button--alert:active {\n    background-color: var(--kuc-button-background-color-active, #bf2718);\n  }\n  .kuc-button-1-17-1__button:disabled {\n    background-color: #d4d7d7;\n    border: 1px solid #e3e7e8;\n    color: #888888;\n    cursor: not-allowed;\n  }\n  .kuc-button-1-17-1__button--normal:focus-visible,\n  .kuc-button-1-17-1__button--submit:focus-visible,\n  .kuc-button-1-17-1__button--alert:focus-visible {\n    outline: 1px solid #3498db;\n  }\n'),Li=e}})();var Hi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Mi extends bi{constructor(){super(...arguments),this.ariaLive="",this.guid="",this.text=""}render(){return we`
+      ${this.ariaLive&&""!==this.ariaLive?we`
             <div
-              class="kuc-base-error-1-17-0__error"
+              class="kuc-base-error-1-17-1__error"
               .id="${this.guid}-error"
               role="alert"
               aria-live="${this.ariaLive}"
@@ -119,9 +118,9 @@
             >
               ${this.text}
             </div>
-          `:$e`
+          `:we`
             <div
-              class="kuc-base-error-1-17-0__error"
+              class="kuc-base-error-1-17-1__error"
               .id="${this.guid}-error"
               role="alert"
               ?hidden="${!this.text}"
@@ -129,20 +128,20 @@
               ${this.text}
             </div>
           `}
-    `}}Hi([Fe({type:String})],Mi.prototype,"ariaLive",void 0),Hi([Fe({type:String})],Mi.prototype,"guid",void 0),Hi([Fe({type:String})],Mi.prototype,"text",void 0),window.customElements.get("kuc-base-error-1-17-0")||(mi('\n  kuc-base-error-1-17-0,\n  kuc-base-error-1-17-0 *,\n  kuc-base-error-1-17-0:lang(en),\n  kuc-base-error-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-base-error-1-17-0:lang(ja),\n  kuc-base-error-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-base-error-1-17-0:lang(zh),\n  kuc-base-error-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-base-error-1-17-0:lang(zh-TW),\n  kuc-base-error-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-base-error-1-17-0 {\n    width: 100%;\n    font-size: 14px;\n    display: inline-table;\n    vertical-align: top;\n  }\n  kuc-base-error-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-base-error-1-17-0__error {\n    line-height: 1.5;\n    padding: 4px 18px;\n    box-sizing: border-box;\n    background-color: #e74c3c;\n    color: #ffffff;\n    margin: 8px 0px;\n    word-break: break-all;\n    white-space: normal;\n  }\n  .kuc-base-error-1-17-0__error[hidden] {\n    display: none;\n  }\n'),window.customElements.define("kuc-base-error-1-17-0",Mi));var Bi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Oi extends bi{constructor(){super(...arguments),this.requiredIcon=!1,this.guid="",this.text=""}render(){return $e`
+    `}}Hi([Ge({type:String})],Mi.prototype,"ariaLive",void 0),Hi([Ge({type:String})],Mi.prototype,"guid",void 0),Hi([Ge({type:String})],Mi.prototype,"text",void 0),window.customElements.get("kuc-base-error-1-17-1")||(mi('\n  kuc-base-error-1-17-1,\n  kuc-base-error-1-17-1 *,\n  kuc-base-error-1-17-1:lang(en),\n  kuc-base-error-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-base-error-1-17-1:lang(ja),\n  kuc-base-error-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-base-error-1-17-1:lang(zh),\n  kuc-base-error-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-base-error-1-17-1:lang(zh-TW),\n  kuc-base-error-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-base-error-1-17-1 {\n    width: 100%;\n    font-size: 14px;\n    display: inline-table;\n    vertical-align: top;\n  }\n  kuc-base-error-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-base-error-1-17-1__error {\n    line-height: 1.5;\n    padding: 4px 18px;\n    box-sizing: border-box;\n    background-color: #e74c3c;\n    color: #ffffff;\n    margin: 8px 0px;\n    word-break: break-all;\n    white-space: normal;\n  }\n  .kuc-base-error-1-17-1__error[hidden] {\n    display: none;\n  }\n'),window.customElements.define("kuc-base-error-1-17-1",Mi));var Bi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Oi extends bi{constructor(){super(...arguments),this.requiredIcon=!1,this.guid="",this.text=""}render(){return we`
       ${this._getTextTemplate()}
       <span
-        class="kuc-base-label-1-17-0__required-icon"
+        class="kuc-base-label-1-17-1__required-icon"
         ?hidden="${!this.requiredIcon}"
         >*</span
       >
-    `}_getTextTemplate(){return this.guid&&""!==this.guid?$e`
-          <span class="kuc-base-label-1-17-0__text" .id="${this.guid}-group"
+    `}_getTextTemplate(){return this.guid&&""!==this.guid?we`
+          <span class="kuc-base-label-1-17-1__text" .id="${this.guid}-group"
             >${this.text}</span
           >
-        `:$e` <span class="kuc-base-label-1-17-0__text">${this.text}</span> `}}Bi([Fe({type:Boolean})],Oi.prototype,"requiredIcon",void 0),Bi([Fe({type:String})],Oi.prototype,"guid",void 0),Bi([Fe({type:String})],Oi.prototype,"text",void 0),window.customElements.get("kuc-base-label-1-17-0")||(mi('\n  kuc-base-label-1-17-0,\n  kuc-base-label-1-17-0 *,\n  kuc-base-label-1-17-0:lang(en),\n  kuc-base-label-1-17-0:lang(en) * {\n      font-family: sans-serif;\n  }\n  kuc-base-label-1-17-0:lang(ja),\n  kuc-base-label-1-17-0:lang(ja) * {\n      font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-base-label-1-17-0:lang(zh),\n  kuc-base-label-1-17-0:lang(zh) * {\n      font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-base-label-1-17-0:lang(zh-TW),\n  kuc-base-label-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-base-label-1-17-0 {\n      font-size: 14px;\n      color: #333333;\n      display: inline-table;\n      vertical-align: top;\n  }\n  kuc-base-label-1-17-0[hidden] {\n      display: none;\n  }\n  .kuc-base-label-1-17-0__required-icon {\n      font-size: 20px;\n      vertical-align: -3px;\n      color: #e74c3c;\n      margin-left: 4px;\n      line-height: 1;\n  }\n  .kuc-base-label-1-17-0__required-icon[hidden] {\n      display: none;\n  }\n'),window.customElements.define("kuc-base-label-1-17-0",Oi));var Ni=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Ui;(()=>{if(Ui=window.customElements.get("kuc-checkbox-1-17-0"),!Ui){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.itemLayout="horizontal",this.label="",this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}_getNewValueMapping(e,t){const i=parseInt(t,10),n=Object.keys(this._valueMapping),o={...this._valueMapping};return n.indexOf(t)>-1?(delete o[i],o):(o[i]=e,o)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.dataset.index||"0",n=t.value,o=this.value?[...this.value]:this.value,a=this._getNewValueMapping(n,i),s=this.items.map((e=>e.value)),r=Object.values(a).filter((e=>s.indexOf(e)>-1));if(r===o)return;const l=Object.keys(a).map((e=>parseInt(e,10)));this.value=r,this.selectedIndex=l,gi(this,"change",{oldValue:o,value:r})}_handleFocusInput(e){e.target.parentNode.setAttribute("focused","")}_handleBlurInput(e){e.target.parentNode.removeAttribute("focused")}_getCheckboxIconSvgTemplate(e,t){return Ce`
+        `:we` <span class="kuc-base-label-1-17-1__text">${this.text}</span> `}}Bi([Ge({type:Boolean})],Oi.prototype,"requiredIcon",void 0),Bi([Ge({type:String})],Oi.prototype,"guid",void 0),Bi([Ge({type:String})],Oi.prototype,"text",void 0),window.customElements.get("kuc-base-label-1-17-1")||(mi('\n  kuc-base-label-1-17-1,\n  kuc-base-label-1-17-1 *,\n  kuc-base-label-1-17-1:lang(en),\n  kuc-base-label-1-17-1:lang(en) * {\n      font-family: sans-serif;\n  }\n  kuc-base-label-1-17-1:lang(ja),\n  kuc-base-label-1-17-1:lang(ja) * {\n      font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-base-label-1-17-1:lang(zh),\n  kuc-base-label-1-17-1:lang(zh) * {\n      font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-base-label-1-17-1:lang(zh-TW),\n  kuc-base-label-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-base-label-1-17-1 {\n      font-size: 14px;\n      color: #333333;\n      display: inline-table;\n      vertical-align: top;\n  }\n  kuc-base-label-1-17-1[hidden] {\n      display: none;\n  }\n  .kuc-base-label-1-17-1__required-icon {\n      font-size: 20px;\n      vertical-align: -3px;\n      color: #e74c3c;\n      margin-left: 4px;\n      line-height: 1;\n  }\n  .kuc-base-label-1-17-1__required-icon[hidden] {\n      display: none;\n  }\n'),window.customElements.define("kuc-base-label-1-17-1",Oi));var Ni=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Ui;(()=>{if(Ui=window.customElements.get("kuc-checkbox-1-17-1"),!Ui){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.itemLayout="horizontal",this.label="",this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(st),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(lt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}_getNewValueMapping(e,t){const i=parseInt(t,10),n=Object.keys(this._valueMapping),o={...this._valueMapping};return n.indexOf(t)>-1?(delete o[i],o):(o[i]=e,o)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.dataset.index||"0",n=t.value,o=this.value?[...this.value]:this.value,a=this._getNewValueMapping(n,i),s=this.items.map((e=>e.value)),r=Object.values(a).filter((e=>s.indexOf(e)>-1));if(r===o)return;const l=Object.keys(a).map((e=>parseInt(e,10)));this.value=r,this.selectedIndex=l,gi(this,"change",{oldValue:o,value:r})}_handleFocusInput(e){e.target.parentNode.setAttribute("focused","")}_handleBlurInput(e){e.target.parentNode.removeAttribute("focused")}_getCheckboxIconSvgTemplate(e,t){return $e`
     <svg
-      class="kuc-checkbox-1-17-0__group__select-menu__item__label__icon"
+      class="kuc-checkbox-1-17-1__group__select-menu__item__label__icon"
       width="21"
       height="21"
       viewBox="0 0 21 21"
@@ -158,15 +157,15 @@
         fill="white"
         stroke="${this._getSVGStrokeValue(e,t)}"
         stroke-width="2"/>
-      ${t?Ce`<path
+      ${t?$e`<path
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M5 11L6.5 9L9.5 11.5L14.5 6L16 7.5L9.5 14.5L5 11Z"
             fill="${e?"#d8d8d8":"#3498db"}"/>`:""}
     </svg>
-  `}_getSVGStrokeValue(e,t){return e?"#d8d8d8":t?"#3498db":"#d8d8d8"}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t),n=e.disabled||this.disabled;return $e`
+  `}_getSVGStrokeValue(e,t){return e?"#d8d8d8":t?"#3498db":"#d8d8d8"}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t),n=e.disabled||this.disabled;return we`
         <div
-          class="kuc-checkbox-1-17-0__group__select-menu__item"
+          class="kuc-checkbox-1-17-1__group__select-menu__item"
           itemLayout="${this.itemLayout}"
         >
           <input
@@ -175,7 +174,7 @@
             aria-required="${this.requiredIcon}"
             data-index="${t}"
             id="${this._GUID}-item-${t}"
-            class="kuc-checkbox-1-17-0__group__select-menu__item__input"
+            class="kuc-checkbox-1-17-1__group__select-menu__item__input"
             name="${this._GUID}-group"
             value="${void 0!==e.value?e.value:""}"
             ?disabled="${n}"
@@ -185,52 +184,52 @@
           />
           <label
             for="${this._GUID}-item-${t}"
-            class="kuc-checkbox-1-17-0__group__select-menu__item__label"
+            class="kuc-checkbox-1-17-1__group__select-menu__item__label"
             >${this._getCheckboxIconSvgTemplate(n,i)}${void 0===e.label?e.value:e.label}
           </label>
         </div>
-      `}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}render(){return $e`
+      `}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}render(){return we`
         <div
-          class="kuc-checkbox-1-17-0__group"
+          class="kuc-checkbox-1-17-1__group"
           role="group"
           aria-labelledby="${this._GUID}-group"
         >
-          <div class="kuc-checkbox-1-17-0__group__label" ?hidden="${!this.label}">
-            <kuc-base-label-1-17-0
+          <div class="kuc-checkbox-1-17-1__group__label" ?hidden="${!this.label}">
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .guid="${this._GUID}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </div>
           <div
-            class="kuc-checkbox-1-17-0__group__select-menu"
+            class="kuc-checkbox-1-17-1__group__select-menu"
             ?borderVisible="${this.borderVisible}"
             itemLayout="${this.itemLayout}"
           >
             ${this.items.map(((e,t)=>this._getItemTemplate(e,t)))}
           </div>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
             ariaLive="assertive"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}updated(){this._inputEls.forEach((e=>{e.checked=this.value.indexOf(e.value)>-1}))}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}}Ni([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Ni([Fe({type:String})],e.prototype,"error",void 0),Ni([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Ni([Fe({type:String})],e.prototype,"itemLayout",void 0),Ni([Fe({type:String})],e.prototype,"label",void 0),Ni([Fe({type:Boolean})],e.prototype,"borderVisible",void 0),Ni([Fe({type:Boolean})],e.prototype,"disabled",void 0),Ni([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Ni([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Ni([Fe({type:Array})],e.prototype,"items",void 0),Ni([Fe({type:Array})],e.prototype,"selectedIndex",void 0),Ni([Fe({type:Array})],e.prototype,"value",void 0),Ni([Je(".kuc-checkbox-1-17-0__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),Ni([We()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-checkbox-1-17-0",e),mi('\n  kuc-checkbox-1-17-0,\n  kuc-checkbox-1-17-0 *,\n  kuc-checkbox-1-17-0:lang(en),\n  kuc-checkbox-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-checkbox-1-17-0:lang(ja),\n  kuc-checkbox-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-checkbox-1-17-0:lang(zh),\n  kuc-checkbox-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-checkbox-1-17-0:lang(zh-TW),\n  kuc-checkbox-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-checkbox-1-17-0 {\n    font-size: 14px;\n    color: #333333;\n    display: inline-table;\n    vertical-align: top;\n    width: var(--kuc-checkbox-menu-width, 239px);\n    min-width: var(--kuc-checkbox-menu-width, 239px);\n    line-height: 1.5;\n  }\n  kuc-checkbox-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-checkbox-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    margin: 0px;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu {\n    white-space: nowrap;\n    width: var(--kuc-checkbox-menu-width, auto);\n    height: var(--kuc-checkbox-menu-height, auto);\n    color: var(--kuc-checkbox-menu-color, #333333);\n    font-size: var(--kuc-checkbox-menu-font-size, 14px);\n    display: flex;\n    align-items: flex-start;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu[itemLayout="vertical"] {\n    display: block;\n  }\n  .kuc-checkbox-1-17-0__group__label {\n    display: inline-block;\n    padding: 4px 0 8px 0;\n    white-space: nowrap;\n  }\n  .kuc-checkbox-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu[borderVisible] {\n    border-color: #e3e7e8;\n    border-width: 1px;\n    border-style: solid;\n    padding: 4px 0 0 4px;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item {\n    margin-bottom: 4px;\n    margin-right: 16px;\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    display: flex;\n    align-items: center;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item[focused] {\n    border: 1px solid #3498db;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item__input:hover\n    + .kuc-checkbox-1-17-0__group__select-menu__item__label {\n    color: var(--kuc-checkbox-menu-color-hover, #666666);\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item__label__icon {\n    position: absolute;\n    left: -30px;\n    box-sizing: border-box;\n    width: 21px;\n    height: 21px;\n    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;\n    content: "";\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item__input[disabled]\n    + .kuc-checkbox-1-17-0__group__select-menu__item__label {\n    color: #888888;\n    cursor: not-allowed;\n  }\n  .kuc-checkbox-1-17-0__group__select-menu__item__label {\n    cursor: pointer;\n    position: relative;\n    margin-left: 32px;\n    display: flex;\n    align-items: center;\n    vertical-align: middle;\n    white-space: nowrap;\n    min-height: 24px;\n    line-height: 1.2;\n  }'),Ui=e}})();var Pi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let zi;(()=>{if(zi=window.customElements.get("kuc-combobox-1-17-0"),!zi){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._selectorVisible=!1,this._searchText="",this._DISABLED_CLASS="kuc-combobox-1-17-0__group__select-menu__item--disabled",this._query="",this._matchingItems=[],this._GUID=fi();const t=vi(e);this._handleClickDocument=this._handleClickDocument.bind(this),Object.assign(this,t)}shouldUpdate(e){if(e.has("items")){if(!Ti(this.items))return this.throwErrorAfterUpdateComplete(nt),!1;if(!Ii(this.items.map((e=>e.value))))return this.throwErrorAfterUpdateComplete(ot),!1}return!(e.has("value")&&!$i(this.value)&&(this.throwErrorAfterUpdateComplete(lt),1))}willUpdate(e){e.has("value")&&(this._searchText=this._getSelectedLabel()||"")}render(){return $e`
-        <div class="kuc-combobox-1-17-0__group">
+      `}updated(){this._inputEls.forEach((e=>{e.checked=this.value.indexOf(e.value)>-1}))}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}}Ni([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Ni([Ge({type:String})],e.prototype,"error",void 0),Ni([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Ni([Ge({type:String})],e.prototype,"itemLayout",void 0),Ni([Ge({type:String})],e.prototype,"label",void 0),Ni([Ge({type:Boolean})],e.prototype,"borderVisible",void 0),Ni([Ge({type:Boolean})],e.prototype,"disabled",void 0),Ni([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Ni([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Ni([Ge({type:Array})],e.prototype,"items",void 0),Ni([Ge({type:Array})],e.prototype,"selectedIndex",void 0),Ni([Ge({type:Array})],e.prototype,"value",void 0),Ni([Ye(".kuc-checkbox-1-17-1__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),Ni([Fe()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-checkbox-1-17-1",e),mi('\n  kuc-checkbox-1-17-1,\n  kuc-checkbox-1-17-1 *,\n  kuc-checkbox-1-17-1:lang(en),\n  kuc-checkbox-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-checkbox-1-17-1:lang(ja),\n  kuc-checkbox-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-checkbox-1-17-1:lang(zh),\n  kuc-checkbox-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-checkbox-1-17-1:lang(zh-TW),\n  kuc-checkbox-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-checkbox-1-17-1 {\n    font-size: 14px;\n    color: #333333;\n    display: inline-table;\n    vertical-align: top;\n    width: var(--kuc-checkbox-menu-width, 239px);\n    min-width: var(--kuc-checkbox-menu-width, 239px);\n    line-height: 1.5;\n  }\n  kuc-checkbox-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-checkbox-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    margin: 0px;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu {\n    white-space: nowrap;\n    width: var(--kuc-checkbox-menu-width, auto);\n    height: var(--kuc-checkbox-menu-height, auto);\n    color: var(--kuc-checkbox-menu-color, #333333);\n    font-size: var(--kuc-checkbox-menu-font-size, 14px);\n    display: flex;\n    align-items: flex-start;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu[itemLayout="vertical"] {\n    display: block;\n  }\n  .kuc-checkbox-1-17-1__group__label {\n    display: inline-block;\n    padding: 4px 0 8px 0;\n    white-space: nowrap;\n  }\n  .kuc-checkbox-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu[borderVisible] {\n    border-color: #e3e7e8;\n    border-width: 1px;\n    border-style: solid;\n    padding: 4px 0 0 4px;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item {\n    margin-bottom: 4px;\n    margin-right: 16px;\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    display: flex;\n    align-items: center;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item[focused] {\n    border: 1px solid #3498db;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item__input:hover\n    + .kuc-checkbox-1-17-1__group__select-menu__item__label {\n    color: var(--kuc-checkbox-menu-color-hover, #666666);\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item__label__icon {\n    position: absolute;\n    left: -30px;\n    box-sizing: border-box;\n    width: 21px;\n    height: 21px;\n    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;\n    content: "";\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item__input[disabled]\n    + .kuc-checkbox-1-17-1__group__select-menu__item__label {\n    color: #888888;\n    cursor: not-allowed;\n  }\n  .kuc-checkbox-1-17-1__group__select-menu__item__label {\n    cursor: pointer;\n    position: relative;\n    margin-left: 32px;\n    display: flex;\n    align-items: center;\n    vertical-align: middle;\n    white-space: nowrap;\n    min-height: 24px;\n    line-height: 1.2;\n  }'),Ui=e}})();var Pi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let zi;(()=>{if(zi=window.customElements.get("kuc-combobox-1-17-1"),!zi){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._selectorVisible=!1,this._searchText="",this._DISABLED_CLASS="kuc-combobox-1-17-1__group__select-menu__item--disabled",this._query="",this._matchingItems=[],this._GUID=fi();const t=vi(e);this._handleClickDocument=this._handleClickDocument.bind(this),Object.assign(this,t)}shouldUpdate(e){if(e.has("items")){if(!Ti(this.items))return this.throwErrorAfterUpdateComplete(it),!1;if(!Ii(this.items.map((e=>e.value))))return this.throwErrorAfterUpdateComplete(nt),!1}return!(e.has("value")&&!$i(this.value)&&(this.throwErrorAfterUpdateComplete(rt),1))}willUpdate(e){e.has("value")&&(this._searchText=this._getSelectedLabel()||"")}render(){return we`
+        <div class="kuc-combobox-1-17-1__group">
           <div
-            class="kuc-combobox-1-17-0__group__label"
+            class="kuc-combobox-1-17-1__group__label"
             id="${this._GUID}-label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </div>
-          <div class="kuc-combobox-1-17-0__group__toggle">
+          <div class="kuc-combobox-1-17-1__group__toggle">
             <input
-              class="kuc-combobox-1-17-0__group__toggle__input"
+              class="kuc-combobox-1-17-1__group__toggle__input"
               role="combobox"
               type="text"
               .value="${this._searchText}"
@@ -248,9 +247,9 @@
               @click="${this._handleClickComboboxInput}"
               @blur="${this._handleBlurComboboxInput}"
             />
-            <div class="kuc-combobox-1-17-0__group__toggle__icon">
+            <div class="kuc-combobox-1-17-1__group__toggle__icon">
               <button
-                class="kuc-combobox-1-17-0__group__toggle__icon__button"
+                class="kuc-combobox-1-17-1__group__toggle__icon__button"
                 tabindex="-1"
                 type="button"
                 aria-labelledby="${this._GUID}-label"
@@ -264,7 +263,7 @@
             </div>
           </div>
           <ul
-            class="kuc-combobox-1-17-0__group__select-menu"
+            class="kuc-combobox-1-17-1__group__select-menu"
             role="listbox"
             id="${this._GUID}-listbox"
             aria-labelledby="${this._GUID}-label"
@@ -275,14 +274,14 @@
           >
             ${this._matchingItems.map(((e,t)=>this._getItemTemplate(e,t)))}
           </ul>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
             ariaLive="assertive"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}firstUpdated(){window.addEventListener("resize",(()=>{this._actionResizeScrollWindow()})),window.addEventListener("scroll",(()=>{this._actionResizeScrollWindow()}))}async updated(e){super.updated(e),await this.updateComplete,this._selectorVisible?(this._setMenuPosition(),this._scrollToView(),null===this._selectedItemEl||this._selectedItemEl.classList.contains(this._DISABLED_CLASS)?this._actionClearAllHighlightMenuItem():this._setHighlightAndActiveDescendantMenu(this._selectedItemEl),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument,!0)}),1)):setTimeout((()=>{document.removeEventListener("click",this._handleClickDocument,!0)}),1)}_getToggleIconSvgTemplate(){return Ce`
+      `}firstUpdated(){window.addEventListener("resize",(()=>{this._actionResizeScrollWindow()})),window.addEventListener("scroll",(()=>{this._actionResizeScrollWindow()}))}async updated(e){super.updated(e),await this.updateComplete,this._selectorVisible?(this._setMenuPosition(),this._scrollToView(),null===this._selectedItemEl||this._selectedItemEl.classList.contains(this._DISABLED_CLASS)?this._actionClearAllHighlightMenuItem():this._setHighlightAndActiveDescendantMenu(this._selectedItemEl),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument,!0)}),1)):setTimeout((()=>{document.removeEventListener("click",this._handleClickDocument,!0)}),1)}_getToggleIconSvgTemplate(){return $e`
       <svg
         width="36"
         height="36"
@@ -296,11 +295,11 @@
           d="M24.2122 15.6665L25 16.1392L19.7332 21.4998H18.2668L13 16.1392L13.7878 15.6665L18.765 20.6866H19.235L24.2122 15.6665Z"
           fill="#3498db"/>
       </svg>
-    `}_getItemTemplate(e,t){const i=this._isCheckedItem(e),n=e.disabled,o=void 0===e.label?e.value:e.label;let a=i?$e`<b>${o}</b>`:$e`${o}`;const s=this._query.trim().toLowerCase();if(s&&o){const e=o.toLowerCase().indexOf(s),t=e+s.length;a=$e`
+    `}_getItemTemplate(e,t){const i=this._isCheckedItem(e),n=e.disabled,o=void 0===e.label?e.value:e.label;let a=i?we`<b>${o}</b>`:we`${o}`;const s=this._query.trim().toLowerCase();if(s&&o){const e=o.toLowerCase().indexOf(s),t=e+s.length;a=we`
           ${o.slice(0,e)}<b>${o.slice(e,t)}</b>${o.slice(t)}
-        `}return $e`
+        `}return we`
         <li
-          class="kuc-combobox-1-17-0__group__select-menu__item ${n?this._DISABLED_CLASS:""}"
+          class="kuc-combobox-1-17-1__group__select-menu__item ${n?this._DISABLED_CLASS:""}"
           role="option"
           aria-selected="${i?"true":"false"}"
           value="${void 0!==e.value?e.value:""}"
@@ -311,9 +310,9 @@
           ${this._getComboboxIconSvgTemplate(i,n)}
           ${a}
         </li>
-      `}_getComboboxIconSvgTemplate(e,t){return Ce`
-      ${e?Ce`<svg
-          class="kuc-combobox-1-17-0__group__select-menu__item__icon"
+      `}_getComboboxIconSvgTemplate(e,t){return $e`
+      ${e?$e`<svg
+          class="kuc-combobox-1-17-1__group__select-menu__item__icon"
           width="11"
           height="9"
           viewBox="0 0 11 9"
@@ -325,9 +324,9 @@
             clip-rule="evenodd"
             d="M0 5L1.5 3L4.5 5.5L9.5 0L11 1.5L4.5 8.5L0 5Z"
             fill="${t?"#888888":"#3498db"}"/>
-        </svg>`:""}`}_handleMouseDownComboboxItem(e){const t=this._getItemElementWhenMouseOverDown(e.target).getAttribute("value");this._actionUpdateValue(t)}_handleMouseOverComboboxItem(e){const t=this._getItemElementWhenMouseOverDown(e.target);this._actionHighlightMenuItem(t)}_handleMouseLeaveMenu(){this._actionClearAllHighlightMenuItem()}_handleMouseDownMenu(e){e.preventDefault()}_handleClickToggleButton(e){e.preventDefault(),this._inputEl.focus(),this._inputEl.select(),this._resetToggleInputValue(),this._actionToggleMenu()}_handleInputComboboxInput(e){e.stopPropagation(),this._searchText=this._inputEl.value,this._query=this._inputEl.value,this._setMatchingItems()}_handleClickComboboxInput(e){e.stopPropagation(),this._inputEl.select(),this._setMatchingItems()}_handleChangeComboboxInput(e){e.stopPropagation()}_handleBlurComboboxInput(e){this._resetToggleInputValue()}_handleClickDocument(e){(e.target===this._toggleEl||this._toggleEl.contains(e.target))&&(this._inputEl.focus(),e.stopPropagation()),Array.from(this._disabledItemsEl).some((t=>t===e.target||t.contains(e.target)))||this._actionHideMenu()}_handleKeyDownComboboxInput(e){switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightPrevMenuItem();break;case"Tab":this._selectorVisible&&this._actionHideMenu();break;case"Down":case"ArrowDown":if(e.preventDefault(),!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightNextMenuItem();break;case"Enter":{e.preventDefault();const t=this._highlightItemEl;if(null===t)break;const i=t.getAttribute("value");this._actionUpdateValue(i),this._actionHideMenu();break}case"Escape":e.preventDefault(),this._selectorVisible&&e.stopPropagation(),this._resetToggleInputValue(),this._actionHideMenu();break;case"Home":this._selectorVisible&&(e.preventDefault(),this._actionHighlightFirstMenuItem());break;case"End":this._selectorVisible&&(e.preventDefault(),this._actionHighlightLastMenuItem())}}_getSelectedLabel(){const e=this.items.filter(((e,t)=>this._isCheckedItem(e)));return 0===e.length?"":void 0===e[0].label?e[0].value:e[0].label}_actionShowMenu(){""===this._query.trim()&&(this._matchingItems=this.items),0!==this.items.length&&0!==this._matchingItems.length&&(this._inputEl.focus(),this._selectorVisible=!0)}_actionHideMenu(){this._selectorVisible=!1,this._actionRemoveActiveDescendant()}_actionToggleMenu(){this._selectorVisible?this._actionHideMenu():this._actionShowMenu()}_actionHighlightFirstMenuItem(){let e=this._firstItemEl,t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightLastMenuItem(){let e=this._lastItemEl,t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightPrevMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.previousElementSibling),null===e&&(e=this._lastItemEl);let t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling,null===e&&(e=this._lastItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightNextMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.nextElementSibling),null===e&&(e=this._firstItemEl);let t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling,null===e&&(e=this._firstItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionClearAllHighlightMenuItem(){this._itemsEl.forEach((e=>{e.classList.remove("kuc-combobox-1-17-0__group__select-menu__highlight")})),this._actionRemoveActiveDescendant()}_setHighlightAndActiveDescendantMenu(e){this._actionHighlightMenuItem(e),this._actionSetActiveDescendant(e.id),this._scrollToView()}_actionHighlightMenuItem(e){this._actionClearAllHighlightMenuItem(),e.classList.add("kuc-combobox-1-17-0__group__select-menu__highlight")}_actionUpdateValue(e){if(this.value===e)return void this._resetToggleInputValue();const t={oldValue:this.value,value:e};this.value=e,this._query="",gi(this,"change",t)}_actionSetActiveDescendant(e){void 0!==e&&null!==this._inputEl&&this._inputEl.setAttribute("aria-activedescendant",e)}_actionRemoveActiveDescendant(){this._inputEl.removeAttribute("aria-activedescendant")}_setMatchingItems(){const e=this.items.filter((e=>{const t=new RegExp(this._query.trim().replace(/[.*+?^=!:${}()|[\]/\\]/g,"\\$&"),"gi");return e.label?t.test(e.label):!!e.value&&t.test(e.value)}));0===e.length?(this._matchingItems=[],this._actionHideMenu()):(this._matchingItems=e,this._actionShowMenu())}_getScrollbarWidthHeight(){const e=document.createElement("div");e.style.cssText="overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(e);const t=e.offsetWidth-e.clientWidth,i=e.offsetHeight-e.clientHeight;return document.body.removeChild(e),{scrollbarWidth:t,scrollbarHeight:i}}_getDistanceToggleButton(){const{scrollbarWidth:e,scrollbarHeight:t}=this._getScrollbarWidthHeight(),i=document.body.scrollHeight>window.innerHeight,n=document.body.scrollWidth>window.innerWidth;return{toTop:this._toggleEl.getBoundingClientRect().top,toBottom:window.innerHeight-this._toggleEl.getBoundingClientRect().bottom-(n?t:0),toLeft:this._toggleEl.getBoundingClientRect().left,toRight:window.innerWidth-this._toggleEl.getBoundingClientRect().left-(i?e:0)}}_setMenuPositionAboveOrBelow(){this._menuEl.style.height="auto",this._menuEl.style.bottom="auto",this._menuEl.style.overflowY="";const e=this._menuEl.getBoundingClientRect().height,t=this._getDistanceToggleButton();if(!(t.toBottom>=e))if(t.toBottom<t.toTop){const i=this._errorEl.offsetHeight?this._errorEl.offsetHeight+16:0;if(this._menuEl.style.bottom=`${this._toggleEl.offsetHeight+i}px`,t.toTop>=e)return;this._menuEl.style.height=`${t.toTop}px`,this._menuEl.style.overflowY="scroll"}else this._menuEl.style.height=`${t.toBottom}px`,this._menuEl.style.overflowY="scroll"}_setMenuPositionLeftOrRight(){this._menuEl.style.right="auto";const e=this._menuEl.getBoundingClientRect().width,t=this._getDistanceToggleButton();if(t.toRight>=e||t.toLeft<e||t.toRight<0)return;const i=this._toggleEl.offsetWidth-t.toRight;this._menuEl.style.right=i>0?`${i}px`:"0px"}_setMenuPosition(){this._setMenuPositionAboveOrBelow(),this._setMenuPositionLeftOrRight()}_scrollToView(){if(!this._highlightItemEl||!this._menuEl)return;const e=this._menuEl.getBoundingClientRect(),t=this._highlightItemEl.getBoundingClientRect();t.top<e.top&&(this._menuEl.scrollTop-=e.top-t.top),e.bottom<t.bottom&&(this._menuEl.scrollTop+=t.bottom-e.bottom)}_actionResizeScrollWindow(){!this._timeoutID&&this._selectorVisible&&(this._timeoutID=window.setTimeout((()=>{this._timeoutID=null,this._setMenuPosition()}),50))}_isCheckedItem(e){return e.value===this.value}_resetToggleInputValue(){const e=this._getSelectedLabel();this._searchText!==e&&(this._searchText=e||""),this._query=""}_getItemElementWhenMouseOverDown(e){return e.classList.value.split(" ").includes("kuc-combobox-1-17-0__group__select-menu__item")?e:this._getItemElementWhenMouseOverDown(e.parentElement)}}Pi([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Pi([Fe({type:String})],e.prototype,"error",void 0),Pi([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Pi([Fe({type:String})],e.prototype,"label",void 0),Pi([Fe({type:String})],e.prototype,"value",void 0),Pi([Fe({type:Boolean})],e.prototype,"disabled",void 0),Pi([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Pi([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Pi([Fe({type:Array})],e.prototype,"items",void 0),Pi([We()],e.prototype,"_selectorVisible",void 0),Pi([Ke(".kuc-combobox-1-17-0__group__toggle")],e.prototype,"_toggleEl",void 0),Pi([Ke(".kuc-combobox-1-17-0__group__toggle__input")],e.prototype,"_inputEl",void 0),Pi([Ke(".kuc-combobox-1-17-0__group__select-menu")],e.prototype,"_menuEl",void 0),Pi([Je(".kuc-combobox-1-17-0__group__select-menu__item")],e.prototype,"_itemsEl",void 0),Pi([Ke(".kuc-combobox-1-17-0__group__select-menu__item")],e.prototype,"_firstItemEl",void 0),Pi([Ke(".kuc-combobox-1-17-0__group__select-menu__item:last-child")],e.prototype,"_lastItemEl",void 0),Pi([Ke(".kuc-combobox-1-17-0__group__select-menu__item[aria-selected=true]")],e.prototype,"_selectedItemEl",void 0),Pi([Ke(".kuc-combobox-1-17-0__group__select-menu__highlight")],e.prototype,"_highlightItemEl",void 0),Pi([Ke(".kuc-base-error-1-17-0__error")],e.prototype,"_errorEl",void 0),Pi([Je(".kuc-combobox-1-17-0__group__select-menu__item--disabled")],e.prototype,"_disabledItemsEl",void 0),Pi([We()],e.prototype,"_searchText",void 0),window.customElements.define("kuc-combobox-1-17-0",e),mi('\n  kuc-combobox-1-17-0,\n  kuc-combobox-1-17-0 *,\n  kuc-combobox-1-17-0:lang(en),\n  kuc-combobox-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-combobox-1-17-0:lang(ja),\n  kuc-combobox-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-combobox-1-17-0:lang(zh),\n  kuc-combobox-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-combobox-1-17-0:lang(zh-TW),\n  kuc-combobox-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體", "Microsoft JhengHei", "新宋体", NSimSun, STHeiti, Hei, "Heiti SC", sans-serif;\n  }\n  kuc-combobox-1-17-0 {\n    position: relative;\n    display: inline-table;\n    font-size: 14px;\n    color: #333333;\n    width: var(--kuc-combobox-toggle-width, 180px);\n    vertical-align: top;\n    line-height: 1.5;\n  }\n  kuc-combobox-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-combobox-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    margin: 0px;\n    position: relative;\n  }\n  .kuc-combobox-1-17-0__group__label {\n    padding: 4px 0px 8px 0px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n  .kuc-combobox-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-combobox-1-17-0__group__toggle {\n    position: relative;\n    display: flex;\n    width: var(--kuc-combobox-toggle-width);\n  }\n  input[type=text].kuc-combobox-1-17-0__group__toggle__input {\n    width: 100%;\n    height: var(--kuc-combobox-toggle-height, 40px);\n    box-sizing: border-box;\n    box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n    border: 1px solid #e3e7e8;\n    background-color: #ffffff;\n    color: var(--kuc-combobox-toggle-color, #000000);\n    font-size: var(--kuc-combobox-font-size, 14px);\n    line-height: 1.5;\n    padding: 0 40px 0 8px;\n    margin: 0;\n  }\n  input[type=text].kuc-combobox-1-17-0__group__toggle__input:focus {\n    outline: none;\n    border: 1px solid #3498db;\n    background-color: #e2f2fe;\n    box-shadow: none;\n  }\n  input[type=text].kuc-combobox-1-17-0__group__toggle__input:disabled,\n  .kuc-combobox-1-17-0__group__toggle__icon__button:disabled {\n    background-color: #d4d7d7;\n    box-shadow: none;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-combobox-1-17-0__group__toggle__icon {\n    position: absolute;\n    right: 0px;\n    top: 2px;\n    border-left: 1px solid #e3e7e8;\n  }\n  .kuc-combobox-1-17-0__group__toggle__icon__button {\n    width: 40px;\n    height: calc(var(--kuc-combobox-toggle-height, 40px) - 4px);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 0;\n    padding: 0;\n    border-style: none;\n    background-color: transparent;\n    cursor: pointer;\n  }\n  .kuc-combobox-1-17-0__group__select-menu {\n    min-width: 280px;\n    color: var(--kuc-combobox-menu-color);\n    padding: 8px 0;\n    border: 1px solid #e3e7e8;\n    box-sizing: border-box;\n    background-color: #ffffff;\n    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n    position: absolute;\n    z-index: 2000;\n    margin: 0;\n    list-style: none;\n  }\n  .kuc-combobox-1-17-0__group__select-menu[hidden] {\n    display: none;\n  }\n  .kuc-combobox-1-17-0__group__select-menu__item {\n    font-size: var(--kuc-combobox-font-size, 14px);\n    padding: 8px 16px 8px 24px;\n    line-height: 1;\n    position: relative;\n    cursor: pointer;\n    white-space: nowrap;\n  }\n  .kuc-combobox-1-17-0__group__select-menu__item:lang(en) b,\n  .kuc-combobox-1-17-0__group__select-menu__item:lang(ja) b,\n  .kuc-combobox-1-17-0__group__select-menu__item:lang(zh) b,\n  .kuc-combobox-1-17-0__group__select-menu__item:lang(zh-TW) b{\n    font-weight: 700;\n  }\n  .kuc-combobox-1-17-0__group__select-menu__item__icon {\n    position: absolute;\n    top: 50%;\n    left: 6px;\n    margin-top: -5px;\n  }\n  .kuc-combobox-1-17-0__group__select-menu__item[aria-selected="true"] {\n    color: var(--kuc-combobox-menu-color-selected, #3498db);\n  }\n  .kuc-combobox-1-17-0__group__select-menu__item--disabled,\n  .kuc-combobox-1-17-0__group__select-menu__item--disabled[aria-selected="true"] {\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-combobox-1-17-0__group__select-menu__highlight[role="option"] {\n    background-color: #e2f2fe;\n  }\n'),zi=e}})();var Ri=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class ji extends bi{constructor(){super(),this.year=(new Date).getFullYear(),this.postfix="",this._listBoxVisible=!1,this._handleScrollDocument=this._handleScrollDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("scroll",this._handleScrollDocument)}),1)}disconnectedCallback(){document.removeEventListener("scroll",this._handleScrollDocument),super.disconnectedCallback()}update(e){this._listBoxItems=this._getYearOptions().map((e=>({value:`${e}`,label:`${e}${this.postfix}`}))),super.update(e)}render(){return $e`
+        </svg>`:""}`}_handleMouseDownComboboxItem(e){const t=this._getItemElementWhenMouseOverDown(e.target).getAttribute("value");this._actionUpdateValue(t)}_handleMouseOverComboboxItem(e){const t=this._getItemElementWhenMouseOverDown(e.target);this._actionHighlightMenuItem(t)}_handleMouseLeaveMenu(){this._actionClearAllHighlightMenuItem()}_handleMouseDownMenu(e){e.preventDefault()}_handleClickToggleButton(e){e.preventDefault(),this._inputEl.focus(),this._inputEl.select(),this._resetToggleInputValue(),this._actionToggleMenu()}_handleInputComboboxInput(e){e.stopPropagation(),this._searchText=this._inputEl.value,this._query=this._inputEl.value,this._setMatchingItems()}_handleClickComboboxInput(e){e.stopPropagation(),this._inputEl.select(),this._setMatchingItems()}_handleChangeComboboxInput(e){e.stopPropagation()}_handleBlurComboboxInput(e){this._resetToggleInputValue()}_handleClickDocument(e){(e.target===this._toggleEl||this._toggleEl.contains(e.target))&&(this._inputEl.focus(),e.stopPropagation()),Array.from(this._disabledItemsEl).some((t=>t===e.target||t.contains(e.target)))||this._actionHideMenu()}_handleKeyDownComboboxInput(e){switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightPrevMenuItem();break;case"Tab":this._selectorVisible&&this._actionHideMenu();break;case"Down":case"ArrowDown":if(e.preventDefault(),!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightNextMenuItem();break;case"Enter":{e.preventDefault();const t=this._highlightItemEl;if(null===t)break;const i=t.getAttribute("value");this._actionUpdateValue(i),this._actionHideMenu();break}case"Escape":e.preventDefault(),this._selectorVisible&&e.stopPropagation(),this._resetToggleInputValue(),this._actionHideMenu();break;case"Home":this._selectorVisible&&(e.preventDefault(),this._actionHighlightFirstMenuItem());break;case"End":this._selectorVisible&&(e.preventDefault(),this._actionHighlightLastMenuItem())}}_getSelectedLabel(){const e=this.items.filter(((e,t)=>this._isCheckedItem(e)));return 0===e.length?"":void 0===e[0].label?e[0].value:e[0].label}_actionShowMenu(){""===this._query.trim()&&(this._matchingItems=this.items),0!==this.items.length&&0!==this._matchingItems.length&&(this._inputEl.focus(),this._selectorVisible=!0)}_actionHideMenu(){this._selectorVisible=!1,this._actionRemoveActiveDescendant()}_actionToggleMenu(){this._selectorVisible?this._actionHideMenu():this._actionShowMenu()}_actionHighlightFirstMenuItem(){let e=this._firstItemEl,t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightLastMenuItem(){let e=this._lastItemEl,t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightPrevMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.previousElementSibling),null===e&&(e=this._lastItemEl);let t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling,null===e&&(e=this._lastItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightNextMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.nextElementSibling),null===e&&(e=this._firstItemEl);let t=!1;for(let i=0;i<this._matchingItems.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling,null===e&&(e=this._firstItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionClearAllHighlightMenuItem(){this._itemsEl.forEach((e=>{e.classList.remove("kuc-combobox-1-17-1__group__select-menu__highlight")})),this._actionRemoveActiveDescendant()}_setHighlightAndActiveDescendantMenu(e){this._actionHighlightMenuItem(e),this._actionSetActiveDescendant(e.id),this._scrollToView()}_actionHighlightMenuItem(e){this._actionClearAllHighlightMenuItem(),e.classList.add("kuc-combobox-1-17-1__group__select-menu__highlight")}_actionUpdateValue(e){if(this.value===e)return void this._resetToggleInputValue();const t={oldValue:this.value,value:e};this.value=e,this._query="",gi(this,"change",t)}_actionSetActiveDescendant(e){void 0!==e&&null!==this._inputEl&&this._inputEl.setAttribute("aria-activedescendant",e)}_actionRemoveActiveDescendant(){this._inputEl.removeAttribute("aria-activedescendant")}_setMatchingItems(){const e=this.items.filter((e=>{const t=new RegExp(this._query.trim().replace(/[.*+?^=!:${}()|[\]/\\]/g,"\\$&"),"gi");return e.label?t.test(e.label):!!e.value&&t.test(e.value)}));0===e.length?(this._matchingItems=[],this._actionHideMenu()):(this._matchingItems=e,this._actionShowMenu())}_getScrollbarWidthHeight(){const e=document.createElement("div");e.style.cssText="overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(e);const t=e.offsetWidth-e.clientWidth,i=e.offsetHeight-e.clientHeight;return document.body.removeChild(e),{scrollbarWidth:t,scrollbarHeight:i}}_getDistanceToggleButton(){const{scrollbarWidth:e,scrollbarHeight:t}=this._getScrollbarWidthHeight(),i=document.body.scrollHeight>window.innerHeight,n=document.body.scrollWidth>window.innerWidth;return{toTop:this._toggleEl.getBoundingClientRect().top,toBottom:window.innerHeight-this._toggleEl.getBoundingClientRect().bottom-(n?t:0),toLeft:this._toggleEl.getBoundingClientRect().left,toRight:window.innerWidth-this._toggleEl.getBoundingClientRect().left-(i?e:0)}}_setMenuPositionAboveOrBelow(){this._menuEl.style.height="auto",this._menuEl.style.bottom="auto",this._menuEl.style.overflowY="";const e=this._menuEl.getBoundingClientRect().height,t=this._getDistanceToggleButton();if(!(t.toBottom>=e))if(t.toBottom<t.toTop){const i=this._errorEl.offsetHeight?this._errorEl.offsetHeight+16:0;if(this._menuEl.style.bottom=`${this._toggleEl.offsetHeight+i}px`,t.toTop>=e)return;this._menuEl.style.height=`${t.toTop}px`,this._menuEl.style.overflowY="scroll"}else this._menuEl.style.height=`${t.toBottom}px`,this._menuEl.style.overflowY="scroll"}_setMenuPositionLeftOrRight(){this._menuEl.style.right="auto";const e=this._menuEl.getBoundingClientRect().width,t=this._getDistanceToggleButton();if(t.toRight>=e||t.toLeft<e||t.toRight<0)return;const i=this._toggleEl.offsetWidth-t.toRight;this._menuEl.style.right=i>0?`${i}px`:"0px"}_setMenuPosition(){this._setMenuPositionAboveOrBelow(),this._setMenuPositionLeftOrRight()}_scrollToView(){if(!this._highlightItemEl||!this._menuEl)return;const e=this._menuEl.getBoundingClientRect(),t=this._highlightItemEl.getBoundingClientRect();t.top<e.top&&(this._menuEl.scrollTop-=e.top-t.top),e.bottom<t.bottom&&(this._menuEl.scrollTop+=t.bottom-e.bottom)}_actionResizeScrollWindow(){!this._timeoutID&&this._selectorVisible&&(this._timeoutID=window.setTimeout((()=>{this._timeoutID=null,this._setMenuPosition()}),50))}_isCheckedItem(e){return e.value===this.value}_resetToggleInputValue(){const e=this._getSelectedLabel();this._searchText!==e&&(this._searchText=e||""),this._query=""}_getItemElementWhenMouseOverDown(e){return e.classList.value.split(" ").includes("kuc-combobox-1-17-1__group__select-menu__item")?e:this._getItemElementWhenMouseOverDown(e.parentElement)}}Pi([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Pi([Ge({type:String})],e.prototype,"error",void 0),Pi([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Pi([Ge({type:String})],e.prototype,"label",void 0),Pi([Ge({type:String})],e.prototype,"value",void 0),Pi([Ge({type:Boolean})],e.prototype,"disabled",void 0),Pi([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Pi([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Pi([Ge({type:Array})],e.prototype,"items",void 0),Pi([Fe()],e.prototype,"_selectorVisible",void 0),Pi([qe(".kuc-combobox-1-17-1__group__toggle")],e.prototype,"_toggleEl",void 0),Pi([qe(".kuc-combobox-1-17-1__group__toggle__input")],e.prototype,"_inputEl",void 0),Pi([qe(".kuc-combobox-1-17-1__group__select-menu")],e.prototype,"_menuEl",void 0),Pi([Ye(".kuc-combobox-1-17-1__group__select-menu__item")],e.prototype,"_itemsEl",void 0),Pi([qe(".kuc-combobox-1-17-1__group__select-menu__item")],e.prototype,"_firstItemEl",void 0),Pi([qe(".kuc-combobox-1-17-1__group__select-menu__item:last-child")],e.prototype,"_lastItemEl",void 0),Pi([qe(".kuc-combobox-1-17-1__group__select-menu__item[aria-selected=true]")],e.prototype,"_selectedItemEl",void 0),Pi([qe(".kuc-combobox-1-17-1__group__select-menu__highlight")],e.prototype,"_highlightItemEl",void 0),Pi([qe(".kuc-base-error-1-17-1__error")],e.prototype,"_errorEl",void 0),Pi([Ye(".kuc-combobox-1-17-1__group__select-menu__item--disabled")],e.prototype,"_disabledItemsEl",void 0),Pi([Fe()],e.prototype,"_searchText",void 0),window.customElements.define("kuc-combobox-1-17-1",e),mi('\n  kuc-combobox-1-17-1,\n  kuc-combobox-1-17-1 *,\n  kuc-combobox-1-17-1:lang(en),\n  kuc-combobox-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-combobox-1-17-1:lang(ja),\n  kuc-combobox-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-combobox-1-17-1:lang(zh),\n  kuc-combobox-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-combobox-1-17-1:lang(zh-TW),\n  kuc-combobox-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體", "Microsoft JhengHei", "新宋体", NSimSun, STHeiti, Hei, "Heiti SC", sans-serif;\n  }\n  kuc-combobox-1-17-1 {\n    position: relative;\n    display: inline-table;\n    font-size: 14px;\n    color: #333333;\n    width: var(--kuc-combobox-toggle-width, 180px);\n    vertical-align: top;\n    line-height: 1.5;\n  }\n  kuc-combobox-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-combobox-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    margin: 0px;\n    position: relative;\n  }\n  .kuc-combobox-1-17-1__group__label {\n    padding: 4px 0px 8px 0px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n  .kuc-combobox-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-combobox-1-17-1__group__toggle {\n    position: relative;\n    display: flex;\n    width: var(--kuc-combobox-toggle-width);\n  }\n  input[type=text].kuc-combobox-1-17-1__group__toggle__input {\n    width: 100%;\n    height: var(--kuc-combobox-toggle-height, 40px);\n    box-sizing: border-box;\n    box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n    border: 1px solid #e3e7e8;\n    background-color: #ffffff;\n    color: var(--kuc-combobox-toggle-color, #000000);\n    font-size: var(--kuc-combobox-font-size, 14px);\n    line-height: 1.5;\n    padding: 0 40px 0 8px;\n    margin: 0;\n  }\n  input[type=text].kuc-combobox-1-17-1__group__toggle__input:focus {\n    outline: none;\n    border: 1px solid #3498db;\n    background-color: #e2f2fe;\n    box-shadow: none;\n  }\n  input[type=text].kuc-combobox-1-17-1__group__toggle__input:disabled,\n  .kuc-combobox-1-17-1__group__toggle__icon__button:disabled {\n    background-color: #d4d7d7;\n    box-shadow: none;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-combobox-1-17-1__group__toggle__icon {\n    position: absolute;\n    right: 0px;\n    top: 2px;\n    border-left: 1px solid #e3e7e8;\n  }\n  .kuc-combobox-1-17-1__group__toggle__icon__button {\n    width: 40px;\n    height: calc(var(--kuc-combobox-toggle-height, 40px) - 4px);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 0;\n    padding: 0;\n    border-style: none;\n    background-color: transparent;\n    cursor: pointer;\n  }\n  .kuc-combobox-1-17-1__group__select-menu {\n    min-width: 280px;\n    color: var(--kuc-combobox-menu-color);\n    padding: 8px 0;\n    border: 1px solid #e3e7e8;\n    box-sizing: border-box;\n    background-color: #ffffff;\n    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n    position: absolute;\n    z-index: 2000;\n    margin: 0;\n    list-style: none;\n  }\n  .kuc-combobox-1-17-1__group__select-menu[hidden] {\n    display: none;\n  }\n  .kuc-combobox-1-17-1__group__select-menu__item {\n    font-size: var(--kuc-combobox-font-size, 14px);\n    padding: 8px 16px 8px 24px;\n    line-height: 1;\n    position: relative;\n    cursor: pointer;\n    white-space: nowrap;\n  }\n  .kuc-combobox-1-17-1__group__select-menu__item:lang(en) b,\n  .kuc-combobox-1-17-1__group__select-menu__item:lang(ja) b,\n  .kuc-combobox-1-17-1__group__select-menu__item:lang(zh) b,\n  .kuc-combobox-1-17-1__group__select-menu__item:lang(zh-TW) b{\n    font-weight: 700;\n  }\n  .kuc-combobox-1-17-1__group__select-menu__item__icon {\n    position: absolute;\n    top: 50%;\n    left: 6px;\n    margin-top: -5px;\n  }\n  .kuc-combobox-1-17-1__group__select-menu__item[aria-selected="true"] {\n    color: var(--kuc-combobox-menu-color-selected, #3498db);\n  }\n  .kuc-combobox-1-17-1__group__select-menu__item--disabled,\n  .kuc-combobox-1-17-1__group__select-menu__item--disabled[aria-selected="true"] {\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-combobox-1-17-1__group__select-menu__highlight[role="option"] {\n    background-color: #e2f2fe;\n  }\n'),zi=e}})();var Ri=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class ji extends bi{constructor(){super(),this.year=(new Date).getFullYear(),this.postfix="",this._listBoxVisible=!1,this._handleScrollDocument=this._handleScrollDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("scroll",this._handleScrollDocument)}),1)}disconnectedCallback(){document.removeEventListener("scroll",this._handleScrollDocument),super.disconnectedCallback()}update(e){this._listBoxItems=this._getYearOptions().map((e=>({value:`${e}`,label:`${e}${this.postfix}`}))),super.update(e)}render(){return we`
       <button
-        class="kuc-base-datetime-header-year-1-17-0__toggle"
+        class="kuc-base-datetime-header-year-1-17-1__toggle"
         aria-haspopup="listbox"
         aria-expanded="${this._listBoxVisible}"
         tabindex="${this._listBoxVisible?"-1":"0"}"
@@ -336,28 +335,28 @@
         @click="${this._handleClickDropdownYearToggle}"
         @keydown="${this._handleKeyDownYearToggle}"
       >
-        <span class="kuc-base-datetime-header-year-1-17-0__toggle__label"
+        <span class="kuc-base-datetime-header-year-1-17-1__toggle__label"
           >${this.year}${this.postfix}</span
         >
-        <span class="kuc-base-datetime-header-year-1-17-0__toggle__icon"
-          >${ti()}
+        <span class="kuc-base-datetime-header-year-1-17-1__toggle__icon"
+          >${ei()}
         </span>
       </button>
       ${this._getListBoxTemplate()}
-    `}async updated(e){await this.updateComplete,e.has("_listBoxVisible")&&this._listBoxVisible&&this._handleScrollDocument(),super.update(e)}closeListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_handleScrollDocument(){const e=ni(this);e.inputToBottom>=e.inputToTop?ii(this,"bottom"):ii(this,"top")}_getListBoxTemplate(){return this._listBoxVisible?$e`
-          <kuc-base-datetime-listbox-1-17-0
+    `}async updated(e){await this.updateComplete,e.has("_listBoxVisible")&&this._listBoxVisible&&this._handleScrollDocument(),super.update(e)}closeListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_handleScrollDocument(){const e=ii(this);e.inputToBottom>=e.inputToTop?ti(this,"bottom"):ti(this,"top")}_getListBoxTemplate(){return this._listBoxVisible?we`
+          <kuc-base-datetime-listbox-1-17-1
             .items="${this._listBoxItems||[]}"
             .value="${this.year.toString()}"
-            class="kuc-base-datetime-header-year-1-17-0__listbox"
+            class="kuc-base-datetime-header-year-1-17-1__listbox"
             @kuc:listbox-click="${this._handleChangeListBox}"
             @kuc:listbox-blur="${this._handleFocusOutListBox}"
             @kuc:listbox-escape="${this._handleListBoxEscape}"
             aria-hidden="${!this._listBoxVisible}"
           >
-          </kuc-base-datetime-listbox-1-17-0>
-        `:""}_handleFocusOutListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_handleListBoxEscape(){this._handleFocusOutListBox()}_handleMouseUpDropdownToggle(e){e.preventDefault()}_handleMouseDownDropdownToggle(e){e.preventDefault()}_handleClickDropdownYearToggle(e){e.stopPropagation(),e.preventDefault(),this._listBoxVisible?this.closeListBox():this._openListBox(),gi(this,"kuc:year-dropdown-click",{value:this._listBoxVisible.toString(),oldValue:(!this._listBoxVisible).toString()})}_handleKeyDownYearToggle(e){"Tab"!==e.key&&(e.preventDefault(),this._openListBoxByKey(e.key))}_openListBoxByKey(e){[" ","Up","ArrowUp","Down","ArrowDown","Enter"].indexOf(e)>-1&&this._openListBox()}_handleChangeListBox(e){if(e.preventDefault(),e.stopPropagation(),this.closeListBox(),!e.detail.value)return;this.year=Number(e.detail.value);const t={value:`${this.year}`};gi(this,"kuc:year-dropdown-change",t)}_openListBox(){this._listBoxVisible=!0}_getYearOptions(){const e=[];Number.isInteger(this.year)||(this.year=(new Date).getFullYear());let t=this.year<100?0:this.year-100;const i=this.year>=9899?9999:this.year+100;for(;t<=i;t++)e.push(t);return e}}Ri([Fe({type:Number})],ji.prototype,"year",void 0),Ri([Fe({type:String})],ji.prototype,"postfix",void 0),Ri([We()],ji.prototype,"_listBoxVisible",void 0),Ri([Ke(".kuc-base-datetime-header-year-1-17-0__toggle")],ji.prototype,"_toggleEl",void 0),window.customElements.get("kuc-base-datetime-header-year-1-17-0")||(mi("\n.kuc-base-datetime-header-year-1-17-0__toggle {\n  position: relative;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 24px 0 8px;\n  line-height: 30px;\n  overflow: hidden;\n  background-color: white;\n  border: 1px solid transparent;\n  cursor: pointer;\n}\n.kuc-base-datetime-header-year-1-17-0__toggle__icon {\n  position: absolute;\n  flex: none;\n  width: 24px;\n  height: 32px;\n}\n.kuc-base-datetime-header-year-1-17-0__toggle__label {\n  font-size: 13px;\n  color: #333333;\n}\n.kuc-base-datetime-header-year-1-17-0__toggle:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n"),window.customElements.define("kuc-base-datetime-header-year-1-17-0",ji));var Gi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Fi extends bi{constructor(){super(),this.language="auto",this.month=1,this._listBoxVisible=!1,this._locale=Qt("en"),this._monthLabel="",this._maxHeight=1e3,this._handleScrollDocument=this._handleScrollDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("scroll",this._handleScrollDocument)}),1)}disconnectedCallback(){document.removeEventListener("scroll",this._handleScrollDocument),super.disconnectedCallback()}update(e){e.has("language")&&(this._locale=Qt(this.language),this._listBoxItems=this._getListBoxItems()),e.has("month")&&(this._monthLabel=this._getMonthLabel()),super.update(e)}render(){return $e`
+          </kuc-base-datetime-listbox-1-17-1>
+        `:""}_handleFocusOutListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_handleListBoxEscape(){this._handleFocusOutListBox()}_handleMouseUpDropdownToggle(e){e.preventDefault()}_handleMouseDownDropdownToggle(e){e.preventDefault()}_handleClickDropdownYearToggle(e){e.stopPropagation(),e.preventDefault(),this._listBoxVisible?this.closeListBox():this._openListBox(),gi(this,"kuc:year-dropdown-click",{value:this._listBoxVisible.toString(),oldValue:(!this._listBoxVisible).toString()})}_handleKeyDownYearToggle(e){"Tab"!==e.key&&(e.preventDefault(),this._openListBoxByKey(e.key))}_openListBoxByKey(e){[" ","Up","ArrowUp","Down","ArrowDown","Enter"].indexOf(e)>-1&&this._openListBox()}_handleChangeListBox(e){if(e.preventDefault(),e.stopPropagation(),this.closeListBox(),!e.detail.value)return;this.year=Number(e.detail.value);const t={value:`${this.year}`};gi(this,"kuc:year-dropdown-change",t)}_openListBox(){this._listBoxVisible=!0}_getYearOptions(){const e=[];Number.isInteger(this.year)||(this.year=(new Date).getFullYear());let t=this.year<100?0:this.year-100;const i=this.year>=9899?9999:this.year+100;for(;t<=i;t++)e.push(t);return e}}Ri([Ge({type:Number})],ji.prototype,"year",void 0),Ri([Ge({type:String})],ji.prototype,"postfix",void 0),Ri([Fe()],ji.prototype,"_listBoxVisible",void 0),Ri([qe(".kuc-base-datetime-header-year-1-17-1__toggle")],ji.prototype,"_toggleEl",void 0),window.customElements.get("kuc-base-datetime-header-year-1-17-1")||(mi("\n.kuc-base-datetime-header-year-1-17-1__toggle {\n  position: relative;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 24px 0 8px;\n  line-height: 30px;\n  overflow: hidden;\n  background-color: white;\n  border: 1px solid transparent;\n  cursor: pointer;\n}\n.kuc-base-datetime-header-year-1-17-1__toggle__icon {\n  position: absolute;\n  flex: none;\n  width: 24px;\n  height: 32px;\n}\n.kuc-base-datetime-header-year-1-17-1__toggle__label {\n  font-size: 13px;\n  color: #333333;\n}\n.kuc-base-datetime-header-year-1-17-1__toggle:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n"),window.customElements.define("kuc-base-datetime-header-year-1-17-1",ji));var Gi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Fi extends bi{constructor(){super(),this.language="auto",this.month=1,this._listBoxVisible=!1,this._locale=Xt("en"),this._monthLabel="",this._maxHeight=1e3,this._handleScrollDocument=this._handleScrollDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("scroll",this._handleScrollDocument)}),1)}disconnectedCallback(){document.removeEventListener("scroll",this._handleScrollDocument),super.disconnectedCallback()}update(e){e.has("language")&&(this._locale=Xt(this.language),this._listBoxItems=this._getListBoxItems()),e.has("month")&&(this._monthLabel=this._getMonthLabel()),super.update(e)}render(){return we`
       <button
-        class="kuc-base-datetime-header-month-1-17-0__toggle"
+        class="kuc-base-datetime-header-month-1-17-1__toggle"
         aria-haspopup="listbox"
         aria-expanded="${this._listBoxVisible}"
         tabindex="${this._listBoxVisible?"-1":"0"}"
@@ -366,38 +365,38 @@
         @click="${this._handleClickDropdownMonthToggle}"
         @keydown="${this._handleKeyDownMonthToggle}"
       >
-        <span class="kuc-base-datetime-header-month-1-17-0__toggle__label"
+        <span class="kuc-base-datetime-header-month-1-17-1__toggle__label"
           >${this._monthLabel}</span
         >
-        <span class="kuc-base-datetime-header-month-1-17-0__toggle__icon"
-          >${ti()}
+        <span class="kuc-base-datetime-header-month-1-17-1__toggle__icon"
+          >${ei()}
         </span>
       </button>
       ${this._getListBoxTemplate()}
-    `}async updated(e){await this.updateComplete,e.has("_listBoxVisible")&&this._listBoxVisible&&this._handleScrollDocument(),super.update(e)}_handleScrollDocument(){const e=ni(this);e.inputToBottom>=e.inputToTop?ii(this,"bottom"):ii(this,"top")}closeListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_getListBoxTemplate(){return this._listBoxVisible?$e`
-          <kuc-base-datetime-listbox-1-17-0
+    `}async updated(e){await this.updateComplete,e.has("_listBoxVisible")&&this._listBoxVisible&&this._handleScrollDocument(),super.update(e)}_handleScrollDocument(){const e=ii(this);e.inputToBottom>=e.inputToTop?ti(this,"bottom"):ti(this,"top")}closeListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_getListBoxTemplate(){return this._listBoxVisible?we`
+          <kuc-base-datetime-listbox-1-17-1
             .items="${this._listBoxItems||[]}"
             .value="${this.month.toString()}"
             .maxHeight="${this._maxHeight}"
-            class="kuc-base-datetime-header-month-1-17-0__listbox"
+            class="kuc-base-datetime-header-month-1-17-1__listbox"
             @kuc:listbox-click="${this._handleChangeListBox}"
             @kuc:listbox-blur="${this._handleFocusOutListBox}"
             @kuc:listbox-escape="${this._handleListBoxEscape}"
             aria-hidden="${!this._listBoxVisible}"
           >
-          </kuc-base-datetime-listbox-1-17-0>
-        `:""}_handleFocusOutListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_handleListBoxEscape(){this._handleFocusOutListBox()}_handleClickDropdownMonthToggle(e){e.stopPropagation(),e.preventDefault(),this._listBoxVisible?this.closeListBox():this._openListBox(),gi(this,"kuc:month-dropdown-click",{value:this._listBoxVisible.toString(),oldValue:(!this._listBoxVisible).toString()})}_handleMouseUpDropdownToggle(e){e.preventDefault()}_handleMouseDownDropdownToggle(e){e.preventDefault()}_handleKeyDownMonthToggle(e){this._handleTabKey(e.key)||(e.preventDefault(),this._openListBoxByKey(e.key))}_openListBoxByKey(e){[" ","Up","ArrowUp","Down","ArrowDown","Enter"].indexOf(e)>-1&&this._openListBox()}_handleTabKey(e){return"Tab"===e}_handleChangeListBox(e){if(e.preventDefault(),e.stopPropagation(),this.closeListBox(),!e.detail.value)return;this.month=Number(e.detail.value);const t={value:`${this.month}`};gi(this,"kuc:month-dropdown-change",t)}_openListBox(){this._listBoxVisible=!0}_getListBoxItems(){return this._locale.MONTH_SELECT.map(((e,t)=>({value:`${t+1}`,label:`${e}`})))}_getMonthLabel(){const e=this._locale.MONTH_SELECT.filter(((e,t)=>this.month===t+1));return e.length>0?e[0]:"JANUARY"}}Gi([Fe({type:String,attribute:"lang",reflect:!0})],Fi.prototype,"language",void 0),Gi([Fe({type:Number})],Fi.prototype,"month",void 0),Gi([We()],Fi.prototype,"_listBoxVisible",void 0),Gi([Ke(".kuc-base-datetime-header-month-1-17-0__toggle")],Fi.prototype,"_toggleEl",void 0),window.customElements.get("kuc-base-datetime-header-month-1-17-0")||(mi("\n.kuc-base-datetime-header-month-1-17-0__toggle {\n  position: relative;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 24px 0 8px;\n  line-height: 30px;\n  overflow: hidden;\n  background-color: white;\n  border: 1px solid transparent;\n  cursor: pointer;\n}\n.kuc-base-datetime-header-month-1-17-0__toggle__icon {\n  position: absolute;\n  flex: none;\n  width: 24px;\n  height: 32px;\n}\n.kuc-base-datetime-header-month-1-17-0__toggle__label {\n  font-size: 13px;\n  color: #333333;\n}\n.kuc-base-datetime-header-month-1-17-0__toggle:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n"),window.customElements.define("kuc-base-datetime-header-month-1-17-0",Fi));var Wi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class qi extends bi{constructor(){super(...arguments),this.language="en",this.month=1,this.year=(new Date).getFullYear(),this._locale=Qt("en")}update(e){e.has("language")&&(this._locale=Qt(this.language)),super.update(e)}render(){return $e`
-      <div class="kuc-base-datetime-calendar-header-1-17-0__group">
+          </kuc-base-datetime-listbox-1-17-1>
+        `:""}_handleFocusOutListBox(){this._listBoxVisible=!1,this._toggleEl.focus()}_handleListBoxEscape(){this._handleFocusOutListBox()}_handleClickDropdownMonthToggle(e){e.stopPropagation(),e.preventDefault(),this._listBoxVisible?this.closeListBox():this._openListBox(),gi(this,"kuc:month-dropdown-click",{value:this._listBoxVisible.toString(),oldValue:(!this._listBoxVisible).toString()})}_handleMouseUpDropdownToggle(e){e.preventDefault()}_handleMouseDownDropdownToggle(e){e.preventDefault()}_handleKeyDownMonthToggle(e){this._handleTabKey(e.key)||(e.preventDefault(),this._openListBoxByKey(e.key))}_openListBoxByKey(e){[" ","Up","ArrowUp","Down","ArrowDown","Enter"].indexOf(e)>-1&&this._openListBox()}_handleTabKey(e){return"Tab"===e}_handleChangeListBox(e){if(e.preventDefault(),e.stopPropagation(),this.closeListBox(),!e.detail.value)return;this.month=Number(e.detail.value);const t={value:`${this.month}`};gi(this,"kuc:month-dropdown-change",t)}_openListBox(){this._listBoxVisible=!0}_getListBoxItems(){return this._locale.MONTH_SELECT.map(((e,t)=>({value:`${t+1}`,label:`${e}`})))}_getMonthLabel(){const e=this._locale.MONTH_SELECT.filter(((e,t)=>this.month===t+1));return e.length>0?e[0]:"JANUARY"}}Gi([Ge({type:String,attribute:"lang",reflect:!0})],Fi.prototype,"language",void 0),Gi([Ge({type:Number})],Fi.prototype,"month",void 0),Gi([Fe()],Fi.prototype,"_listBoxVisible",void 0),Gi([qe(".kuc-base-datetime-header-month-1-17-1__toggle")],Fi.prototype,"_toggleEl",void 0),window.customElements.get("kuc-base-datetime-header-month-1-17-1")||(mi("\n.kuc-base-datetime-header-month-1-17-1__toggle {\n  position: relative;\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 24px 0 8px;\n  line-height: 30px;\n  overflow: hidden;\n  background-color: white;\n  border: 1px solid transparent;\n  cursor: pointer;\n}\n.kuc-base-datetime-header-month-1-17-1__toggle__icon {\n  position: absolute;\n  flex: none;\n  width: 24px;\n  height: 32px;\n}\n.kuc-base-datetime-header-month-1-17-1__toggle__label {\n  font-size: 13px;\n  color: #333333;\n}\n.kuc-base-datetime-header-month-1-17-1__toggle:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n"),window.customElements.define("kuc-base-datetime-header-month-1-17-1",Fi));var Wi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class qi extends bi{constructor(){super(...arguments),this.language="en",this.month=1,this.year=(new Date).getFullYear(),this._locale=Xt("en")}update(e){e.has("language")&&(this._locale=Xt(this.language)),super.update(e)}render(){return we`
+      <div class="kuc-base-datetime-calendar-header-1-17-1__group">
         <button
           aria-label="previous month"
           type="button"
-          class="kuc-base-datetime-calendar-header-1-17-0__group__button kuc-base-datetime-calendar-header-1-17-0__group__button--previous-month"
+          class="kuc-base-datetime-calendar-header-1-17-1__group__button kuc-base-datetime-calendar-header-1-17-1__group__button--previous-month"
           @click="${this._handleClickCalendarPrevMonthBtn}"
           @keydown="${this._handleKeyDownCalendarPrevMonthBtn}"
         >
-          ${Ce`
+          ${$e`
     <svg
-      class="kuc-base-datetime-calendar-header-1-17-0__group__button-icon"
+      class="kuc-base-datetime-calendar-header-1-17-1__group__button-icon"
       width="9"
       height="14"
       viewBox="0 0 9 14"
@@ -412,18 +411,18 @@
       />
     </svg>`}
         </button>
-        <div class="kuc-base-datetime-calendar-header-1-17-0__group__center">
+        <div class="kuc-base-datetime-calendar-header-1-17-1__group__center">
           ${this._getYearMonthTemplate()}
         </div>
         <button
           aria-label="next month"
           type="button"
-          class="kuc-base-datetime-calendar-header-1-17-0__group__button kuc-base-datetime-calendar-header-1-17-0__group__button--next-month"
+          class="kuc-base-datetime-calendar-header-1-17-1__group__button kuc-base-datetime-calendar-header-1-17-1__group__button--next-month"
           @click="${this._handleClickCalendarNextMonthBtn}"
         >
-          ${Ce`
+          ${$e`
     <svg
-      class="kuc-base-datetime-calendar-header-1-17-0__group__button-icon"
+      class="kuc-base-datetime-calendar-header-1-17-1__group__button-icon"
       width="9"
       height="14"
       viewBox="0 0 9 14"
@@ -439,35 +438,35 @@
     </svg>`}
         </button>
       </div>
-    `}_getYearTemplate(){return $e`
-      <kuc-base-datetime-header-year-1-17-0
-        class="kuc-base-datetime-calendar-header-1-17-0__year"
+    `}_getYearTemplate(){return we`
+      <kuc-base-datetime-header-year-1-17-1
+        class="kuc-base-datetime-calendar-header-1-17-1__year"
         .postfix="${this._locale.YEAR_SELECT_POSTFIX}"
         .year="${this.year}"
         @kuc:year-dropdown-change="${this._handleYearDropdownChange}"
         @kuc:year-dropdown-click="${this._handleYearDropdownClick}"
       >
-      </kuc-base-datetime-header-year-1-17-0>
-    `}_getMonthTemplate(){return $e`
-      <kuc-base-datetime-header-month-1-17-0
-        class="kuc-base-datetime-calendar-header-1-17-0__month"
+      </kuc-base-datetime-header-year-1-17-1>
+    `}_getMonthTemplate(){return we`
+      <kuc-base-datetime-header-month-1-17-1
+        class="kuc-base-datetime-calendar-header-1-17-1__month"
         .month="${this.month}"
         .language="${this.language}"
         @kuc:month-dropdown-change="${this._handleMonthDropdownChange}"
         @kuc:month-dropdown-click="${this._handleMonthDropdownClick}"
       >
-      </kuc-base-datetime-header-month-1-17-0>
-    `}_getYearMonthTemplate(){return"zh"===this.language||"ja"===this.language||"zh-TW"===this.language?$e` ${this._getYearTemplate()}${this._getMonthTemplate()} `:$e` ${this._getMonthTemplate()}${this._getYearTemplate()} `}_handleMonthDropdownChange(e){e.stopPropagation(),e.preventDefault(),this.month=parseInt(e.detail.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleYearDropdownChange(e){e.stopPropagation(),e.preventDefault(),this.year=parseInt(e.detail.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleYearDropdownClick(){this._listBoxMonthEl&&this._baseDateTimeHeaderMonthEl.closeListBox()}_handleMonthDropdownClick(){this._listBoxYearEl&&this._baseDateTimeHeaderYearEl.closeListBox()}_handleClickCalendarPrevMonthBtn(e){e.stopPropagation(),1===this.month?(this.month=12,this.year--):this.month-=1,this._dispatchCalendarHeaderChangeEvent()}_handleKeyDownCalendarPrevMonthBtn(e){e.shiftKey&&"Tab"===e.key&&(e.preventDefault(),gi(this,"kuc:calendar-header-previous-shifttab"))}_handleClickCalendarNextMonthBtn(e){e.stopPropagation(),12===this.month?(this.month=1,this.year++):this.month+=1,this._dispatchCalendarHeaderChangeEvent()}_dispatchCalendarHeaderChangeEvent(){const e=this.year,t=this.month;gi(this,"kuc:calendar-header-change",{value:`${e}-${t}`})}}Wi([Fe({type:String,attribute:"lang",reflect:!0})],qi.prototype,"language",void 0),Wi([Fe({type:Number,hasChanged(e){return(t=e)>0&&t<13;var t}})],qi.prototype,"month",void 0),Wi([Fe({type:Number,hasChanged(e){return(t=e)>=0&&t<1e4;var t}})],qi.prototype,"year",void 0),Wi([Ke(".kuc-base-datetime-calendar-header-1-17-0__month")],qi.prototype,"_baseDateTimeHeaderMonthEl",void 0),Wi([Ke(".kuc-base-datetime-calendar-header-1-17-0__year")],qi.prototype,"_baseDateTimeHeaderYearEl",void 0),Wi([Ke(".kuc-base-datetime-header-month-1-17-0__listbox")],qi.prototype,"_listBoxMonthEl",void 0),Wi([Ke(".kuc-base-datetime-header-year-1-17-0__listbox")],qi.prototype,"_listBoxYearEl",void 0),window.customElements.get("kuc-base-datetime-calendar-header-1-17-0")||(mi('\nkuc-base-datetime-calendar-header-1-17-0,\nkuc-base-datetime-calendar-header-1-17-0 *,\nkuc-base-datetime-calendar-header-1-17-0:lang(en),\nkuc-base-datetime-calendar-header-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-calendar-header-1-17-0:lang(ja),\nkuc-base-datetime-calendar-header-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n  font-weight: 700;\n}\nkuc-base-datetime-calendar-header-1-17-0:lang(zh),\nkuc-base-datetime-calendar-header-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-base-datetime-calendar-header-1-17-0:lang(zh-TW),\nkuc-base-datetime-calendar-header-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\nkuc-base-datetime-calendar-header-1-17-0:lang(ja) kuc-base-datetime-listbox-1-17-0 * {\n  font-weight: 400;\n}\n.kuc-base-datetime-calendar-header-1-17-0__group {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  border-bottom: 1px solid #e3e7e8;\n  padding: 0;\n  white-space: nowrap;\n  width: 266px;\n  height: 44px;\n}\n.kuc-base-datetime-calendar-header-1-17-0__group__button {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  outline: none;\n  width: 38px;\n  height: 32px;\n  margin: 0;\n  text-align: center;\n}\n.kuc-base-datetime-calendar-header-1-17-0__group__button:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n.kuc-base-datetime-calendar-header-1-17-0__group__button-icon {\n  vertical-align: middle;\n}\n.kuc-base-datetime-calendar-header-1-17-0__group__center {\n  width: 190px;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n}\n.kuc-base-datetime-calendar-header-1-17-0__month {\n  margin: 0 4px 0 4px;\n}\n'),window.customElements.define("kuc-base-datetime-calendar-header-1-17-0",qi));var Ki=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Yi extends bi{constructor(){super(),this.month=1,this.year=2021,this.language="en",this.value="",this._month=1,this._year=2021,this._locale=Qt("en"),this._handleClickDocument=this._handleClickDocument.bind(this),this._handleKeyDownDocument=this._handleKeyDownDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument),document.addEventListener("keydown",this._handleKeyDownDocument)}),1)}disconnectedCallback(){document.removeEventListener("click",this._handleClickDocument),document.removeEventListener("keydown",this._handleKeyDownDocument),super.disconnectedCallback()}update(e){if(e.forEach(((e,t)=>{"language"===t&&(this._locale=Qt(this.language))})),e.has("month")&&(this._month=this.month),e.has("year")&&(this._year=this.year),e.has("value")){const{month:e,year:t}=this._separateDateValue();this._month=parseInt(e,10),this._year=parseInt(t,10)}super.update(e)}render(){return $e`
-      <table class="kuc-base-datetime-calendar-body-1-17-0__table" role="grid">
+      </kuc-base-datetime-header-month-1-17-1>
+    `}_getYearMonthTemplate(){return"zh"===this.language||"ja"===this.language||"zh-TW"===this.language?we` ${this._getYearTemplate()}${this._getMonthTemplate()} `:we` ${this._getMonthTemplate()}${this._getYearTemplate()} `}_handleMonthDropdownChange(e){e.stopPropagation(),e.preventDefault(),this.month=parseInt(e.detail.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleYearDropdownChange(e){e.stopPropagation(),e.preventDefault(),this.year=parseInt(e.detail.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleYearDropdownClick(){this._listBoxMonthEl&&this._baseDateTimeHeaderMonthEl.closeListBox()}_handleMonthDropdownClick(){this._listBoxYearEl&&this._baseDateTimeHeaderYearEl.closeListBox()}_handleClickCalendarPrevMonthBtn(e){e.stopPropagation(),1===this.month?(this.month=12,this.year--):this.month-=1,this._dispatchCalendarHeaderChangeEvent()}_handleKeyDownCalendarPrevMonthBtn(e){e.shiftKey&&"Tab"===e.key&&(e.preventDefault(),gi(this,"kuc:calendar-header-previous-shifttab"))}_handleClickCalendarNextMonthBtn(e){e.stopPropagation(),12===this.month?(this.month=1,this.year++):this.month+=1,this._dispatchCalendarHeaderChangeEvent()}_dispatchCalendarHeaderChangeEvent(){const e=this.year,t=this.month;gi(this,"kuc:calendar-header-change",{value:`${e}-${t}`})}}Wi([Ge({type:String,attribute:"lang",reflect:!0})],qi.prototype,"language",void 0),Wi([Ge({type:Number,hasChanged(e){return(t=e)>0&&t<13;var t}})],qi.prototype,"month",void 0),Wi([Ge({type:Number,hasChanged(e){return(t=e)>=0&&t<1e4;var t}})],qi.prototype,"year",void 0),Wi([qe(".kuc-base-datetime-calendar-header-1-17-1__month")],qi.prototype,"_baseDateTimeHeaderMonthEl",void 0),Wi([qe(".kuc-base-datetime-calendar-header-1-17-1__year")],qi.prototype,"_baseDateTimeHeaderYearEl",void 0),Wi([qe(".kuc-base-datetime-header-month-1-17-1__listbox")],qi.prototype,"_listBoxMonthEl",void 0),Wi([qe(".kuc-base-datetime-header-year-1-17-1__listbox")],qi.prototype,"_listBoxYearEl",void 0),window.customElements.get("kuc-base-datetime-calendar-header-1-17-1")||(mi('\nkuc-base-datetime-calendar-header-1-17-1,\nkuc-base-datetime-calendar-header-1-17-1 *,\nkuc-base-datetime-calendar-header-1-17-1:lang(en),\nkuc-base-datetime-calendar-header-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-calendar-header-1-17-1:lang(ja),\nkuc-base-datetime-calendar-header-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n  font-weight: 700;\n}\nkuc-base-datetime-calendar-header-1-17-1:lang(zh),\nkuc-base-datetime-calendar-header-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-base-datetime-calendar-header-1-17-1:lang(zh-TW),\nkuc-base-datetime-calendar-header-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\nkuc-base-datetime-calendar-header-1-17-1:lang(ja) kuc-base-datetime-listbox-1-17-1 * {\n  font-weight: 400;\n}\n.kuc-base-datetime-calendar-header-1-17-1__group {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  border-bottom: 1px solid #e3e7e8;\n  padding: 0;\n  white-space: nowrap;\n  width: 266px;\n  height: 44px;\n}\n.kuc-base-datetime-calendar-header-1-17-1__group__button {\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  outline: none;\n  width: 38px;\n  height: 32px;\n  margin: 0;\n  text-align: center;\n}\n.kuc-base-datetime-calendar-header-1-17-1__group__button:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n.kuc-base-datetime-calendar-header-1-17-1__group__button-icon {\n  vertical-align: middle;\n}\n.kuc-base-datetime-calendar-header-1-17-1__group__center {\n  width: 190px;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n}\n.kuc-base-datetime-calendar-header-1-17-1__month {\n  margin: 0 4px 0 4px;\n}\n'),window.customElements.define("kuc-base-datetime-calendar-header-1-17-1",qi));var Ki=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Yi extends bi{constructor(){super(),this.month=1,this.year=2021,this.language="en",this.value="",this._month=1,this._year=2021,this._locale=Xt("en"),this._handleClickDocument=this._handleClickDocument.bind(this),this._handleKeyDownDocument=this._handleKeyDownDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument),document.addEventListener("keydown",this._handleKeyDownDocument)}),1)}disconnectedCallback(){document.removeEventListener("click",this._handleClickDocument),document.removeEventListener("keydown",this._handleKeyDownDocument),super.disconnectedCallback()}update(e){if(e.forEach(((e,t)=>{"language"===t&&(this._locale=Xt(this.language))})),e.has("month")&&(this._month=this.month),e.has("year")&&(this._year=this.year),e.has("value")){const{month:e,year:t}=this._separateDateValue();this._month=parseInt(e,10),this._year=parseInt(t,10)}super.update(e)}render(){return we`
+      <table class="kuc-base-datetime-calendar-body-1-17-1__table" role="grid">
         ${this._getHeaderItemsTemplate()}<!--
         -->${this._getDateItemsTemplate()}
       </table>
-    `}updated(e){e.has("value")&&this._focusDateEl(),super.update(e)}_handleClickDocument(){gi(this,"kuc:calendar-body-blur",{})}_handleKeyDownDocument(e){"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),gi(this,"kuc:calendar-body-blur",{}))}_handleClickDate(e){e.preventDefault(),e.stopPropagation();const t=e.target;t.setAttribute("aria-selected","true");const i=t.getAttribute("data-date")||"";this._dispatchClickEvent(i)}_handleKeyDownDate(e){let t=!1;switch(e.key){case"Up":case"ArrowUp":t=!0,this._moveToDate(-7);break;case"Down":case"ArrowDown":t=!0,this._moveToDate(7);break;case"Left":case"ArrowLeft":t=!0,this._moveToDate(-1);break;case"Right":case"ArrowRight":t=!0,this._moveToDate(1);break;case" ":case"Enter":{t=!0;const e=this._getSelectedValue();this._dispatchClickEvent(e);break}}t&&(e.stopPropagation(),e.preventDefault())}_dispatchClickEvent(e){const t={oldValue:this.value,value:e};gi(this,"kuc:calendar-body-click-date",t),this.value=e}_isToday(e){const t=new Date;return parseInt(e[0],10)===t.getFullYear()&&parseInt(e[1],10)===t.getMonth()+1&&parseInt(e[2],10)===t.getDate()}_moveToDate(e){let t=this.value;const i=this._getSelectedValue(),{day:n}=this._separateDateValue(i);t=`${this._year}-${Zt(this._month)}-${n}`;const o=new Date(`${t||this._getValueItemFocused()}T00:00:00`);if(isNaN(o.getTime()))return;o.setDate(o.getDate()+e);const a=this._getDateString(o),s=t;this.value=a,gi(this,"kuc:calendar-body-change-date",{oldValue:s,value:a})}_separateDateValue(e=this.value){const t=e.split("-");return{day:t[2],month:t[1],year:t[0]}}_getSelectedValue(){return this._highlightItem?this._highlightItem.dataset.date||"":this._selectedItem&&this._selectedItem.getAttribute("data-date")||""}_getValueItemFocused(){return this._focusedItem&&this._focusedItem.getAttribute("data-date")||""}_getDateClass(e,t){return t?this._isToday(e)?" kuc-base-datetime-calendar-body-1-17-0__table__date--selected--today":"":this._isToday(e)?" kuc-base-datetime-calendar-body-1-17-0__table__date--selected--today":" kuc-base-datetime-calendar-body-1-17-0__table__date--other-month"}_getDateString(e=new Date){return`${e.getFullYear()}-${Zt(e.getMonth()+1)}-${Zt(e.getDate())}`}_isSameDayOfMoment(e){const t=parseInt(e[1],10),i=parseInt(e[2],10),n=parseInt(e[0],10);let o=(new Date).getDate();if(!this.value.split("-")[2])return!1;if(this.value&&(o=new Date(`${this.value}T00:00:00`).getDate()),o===i&&t===this._month)return!0;const a=new Date(n,this._month,0).getDate();return o>a&&a===i&&t===this._month}_getHeaderItemsTemplate(){return $e`
+    `}updated(e){e.has("value")&&this._focusDateEl(),super.update(e)}_handleClickDocument(){gi(this,"kuc:calendar-body-blur",{})}_handleKeyDownDocument(e){"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),gi(this,"kuc:calendar-body-blur",{}))}_handleClickDate(e){e.preventDefault(),e.stopPropagation();const t=e.target;t.setAttribute("aria-selected","true");const i=t.getAttribute("data-date")||"";this._dispatchClickEvent(i)}_handleKeyDownDate(e){let t=!1;switch(e.key){case"Up":case"ArrowUp":t=!0,this._moveToDate(-7);break;case"Down":case"ArrowDown":t=!0,this._moveToDate(7);break;case"Left":case"ArrowLeft":t=!0,this._moveToDate(-1);break;case"Right":case"ArrowRight":t=!0,this._moveToDate(1);break;case" ":case"Enter":{t=!0;const e=this._getSelectedValue();this._dispatchClickEvent(e);break}}t&&(e.stopPropagation(),e.preventDefault())}_dispatchClickEvent(e){const t={oldValue:this.value,value:e};gi(this,"kuc:calendar-body-click-date",t),this.value=e}_isToday(e){const t=new Date;return parseInt(e[0],10)===t.getFullYear()&&parseInt(e[1],10)===t.getMonth()+1&&parseInt(e[2],10)===t.getDate()}_moveToDate(e){let t=this.value;const i=this._getSelectedValue(),{day:n}=this._separateDateValue(i);t=`${this._year}-${Jt(this._month)}-${n}`;const o=new Date(`${t||this._getValueItemFocused()}T00:00:00`);if(isNaN(o.getTime()))return;o.setDate(o.getDate()+e);const a=this._getDateString(o),s=t;this.value=a,gi(this,"kuc:calendar-body-change-date",{oldValue:s,value:a})}_separateDateValue(e=this.value){const t=e.split("-");return{day:t[2],month:t[1],year:t[0]}}_getSelectedValue(){return this._highlightItem?this._highlightItem.dataset.date||"":this._selectedItem&&this._selectedItem.getAttribute("data-date")||""}_getValueItemFocused(){return this._focusedItem&&this._focusedItem.getAttribute("data-date")||""}_getDateClass(e,t){return t?this._isToday(e)?" kuc-base-datetime-calendar-body-1-17-1__table__date--selected--today":"":this._isToday(e)?" kuc-base-datetime-calendar-body-1-17-1__table__date--selected--today":" kuc-base-datetime-calendar-body-1-17-1__table__date--other-month"}_getDateString(e=new Date){return`${e.getFullYear()}-${Jt(e.getMonth()+1)}-${Jt(e.getDate())}`}_isSameDayOfMoment(e){const t=parseInt(e[1],10),i=parseInt(e[2],10),n=parseInt(e[0],10);let o=(new Date).getDate();if(!this.value.split("-")[2])return!1;if(this.value&&(o=new Date(`${this.value}T00:00:00`).getDate()),o===i&&t===this._month)return!0;const a=new Date(n,this._month,0).getDate();return o>a&&a===i&&t===this._month}_getHeaderItemsTemplate(){return we`
       <thead>
         <tr>
-          ${this._locale.WEEK_DAYS.map((e=>$e`
+          ${this._locale.WEEK_DAYS.map((e=>we`
               <th
-                class="kuc-base-datetime-calendar-body-1-17-0__table__header"
+                class="kuc-base-datetime-calendar-body-1-17-1__table__header"
                 role="columnheader"
                 abbr="${e.abbr}"
               >
@@ -476,14 +475,14 @@
             `))}
         </tr>
       </thead>
-    `}_getDateItemsTemplate(){const e=Ot(this._year,this._month-1),t=this._locale.MONTH_SELECT[this._month-1];return $e`
+    `}_getDateItemsTemplate(){const e=Bt(this._year,this._month-1),t=this._locale.MONTH_SELECT[this._month-1];return we`
       <tbody>
-        ${e.map((e=>$e`
+        ${e.map((e=>we`
             <tr>
-              ${e.map((e=>{const i=e.text.split("-"),n=this._isSameDayOfMoment(i),o=parseInt(i[1],10)===this._month,a=(this.value===e.attr||n)&&o;return $e`
+              ${e.map((e=>{const i=e.text.split("-"),n=this._isSameDayOfMoment(i),o=parseInt(i[1],10)===this._month,a=(this.value===e.attr||n)&&o;return we`
                   <td
                     role="gridcell"
-                    class="kuc-base-datetime-calendar-body-1-17-0__table__date${a?"--selected":""}${this._getDateClass(i,o)}"
+                    class="kuc-base-datetime-calendar-body-1-17-1__table__date${a?"--selected":""}${this._getDateClass(i,o)}"
                     aria-selected="${this.value===e.attr}"
                     tabindex="${a?"0":"-1"}"
                     aria-current="${!!this._isToday(i)&&"date"}"
@@ -498,66 +497,66 @@
             </tr>
           `))}
       </tbody>
-    `}_focusDateEl(){this._focusedItem&&this._focusedItem.focus({preventScroll:!0})}}Ki([Fe({type:Number})],Yi.prototype,"month",void 0),Ki([Fe({type:Number})],Yi.prototype,"year",void 0),Ki([Fe({type:String,attribute:"lang",reflect:!0})],Yi.prototype,"language",void 0),Ki([Fe({type:String,reflect:!0})],Yi.prototype,"value",void 0),Ki([We()],Yi.prototype,"_month",void 0),Ki([We()],Yi.prototype,"_year",void 0),Ki([Ke('.kuc-base-datetime-calendar-body-1-17-0__table__date--selected[aria-selected="true"]')],Yi.prototype,"_selectedItem",void 0),Ki([Ke(".kuc-base-datetime-calendar-body-1-17-0__table__date--selected")],Yi.prototype,"_highlightItem",void 0),Ki([Ke('.kuc-base-datetime-calendar-body-1-17-0__table__date--selected[tabindex="0"]')],Yi.prototype,"_focusedItem",void 0),window.customElements.get("kuc-base-datetime-calendar-body-1-17-0")||(mi('\nkuc-base-datetime-calendar-body-1-17-0,\nkuc-base-datetime-calendar-body-1-17-0 *,\nkuc-base-datetime-calendar-body-1-17-0:lang(en),\nkuc-base-datetime-calendar-body-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-calendar-body-1-17-0:lang(ja),\nkuc-base-datetime-calendar-body-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-base-datetime-calendar-body-1-17-0:lang(zh),\nkuc-base-datetime-calendar-body-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\n\nkuc-base-datetime-calendar-body-1-17-0:lang(zh-TW),\nkuc-base-datetime-calendar-body-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table,\n.kuc-base-datetime-calendar-body-1-17-0__table tr {\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date,\n.kuc-base-datetime-calendar-body-1-17-0__table__date--selected {\n  border-spacing: 1px;\n  padding: 0px;\n  border: 1px solid #ffffff;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__header {\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 10px;\n  font-weight: 400;\n  color: #333333;\n}\n:lang(ja) th.kuc-base-datetime-calendar-body-1-17-0__table__header {\n  font-weight: 700;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date--selected,\n.kuc-base-datetime-calendar-body-1-17-0__table__date,\n.kuc-base-datetime-calendar-body-1-17-0__table__header {\n  box-sizing: border-box;\n  padding: 8px 0;\n  width: 36px;\n  height: 31px;\n  border: 1px solid #ffffff;\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 10px;\n  font-weight: 400;\n  color: #333333;\n  cursor: pointer;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__header:nth-child(1),\n.kuc-base-datetime-calendar-body-1-17-0__table__header:nth-child(7) {\n  color: #d4d7d7;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date:focus,\n.kuc-base-datetime-calendar-body-1-17-0__table__date--selected:focus {\n  outline: none;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date\n  .kuc-base-datetime-calendar-body-1-17-0__table__date__button:hover {\n  color: #000000;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date--selected {\n  border-color: #3498db;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date--selected--today,\n.kuc-base-datetime-calendar-body-1-17-0__table__date--today {\n  color: #ffffff;\n  background: #888888;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date--today:hover {\n  color: #333333;\n}\n.kuc-base-datetime-calendar-body-1-17-0__table__date--other-month,\n.kuc-base-datetime-calendar-body-1-17-0__table__date--other-month:hover {\n  color: #d4d7d7;\n}\n'),window.customElements.define("kuc-base-datetime-calendar-body-1-17-0",Yi));var Ji=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Zi extends bi{constructor(){super(...arguments),this.language="en",this._locale=Qt("en")}update(e){e.has("language")&&(this._locale=Qt(this.language)),super.update(e)}_handleClickCalendarFooterButtonNone(e){e.stopPropagation(),gi(this,"kuc:calendar-footer-click-none")}_handleClickCalendarFooterButtonToday(e){e.stopPropagation(),gi(this,"kuc:calendar-footer-click-today")}_handleKeyDownCalendarFooterButtonNone(e){"Tab"===e.key&&(e.shiftKey||(e.preventDefault(),gi(this,"kuc:calendar-footer-tab-none")))}render(){return $e`
-      <div class="kuc-base-datetime-calendar-footer-1-17-0__group">
+    `}_focusDateEl(){this._focusedItem&&this._focusedItem.focus({preventScroll:!0})}}Ki([Ge({type:Number})],Yi.prototype,"month",void 0),Ki([Ge({type:Number})],Yi.prototype,"year",void 0),Ki([Ge({type:String,attribute:"lang",reflect:!0})],Yi.prototype,"language",void 0),Ki([Ge({type:String,reflect:!0})],Yi.prototype,"value",void 0),Ki([Fe()],Yi.prototype,"_month",void 0),Ki([Fe()],Yi.prototype,"_year",void 0),Ki([qe('.kuc-base-datetime-calendar-body-1-17-1__table__date--selected[aria-selected="true"]')],Yi.prototype,"_selectedItem",void 0),Ki([qe(".kuc-base-datetime-calendar-body-1-17-1__table__date--selected")],Yi.prototype,"_highlightItem",void 0),Ki([qe('.kuc-base-datetime-calendar-body-1-17-1__table__date--selected[tabindex="0"]')],Yi.prototype,"_focusedItem",void 0),window.customElements.get("kuc-base-datetime-calendar-body-1-17-1")||(mi('\nkuc-base-datetime-calendar-body-1-17-1,\nkuc-base-datetime-calendar-body-1-17-1 *,\nkuc-base-datetime-calendar-body-1-17-1:lang(en),\nkuc-base-datetime-calendar-body-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-calendar-body-1-17-1:lang(ja),\nkuc-base-datetime-calendar-body-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-base-datetime-calendar-body-1-17-1:lang(zh),\nkuc-base-datetime-calendar-body-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\n\nkuc-base-datetime-calendar-body-1-17-1:lang(zh-TW),\nkuc-base-datetime-calendar-body-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table,\n.kuc-base-datetime-calendar-body-1-17-1__table tr {\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date,\n.kuc-base-datetime-calendar-body-1-17-1__table__date--selected {\n  border-spacing: 1px;\n  padding: 0px;\n  border: 1px solid #ffffff;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__header {\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 10px;\n  font-weight: 400;\n  color: #333333;\n}\n:lang(ja) th.kuc-base-datetime-calendar-body-1-17-1__table__header {\n  font-weight: 700;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date--selected,\n.kuc-base-datetime-calendar-body-1-17-1__table__date,\n.kuc-base-datetime-calendar-body-1-17-1__table__header {\n  box-sizing: border-box;\n  padding: 8px 0;\n  width: 36px;\n  height: 31px;\n  border: 1px solid #ffffff;\n  text-align: center;\n  text-transform: uppercase;\n  font-size: 10px;\n  font-weight: 400;\n  color: #333333;\n  cursor: pointer;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__header:nth-child(1),\n.kuc-base-datetime-calendar-body-1-17-1__table__header:nth-child(7) {\n  color: #d4d7d7;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date:focus,\n.kuc-base-datetime-calendar-body-1-17-1__table__date--selected:focus {\n  outline: none;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date\n  .kuc-base-datetime-calendar-body-1-17-1__table__date__button:hover {\n  color: #000000;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date--selected {\n  border-color: #3498db;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date--selected--today,\n.kuc-base-datetime-calendar-body-1-17-1__table__date--today {\n  color: #ffffff;\n  background: #888888;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date--today:hover {\n  color: #333333;\n}\n.kuc-base-datetime-calendar-body-1-17-1__table__date--other-month,\n.kuc-base-datetime-calendar-body-1-17-1__table__date--other-month:hover {\n  color: #d4d7d7;\n}\n'),window.customElements.define("kuc-base-datetime-calendar-body-1-17-1",Yi));var Ji=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Zi extends bi{constructor(){super(...arguments),this.language="en",this._locale=Xt("en")}update(e){e.has("language")&&(this._locale=Xt(this.language)),super.update(e)}_handleClickCalendarFooterButtonNone(e){e.stopPropagation(),gi(this,"kuc:calendar-footer-click-none")}_handleClickCalendarFooterButtonToday(e){e.stopPropagation(),gi(this,"kuc:calendar-footer-click-today")}_handleKeyDownCalendarFooterButtonNone(e){"Tab"===e.key&&(e.shiftKey||(e.preventDefault(),gi(this,"kuc:calendar-footer-tab-none")))}render(){return we`
+      <div class="kuc-base-datetime-calendar-footer-1-17-1__group">
         <button
           type="button"
           tabindex="0"
-          class="kuc-base-datetime-calendar-footer-1-17-0__group__button kuc-base-datetime-calendar-footer-1-17-0__group__button--today"
+          class="kuc-base-datetime-calendar-footer-1-17-1__group__button kuc-base-datetime-calendar-footer-1-17-1__group__button--today"
           @click="${this._handleClickCalendarFooterButtonToday}"
         >
           ${this._locale.CALENDAR_FOOTER_TEXT.today}
         </button>
-        <span class="kuc-base-datetime-calendar-footer-1-17-0__group__center"></span>
+        <span class="kuc-base-datetime-calendar-footer-1-17-1__group__center"></span>
         <button
           type="button"
           tabindex="0"
-          class="kuc-base-datetime-calendar-footer-1-17-0__group__button kuc-base-datetime-calendar-footer-1-17-0__group__button--none"
+          class="kuc-base-datetime-calendar-footer-1-17-1__group__button kuc-base-datetime-calendar-footer-1-17-1__group__button--none"
           @click="${this._handleClickCalendarFooterButtonNone}"
           @keydown="${this._handleKeyDownCalendarFooterButtonNone}"
         >
           ${this._locale.CALENDAR_FOOTER_TEXT.none}
         </button>
       </div>
-    `}}Ji([Fe({type:String,attribute:"lang",reflect:!0})],Zi.prototype,"language",void 0),Ji([We()],Zi.prototype,"_locale",void 0),window.customElements.get("kuc-base-datetime-calendar-footer-1-17-0")||(mi('\nkuc-base-datetime-calendar-footer-1-17-0,\nkuc-base-datetime-calendar-footer-1-17-0 *,\nkuc-base-datetime-calendar-footer-1-17-0:lang(en),\nkuc-base-datetime-calendar-footer-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-calendar-footer-1-17-0:lang(ja),\nkuc-base-datetime-calendar-footer-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-base-datetime-calendar-footer-1-17-0:lang(zh),\nkuc-base-datetime-calendar-footer-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-base-datetime-calendar-footer-1-17-0:lang(zh-TW),\nkuc-base-datetime-calendar-footer-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\n.kuc-base-datetime-calendar-footer-1-17-0__group {\n  display: flex;\n  align-items: flex-end;\n  box-sizing: border-box;\n  padding: 0;\n  height: 27px;\n  white-space: nowrap;\n  width: 272px;\n}\n.kuc-base-datetime-calendar-footer-1-17-0__group__button {\n  background: transparent;\n  border: 1px solid transparent;\n  color: #3498db;\n  cursor: pointer;\n  font-size: 13px;\n  outline: none;\n}\n.kuc-base-datetime-calendar-footer-1-17-0__group__button:hover {\n  color: #217dbb;\n}\n.kuc-base-datetime-calendar-footer-1-17-0__group__button:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n.kuc-base-datetime-calendar-footer-1-17-0__group__center {\n  width: 100%;\n}\n'),window.customElements.define("kuc-base-datetime-calendar-footer-1-17-0",Zi));var Xi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Qi extends bi{constructor(){super(...arguments),this.language="en",this.value="",this._month=1,this._year=(new Date).getFullYear()}update(e){e.has("value")&&this._updateValue(),super.update(e)}render(){return $e`
+    `}}Ji([Ge({type:String,attribute:"lang",reflect:!0})],Zi.prototype,"language",void 0),Ji([Fe()],Zi.prototype,"_locale",void 0),window.customElements.get("kuc-base-datetime-calendar-footer-1-17-1")||(mi('\nkuc-base-datetime-calendar-footer-1-17-1,\nkuc-base-datetime-calendar-footer-1-17-1 *,\nkuc-base-datetime-calendar-footer-1-17-1:lang(en),\nkuc-base-datetime-calendar-footer-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-calendar-footer-1-17-1:lang(ja),\nkuc-base-datetime-calendar-footer-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-base-datetime-calendar-footer-1-17-1:lang(zh),\nkuc-base-datetime-calendar-footer-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-base-datetime-calendar-footer-1-17-1:lang(zh-TW),\nkuc-base-datetime-calendar-footer-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\n.kuc-base-datetime-calendar-footer-1-17-1__group {\n  display: flex;\n  align-items: flex-end;\n  box-sizing: border-box;\n  padding: 0;\n  height: 27px;\n  white-space: nowrap;\n  width: 272px;\n}\n.kuc-base-datetime-calendar-footer-1-17-1__group__button {\n  background: transparent;\n  border: 1px solid transparent;\n  color: #3498db;\n  cursor: pointer;\n  font-size: 13px;\n  outline: none;\n}\n.kuc-base-datetime-calendar-footer-1-17-1__group__button:hover {\n  color: #217dbb;\n}\n.kuc-base-datetime-calendar-footer-1-17-1__group__button:focus {\n  border: 1px solid #3498db;\n  outline: none;\n}\n.kuc-base-datetime-calendar-footer-1-17-1__group__center {\n  width: 100%;\n}\n'),window.customElements.define("kuc-base-datetime-calendar-footer-1-17-1",Zi));var Xi=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Qi extends bi{constructor(){super(...arguments),this.language="en",this.value="",this._month=1,this._year=(new Date).getFullYear()}update(e){e.has("value")&&this._updateValue(),super.update(e)}render(){return we`
       <div
-        class="kuc-base-datetime-calendar-1-17-0__group"
+        class="kuc-base-datetime-calendar-1-17-1__group"
         role="dialog"
         aria-modal="true"
         aria-label="Calender"
         @click="${this._handleClickCalendarGroup}"
         @keydown="${this._handleKeyDownCalendarGroup}"
       >
-        <kuc-base-datetime-calendar-header-1-17-0
+        <kuc-base-datetime-calendar-header-1-17-1
           .year="${this._year}"
           .month="${this._month}"
           .language="${this.language}"
           @kuc:calendar-header-change="${this._handleCalendarHeaderChange}"
-        ></kuc-base-datetime-calendar-header-1-17-0>
-        <kuc-base-datetime-calendar-body-1-17-0
+        ></kuc-base-datetime-calendar-header-1-17-1>
+        <kuc-base-datetime-calendar-body-1-17-1
           .year="${this._year}"
           .month="${this._month}"
           .value="${this.value}"
           .language="${this.language}"
           @kuc:calendar-body-change-date="${this._handleCalendarBodyChangeDate}"
-        ></kuc-base-datetime-calendar-body-1-17-0>
-        <kuc-base-datetime-calendar-footer-1-17-0
+        ></kuc-base-datetime-calendar-body-1-17-1>
+        <kuc-base-datetime-calendar-footer-1-17-1
           .language="${this.language}"
-        ></kuc-base-datetime-calendar-footer-1-17-0>
+        ></kuc-base-datetime-calendar-footer-1-17-1>
       </div>
-    `}async updated(e){await this.updateComplete,this._calculateBodyCalendarPosition(),super.updated(e)}_handleKeyDownCalendarGroup(e){"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),gi(this,"kuc:calendar-escape",{}))}_handleClickCalendarGroup(e){e.stopPropagation(),this._listBoxMonthEl&&this._monthEl.closeListBox(),this._listBoxYearEl&&this._yearEl.closeListBox()}_calculateBodyCalendarPosition(){const{inputToBottom:e,inputToTop:t,inputToRight:i,inputToLeft:n}=ni(this);e>=this._baseCalendarGroupEl.getBoundingClientRect().height||t<0||e>t?this._calculateCalendarPosition(i,n,"bottom"):this._calculateCalendarPosition(i,n,"top")}_calculateCalendarPosition(e,t,i){if(!this.parentElement)return;const n=this.parentElement.getElementsByClassName("kuc-base-date-1-17-0__input")[0],o=n.getBoundingClientRect().height,a=n.getBoundingClientRect().width;if(e<336&&e<t){const e=this.parentElement.getBoundingClientRect().width,t="bottom"===i?o:"auto",n="bottom"===i?"auto":o,s=e>a?e-a:0;return void this._setCalendarPosition({top:t,bottom:n,right:s})}const s="bottom"===i?o:"auto",r="bottom"===i?"auto":o;this._setCalendarPosition({bottom:r,top:s,left:0})}_setCalendarPosition({top:e="auto",left:t="auto",right:i="auto",bottom:n="auto"}){const o=this._baseCalendarGroupEl.parentElement;this.parentElement&&o&&(this.parentElement.style.position="relative",o.style.bottom="auto"===n?n:n+"px",o.style.top="auto"===e?e:e+"px",o.style.left="auto"===t?t:t+"px",o.style.right="auto"===i?i:i+"px")}_handleCalendarHeaderChange(e){const{year:t,month:i}=this._separateValue(e.detail.value);this._year=t,this._month=i}_handleCalendarBodyChangeDate(e){const{year:t,month:i}=this._separateValue(e.detail.value);this._year=t,this._month=i}_updateValue(){""===this.value&&(this.value=Yt().slice(0,7)+"-01");const{year:e,month:t}=this._separateValue(this.value);this._year=e,this._month=t}_separateValue(e){const t=e.split("-");return{year:parseInt(t[0],10),month:parseInt(t[1],10)}}}Xi([Fe({type:String,attribute:"lang",reflect:!0})],Qi.prototype,"language",void 0),Xi([Fe({type:String,reflect:!0})],Qi.prototype,"value",void 0),Xi([Ke(".kuc-base-datetime-calendar-1-17-0__group")],Qi.prototype,"_baseCalendarGroupEl",void 0),Xi([Ke(".kuc-base-datetime-calendar-header-1-17-0__month")],Qi.prototype,"_monthEl",void 0),Xi([Ke(".kuc-base-datetime-calendar-header-1-17-0__year")],Qi.prototype,"_yearEl",void 0),Xi([Ke(".kuc-base-datetime-header-month-1-17-0__listbox")],Qi.prototype,"_listBoxMonthEl",void 0),Xi([Ke(".kuc-base-datetime-header-year-1-17-0__listbox")],Qi.prototype,"_listBoxYearEl",void 0),Xi([We()],Qi.prototype,"_month",void 0),Xi([We()],Qi.prototype,"_year",void 0),window.customElements.get("kuc-base-datetime-calendar-1-17-0")||(mi("\n.kuc-base-datetime-calendar-1-17-0__group {\n  display: inline-block;\n  box-sizing: border-box;\n  width: 336px;\n  padding: 32px 32px 24px;\n  background: #ffffff;\n  box-shadow: 0 0 8px 2px rgb(0 0 0 / 10%);\n  text-align: center;\n  font-size: 13px;\n}\n"),window.customElements.define("kuc-base-datetime-calendar-1-17-0",Qi));var en=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class tn extends bi{constructor(){super(),this.value="",this.items=[],this.maxHeight=300,this.doFocus=!0,this._actionKeyboard=!1,this._firstHighlight=!0,this._handleClickDocument=this._handleClickDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument)}),1)}disconnectedCallback(){document.removeEventListener("click",this._handleClickDocument),super.disconnectedCallback()}getHighlightItemEl(){return this._highlightItemEl}render(){return $e`
+    `}async updated(e){await this.updateComplete,this._calculateBodyCalendarPosition(),super.updated(e)}_handleKeyDownCalendarGroup(e){"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),gi(this,"kuc:calendar-escape",{}))}_handleClickCalendarGroup(e){e.stopPropagation(),this._listBoxMonthEl&&this._monthEl.closeListBox(),this._listBoxYearEl&&this._yearEl.closeListBox()}_calculateBodyCalendarPosition(){const{inputToBottom:e,inputToTop:t,inputToRight:i,inputToLeft:n}=ii(this);e>=this._baseCalendarGroupEl.getBoundingClientRect().height||t<0||e>t?this._calculateCalendarPosition(i,n,"bottom"):this._calculateCalendarPosition(i,n,"top")}_calculateCalendarPosition(e,t,i){if(!this.parentElement)return;const n=this.parentElement.getElementsByClassName("kuc-base-date-1-17-1__input")[0],o=n.getBoundingClientRect().height,a=n.getBoundingClientRect().width;if(e<336&&e<t){const e=this.parentElement.getBoundingClientRect().width,t="bottom"===i?o:"auto",n="bottom"===i?"auto":o,s=e>a?e-a:0;return void this._setCalendarPosition({top:t,bottom:n,right:s})}const s="bottom"===i?o:"auto",r="bottom"===i?"auto":o;this._setCalendarPosition({bottom:r,top:s,left:0})}_setCalendarPosition({top:e="auto",left:t="auto",right:i="auto",bottom:n="auto"}){const o=this._baseCalendarGroupEl.parentElement;this.parentElement&&o&&(this.parentElement.style.position="relative",o.style.bottom="auto"===n?n:n+"px",o.style.top="auto"===e?e:e+"px",o.style.left="auto"===t?t:t+"px",o.style.right="auto"===i?i:i+"px")}_handleCalendarHeaderChange(e){const{year:t,month:i}=this._separateValue(e.detail.value);this._year=t,this._month=i}_handleCalendarBodyChangeDate(e){const{year:t,month:i}=this._separateValue(e.detail.value);this._year=t,this._month=i}_updateValue(){""===this.value&&(this.value=Kt().slice(0,7)+"-01");const{year:e,month:t}=this._separateValue(this.value);this._year=e,this._month=t}_separateValue(e){const t=e.split("-");return{year:parseInt(t[0],10),month:parseInt(t[1],10)}}}Xi([Ge({type:String,attribute:"lang",reflect:!0})],Qi.prototype,"language",void 0),Xi([Ge({type:String,reflect:!0})],Qi.prototype,"value",void 0),Xi([qe(".kuc-base-datetime-calendar-1-17-1__group")],Qi.prototype,"_baseCalendarGroupEl",void 0),Xi([qe(".kuc-base-datetime-calendar-header-1-17-1__month")],Qi.prototype,"_monthEl",void 0),Xi([qe(".kuc-base-datetime-calendar-header-1-17-1__year")],Qi.prototype,"_yearEl",void 0),Xi([qe(".kuc-base-datetime-header-month-1-17-1__listbox")],Qi.prototype,"_listBoxMonthEl",void 0),Xi([qe(".kuc-base-datetime-header-year-1-17-1__listbox")],Qi.prototype,"_listBoxYearEl",void 0),Xi([Fe()],Qi.prototype,"_month",void 0),Xi([Fe()],Qi.prototype,"_year",void 0),window.customElements.get("kuc-base-datetime-calendar-1-17-1")||(mi("\n.kuc-base-datetime-calendar-1-17-1__group {\n  display: inline-block;\n  box-sizing: border-box;\n  width: 336px;\n  padding: 32px 32px 24px;\n  background: #ffffff;\n  box-shadow: 0 0 8px 2px rgb(0 0 0 / 10%);\n  text-align: center;\n  font-size: 13px;\n}\n"),window.customElements.define("kuc-base-datetime-calendar-1-17-1",Qi));var en=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class tn extends bi{constructor(){super(),this.value="",this.items=[],this.maxHeight=300,this.doFocus=!0,this._actionKeyboard=!1,this._firstHighlight=!0,this._handleClickDocument=this._handleClickDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument)}),1)}disconnectedCallback(){document.removeEventListener("click",this._handleClickDocument),super.disconnectedCallback()}getHighlightItemEl(){return this._highlightItemEl}render(){return we`
       <ul
         style="max-height: ${this.maxHeight}px;"
-        class="kuc-base-datetime-listbox-1-17-0__listbox"
+        class="kuc-base-datetime-listbox-1-17-1__listbox"
         role="listbox"
         @mousedown="${this._handleMouseDownListBox}"
         @click="${this._handleClickListBox}"
       >
         ${this.items.map((e=>this._getListBoxItemTemplate(e)))}
       </ul>
-    `}async updated(e){await this.updateComplete,e.has("value")&&this._highlightSelectedItem(),this._setListBoxPosition(),this._scrollToView(),super.updated(e)}_handleClickDocument(){gi(this,"kuc:listbox-blur",{})}_handleClickListBox(e){e.stopPropagation()}_handleKeyDownListBox(e){switch(e.preventDefault(),e.stopPropagation(),e.key){case"Up":case"ArrowUp":this._actionKeyboard=!0,this._highlightPrevItemEl(),this._focusHighlightItemEl(),this._scrollToView();break;case"Down":case"ArrowDown":this._actionKeyboard=!0,this._highlightNextItemEl(),this._focusHighlightItemEl(),this._scrollToView();break;case"Home":this._actionKeyboard=!0,this._highlightFirstItem(),this._focusHighlightItemEl();break;case"End":this._actionKeyboard=!0,this._highlightLastItem(),this._focusHighlightItemEl();break;case"Tab":gi(this,"kuc:listbox-click",{});break;case"Escape":gi(this,"kuc:listbox-escape",{});break;case" ":case"Enter":{const e=this._highlightItemEl.getAttribute("value");gi(this,"kuc:listbox-click",{value:e||""});break}}}_handleMouseDownListBox(e){if(e.preventDefault(),e.stopPropagation(),e.target===e.currentTarget)return;const t=e.target.getAttribute("value")||"";gi(this,"kuc:listbox-click",{value:t})}_handleMouseOverItem(e){if(this._actionKeyboard)return void(this._actionKeyboard=!1);const t=e.target;this._setHighlightItemEl(t),this.doFocus&&this._focusHighlightItemEl(!1)}_setListBoxPosition(){const e=this._listBoxEl.getBoundingClientRect().height;if(!this._listBoxEl.parentElement||!this.parentElement)return;const t=window.innerHeight-this.parentElement.getBoundingClientRect().bottom,i=this.parentElement.offsetHeight;this._listBoxEl.style.bottom="auto",this._listBoxEl.style.left="auto",t>=e||(this.parentElement.style.position="relative",this._listBoxEl.style.bottom=i+"px",this._listBoxEl.style.left="0px")}_setHighlightItemEl(e){this._removeHighlight(),e.classList.add("kuc-base-datetime-listbox-1-17-0__listbox--highlight"),e.setAttribute("tabindex","0")}_highlightSelectedItem(){if(!this.doFocus)return;const e=Array.from(this._itemsEl).filter((e=>"true"===e.getAttribute("aria-selected")))[0];e&&(this._itemSelectedEl=e,this._setHighlightItemEl(e),this._focusHighlightItemEl())}_highlightFirstItem(){this._itemSelectedEl=this._firstItemEl,this._setHighlightItemEl(this._firstItemEl)}_highlightLastItem(){this._itemSelectedEl=this._lastItemEl,this._setHighlightItemEl(this._lastItemEl)}_highlightNextItemEl(){if(null===this._highlightItemEl||null===this._iconChecked)return void this._highlightFirstItem();const e=this._getNextItemEl();if(e)return this._setHighlightItemEl(e),this._firstHighlight=!1,void(this._itemSelectedEl=e);this._highlightFirstItem()}_getNextItemEl(){const e=this._iconChecked.parentElement;!this._itemSelectedEl&&e&&this._firstHighlight&&(this._itemSelectedEl=e);let t=this._highlightItemEl.nextElementSibling;return this._itemSelectedEl?this._itemSelectedEl.nextElementSibling?(t=this._itemSelectedEl.nextElementSibling,t):this._firstItemEl:t}_highlightPrevItemEl(){if(null===this._highlightItemEl||null===this._iconChecked)return void this._highlightLastItem();const e=this._getPreviousItemEl();if(e)return this._setHighlightItemEl(e),this._firstHighlight=!1,void(this._itemSelectedEl=e);this._highlightLastItem()}_getPreviousItemEl(){const e=this._iconChecked.parentElement;!this._itemSelectedEl&&e&&this._firstHighlight&&(this._itemSelectedEl=e);let t=this._highlightItemEl.previousElementSibling;return this._itemSelectedEl?this._itemSelectedEl.previousElementSibling?(t=this._itemSelectedEl.previousElementSibling,t):this._lastItemEl:t}_removeHighlight(){this._highlightItemEl&&(this._highlightItemEl.setAttribute("tabindex","-1"),this._highlightItemEl.classList.remove("kuc-base-datetime-listbox-1-17-0__listbox--highlight"))}_focusHighlightItemEl(e){const t=this._highlightItemEl;t&&(t.focus({preventScroll:!0}),!1!==e&&this._dispatchListBoxFocusChange())}_dispatchListBoxFocusChange(){const e=this._highlightItemEl.getAttribute("value")||"";gi(this,"kuc:listbox-focus-change",{value:e})}_scrollToView(){const e=this._highlightItemEl||this._getHighlightItemByValue();if(!e||!this._listBoxEl)return;const t=e.offsetHeight,i=this._listBoxEl.clientHeight/t/2;let n=e.offsetTop-i*t;n<0&&(n=0),this._listBoxEl.scrollTop=n}_getHighlightItemByValue(){const e=Array.from(this._listBoxEl.children),t=new Date(Date.parse(`2021/01/01 ${this.value}`));let i=e.find((e=>new Date(Date.parse(`2021/01/01 ${e.title}`))>=t));return i||(i=e[e.length-1]),this.doFocus&&i?(this._setHighlightItemEl(i),this._focusHighlightItemEl(),i):i}_getListBoxItemTemplate(e){const t=this.value===e.value&&this.doFocus;return $e`
+    `}async updated(e){await this.updateComplete,e.has("value")&&this._highlightSelectedItem(),this._setListBoxPosition(),this._scrollToView(),super.updated(e)}_handleClickDocument(){gi(this,"kuc:listbox-blur",{})}_handleClickListBox(e){e.stopPropagation()}_handleKeyDownListBox(e){switch(e.preventDefault(),e.stopPropagation(),e.key){case"Up":case"ArrowUp":this._actionKeyboard=!0,this._highlightPrevItemEl(),this._focusHighlightItemEl(),this._scrollToView();break;case"Down":case"ArrowDown":this._actionKeyboard=!0,this._highlightNextItemEl(),this._focusHighlightItemEl(),this._scrollToView();break;case"Home":this._actionKeyboard=!0,this._highlightFirstItem(),this._focusHighlightItemEl();break;case"End":this._actionKeyboard=!0,this._highlightLastItem(),this._focusHighlightItemEl();break;case"Tab":gi(this,"kuc:listbox-click",{});break;case"Escape":gi(this,"kuc:listbox-escape",{});break;case" ":case"Enter":{const e=this._highlightItemEl.getAttribute("value");gi(this,"kuc:listbox-click",{value:e||""});break}}}_handleMouseDownListBox(e){if(e.preventDefault(),e.stopPropagation(),e.target===e.currentTarget)return;const t=e.target.getAttribute("value")||"";gi(this,"kuc:listbox-click",{value:t})}_handleMouseOverItem(e){if(this._actionKeyboard)return void(this._actionKeyboard=!1);const t=e.target;this._setHighlightItemEl(t),this.doFocus&&this._focusHighlightItemEl(!1)}_setListBoxPosition(){const e=this._listBoxEl.getBoundingClientRect().height;if(!this._listBoxEl.parentElement||!this.parentElement)return;const t=window.innerHeight-this.parentElement.getBoundingClientRect().bottom,i=this.parentElement.offsetHeight;this._listBoxEl.style.bottom="auto",this._listBoxEl.style.left="auto",t>=e||(this.parentElement.style.position="relative",this._listBoxEl.style.bottom=i+"px",this._listBoxEl.style.left="0px")}_setHighlightItemEl(e){this._removeHighlight(),e.classList.add("kuc-base-datetime-listbox-1-17-1__listbox--highlight"),e.setAttribute("tabindex","0")}_highlightSelectedItem(){if(!this.doFocus)return;const e=Array.from(this._itemsEl).filter((e=>"true"===e.getAttribute("aria-selected")))[0];e&&(this._itemSelectedEl=e,this._setHighlightItemEl(e),this._focusHighlightItemEl())}_highlightFirstItem(){this._itemSelectedEl=this._firstItemEl,this._setHighlightItemEl(this._firstItemEl)}_highlightLastItem(){this._itemSelectedEl=this._lastItemEl,this._setHighlightItemEl(this._lastItemEl)}_highlightNextItemEl(){if(null===this._highlightItemEl||null===this._iconChecked)return void this._highlightFirstItem();const e=this._getNextItemEl();if(e)return this._setHighlightItemEl(e),this._firstHighlight=!1,void(this._itemSelectedEl=e);this._highlightFirstItem()}_getNextItemEl(){const e=this._iconChecked.parentElement;!this._itemSelectedEl&&e&&this._firstHighlight&&(this._itemSelectedEl=e);let t=this._highlightItemEl.nextElementSibling;return this._itemSelectedEl?this._itemSelectedEl.nextElementSibling?(t=this._itemSelectedEl.nextElementSibling,t):this._firstItemEl:t}_highlightPrevItemEl(){if(null===this._highlightItemEl||null===this._iconChecked)return void this._highlightLastItem();const e=this._getPreviousItemEl();if(e)return this._setHighlightItemEl(e),this._firstHighlight=!1,void(this._itemSelectedEl=e);this._highlightLastItem()}_getPreviousItemEl(){const e=this._iconChecked.parentElement;!this._itemSelectedEl&&e&&this._firstHighlight&&(this._itemSelectedEl=e);let t=this._highlightItemEl.previousElementSibling;return this._itemSelectedEl?this._itemSelectedEl.previousElementSibling?(t=this._itemSelectedEl.previousElementSibling,t):this._lastItemEl:t}_removeHighlight(){this._highlightItemEl&&(this._highlightItemEl.setAttribute("tabindex","-1"),this._highlightItemEl.classList.remove("kuc-base-datetime-listbox-1-17-1__listbox--highlight"))}_focusHighlightItemEl(e){const t=this._highlightItemEl;t&&(t.focus({preventScroll:!0}),!1!==e&&this._dispatchListBoxFocusChange())}_dispatchListBoxFocusChange(){const e=this._highlightItemEl.getAttribute("value")||"";gi(this,"kuc:listbox-focus-change",{value:e})}_scrollToView(){const e=this._highlightItemEl||this._getHighlightItemByValue();if(!e||!this._listBoxEl)return;const t=e.offsetHeight,i=this._listBoxEl.clientHeight/t/2;let n=e.offsetTop-i*t;n<0&&(n=0),this._listBoxEl.scrollTop=n}_getHighlightItemByValue(){const e=Array.from(this._listBoxEl.children),t=new Date(Date.parse(`2021/01/01 ${this.value}`));let i=e.find((e=>new Date(Date.parse(`2021/01/01 ${e.title}`))>=t));return i||(i=e[e.length-1]),this.doFocus&&i?(this._setHighlightItemEl(i),this._focusHighlightItemEl(),i):i}_getListBoxItemTemplate(e){const t=this.value===e.value&&this.doFocus;return we`
       <li
-        class="kuc-base-datetime-listbox-1-17-0__listbox__item"
+        class="kuc-base-datetime-listbox-1-17-1__listbox__item"
         role="option"
         tabindex="${t?"0":"-1"}"
         aria-selected="${t}"
@@ -569,8 +568,8 @@
         ${t?this._getCheckedIconSvgTemplate():""}
         ${void 0===e.label?e.value:e.label}
       </li>
-    `}_getCheckedIconSvgTemplate(){return Ce`<svg
-          class="kuc-base-datetime-listbox-1-17-0__listbox__item__icon"
+    `}_getCheckedIconSvgTemplate(){return $e`<svg
+          class="kuc-base-datetime-listbox-1-17-1__listbox__item__icon"
           width="11"
           height="9"
           viewBox="0 0 11 9"
@@ -583,9 +582,9 @@
             d="M0 5L1.5 3L4.5 5.5L9.5 0L11 1.5L4.5 8.5L0 5Z"
             fill="#3498db"
           />
-        </svg>`}}en([Fe({type:String})],tn.prototype,"value",void 0),en([Fe({type:Array})],tn.prototype,"items",void 0),en([Fe({type:Number})],tn.prototype,"maxHeight",void 0),en([Fe({type:Boolean})],tn.prototype,"doFocus",void 0),en([Ke(".kuc-base-datetime-listbox-1-17-0__listbox")],tn.prototype,"_listBoxEl",void 0),en([Je(".kuc-base-datetime-listbox-1-17-0__listbox__item")],tn.prototype,"_itemsEl",void 0),en([Ke(".kuc-base-datetime-listbox-1-17-0__listbox__item")],tn.prototype,"_firstItemEl",void 0),en([Ke(".kuc-base-datetime-listbox-1-17-0__listbox__item:last-child")],tn.prototype,"_lastItemEl",void 0),en([Ke(".kuc-base-datetime-listbox-1-17-0__listbox--highlight")],tn.prototype,"_highlightItemEl",void 0),en([Ke(".kuc-base-datetime-listbox-1-17-0__listbox__item__icon")],tn.prototype,"_iconChecked",void 0),en([We()],tn.prototype,"_actionKeyboard",void 0),en([We()],tn.prototype,"_firstHighlight",void 0),window.customElements.get("kuc-base-datetime-listbox-1-17-0")||(mi('\nkuc-base-datetime-listbox-1-17-0,\nkuc-base-datetime-listbox-1-17-0 *,\nkuc-base-datetime-listbox-1-17-0:lang(en),\nkuc-base-datetime-listbox-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-listbox-1-17-0:lang(ja),\nkuc-base-datetime-listbox-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-base-datetime-listbox-1-17-0:lang(zh),\nkuc-base-datetime-listbox-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-base-datetime-listbox-1-17-0:lang(zh-TW),\nkuc-base-datetime-listbox-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\n.kuc-base-datetime-listbox-1-17-0__listbox {\n  position: absolute;\n  z-index: 2000;\n  min-width: 280px;\n  margin: 0;\n  padding: 8px 0;\n  border: 1px solid #e3e7e8;\n  background-color: #ffffff;\n  list-style: none;\n  line-height: 1;\n  overflow-y: auto;\n  -webkit-tap-highlight-color: transparent;\n  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);\n}\n.kuc-base-datetime-listbox-1-17-0__listbox__item {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px 16px 8px 25px;\n  color: #333333;\n  cursor: pointer;\n  -webkit-tap-highlight-color: initial;\n  text-align: left;\n  font-size: 14px;\n  user-select: none;\n}\n.kuc-base-datetime-listbox-1-17-0__listbox__item[aria-selected="true"] {\n  color: #3498db;\n}\n.kuc-base-datetime-listbox-1-17-0__listbox--highlight {\n  background-color: #e2f2fe;\n  cursor: pointer;\n}\n.kuc-base-datetime-listbox-1-17-0__listbox__item__icon {\n  position: absolute;\n  left: 8px;\n  top: 10px;\n  background-color: transparent;\n}\n.kuc-base-datetime-listbox-1-17-0__listbox__item:focus {\n  outline: none;\n}\n'),window.customElements.define("kuc-base-datetime-listbox-1-17-0",tn));var nn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class on extends bi{constructor(){super(...arguments),this.inputAriaLabel="",this.inputId="",this.language="en",this.value="",this.disabled=!1,this.inputAriaInvalid=!1,this.required=!1,this._dateTimeCalendarVisible=!1,this._locale=Qt("en"),this._calendarValue="",this._inputValue="",this._valueForReset=""}update(e){e.has("inputId")&&(this._GUID=this.inputId),e.has("language")&&(this._locale=Qt(this.language),this._updateValueProp()),e.has("value")&&this._updateValueProp(),super.update(e)}render(){return $e`
+        </svg>`}}en([Ge({type:String})],tn.prototype,"value",void 0),en([Ge({type:Array})],tn.prototype,"items",void 0),en([Ge({type:Number})],tn.prototype,"maxHeight",void 0),en([Ge({type:Boolean})],tn.prototype,"doFocus",void 0),en([qe(".kuc-base-datetime-listbox-1-17-1__listbox")],tn.prototype,"_listBoxEl",void 0),en([Ye(".kuc-base-datetime-listbox-1-17-1__listbox__item")],tn.prototype,"_itemsEl",void 0),en([qe(".kuc-base-datetime-listbox-1-17-1__listbox__item")],tn.prototype,"_firstItemEl",void 0),en([qe(".kuc-base-datetime-listbox-1-17-1__listbox__item:last-child")],tn.prototype,"_lastItemEl",void 0),en([qe(".kuc-base-datetime-listbox-1-17-1__listbox--highlight")],tn.prototype,"_highlightItemEl",void 0),en([qe(".kuc-base-datetime-listbox-1-17-1__listbox__item__icon")],tn.prototype,"_iconChecked",void 0),en([Fe()],tn.prototype,"_actionKeyboard",void 0),en([Fe()],tn.prototype,"_firstHighlight",void 0),window.customElements.get("kuc-base-datetime-listbox-1-17-1")||(mi('\nkuc-base-datetime-listbox-1-17-1,\nkuc-base-datetime-listbox-1-17-1 *,\nkuc-base-datetime-listbox-1-17-1:lang(en),\nkuc-base-datetime-listbox-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-base-datetime-listbox-1-17-1:lang(ja),\nkuc-base-datetime-listbox-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-base-datetime-listbox-1-17-1:lang(zh),\nkuc-base-datetime-listbox-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-base-datetime-listbox-1-17-1:lang(zh-TW),\nkuc-base-datetime-listbox-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\n.kuc-base-datetime-listbox-1-17-1__listbox {\n  position: absolute;\n  z-index: 2000;\n  min-width: 280px;\n  margin: 0;\n  padding: 8px 0;\n  border: 1px solid #e3e7e8;\n  background-color: #ffffff;\n  list-style: none;\n  line-height: 1;\n  overflow-y: auto;\n  -webkit-tap-highlight-color: transparent;\n  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);\n}\n.kuc-base-datetime-listbox-1-17-1__listbox__item {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 8px 16px 8px 25px;\n  color: #333333;\n  cursor: pointer;\n  -webkit-tap-highlight-color: initial;\n  text-align: left;\n  font-size: 14px;\n  user-select: none;\n}\n.kuc-base-datetime-listbox-1-17-1__listbox__item[aria-selected="true"] {\n  color: #3498db;\n}\n.kuc-base-datetime-listbox-1-17-1__listbox--highlight {\n  background-color: #e2f2fe;\n  cursor: pointer;\n}\n.kuc-base-datetime-listbox-1-17-1__listbox__item__icon {\n  position: absolute;\n  left: 8px;\n  top: 10px;\n  background-color: transparent;\n}\n.kuc-base-datetime-listbox-1-17-1__listbox__item:focus {\n  outline: none;\n}\n'),window.customElements.define("kuc-base-datetime-listbox-1-17-1",tn));var nn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class on extends bi{constructor(){super(...arguments),this.inputAriaLabel="",this.inputId="",this.language="en",this.value="",this.disabled=!1,this.inputAriaInvalid=!1,this.required=!1,this._dateTimeCalendarVisible=!1,this._locale=Xt("en"),this._calendarValue="",this._inputValue="",this._valueForReset=""}update(e){e.has("inputId")&&(this._GUID=this.inputId),e.has("language")&&(this._locale=Xt(this.language),this._updateValueProp()),e.has("value")&&this._updateValueProp(),super.update(e)}render(){return we`
       <input
-        class="kuc-base-date-1-17-0__input"
+        class="kuc-base-date-1-17-1__input"
         id="${this._GUID}-label"
         type="text"
         text-align="center"
@@ -603,7 +602,7 @@
       <button
         aria-haspopup="dialog"
         aria-expanded="${this._dateTimeCalendarVisible}"
-        class="kuc-base-date-1-17-0__assistive-text"
+        class="kuc-base-date-1-17-1__assistive-text"
         @click="${this._handleClickButton}"
         @focus="${this._handleFocusButton}"
         @blur="${this._handleBlurButton}"
@@ -611,9 +610,9 @@
       >
         show date picker
       </button>
-      ${this._dateTimeCalendarVisible?$e`
-            <kuc-base-datetime-calendar-1-17-0
-              class="kuc-base-date-1-17-0__calendar"
+      ${this._dateTimeCalendarVisible?we`
+            <kuc-base-datetime-calendar-1-17-1
+              class="kuc-base-date-1-17-1__calendar"
               .language="${this.language}"
               .value="${this._calendarValue}"
               ?hidden="${!this._dateTimeCalendarVisible}"
@@ -626,22 +625,22 @@
               @kuc:calendar-escape="${this._handleCalendarEscape}"
               @kuc:calendar-body-blur="${this._handleCalendarBlurBody}"
             >
-            </kuc-base-datetime-calendar-1-17-0>
+            </kuc-base-datetime-calendar-1-17-1>
           `:""}
-    `}updated(e){e.has("inputAriaLabel")&&this.inputAriaLabel&&this._dateInput.setAttribute("aria-label",this.inputAriaLabel),super.updated(e)}_handleInputValue(e){const t=e.target.value;this._inputValue=t||""}_handleClickInput(){if(!this._dateTimeCalendarVisible)return this._valueForReset=this.value,this._calendarValue=this._getNewCalendarValue(this._inputValue||""),void this._openCalendar();this._closeCalendar()}_updateValueProp(){if(this.value){const e=this._setCalendarValueWhenInvalidValue();return this._inputValue=Wt(this.language,this.value),void(this._calendarValue=e||this.value)}const e=Yt();this._inputValue="",this._calendarValue=this._calendarValue?this._calendarValue.slice(0,7)+"-01":e.slice(0,7)}_setCalendarValueWhenInvalidValue(){if(this.value&&!wi(this.value)){const e=Yt();return this._calendarValue||e.slice(0,7)}return""}_getNewCalendarValue(e){if(Jt(this.language,e))return qt(this.language,e);if(!this._calendarValue)return"";let t=this._calendarValue.slice(0,7);return""===e&&(t=this._calendarValue.slice(0,7)+"-01"),t}_handleChangeInput(e){e.stopPropagation();const t=(null==e?void 0:e.target).value;if(this._calendarValue=this._getNewCalendarValue(t),this._calendarValue.length>7)return void this._dispathDateChangeCustomEvent(qt(this.language,t));const i={value:void 0,oldValue:this.value,error:this._locale.INVALID_FORMAT};this._inputValue=t,gi(this,"kuc:base-date-change",i)}_handleKeyDownInput(e){"Escape"===e.key&&this._closeCalendar()}_closeCalendar(){this._dateTimeCalendarVisible=!1}_openCalendar(){this._dateTimeCalendarVisible=!0}_handleShiftTabCalendarPrevMonth(){this._footerNoneBtn.focus()}_handleClickCalendarChangeDate(e){e.detail.oldValue=this.value,this.value=e.detail.value,gi(this,"kuc:base-date-change",e.detail)}_handleClickCalendarClickDate(e){this._closeCalendar(),e.detail.oldValue=this.value,this._dateInput.focus(),e.detail.oldValue!==e.detail.value&&(this.value=e.detail.value,gi(this,"kuc:base-date-change",e.detail))}_handleClickCalendarFooterButtonNone(){this._closeCalendar(),this._dateInput.focus(),this._inputValue="";const e=Yt();let t=this._setCalendarValueWhenInvalidValue();t||(t=this._calendarValue?this._calendarValue.slice(0,7)+"-01":e.slice(0,7)+"-01"),this._calendarValue=t,this._dispathDateChangeCustomEvent(void 0)}_handleTabCalendarFooterButtonNone(){this._previousMonth.focus()}_handleClickCalendarFooterButtonToday(){this._closeCalendar();const e=Yt();this._dateInput.focus(),this._dispathDateChangeCustomEvent(e)}_handleCalendarEscape(){const e=this._valueForReset;if(this._closeCalendar(),this._dateInput.focus(),e===this.value)return;const t={oldValue:this.value,value:e};this.value=e,gi(this,"kuc:base-date-change",t)}_handleCalendarBlurBody(e){e.preventDefault(),this._dateTimeCalendarVisible=!1}_dispathDateChangeCustomEvent(e){const t={value:e,oldValue:this.value};this.value=void 0===e?"":e,gi(this,"kuc:base-date-change",t)}_handleClickButton(){if(!this._dateTimeCalendarVisible)return this._valueForReset=this.value,this._calendarValue=this._getNewCalendarValue(this._inputValue||""),void this._openCalendar();this._closeCalendar()}_handleBlurButton(){this._dateInput.classList.remove("kuc-base-date-1-17-0__input--focus")}_handleFocusButton(){this._dateInput.classList.add("kuc-base-date-1-17-0__input--focus")}}nn([Fe({type:String})],on.prototype,"inputAriaLabel",void 0),nn([Fe({type:String})],on.prototype,"inputId",void 0),nn([Fe({type:String,attribute:"lang",reflect:!0})],on.prototype,"language",void 0),nn([Fe({type:String,reflect:!0})],on.prototype,"value",void 0),nn([Fe({type:Boolean})],on.prototype,"disabled",void 0),nn([Fe({type:Boolean})],on.prototype,"inputAriaInvalid",void 0),nn([Fe({type:Boolean})],on.prototype,"required",void 0),nn([Ke(".kuc-base-date-1-17-0__input")],on.prototype,"_dateInput",void 0),nn([Ke(".kuc-base-datetime-calendar-header-1-17-0__group__button--previous-month")],on.prototype,"_previousMonth",void 0),nn([Ke(".kuc-base-datetime-calendar-footer-1-17-0__group__button--none")],on.prototype,"_footerNoneBtn",void 0),nn([We()],on.prototype,"_dateTimeCalendarVisible",void 0),window.customElements.get("kuc-base-date-1-17-0")||(mi("\ninput.kuc-base-date-1-17-0__input {\n  width: 100px;\n  height: 40px;\n  padding: 0px;\n  text-align: center;\n  border: 1px solid #e3e7e8;\n  color: #333333;\n  box-sizing: border-box;\n  font-size: 14px;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n\ninput.kuc-base-date-1-17-0__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\ninput.kuc-base-date-1-17-0__input--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: #333333;\n}\n.kuc-datetime-picker-1-17-0__group__inputs--date\n  input.kuc-base-date-1-17-0__input--focus {\n  border-color: #3498db;\n}\ninput.kuc-base-date-1-17-0__input:disabled {\n  color: #888888 !important;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.kuc-base-date-1-17-0__calendar {\n  position: absolute;\n  z-index: 2000;\n  background-color: #ffffff;\n  text-align: center;\n  box-sizing: border-box;\n}\n.kuc-base-date-1-17-0__assistive-text {\n  clip: rect(1px, 1px, 1px, 1px);\n  overflow: hidden;\n  position: absolute !important;\n  padding: 0px !important;\n  border: 0px !important;\n  height: 1px !important;\n  width: 1px !important;\n}\n"),window.customElements.define("kuc-base-date-1-17-0",on));var an=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let sn;(()=>{if(sn=window.customElements.get("kuc-date-picker-1-17-0"),!sn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.language="auto",this.value="",this.visible=!0,this._errorFormat="",this._errorText="",this._inputValue="",this._invalidValue="",this._valueConverted="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!(void 0!==this.value&&""!==this.value&&("string"==typeof this.value&&ki(this.value)?(this._valueConverted=ri(this.value),this._valueConverted&&!wi(this._valueConverted)&&(this.throwErrorAfterUpdateComplete(Tt),1)):(this.throwErrorAfterUpdateComplete(Tt),1)))}willUpdate(e){e.has("value")&&(void 0===this.value?this._inputValue=this._invalidValue:(this.value=""===this.value?this.value:this._valueConverted,this._inputValue=this.value,this._errorFormat="")),this._updateErrorText()}render(){return $e`
-        <div class="kuc-date-picker-1-17-0__group">
+    `}updated(e){e.has("inputAriaLabel")&&this.inputAriaLabel&&this._dateInput.setAttribute("aria-label",this.inputAriaLabel),super.updated(e)}_handleInputValue(e){const t=e.target.value;this._inputValue=t||""}_handleClickInput(){if(!this._dateTimeCalendarVisible)return this._valueForReset=this.value,this._calendarValue=this._getNewCalendarValue(this._inputValue||""),void this._openCalendar();this._closeCalendar()}_updateValueProp(){if(this.value){const e=this._setCalendarValueWhenInvalidValue();return this._inputValue=Ft(this.language,this.value),void(this._calendarValue=e||this.value)}const e=Kt();this._inputValue="",this._calendarValue=this._calendarValue?this._calendarValue.slice(0,7)+"-01":e.slice(0,7)}_setCalendarValueWhenInvalidValue(){if(this.value&&!wi(this.value)){const e=Kt();return this._calendarValue||e.slice(0,7)}return""}_getNewCalendarValue(e){if(Yt(this.language,e))return Wt(this.language,e);if(!this._calendarValue)return"";let t=this._calendarValue.slice(0,7);return""===e&&(t=this._calendarValue.slice(0,7)+"-01"),t}_handleChangeInput(e){e.stopPropagation();const t=(null==e?void 0:e.target).value;if(this._calendarValue=this._getNewCalendarValue(t),this._calendarValue.length>7)return void this._dispathDateChangeCustomEvent(Wt(this.language,t));const i={value:void 0,oldValue:this.value,error:this._locale.INVALID_FORMAT};this._inputValue=t,gi(this,"kuc:base-date-change",i)}_handleKeyDownInput(e){"Escape"===e.key&&this._closeCalendar()}_closeCalendar(){this._dateTimeCalendarVisible=!1}_openCalendar(){this._dateTimeCalendarVisible=!0}_handleShiftTabCalendarPrevMonth(){this._footerNoneBtn.focus()}_handleClickCalendarChangeDate(e){e.detail.oldValue=this.value,this.value=e.detail.value,gi(this,"kuc:base-date-change",e.detail)}_handleClickCalendarClickDate(e){this._closeCalendar(),e.detail.oldValue=this.value,this._dateInput.focus(),e.detail.oldValue!==e.detail.value&&(this.value=e.detail.value,gi(this,"kuc:base-date-change",e.detail))}_handleClickCalendarFooterButtonNone(){this._closeCalendar(),this._dateInput.focus(),this._inputValue="";const e=Kt();let t=this._setCalendarValueWhenInvalidValue();t||(t=this._calendarValue?this._calendarValue.slice(0,7)+"-01":e.slice(0,7)+"-01"),this._calendarValue=t,this._dispathDateChangeCustomEvent(void 0)}_handleTabCalendarFooterButtonNone(){this._previousMonth.focus()}_handleClickCalendarFooterButtonToday(){this._closeCalendar();const e=Kt();this._dateInput.focus(),this._dispathDateChangeCustomEvent(e)}_handleCalendarEscape(){const e=this._valueForReset;if(this._closeCalendar(),this._dateInput.focus(),e===this.value)return;const t={oldValue:this.value,value:e};this.value=e,gi(this,"kuc:base-date-change",t)}_handleCalendarBlurBody(e){e.preventDefault(),this._dateTimeCalendarVisible=!1}_dispathDateChangeCustomEvent(e){const t={value:e,oldValue:this.value};this.value=void 0===e?"":e,gi(this,"kuc:base-date-change",t)}_handleClickButton(){if(!this._dateTimeCalendarVisible)return this._valueForReset=this.value,this._calendarValue=this._getNewCalendarValue(this._inputValue||""),void this._openCalendar();this._closeCalendar()}_handleBlurButton(){this._dateInput.classList.remove("kuc-base-date-1-17-1__input--focus")}_handleFocusButton(){this._dateInput.classList.add("kuc-base-date-1-17-1__input--focus")}}nn([Ge({type:String})],on.prototype,"inputAriaLabel",void 0),nn([Ge({type:String})],on.prototype,"inputId",void 0),nn([Ge({type:String,attribute:"lang",reflect:!0})],on.prototype,"language",void 0),nn([Ge({type:String,reflect:!0})],on.prototype,"value",void 0),nn([Ge({type:Boolean})],on.prototype,"disabled",void 0),nn([Ge({type:Boolean})],on.prototype,"inputAriaInvalid",void 0),nn([Ge({type:Boolean})],on.prototype,"required",void 0),nn([qe(".kuc-base-date-1-17-1__input")],on.prototype,"_dateInput",void 0),nn([qe(".kuc-base-datetime-calendar-header-1-17-1__group__button--previous-month")],on.prototype,"_previousMonth",void 0),nn([qe(".kuc-base-datetime-calendar-footer-1-17-1__group__button--none")],on.prototype,"_footerNoneBtn",void 0),nn([Fe()],on.prototype,"_dateTimeCalendarVisible",void 0),window.customElements.get("kuc-base-date-1-17-1")||(mi("\ninput.kuc-base-date-1-17-1__input {\n  width: 100px;\n  height: 40px;\n  padding: 0px;\n  text-align: center;\n  border: 1px solid #e3e7e8;\n  color: #333333;\n  box-sizing: border-box;\n  font-size: 14px;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n\ninput.kuc-base-date-1-17-1__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\ninput.kuc-base-date-1-17-1__input--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: #333333;\n}\n.kuc-datetime-picker-1-17-1__group__inputs--date\n  input.kuc-base-date-1-17-1__input--focus {\n  border-color: #3498db;\n}\ninput.kuc-base-date-1-17-1__input:disabled {\n  color: #888888 !important;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.kuc-base-date-1-17-1__calendar {\n  position: absolute;\n  z-index: 2000;\n  background-color: #ffffff;\n  text-align: center;\n  box-sizing: border-box;\n}\n.kuc-base-date-1-17-1__assistive-text {\n  clip: rect(1px, 1px, 1px, 1px);\n  overflow: hidden;\n  position: absolute !important;\n  padding: 0px !important;\n  border: 0px !important;\n  height: 1px !important;\n  width: 1px !important;\n}\n"),window.customElements.define("kuc-base-date-1-17-1",on));var an=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let sn;(()=>{if(sn=window.customElements.get("kuc-date-picker-1-17-1"),!sn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.language="auto",this.value="",this.visible=!0,this._errorFormat="",this._errorText="",this._inputValue="",this._invalidValue="",this._valueConverted="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!(void 0!==this.value&&""!==this.value&&("string"==typeof this.value&&ki(this.value)?(this._valueConverted=si(this.value),this._valueConverted&&!wi(this._valueConverted)&&(this.throwErrorAfterUpdateComplete(St),1)):(this.throwErrorAfterUpdateComplete(St),1)))}willUpdate(e){e.has("value")&&(void 0===this.value?this._inputValue=this._invalidValue:(this.value=""===this.value?this.value:this._valueConverted,this._inputValue=this.value,this._errorFormat="")),this._updateErrorText()}render(){return we`
+        <div class="kuc-date-picker-1-17-1__group">
           <label
-            class="kuc-date-picker-1-17-0__group__label"
+            class="kuc-date-picker-1-17-1__group__label"
             for="${this._GUID}-label"
             @click="${this._handleClickLabel}"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </label>
-          <kuc-base-date-1-17-0
+          <kuc-base-date-1-17-1
             .inputId="${this._GUID}"
             .inputAriaInvalid="${""!==this.error}"
             .disabled="${this.disabled}"
@@ -650,17 +649,17 @@
             .language="${this._getLanguage()}"
             @kuc:base-date-change="${this._handleDateChange}"
           >
-          </kuc-base-date-1-17-0>
-          <kuc-base-error-1-17-0
+          </kuc-base-date-1-17-1>
+          <kuc-base-error-1-17-1
             .text="${this._errorText}"
             .guid="${this._GUID}"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}updated(){this._invalidValue=""}_updateErrorText(){this._errorText=this._errorFormat||this.error}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_handleClickLabel(e){e.preventDefault()}_handleDateChange(e){e.stopPropagation(),e.preventDefault();const t={oldValue:this.value,value:""};e.detail.error?(this.value=void 0,this._invalidValue=this._dateInput.value,this._errorFormat=e.detail.error,this.error="",t.value=void 0):(this._errorFormat="",this.value=void 0===e.detail.value?"":e.detail.value,t.value=this.value),this._dispatchChangeEvent(t)}_dispatchChangeEvent(e){gi(this,"change",e)}}an([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),an([Fe({type:String})],e.prototype,"error",void 0),an([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),an([Fe({type:String})],e.prototype,"label",void 0),an([Fe({type:Boolean})],e.prototype,"disabled",void 0),an([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),an([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),an([Fe({type:String})],e.prototype,"value",void 0),an([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),an([Ke(".kuc-base-date-1-17-0__input")],e.prototype,"_dateInput",void 0),window.customElements.define("kuc-date-picker-1-17-0",e),mi('\nkuc-date-picker-1-17-0,\nkuc-date-picker-1-17-0 *,\nkuc-date-picker-1-17-0:lang(en),\nkuc-date-picker-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-date-picker-1-17-0:lang(ja),\nkuc-date-picker-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-date-picker-1-17-0:lang(zh),\nkuc-date-picker-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-date-picker-1-17-0:lang(zh-TW),\nkuc-date-picker-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\nkuc-date-picker-1-17-0 {\n  font-size: 14px;\n  color: #333333;\n  display: inline-table;\n  vertical-align: top;\n  max-width: var(--kuc-date-picker-input-width, 100px);\n  width: var(--kuc-date-picker-input-width, 100px);\n  line-height: 1.5;\n}\nkuc-date-picker-1-17-0[hidden] {\n  display: none;\n}\n.kuc-date-picker-1-17-0__group {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0px;\n  height: auto;\n  margin: 0px;\n}\n.kuc-date-picker-1-17-0__group__label {\n  display: inline-block;\n  padding: 4px 0px 8px 0px;\n  white-space: nowrap;\n}\n.kuc-date-picker-1-17-0__group__label[hidden] {\n  display: none;\n}\n.kuc-date-picker-1-17-0__group input[type=text].kuc-base-date-1-17-0__input {\n  width: var(--kuc-date-picker-input-width, 100px);\n  height: var(--kuc-date-picker-input-height, 40px);\n  padding: 0px;\n  text-align: center;\n  color: var(--kuc-date-picker-input-color);\n  border: 1px solid #e3e7e8;\n  box-sizing: border-box;\n  font-size: var(--kuc-date-picker-input-font-size, 14px);\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n\n.kuc-date-picker-1-17-0__group kuc-base-date-1-17-0 {\n  display: inline-flex;\n}\n\n.kuc-date-picker-1-17-0__group input[type=text].kuc-base-date-1-17-0__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\n.kuc-date-picker-1-17-0__group input[type=text].kuc-base-date-1-17-0__input--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: var(--kuc-date-picker-input-color, #333333);\n}\n.kuc-date-picker-1-17-0__group input[type=text].kuc-base-date-1-17-0__input:disabled {\n  color: #888888;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n'),sn=e}})();var rn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class ln extends bi{constructor(){super(...arguments),this.language="en",this.max="",this.min="",this.value="",this.disabled=!1,this.hour12=!1,this.timeStep=30,this._listBoxVisible=!1,this._valueLabel="",this._doFocusListBox=!1,this._hours="",this._minutes="",this._suffix="",this._valueForReset="",this._locale=Qt("en")}update(e){(e.has("hour12")||e.has("timeStep")||e.has("max")||e.has("min"))&&(this._listBoxItems=((e,t,i,n)=>{const o=[],a=Math.round(t),s=Ut(n),r=Ut(i);if(a>0){const t=Math.floor((s-r)/a)+1;for(let i=0;i<t;i++){const t=Nt(r+i*a,e);o.push(t)}}return o})(this.hour12,this.timeStep,this.min,this.max),this._updateInputValue()),e.has("value")&&this._updateInputValue(),e.has("language")&&(this._locale=Qt(this.language)),super.update(e)}render(){return $e`
-      <div class="kuc-base-time-1-17-0__group" @click="${this._handleClickInputGroup}">
+      `}updated(){this._invalidValue=""}_updateErrorText(){this._errorText=this._errorFormat||this.error}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_handleClickLabel(e){e.preventDefault()}_handleDateChange(e){e.stopPropagation(),e.preventDefault();const t={oldValue:this.value,value:""};e.detail.error?(this.value=void 0,this._invalidValue=this._dateInput.value,this._errorFormat=e.detail.error,this.error="",t.value=void 0):(this._errorFormat="",this.value=void 0===e.detail.value?"":e.detail.value,t.value=this.value),this._dispatchChangeEvent(t)}_dispatchChangeEvent(e){gi(this,"change",e)}}an([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),an([Ge({type:String})],e.prototype,"error",void 0),an([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),an([Ge({type:String})],e.prototype,"label",void 0),an([Ge({type:Boolean})],e.prototype,"disabled",void 0),an([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),an([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),an([Ge({type:String})],e.prototype,"value",void 0),an([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),an([qe(".kuc-base-date-1-17-1__input")],e.prototype,"_dateInput",void 0),window.customElements.define("kuc-date-picker-1-17-1",e),mi('\nkuc-date-picker-1-17-1,\nkuc-date-picker-1-17-1 *,\nkuc-date-picker-1-17-1:lang(en),\nkuc-date-picker-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-date-picker-1-17-1:lang(ja),\nkuc-date-picker-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-date-picker-1-17-1:lang(zh),\nkuc-date-picker-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-date-picker-1-17-1:lang(zh-TW),\nkuc-date-picker-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\nkuc-date-picker-1-17-1 {\n  font-size: 14px;\n  color: #333333;\n  display: inline-table;\n  vertical-align: top;\n  max-width: var(--kuc-date-picker-input-width, 100px);\n  width: var(--kuc-date-picker-input-width, 100px);\n  line-height: 1.5;\n}\nkuc-date-picker-1-17-1[hidden] {\n  display: none;\n}\n.kuc-date-picker-1-17-1__group {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0px;\n  height: auto;\n  margin: 0px;\n}\n.kuc-date-picker-1-17-1__group__label {\n  display: inline-block;\n  padding: 4px 0px 8px 0px;\n  white-space: nowrap;\n}\n.kuc-date-picker-1-17-1__group__label[hidden] {\n  display: none;\n}\n.kuc-date-picker-1-17-1__group input[type=text].kuc-base-date-1-17-1__input {\n  width: var(--kuc-date-picker-input-width, 100px);\n  height: var(--kuc-date-picker-input-height, 40px);\n  padding: 0px;\n  text-align: center;\n  color: var(--kuc-date-picker-input-color);\n  border: 1px solid #e3e7e8;\n  box-sizing: border-box;\n  font-size: var(--kuc-date-picker-input-font-size, 14px);\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n\n.kuc-date-picker-1-17-1__group kuc-base-date-1-17-1 {\n  display: inline-flex;\n}\n\n.kuc-date-picker-1-17-1__group input[type=text].kuc-base-date-1-17-1__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\n.kuc-date-picker-1-17-1__group input[type=text].kuc-base-date-1-17-1__input--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: var(--kuc-date-picker-input-color, #333333);\n}\n.kuc-date-picker-1-17-1__group input[type=text].kuc-base-date-1-17-1__input:disabled {\n  color: #888888;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n'),sn=e}})();var rn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class ln extends bi{constructor(){super(...arguments),this.language="en",this.max="",this.min="",this.value="",this.disabled=!1,this.hour12=!1,this.timeStep=30,this._listBoxVisible=!1,this._valueLabel="",this._doFocusListBox=!1,this._hours="",this._minutes="",this._suffix="",this._valueForReset="",this._locale=Xt("en")}update(e){(e.has("hour12")||e.has("timeStep")||e.has("max")||e.has("min"))&&(this._listBoxItems=((e,t,i,n)=>{const o=[],a=Math.round(t),s=Nt(n),r=Nt(i);if(a>0){const t=Math.floor((s-r)/a)+1;for(let i=0;i<t;i++){const t=Ot(r+i*a,e);o.push(t)}}return o})(this.hour12,this.timeStep,this.min,this.max),this._updateInputValue()),e.has("value")&&this._updateInputValue(),e.has("language")&&(this._locale=Xt(this.language)),super.update(e)}render(){return we`
+      <div class="kuc-base-time-1-17-1__group" @click="${this._handleClickInputGroup}">
         <input
           type="text"
-          class="kuc-base-time-1-17-0__group__hours"
+          class="kuc-base-time-1-17-1__group__hours"
           role="spinbutton"
           tabindex="${this._hours?"0":"-1"}"
           aria-label="Hour"
@@ -674,7 +673,7 @@
         ${this._getColonTemplate()}
         <input
           type="text"
-          class="kuc-base-time-1-17-0__group__minutes"
+          class="kuc-base-time-1-17-1__group__minutes"
           role="spinbutton"
           tabindex="${this._minutes?"0":"-1"}"
           aria-label="Minute"
@@ -690,7 +689,7 @@
       <button
         aria-haspopup="listbox"
         aria-expanded="${this._listBoxVisible}"
-        class="kuc-base-time-1-17-0__assistive-text"
+        class="kuc-base-time-1-17-1__assistive-text"
         @keydown="${this._handleKeyDownButton}"
         @focus="${this._handleFocusButton}"
         @blur="${this._handleBlurButton}"
@@ -699,9 +698,9 @@
         show time picker
       </button>
       ${this._getListBoxTemplate()}
-    `}updated(e){e.has("disabled")&&this._toggleDisabledGroup(),super.update(e)}_handleClickInputGroup(e){if(this.disabled)return;if(""===this.value)return this._toggleEl.focus(),void this._openListBox();const t=e.target;this._openListBox(),"INPUT"!==t.tagName.toUpperCase()?this._hoursEl.select():t.select()}_handleBlurListBox(e){e.preventDefault(),this._inputFocusEl||(this._listBoxVisible=!1)}_toggleDisabledGroup(){return this.disabled?this._inputGroupEl.classList.add("kuc-base-time-1-17-0__group--disabled"):this._inputGroupEl.classList.remove("kuc-base-time-1-17-0__group--disabled")}_updateInputValue(){var e;const t=((e,t)=>{const i=e.split(":"),n=parseInt(i[0],10),o=parseInt(i[1],10),a=n%kt;return isNaN(a)||isNaN(o)?{hours:"",minutes:"",suffix:""}:t?((e,t)=>{const i=Rt(e),n=zt(e);return{hours:Zt(n),minutes:Zt(t),suffix:i}})(n,o):{hours:Zt(a),minutes:Zt(o),suffix:""}})(this.value,this.hour12);this._hours=t.hours,this._minutes=t.minutes,this._suffix=t.suffix||"",this._valueLabel=this._getValueLabel(t),this._inputGroupEl&&(this._setValueToInput(t),null===(e=this._inputFocusEl)||void 0===e||e.select())}_getValueLabel(e){if(!e.hours||!e.minutes)return"";const t=`${e.hours}:${e.minutes}`;return e.suffix?t+` ${e.suffix}`:t}_setValueToInput(e){this._hoursEl.value=e.hours,this._minutesEl.value=e.minutes,this._suffixEl&&(this._suffixEl.value=e.suffix||"")}_handleKeyDownButton(e){switch(e.key){case"Tab":case"Escape":if("Escape"===e.key&&e.preventDefault(),!this._listBoxVisible)return;this._closeListBox();break;case"Enter":case" ":case"ArrowUp":case"ArrowDown":e.preventDefault(),e.stopPropagation(),this._openListBoxByKey();break;default:e.preventDefault(),e.stopPropagation(),this._handleDefaultKeyButton(e.key)}}_handleBlurButton(){this._inputGroupEl.classList.remove("kuc-base-time-1-17-0__group--focus")}_handleFocusButton(e){e.stopPropagation(),this._inputGroupEl.classList.add("kuc-base-time-1-17-0__group--focus")}_openListBoxByKey(){return!this._listBoxVisible&&(this._valueForReset=this.value,this._doFocusListBox=!0,this._listBoxVisible=!0,this._inputGroupEl.classList.remove("kuc-base-time-1-17-0__group--focus"),!0)}_handleListBoxEscape(){this._closeListBox(),this.value=this._valueForReset,this._actionUpdateInputValue(this.value),""!==this.value?this._hoursEl.select():this._toggleEl.focus()}_handleDefaultKeyButton(e){if(!/^[0-9]$/i.test(e)||""!==this.value)return;const t=this._computeNumberKeyValueHours(e);this._actionUpdateInputValue(t),this._hoursEl.select()}_handleChangeListBox(e){if(e.preventDefault(),e.stopPropagation(),this._closeListBox(),this._inputFocusEl=this._hoursEl,this._hoursEl.select(),!e.detail.value)return;const t=e.detail.value;this._actionUpdateInputValue(t)}_handleListBoxFocusChange(e){const t=e.detail.value,i=jt(t);this._actionUpdateInputValue(i)}_handleFocusInput(e){this._inputFocusEl=e.target,this._inputFocusEl.select(),this._inputGroupEl.classList.add("kuc-base-time-1-17-0__group--focus")}_handleBlurInput(e){this._inputFocusEl=null;const t=e.relatedTarget;t&&t instanceof HTMLInputElement&&[this._hoursEl,this._minutesEl,this._suffixEl].indexOf(t)>-1||(this._closeListBox(),this._inputGroupEl.classList.remove("kuc-base-time-1-17-0__group--focus"))}_handleTabKey(e){return"Tab"===e.key}_handleKeyDownInput(e){this._closeListBox(),this._handleTabKey(e)||this._handleSupportedKey(e)}_handlePasteInput(e){e.preventDefault()}_handleSupportedKey(e){e.preventDefault();const t=e.key;let i;switch(t){case"Enter":case"ArrowRight":this._actionSelectNextRange();break;case"ArrowLeft":this._actionSelectPreviousRange();break;case"ArrowUp":i=this._computeArrowUpDownValue(1),this._actionUpdateInputValue(i);break;case"ArrowDown":i=this._computeArrowUpDownValue(-1),this._actionUpdateInputValue(i);break;case"Backspace":case"Delete":i=this._computeDeleteValue(),this._actionUpdateInputValue(i);break;default:i=this._computeDefaultKeyValue(t),this._actionUpdateInputValue(i)}}_actionUpdateInputValue(e){const t=""===this.value?this.value:this._formatKeyDownValue(),i=jt(t),n=jt(e);i!==n&&(this.value=n,this._dispatchEventTimeChange(n,i))}_computeDeleteValue(){return this._inputFocusEl===this._minutesEl?this._formatKeyDownValue({minutes:"00"}):this._inputFocusEl===this._hoursEl?this._formatKeyDownValue({hours:"00"}):this._formatKeyDownValue()}_computeArrowUpDownValue(e){return this._inputFocusEl===this._hoursEl?this._computeArrowUpDownHourValue(e):this._inputFocusEl===this._minutesEl?this._computeArrowUpDownMinuteValue(e):this._computeKeyDownSuffixValue()}_computeKeyDownSuffixValue(e){if(!e){const e=this._suffix===xt?wt:xt;return this._formatKeyDownValue({suffix:e})}if(-1===["a","A","p","P"].indexOf(e))return this._formatKeyDownValue();const t="a"===e||"A"===e?xt:wt;return""===this.value&&this._hoursEl.select(),this._formatKeyDownValue({suffix:t})}_computeArrowUpDownHourValue(e){let t=parseInt(this._hours,10)+e;return this.hour12?(t%=yt,t=t<=0?yt:t):(t%=kt,t=t<0?23:t),this._formatKeyDownValue({hours:t.toString()})}_computeArrowUpDownMinuteValue(e){let t=parseInt(this._minutes,10)+e;return t%=60,t=t<0?59:t,this._formatKeyDownValue({minutes:t.toString()})}_computeDefaultKeyValue(e){return/^[0-9]$/i.test(e)?this._computeNumberKeyValue(e):this._inputFocusEl===this._suffixEl?this._computeKeyDownSuffixValue(e):this._formatKeyDownValue()}_computeNumberKeyValue(e){return this._inputFocusEl===this._minutesEl?this._computeNumberKeyValueMinutes(e):this._inputFocusEl===this._hoursEl?this._computeNumberKeyValueHours(e):this._formatKeyDownValue()}_computeNumberKeyValueMinutes(e){const t=this._getPreviousMinutes(this._minutes),i=Zt(t+e);return""===this.value?(this._hoursEl.select(),this._computeNumberKeyValueHours(e)):this._formatKeyDownValue({minutes:i})}_computeNumberKeyValueHours(e){const t=this._getPreviousHours(this._hours,e),i=Zt(t+e);return""===this.value?this._formatKeyDownValue({hours:i,minutes:"00"}):this._formatKeyDownValue({hours:i})}_getPreviousMinutes(e){let t;return t=parseInt(e,10)>10?(""+e)[1]:""+e,t=parseInt(t,10)>5?"0":t,t}_getPreviousHours(e,t){let i;i=parseInt(e,10)>10?(""+e)[1]:""+e;const n=parseInt(i+t,10);return i=this.hour12&&n>yt||!this.hour12&&n>=kt?"0":i,i}_actionSelectNextRange(){this._inputFocusEl!==this._hoursEl?this.hour12&&this._inputFocusEl===this._minutesEl&&this._suffixEl.select():this._minutesEl.select()}_actionSelectPreviousRange(){this._inputFocusEl!==this._suffixEl?this._inputFocusEl===this._minutesEl&&this._hoursEl.select():this._minutesEl.select()}_dispatchEventTimeChange(e,t){const i={value:e,oldValue:t};(Pt(e,this.min)<0||Pt(this.max,e)<0)&&(i.error=this._locale.TIME_IS_OUT_OF_VALID_RANGE),gi(this,"kuc:base-time-change",i)}_formatKeyDownValue(e={hours:this._hours,minutes:this._minutes,suffix:this._suffix}){const t=e.hours||this._hours,i=e.minutes||this._minutes,n=e.suffix||this._suffix,o=`${Zt(t)}:${Zt(i)}`;return n?`${o} ${n}`:o}_openListBox(){this._listBoxVisible||(this._doFocusListBox=!1,this._listBoxVisible=!0)}_closeListBox(){this._doFocusListBox=!1,this._listBoxVisible=!1}_getColonTemplate(){return this._hours?$e` <span class="kuc-base-time-1-17-0__group__colon">:</span> `:""}_getSuffixTemplate(){return this.hour12?$e`
+    `}updated(e){e.has("disabled")&&this._toggleDisabledGroup(),super.update(e)}_handleClickInputGroup(e){if(this.disabled)return;if(""===this.value)return this._toggleEl.focus(),void this._openListBox();const t=e.target;this._openListBox(),"INPUT"!==t.tagName.toUpperCase()?this._hoursEl.select():t.select()}_handleBlurListBox(e){e.preventDefault(),this._inputFocusEl||(this._listBoxVisible=!1)}_toggleDisabledGroup(){return this.disabled?this._inputGroupEl.classList.add("kuc-base-time-1-17-1__group--disabled"):this._inputGroupEl.classList.remove("kuc-base-time-1-17-1__group--disabled")}_updateInputValue(){var e;const t=((e,t)=>{const i=e.split(":"),n=parseInt(i[0],10),o=parseInt(i[1],10),a=n%vt;return isNaN(a)||isNaN(o)?{hours:"",minutes:"",suffix:""}:t?((e,t)=>{const i=zt(e),n=Pt(e);return{hours:Jt(n),minutes:Jt(t),suffix:i}})(n,o):{hours:Jt(a),minutes:Jt(o),suffix:""}})(this.value,this.hour12);this._hours=t.hours,this._minutes=t.minutes,this._suffix=t.suffix||"",this._valueLabel=this._getValueLabel(t),this._inputGroupEl&&(this._setValueToInput(t),null===(e=this._inputFocusEl)||void 0===e||e.select())}_getValueLabel(e){if(!e.hours||!e.minutes)return"";const t=`${e.hours}:${e.minutes}`;return e.suffix?t+` ${e.suffix}`:t}_setValueToInput(e){this._hoursEl.value=e.hours,this._minutesEl.value=e.minutes,this._suffixEl&&(this._suffixEl.value=e.suffix||"")}_handleKeyDownButton(e){switch(e.key){case"Tab":case"Escape":if("Escape"===e.key&&e.preventDefault(),!this._listBoxVisible)return;this._closeListBox();break;case"Enter":case" ":case"ArrowUp":case"ArrowDown":e.preventDefault(),e.stopPropagation(),this._openListBoxByKey();break;default:e.preventDefault(),e.stopPropagation(),this._handleDefaultKeyButton(e.key)}}_handleBlurButton(){this._inputGroupEl.classList.remove("kuc-base-time-1-17-1__group--focus")}_handleFocusButton(e){e.stopPropagation(),this._inputGroupEl.classList.add("kuc-base-time-1-17-1__group--focus")}_openListBoxByKey(){return!this._listBoxVisible&&(this._valueForReset=this.value,this._doFocusListBox=!0,this._listBoxVisible=!0,this._inputGroupEl.classList.remove("kuc-base-time-1-17-1__group--focus"),!0)}_handleListBoxEscape(){this._closeListBox(),this.value=this._valueForReset,this._actionUpdateInputValue(this.value),""!==this.value?this._hoursEl.select():this._toggleEl.focus()}_handleDefaultKeyButton(e){if(!/^[0-9]$/i.test(e)||""!==this.value)return;const t=this._computeNumberKeyValueHours(e);this._actionUpdateInputValue(t),this._hoursEl.select()}_handleChangeListBox(e){if(e.preventDefault(),e.stopPropagation(),this._closeListBox(),this._inputFocusEl=this._hoursEl,this._hoursEl.select(),!e.detail.value)return;const t=e.detail.value;this._actionUpdateInputValue(t)}_handleListBoxFocusChange(e){const t=e.detail.value,i=Rt(t);this._actionUpdateInputValue(i)}_handleFocusInput(e){this._inputFocusEl=e.target,this._inputFocusEl.select(),this._inputGroupEl.classList.add("kuc-base-time-1-17-1__group--focus")}_handleBlurInput(e){this._inputFocusEl=null;const t=e.relatedTarget;t&&t instanceof HTMLInputElement&&[this._hoursEl,this._minutesEl,this._suffixEl].indexOf(t)>-1||(this._closeListBox(),this._inputGroupEl.classList.remove("kuc-base-time-1-17-1__group--focus"))}_handleTabKey(e){return"Tab"===e.key}_handleKeyDownInput(e){this._closeListBox(),this._handleTabKey(e)||this._handleSupportedKey(e)}_handlePasteInput(e){e.preventDefault()}_handleSupportedKey(e){e.preventDefault();const t=e.key;let i;switch(t){case"Enter":case"ArrowRight":this._actionSelectNextRange();break;case"ArrowLeft":this._actionSelectPreviousRange();break;case"ArrowUp":i=this._computeArrowUpDownValue(1),this._actionUpdateInputValue(i);break;case"ArrowDown":i=this._computeArrowUpDownValue(-1),this._actionUpdateInputValue(i);break;case"Backspace":case"Delete":i=this._computeDeleteValue(),this._actionUpdateInputValue(i);break;default:i=this._computeDefaultKeyValue(t),this._actionUpdateInputValue(i)}}_actionUpdateInputValue(e){const t=""===this.value?this.value:this._formatKeyDownValue(),i=Rt(t),n=Rt(e);i!==n&&(this.value=n,this._dispatchEventTimeChange(n,i))}_computeDeleteValue(){return this._inputFocusEl===this._minutesEl?this._formatKeyDownValue({minutes:"00"}):this._inputFocusEl===this._hoursEl?this._formatKeyDownValue({hours:"00"}):this._formatKeyDownValue()}_computeArrowUpDownValue(e){return this._inputFocusEl===this._hoursEl?this._computeArrowUpDownHourValue(e):this._inputFocusEl===this._minutesEl?this._computeArrowUpDownMinuteValue(e):this._computeKeyDownSuffixValue()}_computeKeyDownSuffixValue(e){if(!e){const e=this._suffix===yt?xt:yt;return this._formatKeyDownValue({suffix:e})}if(-1===["a","A","p","P"].indexOf(e))return this._formatKeyDownValue();const t="a"===e||"A"===e?yt:xt;return""===this.value&&this._hoursEl.select(),this._formatKeyDownValue({suffix:t})}_computeArrowUpDownHourValue(e){let t=parseInt(this._hours,10)+e;return this.hour12?(t%=kt,t=t<=0?kt:t):(t%=vt,t=t<0?23:t),this._formatKeyDownValue({hours:t.toString()})}_computeArrowUpDownMinuteValue(e){let t=parseInt(this._minutes,10)+e;return t%=60,t=t<0?59:t,this._formatKeyDownValue({minutes:t.toString()})}_computeDefaultKeyValue(e){return/^[0-9]$/i.test(e)?this._computeNumberKeyValue(e):this._inputFocusEl===this._suffixEl?this._computeKeyDownSuffixValue(e):this._formatKeyDownValue()}_computeNumberKeyValue(e){return this._inputFocusEl===this._minutesEl?this._computeNumberKeyValueMinutes(e):this._inputFocusEl===this._hoursEl?this._computeNumberKeyValueHours(e):this._formatKeyDownValue()}_computeNumberKeyValueMinutes(e){const t=this._getPreviousMinutes(this._minutes),i=Jt(t+e);return""===this.value?(this._hoursEl.select(),this._computeNumberKeyValueHours(e)):this._formatKeyDownValue({minutes:i})}_computeNumberKeyValueHours(e){const t=this._getPreviousHours(this._hours,e),i=Jt(t+e);return""===this.value?this._formatKeyDownValue({hours:i,minutes:"00"}):this._formatKeyDownValue({hours:i})}_getPreviousMinutes(e){let t;return t=parseInt(e,10)>10?(""+e)[1]:""+e,t=parseInt(t,10)>5?"0":t,t}_getPreviousHours(e,t){let i;i=parseInt(e,10)>10?(""+e)[1]:""+e;const n=parseInt(i+t,10);return i=this.hour12&&n>kt||!this.hour12&&n>=vt?"0":i,i}_actionSelectNextRange(){this._inputFocusEl!==this._hoursEl?this.hour12&&this._inputFocusEl===this._minutesEl&&this._suffixEl.select():this._minutesEl.select()}_actionSelectPreviousRange(){this._inputFocusEl!==this._suffixEl?this._inputFocusEl===this._minutesEl&&this._hoursEl.select():this._minutesEl.select()}_dispatchEventTimeChange(e,t){const i={value:e,oldValue:t};(Ut(e,this.min)<0||Ut(this.max,e)<0)&&(i.error=this._locale.TIME_IS_OUT_OF_VALID_RANGE),gi(this,"kuc:base-time-change",i)}_formatKeyDownValue(e={hours:this._hours,minutes:this._minutes,suffix:this._suffix}){const t=e.hours||this._hours,i=e.minutes||this._minutes,n=e.suffix||this._suffix,o=`${Jt(t)}:${Jt(i)}`;return n?`${o} ${n}`:o}_openListBox(){this._listBoxVisible||(this._doFocusListBox=!1,this._listBoxVisible=!0)}_closeListBox(){this._doFocusListBox=!1,this._listBoxVisible=!1}_getColonTemplate(){return this._hours?we` <span class="kuc-base-time-1-17-1__group__colon">:</span> `:""}_getSuffixTemplate(){return this.hour12?we`
           <input
-            class="kuc-base-time-1-17-0__group__suffix"
+            class="kuc-base-time-1-17-1__group__suffix"
             role="spinbutton"
             tabindex="${this._suffix?"0":"-1"}"
             aria-label="${this._suffix||"suffix"}"
@@ -712,11 +711,11 @@
             ?disabled="${this.disabled}"
             value="${this._suffix}"
           />
-        `:""}_getListBoxTemplate(){return this._listBoxVisible?$e`
-          <kuc-base-datetime-listbox-1-17-0
+        `:""}_getListBoxTemplate(){return this._listBoxVisible?we`
+          <kuc-base-datetime-listbox-1-17-1
             maxHeight="165"
             aria-hidden="${!this._listBoxVisible}"
-            class="kuc-base-time-1-17-0__group__listbox"
+            class="kuc-base-time-1-17-1__group__listbox"
             .items="${this._listBoxItems||[]}"
             .value="${this._valueLabel}"
             .doFocus="${this._doFocusListBox}"
@@ -724,32 +723,32 @@
             @kuc:listbox-blur="${this._handleBlurListBox}"
             @kuc:listbox-focus-change="${this._handleListBoxFocusChange}"
             @kuc:listbox-escape="${this._handleListBoxEscape}"
-          ></kuc-base-datetime-listbox-1-17-0>
-        `:""}}rn([Fe({type:String,attribute:"lang",reflect:!0})],ln.prototype,"language",void 0),rn([Fe({type:String})],ln.prototype,"max",void 0),rn([Fe({type:String})],ln.prototype,"min",void 0),rn([Fe({type:String})],ln.prototype,"value",void 0),rn([Fe({type:Boolean})],ln.prototype,"disabled",void 0),rn([Fe({type:Boolean})],ln.prototype,"hour12",void 0),rn([Fe({type:Number})],ln.prototype,"timeStep",void 0),rn([We()],ln.prototype,"_listBoxVisible",void 0),rn([We()],ln.prototype,"_valueLabel",void 0),rn([We()],ln.prototype,"_doFocusListBox",void 0),rn([We()],ln.prototype,"_hours",void 0),rn([We()],ln.prototype,"_minutes",void 0),rn([We()],ln.prototype,"_suffix",void 0),rn([We()],ln.prototype,"_inputFocusEl",void 0),rn([Ke(".kuc-base-time-1-17-0__group__hours")],ln.prototype,"_hoursEl",void 0),rn([Ke(".kuc-base-time-1-17-0__group__minutes")],ln.prototype,"_minutesEl",void 0),rn([Ke(".kuc-base-time-1-17-0__group__suffix")],ln.prototype,"_suffixEl",void 0),rn([Ke(".kuc-base-time-1-17-0__assistive-text")],ln.prototype,"_toggleEl",void 0),rn([Ke(".kuc-base-time-1-17-0__group")],ln.prototype,"_inputGroupEl",void 0),window.customElements.get("kuc-base-time-1-17-0")||(mi("\n:lang(ja) .kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__hours,\n:lang(ja) .kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__minutes {\n  width: 2ch;\n}\n.kuc-base-time-1-17-0__group {\n  display: inline-flex;\n  position: relative;\n  justify-content: center;\n  -webkit-box-align: center;\n  align-items: center;\n  max-width: 85px;\n  width: 85px;\n  height: 40px;\n  color: #333333;\n  border: solid 1px #e3e7e8;\n  box-sizing: border-box;\n  padding: 0px 8px;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__hours {\n  border: 0px;\n  padding: 0px;\n  width: 2ch;\n  font-size: inherit;\n  outline: none;\n  background-color: transparent;\n  color: #333333;\n  caret-color: transparent;\n  user-select: none;\n}\n.kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__minutes {\n  border: 0px;\n  padding: 0px;\n  width: 2ch;\n  font-size: inherit;\n  outline: none;\n  background-color: transparent;\n  color: #333333;\n  caret-color: transparent;\n  user-select: none;\n}\n.kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__hours:focus {\n  border: 0px;\n}\n.kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__minutes:focus {\n  border: 0px;\n}\n.kuc-base-time-1-17-0__group__colon {\n  width: auto;\n  text-align: center;\n}\n.kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__suffix {\n  border: 0px;\n  width: 3ch;\n  text-align: right;\n  font-size: inherit;\n  outline: none;\n  appearance: none;\n  margin-left: 1px;\n  padding: 0px;\n  background-color: transparent;\n  color: #333333;\n  caret-color: transparent;\n  user-select: none;\n}\n.kuc-base-time-1-17-0__group--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: #333333;\n}\n.kuc-base-time-1-17-0__assistive-text {\n  clip: rect(1px, 1px, 1px, 1px);\n  overflow: hidden;\n  position: absolute !important;\n  padding: 0px !important;\n  border: 0px !important;\n  height: 1px !important;\n  width: 1px !important;\n}\n.kuc-base-time-1-17-0__group--disabled {\n  background-color: #d4d7d7;\n  box-shadow: none;\n  color: #888888;\n  cursor: not-allowed;\n}\n.kuc-base-time-1-17-0__group--disabled input:disabled,\n.kuc-base-time-1-17-0__group--disabled span {\n  cursor: not-allowed;\n  color: #888888;\n  -webkit-text-fill-color: #888888;\n}\n"),window.customElements.define("kuc-base-time-1-17-0",ln));var dn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let un;(()=>{if(un=window.customElements.get("kuc-datetime-picker-1-17-0"),!un){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.max="",this.min="",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this.timeStep=30,this._dateValue="",this._timeValue="",this._previousTimeValue="",this._previousDateValue="",this._errorFormat="",this._errorText="",this._dateConverted="",this._changeDateByUI=!1,this._changeTimeByUI=!1,this._inputMax="",this._inputMin="",this._timeConverted="",this._errorInvalidTime="",this._inputTimeStep=30,this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!((e.has("max")||e.has("min"))&&!this._checkAndUpdateMaxMinProperty())&&(!(e.has("timeStep")&&!this._checkAndUpdateTimeStepProperty())&&(void 0===this.value||""===this.value||("string"!=typeof this.value?(this.throwErrorAfterUpdateComplete(Tt),!1):(this._dateAndTime=this._getDateTimeValue(this.value),this._dateConverted=ri(this._dateAndTime.date),Ci(this._dateAndTime.date,this._dateAndTime.time)&&wi(this._dateConverted)?(this._timeConverted=li(this._dateAndTime.time.slice(0,5)),!e.has("value")||!(Pt(this._timeConverted,this._inputMin)<0||Pt(this._inputMax,this._timeConverted)<0)||(this.throwErrorAfterUpdateComplete(Ct),!1)):(this.throwErrorAfterUpdateComplete(Tt),!1)))))}willUpdate(e){this._changeDateByUI||this._changeTimeByUI?this._updateValueChangeByUI():this._updateValueWhenSetter()}_checkAndUpdateMaxMinProperty(){let e=this._inputMin,t=this._inputMax;if(void 0===this.max||""===this.max)t=St;else{if(!yi(this.max))return this.throwErrorAfterUpdateComplete(At),!1;t=this.max=li(this.max)}if(void 0===this.min||""===this.min)e=Et;else{if(!yi(this.min))return this.throwErrorAfterUpdateComplete(Dt),!1;e=this.min=li(this.min)}return Pt(t,e)<0?(this.throwErrorAfterUpdateComplete($t),!1):(this._inputMin=e,this._inputMax=t,!0)}_checkAndUpdateTimeStepProperty(){return Si(this.timeStep)?xi(this.timeStep,this._inputMax,this._inputMin)?(this._inputTimeStep=this.timeStep,!0):(this.throwErrorAfterUpdateComplete(Vt),!1):(this.throwErrorAfterUpdateComplete(It),!1)}_updateValueChangeByUI(){const e=this._validateDateTimeFormat();this.value=e?this.value:void 0,!e||this._dateValue||this._timeValue||(this.value="");const t=!this._dateValue&&this._timeValue,i=this._dateValue&&!this._timeValue;this._errorText=t||i?this.error||this._errorFormat||this._errorInvalidTime:e?this.error:this._errorFormat||this._errorInvalidTime}_validateDateTimeFormat(){const e=Boolean(this._timeValue)&&!this._dateValue,t=Boolean(this._dateValue)&&!this._timeValue;return!(this._errorFormat||this._errorInvalidTime||e||t)}_updateValueWhenSetter(){if(this._errorText=this.error,""===this.value||void 0===this.value)return this._previousTimeValue="",this._errorFormat="",void(this._errorInvalidTime="");this._setDateTimeValueSeparate(this._dateAndTime,this._dateConverted),this.value=this._getDateTimeString()}_setDateTimeValueSeparate(e,t){this._dateValue=t||this._dateInput.value,this._timeValue=this._dateValue&&wi(t)?li(e.time.slice(0,5)):this._previousTimeValue}update(e){e.has("value")&&(void 0===this.value&&this._setUndefinedValue(),""===this.value&&this._setEmptyValue()),(e.has("max")||e.has("min")||e.has("value"))&&void 0!==this.value&&(this._errorInvalidTime=""),super.update(e)}_setUndefinedValue(){if(!this._changeTimeByUI){if(this._errorFormat)return this._changeDateByUI?void(this._dateValue=this._dateInput.value):(this._dateValue="",void(this._timeValue=""));this._dateValue=this._previousDateValue,this._timeValue=this._previousTimeValue}}_setEmptyValue(){this._dateValue="",this._timeValue="",this._previousTimeValue="",this._previousDateValue="",this._errorFormat="",this._errorInvalidTime=""}render(){return $e`
+          ></kuc-base-datetime-listbox-1-17-1>
+        `:""}}rn([Ge({type:String,attribute:"lang",reflect:!0})],ln.prototype,"language",void 0),rn([Ge({type:String})],ln.prototype,"max",void 0),rn([Ge({type:String})],ln.prototype,"min",void 0),rn([Ge({type:String})],ln.prototype,"value",void 0),rn([Ge({type:Boolean})],ln.prototype,"disabled",void 0),rn([Ge({type:Boolean})],ln.prototype,"hour12",void 0),rn([Ge({type:Number})],ln.prototype,"timeStep",void 0),rn([Fe()],ln.prototype,"_listBoxVisible",void 0),rn([Fe()],ln.prototype,"_valueLabel",void 0),rn([Fe()],ln.prototype,"_doFocusListBox",void 0),rn([Fe()],ln.prototype,"_hours",void 0),rn([Fe()],ln.prototype,"_minutes",void 0),rn([Fe()],ln.prototype,"_suffix",void 0),rn([Fe()],ln.prototype,"_inputFocusEl",void 0),rn([qe(".kuc-base-time-1-17-1__group__hours")],ln.prototype,"_hoursEl",void 0),rn([qe(".kuc-base-time-1-17-1__group__minutes")],ln.prototype,"_minutesEl",void 0),rn([qe(".kuc-base-time-1-17-1__group__suffix")],ln.prototype,"_suffixEl",void 0),rn([qe(".kuc-base-time-1-17-1__assistive-text")],ln.prototype,"_toggleEl",void 0),rn([qe(".kuc-base-time-1-17-1__group")],ln.prototype,"_inputGroupEl",void 0),window.customElements.get("kuc-base-time-1-17-1")||(mi("\n:lang(ja) .kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__hours,\n:lang(ja) .kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__minutes {\n  width: 2ch;\n}\n.kuc-base-time-1-17-1__group {\n  display: inline-flex;\n  position: relative;\n  justify-content: center;\n  -webkit-box-align: center;\n  align-items: center;\n  max-width: 85px;\n  width: 85px;\n  height: 40px;\n  color: #333333;\n  border: solid 1px #e3e7e8;\n  box-sizing: border-box;\n  padding: 0px 8px;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  background-color: #ffffff;\n  overflow: hidden;\n}\n.kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__hours {\n  border: 0px;\n  padding: 0px;\n  width: 2ch;\n  font-size: inherit;\n  outline: none;\n  background-color: transparent;\n  color: #333333;\n  caret-color: transparent;\n  user-select: none;\n}\n.kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__minutes {\n  border: 0px;\n  padding: 0px;\n  width: 2ch;\n  font-size: inherit;\n  outline: none;\n  background-color: transparent;\n  color: #333333;\n  caret-color: transparent;\n  user-select: none;\n}\n.kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__hours:focus {\n  border: 0px;\n}\n.kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__minutes:focus {\n  border: 0px;\n}\n.kuc-base-time-1-17-1__group__colon {\n  width: auto;\n  text-align: center;\n}\n.kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__suffix {\n  border: 0px;\n  width: 3ch;\n  text-align: right;\n  font-size: inherit;\n  outline: none;\n  appearance: none;\n  margin-left: 1px;\n  padding: 0px;\n  background-color: transparent;\n  color: #333333;\n  caret-color: transparent;\n  user-select: none;\n}\n.kuc-base-time-1-17-1__group--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: #333333;\n}\n.kuc-base-time-1-17-1__assistive-text {\n  clip: rect(1px, 1px, 1px, 1px);\n  overflow: hidden;\n  position: absolute !important;\n  padding: 0px !important;\n  border: 0px !important;\n  height: 1px !important;\n  width: 1px !important;\n}\n.kuc-base-time-1-17-1__group--disabled {\n  background-color: #d4d7d7;\n  box-shadow: none;\n  color: #888888;\n  cursor: not-allowed;\n}\n.kuc-base-time-1-17-1__group--disabled input:disabled,\n.kuc-base-time-1-17-1__group--disabled span {\n  cursor: not-allowed;\n  color: #888888;\n  -webkit-text-fill-color: #888888;\n}\n"),window.customElements.define("kuc-base-time-1-17-1",ln));var dn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let un;(()=>{if(un=window.customElements.get("kuc-datetime-picker-1-17-1"),!un){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.max="",this.min="",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this.timeStep=30,this._dateValue="",this._timeValue="",this._previousTimeValue="",this._previousDateValue="",this._errorFormat="",this._errorText="",this._dateConverted="",this._changeDateByUI=!1,this._changeTimeByUI=!1,this._inputMax="",this._inputMin="",this._timeConverted="",this._errorInvalidTime="",this._inputTimeStep=30,this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!((e.has("max")||e.has("min"))&&!this._checkAndUpdateMaxMinProperty())&&(!(e.has("timeStep")&&!this._checkAndUpdateTimeStepProperty())&&(void 0===this.value||""===this.value||("string"!=typeof this.value?(this.throwErrorAfterUpdateComplete(St),!1):(this._dateAndTime=this._getDateTimeValue(this.value),this._dateConverted=si(this._dateAndTime.date),Ci(this._dateAndTime.date,this._dateAndTime.time)&&wi(this._dateConverted)?(this._timeConverted=ri(this._dateAndTime.time.slice(0,5)),!e.has("value")||!(Ut(this._timeConverted,this._inputMin)<0||Ut(this._inputMax,this._timeConverted)<0)||(this.throwErrorAfterUpdateComplete($t),!1)):(this.throwErrorAfterUpdateComplete(St),!1)))))}willUpdate(e){this._changeDateByUI||this._changeTimeByUI?this._updateValueChangeByUI():this._updateValueWhenSetter()}_checkAndUpdateMaxMinProperty(){let e=this._inputMin,t=this._inputMax;if(void 0===this.max||""===this.max)t=Et;else{if(!yi(this.max))return this.throwErrorAfterUpdateComplete(Tt),!1;t=this.max=ri(this.max)}if(void 0===this.min||""===this.min)e=It;else{if(!yi(this.min))return this.throwErrorAfterUpdateComplete(At),!1;e=this.min=ri(this.min)}return Ut(t,e)<0?(this.throwErrorAfterUpdateComplete(wt),!1):(this._inputMin=e,this._inputMax=t,!0)}_checkAndUpdateTimeStepProperty(){return Si(this.timeStep)?xi(this.timeStep,this._inputMax,this._inputMin)?(this._inputTimeStep=this.timeStep,!0):(this.throwErrorAfterUpdateComplete(Dt),!1):(this.throwErrorAfterUpdateComplete(Ct),!1)}_updateValueChangeByUI(){const e=this._validateDateTimeFormat();this.value=e?this.value:void 0,!e||this._dateValue||this._timeValue||(this.value="");const t=!this._dateValue&&this._timeValue,i=this._dateValue&&!this._timeValue;this._errorText=t||i?this.error||this._errorFormat||this._errorInvalidTime:e?this.error:this._errorFormat||this._errorInvalidTime}_validateDateTimeFormat(){const e=Boolean(this._timeValue)&&!this._dateValue,t=Boolean(this._dateValue)&&!this._timeValue;return!(this._errorFormat||this._errorInvalidTime||e||t)}_updateValueWhenSetter(){if(this._errorText=this.error,""===this.value||void 0===this.value)return this._previousTimeValue="",this._errorFormat="",void(this._errorInvalidTime="");this._setDateTimeValueSeparate(this._dateAndTime,this._dateConverted),this.value=this._getDateTimeString()}_setDateTimeValueSeparate(e,t){this._dateValue=t||this._dateInput.value,this._timeValue=this._dateValue&&wi(t)?ri(e.time.slice(0,5)):this._previousTimeValue}update(e){e.has("value")&&(void 0===this.value&&this._setUndefinedValue(),""===this.value&&this._setEmptyValue()),(e.has("max")||e.has("min")||e.has("value"))&&void 0!==this.value&&(this._errorInvalidTime=""),super.update(e)}_setUndefinedValue(){if(!this._changeTimeByUI){if(this._errorFormat)return this._changeDateByUI?void(this._dateValue=this._dateInput.value):(this._dateValue="",void(this._timeValue=""));this._dateValue=this._previousDateValue,this._timeValue=this._previousTimeValue}}_setEmptyValue(){this._dateValue="",this._timeValue="",this._previousTimeValue="",this._previousDateValue="",this._errorFormat="",this._errorInvalidTime=""}render(){return we`
         <fieldset
-          class="kuc-datetime-picker-1-17-0__group"
+          class="kuc-datetime-picker-1-17-1__group"
           aria-describedby="${this._GUID}-error"
         >
           <legend
-            class="kuc-datetime-picker-1-17-0__group__label"
+            class="kuc-datetime-picker-1-17-1__group__label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </legend>
-          <div class="kuc-datetime-picker-1-17-0__group__inputs">
-            <kuc-base-date-1-17-0
-              class="kuc-datetime-picker-1-17-0__group__inputs--date"
+          <div class="kuc-datetime-picker-1-17-1__group__inputs">
+            <kuc-base-date-1-17-1
+              class="kuc-datetime-picker-1-17-1__group__inputs--date"
               .value="${this._dateValue}"
               .language="${this._getLanguage()}"
               .disabled="${this.disabled}"
               inputAriaLabel="date"
               @kuc:base-date-change="${this._handleDateChange}"
-            ></kuc-base-date-1-17-0
-            ><kuc-base-time-1-17-0
-              class="kuc-datetime-picker-1-17-0__group__inputs--time"
+            ></kuc-base-date-1-17-1
+            ><kuc-base-time-1-17-1
+              class="kuc-datetime-picker-1-17-1__group__inputs--time"
               .value="${this._timeValue}"
               .hour12="${this.hour12}"
               .disabled="${this.disabled}"
@@ -758,17 +757,17 @@
               .max="${this._inputMax}"
               .language="${this._getLanguage()}"
               @kuc:base-time-change="${this._handleTimeChange}"
-            ></kuc-base-time-1-17-0>
+            ></kuc-base-time-1-17-1>
           </div>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this._errorText}"
             .guid="${this._GUID}"
             ?hidden="${!this._errorText}"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </fieldset>
-      `}updated(){this._resetState()}_resetState(){this._previousTimeValue="",this._previousDateValue="",this._changeDateByUI=!1,this._changeTimeByUI=!1}_handleDateChange(e){e.stopPropagation(),e.preventDefault(),this._changeDateByUI=!0;let t=this._dateValue;e.detail.error?(this._errorFormat=e.detail.error,this.error=""):(t=e.detail.value,this._errorFormat=""),this._updateDateTimeValue(t,"date")}_handleTimeChange(e){e.preventDefault(),e.stopPropagation(),this._changeTimeByUI=!0;const t=e.detail.value;e.detail.error?(this._errorInvalidTime=e.detail.error,this.error=""):this._errorInvalidTime="",this._updateDateTimeValue(t,"time")}_updateDateTimeValue(e,t){const i=this.value;"date"===t?this._dateValue=e||"":this._timeValue=e,this._previousTimeValue=this._timeValue,this._previousDateValue=this._dateValue;const n=this._errorFormat||this._errorInvalidTime?void 0:this._getDateTimeString(),o=this._errorFormat||this._errorInvalidTime?void 0:n;this.value=o,!this._validateDateTimeFormat()||this._dateValue||this._timeValue||(this.value="");const a={value:this.value,oldValue:i,changedPart:t};gi(this,"change",a)}_getDateTimeString(){if(!this._dateValue||!this._timeValue)return;if(!this.value)return`${this._dateValue}T${this._timeValue}:00`;const e=this.value.split(":");return 3===e.length?`${this._dateValue}T${this._timeValue}:${e[2]}`:`${this._dateValue}T${this._timeValue}:00`}_getDateTimeValue(e){if(""===e||void 0===e)return{date:"",time:""};const t=e.split("T"),i=t[0],n=t[1];if(e.indexOf("T")===e.length-1||t.length>2)return{date:i,time:""};if(!n)return{date:i,time:Et};const[o,a,s]=n.split(":");if(""===o||""===a||""===s)return{date:i,time:n};const r=`${o}:${a||"00"}`;return s?{date:i,time:`${r}:${s}`}:{date:i,time:r}}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}}dn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),dn([Fe({type:String})],e.prototype,"error",void 0),dn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),dn([Fe({type:String})],e.prototype,"label",void 0),dn([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),dn([Fe({type:String})],e.prototype,"max",void 0),dn([Fe({type:String})],e.prototype,"min",void 0),dn([Fe({type:String,hasChanged:(e,t)=>(""===e||void 0===e)&&e===t||e!==t})],e.prototype,"value",void 0),dn([Fe({type:Boolean})],e.prototype,"disabled",void 0),dn([Fe({type:Boolean})],e.prototype,"hour12",void 0),dn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),dn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),dn([Fe({type:Number})],e.prototype,"timeStep",void 0),dn([Ke(".kuc-base-date-1-17-0__input")],e.prototype,"_dateInput",void 0),window.customElements.define("kuc-datetime-picker-1-17-0",e),mi('\nkuc-datetime-picker-1-17-0,\nkuc-datetime-picker-1-17-0 *,\nkuc-datetime-picker-1-17-0:lang(en),\nkuc-datetime-picker-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-datetime-picker-1-17-0:lang(ja),\nkuc-datetime-picker-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-datetime-picker-1-17-0:lang(zh),\nkuc-datetime-picker-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-datetime-picker-1-17-0:lang(zh-TW),\nkuc-datetime-picker-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\nkuc-datetime-picker-1-17-0 {\n  font-size: 14px;\n  display: inline-table;\n  vertical-align: top;\n  line-height: 1.5;\n  max-width: calc(var(--kuc-date-time-picker-date-input-width, 100px) + var(--kuc-date-time-picker-time-input-width, 85px));\n  width: calc(var(--kuc-date-time-picker-date-input-width, 100px) + var(--kuc-date-time-picker-time-input-width, 85px));\n}\nkuc-datetime-picker-1-17-0[hidden] {\n  display: none;\n}\n.kuc-datetime-picker-1-17-0__group {\n  border: none;\n  padding: 0px;\n  height: auto;\n  display: flex;\n  flex-direction: column;\n  margin: 0px;\n}\n.kuc-datetime-picker-1-17-0__group__label {\n  display: inline-block;\n  padding: 4px 0px 8px 0px;\n  white-space: nowrap;\n}\n.kuc-datetime-picker-1-17-0__group__label[hidden] {\n  display: none;\n}\n.kuc-datetime-picker-1-17-0__group__inputs {\n  display: flex;\n  width: calc(var(--kuc-date-time-picker-date-input-width, 100px) + var(--kuc-date-time-picker-time-input-width, 85px));\n}\n.kuc-datetime-picker-1-17-0__group input[type=text].kuc-base-date-1-17-0__input {\n  width: var(--kuc-date-time-picker-date-input-width, 100px);\n  height: var(--kuc-date-time-picker-input-height, 40px);\n  color: var(--kuc-date-time-picker-input-color, #333333);\n  font-size: var(--kuc-date-time-picker-input-font-size, 14px);\n}\n.kuc-datetime-picker-1-17-0__group .kuc-base-time-1-17-0__group {\n  max-width: var(--kuc-date-time-picker-time-input-width, 85px);\n  width: var(--kuc-date-time-picker-time-input-width, 85px);\n  font-size: var(--kuc-date-time-picker-input-font-size, 14px);\n  height: var(--kuc-date-time-picker-input-height, 40px);\n  color: var(--kuc-date-time-picker-input-color, #333333);\n}\n.kuc-datetime-picker-1-17-0__group .kuc-base-time-1-17-0__group input[type=text].kuc-base-time-1-17-0__group__hours,\n.kuc-datetime-picker-1-17-0__group .kuc-base-time-1-17-0__group input[type=text].kuc-base-time-1-17-0__group__minutes,\n.kuc-datetime-picker-1-17-0__group .kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__suffix,\n.kuc-datetime-picker-1-17-0__group .kuc-base-time-1-17-0__group--focus  {\n  color: var(--kuc-date-time-picker-input-color, #333333);\n}\n'),un=e}})();var cn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let hn;(()=>{if(hn=window.customElements.get("kuc-dialog-1-17-0"),!hn){class e extends bi{constructor(e){super(),this.icon="",this.title="",this.content="",this.footer="",this.header="",this.container=document.body,this.footerVisible=!0,this._isOpened=!1,this._triggeredElement=null,this._content="",this._footer="",this._header="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusFirstDummy(){const e=this._focusableElements[this._focusableElements.length-2];e&&e.focus()}_handleFocusLastDummy(){this._dialogEl.focus()}_handleKeyDownDialog(e){"Escape"===e.key&&(e.preventDefault(),this.close())}_handleClickCloseButton(e){this.close()}_getCloseButtonSvgTemplate(){return Ce`
+      `}updated(){this._resetState()}_resetState(){this._previousTimeValue="",this._previousDateValue="",this._changeDateByUI=!1,this._changeTimeByUI=!1}_handleDateChange(e){e.stopPropagation(),e.preventDefault(),this._changeDateByUI=!0;let t=this._dateValue;e.detail.error?(this._errorFormat=e.detail.error,this.error=""):(t=e.detail.value,this._errorFormat=""),this._updateDateTimeValue(t,"date")}_handleTimeChange(e){e.preventDefault(),e.stopPropagation(),this._changeTimeByUI=!0;const t=e.detail.value;e.detail.error?(this._errorInvalidTime=e.detail.error,this.error=""):this._errorInvalidTime="",this._updateDateTimeValue(t,"time")}_updateDateTimeValue(e,t){const i=this.value;"date"===t?this._dateValue=e||"":this._timeValue=e,this._previousTimeValue=this._timeValue,this._previousDateValue=this._dateValue;const n=this._errorFormat||this._errorInvalidTime?void 0:this._getDateTimeString(),o=this._errorFormat||this._errorInvalidTime?void 0:n;this.value=o,!this._validateDateTimeFormat()||this._dateValue||this._timeValue||(this.value="");const a={value:this.value,oldValue:i,changedPart:t};gi(this,"change",a)}_getDateTimeString(){if(!this._dateValue||!this._timeValue)return;if(!this.value)return`${this._dateValue}T${this._timeValue}:00`;const e=this.value.split(":");return 3===e.length?`${this._dateValue}T${this._timeValue}:${e[2]}`:`${this._dateValue}T${this._timeValue}:00`}_getDateTimeValue(e){if(""===e||void 0===e)return{date:"",time:""};const t=e.split("T"),i=t[0],n=t[1];if(e.indexOf("T")===e.length-1||t.length>2)return{date:i,time:""};if(!n)return{date:i,time:It};const[o,a,s]=n.split(":");if(""===o||""===a||""===s)return{date:i,time:n};const r=`${o}:${a||"00"}`;return s?{date:i,time:`${r}:${s}`}:{date:i,time:r}}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}}dn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),dn([Ge({type:String})],e.prototype,"error",void 0),dn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),dn([Ge({type:String})],e.prototype,"label",void 0),dn([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),dn([Ge({type:String})],e.prototype,"max",void 0),dn([Ge({type:String})],e.prototype,"min",void 0),dn([Ge({type:String,hasChanged:(e,t)=>(""===e||void 0===e)&&e===t||e!==t})],e.prototype,"value",void 0),dn([Ge({type:Boolean})],e.prototype,"disabled",void 0),dn([Ge({type:Boolean})],e.prototype,"hour12",void 0),dn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),dn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),dn([Ge({type:Number})],e.prototype,"timeStep",void 0),dn([qe(".kuc-base-date-1-17-1__input")],e.prototype,"_dateInput",void 0),window.customElements.define("kuc-datetime-picker-1-17-1",e),mi('\nkuc-datetime-picker-1-17-1,\nkuc-datetime-picker-1-17-1 *,\nkuc-datetime-picker-1-17-1:lang(en),\nkuc-datetime-picker-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-datetime-picker-1-17-1:lang(ja),\nkuc-datetime-picker-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-datetime-picker-1-17-1:lang(zh),\nkuc-datetime-picker-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-datetime-picker-1-17-1:lang(zh-TW),\nkuc-datetime-picker-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\nkuc-datetime-picker-1-17-1 {\n  font-size: 14px;\n  display: inline-table;\n  vertical-align: top;\n  line-height: 1.5;\n  max-width: calc(var(--kuc-date-time-picker-date-input-width, 100px) + var(--kuc-date-time-picker-time-input-width, 85px));\n  width: calc(var(--kuc-date-time-picker-date-input-width, 100px) + var(--kuc-date-time-picker-time-input-width, 85px));\n}\nkuc-datetime-picker-1-17-1[hidden] {\n  display: none;\n}\n.kuc-datetime-picker-1-17-1__group {\n  border: none;\n  padding: 0px;\n  height: auto;\n  display: flex;\n  flex-direction: column;\n  margin: 0px;\n}\n.kuc-datetime-picker-1-17-1__group__label {\n  display: inline-block;\n  padding: 4px 0px 8px 0px;\n  white-space: nowrap;\n}\n.kuc-datetime-picker-1-17-1__group__label[hidden] {\n  display: none;\n}\n.kuc-datetime-picker-1-17-1__group__inputs {\n  display: flex;\n  width: calc(var(--kuc-date-time-picker-date-input-width, 100px) + var(--kuc-date-time-picker-time-input-width, 85px));\n}\n.kuc-datetime-picker-1-17-1__group input[type=text].kuc-base-date-1-17-1__input {\n  width: var(--kuc-date-time-picker-date-input-width, 100px);\n  height: var(--kuc-date-time-picker-input-height, 40px);\n  color: var(--kuc-date-time-picker-input-color, #333333);\n  font-size: var(--kuc-date-time-picker-input-font-size, 14px);\n}\n.kuc-datetime-picker-1-17-1__group .kuc-base-time-1-17-1__group {\n  max-width: var(--kuc-date-time-picker-time-input-width, 85px);\n  width: var(--kuc-date-time-picker-time-input-width, 85px);\n  font-size: var(--kuc-date-time-picker-input-font-size, 14px);\n  height: var(--kuc-date-time-picker-input-height, 40px);\n  color: var(--kuc-date-time-picker-input-color, #333333);\n}\n.kuc-datetime-picker-1-17-1__group .kuc-base-time-1-17-1__group input[type=text].kuc-base-time-1-17-1__group__hours,\n.kuc-datetime-picker-1-17-1__group .kuc-base-time-1-17-1__group input[type=text].kuc-base-time-1-17-1__group__minutes,\n.kuc-datetime-picker-1-17-1__group .kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__suffix,\n.kuc-datetime-picker-1-17-1__group .kuc-base-time-1-17-1__group--focus  {\n  color: var(--kuc-date-time-picker-input-color, #333333);\n}\n'),un=e}})();var cn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let hn;(()=>{if(hn=window.customElements.get("kuc-dialog-1-17-1"),!hn){class e extends bi{constructor(e){super(),this.icon="",this.title="",this.content="",this.footer="",this.header="",this.container=document.body,this.footerVisible=!0,this._isOpened=!1,this._triggeredElement=null,this._content="",this._footer="",this._header="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusFirstDummy(){const e=this._focusableElements[this._focusableElements.length-2];e&&e.focus()}_handleFocusLastDummy(){this._dialogEl.focus()}_handleKeyDownDialog(e){"Escape"===e.key&&(e.preventDefault(),this.close())}_handleClickCloseButton(e){this.close()}_getCloseButtonSvgTemplate(){return $e`
         <svg
-          class="kuc-dialog-1-17-0__dialog__header__close-button-svg"
+          class="kuc-dialog-1-17-1__dialog__header__close-button-svg"
           width="32"
           height="32"
           viewBox="0 0 32 32"
@@ -788,9 +787,9 @@
             fill="#888888"
           />
         </svg>
-      `}_getIconTemplate(){switch(this.icon){case"info":return Ce`
+      `}_getIconTemplate(){switch(this.icon){case"info":return $e`
             <svg
-              class="kuc-dialog-1-17-0__dialog__content__icon-info"
+              class="kuc-dialog-1-17-1__dialog__content__icon-info"
               width="18"
               height="18"
               viewBox="0 0 18 18"
@@ -808,9 +807,9 @@
                 fill="white"
               />
             </svg>
-          `;case"success":return Ce`
+          `;case"success":return $e`
             <svg
-              class="kuc-dialog-1-17-0__dialog__content__icon-success"
+              class="kuc-dialog-1-17-1__dialog__content__icon-success"
               width="18"
               height="18"
               viewBox="0 0 18 18"
@@ -826,9 +825,9 @@
                 fill="white"
               />
             </svg>
-          `;case"error":return Ce`
+          `;case"error":return $e`
             <svg
-              class="kuc-dialog-1-17-0__dialog__content__icon-error"
+              class="kuc-dialog-1-17-1__dialog__content__icon-error"
               width="18"
               height="18"
               viewBox="0 0 18 18"
@@ -846,9 +845,9 @@
                 stroke-width="0.5"
               />
             </svg>
-          `;case"warning":return Ce`
+          `;case"warning":return $e`
             <svg
-              class="kuc-dialog-1-17-0__dialog__content__icon-warning"
+              class="kuc-dialog-1-17-1__dialog__content__icon-warning"
               width="18"
               height="18"
               viewBox="0 0 18 18"
@@ -872,9 +871,9 @@
                 fill="#333333"
               />
             </svg>
-          `;case"question":return Ce`
+          `;case"question":return $e`
             <svg
-              class="kuc-dialog-1-17-0__dialog__content__icon-question"
+              class="kuc-dialog-1-17-1__dialog__content__icon-question"
               width="18"
               height="18"
               viewBox="0 0 18 18"
@@ -900,29 +899,29 @@
                 fill="white"
               />
             </svg>
-          `;default:return""}}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this._close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this._close(),!e)return this.throwErrorAfterUpdateComplete(gt),!1}return!0}update(e){e.has("content")&&(this._content=si(this.content)),e.has("footer")&&(this._footer=si(this.footer)),(e.has("header")||e.has("title"))&&(this._header=this.header?si(this.header):this.title),super.update(e)}_isValidContainerElement(){return this.container instanceof HTMLElement}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.container.appendChild(this),this.container.classList.add("kuc--has-dialog"),this.performUpdate(),this.setAttribute("opened",""),this._isOpened=!0,this._triggeredElement=document.activeElement,this._dialogEl&&this._dialogEl.focus()}close(){this._close(),gi(this,"close")}_close(){this._isOpened=!1,document.getElementsByTagName("body")[0].classList.remove("kuc--has-dialog"),this.removeAttribute("opened"),this._triggeredElement instanceof HTMLElement&&this._triggeredElement.focus()}render(){return $e`
+          `;default:return""}}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this._close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this._close(),!e)return this.throwErrorAfterUpdateComplete(bt),!1}return!0}update(e){e.has("content")&&(this._content=ai(this.content)),e.has("footer")&&(this._footer=ai(this.footer)),(e.has("header")||e.has("title"))&&(this._header=this.header?ai(this.header):this.title),super.update(e)}_isValidContainerElement(){return this.container instanceof HTMLElement}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.container.appendChild(this),this.container.classList.add("kuc--has-dialog"),this.performUpdate(),this.setAttribute("opened",""),this._isOpened=!0,this._triggeredElement=document.activeElement,this._dialogEl&&this._dialogEl.focus()}close(){this._close(),gi(this,"close")}_close(){this._isOpened=!1,document.getElementsByTagName("body")[0].classList.remove("kuc--has-dialog"),this.removeAttribute("opened"),this._triggeredElement instanceof HTMLElement&&this._triggeredElement.focus()}render(){return we`
         <span
-          class="kuc-dialog-1-17-0__first-dummy"
+          class="kuc-dialog-1-17-1__first-dummy"
           tabIndex="0"
           @focus="${this._handleFocusFirstDummy}"
         ></span>
         <div
-          class="kuc-dialog-1-17-0__dialog"
+          class="kuc-dialog-1-17-1__dialog"
           role="dialog"
           tabindex="-1"
           aria-labelledby="${this._GUID}-title"
           aria-modal="true"
           @keydown="${this._handleKeyDownDialog}"
         >
-          <div class="kuc-dialog-1-17-0__dialog__header">
+          <div class="kuc-dialog-1-17-1__dialog__header">
             <h2
-              class="kuc-dialog-1-17-0__dialog__header__title"
+              class="kuc-dialog-1-17-1__dialog__header__title"
               id="${this._GUID}-title"
             >
               ${this._header}
             </h2>
             <button
-              class="kuc-dialog-1-17-0__dialog__header__close-button"
+              class="kuc-dialog-1-17-1__dialog__header__close-button"
               type="button"
               aria-label="close"
               @click="${this._handleClickCloseButton}"
@@ -930,28 +929,28 @@
               ${this._getCloseButtonSvgTemplate()}
             </button>
           </div>
-          <div class="kuc-dialog-1-17-0__dialog__content">
-            <div class="kuc-dialog-1-17-0__dialog__content__icon">
+          <div class="kuc-dialog-1-17-1__dialog__content">
+            <div class="kuc-dialog-1-17-1__dialog__content__icon">
               ${this._getIconTemplate()}
             </div>
-            <div class="kuc-dialog-1-17-0__dialog__content__content">
+            <div class="kuc-dialog-1-17-1__dialog__content__content">
               ${this._content}
             </div>
           </div>
           <div
-            class="kuc-dialog-1-17-0__dialog__footer"
+            class="kuc-dialog-1-17-1__dialog__footer"
             ?hidden="${!this.footerVisible}"
           >
             ${this._footer}
           </div>
         </div>
         <span
-          class="kuc-dialog-1-17-0__last-dummy"
+          class="kuc-dialog-1-17-1__last-dummy"
           tabIndex="0"
           @focus="${this._handleFocusLastDummy}"
         ></span>
-        <div class="kuc-dialog-1-17-0__mask"></div>
-      `}}cn([Fe({type:String})],e.prototype,"icon",void 0),cn([Fe({type:String})],e.prototype,"title",void 0),cn([Fe()],e.prototype,"content",void 0),cn([Fe()],e.prototype,"footer",void 0),cn([Fe()],e.prototype,"header",void 0),cn([Fe()],e.prototype,"container",void 0),cn([Fe({type:Boolean})],e.prototype,"footerVisible",void 0),cn([We()],e.prototype,"_isOpened",void 0),cn([Ke(".kuc-dialog-1-17-0__dialog")],e.prototype,"_dialogEl",void 0),cn([Je("a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type='text']:not([disabled]), input[type='radio']:not([disabled]), input[type='checkbox']:not([disabled]), select:not([disabled]),[tabindex='0']")],e.prototype,"_focusableElements",void 0),window.customElements.define("kuc-dialog-1-17-0",e),mi('\n  kuc-dialog-1-17-0,\n  kuc-dialog-1-17-0 *,\n  kuc-dialog-1-17-0:lang(en),\n  kuc-dialog-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-dialog-1-17-0:lang(ja),\n  kuc-dialog-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-dialog-1-17-0:lang(zh),\n  kuc-dialog-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-dialog-1-17-0:lang(zh-TW),\n  kuc-dialog-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n\n  kuc-dialog-1-17-0 {\n    display: none;\n  }\n\n  kuc-dialog-1-17-0[opened] {\n    display: block;\n  }\n\n  .kuc-dialog-1-17-0__dialog {\n    min-width: 400px;\n    max-width: var(--kuc-dialog-max-width, 600px);\n    width: max-content;\n    font-size: 20px;\n    background-color: #ffffff;\n    position: fixed;\n    line-height: normal;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 10000;\n  }\n  \n  .kuc-dialog-1-17-0__dialog:focus-visible {\n    outline: 1px solid #3498db;\n  }\n\n  .kuc-dialog-1-17-0__dialog__header {\n    min-height: 64px;\n    border-bottom: 1px solid #e3e7e8;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .kuc-dialog-1-17-0__dialog__header__title {\n    font-size: var(--kuc-dialog-header-font-size, 24px);\n    color: var(--kuc-dialog-header-color);\n    padding: 0 24px;\n    align-self: center;\n    overflow-wrap: anywhere;\n    word-break: normal;\n    font-weight: 400;\n  }\n\n  .kuc-dialog-1-17-0__dialog__header__close-button {\n    width: 48px;\n    height: 48px;\n    border: none;\n    background-color: #ffffff;\n    margin-right: 12px;\n    margin-top: 11px;\n    cursor: pointer;\n  }\n\n  .kuc-dialog-1-17-0__dialog__header__close-button:focus-visible {\n    outline: 1px solid #3498db;\n  }\n\n  .kuc-dialog-1-17-0__dialog__header__close-button-svg {\n    vertical-align: middle;\n  }\n\n  .kuc-dialog-1-17-0__dialog__content {\n    border-bottom: #e3e7e8 solid 1px;\n    background-color: #f7f9fa;\n    padding: 24px;\n    display: flex;\n    overflow: auto;\n  }\n\n  .kuc-dialog-1-17-0__dialog__content__content {\n    line-height: 1.2;\n    overflow-wrap: anywhere;\n    word-break: normal;\n  }\n\n  .kuc-dialog-1-17-0__dialog__content__icon-info,\n  .kuc-dialog-1-17-0__dialog__content__icon-success,\n  .kuc-dialog-1-17-0__dialog__content__icon-error,\n  .kuc-dialog-1-17-0__dialog__content__icon-warning,\n  .kuc-dialog-1-17-0__dialog__content__icon-question {\n    margin-right: 16px;\n    width: 24px;\n    height: 24px;\n  }\n\n  .kuc-dialog-1-17-0__dialog__footer {\n    padding: 24px;\n    overflow-wrap: anywhere;\n    word-break: normal;\n  }\n\n  .kuc-dialog-1-17-0__dialog__footer[hidden] {\n    display: none;\n  }\n\n  .kuc-dialog-1-17-0__mask {\n    position: fixed;\n    top: 0;\n    right: 0;\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: #000000;\n    opacity: 0.6;\n    z-index: 9999;\n  }\n\n  .kuc--has-dialog {\n    overflow: hidden;\n  }\n\n  .kuc--has-dialog .kuc-dialog-1-17-0__dialog {\n    overflow-x: hidden;\n    overflow-y: auto;\n    max-height: 80vh;\n  }\n'),hn=e}})();var _n=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let pn;(()=>{if(pn=window.customElements.get("kuc-dropdown-1-17-0"),!pn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.selectedIndex=-1,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._selectorVisible=!1,this._DISABLED_CLASS="kuc-dropdown-1-17-0__group__select-menu__item--disabled",this._hasValueInItems=!1,this._GUID=fi();const t=vi(e);this._handleClickDocument=this._handleClickDocument.bind(this),this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}_getSelectedLabel(){const e=this.items.filter(((e,t)=>this._isCheckedItem(e,t)));return 0===e.length?"":void 0===e[0].label?e[0].value:e[0].label}_getToggleIconSvgTemplate(){return Ce`
+        <div class="kuc-dialog-1-17-1__mask"></div>
+      `}}cn([Ge({type:String})],e.prototype,"icon",void 0),cn([Ge({type:String})],e.prototype,"title",void 0),cn([Ge()],e.prototype,"content",void 0),cn([Ge()],e.prototype,"footer",void 0),cn([Ge()],e.prototype,"header",void 0),cn([Ge()],e.prototype,"container",void 0),cn([Ge({type:Boolean})],e.prototype,"footerVisible",void 0),cn([Fe()],e.prototype,"_isOpened",void 0),cn([qe(".kuc-dialog-1-17-1__dialog")],e.prototype,"_dialogEl",void 0),cn([Ye("a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type='text']:not([disabled]), input[type='radio']:not([disabled]), input[type='checkbox']:not([disabled]), select:not([disabled]),[tabindex='0']")],e.prototype,"_focusableElements",void 0),window.customElements.define("kuc-dialog-1-17-1",e),mi('\n  kuc-dialog-1-17-1,\n  kuc-dialog-1-17-1 *,\n  kuc-dialog-1-17-1:lang(en),\n  kuc-dialog-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-dialog-1-17-1:lang(ja),\n  kuc-dialog-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-dialog-1-17-1:lang(zh),\n  kuc-dialog-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-dialog-1-17-1:lang(zh-TW),\n  kuc-dialog-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n\n  kuc-dialog-1-17-1 {\n    display: none;\n  }\n\n  kuc-dialog-1-17-1[opened] {\n    display: block;\n  }\n\n  .kuc-dialog-1-17-1__dialog {\n    min-width: 400px;\n    max-width: var(--kuc-dialog-max-width, 600px);\n    width: max-content;\n    font-size: 20px;\n    background-color: #ffffff;\n    position: fixed;\n    line-height: normal;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 10000;\n  }\n  \n  .kuc-dialog-1-17-1__dialog:focus-visible {\n    outline: 1px solid #3498db;\n  }\n\n  .kuc-dialog-1-17-1__dialog__header {\n    min-height: 64px;\n    border-bottom: 1px solid #e3e7e8;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .kuc-dialog-1-17-1__dialog__header__title {\n    font-size: var(--kuc-dialog-header-font-size, 24px);\n    color: var(--kuc-dialog-header-color);\n    padding: 0 24px;\n    align-self: center;\n    overflow-wrap: anywhere;\n    word-break: normal;\n    font-weight: 400;\n  }\n\n  .kuc-dialog-1-17-1__dialog__header__close-button {\n    width: 48px;\n    height: 48px;\n    border: none;\n    background-color: #ffffff;\n    margin-right: 12px;\n    margin-top: 11px;\n    cursor: pointer;\n  }\n\n  .kuc-dialog-1-17-1__dialog__header__close-button:focus-visible {\n    outline: 1px solid #3498db;\n  }\n\n  .kuc-dialog-1-17-1__dialog__header__close-button-svg {\n    vertical-align: middle;\n  }\n\n  .kuc-dialog-1-17-1__dialog__content {\n    border-bottom: #e3e7e8 solid 1px;\n    background-color: #f7f9fa;\n    padding: 24px;\n    display: flex;\n    overflow: auto;\n  }\n\n  .kuc-dialog-1-17-1__dialog__content__content {\n    line-height: 1.2;\n    overflow-wrap: anywhere;\n    word-break: normal;\n  }\n\n  .kuc-dialog-1-17-1__dialog__content__icon-info,\n  .kuc-dialog-1-17-1__dialog__content__icon-success,\n  .kuc-dialog-1-17-1__dialog__content__icon-error,\n  .kuc-dialog-1-17-1__dialog__content__icon-warning,\n  .kuc-dialog-1-17-1__dialog__content__icon-question {\n    margin-right: 16px;\n    width: 24px;\n    height: 24px;\n  }\n\n  .kuc-dialog-1-17-1__dialog__footer {\n    padding: 24px;\n    overflow-wrap: anywhere;\n    word-break: normal;\n  }\n\n  .kuc-dialog-1-17-1__dialog__footer[hidden] {\n    display: none;\n  }\n\n  .kuc-dialog-1-17-1__mask {\n    position: fixed;\n    top: 0;\n    right: 0;\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: #000000;\n    opacity: 0.6;\n    z-index: 9999;\n  }\n\n  .kuc--has-dialog {\n    overflow: hidden;\n  }\n\n  .kuc--has-dialog .kuc-dialog-1-17-1__dialog {\n    overflow-x: hidden;\n    overflow-y: auto;\n    max-height: 80vh;\n  }\n'),hn=e}})();var _n=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let pn;(()=>{if(pn=window.customElements.get("kuc-dropdown-1-17-1"),!pn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.selectedIndex=-1,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._selectorVisible=!1,this._DISABLED_CLASS="kuc-dropdown-1-17-1__group__select-menu__item--disabled",this._hasValueInItems=!1,this._GUID=fi();const t=vi(e);this._handleClickDocument=this._handleClickDocument.bind(this),this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}_getSelectedLabel(){const e=this.items.filter(((e,t)=>this._isCheckedItem(e,t)));return 0===e.length?"":void 0===e[0].label?e[0].value:e[0].label}_getToggleIconSvgTemplate(){return $e`
       <svg
         width="36"
         height="36"
@@ -965,20 +964,20 @@
           d="M24.2122 15.6665L25 16.1392L19.7332 21.4998H18.2668L13 16.1392L13.7878 15.6665L18.765 20.6866H19.235L24.2122 15.6665Z"
           fill="#3498db"/>
       </svg>
-    `}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(lt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(ut),1))}willUpdate(e){if((e.has("items")||e.has("value"))&&(this._hasValueInItems=this.items.some((e=>e.value===this.value))),e.has("value")){if(""!==this.value||this._hasValueInItems)return;this.selectedIndex=-1}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}_getSelectedIndex(){if(!this.value&&!this._hasValueInItems)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}render(){return $e`
-        <div class="kuc-dropdown-1-17-0__group">
+    `}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}willUpdate(e){if((e.has("items")||e.has("value"))&&(this._hasValueInItems=this.items.some((e=>e.value===this.value))),e.has("value")){if(""!==this.value||this._hasValueInItems)return;this.selectedIndex=-1}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}_getSelectedIndex(){if(!this.value&&!this._hasValueInItems)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}render(){return we`
+        <div class="kuc-dropdown-1-17-1__group">
           <div
-            class="kuc-dropdown-1-17-0__group__label"
+            class="kuc-dropdown-1-17-1__group__label"
             id="${this._GUID}-label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </div>
           <button
-            class="kuc-dropdown-1-17-0__group__toggle"
+            class="kuc-dropdown-1-17-1__group__toggle"
             id="${this._GUID}-toggle"
             type="button"
             aria-haspopup="true"
@@ -991,15 +990,15 @@
             @click="${this._handleClickDropdownToggle}"
             @keydown="${this._handleKeyDownDropdownToggle}"
           >
-            <span class="kuc-dropdown-1-17-0__group__toggle__selected-item-label"
+            <span class="kuc-dropdown-1-17-1__group__toggle__selected-item-label"
               >${this._getSelectedLabel()}</span
             >
-            <span class="kuc-dropdown-1-17-0__group__toggle__icon">
+            <span class="kuc-dropdown-1-17-1__group__toggle__icon">
               ${this._getToggleIconSvgTemplate()}
             </span>
           </button>
           <ul
-            class="kuc-dropdown-1-17-0__group__select-menu"
+            class="kuc-dropdown-1-17-1__group__select-menu"
             role="listbox"
             aria-hidden="${!this._selectorVisible}"
             ?hidden="${!this._selectorVisible}"
@@ -1008,16 +1007,16 @@
           >
             ${this.items.map(((e,t)=>this._getItemTemplate(e,t)))}
           </ul>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
             ariaLive="assertive"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}firstUpdated(){window.addEventListener("resize",(()=>{this._actionResizeScrollWindow()})),window.addEventListener("scroll",(()=>{this._actionResizeScrollWindow()}))}async updated(){await this.updateComplete,this._selectorVisible?(this._setMenuPosition(),this._scrollToView(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument,!0)}),1)):setTimeout((()=>{document.removeEventListener("click",this._handleClickDocument,!0)}),1)}_handleMouseDownDropdownItem(e){const t=this._getItemElementWhenMouseOverDown(e.target),i=t.getAttribute("value"),n=t.dataset.index||"0";this._actionUpdateValue(i,n)}_handleMouseOverDropdownItem(e){const t=this._getItemElementWhenMouseOverDown(e.target);this._actionHighlightMenuItem(t)}_handleMouseLeaveMenu(){this._actionClearAllHighlightMenuItem()}_handleMouseDownMenu(e){e.preventDefault()}_handleMouseDownDropdownToggle(e){e.preventDefault()}_handleMouseUpDropdownToggle(e){e.preventDefault()}_handleClickDropdownToggle(e){e.stopPropagation(),this._actionToggleMenu()}_handleClickDocument(e){(e.target===this._buttonEl||this._buttonEl.contains(e.target))&&e.stopPropagation(),Array.from(this._disabledItemsEl).some((t=>t===e.target||t.contains(e.target)))||this._actionHideMenu()}_handleKeyDownDropdownToggle(e){switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),0===this.items.length)break;if(!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightPrevMenuItem();break;case"Tab":this._selectorVisible&&this._actionHideMenu();break;case"Down":case"ArrowDown":if(e.preventDefault(),0===this.items.length)break;if(!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightNextMenuItem();break;case"Enter":{if(e.preventDefault(),0===this.items.length)break;if(!this._selectorVisible){this._actionShowMenu();break}const{value:t,selectedIndex:i}=this._getInfoHighlightItem();if(null===t)break;this._actionUpdateValue(t,i),this._actionHideMenu();break}case"Escape":e.preventDefault(),this._selectorVisible&&e.stopPropagation(),this._actionHideMenu();break;case"Home":this._selectorVisible&&(e.preventDefault(),this._actionHighlightFirstMenuItem());break;case"End":this._selectorVisible&&(e.preventDefault(),this._actionHighlightLastMenuItem())}}_getInfoHighlightItem(){const e=this._highlightItemEl;return null===e?{value:null,selectedIndex:"-1"}:{value:e.getAttribute("value"),selectedIndex:e.dataset.index||"0"}}_actionShowMenu(){this._buttonEl.focus(),0!==this.items.length&&(this._selectorVisible=!0,null===this._selectedItemEl||this._selectedItemEl.classList.contains(this._DISABLED_CLASS)||this._setHighlightAndActiveDescendantMenu(this._selectedItemEl))}_actionHideMenu(){this._selectorVisible=!1,this._actionRemoveActiveDescendant()}_actionToggleMenu(){0!==this.items.length&&(this._selectorVisible?this._actionHideMenu():this._actionShowMenu())}_actionHighlightFirstMenuItem(){let e=this._firstItemEl,t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightLastMenuItem(){let e=this._lastItemEl,t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightPrevMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.previousElementSibling),null===e&&(e=this._lastItemEl);let t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling,null===e&&(e=this._lastItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightNextMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.nextElementSibling),null===e&&(e=this._firstItemEl);let t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling,null===e&&(e=this._firstItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionClearAllHighlightMenuItem(){this._itemsEl.forEach((e=>{e.classList.remove("kuc-dropdown-1-17-0__group__select-menu__highlight")})),this._actionRemoveActiveDescendant()}_setHighlightAndActiveDescendantMenu(e){this._actionHighlightMenuItem(e),this._actionSetActiveDescendant(e.id),this._scrollToView()}_actionHighlightMenuItem(e){this._actionClearAllHighlightMenuItem(),e.classList.add("kuc-dropdown-1-17-0__group__select-menu__highlight")}_actionUpdateValue(e,t){const i=parseInt(t,10);if(this.value===e&&this.selectedIndex===i)return;const n={oldValue:this.value,value:e};this.value=e,this.selectedIndex=i,gi(this,"change",n)}_actionSetActiveDescendant(e){void 0!==e&&null!==this._buttonEl&&this._buttonEl.setAttribute("aria-activedescendant",e)}_actionRemoveActiveDescendant(){this._buttonEl.removeAttribute("aria-activedescendant")}_getScrollbarWidthHeight(){const e=document.createElement("div");e.style.cssText="overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(e);const t=e.offsetWidth-e.clientWidth,i=e.offsetHeight-e.clientHeight;return document.body.removeChild(e),{scrollbarWidth:t,scrollbarHeight:i}}_getDistanceToggleButton(){const{scrollbarWidth:e,scrollbarHeight:t}=this._getScrollbarWidthHeight(),i=document.body.scrollHeight>window.innerHeight,n=document.body.scrollWidth>window.innerWidth;return{toTop:this._buttonEl.getBoundingClientRect().top,toBottom:window.innerHeight-this._buttonEl.getBoundingClientRect().bottom-(n?t:0),toLeft:this._buttonEl.getBoundingClientRect().left,toRight:window.innerWidth-this._buttonEl.getBoundingClientRect().left-(i?e:0)}}_setMenuPositionAboveOrBelow(){this._menuEl.style.height="auto",this._menuEl.style.bottom="auto",this._menuEl.style.overflowY="";const e=this._menuEl.getBoundingClientRect().height,t=this._getDistanceToggleButton();if(!(t.toBottom>=e))if(t.toBottom<t.toTop){const i=this._errorEl.offsetHeight?this._errorEl.offsetHeight+16:0;if(this._menuEl.style.bottom=`${this._buttonEl.offsetHeight+i}px`,t.toTop>=e)return;this._menuEl.style.height=`${t.toTop}px`,this._menuEl.style.overflowY="scroll"}else this._menuEl.style.height=`${t.toBottom}px`,this._menuEl.style.overflowY="scroll"}_setMenuPositionLeftOrRight(){this._menuEl.style.right="auto";const e=this._menuEl.getBoundingClientRect().width,t=this._getDistanceToggleButton();if(t.toRight>=e||t.toLeft<e||t.toRight<0)return;const i=this._buttonEl.offsetWidth-t.toRight;this._menuEl.style.right=i>0?`${i}px`:"0px"}_setMenuPosition(){this._setMenuPositionAboveOrBelow(),this._setMenuPositionLeftOrRight()}_scrollToView(){if(!this._highlightItemEl||!this._menuEl)return;const e=this._menuEl.getBoundingClientRect(),t=this._highlightItemEl.getBoundingClientRect();t.top<e.top&&(this._menuEl.scrollTop-=e.top-t.top),e.bottom<t.bottom&&(this._menuEl.scrollTop+=t.bottom-e.bottom)}_actionResizeScrollWindow(){!this._timeoutID&&this._selectorVisible&&(this._timeoutID=window.setTimeout((()=>{this._timeoutID=null,this._setMenuPosition()}),50))}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return $e`
+      `}firstUpdated(){window.addEventListener("resize",(()=>{this._actionResizeScrollWindow()})),window.addEventListener("scroll",(()=>{this._actionResizeScrollWindow()}))}async updated(){await this.updateComplete,this._selectorVisible?(this._setMenuPosition(),this._scrollToView(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument,!0)}),1)):setTimeout((()=>{document.removeEventListener("click",this._handleClickDocument,!0)}),1)}_handleMouseDownDropdownItem(e){const t=this._getItemElementWhenMouseOverDown(e.target),i=t.getAttribute("value"),n=t.dataset.index||"0";this._actionUpdateValue(i,n)}_handleMouseOverDropdownItem(e){const t=this._getItemElementWhenMouseOverDown(e.target);this._actionHighlightMenuItem(t)}_handleMouseLeaveMenu(){this._actionClearAllHighlightMenuItem()}_handleMouseDownMenu(e){e.preventDefault()}_handleMouseDownDropdownToggle(e){e.preventDefault()}_handleMouseUpDropdownToggle(e){e.preventDefault()}_handleClickDropdownToggle(e){e.stopPropagation(),this._actionToggleMenu()}_handleClickDocument(e){(e.target===this._buttonEl||this._buttonEl.contains(e.target))&&e.stopPropagation(),Array.from(this._disabledItemsEl).some((t=>t===e.target||t.contains(e.target)))||this._actionHideMenu()}_handleKeyDownDropdownToggle(e){switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),0===this.items.length)break;if(!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightPrevMenuItem();break;case"Tab":this._selectorVisible&&this._actionHideMenu();break;case"Down":case"ArrowDown":if(e.preventDefault(),0===this.items.length)break;if(!this._selectorVisible){this._actionShowMenu();break}this._actionHighlightNextMenuItem();break;case"Enter":{if(e.preventDefault(),0===this.items.length)break;if(!this._selectorVisible){this._actionShowMenu();break}const{value:t,selectedIndex:i}=this._getInfoHighlightItem();if(null===t)break;this._actionUpdateValue(t,i),this._actionHideMenu();break}case"Escape":e.preventDefault(),this._selectorVisible&&e.stopPropagation(),this._actionHideMenu();break;case"Home":this._selectorVisible&&(e.preventDefault(),this._actionHighlightFirstMenuItem());break;case"End":this._selectorVisible&&(e.preventDefault(),this._actionHighlightLastMenuItem())}}_getInfoHighlightItem(){const e=this._highlightItemEl;return null===e?{value:null,selectedIndex:"-1"}:{value:e.getAttribute("value"),selectedIndex:e.dataset.index||"0"}}_actionShowMenu(){this._buttonEl.focus(),0!==this.items.length&&(this._selectorVisible=!0,null===this._selectedItemEl||this._selectedItemEl.classList.contains(this._DISABLED_CLASS)||this._setHighlightAndActiveDescendantMenu(this._selectedItemEl))}_actionHideMenu(){this._selectorVisible=!1,this._actionRemoveActiveDescendant()}_actionToggleMenu(){0!==this.items.length&&(this._selectorVisible?this._actionHideMenu():this._actionShowMenu())}_actionHighlightFirstMenuItem(){let e=this._firstItemEl,t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightLastMenuItem(){let e=this._lastItemEl,t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling;!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightPrevMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.previousElementSibling),null===e&&(e=this._lastItemEl);let t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling,null===e&&(e=this._lastItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionHighlightNextMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.nextElementSibling),null===e&&(e=this._firstItemEl);let t=!1;for(let i=0;i<this.items.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling,null===e&&(e=this._firstItemEl);!t&&this._setHighlightAndActiveDescendantMenu(e)}_actionClearAllHighlightMenuItem(){this._itemsEl.forEach((e=>{e.classList.remove("kuc-dropdown-1-17-1__group__select-menu__highlight")})),this._actionRemoveActiveDescendant()}_setHighlightAndActiveDescendantMenu(e){this._actionHighlightMenuItem(e),this._actionSetActiveDescendant(e.id),this._scrollToView()}_actionHighlightMenuItem(e){this._actionClearAllHighlightMenuItem(),e.classList.add("kuc-dropdown-1-17-1__group__select-menu__highlight")}_actionUpdateValue(e,t){const i=parseInt(t,10);if(this.value===e&&this.selectedIndex===i)return;const n={oldValue:this.value,value:e};this.value=e,this.selectedIndex=i,gi(this,"change",n)}_actionSetActiveDescendant(e){void 0!==e&&null!==this._buttonEl&&this._buttonEl.setAttribute("aria-activedescendant",e)}_actionRemoveActiveDescendant(){this._buttonEl.removeAttribute("aria-activedescendant")}_getScrollbarWidthHeight(){const e=document.createElement("div");e.style.cssText="overflow: scroll; position: absolute; top: -9999px;",document.body.appendChild(e);const t=e.offsetWidth-e.clientWidth,i=e.offsetHeight-e.clientHeight;return document.body.removeChild(e),{scrollbarWidth:t,scrollbarHeight:i}}_getDistanceToggleButton(){const{scrollbarWidth:e,scrollbarHeight:t}=this._getScrollbarWidthHeight(),i=document.body.scrollHeight>window.innerHeight,n=document.body.scrollWidth>window.innerWidth;return{toTop:this._buttonEl.getBoundingClientRect().top,toBottom:window.innerHeight-this._buttonEl.getBoundingClientRect().bottom-(n?t:0),toLeft:this._buttonEl.getBoundingClientRect().left,toRight:window.innerWidth-this._buttonEl.getBoundingClientRect().left-(i?e:0)}}_setMenuPositionAboveOrBelow(){this._menuEl.style.height="auto",this._menuEl.style.bottom="auto",this._menuEl.style.overflowY="";const e=this._menuEl.getBoundingClientRect().height,t=this._getDistanceToggleButton();if(!(t.toBottom>=e))if(t.toBottom<t.toTop){const i=this._errorEl.offsetHeight?this._errorEl.offsetHeight+16:0;if(this._menuEl.style.bottom=`${this._buttonEl.offsetHeight+i}px`,t.toTop>=e)return;this._menuEl.style.height=`${t.toTop}px`,this._menuEl.style.overflowY="scroll"}else this._menuEl.style.height=`${t.toBottom}px`,this._menuEl.style.overflowY="scroll"}_setMenuPositionLeftOrRight(){this._menuEl.style.right="auto";const e=this._menuEl.getBoundingClientRect().width,t=this._getDistanceToggleButton();if(t.toRight>=e||t.toLeft<e||t.toRight<0)return;const i=this._buttonEl.offsetWidth-t.toRight;this._menuEl.style.right=i>0?`${i}px`:"0px"}_setMenuPosition(){this._setMenuPositionAboveOrBelow(),this._setMenuPositionLeftOrRight()}_scrollToView(){if(!this._highlightItemEl||!this._menuEl)return;const e=this._menuEl.getBoundingClientRect(),t=this._highlightItemEl.getBoundingClientRect();t.top<e.top&&(this._menuEl.scrollTop-=e.top-t.top),e.bottom<t.bottom&&(this._menuEl.scrollTop+=t.bottom-e.bottom)}_actionResizeScrollWindow(){!this._timeoutID&&this._selectorVisible&&(this._timeoutID=window.setTimeout((()=>{this._timeoutID=null,this._setMenuPosition()}),50))}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return we`
         <li
-          class="kuc-dropdown-1-17-0__group__select-menu__item ${e.disabled?this._DISABLED_CLASS:""}"
+          class="kuc-dropdown-1-17-1__group__select-menu__item ${e.disabled?this._DISABLED_CLASS:""}"
           role="option"
           tabindex="${!e.disabled&&i?"0":"-1"}"
           aria-selected="${i?"true":"false"}"
@@ -1030,9 +1029,9 @@
           ${this._getDropdownIconSvgTemplate(i,!!e.disabled)}
           ${void 0===e.label?e.value:e.label}
         </li>
-      `}_getDropdownIconSvgTemplate(e,t){return Ce`
-      ${e?Ce`<svg
-          class="kuc-dropdown-1-17-0__group__select-menu__item__icon"
+      `}_getDropdownIconSvgTemplate(e,t){return $e`
+      ${e?$e`<svg
+          class="kuc-dropdown-1-17-1__group__select-menu__item__icon"
           width="11"
           height="9"
           viewBox="0 0 11 9"
@@ -1044,16 +1043,16 @@
             clip-rule="evenodd"
             d="M0 5L1.5 3L4.5 5.5L9.5 0L11 1.5L4.5 8.5L0 5Z"
             fill="${t?"#888888":"#3498db"}"/>
-        </svg>`:""}`}_getItemElementWhenMouseOverDown(e){return e.classList.value.split(" ").includes("kuc-dropdown-1-17-0__group__select-menu__item")?e:this._getItemElementWhenMouseOverDown(e.parentElement)}}_n([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),_n([Fe({type:String})],e.prototype,"error",void 0),_n([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),_n([Fe({type:String})],e.prototype,"label",void 0),_n([Fe({type:String})],e.prototype,"value",void 0),_n([Fe({type:Number})],e.prototype,"selectedIndex",void 0),_n([Fe({type:Boolean})],e.prototype,"disabled",void 0),_n([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),_n([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),_n([Fe({type:Array})],e.prototype,"items",void 0),_n([We()],e.prototype,"_selectorVisible",void 0),_n([Ke(".kuc-dropdown-1-17-0__group__select-menu")],e.prototype,"_menuEl",void 0),_n([Je(".kuc-dropdown-1-17-0__group__select-menu__item")],e.prototype,"_itemsEl",void 0),_n([Ke("button.kuc-dropdown-1-17-0__group__toggle")],e.prototype,"_buttonEl",void 0),_n([Ke(".kuc-dropdown-1-17-0__group__select-menu__item")],e.prototype,"_firstItemEl",void 0),_n([Ke(".kuc-dropdown-1-17-0__group__select-menu__item:last-child")],e.prototype,"_lastItemEl",void 0),_n([Ke(".kuc-dropdown-1-17-0__group__select-menu__item[aria-selected=true]")],e.prototype,"_selectedItemEl",void 0),_n([Ke(".kuc-dropdown-1-17-0__group__select-menu__highlight")],e.prototype,"_highlightItemEl",void 0),_n([Je(".kuc-dropdown-1-17-0__group__select-menu__item--disabled")],e.prototype,"_disabledItemsEl",void 0),_n([Ke(".kuc-base-error-1-17-0__error")],e.prototype,"_errorEl",void 0),window.customElements.define("kuc-dropdown-1-17-0",e),mi('\n  kuc-dropdown-1-17-0,\n  kuc-dropdown-1-17-0 *,\n  kuc-dropdown-1-17-0:lang(en),\n  kuc-dropdown-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-dropdown-1-17-0:lang(ja),\n  kuc-dropdown-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-dropdown-1-17-0:lang(zh),\n  kuc-dropdown-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-dropdown-1-17-0:lang(zh-TW),\n  kuc-dropdown-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-dropdown-1-17-0 {\n    display: inline-table;\n    font-size: 14px;\n    color: #333333;\n    vertical-align: top;\n    width: var(--kuc-dropdown-toggle-width, 180px);\n    min-width: var(--kuc-dropdown-toggle-width, 180px);\n    line-height: 1.5;\n  }\n  kuc-dropdown-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-dropdown-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    margin: 0px;\n    position: relative;\n  }\n  .kuc-dropdown-1-17-0__group__label {\n    padding: 4px 0px 8px 0px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n  .kuc-dropdown-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-dropdown-1-17-0__group__toggle {\n    height: var(--kuc-dropdown-toggle-height, 40px);\n    box-sizing: border-box;\n    box-shadow: 1px 1px 1px #ffffff inset;\n    border: 1px solid #e3e7e8;\n    color: var(--kuc-dropdown-toggle-color, #3498db);\n    background-color: #f7f9fa;\n    padding: 0 0 0 24px;\n    display: grid;\n    grid: auto / auto-flow;\n    align-items: center;\n    align-content: center;\n    justify-content: space-between;\n    width: var(--kuc-dropdown-toggle-width, 100%);\n    cursor: pointer;\n  }\n  .kuc-dropdown-1-17-0__group__toggle:focus {\n    outline: none;\n    border: 1px solid #3498db;\n  }\n  .kuc-dropdown-1-17-0__group__toggle:disabled {\n    background-color: #d4d7d7;\n    box-shadow: none;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-dropdown-1-17-0__group__toggle__selected-item-label {\n    font-size: var(--kuc-dropdown-font-size, 14px);\n    text-align: left;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .kuc-dropdown-1-17-0__group__toggle__icon {\n    flex: none;\n    width: 38px;\n    height: 38px;\n  }\n  .kuc-dropdown-1-17-0__group__select-menu {\n    position: absolute;\n    min-width: 280px;\n    margin: 0;\n    padding: 8px 0;\n    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n    background-color: #ffffff;\n    z-index: 2000;\n    list-style: none;\n    box-sizing: border-box;\n  }\n  .kuc-dropdown-1-17-0__group__select-menu[hidden] {\n    display: none;\n  }\n  .kuc-dropdown-1-17-0__group__select-menu__item {\n    padding: 8px 16px 8px 24px;\n    line-height: 1;\n    position: relative;\n    cursor: pointer;\n    white-space: nowrap;\n    color: var(--kuc-dropdown-menu-color, #333333);\n    font-size: var(--kuc-dropdown-font-size, 14px);\n  }\n  .kuc-dropdown-1-17-0__group__select-menu__item__icon {\n    position: absolute;\n    top: 50%;\n    left: 6px;\n    margin-top: -5px;\n  }\n  .kuc-dropdown-1-17-0__group__select-menu__item[aria-selected="true"] {\n    color: var(--kuc-dropdown-menu-color-selected, #3498db);\n  }\n  .kuc-dropdown-1-17-0__group__select-menu__highlight[role="option"] {\n    background-color: #e2f2fe;\n  }\n  .kuc-dropdown-1-17-0__group__select-menu__item--disabled,\n  .kuc-dropdown-1-17-0__group__select-menu__item--disabled[aria-selected="true"] {\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n    color: #888888;\n  }\n'),pn=e}})();const bn=pn;var gn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};const mn=517;let fn;(()=>{if(fn=window.customElements.get("kuc-field-group-1-17-0"),!fn){class e extends bi{constructor(e){super(),this.className="",this.content="",this.id="",this.label="",this.disabled=!1,this.expanded=!1,this.visible=!0,this._content="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}update(e){e.has("content")&&(this._content=si(this.content)),super.update(e)}render(){return $e`
+        </svg>`:""}`}_getItemElementWhenMouseOverDown(e){return e.classList.value.split(" ").includes("kuc-dropdown-1-17-1__group__select-menu__item")?e:this._getItemElementWhenMouseOverDown(e.parentElement)}}_n([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),_n([Ge({type:String})],e.prototype,"error",void 0),_n([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),_n([Ge({type:String})],e.prototype,"label",void 0),_n([Ge({type:String})],e.prototype,"value",void 0),_n([Ge({type:Number})],e.prototype,"selectedIndex",void 0),_n([Ge({type:Boolean})],e.prototype,"disabled",void 0),_n([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),_n([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),_n([Ge({type:Array})],e.prototype,"items",void 0),_n([Fe()],e.prototype,"_selectorVisible",void 0),_n([qe(".kuc-dropdown-1-17-1__group__select-menu")],e.prototype,"_menuEl",void 0),_n([Ye(".kuc-dropdown-1-17-1__group__select-menu__item")],e.prototype,"_itemsEl",void 0),_n([qe("button.kuc-dropdown-1-17-1__group__toggle")],e.prototype,"_buttonEl",void 0),_n([qe(".kuc-dropdown-1-17-1__group__select-menu__item")],e.prototype,"_firstItemEl",void 0),_n([qe(".kuc-dropdown-1-17-1__group__select-menu__item:last-child")],e.prototype,"_lastItemEl",void 0),_n([qe(".kuc-dropdown-1-17-1__group__select-menu__item[aria-selected=true]")],e.prototype,"_selectedItemEl",void 0),_n([qe(".kuc-dropdown-1-17-1__group__select-menu__highlight")],e.prototype,"_highlightItemEl",void 0),_n([Ye(".kuc-dropdown-1-17-1__group__select-menu__item--disabled")],e.prototype,"_disabledItemsEl",void 0),_n([qe(".kuc-base-error-1-17-1__error")],e.prototype,"_errorEl",void 0),window.customElements.define("kuc-dropdown-1-17-1",e),mi('\n  kuc-dropdown-1-17-1,\n  kuc-dropdown-1-17-1 *,\n  kuc-dropdown-1-17-1:lang(en),\n  kuc-dropdown-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-dropdown-1-17-1:lang(ja),\n  kuc-dropdown-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-dropdown-1-17-1:lang(zh),\n  kuc-dropdown-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-dropdown-1-17-1:lang(zh-TW),\n  kuc-dropdown-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-dropdown-1-17-1 {\n    display: inline-table;\n    font-size: 14px;\n    color: #333333;\n    vertical-align: top;\n    width: var(--kuc-dropdown-toggle-width, 180px);\n    min-width: var(--kuc-dropdown-toggle-width, 180px);\n    line-height: 1.5;\n  }\n  kuc-dropdown-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-dropdown-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    margin: 0px;\n    position: relative;\n  }\n  .kuc-dropdown-1-17-1__group__label {\n    padding: 4px 0px 8px 0px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n  .kuc-dropdown-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-dropdown-1-17-1__group__toggle {\n    height: var(--kuc-dropdown-toggle-height, 40px);\n    box-sizing: border-box;\n    box-shadow: 1px 1px 1px #ffffff inset;\n    border: 1px solid #e3e7e8;\n    color: var(--kuc-dropdown-toggle-color, #3498db);\n    background-color: #f7f9fa;\n    padding: 0 0 0 24px;\n    display: grid;\n    grid: auto / auto-flow;\n    align-items: center;\n    align-content: center;\n    justify-content: space-between;\n    width: var(--kuc-dropdown-toggle-width, 100%);\n    cursor: pointer;\n  }\n  .kuc-dropdown-1-17-1__group__toggle:focus {\n    outline: none;\n    border: 1px solid #3498db;\n  }\n  .kuc-dropdown-1-17-1__group__toggle:disabled {\n    background-color: #d4d7d7;\n    box-shadow: none;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-dropdown-1-17-1__group__toggle__selected-item-label {\n    font-size: var(--kuc-dropdown-font-size, 14px);\n    text-align: left;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .kuc-dropdown-1-17-1__group__toggle__icon {\n    flex: none;\n    width: 38px;\n    height: 38px;\n  }\n  .kuc-dropdown-1-17-1__group__select-menu {\n    position: absolute;\n    min-width: 280px;\n    margin: 0;\n    padding: 8px 0;\n    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n    background-color: #ffffff;\n    z-index: 2000;\n    list-style: none;\n    box-sizing: border-box;\n  }\n  .kuc-dropdown-1-17-1__group__select-menu[hidden] {\n    display: none;\n  }\n  .kuc-dropdown-1-17-1__group__select-menu__item {\n    padding: 8px 16px 8px 24px;\n    line-height: 1;\n    position: relative;\n    cursor: pointer;\n    white-space: nowrap;\n    color: var(--kuc-dropdown-menu-color, #333333);\n    font-size: var(--kuc-dropdown-font-size, 14px);\n  }\n  .kuc-dropdown-1-17-1__group__select-menu__item__icon {\n    position: absolute;\n    top: 50%;\n    left: 6px;\n    margin-top: -5px;\n  }\n  .kuc-dropdown-1-17-1__group__select-menu__item[aria-selected="true"] {\n    color: var(--kuc-dropdown-menu-color-selected, #3498db);\n  }\n  .kuc-dropdown-1-17-1__group__select-menu__highlight[role="option"] {\n    background-color: #e2f2fe;\n  }\n  .kuc-dropdown-1-17-1__group__select-menu__item--disabled,\n  .kuc-dropdown-1-17-1__group__select-menu__item--disabled[aria-selected="true"] {\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n    color: #888888;\n  }\n'),pn=e}})();const bn=pn;var gn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};const mn=517;let fn;(()=>{if(fn=window.customElements.get("kuc-field-group-1-17-1"),!fn){class e extends bi{constructor(e){super(),this.className="",this.content="",this.id="",this.label="",this.disabled=!1,this.expanded=!1,this.visible=!0,this._content="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}update(e){e.has("content")&&(this._content=ai(this.content)),super.update(e)}render(){return we`
         <div
-          class="kuc-field-group-1-17-0__group"
+          class="kuc-field-group-1-17-1__group"
           role="group"
           aria-labelledby="${this._GUID}-control"
         >
           <button
             type="button"
             id="${this._GUID}-control"
-            class="kuc-field-group-1-17-0__group__toggle"
+            class="kuc-field-group-1-17-1__group__toggle"
             aria-controls="${this._GUID}-body"
             aria-expanded="${this.expanded&&!this.disabled}"
             ?disabled="${this.disabled}"
@@ -1061,21 +1060,21 @@
             @keydown="${this._handleKeyDownButton}"
           >
             ${this._getSvgTemplate()}
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${!1}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </button>
           <div
             id="${this._GUID}-body"
-            class="kuc-field-group-1-17-0__group__body"
+            class="kuc-field-group-1-17-1__group__body"
             ?hidden="${!this.expanded||this.disabled}"
             @change="${this._handleChangeBody}"
           >
             ${this._content}
           </div>
         </div>
-      `}updated(e){e.has("content")&&(this._groupEl.style.minWidth=mn+"px",requestAnimationFrame((()=>{this._updateContainerWidth()})))}_updateContainerWidth(){if(!this._bodyEl)return;const e=this._bodyEl.hasAttribute("hidden");e&&this._bodyEl.removeAttribute("hidden");const t=this._bodyEl.offsetWidth;e&&this._bodyEl.setAttribute("hidden",""),t<=mn||(this._groupEl.style.minWidth=t+"px")}_getSvgTemplate(){return this.expanded?$e`<svg
+      `}updated(e){e.has("content")&&(this._groupEl.style.minWidth=mn+"px",requestAnimationFrame((()=>{this._updateContainerWidth()})))}_updateContainerWidth(){if(!this._bodyEl)return;const e=this._bodyEl.hasAttribute("hidden");e&&this._bodyEl.removeAttribute("hidden");const t=this._bodyEl.offsetWidth;e&&this._bodyEl.setAttribute("hidden",""),t<=mn||(this._groupEl.style.minWidth=t+"px")}_getSvgTemplate(){return this.expanded?we`<svg
             width="13"
             height="8"
             viewBox="0 0 13 8"
@@ -1088,7 +1087,7 @@
               d="M11.7122 0.5L12.5 1.03608L7.23318 7.11548L5.76682 7.11548L0.5 1.03608L1.2878 0.5L6.26504 6.19318L6.73496 6.19318L11.7122 0.5Z"
               fill="#939393"
             />
-          </svg>`:$e`<svg
+          </svg>`:we`<svg
             width="8"
             height="13"
             viewBox="0 0 8 13"
@@ -1101,20 +1100,20 @@
               d="M0.5 1.2878L1.03608 0.5L7.11548 5.76682V7.23318L1.03608 12.5L0.5 11.7122L6.19318 6.73496V6.26504L0.5 1.2878Z"
               fill="#939393"
             />
-          </svg> `}_handleChangeBody(e){e.stopPropagation()}_handleKeyDownButton(e){"Tab"!==e.key&&(e.preventDefault(),"Enter"!==e.key&&" "!==e.key||this._handleClickButton(e))}_handleClickButton(e){if(e.target!==document.activeElement&&this._toggle.focus(),this.expanded){const e=this._bodyEl.getBoundingClientRect().width;e>mn&&(this._groupEl.style.minWidth=e+"px")}else this._groupEl.style.minWidth=mn+"px";this.expanded=!this.expanded;const t={expanded:this.expanded};gi(this,"change",t)}}gn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),gn([Fe()],e.prototype,"content",void 0),gn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),gn([Fe({type:String})],e.prototype,"label",void 0),gn([Fe({type:Boolean})],e.prototype,"disabled",void 0),gn([Fe({type:Boolean})],e.prototype,"expanded",void 0),gn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),gn([Ke(".kuc-field-group-1-17-0__group")],e.prototype,"_groupEl",void 0),gn([Ke(".kuc-field-group-1-17-0__group__body")],e.prototype,"_bodyEl",void 0),gn([Ke(".kuc-field-group-1-17-0__group__toggle")],e.prototype,"_toggle",void 0),window.customElements.define("kuc-field-group-1-17-0",e),mi('\n  kuc-field-group-1-17-0 .kuc-field-group-1-17-0__group__toggle .kuc-base-label-1-17-0__text,\n  kuc-field-group-1-17-0:lang(en) .kuc-field-group-1-17-0__group__toggle .kuc-base-label-1-17-0__text {\n    font-family: sans-serif;\n  }\n  kuc-field-group-1-17-0:lang(ja) .kuc-field-group-1-17-0__group__toggle .kuc-base-label-1-17-0__text {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-field-group-1-17-0:lang(zh) .kuc-field-group-1-17-0__group__toggle .kuc-base-label-1-17-0__text {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-field-group-1-17-0:lang(zh-TW) .kuc-field-group-1-17-0__group__toggle .kuc-base-label-1-17-0__text {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-field-group-1-17-0 {\n    display: inline-table;\n  }\n  kuc-field-group-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-field-group-1-17-0__group {\n    min-width: 517px;\n    padding: 0px 8px;\n    border: 1px solid #e3e7e8;\n    background-color: #f5f5f5;\n  }\n  .kuc-field-group-1-17-0__group h3 {\n    margin: 0px;\n    padding: 0px;\n  }\n  .kuc-field-group-1-17-0__group__toggle {\n    display: flex;\n    align-items: center;\n    border-style: none;\n    position: relative;\n    outline: none;\n    margin: 12px 0px 12px 8px;\n    min-height: 34px;\n    padding: 4px 8px 4px 24px;\n    color: #333333;\n    font-size: 16px;\n    cursor: pointer;\n    border: 1px solid transparent;\n    background-color: inherit;\n    line-height: 1.5;\n  }\n  .kuc-field-group-1-17-0__group__toggle:disabled {\n    color: rgba(0, 0, 0, 0.25);\n    cursor: not-allowed;\n  }\n  .kuc-field-group-1-17-0__group__toggle:disabled .kuc-base-label-1-17-0__text {\n    color: rgba(0, 0, 0, 0.25);\n    cursor: not-allowed;\n  }\n  .kuc-field-group-1-17-0__group__toggle .kuc-base-label-1-17-0__text {\n    font-size: 16px;\n  }\n  .kuc-field-group-1-17-0__group__toggle:disabled:focus {\n    outline: 0;\n    border: 1px solid transparent;\n  }\n  .kuc-field-group-1-17-0__group__toggle:focus {\n    outline: 0;\n    border: 1px solid #3498db;\n  }\n  .kuc-field-group-1-17-0__group__toggle svg {\n    position: absolute;\n    left: 8px;\n  }\n  .kuc-field-group-1-17-0__group__body {\n    padding: 0px 8px;\n    margin-left: 0px;\n    white-space: nowrap;\n    word-wrap: normal;\n    margin-bottom: 12px;\n  }\n'),fn=e}})();var vn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let kn;(()=>{if(kn=window.customElements.get("kuc-multi-choice-1-17-0"),!kn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._DISABLED_CLASS="kuc-multi-choice-1-17-0__group__menu__item--disabled",this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}render(){return $e`
-        <div class="kuc-multi-choice-1-17-0__group">
+          </svg> `}_handleChangeBody(e){e.stopPropagation()}_handleKeyDownButton(e){"Tab"!==e.key&&(e.preventDefault(),"Enter"!==e.key&&" "!==e.key||this._handleClickButton(e))}_handleClickButton(e){if(e.target!==document.activeElement&&this._toggle.focus(),this.expanded){const e=this._bodyEl.getBoundingClientRect().width;e>mn&&(this._groupEl.style.minWidth=e+"px")}else this._groupEl.style.minWidth=mn+"px";this.expanded=!this.expanded;const t={expanded:this.expanded};gi(this,"change",t)}}gn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),gn([Ge()],e.prototype,"content",void 0),gn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),gn([Ge({type:String})],e.prototype,"label",void 0),gn([Ge({type:Boolean})],e.prototype,"disabled",void 0),gn([Ge({type:Boolean})],e.prototype,"expanded",void 0),gn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),gn([qe(".kuc-field-group-1-17-1__group")],e.prototype,"_groupEl",void 0),gn([qe(".kuc-field-group-1-17-1__group__body")],e.prototype,"_bodyEl",void 0),gn([qe(".kuc-field-group-1-17-1__group__toggle")],e.prototype,"_toggle",void 0),window.customElements.define("kuc-field-group-1-17-1",e),mi('\n  kuc-field-group-1-17-1 .kuc-field-group-1-17-1__group__toggle .kuc-base-label-1-17-1__text,\n  kuc-field-group-1-17-1:lang(en) .kuc-field-group-1-17-1__group__toggle .kuc-base-label-1-17-1__text {\n    font-family: sans-serif;\n  }\n  kuc-field-group-1-17-1:lang(ja) .kuc-field-group-1-17-1__group__toggle .kuc-base-label-1-17-1__text {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-field-group-1-17-1:lang(zh) .kuc-field-group-1-17-1__group__toggle .kuc-base-label-1-17-1__text {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-field-group-1-17-1:lang(zh-TW) .kuc-field-group-1-17-1__group__toggle .kuc-base-label-1-17-1__text {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-field-group-1-17-1 {\n    display: inline-table;\n  }\n  kuc-field-group-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-field-group-1-17-1__group {\n    min-width: 517px;\n    padding: 0px 8px;\n    border: 1px solid #e3e7e8;\n    background-color: #f5f5f5;\n  }\n  .kuc-field-group-1-17-1__group h3 {\n    margin: 0px;\n    padding: 0px;\n  }\n  .kuc-field-group-1-17-1__group__toggle {\n    display: flex;\n    align-items: center;\n    border-style: none;\n    position: relative;\n    outline: none;\n    margin: 12px 0px 12px 8px;\n    min-height: 34px;\n    padding: 4px 8px 4px 24px;\n    color: #333333;\n    font-size: 16px;\n    cursor: pointer;\n    border: 1px solid transparent;\n    background-color: inherit;\n    line-height: 1.5;\n  }\n  .kuc-field-group-1-17-1__group__toggle:disabled {\n    color: rgba(0, 0, 0, 0.25);\n    cursor: not-allowed;\n  }\n  .kuc-field-group-1-17-1__group__toggle:disabled .kuc-base-label-1-17-1__text {\n    color: rgba(0, 0, 0, 0.25);\n    cursor: not-allowed;\n  }\n  .kuc-field-group-1-17-1__group__toggle .kuc-base-label-1-17-1__text {\n    font-size: 16px;\n  }\n  .kuc-field-group-1-17-1__group__toggle:disabled:focus {\n    outline: 0;\n    border: 1px solid transparent;\n  }\n  .kuc-field-group-1-17-1__group__toggle:focus {\n    outline: 0;\n    border: 1px solid #3498db;\n  }\n  .kuc-field-group-1-17-1__group__toggle svg {\n    position: absolute;\n    left: 8px;\n  }\n  .kuc-field-group-1-17-1__group__body {\n    padding: 0px 8px;\n    margin-left: 0px;\n    white-space: nowrap;\n    word-wrap: normal;\n    margin-bottom: 12px;\n  }\n'),fn=e}})();var vn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let kn;(()=>{if(kn=window.customElements.get("kuc-multi-choice-1-17-1"),!kn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._DISABLED_CLASS="kuc-multi-choice-1-17-1__group__menu__item--disabled",this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(st),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(lt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}render(){return we`
+        <div class="kuc-multi-choice-1-17-1__group">
           <div
-            class="kuc-multi-choice-1-17-0__group__label"
+            class="kuc-multi-choice-1-17-1__group__label"
             id="${this._GUID}-label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </div>
           <div
-            class="kuc-multi-choice-1-17-0__group__menu"
+            class="kuc-multi-choice-1-17-1__group__menu"
             role="listbox"
             aria-multiselectable="true"
             aria-describedby="${this._GUID}-error"
@@ -1125,16 +1124,16 @@
           >
             ${this.items.map(((e,t)=>this._getMenuItemTemplate(e,t)))}
           </div>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
             ariaLive="assertive"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}_handleMouseDownMultiChoiceItem(e){if(this.disabled)return;const t=e.target,i=t.getAttribute("value"),n=t.dataset.index||"0";this._handleChangeValue(i,n)}_handleMouseOverMultiChoiceItem(e){if(this.disabled)return;this._itemsEl.forEach((e=>{e.classList.contains("kuc-multi-choice-1-17-0__group__menu__highlight")&&e.classList.remove("kuc-multi-choice-1-17-0__group__menu__highlight")}));const t=e.currentTarget;t.classList.add("kuc-multi-choice-1-17-0__group__menu__highlight"),this._setActiveDescendant(t.id)}_handleMouseLeaveMultiChoiceItem(e){this.disabled||(e.currentTarget.classList.remove("kuc-multi-choice-1-17-0__group__menu__highlight"),this._setActiveDescendant())}_handleKeyDownMultiChoice(e){if(!this.disabled)switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),0===this.items.length)break;this._actionHighlightPrevMenuItem();break;case"Down":case"ArrowDown":if(e.preventDefault(),0===this.items.length)break;this._actionHighlightNextMenuItem();break;case"Spacebar":case" ":e.preventDefault(),this._actionUpdateValue()}}_actionHighlightPrevMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.previousElementSibling),null===e&&(e=this._lastItemEl,null===this._highlightItemEl&&(e=this._firstItemEl));let t=!1;this._actionClearAllHighlightMenuItem();for(let i=0;i<this._itemsEl.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling,null===e&&(e=this._lastItemEl);t||(e.classList.add("kuc-multi-choice-1-17-0__group__menu__highlight"),this._setActiveDescendant(e.id))}_actionHighlightNextMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.nextElementSibling),null===e&&(e=this._firstItemEl);let t=!1;this._actionClearAllHighlightMenuItem();for(let i=0;i<this._itemsEl.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling,null===e&&(e=this._firstItemEl);t||(e.classList.add("kuc-multi-choice-1-17-0__group__menu__highlight"),this._setActiveDescendant(e.id))}_actionClearAllHighlightMenuItem(){this._itemsEl.forEach((e=>{e.classList.remove("kuc-multi-choice-1-17-0__group__menu__highlight")}))}_actionUpdateValue(){this._itemsEl.forEach((e=>{if(e.classList.contains("kuc-multi-choice-1-17-0__group__menu__highlight")){const t=e.getAttribute("value"),i=e.dataset.index||"0";this._handleChangeValue(t,i)}}))}_getMultiChoiceCheckedIconSvgTemplate(e,t){return Ce`
-        ${t?Ce`<svg
-            class="kuc-multi-choice-1-17-0__group__menu__item__icon"
+      `}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}_handleMouseDownMultiChoiceItem(e){if(this.disabled)return;const t=e.target,i=t.getAttribute("value"),n=t.dataset.index||"0";this._handleChangeValue(i,n)}_handleMouseOverMultiChoiceItem(e){if(this.disabled)return;this._itemsEl.forEach((e=>{e.classList.contains("kuc-multi-choice-1-17-1__group__menu__highlight")&&e.classList.remove("kuc-multi-choice-1-17-1__group__menu__highlight")}));const t=e.currentTarget;t.classList.add("kuc-multi-choice-1-17-1__group__menu__highlight"),this._setActiveDescendant(t.id)}_handleMouseLeaveMultiChoiceItem(e){this.disabled||(e.currentTarget.classList.remove("kuc-multi-choice-1-17-1__group__menu__highlight"),this._setActiveDescendant())}_handleKeyDownMultiChoice(e){if(!this.disabled)switch(e.key){case"Up":case"ArrowUp":if(e.preventDefault(),0===this.items.length)break;this._actionHighlightPrevMenuItem();break;case"Down":case"ArrowDown":if(e.preventDefault(),0===this.items.length)break;this._actionHighlightNextMenuItem();break;case"Spacebar":case" ":e.preventDefault(),this._actionUpdateValue()}}_actionHighlightPrevMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.previousElementSibling),null===e&&(e=this._lastItemEl,null===this._highlightItemEl&&(e=this._firstItemEl));let t=!1;this._actionClearAllHighlightMenuItem();for(let i=0;i<this._itemsEl.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.previousElementSibling,null===e&&(e=this._lastItemEl);t||(e.classList.add("kuc-multi-choice-1-17-1__group__menu__highlight"),this._setActiveDescendant(e.id))}_actionHighlightNextMenuItem(){let e=null;null!==this._highlightItemEl&&(e=this._highlightItemEl.nextElementSibling),null===e&&(e=this._firstItemEl);let t=!1;this._actionClearAllHighlightMenuItem();for(let i=0;i<this._itemsEl.length&&(t=e.classList.contains(this._DISABLED_CLASS),t);i++)e=e.nextElementSibling,null===e&&(e=this._firstItemEl);t||(e.classList.add("kuc-multi-choice-1-17-1__group__menu__highlight"),this._setActiveDescendant(e.id))}_actionClearAllHighlightMenuItem(){this._itemsEl.forEach((e=>{e.classList.remove("kuc-multi-choice-1-17-1__group__menu__highlight")}))}_actionUpdateValue(){this._itemsEl.forEach((e=>{if(e.classList.contains("kuc-multi-choice-1-17-1__group__menu__highlight")){const t=e.getAttribute("value"),i=e.dataset.index||"0";this._handleChangeValue(t,i)}}))}_getMultiChoiceCheckedIconSvgTemplate(e,t){return $e`
+        ${t?$e`<svg
+            class="kuc-multi-choice-1-17-1__group__menu__item__icon"
             width="11"
             height="9"
             viewBox="0 0 11 9"
@@ -1147,9 +1146,9 @@
               d="M0 5L1.5 3L4.5 5.5L9.5 0L11 1.5L4.5 8.5L0 5Z"
               fill="${e?"#888888":"#3498db"}"
             />
-          </svg>`:""}`}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getMenuItemTemplate(e,t){const i=this._isCheckedItem(e,t),n=e.disabled||this.disabled;return $e`
+          </svg>`:""}`}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getMenuItemTemplate(e,t){const i=this._isCheckedItem(e,t),n=e.disabled||this.disabled;return we`
         <div
-          class="kuc-multi-choice-1-17-0__group__menu__item ${n?this._DISABLED_CLASS:""}"
+          class="kuc-multi-choice-1-17-1__group__menu__item ${n?this._DISABLED_CLASS:""}"
           role="option"
           aria-selected="${i}"
           aria-required="${this.requiredIcon}"
@@ -1163,7 +1162,7 @@
           ${this._getMultiChoiceCheckedIconSvgTemplate(n,i)}
           ${void 0===e.label?e.value:e.label}
         </div>
-      `}_setActiveDescendant(e){void 0!==e&&null!==this._menuEl?this._menuEl.setAttribute("aria-activedescendant",e):this._menuEl.removeAttribute("aria-activedescendant")}_handleChangeValue(e,t){const i=this.value?[...this.value]:this.value,n=this._getNewValueMapping(e,t),o=this.items.map((e=>e.value)),a=Object.values(n).filter((e=>o.indexOf(e)>-1));if(a===i)return;const s=Object.keys(n).map((e=>parseInt(e,10)));this.value=a,this.selectedIndex=s,gi(this,"change",{oldValue:i,value:a})}_getNewValueMapping(e,t){const i=parseInt(t,10),n=Object.keys(this._valueMapping),o={...this._valueMapping};return n.indexOf(t)>-1?(delete o[i],o):(o[i]=e,o)}}vn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),vn([Fe({type:String})],e.prototype,"error",void 0),vn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),vn([Fe({type:String})],e.prototype,"label",void 0),vn([Fe({type:Boolean})],e.prototype,"disabled",void 0),vn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),vn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),vn([Fe({type:Array})],e.prototype,"items",void 0),vn([Fe({type:Array})],e.prototype,"selectedIndex",void 0),vn([Fe({type:Array})],e.prototype,"value",void 0),vn([Ke(".kuc-multi-choice-1-17-0__group__menu")],e.prototype,"_menuEl",void 0),vn([Je(".kuc-multi-choice-1-17-0__group__menu__item")],e.prototype,"_itemsEl",void 0),vn([Ke(".kuc-multi-choice-1-17-0__group__menu__item")],e.prototype,"_firstItemEl",void 0),vn([Ke(".kuc-multi-choice-1-17-0__group__menu__item:last-child")],e.prototype,"_lastItemEl",void 0),vn([Ke(".kuc-multi-choice-1-17-0__group__menu__highlight")],e.prototype,"_highlightItemEl",void 0),vn([We()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-multi-choice-1-17-0",e),mi('\n  kuc-multi-choice-1-17-0,\n  kuc-multi-choice-1-17-0 *,\n  kuc-multi-choice-1-17-0:lang(en),\n  kuc-multi-choice-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-multi-choice-1-17-0:lang(ja),\n  kuc-multi-choice-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-multi-choice-1-17-0:lang(zh),\n  kuc-multi-choice-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-multi-choice-1-17-0:lang(zh-TW),\n  kuc-multi-choice-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-multi-choice-1-17-0 {\n    display: inline-table;\n    font-size: 14px;\n    color: var(--kuc-multi-choice-menu-color, #333333);\n    width: var(--kuc-multi-choice-menu-width, 180px);\n    min-width: var(--kuc-multi-choice-menu-width, 180px);\n    line-height: 1.5;\n  }\n  kuc-multi-choice-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-multi-choice-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    margin: 0px;\n  }\n  .kuc-multi-choice-1-17-0__group__label {\n    padding: 4px 0px 8px 0px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n  .kuc-multi-choice-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-multi-choice-1-17-0__group__menu {\n    position: relative;\n    background: #ffffff;\n    border: 1px solid #e3e7e8;\n    box-sizing: border-box;\n    box-shadow: 1px 1px 12px #f5f5f5 inset, -1px -1px 12px #f5f5f5 inset;\n    padding: 6px 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    height: var(--kuc-multi-choice-menu-height, auto);\n    max-height: var(--kuc-multi-choice-menu-height, 134px);\n    width: var(--kuc-multi-choice-menu-width, auto);\n    font-size: var(--kuc-multi-choice-menu-font-size, 14px);\n  }\n  .kuc-multi-choice-1-17-0__group__menu:not([disabled]):focus {\n    outline: none;\n    border: 1px solid #3498db;\n  }\n  .kuc-multi-choice-1-17-0__group__menu[disabled] {\n    background-color: #dbdcdd;\n    box-shadow: none;\n    cursor: not-allowed;\n    color: #888888;\n    outline: none;\n  }\n  .kuc-multi-choice-1-17-0__group__menu__item {\n    padding: 4px 16px;\n    margin-bottom: 2px;\n    line-height: 1;\n    position: relative;\n    white-space: nowrap;\n  }\n  .kuc-multi-choice-1-17-0__group__menu__item__icon {\n    position: absolute;\n    top: 50%;\n    left: 16px;\n    margin-top: -6px;\n    pointer-events: none;\n  }\n  .kuc-multi-choice-1-17-0__group__menu__item--disabled {\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-multi-choice-1-17-0__group__menu__item[aria-selected="true"] {\n    color: var(--kuc-multi-choice-menu-color-selected, #3498db);\n    padding-left: 32px;\n  }\n  .kuc-multi-choice-1-17-0__group__menu__item--disabled[aria-selected="true"] {\n    color: #888888;\n    padding-left: 32px;\n  }\n  .kuc-multi-choice-1-17-0__group__menu[disabled]\n    .kuc-multi-choice-1-17-0__group__menu__item[aria-selected="true"] {\n    color: #888888;\n  }\n  .kuc-multi-choice-1-17-0__group__menu__highlight[role="option"] {\n    background-color: var(--kuc-multi-choice-menu-background-color-hover, #e2f2fe);\n    cursor: pointer;\n  }\n'),kn=e}})();var yn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let xn;(()=>{if(xn=window.customElements.get("kuc-notification-1-17-0"),!xn){class e extends bi{constructor(e){super(),this.className="",this.text="",this.type="danger",this.duration=-1,this.container=document.body,this._isOpened=!1;const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this._close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this._close(),!e)return this.throwErrorAfterUpdateComplete(gt),!1}return!0}_isValidContainerElement(){return this.container instanceof HTMLElement}_handleClickCloseButton(e){this.close()}_getCloseButtonColorType(){switch(this.type){case"info":case"success":return this.type;default:return"danger"}}_getCloseButtonSvgTemplate(){return Ce`
+      `}_setActiveDescendant(e){void 0!==e&&null!==this._menuEl?this._menuEl.setAttribute("aria-activedescendant",e):this._menuEl.removeAttribute("aria-activedescendant")}_handleChangeValue(e,t){const i=this.value?[...this.value]:this.value,n=this._getNewValueMapping(e,t),o=this.items.map((e=>e.value)),a=Object.values(n).filter((e=>o.indexOf(e)>-1));if(a===i)return;const s=Object.keys(n).map((e=>parseInt(e,10)));this.value=a,this.selectedIndex=s,gi(this,"change",{oldValue:i,value:a})}_getNewValueMapping(e,t){const i=parseInt(t,10),n=Object.keys(this._valueMapping),o={...this._valueMapping};return n.indexOf(t)>-1?(delete o[i],o):(o[i]=e,o)}}vn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),vn([Ge({type:String})],e.prototype,"error",void 0),vn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),vn([Ge({type:String})],e.prototype,"label",void 0),vn([Ge({type:Boolean})],e.prototype,"disabled",void 0),vn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),vn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),vn([Ge({type:Array})],e.prototype,"items",void 0),vn([Ge({type:Array})],e.prototype,"selectedIndex",void 0),vn([Ge({type:Array})],e.prototype,"value",void 0),vn([qe(".kuc-multi-choice-1-17-1__group__menu")],e.prototype,"_menuEl",void 0),vn([Ye(".kuc-multi-choice-1-17-1__group__menu__item")],e.prototype,"_itemsEl",void 0),vn([qe(".kuc-multi-choice-1-17-1__group__menu__item")],e.prototype,"_firstItemEl",void 0),vn([qe(".kuc-multi-choice-1-17-1__group__menu__item:last-child")],e.prototype,"_lastItemEl",void 0),vn([qe(".kuc-multi-choice-1-17-1__group__menu__highlight")],e.prototype,"_highlightItemEl",void 0),vn([Fe()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-multi-choice-1-17-1",e),mi('\n  kuc-multi-choice-1-17-1,\n  kuc-multi-choice-1-17-1 *,\n  kuc-multi-choice-1-17-1:lang(en),\n  kuc-multi-choice-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-multi-choice-1-17-1:lang(ja),\n  kuc-multi-choice-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-multi-choice-1-17-1:lang(zh),\n  kuc-multi-choice-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-multi-choice-1-17-1:lang(zh-TW),\n  kuc-multi-choice-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-multi-choice-1-17-1 {\n    display: inline-table;\n    font-size: 14px;\n    color: var(--kuc-multi-choice-menu-color, #333333);\n    width: var(--kuc-multi-choice-menu-width, 180px);\n    min-width: var(--kuc-multi-choice-menu-width, 180px);\n    line-height: 1.5;\n  }\n  kuc-multi-choice-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-multi-choice-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    margin: 0px;\n  }\n  .kuc-multi-choice-1-17-1__group__label {\n    padding: 4px 0px 8px 0px;\n    display: inline-block;\n    white-space: nowrap;\n  }\n  .kuc-multi-choice-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-multi-choice-1-17-1__group__menu {\n    position: relative;\n    background: #ffffff;\n    border: 1px solid #e3e7e8;\n    box-sizing: border-box;\n    box-shadow: 1px 1px 12px #f5f5f5 inset, -1px -1px 12px #f5f5f5 inset;\n    padding: 6px 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    height: var(--kuc-multi-choice-menu-height, auto);\n    max-height: var(--kuc-multi-choice-menu-height, 134px);\n    width: var(--kuc-multi-choice-menu-width, auto);\n    font-size: var(--kuc-multi-choice-menu-font-size, 14px);\n  }\n  .kuc-multi-choice-1-17-1__group__menu:not([disabled]):focus {\n    outline: none;\n    border: 1px solid #3498db;\n  }\n  .kuc-multi-choice-1-17-1__group__menu[disabled] {\n    background-color: #dbdcdd;\n    box-shadow: none;\n    cursor: not-allowed;\n    color: #888888;\n    outline: none;\n  }\n  .kuc-multi-choice-1-17-1__group__menu__item {\n    padding: 4px 16px;\n    margin-bottom: 2px;\n    line-height: 1;\n    position: relative;\n    white-space: nowrap;\n  }\n  .kuc-multi-choice-1-17-1__group__menu__item__icon {\n    position: absolute;\n    top: 50%;\n    left: 16px;\n    margin-top: -6px;\n    pointer-events: none;\n  }\n  .kuc-multi-choice-1-17-1__group__menu__item--disabled {\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n    color: #888888;\n  }\n  .kuc-multi-choice-1-17-1__group__menu__item[aria-selected="true"] {\n    color: var(--kuc-multi-choice-menu-color-selected, #3498db);\n    padding-left: 32px;\n  }\n  .kuc-multi-choice-1-17-1__group__menu__item--disabled[aria-selected="true"] {\n    color: #888888;\n    padding-left: 32px;\n  }\n  .kuc-multi-choice-1-17-1__group__menu[disabled]\n    .kuc-multi-choice-1-17-1__group__menu__item[aria-selected="true"] {\n    color: #888888;\n  }\n  .kuc-multi-choice-1-17-1__group__menu__highlight[role="option"] {\n    background-color: var(--kuc-multi-choice-menu-background-color-hover, #e2f2fe);\n    cursor: pointer;\n  }\n'),kn=e}})();var yn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let xn;(()=>{if(xn=window.customElements.get("kuc-notification-1-17-1"),!xn){class e extends bi{constructor(e){super(),this.className="",this.text="",this.type="danger",this.duration=-1,this.container=document.body,this._isOpened=!1;const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this._close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this._close(),!e)return this.throwErrorAfterUpdateComplete(bt),!1}return!0}_isValidContainerElement(){return this.container instanceof HTMLElement}_handleClickCloseButton(e){this.close()}_getCloseButtonColorType(){switch(this.type){case"info":case"success":return this.type;default:return"danger"}}_getCloseButtonSvgTemplate(){return $e`
         <svg
           width="32"
           height="32"
@@ -1173,7 +1172,7 @@
         >
           <title>close button</title>
           <path
-            class="kuc-notification-1-17-0__notification__close-button__icon-background--${this._getCloseButtonColorType()}"
+            class="kuc-notification-1-17-1__notification__close-button__icon-background--${this._getCloseButtonColorType()}"
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z"
@@ -1185,18 +1184,18 @@
             fill="white"
           />
         </svg>
-      `}_setAutoCloseTimer(){!Number.isFinite(this.duration)||this.duration<0||(this._clearAutoCloseTimer(),this._timeoutID=window.setTimeout((()=>{this.close()}),this.duration))}_clearAutoCloseTimer(){this._timeoutID&&window.clearTimeout(this._timeoutID)}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.container.appendChild(this),this.performUpdate(),this.classList.remove("kuc-notification-fadeout-1-17-0"),this.classList.add("kuc-notification-fadein-1-17-0"),this._isOpened=!0,this._setAutoCloseTimer()}_close(){this._isOpened=!1,this.classList.remove("kuc-notification-fadein-1-17-0"),this.classList.add("kuc-notification-fadeout-1-17-0"),this._clearAutoCloseTimer()}close(){this._close(),gi(this,"close")}render(){return $e`
+      `}_setAutoCloseTimer(){!Number.isFinite(this.duration)||this.duration<0||(this._clearAutoCloseTimer(),this._timeoutID=window.setTimeout((()=>{this.close()}),this.duration))}_clearAutoCloseTimer(){this._timeoutID&&window.clearTimeout(this._timeoutID)}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.container.appendChild(this),this.performUpdate(),this.classList.remove("kuc-notification-fadeout-1-17-1"),this.classList.add("kuc-notification-fadein-1-17-1"),this._isOpened=!0,this._setAutoCloseTimer()}_close(){this._isOpened=!1,this.classList.remove("kuc-notification-fadein-1-17-1"),this.classList.add("kuc-notification-fadeout-1-17-1"),this._clearAutoCloseTimer()}close(){this._close(),gi(this,"close")}render(){return we`
         <div
-          class="kuc-notification-1-17-0__notification kuc-notification-1-17-0__notification--${this.type}"
+          class="kuc-notification-1-17-1__notification kuc-notification-1-17-1__notification--${this.type}"
         >
           <pre
-            class="kuc-notification-1-17-0__notification__title"
+            class="kuc-notification-1-17-1__notification__title"
             aria-live="assertive"
             role="${this._isOpened?"alert":""}"
           ><!--
           -->${this.text}</pre>
           <button
-            class="kuc-notification-1-17-0__notification__close-button"
+            class="kuc-notification-1-17-1__notification__close-button"
             type="button"
             aria-label="close"
             @click="${this._handleClickCloseButton}"
@@ -1204,9 +1203,9 @@
             ${this._getCloseButtonSvgTemplate()}
           </button>
         </div>
-      `}}yn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),yn([Fe({type:String})],e.prototype,"text",void 0),yn([Fe({type:String})],e.prototype,"type",void 0),yn([Fe({type:Number})],e.prototype,"duration",void 0),yn([Fe()],e.prototype,"container",void 0),yn([We()],e.prototype,"_isOpened",void 0),window.customElements.define("kuc-notification-1-17-0",e),mi('\n  kuc-notification-1-17-0,\n  kuc-notification-1-17-0 *,\n  kuc-notification-1-17-0:lang(en),\n  kuc-notification-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-notification-1-17-0:lang(ja),\n  kuc-notification-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-notification-1-17-0:lang(zh),\n  kuc-notification-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-notification-1-17-0:lang(zh-TW),\n  kuc-notification-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-notification-1-17-0 {\n    color: #ffffff;\n    font-weight: 700;\n    text-align: center;\n    text-shadow: 1px -1px 0 rgba(0, 0, 0, 0.5);\n  }\n  kuc-notification-1-17-0 {\n    position: fixed;\n    display: inline-block;\n    top: 0;\n    left: 0;\n    width: 100%;\n    line-height: 1.5;\n    z-index: 10000;\n    margin-top: 16px;\n    pointer-events: none;\n    visibility: hidden;\n    animation-fill-mode: forwards;\n  }\n  .kuc-notification-fadein-1-17-0 {\n    animation-name: kuc-notification-fade-in-1-17-0;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n  }\n  .kuc-notification-fadeout-1-17-0 {\n    animation-name: kuc-notification-fade-out-1-17-0;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n  }\n  .kuc-notification-1-17-0__notification {\n    position: relative;\n    display: inline-block;\n    text-align: left;\n    padding: 16px 56px 16px 24px;\n    background-color: var(--kuc-notification-background-color, #e74c3c);\n  }\n  .kuc-notification-1-17-0__notification--info {\n    background-color: var(--kuc-notification-background-color, #3498db);\n  }\n  .kuc-notification-1-17-0__notification--success {\n    background-color: var(--kuc-notification-background-color, #91c36c);\n  }\n  .kuc-notification-1-17-0__notification--danger {\n    background-color: var(--kuc-notification-background-color, #e74c3c);\n  }\n  .kuc-notification-1-17-0__notification__title {\n    display: flex;\n    align-items: center;\n    margin: 0;\n    font-size: var(--kuc-notification-font-size, 16px);\n    color: var(--kuc-notification-color, #ffffff);\n    max-width: 500px;\n    min-height: 24px;\n    word-break: break-word;\n    white-space: pre-wrap;\n  }\n  .kuc-notification-1-17-0__notification__close-button {\n    position: absolute;\n    top: 4px;\n    right: 0;\n    width: 48px;\n    height: 48px;\n    background-color: transparent;\n    outline: none;\n    border: none;\n    pointer-events: auto;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 0;\n  }\n  .kuc-notification-1-17-0__notification__close-button__icon-background--danger {\n    fill: var(--kuc-notification-close-button-background-color, #c65040);\n  }\n  .kuc-notification-1-17-0__notification__close-button__icon-background--info {\n    fill: var(--kuc-notification-close-button-background-color, #448aca);\n  }\n  .kuc-notification-1-17-0__notification__close-button__icon-background--success {\n    fill: var(--kuc-notification-close-button-background-color, #9bbc65);\n  }\n  @keyframes kuc-notification-fade-in-1-17-0 {\n    0% {\n      visibility: visible;\n      top: -56px;\n    }\n    100% {\n      visibility: visible;\n      top: 0;\n    }\n  }\n  @keyframes kuc-notification-fade-out-1-17-0 {\n    0% {\n      visibility: visible;\n      top: 0;\n    }\n    10% {\n      visibility: visible;\n      top: 14px;\n    }\n    100% {\n      top: -56px;\n    }\n  }\n'),xn=e}})();var wn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let $n;(()=>{if($n=window.customElements.get("kuc-radio-button-1-17-0"),!$n){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.itemLayout="horizontal",this.label="",this.value="",this.selectedIndex=-1,this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(lt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(ut),1))}_findItemToFocus(){let e=-1;for(let t=0;t<this.items.length;t++){const i=this.items[t];i.disabled||(this.selectedIndex!==t||i.value!==this.value?-1===e&&(e=t):e=t)}return e}willUpdate(e){if(e.has("value")){if(""!==this.value)return;this.selectedIndex=-1}}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.value,n=t.dataset.index||"0",o=parseInt(n,10);if(this.value===i&&this.selectedIndex===o)return;const a={oldValue:this.value,value:i};this.value=i,this.selectedIndex=o,gi(this,"change",a)}_handleFocusInput(e){e.target.parentNode.setAttribute("focused","")}_handleBlurInput(e){e.target.parentNode.removeAttribute("focused")}_getRadioIconSvgTemplate(e,t){return Ce`
+      `}}yn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),yn([Ge({type:String})],e.prototype,"text",void 0),yn([Ge({type:String})],e.prototype,"type",void 0),yn([Ge({type:Number})],e.prototype,"duration",void 0),yn([Ge()],e.prototype,"container",void 0),yn([Fe()],e.prototype,"_isOpened",void 0),window.customElements.define("kuc-notification-1-17-1",e),mi('\n  kuc-notification-1-17-1,\n  kuc-notification-1-17-1 *,\n  kuc-notification-1-17-1:lang(en),\n  kuc-notification-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-notification-1-17-1:lang(ja),\n  kuc-notification-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-notification-1-17-1:lang(zh),\n  kuc-notification-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-notification-1-17-1:lang(zh-TW),\n  kuc-notification-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-notification-1-17-1 {\n    color: #ffffff;\n    font-weight: 700;\n    text-align: center;\n    text-shadow: 1px -1px 0 rgba(0, 0, 0, 0.5);\n  }\n  kuc-notification-1-17-1 {\n    position: fixed;\n    display: inline-block;\n    top: 0;\n    left: 0;\n    width: 100%;\n    line-height: 1.5;\n    z-index: 10000;\n    margin-top: 16px;\n    pointer-events: none;\n    visibility: hidden;\n    animation-fill-mode: forwards;\n  }\n  .kuc-notification-fadein-1-17-1 {\n    animation-name: kuc-notification-fade-in-1-17-1;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n  }\n  .kuc-notification-fadeout-1-17-1 {\n    animation-name: kuc-notification-fade-out-1-17-1;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n  }\n  .kuc-notification-1-17-1__notification {\n    position: relative;\n    display: inline-block;\n    text-align: left;\n    padding: 16px 56px 16px 24px;\n    background-color: var(--kuc-notification-background-color, #e74c3c);\n  }\n  .kuc-notification-1-17-1__notification--info {\n    background-color: var(--kuc-notification-background-color, #3498db);\n  }\n  .kuc-notification-1-17-1__notification--success {\n    background-color: var(--kuc-notification-background-color, #91c36c);\n  }\n  .kuc-notification-1-17-1__notification--danger {\n    background-color: var(--kuc-notification-background-color, #e74c3c);\n  }\n  .kuc-notification-1-17-1__notification__title {\n    display: flex;\n    align-items: center;\n    margin: 0;\n    font-size: var(--kuc-notification-font-size, 16px);\n    color: var(--kuc-notification-color, #ffffff);\n    max-width: 500px;\n    min-height: 24px;\n    word-break: break-word;\n    white-space: pre-wrap;\n  }\n  .kuc-notification-1-17-1__notification__close-button {\n    position: absolute;\n    top: 4px;\n    right: 0;\n    width: 48px;\n    height: 48px;\n    background-color: transparent;\n    outline: none;\n    border: none;\n    pointer-events: auto;\n    cursor: pointer;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 0;\n  }\n  .kuc-notification-1-17-1__notification__close-button__icon-background--danger {\n    fill: var(--kuc-notification-close-button-background-color, #c65040);\n  }\n  .kuc-notification-1-17-1__notification__close-button__icon-background--info {\n    fill: var(--kuc-notification-close-button-background-color, #448aca);\n  }\n  .kuc-notification-1-17-1__notification__close-button__icon-background--success {\n    fill: var(--kuc-notification-close-button-background-color, #9bbc65);\n  }\n  @keyframes kuc-notification-fade-in-1-17-1 {\n    0% {\n      visibility: visible;\n      top: -56px;\n    }\n    100% {\n      visibility: visible;\n      top: 0;\n    }\n  }\n  @keyframes kuc-notification-fade-out-1-17-1 {\n    0% {\n      visibility: visible;\n      top: 0;\n    }\n    10% {\n      visibility: visible;\n      top: 14px;\n    }\n    100% {\n      top: -56px;\n    }\n  }\n'),xn=e}})();var wn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let $n;(()=>{if($n=window.customElements.get("kuc-radio-button-1-17-1"),!$n){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.itemLayout="horizontal",this.label="",this.value="",this.selectedIndex=-1,this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}_findItemToFocus(){let e=-1;for(let t=0;t<this.items.length;t++){const i=this.items[t];i.disabled||(this.selectedIndex!==t||i.value!==this.value?-1===e&&(e=t):e=t)}return e}willUpdate(e){if(e.has("value")){if(""!==this.value)return;this.selectedIndex=-1}}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.value,n=t.dataset.index||"0",o=parseInt(n,10);if(this.value===i&&this.selectedIndex===o)return;const a={oldValue:this.value,value:i};this.value=i,this.selectedIndex=o,gi(this,"change",a)}_handleFocusInput(e){e.target.parentNode.setAttribute("focused","")}_handleBlurInput(e){e.target.parentNode.removeAttribute("focused")}_getRadioIconSvgTemplate(e,t){return $e`
     <svg
-      class="kuc-radio-button-1-17-0__group__select-menu__item__label__icon"
+      class="kuc-radio-button-1-17-1__group__select-menu__item__label__icon"
       width="21"
       height="21"
       viewBox="0 0 21 21"
@@ -1219,11 +1218,11 @@
         r="10"
         fill="white"
         stroke="#e3e7e8" stroke-width="1"/>
-      ${t?Ce`<circle cx="10.5" cy="10.5" r="6.5" fill="${e?"#e3e7e8":"#3498db"}"/>`:""}
+      ${t?$e`<circle cx="10.5" cy="10.5" r="6.5" fill="${e?"#e3e7e8":"#3498db"}"/>`:""}
     </svg>
-  `}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t),n=e.disabled||this.disabled,o=void 0!==e.value?e.value:"",a=t===this._findItemToFocus()?"0":"-1";return $e`
+  `}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t),n=e.disabled||this.disabled,o=void 0!==e.value?e.value:"",a=t===this._findItemToFocus()?"0":"-1";return we`
         <div
-          class="kuc-radio-button-1-17-0__group__select-menu__item"
+          class="kuc-radio-button-1-17-1__group__select-menu__item"
           itemLayout="${this.itemLayout}"
         >
           <input
@@ -1232,7 +1231,7 @@
             aria-describedby="${this._GUID}-error"
             data-index="${t}"
             id="${this._GUID}-item-${t}"
-            class="kuc-radio-button-1-17-0__group__select-menu__item__input"
+            class="kuc-radio-button-1-17-1__group__select-menu__item__input"
             name="${this._GUID}-group"
             value="${o}"
             tabindex="${a}"
@@ -1243,43 +1242,43 @@
             @blur="${this._handleBlurInput}"
           />
           <label
-            class="kuc-radio-button-1-17-0__group__select-menu__item__label"
+            class="kuc-radio-button-1-17-1__group__select-menu__item__label"
             for="${this._GUID}-item-${t}"
             >${this._getRadioIconSvgTemplate(n,i)}${void 0===e.label?e.value:e.label}
           </label>
         </div>
-      `}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}render(){return $e`
+      `}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}render(){return we`
         <div
-          class="kuc-radio-button-1-17-0__group"
+          class="kuc-radio-button-1-17-1__group"
           role="radiogroup"
           aria-labelledby="${this._GUID}-group"
         >
-          <div class="kuc-radio-button-1-17-0__group__label" ?hidden="${!this.label}">
-            <kuc-base-label-1-17-0
+          <div class="kuc-radio-button-1-17-1__group__label" ?hidden="${!this.label}">
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .guid="${this._GUID}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </div>
           <div
-            class="kuc-radio-button-1-17-0__group__select-menu"
+            class="kuc-radio-button-1-17-1__group__select-menu"
             ?borderVisible="${this.borderVisible}"
             itemLayout="${this.itemLayout}"
           >
             ${this.items.map(((e,t)=>this._getItemTemplate(e,t)))}
           </div>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
             ariaLive="assertive"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}updated(){this._inputEls.forEach(((e,t)=>{e.checked=this.value===e.value&&t===this.selectedIndex}))}_getSelectedIndex(){if(!this.value)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}}wn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),wn([Fe({type:String})],e.prototype,"error",void 0),wn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),wn([Fe({type:String})],e.prototype,"itemLayout",void 0),wn([Fe({type:String})],e.prototype,"label",void 0),wn([Fe({type:String})],e.prototype,"value",void 0),wn([Fe({type:Number})],e.prototype,"selectedIndex",void 0),wn([Fe({type:Boolean})],e.prototype,"borderVisible",void 0),wn([Fe({type:Boolean})],e.prototype,"disabled",void 0),wn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),wn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),wn([Fe({type:Array})],e.prototype,"items",void 0),wn([Je(".kuc-radio-button-1-17-0__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),window.customElements.define("kuc-radio-button-1-17-0",e),mi('\n  kuc-radio-button-1-17-0,\n  kuc-radio-button-1-17-0 *,\n  kuc-radio-button-1-17-0:lang(en),\n  kuc-radio-button-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-radio-button-1-17-0:lang(ja),\n  kuc-radio-button-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-radio-button-1-17-0:lang(zh),\n  kuc-radio-button-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-radio-button-1-17-0:lang(zh-TW),\n  kuc-radio-button-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-radio-button-1-17-0 {\n    font-size: 14px;\n    color: #333333;\n    display: inline-table;\n    width: var(--kuc-radio-button-menu-width, 239px);\n    min-width: var(--kuc-radio-button-menu-width, 239px);\n    vertical-align: top;\n    line-height: 1.5;\n  }\n\n  kuc-radio-button-1-17-0[hidden] {\n    display: none;\n  }\n\n  .kuc-radio-button-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    margin: 0px;\n    width: 100%;\n  }\n\n  .kuc-radio-button-1-17-0__group__label {\n    display: inline-block;\n    padding: 4px 0 8px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-radio-button-1-17-0__group__label[hidden] {\n    display: none;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu {\n    display: flex;\n    align-items: flex-start;\n    width: var(--kuc-radio-button-menu-width, 100%);\n    height: var(--kuc-radio-button-menu-height);\n    color: var(--kuc-radio-button-menu-color, #333333);\n    font-size: var(--kuc-radio-button-menu-font-size, 14px);\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu[itemlayout="vertical"] {\n    display: block;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu[bordervisible] {\n    border-color: #e3e7e8;\n    border-width: 1px;\n    border-style: solid;\n    padding-top: 4px;\n    box-sizing: border-box;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item {\n    margin-left: 4px;\n    margin-bottom: 4px;\n    margin-right: 16px;\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    display: flex;\n    align-items: center;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item[focused] {\n    border: 1px solid #3498db;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item__input:hover\n    + .kuc-radio-button-1-17-0__group__select-menu__item__label {\n    color: var(--kuc-radio-button-menu-color-hover, #666666);\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item__label__icon {\n    position: absolute;\n    left: -30px;\n    box-sizing: border-box;\n    width: 21px;\n    height: 21px;\n    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;\n    content: "";\n    border-radius: 9px;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item__input[disabled]\n    + .kuc-radio-button-1-17-0__group__select-menu__item__label {\n    color: #888888;\n    cursor: not-allowed;\n  }\n\n  .kuc-radio-button-1-17-0__group__select-menu__item__label {\n    cursor: pointer;\n    position: relative;\n    margin-left: 32px;\n    display: flex;\n    align-items: center;\n    vertical-align: middle;\n    white-space: nowrap;\n    line-height: 1.2;\n    min-height: 24px;\n  }\n'),$n=e}})();var Cn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let In;(()=>{if(In=window.customElements.get("kuc-base-pagination-1-17-0"),!In){class e extends bi{constructor(){super(...arguments),this.pagePosition=1,this.rowsPerPage=5,this.total=1,this.isNext=!0,this.isPrev=!0,this.visible=!0}render(){return $e`
-        <div class="kuc-base-pagination-1-17-0__group" ?hidden="${!this.visible}">
+      `}updated(){this._inputEls.forEach(((e,t)=>{e.checked=this.value===e.value&&t===this.selectedIndex}))}_getSelectedIndex(){if(!this.value)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}}wn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),wn([Ge({type:String})],e.prototype,"error",void 0),wn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),wn([Ge({type:String})],e.prototype,"itemLayout",void 0),wn([Ge({type:String})],e.prototype,"label",void 0),wn([Ge({type:String})],e.prototype,"value",void 0),wn([Ge({type:Number})],e.prototype,"selectedIndex",void 0),wn([Ge({type:Boolean})],e.prototype,"borderVisible",void 0),wn([Ge({type:Boolean})],e.prototype,"disabled",void 0),wn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),wn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),wn([Ge({type:Array})],e.prototype,"items",void 0),wn([Ye(".kuc-radio-button-1-17-1__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),window.customElements.define("kuc-radio-button-1-17-1",e),mi('\n  kuc-radio-button-1-17-1,\n  kuc-radio-button-1-17-1 *,\n  kuc-radio-button-1-17-1:lang(en),\n  kuc-radio-button-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-radio-button-1-17-1:lang(ja),\n  kuc-radio-button-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-radio-button-1-17-1:lang(zh),\n  kuc-radio-button-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-radio-button-1-17-1:lang(zh-TW),\n  kuc-radio-button-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-radio-button-1-17-1 {\n    font-size: 14px;\n    color: #333333;\n    display: inline-table;\n    width: var(--kuc-radio-button-menu-width, 239px);\n    min-width: var(--kuc-radio-button-menu-width, 239px);\n    vertical-align: top;\n    line-height: 1.5;\n  }\n\n  kuc-radio-button-1-17-1[hidden] {\n    display: none;\n  }\n\n  .kuc-radio-button-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    margin: 0px;\n    width: 100%;\n  }\n\n  .kuc-radio-button-1-17-1__group__label {\n    display: inline-block;\n    padding: 4px 0 8px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-radio-button-1-17-1__group__label[hidden] {\n    display: none;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu {\n    display: flex;\n    align-items: flex-start;\n    width: var(--kuc-radio-button-menu-width, 100%);\n    height: var(--kuc-radio-button-menu-height);\n    color: var(--kuc-radio-button-menu-color, #333333);\n    font-size: var(--kuc-radio-button-menu-font-size, 14px);\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu[itemlayout="vertical"] {\n    display: block;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu[bordervisible] {\n    border-color: #e3e7e8;\n    border-width: 1px;\n    border-style: solid;\n    padding-top: 4px;\n    box-sizing: border-box;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item {\n    margin-left: 4px;\n    margin-bottom: 4px;\n    margin-right: 16px;\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    display: flex;\n    align-items: center;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item[focused] {\n    border: 1px solid #3498db;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item__input:hover\n    + .kuc-radio-button-1-17-1__group__select-menu__item__label {\n    color: var(--kuc-radio-button-menu-color-hover, #666666);\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item__label__icon {\n    position: absolute;\n    left: -30px;\n    box-sizing: border-box;\n    width: 21px;\n    height: 21px;\n    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;\n    content: "";\n    border-radius: 9px;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item__input[disabled]\n    + .kuc-radio-button-1-17-1__group__select-menu__item__label {\n    color: #888888;\n    cursor: not-allowed;\n  }\n\n  .kuc-radio-button-1-17-1__group__select-menu__item__label {\n    cursor: pointer;\n    position: relative;\n    margin-left: 32px;\n    display: flex;\n    align-items: center;\n    vertical-align: middle;\n    white-space: nowrap;\n    line-height: 1.2;\n    min-height: 24px;\n  }\n'),$n=e}})();var Cn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let In;(()=>{if(In=window.customElements.get("kuc-base-pagination-1-17-1"),!In){class e extends bi{constructor(){super(...arguments),this.pagePosition=1,this.rowsPerPage=5,this.total=1,this.isNext=!0,this.isPrev=!0,this.visible=!0}render(){return we`
+        <div class="kuc-base-pagination-1-17-1__group" ?hidden="${!this.visible}">
           <button
             title="previous"
-            class="kuc-base-pagination-1-17-0__group__pager-prev${this.isPrev?"":" kuc-base-pagination-1-17-0__group__pager-disable"}"
+            class="kuc-base-pagination-1-17-1__group__pager-prev${this.isPrev?"":" kuc-base-pagination-1-17-1__group__pager-disable"}"
             type="button"
             @click="${this._handleClickPrevButton}"
             @focus="${this._handleFocusPrevButton}"
@@ -1290,7 +1289,7 @@
             ${this._getPrevButtonSvgTemplate()}</button
           >${this._getCurrentPageNumberTemplate()}<button
             title="next"
-            class="kuc-base-pagination-1-17-0__group__pager-next${this.isNext?"":" kuc-base-pagination-1-17-0__group__pager-disable"}"
+            class="kuc-base-pagination-1-17-1__group__pager-next${this.isNext?"":" kuc-base-pagination-1-17-1__group__pager-disable"}"
             type="button"
             @click="${this._handleClickNextButton}"
             @focus="${this._handleFocusNextButton}"
@@ -1301,7 +1300,7 @@
             ${this._getNextButtonSvgTemplate()}
           </button>
         </div>
-      `}_handleClickPrevButton(e){e.stopPropagation(),gi(this,"kuc:pagination-click-prev")}_handleFocusPrevButton(){this._prevButtonEl.classList.add("kuc-base-pagination-1-17-0__group__pager--focus")}_handleBlurPrevButton(){this._prevButtonEl.classList.remove("kuc-base-pagination-1-17-0__group__pager--focus")}_handleMouseOverPrevButton(){this._prevButtonEl.classList.add("kuc-base-pagination-1-17-0__group__pager--horver")}_handleMouseLeavePrevButton(){this._prevButtonEl.classList.remove("kuc-base-pagination-1-17-0__group__pager--horver")}_handleClickNextButton(e){e.stopPropagation(),gi(this,"kuc:pagination-click-next")}_handleFocusNextButton(){this._nextButtonEl.classList.add("kuc-base-pagination-1-17-0__group__pager--focus")}_handleBlurNextButton(){this._nextButtonEl.classList.remove("kuc-base-pagination-1-17-0__group__pager--focus")}_handleMouseOverNextButton(){this._nextButtonEl.classList.add("kuc-base-pagination-1-17-0__group__pager--horver")}_handleMouseLeaveNextButton(){this._nextButtonEl.classList.remove("kuc-base-pagination-1-17-0__group__pager--horver")}_getPrevButtonSvgTemplate(){return Ce`
+      `}_handleClickPrevButton(e){e.stopPropagation(),gi(this,"kuc:pagination-click-prev")}_handleFocusPrevButton(){this._prevButtonEl.classList.add("kuc-base-pagination-1-17-1__group__pager--focus")}_handleBlurPrevButton(){this._prevButtonEl.classList.remove("kuc-base-pagination-1-17-1__group__pager--focus")}_handleMouseOverPrevButton(){this._prevButtonEl.classList.add("kuc-base-pagination-1-17-1__group__pager--horver")}_handleMouseLeavePrevButton(){this._prevButtonEl.classList.remove("kuc-base-pagination-1-17-1__group__pager--horver")}_handleClickNextButton(e){e.stopPropagation(),gi(this,"kuc:pagination-click-next")}_handleFocusNextButton(){this._nextButtonEl.classList.add("kuc-base-pagination-1-17-1__group__pager--focus")}_handleBlurNextButton(){this._nextButtonEl.classList.remove("kuc-base-pagination-1-17-1__group__pager--focus")}_handleMouseOverNextButton(){this._nextButtonEl.classList.add("kuc-base-pagination-1-17-1__group__pager--horver")}_handleMouseLeaveNextButton(){this._nextButtonEl.classList.remove("kuc-base-pagination-1-17-1__group__pager--horver")}_getPrevButtonSvgTemplate(){return $e`
         <svg
           width="9"
           height="15"
@@ -1315,7 +1314,7 @@
             fill="#888888"
           />
         </svg>
-      `}_getNextButtonSvgTemplate(){return Ce`
+      `}_getNextButtonSvgTemplate(){return $e`
       <svg
         width="9"
         height="15"
@@ -1329,35 +1328,35 @@
           fill="#888888"
         />
       </svg>
-      `}_getCurrentPageNumberTemplate(){const e=this._createCurrentPageInfo(),t=`${e.firstNum} - ${e.lastNum} / ${this.total}`;return $e`<span class="kuc-base-pagination-1-17-0__group__pager-current"
+      `}_getCurrentPageNumberTemplate(){const e=this._createCurrentPageInfo(),t=`${e.firstNum} - ${e.lastNum} / ${this.total}`;return we`<span class="kuc-base-pagination-1-17-1__group__pager-current"
         >${t}</span
-      >`}_createCurrentPageInfo(){const e=(this.pagePosition-1)*this.rowsPerPage+1;let t=this.pagePosition*this.rowsPerPage;return t=t>this.total?this.total:t,{firstNum:e,lastNum:t}}}Cn([Fe({type:Number})],e.prototype,"pagePosition",void 0),Cn([Fe({type:Number})],e.prototype,"rowsPerPage",void 0),Cn([Fe({type:Number})],e.prototype,"total",void 0),Cn([Fe({type:Boolean})],e.prototype,"isNext",void 0),Cn([Fe({type:Boolean})],e.prototype,"isPrev",void 0),Cn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Cn([Ke(".kuc-base-pagination-1-17-0__group__pager-prev")],e.prototype,"_prevButtonEl",void 0),Cn([Ke(".kuc-base-pagination-1-17-0__group__pager-next")],e.prototype,"_nextButtonEl",void 0),window.customElements.define("kuc-base-pagination-1-17-0",e),mi("\n  .kuc-base-pagination-1-17-0__group {\n    margin-top: 10px;\n  }\n  .kuc-base-pagination-1-17-0__group button {\n    cursor: pointer;\n  }\n  .kuc-base-pagination-1-17-0__group__pager-prev {\n    border: none;\n    background-color: transparent;\n    visibility: visible;\n    height: 23px;\n    vertical-align: middle;\n  }\n  .kuc-base-pagination-1-17-0__group__pager-next {\n    border: none;\n    background-color: transparent;\n    visibility: visible;\n    height: 23px;\n    vertical-align: middle;\n  }\n  .kuc-base-pagination-1-17-0__group__pager-next:hover svg path,\n  .kuc-base-pagination-1-17-0__group__pager-prev:hover svg path,\n  .kuc-base-pagination-1-17-0__group__pager-next:focus-visible svg path,\n  .kuc-base-pagination-1-17-0__group__pager-prev:focus-visible svg path\n  {\n    fill: #3498db;\n  }\n  .kuc-base-pagination-1-17-0__group__pager--focus,\n  .kuc-base-pagination-1-17-0__group__pager-next:focus-visible,\n  .kuc-base-pagination-1-17-0__group__pager-prev:focus-visible {\n    outline: 1px solid #3498db;\n  }\n  .kuc-base-pagination-1-17-0__group__pager--horver svg path {\n    fill: #3498db;\n  }\n  .kuc-base-pagination-1-17-0__group__pager-next svg,\n  .kuc-base-pagination-1-17-0__group__pager-prev svg {\n    margin-top: 3px;\n  }\n  .kuc-base-pagination-1-17-0__group__pager-disable {\n    visibility: hidden;\n  }\n  .kuc-base-pagination-1-17-0__group__pager-current {\n    display: inline-block;\n    height: 23px;\n    line-height: 23px;\n    vertical-align: middle;\n    font-size: 14px;\n    color: #333333;\n  }\n"),In=e}})();var En=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Sn;(()=>{if(Sn=window.customElements.get("kuc-readonly-table-1-17-0"),!Sn){class e extends bi{constructor(e){if(super(),this.className="",this.id="",this.label="",this.columns=[],this.data=[],this.pagination=!0,this.rowsPerPage=5,this.visible=!0,this._pagePosition=1,this._columnOrder=[],!e)return;const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return e.has("columns")&&!Ti(this.columns)?(this.throwErrorAfterUpdateComplete(ct),!1):e.has("data")&&!Ti(this.data)?(this.throwErrorAfterUpdateComplete(bt),!1):!(e.has("rowsPerPage")&&!Ei(this.rowsPerPage)&&(this.throwErrorAfterUpdateComplete(pt),1))}willUpdate(e){e.has("columns")&&(this._columnOrder=[],this.columns.map((e=>this._columnOrder.push(e.field?e.field:"")))),e.has("rowsPerPage")&&(this.rowsPerPage=Math.round(this.rowsPerPage))}render(){const e=this._createDisplayData();return!this.columns||this.columns.length<1?$e`
-            <table class="kuc-readonly-table-1-17-0__table">
+      >`}_createCurrentPageInfo(){const e=(this.pagePosition-1)*this.rowsPerPage+1;let t=this.pagePosition*this.rowsPerPage;return t=t>this.total?this.total:t,{firstNum:e,lastNum:t}}}Cn([Ge({type:Number})],e.prototype,"pagePosition",void 0),Cn([Ge({type:Number})],e.prototype,"rowsPerPage",void 0),Cn([Ge({type:Number})],e.prototype,"total",void 0),Cn([Ge({type:Boolean})],e.prototype,"isNext",void 0),Cn([Ge({type:Boolean})],e.prototype,"isPrev",void 0),Cn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Cn([qe(".kuc-base-pagination-1-17-1__group__pager-prev")],e.prototype,"_prevButtonEl",void 0),Cn([qe(".kuc-base-pagination-1-17-1__group__pager-next")],e.prototype,"_nextButtonEl",void 0),window.customElements.define("kuc-base-pagination-1-17-1",e),mi("\n  .kuc-base-pagination-1-17-1__group {\n    margin-top: 10px;\n  }\n  .kuc-base-pagination-1-17-1__group button {\n    cursor: pointer;\n  }\n  .kuc-base-pagination-1-17-1__group__pager-prev {\n    border: none;\n    background-color: transparent;\n    visibility: visible;\n    height: 23px;\n    vertical-align: middle;\n  }\n  .kuc-base-pagination-1-17-1__group__pager-next {\n    border: none;\n    background-color: transparent;\n    visibility: visible;\n    height: 23px;\n    vertical-align: middle;\n  }\n  .kuc-base-pagination-1-17-1__group__pager-next:hover svg path,\n  .kuc-base-pagination-1-17-1__group__pager-prev:hover svg path,\n  .kuc-base-pagination-1-17-1__group__pager-next:focus-visible svg path,\n  .kuc-base-pagination-1-17-1__group__pager-prev:focus-visible svg path\n  {\n    fill: #3498db;\n  }\n  .kuc-base-pagination-1-17-1__group__pager--focus,\n  .kuc-base-pagination-1-17-1__group__pager-next:focus-visible,\n  .kuc-base-pagination-1-17-1__group__pager-prev:focus-visible {\n    outline: 1px solid #3498db;\n  }\n  .kuc-base-pagination-1-17-1__group__pager--horver svg path {\n    fill: #3498db;\n  }\n  .kuc-base-pagination-1-17-1__group__pager-next svg,\n  .kuc-base-pagination-1-17-1__group__pager-prev svg {\n    margin-top: 3px;\n  }\n  .kuc-base-pagination-1-17-1__group__pager-disable {\n    visibility: hidden;\n  }\n  .kuc-base-pagination-1-17-1__group__pager-current {\n    display: inline-block;\n    height: 23px;\n    line-height: 23px;\n    vertical-align: middle;\n    font-size: 14px;\n    color: #333333;\n  }\n"),In=e}})();var En=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Sn;(()=>{if(Sn=window.customElements.get("kuc-readonly-table-1-17-1"),!Sn){class e extends bi{constructor(e){if(super(),this.className="",this.id="",this.label="",this.columns=[],this.data=[],this.pagination=!0,this.rowsPerPage=5,this.visible=!0,this._pagePosition=1,this._columnOrder=[],!e)return;const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return e.has("columns")&&!Ti(this.columns)?(this.throwErrorAfterUpdateComplete(ut),!1):e.has("data")&&!Ti(this.data)?(this.throwErrorAfterUpdateComplete(pt),!1):!(e.has("rowsPerPage")&&!Ei(this.rowsPerPage)&&(this.throwErrorAfterUpdateComplete(_t),1))}willUpdate(e){e.has("columns")&&(this._columnOrder=[],this.columns.map((e=>this._columnOrder.push(e.field?e.field:"")))),e.has("rowsPerPage")&&(this.rowsPerPage=Math.round(this.rowsPerPage))}render(){const e=this._createDisplayData();return!this.columns||this.columns.length<1?we`
+            <table class="kuc-readonly-table-1-17-1__table">
               <caption
-                class="kuc-readonly-table-1-17-0__table__label kuc-readonly-table-1-17-0__table__label--no-column"
+                class="kuc-readonly-table-1-17-1__table__label kuc-readonly-table-1-17-1__table__label--no-column"
                 ?hidden="${!this.label}"
               >
                 ${this.label}
               </caption>
             </table>
-          `:$e`
-            <table class="kuc-readonly-table-1-17-0__table">
+          `:we`
+            <table class="kuc-readonly-table-1-17-1__table">
               <caption
-                class="kuc-readonly-table-1-17-0__table__label"
+                class="kuc-readonly-table-1-17-1__table__label"
                 ?hidden="${!this.label}"
               >
                 ${this.label}
               </caption>
-              <thead class="kuc-readonly-table-1-17-0__table__header">
+              <thead class="kuc-readonly-table-1-17-1__table__header">
                 <tr>
                   ${this.columns.map(((e,t)=>this._getColumnsTemplate(e,t)))}
                 </tr>
               </thead>
-              <tbody class="kuc-readonly-table-1-17-0__table__body">
+              <tbody class="kuc-readonly-table-1-17-1__table__body">
                 ${e.map(((e,t)=>this._getDataTemplate(e,t)))}
               </tbody>
             </table>
-            <kuc-base-pagination-1-17-0
+            <kuc-base-pagination-1-17-1
               .pagePosition="${this._pagePosition}"
               .rowsPerPage="${this.rowsPerPage}"
               .total="${this.data.length}"
@@ -1366,28 +1365,28 @@
               .isNext="${this._toggleDisplayNextButton()}"
               @kuc:pagination-click-prev=${this._handleClickPreviousButton}
               @kuc:pagination-click-next=${this._handleClickNextButton}
-            ></kuc-base-pagination-1-17-0>
-          `}_createDisplayData(){if(!this.pagination)return this.data;const e=(this._pagePosition-1)*this.rowsPerPage+1,t=this._pagePosition*this.rowsPerPage;return this.data.filter(((i,n)=>n>=e-1&&n<=t-1))}_customWidthVariables(e){return`var(--kuc-readonly-table-header-${e}-width, var(--kuc-readonly-table-header-width, auto))`}_getColumnsTemplate(e,t){const i=this._customWidthVariables(t);return $e`
+            ></kuc-base-pagination-1-17-1>
+          `}_createDisplayData(){if(!this.pagination)return this.data;const e=(this._pagePosition-1)*this.rowsPerPage+1,t=this._pagePosition*this.rowsPerPage;return this.data.filter(((i,n)=>n>=e-1&&n<=t-1))}_customWidthVariables(e){return`var(--kuc-readonly-table-header-${e}-width, var(--kuc-readonly-table-header-width, auto))`}_getColumnsTemplate(e,t){const i=this._customWidthVariables(t);return we`
         <th
-          class="kuc-readonly-table-1-17-0__table__header__cell"
+          class="kuc-readonly-table-1-17-1__table__header__cell"
           ?hidden="${!1===e.visible}"
           style="width: ${i}; min-width: ${i}; max-width: ${i}"
         >
           ${e.title||""}
         </th>
-      `}_getDataTemplate(e,t){return $e`
+      `}_getDataTemplate(e,t){return we`
         <tr
-          class="kuc-readonly-table-1-17-0__table__body__row kuc-readonly-table-1-17-0__table__body__row-${t}"
+          class="kuc-readonly-table-1-17-1__table__body__row kuc-readonly-table-1-17-1__table__body__row-${t}"
         >
-          ${this._columnOrder.map(((t,i)=>{var n;const o=null===(n=this.columns[i].visible)||void 0===n||n;let a=e[t];this._isHTML(a)&&(a=$e`<div
-                class="kuc-readonly-table-1-17-0__table__body__row__cell-data--html"
+          ${this._columnOrder.map(((t,i)=>{var n;const o=null===(n=this.columns[i].visible)||void 0===n||n;let a=e[t];this._isHTML(a)&&(a=we`<div
+                class="kuc-readonly-table-1-17-1__table__body__row__cell-data--html"
               >
-                ${si(a)}
-              </div>`);const s=this._customWidthVariables(i);return $e`<td class="kuc-readonly-table-1-17-0__table__body__row__cell-data" ?hidden="${!o}" style="width: ${s}; min-width: ${s}; max-width: ${s}">${a}</td>`}))}
+                ${ai(a)}
+              </div>`);const s=this._customWidthVariables(i);return we`<td class="kuc-readonly-table-1-17-1__table__body__row__cell-data" ?hidden="${!o}" style="width: ${s}; min-width: ${s}; max-width: ${s}">${a}</td>`}))}
         </tr>
-      `}_toggleDisplayPreviousButton(){return this._pagePosition>1}_toggleDisplayNextButton(){return this._pagePosition<this.data.length/this.rowsPerPage}_handleClickPreviousButton(e){this._pagePosition<2||(Ei(this.rowsPerPage)?this._pagePosition-=1:this.throwErrorAfterUpdateComplete(pt))}_handleClickNextButton(e){Ei(this.rowsPerPage)?!1!==this._toggleDisplayNextButton()&&(this._pagePosition+=1):this.throwErrorAfterUpdateComplete(pt)}_isHTML(e){if(e instanceof HTMLElement)return!0;const t=document.createElement("div");return t.innerHTML=e,t.childElementCount>0}}En([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),En([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),En([Fe({type:String})],e.prototype,"label",void 0),En([Fe({type:Array})],e.prototype,"columns",void 0),En([Fe({type:Array})],e.prototype,"data",void 0),En([Fe({type:Boolean})],e.prototype,"pagination",void 0),En([Fe({type:Number})],e.prototype,"rowsPerPage",void 0),En([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),En([We()],e.prototype,"_pagePosition",void 0),En([We()],e.prototype,"_columnOrder",void 0),window.customElements.define("kuc-readonly-table-1-17-0",e),mi('\n  kuc-readonly-table-1-17-0 ,\n  kuc-readonly-table-1-17-0  *,\n  kuc-readonly-table-1-17-0:lang(en),\n  kuc-readonly-table-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-readonly-table-1-17-0:lang(ja),\n  kuc-readonly-table-1-17-0:lang(ja) * {\n      font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-readonly-table-1-17-0:lang(zh),\n  kuc-readonly-table-1-17-0:lang(zh) * {\n      font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-readonly-table-1-17-0:lang(zh-TW),\n  kuc-readonly-table-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-readonly-table-1-17-0 {\n    font-size: 14px;\n    color: #333333;\n    display: block;\n  }\n  kuc-readonly-table-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-0__table {\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    display: inline-block;\n  }\n  .kuc-readonly-table-1-17-0__table__header {\n    border-width: 0px 1px;\n    border-color: var(--kuc-readonly-table-header-background-color, #3498db);\n    border-style: solid;\n  }\n  .kuc-readonly-table-1-17-0__table__label {\n    text-align: left;\n    white-space: normal;\n    overflow-wrap: anywhere;\n    padding: 4px 0px;\n  }\n  .kuc-readonly-table-1-17-0__table__label[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-0__table__label--no-column {\n    overflow-wrap: break-word;\n  }\n  .kuc-readonly-table-1-17-0__table__header__cell {\n    background-color: var(--kuc-readonly-table-header-background-color, #3498db);\n    color: var(--kuc-readonly-table-header-color, #ffffff);\n    height: var(--kuc-readonly-table-header-height, 40px);\n    box-sizing: border-box;\n    text-align: left;\n    overflow: auto;\n    white-space: nowrap;\n    word-wrap: break-word;\n    padding: 4px 8px;\n    font-weight: 400;\n    font-size: var(--kuc-readonly-table-header-font-size, 12px);\n  }\n  .kuc-readonly-table-1-17-0__table__header__cell[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-0__table__body {\n    vertical-align: top;\n  }\n  .kuc-readonly-table-1-17-0__table__body__row__cell-data {\n    box-sizing: border-box;\n    padding: 4px 8px;\n    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    border-color: #e3e7e8;\n    border-style: solid;\n    border-width: 1px;\n  }\n  .kuc-readonly-table-1-17-0__table__body__row__cell-data[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-0__table__header__cell,\n  .kuc-readonly-table-1-17-0__table__body__row__cell-data {\n    scrollbar-width: none; /* Firefox */\n  }\n  .kuc-readonly-table-1-17-0__table__header__cell::-webkit-scrollbar,\n  .kuc-readonly-table-1-17-0__table__body__row__cell-data::-webkit-scrollbar {\n    width: 0; /* Safari and Chrome */\n    display: none\n  }\n  .kuc-readonly-table-1-17-0__table__body__row__cell-data--html {\n    white-space: normal;\n  }\n'),Sn=e}})();var Tn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let An;(()=>{if(An=window.customElements.get("kuc-spinner-1-17-0"),!An){class e extends bi{constructor(e){super(),this.text="",this.container=document.body,this._isOpened=!1;const t=vi(e);Object.assign(this,t)}_getSpinnerSvgTemplate(){return Ce`
+      `}_toggleDisplayPreviousButton(){return this._pagePosition>1}_toggleDisplayNextButton(){return this._pagePosition<this.data.length/this.rowsPerPage}_handleClickPreviousButton(e){this._pagePosition<2||(Ei(this.rowsPerPage)?this._pagePosition-=1:this.throwErrorAfterUpdateComplete(_t))}_handleClickNextButton(e){Ei(this.rowsPerPage)?!1!==this._toggleDisplayNextButton()&&(this._pagePosition+=1):this.throwErrorAfterUpdateComplete(_t)}_isHTML(e){if(e instanceof HTMLElement)return!0;const t=document.createElement("div");return t.innerHTML=e,t.childElementCount>0}}En([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),En([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),En([Ge({type:String})],e.prototype,"label",void 0),En([Ge({type:Array})],e.prototype,"columns",void 0),En([Ge({type:Array})],e.prototype,"data",void 0),En([Ge({type:Boolean})],e.prototype,"pagination",void 0),En([Ge({type:Number})],e.prototype,"rowsPerPage",void 0),En([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),En([Fe()],e.prototype,"_pagePosition",void 0),En([Fe()],e.prototype,"_columnOrder",void 0),window.customElements.define("kuc-readonly-table-1-17-1",e),mi('\n  kuc-readonly-table-1-17-1 ,\n  kuc-readonly-table-1-17-1  *,\n  kuc-readonly-table-1-17-1:lang(en),\n  kuc-readonly-table-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-readonly-table-1-17-1:lang(ja),\n  kuc-readonly-table-1-17-1:lang(ja) * {\n      font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-readonly-table-1-17-1:lang(zh),\n  kuc-readonly-table-1-17-1:lang(zh) * {\n      font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-readonly-table-1-17-1:lang(zh-TW),\n  kuc-readonly-table-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-readonly-table-1-17-1 {\n    font-size: 14px;\n    color: #333333;\n    display: block;\n  }\n  kuc-readonly-table-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-1__table {\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    display: inline-block;\n  }\n  .kuc-readonly-table-1-17-1__table__header {\n    border-width: 0px 1px;\n    border-color: var(--kuc-readonly-table-header-background-color, #3498db);\n    border-style: solid;\n  }\n  .kuc-readonly-table-1-17-1__table__label {\n    text-align: left;\n    white-space: normal;\n    overflow-wrap: anywhere;\n    padding: 4px 0px;\n  }\n  .kuc-readonly-table-1-17-1__table__label[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-1__table__label--no-column {\n    overflow-wrap: break-word;\n  }\n  .kuc-readonly-table-1-17-1__table__header__cell {\n    background-color: var(--kuc-readonly-table-header-background-color, #3498db);\n    color: var(--kuc-readonly-table-header-color, #ffffff);\n    height: var(--kuc-readonly-table-header-height, 40px);\n    box-sizing: border-box;\n    text-align: left;\n    overflow: auto;\n    white-space: nowrap;\n    word-wrap: break-word;\n    padding: 4px 8px;\n    font-weight: 400;\n    font-size: var(--kuc-readonly-table-header-font-size, 12px);\n  }\n  .kuc-readonly-table-1-17-1__table__header__cell[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-1__table__body {\n    vertical-align: top;\n  }\n  .kuc-readonly-table-1-17-1__table__body__row__cell-data {\n    box-sizing: border-box;\n    padding: 4px 8px;\n    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    border-color: #e3e7e8;\n    border-style: solid;\n    border-width: 1px;\n  }\n  .kuc-readonly-table-1-17-1__table__body__row__cell-data[hidden] {\n    display: none;\n  }\n  .kuc-readonly-table-1-17-1__table__header__cell,\n  .kuc-readonly-table-1-17-1__table__body__row__cell-data {\n    scrollbar-width: none; /* Firefox */\n  }\n  .kuc-readonly-table-1-17-1__table__header__cell::-webkit-scrollbar,\n  .kuc-readonly-table-1-17-1__table__body__row__cell-data::-webkit-scrollbar {\n    width: 0; /* Safari and Chrome */\n    display: none\n  }\n  .kuc-readonly-table-1-17-1__table__body__row__cell-data--html {\n    white-space: normal;\n  }\n'),Sn=e}})();var Tn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let An;(()=>{if(An=window.customElements.get("kuc-spinner-1-17-1"),!An){class e extends bi{constructor(e){super(),this.text="",this.container=document.body,this._isOpened=!1;const t=vi(e);Object.assign(this,t)}_getSpinnerSvgTemplate(){return $e`
         <svg
-          class="kuc-spinner-1-17-0__spinner__loader"
+          class="kuc-spinner-1-17-1__spinner__loader"
           viewBox="0 0 50 50"
           aria-hidden="true"
         >
@@ -1404,81 +1403,81 @@
           <circle r="4" cx="10.15" cy="10.15" opacity="0.9" />
           <circle r="4" cx="19.56" cy="4.72" opacity="1" />
         </svg>
-      `}_isValidContainerElement(){return this.container instanceof HTMLElement}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.parentElement&&this.parentElement.classList.remove("kuc--has-spinner"),this.container.appendChild(this),this.performUpdate(),this.container.classList.contains("kuc--has-spinner")||this.container.classList.add("kuc--has-spinner"),this._isOpened=!0}close(){this.parentElement&&this.parentElement.classList.remove("kuc--has-spinner"),this._isOpened=!1,this.parentNode&&this.parentNode.removeChild(this)}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this.close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this.close(),!e)return this.throwErrorAfterUpdateComplete(gt),!1}return!0}render(){return $e`
-        <div class="kuc-spinner-1-17-0__spinner" aria-live="assertive" role="alert">
+      `}_isValidContainerElement(){return this.container instanceof HTMLElement}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.parentElement&&this.parentElement.classList.remove("kuc--has-spinner"),this.container.appendChild(this),this.performUpdate(),this.container.classList.contains("kuc--has-spinner")||this.container.classList.add("kuc--has-spinner"),this._isOpened=!0}close(){this.parentElement&&this.parentElement.classList.remove("kuc--has-spinner"),this._isOpened=!1,this.parentNode&&this.parentNode.removeChild(this)}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this.close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this.close(),!e)return this.throwErrorAfterUpdateComplete(bt),!1}return!0}render(){return we`
+        <div class="kuc-spinner-1-17-1__spinner" aria-live="assertive" role="alert">
           ${this._getSpinnerSvgTemplate()}
           <div
-            class="kuc-spinner-1-17-0__spinner__text${this.text?"":" visually-hidden"}"
+            class="kuc-spinner-1-17-1__spinner__text${this.text?"":" visually-hidden"}"
           >
             ${this.text?this.text:"now loading…"}
           </div>
         </div>
-        <div class="kuc-spinner-1-17-0__mask"></div>
-      `}}Tn([Fe({type:String})],e.prototype,"text",void 0),Tn([Fe()],e.prototype,"container",void 0),window.customElements.define("kuc-spinner-1-17-0",e),mi('\n  kuc-spinner-1-17-0,\n  kuc-spinner-1-17-0 *,\n  kuc-spinner-1-17-0:lang(en),\n  kuc-spinner-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-spinner-1-17-0:lang(ja),\n  kuc-spinner-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-spinner-1-17-0:lang(zh),\n  kuc-spinner-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-spinner-1-17-0:lang(zh-TW),\n  kuc-spinner-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-spinner-1-17-0 {\n    font-size: 14px;\n    color: #333333;\n  }\n  .kuc-spinner-1-17-0__spinner {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 10000;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n  }\n  .kuc-spinner-1-17-0__spinner__loader {\n    width: var(--kuc-spinner-loader-width, 50px);\n    height: var(--kuc-spinner-loader-height, 50px);\n    animation: rotate-loading 1s steps(12) infinite;\n    fill: var(--kuc-spinner-loader-color, #99ccff);\n  }\n  .kuc-spinner-1-17-0__spinner__text {\n    margin: 10px 0;\n    font-size: var(--kuc-spinner-text-font-size, 14px);\n    color: var(--kuc-spinner-text-color, #333333);\n  }\n  .visually-hidden {\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    border: 0;\n    padding: 0;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    margin: -1px;\n  }\n  .kuc-spinner-1-17-0__mask {\n    position: fixed;\n    top: 0;\n    right: 0;\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: #666666;\n    opacity: 0.6;\n    z-index: 9999;\n  }\n  .kuc--has-spinner {\n    overflow: hidden;\n  }\n  @keyframes rotate-loading {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n'),An=e}})();var Dn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};const Vn="kuc-table-1-17-0__table__body__row__action-add",Ln="kuc-table-1-17-0__table__body__row__action-remove",Hn=e=>`var(--kuc-table-header-${e}-width, var(--kuc-table-header-width, auto))`;let Mn;(()=>{if(Mn=window.customElements.get("kuc-table-1-17-0"),!Mn){class e extends bi{constructor(e){if(super(),this.className="",this.id="",this.label="",this.columns=[],this.data=[],this.actionButton=!0,this.headerVisible=!0,this.visible=!0,!e)return;const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("data")||e.has("columns")){const e=this._getErrorValidateColumnsAndData();if(e)return this.throwErrorAfterUpdateComplete(e),!1}return!0}willUpdate(e){this._tBody&&(this._tBody.innerHTML="")}_getErrorMessageWhenValidateColumns(){return Ti(this.columns)?(e=>{for(let t=0;t<e.length;t++)if(!Object.prototype.hasOwnProperty.call(e[t],"field"))return!1;return!0})(this.columns)?(e=>{const t=this.columns.map((e=>e.field));return t.some((function(e,i){return t.indexOf(e)!==i}))})()?_t:"":ht:ct}render(){return!this.columns||this.columns.length<1?$e`<table class="kuc-table-1-17-0__table">
+        <div class="kuc-spinner-1-17-1__mask"></div>
+      `}}Tn([Ge({type:String})],e.prototype,"text",void 0),Tn([Ge()],e.prototype,"container",void 0),window.customElements.define("kuc-spinner-1-17-1",e),mi('\n  kuc-spinner-1-17-1,\n  kuc-spinner-1-17-1 *,\n  kuc-spinner-1-17-1:lang(en),\n  kuc-spinner-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-spinner-1-17-1:lang(ja),\n  kuc-spinner-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-spinner-1-17-1:lang(zh),\n  kuc-spinner-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-spinner-1-17-1:lang(zh-TW),\n  kuc-spinner-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-spinner-1-17-1 {\n    font-size: 14px;\n    color: #333333;\n  }\n  .kuc-spinner-1-17-1__spinner {\n    position: fixed;\n    top: 0;\n    left: 0;\n    z-index: 10000;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n  }\n  .kuc-spinner-1-17-1__spinner__loader {\n    width: var(--kuc-spinner-loader-width, 50px);\n    height: var(--kuc-spinner-loader-height, 50px);\n    animation: rotate-loading 1s steps(12) infinite;\n    fill: var(--kuc-spinner-loader-color, #99ccff);\n  }\n  .kuc-spinner-1-17-1__spinner__text {\n    margin: 10px 0;\n    font-size: var(--kuc-spinner-text-font-size, 14px);\n    color: var(--kuc-spinner-text-color, #333333);\n  }\n  .visually-hidden {\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    border: 0;\n    padding: 0;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    margin: -1px;\n  }\n  .kuc-spinner-1-17-1__mask {\n    position: fixed;\n    top: 0;\n    right: 0;\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-color: #666666;\n    opacity: 0.6;\n    z-index: 9999;\n  }\n  .kuc--has-spinner {\n    overflow: hidden;\n  }\n  @keyframes rotate-loading {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n'),An=e}})();var Dn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};const Vn="kuc-table-1-17-1__table__body__row__action-add",Ln="kuc-table-1-17-1__table__body__row__action-remove",Hn=e=>`var(--kuc-table-header-${e}-width, var(--kuc-table-header-width, auto))`;let Mn;(()=>{if(Mn=window.customElements.get("kuc-table-1-17-1"),!Mn){class e extends bi{constructor(e){if(super(),this.className="",this.id="",this.label="",this.columns=[],this.data=[],this.actionButton=!0,this.headerVisible=!0,this.visible=!0,!e)return;const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("data")||e.has("columns")){const e=this._getErrorValidateColumnsAndData();if(e)return this.throwErrorAfterUpdateComplete(e),!1}return!0}willUpdate(e){this._tBody&&(this._tBody.innerHTML="")}_getErrorMessageWhenValidateColumns(){return Ti(this.columns)?(e=>{for(let t=0;t<e.length;t++)if(!Object.prototype.hasOwnProperty.call(e[t],"field"))return!1;return!0})(this.columns)?(e=>{const t=this.columns.map((e=>e.field));return t.some((function(e,i){return t.indexOf(e)!==i}))})()?ht:"":ct:ut}render(){return!this.columns||this.columns.length<1?we`<table class="kuc-table-1-17-1__table">
             <caption
-              class="kuc-table-1-17-0__table__label kuc-table-1-17-0__table__label--no-column"
+              class="kuc-table-1-17-1__table__label kuc-table-1-17-1__table__label--no-column"
               ?hidden="${!this.label}"
             >
               ${this.label}
             </caption>
-          </table>`:$e`
-            <table class="kuc-table-1-17-0__table">
-              <caption class="kuc-table-1-17-0__table__label" ?hidden="${!this.label}">
+          </table>`:we`
+            <table class="kuc-table-1-17-1__table">
+              <caption class="kuc-table-1-17-1__table__label" ?hidden="${!this.label}">
                 ${this.label}
               </caption>
               <thead
-                class="kuc-table-1-17-0__table__header"
+                class="kuc-table-1-17-1__table__header"
                 ?hidden="${!this.headerVisible}"
               >
                 ${this._getTableHeaderTemplate()}
               </thead>
-              <tbody class="kuc-table-1-17-0__table__body"></tbody>
+              <tbody class="kuc-table-1-17-1__table__body"></tbody>
             </table>
-          `}updated(e){if(0!==this.columns.length)for(let e=0;e<this.data.length;e++)this._addRowToTable(e,this.data[e])}_getTableHeaderTemplate(){return $e`
+          `}updated(e){if(0!==this.columns.length)for(let e=0;e<this.data.length;e++)this._addRowToTable(e,this.data[e])}_getTableHeaderTemplate(){return we`
         <tr>
           ${this.columns.map(((e,t)=>this._getColumnHeaderTemplate(e,t)))}
         </tr>
-      `}_getColumnHeaderTemplate(e,t){const i=Hn(t);return $e`
+      `}_getColumnHeaderTemplate(e,t){const i=Hn(t);return we`
         <th
-          class="kuc-table-1-17-0__table__header__cell"
+          class="kuc-table-1-17-1__table__header__cell"
           ?hidden="${!1===e.visible}"
           style="width: ${i}; min-width: ${i}; max-width: ${i}"
         >
-          <div class="kuc-table-1-17-0__table__header__cell-title">
-            ${e.title?si(e.title):""}<!--
+          <div class="kuc-table-1-17-1__table__header__cell-title">
+            ${e.title?ai(e.title):""}<!--
         --><span
-              class="kuc-base-label-1-17-0__required-icon"
+              class="kuc-base-label-1-17-1__required-icon"
               ?hidden="${!e.requiredIcon}"
               >*</span
             >
           </div>
         </th>
-      `}_getActionsCellWhenRemoveRow(e){let t=null,i=e;for(;this.data.length>1;){const e=this._table.rows[i];if(e){t=e.cells[this.columns.length];break}i--}return t}_getDefaultDataRow(e){const t={};for(const i in e)if(Object.prototype.hasOwnProperty.call(e,i)){if(Array.isArray(e[i])){t[i]=[];continue}if("object"==typeof e[i]&&null!==e[i]){t[i]={};continue}t[i]=""}return t}_addRowToTable(e,t){var i;const n=this._tBody.insertRow(e);n.classList.add("kuc-table-1-17-0__table__body__row");for(let o=0;o<this.columns.length;o++){const a=Hn(o),s=n.insertCell(o),r=this.columns[o];s.classList.add("kuc-table-1-17-0__table__body__row__cell-data"),s.style.width=a,s.style.maxWidth=a,s.style.minWidth=a,s.addEventListener("change",(e=>{this._handleChangeCell(e,r.field)})),s.hidden=!(null===(i=r.visible)||void 0===i||i);const l=r.render?r.render(t[r.field],t,e):t[r.field];l&&l.nodeType?s.appendChild(l):s.innerText=l||""}this.actionButton&&this._addActionsCellToNewRow(n)}_handleChangeCell(e,t){e.stopPropagation();const i=this._deepCloneObject(this.data),n=e.currentTarget.parentElement.rowIndex-1,o=this.data[n];if(t in o){let i=e.target.value;"detail"in e&&(i=e.detail.value),o[t]=i}const a={type:"change-cell",rowIndex:n,data:this._deepCloneObject(this.data),oldData:i,field:t};this._dispatchChangeEvent(a)}_handleAddRow(e){const t=this._deepCloneObject(this.data),i=this._getDefaultDataRow(this.data[0]);this._addRowToTable(e,i),this.data.splice(e,0,i);const n={type:"add-row",rowIndex:e,data:this._deepCloneObject(this.data),oldData:t};this._dispatchChangeEvent(n),this._toggleRemoveRowButton()}_handleRemoveRow(e){if(1===this.data.length)return;const t=e-1,i=this._deepCloneObject(this.data);this._table.deleteRow(e),this.data.splice(t,1);const n={type:"remove-row",rowIndex:t,data:this._deepCloneObject(this.data),oldData:i};this._dispatchChangeEvent(n),this._toggleRemoveRowButton(),this._focusActionsButtonWhenRemoveRow(e)}_focusActionsButtonWhenRemoveRow(e){const t=this._getActionsCellWhenRemoveRow(e);t?this._focusRemoveRowButton(t):this._focusFirstAddRowButton()}_focusRemoveRowButton(e){e.querySelector(`.${Ln}`).focus()}_focusFirstAddRowButton(){const e=this._table.rows[1].cells[this.columns.length].querySelector(`.${Vn}`);null==e||e.focus()}_toggleRemoveRowButton(){var e;const t=this._tBody.rows[0].lastChild.lastChild;if(1!==this.data.length){if(2===this.data.length){const i=null===(e=this._tBody.rows[1].lastChild)||void 0===e?void 0:e.lastChild;t.style.display=i.style.display="block"}}else t.style.display="none"}_getSvgDOM(e,t){const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("fill","none"),i.setAttribute("width","18"),i.setAttribute("height","18"),i.setAttribute("viewBox","0 0 16 16"),i.setAttribute("aria-hidden","true");const n=document.createElementNS("http://www.w3.org/2000/svg","path");return n.setAttribute("d",t),n.setAttribute("fill-rule","evenodd"),n.setAttribute("clip-rule","evenodd"),n.setAttribute("fill",e),i.appendChild(n),i}_addActionsCellToNewRow(e){const t={add:!0,remove:!0};if("object"==typeof this.actionButton&&(t.add=!Object.prototype.hasOwnProperty.call(this.actionButton,"add")||this.actionButton.add,t.remove=!Object.prototype.hasOwnProperty.call(this.actionButton,"remove")||this.actionButton.remove),!t.add&&!t.remove)return;const i=e.insertCell(this.columns.length);if(i.classList.add("kuc-table-1-17-0__table__body__row__action"),t.add){const t=this._getActionButtonDOM("add",e);i.appendChild(t)}if(t.remove){const t=this._getActionButtonDOM("remove",e);i.appendChild(t),1===this.data.length&&(t.style.display="none")}}_getActionButtonDOM(e,t){let i=Ln,n="Delete this row";const o="add"===e;o&&(i=Vn,n="Add row");const a=o?"#3498db":"#b5b5b5",s=o?"M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM12.0355 8.49997V7.49997H8.50008V3.96454H7.50008V7.49997H3.96443V8.49997H7.50008V12.0356H8.50008V8.49997H12.0355Z":"M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0355 7.49997V8.49997L3.96443 8.49997V7.49997H12.0355Z",r=this._getSvgDOM(a,s),l=document.createElement("button");return l.classList.add(i),l.setAttribute("title",n),l.appendChild(r),l.addEventListener("click",(()=>{const e=this._getErrorValidateColumnsAndData();e?this.throwErrorAfterUpdateComplete(e):o?this._handleAddRow(t.rowIndex):this._handleRemoveRow(t.rowIndex)})),l}_getErrorValidateColumnsAndData(){return this._getErrorMessageWhenValidateColumns()||(Ti(this.data)?"":bt)}_deepCloneObject(e){return JSON.parse(JSON.stringify(e))}_dispatchChangeEvent(e){gi(this,"change",e)}}Dn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Dn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Dn([Fe({type:String})],e.prototype,"label",void 0),Dn([Fe({type:Array})],e.prototype,"columns",void 0),Dn([Fe({type:Array})],e.prototype,"data",void 0),Dn([Fe()],e.prototype,"actionButton",void 0),Dn([Fe({type:Boolean})],e.prototype,"headerVisible",void 0),Dn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Dn([Ke(".kuc-table-1-17-0__table")],e.prototype,"_table",void 0),Dn([Ke(".kuc-table-1-17-0__table__body")],e.prototype,"_tBody",void 0),window.customElements.define("kuc-table-1-17-0",e),mi('\n    kuc-table-1-17-0,\n    kuc-table-1-17-0 *,\n    kuc-table-1-17-0:lang(en),\n    kuc-table-1-17-0:lang(en) * {\n        font-family: sans-serif;\n    }\n    kuc-table-1-17-0:lang(ja),\n    kuc-table-1-17-0:lang(ja) * {\n        font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n        sans-serif;\n    }\n    kuc-table-1-17-0:lang(zh),\n    kuc-table-1-17-0:lang(zh) * {\n        font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", sans-serif;\n    }\n    kuc-table-1-17-0:lang(zh-TW),\n    kuc-table-1-17-0:lang(zh-TW) * {\n       font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n         Hei,"Heiti SC",sans-serif;\n    }\n    kuc-table-1-17-0 {\n        font-size: 14px;\n        color: #333333;\n        display: block;\n    }\n    kuc-table-1-17-0[hidden] {\n        display: none;\n    }\n    kuc-table-1-17-0 kuc-* {\n        line-height: 1;\n    }\n    .kuc-table-1-17-0__table {\n        border-collapse: collapse;\n    }\n    .kuc-table-1-17-0__table__header {\n        border-width: 0px 1px;\n        border-color: var(--kuc-table-header-background-color, #3498db);\n        border-style: solid;\n        border-right: 0;\n    }\n    .kuc-table-1-17-0__table__header[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-0__table__header__cell {\n        box-sizing: border-box;\n        font-size: var(--kuc-table-header-font-size, 12px);\n        font-weight: 400;\n        background-color: var(--kuc-table-header-background-color, #3498db);\n        color: var(--kuc-table-header-color, #ffffff);\n        height: var(--kuc-table-header-height, 40px);\n        padding: 4px 8px;\n        text-align: left;\n        white-space: normal;\n    }\n    .kuc-table-1-17-0__table__header__cell-title {\n        overflow-wrap: break-word;\n        display: flex;\n        align-items: center;\n    }\n    .kuc-table-1-17-0__table__header__cell[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-0__table__header__cell .kuc-base-label-1-17-0__required-icon {\n        font-size: var(--kuc-table-header-font-size, 20px);\n        align-self: flex-start;\n    }\n    .kuc-table-1-17-0__table__body__row__cell-data {\n        box-sizing: border-box;\n        overflow-wrap: break-word;\n        white-space: normal;\n        border-color: #e3e7e8;\n        border-style: solid;\n        border-width: 1px;\n        padding: 8px 8px;\n        vertical-align: top;\n    }\n    .kuc-table-1-17-0__table__body__row__cell-data[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-0__table__body__row__action {\n        display: flex;\n        vertical-align: top;\n    }\n    .kuc-table-1-17-0__table__body__row__action button {\n        display: flex;\n        align-items: center;\n        width: 24px;\n        height: 24px;\n        background: transparent;\n        border: 1px solid transparent;\n        padding: 2px;\n        cursor: pointer;\n    }\n    .kuc-table-1-17-0__table__body__row__action button[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-0__table__body__row__action-add {\n        margin-left: 12px;\n    }\n    .kuc-table-1-17-0__table__body__row__action-remove {\n        margin-left: 4px;\n    }\n    .kuc-table-1-17-0__table__body__row__action-add:focus,\n    .kuc-table-1-17-0__table__body__row__action-remove:focus {\n        border: 1px solid #3498db;\n        outline: none;\n    }\n    .kuc-table-1-17-0__table__body__row__action-remove:hover path {\n        fill: #e74c3c;\n    }\n    .kuc-table-1-17-0__table__body__row__action[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-0__table caption {\n        text-align: left;\n        margin-bottom: 6px;\n        overflow-wrap: anywhere;\n        white-space: normal;\n    }\n    .kuc-table-1-17-0__table .kuc-table-1-17-0__table__label--no-column {\n        overflow-wrap: break-word;\n    }\n'),Mn=e}})();var Bn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let On;(()=>{if(On=window.customElements.get("kuc-tabs-1-17-0"),!On){class e extends bi{constructor(e){super(),this.className="",this.id="",this.value="",this.borderVisible=!0,this.visible=!0,this.items=[],this._selectedValue="",this._isClick=!1,this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("items")){if(!Ti(this.items))return this.throwErrorAfterUpdateComplete(nt),!1;for(let e=0;e<this.items.length;e++)if(void 0===this.items[e].value)return this.throwErrorAfterUpdateComplete(at),!1;if(!Ii(this.items.map((e=>e.value))))return this.throwErrorAfterUpdateComplete(ot),!1}return!(e.has("value")&&!$i(this.value)&&(this.throwErrorAfterUpdateComplete(lt),1))}willUpdate(e){let t=this._getMatchedTabIndex();-1===t&&(t=this._getFirstVisibleTabIndex()),t>-1&&(this._selectedValue=this.items[t].value)}render(){return $e`
-        <div class="kuc-tabs-1-17-0__group">
+      `}_getActionsCellWhenRemoveRow(e){let t=null,i=e;for(;this.data.length>1;){const e=this._table.rows[i];if(e){t=e.cells[this.columns.length];break}i--}return t}_getDefaultDataRow(e){const t={};for(const i in e)if(Object.prototype.hasOwnProperty.call(e,i)){if(Array.isArray(e[i])){t[i]=[];continue}if("object"==typeof e[i]&&null!==e[i]){t[i]={};continue}t[i]=""}return t}_addRowToTable(e,t){var i;const n=this._tBody.insertRow(e);n.classList.add("kuc-table-1-17-1__table__body__row");for(let o=0;o<this.columns.length;o++){const a=Hn(o),s=n.insertCell(o),r=this.columns[o];s.classList.add("kuc-table-1-17-1__table__body__row__cell-data"),s.style.width=a,s.style.maxWidth=a,s.style.minWidth=a,s.addEventListener("change",(e=>{this._handleChangeCell(e,r.field)})),s.hidden=!(null===(i=r.visible)||void 0===i||i);const l=r.render?r.render(t[r.field],t,e):t[r.field];l&&l.nodeType?s.appendChild(l):s.innerText=l||""}this.actionButton&&this._addActionsCellToNewRow(n)}_handleChangeCell(e,t){e.stopPropagation();const i=this._deepCloneObject(this.data),n=e.currentTarget.parentElement.rowIndex-1,o=this.data[n];if(t in o){let i=e.target.value;"detail"in e&&(i=e.detail.value),o[t]=i}const a={type:"change-cell",rowIndex:n,data:this._deepCloneObject(this.data),oldData:i,field:t};this._dispatchChangeEvent(a)}_handleAddRow(e){const t=this._deepCloneObject(this.data),i=this._getDefaultDataRow(this.data[0]);this._addRowToTable(e,i),this.data.splice(e,0,i);const n={type:"add-row",rowIndex:e,data:this._deepCloneObject(this.data),oldData:t};this._dispatchChangeEvent(n),this._toggleRemoveRowButton()}_handleRemoveRow(e){if(1===this.data.length)return;const t=e-1,i=this._deepCloneObject(this.data);this._table.deleteRow(e),this.data.splice(t,1);const n={type:"remove-row",rowIndex:t,data:this._deepCloneObject(this.data),oldData:i};this._dispatchChangeEvent(n),this._toggleRemoveRowButton(),this._focusActionsButtonWhenRemoveRow(e)}_focusActionsButtonWhenRemoveRow(e){const t=this._getActionsCellWhenRemoveRow(e);t?this._focusRemoveRowButton(t):this._focusFirstAddRowButton()}_focusRemoveRowButton(e){e.querySelector(`.${Ln}`).focus()}_focusFirstAddRowButton(){const e=this._table.rows[1].cells[this.columns.length].querySelector(`.${Vn}`);null==e||e.focus()}_toggleRemoveRowButton(){var e;const t=this._tBody.rows[0].lastChild.lastChild;if(1!==this.data.length){if(2===this.data.length){const i=null===(e=this._tBody.rows[1].lastChild)||void 0===e?void 0:e.lastChild;t.style.display=i.style.display="block"}}else t.style.display="none"}_getSvgDOM(e,t){const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("fill","none"),i.setAttribute("width","18"),i.setAttribute("height","18"),i.setAttribute("viewBox","0 0 16 16"),i.setAttribute("aria-hidden","true");const n=document.createElementNS("http://www.w3.org/2000/svg","path");return n.setAttribute("d",t),n.setAttribute("fill-rule","evenodd"),n.setAttribute("clip-rule","evenodd"),n.setAttribute("fill",e),i.appendChild(n),i}_addActionsCellToNewRow(e){const t={add:!0,remove:!0};if("object"==typeof this.actionButton&&(t.add=!Object.prototype.hasOwnProperty.call(this.actionButton,"add")||this.actionButton.add,t.remove=!Object.prototype.hasOwnProperty.call(this.actionButton,"remove")||this.actionButton.remove),!t.add&&!t.remove)return;const i=e.insertCell(this.columns.length);if(i.classList.add("kuc-table-1-17-1__table__body__row__action"),t.add){const t=this._getActionButtonDOM("add",e);i.appendChild(t)}if(t.remove){const t=this._getActionButtonDOM("remove",e);i.appendChild(t),1===this.data.length&&(t.style.display="none")}}_getActionButtonDOM(e,t){let i=Ln,n="Delete this row";const o="add"===e;o&&(i=Vn,n="Add row");const a=o?"#3498db":"#b5b5b5",s=o?"M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM12.0355 8.49997V7.49997H8.50008V3.96454H7.50008V7.49997H3.96443V8.49997H7.50008V12.0356H8.50008V8.49997H12.0355Z":"M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0355 7.49997V8.49997L3.96443 8.49997V7.49997H12.0355Z",r=this._getSvgDOM(a,s),l=document.createElement("button");return l.classList.add(i),l.setAttribute("title",n),l.appendChild(r),l.addEventListener("click",(()=>{const e=this._getErrorValidateColumnsAndData();e?this.throwErrorAfterUpdateComplete(e):o?this._handleAddRow(t.rowIndex):this._handleRemoveRow(t.rowIndex)})),l}_getErrorValidateColumnsAndData(){return this._getErrorMessageWhenValidateColumns()||(Ti(this.data)?"":pt)}_deepCloneObject(e){return JSON.parse(JSON.stringify(e))}_dispatchChangeEvent(e){gi(this,"change",e)}}Dn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Dn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Dn([Ge({type:String})],e.prototype,"label",void 0),Dn([Ge({type:Array})],e.prototype,"columns",void 0),Dn([Ge({type:Array})],e.prototype,"data",void 0),Dn([Ge()],e.prototype,"actionButton",void 0),Dn([Ge({type:Boolean})],e.prototype,"headerVisible",void 0),Dn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Dn([qe(".kuc-table-1-17-1__table")],e.prototype,"_table",void 0),Dn([qe(".kuc-table-1-17-1__table__body")],e.prototype,"_tBody",void 0),window.customElements.define("kuc-table-1-17-1",e),mi('\n    kuc-table-1-17-1,\n    kuc-table-1-17-1 *,\n    kuc-table-1-17-1:lang(en),\n    kuc-table-1-17-1:lang(en) * {\n        font-family: sans-serif;\n    }\n    kuc-table-1-17-1:lang(ja),\n    kuc-table-1-17-1:lang(ja) * {\n        font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n        sans-serif;\n    }\n    kuc-table-1-17-1:lang(zh),\n    kuc-table-1-17-1:lang(zh) * {\n        font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", sans-serif;\n    }\n    kuc-table-1-17-1:lang(zh-TW),\n    kuc-table-1-17-1:lang(zh-TW) * {\n       font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n         Hei,"Heiti SC",sans-serif;\n    }\n    kuc-table-1-17-1 {\n        font-size: 14px;\n        color: #333333;\n        display: block;\n    }\n    kuc-table-1-17-1[hidden] {\n        display: none;\n    }\n    kuc-table-1-17-1 kuc-* {\n        line-height: 1;\n    }\n    .kuc-table-1-17-1__table {\n        border-collapse: collapse;\n    }\n    .kuc-table-1-17-1__table__header {\n        border-width: 0px 1px;\n        border-color: var(--kuc-table-header-background-color, #3498db);\n        border-style: solid;\n        border-right: 0;\n    }\n    .kuc-table-1-17-1__table__header[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-1__table__header__cell {\n        box-sizing: border-box;\n        font-size: var(--kuc-table-header-font-size, 12px);\n        font-weight: 400;\n        background-color: var(--kuc-table-header-background-color, #3498db);\n        color: var(--kuc-table-header-color, #ffffff);\n        height: var(--kuc-table-header-height, 40px);\n        padding: 4px 8px;\n        text-align: left;\n        white-space: normal;\n    }\n    .kuc-table-1-17-1__table__header__cell-title {\n        overflow-wrap: break-word;\n        display: flex;\n        align-items: center;\n    }\n    .kuc-table-1-17-1__table__header__cell[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-1__table__header__cell .kuc-base-label-1-17-1__required-icon {\n        font-size: var(--kuc-table-header-font-size, 20px);\n        align-self: flex-start;\n    }\n    .kuc-table-1-17-1__table__body__row__cell-data {\n        box-sizing: border-box;\n        overflow-wrap: break-word;\n        white-space: normal;\n        border-color: #e3e7e8;\n        border-style: solid;\n        border-width: 1px;\n        padding: 8px 8px;\n        vertical-align: top;\n    }\n    .kuc-table-1-17-1__table__body__row__cell-data[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-1__table__body__row__action {\n        display: flex;\n        vertical-align: top;\n    }\n    .kuc-table-1-17-1__table__body__row__action button {\n        display: flex;\n        align-items: center;\n        width: 24px;\n        height: 24px;\n        background: transparent;\n        border: 1px solid transparent;\n        padding: 2px;\n        cursor: pointer;\n    }\n    .kuc-table-1-17-1__table__body__row__action button[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-1__table__body__row__action-add {\n        margin-left: 12px;\n    }\n    .kuc-table-1-17-1__table__body__row__action-remove {\n        margin-left: 4px;\n    }\n    .kuc-table-1-17-1__table__body__row__action-add:focus,\n    .kuc-table-1-17-1__table__body__row__action-remove:focus {\n        border: 1px solid #3498db;\n        outline: none;\n    }\n    .kuc-table-1-17-1__table__body__row__action-remove:hover path {\n        fill: #e74c3c;\n    }\n    .kuc-table-1-17-1__table__body__row__action[hidden] {\n        display: none;\n    }\n    .kuc-table-1-17-1__table caption {\n        text-align: left;\n        margin-bottom: 6px;\n        overflow-wrap: anywhere;\n        white-space: normal;\n    }\n    .kuc-table-1-17-1__table .kuc-table-1-17-1__table__label--no-column {\n        overflow-wrap: break-word;\n    }\n'),Mn=e}})();var Bn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let On;(()=>{if(On=window.customElements.get("kuc-tabs-1-17-1"),!On){class e extends bi{constructor(e){super(),this.className="",this.id="",this.value="",this.borderVisible=!0,this.visible=!0,this.items=[],this._selectedValue="",this._isClick=!1,this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("items")){if(!Ti(this.items))return this.throwErrorAfterUpdateComplete(it),!1;for(let e=0;e<this.items.length;e++)if(void 0===this.items[e].value)return this.throwErrorAfterUpdateComplete(ot),!1;if(!Ii(this.items.map((e=>e.value))))return this.throwErrorAfterUpdateComplete(nt),!1}return!(e.has("value")&&!$i(this.value)&&(this.throwErrorAfterUpdateComplete(rt),1))}willUpdate(e){let t=this._getMatchedTabIndex();-1===t&&(t=this._getFirstVisibleTabIndex()),t>-1&&(this._selectedValue=this.items[t].value)}render(){return we`
+        <div class="kuc-tabs-1-17-1__group">
           <ul
-            class="kuc-tabs-1-17-0__group__tab-list"
+            class="kuc-tabs-1-17-1__group__tab-list"
             role="tablist"
             @blur="${this._handleBlur}"
           >
             ${this.items.map(((e,t)=>this._getTabTemplate(e,t)))}
           </ul>
           <div
-            class="kuc-tabs-1-17-0__group__tab-panel"
+            class="kuc-tabs-1-17-1__group__tab-panel"
             ?border-visible="${this.borderVisible}"
           >
             ${this.items.map(((e,t)=>this._getTabContentTemplate(e,t)))}
           </div>
         </div>
-      `}_getTabTemplate(e,t){const i=e.value===this._selectedValue;return $e`<li
+      `}_getTabTemplate(e,t){const i=e.value===this._selectedValue;return we`<li
         role="presentation"
-        class="kuc-tabs-1-17-0__group__tab-list__tab"
+        class="kuc-tabs-1-17-1__group__tab-list__tab"
       >
         <button
           role="tab"
           ?hidden="${!1===e.visible}"
           aria-selected="${i}"
           tabindex="${i&&!e.disabled?"0":"-1"}"
-          class="kuc-tabs-1-17-0__group__tab-list__tab__button ${this._isClick?"kuc-tabs-1-17-0__group__tab-list__tab__button--click":""}"
+          class="kuc-tabs-1-17-1__group__tab-list__tab__button ${this._isClick?"kuc-tabs-1-17-1__group__tab-list__tab__button--click":""}"
           id="${this._GUID}-button-${t}"
           aria-controls="${this._GUID}-tabpanel-${t}"
           value="${e.value}"
@@ -1489,38 +1488,38 @@
         >
           ${e.label?e.label:""}
         </button>
-      </li>`}_getTabContentTemplate(e,t){const i=e.value===this._selectedValue;return $e`<div
-        class="kuc-tabs-1-17-0__group__tab-panel__content"
+      </li>`}_getTabContentTemplate(e,t){const i=e.value===this._selectedValue;return we`<div
+        class="kuc-tabs-1-17-1__group__tab-panel__content"
         role="tabpanel"
         id="${this._GUID}-tabpanel-${t}"
         aria-labelledby="${this._GUID}-button-${t}"
         ?hidden="${!i||!1===e.visible}"
         @change="${this._handleChangeEvent}"
       >
-        ${e.content?si(e.content):""}
-      </div>`}_handleMouseDown(e){this._isClick=!0}_handleClickTab(e){const t=e.target;t.blur();const i=this._getCurrentTabIndex(t.getAttribute("value"));if(this._tabButtons[i].focus(),this.value===t.value)return;const n=this._generateEventDetail(t.value);gi(this,"change",n)}_handleChangeEvent(e){e.stopPropagation()}_handleBlur(e){this._isClick=!1}_handleKeyDownTab(e){this._isClick=!1;let t=!1;switch(e.key){case"Left":case"ArrowLeft":t=!0,this._moveToAdjacentTab(e.target,"prev");break;case"Right":case"ArrowRight":t=!0,this._moveToAdjacentTab(e.target,"next");break;case"Home":t=!0,this._moveToLastFirstTab(e.target,"first");break;case"End":t=!0,this._moveToLastFirstTab(e.target,"last")}t&&(e.stopPropagation(),e.preventDefault())}_getCurrentTabIndex(e){let t=-1;for(let i=0;i<this.items.length;i++)if(this.items[i].value===e){t=i;break}return-1===t&&(t=this._getFirstVisibleTabIndex()),t}_getFirstVisibleTabIndex(){return this.items.findIndex((e=>!1!==e.visible))}_getMatchedTabIndex(){return this.items.findIndex((e=>!1!==e.visible&&e.value===this.value))}_moveToLastFirstTab(e,t){const i=this._getCurrentTabIndex(e.getAttribute("value")),n="last"===t?-1:1;let o="last"===t?this.items.length-1:0;for(;o!==i;){if(!1!==this.items[o].visible&&!0!==this.items[o].disabled){e.blur(),gi(this,"change",this._generateEventDetail(this._tabButtons[o].getAttribute("value"))),this._tabButtons[this._getCurrentTabIndex(this.value)].focus();break}o+=n}}_moveToAdjacentTab(e,t){const i=this._getCurrentTabIndex(e.getAttribute("value")),n="next"===t?1:-1;let o=i+n;for(;o!==i&&(o===this.items.length?o=0:-1===o&&(o=this.items.length-1),o!==i);){if(!1!==this.items[o].visible&&!0!==this.items[o].disabled){e.blur(),gi(this,"change",this._generateEventDetail(this._tabButtons[o].getAttribute("value"))),this._tabButtons[this._getCurrentTabIndex(this.value)].focus();break}o+=n}}_generateEventDetail(e){const t=this.value;return this.value=e,{oldValue:t,value:e}}}Bn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Bn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Bn([Fe({type:String})],e.prototype,"value",void 0),Bn([Fe({type:Boolean})],e.prototype,"borderVisible",void 0),Bn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Bn([Fe({type:Array})],e.prototype,"items",void 0),Bn([Je(".kuc-tabs-1-17-0__group__tab-list__tab__button")],e.prototype,"_tabButtons",void 0),Bn([We()],e.prototype,"_isClick",void 0),window.customElements.define("kuc-tabs-1-17-0",e),mi('\n  kuc-tabs-1-17-0,\n  kuc-tabs-1-17-0 *,\n  kuc-tabs-1-17-0:lang(en),\n  kuc-tabs-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-tabs-1-17-0:lang(ja),\n  kuc-tabs-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-tabs-1-17-0:lang(zh),\n  kuc-tabs-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-tabs-1-17-0:lang(zh-TW),\n  kuc-tabs-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-tabs-1-17-0 {\n    display: inline-block;\n  }\n  kuc-tabs-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-tabs-1-17-0__group__tab-list {\n    display: flex;\n    flex: 1;\n    padding: 16px 16px 0 16px;\n    margin: 0;\n    list-style: none;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab {\n    min-height: var(--kuc-tabs-tab-height, 48px);\n    height: var(--kuc-tabs-tab-height, 48px);\n    white-space: normal;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab__button:disabled {\n    color: GrayText;\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab__button {\n    height: 100%;\n    margin: 0;\n    padding: 0 24px;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    font-size: var(--kuc-tabs-tab-font-size, 14px);\n    background-color: var(--kuc-tabs-tab-background-color, #d4d7d7);\n    color: var(--kuc-tabs-tab-color, #333333);\n    border-style: none;\n    border-top: 1px solid #c7cbcb;\n    border-left: 1px solid #c7cbcb;\n    box-shadow: 1px 0 3px #c7cbcb inset;\n    box-sizing: border-box;\n    cursor: pointer;\n    line-height: 1.5;\n    width: var(--kuc-tabs-tab-width, auto);\n    min-width: var(--kuc-tabs-tab-width, 200px);\n    word-wrap: break-word;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab__button[hidden] {\n    display: none;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab__button:last-of-type {\n    border-right: 1px solid #c7cbcb;\n  }\n\n  .kuc-tabs-1-17-0__group__tab-list__tab__button:focus {\n    outline: none;\n    border: 1px solid #3498db;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab__button--click:focus{\n    border: none;\n    border-top: 1px solid #c7cbcb;\n    border-left: 1px solid #c7cbcb;\n    border-right: 1px solid #c7cbcb;\n  }\n  .kuc-tabs-1-17-0__group__tab-list__tab__button[aria-selected="true"] {\n    background-color: var(--kuc-tabs-tab-background-color-selected, #ffffff);\n    color: var(--kuc-tabs-tab-color-selected, #333333);\n    box-shadow: none;\n  }\n  .kuc-tabs-1-17-0__group__tab-panel {\n    display:block;\n    padding: 0;\n    border-top: 0;\n  }\n  .kuc-tabs-1-17-0__group__tab-panel[border-visible] {\n    box-shadow: 0 0 8px 2px rgb(0 0 0 / 10%);\n  }\n  .kuc-tabs-1-17-0__group__tab-panel__content[hidden]{\n    display:none;\n  }\n'),On=e}})();var Nn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Un;(()=>{if(Un=window.customElements.get("kuc-text-1-17-0"),!Un){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.prefix="",this.suffix="",this.textAlign="left",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusInput(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputText(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}render(){return $e`
-        <div class="kuc-text-1-17-0__group">
+        ${e.content?ai(e.content):""}
+      </div>`}_handleMouseDown(e){this._isClick=!0}_handleClickTab(e){const t=e.target;t.blur();const i=this._getCurrentTabIndex(t.getAttribute("value"));if(this._tabButtons[i].focus(),this.value===t.value)return;const n=this._generateEventDetail(t.value);gi(this,"change",n)}_handleChangeEvent(e){e.stopPropagation()}_handleBlur(e){this._isClick=!1}_handleKeyDownTab(e){this._isClick=!1;let t=!1;switch(e.key){case"Left":case"ArrowLeft":t=!0,this._moveToAdjacentTab(e.target,"prev");break;case"Right":case"ArrowRight":t=!0,this._moveToAdjacentTab(e.target,"next");break;case"Home":t=!0,this._moveToLastFirstTab(e.target,"first");break;case"End":t=!0,this._moveToLastFirstTab(e.target,"last")}t&&(e.stopPropagation(),e.preventDefault())}_getCurrentTabIndex(e){let t=-1;for(let i=0;i<this.items.length;i++)if(this.items[i].value===e){t=i;break}return-1===t&&(t=this._getFirstVisibleTabIndex()),t}_getFirstVisibleTabIndex(){return this.items.findIndex((e=>!1!==e.visible))}_getMatchedTabIndex(){return this.items.findIndex((e=>!1!==e.visible&&e.value===this.value))}_moveToLastFirstTab(e,t){const i=this._getCurrentTabIndex(e.getAttribute("value")),n="last"===t?-1:1;let o="last"===t?this.items.length-1:0;for(;o!==i;){if(!1!==this.items[o].visible&&!0!==this.items[o].disabled){e.blur(),gi(this,"change",this._generateEventDetail(this._tabButtons[o].getAttribute("value"))),this._tabButtons[this._getCurrentTabIndex(this.value)].focus();break}o+=n}}_moveToAdjacentTab(e,t){const i=this._getCurrentTabIndex(e.getAttribute("value")),n="next"===t?1:-1;let o=i+n;for(;o!==i&&(o===this.items.length?o=0:-1===o&&(o=this.items.length-1),o!==i);){if(!1!==this.items[o].visible&&!0!==this.items[o].disabled){e.blur(),gi(this,"change",this._generateEventDetail(this._tabButtons[o].getAttribute("value"))),this._tabButtons[this._getCurrentTabIndex(this.value)].focus();break}o+=n}}_generateEventDetail(e){const t=this.value;return this.value=e,{oldValue:t,value:e}}}Bn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Bn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Bn([Ge({type:String})],e.prototype,"value",void 0),Bn([Ge({type:Boolean})],e.prototype,"borderVisible",void 0),Bn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Bn([Ge({type:Array})],e.prototype,"items",void 0),Bn([Ye(".kuc-tabs-1-17-1__group__tab-list__tab__button")],e.prototype,"_tabButtons",void 0),Bn([Fe()],e.prototype,"_isClick",void 0),window.customElements.define("kuc-tabs-1-17-1",e),mi('\n  kuc-tabs-1-17-1,\n  kuc-tabs-1-17-1 *,\n  kuc-tabs-1-17-1:lang(en),\n  kuc-tabs-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-tabs-1-17-1:lang(ja),\n  kuc-tabs-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-tabs-1-17-1:lang(zh),\n  kuc-tabs-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-tabs-1-17-1:lang(zh-TW),\n  kuc-tabs-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-tabs-1-17-1 {\n    display: inline-block;\n  }\n  kuc-tabs-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-tabs-1-17-1__group__tab-list {\n    display: flex;\n    flex: 1;\n    padding: 16px 16px 0 16px;\n    margin: 0;\n    list-style: none;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab {\n    min-height: var(--kuc-tabs-tab-height, 48px);\n    height: var(--kuc-tabs-tab-height, 48px);\n    white-space: normal;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab__button:disabled {\n    color: GrayText;\n    background-color: #d4d7d7;\n    cursor: not-allowed;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab__button {\n    height: 100%;\n    margin: 0;\n    padding: 0 24px;\n    display: grid;\n    align-items: center;\n    align-content: center;\n    font-size: var(--kuc-tabs-tab-font-size, 14px);\n    background-color: var(--kuc-tabs-tab-background-color, #d4d7d7);\n    color: var(--kuc-tabs-tab-color, #333333);\n    border-style: none;\n    border-top: 1px solid #c7cbcb;\n    border-left: 1px solid #c7cbcb;\n    box-shadow: 1px 0 3px #c7cbcb inset;\n    box-sizing: border-box;\n    cursor: pointer;\n    line-height: 1.5;\n    width: var(--kuc-tabs-tab-width, auto);\n    min-width: var(--kuc-tabs-tab-width, 200px);\n    word-wrap: break-word;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab__button[hidden] {\n    display: none;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab__button:last-of-type {\n    border-right: 1px solid #c7cbcb;\n  }\n\n  .kuc-tabs-1-17-1__group__tab-list__tab__button:focus {\n    outline: none;\n    border: 1px solid #3498db;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab__button--click:focus{\n    border: none;\n    border-top: 1px solid #c7cbcb;\n    border-left: 1px solid #c7cbcb;\n    border-right: 1px solid #c7cbcb;\n  }\n  .kuc-tabs-1-17-1__group__tab-list__tab__button[aria-selected="true"] {\n    background-color: var(--kuc-tabs-tab-background-color-selected, #ffffff);\n    color: var(--kuc-tabs-tab-color-selected, #333333);\n    box-shadow: none;\n  }\n  .kuc-tabs-1-17-1__group__tab-panel {\n    display:block;\n    padding: 0;\n    border-top: 0;\n  }\n  .kuc-tabs-1-17-1__group__tab-panel[border-visible] {\n    box-shadow: 0 0 8px 2px rgb(0 0 0 / 10%);\n  }\n  .kuc-tabs-1-17-1__group__tab-panel__content[hidden]{\n    display:none;\n  }\n'),On=e}})();var Nn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Un;(()=>{if(Un=window.customElements.get("kuc-text-1-17-1"),!Un){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.prefix="",this.suffix="",this.textAlign="left",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusInput(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputText(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}render(){return we`
+        <div class="kuc-text-1-17-1__group">
           <label
-            class="kuc-text-1-17-0__group__label"
+            class="kuc-text-1-17-1__group__label"
             for="${this._GUID}-label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </label>
-          <div class="kuc-text-1-17-0__group__input-form">
-            <div class="kuc-text-1-17-0__group__input-form__prefix-outer">
+          <div class="kuc-text-1-17-1__group__input-form">
+            <div class="kuc-text-1-17-1__group__input-form__prefix-outer">
               <span
-                class="kuc-text-1-17-0__group__input-form__prefix-outer__prefix"
+                class="kuc-text-1-17-1__group__input-form__prefix-outer__prefix"
                 ?hidden="${!this.prefix}"
                 >${this.prefix}</span
               >
             </div>
-            <div class="kuc-text-1-17-0__group__input-form__input-outer">
+            <div class="kuc-text-1-17-1__group__input-form__input-outer">
               <input
-                class="kuc-text-1-17-0__group__input-form__input-outer__input"
+                class="kuc-text-1-17-1__group__input-form__input-outer__input"
                 id="${this._GUID}-label"
                 placeholder="${this.placeholder}"
                 textAlign="${this.textAlign}"
@@ -1535,21 +1534,21 @@
                 ?disabled="${this.disabled}"
               />
             </div>
-            <div class="kuc-text-1-17-0__group__input-form__suffix-outer">
+            <div class="kuc-text-1-17-1__group__input-form__suffix-outer">
               <span
-                class="kuc-text-1-17-0__group__input-form__suffix-outer__suffix"
+                class="kuc-text-1-17-1__group__input-form__suffix-outer__suffix"
                 ?hidden="${!this.suffix}"
                 >${this.suffix}</span
               >
             </div>
           </div>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}}Nn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Nn([Fe({type:String})],e.prototype,"error",void 0),Nn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Nn([Fe({type:String})],e.prototype,"label",void 0),Nn([Fe({type:String})],e.prototype,"placeholder",void 0),Nn([Fe({type:String})],e.prototype,"prefix",void 0),Nn([Fe({type:String})],e.prototype,"suffix",void 0),Nn([Fe({type:String})],e.prototype,"textAlign",void 0),Nn([Fe({type:String})],e.prototype,"value",void 0),Nn([Fe({type:Boolean})],e.prototype,"disabled",void 0),Nn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Nn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),window.customElements.define("kuc-text-1-17-0",e),mi('\nkuc-text-1-17-0,\nkuc-text-1-17-0 *,\nkuc-text-1-17-0:lang(en),\nkuc-text-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-text-1-17-0:lang(ja),\nkuc-text-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-text-1-17-0:lang(zh),\nkuc-text-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-text-1-17-0:lang(zh-TW),\nkuc-text-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\nkuc-text-1-17-0 {\n  font-size: 14px;\n  color: #333333;\n  display: inline-table;\n  vertical-align: top;\n  min-width: var(--kuc-text-input-width, 177px);\n  width: var(--kuc-text-input-width, 177px);\n  line-height: 1.5;\n}\nkuc-text-1-17-0[hidden] {\n  display: none;\n}\n.kuc-text-1-17-0__group {\n  border: none;\n  padding: 0px;\n  height: auto;\n  display: inline-block;\n  vertical-align: top;\n  width: 100%;\n  margin: 0px;\n}\n.kuc-text-1-17-0__group__label {\n  display: inline-block;\n  padding: 4px 0px 8px 0px;\n  white-space: nowrap;\n}\n.kuc-text-1-17-0__group__label[hidden] {\n  display: none;\n}\n.kuc-text-1-17-0__group__input-form {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n.kuc-text-1-17-0__group__input-form__prefix-outer__prefix {\n  padding-right: 4px;\n  white-space: nowrap;\n}\n.kuc-text-1-17-0__group__input-form__input-outer {\n  display: flex;\n  min-width: var(--kuc-text-input-width, 26px);\n  width: var(--kuc-text-input-width, 100%);\n}\ninput[type="text"].kuc-text-1-17-0__group__input-form__input-outer__input {\n  width: var(--kuc-text-input-width, 100%);\n  height: var(--kuc-text-input-height, 40px);\n  font-size: var(--kuc-text-input-font-size, 14px);\n  color: var(--kuc-text-input-color, #000000);\n  padding: 0 8px;\n  border: 1px solid #e3e7e8;\n  box-sizing: border-box;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n.kuc-text-1-17-0__group__input-form__input-outer__input[textAlign="left"] {\n  text-align: left;\n}\n.kuc-text-1-17-0__group__input-form__input-outer__input[textAlign="right"] {\n  text-align: right;\n}\ninput[type=text].kuc-text-1-17-0__group__input-form__input-outer__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\ninput[type=text].kuc-text-1-17-0__group__input-form__input-outer__input:disabled {\n  color: #888888;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.kuc-text-1-17-0__group__input-form__suffix-outer__suffix {\n  padding-left: 4px;\n  white-space: nowrap;\n}\n'),Un=e}})();var Pn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let zn;(()=>{if(zn=window.customElements.get("kuc-textarea-1-17-0"),zn)return;class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._onResize=!1,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusTextarea(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeTextarea(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputTextArea(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}_handleMouseDownResize(){this._onResize=!0}_handleMouseUpDocument(){this._onResize=!1}_handleMouseMoveDocument(e){if(!this._onResize)return;const t=this._textarea.getBoundingClientRect();let i=e.clientX-t.left,n=e.clientY-t.top;i<16&&(i=16),n<16&&(n=16),this._container.style.width=i+"px",this._textarea.style.height=n+"px"}_getResizerButtonSvgTemplate(){return Ce`
+      `}}Nn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Nn([Ge({type:String})],e.prototype,"error",void 0),Nn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Nn([Ge({type:String})],e.prototype,"label",void 0),Nn([Ge({type:String})],e.prototype,"placeholder",void 0),Nn([Ge({type:String})],e.prototype,"prefix",void 0),Nn([Ge({type:String})],e.prototype,"suffix",void 0),Nn([Ge({type:String})],e.prototype,"textAlign",void 0),Nn([Ge({type:String})],e.prototype,"value",void 0),Nn([Ge({type:Boolean})],e.prototype,"disabled",void 0),Nn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Nn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),window.customElements.define("kuc-text-1-17-1",e),mi('\nkuc-text-1-17-1,\nkuc-text-1-17-1 *,\nkuc-text-1-17-1:lang(en),\nkuc-text-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-text-1-17-1:lang(ja),\nkuc-text-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-text-1-17-1:lang(zh),\nkuc-text-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-text-1-17-1:lang(zh-TW),\nkuc-text-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC",sans-serif;\n}\nkuc-text-1-17-1 {\n  font-size: 14px;\n  color: #333333;\n  display: inline-table;\n  vertical-align: top;\n  min-width: var(--kuc-text-input-width, 177px);\n  width: var(--kuc-text-input-width, 177px);\n  line-height: 1.5;\n}\nkuc-text-1-17-1[hidden] {\n  display: none;\n}\n.kuc-text-1-17-1__group {\n  border: none;\n  padding: 0px;\n  height: auto;\n  display: inline-block;\n  vertical-align: top;\n  width: 100%;\n  margin: 0px;\n}\n.kuc-text-1-17-1__group__label {\n  display: inline-block;\n  padding: 4px 0px 8px 0px;\n  white-space: nowrap;\n}\n.kuc-text-1-17-1__group__label[hidden] {\n  display: none;\n}\n.kuc-text-1-17-1__group__input-form {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n.kuc-text-1-17-1__group__input-form__prefix-outer__prefix {\n  padding-right: 4px;\n  white-space: nowrap;\n}\n.kuc-text-1-17-1__group__input-form__input-outer {\n  display: flex;\n  min-width: var(--kuc-text-input-width, 26px);\n  width: var(--kuc-text-input-width, 100%);\n}\ninput[type="text"].kuc-text-1-17-1__group__input-form__input-outer__input {\n  width: var(--kuc-text-input-width, 100%);\n  height: var(--kuc-text-input-height, 40px);\n  font-size: var(--kuc-text-input-font-size, 14px);\n  color: var(--kuc-text-input-color, #000000);\n  padding: 0 8px;\n  border: 1px solid #e3e7e8;\n  box-sizing: border-box;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n.kuc-text-1-17-1__group__input-form__input-outer__input[textAlign="left"] {\n  text-align: left;\n}\n.kuc-text-1-17-1__group__input-form__input-outer__input[textAlign="right"] {\n  text-align: right;\n}\ninput[type=text].kuc-text-1-17-1__group__input-form__input-outer__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\ninput[type=text].kuc-text-1-17-1__group__input-form__input-outer__input:disabled {\n  color: #888888;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n.kuc-text-1-17-1__group__input-form__suffix-outer__suffix {\n  padding-left: 4px;\n  white-space: nowrap;\n}\n'),Un=e}})();var Pn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let zn;(()=>{if(zn=window.customElements.get("kuc-textarea-1-17-1"),zn)return;class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._onResize=!1,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusTextarea(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeTextarea(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputTextArea(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}_handleMouseDownResize(){this._onResize=!0}_handleMouseUpDocument(){this._onResize=!1}_handleMouseMoveDocument(e){if(!this._onResize)return;const t=this._textarea.getBoundingClientRect();let i=e.clientX-t.left,n=e.clientY-t.top;i<16&&(i=16),n<16&&(n=16),this._container.style.width=i+"px",this._textarea.style.height=n+"px"}_getResizerButtonSvgTemplate(){return $e`
       <svg height="16" width="16">
         <g fill="none" stroke="#b6b6b6" stroke-width="2">
           <line x1="14" x2="16" y1="15" y2="15" />
@@ -1560,22 +1559,22 @@
           <line x1="10" x2="12" y1="11" y2="11" />
         </g>
       </svg>
-      `}firstUpdated(){document.addEventListener("mousemove",(e=>this._handleMouseMoveDocument(e))),document.addEventListener("mouseup",(e=>this._handleMouseUpDocument()))}render(){return $e`
-        <div class="kuc-textarea-1-17-0__group">
+      `}firstUpdated(){document.addEventListener("mousemove",(e=>this._handleMouseMoveDocument(e))),document.addEventListener("mouseup",(e=>this._handleMouseUpDocument()))}render(){return we`
+        <div class="kuc-textarea-1-17-1__group">
           <label
-            class="kuc-textarea-1-17-0__group__label"
+            class="kuc-textarea-1-17-1__group__label"
             ?hidden="${!this.label}"
             for="${this._GUID}-label"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </label>
-          <div class="kuc-textarea-1-17-0__group__container">
+          <div class="kuc-textarea-1-17-1__group__container">
             <textarea
               id="${this._GUID}-label"
-              class="kuc-textarea-1-17-0__group__textarea"
+              class="kuc-textarea-1-17-1__group__textarea"
               placeholder="${this.placeholder}"
               .value="${this.value}"
               aria-describedby="${this._GUID}-error"
@@ -1588,35 +1587,35 @@
             >
             </textarea>
             <div
-              class="kuc-textarea-1-17-0__group__resizer"
+              class="kuc-textarea-1-17-1__group__resizer"
               @mousedown="${this._handleMouseDownResize}"
               ?hidden="${this.disabled}"
             >
               ${this._getResizerButtonSvgTemplate()}
             </div>
           </div>
-          <kuc-base-error-1-17-0
+          <kuc-base-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ?hidden="${!this.error}"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </div>
-      `}}Pn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Pn([Fe({type:String})],e.prototype,"error",void 0),Pn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Pn([Fe({type:String})],e.prototype,"label",void 0),Pn([Fe({type:String})],e.prototype,"placeholder",void 0),Pn([Fe({type:String})],e.prototype,"value",void 0),Pn([Fe({type:Boolean})],e.prototype,"disabled",void 0),Pn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Pn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Pn([Ke(".kuc-textarea-1-17-0__group__container")],e.prototype,"_container",void 0),Pn([Ke(".kuc-textarea-1-17-0__group__textarea")],e.prototype,"_textarea",void 0),window.customElements.define("kuc-textarea-1-17-0",e),mi('\n  kuc-textarea-1-17-0,\n  kuc-textarea-1-17-0 *,\n  kuc-textarea-1-17-0:lang(en),\n  kuc-textarea-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-textarea-1-17-0:lang(ja),\n  kuc-textarea-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-textarea-1-17-0:lang(zh),\n  kuc-textarea-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-textarea-1-17-0:lang(zh-TW),\n  kuc-textarea-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-textarea-1-17-0 {\n    font-size: 14px;\n    color: var(--kuc-textarea-input-color, #333333);\n    display: inline-table;\n    vertical-align: top;\n    width: var(--kuc-textarea-input-width, 299px);\n    height: var(--kuc-textarea-input-height, 125px);\n    line-height: 1.5;\n  }\n  kuc-textarea-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-textarea-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    margin: 0px;\n    white-space: normal;\n  }\n  .kuc-textarea-1-17-0__group__label {\n    white-space: nowrap;\n    display: inline-block;\n    padding: 4px 0px 8px 0px;\n  }\n  .kuc-textarea-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-textarea-1-17-0__group__container {\n    position: relative;\n    display: inline-table;\n    width: var(--kuc-textarea-input-width, 100%);\n    min-width: var(--kuc-textarea-input-width, 100%);\n  }\n  textarea.kuc-textarea-1-17-0__group__textarea {\n    display: block;\n    border: 1px solid #e3e7e8;\n    box-sizing: border-box;\n    font-size: var(--kuc-textarea-input-font-size, 14px);\n    box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n    min-width: var(--kuc-textarea-input-width, 299px);\n    min-height: var(--kuc-textarea-input-height, 125px);\n    width: var(--kuc-textarea-input-width, 299px);\n    height: var(--kuc-textarea-input-height, 125px);\n    padding: 8px;\n    resize: none;\n    width: 100%;\n    background-color: #ffffff;\n    color: var(--kuc-textarea-input-color, #333333);\n  }\n  .kuc-textarea-1-17-0__group__textarea:focus {\n    outline: none;\n    border-color: #3498db;\n    box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n    border: 1px solid #3498db;\n    background-color: #ffffff;\n    color: var(--kuc-textarea-input-color, #333333);\n  }\n  .kuc-textarea-1-17-0__group__textarea:disabled {\n    color: #888888;\n    background-color: #d4d7d7;\n    box-shadow: none;\n    cursor: not-allowed;\n    resize: none;\n  }\n  .kuc-textarea-1-17-0__group__resizer {\n    position: absolute;\n    width: 16px;\n    height: 16px;\n    cursor: se-resize;\n    float: right;\n    margin: -16px 0px;\n    right: 0px;\n  }\n'),zn=e})();var Rn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let jn;(()=>{if(jn=window.customElements.get("kuc-time-picker-1-17-0"),!jn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.max="",this.min="",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this.timeStep=30,this._errorText="",this._inputValue="",this._errorInvalid="",this._inputMax="",this._inputMin="",this._inputTimeStep=30,this._valueConverted="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("max")||e.has("min")){let e=this._inputMin,t=this._inputMax;if(void 0===this.max||""===this.max)t=St;else{if(!yi(this.max))return this.throwErrorAfterUpdateComplete(At),!1;t=this.max=li(this.max)}if(void 0===this.min||""===this.min)e=Et;else{if(!yi(this.min))return this.throwErrorAfterUpdateComplete(Dt),!1;e=this.min=li(this.min)}if(Pt(t,e)<0)return this.throwErrorAfterUpdateComplete($t),!1;this._inputMin=e,this._inputMax=t}if(e.has("timeStep")){if(!Si(this.timeStep))return this.throwErrorAfterUpdateComplete(It),!1;if(!xi(this.timeStep,this._inputMax,this._inputMin))return this.throwErrorAfterUpdateComplete(Vt),!1;this._inputTimeStep=this.timeStep}return!(void 0!==this.value&&""!==this.value&&(yi(this.value)?(this._valueConverted=li(this.value),e.has("value")&&(Pt(this._valueConverted,this._inputMin)<0||Pt(this._inputMax,this._valueConverted)<0)&&(this.throwErrorAfterUpdateComplete(Ct),1)):(this.throwErrorAfterUpdateComplete(Tt),1)))}update(e){e.has("value")&&(void 0===this.value?""===this._errorInvalid&&(this._inputValue=""):(this.value=""===this.value?this.value:this._valueConverted,this._inputValue=this.value)),(e.has("max")||e.has("min")||e.has("value"))&&void 0!==this.value&&(this._errorInvalid=""),this._errorText=this._errorInvalid||this.error,super.update(e)}render(){return $e`
+      `}}Pn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Pn([Ge({type:String})],e.prototype,"error",void 0),Pn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Pn([Ge({type:String})],e.prototype,"label",void 0),Pn([Ge({type:String})],e.prototype,"placeholder",void 0),Pn([Ge({type:String})],e.prototype,"value",void 0),Pn([Ge({type:Boolean})],e.prototype,"disabled",void 0),Pn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Pn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Pn([qe(".kuc-textarea-1-17-1__group__container")],e.prototype,"_container",void 0),Pn([qe(".kuc-textarea-1-17-1__group__textarea")],e.prototype,"_textarea",void 0),window.customElements.define("kuc-textarea-1-17-1",e),mi('\n  kuc-textarea-1-17-1,\n  kuc-textarea-1-17-1 *,\n  kuc-textarea-1-17-1:lang(en),\n  kuc-textarea-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-textarea-1-17-1:lang(ja),\n  kuc-textarea-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-textarea-1-17-1:lang(zh),\n  kuc-textarea-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-textarea-1-17-1:lang(zh-TW),\n  kuc-textarea-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  kuc-textarea-1-17-1 {\n    font-size: 14px;\n    color: var(--kuc-textarea-input-color, #333333);\n    display: inline-table;\n    vertical-align: top;\n    width: var(--kuc-textarea-input-width, 299px);\n    height: var(--kuc-textarea-input-height, 125px);\n    line-height: 1.5;\n  }\n  kuc-textarea-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-textarea-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    margin: 0px;\n    white-space: normal;\n  }\n  .kuc-textarea-1-17-1__group__label {\n    white-space: nowrap;\n    display: inline-block;\n    padding: 4px 0px 8px 0px;\n  }\n  .kuc-textarea-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-textarea-1-17-1__group__container {\n    position: relative;\n    display: inline-table;\n    width: var(--kuc-textarea-input-width, 100%);\n    min-width: var(--kuc-textarea-input-width, 100%);\n  }\n  textarea.kuc-textarea-1-17-1__group__textarea {\n    display: block;\n    border: 1px solid #e3e7e8;\n    box-sizing: border-box;\n    font-size: var(--kuc-textarea-input-font-size, 14px);\n    box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n    min-width: var(--kuc-textarea-input-width, 299px);\n    min-height: var(--kuc-textarea-input-height, 125px);\n    width: var(--kuc-textarea-input-width, 299px);\n    height: var(--kuc-textarea-input-height, 125px);\n    padding: 8px;\n    resize: none;\n    width: 100%;\n    background-color: #ffffff;\n    color: var(--kuc-textarea-input-color, #333333);\n  }\n  .kuc-textarea-1-17-1__group__textarea:focus {\n    outline: none;\n    border-color: #3498db;\n    box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n    border: 1px solid #3498db;\n    background-color: #ffffff;\n    color: var(--kuc-textarea-input-color, #333333);\n  }\n  .kuc-textarea-1-17-1__group__textarea:disabled {\n    color: #888888;\n    background-color: #d4d7d7;\n    box-shadow: none;\n    cursor: not-allowed;\n    resize: none;\n  }\n  .kuc-textarea-1-17-1__group__resizer {\n    position: absolute;\n    width: 16px;\n    height: 16px;\n    cursor: se-resize;\n    float: right;\n    margin: -16px 0px;\n    right: 0px;\n  }\n'),zn=e})();var Rn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let jn;(()=>{if(jn=window.customElements.get("kuc-time-picker-1-17-1"),!jn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.max="",this.min="",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this.timeStep=30,this._errorText="",this._inputValue="",this._errorInvalid="",this._inputMax="",this._inputMin="",this._inputTimeStep=30,this._valueConverted="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){if(e.has("max")||e.has("min")){let e=this._inputMin,t=this._inputMax;if(void 0===this.max||""===this.max)t=Et;else{if(!yi(this.max))return this.throwErrorAfterUpdateComplete(Tt),!1;t=this.max=ri(this.max)}if(void 0===this.min||""===this.min)e=It;else{if(!yi(this.min))return this.throwErrorAfterUpdateComplete(At),!1;e=this.min=ri(this.min)}if(Ut(t,e)<0)return this.throwErrorAfterUpdateComplete(wt),!1;this._inputMin=e,this._inputMax=t}if(e.has("timeStep")){if(!Si(this.timeStep))return this.throwErrorAfterUpdateComplete(Ct),!1;if(!xi(this.timeStep,this._inputMax,this._inputMin))return this.throwErrorAfterUpdateComplete(Dt),!1;this._inputTimeStep=this.timeStep}return!(void 0!==this.value&&""!==this.value&&(yi(this.value)?(this._valueConverted=ri(this.value),e.has("value")&&(Ut(this._valueConverted,this._inputMin)<0||Ut(this._inputMax,this._valueConverted)<0)&&(this.throwErrorAfterUpdateComplete($t),1)):(this.throwErrorAfterUpdateComplete(St),1)))}update(e){e.has("value")&&(void 0===this.value?""===this._errorInvalid&&(this._inputValue=""):(this.value=""===this.value?this.value:this._valueConverted,this._inputValue=this.value)),(e.has("max")||e.has("min")||e.has("value"))&&void 0!==this.value&&(this._errorInvalid=""),this._errorText=this._errorInvalid||this.error,super.update(e)}render(){return we`
         <fieldset
-          class="kuc-time-picker-1-17-0__group"
+          class="kuc-time-picker-1-17-1__group"
           aria-describedby="${this._GUID}-error"
         >
           <legend
-            class="kuc-time-picker-1-17-0__group__label"
+            class="kuc-time-picker-1-17-1__group__label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-label-1-17-0
+            <kuc-base-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-label-1-17-0>
+            ></kuc-base-label-1-17-1>
           </legend>
-          <kuc-base-time-1-17-0
-            class="kuc-time-picker-1-17-0__group__input"
+          <kuc-base-time-1-17-1
+            class="kuc-time-picker-1-17-1__group__input"
             .value="${this._inputValue}"
             .hour12="${this.hour12}"
             .disabled="${this.disabled}"
@@ -1626,19 +1625,19 @@
             .language="${this._getLanguage()}"
             @kuc:base-time-change="${this._handleTimeChange}"
           >
-          </kuc-base-time-1-17-0>
-          <kuc-base-error-1-17-0
+          </kuc-base-time-1-17-1>
+          <kuc-base-error-1-17-1
             .text="${this._errorText}"
             .guid="${this._GUID}"
             ?hidden="${!this._errorText}"
-          ></kuc-base-error-1-17-0>
+          ></kuc-base-error-1-17-1>
         </fieldset>
-      `}_handleTimeChange(e){e.preventDefault(),e.stopPropagation();const t={value:e.detail.value,oldValue:this.value};e.detail.error?(t.value=void 0,this.value=void 0,this._errorInvalid=e.detail.error,this.error=""):(this.value=e.detail.value,this._errorInvalid=""),this._inputValue=e.detail.value,gi(this,"change",t)}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}}Rn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Rn([Fe({type:String})],e.prototype,"error",void 0),Rn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Rn([Fe({type:String})],e.prototype,"label",void 0),Rn([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),Rn([Fe({type:String})],e.prototype,"max",void 0),Rn([Fe({type:String})],e.prototype,"min",void 0),Rn([Fe({type:String})],e.prototype,"value",void 0),Rn([Fe({type:Boolean})],e.prototype,"disabled",void 0),Rn([Fe({type:Boolean})],e.prototype,"hour12",void 0),Rn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Rn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Rn([Fe({type:Number})],e.prototype,"timeStep",void 0),window.customElements.define("kuc-time-picker-1-17-0",e),mi('\nkuc-time-picker-1-17-0,\nkuc-time-picker-1-17-0 *,\nkuc-time-picker-1-17-0:lang(en),\nkuc-time-picker-1-17-0:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-time-picker-1-17-0:lang(ja),\nkuc-time-picker-1-17-0:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-time-picker-1-17-0:lang(zh),\nkuc-time-picker-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-time-picker-1-17-0:lang(zh-TW),\nkuc-time-picker-1-17-0:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\nkuc-time-picker-1-17-0 {\n  font-size: 14px;\n  color: var(--kuc-time-picker-input-color, #333333);\n  display: inline-table;\n  max-width: var(--kuc-time-picker-input-width, 85px);\n  width: var(--kuc-time-picker-input-width, 85px);\n  vertical-align: top;\n  line-height: 1.5;\n}\n.kuc-time-picker-1-17-0__group__input {\n  position: relative;\n}\nkuc-time-picker-1-17-0[hidden] {\n  display: none;\n}\n.kuc-time-picker-1-17-0__group {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0px;\n  height: auto;\n  margin: 0px;\n}\n\n.kuc-time-picker-1-17-0__group kuc-base-time-1-17-0 {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.kuc-time-picker-1-17-0__group .kuc-base-time-1-17-0__group {\n  max-width: var(--kuc-time-picker-input-width, 85px);\n  width: var(--kuc-time-picker-input-width, 85px);\n  font-size: var(--kuc-time-picker-input-font-size, 14px);\n  height: var(--kuc-time-picker-input-height, 40px);\n  color: var(--kuc-time-picker-input-color, #333333);\n}\n.kuc-time-picker-1-17-0__group .kuc-base-time-1-17-0__group input[type=text].kuc-base-time-1-17-0__group__hours,\n.kuc-time-picker-1-17-0__group .kuc-base-time-1-17-0__group input[type=text].kuc-base-time-1-17-0__group__minutes,\n.kuc-time-picker-1-17-0__group .kuc-base-time-1-17-0__group input.kuc-base-time-1-17-0__group__suffix,\n.kuc-time-picker-1-17-0__group .kuc-base-time-1-17-0__group--focus {\n  color: var(--kuc-time-picker-input-color, #333333);\n}\n.kuc-time-picker-1-17-0__group__label {\n  padding: 4px 0px 8px 0px;\n  display: inline-block;\n  white-space: nowrap;\n}\n.kuc-time-picker-1-17-0__group__label[hidden] {\n  display: none;\n}\n'),jn=e}})();var Gn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Fn;(()=>{if(Fn=window.customElements.get("kuc-tooltip-1-17-0"),!Fn){class e extends bi{constructor(e){super(),this.className="",this.id="",this.placement="top",this.title="",this.container="",this.describeChild=!1,this._container="",this._GUID=fi();const t=vi(e);Object.assign(this,t),this._globalEscapeBound=this._globalEscape.bind(this)}update(e){e.has("container")&&(this._container=si(this.container)),super.update(e)}render(){return $e`
+      `}_handleTimeChange(e){e.preventDefault(),e.stopPropagation();const t={value:e.detail.value,oldValue:this.value};e.detail.error?(t.value=void 0,this.value=void 0,this._errorInvalid=e.detail.error,this.error=""):(this.value=e.detail.value,this._errorInvalid=""),this._inputValue=e.detail.value,gi(this,"change",t)}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}}Rn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Rn([Ge({type:String})],e.prototype,"error",void 0),Rn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Rn([Ge({type:String})],e.prototype,"label",void 0),Rn([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),Rn([Ge({type:String})],e.prototype,"max",void 0),Rn([Ge({type:String})],e.prototype,"min",void 0),Rn([Ge({type:String})],e.prototype,"value",void 0),Rn([Ge({type:Boolean})],e.prototype,"disabled",void 0),Rn([Ge({type:Boolean})],e.prototype,"hour12",void 0),Rn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Rn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Rn([Ge({type:Number})],e.prototype,"timeStep",void 0),window.customElements.define("kuc-time-picker-1-17-1",e),mi('\nkuc-time-picker-1-17-1,\nkuc-time-picker-1-17-1 *,\nkuc-time-picker-1-17-1:lang(en),\nkuc-time-picker-1-17-1:lang(en) * {\n  font-family: sans-serif;\n}\nkuc-time-picker-1-17-1:lang(ja),\nkuc-time-picker-1-17-1:lang(ja) * {\n  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n    sans-serif;\n}\nkuc-time-picker-1-17-1:lang(zh),\nkuc-time-picker-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", sans-serif;\n}\nkuc-time-picker-1-17-1:lang(zh-TW),\nkuc-time-picker-1-17-1:lang(zh-TW) * {\n  font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC"\n}\nkuc-time-picker-1-17-1 {\n  font-size: 14px;\n  color: var(--kuc-time-picker-input-color, #333333);\n  display: inline-table;\n  max-width: var(--kuc-time-picker-input-width, 85px);\n  width: var(--kuc-time-picker-input-width, 85px);\n  vertical-align: top;\n  line-height: 1.5;\n}\n.kuc-time-picker-1-17-1__group__input {\n  position: relative;\n}\nkuc-time-picker-1-17-1[hidden] {\n  display: none;\n}\n.kuc-time-picker-1-17-1__group {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0px;\n  height: auto;\n  margin: 0px;\n}\n\n.kuc-time-picker-1-17-1__group kuc-base-time-1-17-1 {\n  display: inline-flex;\n  flex-direction: column;\n}\n\n.kuc-time-picker-1-17-1__group .kuc-base-time-1-17-1__group {\n  max-width: var(--kuc-time-picker-input-width, 85px);\n  width: var(--kuc-time-picker-input-width, 85px);\n  font-size: var(--kuc-time-picker-input-font-size, 14px);\n  height: var(--kuc-time-picker-input-height, 40px);\n  color: var(--kuc-time-picker-input-color, #333333);\n}\n.kuc-time-picker-1-17-1__group .kuc-base-time-1-17-1__group input[type=text].kuc-base-time-1-17-1__group__hours,\n.kuc-time-picker-1-17-1__group .kuc-base-time-1-17-1__group input[type=text].kuc-base-time-1-17-1__group__minutes,\n.kuc-time-picker-1-17-1__group .kuc-base-time-1-17-1__group input.kuc-base-time-1-17-1__group__suffix,\n.kuc-time-picker-1-17-1__group .kuc-base-time-1-17-1__group--focus {\n  color: var(--kuc-time-picker-input-color, #333333);\n}\n.kuc-time-picker-1-17-1__group__label {\n  padding: 4px 0px 8px 0px;\n  display: inline-block;\n  white-space: nowrap;\n}\n.kuc-time-picker-1-17-1__group__label[hidden] {\n  display: none;\n}\n'),jn=e}})();var Gn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Fn;(()=>{if(Fn=window.customElements.get("kuc-tooltip-1-17-1"),!Fn){class e extends bi{constructor(e){super(),this.className="",this.id="",this.placement="top",this.title="",this.container="",this.describeChild=!1,this._container="",this._GUID=fi();const t=vi(e);Object.assign(this,t),this._globalEscapeBound=this._globalEscape.bind(this)}update(e){e.has("container")&&(this._container=ai(this.container)),super.update(e)}render(){return we`
         <div
-          class="kuc-tooltip-1-17-0__group kuc-tooltip-1-17-0__group--${this._getPlacement()}"
+          class="kuc-tooltip-1-17-1__group kuc-tooltip-1-17-1__group--${this._getPlacement()}"
         >
           <div
-            class="kuc-tooltip-1-17-0__group__container"
+            class="kuc-tooltip-1-17-1__group__container"
             @focusin="${this._handleFocusinContainer}"
             @focusout="${this._handleFocusoutContainer}"
             @mouseenter="${this._handleMouseEnterContainer}"
@@ -1649,33 +1648,33 @@
           </div>
           ${this._getTitleTemplate()}
         </div>
-      `}updated(){this._initializeFirstChildElement(),this.describeChild?this._setChildTitleAttribute():this._setChildAriaLabelAttribute()}_handleMouseEnterContainer(){this._openTooltip()}_handleTouchStartContainer(){this._openTooltip()}_handleMouseLeaveContainer(e){const t=e.relatedTarget;this._titleWrapper&&this._titleWrapper.contains(t)||this._closeTooltip()}_initializeFirstChildElement(){if("string"!=typeof this._container){const e=this._groupContainerEL.firstElementChild;e&&!e.getAttribute("aria-describedby")&&(this._firstChildEl=e)}}_setChildTitleAttribute(){this._firstChildEl&&(this._firstChildEl.setAttribute("title",this.title),this._firstChildEl.removeAttribute("aria-label"))}_setChildAriaLabelAttribute(){this._firstChildEl&&(this._firstChildEl.setAttribute("aria-label",this.title),this._firstChildEl.removeAttribute("title"))}_getTitleTemplate(){return this.title?$e`
+      `}updated(){this._initializeFirstChildElement(),this.describeChild?this._setChildTitleAttribute():this._setChildAriaLabelAttribute()}_handleMouseEnterContainer(){this._openTooltip()}_handleTouchStartContainer(){this._openTooltip()}_handleMouseLeaveContainer(e){const t=e.relatedTarget;this._titleWrapper&&this._titleWrapper.contains(t)||this._closeTooltip()}_initializeFirstChildElement(){if("string"!=typeof this._container){const e=this._groupContainerEL.firstElementChild;e&&!e.getAttribute("aria-describedby")&&(this._firstChildEl=e)}}_setChildTitleAttribute(){this._firstChildEl&&(this._firstChildEl.setAttribute("title",this.title),this._firstChildEl.removeAttribute("aria-label"))}_setChildAriaLabelAttribute(){this._firstChildEl&&(this._firstChildEl.setAttribute("aria-label",this.title),this._firstChildEl.removeAttribute("title"))}_getTitleTemplate(){return this.title?we`
         <div
           id="${this._GUID}-title"
-          class="kuc-tooltip-1-17-0__group__title kuc-tooltip-1-17-0__group__title--hidden"
+          class="kuc-tooltip-1-17-1__group__title kuc-tooltip-1-17-1__group__title--hidden"
           role="tooltip"
           @mouseleave="${this._handleMouseLeaveTitle}"
         >
-          <div class="kuc-tooltip-1-17-0__group__title__wrapper">
-            <div class="kuc-tooltip-1-17-0__group__title__wrapper__arrow"></div>
-            <div class="kuc-tooltip-1-17-0__group__title__wrapper__text">
+          <div class="kuc-tooltip-1-17-1__group__title__wrapper">
+            <div class="kuc-tooltip-1-17-1__group__title__wrapper__arrow"></div>
+            <div class="kuc-tooltip-1-17-1__group__title__wrapper__text">
               ${this.title}
             </div>
           </div>
         </div>
-      `:$e``}_handleMouseLeaveTitle(e){const t=e.relatedTarget;this._groupContainerEL.contains(t)||this._closeTooltip()}_handleFocusinContainer(){this._openTooltip()}_handleFocusoutContainer(){this._closeTooltip()}_openTooltip(){this._updateChildElementAttributes(!0),this._showTooltip(),this._attachGlobalListener()}_closeTooltip(){this._updateChildElementAttributes(!1),this._hideTooltip(),this._removeGlobalListener()}_updateChildElementAttributes(e){if(this._firstChildEl&&this.describeChild){if(e)return this._firstChildEl.removeAttribute("title"),void this._firstChildEl.setAttribute("aria-describedby",`${this._GUID}-title`);this._firstChildEl.removeAttribute("aria-describedby"),this._firstChildEl.setAttribute("title",this.title)}}_showTooltip(){0!==this._tooltips.length&&this._tooltips.forEach((e=>{e.id===`${this._GUID}-title`&&e.classList.remove("kuc-tooltip-1-17-0__group__title--hidden")}))}_hideTooltip(){0!==this._tooltips.length&&this._tooltips.forEach((e=>{e.id===`${this._GUID}-title`&&e.classList.add("kuc-tooltip-1-17-0__group__title--hidden")}))}_attachGlobalListener(){document.addEventListener("keydown",this._globalEscapeBound)}_removeGlobalListener(){document.removeEventListener("keydown",this._globalEscapeBound)}_globalEscape(e){"Escape"!==e.key&&"Esc"!==e.key||this._closeTooltip()}_getPlacement(){return["top","bottom","left","right"].includes(this.placement)?this.placement:"top"}}Gn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Gn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Gn([Fe({type:String})],e.prototype,"placement",void 0),Gn([Fe({type:String})],e.prototype,"title",void 0),Gn([Fe()],e.prototype,"container",void 0),Gn([Fe({type:Boolean})],e.prototype,"describeChild",void 0),Gn([Ke(".kuc-tooltip-1-17-0__group__container")],e.prototype,"_groupContainerEL",void 0),Gn([Ke(".kuc-tooltip-1-17-0__group__title__wrapper")],e.prototype,"_titleWrapper",void 0),Gn([Je(".kuc-tooltip-1-17-0__group__title")],e.prototype,"_tooltips",void 0),window.customElements.define("kuc-tooltip-1-17-0",e),mi('\n  kuc-tooltip-1-17-0,\n  kuc-tooltip-1-17-0 *,\n  kuc-tooltip-1-17-0:lang(en),\n  kuc-tooltip-1-17-0:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-tooltip-1-17-0:lang(ja),\n  kuc-tooltip-1-17-0:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-tooltip-1-17-0:lang(zh),\n  kuc-tooltip-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-tooltip-1-17-0:lang(zh-TW),\n  kuc-tooltip-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  .kuc-tooltip-1-17-0__group__title--hidden {\n    display: none;\n  }\n  .kuc-tooltip-1-17-0__group {\n    position: relative;\n    display: inline-block;\n  }\n  .kuc-tooltip-1-17-0__group::after {\n    position: absolute;\n    right: -20%;\n    top: 100%;\n    left: -20%;\n    display: block;\n    height: calc(0.5em * 2);\n  }\n  .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper__text {\n    max-width: var(--kuc-tooltip-width, 250px);\n    width: var(--kuc-tooltip-width, auto);\n    min-height: var(--kuc-tooltip-height, 32px);;\n    height: var(--kuc-tooltip-height, auto);\n    padding: 6px 8px;\n    color: var(--kuc-tooltip-color, #ffffff);\n    text-align: start;\n    text-decoration: none;\n    word-wrap: break-word;\n    overflow: auto;\n    white-space: normal;\n    background-color: var(--kuc-tooltip-background-color, #000000);\n    font-size: var(--kuc-tooltip-font-size);\n    border-radius: 6px;\n    box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);\n    box-sizing: border-box;\n  }\n  .kuc-tooltip-1-17-0__group__title {\n    position: absolute;\n    top: calc(100% + calc(0.5em * 2));\n    left: 50%;\n    transform: translateX(-50%);\n    margin: 0;\n    border-radius: 0.25em;\n    color: var(--kuc-tooltip-color, #ffffff);\n    width: max-content;\n    z-index: 1000;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--top > .kuc-tooltip-1-17-0__group__title {\n    top: unset;\n    bottom: 100%;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--bottom > .kuc-tooltip-1-17-0__group__title {\n    width: max-content;\n    top: auto;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--left > .kuc-tooltip-1-17-0__group__title {\n    width: max-content;\n    height: fit-content;\n    margin: auto 0;\n    right: 100%;\n    left: auto;\n    top: 0;\n    bottom: 0;\n    transform: translateX(0);\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--right > .kuc-tooltip-1-17-0__group__title {\n    width: max-content;\n    height: fit-content;\n    margin: auto 0;\n    left: 100%;\n    top: 0;\n    bottom: 0;\n    transform: translateX(0);\n  }\n  .kuc-tooltip-1-17-0__group .kuc-tooltip-1-17-0__group__title__wrapper__arrow {\n    border: 0.5em solid transparent;\n    border-bottom-color: var(--kuc-tooltip-background-color, #000000);\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--top > .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper__arrow {\n    border-top-color: var(--kuc-tooltip-background-color, #000000);\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    margin: auto 0;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--left > .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper__arrow {\n    border-left-color: var(--kuc-tooltip-background-color, #000000);\n    border-bottom-color: transparent;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--right > .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper__arrow {\n    border-right-color: var(--kuc-tooltip-background-color, #000000);\n    border-bottom-color: transparent;\n    width: fit-content;\n    height: fit-content;\n    margin: auto 0;\n    top: 0;\n    bottom: 0;\n    right: 100%;\n    left: auto;\n  }\n  .kuc-tooltip-1-17-0__group .kuc-tooltip-1-17-0__group__title__wrapper {\n    display: flex;\n    align-items: center;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--top > .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper {\n    flex-direction: column-reverse;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--bottom > .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper {\n    flex-direction: column;\n  }\n  .kuc-tooltip-1-17-0__group.kuc-tooltip-1-17-0__group--left > .kuc-tooltip-1-17-0__group__title .kuc-tooltip-1-17-0__group__title__wrapper {\n    flex-direction: row-reverse;\n  }\n'),Fn=e}})();var Wn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let qn;(()=>{if(qn=window.customElements.get("kuc-mobile-button-1-17-0"),!qn){class e extends bi{constructor(e){super(),this.className="",this.id="",this.text="",this.type="normal",this.content="",this.disabled=!1,this.visible=!0;const t=vi(e);Object.assign(this,t)}_handleClickButton(e){e.stopPropagation(),gi(this,"click")}_getButtonColorType(){return"normal"===this.type||"submit"===this.type?this.type:"normal"}render(){return $e`
+      `:we``}_handleMouseLeaveTitle(e){const t=e.relatedTarget;this._groupContainerEL.contains(t)||this._closeTooltip()}_handleFocusinContainer(){this._openTooltip()}_handleFocusoutContainer(){this._closeTooltip()}_openTooltip(){this._updateChildElementAttributes(!0),this._showTooltip(),this._attachGlobalListener()}_closeTooltip(){this._updateChildElementAttributes(!1),this._hideTooltip(),this._removeGlobalListener()}_updateChildElementAttributes(e){if(this._firstChildEl&&this.describeChild){if(e)return this._firstChildEl.removeAttribute("title"),void this._firstChildEl.setAttribute("aria-describedby",`${this._GUID}-title`);this._firstChildEl.removeAttribute("aria-describedby"),this._firstChildEl.setAttribute("title",this.title)}}_showTooltip(){0!==this._tooltips.length&&this._tooltips.forEach((e=>{e.id===`${this._GUID}-title`&&e.classList.remove("kuc-tooltip-1-17-1__group__title--hidden")}))}_hideTooltip(){0!==this._tooltips.length&&this._tooltips.forEach((e=>{e.id===`${this._GUID}-title`&&e.classList.add("kuc-tooltip-1-17-1__group__title--hidden")}))}_attachGlobalListener(){document.addEventListener("keydown",this._globalEscapeBound)}_removeGlobalListener(){document.removeEventListener("keydown",this._globalEscapeBound)}_globalEscape(e){"Escape"!==e.key&&"Esc"!==e.key||this._closeTooltip()}_getPlacement(){return["top","bottom","left","right"].includes(this.placement)?this.placement:"top"}}Gn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Gn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Gn([Ge({type:String})],e.prototype,"placement",void 0),Gn([Ge({type:String})],e.prototype,"title",void 0),Gn([Ge()],e.prototype,"container",void 0),Gn([Ge({type:Boolean})],e.prototype,"describeChild",void 0),Gn([qe(".kuc-tooltip-1-17-1__group__container")],e.prototype,"_groupContainerEL",void 0),Gn([qe(".kuc-tooltip-1-17-1__group__title__wrapper")],e.prototype,"_titleWrapper",void 0),Gn([Ye(".kuc-tooltip-1-17-1__group__title")],e.prototype,"_tooltips",void 0),window.customElements.define("kuc-tooltip-1-17-1",e),mi('\n  kuc-tooltip-1-17-1,\n  kuc-tooltip-1-17-1 *,\n  kuc-tooltip-1-17-1:lang(en),\n  kuc-tooltip-1-17-1:lang(en) * {\n    font-family: sans-serif;\n  }\n  kuc-tooltip-1-17-1:lang(ja),\n  kuc-tooltip-1-17-1:lang(ja) * {\n    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,\n      sans-serif;\n  }\n  kuc-tooltip-1-17-1:lang(zh),\n  kuc-tooltip-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", sans-serif;\n  }\n  kuc-tooltip-1-17-1:lang(zh-TW),\n  kuc-tooltip-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC",sans-serif;\n  }\n  .kuc-tooltip-1-17-1__group__title--hidden {\n    display: none;\n  }\n  .kuc-tooltip-1-17-1__group {\n    position: relative;\n    display: inline-block;\n  }\n  .kuc-tooltip-1-17-1__group::after {\n    position: absolute;\n    right: -20%;\n    top: 100%;\n    left: -20%;\n    display: block;\n    height: calc(0.5em * 2);\n  }\n  .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper__text {\n    max-width: var(--kuc-tooltip-width, 250px);\n    width: var(--kuc-tooltip-width, auto);\n    min-height: var(--kuc-tooltip-height, 32px);;\n    height: var(--kuc-tooltip-height, auto);\n    padding: 6px 8px;\n    color: var(--kuc-tooltip-color, #ffffff);\n    text-align: start;\n    text-decoration: none;\n    word-wrap: break-word;\n    overflow: auto;\n    white-space: normal;\n    background-color: var(--kuc-tooltip-background-color, #000000);\n    font-size: var(--kuc-tooltip-font-size);\n    border-radius: 6px;\n    box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);\n    box-sizing: border-box;\n  }\n  .kuc-tooltip-1-17-1__group__title {\n    position: absolute;\n    top: calc(100% + calc(0.5em * 2));\n    left: 50%;\n    transform: translateX(-50%);\n    margin: 0;\n    border-radius: 0.25em;\n    color: var(--kuc-tooltip-color, #ffffff);\n    width: max-content;\n    z-index: 1000;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--top > .kuc-tooltip-1-17-1__group__title {\n    top: unset;\n    bottom: 100%;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--bottom > .kuc-tooltip-1-17-1__group__title {\n    width: max-content;\n    top: auto;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--left > .kuc-tooltip-1-17-1__group__title {\n    width: max-content;\n    height: fit-content;\n    margin: auto 0;\n    right: 100%;\n    left: auto;\n    top: 0;\n    bottom: 0;\n    transform: translateX(0);\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--right > .kuc-tooltip-1-17-1__group__title {\n    width: max-content;\n    height: fit-content;\n    margin: auto 0;\n    left: 100%;\n    top: 0;\n    bottom: 0;\n    transform: translateX(0);\n  }\n  .kuc-tooltip-1-17-1__group .kuc-tooltip-1-17-1__group__title__wrapper__arrow {\n    border: 0.5em solid transparent;\n    border-bottom-color: var(--kuc-tooltip-background-color, #000000);\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--top > .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper__arrow {\n    border-top-color: var(--kuc-tooltip-background-color, #000000);\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n    margin: auto 0;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--left > .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper__arrow {\n    border-left-color: var(--kuc-tooltip-background-color, #000000);\n    border-bottom-color: transparent;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--right > .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper__arrow {\n    border-right-color: var(--kuc-tooltip-background-color, #000000);\n    border-bottom-color: transparent;\n    width: fit-content;\n    height: fit-content;\n    margin: auto 0;\n    top: 0;\n    bottom: 0;\n    right: 100%;\n    left: auto;\n  }\n  .kuc-tooltip-1-17-1__group .kuc-tooltip-1-17-1__group__title__wrapper {\n    display: flex;\n    align-items: center;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--top > .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper {\n    flex-direction: column-reverse;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--bottom > .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper {\n    flex-direction: column;\n  }\n  .kuc-tooltip-1-17-1__group.kuc-tooltip-1-17-1__group--left > .kuc-tooltip-1-17-1__group__title .kuc-tooltip-1-17-1__group__title__wrapper {\n    flex-direction: row-reverse;\n  }\n'),Fn=e}})();var Wn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let qn;(()=>{if(qn=window.customElements.get("kuc-mobile-button-1-17-1"),!qn){class e extends bi{constructor(e){super(),this.className="",this.id="",this.text="",this.type="normal",this.content="",this.disabled=!1,this.visible=!0;const t=vi(e);Object.assign(this,t)}_handleClickButton(e){e.stopPropagation(),gi(this,"click")}_getButtonColorType(){return"normal"===this.type||"submit"===this.type?this.type:"normal"}render(){return we`
         <button
           type="button"
-          class="kuc-mobile-button-1-17-0__button kuc-mobile-button-1-17-0__button--${this._getButtonColorType()}"
+          class="kuc-mobile-button-1-17-1__button kuc-mobile-button-1-17-1__button--${this._getButtonColorType()}"
           ?disabled="${this.disabled}"
           @click="${this._handleClickButton}"
         >
-          ${this.content?si(this.content):this.text}
+          ${this.content?ai(this.content):this.text}
         </button>
-      `}}Wn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Wn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Wn([Fe({type:String})],e.prototype,"text",void 0),Wn([Fe({type:String})],e.prototype,"type",void 0),Wn([Fe()],e.prototype,"content",void 0),Wn([Fe({type:Boolean})],e.prototype,"disabled",void 0),Wn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),window.customElements.define("kuc-mobile-button-1-17-0",e),mi('\n  kuc-mobile-button-1-17-0,\n  kuc-mobile-button-1-17-0 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-button-1-17-0:lang(zh),\n  kuc-mobile-button-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-button-1-17-0:lang(zh-TW),\n  kuc-mobile-button-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-button-1-17-0 {\n    display: inline-block;\n    vertical-align: top;\n  }\n  kuc-mobile-button-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-mobile-button-1-17-0__button {\n    min-width: var(--kuc-mobile-button-width, 100px);\n    width: var(--kuc-mobile-button-width, auto);\n    height: var(--kuc-mobile-button-height, 42px);\n    padding: 0 12px;\n    user-select: none;\n    font-weight: 700;\n    font-size: var(--kuc-mobile-button-font-size, 14px);\n    line-height: 1;\n    display: grid;\n    align-items: center;\n    align-content: center;\n  }\n  .kuc-mobile-button-1-17-0__button:focus {\n    outline: none;\n  }\n  .kuc-mobile-button-1-17-0__button--submit {\n    border: 2px solid;\n    border-color: var(--kuc-mobile-button-background-color, #206694);\n    background-color: var(--kuc-mobile-button-background-color, #206694);\n    color: var(--kuc-mobile-button-text-color, #ffffff);\n    border-radius: 6px;\n  }\n  .kuc-mobile-button-1-17-0__button--submit:focus {\n    border-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #206694));\n  }\n  .kuc-mobile-button-1-17-0__button--submit:active {\n    border-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #206694));\n  }\n  .kuc-mobile-button-1-17-0__button--submit:disabled {\n    color: #ffffff;\n    border-color: #a5a5a5;\n    background: #a5a5a5;\n  }\n  .kuc-mobile-button-1-17-0__button--normal {\n    border: 2px solid;\n    border-color: var(--kuc-mobile-button-background-color, #206694);\n    background-color: var(--kuc-mobile-button-background-color, #ffffff);\n    color: var(--kuc-mobile-button-text-color, #206694);\n    border-radius: 6px;\n  }\n  .kuc-mobile-button-1-17-0__button--normal:focus {\n    border-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #ffffff));\n  }\n  .kuc-mobile-button-1-17-0__button--normal:active {\n    border-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #ffffff));\n  }\n  .kuc-mobile-button-1-17-0__button--normal:disabled {\n    color: #a5a5a5;\n    border-color: #a5a5a5;\n    background-color: #ffffff;\n    cursor: default;\n  }\n'),qn=e}})();var Kn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Yn extends bi{constructor(){super(...arguments),this.ariaLive="",this.guid="",this.text=""}render(){return $e`
-      ${this.ariaLive&&""!==this.ariaLive?$e`
+      `}}Wn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Wn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Wn([Ge({type:String})],e.prototype,"text",void 0),Wn([Ge({type:String})],e.prototype,"type",void 0),Wn([Ge()],e.prototype,"content",void 0),Wn([Ge({type:Boolean})],e.prototype,"disabled",void 0),Wn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),window.customElements.define("kuc-mobile-button-1-17-1",e),mi('\n  kuc-mobile-button-1-17-1,\n  kuc-mobile-button-1-17-1 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-button-1-17-1:lang(zh),\n  kuc-mobile-button-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-button-1-17-1:lang(zh-TW),\n  kuc-mobile-button-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-button-1-17-1 {\n    display: inline-block;\n    vertical-align: top;\n  }\n  kuc-mobile-button-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-mobile-button-1-17-1__button {\n    min-width: var(--kuc-mobile-button-width, 100px);\n    width: var(--kuc-mobile-button-width, auto);\n    height: var(--kuc-mobile-button-height, 42px);\n    padding: 0 12px;\n    user-select: none;\n    font-weight: 700;\n    font-size: var(--kuc-mobile-button-font-size, 14px);\n    line-height: 1;\n    display: grid;\n    align-items: center;\n    align-content: center;\n  }\n  .kuc-mobile-button-1-17-1__button:focus {\n    outline: none;\n  }\n  .kuc-mobile-button-1-17-1__button--submit {\n    border: 2px solid;\n    border-color: var(--kuc-mobile-button-background-color, #206694);\n    background-color: var(--kuc-mobile-button-background-color, #206694);\n    color: var(--kuc-mobile-button-text-color, #ffffff);\n    border-radius: 6px;\n  }\n  .kuc-mobile-button-1-17-1__button--submit:focus {\n    border-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #206694));\n  }\n  .kuc-mobile-button-1-17-1__button--submit:active {\n    border-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #206694));\n  }\n  .kuc-mobile-button-1-17-1__button--submit:disabled {\n    color: #ffffff;\n    border-color: #a5a5a5;\n    background: #a5a5a5;\n  }\n  .kuc-mobile-button-1-17-1__button--normal {\n    border: 2px solid;\n    border-color: var(--kuc-mobile-button-background-color, #206694);\n    background-color: var(--kuc-mobile-button-background-color, #ffffff);\n    color: var(--kuc-mobile-button-text-color, #206694);\n    border-radius: 6px;\n  }\n  .kuc-mobile-button-1-17-1__button--normal:focus {\n    border-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-focus, var(--kuc-mobile-button-background-color, #ffffff));\n  }\n  .kuc-mobile-button-1-17-1__button--normal:active {\n    border-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #206694));\n    background-color: var(--kuc-mobile-button-background-color-active, var(--kuc-mobile-button-background-color, #ffffff));\n  }\n  .kuc-mobile-button-1-17-1__button--normal:disabled {\n    color: #a5a5a5;\n    border-color: #a5a5a5;\n    background-color: #ffffff;\n    cursor: default;\n  }\n'),qn=e}})();var Kn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Yn extends bi{constructor(){super(...arguments),this.ariaLive="",this.guid="",this.text=""}render(){return we`
+      ${this.ariaLive&&""!==this.ariaLive?we`
             <div
-              class="kuc-base-mobile-error-1-17-0__error"
+              class="kuc-base-mobile-error-1-17-1__error"
               .id="${this.guid}-error"
               role="alert"
               aria-live="${this.ariaLive}"
@@ -1683,9 +1682,9 @@
             >
               ${this.text}
             </div>
-          `:$e`
+          `:we`
             <div
-              class="kuc-base-mobile-error-1-17-0__error"
+              class="kuc-base-mobile-error-1-17-1__error"
               .id="${this.guid}-error"
               role="alert"
               ?hidden="${!this.text}"
@@ -1693,20 +1692,20 @@
               ${this.text}
             </div>
           `}
-    `}}Kn([Fe({type:String})],Yn.prototype,"ariaLive",void 0),Kn([Fe({type:String})],Yn.prototype,"guid",void 0),Kn([Fe({type:String})],Yn.prototype,"text",void 0),window.customElements.get("kuc-base-mobile-error-1-17-0")||(mi('\n  kuc-base-mobile-error-1-17-0 {\n    display: block;\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-base-mobile-error-1-17-0:lang(zh),\n  kuc-base-mobile-error-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-base-mobile-error-1-17-0:lang(zh-TW),\n  kuc-base-mobile-error-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-base-mobile-error-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-base-mobile-error-1-17-0__error {\n    line-height: 1.5;\n    color: #000000;\n    background-color: #fdffc9;\n    border: 1px solid #e5db68;\n    border-radius: 0.4em;\n    padding: 0.4em 1em;\n    margin-top: 0.3em;\n    margin-left: 0.5em;\n  }\n  .kuc-base-mobile-error-1-17-0__error[hidden] {\n    display: none;\n  }\n'),window.customElements.define("kuc-base-mobile-error-1-17-0",Yn));var Jn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Zn extends bi{constructor(){super(...arguments),this.requiredIcon=!1,this.guid="",this.text=""}render(){return $e`
+    `}}Kn([Ge({type:String})],Yn.prototype,"ariaLive",void 0),Kn([Ge({type:String})],Yn.prototype,"guid",void 0),Kn([Ge({type:String})],Yn.prototype,"text",void 0),window.customElements.get("kuc-base-mobile-error-1-17-1")||(mi('\n  kuc-base-mobile-error-1-17-1 {\n    display: block;\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-base-mobile-error-1-17-1:lang(zh),\n  kuc-base-mobile-error-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-base-mobile-error-1-17-1:lang(zh-TW),\n  kuc-base-mobile-error-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-base-mobile-error-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-base-mobile-error-1-17-1__error {\n    line-height: 1.5;\n    color: #000000;\n    background-color: #fdffc9;\n    border: 1px solid #e5db68;\n    border-radius: 0.4em;\n    padding: 0.4em 1em;\n    margin-top: 0.3em;\n    margin-left: 0.5em;\n  }\n  .kuc-base-mobile-error-1-17-1__error[hidden] {\n    display: none;\n  }\n'),window.customElements.define("kuc-base-mobile-error-1-17-1",Yn));var Jn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Zn extends bi{constructor(){super(...arguments),this.requiredIcon=!1,this.guid="",this.text=""}render(){return we`
       ${this._getTextTemplate()}
       <span
-        class="kuc-base-mobile-label-1-17-0__required-icon"
+        class="kuc-base-mobile-label-1-17-1__required-icon"
         ?hidden="${!this.requiredIcon}"
         >*</span
       >
-    `}_getTextTemplate(){return this.guid&&""!==this.guid?$e`
-          <span class="kuc-base-mobile-label-1-17-0__text" .id="${this.guid}-group"
+    `}_getTextTemplate(){return this.guid&&""!==this.guid?we`
+          <span class="kuc-base-mobile-label-1-17-1__text" .id="${this.guid}-group"
             >${this.text}</span
           >
-        `:$e` <span class="kuc-base-mobile-label-1-17-0__text">${this.text}</span> `}}Jn([Fe({type:Boolean})],Zn.prototype,"requiredIcon",void 0),Jn([Fe({type:String})],Zn.prototype,"guid",void 0),Jn([Fe({type:String})],Zn.prototype,"text",void 0),window.customElements.get("kuc-base-mobile-label-1-17-0")||(mi('\n  kuc-base-mobile-label-1-17-0 {\n    display: inline-table;\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-base-mobile-label-1-17-0:lang(zh) ,\n  kuc-base-mobile-label-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-base-mobile-label-1-17-0:lang(zh-TW),\n  kuc-base-mobile-label-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-base-mobile-label-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-base-mobile-label-1-17-0__text {\n    text-shadow: 0 1px 0 #ffffff;\n    color: #888888;\n    white-space: normal;\n    font-size: 86%;\n  }\n  .kuc-base-mobile-label-1-17-0__required-icon {\n    font-size: 86%;\n    position: relative;\n    left: 3px;\n    color: #d01212;\n  }\n  .kuc-base-mobile-label-1-17-0__required-icon[hidden] {\n    display: none;\n  }\n'),window.customElements.define("kuc-base-mobile-label-1-17-0",Zn));var Xn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Qn;(()=>{if(Qn=window.customElements.get("kuc-mobile-checkbox-1-17-0"),!Qn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}_getNewValueMapping(e,t){const i=parseInt(t,10),n=Object.keys(this._valueMapping),o={...this._valueMapping};return n.indexOf(t)>-1?(delete o[i],o):(o[i]=e,o)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.dataset.index||"0",n=t.value,o=this.value?[...this.value]:this.value,a=this._getNewValueMapping(n,i),s=this.items.map((e=>e.value)),r=Object.values(a).filter((e=>s.indexOf(e)>-1));if(r===o)return;const l=Object.keys(a).map((e=>parseInt(e,10)));this.value=r,this.selectedIndex=l,gi(this,"change",{oldValue:o,value:r})}_getCheckboxIconSvgTemplate(e){return Ce`
+        `:we` <span class="kuc-base-mobile-label-1-17-1__text">${this.text}</span> `}}Jn([Ge({type:Boolean})],Zn.prototype,"requiredIcon",void 0),Jn([Ge({type:String})],Zn.prototype,"guid",void 0),Jn([Ge({type:String})],Zn.prototype,"text",void 0),window.customElements.get("kuc-base-mobile-label-1-17-1")||(mi('\n  kuc-base-mobile-label-1-17-1 {\n    display: inline-table;\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-base-mobile-label-1-17-1:lang(zh) ,\n  kuc-base-mobile-label-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-base-mobile-label-1-17-1:lang(zh-TW),\n  kuc-base-mobile-label-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-base-mobile-label-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-base-mobile-label-1-17-1__text {\n    text-shadow: 0 1px 0 #ffffff;\n    color: #888888;\n    white-space: normal;\n    font-size: 86%;\n  }\n  .kuc-base-mobile-label-1-17-1__required-icon {\n    font-size: 86%;\n    position: relative;\n    left: 3px;\n    color: #d01212;\n  }\n  .kuc-base-mobile-label-1-17-1__required-icon[hidden] {\n    display: none;\n  }\n'),window.customElements.define("kuc-base-mobile-label-1-17-1",Zn));var Xn=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Qn;(()=>{if(Qn=window.customElements.get("kuc-mobile-checkbox-1-17-1"),!Qn){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}_getNewValueMapping(e,t){const i=parseInt(t,10),n=Object.keys(this._valueMapping),o={...this._valueMapping};return n.indexOf(t)>-1?(delete o[i],o):(o[i]=e,o)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.dataset.index||"0",n=t.value,o=this.value?[...this.value]:this.value,a=this._getNewValueMapping(n,i),s=this.items.map((e=>e.value)),r=Object.values(a).filter((e=>s.indexOf(e)>-1));if(r===o)return;const l=Object.keys(a).map((e=>parseInt(e,10)));this.value=r,this.selectedIndex=l,gi(this,"change",{oldValue:o,value:r})}_getCheckboxIconSvgTemplate(e){return $e`
        <svg
-         class="kuc-mobile-checkbox-1-17-0__group__select-menu__item__label__icon"
+         class="kuc-mobile-checkbox-1-17-1__group__select-menu__item__label__icon"
          xmlns="http://www.w3.org/2000/svg"
          x="0px"
          y="0px"
@@ -1717,16 +1716,16 @@
          xml:space="preserve">
          <image width="44" height="34" x="0" y="0" href="${this._getSVGStrokeValue(e)}"/>
       </svg>
-       `}_getSVGStrokeValue(e){return e?"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAiCAQAAACOh/P6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN RQfkCQcFITUNIbrXAAADHklEQVRIx63US2sTURQH8P9kmsykQtoMSbStreZRkRBxY3BR7EJwEyuo WQiCmy4EBXHhyi8g4qYfQCjYpRgQBK0GEoUmohYUsURjKz4WrTTNNDYzmUcz42Lymkfz0nN298z9 zeXcM0OgJeLoJxLkhTn14+P5uJJoWR3oy9Kx5xcCl6s4RybuQ2muk60PhXtmWc/xh8GL+0GBnvGu 599D/S9wwetOH51yg4UEt4H+B7jgZVKTkX0oQYUKEcNwttB9wwUvkwpFHOCg1lLEMOgZX43uE9ZY OwTdqgh3g7b12NYGG4yQ4KEYkoUD9nsnfX2NW8HLpAIRG3iLGge2/G32AweiZ1hjCUuWB8vlr6+8 gWRqBetRFljPXmiC4CaZlD+iWjRBAQeWy19bSaMACWiFCW5yKB24MpQueK3ZWHRwORRRLFke23VW hAoQTTYWpZMBFwkRPz4VT3s2zSydDLkEwyTUm8Dp2CZMxKJ0MuiqoAInSPw00Inaa/+gasEK2FnL Xi3km2wdJmJROul3lWrbnLDr6IShrg8R5bXXs5t5sJCa/wpbnT3sYiE3rkHEeIRJab1OmOqtKWjs Z2zFxSYLDGjsIVdRdxoOCsYjxGrlzNPl2AlzvR4yeI1l47K+QsJxbGnMV8Ru45vXUoKKEap8KVCi H0y4tkx1FSpkVHRsTgdTeEdOgSEstvHwU9TZUWrDkt2FaDitHkaBK2ZHThEMTFsV7MCHX5ZsFZKp CXpYhcRzxczoNMFYbWdRtWBVyBa9NZwY1TptY1R0k4CQeXtj84vxyowwoGj02LSNUTqyBCrPn93k vmPbOAlmuAeaRGVx8RbWUYrvGofPCm7QB6dtTHVPdgCCxv6JW4y1NdwFbYfYht0bRlzJSTzHLh04 Yp8wj5gDUlu2DRxGWMlJXPnrK3+ACulbSHdk28JAWMlJkFYz/qAjJDdOS0PuyHaAa7S8mg0EHSEJ KkjQEB69uN2J7QgDYTUnazQVUkCBvftyDuvYac92AbfSzhB7JzOPDZQ7sV3BDXrJkV1+gt/g4kon Vg8TbZ8kMQg7BAjogtXHX2EwhA6/OKOlAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA5LTA3VDA1 OjMzOjUzKzAwOjAwOdR5sgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wOS0wN1QwNTozMzo1Mysw MDowMEiJwQ4AAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAiCAQAAACOh/P6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN RQfkCQcFIRBGJW6QAAACvklEQVRIx6XWQZKbRhSA4Z8GBhACenwC5wZUypXKMlRlmUVcXrtKHMEn meQEUmWfmnHZe65ATpDcIA3MMGKEhBdgGRAaWZqnjarp94H6PTWtNWg0tPEX54fARNzwT72qed8b Ny6weqFzhbO0Fg1rHlf9Ky+CdSw5X3q/O+x4WAro0S+ADSw5T4LQw6LBRFt+5rc9LV7CeokMA1xs bOYE+MvPixfCBpb0ExkGzDDR0bFG9EVwywahzwwDAWiIPf1pcSHcZ/U90NIuHrObv+UF8DTb0hoG utKjd+qgKzSA/R9mirWlN8lCw5Yn9RT9kh4shc6VtJdXUp9ENQzs18fZmkrdR2/Sr4/QC+e1dWuG m3AdVaqeYJ3QS3zp4xxhi+jHdD//215xF84TV17xRJEWI7pl/SSQ8wl2x5a1uu+xvaW4C/3kWl4T IJGhn1jSGLCz0E+k9HC6Bhuyj2nxg0r7o92cj13aDBsXn6BHt6yXSOlhY3QFHrJ59L/KOIA/9tJ0 dGYdbUsD0WOtSbZMs0ipnMcxfDtKE+jMCJBh8K8b2rgn2DzKVM6aYbkNcG496Q7SBOAAQhpJ/cG8 8eT8BFsx7iIBRmSmBmKQJtBx8HklXy2vL2BBwK//raNNumM3umBg4xFwrGTPsV3xflZ5VKbbEa2h Y2Jhoh+w9Ql2324/HaEFYrRIsGNDedd2wjEWxNctZ5o+jB0bylX2VqniGXawCX0PvWPDwyqLFcVB gx2FITtBt2weKwoqts/+sgGcd3Q9SX9j70+yI7giR6ksKu82B/SQPVWJEVxTUaBU9rZcDelz2YNX U03TfuIGd2F29z2fnTgJbaloaCAGd2Gitewf+YfsDHbyiLWlar/EMFvobCjjfJXxcAZ75Oy26+gm 3mIuqrhYZTyexR49FLZ0wyY2/qzSkpKns1jQmrOmf398ARuVc7WA4gOtAAAAJXRFWHRkYXRlOmNy ZWF0ZQAyMDIwLTA5LTA3VDA1OjMzOjE2KzAwOjAw76ZY7wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAy MC0wOS0wN1QwNTozMzoxNiswMDowMJ774FMAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVh ZHlxyWU8AAAAAElFTkSuQmCC"}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return $e`
+       `}_getSVGStrokeValue(e){return e?"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAiCAQAAACOh/P6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN RQfkCQcFITUNIbrXAAADHklEQVRIx63US2sTURQH8P9kmsykQtoMSbStreZRkRBxY3BR7EJwEyuo WQiCmy4EBXHhyi8g4qYfQCjYpRgQBK0GEoUmohYUsURjKz4WrTTNNDYzmUcz42Lymkfz0nN298z9 zeXcM0OgJeLoJxLkhTn14+P5uJJoWR3oy9Kx5xcCl6s4RybuQ2muk60PhXtmWc/xh8GL+0GBnvGu 599D/S9wwetOH51yg4UEt4H+B7jgZVKTkX0oQYUKEcNwttB9wwUvkwpFHOCg1lLEMOgZX43uE9ZY OwTdqgh3g7b12NYGG4yQ4KEYkoUD9nsnfX2NW8HLpAIRG3iLGge2/G32AweiZ1hjCUuWB8vlr6+8 gWRqBetRFljPXmiC4CaZlD+iWjRBAQeWy19bSaMACWiFCW5yKB24MpQueK3ZWHRwORRRLFke23VW hAoQTTYWpZMBFwkRPz4VT3s2zSydDLkEwyTUm8Dp2CZMxKJ0MuiqoAInSPw00Inaa/+gasEK2FnL Xi3km2wdJmJROul3lWrbnLDr6IShrg8R5bXXs5t5sJCa/wpbnT3sYiE3rkHEeIRJab1OmOqtKWjs Z2zFxSYLDGjsIVdRdxoOCsYjxGrlzNPl2AlzvR4yeI1l47K+QsJxbGnMV8Ru45vXUoKKEap8KVCi H0y4tkx1FSpkVHRsTgdTeEdOgSEstvHwU9TZUWrDkt2FaDitHkaBK2ZHThEMTFsV7MCHX5ZsFZKp CXpYhcRzxczoNMFYbWdRtWBVyBa9NZwY1TptY1R0k4CQeXtj84vxyowwoGj02LSNUTqyBCrPn93k vmPbOAlmuAeaRGVx8RbWUYrvGofPCm7QB6dtTHVPdgCCxv6JW4y1NdwFbYfYht0bRlzJSTzHLh04 Yp8wj5gDUlu2DRxGWMlJXPnrK3+ACulbSHdk28JAWMlJkFYz/qAjJDdOS0PuyHaAa7S8mg0EHSEJ KkjQEB69uN2J7QgDYTUnazQVUkCBvftyDuvYac92AbfSzhB7JzOPDZQ7sV3BDXrJkV1+gt/g4kon Vg8TbZ8kMQg7BAjogtXHX2EwhA6/OKOlAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA5LTA3VDA1 OjMzOjUzKzAwOjAwOdR5sgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wOS0wN1QwNTozMzo1Mysw MDowMEiJwQ4AAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAiCAQAAACOh/P6AAAABGdBTUEAALGPC/xhBQAAACBjSFJN AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN RQfkCQcFIRBGJW6QAAACvklEQVRIx6XWQZKbRhSA4Z8GBhACenwC5wZUypXKMlRlmUVcXrtKHMEn meQEUmWfmnHZe65ATpDcIA3MMGKEhBdgGRAaWZqnjarp94H6PTWtNWg0tPEX54fARNzwT72qed8b Ny6weqFzhbO0Fg1rHlf9Ky+CdSw5X3q/O+x4WAro0S+ADSw5T4LQw6LBRFt+5rc9LV7CeokMA1xs bOYE+MvPixfCBpb0ExkGzDDR0bFG9EVwywahzwwDAWiIPf1pcSHcZ/U90NIuHrObv+UF8DTb0hoG utKjd+qgKzSA/R9mirWlN8lCw5Yn9RT9kh4shc6VtJdXUp9ENQzs18fZmkrdR2/Sr4/QC+e1dWuG m3AdVaqeYJ3QS3zp4xxhi+jHdD//215xF84TV17xRJEWI7pl/SSQ8wl2x5a1uu+xvaW4C/3kWl4T IJGhn1jSGLCz0E+k9HC6Bhuyj2nxg0r7o92cj13aDBsXn6BHt6yXSOlhY3QFHrJ59L/KOIA/9tJ0 dGYdbUsD0WOtSbZMs0ipnMcxfDtKE+jMCJBh8K8b2rgn2DzKVM6aYbkNcG496Q7SBOAAQhpJ/cG8 8eT8BFsx7iIBRmSmBmKQJtBx8HklXy2vL2BBwK//raNNumM3umBg4xFwrGTPsV3xflZ5VKbbEa2h Y2Jhoh+w9Ql2324/HaEFYrRIsGNDedd2wjEWxNctZ5o+jB0bylX2VqniGXawCX0PvWPDwyqLFcVB gx2FITtBt2weKwoqts/+sgGcd3Q9SX9j70+yI7giR6ksKu82B/SQPVWJEVxTUaBU9rZcDelz2YNX U03TfuIGd2F29z2fnTgJbaloaCAGd2Gitewf+YfsDHbyiLWlar/EMFvobCjjfJXxcAZ75Oy26+gm 3mIuqrhYZTyexR49FLZ0wyY2/qzSkpKns1jQmrOmf398ARuVc7WA4gOtAAAAJXRFWHRkYXRlOmNy ZWF0ZQAyMDIwLTA5LTA3VDA1OjMzOjE2KzAwOjAw76ZY7wAAACV0RVh0ZGF0ZTptb2RpZnkAMjAy MC0wOS0wN1QwNTozMzoxNiswMDowMJ774FMAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVh ZHlxyWU8AAAAAElFTkSuQmCC"}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return we`
         <label
           for="${this._GUID}-item-${t}"
-          class="kuc-mobile-checkbox-1-17-0__group__select-menu__item${e.disabled?" kuc-mobile-checkbox-1-17-0__group__select-menu__item--disabled":""}"
+          class="kuc-mobile-checkbox-1-17-1__group__select-menu__item${e.disabled?" kuc-mobile-checkbox-1-17-1__group__select-menu__item--disabled":""}"
           ?borderVisible="${this.borderVisible}"
         >
           <input
             type="checkbox"
             id="${this._GUID}-item-${t}"
-            class="kuc-mobile-checkbox-1-17-0__group__select-menu__item__input"
+            class="kuc-mobile-checkbox-1-17-1__group__select-menu__item__input"
             name="${this._GUID}-group"
             data-index="${t}"
             value="${void 0!==e.value?e.value:""}"
@@ -1736,36 +1735,36 @@
             ?disabled="${e.disabled||this.disabled}"
             @change="${this._handleChangeInput}"
           />
-          <div class="kuc-mobile-checkbox-1-17-0__group__select-menu__item__label">
+          <div class="kuc-mobile-checkbox-1-17-1__group__select-menu__item__label">
             ${this._getCheckboxIconSvgTemplate(i)}${void 0===e.label?e.value:e.label}
           </div>
         </label>
-      `}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}render(){return $e`
-        <fieldset class="kuc-mobile-checkbox-1-17-0__group">
+      `}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(st),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(lt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}render(){return we`
+        <fieldset class="kuc-mobile-checkbox-1-17-1__group">
           <legend
-            class="kuc-mobile-checkbox-1-17-0__group__label"
+            class="kuc-mobile-checkbox-1-17-1__group__label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-mobile-label-1-17-0
+            <kuc-base-mobile-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-mobile-label-1-17-0>
+            ></kuc-base-mobile-label-1-17-1>
           </legend>
           <div
-            class="kuc-mobile-checkbox-1-17-0__group__select-menu ${this.requiredIcon?"kuc-mobile-checkbox-1-17-0__group__select-menu--required":""}"
+            class="kuc-mobile-checkbox-1-17-1__group__select-menu ${this.requiredIcon?"kuc-mobile-checkbox-1-17-1__group__select-menu--required":""}"
             ?borderVisible="${this.borderVisible}"
             ?disabled="${this.disabled}"
           >
             ${this.items.map(((e,t)=>this._getItemTemplate(e,t)))}
           </div>
-          <kuc-base-mobile-error-1-17-0
+          <kuc-base-mobile-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ariaLive="assertive"
           >
-          </kuc-base-mobile-error-1-17-0>
+          </kuc-base-mobile-error-1-17-1>
         </fieldset>
-      `}updated(){this._inputEls.forEach((e=>{e.checked=this.value.indexOf(e.value)>-1}))}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}}Xn([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Xn([Fe({type:String})],e.prototype,"error",void 0),Xn([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Xn([Fe({type:String})],e.prototype,"label",void 0),Xn([Fe({type:Boolean})],e.prototype,"borderVisible",void 0),Xn([Fe({type:Boolean})],e.prototype,"disabled",void 0),Xn([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Xn([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Xn([Fe({type:Array})],e.prototype,"items",void 0),Xn([Fe({type:Array})],e.prototype,"selectedIndex",void 0),Xn([Fe({type:Array})],e.prototype,"value",void 0),Xn([Je(".kuc-mobile-checkbox-1-17-0__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),Xn([We()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-mobile-checkbox-1-17-0",e),mi('\n  kuc-mobile-checkbox-1-17-0,\n  kuc-mobile-checkbox-1-17-0 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-checkbox-1-17-0:lang(zh),\n  kuc-mobile-checkbox-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-checkbox-1-17-0:lang(zh-TW),\n  kuc-mobile-checkbox-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-checkbox-1-17-0 {\n    width: 100%;\n    display: inline-block;\n  }\n  kuc-mobile-checkbox-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-mobile-checkbox-1-17-0__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    box-sizing: border-box;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__label[hidden] {\n    display: none;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__label__text {\n    text-shadow: 0 1px 0 #ffffff;\n    color: #888888;\n    white-space: normal;\n    font-size: inherit;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__label__required-icon {\n    position: relative;\n    left: 3px;\n    color: #d01212;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__label__required-icon[hidden] {\n    display: none;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu {\n    margin-left: 0.5em;\n    margin-right: 0.5em;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu[bordervisible] {\n    border-color: #b3b3b3;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu[disabled],\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item--disabled {\n    background-color: #d5d7d9;\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu--required[bordervisible] {\n    border-color: #cf4a38;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item[bordervisible] {\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    height: 30px;\n    display: block;\n    border-bottom: 1px solid #b3b3b3;\n    padding: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item {\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    height: 30px;\n    display: block;\n    padding: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item:last-child {\n    border-bottom: 0px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu[bordervisible]\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item:first-child {\n    border-top-left-radius: 7px;\n    border-top-right-radius: 7px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu[bordervisible]\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item:last-child {\n    border-bottom-left-radius: 7px;\n    border-bottom-right-radius: 7px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item__input[disabled]\n    + .kuc-mobile-checkbox-1-17-0__group__select-menu__item__label {\n    background-color: #d5d7d9;\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item__label {\n    position: relative;\n    margin: -7px 0px 0px 34px;\n    display: inline-block;\n    vertical-align: middle;\n    white-space: nowrap;\n    padding: 11px 13px 13px 0px;\n    font-size: 14.04px;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__select-menu__item__label__icon {\n    position: absolute;\n    top: 50%;\n    left: -30px;\n    margin-top: -13px;\n    box-sizing: border-box;\n    width: 22px;\n    height: 22px;\n    background-size: 22px 17px;\n    content: "";\n  }\n  .kuc-mobile-checkbox-1-17-0__group__error {\n    line-height: 1.5;\n    border: 1px solid #e5db68;\n    background-color: #fdffc9;\n    margin-top: 0.3em;\n    margin-left: 0.5em;\n    padding: 0.4em 1em;\n    border-radius: 0.4em;\n    color: #000000;\n  }\n  .kuc-mobile-checkbox-1-17-0__group__error[hidden] {\n    display: none;\n  }\n'),Qn=e}})();var eo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let to;(()=>{if(to=window.customElements.get("kuc-mobile-dropdown-1-17-0"),!to){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.selectedIndex=-1,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._hasValueInItems=!1,this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.value;if(this.value===i&&this.selectedIndex===t.selectedIndex)return;const n={oldValue:this.value,value:i};this.value=i,this.selectedIndex=t.selectedIndex,gi(this,"change",n)}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(lt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(ut),1))}willUpdate(e){if((e.has("items")||e.has("value"))&&(this._hasValueInItems=this.items.some((e=>e.value===this.value))),e.has("value")){if(""!==this.value||this._hasValueInItems)return;this.selectedIndex=-1}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}_getSelectedIndex(){if(!this.value&&!this._hasValueInItems)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return $e`
+      `}updated(){this._inputEls.forEach((e=>{e.checked=this.value.indexOf(e.value)>-1}))}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}}Xn([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Xn([Ge({type:String})],e.prototype,"error",void 0),Xn([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Xn([Ge({type:String})],e.prototype,"label",void 0),Xn([Ge({type:Boolean})],e.prototype,"borderVisible",void 0),Xn([Ge({type:Boolean})],e.prototype,"disabled",void 0),Xn([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Xn([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Xn([Ge({type:Array})],e.prototype,"items",void 0),Xn([Ge({type:Array})],e.prototype,"selectedIndex",void 0),Xn([Ge({type:Array})],e.prototype,"value",void 0),Xn([Ye(".kuc-mobile-checkbox-1-17-1__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),Xn([Fe()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-mobile-checkbox-1-17-1",e),mi('\n  kuc-mobile-checkbox-1-17-1,\n  kuc-mobile-checkbox-1-17-1 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-checkbox-1-17-1:lang(zh),\n  kuc-mobile-checkbox-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-checkbox-1-17-1:lang(zh-TW),\n  kuc-mobile-checkbox-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-checkbox-1-17-1 {\n    width: 100%;\n    display: inline-block;\n  }\n  kuc-mobile-checkbox-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-mobile-checkbox-1-17-1__group {\n    border: none;\n    padding: 0px;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    box-sizing: border-box;\n    margin-inline-start: 0px;\n    margin-inline-end: 0px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__label[hidden] {\n    display: none;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__label__text {\n    text-shadow: 0 1px 0 #ffffff;\n    color: #888888;\n    white-space: normal;\n    font-size: inherit;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__label__required-icon {\n    position: relative;\n    left: 3px;\n    color: #d01212;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__label__required-icon[hidden] {\n    display: none;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu {\n    margin-left: 0.5em;\n    margin-right: 0.5em;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu[bordervisible] {\n    border-color: #b3b3b3;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu[disabled],\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item--disabled {\n    background-color: #d5d7d9;\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu--required[bordervisible] {\n    border-color: #cf4a38;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item[bordervisible] {\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    height: 30px;\n    display: block;\n    border-bottom: 1px solid #b3b3b3;\n    padding: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item {\n    padding: 4px;\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    height: 30px;\n    display: block;\n    padding: 8px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item:last-child {\n    border-bottom: 0px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu[bordervisible]\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item:first-child {\n    border-top-left-radius: 7px;\n    border-top-right-radius: 7px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu[bordervisible]\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item:last-child {\n    border-bottom-left-radius: 7px;\n    border-bottom-right-radius: 7px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item__input[disabled]\n    + .kuc-mobile-checkbox-1-17-1__group__select-menu__item__label {\n    background-color: #d5d7d9;\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item__label {\n    position: relative;\n    margin: -7px 0px 0px 34px;\n    display: inline-block;\n    vertical-align: middle;\n    white-space: nowrap;\n    padding: 11px 13px 13px 0px;\n    font-size: 14.04px;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__select-menu__item__label__icon {\n    position: absolute;\n    top: 50%;\n    left: -30px;\n    margin-top: -13px;\n    box-sizing: border-box;\n    width: 22px;\n    height: 22px;\n    background-size: 22px 17px;\n    content: "";\n  }\n  .kuc-mobile-checkbox-1-17-1__group__error {\n    line-height: 1.5;\n    border: 1px solid #e5db68;\n    background-color: #fdffc9;\n    margin-top: 0.3em;\n    margin-left: 0.5em;\n    padding: 0.4em 1em;\n    border-radius: 0.4em;\n    color: #000000;\n  }\n  .kuc-mobile-checkbox-1-17-1__group__error[hidden] {\n    display: none;\n  }\n'),Qn=e}})();var eo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let to;(()=>{if(to=window.customElements.get("kuc-mobile-dropdown-1-17-1"),!to){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.selectedIndex=-1,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._hasValueInItems=!1,this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.value;if(this.value===i&&this.selectedIndex===t.selectedIndex)return;const n={oldValue:this.value,value:i};this.value=i,this.selectedIndex=t.selectedIndex,gi(this,"change",n)}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}willUpdate(e){if((e.has("items")||e.has("value"))&&(this._hasValueInItems=this.items.some((e=>e.value===this.value))),e.has("value")){if(""!==this.value||this._hasValueInItems)return;this.selectedIndex=-1}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}_getSelectedIndex(){if(!this.value&&!this._hasValueInItems)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return we`
         <option
           value="${e.value||""}"
           ?selected="${i}"
@@ -1773,24 +1772,24 @@
         >
           ${void 0===e.label?e.value:e.label}
         </option>
-      `}render(){return $e`
+      `}render(){return we`
         <label
-          class="kuc-mobile-dropdown-1-17-0__label"
+          class="kuc-mobile-dropdown-1-17-1__label"
           for="${this._GUID}-label"
           ?hidden="${!this.label}"
         >
-          <kuc-base-mobile-label-1-17-0
+          <kuc-base-mobile-label-1-17-1
             .text="${this.label}"
             .requiredIcon="${this.requiredIcon}"
-          ></kuc-base-mobile-label-1-17-0>
+          ></kuc-base-mobile-label-1-17-1>
         </label>
-        <div class="kuc-mobile-dropdown-1-17-0__input-form">
+        <div class="kuc-mobile-dropdown-1-17-1__input-form">
           <div
-            class="kuc-mobile-dropdown-1-17-0__input-form__select
+            class="kuc-mobile-dropdown-1-17-1__input-form__select
             ${this.requiredIcon?"kuc--required":""}"
           >
             <select
-              class="kuc-mobile-dropdown-1-17-0__input-form__select__input"
+              class="kuc-mobile-dropdown-1-17-1__input-form__select__input"
               id="${this._GUID}-label"
               aria-describedby="${this._GUID}-error"
               aria-required="${this.requiredIcon}"
@@ -1802,13 +1801,13 @@
             </select>
           </div>
         </div>
-        <kuc-base-mobile-error-1-17-0
+        <kuc-base-mobile-error-1-17-1
           .text="${this.error}"
           .guid="${this._GUID}"
           ariaLive="assertive"
         >
-        </kuc-base-mobile-error-1-17-0>
-      `}updated(e){e.has("selectedIndex")&&(this._selectEl.selectedIndex=this.selectedIndex),super.update(e)}}eo([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),eo([Fe({type:String})],e.prototype,"error",void 0),eo([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),eo([Fe({type:String})],e.prototype,"label",void 0),eo([Fe({type:String})],e.prototype,"value",void 0),eo([Fe({type:Number})],e.prototype,"selectedIndex",void 0),eo([Fe({type:Boolean})],e.prototype,"disabled",void 0),eo([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),eo([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),eo([Fe({type:Array})],e.prototype,"items",void 0),eo([Ke(".kuc-mobile-dropdown-1-17-0__input-form__select__input")],e.prototype,"_selectEl",void 0),window.customElements.define("kuc-mobile-dropdown-1-17-0",e),mi('\n  kuc-mobile-dropdown-1-17-0,\n  kuc-mobile-dropdown-1-17-0 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-dropdown-1-17-0:lang(zh),\n  kuc-mobile-dropdown-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-dropdown-1-17-0:lang(zh-TW),\n  kuc-mobile-dropdown-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-dropdown-1-17-0 {\n    display: inline-block;\n    width: 100%;\n  }\n\n  kuc-mobile-dropdown-1-17-0[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__label[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__input-form {\n    word-wrap: break-word;\n    min-height: 1em;\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__input-form__select {\n    display: inline-block;\n    border-radius: 0.4em;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__input-form__select.kuc--required {\n    border: 1px solid #cf4a38;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__input-form__select__input {\n    min-width: 100px;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-dropdown-1-17-0__input-form__select__input:disabled {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n'),to=e}})();var io=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let no;(()=>{if(no=window.customElements.get("kuc-mobile-multi-choice-1-17-0"),!no){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=this.value?[...this.value]:this.value,n=Array.from(t.selectedOptions,(e=>e.value)),o=Array.from(t.selectedOptions,(e=>e.dataset.index)),a={value:n,oldValue:i};this.value=n,this.selectedIndex=o.map((e=>e?parseInt(e,10):0)),gi(this,"change",a)}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return $e`
+        </kuc-base-mobile-error-1-17-1>
+      `}updated(e){e.has("selectedIndex")&&(this._selectEl.selectedIndex=this.selectedIndex),super.update(e)}}eo([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),eo([Ge({type:String})],e.prototype,"error",void 0),eo([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),eo([Ge({type:String})],e.prototype,"label",void 0),eo([Ge({type:String})],e.prototype,"value",void 0),eo([Ge({type:Number})],e.prototype,"selectedIndex",void 0),eo([Ge({type:Boolean})],e.prototype,"disabled",void 0),eo([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),eo([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),eo([Ge({type:Array})],e.prototype,"items",void 0),eo([qe(".kuc-mobile-dropdown-1-17-1__input-form__select__input")],e.prototype,"_selectEl",void 0),window.customElements.define("kuc-mobile-dropdown-1-17-1",e),mi('\n  kuc-mobile-dropdown-1-17-1,\n  kuc-mobile-dropdown-1-17-1 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-dropdown-1-17-1:lang(zh),\n  kuc-mobile-dropdown-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-dropdown-1-17-1:lang(zh-TW),\n  kuc-mobile-dropdown-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-dropdown-1-17-1 {\n    display: inline-block;\n    width: 100%;\n  }\n\n  kuc-mobile-dropdown-1-17-1[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__label[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__input-form {\n    word-wrap: break-word;\n    min-height: 1em;\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__input-form__select {\n    display: inline-block;\n    border-radius: 0.4em;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__input-form__select.kuc--required {\n    border: 1px solid #cf4a38;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__input-form__select__input {\n    min-width: 100px;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-dropdown-1-17-1__input-form__select__input:disabled {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n'),to=e}})();var io=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let no;(()=>{if(no=window.customElements.get("kuc-mobile-multi-choice-1-17-1"),!no){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this.selectedIndex=[],this.value=[],this._valueMapping={},this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){const t="value"in e,i="selectedIndex"in e,n=e.selectedIndex||[];if(!t&&i){if(!Ti(n))return;const t=this._getValueMapping(e);this.value=this._getValidValue(t,n)}}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=this.value?[...this.value]:this.value,n=Array.from(t.selectedOptions,(e=>e.value)),o=Array.from(t.selectedOptions,(e=>e.dataset.index)),a={value:n,oldValue:i};this.value=n,this.selectedIndex=o.map((e=>e?parseInt(e,10):0)),gi(this,"change",a)}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!Ti(this.value)?(this.throwErrorAfterUpdateComplete(st),!1):!(e.has("selectedIndex")&&!Ti(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(lt),1))}willUpdate(e){if(e.has("value")){if(this.value.length>0)return;this.selectedIndex=[]}}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this._valueMapping=this._getValueMapping({items:this.items,value:this.value,selectedIndex:this.selectedIndex}),this._setValueAndSelectedIndex()),super.update(e)}_getValueMapping(e){const t=e.items||[],i=e.value||[],n=e.selectedIndex||[],o=t.map((e=>e.value||"")),a=Object.assign({},o),s={};if(0===i.length){const e=this._getValidValue(a,n);return n.forEach(((t,i)=>s[t]=e[i])),s}return this._getValidSelectedIndex(a).forEach(((e,t)=>s[e]=i[t])),s}_getValidValue(e,t){return t.filter((t=>e[t])).map((t=>e[t]))}_getValidSelectedIndex(e){const t=[];for(let i=0;i<this.value.length;i++){const n=this.selectedIndex[i];if(e[n]===this.value[i]){t.push(n);continue}const o=this.items.findIndex((e=>e.value===this.value[i]));t.push(o)}return t}_setValueAndSelectedIndex(){this.value=Object.values(this._valueMapping),this.selectedIndex=Object.keys(this._valueMapping).map((e=>parseInt(e,10)))}_isCheckedItem(e,t){const i=Object.values(this._valueMapping),n=Object.keys(this._valueMapping);return i.filter(((i,o)=>i===e.value&&t===parseInt(n[o],10))).length>0}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return we`
         <option
           value="${e.value||""}"
           data-index="${t}"
@@ -1817,24 +1816,24 @@
         >
           ${void 0===e.label?e.value:e.label}
         </option>
-      `}render(){return $e`
+      `}render(){return we`
         <label
-          class="kuc-mobile-multi-choice-1-17-0__label"
+          class="kuc-mobile-multi-choice-1-17-1__label"
           for="${this._GUID}-label"
           ?hidden="${!this.label}"
         >
-          <kuc-base-mobile-label-1-17-0
+          <kuc-base-mobile-label-1-17-1
             .text="${this.label}"
             .requiredIcon="${this.requiredIcon}"
-          ></kuc-base-mobile-label-1-17-0>
+          ></kuc-base-mobile-label-1-17-1>
         </label>
-        <div class="kuc-mobile-multi-choice-1-17-0__input-form">
+        <div class="kuc-mobile-multi-choice-1-17-1__input-form">
           <div
-            class="kuc-mobile-multi-choice-1-17-0__input-form__select
+            class="kuc-mobile-multi-choice-1-17-1__input-form__select
             ${this.requiredIcon?"kuc--required":""}"
           >
             <select
-              class="kuc-mobile-multi-choice-1-17-0__input-form__select__input"
+              class="kuc-mobile-multi-choice-1-17-1__input-form__select__input"
               id="${this._GUID}-label"
               aria-describedby="${this._GUID}-error"
               aria-required="${this.requiredIcon}"
@@ -1847,15 +1846,15 @@
             </select>
           </div>
         </div>
-        <kuc-base-mobile-error-1-17-0
+        <kuc-base-mobile-error-1-17-1
           .text="${this.error}"
           .guid="${this._GUID}"
           ariaLive="assertive"
         >
-        </kuc-base-mobile-error-1-17-0>
-      `}}io([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),io([Fe({type:String})],e.prototype,"error",void 0),io([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),io([Fe({type:String})],e.prototype,"label",void 0),io([Fe({type:Boolean})],e.prototype,"disabled",void 0),io([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),io([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),io([Fe({type:Array})],e.prototype,"items",void 0),io([Fe({type:Array})],e.prototype,"selectedIndex",void 0),io([Fe({type:Array})],e.prototype,"value",void 0),io([We()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-mobile-multi-choice-1-17-0",e),mi('\n  kuc-mobile-multi-choice-1-17-0,\n  kuc-mobile-multi-choice-1-17-0 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n\n  kuc-mobile-multi-choice-1-17-0:lang(zh),\n  kuc-mobile-multi-choice-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-multi-choice-1-17-0:lang(zh-TW),\n  kuc-mobile-multi-choice-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-multi-choice-1-17-0 {\n    display: inline-block;\n    width: 100%;\n  }\n\n  kuc-mobile-multi-choice-1-17-0[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__label[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form {\n    word-wrap: break-word;\n    min-height: 1em;\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select {\n    display: inline-block;\n    border-radius: 0.4em;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select.kuc--required {\n    border: 1px solid #cf4a38;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select__input {\n    min-width: 100px;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select__input:disabled {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select__input option:disabled {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select__input option:disabled[selected] {\n    background-color: #cecece; /* Chrome */\n    background-color: -moz-cellhighlight; /* Firefox */\n    opacity: 1;\n  }\n\n  .kuc-mobile-multi-choice-1-17-0__input-form__select__input:disabled option {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n  }\n'),no=e}})();var oo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let ao;(()=>{if(ao=window.customElements.get("kuc-mobile-radio-button-1-17-0"),!ao){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.selectedIndex=-1,this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}willUpdate(e){if(e.has("value")){if(""!==this.value)return;this.selectedIndex=-1}}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.value,n=t.dataset.index||"0",o=parseInt(n,10);if(this.value===i&&this.selectedIndex===o)return;const a={oldValue:this.value,value:i};this.value=i,this.selectedIndex=o,gi(this,"change",a)}_getRadioIconSvgTemplate(e,t){return Ce`
+        </kuc-base-mobile-error-1-17-1>
+      `}}io([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),io([Ge({type:String})],e.prototype,"error",void 0),io([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),io([Ge({type:String})],e.prototype,"label",void 0),io([Ge({type:Boolean})],e.prototype,"disabled",void 0),io([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),io([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),io([Ge({type:Array})],e.prototype,"items",void 0),io([Ge({type:Array})],e.prototype,"selectedIndex",void 0),io([Ge({type:Array})],e.prototype,"value",void 0),io([Fe()],e.prototype,"_valueMapping",void 0),window.customElements.define("kuc-mobile-multi-choice-1-17-1",e),mi('\n  kuc-mobile-multi-choice-1-17-1,\n  kuc-mobile-multi-choice-1-17-1 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n\n  kuc-mobile-multi-choice-1-17-1:lang(zh),\n  kuc-mobile-multi-choice-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-multi-choice-1-17-1:lang(zh-TW),\n  kuc-mobile-multi-choice-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-multi-choice-1-17-1 {\n    display: inline-block;\n    width: 100%;\n  }\n\n  kuc-mobile-multi-choice-1-17-1[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__label[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form {\n    word-wrap: break-word;\n    min-height: 1em;\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select {\n    display: inline-block;\n    border-radius: 0.4em;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select.kuc--required {\n    border: 1px solid #cf4a38;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select__input {\n    min-width: 100px;\n    max-width: 100%;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select__input:disabled {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select__input option:disabled {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select__input option:disabled[selected] {\n    background-color: #cecece; /* Chrome */\n    background-color: -moz-cellhighlight; /* Firefox */\n    opacity: 1;\n  }\n\n  .kuc-mobile-multi-choice-1-17-1__input-form__select__input:disabled option {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n  }\n'),no=e}})();var oo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let ao;(()=>{if(ao=window.customElements.get("kuc-mobile-radio-button-1-17-1"),!ao){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.value="",this.selectedIndex=-1,this.borderVisible=!0,this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this.items=[],this._GUID=fi();const t=vi(e);this._setInitialValue(t),Object.assign(this,t)}_setInitialValue(e){!("value"in e)&&"selectedIndex"in e&&(this.value=this._getValue(e)||"")}willUpdate(e){if(e.has("value")){if(""!==this.value)return;this.selectedIndex=-1}}_handleChangeInput(e){e.stopPropagation();const t=e.target,i=t.value,n=t.dataset.index||"0",o=parseInt(n,10);if(this.value===i&&this.selectedIndex===o)return;const a={oldValue:this.value,value:i};this.value=i,this.selectedIndex=o,gi(this,"change",a)}_getRadioIconSvgTemplate(e,t){return $e`
       <svg
-        class="kuc-mobile-radio-button-1-17-0__group__select-menu__item__label__icon"
+        class="kuc-mobile-radio-button-1-17-1__group__select-menu__item__label__icon"
         width="21"
         height="21"
         viewBox="0 0 21 21"
@@ -1877,18 +1876,18 @@
           cy="10.5"
           r="10.15"
           stroke="#bbbbbb" stroke-width="1"/>
-        ${t?Ce`<circle cx="10.5" cy="10.5" r="6.5" fill="${"#5b5b5b"}"/>`:""}
+        ${t?$e`<circle cx="10.5" cy="10.5" r="6.5" fill="${"#5b5b5b"}"/>`:""}
       </svg>
-    `}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return $e`
+    `}_isCheckedItem(e,t){return this.value?e.value===this.value&&this.selectedIndex===t:this.selectedIndex===t}_getItemTemplate(e,t){const i=this._isCheckedItem(e,t);return we`
         <div
-          class="kuc-mobile-radio-button-1-17-0__group__select-menu__item${e.disabled?" kuc-mobile-radio-button-1-17-0__group__select-menu__item--disabled":""}"
+          class="kuc-mobile-radio-button-1-17-1__group__select-menu__item${e.disabled?" kuc-mobile-radio-button-1-17-1__group__select-menu__item--disabled":""}"
         >
           <input
             type="radio"
             aria-describedby="${this._GUID}-error"
             id="${this._GUID}-item-${t}"
             data-index="${t}"
-            class="kuc-mobile-radio-button-1-17-0__group__select-menu__item__input"
+            class="kuc-mobile-radio-button-1-17-1__group__select-menu__item__input"
             name="${this._GUID}-group"
             value="${void 0!==e.value?e.value:""}"
             aria-invalid="${""!==this.error}"
@@ -1897,60 +1896,60 @@
             @change="${this._handleChangeInput}"
           />
           <label
-            class="kuc-mobile-radio-button-1-17-0__group__select-menu__item__label"
+            class="kuc-mobile-radio-button-1-17-1__group__select-menu__item__label"
             for="${this._GUID}-item-${t}"
             >${this._getRadioIconSvgTemplate(this.disabled,i)}
             <div
-              class="kuc-mobile-radio-button-1-17-0__group__select-menu__item__label__value"
+              class="kuc-mobile-radio-button-1-17-1__group__select-menu__item__label__value"
             >
               ${void 0===e.label?e.value:e.label}
             </div>
           </label>
         </div>
-      `}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(nt),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(lt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(ut),1))}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}render(){return $e`
-        <div class="kuc-mobile-radio-button-1-17-0__group">
+      `}shouldUpdate(e){return e.has("items")&&!Ti(this.items)?(this.throwErrorAfterUpdateComplete(it),!1):e.has("value")&&!$i(this.value)?(this.throwErrorAfterUpdateComplete(rt),!1):!(e.has("selectedIndex")&&!Si(this.selectedIndex)&&(this.throwErrorAfterUpdateComplete(dt),1))}update(e){(e.has("items")||e.has("value")||e.has("selectedIndex"))&&(this.selectedIndex=this._getSelectedIndex(),this.value=this._getValue({items:this.items,selectedIndex:this.selectedIndex})||""),super.update(e)}render(){return we`
+        <div class="kuc-mobile-radio-button-1-17-1__group">
           <div
-            class="kuc-mobile-radio-button-1-17-0__group__label"
+            class="kuc-mobile-radio-button-1-17-1__group__label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-mobile-label-1-17-0
+            <kuc-base-mobile-label-1-17-1
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-mobile-label-1-17-0>
+            ></kuc-base-mobile-label-1-17-1>
           </div>
           <div
-            class="kuc-mobile-radio-button-1-17-0__group__select-menu"
+            class="kuc-mobile-radio-button-1-17-1__group__select-menu"
             ?borderVisible="${this.borderVisible}"
             ?disabled="${this.disabled}"
           >
             ${this.items.map(((e,t)=>this._getItemTemplate(e,t)))}
           </div>
-          <kuc-base-mobile-error-1-17-0
+          <kuc-base-mobile-error-1-17-1
             .text="${this.error}"
             .guid="${this._GUID}"
             ariaLive="assertive"
           >
-          </kuc-base-mobile-error-1-17-0>
+          </kuc-base-mobile-error-1-17-1>
         </div>
-      `}updated(){this._inputEls.forEach(((e,t)=>{e.checked=this.value===e.value&&t===this.selectedIndex}))}_getSelectedIndex(){if(!this.value)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}}oo([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),oo([Fe({type:String})],e.prototype,"error",void 0),oo([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),oo([Fe({type:String})],e.prototype,"label",void 0),oo([Fe({type:String})],e.prototype,"value",void 0),oo([Fe({type:Number})],e.prototype,"selectedIndex",void 0),oo([Fe({type:Boolean})],e.prototype,"borderVisible",void 0),oo([Fe({type:Boolean})],e.prototype,"disabled",void 0),oo([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),oo([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),oo([Fe({type:Array})],e.prototype,"items",void 0),oo([Je(".kuc-mobile-radio-button-1-17-0__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),window.customElements.define("kuc-mobile-radio-button-1-17-0",e),mi('\n  kuc-mobile-radio-button-1-17-0,\n  kuc-mobile-radio-button-1-17-0 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n\n  kuc-mobile-radio-button-1-17-0:lang(zh) ,\n  kuc-mobile-radio-button-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-radio-button-1-17-0:lang(zh-TW),\n  kuc-mobile-radio-button-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-radio-button-1-17-0 {\n    width: 100%;\n    display: inline-block;\n  }\n\n  kuc-mobile-radio-button-1-17-0[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group {\n    border: none;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    vertical-align: top;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__label[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu {\n    margin-right: 0.5em;\n    margin-left: 0.5em;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu[bordervisible] {\n    border-color: #b3b3b3;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 0.4em;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item {\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    height: 45px;\n    display: block;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu[bordervisible]\n    .kuc-mobile-radio-button-1-17-0__group__select-menu__item {\n    border-bottom: 1px solid #b3b3b3;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu[bordervisible]\n    .kuc-mobile-radio-button-1-17-0__group__select-menu__item:last-child {\n    border-bottom: 0px;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item__label__icon {\n    position: absolute;\n    top: 50%;\n    box-sizing: border-box;\n    margin-top: -11px;\n    width: 21px;\n    height: 21px;\n    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;\n    content: "";\n    border-radius: 9px;\n    left: 8px;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item__label__value {\n    height: 45px;\n    line-height: 45px;\n    padding-left: 35px;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu[disabled], \n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item--disabled {\n    background-color: #d5d7d9;\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n  .kuc-mobile-radio-button-1-17-0__group__select-menu[bordervisible]\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item--disabled:last-child {\n    border-bottom-left-radius: 0.3em;\n    border-bottom-right-radius: 0.3em;\n  }\n  .kuc-mobile-radio-button-1-17-0__group__select-menu[bordervisible]\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item--disabled:first-child {\n    border-top-left-radius: 0.3em;\n    border-top-right-radius: 0.3em;\n  }\n\n  .kuc-mobile-radio-button-1-17-0__group__select-menu__item__label {\n    position: absolute;\n    white-space: nowrap;\n    width: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 100%;\n    padding: 0px;\n  }\n'),ao=e}})();var so=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let ro;(()=>{if(ro=window.customElements.get("kuc-mobile-text-1-17-0"),!ro){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.prefix="",this.suffix="",this.textAlign="left",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusInput(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputText(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}render(){return $e`
+      `}updated(){this._inputEls.forEach(((e,t)=>{e.checked=this.value===e.value&&t===this.selectedIndex}))}_getSelectedIndex(){if(!this.value)return this.items[this.selectedIndex]?this.selectedIndex:-1;const e=this.items.findIndex((e=>e.value===this.value));if(-1===e)return-1;const t=this.items.findIndex(((e,t)=>e.value===this.value&&t===this.selectedIndex));return t>-1?t:e}_getValue(e){const t=(e.items||[])[0===e.selectedIndex||e.selectedIndex?e.selectedIndex:-1];return t?t.value:""}}oo([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),oo([Ge({type:String})],e.prototype,"error",void 0),oo([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),oo([Ge({type:String})],e.prototype,"label",void 0),oo([Ge({type:String})],e.prototype,"value",void 0),oo([Ge({type:Number})],e.prototype,"selectedIndex",void 0),oo([Ge({type:Boolean})],e.prototype,"borderVisible",void 0),oo([Ge({type:Boolean})],e.prototype,"disabled",void 0),oo([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),oo([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),oo([Ge({type:Array})],e.prototype,"items",void 0),oo([Ye(".kuc-mobile-radio-button-1-17-1__group__select-menu__item__input")],e.prototype,"_inputEls",void 0),window.customElements.define("kuc-mobile-radio-button-1-17-1",e),mi('\n  kuc-mobile-radio-button-1-17-1,\n  kuc-mobile-radio-button-1-17-1 * {\n    font-size: 13px;\n    color: #333333;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n\n  kuc-mobile-radio-button-1-17-1:lang(zh) ,\n  kuc-mobile-radio-button-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-radio-button-1-17-1:lang(zh-TW),\n  kuc-mobile-radio-button-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-radio-button-1-17-1 {\n    width: 100%;\n    display: inline-block;\n  }\n\n  kuc-mobile-radio-button-1-17-1[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group {\n    border: none;\n    height: auto;\n    display: inline-block;\n    width: 100%;\n    vertical-align: top;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__label {\n    display: inline-block;\n    font-size: 86%;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__label[hidden] {\n    display: none;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu {\n    margin-right: 0.5em;\n    margin-left: 0.5em;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu[bordervisible] {\n    border-color: #b3b3b3;\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 0.4em;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item {\n    border: 1px solid transparent;\n    position: relative;\n    white-space: normal;\n    word-wrap: normal;\n    height: 45px;\n    display: block;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu[bordervisible]\n    .kuc-mobile-radio-button-1-17-1__group__select-menu__item {\n    border-bottom: 1px solid #b3b3b3;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu[bordervisible]\n    .kuc-mobile-radio-button-1-17-1__group__select-menu__item:last-child {\n    border-bottom: 0px;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item__input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item__label__icon {\n    position: absolute;\n    top: 50%;\n    box-sizing: border-box;\n    margin-top: -11px;\n    width: 21px;\n    height: 21px;\n    box-shadow: 1px 1px 3px #f5f5f5 inset, -1px -1px 3px #f5f5f5 inset;\n    content: "";\n    border-radius: 9px;\n    left: 8px;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item__label__value {\n    height: 45px;\n    line-height: 45px;\n    padding-left: 35px;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu[disabled], \n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item--disabled {\n    background-color: #d5d7d9;\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n  .kuc-mobile-radio-button-1-17-1__group__select-menu[bordervisible]\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item--disabled:last-child {\n    border-bottom-left-radius: 0.3em;\n    border-bottom-right-radius: 0.3em;\n  }\n  .kuc-mobile-radio-button-1-17-1__group__select-menu[bordervisible]\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item--disabled:first-child {\n    border-top-left-radius: 0.3em;\n    border-top-right-radius: 0.3em;\n  }\n\n  .kuc-mobile-radio-button-1-17-1__group__select-menu__item__label {\n    position: absolute;\n    white-space: nowrap;\n    width: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 100%;\n    padding: 0px;\n  }\n'),ao=e}})();var so=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let ro;(()=>{if(ro=window.customElements.get("kuc-mobile-text-1-17-1"),!ro){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.prefix="",this.suffix="",this.textAlign="left",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusInput(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputText(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}render(){return we`
         <label
-          class="kuc-mobile-text-1-17-0__label"
+          class="kuc-mobile-text-1-17-1__label"
           for="${this._GUID}-label"
           ?hidden="${!this.label}"
         >
-          <kuc-base-mobile-label-1-17-0
+          <kuc-base-mobile-label-1-17-1
             .requiredIcon="${this.requiredIcon}"
             .text="${this.label}"
-          ></kuc-base-mobile-label-1-17-0>
+          ></kuc-base-mobile-label-1-17-1>
         </label>
-        <div class="kuc-mobile-text-1-17-0__input-form">
+        <div class="kuc-mobile-text-1-17-1__input-form">
           <span
-            class="kuc-mobile-text-1-17-0__input-form__prefix"
+            class="kuc-mobile-text-1-17-1__input-form__prefix"
             ?hidden="${!this.prefix}"
             >${this.prefix}</span
           >
           <input
-            class="kuc-mobile-text-1-17-0__input-form__input"
+            class="kuc-mobile-text-1-17-1__input-form__input"
             id="${this._GUID}-label"
             placeholder="${this.placeholder}"
             textAlign="${this.textAlign}"
@@ -1965,27 +1964,27 @@
             @input="${this._handleInputText}"
           />
           <span
-            class="kuc-mobile-text-1-17-0__input-form__suffix"
+            class="kuc-mobile-text-1-17-1__input-form__suffix"
             ?hidden="${!this.suffix}"
             >${this.suffix}</span
           >
         </div>
-        <kuc-base-mobile-error-1-17-0 .guid="${this._GUID}" .text="${this.error}">
-        </kuc-base-mobile-error-1-17-0>
-      `}}so([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),so([Fe({type:String})],e.prototype,"error",void 0),so([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),so([Fe({type:String})],e.prototype,"label",void 0),so([Fe({type:String})],e.prototype,"placeholder",void 0),so([Fe({type:String})],e.prototype,"prefix",void 0),so([Fe({type:String})],e.prototype,"suffix",void 0),so([Fe({type:String})],e.prototype,"textAlign",void 0),so([Fe({type:String})],e.prototype,"value",void 0),so([Fe({type:Boolean})],e.prototype,"disabled",void 0),so([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),so([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),window.customElements.define("kuc-mobile-text-1-17-0",e),mi('\n  kuc-mobile-text-1-17-0,\n  kuc-mobile-text-1-17-0 * {\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-text-1-17-0:lang(zh),\n  kuc-mobile-text-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-text-1-17-0:lang(zh-TW),\n  kuc-mobile-text-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-text-1-17-0 {\n    display: block;\n  }\n  kuc-mobile-text-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-mobile-text-1-17-0__label {\n    display: inline-block;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n  .kuc-mobile-text-1-17-0__label[hidden] {\n    display: none;\n  }\n  .kuc-mobile-text-1-17-0__input-form {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n    display: flex;\n    align-items: center;\n  }\n  .kuc-mobile-text-1-17-0__input-form__prefix {\n    margin-right: 4px;\n    color: #888888;\n  }\n  .kuc-mobile-text-1-17-0__input-form__prefix[hidden] {\n    display: none;\n  }\n  .kuc-mobile-text-1-17-0__input-form__input {\n    width: 100%;\n    min-width: 20px;\n    padding: 0.4em;\n    border: 1px solid #b3b3b3;\n    outline: 0;\n    box-shadow: 0 1px 0 #ffffff, inset 0 2px 3px #dadada;\n    border-radius: 0.4em;\n    box-sizing: border-box;\n    text-align: left;\n  }\n  .kuc-mobile-text-1-17-0__input-form__input[aria-required="true"] {\n    border: 1px solid #cf4a38;\n  }\n  .kuc-mobile-text-1-17-0__input-form__input[textAlign="right"] {\n    text-align: right;\n  }\n  .kuc-mobile-text-1-17-0__input-form__input:disabled {\n    color: #999999;\n    background-color: #d5d7d9;\n    -webkit-text-fill-color: #999999;\n    opacity: 1;\n    -webkit-opacity: 1;\n  }\n  .kuc-mobile-text-1-17-0__input-form__suffix {\n    margin-left: 4px;\n    color: #888888;\n  }\n  .kuc-mobile-text-1-17-0__input-form__suffix[hidden] {\n    display: none;\n  }\n'),ro=e}})();var lo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let uo;(()=>{if(uo=window.customElements.get("kuc-mobile-textarea-1-17-0"),!uo){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusInput(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputTextArea(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}render(){return $e`
+        <kuc-base-mobile-error-1-17-1 .guid="${this._GUID}" .text="${this.error}">
+        </kuc-base-mobile-error-1-17-1>
+      `}}so([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),so([Ge({type:String})],e.prototype,"error",void 0),so([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),so([Ge({type:String})],e.prototype,"label",void 0),so([Ge({type:String})],e.prototype,"placeholder",void 0),so([Ge({type:String})],e.prototype,"prefix",void 0),so([Ge({type:String})],e.prototype,"suffix",void 0),so([Ge({type:String})],e.prototype,"textAlign",void 0),so([Ge({type:String})],e.prototype,"value",void 0),so([Ge({type:Boolean})],e.prototype,"disabled",void 0),so([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),so([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),window.customElements.define("kuc-mobile-text-1-17-1",e),mi('\n  kuc-mobile-text-1-17-1,\n  kuc-mobile-text-1-17-1 * {\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-text-1-17-1:lang(zh),\n  kuc-mobile-text-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-text-1-17-1:lang(zh-TW),\n  kuc-mobile-text-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-text-1-17-1 {\n    display: block;\n  }\n  kuc-mobile-text-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-mobile-text-1-17-1__label {\n    display: inline-block;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n  }\n  .kuc-mobile-text-1-17-1__label[hidden] {\n    display: none;\n  }\n  .kuc-mobile-text-1-17-1__input-form {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n    display: flex;\n    align-items: center;\n  }\n  .kuc-mobile-text-1-17-1__input-form__prefix {\n    margin-right: 4px;\n    color: #888888;\n  }\n  .kuc-mobile-text-1-17-1__input-form__prefix[hidden] {\n    display: none;\n  }\n  .kuc-mobile-text-1-17-1__input-form__input {\n    width: 100%;\n    min-width: 20px;\n    padding: 0.4em;\n    border: 1px solid #b3b3b3;\n    outline: 0;\n    box-shadow: 0 1px 0 #ffffff, inset 0 2px 3px #dadada;\n    border-radius: 0.4em;\n    box-sizing: border-box;\n    text-align: left;\n  }\n  .kuc-mobile-text-1-17-1__input-form__input[aria-required="true"] {\n    border: 1px solid #cf4a38;\n  }\n  .kuc-mobile-text-1-17-1__input-form__input[textAlign="right"] {\n    text-align: right;\n  }\n  .kuc-mobile-text-1-17-1__input-form__input:disabled {\n    color: #999999;\n    background-color: #d5d7d9;\n    -webkit-text-fill-color: #999999;\n    opacity: 1;\n    -webkit-opacity: 1;\n  }\n  .kuc-mobile-text-1-17-1__input-form__suffix {\n    margin-left: 4px;\n    color: #888888;\n  }\n  .kuc-mobile-text-1-17-1__input-form__suffix[hidden] {\n    display: none;\n  }\n'),ro=e}})();var lo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let uo;(()=>{if(uo=window.customElements.get("kuc-mobile-textarea-1-17-1"),!uo){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.placeholder="",this.value="",this.disabled=!1,this.requiredIcon=!1,this.visible=!0,this._GUID=fi();const t=vi(e);Object.assign(this,t)}_handleFocusInput(e){const t={value:this.value};gi(this,"focus",t)}_handleChangeInput(e){e.stopPropagation();const t=e.target,i={value:"",oldValue:this.value};this.value=t.value,i.value=this.value,gi(this,"change",i)}_handleInputTextArea(e){e.stopPropagation();const t={value:e.target.value,data:e.data};gi(this,"input",t)}render(){return we`
         <label
-          class="kuc-mobile-textarea-1-17-0__label"
+          class="kuc-mobile-textarea-1-17-1__label"
           for="${this._GUID}-label"
           ?hidden="${!this.label}"
         >
-          <kuc-base-mobile-label-1-17-0
+          <kuc-base-mobile-label-1-17-1
             .requiredIcon="${this.requiredIcon}"
             .text="${this.label}"
-          ></kuc-base-mobile-label-1-17-0>
+          ></kuc-base-mobile-label-1-17-1>
         </label>
-        <div class="kuc-mobile-textarea-1-17-0__form">
+        <div class="kuc-mobile-textarea-1-17-1__form">
           <textarea
-            class="kuc-mobile-textarea-1-17-0__form__textarea"
+            class="kuc-mobile-textarea-1-17-1__form__textarea"
             id="${this._GUID}-label"
             placeholder="${this.placeholder}"
             ?disabled="${this.disabled}"
@@ -1998,9 +1997,9 @@
             @input="${this._handleInputTextArea}"
           /></textarea>
         </div>
-        <kuc-base-mobile-error-1-17-0 .guid="${this._GUID}" .text="${this.error}">
-        </kuc-base-mobile-error-1-17-0>
-      `}}lo([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),lo([Fe({type:String})],e.prototype,"error",void 0),lo([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),lo([Fe({type:String})],e.prototype,"label",void 0),lo([Fe({type:String})],e.prototype,"placeholder",void 0),lo([Fe({type:String})],e.prototype,"value",void 0),lo([Fe({type:Boolean})],e.prototype,"disabled",void 0),lo([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),lo([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),window.customElements.define("kuc-mobile-textarea-1-17-0",e),mi('\n  kuc-mobile-textarea-1-17-0,\n  kuc-mobile-textarea-1-17-0 * {\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-textarea-1-17-0:lang(zh),\n  kuc-mobile-textarea-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-textarea-1-17-0:lang(zh-TW),\n  kuc-mobile-textarea-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-textarea-1-17-0 {\n    display: block;\n  }\n  kuc-mobile-textarea-1-17-0[hidden] {\n    display: none;\n  }\n  .kuc-mobile-textarea-1-17-0__label {\n    padding: 0;\n    margin: 0 0 4px 0;\n    display: inline-block;\n    font-weight: bold;\n    line-height: 1.5;\n    white-space: nowrap;\n  }\n  .kuc-mobile-textarea-1-17-0__label[hidden] {\n    display: none;\n  }\n  .kuc-mobile-textarea-1-17-0__form {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n  .kuc-mobile-textarea-1-17-0__form__textarea {\n    width: 100%;\n    height: 120px;\n    padding: 0.4em;\n    border: 1px solid #b3b3b3;\n    outline: 0;\n    box-shadow: 0 1px 0 #ffffff, inset 0 2px 3px #dadada;\n    border-radius: 0.4em;\n    box-sizing: border-box;\n    vertical-align: top;\n  }\n  .kuc-mobile-textarea-1-17-0__form__textarea[aria-required="true"] {\n    border: 1px solid #cf4a38;\n  }\n  .kuc-mobile-textarea-1-17-0__form__textarea:disabled {\n    color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n'),uo=e}})();var co=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let ho;(()=>{if(ho=window.customElements.get("kuc-mobile-notification-1-17-0"),!ho){class e extends bi{constructor(e){super(),this.className="",this.text="",this.duration=-1,this.container=document.body,this._isOpened=!1;const t=vi(e);Object.assign(this,t)}_handleClickCloseButton(e){this.close()}_getCloseButtonSvgTemplate(){return Ce`
+        <kuc-base-mobile-error-1-17-1 .guid="${this._GUID}" .text="${this.error}">
+        </kuc-base-mobile-error-1-17-1>
+      `}}lo([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),lo([Ge({type:String})],e.prototype,"error",void 0),lo([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),lo([Ge({type:String})],e.prototype,"label",void 0),lo([Ge({type:String})],e.prototype,"placeholder",void 0),lo([Ge({type:String})],e.prototype,"value",void 0),lo([Ge({type:Boolean})],e.prototype,"disabled",void 0),lo([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),lo([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),window.customElements.define("kuc-mobile-textarea-1-17-1",e),mi('\n  kuc-mobile-textarea-1-17-1,\n  kuc-mobile-textarea-1-17-1 * {\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n  }\n  kuc-mobile-textarea-1-17-1:lang(zh),\n  kuc-mobile-textarea-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-textarea-1-17-1:lang(zh-TW),\n  kuc-mobile-textarea-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  kuc-mobile-textarea-1-17-1 {\n    display: block;\n  }\n  kuc-mobile-textarea-1-17-1[hidden] {\n    display: none;\n  }\n  .kuc-mobile-textarea-1-17-1__label {\n    padding: 0;\n    margin: 0 0 4px 0;\n    display: inline-block;\n    font-weight: bold;\n    line-height: 1.5;\n    white-space: nowrap;\n  }\n  .kuc-mobile-textarea-1-17-1__label[hidden] {\n    display: none;\n  }\n  .kuc-mobile-textarea-1-17-1__form {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n  .kuc-mobile-textarea-1-17-1__form__textarea {\n    width: 100%;\n    height: 120px;\n    padding: 0.4em;\n    border: 1px solid #b3b3b3;\n    outline: 0;\n    box-shadow: 0 1px 0 #ffffff, inset 0 2px 3px #dadada;\n    border-radius: 0.4em;\n    box-sizing: border-box;\n    vertical-align: top;\n  }\n  .kuc-mobile-textarea-1-17-1__form__textarea[aria-required="true"] {\n    border: 1px solid #cf4a38;\n  }\n  .kuc-mobile-textarea-1-17-1__form__textarea:disabled {\n    color: #999999;\n    background-color: #d5d7d9;\n    opacity: 1;\n  }\n'),uo=e}})();var co=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let ho;(()=>{if(ho=window.customElements.get("kuc-mobile-notification-1-17-1"),!ho){class e extends bi{constructor(e){super(),this.className="",this.text="",this.duration=-1,this.container=document.body,this._isOpened=!1;const t=vi(e);Object.assign(this,t)}_handleClickCloseButton(e){this.close()}_getCloseButtonSvgTemplate(){return $e`
       <svg
         height="12"
         width="12"
@@ -2011,15 +2010,15 @@
               d="m512.001 84.853-84.853-84.853-171.147 171.147-171.148-171.147-84.853 84.853 171.148 171.147-171.148 171.148 84.853 84.853 171.148-171.147 171.147 171.147 84.853-84.853-171.148-171.148z"/>
           </g>
         </svg>
-      `}_setAutoCloseTimer(){!Number.isFinite(this.duration)||this.duration<0||(this._clearAutoCloseTimer(),this._timeoutID=window.setTimeout((()=>{this.close()}),this.duration))}_clearAutoCloseTimer(){this._timeoutID&&window.clearTimeout(this._timeoutID)}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.container.appendChild(this),this.performUpdate(),this.classList.remove("kuc-mobile-notification-fadeout-1-17-0"),this.classList.add("kuc-mobile-notification-fadein-1-17-0"),this._isOpened=!0,this._setAutoCloseTimer()}close(){this._close(),gi(this,"close")}_close(){this._isOpened=!1,this.classList.remove("kuc-mobile-notification-fadein-1-17-0"),this.classList.add("kuc-mobile-notification-fadeout-1-17-0"),this._clearAutoCloseTimer()}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this._close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this._close(),!e)return this.throwErrorAfterUpdateComplete(gt),!1}return!0}_isValidContainerElement(){return this.container instanceof HTMLElement}render(){return $e`
-        <div class="kuc-mobile-notification-1-17-0__notification">
+      `}_setAutoCloseTimer(){!Number.isFinite(this.duration)||this.duration<0||(this._clearAutoCloseTimer(),this._timeoutID=window.setTimeout((()=>{this.close()}),this.duration))}_clearAutoCloseTimer(){this._timeoutID&&window.clearTimeout(this._timeoutID)}open(){if(!this._isValidContainerElement())return document.body.appendChild(this),requestAnimationFrame((()=>{document.body.removeChild(this)})),void this.performUpdate();this.container.appendChild(this),this.performUpdate(),this.classList.remove("kuc-mobile-notification-fadeout-1-17-1"),this.classList.add("kuc-mobile-notification-fadein-1-17-1"),this._isOpened=!0,this._setAutoCloseTimer()}close(){this._close(),gi(this,"close")}_close(){this._isOpened=!1,this.classList.remove("kuc-mobile-notification-fadein-1-17-1"),this.classList.add("kuc-mobile-notification-fadeout-1-17-1"),this._clearAutoCloseTimer()}shouldUpdate(e){if(e.has("container")){if(null===this.container||void 0===this.container)return this._isOpened&&this._close(),!1;const e=this._isValidContainerElement(),t=!e||!document.contains(this.container);if(this._isOpened&&t&&this._close(),!e)return this.throwErrorAfterUpdateComplete(bt),!1}return!0}_isValidContainerElement(){return this.container instanceof HTMLElement}render(){return we`
+        <div class="kuc-mobile-notification-1-17-1__notification">
           <pre
-            class="kuc-mobile-notification-1-17-0__notification__title"
+            class="kuc-mobile-notification-1-17-1__notification__title"
             aria-live="assertive"
             role="${this._isOpened?"alert":""}"
           ><!---->${this.text}</pre>
           <button
-            class="kuc-mobile-notification-1-17-0__notification__close-button"
+            class="kuc-mobile-notification-1-17-1__notification__close-button"
             type="button"
             aria-label="close"
             @click="${this._handleClickCloseButton}"
@@ -2027,65 +2026,65 @@
             ${this._getCloseButtonSvgTemplate()}
           </button>
         </div>
-      `}}co([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),co([Fe({type:String})],e.prototype,"text",void 0),co([Fe({type:Number})],e.prototype,"duration",void 0),co([Fe()],e.prototype,"container",void 0),co([We()],e.prototype,"_isOpened",void 0),window.customElements.define("kuc-mobile-notification-1-17-0",e),mi('\n  kuc-mobile-notification-1-17-0 {\n    display: block;\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n    visibility: hidden;\n    animation-fill-mode: forwards;\n    position: relative;\n    top: -100px;\n    left: 0;\n  }\n\n  kuc-mobile-notification-1-17-0:lang(zh),\n  kuc-mobile-notification-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-notification-1-17-0:lang(zh-TW),\n  kuc-mobile-notification-1-17-0:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  .kuc-mobile-notification-fadein-1-17-0 {\n    animation-name: kuc-mobile-notification-fade-in-1-17-0;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n    width: 100%;\n    position: fixed;\n    visibility: visible;\n  }\n\n  .kuc-mobile-notification-fadeout-1-17-0 {\n    animation-name: kuc-mobile-notification-fade-out-1-17-0;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n    width: 100%;\n    position: fixed;\n  }\n\n  .kuc-mobile-notification-1-17-0__notification {\n    background-color: #ffffcf;\n    background: linear-gradient(#ffda4a, #ffc32c);\n    width: 100%;\n    min-height: 48px;\n    z-index: 20;\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 14px;\n    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;\n    color: #333333;\n    text-align: center;\n    vertical-align: top;\n  }\n\n  .kuc-mobile-notification-1-17-0__notification__title {\n    display: inline-block;\n    vertical-align: middle;\n    padding: 17px 44px 11px 44px;\n    margin: 0 0 0 -20px;\n    text-align: left;\n    font-weight: inherit;\n    font-family: inherit;\n    word-break: break-word;\n    white-space: pre-wrap;\n  }\n\n  .kuc-mobile-notification-1-17-0__notification__close-button {\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 44px;\n    height: 48px;\n    padding: 0;\n    background-color: transparent;\n    border: none;\n    vertical-align: middle;\n    pointer-events: auto;\n    outline: none;\n  }\n  @keyframes kuc-mobile-notification-fade-in-1-17-0 {\n    0% {\n      top: -100px;\n      left: 0;\n    }\n    50% {\n      top: -50px;\n      left: 0;\n    }\n    100% {\n      top: 0;\n      left: 0;\n    }\n  }\n  @keyframes kuc-mobile-notification-fade-out-1-17-0 {\n    0% {\n      visibility: visible;\n      top: 0;\n      left: 0;\n    }\n    50% {\n      visibility: visible;\n      top: -50px;\n      left: 0;\n    }\n    100% {\n      top: -100px;\n      left: 0;\n    }\n  }\n'),ho=e}})();var _o=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class po extends bi{constructor(){super(...arguments),this.language="en",this.month=1,this.year=(new Date).getFullYear(),this._locale=Qt("en")}update(e){e.has("language")&&(this._locale=Qt(this.language)),this._monthOptions=this._generateMonthOptions(),this._yearOptions=this._generateYearOptions(),super.update(e)}render(){return $e`
-      <div class="kuc-base-mobile-datetime-calendar-header-1-17-0__group">
+      `}}co([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),co([Ge({type:String})],e.prototype,"text",void 0),co([Ge({type:Number})],e.prototype,"duration",void 0),co([Ge()],e.prototype,"container",void 0),co([Fe()],e.prototype,"_isOpened",void 0),window.customElements.define("kuc-mobile-notification-1-17-1",e),mi('\n  kuc-mobile-notification-1-17-1 {\n    display: block;\n    font-size: 13px;\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n      "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n      "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n    visibility: hidden;\n    animation-fill-mode: forwards;\n    position: relative;\n    top: -100px;\n    left: 0;\n  }\n\n  kuc-mobile-notification-1-17-1:lang(zh),\n  kuc-mobile-notification-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n      Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n      Verdana, sans-serif;\n  }\n  kuc-mobile-notification-1-17-1:lang(zh-TW),\n  kuc-mobile-notification-1-17-1:lang(zh-TW) * {\n      font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n      Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n      Verdana,sans-serif\n  }\n  .kuc-mobile-notification-fadein-1-17-1 {\n    animation-name: kuc-mobile-notification-fade-in-1-17-1;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n    width: 100%;\n    position: fixed;\n    visibility: visible;\n  }\n\n  .kuc-mobile-notification-fadeout-1-17-1 {\n    animation-name: kuc-mobile-notification-fade-out-1-17-1;\n    animation-duration: 250ms;\n    animation-timing-function: ease-out;\n    width: 100%;\n    position: fixed;\n  }\n\n  .kuc-mobile-notification-1-17-1__notification {\n    background-color: #ffffcf;\n    background: linear-gradient(#ffda4a, #ffc32c);\n    width: 100%;\n    min-height: 48px;\n    z-index: 20;\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 14px;\n    text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;\n    color: #333333;\n    text-align: center;\n    vertical-align: top;\n  }\n\n  .kuc-mobile-notification-1-17-1__notification__title {\n    display: inline-block;\n    vertical-align: middle;\n    padding: 17px 44px 11px 44px;\n    margin: 0 0 0 -20px;\n    text-align: left;\n    font-weight: inherit;\n    font-family: inherit;\n    word-break: break-word;\n    white-space: pre-wrap;\n  }\n\n  .kuc-mobile-notification-1-17-1__notification__close-button {\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 44px;\n    height: 48px;\n    padding: 0;\n    background-color: transparent;\n    border: none;\n    vertical-align: middle;\n    pointer-events: auto;\n    outline: none;\n  }\n  @keyframes kuc-mobile-notification-fade-in-1-17-1 {\n    0% {\n      top: -100px;\n      left: 0;\n    }\n    50% {\n      top: -50px;\n      left: 0;\n    }\n    100% {\n      top: 0;\n      left: 0;\n    }\n  }\n  @keyframes kuc-mobile-notification-fade-out-1-17-1 {\n    0% {\n      visibility: visible;\n      top: 0;\n      left: 0;\n    }\n    50% {\n      visibility: visible;\n      top: -50px;\n      left: 0;\n    }\n    100% {\n      top: -100px;\n      left: 0;\n    }\n  }\n'),ho=e}})();var _o=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class po extends bi{constructor(){super(...arguments),this.language="en",this.month=1,this.year=(new Date).getFullYear(),this._locale=Xt("en")}update(e){e.has("language")&&(this._locale=Xt(this.language)),this._monthOptions=this._generateMonthOptions(),this._yearOptions=this._generateYearOptions(),super.update(e)}render(){return we`
+      <div class="kuc-base-mobile-datetime-calendar-header-1-17-1__group">
         <button
           aria-label="previous month"
           type="button"
-          class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__button kuc-base-mobile-datetime-calendar-header-1-17-0__group__button--previous-month"
+          class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__button kuc-base-mobile-datetime-calendar-header-1-17-1__group__button--previous-month"
           @click="${this._handleClickCalendarPrevMonthBtn}"
         >
           ${this._getLeftArrowIconSvgTemplate()}
         </button>
-        <div class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__center">
+        <div class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__center">
           ${this._getYearMonthTemplate()}
         </div>
         <button
           aria-label="next month"
           type="button"
-          class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__button kuc-base-mobile-datetime-calendar-header-1-17-0__group__button--next-month"
+          class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__button kuc-base-mobile-datetime-calendar-header-1-17-1__group__button--next-month"
           @click="${this._handleClickCalendarNextMonthBtn}"
         >
           ${this._getRightArrowIconSvgTemplate()}
         </button>
       </div>
-    `}updated(e){e.has("month")&&this._setSelectMonthWidth(this.month),e.has("year")&&this._setYearSelectedIndex(),super.update(e)}_setSelectMonthWidth(e){const t=this._monthOptions[e-1].label;if(!t)return;const i=document.createElement("span");i.innerText=t;const n=(e=>{const t=(e=>{const t=document.createElement("div");return t.style.cssText=`\n  height: 0px;\n  overflow: hidden;\n  display: inline-block;\n  font-size: 14px;\n  font-family: ${window.getComputedStyle(e).fontFamily};\n  `,t})(e),i=e.cloneNode(!0);if(i.hasAttribute("hidden"))return 0;t.appendChild(i),document.body.appendChild(t);const n=t.getBoundingClientRect().width;return document.body.removeChild(t),n})(i);this._selectMonthEl.selectedIndex=this.month-1,this._selectMonthEl.style.width=n+35+"px"}_setYearSelectedIndex(){this.year<100?this._selectYearEl.selectedIndex=this.year:this._selectYearEl.selectedIndex=100}_generateMonthOptions(){return this._locale.MONTH_SELECT.map(((e,t)=>({value:`${t+1}`,label:`${e}`})))}_generateYearOptions(){return this._getYearOptions().map((e=>({value:`${e}`,label:`${e}${this._locale.YEAR_SELECT_POSTFIX}`})))}_getYearOptions(){const e=[];Number.isInteger(this.year)||(this.year=(new Date).getFullYear());let t=this.year<100?0:this.year-100;const i=this.year>=9899?9999:this.year+100;for(t>=i&&(t=i-100);t<=i;t++)e.push(t);return e}_getYearMonthTemplate(){return"zh"===this.language||"ja"===this.language||"zh-TW"===this.language?$e` ${this._getYearTemplate()}${this._getMonthTemplate()} `:$e` ${this._getMonthTemplate()}${this._getYearTemplate()} `}_handleChangeMonthDropdown(e){e.stopPropagation(),e.preventDefault();const t=e.target;this.month=parseInt(t.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleChangeYearDropdown(e){e.stopPropagation(),e.preventDefault();const t=e.target;this.year=parseInt(t.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleClickCalendarPrevMonthBtn(e){e.stopPropagation(),1===this.month?(this.month=12,this.year--):this.month-=1,this._dispatchCalendarHeaderChangeEvent()}_handleClickCalendarNextMonthBtn(e){e.stopPropagation(),12===this.month?(this.month=1,this.year++):this.month+=1,this._dispatchCalendarHeaderChangeEvent()}_dispatchCalendarHeaderChangeEvent(){const e=this.year,t=this.month;gi(this,"kuc:mobile-calendar-header-change",{value:`${e}-${t}`})}_getOptionsMonthTemplate(){return this._monthOptions.map((e=>$e`
+    `}updated(e){e.has("month")&&this._setSelectMonthWidth(this.month),e.has("year")&&this._setYearSelectedIndex(),super.update(e)}_setSelectMonthWidth(e){const t=this._monthOptions[e-1].label;if(!t)return;const i=document.createElement("span");i.innerText=t;const n=(e=>{const t=(e=>{const t=document.createElement("div");return t.style.cssText=`\n  height: 0px;\n  overflow: hidden;\n  display: inline-block;\n  font-size: 14px;\n  font-family: ${window.getComputedStyle(e).fontFamily};\n  `,t})(e),i=e.cloneNode(!0);if(i.hasAttribute("hidden"))return 0;t.appendChild(i),document.body.appendChild(t);const n=t.getBoundingClientRect().width;return document.body.removeChild(t),n})(i);this._selectMonthEl.selectedIndex=this.month-1,this._selectMonthEl.style.width=n+35+"px"}_setYearSelectedIndex(){this.year<100?this._selectYearEl.selectedIndex=this.year:this._selectYearEl.selectedIndex=100}_generateMonthOptions(){return this._locale.MONTH_SELECT.map(((e,t)=>({value:`${t+1}`,label:`${e}`})))}_generateYearOptions(){return this._getYearOptions().map((e=>({value:`${e}`,label:`${e}${this._locale.YEAR_SELECT_POSTFIX}`})))}_getYearOptions(){const e=[];Number.isInteger(this.year)||(this.year=(new Date).getFullYear());let t=this.year<100?0:this.year-100;const i=this.year>=9899?9999:this.year+100;for(t>=i&&(t=i-100);t<=i;t++)e.push(t);return e}_getYearMonthTemplate(){return"zh"===this.language||"ja"===this.language||"zh-TW"===this.language?we` ${this._getYearTemplate()}${this._getMonthTemplate()} `:we` ${this._getMonthTemplate()}${this._getYearTemplate()} `}_handleChangeMonthDropdown(e){e.stopPropagation(),e.preventDefault();const t=e.target;this.month=parseInt(t.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleChangeYearDropdown(e){e.stopPropagation(),e.preventDefault();const t=e.target;this.year=parseInt(t.value,10),this._dispatchCalendarHeaderChangeEvent()}_handleClickCalendarPrevMonthBtn(e){e.stopPropagation(),1===this.month?(this.month=12,this.year--):this.month-=1,this._dispatchCalendarHeaderChangeEvent()}_handleClickCalendarNextMonthBtn(e){e.stopPropagation(),12===this.month?(this.month=1,this.year++):this.month+=1,this._dispatchCalendarHeaderChangeEvent()}_dispatchCalendarHeaderChangeEvent(){const e=this.year,t=this.month;gi(this,"kuc:mobile-calendar-header-change",{value:`${e}-${t}`})}_getOptionsMonthTemplate(){return this._monthOptions.map((e=>we`
         <option
           ?selected="${parseInt(e.value,10)===this.month}"
           value="${e.value}"
         >
           ${e.label}
         </option>
-      `))}_getOptionsYearTemplate(){return this._yearOptions.map((e=>$e`
+      `))}_getOptionsYearTemplate(){return this._yearOptions.map((e=>we`
         <option
           ?selected="${parseInt(e.value,10)===this.year}"
           value="${e.value}"
         >
           ${e.label}
         </option>
-      `))}_getMonthTemplate(){return $e`
+      `))}_getMonthTemplate(){return we`
       <div
-        class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__month"
+        class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__month"
       >
         <select
-          class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__month__select"
+          class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__month__select"
           @change="${this._handleChangeMonthDropdown}"
         >
           ${this._getOptionsMonthTemplate()}
         </select>
       </div>
-    `}_getYearTemplate(){return $e`
+    `}_getYearTemplate(){return we`
       <div
-        class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__year"
+        class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__year"
       >
         <select
-          class="kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__year__select"
+          class="kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__year__select"
           @change="${this._handleChangeYearDropdown}"
         >
           ${this._getOptionsYearTemplate()}
         </select>
       </div>
-    `}_getLeftArrowIconSvgTemplate(){return Ce`
+    `}_getLeftArrowIconSvgTemplate(){return $e`
     <svg
       width="16"
       height="14"
@@ -2099,7 +2098,7 @@
         d="M8.70788 11.9567C9.0984 12.3472 9.0984 12.9804 8.70788 13.3709C8.31735 13.7614 7.68419 13.7614 7.29366 13.3709L2.34392 8.42118L0.929703 7.00696L2.34392 5.59275L7.29366 0.643003C7.68419 0.25248 8.31735 0.25248 8.70788 0.643003C9.0984 1.03353 9.0984 1.66669 8.70788 2.05722L4.68709 6.07801L14.0718 6.07801C14.6241 6.07801 15.0718 6.52572 15.0718 7.07801C15.0718 7.63029 14.6241 8.07801 14.0718 8.07801L4.82917 8.07801L8.70788 11.9567Z"
         fill="#206694"
       />
-    </svg>`}_getRightArrowIconSvgTemplate(){return Ce`
+    </svg>`}_getRightArrowIconSvgTemplate(){return $e`
     <svg
       width="16"
       height="14"
@@ -2113,17 +2112,17 @@
         d="M7.29396 2.0572C6.90344 1.66668 6.90344 1.03351 7.29396 0.642991C7.68449 0.252466 8.31765 0.252467 8.70817 0.642991L13.6579 5.59274L15.0721 7.00695L13.6579 8.42117L8.70817 13.3709C8.31765 13.7614 7.68448 13.7614 7.29396 13.3709C6.90344 12.9804 6.90344 12.3472 7.29396 11.9567L11.3148 7.93591L1.93 7.93591C1.37772 7.93591 0.93 7.48819 0.93 6.93591C0.93 6.38362 1.37772 5.93591 1.93 5.93591L11.1727 5.93591L7.29396 2.0572Z"
         fill="#206694"
       />
-    </svg>`}}_o([Fe({type:String,attribute:"lang",reflect:!0})],po.prototype,"language",void 0),_o([Fe({type:Number,hasChanged(e){return(t=e)>0&&t<13;var t}})],po.prototype,"month",void 0),_o([Fe({type:Number,hasChanged(e){return(t=e)>=0&&t<1e4;var t}})],po.prototype,"year",void 0),_o([We()],po.prototype,"_monthOptions",void 0),_o([We()],po.prototype,"_yearOptions",void 0),_o([Ke(".kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__month__select")],po.prototype,"_selectMonthEl",void 0),_o([Ke(".kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__year__select")],po.prototype,"_selectYearEl",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-header-1-17-0")||(mi('\nkuc-base-mobile-datetime-calendar-header-1-17-0,\nkuc-base-mobile-datetime-calendar-header-1-17-0 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-base-mobile-datetime-calendar-header-1-17-0:lang(zh),\nkuc-base-mobile-datetime-calendar-header-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-base-mobile-datetime-calendar-header-1-17-0:lang(zh-TW),\nkuc-base-mobile-datetime-calendar-header-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    box-sizing: border-box;\n    border-bottom: 1px solid #e3e7e8;\n    padding: 0;\n    white-space: nowrap;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: inherit;\n    border: 0;\n    margin: 0;\n    padding: 0;\n    min-width: 40px;\n    width: 40px;\n    height: 40px;\n    overflow: hidden;\n    text-indent: 100%;\n    white-space: nowrap;\n    word-wrap: normal;\n    cursor: pointer;\n    -webkit-appearance: button;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__button-icon {\n    vertical-align: middle;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__button:focus {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center {\n    text-align: center;\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    min-width: 186px;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center\n    > :first-child {\n    padding-left: 13px;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__month,\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__year {\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__month__select,\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__year__select {\n    font-size: 14px;\n    font-weight: 700;\n    padding: 0 22.4px 0 0;\n    line-height: 40px;\n    border: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    background: url("data:image/svg+xml,%3Csvg%0A%20%20%20%20width%3D%2211%22%0A%20%20%20%20height%3D%226%22%0A%20%20%20%20viewBox%3D%220%200%2011%206%22%0A%20%20%20%20fill%3D%22none%22%0A%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20d%3D%22M5.5061%206L0%200L11%200L5.5061%206Z%22%0A%20%20%20%20%20%20fill%3D%22%234b4b4b%22%0A%20%20%20%20%2F%3E%0A%20%20%3C%2Fsvg%3E")\n    no-repeat center right 0.6em #ffffff;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__month__select:focus,\n.kuc-base-mobile-datetime-calendar-header-1-17-0__group__center__year__select:focus {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-0__month {\n    margin: 0 4px 0 4px;\n}\n'),window.customElements.define("kuc-base-mobile-datetime-calendar-header-1-17-0",po));var bo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class go extends bi{constructor(){super(),this.month=1,this.year=2021,this.language="en",this.value="",this._month=1,this._year=2021,this._locale=Qt("en"),this._handleClickDocument=this._handleClickDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument)}),1)}disconnectedCallback(){document.removeEventListener("click",this._handleClickDocument),super.disconnectedCallback()}update(e){if(e.forEach(((e,t)=>{"language"===t&&(this._locale=Qt(this.language))})),e.has("month")&&(this._month=this.month),e.has("year")&&(this._year=this.year),e.has("value")){const{month:e,year:t}=this._separateDateValue();this._month=parseInt(e,10),this._year=parseInt(t,10)}super.update(e)}render(){return $e`
-      <table class="kuc-base-mobile-datetime-calendar-body-1-17-0__table" role="grid">
+    </svg>`}}_o([Ge({type:String,attribute:"lang",reflect:!0})],po.prototype,"language",void 0),_o([Ge({type:Number,hasChanged(e){return(t=e)>0&&t<13;var t}})],po.prototype,"month",void 0),_o([Ge({type:Number,hasChanged(e){return(t=e)>=0&&t<1e4;var t}})],po.prototype,"year",void 0),_o([Fe()],po.prototype,"_monthOptions",void 0),_o([Fe()],po.prototype,"_yearOptions",void 0),_o([qe(".kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__month__select")],po.prototype,"_selectMonthEl",void 0),_o([qe(".kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__year__select")],po.prototype,"_selectYearEl",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-header-1-17-1")||(mi('\nkuc-base-mobile-datetime-calendar-header-1-17-1,\nkuc-base-mobile-datetime-calendar-header-1-17-1 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-base-mobile-datetime-calendar-header-1-17-1:lang(zh),\nkuc-base-mobile-datetime-calendar-header-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-base-mobile-datetime-calendar-header-1-17-1:lang(zh-TW),\nkuc-base-mobile-datetime-calendar-header-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    box-sizing: border-box;\n    border-bottom: 1px solid #e3e7e8;\n    padding: 0;\n    white-space: nowrap;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: inherit;\n    border: 0;\n    margin: 0;\n    padding: 0;\n    min-width: 40px;\n    width: 40px;\n    height: 40px;\n    overflow: hidden;\n    text-indent: 100%;\n    white-space: nowrap;\n    word-wrap: normal;\n    cursor: pointer;\n    -webkit-appearance: button;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__button-icon {\n    vertical-align: middle;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__button:focus {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center {\n    text-align: center;\n    display: flex;\n    flex: 1;\n    justify-content: center;\n    min-width: 186px;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center\n    > :first-child {\n    padding-left: 13px;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__month,\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__year {\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__month__select,\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__year__select {\n    font-size: 14px;\n    font-weight: 700;\n    padding: 0 22.4px 0 0;\n    line-height: 40px;\n    border: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    background: url("data:image/svg+xml,%3Csvg%0A%20%20%20%20width%3D%2211%22%0A%20%20%20%20height%3D%226%22%0A%20%20%20%20viewBox%3D%220%200%2011%206%22%0A%20%20%20%20fill%3D%22none%22%0A%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20fill-rule%3D%22evenodd%22%0A%20%20%20%20%20%20clip-rule%3D%22evenodd%22%0A%20%20%20%20%20%20d%3D%22M5.5061%206L0%200L11%200L5.5061%206Z%22%0A%20%20%20%20%20%20fill%3D%22%234b4b4b%22%0A%20%20%20%20%2F%3E%0A%20%20%3C%2Fsvg%3E")\n    no-repeat center right 0.6em #ffffff;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__month__select:focus,\n.kuc-base-mobile-datetime-calendar-header-1-17-1__group__center__year__select:focus {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-header-1-17-1__month {\n    margin: 0 4px 0 4px;\n}\n'),window.customElements.define("kuc-base-mobile-datetime-calendar-header-1-17-1",po));var bo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class go extends bi{constructor(){super(),this.month=1,this.year=2021,this.language="en",this.value="",this._month=1,this._year=2021,this._locale=Xt("en"),this._handleClickDocument=this._handleClickDocument.bind(this)}connectedCallback(){super.connectedCallback(),setTimeout((()=>{document.addEventListener("click",this._handleClickDocument)}),1)}disconnectedCallback(){document.removeEventListener("click",this._handleClickDocument),super.disconnectedCallback()}update(e){if(e.forEach(((e,t)=>{"language"===t&&(this._locale=Xt(this.language))})),e.has("month")&&(this._month=this.month),e.has("year")&&(this._year=this.year),e.has("value")){const{month:e,year:t}=this._separateDateValue();this._month=parseInt(e,10),this._year=parseInt(t,10)}super.update(e)}render(){return we`
+      <table class="kuc-base-mobile-datetime-calendar-body-1-17-1__table" role="grid">
         ${this._getHeaderItemsTemplate()}<!--
         -->${this._getDateItemsTemplate()}
       </table>
-    `}_handleClickDocument(){gi(this,"kuc:mobile-calendar-body-blur",{})}_handleClickDate(e){e.preventDefault(),e.stopPropagation();const t=e.target;t.setAttribute("aria-selected","true");const i=t.getAttribute("data-date");this._dispatchClickEvent(i)}_dispatchClickEvent(e){const t={oldValue:this.value,value:e};gi(this,"kuc:mobile-calendar-body-click-date",t),this.value=e}_isToday(e){const t=new Date;return parseInt(e[0],10)===t.getFullYear()&&parseInt(e[1],10)===t.getMonth()+1&&parseInt(e[2],10)===t.getDate()}_separateDateValue(e=this.value){const t=e.split("-");return{day:t[2],month:t[1],year:t[0]}}_getDateClass(e,t){return t?this._isToday(e)?" kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--today":"":" kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--other-month"}_isSameDayOfMoment(e){const t=parseInt(e[1],10),i=parseInt(e[2],10),n=parseInt(e[0],10);let o=(new Date).getDate();if(!this.value.split("-")[2])return!1;if(this.value&&(o=new Date(`${this.value}T00:00:00`).getDate()),o===i&&t===this._month)return!0;const a=new Date(n,this._month,0).getDate();return o>a&&a===i&&t===this._month}_getHeaderItemsTemplate(){return $e`
+    `}_handleClickDocument(){gi(this,"kuc:mobile-calendar-body-blur",{})}_handleClickDate(e){e.preventDefault(),e.stopPropagation();const t=e.target;t.setAttribute("aria-selected","true");const i=t.getAttribute("data-date");this._dispatchClickEvent(i)}_dispatchClickEvent(e){const t={oldValue:this.value,value:e};gi(this,"kuc:mobile-calendar-body-click-date",t),this.value=e}_isToday(e){const t=new Date;return parseInt(e[0],10)===t.getFullYear()&&parseInt(e[1],10)===t.getMonth()+1&&parseInt(e[2],10)===t.getDate()}_separateDateValue(e=this.value){const t=e.split("-");return{day:t[2],month:t[1],year:t[0]}}_getDateClass(e,t){return t?this._isToday(e)?" kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--today":"":" kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--other-month"}_isSameDayOfMoment(e){const t=parseInt(e[1],10),i=parseInt(e[2],10),n=parseInt(e[0],10);let o=(new Date).getDate();if(!this.value.split("-")[2])return!1;if(this.value&&(o=new Date(`${this.value}T00:00:00`).getDate()),o===i&&t===this._month)return!0;const a=new Date(n,this._month,0).getDate();return o>a&&a===i&&t===this._month}_getHeaderItemsTemplate(){return we`
       <thead>
         <tr>
-          ${this._locale.WEEK_DAYS.map((e=>$e`
+          ${this._locale.WEEK_DAYS.map((e=>we`
               <th
-                class="kuc-base-mobile-datetime-calendar-body-1-17-0__table__header"
+                class="kuc-base-mobile-datetime-calendar-body-1-17-1__table__header"
                 role="columnheader"
                 abbr="${e.abbr}"
               >
@@ -2132,17 +2131,17 @@
             `))}
         </tr>
       </thead>
-    `}_getDateItemsTemplate(){const e=Ot(this._year,this._month-1),t=this._locale.MONTH_SELECT[this._month-1];return $e`
+    `}_getDateItemsTemplate(){const e=Bt(this._year,this._month-1),t=this._locale.MONTH_SELECT[this._month-1];return we`
       <tbody>
-        ${e.map((e=>$e`
+        ${e.map((e=>we`
             <tr>
-              ${e.map((e=>{const i=e.text.split("-"),n=this._isSameDayOfMoment(i),o=parseInt(i[1],10)===this._month,a=(this.value===e.attr||n)&&o;return $e`
+              ${e.map((e=>{const i=e.text.split("-"),n=this._isSameDayOfMoment(i),o=parseInt(i[1],10)===this._month,a=(this.value===e.attr||n)&&o;return we`
                   <td
                     role="gridcell"
                     tabindex="${a?0:-1}"
                     aria-selected="${this.value===e.attr}"
                     aria-current="${!!this._isToday(i)&&"date"}"
-                    class="kuc-base-mobile-datetime-calendar-body-1-17-0__table__date${a?"--selected":""}${this._getDateClass(i,o)}"
+                    class="kuc-base-mobile-datetime-calendar-body-1-17-1__table__date${a?"--selected":""}${this._getDateClass(i,o)}"
                     data-date="${e.attr}"
                     aria-label="${i[2]} ${t}"
                     @click="${this._handleClickDate}"
@@ -2153,58 +2152,58 @@
             </tr>
           `))}
       </tbody>
-    `}}bo([Fe({type:Number})],go.prototype,"month",void 0),bo([Fe({type:Number})],go.prototype,"year",void 0),bo([Fe({type:String,attribute:"lang",reflect:!0})],go.prototype,"language",void 0),bo([Fe({type:String,reflect:!0})],go.prototype,"value",void 0),bo([We()],go.prototype,"_month",void 0),bo([We()],go.prototype,"_year",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-body-1-17-0")||(mi('\nkuc-base-mobile-datetime-calendar-body-1-17-0,\nkuc-base-mobile-datetime-calendar-body-1-17-0 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\n\nkuc-base-mobile-datetime-calendar-body-1-17-0:lang(zh),\nkuc-base-mobile-datetime-calendar-body-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\n\nkuc-base-mobile-datetime-calendar-body-1-17-0:lang(zh-TW),\nkuc-base-mobile-datetime-calendar-body-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table,\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table tr {\n    border-collapse: separate;\n    border-spacing: 0;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected {\n    border-spacing: 1px;\n    padding: 0px;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date {\n    max-width: 40px;\n    border-spacing: 1px;\n    cursor: pointer;\n    box-sizing: border-box;\n    width: 40px;\n    height: 40px;\n    border: 1px solid #ffffff;\n    text-align: center;\n    vertical-align: middle;\n    user-select: none;\n    color: #333333;\n    font-size: 14px;\n    font-weight: 400;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button {\n    border-spacing: 1px;\n    cursor: pointer;\n    box-sizing: border-box;\n    text-align: center;\n    vertical-align: middle;\n    color: #333333;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date,\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected,\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__header {\n    box-sizing: border-box;\n    height: 40px;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: 400;\n    font-size: 12px;\n    color: #333333;\n    padding: 0;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date {\n    font-size: 14px;\n}\nth.kuc-base-mobile-datetime-calendar-body-1-17-0__table__header {\n    font-weight: 700;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button,\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button,\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__header {\n    box-sizing: border-box;\n    border: 1px solid #ffffff;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button,\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button {\n    background: none;\n    cursor: pointer;\n    max-width: 40px;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected {\n    border: 1px solid #206694;\n    box-sizing: border-box;\n    text-align: center;\n    font-size: 14px;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-0__table__date__button:focus-visible {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--today {\n    color: #333333;\n    background: #d8d8d8;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--other-month {\n    color: #a5a5a5;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-0__table__date--selected:focus {\n    outline: none;\n}\n'),window.customElements.define("kuc-base-mobile-datetime-calendar-body-1-17-0",go));var mo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class fo extends bi{constructor(){super(...arguments),this.language="en",this._locale=Qt("en")}update(e){e.has("language")&&(this._locale=Qt(this.language)),super.update(e)}_handleClickCalendarFooterButtonClose(e){e.stopPropagation(),gi(this,"kuc:mobile-calendar-footer-click-close")}_handleClickCalendarFooterButtonNone(e){e.stopPropagation(),gi(this,"kuc:mobile-calendar-footer-click-none")}_handleClickCalendarFooterButtonToday(e){e.stopPropagation(),gi(this,"kuc:mobile-calendar-footer-click-today")}render(){return $e`
-      <div class="kuc-base-mobile-datetime-calendar-footer-1-17-0__group">
+    `}}bo([Ge({type:Number})],go.prototype,"month",void 0),bo([Ge({type:Number})],go.prototype,"year",void 0),bo([Ge({type:String,attribute:"lang",reflect:!0})],go.prototype,"language",void 0),bo([Ge({type:String,reflect:!0})],go.prototype,"value",void 0),bo([Fe()],go.prototype,"_month",void 0),bo([Fe()],go.prototype,"_year",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-body-1-17-1")||(mi('\nkuc-base-mobile-datetime-calendar-body-1-17-1,\nkuc-base-mobile-datetime-calendar-body-1-17-1 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\n\nkuc-base-mobile-datetime-calendar-body-1-17-1:lang(zh),\nkuc-base-mobile-datetime-calendar-body-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\n\nkuc-base-mobile-datetime-calendar-body-1-17-1:lang(zh-TW),\nkuc-base-mobile-datetime-calendar-body-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table,\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table tr {\n    border-collapse: separate;\n    border-spacing: 0;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected {\n    border-spacing: 1px;\n    padding: 0px;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date {\n    max-width: 40px;\n    border-spacing: 1px;\n    cursor: pointer;\n    box-sizing: border-box;\n    width: 40px;\n    height: 40px;\n    border: 1px solid #ffffff;\n    text-align: center;\n    vertical-align: middle;\n    user-select: none;\n    color: #333333;\n    font-size: 14px;\n    font-weight: 400;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button {\n    border-spacing: 1px;\n    cursor: pointer;\n    box-sizing: border-box;\n    text-align: center;\n    vertical-align: middle;\n    color: #333333;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date,\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected,\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__header {\n    box-sizing: border-box;\n    height: 40px;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    font-weight: 400;\n    font-size: 12px;\n    color: #333333;\n    padding: 0;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date {\n    font-size: 14px;\n}\nth.kuc-base-mobile-datetime-calendar-body-1-17-1__table__header {\n    font-weight: 700;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button,\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button,\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__header {\n    box-sizing: border-box;\n    border: 1px solid #ffffff;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button,\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button {\n    background: none;\n    cursor: pointer;\n    max-width: 40px;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected {\n    border: 1px solid #206694;\n    box-sizing: border-box;\n    text-align: center;\n    font-size: 14px;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date\n    .kuc-base-mobile-datetime-calendar-body-1-17-1__table__date__button:focus-visible {\n    outline: none;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--today {\n    color: #333333;\n    background: #d8d8d8;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--other-month {\n    color: #a5a5a5;\n}\n.kuc-base-mobile-datetime-calendar-body-1-17-1__table__date--selected:focus {\n    outline: none;\n}\n'),window.customElements.define("kuc-base-mobile-datetime-calendar-body-1-17-1",go));var mo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class fo extends bi{constructor(){super(...arguments),this.language="en",this._locale=Xt("en")}update(e){e.has("language")&&(this._locale=Xt(this.language)),super.update(e)}_handleClickCalendarFooterButtonClose(e){e.stopPropagation(),gi(this,"kuc:mobile-calendar-footer-click-close")}_handleClickCalendarFooterButtonNone(e){e.stopPropagation(),gi(this,"kuc:mobile-calendar-footer-click-none")}_handleClickCalendarFooterButtonToday(e){e.stopPropagation(),gi(this,"kuc:mobile-calendar-footer-click-today")}render(){return we`
+      <div class="kuc-base-mobile-datetime-calendar-footer-1-17-1__group">
         <button
           type="button"
-          class="kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button--today"
+          class="kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button--today"
           @click="${this._handleClickCalendarFooterButtonToday}"
         >
           ${this._locale.CALENDAR_FOOTER_TEXT.today}
         </button>
         <button
           type="button"
-          class="kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button--none"
+          class="kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button--none"
           @click="${this._handleClickCalendarFooterButtonNone}"
         >
           ${this._locale.CALENDAR_FOOTER_TEXT.none}
         </button>
         <button
           type="button"
-          class="kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button--close"
+          class="kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button--close"
           @click="${this._handleClickCalendarFooterButtonClose}"
         >
           ${this._locale.CALENDAR_FOOTER_TEXT.close}
         </button>
       </div>
-    `}}mo([Fe({type:String,attribute:"lang",reflect:!0})],fo.prototype,"language",void 0),mo([We()],fo.prototype,"_locale",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-footer-1-17-0")||(mi('\nkuc-base-mobile-datetime-calendar-footer-1-17-0,\nkuc-base-mobile-datetime-calendar-footer-1-17-0 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\n\nkuc-base-mobile-datetime-calendar-footer-1-17-0:lang(zh),\nkuc-base-mobile-datetime-calendar-footer-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-base-mobile-datetime-calendar-footer-1-17-0:lang(zh-TW),\nkuc-base-mobile-datetime-calendar-footer-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n.kuc-base-mobile-datetime-calendar-footer-1-17-0__group {\n    display: flex;\n    justify-content: space-between;\n    box-sizing: border-box;\n    padding: 0;\n    white-space: nowrap;\n}\n.kuc-base-mobile-datetime-calendar-footer-1-17-0__group__button {\n    background: transparent;\n    border: 1px solid transparent;\n    color: #206694;\n    height: 40px;\n    cursor: pointer;\n    font-size: 14px;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    font-weight: 700;\n}\n.kuc-base-mobile-datetime-calendar-footer-1-17-0__group__center {\n    width: 100%;\n}\n'),window.customElements.define("kuc-base-mobile-datetime-calendar-footer-1-17-0",fo));var vo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class ko extends bi{constructor(){super(...arguments),this.language="en",this.value="",this._month=1,this._year=(new Date).getFullYear()}update(e){e.has("value")&&this._updateValue(),super.update(e)}render(){return $e`
+    `}}mo([Ge({type:String,attribute:"lang",reflect:!0})],fo.prototype,"language",void 0),mo([Fe()],fo.prototype,"_locale",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-footer-1-17-1")||(mi('\nkuc-base-mobile-datetime-calendar-footer-1-17-1,\nkuc-base-mobile-datetime-calendar-footer-1-17-1 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\n\nkuc-base-mobile-datetime-calendar-footer-1-17-1:lang(zh),\nkuc-base-mobile-datetime-calendar-footer-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-base-mobile-datetime-calendar-footer-1-17-1:lang(zh-TW),\nkuc-base-mobile-datetime-calendar-footer-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n.kuc-base-mobile-datetime-calendar-footer-1-17-1__group {\n    display: flex;\n    justify-content: space-between;\n    box-sizing: border-box;\n    padding: 0;\n    white-space: nowrap;\n}\n.kuc-base-mobile-datetime-calendar-footer-1-17-1__group__button {\n    background: transparent;\n    border: 1px solid transparent;\n    color: #206694;\n    height: 40px;\n    cursor: pointer;\n    font-size: 14px;\n    outline: none;\n    padding: 0;\n    margin: 0;\n    font-weight: 700;\n}\n.kuc-base-mobile-datetime-calendar-footer-1-17-1__group__center {\n    width: 100%;\n}\n'),window.customElements.define("kuc-base-mobile-datetime-calendar-footer-1-17-1",fo));var vo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class ko extends bi{constructor(){super(...arguments),this.language="en",this.value="",this._month=1,this._year=(new Date).getFullYear()}update(e){e.has("value")&&this._updateValue(),super.update(e)}render(){return we`
       <div
-        class="kuc-base-mobile-datetime-calendar-1-17-0__group"
+        class="kuc-base-mobile-datetime-calendar-1-17-1__group"
         role="dialog"
         aria-modal="true"
         aria-label="Calender"
         @click="${this._handleClickCalendarGroup}"
       >
-        <kuc-base-mobile-datetime-calendar-header-1-17-0
+        <kuc-base-mobile-datetime-calendar-header-1-17-1
           .year="${this._year}"
           .month="${this._month}"
           .language="${this.language}"
           @kuc:mobile-calendar-header-change="${this._handleCalendarHeaderChange}"
-        ></kuc-base-mobile-datetime-calendar-header-1-17-0>
-        <kuc-base-mobile-datetime-calendar-body-1-17-0
+        ></kuc-base-mobile-datetime-calendar-header-1-17-1>
+        <kuc-base-mobile-datetime-calendar-body-1-17-1
           .year="${this._year}"
           .month="${this._month}"
           .value="${this.value}"
           .language="${this.language}"
-        ></kuc-base-mobile-datetime-calendar-body-1-17-0>
-        <kuc-base-mobile-datetime-calendar-footer-1-17-0
+        ></kuc-base-mobile-datetime-calendar-body-1-17-1>
+        <kuc-base-mobile-datetime-calendar-footer-1-17-1
           .language="${this.language}"
-        ></kuc-base-mobile-datetime-calendar-footer-1-17-0>
+        ></kuc-base-mobile-datetime-calendar-footer-1-17-1>
       </div>
-    `}updated(e){super.updated(e)}_handleClickCalendarGroup(e){e.stopPropagation()}_handleCalendarHeaderChange(e){const{year:t,month:i}=this._separateValue(e.detail.value);this._year=t,this._month=i}_updateValue(){""===this.value&&(this.value=Yt().slice(0,7)+"-01");const{year:e,month:t}=this._separateValue(this.value);this._year=e,this._month=t}_separateValue(e){const t=e.split("-");return{year:parseInt(t[0],10),month:parseInt(t[1],10)}}}vo([Fe({type:String,attribute:"lang",reflect:!0})],ko.prototype,"language",void 0),vo([Fe({type:String,reflect:!0})],ko.prototype,"value",void 0),vo([We()],ko.prototype,"_month",void 0),vo([We()],ko.prototype,"_year",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-1-17-0")||(mi("\n.kuc-base-mobile-datetime-calendar-1-17-0__group {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 290px;\n    padding: 0 10px;\n    background: #ffffff;\n    text-align: center;\n    font-size: 13px;\n    border: 1px solid #d8d8d8;\n}\n"),window.customElements.define("kuc-base-mobile-datetime-calendar-1-17-0",ko));var yo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class xo extends bi{constructor(){super(...arguments),this.inputId="",this.language="en",this.value="",this.disabled=!1,this.inputAriaInvalid=!1,this.required=!1,this._dateTimeCalendarVisible=!1,this._calendarValue="",this._inputValue=""}update(e){e.has("inputId")&&(this._GUID=this.inputId),(e.has("value")||e.has("language"))&&this._updateValueProp(),super.update(e)}render(){return $e`
-      <div class="kuc-mobile-base-date-1-17-0__group${this._getGroupClass()}">
+    `}updated(e){super.updated(e)}_handleClickCalendarGroup(e){e.stopPropagation()}_handleCalendarHeaderChange(e){const{year:t,month:i}=this._separateValue(e.detail.value);this._year=t,this._month=i}_updateValue(){""===this.value&&(this.value=Kt().slice(0,7)+"-01");const{year:e,month:t}=this._separateValue(this.value);this._year=e,this._month=t}_separateValue(e){const t=e.split("-");return{year:parseInt(t[0],10),month:parseInt(t[1],10)}}}vo([Ge({type:String,attribute:"lang",reflect:!0})],ko.prototype,"language",void 0),vo([Ge({type:String,reflect:!0})],ko.prototype,"value",void 0),vo([Fe()],ko.prototype,"_month",void 0),vo([Fe()],ko.prototype,"_year",void 0),window.customElements.get("kuc-base-mobile-datetime-calendar-1-17-1")||(mi("\n.kuc-base-mobile-datetime-calendar-1-17-1__group {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 290px;\n    padding: 0 10px;\n    background: #ffffff;\n    text-align: center;\n    font-size: 13px;\n    border: 1px solid #d8d8d8;\n}\n"),window.customElements.define("kuc-base-mobile-datetime-calendar-1-17-1",ko));var yo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class xo extends bi{constructor(){super(...arguments),this.inputId="",this.language="en",this.value="",this.disabled=!1,this.inputAriaInvalid=!1,this.required=!1,this._dateTimeCalendarVisible=!1,this._calendarValue="",this._inputValue=""}update(e){e.has("inputId")&&(this._GUID=this.inputId),(e.has("value")||e.has("language"))&&this._updateValueProp(),super.update(e)}render(){return we`
+      <div class="kuc-mobile-base-date-1-17-1__group${this._getGroupClass()}">
         <input
-          class="kuc-mobile-base-date-1-17-0__group__input"
+          class="kuc-mobile-base-date-1-17-1__group__input"
           type="text"
           id="${this._GUID}-label"
           readonly="readonly"
@@ -2218,7 +2217,7 @@
         />
         <button
           type="button"
-          class="kuc-mobile-base-date-1-17-0__group__button"
+          class="kuc-mobile-base-date-1-17-1__group__button"
           aria-label="calendar"
           @click="${this._handleClickOpenCalendar}"
           ?disabled="${this.disabled}"
@@ -2227,9 +2226,9 @@
         </button>
         ${this._getCalendarTemplate()}
       </div>
-    `}updated(e){this._dateTimeCalendarVisible&&this._setCalendarPosition(),super.updated(e)}_setCalendarPosition(){const{inputToBottom:e,inputToTop:t}=ni(this),i=this._inputEl.getBoundingClientRect().height;e>=t||(this._calendarEl.style.bottom=i+2+"px",this._calendarEl.style.top="auto")}_getGroupClass(){let e="";return this.disabled&&(e+=" kuc-mobile-base-date-1-17-0__group--disabled"),this.required&&(e+=" kuc-mobile-base-date-1-17-0__group--required"),e}_handleClickOpenCalendar(e){if(this._dateTimeCalendarVisible)return e.preventDefault(),void e.stopPropagation();this._calendarValue=this._getNewCalendarValue(this._inputValue||""),this._openCalendar()}_updateValueProp(){if(this.value)return this._inputValue=Wt(this.language,this.value),void(this._calendarValue=this.value);const e=Yt();this._inputValue="",this._calendarValue=this._calendarValue?this._calendarValue.slice(0,7)+"-01":e.slice(0,7)}_getNewCalendarValue(e){if(Jt(this.language,e))return qt(this.language,e);let t=this._calendarValue.slice(0,7);return""===e&&(t=this._calendarValue.slice(0,7)+"-01"),t}_closeCalendar(){this._dateTimeCalendarVisible=!1}_openCalendar(){this._dateTimeCalendarVisible=!0}_handleClickCalendarClickDate(e){this._closeCalendar(),e.detail.oldValue=this.value,e.detail.oldValue!==e.detail.value&&(this.value=e.detail.value,gi(this,"kuc:mobile-base-date-change",e.detail),this._btnToggleEl.focus())}_handleClickCalendarFooterButtonNone(){this._closeCalendar(),this._inputValue="";let e=this.value?this.value.slice(0,7)+"-01":"";e||(e=this._calendarValue.slice(0,7)+"-01"),this._calendarValue=e,this._dispathDateChangeCustomEvent("")}_handleClickCalendarFooterButtonToday(){this._closeCalendar();const e=Yt();this._dispathDateChangeCustomEvent(e)}_handleClickCalendarFooterButtonClose(){this._closeCalendar(),this._btnToggleEl.focus()}_handleCalendarBlurBody(e){e.preventDefault(),this._dateTimeCalendarVisible=!1}_dispathDateChangeCustomEvent(e){const t={value:e,oldValue:this.value};this.value=e,gi(this,"kuc:mobile-base-date-change",t),this._btnToggleEl.focus()}_getCalendarTemplate(){return this._dateTimeCalendarVisible?$e`
-          <kuc-base-mobile-datetime-calendar-1-17-0
-            class="kuc-base-mobile-date-1-17-0__calendar"
+    `}updated(e){this._dateTimeCalendarVisible&&this._setCalendarPosition(),super.updated(e)}_setCalendarPosition(){const{inputToBottom:e,inputToTop:t}=ii(this),i=this._inputEl.getBoundingClientRect().height;e>=t||(this._calendarEl.style.bottom=i+2+"px",this._calendarEl.style.top="auto")}_getGroupClass(){let e="";return this.disabled&&(e+=" kuc-mobile-base-date-1-17-1__group--disabled"),this.required&&(e+=" kuc-mobile-base-date-1-17-1__group--required"),e}_handleClickOpenCalendar(e){if(this._dateTimeCalendarVisible)return e.preventDefault(),void e.stopPropagation();this._calendarValue=this._getNewCalendarValue(this._inputValue||""),this._openCalendar()}_updateValueProp(){if(this.value)return this._inputValue=Ft(this.language,this.value),void(this._calendarValue=this.value);const e=Kt();this._inputValue="",this._calendarValue=this._calendarValue?this._calendarValue.slice(0,7)+"-01":e.slice(0,7)}_getNewCalendarValue(e){if(Yt(this.language,e))return Wt(this.language,e);let t=this._calendarValue.slice(0,7);return""===e&&(t=this._calendarValue.slice(0,7)+"-01"),t}_closeCalendar(){this._dateTimeCalendarVisible=!1}_openCalendar(){this._dateTimeCalendarVisible=!0}_handleClickCalendarClickDate(e){this._closeCalendar(),e.detail.oldValue=this.value,e.detail.oldValue!==e.detail.value&&(this.value=e.detail.value,gi(this,"kuc:mobile-base-date-change",e.detail),this._btnToggleEl.focus())}_handleClickCalendarFooterButtonNone(){this._closeCalendar(),this._inputValue="";let e=this.value?this.value.slice(0,7)+"-01":"";e||(e=this._calendarValue.slice(0,7)+"-01"),this._calendarValue=e,this._dispathDateChangeCustomEvent("")}_handleClickCalendarFooterButtonToday(){this._closeCalendar();const e=Kt();this._dispathDateChangeCustomEvent(e)}_handleClickCalendarFooterButtonClose(){this._closeCalendar(),this._btnToggleEl.focus()}_handleCalendarBlurBody(e){e.preventDefault(),this._dateTimeCalendarVisible=!1}_dispathDateChangeCustomEvent(e){const t={value:e,oldValue:this.value};this.value=e,gi(this,"kuc:mobile-base-date-change",t),this._btnToggleEl.focus()}_getCalendarTemplate(){return this._dateTimeCalendarVisible?we`
+          <kuc-base-mobile-datetime-calendar-1-17-1
+            class="kuc-base-mobile-date-1-17-1__calendar"
             .language="${this.language}"
             .value="${this._calendarValue}"
             ?hidden="${!this._dateTimeCalendarVisible}"
@@ -2239,8 +2238,8 @@
             @kuc:mobile-calendar-footer-click-close="${this._handleClickCalendarFooterButtonClose}"
             @kuc:mobile-calendar-body-blur="${this._handleCalendarBlurBody}"
           >
-          </kuc-base-mobile-datetime-calendar-1-17-0>
-        `:""}_getCalendarIconTemplate(){return $e`
+          </kuc-base-mobile-datetime-calendar-1-17-1>
+        `:""}_getCalendarIconTemplate(){return we`
       <svg width="24" height="24" viewBox="0 0 28 28" fill="none">
         <path
           fill-rule="evenodd"
@@ -2249,21 +2248,21 @@
           fill="#4b4b4b"
         />
       </svg>
-    `}}yo([Fe({type:String})],xo.prototype,"inputId",void 0),yo([Fe({type:String,attribute:"lang",reflect:!0})],xo.prototype,"language",void 0),yo([Fe({type:String,reflect:!0})],xo.prototype,"value",void 0),yo([Fe({type:Boolean})],xo.prototype,"disabled",void 0),yo([Fe({type:Boolean})],xo.prototype,"inputAriaInvalid",void 0),yo([Fe({type:Boolean})],xo.prototype,"required",void 0),yo([Ke(".kuc-mobile-base-date-1-17-0__group__button")],xo.prototype,"_btnToggleEl",void 0),yo([Ke(".kuc-mobile-base-date-1-17-0__group__input")],xo.prototype,"_inputEl",void 0),yo([Ke(".kuc-base-mobile-date-1-17-0__calendar")],xo.prototype,"_calendarEl",void 0),yo([We()],xo.prototype,"_dateTimeCalendarVisible",void 0),window.customElements.get("kuc-mobile-base-date-1-17-0")||(mi('\nkuc-mobile-base-date-1-17-0,\nkuc-mobile-base-date-1-17-0 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-mobile-base-date-1-17-0:lang(zh),\nkuc-mobile-base-date-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-mobile-base-date-1-17-0:lang(zh-TW),\nkuc-mobile-base-date-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n.kuc-mobile-base-date-1-17-0__group {\n    display: flex;\n    align-items: center;\n    position: relative;\n    border-radius: 5.148px;\n    background-color: #ffffff;\n}\n.kuc-mobile-base-date-1-17-0__group__input[aria-required="true"] {\n    border-color: #cf4a38;\n}\ninput.kuc-mobile-base-date-1-17-0__group__input {\n    color: #000000;\n    width: 100%;\n    height: 31.28px;\n    font-size: 99%;\n    -webkit-flex-grow: 1;\n    flex-grow: 1;\n    padding: 5.148px;\n    border-radius: 5.148px;\n    box-shadow: 0px 1px 0px #ffffff, inset 0px 2px 3px #dadada;\n    border: 1px solid #b3b3b3;\n    font-weight: 400;\n    -webkit-appearance: none;\n    appearance: none;\n    outline: 0;\n    background: transparent;\n    box-sizing: border-box;\n}\n.kuc-mobile-base-date-1-17-0__group--disabled {\n    background-color: #d5d7d9;\n    opacity: 1;\n}\n.kuc-mobile-base-date-1-17-0__group--disabled input {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n}\n.kuc-base-mobile-date-1-17-0__calendar {\n    position: absolute;\n    left: 0;\n    top: 39px;\n    z-index: 1000;\n}\n.kuc-mobile-base-date-1-17-0__group__button {\n    position: absolute;\n    display: flex;\n    right: 10px;\n    background-color: transparent;\n    border: 0;\n    padding: 0;\n    height: 100%;\n    align-items: center;\n}\n'),window.customElements.define("kuc-mobile-base-date-1-17-0",xo));var wo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let $o;(()=>{if($o=window.customElements.get("kuc-mobile-date-picker-1-17-0"),!$o){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.language="auto",this.value="",this.visible=!0,this._dateConverted="",this._inputValue="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!(void 0!==this.value&&""!==this.value&&(ki(this.value)?(this._dateConverted=ri(this.value),""!==this._dateConverted&&!wi(this._dateConverted)&&(this.throwErrorAfterUpdateComplete(Tt),1)):(this.throwErrorAfterUpdateComplete(Tt),1)))}willUpdate(e){e.has("value")&&void 0!==this.value&&""!==this.value&&(this.value=this._dateConverted)}update(e){e.has("value")&&this._updateInputValue(),super.update(e)}render(){return $e`
-        <div class="kuc-mobile-date-picker-1-17-0__group">
+    `}}yo([Ge({type:String})],xo.prototype,"inputId",void 0),yo([Ge({type:String,attribute:"lang",reflect:!0})],xo.prototype,"language",void 0),yo([Ge({type:String,reflect:!0})],xo.prototype,"value",void 0),yo([Ge({type:Boolean})],xo.prototype,"disabled",void 0),yo([Ge({type:Boolean})],xo.prototype,"inputAriaInvalid",void 0),yo([Ge({type:Boolean})],xo.prototype,"required",void 0),yo([qe(".kuc-mobile-base-date-1-17-1__group__button")],xo.prototype,"_btnToggleEl",void 0),yo([qe(".kuc-mobile-base-date-1-17-1__group__input")],xo.prototype,"_inputEl",void 0),yo([qe(".kuc-base-mobile-date-1-17-1__calendar")],xo.prototype,"_calendarEl",void 0),yo([Fe()],xo.prototype,"_dateTimeCalendarVisible",void 0),window.customElements.get("kuc-mobile-base-date-1-17-1")||(mi('\nkuc-mobile-base-date-1-17-1,\nkuc-mobile-base-date-1-17-1 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-mobile-base-date-1-17-1:lang(zh),\nkuc-mobile-base-date-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-mobile-base-date-1-17-1:lang(zh-TW),\nkuc-mobile-base-date-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\n.kuc-mobile-base-date-1-17-1__group {\n    display: flex;\n    align-items: center;\n    position: relative;\n    border-radius: 5.148px;\n    background-color: #ffffff;\n}\n.kuc-mobile-base-date-1-17-1__group__input[aria-required="true"] {\n    border-color: #cf4a38;\n}\ninput.kuc-mobile-base-date-1-17-1__group__input {\n    color: #000000;\n    width: 100%;\n    height: 31.28px;\n    font-size: 99%;\n    -webkit-flex-grow: 1;\n    flex-grow: 1;\n    padding: 5.148px;\n    border-radius: 5.148px;\n    box-shadow: 0px 1px 0px #ffffff, inset 0px 2px 3px #dadada;\n    border: 1px solid #b3b3b3;\n    font-weight: 400;\n    -webkit-appearance: none;\n    appearance: none;\n    outline: 0;\n    background: transparent;\n    box-sizing: border-box;\n}\n.kuc-mobile-base-date-1-17-1__group--disabled {\n    background-color: #d5d7d9;\n    opacity: 1;\n}\n.kuc-mobile-base-date-1-17-1__group--disabled input {\n    color: #999999;\n    -webkit-text-fill-color: #999999;\n}\n.kuc-base-mobile-date-1-17-1__calendar {\n    position: absolute;\n    left: 0;\n    top: 39px;\n    z-index: 1000;\n}\n.kuc-mobile-base-date-1-17-1__group__button {\n    position: absolute;\n    display: flex;\n    right: 10px;\n    background-color: transparent;\n    border: 0;\n    padding: 0;\n    height: 100%;\n    align-items: center;\n}\n'),window.customElements.define("kuc-mobile-base-date-1-17-1",xo));var wo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let $o;(()=>{if($o=window.customElements.get("kuc-mobile-date-picker-1-17-1"),!$o){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.disabled=!1,this.requiredIcon=!1,this.language="auto",this.value="",this.visible=!0,this._dateConverted="",this._inputValue="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return!(void 0!==this.value&&""!==this.value&&(ki(this.value)?(this._dateConverted=si(this.value),""!==this._dateConverted&&!wi(this._dateConverted)&&(this.throwErrorAfterUpdateComplete(St),1)):(this.throwErrorAfterUpdateComplete(St),1)))}willUpdate(e){e.has("value")&&void 0!==this.value&&""!==this.value&&(this.value=this._dateConverted)}update(e){e.has("value")&&this._updateInputValue(),super.update(e)}render(){return we`
+        <div class="kuc-mobile-date-picker-1-17-1__group">
           <label
-            class="kuc-mobile-date-picker-1-17-0__group__label"
+            class="kuc-mobile-date-picker-1-17-1__group__label"
             for="${this._GUID}-label"
             @click="${this._handleClickLabel}"
             ?hidden="${!this.label}"
           >
-            <kuc-base-mobile-label-1-17-0
+            <kuc-base-mobile-label-1-17-1
               .requiredIcon="${this.requiredIcon}"
               .text="${this.label}"
-            ></kuc-base-mobile-label-1-17-0>
+            ></kuc-base-mobile-label-1-17-1>
           </label>
-          <kuc-mobile-base-date-1-17-0
-            class="kuc-mobile-date-picker-1-17-0__group__base__date"
+          <kuc-mobile-base-date-1-17-1
+            class="kuc-mobile-date-picker-1-17-1__group__base__date"
             .disabled="${this.disabled}"
             .value="${this._inputValue}"
             .inputId="${this._GUID}"
@@ -2272,17 +2271,17 @@
             .language="${this._getLanguage()}"
             @kuc:mobile-base-date-change="${this._handleDateChange}"
           >
-          </kuc-mobile-base-date-1-17-0>
-          <kuc-base-mobile-error-1-17-0 .guid="${this._GUID}" .text="${this.error}">
-          </kuc-base-mobile-error-1-17-0>
+          </kuc-mobile-base-date-1-17-1>
+          <kuc-base-mobile-error-1-17-1 .guid="${this._GUID}" .text="${this.error}">
+          </kuc-base-mobile-error-1-17-1>
         </div>
-      `}_updateInputValue(){void 0!==this.value&&""!==this.value?this._inputValue=this.value:this._inputValue=""}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_handleClickLabel(e){e.preventDefault()}_handleDateChange(e){e.stopPropagation(),e.preventDefault();const t={oldValue:this.value,value:""};this.value=e.detail.value,t.value=this.value,this._dispatchChangeEvent(t)}_dispatchChangeEvent(e){gi(this,"change",e)}}wo([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),wo([Fe({type:String})],e.prototype,"error",void 0),wo([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),wo([Fe({type:String})],e.prototype,"label",void 0),wo([Fe({type:Boolean})],e.prototype,"disabled",void 0),wo([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),wo([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),wo([Fe({type:String})],e.prototype,"value",void 0),wo([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),wo([We()],e.prototype,"_inputValue",void 0),window.customElements.define("kuc-mobile-date-picker-1-17-0",e),mi('\nkuc-mobile-date-picker-1-17-0,\nkuc-mobile-date-picker-1-17-0 * {\n  color: #333333;\n  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-mobile-date-picker-1-17-0:lang(zh),\nkuc-mobile-date-picker-1-17-0:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-mobile-date-picker-1-17-0:lang(zh-TW),\nkuc-mobile-date-picker-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\nkuc-mobile-date-picker-1-17-0 {\n  font-size: 13px;\n  color: #333333;\n  display: inline-table;\n  vertical-align: top;\n  width: 100%;\n}\nkuc-mobile-date-picker-1-17-0[hidden] {\n  display: none;\n}\n.kuc-mobile-date-picker-1-17-0__group {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0px;\n  height: auto;\n  margin: 0px;\n}\n.kuc-mobile-date-picker-1-17-0__group__label {\n  display: inline-block;\n  font-weight: bold;\n  line-height: 1.5;\n  padding: 0px;\n  white-space: nowrap;\n  margin: 0 0 4px 0;\n}\n.kuc-mobile-date-picker-1-17-0__group__base__date {\n  width: 130px;\n  margin-right: 0.5em;\n  margin-left: 0.5em;\n}\n.kuc-mobile-date-picker-1-17-0__group__label[hidden] {\n  display: none;\n}\n.kuc-mobile-date-picker-1-17-0__group input.kuc-base-date-1-17-0__input {\n  width: 100px;\n  height: 40px;\n  padding: 0px;\n  text-align: center;\n  border: 1px solid #e3e7e8;\n  box-sizing: border-box;\n  font-size: 14px;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n\n.kuc-mobile-date-picker-1-17-0__group input.kuc-base-date-1-17-0__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\n.kuc-mobile-date-picker-1-17-0__group input.kuc-base-date-1-17-0__input--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: #333333;\n}\n.kuc-mobile-date-picker-1-17-0__group input.kuc-base-date-1-17-0__input:disabled {\n  color: #888888;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n'),$o=e}})();var Co=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Io extends bi{constructor(e){super(),this.guid="",this.language="en",this.value="",this.disabled=!1,this.hour12=!1,this.required=!1,this._timeStep=1,this._hours="",this._minutes="",this._suffix="",this._locale=Qt("en");const t=vi(e);Object.assign(this,t)}update(e){e.has("language")&&(this._locale=Qt(this.language)),e.has("hour12")&&(this._hourOptions=((e=!1)=>e?ei("AM").concat(ei("PM")):(()=>{const e=[];e.push({value:"00",label:"00"});for(let t=1;t<=23;t++)e.push({value:Zt(t),label:`${Zt(t)}`});return e})())(this.hour12)),e.has("_timeStep")&&(this._minuteOptions=((e=1)=>{const t=[];for(let i=0;i<=59;i+=e)t.push({value:Zt(i),label:Zt(i)});return t})(this._timeStep)),super.update(e)}render(){return $e`
+      `}_updateInputValue(){void 0!==this.value&&""!==this.value?this._inputValue=this.value:this._inputValue=""}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_handleClickLabel(e){e.preventDefault()}_handleDateChange(e){e.stopPropagation(),e.preventDefault();const t={oldValue:this.value,value:""};this.value=e.detail.value,t.value=this.value,this._dispatchChangeEvent(t)}_dispatchChangeEvent(e){gi(this,"change",e)}}wo([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),wo([Ge({type:String})],e.prototype,"error",void 0),wo([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),wo([Ge({type:String})],e.prototype,"label",void 0),wo([Ge({type:Boolean})],e.prototype,"disabled",void 0),wo([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),wo([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),wo([Ge({type:String})],e.prototype,"value",void 0),wo([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),wo([Fe()],e.prototype,"_inputValue",void 0),window.customElements.define("kuc-mobile-date-picker-1-17-1",e),mi('\nkuc-mobile-date-picker-1-17-1,\nkuc-mobile-date-picker-1-17-1 * {\n  color: #333333;\n  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-mobile-date-picker-1-17-1:lang(zh),\nkuc-mobile-date-picker-1-17-1:lang(zh) * {\n  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-mobile-date-picker-1-17-1:lang(zh-TW),\nkuc-mobile-date-picker-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\nkuc-mobile-date-picker-1-17-1 {\n  font-size: 13px;\n  color: #333333;\n  display: inline-table;\n  vertical-align: top;\n  width: 100%;\n}\nkuc-mobile-date-picker-1-17-1[hidden] {\n  display: none;\n}\n.kuc-mobile-date-picker-1-17-1__group {\n  display: flex;\n  flex-direction: column;\n  border: none;\n  padding: 0px;\n  height: auto;\n  margin: 0px;\n}\n.kuc-mobile-date-picker-1-17-1__group__label {\n  display: inline-block;\n  font-weight: bold;\n  line-height: 1.5;\n  padding: 0px;\n  white-space: nowrap;\n  margin: 0 0 4px 0;\n}\n.kuc-mobile-date-picker-1-17-1__group__base__date {\n  width: 130px;\n  margin-right: 0.5em;\n  margin-left: 0.5em;\n}\n.kuc-mobile-date-picker-1-17-1__group__label[hidden] {\n  display: none;\n}\n.kuc-mobile-date-picker-1-17-1__group input.kuc-base-date-1-17-1__input {\n  width: 100px;\n  height: 40px;\n  padding: 0px;\n  text-align: center;\n  border: 1px solid #e3e7e8;\n  box-sizing: border-box;\n  font-size: 14px;\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n}\n\n.kuc-mobile-date-picker-1-17-1__group input.kuc-base-date-1-17-1__input:focus {\n  outline: none;\n  border: 1px solid #3498db;\n}\n.kuc-mobile-date-picker-1-17-1__group input.kuc-base-date-1-17-1__input--focus {\n  box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;\n  border: 1px solid #3498db;\n  background-color: #ffffff;\n  color: #333333;\n}\n.kuc-mobile-date-picker-1-17-1__group input.kuc-base-date-1-17-1__input:disabled {\n  color: #888888;\n  background-color: #d4d7d7;\n  box-shadow: none;\n  cursor: not-allowed;\n}\n'),$o=e}})();var Co=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};class Io extends bi{constructor(e){super(),this.guid="",this.language="en",this.value="",this.disabled=!1,this.hour12=!1,this.required=!1,this._timeStep=1,this._hours="",this._minutes="",this._suffix="",this._locale=Xt("en");const t=vi(e);Object.assign(this,t)}update(e){e.has("language")&&(this._locale=Xt(this.language)),e.has("hour12")&&(this._hourOptions=((e=!1)=>e?Qt("AM").concat(Qt("PM")):(()=>{const e=[];e.push({value:"00",label:"00"});for(let t=1;t<=23;t++)e.push({value:Jt(t),label:`${Jt(t)}`});return e})())(this.hour12)),e.has("_timeStep")&&(this._minuteOptions=((e=1)=>{const t=[];for(let i=0;i<=59;i+=e)t.push({value:Jt(i),label:Jt(i)});return t})(this._timeStep)),super.update(e)}render(){return we`
       <fieldset
-        class="kuc-base-mobile-time-1-17-0__group${this.disabled?" kuc-base-mobile-time-1-17-0__group--disabled":""}${this.required?" kuc-base-mobile-time-1-17-0__group--required":""}"
+        class="kuc-base-mobile-time-1-17-1__group${this.disabled?" kuc-base-mobile-time-1-17-1__group--disabled":""}${this.required?" kuc-base-mobile-time-1-17-1__group--required":""}"
         aria-label="label-text"
       >
         <select
-          class="kuc-base-mobile-time-1-17-0__group__hours"
+          class="kuc-base-mobile-time-1-17-1__group__hours"
           aria-label="Hour"
           aria-describedby="${this.guid}-error"
           ?disabled="${this.disabled}"
@@ -2291,9 +2290,9 @@
           <option value selected></option>
           ${this._getOptionsHourTemplate()}
         </select>
-        <span class="kuc-base-mobile-time-1-17-0__group__colon">:</span>
+        <span class="kuc-base-mobile-time-1-17-1__group__colon">:</span>
         <select
-          class="kuc-base-mobile-time-1-17-0__group__minutes"
+          class="kuc-base-mobile-time-1-17-1__group__minutes"
           aria-label="Minute"
           aria-describedby="${this.guid}-error"
           ?disabled="${this.disabled}"
@@ -2303,20 +2302,20 @@
           ${this._getOptionsMinuteTemplate()}
         </select>
       </fieldset>
-    `}updated(e){e.has("value")&&this._updateInputValue(),super.update(e)}_updateInputValue(){const e=((e,t)=>{const i={hours:"",minutes:"",suffix:""},n=e.split(":"),o=parseInt(n[0],10),a=parseInt(n[1],10),s=o%kt;return isNaN(s)||(i.hours=Zt(t?zt(s):s),i.suffix=t?Rt(s):""),isNaN(a)||(i.minutes=Zt(a)),i})(this.value,this.hour12);this._hours=e.hours,this._minutes=e.minutes,this._suffix=e.suffix||"",this._setValueToInput(e)}_setValueToInput(e){this._minutesEl.value=e.minutes,e.suffix?this._hoursEl.value=e.suffix+" "+e.hours:this._hoursEl.value=e.hours}_handleChangeMinutes(e){e.preventDefault(),e.stopPropagation();const t=this._getTimeValueString(),i=e.target.value;this._minutes=i;const n=this._getTimeValueString();this.value=n,this._dispatchEventTimeChange(n,t)}_handleChangeHours(e){e.preventDefault(),e.stopPropagation();const t=this._getTimeValueString(),i=e.target.value.split(" ");2===i.length?(this._hours=i[1],this._suffix=i[0]):(this._hours=i[0],this._suffix="");const n=this._getTimeValueString();this.value=n,this._dispatchEventTimeChange(n,t)}_getTimeValueString(){const e=`${this._hours}:${this._minutes}`;return this._suffix?jt(`${e} ${this._suffix}`):jt(e)}_dispatchEventTimeChange(e,t){const i=":"===e?"":e,n={value:i,oldValue:":"===t?"":t};n.error=yi(i)?"":this._locale.INVALID_TIME_FORMAT,gi(this,"kuc:base-mobile-time-change",n)}_getOptionsMinuteTemplate(){return this._minuteOptions.map((e=>$e` <option value="${e.value}">${e.label}</option> `))}_getOptionsHourTemplate(){return this._hourOptions.map((e=>$e` <option value="${e.value}">${e.label}</option> `))}}Co([Fe({type:String})],Io.prototype,"guid",void 0),Co([Fe({type:String,attribute:"lang",reflect:!0})],Io.prototype,"language",void 0),Co([Fe({type:String})],Io.prototype,"value",void 0),Co([Fe({type:Boolean})],Io.prototype,"disabled",void 0),Co([Fe({type:Boolean})],Io.prototype,"hour12",void 0),Co([Fe({type:Boolean})],Io.prototype,"required",void 0),Co([We()],Io.prototype,"_timeStep",void 0),Co([We()],Io.prototype,"_hours",void 0),Co([We()],Io.prototype,"_minutes",void 0),Co([We()],Io.prototype,"_suffix",void 0),Co([We()],Io.prototype,"_hourOptions",void 0),Co([We()],Io.prototype,"_minuteOptions",void 0),Co([Ke(".kuc-base-mobile-time-1-17-0__group__hours")],Io.prototype,"_hoursEl",void 0),Co([Ke(".kuc-base-mobile-time-1-17-0__group__minutes")],Io.prototype,"_minutesEl",void 0),window.customElements.get("kuc-base-mobile-time-1-17-0")||(mi('\n    kuc-base-mobile-time-1-17-0,\n    kuc-base-mobile-time-1-17-0 * {\n        font-size: 13px;\n        font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n        "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n        "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n    }\n    kuc-base-mobile-time-1-17-0:lang(zh),\n    kuc-base-mobile-time-1-17-0:lang(zh) * {\n        font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n        Verdana, sans-serif;\n    }\n    kuc-base-mobile-time-1-17-0:lang(zh-TW),\n    kuc-base-mobile-time-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n        Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n        Verdana,sans-serif\n    }\n    kuc-base-mobile-time-1-17-0 {\n        width: 100%;\n        display: inline-block;\n        vertical-align: top;\n    }\n    kuc-base-mobile-time-1-17-0[hidden] {\n        display: none;\n    }\n    .kuc-base-mobile-time-1-17-0__group {\n        padding: 0;\n        margin: 0;\n        height: 31.28px;\n        border: 1px solid #b3b3b3;\n        border-radius: 5.2px;\n        box-sizing: border-box;\n        background-color: #ffffff;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-align-items: center;\n        align-items: center;\n        box-shadow: 0px 1px 0px #ffffff, inset 0px 2px 3px #dadada;\n    }\n    .kuc-base-mobile-time-1-17-0__group--required {\n        border-color: #cf4a38;\n    }\n    .kuc-base-mobile-time-1-17-0__group__hours {\n        padding: 5.148px 7.722px;\n    }\n    .kuc-base-mobile-time-1-17-0__group__minutes {\n        padding: 5.148px 7.722px;\n        -webkit-flex-grow: 1;\n        flex-grow: 1;\n    }\n    .kuc-base-mobile-time-1-17-0__group__hours,\n    .kuc-base-mobile-time-1-17-0__group__minutes {\n        font-size: 99%;\n        height: 100%;\n        color: #000000;\n        border: none;\n        border-radius: 5.148px;\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        background-color: transparent;\n    }\n    .kuc-base-mobile-time-1-17-0__group__colon {\n        color: #000000;\n    }\n    .kuc-base-mobile-time-1-17-0__group__hours:disabled\n        + .kuc-base-mobile-time-1-17-0__group__colon {\n        color: #999999;\n        -webkit-text-fill-color: #999999;\n        opacity: 1;\n    }\n    .kuc-base-mobile-time-1-17-0__group--disabled {\n        color: #999999;\n        -webkit-text-fill-color: #999999;\n        background-color: #d5d7d9;\n        opacity: 1;\n    }\n    .kuc-base-mobile-time-1-17-0__group__hours:disabled,\n    .kuc-base-mobile-time-1-17-0__group__minutes:disabled {\n        color: #999999;\n        -webkit-text-fill-color: #999999;\n        opacity: 1;\n    }\n    .kuc-base-mobile-time-1-17-0__group__hours:focus {\n        outline: none;\n    }\n    .kuc-base-mobile-time-1-17-0__group__minutes:focus {\n        outline: none;\n    }\n'),window.customElements.define("kuc-base-mobile-time-1-17-0",Io));var Eo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let So;(()=>{if(So=window.customElements.get("kuc-mobile-time-picker-1-17-0"),!So){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this._inputValue="",this._errorFormat="",this._isSelectError=!1,this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return void 0===this.value||""===this.value||!!yi(this.value)||(this.throwErrorAfterUpdateComplete(Tt),!1)}willUpdate(){void 0!==this.value&&""!==this.value&&(this.value=li(this.value))}update(e){e.has("value")&&!this._isSelectError&&(void 0===this.value?this._inputValue="":this._inputValue=this.value||"",this._errorFormat=""),super.update(e)}render(){return $e`
-        <div class="kuc-mobile-time-picker-1-17-0__group">
+    `}updated(e){e.has("value")&&this._updateInputValue(),super.update(e)}_updateInputValue(){const e=((e,t)=>{const i={hours:"",minutes:"",suffix:""},n=e.split(":"),o=parseInt(n[0],10),a=parseInt(n[1],10),s=o%vt;return isNaN(s)||(i.hours=Jt(t?Pt(s):s),i.suffix=t?zt(s):""),isNaN(a)||(i.minutes=Jt(a)),i})(this.value,this.hour12);this._hours=e.hours,this._minutes=e.minutes,this._suffix=e.suffix||"",this._setValueToInput(e)}_setValueToInput(e){this._minutesEl.value=e.minutes,e.suffix?this._hoursEl.value=e.suffix+" "+e.hours:this._hoursEl.value=e.hours}_handleChangeMinutes(e){e.preventDefault(),e.stopPropagation();const t=this._getTimeValueString(),i=e.target.value;this._minutes=i;const n=this._getTimeValueString();this.value=n,this._dispatchEventTimeChange(n,t)}_handleChangeHours(e){e.preventDefault(),e.stopPropagation();const t=this._getTimeValueString(),i=e.target.value.split(" ");2===i.length?(this._hours=i[1],this._suffix=i[0]):(this._hours=i[0],this._suffix="");const n=this._getTimeValueString();this.value=n,this._dispatchEventTimeChange(n,t)}_getTimeValueString(){const e=`${this._hours}:${this._minutes}`;return this._suffix?Rt(`${e} ${this._suffix}`):Rt(e)}_dispatchEventTimeChange(e,t){const i=":"===e?"":e,n={value:i,oldValue:":"===t?"":t};n.error=yi(i)?"":this._locale.INVALID_TIME_FORMAT,gi(this,"kuc:base-mobile-time-change",n)}_getOptionsMinuteTemplate(){return this._minuteOptions.map((e=>we` <option value="${e.value}">${e.label}</option> `))}_getOptionsHourTemplate(){return this._hourOptions.map((e=>we` <option value="${e.value}">${e.label}</option> `))}}Co([Ge({type:String})],Io.prototype,"guid",void 0),Co([Ge({type:String,attribute:"lang",reflect:!0})],Io.prototype,"language",void 0),Co([Ge({type:String})],Io.prototype,"value",void 0),Co([Ge({type:Boolean})],Io.prototype,"disabled",void 0),Co([Ge({type:Boolean})],Io.prototype,"hour12",void 0),Co([Ge({type:Boolean})],Io.prototype,"required",void 0),Co([Fe()],Io.prototype,"_timeStep",void 0),Co([Fe()],Io.prototype,"_hours",void 0),Co([Fe()],Io.prototype,"_minutes",void 0),Co([Fe()],Io.prototype,"_suffix",void 0),Co([Fe()],Io.prototype,"_hourOptions",void 0),Co([Fe()],Io.prototype,"_minuteOptions",void 0),Co([qe(".kuc-base-mobile-time-1-17-1__group__hours")],Io.prototype,"_hoursEl",void 0),Co([qe(".kuc-base-mobile-time-1-17-1__group__minutes")],Io.prototype,"_minutesEl",void 0),window.customElements.get("kuc-base-mobile-time-1-17-1")||(mi('\n    kuc-base-mobile-time-1-17-1,\n    kuc-base-mobile-time-1-17-1 * {\n        font-size: 13px;\n        font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n        "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n        "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n    }\n    kuc-base-mobile-time-1-17-1:lang(zh),\n    kuc-base-mobile-time-1-17-1:lang(zh) * {\n        font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n        Verdana, sans-serif;\n    }\n    kuc-base-mobile-time-1-17-1:lang(zh-TW),\n    kuc-base-mobile-time-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n        Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n        Verdana,sans-serif\n    }\n    kuc-base-mobile-time-1-17-1 {\n        width: 100%;\n        display: inline-block;\n        vertical-align: top;\n    }\n    kuc-base-mobile-time-1-17-1[hidden] {\n        display: none;\n    }\n    .kuc-base-mobile-time-1-17-1__group {\n        padding: 0;\n        margin: 0;\n        height: 31.28px;\n        border: 1px solid #b3b3b3;\n        border-radius: 5.2px;\n        box-sizing: border-box;\n        background-color: #ffffff;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-align-items: center;\n        align-items: center;\n        box-shadow: 0px 1px 0px #ffffff, inset 0px 2px 3px #dadada;\n    }\n    .kuc-base-mobile-time-1-17-1__group--required {\n        border-color: #cf4a38;\n    }\n    .kuc-base-mobile-time-1-17-1__group__hours {\n        padding: 5.148px 7.722px;\n    }\n    .kuc-base-mobile-time-1-17-1__group__minutes {\n        padding: 5.148px 7.722px;\n        -webkit-flex-grow: 1;\n        flex-grow: 1;\n    }\n    .kuc-base-mobile-time-1-17-1__group__hours,\n    .kuc-base-mobile-time-1-17-1__group__minutes {\n        font-size: 99%;\n        height: 100%;\n        color: #000000;\n        border: none;\n        border-radius: 5.148px;\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        background-color: transparent;\n    }\n    .kuc-base-mobile-time-1-17-1__group__colon {\n        color: #000000;\n    }\n    .kuc-base-mobile-time-1-17-1__group__hours:disabled\n        + .kuc-base-mobile-time-1-17-1__group__colon {\n        color: #999999;\n        -webkit-text-fill-color: #999999;\n        opacity: 1;\n    }\n    .kuc-base-mobile-time-1-17-1__group--disabled {\n        color: #999999;\n        -webkit-text-fill-color: #999999;\n        background-color: #d5d7d9;\n        opacity: 1;\n    }\n    .kuc-base-mobile-time-1-17-1__group__hours:disabled,\n    .kuc-base-mobile-time-1-17-1__group__minutes:disabled {\n        color: #999999;\n        -webkit-text-fill-color: #999999;\n        opacity: 1;\n    }\n    .kuc-base-mobile-time-1-17-1__group__hours:focus {\n        outline: none;\n    }\n    .kuc-base-mobile-time-1-17-1__group__minutes:focus {\n        outline: none;\n    }\n'),window.customElements.define("kuc-base-mobile-time-1-17-1",Io));var Eo=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let So;(()=>{if(So=window.customElements.get("kuc-mobile-time-picker-1-17-1"),!So){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this._inputValue="",this._errorFormat="",this._isSelectError=!1,this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return void 0===this.value||""===this.value||!!yi(this.value)||(this.throwErrorAfterUpdateComplete(St),!1)}willUpdate(){void 0!==this.value&&""!==this.value&&(this.value=ri(this.value))}update(e){e.has("value")&&!this._isSelectError&&(void 0===this.value?this._inputValue="":this._inputValue=this.value||"",this._errorFormat=""),super.update(e)}render(){return we`
+        <div class="kuc-mobile-time-picker-1-17-1__group">
           <label
-            class="kuc-mobile-time-picker-1-17-0__group__label"
+            class="kuc-mobile-time-picker-1-17-1__group__label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-mobile-label-1-17-0
+            <kuc-base-mobile-label-1-17-1
               .guid="${this._GUID}"
               .text="${this.label}"
               .requiredIcon="${this.requiredIcon}"
-            ></kuc-base-mobile-label-1-17-0>
+            ></kuc-base-mobile-label-1-17-1>
           </label>
-          <div class="kuc-base-mobile-time-1-17-0__group__wrapper">
-            <kuc-base-mobile-time-1-17-0
+          <div class="kuc-base-mobile-time-1-17-1__group__wrapper">
+            <kuc-base-mobile-time-1-17-1
               .value="${this._inputValue}"
               .disabled="${this.disabled}"
               .hour12="${this.hour12}"
@@ -2324,31 +2323,31 @@
               .language="${this._getLanguage()}"
               .required="${this.requiredIcon}"
               @kuc:base-mobile-time-change="${this._handleTimeChange}"
-            ></kuc-base-mobile-time-1-17-0>
+            ></kuc-base-mobile-time-1-17-1>
           </div>
-          <kuc-base-mobile-error-1-17-0
+          <kuc-base-mobile-error-1-17-1
             .guid="${this._GUID}"
             .text="${this._errorFormat||this.error}"
             ariaLive="assertive"
-          ></kuc-base-mobile-error-1-17-0>
+          ></kuc-base-mobile-error-1-17-1>
         </div>
-      `}updated(){this._isSelectError=!1}_handleTimeChange(e){e.preventDefault(),e.stopPropagation();const t={value:e.detail.value,oldValue:this.value};if(this._inputValue=e.detail.value,e.detail.error)return this._isSelectError=!0,this._errorFormat=e.detail.error,this.value=void 0,t.value=void 0,this.error="",void gi(this,"change",t);this._isSelectError=!1,this._errorFormat="",this.value=e.detail.value,gi(this,"change",t)}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}}Eo([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Eo([Fe({type:String})],e.prototype,"error",void 0),Eo([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Eo([Fe({type:String})],e.prototype,"label",void 0),Eo([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),Eo([Fe({type:String,hasChanged:(e,t)=>(""===e||void 0===e)&&e===t||e!==t})],e.prototype,"value",void 0),Eo([Fe({type:Boolean})],e.prototype,"disabled",void 0),Eo([Fe({type:Boolean})],e.prototype,"hour12",void 0),Eo([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),Eo([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),Eo([We()],e.prototype,"_inputValue",void 0),Eo([We()],e.prototype,"_errorFormat",void 0),window.customElements.define("kuc-mobile-time-picker-1-17-0",e),mi('\n    kuc-mobile-time-picker-1-17-0,\n    kuc-mobile-time-picker-1-17-0 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n        "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n        "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n    }\n    kuc-mobile-time-picker-1-17-0:lang(zh),\n    kuc-mobile-time-picker-1-17-0:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n        Verdana, sans-serif;\n    }\n    kuc-mobile-time-picker-1-17-0:lang(zh-TW),\n    kuc-mobile-time-picker-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n        Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n        Verdana,sans-serif\n    }\n    kuc-mobile-time-picker-1-17-0 {\n    font-size: 13px;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    }\n    kuc-mobile-time-picker-1-17-0[hidden] {\n    display: none;\n    }\n    .kuc-mobile-time-picker-1-17-0__group__label {\n    display: inline-block;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n    }\n    .kuc-mobile-time-picker-1-17-0__group__label[hidden] {\n    display: none;\n    }\n    .kuc-base-mobile-time-1-17-0__group__wrapper {\n    padding-left: 0.5em;\n    max-width: 10px;\n    }\n'),So=e}})();var To=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Ao;(()=>{if(Ao=window.customElements.get("kuc-mobile-datetime-picker-1-17-0"),!Ao){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this._dateConverted="",this._changeDateByUI=!1,this._changeTimeByUI=!1,this._previousTimeValue="",this._previousDateValue="",this._dateValue="",this._timeValue="",this._errorFormat="",this._errorText="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return void 0===this.value||""===this.value||("string"!=typeof this.value?(this.throwErrorAfterUpdateComplete(Tt),!1):(this._dateAndTime=this._getDateTimeValue(this.value),this._dateConverted=ri(this._dateAndTime.date),!(!Ci(this._dateAndTime.date,this._dateAndTime.time)||!wi(this._dateConverted))||(this.throwErrorAfterUpdateComplete(Tt),!1)))}willUpdate(e){this._changeDateByUI||this._changeTimeByUI?this._updateValueAndErrorWhenUIChange():(this._errorFormat="",this._updateErrorText(),this._updateValueWhenSetter())}update(e){e.has("value")&&(void 0===this.value&&this._setUndefinedValue(),""===this.value&&this._setEmptyValue()),super.update(e)}_updateValueWhenSetter(){this._errorFormat="",""!==this.value&&void 0!==this.value?(this._setDateTimeValueSeparate(this._dateAndTime,this._dateConverted),this.value=this._getDateTimeString()):this._previousTimeValue=""}_setDateTimeValueSeparate(e,t){this._dateValue=t,this._timeValue=this._dateValue&&wi(t)?li(e.time.slice(0,5)):this._previousTimeValue}_updateValueAndErrorWhenUIChange(){const e=this._checkDateTimeFormat();this.value=e?this.value:void 0,this._updateErrorText()}_checkDateTimeFormat(){const e=Boolean(this._timeValue)&&!this._dateValue,t=Boolean(this._dateValue)&&!this._timeValue;return!this._errorFormat&&!e&&!t}_setUndefinedValue(){if(!this._changeTimeByUI){if(this._errorFormat){if(this._changeDateByUI)return;return this._dateValue="",void(this._timeValue="")}this._dateValue=this._previousDateValue,this._timeValue=this._previousTimeValue}}_setEmptyValue(){this._dateValue="",this._timeValue="",this._previousTimeValue="",this._previousDateValue=""}_getDateTimeValue(e){if(""===e||void 0===e)return{date:"",time:""};const t=e.split("T"),i=t[0],n=t[1];if(e.indexOf("T")===e.length-1||t.length>2)return{date:i,time:""};if(!n)return{date:i,time:"00:00"};const[o,a,s]=n.split(":"),r=`${o}:${a||"00"}`;return s?{date:i,time:`${r}:${s}`}:{date:i,time:r}}render(){return $e`
+      `}updated(){this._isSelectError=!1}_handleTimeChange(e){e.preventDefault(),e.stopPropagation();const t={value:e.detail.value,oldValue:this.value};if(this._inputValue=e.detail.value,e.detail.error)return this._isSelectError=!0,this._errorFormat=e.detail.error,this.value=void 0,t.value=void 0,this.error="",void gi(this,"change",t);this._isSelectError=!1,this._errorFormat="",this.value=e.detail.value,gi(this,"change",t)}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}}Eo([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),Eo([Ge({type:String})],e.prototype,"error",void 0),Eo([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),Eo([Ge({type:String})],e.prototype,"label",void 0),Eo([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),Eo([Ge({type:String,hasChanged:(e,t)=>(""===e||void 0===e)&&e===t||e!==t})],e.prototype,"value",void 0),Eo([Ge({type:Boolean})],e.prototype,"disabled",void 0),Eo([Ge({type:Boolean})],e.prototype,"hour12",void 0),Eo([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),Eo([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),Eo([Fe()],e.prototype,"_inputValue",void 0),Eo([Fe()],e.prototype,"_errorFormat",void 0),window.customElements.define("kuc-mobile-time-picker-1-17-1",e),mi('\n    kuc-mobile-time-picker-1-17-1,\n    kuc-mobile-time-picker-1-17-1 * {\n    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n        "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n        "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n    }\n    kuc-mobile-time-picker-1-17-1:lang(zh),\n    kuc-mobile-time-picker-1-17-1:lang(zh) * {\n    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n        Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n        Verdana, sans-serif;\n    }\n    kuc-mobile-time-picker-1-17-1:lang(zh-TW),\n    kuc-mobile-time-picker-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n        Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n        Verdana,sans-serif\n    }\n    kuc-mobile-time-picker-1-17-1 {\n    font-size: 13px;\n    display: inline-block;\n    vertical-align: top;\n    width: 100%;\n    }\n    kuc-mobile-time-picker-1-17-1[hidden] {\n    display: none;\n    }\n    .kuc-mobile-time-picker-1-17-1__group__label {\n    display: inline-block;\n    font-weight: bold;\n    line-height: 1.5;\n    padding: 0px;\n    margin: 0 0 4px 0;\n    white-space: nowrap;\n    }\n    .kuc-mobile-time-picker-1-17-1__group__label[hidden] {\n    display: none;\n    }\n    .kuc-base-mobile-time-1-17-1__group__wrapper {\n    padding-left: 0.5em;\n    max-width: 10px;\n    }\n'),So=e}})();var To=function(e,t,i,n){var o,a=arguments.length,s=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(o=e[r])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Ao;(()=>{if(Ao=window.customElements.get("kuc-mobile-datetime-picker-1-17-1"),!Ao){class e extends bi{constructor(e){super(),this.className="",this.error="",this.id="",this.label="",this.language="auto",this.value="",this.disabled=!1,this.hour12=!1,this.requiredIcon=!1,this.visible=!0,this._dateConverted="",this._changeDateByUI=!1,this._changeTimeByUI=!1,this._previousTimeValue="",this._previousDateValue="",this._dateValue="",this._timeValue="",this._errorFormat="",this._errorText="",this._GUID=fi();const t=vi(e);Object.assign(this,t)}shouldUpdate(e){return void 0===this.value||""===this.value||("string"!=typeof this.value?(this.throwErrorAfterUpdateComplete(St),!1):(this._dateAndTime=this._getDateTimeValue(this.value),this._dateConverted=si(this._dateAndTime.date),!(!Ci(this._dateAndTime.date,this._dateAndTime.time)||!wi(this._dateConverted))||(this.throwErrorAfterUpdateComplete(St),!1)))}willUpdate(e){this._changeDateByUI||this._changeTimeByUI?this._updateValueAndErrorWhenUIChange():(this._errorFormat="",this._updateErrorText(),this._updateValueWhenSetter())}update(e){e.has("value")&&(void 0===this.value&&this._setUndefinedValue(),""===this.value&&this._setEmptyValue()),super.update(e)}_updateValueWhenSetter(){this._errorFormat="",""!==this.value&&void 0!==this.value?(this._setDateTimeValueSeparate(this._dateAndTime,this._dateConverted),this.value=this._getDateTimeString()):this._previousTimeValue=""}_setDateTimeValueSeparate(e,t){this._dateValue=t,this._timeValue=this._dateValue&&wi(t)?ri(e.time.slice(0,5)):this._previousTimeValue}_updateValueAndErrorWhenUIChange(){const e=this._checkDateTimeFormat();this.value=e?this.value:void 0,this._updateErrorText()}_checkDateTimeFormat(){const e=Boolean(this._timeValue)&&!this._dateValue,t=Boolean(this._dateValue)&&!this._timeValue;return!this._errorFormat&&!e&&!t}_setUndefinedValue(){if(!this._changeTimeByUI){if(this._errorFormat){if(this._changeDateByUI)return;return this._dateValue="",void(this._timeValue="")}this._dateValue=this._previousDateValue,this._timeValue=this._previousTimeValue}}_setEmptyValue(){this._dateValue="",this._timeValue="",this._previousTimeValue="",this._previousDateValue=""}_getDateTimeValue(e){if(""===e||void 0===e)return{date:"",time:""};const t=e.split("T"),i=t[0],n=t[1];if(e.indexOf("T")===e.length-1||t.length>2)return{date:i,time:""};if(!n)return{date:i,time:"00:00"};const[o,a,s]=n.split(":"),r=`${o}:${a||"00"}`;return s?{date:i,time:`${r}:${s}`}:{date:i,time:r}}render(){return we`
         <fieldset
-          class="kuc-mobile-datetime-picker-1-17-0__group"
+          class="kuc-mobile-datetime-picker-1-17-1__group"
           aria-describedby="${this._GUID}-error"
         >
           <legend
-            class="kuc-mobile-datetime-picker-1-17-0__group__label"
+            class="kuc-mobile-datetime-picker-1-17-1__group__label"
             ?hidden="${!this.label}"
           >
-            <kuc-base-mobile-label-1-17-0
+            <kuc-base-mobile-label-1-17-1
               .requiredIcon="${this.requiredIcon}"
               .text="${this.label}"
-            ></kuc-base-mobile-label-1-17-0>
+            ></kuc-base-mobile-label-1-17-1>
           </legend>
-          <div class="kuc-mobile-datetime-picker-1-17-0__group__input">
-            <kuc-mobile-base-date-1-17-0
-              class="kuc-mobile-datetime-picker-1-17-0__group__input--date"
+          <div class="kuc-mobile-datetime-picker-1-17-1__group__input">
+            <kuc-mobile-base-date-1-17-1
+              class="kuc-mobile-datetime-picker-1-17-1__group__input--date"
               .disabled="${this.disabled}"
               .value="${this._dateValue}"
               .inputId="${this._GUID}"
@@ -2357,9 +2356,9 @@
               .language="${this._getLanguage()}"
               @kuc:mobile-base-date-change="${this._handleDateChange}"
             >
-            </kuc-mobile-base-date-1-17-0>
-            <kuc-base-mobile-time-1-17-0
-              class="kuc-mobile-datetime-picker-1-17-0__group__input--time"
+            </kuc-mobile-base-date-1-17-1>
+            <kuc-base-mobile-time-1-17-1
+              class="kuc-mobile-datetime-picker-1-17-1__group__input--time"
               .value="${this._timeValue}"
               .disabled="${this.disabled}"
               .hour12="${this.hour12}"
@@ -2367,12 +2366,12 @@
               .language="${this._getLanguage()}"
               .required="${this.requiredIcon}"
               @kuc:base-mobile-time-change="${this._handleTimeChange}"
-            ></kuc-base-mobile-time-1-17-0>
+            ></kuc-base-mobile-time-1-17-1>
           </div>
-          <kuc-base-mobile-error-1-17-0
+          <kuc-base-mobile-error-1-17-1
             .guid="${this._GUID}"
             .text="${this._errorText}"
           >
-          </kuc-base-mobile-error-1-17-0>
+          </kuc-base-mobile-error-1-17-1>
         </fieldset>
-      `}updated(){this._resetState()}_resetState(){this._previousTimeValue="",this._previousDateValue="",this._changeDateByUI=!1,this._changeTimeByUI=!1}_updateErrorText(){this._errorText=this._errorFormat||this.error}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_handleDateChange(e){if(e.stopPropagation(),e.preventDefault(),e.detail.value===this._dateValue)return;this._changeDateByUI=!0;let t=this._dateValue;e.detail.error?(this._errorFormat=e.detail.error,this.error=""):t=e.detail.value,this._updateDateTimeValue(t,"date")}_handleTimeChange(e){e.preventDefault(),e.stopPropagation(),this._changeTimeByUI=!0;let t=this._timeValue;e.detail.error?(this._errorFormat=e.detail.error,this.error=""):this._errorFormat="",t=e.detail.value,this._updateDateTimeValue(t,"time")}_updateDateTimeValue(e,t){const i=this.value;"date"===t?this._dateValue=e||"":this._timeValue=e,this._previousTimeValue=this._timeValue,this._previousDateValue=this._dateValue;const n=this._errorFormat?void 0:this._getDateTimeString(),o=this._errorFormat?void 0:n;this.value=o;const a=this._errorFormat?void 0:n;this.value=a,gi(this,"change",{value:o,oldValue:i,changedPart:t})}_getDateTimeString(){if(""===this._dateValue&&""===this._timeValue)return"";if(!this._dateValue||!this._timeValue)return;if(!this.value)return`${this._dateValue}T${this._timeValue}:00`;const e=this.value.split(":");return 3===e.length?`${this._dateValue}T${this._timeValue}:${e[2]}`:`${this._dateValue}T${this._timeValue}:00`}}To([Fe({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),To([Fe({type:String})],e.prototype,"error",void 0),To([Fe({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),To([Fe({type:String})],e.prototype,"label",void 0),To([Fe({type:String,attribute:"lang",reflect:!0,converter:ai})],e.prototype,"language",void 0),To([Fe({type:String,hasChanged:(e,t)=>(""===e||void 0===e)&&e===t||e!==t})],e.prototype,"value",void 0),To([Fe({type:Boolean})],e.prototype,"disabled",void 0),To([Fe({type:Boolean})],e.prototype,"hour12",void 0),To([Fe({type:Boolean})],e.prototype,"requiredIcon",void 0),To([Fe({type:Boolean,attribute:"hidden",reflect:!0,converter:oi})],e.prototype,"visible",void 0),To([We()],e.prototype,"_dateValue",void 0),To([We()],e.prototype,"_timeValue",void 0),To([We()],e.prototype,"_errorFormat",void 0),To([We()],e.prototype,"_errorText",void 0),window.customElements.define("kuc-mobile-datetime-picker-1-17-0",e),mi('\nkuc-mobile-datetime-picker-1-17-0,\nkuc-mobile-datetime-picker-1-17-0 * {\ncolor: #333333;\nfont-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-mobile-datetime-picker-1-17-0:lang(zh),\nkuc-mobile-datetime-picker-1-17-0:lang(zh) * {\nfont-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-mobile-datetime-picker-1-17-0:lang(zh-TW),\nkuc-mobile-datetime-picker-1-17-0:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\nkuc-mobile-datetime-picker-1-17-0 {\nfont-size: 13px;\ncolor: #333333;\ndisplay: inline-table;\nvertical-align: top;\nwidth: 100%;\n}\nkuc-mobile-datetime-picker-1-17-0[hidden] {\ndisplay: none;\n}\n.kuc-mobile-datetime-picker-1-17-0__group {\nborder: 0;\npadding: 0;\n}\n.kuc-mobile-datetime-picker-1-17-0__group__label {\ndisplay: inline-block;\nfont-weight: bold;\nline-height: 1.5;\npadding: 0px;\nwhite-space: nowrap;\nmargin: 0 0 4px 0;\n}\n.kuc-mobile-datetime-picker-1-17-0__group__label[hidden] {\ndisplay: none;\n}\n.kuc-mobile-datetime-picker-1-17-0__group__input {\ndisplay: flex;\nalign-items: center;\nmargin-right: 0.5em;\nmargin-left: 0.5em;\n}\n.kuc-mobile-datetime-picker-1-17-0__group__input--date {\nwidth: 130px;\nmargin-right: 10px;\n}\n.kuc-mobile-datetime-picker-1-17-0__group__input--time {\nmax-width: 10px;\n}\n'),Ao=e}})();var Do={d:(e,t)=>{for(var i in t)Do.o(t,i)&&!Do.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};Do.d({},{r:()=>Vo});const Vo="1.17.0";var Lo={d:(e,t)=>{for(var i in t)Lo.o(t,i)&&!Lo.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};Lo.d({},{$:()=>Ho});const Ho=void 0,Mo=document.getElementById("root"),Bo=new bn({items:[{label:"-----",value:"-----"},{label:"Orange",value:"orange"},{label:"Apple",value:"apple"}],value:"-----",label:"Fruit",error:"Error occurred!"});Bo.addEventListener("change",(e=>{const t=e.detail;console.log(t)})),Mo.appendChild(Bo)})();
\ No newline at end of file
+      `}updated(){this._resetState()}_resetState(){this._previousTimeValue="",this._previousDateValue="",this._changeDateByUI=!1,this._changeTimeByUI=!1}_updateErrorText(){this._errorText=this._errorFormat||this.error}_getLanguage(){const e=["en","ja","zh","zh-TW"];return-1!==e.indexOf(this.language)?this.language:-1!==e.indexOf(document.documentElement.lang)?document.documentElement.lang:"en"}_handleDateChange(e){if(e.stopPropagation(),e.preventDefault(),e.detail.value===this._dateValue)return;this._changeDateByUI=!0;let t=this._dateValue;e.detail.error?(this._errorFormat=e.detail.error,this.error=""):t=e.detail.value,this._updateDateTimeValue(t,"date")}_handleTimeChange(e){e.preventDefault(),e.stopPropagation(),this._changeTimeByUI=!0;let t=this._timeValue;e.detail.error?(this._errorFormat=e.detail.error,this.error=""):this._errorFormat="",t=e.detail.value,this._updateDateTimeValue(t,"time")}_updateDateTimeValue(e,t){const i=this.value;"date"===t?this._dateValue=e||"":this._timeValue=e,this._previousTimeValue=this._timeValue,this._previousDateValue=this._dateValue;const n=this._errorFormat?void 0:this._getDateTimeString(),o=this._errorFormat?void 0:n;this.value=o;const a=this._errorFormat?void 0:n;this.value=a,gi(this,"change",{value:o,oldValue:i,changedPart:t})}_getDateTimeString(){if(""===this._dateValue&&""===this._timeValue)return"";if(!this._dateValue||!this._timeValue)return;if(!this.value)return`${this._dateValue}T${this._timeValue}:00`;const e=this.value.split(":");return 3===e.length?`${this._dateValue}T${this._timeValue}:${e[2]}`:`${this._dateValue}T${this._timeValue}:00`}}To([Ge({type:String,reflect:!0,attribute:"class"})],e.prototype,"className",void 0),To([Ge({type:String})],e.prototype,"error",void 0),To([Ge({type:String,reflect:!0,attribute:"id"})],e.prototype,"id",void 0),To([Ge({type:String})],e.prototype,"label",void 0),To([Ge({type:String,attribute:"lang",reflect:!0,converter:oi})],e.prototype,"language",void 0),To([Ge({type:String,hasChanged:(e,t)=>(""===e||void 0===e)&&e===t||e!==t})],e.prototype,"value",void 0),To([Ge({type:Boolean})],e.prototype,"disabled",void 0),To([Ge({type:Boolean})],e.prototype,"hour12",void 0),To([Ge({type:Boolean})],e.prototype,"requiredIcon",void 0),To([Ge({type:Boolean,attribute:"hidden",reflect:!0,converter:ni})],e.prototype,"visible",void 0),To([Fe()],e.prototype,"_dateValue",void 0),To([Fe()],e.prototype,"_timeValue",void 0),To([Fe()],e.prototype,"_errorFormat",void 0),To([Fe()],e.prototype,"_errorText",void 0),window.customElements.define("kuc-mobile-datetime-picker-1-17-1",e),mi('\nkuc-mobile-datetime-picker-1-17-1,\nkuc-mobile-datetime-picker-1-17-1 * {\ncolor: #333333;\nfont-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",\n    "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",\n    "Lucida Sans Unicode", Arial, Verdana, sans-serif;\n}\nkuc-mobile-datetime-picker-1-17-1:lang(zh),\nkuc-mobile-datetime-picker-1-17-1:lang(zh) * {\nfont-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,\n    Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,\n    Verdana, sans-serif;\n}\nkuc-mobile-datetime-picker-1-17-1:lang(zh-TW),\nkuc-mobile-datetime-picker-1-17-1:lang(zh-TW) * {\n    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,\n    Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,\n    Verdana,sans-serif\n}\nkuc-mobile-datetime-picker-1-17-1 {\nfont-size: 13px;\ncolor: #333333;\ndisplay: inline-table;\nvertical-align: top;\nwidth: 100%;\n}\nkuc-mobile-datetime-picker-1-17-1[hidden] {\ndisplay: none;\n}\n.kuc-mobile-datetime-picker-1-17-1__group {\nborder: 0;\npadding: 0;\n}\n.kuc-mobile-datetime-picker-1-17-1__group__label {\ndisplay: inline-block;\nfont-weight: bold;\nline-height: 1.5;\npadding: 0px;\nwhite-space: nowrap;\nmargin: 0 0 4px 0;\n}\n.kuc-mobile-datetime-picker-1-17-1__group__label[hidden] {\ndisplay: none;\n}\n.kuc-mobile-datetime-picker-1-17-1__group__input {\ndisplay: flex;\nalign-items: center;\nmargin-right: 0.5em;\nmargin-left: 0.5em;\n}\n.kuc-mobile-datetime-picker-1-17-1__group__input--date {\nwidth: 130px;\nmargin-right: 10px;\n}\n.kuc-mobile-datetime-picker-1-17-1__group__input--time {\nmax-width: 10px;\n}\n'),Ao=e}})();var Do={d:(e,t)=>{for(var i in t)Do.o(t,i)&&!Do.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};Do.d({},{r:()=>Vo});const Vo="1.17.1";var Lo={d:(e,t)=>{for(var i in t)Lo.o(t,i)&&!Lo.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};Lo.d({},{$:()=>Ho});const Ho=void 0,Mo=document.getElementById("root"),Bo=new bn({items:[{label:"-----",value:"-----"},{label:"Orange",value:"orange"},{label:"Apple",value:"apple"}],value:"-----",label:"Fruit",error:"Error occurred!"});Bo.addEventListener("change",(e=>{const t=e.detail;console.log(t)})),Mo.appendChild(Bo)})();
\ No newline at end of file
diff --git a/demos/typescript-app/package-lock.json b/demos/typescript-app/package-lock.json
index 11dd01897b..9c67504c7b 100644
--- a/demos/typescript-app/package-lock.json
+++ b/demos/typescript-app/package-lock.json
@@ -11,10 +11,10 @@
       "devDependencies": {
         "@cybozu/eslint-config": "^23.0.0",
         "eslint": "^8.57.0",
-        "prettier": "^3.2.5",
+        "prettier": "^3.3.3",
         "ts-loader": "^9.5.1",
-        "typescript": "^5.4.5",
-        "webpack": "^5.91.0",
+        "typescript": "^5.6.2",
+        "webpack": "^5.95.0",
         "webpack-cli": "^5.1.4"
       }
     },
@@ -271,21 +271,13 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.6.tgz",
       "integrity": "sha512-/fqTbjxyFUaYNO7VcW5g+4npmqVACz1bB7RTHYuLj+PRjw9hrCwrUXVQFpChUS0JsyEFvMZ7U/PfmvWgxJhI9g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
       }
     },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
-      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
-      "dev": true,
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -798,10 +790,10 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "dev": true,
       "peerDependencies": {
         "acorn": "^8"
@@ -1104,12 +1096,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -1462,9 +1454,9 @@
       "dev": true
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -2389,9 +2381,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -3390,12 +3382,12 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -3758,9 +3750,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -4589,9 +4581,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -4675,21 +4667,20 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dev": true,
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -5108,21 +5099,13 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.6.tgz",
       "integrity": "sha512-/fqTbjxyFUaYNO7VcW5g+4npmqVACz1bB7RTHYuLj+PRjw9hrCwrUXVQFpChUS0JsyEFvMZ7U/PfmvWgxJhI9g==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
       }
     },
-    "@types/eslint-scope": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
-      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
-      "dev": true,
-      "requires": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -5499,10 +5482,10 @@
       "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "dev": true
     },
-    "acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "dev": true,
       "requires": {}
     },
@@ -5732,12 +5715,12 @@
       }
     },
     "braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "requires": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       }
     },
     "browserslist": {
@@ -5978,9 +5961,9 @@
       "dev": true
     },
     "enhanced-resolve": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.2.4",
@@ -6671,9 +6654,9 @@
       }
     },
     "fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
@@ -7377,12 +7360,12 @@
       "dev": true
     },
     "micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "requires": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       }
     },
@@ -7646,9 +7629,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true
     },
     "prettier-linter-helpers": {
@@ -8198,9 +8181,9 @@
       }
     },
     "typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
       "dev": true
     },
     "unbox-primitive": {
@@ -8251,21 +8234,20 @@
       }
     },
     "webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dev": true,
       "requires": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
diff --git a/demos/typescript-app/package.json b/demos/typescript-app/package.json
index 4be4726d65..a3cddbe2fc 100644
--- a/demos/typescript-app/package.json
+++ b/demos/typescript-app/package.json
@@ -13,10 +13,10 @@
   "devDependencies": {
     "@cybozu/eslint-config": "^23.0.0",
     "eslint": "^8.57.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.4.5",
-    "webpack": "^5.91.0",
+    "typescript": "^5.6.2",
+    "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4"
   }
 }
diff --git a/docs/document/docs/components/desktop/attachment.md b/docs/document/docs/components/desktop/attachment.md
index 16105058e5..afc52e46ca 100644
--- a/docs/document/docs/components/desktop/attachment.md
+++ b/docs/document/docs/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 The Attachment component allows the user to upload files by selecting or dragging.
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
@@ -25,7 +25,7 @@ Here is a list of properties that can be used for modifying the component:
 | error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
 | id | string | ""  | Component id name | |
 | label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
-| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"zh"/"zh-TW"/"ja", the language setting will be "en") |
+| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
 | message | string | ""  | Message to display in the component (ex. file type/size restriction) | |
 | disabled | boolean | false | Enable/Disable the component | |
 | requiredIcon | boolean | false | Show/Hide the required icon | |
diff --git a/docs/document/docs/components/desktop/button.md b/docs/document/docs/components/desktop/button.md
index 6fd17037cc..310d629a26 100644
--- a/docs/document/docs/components/desktop/button.md
+++ b/docs/document/docs/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/docs/components/desktop/checkbox.md b/docs/document/docs/components/desktop/checkbox.md
index f878b70a12..c9d59aeeb9 100644
--- a/docs/document/docs/components/desktop/checkbox.md
+++ b/docs/document/docs/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/docs/components/desktop/combobox.md b/docs/document/docs/components/desktop/combobox.md
index fee6c0b57b..082bc6ecff 100644
--- a/docs/document/docs/components/desktop/combobox.md
+++ b/docs/document/docs/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 The Combobox component allows the user to find an item among many choices.
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/docs/components/desktop/date-picker.md b/docs/document/docs/components/desktop/date-picker.md
index 2ab5f185db..c3c5f9ad51 100644
--- a/docs/document/docs/components/desktop/date-picker.md
+++ b/docs/document/docs/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
@@ -26,7 +26,7 @@ Here is a list of properties that can be used for modifying the component:
 | error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
 | id | string | ""  | Component id name | |
 | label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
-| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"zh"/"zh-TW"/"ja", the language setting will be "en") |
+| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
 | value | string | ""  | Text to be displayed | Format is YYYY-MM-DD<br/>The below date can be used (it will be converted to YYYY-MM-DD internally):<li>2021</li><li>2021-1</li><li>2021-01</li><li>2021-1-9</li><li>21-01-01</li>If the year is less than 4 characters, 0 will be added to the beginning<br/>If the date and/or month is ignored, it will be supplemented with 01<br/>If the date and/or month has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value |
 | disabled | boolean | false | Enable/Disable the component | |
 | requiredIcon | boolean | false | Show/Hide the required icon | |
@@ -35,7 +35,7 @@ Here is a list of properties that can be used for modifying the component:
 :::info
 *1: The displayed date format is automatically switched depending on the `language` property setting as follows:
 - "en": MM/DD/YYYY
-- "ja", "zh", "zh-TW": YYYY-MM-DD
+- "ja", "zh", "zh-TW", "es": YYYY-MM-DD
 :::
 
 ### Event
diff --git a/docs/document/docs/components/desktop/datetime-picker.md b/docs/document/docs/components/desktop/datetime-picker.md
index 6b827c8758..6a408f47ac 100644
--- a/docs/document/docs/components/desktop/datetime-picker.md
+++ b/docs/document/docs/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
@@ -26,7 +26,7 @@ Here is a list of properties that can be used for modifying the component:
 | error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
 | id | string | ""  | Component id name | |
 | label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
-| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"zh"/"zh-TW"/"ja", the language setting will be "en") |
+| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
 | max | string | "" | Setting of the time listbox ending point | Format is HH:MM<br/>In the time listbox, it is displayed up to the time set to `max`, and it is not displayed after that<br/>The below time can be used (it will be converted to HH:MM internally):<li>5:30</li><li>05:3</li><li>5:3</li>If the hour and/or time has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value, or `min` time is greater than `max` time |
 | min | string | "" | Setting of the time listbox starting point | Format is HH:MM<br/>In the time listbox, it is displayed from the time set to `min`, and it is not displayed before that<br/>The below time can be used (it will be converted to HH:MM internally):<li>5:30</li><li>05:3</li><li>5:3</li>If the hour and/or time has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value, or `min` time is greater than `max` time |
 | value | string | "" | Text to be displayed | Format is YYYY-MM-DDTHH:MM:SS<br/>The below date and time can be used (it will be converted to YYYY-MM-DDTHH:MM:SS internally):<li>2021</li><li>2021T01</li><li>2021-06</li><li>2021-12-12</li><li>2021-12-12T01</li><li>2021-12-12T01:01</li>If the date and/or month is ignored, it will be supplemented with 01<br/>If the hour, minute, and/or second is ignored, it will be supplemented with 00<br/>Will result an error if setting invalid format or value, or it is out of valid range set by `min` and `max` properties |
@@ -39,7 +39,7 @@ Here is a list of properties that can be used for modifying the component:
 :::info
  *1: The displayed date format is automatically switched depending on the `language` property setting as follows:
 - "en": MM/DD/YYYY
-- "ja", "zh", "zh-TW": YYYY-MM-DD
+- "ja", "zh", "zh-TW", "es": YYYY-MM-DD
 :::
 
 ### Event
diff --git a/docs/document/docs/components/desktop/dialog.md b/docs/document/docs/components/desktop/dialog.md
index 75396324d3..57fb0c9786 100644
--- a/docs/document/docs/components/desktop/dialog.md
+++ b/docs/document/docs/components/desktop/dialog.md
@@ -9,7 +9,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/docs/components/desktop/dropdown.md b/docs/document/docs/components/desktop/dropdown.md
index ac7f22788d..d62ade1a3b 100644
--- a/docs/document/docs/components/desktop/dropdown.md
+++ b/docs/document/docs/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/docs/components/desktop/field-group.md b/docs/document/docs/components/desktop/field-group.md
index c74999a30c..f5094e7905 100644
--- a/docs/document/docs/components/desktop/field-group.md
+++ b/docs/document/docs/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 The FieldGroup component allows the user to create a content area that can be collapsed and expanded.
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/docs/components/desktop/multichoice.md b/docs/document/docs/components/desktop/multichoice.md
index 4d56ead7e8..2bba062332 100644
--- a/docs/document/docs/components/desktop/multichoice.md
+++ b/docs/document/docs/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/docs/components/desktop/notification.md b/docs/document/docs/components/desktop/notification.md
index d8781011f8..53d6f88739 100644
--- a/docs/document/docs/components/desktop/notification.md
+++ b/docs/document/docs/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/docs/components/desktop/radio-button.md b/docs/document/docs/components/desktop/radio-button.md
index ddd2777b21..038e27b217 100644
--- a/docs/document/docs/components/desktop/radio-button.md
+++ b/docs/document/docs/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/docs/components/desktop/readonly-table.md b/docs/document/docs/components/desktop/readonly-table.md
index 361d1273c0..2b76298072 100644
--- a/docs/document/docs/components/desktop/readonly-table.md
+++ b/docs/document/docs/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 The ReadOnlyTable component allows the user to display a read-only mode table.
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/docs/components/desktop/spinner.md b/docs/document/docs/components/desktop/spinner.md
index 35b25f94c5..16153a590a 100644
--- a/docs/document/docs/components/desktop/spinner.md
+++ b/docs/document/docs/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/docs/components/desktop/table.md b/docs/document/docs/components/desktop/table.md
index 822d435d03..331d73a1f0 100644
--- a/docs/document/docs/components/desktop/table.md
+++ b/docs/document/docs/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 The Table component allows the user to display an editable table.
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/docs/components/desktop/tabs.md b/docs/document/docs/components/desktop/tabs.md
index c7901e5ddd..b23453ce49 100644
--- a/docs/document/docs/components/desktop/tabs.md
+++ b/docs/document/docs/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 The Tabs component allows the user to display multiple tabs that can switch displaying contents.
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/docs/components/desktop/text.md b/docs/document/docs/components/desktop/text.md
index 03176c5e6b..667df221bb 100644
--- a/docs/document/docs/components/desktop/text.md
+++ b/docs/document/docs/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/docs/components/desktop/textarea.md b/docs/document/docs/components/desktop/textarea.md
index 63f03c9e96..e64923b9a0 100644
--- a/docs/document/docs/components/desktop/textarea.md
+++ b/docs/document/docs/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/docs/components/desktop/time-picker.md b/docs/document/docs/components/desktop/time-picker.md
index e8f6ce1a75..1244dc26e6 100644
--- a/docs/document/docs/components/desktop/time-picker.md
+++ b/docs/document/docs/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
@@ -26,7 +26,7 @@ Here is a list of properties that can be used for modifying the component:
 | error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
 | id | string | ""  | Component id name | |
 | label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
-| language | string | "auto" | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"zh"/"zh-TW"/"ja", the language setting will be "en") |
+| language | string | "auto" | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
 | max | string | "" | Setting of the time listbox ending point | Format is HH:MM<br/>In the time listbox, it is displayed up to the time set to `max`, and it is not displayed after that<br/>The below time can be used (it will be converted to HH:MM internally):<li>5:30</li><li>05:3</li><li>5:3</li>If the hour and/or time has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value, or `min` time is greater than `max` time |
 | min | string | "" | Setting of the time listbox starting point | Format is HH:MM<br/>In the time listbox, it is displayed from the time set to `min`, and it is not displayed before that<br/>The below time can be used (it will be converted to HH:MM internally):<li>5:30</li><li>05:3</li><li>5:3</li>If the hour and/or time has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value, or `min` time is greater than `max` time |
 | value | string | "" | Text to be displayed | Format is HH:MM<br/>The below time can be used (it will be converted to HH:MM internally):<li>5:30</li><li>05:3</li><li>5:3</li>If the hour and/or time has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value, or it is out of valid range set by `min` and `max` properties |
diff --git a/docs/document/docs/components/desktop/tooltip.md b/docs/document/docs/components/desktop/tooltip.md
index 664c316a28..1ab835eb16 100644
--- a/docs/document/docs/components/desktop/tooltip.md
+++ b/docs/document/docs/components/desktop/tooltip.md
@@ -9,7 +9,7 @@ sidebar_label: Tooltip
 
 Tooltip component allows the user to display a label or short explanation of the target element when hovering or focusing on the element.
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/docs/components/mobile/mobile-button.md b/docs/document/docs/components/mobile/mobile-button.md
index c1118cafb2..31f4881fa3 100644
--- a/docs/document/docs/components/mobile/mobile-button.md
+++ b/docs/document/docs/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/docs/components/mobile/mobile-checkbox.md b/docs/document/docs/components/mobile/mobile-checkbox.md
index f2f670be6c..955859915e 100644
--- a/docs/document/docs/components/mobile/mobile-checkbox.md
+++ b/docs/document/docs/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/docs/components/mobile/mobile-date-picker.md b/docs/document/docs/components/mobile/mobile-date-picker.md
index 57a0781171..a279f5d3d7 100644
--- a/docs/document/docs/components/mobile/mobile-date-picker.md
+++ b/docs/document/docs/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
@@ -26,7 +26,7 @@ Here is a list of properties that can be used for modifying the component:
 | error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
 | id | string | ""  | Component id name | |
 | label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
-| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"zh"/"zh-TW"/"ja", the language setting will be "en") |
+| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
 | value | string | ""  | Text to be displayed | Format is YYYY-MM-DD<br/>The below date can be used (it will be converted to YYYY-MM-DD internally):<li>2021</li><li>2021-1</li><li>2021-01</li><li>2021-1-9</li><li>21-01-01</li>If the year is less than 4 characters, 0 will be added to the beginning<br/>If the date and/or month is ignored, it will be supplemented with 01<br/>If the date and/or month has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value |
 | disabled | boolean | false | Enable/Disable the component | |
 | requiredIcon | boolean | false | Show/Hide the required icon | |
@@ -35,7 +35,7 @@ Here is a list of properties that can be used for modifying the component:
 :::info
 *1: The displayed date format is automatically switched depending on the `language` property setting as follows:
 - "en": MM/DD/YYYY
-- "ja", "zh", "zh-TW": YYYY-MM-DD
+- "ja", "zh", "zh-TW", "es": YYYY-MM-DD
 :::
 
 ### Event
diff --git a/docs/document/docs/components/mobile/mobile-datetime-picker.md b/docs/document/docs/components/mobile/mobile-datetime-picker.md
index 9bda30cc2f..5046acd5d7 100644
--- a/docs/document/docs/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/docs/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
@@ -26,7 +26,7 @@ Here is a list of properties that can be used for modifying the component:
 | error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
 | id | string | ""  | Component id name | |
 | label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
-| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"zh"/"zh-TW"/"ja", the language setting will be "en") |
+| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
 | value | string | ""  | Text to be displayed | Format is YYYY-MM-DDTHH:MM:SS<br/>The below date and time can be used (it will be converted to YYYY-MM-DDTHH:MM:SS internally):<li>2021</li><li>2021T01</li><li>2021-06</li><li>2021-12-12</li><li>2021-12-12T01</li><li>2021-12-12T01:01</li>If the date and/or month is ignored, it will be supplemented with 01<br/>If the hour, minute, and/or second is ignored, it will be supplemented with 00<br/>Will result an error if setting invalid format or value |
 | disabled | boolean | false | Enable/Disable the component | |
 | hour12 | boolean | false | Setting of the clock display (12-hour clock/24-hour clock) Default is 24-hour clock | Available options:<br/>true: 12-hour clock<br/>false: 24-hour clock |
@@ -36,7 +36,7 @@ Here is a list of properties that can be used for modifying the component:
 :::info
  *1: The displayed date format is automatically switched depending on the `language` property setting as follows:
  - "en": MM/DD/YYYY
- - "ja", "zh", "zh-TW": YYYY-MM-DD
+ - "ja", "zh", "zh-TW", "es": YYYY-MM-DD
 :::
 
 ### Event
diff --git a/docs/document/docs/components/mobile/mobile-dropdown.md b/docs/document/docs/components/mobile/mobile-dropdown.md
index c1e33a674f..f22f19103e 100644
--- a/docs/document/docs/components/mobile/mobile-dropdown.md
+++ b/docs/document/docs/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/docs/components/mobile/mobile-multichoice.md b/docs/document/docs/components/mobile/mobile-multichoice.md
index 2738019e37..0beae56591 100644
--- a/docs/document/docs/components/mobile/mobile-multichoice.md
+++ b/docs/document/docs/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/docs/components/mobile/mobile-notification.md b/docs/document/docs/components/mobile/mobile-notification.md
index e0aec33c1e..cfe86fc052 100644
--- a/docs/document/docs/components/mobile/mobile-notification.md
+++ b/docs/document/docs/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/docs/components/mobile/mobile-radio-button.md b/docs/document/docs/components/mobile/mobile-radio-button.md
index e1c8beb39c..f8c1aee931 100644
--- a/docs/document/docs/components/mobile/mobile-radio-button.md
+++ b/docs/document/docs/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/docs/components/mobile/mobile-text.md b/docs/document/docs/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/docs/components/mobile/mobile-text.md
+++ b/docs/document/docs/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/docs/components/mobile/mobile-textarea.md b/docs/document/docs/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/docs/components/mobile/mobile-textarea.md
+++ b/docs/document/docs/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/docs/components/mobile/mobile-time-picker.md b/docs/document/docs/components/mobile/mobile-time-picker.md
index 3d013e7f81..11d5d042b2 100644
--- a/docs/document/docs/components/mobile/mobile-time-picker.md
+++ b/docs/document/docs/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
@@ -26,7 +26,7 @@ Here is a list of properties that can be used for modifying the component:
 | error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
 | id | string | ""  | Component id name | |
 | label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
-| language | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"zh"/"zh-TW"/"ja", the language setting will be "en") |
+| language | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
 | value | string | ""  | Text to be displayed | Format is HH:MM<br/>The below time can be used (it will be converted to HH:MM internally):<li>5:30</li><li>05:3</li><li>5:3</li>If the hour and/or time has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value  |
 | disabled | boolean | false | Enable/Disable the component | |
 | hour12 | boolean | false | Setting of the clock display (12-hour clock/24-hour clock) Default is 24-hour clock | Available options:<br/>true: 12-hour clock<br/>false: 24-hour clock |
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/attachment.md
index 437f98985e..46b1246ff9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/attachment.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
@@ -25,7 +25,7 @@ import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.
 | error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
 | id | string | ""  | コンポーネントの id 名 | |
 | label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
-| language *1 | string | "auto"  | 	言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"zh"/"zh-TW"/"ja" 以外の場合は、言語設定が "en" になる） |
+| language *1 | string | "auto"  | 	言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
 | message | string | ""  | コンポーネントに表示するメッセージ（file type/size の制限事項など） | |
 | disabled | boolean | false | コンポーネントの選択可/不可設定 | |
 | requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 | |
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/button.md
index 164c06a7dd..65a01f70e2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/checkbox.md
index 62c3f54e8c..78a1f2cfc1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/combobox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/combobox.md
index a4afc00dc4..b1fb134b89 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/combobox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 Combobox は複数選択肢の中から一つの値を検索して選択することができます。
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/date-picker.md
index ad33925ab1..b90a080655 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
@@ -26,7 +26,7 @@ import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker
 | error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
 | id | string | ""  | コンポーネントの id 名 | |
 | label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
-| language *1 | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"zh"/"zh-TW"/"ja" 以外の場合は、言語設定が "en" になる） |
+| language *1 | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
 | value | string | ""  | 表示するテキスト | フォーマットは YYYY-MM-DD<br/>以下の日付も指定できる（内部的に YYYY-MM-DD に変換される）:<li>2021</li><li>2021-1</li><li>2021-01</li><li>2021-1-9</li><li>21-01-01</li>年が 4文字以下の場合、0 が先頭に補完される<br/>日や月の記載がない場合、01 で補完される<br/>日や月が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値を指定した場合、エラーを出力する |
 | disabled | boolean | false | コンポーネントの選択可/不可設定 | |
 | requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 | |
@@ -35,7 +35,7 @@ import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker
 :::info
 *1: 表示される日付のフォーマットは、language プロパティの設定に応じて以下のように自動的に切り替わる。
 - "en" の場合: MM/DD/YYYY
-- "ja", "zh", "zh-TW" の場合: YYYY-MM-DD
+- "ja", "zh", "zh-TW", "es" の場合: YYYY-MM-DD
 :::
 
 ### Event
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/datetime-picker.md
index 56b6d566b8..9ccb2450b3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
@@ -26,7 +26,7 @@ import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetim
 | error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
 | id | string | ""  | コンポーネントの id 名 | |
 | label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
-| language *1 | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"zh"/"zh-TW"/"ja" 以外の場合は、言語設定が "en" になる） |
+| language *1 | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
 | max | string | "" | 時刻リストの終了時間設定 | フォーマットは HH:MM<br/>時刻リストは、max に指定した時刻まで表示されて、それ以降は表示されない<br/>以下の時間も指定できる（内部的に HH:MM に変換される）:<li>5:30</li><li>05:3</li><li>5:3</li>時間や分が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値や min 時刻が max 時刻よりも大きい値の場合、エラーを出力する |
 | min | string | "" | 時刻リストの開始時間設定 | フォーマットは HH:MM<br/>時刻リストは、min に指定した時刻から表示されて、それ以前は表示されない<br/>以下の時間も指定できる（内部的に HH:MM に変換される）:<li>5:30</li><li>05:3</li><li>5:3</li>時間や分が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値や min 時刻が max 時刻よりも大きい値の場合、エラーを出力する |
 | value | string | ""  | 表示するテキスト | フォーマットは YYYY-MM-DDTHH:MM:SS<br/>以下の日時も指定できる（内部的に YYYY-MM-DDTHH:MM:SS に変換される）:<li>2021</li><li>2021T01</li><li>2021-06</li><li>2021-12-12</li><li>2021-12-12T01</li><li>2021-12-12T01:01</li>日や月の記載がない場合、01 で補完される<br/>時間や分や秒の記載がない場合、00 で補完される<br/>不正なフォーマットや値や min/max プロパティで指定した有効な時刻の範囲を超える値を指定した場合、エラーを出力する |
@@ -39,7 +39,7 @@ import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetim
 :::info
 *1: 表示される日付のフォーマットは、language プロパティの設定に応じて以下のように自動的に切り替わる。
 - "en" の場合: MM/DD/YYYY
-- "ja", "zh", "zh-TW" の場合: YYYY-MM-DD
+- "ja", "zh", "zh-TW", "es" の場合: YYYY-MM-DD
 :::
 
 ### Event
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/dialog.md
index 94c5df6580..5bc2e7d8b0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/dialog.md
@@ -9,7 +9,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/dropdown.md
index 8dde8eaf92..700f038ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/field-group.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/field-group.md
index 278f753c2c..009cbb55c4 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/field-group.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 FieldGroup は、コンテンツの開閉を切り替えることができます。
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/multichoice.md
index abec92e0b1..6b629983be 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/notification.md
index 3717aedf16..12ae0f58b3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/radio-button.md
index d886c29875..c15f34b852 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/readonly-table.md
index 477a11d655..96b250f8ac 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は読み取り専用のテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/spinner.md
index bec7fa532b..02d8a5ca85 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/table.md
index a934a0df3c..8ce5cefa6e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 Table は編集可能なテーブルを表示します。
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/tabs.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/tabs.md
index f588c99a65..909c652064 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/tabs.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 Tabs は、複数のタブを表示し、表示内容を切り替えることができます。
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/text.md
index b4ba63cedc..a89761da7b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/textarea.md
index 24bb3d7f59..c8bb9a8512 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/time-picker.md
index d2453295c8..3c4c17f25d 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
@@ -26,7 +26,7 @@ import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker
 | error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
 | id | string | ""  | コンポーネントの id 名 | |
 | label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
-| language | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"zh"/"zh-TW"/"ja" 以外の場合は、言語設定が "en" になる） |
+| language | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
 | max | string | "" | 時刻リストの終了時間設定 | フォーマットは HH:MM<br/>時刻リストは、max に指定した時刻まで表示されて、それ以降は表示されない<br/>以下の時間も指定できる（内部的に HH:MM に変換される）:<li>5:30</li><li>05:3</li><li>5:3</li>時間や分が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値や min 時刻が max 時刻よりも大きい値の場合、エラーを出力する |
 | min | string | "" | 時刻リストの開始時間設定 | フォーマットは HH:MM<br/>時刻リストは、min に指定した時刻から表示されて、それ以前は表示されない<br/>以下の時間も指定できる（内部的に HH:MM に変換される）:<li>5:30</li><li>05:3</li><li>5:3</li>時間や分が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値や min 時刻が max 時刻よりも大きい値の場合、エラーを出力する |
 | value | string | ""  | 表示するテキスト | フォーマットは HH:MM<br/>以下の時間も指定できる（内部的に HH:MM に変換される）:<li>5:30</li><li>05:3</li><li>5:3</li>時間や分が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値や min/max プロパティで指定した有効な時刻の範囲を超える値を指定した場合、エラーを出力する |
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/tooltip.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/tooltip.md
index 5a421ef234..0c729913d3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/tooltip.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/desktop/tooltip.md
@@ -9,7 +9,7 @@ sidebar_label: Tooltip
 
 Tooltip は要素にホバーしたりフォーカスしたりする時に、対象となる要素のラベルや短い説明を表示します。
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-button.md
index 1683003a35..5bb77a0112 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-checkbox.md
index 02c54829aa..6944d05745 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-date-picker.md
index 9194bf9649..7eb2171491 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
@@ -26,7 +26,7 @@ import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-p
 | error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
 | id | string | ""  | コンポーネントの id 名 | |
 | label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
-| language *1 | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"zh"/"zh-TW"/"ja" 以外の場合は、言語設定が "en" になる） |
+| language *1 | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
 | value | string | ""  | 表示するテキスト | フォーマットは YYYY-MM-DD<br/>以下の日付も指定できる（内部的に YYYY-MM-DD に変換される）:<li>2021</li><li>2021-1</li><li>2021-01</li><li>2021-1-9</li><li>21-01-01</li>年が 4文字以下の場合、0 が先頭に補完される<br/>日や月の記載がない場合、01 で補完される<br/>日や月が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値を指定した場合、エラーを出力する |
 | disabled | boolean | false | コンポーネントの選択可/不可設定 | |
 | requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 | |
@@ -35,7 +35,7 @@ import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-p
 :::info
 *1: 表示される日付のフォーマットは、language プロパティの設定に応じて以下のように自動的に切り替わる。
 - "en": MM/DD/YYYY
-- "ja", "zh", "zh-TW": YYYY-MM-DD
+- "ja", "zh", "zh-TW", "es": YYYY-MM-DD
 :::
 
 ### Event
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-datetime-picker.md
index b82c6b743b..b4c284c590 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
@@ -26,7 +26,7 @@ import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/da
 | error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
 | id | string | ""  | コンポーネントの id 名 | |
 | label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
-| language *1 | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"zh"/"zh-TW"/"ja" 以外の場合は、言語設定が "en" になる） |
+| language *1 | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
 | value | string | ""  | 表示するテキスト | フォーマットは YYYY-MM-DDTHH:MM:SS<br/>以下の日時も指定できる（内部的に YYYY-MM-DDTHH:MM:SS に変換される）:<li>2021</li><li>2021T01</li><li>2021-06</li><li>2021-12-12</li><li>2021-12-12T01</li><li>2021-12-12T01:01</li>日や月の記載がない場合、01 で補完される<br/>時間や分や秒の記載がない場合、00 で補完される<br/>不正なフォーマットや値を指定した場合、エラーを出力する |
 | disabled | boolean | false | コンポーネントの選択可/不可設定 | |
 | hour12 | boolean | false | 時刻表記の設定 (12時間表記/24時間表記) デフォルトは 24時間表記 | 指定できるオプション:<br/>true: 12時間表記<br/>false: 24時間表記 |
@@ -36,7 +36,7 @@ import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/da
 :::info
 *1: 表示される日付のフォーマットは、language プロパティの設定に応じて以下のように自動的に切り替わる。
  - "en" の場合: MM/DD/YYYY
- - "ja", "zh", "zh-TW" の場合: YYYY-MM-DD
+ - "ja", "zh", "zh-TW", "es" の場合: YYYY-MM-DD
 :::
 
 ### Event
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-dropdown.md
index f5f960ca03..b0604b9d70 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-multichoice.md
index 755aa46a8e..49095dcc00 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-notification.md
index e9a0fb340b..9ef43db522 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-radio-button.md
index 3286bfc973..5229648667 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-time-picker.md
index 178375b5e6..bed44696da 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/current/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
@@ -26,7 +26,7 @@ import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-p
 | error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
 | id | string | ""  | コンポーネントの id 名 | |
 | label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
-| language | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"zh"/"zh-TW"/"ja" 以外の場合は、言語設定が "en" になる） |
+| language | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
 | value | string | ""  | 表示するテキスト | フォーマットは HH:MM<br/>以下の時間も指定できる（内部的に HH:MM に変換される）:<li>5:30</li><li>05:3</li><li>5:3</li>時間や分が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値を指定した場合、エラーを出力する |
 | disabled | boolean | false | コンポーネントの選択可/不可設定 | |
 | hour12 | boolean | false | 時刻表記の設定 (12時間表記/24時間表記) デフォルトは 24時間表記 | 指定できるオプション:<br/>true: 12時間表記<br/>false: 24時間表記 |
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/button.md
index 0dd6ffeb4b..f4c5c81b72 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/checkbox.md
index 137434936f..04f5f71fe7 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/dropdown.md
index 265b3a8116..426044a631 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/multichoice.md
index 4b15b0295f..6ee592aff1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/notification.md
index 9e7b8dd705..38f942da0c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/radio-button.md
index 9e92fa6915..2d502174cf 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/spinner.md
index 6220e2d045..fee404de52 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/text.md
index d2608a68b6..7f39ff2e26 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/textarea.md
index f542e05fd4..a6b0a16d41 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-button.md
index 60cf11dc20..f665a12526 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-checkbox.md
index dc3ed4ca97..e173ef2ec9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-notification.md
index d92580207b..f861f85132 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-radio-button.md
index fcfd9ee489..865823ae54 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-text.md
index e5f25349ca..44f06e54c2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-textarea.md
index 56c18d5892..12ff8a6f6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/button.md
index 0dd6ffeb4b..f4c5c81b72 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/checkbox.md
index 137434936f..04f5f71fe7 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/dropdown.md
index 265b3a8116..426044a631 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/multichoice.md
index 4b15b0295f..6ee592aff1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/notification.md
index 9e7b8dd705..38f942da0c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/radio-button.md
index 9e92fa6915..2d502174cf 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/spinner.md
index 6220e2d045..fee404de52 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/text.md
index d2608a68b6..7f39ff2e26 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/textarea.md
index f542e05fd4..a6b0a16d41 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-button.md
index 60cf11dc20..f665a12526 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-checkbox.md
index dc3ed4ca97..e173ef2ec9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-notification.md
index d92580207b..f861f85132 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-radio-button.md
index fcfd9ee489..865823ae54 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-text.md
index e5f25349ca..44f06e54c2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-textarea.md
index 56c18d5892..12ff8a6f6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.1/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/button.md
index 0dd6ffeb4b..f4c5c81b72 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/checkbox.md
index 137434936f..04f5f71fe7 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/dropdown.md
index 265b3a8116..426044a631 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/multichoice.md
index 4b15b0295f..6ee592aff1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/notification.md
index 9e7b8dd705..38f942da0c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/radio-button.md
index 9e92fa6915..2d502174cf 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/spinner.md
index 6220e2d045..fee404de52 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/text.md
index d2608a68b6..7f39ff2e26 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/textarea.md
index f542e05fd4..a6b0a16d41 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-button.md
index 60cf11dc20..f665a12526 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-checkbox.md
index dc3ed4ca97..e173ef2ec9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-notification.md
index d92580207b..f861f85132 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-radio-button.md
index fcfd9ee489..865823ae54 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-text.md
index e5f25349ca..44f06e54c2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-textarea.md
index 56c18d5892..12ff8a6f6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.2/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/button.md
index 0dd6ffeb4b..f4c5c81b72 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/checkbox.md
index 137434936f..04f5f71fe7 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/dropdown.md
index 265b3a8116..426044a631 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/multichoice.md
index 4b15b0295f..6ee592aff1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/notification.md
index 9e7b8dd705..38f942da0c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/radio-button.md
index 9e92fa6915..2d502174cf 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/spinner.md
index 6220e2d045..fee404de52 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/text.md
index d2608a68b6..7f39ff2e26 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/textarea.md
index f542e05fd4..a6b0a16d41 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-button.md
index 60cf11dc20..f665a12526 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-checkbox.md
index dc3ed4ca97..e173ef2ec9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-notification.md
index d92580207b..f861f85132 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-radio-button.md
index fcfd9ee489..865823ae54 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-text.md
index e5f25349ca..44f06e54c2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-textarea.md
index 56c18d5892..12ff8a6f6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.3/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/button.md
index 0dd6ffeb4b..f4c5c81b72 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/checkbox.md
index 137434936f..04f5f71fe7 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/dropdown.md
index 265b3a8116..426044a631 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/multichoice.md
index 4b15b0295f..6ee592aff1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/notification.md
index 9e7b8dd705..38f942da0c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/radio-button.md
index 9e92fa6915..2d502174cf 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/spinner.md
index 6220e2d045..fee404de52 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/text.md
index d2608a68b6..7f39ff2e26 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/textarea.md
index f542e05fd4..a6b0a16d41 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-button.md
index 60cf11dc20..f665a12526 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-checkbox.md
index dc3ed4ca97..e173ef2ec9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-notification.md
index d92580207b..f861f85132 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-radio-button.md
index fcfd9ee489..865823ae54 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-text.md
index e5f25349ca..44f06e54c2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-textarea.md
index 56c18d5892..12ff8a6f6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.4/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/button.md
index 0dd6ffeb4b..f4c5c81b72 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/checkbox.md
index 137434936f..04f5f71fe7 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/dropdown.md
index 265b3a8116..426044a631 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/multichoice.md
index 4b15b0295f..6ee592aff1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/notification.md
index 9e7b8dd705..38f942da0c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/radio-button.md
index 9e92fa6915..2d502174cf 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/spinner.md
index 6220e2d045..fee404de52 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/text.md
index d2608a68b6..7f39ff2e26 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/textarea.md
index f542e05fd4..a6b0a16d41 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-button.md
index 60cf11dc20..f665a12526 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-checkbox.md
index dc3ed4ca97..e173ef2ec9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-notification.md
index d92580207b..f861f85132 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-radio-button.md
index fcfd9ee489..865823ae54 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-text.md
index e5f25349ca..44f06e54c2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-textarea.md
index 56c18d5892..12ff8a6f6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.0.5/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/button.md
index 0dd6ffeb4b..f4c5c81b72 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/checkbox.md
index 137434936f..04f5f71fe7 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/dropdown.md
index 265b3a8116..426044a631 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/multichoice.md
index 4b15b0295f..6ee592aff1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/notification.md
index 9e7b8dd705..38f942da0c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/radio-button.md
index 9e92fa6915..2d502174cf 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/spinner.md
index 6220e2d045..fee404de52 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/text.md
index d2608a68b6..7f39ff2e26 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/textarea.md
index f542e05fd4..a6b0a16d41 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-button.md
index 60cf11dc20..f665a12526 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-checkbox.md
index dc3ed4ca97..e173ef2ec9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-dropdown.md
index bb054da918..98ae83b824 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-multichoice.md
index c5f5d2029e..c1f04ee7e4 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-notification.md
index d92580207b..f861f85132 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-radio-button.md
index fcfd9ee489..865823ae54 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-text.md
index e5f25349ca..44f06e54c2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-textarea.md
index 56c18d5892..12ff8a6f6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/button.md
index 0dd6ffeb4b..f4c5c81b72 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/checkbox.md
index 137434936f..04f5f71fe7 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/dropdown.md
index 265b3a8116..426044a631 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/multichoice.md
index 4b15b0295f..6ee592aff1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/notification.md
index 9e7b8dd705..38f942da0c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/radio-button.md
index 9e92fa6915..2d502174cf 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/spinner.md
index 6220e2d045..fee404de52 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/text.md
index d2608a68b6..7f39ff2e26 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/textarea.md
index f542e05fd4..a6b0a16d41 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-button.md
index 60cf11dc20..f665a12526 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-checkbox.md
index dc3ed4ca97..e173ef2ec9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-dropdown.md
index bb054da918..98ae83b824 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-multichoice.md
index c5f5d2029e..c1f04ee7e4 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-notification.md
index d92580207b..f861f85132 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-radio-button.md
index fcfd9ee489..865823ae54 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-text.md
index e5f25349ca..44f06e54c2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-textarea.md
index 56c18d5892..12ff8a6f6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.1.1/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/attachment.md
index dcf9dce975..a8c099fbe8 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/attachment.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/button.md
index 4d01396d5b..e96df44786 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/checkbox.md
index 649675eeeb..8a0923a344 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/combobox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/combobox.md
index a646022d93..e8f6f49fd0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/combobox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 Combobox は複数選択肢の中から一つの値を検索して選択することができます。
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/date-picker.md
index edae7b0c70..b6245bafcf 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/datetime-picker.md
index c725d74b83..bdcaecc9dc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/dialog.md
index fd36a12db3..eeab37406b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/dropdown.md
index 2b9fb722fc..8fb1936dae 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/multichoice.md
index 77be4717a8..1c96a992a3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/notification.md
index e1f43eeede..14d36bb55e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/radio-button.md
index 8a54d02e07..720687ea8c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/readonly-table.md
index 3736853d52..762438395c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は読み取り専用のテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/spinner.md
index 4bb9a7d610..504348a7d9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/table.md
index 8a54abe6a1..d0916167e2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 Table は編集可能なテーブルを表示します。
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/tabs.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/tabs.md
index ab654d46f4..c526083600 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/tabs.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 Tabs は、複数のタブを表示し、表示内容を切り替えることができます。
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/text.md
index da7adb5386..227a0d369e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/textarea.md
index a7aa6806f3..01246c10b5 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/time-picker.md
index b808a13f6c..8b863d1738 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-button.md
index 6d6bd542ef..67a01a26ab 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-checkbox.md
index ac002d3acb..61dbb63aa1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-date-picker.md
index 53ac08860a..f48bc67bd8 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-dropdown.md
index bb15576523..7fa2b3b928 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-multichoice.md
index 54f70487dc..5dfbe33d3c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-notification.md
index 8494e2a3a5..764d8149ba 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-radio-button.md
index 16105eaf14..690918bdf4 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.10.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/attachment.md
index dcf9dce975..a8c099fbe8 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/attachment.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/button.md
index acf505887d..01f319b94a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/checkbox.md
index 649675eeeb..8a0923a344 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/combobox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/combobox.md
index 0d4c456a27..4803d1e522 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/combobox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 Combobox は複数選択肢の中から一つの値を検索して選択することができます。
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/date-picker.md
index edae7b0c70..b6245bafcf 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/datetime-picker.md
index c725d74b83..bdcaecc9dc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/dialog.md
index de1d8211de..c4ab61999a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/dropdown.md
index 79c7393f97..3a0dca68be 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/field-group.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/field-group.md
index 5507987fa0..94749b21ac 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/field-group.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 FieldGroup は、コンテンツの開閉を切り替えることができます。
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/multichoice.md
index 77be4717a8..1c96a992a3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/notification.md
index 0bb0a19a44..5af76f084b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/radio-button.md
index 8a54d02e07..720687ea8c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/readonly-table.md
index eefe53abc5..93a41f74b2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は読み取り専用のテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/spinner.md
index f7a8c7fd59..50925fc840 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/table.md
index c2dc4f6bf2..4c69031e9b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 Table は編集可能なテーブルを表示します。
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/tabs.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/tabs.md
index 267fa5a281..929d33bac2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/tabs.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 Tabs は、複数のタブを表示し、表示内容を切り替えることができます。
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/text.md
index da7adb5386..227a0d369e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/textarea.md
index a7aa6806f3..01246c10b5 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/time-picker.md
index b808a13f6c..8b863d1738 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-button.md
index 6c8ec36a74..8343913f7e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-checkbox.md
index ac002d3acb..61dbb63aa1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-date-picker.md
index 9194bf9649..8326cd979b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-dropdown.md
index bb15576523..7fa2b3b928 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-multichoice.md
index 54f70487dc..5dfbe33d3c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-notification.md
index 8494e2a3a5..764d8149ba 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-radio-button.md
index 069db3a1ae..8a9737ad5f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.11.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/attachment.md
index dcf9dce975..a8c099fbe8 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/attachment.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/button.md
index acf505887d..01f319b94a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/checkbox.md
index 7ea9b4416b..f4335c0995 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/combobox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/combobox.md
index 557b9354f2..2cfa537ed9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/combobox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 Combobox は複数選択肢の中から一つの値を検索して選択することができます。
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/date-picker.md
index ad33925ab1..a82e4ab5e1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/datetime-picker.md
index c725d74b83..bdcaecc9dc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/dialog.md
index de1d8211de..c4ab61999a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/dropdown.md
index 5da25bd0df..f4dcc1e05b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/field-group.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/field-group.md
index 5507987fa0..94749b21ac 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/field-group.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 FieldGroup は、コンテンツの開閉を切り替えることができます。
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/multichoice.md
index fd85a74ea2..b00aa99398 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/notification.md
index 3717aedf16..12ae0f58b3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/radio-button.md
index 58bde3420b..c46eeca0fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/readonly-table.md
index eefe53abc5..93a41f74b2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は読み取り専用のテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/spinner.md
index f7a8c7fd59..50925fc840 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/table.md
index 47affe249e..6c297064d0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 Table は編集可能なテーブルを表示します。
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/tabs.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/tabs.md
index 267fa5a281..929d33bac2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/tabs.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 Tabs は、複数のタブを表示し、表示内容を切り替えることができます。
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/text.md
index da7adb5386..227a0d369e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/textarea.md
index a7aa6806f3..01246c10b5 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/time-picker.md
index d2453295c8..18990f2e56 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/tooltip.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/tooltip.md
index 7cca54cad6..85820d239a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/tooltip.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/desktop/tooltip.md
@@ -8,7 +8,7 @@ sidebar_label: Tooltip
 
 Tooltip は要素にホバーしたりフォーカスしたりする時に、対象となる要素のラベルや短い説明を表示します。
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-button.md
index 6c8ec36a74..8343913f7e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-checkbox.md
index ac002d3acb..61dbb63aa1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-date-picker.md
index 9194bf9649..8326cd979b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-dropdown.md
index bb15576523..7fa2b3b928 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-multichoice.md
index 54f70487dc..5dfbe33d3c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-notification.md
index e9a0fb340b..9ef43db522 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-radio-button.md
index 069db3a1ae..8a9737ad5f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.12.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/attachment.md
index 437f98985e..c17e67cf29 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/attachment.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/button.md
index acf505887d..01f319b94a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/checkbox.md
index 62c3f54e8c..78a1f2cfc1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/combobox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/combobox.md
index a4afc00dc4..b1fb134b89 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/combobox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 Combobox は複数選択肢の中から一つの値を検索して選択することができます。
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/date-picker.md
index ad33925ab1..a82e4ab5e1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/datetime-picker.md
index 56b6d566b8..6137ae3f19 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/dialog.md
index 671ab29735..15a07bab0b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/dropdown.md
index 84c573d362..74320ee8a1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/field-group.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/field-group.md
index 5507987fa0..94749b21ac 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/field-group.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 FieldGroup は、コンテンツの開閉を切り替えることができます。
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/multichoice.md
index e68be76aab..7dddaaf178 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/notification.md
index 3717aedf16..12ae0f58b3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/radio-button.md
index d886c29875..c15f34b852 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/readonly-table.md
index eefe53abc5..93a41f74b2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は読み取り専用のテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/spinner.md
index bec7fa532b..02d8a5ca85 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/table.md
index 47affe249e..6c297064d0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 Table は編集可能なテーブルを表示します。
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/tabs.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/tabs.md
index 267fa5a281..929d33bac2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/tabs.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 Tabs は、複数のタブを表示し、表示内容を切り替えることができます。
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/text.md
index da7adb5386..227a0d369e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/textarea.md
index a7aa6806f3..01246c10b5 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/time-picker.md
index d2453295c8..18990f2e56 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/tooltip.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/tooltip.md
index 3db5166e53..0dfd7e27ed 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/tooltip.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/desktop/tooltip.md
@@ -8,7 +8,7 @@ sidebar_label: Tooltip
 
 Tooltip は要素にホバーしたりフォーカスしたりする時に、対象となる要素のラベルや短い説明を表示します。
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-button.md
index 6c8ec36a74..8343913f7e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-checkbox.md
index 99272352d2..85ae137281 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-date-picker.md
index 9194bf9649..8326cd979b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-dropdown.md
index dfc5bb1e3c..647f8cf10c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-multichoice.md
index 1f16998d0c..929f02b7e6 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-notification.md
index e9a0fb340b..9ef43db522 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-radio-button.md
index a4ef088a32..2f55bba894 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.13.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/attachment.md
index 437f98985e..c17e67cf29 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/attachment.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/button.md
index acf505887d..01f319b94a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/checkbox.md
index 62c3f54e8c..78a1f2cfc1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/combobox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/combobox.md
index a4afc00dc4..b1fb134b89 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/combobox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 Combobox は複数選択肢の中から一つの値を検索して選択することができます。
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/date-picker.md
index ad33925ab1..a82e4ab5e1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/datetime-picker.md
index 56b6d566b8..6137ae3f19 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/dialog.md
index 0bf7eeda3a..5e08810e44 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/dialog.md
@@ -9,7 +9,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/dropdown.md
index 84c573d362..74320ee8a1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/field-group.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/field-group.md
index 5507987fa0..94749b21ac 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/field-group.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 FieldGroup は、コンテンツの開閉を切り替えることができます。
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/multichoice.md
index e68be76aab..7dddaaf178 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/notification.md
index 3717aedf16..12ae0f58b3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/radio-button.md
index d886c29875..c15f34b852 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/readonly-table.md
index 2394b99d05..4f3864ec3c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は読み取り専用のテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/spinner.md
index bec7fa532b..02d8a5ca85 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/table.md
index fdc5a8d36c..3b335f5a8d 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 Table は編集可能なテーブルを表示します。
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/tabs.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/tabs.md
index f588c99a65..909c652064 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/tabs.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 Tabs は、複数のタブを表示し、表示内容を切り替えることができます。
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/text.md
index da7adb5386..227a0d369e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/textarea.md
index 24bb3d7f59..c8bb9a8512 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/time-picker.md
index d2453295c8..18990f2e56 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/tooltip.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/tooltip.md
index f7ae8e344a..8620357d8f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/tooltip.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/desktop/tooltip.md
@@ -9,7 +9,7 @@ sidebar_label: Tooltip
 
 Tooltip は要素にホバーしたりフォーカスしたりする時に、対象となる要素のラベルや短い説明を表示します。
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-button.md
index 6c8ec36a74..8343913f7e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-checkbox.md
index 99272352d2..85ae137281 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-date-picker.md
index 9194bf9649..8326cd979b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-dropdown.md
index dfc5bb1e3c..647f8cf10c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-multichoice.md
index 1f16998d0c..929f02b7e6 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-notification.md
index e9a0fb340b..9ef43db522 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-radio-button.md
index a4ef088a32..2f55bba894 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.14.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/attachment.md
index 437f98985e..c17e67cf29 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/attachment.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/button.md
index acf505887d..01f319b94a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/checkbox.md
index 62c3f54e8c..78a1f2cfc1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/combobox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/combobox.md
index a4afc00dc4..b1fb134b89 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/combobox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 Combobox は複数選択肢の中から一つの値を検索して選択することができます。
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/date-picker.md
index ad33925ab1..a82e4ab5e1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/datetime-picker.md
index 56b6d566b8..6137ae3f19 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/dialog.md
index 0bf7eeda3a..5e08810e44 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/dialog.md
@@ -9,7 +9,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/dropdown.md
index 84c573d362..74320ee8a1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/field-group.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/field-group.md
index 5507987fa0..94749b21ac 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/field-group.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 FieldGroup は、コンテンツの開閉を切り替えることができます。
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/multichoice.md
index e68be76aab..7dddaaf178 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/notification.md
index 3717aedf16..12ae0f58b3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/radio-button.md
index d886c29875..c15f34b852 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/readonly-table.md
index 2394b99d05..4f3864ec3c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は読み取り専用のテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/spinner.md
index bec7fa532b..02d8a5ca85 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/table.md
index fdc5a8d36c..3b335f5a8d 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 Table は編集可能なテーブルを表示します。
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/tabs.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/tabs.md
index f588c99a65..909c652064 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/tabs.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 Tabs は、複数のタブを表示し、表示内容を切り替えることができます。
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/text.md
index da7adb5386..227a0d369e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/textarea.md
index 24bb3d7f59..c8bb9a8512 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/time-picker.md
index d2453295c8..18990f2e56 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/tooltip.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/tooltip.md
index cfad319a12..3286422faf 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/tooltip.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/desktop/tooltip.md
@@ -9,7 +9,7 @@ sidebar_label: Tooltip
 
 Tooltip は要素にホバーしたりフォーカスしたりする時に、対象となる要素のラベルや短い説明を表示します。
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-button.md
index 6c8ec36a74..8343913f7e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-checkbox.md
index 02c54829aa..6944d05745 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-date-picker.md
index 9194bf9649..8326cd979b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-dropdown.md
index f5f960ca03..b0604b9d70 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-multichoice.md
index 755aa46a8e..49095dcc00 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-notification.md
index e9a0fb340b..9ef43db522 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-radio-button.md
index 3286bfc973..5229648667 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.15.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/attachment.md
index 437f98985e..c17e67cf29 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/attachment.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/button.md
index 164c06a7dd..65a01f70e2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/checkbox.md
index 62c3f54e8c..78a1f2cfc1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/combobox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/combobox.md
index a4afc00dc4..b1fb134b89 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/combobox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 Combobox は複数選択肢の中から一つの値を検索して選択することができます。
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/date-picker.md
index ad33925ab1..a82e4ab5e1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/datetime-picker.md
index 56b6d566b8..6137ae3f19 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/dialog.md
index c296231e98..aa17ae8178 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/dialog.md
@@ -9,7 +9,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/dropdown.md
index 8dde8eaf92..700f038ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/field-group.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/field-group.md
index 278f753c2c..009cbb55c4 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/field-group.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 FieldGroup は、コンテンツの開閉を切り替えることができます。
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/multichoice.md
index abec92e0b1..6b629983be 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/notification.md
index 3717aedf16..12ae0f58b3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/radio-button.md
index d886c29875..c15f34b852 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/readonly-table.md
index 477a11d655..96b250f8ac 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は読み取り専用のテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/spinner.md
index bec7fa532b..02d8a5ca85 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/table.md
index 8667c7d869..889fe406c9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 Table は編集可能なテーブルを表示します。
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/tabs.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/tabs.md
index f588c99a65..909c652064 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/tabs.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 Tabs は、複数のタブを表示し、表示内容を切り替えることができます。
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/text.md
index b4ba63cedc..a89761da7b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/textarea.md
index 24bb3d7f59..c8bb9a8512 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/time-picker.md
index d2453295c8..18990f2e56 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/tooltip.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/tooltip.md
index 5a421ef234..0c729913d3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/tooltip.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/desktop/tooltip.md
@@ -9,7 +9,7 @@ sidebar_label: Tooltip
 
 Tooltip は要素にホバーしたりフォーカスしたりする時に、対象となる要素のラベルや短い説明を表示します。
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-button.md
index 1683003a35..5bb77a0112 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-checkbox.md
index 02c54829aa..6944d05745 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-date-picker.md
index 9194bf9649..8326cd979b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-dropdown.md
index f5f960ca03..b0604b9d70 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-multichoice.md
index 755aa46a8e..49095dcc00 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-notification.md
index e9a0fb340b..9ef43db522 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-radio-button.md
index 3286bfc973..5229648667 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.16.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/attachment.md
index 437f98985e..c17e67cf29 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/attachment.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/button.md
index 164c06a7dd..65a01f70e2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/checkbox.md
index 62c3f54e8c..78a1f2cfc1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/combobox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/combobox.md
index a4afc00dc4..b1fb134b89 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/combobox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 Combobox は複数選択肢の中から一つの値を検索して選択することができます。
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/date-picker.md
index ad33925ab1..a82e4ab5e1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/datetime-picker.md
index 56b6d566b8..6137ae3f19 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/dialog.md
index 94c5df6580..5bc2e7d8b0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/dialog.md
@@ -9,7 +9,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/dropdown.md
index 8dde8eaf92..700f038ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/field-group.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/field-group.md
index 278f753c2c..009cbb55c4 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/field-group.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 FieldGroup は、コンテンツの開閉を切り替えることができます。
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/multichoice.md
index abec92e0b1..6b629983be 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/notification.md
index 3717aedf16..12ae0f58b3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/radio-button.md
index d886c29875..c15f34b852 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/readonly-table.md
index 477a11d655..96b250f8ac 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は読み取り専用のテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/spinner.md
index bec7fa532b..02d8a5ca85 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/table.md
index a934a0df3c..8ce5cefa6e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 Table は編集可能なテーブルを表示します。
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/tabs.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/tabs.md
index f588c99a65..909c652064 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/tabs.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 Tabs は、複数のタブを表示し、表示内容を切り替えることができます。
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/text.md
index b4ba63cedc..a89761da7b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/textarea.md
index 24bb3d7f59..c8bb9a8512 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/time-picker.md
index d2453295c8..18990f2e56 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/tooltip.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/tooltip.md
index 5a421ef234..0c729913d3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/tooltip.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/desktop/tooltip.md
@@ -9,7 +9,7 @@ sidebar_label: Tooltip
 
 Tooltip は要素にホバーしたりフォーカスしたりする時に、対象となる要素のラベルや短い説明を表示します。
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-button.md
index 1683003a35..5bb77a0112 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-checkbox.md
index 02c54829aa..6944d05745 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-date-picker.md
index 9194bf9649..8326cd979b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-dropdown.md
index f5f960ca03..b0604b9d70 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-multichoice.md
index 755aa46a8e..49095dcc00 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-notification.md
index e9a0fb340b..9ef43db522 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-radio-button.md
index 3286bfc973..5229648667 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/attachment.md
index 437f98985e..c17e67cf29 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/attachment.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/button.md
index 164c06a7dd..65a01f70e2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/checkbox.md
index 62c3f54e8c..78a1f2cfc1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/combobox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/combobox.md
index a4afc00dc4..b1fb134b89 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/combobox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 Combobox は複数選択肢の中から一つの値を検索して選択することができます。
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/date-picker.md
index ad33925ab1..a82e4ab5e1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/datetime-picker.md
index 56b6d566b8..6137ae3f19 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/dialog.md
index 94c5df6580..5bc2e7d8b0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/dialog.md
@@ -9,7 +9,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/dropdown.md
index 8dde8eaf92..700f038ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/field-group.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/field-group.md
index 278f753c2c..009cbb55c4 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/field-group.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 FieldGroup は、コンテンツの開閉を切り替えることができます。
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/multichoice.md
index abec92e0b1..6b629983be 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/notification.md
index 3717aedf16..12ae0f58b3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/radio-button.md
index d886c29875..c15f34b852 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/readonly-table.md
index 477a11d655..96b250f8ac 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は読み取り専用のテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/spinner.md
index bec7fa532b..02d8a5ca85 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/table.md
index a934a0df3c..8ce5cefa6e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 Table は編集可能なテーブルを表示します。
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/tabs.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/tabs.md
index f588c99a65..909c652064 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/tabs.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 Tabs は、複数のタブを表示し、表示内容を切り替えることができます。
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/text.md
index b4ba63cedc..a89761da7b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/textarea.md
index 24bb3d7f59..c8bb9a8512 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/time-picker.md
index d2453295c8..18990f2e56 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/tooltip.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/tooltip.md
index 5a421ef234..0c729913d3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/tooltip.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/desktop/tooltip.md
@@ -9,7 +9,7 @@ sidebar_label: Tooltip
 
 Tooltip は要素にホバーしたりフォーカスしたりする時に、対象となる要素のラベルや短い説明を表示します。
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-button.md
index 1683003a35..5bb77a0112 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-checkbox.md
index 02c54829aa..6944d05745 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-date-picker.md
index 9194bf9649..8326cd979b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-dropdown.md
index f5f960ca03..b0604b9d70 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-multichoice.md
index 755aa46a8e..49095dcc00 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-notification.md
index e9a0fb340b..9ef43db522 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-radio-button.md
index 3286bfc973..5229648667 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.17.1/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/attachment.md
new file mode 100644
index 0000000000..46b1246ff9
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/attachment.md
@@ -0,0 +1,119 @@
+---
+id: attachment
+title: Attachment
+sidebar_label: Attachment
+---
+
+## Overview
+
+Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
+
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
+
+<AttachmentComponent />
+
+---
+
+## Specification
+
+### Property
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | コンポーネントの class 名 | |
+| error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | ""  | コンポーネントの id 名 | |
+| label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| language *1 | string | "auto"  | 	言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
+| message | string | ""  | コンポーネントに表示するメッセージ（file type/size の制限事項など） | |
+| disabled | boolean | false | コンポーネントの選択可/不可設定 | |
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 | |
+| visible | boolean | true | コンポーネントの表示/非表示設定 | |
+| files | Array\<[File](#file)\> | [] | ファイルリスト | [File object](https://developer.mozilla.org/ja/docs/Web/API/File)もしくは name と size を含むオブジェクトを指定できる<br/>files が配列以外の場合、エラーを出力する |
+
+:::info
+*1: "参照" ボタンと "ここにファイルをドロップします" のテキストは language プロパティの値に応じて切り替わる.
+:::
+
+#### File
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| name | string | "" | ファイル名 | |
+| size | string | "" | ファイルサイズ | ファイルサイズに応じて以下のように記載される<li>size >= 1073741824: xxx GB</li><li>1073741824 > size >= 1048576: xxx MB</li><li>1048576 > size >= 1024: xxx KB</li><li>1024 > size: xxx bytes</li> |
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | ファイルが変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/>event.detail で以下の値を受け取ることができる<li>add-file（ファイル追加された時にトリガーされる）<ul><li>event.detail.type: "add-file"</li><li>event.detail.oldFiles: 追加前のファイルリスト</li><li>event.detail.files: 追加後のファイルリスト</li><li>event.detail.fileIndex: 追加されたファイルの配列番号（Type: Array\<number\>）<ul><li>"event.detail.files[event.detail.fileIndex[x]]" で追加されたファイルを取得できる</li></ul></li></ul></li><li>remove-file（ファイル削除された時にトリガーされる）<ul><li>event.detail.type: "remove-file"</li><li>event.detail.oldFiles: 削除前のファイルリスト</li><li>event.detail.files: 削除後のファイルリスト</li><li>event.detail.fileIndex: 削除されたファイルの配列番号（Type: Array\<number\>）<ul><li>"event.detail.oldFiles[event.detail.fileIndex[x]]" で削除されたファイルを取得できる</li></ul></li></ul></li> |
+
+### Constructor
+
+Attachment(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | コンポーネントのプロパティを含むオブジェクト |  |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-attachment-width |
+| --kuc-attachment-height |
+| --kuc-attachment-item-font-size |
+| --kuc-attachment-message-font-size |
+| --kuc-attachment-message-color |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+``` javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const attachment = new Kuc.Attachment({
+  label: 'Attachment',
+  files: [
+    { name: 'file.txt', size: '150' },
+    new File(['foo'], 'foo.txt', { type: 'text/plain' })
+  ],
+  language: 'auto',
+  message: 'Max size: 50MB',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  requiredIcon: false
+});
+space.appendChild(attachment);
+
+attachment.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Attachment customization](../../guides/attachment-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/button.md
new file mode 100644
index 0000000000..65a01f70e2
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/button.md
@@ -0,0 +1,117 @@
+---
+id: button
+title: Button
+sidebar_label: Button
+---
+
+## Overview
+
+Button は、ボタンを表示します。
+
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
+
+<ButtonComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 |  |
+| id | string | "" | コンポーネントの id 名 |  |
+| text | string | "" | ボタンに表示するテキスト | content が未指定の場合、text が表示される<br/>その他の場合、text は無視される |
+| type | string | "normal" | ボタンのデザインタイプ | 以下を指定できる<br/>"normal" : Gray(#f7f9fA)<br/>"submit" : Blue(#3498db)<br/>"alert" : Red(#e74c3c) |
+| content *1 | string/HTMLElement | ""  | ボタン内の DOM | HTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される |
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+
+:::caution
+*1: kintone UI Component はこのプロパティの値を内部的にサニタイズしていません。ユーザー入力を受け付けるような実装でこのプロパティを使用する場合は、開発者自身で XSS 対策をしてください。
+:::
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| click | function | クリックされた時のイベントハンドラ | 引数には Event の event オブジェクトをとる |
+
+### Constructor
+
+Button(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-button-width |
+| --kuc-button-height |
+| --kuc-button-background-color |
+| --kuc-button-background-color-hover |
+| --kuc-button-background-color-active |
+| --kuc-button-background-color-focus |
+| --kuc-button-font-size |
+| --kuc-button-text-color |
+
+---
+
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const header = kintone.app.getHeaderMenuSpaceElement();
+
+const button = new Kuc.Button({
+  text: 'Submit',
+  type: 'submit',
+  content: `<div>
+              <svg>...</svg>
+              <span>Search</span>
+            </div>;`,
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+header.appendChild(button);
+
+button.addEventListener('click', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Search box customization](../../guides/search-box-customization.md)
+- [Search box customization with TypeScript](../../guides/search-box-customization-with-typescript.md)
+- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
+- [Bulk update customization](../../guides/bulk-update-customization.md)
+- [Format setting plug-in](../../guides/format-setting-plugin.md)
+- [Attachment customization](../../guides/attachment-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/checkbox.md
new file mode 100644
index 0000000000..78a1f2cfc1
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/checkbox.md
@@ -0,0 +1,153 @@
+---
+id: checkbox
+title: Checkbox
+sidebar_label: Checkbox
+---
+
+## Overview
+
+Checkbox は、複数選択のチェックボックスを表示します。
+
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
+
+<CheckboxComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| itemLayout | string | "horizontal" | 選択肢の並べ方 | 以下を指定できる<br/>"horizontal" : 横並び<br/>"vertical" : 縦並び |
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| borderVisible | boolean | true | 選択肢を囲う枠線の表示/非表示設定 ||
+| disabled | boolean | false | コンポーネントの選択可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+| items | Array\<[Item](#item)\> | [] | 表示する選択肢一覧 | items が配列以外の場合、エラーを出力する |
+| value *1 | Array\<string\> | [] | 選択されている値 | value と selectedIndex が未指定の場合、何も選択されない<br/>重複する value を指定し、selectedIndex を指定しない場合、Item.value で最初にマッピングされた value の項目が選択され、selectedIndex にはその選択肢のインデックス番号が入る<br/>value が配列以外の場合、エラーを出力する |
+| selectedIndex *1 | Array\<Number\> | [] | 選択されている値のインデックス番号 | items 内に重複する Item.value がある場合、どの Item.value が選択されるか指定するためのプロパティ<br/>value が未指定で、selectedIndex に有効な値が指定されている場合、 そのインデックス番号の選択肢が選択される<br/>value に重複した Item.value が指定され、selectedIndex の値が value 内の重複した Item.value とマッピングした場合、そのインデックス番号の選択肢が選択される<br/>selectedIndex が配列以外の場合、エラーを出力する |
+
+:::info
+*1: value と Item.value に重複した値を指定できる。重複した値を指定する場合、value と selectedIndex プロパティを使って制御することができる。<br/>
+例: `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}, {label: 'Lemon', value: 'fruit'}]` を指定する
+
+- 以下のように value を指定、selectedIndex を未指定の場合:
+  - value = ['fruit', 'vegetable']: 最初と 3番目の値が選択される。
+  - value = ['meat', 'other']: 何も選択されない。
+
+- 以下のように value を未指定、selectedIndex を指定する場合:
+  - selectedIndex = [0, 1]: 最初と 2番目の値が選択される。
+  - selectedIndex = [98, 99]: 何も選択されない。
+
+- 以下のように value と selectedIndex を指定する場合:
+  - value = ['fruit', 'vegetable'], selectedIndex = [1, 3]: 2番目と 3番目の値が選択される。
+  - value = ['fruit', 'fruit', 'vegetable'], selectedIndex = [1, 3]: 2番目と 3番目と 4番目の値が選択される。
+  - value = ['fruit', 'fruit'], selectedIndex = [1, 2, 3]: 最初と 2番目の値が選択される。<br/>
+※ value と selectedIndex が同時に指定された場合、value の値が優先される。よって、上記の 1つ目と 3つ目の例において selectedIndex の 3 に当たる item は選択されない。
+:::
+
+#### Item
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | 各選択肢のテキスト | Item.label が未指定の場合、UI 上は Item.value の値が表示される |
+| value | string | null | 各選択肢の値 | Item.value に重複の値を指定できる |
+| disabled | boolean | false | 各オプションの選択可/不可設定 | |
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+Checkbox(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-checkbox-menu-width |
+| --kuc-checkbox-menu-height |
+| --kuc-checkbox-menu-font-size |
+| --kuc-checkbox-menu-color |
+| --kuc-checkbox-menu-color-hover |
+
+---
+
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const checkbox = new Kuc.Checkbox({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: ['Orange'],
+  selectedIndex: [0],
+  itemLayout: 'horizontal',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  borderVisible: true
+});
+space.appendChild(checkbox);
+
+checkbox.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/combobox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/combobox.md
new file mode 100644
index 0000000000..b1fb134b89
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/combobox.md
@@ -0,0 +1,114 @@
+---
+id: combobox
+title: Combobox
+sidebar_label: Combobox
+---
+
+## Overview
+
+Combobox は複数選択肢の中から一つの値を検索して選択することができます。
+
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
+
+<ComboboxComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| value | string | "" | 選択されている値 | value が未指定の場合、何も選択されない<br/>value が文字列以外の場合、エラーを出力する |
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+| items | Array\<[Item](#item)\> | [] | 表示する選択肢一覧 | items が配列以外の場合、エラーを出力する |
+
+#### Item
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | 各選択肢のテキスト | Item.label が未指定の場合、UI 上は Item.value の値が表示される |
+| value | string | null | 各選択肢の値 | Item.value に重複した値を指定した場合、エラーを出力する |
+| disabled | boolean | false | 各オプションの選択可/不可設定 | |
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+Combobox(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。<br/>
+toggle は、Combobox の入力欄とボタンの領域を示します。
+#### Property
+| Name |
+| :--- |
+| --kuc-combobox-font-size |
+| --kuc-combobox-toggle-width |
+| --kuc-combobox-toggle-height |
+| --kuc-combobox-toggle-color |
+| --kuc-combobox-menu-color |
+| --kuc-combobox-menu-color-selected |
+
+---
+
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const combobox = new Kuc.Combobox({
+  label: 'Fruit',
+  items: [
+    { label: 'Banana', value: 'banana', disabled: true },
+    { label: 'Orange', value: 'orange' },
+    { label: 'Apple', value: 'apple' }
+  ],
+  value: 'orange',
+  requiredIcon: true,
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(combobox);
+
+combobox.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/date-picker.md
new file mode 100644
index 0000000000..b90a080655
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/date-picker.md
@@ -0,0 +1,109 @@
+---
+id: date-picker
+title: DatePicker
+sidebar_label: DatePicker
+---
+
+## Overview
+
+DatePicker は入力エリアと日付選択用のカレンダーを表示します。
+
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
+
+<DatePickerComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | コンポーネントの class 名 | |
+| error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | ""  | コンポーネントの id 名 | |
+| label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| language *1 | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
+| value | string | ""  | 表示するテキスト | フォーマットは YYYY-MM-DD<br/>以下の日付も指定できる（内部的に YYYY-MM-DD に変換される）:<li>2021</li><li>2021-1</li><li>2021-01</li><li>2021-1-9</li><li>21-01-01</li>年が 4文字以下の場合、0 が先頭に補完される<br/>日や月の記載がない場合、01 で補完される<br/>日や月が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値を指定した場合、エラーを出力する |
+| disabled | boolean | false | コンポーネントの選択可/不可設定 | |
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 | |
+| visible | boolean | true | コンポーネントの表示/非表示設定 | |
+
+:::info
+*1: 表示される日付のフォーマットは、language プロパティの設定に応じて以下のように自動的に切り替わる。
+- "en" の場合: MM/DD/YYYY
+- "ja", "zh", "zh-TW", "es" の場合: YYYY-MM-DD
+:::
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+DatePicker(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | コンポーネントのプロパティを含むオブジェクト |  |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-date-picker-input-width |
+| --kuc-date-picker-input-height |
+| --kuc-date-picker-input-color |
+| --kuc-date-picker-input-font-size |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const datePicker = new Kuc.DatePicker({
+  label: 'Date',
+  requiredIcon: true,
+  language: 'auto',
+  value: '2021-11-11',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(datePicker);
+
+datePicker.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Format setting plug-in](../../guides/format-setting-plugin.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/datetime-picker.md
new file mode 100644
index 0000000000..9ccb2450b3
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/datetime-picker.md
@@ -0,0 +1,112 @@
+---
+id: datetime-picker
+title: DateTimePicker
+sidebar_label: DateTimePicker
+---
+
+## Overview
+
+DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
+
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
+
+<DateTimePickerComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | コンポーネントの class 名 | |
+| error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | ""  | コンポーネントの id 名 | |
+| label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| language *1 | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
+| max | string | "" | 時刻リストの終了時間設定 | フォーマットは HH:MM<br/>時刻リストは、max に指定した時刻まで表示されて、それ以降は表示されない<br/>以下の時間も指定できる（内部的に HH:MM に変換される）:<li>5:30</li><li>05:3</li><li>5:3</li>時間や分が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値や min 時刻が max 時刻よりも大きい値の場合、エラーを出力する |
+| min | string | "" | 時刻リストの開始時間設定 | フォーマットは HH:MM<br/>時刻リストは、min に指定した時刻から表示されて、それ以前は表示されない<br/>以下の時間も指定できる（内部的に HH:MM に変換される）:<li>5:30</li><li>05:3</li><li>5:3</li>時間や分が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値や min 時刻が max 時刻よりも大きい値の場合、エラーを出力する |
+| value | string | ""  | 表示するテキスト | フォーマットは YYYY-MM-DDTHH:MM:SS<br/>以下の日時も指定できる（内部的に YYYY-MM-DDTHH:MM:SS に変換される）:<li>2021</li><li>2021T01</li><li>2021-06</li><li>2021-12-12</li><li>2021-12-12T01</li><li>2021-12-12T01:01</li>日や月の記載がない場合、01 で補完される<br/>時間や分や秒の記載がない場合、00 で補完される<br/>不正なフォーマットや値や min/max プロパティで指定した有効な時刻の範囲を超える値を指定した場合、エラーを出力する |
+| disabled | boolean | false | コンポーネントの選択可/不可設定 | |
+| hour12 | boolean | false | 時刻表記の設定 (12時間表記/24時間表記) デフォルトは 24時間表記 | 指定できるオプション:<br/>true: 12時間表記<br/>false: 24時間表記 |
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 | |
+| visible | boolean | true | コンポーネントの表示/非表示設定 | |
+| timeStep | number | 30 | 時刻リスト内の時刻間隔の設定 | 単位は分（正の整数）<br/>小数点以下を指定した場合は、最も近い整数に丸められる<br/>数値以外の値や max と min プロパティの時刻差異よりも大きな値を指定した場合、エラーを出力する |
+
+:::info
+*1: 表示される日付のフォーマットは、language プロパティの設定に応じて以下のように自動的に切り替わる。
+- "en" の場合: MM/DD/YYYY
+- "ja", "zh", "zh-TW", "es" の場合: YYYY-MM-DD
+:::
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値<br/>event.detail.changedPart : 変更されたパーツ "date" もしくは "time" |
+
+### Constructor
+
+DateTimePicker(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | コンポーネントのプロパティを含むオブジェクト |  |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-date-time-picker-date-input-width |
+| --kuc-date-time-picker-time-input-width |
+| --kuc-date-time-picker-input-height |
+| --kuc-date-time-picker-input-font-size |
+| --kuc-date-time-picker-input-color |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const dateTimePicker = new Kuc.DateTimePicker({
+  label: 'DateTime',
+  requiredIcon: true,
+  language: 'auto',
+  hour12: false,
+  value: '2021-11-11T11:30:00',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  timeStep: 30,
+  max: '23:59',
+  min: '00:00'
+});
+space.appendChild(dateTimePicker);
+
+dateTimePicker.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/dialog.md
new file mode 100644
index 0000000000..5bc2e7d8b0
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/dialog.md
@@ -0,0 +1,149 @@
+---
+id: dialog
+title: Dialog
+description: Dialog は、ダイアログボックスを表示します。
+sidebar_label: Dialog
+---
+
+## Overview
+
+Dialog は、ダイアログボックスを表示します。
+
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
+
+<DialogComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| icon | string | "" | content 領域左上に表示するアイコン | 以下を指定できる:<li>"info" : ![info](/img/icon-info.png)</li><li>"success" : ![success](/img/icon-success.png)</li><li>"error" : ![error](/img/icon-error.png)</li><li>"warning" : ![warning](/img/icon-warning.png)</li><li>"question" : ![question](/img/icon-question.png)</li><li>"" : アイコンなし</li> |
+| title | string | "" | Header のタイトル | header が未指定の場合、title が表示される<br/>その他の場合、title は無視される |
+| content *1 | string/HTMLElement | "" | Content の DOM | HTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される |
+| footer *1 | string/HTMLElement | "" | Footer の DOM | HTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される |
+| header *1 | string/HTMLElement | ""  | Header の DOM | HTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される |
+| container | HTMLElement | document.body | コンポーネントを追加する対象の要素 | デフォルトではトップレベルのドキュメントオブジェクトのボディを使うので、ほとんどの場合は document.body となる<br/>container が HTMLElement 以外の場合、エラーを出力する |
+| footerVisible | boolean | true | Footer の表示/非表示設定 | |
+
+:::caution
+*1: kintone UI Component はこのプロパティの値を内部的にサニタイズしていません。ユーザー入力を受け付けるような実装でこのプロパティを使用する場合は、開発者自身で XSS 対策をしてください。
+:::
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| close | function | コンポーネントが閉じられた時のイベントハンドラ | 引数には Event の event オブジェクトをとる |
+
+### Constructor
+
+Dialog(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+---
+### Method
+
+使用できるメソッドの一覧です。
+
+#### open()
+Dialog を表示する
+
+##### Parameter
+none
+
+##### Return
+none
+
+#### close()
+Dialog を非表示にする
+
+##### Parameter
+none
+
+##### Return
+none
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-dialog-header-font-size |
+| --kuc-dialog-header-color |
+| --kuc-dialog-max-width |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+// Create OK and Cancel buttons
+const okButton = new Kuc.Button({
+  text: 'OK',
+  type: 'submit'
+});
+const cancelButton = new Kuc.Button({
+  text: 'Cancel',
+  type: 'normal'
+});
+
+okButton.addEventListener('click', () => {
+  // handle click OK button
+});
+cancelButton.addEventListener('click', () => {
+  // handle click Cancel button
+});
+
+// Wrap OK and Cancel buttons with a div
+const divEl = document.createElement('div');
+divEl.appendChild(okButton);
+divEl.appendChild(cancelButton);
+
+const dialog = new Kuc.Dialog({
+  title: 'Title',
+  content: '<div>This is Content</div>',
+  footer: divEl,
+  header: '<div>This is Header</div>',
+  icon: 'info',
+  container: document.body,
+  footerVisible: true
+});
+
+dialog.addEventListener('close', event => {
+  console.log(event);
+});
+
+dialog.open();
+dialog.close();
+```
+
+---
+
+## Related Articles
+
+- [Format setting plug-in](../../guides/format-setting-plugin.md)
+- [Search box customization with TypeScript](../../guides/search-box-customization-with-typescript.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/dropdown.md
new file mode 100644
index 0000000000..700f038ddb
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/dropdown.md
@@ -0,0 +1,147 @@
+---
+id: dropdown
+title: Dropdown
+sidebar_label: Dropdown
+---
+
+## Overview
+
+Dropdown は複数選択肢の中から一つの値を選択することができます。
+
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
+
+<DropdownComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| value *1 | string | "" | 選択されている値 | value と selectedIndex が未指定の場合、何も選択されない<br/>重複する value を指定し、selectedIndex を指定しない場合、Item.value で最初にマッピングされた value の項目が選択され、selectedIndex にはその選択肢のインデックス番号が入る<br/>value が文字列以外の場合、エラーを出力する |
+| selectedIndex *1 | number | -1 | 選択されている値のインデックス番号 | items 内に重複する Item.value がある場合、どの Item.value が選択されるか指定するためのプロパティ<br/>value が未指定で、selectedIndex に有効な値が指定されている場合、 そのインデックス番号の選択肢が選択される<br/>value に重複した Item.value が指定され、selectedIndex の値が value 内の重複した Item.value とマッピングした場合、そのインデックス番号の選択肢が選択される<br/>selectedIndex が数値以外の場合、エラーを出力する |
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+| items | Array\<[Item](#item)\> | [] | 表示する選択肢一覧 | items が配列以外の場合、エラーを出力する |
+
+:::info
+*1: Item.value に重複した値を指定できる。重複した値を指定する場合、value と selectedIndex プロパティを使って制御することができる。<br/>
+例: `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}]` を指定する
+
+- 以下のように value を指定、selectedIndex を未指定の場合:
+  - value = 'fruit': 最初の値が選択される。
+  - value = 'other': 何も選択されない。
+
+- 以下のように value を未指定、selectedIndex を指定する場合:
+  - selectedIndex = 1: 2番目の値が選択される。
+  - selectedIndex = 99: 何も選択されない。
+:::
+
+#### Item
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | 各選択肢のテキスト | Item.label が未指定の場合、UI 上は Item.value の値が表示される |
+| value | string | null | 各選択肢の値 | Item.value に重複の値を指定できる |
+| disabled | boolean | false | 各オプションの選択可/不可設定 | |
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+Dropdown(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。<br/>
+toggle は、Dropdown ボタンの領域を示します。
+#### Property
+| Name |
+| :--- |
+| --kuc-dropdown-font-size |
+| --kuc-dropdown-toggle-width |
+| --kuc-dropdown-toggle-height |
+| --kuc-dropdown-toggle-color |
+| --kuc-dropdown-menu-color |
+| --kuc-dropdown-menu-color-selected |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const dropdown = new Kuc.Dropdown({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: 'Orange',
+  selectedIndex: 0,
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(dropdown);
+
+dropdown.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
+- [Format setting plug-in](../../guides/format-setting-plugin.md)
+- [In-office day list customization](../../guides/in-office-day-list-customization.md)
+- [Table and ReadOnlyTable customization](../../guides/table-readonly-table-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/field-group.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/field-group.md
new file mode 100644
index 0000000000..009cbb55c4
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/field-group.md
@@ -0,0 +1,93 @@
+---
+id: field-group
+title: FieldGroup
+sidebar_label: FieldGroup
+---
+
+## Overview
+FieldGroup は、コンテンツの開閉を切り替えることができます。
+
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
+
+<FieldGroupComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 | |
+| id | string | "" | コンポーネントの id 名 | |
+| label | string | "" | コンポーネントの説明ラベル | |
+| content *1 | string/HTMLElement | "" | Content の DOM | HTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される |
+| disabled | boolean | false | コンポーネントの編集可/不可設定 | |
+| expanded | boolean | false | コンポーネントの開閉設定 | |
+| visible | boolean | true | コンポーネントの表示/非表示設定 | |
+
+:::caution
+*1: kintone UI Component はこのプロパティの値を内部的にサニタイズしていません。ユーザー入力を受け付けるような実装でこのプロパティを使用する場合は、開発者自身で XSS 対策をしてください。
+:::
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 開閉のステータスが変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.expanded : 変更後の expanded の値（boolean） |
+
+### Constructor
+
+FieldGroup(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト |  |
+
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const text = new Kuc.Text({
+  label: 'Text',
+  value: 'orange'
+});
+const fieldGroup = new Kuc.FieldGroup({
+  className: 'options-class',
+  id: 'options-id',
+  label: 'FieldGroup',
+  disabled: false,
+  expanded: false,
+  visible: true,
+  content: text
+});
+
+space.appendChild(fieldGroup);
+
+fieldGroup.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [In-office day list customization](../../guides/in-office-day-list-customization.md)
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/multichoice.md
new file mode 100644
index 0000000000..6b629983be
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/multichoice.md
@@ -0,0 +1,149 @@
+---
+id: multichoice
+title: MultiChoice
+sidebar_label: MultiChoice
+---
+
+## Overview
+
+MultiChoice は、複数選択肢の中から複数の値を選択することができます。
+
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
+
+<MultichoiceComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+| items | Array\<[Item](#item)\> | [] | 表示する選択肢一覧 | items が配列以外の場合、エラーを出力する |
+| value *1 | Array\<string\> | [] | 選択されている値 | value と selectedIndex が未指定の場合、何も選択されない<br/>重複する value を指定し、selectedIndex を指定しない場合、Item.value で最初にマッピングされた value の項目が選択され、selectedIndex にはその選択肢のインデックス番号が入る<br/>value が配列以外の場合、エラーを出力する |
+| selectedIndex *1 | Array\<Number\> | [] | 選択されている値のインデックス番号 | items 内に重複する Item.value がある場合、どの Item.value が選択されるか指定するためのプロパティ<br/>value が未指定で、selectedIndex に有効な値が指定されている場合、 そのインデックス番号の選択肢が選択される<br/>value に重複した Item.value が指定され、selectedIndex の値が value 内の重複した Item.value とマッピングした場合、そのインデックス番号の選択肢が選択される<br/>selectedIndex が配列以外の場合、エラーを出力する |
+
+:::info
+*1: value と Item.value に重複した値を指定できる。重複した値を指定する場合、value と selectedIndex プロパティを使って制御することができる。<br/>
+例: `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}, {label: 'Lemon', value: 'fruit'}]` を指定する
+
+- 以下のように value を指定、selectedIndex を未指定の場合:
+  - value = ['fruit', 'vegetable']: 最初と 3番目の値が選択される。
+  - value = ['meat', 'other']: 何も選択されない。
+
+- 以下のように value を未指定、selectedIndex を指定する場合:
+  - selectedIndex = [0, 1]: 最初と 2番目の値が選択される。
+  - selectedIndex = [98, 99]: 何も選択されない。
+
+- 以下のように value と selectedIndex を指定する場合:
+  - value = ['fruit', 'vegetable'], selectedIndex = [1, 3]: 2番目と 3番目の値が選択される。
+  - value = ['fruit', 'fruit', 'vegetable'], selectedIndex = [1, 3]: 2番目と 3番目と 4番目の値が選択される。
+  - value = ['fruit', 'fruit'], selectedIndex = [1, 2, 3]: 最初と 2番目の値が選択される。<br/>
+※ value と selectedIndex が同時に指定された場合、value の値が優先される。よって、上記の 1つ目と 3つ目の例において selectedIndex の 3 に当たる item は選択されない。
+:::
+
+#### Item
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | 各選択肢のテキスト | Item.label が未指定の場合、UI 上は Item.value の値が表示される |
+| value | string | null | 各選択肢の値 | Item.value に重複の値を指定できる |
+| disabled | boolean | false | 各オプションの選択可/不可設定 | |
+
+### Event
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+MultiChoice(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-multi-choice-menu-width |
+| --kuc-multi-choice-menu-height |
+| --kuc-multi-choice-menu-font-size |
+| --kuc-multi-choice-menu-color |
+| --kuc-multi-choice-menu-color-selected |
+| --kuc-multi-choice-menu-background-color-hover |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const multiChoice = new Kuc.MultiChoice({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: ['Orange'],
+  selectedIndex: [0],
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(multiChoice);
+
+multiChoice.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Format setting plug-in](../../guides/format-setting-plugin.md)
+- [In-office day list customization](../../guides/in-office-day-list-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/notification.md
new file mode 100644
index 0000000000..12ae0f58b3
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/notification.md
@@ -0,0 +1,119 @@
+---
+id: notification
+title: Notification
+sidebar_label: Notification
+---
+
+## Overview
+
+Notification は、ポップアップの通知を表示します。
+
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
+
+<NotificationComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| text | string | "" | 表示するテキスト ||
+| type | string | "danger" | 背景色 | 以下を指定できる<br/>"danger" : Red(#e74c3c)<br/>"info" : Blue(#3498db)<br/>"success" : Green(#91c36c) |
+| duration | number | -1 | コンポーネントを閉じるまでのミリ秒 | 単位はミリ秒<br/>0以上の数値を指定できる<br/>もし不正な値を指定した場合（0未満もしくは数値以外）、コンポーネントは開かれたまま自動的には閉じない |
+| container | HTMLElement | document.body | コンポーネントを追加する対象の要素 | デフォルトではトップレベルのドキュメントオブジェクトのボディを使うので、ほとんどの場合は document.body となる<br/>container が HTMLElement 以外の場合、エラーを出力する |
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| close | function | コンポーネントが閉じられた時のイベントハンドラ | 引数には Event の event オブジェクトをとる |
+
+### Constructor
+
+Notification(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Method
+
+使用できるメソッドの一覧です。
+
+#### open()
+Notification を表示する
+
+##### Parameter
+none
+
+##### Return
+none
+
+#### close()
+Notification を非表示にする
+
+##### Parameter
+none
+
+##### Return
+none
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-notification-font-size |
+| --kuc-notification-color |
+| --kuc-notification-background-color |
+| --kuc-notification-close-button-background-color |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const notification = new Kuc.Notification({
+  text: 'Error occurred!',
+  type: 'danger',
+  className: 'options-class',
+  duration: 2000,
+  container: document.body
+});
+
+notification.addEventListener('close', event => {
+  console.log(event);
+});
+
+notification.open();
+notification.close();
+```
+
+---
+
+## Related Articles
+
+- [Search box customization](../../guides/search-box-customization.md)
+- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
+- [Bulk update customization](../../guides/bulk-update-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/radio-button.md
new file mode 100644
index 0000000000..c15f34b852
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/radio-button.md
@@ -0,0 +1,146 @@
+---
+id: radio-button
+title: RadioButton
+sidebar_label: RadioButton
+---
+
+## Overview
+
+RadioButton は、複数選択肢の中から一つの値を選択することができます。
+
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
+
+<RadioButtonComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| itemLayout | string | "horizontal" | 選択肢の並べ方 | 以下を指定できる<br/>"horizontal" : 横並び<br/>"vertical" : 縦並び |
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| value *1 | string | "" | 選択されている値 | value と selectedIndex が未指定の場合、何も選択されない<br/>重複する value を指定し、selectedIndex を指定しない場合、Item.value で最初にマッピングされた value の項目が選択され、selectedIndex にはその選択肢のインデックス番号が入る<br/>value が文字列以外の場合、エラーを出力する |
+| selectedIndex *1 | number | -1 | 選択されている値のインデックス番号 | items 内に重複する Item.value がある場合、どの Item.value が選択されるか指定するためのプロパティ<br/>value が未指定で、selectedIndex に有効な値が指定されている場合、 そのインデックス番号の選択肢が選択される<br/>value に重複した Item.value が指定され、selectedIndex の値が value 内の重複した Item.value とマッピングした場合、そのインデックス番号の選択肢が選択される<br/>selectedIndex が数値以外の場合、エラーを出力する |
+| borderVisible | boolean | true | 選択肢を囲う枠線の表示/非表示設定 ||
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+| items | Array\<[Item](#item)\> | [] | 表示する選択肢一覧 | items が配列以外の場合、エラーを出力する |
+
+:::info
+*1: Item.value に重複した値を指定できる。重複した値を指定する場合、value と selectedIndex プロパティを使って制御することができる。<br/>
+例: `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}]` を指定する
+
+- 以下のように value を指定、selectedIndex を未指定の場合:
+  - value = 'fruit': 最初の値が選択される。
+  - value = 'other': 何も選択されない。
+
+- 以下のように value を未指定、selectedIndex を指定する場合:
+  - selectedIndex = 1: 2番目の値が選択される。
+  - selectedIndex = 99: 何も選択されない。
+:::
+
+#### Item
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | 各選択肢のテキスト | Item.label が未指定の場合、UI 上は Item.value の値が表示される |
+| value | string | null | 各選択肢の値 | Item.value に重複の値を指定できる |
+| disabled | boolean | false | 各オプションの選択可/不可設定 | |
+
+### Event
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+RadioButton(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-radio-button-menu-width |
+| --kuc-radio-button-menu-height |
+| --kuc-radio-button-menu-font-size |
+| --kuc-radio-button-menu-color |
+| --kuc-radio-button-menu-color-hover |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const radioButton = new Kuc.RadioButton({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: 'Orange',
+  selectedIndex: 0,
+  itemLayout: 'horizontal',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  borderVisible: true
+});
+space.appendChild(radioButton);
+
+radioButton.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
+- [Table and ReadOnlyTable customization](../../guides/table-readonly-table-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/readonly-table.md
new file mode 100644
index 0000000000..96b250f8ac
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/readonly-table.md
@@ -0,0 +1,154 @@
+---
+id: readonly-table
+title: ReadOnlyTable
+sidebar_label: ReadOnlyTable
+---
+
+## Overview
+
+ReadOnlyTable は読み取り専用のテーブルを表示します。
+
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
+
+<ReadOnlyTableComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | コンポーネントの class 名 | |
+| id | string | ""  | コンポーネントの id 名 | |
+| label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| rowsPerPage | number | 5 | ページごとの行数 | 小数点以下を指定した場合は、最も近い整数に丸められる<br/>rowsPerPage が正の整数以外の場合、エラーを出力する|
+| pagination | boolean | true | ページネーションの表示/非表示設定 | false を指定した場合、ページネーションは非表示になり全ての行が表示される<br/>true を指定した場合、ページネーションは表示され rowsPerPage に指定された行数のみがページごとに表示される |
+| visible | boolean | true | コンポーネントの表示/非表示設定 | |
+| columns | Array\<[Column](#column)\> | []  | コンポーネントの列データ | columns が配列以外の場合、エラーを出力する |
+| data *1 | Array\<object\> | []  | コンポーネントの行データ | data が配列以外の場合、エラーを出力する |
+
+:::caution
+*1: kintone UI Component はこのプロパティの値を内部的にサニタイズしていません。ユーザー入力を受け付けるような実装でこのプロパティを使用する場合は、開発者自身で XSS 対策をしてください。
+:::
+
+#### Column
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| field | string | ""  | 列のキー項目 | data オブジェクトのキー項目になる<br/>そのキーに関連づけられた値が列に表示される |
+| title | string | ""  | 列のヘッダー名 | |
+| visible | boolean |  true  | 列の表示/非表示設定 | |
+
+### Constructor
+
+ReadOnlyTable(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト |  |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name | Description |
+| :--- | :--- |
+| --kuc-readonly-table-header-background-color | |
+| --kuc-readonly-table-header-color | |
+| --kuc-readonly-table-header-font-size | |
+| --kuc-readonly-table-header-height | |
+| --kuc-readonly-table-header-\{index\}-width | <li>このプロパティを使用すると、インデックス値に基づいて特定のテーブル列の幅を設定できる</li><li>例えば、`--kuc-readonly-table-header-0-width` を使用して、最初のカラムの幅を設定できる</li><li>インデックス値は `0` から始まることに注意</li> |
+| --kuc-readonly-table-header-width | <li>このプロパティを使用すると、テーブル内のすべての列の幅を設定できる</li><li>単一のカラムに対して特定の幅を設定する必要がある場合は、`--kuc-readonly-table-header-{index}-width` プロパティを利用する</li><li>伸縮する要素を子コンポーネントとして追加したい場合は、`--kuc-readonly-table-header-width: auto` を設定することで、この動作を維持できる場合がある</li> |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const readOnlyTable = new Kuc.ReadOnlyTable({
+  label: 'ReadOnlyTable',
+  columns: [
+    {
+      title: 'Number',
+      field: 'index'
+    },
+    {
+      title: 'City',
+      field: 'name'
+    },
+    {
+      title: 'Country',
+      field: 'country'
+    },
+    {
+      title: 'Population',
+      field: 'population'
+    },
+    {
+      title: 'Coordinates',
+      field: 'coordinates'
+    },
+    {
+      title: 'Link',
+      field: 'link'
+    }
+  ],
+  data: [
+    {
+      index: '1',
+      name: 'HoChiMinh',
+      country: 'Vietnam',
+      population: '8,371,000',
+      coordinates: '10.762622, 106.660172',
+      link: '<a href="https://en.wikipedia.org/wiki/Ho_Chi_Minh_City" target="_blank">Vietnam: Ho Chi Minh City</a>'
+    },
+    {
+      index: '2',
+      name: 'Tokyo',
+      country: 'Japan',
+      population: '14,000,000',
+      coordinates: '35.689487, 139.691711',
+      link: '<a href="https://en.wikipedia.org/wiki/Tokyo" target="_blank">Japan: Tokyo</a>'
+    },
+    {
+      index: '3',
+      name: 'New York',
+      country: 'USA',
+      population: '8,400,000',
+      coordinates: '40.712776, -74.005974',
+      link: '<a href="https://en.wikipedia.org/wiki/New_York_City" target="_blank">USA: New York City</a>'
+    }
+  ],
+  className: 'sample-class',
+  id: 'sample-id',
+  visible: true,
+  pagination: true,
+  rowsPerPage: 3
+});
+space.appendChild(readOnlyTable);
+```
+
+---
+
+## Related Articles
+
+- [Table and ReadOnlyTable customization](../../guides/table-readonly-table-customization.md)
+- [Tabs customization](../../guides/tabs-customization.md)
+- [Search box customization with TypeScript](../../guides/search-box-customization-with-typescript.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/spinner.md
new file mode 100644
index 0000000000..02d8a5ca85
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/spinner.md
@@ -0,0 +1,104 @@
+---
+id: spinner
+title: Spinner
+sidebar_label: Spinner
+---
+
+## Overview
+
+Spinner は、ローディングスピナーを表示します。
+
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
+
+<SpinnerComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| text | string | "" | ローダーアイコン下部に表示するテキスト | text が未指定、あるいは空文字の場合*は、初期値を表示する |
+| container | HTMLElement | document.body | コンポーネントを追加する対象の要素 | デフォルトではトップレベルのドキュメントオブジェクトのボディを使うので、ほとんどの場合は document.body となる<br/>container が HTMLElement 以外の場合、エラーを出力する |
+
+:::info
+text が未指定、あるいは空文字の場合は、アクセシビリティを考慮して visually-hidden class を付与し、"now loading…" の文言を視覚的に見えない状態で表示する。
+:::
+
+### Constructor
+
+Spinner(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Method
+使用できるメソッドの一覧です。
+
+#### open()
+コンポーネントを表示する
+
+##### Parameter
+none
+
+##### Return
+none
+
+#### close()
+コンポーネントを非表示にする
+
+##### Parameter
+none
+
+##### Return
+none
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-spinner-loader-width |
+| --kuc-spinner-loader-height |
+| --kuc-spinner-loader-color |
+| --kuc-spinner-text-font-size |
+| --kuc-spinner-text-color |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const spinner = new Kuc.Spinner({
+  text: 'now loading...',
+  container: document.body
+});
+
+spinner.open();
+spinner.close();
+```
+
+---
+
+## Related Articles
+
+- [Bulk update customization](../../guides/bulk-update-customization.md)
+- [Attachment customization](../../guides/attachment-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/table.md
new file mode 100644
index 0000000000..8ce5cefa6e
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/table.md
@@ -0,0 +1,171 @@
+---
+id: table
+title: Table
+sidebar_label: Table
+---
+
+## Overview
+Table は編集可能なテーブルを表示します。
+
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
+
+<TableComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | コンポーネントの class 名 | |
+| id | string | ""  | コンポーネントの id 名 | |
+| label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| actionButton | boolean/[ActionButton](#actionbutton) | true | 行追加/削除ボタンの表示/非表示設定 | true/false を設定した場合、行追加/削除ボタンは同時に表示/非表示される<br/>ActionButton Object を設定した場合、行追加/削除ボタンはそれぞれ個別に表示/非表示される |
+| headerVisible | boolean | true | ヘッダーの表示/非表示設定 | |
+| visible | boolean | true | コンポーネントの表示/非表示設定 | |
+| columns | Array\<[Column](#column)\> | []  | コンポーネントの列データ | columns が配列以外の場合、エラーを出力する |
+| data | Array\<object\> | []  | コンポーネントの行データ | data が配列以外の場合、エラーを出力する |
+
+#### ActionButton
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| add | boolean | true | 行追加ボタンの表示/非表示設定 | |
+| remove | boolean | true | 行削除ボタンの表示/非表示設定 | |
+
+#### Column
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| field | string | null | 列のキー項目<br/>※必須かつ一意の値 | data オブジェクトのキー項目になる<br/>そのキーに関連づけられた値が列に表示される<br/>field が columns 内で重複もしくは未指定の場合、エラーを出力する |
+| title *1 | string/HTMLElement | ""  | 列のヘッダー名 | HTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される |
+| requiredIcon | boolean | false  | コンポーネントの必須アイコン表示/非表示設定 | |
+| visible | boolean |  true  | 列の表示/非表示設定 | |
+| render *1 | function<br/>`function(cellData, rowData, rowIndex) {}` | null | セルの描画関数 | DOM を戻り値にする<br/>以下の3つのパラメーターを使って関数に情報を加えることができる<br/><ul><li>cellData は現在表示されているセルの値</li><li>rowData は現在表示されている行の値</li><li>rowIndex は現在表示されている行番号</li></ul><br/>render 関数が未指定の場合、セルはデフォルトのテキストで表示される |
+
+:::caution
+*1: kintone UI Component はこのプロパティの値を内部的にサニタイズしていません。ユーザー入力を受け付けるような実装でこのプロパティを使用する場合は、開発者自身で XSS 対策をしてください。
+:::
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | テーブルの値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/>event.detail で以下の値を受け取ることができる<ul><li>change-cell（セルの値が変更された時にトリガーされる）</li><ul><li>event.detail.type: "change-cell"</li><li>event.detail.rowIndex: 変更された行番号</li><li>event.detail.data: 変更後の data の値</li><li>event.detail.oldData: 変更前の data の値</li><li>event.detail.field: 変更された列の field の値</li></ul><li>add-row（行追加ボタンがクリックされた時にトリガーされる）</li><ul><li>event.detail.type: "add-row"</li><li>event.detail.rowIndex: 追加された行番号</li><li>event.detail.data: 変更後の data の値</li><li>event.detail.oldData: 変更前の data の値</li></ul><li>remove-row（行削除ボタンがクリックされた時にトリガーされる）</li><ul><li>event.detail.type: "remove-row"</li><li>event.detail.rowIndex: 削除された行番号</li><li>event.detail.data: 変更後の data の値</li><li>event.detail.oldData: 変更前の data の値</li></ul></ul>|
+
+### Constructor
+
+Table(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト |  |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name | Description |
+| :--- | :--- |
+| --kuc-table-header-background-color | |
+| --kuc-table-header-color | |
+| --kuc-table-header-font-size | |
+| --kuc-table-header-height | |
+| --kuc-table-header-\{index\}-width | <li>このプロパティを使用すると、インデックス値に基づいて特定のテーブル列の幅を設定できる</li><li>例えば、`--kuc-table-header-0-width` を使用して、最初のカラムの幅を設定できる</li><li>インデックス値は `0` から始まることに注意</li> |
+| --kuc-table-header-width | <li>このプロパティを使用すると、テーブル内のすべての列の幅を設定できる</li><li>単一のカラムに対して特定の幅を設定する必要がある場合は、`--kuc-table-header-{index}-width` プロパティを利用する</li><li>伸縮する要素を子コンポーネントとして追加したい場合は、`--kuc-table-header-width: auto` を設定することで、この動作を維持できる場合がある</li> |
+
+---
+
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const renderAge = dataCell => {
+  const spanElement = document.createElement('span');
+  spanElement.innerText = `The age is ${dataCell}`;
+  return spanElement;
+};
+
+const renderName = cellData => {
+  const dropdown = new Kuc.Dropdown({
+    items: [
+      { label: 'John Brown', value: 'john' },
+      { label: 'Steven Gerrard', value: 'steven' }
+    ],
+    value: cellData
+  });
+  return dropdown;
+};
+
+const table = new Kuc.Table({
+  label: 'Table',
+  columns: [
+    {
+      title: new Kuc.Tooltip({
+        title: 'Please select a user',
+        container: 'Name'
+      }),
+      field: 'name',
+      render: renderName
+    },
+    {
+      title: 'Address',
+      field: 'address'
+    },
+    {
+      title: 'Age',
+      field: 'age',
+      render: renderAge
+    }
+  ],
+  data: [
+    {
+      name: 'john',
+      age: 32,
+      address: 'New York No. 1 Lake Park'
+    },
+    {
+      name: 'steven',
+      age: 22,
+      address: 'New York No. 2 Lake Park'
+    }
+  ],
+  className: 'options-class',
+  id: 'options-id',
+  actionButton: true,
+  headerVisible: true,
+  visible: true
+});
+
+space.appendChild(table);
+
+table.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [In-office day list customization](../../guides/in-office-day-list-customization.md)
+- [Table and ReadOnlyTable customization](../../guides/table-readonly-table-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/tabs.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/tabs.md
new file mode 100644
index 0000000000..909c652064
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/tabs.md
@@ -0,0 +1,141 @@
+---
+id: tabs
+title: Tabs
+sidebar_label: Tabs
+---
+
+## Overview
+
+Tabs は、複数のタブを表示し、表示内容を切り替えることができます。
+
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
+
+<TabsComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| id | string | "" | コンポーネントの id 名 ||
+| value | string | ""  | 選択されているタブ | <li>items 内に一致する value がある場合、disabled でもそのタブが表示される</li><li>以下の場合は最初の visible タブが表示される<ul><li>items 内に一致する value がない場合</li><li>items 内に一致する value があるが、そのタブが visible ではない場合</li></ul></li><li>value が文字列以外の場合、エラーを出力する</li> |
+| borderVisible | boolean | true  | 表示内容を囲う枠線の表示/非表示設定 | |
+| visible | boolean | true | コンポーネントの表示/非表示設定 | |
+| items | Array\<[Item](#item)\> | [] | 表示するタブのリスト | items が配列以外の場合、エラーを出力する |
+
+#### Item
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| content | string/HTMLElement | "" | タブの内容 | |
+| label | string | "" | タブ名 | |
+| value | string | "" | タブのキー項目<br/>※必須かつ一意の値 | value が items 内で重複もしくは未指定の場合、エラーを出力する |
+| disabled | boolean | false | タブの切替可/不可設定 | |
+| visible | boolean | true | タブの表示/非表示設定 | |
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 選択されているタブが変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+Tabs(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト |  |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-tabs-tab-background-color |
+| --kuc-tabs-tab-background-color-selected |
+| --kuc-tabs-tab-color |
+| --kuc-tabs-tab-color-selected |
+| --kuc-tabs-tab-font-size |
+| --kuc-tabs-tab-height |
+| --kuc-tabs-tab-width |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+// Create each Tab content
+const textArea = new Kuc.TextArea({
+  label: 'TextArea',
+  value: 'This is sample.'
+});
+
+const timePicker = new Kuc.TimePicker({
+  label: 'Time',
+  value: '11:30'
+});
+
+const text = 'This is sample.';
+
+const tabs = new Kuc.Tabs({
+  items: [
+    {
+      label: 'A',
+      content: textArea,
+      value: 'a',
+      disabled: false
+    },
+    {
+      label: 'B',
+      content: timePicker,
+      value: 'b',
+      disabled: false
+    },
+    {
+      label: 'C',
+      content: text,
+      value: 'c',
+      disabled: false
+    }
+  ],
+  value: 'a',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  borderVisible: true
+});
+space.appendChild(tabs);
+
+tabs.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+- [Tabs customization](../../guides/tabs-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/text.md
new file mode 100644
index 0000000000..a89761da7b
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/text.md
@@ -0,0 +1,122 @@
+---
+id: text
+title: Text
+sidebar_label: Text
+---
+
+## Overview
+
+Text は、単一行のテキストを表示します。
+
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
+
+<TextComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| placeholder | string | "" | 空欄時に入力例として表示されるテキスト ||
+| prefix | string | "" | Text の前に表示されるテキスト ||
+| suffix | string | "" | Text の後に表示されるテキスト ||
+| textAlign | string | "left" | 表示するテキストの位置 | 以下を指定できる<br/>"left" : 左寄せ<br/>"right" : 右寄せ |
+| value | string | "" | 表示するテキスト | |
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+| focus | function | フォーカスされた時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.value : フォーカス時の value の値 |
+| input | function | 値が入力されている時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.data : 入力された文字列<br/>event.detail.value : ターゲット要素の value の値<br/><br/>※ event.detail.data の値についての補足<br/>入力された文字列を指す<br/>ペーストやドラッグ&ドロップによって入力した場合は、null になる<br/>Enter, Delete, Backspace をクリックした場合は、null になる |
+
+### Constructor
+
+Text(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-text-input-width |
+| --kuc-text-input-height |
+| --kuc-text-input-font-size |
+| --kuc-text-input-color |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const text = new Kuc.Text({
+  label: 'Fruit',
+  requiredIcon: true,
+  value: 'Apple',
+  placeholder: 'Apple',
+  prefix: '$',
+  suffix: 'yen',
+  textAlign: 'left',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(text);
+
+text.addEventListener('change', event => {
+  console.log(event);
+});
+
+text.addEventListener('focus', event => {
+  console.log(event);
+});
+
+text.addEventListener('input', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [In-office day list customization](../../guides/in-office-day-list-customization.md)
+- [Search box customization](../../guides/search-box-customization.md)
+- [Search box customization with TypeScript](../../guides/search-box-customization-with-typescript.md)
+- [Table and ReadOnlyTable customization](../../guides/table-readonly-table-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/textarea.md
new file mode 100644
index 0000000000..c8bb9a8512
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/textarea.md
@@ -0,0 +1,107 @@
+---
+id: textarea
+title: TextArea
+sidebar_label: TextArea
+---
+
+## Overview
+
+TextArea は、複数行のテキストを表示します。
+
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
+
+<TextAreaComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| placeholder | string | "" | 空欄時に入力例として表示されるテキスト ||
+| value | string | "" | 表示されるテキスト ||
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+| focus | function | フォーカスされた時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.value : フォーカス時の value の値 |
+| input | function | 値が入力されている時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.data : 入力された文字列<br/>event.detail.value : ターゲット要素の value の値<br/><br/>※ event.detail.data の値についての補足<br/>入力された文字列を指す<br/>ペーストやドラッグ&ドロップによって入力した場合は、null になる<br/>Enter, Delete, Backspace をクリックした場合は、null になる |
+
+### Constructor
+
+TextArea(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-textarea-input-color |
+| --kuc-textarea-input-font-size |
+| --kuc-textarea-input-height |
+| --kuc-textarea-input-width |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const textarea = new Kuc.TextArea({
+  label: 'Fruit',
+  requiredIcon: true,
+  placeholder: 'Apple',
+  value: 'Apple',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(textarea);
+
+textarea.addEventListener('change', event => {
+  console.log(event);
+});
+
+textarea.addEventListener('focus', event => {
+  console.log(event);
+});
+
+textarea.addEventListener('input', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/time-picker.md
new file mode 100644
index 0000000000..3c4c17f25d
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/time-picker.md
@@ -0,0 +1,105 @@
+---
+id: time-picker
+title: TimePicker
+sidebar_label: TimePicker
+---
+
+## Overview
+
+TimePicker は入力エリアと時間選択用のリストを表示します。
+
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
+
+<TimePickerComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | コンポーネントの class 名 | |
+| error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | ""  | コンポーネントの id 名 | |
+| label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| language | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
+| max | string | "" | 時刻リストの終了時間設定 | フォーマットは HH:MM<br/>時刻リストは、max に指定した時刻まで表示されて、それ以降は表示されない<br/>以下の時間も指定できる（内部的に HH:MM に変換される）:<li>5:30</li><li>05:3</li><li>5:3</li>時間や分が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値や min 時刻が max 時刻よりも大きい値の場合、エラーを出力する |
+| min | string | "" | 時刻リストの開始時間設定 | フォーマットは HH:MM<br/>時刻リストは、min に指定した時刻から表示されて、それ以前は表示されない<br/>以下の時間も指定できる（内部的に HH:MM に変換される）:<li>5:30</li><li>05:3</li><li>5:3</li>時間や分が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値や min 時刻が max 時刻よりも大きい値の場合、エラーを出力する |
+| value | string | ""  | 表示するテキスト | フォーマットは HH:MM<br/>以下の時間も指定できる（内部的に HH:MM に変換される）:<li>5:30</li><li>05:3</li><li>5:3</li>時間や分が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値や min/max プロパティで指定した有効な時刻の範囲を超える値を指定した場合、エラーを出力する |
+| disabled | boolean | false | コンポーネントの選択可/不可設定 | |
+| hour12 | boolean | false | 時刻表記の設定 (12時間表記/24時間表記) デフォルトは 24時間表記 | 指定できるオプション:<br/>true: 12時間表記<br/>false: 24時間表記 |
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 | |
+| visible | boolean | true | コンポーネントの表示/非表示設定 | |
+| timeStep | number | 30 | 時刻リスト内の時刻間隔の設定 | 単位は分（正の整数）<br/>小数点以下を指定した場合は、最も近い整数に丸められる<br/>数値以外の値や max と min プロパティの時刻差異よりも大きな値を指定した場合、エラーを出力する |
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+TimePicker(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | コンポーネントのプロパティを含むオブジェクト |  |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-time-picker-input-width |
+| --kuc-time-picker-input-height |
+| --kuc-time-picker-input-font-size |
+| --kuc-time-picker-input-color |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const timePicker = new Kuc.TimePicker({
+  label: 'Time',
+  requiredIcon: true,
+  hour12: false,
+  value: '11:30',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  language: 'en',
+  timeStep: 30,
+  max: '23:59',
+  min: '00:00'
+});
+space.appendChild(timePicker);
+
+timePicker.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/tooltip.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/tooltip.md
new file mode 100644
index 0000000000..0c729913d3
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/desktop/tooltip.md
@@ -0,0 +1,119 @@
+---
+id: tooltip
+title: Tooltip
+description: Tooltip は要素にホバーしたりフォーカスしたりする時に、対象となる要素のラベルや短い説明を表示します。
+sidebar_label: Tooltip
+---
+
+## Overview
+
+Tooltip は要素にホバーしたりフォーカスしたりする時に、対象となる要素のラベルや短い説明を表示します。
+
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
+
+<TooltipComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | コンポーネントの class 名 | |
+| id | string | ""  | コンポーネントの id 名 | |
+| placement | string | "top"  | 対象の要素に対するコンポーネントの表示位置 | 指定できるオプション: `top`, `left`, `right`, `bottom` |
+| title | string | ""  | コンポーネントに表示するテキスト | |
+| container *1 | string/HTMLElement | "" | コンポーネントを表示する対象の要素 | 以下の時に title の値が表示される<ul><li>container 要素がホバーされた時</li><li>container 要素がフォーカスされた時</li></ul> |
+| describeChild *2 | boolean | false  | 要素に対して Tooltip が表す内容の設定 | Tooltip がラベルを表す場合は false、追加情報や補足説明を表す場合は true を設定する |
+
+:::info
+*1: できるだけフォーカス可能な要素を使用し、アクセシビリティのためにフォーカス不可能な要素の利用は控えてください。
+
+*2: 以下、describeChild プロパティの使い方を理解することで、アプリケーションのアクセシビリティとユーザビリティを効果的に向上させることができます。
+- Tooltip が要素自体の目的を表す（要素のラベルを提供する）場合は、describeChild を false に設定します。
+  - Tooltip コンポーネントの最初の子要素に、title プロパティの値が設定された aria-label 属性が追加されます。
+  - 例えば、保存アイコンがあり、Tooltip がそのアイコンのラベルを提供するケースです。
+    ```javascript
+      <kuc-tooltip>
+        <button aria-label='Save'>
+          <span class='icon-save'></span>
+        </button>
+        <div id='tooltip-ID'>Save</div>
+      </kuc-tooltip>
+    ```
+  - 詳細については [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) を参照してください。
+- Tooltip が要素の説明を表す（要素についての追加情報や補足説明を提供する）場合は、describeChild を true に設定します。
+  - Tooltip コンポーネントの最初の子要素に、Tooltip のラッパー要素の ID の値が設定された aria-describedby 属性が追加されます。
+  - 例えば、質問アイコンがあり、Tooltip がそのアイコンの説明や解説を提供するケースです。
+    ```javascript
+      <kuc-tooltip>
+        <button aria-describedby='tooltip-ID'>
+          <span class='icon-question-mark'></span>
+        </button>
+        <div id='tooltip-ID'>This is a help icon. Click for more information</div>
+      </kuc-tooltip>
+    ```
+  - 詳細については [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) を参照してください。
+:::
+
+### Constructor
+
+Tooltip(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | コンポーネントのプロパティを含むオブジェクト |  |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name |
+| :--- |
+| --kuc-tooltip-background-color |
+| --kuc-tooltip-color |
+| --kuc-tooltip-font-size |
+| --kuc-tooltip-height |
+| --kuc-tooltip-width |
+
+---
+
+## Sample Code
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+const buttonEl = document.createElement('button');
+buttonEl.innerText ='Add';
+
+const tooltip = new Kuc.Tooltip({
+  title: 'Do not add if it exists.',
+  container: buttonEl,
+  placement: 'bottom',
+  describeChild: true,
+  className: 'tooltip-class',
+  id: 'tooltip-id',
+});
+space.appendChild(tooltip);
+```
+
+---
+
+## Related Articles
+
+- [In-office day list customization](../../guides/in-office-day-list-customization.md)
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-button.md
new file mode 100644
index 0000000000..5bb77a0112
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-button.md
@@ -0,0 +1,111 @@
+---
+id: mobile-button
+title: MobileButton
+sidebar_label: MobileButton
+---
+
+## Overview
+
+MobileButton は、ボタンを表示します。
+
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
+
+<MobileButtonComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 |  |
+| id | string | "" | コンポーネントの id 名 |  |
+| text | string | "" | ボタンに表示するテキスト | content が未指定の場合、text が表示される<br/>その他の場合、text は無視される |
+| type | string | "normal" | ボタンのデザインタイプ | 以下を指定できる<br/>"normal" : White(#ffffff)<br/>"submit" : Blue(#206694) |
+| content *1 | string/HTMLElement | ""  | ボタン内の DOM | HTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される |
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+
+:::caution
+*1: kintone UI Component はこのプロパティの値を内部的にサニタイズしていません。ユーザー入力を受け付けるような実装でこのプロパティを使用する場合は、開発者自身で XSS 対策をしてください。
+:::
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| click | function | クリックされた時のイベントハンドラ | 引数には Event の event オブジェクトをとる |
+
+### Constructor
+
+MobileButton(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Custom CSS
+:::tip
+[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
+:::
+
+コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
+#### Property
+| Name | Description |
+| :--- | :--- |
+| --kuc-mobile-button-background-color | |
+| --kuc-mobile-button-background-color-active | |
+| --kuc-mobile-button-background-color-focus | Safariでは、クリックされたボタンがフォーカスを得られないため、このプロパティは機能しません。<br/>詳しくは、この [クリックとフォーカス](https://developer.mozilla.org/ja/docs/Web/HTML/Element/button#%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%A8%E3%83%95%E3%82%A9%E3%83%BC%E3%82%AB%E3%82%B9) の記事をご覧ください！ |
+| --kuc-mobile-button-font-size | |
+| --kuc-mobile-button-height | |
+| --kuc-mobile-button-text-color | |
+| --kuc-mobile-button-width | |
+
+---
+
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const header = kintone.mobile.app.getHeaderMenuSpaceElement();
+
+const mobileButton = new Kuc.MobileButton({
+  text: 'Submit',
+  type: 'submit',
+  content: `<div>
+              <svg>...</svg>
+              <span>Search</span>
+            </div>;`,
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+header.appendChild(mobileButton);
+
+mobileButton.addEventListener('click', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Mobile timecard customization](../../guides/mobile-timecard-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-checkbox.md
new file mode 100644
index 0000000000..6944d05745
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-checkbox.md
@@ -0,0 +1,129 @@
+---
+id: mobile-checkbox
+title: MobileCheckbox
+sidebar_label: MobileCheckbox
+---
+
+## Overview
+
+MobileCheckbox は、複数選択のチェックボックスを表示します。
+
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
+
+<MobileCheckboxComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| borderVisible | boolean | true | 選択肢を囲う枠線の表示/非表示設定 ||
+| disabled | boolean | false | コンポーネントの選択可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+| items | Array\<[Item](#item)\> | [] | 表示する選択肢一覧 | items が配列以外の場合、エラーを出力する |
+| value *1 | Array\<string\> | [] | 選択されている値 | value と selectedIndex が未指定の場合、何も選択されない<br/>重複する value を指定し、selectedIndex を指定しない場合、Item.value で最初にマッピングされた value の項目が選択され、selectedIndex にはその選択肢のインデックス番号が入る<br/>value が配列以外の場合、エラーを出力する |
+| selectedIndex *1 | Array\<Number\> | [] | 選択されている値のインデックス番号 | items 内に重複する Item.value がある場合、どの Item.value が選択されるか指定するためのプロパティ<br/>value が未指定で、selectedIndex に有効な値が指定されている場合、 そのインデックス番号の選択肢が選択される<br/>value に重複した Item.value が指定され、selectedIndex の値が value 内の重複した Item.value とマッピングした場合、そのインデックス番号の選択肢が選択される<br/>selectedIndex が配列以外の場合、エラーを出力する |
+
+:::info
+*1: value と Item.value に重複した値を指定できる。重複した値を指定する場合、value と selectedIndex プロパティを使って制御することができる。<br/>
+例: `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}, {label: 'Lemon', value: 'fruit'}]` を指定する
+
+ - 以下のように value を指定、selectedIndex を未指定の場合:
+   - value = ['fruit', 'vegetable']: 最初と 3番目の値が選択される。
+   - value = ['meat', 'other']: 何も選択されない。
+
+ - 以下のように value を未指定、selectedIndex を指定する場合:
+   - selectedIndex = [0, 1]: 最初と 2番目の値が選択される。
+   - selectedIndex = [98, 99]: 何も選択されない。
+
+ - 以下のように value と selectedIndex を指定する場合:
+   - value = ['fruit', 'vegetable'], selectedIndex = [1, 3]: 2番目と 3番目の値が選択される。
+   - value = ['fruit', 'fruit', 'vegetable'], selectedIndex = [1, 3]: 2番目と 3番目と 4番目の値が選択される。
+   - value = ['fruit', 'fruit'], selectedIndex = [1, 2, 3]: 最初と 2番目の値が選択される。<br/>
+ ※ value と selectedIndex が同時に指定された場合、value の値が優先される。よって、上記の 1つ目と 3つ目の例において selectedIndex の 3 に当たる item は選択されない。
+:::
+
+#### Item
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | 各選択肢のテキスト | Item.label が未指定の場合、UI 上は Item.value の値が表示される |
+| value | string | null | 各選択肢の値 | Item.value に重複の値を指定できる |
+| disabled | boolean | false | 各オプションの選択可/不可設定 | |
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+MobileCheckbox(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+---
+
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileCheckbox = new Kuc.MobileCheckbox({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: ['Orange'],
+  selectedIndex: [0],
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  borderVisible: true
+});
+space.appendChild(mobileCheckbox);
+
+mobileCheckbox.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-date-picker.md
new file mode 100644
index 0000000000..7eb2171491
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-date-picker.md
@@ -0,0 +1,90 @@
+---
+id: mobile-date-picker
+title: MobileDatePicker
+sidebar_label: MobileDatePicker
+---
+
+## Overview
+
+MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
+
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
+
+<MobileDatePickerComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | コンポーネントの class 名 | |
+| error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | ""  | コンポーネントの id 名 | |
+| label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| language *1 | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
+| value | string | ""  | 表示するテキスト | フォーマットは YYYY-MM-DD<br/>以下の日付も指定できる（内部的に YYYY-MM-DD に変換される）:<li>2021</li><li>2021-1</li><li>2021-01</li><li>2021-1-9</li><li>21-01-01</li>年が 4文字以下の場合、0 が先頭に補完される<br/>日や月の記載がない場合、01 で補完される<br/>日や月が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値を指定した場合、エラーを出力する |
+| disabled | boolean | false | コンポーネントの選択可/不可設定 | |
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 | |
+| visible | boolean | true | コンポーネントの表示/非表示設定 | |
+
+:::info
+*1: 表示される日付のフォーマットは、language プロパティの設定に応じて以下のように自動的に切り替わる。
+- "en": MM/DD/YYYY
+- "ja", "zh", "zh-TW", "es": YYYY-MM-DD
+:::
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+MobileDatePicker(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | コンポーネントのプロパティを含むオブジェクト |  |
+
+---
+
+## Sample Code
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileDatePicker = new Kuc.MobileDatePicker({
+  label: 'Date',
+  requiredIcon: true,
+  language: 'auto',
+  value: '2021-11-11',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileDatePicker);
+
+mobileDatePicker.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-datetime-picker.md
new file mode 100644
index 0000000000..b4c284c590
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-datetime-picker.md
@@ -0,0 +1,91 @@
+---
+id: mobile-datetime-picker
+title: MobileDateTimePicker
+sidebar_label: MobileDateTimePicker
+---
+
+## Overview
+
+MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
+
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
+
+<MobileDateTimePickerComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | コンポーネントの class 名 | |
+| error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | ""  | コンポーネントの id 名 | |
+| label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| language *1 | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
+| value | string | ""  | 表示するテキスト | フォーマットは YYYY-MM-DDTHH:MM:SS<br/>以下の日時も指定できる（内部的に YYYY-MM-DDTHH:MM:SS に変換される）:<li>2021</li><li>2021T01</li><li>2021-06</li><li>2021-12-12</li><li>2021-12-12T01</li><li>2021-12-12T01:01</li>日や月の記載がない場合、01 で補完される<br/>時間や分や秒の記載がない場合、00 で補完される<br/>不正なフォーマットや値を指定した場合、エラーを出力する |
+| disabled | boolean | false | コンポーネントの選択可/不可設定 | |
+| hour12 | boolean | false | 時刻表記の設定 (12時間表記/24時間表記) デフォルトは 24時間表記 | 指定できるオプション:<br/>true: 12時間表記<br/>false: 24時間表記 |
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 | |
+| visible | boolean | true | コンポーネントの表示/非表示設定 | |
+
+:::info
+*1: 表示される日付のフォーマットは、language プロパティの設定に応じて以下のように自動的に切り替わる。
+ - "en" の場合: MM/DD/YYYY
+ - "ja", "zh", "zh-TW", "es" の場合: YYYY-MM-DD
+:::
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値<br/>event.detail.changedPart : 変更されたパーツ "date" もしくは "time" |
+
+### Constructor
+
+MobileDateTimePicker(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | コンポーネントのプロパティを含むオブジェクト |  |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const mobileDateTimePicker = new Kuc.MobileDateTimePicker({
+  label: 'DateTime',
+  requiredIcon: true,
+  language: 'auto',
+  hour12: false,
+  value: '2021-11-11T11:30:00',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileDateTimePicker);
+
+mobileDateTimePicker.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-dropdown.md
new file mode 100644
index 0000000000..b0604b9d70
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-dropdown.md
@@ -0,0 +1,121 @@
+---
+id: mobile-dropdown
+title: MobileDropdown
+sidebar_label: MobileDropdown
+---
+
+## Overview
+
+MobileDropdown は複数選択肢の中から一つの値を選択することができます。
+
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
+
+<MobileDropdownComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| value *1 | string | "" | 選択されている値 | value と selectedIndex が未指定の場合、何も選択されない<br/>重複する value を指定し、selectedIndex を指定しない場合、Item.value で最初にマッピングされた value の項目が選択され、selectedIndex にはその選択肢のインデックス番号が入る<br/>value が文字列以外の場合、エラーを出力する |
+| selectedIndex *1 | number | -1 | 選択されている値のインデックス番号 | items 内に重複する Item.value がある場合、どの Item.value が選択されるか指定するためのプロパティ<br/>value が未指定で、selectedIndex に有効な値が指定されている場合、 そのインデックス番号の選択肢が選択される<br/>value に重複した Item.value が指定され、selectedIndex の値が value 内の重複した Item.value とマッピングした場合、そのインデックス番号の選択肢が選択される<br/>selectedIndex が数値以外の場合、エラーを出力する |
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+| items | Array\<[Item](#item)\> | [] | 表示する選択肢一覧 | items が配列以外の場合、エラーを出力する |
+
+:::info
+*1: Item.value に重複した値を指定できる。重複した値を指定する場合、value と selectedIndex プロパティを使って制御することができる。<br/>
+例: `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}]` を指定する
+
+- 以下のように value を指定、selectedIndex を未指定の場合:
+  - value = 'fruit': 最初の値が選択される。
+  - value = 'other': 何も選択されない。
+
+- 以下のように value を未指定、selectedIndex を指定する場合:
+  - selectedIndex = 1: 2番目の値が選択される。
+  - selectedIndex = 99: 何も選択されない。
+:::
+
+#### Item
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | 各選択肢のテキスト | Item.label が未指定の場合、UI 上は Item.value の値が表示される |
+| value | string | null | 各選択肢の値 | Item.value に重複の値を指定できる |
+| disabled | boolean | false | 各オプションの選択可/不可設定 | |
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+MobileDropdown(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileDropdown = new Kuc.MobileDropdown({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple',
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: 'Orange',
+  selectedIndex: 0,
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileDropdown);
+
+mobileDropdown.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-multichoice.md
new file mode 100644
index 0000000000..49095dcc00
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-multichoice.md
@@ -0,0 +1,126 @@
+---
+id: mobile-multichoice
+title: MobileMultiChoice
+sidebar_label: MobileMultiChoice
+---
+
+## Overview
+
+MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
+
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
+
+<MobilMultichoiceComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+| items | Array\<[Item](#item)\> | [] | 表示する選択肢一覧 | items が配列以外の場合、エラーを出力する |
+| value *1 | Array\<string\> | [] | 選択されている値 | value と selectedIndex が未指定の場合、何も選択されない<br/>重複する value を指定し、selectedIndex を指定しない場合、Item.value で最初にマッピングされた value の項目が選択され、selectedIndex にはその選択肢のインデックス番号が入る<br/>value が配列以外の場合、エラーを出力する |
+| selectedIndex *1 | Array\<Number\> | [] | 選択されている値のインデックス番号 | items 内に重複する Item.value がある場合、どの Item.value が選択されるか指定するためのプロパティ<br/>value が未指定で、selectedIndex に有効な値が指定されている場合、 そのインデックス番号の選択肢が選択される<br/>value に重複した Item.value が指定され、selectedIndex の値が value 内の重複した Item.value とマッピングした場合、そのインデックス番号の選択肢が選択される<br/>selectedIndex が配列以外の場合、エラーを出力する |
+
+:::info
+*1: value と Item.value に重複した値を指定できる。重複した値を指定する場合、value と selectedIndex プロパティを使って制御することができる。<br/>
+例: `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}, {label: 'Lemon', value: 'fruit'}]` を指定する
+
+ - 以下のように value を指定、selectedIndex を未指定の場合:
+   - value = ['fruit', 'vegetable']: 最初と 3番目の値が選択される。
+   - value = ['meat', 'other']: 何も選択されない。
+
+ - 以下のように value を未指定、selectedIndex を指定する場合:
+   - selectedIndex = [0, 1]: 最初と 2番目の値が選択される。
+   - selectedIndex = [98, 99]: 何も選択されない。
+
+ - 以下のように value と selectedIndex を指定する場合:
+   - value = ['fruit', 'vegetable'], selectedIndex = [1, 3]: 2番目と 3番目の値が選択される。
+   - value = ['fruit', 'fruit', 'vegetable'], selectedIndex = [1, 3]: 2番目と 3番目と 4番目の値が選択される。
+   - value = ['fruit', 'fruit'], selectedIndex = [1, 2, 3]: 最初と 2番目の値が選択される。<br/>
+ ※ value と selectedIndex が同時に指定された場合、value の値が優先される。よって、上記の 1つ目と 3つ目の例において selectedIndex の 3 に当たる item は選択されない。
+:::
+
+#### Item
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | 各選択肢のテキスト | Item.label が未指定の場合、UI 上は Item.value の値が表示される |
+| value | string | null | 各選択肢の値 | Item.value に重複の値を指定できる |
+| disabled | boolean | false | 各オプションの選択可/不可設定 | |
+
+### Event
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+MobileMultiChoice(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileMultiChoice = new Kuc.MobileMultiChoice({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: ['Orange'],
+  selectedIndex: [0],
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileMultiChoice);
+
+mobileMultiChoice.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-notification.md
new file mode 100644
index 0000000000..9ef43db522
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-notification.md
@@ -0,0 +1,101 @@
+---
+id: mobile-notification
+title: MobileNotification
+sidebar_label: MobileNotification
+---
+
+## Overview
+
+MobileNotification は、ポップアップの通知を表示します。
+
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
+
+<MobileNotificationComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| text | string | "" | 表示するテキスト ||
+| duration | number | -1 | コンポーネントを閉じるまでのミリ秒 | 単位はミリ秒<br/>0以上の数値を指定できる<br/>もし不正な値を指定した場合（0未満もしくは数値以外）、コンポーネントは開かれたまま自動的には閉じない |
+| container | HTMLElement | document.body | コンポーネントを追加する対象の要素 | デフォルトではトップレベルのドキュメントオブジェクトのボディを使うので、ほとんどの場合は document.body となる<br/>container が HTMLElement 以外の場合、エラーを出力する |
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| close | function | コンポーネントが閉じられた時のイベントハンドラ | 引数には Event の event オブジェクトをとる |
+
+### Constructor
+
+MobileNotification(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+### Method
+
+使用できるメソッドの一覧です。
+
+#### open()
+MobileNotification を表示する
+
+##### Parameter
+none
+
+##### Return
+none
+
+#### close()
+MobileNotification を非表示にする
+
+##### Parameter
+none
+
+##### Return
+none
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const mobileNotification = new Kuc.MobileNotification({
+  text: 'Error occurred!',
+  className: 'options-class',
+  duration: 2000,
+  container: document.body
+});
+
+mobileNotification.addEventListener('close', event => {
+  console.log(event);
+});
+
+mobileNotification.open();
+mobileNotification.close();
+```
+
+---
+
+## Related Articles
+
+- [Mobile timecard customization](../../guides/mobile-timecard-customization.md)
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-radio-button.md
new file mode 100644
index 0000000000..5229648667
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-radio-button.md
@@ -0,0 +1,121 @@
+---
+id: mobile-radio-button
+title: MobileRadioButton
+sidebar_label: MobileRadioButton
+---
+
+## Overview
+
+MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
+
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
+
+<MobileRadioButtonComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| value *1 | string | "" | 選択されている値 | value と selectedIndex が未指定の場合、何も選択されない<br/>重複する value を指定し、selectedIndex を指定しない場合、Item.value で最初にマッピングされた value の項目が選択され、selectedIndex にはその選択肢のインデックス番号が入る<br/>value が文字列以外の場合、エラーを出力する |
+| selectedIndex *1 | number | -1 | 選択されている値のインデックス番号 | items 内に重複する Item.value がある場合、どの Item.value が選択されるか指定するためのプロパティ<br/>value が未指定で、selectedIndex に有効な値が指定されている場合、 そのインデックス番号の選択肢が選択される<br/>value に重複した Item.value が指定され、selectedIndex の値が value 内の重複した Item.value とマッピングした場合、そのインデックス番号の選択肢が選択される<br/>selectedIndex が数値以外の場合、エラーを出力する |
+| borderVisible | boolean | true | 選択肢を囲う枠線の表示/非表示設定 ||
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+| items | Array\<[Item](#item)\> | [] | 表示する選択肢一覧 | items が配列以外の場合、エラーを出力する |
+:::info
+*1: Item.value に重複した値を指定できる。重複した値を指定する場合、value と selectedIndex プロパティを使って制御することができる。<br/>
+例: `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}]` を指定する
+
+- 以下のように value を指定、selectedIndex を未指定の場合:
+  - value = 'fruit': 最初の値が選択される。
+  - value = 'other': 何も選択されない。
+
+- 以下のように value を未指定、selectedIndex を指定する場合:
+  - selectedIndex = 1: 2番目の値が選択される。
+  - selectedIndex = 99: 何も選択されない。
+:::
+
+#### Item
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | 各選択肢のテキスト | Item.label が未指定の場合、UI 上は Item.value の値が表示される |
+| value | string | null | 各選択肢の値 | Item.value に重複の値を指定できる |
+| disabled | boolean | false | 各オプションの選択可/不可設定 | |
+
+### Event
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+MobileRadioButton(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileRadioButton = new Kuc.MobileRadioButton({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple',
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    },
+  ],
+  value: 'Orange',
+  selectedIndex: 0,
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  borderVisible: true
+});
+space.appendChild(mobileRadioButton);
+
+mobileRadioButton.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-text.md
new file mode 100644
index 0000000000..8dc207828a
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-text.md
@@ -0,0 +1,99 @@
+---
+id: mobile-text
+title: MobileText
+sidebar_label: MobileText
+---
+
+## Overview
+
+MobileText は、単一行のテキストを表示します。
+
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
+
+<MobileTextComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| placeholder | string | "" | 空欄時に入力例として表示されるテキスト ||
+| prefix | string | "" | Text の前に表示されるテキスト ||
+| suffix | string | "" | Text の後に表示されるテキスト ||
+| textAlign | string | "left" | 表示するテキストの位置 | 以下を指定できる<br/>"left" : 左寄せ<br/>"right" : 右寄せ |
+| value | string | "" | 表示するテキスト | |
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+| focus | function | フォーカスされた時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.value : フォーカス時の value の値 |
+| input | function | 値が入力されている時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.data : 入力された文字列<br/>event.detail.value : ターゲット要素の value の値<br/><br/>※ event.detail.data の値についての補足<br/>入力された文字列を指す<br/>ペーストやドラッグ&ドロップによって入力した場合は、null になる<br/>Enter, Delete, Backspace をクリックした場合は、null になる |
+
+### Constructor
+
+MobileText(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileText = new Kuc.MobileText({
+  label: 'Fruit',
+  requiredIcon: true,
+  value: 'Apple',
+  placeholder: 'Apple',
+  prefix: '$',
+  suffix: 'yen',
+  textAlign: 'left',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileText);
+
+mobileText.addEventListener('change', event => {
+  console.log(event);
+});
+
+mobileText.addEventListener('focus', event => {
+  console.log(event);
+});
+
+mobileText.addEventListener('input', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-textarea.md
new file mode 100644
index 0000000000..d9d6bb9ddb
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-textarea.md
@@ -0,0 +1,93 @@
+---
+id: mobile-textarea
+title: MobileTextArea
+sidebar_label: MobileTextArea
+---
+
+## Overview
+
+MobileTextArea は、複数行のテキストを表示します。
+
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
+
+<MobileTextAreaComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | コンポーネントの class 名 ||
+| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | "" | コンポーネントの id 名 ||
+| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| placeholder | string | "" | 空欄時に入力例として表示されるテキスト ||
+| value | string | "" | 表示されるテキスト ||
+| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
+| visible | boolean | true | コンポーネントの表示/非表示設定 ||
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+| focus | function | フォーカスされた時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.value : フォーカス時の value の値 |
+| input | function | 値が入力されている時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.data : 入力された文字列<br/>event.detail.value : ターゲット要素の value の値<br/><br/>※ event.detail.data の値についての補足<br/>入力された文字列を指す<br/>ペーストやドラッグ&ドロップによって入力した場合は、null になる<br/>Enter, Delete, Backspace をクリックした場合は、null になる |
+
+### Constructor
+
+MobileTextArea(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
+
+---
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileTextArea = new Kuc.MobileTextArea({
+  label: 'Fruit',
+  requiredIcon: true,
+  placeholder: 'Apple',
+  value: 'Apple',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileTextArea);
+
+mobileTextArea.addEventListener('change', event => {
+  console.log(event);
+});
+
+mobileTextArea.addEventListener('focus', event => {
+  console.log(event);
+});
+
+mobileTextArea.addEventListener('input', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-time-picker.md
new file mode 100644
index 0000000000..bed44696da
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/components/mobile/mobile-time-picker.md
@@ -0,0 +1,86 @@
+---
+id: mobile-time-picker
+title: MobileTimePicker
+sidebar_label: MobileTimePicker
+---
+
+## Overview
+
+MobileTimePicker は入力エリアと時間選択用のリストを表示します。
+
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
+
+<MobileTimePickerComponent />
+
+---
+
+## Specification
+
+### Property
+
+使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | コンポーネントの class 名 | |
+| error | string | ""  | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
+| id | string | ""  | コンポーネントの id 名 | |
+| label | string | ""  | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
+| language | string | "auto"  | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
+| value | string | ""  | 表示するテキスト | フォーマットは HH:MM<br/>以下の時間も指定できる（内部的に HH:MM に変換される）:<li>5:30</li><li>05:3</li><li>5:3</li>時間や分が 1文字の場合、0 が先頭に補完される<br/>不正なフォーマットや値を指定した場合、エラーを出力する |
+| disabled | boolean | false | コンポーネントの選択可/不可設定 | |
+| hour12 | boolean | false | 時刻表記の設定 (12時間表記/24時間表記) デフォルトは 24時間表記 | 指定できるオプション:<br/>true: 12時間表記<br/>false: 24時間表記 |
+| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 | |
+| visible | boolean | true | コンポーネントの表示/非表示設定 | |
+
+### Event
+
+指定できるイベントの一覧です。
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
+
+### Constructor
+
+MobileTimePicker(options)<br/>
+使用できるコンストラクタの一覧です。
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | コンポーネントのプロパティを含むオブジェクト |  |
+
+---
+
+## Sample Code
+
+:::tip
+[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
+:::
+
+全てのパラメータを指定した場合のサンプルコードです。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileTimePicker = new Kuc.MobileTimePicker({
+  label: 'Time',
+  requiredIcon: true,
+  language: 'auto',
+  hour12: false,
+  value: '11:30',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileTimePicker);
+
+mobileTimePicker.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/getting-started/custom-css.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/getting-started/custom-css.md
new file mode 100644
index 0000000000..7cce43e33e
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/getting-started/custom-css.md
@@ -0,0 +1,66 @@
+---
+id: custom-css
+title: Custom CSS
+sidebar_label: Custom CSS
+---
+
+## 概要
+
+**kintone UI Component（KUC）** では、[CSS 継承](#css-継承)と [CSS カスタムプロパティ](#css-カスタムプロパティ)の概念を利用して、カスタマイズ可能な要素を作成するための CSS カスタムプロパティを用意しています。CSS セレクターを適用して CSS カスタムプロパティを設定することによって、ツリーベースおよびインスタンスごとのスタイルを簡単に適用することができます。
+
+### CSS 継承
+
+[CSS 継承](https://developer.mozilla.org/ja/docs/Web/CSS/inheritance)により、親要素は特定の CSS プロパティを子要素に継承することができます。
+
+### CSS カスタムプロパティ
+
+全ての [CSS カスタムプロパティ](https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties)（`--custom-property-name`）は、親から値を継承します。これを利用して、コンポーネントのスタイルを外部から変更することができます。
+
+KUC は要素ごとにいくつかのプロパティを公開しているので、それに基づいて要素の CSS プロパティを簡単にカスタマイズすることができます。
+
+## 使い方
+
+CSS セレクターを使って `--my-background` に値を指定することができます。
+
+```markup
+<style>
+  my-element {
+    --my-background: #d9092f;
+  }
+  .sample-class {
+    --my-background: #a8a632;
+  }
+  #sample-id {
+    --my-background: #1ac9b8;
+  }
+</style>
+<my-element></my-element>
+<my-element class="sample-class"></my-element>
+<my-element id="sample-id"></my-element>
+```
+
+:::tip
+各コンポーネントの **Custom CSS** 欄にて CSS カスタムプロパティの一覧をご確認ください。
+:::
+
+## サンプルコード
+
+Text コンポーネントの CSS プロパティをカスタマイズする場合のサンプルコードです。
+
+```markup
+<style>
+  kuc-text {
+    --kuc-text-input-width: 200px;
+    --kuc-text-input-height: 200px;
+  }
+  .sample-class {
+    --kuc-text-input-font-size: 16px;
+  }
+  #sample-id {
+    --kuc-text-input-color: #f25b0a;
+  }
+</style>
+<kuc-text></kuc-text>
+<kuc-text class="sample-class"></kuc-text>
+<kuc-text id="sample-id"></kuc-text>
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/getting-started/quick-start.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/getting-started/quick-start.md
new file mode 100644
index 0000000000..6b1a2735e7
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/getting-started/quick-start.md
@@ -0,0 +1,214 @@
+---
+id: quick-start
+title: Quick Start
+sidebar_label: Quick Start
+---
+
+## kintone UI Component とは？
+
+kintone UI Component は、kintone カスタマイズやプラグインの UI 開発を支援するための UI Component ライブラリです。<br/>
+以下のような kintone ライクな UI を簡単に作成できるので、フォーム部品を自作したい場合に便利にお使いいただけます。
+
+### Desktop 用コンポーネント例
+
+![desktop components](/img/desktop_components.png)
+
+### Mobile 用コンポーネント例
+
+![mobile components](/img/mobile_components.png)
+
+## 下準備：アプリ作成
+
+ここでは既定の kintone 一覧画面のヘッダーメニュースペースに Button コンポーネントを配置します。<br/>
+まず kintone UI Component を設置するアプリを用意します。
+
+1. 空のアプリを作成します。（[アプリをはじめから作成する](https://jp.cybozu.help/k/ja/user/create_app/tutorial.html)）<br/>
+特にフィールドの設置は必要ありません。
+
+## 導入と実装方法
+
+kintone UI Component では `kuc.min.js`ファイルのダウンロード と npm と CDN パッケージを用意しています。<br/>
+ブラウザ環境や Node.js 環境など開発環境に合わせていずれかを選択して読み込み、実装してください。<br/>
+本記事では、それぞれの導入・実装方法を紹介します。
+
+:::tip
+プロジェクト用の kintone UI Component を最新バージョンにアップデートして利用することを推奨しています。
+:::
+
+:::tip
+各コンポーネントのリファレンスについてはサイドバーの Components カテゴリよりご確認ください。<br/>
+（順次対応コンポーネントも追加予定です。）
+:::
+
+### kuc.min.js をダウンロードして利用する
+
+:::tip
+v1.4.0 以降のバージョンを利用する場合は、コンポーネントを呼び出す際に Kuc オブジェクトの代わりに Kucs["1.x.x"] を使ってバージョンを指定してください。（ex. `new Kucs["1.4.0"].Button()`）<br/>
+レンダリングされたコンポーネントのタグとクラス名にはバージョン番号が含まれます。<br/>
+グローバルオブジェクトとして Kuc を使うこともできますが、2つ以上の kuc.min.js を kintone カスタマイズやプラグインに読み込む場合はバージョンコンフリクトが起きる可能性があるのでご注意ください。この際、Kuc オブジェクトは最後に読み込まれた kuc.min.js を参照します。<br/>
+システム上に kuc.min.js が 1つしかない、もしくは最後に読み込まれた kuc.min.js の利用で問題ない場合は、Kuc オブジェクトを利用いただいて問題ありません。`const Kuc = Kucs['1.x.x'];` の行を削除してください。<br/>
+v1.3.2 以前のバージョンを利用する場合は、Kuc をグローバルオブジェクトとして使ってください。2つ以上の kuc.min.js を kintone カスタマイズやプラグインに追加すると、バージョンコンフリクト問題が起きるのでご注意ください。
+詳しくは、[Version conflicts issue and solution](../guides/version-conflicts-issue-solution.md) 記事をご確認ください。
+:::
+
+1. kintone UI Component リポジトリ内の[各バージョン Release 欄](https://github.com/kintone-labs/kintone-ui-component/releases)に添付のアーカイブフォルダ（kintone-ui-component-\{version\}.tgz）を解凍し、以下のファイルを kintone アプリ設定の `JavaScript / CSS でカスタマイズ`にて指定します。
+
+```bash
+./umd/kuc.min.js
+```
+
+2. `index.js` ファイルを作成します。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+kintone.events.on('app.record.index.show', event => {
+  const header = kintone.app.getHeaderMenuSpaceElement();
+
+  const button = new Kuc.Button({
+    text: 'Submit',
+    type: 'submit'
+  });
+  button.addEventListener('click', clickEvent => {
+    console.log(clickEvent);
+  });
+
+  header.appendChild(button);
+  return event;
+});
+```
+
+3. `index.js` を kintone アプリ設定の `JavaScript /CSS でカスタマイズ`にアップロードしてカスタマイズを適用します。（[JavaSriptやCSSでアプリをカスタマイズする](https://jp.cybozu.help/k/ja/user/app_settings/js_customize.html)）
+
+![button customize](/img/button_customize.png)
+
+### npm パッケージを利用する
+
+:::tip
+v1.4.0 から、レンダリングされたコンポーネントのタグ名とクラス名にはバージョン番号が含まれます。<br/>
+詳しくは、[Version conflicts issue and solution](../guides/version-conflicts-issue-solution.md) 記事をご確認ください。
+:::
+
+1. `customization` というフォルダを作成し、その配下で以下のコマンドを実行します。
+
+```bash
+mkdir customization && cd customization
+npm init -y
+npm install kintone-ui-component
+npm install webpack webpack-cli --save-dev
+```
+
+:::tip
+必要に応じて、`babel-loader` や `css-loader` もインストールしてお使いください。
+:::
+
+2. 利用したいコンポーネントをインポートし、`index.js` ファイルを `src` フォルダ配下に作成します。
+
+```js
+import { Button } from 'kintone-ui-component/lib/button';
+
+kintone.events.on('app.record.index.show', event => {
+  const header = kintone.app.getHeaderMenuSpaceElement();
+
+  const button = new Button({
+    text: 'Submit',
+    type: 'submit'
+  });
+  button.addEventListener('click', clickEvent => {
+    console.log(clickEvent);
+  });
+
+  header.appendChild(button);
+  return event;
+});
+```
+3. プロジェクトのルート配下に以下の `webpack.config.js` ファイルを作成します。
+
+```js
+const path = require('path');
+module.exports = (env = {}) => {
+  return {
+    entry: {
+      customization: './src/index.js'
+    },
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: '[name].min.js'
+    }
+  };
+};
+```
+
+4. `package.json` に webpack でビルドするためのスクリプトを追加します。
+
+```json
+"scripts": {
+  "build:webpack": "webpack --mode production",
+  ...
+}
+```
+
+5. 以下のコマンドを実行し、カスタマイズ用のファイルを生成します。
+
+```bash
+npm run build:webpack
+```
+
+```bash
+出力結果：
+./dist/customization.min.js
+```
+
+6. 上記でバンドルしたファイルを、作成した kintone アプリ設定の `JavaScript /CSS でカスタマイズ`にアップロードしてカスタマイズを適用します。（[JavaSriptやCSSでアプリをカスタマイズする](https://jp.cybozu.help/k/ja/user/app_settings/js_customize.html)）
+
+![button customize](/img/button_customize.png)
+
+### CDN を利用する
+:::tip
+[kuc.min.jsファイルをダウンロードして使用する](#kucminjs-をダウンロードして利用する) セクションの説明とサンプルコードをご確認ください。
+:::
+
+1. 以下の CDN URL を、作成した kintone アプリ設定の `JavaScript /CSS でカスタマイズ`にて指定します。（[JavaSriptやCSSでアプリをカスタマイズする](https://get.kintone.help/k/ja/user/app_settings/js_customize.html)）<br/>
+CDN を読み込むと、グローバルオブジェクトとして `Kuc` が追加されます。
+
+   - バージョン指定して読み込みたい場合（プロジェクト名の後ろにバージョン番号を指定）
+     ```bash
+     https://unpkg.com/kintone-ui-component@1.0.0/umd/kuc.min.js
+     ```
+  
+   - 最新版の kintone UI Component を読み込みたい場合
+     ```bash
+     https://unpkg.com/kintone-ui-component/umd/kuc.min.js
+     ```
+
+2. 以降は上記 kuc.min.jsファイルをダウンロードして使用する と同様。
+
+:::caution
+unpkg はサイボウズが提供している CDN サービスではありません。検証用としてお使いいただくことをお勧めします。<br/>
+本番環境では、unpkg の障害や不具合による影響を避けるため、GitHub から [kuc.min.js ファイルをダウンロード](#kucminjs-をダウンロードして利用する)してご利用ください。
+:::
+
+## ブラウザ対応状況
+
+<table>
+  <tbody>
+    <tr>
+      <th>Chrome</th>
+      <th>Safari</th>
+      <th>Firefox</th>
+      <th>Edge</th>
+    </tr>
+    <tr>
+      <td>○</td>
+      <td>○</td>
+      <td>○</td>
+      <td>○</td>
+    </tr>
+  </tbody>
+</table>
+
+:::info
+各対応ブラウザ最新版での動作を確認しております。
+
+各コンポーネントのリファレンスページでは、Overview にてコンポーネントのプレビュー表示をしています。<br/>
+:::
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/getting-started/usage-with-typescript.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/getting-started/usage-with-typescript.md
new file mode 100644
index 0000000000..510c617ebd
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/getting-started/usage-with-typescript.md
@@ -0,0 +1,105 @@
+---
+id: usage-with-typescript
+title: Usage with TypeScript
+sidebar_label: Usage with TypeScript
+---
+## 概要
+
+TypeScript を使うと、JavaScript に静的型付けを追加して開発者の生産性とコードの品質を向上させることができます。<br/>
+このガイドでは、TypeScript と webpack を使って kintone UI Component（KUC）のカスタマイズ方法を学習できます。
+
+## インストールと構成
+
+1. `npm` を使用して `kuc-demo-ts` という名前の新しい KUC プロジェクトを作成します。
+```bash
+mkdir kuc-demo-ts
+cd kuc-demo-ts
+npm init -y
+```
+
+2. `webpack` と `webpack-cli` (コマンドラインで webpack を実行するために使用されるツール) をローカルにインストールします。
+
+```bash
+npm install --save-dev webpack webpack-cli
+```
+
+3. TypeScript コンパイラとローダーをインストールします。
+```bash
+npm install --save-dev typescript ts-loader
+```
+
+4. 次のようなプロジェクトが作成されます。
+```bash
+kuc-demo-ts
+  |- dist
+    |- index.html
+  |- /src
+    |- index.ts
+  |- package.json
+  |- package-lock.json
+  |- webpack.config.js
+  |- tsconfig.json
+```
+
+[KUC リポジトリ](https://github.com/kintone-labs/kintone-ui-component/tree/master/demos/typescript-app)のサンプルプロジェクトにてファイルとその設定内容をご確認ください。
+
+## KUC のインポート
+1. `kintone-ui-component` をインストールします。
+```bash
+npm install kintone-ui-component
+```
+
+2. `src/index.ts` を編集します。
+```js
+import {
+  Dropdown,
+  DropdownChangeEventDetail,
+  DropdownItem,
+  DropdownProps,
+} from 'kintone-ui-component';
+
+const root = document.getElementById('root');
+const items: DropdownItem[] = [
+  {
+    label: '-----',
+    value: '-----'
+  },
+  {
+    label: 'Orange',
+    value: 'orange'
+  },
+  {
+    label: 'Banana',
+    value: 'banana'
+  }
+];
+const dropdownProps: DropdownProps = {
+  items: items,
+  value: '-----',
+  label: 'Fruit',
+  error: 'Error occurred!'
+};
+const dropdown = new Dropdown(dropdownProps);
+dropdown.addEventListener('change', ((event: CustomEvent) => {
+  const detail: DropdownChangeEventDetail = event.detail;
+  console.log(detail);
+}) as EventListener);
+root.appendChild(dropdown);
+```
+3. 次のコマンドを実行してビルドします。
+```bash
+npm run build
+```
+
+ブラウザで `dist` ディレクトリの `index.html` を開きます。問題がなければ、ページに Dropdown コンポーネントが表示されます。
+![dropdown image](/img/kuc-dropdown.png)
+KUC は TypeScript で書かれていて型定義も充実しているので、以下のようにプロパティのサジェスチョンや型チェックを活用できます。
+
+![dropdown param image](/img/kuc-dropdown-param.png)
+
+![dropdown props image](/img/kuc-dropdown-props.png)
+
+アプリケーションを開発するために、KUC のコンポーネントを自由に選択し、以下の型定義を利用できるようになります。
+- Items プロパティ (ex: DropdownItem)
+- コンポーネントのプロパティ (ex: DropdownProps, DatePickerProps)
+- CustomEvent.detail プロパティ（ex: DropdownChangeEventDetail）
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/attachment-customization.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/attachment-customization.md
new file mode 100644
index 0000000000..526e3719fc
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/attachment-customization.md
@@ -0,0 +1,234 @@
+---
+id: attachment-customization
+title: Attachment customization
+sidebar_label: Attachment customization
+---
+
+## 概要
+今回は、Attachment コンポーネントの活用とカスタマイズの仕方を説明します。<br/>
+以下のシナリオを想定します。
+1. ファイルオブジェクト（Blob/ArrayBuffer, シンプルなオブジェクトパターン）を作って KUC（kintone UI Component）の Attachment コンポーネントに追加する
+2. ユーザーが添付したファイル情報を取得する
+3. ファイルの type/size を検証して不正な値の場合にエラーを表示する
+4. KUC Attachment コンポーネントのファイルを kintone の添付ファイルフィールドにアップロードする
+
+### 使用するコンポーネント
+- [Attachment](../components/desktop/attachment.md)
+- [Button](../components/desktop/button.md)
+- [Spinner](../components/desktop/spinner.md)
+
+## 完成イメージ
+
+以下が画面の完成イメージです。
+![attachment customize](/img/attachment_customize.gif)
+
+## 事前準備
+
+以下のフィールドを含むアプリを作成します。
+- 添付ファイルフィールド（フィールドコード：Attachment）
+- スペースフィールド（要素ID：space）
+
+## JavaScript/CSS カスタマイズ
+
+kintone UI Component の UMD ファイルをアプリに読み込んだ上で、以下のような実装をした JavaScript ファイルをアップロードします。<br/>
+ファイルのアップロード方法などは、 [Quick Start](../getting-started/quick-start.md) をご覧ください。
+
+### カスタムの Attachment エリアの表示
+KUC Attachment コンポーネントと 2つの Button コンポーネントを表示します。
+- カスタムファイルを KUC Attachment に追加する
+- kintone の添付ファイルフィールドにアップロードする
+
+```javascript
+const KINTONE_ATTACHMENT_FIELD = 'Attachment'; // kintone attachment field ID
+const SPACE_ID = 'space'; // kintone space ID
+const Kuc = Kucs['1.x.x'];
+kintone.events.on('app.record.detail.show', async event => {
+  if (event.record[`${KINTONE_ATTACHMENT_FIELD}`]) {
+    const attachment = new Kuc.Attachment({
+      files: record[`${KINTONE_ATTACHMENT_FIELD}`].value,
+      label: 'KUC Attachment'
+    });
+    const addCustomFilesButton = new Kuc.Button({
+      text: 'add custom files to KUC Attachment'
+    });
+    const uploadButton = new Kuc.Button({
+      text: 'upload to native kintone Attachment',
+      type: 'submit'
+    });
+    const spinner = new Kuc.Spinner();
+    const spaceElement = kintone.app.record.getSpaceElement(SPACE_ID);
+    const container = document.createElement('div');
+    container.appendChild(attachment);
+    container.appendChild(addCustomFilesButton);
+    container.appendChild(uploadButton);
+    spaceElement.appendChild(container);
+  }
+  return event;
+});
+```
+### ファイルオブジェクトの作成と KUC Attachment コンポーネントへの適用
+
+`addCustomFilesButton` に click イベントリスナーを追加します。<br/>
+ボタンがクリックされた時、以下の 3つの種類のファイルオブジェクトが生成されます。
+- [File object](https://developer.mozilla.org/ja/docs/Web/API/File) に変換された Blob/ArrayBuffer ファイル
+- シンプルなオブジェクト（`{name: "xx", size: "xx"}`）
+そして、それらを KUC Attachment コンポーネントの `files` プロパティに追加します。
+
+```javascript
+const addCustomFilesButton = new Kuc.Button({
+  text: 'add custom files to KUC Attachment'
+});
+addCustomFilesButton.addEventListener('click', () => {
+  attachment.files = attachment.files.concat(initCustomFiles());
+});
+function initCustomFiles() {
+  const blob = new Blob(['this type is blob'], { type: 'text' });
+  const buffer = new ArrayBuffer(8);
+  const customFiles = [
+    arrayBufferToFile(buffer, 'array-buffer-file.txt', 'text'),
+    blobToFile(blob, 'blob-file.txt'),
+    { name: 'custom-file.txt', size: '150', type: 'text' }
+  ];
+  return customFiles;
+}
+
+function arrayBufferToFile(buffer, filename, type) {
+  const blob = new Blob([buffer], { type: type });
+  return new File([blob], filename, { type: type });
+}
+
+function blobToFile(blob, filename) {
+  return new File([blob], filename, { type: blob.type });
+}
+```
+### ユーザーが添付したファイル情報の取得と type/size の検証
+
+`attachment` に change イベントリスナーを追加します。<br/>
+いずれかのファイルを選択もしくは削除した場合、change イベントのコールバックでファイル情報を取得することができます。<br/>
+ファイルの type/size（text/50MB）を検証して、不正なファイルの配列番号を取得します。
+
+```javascript
+attachment.addEventListener('change', event => {
+  console.log(event.detail); // The changed file info
+  attachment.error = validateAttachmentFiles(event.detail.files);
+});
+function validateAttachmentFiles(files) {
+  const acceptType = 'text';
+  const maxSize = 1024 * 1024 * 50; // 50Mb
+  let error = '';
+  let typeErrorCount = 0;
+  let sizeErrorCount = 0;
+  files.forEach((file, index) => {
+    let types = [];
+    if (file.type) {
+      types = file.type.split('/');
+    }
+    // The file type in the native kintone attachment field file is "contentType"
+    if (file.contentType) {
+      types = file.contentType.split('/');
+    }
+    if (!types.includes(acceptType)) {
+      typeErrorCount++;
+      console.log(`Invalid type file index is ${index}`);
+    }
+    if (!file.size || parseInt(file.size, 10) > maxSize) {
+      sizeErrorCount++;
+      console.log(`Invalid size file index is ${index}`);
+    }
+  });
+  if (typeErrorCount > 0) {
+    error = `There ${
+      typeErrorCount === 1
+        ? 'is an invalid type file'
+        : 'are ' + typeErrorCount + ' invalid type files'
+    }!`;
+  }
+  if (sizeErrorCount > 0) {
+    error = `There ${
+      sizeErrorCount === 1
+        ? 'is an invalid size file'
+        : 'are ' + sizeErrorCount + ' invalid size files'
+    }!`;
+  }
+  return error;
+}
+```
+### KUC Attachment コンポーネントのファイルを kintone 添付ファイルフィールドに適用
+`uploadButton` に click イベントリスナーを追加します。<br/>
+ボタンがクリックされた時、KUC の Spinner コンポーネントを表示します。<br/>
+KintoneRestApiClient の `uploadFile` メソッドを使って kintone にファイルをアップロードします。<br/>
+upload メソッドから返された fileKeys を使って kintone のレコードを更新します。<br/>
+最後に、KUC Spinner コンポーネントを閉じてページを更新します。 <br/>
+全ての API コールは [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) もしくは [kintone REST API](https://cybozu.dev/ja/kintone/sdk/rest-api-client/kintone-javascript-client/) を使っています。
+
+```javascript
+const KINTONE_ATTACHMENT_FIELD = 'Attachment'; // kintone attachment field ID
+const ID = '$id';
+const uploadButton = new Kuc.Button({
+  text: 'upload to native kintone Attachment',
+  type: 'submit'
+});
+uploadButton.addEventListener('click', async () => {
+  spinner.open();
+  const fileKeys = await uploadFiles(attachment.files);
+  const params = generateRecordParams(fileKeys, record[`${ID}`].value);
+  await updateRecord(params);
+  spinner.close();
+  location.reload();
+});
+
+function generateRecordParams(fileKeys, recordId) {
+  const app = kintone.app.getId();
+  const record = {};
+  record[`${KINTONE_ATTACHMENT_FIELD}`] = { value: fileKeys };
+  return { app: app, id: recordId, record: record };
+}
+
+async function uploadFiles(files) {
+  const fileKeys = [];
+  for (const file of files) {
+    if (!file.fileKey) {
+      const response = await uploadFile(file);
+      file.fileKey = response.fileKey;
+    }
+    fileKeys.push({ fileKey: file.fileKey });
+  }
+  return fileKeys;
+}
+
+function uploadFile(file) {
+  return new Promise((resolve, reject) => {
+    const formData = new FormData();
+    const blob = new Blob([file], { type: file.type ?? '' });
+    formData.append('__REQUEST_TOKEN__', kintone.getRequestToken());
+    formData.append('file', blob, file.name);
+    const url = 'https://{domain}//k/v1/file.json';
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', url);
+    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+    xhr.onload = () => {
+      if (xhr.status === 200) {
+        // success
+        resolve(JSON.parse(xhr.responseText));
+      } else {
+        // error
+        reject(JSON.parse(xhr.responseText));
+      }
+    };
+    xhr.send(formData);
+  });
+}
+
+function updateRecord(params) {
+  return kintone.api(
+    kintone.api.url('/k/v1/record.json', true),
+    'PUT',
+    params
+  );
+}
+```
+
+:::info
+本記事は、 2023 年 2 月時点の kintone と Google Chrome で確認したものになります。<br/>
+また、カスタマイズに使用した kintone UI Component のバージョンは、v1.9.0 です。
+:::
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/bulk-update-customization.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/bulk-update-customization.md
new file mode 100644
index 0000000000..ed0aeadca3
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/bulk-update-customization.md
@@ -0,0 +1,204 @@
+---
+id: bulk-update-customization
+title: Bulk update customization
+sidebar_label: Bulk update customization
+---
+
+## 概要
+
+プロセス管理利用時、ステータス承認が必要なレコードが溜まってきたケースを想定します。<br/>
+複数レコードの個別承認は手間がかかるので、レコード一覧画面から一括で承認ができるようにカスタマイズします。<br/>
+UI 周りに kintone UI Component を使用することで、kintone にマッチする画面をスピーディーに作成できます。
+
+### 使用するコンポーネント
+- [Button](../components/desktop/button.md)
+- [Notification](../components/desktop/notification.md)
+- [Spinner](../components/desktop/spinner.md)
+
+## 完成イメージ
+
+以下が、画面の完成イメージです。
+
+![Bulk Update](/img/bulk_update.gif)
+
+## 事前準備
+
+一括承認専用のレコード一覧を作成します。「（作業者が自分）」の一覧を使用することもできますが、今回はわかりやすい一覧を別途作成します。<br/>
+例として、ステータスが「In progress」、作業者がログインユーザーのレコードのみが表示される一覧を作成します。
+
+## JavaScript/CSS カスタマイズ
+
+kintone UI Component の UMD ファイルをアプリに読み込んだ上で、以下のような実装をした JavaScript ファイル（bulkUpdate.js）をアップロードします。<br/>
+ファイルのアップロード方法などは、[Quick Start](../getting-started/quick-start.md) をご覧ください。<br/>
+
+今回は、確認画面の作成に SweetAlert2 を使用するので、別途以下ファイルを読み込みます。
+- https://cdn.jsdelivr.net/npm/sweetalert2@11
+
+今後のバージョンアップデートで Dialog コンポーネントの提供を予定しているので、確認画面の実装は将来的にはそちらで置き換えることも可能です。
+
+***bulkUpdate.js***
+
+```javascript
+kintone.events.on('app.record.index.show', (event) => {
+
+  // Write the process here
+
+});
+```
+---
+### 一覧画面にボタンを設置
+---
+
+Button コンポーネントを利用して、レコード一覧画面に Bulk approval ボタンを設置します。<br/>
+ここでは、各一覧が持つ view ID を利用して、一括承認専用の一覧にのみボタンを表示させています。<br/>
+※ view ID はレコード一覧画面の URL から取得できます。
+
+```javascript
+if (event.viewId !== 6342505) {
+  return event;
+}
+
+// Prevent duplication bug with ID granted by property
+if (document.getElementById('kuc_button') !== null) {
+  return event;
+}
+
+const header = kintone.app.getHeaderMenuSpaceElement();
+const button = new Kuc.Button({
+  type: 'submit',
+  text: 'Bulk approval',
+  id: 'kuc_button'
+});
+header.appendChild(button);
+```
+
+---
+### Bulk approval ボタンクリック時の処理
+---
+
+Bulk approval ボタンをクリックした時の動作です。<br/>
+対象のレコードがない場合は、確認ダイアログを表示させる前に処理を中断します。<br/>
+確認ダイアログでキャンセルを押した時も、処理を中断します。<br/>
+メッセージの表示には Notification コンポーネントを使用しています。
+
+```javascript
+button.addEventListener('click', () => {
+
+  // When there is no records being processed
+  if (event.records.length === 0) {
+    const updateAlert = new Kuc.Notification({
+      text: 'There are no records being processed.'
+    });
+    updateAlert.open();
+    return;
+  }
+
+  Swal.fire({
+    title: 'Are you sure to approve the displayed records in bulk?',
+    icon: 'question',
+    showCancelButton: true
+  }).then(resp => {
+
+    // When Cancel is pressed
+    if (!resp.isConfirmed) {
+      const cancelInfo = new Kuc.Notification({
+        text: 'Canceled.',
+        type: 'info'
+      });
+      cancelInfo.open();
+      return;
+    }
+
+    // Write subsequent process
+
+  });
+});
+```
+
+今回は複数レコードの一括処理なので、更新に時間がかかる場合があります。<br/>
+そのため、更新中に表示するローディング画面を実装してみます。<br/>
+ローディング画面の実装には、 Spinner コンポーネントを使います。<br/>
+
+open() メソッドで、ローディングが始まります。
+
+```javascript
+// Start bulk approval
+const spinner = new Kuc.Spinner({
+  text: 'now loading...'
+});
+spinner.open();
+```
+
+一括更新処理に使うパラメーターを作成します。
+
+一覧画面で表示中のレコードをループさせて、レコード ID とプロセス管理で設定されたアクション名を持ったオブジェクトを含む配列データを作成します。<br/>
+obj.action には、プロセス管理で設定されたアクション名を記述します。<br/>
+更新対象は、一覧画面で表示中のレコードのみであることにご注意ください。
+
+```javascript
+const records = event.records.map(record => {
+  const obj = {};
+  obj.id = record.$id.value;
+  obj.action = 'Approve';
+  return obj;
+});
+
+const appId = kintone.app.getId();
+const param = {
+  app: appId,
+  records: records
+};
+```
+
+更新に成功したら、 Notification でメッセージを表示させます。<br/>
+Spinner の close() メソッドを使って、ローディング画面を終了させることを忘れないでください。<br/>
+v1.2.0 で追加された close イベントを使って、Notification の閉じるボタンを押したタイミングで画面をリロードさせることもできます。
+
+```javascript
+kintone
+  .api(kintone.api.url('/k/v1/records/status', true), 'PUT', param)
+  .then(() => {
+    const successInfo = new Kuc.Notification({
+      text: 'Bulk approval was successful!',
+      type: 'info'
+    });
+    successInfo.open();
+
+    // Finish bulk approval
+    spinner.close();
+
+    // When close button is pressed
+    successInfo.addEventListener('close', () => {
+      location.reload();
+    });
+  })
+  .catch(error => {
+    // Process when REST API error occurs
+  });
+```
+
+---
+### エラーメッセージの表示
+---
+
+処理中にエラーが発生した場合、 Notification を使ってメッセージを表示しています。
+
+```javascript
+.catch(error => {
+  // Process when REST API error occurs
+  let errmsg = 'An error occurred while retrieving the record.';
+  if (error.message) {
+    errmsg += ' ' + error.message;
+  }
+  const updateError = new Kuc.Notification({
+    text: errmsg
+  });
+  updateError.open();
+  spinner.close();
+});
+```
+
+:::info
+本記事は、 2022 年 1 月時点の kintone と Google Chrome で確認したものになります。<br/>
+また、カスタマイズに使用した kintone UI Component のバージョンは、v1.3.0 です。
+:::
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/cleaning-check-list-customization.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/cleaning-check-list-customization.md
new file mode 100644
index 0000000000..405dadc448
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/cleaning-check-list-customization.md
@@ -0,0 +1,226 @@
+---
+id: cleaning-check-list-customization
+title: Cleaning check list customization
+sidebar_label: Cleaning check list customization
+---
+
+## 概要
+
+レコード一覧画面にコンポーネントを表示させて、レコード追加画面を開くことなく、レコードを作成するカスタマイズを、清掃の点検項目を具体例として説明します。<br/>
+また、ここでは、コンポーネントの値を kintone のフィールドに受け渡す方法を学ぶことができます。
+
+### 使用するコンポーネント
+- [RadioButton](../components/desktop/radio-button.md)
+- [Checkbox](../components/desktop/checkbox.md)
+- [Dropdown](../components/desktop/dropdown.md)
+- [Button](../components/desktop/button.md)
+- [Notification](../components/desktop/notification.md)
+
+## 完成イメージ
+
+以下が、画面の完成イメージです。
+
+![Cleaning Check List](/img/cleaning_check_list.png)
+
+## JavaScript/CSS カスタマイズ
+
+kintone UI Component の UMD ファイルをアプリに読み込んだ上で、以下のような実装をした JavaScript ファイルをアップロードします。<br/>
+ファイルのアップロード方法などは、[Quick Start](../getting-started/quick-start.md) をご覧ください。
+
+### 点検項目の表示
+
+アプリのレコード一覧画面に、Check Status, Replenishment Item, Cleaning Status という点検項目を表示します。<br/>
+
+ワンポイント解説です。
+- Checkbox や Dropdown コンポーネントでは、Item.label が未指定の場合 Item.value の値が表示されます。
+- 各コンポーネントに必須項目のアイコンを表示する場合、requiredIcon プロパティの値を true にします。
+- RadioButton コンポーネントや Dropdown コンポーネントで初期値を設定する場合は、value プロパティに値を指定します。
+  - ここでは、RadioButton コンポーネントの value プロパティに 'Done', Dropdown コンポーネントの value プロパティに '-----' を指定します。
+
+```javascript
+kintone.events.on('app.record.index.show', event => {
+
+  // Prevent components duplication bug
+  if (
+    document.getElementById('kuc_radiobutton') ||
+    document.getElementById('kuc_checkbox') ||
+    document.getElementById('kuc_dropdown') ||
+    document.getElementById('kuc_button')
+  ) {
+    return event;
+  }
+
+  const app = kintone.app.getId();
+  const header = kintone.app.getHeaderSpaceElement();
+
+  // Display RadioButton
+  const radiobutton = new Kuc.RadioButton({
+    id: 'kuc_radiobutton',
+    label: 'Check Status',
+    items: [
+      {
+        value: 'Done'
+      },
+      {
+        value: 'Not Yet'
+      }
+    ],
+    value: 'Done',
+    requiredIcon: true
+  });
+
+  // Display Checkbox
+  const checkbox = new Kuc.Checkbox({
+    id: 'kuc_checkbox',
+    label: 'Replenishment Item',
+    items: [
+      {
+        value: 'Toilet Paper'
+      },
+      {
+        value: 'Hand Soap'
+      },
+      {
+        value: 'Hand Paper'
+      }
+    ],
+    requiredIcon: true
+  });
+
+  // Display Dropdown
+  const dropdown = new Kuc.Dropdown({
+    id: 'kuc_dropdown',
+    label: 'Cleaning Status',
+    items: [
+      {
+        value: '-----'
+      },
+      {
+        value: 'Done'
+      },
+      {
+        value: 'Not Yet'
+      },
+      {
+        value: 'Asking Cleaner'
+      }
+    ],
+    value: '-----',
+    requiredIcon: true
+  });
+
+  // Display Button
+  const button = new Kuc.Button({
+    id: 'kuc_button',
+    text: 'Save',
+    type: 'submit'
+  });
+  header.appendChild(radiobutton);
+  header.appendChild(checkbox);
+  header.appendChild(dropdown);
+  header.appendChild(button);
+```
+### CSS を使ったボタンの間隔の調整
+
+Button コンポーネントの id プロパティに値を付与して、CSS でボタンの間隔を調整します。
+
+```css
+@charset "UTF-8";
+#kuc_button {
+  margin: 25px 0px 0px 5px;
+}
+```
+
+### Save ボタンクリック時の処理
+
+Button コンポーネントは、click イベントを指定することができます。<br/>
+Save ボタンをクリックしたときに、必須項目の値の有無をチェックしています。
+
+チェックの結果、値がない場合は、各コンポーネントにエラーメッセージを表示します。<br/>
+※ 最初に空文字を入れてエラーメッセージを初期化しています。
+
+
+```javascript
+button.addEventListener('click', () => {
+  // Reset error messages
+  checkbox.error = '';
+  dropdown.error = '';
+
+  // Check required itmes
+  let erorrFlag = false;
+
+  if (!checkbox.value.length) {
+    checkbox.error = 'Please check';
+    erorrFlag = true;
+  }
+  if (dropdown.value === '-----') {
+    dropdown.error = 'Please select';
+    erorrFlag = true;
+  }
+
+  if (erorrFlag) {
+    return;
+  }
+```
+必須項目の値の有無をチェックしたあと、レコードを登録します。<br/>
+
+画面上で入力された必須項目の値は、\<コンポーネントの変数名.value\> で取得できます。<br/>
+今回のカスタマイズでは、radiobutton.value、checkbox.value、dropdown.value で各コンポーネントに入力された値を取得しています。
+
+登録に成功したら、Notification コンポーネントでメッセージを表示しています。
+
+
+```javascript
+// Create request paramerter
+const postParam = {
+  app,
+  record: {
+    status: {
+      value: radiobutton.value
+    },
+    item: {
+      value: checkbox.value
+    },
+    cleaning: {
+      value: dropdown.value
+    }
+  }
+};
+
+// Register record
+kintone
+  .api(kintone.api.url('/k/v1/record', true), 'POST', postParam)
+  .then(resp => {
+    // Display success message
+    const success = new Kuc.Notification({
+      text: 'Registered check items',
+      type: 'success'
+    });
+    success.open();
+  });
+```
+
+### エラーメッセージの表示
+
+処理中にエラーが発生した場合、Notification コンポーネントを使ってメッセージを表示しています。
+
+```javascript
+.catch(error => {
+  console.log(error);
+
+  // Display error message
+  let errmsg = 'An error occurred.';
+  if (error.message) {
+    errmsg += ' ' + error.message;
+  }
+  const alert = new Kuc.Notification({
+    text: errmsg
+  });
+  alert.open();
+});
+```
+
+:::info
+本記事は、 2021 年 ９ 月時点の kintone と Google Chrome で確認したものになります。<br/>
+また、カスタマイズに使用した kintone UI Component のバージョンは、v1.1.0 です。
+:::
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/comparison-v0-v1.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/comparison-v0-v1.md
new file mode 100644
index 0000000000..9f5ed9468c
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/comparison-v0-v1.md
@@ -0,0 +1,297 @@
+---
+id: comparison-v0-v1
+title: A commentary on the difference between v0 and v1
+sidebar_label: A commentary on the difference between v0 and v1
+---
+
+## 概要
+**kintone UI Component** の v1 は、提供コンポーネントの精査やアクセシビリティ対応に加え、開発者がより使いやすいように内部設計の見直しを行っています。
+
+ここでは、 kintone アプリのカスタマイズで使うにあたり、 v0 と v1 のコードの書き方の違いと、 v1 でより使いやすくなったポイントについて解説します。
+
+## 完成イメージ
+例として、 kintone UI Component を使ってレコードの一覧画面に検索ボタンを作るコードでご紹介します。<br/>
+こちらが画面の完成イメージです。
+
+![検索ボックス](/img/v1_search_box.png)
+
+## JavaScript/CSS カスタマイズ
+
+早速ですが、まずはコードを見てみましょう。<br/>
+ここでは kintone UI Component の UMD ファイルを使用しています。<br/>
+ファイルのアップロード方法などは、 [Quick Start](../getting-started/quick-start.md) をご覧ください。
+
+### v0 を使った場合
+
+```javascript
+// Process to prevent component duplication bug
+if (document.getElementById('my_index_text') !== null) {
+  return event;
+}
+
+const header = kintone.app.getHeaderMenuSpaceElement();
+
+// Show search box
+const text = new kintoneUIComponent.Text({
+  placeholder: 'Enter keywords'
+});
+
+const button = new kintoneUIComponent.Button({
+  type: 'submit',
+  text: 'Search'
+});
+
+// Use text and a button side by side
+text.element.style.float = 'left';
+button.element.style.float = 'right';
+
+header.appendChild(text.render());
+header.appendChild(button.render());
+
+// Specified id for component duplication bug prevention
+text.element.id = 'my_index_text';
+```
+
+### v1 を使った場合
+
+```javascript
+// Process to prevent component duplication bug
+if (document.getElementById('kuc_text') !== null) {
+  return event;
+}
+
+const header = kintone.app.getHeaderMenuSpaceElement();
+
+// Show search box
+const text = new Kuc.Text({
+  placeholder: 'Enter keywords',
+  id: 'kuc_text'
+});
+
+const button = new Kuc.Button({
+  type: 'submit',
+  text: 'Search',
+  id: 'kuc_button'
+});
+
+header.appendChild(text);
+header.appendChild(button);
+```
+
+## v0 と v1 の違いを解説
+
+それでは、 v0 と v1 ではどのようにコードの書き方が変わってくるのでしょうか。
+
+主な違いは以下です。
+- ネームスペースの名前が簡素化
+- render() メソッドが不要に
+- プロパティを利用して値の更新が可能に
+- パーツ並びの利便性向上
+- プロパティの見直し
+- Alert と Label コンポーネントのプロパティ化
+- Item.label の自動補完
+
+ひとつずつ解説していきます。
+
+---
+#### ネームスペースの名前が簡素化
+---
+v1 では、インスタンスの呼び出し方が new kintoneUIComponent から **new Kuc** となり、より簡潔なコードが書けるようになりました。
+
+- v0 のコード
+```javascript
+const text = new kintoneUIComponent.Text({
+  placeholder: 'Enter keywords'
+});
+```
+
+- v1 のコード
+```javascript
+const text = new Kuc.Text({
+  placeholder: 'Enter keywords'
+});
+```
+
+また、これにより同一アプリに v0 と v1 の UMD が読み込まれた際に、どちらかが上書きされてしまうというリスクがなくなりました。
+
+---
+#### render() メソッドが不要に
+---
+v0 では、内部実装の都合上、appendChild する際に render() メソッドを用いてコンポーネントの Element を返す必要がありました。<br/>
+v1 では、設計を見直したことで render() が不要となり、よりシンプルな書き方でコンポーネントを描画できるようになりました。
+
+- v0 のコード
+```javascript
+header.appendChild(text.render());
+```
+
+- v1 のコード
+```javascript
+header.appendChild(text);
+```
+
+---
+#### プロパティを利用して値の更新が可能に
+---
+v0 では、値を更新する場合、メソッドを別途呼び出す必要がありました。<br/>
+v1 では、プロパティを利用して値を更新することができます。
+
+- v0 のコード
+```javascript
+const button = new kintoneUIComponent.Button({
+  type: 'submit',
+  text: 'Search'
+});
+
+// Update the value by calling the method
+button.setText('Register');
+```
+
+- v1 のコード
+```javascript
+const button = new Kuc.Button({
+  type: 'submit',
+  text: 'Search',
+  id: 'kuc_button'
+});
+
+// Property can be used to update values
+button.text = 'Register';
+```
+
+---
+#### パーツ並びの利便性向上
+---
+v0 では、デフォルトではパーツが縦に並ぶ仕様になっており、横並びにするためには CSS などで調整する必要がありました。
+
+![v0](/img/v0_search_box.png)
+
+- style を調整する必要がある
+```javascript
+// Use text and button side by side
+text.element.style.float = 'left';
+button.element.style.float = 'right';
+```
+
+v1 では内部仕様を見直し、ほとんどのコンポーネントがデフォルトで横並びになったことで、調整が不要になりました。<br/>
+（利便性を考え、一部のコンポーネントではデフォルトが縦並びに設定されています。）
+
+![検索ボックス](/img/v1_search_box.png)
+
+---
+#### プロパティの見直し
+---
+v1 では各コンポーネントのプロパティについても精査し、必要に応じてプロパティの見直し・追加を行いました。
+
+例えば、v1 で新規に追加された `id` プロパティを使うことで、コンポーネントに id を付与できます。<br/>
+付与した id を使って、要素を取得するといったことが可能になります。
+
+- v0 のコード
+```javascript
+// Process to prevent component duplication bug
+if (document.getElementById('my_index_text') !== null) {
+  return event;
+}
+
+const text = new kintoneUIComponent.Text({
+  placeholder: 'Enter keywords'
+});
+
+// ID property is missing, ID must be granted separately
+text.element.id = 'my_index_text';
+```
+
+- v1 のコード
+```javascript
+// Process to prevent component duplication bug (ID name granted by the property is available)
+if (document.getElementById('kuc_text') !== null) {
+  return event;
+}
+
+const header = kintone.app.getHeaderMenuSpaceElement();
+const text = new Kuc.Text({
+  placeholder: 'Enter keywords',
+  id: 'kuc_text'
+});
+```
+---
+#### Alert と Label コンポーネントのプロパティ化
+---
+v0 ではコンポーネントにエラーメッセージを表示させたい時や、ラベルを表示させたい時は、 Alert や Label などの別コンポーネントで実装する必要がありました。
+
+v1 ではプロパティとして  `error` や `label` が用意され、各コンポーネントで扱えるようになりました。<br/>
+例として、Text コンポーネントの `error` プロパティを見てみましょう。
+
+冒頭で、 KUC を使って検索ボックスを作成するコードをご紹介しましたが、ボタンをクリックしても今のままでは何も反応しません。
+
+そこで、ボタンクリック時に、テキストの入力値をチェックして値がなかったらエラーメッセージを表示させるという処理を入れてみます。
+
+以下がコードです。
+
+```javascript
+const button = new Kuc.Button({
+  type: 'submit',
+  text: 'Search',
+  id: 'kuc_button'
+});
+
+/* Add the following code */
+
+// Add the process of click event to the displayed button
+button.addEventListener('click', event => {
+  const keyword = text.value;
+  const errorMessage = 'Please enter a value.';
+  // Hide the error message
+  text.error = '';
+
+  // Check if there is a value
+  if (!keyword) {
+    // Show the error message
+    text.error = errorMessage;
+    return;
+  }
+});
+```
+
+このコードでは、クリックイベント内で、 text.value で値を取得し、正規表現を利用して値のチェックをしています。<br/>
+チェックの結果、全角以外の値であればエラーメッセージを表示して、処理を中断するという流れです。
+
+エラーメッセージの表示に利用しているのが、 Text の `error` プロパティです。
+
+メッセージの初期化（エラーメッセージの非表示）も、今回であれば text.error に空文字列を代入するだけなので、簡潔に書くことができます。
+
+![search_box_error](/img/v1_search_box_error.png)
+
+---
+#### Item.label の自動補完
+---
+選択肢系のコンポーネントにおいて、v0 では `Item.label` と `Item.value` どちらも指定する必要がありました。
+
+v1 では `Item.value` のみが必須項目となります。もし `Item.label` の指定がない場合は、`Item.value` の値が設定されます。<br/>
+UI で表示するラベルと内部的に持つ値が一緒の場合の書き方がコンパクトになりました。
+
+以下のように省略して書くことができます。
+
+```javascript
+const checkbox = new Kuc.Checkbox({
+  items: [
+    {
+      value: 'orange'
+    }
+  ]
+});
+```
+
+## おわりに
+
+いかがでしたでしょうか。<br/>
+進化した kintone UI Component を使って、これまで以上にスマートな kintone 開発を体験していただければ幸いです。
+
+:::info
+本記事は、 2021 年 2 月時点の kintone と Google Chrome で確認したものになります。<br/>
+また、カスタマイズに使用した kintone UI Component のバージョンは、v0.7.4 および v1.0.0 です。
+:::
+
+:::info
+v0 のドキュメントは別サイトになりますので、[こちら](https://kintone-labs.github.io/kintone-ui-component/latest/)よりご確認ください。
+:::
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/format-setting-plugin.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/format-setting-plugin.md
new file mode 100644
index 0000000000..9ff58aa882
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/format-setting-plugin.md
@@ -0,0 +1,445 @@
+---
+id: format-setting-plugin
+title: Format setting plug-in
+sidebar_label: Format setting plug-in
+---
+
+## 概要
+
+kintone のアプリ画面だけでなく、プラグインの設定画面でも kintone UI Component を使うことで活用の幅を広げることができます。<br/>
+今回は簡易的な条件書式プラグインの作成を例に、プラグイン設定画面での kintone UI Component の使い方を説明します。
+
+### 使用するコンポーネント
+- [Button](../components/desktop/button.md)
+- [DatePicker](../components/desktop/date-picker.md)
+- [Dialog](../components/desktop/dialog.md)
+- [Dropdown](../components/desktop/dropdown.md)
+- [MultiChoice](../components/desktop/multichoice.md)
+
+## 完成イメージ
+
+以下が、実装シナリオと画面の完成イメージです。
+
+会社の決算日をプラグイン設定画面で設定し、本日の日付が決算日以前のレコードの特定フィールドを赤くするカスタマイズをプラグイン化します。
+
+![Plugin setting](/img/plugin_setting.png)
+プラグイン設定画面です。<br/>
+設定した条件（本日の日付が基準日付より前、または基準日付より後）を満たすと、設定したフィールドの色がレコード詳細画面で赤色に変わります。
+
+![Confirmation](/img/dialog.png)
+設定を保存する際に、確認ダイアログを表示します。
+
+![App image](/img/payment_management_app.png)
+入金を管理するアプリです。<br/>
+プラグイン設定画面で設定した条件に応じてフィールドの背景色が変わります。
+
+## 事前準備
+
+kintone プラグインの作成にあたり、今回は以下のフォルダ構成で、ファイルを用意します。<br/>
+フォルダ構成、ファイル名などは一例です。
+
+```
+src/
+├── image/
+|   ├── icon.png
+├── js/
+|   ├── config.js
+|   ├── desktop.js
+├── css/
+|   ├── config.css
+├── html/
+|   ├── config.html
+├── lib/
+|   ├── luxon.js
+|   ├── kuc.min.js
+|
+├── manifest.json
+```
+
+## マニフェストファイルの作成
+
+以下のようなマニフェストファイルを作成します。
+
+```json
+{
+  "manifest_version": 1,
+  "version": 1,
+  "type": "APP",
+  "name": {
+    "en": "Format Setting Plug-in"
+  },
+  "description": {
+    "en": "This is a sample plug-in."
+  },
+  "icon": "image/icon.png",
+  "desktop": {
+    "js": [
+      "js/desktop.js",
+      "lib/luxon.js"
+    ],
+    "css": []
+  },
+  "config": {
+    "html": "html/config.html",
+    "js": [
+      "lib/kuc.min.js",
+      "js/config.js"
+    ],
+    "css": [
+      "css/config.css"
+    ],
+    "required_params": ["date", "condition", "targetFields"]
+  }
+}
+```
+
+今回はプラグイン設定画面のカスタマイズで kintone UI Component を使用するので、config オブジェクトの中に UMD ファイルのパスを記載します。<br/>
+UMD ファイルの導入方法は、[Quick Start](../getting-started/quick-start.md) をご覧ください。
+
+## プラグインアイコンの作成
+
+[こちらのガイド記事](https://cybozudev.zendesk.com/hc/ja/articles/203455680)に沿ってプラグインのアイコンを作成します。<br/>
+アイコンファイル（icon.png）を image フォルダに配置します。
+
+## HTMLカスタマイズ
+
+プラグイン設定画面用の HTML ファイルを作成します。<br/>
+今回は以下のように作成します。div 要素に設定した id を利用して、kintone UI Component の各パーツを配置していきます。
+
+```html
+<section class="settings">
+  <h2 class="settings-heading">Format Setting Plug-in</h2>
+  <p>If the conditions match, the background color of the target fields will be changed to red.</p>
+  <br/>
+    <h3 class="kintoneplugin-desc">Set the reference date.</h3>
+    <p class="kintoneplugin-row">
+      <div id="date_space"></div>
+    </p>
+    <br/>
+    <h3 class="kintoneplugin-desc">Set the condition to color the fields. The default date is today.</h3>
+    <p class="kintoneplugin-row">
+      <div id="dropdown_space"></div>
+    </p>
+    <br/>
+    <h3 class="kintoneplugin-desc">Select the fields to color.</h3>
+    <p class="kintoneplugin-row">
+      <div id="multichoice_space"></div>
+    </p>
+    <br/>
+    <p class="kintoneplugin-row">
+      <div id="button_space"></div>
+    </p>
+</section>
+```
+
+## JavaScript/CSS カスタマイズ（設定画面）
+
+設定画面の実装コードを解説します。<br/>
+以下のような JavaScript ファイル（config.js）を js フォルダに配置します。<br/>
+
+***config.js***
+
+```javascript
+(async PLUGIN_ID => {
+  // Write the process here
+})(kintone.$PLUGIN_ID);
+```
+---
+### 各種コンポーネントの作成
+---
+
+各種コンポーネントを作成します。<br/>
+フィールドとしては、以下を配置します。<br/>
+Reference Date: 基準日付を設定します<br/>
+Condition: 基準日付に対する条件を設定します<br/>
+Fields：フィールド設定します（複数選択可）<br/>
+
+```javascript
+// Specify what version to use
+const Kuc = Kucs['1.x.x'];
+
+// Create DatePicker component
+const datePicker = new Kuc.DatePicker({
+  label: 'Reference Date',
+  requiredIcon: true,
+  language: 'auto'
+});
+// Create Dropdown component
+const dropdown = new Kuc.Dropdown({
+  label: 'Condition',
+  requiredIcon: true,
+  items: [
+    {
+      label: '-----',
+      value: '-----'
+    },
+    {
+      label: 'Before reference date',
+      value: 'before'
+    },
+    {
+      label: 'After reference date',
+      value: 'after'
+    }
+  ],
+  value: '-----'
+});
+// Get field info to display in MultiChoice component
+const items = await getFields();
+// Create MultiChoice component
+const multiChoice = new Kuc.MultiChoice({
+  label: 'Fields',
+  requiredIcon: true,
+  items: items
+});
+// Create Button component
+const saveButton = new Kuc.Button({
+  text: 'Save',
+  type: 'submit'
+});
+const cancelButton = new Kuc.Button({
+  text: 'Cancel',
+  type: 'cancel',
+  id: 'kuc_cancel_button'
+});
+const dialogOKButton = new Kuc.Button({
+  text: 'OK',
+  type: 'submit'
+});
+const dialogCancelButton = new Kuc.Button({
+  text: 'Cancel',
+  type: 'cancel',
+  id: 'kuc_dialog_cancel_button'
+});
+const divEl = document.createElement('div');
+divEl.setAttribute('id', 'kuc_dialog_footer');
+// Create Dialog component
+const dialog = new Kuc.Dialog({
+  content: `<div style="text-align: center; padding: 48px 24px">
+              <p style="margin: 0;">The target fields are colored according to the conditions.</p>
+              <p>Are you sure to save your settings?</p>
+              <div>`,
+  footer: divEl
+});
+```
+
+MultiChoice コンポーネントの選択肢として表示するフィールド名を取得するため、
+以下のような関数を呼び出しています。<br/>
+items プロパティのデータ構造が、label と value をキーとするオブジェクトからなる配列なので関数で返却する値も、それに対応する形にしているのがポイントです。<br/>
+非同期処理になっているため、呼び出し方にはご注意ください。
+
+```javascript
+// Get field info of tha app
+function getFields() {
+  const param = { app: kintone.app.getId() };
+  return kintone
+    .api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'GET', param)
+    .then(resp => {
+      const fieldItems = [];
+      for (const key in resp.properties) {
+        if (!Object.properties.hasOwnProperty.call(resp, key)) {
+          continue;
+        }
+        const prop = resp.properties[key];
+        const label = prop.label;
+        const code = prop.code;
+
+        switch (prop.type) {
+          case 'SINGLE_LINE_TEXT':
+          case 'NUMBER':
+          case 'CALC':
+          case 'RADIO_BUTTON':
+          case 'DROP_DOWN':
+          case 'RECORD_NUMBER':
+          case 'MULTI_LINE_TEXT':
+          case 'CHECK_BOX':
+          case 'MULTI_SELECT':
+          case 'DATE':
+          case 'DATETIME':
+          case 'CREATED_TIME':
+          case 'UPDATED_TIME':
+            fieldItems.push({ label: label, value: code });
+            break;
+
+          default:
+            break;
+        }
+      }
+      return fieldItems;
+    });
+}
+```
+
+---
+### 前回保存時の値表示
+---
+
+プラグイン設定画面を開いたとき、プラグインの設定値を取得し、
+前回保存したときの値があればそれらを表示するようにします。
+
+```javascript
+// Display the value when saved last time
+const config = kintone.plugin.app.getConfig(PLUGIN_ID);
+if (Object.keys(config).length) {
+  datePicker.value = config.date;
+  dropdown.value = config.condition;
+  multiChoice.value = JSON.parse(config.targetFields);
+}
+```
+
+---
+### コンポーネントの配置
+---
+
+コンポーネントを配置する場所の要素を config.html 内の id を使って取得し、
+そこに各コンポーネントの要素を追加していきます。
+
+```javascript
+// Display components
+const dateSpaceEl = document.getElementById('date_space');
+dateSpaceEl.appendChild(datePicker);
+const dropdownSpaceEl = document.getElementById('dropdown_space');
+dropdownSpaceEl.appendChild(dropdown);
+const multiChoiceSpaceEl = document.getElementById('multichoice_space');
+multiChoiceSpaceEl.appendChild(multiChoice);
+const buttonSpaceEl = document.getElementById('button_space');
+buttonSpaceEl.appendChild(cancelButton);
+buttonSpaceEl.appendChild(saveButton);
+```
+
+---
+### ボタンクリック時の挙動
+---
+
+保存ボタンを押した時に、必須項目のチェックをしています。<br/>
+ひとつでも未入力の項目があるとエラーラベルを表示します。<br/>
+設定項目に問題がない場合は、確認ダイアログを表示します。
+
+```javascript
+// When the Save button is clicked
+saveButton.addEventListener('click', event => {
+  // Reset error messages
+  datePicker.error = '';
+  dropdown.error = '';
+  multiChoice.error = '';
+  // Check required itmes
+  let requiredFlag = false;
+  if (!datePicker.value) {
+    datePicker.error = 'Please enter';
+    requiredFlag = true;
+  }
+  if (dropdown.value === '-----') {
+    dropdown.error = 'Please select';
+    requiredFlag = true;
+  }
+  if (!multiChoice.value.length) {
+    multiChoice.error = 'Please select';
+    requiredFlag = true;
+  }
+  if (requiredFlag) return;
+  dialog.open();
+  divEl.appendChild(dialogCancelButton);
+  divEl.appendChild(dialogOKButton);
+});
+// When the Cancel button is clicked
+cancelButton.addEventListener('click', event => {
+  history.back();
+});
+```
+
+---
+### ダイアログ内のボタンクリック時の挙動
+---
+
+意図しない設定の保存を避けるため、保存ボタンクリックの後に確認ダイアログを挟みます。<br/>
+
+![Confirmation](/img/dialog.png)
+
+OK ボタンを押すと、プラグインに設定値として持たせたい情報をオブジェクトに格納し、プラグインに保存します。
+
+```javascript
+// When the OK button in Dialog is clicked
+dialogOKButton.addEventListener('click', event => {
+  const selectedFields = JSON.stringify(multiChoice.value);
+  const date = datePicker.value;
+  const condition = dropdown.value;
+
+  const newConfig = {
+    date: date,
+    condition: condition,
+    targetFields: selectedFields
+  };
+  kintone.plugin.app.setConfig(newConfig);
+});
+
+// When the Cancel button in Dialog is clicked
+dialogCancelButton.addEventListener('click', event => {
+  dialog.close();
+});
+```
+
+JavaScript の実装が完了したら、以下のような CSS ファイル（config.css）を css フォルダに配置します。<br/>
+
+***config.css***
+
+```css
+#kuc_cancel_button {
+  margin-right: 16px;
+}
+#kuc_dialog_footer {
+  text-align: center;
+}
+#kuc_dialog_cancel_button {
+  margin-right: 16px;
+}
+```
+
+## JavaScript/CSS カスタマイズ（アプリ画面）
+
+アプリ画面の実装コードを解説します。<br/>
+以下のようなJavaScript ファイル（desktop.js）を js フォルダに配置します。<br/>
+プラグイン設定画面のコンポーネントから値を引き継いで、アプリのカスタマイズで利用しているのがポイントです。<br/>
+DatePicker コンポーネントの value が yyyy-mm-dd 形式のため、
+比較しやすいように本日の日付も yyyy-mm-dd 形式で取得しています。<br/>
+今回は luxon.js という外部の日付ライブラリを利用しています。
+
+***desktop.js***
+
+```javascript
+(PLUGIN_ID => {
+  kintone.events.on('app.record.detail.show', event => {
+    const CONFIG = kintone.plugin.app.getConfig(PLUGIN_ID);
+    // Get today's date with yyyy-mm-dd
+    const currentDate = luxon.DateTime.local().toISODate();
+    const referenceDate = CONFIG.date;
+    const condition = CONFIG.condition;
+    const targetFields = JSON.parse(CONFIG.targetFields);
+    const fieldColor = '#e74c3c';
+    let isBefore = false;
+    if (currentDate < referenceDate) {
+      isBefore = true;
+    }
+    // Change the fields' color to red depending on the conditions set in the plug-in
+    if (
+      (isBefore && condition === 'before') ||
+      (!isBefore && condition === 'after')
+    ) {
+      targetFields.forEach(targetField => {
+        const fieldElement = kintone.app.record.getFieldElement(targetField);
+        if (!fieldElement) return;
+        fieldElement.style.backgroundColor = fieldColor;
+      });
+    }
+  });
+})(kintone.$PLUGIN_ID);
+```
+
+## おわりに
+
+今回は、簡易的なプラグインの実装例をご紹介しました。<br/>
+カスタマイズ次第で、より細かい条件分けができるようになったり一覧画面にも条件書式設定を適用できるようになったりしますので、実際の運用に合わせてお試しください。<br/>
+
+:::info
+本記事は、 2022 年 8 月時点の kintone と Google Chrome で確認したものになります。<br/>
+また、カスタマイズに使用した kintone UI Component のバージョンは、v1.4.0 です。
+:::
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/in-office-day-list-customization.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/in-office-day-list-customization.md
new file mode 100644
index 0000000000..fa9c53f033
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/in-office-day-list-customization.md
@@ -0,0 +1,316 @@
+---
+id: in-office-day-list-customization
+title: In-office day list customization
+sidebar_label: In-office day list customization
+---
+
+## 概要
+
+今回は FieldGroup と Tooltip コンポーネントの活用とカスタマイズ方法について、In-Office Day List（出社日リスト）を題材に説明します。<br/>
+このカスタマイズでは、FieldGroup 内に配置した Table コンポーネントでチームメンバーの出社日を確認できるリストを作成します。<br/>
+
+以下のシナリオを想定しています。
+
+1. FieldGroup と Tooltip の基本的な使い方
+2. FieldGroup content に Table コンポーネントを追加する
+3. 2種類の Tooltip を利用する
+
+### 使用するコンポーネント
+
+- [Dropdown](../components/desktop/dropdown.md)
+- [FieldGroup](../components/desktop/field-group.md)
+- [MultiChoice](../components/desktop/multichoice.md)
+- [Table](../components/desktop/table.md)
+- [Text](../components/desktop/text.md)
+- [Tooltip](../components/desktop/tooltip.md)
+
+## 事前準備
+
+以下のフィールドを含むアプリを作成します。
+
+- スペースフィールド（要素 ID：space）
+
+## JavaScript/CSS カスタマイズ
+
+kintone UI Component の UMD ファイルをアプリに読み込んだ上で、以下のような実装をした JavaScript ファイルをアップロードします。<br/>
+ファイルのアップロード方法などは、 [Quick Start](../getting-started/quick-start.md) をご覧ください。
+
+### FieldGroup と Tooltip の基本的な使い方
+
+#### FieldGroup 内で Tooltip を利用する
+
+"KUC team" というラベルの FieldGroup を作成し、Text コンポーネントを追加します。
+
+```javascript
+const fieldGroup = new Kuc.FieldGroup({
+  label: "KUC team",
+  content: new Kuc.Text({ text: "This is a FieldGroup" }),
+});
+```
+
+FieldGroup に "Office day info" と表示する Tooltip を追加します。
+
+```javascript
+const tooltip = new Kuc.Tooltip({
+  title: "Office day info",
+  content: fieldGroup,
+});
+```
+
+#### UI 上の表示
+
+![render](/img/tooltip_field-group.gif)
+
+### FieldGroup に Table コンポーネントを追加する
+
+kintone の標準機能では FieldGroup 内にテーブルを持つことはできませんが、kintone UI Component を使うことで FieldGroup を開いた際にテーブルを表示することができます。
+
+#### HTML Button に Tooltip を追加
+
+HTML ボタンに Tooltip コンポーネントを追加し、"Submit changes or additions for this entry." (この入力の変更または追加を送信してください) というメッセージを出します。
+
+```javascript
+const button = document.createElement("button");
+button.textContent = "Submit";
+
+const tooltipForButton = new Kuc.Tooltip({
+  title: "Submit changes or additions for this entry.",
+  container: button,
+  describeChild: true,
+  placement: "bottom",
+});
+```
+
+#### Table に Dropdown, Text, MultiChoice のコンポーネントと Tooltip が追加されたボタンを配置
+
+名前（"Name"）、出社日（"In office day"）、ロケーション（"Location"）、メモ（"Note"）などの情報が入ったテーブルを作成し、Tooltip を追加したボタンも配置します。
+
+```javascript
+const renderName = (cellData) => {
+  const input = document.createElement("input");
+  input.type = "text";
+  input.value = cellData;
+  input.style.cssText = `
+        border: 1px solid #e3e7e8;
+        color: #333333;
+        font-size: 14px;
+        white-space: nowrap;
+        height: 40px;
+        padding: 0 8px;
+        width: 177px;
+        box-sizing: border-box;
+        box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;
+      `;
+  input.addEventListener("focus", () => {
+    input.style.border = "1px solid #3498db";
+  });
+  input.addEventListener("blur", () => {
+    input.style.border = "1px solid #e3e7e8";
+  });
+  return input;
+};
+
+const renderDay = (cellData) => {
+  return new Kuc.MultiChoice({
+    items: [
+      {
+        label: "Monday",
+        value: "1",
+      },
+      {
+        label: "Tuesday",
+        value: "2",
+      },
+      {
+        label: "Wednesday",
+        value: "3",
+      },
+      {
+        label: "Thursday",
+        value: "4",
+      },
+      {
+        label: "Friday",
+        value: "5",
+      },
+    ],
+    value: cellData,
+  });
+};
+
+const renderLocation = (cellData) => {
+  return new Kuc.Dropdown({
+    items: [
+      {
+        label: "-----",
+        value: "-",
+      },
+      {
+        label: "Tokyo",
+        value: "Tokyo",
+      },
+      {
+        label: "Vietnam",
+        value: "Vietnam",
+      },
+      {
+        label: "Shanghai",
+        value: "Shanghai",
+      },
+    ],
+    value: cellData,
+  });
+};
+
+const renderNote = (cellData) => {
+  return new Kuc.Text({
+    value: cellData,
+  });
+};
+
+const renderAction = (cellData) => {
+  const button = document.createElement("button");
+  const tooltipForButton = new Kuc.Tooltip({
+    title: "Submit changes or additions for this entry.",
+    container: button,
+    describeChild: true,
+    placement: "bottom",
+  });
+  return tooltipForButton;
+};
+
+const kucTeamTable = new Kuc.Table({
+  label: "team info",
+  columns: [
+    {
+      title: "Name",
+      field: "name",
+      render: renderName,
+    },
+    {
+      title: "In office day",
+      field: "day",
+      render: renderDay,
+    },
+    {
+      title: "Location",
+      field: "location",
+      render: renderLocation,
+    },
+    {
+      title: "Note",
+      field: "note",
+      render: renderNote,
+    },
+    {
+      title: "Action",
+      field: "action",
+      render: renderAction,
+    },
+  ],
+  data: [
+    {
+      name: "",
+      day: [],
+      location: "-",
+      note: "",
+    },
+  ],
+});
+```
+
+#### FieldGroup に Table コンポーネントを追加
+
+"KUC team" というラベルの FieldGroup を作成し、Table コンポーネントを追加します。
+
+```javascript
+const kucTeamFieldGroup = new Kuc.FieldGroup({
+  label: "KUC team",
+  content: kucTeamTable,
+});
+```
+
+#### FieldGroup に Tooltip を追加
+
+FieldGroup に Tooltip を追加します。
+
+```javascript
+const kucTeamTooltip = new Kuc.Tooltip({
+  title: "Office day info",
+  container: kucTeamFieldGroup,
+});
+```
+
+#### FieldGroup にイベントリスナーを追加
+
+FieldGroup の開閉で Tooltip のメッセージを変えるため、FieldGroup にイベントリスナーを追加します。
+
+```javascript
+kucTeamFieldGroup.addEventListener("change", (e) => {
+  if (e.detail.expanded) {
+    kucTeamFieldGroup.title = "";
+  } else {
+    kucTeamFieldGroup.title = "Office day info";
+  }
+});
+```
+
+#### UI 上の表示
+
+![render](/img/tooltip_fieldgroup_customize.gif)
+
+### Tooltip の２種類のユースケース
+
+ここでは [describeChild](../components/desktop/tooltip.md#property) というプロパティを紹介します。
+このプロパティはデフォルトでは false に設定されています。<br/>
+describeChild プロパティの使い方を理解することで、アプリケーションのアクセシビリティとユーザビリティを効果的に向上させることができます。<br/>
+[スクリーンリーダー](https://developer.mozilla.org/ja/docs/Glossary/Screen_reader) を有効にして、フォーカスを動かしてスクリーンリーダーの読み取りを確認してみましょう。<br/>
+
+#### Tooltip が要素の説明を表す場合
+
+Tooltip が要素の説明を表す（要素についての追加情報や補足説明を提供する）場合は、describeChild を true に設定します。
+
+```javascript
+const tooltipForButton = new Kuc.Tooltip({
+  title: "Submit changes or additions for this entry.",
+  container: button,
+  describeChild: true,
+  placement: "bottom",
+});
+```
+
+![render](/img/tooltip_describeChild_true.gif)
+
+この例では、describeChild が true の場合、ボタンがフォーカスを得たときにスクリーンリーダーはまずボタン自体のコンテンツ "Submit" を読み、続けて Tooltip のタイトル "Submit changes or additions for this entry." を読み取ります。
+これは describeChild が true にされている場合、Tooltip は [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) を子要素（ボタン）に追加し、スクリーンリーダーはまず元のコンテンツを読み、そして [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) のコンテンツを読み取るからです。
+
+#### Tooltip が要素自体の目的を表す場合
+
+Tooltip が要素自体の目的を表す（要素のラベルを提供する）場合は、describeChild を false に設定します。<br/>
+例を見てみましょう。<br/>
+この例では、input タグをテーブルの Name フィールドに設定していますが、input タグはスクリーンリーダーで "Name" という単語を読み取ることができません。しかし Tooltip を使うことでこの問題を解決することができます。<br/>
+input コンポーネントに Tooltip を追加、Tooltip のタイトルを "Name" に設定、describeChild を false に設定して、スクリーンリーダーが何を読み取るかを確認します。<br/>
+
+```javascript
+const renderName = cellData => {
+  const input = document.createElement('input');
+  ...
+  const tooltipForInput = new Kuc.Tooltip({
+    title: 'Name',
+    container: input,
+    describeChild: false,
+    placement: 'bottom'
+  });
+  return tooltipForInput;
+};
+```
+
+![render](/img/tooltip_describeChild_false.gif)
+
+今回 describeChild を false に設定すると、input にフォーカスが当たったときにスクリーンリーダーは Tooltip のタイトル "Name" の内容を読み取ります。<br/>
+これは describeChild が false の場合、Tooltip は [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) を子要素 (input, FieldGroup) に追加し、スクリーンリーダーは [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) の内容を読み取るからです。<br/>
+
+:::info
+本記事は、 2024 年 2 月時点の kintone と Google Chrome で確認したものになります。<br/>
+また、カスタマイズに使用した kintone UI Component のバージョンは、v1.16.0 です。
+:::
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/mobile-timecard-customization.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/mobile-timecard-customization.md
new file mode 100644
index 0000000000..4fe3123b95
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/mobile-timecard-customization.md
@@ -0,0 +1,196 @@
+---
+id: mobile-timecard-customization
+title: Mobile timecard customization
+sidebar_label: Mobile timecard customization
+---
+
+## 概要
+
+出勤と退勤の時間を記録するモバイル版タイムカードの作り方を kintone UI Component の MobileButton コンポーネント と MobileNotification コンポーネントを使って説明します。
+
+## 完成イメージ
+
+以下が、画面の完成イメージです。
+
+![タイムカード](/img/timecard.png)<br/>
+![打刻メッセージ](/img/timecard_notification.png)
+
+## JavaScript/CSS カスタマイズ
+
+kintone UI Component の UMD ファイルをアプリに読み込んだ上で、以下のような実装をした JavaScript ファイルをアップロードします。<br/>
+ファイルのアップロード方法などは、[Quick Start](../getting-started/quick-start.md) をご覧ください。
+
+### 出勤（Punch-in）と退勤（Punch-out）のボタンを表示
+
+出勤と退勤のボタンを表示するために、MobileButton コンポーネントを使います。
+
+```javascript
+kintone.events.on('mobile.app.record.index.show', event => {
+  // Prevent button duplication bug
+  if (
+    document.getElementById('kuc_punch_in_button') ||
+    document.getElementById('kuc_punch_out_button')
+  ) {
+    return event;
+  }
+
+  const app = kintone.mobile.app.getId();
+
+  // Display MobileButtons
+  const header = kintone.mobile.app.getHeaderSpaceElement();
+  const punchInButton = new Kuc.MobileButton({
+    text: 'Punch-in',
+    type: 'submit',
+    id: 'kuc_punch_in_button'
+  });
+  const punchOutButton = new Kuc.MobileButton({
+    text: 'Punch-out',
+    type: 'normal',
+    id: 'kuc_punch_out_button'
+  });
+  header.appendChild(punchInButton);
+  header.appendChild(punchOutButton);
+```
+
+### CSS を使ったボタンの間隔の調整
+
+MobileButton コンポーネントの `id` プロパティに値を付与して、CSS でボタンの間隔を調整します。
+
+```css
+@charset "UTF-8";
+#kuc_punch_in_button {
+  margin: 5px 5px 5px 5px;
+}
+#kuc_punch_out_button {
+  margin: 5px 0px 5px 0px;
+}
+```
+
+### 打刻する時刻の作成
+
+出勤ボタンと退勤ボタンをクリックしたときに、次の関数を実行して現在時刻を取得します。<br/>
+時刻フィールドの形式 (HH:MM) の値を作成します。
+
+```javascript
+// Create time stamp
+const getTime = () => {
+  const time = new Date();
+  const formatedTime = time.getHours() + ':' + time.getMinutes();
+  return formatedTime;
+};
+```
+
+### 打刻した後のリロード処理
+
+タイムカードの打刻が終わったあと、画面を更新する処理を行っています。
+
+```javascript
+// Reload function
+const reload = waitSeconds => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(document.location.reload());
+    }, waitSeconds * 1000);
+  });
+};
+```
+
+### 出勤ボタンクリック時の処理
+
+MobileButton コンポーネントは、click イベントを指定することができます。<br/>
+出勤ボタンをクリックしたときに、以下のような処理を入れています。
+
+- 当日のログインユーザーのレコード有無の判定
+- レコードがある場合のメッセージ表示
+
+```javascript
+// Process of punchInButton
+punchInButton.addEventListener('click', async () => {
+  try {
+    // Check for records on the day
+    const getParams = {
+      app,
+      query:
+        'date = TODAY() and creator in (LOGINUSER()) order by $id desc limit 1 offset 0'
+    };
+    const resp = await kintone.api(
+      kintone.api.url('/k/v1/records', true),
+      'GET',
+      getParams
+    );
+
+    // Display the message if there are any records on the day
+    if (resp.records.length) {
+      const info = new Kuc.MobileNotification({
+        text: 'You have already punched-in!'
+      });
+      info.open();
+      return;
+    }
+```
+
+レコードの有無をチェックしたあと、以下のような処理を入れています。
+
+- レコードがない場合、出勤時間を打刻
+- 出勤時刻の打刻が完了したときのメッセージ表示
+
+```javascript
+// If there is no record on the day, punch-in
+if (!resp.records.length) {
+  const postParams = {
+    app,
+    record: {
+      start: {
+        value: getTime()
+      }
+    }
+  };
+  await kintone.api(
+    kintone.api.url('/k/v1/record', true),
+    'POST',
+    postParams
+  );
+
+  // Display the message when punch-in
+  const info = new Kuc.MobileNotification({
+    text: 'Registered a punch-in time!'
+  });
+  info.open();
+  await reload(5);
+}
+```
+
+### 退勤ボタンクリック時の処理
+
+退勤ボタンをクリックしたときも、出勤ボタンをクリックしたときと同じように、次の処理を行なっています。
+
+- 当日のログインユーザーのレコード有無の判定
+- レコードがない場合のメッセージ表示
+- レコードがある場合、退勤時間を打刻
+- 退勤時刻の打刻が完了したときのメッセージ表示
+
+※ 出勤時の処理と類似している部分が多いので、コードは省略します。<br/>
+※ エラーメッセージの表示も同様の処理を行います。
+
+### エラーメッセージの表示
+
+処理中にエラーが発生した場合、MobileNotification コンポーネントを使って、メッセージを表示しています。
+
+```javascript
+} catch (error) {
+  console.log(error);
+  let errmsg = 'An error occurred.';
+  if (error.message) {
+    errmsg += ' ' + error.message;
+  }
+  const alert = new Kuc.MobileNotification({
+    text: errmsg
+  });
+  alert.open();
+}
+```
+
+:::info
+本記事は、 2021 年 8 月時点の kintone と Google Chrome で確認したものになります。<br/>
+また、カスタマイズに使用した kintone UI Component のバージョンは、v1.0.5 です。
+:::
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/search-box-customization-with-typescript.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/search-box-customization-with-typescript.md
new file mode 100644
index 0000000000..3d696060c8
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/search-box-customization-with-typescript.md
@@ -0,0 +1,194 @@
+---
+id: search-box-customization-with-typescript
+title: Search box customization with TypeScript
+sidebar_label: Search box customization with TypeScript
+---
+
+## 概要
+
+[以前紹介した検索ボックスの作り方](../guides/search-box-customization.md)を kintone UI Component の Dialog コンポーネントを使い TypeScript で実装する方法を説明します。
+
+## 使用するコンポーネント
+
+- [Button](../components/desktop/button.md)
+- [Dialog](../components/desktop/dialog.md)
+- [ReadOnlyTable](../components/desktop/readonly-table.md)
+- [Text](../components/desktop/text.md)
+
+## 完成イメージ
+
+検索ボックスと検索結果ダイアログの完成イメージは、次の通りです。
+
+#### 検索ボックス
+
+![検索ボックス](/img/search_box_ts.png)
+
+#### 検索結果ダイアログ
+
+![検索結果ダイアログ](/img/search_result_dialog_ts.png)
+
+## TypeScript 環境の構築と実装
+
+TypeScript の開発環境の構築方法は、[Usage with TypeScript](../getting-started/usage-with-typescript.md) をご覧ください。
+
+### 検索ボックスの表示
+
+検索ボックスを表示するために、Text コンポーネントと Button コンポーネントを使います。<br/>
+各コンポーネントと各コンポーネントの型定義情報をインポートします。
+
+```typescript title="main.ts"
+import { Button, Text, TextProps, ButtonProps } from "kintone-ui-component";
+```
+
+各コンポーネントの変数に、各コンポーネントの型定義情報を使用します。
+
+```typescript title="main.ts"
+const header = kintone.app.getHeaderMenuSpaceElement();
+if (!header) return;
+
+// Prevent duplication bug with ID granted by property
+if (document.getElementById('kuc-searchbox-text') !== null) {
+  return;
+}
+
+const textProps: TextProps = {
+  id: 'kuc-searchbox-text',
+  placeholder: 'Search for products'
+};
+
+const buttonProps: ButtonProps = {
+  text: 'Search',
+  id: 'kuc-searchbox-button',
+  type: 'submit'
+};
+
+const text = new Text(textProps);
+const button = new Button(buttonProps);
+header.appendChild(text);
+header.appendChild(button);
+```
+
+ButtonProps や TextProps にマウスをホバーすると、プロパティを参照することができます。
+
+![Button props](/img/button_props.png)
+
+### 検索結果ダイアログの表示
+
+[以前の検索ボックスの作り方](../guides/search-box-customization.md)では、検索結果を表示するために、
+kintone アプリの絞り込み機能の URL にクエリ文字列を埋め込んでいます。<br/>
+具体的な箇所は次のコードの `'&q=f6054049%20like%20"'` の部分です。<br/>
+この方法は推奨されない実装方法なので、今回は Dialog コンポーネントと ReadOnlyTable コンポーネントを使って検索結果を表示します。
+
+```javascript
+kintone
+  .api(kintone.api.url('/k/v1/records', true), 'GET', params)
+  .then(resp => {
+    if (resp.records.length !== 0) {
+      // Process of displaying record retrieval result
+      const url = '?view=' + id + '&q=f6054049%20like%20"' + keyword + '"';
+      window.location.replace(url);
+    }
+```
+
+まず、Dialog コンポーネントと型定義情報をインポートします。<br/>
+今回の実装では、kintone のイベント処理を発火させる main.ts にて様々な処理を実行しています。
+
+検索結果ダイアログは、createDialogWithTable.ts ファイルで表示しています。<br/>
+Dialog コンポーネントの変数に、Dialog コンポーネントの型定義情報を使用します。
+
+```typescript title="createDialogWithTable.ts"
+import { Dialog, DialogProps, ReadOnlyTable } from 'kintone-ui-component';
+
+export const createDialogWithTable = (resultTable: ReadOnlyTable) => {
+  const dialogProps: DialogProps = {
+    title: 'Search Result',
+    content: resultTable
+  };
+  const result = new Dialog(dialogProps);
+  result.open();
+};
+```
+
+resultTable は、api.ts ファイルで kintone REST API Client を実行した結果を、main.ts ファイルで処理して、createReadOnlyTable.ts ファイルに渡します。
+
+```typescript title="api.ts"
+export const getAllRecords = (keyword: string, appId: number) => {
+  const client = new KintoneRestAPIClient();
+  const body = {
+    app: appId,
+    condition: `product like "${keyword}" or price like "${keyword}"`
+  };
+  return client.record.getAllRecords<MyAppRecord>(body);
+};
+```
+
+```typescript title="main.ts"
+// API request
+const apiResult = await getAllRecords(keyword, appId);
+
+// Pick up the necessary information from the API result
+const records = apiResult.map(record => {
+  return {
+    // url creation
+    $id: `<a href=/k/${appId}/show#record=${record.$id.value}>${record.$id.value}</a>`,
+    product: record.product.value,
+    price: record.price.value
+  };
+});
+```
+
+```typescript title="createReadOnlyTable.ts"
+export const createReadOnlyTable = (records: Record[]) => {
+  const initialTableData: ReadOnlyTableProps = {
+    columns: [
+      {
+        title: 'ID',
+        field: '$id'
+      },
+      {
+        title: 'Product',
+        field: 'product'
+      },
+      {
+        title: 'Price',
+        field: 'price'
+      }
+    ],
+    data: records,
+    id: 'kuc-searchbox-readonly-table',
+    visible: true,
+    pagination: true,
+    rowsPerPage: 5
+  };
+
+  const table = new ReadOnlyTable(initialTableData);
+  return table;
+};
+```
+
+### 検索ボックスと検索結果ダイアログのスタイル調整
+
+kintone UI Component は、[Custom CSS](../getting-started/custom-css.md) の機能を提供しています。各コンポーネントの Custom CSS のプロパティを指定することで、コンポーネントの幅や高さなどを DOM操作することなく安全に変更することできます。
+
+今回は、Dialog コンポーネントと Text コンポーネントの CSS を調整します。
+
+```css
+#kuc-searchbox-readonly-table {
+  --kuc-readonly-table-header-0-width: 40px;
+  --kuc-readonly-table-header-1-width: 160px;
+  --kuc-readonly-table-header-2-width: 80px;
+}
+
+#kuc-searchbox-text {
+  --kuc-text-input-height: 48px;
+}
+```
+
+## 終わりに
+
+いかがでしたでしょうか。kintone UI Component の TypeScript での実装方法、Dialog コンポーネントや Custom CSS の使い方を紹介しました。この Guides が参考になれば幸いです。
+
+:::info
+本記事は、 2024 年 2 月時点の kintone と Google Chrome で確認したものになります。<br/>
+また、カスタマイズに使用した kintone UI Component のバージョンは、v1.16.0 です。
+:::
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/search-box-customization.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/search-box-customization.md
new file mode 100644
index 0000000000..e7e802dfd6
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/search-box-customization.md
@@ -0,0 +1,151 @@
+---
+id: search-box-customization
+title: Search box customization
+sidebar_label: Search box customization
+---
+
+## 概要
+検索ボックスの作り方を kintone UI Component の Text コンポーネントと Button コンポーネント、Notification コンポーネントを使って説明します。
+
+## 完成イメージ
+検索ボックスの完成イメージは、次の通りです。
+
+#### デスクトップ版
+![検索ボックス(デスクトップ)](/img/desktop_search_box.png)
+
+#### モバイル版
+![検索ボックス(モバイル)](/img/mobile_search_box.png)
+
+## JavaScript/CSS カスタマイズ
+
+kintone UI Component の UMD ファイルをアプリに読み込んだ上で、以下のような実装をした JavaScript ファイルをアップロードします。<br/>
+ファイルのアップロード方法などは、 [Quick Start](../getting-started/quick-start.md) をご覧ください。
+
+### 検索ボックスの表示
+
+検索ボックスを表示するために、Text コンポーネントと Button コンポーネントを使います。<br/>
+Text コンポーネントの placeholder プロパティを使うと、入力内容を説明することができます。<br/>
+モバイル対応をしたい場合は、モバイル用のコンポーネント MobileButton を呼び出すと同じように実装できます。
+
+```javascript
+const header = kintone.app.getHeaderMenuSpaceElement();
+
+// Show entry field and button in the search box
+const text = new Kuc.Text({
+  placeholder: 'Enter keywords',
+  id: 'kuc_text'
+});
+
+const button = new Kuc.Button({
+  type: 'submit',
+  text: 'Search',
+  id: 'kuc_button'
+});
+header.appendChild(text);
+header.appendChild(button);
+```
+
+### 検索文字のチェック
+
+Button コンポーネントは、click イベントを指定することができます。<br/>
+ここでは以下のような処理を入れています。
+
+- ボタンをクリックした時に、入力値があるか判定
+- 入力値がない場合、error プロパティにエラーメッセージを代入して表示
+- error プロパティに空文字を代入して、表示メッセージを初期化
+
+```javascript
+const button = new Kuc.Button({
+  type: 'submit',
+  text: 'Search',
+  id: 'kuc_button'
+});
+
+// Add the process of click event to the displayed button
+button.addEventListener('click', event => {
+  const keyword = text.value;
+  const errorMessage = 'Please enter a value.';
+  // Hide the error message
+  text.error = '';
+
+  // Check if there is a value
+  if (!keyword) {
+    // Show the error message
+    text.error = errorMessage;
+    return;
+  }
+});
+```
+
+### コンポーネントの増殖バグ対策
+
+id プロパティを付与して、既にコンポーネントが表示されているかどうかを判定し、増殖バグを防ぐ対応をしています。
+
+```javascript
+// Prevent duplication bug with ID granted by property
+if (document.getElementById('kuc_text') !== null) {
+  return event;
+}
+
+const header = kintone.app.getHeaderMenuSpaceElement();
+const text = new Kuc.Text({
+  placeholder: 'Enter keywords',
+  id: 'kuc_text' // Add ID
+});
+```
+
+### 実行結果を Notification で表示
+
+REST API 実行時の成功や失敗のメッセージを Notification コンポーネントを使って表示します。<br/>
+Notification の呼び出しには open メソッド、背景色の設定には type プロパティを使っています。<br/>
+今回は、以下のケースで表示するように実装しています。
+
+- レコードの結果がない場合
+- REST API の実行が失敗した場合
+
+```javascript
+const app = kintone.app.getId();
+const params = {
+  app: app,
+  query: 'text like "' + keyword + '"'
+};
+
+kintone
+  .api(kintone.api.url('/k/v1/records', true), 'GET', params)
+  .then(resp => {
+    if (resp.records.length !== 0) {
+      // Process of displaying record retrieval result
+      const url = '?view=' + id + '&q=f6054049%20like%20"' + keyword + '"';
+      window.location.replace(url);
+    } else if (resp.records.length === 0) {
+      // Process when no record is found
+      const info = new Kuc.Notification({
+        text: 'No records',
+        type: 'info' // Blue background color is set
+      });
+      info.open(); // Show info
+    }
+  })
+  .catch(error => {
+    // Process when REST API error occurs
+    let errmsg = 'An error occurred while retrieving the record.';
+    if (error.message !== undefined) {
+      errmsg += ' ' + error.message;
+    }
+    const alert = new Kuc.Notification({
+      text: errmsg
+      // If the type property is not specified, red background color is set
+    });
+    alert.open(); // Show alert
+  });
+```
+
+## おわりに
+
+いかがでしたでしょうか。kintone UI Component を使って、検索ボックスの作り方を紹介しました。<br/>
+kintone UI Component を使って、便利に kintone カスタマイズを開発していただければ幸いです。
+
+:::info
+本記事は、 2021 年 2 月時点の kintone と Google Chrome で確認したものになります。<br/>
+また、カスタマイズに使用した kintone UI Component のバージョンは、v1.0.0 です。
+:::
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/table-readonly-table-customization.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/table-readonly-table-customization.md
new file mode 100644
index 0000000000..06525ab75c
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/table-readonly-table-customization.md
@@ -0,0 +1,528 @@
+---
+id: table-readonly-table-customization
+title: Table and ReadOnlyTable customization
+sidebar_label: Table and ReadOnlyTable customization
+---
+
+## 概要
+今回は Table と ReadOnlyTable コンポーネントの使い方の違い、活用とカスタマイズ方法について説明します。<br/>
+以下のシナリオを想定しています。
+1. 基本的な使い方 (*Table, ReadOnlyTable*)
+2. 一つのセルに複数のコンポーネント表示 (*Table*)
+3. 依存列 (*Table*)
+4. 入れ子テーブル (*Table*)
+
+## 使用するコンポーネント
+- [Dropdown](../components/desktop/dropdown.md)
+- [Table](../components/desktop/table.md)
+- [Text](../components/desktop/text.md)
+- [ReadOnlyTable](../components/desktop/readonly-table.md)
+- [RadioButton](../components/desktop/radio-button.md)
+
+## Table と ReadOnlyTable の使い方の違い
+基本的に Table と ReadOnlyTable コンポーネントは同じような構造になっています。
+
+ReadOnlyTable コンポーネントは、読み取り専用のテーブルを表示することができます。ユーザーが操作できないプレーンなテキストや HTMLElement を表示することができます。
+
+一方で、Table コンポーネントは、データを変更したり行の追加/削除をしたりとテーブルのセルに表示されるコンポーネントを操作することができます。
+
+最大の違いは、Table の `columns` プロパティが `render` プロパティ（`columns.render`）を持っていることです。このプロパティは、ユーザーが操作できるセルに表示する要素を設定することができます。さらに、`actionButton` プロパティ（`table.actionButton`）を使って行の追加/削除ボタンの表示/非表示を切り替えることができます。
+
+## change イベント の理解
+Table の `change` イベントの流れを理解すると、カスタマイズがしやすくなります。
+:::info
+テーブルのセルは、セルの中のコンポーネントの `change` イベントをリッスンして、新しい値をそれに対応する `field` の値に登録します。
+:::
+
+### アプリの作成
+以下のフィールドを含むアプリを作成します。
+- スペースフィールド（要素ID：space）
+
+### JavaScript/CSS カスタマイズ
+kintone UI Component の UMD ファイルをアプリに読み込んだ上で、以下のような実装をした JavaScript ファイルをアップロードします。<br/>
+ファイルのアップロード方法などは、 [Quick Start](../getting-started/quick-start.md) をご覧ください。
+
+
+### 基本的な Table の準備
+Text コンポーネントで username を表示するような次の設定があるとします。
+
+```javascript
+const renderName = cellData => {
+  const text = new Kuc.Text({ value: cellData });
+  return text;
+};
+
+const columns = [{ title: 'Username', field: 'username', render: renderName }];
+const data = [{ username: 'user1' }, { username: 'user2' }];
+
+const table = new Kuc.Table({ columns, data });
+const space = kintone.app.record.getSpaceElement('space');
+space.appendChild(table);
+```
+
+### UI 上に表示
+![render](/img/table-edit-text.gif)
+
+最初のセルの入力値を編集した場合、Text コンポーネントは `detail.value = 'user1 edited'` を含む `change` イベントをトリガーします。
+そしてテーブルは値を受け取り、`username` field に登録し直します。
+テーブルのデータは以下のようになります。
+
+```javascript
+[{ username: 'user1 edited' }, { username: 'user2' }];
+```
+
+### event detail のカスタマイズ
+テーブルが受け取る値をカスタマイズしたい場合、テーブルがその値を受け取る前に `change` イベント内で編集する必要があります。
+上記のサンプルコードを使って、`renderName` 関数に以下の内容を追加します。
+
+```javascript
+...
+const renderName = cellData => {
+  const text = new Text({ value: cellData });
+
+  // Modify the value before it bubble to table cell
+  text.addEventListener('change', event => {
+    event.detail.value = 'modified value'; // add any value you want set to username;
+  });
+  return text;
+};
+...
+```
+
+最初のセルの入力値を編集した場合、テーブルが受け取る値は必ず `'modified value'` になります。
+
+## カスタマイズ例
+### 基本的な使い方
+
+#### ReadOnlyTable
+![readonly-table](/img/readonly-table.png)
+
+読み取り専用のテーブルを表示します。
+
+<details className="toggle-panel">
+  <summary>Show code</summary>
+
+  ```js
+  const columns = [
+    {
+      title: 'Name',
+      field: 'name'
+    },
+    {
+      title: 'Gender',
+      field: 'gender'
+    },
+    {
+      title: 'Address',
+      field: 'address'
+    }
+  ];
+
+  const data = [
+    {
+      name: 'John Brown',
+      gender: 'male',
+      address: 'osaka-japan'
+    },
+    {
+      name: 'Jim Green',
+      gender: 'female',
+      address: 'tokyo-japan'
+    },
+    {
+      name: 'Joe Black',
+      gender: 'male',
+      address: 'hochiminh-vietnam'
+    }
+  ];
+
+  const readOnlyTable = new Kuc.ReadOnlyTable({ columns, data });
+  const space = kintone.app.record.getSpaceElement('space');
+  space.appendChild(readOnlyTable);
+  ```
+</details>
+
+#### Table
+![table](/img/table.png)
+
+表示されているコンポーネントを操作できるテーブルを表示します。<br/>
+`columns.render` 関数を使って、セルに表示されるコンポーネントを設定します。以下のサンプルコードの `renderGender` と `renderAddress` 関数を確認してください。
+
+<details className="toggle-panel">
+  <summary>Show code</summary>
+
+  ```js
+  // render gender column with dropdown
+  const renderGender = cellData => {
+    const radioButton = new Kuc.RadioButton({
+      items: [
+        {
+          label: 'Male',
+          value: 'male'
+        },
+        {
+          label: 'Female',
+          value: 'female'
+        }
+      ],
+      itemLayout: 'vertical',
+      value: cellData
+    });
+
+    return radioButton;
+  };
+
+  // render address column with dropdown
+  const renderAddress = cellData => {
+    const country = cellData.split('-')[1];
+    const dropdownCountry = new Kuc.Dropdown({
+      items: [
+        {
+          label: 'Viet Nam',
+          value: 'vietnam'
+        },
+        {
+          label: 'Japan',
+          value: 'japan'
+        }
+      ],
+      value: country
+    });
+
+    return dropdownCountry;
+  };
+
+  const columns = [
+    {
+      title: 'Name',
+      field: 'name'
+    },
+    {
+      title: 'Gender',
+      field: 'gender',
+      render: renderGender
+    },
+    {
+      title: 'Address',
+      field: 'address',
+      render: renderAddress
+    }
+  ];
+
+  const data = [
+    {
+      name: 'John Brown',
+      gender: 'male',
+      address: 'osaka-japan'
+    },
+    {
+      name: 'Jim Green',
+      gender: 'female',
+      address: 'tokyo-japan'
+    },
+    {
+      name: 'Joe Black',
+      gender: 'male',
+      address: 'hochiminh-vietnam'
+    }
+  ];
+
+  const table = new Kuc.Table({ columns, data });
+  const space = kintone.app.record.getSpaceElement('space');
+  space.appendChild(table);
+  ```
+</details>
+
+### 一つのセルに複数のコンポーネント表示（Table）
+![multi-components](/img/two-component-in-cell.png)
+
+`columns.render` 関数を使って、一つのセルに複数のコンポーネントを表示します。<br/>
+以下のサンプルコードでは、同じセル内に 2つの Dropdown（city と country）を表示します。
+
+<details className="toggle-panel">
+  <summary>Show code</summary>
+
+  ```js
+  const renderAddress = (cellData, rowData) => {
+    // the format of cellData: 'city-country'
+    const city = cellData.split('-')[0];
+    const country = cellData.split('-')[1];
+
+    const dropdownCity = new Kuc.Dropdown({
+      items: [
+        {
+          label: 'Tokyo',
+          value: 'tokyo'
+        },
+        {
+          label: 'Osaka',
+          value: 'osaka'
+        },
+        {
+          label: 'Ho Chi Minh',
+          value: 'hochiminh'
+        }
+      ],
+      value: city
+    });
+    dropdownCity.addEventListener('change', event => {
+      const _country = rowData.address.split('-')[1];
+      event.detail.value = `${event.detail.value}-${_country}`;
+    });
+
+    const dropdownCountry = new Kuc.Dropdown({
+      items: [
+        {
+          label: 'Viet Nam',
+          value: 'vietnam'
+        },
+        {
+          label: 'Japan',
+          value: 'japan'
+        }
+      ],
+      value: country
+    });
+    dropdownCountry.addEventListener('change', event => {
+      const _city = rowData.address.split('-')[0];
+      event.detail.value = `${_city}-${event.detail.value}`;
+    });
+
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.appendChild(dropdownCountry);
+    container.appendChild(dropdownCity);
+
+    return container;
+  };
+
+  const data = [
+    {
+      name: 'John Brown',
+      gender: 'male',
+      address: 'osaka-japan'
+    },
+    {
+      name: 'Jim Green',
+      gender: 'female',
+      address: 'tokyo-japan'
+    },
+    {
+      name: 'Joe Black',
+      gender: 'male',
+      address: 'hochiminh-vietnam'
+    }
+  ];
+
+  const columns = [
+    {
+      title: 'Name',
+      field: 'name'
+    },
+    {
+      title: 'Address',
+      field: 'address',
+      render: renderAddress
+    }
+  ];
+
+  const table = new Kuc.Table({ columns, data });
+  const space = kintone.app.record.getSpaceElement('space');
+  space.appendChild(table);
+  ```
+</details>
+
+
+### 依存列（Table）
+![dependent-columns](/img/dependent-columns.gif)
+
+依存列を作ります。<br/>
+country Dropdown の値が変更されたら city Dropdown の値が変更されます。
+
+<details className="toggle-panel">
+  <summary>Show code</summary>
+
+  ```js
+  // Each country will have corresponding cities
+  const relatedData = {
+    japan: [
+      { label: 'Tokyo', value: 'tokyo' },
+      { label: 'Osaka', value: 'osaka' }
+    ],
+    vietnam: [
+      { label: 'Ha Noi', value: 'hanoi' },
+      { label: 'Ho Chi Minh', value: 'hochiminh' }
+    ]
+  };
+
+  const renderCity = (cellData, rowData) => {
+    const dropdownCity = new Kuc.Dropdown({
+      items: [
+        {
+          label: 'Tokyo',
+          value: 'tokyo'
+        },
+        {
+          label: 'Ho Chi Minh',
+          value: 'hochiminh'
+        }
+      ],
+      value: cellData
+    });
+
+    // Logic update city when country column changed
+    lastRenderedCountryComponent.addEventListener('change', event => {
+      dropdownCity.items = relatedData[event.detail.value];
+      rowData.city = '';
+    });
+
+    return dropdownCity;
+  };
+
+  let lastRenderedCountryComponent;
+  const renderCountry = cellData => {
+    const dropdownCountry = new Kuc.Dropdown({
+      items: [
+        {
+          label: 'Viet Nam',
+          value: 'vietnam'
+        },
+        {
+          label: 'Japan',
+          value: 'japan'
+        }
+      ],
+      value: cellData
+    });
+    lastRenderedCountryComponent = dropdownCountry;
+    return dropdownCountry;
+  };
+
+  const columns = [
+    {
+      title: 'Country',
+      field: 'country',
+      render: renderCountry
+    },
+    {
+      title: 'City',
+      field: 'city',
+      render: renderCity
+    }
+  ];
+
+  const data = [
+    {
+      country: 'japan',
+      city: 'tokyo'
+    },
+    {
+      country: 'vietnam',
+      city: 'hochiminh'
+    }
+  ];
+
+  const table = new Kuc.Table({ columns, data });
+  const space = kintone.app.record.getSpaceElement('space');
+  space.appendChild(table);
+  ```
+</details>
+
+### 入れ子テーブル（Table）
+![table-in-table](/img/table-in-table.png)
+
+入れ子テーブルを作って各行にさらに詳細な情報を表示します。
+
+<details className="toggle-panel">
+  <summary>Show code</summary>
+
+  ```js
+  const renderCity = cellData => {
+    const dropdown = new Kuc.Dropdown({
+      items: [
+        { label: 'Tokyo', value: 'tokyo' },
+        { label: 'Ho Chi Minh', value: 'hochiminh' }
+      ],
+      value: cellData
+    });
+
+    return dropdown;
+  };
+
+  const renderCountry = cellData => {
+    const renderSubTable = cellDataSubTable => {
+      const dropdown = new Kuc.Dropdown({
+        items: [
+          { label: 'Japan', value: 'japan' },
+          { label: 'Viet Nam', value: 'vietnam' }
+        ],
+        value: cellDataSubTable
+      });
+      return dropdown;
+    };
+
+    const columnsSubTable = [
+      {
+        title: 'Sub Table',
+        field: 'dropdown',
+        render: renderSubTable
+      }
+    ];
+
+    const dataSubTable = [];
+    for (let i = 0; i < cellData.split(',').length; i++) {
+      dataSubTable.push({ dropdown: cellData.split(',')[i] });
+    }
+    const subTable = new Kuc.Table({
+      columns: columnsSubTable,
+      data: dataSubTable
+    });
+
+    subTable.addEventListener('change', subTableEvent => {
+      const _dataSubTable = subTableEvent.detail.data;
+      let countries = '';
+      for (let i = 0; i < _dataSubTable.length; i++) {
+        countries += _dataSubTable[i].dropdown;
+        if (i !== _dataSubTable.length - 1) {
+          countries += ',';
+        }
+      }
+      subTableEvent.detail.value = countries;
+    });
+    return subTable;
+  };
+
+  const columns = [
+    {
+      title: 'Country',
+      field: 'country',
+      render: renderCountry
+    },
+    {
+      title: 'City',
+      field: 'city',
+      render: renderCity
+    }
+  ];
+
+  const data = [
+    {
+      city: 'tokyo',
+      country: 'japan'
+    },
+    {
+      city: 'hochiminh',
+      country: 'vietnam'
+    }
+  ];
+
+  const table = new Kuc.Table({ columns, data });
+  const space = kintone.app.record.getSpaceElement('space');
+  space.appendChild(table);
+  ```
+</details>
+
+:::info
+本記事は、 2023 年 2 月時点の kintone と Google Chrome で確認したものになります。<br/>
+また、カスタマイズに使用した kintone UI Component のバージョンは、v1.9.0 です。
+:::
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/tabs-customization.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/tabs-customization.md
new file mode 100644
index 0000000000..2648beeec9
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/tabs-customization.md
@@ -0,0 +1,216 @@
+---
+id: tabs-customization
+title: Tabs customization
+sidebar_label: Tabs customization
+---
+
+## 概要
+この記事では、Tabs コンポーネントの活用とカスタマイズ方法について説明します。<br/>
+以下のシナリオを想定しています。
+1. Tabs content に KUC コンポーネントを追加する
+2. Tabs content に kintone 標準フィールドを追加する
+
+### 使用するコンポーネント
+- [Tabs](../components/desktop/tabs.md)
+- [ReadOnlyTable](../components/desktop/readonly-table.md)
+
+## 完成イメージ
+
+以下が画面の完成イメージです。
+
+![tabs customize](/img/tabs_customize.gif)
+
+## 事前準備
+
+以下のフィールドを含むアプリを作成します。
+- 2つのスペースフィールド（"space_for_native_kintone" と "space_for_custom_components" という id を持つ）
+- 3つのテーブルフィールド（"sales_record_table", "task_management_table", "sales_order_table" という id を持つ）
+
+## JavaScript/CSS カスタマイズ
+
+kintone UI Component の UMD ファイルをアプリに読み込んだ上で、以下のような実装をした JavaScript ファイルをアップロードします。<br/>
+ファイルのアップロード方法などは、 [Quick Start](../getting-started/quick-start.md) をご覧ください。
+
+### 定数の定義
+
+kintone UI Component のバージョン番号、スペースID、kintone フィールドなど、重要な識別子や値を参照するために定数を使用します。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const SPACE_FOR_NATIVE_KINTONE = 'space_for_native_kintone';
+const SPACE_FOR_CUSTOM_COMPONENTS = 'space_for_custom_components';
+
+const SALES_RECORD_TABLE_ID = 'sales_record_table';
+const TASK_MANAGEMENT_ID = 'task_management_table';
+const SALES_ORDER_ID = 'sales_order_table';
+
+// A set of Kintone fields that need to be shown/hidden on each tab.
+const salesRecordTabFields = [SALES_RECORD_TABLE_ID];
+const taskManagementTabFields = [TASK_MANAGEMENT_ID];
+const salesOrderTabFields = [SALES_ORDER_ID];
+let currentTabFields;
+```
+
+### 共通関数の作成
+
+2つの共通関数を作成します。
+- KUC Tabs を作成する `createContent` 関数。DOM 操作を防ぐために、`isBorderVisible` オプションを作成します。
+`isBorderVisible: false` を設定することで、DOM 操作なしで kintone 標準フィールドを Tabs content に設定することができます。
+- 指定したスペースに Tabs を追加する `addTabsToDom` 関数。
+
+```javascript
+function createTabs(contents, isBorderVisible) {
+  const items = [
+    {
+      label: 'Sales Record',
+      value: 'salesRecordTab',
+      content: contents ? contents[0] : ''
+    },
+    {
+      label: 'Task Management',
+      value: 'taskManagementTab',
+      content: contents ? contents[1] : ''
+    },
+    {
+      label: 'Sales Order',
+      value: 'salesOrderTab',
+      content: contents ? contents[2] : ''
+    }
+  ];
+  const tabs = new Kuc.Tabs({
+    value: 'salesRecordTab',
+    borderVisible: isBorderVisible,
+    items
+  });
+  return tabs;
+}
+
+function addTabsToDOM(tabs, space_id) {
+  const spaceElement = kintone.app.record.getSpaceElement(space_id);
+  spaceElement.appendChild(tabs);
+}
+```
+
+
+### カスタムコンポーネント用の Tabs 作成
+
+Tabs コンポーネントを使って、タブによって異なるカスタムテーブル（kintone UI Component の ReadOnlyTable コンポーネントで作成）を表示します。<br/>
+タブがクリックされると、Tabs コンポーネントは自動的に対応するカスタムテーブルを表示し、残りのテーブルを非表示にします。<br/>
+`createContent` 関数を使って、コンポーネントの配列を受け取り、それらを padding を持つコンテナに追加します。<br/>
+最後に、`createTabs` 関数を呼び出してタブを作成し、`addTabsToDOM()` 関数を呼び出して指定したスペースに Tabs コンポーネントを追加します。
+
+```javascript
+function initCustomComponentTabs() {
+  const salesRecordTable = new Kuc.ReadOnlyTable({
+    label: 'Sales Record',
+    columns: [
+      { title: 'Create Date', field: 'date' },
+      { title: 'Reporter Account', field: 'account' },
+      { title: 'Communication Content', field: 'communication' }
+    ],
+    data: [
+      {
+        date: 'Feb 28, 2023',
+        account: 'Howard',
+        communication:
+        'Discussed the new product launch strategy with the client and received positive feedback.' +
+        'The client agreed to place an order for 500 units of the new product. They also requested a 10% discount on the total order value.'
+      }
+    ]
+  });
+  const salesRecordContent = createContent([salesRecordTable]);
+
+  const taskManagementTable = new Kuc.ReadOnlyTable({
+    label: 'Task Management',
+    columns: [
+      { title: 'Status', field: 'status' },
+      { title: 'Task Executor', field: 'executor' },
+      { title: 'Task Requirements', field: 'requirements' },
+      { title: 'Result Reporting', field: 'reporting' }
+    ],
+    data: [
+      {
+        status: 'In Progress',
+        executor: 'Mike',
+        requirements:
+        'Conduct market research on the latest trends and consumer behavior in the target market.',
+        reporting: 'Report due by March 15th.'
+      }
+    ]
+  });
+  const taskManagementContent = createContent([taskManagementTable]);
+
+  const salesOrderTable = new Kuc.ReadOnlyTable({
+    label: 'Sales Order',
+    columns: [{ title: 'Order Number', field: 'order' }],
+    data: [{ order: '1' }]
+  });
+  const salesOrderContent = createContent([salesOrderTable]);
+
+  const tabs = createTabs(
+    [salesRecordContent, taskManagementContent, salesOrderContent],
+    true
+  );
+  addTabsToDOM(tabs, SPACE_FOR_CUSTOM_COMPONENTS);
+}
+
+function createContent(components) {
+  const content = document.createElement('div');
+  content.style.padding = '16px';
+  components.map(component => content.appendChild(component));
+  return content;
+}
+```
+
+### kintone 標準フィールド用の Tabs 作成
+
+Tabs コンポーネントを使って、タブによって異なる kintone 標準フィールドを表示します。<br/>
+タブがクリックされると、対応する kintone 標準フィールドを表示し、それ以外のフィールドを非表示にします。<br/>
+`setFieldsShown` 関数では、[kintone.app.record.setFieldShown()](https://cybozu.dev/ja/kintone/docs/js-api/record/show-or-hide-a-field/) API を使ってフィールドの表示・非表示を行い、`addTabsChangeEventListener` 関数でクリックイベントを処理しフィールドを更新します。<br/>
+また、`createTabs` 関数を使ってタブを作成しますが、今回は kintone 標準フィールドとの親和性を高めるため、`isBorderVisible: false` を設定します。<br/>
+最後に、`addTabsToDom` 関数を呼び出して、指定されたスペースに Tabs コンポーネントを追加します。
+
+```javascript
+function initNativeKintoneTabs() {
+  setFieldsShown(taskManagementTabFields, false);
+  setFieldsShown(salesOrderTabFields, false);
+  currentTabFields = salesRecordTabFields;
+  const tabs = createTabs(undefined, false);
+  addTabsChangeEventListener(tabs);
+  addTabsToDOM(tabs, SPACE_FOR_NATIVE_KINTONE);
+}
+
+function addTabsChangeEventListener(tabs) {
+  tabs.addEventListener('change', event => {
+    switch (event.detail.value) {
+      case 'salesRecordTab':
+        switchDisplayedFields(salesRecordTabFields);
+        break;
+      case 'taskManagementTab':
+        switchDisplayedFields(taskManagementTabFields);
+        break;
+      case 'salesOrderTab':
+        switchDisplayedFields(salesOrderTabFields);
+        break;
+    }
+  });
+}
+
+function switchDisplayedFields(displayedFields) {
+  setFieldsShown(displayedFields, true);
+  setFieldsShown(currentTabFields, false);
+  currentTabFields = displayedFields;
+}
+
+function setFieldsShown(fields, isShown) {
+  fields.forEach(field => {
+    kintone.app.record.setFieldShown(field, isShown);
+  });
+}
+```
+
+:::info
+本記事は、 2023 年 5 月時点の kintone と Google Chrome で確認したものになります。<br/>
+また、カスタマイズに使用した kintone UI Component のバージョンは、v1.11.0 です。
+:::
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/version-conflicts-issue-solution.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/version-conflicts-issue-solution.md
new file mode 100644
index 0000000000..2d925566d2
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/guides/version-conflicts-issue-solution.md
@@ -0,0 +1,97 @@
+---
+id: version-conflicts-issue-solution
+title: Version conflicts issue and solution
+sidebar_label: Version conflicts issue and solution
+---
+
+## 概要
+
+v1.3.2 以前のリリースバージョンにおいて kintone UI Component（KUC）にはバージョンコンフリクトの問題がありました。<br/>
+この記事ではその問題点と解決策、またどのように KUC のパッケージを v1.4.0 以降の最新版にアップグレードして解決策を適用するのかを解説します。
+
+## バージョンコンフリクト問題
+
+アプリに対して複数の同一バージョンもしくは別バージョンの KUC パッケージを読み込んだ際に、エラーが出力されコンポーネントが正しく表示されないという問題です。この事象は、UMD と ESM どちらの利用方法でも発生していました。<br/>
+KUC では [Web Components](https://developer.mozilla.org/ja/docs/Web/Web_Components) を利用しており、[custom HTML タグ](https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_custom_elements)を定義することでコンポーネントを生成しています。その際に使っている [CustomElementRegistry](https://developer.mozilla.org/ja/docs/Web/API/CustomElementRegistry) がグローバルな window オブジェクトであり、Web Components では既に登録されている custom HTML タグ を再定義することができません。<br/>
+KUC パッケージが custom HTML タグ を登録する際、後から読み込まれたパッケージも同じタグを定義しようとするので、正常に動作しなくなるという問題が起きていました。
+
+![複数のパッケージが同じ custom HTML タグを定義](/img/version-conflict-diagram.jpeg)
+
+## 解決策
+
+既に登録されている custom HTML タグを再定義することはできないので、v1.4.0 からは custom HTML タグにバージョン番号を含める対応を入れました。この変更は、CSS スタイルのコンフリクトを解消するためにクラス名にも適用しています。
+
+![Custom HTML tag の例](/img/version-conflict-html-tag.png)
+ 
+<center>タグとクラス名にバージョン番号を含める</center>
+
+![CSS の例](/img/version-conflict-css.png)
+
+<center>コンポーネントの CSS にもバージョン番号が含まれる</center>
+
+加えて、custom HTML タグを定義する前に既に同じものが登録されているかどうかも判定するようにしました。
+
+## 最新バージョンへのアップデート
+
+各プロジェクト用の KUC を最新バージョンにアップデートして利用することを推奨しています。
+
+### UMD を利用する
+
+v1.4.0 以降のバージョンを利用する場合は、コンポーネントを呼び出す際に Kuc オブジェクトの代わりに Kucs["1.x.x"] を使ってバージョンを指定してください。（ex. `new Kucs["1.4.0"].Button()`）<br/>
+また、レンダリングされたコンポーネントのタグとクラス名にはバージョン番号が含まれます。詳しくは[解決策](#解決策)セクションをご確認ください。
+
+:::tip
+グローバルオブジェクトとして Kuc を使うこともできますが、2つ以上の kuc.min.js を kintone カスタマイズやプラグインに読み込む場合はバージョンコンフリクトが起きる可能性があるのでご注意ください。この際、Kuc オブジェクトは最後に読み込まれた kuc.min.js を参照します。<br/>
+システム上に kuc.min.js が 1つしかない、もしくは最後に読み込まれた kuc.min.js の利用で問題ない場合は、Kuc オブジェクトを利用いただいて問題ありません。`const Kuc = Kucs['1.x.x'];` の行を削除してください。
+:::
+
+v1.3.2 以前のバージョンを利用する場合は、Kuc をグローバルオブジェクトとして使ってください。2つ以上の kuc.min.js を kintone カスタマイズやプラグインに追加すると、バージョンコンフリクト問題が起きるのでご注意ください。
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const button = new Kuc.Button({text: 'Button', type: 'submit'});
+document.body.appendChild(button);
+```
+
+### CDN を利用する
+
+[UMD を利用する](#umd-を利用する)セクションの説明とサンプルコードをご確認ください。CDN の挙動は kuc.min.js を利用する場合と同じです。
+
+### npm パッケージを利用する
+
+npm パッケージを利用する場合は利用方法に変更はありませんが、レンダリングされたコンポーネントのタグとクラス名にはバージョン番号が含まれます。詳しくは[解決策](#解決策)セクションをご確認ください。
+
+## ケーススタディ
+
+### v1.3.2 以前のバージョンの利用者向け
+
+v1.3.2 以前のバージョンを利用する場合、以下のようなコンフリクトエラーを起こす可能性があります。
+
+#### 複数の KUC パッケージを読み込む場合（UMD, ESM）
+
+例えば、v1.2.0 の kuc.min.js を kintone に読み込んだ後に v1.3.0 の kuc.min.js をアプリに読み込みます。
+KUC の Button コンポーネントを呼び出そうとすると、Illegal constructor エラーが発生します。
+
+![複数の kuc.min.js ファイルを読み込むと Illegal constructor エラーが発生](/img/UMD_multi_files.jpeg)
+
+### v1.4.0 以降のバージョンの利用者向け
+
+v1.4.0 以降を利用する場合、複数の KUC パッケージ（ESM）を読み込んでもバージョンコンフリクトのエラーは起きません。
+
+しかし、複数の kuc.min.js ファイル（UMD）を読み込んだ上で推奨する Kucs オブジェクトの代わりに Kuc を利用する場合、バージョンコンフリクトのエラーは起きないですが、最後に読み込まれたバージョンのパッケージが利用される点にご注意ください。
+
+また、v1.4.0 前後のバージョンを同時に使う際は読み込み順によってエラーが起きるため注意が必要です。
+
+1. 最後に v1.4.0 以降のバージョンを読み込むケース
+- v1.4.0 > v1.3.2 > v1.4.x：window.Kuc.version は 1.4.x となりエラーは起きない
+- v1.4.0 > v1.4.x > v1.4.0：window.Kuc.version は 1.4.0 となりエラーは起きない
+
+2. 最後に v1.3.2 以前のバージョンを読み込むケース
+- v1.4.0 > v1.3.2 > v1.3.0：window.Kuc.version は 1.3.0 となり Illegal constructor エラーが起きる
+- v1.3.2 > v1.4.0 > v1.3.2：window.Kuc.version は 1.3.2 となり Illegal constructor エラーが起きる
+
+つまり、Kuc オブジェクトを利用する場合、最後に読み込まれた kuc.min.js が v1.3.2 以前のバージョンの場合はエラーが起きます。
+
+## 最後に
+ご不明点などございましたら、[GitHub issue](https://github.com/kintone-labs/kintone-ui-component/issues) にてご連絡ください。
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.0.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.0.md
new file mode 100644
index 0000000000..c0e45091b9
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.0.md
@@ -0,0 +1,117 @@
+---
+id: release-notes-v1.0.0
+title: v1.0.0 Release Notes
+sidebar_label: v1.0.0 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.0.0](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.0.0) のリリースノートです。<br/>
+v0 から v1 にアップデートした背景や今後の計画についてご紹介します。
+
+## 背景
+
+v0 では様々ご要望をいただき、対応コンポーネントや機能の追加を行いました。<br/>
+この度 kintone カスタマイズを行うエンジニアの皆さんが kintone ライクなパーツをより "簡単に" 作ることができるように、以下の検討を行い v1 としてリニューアルすることになりました。
+
+- v0 ユーザーからいただいた機能要望への対応
+- 具体的なユースケースに紐づいた仕様/機能検討
+- 設計/機能的に複雑な部分の見直し
+- 内部実装のスリム化
+
+## アップデート内容
+
+主なアップデートは次になります。
+
+- kintone パーツの再現度の向上
+  -  より kintone のパーツの UI や挙動に近づけました。
+- アクセシビリティ対応
+  - キーボード操作や音声読み上げソフトへの対応をしました。
+- モバイル対応
+  - 要望の多かったモバイルコンポーネントを提供しました。
+- リファレンスの改善
+  - 各パーツのリファレンスページを見やすくしました。（UI 表示, サンプルコード）
+  - 日本語対応しました。
+
+## 開発時に考慮したこと
+
+開発時に考慮したことやアップデートのポイントをご紹介します。
+
+- インターフェースは基本引き継ぎ、学習コストを低減。
+  - ​v0 から大幅な使用感の変更にならないように考慮しました。
+
+1. v1.0.0
+```js
+    const button = new Kuc.Button({
+      type: 'submit',
+      text: 'Search',
+      id: 'kuc_button' // Add id property
+    });
+    header.appendChild(button);　// Show button
+```
+2. v0.7.4
+```js
+    const button = new kintoneUIComponent.Button({
+      type: 'submit',
+      text: 'Search',
+    });
+    header.appendChild(button.render());　// Show button
+```
+
+- メソッドの呼び出しではなく、プロパティの利用で設定するように使用性の向上。
+  - 独自のメソッドをやめて、プロパティで設定できるように、シンプルな使い方を実現しました。
+
+1. v1.0.0
+```js
+    const button = new Kuc.Button({
+      type: 'submit',
+      text: 'Search',
+      id: 'kuc_button'
+    });
+    header.appendChild(button);
+    button.text = 'Register'; // Update text property
+```
+2. v0.7.4
+```js
+    const button = new kintoneUIComponent.Button({
+      type: 'submit',
+      text: 'Search',
+    });
+    header.appendChild(button.render());
+    button.setText('Register'); // Update text property
+```
+​
+- kintone カスタマイズで実際に使う機能に絞って実装。​
+  - 具体的なユースケースがあるコンポーネントや機能を実装しました。（kintone 標準機能にないものも含む）
+  - 一方ユースケースが乏しいと判断したコンポーネントの開発を見送りました。（もしユースケースがあれば対応検討します。[GitHub issue](https://github.com/kintone-labs/kintone-ui-component/issues) でのフィードバックもお待ちしております。）
+    - Attachment, ColorPicker, FieldGroup, IconButton, Tab, React ver.
+
+- Web Components フレームワークの LitElement で実装し、内部コードの可読性向上。​
+  - JavaScript のみで実装するのではなく、フレームワークを導入することで内部コードの品質向上を目指しました。
+  - WebComponents でのインターフェースの提供は、今後検討します。
+
+以上により、v0 に比べてより使いやすい、実際の kintone カスタマイズのユースケースに沿ったコンポーネント提供を目指しました。<br/>
+v0 と v1 の書き方の違いについては[こちら](../guides/comparison-v0-v1.md)の記事で解説しておりますので、詳細ご確認ください。
+
+## 今後の計画
+
+今後の v1 の計画は次の通りです。
+
+- 提供パーツの追加
+  - Table, ReadOnlyTable, Dialog, Date, DateTime などのコンポーネントを追加で提供予定です。
+- モバイル対応コンポーネントの追加
+- より実践的な使い方のサンプルやチュートリアルの整備
+  - ユースケースに沿ったサンプルコードやチュートリアル記事を増やしていきます。
+
+:::info
+v0 については、主に不具合改修とライブラリアップデートを継続します。新規の機能開発は現在予定しておりません。
+:::
+
+## おわりに
+
+最後まで読んでいただきありがとうございます。<br/>
+kintone UI Component v1 は、kintone カスタマイズやプラグイン開発に関わるエンジニアにとって使いやすい、便利なライブラリを目指して改良していきます。<br/>
+今後ともご期待ください。
+
+フィードバックや改善リクエストにつきましては [GitHub issue](https://github.com/kintone-labs/kintone-ui-component/issues) へコメントいただけると幸いです。<br/>
+よろしくお願いいたします。
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.1.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.1.md
new file mode 100644
index 0000000000..f922936dc6
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.1.md
@@ -0,0 +1,18 @@
+---
+id: release-notes-v1.0.1
+title: v1.0.1 Release Notes
+sidebar_label: v1.0.1 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.0.1](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.0.1) のリリースノートです。<br/>
+ドキュメント関連の修正を行いました。
+
+## アップデート内容
+
+詳細は以下になります。
+
+### ドキュメント
+- README 内の unpkg URL を修正
+- ドキュメントサイト Quick Start 記事内の unpkg URL を修正
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.2.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.2.md
new file mode 100644
index 0000000000..837b260b5f
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.2.md
@@ -0,0 +1,19 @@
+---
+id: release-notes-v1.0.2
+title: v1.0.2 Release Notes
+sidebar_label: v1.0.2 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.0.2](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.0.2) のリリースノートです。<br/>
+ドキュメント関連の修正を行いました。
+
+## アップデート内容
+
+詳細は以下になります。
+
+### ドキュメント
+- README 内の Release Notes 記事リンク切れ修正
+- ドキュメントサイト内の Support Policy の記載を修正
+- ドキュメントサイト内の Release Notes 記事の追加
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.3.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.3.md
new file mode 100644
index 0000000000..d09a68a9d7
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.3.md
@@ -0,0 +1,28 @@
+---
+id: release-notes-v1.0.3
+title: v1.0.3 Release Notes
+sidebar_label: v1.0.3 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.0.3](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.0.3) のリリースノートです。<br/>
+セキュリティアップデート対応や内部実装の修正を行いました。
+
+## アップデート内容
+
+詳細は以下になります。
+
+### 機能
+- GitHub 上での Sider Goodcheck 設定、コードレビュープロセスの自動化
+
+### メンテナンス
+- Mobile/Desktop コンポーネントの label と error タグのスタイルシートを統一
+- CI の "my-integrity" タグを "v1.x.x-integrity" に変更
+
+### セキュリティアップデート
+- セキュリティアラートへの対応：webpack, ssri, react-dev-utils, elliptic
+
+### ドキュメント
+- v1.0.3 Release Notes の追加
+- 検索ボックスカスタマイズ記事のサンプルコード修正
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.4.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.4.md
new file mode 100644
index 0000000000..f5bb48ee9e
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.4.md
@@ -0,0 +1,32 @@
+---
+id: release-notes-v1.0.4
+title: v1.0.4 Release Notes
+sidebar_label: v1.0.4 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.0.4](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.0.4) のリリースノートです。<br/>
+英語のドキュメントサポート, 不具合修正, メンテナンス, セキュリティアップデート対応を行いました。
+
+## アップデート内容
+
+詳細は以下になります。
+
+### 不具合修正
+- Issue "Dropdown display collapses on group field" [#512](https://github.com/kintone-labs/kintone-ui-component/issues/512) @juridon<br/>
+  グループフィールド内でも Desktop コンポーネントが正しく表示されるように修正
+- TextArea コンポーネントに "background-color: #ffffff;" の設定を追加
+
+### メンテナンス
+- ソースコードの coverage とユニットテストの品質を改善
+
+### セキュリティアップデート
+- 依存ライブラリを更新：webpack, ws, browserslist, postcss, hosted-git-info, xmlhttprequest-ssl, y18n
+
+### ドキュメント
+- ドキュメントの英語対応
+- Quick Start の webpack ガイドを更新
+- v0 で提供していた React 版のステータスを記載：v1 では現在対応予定なし
+- Internet Explorer 11 の非サポート（Internet Explorer 11 は 2022年6月15日にサポート終了予定）<br/>
+  https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.5.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.5.md
new file mode 100644
index 0000000000..7c27586d70
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.0.5.md
@@ -0,0 +1,26 @@
+---
+id: release-notes-v1.0.5
+title: v1.0.5 Release Notes
+sidebar_label: v1.0.5 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.0.5](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.0.5) のリリースノートです。<br/>
+不具合修正, メンテナンス対応, カスタマイズ記事の追加を行いました。
+
+## アップデート内容
+
+詳細は以下になります。
+
+### 不具合修正
+- Dropdown と MultiChoice コンポーネントにて、上下矢印を押して選択肢間を移動する時のキーボード動作を修正
+- Safari ブラウザにて Dropdown コンポーネントの外側をクリックした時に、正しく選択肢一覧を閉じるように修正
+
+### メンテナンス
+- Checkbox と RadioButton コンポーネントの group クラスに `role` と `aria-labelledby` のマークアップを追加
+- Mobile コンポーネントの error クラスの HTML 構造を統一
+- ユニットテストのソースコードを改善
+
+### ドキュメント
+- Mobile timecard customization 記事の追加
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.1.0.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.1.0.md
new file mode 100644
index 0000000000..06b3b0d1db
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.1.0.md
@@ -0,0 +1,40 @@
+---
+id: release-notes-v1.1.0
+title: v1.1.0 Release Notes
+sidebar_label: v1.1.0 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.1.0](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.1.0) のリリースノートです。<br/>
+新コンポーネント開発, 不具合修正, メンテナンス対応, カスタマイズ記事の追加を行いました。
+
+## アップデート内容
+
+詳細は以下になります。
+
+### 新コンポーネント
+- MobileDropdown コンポーネントの追加
+- MobileMultiChoice コンポーネントの追加
+
+### 不具合修正
+- MobileCheckbox, MobileRadioButton, MobileText, MobileTextArea コンポーネントの label 要素に改行の設定を追加
+
+### メンテナンス
+- Notification と MobileNotification コンポーネントの `text` プロパティにて、改行コードを入力できるように改善
+- Checkbox, MultiChoice, MobileCheckbox コンポーネントの `value` 配列のインデックス処理を、`items` プロパティの値の順番で並べるように変更
+
+### ドキュメント
+- Cleaning check list customization 記事の追加
+
+## トピック
+### MobileDropdown, MobileMultiChoice
+今回は kintone の UI や挙動に従って、HTML 標準をベースにこれらのコンポーネントを開発しました。<br/>
+Desktop 版のみでしたが、Mobile 版も併せてカスタマイズできるようになったので、ご活用いただけると嬉しいです。<br/>
+将来的には kintone UI Component の他コンポーネントと同様の UI に改善予定です。
+
+### 改行コード対応
+Notification と MobileNotification コンポーネントの `text` プロパティにて改行コードを追加できるようになりました。<br/>
+複数の文章を記述したいときにご活用ください。
+
+またフィードバックや新しいアイデアがありましたら、GitHub issue にてご連絡ください！
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.1.1.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.1.1.md
new file mode 100644
index 0000000000..f719e839bf
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.1.1.md
@@ -0,0 +1,22 @@
+---
+id: release-notes-v1.1.1
+title: v1.1.1 Release Notes
+sidebar_label: v1.1.1 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.1.1](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.1.1) のリリースノートです。<br/>
+メンテナンス, セキュリティアップデート対応を行いました。
+
+## アップデート内容
+
+詳細は以下になります。
+
+### メンテナンス
+- Dropdown コンポーネントのキーボード挙動を改善<br/>
+  (Escape キー, 上下矢印キー, Home と End キーを有効化)
+- MultiChoice コンポーネントのメニューパーツにて max-height とスクロールバーの設定を追加
+
+### セキュリティアップデート
+- 依存ライブラリを更新：TypeScript, ua-parser-js, trim, tar, immer, ansi-regex, set-value, prismjs, nth-check
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.2.0.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.2.0.md
new file mode 100644
index 0000000000..2a9a37870e
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.2.0.md
@@ -0,0 +1,66 @@
+---
+id: release-notes-v1.2.0
+title: v1.2.0 Release Notes
+sidebar_label: v1.2.0 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.2.0](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.2.0) のリリースノートです。<br/>
+新機能開発, メンテナンス対応, ドキュメントのアップデート, セキュリティアップデートを行いました。
+
+## アップデート内容
+
+詳細は以下になります。
+
+### 新機能
+- Notification と MobileNotification コンポーネントに `duration` プロパティを追加
+- Notification と MobileNotification コンポーネントに `close` イベントを追加
+- Text, TextArea, MobileText, MobileTextArea コンポーネントに `input` イベントを追加
+- バージョン情報を取得する機能を追加
+
+### メンテナンス
+- プロジェクト内のサードパーティライブラリのライセンスを確認するために License Finder を導入
+- Dropdown と MultiChoice コンポーネントのアクセシビリティの属性値を修正
+- いくつかの内部処理を改善
+
+### セキュリティアップデート
+- 依存ライブラリを更新: webpack
+
+### ドキュメント
+- Notification と MobileNotification コンポーネント: `duration` プロパティと `close` イベントの記載を追加
+- Text, TextArea, MobileText, MobileTextArea コンポーネント: `input` イベントの記載を追加
+- version 取得機能のページを追加
+
+## トピック
+
+### duration プロパティと close イベント
+Notification と MobileNotification コンポーネントに、新しいプロパティとイベントを追加しました！<br/>
+`duration` プロパティを使用して、コンポーネントが閉じるまでの時間を指定できます。<br/>
+`close` イベントを使用して、閉じるボタンをクリックしたときのタイミングを取得することもできます。
+
+
+### input イベント
+Text、TextArea、MobileText、および MobileTextArea コンポーネントに、文字列を挿入した時の値を取得するために、`input` イベントを追加しました。<br/>
+インクリメント検索を実装したい場合などに活用できます。
+
+### バージョン取得機能
+Kuc の version プロパティを使用して、パッケージのバージョン情報を取得できます。<br/>
+
+UMD では、Kuc の version プロパティを使用できます。<br/>
+例:
+
+```javascript
+console.log(Kuc.version);
+```
+<br/>
+
+ESM では、kintone-ui-componentから "version" をインポートできます。<br/>
+例:
+
+```javascript
+import { version } from "kintone-ui-component/lib/version";
+console.log(version);
+```
+
+またフィードバックや新しいアイデアがありましたら、GitHub issue にてご連絡ください！
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.3.0.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.3.0.md
new file mode 100644
index 0000000000..2c60a6b505
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.3.0.md
@@ -0,0 +1,52 @@
+---
+id: release-notes-v1.3.0
+title: v1.3.0 Release Notes
+sidebar_label: v1.3.0 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.3.0](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.3.0) のリリースノートです。<br/>
+新コンポーネントや機能開発, メンテナンス対応, ドキュメントのアップデート, セキュリティアップデートを行いました。
+
+## アップデート内容
+### 新コンポーネント
+- Date/Time シリーズコンポーネントの追加（DatePicker, TimePicker, DateTimePicker）
+- Dialog コンポーネントの追加
+
+### 新機能
+- 選択肢系コンポーネントの `value` と `Item.value` プロパティにて重複する値を許容、`selectedIndex` プロパティを追加（MultiChoice, Checkbox, Dropdown, RadioButton, MobileMultiChoice, MobileCheckbox, MobileDropdown, MobileRadioButton）<br/>
+  ※ 詳細は各コンポーネントのページをご確認ください。
+
+### メンテナンス
+- Spinner コンポーネントを開いている時、コンポーネント外の操作を無効化するように改善
+- LitElement と lit-html の利用を Lit 2.0 利用に変更
+- 開発中バージョンの情報を取得できる機能の追加
+- 脆弱性チェックのため Yamory の導入
+- コーディングルールチェックのため ESLint Custom Rule の開発と Sider の仕組みの削除
+- Storybook controls と actions 機能の導入
+- LICENSE ファイルの更新
+- ESM のビルド設定を修正
+
+### セキュリティアップデート
+- 依存ライブラリの更新：libraries: webpack, json-schema, karma, nanoid, node-fetch, log4js, core-js
+
+### ドキュメント
+- DatePicker, TimePicker, DateTimePicker, Dialog コンポーネントページの追加
+- 選択肢系コンポーネントページにて `value` と `selectedIndex` プロパティの仕様を更新（上記のロジック変更に従う）
+- Bulk update customization 記事の追加
+
+## トピック
+
+### 新コンポーネントリリース
+今回複数の新しいコンポーネントをリリースしました！<br/>
+Date/Time シリーズコンポーネントについては、プロパティ設定のしやすさと学習コストを考えて 3つのコンポーネントに分けて提供しています。<br/>
+
+Dialog については、デフォルトのサイズを小さくしたので、Desktop と Mobile 画面のどちらでもご活用いただけるかと思います。
+
+### 重複する値の許容
+選択肢系コンポーネントにおいて、`value` と `Item.value` プロパティに重複した値を設定できるように仕様を変更しました。（元々は重複した値がある場合、エラーを発生させる実装になっていました。）<br/>
+この対応のために、どの項目を選択するか指定できるように新規に `selectedIndex` というプロパティを追加しました。<br/>
+例えば `value` ごとにカテゴライズして表示を切り替えたい時などにご活用いただけます。
+
+またフィードバックや新しいアイデアがありましたら、GitHub issue にてご連絡ください！
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.3.1.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.3.1.md
new file mode 100644
index 0000000000..916740a308
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.3.1.md
@@ -0,0 +1,27 @@
+---
+id: release-notes-v1.3.1
+title: v1.3.1 Release Notes
+sidebar_label: v1.3.1 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.3.1](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.3.1) のリリースノートです。<br/>
+メンテナンス対応, ドキュメントのアップデート, セキュリティアップデートを行いました。
+
+## アップデート内容
+### メンテナンス
+- Dialog コンポーネントの content と footer パーツに padding 設定を追加
+  - デフォルト設定で見た目のデザインをよくするために改善を実施
+- MultiChoice コンポーネントにて disabled 時の選択された項目のチェックマークカラーを変更
+  - 選択されていることが分かるように色味を追加
+- Dropdown メニューパーツの表示位置の挙動修正とスクロール操作の追加
+- Desktop コンポーネントをアプリの HeaderMenuSpaceElement に設置した時の line-height 問題を修正
+
+### セキュリティアップデート
+- 依存ライブラリの更新：karma, engine.io, follow-redirects
+
+### ドキュメント
+- Contributing Guideline と Pull Request テンプレートの公開、issue テンプレートの更新
+- 2022年のロードマップの公開と README への追記
+- DatePicker と DateTimePicker コンポーネントにて language プロパティ設定によって日付の表示フォーマットが変更される仕様を追記
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.3.2.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.3.2.md
new file mode 100644
index 0000000000..2f4c198328
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.3.2.md
@@ -0,0 +1,19 @@
+---
+id: release-notes-v1.3.2
+title: v1.3.2 Release Notes
+sidebar_label: v1.3.2 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.3.2](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.3.2) のリリースノートです。<br/>
+不具合修正を行いました。
+
+## アップデート内容
+### 不具合修正
+- DateTimePicker, DatePicker, TimePicker コンポーネントで、変更された値を `value` プロパティと change イベントオブジェクトで取得できるように修正
+- DatePicker と DateTimePicker コンポーネントで、UI 上で入力をクリアするときに `value` が空文字となるように修正
+- Mobile コンポーネントのラベルのフォントサイズを修正
+- Dropdown コンポーネントで、Escape キーを押した時にリストを閉じることができるように修正
+- 選択肢系コンポーネントと date/time シリーズコンポーネントで、無効な値から有効な値に変更した後にエラーが表示されないように修正
+- 選択肢系コンポーネントで、セッターによって空文字または空配列を `value` プロパティに設定するときに UI に反映できるように修正
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.4.0.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.4.0.md
new file mode 100644
index 0000000000..b31d309733
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes-v1.4.0.md
@@ -0,0 +1,36 @@
+---
+id: release-notes-v1.4.0
+title: v1.4.0 Release Notes
+sidebar_label: v1.4.0 Release Notes
+---
+
+## 概要
+
+[kintone UI Component v1.4.0](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.4.0) のリリースノートです。<br/>
+新コンポーネントや機能開発, メンテナンス対応, ドキュメントのアップデート, セキュリティアップデートを行いました。
+
+:::info
+このバージョンでは、バージョンコンフリクトの問題を解決するためにコーディング方法・コンポーネントタグとクラス名において後方互換のある大きな変更があるのでご注意ください。
+詳しくは [Version conflicts issue and solution](../guides/version-conflicts-issue-solution.md) と新しい [Quick Start](../getting-started/quick-start.md) 記事をご確認ください。
+:::
+
+## アップデート内容
+### 新コンポーネント
+- Mobile Date/Time シリーズコンポーネントの追加（MobileDatePicker, MobileTimePicker, and MobileDateTimePicker）
+### 新機能
+- TimePicker, DateTimePicker コンポーネントにて timeStep, min, max プロパティを追加
+- Dialog コンポーネントにて icon プロパティを追加
+### メンテナンス
+- バージョンコンフリクトの問題を解消
+- 型定義のエクスポート
+- Mobile Date/Time シリーズのスタイル修正
+### セキュリティアップデート
+- 依存ライブラリのアップデート：nth-check, core-js, webpack, webpack-cli, @storybook/builder-webpack5, @storybook/manager-webpack5, @storybook/web-components, @storybook/addon-actions, @storybook/addon-controls, @storybook/addon-viewport, @storybook/addon-a11y, karma-coverage, @babel/preset-env, @babel/core, babel-loader, ts-loader, @open-wc/testing, karma, prettier, @cybozu/eslint-config, lit, @types/uuid, typescript
+
+### ドキュメント
+- バージョンコンフリクト問題と解決策の説明記事の追加, Quick Start 記事の更新, コンポーネントのサンプルコードと README の更新
+- Mobile Date/Time シリーズのコンポーネントドキュメントの追加
+- TimePicker, DateTimePicker コンポーネントにて timeStep, min, max プロパティの追記、value プロパティの更新
+- Dialog コンポーネントにて icon プロパティの追記
+- Format setting plug-in 記事の追加
+- RadioButton コンポーネントの borderVisible プロパティのデフォルト値を修正
\ No newline at end of file
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes.md
new file mode 100644
index 0000000000..00cfcc1e28
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/releases/release-notes.md
@@ -0,0 +1,11 @@
+---
+id: release-notes
+title: Release Notes
+sidebar_label: Release Notes
+---
+
+## 概要
+:::caution
+v1.5.0 以降のリリースノートについては、ドキュメントの本カテゴリではなく GitHub Releases でお知らせします。<br/>
+リリース内容の詳細については、[Releases](https://github.com/kintone-labs/kintone-ui-component/releases) をご確認ください。
+:::
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/utilities/version.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/utilities/version.md
new file mode 100644
index 0000000000..3569ff0b5e
--- /dev/null
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.18.0/utilities/version.md
@@ -0,0 +1,31 @@
+---
+id: version
+title: version
+sidebar_label: version
+---
+
+## Overview
+
+version 機能は、パッケージのバージョン情報を取得することができます。
+
+---
+## Specification
+
+package.json の version プロパティ値のパッケージバージョン情報を取得することができます。
+
+---
+## Sample Code
+バージョン情報にアクセスする際のサンプルコードです。
+
+### UMD を利用する
+
+```javascript
+console.log(Kuc.version);
+```
+
+### npm パッケージを利用する
+
+```javascript
+import { version } from 'kintone-ui-component/lib/version';
+console.log(version);
+```
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/button.md
index 0dd6ffeb4b..f4c5c81b72 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/checkbox.md
index 137434936f..04f5f71fe7 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/dropdown.md
index 265b3a8116..426044a631 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/multichoice.md
index 4b15b0295f..6ee592aff1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/notification.md
index c2b82d4cc9..b2a5bc7f38 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/radio-button.md
index 9e92fa6915..2d502174cf 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/spinner.md
index 6220e2d045..fee404de52 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/text.md
index 339f38cdf5..61e64930f3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/textarea.md
index 1c65e374db..7503746ab4 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-button.md
index 60cf11dc20..f665a12526 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-checkbox.md
index dc3ed4ca97..e173ef2ec9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-dropdown.md
index bb054da918..98ae83b824 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-multichoice.md
index c5f5d2029e..c1f04ee7e4 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-notification.md
index 6386174058..900d33324f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-radio-button.md
index fcfd9ee489..865823ae54 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-text.md
index 50ed8f46dd..cce4895ce0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-textarea.md
index a87aebc879..d037760206 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.2.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/button.md
index 0dd6ffeb4b..f4c5c81b72 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/checkbox.md
index 58fad5f408..30a067b758 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/date-picker.md
index 6fa616c9f5..d11276ebc2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/datetime-picker.md
index b8bfb9eb4f..98405f887b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/dialog.md
index 102adb5005..8844fad3ad 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/dropdown.md
index 23303b3138..0181298dbb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/multichoice.md
index 657b38b6ad..4ee5ce945e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/notification.md
index c2b82d4cc9..b2a5bc7f38 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/radio-button.md
index 4432640663..2b6cdc568c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/spinner.md
index 6220e2d045..fee404de52 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/text.md
index 339f38cdf5..61e64930f3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/textarea.md
index 1c65e374db..7503746ab4 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/time-picker.md
index 0d51c665ca..ada8dfa186 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-button.md
index 60cf11dc20..f665a12526 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-checkbox.md
index 6b3f56dc59..3d9c8d96ff 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-dropdown.md
index 35aff5931d..1074c83b0d 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-multichoice.md
index 4ffcc1330a..959d7fde4e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-notification.md
index 6386174058..900d33324f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-radio-button.md
index 7ae80eab29..783638e5df 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-text.md
index 50ed8f46dd..cce4895ce0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-textarea.md
index a87aebc879..d037760206 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/button.md
index 0dd6ffeb4b..f4c5c81b72 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/checkbox.md
index 58fad5f408..30a067b758 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/date-picker.md
index 6fa616c9f5..d11276ebc2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/datetime-picker.md
index b8bfb9eb4f..98405f887b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/dialog.md
index 102adb5005..8844fad3ad 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/dropdown.md
index 23303b3138..0181298dbb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/multichoice.md
index 657b38b6ad..4ee5ce945e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/notification.md
index c2b82d4cc9..b2a5bc7f38 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/radio-button.md
index 4432640663..2b6cdc568c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/spinner.md
index 6220e2d045..fee404de52 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/text.md
index 339f38cdf5..61e64930f3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/textarea.md
index 1c65e374db..7503746ab4 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/time-picker.md
index 0d51c665ca..ada8dfa186 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-button.md
index 60cf11dc20..f665a12526 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-checkbox.md
index 6b3f56dc59..3d9c8d96ff 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-dropdown.md
index 35aff5931d..1074c83b0d 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-multichoice.md
index 4ffcc1330a..959d7fde4e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-notification.md
index 6386174058..900d33324f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-radio-button.md
index 7ae80eab29..783638e5df 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-text.md
index 50ed8f46dd..cce4895ce0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-textarea.md
index a87aebc879..d037760206 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.1/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/button.md
index 0dd6ffeb4b..f4c5c81b72 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/checkbox.md
index 58fad5f408..30a067b758 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/date-picker.md
index 6fa616c9f5..d11276ebc2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/datetime-picker.md
index b8bfb9eb4f..98405f887b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/dialog.md
index 102adb5005..8844fad3ad 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/dropdown.md
index 23303b3138..0181298dbb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/multichoice.md
index 657b38b6ad..4ee5ce945e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/notification.md
index c2b82d4cc9..b2a5bc7f38 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/radio-button.md
index 4432640663..2b6cdc568c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/spinner.md
index 6220e2d045..fee404de52 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/text.md
index 339f38cdf5..61e64930f3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/textarea.md
index 1c65e374db..7503746ab4 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/time-picker.md
index 0d51c665ca..ada8dfa186 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-button.md
index 60cf11dc20..f665a12526 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-checkbox.md
index 6b3f56dc59..3d9c8d96ff 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-dropdown.md
index 35aff5931d..1074c83b0d 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-multichoice.md
index 4ffcc1330a..959d7fde4e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-notification.md
index 6386174058..900d33324f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-radio-button.md
index 7ae80eab29..783638e5df 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-text.md
index 50ed8f46dd..cce4895ce0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-textarea.md
index a87aebc879..d037760206 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.3.2/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/button.md
index 817aa8923e..5c2ad192c8 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/checkbox.md
index fe382e59c6..aab796e134 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/date-picker.md
index 5b920b74aa..75df756c9e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/datetime-picker.md
index 52607f4c0e..4d173c7113 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/dialog.md
index ad4b89e758..370359a536 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/dropdown.md
index db3769ac00..33f460674b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/multichoice.md
index d48b318839..5b082278e0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/notification.md
index 8dfbf4a951..7c19d6d3d2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/radio-button.md
index d6816cd063..ef6662c9a9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/spinner.md
index 89a80a22a6..4274dbb4ed 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/text.md
index 5962a862da..33931e55c9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/textarea.md
index a7aa6806f3..01246c10b5 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/time-picker.md
index 3f16fe4c9a..b4a718e6cc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-button.md
index 5cbd66f9b1..be460e6aec 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-checkbox.md
index ac002d3acb..61dbb63aa1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-date-picker.md
index 5bec518d9c..aaf56e7cd8 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-datetime-picker.md
index a910000ec9..4e0db3bd84 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-dropdown.md
index 58e10a4b6d..3ebfb4843d 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-multichoice.md
index 515c47c265..cdeab10af3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-notification.md
index ccfdc30f86..ffc6e4d62f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-radio-button.md
index 4b175a657e..e41415ba16 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-time-picker.md
index da75eaea8f..9c8879e283 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.4.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/button.md
index 6869747326..a27f087a6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/checkbox.md
index fe382e59c6..aab796e134 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/date-picker.md
index 5b920b74aa..75df756c9e 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/datetime-picker.md
index 52607f4c0e..4d173c7113 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/dialog.md
index ad4b89e758..370359a536 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/dropdown.md
index db3769ac00..33f460674b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/multichoice.md
index d48b318839..5b082278e0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/notification.md
index 8dfbf4a951..7c19d6d3d2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/radio-button.md
index d6816cd063..ef6662c9a9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/spinner.md
index 89a80a22a6..4274dbb4ed 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/text.md
index dac6d2e8c9..a69f780527 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/textarea.md
index a7aa6806f3..01246c10b5 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/time-picker.md
index 3f16fe4c9a..b4a718e6cc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-button.md
index 5cbd66f9b1..be460e6aec 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-checkbox.md
index ac002d3acb..61dbb63aa1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-date-picker.md
index a708a38772..a69eb662e2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-datetime-picker.md
index a910000ec9..4e0db3bd84 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-dropdown.md
index 58e10a4b6d..3ebfb4843d 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-multichoice.md
index 515c47c265..cdeab10af3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-notification.md
index ccfdc30f86..ffc6e4d62f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-radio-button.md
index 4b175a657e..e41415ba16 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-time-picker.md
index da75eaea8f..9c8879e283 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.5.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/button.md
index 6869747326..a27f087a6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/checkbox.md
index fe382e59c6..aab796e134 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/date-picker.md
index 59fb63f7bb..ce2fd3c4d0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/datetime-picker.md
index c725d74b83..bdcaecc9dc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/dialog.md
index ad4b89e758..370359a536 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/dropdown.md
index db3769ac00..33f460674b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/multichoice.md
index d48b318839..5b082278e0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/notification.md
index 8dfbf4a951..7c19d6d3d2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/radio-button.md
index d6816cd063..ef6662c9a9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/spinner.md
index 89a80a22a6..4274dbb4ed 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/text.md
index dac6d2e8c9..a69f780527 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/textarea.md
index a7aa6806f3..01246c10b5 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/time-picker.md
index b808a13f6c..8b863d1738 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-button.md
index 5cbd66f9b1..be460e6aec 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-checkbox.md
index ac002d3acb..61dbb63aa1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-date-picker.md
index 53ac08860a..f48bc67bd8 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-dropdown.md
index 58e10a4b6d..3ebfb4843d 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-multichoice.md
index 515c47c265..cdeab10af3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-notification.md
index ccfdc30f86..ffc6e4d62f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-radio-button.md
index 4b175a657e..e41415ba16 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.6.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/button.md
index 6869747326..a27f087a6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/checkbox.md
index fe382e59c6..aab796e134 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/date-picker.md
index 59fb63f7bb..ce2fd3c4d0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/datetime-picker.md
index c725d74b83..bdcaecc9dc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/dialog.md
index ad4b89e758..370359a536 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/dropdown.md
index db3769ac00..33f460674b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/multichoice.md
index d48b318839..5b082278e0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/notification.md
index 8dfbf4a951..7c19d6d3d2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/radio-button.md
index d6816cd063..ef6662c9a9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/readonly-table.md
index 772e0310c8..602a5f0ad2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は、kintone 詳細画面の読み取りテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/spinner.md
index 89a80a22a6..4274dbb4ed 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/text.md
index dac6d2e8c9..a69f780527 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/textarea.md
index a7aa6806f3..01246c10b5 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/time-picker.md
index b808a13f6c..8b863d1738 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-button.md
index 5cbd66f9b1..be460e6aec 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-checkbox.md
index ac002d3acb..61dbb63aa1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-date-picker.md
index 53ac08860a..f48bc67bd8 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-dropdown.md
index 58e10a4b6d..3ebfb4843d 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-multichoice.md
index 515c47c265..cdeab10af3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-notification.md
index ccfdc30f86..ffc6e4d62f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-radio-button.md
index 4b175a657e..e41415ba16 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.7.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/attachment.md
index c5fa410a07..f1b7bfbf1a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/attachment.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/button.md
index 6869747326..a27f087a6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/checkbox.md
index fe382e59c6..aab796e134 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/date-picker.md
index 59fb63f7bb..ce2fd3c4d0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/datetime-picker.md
index c725d74b83..bdcaecc9dc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/dialog.md
index ad4b89e758..370359a536 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/dropdown.md
index db3769ac00..33f460674b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/multichoice.md
index d48b318839..5b082278e0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/notification.md
index 8dfbf4a951..7c19d6d3d2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/radio-button.md
index d6816cd063..ef6662c9a9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/readonly-table.md
index 87a55dc30e..007e33c33b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は読み取り専用のテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/spinner.md
index 89a80a22a6..4274dbb4ed 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/table.md
index 7a9d2903de..cd2eab4b85 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 Table は編集可能なテーブルを表示します。
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/text.md
index dac6d2e8c9..a69f780527 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/textarea.md
index a7aa6806f3..01246c10b5 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/time-picker.md
index b808a13f6c..8b863d1738 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-button.md
index 5cbd66f9b1..be460e6aec 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-checkbox.md
index ac002d3acb..61dbb63aa1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-date-picker.md
index 53ac08860a..f48bc67bd8 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-dropdown.md
index 58e10a4b6d..3ebfb4843d 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-multichoice.md
index 515c47c265..cdeab10af3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-notification.md
index ccfdc30f86..ffc6e4d62f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-radio-button.md
index 4b175a657e..e41415ba16 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.8.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/attachment.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/attachment.md
index c5fa410a07..f1b7bfbf1a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/attachment.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/button.md
index 6869747326..a27f087a6b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 Button は、ボタンを表示します。
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/checkbox.md
index fe382e59c6..aab796e134 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 Checkbox は、複数選択のチェックボックスを表示します。
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/combobox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/combobox.md
index fd1e310c42..f5debe80b3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/combobox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 Combobox は複数選択肢の中から一つの値を検索して選択することができます。
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/date-picker.md
index 59fb63f7bb..ce2fd3c4d0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 DatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/datetime-picker.md
index c725d74b83..bdcaecc9dc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 DateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/dialog.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/dialog.md
index ad4b89e758..370359a536 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/dialog.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 Dialog は、ダイアログボックスを表示します。
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/dropdown.md
index db3769ac00..33f460674b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 Dropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/multichoice.md
index d48b318839..5b082278e0 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 MultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/notification.md
index 8dfbf4a951..7c19d6d3d2 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 Notification は、ポップアップの通知を表示します。
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/radio-button.md
index d6816cd063..ef6662c9a9 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 RadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/readonly-table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/readonly-table.md
index 87a55dc30e..007e33c33b 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/readonly-table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 ReadOnlyTable は読み取り専用のテーブルを表示します。
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/spinner.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/spinner.md
index 89a80a22a6..4274dbb4ed 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/spinner.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 Spinner は、ローディングスピナーを表示します。
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/table.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/table.md
index 7a9d2903de..cd2eab4b85 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/table.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 Table は編集可能なテーブルを表示します。
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/text.md
index dac6d2e8c9..a69f780527 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 Text は、単一行のテキストを表示します。
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/textarea.md
index a7aa6806f3..01246c10b5 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 TextArea は、複数行のテキストを表示します。
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/time-picker.md
index b808a13f6c..8b863d1738 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 TimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-button.md
index 5cbd66f9b1..be460e6aec 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 MobileButton は、ボタンを表示します。
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-checkbox.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-checkbox.md
index ac002d3acb..61dbb63aa1 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 MobileCheckbox は、複数選択のチェックボックスを表示します。
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-date-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-date-picker.md
index 53ac08860a..f48bc67bd8 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 MobileDatePicker は入力エリアと日付選択用のカレンダーを表示します。
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-datetime-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-datetime-picker.md
index b82c6b743b..ff17a6b6fc 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 MobileDateTimePicker は日付と時間それぞれの入力エリアと選択肢を表示します。
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-dropdown.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-dropdown.md
index 58e10a4b6d..3ebfb4843d 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 MobileDropdown は複数選択肢の中から一つの値を選択することができます。
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-multichoice.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-multichoice.md
index 515c47c265..cdeab10af3 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 MobileMultiChoice は、複数選択肢の中から複数の値を選択することができます。
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-notification.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-notification.md
index ccfdc30f86..ffc6e4d62f 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-notification.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 MobileNotification は、ポップアップの通知を表示します。
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-radio-button.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-radio-button.md
index 4b175a657e..e41415ba16 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 MobileRadioButton は、複数選択肢の中から一つの値を選択することができます。
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-text.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-text.md
index 2a37c91553..8dc207828a 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-text.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 MobileText は、単一行のテキストを表示します。
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-textarea.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-textarea.md
index 5bed9c8bab..d9d6bb9ddb 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-textarea.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 MobileTextArea は、複数行のテキストを表示します。
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-time-picker.md b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-time-picker.md
index 178375b5e6..c0f619fc6c 100644
--- a/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.9.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 MobileTimePicker は入力エリアと時間選択用のリストを表示します。
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/package-lock.json b/docs/document/package-lock.json
index d7dddf46d2..b8f1d3080c 100644
--- a/docs/document/package-lock.json
+++ b/docs/document/package-lock.json
@@ -6,16 +6,16 @@
     "": {
       "name": "document",
       "dependencies": {
-        "@docusaurus/core": "^3.3.2",
-        "@docusaurus/preset-classic": "^3.3.2",
+        "@docusaurus/core": "^3.5.2",
+        "@docusaurus/preset-classic": "^3.5.2",
         "@mdx-js/react": "^3.0.1",
         "clsx": "^2.1.1",
-        "prism-react-renderer": "^2.3.1",
+        "prism-react-renderer": "^2.4.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       },
       "devDependencies": {
-        "@docusaurus/module-type-aliases": "^3.3.2"
+        "@docusaurus/module-type-aliases": "^3.5.2"
       },
       "engines": {
         "node": ">=18.0"
@@ -63,74 +63,126 @@
       }
     },
     "node_modules/@algolia/cache-browser-local-storage": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.23.3.tgz",
-      "integrity": "sha512-vRHXYCpPlTDE7i6UOy2xE03zHF2C8MEFjPN2v7fRbqVpcOvAUQK81x3Kc21xyb5aSIpYCjWCZbYZuz8Glyzyyg==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.24.0.tgz",
+      "integrity": "sha512-t63W9BnoXVrGy9iYHBgObNXqYXM3tYXCjDSHeNwnsc324r4o5UiVKUiAB4THQ5z9U5hTj6qUvwg/Ez43ZD85ww==",
       "dependencies": {
-        "@algolia/cache-common": "4.23.3"
+        "@algolia/cache-common": "4.24.0"
       }
     },
     "node_modules/@algolia/cache-common": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.23.3.tgz",
-      "integrity": "sha512-h9XcNI6lxYStaw32pHpB1TMm0RuxphF+Ik4o7tcQiodEdpKK+wKufY6QXtba7t3k8eseirEMVB83uFFF3Nu54A=="
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.24.0.tgz",
+      "integrity": "sha512-emi+v+DmVLpMGhp0V9q9h5CdkURsNmFC+cOS6uK9ndeJm9J4TiqSvPYVu+THUP8P/S08rxf5x2P+p3CfID0Y4g=="
     },
     "node_modules/@algolia/cache-in-memory": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.23.3.tgz",
-      "integrity": "sha512-yvpbuUXg/+0rbcagxNT7un0eo3czx2Uf0y4eiR4z4SD7SiptwYTpbuS0IHxcLHG3lq22ukx1T6Kjtk/rT+mqNg==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.24.0.tgz",
+      "integrity": "sha512-gDrt2so19jW26jY3/MkFg5mEypFIPbPoXsQGQWAi6TrCPsNOSEYepBMPlucqWigsmEy/prp5ug2jy/N3PVG/8w==",
       "dependencies": {
-        "@algolia/cache-common": "4.23.3"
+        "@algolia/cache-common": "4.24.0"
       }
     },
     "node_modules/@algolia/client-account": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.23.3.tgz",
-      "integrity": "sha512-hpa6S5d7iQmretHHF40QGq6hz0anWEHGlULcTIT9tbUssWUriN9AUXIFQ8Ei4w9azD0hc1rUok9/DeQQobhQMA==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.24.0.tgz",
+      "integrity": "sha512-adcvyJ3KjPZFDybxlqnf+5KgxJtBjwTPTeyG2aOyoJvx0Y8dUQAEOEVOJ/GBxX0WWNbmaSrhDURMhc+QeevDsA==",
       "dependencies": {
-        "@algolia/client-common": "4.23.3",
-        "@algolia/client-search": "4.23.3",
-        "@algolia/transporter": "4.23.3"
+        "@algolia/client-common": "4.24.0",
+        "@algolia/client-search": "4.24.0",
+        "@algolia/transporter": "4.24.0"
+      }
+    },
+    "node_modules/@algolia/client-account/node_modules/@algolia/client-common": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.24.0.tgz",
+      "integrity": "sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==",
+      "dependencies": {
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/transporter": "4.24.0"
+      }
+    },
+    "node_modules/@algolia/client-account/node_modules/@algolia/client-search": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.24.0.tgz",
+      "integrity": "sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA==",
+      "dependencies": {
+        "@algolia/client-common": "4.24.0",
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/transporter": "4.24.0"
       }
     },
     "node_modules/@algolia/client-analytics": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.23.3.tgz",
-      "integrity": "sha512-LBsEARGS9cj8VkTAVEZphjxTjMVCci+zIIiRhpFun9jGDUlS1XmhCW7CTrnaWeIuCQS/2iPyRqSy1nXPjcBLRA==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.24.0.tgz",
+      "integrity": "sha512-y8jOZt1OjwWU4N2qr8G4AxXAzaa8DBvyHTWlHzX/7Me1LX8OayfgHexqrsL4vSBcoMmVw2XnVW9MhL+Y2ZDJXg==",
       "dependencies": {
-        "@algolia/client-common": "4.23.3",
-        "@algolia/client-search": "4.23.3",
-        "@algolia/requester-common": "4.23.3",
-        "@algolia/transporter": "4.23.3"
+        "@algolia/client-common": "4.24.0",
+        "@algolia/client-search": "4.24.0",
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/transporter": "4.24.0"
       }
     },
-    "node_modules/@algolia/client-common": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.23.3.tgz",
-      "integrity": "sha512-l6EiPxdAlg8CYhroqS5ybfIczsGUIAC47slLPOMDeKSVXYG1n0qGiz4RjAHLw2aD0xzh2EXZ7aRguPfz7UKDKw==",
+    "node_modules/@algolia/client-analytics/node_modules/@algolia/client-common": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.24.0.tgz",
+      "integrity": "sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==",
+      "dependencies": {
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/transporter": "4.24.0"
+      }
+    },
+    "node_modules/@algolia/client-analytics/node_modules/@algolia/client-search": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.24.0.tgz",
+      "integrity": "sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA==",
       "dependencies": {
-        "@algolia/requester-common": "4.23.3",
-        "@algolia/transporter": "4.23.3"
+        "@algolia/client-common": "4.24.0",
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/transporter": "4.24.0"
+      }
+    },
+    "node_modules/@algolia/client-common": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.6.1.tgz",
+      "integrity": "sha512-4MGqXqiAyqsUJw+KamKWZO2Gxn9iMpc05vC0vy8+iQRjKRZEDB1a+3Da6CnkWzXa162pJb7a/chDAAKA9rye8A==",
+      "peer": true,
+      "engines": {
+        "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/client-personalization": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.23.3.tgz",
-      "integrity": "sha512-3E3yF3Ocr1tB/xOZiuC3doHQBQ2zu2MPTYZ0d4lpfWads2WTKG7ZzmGnsHmm63RflvDeLK/UVx7j2b3QuwKQ2g==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.24.0.tgz",
+      "integrity": "sha512-l5FRFm/yngztweU0HdUzz1rC4yoWCFo3IF+dVIVTfEPg906eZg5BOd1k0K6rZx5JzyyoP4LdmOikfkfGsKVE9w==",
       "dependencies": {
-        "@algolia/client-common": "4.23.3",
-        "@algolia/requester-common": "4.23.3",
-        "@algolia/transporter": "4.23.3"
+        "@algolia/client-common": "4.24.0",
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/transporter": "4.24.0"
+      }
+    },
+    "node_modules/@algolia/client-personalization/node_modules/@algolia/client-common": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.24.0.tgz",
+      "integrity": "sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==",
+      "dependencies": {
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/transporter": "4.24.0"
       }
     },
     "node_modules/@algolia/client-search": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.23.3.tgz",
-      "integrity": "sha512-P4VAKFHqU0wx9O+q29Q8YVuaowaZ5EM77rxfmGnkHUJggh28useXQdopokgwMeYw2XUht49WX5RcTQ40rZIabw==",
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.6.1.tgz",
+      "integrity": "sha512-HloeR0Ef29vf2yJc1lhjw1OYial3YgB0f3TQaqqMlSnM/IkAw9TnX1IOYLurnI91apMKggFpA9t8lRp7TGEKEg==",
+      "peer": true,
       "dependencies": {
-        "@algolia/client-common": "4.23.3",
-        "@algolia/requester-common": "4.23.3",
-        "@algolia/transporter": "4.23.3"
+        "@algolia/client-common": "5.6.1",
+        "@algolia/requester-browser-xhr": "5.6.1",
+        "@algolia/requester-fetch": "5.6.1",
+        "@algolia/requester-node-http": "5.6.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/events": {
@@ -139,65 +191,120 @@
       "integrity": "sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ=="
     },
     "node_modules/@algolia/logger-common": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.23.3.tgz",
-      "integrity": "sha512-y9kBtmJwiZ9ZZ+1Ek66P0M68mHQzKRxkW5kAAXYN/rdzgDN0d2COsViEFufxJ0pb45K4FRcfC7+33YB4BLrZ+g=="
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.24.0.tgz",
+      "integrity": "sha512-LLUNjkahj9KtKYrQhFKCzMx0BY3RnNP4FEtO+sBybCjJ73E8jNdaKJ/Dd8A/VA4imVHP5tADZ8pn5B8Ga/wTMA=="
     },
     "node_modules/@algolia/logger-console": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.23.3.tgz",
-      "integrity": "sha512-8xoiseoWDKuCVnWP8jHthgaeobDLolh00KJAdMe9XPrWPuf1by732jSpgy2BlsLTaT9m32pHI8CRfrOqQzHv3A==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.24.0.tgz",
+      "integrity": "sha512-X4C8IoHgHfiUROfoRCV+lzSy+LHMgkoEEU1BbKcsfnV0i0S20zyy0NLww9dwVHUWNfPPxdMU+/wKmLGYf96yTg==",
       "dependencies": {
-        "@algolia/logger-common": "4.23.3"
+        "@algolia/logger-common": "4.24.0"
       }
     },
     "node_modules/@algolia/recommend": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-4.23.3.tgz",
-      "integrity": "sha512-9fK4nXZF0bFkdcLBRDexsnGzVmu4TSYZqxdpgBW2tEyfuSSY54D4qSRkLmNkrrz4YFvdh2GM1gA8vSsnZPR73w==",
-      "dependencies": {
-        "@algolia/cache-browser-local-storage": "4.23.3",
-        "@algolia/cache-common": "4.23.3",
-        "@algolia/cache-in-memory": "4.23.3",
-        "@algolia/client-common": "4.23.3",
-        "@algolia/client-search": "4.23.3",
-        "@algolia/logger-common": "4.23.3",
-        "@algolia/logger-console": "4.23.3",
-        "@algolia/requester-browser-xhr": "4.23.3",
-        "@algolia/requester-common": "4.23.3",
-        "@algolia/requester-node-http": "4.23.3",
-        "@algolia/transporter": "4.23.3"
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-4.24.0.tgz",
+      "integrity": "sha512-P9kcgerfVBpfYHDfVZDvvdJv0lEoCvzNlOy2nykyt5bK8TyieYyiD0lguIJdRZZYGre03WIAFf14pgE+V+IBlw==",
+      "dependencies": {
+        "@algolia/cache-browser-local-storage": "4.24.0",
+        "@algolia/cache-common": "4.24.0",
+        "@algolia/cache-in-memory": "4.24.0",
+        "@algolia/client-common": "4.24.0",
+        "@algolia/client-search": "4.24.0",
+        "@algolia/logger-common": "4.24.0",
+        "@algolia/logger-console": "4.24.0",
+        "@algolia/requester-browser-xhr": "4.24.0",
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/requester-node-http": "4.24.0",
+        "@algolia/transporter": "4.24.0"
+      }
+    },
+    "node_modules/@algolia/recommend/node_modules/@algolia/client-common": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.24.0.tgz",
+      "integrity": "sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==",
+      "dependencies": {
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/transporter": "4.24.0"
+      }
+    },
+    "node_modules/@algolia/recommend/node_modules/@algolia/client-search": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.24.0.tgz",
+      "integrity": "sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA==",
+      "dependencies": {
+        "@algolia/client-common": "4.24.0",
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/transporter": "4.24.0"
+      }
+    },
+    "node_modules/@algolia/recommend/node_modules/@algolia/requester-browser-xhr": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.24.0.tgz",
+      "integrity": "sha512-Z2NxZMb6+nVXSjF13YpjYTdvV3032YTBSGm2vnYvYPA6mMxzM3v5rsCiSspndn9rzIW4Qp1lPHBvuoKJV6jnAA==",
+      "dependencies": {
+        "@algolia/requester-common": "4.24.0"
+      }
+    },
+    "node_modules/@algolia/recommend/node_modules/@algolia/requester-node-http": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.24.0.tgz",
+      "integrity": "sha512-JF18yTjNOVYvU/L3UosRcvbPMGT9B+/GQWNWnenIImglzNVGpyzChkXLnrSf6uxwVNO6ESGu6oN8MqcGQcjQJw==",
+      "dependencies": {
+        "@algolia/requester-common": "4.24.0"
       }
     },
     "node_modules/@algolia/requester-browser-xhr": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.23.3.tgz",
-      "integrity": "sha512-jDWGIQ96BhXbmONAQsasIpTYWslyjkiGu0Quydjlowe+ciqySpiDUrJHERIRfELE5+wFc7hc1Q5hqjGoV7yghw==",
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.6.1.tgz",
+      "integrity": "sha512-tY1RW60sGF9sMpxbd8j53IqLLwnkNhrAarVhFfNZzDZNvI8WyzG78W5ZD/SFvtkgNPPSav3T/3LpBT8xBpzbGw==",
+      "peer": true,
       "dependencies": {
-        "@algolia/requester-common": "4.23.3"
+        "@algolia/client-common": "5.6.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/requester-common": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.23.3.tgz",
-      "integrity": "sha512-xloIdr/bedtYEGcXCiF2muajyvRhwop4cMZo+K2qzNht0CMzlRkm8YsDdj5IaBhshqfgmBb3rTg4sL4/PpvLYw=="
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.24.0.tgz",
+      "integrity": "sha512-k3CXJ2OVnvgE3HMwcojpvY6d9kgKMPRxs/kVohrwF5WMr2fnqojnycZkxPoEg+bXm8fi5BBfFmOqgYztRtHsQA=="
+    },
+    "node_modules/@algolia/requester-fetch": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.6.1.tgz",
+      "integrity": "sha512-4TvR5IodrH+o+ji4ka+VBufWY0GfHr43nFqnDTStabtjspfo4rlcV16x534vvnbfp694oBxrz0SO/Ny8VemvXg==",
+      "peer": true,
+      "dependencies": {
+        "@algolia/client-common": "5.6.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
+      }
     },
     "node_modules/@algolia/requester-node-http": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.23.3.tgz",
-      "integrity": "sha512-zgu++8Uj03IWDEJM3fuNl34s746JnZOWn1Uz5taV1dFyJhVM/kTNw9Ik7YJWiUNHJQXcaD8IXD1eCb0nq/aByA==",
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.6.1.tgz",
+      "integrity": "sha512-K7tlss87aq6UnWnU8+fPIe+Is9Mvyqwzysp6Ty/HpQ7YNKUU7opgkMOVKxzTwt3fm40NfNX4ENvVKHoYABL6vw==",
+      "peer": true,
       "dependencies": {
-        "@algolia/requester-common": "4.23.3"
+        "@algolia/client-common": "5.6.1"
+      },
+      "engines": {
+        "node": ">= 14.0.0"
       }
     },
     "node_modules/@algolia/transporter": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.23.3.tgz",
-      "integrity": "sha512-Wjl5gttqnf/gQKJA+dafnD0Y6Yw97yvfY8R9h0dQltX1GXTgNs1zWgvtWW0tHl1EgMdhAyw189uWiZMnL3QebQ==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.24.0.tgz",
+      "integrity": "sha512-86nI7w6NzWxd1Zp9q3413dRshDqAzSbsQjhcDhPIatEFiZrL1/TjnHL8S7jVKFePlIMzDsZWXAXwXzcok9c5oA==",
       "dependencies": {
-        "@algolia/cache-common": "4.23.3",
-        "@algolia/logger-common": "4.23.3",
-        "@algolia/requester-common": "4.23.3"
+        "@algolia/cache-common": "4.24.0",
+        "@algolia/logger-common": "4.24.0",
+        "@algolia/requester-common": "4.24.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -480,9 +587,9 @@
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.5.tgz",
-      "integrity": "sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
+      "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1572,11 +1679,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-react-constant-elements": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.24.1.tgz",
-      "integrity": "sha512-QXp1U9x0R7tkiGB0FOk8o74jhnap0FlZ5gNkRIWdG3eP+SvMFg118e1zaWewDzgABb106QSKpVsD3Wgd8t6ifA==",
+      "version": "7.25.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.25.1.tgz",
+      "integrity": "sha512-SLV/giH/V4SmloZ6Dt40HjTGTAIkxn33TVIHxNGNvo8ezMhrxBkzisj4op1KZYPIOHFLqhv60OHvX+YRu4xbmQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -2093,18 +2200,18 @@
       }
     },
     "node_modules/@docsearch/css": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.6.0.tgz",
-      "integrity": "sha512-+sbxb71sWre+PwDK7X2T8+bhS6clcVMLwBPznX45Qu6opJcgRjAp7gYSDzVFp187J+feSj5dNBN1mJoi6ckkUQ=="
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.6.1.tgz",
+      "integrity": "sha512-VtVb5DS+0hRIprU2CO6ZQjK2Zg4QU5HrDM1+ix6rT0umsYvFvatMAnf97NHZlVWDaaLlx7GRfR/7FikANiM2Fg=="
     },
     "node_modules/@docsearch/react": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.6.0.tgz",
-      "integrity": "sha512-HUFut4ztcVNmqy9gp/wxNbC7pTOHhgVVkHVGCACTuLhUKUhKAF9KYHJtMiLUJxEqiFLQiuri1fWF8zqwM/cu1w==",
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.6.1.tgz",
+      "integrity": "sha512-qXZkEPvybVhSXj0K7U3bXc233tk5e8PfhoZ6MhPOiik/qUQxYC+Dn9DnoS7CxHQQhHfCvTiN0eY9M12oRghEXw==",
       "dependencies": {
         "@algolia/autocomplete-core": "1.9.3",
         "@algolia/autocomplete-preset-algolia": "1.9.3",
-        "@docsearch/css": "3.6.0",
+        "@docsearch/css": "3.6.1",
         "algoliasearch": "^4.19.1"
       },
       "peerDependencies": {
@@ -2129,9 +2236,9 @@
       }
     },
     "node_modules/@docusaurus/core": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/core/-/core-3.3.2.tgz",
-      "integrity": "sha512-PzKMydKI3IU1LmeZQDi+ut5RSuilbXnA8QdowGeJEgU8EJjmx3rBHNT1LxQxOVqNEwpWi/csLwd9bn7rUjggPA==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/core/-/core-3.5.2.tgz",
+      "integrity": "sha512-4Z1WkhCSkX4KO0Fw5m/Vuc7Q3NxBG53NE5u59Rs96fWkMPZVSrzEPP16/Nk6cWb/shK7xXPndTmalJtw7twL/w==",
       "dependencies": {
         "@babel/core": "^7.23.3",
         "@babel/generator": "^7.23.3",
@@ -2143,12 +2250,12 @@
         "@babel/runtime": "^7.22.6",
         "@babel/runtime-corejs3": "^7.22.6",
         "@babel/traverse": "^7.22.8",
-        "@docusaurus/cssnano-preset": "3.3.2",
-        "@docusaurus/logger": "3.3.2",
-        "@docusaurus/mdx-loader": "3.3.2",
-        "@docusaurus/utils": "3.3.2",
-        "@docusaurus/utils-common": "3.3.2",
-        "@docusaurus/utils-validation": "3.3.2",
+        "@docusaurus/cssnano-preset": "3.5.2",
+        "@docusaurus/logger": "3.5.2",
+        "@docusaurus/mdx-loader": "3.5.2",
+        "@docusaurus/utils": "3.5.2",
+        "@docusaurus/utils-common": "3.5.2",
+        "@docusaurus/utils-validation": "3.5.2",
         "autoprefixer": "^10.4.14",
         "babel-loader": "^9.1.3",
         "babel-plugin-dynamic-import-node": "^2.3.3",
@@ -2209,14 +2316,15 @@
         "node": ">=18.0"
       },
       "peerDependencies": {
+        "@mdx-js/react": "^3.0.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
       }
     },
     "node_modules/@docusaurus/cssnano-preset": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/cssnano-preset/-/cssnano-preset-3.3.2.tgz",
-      "integrity": "sha512-+5+epLk/Rp4vFML4zmyTATNc3Is+buMAL6dNjrMWahdJCJlMWMPd/8YfU+2PA57t8mlSbhLJ7vAZVy54cd1vRQ==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/cssnano-preset/-/cssnano-preset-3.5.2.tgz",
+      "integrity": "sha512-D3KiQXOMA8+O0tqORBrTOEQyQxNIfPm9jEaJoALjjSjc2M/ZAWcUfPQEnwr2JB2TadHw2gqWgpZckQmrVWkytA==",
       "dependencies": {
         "cssnano-preset-advanced": "^6.1.2",
         "postcss": "^8.4.38",
@@ -2228,9 +2336,9 @@
       }
     },
     "node_modules/@docusaurus/logger": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/logger/-/logger-3.3.2.tgz",
-      "integrity": "sha512-Ldu38GJ4P8g4guN7d7pyCOJ7qQugG7RVyaxrK8OnxuTlaImvQw33aDRwaX2eNmX8YK6v+//Z502F4sOZbHHCHQ==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/logger/-/logger-3.5.2.tgz",
+      "integrity": "sha512-LHC540SGkeLfyT3RHK3gAMK6aS5TRqOD4R72BEU/DE2M/TY8WwEUAMY576UUc/oNJXv8pGhBmQB6N9p3pt8LQw==",
       "dependencies": {
         "chalk": "^4.1.2",
         "tslib": "^2.6.0"
@@ -2240,13 +2348,13 @@
       }
     },
     "node_modules/@docusaurus/mdx-loader": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/mdx-loader/-/mdx-loader-3.3.2.tgz",
-      "integrity": "sha512-AFRxj/aOk3/mfYDPxE3wTbrjeayVRvNSZP7mgMuUlrb2UlPRbSVAFX1k2RbgAJrnTSwMgb92m2BhJgYRfptN3g==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/mdx-loader/-/mdx-loader-3.5.2.tgz",
+      "integrity": "sha512-ku3xO9vZdwpiMIVd8BzWV0DCqGEbCP5zs1iHfKX50vw6jX8vQo0ylYo1YJMZyz6e+JFJ17HYHT5FzVidz2IflA==",
       "dependencies": {
-        "@docusaurus/logger": "3.3.2",
-        "@docusaurus/utils": "3.3.2",
-        "@docusaurus/utils-validation": "3.3.2",
+        "@docusaurus/logger": "3.5.2",
+        "@docusaurus/utils": "3.5.2",
+        "@docusaurus/utils-validation": "3.5.2",
         "@mdx-js/mdx": "^3.0.0",
         "@slorber/remark-comment": "^1.0.0",
         "escape-html": "^1.0.3",
@@ -2278,11 +2386,11 @@
       }
     },
     "node_modules/@docusaurus/module-type-aliases": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/module-type-aliases/-/module-type-aliases-3.3.2.tgz",
-      "integrity": "sha512-b/XB0TBJah5yKb4LYuJT4buFvL0MGAb0+vJDrJtlYMguRtsEBkf2nWl5xP7h4Dlw6ol0hsHrCYzJ50kNIOEclw==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/module-type-aliases/-/module-type-aliases-3.5.2.tgz",
+      "integrity": "sha512-Z+Xu3+2rvKef/YKTMxZHsEXp1y92ac0ngjDiExRdqGTmEKtCUpkbNYH8v5eXo5Ls+dnW88n6WTa+Q54kLOkwPg==",
       "dependencies": {
-        "@docusaurus/types": "3.3.2",
+        "@docusaurus/types": "3.5.2",
         "@types/history": "^4.7.11",
         "@types/react": "*",
         "@types/react-router-config": "*",
@@ -2296,18 +2404,19 @@
       }
     },
     "node_modules/@docusaurus/plugin-content-blog": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.3.2.tgz",
-      "integrity": "sha512-fJU+dmqp231LnwDJv+BHVWft8pcUS2xVPZdeYH6/ibH1s2wQ/sLcmUrGWyIv/Gq9Ptj8XWjRPMghlxghuPPoxg==",
-      "dependencies": {
-        "@docusaurus/core": "3.3.2",
-        "@docusaurus/logger": "3.3.2",
-        "@docusaurus/mdx-loader": "3.3.2",
-        "@docusaurus/types": "3.3.2",
-        "@docusaurus/utils": "3.3.2",
-        "@docusaurus/utils-common": "3.3.2",
-        "@docusaurus/utils-validation": "3.3.2",
-        "cheerio": "^1.0.0-rc.12",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.5.2.tgz",
+      "integrity": "sha512-R7ghWnMvjSf+aeNDH0K4fjyQnt5L0KzUEnUhmf1e3jZrv3wogeytZNN6n7X8yHcMsuZHPOrctQhXWnmxu+IRRg==",
+      "dependencies": {
+        "@docusaurus/core": "3.5.2",
+        "@docusaurus/logger": "3.5.2",
+        "@docusaurus/mdx-loader": "3.5.2",
+        "@docusaurus/theme-common": "3.5.2",
+        "@docusaurus/types": "3.5.2",
+        "@docusaurus/utils": "3.5.2",
+        "@docusaurus/utils-common": "3.5.2",
+        "@docusaurus/utils-validation": "3.5.2",
+        "cheerio": "1.0.0-rc.12",
         "feed": "^4.2.2",
         "fs-extra": "^11.1.1",
         "lodash": "^4.17.21",
@@ -2322,23 +2431,25 @@
         "node": ">=18.0"
       },
       "peerDependencies": {
+        "@docusaurus/plugin-content-docs": "*",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
       }
     },
     "node_modules/@docusaurus/plugin-content-docs": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.3.2.tgz",
-      "integrity": "sha512-Dm1ri2VlGATTN3VGk1ZRqdRXWa1UlFubjaEL6JaxaK7IIFqN/Esjpl+Xw10R33loHcRww/H76VdEeYayaL76eg==",
-      "dependencies": {
-        "@docusaurus/core": "3.3.2",
-        "@docusaurus/logger": "3.3.2",
-        "@docusaurus/mdx-loader": "3.3.2",
-        "@docusaurus/module-type-aliases": "3.3.2",
-        "@docusaurus/types": "3.3.2",
-        "@docusaurus/utils": "3.3.2",
-        "@docusaurus/utils-common": "3.3.2",
-        "@docusaurus/utils-validation": "3.3.2",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.5.2.tgz",
+      "integrity": "sha512-Bt+OXn/CPtVqM3Di44vHjE7rPCEsRCB/DMo2qoOuozB9f7+lsdrHvD0QCHdBs0uhz6deYJDppAr2VgqybKPlVQ==",
+      "dependencies": {
+        "@docusaurus/core": "3.5.2",
+        "@docusaurus/logger": "3.5.2",
+        "@docusaurus/mdx-loader": "3.5.2",
+        "@docusaurus/module-type-aliases": "3.5.2",
+        "@docusaurus/theme-common": "3.5.2",
+        "@docusaurus/types": "3.5.2",
+        "@docusaurus/utils": "3.5.2",
+        "@docusaurus/utils-common": "3.5.2",
+        "@docusaurus/utils-validation": "3.5.2",
         "@types/react-router-config": "^5.0.7",
         "combine-promises": "^1.1.0",
         "fs-extra": "^11.1.1",
@@ -2357,15 +2468,15 @@
       }
     },
     "node_modules/@docusaurus/plugin-content-pages": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.3.2.tgz",
-      "integrity": "sha512-EKc9fQn5H2+OcGER8x1aR+7URtAGWySUgULfqE/M14+rIisdrBstuEZ4lUPDRrSIexOVClML82h2fDS+GSb8Ew==",
-      "dependencies": {
-        "@docusaurus/core": "3.3.2",
-        "@docusaurus/mdx-loader": "3.3.2",
-        "@docusaurus/types": "3.3.2",
-        "@docusaurus/utils": "3.3.2",
-        "@docusaurus/utils-validation": "3.3.2",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.5.2.tgz",
+      "integrity": "sha512-WzhHjNpoQAUz/ueO10cnundRz+VUtkjFhhaQ9jApyv1a46FPURO4cef89pyNIOMny1fjDz/NUN2z6Yi+5WUrCw==",
+      "dependencies": {
+        "@docusaurus/core": "3.5.2",
+        "@docusaurus/mdx-loader": "3.5.2",
+        "@docusaurus/types": "3.5.2",
+        "@docusaurus/utils": "3.5.2",
+        "@docusaurus/utils-validation": "3.5.2",
         "fs-extra": "^11.1.1",
         "tslib": "^2.6.0",
         "webpack": "^5.88.1"
@@ -2379,13 +2490,13 @@
       }
     },
     "node_modules/@docusaurus/plugin-debug": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-debug/-/plugin-debug-3.3.2.tgz",
-      "integrity": "sha512-oBIBmwtaB+YS0XlmZ3gCO+cMbsGvIYuAKkAopoCh0arVjtlyPbejzPrHuCoRHB9G7abjNZw7zoONOR8+8LM5+Q==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-debug/-/plugin-debug-3.5.2.tgz",
+      "integrity": "sha512-kBK6GlN0itCkrmHuCS6aX1wmoWc5wpd5KJlqQ1FyrF0cLDnvsYSnh7+ftdwzt7G6lGBho8lrVwkkL9/iQvaSOA==",
       "dependencies": {
-        "@docusaurus/core": "3.3.2",
-        "@docusaurus/types": "3.3.2",
-        "@docusaurus/utils": "3.3.2",
+        "@docusaurus/core": "3.5.2",
+        "@docusaurus/types": "3.5.2",
+        "@docusaurus/utils": "3.5.2",
         "fs-extra": "^11.1.1",
         "react-json-view-lite": "^1.2.0",
         "tslib": "^2.6.0"
@@ -2399,13 +2510,13 @@
       }
     },
     "node_modules/@docusaurus/plugin-google-analytics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-3.3.2.tgz",
-      "integrity": "sha512-jXhrEIhYPSClMBK6/IA8qf1/FBoxqGXZvg7EuBax9HaK9+kL3L0TJIlatd8jQJOMtds8mKw806TOCc3rtEad1A==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-3.5.2.tgz",
+      "integrity": "sha512-rjEkJH/tJ8OXRE9bwhV2mb/WP93V441rD6XnM6MIluu7rk8qg38iSxS43ga2V2Q/2ib53PcqbDEJDG/yWQRJhQ==",
       "dependencies": {
-        "@docusaurus/core": "3.3.2",
-        "@docusaurus/types": "3.3.2",
-        "@docusaurus/utils-validation": "3.3.2",
+        "@docusaurus/core": "3.5.2",
+        "@docusaurus/types": "3.5.2",
+        "@docusaurus/utils-validation": "3.5.2",
         "tslib": "^2.6.0"
       },
       "engines": {
@@ -2417,13 +2528,13 @@
       }
     },
     "node_modules/@docusaurus/plugin-google-gtag": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-3.3.2.tgz",
-      "integrity": "sha512-vcrKOHGbIDjVnNMrfbNpRQR1x6Jvcrb48kVzpBAOsKbj9rXZm/idjVAXRaewwobHdOrJkfWS/UJoxzK8wyLRBQ==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-3.5.2.tgz",
+      "integrity": "sha512-lm8XL3xLkTPHFKKjLjEEAHUrW0SZBSHBE1I+i/tmYMBsjCcUB5UJ52geS5PSiOCFVR74tbPGcPHEV/gaaxFeSA==",
       "dependencies": {
-        "@docusaurus/core": "3.3.2",
-        "@docusaurus/types": "3.3.2",
-        "@docusaurus/utils-validation": "3.3.2",
+        "@docusaurus/core": "3.5.2",
+        "@docusaurus/types": "3.5.2",
+        "@docusaurus/utils-validation": "3.5.2",
         "@types/gtag.js": "^0.0.12",
         "tslib": "^2.6.0"
       },
@@ -2436,13 +2547,13 @@
       }
     },
     "node_modules/@docusaurus/plugin-google-tag-manager": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.3.2.tgz",
-      "integrity": "sha512-ldkR58Fdeks0vC+HQ+L+bGFSJsotQsipXD+iKXQFvkOfmPIV6QbHRd7IIcm5b6UtwOiK33PylNS++gjyLUmaGw==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.5.2.tgz",
+      "integrity": "sha512-QkpX68PMOMu10Mvgvr5CfZAzZQFx8WLlOiUQ/Qmmcl6mjGK6H21WLT5x7xDmcpCoKA/3CegsqIqBR+nA137lQg==",
       "dependencies": {
-        "@docusaurus/core": "3.3.2",
-        "@docusaurus/types": "3.3.2",
-        "@docusaurus/utils-validation": "3.3.2",
+        "@docusaurus/core": "3.5.2",
+        "@docusaurus/types": "3.5.2",
+        "@docusaurus/utils-validation": "3.5.2",
         "tslib": "^2.6.0"
       },
       "engines": {
@@ -2454,16 +2565,16 @@
       }
     },
     "node_modules/@docusaurus/plugin-sitemap": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-sitemap/-/plugin-sitemap-3.3.2.tgz",
-      "integrity": "sha512-/ZI1+bwZBhAgC30inBsHe3qY9LOZS+79fRGkNdTcGHRMcdAp6Vw2pCd1gzlxd/xU+HXsNP6cLmTOrggmRp3Ujg==",
-      "dependencies": {
-        "@docusaurus/core": "3.3.2",
-        "@docusaurus/logger": "3.3.2",
-        "@docusaurus/types": "3.3.2",
-        "@docusaurus/utils": "3.3.2",
-        "@docusaurus/utils-common": "3.3.2",
-        "@docusaurus/utils-validation": "3.3.2",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/plugin-sitemap/-/plugin-sitemap-3.5.2.tgz",
+      "integrity": "sha512-DnlqYyRAdQ4NHY28TfHuVk414ft2uruP4QWCH//jzpHjqvKyXjj2fmDtI8RPUBh9K8iZKFMHRnLtzJKySPWvFA==",
+      "dependencies": {
+        "@docusaurus/core": "3.5.2",
+        "@docusaurus/logger": "3.5.2",
+        "@docusaurus/types": "3.5.2",
+        "@docusaurus/utils": "3.5.2",
+        "@docusaurus/utils-common": "3.5.2",
+        "@docusaurus/utils-validation": "3.5.2",
         "fs-extra": "^11.1.1",
         "sitemap": "^7.1.1",
         "tslib": "^2.6.0"
@@ -2477,23 +2588,23 @@
       }
     },
     "node_modules/@docusaurus/preset-classic": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/preset-classic/-/preset-classic-3.3.2.tgz",
-      "integrity": "sha512-1SDS7YIUN1Pg3BmD6TOTjhB7RSBHJRpgIRKx9TpxqyDrJ92sqtZhomDc6UYoMMLQNF2wHFZZVGFjxJhw2VpL+Q==",
-      "dependencies": {
-        "@docusaurus/core": "3.3.2",
-        "@docusaurus/plugin-content-blog": "3.3.2",
-        "@docusaurus/plugin-content-docs": "3.3.2",
-        "@docusaurus/plugin-content-pages": "3.3.2",
-        "@docusaurus/plugin-debug": "3.3.2",
-        "@docusaurus/plugin-google-analytics": "3.3.2",
-        "@docusaurus/plugin-google-gtag": "3.3.2",
-        "@docusaurus/plugin-google-tag-manager": "3.3.2",
-        "@docusaurus/plugin-sitemap": "3.3.2",
-        "@docusaurus/theme-classic": "3.3.2",
-        "@docusaurus/theme-common": "3.3.2",
-        "@docusaurus/theme-search-algolia": "3.3.2",
-        "@docusaurus/types": "3.3.2"
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/preset-classic/-/preset-classic-3.5.2.tgz",
+      "integrity": "sha512-3ihfXQ95aOHiLB5uCu+9PRy2gZCeSZoDcqpnDvf3B+sTrMvMTr8qRUzBvWkoIqc82yG5prCboRjk1SVILKx6sg==",
+      "dependencies": {
+        "@docusaurus/core": "3.5.2",
+        "@docusaurus/plugin-content-blog": "3.5.2",
+        "@docusaurus/plugin-content-docs": "3.5.2",
+        "@docusaurus/plugin-content-pages": "3.5.2",
+        "@docusaurus/plugin-debug": "3.5.2",
+        "@docusaurus/plugin-google-analytics": "3.5.2",
+        "@docusaurus/plugin-google-gtag": "3.5.2",
+        "@docusaurus/plugin-google-tag-manager": "3.5.2",
+        "@docusaurus/plugin-sitemap": "3.5.2",
+        "@docusaurus/theme-classic": "3.5.2",
+        "@docusaurus/theme-common": "3.5.2",
+        "@docusaurus/theme-search-algolia": "3.5.2",
+        "@docusaurus/types": "3.5.2"
       },
       "engines": {
         "node": ">=18.0"
@@ -2504,26 +2615,26 @@
       }
     },
     "node_modules/@docusaurus/theme-classic": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-3.3.2.tgz",
-      "integrity": "sha512-gepHFcsluIkPb4Im9ukkiO4lXrai671wzS3cKQkY9BXQgdVwsdPf/KS0Vs4Xlb0F10fTz+T3gNjkxNEgSN9M0A==",
-      "dependencies": {
-        "@docusaurus/core": "3.3.2",
-        "@docusaurus/mdx-loader": "3.3.2",
-        "@docusaurus/module-type-aliases": "3.3.2",
-        "@docusaurus/plugin-content-blog": "3.3.2",
-        "@docusaurus/plugin-content-docs": "3.3.2",
-        "@docusaurus/plugin-content-pages": "3.3.2",
-        "@docusaurus/theme-common": "3.3.2",
-        "@docusaurus/theme-translations": "3.3.2",
-        "@docusaurus/types": "3.3.2",
-        "@docusaurus/utils": "3.3.2",
-        "@docusaurus/utils-common": "3.3.2",
-        "@docusaurus/utils-validation": "3.3.2",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-3.5.2.tgz",
+      "integrity": "sha512-XRpinSix3NBv95Rk7xeMF9k4safMkwnpSgThn0UNQNumKvmcIYjfkwfh2BhwYh/BxMXQHJ/PdmNh22TQFpIaYg==",
+      "dependencies": {
+        "@docusaurus/core": "3.5.2",
+        "@docusaurus/mdx-loader": "3.5.2",
+        "@docusaurus/module-type-aliases": "3.5.2",
+        "@docusaurus/plugin-content-blog": "3.5.2",
+        "@docusaurus/plugin-content-docs": "3.5.2",
+        "@docusaurus/plugin-content-pages": "3.5.2",
+        "@docusaurus/theme-common": "3.5.2",
+        "@docusaurus/theme-translations": "3.5.2",
+        "@docusaurus/types": "3.5.2",
+        "@docusaurus/utils": "3.5.2",
+        "@docusaurus/utils-common": "3.5.2",
+        "@docusaurus/utils-validation": "3.5.2",
         "@mdx-js/react": "^3.0.0",
         "clsx": "^2.0.0",
         "copy-text-to-clipboard": "^3.2.0",
-        "infima": "0.2.0-alpha.43",
+        "infima": "0.2.0-alpha.44",
         "lodash": "^4.17.21",
         "nprogress": "^0.2.0",
         "postcss": "^8.4.26",
@@ -2543,17 +2654,14 @@
       }
     },
     "node_modules/@docusaurus/theme-common": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/theme-common/-/theme-common-3.3.2.tgz",
-      "integrity": "sha512-kXqSaL/sQqo4uAMQ4fHnvRZrH45Xz2OdJ3ABXDS7YVGPSDTBC8cLebFrRR4YF9EowUHto1UC/EIklJZQMG/usA==",
-      "dependencies": {
-        "@docusaurus/mdx-loader": "3.3.2",
-        "@docusaurus/module-type-aliases": "3.3.2",
-        "@docusaurus/plugin-content-blog": "3.3.2",
-        "@docusaurus/plugin-content-docs": "3.3.2",
-        "@docusaurus/plugin-content-pages": "3.3.2",
-        "@docusaurus/utils": "3.3.2",
-        "@docusaurus/utils-common": "3.3.2",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-common/-/theme-common-3.5.2.tgz",
+      "integrity": "sha512-QXqlm9S6x9Ibwjs7I2yEDgsCocp708DrCrgHgKwg2n2AY0YQ6IjU0gAK35lHRLOvAoJUfCKpQAwUykB0R7+Eew==",
+      "dependencies": {
+        "@docusaurus/mdx-loader": "3.5.2",
+        "@docusaurus/module-type-aliases": "3.5.2",
+        "@docusaurus/utils": "3.5.2",
+        "@docusaurus/utils-common": "3.5.2",
         "@types/history": "^4.7.11",
         "@types/react": "*",
         "@types/react-router-config": "*",
@@ -2567,23 +2675,24 @@
         "node": ">=18.0"
       },
       "peerDependencies": {
+        "@docusaurus/plugin-content-docs": "*",
         "react": "^18.0.0",
         "react-dom": "^18.0.0"
       }
     },
     "node_modules/@docusaurus/theme-search-algolia": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.3.2.tgz",
-      "integrity": "sha512-qLkfCl29VNBnF1MWiL9IyOQaHxUvicZp69hISyq/xMsNvFKHFOaOfk9xezYod2Q9xx3xxUh9t/QPigIei2tX4w==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.5.2.tgz",
+      "integrity": "sha512-qW53kp3VzMnEqZGjakaV90sst3iN1o32PH+nawv1uepROO8aEGxptcq2R5rsv7aBShSRbZwIobdvSYKsZ5pqvA==",
       "dependencies": {
         "@docsearch/react": "^3.5.2",
-        "@docusaurus/core": "3.3.2",
-        "@docusaurus/logger": "3.3.2",
-        "@docusaurus/plugin-content-docs": "3.3.2",
-        "@docusaurus/theme-common": "3.3.2",
-        "@docusaurus/theme-translations": "3.3.2",
-        "@docusaurus/utils": "3.3.2",
-        "@docusaurus/utils-validation": "3.3.2",
+        "@docusaurus/core": "3.5.2",
+        "@docusaurus/logger": "3.5.2",
+        "@docusaurus/plugin-content-docs": "3.5.2",
+        "@docusaurus/theme-common": "3.5.2",
+        "@docusaurus/theme-translations": "3.5.2",
+        "@docusaurus/utils": "3.5.2",
+        "@docusaurus/utils-validation": "3.5.2",
         "algoliasearch": "^4.18.0",
         "algoliasearch-helper": "^3.13.3",
         "clsx": "^2.0.0",
@@ -2602,9 +2711,9 @@
       }
     },
     "node_modules/@docusaurus/theme-translations": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/theme-translations/-/theme-translations-3.3.2.tgz",
-      "integrity": "sha512-bPuiUG7Z8sNpGuTdGnmKl/oIPeTwKr0AXLGu9KaP6+UFfRZiyWbWE87ti97RrevB2ffojEdvchNujparR3jEZQ==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/theme-translations/-/theme-translations-3.5.2.tgz",
+      "integrity": "sha512-GPZLcu4aT1EmqSTmbdpVrDENGR2yObFEX8ssEFYTCiAIVc0EihNSdOIBTazUvgNqwvnoU1A8vIs1xyzc3LITTw==",
       "dependencies": {
         "fs-extra": "^11.1.1",
         "tslib": "^2.6.0"
@@ -2614,9 +2723,9 @@
       }
     },
     "node_modules/@docusaurus/types": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/types/-/types-3.3.2.tgz",
-      "integrity": "sha512-5p201S7AZhliRxTU7uMKtSsoC8mgPA9bs9b5NQg1IRdRxJfflursXNVsgc3PcMqiUTul/v1s3k3rXXFlRE890w==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/types/-/types-3.5.2.tgz",
+      "integrity": "sha512-N6GntLXoLVUwkZw7zCxwy9QiuEXIcTVzA9AkmNw16oc0AP3SXLrMmDMMBIfgqwuKWa6Ox6epHol9kMtJqekACw==",
       "dependencies": {
         "@mdx-js/mdx": "^3.0.0",
         "@types/history": "^4.7.11",
@@ -2634,12 +2743,12 @@
       }
     },
     "node_modules/@docusaurus/utils": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/utils/-/utils-3.3.2.tgz",
-      "integrity": "sha512-f4YMnBVymtkSxONv4Y8js3Gez9IgHX+Lcg6YRMOjVbq8sgCcdYK1lf6SObAuz5qB/mxiSK7tW0M9aaiIaUSUJg==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/utils/-/utils-3.5.2.tgz",
+      "integrity": "sha512-33QvcNFh+Gv+C2dP9Y9xWEzMgf3JzrpL2nW9PopidiohS1nDcyknKRx2DWaFvyVTTYIkkABVSr073VTj/NITNA==",
       "dependencies": {
-        "@docusaurus/logger": "3.3.2",
-        "@docusaurus/utils-common": "3.3.2",
+        "@docusaurus/logger": "3.5.2",
+        "@docusaurus/utils-common": "3.5.2",
         "@svgr/webpack": "^8.1.0",
         "escape-string-regexp": "^4.0.0",
         "file-loader": "^6.2.0",
@@ -2656,6 +2765,7 @@
         "shelljs": "^0.8.5",
         "tslib": "^2.6.0",
         "url-loader": "^4.1.1",
+        "utility-types": "^3.10.0",
         "webpack": "^5.88.1"
       },
       "engines": {
@@ -2671,9 +2781,9 @@
       }
     },
     "node_modules/@docusaurus/utils-common": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/utils-common/-/utils-common-3.3.2.tgz",
-      "integrity": "sha512-QWFTLEkPYsejJsLStgtmetMFIA3pM8EPexcZ4WZ7b++gO5jGVH7zsipREnCHzk6+eDgeaXfkR6UPaTt86bp8Og==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/utils-common/-/utils-common-3.5.2.tgz",
+      "integrity": "sha512-i0AZjHiRgJU6d7faQngIhuHKNrszpL/SHQPgF1zH4H+Ij6E9NBYGy6pkcGWToIv7IVPbs+pQLh1P3whn0gWXVg==",
       "dependencies": {
         "tslib": "^2.6.0"
       },
@@ -2690,15 +2800,17 @@
       }
     },
     "node_modules/@docusaurus/utils-validation": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@docusaurus/utils-validation/-/utils-validation-3.3.2.tgz",
-      "integrity": "sha512-itDgFs5+cbW9REuC7NdXals4V6++KifgVMzoGOOOSIifBQw+8ULhy86u5e1lnptVL0sv8oAjq2alO7I40GR7pA==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docusaurus/utils-validation/-/utils-validation-3.5.2.tgz",
+      "integrity": "sha512-m+Foq7augzXqB6HufdS139PFxDC5d5q2QKZy8q0qYYvGdI6nnlNsGH4cIGsgBnV7smz+mopl3g4asbSDvMV0jA==",
       "dependencies": {
-        "@docusaurus/logger": "3.3.2",
-        "@docusaurus/utils": "3.3.2",
-        "@docusaurus/utils-common": "3.3.2",
+        "@docusaurus/logger": "3.5.2",
+        "@docusaurus/utils": "3.5.2",
+        "@docusaurus/utils-common": "3.5.2",
+        "fs-extra": "^11.2.0",
         "joi": "^17.9.2",
         "js-yaml": "^4.1.0",
+        "lodash": "^4.17.21",
         "tslib": "^2.6.0"
       },
       "engines": {
@@ -3282,24 +3394,6 @@
         "@types/ms": "*"
       }
     },
-    "node_modules/@types/eslint": {
-      "version": "8.56.10",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.10.tgz",
-      "integrity": "sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==",
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -3403,9 +3497,9 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
     },
     "node_modules/@types/mdast": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.3.tgz",
-      "integrity": "sha512-LsjtqsyF+d2/yFOYaN22dHZI1Cpwkrj+g06G8+qtUKlhovPW89YhqSnfKtMbkgmEtYpH2gydRNULd6y8mciAFg==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
       "dependencies": {
         "@types/unist": "*"
       }
@@ -3553,9 +3647,9 @@
       }
     },
     "node_modules/@types/unist": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz",
-      "integrity": "sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ=="
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
     },
     "node_modules/@types/ws": {
       "version": "8.5.10",
@@ -3766,10 +3860,10 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "peerDependencies": {
         "acorn": "^8"
       }
@@ -3853,31 +3947,31 @@
       }
     },
     "node_modules/algoliasearch": {
-      "version": "4.23.3",
-      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.23.3.tgz",
-      "integrity": "sha512-Le/3YgNvjW9zxIQMRhUHuhiUjAlKY/zsdZpfq4dlLqg6mEm0nL6yk+7f2hDOtLpxsgE4jSzDmvHL7nXdBp5feg==",
-      "dependencies": {
-        "@algolia/cache-browser-local-storage": "4.23.3",
-        "@algolia/cache-common": "4.23.3",
-        "@algolia/cache-in-memory": "4.23.3",
-        "@algolia/client-account": "4.23.3",
-        "@algolia/client-analytics": "4.23.3",
-        "@algolia/client-common": "4.23.3",
-        "@algolia/client-personalization": "4.23.3",
-        "@algolia/client-search": "4.23.3",
-        "@algolia/logger-common": "4.23.3",
-        "@algolia/logger-console": "4.23.3",
-        "@algolia/recommend": "4.23.3",
-        "@algolia/requester-browser-xhr": "4.23.3",
-        "@algolia/requester-common": "4.23.3",
-        "@algolia/requester-node-http": "4.23.3",
-        "@algolia/transporter": "4.23.3"
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.24.0.tgz",
+      "integrity": "sha512-bf0QV/9jVejssFBmz2HQLxUadxk574t4iwjCKp5E7NBzwKkrDEhKPISIIjAU/p6K5qDx3qoeh4+26zWN1jmw3g==",
+      "dependencies": {
+        "@algolia/cache-browser-local-storage": "4.24.0",
+        "@algolia/cache-common": "4.24.0",
+        "@algolia/cache-in-memory": "4.24.0",
+        "@algolia/client-account": "4.24.0",
+        "@algolia/client-analytics": "4.24.0",
+        "@algolia/client-common": "4.24.0",
+        "@algolia/client-personalization": "4.24.0",
+        "@algolia/client-search": "4.24.0",
+        "@algolia/logger-common": "4.24.0",
+        "@algolia/logger-console": "4.24.0",
+        "@algolia/recommend": "4.24.0",
+        "@algolia/requester-browser-xhr": "4.24.0",
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/requester-node-http": "4.24.0",
+        "@algolia/transporter": "4.24.0"
       }
     },
     "node_modules/algoliasearch-helper": {
-      "version": "3.19.0",
-      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.19.0.tgz",
-      "integrity": "sha512-AaSb5DZDMZmDQyIy6lf4aL0OZGgyIdqvLIIvSuVQOIOqfhrYSY7TvotIFI2x0Q3cP3xUpTd7lI1astUC4aXBJw==",
+      "version": "3.22.5",
+      "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.22.5.tgz",
+      "integrity": "sha512-lWvhdnc+aKOKx8jyA3bsdEgHzm/sglC4cYdMG4xSQyRiPLJVJtH/IVYZG3Hp6PkTEhQqhyVYkeP9z2IlcHJsWw==",
       "dependencies": {
         "@algolia/events": "^4.0.1"
       },
@@ -3885,6 +3979,41 @@
         "algoliasearch": ">= 3.1 < 6"
       }
     },
+    "node_modules/algoliasearch/node_modules/@algolia/client-common": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.24.0.tgz",
+      "integrity": "sha512-bc2ROsNL6w6rqpl5jj/UywlIYC21TwSSoFHKl01lYirGMW+9Eek6r02Tocg4gZ8HAw3iBvu6XQiM3BEbmEMoiA==",
+      "dependencies": {
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/transporter": "4.24.0"
+      }
+    },
+    "node_modules/algoliasearch/node_modules/@algolia/client-search": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.24.0.tgz",
+      "integrity": "sha512-uRW6EpNapmLAD0mW47OXqTP8eiIx5F6qN9/x/7HHO6owL3N1IXqydGwW5nhDFBrV+ldouro2W1VX3XlcUXEFCA==",
+      "dependencies": {
+        "@algolia/client-common": "4.24.0",
+        "@algolia/requester-common": "4.24.0",
+        "@algolia/transporter": "4.24.0"
+      }
+    },
+    "node_modules/algoliasearch/node_modules/@algolia/requester-browser-xhr": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.24.0.tgz",
+      "integrity": "sha512-Z2NxZMb6+nVXSjF13YpjYTdvV3032YTBSGm2vnYvYPA6mMxzM3v5rsCiSspndn9rzIW4Qp1lPHBvuoKJV6jnAA==",
+      "dependencies": {
+        "@algolia/requester-common": "4.24.0"
+      }
+    },
+    "node_modules/algoliasearch/node_modules/@algolia/requester-node-http": {
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.24.0.tgz",
+      "integrity": "sha512-JF18yTjNOVYvU/L3UosRcvbPMGT9B+/GQWNWnenIImglzNVGpyzChkXLnrSf6uxwVNO6ESGu6oN8MqcGQcjQJw==",
+      "dependencies": {
+        "@algolia/requester-common": "4.24.0"
+      }
+    },
     "node_modules/ansi-align": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz",
@@ -3980,9 +4109,9 @@
       }
     },
     "node_modules/astring": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/astring/-/astring-1.8.6.tgz",
-      "integrity": "sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/astring/-/astring-1.9.0.tgz",
+      "integrity": "sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==",
       "bin": {
         "astring": "bin/astring"
       }
@@ -3996,9 +4125,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.19",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
-      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
       "funding": [
         {
           "type": "opencollective",
@@ -4014,11 +4143,11 @@
         }
       ],
       "dependencies": {
-        "browserslist": "^4.23.0",
-        "caniuse-lite": "^1.0.30001599",
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.0.1",
         "postcss-value-parser": "^4.2.0"
       },
       "bin": {
@@ -4138,9 +4267,9 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "dependencies": {
         "bytes": "3.1.2",
         "content-type": "~1.0.5",
@@ -4150,7 +4279,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -4226,20 +4355,20 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/browserslist": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.0.tgz",
+      "integrity": "sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==",
       "funding": [
         {
           "type": "opencollective",
@@ -4255,10 +4384,10 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.668",
-        "node-releases": "^2.0.14",
-        "update-browserslist-db": "^1.0.13"
+        "caniuse-lite": "^1.0.30001663",
+        "electron-to-chromium": "^1.5.28",
+        "node-releases": "^2.0.18",
+        "update-browserslist-db": "^1.1.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -4363,9 +4492,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001616",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
-      "integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
+      "version": "1.0.30001663",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz",
+      "integrity": "sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==",
       "funding": [
         {
           "type": "opencollective",
@@ -5624,9 +5753,9 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.758",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.758.tgz",
-      "integrity": "sha512-/o9x6TCdrYZBMdGeTifAP3wlF/gVT+TtWJe3BSmtNh92Mw81U9hrYwW9OAGUh+sEOX/yz5e34sksqRruZbjYrw=="
+      "version": "1.5.28",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.28.tgz",
+      "integrity": "sha512-VufdJl+rzaKZoYVUijN13QcXVF5dWPZANeFTLNy+OSpHdDL5ynXTF35+60RSBbaQYB1ae723lQXHCrf4pyLsMw=="
     },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
@@ -5647,26 +5776,26 @@
       }
     },
     "node_modules/emoticon": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/emoticon/-/emoticon-4.0.1.tgz",
-      "integrity": "sha512-dqx7eA9YaqyvYtUhJwT4rC1HIp82j5ybS1/vQ42ur+jBe17dJMwZE4+gvL1XadSFfxaPFFGt3Xsw+Y8akThDlw==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/emoticon/-/emoticon-4.1.0.tgz",
+      "integrity": "sha512-VWZfnxqwNcc51hIy/sbOdEem6D+cVtpPzEEtVAFdaas30+1dgkyaOQ4sQ6Bp0tOMqWO1v+HQfYaoodOkdhK6SQ==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
     },
     "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.16.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
-      "integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -5855,12 +5984,11 @@
       }
     },
     "node_modules/estree-util-value-to-estree": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-3.1.1.tgz",
-      "integrity": "sha512-5mvUrF2suuv5f5cGDnDphIy4/gW86z82kl5qG6mM9z04SEQI4FB5Apmaw/TGEf3l55nLtMs5s51dmhUzvAHQCA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-3.1.2.tgz",
+      "integrity": "sha512-S0gW2+XZkmsx00tU2uJ4L9hUT7IFabbml9pHh2WQqFmAbxit++YGZne0sKJbNwkj9Wvg9E4uqWl4nCIFQMmfag==",
       "dependencies": {
-        "@types/estree": "^1.0.0",
-        "is-plain-obj": "^4.0.0"
+        "@types/estree": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/remcohaszing"
@@ -5962,36 +6090,36 @@
       }
     },
     "node_modules/express": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
+        "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.10",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -6027,9 +6155,9 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/express/node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ=="
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
     },
     "node_modules/express/node_modules/range-parser": {
       "version": "1.2.1",
@@ -6203,9 +6331,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -6214,12 +6342,12 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -6873,9 +7001,9 @@
       }
     },
     "node_modules/hast-util-raw": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.0.3.tgz",
-      "integrity": "sha512-ICWvVOF2fq4+7CMmtCPD5CM4QKjPbHpPotE6+8tDooV0ZuyJVUzHsrNX+O5NaRbieTf0F7FfeBOMAwi6Td0+yQ==",
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.0.4.tgz",
+      "integrity": "sha512-LHE65TD2YiNsHD3YuXcKPHXPLuYh/gjp12mOfU8jxSrm1f/yJpsb0F/KKljS6U9LJoP0Ux+tCe8iJ2AsPzTdgA==",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "@types/unist": "^3.0.0",
@@ -6950,16 +7078,16 @@
       }
     },
     "node_modules/hast-util-to-jsx-runtime/node_modules/inline-style-parser": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz",
-      "integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g=="
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+      "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q=="
     },
     "node_modules/hast-util-to-jsx-runtime/node_modules/style-to-object": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.6.tgz",
-      "integrity": "sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
+      "integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
       "dependencies": {
-        "inline-style-parser": "0.2.3"
+        "inline-style-parser": "0.2.4"
       }
     },
     "node_modules/hast-util-to-parse5": {
@@ -7415,9 +7543,9 @@
       }
     },
     "node_modules/infima": {
-      "version": "0.2.0-alpha.43",
-      "resolved": "https://registry.npmjs.org/infima/-/infima-0.2.0-alpha.43.tgz",
-      "integrity": "sha512-2uw57LvUqW0rK/SWYnd/2rRfxNA5DDNOh33jxF7fy46VWoNhGxiUQyVZHbBMjQ33mQem0cjdDVwgWVAmlRfgyQ==",
+      "version": "0.2.0-alpha.44",
+      "resolved": "https://registry.npmjs.org/infima/-/infima-0.2.0-alpha.44.tgz",
+      "integrity": "sha512-tuRkUSO/lB3rEhLJk25atwAjgLuzq070+pOW8XcvpHky/YbENnRRdPd85IBkyeTgttmOy5ah+yHYsK1HhUd4lQ==",
       "engines": {
         "node": ">=12"
       }
@@ -7807,9 +7935,9 @@
       }
     },
     "node_modules/joi": {
-      "version": "17.13.1",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.1.tgz",
-      "integrity": "sha512-vaBlIKCyo4FCUtCm7Eu4QZd/q02bWcxfUO6YSXAZOWF6gzcLBeba8kwotUdYJjDLW8Cz8RywsSOqiNJZW0mNvg==",
+      "version": "17.13.3",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.13.3.tgz",
+      "integrity": "sha512-otDA4ldcIx+ZXsKHWmp0YizCweVRZG96J10b0FevjfuncLO1oX59THoAmHkNubYJ+9gWsYsp5k8v4ib6oDv1fA==",
       "dependencies": {
         "@hapi/hoek": "^9.3.0",
         "@hapi/topo": "^5.1.0",
@@ -8121,9 +8249,9 @@
       }
     },
     "node_modules/mdast-util-from-markdown": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.0.tgz",
-      "integrity": "sha512-n7MTOr/z+8NAX/wmhhDji8O3bRvPTV/U0oTCaZJkjhPSKTPhS3xufVhKGF8s1pJ7Ox4QgoIU7KHseh09S+9rTA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.1.tgz",
+      "integrity": "sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==",
       "dependencies": {
         "@types/mdast": "^4.0.0",
         "@types/unist": "^3.0.0",
@@ -8205,9 +8333,9 @@
       }
     },
     "node_modules/mdast-util-gfm-autolink-literal": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.0.tgz",
-      "integrity": "sha512-FyzMsduZZHSc3i0Px3PQcBT4WJY/X/RCtEJKuybiC6sjPqLv7h1yqAkmILZtuxMSsUyaLUWNp71+vQH2zqp5cg==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
       "dependencies": {
         "@types/mdast": "^4.0.0",
         "ccount": "^2.0.0",
@@ -8332,9 +8460,9 @@
       }
     },
     "node_modules/mdast-util-mdx-expression": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.0.tgz",
-      "integrity": "sha512-fGCu8eWdKUKNu5mohVGkhBXCXGnOTLuFqOvGMvdikr+J1w7lDJgxThOKpwRWzzbyXAU2hhSwsmssOY4yTokluw==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
       "dependencies": {
         "@types/estree-jsx": "^1.0.0",
         "@types/hast": "^3.0.0",
@@ -8349,9 +8477,9 @@
       }
     },
     "node_modules/mdast-util-mdx-jsx": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.2.tgz",
-      "integrity": "sha512-eKMQDeywY2wlHc97k5eD8VC+9ASMjN8ItEZQNGwJ6E0XWKiW/Z0V5/H8pvoXUf+y+Mj0VIgeRRbujBmFn4FTyA==",
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.3.tgz",
+      "integrity": "sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==",
       "dependencies": {
         "@types/estree-jsx": "^1.0.0",
         "@types/hast": "^3.0.0",
@@ -8363,7 +8491,6 @@
         "mdast-util-to-markdown": "^2.0.0",
         "parse-entities": "^4.0.0",
         "stringify-entities": "^4.0.0",
-        "unist-util-remove-position": "^5.0.0",
         "unist-util-stringify-position": "^4.0.0",
         "vfile-message": "^4.0.0"
       },
@@ -8403,9 +8530,9 @@
       }
     },
     "node_modules/mdast-util-to-hast": {
-      "version": "13.1.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.1.0.tgz",
-      "integrity": "sha512-/e2l/6+OdGp/FB+ctrJ9Avz71AN/GRH3oi/3KAx/kMnoUsD6q0woXlDT8lLEeViVKE7oZxE7RXzvO3T8kF2/sA==",
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "@types/mdast": "^4.0.0",
@@ -8478,9 +8605,12 @@
       }
     },
     "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/merge-stream": {
       "version": "2.0.0",
@@ -8624,9 +8754,9 @@
       ]
     },
     "node_modules/micromark-extension-directive": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-3.0.0.tgz",
-      "integrity": "sha512-61OI07qpQrERc+0wEysLHMvoiO3s2R56x5u7glHq2Yqq6EHbH4dW25G9GfDdGCDYqA21KE6DWgNSzxSwHc2hSg==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-3.0.2.tgz",
+      "integrity": "sha512-wjcXHgk+PPdmvR58Le9d7zQYWy+vKEU9Se44p2CrCDPiLr2FMyiT4Fyb5UFKFC66wGB3kPlgD7q3TnoqPS7SZA==",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-factory-space": "^2.0.0",
@@ -8763,9 +8893,9 @@
       }
     },
     "node_modules/micromark-extension-gfm-autolink-literal": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.0.0.tgz",
-      "integrity": "sha512-rTHfnpt/Q7dEAK1Y5ii0W8bhfJlVJFnJMHIPisfPK3gpVNuOP0VnRl96+YJ3RYWV/P4gFeQoGKNlT3RhuvpqAg==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
       "dependencies": {
         "micromark-util-character": "^2.0.0",
         "micromark-util-sanitize-uri": "^2.0.0",
@@ -8812,9 +8942,9 @@
       ]
     },
     "node_modules/micromark-extension-gfm-footnote": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.0.0.tgz",
-      "integrity": "sha512-6Rzu0CYRKDv3BfLAUnZsSlzx3ak6HAoI85KTiijuKIz5UxZxbUI+pD6oHgw+6UtQuiRwnGRhzMmPRv4smcz0fg==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-core-commonmark": "^2.0.0",
@@ -8884,9 +9014,9 @@
       ]
     },
     "node_modules/micromark-extension-gfm-strikethrough": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.0.0.tgz",
-      "integrity": "sha512-c3BR1ClMp5fxxmwP6AoOY2fXO9U8uFMKs4ADD66ahLTNcwzSCyRVU4k7LPV5Nxo/VJiR4TdzxRQY2v3qIUceCw==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-util-chunked": "^2.0.0",
@@ -8916,9 +9046,9 @@
       ]
     },
     "node_modules/micromark-extension-gfm-table": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.0.0.tgz",
-      "integrity": "sha512-PoHlhypg1ItIucOaHmKE8fbin3vTLpDOUg8KAr8gRCF1MOZI9Nquq2i/44wFvviM4WuxJzc3demT8Y3dkfvYrw==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.0.tgz",
+      "integrity": "sha512-Ub2ncQv+fwD70/l4ou27b4YzfNaCJOvyX4HxXU15m7mpYY+rjuWzsLIPZHJL253Z643RpbcP1oeIJlQ/SKW67g==",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-factory-space": "^2.0.0",
@@ -8997,9 +9127,9 @@
       }
     },
     "node_modules/micromark-extension-gfm-task-list-item": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.0.1.tgz",
-      "integrity": "sha512-cY5PzGcnULaN5O7T+cOzfMoHjBW7j+T9D2sucA5d/KbsBTPcYdebm9zUd9zzdgJGCwahV+/W78Z3nbulBYVbTw==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
       "dependencies": {
         "devlop": "^1.0.0",
         "micromark-factory-space": "^2.0.0",
@@ -9144,9 +9274,9 @@
       ]
     },
     "node_modules/micromark-extension-mdx-jsx": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.0.tgz",
-      "integrity": "sha512-uvhhss8OGuzR4/N17L1JwvmJIpPhAd8oByMawEKx6NVdBCbesjH4t+vjEp3ZXft9DwvlKSD07fCeI44/N0Vf2w==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-3.0.1.tgz",
+      "integrity": "sha512-vNuFb9czP8QCtAQcEJn0UJQJZA8Dk6DXKBqx+bg/w0WGuSxDxNr7hErW89tHUY31dUW4NqEOWwmEUNhjTFmHkg==",
       "dependencies": {
         "@types/acorn": "^4.0.0",
         "@types/estree": "^1.0.0",
@@ -9155,6 +9285,7 @@
         "micromark-factory-mdx-expression": "^2.0.0",
         "micromark-factory-space": "^2.0.0",
         "micromark-util-character": "^2.0.0",
+        "micromark-util-events-to-acorn": "^2.0.0",
         "micromark-util-symbol": "^2.0.0",
         "micromark-util-types": "^2.0.0",
         "vfile-message": "^4.0.0"
@@ -9412,9 +9543,9 @@
       ]
     },
     "node_modules/micromark-factory-mdx-expression": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.1.tgz",
-      "integrity": "sha512-F0ccWIUHRLRrYp5TC9ZYXmZo+p2AM13ggbsW4T0b5CRKP8KHVRB8t4pwtBgTxtjRmwrK0Irwm7vs2JOZabHZfg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-factory-mdx-expression/-/micromark-factory-mdx-expression-2.0.2.tgz",
+      "integrity": "sha512-5E5I2pFzJyg2CtemqAbcyCktpHXuJbABnsb32wX2U8IQKhhVFBqkcZR5LRm1WVoFqa4kTueZK4abep7wdo9nrw==",
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -9428,6 +9559,7 @@
       "dependencies": {
         "@types/estree": "^1.0.0",
         "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
         "micromark-util-character": "^2.0.0",
         "micromark-util-events-to-acorn": "^2.0.0",
         "micromark-util-symbol": "^2.0.0",
@@ -9436,6 +9568,25 @@
         "vfile-message": "^4.0.0"
       }
     },
+    "node_modules/micromark-factory-mdx-expression/node_modules/micromark-factory-space": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
+      "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
     "node_modules/micromark-factory-mdx-expression/node_modules/micromark-util-character": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
@@ -10175,11 +10326,11 @@
       ]
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -10365,9 +10516,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -10432,9 +10583,12 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -10661,9 +10815,9 @@
       }
     },
     "node_modules/parse-entities/node_modules/@types/unist": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
-      "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
     },
     "node_modules/parse-json": {
       "version": "5.2.0",
@@ -10762,9 +10916,9 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz",
+      "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==",
       "dependencies": {
         "isarray": "0.0.1"
       }
@@ -10788,9 +10942,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -11470,9 +11624,9 @@
       }
     },
     "node_modules/prism-react-renderer": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.3.1.tgz",
-      "integrity": "sha512-Rdf+HzBLR7KYjzpJ1rSoxT9ioO85nZngQEoFIhL07XhtJHlCU3SOz0GJ6+qvMyQe0Se+BV3qpe6Yd/NmQF5Juw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.0.tgz",
+      "integrity": "sha512-327BsVCD/unU4CNLZTWVHyUHKnsqcvj2qbPlQ8MiBE2eq2rgctjigPA1Gp9HLF83kZ20zNN6jgizHJeEsyFYOw==",
       "dependencies": {
         "@types/prismjs": "^1.26.0",
         "clsx": "^2.0.0"
@@ -11570,11 +11724,11 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       },
       "engines": {
         "node": ">=0.6"
@@ -11854,9 +12008,9 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-json-view-lite": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-1.4.0.tgz",
-      "integrity": "sha512-wh6F6uJyYAmQ4fK0e8dSQMEWuvTs2Wr3el3sLD9bambX1+pSWUVXIz1RFaoy3TI1mZ0FqdpKq9YgbgTTgyrmXA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-1.5.0.tgz",
+      "integrity": "sha512-nWqA1E4jKPklL2jvHWs6s+7Na0qNgw9HCP6xehdQJeg6nPBTFZgGwyko9Q0oj+jQWKTTVRS30u0toM5wiuL3iw==",
       "engines": {
         "node": ">=14"
       },
@@ -12192,9 +12346,9 @@
       }
     },
     "node_modules/remark-rehype": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.0.tgz",
-      "integrity": "sha512-z3tJrAs2kIs1AqIIy6pzHmAHlF1hWQ+OdY4/hv+Wxe35EhyLKcajL33iUEn3ScxtFox9nUvRufR/Zre8Q08H/g==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.1.tgz",
+      "integrity": "sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "@types/mdast": "^4.0.0",
@@ -12420,9 +12574,9 @@
       "integrity": "sha512-PGMBq03+TTG/p/cRB7HCLKJ1MgDIi07+QU1faSjiYRfmY5UsAttV9Hs08jDAHVwcOwmVLcSJkpwyfXszVjWfIQ=="
     },
     "node_modules/rtlcss": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.1.1.tgz",
-      "integrity": "sha512-/oVHgBtnPNcggP2aVXQjSy6N1mMAfHg4GSag0QtZBlD5bdDgAHwr4pydqJGd+SUCu9260+Pjqbjwtvu7EMH1KQ==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.3.0.tgz",
+      "integrity": "sha512-FI+pHEn7Wc4NqKXMXFM+VAYKEj/mRIcW4h24YVwVtyjI+EqGrLc2Hx/Ny0lrZ21cBWU2goLy36eqMcNj3AQJig==",
       "dependencies": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0",
@@ -12483,9 +12637,9 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/sax": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
-      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA=="
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg=="
     },
     "node_modules/scheduler": {
       "version": "0.23.2",
@@ -12514,9 +12668,9 @@
       }
     },
     "node_modules/search-insights": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.13.0.tgz",
-      "integrity": "sha512-Orrsjf9trHHxFRuo9/rzm0KIWmgzE8RMlZMzuhZOJ01Rnz3D0YBAe+V6473t6/H6c7irs6Lt48brULAiRWb3Vw==",
+      "version": "2.17.2",
+      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.2.tgz",
+      "integrity": "sha512-zFNpOpUO+tY2D85KrxJ+aqwnIfdEGi06UH2+xEb+Bp9Mwznmauqc9djbnBibJO5mpfUPPa8st6Sx65+vbeO45g==",
       "peer": true
     },
     "node_modules/section-matter": {
@@ -12574,9 +12728,9 @@
       }
     },
     "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
       "dependencies": {
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -12609,6 +12763,14 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/send/node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -12721,14 +12883,14 @@
       }
     },
     "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "dependencies": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -12855,9 +13017,9 @@
       "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
     },
     "node_modules/sitemap": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
-      "integrity": "sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.2.tgz",
+      "integrity": "sha512-ARCqzHJ0p4gWt+j7NlU5eDlIO9+Rkr/JhPFZKKQ1l5GCus7rJH4UdrlVAh0xC/gDS/Qir2UMxqYNHtsKr2rpCw==",
       "dependencies": {
         "@types/node": "^17.0.5",
         "@types/sax": "^1.2.1",
@@ -13543,9 +13705,9 @@
       }
     },
     "node_modules/unified": {
-      "version": "11.0.4",
-      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.4.tgz",
-      "integrity": "sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==",
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
       "dependencies": {
         "@types/unist": "^3.0.0",
         "bail": "^2.0.0",
@@ -13610,19 +13772,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/unist-util-remove-position": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
-      "integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
-      "dependencies": {
-        "@types/unist": "^3.0.0",
-        "unist-util-visit": "^5.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/unist-util-stringify-position": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
@@ -13679,9 +13828,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.15",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.15.tgz",
-      "integrity": "sha512-K9HWH62x3/EalU1U6sjSZiylm9C8tgq2mSvshZpqc7QE69RaA2qjhkW2HlNA0tFpEbtyFz7HTqbSdN4MSwUodA==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -13698,7 +13847,7 @@
       ],
       "dependencies": {
         "escalade": "^3.1.2",
-        "picocolors": "^1.0.0"
+        "picocolors": "^1.0.1"
       },
       "bin": {
         "update-browserslist-db": "cli.js"
@@ -13931,12 +14080,11 @@
       }
     },
     "node_modules/vfile": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
-      "integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
       "dependencies": {
         "@types/unist": "^3.0.0",
-        "unist-util-stringify-position": "^4.0.0",
         "vfile-message": "^4.0.0"
       },
       "funding": {
@@ -13945,9 +14093,9 @@
       }
     },
     "node_modules/vfile-location": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.2.tgz",
-      "integrity": "sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
       "dependencies": {
         "@types/unist": "^3.0.0",
         "vfile": "^6.0.0"
@@ -14000,20 +14148,19 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -14186,9 +14333,9 @@
       }
     },
     "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -14430,9 +14577,9 @@
       }
     },
     "node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "engines": {
         "node": ">=8.3.0"
       },
diff --git a/docs/document/package.json b/docs/document/package.json
index 9a09273cac..599892e1e5 100644
--- a/docs/document/package.json
+++ b/docs/document/package.json
@@ -10,16 +10,16 @@
     "serve": "docusaurus serve"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.3.2",
-    "@docusaurus/preset-classic": "^3.3.2",
+    "@docusaurus/core": "^3.5.2",
+    "@docusaurus/preset-classic": "^3.5.2",
     "@mdx-js/react": "^3.0.1",
     "clsx": "^2.1.1",
-    "prism-react-renderer": "^2.3.1",
+    "prism-react-renderer": "^2.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.3.2"
+    "@docusaurus/module-type-aliases": "^3.5.2"
   },
   "browserslist": {
     "production": [
diff --git a/docs/document/static/js/samples/desktop/attachment.js b/docs/document/static/js/samples/desktop/attachment.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/attachment.js
rename to docs/document/static/js/samples/desktop/attachment.jsx
diff --git a/docs/document/static/js/samples/desktop/button.js b/docs/document/static/js/samples/desktop/button.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/button.js
rename to docs/document/static/js/samples/desktop/button.jsx
diff --git a/docs/document/static/js/samples/desktop/checkbox.js b/docs/document/static/js/samples/desktop/checkbox.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/checkbox.js
rename to docs/document/static/js/samples/desktop/checkbox.jsx
diff --git a/docs/document/static/js/samples/desktop/combobox.js b/docs/document/static/js/samples/desktop/combobox.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/combobox.js
rename to docs/document/static/js/samples/desktop/combobox.jsx
diff --git a/docs/document/static/js/samples/desktop/date-picker.js b/docs/document/static/js/samples/desktop/date-picker.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/date-picker.js
rename to docs/document/static/js/samples/desktop/date-picker.jsx
diff --git a/docs/document/static/js/samples/desktop/datetime-picker.js b/docs/document/static/js/samples/desktop/datetime-picker.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/datetime-picker.js
rename to docs/document/static/js/samples/desktop/datetime-picker.jsx
diff --git a/docs/document/static/js/samples/desktop/dialog.js b/docs/document/static/js/samples/desktop/dialog.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/dialog.js
rename to docs/document/static/js/samples/desktop/dialog.jsx
diff --git a/docs/document/static/js/samples/desktop/dropdown.js b/docs/document/static/js/samples/desktop/dropdown.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/dropdown.js
rename to docs/document/static/js/samples/desktop/dropdown.jsx
diff --git a/docs/document/static/js/samples/desktop/field-group.js b/docs/document/static/js/samples/desktop/field-group.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/field-group.js
rename to docs/document/static/js/samples/desktop/field-group.jsx
diff --git a/docs/document/static/js/samples/desktop/multichoice.js b/docs/document/static/js/samples/desktop/multichoice.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/multichoice.js
rename to docs/document/static/js/samples/desktop/multichoice.jsx
diff --git a/docs/document/static/js/samples/desktop/notification.js b/docs/document/static/js/samples/desktop/notification.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/notification.js
rename to docs/document/static/js/samples/desktop/notification.jsx
diff --git a/docs/document/static/js/samples/desktop/radio-button.js b/docs/document/static/js/samples/desktop/radio-button.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/radio-button.js
rename to docs/document/static/js/samples/desktop/radio-button.jsx
diff --git a/docs/document/static/js/samples/desktop/readonly-table.js b/docs/document/static/js/samples/desktop/readonly-table.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/readonly-table.js
rename to docs/document/static/js/samples/desktop/readonly-table.jsx
diff --git a/docs/document/static/js/samples/desktop/spinner.js b/docs/document/static/js/samples/desktop/spinner.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/spinner.js
rename to docs/document/static/js/samples/desktop/spinner.jsx
diff --git a/docs/document/static/js/samples/desktop/table.js b/docs/document/static/js/samples/desktop/table.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/table.js
rename to docs/document/static/js/samples/desktop/table.jsx
diff --git a/docs/document/static/js/samples/desktop/tabs.js b/docs/document/static/js/samples/desktop/tabs.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/tabs.js
rename to docs/document/static/js/samples/desktop/tabs.jsx
diff --git a/docs/document/static/js/samples/desktop/text.js b/docs/document/static/js/samples/desktop/text.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/text.js
rename to docs/document/static/js/samples/desktop/text.jsx
diff --git a/docs/document/static/js/samples/desktop/textarea.js b/docs/document/static/js/samples/desktop/textarea.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/textarea.js
rename to docs/document/static/js/samples/desktop/textarea.jsx
diff --git a/docs/document/static/js/samples/desktop/time-picker.js b/docs/document/static/js/samples/desktop/time-picker.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/time-picker.js
rename to docs/document/static/js/samples/desktop/time-picker.jsx
diff --git a/docs/document/static/js/samples/desktop/tooltip.js b/docs/document/static/js/samples/desktop/tooltip.jsx
similarity index 100%
rename from docs/document/static/js/samples/desktop/tooltip.js
rename to docs/document/static/js/samples/desktop/tooltip.jsx
diff --git a/docs/document/static/js/samples/mobile/button.js b/docs/document/static/js/samples/mobile/button.jsx
similarity index 100%
rename from docs/document/static/js/samples/mobile/button.js
rename to docs/document/static/js/samples/mobile/button.jsx
diff --git a/docs/document/static/js/samples/mobile/checkbox.js b/docs/document/static/js/samples/mobile/checkbox.jsx
similarity index 100%
rename from docs/document/static/js/samples/mobile/checkbox.js
rename to docs/document/static/js/samples/mobile/checkbox.jsx
diff --git a/docs/document/static/js/samples/mobile/date-picker.js b/docs/document/static/js/samples/mobile/date-picker.jsx
similarity index 100%
rename from docs/document/static/js/samples/mobile/date-picker.js
rename to docs/document/static/js/samples/mobile/date-picker.jsx
diff --git a/docs/document/static/js/samples/mobile/datetime-picker.js b/docs/document/static/js/samples/mobile/datetime-picker.jsx
similarity index 100%
rename from docs/document/static/js/samples/mobile/datetime-picker.js
rename to docs/document/static/js/samples/mobile/datetime-picker.jsx
diff --git a/docs/document/static/js/samples/mobile/dropdown.js b/docs/document/static/js/samples/mobile/dropdown.jsx
similarity index 100%
rename from docs/document/static/js/samples/mobile/dropdown.js
rename to docs/document/static/js/samples/mobile/dropdown.jsx
diff --git a/docs/document/static/js/samples/mobile/multichoice.js b/docs/document/static/js/samples/mobile/multichoice.jsx
similarity index 100%
rename from docs/document/static/js/samples/mobile/multichoice.js
rename to docs/document/static/js/samples/mobile/multichoice.jsx
diff --git a/docs/document/static/js/samples/mobile/notification.js b/docs/document/static/js/samples/mobile/notification.jsx
similarity index 100%
rename from docs/document/static/js/samples/mobile/notification.js
rename to docs/document/static/js/samples/mobile/notification.jsx
diff --git a/docs/document/static/js/samples/mobile/radio-button.js b/docs/document/static/js/samples/mobile/radio-button.jsx
similarity index 100%
rename from docs/document/static/js/samples/mobile/radio-button.js
rename to docs/document/static/js/samples/mobile/radio-button.jsx
diff --git a/docs/document/static/js/samples/mobile/text.js b/docs/document/static/js/samples/mobile/text.jsx
similarity index 100%
rename from docs/document/static/js/samples/mobile/text.js
rename to docs/document/static/js/samples/mobile/text.jsx
diff --git a/docs/document/static/js/samples/mobile/textarea.js b/docs/document/static/js/samples/mobile/textarea.jsx
similarity index 100%
rename from docs/document/static/js/samples/mobile/textarea.js
rename to docs/document/static/js/samples/mobile/textarea.jsx
diff --git a/docs/document/static/js/samples/mobile/time-picker.js b/docs/document/static/js/samples/mobile/time-picker.jsx
similarity index 100%
rename from docs/document/static/js/samples/mobile/time-picker.js
rename to docs/document/static/js/samples/mobile/time-picker.jsx
diff --git a/docs/document/versioned_docs/version-1.0.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.0.0/components/desktop/button.md
index 692b01702b..e4a46ebebd 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.0.0/components/desktop/checkbox.md
index 181ba1fd55..bd7665edea 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.0.0/components/desktop/dropdown.md
index a13573b55c..ac00f0f0d8 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.0.0/components/desktop/multichoice.md
index b23faad6e8..13ad3c6a2d 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.0.0/components/desktop/notification.md
index 20317f2300..9a0160374c 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.0.0/components/desktop/radio-button.md
index 4db1aed989..5716b80d39 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.0.0/components/desktop/spinner.md
index 862aa3f45b..40a33aee0c 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.0.0/components/desktop/text.md
index 154ce96de2..ef3c92f719 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.0.0/components/desktop/textarea.md
index b43602d41e..4651637233 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-button.md
index 26469e1d4e..f96d47d67c 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-checkbox.md
index 07964c86d5..985c18fa26 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-notification.md
index 18dcafec29..565c459670 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-radio-button.md
index 796f326199..5033fe3f05 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-text.md
index aedbb6d713..f8d41ea498 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-textarea.md
index 6fdb1988c0..49495547de 100644
--- a/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.0.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/desktop/button.md b/docs/document/versioned_docs/version-1.0.1/components/desktop/button.md
index b878c82304..3c20b9ddba 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.0.1/components/desktop/checkbox.md
index 181ba1fd55..bd7665edea 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.0.1/components/desktop/dropdown.md
index a13573b55c..ac00f0f0d8 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.0.1/components/desktop/multichoice.md
index b23faad6e8..13ad3c6a2d 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/desktop/notification.md b/docs/document/versioned_docs/version-1.0.1/components/desktop/notification.md
index b35afcf206..2ba0af7d6a 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.0.1/components/desktop/radio-button.md
index 4db1aed989..5716b80d39 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.0.1/components/desktop/spinner.md
index f7d9a2947e..7bc67355f0 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/desktop/text.md b/docs/document/versioned_docs/version-1.0.1/components/desktop/text.md
index 154ce96de2..ef3c92f719 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.0.1/components/desktop/textarea.md
index b43602d41e..4651637233 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-button.md
index 26469e1d4e..f96d47d67c 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-checkbox.md
index 07964c86d5..985c18fa26 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-notification.md
index 18dcafec29..565c459670 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-radio-button.md
index 796f326199..5033fe3f05 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-text.md
index 05303a506d..1ed468c8a4 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-textarea.md
index 6fdb1988c0..49495547de 100644
--- a/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.0.1/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/desktop/button.md b/docs/document/versioned_docs/version-1.0.2/components/desktop/button.md
index b878c82304..3c20b9ddba 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.0.2/components/desktop/checkbox.md
index 181ba1fd55..bd7665edea 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.0.2/components/desktop/dropdown.md
index a13573b55c..ac00f0f0d8 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.0.2/components/desktop/multichoice.md
index b23faad6e8..13ad3c6a2d 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/desktop/notification.md b/docs/document/versioned_docs/version-1.0.2/components/desktop/notification.md
index b35afcf206..2ba0af7d6a 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.0.2/components/desktop/radio-button.md
index 4db1aed989..5716b80d39 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.0.2/components/desktop/spinner.md
index f7d9a2947e..7bc67355f0 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/desktop/text.md b/docs/document/versioned_docs/version-1.0.2/components/desktop/text.md
index 154ce96de2..ef3c92f719 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.0.2/components/desktop/textarea.md
index b43602d41e..4651637233 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-button.md
index 26469e1d4e..f96d47d67c 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-checkbox.md
index 07964c86d5..985c18fa26 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-notification.md
index 18dcafec29..565c459670 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-radio-button.md
index 796f326199..5033fe3f05 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-text.md
index 05303a506d..1ed468c8a4 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-textarea.md
index 6fdb1988c0..49495547de 100644
--- a/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.0.2/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/desktop/button.md b/docs/document/versioned_docs/version-1.0.3/components/desktop/button.md
index b878c82304..3c20b9ddba 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.0.3/components/desktop/checkbox.md
index 181ba1fd55..bd7665edea 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.0.3/components/desktop/dropdown.md
index a13573b55c..ac00f0f0d8 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.0.3/components/desktop/multichoice.md
index b23faad6e8..13ad3c6a2d 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/desktop/notification.md b/docs/document/versioned_docs/version-1.0.3/components/desktop/notification.md
index b35afcf206..2ba0af7d6a 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.0.3/components/desktop/radio-button.md
index 4db1aed989..5716b80d39 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.0.3/components/desktop/spinner.md
index f7d9a2947e..7bc67355f0 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/desktop/text.md b/docs/document/versioned_docs/version-1.0.3/components/desktop/text.md
index 154ce96de2..ef3c92f719 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.0.3/components/desktop/textarea.md
index b43602d41e..4651637233 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-button.md
index 26469e1d4e..f96d47d67c 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-checkbox.md
index 07964c86d5..985c18fa26 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-notification.md
index 18dcafec29..565c459670 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-radio-button.md
index 796f326199..5033fe3f05 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-text.md
index 05303a506d..1ed468c8a4 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-textarea.md
index 6fdb1988c0..49495547de 100644
--- a/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.0.3/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/desktop/button.md b/docs/document/versioned_docs/version-1.0.4/components/desktop/button.md
index b878c82304..3c20b9ddba 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.0.4/components/desktop/checkbox.md
index 181ba1fd55..bd7665edea 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.0.4/components/desktop/dropdown.md
index a13573b55c..ac00f0f0d8 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.0.4/components/desktop/multichoice.md
index b23faad6e8..13ad3c6a2d 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/desktop/notification.md b/docs/document/versioned_docs/version-1.0.4/components/desktop/notification.md
index b35afcf206..2ba0af7d6a 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.0.4/components/desktop/radio-button.md
index 4db1aed989..5716b80d39 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.0.4/components/desktop/spinner.md
index f7d9a2947e..7bc67355f0 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/desktop/text.md b/docs/document/versioned_docs/version-1.0.4/components/desktop/text.md
index 154ce96de2..ef3c92f719 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.0.4/components/desktop/textarea.md
index b43602d41e..4651637233 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-button.md
index 26469e1d4e..f96d47d67c 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-checkbox.md
index 07964c86d5..985c18fa26 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-notification.md
index 18dcafec29..565c459670 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-radio-button.md
index 796f326199..5033fe3f05 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-text.md
index 05303a506d..1ed468c8a4 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-textarea.md
index 6fdb1988c0..49495547de 100644
--- a/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.0.4/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/desktop/button.md b/docs/document/versioned_docs/version-1.0.5/components/desktop/button.md
index b878c82304..3c20b9ddba 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.0.5/components/desktop/checkbox.md
index 181ba1fd55..bd7665edea 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.0.5/components/desktop/dropdown.md
index a13573b55c..ac00f0f0d8 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.0.5/components/desktop/multichoice.md
index b23faad6e8..13ad3c6a2d 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/desktop/notification.md b/docs/document/versioned_docs/version-1.0.5/components/desktop/notification.md
index b35afcf206..2ba0af7d6a 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.0.5/components/desktop/radio-button.md
index 4db1aed989..5716b80d39 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.0.5/components/desktop/spinner.md
index f7d9a2947e..7bc67355f0 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/desktop/text.md b/docs/document/versioned_docs/version-1.0.5/components/desktop/text.md
index 154ce96de2..ef3c92f719 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.0.5/components/desktop/textarea.md
index b43602d41e..4651637233 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-button.md
index 26469e1d4e..f96d47d67c 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-checkbox.md
index 07964c86d5..985c18fa26 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-notification.md
index 18dcafec29..565c459670 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-radio-button.md
index 796f326199..5033fe3f05 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-text.md
index 05303a506d..1ed468c8a4 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-textarea.md
index 6fdb1988c0..49495547de 100644
--- a/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.0.5/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.1.0/components/desktop/button.md
index b878c82304..3c20b9ddba 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.1.0/components/desktop/checkbox.md
index 181ba1fd55..bd7665edea 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.1.0/components/desktop/dropdown.md
index a13573b55c..ac00f0f0d8 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.1.0/components/desktop/multichoice.md
index b23faad6e8..13ad3c6a2d 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.1.0/components/desktop/notification.md
index b35afcf206..2ba0af7d6a 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.1.0/components/desktop/radio-button.md
index 4db1aed989..5716b80d39 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.1.0/components/desktop/spinner.md
index f7d9a2947e..7bc67355f0 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.1.0/components/desktop/text.md
index 154ce96de2..ef3c92f719 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.1.0/components/desktop/textarea.md
index b43602d41e..4651637233 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-button.md
index 26469e1d4e..f96d47d67c 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-checkbox.md
index 07964c86d5..985c18fa26 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-dropdown.md
index b23657bb49..bbd945287c 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-multichoice.md
index d7d4fc964a..3763f6745b 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-notification.md
index 18dcafec29..565c459670 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-radio-button.md
index 796f326199..5033fe3f05 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-text.md
index 05303a506d..1ed468c8a4 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-textarea.md
index 6fdb1988c0..49495547de 100644
--- a/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.1.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/desktop/button.md b/docs/document/versioned_docs/version-1.1.1/components/desktop/button.md
index b878c82304..3c20b9ddba 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.1.1/components/desktop/checkbox.md
index 181ba1fd55..bd7665edea 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.1.1/components/desktop/dropdown.md
index a13573b55c..ac00f0f0d8 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.1.1/components/desktop/multichoice.md
index b23faad6e8..13ad3c6a2d 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/desktop/notification.md b/docs/document/versioned_docs/version-1.1.1/components/desktop/notification.md
index b35afcf206..2ba0af7d6a 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.1.1/components/desktop/radio-button.md
index 4db1aed989..5716b80d39 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.1.1/components/desktop/spinner.md
index f7d9a2947e..7bc67355f0 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/desktop/text.md b/docs/document/versioned_docs/version-1.1.1/components/desktop/text.md
index 154ce96de2..ef3c92f719 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.1.1/components/desktop/textarea.md
index b43602d41e..4651637233 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-button.md
index 26469e1d4e..f96d47d67c 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-checkbox.md
index 07964c86d5..985c18fa26 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-dropdown.md
index b23657bb49..bbd945287c 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-multichoice.md
index d7d4fc964a..3763f6745b 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-notification.md
index 18dcafec29..565c459670 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-radio-button.md
index 796f326199..5033fe3f05 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-text.md
index 05303a506d..1ed468c8a4 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-textarea.md
index 6fdb1988c0..49495547de 100644
--- a/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.1.1/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/attachment.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/attachment.md
index 5190d1da3c..817ade3f41 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/attachment.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 The Attachment component allows the user to upload files by selecting or dragging.
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/button.md
index a7001de5ad..3466d533c9 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/checkbox.md
index 6f01cd2257..9279da7d01 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/combobox.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/combobox.md
index f91ad11a6e..8ad43419ff 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/combobox.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 The Combobox component allows the user to find an item among many choices.
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/date-picker.md
index 15e778e660..fd42780dd4 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/datetime-picker.md
index 4ec8a5d3b6..4666b6a8df 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/dialog.md
index 570b2eec0d..fb697f4c22 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/dropdown.md
index 9fb4ab02ee..f98fcceb45 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/multichoice.md
index e018961fad..9bbbbe7154 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/notification.md
index 3f76f2567f..e423bf2429 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/radio-button.md
index 86322a5f50..062d013107 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/readonly-table.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/readonly-table.md
index ad8bb7cae5..a35312450b 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/readonly-table.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 The ReadOnlyTable component allows the user to display a read-only mode table.
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/spinner.md
index 1ef3f9adb7..ffd2cb9e84 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/table.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/table.md
index 90f1d70bbc..1279f883a8 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/table.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 The Table component allows the user to display an editable table.
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/tabs.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/tabs.md
index d321ac6e3f..551fa9641a 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/tabs.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 The Tabs component allows the user to display multiple tabs that can switch displaying contents.
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/text.md
index ac8e701b1e..b59bd47632 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/textarea.md
index c2affe3618..ab2b924b54 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.10.0/components/desktop/time-picker.md
index c09edc60fa..885490e37e 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-button.md
index af928becd7..c8557d2ab3 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-checkbox.md
index 55311d63cc..e17541cd90 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-date-picker.md
index fafdc9ae88..a1903422e9 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-datetime-picker.md
index 6e1efca180..f69a8d5634 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-dropdown.md
index 94b0b0ee0a..31e4aded58 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-multichoice.md
index 1c70641f26..e7a2b138b0 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-notification.md
index cb125491a8..93d014a033 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-radio-button.md
index d142d3bf9c..0aa70a6ff8 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.10.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/attachment.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/attachment.md
index 5190d1da3c..817ade3f41 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/attachment.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 The Attachment component allows the user to upload files by selecting or dragging.
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/button.md
index e8ec400dbb..9af650bbc2 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/checkbox.md
index 6f01cd2257..9279da7d01 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/combobox.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/combobox.md
index 15251be448..8751a8543a 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/combobox.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 The Combobox component allows the user to find an item among many choices.
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/date-picker.md
index 15e778e660..fd42780dd4 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/datetime-picker.md
index 0e7dcd8a91..fd2dfc5f76 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/dialog.md
index b5bbcc0896..de1c72defa 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/dropdown.md
index 9fb4ab02ee..f98fcceb45 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/field-group.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/field-group.md
index 7b2833d2ba..20c47e0b87 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/field-group.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 The FieldGroup component allows the user to create a content area that can be collapsed and expanded.
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/multichoice.md
index e018961fad..9bbbbe7154 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/notification.md
index f8943f8e02..b2b0323d2c 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/radio-button.md
index 86322a5f50..062d013107 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/readonly-table.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/readonly-table.md
index e908f70d6b..9a5ce1b0ef 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/readonly-table.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 The ReadOnlyTable component allows the user to display a read-only mode table.
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/spinner.md
index 3500322cae..9d93a066e8 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/table.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/table.md
index 622a30260f..0215f12f7f 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/table.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 The Table component allows the user to display an editable table.
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/tabs.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/tabs.md
index f9884ab9bb..2aa78707c6 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/tabs.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 The Tabs component allows the user to display multiple tabs that can switch displaying contents.
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/text.md
index ac8e701b1e..b59bd47632 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/textarea.md
index c2affe3618..ab2b924b54 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.11.0/components/desktop/time-picker.md
index c09edc60fa..885490e37e 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-button.md
index 16a7dca662..bc7aa9e3db 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-checkbox.md
index 55311d63cc..e17541cd90 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-date-picker.md
index 57a0781171..ab10ec05e9 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-datetime-picker.md
index 6e1efca180..f69a8d5634 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-dropdown.md
index 94b0b0ee0a..31e4aded58 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-multichoice.md
index 1c70641f26..e7a2b138b0 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-notification.md
index cb125491a8..93d014a033 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-radio-button.md
index d142d3bf9c..0aa70a6ff8 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.11.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/attachment.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/attachment.md
index 5190d1da3c..817ade3f41 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/attachment.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 The Attachment component allows the user to upload files by selecting or dragging.
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/button.md
index e8ec400dbb..9af650bbc2 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/checkbox.md
index f9be87b85c..20542f116e 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/combobox.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/combobox.md
index 3d7697f7fa..ad085f6b61 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/combobox.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 The Combobox component allows the user to find an item among many choices.
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/date-picker.md
index 2ab5f185db..3a9a58b053 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/datetime-picker.md
index 0e7dcd8a91..fd2dfc5f76 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/dialog.md
index b5bbcc0896..de1c72defa 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/dropdown.md
index f665b1b701..c6fa757512 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/field-group.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/field-group.md
index 7b2833d2ba..20c47e0b87 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/field-group.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 The FieldGroup component allows the user to create a content area that can be collapsed and expanded.
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/multichoice.md
index b7e2fd16c2..84bed1102d 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/notification.md
index d8781011f8..53d6f88739 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/radio-button.md
index 0bf37c419b..f97bcdfea8 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/readonly-table.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/readonly-table.md
index e908f70d6b..9a5ce1b0ef 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/readonly-table.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 The ReadOnlyTable component allows the user to display a read-only mode table.
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/spinner.md
index 3500322cae..9d93a066e8 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/table.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/table.md
index 8f82341809..a45024e352 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/table.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 The Table component allows the user to display an editable table.
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/tabs.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/tabs.md
index f9884ab9bb..2aa78707c6 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/tabs.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 The Tabs component allows the user to display multiple tabs that can switch displaying contents.
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/text.md
index ac8e701b1e..b59bd47632 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/textarea.md
index c2affe3618..ab2b924b54 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/time-picker.md
index e8f6ce1a75..fbe65dbdeb 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/desktop/tooltip.md b/docs/document/versioned_docs/version-1.12.0/components/desktop/tooltip.md
index 81c4bb9d64..8af015d7ce 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/desktop/tooltip.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/desktop/tooltip.md
@@ -8,7 +8,7 @@ sidebar_label: Tooltip
 
 Tooltip component allows the user to display a label or short explanation of the target element when hovering or focusing on the element.
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-button.md
index 16a7dca662..bc7aa9e3db 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-checkbox.md
index 55311d63cc..e17541cd90 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-date-picker.md
index 57a0781171..ab10ec05e9 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-datetime-picker.md
index 6e1efca180..f69a8d5634 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-dropdown.md
index 94b0b0ee0a..31e4aded58 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-multichoice.md
index 1c70641f26..e7a2b138b0 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-notification.md
index e0aec33c1e..cfe86fc052 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-radio-button.md
index d142d3bf9c..0aa70a6ff8 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.12.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/attachment.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/attachment.md
index 16105058e5..2a6f28001c 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/attachment.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 The Attachment component allows the user to upload files by selecting or dragging.
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/button.md
index e8ec400dbb..9af650bbc2 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/checkbox.md
index f878b70a12..c9d59aeeb9 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/combobox.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/combobox.md
index fee6c0b57b..082bc6ecff 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/combobox.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 The Combobox component allows the user to find an item among many choices.
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/date-picker.md
index 2ab5f185db..3a9a58b053 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/datetime-picker.md
index 6b827c8758..98d5ae5b8a 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/dialog.md
index 6d11b00e0f..53d7e3a4d2 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/dropdown.md
index 32100f0b77..626f34a6f5 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/field-group.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/field-group.md
index 7b2833d2ba..20c47e0b87 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/field-group.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 The FieldGroup component allows the user to create a content area that can be collapsed and expanded.
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/multichoice.md
index 252cd0334a..7f728ca2c7 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/notification.md
index d8781011f8..53d6f88739 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/radio-button.md
index ddd2777b21..038e27b217 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/readonly-table.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/readonly-table.md
index e908f70d6b..9a5ce1b0ef 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/readonly-table.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 The ReadOnlyTable component allows the user to display a read-only mode table.
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/spinner.md
index 35b25f94c5..16153a590a 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/table.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/table.md
index 8f82341809..a45024e352 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/table.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 The Table component allows the user to display an editable table.
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/tabs.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/tabs.md
index f9884ab9bb..2aa78707c6 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/tabs.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 The Tabs component allows the user to display multiple tabs that can switch displaying contents.
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/text.md
index ac8e701b1e..b59bd47632 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/textarea.md
index c2affe3618..ab2b924b54 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/time-picker.md
index e8f6ce1a75..fbe65dbdeb 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/desktop/tooltip.md b/docs/document/versioned_docs/version-1.13.0/components/desktop/tooltip.md
index 81c4bb9d64..8af015d7ce 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/desktop/tooltip.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/desktop/tooltip.md
@@ -8,7 +8,7 @@ sidebar_label: Tooltip
 
 Tooltip component allows the user to display a label or short explanation of the target element when hovering or focusing on the element.
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-button.md
index 16a7dca662..bc7aa9e3db 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-checkbox.md
index 743d1181a1..d7734fbff1 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-date-picker.md
index 57a0781171..ab10ec05e9 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-datetime-picker.md
index 9bda30cc2f..abfadbcf93 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-dropdown.md
index cc876f482e..99ba3f69ff 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-multichoice.md
index 0ee06e07fa..b0495094d8 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-notification.md
index e0aec33c1e..cfe86fc052 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-radio-button.md
index fc7609d52c..d414aa25dd 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.13.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/attachment.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/attachment.md
index 16105058e5..2a6f28001c 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/attachment.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 The Attachment component allows the user to upload files by selecting or dragging.
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/button.md
index e8ec400dbb..9af650bbc2 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/checkbox.md
index f878b70a12..c9d59aeeb9 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/combobox.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/combobox.md
index fee6c0b57b..082bc6ecff 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/combobox.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 The Combobox component allows the user to find an item among many choices.
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/date-picker.md
index 2ab5f185db..3a9a58b053 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/datetime-picker.md
index 6b827c8758..98d5ae5b8a 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/dialog.md
index 971838b2ca..1f6036d9b0 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/dialog.md
@@ -9,7 +9,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/dropdown.md
index 32100f0b77..626f34a6f5 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/field-group.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/field-group.md
index 7b2833d2ba..20c47e0b87 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/field-group.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 The FieldGroup component allows the user to create a content area that can be collapsed and expanded.
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/multichoice.md
index 252cd0334a..7f728ca2c7 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/notification.md
index d8781011f8..53d6f88739 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/radio-button.md
index ddd2777b21..038e27b217 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/readonly-table.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/readonly-table.md
index 7292724061..2f1bb70075 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/readonly-table.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 The ReadOnlyTable component allows the user to display a read-only mode table.
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/spinner.md
index 35b25f94c5..16153a590a 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/table.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/table.md
index 6bcd711440..3db8742343 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/table.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 The Table component allows the user to display an editable table.
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/tabs.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/tabs.md
index c7901e5ddd..b23453ce49 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/tabs.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 The Tabs component allows the user to display multiple tabs that can switch displaying contents.
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/text.md
index ac8e701b1e..b59bd47632 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/textarea.md
index 63f03c9e96..e64923b9a0 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/time-picker.md
index e8f6ce1a75..fbe65dbdeb 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/desktop/tooltip.md b/docs/document/versioned_docs/version-1.14.0/components/desktop/tooltip.md
index 99f7c10377..dbde214452 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/desktop/tooltip.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/desktop/tooltip.md
@@ -9,7 +9,7 @@ sidebar_label: Tooltip
 
 Tooltip component allows the user to display a label or short explanation of the target element when hovering or focusing on the element.
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-button.md
index 16a7dca662..bc7aa9e3db 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-checkbox.md
index 743d1181a1..d7734fbff1 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-date-picker.md
index 57a0781171..ab10ec05e9 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-datetime-picker.md
index 9bda30cc2f..abfadbcf93 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-dropdown.md
index cc876f482e..99ba3f69ff 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-multichoice.md
index 0ee06e07fa..b0495094d8 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-notification.md
index e0aec33c1e..cfe86fc052 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-radio-button.md
index fc7609d52c..d414aa25dd 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.14.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/attachment.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/attachment.md
index 16105058e5..2a6f28001c 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/attachment.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 The Attachment component allows the user to upload files by selecting or dragging.
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/button.md
index e8ec400dbb..9af650bbc2 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/checkbox.md
index f878b70a12..c9d59aeeb9 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/combobox.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/combobox.md
index fee6c0b57b..082bc6ecff 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/combobox.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 The Combobox component allows the user to find an item among many choices.
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/date-picker.md
index 2ab5f185db..3a9a58b053 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/datetime-picker.md
index 6b827c8758..98d5ae5b8a 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/dialog.md
index 971838b2ca..1f6036d9b0 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/dialog.md
@@ -9,7 +9,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/dropdown.md
index 32100f0b77..626f34a6f5 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/field-group.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/field-group.md
index 7b2833d2ba..20c47e0b87 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/field-group.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 The FieldGroup component allows the user to create a content area that can be collapsed and expanded.
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/multichoice.md
index 252cd0334a..7f728ca2c7 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/notification.md
index d8781011f8..53d6f88739 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/radio-button.md
index ddd2777b21..038e27b217 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/readonly-table.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/readonly-table.md
index 7292724061..2f1bb70075 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/readonly-table.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 The ReadOnlyTable component allows the user to display a read-only mode table.
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/spinner.md
index 35b25f94c5..16153a590a 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/table.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/table.md
index 6bcd711440..3db8742343 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/table.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 The Table component allows the user to display an editable table.
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/tabs.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/tabs.md
index c7901e5ddd..b23453ce49 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/tabs.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 The Tabs component allows the user to display multiple tabs that can switch displaying contents.
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/text.md
index ac8e701b1e..b59bd47632 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/textarea.md
index 63f03c9e96..e64923b9a0 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/time-picker.md
index e8f6ce1a75..fbe65dbdeb 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/desktop/tooltip.md b/docs/document/versioned_docs/version-1.15.0/components/desktop/tooltip.md
index efaec724e4..6bee871d2a 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/desktop/tooltip.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/desktop/tooltip.md
@@ -9,7 +9,7 @@ sidebar_label: Tooltip
 
 Tooltip component allows the user to display a label or short explanation of the target element when hovering or focusing on the element.
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-button.md
index 16a7dca662..bc7aa9e3db 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-checkbox.md
index f2f670be6c..955859915e 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-date-picker.md
index 57a0781171..ab10ec05e9 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-datetime-picker.md
index 9bda30cc2f..abfadbcf93 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-dropdown.md
index c1e33a674f..f22f19103e 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-multichoice.md
index 2738019e37..0beae56591 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-notification.md
index e0aec33c1e..cfe86fc052 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-radio-button.md
index e1c8beb39c..f8c1aee931 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.15.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/attachment.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/attachment.md
index 16105058e5..2a6f28001c 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/attachment.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 The Attachment component allows the user to upload files by selecting or dragging.
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/button.md
index 6fd17037cc..310d629a26 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/checkbox.md
index f878b70a12..c9d59aeeb9 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/combobox.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/combobox.md
index fee6c0b57b..082bc6ecff 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/combobox.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 The Combobox component allows the user to find an item among many choices.
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/date-picker.md
index 2ab5f185db..3a9a58b053 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/datetime-picker.md
index 6b827c8758..98d5ae5b8a 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/dialog.md
index bd85fd562f..4eb8fc44c8 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/dialog.md
@@ -9,7 +9,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/dropdown.md
index ac7f22788d..d62ade1a3b 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/field-group.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/field-group.md
index c74999a30c..f5094e7905 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/field-group.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 The FieldGroup component allows the user to create a content area that can be collapsed and expanded.
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/multichoice.md
index 4d56ead7e8..2bba062332 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/notification.md
index d8781011f8..53d6f88739 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/radio-button.md
index ddd2777b21..038e27b217 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/readonly-table.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/readonly-table.md
index 361d1273c0..2b76298072 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/readonly-table.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 The ReadOnlyTable component allows the user to display a read-only mode table.
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/spinner.md
index 35b25f94c5..16153a590a 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/table.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/table.md
index 691b446964..82e576b840 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/table.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 The Table component allows the user to display an editable table.
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/tabs.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/tabs.md
index c7901e5ddd..b23453ce49 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/tabs.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 The Tabs component allows the user to display multiple tabs that can switch displaying contents.
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/text.md
index 03176c5e6b..667df221bb 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/textarea.md
index 63f03c9e96..e64923b9a0 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/time-picker.md
index e8f6ce1a75..fbe65dbdeb 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/desktop/tooltip.md b/docs/document/versioned_docs/version-1.16.0/components/desktop/tooltip.md
index 664c316a28..1ab835eb16 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/desktop/tooltip.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/desktop/tooltip.md
@@ -9,7 +9,7 @@ sidebar_label: Tooltip
 
 Tooltip component allows the user to display a label or short explanation of the target element when hovering or focusing on the element.
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-button.md
index c1118cafb2..31f4881fa3 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-checkbox.md
index f2f670be6c..955859915e 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-date-picker.md
index 57a0781171..ab10ec05e9 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-datetime-picker.md
index 9bda30cc2f..abfadbcf93 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-dropdown.md
index c1e33a674f..f22f19103e 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-multichoice.md
index 2738019e37..0beae56591 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-notification.md
index e0aec33c1e..cfe86fc052 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-radio-button.md
index e1c8beb39c..f8c1aee931 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.16.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/attachment.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/attachment.md
index 16105058e5..2a6f28001c 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/attachment.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 The Attachment component allows the user to upload files by selecting or dragging.
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/button.md
index 6fd17037cc..310d629a26 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/checkbox.md
index f878b70a12..c9d59aeeb9 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/combobox.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/combobox.md
index fee6c0b57b..082bc6ecff 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/combobox.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 The Combobox component allows the user to find an item among many choices.
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/date-picker.md
index 2ab5f185db..3a9a58b053 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/datetime-picker.md
index 6b827c8758..98d5ae5b8a 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/dialog.md
index 75396324d3..57fb0c9786 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/dialog.md
@@ -9,7 +9,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/dropdown.md
index ac7f22788d..d62ade1a3b 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/field-group.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/field-group.md
index c74999a30c..f5094e7905 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/field-group.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 The FieldGroup component allows the user to create a content area that can be collapsed and expanded.
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/multichoice.md
index 4d56ead7e8..2bba062332 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/notification.md
index d8781011f8..53d6f88739 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/radio-button.md
index ddd2777b21..038e27b217 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/readonly-table.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/readonly-table.md
index 361d1273c0..2b76298072 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/readonly-table.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 The ReadOnlyTable component allows the user to display a read-only mode table.
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/spinner.md
index 35b25f94c5..16153a590a 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/table.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/table.md
index 822d435d03..331d73a1f0 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/table.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 The Table component allows the user to display an editable table.
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/tabs.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/tabs.md
index c7901e5ddd..b23453ce49 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/tabs.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 The Tabs component allows the user to display multiple tabs that can switch displaying contents.
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/text.md
index 03176c5e6b..667df221bb 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/textarea.md
index 63f03c9e96..e64923b9a0 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/time-picker.md
index e8f6ce1a75..fbe65dbdeb 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/desktop/tooltip.md b/docs/document/versioned_docs/version-1.17.0/components/desktop/tooltip.md
index 664c316a28..1ab835eb16 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/desktop/tooltip.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/desktop/tooltip.md
@@ -9,7 +9,7 @@ sidebar_label: Tooltip
 
 Tooltip component allows the user to display a label or short explanation of the target element when hovering or focusing on the element.
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-button.md
index c1118cafb2..31f4881fa3 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-checkbox.md
index f2f670be6c..955859915e 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-date-picker.md
index 57a0781171..ab10ec05e9 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-datetime-picker.md
index 9bda30cc2f..abfadbcf93 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-dropdown.md
index c1e33a674f..f22f19103e 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-multichoice.md
index 2738019e37..0beae56591 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-notification.md
index e0aec33c1e..cfe86fc052 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-radio-button.md
index e1c8beb39c..f8c1aee931 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.17.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/attachment.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/attachment.md
index 16105058e5..2a6f28001c 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/attachment.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 The Attachment component allows the user to upload files by selecting or dragging.
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/button.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/button.md
index 6fd17037cc..310d629a26 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/button.md
@@ -8,7 +8,7 @@ sidebar_label: Button
 
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/checkbox.md
index f878b70a12..c9d59aeeb9 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/combobox.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/combobox.md
index fee6c0b57b..082bc6ecff 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/combobox.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 The Combobox component allows the user to find an item among many choices.
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/date-picker.md
index 2ab5f185db..3a9a58b053 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/datetime-picker.md
index 6b827c8758..98d5ae5b8a 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/dialog.md
index 75396324d3..57fb0c9786 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/dialog.md
@@ -9,7 +9,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/dropdown.md
index ac7f22788d..d62ade1a3b 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/field-group.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/field-group.md
index c74999a30c..f5094e7905 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/field-group.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/field-group.md
@@ -7,7 +7,7 @@ sidebar_label: FieldGroup
 ## Overview
 The FieldGroup component allows the user to create a content area that can be collapsed and expanded.
 
-import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.js"
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
 
 <FieldGroupComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/multichoice.md
index 4d56ead7e8..2bba062332 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/notification.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/notification.md
index d8781011f8..53d6f88739 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/radio-button.md
index ddd2777b21..038e27b217 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/readonly-table.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/readonly-table.md
index 361d1273c0..2b76298072 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/readonly-table.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 The ReadOnlyTable component allows the user to display a read-only mode table.
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/spinner.md
index 35b25f94c5..16153a590a 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/table.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/table.md
index 822d435d03..331d73a1f0 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/table.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 The Table component allows the user to display an editable table.
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/tabs.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/tabs.md
index c7901e5ddd..b23453ce49 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/tabs.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/tabs.md
@@ -8,7 +8,7 @@ sidebar_label: Tabs
 
 The Tabs component allows the user to display multiple tabs that can switch displaying contents.
 
-import { TabsComponent } from "@site/static/js/samples/desktop/tabs.js"
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
 
 <TabsComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/text.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/text.md
index 03176c5e6b..667df221bb 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/textarea.md
index 63f03c9e96..e64923b9a0 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/time-picker.md
index e8f6ce1a75..fbe65dbdeb 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/desktop/tooltip.md b/docs/document/versioned_docs/version-1.17.1/components/desktop/tooltip.md
index 664c316a28..1ab835eb16 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/desktop/tooltip.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/desktop/tooltip.md
@@ -9,7 +9,7 @@ sidebar_label: Tooltip
 
 Tooltip component allows the user to display a label or short explanation of the target element when hovering or focusing on the element.
 
-import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.js"
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
 
 <TooltipComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-button.md
index c1118cafb2..31f4881fa3 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-checkbox.md
index f2f670be6c..955859915e 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-date-picker.md
index 57a0781171..ab10ec05e9 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-datetime-picker.md
index 9bda30cc2f..abfadbcf93 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-dropdown.md
index c1e33a674f..f22f19103e 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-multichoice.md
index 2738019e37..0beae56591 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-notification.md
index e0aec33c1e..cfe86fc052 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-radio-button.md
index e1c8beb39c..f8c1aee931 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.17.1/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/attachment.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/attachment.md
new file mode 100644
index 0000000000..afc52e46ca
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/attachment.md
@@ -0,0 +1,118 @@
+---
+id: attachment
+title: Attachment
+sidebar_label: Attachment
+---
+
+## Overview
+
+The Attachment component allows the user to upload files by selecting or dragging.
+
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
+
+<AttachmentComponent />
+
+---
+
+## Specification
+
+### Property
+Here is a list of properties that can be used for modifying the component:
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
+| message | string | ""  | Message to display in the component (ex. file type/size restriction) | |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| files | Array\<[File](#file)\> | [] | List of files | You can specify [File object](https://developer.mozilla.org/en-US/docs/Web/API/File) or object contains `name` and `size`<br/>Will result an error if the value of `files` is not an array |
+
+:::info
+*1: The text of "Browse" button and "Drag & drop zone" will be changed according to the `language` property.
+:::
+
+#### File
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| name | string | "" | File name | |
+| size | string | "" | File size | There are 4 types to show the size:<li>size >= 1073741824: xxx GB</li><li>1073741824 > size >= 1048576: xxx MB</li><li>1048576 > size >= 1024: xxx KB</li><li>1024 > size: xxx bytes</li> |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the files have been changed | It will pass the event object as the argument<br/>You can receive the following values in event.detail <li>add-file (Triggered if add any file)<ul><li>event.detail.type: "add-file"</li><li>event.detail.oldFiles: Files before add</li><li>event.detail.files: Files after add</li><li>event.detail.fileIndex: Index number of the added file (Type: Array\<number\>)<ul><li>You can get the added file by "event.detail.files[event.detail.fileIndex[x]]"</li></ul></li></ul></li><li>remove-file (Triggered if remove any file)<ul><li>event.detail.type: "remove-file"</li><li>event.detail.oldFiles: Files before remove</li><li>event.detail.files: Files after remove</li><li>event.detail.fileIndex: Index number of the removed file (Type: Array\<number\>)<ul><li>You can get the removed file by "event.detail.oldFiles[event.detail.fileIndex[x]]"</li></ul></li></ul></li> |
+
+### Constructor
+
+Attachment(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | Object that includes component properties |  |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-attachment-width |
+| --kuc-attachment-height |
+| --kuc-attachment-item-font-size |
+| --kuc-attachment-message-font-size |
+| --kuc-attachment-message-color |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+``` javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const attachment = new Kuc.Attachment({
+  label: 'Attachment',
+  files: [
+    { name: 'file.txt', size: '150' },
+    new File(['foo'], 'foo.txt', { type: 'text/plain' })
+  ],
+  language: 'auto',
+  message: 'Max size: 50MB',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  requiredIcon: false
+});
+space.appendChild(attachment);
+
+attachment.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Attachment customization](../../guides/attachment-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/button.md
new file mode 100644
index 0000000000..310d629a26
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/button.md
@@ -0,0 +1,117 @@
+---
+id: button
+title: Button
+sidebar_label: Button
+---
+
+## Overview
+
+The Button component allows the user to create and display buttons.
+
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
+
+<ButtonComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name |  |
+| id | string | ""  | Component id name |  |
+| text | string | ""  | Text to be displayed inside the button | If `content` is unspecified, the value of `text` will be displayed<br/>In other cases, the `text` will be ignored |
+| type | string | "normal"  | Button design type | Available options:<br/>"normal" : Gray (#f7f9fA)<br/>"submit" : Blue (#3498db)<br/>"alert" : Red (#e74c3c) |
+| content *1 | string/HTMLElement | ""  | The DOM inside button | If a string with HTML is set, it will be automatically converted to HTML and displayed as it is |
+| disabled | boolean | false | Enable/Disable the component | |
+| visible | boolean | true | Show/Hide the component | |
+
+:::caution
+*1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.
+:::
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| click | function | Event handler when clicked | It will pass the event object as the argument |
+
+### Constructor
+
+Button(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties | |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-button-width |
+| --kuc-button-height |
+| --kuc-button-background-color |
+| --kuc-button-background-color-hover |
+| --kuc-button-background-color-active |
+| --kuc-button-background-color-focus |
+| --kuc-button-font-size |
+| --kuc-button-text-color |
+
+---
+
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const header = kintone.app.getHeaderMenuSpaceElement();
+
+const button = new Kuc.Button({
+  text: 'Submit',
+  type: 'submit',
+  content: `<div>
+              <svg>...</svg>
+              <span>Search</span>
+            </div>;`,
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+header.appendChild(button);
+
+button.addEventListener('click', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Search box customization](../../guides/search-box-customization.md)
+- [Search box customization with TypeScript](../../guides/search-box-customization-with-typescript.md)
+- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
+- [Bulk update customization](../../guides/bulk-update-customization.md)
+- [Format setting plug-in](../../guides/format-setting-plugin.md)
+- [Attachment customization](../../guides/attachment-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/checkbox.md
new file mode 100644
index 0000000000..c9d59aeeb9
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/checkbox.md
@@ -0,0 +1,153 @@
+---
+id: checkbox
+title: Checkbox
+sidebar_label: Checkbox
+---
+
+## Overview
+
+The Checkbox component displays a checkbox element for multiple selections.
+
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
+
+<CheckboxComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| itemLayout | string | "horizontal"  | Orientation for displaying the options | Available options:<br/>"horizontal" : Horizontal<br/>"vertical" : Vertical |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| borderVisible | boolean | true | Show/Hide the border | |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| items | Array\<[Item](#item)\> | []  | List of options to display | Will result an error if the value of `items` is not an array |
+| value *1 | Array\<string\> | []  | Selected value | No option will be selected if the `value` and `selectedIndex` are unspecified<br/>If setting duplicated value and not setting `selectedIndex`, the first mapped value item in `Item.value` will be selected and `selectedIndex` will be the index number<br/>Will result an error if the value is not an array |
+| selectedIndex *1 | Array\<Number\> | []  | List of index of selected item | It supports specifying which duplicated `Item.value` will be selected if there is duplicated `Item.value` in `items`<br/>If `value` is not set and `selectedIndex` is valid, item that has the index number will be selected<br/>If `value` is set with duplicated `Item.value` and `selectedIndex` value maps with duplicated `Item.value` specified in `value`, item that has the index number will be selected<br/>Will result an error if the value of `selectedIndex` is not an array |
+
+:::info
+*1: You can set duplicated value in `value` and `Item.value`. In case setting duplicated value, you can handle selected item using `value` and `selectedIndex` property.<br/>
+Example: When setting `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}, {label: 'Lemon', value: 'fruit'}]`
+
+- If setting `value` and not setting `selectedIndex` as follows:
+  - value = ['fruit', 'vegetable']: The first and third items will be selected.
+  - value = ['meat', 'other']: No item will be selected.
+
+- If not setting `value` and setting `selectedIndex` as follows:
+  - selectedIndex = [0, 1]: The first and second items will be selected.
+  - selectedIndex = [98, 99]: No item will be selected.
+
+- If setting `value` and `selectedIndex` as follows:
+  - value = ['fruit', 'vegetable'], selectedIndex = [1, 3]: The second and third items will be selected.
+  - value = ['fruit', 'fruit', 'vegetable'], selectedIndex = [1, 3]: The second, third, and fourth items will be selected.
+  - value = ['fruit', 'fruit'], selectedIndex = [1, 2, 3]: The first and second items will be selected.<br/>
+※ If both `value` and `selectedIndex` are set at the same time, the priority of `value` will be higher. Therefore, in the first and third examples above, the item corresponding to 3 of selectedIndex will not be selected.
+:::
+
+#### Item
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | Text label for each option | If `Item.label` is unspecified, the value of `Item.value` is displayed on the UI |
+| value | string | null | Value of each option | Can set duplicated value in `Item.value` |
+| disabled | boolean | false | Enable/Disable each option | |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values when used in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+
+### Constructor
+
+Checkbox(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties | |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-checkbox-menu-width |
+| --kuc-checkbox-menu-height |
+| --kuc-checkbox-menu-font-size |
+| --kuc-checkbox-menu-color |
+| --kuc-checkbox-menu-color-hover |
+
+---
+
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const checkbox = new Kuc.Checkbox({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: ['Orange'],
+  selectedIndex: [0],
+  itemLayout: 'horizontal',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  borderVisible: true
+});
+space.appendChild(checkbox);
+
+checkbox.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/combobox.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/combobox.md
new file mode 100644
index 0000000000..082bc6ecff
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/combobox.md
@@ -0,0 +1,114 @@
+---
+id: combobox
+title: Combobox
+sidebar_label: Combobox
+---
+
+## Overview
+
+The Combobox component allows the user to find an item among many choices.
+
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
+
+<ComboboxComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label is not displayed if unspecified or empty |
+| value | string | ""  | Component value | No option will be selected if the value is unspecified<br/>Will result an error if the value is not a string |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| items | Array\<[Item](#item)\> | []  | List of options to display | Will result an error if the value of items is not an array |
+
+#### Item
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | Text label for each option | If `Item.label` is unspecified, the value of `Item.value` is displayed on the UI |
+| value | string | null | Value of each option | Will result an error if setting duplicated value in `Item.value` |
+| disabled | boolean | false | Enable/Disable each option | |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values when used in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+
+### Constructor
+
+Combobox(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties | |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:<br/>
+"toggle" means the area of the Combobox input box and button.
+#### Property
+| Name |
+| :--- |
+| --kuc-combobox-font-size |
+| --kuc-combobox-toggle-width |
+| --kuc-combobox-toggle-height |
+| --kuc-combobox-toggle-color |
+| --kuc-combobox-menu-color |
+| --kuc-combobox-menu-color-selected |
+
+---
+
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const combobox = new Kuc.Combobox({
+  label: 'Fruit',
+  items: [
+    { label: 'Banana', value: 'banana', disabled: true },
+    { label: 'Orange', value: 'orange' },
+    { label: 'Apple', value: 'apple' }
+  ],
+  value: 'orange',
+  requiredIcon: true,
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(combobox);
+
+combobox.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/date-picker.md
new file mode 100644
index 0000000000..c3c5f9ad51
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/date-picker.md
@@ -0,0 +1,109 @@
+---
+id: date-picker
+title: DatePicker
+sidebar_label: DatePicker
+---
+
+## Overview
+
+The DatePicker component allows the user to display a input area and date selection calendar.
+
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
+
+<DatePickerComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
+| value | string | ""  | Text to be displayed | Format is YYYY-MM-DD<br/>The below date can be used (it will be converted to YYYY-MM-DD internally):<li>2021</li><li>2021-1</li><li>2021-01</li><li>2021-1-9</li><li>21-01-01</li>If the year is less than 4 characters, 0 will be added to the beginning<br/>If the date and/or month is ignored, it will be supplemented with 01<br/>If the date and/or month has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+
+:::info
+*1: The displayed date format is automatically switched depending on the `language` property setting as follows:
+- "en": MM/DD/YYYY
+- "ja", "zh", "zh-TW", "es": YYYY-MM-DD
+:::
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+
+### Constructor
+
+DatePicker(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | Object that includes component properties |  |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-date-picker-input-width |
+| --kuc-date-picker-input-height |
+| --kuc-date-picker-input-color |
+| --kuc-date-picker-input-font-size |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const datePicker = new Kuc.DatePicker({
+  label: 'Date',
+  requiredIcon: true,
+  language: 'auto',
+  value: '2021-11-11',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(datePicker);
+
+datePicker.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Format setting plug-in](../../guides/format-setting-plugin.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/datetime-picker.md
new file mode 100644
index 0000000000..6a408f47ac
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/datetime-picker.md
@@ -0,0 +1,112 @@
+---
+id: datetime-picker
+title: DateTimePicker
+sidebar_label: DateTimePicker
+---
+
+## Overview
+
+The DateTimePicker component allows the user to display a input area of time & date and each selection part.
+
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
+
+<DateTimePickerComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
+| max | string | "" | Setting of the time listbox ending point | Format is HH:MM<br/>In the time listbox, it is displayed up to the time set to `max`, and it is not displayed after that<br/>The below time can be used (it will be converted to HH:MM internally):<li>5:30</li><li>05:3</li><li>5:3</li>If the hour and/or time has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value, or `min` time is greater than `max` time |
+| min | string | "" | Setting of the time listbox starting point | Format is HH:MM<br/>In the time listbox, it is displayed from the time set to `min`, and it is not displayed before that<br/>The below time can be used (it will be converted to HH:MM internally):<li>5:30</li><li>05:3</li><li>5:3</li>If the hour and/or time has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value, or `min` time is greater than `max` time |
+| value | string | "" | Text to be displayed | Format is YYYY-MM-DDTHH:MM:SS<br/>The below date and time can be used (it will be converted to YYYY-MM-DDTHH:MM:SS internally):<li>2021</li><li>2021T01</li><li>2021-06</li><li>2021-12-12</li><li>2021-12-12T01</li><li>2021-12-12T01:01</li>If the date and/or month is ignored, it will be supplemented with 01<br/>If the hour, minute, and/or second is ignored, it will be supplemented with 00<br/>Will result an error if setting invalid format or value, or it is out of valid range set by `min` and `max` properties |
+| disabled | boolean | false | Enable/Disable the component | |
+| hour12 | boolean | false | Setting of the clock display (12-hour clock/24-hour clock) Default is 24-hour clock | Available options:<br/>true: 12-hour clock<br/>false: 24-hour clock |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| timeStep | number | 30 | Setting of time interval in the time listbox | Unit is minute (positive integer)<br/>Round off to the nearest whole number when the decimal point is set<br/>Will result an error if it is not a number or greater than the difference between `max` and `min` |
+
+:::info
+ *1: The displayed date format is automatically switched depending on the `language` property setting as follows:
+- "en": MM/DD/YYYY
+- "ja", "zh", "zh-TW", "es": YYYY-MM-DD
+:::
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change<br/>event.detail.changedPart : "date" or "time" which has been changed |
+
+### Constructor
+
+DateTimePicker(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | Object that includes component properties |  |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-date-time-picker-date-input-width |
+| --kuc-date-time-picker-time-input-width |
+| --kuc-date-time-picker-input-height |
+| --kuc-date-time-picker-input-font-size |
+| --kuc-date-time-picker-input-color |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const dateTimePicker = new Kuc.DateTimePicker({
+  label: 'DateTime',
+  requiredIcon: true,
+  language: 'auto',
+  hour12: false,
+  value: '2021-11-11T11:30:00',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  timeStep: 30,
+  max: '23:59',
+  min: '00:00'
+});
+space.appendChild(dateTimePicker);
+
+dateTimePicker.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/dialog.md
new file mode 100644
index 0000000000..57fb0c9786
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/dialog.md
@@ -0,0 +1,149 @@
+---
+id: dialog
+title: Dialog
+description: Dialog component displays a dialog box.
+sidebar_label: Dialog
+---
+
+## Overview
+
+The Dialog component displays a dialog box.
+
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
+
+<DialogComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| icon | string | "" | The icon displayed in upper left of content area | Available options:<li>"info" : ![info](/img/icon-info.png)</li><li>"success" : ![success](/img/icon-success.png)</li><li>"error" : ![error](/img/icon-error.png)</li><li>"warning" : ![warning](/img/icon-warning.png)</li><li>"question" : ![question](/img/icon-question.png)</li><li>"" : No icon</li> |
+| title | string | ""  | Header Title | If `header` is unspecified, the value of `title` will be displayed<br/>In other cases, the `title` will be ignored |
+| content *1 | string/HTMLElement | ""  | DOM inside content | If a string with HTML is set, it will be automatically converted to HTML and displayed as it is |
+| footer *1 | string/HTMLElement | ""  | DOM inside footer | If a string with HTML is set, it will be automatically converted to HTML and displayed as it is |
+| header *1 | string/HTMLElement | ""  | DOM inside header | If a string with HTML is set, it will be automatically converted to HTML and displayed as it is |
+| container | HTMLElement | document.body | Target element to append the component | By default, it uses the body of the top-level document object, so it's simply `document.body` most of the time<br/>Will result an error if the value of `container` is not an HTMLElement |
+| footerVisible | boolean | true | Show/Hide the footer | |
+
+:::caution
+*1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.
+:::
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| close | function | Event handler when the component has been closed | It will pass the event object as the argument |
+
+### Constructor
+
+Dialog(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties | |
+
+---
+### Method
+
+Here is a list of available methods:
+
+#### open()
+Show the Dialog
+
+##### Parameter
+none
+
+##### Return
+none
+
+#### close()
+Hide the Dialog
+
+##### Parameter
+none
+
+##### Return
+none
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-dialog-header-font-size |
+| --kuc-dialog-header-color |
+| --kuc-dialog-max-width |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+// Create OK and Cancel buttons
+const okButton = new Kuc.Button({
+  text: 'OK',
+  type: 'submit'
+});
+const cancelButton = new Kuc.Button({
+  text: 'Cancel',
+  type: 'normal'
+});
+
+okButton.addEventListener('click', () => {
+  // handle click OK button
+});
+cancelButton.addEventListener('click', () => {
+  // handle click Cancel button
+});
+
+// Wrap OK and Cancel buttons with a div
+const divEl = document.createElement('div');
+divEl.appendChild(okButton);
+divEl.appendChild(cancelButton);
+
+const dialog = new Kuc.Dialog({
+  title: 'Title',
+  content: '<div>This is Content</div>',
+  footer: divEl,
+  header: '<div>This is Header</div>',
+  icon: 'info',
+  container: document.body,
+  footerVisible: true
+});
+
+dialog.addEventListener('close', event => {
+  console.log(event);
+});
+
+dialog.open();
+dialog.close();
+```
+
+---
+
+## Related Articles
+
+- [Format setting plug-in](../../guides/format-setting-plugin.md)
+- [Search box customization with TypeScript](../../guides/search-box-customization-with-typescript.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/dropdown.md
new file mode 100644
index 0000000000..d62ade1a3b
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/dropdown.md
@@ -0,0 +1,147 @@
+---
+id: dropdown
+title: Dropdown
+sidebar_label: Dropdown
+---
+
+## Overview
+
+The Dropdown component allows the user to select one out of several options.
+
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
+
+<DropdownComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name  | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label is not displayed if unspecified or empty |
+| value *1 | string | ""  | Selected value | No option will be selected if the `value` and `selectedIndex` are unspecified<br/>If setting duplicated value and not setting `selectedIndex`, the first mapped value item in `Item.value` will be selected and `selectedIndex` will be the index number<br/>Will result an error if the value is not a string |
+| selectedIndex *1 | number | -1  | Index of selected item | It supports specifying which duplicated `Item.value` will be selected if there is duplicated `Item.value` in `items`<br/>If `value` is not set and `selectedIndex` is valid, item that has the index number will be selected<br/>If `value` is set with duplicated `Item.value` and `selectedIndex` value maps with duplicated `Item.value` specified in `value`, the item that has the index number will be selected<br/>Will result an error if the value of `selectedIndex` is not a number |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| items | Array\<[Item](#item)\> | []  | List of options to display | Will result an error if the value of items is not an array |
+
+:::info
+*1: You can set duplicated value in `Item.value`. In case setting duplicated value, you can handle selected item using `value` and `selectedIndex` property.<br/>
+Example: When setting `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}]`
+
+- If setting `value` and not setting `selectedIndex` as follows:
+  - value = 'fruit': The first item will be selected.
+  - value = 'other': No item will be selected.
+
+- If not setting `value` and setting `selectedIndex` as follows:
+  - selectedIndex = 1: The second item will be selected.
+  - selectedIndex = 99: No item will be selected.
+:::
+
+#### Item
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | Text label for each option | If `Item.label` is unspecified, the value of `Item.value` is displayed on the UI |
+| value | string | null | Value of each option | Can set duplicated value in `Item.value` |
+| disabled | boolean | false | Enable/Disable each option | |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after changing |
+
+### Constructor
+
+Dropdown(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties | |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:<br/>
+"toggle" means the area of the Dropdown button.
+#### Property
+| Name |
+| :--- |
+| --kuc-dropdown-font-size |
+| --kuc-dropdown-toggle-width |
+| --kuc-dropdown-toggle-height |
+| --kuc-dropdown-toggle-color |
+| --kuc-dropdown-menu-color |
+| --kuc-dropdown-menu-color-selected |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const dropdown = new Kuc.Dropdown({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: 'Orange',
+  selectedIndex: 0,
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(dropdown);
+
+dropdown.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
+- [Format setting plug-in](../../guides/format-setting-plugin.md)
+- [In-office day list customization](../../guides/in-office-day-list-customization.md)
+- [Table and ReadOnlyTable customization](../../guides/table-readonly-table-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/field-group.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/field-group.md
new file mode 100644
index 0000000000..f5094e7905
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/field-group.md
@@ -0,0 +1,92 @@
+---
+id: field-group
+title: FieldGroup
+sidebar_label: FieldGroup
+---
+
+## Overview
+The FieldGroup component allows the user to create a content area that can be collapsed and expanded.
+
+import { FieldGroupComponent } from "@site/static/js/samples/desktop/field-group.jsx"
+
+<FieldGroupComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | "" | Component class name |  |
+| id | string | "" | Component id name |  |
+| label | string | "" | Label of the component | |
+| content *1 | string/HTMLElement | "" | DOM inside content | If a string with HTML is set, it will be automatically converted to HTML and displayed as it is |
+| disabled | boolean | false | Enable/Disable the component | |
+| expanded | boolean | false | Collapsed/Expanded the component | |
+| visible | boolean | true | Show/Hide the component | |
+
+:::caution
+*1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.
+:::
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the component is collapsed or expanded | It will pass the event object as the argument <br/><br/>You can receive the following values when used in event.detail<br/>event.detail.expanded : The status of "expanded" after the change (boolean) |
+
+### Constructor
+
+FieldGroup(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties | |
+
+## Sample Code
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const text = new Kuc.Text({
+  label: 'Text',
+  value: 'orange'
+});
+const fieldGroup = new Kuc.FieldGroup({
+  className: 'options-class',
+  id: 'options-id',
+  label: 'FieldGroup',
+  disabled: false,
+  expanded: false,
+  visible: true,
+  content: text
+});
+
+space.appendChild(fieldGroup);
+
+fieldGroup.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [In-office day list customization](../../guides/in-office-day-list-customization.md)
\ No newline at end of file
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/multichoice.md
new file mode 100644
index 0000000000..2bba062332
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/multichoice.md
@@ -0,0 +1,149 @@
+---
+id: multichoice
+title: MultiChoice
+sidebar_label: MultiChoice
+---
+
+## Overview
+
+The MultiChoice component allows the user to select multiple values from multiple options.
+
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
+
+<MultichoiceComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name  | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label is not displayed if unspecified or emptied |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| items | Array\<[Item](#item)\> | []  | List of options to display | Will result an error if the value of `items` is not an array |
+| value *1 | Array\<string\> | []  | Selected value | No option will be selected if the `value` and `selectedIndex` are unspecified<br/>If setting duplicated value and not setting `selectedIndex`, the first mapped value item in `Item.value` will be selected and `selectedIndex` will be the index number<br/>Will result an error if the value is not an array |
+| selectedIndex *1 | Array\<Number\> | []  | List of index of selected item | It supports specifying which duplicated Item.value will be selected if there is duplicated `Item.value` in `items`<br/>If `value` is not set and `selectedIndex` is valid, item that has the index number will be selected<br/>If `value` is set with duplicated Item.value and `selectedIndex` value maps with duplicated `Item.value` specified in `value`, item that has the index number will be selected<br/>Will result an error if the value of `selectedIndex` is not an array |
+
+:::info
+*1: You can set duplicated value in `value` and `Item.value`. In case setting duplicated value, you can handle selected item using `value` and `selectedIndex` property.<br/>
+Example: When setting `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}, {label: 'Lemon', value: 'fruit'}]`
+
+- If setting `value` and not setting `selectedIndex` as follows:
+  - value = ['fruit', 'vegetable']: The first and third items will be selected.
+  - value = ['meat', 'other']: No item will be selected.
+
+- If not setting `value` and setting `selectedIndex` as follows:
+  - selectedIndex = [0, 1]: The first and second items will be selected.
+  - selectedIndex = [98, 99]: No item will be selected.
+
+- If setting `value` and `selectedIndex` as follows:
+  - value = ['fruit', 'vegetable'], selectedIndex = [1, 3]: The second and third items will be selected.
+  - value = ['fruit', 'fruit', 'vegetable'], selectedIndex = [1, 3]: The second, third, and fourth items will be selected.
+  - value = ['fruit', 'fruit'], selectedIndex = [1, 2, 3]: The first and second items will be selected.<br/>
+  ※ If both `value` and `selectedIndex` are set at the same time, the priority of `value` will be higher. Therefore, in the first and third examples above, the item corresponding to 3 of selectedIndex will not be selected.
+:::
+
+#### Item
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | Label text for each option | If `Item.label` is unspecified, the value of `Item.value` is displayed on the UI |
+| value | string | null | Value of each option | Can set duplicated value in `Item.value` |
+| disabled | boolean | false | Enable/Disable each option | |
+
+### Event
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument.<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after changing |
+
+### Constructor
+
+MultiChoice(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties | |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-multi-choice-menu-width |
+| --kuc-multi-choice-menu-height |
+| --kuc-multi-choice-menu-font-size |
+| --kuc-multi-choice-menu-color |
+| --kuc-multi-choice-menu-color-selected |
+| --kuc-multi-choice-menu-background-color-hover |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const multiChoice = new Kuc.MultiChoice({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: ['Orange'],
+  selectedIndex: [0],
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(multiChoice);
+
+multiChoice.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Format setting plug-in](../../guides/format-setting-plugin.md)
+- [In-office day list customization](../../guides/in-office-day-list-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/notification.md
new file mode 100644
index 0000000000..53d6f88739
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/notification.md
@@ -0,0 +1,119 @@
+---
+id: notification
+title: Notification
+sidebar_label: Notification
+---
+
+## Overview
+
+The Notification component allows the user to display pop-up notifications.
+
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
+
+<NotificationComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| text | string | ""  | Text to be displayed | |
+| type | string | "danger"  | Background color | Available options:<br/>"danger" : Red (#e74c3c)<br/>"info" : Blue (#3498db)<br/>"success" : Green (#91c36c) |
+| duration | number | -1  | Milliseconds to close component | Unit is milliseconds<br/>You can specify 0 or a number larger than 0<br/>If you specify invalid value (a number less than 0 or is not a number), component is opened and will not be closed automatically |
+| container | HTMLElement | document.body | Target element to append the component | By default, it uses the body of the top-level document object, so it's simply `document.body` most of the time<br/>Will result an error if the value of `container` is not an HTMLElement |
+
+### Constructor
+
+Notification(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties |  |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| close | function | Event handler when the component has been closed | It will pass the event object as the argument |
+
+### Method
+
+Here is a list of available methods:
+
+#### open()
+Show the Notification
+
+##### Parameter
+none
+
+##### Return
+none
+
+#### close()
+Hide the Notification
+
+##### Parameter
+none
+
+##### Return
+none
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-notification-font-size |
+| --kuc-notification-color |
+| --kuc-notification-background-color |
+| --kuc-notification-close-button-background-color |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const notification = new Kuc.Notification({
+  text: 'Error occurred!',
+  type: 'danger',
+  className: 'options-class',
+  duration: 2000,
+  container: document.body
+});
+
+notification.addEventListener('close', event => {
+  console.log(event);
+});
+
+notification.open();
+notification.close();
+```
+
+---
+
+## Related Articles
+
+- [Search box customization](../../guides/search-box-customization.md)
+- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
+- [Bulk update customization](../../guides/bulk-update-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/radio-button.md
new file mode 100644
index 0000000000..038e27b217
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/radio-button.md
@@ -0,0 +1,146 @@
+---
+id: radio-button
+title: RadioButton
+sidebar_label: RadioButton
+---
+
+## Overview
+
+The RadioButton component allows the user to select one out of several options.
+
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
+
+<RadioButtonComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name  | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| itemLayout | string | "horizontal"  | Orientation for displaying the options | Available options:<br/>"horizontal" : Horizontal<br/>"vertical" : Vertical |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| value *1 | string | ""  | Selected value | No option will be selected if the `value` and `selectedIndex` are unspecified<br/>If setting duplicated value and not setting `selectedIndex`, the first mapped value item in `Item.value` will be selected and `selectedIndex` will be the index number<br/>Will result an error if the value is not a string |
+| selectedIndex *1 | number | -1  | Index of selected item | It supports specifying which duplicated `Item.value` will be selected if there is duplicated `Item.value` in `items`<br/>If `value` is not set and `selectedIndex` is valid, item that has the index number will be selected<br/>If `value` is set with duplicated `Item.value` and `selectedIndex` value maps with duplicated `Item.value` specified in `value`, the item that has the index number will be selected<br/>Will result an error if the value of `selectedIndex` is not a number |
+| borderVisible | boolean | true | Show/Hide the border | |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| items | Array\<[Item](#item)\> | []  | List of options to select from | Will result an error if the value of items is not an array |
+
+:::info
+*1: You can set duplicated value in `Item.value`. In case setting duplicated value, you can handle selected item using `value` and `selectedIndex` property.<br/>
+Example: When setting `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}]`
+
+- If setting `value` and not setting `selectedIndex` as follows:
+  - value = 'fruit': The first item will be selected.
+  - value = 'other': No item will be selected.
+
+- If not setting `value` and setting `selectedIndex` as follows:
+  - selectedIndex = 1: The second item will be selected.
+  - selectedIndex = 99: No item will be selected.
+:::
+
+#### Item
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | Text for each option | If `Item.label` is unspecified, the value of `Item.value` is displayed on the UI |
+| value | string | null | Value of each option | Can set duplicated value in `Item.value` |
+| disabled | boolean | false | Enable/Disable each option | |
+
+### Event
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+
+### Constructor
+
+RadioButton(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties |  |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-radio-button-menu-width |
+| --kuc-radio-button-menu-height |
+| --kuc-radio-button-menu-font-size |
+| --kuc-radio-button-menu-color |
+| --kuc-radio-button-menu-color-hover |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const radioButton = new Kuc.RadioButton({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: 'Orange',
+  selectedIndex: 0,
+  itemLayout: 'horizontal',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  borderVisible: true
+});
+space.appendChild(radioButton);
+
+radioButton.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
+- [Table and ReadOnlyTable customization](../../guides/table-readonly-table-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/readonly-table.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/readonly-table.md
new file mode 100644
index 0000000000..2b76298072
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/readonly-table.md
@@ -0,0 +1,154 @@
+---
+id: readonly-table
+title: ReadOnlyTable
+sidebar_label: ReadOnlyTable
+---
+
+## Overview
+
+The ReadOnlyTable component allows the user to display a read-only mode table.
+
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
+
+<ReadOnlyTableComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label is not displayed if unspecified or empty |
+| rowsPerPage | number | 5 | Number of table rows per page | Round off to the nearest whole number when the decimal point is set<br/>Will result an error if the value of `rowsPerPage` is not a positive integer |
+| pagination | boolean | true | Show/Hide the pagination | If setting `false`, pagination is hidden and all rows are displayed<br/>If setting `true`, pagination is displayed and only the number of rows set in `rowsPerPage` are displayed |
+| visible | boolean | true | Show/Hide the component | |
+| columns | Array\<[Column](#column)\> | []  | Column data of the component | Will result an error if the value of `columns` is not an array |
+| data *1 | Array\<object\> | []  | Row data of the component | Will result an error if the value of `data` is not an array |
+
+:::caution
+*1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.
+:::
+
+#### Column
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| field | string | ""  | Key of the column | It represents the key of the `data` object<br/>The value associated with that key will be rendered in the column |
+| title | string | ""  | Header name of the column | |
+| visible | boolean |  true  | Show/Hide the column | |
+
+### Constructor
+
+ReadOnlyTable(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties |  |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name | Description |
+| :--- | :--- |
+| --kuc-readonly-table-header-background-color | |
+| --kuc-readonly-table-header-color | |
+| --kuc-readonly-table-header-font-size | |
+| --kuc-readonly-table-header-height | |
+| --kuc-readonly-table-header-\{index\}-width | <li>This property allows you to set the width of certain table columns based on their index values</li><li>For example, you can use `--kuc-readonly-table-header-0-width` to set the width of the first column</li><li>Note that the index values start from `0`, where `0` corresponds to the first column</li> |
+| --kuc-readonly-table-header-width | <li>This property is used to set the width for all columns in a table, it defines a uniform width for every column</li><li>If you need to set a specific width for a single column, you can use `--kuc-readonly-table-header-{index}-width` property</li><li>If you want to add the element that will expand/contract as a child component, you may be able to preserve this behavior by setting `--kuc-readonly-table-header-width: auto`</li> |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const readOnlyTable = new Kuc.ReadOnlyTable({
+  label: 'ReadOnlyTable',
+  columns: [
+    {
+      title: 'Number',
+      field: 'index'
+    },
+    {
+      title: 'City',
+      field: 'name'
+    },
+    {
+      title: 'Country',
+      field: 'country'
+    },
+    {
+      title: 'Population',
+      field: 'population'
+    },
+    {
+      title: 'Coordinates',
+      field: 'coordinates'
+    },
+    {
+      title: 'Link',
+      field: 'link'
+    }
+  ],
+  data: [
+    {
+      index: '1',
+      name: 'HoChiMinh',
+      country: 'Vietnam',
+      population: '8,371,000',
+      coordinates: '10.762622, 106.660172',
+      link: '<a href="https://en.wikipedia.org/wiki/Ho_Chi_Minh_City" target="_blank">Vietnam: Ho Chi Minh City</a>'
+    },
+    {
+      index: '2',
+      name: 'Tokyo',
+      country: 'Japan',
+      population: '14,000,000',
+      coordinates: '35.689487, 139.691711',
+      link: '<a href="https://en.wikipedia.org/wiki/Tokyo" target="_blank">Japan: Tokyo</a>'
+    },
+    {
+      index: '3',
+      name: 'New York',
+      country: 'USA',
+      population: '8,400,000',
+      coordinates: '40.712776, -74.005974',
+      link: '<a href="https://en.wikipedia.org/wiki/New_York_City" target="_blank">USA: New York City</a>'
+    }
+  ],
+  className: 'sample-class',
+  id: 'sample-id',
+  visible: true,
+  pagination: true,
+  rowsPerPage: 3
+});
+space.appendChild(readOnlyTable);
+```
+
+---
+
+## Related Articles
+
+- [Table and ReadOnlyTable customization](../../guides/table-readonly-table-customization.md)
+- [Tabs customization](../../guides/tabs-customization.md)
+- [Search box customization with TypeScript](../../guides/search-box-customization-with-typescript.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/spinner.md
new file mode 100644
index 0000000000..16153a590a
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/spinner.md
@@ -0,0 +1,105 @@
+---
+id: spinner
+title: Spinner
+sidebar_label: Spinner
+---
+
+## Overview
+
+The Spinner component allows the user to display a rolling spinner.
+
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
+
+<SpinnerComponent />
+
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| text | string | ""  | Text to be displayed at the bottom of the loader icon | Displays the default value if the value for text is unspecified or empty |
+| container | HTMLElement | document.body | Target element to append the component | By default, it uses the body of the top-level document object, so it's simply `document.body` most of the time<br/>Will result an error if the value of `container` is not an HTMLElement |
+
+:::info
+If the text is unspecified or empty, consider assigning a visually-hidden class and given the word "Now loading..." in a hidden state for accessibility.
+:::
+
+### Constructor
+
+Spinner(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties |  |
+
+### Method
+Here is a list of available methods:
+
+#### open()
+Show the component
+
+##### Parameter
+none
+
+##### Return
+none
+
+#### close()
+Hide the component
+
+##### Parameter
+none
+
+##### Return
+none
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-spinner-loader-width |
+| --kuc-spinner-loader-height |
+| --kuc-spinner-loader-color |
+| --kuc-spinner-text-font-size |
+| --kuc-spinner-text-color |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const spinner = new Kuc.Spinner({
+  text: 'now loading...',
+  container: document.body
+});
+
+spinner.open();
+spinner.close();
+```
+
+---
+
+## Related Articles
+
+- [Bulk update customization](../../guides/bulk-update-customization.md)
+- [Attachment customization](../../guides/attachment-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/table.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/table.md
new file mode 100644
index 0000000000..331d73a1f0
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/table.md
@@ -0,0 +1,171 @@
+---
+id: table
+title: Table
+sidebar_label: Table
+---
+
+## Overview
+The Table component allows the user to display an editable table.
+
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
+
+<TableComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| id | string | "" | Component id name | |
+| label | string | ""  | Label for the component | Label is not displayed if unspecified or empty |
+| actionButton | boolean/[ActionButton](#actionbutton) | true | Show/Hide the add/remove row button | If set to `true`/`false`, the add/remove buttons are shown/hidden together<br/>If set to the `ActionButton` object, the add/remove buttons can be shown/hidden separately |
+| headerVisible | boolean | true | Show/Hide the header | |
+| visible | boolean | true | Show/Hide the component | |
+| columns | Array\<[Column](#column)\> |  []  | Column data of the component | Will result an error if the value of `columns` is not an array|
+| data | Array\<object\> | []  | Row data of the component | Will result an error if the value of `data` is not an array |
+
+#### ActionButton
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| add | boolean | true | Show/Hide the add row button | |
+| remove | boolean | true | Show/Hide the remove row button | |
+
+#### Column
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| field | string | null  | Key of the column<br/>*`Required` and `Unique` | It represents the key of the `data` object<br/>The value associated with that key will be rendered in the column<br/>Will result an error if the `field` is duplicated in `columns` or not specified |
+| title *1 | string/HTMLElement | ""  | Header name of the column | If a string with HTML is set, it will be automatically converted to HTML and displayed as it is |
+| requiredIcon | boolean | false  | Show/Hide the required icon | |
+| visible | boolean |  true  | Show/Hide the column | |
+| render *1 | function <br/>`function(cellData, rowData, rowIndex) {}` | null | Renderer of the cell | The return value should be a DOM<br/>Following 3 params provide more information for the function<br/><ul><li>`cellData` is the data of the current cell rendered</li><li>`rowData` is the data of the current row rendered</li><li>`rowIndex` is the index number of the current row rendered</li></ul><br/>If `render` function is not specified, the cell will display with the default text |
+
+:::caution
+*1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.
+:::
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the table data has been changed | It will pass the event object as the argument<br/>You can receive the following values in event.detail<ul><li>change-cell (Triggered if the data in cell is changed)</li><ul><li>event.detail.type: "change-cell"</li><li>event.detail.rowIndex: Index number of the changed row</li><li>event.detail.data: All data of table after change</li><li>event.detail.oldData: All data of table before change</li><li>event.detail.field: Changed column's field</li></ul><li>add-row (Triggered if add row button is clicked)</li><ul><li>event.detail.type: "add-row"</li><li>event.detail.rowIndex: Index number of the added row</li><li>event.detail.data: All data of table after change</li><li>event.detail.oldData: All data of table before change</li></ul><li>remove-row (Triggered if remove row button is clicked)</li><ul><li>event.detail.type: "remove-row"</li><li>event.detail.rowIndex: Index number of the removed row</li><li>event.detail.data: All data of table after change</li><li>event.detail.oldData: All data of table before change</li></ul></ul>|
+
+### Constructor
+
+Table(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties | |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name | Description |
+| :--- | :--- |
+| --kuc-table-header-background-color | |
+| --kuc-table-header-color | |
+| --kuc-table-header-font-size | |
+| --kuc-table-header-height | |
+| --kuc-table-header-\{index\}-width | <li>This property allows you to set the width of certain table columns based on their index values</li><li>For example, you can use `--kuc-table-header-0-width` to set the width of the first column</li><li>Note that the index values start from `0`, where `0` corresponds to the first column</li> |
+| --kuc-table-header-width | <li>This property is used to set the width for all columns in a table, it defines a uniform width for every column</li><li>If you need to set a specific width for a single column, you can use `--kuc-table-header-{index}-width` property</li><li>If you want to add the element that will expand/contract as a child component, you may be able to preserve this behavior by setting `--kuc-table-header-width: auto`</li> |
+
+---
+
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const renderAge = dataCell => {
+  const spanElement = document.createElement('span');
+  spanElement.innerText = `The age is ${dataCell}`;
+  return spanElement;
+};
+
+const renderName = cellData => {
+  const dropdown = new Kuc.Dropdown({
+    items: [
+      { label: 'John Brown', value: 'john' },
+      { label: 'Steven Gerrard', value: 'steven' }
+    ],
+    value: cellData
+  });
+  return dropdown;
+};
+
+const table = new Kuc.Table({
+  label: 'Table',
+  columns: [
+    {
+      title: new Kuc.Tooltip({
+        title: 'Please select a user',
+        container: 'Name'
+      }),
+      field: 'name',
+      render: renderName
+    },
+    {
+      title: 'Address',
+      field: 'address'
+    },
+    {
+      title: 'Age',
+      field: 'age',
+      render: renderAge
+    }
+  ],
+  data: [
+    {
+      name: 'john',
+      age: 32,
+      address: 'New York No. 1 Lake Park'
+    },
+    {
+      name: 'steven',
+      age: 22,
+      address: 'New York No. 2 Lake Park'
+    }
+  ],
+  className: 'options-class',
+  id: 'options-id',
+  actionButton: true,
+  headerVisible: true,
+  visible: true
+});
+
+space.appendChild(table);
+
+table.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [In-office day list customization](../../guides/in-office-day-list-customization.md)
+- [Table and ReadOnlyTable customization](../../guides/table-readonly-table-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/tabs.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/tabs.md
new file mode 100644
index 0000000000..b23453ce49
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/tabs.md
@@ -0,0 +1,142 @@
+---
+id: tabs
+title: Tabs
+sidebar_label: Tabs
+---
+
+## Overview
+
+The Tabs component allows the user to display multiple tabs that can switch displaying contents.
+
+import { TabsComponent } from "@site/static/js/samples/desktop/tabs.jsx"
+
+<TabsComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| id | string | ""  | Component id name | |
+| value | string | ""  | Selected value | <li>If the `value` is matched in the `items`, the tab will be displayed even if it’s disabled</li><li>The first visible tab will be displayed in the following cases:<ul><li>If the `value` is not matched in the `items`</li><li>If the `value` is matched in the `items`, but the tab is not visible</li></ul></li><li>Will result an error if the `value` is not string type</li> |
+| borderVisible | boolean | true  | Show/Hide the border surrounding the content | |
+| visible | boolean | true | Show/Hide the component | |
+| items | Array\<[Item](#item)\> | [] | List of tabs to display | Will result an error if the value of `items` is not an array |
+
+#### Item
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| content | string/HTMLElement | "" | Tab content | |
+| label | string | "" | Tab name | |
+| value | string | "" | Key of each tab<br/>*`Required` and `Unique` | Will result an error if the `value` is duplicated in `items` or not specified |
+| disabled | boolean | false | Enable/Disable the tab | |
+| visible | boolean | true | Show/Hide the tab | |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler of when selected tab is changed |  It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/><li>event.detail.oldValue : "value" before the change</li><li>event.detail.value : "value" after the change</li> |
+
+### Constructor
+
+Tabs(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties | |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-tabs-tab-background-color |
+| --kuc-tabs-tab-background-color-selected |
+| --kuc-tabs-tab-color |
+| --kuc-tabs-tab-color-selected |
+| --kuc-tabs-tab-font-size |
+| --kuc-tabs-tab-height |
+| --kuc-tabs-tab-width |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+// Create each Tab content
+const textArea = new Kuc.TextArea({
+  label: 'TextArea',
+  value: 'This is sample.'
+});
+
+const timePicker = new Kuc.TimePicker({
+  label: 'Time',
+  value: '11:30'
+});
+
+const text = 'This is sample.';
+
+const tabs = new Kuc.Tabs({
+  items: [
+    {
+      label: 'A',
+      content: textArea,
+      value: 'a',
+      disabled: false
+    },
+    {
+      label: 'B',
+      content: timePicker,
+      value: 'b',
+      disabled: false
+    },
+    {
+      label: 'C',
+      content: text,
+      value: 'c',
+      disabled: false
+    }
+  ],
+  value: 'a',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  borderVisible: true
+});
+space.appendChild(tabs);
+
+tabs.addEventListener('change', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+- [Tabs customization](../../guides/tabs-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/text.md
new file mode 100644
index 0000000000..667df221bb
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/text.md
@@ -0,0 +1,123 @@
+---
+id: text
+title: Text
+sidebar_label: Text
+---
+
+## Overview
+
+The Text component allows the user to display a single line text element.
+
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
+
+<TextComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| placeholder | string | ""  | Placeholder text for entry example | |
+| prefix | string | ""  | Text to be displayed before the input text | |
+| suffix | string | ""  | Text to be displayed after the input text | |
+| textAlign | string | "left"  | Text alignments | Available options:<br/>"left" : Aligned to the left<br/>"right" : Aligned to the right |
+| value | string | ""  | Text to be displayed | |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+| focus | function | Event handler when the component is focused | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.value : Value at the time of focus |
+| input | function | Event handler when the value has been inputting | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.data : Value of inserted characters<br/>event.detail.value : Value of target element<br/><br/>*Notes on the value of "event.detail.data"<br/>It is inserted characters when inserting text<br/>It will be "null" when inserting by "Paste" or "Drag and Drop" or pressing "Enter", "Delete", or "Backspace" |
+
+### Constructor
+
+Text(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | Object that includes component properties |  |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-text-input-width |
+| --kuc-text-input-height |
+| --kuc-text-input-font-size |
+| --kuc-text-input-color |
+
+---
+
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const text = new Kuc.Text({
+  label: 'Fruit',
+  requiredIcon: true,
+  value: 'Apple',
+  placeholder: 'Apple',
+  prefix: '$',
+  suffix: 'yen',
+  textAlign: 'left',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(text);
+
+text.addEventListener('change', event => {
+  console.log(event);
+});
+
+text.addEventListener('focus', event => {
+  console.log(event);
+});
+
+text.addEventListener('input', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [In-office day list customization](../../guides/in-office-day-list-customization.md)
+- [Search box customization](../../guides/search-box-customization.md)
+- [Search box customization with TypeScript](../../guides/search-box-customization-with-typescript.md)
+- [Table and ReadOnlyTable customization](../../guides/table-readonly-table-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/textarea.md
new file mode 100644
index 0000000000..e64923b9a0
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/textarea.md
@@ -0,0 +1,107 @@
+---
+id: textarea
+title: TextArea
+sidebar_label: TextArea
+---
+
+## Overview
+
+The TextArea component allows the user to display multiple lines of text element.
+
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
+
+<TextAreaComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or is empty |
+| placeholder | string | ""  | Placeholder text for entry example | |
+| value | string | ""  | Text to be displayed | |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+| focus | function | Event handler for the focused time | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.value : Value at the time of focus |
+| input | function | Event handler when the value has been inputting | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.data : Value of inserted characters<br/>event.detail.value : Value of target element<br/><br/>*Notes on the value of "event.detail.data"<br/>It is inserted characters when inserting text<br/>It will be "null" when inserting by "Paste" or "Drag and Drop" or pressing "Enter", "Delete", or "Backspace" |
+
+### Constructor
+
+TextArea(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties |  |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-textarea-input-color |
+| --kuc-textarea-input-font-size |
+| --kuc-textarea-input-height |
+| --kuc-textarea-input-width |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const textarea = new Kuc.TextArea({
+  label: 'Fruit',
+  requiredIcon: true,
+  placeholder: 'Apple',
+  value: 'Apple',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(textarea);
+
+textarea.addEventListener('change', event => {
+  console.log(event);
+});
+
+textarea.addEventListener('focus', event => {
+  console.log(event);
+});
+
+textarea.addEventListener('input', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/time-picker.md
new file mode 100644
index 0000000000..1244dc26e6
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/time-picker.md
@@ -0,0 +1,105 @@
+---
+id: time-picker
+title: TimePicker
+sidebar_label: TimePicker
+---
+
+## Overview
+
+The TimePicker component allows the user to display a input area and time selection listbox.
+
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
+
+<TimePickerComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| language | string | "auto" | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
+| max | string | "" | Setting of the time listbox ending point | Format is HH:MM<br/>In the time listbox, it is displayed up to the time set to `max`, and it is not displayed after that<br/>The below time can be used (it will be converted to HH:MM internally):<li>5:30</li><li>05:3</li><li>5:3</li>If the hour and/or time has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value, or `min` time is greater than `max` time |
+| min | string | "" | Setting of the time listbox starting point | Format is HH:MM<br/>In the time listbox, it is displayed from the time set to `min`, and it is not displayed before that<br/>The below time can be used (it will be converted to HH:MM internally):<li>5:30</li><li>05:3</li><li>5:3</li>If the hour and/or time has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value, or `min` time is greater than `max` time |
+| value | string | "" | Text to be displayed | Format is HH:MM<br/>The below time can be used (it will be converted to HH:MM internally):<li>5:30</li><li>05:3</li><li>5:3</li>If the hour and/or time has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value, or it is out of valid range set by `min` and `max` properties |
+| disabled | boolean | false | Enable/Disable the component | |
+| hour12 | boolean | false | Setting of the clock display (12-hour clock/24-hour clock) Default is 24-hour clock | Available options:<br/>true: 12-hour clock<br/>false: 24-hour clock |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| timeStep | number | 30 | Setting of time interval in the time listbox | Unit is minute (positive integer)<br/>Round off to the nearest whole number when the decimal point is set<br/>Will result an error if it is not a number or greater than the difference between `max` and `min` |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+
+### Constructor
+
+TimePicker(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | Object that includes component properties |  |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-time-picker-input-width |
+| --kuc-time-picker-input-height |
+| --kuc-time-picker-input-font-size |
+| --kuc-time-picker-input-color |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const timePicker = new Kuc.TimePicker({
+  label: 'Time',
+  requiredIcon: true,
+  hour12: false,
+  value: '11:30',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  language: 'en',
+  timeStep: 30,
+  max: '23:59',
+  min: '00:00'
+});
+space.appendChild(timePicker);
+
+timePicker.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/components/desktop/tooltip.md b/docs/document/versioned_docs/version-1.18.0/components/desktop/tooltip.md
new file mode 100644
index 0000000000..1ab835eb16
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/desktop/tooltip.md
@@ -0,0 +1,118 @@
+---
+id: tooltip
+title: Tooltip
+description: Tooltip component allows the user to display a label or short explanation of the target element when hovering or focusing on the element.
+sidebar_label: Tooltip
+---
+
+## Overview
+
+Tooltip component allows the user to display a label or short explanation of the target element when hovering or focusing on the element.
+
+import { TooltipComponent } from "@site/static/js/samples/desktop/tooltip.jsx"
+
+<TooltipComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| id | string | ""  | Component id name | |
+| placement | string | "top"  | The position of the component relative to the target element | Available options: `top`, `left`, `right`, `bottom` |
+| title | string | ""  | The text shown in the component | |
+| container *1 | string/HTMLElement | "" | The target element to display the component | The `title` value will be displayed in the situation below<ul><li>When the container element is hovered</li><li>When the container element is focused</li></ul> |
+| describeChild *2 | boolean | false  | Setting of the content that the Tooltip represents for the element | Set to `false` if Tooltip represents a label, or `true` if Tooltip represents additional information or a supplementary description |
+
+:::info
+*1: Please use **focusable elements** as much as possible and avoid abusing unfocusable elements for accessibility.
+
+*2: By understanding how to use the describeChild property, you can effectively improve the accessibility and usability of your application.
+- Set `describeChild` to `false` if the Tooltip represents the purpose of the element itself (provides a label for the element it is attached to).
+  - The `aria-label` attribute will be added to the first child element of the Tooltip component with the value of the `title` property.
+  - For example, the case you have an icon that represents a save mark, and the Tooltip provides a label of the button itself.
+    ```javascript
+      <kuc-tooltip>
+        <button aria-label='Save'>
+          <span class='icon-save'></span>
+        </button>
+        <div id='tooltip-ID'>Save</div>
+      </kuc-tooltip>
+    ```
+  - You can learn more about [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).
+- Set `describeChild` to `true` if the Tooltip represents the description of the element (provides additional information or a supplementary description about the element it is attached to).
+  - The `aria-describedby` attribute will be added to the first child element of the Tooltip component with the value of the ID of the tooltip wrapper element.
+  - For example, the case you have an icon that represents a question mark, and the Tooltip provides a description or explanation of what the icon represents.
+    ```javascript
+      <kuc-tooltip>
+        <button aria-describedby='tooltip-ID'>
+          <span class='icon-question-mark'></span>
+        </button>
+        <div id='tooltip-ID'>This is a help icon. Click for more information</div>
+      </kuc-tooltip>
+    ```
+  - You can learn more about [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby).
+:::
+
+### Constructor
+
+Tooltip(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | Object that includes component properties |  |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name |
+| :--- |
+| --kuc-tooltip-background-color |
+| --kuc-tooltip-color |
+| --kuc-tooltip-font-size |
+| --kuc-tooltip-height |
+| --kuc-tooltip-width |
+---
+
+## Sample Code
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+const buttonEl = document.createElement('button');
+buttonEl.innerText ='Add';
+
+const tooltip = new Kuc.Tooltip({
+  title: 'Do not add if it exists.',
+  container: buttonEl,
+  placement: 'bottom',
+  describeChild: true,
+  className: 'tooltip-class',
+  id: 'tooltip-id',
+});
+space.appendChild(tooltip);
+```
+
+---
+
+## Related Articles
+
+- [In-office day list customization](../../guides/in-office-day-list-customization.md)
\ No newline at end of file
diff --git a/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-button.md
new file mode 100644
index 0000000000..31f4881fa3
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-button.md
@@ -0,0 +1,111 @@
+---
+id: mobile-button
+title: MobileButton
+sidebar_label: MobileButton
+---
+
+## Overview
+
+The MobileButton component allows the user to create and displays buttons.
+
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
+
+<MobileButtonComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name |  |
+| id | string | ""  | Component id name |  |
+| text | string | ""  | Text to be displayed in buttons | If `content` is unspecified, the value of `text` will be displayed<br/>In other cases, the `text` will be ignored |
+| type | string | "normal"  | Button design type | Available options:<br/>"normal" : White (#ffffff)<br/>"submit" : Blue (#206694) |
+| content *1 | string/HTMLElement | ""  | The DOM inside button | If a string with HTML is set, it will be automatically converted to HTML and displayed as it is |
+| disabled | boolean | false | Enable/Disable the component | |
+| visible | boolean | true | Show/Hide the component | |
+
+:::caution
+*1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.
+:::
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| click | function | Event handler when Clicked | It will pass the event object as the argument |
+
+### Constructor
+
+MobileButton(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties |  |
+
+### Custom CSS
+:::tip
+Please check [Custom CSS feature guide](../../getting-started/custom-css.md) at first.
+:::
+
+Here is a list of properties that can be used for modifying component style:
+#### Property
+| Name | Description |
+| :--- | :--- |
+| --kuc-mobile-button-background-color | |
+| --kuc-mobile-button-background-color-active | |
+| --kuc-mobile-button-background-color-focus | This property won't take effect in Safari because the clicked buttons don't get focus.<br/>Please read this [clicking and focus](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#clicking_and_focus) article for more information! |
+| --kuc-mobile-button-font-size | |
+| --kuc-mobile-button-height | |
+| --kuc-mobile-button-text-color | |
+| --kuc-mobile-button-width | |
+
+---
+
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const header = kintone.mobile.app.getHeaderMenuSpaceElement();
+
+const mobileButton = new Kuc.MobileButton({
+  text: 'Submit',
+  type: 'submit',
+  content: `<div>
+              <svg>...</svg>
+              <span>Search</span>
+            </div>;`,
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+header.appendChild(mobileButton);
+
+mobileButton.addEventListener('click', event => {
+  console.log(event);
+});
+```
+
+---
+
+## Related Articles
+
+- [Mobile timecard customization](../../guides/mobile-timecard-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-checkbox.md
new file mode 100644
index 0000000000..955859915e
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-checkbox.md
@@ -0,0 +1,130 @@
+---
+id: mobile-checkbox
+title: MobileCheckbox
+sidebar_label: MobileCheckbox
+---
+
+## Overview
+
+The MobileCheckbox component displays a checkbox element for multiple selections.
+
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
+
+<MobileCheckboxComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| borderVisible | boolean | true | Show/Hide the border | |
+| disabled | boolean | false | Enable/Disable the component from selecting | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| items | Array\<[Item](#item)\> | []  | List of options to display | Will result an error if the value of `items` is not an array |
+| value *1 | Array\<string\> | []  | Selected value | No option will be selected if the `value` and `selectedIndex` are unspecified<br/>If setting duplicated value and not setting `selectedIndex`, the first mapped value item in `Item.value` will be selected and `selectedIndex` will be the index number<br/>Will result an error if the value is not an array |
+| selectedIndex *1 | Array\<Number\> | []  | List of index of selected item | It supports specifying which duplicated `Item.value` will be selected if there is duplicated `Item.value` in `items`<br/>If `value` is not set and `selectedIndex` is valid, item that has the index number will be selected<br/>If `value` is set with duplicated `Item.value` and `selectedIndex` value maps with duplicated `Item.value` specified in `value`, item that has the index number will be selected<br/>Will result an error if the value of `selectedIndex` is not an array |
+
+:::info
+*1: You can set duplicated value in `value` and `Item.value`. In case setting duplicated value, you can handle selected item using `value` and `selectedIndex` property.<br/>
+Example: When setting `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}, {label: 'Lemon', value: 'fruit'}]`
+
+- If setting `value` and not setting `selectedIndex` as follows:
+  - value = ['fruit', 'vegetable']: The first and third items will be selected.
+  - value = ['meat', 'other']: No item will be selected.
+
+- If not setting `value` and setting `selectedIndex` as follows:
+  - selectedIndex = [0, 1]: The first and second items will be selected.
+  - selectedIndex = [98, 99]: No item will be selected.
+
+- If setting `value` and `selectedIndex` as follows:
+  - value = ['fruit', 'vegetable'], selectedIndex = [1, 3]: The second and third items will be selected.
+  - value = ['fruit', 'fruit', 'vegetable'], selectedIndex = [1, 3]: The second, third, and fourth items will be selected.
+  - value = ['fruit', 'fruit'], selectedIndex = [1, 2, 3]: The first and second items will be selected.<br/>
+  ※ If both `value` and `selectedIndex` are set at the same time, the priority of `value` will be higher. Therefore, in the first and third examples above, the item corresponding to 3 of selectedIndex will not be selected.
+:::
+
+#### Item
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | Text label for each option | If `Item.label` is unspecified, the value of `Item.value` is displayed on the UI |
+| value | string | null | Value of each option | Can set duplicated value in `Item.value` |
+| disabled | boolean | false | Enable/Disable each option | |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+
+### Constructor
+
+MobileCheckbox(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties |  |
+
+---
+
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileCheckbox = new Kuc.MobileCheckbox({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: ['Orange'],
+  selectedIndex: [0],
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  borderVisible: true
+});
+space.appendChild(mobileCheckbox);
+
+mobileCheckbox.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-date-picker.md
new file mode 100644
index 0000000000..a279f5d3d7
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-date-picker.md
@@ -0,0 +1,91 @@
+---
+id: mobile-date-picker
+title: MobileDatePicker
+sidebar_label: MobileDatePicker
+---
+
+## Overview
+
+The MobileDatePicker component allows the user to display a input area and date selection calendar.
+
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
+
+<MobileDatePickerComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
+| value | string | ""  | Text to be displayed | Format is YYYY-MM-DD<br/>The below date can be used (it will be converted to YYYY-MM-DD internally):<li>2021</li><li>2021-1</li><li>2021-01</li><li>2021-1-9</li><li>21-01-01</li>If the year is less than 4 characters, 0 will be added to the beginning<br/>If the date and/or month is ignored, it will be supplemented with 01<br/>If the date and/or month has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+
+:::info
+*1: The displayed date format is automatically switched depending on the `language` property setting as follows:
+- "en": MM/DD/YYYY
+- "ja", "zh", "zh-TW", "es": YYYY-MM-DD
+:::
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+
+### Constructor
+
+MobileDatePicker(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | Object that includes component properties |  |
+
+---
+
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileDatePicker = new Kuc.MobileDatePicker({
+  label: 'Date',
+  requiredIcon: true,
+  language: 'auto',
+  value: '2021-11-11',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileDatePicker);
+
+mobileDatePicker.addEventListener('change', event => {
+  console.log(event);
+});
+```
\ No newline at end of file
diff --git a/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-datetime-picker.md
new file mode 100644
index 0000000000..5046acd5d7
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-datetime-picker.md
@@ -0,0 +1,91 @@
+---
+id: mobile-datetime-picker
+title: MobileDateTimePicker
+sidebar_label: MobileDateTimePicker
+---
+
+## Overview
+
+The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
+
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
+
+<MobileDateTimePickerComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| language *1 | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
+| value | string | ""  | Text to be displayed | Format is YYYY-MM-DDTHH:MM:SS<br/>The below date and time can be used (it will be converted to YYYY-MM-DDTHH:MM:SS internally):<li>2021</li><li>2021T01</li><li>2021-06</li><li>2021-12-12</li><li>2021-12-12T01</li><li>2021-12-12T01:01</li>If the date and/or month is ignored, it will be supplemented with 01<br/>If the hour, minute, and/or second is ignored, it will be supplemented with 00<br/>Will result an error if setting invalid format or value |
+| disabled | boolean | false | Enable/Disable the component | |
+| hour12 | boolean | false | Setting of the clock display (12-hour clock/24-hour clock) Default is 24-hour clock | Available options:<br/>true: 12-hour clock<br/>false: 24-hour clock |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+
+:::info
+ *1: The displayed date format is automatically switched depending on the `language` property setting as follows:
+ - "en": MM/DD/YYYY
+ - "ja", "zh", "zh-TW", "es": YYYY-MM-DD
+:::
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change<br/>event.detail.changedPart : "date" or "time" which has been changed |
+
+### Constructor
+
+MobileDateTimePicker(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | Object that includes component properties |  |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.app.record.getSpaceElement('space');
+
+const mobileDateTimePicker = new Kuc.MobileDateTimePicker({
+  label: 'DateTime',
+  requiredIcon: true,
+  language: 'auto',
+  hour12: false,
+  value: '2021-11-11T11:30:00',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileDateTimePicker);
+
+mobileDateTimePicker.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-dropdown.md
new file mode 100644
index 0000000000..f22f19103e
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-dropdown.md
@@ -0,0 +1,122 @@
+---
+id: mobile-dropdown
+title: MobileDropdown
+sidebar_label: MobileDropdown
+---
+
+## Overview
+
+The MobileDropdown component allows the user to select one out of several options.
+
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
+
+<MobileDropdownComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| value *1 | string | ""  | Selected value | No option will be selected if the `value` and `selectedIndex` are unspecified<br/>If setting duplicated value and not setting `selectedIndex`, the first mapped value item in `Item.value` will be selected and `selectedIndex` will be the index number<br/>Will result an error if the value is not a string |
+| selectedIndex *1 | number | -1  | Index of selected item | It supports specifying which duplicated `Item.value` will be selected if there is duplicated `Item.value` in `items`<br/>If `value` is not set and `selectedIndex` is valid, item that has the index number will be selected<br/>If `value` is set with duplicated `Item.value` and `selectedIndex` value maps with duplicated `Item.value` specified in `value`, the item that has the index number will be selected<br/>Will result an error if the value of `selectedIndex` is not a number |
+| disabled | boolean | false | Enable/Disable the component from selecting | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| items | Array\<[Item](#item)\> | []  | List of options to display | Will result an error if the value of `items` is not an array |
+
+:::info
+ *1: You can set duplicated value in `Item.value`. In case setting duplicated value, you can handle selected item using `value` and `selectedIndex` property.<br/>
+ Example: When setting `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}]`
+
+ - If setting `value` and not setting `selectedIndex` as follows:
+   - value = 'fruit': The first item will be selected.
+   - value = 'other': No item will be selected.
+
+ - If not setting `value` and setting `selectedIndex` as follows:
+   - selectedIndex = 1: The second item will be selected.
+   - selectedIndex = 99: No item will be selected.
+:::
+
+#### Item
+
+| Name   | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | Text for each option | If `Item.label` is unspecified, the value of `Item.value` is displayed on the UI |
+| value | string | null | Value of each option | Can set duplicated value in `Item.value` |
+| disabled | boolean | false | Enable/Disable each option | |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+
+### Constructor
+
+MobileDropdown(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties |  |
+
+---
+
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileDropdown = new Kuc.MobileDropdown({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple',
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: 'Orange',
+  selectedIndex: 0,
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileDropdown);
+
+mobileDropdown.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-multichoice.md
new file mode 100644
index 0000000000..0beae56591
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-multichoice.md
@@ -0,0 +1,126 @@
+---
+id: mobile-multichoice
+title: MobileMultiChoice
+sidebar_label: MobileMultiChoice
+---
+
+## Overview
+
+The MobileMultiChoice component allows the user to select multiple values from multiple options.
+
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
+
+<MobilMultichoiceComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name  | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label is not displayed if unspecified or emptied |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| items | Array\<[Item](#item)\> | []  | List of options to display | Will result an error if the value of `items` is not an array |
+| value *1 | Array\<string\> | []  | Selected value | No option will be selected if the `value` and `selectedIndex` are unspecified<br/>If setting duplicated value and not setting `selectedIndex`, the first mapped value item in `Item.value` will be selected and `selectedIndex` will be the index number<br/>Will result an error if the value is not an array |
+| selectedIndex *1 | Array\<Number\> | []  | List of index of selected item | It supports specifying which duplicated Item.value will be selected if there is duplicated `Item.value` in `items`<br/>If `value` is not set and `selectedIndex` is valid, item that has the index number will be selected<br/>If `value` is set with duplicated Item.value and `selectedIndex` value maps with duplicated `Item.value` specified in `value`, item that has the index number will be selected<br/>Will result an error if the value of `selectedIndex` is not an array |
+
+:::info
+*1: You can set duplicated value in `value` and `Item.value`. In case setting duplicated value, you can handle selected item using `value` and `selectedIndex` property.<br/>
+Example: When setting `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}, {label: 'Lemon', value: 'fruit'}]`
+
+- If setting `value` and not setting `selectedIndex` as follows:
+  - value = ['fruit', 'vegetable']: The first and third items will be selected.
+  - value = ['meat', 'other']: No item will be selected.
+
+- If not setting `value` and setting `selectedIndex` as follows:
+  - selectedIndex = [0, 1]: The first and second items will be selected.
+  - selectedIndex = [98, 99]: No item will be selected.
+
+- If setting `value` and `selectedIndex` as follows:
+  - value = ['fruit', 'vegetable'], selectedIndex = [1, 3]: The second and third items will be selected.
+  - value = ['fruit', 'fruit', 'vegetable'], selectedIndex = [1, 3]: The second, third, and fourth items will be selected.
+  - value = ['fruit', 'fruit'], selectedIndex = [1, 2, 3]: The first and second items will be selected.<br/>
+  ※ If both `value` and `selectedIndex` are set at the same time, the priority of `value` will be higher. Therefore, in the first and third examples above, the item corresponding to 3 of selectedIndex will not be selected.
+:::
+
+#### Item
+
+| Name  | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | Label text for each option | If `Item.label` is unspecified, the value of `Item.value` is displayed on the UI |
+| value | string | null | Value of each option | Can set duplicated value in `Item.value` |
+| disabled | boolean | false | Enable/Disable each option | |
+
+### Event
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument.<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after changing |
+
+### Constructor
+
+MobileMultiChoice(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties | |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileMultiChoice = new Kuc.MobileMultiChoice({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple'
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    }
+  ],
+  value: ['Orange'],
+  selectedIndex: [0],
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileMultiChoice);
+
+mobileMultiChoice.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-notification.md
new file mode 100644
index 0000000000..cfe86fc052
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-notification.md
@@ -0,0 +1,101 @@
+---
+id: mobile-notification
+title: MobileNotification
+sidebar_label: MobileNotification
+---
+
+## Overview
+
+The MobileNotification component allows the user to display pop-up notifications.
+
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
+
+<MobileNotificationComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| text | string | ""  | Text to be displayed | |
+| duration | number | -1  | Milliseconds to close component | Unit is milliseconds<br/>You can specify 0 or a number larger than 0<br/>If you specify invalid value (a number less than 0 or is not a number), component is opened and will not be closed automatically |
+| container | HTMLElement | document.body | Target element to append the component | By default, it uses the body of the top-level document object, so it's simply `document.body` most of the time<br/>Will result an error if the value of `container` is not an HTMLElement |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| close | function | Event handler when the component has been closed | It will pass the event object as the argument |
+
+### Constructor
+
+MobileNotification(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties |  |
+
+### Method
+
+Here is a list of available methods:
+
+#### open()
+Show the MobileNotification
+
+##### Parameter
+none
+
+##### Return
+none
+
+#### close()
+Hide the MobileNotification
+
+##### Parameter
+none
+
+##### Return
+none
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const mobileNotification = new Kuc.MobileNotification({
+  text: 'Error occurred!',
+  className: 'options-class',
+  duration: 2000,
+  container: document.body
+});
+
+mobileNotification.addEventListener('close', event => {
+  console.log(event);
+});
+
+mobileNotification.open();
+mobileNotification.close();
+```
+
+---
+
+## Related Articles
+
+- [Mobile timecard customization](../../guides/mobile-timecard-customization.md)
diff --git a/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-radio-button.md
new file mode 100644
index 0000000000..f8c1aee931
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-radio-button.md
@@ -0,0 +1,122 @@
+---
+id: mobile-radio-button
+title: MobileRadioButton
+sidebar_label: MobileRadioButton
+---
+
+## Overview
+
+The MobileRadioButton component allows the user to select one out of several options.
+
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
+
+<MobileRadioButtonComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name  | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| value *1 | string | ""  | Selected value | No option will be selected if the `value` and `selectedIndex` are unspecified<br/>If setting duplicated value and not setting `selectedIndex`, the first mapped value item in `Item.value` will be selected and `selectedIndex` will be the index number<br/>Will result an error if the value is not a string |
+| selectedIndex *1 | number | -1  | Index of selected item | It supports specifying which duplicated `Item.value` will be selected if there is duplicated `Item.value` in `items`<br/>If `value` is not set and `selectedIndex` is valid, item that has the index number will be selected<br/>If `value` is set with duplicated `Item.value` and `selectedIndex` value maps with duplicated `Item.value` specified in `value`, the item that has the index number will be selected<br/>Will result an error if the value of `selectedIndex` is not a number |
+| borderVisible | boolean | true | Show/Hide the border | |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+| items | Array\<[Item](#item)\> | []  | List of options to display | Will result an error if the value of `items` is not an array |
+
+:::info
+ *1: You can set duplicated value in `Item.value`. In case setting duplicated value, you can handle selected item using `value` and `selectedIndex` property.<br/>
+ Example: When setting `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}]`
+
+ - If setting `value` and not setting `selectedIndex` as follows:
+   - value = 'fruit': The first item will be selected.
+   - value = 'other': No item will be selected.
+
+ - If not setting `value` and setting `selectedIndex` as follows:
+   - selectedIndex = 1: The second item will be selected.
+   - selectedIndex = 99: No item will be selected.
+:::
+
+#### Item
+
+| Name  | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| label | string | null | Text for each option | If `Item.label` is unspecified, the value of `Item.value` is displayed on the UI |
+| value | string | null | Value of each option | Can set duplicated value in `Item.value` |
+| disabled | boolean | false | Enable/Disable each option | |
+
+### Event
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+
+### Constructor
+
+MobileRadioButton(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties |  |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileRadioButton = new Kuc.MobileRadioButton({
+  label: 'Fruit',
+  requiredIcon: true,
+  items: [
+    {
+      label: 'orange',
+      value: 'Orange'
+    },
+    {
+      label: 'apple',
+      value: 'Apple',
+    },
+    {
+      label: 'banana',
+      value: 'Banana',
+      disabled: true
+    },
+  ],
+  value: 'Orange',
+  selectedIndex: 0,
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false,
+  borderVisible: true
+});
+space.appendChild(mobileRadioButton);
+
+mobileRadioButton.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-text.md
new file mode 100644
index 0000000000..91580a8df4
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-text.md
@@ -0,0 +1,100 @@
+---
+id: mobile-text
+title: MobileText
+sidebar_label: MobileText
+---
+
+## Overview
+
+The MobileText component allows the user to display a single line text element.
+
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
+
+<MobileTextComponent />
+
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| placeholder | string | ""  | Placeholder text for entry example | |
+| prefix | string | ""  | Text to be displayed before the input text | |
+| suffix | string | ""  | Text to be displayed after the input text | |
+| textAlign | string | "left"  | Text alignments | Available options:<br/>"left" : Justified to the left<br/>"right" : Justified to the right |
+| value | string | ""  | Text to be displayed | |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+| focus | function | Event handler for the focused time | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.value : Value at the time of focus |
+| input | function | Event handler when the value has been inputting | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.data : Value of inserted characters<br/>event.detail.value : Value of target element<br/><br/>*Notes on the value of "event.detail.data"<br/>It is inserted characters when inserting text<br/>It will be "null" when inserting by "Paste" or "Drag and Drop" or pressing "Enter", "Delete", or "Backspace" |
+
+### Constructor
+
+MobileText(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | Object that includes component properties |  |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileText = new Kuc.MobileText({
+  label: 'Fruit',
+  requiredIcon: true,
+  value: 'Apple',
+  placeholder: 'Apple',
+  prefix: '$',
+  suffix: 'yen',
+  textAlign: 'left',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileText);
+
+mobileText.addEventListener('change', event => {
+  console.log(event);
+});
+
+mobileText.addEventListener('focus', event => {
+  console.log(event);
+});
+
+mobileText.addEventListener('input', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-textarea.md
new file mode 100644
index 0000000000..86ff364a50
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-textarea.md
@@ -0,0 +1,93 @@
+---
+id: mobile-textarea
+title: MobileTextArea
+sidebar_label: MobileTextArea
+---
+
+## Overview
+
+The MobileTextArea component allows the user to display multiple lines of text element.
+
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
+
+<MobileTextAreaComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or is empty |
+| placeholder | string | ""  | Placeholder text for entry example | |
+| value | string | ""  | Text to be displayed | |
+| disabled | boolean | false | Enable/Disable the component | |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument.<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+| focus | function | Event handler for the focused time | It will pass the event object as the argument.<br/><br/>You can receive the following values in event.detail<br/>event.detail.value : Value at the time of focus |
+| input | function | Event handler when the value has been inputting | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.data : Value of inserted characters<br/>event.detail.value : Value of target element<br/><br/>*Notes on the value of "event.detail.data"<br/>It is inserted characters when inserting text<br/>It will be "null" when inserting by "Paste" or "Drag and Drop" or pressing "Enter", "Delete", or "Backspace" |
+
+### Constructor
+
+MobileTextArea(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options | object | \{\} | Object that includes component properties |  |
+
+---
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileTextArea = new Kuc.MobileTextArea({
+  label: 'Fruit',
+  requiredIcon: true,
+  placeholder: 'Apple',
+  value: 'Apple',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileTextArea);
+
+mobileTextArea.addEventListener('change', event => {
+  console.log(event);
+});
+
+mobileTextArea.addEventListener('focus', event => {
+  console.log(event);
+});
+
+mobileTextArea.addEventListener('input', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-time-picker.md
new file mode 100644
index 0000000000..11d5d042b2
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/components/mobile/mobile-time-picker.md
@@ -0,0 +1,86 @@
+---
+id: mobile-time-picker
+title: MobileTimePicker
+sidebar_label: MobileTimePicker
+---
+
+## Overview
+
+The MobileTimePicker component allows the user to display a input area and time selection listbox.
+
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
+
+<MobileTimePickerComponent />
+
+---
+
+## Specification
+
+### Property
+
+Here is a list of properties that can be used for modifying the component:
+
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| className | string | ""  | Component class name | |
+| error | string | ""  | Text to be displayed in error | Error will not be displayed if unspecified or left empty |
+| id | string | ""  | Component id name | |
+| label | string | ""  | Label for the component | Label will not be displayed if unspecified or left empty |
+| language | string | "auto"  | Language setting | Available options: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en") |
+| value | string | ""  | Text to be displayed | Format is HH:MM<br/>The below time can be used (it will be converted to HH:MM internally):<li>5:30</li><li>05:3</li><li>5:3</li>If the hour and/or time has only 1 character, 0 will be added to the beginning<br/>Will result an error if setting invalid format or value  |
+| disabled | boolean | false | Enable/Disable the component | |
+| hour12 | boolean | false | Setting of the clock display (12-hour clock/24-hour clock) Default is 24-hour clock | Available options:<br/>true: 12-hour clock<br/>false: 24-hour clock |
+| requiredIcon | boolean | false | Show/Hide the required icon | |
+| visible | boolean | true | Show/Hide the component | |
+
+### Event
+
+Here is a list of events that can be specified:
+
+| Name | Type | Description | Remark |
+| :--- | :--- | :--- | :--- |
+| change | function | Event handler when the value has been changed | It will pass the event object as the argument<br/><br/>You can receive the following values in event.detail<br/>event.detail.oldValue : Value before the change<br/>event.detail.value : Value after the change |
+
+### Constructor
+
+MobileTimePicker(options)<br/>
+Here is a list of available constructors:
+
+#### Parameter
+| Name | Type | Default | Description | Remark |
+| :--- | :--- | :--- | :--- | :--- |
+| options  | object | \{\} | Object that includes component properties |  |
+
+---
+
+## Sample Code
+
+:::tip
+Please check the [package installation](../../getting-started/quick-start.md#installation) method first.
+:::
+
+Here is a sample code when all parameters are specified:
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const space = kintone.mobile.app.record.getSpaceElement('space');
+
+const mobileTimePicker = new Kuc.MobileTimePicker({
+  label: 'Time',
+  requiredIcon: true,
+  language: 'auto',
+  hour12: false,
+  value: '11:30',
+  error: 'Error occurred!',
+  className: 'options-class',
+  id: 'options-id',
+  visible: true,
+  disabled: false
+});
+space.appendChild(mobileTimePicker);
+
+mobileTimePicker.addEventListener('change', event => {
+  console.log(event);
+});
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/getting-started/custom-css.md b/docs/document/versioned_docs/version-1.18.0/getting-started/custom-css.md
new file mode 100644
index 0000000000..a170a013ba
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/getting-started/custom-css.md
@@ -0,0 +1,65 @@
+---
+id: custom-css
+title: Custom CSS
+sidebar_label: Custom CSS
+---
+
+## Overview
+
+**Kintone UI Component (KUC)** provides some CSS custom properties to create customizable elements by using [CSS inheritance](#css-inheritance), [CSS custom properties](#css-custom-properties) together. By applying CSS selectors to customize CSS custom properties, tree-based and per-instance theming are straightforward to apply.
+
+### CSS inheritance
+
+[CSS inheritance](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) lets parent elements propagate certain CSS properties to their descendants.
+
+### CSS custom properties
+
+All [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (`--custom-property-name`) inherit their value from their parent. You can use this to make your component's styles configurable from the outside.
+
+KUC will publish some properties for each element and based on that, users can easily customize CSS properties of the element.
+
+## Usage
+
+You can set the value for `--my-background` by using the CSS selectors:
+
+```markup
+<style>
+  my-element {
+    --my-background: #d9092f;
+  }
+  .sample-class {
+    --my-background: #a8a632;
+  }
+  #sample-id {
+    --my-background: #1ac9b8;
+  }
+</style>
+<my-element></my-element>
+<my-element class="sample-class"></my-element>
+<my-element id="sample-id"></my-element>
+```
+:::tip
+You can find a list of the CSS custom properties in the **Custom CSS** section on each component page.
+:::
+
+## Sample code
+
+Here is a sample code when customizing some CSS properties for `Text` component:
+
+```markup
+<style>
+  kuc-text {
+    --kuc-text-input-width: 200px;
+    --kuc-text-input-height: 200px;
+  }
+  .sample-class {
+    --kuc-text-input-font-size: 16px;
+  }
+  #sample-id {
+    --kuc-text-input-color: #f25b0a;
+  }
+</style>
+<kuc-text></kuc-text>
+<kuc-text class="sample-class"></kuc-text>
+<kuc-text id="sample-id"></kuc-text>
+```
diff --git a/docs/document/versioned_docs/version-1.18.0/getting-started/quick-start.md b/docs/document/versioned_docs/version-1.18.0/getting-started/quick-start.md
new file mode 100644
index 0000000000..1e535f7262
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/getting-started/quick-start.md
@@ -0,0 +1,216 @@
+---
+id: quick-start
+title: Quick Start
+sidebar_label: Quick Start
+---
+
+## What is Kintone UI Component?
+
+Kintone UI Component is a library that enables Kintone developers to build forms with Kintone's styling with ease.
+
+### Example for Desktop components
+
+![desktop components](/img/desktop_components.png)
+
+### Example for Mobile components
+
+![mobile components](/img/mobile_components.png)
+
+## Preparation: Create App
+
+In this tutorial, you will place a Button component inside the header menu space on the Record List page of a Kintone app.
+
+First, follow the below steps to create an app to install Kintone UI Component.
+
+1. Create a blank app. ([Creating an App from Scratch](https://get.kintone.help/k/en/user/create_app/tutorial.html))<br/>
+You do not need to set up any fields in this app.
+
+## Installation
+
+Kintone UI Component supports installation via downloading the `kuc.min.js` file, a npm package, or a CDN.<br/>
+You can choose to import or implement the library according to the environment such as the browser environment or Node.js environment.<br/>
+In this article, we will show you how to install and implement using each approach.
+
+:::tip
+We recommend that you should upgrade Kintone UI Component to the latest version for your projects.
+:::
+:::tip
+See the Components section in the sidebar for more details on each component.<br/>
+(Additional components will be added in order.)
+:::
+
+### Use with downloading kuc.min.js file
+
+:::tip
+When using a version on and after v1.4.0, please use `Kucs["1.x.x"]` instead of Kuc and specify your expected version (ex. `new Kucs["1.4.0"].Button()`).<br/>
+The rendered components' tags and class names will include the version number.<br/>
+You may still use `Kuc` as a global variable but **note that it may be conflicting when adding two or more `kuc.min.js` files** on Kintone customization or plug-in. In this case, the `Kuc` object refers to the last loaded `kuc.min.js` file.<br/>
+In case that there is only one `kuc.min.js` file in the Kintone system or there is no problem with using last loaded `kuc.min.js` file, you can use Kuc object. Please remove `const Kuc = Kucs['1.x.x'];` line.
+When using a version before v1.4.0, please use `Kuc` as a global variable but **note that it may be conflicting when adding two or more `kuc.min.js` files** on Kintone customization or plug-in.<br/>
+Please read this [Version conflicts issue and solution](../guides/version-conflicts-issue-solution.md) article for more information!
+:::
+
+1. Download the file located inside Kintone UI Component repository's [each version Release field](https://github.com/kintone-labs/kintone-ui-component/releases). Unzip the attached archives folder (kintone-ui-component-\{version\} .tgz). Upload the following file to the `JavaScript and CSS Customization` inside Kintone's app setting.
+
+```bash
+./umd/kuc.min.js
+```
+
+2. Create a `index.js` file.
+
+:::tip
+If you only have one `kuc.min.js` file in your system, or you are okay with using the `kuc.min.js` file loaded last, you can remove the "`const Kuc = Kucs['1.x.x']`" line.
+:::
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+kintone.events.on('app.record.index.show', event => {
+  const header = kintone.app.getHeaderMenuSpaceElement();
+
+  const button = new Kuc.Button({
+    text: 'Submit',
+    type: 'submit'
+  });
+  button.addEventListener('click', clickEvent => {
+    console.log(clickEvent);
+  });
+
+  header.appendChild(button);
+  return event;
+});
+```
+
+3. To apply the customization, upload `index.js` file to the `JavaScript and CSS Customization` inside the Kintone app settings. ([Customizing an App with JavaScript and CSS](https://get.kintone.help/k/en/user/app_settings/js_customize.html))
+
+![button customize](/img/button_customize.png)
+
+### Use the npm package
+
+:::tip
+When using on and after v1.4.0, rendered components' tags and class names will include the version number.<br/>
+Please read this [Version conflicts issue and solution](../guides/version-conflicts-issue-solution.md) article for more information! <br/>
+:::
+
+1. Create a folder name `customization`, and move your root into the folder, then execute the following command:
+
+```bash
+mkdir customization && cd customization
+npm init -y
+npm install kintone-ui-component
+npm install webpack webpack-cli --save-dev
+```
+
+:::tip
+If necessary, install `babel-loader` and `css-loader`.
+:::
+
+2. Import the components you want to use, and create a `index.js` files under `src` folder.
+
+```js
+import { Button } from 'kintone-ui-component/lib/button';
+
+kintone.events.on('app.record.index.show', event => {
+  const header = kintone.app.getHeaderMenuSpaceElement();
+
+  const button = new Button({
+    text: 'Submit',
+    type: 'submit'
+  });
+  button.addEventListener('click', clickEvent => {
+    console.log(clickEvent);
+  });
+
+  header.appendChild(button);
+  return event;
+});
+```
+3. Add the following `webpack.config.js` file into the root:
+
+```js
+const path = require('path');
+module.exports = (env = {}) => {
+  return {
+    entry: {
+      customization: './src/index.js'
+    },
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: '[name].min.js'
+    }
+  };
+};
+```
+
+4. Add webpack build script into `package.json`.
+
+```json
+"scripts": {
+  "build:webpack": "webpack --mode production",
+  ...
+}
+```
+
+5. Execute the following command to generate a file for customization:
+
+```bash
+npm run build:webpack
+```
+
+```bash
+Output Result：
+./dist/customization.min.js
+```
+
+6. Upload the bundled file created in the previous step to the `JavaScript and CSS Customization` option inside Kintone app settings. ([Customizing an App with JavaScript and CSS](https://get.kintone.help/k/en/user/app_settings/js_customize.html))
+
+![button customize](/img/button_customize.png)
+
+### Use the CDN
+:::tip
+See the guidance and sample code at [Use with downloading kuc.min.js file](#use-with-downloading-kucminjs-file) section.
+:::
+
+1. Add the following CDN URL into the `JavaScript and CSS Customization` of a deployed Kintone app. ([Customizing an App with JavaScript and CSS](https://get.kintone.help/k/en/user/app_settings/js_customize.html))<br/>
+Once the CDN is being imported to the app, you will have access to the global object of `Kuc`.
+
+   - If you want to import a particular version, specify the version number after the project name.
+     ```bash
+     https://unpkg.com/kintone-ui-component@1.0.0/umd/kuc.min.js
+     ```
+
+   - For the latest version of Kintone UI Component:
+     ```bash
+     https://unpkg.com/kintone-ui-component/umd/kuc.min.js
+     ```
+
+2. The implementation details and steps provided below are aligned with those described in the "Use with downloading kuc.min.js file" section.
+
+:::caution
+unpkg is not a CDN service provided by Cybozu. It is recommended that you use this for verification.<br/>
+In the production environment, you can [download the `kuc.min.js` file](#use-with-downloading-kucminjs-file) from GitHub and use it to avoid any failures and problems related to unpkg.
+:::
+
+## Browser support status
+
+<table>
+  <tbody>
+    <tr>
+      <th>Chrome</th>
+      <th>Safari</th>
+      <th>Firefox</th>
+      <th>Edge</th>
+    </tr>
+    <tr>
+      <td>○</td>
+      <td>○</td>
+      <td>○</td>
+      <td>○</td>
+    </tr>
+  </tbody>
+</table>
+
+:::info
+The components have been tested in the latest version of each supported browser.<br/>
+You can preview the components in the Overview section in each component's reference page.
+:::
diff --git a/docs/document/versioned_docs/version-1.18.0/getting-started/usage-with-typescript.md b/docs/document/versioned_docs/version-1.18.0/getting-started/usage-with-typescript.md
new file mode 100644
index 0000000000..6d65541641
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/getting-started/usage-with-typescript.md
@@ -0,0 +1,106 @@
+---
+id: usage-with-typescript
+title: Usage with TypeScript
+sidebar_label: Usage with TypeScript
+---
+## Overview
+
+You can add static typing to JavaScript to improve developer productivity and code quality thanks to TypeScript.<br/>
+In this guide, you can learn how to integrate Kintone UI Component (KUC) with TypeScript and webpack.
+
+## Install and configuration
+
+1. As initialization, create a new KUC project named `kuc-demo-ts` using `npm`.
+```bash
+mkdir kuc-demo-ts
+cd kuc-demo-ts
+npm init -y
+```
+
+2. Install `webpack` locally and install `webpack-cli` (the tool used to run webpack on the command line).
+
+```bash
+npm install --save-dev webpack webpack-cli
+```
+
+3. Install the TypeScript compiler and loader.
+```bash
+npm install --save-dev typescript ts-loader
+```
+
+4. Assuming you have successfully created a project with the following structure.
+```bash
+kuc-demo-ts
+  |- dist
+    |- index.html
+  |- /src
+    |- index.ts
+  |- package.json
+  |- package-lock.json
+  |- webpack.config.js
+  |- tsconfig.json
+```
+
+You can refer to the files and their contents at the sample project using TypeScript on the [KUC repository](https://github.com/kintone-labs/kintone-ui-component/tree/master/demos/typescript-app).
+
+## Import KUC
+1. Install `kintone-ui-component`.
+```bash
+npm install kintone-ui-component
+```
+
+2. Modify `src/index.ts`.
+```js
+import {
+  Dropdown,
+  DropdownChangeEventDetail,
+  DropdownItem,
+  DropdownProps,
+} from 'kintone-ui-component';
+
+const root = document.getElementById('root');
+const items: DropdownItem[] = [
+  {
+    label: '-----',
+    value: '-----'
+  },
+  {
+    label: 'Orange',
+    value: 'orange'
+  },
+  {
+    label: 'Banana',
+    value: 'banana'
+  }
+];
+const dropdownProps: DropdownProps = {
+  items: items,
+  value: '-----',
+  label: 'Fruit',
+  error: 'Error occurred!'
+};
+const dropdown = new Dropdown(dropdownProps);
+dropdown.addEventListener('change', ((event: CustomEvent) => {
+  const detail: DropdownChangeEventDetail = event.detail;
+  console.log(detail);
+}) as EventListener);
+root.appendChild(dropdown);
+```
+3. Now run the following command to build.
+```bash
+npm run build
+```
+
+Open `index.html` in the `dist` directory in your browser and, if everything went right, you can see a Dropdown component displayed on the page.
+![dropdown image](/img/kuc-dropdown.png)
+KUC is written in TypeScript with complete definitions, so please try it out and enjoy the property suggestion and typing check.
+
+![dropdown param image](/img/kuc-dropdown-param.png)
+
+![dropdown props image](/img/kuc-dropdown-props.png)
+
+You can choose any component of KUC to develop your application.
+Now you can use some type of definition in your project:
+- Items property (ex: DropdownItem)
+- Component property (ex: DropdownProps, DatePickerProps)
+- CustomEvent.detail property (ex: DropdownChangeEventDetail)
diff --git a/docs/document/versioned_docs/version-1.18.0/guides/attachment-customization.md b/docs/document/versioned_docs/version-1.18.0/guides/attachment-customization.md
new file mode 100644
index 0000000000..3b254402dd
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/guides/attachment-customization.md
@@ -0,0 +1,230 @@
+---
+id: attachment-customization
+title: Attachment customization
+sidebar_label: Attachment customization
+---
+
+## Overview
+This article explains how to utilize and customize the Attachment component.<br/>
+We assume the following scenario:
+1. Create a file object (Blob/ArrayBuffer pattern and simple object pattern) and add it to the KUC (Kintone UI Component) Attachment component
+2. Get the file info that the user attached
+3. Validate the file type/size and show an error in case it is invalid
+4. Upload KUC Attachment component files into the native Kintone Attachment field
+
+### Components to use
+- [Attachment](../components/desktop/attachment.md)
+- [Button](../components/desktop/button.md)
+- [Spinner](../components/desktop/spinner.md)
+
+## Completed image
+
+The completed image of the customized page is as follows:
+![attachment customize](/img/attachment_customize.gif)
+
+## What you will need to have ready
+
+Create an app that includes an attachment field with the id "Attachment" and a blank space field with the id "space".
+
+## JavaScript and CSS Customization
+
+When you import the UMD file of Kintone UI Component to the app, you can upload the JavaScript files by following these steps:<br/>
+You can see how to upload a file in the [Quick Start](../getting-started/quick-start.md).
+
+### Display custom attachment area
+Display the KUC Attachment component and two Button components:
+- add custom files to KUC Attachment
+- upload to native kintone Attachment
+
+```javascript
+const KINTONE_ATTACHMENT_FIELD = 'Attachment'; // kintone attachment field ID
+const SPACE_ID = 'space'; // kintone space ID
+const Kuc = Kucs['1.x.x'];
+kintone.events.on('app.record.detail.show', async event => {
+  if (event.record[`${KINTONE_ATTACHMENT_FIELD}`]) {
+    const attachment = new Kuc.Attachment({
+      files: record[`${KINTONE_ATTACHMENT_FIELD}`].value,
+      label: 'KUC Attachment'
+    });
+    const addCustomFilesButton = new Kuc.Button({
+      text: 'add custom files to KUC Attachment'
+    });
+    const uploadButton = new Kuc.Button({
+      text: 'upload to native kintone Attachment',
+      type: 'submit'
+    });
+    const spinner = new Kuc.Spinner();
+    const spaceElement = kintone.app.record.getSpaceElement(SPACE_ID);
+    const container = document.createElement('div');
+    container.appendChild(attachment);
+    container.appendChild(addCustomFilesButton);
+    container.appendChild(uploadButton);
+    spaceElement.appendChild(container);
+  }
+  return event;
+});
+```
+### Create some file objects and apply them to the KUC Attachment component
+Add a click event listener for `addCustomFilesButton`.<br/>
+When the button is clicked, it will create three types of file objects as follows:
+- Blob/ArrayBuffer files modified to [File object](https://developer.mozilla.org/en-US/docs/Web/API/File)
+- Simple object (`{name: "xx", size: "xx"}`)
+And add them to the `files` property of the KUC Attachment component.
+
+```javascript
+const addCustomFilesButton = new Kuc.Button({
+  text: 'add custom files to KUC Attachment'
+});
+addCustomFilesButton.addEventListener('click', () => {
+  attachment.files = attachment.files.concat(initCustomFiles());
+});
+function initCustomFiles() {
+  const blob = new Blob(['this type is blob'], { type: 'text' });
+  const buffer = new ArrayBuffer(8);
+  const customFiles = [
+    arrayBufferToFile(buffer, 'array-buffer-file.txt', 'text'),
+    blobToFile(blob, 'blob-file.txt'),
+    { name: 'custom-file.txt', size: '150', type: 'text' }
+  ];
+  return customFiles;
+}
+
+function arrayBufferToFile(buffer, filename, type) {
+  const blob = new Blob([buffer], { type: type });
+  return new File([blob], filename, { type: type });
+}
+
+function blobToFile(blob, filename) {
+  return new File([blob], filename, { type: blob.type });
+}
+```
+### Get the files info selected by a user and validate the type and size of them
+Add a change event listener for `attachment`.<br/>
+When a user selects/deletes any files, we can get the file info by the callback of the change event.<br/>
+Validate the type/size("text/50MB") of the files and get the index of invalid files.
+
+```javascript
+attachment.addEventListener('change', event => {
+  console.log(event.detail); // The changed file info
+  attachment.error = validateAttachmentFiles(event.detail.files);
+});
+function validateAttachmentFiles(files) {
+  const acceptType = 'text';
+  const maxSize = 1024 * 1024 * 50; // 50Mb
+  let error = '';
+  let typeErrorCount = 0;
+  let sizeErrorCount = 0;
+  files.forEach((file, index) => {
+    let types = [];
+    if (file.type) {
+      types = file.type.split('/');
+    }
+    // The file type in the native kintone attachment field file is "contentType"
+    if (file.contentType) {
+      types = file.contentType.split('/');
+    }
+    if (!types.includes(acceptType)) {
+      typeErrorCount++;
+      console.log(`Invalid type file index is ${index}`);
+    }
+    if (!file.size || parseInt(file.size, 10) > maxSize) {
+      sizeErrorCount++;
+      console.log(`Invalid size file index is ${index}`);
+    }
+  });
+  if (typeErrorCount > 0) {
+    error = `There ${
+      typeErrorCount === 1
+        ? 'is an invalid type file'
+        : 'are ' + typeErrorCount + ' invalid type files'
+    }!`;
+  }
+  if (sizeErrorCount > 0) {
+    error = `There ${
+      sizeErrorCount === 1
+        ? 'is an invalid size file'
+        : 'are ' + sizeErrorCount + ' invalid size files'
+    }!`;
+  }
+  return error;
+}
+```
+### Upload KUC Attachment component files into the native Kintone Attachment field
+Add a click event listener for `uploadButton`.<br/>
+When the button is clicked, show the KUC Spinner component.<br/>
+Use the `uploadFile` method of KintoneRestApiClient to upload files to Kintone.<br/>
+Then use the fileKeys returned by the upload method to update the Kintone record.<br/>
+Finally, close the KUC Spinner component and refresh the page.<br/>
+All API calls use [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) or [kintone REST API](https://kintone.dev/en/docs/kintone/rest-api/).
+
+```javascript
+const KINTONE_ATTACHMENT_FIELD = 'Attachment'; // kintone attachment field ID
+const ID = '$id';
+const uploadButton = new Kuc.Button({
+  text: 'upload to native kintone Attachment',
+  type: 'submit'
+});
+uploadButton.addEventListener('click', async () => {
+  spinner.open();
+  const fileKeys = await uploadFiles(attachment.files);
+  const params = generateRecordParams(fileKeys, record[`${ID}`].value);
+  await updateRecord(params);
+  spinner.close();
+  location.reload();
+});
+
+function generateRecordParams(fileKeys, recordId) {
+  const app = kintone.app.getId();
+  const record = {};
+  record[`${KINTONE_ATTACHMENT_FIELD}`] = { value: fileKeys };
+  return { app: app, id: recordId, record: record };
+}
+
+async function uploadFiles(files) {
+  const fileKeys = [];
+  for (const file of files) {
+    if (!file.fileKey) {
+      const response = await uploadFile(file);
+      file.fileKey = response.fileKey;
+    }
+    fileKeys.push({ fileKey: file.fileKey });
+  }
+  return fileKeys;
+}
+
+function uploadFile(file) {
+  return new Promise((resolve, reject) => {
+    const formData = new FormData();
+    const blob = new Blob([file], { type: file.type ?? '' });
+    formData.append('__REQUEST_TOKEN__', kintone.getRequestToken());
+    formData.append('file', blob, file.name);
+    const url = 'https://{domain}//k/v1/file.json';
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', url);
+    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+    xhr.onload = () => {
+      if (xhr.status === 200) {
+        // success
+        resolve(JSON.parse(xhr.responseText));
+      } else {
+        // error
+        reject(JSON.parse(xhr.responseText));
+      }
+    };
+    xhr.send(formData);
+  });
+}
+
+function updateRecord(params) {
+  return kintone.api(
+    kintone.api.url('/k/v1/record.json', true),
+    'PUT',
+    params
+  );
+}
+```
+
+:::info
+This article was reviewed by Kintone and Google Chrome as of February, 2023.<br/>
+In addition, the version of Kintone UI Component that is used for customizations is v1.9.0.
+:::
diff --git a/docs/document/versioned_docs/version-1.18.0/guides/bulk-update-customization.md b/docs/document/versioned_docs/version-1.18.0/guides/bulk-update-customization.md
new file mode 100644
index 0000000000..47fba45db3
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/guides/bulk-update-customization.md
@@ -0,0 +1,202 @@
+---
+id: bulk-update-customization
+title: Bulk update customization
+sidebar_label: Bulk update customization
+---
+
+## Overview
+
+This article assumes the following scenario: Dealing with accumulated records that require status approval when using process management. <br/>
+Approving multiple records individually is time-consuming. Customization can be used to enable approval in bulk in the Record List page.<br/>
+By adding Kintone UI Component to the UI, the user can rapidly create screens that match Kintone.
+
+### Components to use
+- [Button](../components/desktop/button.md)
+- [Notification](../components/desktop/notification.md)
+- [Spinner](../components/desktop/spinner.md)
+
+## Completed image
+
+The completed image of the customized page is as follows:
+
+![Bulk Update](/img/bulk_update.gif)
+
+## What you will need to have ready
+
+Create a dedicated record view for bulk approval of records. The “(Assigned to me)” view can also be used, but for illustrative purposes this article will describe the creation of a separate, dedicated view.<br/>
+As an example, this article will show how to create a view that only displays records with the status “In progress” and that are assigned to the logged-in user.
+
+## JavaScript and CSS customization
+
+Import the UMD file of Kintone UI Component to the app and upload the JavaScript file (bulkUpdate.js) with the implementation described below.<br/>
+See [Quick Start](../getting-started/quick-start.md) for how to upload a file.<br/>
+
+For this customization, SweetAlert2 is used to create the confirmation dialog box, so the following file must be imported separately:
+- https://cdn.jsdelivr.net/npm/sweetalert2@11
+
+A Dialog component is scheduled to be provided in a future version update. In the future it will be possible to use this component instead of manually implementing the confirmation dialog box.
+
+***bulkUpdate.js***
+
+```javascript
+kintone.events.on('app.record.index.show', event => {
+
+  // Write the process here
+
+});
+```
+---
+### Place the button in Record List page
+---
+
+This section shows how to use the Button component to place a bulk approval button in a Record List page.<br/>
+The implementation shown below uses a unique view ID to ensure that the button is only displayed in the dedicated bulk approval view.<br/>
+*The view ID can be found in the record view’s URL.
+
+```javascript
+if (event.viewId !== 6342505) {
+  return event;
+}
+
+// Prevent duplication bug with ID granted by property
+if (document.getElementById('kuc_button') !== null) {
+  return event;
+}
+
+const header = kintone.app.getHeaderMenuSpaceElement();
+const button = new Kuc.Button({
+  type: 'submit',
+  text: 'Bulk approval',
+  id: 'kuc_button'
+});
+header.appendChild(button);
+```
+
+---
+### What happens when the bulk approval button is clicked?
+---
+
+The following operation is triggered when the bulk approval button is clicked.<br/>
+If there is no applicable record, the processing will be suspended before displaying the confirmation dialog. <br/>
+The processing is also suspended if Cancel is selected in the confirmation dialog.<br/>
+The Notification component is used to display the message.
+
+```javascript
+button.addEventListener('click', () => {
+
+  // When there is no records being processed
+  if (event.records.length === 0) {
+    const updateAlert = new Kuc.Notification({
+      text: 'There are no records being processed.'
+    });
+    updateAlert.open();
+    return;
+  }
+
+  Swal.fire({
+    title: 'Are you sure to approve the displayed records in bulk?',
+    icon: 'question',
+    showCancelButton: true
+  }).then(resp => {
+
+    // When Cancel is pressed
+    if (!resp.isConfirmed) {
+      const cancelInfo = new Kuc.Notification({
+        text: 'Canceled.',
+        type: 'info'
+      });
+      cancelInfo.open();
+      return;
+    }
+
+    // Write subsequent process
+
+  });
+});
+```
+Since multiple records are processed, the update may take some time.<br/>
+For that reason, a loading screen to be displayed during the update will be implemented.<br/>
+The Spinner component is used to implement the loading screen.<br/>
+
+Loading starts by open() method.
+
+```javascript
+// Start bulk approval
+const spinner = new Kuc.Spinner({
+  text: 'now loading...'
+});
+spinner.open();
+```
+Next, create parameters used in bulk update processing.
+
+Loop the records being displayed in the Record List page to create array data that contains objects with record IDs and the action names set in the process management settings.<br/>
+In obj.action, input the action name set in the process management settings.<br/>
+Please note that only records being displayed on the screen will be updated.
+
+```javascript
+const records = event.records.map(record => {
+  const obj = {};
+  obj.id = record.$id.value;
+  obj.action = 'Approve';
+  return obj;
+});
+
+const appId = kintone.app.getId();
+const param = {
+  app: appId,
+  records: records
+};
+```
+
+A message will be displayed using the Notification component if the records are successfully updated.<br/>
+Do not forget to use the close() method of Spinner to end the loading screen.<br/>
+The close event added in v1.2.0 can be used to reload the screen when the Close button in the Notification component is clicked.
+
+```javascript
+kintone
+  .api(kintone.api.url('/k/v1/records/status', true), 'PUT', param)
+  .then(() => {
+    const successInfo = new Kuc.Notification({
+      text: 'Bulk approval was successful!',
+      type: 'info'
+    });
+    successInfo.open();
+
+    // Finish bulk approval
+    spinner.close();
+
+    // When close button is pressed
+    successInfo.addEventListener('close', () => {
+      location.reload();
+    });
+  })
+  .catch(error => {
+    // Process when REST API error occurs
+  });
+```
+
+---
+### Display error message
+---
+
+The Notification component displays an error message when an error occurs during the process.
+
+```javascript
+.catch(error => {
+  // Process when REST API error occurs
+  let errmsg = 'An error occurred while retrieving the record.';
+  if (error.message) {
+    errmsg += ' ' + error.message;
+  }
+  const updateError = new Kuc.Notification({
+    text: errmsg
+  });
+  updateError.open();
+  spinner.close();
+});
+```
+
+:::info
+This article was reviewed using Kintone and Google Chrome as of January 2022.<br/>
+The version of Kintone UI Component used in this customization is v1.3.0.
+:::
\ No newline at end of file
diff --git a/docs/document/versioned_docs/version-1.18.0/guides/cleaning-check-list-customization.md b/docs/document/versioned_docs/version-1.18.0/guides/cleaning-check-list-customization.md
new file mode 100644
index 0000000000..bcec9040dd
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/guides/cleaning-check-list-customization.md
@@ -0,0 +1,227 @@
+---
+id: cleaning-check-list-customization
+title: Cleaning check list customization
+sidebar_label: Cleaning check list customization
+---
+
+## Overview
+
+This section describes how to customize an app to display components in the Record List page and let the user create a record without opening the Record Create page. It is described using a cleaning check list as an example.<br/>
+You can also learn how to transfer values from components to Kintone fields.
+
+
+### Components to use
+- [RadioButton](../components/desktop/radio-button.md)
+- [Checkbox](../components/desktop/checkbox.md)
+- [Dropdown](../components/desktop/dropdown.md)
+- [Button](../components/desktop/button.md)
+- [Notification](../components/desktop/notification.md)
+
+## Completed image
+
+The completed image of the customized page is as follows:
+
+![Cleaning Check List](/img/cleaning_check_list.png)
+
+## JavaScript and CSS customization
+
+Import the UMD file of Kintone UI Component to the app and upload the JavaScript file with the implementation described below.<br/>
+See [Quick Start](../getting-started/quick-start.md) for how to upload a file.
+
+### Display check list items
+
+Display the check list items labeled as Check Status, Replenishment Item and Cleaning Status on the Record List page of the app.<br/>
+
+Notes:
+- The Checkbox and Dropdown components display the value of Item.value if Item.label is not specified.
+- Set the requiredIcon property to true if you want to display the "required item" icon in each component.
+- If you want to set an initial value to the RadioButton or Dropdown component, specify a value for their value property.
+  - For this customization, specify 'Done' for value of the RadioButton component and '-----' for value of the Dropdown component as their initial values.
+
+```javascript
+kintone.events.on('app.record.index.show', event => {
+
+  // Prevent components duplication bug
+  if (
+    document.getElementById('kuc_radiobutton') ||
+    document.getElementById('kuc_checkbox') ||
+    document.getElementById('kuc_dropdown') ||
+    document.getElementById('kuc_button')
+  ) {
+    return event;
+  }
+
+  const app = kintone.app.getId();
+  const header = kintone.app.getHeaderSpaceElement();
+
+  // Display RadioButton
+  const radiobutton = new Kuc.RadioButton({
+    id: 'kuc_radiobutton',
+    label: 'Check Status',
+    items: [
+      {
+        value: 'Done'
+      },
+      {
+        value: 'Not Yet'
+      }
+    ],
+    value: 'Done',
+    requiredIcon: true
+  });
+
+  // Display Checkbox
+  const checkbox = new Kuc.Checkbox({
+    id: 'kuc_checkbox',
+    label: 'Replenishment Item',
+    items: [
+      {
+        value: 'Toilet Paper'
+      },
+      {
+        value: 'Hand Soap'
+      },
+      {
+        value: 'Hand Paper'
+      }
+    ],
+    requiredIcon: true
+  });
+
+  // Display Dropdown
+  const dropdown = new Kuc.Dropdown({
+    id: 'kuc_dropdown',
+    label: 'Cleaning Status',
+    items: [
+      {
+        value: '-----'
+      },
+      {
+        value: 'Done'
+      },
+      {
+        value: 'Not Yet'
+      },
+      {
+        value: 'Asking Cleaner'
+      }
+    ],
+    value: '-----',
+    requiredIcon: true
+  });
+
+  // Display Button
+  const button = new Kuc.Button({
+    id: 'kuc_button',
+    text: 'Save',
+    type: 'submit'
+  });
+  header.appendChild(radiobutton);
+  header.appendChild(checkbox);
+  header.appendChild(dropdown);
+  header.appendChild(button);
+```
+### Adjust the spacing of buttons using CSS
+
+Assign a value to the id property of the Button component and adjust the spacing of the buttons using CSS.
+
+```css
+@charset "UTF-8";
+#kuc_button {
+  margin: 25px 0px 0px 5px;
+}
+```
+
+### What happens when the Save button is clicked?
+
+You can specify a click event for the Button component.<br/>
+The required items are checked for whether they have values when the Save button is clicked.
+
+If a value is missing for an item, the component should display an error message.<br/>
+*The error message should be first initialized with an empty string.
+
+
+```javascript
+button.addEventListener('click', () => {
+  // Reset error messages
+  checkbox.error = '';
+  dropdown.error = '';
+
+  // Check required itmes
+  let erorrFlag = false;
+
+  if (!checkbox.value.length) {
+    checkbox.error = 'Please check';
+    erorrFlag = true;
+  }
+  if (dropdown.value === '-----') {
+    dropdown.error = 'Please select';
+    erorrFlag = true;
+  }
+
+  if (erorrFlag) {
+    return;
+  }
+```
+The record should be created after it is verified that the required items have values.<br/>
+
+The values of the required items entered on the page can be retrieved using `<Component variable name.value>`.<br/>
+For this customization, the value entered in each component is retrieved using radiobutton.value, checkbox.value and dropdown.value.
+
+The Notification component displays a message if the record is successfully created and registered.
+
+
+```javascript
+// Create request paramerter
+const postParam = {
+  app,
+  record: {
+    status: {
+      value: radiobutton.value
+    },
+    item: {
+      value: checkbox.value
+    },
+    cleaning: {
+      value: dropdown.value
+    }
+  }
+};
+
+// Register record
+kintone
+  .api(kintone.api.url('/k/v1/record', true), 'POST', postParam)
+  .then(resp => {
+    // Display success message
+    const success = new Kuc.Notification({
+      text: 'Registered check items',
+      type: 'success'
+    });
+    success.open();
+  });
+```
+
+### Display error message
+
+The Notification component displays an error message when an error occurs during the process.
+
+```javascript
+.catch(error => {
+  console.log(error);
+
+  // Display error message
+  let errmsg = 'An error occurred.';
+  if (error.message) {
+    errmsg += ' ' + error.message;
+  }
+  const alert = new Kuc.Notification({
+    text: errmsg
+  });
+  alert.open();
+});
+```
+
+:::info
+This article was reviewed using Kintone and Google Chrome as of September, 2021.<br/>
+The version of Kintone UI Component used in this customization is v1.1.0.
+:::
diff --git a/docs/document/versioned_docs/version-1.18.0/guides/comparison-v0-v1.md b/docs/document/versioned_docs/version-1.18.0/guides/comparison-v0-v1.md
new file mode 100644
index 0000000000..8466681590
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/guides/comparison-v0-v1.md
@@ -0,0 +1,297 @@
+---
+id: comparison-v0-v1
+title: A commentary on the difference between v0 and v1
+sidebar_label: A commentary on the difference between v0 and v1
+---
+
+## Overview
+**Kintone UI Component** v1 has been reviewed to make it easier for developers to create Kintone style components.
+
+This section explains the differences between the code written in v0 and v1, as well as the key advantages when using v1 for customizing the Kintone app.
+
+## Completed image
+For example, you can use the Kintone UI Component to create a search button on the Record List page.<br/>
+Here is the image for example:
+
+![Search box](/img/v1_search_box.png)
+
+## JavaScript and CSS Customization
+
+Let's start by looking at the code.<br/>
+The Kintone UI Component UMD file is used here.<br/>
+You can see how to upload a file in the [Quick Start](../getting-started/quick-start.md).
+
+### When v0 is used
+
+```javascript
+// Process to prevent component duplication bug
+if (document.getElementById('my_index_text') !== null) {
+  return event;
+}
+
+const header = kintone.app.getHeaderMenuSpaceElement();
+
+// Show search box
+const text = new kintoneUIComponent.Text({
+  placeholder: 'Enter keywords'
+});
+
+const button = new kintoneUIComponent.Button({
+  type: 'submit',
+  text: 'Search'
+});
+
+// Use text and a button side by side
+text.element.style.float = 'left';
+button.element.style.float = 'right';
+
+header.appendChild(text.render());
+header.appendChild(button.render());
+
+// Specified id for component duplication bug prevention
+text.element.id = 'my_index_text';
+```
+
+### When v1 is used
+
+```javascript
+// Process to prevent component duplication bug
+if (document.getElementById('kuc_text') !== null) {
+  return event;
+}
+
+const header = kintone.app.getHeaderMenuSpaceElement();
+
+// Show search box
+const text = new Kuc.Text({
+  placeholder: 'Enter keywords',
+  id: 'kuc_text'
+});
+
+const button = new Kuc.Button({
+  type: 'submit',
+  text: 'Search',
+  id: 'kuc_button'
+});
+
+header.appendChild(text);
+header.appendChild(button);
+```
+
+## The difference between v0 and v1
+
+So what has changed between v0 and v1 in terms of coding?
+
+The main difference is as follows:
+- Naming space is simplified
+- render() method is no longer required
+- Property can now be used to update values
+- Improved DOM positioning
+- Restructured the component property
+- Included additional properties for Alert and Label
+- Auto-completion of Item.label
+
+The following section will explain in further detail.
+
+---
+#### Naming Space is simplified
+---
+In v1, you can call the instance from new kintoneUIComponent to **new Kuc** in order to write a concise code.
+
+- v0 Code
+```javascript
+const text = new kintoneUIComponent.Text({
+  placeholder: 'Enter keywords'
+});
+```
+
+- v1 Code
+```javascript
+const text = new Kuc.Text({
+  placeholder: 'Enter keywords'
+});
+```
+
+In addition, there is no risk that one of them will be overwritten when both v0 and v1 UMD are loaded in the same app.
+
+---
+#### render() method is no longer required
+---
+In v0, the element of the component must be returned by using the render() method along with appendChild() for internal implementation reasons.<br/>
+In v1, render() is no longer required, and the components can be displayed easier.
+
+- v0 Code
+```javascript
+header.appendChild(text.render());
+```
+
+- v1 Code
+```javascript
+header.appendChild(text);
+```
+
+---
+#### Property can now be used to update values
+---
+In v0, when a value is updated, a method must be called separately.<br/>
+In v1, you can use properties to update values.
+
+- v0 Code
+```javascript
+const button = new kintoneUIComponent.Button({
+  type: 'submit',
+  text: 'Search'
+});
+
+// Update the value by calling the method
+button.setText('Register');
+```
+
+- v1 Code
+```javascript
+const button = new Kuc.Button({
+  type: 'submit',
+  text: 'Search',
+  id: 'kuc_button'
+});
+
+// Property can be used to update values
+button.text = 'Register';
+```
+
+---
+#### Improved DOM positioning
+---
+In v0, the specifications of each part are lined up vertically by default, and CSS is required to be adjusted in the same order.
+
+![v0](/img/v0_search_box.png)
+
+- style must be adjusted
+```javascript
+// Use text and button side by side
+text.element.style.float = 'left';
+button.element.style.float = 'right';
+```
+
+In v1, the internal specifications are being restructured, and most of the components are side by side by default, so no additional adjustment is required.<br/>
+(For some components, the default value is set to vertical for convenience.)
+
+![Search box](/img/v1_search_box.png)
+
+---
+#### Restructured the component property
+---
+In v1, the properties of each component have been reviewed and updated.
+
+For example, you can add an id to the component by using `id` property that is newly added in v1.<br/>
+You can then use the id to retrieve the element.
+
+- v0 Code
+
+```javascript
+// Process to prevent component duplication bug
+if (document.getElementById('my_index_text') !== null) {
+  return event;
+}
+
+const text = new kintoneUIComponent.Text({
+  placeholder: 'Enter keywords'
+});
+
+// ID property is missing, ID must be granted separately
+text.element.id = 'my_index_text';
+```
+
+- v1 Code
+```javascript
+// Process to prevent component duplication bug (ID name granted by the property is available)
+if (document.getElementById('kuc_text') !== null) {
+  return event;
+}
+
+const header = kintone.app.getHeaderMenuSpaceElement();
+const text = new Kuc.Text({
+  placeholder: 'Enter keywords',
+  id: 'kuc_text'
+});
+```
+---
+#### Included additional properties for Alert and Label
+---
+In v0, when you want to display an error message in a component, or when you want to display a label, you need to implement it in another component such as Alert or Label.
+
+In v1, you can assign values to the `error` and the `label` property in a component.<br/>
+Let's take a look at the Text component `error` property for example:
+
+In the beginning, I have introduced a code to use KUC to create the search box, but there is no response when you click the button.
+
+After adding additional handler, when the button is clicked, the text input value is checked and the error message is displayed only when there is no value.
+
+Here is a sample code.
+
+```javascript
+const button = new Kuc.Button({
+  type: 'submit',
+  text: 'Search',
+  id: 'kuc_button'
+});
+
+/* Add the following code */
+
+// Add the process of click event to the displayed button
+button.addEventListener('click', event => {
+  const keyword = text.value;
+  const errorMessage = 'Please enter a value.';
+  // Hide the error message
+  text.error = '';
+
+  // Check if there is a value
+  if (!keyword) {
+    // Show the error message
+    text.error = errorMessage;
+    return;
+  }
+});
+```
+
+In the above code, inside the `click` event, the value is retrieved from text.value, and is checked using regular expressions.<br/>
+If the result of the check is not a full-width, the error message is displayed and the process is interrupted.
+
+The `error` property is used to display the error message.
+
+When you initialize the message (hide the error message), you will only need to assign an empty string to text.error property.
+
+![search_box_error](/img/v1_search_box_error.png)
+
+---
+#### Auto-completion of Item.label
+---
+When creating multiple choice components in v0, the developer had to specify both `Item.label` and `Item.value`.
+
+However, when using v1, only `Item.value` is required. If `Item.label` is not specified, only the value of `Item.value` will be set.<br/>
+This means that the coding will be more concise when the backend value and the label displayed in the UI are the same.
+
+You can abbreviate the coding as follows:
+```javascript
+const checkbox = new Kuc.Checkbox({
+  items: [
+    {
+      value: 'orange'
+    }
+  ]
+});
+```
+
+## Conclusion
+
+How is it working out for you?<br/>
+We hope you will experience a better Kintone development than ever before using the new Kintone UI Component library.
+
+:::info
+This article was reviewed by Kintone and Google Chrome as of February, 2021.<br/>
+In addition, the version of Kintone UI Component that is used for customizations is v0.7.4 and v1.0.0.
+:::
+
+:::info
+The documentation for v0 is a separate site.Please check [here](https://kintone-labs.github.io/kintone-ui-component/latest/).
+:::
diff --git a/docs/document/versioned_docs/version-1.18.0/guides/format-setting-plugin.md b/docs/document/versioned_docs/version-1.18.0/guides/format-setting-plugin.md
new file mode 100644
index 0000000000..8819b67410
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/guides/format-setting-plugin.md
@@ -0,0 +1,442 @@
+---
+id: format-setting-plugin
+title: Format setting plug-in
+sidebar_label: Format setting plug-in
+---
+
+## Overview
+
+By using Kintone UI Component, the user can expand the range of utilization not only on the Kintone app page but also on the plug-in settings page.<br/>
+This article explains how to use Kintone UI Component on the plug-in settings page.
+The creation of a simple Conditional Format Plug-in is used as an example.
+
+### Components to use
+- [Button](../components/desktop/button.md)
+- [DatePicker](../components/desktop/date-picker.md)
+- [Dialog](../components/desktop/dialog.md)
+- [Dropdown](../components/desktop/dropdown.md)
+- [MultiChoice](../components/desktop/multichoice.md)
+
+## Completed image
+
+The implementation scenarios and the completed image of the customized page are as follows:
+
+Set the account closing date of your company on the plug-in settings page and implement a customization as a plug-in that colors red the target field of a record when today's date is before the closing date.
+
+![Plugin setting](/img/plugin_setting.png)
+This is the plug-in settings page.<br/>
+When the set conditions match (if today's date is before or after the reference date), the color of the set field changes to red on the Record Details page.
+
+![Confirmation](/img/dialog.png)
+A confirmation dialog is displayed when saving the settings.
+
+![App image](/img/payment_management_app.png)
+This is an app that manages deposits.<br/>
+The background color of the field changes according to the conditions set on the plug-in settings page.
+
+## What you will need to have ready
+
+Prepare the files with the following folder structure in creating this Kintone plug-in.<br/>
+The folder structure and file names are examples.
+
+```
+src/
+├── image/
+|   ├── icon.png
+├── js/
+|   ├── config.js
+|   ├── desktop.js
+├── css/
+|   ├── config.css
+├── html/
+|   ├── config.html
+├── lib/
+|   ├── luxon.js
+|   ├── kuc.min.js
+|
+├── manifest.json
+```
+
+## Create a manifest file
+
+Create a manifest file like the one below.
+
+```json
+{
+  "manifest_version": 1,
+  "version": 1,
+  "type": "APP",
+  "name": {
+    "en": "Format Setting Plug-in"
+  },
+  "description": {
+    "en": "This is a sample plug-in."
+  },
+  "icon": "image/icon.png",
+  "desktop": {
+    "js": [
+      "js/desktop.js",
+      "lib/luxon.js"
+    ],
+    "css": []
+  },
+  "config": {
+    "html": "html/config.html",
+    "js": [
+      "lib/kuc.min.js",
+      "js/config.js"
+    ],
+    "css": [
+      "css/config.css"
+    ],
+    "required_params": ["date", "condition", "targetFields"]
+  }
+}
+```
+
+Kintone UI Component will be used for this customization on the plug-in settings page, so describe the path of the UMD file in the config object.<br/>
+See [Quick Start](../getting-started/quick-start.md) for how to upload a UMD file.
+
+## Create a plug-in icon
+Create a plug-in icon following the [guide](https://kintone.dev/en/plugins/introduction-to-plug-ins/steps-for-plug-in-development/#creating-each-file).<br/>
+Place the icon file (icon.png) in the image folder.
+
+## HTML customization
+
+Create an HTML file for the plug-in settings page.<br/>
+Create a file like the one below. Place each part of Kintone UI Component by using the id set in the div element.
+
+```html
+<section class="settings">
+  <h2 class="settings-heading">Format Setting Plug-in</h2>
+  <p>If the conditions match, the background color of the target fields will be changed to red.</p>
+  <br/>
+    <h3 class="kintoneplugin-desc">Set the reference date.</h3>
+    <p class="kintoneplugin-row">
+      <div id="date_space"></div>
+    </p>
+    <br/>
+    <h3 class="kintoneplugin-desc">Set the condition to color the fields. The default date is today.</h3>
+    <p class="kintoneplugin-row">
+      <div id="dropdown_space"></div>
+    </p>
+    <br/>
+    <h3 class="kintoneplugin-desc">Select the fields to color.</h3>
+    <p class="kintoneplugin-row">
+      <div id="multichoice_space"></div>
+    </p>
+    <br/>
+    <p class="kintoneplugin-row">
+      <div id="button_space"></div>
+    </p>
+</section>
+```
+
+## JavaScript and CSS customization (Settings page)
+
+This section will explain the implementation code of the settings page.<br/>
+Place the JavaScript file (config.js) described below in the js folder.<br/>
+
+***config.js***
+
+```javascript
+(async PLUGIN_ID => {
+  // Write the process here
+})(kintone.$PLUGIN_ID);
+```
+---
+### Create components
+---
+
+Create various components.<br/>
+Place the following as fields.<br/>
+Reference Date: Sets the reference date.<br/>
+Condition: Sets the condition for the reference date<br/>
+Fields: Set fields (Multiple selectable)
+
+```javascript
+// Specify what version to use
+const Kuc = Kucs['1.x.x'];
+
+// Create DatePicker component
+const datePicker = new Kuc.DatePicker({
+  label: 'Reference Date',
+  requiredIcon: true,
+  language: 'auto'
+});
+// Create Dropdown component
+const dropdown = new Kuc.Dropdown({
+  label: 'Condition',
+  requiredIcon: true,
+  items: [
+    {
+      label: '-----',
+      value: '-----'
+    },
+    {
+      label: 'Before reference date',
+      value: 'before'
+    },
+    {
+      label: 'After reference date',
+      value: 'after'
+    }
+  ],
+  value: '-----'
+});
+// Get field info to display in MultiChoice component
+const items = await getFields();
+// Create MultiChoice component
+const multiChoice = new Kuc.MultiChoice({
+  label: 'Fields',
+  requiredIcon: true,
+  items: items
+});
+// Create Button component
+const saveButton = new Kuc.Button({
+  text: 'Save',
+  type: 'submit'
+});
+const cancelButton = new Kuc.Button({
+  text: 'Cancel',
+  type: 'cancel',
+  id: 'kuc_cancel_button'
+});
+const dialogOKButton = new Kuc.Button({
+  text: 'OK',
+  type: 'submit'
+});
+const dialogCancelButton = new Kuc.Button({
+  text: 'Cancel',
+  type: 'cancel',
+  id: 'kuc_dialog_cancel_button'
+});
+const divEl = document.createElement('div');
+divEl.setAttribute('id', 'kuc_dialog_footer');
+// Create Dialog component
+const dialog = new Kuc.Dialog({
+  content: `<div style="text-align: center; padding: 48px 24px">
+              <p style="margin: 0;">The target fields are colored according to the conditions.</p>
+              <p>Are you sure to save your settings?</p>
+              <div>`,
+  footer: divEl
+});
+```
+
+The following function is called in order to retrieve the field name to be displayed as a choice of the MultiChoice component.<br/>
+Since the data structure of the items property is an array consisting of objects whose keys are label and value, the value returned by the function is also in the corresponding form.<br/>
+It is an asynchronous process, so be careful about how you call it.
+
+```javascript
+// Get field info of tha app
+function getFields() {
+  const param = { app: kintone.app.getId() };
+  return kintone
+    .api(kintone.api.url('/k/v1/preview/app/form/fields', true), 'GET', param)
+    .then(resp => {
+      const fieldItems = [];
+      for (const key in resp.properties) {
+        if (!Object.properties.hasOwnProperty.call(resp, key)) {
+          continue;
+        }
+        const prop = resp.properties[key];
+        const label = prop.label;
+        const code = prop.code;
+
+        switch (prop.type) {
+          case 'SINGLE_LINE_TEXT':
+          case 'NUMBER':
+          case 'CALC':
+          case 'RADIO_BUTTON':
+          case 'DROP_DOWN':
+          case 'RECORD_NUMBER':
+          case 'MULTI_LINE_TEXT':
+          case 'CHECK_BOX':
+          case 'MULTI_SELECT':
+          case 'DATE':
+          case 'DATETIME':
+          case 'CREATED_TIME':
+          case 'UPDATED_TIME':
+            fieldItems.push({ label: label, value: code });
+            break;
+
+          default:
+            break;
+        }
+      }
+      return fieldItems;
+    });
+}
+```
+
+---
+### Display the last saved value
+---
+
+Retrieve the plug-in settings when you open the plug-in settings page and display the value when saved last time, if any.
+
+```javascript
+// Display the value when saved last time
+const config = kintone.plugin.app.getConfig(PLUGIN_ID);
+if (Object.keys(config).length) {
+  datePicker.value = config.date;
+  dropdown.value = config.condition;
+  multiChoice.value = JSON.parse(config.targetFields);
+}
+```
+
+---
+### Place components
+---
+
+Retrieve the element where you want to place the component using id in config.html and add the element for each component there.
+
+```javascript
+// Display components
+const dateSpaceEl = document.getElementById('date_space');
+dateSpaceEl.appendChild(datePicker);
+const dropdownSpaceEl = document.getElementById('dropdown_space');
+dropdownSpaceEl.appendChild(dropdown);
+const multiChoiceSpaceEl = document.getElementById('multichoice_space');
+multiChoiceSpaceEl.appendChild(multiChoice);
+const buttonSpaceEl = document.getElementById('button_space');
+buttonSpaceEl.appendChild(cancelButton);
+buttonSpaceEl.appendChild(saveButton);
+```
+
+---
+### When clicking on buttons
+---
+
+When the Save button is clicked, the required items are checked.<br/>
+If at least one item has not been filled in, an error label will be displayed.<br/>
+If there is no problem with the set items, a confirmation dialog will be displayed.
+
+```javascript
+// When the Save button is clicked
+saveButton.addEventListener('click', event => {
+  // Reset error messages
+  datePicker.error = '';
+  dropdown.error = '';
+  multiChoice.error = '';
+  // Check required itmes
+  let requiredFlag = false;
+  if (!datePicker.value) {
+    datePicker.error = 'Please enter';
+    requiredFlag = true;
+  }
+  if (dropdown.value === '-----') {
+    dropdown.error = 'Please select';
+    requiredFlag = true;
+  }
+  if (!multiChoice.value.length) {
+    multiChoice.error = 'Please select';
+    requiredFlag = true;
+  }
+  if (requiredFlag) return;
+  dialog.open();
+  divEl.appendChild(dialogCancelButton);
+  divEl.appendChild(dialogOKButton);
+});
+// When the Cancel button is clicked
+cancelButton.addEventListener('click', event => {
+  history.back();
+});
+```
+
+---
+### When clicking on dialog buttons
+---
+
+To avoid saving unintended settings, insert a confirmation dialog that displays after the save button is clicked.<br/>
+
+![Confirmation](/img/dialog.png)
+
+When the OK button is clicked, the information you want the plug-in to have as a setting value is stored in the object and saved in the plug-in.
+
+```javascript
+// When the OK button in Dialog is clicked
+dialogOKButton.addEventListener('click', event => {
+  const selectedFields = JSON.stringify(multiChoice.value);
+  const date = datePicker.value;
+  const condition = dropdown.value;
+
+  const newConfig = {
+    date: date,
+    condition: condition,
+    targetFields: selectedFields
+  };
+  kintone.plugin.app.setConfig(newConfig);
+});
+
+// When the Cancel button in Dialog is clicked
+dialogCancelButton.addEventListener('click', event => {
+  dialog.close();
+});
+```
+
+After the JavaScript customization, place the CSS file (config.css) described below in the css folder.<br/>
+
+***config.css***
+```css
+#kuc_cancel_button {
+  margin-right: 16px;
+}
+
+#kuc_dialog_footer {
+  text-align: center;
+}
+
+#kuc_dialog_cancel_button {
+  margin-right: 16px;
+}
+```
+
+## JavaScript and CSS customization (Kintone app page)
+
+This section will explain the implementation code of the Kintone app page.<br/>
+Place the JavaScript file (desktop.js) described below in the js folder.<br/>
+The value is inherited from the component of the plug-in settings page and used for the customization on the Kintone app page. <br/>
+Since the value of the DatePicker component is in yyyy-mm-dd format, today's date is also retrieved in yyyy-mm-dd format for easy comparison.<br/>
+An external date library called luxon.js is used for this customization.
+
+***desktop.js***
+
+```javascript
+(PLUGIN_ID => {
+  kintone.events.on('app.record.detail.show', event => {
+    const CONFIG = kintone.plugin.app.getConfig(PLUGIN_ID);
+    // Get today's date with yyyy-mm-dd
+    const currentDate = luxon.DateTime.local().toISODate();
+    const referenceDate = CONFIG.date;
+    const condition = CONFIG.condition;
+    const targetFields = JSON.parse(CONFIG.targetFields);
+    const fieldColor = '#e74c3c';
+    let isBefore = false;
+    if (currentDate < referenceDate) {
+      isBefore = true;
+    }
+    // Change the fields' color to red depending on the conditions set in the plug-in
+    if (
+      (isBefore && condition === 'before') ||
+      (!isBefore && condition === 'after')
+    ) {
+      targetFields.forEach(targetField => {
+        const fieldElement = kintone.app.record.getFieldElement(targetField);
+        if (!fieldElement) return;
+        fieldElement.style.backgroundColor = fieldColor;
+      });
+    }
+  });
+})(kintone.$PLUGIN_ID);
+```
+
+## Conclusion
+
+This article introduced a simple plug-in implementation as an example.<br/>
+Depending on the customization, it is possible to divide the conditions more finely and to apply conditional formatting to the Record List page. Please try adjusting it according to your actual operations.<br/>
+
+:::info
+This article was reviewed using Kintone and Google Chrome as of August 2022.<br/>
+The version of Kintone UI Component used in this customization is v1.4.0.
+:::
\ No newline at end of file
diff --git a/docs/document/versioned_docs/version-1.18.0/guides/in-office-day-list-customization.md b/docs/document/versioned_docs/version-1.18.0/guides/in-office-day-list-customization.md
new file mode 100644
index 0000000000..f5892e7f68
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/guides/in-office-day-list-customization.md
@@ -0,0 +1,295 @@
+---
+id: in-office-day-list-customization
+title: In-office day list customization
+sidebar_label: In-office day list customization
+---
+
+## Overview
+This article explains how to utilize and customize the FieldGroup and Tooltip components in the context of creating an In-Office Day List.<br/>
+In this context, a Table component within the FieldGroup allows team members to specify which days they will be in the office.<br/>
+
+We assume the following scenario:
+1. Basic Usage for FieldGroup and Tooltip
+2. Append Table component to FieldGroup content
+3. Using Two Types of Tooltip
+
+### Components to use
+- [Dropdown](../components/desktop/dropdown.md)
+- [FieldGroup](../components/desktop/field-group.md)
+- [MultiChoice](../components/desktop/multichoice.md)
+- [Table](../components/desktop/table.md)
+- [Text](../components/desktop/text.md)
+- [Tooltip](../components/desktop/tooltip.md)
+
+## What you will need to have ready
+
+Create an app that includes a blank space field with the id "space".
+
+## JavaScript and CSS Customization
+
+When you import the UMD file of Kintone UI Component to the app, you can upload the JavaScript files by following these steps:<br/>
+You can see how to upload a file in the [Quick Start](../getting-started/quick-start.md).
+
+### Basic Usage for FieldGroup and Tooltip
+#### Create Tooltip with Basic FieldGroup
+Create a Basic FieldGroup with a label "KUC team" and the Text component as its content.
+
+```javascript
+  const kucTeamFieldGroup = new Kuc.FieldGroup({
+    label: 'KUC team',
+    content: new Kuc.Text({text: 'This is a FieldGroup'})
+  });
+```
+
+Create a Tooltip component with the tooltip message "Office day info" for the FieldGroup and associated them.
+
+```javascript
+  const kucTeamTooltip = new Kuc.Tooltip({
+    title: 'Office day info',
+    content: kucTeamFieldGroup
+  });
+```
+
+#### The display on UI
+![render](/img/tooltip_field-group.gif)
+
+### Append Table components to FieldGroup content
+In the default Kintone, FieldGroup can't have a table, but KUC allows FieldGroup to show a table when it's open.
+
+#### Create Tooltip with HTML Button
+Begin by creating a Tooltip component associated with an HTML button, conveying the message "Submit changes or additions for this entry."
+
+```javascript
+  const button = document.createElement('button');
+  button.textContent = 'Submit';
+
+  const tooltipForButton = new Kuc.Tooltip({
+    title: 'Submit changes or additions for this entry.',
+    container: button,
+    describeChild: true,
+    placement: 'bottom'
+  });
+```
+
+#### Create Table with Dropdown, Text, MultiChoice components and Button wrapped by Tooltip
+Create a Table component containing information such as "Name", "In office day", "Location" and "Note" and a button wrapped in a Tooltip.
+
+```javascript
+  const renderName = cellData => {
+    const input = document.createElement('input');
+      input.type = 'text';
+      input.value = cellData;
+      input.style.cssText = `
+        border: 1px solid #e3e7e8;
+        color: #333333;
+        font-size: 14px;
+        white-space: nowrap;
+        height: 40px;
+        padding: 0 8px;
+        width: 177px;
+        box-sizing: border-box;
+        box-shadow: 2px 2px 4px #f5f5f5 inset, -2px -2px 4px #f5f5f5 inset;
+      `;
+      input.addEventListener('focus', () => {
+        input.style.border = '1px solid #3498db';
+      });
+      input.addEventListener('blur', () => {
+        input.style.border = '1px solid #e3e7e8';
+      });
+      return input;
+  };
+
+  const renderDay = cellData => {
+    return new Kuc.MultiChoice({
+      items: [
+        {
+          label: 'Monday',
+          value: '1'
+        },
+        {
+          label: 'Tuesday',
+          value: '2'
+        },
+        {
+          label: 'Wednesday',
+          value: '3'
+        },
+        {
+          label: 'Thursday',
+          value: '4'
+        },
+        {
+          label: 'Friday',
+          value: '5'
+        }
+      ],
+      value: cellData
+    });
+  };
+
+  const renderLocation = cellData => {
+    return new Kuc.Dropdown({
+      items: [
+        {
+          label: '-----',
+          value: '-'
+        },
+        {
+          label: 'Tokyo',
+          value: 'Tokyo'
+        },
+        {
+          label: 'Vietnam',
+          value: 'Vietnam'
+        },
+        {
+          label: 'Shanghai',
+          value: 'Shanghai'
+        }
+      ],
+      value: cellData
+    });
+  };
+
+  const renderNote = cellData => {
+    return new Kuc.Text({
+      value: cellData
+    });
+  };
+
+  const renderAction = cellData => {
+      const button = document.createElement('button');
+      const tooltipForButton = new Kuc.Tooltip({
+        title: 'Submit changes or additions for this entry.',
+        container: button,
+        describeChild: true,
+        placement: 'bottom'
+      });
+      return tooltipForButton;
+    };
+
+  const kucTeamTable = new Kuc.Table({
+    label: 'team info',
+    columns: [
+      {
+        title: 'Name',
+        field: 'name',
+        render: renderName
+      },
+      {
+        title: 'In office day',
+        field: 'day',
+        render: renderDay
+      },
+      {
+        title: 'Location',
+        field: 'location',
+        render: renderLocation
+      },
+      {
+        title: 'Note',
+        field: 'note',
+        render: renderNote
+      },
+      {
+        title: 'Action',
+        field: 'action',
+        render: renderAction}
+    ],
+    data: [
+      {
+        name: '',
+        day: [],
+        location: '-',
+        note: ''
+      }
+    ]
+  });
+```
+
+#### Create FieldGroup with Table component
+Create a FieldGroup component with the label "KUC team" and the Table component as its content.
+
+```javascript
+  const kucTeamFieldGroup = new Kuc.FieldGroup({
+    label: 'KUC team',
+    content: kucTeamTable
+  });
+```
+
+#### Create Tooltip with the FieldGroup
+Create Tooltip for the FieldGroup and associated them.
+
+```javascript
+  const kucTeamTooltip = new Kuc.Tooltip({
+    title: 'Office day info',
+    container: kucTeamFieldGroup,
+  });
+```
+
+#### Add Event listener for FieldGroup
+Add event listener for FieldGroup to change the tooltip message when FieldGroup is expanded or collapsed
+
+```javascript
+   kucTeamFieldGroup.addEventListener('change', e => {
+    if (e.detail.expanded) {
+      kucTeamFieldGroup.title = '';
+    } else {
+      kucTeamFieldGroup.title = 'Office day info';
+    }
+  });
+```
+
+#### The display on UI
+![render](/img/tooltip_fieldgroup_customize.gif)
+
+
+### Using Two Types of Tooltip
+You may have noticed that when creating a Tooltip for a button, I will introduce a new property [`describeChild`](../components/desktop/tooltip.md#property).
+This property is set to false by default.<br/>
+You can effectively improve the accessibility and usability of your application with the `describeChild` property.<br/>
+Now, let's enable the [screen reader](https://developer.mozilla.org/en-US/docs/Glossary/Screen_reader) and try moving the focus to see what the screen reader reads.<br/>
+
+#### Tooltip represents the description of the element
+If the Tooltip represents the description of the element (provides additional information or a supplementary description about the element it is attached to), you need to set `describeChild` to true.
+```javascript
+  const tooltipForButton = new Kuc.Tooltip({
+    title: 'Submit changes or additions for this entry.',
+    container: button,
+    describeChild: true,
+    placement: 'bottom'
+  });
+```
+![render](/img/tooltip_describeChild_true.gif)
+
+In the examples, we can see that when `describeChild` is set to true, the screen reader first reads the content of the button itself "Submit" when the button gains focus, then continues to read the Tooltip's title "Submit changes or additions for this entry.".<br/>
+This is because when `describeChild` is true, Tooltip adds [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) to its child elements (button), causing the screen reader to read the original content first and then continue with the content of [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby).
+
+#### Tooltip represents the purpose of the element
+If the Tooltip represents the purpose of the element itself (provides a label for the element it is attached to), you need to set `describeChild` to false.<br/>
+Let's take a look at the example below.<br/>
+In the example, we set the Input tag in the Name field of the table, but the Input tag cannot read the word "Name" in the screen reader, so we can use Tooltip to solve this problem.<br/>
+We create a Tooltip for the Input component, set the title of the Tooltip to "Name", and set `describeChild` to false to see what the screen reader reads.<br/>
+```javascript
+const renderName = cellData => {
+  const input = document.createElement('input');
+  ...
+  const tooltipForInput = new Kuc.Tooltip({
+    title: 'Name',
+    container: input,
+    describeChild: false,
+    placement: 'bottom'
+  });
+  return tooltipForInput;
+};
+```
+
+![render](/img/tooltip_describeChild_false.gif)
+
+This time, we can see that when `describeChild` is set to false, the screen reader reads the content of the Tooltip's title "Name" when the input gains focus.<br/>
+This is because when `describeChild` is false, Tooltip adds [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) to its child elements (input, fieldGroup), causing the screen reader to read the content of [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).<br/>
+
+:::info
+This article was reviewed by Kintone and Google Chrome as of Feb, 2024.<br/>
+In addition, the version of Kintone UI Component that is used for customizations is v1.16.0.
+:::
\ No newline at end of file
diff --git a/docs/document/versioned_docs/version-1.18.0/guides/mobile-timecard-customization.md b/docs/document/versioned_docs/version-1.18.0/guides/mobile-timecard-customization.md
new file mode 100644
index 0000000000..a7922d3927
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/guides/mobile-timecard-customization.md
@@ -0,0 +1,196 @@
+---
+id: mobile-timecard-customization
+title: Mobile timecard customization
+sidebar_label: Mobile timecard customization
+---
+
+## Overview
+
+This section describes how to use the MobileButton component and the MobileNotification component to create a mobile timecard to log punch-in and punch-out times.
+
+## Completed image
+
+The completed image of the timecard customization is as follows:
+
+![Timecard](/img/timecard.png)<br/>
+![Stamp message](/img/timecard_notification.png)
+
+## JavaScript and CSS Customization
+
+When you import the Kintone UI Component UMD file to the app, you can upload the JavaScript files by following the steps described below.<br/>
+See [Quick Start](../getting-started/quick-start.md) for how to upload a file.
+
+### Show punch-in and punch-out buttons
+
+Use the MobileButton component to display the punch-in and punch-out buttons.
+
+```javascript
+kintone.events.on('mobile.app.record.index.show', event => {
+  // Prevent button duplication bug
+  if (
+    document.getElementById('kuc_punch_in_button') ||
+    document.getElementById('kuc_punch_out_button')
+  ) {
+    return event;
+  }
+
+  const app = kintone.mobile.app.getId();
+
+  // Display MobileButtons
+  const header = kintone.mobile.app.getHeaderSpaceElement();
+  const punchInButton = new Kuc.MobileButton({
+    text: 'Punch-in',
+    type: 'submit',
+    id: 'kuc_punch_in_button'
+  });
+  const punchOutButton = new Kuc.MobileButton({
+    text: 'Punch-out',
+    type: 'normal',
+    id: 'kuc_punch_out_button'
+  });
+  header.appendChild(punchInButton);
+  header.appendChild(punchOutButton);
+```
+
+### Adjust the spacing of buttons using CSS
+
+To adjust the spacing of the buttons in CSS, assign a value to the `id` property of the MobileButton component.
+
+```css
+@charset "UTF-8";
+#kuc_punch_in_button {
+  margin: 5px 5px 5px 5px;
+}
+#kuc_punch_out_button {
+  margin: 5px 0px 5px 0px;
+}
+```
+
+### Create a time stamp
+
+The following function is used to retrieve the current time when you click the punch-in button and the punch-out button:<br/>
+Creates a value for the Time field format (HH: MM).
+
+```javascript
+// Create time stamp
+const getTime = () => {
+  const time = new Date();
+  const formatedTime = time.getHours() + ':' + time.getMinutes();
+  return formatedTime;
+};
+```
+
+### Reload process after stamping
+
+After the timecard is stamped, the process of updating the screen takes place.
+
+```javascript
+// Reload function
+const reload = waitSeconds => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(document.location.reload());
+    }, waitSeconds * 1000);
+  });
+};
+```
+
+### What happens when the punch-in button is clicked?
+
+The MobileButton component can specify a click event.<br/>
+When you click the "punch-in" button, the following process is added.
+
+- Judge whether or not there is a record of the user logging in on the day.
+- Show the notification when there is a record.
+
+```javascript
+// Process of punchInButton
+punchInButton.addEventListener('click', async () => {
+  try {
+    // Check for records on the day
+    const getParams = {
+      app,
+      query:
+        'date = TODAY() and creator in (LOGINUSER()) order by $id desc limit 1 offset 0'
+    };
+    const resp = await kintone.api(
+      kintone.api.url('/k/v1/records', true),
+      'GET',
+      getParams
+    );
+
+    // Display the message if there are any records on the day
+    if (resp.records.length) {
+      const info = new Kuc.MobileNotification({
+        text: 'You have already punched-in!'
+      });
+      info.open();
+      return;
+    }
+```
+
+After checking for the presence or absence of records, the following process is added.
+
+- Stamp the punch-in time if there is no record.
+- Show the notification when punch-in time stamping is completed.
+
+```javascript
+// If there is no record on the day, punch-in
+if (!resp.records.length) {
+  const postParams = {
+    app,
+    record: {
+      start: {
+        value: getTime()
+      }
+    }
+  };
+  await kintone.api(
+    kintone.api.url('/k/v1/record', true),
+    'POST',
+    postParams
+  );
+
+  // Display the message when punch-in
+  const info = new Kuc.MobileNotification({
+    text: 'Registered a punch-in time!'
+  });
+  info.open();
+  await reload(5);
+}
+```
+
+### What happens when the punch-out button is clicked?
+
+When you click the punch-out button, the following process takes place in the same way as when you click the punch-in button:
+
+- Judge whether or not there is a record of the user logging in on the day.
+- Show the notification when there is no record.
+- Stamp the punch-out time if there is a record.
+- Show the notification when the punch-out time stamping is completed.
+
+\*The code is omitted because there are a lot of parts that are similar to the punch-in process.<br/>
+\*The same process is performed when an error message is displayed.
+
+### Show error messages
+
+If an error occurs during the process, use the MobileNotification component to display the message.
+
+```javascript
+} catch (error) {
+  console.log(error);
+  let errmsg = 'An error occurred.';
+  if (error.message) {
+    errmsg += ' ' + error.message;
+  }
+  const alert = new Kuc.MobileNotification({
+    text: errmsg
+  });
+  alert.open();
+}
+```
+
+:::info
+This article was reviewed by Kintone and Google Chrome as of August, 2021.<br/>
+In addition, the version of Kintone UI Component that is used for customization is v1.0.5.
+:::
diff --git a/docs/document/versioned_docs/version-1.18.0/guides/search-box-customization-with-typescript.md b/docs/document/versioned_docs/version-1.18.0/guides/search-box-customization-with-typescript.md
new file mode 100644
index 0000000000..e28b321627
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/guides/search-box-customization-with-typescript.md
@@ -0,0 +1,194 @@
+---
+id: search-box-customization-with-typescript
+title: Search box customization with TypeScript
+sidebar_label: Search box customization with TypeScript
+---
+
+## Overview
+
+This section describes how to develop the [Search box customization previously introduced](../guides/search-box-customization.md) using the Dialog component of Kintone UI Component with TypeScript.
+
+## Components to use
+
+- [Button](../components/desktop/button.md)
+- [Dialog](../components/desktop/dialog.md)
+- [ReadOnlyTable](../components/desktop/readonly-table.md)
+- [Text](../components/desktop/text.md)
+
+## Completed image
+
+The complete image of the search box and the search result dialog is as follows:
+
+#### Search box
+
+![search box](/img/search_box_ts.png)
+
+#### Search result dialog
+
+![search result dialog](/img/search_result_dialog_ts.png)
+
+## Build and implement a TypeScript development environment
+
+For instructions on how to set up a TypeScript development environment, check [Usage with TypeScript](../getting-started/usage-with-typescript.md).
+
+### Display of the search box
+
+Use the Text and Button components to display the search box.<br/>
+Import each component and the type definition information for each component.
+
+```typescript title="main.ts"
+import { Button, Text, TextProps, ButtonProps } from "kintone-ui-component";
+```
+
+Use each component's type definition information for each component's variables.
+
+```typescript title="main.ts"
+const header = kintone.app.getHeaderMenuSpaceElement();
+if (!header) return;
+
+// Prevent duplication bug with ID granted by property
+if (document.getElementById('kuc-searchbox-text') !== null) {
+  return;
+}
+
+const textProps: TextProps = {
+  id: 'kuc-searchbox-text',
+  placeholder: 'Search for products'
+};
+
+const buttonProps: ButtonProps = {
+  text: 'Search',
+  id: 'kuc-searchbox-button',
+  type: 'submit'
+};
+
+const text = new Text(textProps);
+const button = new Button(buttonProps);
+header.appendChild(text);
+header.appendChild(button);
+```
+
+Hover and mouse over ButtonProps or TextProps to see their properties.
+
+![Button props](/img/button_props.png)
+
+### Display of the search result dialog
+
+In the [previous method of creating a search box](../guides/search-box-customization.md), a query string is embedded in the URL of the Kintone app's filter function in order to display search results.<br/>
+The specific part is `'&q=f6054049%20like%20"'` in the following code.<br/>
+Since this is not a recommended implementation method, we will use the Dialog and ReadOnlyTable component to display the search results.
+
+```javascript
+kintone
+  .api(kintone.api.url('/k/v1/records', true), 'GET', params)
+  .then(resp => {
+    if (resp.records.length !== 0) {
+      // Process of displaying record retrieval result
+      const url = '?view=' + id + '&q=f6054049%20like%20"' + keyword + '"';
+      window.location.replace(url);
+    }
+```
+
+First, import the Dialog component and type definition information.<br/>
+In this implementation, various processes are executed in `main.ts`, which fires the event processing of Kintone.
+
+The search result dialog is displayed in the `createDialogWithTable.ts` file.
+The type definition information of the Dialog component is used for the variables of the Dialog component.
+
+```typescript title="createDialogWithTable.ts"
+import { Dialog, DialogProps, ReadOnlyTable } from 'kintone-ui-component';
+
+export const createDialogWithTable = (resultTable: ReadOnlyTable) => {
+  const dialogProps: DialogProps = {
+    title: 'Search Result',
+    content: resultTable
+  };
+  const result = new Dialog(dialogProps);
+  result.open();
+};
+```
+
+The `resultTable` is the result of executing the Kintone REST API Client in the `api.ts` file, processed in the `main.ts` file, and passed to the `createReadOnlyTable.ts` file.
+
+```typescript title="api.ts"
+export const getAllRecords = (keyword: string, appId: number) => {
+  const client = new KintoneRestAPIClient();
+  const body = {
+    app: appId,
+    condition: `product like "${keyword}" or price like "${keyword}"`
+  };
+  return client.record.getAllRecords<MyAppRecord>(body);
+};
+```
+
+```typescript title="main.ts"
+// API request
+const apiResult = await getAllRecords(keyword, appId);
+
+// Pick up the necessary information from the API result
+const records = apiResult.map(record => {
+  return {
+    // url creation
+    $id: `<a href=/k/${appId}/show#record=${record.$id.value}>${record.$id.value}</a>`,
+    product: record.product.value,
+    price: record.price.value
+  };
+});
+```
+
+```typescript title="createReadOnlyTable.ts"
+export const createReadOnlyTable = (records: Record[]) => {
+  const initialTableData: ReadOnlyTableProps = {
+    columns: [
+      {
+        title: 'ID',
+        field: '$id'
+      },
+      {
+        title: 'Product',
+        field: 'product'
+      },
+      {
+        title: 'Price',
+        field: 'price'
+      }
+    ],
+    data: records,
+    id: 'kuc-searchbox-readonly-table',
+    visible: true,
+    pagination: true,
+    rowsPerPage: 5
+  };
+
+  const table = new ReadOnlyTable(initialTableData);
+  return table;
+};
+```
+
+### Adjust the style of the search box and search result dialog
+
+Kintone UI Component has provided [Custom CSS functionality](../getting-started/custom-css.md). By specifying the Custom CSS properties of each component, you can safely change the width and height of components without DOM manipulation.
+
+In this article, we will adjust the CSS of the Dialog and Text components.
+
+```css
+#kuc-searchbox-readonly-table {
+  --kuc-readonly-table-header-0-width: 40px;
+  --kuc-readonly-table-header-1-width: 160px;
+  --kuc-readonly-table-header-2-width: 80px;
+}
+
+#kuc-searchbox-text {
+  --kuc-text-input-height: 48px;
+}
+```
+
+## Conclusion
+
+How is it working out for you? This section explains how to develop with TypeScript, Dialog component, and Custom CSS of the Kintone UI Component.<br/>
+We hope you can utilize this article.
+
+:::info
+This article was reviewed by Kintone and Google Chrome as of February, 2024.<br/>
+In addition, the version of Kintone UI Component that is used for customization is v1.16.0.
+:::
\ No newline at end of file
diff --git a/docs/document/versioned_docs/version-1.18.0/guides/search-box-customization.md b/docs/document/versioned_docs/version-1.18.0/guides/search-box-customization.md
new file mode 100644
index 0000000000..a6f4ebf695
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/guides/search-box-customization.md
@@ -0,0 +1,152 @@
+---
+id: search-box-customization
+title: Search box customization
+sidebar_label: Search box customization
+---
+
+## Overview
+This section describes how to create the search box by using the kintone UI Component's Text component, Button component, and the Notification component.
+
+## Completed image
+The complete image of the search box is as follows:
+
+#### Desktop version
+![Search box (Desktop)](/img/desktop_search_box.png)
+
+#### Mobile version
+![Search box (Mobile)](/img/mobile_search_box.png)
+
+## JavaScript and CSS Customization
+
+When you import the UMD file of Kintone UI Component to the app, you can upload the JavaScript files by following these steps:<br/>
+You can see how to upload a file in the [Quick Start](../getting-started/quick-start.md).
+
+### Display a search box
+
+Use the Text component and the Button component to display the search box.<br/>
+You can use the placeholder property of the Text component to describe the contents of the entry.<br/>
+If you want to enable the mobile version, you can do so by using the MobileButton component for mobile.
+
+```javascript
+const header = kintone.app.getHeaderMenuSpaceElement();
+
+// Show entry field and button in the search box
+const text = new Kuc.Text({
+  placeholder: 'Enter keywords',
+  id: 'kuc_text'
+});
+
+const button = new Kuc.Button({
+  type: 'submit',
+  text: 'Search',
+  id: 'kuc_button'
+});
+header.appendChild(text);
+header.appendChild(button);
+```
+
+### Search character check
+
+The Button component can specify a click event.<br/>
+In this case, the following process is added.
+
+- When you click a button, check if there is a value in the text box.
+- If the input value is blank, assign the error message to the error property and display it.
+- Hide the error message by setting the error property to an empty string.
+
+```javascript
+const button = new Kuc.Button({
+  type: 'submit',
+  text: 'Search',
+  id: 'kuc_button'
+});
+
+// Add the process of click event to the displayed button
+button.addEventListener('click', event => {
+  const keyword = text.value;
+  const errorMessage = 'Please enter a value.';
+  // Hide the error message
+  text.error = '';
+
+  // Check if there is a value
+  if (!keyword) {
+    // Show the error message
+    text.error = errorMessage;
+    return;
+  }
+});
+```
+
+### Component duplication bug prevention
+
+The id property is used to determine whether the component is already displayed and to prevent the duplication bug.
+
+```javascript
+// Prevent duplication bug with ID granted by property
+if (document.getElementById('kuc_text') !== null) {
+  return event;
+}
+
+const header = kintone.app.getHeaderMenuSpaceElement();
+const text = new Kuc.Text({
+  placeholder: 'Enter keywords',
+  id: 'kuc_text' // Add ID
+});
+```
+
+### Show results with Notification
+
+Displays the message for success or failure in the REST API runtime using the Notification component.<br/>
+The Notification is invoked using the `open()` method and the type property will set the background color.
+
+For this example, it is set to be displayed in the following situation:
+
+- When no records are found
+- When the REST API fails to execute
+
+```javascript
+const app = kintone.app.getId();
+const params = {
+  app: app,
+  query: 'text like "' + keyword + '"'
+};
+
+kintone
+  .api(kintone.api.url('/k/v1/records', true), 'GET', params)
+  .then(resp => {
+    if (resp.records.length !== 0) {
+      // Process of displaying record retrieval result
+      const url = '?view=' + id + '&q=f6054049%20like%20"' + keyword + '"';
+      window.location.replace(url);
+    } else if (resp.records.length === 0) {
+      // Process when no record is found
+      const info = new Kuc.Notification({
+        text: 'No records',
+        type: 'info' // Blue background color is set
+      });
+      info.open(); // Show info
+    }
+  })
+  .catch(error => {
+    // Process when REST API error occurs
+    let errmsg = 'An error occurred while retrieving the record.';
+    if (error.message !== undefined) {
+      errmsg += ' ' + error.message;
+    }
+    const alert = new Kuc.Notification({
+      text: errmsg
+      // If the type property is not specified, red background color is set
+    });
+    alert.open(); // Show alert
+  });
+```
+
+## Conclusion
+
+How is it working out for you? This section explains how to create a search box using the Kintone UI Component.<br/>
+We hope you can easily develop kintone customizations by using the kintone UI Component library.
+
+:::info
+This article was reviewed by Kintone and Google Chrome as of February, 2021.<br/>
+In addition, the version of Kintone UI Component that is used for customizations is v1.0.0.
+:::
diff --git a/docs/document/versioned_docs/version-1.18.0/guides/table-readonly-table-customization.md b/docs/document/versioned_docs/version-1.18.0/guides/table-readonly-table-customization.md
new file mode 100644
index 0000000000..a2e66e9a24
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/guides/table-readonly-table-customization.md
@@ -0,0 +1,524 @@
+---
+id: table-readonly-table-customization
+title: Table and ReadOnlyTable customization
+sidebar_label: Table and ReadOnlyTable customization
+---
+
+## Overview
+This article explains how to utilize and customize the Table, and ReadOnlyTable components and the usage difference between them.<br/>
+We assume the following scenario:
+1. Basic Usage (*Table and ReadOnlyTable*)
+2. Multiple components in one cell (*Table*)
+3. Dependent columns (*Table*)
+4. Nested tables (*Table*)
+
+## Components to use
+- [Dropdown](../components/desktop/dropdown.md)
+- [Table](../components/desktop/table.md)
+- [Text](../components/desktop/text.md)
+- [ReadOnlyTable](../components/desktop/readonly-table.md)
+- [RadioButton](../components/desktop/radio-button.md)
+
+## Table and ReadOnlyTable usage difference
+Basically, the Table and ReadOnlyTable components have the same structure.
+
+The ReadOnlyTable component allows the user to display a read-only mode table. It can display plain text that the user cannot manipulate or HTML elements.
+
+In contrast, the Table component allows the user to manipulate the components displayed in the table cell such as changing data and adding and deleting rows.
+
+The biggest difference between Table and ReadOnlyTable components is the `columns` property of the Table has a `render` property (`columns.render`) to specify which elements to display in the cell that the user can interact with. In addition, also has an `actionButton` property (`table.actionButton`) to show/hide the add/remove row button.
+
+## Understanding change event
+It will be easier for you to customize the table when you understand the `change` event flow in the Table.
+:::info
+The table cell will listen `change` event from the component inside the cell and assign that new value to the corresponding `field` value.
+:::
+
+### Create an App
+Create an app that includes a blank space field with the id "space".
+
+### JavaScript and CSS Customization
+When you import the UMD file of Kintone UI Component to the app, you can upload the JavaScript files by following these steps:<br/>
+You can see how to upload a file in the [Quick Start](../getting-started/quick-start.md).
+
+### Prepare basic table
+Suppose we have the following settings to display the username with the Text component:
+
+```javascript
+const renderName = cellData => {
+  const text = new Kuc.Text({ value: cellData });
+  return text;
+};
+
+const columns = [{ title: 'Username', field: 'username', render: renderName }];
+const data = [{ username: 'user1' }, { username: 'user2' }];
+
+const table = new Kuc.Table({ columns, data });
+const space = kintone.app.record.getSpaceElement('space');
+space.appendChild(table);
+```
+
+### The display on UI
+![render](/img/table-edit-text.gif)
+
+When you edit the input in the first cell, the Text component will trigger `change` event with `detail.value = 'user1 edited'`.
+The table then catches that value and assigns it back to the `username` field.
+Now the data of the table will be:
+
+```javascript
+[{ username: 'user1 edited' }, { username: 'user2' }];
+```
+
+### Modify the event detail
+If you want to customize the value that the table receives, you need to modify it in the `change` event before the table receives it.
+We also use the sample code above and add the following content to the `renderName` function:
+
+```javascript
+...
+const renderName = cellData => {
+  const text = new Text({ value: cellData });
+
+  // Modify the value before it bubble to table cell
+  text.addEventListener('change', event => {
+    event.detail.value = 'modified value'; // add any value you want set to username;
+  });
+  return text;
+};
+...
+```
+
+When you edit the input in the first cell, the value received by the table will always be `'modified value'`.
+
+## Examples
+### Basic Usage
+#### ReadOnlyTable
+![readonly-table](/img/readonly-table.png)
+
+Display a read-only mode table.
+
+<details className="toggle-panel">
+  <summary>Show code</summary>
+
+  ```js
+  const columns = [
+    {
+      title: 'Name',
+      field: 'name'
+    },
+    {
+      title: 'Gender',
+      field: 'gender'
+    },
+    {
+      title: 'Address',
+      field: 'address'
+    }
+  ];
+
+  const data = [
+    {
+      name: 'John Brown',
+      gender: 'male',
+      address: 'osaka-japan'
+    },
+    {
+      name: 'Jim Green',
+      gender: 'female',
+      address: 'tokyo-japan'
+    },
+    {
+      name: 'Joe Black',
+      gender: 'male',
+      address: 'hochiminh-vietnam'
+    }
+  ];
+
+  const readOnlyTable = new Kuc.ReadOnlyTable({ columns, data });
+  const space = kintone.app.record.getSpaceElement('space');
+  space.appendChild(readOnlyTable);
+  ```
+</details>
+
+#### Table
+![table](/img/table.png)
+
+Display a table that can manipulate the components displayed in it.<br/>
+Use the `columns.render` function to specify the component to be displayed in the cell. Please check the `renderGender` and the `renderAddress` functions in the following code example:
+
+<details className="toggle-panel">
+  <summary>Show code</summary>
+
+  ```js
+  // render gender column with dropdown
+  const renderGender = cellData => {
+    const radioButton = new Kuc.RadioButton({
+      items: [
+        {
+          label: 'Male',
+          value: 'male'
+        },
+        {
+          label: 'Female',
+          value: 'female'
+        }
+      ],
+      itemLayout: 'vertical',
+      value: cellData
+    });
+
+    return radioButton;
+  };
+
+  // render address column with dropdown
+  const renderAddress = cellData => {
+    const country = cellData.split('-')[1];
+    const dropdownCountry = new Kuc.Dropdown({
+      items: [
+        {
+          label: 'Viet Nam',
+          value: 'vietnam'
+        },
+        {
+          label: 'Japan',
+          value: 'japan'
+        }
+      ],
+      value: country
+    });
+
+    return dropdownCountry;
+  };
+
+  const columns = [
+    {
+      title: 'Name',
+      field: 'name'
+    },
+    {
+      title: 'Gender',
+      field: 'gender',
+      render: renderGender
+    },
+    {
+      title: 'Address',
+      field: 'address',
+      render: renderAddress
+    }
+  ];
+
+  const data = [
+    {
+      name: 'John Brown',
+      gender: 'male',
+      address: 'osaka-japan'
+    },
+    {
+      name: 'Jim Green',
+      gender: 'female',
+      address: 'tokyo-japan'
+    },
+    {
+      name: 'Joe Black',
+      gender: 'male',
+      address: 'hochiminh-vietnam'
+    }
+  ];
+
+  const table = new Kuc.Table({ columns, data });
+  const space = kintone.app.record.getSpaceElement('space');
+  space.appendChild(table);
+  ```
+</details>
+
+### Multiple components in one cell (Table)
+![multi-components](/img/two-component-in-cell.png)
+
+Put multiple components in one table cell using the `columns.render` function.<br/>
+You can display two dropdowns (city and country) in the same cell.
+
+<details className="toggle-panel">
+  <summary>Show code</summary>
+
+  ```js
+  const renderAddress = (cellData, rowData) => {
+    // the format of cellData: 'city-country'
+    const city = cellData.split('-')[0];
+    const country = cellData.split('-')[1];
+
+    const dropdownCity = new Kuc.Dropdown({
+      items: [
+        {
+          label: 'Tokyo',
+          value: 'tokyo'
+        },
+        {
+          label: 'Osaka',
+          value: 'osaka'
+        },
+        {
+          label: 'Ho Chi Minh',
+          value: 'hochiminh'
+        }
+      ],
+      value: city
+    });
+    dropdownCity.addEventListener('change', event => {
+      const _country = rowData.address.split('-')[1];
+      event.detail.value = `${event.detail.value}-${_country}`;
+    });
+
+    const dropdownCountry = new Kuc.Dropdown({
+      items: [
+        {
+          label: 'Viet Nam',
+          value: 'vietnam'
+        },
+        {
+          label: 'Japan',
+          value: 'japan'
+        }
+      ],
+      value: country
+    });
+    dropdownCountry.addEventListener('change', event => {
+      const _city = rowData.address.split('-')[0];
+      event.detail.value = `${_city}-${event.detail.value}`;
+    });
+
+    const container = document.createElement('div');
+    container.style.display = 'flex';
+    container.appendChild(dropdownCountry);
+    container.appendChild(dropdownCity);
+
+    return container;
+  };
+
+  const data = [
+    {
+      name: 'John Brown',
+      gender: 'male',
+      address: 'osaka-japan'
+    },
+    {
+      name: 'Jim Green',
+      gender: 'female',
+      address: 'tokyo-japan'
+    },
+    {
+      name: 'Joe Black',
+      gender: 'male',
+      address: 'hochiminh-vietnam'
+    }
+  ];
+
+  const columns = [
+    {
+      title: 'Name',
+      field: 'name'
+    },
+    {
+      title: 'Address',
+      field: 'address',
+      render: renderAddress
+    }
+  ];
+
+  const table = new Kuc.Table({ columns, data });
+  const space = kintone.app.record.getSpaceElement('space');
+  space.appendChild(table);
+  ```
+</details>
+
+### Dependent columns (Table)
+![dependent-columns](/img/dependent-columns.gif)
+
+Develop the dependent columns.<br/>
+The city dropdown will be updated when the country dropdown is changed.
+
+<details className="toggle-panel">
+  <summary>Show code</summary>
+
+  ```js
+  // Each country will have corresponding cities
+  const relatedData = {
+    japan: [
+      { label: 'Tokyo', value: 'tokyo' },
+      { label: 'Osaka', value: 'osaka' }
+    ],
+    vietnam: [
+      { label: 'Ha Noi', value: 'hanoi' },
+      { label: 'Ho Chi Minh', value: 'hochiminh' }
+    ]
+  };
+
+  const renderCity = (cellData, rowData) => {
+    const dropdownCity = new Kuc.Dropdown({
+      items: [
+        {
+          label: 'Tokyo',
+          value: 'tokyo'
+        },
+        {
+          label: 'Ho Chi Minh',
+          value: 'hochiminh'
+        }
+      ],
+      value: cellData
+    });
+
+    // Logic update city when country column changed
+    lastRenderedCountryComponent.addEventListener('change', event => {
+      dropdownCity.items = relatedData[event.detail.value];
+      rowData.city = '';
+    });
+
+    return dropdownCity;
+  };
+
+  let lastRenderedCountryComponent;
+  const renderCountry = cellData => {
+    const dropdownCountry = new Kuc.Dropdown({
+      items: [
+        {
+          label: 'Viet Nam',
+          value: 'vietnam'
+        },
+        {
+          label: 'Japan',
+          value: 'japan'
+        }
+      ],
+      value: cellData
+    });
+    lastRenderedCountryComponent = dropdownCountry;
+    return dropdownCountry;
+  };
+
+  const columns = [
+    {
+      title: 'Country',
+      field: 'country',
+      render: renderCountry
+    },
+    {
+      title: 'City',
+      field: 'city',
+      render: renderCity
+    }
+  ];
+
+  const data = [
+    {
+      country: 'japan',
+      city: 'tokyo'
+    },
+    {
+      country: 'vietnam',
+      city: 'hochiminh'
+    }
+  ];
+
+  const table = new Kuc.Table({ columns, data });
+  const space = kintone.app.record.getSpaceElement('space');
+  space.appendChild(table);
+  ```
+</details>
+
+### Nested tables (Table)
+![table-in-table](/img/table-in-table.png)
+
+Show more detailed info on every row with nested tables.
+
+<details className="toggle-panel">
+  <summary>Show code</summary>
+
+  ```js
+  const renderCity = cellData => {
+    const dropdown = new Kuc.Dropdown({
+      items: [
+        { label: 'Tokyo', value: 'tokyo' },
+        { label: 'Ho Chi Minh', value: 'hochiminh' }
+      ],
+      value: cellData
+    });
+
+    return dropdown;
+  };
+
+  const renderCountry = cellData => {
+    const renderSubTable = cellDataSubTable => {
+      const dropdown = new Kuc.Dropdown({
+        items: [
+          { label: 'Japan', value: 'japan' },
+          { label: 'Viet Nam', value: 'vietnam' }
+        ],
+        value: cellDataSubTable
+      });
+      return dropdown;
+    };
+
+    const columnsSubTable = [
+      {
+        title: 'Sub Table',
+        field: 'dropdown',
+        render: renderSubTable
+      }
+    ];
+
+    const dataSubTable = [];
+    for (let i = 0; i < cellData.split(',').length; i++) {
+      dataSubTable.push({ dropdown: cellData.split(',')[i] });
+    }
+    const subTable = new Kuc.Table({
+      columns: columnsSubTable,
+      data: dataSubTable
+    });
+
+    subTable.addEventListener('change', subTableEvent => {
+      const _dataSubTable = subTableEvent.detail.data;
+      let countries = '';
+      for (let i = 0; i < _dataSubTable.length; i++) {
+        countries += _dataSubTable[i].dropdown;
+        if (i !== _dataSubTable.length - 1) {
+          countries += ',';
+        }
+      }
+      subTableEvent.detail.value = countries;
+    });
+    return subTable;
+  };
+
+  const columns = [
+    {
+      title: 'Country',
+      field: 'country',
+      render: renderCountry
+    },
+    {
+      title: 'City',
+      field: 'city',
+      render: renderCity
+    }
+  ];
+
+  const data = [
+    {
+      city: 'tokyo',
+      country: 'japan'
+    },
+    {
+      city: 'hochiminh',
+      country: 'vietnam'
+    }
+  ];
+
+  const table = new Kuc.Table({ columns, data });
+  const space = kintone.app.record.getSpaceElement('space');
+  space.appendChild(table);
+  ```
+</details>
+
+:::info
+This article was reviewed by Kintone and Google Chrome as of February 2023.<br/>
+In addition, the version of Kintone UI Component that is used for customizations is v1.9.0.
+:::
diff --git a/docs/document/versioned_docs/version-1.18.0/guides/tabs-customization.md b/docs/document/versioned_docs/version-1.18.0/guides/tabs-customization.md
new file mode 100644
index 0000000000..13262966b8
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/guides/tabs-customization.md
@@ -0,0 +1,215 @@
+---
+id: tabs-customization
+title: Tabs customization
+sidebar_label: Tabs customization
+---
+
+## Overview
+This article explains how to utilize and customize the Tabs component.<br/>
+We assume the following scenario:
+1. Append KUC components to Tabs content.
+2. Append Kintone native fields to Tabs content.
+
+### Components to use
+- [Tabs](../components/desktop/tabs.md)
+- [ReadOnlyTable](../components/desktop/readonly-table.md)
+
+## Completed image
+
+The completed image of the customized page is as follows:
+
+![tabs customize](/img/tabs_customize.gif)
+
+## What you will need to have ready
+
+Create an application that includes the fields as follows:
+- Two blank fields with id "space_for_native_kintone" and "space_for_custom_components".
+- Three table fields with id "sales_record_table", "task_management_table", and "sales_order_table".
+
+## JavaScript and CSS Customization
+
+When you import the UMD file of Kintone UI Component to the app, you can upload the JavaScript files by following these steps:<br/>
+You can see how to upload a file in the [Quick Start](../getting-started/quick-start.md).
+
+### Define constants
+
+We use constants to refer to important identifiers and values, such as the version number of Kintone UI Components, space IDs, Kintone fields, etc.
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const SPACE_FOR_NATIVE_KINTONE = 'space_for_native_kintone';
+const SPACE_FOR_CUSTOM_COMPONENTS = 'space_for_custom_components';
+
+const SALES_RECORD_TABLE_ID = 'sales_record_table';
+const TASK_MANAGEMENT_ID = 'task_management_table';
+const SALES_ORDER_ID = 'sales_order_table';
+
+// A set of Kintone fields that need to be shown/hidden on each tab.
+const salesRecordTabFields = [SALES_RECORD_TABLE_ID];
+const taskManagementTabFields = [TASK_MANAGEMENT_ID];
+const salesOrderTabFields = [SALES_ORDER_ID];
+let currentTabFields;
+```
+
+### Create some common functions
+
+We create two common functions
+- Function `createContent()` to create a KUC Tabs. And for preventing DOM manipulations, we created the `isBorderVisible` option.
+You can set Kintone native fields to Tabs content without DOM manipulation setting the `isBorderVisible: false`.
+- Function `addTabsToDom()` to append the Tabs to the specified space.
+
+```javascript
+function createTabs(contents, isBorderVisible) {
+  const items = [
+    {
+      label: 'Sales Record',
+      value: 'salesRecordTab',
+      content: contents ? contents[0] : ''
+    },
+    {
+      label: 'Task Management',
+      value: 'taskManagementTab',
+      content: contents ? contents[1] : ''
+    },
+    {
+      label: 'Sales Order',
+      value: 'salesOrderTab',
+      content: contents ? contents[2] : ''
+    }
+  ];
+  const tabs = new Kuc.Tabs({
+    value: 'salesRecordTab',
+    borderVisible: isBorderVisible,
+    items
+  });
+  return tabs;
+}
+
+function addTabsToDOM(tabs, space_id) {
+  const spaceElement = kintone.app.record.getSpaceElement(space_id);
+  spaceElement.appendChild(tabs);
+}
+```
+
+
+### Initialize Tabs for custom components
+
+We use the Tabs component feature to display different custom tables (create with ReadOnlyTable component from the Kintone UI Component library) depending on the tab.<br/>
+When the tab is clicked, the Tabs component will automatically show the corresponding custom table and hide the rest of the tables.<br/>
+We use the `createContent()` function that takes an array of components and adds them to a container with inner padding.<br/>
+Finally, we call the `createTabs()` function to create the tabs and call the `addTabsToDOM()` function to add them to the specified space.
+
+```javascript
+function initCustomComponentTabs() {
+  const salesRecordTable = new Kuc.ReadOnlyTable({
+    label: 'Sales Record',
+    columns: [
+      { title: 'Create Date', field: 'date' },
+      { title: 'Reporter Account', field: 'account' },
+      { title: 'Communication Content', field: 'communication' }
+    ],
+    data: [
+      {
+        date: 'Feb 28, 2023',
+        account: 'Howard',
+        communication:
+        'Discussed the new product launch strategy with the client and received positive feedback.' +
+        'The client agreed to place an order for 500 units of the new product. They also requested a 10% discount on the total order value.'
+      }
+    ]
+  });
+  const salesRecordContent = createContent([salesRecordTable]);
+
+  const taskManagementTable = new Kuc.ReadOnlyTable({
+    label: 'Task Management',
+    columns: [
+      { title: 'Status', field: 'status' },
+      { title: 'Task Executor', field: 'executor' },
+      { title: 'Task Requirements', field: 'requirements' },
+      { title: 'Result Reporting', field: 'reporting' }
+    ],
+    data: [
+      {
+        status: 'In Progress',
+        executor: 'Mike',
+        requirements:
+        'Conduct market research on the latest trends and consumer behavior in the target market.',
+        reporting: 'Report due by March 15th.'
+      }
+    ]
+  });
+  const taskManagementContent = createContent([taskManagementTable]);
+
+  const salesOrderTable = new Kuc.ReadOnlyTable({
+    label: 'Sales Order',
+    columns: [{ title: 'Order Number', field: 'order' }],
+    data: [{ order: '1' }]
+  });
+  const salesOrderContent = createContent([salesOrderTable]);
+
+  const tabs = createTabs(
+    [salesRecordContent, taskManagementContent, salesOrderContent],
+    true
+  );
+  addTabsToDOM(tabs, SPACE_FOR_CUSTOM_COMPONENTS);
+}
+
+function createContent(components) {
+  const content = document.createElement('div');
+  content.style.padding = '16px';
+  components.map(component => content.appendChild(component));
+  return content;
+}
+```
+
+### Initialize Tabs for kintone native fields
+
+We use the Tabs component feature to display different Kintone native fields depending on the tab.<br/>
+When a tab is clicked, we show the corresponding Kintone native fields and hide the rest of the fields.<br/>
+In the "setFieldsShown()" function, the fields are shown or hidden by using the [kintone.app.record.setFieldShown()](https://kintone.dev/en/docs/kintone/js-api/other/show-or-hide-a-field/) API and use the `addTabsChangeEventListener()` function to handle the click event and update the fields.<br/>
+We also create the tabs using the `createTabs()` function , but this time we set `isBorderVisible: false` to make it more compatible with the Kintone native field.<br/>
+Finally, we call `addTabsToDom()` function to append the Tabs to the specified space.
+
+```javascript
+function initNativeKintoneTabs() {
+  setFieldsShown(taskManagementTabFields, false);
+  setFieldsShown(salesOrderTabFields, false);
+  currentTabFields = salesRecordTabFields;
+  const tabs = createTabs(undefined, false);
+  addTabsChangeEventListener(tabs);
+  addTabsToDOM(tabs, SPACE_FOR_NATIVE_KINTONE);
+}
+
+function addTabsChangeEventListener(tabs) {
+  tabs.addEventListener('change', event => {
+    switch (event.detail.value) {
+      case 'salesRecordTab':
+        switchDisplayedFields(salesRecordTabFields);
+        break;
+      case 'taskManagementTab':
+        switchDisplayedFields(taskManagementTabFields);
+        break;
+      case 'salesOrderTab':
+        switchDisplayedFields(salesOrderTabFields);
+        break;
+    }
+  });
+}
+
+function switchDisplayedFields(displayedFields) {
+  setFieldsShown(displayedFields, true);
+  setFieldsShown(currentTabFields, false);
+  currentTabFields = displayedFields;
+}
+
+function setFieldsShown(fields, isShown) {
+  fields.forEach(field => {
+    kintone.app.record.setFieldShown(field, isShown);
+  });
+}
+```
+:::info
+This article was reviewed by Kintone and Google Chrome as of May, 2023.<br/>
+In addition, the version of Kintone UI Component that is used for customizations is v1.11.0.
+:::
\ No newline at end of file
diff --git a/docs/document/versioned_docs/version-1.18.0/guides/version-conflicts-issue-solution.md b/docs/document/versioned_docs/version-1.18.0/guides/version-conflicts-issue-solution.md
new file mode 100644
index 0000000000..70812cc0d6
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/guides/version-conflicts-issue-solution.md
@@ -0,0 +1,94 @@
+---
+id: version-conflicts-issue-solution
+title: Version conflicts issue and solution
+sidebar_label: Version conflicts issue and solution
+---
+## Overview
+
+Version conflicts have been a problem for Kintone UI Component (KUC) users before the release of v1.4.0.<br/>
+This guide will help users understand the version conflicts issue and how to adapt and upgrade the KUC package to the latest version starting from v1.4.0.
+
+## Problems of version conflicts
+
+It is a problem that the version conflicts error occurs and the component cannot render successfully when an app uses multiple KUC packages of the same version or different versions.<br/>
+This issue occurs in both UMD and ESM ways.<br/>
+For KUC, we use [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) and create a component defining a [custom HTML tag](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).<br/>
+The [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) that we use in that case is a global window object and we cannot define an already registered custom HTML tag again with Web Components.<br/>
+When a KUC package tries to register a custom HTML tag, and a later loaded package also tries to define the same tag again, the rendering problem occurs.
+
+![Multiple packages try to define the same custom HTML tag](/img/version-conflict-diagram.jpeg)
+
+## Solution
+
+Because we cannot register the same custom HTML tag more than once, from v1.4.0, custom HTML tags will include a version number at the end. This change also applies to class names to avoid conflicting CSS styles.
+
+![Custom HTML tag example](/img/version-conflict-html-tag.png)
+ 
+<center>Tag and class names will include the version number at the end</center>
+
+![CSS example](/img/version-conflict-css.png)
+
+<center>CSS of the component also changes to include the version number</center>
+
+In addition, we also check to see whether a custom HTML tag has been registered or not before defining it.
+
+## Upgrading to the latest version
+
+We recommend that you should upgrade KUC to the latest version for your projects.
+### Using UMD
+
+When using a version on and after v1.4.0, please use `Kucs["1.x.x"]` instead of Kuc and specify your expected version (ex. `new Kucs["1.4.0"].Button()`).<br/>
+The rendered components' tags and class names will include the version number. See the [Solution](#solution) section.
+
+:::tip
+You may still use `Kuc` as a global variable but **note that it may be conflicting when adding two or more `kuc.min.js` files** on Kintone customization or plug-in. In this case, the `Kuc` object refers to the last loaded `kuc.min.js` file.<br/>
+In case that there is only one `kuc.min.js` file in the Kintone system or there is no problem with using last loaded `kuc.min.js` file, you can use Kuc object. Please remove `const Kuc = Kucs['1.x.x'];` line.
+:::
+
+When using a version before v1.4.0, please use `Kuc` as a global variable but **note that it may be conflicting when adding two or more `kuc.min.js` files** on Kintone customization or plug-in.<br/>
+
+```javascript
+const Kuc = Kucs['1.x.x'];
+
+const button = new Kuc.Button({text: 'Button', type: 'submit'});
+document.body.appendChild(button);
+```
+
+### Using CDN
+See the guidance and sample code at [Using UMD](#using-umd) section. CDN behavior is the same with using the `kuc.min.js` file.
+
+### Using npm
+
+Users using the KUC package through npm do not need to take any action but note the changes in how the components' tags and class names render. See the [Solution](#solution) section.
+
+## Case study
+
+### For users using versions before v1.4.0
+
+When using a version before v1.4.0, the below version conflicts errors might occur:
+
+#### When importing multiple KUC packages and files (both ESM and UMD) of the same version or different versions:
+
+For example, we load the v1.2.0 `kuc.min.js` file in the Kintone system and the v1.3.0 `kuc.min.js` file in our app. An `Illegal constructor` error will show when we try to create a new KUC Button component.
+
+![Illegal constructor error when importing multiple kuc.min.js files](/img/UMD_multi_files.jpeg)
+
+### For users using version on and after v1.4.0
+
+When using a version on and after v1.4.0, loading multiple KUC packages (ESM) of the same version or different versions will not cause version conflicts errors anymore.
+
+However, please note that when loading multiple `kuc.min.js` files (UMD), only **the last loaded** one is used if you use `Kuc` instead of the recommended `Kucs` object. Please note that it may not be the version you wanted.
+
+When there are both versions before and on/after v1.4.0, you need to be careful.<br/>
+
+1. The case importing a version on and after v1.4.0 last
+- v1.4.0 > v1.3.2 > v1.4.x: `window.Kuc.version` returns 1.4.x and no errors
+- v1.4.0 > v1.4.x > v1.4.0: `window.Kuc.version` returns 1.4.0 and no errors
+
+2. The case importing a version before v1.4.0 last
+- v1.4.0 > v1.3.2 > v1.3.0: `window.Kuc.version` returns 1.3.0 and an `Illegal constructor` error occurs
+- v1.3.2 > v1.4.0 > v1.3.2: `window.Kuc.version` returns 1.3.2 and an `Illegal constructor` error occurs
+
+In summary, when using the `Kuc` object, it will occur an error in case that the last loaded `kuc.min.js` is the version before v1.4.0.
+
+If you have any questions, please submit on [GitHub issue](https://github.com/kintone-labs/kintone-ui-component/issues).
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.0.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.0.md
new file mode 100644
index 0000000000..a5c3994cbb
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.0.md
@@ -0,0 +1,113 @@
+---
+id: release-notes-v1.0.0
+title: v1.0.0 Release Notes
+sidebar_label: v1.0.0 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.0.0](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.0.0) Release Notes.<br/>
+You can find the background of the update from v0 to v1 and the future plans of v1.
+
+## Background
+
+The following are the reasons why we decided to implement v1.
+- Variety of requests for v0
+- Complexity of the design and usage of v0
+- Maintenance difficulties of v0
+
+For those engineers who are developing Kintone customization, we have added features to make the experience to develop Kintone-like components easier. Please find the following to learn more about v1.
+
+## Update details
+
+The major updates are as follows:
+
+- Improved the reproducibility of Kintone components
+  - The UI and behavior of the components are closer to the native Kintone components.
+- Enabled accessibility
+  - Support for keyboard operation and voice-to-speech software.
+- Enabled mobile
+  - Added mobile components.
+- Improved documentation
+  - Easy to understand the specification with the sample code.
+  - Multiple languages supported.
+
+## What we considered for v1
+
+- Interface
+  - Inherit the interface from v0. This is for v0 users who don't want to experience a significant change for v1.
+
+1. v1.0.0
+```js
+    const button = new Kuc.Button({
+      type: 'submit',
+      text: 'Search',
+      id: 'kuc_button' // Add id property
+    });
+    header.appendChild(button);　// Show button
+```
+2. v0.7.4
+```js
+    const button = new kintoneUIComponent.Button({
+      type: 'submit',
+      text: 'Search',
+    });
+    header.appendChild(button.render());　// Show button
+```
+
+- Simplicity
+  - Property can be directly accessed without using a method.
+
+1. v1.0.0
+```js
+    const button = new Kuc.Button({
+      type: 'submit',
+      text: 'Search',
+      id: 'kuc_button'
+    });
+    header.appendChild(button);
+    button.text = 'Register'; // Update text property
+```
+2. v0.7.4
+```js
+    const button = new kintoneUIComponent.Button({
+      type: 'submit',
+      text: 'Search',
+    });
+    header.appendChild(button.render());
+    button.setText('Register'); // Update text property
+```
+
+
+- Component prioritization
+  - We prioritized components which can be used very frequently.
+  - We have excluded the components such as Attachment, ColorPicker, FieldGroup, IconButton, and Tab at this moment since there are not so many use cases with the components. Of course, we will consider to implement new components if we get many requests. Please give us your feedbacks on [GitHub issue](https://github.com/kintone-labs/kintone-ui-component/issues).
+
+- Framework
+  - Implemented with the LitElement of the Web Components framework to improve readability of internal code.
+  - The Web Components interface will be considered in the future.
+
+With the above, we aimed to provide components that developers use easily and are aligned with the actual needs from developers.<br/>
+Please refer to the [link](../guides/comparison-v0-v1.md) for the details of differences between v0 and v1.
+
+## Future plans
+
+The following are the plans for the upcoming releases:
+
+- Additional components
+  - Additional components such as Table, ReadOnlyTable, Dialog, Date, and DateTime are expected to be provided.
+- Mobile components
+- Improvement of documentation
+
+:::info
+As for v0, we will continue to fix bugs and update the dependent libraries. However, we are not planning to add new features to v0 as of now.
+:::
+
+## Conclusion
+
+Thank you for reading the release notes.<br/>
+Kintone UI Component v1 is a library designed to provide convenience for engineers who are involved in Kintone customization and plug-in development.<br/>
+Please stay tuned for further releases.
+
+We always appreciate your feedbacks. Please submit questions and requests on [GitHub issue](https://github.com/kintone-labs/kintone-ui-component/issues).<br/>
+Best regards,
\ No newline at end of file
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.1.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.1.md
new file mode 100644
index 0000000000..c27e937e61
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.1.md
@@ -0,0 +1,15 @@
+---
+id: release-notes-v1.0.1
+title: v1.0.1 Release Notes
+sidebar_label: v1.0.1 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.0.1](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.0.1) Release Notes.<br/>
+Some of documents have been updated.
+
+## Update details
+### Document
+- Fixed the unpkg URL in README.
+- Fixed the unpkg URL in Quick Start.
\ No newline at end of file
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.2.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.2.md
new file mode 100644
index 0000000000..616dda1e4b
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.2.md
@@ -0,0 +1,15 @@
+---
+id: release-notes-v1.0.2
+title: v1.0.2 Release Notes
+sidebar_label: v1.0.2 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.0.2](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.0.2) Release Notes.<br/>
+Some of documents have been updated.
+
+## Update details
+### Document
+- Fixed the unavailable link in README.
+- Updated Support Policy.
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.3.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.3.md
new file mode 100644
index 0000000000..e779130826
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.3.md
@@ -0,0 +1,24 @@
+---
+id: release-notes-v1.0.3
+title: v1.0.3 Release Notes
+sidebar_label: v1.0.3 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.0.3](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.0.3) Release Notes.<br/>
+Code review automation, maintenances, and security updates have been made.
+
+## Update details
+### Features
+- Integrated with Sider Goodcheck on GitHub to automate the code review process.
+
+### Maintenances
+- Matched the styling of label and error tags for Mobile and Desktop components.
+- Changed "my-integrity" tag in CI to "v1.x.x-integrity".
+
+### Security Updates
+- Updated dependent libraries: webpack, ssri, react-dev-utils, elliptic.
+
+### Document
+- Fixed the sample code of the search box customization tutorial.
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.4.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.4.md
new file mode 100644
index 0000000000..28b35f94cf
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.4.md
@@ -0,0 +1,29 @@
+---
+id: release-notes-v1.0.4
+title: v1.0.4 Release Notes
+sidebar_label: v1.0.4 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.0.4](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.0.4) Release Notes.<br/>
+English document support, bug fix, maintenances, and security updates have been made.
+
+## Update details
+### Bug Fixes
+- The issue "Dropdown display collapses on group field" [#512](https://github.com/kintone-labs/kintone-ui-component/issues/512). @juridon<br/>
+  Fixed the desktop components to be displayed correctly in the group field.
+- Added "background-color: #ffffff;" for TextArea component.
+
+### Maintenance
+- Improved source code coverage and quality of the Unit Tests.
+
+### Security Updates
+- Updated dependent libraries: webpack, ws, browserslist, postcss, hosted-git-info, xmlhttprequest-ssl, y18n.
+
+### Document
+- Supported English document.
+- Updated the Quick Start webpack instructions.
+- Wrote the status about the React version provided in v0: we haven't supported it in v1 now.
+- Unsupported the Internet Explorer 11. (The Internet Explorer 11 will be retired on June 15, 2022.)<br/>
+  https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.5.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.5.md
new file mode 100644
index 0000000000..3996bd63df
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.0.5.md
@@ -0,0 +1,23 @@
+---
+id: release-notes-v1.0.5
+title: v1.0.5 Release Notes
+sidebar_label: v1.0.5 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.0.5](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.0.5) Release Notes.<br/>
+Bug fixes, maintenances, and new article have been made.
+
+## Update details
+### Bug Fixes
+- Fixed the keyboard behavior of Dropdown and MultiChoice components when pressing the `arrow up` or `arrow down` key to move between items.
+- Fixed the Dropdown menu close behavior when clicking outside of the component on Safari browser.
+
+### Maintenance
+- Added `role` and `aria-labelledby` markups to the group class of Checkbox and RadioButton components.
+- Unified HTML structure of the mobile components' error class.
+- Improved the unit tests source code.
+
+### Document
+- Added `Mobile timecard customization` article.
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.1.0.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.1.0.md
new file mode 100644
index 0000000000..0e3f7697f9
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.1.0.md
@@ -0,0 +1,37 @@
+---
+id: release-notes-v1.1.0
+title: v1.1.0 Release Notes
+sidebar_label: v1.1.0 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.1.0](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.1.0) Release Notes.<br/>
+New components development, bug fixes, maintenances, and new article have been made.
+
+## Update details
+### New components
+- Added MobileDropdown component.
+- Added MobileMultiChoice component.
+
+### Bug Fixes
+- Added line-break setting on the label element of MobileCheckbox, MobileRadioButton, MobileText, and MobileTextArea components.
+
+### Maintenance
+- Improved to be able to put line feed code on `text` property of Notification and MobileNotification components.
+- Changed `value` array index handling to arrange in the order of `items` property value for Checkbox, MultiChoice, and MobileCheckbox components.
+
+### Document
+- Added `Cleaning check list customization` article.
+
+## Topics to share!
+### MobileDropdown and MobileMultiChoice
+This time we made it based on HTML standards following the current kintone UI and behavior.<br/>
+We would be happy if you could implement Desktop and Mobile customization together!<br/>
+We will improve the UI to follow other components in the future.
+
+### Line feed code correspondence
+The line feed code is now available on `text` property of Notification and MobileNotification components.<br/>
+You can utilize the feature when you want to write multiple sentences.
+
+If you have any feedback or ideas, please feel free to post on GitHub issue!
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.1.1.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.1.1.md
new file mode 100644
index 0000000000..e389f079c8
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.1.1.md
@@ -0,0 +1,19 @@
+---
+id: release-notes-v1.1.1
+title: v1.1.1 Release Notes
+sidebar_label: v1.1.1 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.1.1](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.1.1) Release Notes.<br/>
+Maintenances, and security updates have been made.
+
+## Update details
+### Maintenance
+- Improved some keyboard behaviors of Dropdown component.<br/>
+  (Enabled the control using Escape key, Arrow down and up key, Home and End key)
+- Added max-height and scroll bar setting on menu part of MultiChoice component.
+
+### Security Updates
+- Updated dependent libraries: TypeScript, ua-parser-js, trim, tar, immer, ansi-regex, set-value, prismjs, and nth-check.
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.2.0.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.2.0.md
new file mode 100644
index 0000000000..a1f242a638
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.2.0.md
@@ -0,0 +1,64 @@
+---
+id: release-notes-v1.2.0
+title: v1.2.0 Release Notes
+sidebar_label: v1.2.0 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.2.0](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.2.0) Release Notes.<br/>
+New Features, maintenances, document updates, and security updates have been made.
+
+## Update details
+### New Features
+- Added `duration` property on Notification and MobileNotification.
+- Added `close` event on Notification and MobileNotification.
+- Added `input` event on Text, TextArea, MobileText, and MobileTextArea.
+- Added the function to get the info of version.
+
+### Maintenance
+- Installed License Finder to check 3rd party libraries' license to the project.
+- Fixed accessibility attribute values on Dropdown and MultiChoice.
+- Improved some internal processing.
+
+### Security Updates
+- Updated dependent libraries: webpack.
+
+### Document
+- Notification and MobileNotification: Added description of `duration` property and `close` event.
+- Text, TextArea, MobileText, MobileTextArea: Added description of `input` event.
+- Added the page of version function.
+
+## Topics to share!
+
+### duration property and close event
+We added new property and event on Notification and MobileNotification components!<br/>
+You can use the `duration` property to specify the time until the component closes.<br/>
+You can also use the `close` event to get the timing when clicking the close button.
+
+
+### input event
+We added `input` event to get the value when inserting characters on Text, TextArea, MobileText, and MobileTextArea components.<br/>
+You can utilize it in case you want to implement "incremental search", and so on.
+
+
+### version function
+Now you can get the version information of the package using version property of Kuc.<br/>
+
+In UMD, you can use version property of Kuc.<br/>
+Example:
+
+```javascript
+console.log(Kuc.version);
+```
+<br/>
+
+In ESM, you can import "version" from kintone-ui-component.<br/>
+Example:
+
+```js
+import { version } from "kintone-ui-component/lib/version";
+console.log(version);
+```
+
+If you have any feedback or ideas, please feel free to post on GitHub issue!
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.3.0.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.3.0.md
new file mode 100644
index 0000000000..ef358021a3
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.3.0.md
@@ -0,0 +1,52 @@
+---
+id: release-notes-v1.3.0
+title: v1.3.0 Release Notes
+sidebar_label: v1.3.0 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.3.0](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.3.0) Release Notes.<br/>
+New components, features, maintenances, document updates, and security updates have been made.
+
+## Update details
+### New Components
+- Added Date/Time series components (DatePicker, TimePicker, and DateTimePicker).
+- Added Dialog component.
+
+### New Features
+- Updated to accept duplicated value in `value` and `Item.value` properties and newly added `selectedIndex` property on choice components (MultiChoice, Checkbox, Dropdown, RadioButton, MobileMultiChoice, MobileCheckbox, MobileDropdown, and MobileRadioButton).<br/>
+  *Please check the detail on each component's document page.
+
+### Maintenance
+- Improved Spinner component to disable any controls outside of it when opening.
+- Updated to use from LitElement and lit-html to Lit 2.0.
+- Added the function to get the information of developing version.
+- Installed Yamory for checking package vulnerability.
+- Developed ESLint Custom Rules for checking our coding rule and deleted Sider system.
+- Installed storybook controls and actions feature.
+- Updated LICENSE file.
+- Fixed build setting for ESM.
+
+### Security Updates
+- Updated dependent libraries: webpack, json-schema, karma, nanoid, node-fetch, log4js, and core-js.
+
+### Document
+- Added DatePicker, TimePicker, DateTimePicker, and Dialog pages.
+- Updated `value` and `selectedIndex` properties' specification to follow the logic change described above on choice components' pages.
+- Added `Bulk update customization` article.
+
+## Topics to share!
+
+### Release new components
+We added several new components together this time!<br/>
+About Date/Time series components, we considered it will be useful to provide each separately for property setting and leaning cost reasons.
+
+About Dialog, we set the default size small, so you can utilize it on both desktop and mobile screens.
+
+### Accept duplicated value
+For choice components, we updated the specification to accept duplicated value in `value` and `Item.value` properties. (We used to throw error if it is duplicated.)<br/>
+And for that, we newly added the `selectedIndex` property to distinguish which duplicated value item will be selected.<br/>
+You can utilize the feature for example when you want to categorize by value and switch the display.
+
+If you have any feedback or ideas, please feel free to post on GitHub issue!
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.3.1.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.3.1.md
new file mode 100644
index 0000000000..5b3cf9e7ed
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.3.1.md
@@ -0,0 +1,27 @@
+---
+id: release-notes-v1.3.1
+title: v1.3.1 Release Notes
+sidebar_label: v1.3.1 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.3.1](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.3.1) Release Notes.<br/>
+Maintenances, document updates, and security updates have been made.
+
+## Update details
+### Maintenance
+- Added padding setting for content and footer parts on Dialog component.
+  - We did this for better appearance as default.
+- Changed checkmark color of selected item when disabled on MultiChoice component.
+  - We did this to make it easier to see it.
+- Improved displayed position and added scroll behavior of Dropdown menu part.
+- Fixed the line-height issue when setting on app's HeaderMenuSpaceElement on desktop components.
+
+### Security Updates
+- Updated dependent libraries: karma, engine.io, follow-redirects.
+
+### Document
+- Published Contributing Guideline and Pull Request template, and updated issue template.
+- Published roadmap for 2022 and linked it on README.
+- Added the explanation of date format depending on language property setting on DatePicker and DateTimePicker document.
\ No newline at end of file
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.3.2.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.3.2.md
new file mode 100644
index 0000000000..a111747bdd
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.3.2.md
@@ -0,0 +1,19 @@
+---
+id: release-notes-v1.3.2
+title: v1.3.2 Release Notes
+sidebar_label: v1.3.2 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.3.2](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.3.2) Release Notes.<br/>
+Bug fix have been made.
+
+## Update details
+### Bug Fixes
+- Fixed DateTimePicker, DatePicker and TimePicker to be able to get the changed value with `value` property and change event object.
+- Fixed DatePicker and DateTimePicker value to be empty string when clearing input on UI.
+- Fixed label's font size on mobile components.
+- Fixed Dropdown to be able to close the list when pressing Escape key.
+- Fixed selection type and date/time type components not to show error after changing from invalid value to valid value.
+- Fixed selection type components to be able to reflect on UI when setting empty string or empty array to the `value` property by setter.
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.4.0.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.4.0.md
new file mode 100644
index 0000000000..b9bc98e6b4
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes-v1.4.0.md
@@ -0,0 +1,39 @@
+---
+id: release-notes-v1.4.0
+title: v1.4.0 Release Notes
+sidebar_label: v1.4.0 Release Notes
+---
+
+## Overview
+
+Here are the [kintone UI Component v1.4.0](https://github.com/kintone-labs/kintone-ui-component/releases/tag/v1.4.0) Release Notes.<br/>
+New components and features, document updates, security updates, and maintenance have been made.
+
+:::info
+Note that in this version, there is backward compatible big change with coding way and components' tags and class names for resolving version conflicts issue.<br/>
+For more details, please check the [Version conflicts issue and solution](../guides/version-conflicts-issue-solution.md) and the new [Quick Start](../getting-started/quick-start.md) article.
+:::
+
+## Update details
+### New Components
+- Added Mobile Date/Time series components (MobileDatePicker, MobileTimePicker, and MobileDateTimePicker).
+
+### New Features
+- Added `timeStep`, `min`, and `max` properties on TimePicker and DateTimePicker components.
+- Added `icon` property on Dialog component.
+
+### Maintenance
+- Resolved version conflicts issue.
+- Exported type definition.
+- Fixed style of Mobile Date/Time series.
+
+### Security Updates
+- Updated dependent libraries: nth-check, core-js, webpack, webpack-cli, @storybook/builder-webpack5, @storybook/manager-webpack5, @storybook/web-components, @storybook/addon-actions, @storybook/addon-controls, @storybook/addon-viewport, @storybook/addon-a11y, karma-coverage, @babel/preset-env, @babel/core, babel-loader, ts-loader, @open-wc/testing, karma, prettier, @cybozu/eslint-config, lit, @types/uuid, typescript.
+
+### Document
+- Added an article to explain the version conflicts issue and solution, updated quick start description, component sample code and README.
+- Added Mobile Date/Time series components document.
+- Added/updated description of `timeStep`, `min`, `max`, and `value` properties of TimePicker and DateTimePicker components.
+- Added description of `icon` property of Dialog component.
+- Added `Format setting plug-in` article.
+- Fixed default value of RadioButton component's `borderVisible` property.
\ No newline at end of file
diff --git a/docs/document/versioned_docs/version-1.18.0/releases/release-notes.md b/docs/document/versioned_docs/version-1.18.0/releases/release-notes.md
new file mode 100644
index 0000000000..9b195021de
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/releases/release-notes.md
@@ -0,0 +1,11 @@
+---
+id: release-notes
+title: Release Notes
+sidebar_label: Release Notes
+---
+
+## Overview
+:::caution
+About the Release Notes after v1.5.0, we will share it only on GitHub Releases and stop maintaining this category on document.<br/>
+For the detailed info of release contents, please check [Releases](https://github.com/kintone-labs/kintone-ui-component/releases).
+:::
diff --git a/docs/document/versioned_docs/version-1.18.0/utilities/version.md b/docs/document/versioned_docs/version-1.18.0/utilities/version.md
new file mode 100644
index 0000000000..5d757ce75a
--- /dev/null
+++ b/docs/document/versioned_docs/version-1.18.0/utilities/version.md
@@ -0,0 +1,31 @@
+---
+id: version
+title: version
+sidebar_label: version
+---
+
+## Overview
+
+The version feature allows the user to retrieve the version information of the package.
+
+---
+## Specification
+
+You can retrieve the package's version information of the version property value in package.json.
+
+---
+## Sample Code
+Here is a sample code when accessing the version information:
+
+### Use the UMD
+
+```javascript
+console.log(Kuc.version);
+```
+
+### Use the npm package
+
+```javascript
+import { version } from 'kintone-ui-component/lib/version';
+console.log(version);
+```
diff --git a/docs/document/versioned_docs/version-1.2.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.2.0/components/desktop/button.md
index b878c82304..3c20b9ddba 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.2.0/components/desktop/checkbox.md
index 181ba1fd55..bd7665edea 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.2.0/components/desktop/dropdown.md
index a13573b55c..ac00f0f0d8 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.2.0/components/desktop/multichoice.md
index b23faad6e8..13ad3c6a2d 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.2.0/components/desktop/notification.md
index 290db10543..5f917e8055 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.2.0/components/desktop/radio-button.md
index 4db1aed989..5716b80d39 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.2.0/components/desktop/spinner.md
index f7d9a2947e..7bc67355f0 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.2.0/components/desktop/text.md
index d724d53bac..b1460fd1c6 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.2.0/components/desktop/textarea.md
index 9548dc71c5..497f227dc6 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-button.md
index 26469e1d4e..f96d47d67c 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-checkbox.md
index 07964c86d5..985c18fa26 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-dropdown.md
index b23657bb49..bbd945287c 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-multichoice.md
index d7d4fc964a..3763f6745b 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-notification.md
index cc09aede77..ee01c6d081 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-radio-button.md
index 796f326199..5033fe3f05 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-text.md
index 0623803ce3..bcfb605890 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-textarea.md
index e43db04937..b9945c4632 100644
--- a/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.2.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/button.md
index b878c82304..3c20b9ddba 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/checkbox.md
index 6084362aee..6bf6ceb591 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/date-picker.md
index ca6a70ecd7..a331524a32 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/datetime-picker.md
index 1eb00e35d2..3b3dd77502 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/dialog.md
index 659a20d86f..9761e94d08 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/dropdown.md
index 3cbaa6a843..0f1d8c409e 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/multichoice.md
index 609b08c8d1..e846bf2c9d 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/notification.md
index 290db10543..5f917e8055 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/radio-button.md
index f6f7cc75c7..daf9a86ef7 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/spinner.md
index f7d9a2947e..7bc67355f0 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/text.md
index d724d53bac..b1460fd1c6 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/textarea.md
index 9548dc71c5..497f227dc6 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.3.0/components/desktop/time-picker.md
index 55da165d99..a05ad56bb9 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-button.md
index 26469e1d4e..f96d47d67c 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-checkbox.md
index 76954b02e4..7ce4226bd6 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-dropdown.md
index b3fd627238..6cc264d46e 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-multichoice.md
index 864a27ff51..ca4b22be97 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-notification.md
index cc09aede77..ee01c6d081 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-radio-button.md
index 57ef27e920..f7cb4f4a53 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-text.md
index 0623803ce3..bcfb605890 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-textarea.md
index e43db04937..b9945c4632 100644
--- a/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.3.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/button.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/button.md
index b878c82304..3c20b9ddba 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/checkbox.md
index 6084362aee..6bf6ceb591 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/date-picker.md
index ca6a70ecd7..a331524a32 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/datetime-picker.md
index 1eb00e35d2..3b3dd77502 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/dialog.md
index 659a20d86f..9761e94d08 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/dropdown.md
index 3cbaa6a843..0f1d8c409e 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/multichoice.md
index 609b08c8d1..e846bf2c9d 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/notification.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/notification.md
index 290db10543..5f917e8055 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/radio-button.md
index f6f7cc75c7..daf9a86ef7 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/spinner.md
index f7d9a2947e..7bc67355f0 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/text.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/text.md
index d724d53bac..b1460fd1c6 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/textarea.md
index 9548dc71c5..497f227dc6 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.3.1/components/desktop/time-picker.md
index 55da165d99..a05ad56bb9 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-button.md
index 26469e1d4e..f96d47d67c 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-checkbox.md
index 76954b02e4..7ce4226bd6 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-dropdown.md
index b3fd627238..6cc264d46e 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-multichoice.md
index 5094f684db..3880bf46ad 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-notification.md
index cc09aede77..ee01c6d081 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-radio-button.md
index 57ef27e920..f7cb4f4a53 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-text.md
index 0623803ce3..bcfb605890 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-textarea.md
index e43db04937..b9945c4632 100644
--- a/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.3.1/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/button.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/button.md
index b878c82304..3c20b9ddba 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/checkbox.md
index 6084362aee..6bf6ceb591 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/date-picker.md
index ca6a70ecd7..a331524a32 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/datetime-picker.md
index 1eb00e35d2..3b3dd77502 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/dialog.md
index 659a20d86f..9761e94d08 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/dropdown.md
index 3cbaa6a843..0f1d8c409e 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/multichoice.md
index 609b08c8d1..e846bf2c9d 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/notification.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/notification.md
index 290db10543..5f917e8055 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/radio-button.md
index f6f7cc75c7..daf9a86ef7 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/spinner.md
index f7d9a2947e..7bc67355f0 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/text.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/text.md
index d724d53bac..b1460fd1c6 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/textarea.md
index 9548dc71c5..497f227dc6 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.3.2/components/desktop/time-picker.md
index 55da165d99..a05ad56bb9 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-button.md
index 26469e1d4e..f96d47d67c 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-checkbox.md
index 76954b02e4..7ce4226bd6 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-dropdown.md
index b3fd627238..6cc264d46e 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-multichoice.md
index 5094f684db..3880bf46ad 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-notification.md
index cc09aede77..ee01c6d081 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-radio-button.md
index 57ef27e920..f7cb4f4a53 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-text.md
index 0623803ce3..bcfb605890 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-textarea.md
index e43db04937..b9945c4632 100644
--- a/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.3.2/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/button.md
index e195b9190c..f9447b6dff 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/checkbox.md
index 3c73713c9e..2ad1ef3beb 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/date-picker.md
index de5dbefb55..7ac8a6c746 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/datetime-picker.md
index 57e5bd3c8a..fba524aca9 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/dialog.md
index f55a3d758c..15d825ad53 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/dropdown.md
index 7de3c53f6a..13763e7fdc 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/multichoice.md
index 6e3a31d767..8deb95cb50 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/notification.md
index 39c2269b2e..9ec59c1355 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/radio-button.md
index 36ff336cda..6be92d8cb1 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/spinner.md
index 635ee9786e..cf638aae4b 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/text.md
index e1dec30e17..0951087494 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/textarea.md
index c2affe3618..ab2b924b54 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.4.0/components/desktop/time-picker.md
index 0b7b342aeb..00c0fd8453 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-button.md
index 12e732fe5d..28625791ef 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-checkbox.md
index c473574674..35bc9e5870 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-date-picker.md
index 025e8ae593..8c0fe5ba35 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-datetime-picker.md
index 696123156b..ad3de6f936 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-dropdown.md
index cae2f4cfd2..72a1194a30 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-multichoice.md
index 7e790c481f..00a0bf5fad 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-notification.md
index fc1a1117a9..e7317409e3 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-radio-button.md
index 63c040b390..01d7a12cea 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-time-picker.md
index 31d94a9baf..e44c3c3077 100644
--- a/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.4.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/button.md
index bda9136461..46893c9fe2 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/checkbox.md
index 3c73713c9e..2ad1ef3beb 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/date-picker.md
index de5dbefb55..7ac8a6c746 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/datetime-picker.md
index 57e5bd3c8a..fba524aca9 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/dialog.md
index f55a3d758c..15d825ad53 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/dropdown.md
index 7de3c53f6a..13763e7fdc 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/multichoice.md
index 6e3a31d767..8deb95cb50 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/notification.md
index 39c2269b2e..9ec59c1355 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/radio-button.md
index 36ff336cda..6be92d8cb1 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/spinner.md
index 635ee9786e..cf638aae4b 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/text.md
index 291818b7d8..277abb7193 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/textarea.md
index c2affe3618..ab2b924b54 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.5.0/components/desktop/time-picker.md
index 0b7b342aeb..00c0fd8453 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-button.md
index 12e732fe5d..28625791ef 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-checkbox.md
index c473574674..35bc9e5870 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-date-picker.md
index 025e8ae593..8c0fe5ba35 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-datetime-picker.md
index 696123156b..ad3de6f936 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-dropdown.md
index cae2f4cfd2..72a1194a30 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-multichoice.md
index 7e790c481f..00a0bf5fad 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-notification.md
index fc1a1117a9..e7317409e3 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-radio-button.md
index 63c040b390..01d7a12cea 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-time-picker.md
index 31d94a9baf..e44c3c3077 100644
--- a/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.5.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/button.md
index bda9136461..46893c9fe2 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/checkbox.md
index 3c73713c9e..2ad1ef3beb 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/date-picker.md
index e3ae3c8809..61b8e487dd 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/datetime-picker.md
index 0e7dcd8a91..fd2dfc5f76 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/dialog.md
index f55a3d758c..15d825ad53 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/dropdown.md
index 7de3c53f6a..13763e7fdc 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/multichoice.md
index 6e3a31d767..8deb95cb50 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/notification.md
index 39c2269b2e..9ec59c1355 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/radio-button.md
index 36ff336cda..6be92d8cb1 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/spinner.md
index 635ee9786e..cf638aae4b 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/text.md
index 291818b7d8..277abb7193 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/textarea.md
index c2affe3618..ab2b924b54 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.6.0/components/desktop/time-picker.md
index c09edc60fa..885490e37e 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-button.md
index 12e732fe5d..28625791ef 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-checkbox.md
index c473574674..35bc9e5870 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-date-picker.md
index fafdc9ae88..a1903422e9 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-datetime-picker.md
index 6e1efca180..f69a8d5634 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-dropdown.md
index cae2f4cfd2..72a1194a30 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-multichoice.md
index 7e790c481f..00a0bf5fad 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-notification.md
index fc1a1117a9..e7317409e3 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-radio-button.md
index 63c040b390..01d7a12cea 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.6.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/button.md
index bda9136461..46893c9fe2 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/checkbox.md
index 3c73713c9e..2ad1ef3beb 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/date-picker.md
index e3ae3c8809..61b8e487dd 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/datetime-picker.md
index 0e7dcd8a91..fd2dfc5f76 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/dialog.md
index f55a3d758c..15d825ad53 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/dropdown.md
index 7de3c53f6a..13763e7fdc 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/multichoice.md
index 85a090bdab..11dde7e428 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/notification.md
index 39c2269b2e..9ec59c1355 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/radio-button.md
index 36ff336cda..6be92d8cb1 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/spinner.md
index 635ee9786e..cf638aae4b 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/text.md
index 291818b7d8..277abb7193 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/textarea.md
index c2affe3618..ab2b924b54 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.7.0/components/desktop/time-picker.md
index c09edc60fa..885490e37e 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-button.md
index 12e732fe5d..28625791ef 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-checkbox.md
index c473574674..35bc9e5870 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-date-picker.md
index fafdc9ae88..a1903422e9 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-datetime-picker.md
index 6e1efca180..f69a8d5634 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-dropdown.md
index cae2f4cfd2..72a1194a30 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-multichoice.md
index 7e790c481f..00a0bf5fad 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-notification.md
index fc1a1117a9..e7317409e3 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-radio-button.md
index 63c040b390..01d7a12cea 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.7.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/attachment.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/attachment.md
index 9c5682236d..728a5e323a 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/attachment.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 The Attachment component allows the user to upload files by selecting or dragging.
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/button.md
index bda9136461..46893c9fe2 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/checkbox.md
index 3c73713c9e..2ad1ef3beb 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/date-picker.md
index e3ae3c8809..61b8e487dd 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/datetime-picker.md
index 0e7dcd8a91..fd2dfc5f76 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/dialog.md
index f55a3d758c..15d825ad53 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/dropdown.md
index 7de3c53f6a..13763e7fdc 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/multichoice.md
index 6e3a31d767..8deb95cb50 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/notification.md
index 39c2269b2e..9ec59c1355 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/radio-button.md
index 36ff336cda..6be92d8cb1 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/readonly-table.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/readonly-table.md
index f9967037eb..4e53851a20 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/readonly-table.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 The ReadOnlyTable component allows the user to display a read-only mode table.
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/spinner.md
index 635ee9786e..cf638aae4b 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/table.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/table.md
index 6a482e74eb..bb4dec54de 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/table.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 The Table component allows the user to display an editable table.
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/text.md
index 291818b7d8..277abb7193 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/textarea.md
index c2affe3618..ab2b924b54 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.8.0/components/desktop/time-picker.md
index c09edc60fa..885490e37e 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-button.md
index 12e732fe5d..28625791ef 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-checkbox.md
index c473574674..35bc9e5870 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-date-picker.md
index fafdc9ae88..a1903422e9 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-datetime-picker.md
index 6e1efca180..f69a8d5634 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-dropdown.md
index cae2f4cfd2..72a1194a30 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-multichoice.md
index 7e790c481f..00a0bf5fad 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-notification.md
index fc1a1117a9..e7317409e3 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-radio-button.md
index 63c040b390..01d7a12cea 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.8.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/attachment.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/attachment.md
index 9c5682236d..728a5e323a 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/attachment.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/attachment.md
@@ -8,7 +8,7 @@ sidebar_label: Attachment
 
 The Attachment component allows the user to upload files by selecting or dragging.
 
-import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.js"
+import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
 
 <AttachmentComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/button.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/button.md
index bda9136461..46893c9fe2 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/button.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/button.md
@@ -7,7 +7,7 @@ sidebar_label: Button
 ## Overview
 The Button component allows the user to create and display buttons.
 
-import { ButtonComponent } from "@site/static/js/samples/desktop/button.js"
+import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
 
 <ButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/checkbox.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/checkbox.md
index 3c73713c9e..2ad1ef3beb 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/checkbox.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: Checkbox
 
 The Checkbox component displays a checkbox element for multiple selections.
 
-import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.js"
+import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
 
 <CheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/combobox.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/combobox.md
index c483a65e76..c09eb2744c 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/combobox.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/combobox.md
@@ -8,7 +8,7 @@ sidebar_label: Combobox
 
 The Combobox component allows the user to find an item among many choices.
 
-import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.js"
+import { ComboboxComponent } from "@site/static/js/samples/desktop/combobox.jsx"
 
 <ComboboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/date-picker.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/date-picker.md
index e3ae3c8809..61b8e487dd 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/date-picker.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DatePicker
 
 The DatePicker component allows the user to display a input area and date selection calendar.
 
-import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.js"
+import { DatePickerComponent } from "@site/static/js/samples/desktop/date-picker.jsx"
 
 <DatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/datetime-picker.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/datetime-picker.md
index 0e7dcd8a91..fd2dfc5f76 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: DateTimePicker
 
 The DateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.js"
+import { DateTimePickerComponent } from "@site/static/js/samples/desktop/datetime-picker.jsx"
 
 <DateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/dialog.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/dialog.md
index f55a3d758c..15d825ad53 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/dialog.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/dialog.md
@@ -8,7 +8,7 @@ sidebar_label: Dialog
 
 The Dialog component displays a dialog box.
 
-import { DialogComponent } from "@site/static/js/samples/desktop/dialog.js"
+import { DialogComponent } from "@site/static/js/samples/desktop/dialog.jsx"
 
 <DialogComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/dropdown.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/dropdown.md
index 7de3c53f6a..13763e7fdc 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/dropdown.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: Dropdown
 
 The Dropdown component allows the user to select one out of several options.
 
-import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.js"
+import { DropdownComponent } from "@site/static/js/samples/desktop/dropdown.jsx"
 
 <DropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/multichoice.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/multichoice.md
index 6e3a31d767..8deb95cb50 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/multichoice.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MultiChoice
 
 The MultiChoice component allows the user to select multiple values from multiple options.
 
-import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.js"
+import { MultichoiceComponent } from "@site/static/js/samples/desktop/multichoice.jsx"
 
 <MultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/notification.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/notification.md
index 39c2269b2e..9ec59c1355 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/notification.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/notification.md
@@ -8,7 +8,7 @@ sidebar_label: Notification
 
 The Notification component allows the user to display pop-up notifications.
 
-import { NotificationComponent } from "@site/static/js/samples/desktop/notification.js"
+import { NotificationComponent } from "@site/static/js/samples/desktop/notification.jsx"
 
 <NotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/radio-button.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/radio-button.md
index 36ff336cda..6be92d8cb1 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/radio-button.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: RadioButton
 
 The RadioButton component allows the user to select one out of several options.
 
-import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.js"
+import { RadioButtonComponent } from "@site/static/js/samples/desktop/radio-button.jsx"
 
 <RadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/readonly-table.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/readonly-table.md
index f9967037eb..4e53851a20 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/readonly-table.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/readonly-table.md
@@ -8,7 +8,7 @@ sidebar_label: ReadOnlyTable
 
 The ReadOnlyTable component allows the user to display a read-only mode table.
 
-import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.js"
+import { ReadOnlyTableComponent } from "@site/static/js/samples/desktop/readonly-table.jsx"
 
 <ReadOnlyTableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/spinner.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/spinner.md
index 635ee9786e..cf638aae4b 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/spinner.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/spinner.md
@@ -8,7 +8,7 @@ sidebar_label: Spinner
 
 The Spinner component allows the user to display a rolling spinner.
 
-import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.js"
+import { SpinnerComponent } from "@site/static/js/samples/desktop/spinner.jsx"
 
 <SpinnerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/table.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/table.md
index 6a482e74eb..bb4dec54de 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/table.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/table.md
@@ -7,7 +7,7 @@ sidebar_label: Table
 ## Overview
 The Table component allows the user to display an editable table.
 
-import { TableComponent } from "@site/static/js/samples/desktop/table.js"
+import { TableComponent } from "@site/static/js/samples/desktop/table.jsx"
 
 <TableComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/text.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/text.md
index 291818b7d8..277abb7193 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/text.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/text.md
@@ -8,7 +8,7 @@ sidebar_label: Text
 
 The Text component allows the user to display a single line text element.
 
-import { TextComponent } from "@site/static/js/samples/desktop/text.js"
+import { TextComponent } from "@site/static/js/samples/desktop/text.jsx"
 
 <TextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/textarea.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/textarea.md
index c2affe3618..ab2b924b54 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/textarea.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/textarea.md
@@ -8,7 +8,7 @@ sidebar_label: TextArea
 
 The TextArea component allows the user to display multiple lines of text element.
 
-import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.js"
+import { TextAreaComponent } from "@site/static/js/samples/desktop/textarea.jsx"
 
 <TextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/desktop/time-picker.md b/docs/document/versioned_docs/version-1.9.0/components/desktop/time-picker.md
index c09edc60fa..885490e37e 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/desktop/time-picker.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/desktop/time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: TimePicker
 
 The TimePicker component allows the user to display a input area and time selection listbox.
 
-import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.js"
+import { TimePickerComponent } from "@site/static/js/samples/desktop/time-picker.jsx"
 
 <TimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-button.md b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-button.md
index 12e732fe5d..28625791ef 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-button.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileButton
 
 The MobileButton component allows the user to create and displays buttons.
 
-import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.js"
+import { MobileButtonComponent } from "@site/static/js/samples/mobile/button.jsx"
 
 <MobileButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-checkbox.md b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-checkbox.md
index c473574674..35bc9e5870 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-checkbox.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-checkbox.md
@@ -8,7 +8,7 @@ sidebar_label: MobileCheckbox
 
 The MobileCheckbox component displays a checkbox element for multiple selections.
 
-import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.js"
+import { MobileCheckboxComponent } from "@site/static/js/samples/mobile/checkbox.jsx"
 
 <MobileCheckboxComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-date-picker.md b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-date-picker.md
index fafdc9ae88..a1903422e9 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-date-picker.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-date-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDatePicker
 
 The MobileDatePicker component allows the user to display a input area and date selection calendar.
 
-import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.js"
+import { MobileDatePickerComponent } from "@site/static/js/samples/mobile/date-picker.jsx"
 
 <MobileDatePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-datetime-picker.md b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-datetime-picker.md
index 6e1efca180..f69a8d5634 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-datetime-picker.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-datetime-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDateTimePicker
 
 The MobileDateTimePicker component allows the user to display a input area of time & date and each selection part.
 
-import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.js"
+import { MobileDateTimePickerComponent } from "@site/static/js/samples/mobile/datetime-picker.jsx"
 
 <MobileDateTimePickerComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-dropdown.md b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-dropdown.md
index cae2f4cfd2..72a1194a30 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-dropdown.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-dropdown.md
@@ -8,7 +8,7 @@ sidebar_label: MobileDropdown
 
 The MobileDropdown component allows the user to select one out of several options.
 
-import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.js"
+import { MobileDropdownComponent } from "@site/static/js/samples/mobile/dropdown.jsx"
 
 <MobileDropdownComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-multichoice.md b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-multichoice.md
index 7e790c481f..00a0bf5fad 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-multichoice.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-multichoice.md
@@ -8,7 +8,7 @@ sidebar_label: MobileMultiChoice
 
 The MobileMultiChoice component allows the user to select multiple values from multiple options.
 
-import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.js"
+import { MobilMultichoiceComponent } from "@site/static/js/samples/mobile/multichoice.jsx"
 
 <MobilMultichoiceComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-notification.md b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-notification.md
index fc1a1117a9..e7317409e3 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-notification.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-notification.md
@@ -8,7 +8,7 @@ sidebar_label: MobileNotification
 
 The MobileNotification component allows the user to display pop-up notifications.
 
-import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.js"
+import { MobileNotificationComponent } from "@site/static/js/samples/mobile/notification.jsx"
 
 <MobileNotificationComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-radio-button.md b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-radio-button.md
index 63c040b390..01d7a12cea 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-radio-button.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-radio-button.md
@@ -8,7 +8,7 @@ sidebar_label: MobileRadioButton
 
 The MobileRadioButton component allows the user to select one out of several options.
 
-import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.js"
+import { MobileRadioButtonComponent } from "@site/static/js/samples/mobile/radio-button.jsx"
 
 <MobileRadioButtonComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-text.md b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-text.md
index 46afac7691..91580a8df4 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-text.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-text.md
@@ -8,7 +8,7 @@ sidebar_label: MobileText
 
 The MobileText component allows the user to display a single line text element.
 
-import { MobileTextComponent } from "@site/static/js/samples/mobile/text.js"
+import { MobileTextComponent } from "@site/static/js/samples/mobile/text.jsx"
 
 <MobileTextComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-textarea.md b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-textarea.md
index e6ee1de635..86ff364a50 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-textarea.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-textarea.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTextArea
 
 The MobileTextArea component allows the user to display multiple lines of text element.
 
-import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.js"
+import { MobileTextAreaComponent } from "@site/static/js/samples/mobile/textarea.jsx"
 
 <MobileTextAreaComponent />
 
diff --git a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-time-picker.md b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-time-picker.md
index 3d013e7f81..05372efb04 100644
--- a/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-time-picker.md
+++ b/docs/document/versioned_docs/version-1.9.0/components/mobile/mobile-time-picker.md
@@ -8,7 +8,7 @@ sidebar_label: MobileTimePicker
 
 The MobileTimePicker component allows the user to display a input area and time selection listbox.
 
-import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.js"
+import { MobileTimePickerComponent } from "@site/static/js/samples/mobile/time-picker.jsx"
 
 <MobileTimePickerComponent />
 
diff --git a/docs/document/versioned_sidebars/version-1.18.0-sidebars.json b/docs/document/versioned_sidebars/version-1.18.0-sidebars.json
new file mode 100644
index 0000000000..a116e26861
--- /dev/null
+++ b/docs/document/versioned_sidebars/version-1.18.0-sidebars.json
@@ -0,0 +1,93 @@
+{
+  "docs": {
+    "Getting Started": [
+      "getting-started/quick-start",
+      "getting-started/custom-css",
+      "getting-started/usage-with-typescript"
+    ],
+    "Components": [
+      {
+        "type": "category",
+        "collapsible": true,
+        "collapsed": false,
+        "label": "Desktop",
+        "items": [
+          "components/desktop/attachment",
+          "components/desktop/button",
+          "components/desktop/checkbox",
+          "components/desktop/combobox",
+          "components/desktop/date-picker",
+          "components/desktop/datetime-picker",
+          "components/desktop/dialog",
+          "components/desktop/dropdown",
+          "components/desktop/field-group",
+          "components/desktop/multichoice",
+          "components/desktop/notification",
+          "components/desktop/radio-button",
+          "components/desktop/readonly-table",
+          "components/desktop/spinner",
+          "components/desktop/table",
+          "components/desktop/tabs",
+          "components/desktop/text",
+          "components/desktop/textarea",
+          "components/desktop/time-picker",
+          "components/desktop/tooltip"
+        ]
+      },
+      {
+        "type": "category",
+        "collapsible": true,
+        "collapsed": false,
+        "label": "Mobile",
+        "items": [
+          "components/mobile/mobile-button",
+          "components/mobile/mobile-checkbox",
+          "components/mobile/mobile-date-picker",
+          "components/mobile/mobile-datetime-picker",
+          "components/mobile/mobile-dropdown",
+          "components/mobile/mobile-multichoice",
+          "components/mobile/mobile-notification",
+          "components/mobile/mobile-radio-button",
+          "components/mobile/mobile-text",
+          "components/mobile/mobile-textarea",
+          "components/mobile/mobile-time-picker"
+        ]
+      }
+    ],
+    "Utilities": [
+      "utilities/version"
+    ],
+    "Guides": [
+      "guides/comparison-v0-v1",
+      "guides/search-box-customization",
+      "guides/search-box-customization-with-typescript",
+      "guides/mobile-timecard-customization",
+      "guides/cleaning-check-list-customization",
+      "guides/bulk-update-customization",
+      "guides/format-setting-plugin",
+      "guides/version-conflicts-issue-solution",
+      "guides/attachment-customization",
+      "guides/table-readonly-table-customization",
+      "guides/tabs-customization",
+      "guides/in-office-day-list-customization"
+    ]
+  },
+  "release-notes": {
+    "Releases": [
+      "releases/release-notes",
+      "releases/release-notes-v1.4.0",
+      "releases/release-notes-v1.3.2",
+      "releases/release-notes-v1.3.1",
+      "releases/release-notes-v1.3.0",
+      "releases/release-notes-v1.2.0",
+      "releases/release-notes-v1.1.1",
+      "releases/release-notes-v1.1.0",
+      "releases/release-notes-v1.0.5",
+      "releases/release-notes-v1.0.4",
+      "releases/release-notes-v1.0.3",
+      "releases/release-notes-v1.0.2",
+      "releases/release-notes-v1.0.1",
+      "releases/release-notes-v1.0.0"
+    ]
+  }
+}
diff --git a/docs/document/versions.json b/docs/document/versions.json
index d7071fdfd1..1a74b0b65a 100644
--- a/docs/document/versions.json
+++ b/docs/document/versions.json
@@ -1,4 +1,5 @@
 [
+  "1.18.0",
   "1.17.1",
   "1.17.0",
   "1.16.0",
diff --git a/package-lock.json b/package-lock.json
index c95a0b64f2..f1fab39c80 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,23 +1,23 @@
 {
   "name": "kintone-ui-component",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "kintone-ui-component",
-      "version": "1.17.1",
+      "version": "1.18.0",
       "license": "MIT",
       "dependencies": {
         "@webcomponents/webcomponentsjs": "^2.8.0",
-        "core-js": "^3.37.0",
-        "lit": "^3.1.3",
+        "core-js": "^3.38.1",
+        "lit": "^3.2.0",
         "regenerator-runtime": "^0.14.1",
-        "uuid": "^9.0.1"
+        "uuid": "^10.0.0"
       },
       "devDependencies": {
-        "@babel/core": "^7.24.5",
-        "@babel/preset-env": "^7.24.5",
+        "@babel/core": "^7.25.2",
+        "@babel/preset-env": "^7.25.4",
         "@cybozu/eslint-config": "^23.0.0",
         "@open-wc/testing": "^4.0.0",
         "@storybook/addon-a11y": "^6.5.16",
@@ -27,21 +27,21 @@
         "@storybook/builder-webpack5": "^6.5.16",
         "@storybook/manager-webpack5": "^6.5.16",
         "@storybook/web-components": "^6.5.16",
-        "@types/mocha": "^10.0.6",
-        "@types/uuid": "^9.0.8",
-        "@web/test-runner": "^0.18.1",
-        "babel-loader": "^9.1.3",
-        "chromatic": "^11.3.2",
+        "@types/mocha": "^10.0.8",
+        "@types/uuid": "^10.0.0",
+        "@web/test-runner": "^0.19.0",
+        "babel-loader": "^9.2.1",
+        "chromatic": "^11.10.4",
         "deepmerge": "^4.3.1",
         "eslint": "^8.57.0",
-        "eslint-import-resolver-typescript": "^3.6.1",
-        "eslint-plugin-import": "^2.29.1",
+        "eslint-import-resolver-typescript": "^3.6.3",
+        "eslint-plugin-import": "^2.30.0",
         "eslint-plugin-kuc-v1": "file:eslint-plugin-kuc-v1",
         "node-actionlint": "^1.2.2",
-        "prettier": "^3.2.5",
+        "prettier": "^3.3.3",
         "ts-loader": "^9.5.1",
-        "typescript": "^5.4.5",
-        "webpack": "^5.91.0",
+        "typescript": "^5.6.2",
+        "webpack": "^5.95.0",
         "webpack-cli": "^5.1.4"
       }
     },
@@ -50,12 +50,12 @@
       "dev": true
     },
     "node_modules/@75lb/deep-merge": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@75lb/deep-merge/-/deep-merge-1.1.1.tgz",
-      "integrity": "sha512-xvgv6pkMGBA6GwdyJbNAnDmfAIR/DfWhrj9jgWh3TY7gRm3KO46x/GPjRg6wJ0nOepwqrNxFfojebh0Df4h4Tw==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@75lb/deep-merge/-/deep-merge-1.1.2.tgz",
+      "integrity": "sha512-08K9ou5VNbheZFxM5tDWoqjA3ImC50DiuuJ2tj1yEPRfkp8lLLg6XAaJ4On+a0yAXor/8ay5gHnAIshRM44Kpw==",
       "dev": true,
       "dependencies": {
-        "lodash.assignwith": "^4.2.0",
+        "lodash": "^4.17.21",
         "typical": "^7.1.1"
       },
       "engines": {
@@ -94,12 +94,12 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.24.2",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
-      "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
+      "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
       "dev": true,
       "dependencies": {
-        "@babel/highlight": "^7.24.2",
+        "@babel/highlight": "^7.24.7",
         "picocolors": "^1.0.0"
       },
       "engines": {
@@ -113,30 +113,30 @@
       "dev": true
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.24.4",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz",
-      "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
+      "integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.5.tgz",
-      "integrity": "sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==",
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
+      "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.24.2",
-        "@babel/generator": "^7.24.5",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-module-transforms": "^7.24.5",
-        "@babel/helpers": "^7.24.5",
-        "@babel/parser": "^7.24.5",
-        "@babel/template": "^7.24.0",
-        "@babel/traverse": "^7.24.5",
-        "@babel/types": "^7.24.5",
+        "@babel/code-frame": "^7.24.7",
+        "@babel/generator": "^7.25.0",
+        "@babel/helper-compilation-targets": "^7.25.2",
+        "@babel/helper-module-transforms": "^7.25.2",
+        "@babel/helpers": "^7.25.0",
+        "@babel/parser": "^7.25.0",
+        "@babel/template": "^7.25.0",
+        "@babel/traverse": "^7.25.2",
+        "@babel/types": "^7.25.2",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -158,12 +158,12 @@
       "dev": true
     },
     "node_modules/@babel/generator": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.5.tgz",
-      "integrity": "sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.6.tgz",
+      "integrity": "sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.24.5",
+        "@babel/types": "^7.25.6",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^2.5.1"
@@ -187,38 +187,39 @@
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
-      "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz",
+      "integrity": "sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.5"
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz",
-      "integrity": "sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.24.7.tgz",
+      "integrity": "sha512-xZeCVVdwb4MsDBkkyZ64tReWYrLRHlMN72vP7Bdm3OUOuyFZExhsHUUnuWnm2/XOlAJzR0LfPpB56WXZn0X/lA==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.15"
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
-      "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
+      "integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==",
       "dev": true,
       "dependencies": {
-        "@babel/compat-data": "^7.23.5",
-        "@babel/helper-validator-option": "^7.23.5",
-        "browserslist": "^4.22.2",
+        "@babel/compat-data": "^7.25.2",
+        "@babel/helper-validator-option": "^7.24.8",
+        "browserslist": "^4.23.1",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
       },
@@ -242,19 +243,17 @@
       "dev": true
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.5.tgz",
-      "integrity": "sha512-uRc4Cv8UQWnE4NXlYTIIdM7wfFkOqlFztcC/gVXDKohKoVB3OyonfelUBaJzSwpBntZ2KYGF/9S7asCHsXwW6g==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-member-expression-to-functions": "^7.24.5",
-        "@babel/helper-optimise-call-expression": "^7.22.5",
-        "@babel/helper-replace-supers": "^7.24.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.24.5",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.4.tgz",
+      "integrity": "sha512-ro/bFs3/84MDgDmMwbcHgDa8/E6J3QKNTk4xJJnVeFtGE+tL0K26E3pNxhYz2b67fJpt7Aphw5XcploKXuCvCQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-member-expression-to-functions": "^7.24.8",
+        "@babel/helper-optimise-call-expression": "^7.24.7",
+        "@babel/helper-replace-supers": "^7.25.0",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/traverse": "^7.25.4",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -265,12 +264,12 @@
       }
     },
     "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz",
-      "integrity": "sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==",
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.2.tgz",
+      "integrity": "sha512-+wqVGP+DFmqwFD3EH6TMTfUNeqDehV3E/dl+Sd54eaXqm17tEUNbEIn4sVivVowbvUpOtIGxdo3GoXyDH9N/9g==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-annotate-as-pure": "^7.24.7",
         "regexpu-core": "^5.3.1",
         "semver": "^6.3.1"
       },
@@ -297,75 +296,42 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/@babel/helper-environment-visitor": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
-      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-function-name": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
-      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/template": "^7.22.15",
-        "@babel/types": "^7.23.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-hoist-variables": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
-      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.22.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.5.tgz",
-      "integrity": "sha512-4owRteeihKWKamtqg4JmWSsEZU445xpFRXPEwp44HbgbxdWlUV1b4Agg4lkA806Lil5XM/e+FJyS0vj5T6vmcA==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.8.tgz",
+      "integrity": "sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.24.5"
+        "@babel/traverse": "^7.24.8",
+        "@babel/types": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.24.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
-      "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
+      "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.24.0"
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.5.tgz",
-      "integrity": "sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==",
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz",
+      "integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-module-imports": "^7.24.3",
-        "@babel/helper-simple-access": "^7.24.5",
-        "@babel/helper-split-export-declaration": "^7.24.5",
-        "@babel/helper-validator-identifier": "^7.24.5"
+        "@babel/helper-module-imports": "^7.24.7",
+        "@babel/helper-simple-access": "^7.24.7",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "@babel/traverse": "^7.25.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -375,35 +341,35 @@
       }
     },
     "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
-      "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.7.tgz",
+      "integrity": "sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.5"
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.5.tgz",
-      "integrity": "sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
+      "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-remap-async-to-generator": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz",
-      "integrity": "sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.0.tgz",
+      "integrity": "sha512-NhavI2eWEIz/H9dbrG0TuOicDhNexze43i5z7lEqwYm0WEZVTwnPpA0EafUTP7+6/W79HWIP2cTe3Z5NiSTVpw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-wrap-function": "^7.22.20"
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-wrap-function": "^7.25.0",
+        "@babel/traverse": "^7.25.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -413,14 +379,14 @@
       }
     },
     "node_modules/@babel/helper-replace-supers": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.24.1.tgz",
-      "integrity": "sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.0.tgz",
+      "integrity": "sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-member-expression-to-functions": "^7.23.0",
-        "@babel/helper-optimise-call-expression": "^7.22.5"
+        "@babel/helper-member-expression-to-functions": "^7.24.8",
+        "@babel/helper-optimise-call-expression": "^7.24.7",
+        "@babel/traverse": "^7.25.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -430,24 +396,26 @@
       }
     },
     "node_modules/@babel/helper-simple-access": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.5.tgz",
-      "integrity": "sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
+      "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.24.5"
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
-      "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz",
+      "integrity": "sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.22.5"
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -466,67 +434,66 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
-      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz",
-      "integrity": "sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
-      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
+      "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-wrap-function": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.24.5.tgz",
-      "integrity": "sha512-/xxzuNvgRl4/HLNKvnFwdhdgN3cpLxgLROeLDl83Yx0AJ1SGvq1ak0OszTOjDfiB8Vx03eJbeDWh9r+jCCWttw==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.0.tgz",
+      "integrity": "sha512-s6Q1ebqutSiZnEjaofc/UKDyC4SbzV5n5SrA2Gq8UawLycr3i04f1dX4OzoQVnexm6aOCh37SQNYlJ/8Ku+PMQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/template": "^7.24.0",
-        "@babel/types": "^7.24.5"
+        "@babel/template": "^7.25.0",
+        "@babel/traverse": "^7.25.0",
+        "@babel/types": "^7.25.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.5.tgz",
-      "integrity": "sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.6.tgz",
+      "integrity": "sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==",
       "dev": true,
       "dependencies": {
-        "@babel/template": "^7.24.0",
-        "@babel/traverse": "^7.24.5",
-        "@babel/types": "^7.24.5"
+        "@babel/template": "^7.25.0",
+        "@babel/types": "^7.25.6"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.5.tgz",
-      "integrity": "sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
+      "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.24.5",
+        "@babel/helper-validator-identifier": "^7.24.7",
         "chalk": "^2.4.2",
         "js-tokens": "^4.0.0",
         "picocolors": "^1.0.0"
@@ -536,16 +503,19 @@
       }
     },
     "node_modules/@babel/highlight/node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
       "dev": true
     },
     "node_modules/@babel/parser": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz",
-      "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
+      "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
       "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.25.6"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -554,13 +524,28 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.5.tgz",
-      "integrity": "sha512-LdXRi1wEMTrHVR4Zc9F8OewC3vdm5h4QB6L71zy6StmYeqGi1b3ttIO8UC+BfZKcH9jdr4aI249rBkm+3+YvHw==",
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.3.tgz",
+      "integrity": "sha512-wUrcsxZg6rqBXG05HG1FPYgsP6EvwF4WpBbxIpWIIYnH8wG0gzx3yZY3dtEHas4sTAOGkbTsc9EGPxwff8lRoA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-plugin-utils": "^7.24.5"
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/traverse": "^7.25.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.0.tgz",
+      "integrity": "sha512-Bm4bH2qsX880b/3ziJ8KD711LT7z4u8CFudmjqle65AZj/HNUFhEf90dqYv6O86buWvSBmeQDjv0Tn2aF/bIBA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -570,12 +555,12 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.1.tgz",
-      "integrity": "sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.0.tgz",
+      "integrity": "sha512-lXwdNZtTmeVOOFtwM/WDe7yg1PL8sYhRk/XH0FzbR2HDQ0xC+EnQ/JHeoMYSavtU115tnUk0q9CDyq8si+LMAA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -585,14 +570,14 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.1.tgz",
-      "integrity": "sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.7.tgz",
+      "integrity": "sha512-+izXIbke1T33mY4MSNnrqhPXDz01WYhEf3yF5NbnUtkiNnm+XBZJl3kNfoK6NKmYlz/D07+l2GWVK/QfDkNCuQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
-        "@babel/plugin-transform-optional-chaining": "^7.24.1"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/plugin-transform-optional-chaining": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -602,13 +587,13 @@
       }
     },
     "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.24.1.tgz",
-      "integrity": "sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.0.tgz",
+      "integrity": "sha512-tggFrk1AIShG/RUQbEwt2Tr/E+ObkfwrPjR6BjbRvsx24+PSjK8zrq0GWPNCjo8qpRx4DuJzlcvWJqlm+0h3kw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/traverse": "^7.25.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -848,12 +833,12 @@
       }
     },
     "node_modules/@babel/plugin-syntax-import-assertions": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.24.1.tgz",
-      "integrity": "sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.25.6.tgz",
+      "integrity": "sha512-aABl0jHw9bZ2karQ/uUD6XP4u0SG22SJrOHFoL6XB1R7dTovOP4TzTlsxOYC5yQ1pdscVK2JTUnF6QL3ARoAiQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -863,12 +848,12 @@
       }
     },
     "node_modules/@babel/plugin-syntax-import-attributes": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.1.tgz",
-      "integrity": "sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.25.6.tgz",
+      "integrity": "sha512-sXaDXaJN9SNLymBdlWFA+bjzBhFD617ZaFiY13dGt7TVslVvVgA6fkZOP7Ki3IGElC45lwHdOTrCtKZGVAWeLQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1050,12 +1035,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-arrow-functions": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.1.tgz",
-      "integrity": "sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.7.tgz",
+      "integrity": "sha512-Dt9LQs6iEY++gXUwY03DNFat5C2NbO48jj+j/bSAz6b3HgPs39qcPiYt77fDObIcFwj3/C2ICX9YMwGflUoSHQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1065,15 +1050,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-generator-functions": {
-      "version": "7.24.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.24.3.tgz",
-      "integrity": "sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.4.tgz",
+      "integrity": "sha512-jz8cV2XDDTqjKPwVPJBIjORVEmSGYhdRa8e5k5+vN+uwcjSrSxUaebBRa4ko1jqNF2uxyg8G6XYk30Jv285xzg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-remap-async-to-generator": "^7.22.20",
-        "@babel/plugin-syntax-async-generators": "^7.8.4"
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-remap-async-to-generator": "^7.25.0",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/traverse": "^7.25.4"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1083,14 +1068,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.1.tgz",
-      "integrity": "sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.7.tgz",
+      "integrity": "sha512-SQY01PcJfmQ+4Ash7NE+rpbLFbmqA2GPIgqzxfFTL4t1FKRq4zTms/7htKpoCUI9OcFYgzqfmCdH53s6/jn5fA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-module-imports": "^7.24.1",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-remap-async-to-generator": "^7.22.20"
+        "@babel/helper-module-imports": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-remap-async-to-generator": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1100,12 +1085,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.1.tgz",
-      "integrity": "sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.7.tgz",
+      "integrity": "sha512-yO7RAz6EsVQDaBH18IDJcMB1HnrUn2FJ/Jslc/WtPPWcjhpUJXU/rjbwmluzp7v/ZzWcEhTMXELnnsz8djWDwQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1115,12 +1100,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.5.tgz",
-      "integrity": "sha512-sMfBc3OxghjC95BkYrYocHL3NaOplrcaunblzwXhGmlPwpmfsxr4vK+mBBt49r+S240vahmv+kUxkeKgs+haCw==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.0.tgz",
+      "integrity": "sha512-yBQjYoOjXlFv9nlXb3f1casSHOZkWr29NX+zChVanLg5Nc157CrbEX9D7hxxtTpuFy7Q0YzmmWfJxzvps4kXrQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.5"
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1130,13 +1115,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-class-properties": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.1.tgz",
-      "integrity": "sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.4.tgz",
+      "integrity": "sha512-nZeZHyCWPfjkdU5pA/uHiTaDAFUEqkpzf1YoQT2NeSynCGYq9rxfyI3XpQbfx/a0hSnFH6TGlEXvae5Vi7GD8g==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.24.1",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-class-features-plugin": "^7.25.4",
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1146,13 +1131,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-class-static-block": {
-      "version": "7.24.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.4.tgz",
-      "integrity": "sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.7.tgz",
+      "integrity": "sha512-HMXK3WbBPpZQufbMG4B46A90PkuuhN9vBCb5T8+VAHqvAqvcLi+2cKoukcpmUYkszLhScU3l1iudhrks3DggRQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.24.4",
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-class-static-block": "^7.14.5"
       },
       "engines": {
@@ -1163,18 +1148,16 @@
       }
     },
     "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.24.5.tgz",
-      "integrity": "sha512-gWkLP25DFj2dwe9Ck8uwMOpko4YsqyfZJrOmqqcegeDYEbp7rmn4U6UQZNj08UF6MaX39XenSpKRCvpDRBtZ7Q==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.4.tgz",
+      "integrity": "sha512-oexUfaQle2pF/b6E0dwsxQtAol9TLSO88kQvym6HHBWFliV2lGdrPieX+WgMRLSJDVzdYywk7jXbLPuO2KLTLg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-plugin-utils": "^7.24.5",
-        "@babel/helper-replace-supers": "^7.24.1",
-        "@babel/helper-split-export-declaration": "^7.24.5",
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-compilation-targets": "^7.25.2",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-replace-supers": "^7.25.0",
+        "@babel/traverse": "^7.25.4",
         "globals": "^11.1.0"
       },
       "engines": {
@@ -1185,13 +1168,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-computed-properties": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.1.tgz",
-      "integrity": "sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.7.tgz",
+      "integrity": "sha512-25cS7v+707Gu6Ds2oY6tCkUwsJ9YIDbggd9+cu9jzzDgiNq7hR/8dkzxWfKWnTic26vsI3EsCXNd4iEB6e8esQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/template": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/template": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1201,12 +1184,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-destructuring": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.5.tgz",
-      "integrity": "sha512-SZuuLyfxvsm+Ah57I/i1HVjveBENYK9ue8MJ7qkc7ndoNjqquJiElzA7f5yaAXjyW2hKojosOTAQQRX50bPSVg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.8.tgz",
+      "integrity": "sha512-36e87mfY8TnRxc7yc6M9g9gOB7rKgSahqkIKwLpz4Ppk2+zC2Cy1is0uwtuSG6AE4zlTOUa+7JGz9jCJGLqQFQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.5"
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1216,13 +1199,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-dotall-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.1.tgz",
-      "integrity": "sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.7.tgz",
+      "integrity": "sha512-ZOA3W+1RRTSWvyqcMJDLqbchh7U4NRGqwRfFSVbOLS/ePIP4vHB5e8T8eXcuqyN1QkgKyj5wuW0lcS85v4CrSw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1232,12 +1215,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-duplicate-keys": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.1.tgz",
-      "integrity": "sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.7.tgz",
+      "integrity": "sha512-JdYfXyCRihAe46jUIliuL2/s0x0wObgwwiGxw/UbgJBr20gQBThrokO4nYKgWkD7uBaqM7+9x5TU7NkExZJyzw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1246,13 +1229,29 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.0.tgz",
+      "integrity": "sha512-YLpb4LlYSc3sCUa35un84poXoraOiQucUTTu8X1j18JV+gNa8E0nyUf/CjZ171IRGr4jEguF+vzJU66QZhn29g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.25.0",
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
     "node_modules/@babel/plugin-transform-dynamic-import": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.1.tgz",
-      "integrity": "sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.7.tgz",
+      "integrity": "sha512-sc3X26PhZQDb3JhORmakcbvkeInvxz+A8oda99lj7J60QRuPZvNAk9wQlTBS1ZynelDrDmTU4pw1tyc5d5ZMUg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3"
       },
       "engines": {
@@ -1263,13 +1262,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.1.tgz",
-      "integrity": "sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.7.tgz",
+      "integrity": "sha512-Rqe/vSc9OYgDajNIK35u7ot+KeCoetqQYFXM4Epf7M7ez3lWlOjrDjrwMei6caCVhfdw+mIKD4cgdGNy5JQotQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1279,12 +1278,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-export-namespace-from": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.1.tgz",
-      "integrity": "sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.7.tgz",
+      "integrity": "sha512-v0K9uNYsPL3oXZ/7F9NNIbAj2jv1whUEtyA6aujhekLs56R++JDQuzRcP2/z4WX5Vg/c5lE9uWZA0/iUoFhLTA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
       },
       "engines": {
@@ -1295,13 +1294,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-for-of": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.1.tgz",
-      "integrity": "sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.7.tgz",
+      "integrity": "sha512-wo9ogrDG1ITTTBsy46oGiN1dS9A7MROBTcYsfS8DtsImMkHk9JXJ3EWQM6X2SUw4x80uGPlwj0o00Uoc6nEE3g==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1311,14 +1310,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-function-name": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.24.1.tgz",
-      "integrity": "sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==",
+      "version": "7.25.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.1.tgz",
+      "integrity": "sha512-TVVJVdW9RKMNgJJlLtHsKDTydjZAbwIsn6ySBPQaEAUU5+gVvlJt/9nRmqVbsV/IBanRjzWoaAQKLoamWVOUuA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-compilation-targets": "^7.24.8",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/traverse": "^7.25.1"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1328,12 +1327,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-json-strings": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.1.tgz",
-      "integrity": "sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.7.tgz",
+      "integrity": "sha512-2yFnBGDvRuxAaE/f0vfBKvtnvvqU8tGpMHqMNpTN2oWMKIR3NqFkjaAgGwawhqK/pIN2T3XdjGPdaG0vDhOBGw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-json-strings": "^7.8.3"
       },
       "engines": {
@@ -1344,12 +1343,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-literals": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.24.1.tgz",
-      "integrity": "sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==",
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.2.tgz",
+      "integrity": "sha512-HQI+HcTbm9ur3Z2DkO+jgESMAMcYLuN/A7NRw9juzxAezN9AvqvUTnpKP/9kkYANz6u7dFlAyOu44ejuGySlfw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1359,12 +1358,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-logical-assignment-operators": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.1.tgz",
-      "integrity": "sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.7.tgz",
+      "integrity": "sha512-4D2tpwlQ1odXmTEIFWy9ELJcZHqrStlzK/dAOWYyxX3zT0iXQB6banjgeOJQXzEc4S0E0a5A+hahxPaEFYftsw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       },
       "engines": {
@@ -1375,12 +1374,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-member-expression-literals": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.1.tgz",
-      "integrity": "sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.7.tgz",
+      "integrity": "sha512-T/hRC1uqrzXMKLQ6UCwMT85S3EvqaBXDGf0FaMf4446Qx9vKwlghvee0+uuZcDUCZU5RuNi4781UQ7R308zzBw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1390,13 +1389,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-amd": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.1.tgz",
-      "integrity": "sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.7.tgz",
+      "integrity": "sha512-9+pB1qxV3vs/8Hdmz/CulFB8w2tuu6EB94JZFsjdqxQokwGa9Unap7Bo2gGBGIvPmDIVvQrom7r5m/TCDMURhg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-module-transforms": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1406,14 +1405,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.1.tgz",
-      "integrity": "sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.8.tgz",
+      "integrity": "sha512-WHsk9H8XxRs3JXKWFiqtQebdh9b/pTk4EgueygFzYlTKAg0Ud985mSevdNjdXdFBATSKVJGQXP1tv6aGbssLKA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-simple-access": "^7.22.5"
+        "@babel/helper-module-transforms": "^7.24.8",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-simple-access": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1423,15 +1422,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.24.1.tgz",
-      "integrity": "sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.0.tgz",
+      "integrity": "sha512-YPJfjQPDXxyQWg/0+jHKj1llnY5f/R6a0p/vP4lPymxLu7Lvl4k2WMitqi08yxwQcCVUUdG9LCUj4TNEgAp3Jw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-validator-identifier": "^7.22.20"
+        "@babel/helper-module-transforms": "^7.25.0",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "@babel/traverse": "^7.25.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1441,13 +1440,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-umd": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.1.tgz",
-      "integrity": "sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.7.tgz",
+      "integrity": "sha512-3aytQvqJ/h9z4g8AsKPLvD4Zqi2qT+L3j7XoFFu1XBlZWEl2/1kWnhmAbxpLgPrHSY0M6UA02jyTiwUVtiKR6A==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-module-transforms": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1457,13 +1456,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
-      "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.24.7.tgz",
+      "integrity": "sha512-/jr7h/EWeJtk1U/uz2jlsCioHkZk1JJZVcc8oQsJ1dUlaJD83f4/6Zeh2aHt9BIFokHIsSeDfhUmju0+1GPd6g==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5"
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1473,12 +1472,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-new-target": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.1.tgz",
-      "integrity": "sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.7.tgz",
+      "integrity": "sha512-RNKwfRIXg4Ls/8mMTza5oPF5RkOW8Wy/WgMAp1/F1yZ8mMbtwXW+HDoJiOsagWrAhI5f57Vncrmr9XeT4CVapA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1488,12 +1487,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz",
-      "integrity": "sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.7.tgz",
+      "integrity": "sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
       },
       "engines": {
@@ -1504,12 +1503,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-numeric-separator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.1.tgz",
-      "integrity": "sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.7.tgz",
+      "integrity": "sha512-e6q1TiVUzvH9KRvicuxdBTUj4AdKSRwzIyFFnfnezpCfP2/7Qmbb8qbU2j7GODbl4JMkblitCQjKYUaX/qkkwA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-numeric-separator": "^7.10.4"
       },
       "engines": {
@@ -1520,15 +1519,15 @@
       }
     },
     "node_modules/@babel/plugin-transform-object-rest-spread": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.5.tgz",
-      "integrity": "sha512-7EauQHszLGM3ay7a161tTQH7fj+3vVM/gThlz5HpFtnygTxjrlvoeq7MPVA1Vy9Q555OB8SnAOsMkLShNkkrHA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.7.tgz",
+      "integrity": "sha512-4QrHAr0aXQCEFni2q4DqKLD31n2DL+RxcwnNjDFkSG0eNQ/xCavnRkfCUjsyqGC2OviNJvZOF/mQqZBw7i2C5Q==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-plugin-utils": "^7.24.5",
+        "@babel/helper-compilation-targets": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.24.5"
+        "@babel/plugin-transform-parameters": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1538,13 +1537,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-object-super": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.1.tgz",
-      "integrity": "sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.7.tgz",
+      "integrity": "sha512-A/vVLwN6lBrMFmMDmPPz0jnE6ZGx7Jq7d6sT/Ev4H65RER6pZ+kczlf1DthF5N0qaPHBsI7UXiE8Zy66nmAovg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-replace-supers": "^7.24.1"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-replace-supers": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1554,12 +1553,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-optional-catch-binding": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.1.tgz",
-      "integrity": "sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.7.tgz",
+      "integrity": "sha512-uLEndKqP5BfBbC/5jTwPxLh9kqPWWgzN/f8w6UwAIirAEqiIVJWWY312X72Eub09g5KF9+Zn7+hT7sDxmhRuKA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
       },
       "engines": {
@@ -1570,13 +1569,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-optional-chaining": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.5.tgz",
-      "integrity": "sha512-xWCkmwKT+ihmA6l7SSTpk8e4qQl/274iNbSKRRS8mpqFR32ksy36+a+LWY8OXCCEefF8WFlnOHVsaDI2231wBg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.8.tgz",
+      "integrity": "sha512-5cTOLSMs9eypEy8JUVvIKOu6NgvbJMnpG62VpIHrTmROdQ+L5mDAaI40g25k5vXti55JWNX5jCkq3HZxXBQANw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
         "@babel/plugin-syntax-optional-chaining": "^7.8.3"
       },
       "engines": {
@@ -1587,12 +1586,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-parameters": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.5.tgz",
-      "integrity": "sha512-9Co00MqZ2aoky+4j2jhofErthm6QVLKbpQrvz20c3CH9KQCLHyNB+t2ya4/UrRpQGR+Wrwjg9foopoeSdnHOkA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.7.tgz",
+      "integrity": "sha512-yGWW5Rr+sQOhK0Ot8hjDJuxU3XLRQGflvT4lhlSY0DFvdb3TwKaY26CJzHtYllU0vT9j58hc37ndFPsqT1SrzA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.5"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1602,13 +1601,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-private-methods": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.24.1.tgz",
-      "integrity": "sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.4.tgz",
+      "integrity": "sha512-ao8BG7E2b/URaUQGqN3Tlsg+M3KlHY6rJ1O1gXAEUnZoyNQnvKyH87Kfg+FoxSeyWUB8ISZZsC91C44ZuBFytw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.24.1",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-class-features-plugin": "^7.25.4",
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1618,14 +1617,14 @@
       }
     },
     "node_modules/@babel/plugin-transform-private-property-in-object": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.5.tgz",
-      "integrity": "sha512-JM4MHZqnWR04jPMujQDTBVRnqxpLLpx2tkn7iPn+Hmsc0Gnb79yvRWOkvqFOx3Z7P7VxiRIR22c4eGSNj87OBQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.7.tgz",
+      "integrity": "sha512-9z76mxwnwFxMyxZWEgdgECQglF2Q7cFLm0kMf8pGwt+GSJsY0cONKj/UuO4bOH0w/uAel3ekS4ra5CEAyJRmDA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-create-class-features-plugin": "^7.24.5",
-        "@babel/helper-plugin-utils": "^7.24.5",
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
       },
       "engines": {
@@ -1636,12 +1635,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-property-literals": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.1.tgz",
-      "integrity": "sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.7.tgz",
+      "integrity": "sha512-EMi4MLQSHfd2nrCqQEWxFdha2gBCqU4ZcCng4WBGZ5CJL4bBRW0ptdqqDdeirGZcpALazVVNJqRmsO8/+oNCBA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1716,12 +1715,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-regenerator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.1.tgz",
-      "integrity": "sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.7.tgz",
+      "integrity": "sha512-lq3fvXPdimDrlg6LWBoqj+r/DEWgONuwjuOuQCSYgRroXDH/IdM1C0IZf59fL5cHLpjEH/O6opIRBbqv7ELnuA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "regenerator-transform": "^0.15.2"
       },
       "engines": {
@@ -1732,12 +1731,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-reserved-words": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.1.tgz",
-      "integrity": "sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.7.tgz",
+      "integrity": "sha512-0DUq0pHcPKbjFZCfTss/pGkYMfy3vFWydkUBd9r0GHpIyfs2eCDENvqadMycRS9wZCXR41wucAfJHJmwA0UmoQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1747,12 +1746,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-shorthand-properties": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.1.tgz",
-      "integrity": "sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.7.tgz",
+      "integrity": "sha512-KsDsevZMDsigzbA09+vacnLpmPH4aWjcZjXdyFKGzpplxhbeB4wYtury3vglQkg6KM/xEPKt73eCjPPf1PgXBA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1762,13 +1761,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-spread": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.1.tgz",
-      "integrity": "sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.7.tgz",
+      "integrity": "sha512-x96oO0I09dgMDxJaANcRyD4ellXFLLiWhuwDxKZX5g2rWP1bTPkBSwCYv96VDXVT1bD9aPj8tppr5ITIh8hBng==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1778,12 +1777,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-sticky-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.1.tgz",
-      "integrity": "sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.7.tgz",
+      "integrity": "sha512-kHPSIJc9v24zEml5geKg9Mjx5ULpfncj0wRpYtxbvKyTtHCYDkVE3aHQ03FrpEo4gEe2vrJJS1Y9CJTaThA52g==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1793,12 +1792,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-template-literals": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.1.tgz",
-      "integrity": "sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.7.tgz",
+      "integrity": "sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1808,12 +1807,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-typeof-symbol": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.5.tgz",
-      "integrity": "sha512-UTGnhYVZtTAjdwOTzT+sCyXmTn8AhaxOS/MjG9REclZ6ULHWF9KoCZur0HSGU7hk8PdBFKKbYe6+gqdXWz84Jg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.8.tgz",
+      "integrity": "sha512-adNTUpDCVnmAE58VEqKlAA6ZBlNkMnWD0ZcW76lyNFN3MJniyGFZfNwERVk8Ap56MCnXztmDr19T4mPTztcuaw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.5"
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1840,12 +1839,12 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.1.tgz",
-      "integrity": "sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.7.tgz",
+      "integrity": "sha512-U3ap1gm5+4edc2Q/P+9VrBNhGkfnf+8ZqppY71Bo/pzZmXhhLdqgaUl6cuB07O1+AQJtCLfaOmswiNbSQ9ivhw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1855,13 +1854,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-property-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.1.tgz",
-      "integrity": "sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.7.tgz",
+      "integrity": "sha512-uH2O4OV5M9FZYQrwc7NdVmMxQJOCCzFeYudlZSzUAHRFeOujQefa92E74TQDVskNHCzOXoigEuoyzHDhaEaK5w==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1871,13 +1870,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.1.tgz",
-      "integrity": "sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.7.tgz",
+      "integrity": "sha512-hlQ96MBZSAXUq7ltkjtu3FJCCSMx/j629ns3hA3pXnBXjanNP0LHi+JpPeA81zaWgVK1VGH95Xuy7u0RyQ8kMg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1887,13 +1886,13 @@
       }
     },
     "node_modules/@babel/plugin-transform-unicode-sets-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.24.1.tgz",
-      "integrity": "sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.4.tgz",
+      "integrity": "sha512-qesBxiWkgN1Q+31xUE9RcMk79eOXXDCv6tfyGMRSs4RGlioSg2WVyQAm07k726cSE56pa+Kb0y9epX2qaXzTvA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.25.2",
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1903,27 +1902,28 @@
       }
     },
     "node_modules/@babel/preset-env": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.24.5.tgz",
-      "integrity": "sha512-UGK2ifKtcC8i5AI4cH+sbLLuLc2ktYSFJgBAXorKAsHUZmrQ1q6aQ6i3BvU24wWs2AAKqQB6kq3N9V9Gw1HiMQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/compat-data": "^7.24.4",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-plugin-utils": "^7.24.5",
-        "@babel/helper-validator-option": "^7.23.5",
-        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.24.5",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.24.1",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.24.1",
-        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.24.1",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.25.4.tgz",
+      "integrity": "sha512-W9Gyo+KmcxjGahtt3t9fb14vFRWvPpu5pT6GBlovAK6BTBcxgjfVMSQCfJl4oi35ODrxP6xx2Wr8LNST57Mraw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.25.4",
+        "@babel/helper-compilation-targets": "^7.25.2",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-validator-option": "^7.24.8",
+        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.25.3",
+        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.25.0",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.25.0",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.24.7",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.25.0",
         "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
         "@babel/plugin-syntax-async-generators": "^7.8.4",
         "@babel/plugin-syntax-class-properties": "^7.12.13",
         "@babel/plugin-syntax-class-static-block": "^7.14.5",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
-        "@babel/plugin-syntax-import-assertions": "^7.24.1",
-        "@babel/plugin-syntax-import-attributes": "^7.24.1",
+        "@babel/plugin-syntax-import-assertions": "^7.24.7",
+        "@babel/plugin-syntax-import-attributes": "^7.24.7",
         "@babel/plugin-syntax-import-meta": "^7.10.4",
         "@babel/plugin-syntax-json-strings": "^7.8.3",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
@@ -1935,59 +1935,60 @@
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
         "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
-        "@babel/plugin-transform-arrow-functions": "^7.24.1",
-        "@babel/plugin-transform-async-generator-functions": "^7.24.3",
-        "@babel/plugin-transform-async-to-generator": "^7.24.1",
-        "@babel/plugin-transform-block-scoped-functions": "^7.24.1",
-        "@babel/plugin-transform-block-scoping": "^7.24.5",
-        "@babel/plugin-transform-class-properties": "^7.24.1",
-        "@babel/plugin-transform-class-static-block": "^7.24.4",
-        "@babel/plugin-transform-classes": "^7.24.5",
-        "@babel/plugin-transform-computed-properties": "^7.24.1",
-        "@babel/plugin-transform-destructuring": "^7.24.5",
-        "@babel/plugin-transform-dotall-regex": "^7.24.1",
-        "@babel/plugin-transform-duplicate-keys": "^7.24.1",
-        "@babel/plugin-transform-dynamic-import": "^7.24.1",
-        "@babel/plugin-transform-exponentiation-operator": "^7.24.1",
-        "@babel/plugin-transform-export-namespace-from": "^7.24.1",
-        "@babel/plugin-transform-for-of": "^7.24.1",
-        "@babel/plugin-transform-function-name": "^7.24.1",
-        "@babel/plugin-transform-json-strings": "^7.24.1",
-        "@babel/plugin-transform-literals": "^7.24.1",
-        "@babel/plugin-transform-logical-assignment-operators": "^7.24.1",
-        "@babel/plugin-transform-member-expression-literals": "^7.24.1",
-        "@babel/plugin-transform-modules-amd": "^7.24.1",
-        "@babel/plugin-transform-modules-commonjs": "^7.24.1",
-        "@babel/plugin-transform-modules-systemjs": "^7.24.1",
-        "@babel/plugin-transform-modules-umd": "^7.24.1",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
-        "@babel/plugin-transform-new-target": "^7.24.1",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.1",
-        "@babel/plugin-transform-numeric-separator": "^7.24.1",
-        "@babel/plugin-transform-object-rest-spread": "^7.24.5",
-        "@babel/plugin-transform-object-super": "^7.24.1",
-        "@babel/plugin-transform-optional-catch-binding": "^7.24.1",
-        "@babel/plugin-transform-optional-chaining": "^7.24.5",
-        "@babel/plugin-transform-parameters": "^7.24.5",
-        "@babel/plugin-transform-private-methods": "^7.24.1",
-        "@babel/plugin-transform-private-property-in-object": "^7.24.5",
-        "@babel/plugin-transform-property-literals": "^7.24.1",
-        "@babel/plugin-transform-regenerator": "^7.24.1",
-        "@babel/plugin-transform-reserved-words": "^7.24.1",
-        "@babel/plugin-transform-shorthand-properties": "^7.24.1",
-        "@babel/plugin-transform-spread": "^7.24.1",
-        "@babel/plugin-transform-sticky-regex": "^7.24.1",
-        "@babel/plugin-transform-template-literals": "^7.24.1",
-        "@babel/plugin-transform-typeof-symbol": "^7.24.5",
-        "@babel/plugin-transform-unicode-escapes": "^7.24.1",
-        "@babel/plugin-transform-unicode-property-regex": "^7.24.1",
-        "@babel/plugin-transform-unicode-regex": "^7.24.1",
-        "@babel/plugin-transform-unicode-sets-regex": "^7.24.1",
+        "@babel/plugin-transform-arrow-functions": "^7.24.7",
+        "@babel/plugin-transform-async-generator-functions": "^7.25.4",
+        "@babel/plugin-transform-async-to-generator": "^7.24.7",
+        "@babel/plugin-transform-block-scoped-functions": "^7.24.7",
+        "@babel/plugin-transform-block-scoping": "^7.25.0",
+        "@babel/plugin-transform-class-properties": "^7.25.4",
+        "@babel/plugin-transform-class-static-block": "^7.24.7",
+        "@babel/plugin-transform-classes": "^7.25.4",
+        "@babel/plugin-transform-computed-properties": "^7.24.7",
+        "@babel/plugin-transform-destructuring": "^7.24.8",
+        "@babel/plugin-transform-dotall-regex": "^7.24.7",
+        "@babel/plugin-transform-duplicate-keys": "^7.24.7",
+        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.25.0",
+        "@babel/plugin-transform-dynamic-import": "^7.24.7",
+        "@babel/plugin-transform-exponentiation-operator": "^7.24.7",
+        "@babel/plugin-transform-export-namespace-from": "^7.24.7",
+        "@babel/plugin-transform-for-of": "^7.24.7",
+        "@babel/plugin-transform-function-name": "^7.25.1",
+        "@babel/plugin-transform-json-strings": "^7.24.7",
+        "@babel/plugin-transform-literals": "^7.25.2",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
+        "@babel/plugin-transform-member-expression-literals": "^7.24.7",
+        "@babel/plugin-transform-modules-amd": "^7.24.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.24.8",
+        "@babel/plugin-transform-modules-systemjs": "^7.25.0",
+        "@babel/plugin-transform-modules-umd": "^7.24.7",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7",
+        "@babel/plugin-transform-new-target": "^7.24.7",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
+        "@babel/plugin-transform-numeric-separator": "^7.24.7",
+        "@babel/plugin-transform-object-rest-spread": "^7.24.7",
+        "@babel/plugin-transform-object-super": "^7.24.7",
+        "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
+        "@babel/plugin-transform-optional-chaining": "^7.24.8",
+        "@babel/plugin-transform-parameters": "^7.24.7",
+        "@babel/plugin-transform-private-methods": "^7.25.4",
+        "@babel/plugin-transform-private-property-in-object": "^7.24.7",
+        "@babel/plugin-transform-property-literals": "^7.24.7",
+        "@babel/plugin-transform-regenerator": "^7.24.7",
+        "@babel/plugin-transform-reserved-words": "^7.24.7",
+        "@babel/plugin-transform-shorthand-properties": "^7.24.7",
+        "@babel/plugin-transform-spread": "^7.24.7",
+        "@babel/plugin-transform-sticky-regex": "^7.24.7",
+        "@babel/plugin-transform-template-literals": "^7.24.7",
+        "@babel/plugin-transform-typeof-symbol": "^7.24.8",
+        "@babel/plugin-transform-unicode-escapes": "^7.24.7",
+        "@babel/plugin-transform-unicode-property-regex": "^7.24.7",
+        "@babel/plugin-transform-unicode-regex": "^7.24.7",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.25.4",
         "@babel/preset-modules": "0.1.6-no-external-plugins",
         "babel-plugin-polyfill-corejs2": "^0.4.10",
-        "babel-plugin-polyfill-corejs3": "^0.10.4",
+        "babel-plugin-polyfill-corejs3": "^0.10.6",
         "babel-plugin-polyfill-regenerator": "^0.6.1",
-        "core-js-compat": "^3.31.0",
+        "core-js-compat": "^3.37.1",
         "semver": "^6.3.1"
       },
       "engines": {
@@ -2098,33 +2099,30 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
-      "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
+      "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.23.5",
-        "@babel/parser": "^7.24.0",
-        "@babel/types": "^7.24.0"
+        "@babel/code-frame": "^7.24.7",
+        "@babel/parser": "^7.25.0",
+        "@babel/types": "^7.25.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.5.tgz",
-      "integrity": "sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.24.2",
-        "@babel/generator": "^7.24.5",
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.24.5",
-        "@babel/parser": "^7.24.5",
-        "@babel/types": "^7.24.5",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.6.tgz",
+      "integrity": "sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.24.7",
+        "@babel/generator": "^7.25.6",
+        "@babel/parser": "^7.25.6",
+        "@babel/template": "^7.25.0",
+        "@babel/types": "^7.25.6",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -2133,13 +2131,13 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.5.tgz",
-      "integrity": "sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-string-parser": "^7.24.1",
-        "@babel/helper-validator-identifier": "^7.24.5",
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -2380,9 +2378,9 @@
       }
     },
     "node_modules/@lit-labs/ssr-dom-shim": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
-      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz",
+      "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ=="
     },
     "node_modules/@lit/reactive-element": {
       "version": "2.0.4",
@@ -2548,6 +2546,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.4.0"
+      }
+    },
     "node_modules/@npmcli/fs": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
@@ -2604,13 +2611,13 @@
       }
     },
     "node_modules/@open-wc/semantic-dom-diff": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.20.0.tgz",
-      "integrity": "sha512-qGHl3nkXluXsjpLY9bSZka/cnlrybPtJMs6RjmV/OP4ID7Gcz1uNWQks05pAhptDB1R47G6PQjdwxG8dXl1zGA==",
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.20.1.tgz",
+      "integrity": "sha512-mPF/RPT2TU7Dw41LEDdaeP6eyTOWBD4z0+AHP4/d0SbgcfJZVRymlIB6DQmtz0fd2CImIS9kszaMmwMt92HBPA==",
       "dev": true,
       "dependencies": {
         "@types/chai": "^4.3.1",
-        "@web/test-runner-commands": "^0.7.0"
+        "@web/test-runner-commands": "^0.9.0"
       }
     },
     "node_modules/@open-wc/testing": {
@@ -2651,19 +2658,19 @@
       }
     },
     "node_modules/@puppeteer/browsers": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.2.3.tgz",
-      "integrity": "sha512-bJ0UBsk0ESOs6RFcLXOt99a3yTDcOKlzfjad+rhFwdaG1Lu/Wzq58GHYCDTlZ9z6mldf4g+NTb+TXEfe0PpnsQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.4.0.tgz",
+      "integrity": "sha512-x8J1csfIygOwf6D6qUAZ0ASk3z63zPb7wkNeHRerCMh82qWKUrOgkuP005AJC8lDL6/evtXETGEJVcwykKT4/g==",
       "dev": true,
       "dependencies": {
-        "debug": "4.3.4",
-        "extract-zip": "2.0.1",
-        "progress": "2.0.3",
-        "proxy-agent": "6.4.0",
-        "semver": "7.6.0",
-        "tar-fs": "3.0.5",
-        "unbzip2-stream": "1.4.3",
-        "yargs": "17.7.2"
+        "debug": "^4.3.6",
+        "extract-zip": "^2.0.1",
+        "progress": "^2.0.3",
+        "proxy-agent": "^6.4.0",
+        "semver": "^7.6.3",
+        "tar-fs": "^3.0.6",
+        "unbzip2-stream": "^1.4.3",
+        "yargs": "^17.7.2"
       },
       "bin": {
         "browsers": "lib/cjs/main-cli.js"
@@ -2673,13 +2680,10 @@
       }
     },
     "node_modules/@puppeteer/browsers/node_modules/semver": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
       "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -2735,9 +2739,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz",
-      "integrity": "sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
+      "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==",
       "cpu": [
         "arm"
       ],
@@ -2748,9 +2752,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.6.tgz",
-      "integrity": "sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz",
+      "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==",
       "cpu": [
         "arm64"
       ],
@@ -2761,9 +2765,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.6.tgz",
-      "integrity": "sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz",
+      "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==",
       "cpu": [
         "arm64"
       ],
@@ -2774,9 +2778,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.6.tgz",
-      "integrity": "sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz",
+      "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==",
       "cpu": [
         "x64"
       ],
@@ -2787,9 +2791,22 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.6.tgz",
-      "integrity": "sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz",
+      "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz",
+      "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==",
       "cpu": [
         "arm"
       ],
@@ -2800,9 +2817,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.6.tgz",
-      "integrity": "sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz",
+      "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==",
       "cpu": [
         "arm64"
       ],
@@ -2813,9 +2830,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.6.tgz",
-      "integrity": "sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz",
+      "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==",
       "cpu": [
         "arm64"
       ],
@@ -2825,10 +2842,23 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz",
+      "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.6.tgz",
-      "integrity": "sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz",
+      "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==",
       "cpu": [
         "riscv64"
       ],
@@ -2838,10 +2868,23 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz",
+      "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.6.tgz",
-      "integrity": "sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz",
+      "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==",
       "cpu": [
         "x64"
       ],
@@ -2852,9 +2895,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.6.tgz",
-      "integrity": "sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz",
+      "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==",
       "cpu": [
         "x64"
       ],
@@ -2865,9 +2908,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.6.tgz",
-      "integrity": "sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz",
+      "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==",
       "cpu": [
         "arm64"
       ],
@@ -2878,9 +2921,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.6.tgz",
-      "integrity": "sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz",
+      "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==",
       "cpu": [
         "ia32"
       ],
@@ -2891,9 +2934,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.6.tgz",
-      "integrity": "sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz",
+      "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==",
       "cpu": [
         "x64"
       ],
@@ -2903,6 +2946,12 @@
         "win32"
       ]
     },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true
+    },
     "node_modules/@storybook/addon-a11y": {
       "version": "6.5.16",
       "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.16.tgz",
@@ -4094,9 +4143,9 @@
       }
     },
     "node_modules/@storybook/builder-webpack4/node_modules/webpack": {
-      "version": "4.46.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-      "integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
+      "version": "4.47.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.47.0.tgz",
+      "integrity": "sha512-td7fYwgLSrky3fI1EuU5cneU4+pbH6GgOfuKNS1tNPcfdGinGELAqsb/BP4nnvZyKSG2i/xFGU7+n2PvZA8HJQ==",
       "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.9.0",
@@ -4391,9 +4440,9 @@
       }
     },
     "node_modules/@storybook/builder-webpack4/node_modules/webpack/node_modules/terser-webpack-plugin": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+      "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
       "dev": true,
       "dependencies": {
         "cacache": "^12.0.2",
@@ -5540,9 +5589,9 @@
       }
     },
     "node_modules/@storybook/core-common/node_modules/terser-webpack-plugin": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+      "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
       "dev": true,
       "dependencies": {
         "cacache": "^12.0.2",
@@ -5698,9 +5747,9 @@
       }
     },
     "node_modules/@storybook/core-common/node_modules/webpack": {
-      "version": "4.46.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-      "integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
+      "version": "4.47.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.47.0.tgz",
+      "integrity": "sha512-td7fYwgLSrky3fI1EuU5cneU4+pbH6GgOfuKNS1tNPcfdGinGELAqsb/BP4nnvZyKSG2i/xFGU7+n2PvZA8HJQ==",
       "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.9.0",
@@ -6447,9 +6496,9 @@
       }
     },
     "node_modules/@storybook/core-server/node_modules/terser-webpack-plugin": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+      "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
       "dev": true,
       "dependencies": {
         "cacache": "^12.0.2",
@@ -6483,9 +6532,9 @@
       }
     },
     "node_modules/@storybook/core-server/node_modules/webpack": {
-      "version": "4.46.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-      "integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
+      "version": "4.47.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.47.0.tgz",
+      "integrity": "sha512-td7fYwgLSrky3fI1EuU5cneU4+pbH6GgOfuKNS1tNPcfdGinGELAqsb/BP4nnvZyKSG2i/xFGU7+n2PvZA8HJQ==",
       "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.9.0",
@@ -7583,9 +7632,9 @@
       }
     },
     "node_modules/@storybook/manager-webpack4/node_modules/webpack": {
-      "version": "4.46.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-      "integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
+      "version": "4.47.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.47.0.tgz",
+      "integrity": "sha512-td7fYwgLSrky3fI1EuU5cneU4+pbH6GgOfuKNS1tNPcfdGinGELAqsb/BP4nnvZyKSG2i/xFGU7+n2PvZA8HJQ==",
       "dev": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.9.0",
@@ -7868,9 +7917,9 @@
       }
     },
     "node_modules/@storybook/manager-webpack4/node_modules/webpack/node_modules/terser-webpack-plugin": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+      "version": "1.4.6",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+      "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
       "dev": true,
       "dependencies": {
         "cacache": "^12.0.2",
@@ -8786,21 +8835,13 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.5.tgz",
       "integrity": "sha512-dhsC09y1gpJWnK+Ff4SGvCuSnk9DaU0BJZSzOwa6GVSg65XtTugLBITDAAzRU5duGBoXBHpdR/9jHGxJjNflJQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
       }
     },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
-      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
-      "dev": true,
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -8968,9 +9009,9 @@
       "dev": true
     },
     "node_modules/@types/mocha": {
-      "version": "10.0.6",
-      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-10.0.6.tgz",
-      "integrity": "sha512-dJvrYWxP/UcXm36Qn36fxhUKu8A/xMRXVT2cliFF1Z7UA9liG5Psj3ezNSZw+5puH2czDXRLcXQxf8JbJt0ejg==",
+      "version": "10.0.8",
+      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-10.0.8.tgz",
+      "integrity": "sha512-HfMcUmy9hTMJh66VNcmeC9iVErIZJli2bszuXc6julh5YGuRb/W5OnkHjwLNYdFlMis0sY3If5SEAp+PktdJjw==",
       "dev": true
     },
     "node_modules/@types/node": {
@@ -9111,9 +9152,9 @@
       "dev": true
     },
     "node_modules/@types/uuid": {
-      "version": "9.0.8",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
-      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
       "dev": true
     },
     "node_modules/@types/webpack": {
@@ -9432,15 +9473,15 @@
       "dev": true
     },
     "node_modules/@web/browser-logs": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.3.2.tgz",
-      "integrity": "sha512-4kYoH4XBpOnrYAzlG3M9fy3kj7jhUgOLXsBcdC5n4oALYzgX57mt2MeJT4LkdgLWbCGRl1K8KaZhOKgH4RktxQ==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz",
+      "integrity": "sha512-/EBiDAUCJ2DzZhaFxTPRIznEPeafdLbXShIL6aTu7x73x7ZoxSDv7DGuTsh2rWNMUa4+AKli4UORrpyv6QBOiA==",
       "dev": true,
       "dependencies": {
         "errorstacks": "^2.2.0"
       },
       "engines": {
-        "node": ">=16.0.0"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/@web/config-loader": {
@@ -9453,22 +9494,22 @@
       }
     },
     "node_modules/@web/dev-server": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@web/dev-server/-/dev-server-0.4.1.tgz",
-      "integrity": "sha512-GHeyH8MBZQpODFiHiXAdX4hOVbeDyD/DUermUinh/nexWAZUcXyXa200RItuAL6b25MQ3D/5hKNDypujSvXxiw==",
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/@web/dev-server/-/dev-server-0.4.6.tgz",
+      "integrity": "sha512-jj/1bcElAy5EZet8m2CcUdzxT+CRvUjIXGh8Lt7vxtthkN9PzY9wlhWx/9WOs5iwlnG1oj0VGo6f/zvbPO0s9w==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.12.11",
         "@types/command-line-args": "^5.0.0",
         "@web/config-loader": "^0.3.0",
-        "@web/dev-server-core": "^0.7.0",
+        "@web/dev-server-core": "^0.7.2",
         "@web/dev-server-rollup": "^0.6.1",
         "camelcase": "^6.2.0",
         "command-line-args": "^5.1.1",
         "command-line-usage": "^7.0.1",
         "debounce": "^1.2.0",
         "deepmerge": "^4.2.2",
-        "ip": "^1.1.5",
+        "internal-ip": "^6.2.0",
         "nanocolors": "^0.2.1",
         "open": "^8.0.2",
         "portfinder": "^1.0.32"
@@ -9482,14 +9523,14 @@
       }
     },
     "node_modules/@web/dev-server-core": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.5.1.tgz",
-      "integrity": "sha512-pXgb4bjDmPIaIQT9luixTSqTvRQxttUEzSKOZqLNl6pVgrl4n47ZtmZte936G2tM7nHmpT+oaMDDtCM0CgbQNQ==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.2.tgz",
+      "integrity": "sha512-Q/0jpF13Ipk+qGGQ+Yx/FW1TQBYazpkfgYHHo96HBE7qv4V4KKHqHglZcSUxti/zd4bToxX1cFTz8dmbTlb8JA==",
       "dev": true,
       "dependencies": {
         "@types/koa": "^2.11.6",
         "@types/ws": "^7.4.0",
-        "@web/parse5-utils": "^2.0.0",
+        "@web/parse5-utils": "^2.1.0",
         "chokidar": "^3.4.3",
         "clone": "^2.1.2",
         "es-module-lexer": "^1.0.0",
@@ -9507,7 +9548,7 @@
         "ws": "^7.4.2"
       },
       "engines": {
-        "node": ">=16.0.0"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/@web/dev-server-core/node_modules/lru-cache": {
@@ -9520,9 +9561,9 @@
       }
     },
     "node_modules/@web/dev-server-core/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+      "version": "7.5.10",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+      "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
       "dev": true,
       "engines": {
         "node": ">=8.3.0"
@@ -9557,130 +9598,6 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/@web/dev-server-rollup/node_modules/@web/dev-server-core": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.0.tgz",
-      "integrity": "sha512-1FJe6cJ3r0x0ZmxY/FnXVduQD4lKX7QgYhyS6N+VmIpV+tBU4sGRbcrmeoYeY+nlnPa6p2oNuonk3X5ln/W95g==",
-      "dev": true,
-      "dependencies": {
-        "@types/koa": "^2.11.6",
-        "@types/ws": "^7.4.0",
-        "@web/parse5-utils": "^2.1.0",
-        "chokidar": "^3.4.3",
-        "clone": "^2.1.2",
-        "es-module-lexer": "^1.0.0",
-        "get-stream": "^6.0.0",
-        "is-stream": "^2.0.0",
-        "isbinaryfile": "^5.0.0",
-        "koa": "^2.13.0",
-        "koa-etag": "^4.0.0",
-        "koa-send": "^5.0.1",
-        "koa-static": "^5.0.0",
-        "lru-cache": "^8.0.4",
-        "mime-types": "^2.1.27",
-        "parse5": "^6.0.1",
-        "picomatch": "^2.2.2",
-        "ws": "^7.4.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@web/dev-server-rollup/node_modules/lru-cache": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
-      "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
-      "dev": true,
-      "engines": {
-        "node": ">=16.14"
-      }
-    },
-    "node_modules/@web/dev-server-rollup/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.3.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@web/dev-server/node_modules/@web/dev-server-core": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.0.tgz",
-      "integrity": "sha512-1FJe6cJ3r0x0ZmxY/FnXVduQD4lKX7QgYhyS6N+VmIpV+tBU4sGRbcrmeoYeY+nlnPa6p2oNuonk3X5ln/W95g==",
-      "dev": true,
-      "dependencies": {
-        "@types/koa": "^2.11.6",
-        "@types/ws": "^7.4.0",
-        "@web/parse5-utils": "^2.1.0",
-        "chokidar": "^3.4.3",
-        "clone": "^2.1.2",
-        "es-module-lexer": "^1.0.0",
-        "get-stream": "^6.0.0",
-        "is-stream": "^2.0.0",
-        "isbinaryfile": "^5.0.0",
-        "koa": "^2.13.0",
-        "koa-etag": "^4.0.0",
-        "koa-send": "^5.0.1",
-        "koa-static": "^5.0.0",
-        "lru-cache": "^8.0.4",
-        "mime-types": "^2.1.27",
-        "parse5": "^6.0.1",
-        "picomatch": "^2.2.2",
-        "ws": "^7.4.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@web/dev-server/node_modules/ip": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
-      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
-      "dev": true
-    },
-    "node_modules/@web/dev-server/node_modules/lru-cache": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
-      "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
-      "dev": true,
-      "engines": {
-        "node": ">=16.14"
-      }
-    },
-    "node_modules/@web/dev-server/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.3.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@web/parse5-utils": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@web/parse5-utils/-/parse5-utils-2.1.0.tgz",
@@ -9695,15 +9612,15 @@
       }
     },
     "node_modules/@web/test-runner": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/@web/test-runner/-/test-runner-0.18.1.tgz",
-      "integrity": "sha512-jB/9vrpGVtcLY6/7sPpKpSheQ3wWY9P5aQcz2SK2gMHTq3gNpa51NAyec0Al7EFpHvJ1wKYTGRLB2gPyEoJeDg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@web/test-runner/-/test-runner-0.19.0.tgz",
+      "integrity": "sha512-qLUupi88OK1Kl52cWPD/2JewUCRUxYsZ1V1DyLd05P7u09zCdrUYrtkB/cViWyxlBe/TOvqkSNpcTv6zLJ9GoA==",
       "dev": true,
       "dependencies": {
         "@web/browser-logs": "^0.4.0",
         "@web/config-loader": "^0.3.0",
         "@web/dev-server": "^0.4.0",
-        "@web/test-runner-chrome": "^0.16.0",
+        "@web/test-runner-chrome": "^0.17.0",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-core": "^0.13.0",
         "@web/test-runner-mocha": "^0.9.0",
@@ -9726,66 +9643,38 @@
       }
     },
     "node_modules/@web/test-runner-chrome": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-chrome/-/test-runner-chrome-0.16.0.tgz",
-      "integrity": "sha512-Edc6Y49aVB6k18S5IOj9OCX3rEf8F3jptIu0p95+imqxmcutFEh1GNmlAk2bQGnXS0U6uVY7Xbf61fiaXUQqhg==",
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-chrome/-/test-runner-chrome-0.17.0.tgz",
+      "integrity": "sha512-Il5N9z41NKWCrQM1TVgRaDWWYoJtG5Ha4fG+cN1MWL2OlzBS4WoOb4lFV3EylZ7+W3twZOFr1zy2Rx61yDYd/A==",
       "dev": true,
       "dependencies": {
         "@web/test-runner-core": "^0.13.0",
         "@web/test-runner-coverage-v8": "^0.8.0",
         "async-mutex": "0.4.0",
         "chrome-launcher": "^0.15.0",
-        "puppeteer-core": "^22.0.0"
+        "puppeteer-core": "^23.2.0"
       },
       "engines": {
         "node": ">=18.0.0"
       }
     },
-    "node_modules/@web/test-runner-chrome/node_modules/@web/browser-logs": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz",
-      "integrity": "sha512-/EBiDAUCJ2DzZhaFxTPRIznEPeafdLbXShIL6aTu7x73x7ZoxSDv7DGuTsh2rWNMUa4+AKli4UORrpyv6QBOiA==",
-      "dev": true,
-      "dependencies": {
-        "errorstacks": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@web/test-runner-chrome/node_modules/@web/dev-server-core": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.1.tgz",
-      "integrity": "sha512-alHd2j0f4e1ekqYDR8lWScrzR7D5gfsUZq3BP3De9bkFWM3AELINCmqqlVKmCtlkAdEc9VyQvNiEqrxraOdc2A==",
+    "node_modules/@web/test-runner-commands": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-commands/-/test-runner-commands-0.9.0.tgz",
+      "integrity": "sha512-zeLI6QdH0jzzJMDV5O42Pd8WLJtYqovgdt0JdytgHc0d1EpzXDsc7NTCJSImboc2NcayIsWAvvGGeRF69SMMYg==",
       "dev": true,
       "dependencies": {
-        "@types/koa": "^2.11.6",
-        "@types/ws": "^7.4.0",
-        "@web/parse5-utils": "^2.1.0",
-        "chokidar": "^3.4.3",
-        "clone": "^2.1.2",
-        "es-module-lexer": "^1.0.0",
-        "get-stream": "^6.0.0",
-        "is-stream": "^2.0.0",
-        "isbinaryfile": "^5.0.0",
-        "koa": "^2.13.0",
-        "koa-etag": "^4.0.0",
-        "koa-send": "^5.0.1",
-        "koa-static": "^5.0.0",
-        "lru-cache": "^8.0.4",
-        "mime-types": "^2.1.27",
-        "parse5": "^6.0.1",
-        "picomatch": "^2.2.2",
-        "ws": "^7.4.2"
+        "@web/test-runner-core": "^0.13.0",
+        "mkdirp": "^1.0.4"
       },
       "engines": {
         "node": ">=18.0.0"
       }
     },
-    "node_modules/@web/test-runner-chrome/node_modules/@web/test-runner-core": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.13.1.tgz",
-      "integrity": "sha512-2hESALx/UFsAzK+ApWXAkFp2eCmwcs2yj1v4YjwV8F38sQumJ40P3px3BMjFwkOYDORtQOicW0RUeSw1g3BMLA==",
+    "node_modules/@web/test-runner-core": {
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.13.3.tgz",
+      "integrity": "sha512-ilDqF/v2sj0sD69FNSIDT7uw4M1yTVedLBt32/lXy3MMi6suCM7m/ZlhsBy8PXhf879WMvzBOl/vhJBpEMB9vA==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.12.11",
@@ -9796,7 +9685,7 @@
         "@types/istanbul-lib-coverage": "^2.0.3",
         "@types/istanbul-reports": "^3.0.0",
         "@web/browser-logs": "^0.4.0",
-        "@web/dev-server-core": "^0.7.0",
+        "@web/dev-server-core": "^0.7.2",
         "chokidar": "^3.4.3",
         "cli-cursor": "^3.1.0",
         "co-body": "^6.1.0",
@@ -9804,7 +9693,7 @@
         "debounce": "^1.2.0",
         "dependency-graph": "^0.11.0",
         "globby": "^11.0.1",
-        "ip": "^2.0.1",
+        "internal-ip": "^6.2.0",
         "istanbul-lib-coverage": "^3.0.0",
         "istanbul-lib-report": "^3.0.1",
         "istanbul-reports": "^3.0.2",
@@ -9819,113 +9708,12 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/@web/test-runner-chrome/node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true
-    },
-    "node_modules/@web/test-runner-chrome/node_modules/lru-cache": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
-      "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
-      "dev": true,
-      "engines": {
-        "node": ">=16.14"
-      }
-    },
-    "node_modules/@web/test-runner-chrome/node_modules/source-map": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@web/test-runner-chrome/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.3.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@web/test-runner-commands": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-commands/-/test-runner-commands-0.7.0.tgz",
-      "integrity": "sha512-3aXeGrkynOdJ5jgZu5ZslcWmWuPVY9/HNdWDUqPyNePG08PKmLV9Ij342ODDL6OVsxF5dvYn1312PhDqu5AQNw==",
-      "dev": true,
-      "dependencies": {
-        "@web/test-runner-core": "^0.11.0",
-        "mkdirp": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=16.0.0"
-      }
-    },
-    "node_modules/@web/test-runner-core": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.11.2.tgz",
-      "integrity": "sha512-7padi7pGg2xSW/i6iSApUwxlNaHv2bFBM+MiivkzJ0vet/a/+Fz35bOo8L8Ra7b/1my4VYBsPcWX0PVPowbXRg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.12.11",
-        "@types/babel__code-frame": "^7.0.2",
-        "@types/co-body": "^6.1.0",
-        "@types/convert-source-map": "^2.0.0",
-        "@types/debounce": "^1.2.0",
-        "@types/istanbul-lib-coverage": "^2.0.3",
-        "@types/istanbul-reports": "^3.0.0",
-        "@web/browser-logs": "^0.3.2",
-        "@web/dev-server-core": "^0.5.1",
-        "chokidar": "^3.4.3",
-        "cli-cursor": "^3.1.0",
-        "co-body": "^6.1.0",
-        "convert-source-map": "^2.0.0",
-        "debounce": "^1.2.0",
-        "dependency-graph": "^0.11.0",
-        "globby": "^11.0.1",
-        "ip": "^1.1.5",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-reports": "^3.0.2",
-        "log-update": "^4.0.0",
-        "nanocolors": "^0.2.1",
-        "nanoid": "^3.1.25",
-        "open": "^8.0.2",
-        "picomatch": "^2.2.2",
-        "source-map": "^0.7.3"
-      },
-      "engines": {
-        "node": ">=16.0.0"
-      }
-    },
     "node_modules/@web/test-runner-core/node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
-    "node_modules/@web/test-runner-core/node_modules/ip": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
-      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
-      "dev": true
-    },
     "node_modules/@web/test-runner-core/node_modules/source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -9951,90 +9739,6 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/@web/test-runner-coverage-v8/node_modules/@web/browser-logs": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz",
-      "integrity": "sha512-/EBiDAUCJ2DzZhaFxTPRIznEPeafdLbXShIL6aTu7x73x7ZoxSDv7DGuTsh2rWNMUa4+AKli4UORrpyv6QBOiA==",
-      "dev": true,
-      "dependencies": {
-        "errorstacks": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@web/test-runner-coverage-v8/node_modules/@web/dev-server-core": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.1.tgz",
-      "integrity": "sha512-alHd2j0f4e1ekqYDR8lWScrzR7D5gfsUZq3BP3De9bkFWM3AELINCmqqlVKmCtlkAdEc9VyQvNiEqrxraOdc2A==",
-      "dev": true,
-      "dependencies": {
-        "@types/koa": "^2.11.6",
-        "@types/ws": "^7.4.0",
-        "@web/parse5-utils": "^2.1.0",
-        "chokidar": "^3.4.3",
-        "clone": "^2.1.2",
-        "es-module-lexer": "^1.0.0",
-        "get-stream": "^6.0.0",
-        "is-stream": "^2.0.0",
-        "isbinaryfile": "^5.0.0",
-        "koa": "^2.13.0",
-        "koa-etag": "^4.0.0",
-        "koa-send": "^5.0.1",
-        "koa-static": "^5.0.0",
-        "lru-cache": "^8.0.4",
-        "mime-types": "^2.1.27",
-        "parse5": "^6.0.1",
-        "picomatch": "^2.2.2",
-        "ws": "^7.4.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@web/test-runner-coverage-v8/node_modules/@web/test-runner-core": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.13.1.tgz",
-      "integrity": "sha512-2hESALx/UFsAzK+ApWXAkFp2eCmwcs2yj1v4YjwV8F38sQumJ40P3px3BMjFwkOYDORtQOicW0RUeSw1g3BMLA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.12.11",
-        "@types/babel__code-frame": "^7.0.2",
-        "@types/co-body": "^6.1.0",
-        "@types/convert-source-map": "^2.0.0",
-        "@types/debounce": "^1.2.0",
-        "@types/istanbul-lib-coverage": "^2.0.3",
-        "@types/istanbul-reports": "^3.0.0",
-        "@web/browser-logs": "^0.4.0",
-        "@web/dev-server-core": "^0.7.0",
-        "chokidar": "^3.4.3",
-        "cli-cursor": "^3.1.0",
-        "co-body": "^6.1.0",
-        "convert-source-map": "^2.0.0",
-        "debounce": "^1.2.0",
-        "dependency-graph": "^0.11.0",
-        "globby": "^11.0.1",
-        "ip": "^2.0.1",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-report": "^3.0.1",
-        "istanbul-reports": "^3.0.2",
-        "log-update": "^4.0.0",
-        "nanocolors": "^0.2.1",
-        "nanoid": "^3.1.25",
-        "open": "^8.0.2",
-        "picomatch": "^2.2.2",
-        "source-map": "^0.7.3"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@web/test-runner-coverage-v8/node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true
-    },
     "node_modules/@web/test-runner-coverage-v8/node_modules/lru-cache": {
       "version": "8.0.5",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
@@ -10044,36 +9748,6 @@
         "node": ">=16.14"
       }
     },
-    "node_modules/@web/test-runner-coverage-v8/node_modules/source-map": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@web/test-runner-coverage-v8/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.3.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@web/test-runner-mocha": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@web/test-runner-mocha/-/test-runner-mocha-0.9.0.tgz",
@@ -10086,226 +9760,6 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/@web/test-runner-mocha/node_modules/@web/browser-logs": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz",
-      "integrity": "sha512-/EBiDAUCJ2DzZhaFxTPRIznEPeafdLbXShIL6aTu7x73x7ZoxSDv7DGuTsh2rWNMUa4+AKli4UORrpyv6QBOiA==",
-      "dev": true,
-      "dependencies": {
-        "errorstacks": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@web/test-runner-mocha/node_modules/@web/dev-server-core": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.0.tgz",
-      "integrity": "sha512-1FJe6cJ3r0x0ZmxY/FnXVduQD4lKX7QgYhyS6N+VmIpV+tBU4sGRbcrmeoYeY+nlnPa6p2oNuonk3X5ln/W95g==",
-      "dev": true,
-      "dependencies": {
-        "@types/koa": "^2.11.6",
-        "@types/ws": "^7.4.0",
-        "@web/parse5-utils": "^2.1.0",
-        "chokidar": "^3.4.3",
-        "clone": "^2.1.2",
-        "es-module-lexer": "^1.0.0",
-        "get-stream": "^6.0.0",
-        "is-stream": "^2.0.0",
-        "isbinaryfile": "^5.0.0",
-        "koa": "^2.13.0",
-        "koa-etag": "^4.0.0",
-        "koa-send": "^5.0.1",
-        "koa-static": "^5.0.0",
-        "lru-cache": "^8.0.4",
-        "mime-types": "^2.1.27",
-        "parse5": "^6.0.1",
-        "picomatch": "^2.2.2",
-        "ws": "^7.4.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@web/test-runner-mocha/node_modules/@web/test-runner-core": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.13.0.tgz",
-      "integrity": "sha512-mUrETPg9n4dHWEk+D46BU3xVhQf+ljT4cG7FSpmF7AIOsXWgWHoaXp6ReeVcEmM5fmznXec2O/apTb9hpGrP3w==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.12.11",
-        "@types/babel__code-frame": "^7.0.2",
-        "@types/co-body": "^6.1.0",
-        "@types/convert-source-map": "^2.0.0",
-        "@types/debounce": "^1.2.0",
-        "@types/istanbul-lib-coverage": "^2.0.3",
-        "@types/istanbul-reports": "^3.0.0",
-        "@web/browser-logs": "^0.4.0",
-        "@web/dev-server-core": "^0.7.0",
-        "chokidar": "^3.4.3",
-        "cli-cursor": "^3.1.0",
-        "co-body": "^6.1.0",
-        "convert-source-map": "^2.0.0",
-        "debounce": "^1.2.0",
-        "dependency-graph": "^0.11.0",
-        "globby": "^11.0.1",
-        "ip": "^1.1.5",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-report": "^3.0.1",
-        "istanbul-reports": "^3.0.2",
-        "log-update": "^4.0.0",
-        "nanocolors": "^0.2.1",
-        "nanoid": "^3.1.25",
-        "open": "^8.0.2",
-        "picomatch": "^2.2.2",
-        "source-map": "^0.7.3"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@web/test-runner-mocha/node_modules/convert-source-map": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-      "dev": true
-    },
-    "node_modules/@web/test-runner-mocha/node_modules/ip": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
-      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
-      "dev": true
-    },
-    "node_modules/@web/test-runner-mocha/node_modules/lru-cache": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
-      "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
-      "dev": true,
-      "engines": {
-        "node": ">=16.14"
-      }
-    },
-    "node_modules/@web/test-runner-mocha/node_modules/source-map": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@web/test-runner-mocha/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.3.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@web/test-runner/node_modules/@web/browser-logs": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz",
-      "integrity": "sha512-/EBiDAUCJ2DzZhaFxTPRIznEPeafdLbXShIL6aTu7x73x7ZoxSDv7DGuTsh2rWNMUa4+AKli4UORrpyv6QBOiA==",
-      "dev": true,
-      "dependencies": {
-        "errorstacks": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@web/test-runner/node_modules/@web/dev-server-core": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.0.tgz",
-      "integrity": "sha512-1FJe6cJ3r0x0ZmxY/FnXVduQD4lKX7QgYhyS6N+VmIpV+tBU4sGRbcrmeoYeY+nlnPa6p2oNuonk3X5ln/W95g==",
-      "dev": true,
-      "dependencies": {
-        "@types/koa": "^2.11.6",
-        "@types/ws": "^7.4.0",
-        "@web/parse5-utils": "^2.1.0",
-        "chokidar": "^3.4.3",
-        "clone": "^2.1.2",
-        "es-module-lexer": "^1.0.0",
-        "get-stream": "^6.0.0",
-        "is-stream": "^2.0.0",
-        "isbinaryfile": "^5.0.0",
-        "koa": "^2.13.0",
-        "koa-etag": "^4.0.0",
-        "koa-send": "^5.0.1",
-        "koa-static": "^5.0.0",
-        "lru-cache": "^8.0.4",
-        "mime-types": "^2.1.27",
-        "parse5": "^6.0.1",
-        "picomatch": "^2.2.2",
-        "ws": "^7.4.2"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@web/test-runner/node_modules/@web/test-runner-commands": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-commands/-/test-runner-commands-0.9.0.tgz",
-      "integrity": "sha512-zeLI6QdH0jzzJMDV5O42Pd8WLJtYqovgdt0JdytgHc0d1EpzXDsc7NTCJSImboc2NcayIsWAvvGGeRF69SMMYg==",
-      "dev": true,
-      "dependencies": {
-        "@web/test-runner-core": "^0.13.0",
-        "mkdirp": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
-    "node_modules/@web/test-runner/node_modules/@web/test-runner-core": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.13.0.tgz",
-      "integrity": "sha512-mUrETPg9n4dHWEk+D46BU3xVhQf+ljT4cG7FSpmF7AIOsXWgWHoaXp6ReeVcEmM5fmznXec2O/apTb9hpGrP3w==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.12.11",
-        "@types/babel__code-frame": "^7.0.2",
-        "@types/co-body": "^6.1.0",
-        "@types/convert-source-map": "^2.0.0",
-        "@types/debounce": "^1.2.0",
-        "@types/istanbul-lib-coverage": "^2.0.3",
-        "@types/istanbul-reports": "^3.0.0",
-        "@web/browser-logs": "^0.4.0",
-        "@web/dev-server-core": "^0.7.0",
-        "chokidar": "^3.4.3",
-        "cli-cursor": "^3.1.0",
-        "co-body": "^6.1.0",
-        "convert-source-map": "^2.0.0",
-        "debounce": "^1.2.0",
-        "dependency-graph": "^0.11.0",
-        "globby": "^11.0.1",
-        "ip": "^1.1.5",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-report": "^3.0.1",
-        "istanbul-reports": "^3.0.2",
-        "log-update": "^4.0.0",
-        "nanocolors": "^0.2.1",
-        "nanoid": "^3.1.25",
-        "open": "^8.0.2",
-        "picomatch": "^2.2.2",
-        "source-map": "^0.7.3"
-      },
-      "engines": {
-        "node": ">=18.0.0"
-      }
-    },
     "node_modules/@web/test-runner/node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -10321,21 +9775,6 @@
         "node": ">=0.3.1"
       }
     },
-    "node_modules/@web/test-runner/node_modules/ip": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
-      "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
-      "dev": true
-    },
-    "node_modules/@web/test-runner/node_modules/lru-cache": {
-      "version": "8.0.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
-      "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
-      "dev": true,
-      "engines": {
-        "node": ">=16.14"
-      }
-    },
     "node_modules/@web/test-runner/node_modules/source-map": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -10345,27 +9784,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@web/test-runner/node_modules/ws": {
-      "version": "7.5.9",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-      "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.3.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": "^5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@webassemblyjs/ast": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -10710,10 +10128,10 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "dev": true,
       "peerDependencies": {
         "acorn": "^8"
@@ -11075,15 +10493,16 @@
       "dev": true
     },
     "node_modules/array-includes": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
-      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
         "is-string": "^1.0.7"
       },
       "engines": {
@@ -11141,16 +10560,17 @@
       }
     },
     "node_modules/array.prototype.findlastindex": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz",
-      "integrity": "sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
+      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -11488,9 +10908,9 @@
       "dev": true
     },
     "node_modules/babel-loader": {
-      "version": "9.1.3",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.3.tgz",
-      "integrity": "sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==",
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.2.1.tgz",
+      "integrity": "sha512-fqe8naHt46e0yIdkjUZYqddSXfej3AHajX+CSO5X7oy0EmPc6o5Xh+RClNoHjnieWz9AW4kZxW9yyFMhVB1QLA==",
       "dev": true,
       "dependencies": {
         "find-cache-dir": "^4.0.0",
@@ -11764,13 +11184,13 @@
       }
     },
     "node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.4.tgz",
-      "integrity": "sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==",
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
+      "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.6.1",
-        "core-js-compat": "^3.36.1"
+        "@babel/helper-define-polyfill-provider": "^0.6.2",
+        "core-js-compat": "^3.38.0"
       },
       "peerDependencies": {
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
@@ -11805,35 +11225,35 @@
       "dev": true
     },
     "node_modules/bare-events": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.2.2.tgz",
-      "integrity": "sha512-h7z00dWdG0PYOQEvChhOSWvOfkIKsdZGkWr083FgN/HyoQuebSew/cgirYqh9SCuy/hRvxc5Vy6Fw8xAmYHLkQ==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.4.2.tgz",
+      "integrity": "sha512-qMKFd2qG/36aA4GwvKq8MxnPgCQAmBWmSyLWsJcbn8v03wvIPQ/hG1Ms8bPzndZxMDoHpxez5VOS+gC9Yi24/Q==",
       "dev": true,
       "optional": true
     },
     "node_modules/bare-fs": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.0.tgz",
-      "integrity": "sha512-TNFqa1B4N99pds2a5NYHR15o0ZpdNKbAeKTE/+G6ED/UeOavv8RY3dr/Fu99HW3zU3pXpo2kDNO8Sjsm2esfOw==",
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.5.tgz",
+      "integrity": "sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==",
       "dev": true,
       "optional": true,
       "dependencies": {
         "bare-events": "^2.0.0",
         "bare-path": "^2.0.0",
-        "bare-stream": "^1.0.0"
+        "bare-stream": "^2.0.0"
       }
     },
     "node_modules/bare-os": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.3.0.tgz",
-      "integrity": "sha512-oPb8oMM1xZbhRQBngTgpcQ5gXw6kjOaRsSWsIeNyRxGed2w/ARyP7ScBYpWR1qfX2E5rS3gBw6OWcSQo+s+kUg==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.4.4.tgz",
+      "integrity": "sha512-z3UiI2yi1mK0sXeRdc4O1Kk8aOa/e+FNWZcTiPB/dfTWyLypuE99LibgRaQki914Jq//yAWylcAt+mknKdixRQ==",
       "dev": true,
       "optional": true
     },
     "node_modules/bare-path": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.2.tgz",
-      "integrity": "sha512-o7KSt4prEphWUHa3QUwCxUI00R86VdjiuxmJK0iNVDHYPGo+HsDaVCnqCmPbf/MiW1ok8F4p3m8RTHlWk8K2ig==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.3.tgz",
+      "integrity": "sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==",
       "dev": true,
       "optional": true,
       "dependencies": {
@@ -11841,13 +11261,14 @@
       }
     },
     "node_modules/bare-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-1.0.0.tgz",
-      "integrity": "sha512-KhNUoDL40iP4gFaLSsoGE479t0jHijfYdIcxRn/XtezA2BaUD0NRf/JGRpsMq6dMNM+SrCrB0YSSo/5wBY4rOQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.3.0.tgz",
+      "integrity": "sha512-pVRWciewGUeCyKEuRxwv06M079r+fRjAQjBEK2P6OYGrO43O+Z0LrPZZEjlc4mB6C2RpZ9AxJ1s7NLEtOHO6eA==",
       "dev": true,
       "optional": true,
       "dependencies": {
-        "streamx": "^2.16.1"
+        "b4a": "^1.6.6",
+        "streamx": "^2.20.0"
       }
     },
     "node_modules/base": {
@@ -11994,9 +11415,9 @@
       "dev": true
     },
     "node_modules/body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "dev": true,
       "dependencies": {
         "bytes": "3.1.2",
@@ -12007,7 +11428,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -12160,12 +11581,12 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -12280,9 +11701,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
       "dev": true,
       "funding": [
         {
@@ -12299,10 +11720,10 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.668",
-        "node-releases": "^2.0.14",
-        "update-browserslist-db": "^1.0.13"
+        "caniuse-lite": "^1.0.30001646",
+        "electron-to-chromium": "^1.5.4",
+        "node-releases": "^2.0.18",
+        "update-browserslist-db": "^1.1.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -12543,9 +11964,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001616",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
-      "integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
+      "version": "1.0.30001663",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz",
+      "integrity": "sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==",
       "dev": true,
       "funding": [
         {
@@ -12756,9 +12177,9 @@
       }
     },
     "node_modules/chromatic": {
-      "version": "11.3.2",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.3.2.tgz",
-      "integrity": "sha512-0PuHl49VvBMoDHEfmNjC/bim9YYNhWF3axTZlFuatC0avwr2Xw4GDqJDG9fArEWN8oM8VtYHkE9D7qc87dmz2w==",
+      "version": "11.10.4",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.10.4.tgz",
+      "integrity": "sha512-nfgDpW5gQ4FtgV1lZXXfqLjONKDCh2K4vwI3dbZrtU1ObOL9THyAzpIdnK9LRcNSeisDLX+XFCryfMg1Ql2U2g==",
       "dev": true,
       "bin": {
         "chroma": "dist/bin.js",
@@ -12818,14 +12239,14 @@
       }
     },
     "node_modules/chromium-bidi": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.5.19.tgz",
-      "integrity": "sha512-UA6zL77b7RYCjJkZBsZ0wlvCTD+jTjllZ8f6wdO4buevXgTZYjV+XLB9CiEa2OuuTGGTLnI7eN9I60YxuALGQg==",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.6.5.tgz",
+      "integrity": "sha512-RuLrmzYrxSb0s9SgpB+QN5jJucPduZQ/9SIe76MDxYJuecPW5mxMdacJ1f4EtgiV+R0p3sCkznTMvH0MPGFqjA==",
       "dev": true,
       "dependencies": {
         "mitt": "3.0.1",
         "urlpattern-polyfill": "10.0.0",
-        "zod": "3.22.4"
+        "zod": "3.23.8"
       },
       "peerDependencies": {
         "devtools-protocol": "*"
@@ -13460,9 +12881,9 @@
       }
     },
     "node_modules/core-js": {
-      "version": "3.37.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.0.tgz",
-      "integrity": "sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug==",
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==",
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -13470,12 +12891,12 @@
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.37.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.0.tgz",
-      "integrity": "sha512-vYq4L+T8aS5UuFg4UwDhc7YNRWVeVZwltad9C/jV3R2LgVOpS9BDr7l/WL6BN0dbV3k1XejPTHqqEzJgsa0frA==",
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
+      "integrity": "sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==",
       "dev": true,
       "dependencies": {
-        "browserslist": "^4.23.0"
+        "browserslist": "^4.23.3"
       },
       "funding": {
         "type": "opencollective",
@@ -14200,12 +13621,12 @@
       "dev": true
     },
     "node_modules/debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dev": true,
       "dependencies": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
       },
       "engines": {
         "node": ">=6.0"
@@ -14216,6 +13637,12 @@
         }
       }
     },
+    "node_modules/debug/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
     "node_modules/decamelize": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
@@ -14274,6 +13701,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/default-gateway": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+      "dev": true,
+      "dependencies": {
+        "execa": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -14446,9 +13885,9 @@
       }
     },
     "node_modules/devtools-protocol": {
-      "version": "0.0.1273771",
-      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1273771.tgz",
-      "integrity": "sha512-QDbb27xcTVReQQW/GHJsdQqGKwYBE7re7gxehj467kKP2DKuYBUj6i2k5LRiAC66J1yZG/9gsxooz/s9pcm0Og==",
+      "version": "0.0.1342118",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1342118.tgz",
+      "integrity": "sha512-75fMas7PkYNDTmDyb6PRJCH7ILmHLp+BhrZGeMsa4bCh40DTxgCz2NRy5UDzII4C5KuD0oBMZ9vXKhEl6UD/3w==",
       "dev": true
     },
     "node_modules/diffie-hellman": {
@@ -14646,9 +14085,9 @@
       "dev": true
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.758",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.758.tgz",
-      "integrity": "sha512-/o9x6TCdrYZBMdGeTifAP3wlF/gVT+TtWJe3BSmtNh92Mw81U9hrYwW9OAGUh+sEOX/yz5e34sksqRruZbjYrw==",
+      "version": "1.5.28",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.28.tgz",
+      "integrity": "sha512-VufdJl+rzaKZoYVUijN13QcXVF5dWPZANeFTLNy+OSpHdDL5ynXTF35+60RSBbaQYB1ae723lQXHCrf4pyLsMw==",
       "dev": true
     },
     "node_modules/element-resize-detector": {
@@ -14661,9 +14100,9 @@
       }
     },
     "node_modules/elliptic": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
-      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+      "version": "6.5.7",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.7.tgz",
+      "integrity": "sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==",
       "dev": true,
       "dependencies": {
         "bn.js": "^4.11.9",
@@ -14715,9 +14154,9 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.16.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
-      "integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -14990,9 +14429,9 @@
       "dev": true
     },
     "node_modules/escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "dev": true,
       "engines": {
         "node": ">=6"
@@ -15139,17 +14578,18 @@
       }
     },
     "node_modules/eslint-import-resolver-typescript": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz",
-      "integrity": "sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.3.4",
-        "enhanced-resolve": "^5.12.0",
-        "eslint-module-utils": "^2.7.4",
-        "fast-glob": "^3.3.1",
-        "get-tsconfig": "^4.5.0",
-        "is-core-module": "^2.11.0",
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.3.tgz",
+      "integrity": "sha512-ud9aw4szY9cCT1EWWdGv1L1XR6hh2PaRWif0j2QjQ0pgTY/69iw+W0Z4qZv5wHahOl8isEr+k/JnyAqNQkLkIA==",
+      "dev": true,
+      "dependencies": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.3.5",
+        "enhanced-resolve": "^5.15.0",
+        "eslint-module-utils": "^2.8.1",
+        "fast-glob": "^3.3.2",
+        "get-tsconfig": "^4.7.5",
+        "is-bun-module": "^1.0.2",
         "is-glob": "^4.0.3"
       },
       "engines": {
@@ -15160,13 +14600,22 @@
       },
       "peerDependencies": {
         "eslint": "*",
-        "eslint-plugin-import": "*"
+        "eslint-plugin-import": "*",
+        "eslint-plugin-import-x": "*"
+      },
+      "peerDependenciesMeta": {
+        "eslint-plugin-import": {
+          "optional": true
+        },
+        "eslint-plugin-import-x": {
+          "optional": true
+        }
       }
     },
     "node_modules/eslint-module-utils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz",
-      "integrity": "sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==",
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.11.1.tgz",
+      "integrity": "sha512-EwcbfLOhwVMAfatfqLecR2yv3dE5+kQ8kx+Rrt0DvDXEVwW86KQ/xbMDQhtp5l42VXukD5SOF8mQQHbaNtO0CQ==",
       "dev": true,
       "dependencies": {
         "debug": "^3.2.7"
@@ -15233,26 +14682,27 @@
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
-      "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.30.0.tgz",
+      "integrity": "sha512-/mHNE9jINJfiD2EKkg1BKyPyUk4zdnT54YgbOgfjSakWT5oyX/qQLVNTkehyfpcMxZXMy1zyonZ2v7hZTX43Yw==",
       "dev": true,
       "dependencies": {
-        "array-includes": "^3.1.7",
-        "array.prototype.findlastindex": "^1.2.3",
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.8",
+        "array.prototype.findlastindex": "^1.2.5",
         "array.prototype.flat": "^1.3.2",
         "array.prototype.flatmap": "^1.3.2",
         "debug": "^3.2.7",
         "doctrine": "^2.1.0",
         "eslint-import-resolver-node": "^0.3.9",
-        "eslint-module-utils": "^2.8.0",
-        "hasown": "^2.0.0",
-        "is-core-module": "^2.13.1",
+        "eslint-module-utils": "^2.9.0",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.15.1",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.fromentries": "^2.0.7",
-        "object.groupby": "^1.0.1",
-        "object.values": "^1.1.7",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.0",
         "semver": "^6.3.1",
         "tsconfig-paths": "^3.15.0"
       },
@@ -15897,37 +15347,37 @@
       "dev": true
     },
     "node_modules/express": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
       "dev": true,
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
+        "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.10",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -15947,6 +15397,15 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/express/node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/express/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -16098,9 +15557,9 @@
       "dev": true
     },
     "node_modules/fast-glob": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
-      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -16246,9 +15705,9 @@
       "optional": true
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -16258,13 +15717,13 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "dev": true,
       "dependencies": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -16284,6 +15743,15 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/finalhandler/node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/finalhandler/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -16952,10 +16420,13 @@
       }
     },
     "node_modules/get-tsconfig": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.5.0.tgz",
-      "integrity": "sha512-MjhiaIWCJ1sAU4pIQ5i5OfOuHHxVo1oYeNsWTON7jxYkod8pHocXeh+SSbmu5OZZZK73B6cbJ2XADzXehLyovQ==",
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.8.1.tgz",
+      "integrity": "sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==",
       "dev": true,
+      "dependencies": {
+        "resolve-pkg-maps": "^1.0.0"
+      },
       "funding": {
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
@@ -17761,9 +17232,9 @@
       "dev": true
     },
     "node_modules/https-proxy-agent": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
-      "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+      "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
       "dev": true,
       "dependencies": {
         "agent-base": "^7.0.2",
@@ -18004,6 +17475,24 @@
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
       "dev": true
     },
+    "node_modules/internal-ip": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-6.2.0.tgz",
+      "integrity": "sha512-D8WGsR6yDt8uq7vDMu7mjcR+yRMm3dW8yufyChmszWRjcSHuxLBkR3GdS2HZAjodsaGuCvXeEJpueisXJULghg==",
+      "dev": true,
+      "dependencies": {
+        "default-gateway": "^6.0.0",
+        "ipaddr.js": "^1.9.1",
+        "is-ip": "^3.1.0",
+        "p-event": "^4.2.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/internal-ip?sponsor=1"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
@@ -18055,6 +17544,15 @@
         "node": ">= 12"
       }
     },
+    "node_modules/ip-regex": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
+      "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -18231,6 +17729,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-bun-module": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-1.2.1.tgz",
+      "integrity": "sha512-AmidtEM6D6NmUiLOvvU7+IePxjEjOzra2h0pSrsfSAcXwl/83zLLXDByafUJy9k/rKK0pvXMLdwKwGHlX2Ke6Q==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^7.6.3"
+      }
+    },
+    "node_modules/is-bun-module/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -18244,12 +17763,15 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
-      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
+      "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
       "dev": true,
       "dependencies": {
-        "hasown": "^2.0.0"
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -18444,6 +17966,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-ip": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-ip/-/is-ip-3.1.0.tgz",
+      "integrity": "sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==",
+      "dev": true,
+      "dependencies": {
+        "ip-regex": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -19337,29 +18871,29 @@
       "dev": true
     },
     "node_modules/lit": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.3.tgz",
-      "integrity": "sha512-l4slfspEsnCcHVRTvaP7YnkTZEZggNFywLEIhQaGhYDczG+tu/vlgm/KaWIEjIp+ZyV20r2JnZctMb8LeLCG7Q==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.2.0.tgz",
+      "integrity": "sha512-s6tI33Lf6VpDu7u4YqsSX78D28bYQulM+VAzsGch4fx2H0eLZnJsUBsPWmGYSGoKDNbjtRv02rio1o+UdPVwvw==",
       "dependencies": {
         "@lit/reactive-element": "^2.0.4",
-        "lit-element": "^4.0.4",
-        "lit-html": "^3.1.2"
+        "lit-element": "^4.1.0",
+        "lit-html": "^3.2.0"
       }
     },
     "node_modules/lit-element": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.4.tgz",
-      "integrity": "sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.1.0.tgz",
+      "integrity": "sha512-gSejRUQJuMQjV2Z59KAS/D4iElUhwKpIyJvZ9w+DIagIQjfJnhR20h2Q5ddpzXGS+fF0tMZ/xEYGMnKmaI/iww==",
       "dependencies": {
         "@lit-labs/ssr-dom-shim": "^1.2.0",
         "@lit/reactive-element": "^2.0.4",
-        "lit-html": "^3.1.2"
+        "lit-html": "^3.2.0"
       }
     },
     "node_modules/lit-element/node_modules/lit-html": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
-      "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.0.tgz",
+      "integrity": "sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA==",
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
       }
@@ -19374,9 +18908,9 @@
       }
     },
     "node_modules/lit/node_modules/lit-html": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
-      "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.0.tgz",
+      "integrity": "sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA==",
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
       }
@@ -19478,12 +19012,6 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
-    "node_modules/lodash.assignwith": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assignwith/-/lodash.assignwith-4.2.0.tgz",
-      "integrity": "sha512-ZznplvbvtjK2gMvnQ1BR/zqPFZmS6jbK4p+6Up4xcRYA7yMIwxHCfbTcrYxXKzzqLsQ05eJPVznEW3tuwV7k1g==",
-      "dev": true
-    },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -19969,10 +19497,13 @@
       }
     },
     "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
-      "dev": true
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
     "node_modules/merge-stream": {
       "version": "2.0.0",
@@ -20005,12 +19536,12 @@
       "dev": true
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -20579,9 +20110,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
       "dev": true
     },
     "node_modules/normalize-package-data": {
@@ -20828,14 +20359,15 @@
       }
     },
     "node_modules/object.fromentries": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz",
-      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -20863,15 +20395,17 @@
       }
     },
     "node_modules/object.groupby": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.1.tgz",
-      "integrity": "sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/object.hasown": {
@@ -20904,14 +20438,14 @@
       }
     },
     "node_modules/object.values": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
-      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
+      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
       "dev": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -21160,9 +20694,9 @@
       }
     },
     "node_modules/pac-proxy-agent": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.0.1.tgz",
-      "integrity": "sha512-ASV8yU4LLKBAjqIPMbrgtaKIvxQri/yh2OpI+S6hVa9JRkUI3Y3NPFbfngDtY7oFtSMD3w31Xns89mDa3Feo5A==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-BFi3vZnO9X5Qt6NRz7ZOaPja3ic0PhlsmCRYLOpN11+mWBCR6XJDqW5RF3j8jm4WGGQZtBA+bTfxYzeKW73eHg==",
       "dev": true,
       "dependencies": {
         "@tootallnate/quickjs-emscripten": "^0.23.0",
@@ -21170,9 +20704,9 @@
         "debug": "^4.3.4",
         "get-uri": "^6.0.1",
         "http-proxy-agent": "^7.0.0",
-        "https-proxy-agent": "^7.0.2",
-        "pac-resolver": "^7.0.0",
-        "socks-proxy-agent": "^8.0.2"
+        "https-proxy-agent": "^7.0.5",
+        "pac-resolver": "^7.0.1",
+        "socks-proxy-agent": "^8.0.4"
       },
       "engines": {
         "node": ">= 14"
@@ -21389,9 +20923,9 @@
       "dev": true
     },
     "node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
       "dev": true
     },
     "node_modules/path-type": {
@@ -21735,9 +21269,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
@@ -21998,28 +21532,29 @@
       }
     },
     "node_modules/puppeteer-core": {
-      "version": "22.8.0",
-      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-22.8.0.tgz",
-      "integrity": "sha512-S5bWx3g/fNuyFxjZX9TkZMN07CEH47+9Zm6IiTl1QfqI9pnVaShbwrD9kRe5vmz/XPp/jLGhhxRUj1sY4wObnA==",
+      "version": "23.4.0",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-23.4.0.tgz",
+      "integrity": "sha512-fqkIP5FOcb38jfBj/OcBz1wFaI9nk40uQKSORvnXws6wCbep2dg8yxZ3ddJxBIfQsxoiEOvnrykFinUScrB/ew==",
       "dev": true,
       "dependencies": {
-        "@puppeteer/browsers": "2.2.3",
-        "chromium-bidi": "0.5.19",
-        "debug": "4.3.4",
-        "devtools-protocol": "0.0.1273771",
-        "ws": "8.17.0"
+        "@puppeteer/browsers": "2.4.0",
+        "chromium-bidi": "0.6.5",
+        "debug": "^4.3.7",
+        "devtools-protocol": "0.0.1342118",
+        "typed-query-selector": "^2.12.0",
+        "ws": "^8.18.0"
       },
       "engines": {
         "node": ">=18"
       }
     },
     "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "dev": true,
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       },
       "engines": {
         "node": ">=0.6"
@@ -22845,6 +22380,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
+      }
+    },
     "node_modules/resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -22910,9 +22454,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.6.tgz",
-      "integrity": "sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz",
+      "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==",
       "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -22925,19 +22469,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.9.6",
-        "@rollup/rollup-android-arm64": "4.9.6",
-        "@rollup/rollup-darwin-arm64": "4.9.6",
-        "@rollup/rollup-darwin-x64": "4.9.6",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.9.6",
-        "@rollup/rollup-linux-arm64-gnu": "4.9.6",
-        "@rollup/rollup-linux-arm64-musl": "4.9.6",
-        "@rollup/rollup-linux-riscv64-gnu": "4.9.6",
-        "@rollup/rollup-linux-x64-gnu": "4.9.6",
-        "@rollup/rollup-linux-x64-musl": "4.9.6",
-        "@rollup/rollup-win32-arm64-msvc": "4.9.6",
-        "@rollup/rollup-win32-ia32-msvc": "4.9.6",
-        "@rollup/rollup-win32-x64-msvc": "4.9.6",
+        "@rollup/rollup-android-arm-eabi": "4.22.4",
+        "@rollup/rollup-android-arm64": "4.22.4",
+        "@rollup/rollup-darwin-arm64": "4.22.4",
+        "@rollup/rollup-darwin-x64": "4.22.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.22.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.22.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.22.4",
+        "@rollup/rollup-linux-arm64-musl": "4.22.4",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.22.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.22.4",
+        "@rollup/rollup-linux-x64-gnu": "4.22.4",
+        "@rollup/rollup-linux-x64-musl": "4.22.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.22.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.22.4",
+        "@rollup/rollup-win32-x64-msvc": "4.22.4",
         "fsevents": "~2.3.2"
       }
     },
@@ -23073,9 +22620,9 @@
       }
     },
     "node_modules/send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
       "dev": true,
       "dependencies": {
         "debug": "2.6.9",
@@ -23167,20 +22714,29 @@
       "dev": true
     },
     "node_modules/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "dev": true,
       "dependencies": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
       },
       "engines": {
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/serve-static/node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/set-blocking": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
@@ -23642,14 +23198,14 @@
       }
     },
     "node_modules/socks-proxy-agent": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.3.tgz",
-      "integrity": "sha512-VNegTZKhuGq5vSD6XNKlbqWhyt/40CgoEw8XxD6dhnm8Jq9IEa3nIa4HwnM8XOqU0CdB0BwWVXusqiFXfHB3+A==",
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.4.tgz",
+      "integrity": "sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==",
       "dev": true,
       "dependencies": {
         "agent-base": "^7.1.1",
         "debug": "^4.3.4",
-        "socks": "^2.7.1"
+        "socks": "^2.8.3"
       },
       "engines": {
         "node": ">= 14"
@@ -24037,13 +23593,14 @@
       "dev": true
     },
     "node_modules/streamx": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.16.1.tgz",
-      "integrity": "sha512-m9QYj6WygWyWa3H1YY69amr4nVgy61xfjys7xO7kviL5rfIEc2naf+ewFiOA+aEJD7y0JO3h2GoiUv4TDwEGzQ==",
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.20.1.tgz",
+      "integrity": "sha512-uTa0mU6WUC65iUvzKH4X9hEdvSW7rbPxPtwfWiLMSj3qTdQbAiUboZTxauKfpFuGIGa1C2BYijZ7wgdUXICJhA==",
       "dev": true,
       "dependencies": {
-        "fast-fifo": "^1.1.0",
-        "queue-tick": "^1.0.1"
+        "fast-fifo": "^1.3.2",
+        "queue-tick": "^1.0.1",
+        "text-decoder": "^1.1.0"
       },
       "optionalDependencies": {
         "bare-events": "^2.2.0"
@@ -24442,9 +23999,9 @@
       }
     },
     "node_modules/tar-fs": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.5.tgz",
-      "integrity": "sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
+      "integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
       "dev": true,
       "dependencies": {
         "pump": "^3.0.0",
@@ -24599,6 +24156,15 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
+    "node_modules/text-decoder": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.0.tgz",
+      "integrity": "sha512-n1yg1mOj9DNpk3NeZOx7T6jchTbyJS3i3cucbNN6FcdPriMZx7NsgrGpWWdWZZGxD7ES1XB+3uoqHMgOKaN+fg==",
+      "dev": true,
+      "dependencies": {
+        "b4a": "^1.6.4"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -25105,6 +24671,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typed-query-selector": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.0.tgz",
+      "integrity": "sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==",
+      "dev": true
+    },
     "node_modules/typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -25112,9 +24684,9 @@
       "dev": true
     },
     "node_modules/typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -25520,9 +25092,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
-      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
       "dev": true,
       "funding": [
         {
@@ -25539,8 +25111,8 @@
         }
       ],
       "dependencies": {
-        "escalade": "^3.1.1",
-        "picocolors": "^1.0.0"
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
       },
       "bin": {
         "update-browserslist-db": "cli.js"
@@ -25550,9 +25122,9 @@
       }
     },
     "node_modules/update-browserslist-db/node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
       "dev": true
     },
     "node_modules/uri-js": {
@@ -25704,9 +25276,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==",
       "funding": [
         "https://github.com/sponsors/broofa",
         "https://github.com/sponsors/ctavan"
@@ -25722,9 +25294,9 @@
       "dev": true
     },
     "node_modules/v8-to-istanbul": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz",
-      "integrity": "sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
+      "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==",
       "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.12",
@@ -26157,21 +25729,20 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dev": true,
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -26628,9 +26199,9 @@
       "dev": true
     },
     "node_modules/ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
@@ -26758,9 +26329,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.22.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
-      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
       "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
@@ -26779,12 +26350,12 @@
   },
   "dependencies": {
     "@75lb/deep-merge": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@75lb/deep-merge/-/deep-merge-1.1.1.tgz",
-      "integrity": "sha512-xvgv6pkMGBA6GwdyJbNAnDmfAIR/DfWhrj9jgWh3TY7gRm3KO46x/GPjRg6wJ0nOepwqrNxFfojebh0Df4h4Tw==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@75lb/deep-merge/-/deep-merge-1.1.2.tgz",
+      "integrity": "sha512-08K9ou5VNbheZFxM5tDWoqjA3ImC50DiuuJ2tj1yEPRfkp8lLLg6XAaJ4On+a0yAXor/8ay5gHnAIshRM44Kpw==",
       "dev": true,
       "requires": {
-        "lodash.assignwith": "^4.2.0",
+        "lodash": "^4.17.21",
         "typical": "^7.1.1"
       },
       "dependencies": {
@@ -26813,12 +26384,12 @@
       }
     },
     "@babel/code-frame": {
-      "version": "7.24.2",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
-      "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
+      "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
       "dev": true,
       "requires": {
-        "@babel/highlight": "^7.24.2",
+        "@babel/highlight": "^7.24.7",
         "picocolors": "^1.0.0"
       },
       "dependencies": {
@@ -26831,27 +26402,27 @@
       }
     },
     "@babel/compat-data": {
-      "version": "7.24.4",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz",
-      "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.4.tgz",
+      "integrity": "sha512-+LGRog6RAsCJrrrg/IO6LGmpphNe5DiK30dGjCoxxeGv49B10/3XYGxPsAwrDlMFcFEvdAUavDT8r9k/hSyQqQ==",
       "dev": true
     },
     "@babel/core": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.5.tgz",
-      "integrity": "sha512-tVQRucExLQ02Boi4vdPp49svNGcfL2GhdTCT9aldhXgCJVAI21EtRfBettiuLUwce/7r6bFdgs6JFkcdTiFttA==",
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.2.tgz",
+      "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
       "dev": true,
       "requires": {
         "@ampproject/remapping": "^2.2.0",
-        "@babel/code-frame": "^7.24.2",
-        "@babel/generator": "^7.24.5",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-module-transforms": "^7.24.5",
-        "@babel/helpers": "^7.24.5",
-        "@babel/parser": "^7.24.5",
-        "@babel/template": "^7.24.0",
-        "@babel/traverse": "^7.24.5",
-        "@babel/types": "^7.24.5",
+        "@babel/code-frame": "^7.24.7",
+        "@babel/generator": "^7.25.0",
+        "@babel/helper-compilation-targets": "^7.25.2",
+        "@babel/helper-module-transforms": "^7.25.2",
+        "@babel/helpers": "^7.25.0",
+        "@babel/parser": "^7.25.0",
+        "@babel/template": "^7.25.0",
+        "@babel/traverse": "^7.25.2",
+        "@babel/types": "^7.25.2",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -26868,12 +26439,12 @@
       }
     },
     "@babel/generator": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.5.tgz",
-      "integrity": "sha512-x32i4hEXvr+iI0NEoEfDKzlemF8AmtOP8CcrRaEcpzysWuoEb1KknpcvMsHKPONoKZiDuItklgWhB18xEhr9PA==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.6.tgz",
+      "integrity": "sha512-VPC82gr1seXOpkjAAKoLhP50vx4vGNlF4msF64dSFq1P8RfB+QAuJWGHPXXPc8QyfVWwwB/TNNU4+ayZmHNbZw==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.24.5",
+        "@babel/types": "^7.25.6",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
         "jsesc": "^2.5.1"
@@ -26893,32 +26464,33 @@
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
-      "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz",
+      "integrity": "sha512-BaDeOonYvhdKw+JoMVkAixAAJzG2jVPIwWoKBPdYuY9b452e2rPuI9QPYh3KpofZ3pW2akOmwZLOiOsHMiqRAg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.22.5"
+        "@babel/types": "^7.24.7"
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz",
-      "integrity": "sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.24.7.tgz",
+      "integrity": "sha512-xZeCVVdwb4MsDBkkyZ64tReWYrLRHlMN72vP7Bdm3OUOuyFZExhsHUUnuWnm2/XOlAJzR0LfPpB56WXZn0X/lA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.22.15"
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
       }
     },
     "@babel/helper-compilation-targets": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
-      "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.2.tgz",
+      "integrity": "sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==",
       "dev": true,
       "requires": {
-        "@babel/compat-data": "^7.23.5",
-        "@babel/helper-validator-option": "^7.23.5",
-        "browserslist": "^4.22.2",
+        "@babel/compat-data": "^7.25.2",
+        "@babel/helper-validator-option": "^7.24.8",
+        "browserslist": "^4.23.1",
         "lru-cache": "^5.1.1",
         "semver": "^6.3.1"
       },
@@ -26941,29 +26513,27 @@
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.5.tgz",
-      "integrity": "sha512-uRc4Cv8UQWnE4NXlYTIIdM7wfFkOqlFztcC/gVXDKohKoVB3OyonfelUBaJzSwpBntZ2KYGF/9S7asCHsXwW6g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-member-expression-to-functions": "^7.24.5",
-        "@babel/helper-optimise-call-expression": "^7.22.5",
-        "@babel/helper-replace-supers": "^7.24.1",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.24.5",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.4.tgz",
+      "integrity": "sha512-ro/bFs3/84MDgDmMwbcHgDa8/E6J3QKNTk4xJJnVeFtGE+tL0K26E3pNxhYz2b67fJpt7Aphw5XcploKXuCvCQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-member-expression-to-functions": "^7.24.8",
+        "@babel/helper-optimise-call-expression": "^7.24.7",
+        "@babel/helper-replace-supers": "^7.25.0",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/traverse": "^7.25.4",
         "semver": "^6.3.1"
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz",
-      "integrity": "sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==",
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.25.2.tgz",
+      "integrity": "sha512-+wqVGP+DFmqwFD3EH6TMTfUNeqDehV3E/dl+Sd54eaXqm17tEUNbEIn4sVivVowbvUpOtIGxdo3GoXyDH9N/9g==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-annotate-as-pure": "^7.24.7",
         "regexpu-core": "^5.3.1",
         "semver": "^6.3.1"
       }
@@ -26981,115 +26551,93 @@
         "resolve": "^1.14.2"
       }
     },
-    "@babel/helper-environment-visitor": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
-      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
-      "dev": true
-    },
-    "@babel/helper-function-name": {
-      "version": "7.23.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
-      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
-      "dev": true,
-      "requires": {
-        "@babel/template": "^7.22.15",
-        "@babel/types": "^7.23.0"
-      }
-    },
-    "@babel/helper-hoist-variables": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
-      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.22.5"
-      }
-    },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.5.tgz",
-      "integrity": "sha512-4owRteeihKWKamtqg4JmWSsEZU445xpFRXPEwp44HbgbxdWlUV1b4Agg4lkA806Lil5XM/e+FJyS0vj5T6vmcA==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.8.tgz",
+      "integrity": "sha512-LABppdt+Lp/RlBxqrh4qgf1oEH/WxdzQNDJIu5gC/W1GyvPVrOBiItmmM8wan2fm4oYqFuFfkXmlGpLQhPY8CA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.24.5"
+        "@babel/traverse": "^7.24.8",
+        "@babel/types": "^7.24.8"
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.24.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
-      "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
+      "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.24.0"
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.5.tgz",
-      "integrity": "sha512-9GxeY8c2d2mdQUP1Dye0ks3VDyIMS98kt/llQ2nUId8IsWqTF0l1LkSX0/uP7l7MCDrzXS009Hyhe2gzTiGW8A==",
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.2.tgz",
+      "integrity": "sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-module-imports": "^7.24.3",
-        "@babel/helper-simple-access": "^7.24.5",
-        "@babel/helper-split-export-declaration": "^7.24.5",
-        "@babel/helper-validator-identifier": "^7.24.5"
+        "@babel/helper-module-imports": "^7.24.7",
+        "@babel/helper-simple-access": "^7.24.7",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "@babel/traverse": "^7.25.2"
       }
     },
     "@babel/helper-optimise-call-expression": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
-      "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.7.tgz",
+      "integrity": "sha512-jKiTsW2xmWwxT1ixIdfXUZp+P5yURx2suzLZr5Hi64rURpDYdMW0pv+Uf17EYk2Rd428Lx4tLsnjGJzYKDM/6A==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.22.5"
+        "@babel/types": "^7.24.7"
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.5.tgz",
-      "integrity": "sha512-xjNLDopRzW2o6ba0gKbkZq5YWEBaK3PCyTOY1K2P/O07LGMhMqlMXPxwN4S5/RhWuCobT8z0jrlKGlYmeR1OhQ==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
+      "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
       "dev": true
     },
     "@babel/helper-remap-async-to-generator": {
-      "version": "7.22.20",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz",
-      "integrity": "sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.0.tgz",
+      "integrity": "sha512-NhavI2eWEIz/H9dbrG0TuOicDhNexze43i5z7lEqwYm0WEZVTwnPpA0EafUTP7+6/W79HWIP2cTe3Z5NiSTVpw==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-wrap-function": "^7.22.20"
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-wrap-function": "^7.25.0",
+        "@babel/traverse": "^7.25.0"
       }
     },
     "@babel/helper-replace-supers": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.24.1.tgz",
-      "integrity": "sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.25.0.tgz",
+      "integrity": "sha512-q688zIvQVYtZu+i2PsdIu/uWGRpfxzr5WESsfpShfZECkO+d2o+WROWezCi/Q6kJ0tfPa5+pUGUlfx2HhrA3Bg==",
       "dev": true,
       "requires": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-member-expression-to-functions": "^7.23.0",
-        "@babel/helper-optimise-call-expression": "^7.22.5"
+        "@babel/helper-member-expression-to-functions": "^7.24.8",
+        "@babel/helper-optimise-call-expression": "^7.24.7",
+        "@babel/traverse": "^7.25.0"
       }
     },
     "@babel/helper-simple-access": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.5.tgz",
-      "integrity": "sha512-uH3Hmf5q5n7n8mz7arjUlDOCbttY/DW4DYhE6FUsjKJ/oYC1kQQUvwEQWxRwUpX9qQKRXeqLwWxrqilMrf32sQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
+      "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.24.5"
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
       }
     },
     "@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
-      "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz",
+      "integrity": "sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.22.5"
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
       }
     },
     "@babel/helper-split-export-declaration": {
@@ -27102,109 +26650,120 @@
       }
     },
     "@babel/helper-string-parser": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
-      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
       "dev": true
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz",
-      "integrity": "sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
       "dev": true
     },
     "@babel/helper-validator-option": {
-      "version": "7.23.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
-      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
+      "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
       "dev": true
     },
     "@babel/helper-wrap-function": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.24.5.tgz",
-      "integrity": "sha512-/xxzuNvgRl4/HLNKvnFwdhdgN3cpLxgLROeLDl83Yx0AJ1SGvq1ak0OszTOjDfiB8Vx03eJbeDWh9r+jCCWttw==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.0.tgz",
+      "integrity": "sha512-s6Q1ebqutSiZnEjaofc/UKDyC4SbzV5n5SrA2Gq8UawLycr3i04f1dX4OzoQVnexm6aOCh37SQNYlJ/8Ku+PMQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/template": "^7.24.0",
-        "@babel/types": "^7.24.5"
+        "@babel/template": "^7.25.0",
+        "@babel/traverse": "^7.25.0",
+        "@babel/types": "^7.25.0"
       }
     },
     "@babel/helpers": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.5.tgz",
-      "integrity": "sha512-CiQmBMMpMQHwM5m01YnrM6imUG1ebgYJ+fAIW4FZe6m4qHTPaRHti+R8cggAwkdz4oXhtO4/K9JWlh+8hIfR2Q==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.6.tgz",
+      "integrity": "sha512-Xg0tn4HcfTijTwfDwYlvVCl43V6h4KyVVX2aEm4qdO/PC6L2YvzLHFdmxhoeSA3eslcE6+ZVXHgWwopXYLNq4Q==",
       "dev": true,
       "requires": {
-        "@babel/template": "^7.24.0",
-        "@babel/traverse": "^7.24.5",
-        "@babel/types": "^7.24.5"
+        "@babel/template": "^7.25.0",
+        "@babel/types": "^7.25.6"
       }
     },
     "@babel/highlight": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.5.tgz",
-      "integrity": "sha512-8lLmua6AVh/8SLJRRVD6V8p73Hir9w5mJrhE+IPpILG31KKlI9iz5zmBYKcWPS59qSfgP9RaSBQSHHE81WKuEw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
+      "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
       "dev": true,
       "requires": {
-        "@babel/helper-validator-identifier": "^7.24.5",
+        "@babel/helper-validator-identifier": "^7.24.7",
         "chalk": "^2.4.2",
         "js-tokens": "^4.0.0",
         "picocolors": "^1.0.0"
       },
       "dependencies": {
         "picocolors": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-          "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+          "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
           "dev": true
         }
       }
     },
     "@babel/parser": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz",
-      "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==",
-      "dev": true
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
+      "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.25.6"
+      }
     },
     "@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.5.tgz",
-      "integrity": "sha512-LdXRi1wEMTrHVR4Zc9F8OewC3vdm5h4QB6L71zy6StmYeqGi1b3ttIO8UC+BfZKcH9jdr4aI249rBkm+3+YvHw==",
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.3.tgz",
+      "integrity": "sha512-wUrcsxZg6rqBXG05HG1FPYgsP6EvwF4WpBbxIpWIIYnH8wG0gzx3yZY3dtEHas4sTAOGkbTsc9EGPxwff8lRoA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/traverse": "^7.25.3"
+      }
+    },
+    "@babel/plugin-bugfix-safari-class-field-initializer-scope": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.0.tgz",
+      "integrity": "sha512-Bm4bH2qsX880b/3ziJ8KD711LT7z4u8CFudmjqle65AZj/HNUFhEf90dqYv6O86buWvSBmeQDjv0Tn2aF/bIBA==",
       "dev": true,
       "requires": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-plugin-utils": "^7.24.5"
+        "@babel/helper-plugin-utils": "^7.24.8"
       }
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.1.tgz",
-      "integrity": "sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.0.tgz",
+      "integrity": "sha512-lXwdNZtTmeVOOFtwM/WDe7yg1PL8sYhRk/XH0FzbR2HDQ0xC+EnQ/JHeoMYSavtU115tnUk0q9CDyq8si+LMAA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.8"
       }
     },
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.1.tgz",
-      "integrity": "sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.7.tgz",
+      "integrity": "sha512-+izXIbke1T33mY4MSNnrqhPXDz01WYhEf3yF5NbnUtkiNnm+XBZJl3kNfoK6NKmYlz/D07+l2GWVK/QfDkNCuQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
-        "@babel/plugin-transform-optional-chaining": "^7.24.1"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/plugin-transform-optional-chaining": "^7.24.7"
       }
     },
     "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.24.1.tgz",
-      "integrity": "sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.0.tgz",
+      "integrity": "sha512-tggFrk1AIShG/RUQbEwt2Tr/E+ObkfwrPjR6BjbRvsx24+PSjK8zrq0GWPNCjo8qpRx4DuJzlcvWJqlm+0h3kw==",
       "dev": true,
       "requires": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/traverse": "^7.25.0"
       }
     },
     "@babel/plugin-proposal-class-properties": {
@@ -27360,21 +26919,21 @@
       }
     },
     "@babel/plugin-syntax-import-assertions": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.24.1.tgz",
-      "integrity": "sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.25.6.tgz",
+      "integrity": "sha512-aABl0jHw9bZ2karQ/uUD6XP4u0SG22SJrOHFoL6XB1R7dTovOP4TzTlsxOYC5yQ1pdscVK2JTUnF6QL3ARoAiQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.8"
       }
     },
     "@babel/plugin-syntax-import-attributes": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.1.tgz",
-      "integrity": "sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.25.6.tgz",
+      "integrity": "sha512-sXaDXaJN9SNLymBdlWFA+bjzBhFD617ZaFiY13dGt7TVslVvVgA6fkZOP7Ki3IGElC45lwHdOTrCtKZGVAWeLQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.8"
       }
     },
     "@babel/plugin-syntax-import-meta": {
@@ -27496,382 +27055,390 @@
       }
     },
     "@babel/plugin-transform-arrow-functions": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.1.tgz",
-      "integrity": "sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.7.tgz",
+      "integrity": "sha512-Dt9LQs6iEY++gXUwY03DNFat5C2NbO48jj+j/bSAz6b3HgPs39qcPiYt77fDObIcFwj3/C2ICX9YMwGflUoSHQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-async-generator-functions": {
-      "version": "7.24.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.24.3.tgz",
-      "integrity": "sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.4.tgz",
+      "integrity": "sha512-jz8cV2XDDTqjKPwVPJBIjORVEmSGYhdRa8e5k5+vN+uwcjSrSxUaebBRa4ko1jqNF2uxyg8G6XYk30Jv285xzg==",
       "dev": true,
       "requires": {
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-remap-async-to-generator": "^7.22.20",
-        "@babel/plugin-syntax-async-generators": "^7.8.4"
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-remap-async-to-generator": "^7.25.0",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/traverse": "^7.25.4"
       }
     },
     "@babel/plugin-transform-async-to-generator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.1.tgz",
-      "integrity": "sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.7.tgz",
+      "integrity": "sha512-SQY01PcJfmQ+4Ash7NE+rpbLFbmqA2GPIgqzxfFTL4t1FKRq4zTms/7htKpoCUI9OcFYgzqfmCdH53s6/jn5fA==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-imports": "^7.24.1",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-remap-async-to-generator": "^7.22.20"
+        "@babel/helper-module-imports": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-remap-async-to-generator": "^7.24.7"
       }
     },
     "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.1.tgz",
-      "integrity": "sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.7.tgz",
+      "integrity": "sha512-yO7RAz6EsVQDaBH18IDJcMB1HnrUn2FJ/Jslc/WtPPWcjhpUJXU/rjbwmluzp7v/ZzWcEhTMXELnnsz8djWDwQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.5.tgz",
-      "integrity": "sha512-sMfBc3OxghjC95BkYrYocHL3NaOplrcaunblzwXhGmlPwpmfsxr4vK+mBBt49r+S240vahmv+kUxkeKgs+haCw==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.0.tgz",
+      "integrity": "sha512-yBQjYoOjXlFv9nlXb3f1casSHOZkWr29NX+zChVanLg5Nc157CrbEX9D7hxxtTpuFy7Q0YzmmWfJxzvps4kXrQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.5"
+        "@babel/helper-plugin-utils": "^7.24.8"
       }
     },
     "@babel/plugin-transform-class-properties": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.1.tgz",
-      "integrity": "sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.4.tgz",
+      "integrity": "sha512-nZeZHyCWPfjkdU5pA/uHiTaDAFUEqkpzf1YoQT2NeSynCGYq9rxfyI3XpQbfx/a0hSnFH6TGlEXvae5Vi7GD8g==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.24.1",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-class-features-plugin": "^7.25.4",
+        "@babel/helper-plugin-utils": "^7.24.8"
       }
     },
     "@babel/plugin-transform-class-static-block": {
-      "version": "7.24.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.4.tgz",
-      "integrity": "sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.7.tgz",
+      "integrity": "sha512-HMXK3WbBPpZQufbMG4B46A90PkuuhN9vBCb5T8+VAHqvAqvcLi+2cKoukcpmUYkszLhScU3l1iudhrks3DggRQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.24.4",
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-class-static-block": "^7.14.5"
       }
     },
     "@babel/plugin-transform-classes": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.24.5.tgz",
-      "integrity": "sha512-gWkLP25DFj2dwe9Ck8uwMOpko4YsqyfZJrOmqqcegeDYEbp7rmn4U6UQZNj08UF6MaX39XenSpKRCvpDRBtZ7Q==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.4.tgz",
+      "integrity": "sha512-oexUfaQle2pF/b6E0dwsxQtAol9TLSO88kQvym6HHBWFliV2lGdrPieX+WgMRLSJDVzdYywk7jXbLPuO2KLTLg==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-plugin-utils": "^7.24.5",
-        "@babel/helper-replace-supers": "^7.24.1",
-        "@babel/helper-split-export-declaration": "^7.24.5",
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-compilation-targets": "^7.25.2",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-replace-supers": "^7.25.0",
+        "@babel/traverse": "^7.25.4",
         "globals": "^11.1.0"
       }
     },
     "@babel/plugin-transform-computed-properties": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.1.tgz",
-      "integrity": "sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.7.tgz",
+      "integrity": "sha512-25cS7v+707Gu6Ds2oY6tCkUwsJ9YIDbggd9+cu9jzzDgiNq7hR/8dkzxWfKWnTic26vsI3EsCXNd4iEB6e8esQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/template": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/template": "^7.24.7"
       }
     },
     "@babel/plugin-transform-destructuring": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.5.tgz",
-      "integrity": "sha512-SZuuLyfxvsm+Ah57I/i1HVjveBENYK9ue8MJ7qkc7ndoNjqquJiElzA7f5yaAXjyW2hKojosOTAQQRX50bPSVg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.8.tgz",
+      "integrity": "sha512-36e87mfY8TnRxc7yc6M9g9gOB7rKgSahqkIKwLpz4Ppk2+zC2Cy1is0uwtuSG6AE4zlTOUa+7JGz9jCJGLqQFQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.5"
+        "@babel/helper-plugin-utils": "^7.24.8"
       }
     },
     "@babel/plugin-transform-dotall-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.1.tgz",
-      "integrity": "sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.7.tgz",
+      "integrity": "sha512-ZOA3W+1RRTSWvyqcMJDLqbchh7U4NRGqwRfFSVbOLS/ePIP4vHB5e8T8eXcuqyN1QkgKyj5wuW0lcS85v4CrSw==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.1.tgz",
-      "integrity": "sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.7.tgz",
+      "integrity": "sha512-JdYfXyCRihAe46jUIliuL2/s0x0wObgwwiGxw/UbgJBr20gQBThrokO4nYKgWkD7uBaqM7+9x5TU7NkExZJyzw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      }
+    },
+    "@babel/plugin-transform-duplicate-named-capturing-groups-regex": {
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.0.tgz",
+      "integrity": "sha512-YLpb4LlYSc3sCUa35un84poXoraOiQucUTTu8X1j18JV+gNa8E0nyUf/CjZ171IRGr4jEguF+vzJU66QZhn29g==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.25.0",
+        "@babel/helper-plugin-utils": "^7.24.8"
       }
     },
     "@babel/plugin-transform-dynamic-import": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.1.tgz",
-      "integrity": "sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.7.tgz",
+      "integrity": "sha512-sc3X26PhZQDb3JhORmakcbvkeInvxz+A8oda99lj7J60QRuPZvNAk9wQlTBS1ZynelDrDmTU4pw1tyc5d5ZMUg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3"
       }
     },
     "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.1.tgz",
-      "integrity": "sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.7.tgz",
+      "integrity": "sha512-Rqe/vSc9OYgDajNIK35u7ot+KeCoetqQYFXM4Epf7M7ez3lWlOjrDjrwMei6caCVhfdw+mIKD4cgdGNy5JQotQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-export-namespace-from": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.1.tgz",
-      "integrity": "sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.7.tgz",
+      "integrity": "sha512-v0K9uNYsPL3oXZ/7F9NNIbAj2jv1whUEtyA6aujhekLs56R++JDQuzRcP2/z4WX5Vg/c5lE9uWZA0/iUoFhLTA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
       }
     },
     "@babel/plugin-transform-for-of": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.1.tgz",
-      "integrity": "sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.7.tgz",
+      "integrity": "sha512-wo9ogrDG1ITTTBsy46oGiN1dS9A7MROBTcYsfS8DtsImMkHk9JXJ3EWQM6X2SUw4x80uGPlwj0o00Uoc6nEE3g==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7"
       }
     },
     "@babel/plugin-transform-function-name": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.24.1.tgz",
-      "integrity": "sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==",
+      "version": "7.25.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.1.tgz",
+      "integrity": "sha512-TVVJVdW9RKMNgJJlLtHsKDTydjZAbwIsn6ySBPQaEAUU5+gVvlJt/9nRmqVbsV/IBanRjzWoaAQKLoamWVOUuA==",
       "dev": true,
       "requires": {
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-compilation-targets": "^7.24.8",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/traverse": "^7.25.1"
       }
     },
     "@babel/plugin-transform-json-strings": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.1.tgz",
-      "integrity": "sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.7.tgz",
+      "integrity": "sha512-2yFnBGDvRuxAaE/f0vfBKvtnvvqU8tGpMHqMNpTN2oWMKIR3NqFkjaAgGwawhqK/pIN2T3XdjGPdaG0vDhOBGw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-json-strings": "^7.8.3"
       }
     },
     "@babel/plugin-transform-literals": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.24.1.tgz",
-      "integrity": "sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==",
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.2.tgz",
+      "integrity": "sha512-HQI+HcTbm9ur3Z2DkO+jgESMAMcYLuN/A7NRw9juzxAezN9AvqvUTnpKP/9kkYANz6u7dFlAyOu44ejuGySlfw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.8"
       }
     },
     "@babel/plugin-transform-logical-assignment-operators": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.1.tgz",
-      "integrity": "sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.7.tgz",
+      "integrity": "sha512-4D2tpwlQ1odXmTEIFWy9ELJcZHqrStlzK/dAOWYyxX3zT0iXQB6banjgeOJQXzEc4S0E0a5A+hahxPaEFYftsw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       }
     },
     "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.1.tgz",
-      "integrity": "sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.7.tgz",
+      "integrity": "sha512-T/hRC1uqrzXMKLQ6UCwMT85S3EvqaBXDGf0FaMf4446Qx9vKwlghvee0+uuZcDUCZU5RuNi4781UQ7R308zzBw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-modules-amd": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.1.tgz",
-      "integrity": "sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.7.tgz",
+      "integrity": "sha512-9+pB1qxV3vs/8Hdmz/CulFB8w2tuu6EB94JZFsjdqxQokwGa9Unap7Bo2gGBGIvPmDIVvQrom7r5m/TCDMURhg==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-module-transforms": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.1.tgz",
-      "integrity": "sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.8.tgz",
+      "integrity": "sha512-WHsk9H8XxRs3JXKWFiqtQebdh9b/pTk4EgueygFzYlTKAg0Ud985mSevdNjdXdFBATSKVJGQXP1tv6aGbssLKA==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-simple-access": "^7.22.5"
+        "@babel/helper-module-transforms": "^7.24.8",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-simple-access": "^7.24.7"
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.24.1.tgz",
-      "integrity": "sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.0.tgz",
+      "integrity": "sha512-YPJfjQPDXxyQWg/0+jHKj1llnY5f/R6a0p/vP4lPymxLu7Lvl4k2WMitqi08yxwQcCVUUdG9LCUj4TNEgAp3Jw==",
       "dev": true,
       "requires": {
-        "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-validator-identifier": "^7.22.20"
+        "@babel/helper-module-transforms": "^7.25.0",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "@babel/traverse": "^7.25.0"
       }
     },
     "@babel/plugin-transform-modules-umd": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.1.tgz",
-      "integrity": "sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.7.tgz",
+      "integrity": "sha512-3aytQvqJ/h9z4g8AsKPLvD4Zqi2qT+L3j7XoFFu1XBlZWEl2/1kWnhmAbxpLgPrHSY0M6UA02jyTiwUVtiKR6A==",
       "dev": true,
       "requires": {
-        "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-module-transforms": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.22.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
-      "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.24.7.tgz",
+      "integrity": "sha512-/jr7h/EWeJtk1U/uz2jlsCioHkZk1JJZVcc8oQsJ1dUlaJD83f4/6Zeh2aHt9BIFokHIsSeDfhUmju0+1GPd6g==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.5",
-        "@babel/helper-plugin-utils": "^7.22.5"
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-new-target": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.1.tgz",
-      "integrity": "sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.7.tgz",
+      "integrity": "sha512-RNKwfRIXg4Ls/8mMTza5oPF5RkOW8Wy/WgMAp1/F1yZ8mMbtwXW+HDoJiOsagWrAhI5f57Vncrmr9XeT4CVapA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-nullish-coalescing-operator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz",
-      "integrity": "sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.7.tgz",
+      "integrity": "sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
       }
     },
     "@babel/plugin-transform-numeric-separator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.1.tgz",
-      "integrity": "sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.7.tgz",
+      "integrity": "sha512-e6q1TiVUzvH9KRvicuxdBTUj4AdKSRwzIyFFnfnezpCfP2/7Qmbb8qbU2j7GODbl4JMkblitCQjKYUaX/qkkwA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-numeric-separator": "^7.10.4"
       }
     },
     "@babel/plugin-transform-object-rest-spread": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.5.tgz",
-      "integrity": "sha512-7EauQHszLGM3ay7a161tTQH7fj+3vVM/gThlz5HpFtnygTxjrlvoeq7MPVA1Vy9Q555OB8SnAOsMkLShNkkrHA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.7.tgz",
+      "integrity": "sha512-4QrHAr0aXQCEFni2q4DqKLD31n2DL+RxcwnNjDFkSG0eNQ/xCavnRkfCUjsyqGC2OviNJvZOF/mQqZBw7i2C5Q==",
       "dev": true,
       "requires": {
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-plugin-utils": "^7.24.5",
+        "@babel/helper-compilation-targets": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.24.5"
+        "@babel/plugin-transform-parameters": "^7.24.7"
       }
     },
     "@babel/plugin-transform-object-super": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.1.tgz",
-      "integrity": "sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.7.tgz",
+      "integrity": "sha512-A/vVLwN6lBrMFmMDmPPz0jnE6ZGx7Jq7d6sT/Ev4H65RER6pZ+kczlf1DthF5N0qaPHBsI7UXiE8Zy66nmAovg==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-replace-supers": "^7.24.1"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-replace-supers": "^7.24.7"
       }
     },
     "@babel/plugin-transform-optional-catch-binding": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.1.tgz",
-      "integrity": "sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.7.tgz",
+      "integrity": "sha512-uLEndKqP5BfBbC/5jTwPxLh9kqPWWgzN/f8w6UwAIirAEqiIVJWWY312X72Eub09g5KF9+Zn7+hT7sDxmhRuKA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
       }
     },
     "@babel/plugin-transform-optional-chaining": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.5.tgz",
-      "integrity": "sha512-xWCkmwKT+ihmA6l7SSTpk8e4qQl/274iNbSKRRS8mpqFR32ksy36+a+LWY8OXCCEefF8WFlnOHVsaDI2231wBg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.8.tgz",
+      "integrity": "sha512-5cTOLSMs9eypEy8JUVvIKOu6NgvbJMnpG62VpIHrTmROdQ+L5mDAaI40g25k5vXti55JWNX5jCkq3HZxXBQANw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
         "@babel/plugin-syntax-optional-chaining": "^7.8.3"
       }
     },
     "@babel/plugin-transform-parameters": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.5.tgz",
-      "integrity": "sha512-9Co00MqZ2aoky+4j2jhofErthm6QVLKbpQrvz20c3CH9KQCLHyNB+t2ya4/UrRpQGR+Wrwjg9foopoeSdnHOkA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.7.tgz",
+      "integrity": "sha512-yGWW5Rr+sQOhK0Ot8hjDJuxU3XLRQGflvT4lhlSY0DFvdb3TwKaY26CJzHtYllU0vT9j58hc37ndFPsqT1SrzA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.5"
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-private-methods": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.24.1.tgz",
-      "integrity": "sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.4.tgz",
+      "integrity": "sha512-ao8BG7E2b/URaUQGqN3Tlsg+M3KlHY6rJ1O1gXAEUnZoyNQnvKyH87Kfg+FoxSeyWUB8ISZZsC91C44ZuBFytw==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.24.1",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-class-features-plugin": "^7.25.4",
+        "@babel/helper-plugin-utils": "^7.24.8"
       }
     },
     "@babel/plugin-transform-private-property-in-object": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.5.tgz",
-      "integrity": "sha512-JM4MHZqnWR04jPMujQDTBVRnqxpLLpx2tkn7iPn+Hmsc0Gnb79yvRWOkvqFOx3Z7P7VxiRIR22c4eGSNj87OBQ==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.7.tgz",
+      "integrity": "sha512-9z76mxwnwFxMyxZWEgdgECQglF2Q7cFLm0kMf8pGwt+GSJsY0cONKj/UuO4bOH0w/uAel3ekS4ra5CEAyJRmDA==",
       "dev": true,
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.22.5",
-        "@babel/helper-create-class-features-plugin": "^7.24.5",
-        "@babel/helper-plugin-utils": "^7.24.5",
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
       }
     },
     "@babel/plugin-transform-property-literals": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.1.tgz",
-      "integrity": "sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.7.tgz",
+      "integrity": "sha512-EMi4MLQSHfd2nrCqQEWxFdha2gBCqU4ZcCng4WBGZ5CJL4bBRW0ptdqqDdeirGZcpALazVVNJqRmsO8/+oNCBA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-react-display-name": {
@@ -27916,68 +27483,68 @@
       }
     },
     "@babel/plugin-transform-regenerator": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.1.tgz",
-      "integrity": "sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.7.tgz",
+      "integrity": "sha512-lq3fvXPdimDrlg6LWBoqj+r/DEWgONuwjuOuQCSYgRroXDH/IdM1C0IZf59fL5cHLpjEH/O6opIRBbqv7ELnuA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
+        "@babel/helper-plugin-utils": "^7.24.7",
         "regenerator-transform": "^0.15.2"
       }
     },
     "@babel/plugin-transform-reserved-words": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.1.tgz",
-      "integrity": "sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.7.tgz",
+      "integrity": "sha512-0DUq0pHcPKbjFZCfTss/pGkYMfy3vFWydkUBd9r0GHpIyfs2eCDENvqadMycRS9wZCXR41wucAfJHJmwA0UmoQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.1.tgz",
-      "integrity": "sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.7.tgz",
+      "integrity": "sha512-KsDsevZMDsigzbA09+vacnLpmPH4aWjcZjXdyFKGzpplxhbeB4wYtury3vglQkg6KM/xEPKt73eCjPPf1PgXBA==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-spread": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.1.tgz",
-      "integrity": "sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.7.tgz",
+      "integrity": "sha512-x96oO0I09dgMDxJaANcRyD4ellXFLLiWhuwDxKZX5g2rWP1bTPkBSwCYv96VDXVT1bD9aPj8tppr5ITIh8hBng==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7"
       }
     },
     "@babel/plugin-transform-sticky-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.1.tgz",
-      "integrity": "sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.7.tgz",
+      "integrity": "sha512-kHPSIJc9v24zEml5geKg9Mjx5ULpfncj0wRpYtxbvKyTtHCYDkVE3aHQ03FrpEo4gEe2vrJJS1Y9CJTaThA52g==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-template-literals": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.1.tgz",
-      "integrity": "sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.7.tgz",
+      "integrity": "sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.5.tgz",
-      "integrity": "sha512-UTGnhYVZtTAjdwOTzT+sCyXmTn8AhaxOS/MjG9REclZ6ULHWF9KoCZur0HSGU7hk8PdBFKKbYe6+gqdXWz84Jg==",
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.8.tgz",
+      "integrity": "sha512-adNTUpDCVnmAE58VEqKlAA6ZBlNkMnWD0ZcW76lyNFN3MJniyGFZfNwERVk8Ap56MCnXztmDr19T4mPTztcuaw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.5"
+        "@babel/helper-plugin-utils": "^7.24.8"
       }
     },
     "@babel/plugin-transform-typescript": {
@@ -27992,66 +27559,67 @@
       }
     },
     "@babel/plugin-transform-unicode-escapes": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.1.tgz",
-      "integrity": "sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.7.tgz",
+      "integrity": "sha512-U3ap1gm5+4edc2Q/P+9VrBNhGkfnf+8ZqppY71Bo/pzZmXhhLdqgaUl6cuB07O1+AQJtCLfaOmswiNbSQ9ivhw==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-unicode-property-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.1.tgz",
-      "integrity": "sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.7.tgz",
+      "integrity": "sha512-uH2O4OV5M9FZYQrwc7NdVmMxQJOCCzFeYudlZSzUAHRFeOujQefa92E74TQDVskNHCzOXoigEuoyzHDhaEaK5w==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-unicode-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.1.tgz",
-      "integrity": "sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==",
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.7.tgz",
+      "integrity": "sha512-hlQ96MBZSAXUq7ltkjtu3FJCCSMx/j629ns3hA3pXnBXjanNP0LHi+JpPeA81zaWgVK1VGH95Xuy7u0RyQ8kMg==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       }
     },
     "@babel/plugin-transform-unicode-sets-regex": {
-      "version": "7.24.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.24.1.tgz",
-      "integrity": "sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.4.tgz",
+      "integrity": "sha512-qesBxiWkgN1Q+31xUE9RcMk79eOXXDCv6tfyGMRSs4RGlioSg2WVyQAm07k726cSE56pa+Kb0y9epX2qaXzTvA==",
       "dev": true,
       "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.22.15",
-        "@babel/helper-plugin-utils": "^7.24.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.25.2",
+        "@babel/helper-plugin-utils": "^7.24.8"
       }
     },
     "@babel/preset-env": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.24.5.tgz",
-      "integrity": "sha512-UGK2ifKtcC8i5AI4cH+sbLLuLc2ktYSFJgBAXorKAsHUZmrQ1q6aQ6i3BvU24wWs2AAKqQB6kq3N9V9Gw1HiMQ==",
-      "dev": true,
-      "requires": {
-        "@babel/compat-data": "^7.24.4",
-        "@babel/helper-compilation-targets": "^7.23.6",
-        "@babel/helper-plugin-utils": "^7.24.5",
-        "@babel/helper-validator-option": "^7.23.5",
-        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.24.5",
-        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.24.1",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.24.1",
-        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.24.1",
+      "version": "7.25.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.25.4.tgz",
+      "integrity": "sha512-W9Gyo+KmcxjGahtt3t9fb14vFRWvPpu5pT6GBlovAK6BTBcxgjfVMSQCfJl4oi35ODrxP6xx2Wr8LNST57Mraw==",
+      "dev": true,
+      "requires": {
+        "@babel/compat-data": "^7.25.4",
+        "@babel/helper-compilation-targets": "^7.25.2",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-validator-option": "^7.24.8",
+        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.25.3",
+        "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.25.0",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.25.0",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.24.7",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.25.0",
         "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
         "@babel/plugin-syntax-async-generators": "^7.8.4",
         "@babel/plugin-syntax-class-properties": "^7.12.13",
         "@babel/plugin-syntax-class-static-block": "^7.14.5",
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
-        "@babel/plugin-syntax-import-assertions": "^7.24.1",
-        "@babel/plugin-syntax-import-attributes": "^7.24.1",
+        "@babel/plugin-syntax-import-assertions": "^7.24.7",
+        "@babel/plugin-syntax-import-attributes": "^7.24.7",
         "@babel/plugin-syntax-import-meta": "^7.10.4",
         "@babel/plugin-syntax-json-strings": "^7.8.3",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
@@ -28063,59 +27631,60 @@
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
         "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
-        "@babel/plugin-transform-arrow-functions": "^7.24.1",
-        "@babel/plugin-transform-async-generator-functions": "^7.24.3",
-        "@babel/plugin-transform-async-to-generator": "^7.24.1",
-        "@babel/plugin-transform-block-scoped-functions": "^7.24.1",
-        "@babel/plugin-transform-block-scoping": "^7.24.5",
-        "@babel/plugin-transform-class-properties": "^7.24.1",
-        "@babel/plugin-transform-class-static-block": "^7.24.4",
-        "@babel/plugin-transform-classes": "^7.24.5",
-        "@babel/plugin-transform-computed-properties": "^7.24.1",
-        "@babel/plugin-transform-destructuring": "^7.24.5",
-        "@babel/plugin-transform-dotall-regex": "^7.24.1",
-        "@babel/plugin-transform-duplicate-keys": "^7.24.1",
-        "@babel/plugin-transform-dynamic-import": "^7.24.1",
-        "@babel/plugin-transform-exponentiation-operator": "^7.24.1",
-        "@babel/plugin-transform-export-namespace-from": "^7.24.1",
-        "@babel/plugin-transform-for-of": "^7.24.1",
-        "@babel/plugin-transform-function-name": "^7.24.1",
-        "@babel/plugin-transform-json-strings": "^7.24.1",
-        "@babel/plugin-transform-literals": "^7.24.1",
-        "@babel/plugin-transform-logical-assignment-operators": "^7.24.1",
-        "@babel/plugin-transform-member-expression-literals": "^7.24.1",
-        "@babel/plugin-transform-modules-amd": "^7.24.1",
-        "@babel/plugin-transform-modules-commonjs": "^7.24.1",
-        "@babel/plugin-transform-modules-systemjs": "^7.24.1",
-        "@babel/plugin-transform-modules-umd": "^7.24.1",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
-        "@babel/plugin-transform-new-target": "^7.24.1",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.1",
-        "@babel/plugin-transform-numeric-separator": "^7.24.1",
-        "@babel/plugin-transform-object-rest-spread": "^7.24.5",
-        "@babel/plugin-transform-object-super": "^7.24.1",
-        "@babel/plugin-transform-optional-catch-binding": "^7.24.1",
-        "@babel/plugin-transform-optional-chaining": "^7.24.5",
-        "@babel/plugin-transform-parameters": "^7.24.5",
-        "@babel/plugin-transform-private-methods": "^7.24.1",
-        "@babel/plugin-transform-private-property-in-object": "^7.24.5",
-        "@babel/plugin-transform-property-literals": "^7.24.1",
-        "@babel/plugin-transform-regenerator": "^7.24.1",
-        "@babel/plugin-transform-reserved-words": "^7.24.1",
-        "@babel/plugin-transform-shorthand-properties": "^7.24.1",
-        "@babel/plugin-transform-spread": "^7.24.1",
-        "@babel/plugin-transform-sticky-regex": "^7.24.1",
-        "@babel/plugin-transform-template-literals": "^7.24.1",
-        "@babel/plugin-transform-typeof-symbol": "^7.24.5",
-        "@babel/plugin-transform-unicode-escapes": "^7.24.1",
-        "@babel/plugin-transform-unicode-property-regex": "^7.24.1",
-        "@babel/plugin-transform-unicode-regex": "^7.24.1",
-        "@babel/plugin-transform-unicode-sets-regex": "^7.24.1",
+        "@babel/plugin-transform-arrow-functions": "^7.24.7",
+        "@babel/plugin-transform-async-generator-functions": "^7.25.4",
+        "@babel/plugin-transform-async-to-generator": "^7.24.7",
+        "@babel/plugin-transform-block-scoped-functions": "^7.24.7",
+        "@babel/plugin-transform-block-scoping": "^7.25.0",
+        "@babel/plugin-transform-class-properties": "^7.25.4",
+        "@babel/plugin-transform-class-static-block": "^7.24.7",
+        "@babel/plugin-transform-classes": "^7.25.4",
+        "@babel/plugin-transform-computed-properties": "^7.24.7",
+        "@babel/plugin-transform-destructuring": "^7.24.8",
+        "@babel/plugin-transform-dotall-regex": "^7.24.7",
+        "@babel/plugin-transform-duplicate-keys": "^7.24.7",
+        "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.25.0",
+        "@babel/plugin-transform-dynamic-import": "^7.24.7",
+        "@babel/plugin-transform-exponentiation-operator": "^7.24.7",
+        "@babel/plugin-transform-export-namespace-from": "^7.24.7",
+        "@babel/plugin-transform-for-of": "^7.24.7",
+        "@babel/plugin-transform-function-name": "^7.25.1",
+        "@babel/plugin-transform-json-strings": "^7.24.7",
+        "@babel/plugin-transform-literals": "^7.25.2",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
+        "@babel/plugin-transform-member-expression-literals": "^7.24.7",
+        "@babel/plugin-transform-modules-amd": "^7.24.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.24.8",
+        "@babel/plugin-transform-modules-systemjs": "^7.25.0",
+        "@babel/plugin-transform-modules-umd": "^7.24.7",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7",
+        "@babel/plugin-transform-new-target": "^7.24.7",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
+        "@babel/plugin-transform-numeric-separator": "^7.24.7",
+        "@babel/plugin-transform-object-rest-spread": "^7.24.7",
+        "@babel/plugin-transform-object-super": "^7.24.7",
+        "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
+        "@babel/plugin-transform-optional-chaining": "^7.24.8",
+        "@babel/plugin-transform-parameters": "^7.24.7",
+        "@babel/plugin-transform-private-methods": "^7.25.4",
+        "@babel/plugin-transform-private-property-in-object": "^7.24.7",
+        "@babel/plugin-transform-property-literals": "^7.24.7",
+        "@babel/plugin-transform-regenerator": "^7.24.7",
+        "@babel/plugin-transform-reserved-words": "^7.24.7",
+        "@babel/plugin-transform-shorthand-properties": "^7.24.7",
+        "@babel/plugin-transform-spread": "^7.24.7",
+        "@babel/plugin-transform-sticky-regex": "^7.24.7",
+        "@babel/plugin-transform-template-literals": "^7.24.7",
+        "@babel/plugin-transform-typeof-symbol": "^7.24.8",
+        "@babel/plugin-transform-unicode-escapes": "^7.24.7",
+        "@babel/plugin-transform-unicode-property-regex": "^7.24.7",
+        "@babel/plugin-transform-unicode-regex": "^7.24.7",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.25.4",
         "@babel/preset-modules": "0.1.6-no-external-plugins",
         "babel-plugin-polyfill-corejs2": "^0.4.10",
-        "babel-plugin-polyfill-corejs3": "^0.10.4",
+        "babel-plugin-polyfill-corejs3": "^0.10.6",
         "babel-plugin-polyfill-regenerator": "^0.6.1",
-        "core-js-compat": "^3.31.0",
+        "core-js-compat": "^3.37.1",
         "semver": "^6.3.1"
       },
       "dependencies": {
@@ -28193,42 +27762,39 @@
       }
     },
     "@babel/template": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
-      "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
+      "version": "7.25.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz",
+      "integrity": "sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "^7.23.5",
-        "@babel/parser": "^7.24.0",
-        "@babel/types": "^7.24.0"
+        "@babel/code-frame": "^7.24.7",
+        "@babel/parser": "^7.25.0",
+        "@babel/types": "^7.25.0"
       }
     },
     "@babel/traverse": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.5.tgz",
-      "integrity": "sha512-7aaBLeDQ4zYcUFDUD41lJc1fG8+5IU9DaNSJAgal866FGvmD5EbWQgnEC6kO1gGLsX0esNkfnJSndbTXA3r7UA==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.24.2",
-        "@babel/generator": "^7.24.5",
-        "@babel/helper-environment-visitor": "^7.22.20",
-        "@babel/helper-function-name": "^7.23.0",
-        "@babel/helper-hoist-variables": "^7.22.5",
-        "@babel/helper-split-export-declaration": "^7.24.5",
-        "@babel/parser": "^7.24.5",
-        "@babel/types": "^7.24.5",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.6.tgz",
+      "integrity": "sha512-9Vrcx5ZW6UwK5tvqsj0nGpp/XzqthkT0dqIc9g1AdtygFToNtTF67XzYS//dm+SAK9cp3B9R4ZO/46p63SCjlQ==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.24.7",
+        "@babel/generator": "^7.25.6",
+        "@babel/parser": "^7.25.6",
+        "@babel/template": "^7.25.0",
+        "@babel/types": "^7.25.6",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       }
     },
     "@babel/types": {
-      "version": "7.24.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.5.tgz",
-      "integrity": "sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==",
+      "version": "7.25.6",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
+      "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
       "dev": true,
       "requires": {
-        "@babel/helper-string-parser": "^7.24.1",
-        "@babel/helper-validator-identifier": "^7.24.5",
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -28411,9 +27977,9 @@
       }
     },
     "@lit-labs/ssr-dom-shim": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
-      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz",
+      "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ=="
     },
     "@lit/reactive-element": {
       "version": "2.0.4",
@@ -28547,6 +28113,12 @@
         "fastq": "^1.6.0"
       }
     },
+    "@nolyfill/is-core-module": {
+      "version": "1.0.39",
+      "resolved": "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz",
+      "integrity": "sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==",
+      "dev": true
+    },
     "@npmcli/fs": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@npmcli/fs/-/fs-1.1.1.tgz",
@@ -28595,13 +28167,13 @@
       }
     },
     "@open-wc/semantic-dom-diff": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.20.0.tgz",
-      "integrity": "sha512-qGHl3nkXluXsjpLY9bSZka/cnlrybPtJMs6RjmV/OP4ID7Gcz1uNWQks05pAhptDB1R47G6PQjdwxG8dXl1zGA==",
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.20.1.tgz",
+      "integrity": "sha512-mPF/RPT2TU7Dw41LEDdaeP6eyTOWBD4z0+AHP4/d0SbgcfJZVRymlIB6DQmtz0fd2CImIS9kszaMmwMt92HBPA==",
       "dev": true,
       "requires": {
         "@types/chai": "^4.3.1",
-        "@web/test-runner-commands": "^0.7.0"
+        "@web/test-runner-commands": "^0.9.0"
       }
     },
     "@open-wc/testing": {
@@ -28636,29 +28208,26 @@
       "dev": true
     },
     "@puppeteer/browsers": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.2.3.tgz",
-      "integrity": "sha512-bJ0UBsk0ESOs6RFcLXOt99a3yTDcOKlzfjad+rhFwdaG1Lu/Wzq58GHYCDTlZ9z6mldf4g+NTb+TXEfe0PpnsQ==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.4.0.tgz",
+      "integrity": "sha512-x8J1csfIygOwf6D6qUAZ0ASk3z63zPb7wkNeHRerCMh82qWKUrOgkuP005AJC8lDL6/evtXETGEJVcwykKT4/g==",
       "dev": true,
       "requires": {
-        "debug": "4.3.4",
-        "extract-zip": "2.0.1",
-        "progress": "2.0.3",
-        "proxy-agent": "6.4.0",
-        "semver": "7.6.0",
-        "tar-fs": "3.0.5",
-        "unbzip2-stream": "1.4.3",
-        "yargs": "17.7.2"
+        "debug": "^4.3.6",
+        "extract-zip": "^2.0.1",
+        "progress": "^2.0.3",
+        "proxy-agent": "^6.4.0",
+        "semver": "^7.6.3",
+        "tar-fs": "^3.0.6",
+        "unbzip2-stream": "^1.4.3",
+        "yargs": "^17.7.2"
       },
       "dependencies": {
         "semver": {
-          "version": "7.6.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
-          "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
+          "version": "7.6.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+          "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+          "dev": true
         }
       }
     },
@@ -28688,96 +28257,123 @@
       }
     },
     "@rollup/rollup-android-arm-eabi": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz",
-      "integrity": "sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz",
+      "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==",
       "dev": true,
       "optional": true
     },
     "@rollup/rollup-android-arm64": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.6.tgz",
-      "integrity": "sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz",
+      "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==",
       "dev": true,
       "optional": true
     },
     "@rollup/rollup-darwin-arm64": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.6.tgz",
-      "integrity": "sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz",
+      "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==",
       "dev": true,
       "optional": true
     },
     "@rollup/rollup-darwin-x64": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.6.tgz",
-      "integrity": "sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz",
+      "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==",
       "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.6.tgz",
-      "integrity": "sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz",
+      "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz",
+      "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==",
       "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.6.tgz",
-      "integrity": "sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz",
+      "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==",
       "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-arm64-musl": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.6.tgz",
-      "integrity": "sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz",
+      "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz",
+      "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==",
       "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.6.tgz",
-      "integrity": "sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz",
+      "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==",
+      "dev": true,
+      "optional": true
+    },
+    "@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz",
+      "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==",
       "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-x64-gnu": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.6.tgz",
-      "integrity": "sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz",
+      "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==",
       "dev": true,
       "optional": true
     },
     "@rollup/rollup-linux-x64-musl": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.6.tgz",
-      "integrity": "sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz",
+      "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==",
       "dev": true,
       "optional": true
     },
     "@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.6.tgz",
-      "integrity": "sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz",
+      "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==",
       "dev": true,
       "optional": true
     },
     "@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.6.tgz",
-      "integrity": "sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz",
+      "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==",
       "dev": true,
       "optional": true
     },
     "@rollup/rollup-win32-x64-msvc": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.6.tgz",
-      "integrity": "sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz",
+      "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==",
       "dev": true,
       "optional": true
     },
+    "@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true
+    },
     "@storybook/addon-a11y": {
       "version": "6.5.16",
       "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-6.5.16.tgz",
@@ -29730,9 +29326,9 @@
           }
         },
         "webpack": {
-          "version": "4.46.0",
-          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-          "integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
+          "version": "4.47.0",
+          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.47.0.tgz",
+          "integrity": "sha512-td7fYwgLSrky3fI1EuU5cneU4+pbH6GgOfuKNS1tNPcfdGinGELAqsb/BP4nnvZyKSG2i/xFGU7+n2PvZA8HJQ==",
           "dev": true,
           "requires": {
             "@webassemblyjs/ast": "1.9.0",
@@ -29911,9 +29507,9 @@
               }
             },
             "terser-webpack-plugin": {
-              "version": "1.4.5",
-              "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-              "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+              "version": "1.4.6",
+              "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+              "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
               "dev": true,
               "requires": {
                 "cacache": "^12.0.2",
@@ -30868,9 +30464,9 @@
           }
         },
         "terser-webpack-plugin": {
-          "version": "1.4.5",
-          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-          "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+          "version": "1.4.6",
+          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+          "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
           "dev": true,
           "requires": {
             "cacache": "^12.0.2",
@@ -30990,9 +30586,9 @@
           }
         },
         "webpack": {
-          "version": "4.46.0",
-          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-          "integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
+          "version": "4.47.0",
+          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.47.0.tgz",
+          "integrity": "sha512-td7fYwgLSrky3fI1EuU5cneU4+pbH6GgOfuKNS1tNPcfdGinGELAqsb/BP4nnvZyKSG2i/xFGU7+n2PvZA8HJQ==",
           "dev": true,
           "requires": {
             "@webassemblyjs/ast": "1.9.0",
@@ -31617,9 +31213,9 @@
           }
         },
         "terser-webpack-plugin": {
-          "version": "1.4.5",
-          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-          "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+          "version": "1.4.6",
+          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+          "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
           "dev": true,
           "requires": {
             "cacache": "^12.0.2",
@@ -31644,9 +31240,9 @@
           }
         },
         "webpack": {
-          "version": "4.46.0",
-          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-          "integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
+          "version": "4.47.0",
+          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.47.0.tgz",
+          "integrity": "sha512-td7fYwgLSrky3fI1EuU5cneU4+pbH6GgOfuKNS1tNPcfdGinGELAqsb/BP4nnvZyKSG2i/xFGU7+n2PvZA8HJQ==",
           "dev": true,
           "requires": {
             "@webassemblyjs/ast": "1.9.0",
@@ -32540,9 +32136,9 @@
           }
         },
         "webpack": {
-          "version": "4.46.0",
-          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.46.0.tgz",
-          "integrity": "sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==",
+          "version": "4.47.0",
+          "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.47.0.tgz",
+          "integrity": "sha512-td7fYwgLSrky3fI1EuU5cneU4+pbH6GgOfuKNS1tNPcfdGinGELAqsb/BP4nnvZyKSG2i/xFGU7+n2PvZA8HJQ==",
           "dev": true,
           "requires": {
             "@webassemblyjs/ast": "1.9.0",
@@ -32721,9 +32317,9 @@
               }
             },
             "terser-webpack-plugin": {
-              "version": "1.4.5",
-              "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-              "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+              "version": "1.4.6",
+              "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.6.tgz",
+              "integrity": "sha512-2lBVf/VMVIddjSn3GqbT90GvIJ/eYXJkt8cTzU7NbjKqK8fwv18Ftr4PlbF46b/e88743iZFL5Dtr/rC4hjIeA==",
               "dev": true,
               "requires": {
                 "cacache": "^12.0.2",
@@ -33484,21 +33080,13 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.5.tgz",
       "integrity": "sha512-dhsC09y1gpJWnK+Ff4SGvCuSnk9DaU0BJZSzOwa6GVSg65XtTugLBITDAAzRU5duGBoXBHpdR/9jHGxJjNflJQ==",
       "dev": true,
+      "optional": true,
+      "peer": true,
       "requires": {
         "@types/estree": "*",
         "@types/json-schema": "*"
       }
     },
-    "@types/eslint-scope": {
-      "version": "3.7.4",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.4.tgz",
-      "integrity": "sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==",
-      "dev": true,
-      "requires": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -33666,9 +33254,9 @@
       "dev": true
     },
     "@types/mocha": {
-      "version": "10.0.6",
-      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-10.0.6.tgz",
-      "integrity": "sha512-dJvrYWxP/UcXm36Qn36fxhUKu8A/xMRXVT2cliFF1Z7UA9liG5Psj3ezNSZw+5puH2czDXRLcXQxf8JbJt0ejg==",
+      "version": "10.0.8",
+      "resolved": "https://registry.npmjs.org/@types/mocha/-/mocha-10.0.8.tgz",
+      "integrity": "sha512-HfMcUmy9hTMJh66VNcmeC9iVErIZJli2bszuXc6julh5YGuRb/W5OnkHjwLNYdFlMis0sY3If5SEAp+PktdJjw==",
       "dev": true
     },
     "@types/node": {
@@ -33809,9 +33397,9 @@
       "dev": true
     },
     "@types/uuid": {
-      "version": "9.0.8",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
-      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
       "dev": true
     },
     "@types/webpack": {
@@ -34022,9 +33610,9 @@
       "dev": true
     },
     "@web/browser-logs": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.3.2.tgz",
-      "integrity": "sha512-4kYoH4XBpOnrYAzlG3M9fy3kj7jhUgOLXsBcdC5n4oALYzgX57mt2MeJT4LkdgLWbCGRl1K8KaZhOKgH4RktxQ==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz",
+      "integrity": "sha512-/EBiDAUCJ2DzZhaFxTPRIznEPeafdLbXShIL6aTu7x73x7ZoxSDv7DGuTsh2rWNMUa4+AKli4UORrpyv6QBOiA==",
       "dev": true,
       "requires": {
         "errorstacks": "^2.2.0"
@@ -34037,83 +33625,36 @@
       "dev": true
     },
     "@web/dev-server": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@web/dev-server/-/dev-server-0.4.1.tgz",
-      "integrity": "sha512-GHeyH8MBZQpODFiHiXAdX4hOVbeDyD/DUermUinh/nexWAZUcXyXa200RItuAL6b25MQ3D/5hKNDypujSvXxiw==",
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/@web/dev-server/-/dev-server-0.4.6.tgz",
+      "integrity": "sha512-jj/1bcElAy5EZet8m2CcUdzxT+CRvUjIXGh8Lt7vxtthkN9PzY9wlhWx/9WOs5iwlnG1oj0VGo6f/zvbPO0s9w==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.11",
         "@types/command-line-args": "^5.0.0",
         "@web/config-loader": "^0.3.0",
-        "@web/dev-server-core": "^0.7.0",
+        "@web/dev-server-core": "^0.7.2",
         "@web/dev-server-rollup": "^0.6.1",
         "camelcase": "^6.2.0",
         "command-line-args": "^5.1.1",
         "command-line-usage": "^7.0.1",
         "debounce": "^1.2.0",
         "deepmerge": "^4.2.2",
-        "ip": "^1.1.5",
+        "internal-ip": "^6.2.0",
         "nanocolors": "^0.2.1",
         "open": "^8.0.2",
         "portfinder": "^1.0.32"
-      },
-      "dependencies": {
-        "@web/dev-server-core": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.0.tgz",
-          "integrity": "sha512-1FJe6cJ3r0x0ZmxY/FnXVduQD4lKX7QgYhyS6N+VmIpV+tBU4sGRbcrmeoYeY+nlnPa6p2oNuonk3X5ln/W95g==",
-          "dev": true,
-          "requires": {
-            "@types/koa": "^2.11.6",
-            "@types/ws": "^7.4.0",
-            "@web/parse5-utils": "^2.1.0",
-            "chokidar": "^3.4.3",
-            "clone": "^2.1.2",
-            "es-module-lexer": "^1.0.0",
-            "get-stream": "^6.0.0",
-            "is-stream": "^2.0.0",
-            "isbinaryfile": "^5.0.0",
-            "koa": "^2.13.0",
-            "koa-etag": "^4.0.0",
-            "koa-send": "^5.0.1",
-            "koa-static": "^5.0.0",
-            "lru-cache": "^8.0.4",
-            "mime-types": "^2.1.27",
-            "parse5": "^6.0.1",
-            "picomatch": "^2.2.2",
-            "ws": "^7.4.2"
-          }
-        },
-        "ip": {
-          "version": "1.1.9",
-          "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
-          "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
-          "dev": true
-        },
-        "lru-cache": {
-          "version": "8.0.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
-          "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
-          "dev": true
-        },
-        "ws": {
-          "version": "7.5.9",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-          "dev": true,
-          "requires": {}
-        }
       }
     },
     "@web/dev-server-core": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.5.1.tgz",
-      "integrity": "sha512-pXgb4bjDmPIaIQT9luixTSqTvRQxttUEzSKOZqLNl6pVgrl4n47ZtmZte936G2tM7nHmpT+oaMDDtCM0CgbQNQ==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.2.tgz",
+      "integrity": "sha512-Q/0jpF13Ipk+qGGQ+Yx/FW1TQBYazpkfgYHHo96HBE7qv4V4KKHqHglZcSUxti/zd4bToxX1cFTz8dmbTlb8JA==",
       "dev": true,
       "requires": {
         "@types/koa": "^2.11.6",
         "@types/ws": "^7.4.0",
-        "@web/parse5-utils": "^2.0.0",
+        "@web/parse5-utils": "^2.1.0",
         "chokidar": "^3.4.3",
         "clone": "^2.1.2",
         "es-module-lexer": "^1.0.0",
@@ -34138,9 +33679,9 @@
           "dev": true
         },
         "ws": {
-          "version": "7.5.9",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
+          "version": "7.5.10",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
+          "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==",
           "dev": true,
           "requires": {}
         }
@@ -34158,47 +33699,6 @@
         "parse5": "^6.0.1",
         "rollup": "^4.4.0",
         "whatwg-url": "^11.0.0"
-      },
-      "dependencies": {
-        "@web/dev-server-core": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.0.tgz",
-          "integrity": "sha512-1FJe6cJ3r0x0ZmxY/FnXVduQD4lKX7QgYhyS6N+VmIpV+tBU4sGRbcrmeoYeY+nlnPa6p2oNuonk3X5ln/W95g==",
-          "dev": true,
-          "requires": {
-            "@types/koa": "^2.11.6",
-            "@types/ws": "^7.4.0",
-            "@web/parse5-utils": "^2.1.0",
-            "chokidar": "^3.4.3",
-            "clone": "^2.1.2",
-            "es-module-lexer": "^1.0.0",
-            "get-stream": "^6.0.0",
-            "is-stream": "^2.0.0",
-            "isbinaryfile": "^5.0.0",
-            "koa": "^2.13.0",
-            "koa-etag": "^4.0.0",
-            "koa-send": "^5.0.1",
-            "koa-static": "^5.0.0",
-            "lru-cache": "^8.0.4",
-            "mime-types": "^2.1.27",
-            "parse5": "^6.0.1",
-            "picomatch": "^2.2.2",
-            "ws": "^7.4.2"
-          }
-        },
-        "lru-cache": {
-          "version": "8.0.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
-          "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
-          "dev": true
-        },
-        "ws": {
-          "version": "7.5.9",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-          "dev": true,
-          "requires": {}
-        }
       }
     },
     "@web/parse5-utils": {
@@ -34212,15 +33712,15 @@
       }
     },
     "@web/test-runner": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/@web/test-runner/-/test-runner-0.18.1.tgz",
-      "integrity": "sha512-jB/9vrpGVtcLY6/7sPpKpSheQ3wWY9P5aQcz2SK2gMHTq3gNpa51NAyec0Al7EFpHvJ1wKYTGRLB2gPyEoJeDg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@web/test-runner/-/test-runner-0.19.0.tgz",
+      "integrity": "sha512-qLUupi88OK1Kl52cWPD/2JewUCRUxYsZ1V1DyLd05P7u09zCdrUYrtkB/cViWyxlBe/TOvqkSNpcTv6zLJ9GoA==",
       "dev": true,
       "requires": {
         "@web/browser-logs": "^0.4.0",
         "@web/config-loader": "^0.3.0",
         "@web/dev-server": "^0.4.0",
-        "@web/test-runner-chrome": "^0.16.0",
+        "@web/test-runner-chrome": "^0.17.0",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-core": "^0.13.0",
         "@web/test-runner-mocha": "^0.9.0",
@@ -34235,85 +33735,6 @@
         "source-map": "^0.7.3"
       },
       "dependencies": {
-        "@web/browser-logs": {
-          "version": "0.4.0",
-          "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz",
-          "integrity": "sha512-/EBiDAUCJ2DzZhaFxTPRIznEPeafdLbXShIL6aTu7x73x7ZoxSDv7DGuTsh2rWNMUa4+AKli4UORrpyv6QBOiA==",
-          "dev": true,
-          "requires": {
-            "errorstacks": "^2.2.0"
-          }
-        },
-        "@web/dev-server-core": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.0.tgz",
-          "integrity": "sha512-1FJe6cJ3r0x0ZmxY/FnXVduQD4lKX7QgYhyS6N+VmIpV+tBU4sGRbcrmeoYeY+nlnPa6p2oNuonk3X5ln/W95g==",
-          "dev": true,
-          "requires": {
-            "@types/koa": "^2.11.6",
-            "@types/ws": "^7.4.0",
-            "@web/parse5-utils": "^2.1.0",
-            "chokidar": "^3.4.3",
-            "clone": "^2.1.2",
-            "es-module-lexer": "^1.0.0",
-            "get-stream": "^6.0.0",
-            "is-stream": "^2.0.0",
-            "isbinaryfile": "^5.0.0",
-            "koa": "^2.13.0",
-            "koa-etag": "^4.0.0",
-            "koa-send": "^5.0.1",
-            "koa-static": "^5.0.0",
-            "lru-cache": "^8.0.4",
-            "mime-types": "^2.1.27",
-            "parse5": "^6.0.1",
-            "picomatch": "^2.2.2",
-            "ws": "^7.4.2"
-          }
-        },
-        "@web/test-runner-commands": {
-          "version": "0.9.0",
-          "resolved": "https://registry.npmjs.org/@web/test-runner-commands/-/test-runner-commands-0.9.0.tgz",
-          "integrity": "sha512-zeLI6QdH0jzzJMDV5O42Pd8WLJtYqovgdt0JdytgHc0d1EpzXDsc7NTCJSImboc2NcayIsWAvvGGeRF69SMMYg==",
-          "dev": true,
-          "requires": {
-            "@web/test-runner-core": "^0.13.0",
-            "mkdirp": "^1.0.4"
-          }
-        },
-        "@web/test-runner-core": {
-          "version": "0.13.0",
-          "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.13.0.tgz",
-          "integrity": "sha512-mUrETPg9n4dHWEk+D46BU3xVhQf+ljT4cG7FSpmF7AIOsXWgWHoaXp6ReeVcEmM5fmznXec2O/apTb9hpGrP3w==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.12.11",
-            "@types/babel__code-frame": "^7.0.2",
-            "@types/co-body": "^6.1.0",
-            "@types/convert-source-map": "^2.0.0",
-            "@types/debounce": "^1.2.0",
-            "@types/istanbul-lib-coverage": "^2.0.3",
-            "@types/istanbul-reports": "^3.0.0",
-            "@web/browser-logs": "^0.4.0",
-            "@web/dev-server-core": "^0.7.0",
-            "chokidar": "^3.4.3",
-            "cli-cursor": "^3.1.0",
-            "co-body": "^6.1.0",
-            "convert-source-map": "^2.0.0",
-            "debounce": "^1.2.0",
-            "dependency-graph": "^0.11.0",
-            "globby": "^11.0.1",
-            "ip": "^1.1.5",
-            "istanbul-lib-coverage": "^3.0.0",
-            "istanbul-lib-report": "^3.0.1",
-            "istanbul-reports": "^3.0.2",
-            "log-update": "^4.0.0",
-            "nanocolors": "^0.2.1",
-            "nanoid": "^3.1.25",
-            "open": "^8.0.2",
-            "picomatch": "^2.2.2",
-            "source-map": "^0.7.3"
-          }
-        },
         "convert-source-map": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -34326,156 +33747,41 @@
           "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
           "dev": true
         },
-        "ip": {
-          "version": "1.1.9",
-          "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
-          "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
-          "dev": true
-        },
-        "lru-cache": {
-          "version": "8.0.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
-          "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
-          "dev": true
-        },
         "source-map": {
           "version": "0.7.4",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
           "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
           "dev": true
-        },
-        "ws": {
-          "version": "7.5.9",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-          "dev": true,
-          "requires": {}
         }
       }
     },
     "@web/test-runner-chrome": {
-      "version": "0.16.0",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-chrome/-/test-runner-chrome-0.16.0.tgz",
-      "integrity": "sha512-Edc6Y49aVB6k18S5IOj9OCX3rEf8F3jptIu0p95+imqxmcutFEh1GNmlAk2bQGnXS0U6uVY7Xbf61fiaXUQqhg==",
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-chrome/-/test-runner-chrome-0.17.0.tgz",
+      "integrity": "sha512-Il5N9z41NKWCrQM1TVgRaDWWYoJtG5Ha4fG+cN1MWL2OlzBS4WoOb4lFV3EylZ7+W3twZOFr1zy2Rx61yDYd/A==",
       "dev": true,
       "requires": {
         "@web/test-runner-core": "^0.13.0",
         "@web/test-runner-coverage-v8": "^0.8.0",
         "async-mutex": "0.4.0",
         "chrome-launcher": "^0.15.0",
-        "puppeteer-core": "^22.0.0"
-      },
-      "dependencies": {
-        "@web/browser-logs": {
-          "version": "0.4.0",
-          "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz",
-          "integrity": "sha512-/EBiDAUCJ2DzZhaFxTPRIznEPeafdLbXShIL6aTu7x73x7ZoxSDv7DGuTsh2rWNMUa4+AKli4UORrpyv6QBOiA==",
-          "dev": true,
-          "requires": {
-            "errorstacks": "^2.2.0"
-          }
-        },
-        "@web/dev-server-core": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.1.tgz",
-          "integrity": "sha512-alHd2j0f4e1ekqYDR8lWScrzR7D5gfsUZq3BP3De9bkFWM3AELINCmqqlVKmCtlkAdEc9VyQvNiEqrxraOdc2A==",
-          "dev": true,
-          "requires": {
-            "@types/koa": "^2.11.6",
-            "@types/ws": "^7.4.0",
-            "@web/parse5-utils": "^2.1.0",
-            "chokidar": "^3.4.3",
-            "clone": "^2.1.2",
-            "es-module-lexer": "^1.0.0",
-            "get-stream": "^6.0.0",
-            "is-stream": "^2.0.0",
-            "isbinaryfile": "^5.0.0",
-            "koa": "^2.13.0",
-            "koa-etag": "^4.0.0",
-            "koa-send": "^5.0.1",
-            "koa-static": "^5.0.0",
-            "lru-cache": "^8.0.4",
-            "mime-types": "^2.1.27",
-            "parse5": "^6.0.1",
-            "picomatch": "^2.2.2",
-            "ws": "^7.4.2"
-          }
-        },
-        "@web/test-runner-core": {
-          "version": "0.13.1",
-          "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.13.1.tgz",
-          "integrity": "sha512-2hESALx/UFsAzK+ApWXAkFp2eCmwcs2yj1v4YjwV8F38sQumJ40P3px3BMjFwkOYDORtQOicW0RUeSw1g3BMLA==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.12.11",
-            "@types/babel__code-frame": "^7.0.2",
-            "@types/co-body": "^6.1.0",
-            "@types/convert-source-map": "^2.0.0",
-            "@types/debounce": "^1.2.0",
-            "@types/istanbul-lib-coverage": "^2.0.3",
-            "@types/istanbul-reports": "^3.0.0",
-            "@web/browser-logs": "^0.4.0",
-            "@web/dev-server-core": "^0.7.0",
-            "chokidar": "^3.4.3",
-            "cli-cursor": "^3.1.0",
-            "co-body": "^6.1.0",
-            "convert-source-map": "^2.0.0",
-            "debounce": "^1.2.0",
-            "dependency-graph": "^0.11.0",
-            "globby": "^11.0.1",
-            "ip": "^2.0.1",
-            "istanbul-lib-coverage": "^3.0.0",
-            "istanbul-lib-report": "^3.0.1",
-            "istanbul-reports": "^3.0.2",
-            "log-update": "^4.0.0",
-            "nanocolors": "^0.2.1",
-            "nanoid": "^3.1.25",
-            "open": "^8.0.2",
-            "picomatch": "^2.2.2",
-            "source-map": "^0.7.3"
-          }
-        },
-        "convert-source-map": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-          "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-          "dev": true
-        },
-        "lru-cache": {
-          "version": "8.0.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
-          "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-          "dev": true
-        },
-        "ws": {
-          "version": "7.5.9",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-          "dev": true,
-          "requires": {}
-        }
+        "puppeteer-core": "^23.2.0"
       }
     },
     "@web/test-runner-commands": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-commands/-/test-runner-commands-0.7.0.tgz",
-      "integrity": "sha512-3aXeGrkynOdJ5jgZu5ZslcWmWuPVY9/HNdWDUqPyNePG08PKmLV9Ij342ODDL6OVsxF5dvYn1312PhDqu5AQNw==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-commands/-/test-runner-commands-0.9.0.tgz",
+      "integrity": "sha512-zeLI6QdH0jzzJMDV5O42Pd8WLJtYqovgdt0JdytgHc0d1EpzXDsc7NTCJSImboc2NcayIsWAvvGGeRF69SMMYg==",
       "dev": true,
       "requires": {
-        "@web/test-runner-core": "^0.11.0",
+        "@web/test-runner-core": "^0.13.0",
         "mkdirp": "^1.0.4"
       }
     },
     "@web/test-runner-core": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.11.2.tgz",
-      "integrity": "sha512-7padi7pGg2xSW/i6iSApUwxlNaHv2bFBM+MiivkzJ0vet/a/+Fz35bOo8L8Ra7b/1my4VYBsPcWX0PVPowbXRg==",
+      "version": "0.13.3",
+      "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.13.3.tgz",
+      "integrity": "sha512-ilDqF/v2sj0sD69FNSIDT7uw4M1yTVedLBt32/lXy3MMi6suCM7m/ZlhsBy8PXhf879WMvzBOl/vhJBpEMB9vA==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.12.11",
@@ -34485,8 +33791,8 @@
         "@types/debounce": "^1.2.0",
         "@types/istanbul-lib-coverage": "^2.0.3",
         "@types/istanbul-reports": "^3.0.0",
-        "@web/browser-logs": "^0.3.2",
-        "@web/dev-server-core": "^0.5.1",
+        "@web/browser-logs": "^0.4.0",
+        "@web/dev-server-core": "^0.7.2",
         "chokidar": "^3.4.3",
         "cli-cursor": "^3.1.0",
         "co-body": "^6.1.0",
@@ -34494,9 +33800,9 @@
         "debounce": "^1.2.0",
         "dependency-graph": "^0.11.0",
         "globby": "^11.0.1",
-        "ip": "^1.1.5",
+        "internal-ip": "^6.2.0",
         "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-report": "^3.0.1",
         "istanbul-reports": "^3.0.2",
         "log-update": "^4.0.0",
         "nanocolors": "^0.2.1",
@@ -34512,12 +33818,6 @@
           "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
           "dev": true
         },
-        "ip": {
-          "version": "1.1.9",
-          "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
-          "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
-          "dev": true
-        },
         "source-map": {
           "version": "0.7.4",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
@@ -34539,99 +33839,11 @@
         "v8-to-istanbul": "^9.0.1"
       },
       "dependencies": {
-        "@web/browser-logs": {
-          "version": "0.4.0",
-          "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz",
-          "integrity": "sha512-/EBiDAUCJ2DzZhaFxTPRIznEPeafdLbXShIL6aTu7x73x7ZoxSDv7DGuTsh2rWNMUa4+AKli4UORrpyv6QBOiA==",
-          "dev": true,
-          "requires": {
-            "errorstacks": "^2.2.0"
-          }
-        },
-        "@web/dev-server-core": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.1.tgz",
-          "integrity": "sha512-alHd2j0f4e1ekqYDR8lWScrzR7D5gfsUZq3BP3De9bkFWM3AELINCmqqlVKmCtlkAdEc9VyQvNiEqrxraOdc2A==",
-          "dev": true,
-          "requires": {
-            "@types/koa": "^2.11.6",
-            "@types/ws": "^7.4.0",
-            "@web/parse5-utils": "^2.1.0",
-            "chokidar": "^3.4.3",
-            "clone": "^2.1.2",
-            "es-module-lexer": "^1.0.0",
-            "get-stream": "^6.0.0",
-            "is-stream": "^2.0.0",
-            "isbinaryfile": "^5.0.0",
-            "koa": "^2.13.0",
-            "koa-etag": "^4.0.0",
-            "koa-send": "^5.0.1",
-            "koa-static": "^5.0.0",
-            "lru-cache": "^8.0.4",
-            "mime-types": "^2.1.27",
-            "parse5": "^6.0.1",
-            "picomatch": "^2.2.2",
-            "ws": "^7.4.2"
-          }
-        },
-        "@web/test-runner-core": {
-          "version": "0.13.1",
-          "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.13.1.tgz",
-          "integrity": "sha512-2hESALx/UFsAzK+ApWXAkFp2eCmwcs2yj1v4YjwV8F38sQumJ40P3px3BMjFwkOYDORtQOicW0RUeSw1g3BMLA==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.12.11",
-            "@types/babel__code-frame": "^7.0.2",
-            "@types/co-body": "^6.1.0",
-            "@types/convert-source-map": "^2.0.0",
-            "@types/debounce": "^1.2.0",
-            "@types/istanbul-lib-coverage": "^2.0.3",
-            "@types/istanbul-reports": "^3.0.0",
-            "@web/browser-logs": "^0.4.0",
-            "@web/dev-server-core": "^0.7.0",
-            "chokidar": "^3.4.3",
-            "cli-cursor": "^3.1.0",
-            "co-body": "^6.1.0",
-            "convert-source-map": "^2.0.0",
-            "debounce": "^1.2.0",
-            "dependency-graph": "^0.11.0",
-            "globby": "^11.0.1",
-            "ip": "^2.0.1",
-            "istanbul-lib-coverage": "^3.0.0",
-            "istanbul-lib-report": "^3.0.1",
-            "istanbul-reports": "^3.0.2",
-            "log-update": "^4.0.0",
-            "nanocolors": "^0.2.1",
-            "nanoid": "^3.1.25",
-            "open": "^8.0.2",
-            "picomatch": "^2.2.2",
-            "source-map": "^0.7.3"
-          }
-        },
-        "convert-source-map": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-          "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-          "dev": true
-        },
         "lru-cache": {
           "version": "8.0.5",
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
           "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
           "dev": true
-        },
-        "source-map": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-          "dev": true
-        },
-        "ws": {
-          "version": "7.5.9",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-          "dev": true,
-          "requires": {}
         }
       }
     },
@@ -34642,108 +33854,6 @@
       "dev": true,
       "requires": {
         "@web/test-runner-core": "^0.13.0"
-      },
-      "dependencies": {
-        "@web/browser-logs": {
-          "version": "0.4.0",
-          "resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz",
-          "integrity": "sha512-/EBiDAUCJ2DzZhaFxTPRIznEPeafdLbXShIL6aTu7x73x7ZoxSDv7DGuTsh2rWNMUa4+AKli4UORrpyv6QBOiA==",
-          "dev": true,
-          "requires": {
-            "errorstacks": "^2.2.0"
-          }
-        },
-        "@web/dev-server-core": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.0.tgz",
-          "integrity": "sha512-1FJe6cJ3r0x0ZmxY/FnXVduQD4lKX7QgYhyS6N+VmIpV+tBU4sGRbcrmeoYeY+nlnPa6p2oNuonk3X5ln/W95g==",
-          "dev": true,
-          "requires": {
-            "@types/koa": "^2.11.6",
-            "@types/ws": "^7.4.0",
-            "@web/parse5-utils": "^2.1.0",
-            "chokidar": "^3.4.3",
-            "clone": "^2.1.2",
-            "es-module-lexer": "^1.0.0",
-            "get-stream": "^6.0.0",
-            "is-stream": "^2.0.0",
-            "isbinaryfile": "^5.0.0",
-            "koa": "^2.13.0",
-            "koa-etag": "^4.0.0",
-            "koa-send": "^5.0.1",
-            "koa-static": "^5.0.0",
-            "lru-cache": "^8.0.4",
-            "mime-types": "^2.1.27",
-            "parse5": "^6.0.1",
-            "picomatch": "^2.2.2",
-            "ws": "^7.4.2"
-          }
-        },
-        "@web/test-runner-core": {
-          "version": "0.13.0",
-          "resolved": "https://registry.npmjs.org/@web/test-runner-core/-/test-runner-core-0.13.0.tgz",
-          "integrity": "sha512-mUrETPg9n4dHWEk+D46BU3xVhQf+ljT4cG7FSpmF7AIOsXWgWHoaXp6ReeVcEmM5fmznXec2O/apTb9hpGrP3w==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.12.11",
-            "@types/babel__code-frame": "^7.0.2",
-            "@types/co-body": "^6.1.0",
-            "@types/convert-source-map": "^2.0.0",
-            "@types/debounce": "^1.2.0",
-            "@types/istanbul-lib-coverage": "^2.0.3",
-            "@types/istanbul-reports": "^3.0.0",
-            "@web/browser-logs": "^0.4.0",
-            "@web/dev-server-core": "^0.7.0",
-            "chokidar": "^3.4.3",
-            "cli-cursor": "^3.1.0",
-            "co-body": "^6.1.0",
-            "convert-source-map": "^2.0.0",
-            "debounce": "^1.2.0",
-            "dependency-graph": "^0.11.0",
-            "globby": "^11.0.1",
-            "ip": "^1.1.5",
-            "istanbul-lib-coverage": "^3.0.0",
-            "istanbul-lib-report": "^3.0.1",
-            "istanbul-reports": "^3.0.2",
-            "log-update": "^4.0.0",
-            "nanocolors": "^0.2.1",
-            "nanoid": "^3.1.25",
-            "open": "^8.0.2",
-            "picomatch": "^2.2.2",
-            "source-map": "^0.7.3"
-          }
-        },
-        "convert-source-map": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
-          "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
-          "dev": true
-        },
-        "ip": {
-          "version": "1.1.9",
-          "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.9.tgz",
-          "integrity": "sha512-cyRxvOEpNHNtchU3Ln9KC/auJgup87llfQpQ+t5ghoC/UhL16SWzbueiCsdTnWmqAWl7LadfuwhlqmtOaqMHdQ==",
-          "dev": true
-        },
-        "lru-cache": {
-          "version": "8.0.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-8.0.5.tgz",
-          "integrity": "sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.7.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
-          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-          "dev": true
-        },
-        "ws": {
-          "version": "7.5.9",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
-          "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-          "dev": true,
-          "requires": {}
-        }
       }
     },
     "@webassemblyjs/ast": {
@@ -35064,10 +34174,10 @@
       "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
       "dev": true
     },
-    "acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "dev": true,
       "requires": {}
     },
@@ -35340,15 +34450,16 @@
       "dev": true
     },
     "array-includes": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.7.tgz",
-      "integrity": "sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==",
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1",
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
         "is-string": "^1.0.7"
       }
     },
@@ -35385,16 +34496,17 @@
       }
     },
     "array.prototype.findlastindex": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz",
-      "integrity": "sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
+      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
       }
     },
     "array.prototype.flat": {
@@ -35657,9 +34769,9 @@
       "dev": true
     },
     "babel-loader": {
-      "version": "9.1.3",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.3.tgz",
-      "integrity": "sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==",
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.2.1.tgz",
+      "integrity": "sha512-fqe8naHt46e0yIdkjUZYqddSXfej3AHajX+CSO5X7oy0EmPc6o5Xh+RClNoHjnieWz9AW4kZxW9yyFMhVB1QLA==",
       "dev": true,
       "requires": {
         "find-cache-dir": "^4.0.0",
@@ -35849,13 +34961,13 @@
       }
     },
     "babel-plugin-polyfill-corejs3": {
-      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.4.tgz",
-      "integrity": "sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==",
+      "version": "0.10.6",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz",
+      "integrity": "sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==",
       "dev": true,
       "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.6.1",
-        "core-js-compat": "^3.36.1"
+        "@babel/helper-define-polyfill-provider": "^0.6.2",
+        "core-js-compat": "^3.38.0"
       }
     },
     "babel-plugin-polyfill-regenerator": {
@@ -35880,35 +34992,35 @@
       "dev": true
     },
     "bare-events": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.2.2.tgz",
-      "integrity": "sha512-h7z00dWdG0PYOQEvChhOSWvOfkIKsdZGkWr083FgN/HyoQuebSew/cgirYqh9SCuy/hRvxc5Vy6Fw8xAmYHLkQ==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.4.2.tgz",
+      "integrity": "sha512-qMKFd2qG/36aA4GwvKq8MxnPgCQAmBWmSyLWsJcbn8v03wvIPQ/hG1Ms8bPzndZxMDoHpxez5VOS+gC9Yi24/Q==",
       "dev": true,
       "optional": true
     },
     "bare-fs": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.0.tgz",
-      "integrity": "sha512-TNFqa1B4N99pds2a5NYHR15o0ZpdNKbAeKTE/+G6ED/UeOavv8RY3dr/Fu99HW3zU3pXpo2kDNO8Sjsm2esfOw==",
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.3.5.tgz",
+      "integrity": "sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==",
       "dev": true,
       "optional": true,
       "requires": {
         "bare-events": "^2.0.0",
         "bare-path": "^2.0.0",
-        "bare-stream": "^1.0.0"
+        "bare-stream": "^2.0.0"
       }
     },
     "bare-os": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.3.0.tgz",
-      "integrity": "sha512-oPb8oMM1xZbhRQBngTgpcQ5gXw6kjOaRsSWsIeNyRxGed2w/ARyP7ScBYpWR1qfX2E5rS3gBw6OWcSQo+s+kUg==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-2.4.4.tgz",
+      "integrity": "sha512-z3UiI2yi1mK0sXeRdc4O1Kk8aOa/e+FNWZcTiPB/dfTWyLypuE99LibgRaQki914Jq//yAWylcAt+mknKdixRQ==",
       "dev": true,
       "optional": true
     },
     "bare-path": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.2.tgz",
-      "integrity": "sha512-o7KSt4prEphWUHa3QUwCxUI00R86VdjiuxmJK0iNVDHYPGo+HsDaVCnqCmPbf/MiW1ok8F4p3m8RTHlWk8K2ig==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-2.1.3.tgz",
+      "integrity": "sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -35916,13 +35028,14 @@
       }
     },
     "bare-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-1.0.0.tgz",
-      "integrity": "sha512-KhNUoDL40iP4gFaLSsoGE479t0jHijfYdIcxRn/XtezA2BaUD0NRf/JGRpsMq6dMNM+SrCrB0YSSo/5wBY4rOQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.3.0.tgz",
+      "integrity": "sha512-pVRWciewGUeCyKEuRxwv06M079r+fRjAQjBEK2P6OYGrO43O+Z0LrPZZEjlc4mB6C2RpZ9AxJ1s7NLEtOHO6eA==",
       "dev": true,
       "optional": true,
       "requires": {
-        "streamx": "^2.16.1"
+        "b4a": "^1.6.6",
+        "streamx": "^2.20.0"
       }
     },
     "base": {
@@ -36032,9 +35145,9 @@
       "dev": true
     },
     "body-parser": {
-      "version": "1.20.2",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.2.tgz",
-      "integrity": "sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==",
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "dev": true,
       "requires": {
         "bytes": "3.1.2",
@@ -36045,7 +35158,7 @@
         "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "on-finished": "2.4.1",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "raw-body": "2.5.2",
         "type-is": "~1.6.18",
         "unpipe": "1.0.0"
@@ -36168,12 +35281,12 @@
       }
     },
     "braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
       "requires": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       }
     },
     "brorand": {
@@ -36270,15 +35383,15 @@
       }
     },
     "browserslist": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "version": "4.23.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
+      "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.668",
-        "node-releases": "^2.0.14",
-        "update-browserslist-db": "^1.0.13"
+        "caniuse-lite": "^1.0.30001646",
+        "electron-to-chromium": "^1.5.4",
+        "node-releases": "^2.0.18",
+        "update-browserslist-db": "^1.1.0"
       }
     },
     "buffer": {
@@ -36468,9 +35581,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001616",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
-      "integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
+      "version": "1.0.30001663",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz",
+      "integrity": "sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==",
       "dev": true
     },
     "case-sensitive-paths-webpack-plugin": {
@@ -36606,9 +35719,9 @@
       "dev": true
     },
     "chromatic": {
-      "version": "11.3.2",
-      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.3.2.tgz",
-      "integrity": "sha512-0PuHl49VvBMoDHEfmNjC/bim9YYNhWF3axTZlFuatC0avwr2Xw4GDqJDG9fArEWN8oM8VtYHkE9D7qc87dmz2w==",
+      "version": "11.10.4",
+      "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.10.4.tgz",
+      "integrity": "sha512-nfgDpW5gQ4FtgV1lZXXfqLjONKDCh2K4vwI3dbZrtU1ObOL9THyAzpIdnK9LRcNSeisDLX+XFCryfMg1Ql2U2g==",
       "dev": true,
       "requires": {}
     },
@@ -36639,14 +35752,14 @@
       "dev": true
     },
     "chromium-bidi": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.5.19.tgz",
-      "integrity": "sha512-UA6zL77b7RYCjJkZBsZ0wlvCTD+jTjllZ8f6wdO4buevXgTZYjV+XLB9CiEa2OuuTGGTLnI7eN9I60YxuALGQg==",
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-0.6.5.tgz",
+      "integrity": "sha512-RuLrmzYrxSb0s9SgpB+QN5jJucPduZQ/9SIe76MDxYJuecPW5mxMdacJ1f4EtgiV+R0p3sCkznTMvH0MPGFqjA==",
       "dev": true,
       "requires": {
         "mitt": "3.0.1",
         "urlpattern-polyfill": "10.0.0",
-        "zod": "3.22.4"
+        "zod": "3.23.8"
       }
     },
     "cipher-base": {
@@ -37161,17 +36274,17 @@
       "dev": true
     },
     "core-js": {
-      "version": "3.37.0",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.0.tgz",
-      "integrity": "sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug=="
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz",
+      "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw=="
     },
     "core-js-compat": {
-      "version": "3.37.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.37.0.tgz",
-      "integrity": "sha512-vYq4L+T8aS5UuFg4UwDhc7YNRWVeVZwltad9C/jV3R2LgVOpS9BDr7l/WL6BN0dbV3k1XejPTHqqEzJgsa0frA==",
+      "version": "3.38.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz",
+      "integrity": "sha512-JRH6gfXxGmrzF3tZ57lFx97YARxCXPaMzPo6jELZhv88pBH5VXpQ+y0znKGlFnzuaihqhLbefxSJxWJMPtfDzw==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.23.0"
+        "browserslist": "^4.23.3"
       }
     },
     "core-util-is": {
@@ -37722,12 +36835,20 @@
       "dev": true
     },
     "debug": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
       "dev": true,
       "requires": {
-        "ms": "2.1.2"
+        "ms": "^2.1.3"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "dev": true
+        }
       }
     },
     "decamelize": {
@@ -37773,6 +36894,15 @@
         "untildify": "^2.0.0"
       }
     },
+    "default-gateway": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
+      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
+      "dev": true,
+      "requires": {
+        "execa": "^5.0.0"
+      }
+    },
     "define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -37897,9 +37027,9 @@
       }
     },
     "devtools-protocol": {
-      "version": "0.0.1273771",
-      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1273771.tgz",
-      "integrity": "sha512-QDbb27xcTVReQQW/GHJsdQqGKwYBE7re7gxehj467kKP2DKuYBUj6i2k5LRiAC66J1yZG/9gsxooz/s9pcm0Og==",
+      "version": "0.0.1342118",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1342118.tgz",
+      "integrity": "sha512-75fMas7PkYNDTmDyb6PRJCH7ILmHLp+BhrZGeMsa4bCh40DTxgCz2NRy5UDzII4C5KuD0oBMZ9vXKhEl6UD/3w==",
       "dev": true
     },
     "diffie-hellman": {
@@ -38070,9 +37200,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.4.758",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.758.tgz",
-      "integrity": "sha512-/o9x6TCdrYZBMdGeTifAP3wlF/gVT+TtWJe3BSmtNh92Mw81U9hrYwW9OAGUh+sEOX/yz5e34sksqRruZbjYrw==",
+      "version": "1.5.28",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.28.tgz",
+      "integrity": "sha512-VufdJl+rzaKZoYVUijN13QcXVF5dWPZANeFTLNy+OSpHdDL5ynXTF35+60RSBbaQYB1ae723lQXHCrf4pyLsMw==",
       "dev": true
     },
     "element-resize-detector": {
@@ -38085,9 +37215,9 @@
       }
     },
     "elliptic": {
-      "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
-      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+      "version": "6.5.7",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.7.tgz",
+      "integrity": "sha512-ESVCtTwiA+XhY3wyh24QqRGBoP3rEdDUl3EDUUo9tft074fi19IrdpH7hLCMMP3CIj7jb3W96rn8lt/BqIlt5Q==",
       "dev": true,
       "requires": {
         "bn.js": "^4.11.9",
@@ -38135,9 +37265,9 @@
       }
     },
     "enhanced-resolve": {
-      "version": "5.16.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.1.tgz",
-      "integrity": "sha512-4U5pNsuDl0EhuZpq46M5xPslstkviJuhrdobaRDBk2Jy2KO37FDAJl4lb2KlNabxT0m4MTK2UHNrsAcphE8nyw==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.2.4",
@@ -38361,9 +37491,9 @@
       "dev": true
     },
     "escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
       "dev": true
     },
     "escape-html": {
@@ -38562,24 +37692,25 @@
       }
     },
     "eslint-import-resolver-typescript": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz",
-      "integrity": "sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==",
-      "dev": true,
-      "requires": {
-        "debug": "^4.3.4",
-        "enhanced-resolve": "^5.12.0",
-        "eslint-module-utils": "^2.7.4",
-        "fast-glob": "^3.3.1",
-        "get-tsconfig": "^4.5.0",
-        "is-core-module": "^2.11.0",
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.3.tgz",
+      "integrity": "sha512-ud9aw4szY9cCT1EWWdGv1L1XR6hh2PaRWif0j2QjQ0pgTY/69iw+W0Z4qZv5wHahOl8isEr+k/JnyAqNQkLkIA==",
+      "dev": true,
+      "requires": {
+        "@nolyfill/is-core-module": "1.0.39",
+        "debug": "^4.3.5",
+        "enhanced-resolve": "^5.15.0",
+        "eslint-module-utils": "^2.8.1",
+        "fast-glob": "^3.3.2",
+        "get-tsconfig": "^4.7.5",
+        "is-bun-module": "^1.0.2",
         "is-glob": "^4.0.3"
       }
     },
     "eslint-module-utils": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz",
-      "integrity": "sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==",
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.11.1.tgz",
+      "integrity": "sha512-EwcbfLOhwVMAfatfqLecR2yv3dE5+kQ8kx+Rrt0DvDXEVwW86KQ/xbMDQhtp5l42VXukD5SOF8mQQHbaNtO0CQ==",
       "dev": true,
       "requires": {
         "debug": "^3.2.7"
@@ -38624,26 +37755,27 @@
       }
     },
     "eslint-plugin-import": {
-      "version": "2.29.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz",
-      "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==",
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.30.0.tgz",
+      "integrity": "sha512-/mHNE9jINJfiD2EKkg1BKyPyUk4zdnT54YgbOgfjSakWT5oyX/qQLVNTkehyfpcMxZXMy1zyonZ2v7hZTX43Yw==",
       "dev": true,
       "requires": {
-        "array-includes": "^3.1.7",
-        "array.prototype.findlastindex": "^1.2.3",
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.8",
+        "array.prototype.findlastindex": "^1.2.5",
         "array.prototype.flat": "^1.3.2",
         "array.prototype.flatmap": "^1.3.2",
         "debug": "^3.2.7",
         "doctrine": "^2.1.0",
         "eslint-import-resolver-node": "^0.3.9",
-        "eslint-module-utils": "^2.8.0",
-        "hasown": "^2.0.0",
-        "is-core-module": "^2.13.1",
+        "eslint-module-utils": "^2.9.0",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.15.1",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
-        "object.fromentries": "^2.0.7",
-        "object.groupby": "^1.0.1",
-        "object.values": "^1.1.7",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.0",
         "semver": "^6.3.1",
         "tsconfig-paths": "^3.15.0"
       },
@@ -39027,37 +38159,37 @@
       }
     },
     "express": {
-      "version": "4.19.2",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.19.2.tgz",
-      "integrity": "sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==",
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
       "dev": true,
       "requires": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.20.2",
+        "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
         "cookie": "0.6.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "1.2.0",
+        "finalhandler": "1.3.1",
         "fresh": "0.5.2",
         "http-errors": "2.0.0",
-        "merge-descriptors": "1.0.1",
+        "merge-descriptors": "1.0.3",
         "methods": "~1.1.2",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
+        "path-to-regexp": "0.1.10",
         "proxy-addr": "~2.0.7",
-        "qs": "6.11.0",
+        "qs": "6.13.0",
         "range-parser": "~1.2.1",
         "safe-buffer": "5.2.1",
-        "send": "0.18.0",
-        "serve-static": "1.15.0",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
         "setprototypeof": "1.2.0",
         "statuses": "2.0.1",
         "type-is": "~1.6.18",
@@ -39074,6 +38206,12 @@
             "ms": "2.0.0"
           }
         },
+        "encodeurl": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+          "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+          "dev": true
+        },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -39188,9 +38326,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz",
-      "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -39311,22 +38449,22 @@
       "optional": true
     },
     "fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
     },
     "finalhandler": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
-      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "dev": true,
       "requires": {
         "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
@@ -39343,6 +38481,12 @@
             "ms": "2.0.0"
           }
         },
+        "encodeurl": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+          "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+          "dev": true
+        },
         "ms": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -39862,10 +39006,13 @@
       }
     },
     "get-tsconfig": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.5.0.tgz",
-      "integrity": "sha512-MjhiaIWCJ1sAU4pIQ5i5OfOuHHxVo1oYeNsWTON7jxYkod8pHocXeh+SSbmu5OZZZK73B6cbJ2XADzXehLyovQ==",
-      "dev": true
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.8.1.tgz",
+      "integrity": "sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==",
+      "dev": true,
+      "requires": {
+        "resolve-pkg-maps": "^1.0.0"
+      }
     },
     "get-uri": {
       "version": "6.0.3",
@@ -40474,9 +39621,9 @@
       "dev": true
     },
     "https-proxy-agent": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz",
-      "integrity": "sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
+      "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
       "dev": true,
       "requires": {
         "agent-base": "^7.0.2",
@@ -40647,6 +39794,18 @@
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
       "dev": true
     },
+    "internal-ip": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-6.2.0.tgz",
+      "integrity": "sha512-D8WGsR6yDt8uq7vDMu7mjcR+yRMm3dW8yufyChmszWRjcSHuxLBkR3GdS2HZAjodsaGuCvXeEJpueisXJULghg==",
+      "dev": true,
+      "requires": {
+        "default-gateway": "^6.0.0",
+        "ipaddr.js": "^1.9.1",
+        "is-ip": "^3.1.0",
+        "p-event": "^4.2.0"
+      }
+    },
     "internal-slot": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
@@ -40689,6 +39848,12 @@
         "sprintf-js": "^1.1.3"
       }
     },
+    "ip-regex": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
+      "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
+      "dev": true
+    },
     "ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -40798,6 +39963,23 @@
         "builtin-modules": "^3.3.0"
       }
     },
+    "is-bun-module": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-bun-module/-/is-bun-module-1.2.1.tgz",
+      "integrity": "sha512-AmidtEM6D6NmUiLOvvU7+IePxjEjOzra2h0pSrsfSAcXwl/83zLLXDByafUJy9k/rKK0pvXMLdwKwGHlX2Ke6Q==",
+      "dev": true,
+      "requires": {
+        "semver": "^7.6.3"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.6.3",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+          "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+          "dev": true
+        }
+      }
+    },
     "is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -40805,12 +39987,12 @@
       "dev": true
     },
     "is-core-module": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
-      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
+      "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
       "dev": true,
       "requires": {
-        "hasown": "^2.0.0"
+        "hasown": "^2.0.2"
       }
     },
     "is-data-descriptor": {
@@ -40940,6 +40122,15 @@
       "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==",
       "dev": true
     },
+    "is-ip": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/is-ip/-/is-ip-3.1.0.tgz",
+      "integrity": "sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==",
+      "dev": true,
+      "requires": {
+        "ip-regex": "^4.0.0"
+      }
+    },
     "is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -41610,19 +40801,19 @@
       "dev": true
     },
     "lit": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.3.tgz",
-      "integrity": "sha512-l4slfspEsnCcHVRTvaP7YnkTZEZggNFywLEIhQaGhYDczG+tu/vlgm/KaWIEjIp+ZyV20r2JnZctMb8LeLCG7Q==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.2.0.tgz",
+      "integrity": "sha512-s6tI33Lf6VpDu7u4YqsSX78D28bYQulM+VAzsGch4fx2H0eLZnJsUBsPWmGYSGoKDNbjtRv02rio1o+UdPVwvw==",
       "requires": {
         "@lit/reactive-element": "^2.0.4",
-        "lit-element": "^4.0.4",
-        "lit-html": "^3.1.2"
+        "lit-element": "^4.1.0",
+        "lit-html": "^3.2.0"
       },
       "dependencies": {
         "lit-html": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
-          "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.0.tgz",
+          "integrity": "sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA==",
           "requires": {
             "@types/trusted-types": "^2.0.2"
           }
@@ -41630,19 +40821,19 @@
       }
     },
     "lit-element": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.4.tgz",
-      "integrity": "sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.1.0.tgz",
+      "integrity": "sha512-gSejRUQJuMQjV2Z59KAS/D4iElUhwKpIyJvZ9w+DIagIQjfJnhR20h2Q5ddpzXGS+fF0tMZ/xEYGMnKmaI/iww==",
       "requires": {
         "@lit-labs/ssr-dom-shim": "^1.2.0",
         "@lit/reactive-element": "^2.0.4",
-        "lit-html": "^3.1.2"
+        "lit-html": "^3.2.0"
       },
       "dependencies": {
         "lit-html": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
-          "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.0.tgz",
+          "integrity": "sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA==",
           "requires": {
             "@types/trusted-types": "^2.0.2"
           }
@@ -41733,12 +40924,6 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
-    "lodash.assignwith": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assignwith/-/lodash.assignwith-4.2.0.tgz",
-      "integrity": "sha512-ZznplvbvtjK2gMvnQ1BR/zqPFZmS6jbK4p+6Up4xcRYA7yMIwxHCfbTcrYxXKzzqLsQ05eJPVznEW3tuwV7k1g==",
-      "dev": true
-    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -42137,9 +41322,9 @@
       }
     },
     "merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
       "dev": true
     },
     "merge-stream": {
@@ -42167,12 +41352,12 @@
       "dev": true
     },
     "micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "requires": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       }
     },
@@ -42638,9 +41823,9 @@
       }
     },
     "node-releases": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
       "dev": true
     },
     "normalize-package-data": {
@@ -42836,14 +42021,15 @@
       }
     },
     "object.fromentries": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.7.tgz",
-      "integrity": "sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
       }
     },
     "object.getownpropertydescriptors": {
@@ -42859,15 +42045,14 @@
       }
     },
     "object.groupby": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.1.tgz",
-      "integrity": "sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
       }
     },
     "object.hasown": {
@@ -42891,14 +42076,14 @@
       }
     },
     "object.values": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.7.tgz",
-      "integrity": "sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
+      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       }
     },
     "on-finished": {
@@ -43076,9 +42261,9 @@
       "dev": true
     },
     "pac-proxy-agent": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.0.1.tgz",
-      "integrity": "sha512-ASV8yU4LLKBAjqIPMbrgtaKIvxQri/yh2OpI+S6hVa9JRkUI3Y3NPFbfngDtY7oFtSMD3w31Xns89mDa3Feo5A==",
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.0.2.tgz",
+      "integrity": "sha512-BFi3vZnO9X5Qt6NRz7ZOaPja3ic0PhlsmCRYLOpN11+mWBCR6XJDqW5RF3j8jm4WGGQZtBA+bTfxYzeKW73eHg==",
       "dev": true,
       "requires": {
         "@tootallnate/quickjs-emscripten": "^0.23.0",
@@ -43086,9 +42271,9 @@
         "debug": "^4.3.4",
         "get-uri": "^6.0.1",
         "http-proxy-agent": "^7.0.0",
-        "https-proxy-agent": "^7.0.2",
-        "pac-resolver": "^7.0.0",
-        "socks-proxy-agent": "^8.0.2"
+        "https-proxy-agent": "^7.0.5",
+        "pac-resolver": "^7.0.1",
+        "socks-proxy-agent": "^8.0.4"
       }
     },
     "pac-resolver": {
@@ -43273,9 +42458,9 @@
       "dev": true
     },
     "path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==",
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==",
       "dev": true
     },
     "path-type": {
@@ -43532,9 +42717,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true
     },
     "prettier-linter-helpers": {
@@ -43749,25 +42934,26 @@
       "dev": true
     },
     "puppeteer-core": {
-      "version": "22.8.0",
-      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-22.8.0.tgz",
-      "integrity": "sha512-S5bWx3g/fNuyFxjZX9TkZMN07CEH47+9Zm6IiTl1QfqI9pnVaShbwrD9kRe5vmz/XPp/jLGhhxRUj1sY4wObnA==",
+      "version": "23.4.0",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-23.4.0.tgz",
+      "integrity": "sha512-fqkIP5FOcb38jfBj/OcBz1wFaI9nk40uQKSORvnXws6wCbep2dg8yxZ3ddJxBIfQsxoiEOvnrykFinUScrB/ew==",
       "dev": true,
       "requires": {
-        "@puppeteer/browsers": "2.2.3",
-        "chromium-bidi": "0.5.19",
-        "debug": "4.3.4",
-        "devtools-protocol": "0.0.1273771",
-        "ws": "8.17.0"
+        "@puppeteer/browsers": "2.4.0",
+        "chromium-bidi": "0.6.5",
+        "debug": "^4.3.7",
+        "devtools-protocol": "0.0.1342118",
+        "typed-query-selector": "^2.12.0",
+        "ws": "^8.18.0"
       }
     },
     "qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "dev": true,
       "requires": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       }
     },
     "querystring": {
@@ -44391,6 +43577,12 @@
         }
       }
     },
+    "resolve-pkg-maps": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
+      "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
+      "dev": true
+    },
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -44439,24 +43631,27 @@
       }
     },
     "rollup": {
-      "version": "4.9.6",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.6.tgz",
-      "integrity": "sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==",
-      "dev": true,
-      "requires": {
-        "@rollup/rollup-android-arm-eabi": "4.9.6",
-        "@rollup/rollup-android-arm64": "4.9.6",
-        "@rollup/rollup-darwin-arm64": "4.9.6",
-        "@rollup/rollup-darwin-x64": "4.9.6",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.9.6",
-        "@rollup/rollup-linux-arm64-gnu": "4.9.6",
-        "@rollup/rollup-linux-arm64-musl": "4.9.6",
-        "@rollup/rollup-linux-riscv64-gnu": "4.9.6",
-        "@rollup/rollup-linux-x64-gnu": "4.9.6",
-        "@rollup/rollup-linux-x64-musl": "4.9.6",
-        "@rollup/rollup-win32-arm64-msvc": "4.9.6",
-        "@rollup/rollup-win32-ia32-msvc": "4.9.6",
-        "@rollup/rollup-win32-x64-msvc": "4.9.6",
+      "version": "4.22.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz",
+      "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==",
+      "dev": true,
+      "requires": {
+        "@rollup/rollup-android-arm-eabi": "4.22.4",
+        "@rollup/rollup-android-arm64": "4.22.4",
+        "@rollup/rollup-darwin-arm64": "4.22.4",
+        "@rollup/rollup-darwin-x64": "4.22.4",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.22.4",
+        "@rollup/rollup-linux-arm-musleabihf": "4.22.4",
+        "@rollup/rollup-linux-arm64-gnu": "4.22.4",
+        "@rollup/rollup-linux-arm64-musl": "4.22.4",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4",
+        "@rollup/rollup-linux-riscv64-gnu": "4.22.4",
+        "@rollup/rollup-linux-s390x-gnu": "4.22.4",
+        "@rollup/rollup-linux-x64-gnu": "4.22.4",
+        "@rollup/rollup-linux-x64-musl": "4.22.4",
+        "@rollup/rollup-win32-arm64-msvc": "4.22.4",
+        "@rollup/rollup-win32-ia32-msvc": "4.22.4",
+        "@rollup/rollup-win32-x64-msvc": "4.22.4",
         "@types/estree": "1.0.5",
         "fsevents": "~2.3.2"
       }
@@ -44559,9 +43754,9 @@
       "dev": true
     },
     "send": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
-      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
       "dev": true,
       "requires": {
         "debug": "2.6.9",
@@ -44647,15 +43842,23 @@
       }
     },
     "serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "dev": true,
       "requires": {
-        "encodeurl": "~1.0.2",
+        "encodeurl": "~2.0.0",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.18.0"
+        "send": "0.19.0"
+      },
+      "dependencies": {
+        "encodeurl": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+          "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+          "dev": true
+        }
       }
     },
     "set-blocking": {
@@ -45029,14 +44232,14 @@
       }
     },
     "socks-proxy-agent": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.3.tgz",
-      "integrity": "sha512-VNegTZKhuGq5vSD6XNKlbqWhyt/40CgoEw8XxD6dhnm8Jq9IEa3nIa4HwnM8XOqU0CdB0BwWVXusqiFXfHB3+A==",
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-8.0.4.tgz",
+      "integrity": "sha512-GNAq/eg8Udq2x0eNiFkr9gRg5bA7PXEWagQdeRX4cPSG+X/8V38v637gim9bjFptMk1QWsCTr0ttrJEiXbNnRw==",
       "dev": true,
       "requires": {
         "agent-base": "^7.1.1",
         "debug": "^4.3.4",
-        "socks": "^2.7.1"
+        "socks": "^2.8.3"
       }
     },
     "source-list-map": {
@@ -45375,14 +44578,15 @@
       "dev": true
     },
     "streamx": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.16.1.tgz",
-      "integrity": "sha512-m9QYj6WygWyWa3H1YY69amr4nVgy61xfjys7xO7kviL5rfIEc2naf+ewFiOA+aEJD7y0JO3h2GoiUv4TDwEGzQ==",
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.20.1.tgz",
+      "integrity": "sha512-uTa0mU6WUC65iUvzKH4X9hEdvSW7rbPxPtwfWiLMSj3qTdQbAiUboZTxauKfpFuGIGa1C2BYijZ7wgdUXICJhA==",
       "dev": true,
       "requires": {
         "bare-events": "^2.2.0",
-        "fast-fifo": "^1.1.0",
-        "queue-tick": "^1.0.1"
+        "fast-fifo": "^1.3.2",
+        "queue-tick": "^1.0.1",
+        "text-decoder": "^1.1.0"
       }
     },
     "string_decoder": {
@@ -45667,9 +44871,9 @@
       }
     },
     "tar-fs": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.5.tgz",
-      "integrity": "sha512-JOgGAmZyMgbqpLwct7ZV8VzkEB6pxXFBVErLtb+XCOqzc6w1xiWKI9GVd6bwk68EX7eJ4DWmfXVmq8K2ziZTGg==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.6.tgz",
+      "integrity": "sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==",
       "dev": true,
       "requires": {
         "bare-fs": "^2.1.1",
@@ -45776,6 +44980,15 @@
         }
       }
     },
+    "text-decoder": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.0.tgz",
+      "integrity": "sha512-n1yg1mOj9DNpk3NeZOx7T6jchTbyJS3i3cucbNN6FcdPriMZx7NsgrGpWWdWZZGxD7ES1XB+3uoqHMgOKaN+fg==",
+      "dev": true,
+      "requires": {
+        "b4a": "^1.6.4"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -46160,6 +45373,12 @@
         "possible-typed-array-names": "^1.0.0"
       }
     },
+    "typed-query-selector": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.0.tgz",
+      "integrity": "sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==",
+      "dev": true
+    },
     "typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -46167,9 +45386,9 @@
       "dev": true
     },
     "typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz",
+      "integrity": "sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==",
       "dev": true
     },
     "typical": {
@@ -46463,19 +45682,19 @@
       "optional": true
     },
     "update-browserslist-db": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
-      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
+      "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
       "dev": true,
       "requires": {
-        "escalade": "^3.1.1",
-        "picocolors": "^1.0.0"
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
       },
       "dependencies": {
         "picocolors": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-          "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+          "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
           "dev": true
         }
       }
@@ -46601,9 +45820,9 @@
       "dev": true
     },
     "uuid": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
-      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ=="
     },
     "uuid-browser": {
       "version": "3.1.0",
@@ -46612,9 +45831,9 @@
       "dev": true
     },
     "v8-to-istanbul": {
-      "version": "9.2.0",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz",
-      "integrity": "sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz",
+      "integrity": "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA==",
       "dev": true,
       "requires": {
         "@jridgewell/trace-mapping": "^0.3.12",
@@ -46980,21 +46199,20 @@
       "dev": true
     },
     "webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
       "dev": true,
       "requires": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -47325,9 +46543,9 @@
       "dev": true
     },
     "ws": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.0.tgz",
-      "integrity": "sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "dev": true,
       "requires": {}
     },
@@ -47416,9 +46634,9 @@
       "dev": true
     },
     "zod": {
-      "version": "3.22.4",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
-      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
       "dev": true
     },
     "zwitch": {
diff --git a/package.json b/package.json
index 2c3fd48d16..d36769a56f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kintone-ui-component",
-  "version": "1.17.1",
+  "version": "1.18.0",
   "description": "kintone UI Component",
   "author": {
     "name": "Cybozu, Inc.",
@@ -36,8 +36,8 @@
     "actionlint": "node-actionlint"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/preset-env": "^7.24.5",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
     "@cybozu/eslint-config": "^23.0.0",
     "@open-wc/testing": "^4.0.0",
     "@storybook/addon-a11y": "^6.5.16",
@@ -47,28 +47,28 @@
     "@storybook/builder-webpack5": "^6.5.16",
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/web-components": "^6.5.16",
-    "@types/mocha": "^10.0.6",
-    "@types/uuid": "^9.0.8",
-    "@web/test-runner": "^0.18.1",
-    "babel-loader": "^9.1.3",
-    "chromatic": "^11.3.2",
+    "@types/mocha": "^10.0.8",
+    "@types/uuid": "^10.0.0",
+    "@web/test-runner": "^0.19.0",
+    "babel-loader": "^9.2.1",
+    "chromatic": "^11.10.4",
     "deepmerge": "^4.3.1",
     "eslint": "^8.57.0",
-    "eslint-import-resolver-typescript": "^3.6.1",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-kuc-v1": "file:eslint-plugin-kuc-v1",
     "node-actionlint": "^1.2.2",
-    "prettier": "^3.2.5",
+    "prettier": "^3.3.3",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.4.5",
-    "webpack": "^5.91.0",
+    "typescript": "^5.6.2",
+    "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
     "@webcomponents/webcomponentsjs": "^2.8.0",
-    "core-js": "^3.37.0",
-    "lit": "^3.1.3",
+    "core-js": "^3.38.1",
+    "lit": "^3.2.0",
     "regenerator-runtime": "^0.14.1",
-    "uuid": "^9.0.1"
+    "uuid": "^10.0.0"
   }
 }
diff --git a/src/attachment/index.stories.js b/src/attachment/index.stories.js
index 16d2933ea5..5f77499014 100644
--- a/src/attachment/index.stories.js
+++ b/src/attachment/index.stories.js
@@ -10,7 +10,7 @@ export default {
     label: { name: "label" },
     language: {
       name: "language",
-      options: ["auto", "en", "ja", "zh", "zh-TW"],
+      options: ["auto", "en", "ja", "zh", "zh-TW", "es"],
       control: {
         type: "select",
       },
diff --git a/src/attachment/index.ts b/src/attachment/index.ts
index 303b287f05..5331793873 100644
--- a/src/attachment/index.ts
+++ b/src/attachment/index.ts
@@ -7,9 +7,11 @@ import {
   ONE_KB,
   ONE_MB,
 } from "../base/attachment/resource/constant";
-import { en, ja, zh, zh_TW } from "../base/attachment/resource/locale";
+import { en, es, ja, zh, zh_TW } from "../base/attachment/resource/locale";
 import { ERROR_MESSAGE } from "../base/constant";
 import { languagePropConverter, visiblePropConverter } from "../base/converter";
+import "../base/error";
+import "../base/label";
 import {
   createStyleOnHeader,
   dispatchCustomEvent,
@@ -242,7 +244,7 @@ let exportAttachment;
       </svg>`;
     }
     private _getLanguage() {
-      const langs = ["en", "ja", "zh", "zh-TW"];
+      const langs = ["en", "ja", "zh", "zh-TW", "es"];
       if (langs.indexOf(this.language) !== -1) return this.language;
 
       if (langs.indexOf(document.documentElement.lang) !== -1)
@@ -262,6 +264,8 @@ let exportAttachment;
           return zh_TW;
         case "ja":
           return ja;
+        case "es":
+          return es;
         default:
           return en;
       }
diff --git a/src/attachment/style.ts b/src/attachment/style.ts
index d38bdd1e62..b3c390c982 100644
--- a/src/attachment/style.ts
+++ b/src/attachment/style.ts
@@ -20,6 +20,10 @@ export const ATTACHMENT_CSS = `
     font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,
         Hei,"Heiti SC",sans-serif;
   }
+  kuc-attachment:lang(es),
+  kuc-attachment:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-attachment {
     font-size: 14px;
     display: inline-table;
diff --git a/src/attachment/test/language.test.ts b/src/attachment/test/language.test.ts
index 47d5e94f3c..fe014c3d2a 100644
--- a/src/attachment/test/language.test.ts
+++ b/src/attachment/test/language.test.ts
@@ -41,5 +41,14 @@ describe("Attachment", () => {
       ) as HTMLSpanElement;
       expect(inputDateEl.textContent).to.equal("選擇檔案");
     });
+    it("should be change to es language when assigned by setter", async () => {
+      const container = new Attachment({ language: "en" });
+      container.language = "es";
+      const el = await fixture(container);
+      const inputDateEl = el.querySelector(
+        ".kuc-attachment__group__files__browse-button__text",
+      ) as HTMLSpanElement;
+      expect(inputDateEl.textContent).to.equal("Examinar");
+    });
   });
 });
diff --git a/src/attachment/type.ts b/src/attachment/type.ts
index d2bee7c6ce..7e4818f6ff 100644
--- a/src/attachment/type.ts
+++ b/src/attachment/type.ts
@@ -15,7 +15,7 @@ export declare type AttachmentProps = {
   requiredIcon?: boolean;
   visible?: boolean;
   files?: FileItem[];
-  language?: "ja" | "en" | "zh" | "zh-TW" | "auto";
+  language?: "ja" | "en" | "zh" | "zh-TW" | "es" | "auto";
 };
 export declare type AttachmentChangeEventDetail = {
   files?: FileItem[];
diff --git a/src/base/attachment/resource/locale.ts b/src/base/attachment/resource/locale.ts
index 9666710d8a..4d45c7c830 100644
--- a/src/base/attachment/resource/locale.ts
+++ b/src/base/attachment/resource/locale.ts
@@ -17,3 +17,8 @@ export const zh_TW = {
   ATTACHMENT_BROWSE: "選擇檔案",
   ATTACHMENT_DRAG_DROP_ZONE: "拖曳檔案到此。",
 };
+
+export const es = {
+  ATTACHMENT_BROWSE: "Examinar",
+  ATTACHMENT_DRAG_DROP_ZONE: "Suelte los archivos aquí.",
+};
diff --git a/src/base/converter.ts b/src/base/converter.ts
index 51daaedbda..5523324d38 100644
--- a/src/base/converter.ts
+++ b/src/base/converter.ts
@@ -13,11 +13,11 @@ export const visiblePropConverter = {
 
 export const languagePropConverter = {
   fromAttribute: (value: string | null) => {
-    const langs = ["en", "ja", "zh", "zh-TW"];
+    const langs = ["en", "ja", "zh", "zh-TW", "es"];
     return !value || langs.indexOf(value) === -1;
   },
   toAttribute: (value: string) => {
-    const langs = ["en", "ja", "zh", "zh-TW"];
+    const langs = ["en", "ja", "zh", "zh-TW", "es"];
     if (langs.indexOf(value) !== -1) return value;
     if (langs.indexOf(document.documentElement.lang) !== -1) {
       return document.documentElement.lang;
diff --git a/src/base/datetime/calendar/body/index.stories.js b/src/base/datetime/calendar/body/index.stories.js
index 8eaec659c8..cf297ed4ff 100644
--- a/src/base/datetime/calendar/body/index.stories.js
+++ b/src/base/datetime/calendar/body/index.stories.js
@@ -20,7 +20,7 @@ export default {
     },
     language: {
       name: "language",
-      options: ["en", "ja", "zh", "zh-TW"],
+      options: ["en", "ja", "zh", "zh-TW", "es"],
       control: { type: "select" },
     },
     value: {
diff --git a/src/base/datetime/calendar/body/style.ts b/src/base/datetime/calendar/body/style.ts
index bcc1fc0f30..d3de825a41 100644
--- a/src/base/datetime/calendar/body/style.ts
+++ b/src/base/datetime/calendar/body/style.ts
@@ -15,12 +15,15 @@ kuc-base-datetime-calendar-body:lang(zh) * {
   font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
     Hei, "Heiti SC", sans-serif;
 }
-
 kuc-base-datetime-calendar-body:lang(zh-TW),
 kuc-base-datetime-calendar-body:lang(zh-TW) * {
   font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,
     Hei,"Heiti SC",sans-serif;
 }
+kuc-base-datetime-calendar-body:lang(es),
+kuc-base-datetime-calendar-body:lang(es) * {
+  font-family: sans-serif;
+}
 .kuc-base-datetime-calendar-body__table,
 .kuc-base-datetime-calendar-body__table tr {
   border-collapse: separate;
@@ -42,6 +45,9 @@ kuc-base-datetime-calendar-body:lang(zh-TW) * {
 :lang(ja) th.kuc-base-datetime-calendar-body__table__header {
   font-weight: 700;
 }
+:lang(es) th.kuc-base-datetime-calendar-body__table__header {
+  text-transform: revert;
+}
 .kuc-base-datetime-calendar-body__table__date--selected,
 .kuc-base-datetime-calendar-body__table__date,
 .kuc-base-datetime-calendar-body__table__header {
diff --git a/src/base/datetime/calendar/body/test/language.test.ts b/src/base/datetime/calendar/body/test/language.test.ts
index b9056e4648..6bb6e9b6c6 100644
--- a/src/base/datetime/calendar/body/test/language.test.ts
+++ b/src/base/datetime/calendar/body/test/language.test.ts
@@ -43,7 +43,7 @@ describe("BaseDateTimeCalendarBody", () => {
       expect(item.innerText).to.equal("日");
     });
 
-    it('The first day of the week in English is "周日" when not assigning language prop', async () => {
+    it('The first day of the week in Chinese is "周日" when not assigning language prop', async () => {
       const container = new BaseDateTimeCalendarBody();
       container.language = "zh";
       const el = await fixture(container);
@@ -52,5 +52,15 @@ describe("BaseDateTimeCalendarBody", () => {
       ) as HTMLTableSectionElement;
       expect(item.innerText).to.equal("周日");
     });
+
+    it('The first day of the week in Spanish is "Do." when not assigning language prop', async () => {
+      const container = new BaseDateTimeCalendarBody();
+      container.language = "es";
+      const el = await fixture(container);
+      const item = el.querySelector(
+        ".kuc-base-datetime-calendar-body__table__header",
+      ) as HTMLTableSectionElement;
+      expect(item.innerText).to.equal("Do.");
+    });
   });
 });
diff --git a/src/base/datetime/calendar/footer/index.stories.js b/src/base/datetime/calendar/footer/index.stories.js
index 85550dc89c..3cdb89e698 100644
--- a/src/base/datetime/calendar/footer/index.stories.js
+++ b/src/base/datetime/calendar/footer/index.stories.js
@@ -6,7 +6,7 @@ export default {
   argTypes: {
     language: {
       name: "language",
-      options: ["en", "ja", "zh", "zh-TW"],
+      options: ["en", "ja", "zh", "zh-TW", "es"],
       control: { type: "select" },
     },
   },
diff --git a/src/base/datetime/calendar/footer/style.ts b/src/base/datetime/calendar/footer/style.ts
index b1d4a8e3cf..ee6c5c324c 100644
--- a/src/base/datetime/calendar/footer/style.ts
+++ b/src/base/datetime/calendar/footer/style.ts
@@ -20,6 +20,10 @@ kuc-base-datetime-calendar-footer:lang(zh-TW) * {
   font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,
     Hei,"Heiti SC",sans-serif;
 }
+kuc-base-datetime-calendar-footer:lang(es),
+kuc-base-datetime-calendar-footer:lang(es) * {
+  font-family: sans-serif;
+}
 .kuc-base-datetime-calendar-footer__group {
   display: flex;
   align-items: flex-end;
diff --git a/src/base/datetime/calendar/footer/test/language.ts b/src/base/datetime/calendar/footer/test/language.ts
index 3e002e0055..64e5f3f4e0 100644
--- a/src/base/datetime/calendar/footer/test/language.ts
+++ b/src/base/datetime/calendar/footer/test/language.ts
@@ -57,5 +57,18 @@ describe("BaseDateTimeCalendarFooter", () => {
       expect(buttonTodayEl.innerText).to.equal("今天");
       expect(buttonNoneEl.innerText).to.equal("清空");
     });
+    it("should be 'Hoy' and 'Ninguno' when assigning language prop with 'es'", async () => {
+      const container = new BaseDateTimeCalendarFooter();
+      container.language = "es";
+      const el = await fixture(container);
+      const buttonTodayEl = el.querySelector(
+        ".kuc-base-datetime-calendar-footer__group__button--today",
+      ) as HTMLButtonElement;
+      const buttonNoneEl = el.querySelector(
+        ".kuc-base-datetime-calendar-footer__group__button--none",
+      ) as HTMLButtonElement;
+      expect(buttonTodayEl.innerText).to.equal("Hoy");
+      expect(buttonNoneEl.innerText).to.equal("Ninguno");
+    });
   });
 });
diff --git a/src/base/datetime/calendar/header/dropdown/month/index.stories.js b/src/base/datetime/calendar/header/dropdown/month/index.stories.js
index df9ee984be..d26755bde2 100644
--- a/src/base/datetime/calendar/header/dropdown/month/index.stories.js
+++ b/src/base/datetime/calendar/header/dropdown/month/index.stories.js
@@ -7,7 +7,7 @@ export default {
   argTypes: {
     language: {
       name: "language",
-      options: ["en", "ja", "zh", "zh-TW"],
+      options: ["en", "ja", "zh", "zh-TW", "es"],
       control: { type: "select" },
     },
   },
diff --git a/src/base/datetime/calendar/header/index.stories.js b/src/base/datetime/calendar/header/index.stories.js
index a073d19bed..2d69887cc9 100644
--- a/src/base/datetime/calendar/header/index.stories.js
+++ b/src/base/datetime/calendar/header/index.stories.js
@@ -7,7 +7,7 @@ export default {
   argTypes: {
     language: {
       name: "language",
-      options: ["en", "ja", "zh", "zh-TW"],
+      options: ["en", "ja", "zh", "zh-TW", "es"],
       control: { type: "select" },
     },
   },
diff --git a/src/base/datetime/calendar/header/style.ts b/src/base/datetime/calendar/header/style.ts
index 44e3aefdb6..9c8cf43456 100644
--- a/src/base/datetime/calendar/header/style.ts
+++ b/src/base/datetime/calendar/header/style.ts
@@ -21,6 +21,10 @@ kuc-base-datetime-calendar-header:lang(zh-TW) * {
   font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,
     Hei,"Heiti SC",sans-serif;
 }
+kuc-base-datetime-calendar-header:lang(es),
+kuc-base-datetime-calendar-header:lang(es) * {
+  font-family: sans-serif;
+}
 kuc-base-datetime-calendar-header:lang(ja) kuc-base-datetime-listbox * {
   font-weight: 400;
 }
diff --git a/src/base/datetime/calendar/header/test/language.test.ts b/src/base/datetime/calendar/header/test/language.test.ts
index e34151f1ab..ff411f632c 100644
--- a/src/base/datetime/calendar/header/test/language.test.ts
+++ b/src/base/datetime/calendar/header/test/language.test.ts
@@ -94,6 +94,23 @@ describe("BaseDateTimeCalendarHeader", () => {
       );
     });
 
+    it("should be 'es' when assigning 'es' by setter", async () => {
+      const container = new BaseDateTimeCalendarHeader();
+      container.language = "es";
+      const el = await fixture(container);
+      const headerCenterEl = el.querySelector(
+        ".kuc-base-datetime-calendar-header__group__center",
+      ) as HTMLSpanElement;
+
+      expect(headerCenterEl.childElementCount).to.equal(2);
+      expect(headerCenterEl.children[0].tagName).to.equal(
+        "KUC-BASE-DATETIME-HEADER-MONTH",
+      );
+      expect(headerCenterEl.children[1].tagName).to.equal(
+        "KUC-BASE-DATETIME-HEADER-YEAR",
+      );
+    });
+
     it("should be 'en' when assigning invalid value by setter", async () => {
       const container = new BaseDateTimeCalendarHeader();
       container.language = "xx";
diff --git a/src/base/datetime/calendar/index.stories.js b/src/base/datetime/calendar/index.stories.js
index 6bbfa4372c..ef80dedb9c 100644
--- a/src/base/datetime/calendar/index.stories.js
+++ b/src/base/datetime/calendar/index.stories.js
@@ -6,7 +6,7 @@ export default {
   argTypes: {
     language: {
       name: "language",
-      options: ["en", "ja", "zh", "zh-TW"],
+      options: ["en", "ja", "zh", "zh-TW", "es"],
       control: { type: "select" },
     },
     value: {
diff --git a/src/base/datetime/calendar/test/language.test.ts b/src/base/datetime/calendar/test/language.test.ts
index 0456364a18..ce273e3daf 100644
--- a/src/base/datetime/calendar/test/language.test.ts
+++ b/src/base/datetime/calendar/test/language.test.ts
@@ -120,9 +120,38 @@ describe("BaseDateTimeCalendar", () => {
         "KUC-BASE-DATETIME-HEADER-MONTH",
       );
       expect(yearEl.textContent).to.contain("年");
-      expect(bodyWeekDayEl.innerText).to.equal("周日");
+      expect(bodyWeekDayEl.innerText).to.equal("週日");
       expect(footerButtonTodayEl.innerText).to.equal("今天");
       expect(footerButtonNoneEl.innerText).to.equal("清空");
     });
+
+    it("should be 'es' when assigning 'es' by setter", async () => {
+      const container = new BaseDateTimeCalendar();
+      container.language = "es";
+      const el = await fixture(container);
+      const headerCenterEl = el.querySelector(
+        ".kuc-base-datetime-calendar-header__group__center",
+      ) as HTMLSpanElement;
+      const bodyWeekDayEl = el.querySelector(
+        ".kuc-base-datetime-calendar-body__table__header",
+      ) as HTMLTableSectionElement;
+      const footerButtonTodayEl = el.querySelector(
+        ".kuc-base-datetime-calendar-footer__group__button--today",
+      ) as HTMLButtonElement;
+      const footerButtonNoneEl = el.querySelector(
+        ".kuc-base-datetime-calendar-footer__group__button--none",
+      ) as HTMLButtonElement;
+
+      expect(headerCenterEl.childElementCount).to.equal(2);
+      expect(headerCenterEl.children[0].tagName).to.equal(
+        "KUC-BASE-DATETIME-HEADER-MONTH",
+      );
+      expect(headerCenterEl.children[1].tagName).to.equal(
+        "KUC-BASE-DATETIME-HEADER-YEAR",
+      );
+      expect(bodyWeekDayEl.innerText).to.equal("Do.");
+      expect(footerButtonTodayEl.innerText).to.equal("Hoy");
+      expect(footerButtonNoneEl.innerText).to.equal("Ninguno");
+    });
   });
 });
diff --git a/src/base/datetime/date/index.stories.js b/src/base/datetime/date/index.stories.js
index 09a6f2c148..224dba4a4b 100644
--- a/src/base/datetime/date/index.stories.js
+++ b/src/base/datetime/date/index.stories.js
@@ -12,7 +12,7 @@ export default {
     },
     language: {
       name: "language",
-      options: ["en", "ja", "zh", "zh-TW"],
+      options: ["en", "ja", "zh", "zh-TW", "es"],
       control: {
         type: "select",
       },
diff --git a/src/base/datetime/listbox/style.ts b/src/base/datetime/listbox/style.ts
index 16edf92a34..34c4c71a37 100644
--- a/src/base/datetime/listbox/style.ts
+++ b/src/base/datetime/listbox/style.ts
@@ -20,6 +20,10 @@ kuc-base-datetime-listbox:lang(zh-TW) * {
   font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,
     Hei,"Heiti SC"
 }
+kuc-base-datetime-listbox:lang(es),
+kuc-base-datetime-listbox:lang(es) * {
+  font-family: sans-serif;
+}
 .kuc-base-datetime-listbox__listbox {
   position: absolute;
   z-index: 2000;
diff --git a/src/base/datetime/mobile-calendar/body/index.stories.js b/src/base/datetime/mobile-calendar/body/index.stories.js
index 2d271178c1..7979a98837 100644
--- a/src/base/datetime/mobile-calendar/body/index.stories.js
+++ b/src/base/datetime/mobile-calendar/body/index.stories.js
@@ -20,7 +20,7 @@ export default {
     },
     language: {
       name: "language",
-      options: ["en", "ja", "zh", "zh-TW"],
+      options: ["en", "ja", "zh", "zh-TW", "es"],
       control: { type: "select" },
     },
     value: {
diff --git a/src/base/datetime/mobile-calendar/body/style.ts b/src/base/datetime/mobile-calendar/body/style.ts
index 3707287481..7b5abceaf1 100644
--- a/src/base/datetime/mobile-calendar/body/style.ts
+++ b/src/base/datetime/mobile-calendar/body/style.ts
@@ -20,6 +20,11 @@ kuc-base-mobile-datetime-calendar-body:lang(zh-TW) * {
     Verdana,sans-serif
 }
 
+kuc-base-mobile-datetime-calendar-body:lang(es),
+kuc-base-mobile-datetime-calendar-body:lang(es) * {
+    font-family: sans-serif;
+}
+
 .kuc-base-mobile-datetime-calendar-body__table,
 .kuc-base-mobile-datetime-calendar-body__table tr {
     border-collapse: separate;
diff --git a/src/base/datetime/mobile-calendar/body/test/language.test.ts b/src/base/datetime/mobile-calendar/body/test/language.test.ts
index 0792d628e0..fb7fc971ba 100644
--- a/src/base/datetime/mobile-calendar/body/test/language.test.ts
+++ b/src/base/datetime/mobile-calendar/body/test/language.test.ts
@@ -43,14 +43,14 @@ describe("BaseMobileDateTimeCalendarBody", () => {
       expect(item.innerText).to.equal("日");
     });
 
-    it('The first day of the week in Traditional Chinese is "周日" when not assigning language prop', async () => {
+    it('The first day of the week in Traditional Chinese is "週日" when not assigning language prop', async () => {
       const container = new BaseMobileDateTimeCalendarBody();
       container.language = "zh-TW";
       const el = await fixture(container);
       const item = el.querySelector(
         ".kuc-base-mobile-datetime-calendar-body__table__header",
       ) as HTMLTableSectionElement;
-      expect(item.innerText).to.equal("周日");
+      expect(item.innerText).to.equal("週日");
     });
     it('The first day of the week in Chinese is "周日" when not assigning language prop', async () => {
       const container = new BaseMobileDateTimeCalendarBody();
@@ -61,5 +61,14 @@ describe("BaseMobileDateTimeCalendarBody", () => {
       ) as HTMLTableSectionElement;
       expect(item.innerText).to.equal("周日");
     });
+    it('The first day of the week in Spanish is "Do." when not assigning language prop', async () => {
+      const container = new BaseMobileDateTimeCalendarBody();
+      container.language = "es";
+      const el = await fixture(container);
+      const item = el.querySelector(
+        ".kuc-base-mobile-datetime-calendar-body__table__header",
+      ) as HTMLTableSectionElement;
+      expect(item.innerText).to.equal("Do.");
+    });
   });
 });
diff --git a/src/base/datetime/mobile-calendar/footer/index.stories.js b/src/base/datetime/mobile-calendar/footer/index.stories.js
index c7692cd111..e964b4ed42 100644
--- a/src/base/datetime/mobile-calendar/footer/index.stories.js
+++ b/src/base/datetime/mobile-calendar/footer/index.stories.js
@@ -6,7 +6,7 @@ export default {
   argTypes: {
     language: {
       name: "language",
-      options: ["en", "ja", "zh", "zh-TW"],
+      options: ["en", "ja", "zh", "zh-TW", "es"],
       control: { type: "select" },
     },
   },
diff --git a/src/base/datetime/mobile-calendar/footer/style.ts b/src/base/datetime/mobile-calendar/footer/style.ts
index 196dbeafde..3f06b64b8b 100644
--- a/src/base/datetime/mobile-calendar/footer/style.ts
+++ b/src/base/datetime/mobile-calendar/footer/style.ts
@@ -18,6 +18,10 @@ kuc-base-mobile-datetime-calendar-footer:lang(zh-TW) * {
     Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,
     Verdana,sans-serif
 }
+kuc-base-mobile-datetime-calendar-footer:lang(es),
+kuc-base-mobile-datetime-calendar-footer:lang(es) * {
+    font-family: sans-serif;
+}
 .kuc-base-mobile-datetime-calendar-footer__group {
     display: flex;
     justify-content: space-between;
diff --git a/src/base/datetime/mobile-calendar/footer/test/language.test.ts b/src/base/datetime/mobile-calendar/footer/test/language.test.ts
index 752eed2aca..83e43b57e4 100644
--- a/src/base/datetime/mobile-calendar/footer/test/language.test.ts
+++ b/src/base/datetime/mobile-calendar/footer/test/language.test.ts
@@ -73,5 +73,22 @@ describe("BaseMobileDateTimeCalendarFooter", () => {
       expect(buttonNoneEl.innerText).to.equal("清空");
       expect(buttonCloseEl.innerText).to.equal("關閉");
     });
+    it("should be 'Hoy' and 'Ninguno' and 'Cerrar' when assigning language prop with 'es'", async () => {
+      const container = new BaseMobileDateTimeCalendarFooter();
+      container.language = "es";
+      const el = await fixture(container);
+      const buttonTodayEl = el.querySelector(
+        ".kuc-base-mobile-datetime-calendar-footer__group__button--today",
+      ) as HTMLButtonElement;
+      const buttonNoneEl = el.querySelector(
+        ".kuc-base-mobile-datetime-calendar-footer__group__button--none",
+      ) as HTMLButtonElement;
+      const buttonCloseEl = el.querySelector(
+        ".kuc-base-mobile-datetime-calendar-footer__group__button--close",
+      ) as HTMLButtonElement;
+      expect(buttonTodayEl.innerText).to.equal("Hoy");
+      expect(buttonNoneEl.innerText).to.equal("Ninguno");
+      expect(buttonCloseEl.innerText).to.equal("Cerrar");
+    });
   });
 });
diff --git a/src/base/datetime/mobile-calendar/header/index.stories.js b/src/base/datetime/mobile-calendar/header/index.stories.js
index d60e93bf74..fbb842bfcb 100644
--- a/src/base/datetime/mobile-calendar/header/index.stories.js
+++ b/src/base/datetime/mobile-calendar/header/index.stories.js
@@ -7,7 +7,7 @@ export default {
   argTypes: {
     language: {
       name: "language",
-      options: ["en", "ja", "zh", "zh-TW"],
+      options: ["en", "ja", "zh", "zh-TW", "es"],
       control: { type: "select" },
     },
   },
diff --git a/src/base/datetime/mobile-calendar/header/style.ts b/src/base/datetime/mobile-calendar/header/style.ts
index 5ab41b3edc..2517075fb0 100644
--- a/src/base/datetime/mobile-calendar/header/style.ts
+++ b/src/base/datetime/mobile-calendar/header/style.ts
@@ -17,6 +17,10 @@ kuc-base-mobile-datetime-calendar-header:lang(zh-TW) * {
     Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,
     Verdana,sans-serif
 }
+kuc-base-mobile-datetime-calendar-header:lang(es),
+kuc-base-mobile-datetime-calendar-header:lang(es) * {
+    font-family: sans-serif;
+}
 .kuc-base-mobile-datetime-calendar-header__group {
     display: flex;
     justify-content: space-between;
diff --git a/src/base/datetime/mobile-calendar/header/test/language.test.ts b/src/base/datetime/mobile-calendar/header/test/language.test.ts
index 399fe78411..906aa68bc8 100644
--- a/src/base/datetime/mobile-calendar/header/test/language.test.ts
+++ b/src/base/datetime/mobile-calendar/header/test/language.test.ts
@@ -85,6 +85,26 @@ describe("BaseMobileDateTimeCalendarHeader", () => {
       ).to.equal(true);
     });
 
+    it("should be 'es' when assigning 'es' by setter", async () => {
+      const container = new BaseMobileDateTimeCalendarHeader();
+      container.language = "es";
+      const el = await fixture(container);
+      const headerCenterEl = el.querySelector(
+        ".kuc-base-mobile-datetime-calendar-header__group__center",
+      ) as HTMLSpanElement;
+      expect(headerCenterEl.childElementCount).to.equal(2);
+      expect(
+        headerCenterEl.children[0].classList.contains(
+          "kuc-base-mobile-datetime-calendar-header__group__center__month",
+        ),
+      ).to.equal(true);
+      expect(
+        headerCenterEl.children[1].classList.contains(
+          "kuc-base-mobile-datetime-calendar-header__group__center__year",
+        ),
+      ).to.equal(true);
+    });
+
     it("should be 'en' when assigning invalid value by setter", async () => {
       const container = new BaseMobileDateTimeCalendarHeader();
       container.language = "xx";
diff --git a/src/base/datetime/mobile-calendar/index.stories.js b/src/base/datetime/mobile-calendar/index.stories.js
index 10a788b22d..ca774edc6e 100644
--- a/src/base/datetime/mobile-calendar/index.stories.js
+++ b/src/base/datetime/mobile-calendar/index.stories.js
@@ -6,7 +6,7 @@ export default {
   argTypes: {
     language: {
       name: "language",
-      options: ["en", "ja", "zh", "zh-TW"],
+      options: ["en", "ja", "zh", "zh-TW", "es"],
       control: { type: "select" },
     },
     value: {
diff --git a/src/base/datetime/mobile-calendar/test/language.test.ts b/src/base/datetime/mobile-calendar/test/language.test.ts
index bd1a50508e..01d86d10a6 100644
--- a/src/base/datetime/mobile-calendar/test/language.test.ts
+++ b/src/base/datetime/mobile-calendar/test/language.test.ts
@@ -136,10 +136,46 @@ describe("BaseMobileDateTimeCalendar", () => {
         ),
       ).to.equal(true);
       expect(yearEl.textContent).to.contain("年");
-      expect(bodyWeekDayEl.innerText).to.equal("周日");
+      expect(bodyWeekDayEl.innerText).to.equal("週日");
       expect(footerButtonTodayEl.innerText).to.equal("今天");
       expect(footerButtonNoneEl.innerText).to.equal("清空");
       expect(footerButtonCloseEl.innerText).to.equal("關閉");
     });
+
+    it("should be 'es' when assigning 'es' by setter", async () => {
+      const container = new BaseMobileDateTimeCalendar();
+      container.language = "es";
+      const el = await fixture(container);
+      const bodyWeekDayEl = el.querySelector(
+        ".kuc-base-mobile-datetime-calendar-body__table__header",
+      ) as HTMLTableSectionElement;
+      const footerButtonTodayEl = el.querySelector(
+        ".kuc-base-mobile-datetime-calendar-footer__group__button--today",
+      ) as HTMLButtonElement;
+      const footerButtonNoneEl = el.querySelector(
+        ".kuc-base-mobile-datetime-calendar-footer__group__button--none",
+      ) as HTMLButtonElement;
+      const footerButtonCloseEl = el.querySelector(
+        ".kuc-base-mobile-datetime-calendar-footer__group__button--close",
+      ) as HTMLButtonElement;
+      const headerCenterEl = el.querySelector(
+        ".kuc-base-mobile-datetime-calendar-header__group__center",
+      ) as HTMLSpanElement;
+      expect(headerCenterEl.childElementCount).to.equal(2);
+      expect(
+        headerCenterEl.children[0].classList.contains(
+          "kuc-base-mobile-datetime-calendar-header__group__center__month",
+        ),
+      ).to.equal(true);
+      expect(
+        headerCenterEl.children[1].classList.contains(
+          "kuc-base-mobile-datetime-calendar-header__group__center__year",
+        ),
+      ).to.equal(true);
+      expect(bodyWeekDayEl.innerText).to.equal("Do.");
+      expect(footerButtonTodayEl.innerText).to.equal("Hoy");
+      expect(footerButtonNoneEl.innerText).to.equal("Ninguno");
+      expect(footerButtonCloseEl.innerText).to.equal("Cerrar");
+    });
   });
 });
diff --git a/src/base/datetime/mobile-date/index.stories.js b/src/base/datetime/mobile-date/index.stories.js
index baba5658ac..283e343f19 100644
--- a/src/base/datetime/mobile-date/index.stories.js
+++ b/src/base/datetime/mobile-date/index.stories.js
@@ -6,7 +6,7 @@ export default {
   argTypes: {
     language: {
       name: "language",
-      options: ["en", "ja", "zh", "zh-TW"],
+      options: ["en", "ja", "zh", "zh-TW", "es"],
       control: {
         type: "select",
       },
diff --git a/src/base/datetime/mobile-date/style.ts b/src/base/datetime/mobile-date/style.ts
index a1089bc567..22377df2e6 100644
--- a/src/base/datetime/mobile-date/style.ts
+++ b/src/base/datetime/mobile-date/style.ts
@@ -17,6 +17,10 @@ kuc-mobile-base-date:lang(zh-TW) * {
     Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,
     Verdana,sans-serif
 }
+kuc-mobile-base-date:lang(es),
+kuc-mobile-base-date:lang(es) * {
+    font-family: sans-serif;
+}
 .kuc-mobile-base-date__group {
     display: flex;
     align-items: center;
diff --git a/src/base/datetime/mobile-date/test/language.test.ts b/src/base/datetime/mobile-date/test/language.test.ts
index 0b0089556b..aced347632 100644
--- a/src/base/datetime/mobile-date/test/language.test.ts
+++ b/src/base/datetime/mobile-date/test/language.test.ts
@@ -27,7 +27,7 @@ describe("BaseMobileDate", () => {
       expect(inputEl.value).to.equal("2022-02-14");
     });
 
-    it("should be 'zh' when assigned by setter", async () => {
+    it("should be 'zh-TW' when assigned by setter", async () => {
       const container = new BaseMobileDate();
       container.value = "2022-02-14";
       container.language = "zh-TW";
@@ -51,6 +51,18 @@ describe("BaseMobileDate", () => {
       expect(inputEl.value).to.equal("2022-02-14");
     });
 
+    it("should be 'es' when assigned by setter", async () => {
+      const container = new BaseMobileDate();
+      container.value = "2022-02-14";
+      container.language = "es";
+      const el = await fixture(container);
+      const inputEl = el.querySelector(
+        ".kuc-mobile-base-date__group__input",
+      ) as HTMLInputElement;
+
+      expect(inputEl.value).to.equal("2022-02-14");
+    });
+
     it("should change to 'ja' when assigned by setter", async () => {
       const container = new BaseMobileDate();
       container.value = "2022-02-14";
diff --git a/src/base/datetime/mobile-time/style.ts b/src/base/datetime/mobile-time/style.ts
index d6492a95f4..5cd82b7c57 100644
--- a/src/base/datetime/mobile-time/style.ts
+++ b/src/base/datetime/mobile-time/style.ts
@@ -1,93 +1,113 @@
 export const BASE_MOBILE_TIME_CSS = `
-    kuc-base-mobile-time,
-    kuc-base-mobile-time * {
-        font-size: 13px;
-        font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",
-        "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
-        "Lucida Sans Unicode", Arial, Verdana, sans-serif;
-    }
-    kuc-base-mobile-time:lang(zh),
-    kuc-base-mobile-time:lang(zh) * {
-        font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
-        Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,
-        Verdana, sans-serif;
-    }
-    kuc-base-mobile-time:lang(zh-TW),
-    kuc-base-mobile-time:lang(zh-TW) * {
-    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,
-        Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,
-        Verdana,sans-serif
-    }
-    kuc-base-mobile-time {
-        width: 100%;
-        display: inline-block;
-        vertical-align: top;
-    }
-    kuc-base-mobile-time[hidden] {
-        display: none;
-    }
-    .kuc-base-mobile-time__group {
-        padding: 0;
-        margin: 0;
-        height: 31.28px;
-        border: 1px solid #b3b3b3;
-        border-radius: 5.2px;
-        box-sizing: border-box;
-        background-color: #ffffff;
-        display: -webkit-flex;
-        display: flex;
-        -webkit-align-items: center;
-        align-items: center;
-        box-shadow: 0px 1px 0px #ffffff, inset 0px 2px 3px #dadada;
-    }
-    .kuc-base-mobile-time__group--required {
-        border-color: #cf4a38;
-    }
-    .kuc-base-mobile-time__group__hours {
-        padding: 5.148px 7.722px;
-    }
-    .kuc-base-mobile-time__group__minutes {
-        padding: 5.148px 7.722px;
-        -webkit-flex-grow: 1;
-        flex-grow: 1;
-    }
-    .kuc-base-mobile-time__group__hours,
-    .kuc-base-mobile-time__group__minutes {
-        font-size: 99%;
-        height: 100%;
-        color: #000000;
-        border: none;
-        border-radius: 5.148px;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        background-color: transparent;
-    }
-    .kuc-base-mobile-time__group__colon {
-        color: #000000;
-    }
-    .kuc-base-mobile-time__group__hours:disabled
-        + .kuc-base-mobile-time__group__colon {
-        color: #999999;
-        -webkit-text-fill-color: #999999;
-        opacity: 1;
-    }
-    .kuc-base-mobile-time__group--disabled {
-        color: #999999;
-        -webkit-text-fill-color: #999999;
-        background-color: #d5d7d9;
-        opacity: 1;
-    }
-    .kuc-base-mobile-time__group__hours:disabled,
-    .kuc-base-mobile-time__group__minutes:disabled {
-        color: #999999;
-        -webkit-text-fill-color: #999999;
-        opacity: 1;
-    }
-    .kuc-base-mobile-time__group__hours:focus {
-        outline: none;
-    }
-    .kuc-base-mobile-time__group__minutes:focus {
-        outline: none;
-    }
+kuc-base-mobile-time,
+kuc-base-mobile-time * {
+  font-size: 13px;
+  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",
+  "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
+  "Lucida Sans Unicode", Arial, Verdana, sans-serif;
+}
+
+kuc-base-mobile-time:lang(zh),
+kuc-base-mobile-time:lang(zh) * {
+  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
+  Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,
+  Verdana, sans-serif;
+}
+
+kuc-base-mobile-time:lang(zh-TW),
+kuc-base-mobile-time:lang(zh-TW) * {
+  font-family: "微軟正黒體", "Microsoft JhengHei", "新宋体", NSimSun, STHeiti,
+  Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,
+  Verdana, sans-serif
+}
+
+kuc-base-mobile-time:lang(es),
+kuc-base-mobile-time:lang(es) * {
+  font-family: sans-serif;
+}
+
+kuc-base-mobile-time {
+  width: 100%;
+  display: inline-block;
+  vertical-align: top;
+}
+
+kuc-base-mobile-time[hidden] {
+  display: none;
+}
+
+.kuc-base-mobile-time__group {
+  padding: 0;
+  margin: 0;
+  height: 31.28px;
+  border: 1px solid #b3b3b3;
+  border-radius: 5.2px;
+  box-sizing: border-box;
+  background-color: #ffffff;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  box-shadow: 0px 1px 0px #ffffff, inset 0px 2px 3px #dadada;
+}
+
+.kuc-base-mobile-time__group--required {
+  border-color: #cf4a38;
+}
+
+.kuc-base-mobile-time__group__hours {
+  padding: 5.148px 7.722px;
+}
+
+.kuc-base-mobile-time__group__minutes {
+  padding: 5.148px 7.722px;
+  -webkit-flex-grow: 1;
+  flex-grow: 1;
+}
+
+.kuc-base-mobile-time__group__hours,
+.kuc-base-mobile-time__group__minutes {
+  font-size: 99%;
+  height: 100%;
+  color: #000000;
+  border: none;
+  border-radius: 5.148px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+}
+
+.kuc-base-mobile-time__group__colon {
+  color: #000000;
+}
+
+.kuc-base-mobile-time__group__hours:disabled
++ .kuc-base-mobile-time__group__colon {
+  color: #999999;
+  -webkit-text-fill-color: #999999;
+  opacity: 1;
+}
+
+.kuc-base-mobile-time__group--disabled {
+  color: #999999;
+  -webkit-text-fill-color: #999999;
+  background-color: #d5d7d9;
+  opacity: 1;
+}
+
+.kuc-base-mobile-time__group__hours:disabled,
+.kuc-base-mobile-time__group__minutes:disabled {
+  color: #999999;
+  -webkit-text-fill-color: #999999;
+  opacity: 1;
+}
+
+.kuc-base-mobile-time__group__hours:focus {
+  outline: none;
+}
+
+.kuc-base-mobile-time__group__minutes:focus {
+  outline: none;
+}
 `;
diff --git a/src/base/datetime/resource/locale.ts b/src/base/datetime/resource/locale.ts
index 6b80b5ea1b..6789c87c71 100644
--- a/src/base/datetime/resource/locale.ts
+++ b/src/base/datetime/resource/locale.ts
@@ -108,16 +108,47 @@ export const zh_TW = {
   ],
   YEAR_SELECT_POSTFIX: "年",
   WEEK_DAYS: [
-    { text: "周日", abbr: "周日" },
-    { text: "周一", abbr: "周一" },
-    { text: "周二", abbr: "周二" },
-    { text: "周三", abbr: "周三" },
-    { text: "周四", abbr: "周四" },
-    { text: "周五", abbr: "周五" },
-    { text: "周六", abbr: "周六" },
+    { text: "週日", abbr: "週日" },
+    { text: "週一", abbr: "週一" },
+    { text: "週二", abbr: "週二" },
+    { text: "週三", abbr: "週三" },
+    { text: "週四", abbr: "週四" },
+    { text: "週五", abbr: "週五" },
+    { text: "週六", abbr: "週六" },
   ],
-  INVALID_FORMAT: "日期格式不正確。",
-  INVALID_TIME_FORMAT: "時間格式不正確。",
+  INVALID_FORMAT: "日期格式錯誤。",
+  INVALID_TIME_FORMAT: "時間格式錯誤。",
   CALENDAR_FOOTER_TEXT: { none: "清空", today: "今天", close: "關閉" },
   TIME_IS_OUT_OF_VALID_RANGE: "時間超出有效範圍。",
 };
+
+export const es = {
+  MONTH_SELECT: [
+    "ENERO",
+    "FEBRERO",
+    "MARZO",
+    "ABRIL",
+    "MAYO",
+    "JUNIO",
+    "JULIO",
+    "AGOSTO",
+    "SEPTIEMBRE",
+    "OCTUBRE",
+    "NOVIEMBRE",
+    "DICIEMBRE",
+  ],
+  YEAR_SELECT_POSTFIX: "",
+  WEEK_DAYS: [
+    { text: "Do.", abbr: "Domingo" },
+    { text: "Lu.", abbr: "Lunes" },
+    { text: "Ma.", abbr: "Martes" },
+    { text: "Mi.", abbr: "Miércoles" },
+    { text: "Ju.", abbr: "Jueves" },
+    { text: "Vi.", abbr: "Viernes" },
+    { text: "Sá.", abbr: "Sábado" },
+  ],
+  INVALID_FORMAT: "Formato no válido.",
+  INVALID_TIME_FORMAT: "Formato no válido.",
+  CALENDAR_FOOTER_TEXT: { none: "Ninguno", today: "Hoy", close: "Cerrar" },
+  TIME_IS_OUT_OF_VALID_RANGE: "La hora está fuera del rango válido.",
+};
diff --git a/src/base/datetime/time/index.stories.js b/src/base/datetime/time/index.stories.js
index e161413ace..cba80f14cf 100644
--- a/src/base/datetime/time/index.stories.js
+++ b/src/base/datetime/time/index.stories.js
@@ -6,7 +6,7 @@ export default {
   argTypes: {
     language: {
       name: "language",
-      options: ["en", "ja", "zh", "zh-TW"],
+      options: ["en", "ja", "zh", "zh-TW", "es"],
       control: {
         type: "select",
       },
diff --git a/src/base/datetime/utils/index.ts b/src/base/datetime/utils/index.ts
index 37f9f9c75b..737767654b 100644
--- a/src/base/datetime/utils/index.ts
+++ b/src/base/datetime/utils/index.ts
@@ -6,7 +6,7 @@ import {
   MAX_MINUTES,
   TIME_SUFFIX,
 } from "../resource/constant";
-import { en, ja, zh, zh_TW } from "../resource/locale";
+import { en, es, ja, zh, zh_TW } from "../resource/locale";
 
 export type WeekDate = {
   attr: string;
@@ -313,6 +313,8 @@ export const getLocale = (language: string) => {
       return ja;
     case "zh-TW":
       return zh_TW;
+    case "es":
+      return es;
     default:
       return en;
   }
diff --git a/src/base/error/style.ts b/src/base/error/style.ts
index 0bedcfaf26..ec5151ae7a 100644
--- a/src/base/error/style.ts
+++ b/src/base/error/style.ts
@@ -5,6 +5,10 @@ export const BASE_ERROR_CSS = `
   kuc-base-error:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-base-error:lang(es),
+  kuc-base-error:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-base-error:lang(ja),
   kuc-base-error:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
diff --git a/src/base/label/style.ts b/src/base/label/style.ts
index 9c8ee4663d..7d1e9cf28f 100644
--- a/src/base/label/style.ts
+++ b/src/base/label/style.ts
@@ -3,17 +3,21 @@ export const BASE_LABEL_CSS = `
   kuc-base-label *,
   kuc-base-label:lang(en),
   kuc-base-label:lang(en) * {
-      font-family: sans-serif;
+    font-family: sans-serif;
+  }
+  kuc-base-label:lang(es),
+  kuc-base-label:lang(es) * {
+    font-family: sans-serif;
   }
   kuc-base-label:lang(ja),
   kuc-base-label:lang(ja) * {
-      font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
-      sans-serif;
+    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
+    sans-serif;
   }
   kuc-base-label:lang(zh),
   kuc-base-label:lang(zh) * {
-      font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
-      Hei, "Heiti SC", sans-serif;
+    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
+    Hei, "Heiti SC", sans-serif;
   }
   kuc-base-label:lang(zh-TW),
   kuc-base-label:lang(zh-TW) * {
@@ -21,22 +25,22 @@ export const BASE_LABEL_CSS = `
       Hei,"Heiti SC",sans-serif;
   }
   kuc-base-label {
-      font-size: 14px;
-      color: #333333;
-      display: inline-table;
-      vertical-align: top;
+    font-size: 14px;
+    color: #333333;
+    display: inline-table;
+    vertical-align: top;
   }
   kuc-base-label[hidden] {
-      display: none;
+    display: none;
   }
   .kuc-base-label__required-icon {
-      font-size: 20px;
-      vertical-align: -3px;
-      color: #e74c3c;
-      margin-left: 4px;
-      line-height: 1;
+    font-size: 20px;
+    vertical-align: -3px;
+    color: #e74c3c;
+    margin-left: 4px;
+    line-height: 1;
   }
   .kuc-base-label__required-icon[hidden] {
-      display: none;
+    display: none;
   }
 `;
diff --git a/src/base/mobile-error/style.ts b/src/base/mobile-error/style.ts
index c6eec82b54..651dd346f0 100644
--- a/src/base/mobile-error/style.ts
+++ b/src/base/mobile-error/style.ts
@@ -6,6 +6,10 @@ export const BASE_MOBILE_ERROR_CSS = `
       "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
       "Lucida Sans Unicode", Arial, Verdana, sans-serif;
   }
+  kuc-base-mobile-error:lang(es),
+  kuc-base-mobile-error:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-base-mobile-error:lang(zh),
   kuc-base-mobile-error:lang(zh) * {
     font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
diff --git a/src/base/mobile-label/style.ts b/src/base/mobile-label/style.ts
index 2e250aef01..da63362097 100644
--- a/src/base/mobile-label/style.ts
+++ b/src/base/mobile-label/style.ts
@@ -6,6 +6,10 @@ export const BASE_MOBILE_LABEL_CSS = `
       "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
       "Lucida Sans Unicode", Arial, Verdana, sans-serif;
   }
+  kuc-base-mobile-label:lang(es) ,
+  kuc-base-mobile-label:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-base-mobile-label:lang(zh) ,
   kuc-base-mobile-label:lang(zh) * {
     font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
diff --git a/src/button/style.ts b/src/button/style.ts
index 39020aee2f..ebc9c2efcb 100644
--- a/src/button/style.ts
+++ b/src/button/style.ts
@@ -5,6 +5,10 @@ export const BUTTON_CSS = `
   kuc-button:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-button:lang(es),
+  kuc-button:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-button:lang(ja),
   kuc-button:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
diff --git a/src/checkbox/style.ts b/src/checkbox/style.ts
index 8ee859cc35..fc41d30e47 100644
--- a/src/checkbox/style.ts
+++ b/src/checkbox/style.ts
@@ -5,6 +5,10 @@ export const CHECKBOX_CSS = `
   kuc-checkbox:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-checkbox:lang(es),
+  kuc-checkbox:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-checkbox:lang(ja),
   kuc-checkbox:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
@@ -113,4 +117,5 @@ export const CHECKBOX_CSS = `
     white-space: nowrap;
     min-height: 24px;
     line-height: 1.2;
-  }`;
+  }
+  `;
diff --git a/src/combobox/style.ts b/src/combobox/style.ts
index 12141a7f7f..93e7830087 100644
--- a/src/combobox/style.ts
+++ b/src/combobox/style.ts
@@ -5,6 +5,10 @@ export const COMBOBOX_CSS = `
   kuc-combobox:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-combobox:lang(es),
+  kuc-combobox:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-combobox:lang(ja),
   kuc-combobox:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
diff --git a/src/date-picker/index.stories.js b/src/date-picker/index.stories.js
index 196aff8156..7572c808b5 100644
--- a/src/date-picker/index.stories.js
+++ b/src/date-picker/index.stories.js
@@ -10,7 +10,7 @@ export default {
     label: { name: "label" },
     language: {
       name: "language",
-      options: ["auto", "en", "ja", "zh", "zh-TW"],
+      options: ["auto", "en", "ja", "zh", "zh-TW", "es"],
       control: {
         type: "select",
       },
diff --git a/src/date-picker/index.ts b/src/date-picker/index.ts
index f230bd86eb..45cb933397 100644
--- a/src/date-picker/index.ts
+++ b/src/date-picker/index.ts
@@ -145,7 +145,7 @@ let exportDatePicker;
     }
 
     private _getLanguage() {
-      const langs = ["en", "ja", "zh", "zh-TW"];
+      const langs = ["en", "ja", "zh", "zh-TW", "es"];
       if (langs.indexOf(this.language) !== -1) return this.language;
 
       if (langs.indexOf(document.documentElement.lang) !== -1)
diff --git a/src/date-picker/style.ts b/src/date-picker/style.ts
index f112a4e373..4d070001d7 100644
--- a/src/date-picker/style.ts
+++ b/src/date-picker/style.ts
@@ -20,6 +20,10 @@ kuc-date-picker:lang(zh-TW) * {
   font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,
     Hei,"Heiti SC"
 }
+kuc-date-picker:lang(es),
+kuc-date-picker:lang(es) * {
+  font-family: sans-serif;
+}
 kuc-date-picker {
   font-size: 14px;
   color: #333333;
diff --git a/src/date-picker/test/language.test.ts b/src/date-picker/test/language.test.ts
index 5373081e96..d516413366 100644
--- a/src/date-picker/test/language.test.ts
+++ b/src/date-picker/test/language.test.ts
@@ -42,5 +42,15 @@ describe("DatePicker", () => {
       ) as HTMLInputElement;
       expect(inputDateEl.value).to.equal("2021-12-22");
     });
+
+    it("should be change to es language when assigned by setter", async () => {
+      const container = new DatePicker({ value: "2021-12-22", language: "en" });
+      container.language = "es";
+      const el = await fixture(container);
+      const inputDateEl = el.querySelector(
+        ".kuc-base-date__input",
+      ) as HTMLInputElement;
+      expect(inputDateEl.value).to.equal("2021-12-22");
+    });
   });
 });
diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts
index 327aa52527..d095e3597c 100644
--- a/src/date-picker/type.ts
+++ b/src/date-picker/type.ts
@@ -15,7 +15,7 @@ export declare type DatePickerProps = {
   disabled?: boolean;
   requiredIcon?: boolean;
   visible?: boolean;
-  language?: "ja" | "en" | "zh" | "zh-TW" | "auto";
+  language?: "ja" | "en" | "zh" | "zh-TW" | "es" | "auto";
   value?: string;
 };
 export declare class DatePicker extends KucBase {
diff --git a/src/datetime-picker/index.stories.js b/src/datetime-picker/index.stories.js
index 399d0f2d92..1f38c12878 100644
--- a/src/datetime-picker/index.stories.js
+++ b/src/datetime-picker/index.stories.js
@@ -10,7 +10,7 @@ export default {
     label: { name: "label" },
     language: {
       name: "language",
-      options: ["auto", "en", "ja", "zh", "zh-TW"],
+      options: ["auto", "en", "ja", "zh", "zh-TW", "es"],
       control: {
         type: "select",
       },
diff --git a/src/datetime-picker/index.ts b/src/datetime-picker/index.ts
index 85fb3227a8..0848bcf6f3 100644
--- a/src/datetime-picker/index.ts
+++ b/src/datetime-picker/index.ts
@@ -469,7 +469,7 @@ let exportDateTimePicker;
     }
 
     private _getLanguage() {
-      const langs = ["en", "ja", "zh", "zh-TW"];
+      const langs = ["en", "ja", "zh", "zh-TW", "es"];
       if (langs.indexOf(this.language) !== -1) return this.language;
 
       if (langs.indexOf(document.documentElement.lang) !== -1)
diff --git a/src/datetime-picker/style.ts b/src/datetime-picker/style.ts
index f0ff051994..05c59baa84 100644
--- a/src/datetime-picker/style.ts
+++ b/src/datetime-picker/style.ts
@@ -20,6 +20,10 @@ kuc-datetime-picker:lang(zh-TW) * {
   font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,
     Hei,"Heiti SC"
 }
+kuc-datetime-picker:lang(es),
+kuc-datetime-picker:lang(es) * {
+  font-family: sans-serif;
+}
 kuc-datetime-picker {
   font-size: 14px;
   display: inline-table;
diff --git a/src/datetime-picker/test/language.test.ts b/src/datetime-picker/test/language.test.ts
index 55e1e6b3a5..59dda67ce1 100644
--- a/src/datetime-picker/test/language.test.ts
+++ b/src/datetime-picker/test/language.test.ts
@@ -51,5 +51,18 @@ describe("DateTimePicker", () => {
       ) as HTMLInputElement;
       expect(inputDateEl.value).to.equal("2021-12-22");
     });
+
+    it("should be change to es language when assigned by setter", async () => {
+      const container = new DateTimePicker({
+        value: "2021-12-22T09:30:00",
+        language: "en",
+      });
+      container.language = "es";
+      const el = await fixture(container);
+      const inputDateEl = el.querySelector(
+        ".kuc-base-date__input",
+      ) as HTMLInputElement;
+      expect(inputDateEl.value).to.equal("2021-12-22");
+    });
   });
 });
diff --git a/src/datetime-picker/type.ts b/src/datetime-picker/type.ts
index 6aa3b4c3f0..0e7026c8be 100644
--- a/src/datetime-picker/type.ts
+++ b/src/datetime-picker/type.ts
@@ -13,7 +13,7 @@ export declare type DateTimePickerProps = {
   error?: string;
   id?: string;
   label?: string;
-  language?: "ja" | "en" | "zh" | "zh-TW" | "auto";
+  language?: "ja" | "en" | "zh" | "zh-TW" | "es" | "auto";
   max?: string;
   min?: string;
   value?: string;
diff --git a/src/dialog/style.ts b/src/dialog/style.ts
index 53430f6d51..e3d3726b10 100644
--- a/src/dialog/style.ts
+++ b/src/dialog/style.ts
@@ -5,6 +5,10 @@ export const DIALOG_CSS = `
   kuc-dialog:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-dialog:lang(es),
+  kuc-dialog:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-dialog:lang(ja),
   kuc-dialog:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
diff --git a/src/dropdown/style.ts b/src/dropdown/style.ts
index 3ef8bc53d7..fffa304d70 100644
--- a/src/dropdown/style.ts
+++ b/src/dropdown/style.ts
@@ -5,6 +5,10 @@ export const DROPDOWN_CSS = `
   kuc-dropdown:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-dropdown:lang(es),
+  kuc-dropdown:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-dropdown:lang(ja),
   kuc-dropdown:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
diff --git a/src/field-group/style.ts b/src/field-group/style.ts
index 1bf298a10e..9962a5cc92 100644
--- a/src/field-group/style.ts
+++ b/src/field-group/style.ts
@@ -3,6 +3,9 @@ export const FIELD_GROUP_CSS = `
   kuc-field-group:lang(en) .kuc-field-group__group__toggle .kuc-base-label__text {
     font-family: sans-serif;
   }
+  kuc-field-group:lang(es) .kuc-field-group__group__toggle .kuc-base-label__text {
+    font-family: sans-serif;
+  }
   kuc-field-group:lang(ja) .kuc-field-group__group__toggle .kuc-base-label__text {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
       sans-serif;
diff --git a/src/mobile/button/style.ts b/src/mobile/button/style.ts
index e74158a786..fcfa1be864 100644
--- a/src/mobile/button/style.ts
+++ b/src/mobile/button/style.ts
@@ -5,6 +5,10 @@ export const MOBILE_BUTTON_CSS = `
       "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
       "Lucida Sans Unicode", Arial, Verdana, sans-serif;
   }
+  kuc-mobile-button:lang(es),
+  kuc-mobile-button:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-mobile-button:lang(zh),
   kuc-mobile-button:lang(zh) * {
     font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
diff --git a/src/mobile/checkbox/style.ts b/src/mobile/checkbox/style.ts
index 50ec83a085..34770fb3ef 100644
--- a/src/mobile/checkbox/style.ts
+++ b/src/mobile/checkbox/style.ts
@@ -7,6 +7,10 @@ export const MOBILE_CHECKBOX_CSS = `
       "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
       "Lucida Sans Unicode", Arial, Verdana, sans-serif;
   }
+  kuc-mobile-checkbox:lang(es),
+  kuc-mobile-checkbox:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-mobile-checkbox:lang(zh),
   kuc-mobile-checkbox:lang(zh) * {
     font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
diff --git a/src/mobile/date-picker/index.stories.js b/src/mobile/date-picker/index.stories.js
index 17c54bd49f..badb44c8ff 100644
--- a/src/mobile/date-picker/index.stories.js
+++ b/src/mobile/date-picker/index.stories.js
@@ -11,7 +11,7 @@ export default {
     label: { name: "label" },
     language: {
       name: "language",
-      options: ["auto", "en", "ja", "zh", "zh-TW"],
+      options: ["auto", "en", "ja", "zh", "zh-TW", "es"],
       control: {
         type: "select",
       },
diff --git a/src/mobile/date-picker/index.ts b/src/mobile/date-picker/index.ts
index d0c097c5bf..1cfbd5caa1 100644
--- a/src/mobile/date-picker/index.ts
+++ b/src/mobile/date-picker/index.ts
@@ -145,7 +145,7 @@ let exportMobileDatePicker;
     }
 
     private _getLanguage() {
-      const langs = ["en", "ja", "zh", "zh-TW"];
+      const langs = ["en", "ja", "zh", "zh-TW", "es"];
       if (langs.indexOf(this.language) !== -1) return this.language;
       if (langs.indexOf(document.documentElement.lang) !== -1) {
         return document.documentElement.lang;
diff --git a/src/mobile/date-picker/style.ts b/src/mobile/date-picker/style.ts
index 05b087a2d1..b541c4cb18 100644
--- a/src/mobile/date-picker/style.ts
+++ b/src/mobile/date-picker/style.ts
@@ -18,6 +18,10 @@ kuc-mobile-date-picker:lang(zh-TW) * {
     Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,
     Verdana,sans-serif
 }
+kuc-mobile-date-picker:lang(es),
+kuc-mobile-date-picker:lang(es) * {
+    font-family: sans-serif;
+}
 kuc-mobile-date-picker {
   font-size: 13px;
   color: #333333;
diff --git a/src/mobile/date-picker/test/language.test.ts b/src/mobile/date-picker/test/language.test.ts
index b9040687e6..21c6cef67e 100644
--- a/src/mobile/date-picker/test/language.test.ts
+++ b/src/mobile/date-picker/test/language.test.ts
@@ -51,5 +51,18 @@ describe("MobileDatePicker", () => {
       ) as HTMLInputElement;
       expect(inputDateEl.value).to.equal("2021-12-22");
     });
+
+    it("should be change to es language when assigned by setter", async () => {
+      const container = new MobileDatePicker({
+        value: "2021-12-22",
+        language: "en",
+      });
+      container.language = "es";
+      const el = await fixture(container);
+      const inputDateEl = el.querySelector(
+        ".kuc-mobile-base-date__group__input",
+      ) as HTMLInputElement;
+      expect(inputDateEl.value).to.equal("2021-12-22");
+    });
   });
 });
diff --git a/src/mobile/date-picker/type.ts b/src/mobile/date-picker/type.ts
index 3601301b96..1db17cd299 100644
--- a/src/mobile/date-picker/type.ts
+++ b/src/mobile/date-picker/type.ts
@@ -15,7 +15,7 @@ export declare type MobileDatePickerProps = {
   disabled?: boolean;
   requiredIcon?: boolean;
   visible?: boolean;
-  language?: "ja" | "en" | "zh" | "zh-TW" | "auto";
+  language?: "ja" | "en" | "zh" | "zh-TW" | "es" | "auto";
   value?: string;
 };
 export declare class MobileDatePicker extends KucBase {
diff --git a/src/mobile/datetime-picker/index.stories.js b/src/mobile/datetime-picker/index.stories.js
index be87ab297d..7517d906da 100644
--- a/src/mobile/datetime-picker/index.stories.js
+++ b/src/mobile/datetime-picker/index.stories.js
@@ -6,7 +6,7 @@ export default {
   argTypes: {
     language: {
       name: "language",
-      options: ["auto", "en", "ja", "zh", "zh-TW"],
+      options: ["auto", "en", "ja", "zh", "zh-TW", "es"],
       control: {
         type: "select",
       },
diff --git a/src/mobile/datetime-picker/index.ts b/src/mobile/datetime-picker/index.ts
index f7676dfc60..9afe0a95a5 100644
--- a/src/mobile/datetime-picker/index.ts
+++ b/src/mobile/datetime-picker/index.ts
@@ -20,6 +20,11 @@ import {
   validateProps,
 } from "../../base/validator";
 
+import "../../base/datetime/mobile-date";
+import "../../base/datetime/mobile-time";
+import "../../base/mobile-error";
+import "../../base/mobile-label";
+
 import { MOBILE_DATETIME_PICKER_CSS } from "./style";
 import {
   MobileDateTimePickerChangeEventDetail,
@@ -282,7 +287,7 @@ let exportMobileDateTimePicker;
     }
 
     private _getLanguage() {
-      const langs = ["en", "ja", "zh", "zh-TW"];
+      const langs = ["en", "ja", "zh", "zh-TW", "es"];
       if (langs.indexOf(this.language) !== -1) return this.language;
 
       if (langs.indexOf(document.documentElement.lang) !== -1)
diff --git a/src/mobile/datetime-picker/style.ts b/src/mobile/datetime-picker/style.ts
index de81c85a89..4fc20d875a 100644
--- a/src/mobile/datetime-picker/style.ts
+++ b/src/mobile/datetime-picker/style.ts
@@ -18,6 +18,10 @@ kuc-mobile-datetime-picker:lang(zh-TW) * {
     Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,
     Verdana,sans-serif
 }
+kuc-mobile-datetime-picker:lang(es),
+kuc-mobile-datetime-picker:lang(es) * {
+    font-family: sans-serif;
+}
 kuc-mobile-datetime-picker {
 font-size: 13px;
 color: #333333;
diff --git a/src/mobile/datetime-picker/test/language.test.ts b/src/mobile/datetime-picker/test/language.test.ts
index 769dea8b43..4eaee35e1f 100644
--- a/src/mobile/datetime-picker/test/language.test.ts
+++ b/src/mobile/datetime-picker/test/language.test.ts
@@ -54,5 +54,18 @@ describe("MobileDateTimePicker", () => {
       ) as HTMLInputElement;
       expect(inputDateEl.value).to.equal("2021-12-22");
     });
+
+    it("should be change to es language when assigned by setter", async () => {
+      const container = new MobileDateTimePicker({
+        value: "2021-12-22T09:30:00",
+        language: "en",
+      });
+      container.language = "es";
+      const el = await fixture(container);
+      const inputDateEl = el.querySelector(
+        ".kuc-mobile-base-date__group__input",
+      ) as HTMLInputElement;
+      expect(inputDateEl.value).to.equal("2021-12-22");
+    });
   });
 });
diff --git a/src/mobile/datetime-picker/type.ts b/src/mobile/datetime-picker/type.ts
index e09ab516ac..4df373fefd 100644
--- a/src/mobile/datetime-picker/type.ts
+++ b/src/mobile/datetime-picker/type.ts
@@ -17,7 +17,7 @@ export declare type MobileDateTimePickerProps = {
   hour12?: boolean;
   requiredIcon?: boolean;
   visible?: boolean;
-  language?: "ja" | "en" | "zh" | "zh-TW" | "auto";
+  language?: "ja" | "en" | "zh" | "zh-TW" | "es" | "auto";
   value?: string;
 };
 export declare class MobileDateTimePicker extends KucBase {
diff --git a/src/mobile/dropdown/style.ts b/src/mobile/dropdown/style.ts
index 2f8cc74aca..f1cfb665b5 100644
--- a/src/mobile/dropdown/style.ts
+++ b/src/mobile/dropdown/style.ts
@@ -7,6 +7,10 @@ export const MOBILE_DROPDOWN_CSS = `
       "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
       "Lucida Sans Unicode", Arial, Verdana, sans-serif;
   }
+  kuc-mobile-dropdown:lang(es),
+  kuc-mobile-dropdown:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-mobile-dropdown:lang(zh),
   kuc-mobile-dropdown:lang(zh) * {
     font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
diff --git a/src/mobile/multichoice/style.ts b/src/mobile/multichoice/style.ts
index 4e5573e387..18dd654c58 100644
--- a/src/mobile/multichoice/style.ts
+++ b/src/mobile/multichoice/style.ts
@@ -7,7 +7,10 @@ export const MOBILE_MULTICHOICE_CSS = `
       "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
       "Lucida Sans Unicode", Arial, Verdana, sans-serif;
   }
-
+  kuc-mobile-multi-choice:lang(es),
+  kuc-mobile-multi-choice:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-mobile-multi-choice:lang(zh),
   kuc-mobile-multi-choice:lang(zh) * {
     font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
diff --git a/src/mobile/notification/style.ts b/src/mobile/notification/style.ts
index c232844f96..8f428db703 100644
--- a/src/mobile/notification/style.ts
+++ b/src/mobile/notification/style.ts
@@ -11,7 +11,10 @@ export const MOBILE_NOTIFICATION_CSS = `
     top: -100px;
     left: 0;
   }
-
+  kuc-mobile-notification:lang(es),
+  kuc-mobile-notification:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-mobile-notification:lang(zh),
   kuc-mobile-notification:lang(zh) * {
     font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
diff --git a/src/mobile/radio-button/style.ts b/src/mobile/radio-button/style.ts
index a0f9d49830..82c810527a 100644
--- a/src/mobile/radio-button/style.ts
+++ b/src/mobile/radio-button/style.ts
@@ -7,7 +7,10 @@ export const MOBILE_RADIO_BUTTON_CSS = `
       "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
       "Lucida Sans Unicode", Arial, Verdana, sans-serif;
   }
-
+  kuc-mobile-radio-button:lang(es),
+  kuc-mobile-radio-button:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-mobile-radio-button:lang(zh) ,
   kuc-mobile-radio-button:lang(zh) * {
     font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
diff --git a/src/mobile/text/style.ts b/src/mobile/text/style.ts
index c871431b33..613102b539 100644
--- a/src/mobile/text/style.ts
+++ b/src/mobile/text/style.ts
@@ -6,6 +6,10 @@ export const MOBILE_TEXT_CSS = `
       "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
       "Lucida Sans Unicode", Arial, Verdana, sans-serif;
   }
+  kuc-mobile-text:lang(es),
+  kuc-mobile-text:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-mobile-text:lang(zh),
   kuc-mobile-text:lang(zh) * {
     font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
diff --git a/src/mobile/textarea/style.ts b/src/mobile/textarea/style.ts
index 567c3b36c0..1801d216a3 100644
--- a/src/mobile/textarea/style.ts
+++ b/src/mobile/textarea/style.ts
@@ -6,6 +6,10 @@ export const MOBILE_TEXTAREA_CSS = `
       "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
       "Lucida Sans Unicode", Arial, Verdana, sans-serif;
   }
+  kuc-mobile-textarea:lang(es),
+  kuc-mobile-textarea:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-mobile-textarea:lang(zh),
   kuc-mobile-textarea:lang(zh) * {
     font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
diff --git a/src/mobile/time-picker/index.stories.js b/src/mobile/time-picker/index.stories.js
index d1711a2573..673aaabc51 100644
--- a/src/mobile/time-picker/index.stories.js
+++ b/src/mobile/time-picker/index.stories.js
@@ -9,7 +9,7 @@ export default {
     label: { name: "label" },
     language: {
       name: "language",
-      options: ["auto", "en", "ja", "zh", "zh-TW"],
+      options: ["auto", "en", "ja", "zh", "zh-TW", "es"],
       control: {
         type: "select",
       },
diff --git a/src/mobile/time-picker/index.ts b/src/mobile/time-picker/index.ts
index 89b0528a57..38624bd5f5 100644
--- a/src/mobile/time-picker/index.ts
+++ b/src/mobile/time-picker/index.ts
@@ -169,7 +169,7 @@ let exportMobileTimePicker;
     }
 
     private _getLanguage() {
-      const langs = ["en", "ja", "zh", "zh-TW"];
+      const langs = ["en", "ja", "zh", "zh-TW", "es"];
       if (langs.indexOf(this.language) !== -1) return this.language;
 
       if (langs.indexOf(document.documentElement.lang) !== -1)
diff --git a/src/mobile/time-picker/style.ts b/src/mobile/time-picker/style.ts
index 2b35a6a94e..5bf385ac1f 100644
--- a/src/mobile/time-picker/style.ts
+++ b/src/mobile/time-picker/style.ts
@@ -1,44 +1,48 @@
 export const MOBILE_TIME_PICKER_CSS = `
-    kuc-mobile-time-picker,
-    kuc-mobile-time-picker * {
-    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",
-        "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
-        "Lucida Sans Unicode", Arial, Verdana, sans-serif;
-    }
-    kuc-mobile-time-picker:lang(zh),
-    kuc-mobile-time-picker:lang(zh) * {
-    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
-        Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,
-        Verdana, sans-serif;
-    }
-    kuc-mobile-time-picker:lang(zh-TW),
-    kuc-mobile-time-picker:lang(zh-TW) * {
-    font-family: "微軟正黒體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,
-        Hei,"Heiti SC","Lucida Grande","Lucida Sans Unicode",Arial,
-        Verdana,sans-serif
-    }
-    kuc-mobile-time-picker {
-    font-size: 13px;
-    display: inline-block;
-    vertical-align: top;
-    width: 100%;
-    }
-    kuc-mobile-time-picker[hidden] {
-    display: none;
-    }
-    .kuc-mobile-time-picker__group__label {
-    display: inline-block;
-    font-weight: bold;
-    line-height: 1.5;
-    padding: 0px;
-    margin: 0 0 4px 0;
-    white-space: nowrap;
-    }
-    .kuc-mobile-time-picker__group__label[hidden] {
-    display: none;
-    }
-    .kuc-base-mobile-time__group__wrapper {
-    padding-left: 0.5em;
-    max-width: 10px;
-    }
+kuc-mobile-time-picker,
+kuc-mobile-time-picker * {
+  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN",
+  "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", "Lucida Grande",
+  "Lucida Sans Unicode", Arial, Verdana, sans-serif;
+}
+kuc-mobile-time-picker:lang(zh),
+kuc-mobile-time-picker:lang(zh) * {
+  font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
+  Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,
+  Verdana, sans-serif;
+}
+kuc-mobile-time-picker:lang(zh-TW),
+kuc-mobile-time-picker:lang(zh-TW) * {
+  font-family: "微軟正黒體", "Microsoft JhengHei", "新宋体", NSimSun, STHeiti,
+  Hei, "Heiti SC", "Lucida Grande", "Lucida Sans Unicode", Arial,
+  Verdana, sans-serif
+}
+kuc-mobile-time-picker:lang(es),
+kuc-mobile-time-picker:lang(es) * {
+  font-family: sans-serif;
+}
+kuc-mobile-time-picker {
+  font-size: 13px;
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+}
+kuc-mobile-time-picker[hidden] {
+  display: none;
+}
+.kuc-mobile-time-picker__group__label {
+  display: inline-block;
+  font-weight: bold;
+  line-height: 1.5;
+  padding: 0px;
+  margin: 0 0 4px 0;
+  white-space: nowrap;
+}
+.kuc-mobile-time-picker__group__label[hidden] {
+  display: none;
+}
+.kuc-base-mobile-time__group__wrapper {
+  padding-left: 0.5em;
+  max-width: 10px;
+}
 `;
diff --git a/src/mobile/time-picker/test/language.test.ts b/src/mobile/time-picker/test/language.test.ts
index aa815284b5..eb13467aab 100644
--- a/src/mobile/time-picker/test/language.test.ts
+++ b/src/mobile/time-picker/test/language.test.ts
@@ -64,7 +64,7 @@ describe("MobileTimePicker", () => {
       expect(container.value).to.equal(undefined);
     });
 
-    it('should be replaced by "時間格式不正確。" when assign "zh-TW" to language and select a invalid value', async () => {
+    it('should be replaced by "時間格式錯誤。" when assign "zh-TW" to language and select a invalid value', async () => {
       const container = new MobileTimePicker({
         error: "error-message",
         language: "zh-TW",
@@ -80,7 +80,27 @@ describe("MobileTimePicker", () => {
       selectMinuteEl.value = "35";
       selectMinuteEl.dispatchEvent(new Event("change", { bubbles: true }));
       await elementUpdated(container);
-      expect(errorEl.innerText).to.equal("時間格式不正確。");
+      expect(errorEl.innerText).to.equal("時間格式錯誤。");
+      expect(container.value).to.equal(undefined);
+    });
+
+    it('should be replaced by "Formato no válido." when assign "es" to language and select a invalid value', async () => {
+      const container = new MobileTimePicker({
+        error: "error-message",
+        language: "es",
+      });
+      const el = await fixture(container);
+      const errorEl = el.querySelector(
+        ".kuc-base-mobile-error__error",
+      ) as HTMLDivElement;
+      expect(errorEl.innerText).to.equal("error-message");
+      const selectMinuteEl = el.querySelector(
+        ".kuc-base-mobile-time__group__minutes",
+      ) as HTMLSelectElement;
+      selectMinuteEl.value = "35";
+      selectMinuteEl.dispatchEvent(new Event("change", { bubbles: true }));
+      await elementUpdated(container);
+      expect(errorEl.innerText).to.equal("Formato no válido.");
       expect(container.value).to.equal(undefined);
     });
   });
diff --git a/src/mobile/time-picker/type.ts b/src/mobile/time-picker/type.ts
index ac5d7fea22..85a4cbbb57 100644
--- a/src/mobile/time-picker/type.ts
+++ b/src/mobile/time-picker/type.ts
@@ -12,7 +12,7 @@ export declare type MobileTimePickerProps = {
   error?: string;
   id?: string;
   label?: string;
-  language?: "ja" | "en" | "zh" | "zh-TW" | "auto";
+  language?: "ja" | "en" | "zh" | "zh-TW" | "es" | "auto";
   value?: string;
   disabled?: boolean;
   hour12?: boolean;
diff --git a/src/multichoice/style.ts b/src/multichoice/style.ts
index abcc5486ef..e827959fa9 100644
--- a/src/multichoice/style.ts
+++ b/src/multichoice/style.ts
@@ -5,6 +5,10 @@ export const MULTICHOICE_CSS = `
   kuc-multi-choice:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-multi-choice:lang(es),
+  kuc-multi-choice:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-multi-choice:lang(ja),
   kuc-multi-choice:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
diff --git a/src/notification/style.ts b/src/notification/style.ts
index 6127a9c025..133a703d2a 100644
--- a/src/notification/style.ts
+++ b/src/notification/style.ts
@@ -5,6 +5,10 @@ export const NOTIFICATION_CSS = `
   kuc-notification:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-notification:lang(es),
+  kuc-notification:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-notification:lang(ja),
   kuc-notification:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
diff --git a/src/radio-button/style.ts b/src/radio-button/style.ts
index 5cf0e3b85b..f3d6329b0c 100644
--- a/src/radio-button/style.ts
+++ b/src/radio-button/style.ts
@@ -5,6 +5,10 @@ export const RADIOBUTTON_CSS = `
   kuc-radio-button:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-radio-button:lang(es),
+  kuc-radio-button:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-radio-button:lang(ja),
   kuc-radio-button:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
diff --git a/src/readonly-table/style.ts b/src/readonly-table/style.ts
index b5cf5f9bdb..9fb827b948 100644
--- a/src/readonly-table/style.ts
+++ b/src/readonly-table/style.ts
@@ -5,6 +5,10 @@ export const READ_ONLY_TABLE_CSS = `
   kuc-readonly-table:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-readonly-table:lang(es),
+  kuc-readonly-table:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-readonly-table:lang(ja),
   kuc-readonly-table:lang(ja) * {
       font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
diff --git a/src/spinner/style.ts b/src/spinner/style.ts
index 5337061595..bcc70778a8 100644
--- a/src/spinner/style.ts
+++ b/src/spinner/style.ts
@@ -5,6 +5,10 @@ export const SPINNER_CSS = `
   kuc-spinner:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-spinner:lang(es),
+  kuc-spinner:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-spinner:lang(ja),
   kuc-spinner:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
diff --git a/src/table/style.ts b/src/table/style.ts
index 795283eeba..b3e48ee2ad 100644
--- a/src/table/style.ts
+++ b/src/table/style.ts
@@ -1,125 +1,129 @@
 export const TABLE_CSS = `
-    kuc-table,
-    kuc-table *,
-    kuc-table:lang(en),
-    kuc-table:lang(en) * {
-        font-family: sans-serif;
-    }
-    kuc-table:lang(ja),
-    kuc-table:lang(ja) * {
-        font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
-        sans-serif;
-    }
-    kuc-table:lang(zh),
-    kuc-table:lang(zh) * {
-        font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
-        Hei, "Heiti SC", sans-serif;
-    }
-    kuc-table:lang(zh-TW),
-    kuc-table:lang(zh-TW) * {
-       font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,
-         Hei,"Heiti SC",sans-serif;
-    }
-    kuc-table {
-        font-size: 14px;
-        color: #333333;
-        display: block;
-    }
-    kuc-table[hidden] {
-        display: none;
-    }
-    kuc-table kuc-* {
-        line-height: 1;
-    }
-    .kuc-table__table {
-        border-collapse: collapse;
-    }
-    .kuc-table__table__header {
-        border-width: 0px 1px;
-        border-color: var(--kuc-table-header-background-color, #3498db);
-        border-style: solid;
-        border-right: 0;
-    }
-    .kuc-table__table__header[hidden] {
-        display: none;
-    }
-    .kuc-table__table__header__cell {
-        box-sizing: border-box;
-        font-size: var(--kuc-table-header-font-size, 12px);
-        font-weight: 400;
-        background-color: var(--kuc-table-header-background-color, #3498db);
-        color: var(--kuc-table-header-color, #ffffff);
-        height: var(--kuc-table-header-height, 40px);
-        padding: 4px 8px;
-        text-align: left;
-        white-space: normal;
-    }
-    .kuc-table__table__header__cell-title {
-        overflow-wrap: break-word;
-        display: flex;
-        align-items: center;
-    }
-    .kuc-table__table__header__cell[hidden] {
-        display: none;
-    }
-    .kuc-table__table__header__cell .kuc-base-label__required-icon {
-        font-size: var(--kuc-table-header-font-size, 20px);
-        align-self: flex-start;
-    }
-    .kuc-table__table__body__row__cell-data {
-        box-sizing: border-box;
-        overflow-wrap: break-word;
-        white-space: normal;
-        border-color: #e3e7e8;
-        border-style: solid;
-        border-width: 1px;
-        padding: 8px 8px;
-        vertical-align: top;
-    }
-    .kuc-table__table__body__row__cell-data[hidden] {
-        display: none;
-    }
-    .kuc-table__table__body__row__action {
-        display: flex;
-        vertical-align: top;
-    }
-    .kuc-table__table__body__row__action button {
-        display: flex;
-        align-items: center;
-        width: 24px;
-        height: 24px;
-        background: transparent;
-        border: 1px solid transparent;
-        padding: 2px;
-        cursor: pointer;
-    }
-    .kuc-table__table__body__row__action button[hidden] {
-        display: none;
-    }
-    .kuc-table__table__body__row__action-add {
-        margin-left: 12px;
-    }
-    .kuc-table__table__body__row__action-remove {
-        margin-left: 4px;
-    }
-    .kuc-table__table__body__row__action-add:focus,
-    .kuc-table__table__body__row__action-remove:focus {
-        border: 1px solid #3498db;
-        outline: none;
-    }
-    .kuc-table__table__body__row__action-remove:hover path {
-        fill: #e74c3c;
-    }
-    .kuc-table__table__body__row__action[hidden] {
-        display: none;
-    }
-    .kuc-table__table caption {
-        text-align: left;
-        margin-bottom: 6px;
-        overflow-wrap: anywhere;
-        white-space: normal;
-    }
-    .kuc-table__table .kuc-table__table__label--no-column {
-        overflow-wrap: break-word;
-    }
+  kuc-table,
+  kuc-table *,
+  kuc-table:lang(en),
+  kuc-table:lang(en) * {
+    font-family: sans-serif;
+  }
+  kuc-table:lang(es),
+  kuc-table:lang(es) * {
+    font-family: sans-serif;
+  }
+  kuc-table:lang(ja),
+  kuc-table:lang(ja) * {
+    font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
+      sans-serif;
+  }
+  kuc-table:lang(zh),
+  kuc-table:lang(zh) * {
+    font-family: "微软雅黑", "Microsoft YaHei", "新宋体", NSimSun, STHeiti,
+      Hei, "Heiti SC", sans-serif;
+  }
+  kuc-table:lang(zh-TW),
+  kuc-table:lang(zh-TW) * {
+    font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,
+      Hei,"Heiti SC",sans-serif;
+  }
+  kuc-table {
+    font-size: 14px;
+    color: #333333;
+    display: block;
+  }
+  kuc-table[hidden] {
+    display: none;
+  }
+  kuc-table kuc-* {
+    line-height: 1;
+  }
+  .kuc-table__table {
+    border-collapse: collapse;
+  }
+  .kuc-table__table__header {
+    border-width: 0px 1px;
+    border-color: var(--kuc-table-header-background-color, #3498db);
+    border-style: solid;
+    border-right: 0;
+  }
+  .kuc-table__table__header[hidden] {
+    display: none;
+  }
+  .kuc-table__table__header__cell {
+    box-sizing: border-box;
+    font-size: var(--kuc-table-header-font-size, 12px);
+    font-weight: 400;
+    background-color: var(--kuc-table-header-background-color, #3498db);
+    color: var(--kuc-table-header-color, #ffffff);
+    height: var(--kuc-table-header-height, 40px);
+    padding: 4px 8px;
+    text-align: left;
+    white-space: normal;
+  }
+  .kuc-table__table__header__cell-title {
+    overflow-wrap: break-word;
+    display: flex;
+    align-items: center;
+  }
+  .kuc-table__table__header__cell[hidden] {
+    display: none;
+  }
+  .kuc-table__table__header__cell .kuc-base-label__required-icon {
+    font-size: var(--kuc-table-header-font-size, 20px);
+    align-self: flex-start;
+  }
+  .kuc-table__table__body__row__cell-data {
+    box-sizing: border-box;
+    overflow-wrap: break-word;
+    white-space: normal;
+    border-color: #e3e7e8;
+    border-style: solid;
+    border-width: 1px;
+    padding: 8px 8px;
+    vertical-align: top;
+  }
+  .kuc-table__table__body__row__cell-data[hidden] {
+    display: none;
+  }
+  .kuc-table__table__body__row__action {
+    display: flex;
+    vertical-align: top;
+  }
+  .kuc-table__table__body__row__action button {
+    display: flex;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    border: 1px solid transparent;
+    padding: 2px;
+    cursor: pointer;
+  }
+  .kuc-table__table__body__row__action button[hidden] {
+    display: none;
+  }
+  .kuc-table__table__body__row__action-add {
+    margin-left: 12px;
+  }
+  .kuc-table__table__body__row__action-remove {
+    margin-left: 4px;
+  }
+  .kuc-table__table__body__row__action-add:focus,
+  .kuc-table__table__body__row__action-remove:focus {
+    border: 1px solid #3498db;
+    outline: none;
+  }
+  .kuc-table__table__body__row__action-remove:hover path {
+    fill: #e74c3c;
+  }
+  .kuc-table__table__body__row__action[hidden] {
+    display: none;
+  }
+  .kuc-table__table caption {
+    text-align: left;
+    margin-bottom: 6px;
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+  .kuc-table__table .kuc-table__table__label--no-column {
+    overflow-wrap: break-word;
+  }
 `;
diff --git a/src/tabs/style.ts b/src/tabs/style.ts
index 81ea1857f7..bebac849f4 100644
--- a/src/tabs/style.ts
+++ b/src/tabs/style.ts
@@ -5,6 +5,10 @@ export const TABS_CSS = `
   kuc-tabs:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-tabs:lang(es),
+  kuc-tabs:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-tabs:lang(ja),
   kuc-tabs:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
diff --git a/src/text/style.ts b/src/text/style.ts
index f8132d56ba..cb19462c4b 100644
--- a/src/text/style.ts
+++ b/src/text/style.ts
@@ -5,6 +5,10 @@ kuc-text:lang(en),
 kuc-text:lang(en) * {
   font-family: sans-serif;
 }
+kuc-text:lang(es),
+kuc-text:lang(es) * {
+  font-family: sans-serif;
+}
 kuc-text:lang(ja),
 kuc-text:lang(ja) * {
   font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
diff --git a/src/textarea/style.ts b/src/textarea/style.ts
index e3990bf9b4..43209075c3 100644
--- a/src/textarea/style.ts
+++ b/src/textarea/style.ts
@@ -5,6 +5,10 @@ export const TEXTAREA_CSS = `
   kuc-textarea:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-textarea:lang(es),
+  kuc-textarea:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-textarea:lang(ja),
   kuc-textarea:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,
diff --git a/src/time-picker/index.stories.js b/src/time-picker/index.stories.js
index c74bf36d17..db5c3e0aed 100644
--- a/src/time-picker/index.stories.js
+++ b/src/time-picker/index.stories.js
@@ -6,7 +6,7 @@ export default {
   argTypes: {
     language: {
       name: "language",
-      options: ["auto", "en", "ja", "zh", "zh-TW"],
+      options: ["auto", "en", "ja", "zh", "zh-TW", "es"],
       control: {
         type: "select",
       },
diff --git a/src/time-picker/index.ts b/src/time-picker/index.ts
index b9e2f79fdf..602b378870 100644
--- a/src/time-picker/index.ts
+++ b/src/time-picker/index.ts
@@ -239,7 +239,7 @@ let exportTimePicker;
     }
 
     private _getLanguage() {
-      const languages = ["en", "ja", "zh", "zh-TW"];
+      const languages = ["en", "ja", "zh", "zh-TW", "es"];
       if (languages.indexOf(this.language) !== -1) return this.language;
 
       if (languages.indexOf(document.documentElement.lang) !== -1)
diff --git a/src/time-picker/style.ts b/src/time-picker/style.ts
index 0200285719..7f68e63a59 100644
--- a/src/time-picker/style.ts
+++ b/src/time-picker/style.ts
@@ -20,6 +20,10 @@ kuc-time-picker:lang(zh-TW) * {
   font-family: "微軟正黑體","Microsoft JhengHei","新宋体",NSimSun,STHeiti,
     Hei,"Heiti SC"
 }
+kuc-time-picker:lang(es),
+kuc-time-picker:lang(es) * {
+  font-family: sans-serif;
+}
 kuc-time-picker {
   font-size: 14px;
   color: var(--kuc-time-picker-input-color, #333333);
diff --git a/src/time-picker/test/language.test.ts b/src/time-picker/test/language.test.ts
index a9e0aa477b..91ee3d5608 100644
--- a/src/time-picker/test/language.test.ts
+++ b/src/time-picker/test/language.test.ts
@@ -108,5 +108,34 @@ describe("TimePicker", () => {
 
       expect(errorEl.innerText).to.equal("時間超出有效範圍。");
     });
+
+    it("should be change to es language when assigned by setter", async () => {
+      const container = new TimePicker({
+        value: "10:00",
+        min: "9:00",
+        max: "10:00",
+        language: "ja",
+      });
+      container.language = "es";
+      const el = await fixture(container);
+      const inputHourEl = el.querySelector(
+        ".kuc-base-time__group__hours",
+      ) as HTMLInputElement;
+      document.documentElement.setAttribute("lang", "en");
+
+      inputHourEl.click();
+      inputHourEl.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "ArrowUp", bubbles: true }),
+      );
+      await elementUpdated(el);
+
+      const errorEl = el.querySelector(
+        ".kuc-base-error__error",
+      ) as HTMLDivElement;
+
+      expect(errorEl.innerText).to.equal(
+        "La hora está fuera del rango válido.",
+      );
+    });
   });
 });
diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts
index 107277f4d2..e9fc6a1de5 100644
--- a/src/time-picker/type.ts
+++ b/src/time-picker/type.ts
@@ -20,7 +20,7 @@ export declare type TimePickerProps = {
   requiredIcon?: boolean;
   visible?: boolean;
   timeStep?: number;
-  language?: "ja" | "en" | "zh" | "zh-TW" | "auto";
+  language?: "ja" | "en" | "zh" | "zh-TW" | "es" | "auto";
 };
 export declare class TimePicker extends KucBase {
   className: string;
diff --git a/src/tooltip/style.ts b/src/tooltip/style.ts
index 4a5ff7e017..076e8393ee 100644
--- a/src/tooltip/style.ts
+++ b/src/tooltip/style.ts
@@ -5,6 +5,10 @@ export const TOOLTIP_CSS = `
   kuc-tooltip:lang(en) * {
     font-family: sans-serif;
   }
+  kuc-tooltip:lang(es),
+  kuc-tooltip:lang(es) * {
+    font-family: sans-serif;
+  }
   kuc-tooltip:lang(ja),
   kuc-tooltip:lang(ja) * {
     font-family: "メイリオ", "Hiragino Kaku Gothic ProN", Meiryo,