fis-component 0.0.20 → 0.0.22

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var r = require('react');
+var React = require('react');
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -923,7 +923,7 @@ var unitlessKeys = {
   strokeWidth: 1
 };
 
-var f="undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",m="active",y="data-styled-version",v="6.1.15",g="/*!sc*/\n",S="undefined"!=typeof window&&"HTMLElement"in window,w=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),E=/invalid hook call/i,N=new Set,P=function(t,n){if("production"!==process.env.NODE_ENV){var r$1=n?' with the id of "'.concat(n,'"'):"",s="The component ".concat(t).concat(r$1," has been created dynamically.\n")+"You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",i=console.error;try{var a=!0;console.error=function(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];E.test(t)?(a=!1,N.delete(s)):i.apply(void 0,__spreadArray([t],n,!1));},r.useRef(),a&&!N.has(s)&&(console.warn(s),N.add(s));}catch(e){E.test(e.message)&&N.delete(s);}finally{console.error=i;}}},_=Object.freeze([]),C=Object.freeze({});function I(e,t,n){return void 0===n&&(n=C),e.theme!==n.theme&&e.theme||t||n.theme}var A=new Set(["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","track","u","ul","use","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"]),O=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,D=/(^-|-$)/g;function R(e){return e.replace(O,"-").replace(D,"")}var T=/(a)(d)/gi,k=52,j=function(e){return String.fromCharCode(e+(e>25?39:97))};function x(e){var t,n="";for(t=Math.abs(e);t>k;t=t/k|0)n=j(t%k)+n;return (j(t%k)+n).replace(T,"$1-$2")}var V,F=5381,M=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},z=function(e){return M(F,e)};function $(e){return x(z(e)>>>0)}function B(e){return "production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function L(e){return "string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var G="function"==typeof Symbol&&Symbol.for,Y=G?Symbol.for("react.memo"):60115,q=G?Symbol.for("react.forward_ref"):60112,W={childContextTypes:true,contextType:true,contextTypes:true,defaultProps:true,displayName:true,getDefaultProps:true,getDerivedStateFromError:true,getDerivedStateFromProps:true,mixins:true,propTypes:true,type:true},H={name:true,length:true,prototype:true,caller:true,callee:true,arguments:true,arity:true},U={$$typeof:true,compare:true,defaultProps:true,displayName:true,propTypes:true,type:true},J=((V={})[q]={$$typeof:true,render:true,defaultProps:true,displayName:true,propTypes:true},V[Y]=U,V);function X(e){return ("type"in(t=e)&&t.type.$$typeof)===Y?U:"$$typeof"in e?J[e.$$typeof]:W;var t;}var Z=Object.defineProperty,K=Object.getOwnPropertyNames,Q=Object.getOwnPropertySymbols,ee=Object.getOwnPropertyDescriptor,te=Object.getPrototypeOf,ne=Object.prototype;function re(e,t,n){if("string"!=typeof t){if(ne){var r=te(t);r&&r!==ne&&re(e,r,n);}var o=K(t);Q&&(o=o.concat(Q(t)));for(var s=X(e),i=X(t),a=0;a<o.length;++a){var c=o[a];if(!(c in H||n&&n[c]||i&&c in i||s&&c in s)){var l=ee(t,c);try{Z(e,c,l);}catch(e){}}}}return e}function oe(e){return "function"==typeof e}function se(e){return "object"==typeof e&&"styledComponentId"in e}function ie(e,t){return e&&t?"".concat(e," ").concat(t):e||t||""}function ae(e,t){if(0===e.length)return "";for(var n=e[0],r=1;r<e.length;r++)n+=e[r];return n}function ce(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function le(e,t,n){if(void 0===n&&(n=false),!n&&!ce(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var r=0;r<t.length;r++)e[r]=le(e[r],t[r]);else if(ce(t))for(var r in t)e[r]=le(e[r],t[r]);return e}function ue(e,t){Object.defineProperty(e,"toString",{value:t});}var pe="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",18:"ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"}:{};function de(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=e[0],r=[],o=1,s=e.length;o<s;o+=1)r.push(e[o]);return r.forEach(function(e){n=n.replace(/%[a-z]/,e);}),n}function he(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];return "production"===process.env.NODE_ENV?new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t," for more information.").concat(n.length>0?" Args: ".concat(n.join(", ")):"")):new Error(de.apply(void 0,__spreadArray([pe[t]],n,false)).trim())}var fe=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e;}return e.prototype.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},e.prototype.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)if((o<<=1)<0)throw he(16,"".concat(e));this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0;}for(var i=this.indexOfGroup(e+1),a=(s=0,t.length);s<a;s++)this.tag.insertRule(i,t[s])&&(this.groupSizes[e]++,i++);},e.prototype.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n);}},e.prototype.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+="".concat(this.tag.getRule(s)).concat(g);return t},e}(),me=1<<30,ye=new Map,ve=new Map,ge=1,Se=function(e){if(ye.has(e))return ye.get(e);for(;ve.has(ge);)ge++;var t=ge++;if("production"!==process.env.NODE_ENV&&((0|t)<0||t>me))throw he(16,"".concat(t));return ye.set(e,t),ve.set(t,e),t},we=function(e,t){ge=t+1,ye.set(e,t),ve.set(t,e);},be="style[".concat(f,"][").concat(y,'="').concat(v,'"]'),Ee=new RegExp("^".concat(f,'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),Ne=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r);},Pe=function(e,t){for(var n,r=(null!==(n=t.textContent)&&void 0!==n?n:"").split(g),o=[],s=0,i=r.length;s<i;s++){var a=r[s].trim();if(a){var c=a.match(Ee);if(c){var l=0|parseInt(c[1],10),u=c[2];0!==l&&(we(u,l),Ne(e,u,c[3]),e.getTag().insertRules(l,o)),o.length=0;}else o.push(a);}}},_e=function(e){for(var t=document.querySelectorAll(be),n=0,r=t.length;n<r;n++){var o=t[n];o&&o.getAttribute(f)!==m&&(Pe(e,o),o.parentNode&&o.parentNode.removeChild(o));}};function Ce(){return "undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null}var Ie=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){var t=Array.from(e.querySelectorAll("style[".concat(f,"]")));return t[t.length-1]}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(f,m),r.setAttribute(y,v);var i=Ce();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},Ae=function(){function e(e){this.element=Ie(e),this.element.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}throw he(17)}(this.element),this.length=0;}return e.prototype.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return  false}},e.prototype.deleteRule=function(e){this.sheet.deleteRule(e),this.length--;},e.prototype.getRule=function(e){var t=this.sheet.cssRules[e];return t&&t.cssText?t.cssText:""},e}(),Oe=function(){function e(e){this.element=Ie(e),this.nodes=this.element.childNodes,this.length=0;}return e.prototype.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t);return this.element.insertBefore(n,this.nodes[e]||null),this.length++,true}return  false},e.prototype.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--;},e.prototype.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),De=function(){function e(e){this.rules=[],this.length=0;}return e.prototype.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,true)},e.prototype.deleteRule=function(e){this.rules.splice(e,1),this.length--;},e.prototype.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),Re=S,Te={isServer:!S,useCSSOMInjection:!w},ke=function(){function e(e,n,r){ void 0===e&&(e=C),void 0===n&&(n={});var o=this;this.options=__assign(__assign({},Te),e),this.gs=n,this.names=new Map(r),this.server=!!e.isServer,!this.server&&S&&Re&&(Re=false,_e(this)),ue(this,function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=function(n){var o=function(e){return ve.get(e)}(n);if(void 0===o)return "continue";var s=e.names.get(o),i=t.getGroup(n);if(void 0===s||!s.size||0===i.length)return "continue";var a="".concat(f,".g").concat(n,'[id="').concat(o,'"]'),c="";void 0!==s&&s.forEach(function(e){e.length>0&&(c+="".concat(e,","));}),r+="".concat(i).concat(a,'{content:"').concat(c,'"}').concat(g);},s=0;s<n;s++)o(s);return r}(o)});}return e.registerId=function(e){return Se(e)},e.prototype.rehydrate=function(){!this.server&&S&&_e(this);},e.prototype.reconstructWithOptions=function(n,r){return void 0===r&&(r=true),new e(__assign(__assign({},this.options),n),this.gs,r&&this.names||void 0)},e.prototype.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},e.prototype.getTag=function(){return this.tag||(this.tag=(e=function(e){var t=e.useCSSOMInjection,n=e.target;return e.isServer?new De(n):t?new Ae(n):new Oe(n)}(this.options),new fe(e)));var e;},e.prototype.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},e.prototype.registerName=function(e,t){if(Se(e),this.names.has(e))this.names.get(e).add(t);else {var n=new Set;n.add(t),this.names.set(e,n);}},e.prototype.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(Se(e),n);},e.prototype.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},e.prototype.clearRules=function(e){this.getTag().clearGroup(Se(e)),this.clearNames(e);},e.prototype.clearTag=function(){this.tag=void 0;},e}(),je=/&/g,xe=/^\s*\/\/.*$/gm;function Ve(e,t){return e.map(function(e){return "rule"===e.type&&(e.value="".concat(t," ").concat(e.value),e.value=e.value.replaceAll(",",",".concat(t," ")),e.props=e.props.map(function(e){return "".concat(t," ").concat(e)})),Array.isArray(e.children)&&"@keyframes"!==e.type&&(e.children=Ve(e.children,t)),e})}function Fe(e){var t,n,r,o=C,s=o.options,i=void 0===s?C:s,a=o.plugins,c=void 0===a?_:a,l=function(e,r,o){return o.startsWith(n)&&o.endsWith(n)&&o.replaceAll(n,"").length>0?".".concat(t):e},u=c.slice();u.push(function(e){e.type===RULESET&&e.value.includes("&")&&(e.props[0]=e.props[0].replace(je,n).replace(r,l));}),i.prefix&&u.push(prefixer),u.push(stringify);var p=function(e,o,s,a){ void 0===o&&(o=""),void 0===s&&(s=""),void 0===a&&(a="&"),t=a,n=o,r=new RegExp("\\".concat(n,"\\b"),"g");var c=e.replace(xe,""),l=compile(s||o?"".concat(s," ").concat(o," { ").concat(c," }"):c);i.namespace&&(l=Ve(l,i.namespace));var p=[];return serialize(l,middleware(u.concat(rulesheet(function(e){return p.push(e)})))),p};return p.hash=c.length?c.reduce(function(e,t){return t.name||he(15),M(e,t.name)},F).toString():"",p}var Me=new ke,ze=Fe(),$e=r.createContext({shouldForwardProp:void 0,styleSheet:Me,stylis:ze});$e.Consumer;r.createContext(void 0);function Ge(){return r.useContext($e)}var qe=function(){function e(e,t){var n=this;this.inject=function(e,t){ void 0===t&&(t=ze);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"));},this.name=e,this.id="sc-keyframes-".concat(e),this.rules=t,ue(this,function(){throw he(12,String(n.name))});}return e.prototype.getName=function(e){return void 0===e&&(e=ze),this.name+e.hash},e}(),We=function(e){return e>="A"&&e<="Z"};function He(e){for(var t="",n=0;n<e.length;n++){var r=e[n];if(1===n&&"-"===r&&"-"===e[0])return e;We(r)?t+="-"+r.toLowerCase():t+=r;}return t.startsWith("ms-")?"-"+t:t}var Ue=function(e){return null==e||false===e||""===e},Je=function(t){var n,r,o=[];for(var s in t){var i=t[s];t.hasOwnProperty(s)&&!Ue(i)&&(Array.isArray(i)&&i.isCss||oe(i)?o.push("".concat(He(s),":"),i,";"):ce(i)?o.push.apply(o,__spreadArray(__spreadArray(["".concat(s," {")],Je(i),false),["}"],false)):o.push("".concat(He(s),": ").concat((n=s,null==(r=i)||"boolean"==typeof r||""===r?"":"number"!=typeof r||0===r||n in unitlessKeys||n.startsWith("--")?String(r).trim():"".concat(r,"px")),";")));}return o};function Xe(e,t,n,r){if(Ue(e))return [];if(se(e))return [".".concat(e.styledComponentId)];if(oe(e)){if(!oe(s=e)||s.prototype&&s.prototype.isReactComponent||!t)return [e];var o=e(t);return "production"===process.env.NODE_ENV||"object"!=typeof o||Array.isArray(o)||o instanceof qe||ce(o)||null===o||console.error("".concat(B(e)," is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")),Xe(o,t,n,r)}var s;return e instanceof qe?n?(e.inject(n,r),[e.getName(r)]):[e]:ce(e)?Je(e):Array.isArray(e)?Array.prototype.concat.apply(_,e.map(function(e){return Xe(e,t,n,r)})):[e.toString()]}function Ze(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(oe(n)&&!se(n))return  false}return  true}var Ke=z(v),Qe=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&Ze(e),this.componentId=t,this.baseHash=M(Ke,t),this.baseStyle=n,ke.registerId(t);}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.baseStyle?this.baseStyle.generateAndInjectStyles(e,t,n):"";if(this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(this.componentId,this.staticRulesId))r=ie(r,this.staticRulesId);else {var o=ae(Xe(this.rules,e,t,n)),s=x(M(this.baseHash,o)>>>0);if(!t.hasNameForId(this.componentId,s)){var i=n(o,".".concat(s),void 0,this.componentId);t.insertRules(this.componentId,s,i);}r=ie(r,s),this.staticRulesId=s;}else {for(var a=M(this.baseHash,n.hash),c="",l=0;l<this.rules.length;l++){var u=this.rules[l];if("string"==typeof u)c+=u,"production"!==process.env.NODE_ENV&&(a=M(a,u));else if(u){var p=ae(Xe(u,e,t,n));a=M(a,p+l),c+=p;}}if(c){var d=x(a>>>0);t.hasNameForId(this.componentId,d)||t.insertRules(this.componentId,d,n(c,".".concat(d),void 0,this.componentId)),r=ie(r,d);}}return r},e}(),et=r.createContext(void 0);et.Consumer;function rt(e){var n=r.useContext(et),o=r.useMemo(function(){return function(e,n){if(!e)throw he(14);if(oe(e)){var r=e(n);if("production"!==process.env.NODE_ENV&&(null===r||Array.isArray(r)||"object"!=typeof r))throw he(7);return r}if(Array.isArray(e)||"object"!=typeof e)throw he(8);return n?__assign(__assign({},n),e):e}(e.theme,n)},[e.theme,n]);return e.children?r.createElement(et.Provider,{value:o},e.children):null}var ot={},st=new Set;function it(e,o,s){var i=se(e),a=e,c=!L(e),p=o.attrs,d=void 0===p?_:p,h=o.componentId,f=void 0===h?function(e,t){var n="string"!=typeof e?"sc":R(e);ot[n]=(ot[n]||0)+1;var r="".concat(n,"-").concat($(v+n+ot[n]));return t?"".concat(t,"-").concat(r):r}(o.displayName,o.parentComponentId):h,m=o.displayName,y=void 0===m?function(e){return L(e)?"styled.".concat(e):"Styled(".concat(B(e),")")}(e):m,g=o.displayName&&o.componentId?"".concat(R(o.displayName),"-").concat(o.componentId):o.componentId||f,S=i&&a.attrs?a.attrs.concat(d).filter(Boolean):d,w=o.shouldForwardProp;if(i&&a.shouldForwardProp){var b=a.shouldForwardProp;if(o.shouldForwardProp){var E=o.shouldForwardProp;w=function(e,t){return b(e,t)&&E(e,t)};}else w=b;}var N=new Qe(s,g,i?a.componentStyle:void 0);function O(e,o){return function(e,o,s){var i=e.attrs,a=e.componentStyle,c=e.defaultProps,p=e.foldedComponentIds,d=e.styledComponentId,h=e.target,f=r.useContext(et),m=Ge(),y=e.shouldForwardProp||m.shouldForwardProp;"production"!==process.env.NODE_ENV&&r.useDebugValue(d);var v=I(o,f,c)||C,g=function(e,n,r){for(var o,s=__assign(__assign({},n),{className:void 0,theme:r}),i=0;i<e.length;i+=1){var a=oe(o=e[i])?o(s):o;for(var c in a)s[c]="className"===c?ie(s[c],a[c]):"style"===c?__assign(__assign({},s[c]),a[c]):a[c];}return n.className&&(s.className=ie(s.className,n.className)),s}(i,o,v),S=g.as||h,w={};for(var b in g) void 0===g[b]||"$"===b[0]||"as"===b||"theme"===b&&g.theme===v||("forwardedAs"===b?w.as=g.forwardedAs:y&&!y(b,S)||(w[b]=g[b],y||"development"!==process.env.NODE_ENV||isPropValid(b)||st.has(b)||!A.has(S)||(st.add(b),console.warn('styled-components: it looks like an unknown prop "'.concat(b,'" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));var E=function(e,t){var n=Ge(),r$1=e.generateAndInjectStyles(t,n.styleSheet,n.stylis);return "production"!==process.env.NODE_ENV&&r.useDebugValue(r$1),r$1}(a,g);"production"!==process.env.NODE_ENV&&e.warnTooManyClasses&&e.warnTooManyClasses(E);var N=ie(p,d);return E&&(N+=" "+E),g.className&&(N+=" "+g.className),w[L(S)&&!A.has(S)?"class":"className"]=N,s&&(w.ref=s),r.createElement(S,w)}(D,e,o)}O.displayName=y;var D=r.forwardRef(O);return D.attrs=S,D.componentStyle=N,D.displayName=y,D.shouldForwardProp=w,D.foldedComponentIds=i?ie(a.foldedComponentIds,a.styledComponentId):"",D.styledComponentId=g,D.target=i?a.target:e,Object.defineProperty(D,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=i?function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];for(var r=0,o=t;r<o.length;r++)le(e,o[r],true);return e}({},a.defaultProps,e):e;}}),"production"!==process.env.NODE_ENV&&(P(y,g),D.warnTooManyClasses=function(e,t){var n={},r=false;return function(o){if(!r&&(n[o]=true,Object.keys(n).length>=200)){var s=t?' with the id of "'.concat(t,'"'):"";console.warn("Over ".concat(200," classes were generated for component ").concat(e).concat(s,".\n")+"Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=true,n={};}}}(y,g)),ue(D,function(){return ".".concat(D.styledComponentId)}),c&&re(D,e,{attrs:true,componentStyle:true,displayName:true,foldedComponentIds:true,shouldForwardProp:true,styledComponentId:true,target:true}),D}function at(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n}var ct=function(e){return Object.assign(e,{isCss:true})};function lt(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];if(oe(t)||ce(t))return ct(Xe(at(_,__spreadArray([t],n,true))));var o=t;return 0===n.length&&1===o.length&&"string"==typeof o[0]?Xe(o):ct(Xe(at(o,n)))}function ut(n,r,o){if(void 0===o&&(o=C),!r)throw he(1,r);var s=function(t){for(var s=[],i=1;i<arguments.length;i++)s[i-1]=arguments[i];return n(r,o,lt.apply(void 0,__spreadArray([t],s,false)))};return s.attrs=function(e){return ut(n,r,__assign(__assign({},o),{attrs:Array.prototype.concat(o.attrs,e).filter(Boolean)}))},s.withConfig=function(e){return ut(n,r,__assign(__assign({},o),e))},s}var pt=function(e){return ut(it,e)},dt=pt;A.forEach(function(e){dt[e]=pt(e);});function mt(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");var o=ae(lt.apply(void 0,__spreadArray([t],n,false))),s=$(o);return new qe(s,o)}"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");var wt="__sc-".concat(f,"__");"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window[wt]||(window[wt]=0),1===window[wt]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window[wt]+=1);
+var f="undefined"!=typeof process&&void 0!==process.env&&(process.env.REACT_APP_SC_ATTR||process.env.SC_ATTR)||"data-styled",m="active",y="data-styled-version",v="6.1.15",g="/*!sc*/\n",S="undefined"!=typeof window&&"HTMLElement"in window,w=Boolean("boolean"==typeof SC_DISABLE_SPEEDY?SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&""!==process.env.REACT_APP_SC_DISABLE_SPEEDY?"false"!==process.env.REACT_APP_SC_DISABLE_SPEEDY&&process.env.REACT_APP_SC_DISABLE_SPEEDY:"undefined"!=typeof process&&void 0!==process.env&&void 0!==process.env.SC_DISABLE_SPEEDY&&""!==process.env.SC_DISABLE_SPEEDY?"false"!==process.env.SC_DISABLE_SPEEDY&&process.env.SC_DISABLE_SPEEDY:"production"!==process.env.NODE_ENV),E=/invalid hook call/i,N=new Set,P=function(t,n){if("production"!==process.env.NODE_ENV){var r=n?' with the id of "'.concat(n,'"'):"",s="The component ".concat(t).concat(r," has been created dynamically.\n")+"You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.",i=console.error;try{var a=!0;console.error=function(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];E.test(t)?(a=!1,N.delete(s)):i.apply(void 0,__spreadArray([t],n,!1));},React.useRef(),a&&!N.has(s)&&(console.warn(s),N.add(s));}catch(e){E.test(e.message)&&N.delete(s);}finally{console.error=i;}}},_=Object.freeze([]),C=Object.freeze({});function I(e,t,n){return void 0===n&&(n=C),e.theme!==n.theme&&e.theme||t||n.theme}var A=new Set(["a","abbr","address","area","article","aside","audio","b","base","bdi","bdo","big","blockquote","body","br","button","canvas","caption","cite","code","col","colgroup","data","datalist","dd","del","details","dfn","dialog","div","dl","dt","em","embed","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","hr","html","i","iframe","img","input","ins","kbd","keygen","label","legend","li","link","main","map","mark","menu","menuitem","meta","meter","nav","noscript","object","ol","optgroup","option","output","p","param","picture","pre","progress","q","rp","rt","ruby","s","samp","script","section","select","small","source","span","strong","style","sub","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","track","u","ul","use","var","video","wbr","circle","clipPath","defs","ellipse","foreignObject","g","image","line","linearGradient","marker","mask","path","pattern","polygon","polyline","radialGradient","rect","stop","svg","text","tspan"]),O=/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g,D=/(^-|-$)/g;function R(e){return e.replace(O,"-").replace(D,"")}var T=/(a)(d)/gi,k=52,j=function(e){return String.fromCharCode(e+(e>25?39:97))};function x(e){var t,n="";for(t=Math.abs(e);t>k;t=t/k|0)n=j(t%k)+n;return (j(t%k)+n).replace(T,"$1-$2")}var V,F=5381,M=function(e,t){for(var n=t.length;n;)e=33*e^t.charCodeAt(--n);return e},z=function(e){return M(F,e)};function $(e){return x(z(e)>>>0)}function B(e){return "production"!==process.env.NODE_ENV&&"string"==typeof e&&e||e.displayName||e.name||"Component"}function L(e){return "string"==typeof e&&("production"===process.env.NODE_ENV||e.charAt(0)===e.charAt(0).toLowerCase())}var G="function"==typeof Symbol&&Symbol.for,Y=G?Symbol.for("react.memo"):60115,q=G?Symbol.for("react.forward_ref"):60112,W={childContextTypes:true,contextType:true,contextTypes:true,defaultProps:true,displayName:true,getDefaultProps:true,getDerivedStateFromError:true,getDerivedStateFromProps:true,mixins:true,propTypes:true,type:true},H={name:true,length:true,prototype:true,caller:true,callee:true,arguments:true,arity:true},U={$$typeof:true,compare:true,defaultProps:true,displayName:true,propTypes:true,type:true},J=((V={})[q]={$$typeof:true,render:true,defaultProps:true,displayName:true,propTypes:true},V[Y]=U,V);function X(e){return ("type"in(t=e)&&t.type.$$typeof)===Y?U:"$$typeof"in e?J[e.$$typeof]:W;var t;}var Z=Object.defineProperty,K=Object.getOwnPropertyNames,Q=Object.getOwnPropertySymbols,ee=Object.getOwnPropertyDescriptor,te=Object.getPrototypeOf,ne=Object.prototype;function re(e,t,n){if("string"!=typeof t){if(ne){var r=te(t);r&&r!==ne&&re(e,r,n);}var o=K(t);Q&&(o=o.concat(Q(t)));for(var s=X(e),i=X(t),a=0;a<o.length;++a){var c=o[a];if(!(c in H||n&&n[c]||i&&c in i||s&&c in s)){var l=ee(t,c);try{Z(e,c,l);}catch(e){}}}}return e}function oe(e){return "function"==typeof e}function se(e){return "object"==typeof e&&"styledComponentId"in e}function ie(e,t){return e&&t?"".concat(e," ").concat(t):e||t||""}function ae(e,t){if(0===e.length)return "";for(var n=e[0],r=1;r<e.length;r++)n+=e[r];return n}function ce(e){return null!==e&&"object"==typeof e&&e.constructor.name===Object.name&&!("props"in e&&e.$$typeof)}function le(e,t,n){if(void 0===n&&(n=false),!n&&!ce(e)&&!Array.isArray(e))return t;if(Array.isArray(t))for(var r=0;r<t.length;r++)e[r]=le(e[r],t[r]);else if(ce(t))for(var r in t)e[r]=le(e[r],t[r]);return e}function ue(e,t){Object.defineProperty(e,"toString",{value:t});}var pe="production"!==process.env.NODE_ENV?{1:"Cannot create styled-component for component: %s.\n\n",2:"Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n",3:"Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n",4:"The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n",5:"The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n",6:"Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n",7:'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n',8:'ThemeProvider: Please make your "theme" prop an object.\n\n',9:"Missing document `<head>`\n\n",10:"Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n",11:"_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n",12:"It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n",13:"%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n",14:'ThemeProvider: "theme" prop is required.\n\n',15:"A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n",16:"Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n",17:"CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n",18:"ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`"}:{};function de(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=e[0],r=[],o=1,s=e.length;o<s;o+=1)r.push(e[o]);return r.forEach(function(e){n=n.replace(/%[a-z]/,e);}),n}function he(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];return "production"===process.env.NODE_ENV?new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t," for more information.").concat(n.length>0?" Args: ".concat(n.join(", ")):"")):new Error(de.apply(void 0,__spreadArray([pe[t]],n,false)).trim())}var fe=function(){function e(e){this.groupSizes=new Uint32Array(512),this.length=512,this.tag=e;}return e.prototype.indexOfGroup=function(e){for(var t=0,n=0;n<e;n++)t+=this.groupSizes[n];return t},e.prototype.insertRules=function(e,t){if(e>=this.groupSizes.length){for(var n=this.groupSizes,r=n.length,o=r;e>=o;)if((o<<=1)<0)throw he(16,"".concat(e));this.groupSizes=new Uint32Array(o),this.groupSizes.set(n),this.length=o;for(var s=r;s<o;s++)this.groupSizes[s]=0;}for(var i=this.indexOfGroup(e+1),a=(s=0,t.length);s<a;s++)this.tag.insertRule(i,t[s])&&(this.groupSizes[e]++,i++);},e.prototype.clearGroup=function(e){if(e<this.length){var t=this.groupSizes[e],n=this.indexOfGroup(e),r=n+t;this.groupSizes[e]=0;for(var o=n;o<r;o++)this.tag.deleteRule(n);}},e.prototype.getGroup=function(e){var t="";if(e>=this.length||0===this.groupSizes[e])return t;for(var n=this.groupSizes[e],r=this.indexOfGroup(e),o=r+n,s=r;s<o;s++)t+="".concat(this.tag.getRule(s)).concat(g);return t},e}(),me=1<<30,ye=new Map,ve=new Map,ge=1,Se=function(e){if(ye.has(e))return ye.get(e);for(;ve.has(ge);)ge++;var t=ge++;if("production"!==process.env.NODE_ENV&&((0|t)<0||t>me))throw he(16,"".concat(t));return ye.set(e,t),ve.set(t,e),t},we=function(e,t){ge=t+1,ye.set(e,t),ve.set(t,e);},be="style[".concat(f,"][").concat(y,'="').concat(v,'"]'),Ee=new RegExp("^".concat(f,'\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)')),Ne=function(e,t,n){for(var r,o=n.split(","),s=0,i=o.length;s<i;s++)(r=o[s])&&e.registerName(t,r);},Pe=function(e,t){for(var n,r=(null!==(n=t.textContent)&&void 0!==n?n:"").split(g),o=[],s=0,i=r.length;s<i;s++){var a=r[s].trim();if(a){var c=a.match(Ee);if(c){var l=0|parseInt(c[1],10),u=c[2];0!==l&&(we(u,l),Ne(e,u,c[3]),e.getTag().insertRules(l,o)),o.length=0;}else o.push(a);}}},_e=function(e){for(var t=document.querySelectorAll(be),n=0,r=t.length;n<r;n++){var o=t[n];o&&o.getAttribute(f)!==m&&(Pe(e,o),o.parentNode&&o.parentNode.removeChild(o));}};function Ce(){return "undefined"!=typeof __webpack_nonce__?__webpack_nonce__:null}var Ie=function(e){var t=document.head,n=e||t,r=document.createElement("style"),o=function(e){var t=Array.from(e.querySelectorAll("style[".concat(f,"]")));return t[t.length-1]}(n),s=void 0!==o?o.nextSibling:null;r.setAttribute(f,m),r.setAttribute(y,v);var i=Ce();return i&&r.setAttribute("nonce",i),n.insertBefore(r,s),r},Ae=function(){function e(e){this.element=Ie(e),this.element.appendChild(document.createTextNode("")),this.sheet=function(e){if(e.sheet)return e.sheet;for(var t=document.styleSheets,n=0,r=t.length;n<r;n++){var o=t[n];if(o.ownerNode===e)return o}throw he(17)}(this.element),this.length=0;}return e.prototype.insertRule=function(e,t){try{return this.sheet.insertRule(t,e),this.length++,!0}catch(e){return  false}},e.prototype.deleteRule=function(e){this.sheet.deleteRule(e),this.length--;},e.prototype.getRule=function(e){var t=this.sheet.cssRules[e];return t&&t.cssText?t.cssText:""},e}(),Oe=function(){function e(e){this.element=Ie(e),this.nodes=this.element.childNodes,this.length=0;}return e.prototype.insertRule=function(e,t){if(e<=this.length&&e>=0){var n=document.createTextNode(t);return this.element.insertBefore(n,this.nodes[e]||null),this.length++,true}return  false},e.prototype.deleteRule=function(e){this.element.removeChild(this.nodes[e]),this.length--;},e.prototype.getRule=function(e){return e<this.length?this.nodes[e].textContent:""},e}(),De=function(){function e(e){this.rules=[],this.length=0;}return e.prototype.insertRule=function(e,t){return e<=this.length&&(this.rules.splice(e,0,t),this.length++,true)},e.prototype.deleteRule=function(e){this.rules.splice(e,1),this.length--;},e.prototype.getRule=function(e){return e<this.length?this.rules[e]:""},e}(),Re=S,Te={isServer:!S,useCSSOMInjection:!w},ke=function(){function e(e,n,r){ void 0===e&&(e=C),void 0===n&&(n={});var o=this;this.options=__assign(__assign({},Te),e),this.gs=n,this.names=new Map(r),this.server=!!e.isServer,!this.server&&S&&Re&&(Re=false,_e(this)),ue(this,function(){return function(e){for(var t=e.getTag(),n=t.length,r="",o=function(n){var o=function(e){return ve.get(e)}(n);if(void 0===o)return "continue";var s=e.names.get(o),i=t.getGroup(n);if(void 0===s||!s.size||0===i.length)return "continue";var a="".concat(f,".g").concat(n,'[id="').concat(o,'"]'),c="";void 0!==s&&s.forEach(function(e){e.length>0&&(c+="".concat(e,","));}),r+="".concat(i).concat(a,'{content:"').concat(c,'"}').concat(g);},s=0;s<n;s++)o(s);return r}(o)});}return e.registerId=function(e){return Se(e)},e.prototype.rehydrate=function(){!this.server&&S&&_e(this);},e.prototype.reconstructWithOptions=function(n,r){return void 0===r&&(r=true),new e(__assign(__assign({},this.options),n),this.gs,r&&this.names||void 0)},e.prototype.allocateGSInstance=function(e){return this.gs[e]=(this.gs[e]||0)+1},e.prototype.getTag=function(){return this.tag||(this.tag=(e=function(e){var t=e.useCSSOMInjection,n=e.target;return e.isServer?new De(n):t?new Ae(n):new Oe(n)}(this.options),new fe(e)));var e;},e.prototype.hasNameForId=function(e,t){return this.names.has(e)&&this.names.get(e).has(t)},e.prototype.registerName=function(e,t){if(Se(e),this.names.has(e))this.names.get(e).add(t);else {var n=new Set;n.add(t),this.names.set(e,n);}},e.prototype.insertRules=function(e,t,n){this.registerName(e,t),this.getTag().insertRules(Se(e),n);},e.prototype.clearNames=function(e){this.names.has(e)&&this.names.get(e).clear();},e.prototype.clearRules=function(e){this.getTag().clearGroup(Se(e)),this.clearNames(e);},e.prototype.clearTag=function(){this.tag=void 0;},e}(),je=/&/g,xe=/^\s*\/\/.*$/gm;function Ve(e,t){return e.map(function(e){return "rule"===e.type&&(e.value="".concat(t," ").concat(e.value),e.value=e.value.replaceAll(",",",".concat(t," ")),e.props=e.props.map(function(e){return "".concat(t," ").concat(e)})),Array.isArray(e.children)&&"@keyframes"!==e.type&&(e.children=Ve(e.children,t)),e})}function Fe(e){var t,n,r,o=C,s=o.options,i=void 0===s?C:s,a=o.plugins,c=void 0===a?_:a,l=function(e,r,o){return o.startsWith(n)&&o.endsWith(n)&&o.replaceAll(n,"").length>0?".".concat(t):e},u=c.slice();u.push(function(e){e.type===RULESET&&e.value.includes("&")&&(e.props[0]=e.props[0].replace(je,n).replace(r,l));}),i.prefix&&u.push(prefixer),u.push(stringify);var p=function(e,o,s,a){ void 0===o&&(o=""),void 0===s&&(s=""),void 0===a&&(a="&"),t=a,n=o,r=new RegExp("\\".concat(n,"\\b"),"g");var c=e.replace(xe,""),l=compile(s||o?"".concat(s," ").concat(o," { ").concat(c," }"):c);i.namespace&&(l=Ve(l,i.namespace));var p=[];return serialize(l,middleware(u.concat(rulesheet(function(e){return p.push(e)})))),p};return p.hash=c.length?c.reduce(function(e,t){return t.name||he(15),M(e,t.name)},F).toString():"",p}var Me=new ke,ze=Fe(),$e=React.createContext({shouldForwardProp:void 0,styleSheet:Me,stylis:ze});$e.Consumer;React.createContext(void 0);function Ge(){return React.useContext($e)}var qe=function(){function e(e,t){var n=this;this.inject=function(e,t){ void 0===t&&(t=ze);var r=n.name+t.hash;e.hasNameForId(n.id,r)||e.insertRules(n.id,r,t(n.rules,r,"@keyframes"));},this.name=e,this.id="sc-keyframes-".concat(e),this.rules=t,ue(this,function(){throw he(12,String(n.name))});}return e.prototype.getName=function(e){return void 0===e&&(e=ze),this.name+e.hash},e}(),We=function(e){return e>="A"&&e<="Z"};function He(e){for(var t="",n=0;n<e.length;n++){var r=e[n];if(1===n&&"-"===r&&"-"===e[0])return e;We(r)?t+="-"+r.toLowerCase():t+=r;}return t.startsWith("ms-")?"-"+t:t}var Ue=function(e){return null==e||false===e||""===e},Je=function(t){var n,r,o=[];for(var s in t){var i=t[s];t.hasOwnProperty(s)&&!Ue(i)&&(Array.isArray(i)&&i.isCss||oe(i)?o.push("".concat(He(s),":"),i,";"):ce(i)?o.push.apply(o,__spreadArray(__spreadArray(["".concat(s," {")],Je(i),false),["}"],false)):o.push("".concat(He(s),": ").concat((n=s,null==(r=i)||"boolean"==typeof r||""===r?"":"number"!=typeof r||0===r||n in unitlessKeys||n.startsWith("--")?String(r).trim():"".concat(r,"px")),";")));}return o};function Xe(e,t,n,r){if(Ue(e))return [];if(se(e))return [".".concat(e.styledComponentId)];if(oe(e)){if(!oe(s=e)||s.prototype&&s.prototype.isReactComponent||!t)return [e];var o=e(t);return "production"===process.env.NODE_ENV||"object"!=typeof o||Array.isArray(o)||o instanceof qe||ce(o)||null===o||console.error("".concat(B(e)," is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")),Xe(o,t,n,r)}var s;return e instanceof qe?n?(e.inject(n,r),[e.getName(r)]):[e]:ce(e)?Je(e):Array.isArray(e)?Array.prototype.concat.apply(_,e.map(function(e){return Xe(e,t,n,r)})):[e.toString()]}function Ze(e){for(var t=0;t<e.length;t+=1){var n=e[t];if(oe(n)&&!se(n))return  false}return  true}var Ke=z(v),Qe=function(){function e(e,t,n){this.rules=e,this.staticRulesId="",this.isStatic="production"===process.env.NODE_ENV&&(void 0===n||n.isStatic)&&Ze(e),this.componentId=t,this.baseHash=M(Ke,t),this.baseStyle=n,ke.registerId(t);}return e.prototype.generateAndInjectStyles=function(e,t,n){var r=this.baseStyle?this.baseStyle.generateAndInjectStyles(e,t,n):"";if(this.isStatic&&!n.hash)if(this.staticRulesId&&t.hasNameForId(this.componentId,this.staticRulesId))r=ie(r,this.staticRulesId);else {var o=ae(Xe(this.rules,e,t,n)),s=x(M(this.baseHash,o)>>>0);if(!t.hasNameForId(this.componentId,s)){var i=n(o,".".concat(s),void 0,this.componentId);t.insertRules(this.componentId,s,i);}r=ie(r,s),this.staticRulesId=s;}else {for(var a=M(this.baseHash,n.hash),c="",l=0;l<this.rules.length;l++){var u=this.rules[l];if("string"==typeof u)c+=u,"production"!==process.env.NODE_ENV&&(a=M(a,u));else if(u){var p=ae(Xe(u,e,t,n));a=M(a,p+l),c+=p;}}if(c){var d=x(a>>>0);t.hasNameForId(this.componentId,d)||t.insertRules(this.componentId,d,n(c,".".concat(d),void 0,this.componentId)),r=ie(r,d);}}return r},e}(),et=React.createContext(void 0);et.Consumer;function rt(e){var n=React.useContext(et),o=React.useMemo(function(){return function(e,n){if(!e)throw he(14);if(oe(e)){var r=e(n);if("production"!==process.env.NODE_ENV&&(null===r||Array.isArray(r)||"object"!=typeof r))throw he(7);return r}if(Array.isArray(e)||"object"!=typeof e)throw he(8);return n?__assign(__assign({},n),e):e}(e.theme,n)},[e.theme,n]);return e.children?React.createElement(et.Provider,{value:o},e.children):null}var ot={},st=new Set;function it(e,o,s){var i=se(e),a=e,c=!L(e),p=o.attrs,d=void 0===p?_:p,h=o.componentId,f=void 0===h?function(e,t){var n="string"!=typeof e?"sc":R(e);ot[n]=(ot[n]||0)+1;var r="".concat(n,"-").concat($(v+n+ot[n]));return t?"".concat(t,"-").concat(r):r}(o.displayName,o.parentComponentId):h,m=o.displayName,y=void 0===m?function(e){return L(e)?"styled.".concat(e):"Styled(".concat(B(e),")")}(e):m,g=o.displayName&&o.componentId?"".concat(R(o.displayName),"-").concat(o.componentId):o.componentId||f,S=i&&a.attrs?a.attrs.concat(d).filter(Boolean):d,w=o.shouldForwardProp;if(i&&a.shouldForwardProp){var b=a.shouldForwardProp;if(o.shouldForwardProp){var E=o.shouldForwardProp;w=function(e,t){return b(e,t)&&E(e,t)};}else w=b;}var N=new Qe(s,g,i?a.componentStyle:void 0);function O(e,o){return function(e,o,s){var i=e.attrs,a=e.componentStyle,c=e.defaultProps,p=e.foldedComponentIds,d=e.styledComponentId,h=e.target,f=React.useContext(et),m=Ge(),y=e.shouldForwardProp||m.shouldForwardProp;"production"!==process.env.NODE_ENV&&React.useDebugValue(d);var v=I(o,f,c)||C,g=function(e,n,r){for(var o,s=__assign(__assign({},n),{className:void 0,theme:r}),i=0;i<e.length;i+=1){var a=oe(o=e[i])?o(s):o;for(var c in a)s[c]="className"===c?ie(s[c],a[c]):"style"===c?__assign(__assign({},s[c]),a[c]):a[c];}return n.className&&(s.className=ie(s.className,n.className)),s}(i,o,v),S=g.as||h,w={};for(var b in g) void 0===g[b]||"$"===b[0]||"as"===b||"theme"===b&&g.theme===v||("forwardedAs"===b?w.as=g.forwardedAs:y&&!y(b,S)||(w[b]=g[b],y||"development"!==process.env.NODE_ENV||isPropValid(b)||st.has(b)||!A.has(S)||(st.add(b),console.warn('styled-components: it looks like an unknown prop "'.concat(b,'" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));var E=function(e,t){var n=Ge(),r=e.generateAndInjectStyles(t,n.styleSheet,n.stylis);return "production"!==process.env.NODE_ENV&&React.useDebugValue(r),r}(a,g);"production"!==process.env.NODE_ENV&&e.warnTooManyClasses&&e.warnTooManyClasses(E);var N=ie(p,d);return E&&(N+=" "+E),g.className&&(N+=" "+g.className),w[L(S)&&!A.has(S)?"class":"className"]=N,s&&(w.ref=s),React.createElement(S,w)}(D,e,o)}O.displayName=y;var D=React.forwardRef(O);return D.attrs=S,D.componentStyle=N,D.displayName=y,D.shouldForwardProp=w,D.foldedComponentIds=i?ie(a.foldedComponentIds,a.styledComponentId):"",D.styledComponentId=g,D.target=i?a.target:e,Object.defineProperty(D,"defaultProps",{get:function(){return this._foldedDefaultProps},set:function(e){this._foldedDefaultProps=i?function(e){for(var t=[],n=1;n<arguments.length;n++)t[n-1]=arguments[n];for(var r=0,o=t;r<o.length;r++)le(e,o[r],true);return e}({},a.defaultProps,e):e;}}),"production"!==process.env.NODE_ENV&&(P(y,g),D.warnTooManyClasses=function(e,t){var n={},r=false;return function(o){if(!r&&(n[o]=true,Object.keys(n).length>=200)){var s=t?' with the id of "'.concat(t,'"'):"";console.warn("Over ".concat(200," classes were generated for component ").concat(e).concat(s,".\n")+"Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"),r=true,n={};}}}(y,g)),ue(D,function(){return ".".concat(D.styledComponentId)}),c&&re(D,e,{attrs:true,componentStyle:true,displayName:true,foldedComponentIds:true,shouldForwardProp:true,styledComponentId:true,target:true}),D}function at(e,t){for(var n=[e[0]],r=0,o=t.length;r<o;r+=1)n.push(t[r],e[r+1]);return n}var ct=function(e){return Object.assign(e,{isCss:true})};function lt(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];if(oe(t)||ce(t))return ct(Xe(at(_,__spreadArray([t],n,true))));var o=t;return 0===n.length&&1===o.length&&"string"==typeof o[0]?Xe(o):ct(Xe(at(o,n)))}function ut(n,r,o){if(void 0===o&&(o=C),!r)throw he(1,r);var s=function(t){for(var s=[],i=1;i<arguments.length;i++)s[i-1]=arguments[i];return n(r,o,lt.apply(void 0,__spreadArray([t],s,false)))};return s.attrs=function(e){return ut(n,r,__assign(__assign({},o),{attrs:Array.prototype.concat(o.attrs,e).filter(Boolean)}))},s.withConfig=function(e){return ut(n,r,__assign(__assign({},o),e))},s}var pt=function(e){return ut(it,e)},dt=pt;A.forEach(function(e){dt[e]=pt(e);});function mt(t){for(var n=[],r=1;r<arguments.length;r++)n[r-1]=arguments[r];"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");var o=ae(lt.apply(void 0,__spreadArray([t],n,false))),s=$(o);return new qe(s,o)}"production"!==process.env.NODE_ENV&&"undefined"!=typeof navigator&&"ReactNative"===navigator.product&&console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");var wt="__sc-".concat(f,"__");"production"!==process.env.NODE_ENV&&"test"!==process.env.NODE_ENV&&"undefined"!=typeof window&&(window[wt]||(window[wt]=0),1===window[wt]&&console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://s-c.sh/2BAXzed for more info."),window[wt]+=1);
 
 var theme = {
     "com/breadcrumbs/module/horizontal-gap": "4px",
@@ -3663,6 +3663,26 @@ const FISThemeProvider = ({ theme: theme$1 = theme, children, }) => jsxRuntime.j
 
 const getTheme = (key) => (props) => props.theme[key];
 
+function IncreIcon(props) {
+    const { width = 16, height = 16, ...rest } = props;
+    return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsxRuntime.jsx("path", { d: "M7.99992 3.33331V12.6666M3.33325 7.99998H12.6666", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}
+
+function DecreIcon(props) {
+    const { width = 16, height = 16, ...rest } = props;
+    return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsxRuntime.jsx("path", { d: "M3.33325 8H12.6666", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+}
+
+function DotIcon(props) {
+    const { width = 16, height = 16, ...rest } = props;
+    return (jsxRuntime.jsxs("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: [jsxRuntime.jsx("path", { d: "M7.99999 8.66667C8.36818 8.66667 8.66666 8.36819 8.66666 8C8.66666 7.63181 8.36818 7.33334 7.99999 7.33334C7.6318 7.33334 7.33332 7.63181 7.33332 8C7.33332 8.36819 7.6318 8.66667 7.99999 8.66667Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M12.6667 8.66667C13.0348 8.66667 13.3333 8.36819 13.3333 8C13.3333 7.63181 13.0348 7.33334 12.6667 7.33334C12.2985 7.33334 12 7.63181 12 8C12 8.36819 12.2985 8.66667 12.6667 8.66667Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }), jsxRuntime.jsx("path", { d: "M3.33332 8.66667C3.70151 8.66667 3.99999 8.36819 3.99999 8C3.99999 7.63181 3.70151 7.33334 3.33332 7.33334C2.96513 7.33334 2.66666 7.63181 2.66666 8C2.66666 8.36819 2.96513 8.66667 3.33332 8.66667Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })] }));
+}
+
+function SeparatorIcon(props) {
+    const { width = 12, height = 12, ...rest } = props;
+    return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsxRuntime.jsx("path", { d: "M3.5 11L8.5 1", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+
 function DropdownIcon(props) {
     const { width = 16, height = 16, ...rest } = props;
     return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsxRuntime.jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
@@ -3692,6 +3712,11 @@ function RequestButtonLoadingIcon(props) {
                             } }) }) }) }), jsxRuntime.jsx("path", { d: "m17.294 8.7879c-0.5367 0.17067-1.1132-0.11679-1.2876-0.64204-0.3494-1.0524-0.9894-1.9897-1.8492-2.7083-0.8598-0.71864-1.906-1.1906-3.0228-1.3637s-2.2607-0.0406-3.3054 0.38286c-1.0447 0.42345-1.9493 1.1214-2.6139 2.0166-0.66463 0.89521-1.0633 1.9528-1.152 3.056-0.08872 1.1032 0.13602 2.2088 0.64936 3.1946 0.51334 0.986 1.2953 1.8138 2.2594 2.3919 0.9641 0.5782 2.0728 0.8842 3.2035 0.8842 0.5644 0 1.0219 0.4477 1.0219 1s-0.4575 1-1.0219 1c-1.5076 0-2.9859-0.408-4.2714-1.1789s-2.3281-1.8746-3.0125-3.1892c-0.68445-1.3145-0.9841-2.7887-0.86581-4.2596 0.11829-1.4708 0.6499-2.881 1.5361-4.0746 0.88616-1.1936 2.0924-2.1242 3.4852-2.6888 1.3929-0.56461 2.9182-0.74127 4.4072-0.51047 1.4891 0.2308 2.884 0.86007 4.0304 1.8183 1.1464 0.95818 1.9997 2.2079 2.4656 3.6111 0.1744 0.52525-0.1193 1.0894-0.6561 1.2601z", clipRule: "evenodd", fillRule: "evenodd", "data-figma-gradient-fill": '{"type":"GRADIENT_ANGULAR","stops":[{"color":{"r":0.20392157137393951,"g":0.23921568691730499,"b":0.25490197539329529,"a":1.0},"position":0.69999998807907104},{"color":{"r":0.015686275437474251,"g":0.31764706969261169,"b":0.47058823704719543,"a":0.052999999374151230},"position":0.99000000953674316}],"stopsVar":[{"color":{"r":0.20392157137393951,"g":0.23921568691730499,"b":0.25490197539329529,"a":1.0},"position":0.69999998807907104},{"color":{"r":0.015686275437474251,"g":0.31764706969261169,"b":0.47058823704719543,"a":0.052999999374151230},"position":0.99000000953674316}],"transform":{"m00":2.1799759864807129,"m01":-17.439807891845703,"m02":17.804824829101562,"m10":17.066665649414062,"m11":2.1333332061767578,"m12":0.40000331401824951},"opacity":1.0,"blendMode":"NORMAL","visible":true}' }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "a", children: jsxRuntime.jsx("path", { d: "m17.294 8.7879c-0.5367 0.17067-1.1132-0.11679-1.2876-0.64204-0.3494-1.0524-0.9894-1.9897-1.8492-2.7083-0.8598-0.71864-1.906-1.1906-3.0228-1.3637s-2.2607-0.0406-3.3054 0.38286c-1.0447 0.42345-1.9493 1.1214-2.6139 2.0166-0.66463 0.89521-1.0633 1.9528-1.152 3.056-0.08872 1.1032 0.13602 2.2088 0.64936 3.1946 0.51334 0.986 1.2953 1.8138 2.2594 2.3919 0.9641 0.5782 2.0728 0.8842 3.2035 0.8842 0.5644 0 1.0219 0.4477 1.0219 1s-0.4575 1-1.0219 1c-1.5076 0-2.9859-0.408-4.2714-1.1789s-2.3281-1.8746-3.0125-3.1892c-0.68445-1.3145-0.9841-2.7887-0.86581-4.2596 0.11829-1.4708 0.6499-2.881 1.5361-4.0746 0.88616-1.1936 2.0924-2.1242 3.4852-2.6888 1.3929-0.56461 2.9182-0.74127 4.4072-0.51047 1.4891 0.2308 2.884 0.86007 4.0304 1.8183 1.1464 0.95818 1.9997 2.2079 2.4656 3.6111 0.1744 0.52525-0.1193 1.0894-0.6561 1.2601z", clipRule: "evenodd", fillRule: "evenodd" }) }) })] }));
 }
 
+function ResizeIcon(props) {
+    const { width = 20, height = 20, ...rest } = props;
+    return (jsxRuntime.jsx("svg", { width: width, height: height, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...rest, children: jsxRuntime.jsx("path", { d: "M12 14L14 12M7 14L14 7", stroke: "currentColor", "stroke-linecap": "round" }) }));
+}
+
 const ButtonSC = dt.button `
   display: flex;
   justify-content: center;
@@ -3706,16 +3731,22 @@ const ButtonSC = dt.button `
     cursor: not-allowed;
   }
 
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
   &:focus-visible {
     box-shadow:
       0px 0px 0px ${getTheme("sem/dimension/stroke-width/divider/lg")}
         ${getTheme("com/focus-mark/color-gap-spacing")},
-      0px 0px 0px 4px ${getTheme("com/focus-mark/color-stroke")} !important;
+      0px 0px 0px ${getTheme("com/focus-mark/corner-radius-default")}
+        ${getTheme("com/focus-mark/color-stroke")} !important;
     outline: none;
   }
 
   .button-content {
-    visibility: ${(props) => (props.$isLoading ? "hidden" : "visible")};
+    visibility: ${(props) => (props.$loading ? "hidden" : "visible")};
   }
 
   // size of the button
@@ -3850,7 +3881,7 @@ const ButtonSC = dt.button `
             }
           }
 
-          ${props.$isLoading &&
+          ${props.$loading &&
                 lt `
             background-color: ${getTheme("com/button/loading/background-color")} !important;
           `}
@@ -3910,7 +3941,7 @@ const ButtonSC = dt.button `
             }
           }
 
-          ${props.$isLoading &&
+          ${props.$loading &&
                 lt `
             background-color: ${getTheme("com/button/loading/background-color")} !important;
             border-color: ${getTheme("com/button/loading/stroke-color")} !important;
@@ -3971,7 +4002,7 @@ const ButtonSC = dt.button `
             }
           }
 
-          ${props.$isLoading &&
+          ${props.$loading &&
                 lt `
             background-color: ${getTheme("com/button/loading/background-color")} !important;
             border-color: ${getTheme("com/button/loading/stroke-color")} !important;
@@ -4025,7 +4056,7 @@ const ButtonSC = dt.button `
             }
           }
 
-          ${props.$isLoading &&
+          ${props.$loading &&
                 lt `
             background-color: ${getTheme("com/button/loading/background-color")} !important;
           `}
@@ -4085,7 +4116,7 @@ const ButtonSC = dt.button `
             }
           }
 
-          ${props.$isLoading &&
+          ${props.$loading &&
                 lt `
             background-color: ${getTheme("com/button/loading/background-color")} !important;
             border-color: ${getTheme("com/button/loading/stroke-color")};
@@ -4139,7 +4170,7 @@ const ButtonSC = dt.button `
             }
           }
 
-          ${props.$isLoading &&
+          ${props.$loading &&
                 lt `
             background-color: ${getTheme("com/button/loading-invert/solid-background-color")} !important;
           `}
@@ -4201,7 +4232,7 @@ const ButtonSC = dt.button `
             }
           }
 
-          ${props.$isLoading &&
+          ${props.$loading &&
                 lt `
             background-color: ${getTheme("com/button/disable-invert/background-color-transparent")} !important;
             border-color: ${getTheme("com/button/disable-invert/stroke-color")} !important;
@@ -4236,13 +4267,14 @@ const SvgSpinningIconSC = dt(RequestButtonLoadingIcon) `
   animation: ${spin} 0.9s linear infinite;
 `;
 
-const FISButton = r.forwardRef((props, ref) => {
-    const { active, type, children, size = "md", variant = "primary", isLoading, disabled = false, startIcon: startIconProp, endIcon: endIconProp, ...rest } = props;
-    const startIcon = startIconProp && (jsxRuntime.jsx(SpanIconSC, { children: startIconProp }));
-    const endIcon = endIconProp && (jsxRuntime.jsx(SpanIconSC, { children: endIconProp }));
-    return (jsxRuntime.jsxs(ButtonSC, { ...rest, ref: ref, "$variant": variant, "$size": size, "$active": active, "$isLoading": isLoading, disabled: disabled || isLoading, children: [isLoading &&
+const FISButton = React.forwardRef((props, ref) => {
+    const { active, type, children, size = "md", variant = "primary", loading, disabled = false, startIcon: startIconProp, endIcon: endIconProp, ...rest } = props;
+    const startIcon = startIconProp && jsxRuntime.jsx(SpanIconSC, { children: startIconProp });
+    const endIcon = endIconProp && jsxRuntime.jsx(SpanIconSC, { children: endIconProp });
+    return (jsxRuntime.jsxs(ButtonSC, { ...rest, ref: ref, "$variant": variant, "$size": size, "$active": active, "$loading": loading, disabled: disabled || loading, children: [loading &&
                 (variant === "primary-white" || variant === "secondary-white" ? (jsxRuntime.jsx(SvgSpinningWhiteIconSC, {})) : (jsxRuntime.jsx(SvgSpinningIconSC, {}))), startIcon, jsxRuntime.jsx("span", { className: "button-content", children: children }), endIcon] }));
 });
+FISButton.displayName = "FISButton";
 
 const LinkButtonStyled = dt.button `
   display: flex;
@@ -4477,12 +4509,13 @@ const IconStyled$1 = dt.span `
   align-items: center;
 `;
 
-const FISLinkButton = r.forwardRef((props, ref) => {
+const FISLinkButton = React.forwardRef((props, ref) => {
     const { type, children, size = "sm", variant = "default", underline, startIcon: startIconProp, endIcon: endIconProp, ...rest } = props;
     const startIcon = startIconProp && (jsxRuntime.jsx(IconStyled$1, { className: "button-icon", children: startIconProp }));
     const endIcon = endIconProp && (jsxRuntime.jsx(IconStyled$1, { className: "button-icon", children: endIconProp }));
     return (jsxRuntime.jsxs(LinkButtonStyled, { ...rest, ref: ref, "$variant": variant, "$size": size, "$underline": underline, children: [startIcon, jsxRuntime.jsx("span", { className: "button-content", children: children }), endIcon] }));
 });
+FISLinkButton.displayName = "FISLinkButton";
 
 const ButtonStyled = dt.button `
   display: flex;
@@ -4911,7 +4944,7 @@ const ButtonStyled = dt.button `
 }}
 `;
 
-const FISIconButton = r.forwardRef((props, ref) => {
+const FISIconButton = React.forwardRef((props, ref) => {
     const { type, children, active = false, size = "md", variant = "primary", icon: iconProp, ...rest } = props;
     return (jsxRuntime.jsx(ButtonStyled, { ...rest, ref: ref, "$variant": variant, "$size": size, "$active": active, children: iconProp }));
 });
@@ -5185,8 +5218,8 @@ const IconStyled = dt.span `
   align-items: center;
 `;
 
-const FISGroupButton = ({ size = "md", disabled = false, options, variant, }) => {
-    return (jsxRuntime.jsx(GroupButtonContainerStyled, { children: options.map((option, index) => (r.createElement(Button, { ...option, key: index, disabledContainer: disabled, size: size, variant: variant }))) }));
+const FISGroupButton = ({ className, size = "md", disabled = false, options, variant, }) => {
+    return (jsxRuntime.jsx(GroupButtonContainerStyled, { className: className, children: options.map((option, index) => (React.createElement(Button, { ...option, key: index, disabledContainer: disabled, size: size, variant: variant }))) }));
 };
 const Button = ({ disabledContainer, startIcon: startIconProp, endIcon: endIconProp, size = "md", variant = "default", label, disabled, ...rest }) => {
     const onlyIcon = Boolean(!label &&
@@ -5196,6 +5229,89 @@ const Button = ({ disabledContainer, startIcon: startIconProp, endIcon: endIconP
     return (jsxRuntime.jsxs(ButtonItemStyled, { ...rest, disabled: disabledContainer || disabled, "$onlyIcon": onlyIcon, "$size": size, "$variant": variant, children: [startIcon, label && jsxRuntime.jsx("span", { className: "button-content", children: label }), endIcon] }));
 };
 
+const DivContainerSC$3 = dt.div `
+  display: flex;
+  align-items: center;
+`;
+const DivIconSC$2 = dt.div `
+  display: flex;
+  align-items: center;
+`;
+const SpanLabelSC$1 = dt.span `
+  ${getTheme("Label/XS")};
+  color: ${getTheme("com/breadcrumbs/module/non-current/label/color-text/default")};
+`;
+const ButtonItemSC = dt.button `
+  all: unset;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  ${getTheme("Label/XS")}
+  color: ${getTheme("com/breadcrumbs/module/non-current/label/color-text/default")};
+  padding-top: ${getTheme("com/breadcrumbs/module/vertical-padding")};
+  padding-bottom: ${getTheme("com/breadcrumbs/module/vertical-padding")};
+  padding-right: ${getTheme("com/breadcrumbs/module/horizontal-padding")};
+  padding-left: ${getTheme("com/breadcrumbs/module/horizontal-padding")};
+  border-radius: ${getTheme("sem/dimension/radius/component/sm")};
+  gap: ${getTheme("com/breadcrumbs/module/horizontal-gap")};
+
+  &:hover {
+    background-color: ${getTheme("sem/color/background/neutral/canvas/hover")};
+    ${SpanLabelSC$1} {
+      color: ${getTheme("com/breadcrumbs/module/non-current/label/color-text/hover")};
+    }
+
+    ${DivIconSC$2} {
+      color: ${getTheme("com/breadcrumbs/module/non-current/icon/color-icon/hover")};
+    }
+  }
+
+  ${(props) => props.$active &&
+    lt `
+      background-color: ${getTheme("sem/color/background/neutral/canvas/active")};
+      outline: ${getTheme("com/actived-mark/gap-spacing")} solid
+        ${getTheme("com/actived-mark/color-gap-spacing")};
+
+      ${SpanLabelSC$1} {
+        color: ${getTheme("com/breadcrumbs/module/non-current/label/color-text/active")};
+      }
+
+      ${DivIconSC$2} {
+        color: ${getTheme("com/breadcrumbs/module/non-current/icon/color-icon/active")};
+      }
+    `}
+
+  &:focus-visible {
+    background-color: ${getTheme("com/focus-mark/background-color")};
+    box-shadow: 0 0 0 ${getTheme("sem/dimension/stroke-width/divider/lg")}
+        ${getTheme("com/focus-mark/color-gap-spacing")},
+      0 0 0 4px ${getTheme("com/focus-mark/color-stroke")};
+  }
+`;
+const DivIconDotSC = dt.div `
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  padding-top: ${getTheme("com/breadcrumbs/module/vertical-padding")};
+  padding-bottom: ${getTheme("com/breadcrumbs/module/vertical-padding")};
+  padding-right: ${getTheme("com/breadcrumbs/module/horizontal-padding")};
+  padding-left: ${getTheme("com/breadcrumbs/module/horizontal-padding")};
+  gap: ${getTheme("com/breadcrumbs/module/horizontal-gap")};
+  border-radius: ${getTheme("com/breadcrumbs/module/corner-radius")};
+`;
+
+const MAX_VISIBLE_ITEMS = 4;
+const BreadcrumbItem = React.forwardRef(({ label, icon, active, onClick, ...rest }, ref) => {
+    return (jsxRuntime.jsxs(ButtonItemSC, { ...rest, ref: ref, onClick: onClick, "$active": active, children: [icon && jsxRuntime.jsx(DivIconSC$2, { children: icon }), label && jsxRuntime.jsx(SpanLabelSC$1, { children: label })] }));
+});
+const BreadcrumbEllipsis = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DivIconDotSC, { children: jsxRuntime.jsx(DotIcon, {}) }), jsxRuntime.jsx(SeparatorIcon, {})] }));
+const FISBreadcrumb = ({ items, className }) => {
+    if (items.length === 0)
+        return null;
+    return (jsxRuntime.jsxs(DivContainerSC$3, { className: className, children: [items?.[0]?.icon && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon, variant: "tertiary-invisible", onClick: items[0].onClick }), jsxRuntime.jsx(SeparatorIcon, {})] })), items.length > MAX_VISIBLE_ITEMS ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(SeparatorIcon, {})] }, index))), jsxRuntime.jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(SeparatorIcon, {})] }, `end-${index}`)))] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.slice(1).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(SeparatorIcon, {})] }, index))) }))] }));
+};
+
 const SpanRadioControlSC = dt.span `
   display: inline-flex;
   align-items: center;
@@ -5376,10 +5492,11 @@ const LabelRadioContainerSC = dt.label `
 }}
 `;
 
-const FISRadio = r.forwardRef(({ className, children, subLabel, checked = false, disabled = false, size = "md", variant = "primary", inputRef, "aria-label": ariaLabel, ...rest }, forwardedRef) => {
-    const radioId = `radio-${r.useId()}`;
+const FISRadio = React.forwardRef(({ className, children, subLabel, checked = false, disabled = false, size = "md", variant = "primary", inputRef, "aria-label": ariaLabel, ...rest }, forwardedRef) => {
+    const radioId = `radio-${React.useId()}`;
     return (jsxRuntime.jsxs(LabelRadioContainerSC, { ref: forwardedRef, className: className, "$checked": checked, "$disabled": disabled, "$size": size, "$variant": variant, children: [jsxRuntime.jsxs(SpanRadioControlSC, { tabIndex: disabled ? -1 : 0, children: [jsxRuntime.jsx(InputVisuallyHiddenSC, { ...rest, ref: inputRef, type: "radio", checked: checked, disabled: disabled, "aria-label": ariaLabel, "aria-labelledby": children ? radioId : undefined }), checked && jsxRuntime.jsx(SpanRadioControlInnerSC, {})] }), (children || subLabel) && (jsxRuntime.jsxs(SpanLabelContainerSC, { children: [children && jsxRuntime.jsx(SpanLabelSC, { id: radioId, children: children }), subLabel && jsxRuntime.jsx(SpanSubLabelSC, { children: subLabel })] }))] }));
 });
+FISRadio.displayName = "FISRadio";
 
 const CheckboxControlStyled = dt.span `
   display: inline-flex;
@@ -5570,10 +5687,11 @@ const CheckboxContainerStyled = dt.label `
 `;
 
 // Main Component
-const FISCheckbox = r.forwardRef(({ className, children, subLabel, checked = false, indeterminate = false, disabled = false, size = "md", variant = "primary", inputRef, ...rest }, forwardedRef) => {
-    const checkboxId = `checkbox-${r.useId()}`;
+const FISCheckbox = React.forwardRef(({ className, children, subLabel, checked = false, indeterminate = false, disabled = false, size = "md", variant = "primary", inputRef, ...rest }, forwardedRef) => {
+    const checkboxId = `checkbox-${React.useId()}`;
     return (jsxRuntime.jsxs(CheckboxContainerStyled, { ref: forwardedRef, className: className, "$checked": checked, "$indeterminate": indeterminate, "$disabled": disabled, "$size": size, "$variant": variant, children: [jsxRuntime.jsxs(CheckboxControlStyled, { tabIndex: disabled ? -1 : 0, children: [jsxRuntime.jsx(VisuallyHiddenStyled, { ...rest, ref: inputRef, type: "checkbox", checked: checked, disabled: disabled, "aria-labelledby": children ? checkboxId : undefined }), checked ? jsxRuntime.jsx(checkedIcon, {}) : null, !checked && indeterminate ? jsxRuntime.jsx(IndeterminateIcon, {}) : null] }), (children || subLabel) && (jsxRuntime.jsxs(LabelContainerStyled, { children: [children && jsxRuntime.jsx(LabelStyled, { id: checkboxId, children: children }), subLabel && jsxRuntime.jsx(SubLabelStyled, { children: subLabel })] }))] }));
 });
+FISCheckbox.displayName = "FISCheckbox";
 
 var classnames = {exports: {}};
 
@@ -5655,12 +5773,13 @@ var classnames = {exports: {}};
 var classnamesExports = classnames.exports;
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-const InputSC = dt.input `
+const InputSC$1 = dt.input `
   width: 100%;
   ${getTheme("Paragraph/Sm")}
   color: ${getTheme("com/input/field/default/label/color-text/inputed")};
   padding-right: ${getTheme("com/input/field/size-md/label/sub-spacing")};
   padding-left: ${getTheme("com/input/field/size-md/label/sub-spacing")};
+  caret-color: ${getTheme("com/typing-cursor/default")};
   border: none;
   background: transparent;
   outline: none;
@@ -5674,11 +5793,11 @@ const InputSC = dt.input `
       color: ${getTheme("com/input/field/disable/label-color")};
     }
   }
-  &.is-error {
+  &.negative {
     color: ${getTheme("com/input/field/negative/label/color-text/inputed")};
   }
 `;
-const DivIconSC = dt.div `
+const DivIconSC$1 = dt.div `
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -5742,19 +5861,24 @@ const DivDropdownSC = dt.div `
   }
 
   &:focus {
-    box-shadow: 0 0 0 ${getTheme("com/focus-mark/gap-spacing")}
+    box-shadow:
+      0 0 0 ${getTheme("com/focus-mark/gap-spacing")}
         ${getTheme("com/focus-mark/color-gap-spacing")},
       0 0 0 4px ${getTheme("com/focus-mark/color-stroke")};
     border-radius: ${getTheme("com/input/field/size-md/corner-radius")};
     border-left: none;
   }
 
-  &.is-actived {
+  &.actived {
     background-color: ${getTheme("com/input/dropdown/background/actived")};
     outline: ${getTheme("com/actived-mark/gap-spacing")} solid
       ${getTheme("com/actived-mark/color-gap-spacing")};
     border-left: none;
   }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
 `;
 const DivSuffixSC = dt.div `
   display: flex;
@@ -5767,12 +5891,17 @@ const DivSuffixSC = dt.div `
     ${getTheme("com/input/suffix/divider/color-stroke")};
   height: 100%;
   cursor: pointer;
+
+  &.disabled {
+    cursor: not-allowed;
+  }
 `;
 const SpanTextSC = dt.span `
   ${getTheme("Paragraph/XS")};
   color: ${getTheme("com/input/suffix/label/color-text")};
 `;
-const DivContainerSC$1 = dt.div `
+const DivContainerSC$2 = dt.div `
+  width: fit-content;
   height: ${getTheme("com/input/field/size-md/height")};
   min-height: ${getTheme("com/input/field/size-md/height")};
   max-height: ${getTheme("com/input/field/size-md/height")};
@@ -5786,7 +5915,7 @@ const DivContainerSC$1 = dt.div `
   display: flex;
   align-items: center;
 
-  &.is-dropdown {
+  &.dropdown {
     padding-right: 0;
   }
   .icon-suffix {
@@ -5794,7 +5923,7 @@ const DivContainerSC$1 = dt.div `
     color: ${getTheme("com/button/tertiary/icon/color-icon/default")};
   }
 
-  &.is-error {
+  &.negative {
     color: ${getTheme("com/input/character-limit/label/over-limit/color-text")};
   }
 
@@ -5805,12 +5934,12 @@ const DivContainerSC$1 = dt.div `
     border-radius: ${getTheme("com/input/field/size-lg/corner-radius")};
   }
 
-  &:has(${InputSC}:disabled) {
+  &:has(${InputSC$1}:disabled) {
     border-color: ${getTheme("com/input/field/disable/stroke-color")};
     background-color: ${getTheme("com/input/field/disable/background-color")};
     cursor: not-allowed;
 
-    ${DivIconSC} {
+    ${DivIconSC$1} {
       color: ${getTheme("com/input/field/disable/icon-color")};
     }
     ${DivIconSuffixSC} {
@@ -5834,25 +5963,25 @@ const DivContainerSC$1 = dt.div `
     border-color: ${getTheme("com/input/field/default/border/hover")};
     background-color: ${getTheme("com/input/field/default/background/hover")};
 
-    ${DivIconSC} {
+    ${DivIconSC$1} {
       color: ${getTheme("com/input/field/default/icon/color-icon/hover")};
     }
   }
-  &:has(${InputSC}:focus) {
+  &:has(${InputSC$1}:focus) {
     border-color: ${getTheme("com/input/field/default/border/active")};
     background-color: ${getTheme("com/input/field/default/background/active")};
     outline: ${getTheme("com/actived-mark/gap-spacing")} solid
       ${getTheme("com/actived-mark/color-gap-spacing")};
 
-    ${DivIconSC} {
+    ${DivIconSC$1} {
       color: ${getTheme("com/input/field/default/icon/color-icon/active")};
     }
   }
-  &.is-error {
+  &.negative {
     border-color: ${getTheme("com/input/field/negative/border/default")};
     background-color: ${getTheme("com/input/field/negative/background/default")};
 
-    ${DivIconSC} {
+    ${DivIconSC$1} {
       color: ${getTheme("com/input/field/negative/icon/color-icon/default")};
     }
 
@@ -5860,33 +5989,45 @@ const DivContainerSC$1 = dt.div `
       border-color: ${getTheme("com/input/field/negative/border/hover")};
       background-color: ${getTheme("com/input/field/negative/background/hover")};
 
-      ${DivIconSC} {
+      ${DivIconSC$1} {
         color: ${getTheme("com/input/field/negative/icon/color-icon/hover")};
       }
     }
 
+    &:has(${InputSC$1}:focus) {
+      border-color: ${getTheme("com/input/field/negative/border/active")};
+      background-color: ${getTheme("com/input/field/negative/background/active")};
+      outline: ${getTheme("com/actived-mark/gap-spacing")} solid
+        ${getTheme("com/actived-mark/color-gap-spacing")};
+
+      ${DivIconSC$1} {
+        color: ${getTheme("com/input/field/negative/icon/color-icon/active")};
+      }
+    }
+
     &::placeholder {
       color: ${getTheme("com/input/field/negative/label/color-text/placeholder")};
     }
   }
 `;
 
-const FISInputField = r.forwardRef(({ onClickSuffix, ...props }, ref) => {
-    const { sizeInput = "md", iconPrefix, iconSuffix, labelSuffix, typeSuffix, isNegative, isActived, ...rest } = props;
-    return (jsxRuntime.jsxs(DivContainerSC$1, { className: classNames({
+const FISInputField = React.forwardRef(({ onClickSuffix, ...props }, ref) => {
+    const { sizeInput = "md", iconPrefix, iconSuffix, labelSuffix, typeSuffix, disabled = true, negative, actived, ...rest } = props;
+    return (jsxRuntime.jsxs(DivContainerSC$2, { className: classNames({
             "input-text-lg": sizeInput === "lg",
-            "is-error": isNegative,
-            "is-dropdown": typeSuffix === "dropdown",
-        }), children: [iconPrefix && jsxRuntime.jsx(DivIconSC, { children: iconPrefix }), jsxRuntime.jsx(InputSC, { ...rest, ref: ref, className: classNames({
-                    "is-error": isNegative,
-                }) }), typeSuffix === "icon" && iconSuffix && (jsxRuntime.jsx(FISIconButton, { size: "sm", icon: iconSuffix, variant: "tertiary-invisible", className: "icon-suffix", onClick: onClickSuffix })), typeSuffix === "suffix" && (jsxRuntime.jsxs(DivSuffixSC, { onClick: onClickSuffix, children: [iconSuffix && jsxRuntime.jsx(DivIconSuffixSC, { children: iconSuffix }), labelSuffix && jsxRuntime.jsx(SpanTextSC, { children: labelSuffix })] })), typeSuffix === "dropdown" && (jsxRuntime.jsxs(DivDropdownSC, { className: classNames({ "is-actived": isActived }), onClick: onClickSuffix, children: [iconSuffix && jsxRuntime.jsx(DivIconDropSC, { children: iconSuffix }), labelSuffix && jsxRuntime.jsx(SpanTextDropSC, { children: labelSuffix }), jsxRuntime.jsx(DivIconSuffixSC, { children: jsxRuntime.jsx(DropdownIcon, {}) })] }))] }));
+            negative: negative,
+            dropdown: typeSuffix === "dropdown",
+        }), children: [iconPrefix && jsxRuntime.jsx(DivIconSC$1, { children: iconPrefix }), jsxRuntime.jsx(InputSC$1, { ...rest, ref: ref, disabled: disabled, className: classNames({
+                    negative: negative,
+                }) }), typeSuffix === "icon" && iconSuffix && (jsxRuntime.jsx(FISIconButton, { size: "sm", icon: iconSuffix, variant: "tertiary-invisible", className: "icon-suffix", onClick: onClickSuffix, disabled: disabled })), typeSuffix === "suffix" && (jsxRuntime.jsxs(DivSuffixSC, { onClick: onClickSuffix, className: classNames({ disabled: disabled }), children: [iconSuffix && jsxRuntime.jsx(DivIconSuffixSC, { children: iconSuffix }), labelSuffix && jsxRuntime.jsx(SpanTextSC, { children: labelSuffix })] })), typeSuffix === "dropdown" && (jsxRuntime.jsxs(DivDropdownSC, { className: classNames({ actived: actived, disabled: disabled }), onClick: onClickSuffix, children: [iconSuffix && jsxRuntime.jsx(DivIconDropSC, { children: iconSuffix }), labelSuffix && jsxRuntime.jsx(SpanTextDropSC, { children: labelSuffix }), jsxRuntime.jsx(DivIconSuffixSC, { children: jsxRuntime.jsx(DropdownIcon, {}) })] }))] }));
 });
 FISInputField.displayName = "FISInputField";
 
-const DivContainerSC = dt.div `
+const DivContainerSC$1 = dt.div `
   display: flex;
   flex-direction: column;
   gap: ${getTheme("com/input/vertical-gap")};
+  width: fit-content;
 `;
 const SpanCountSC = dt.span `
   ${getTheme("Subheading/XS")}
@@ -5894,7 +6035,7 @@ const SpanCountSC = dt.span `
   padding-right: ${getTheme("com/input/character-limit/horizontal-padding")};
   padding-left: ${getTheme("com/input/character-limit/horizontal-padding")};
 
-  &.is-error {
+  &.negative {
     color: ${getTheme("com/input/character-limit/label/over-limit/color-text")};
   }
 `;
@@ -5902,25 +6043,25 @@ const DivHintWrapperSC = dt.div `
   display: flex;
   justify-content: space-between;
 `;
-const SpanHintSC = dt.span `
+const SpanHintSC$2 = dt.span `
   ${getTheme("Paragraph/XS")}
   color: ${getTheme("com/input/hint/neutral/label/color-text")};
   padding-top: ${getTheme("com/input/hint/top-padding")};
 
-  &.is-error {
+  &.negative {
     color: ${getTheme("com/input/hint/negative/label/color-text")};
   }
 
-  &.is-positive {
+  &.positive {
     color: ${getTheme("com/input/hint/positive/label/color-text")};
   }
 
-  &.disabled-field {
+  &.disabled {
     color: ${getTheme("com/input/hint/disable/label/color-text")};
   }
 `;
 
-const DivLabel = dt.div `
+const DivLabelSC = dt.div `
   width: 100%;
   display: flex;
   align-items: center;
@@ -5934,23 +6075,24 @@ const SpanRequiredSC = dt.span `
   color: ${getTheme("com/input/label/required-mark/color-text")};
 `;
 
-const FISInputLabel = r.forwardRef((props) => {
-    const { textLabel, isRequired, iconLabel, onClickIconLabel } = props;
-    return (jsxRuntime.jsxs(DivLabel, { children: [jsxRuntime.jsxs(LabelTextSC, { children: [textLabel, isRequired && jsxRuntime.jsx(SpanRequiredSC, { children: "\u00A0*" })] }), iconLabel && (jsxRuntime.jsx(FISIconButton, { size: "xs", variant: "tertiary-invisible", icon: iconLabel, onClick: onClickIconLabel }))] }));
+const FISInputLabel = React.forwardRef((props) => {
+    const { textLabel, required, iconLabel, onClickIconLabel } = props;
+    return (jsxRuntime.jsxs(DivLabelSC, { children: [jsxRuntime.jsxs(LabelTextSC, { children: [textLabel, required && jsxRuntime.jsx(SpanRequiredSC, { children: "\u00A0*" })] }), iconLabel && (jsxRuntime.jsx(FISIconButton, { size: "xs", variant: "tertiary-invisible", icon: iconLabel, onClick: onClickIconLabel }))] }));
 });
-
-const FISInputText = r.forwardRef((props, ref) => {
-    const { typeSuffix, textLabel = "", isLabel, iconLabel, isRequired = false, iconPrefix, sizeInput, showCount, hintText, isHintText = false, errorMessage, positiveMessage, isNegative = false, isPositive = true, maxLength = 0, value, disabled = false, onChange, onEnter, onBlur, onKeyDown, onClickIconLabel, onClickSuffix, autoFocus, ...rest } = props;
-    const [internalValue, setInternalValue] = r.useState("");
-    const isEdited = r.useRef(false);
-    const inputRef = r.useRef(null);
-    const handleChange = r.useCallback((event) => {
+FISInputLabel.displayName = "FISInputLabel";
+
+const FISInputText = React.forwardRef((props, ref) => {
+    const { className, typeSuffix, textLabel = "", iconLabel, required, iconPrefix, sizeInput, showCount, message, negative, positive, maxLength = 500, value, disabled, onChange, onEnter, onBlur, onKeyDown, onClickIconLabel, onClickSuffix, autoFocus, ...rest } = props;
+    const [internalValue, setInternalValue] = React.useState("");
+    const isEdited = React.useRef(false);
+    const inputRef = React.useRef(null);
+    const handleChange = React.useCallback((event) => {
         setInternalValue(event.target.value);
         if (onChange) {
             onChange(event.target.value);
         }
     }, [onChange]);
-    const handleKeyPress = r.useCallback((event) => {
+    const handleKeyPress = React.useCallback((event) => {
         if (!event)
             return;
         if (event.key === "Enter") {
@@ -5959,17 +6101,17 @@ const FISInputText = r.forwardRef((props, ref) => {
             }
         }
     }, [onEnter]);
-    const handleKeyDown = r.useCallback((event) => {
+    const handleKeyDown = React.useCallback((event) => {
         if (onKeyDown) {
             onKeyDown(event);
         }
     }, [onKeyDown]);
-    const handleBlur = r.useCallback((event) => {
+    const handleBlur = React.useCallback((event) => {
         if (typeof onBlur === "function") {
             onBlur(event.currentTarget.value);
         }
     }, [onBlur]);
-    r.useEffect(() => {
+    React.useEffect(() => {
         if (value) {
             setInternalValue(value);
         }
@@ -5978,12 +6120,12 @@ const FISInputText = r.forwardRef((props, ref) => {
         }
         isEdited.current = true;
     }, [value]);
-    r.useEffect(() => {
+    React.useEffect(() => {
         if (autoFocus && inputRef.current) {
             inputRef.current.focus();
         }
     }, [autoFocus]);
-    r.useImperativeHandle(ref, () => {
+    React.useImperativeHandle(ref, () => {
         const inputElement = inputRef.current;
         return {
             ...inputElement,
@@ -6005,26 +6147,931 @@ const FISInputText = r.forwardRef((props, ref) => {
             },
         };
     });
-    return (jsxRuntime.jsxs(DivContainerSC, { children: [isLabel && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, isRequired: isRequired, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(FISInputField, { ...rest, typeSuffix: typeSuffix, sizeInput: sizeInput, value: internalValue, iconPrefix: iconPrefix, onChange: handleChange, onKeyPress: handleKeyPress, onKeyDown: handleKeyDown, onBlur: handleBlur, disabled: disabled, ref: inputRef, isNegative: isNegative, onClickSuffix: onClickSuffix }), jsxRuntime.jsxs(DivHintWrapperSC, { children: [isNegative ? (jsxRuntime.jsx(SpanHintSC, { className: classNames({
-                            "is-error": isNegative,
-                        }), children: errorMessage })) : isPositive ? (jsxRuntime.jsx(SpanHintSC, { className: classNames({
-                            "is-positive": isPositive,
-                        }), children: positiveMessage })) : (jsxRuntime.jsx(SpanHintSC, { className: classNames({
-                            "disabled-field": disabled,
-                        }), children: isHintText ? hintText : "" })), showCount && maxLength > 0 && (jsxRuntime.jsxs(SpanCountSC, { className: classNames({
-                            "is-error": internalValue.length > maxLength,
+    return (jsxRuntime.jsxs(DivContainerSC$1, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(FISInputField, { ...rest, typeSuffix: typeSuffix, sizeInput: sizeInput, value: internalValue, iconPrefix: iconPrefix, onChange: handleChange, onKeyPress: handleKeyPress, onKeyDown: handleKeyDown, onBlur: handleBlur, disabled: disabled, ref: inputRef, negative: negative, onClickSuffix: onClickSuffix }), jsxRuntime.jsxs(DivHintWrapperSC, { children: [jsxRuntime.jsx(SpanHintSC$2, { className: classNames({
+                            disabled: disabled,
+                            negative: negative,
+                            positive: positive,
+                        }), children: message ? message : "" }), showCount && maxLength > 0 && (jsxRuntime.jsxs(SpanCountSC, { className: classNames({
+                            negative: internalValue.length > maxLength,
                         }), children: [internalValue.length, "/", maxLength] }))] })] }));
 });
 FISInputText.displayName = "FISInputText";
 
+const DivContainer = dt.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${(props) => {
+    switch (props.$size) {
+        case "2xs":
+            return lt `
+          border: ${getTheme("com/avatar/size-2xs/stroke-width")} solid
+            ${getTheme("com/avatar/theme/color-stroke/neutral")};
+        `;
+        case "xs":
+            return lt `
+          border: ${getTheme("com/avatar/size-xs/stroke-width")} solid
+            ${getTheme("com/avatar/theme/color-stroke/neutral")};
+        `;
+        case "sm":
+            return lt `
+          border: ${getTheme("com/avatar/size-sm/stroke-width")} solid
+            ${getTheme("com/avatar/theme/color-stroke/neutral")};
+        `;
+        case "md":
+            return lt `
+          border: ${getTheme("com/avatar/size-md/stroke-width")} solid
+            ${getTheme("com/avatar/theme/color-stroke/neutral")};
+        `;
+        case "lg":
+            return lt `
+          border: ${getTheme("com/avatar/size-lg/stroke-width")} solid
+            ${getTheme("com/avatar/theme/color-stroke/neutral")};
+        `;
+        case "xl":
+            return lt `
+          border: ${getTheme("com/avatar/size-xl/stroke-width")} solid
+            ${getTheme("com/avatar/theme/color-stroke/neutral")};
+        `;
+    }
+}}
+  ${(props) => {
+    switch (props.$color) {
+        case "neutral":
+            return lt `
+          border-color: ${getTheme("com/avatar/theme/color-stroke/neutral")};
+          background-color: ${getTheme("com/avatar/theme/background-color/neutral")};
+        `;
+        case "orange":
+            return lt `
+          border-color: ${getTheme("com/avatar/theme/color-stroke/orange")};
+          background-color: ${getTheme("com/avatar/theme/background-color/orange")};
+        `;
+        case "yellow":
+            return lt `
+          border-color: ${getTheme("com/avatar/theme/color-stroke/yellow")};
+          background-color: ${getTheme("com/avatar/theme/background-color/yellow")};
+        `;
+        case "lime":
+            return lt `
+          border-color: ${getTheme("com/avatar/theme/color-stroke/lime")};
+          background-color: ${getTheme("com/avatar/theme/background-color/lime")};
+        `;
+        case "green":
+            return lt `
+          border-color: ${getTheme("com/avatar/theme/color-stroke/green")};
+          background-color: ${getTheme("com/avatar/theme/background-color/green")};
+        `;
+        case "ocean":
+            return lt `
+          border-color: ${getTheme("com/avatar/theme/color-stroke/ocean")};
+          background-color: ${getTheme("com/avatar/theme/background-color/ocean")};
+        `;
+        case "blue":
+            return lt `
+          border-color: ${getTheme("com/avatar/theme/color-stroke/blue")};
+          background-color: ${getTheme("com/avatar/theme/background-color/blue")};
+        `;
+        case "indigo":
+            return lt `
+          border-color: ${getTheme("com/avatar/theme/color-stroke/indigo")};
+          background-color: ${getTheme("com/avatar/theme/background-color/indigo")};
+        `;
+        case "violet":
+            return lt `
+          border-color: ${getTheme("com/avatar/theme/color-stroke/violet")};
+          background-color: ${getTheme("com/avatar/theme/background-color/violet")};
+        `;
+        case "pink":
+            return lt `
+          border-color: ${getTheme("com/avatar/theme/color-stroke/pink")};
+          background-color: ${getTheme("com/avatar/theme/background-color/pink")};
+        `;
+        case "disable":
+            return lt `
+          border-color: ${getTheme("com/avatar/disable/color-stroke")};
+          background-color: ${getTheme("com/avatar/disable/background-color")};
+        `;
+    }
+}}
+    // size of the avatar
+    ${(props) => {
+    switch (props.$size) {
+        case "2xs":
+            return lt `
+          width: ${getTheme("com/avatar/size-2xs/width")};
+          height: ${getTheme("com/avatar/size-2xs/height")};
+          min-width: ${getTheme("com/avatar/size-2xs/width")};
+          max-width: ${getTheme("com/avatar/size-2xs/width")};
+          min-height: ${getTheme("com/avatar/size-2xs/height")};
+          max-height: ${getTheme("com/avatar/size-2xs/height")};
+        `;
+        case "xs":
+            return lt `
+          width: ${getTheme("com/avatar/size-xs/width")};
+          height: ${getTheme("com/avatar/size-xs/height")};
+          min-width: ${getTheme("com/avatar/size-xs/width")};
+          max-width: ${getTheme("com/avatar/size-xs/width")};
+          min-height: ${getTheme("com/avatar/size-xs/height")};
+          max-height: ${getTheme("com/avatar/size-xs/height")};
+        `;
+        case "sm":
+            return lt `
+          width: ${getTheme("com/avatar/size-sm/width")};
+          height: ${getTheme("com/avatar/size-sm/height")};
+          min-width: ${getTheme("com/avatar/size-sm/width")};
+          max-width: ${getTheme("com/avatar/size-sm/width")};
+          min-height: ${getTheme("com/avatar/size-sm/height")};
+          max-height: ${getTheme("com/avatar/size-sm/height")};
+        `;
+        case "md":
+            return lt `
+          width: ${getTheme("com/avatar/size-md/width")};
+          height: ${getTheme("com/avatar/size-md/height")};
+          min-width: ${getTheme("com/avatar/size-md/width")};
+          max-width: ${getTheme("com/avatar/size-md/width")};
+          min-height: ${getTheme("com/avatar/size-md/height")};
+          max-height: ${getTheme("com/avatar/size-md/height")};
+        `;
+        case "lg":
+            return lt `
+          width: ${getTheme("com/avatar/size-lg/width")};
+          height: ${getTheme("com/avatar/size-lg/height")};
+          min-width: ${getTheme("com/avatar/size-lg/width")};
+          max-width: ${getTheme("com/avatar/size-lg/width")};
+          min-height: ${getTheme("com/avatar/size-lg/height")};
+          max-height: ${getTheme("com/avatar/size-lg/height")};
+        `;
+        case "xl":
+            return lt `
+          width: ${getTheme("com/avatar/size-xl/width")};
+          height: ${getTheme("com/avatar/size-xl/height")};
+          min-width: ${getTheme("com/avatar/size-xl/width")};
+          max-width: ${getTheme("com/avatar/size-xl/width")};
+          min-height: ${getTheme("com/avatar/size-xl/height")};
+          max-height: ${getTheme("com/avatar/size-xl/height")};
+        `;
+    }
+}}
+    ${(props) => {
+    switch (props.$badge) {
+        case "rounded":
+            return lt `
+          border-radius: ${getTheme("com/avatar/corner-radius-rounded")};
+        `;
+        case "square":
+            return lt `
+          border-radius: ${getTheme("com/avatar/size-xl/corner-radius")};
+        `;
+    }
+}};
+`;
+const ImgAvatar = dt.img `
+  object-fit: cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+
+  // badge of the avatar
+  ${(props) => {
+    switch (props.$badge) {
+        case "rounded":
+            return lt `
+          border-radius: ${getTheme("com/avatar/corner-radius-rounded")};
+        `;
+        case "square":
+            return lt `
+          border-radius: ${getTheme("com/avatar/size-xl/corner-radius")};
+        `;
+    }
+}}
+`;
+const DivIcon = dt.div `
+  object-fit: cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${(props) => {
+    switch (props.$size) {
+        case "2xs":
+            return lt `
+          width: ${getTheme("com/avatar/size-2xs/size-icon")};
+          height: ${getTheme("com/avatar/size-2xs/size-icon")};
+        `;
+        case "xs":
+            return lt `
+          width: ${getTheme("com/avatar/size-xs/size-icon")};
+          height: ${getTheme("com/avatar/size-xs/size-icon")};
+        `;
+        case "sm":
+            return lt `
+          width: ${getTheme("com/avatar/size-sm/size-icon")};
+          height: ${getTheme("com/avatar/size-sm/size-icon")};
+        `;
+        case "md":
+            return lt `
+          width: ${getTheme("com/avatar/size-md/size-icon")};
+          height: ${getTheme("com/avatar/size-md/size-icon")};
+        `;
+        case "lg":
+            return lt `
+          width: ${getTheme("com/avatar/size-lg/size-icon")};
+          height: ${getTheme("com/avatar/size-lg/size-icon")};
+        `;
+        case "xl":
+            return lt `
+          width: ${getTheme("com/avatar/size-xl/size-icon")};
+          height: ${getTheme("com/avatar/size-xl/size-icon")};
+        `;
+    }
+}}
+  // badge of the avatar
+    ${(props) => {
+    switch (props.$badge) {
+        case "rounded":
+            return lt `
+          border-radius: ${getTheme("com/avatar/corner-radius-rounded")};
+        `;
+        case "square":
+            return lt `
+          border-radius: ${getTheme("com/avatar/size-xl/corner-radius")};
+        `;
+    }
+}}
+`;
+const SpanLetter = dt.span `
+  object-fit: cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-transform: uppercase;
+
+  ${(props) => {
+    switch (props.$size) {
+        case "2xs":
+            return lt `
+          font-size: 8px;
+          font: ${getTheme("sem/typo/subheading/font")};
+          font-weight: ${getTheme("sem/typo/subheading/weight")};
+          font-size: 8px;
+          line-height: ${getTheme("sem/typo/subheading/line-height/xs")};
+          letter-spacing: ${getTheme("sem/typo/subheading/letter-spacing/xs")};
+          text-align: center;
+        `;
+        case "xs":
+            return lt `
+          font-size: 8px;
+          font: ${getTheme("sem/typo/subheading/font")};
+          font-weight: ${getTheme("sem/typo/subheading/weight")};
+          font-size: 8px;
+          line-height: ${getTheme("sem/typo/subheading/line-height/xs")};
+          letter-spacing: ${getTheme("sem/typo/subheading/letter-spacing/xs")};
+          text-align: center;
+        `;
+        case "sm":
+            return lt `
+          ${getTheme("Subheading/XS")};
+        `;
+        case "md":
+            return lt `
+          ${getTheme("Subheading/Sm")};
+        `;
+        case "lg":
+            return lt `
+          ${getTheme("Subheading/Md")};
+        `;
+        case "xl":
+            return lt `
+          ${getTheme("Subheading/Lg")};
+        `;
+    }
+}}
+
+  ${(props) => {
+    switch (props.$color) {
+        case "neutral":
+            return lt `
+          color: ${getTheme("com/avatar/theme/label/color-text/neutral")};
+        `;
+        case "orange":
+            return lt `
+          color: ${getTheme("com/avatar/theme/label/color-text/orange")};
+        `;
+        case "yellow":
+            return lt `
+          color: ${getTheme("com/avatar/theme/label/color-text/yellow")};
+        `;
+        case "lime":
+            return lt `
+          color: ${getTheme("com/avatar/theme/label/color-text/lime")};
+        `;
+        case "green":
+            return lt `
+          color: ${getTheme("com/avatar/theme/label/color-text/green")};
+        `;
+        case "ocean":
+            return lt `
+          color: ${getTheme("com/avatar/theme/label/color-text/ocean")};
+        `;
+        case "blue":
+            return lt `
+          color: ${getTheme("com/avatar/theme/label/color-text/blue")};
+        `;
+        case "indigo":
+            return lt `
+          color: ${getTheme("com/avatar/theme/label/color-text/indigo")};
+        `;
+        case "violet":
+            return lt `
+          color: ${getTheme("com/avatar/theme/label/color-text/violet")};
+        `;
+        case "pink":
+            return lt `
+          color: ${getTheme("com/avatar/theme/label/color-text/pink")};
+        `;
+        case "disable":
+            return lt `
+          color: ${getTheme("com/avatar/disable/color-text")};
+        `;
+    }
+}}
+  
+  // badge of the avatar
+    ${(props) => {
+    switch (props.$badge) {
+        case "rounded":
+            return lt `
+          border-radius: ${getTheme("com/avatar/corner-radius-rounded")};
+        `;
+        case "square":
+            return lt `
+          border-radius: ${getTheme("com/avatar/size-xl/corner-radius")};
+        `;
+    }
+}}
+`;
+const DivBadge = dt.div `
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  border: ${getTheme("com/avatar/status-badge/size-lg/stroke-width")} solid
+    ${getTheme("com/avatar/status-badge/color-stroke")};
+  border-radius: ${getTheme("sem/dimension/radius/component/round")};
+
+  ${(props) => {
+    switch (props.$size) {
+        case "xl":
+            return lt `
+          width: 10px;
+          height: 10px;
+          min-width: 10px;
+          max-width: 10px;
+          min-height: 10px;
+          max-height: 10px;
+        `;
+        case "lg":
+            return lt `
+          width: 8px;
+          height: 8px;
+          min-width: 8px;
+          max-width: 8px;
+          min-height: 8px;
+          max-height: 8px;
+        `;
+        case "md":
+            return lt `
+          width: 8px;
+          height: 8px;
+          min-width: 8px;
+          max-width: 8px;
+          min-height: 8px;
+          max-height: 8px;
+        `;
+        case "sm":
+            return lt `
+          width: 6px;
+          height: 6px;
+          min-width: 6px;
+          max-width: 6px;
+          min-height: 6px;
+          max-height: 6px;
+        `;
+        case "xs":
+            return lt `
+          width: 6px;
+          height: 6px;
+          min-width: 6px;
+          max-width: 6px;
+          min-height: 6px;
+          max-height: 6px;
+        `;
+        case "2xs":
+            return lt `
+          width: 4px;
+          height: 4px;
+          min-width: 4px;
+          max-width: 4px;
+          min-height: 4px;
+          max-height: 4px;
+        `;
+    }
+}}
+  ${(props) => {
+    switch (props.$status) {
+        case "green":
+            return lt `
+          background-color: ${getTheme("com/avatar/status-badge/theme/green")};
+        `;
+        case "red":
+            return lt `
+          background-color: ${getTheme("com/avatar/status-badge/theme/red")};
+        `;
+        case "yellow":
+            return lt `
+          background-color: ${getTheme("com/avatar/status-badge/theme/yellow")};
+        `;
+        case "blue":
+            return lt `
+          background-color: ${getTheme("com/avatar/status-badge/theme/blue")};
+        `;
+        case "neutral":
+            return lt `
+          background-color: ${getTheme("com/avatar/status-badge/theme/neutral")};
+        `;
+    }
+}}
+`;
+
+const FISAvatar = ({ className, src, alt = "Avatar", badge = "rounded", size = "xl", icon, status = "green", color = "neutral", letter, isBadgeDot = true, }) => {
+    return (jsxRuntime.jsxs(DivContainer, { className: className, "$size": size, "$badge": badge, "$color": color, children: [src ? (jsxRuntime.jsx(ImgAvatar, { "$size": size, "$badge": badge, src: src, alt: alt })) : icon ? (jsxRuntime.jsx(DivIcon, { "$size": size, "$badge": badge, children: icon })) : (jsxRuntime.jsx(SpanLetter, { "$size": size, "$badge": badge, "$color": color, children: letter?.slice(0, 2) })), isBadgeDot && jsxRuntime.jsx(DivBadge, { "$size": size, "$status": status })] }));
+};
+
+const DicContainerSC = dt.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${getTheme("sem/dimension/gap/xs")};
+  width: fit-content;
+`;
+const DivResizeSC = dt.div `
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  cursor: nwse-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+`;
+const DivIconSC = dt.div `
+  width: ${getTheme("com/button/size-sm/height")};
+  height: ${getTheme("com/button/size-sm/height")};
+  min-width: ${getTheme("com/button/size-sm/height")};
+  max-width: ${getTheme("com/button/size-sm/height")};
+  min-height: ${getTheme("com/button/size-sm/height")};
+  max-height: ${getTheme("com/button/size-sm/height")};
+  border-radius: ${getTheme("com/button/size-xs/corner-radius")};
+  border-width: ${getTheme("com/button/secondary/border/stroke-width/default")};
+  gap: ${getTheme("com/button/size-sm/horizontal-gap")};
+  position: absolute;
+  bottom: ${getTheme("sem/dimension/padding/2xs")};
+  top: ${getTheme("sem/dimension/padding/2xs")};
+  right: ${getTheme("com/input/field/right-padding")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const TextAreaSC = dt.textarea `
+  font-family: inherit;
+  outline: none;
+  border: none;
+  ${getTheme("Paragraph/Sm")};
+  padding-top: ${getTheme("com/input/field/size-md/label/vertical-padding")};
+  padding-right: ${getTheme("com/input/field/size-md/label/horizontal-padding")};
+  padding-bottom: ${getTheme("com/input/field/size-md/label/vertical-padding")};
+  padding-left: ${getTheme("com/input/field/size-md/label/horizontal-padding")};
+  background-color: inherit;
+  resize: none;
+
+  &::placeholder {
+    ${getTheme("Paragraph/Sm")}
+    color: ${getTheme("com/input/field/default/label/color-text/placeholder")};
+  }
+
+  &:focus::placeholder {
+    color: transparent;
+  }
+
+  &.input-area-lg {
+    padding-top: ${getTheme("com/input/field/size-lg/label/vertical-padding")};
+    padding-right: ${getTheme("com/input/field/size-lg/label/horizontal-padding")};
+    padding-bottom: ${getTheme("com/input/field/size-lg/label/vertical-padding")};
+    padding-left: ${getTheme("com/input/field/size-lg/label/horizontal-padding")};
+  }
+
+  &.input-area-icon {
+    margin-right: calc(
+      ${getTheme("com/input/field/size-md/label/horizontal-padding")} +
+        ${getTheme("com/button/size-sm/height")}
+    );
+    //cheat margin để khắc phục giới hạn của variable trên figma không có khả năng thêm toán tử tính toán (yêu cầu từ anh KhoiNQ3)
+  }
+`;
+const DivAreaFieldSC = dt.div `
+  position: relative;
+  display: flex;
+  height: inherit;
+  min-height: ${getTheme("com/input/field/size-md/height")};
+  border: ${getTheme("com/input/field/stroke-width")} solid
+    ${getTheme("com/input/field/default/border/default")};
+  padding-right: ${getTheme("com/input/field/right-padding")};
+  padding-left: ${getTheme("com/input/field/left-padding")};
+  border-radius: ${getTheme("com/input/field/size-md/corner-radius")};
+  background-color: ${getTheme("com/input/field/default/background/default")};
+
+  &.input-area-icon {
+    padding-right: 0;
+  }
+
+  &.negative {
+    border-color: ${getTheme("com/input/field/negative/border/default")};
+    background-color: ${getTheme("com/input/field/negative/background/default")};
+
+    &:hover {
+      border-color: ${getTheme("com/input/field/negative/border/hover")};
+      background-color: ${getTheme("com/input/field/negative/background/hover")};
+    }
+
+    &:focus-within {
+      border-color: ${getTheme("com/input/field/negative/border/active")};
+      background-color: ${getTheme("com/input/field/negative/background/active")};
+      outline: ${getTheme("com/actived-mark/gap-spacing")} solid
+        ${getTheme("com/actived-mark/color-gap-spacing")};
+    }
+
+    &::placeholder {
+      color: ${getTheme("com/input/field/negative/label/color-text/placeholder")};
+    }
+  }
+
+  &:hover {
+    border-color: ${getTheme("com/input/field/default/border/hover")};
+    background-color: ${getTheme("com/input/field/default/background/hover")};
+  }
+
+  &:focus-within {
+    border-color: ${getTheme("com/input/field/default/border/active")};
+    background-color: ${getTheme("com/input/field/default/background/active")};
+    outline: ${getTheme("com/actived-mark/gap-spacing")} solid
+      ${getTheme("com/actived-mark/color-gap-spacing")};
+  }
+
+  &:has(${TextAreaSC}:disabled),
+  &:has(${TextAreaSC}:read-only) {
+    border-color: ${getTheme("com/input/field/disable/stroke-color")};
+    background-color: ${getTheme("com/input/field/disable/background-color")};
+    cursor: not-allowed;
+
+    &::placeholder {
+      color: ${getTheme("com/input/field/disable/label-color")};
+    }
+
+    ${DivIconSC}, ${DivResizeSC} {
+      display: none;
+    }
+  }
+
+  &.input-area-lg {
+    min-height: ${getTheme("com/input/field/size-lg/height")};
+    border-radius: ${getTheme("com/input/field/size-lg/corner-radius")};
+  }
+`;
+const DivCountSC = dt.div `
+  display: flex;
+  justify-content: flex-end;
+  ${getTheme("Subheading/XS")}
+  color: ${getTheme("com/input/character-limit/label/default/color-text")};
+
+  span.negative { {
+    color: ${getTheme("com/input/character-limit/label/over-limit/color-text")};
+  }
+  padding-left: ${getTheme("com/input/character-limit/horizontal-padding")};
+  padding-right: ${getTheme("com/input/character-limit/horizontal-padding")};
+`;
+const SpanHintSC$1 = dt.span `
+  ${getTheme("Paragraph/XS")}
+  color: ${getTheme("com/input/hint/neutral/label/color-text")};
+  padding-top: ${getTheme("com/input/hint/top-padding")};
+
+  &.negative {
+    color: ${getTheme("com/input/hint/negative/label/color-text")};
+  }
+
+  &.positive {
+    color: ${getTheme("com/input/hint/positive/label/color-text")};
+  }
+
+  &.disabled {
+    color: ${getTheme("com/input/hint/disable/label/color-text")};
+  }
+`;
+const DivBottomSC = dt.div `
+  display: flex;
+  justify-content: space-between;
+`;
+dt.div `
+  ${getTheme("Paragraph/XS")};
+  color: ${getTheme("com/input/hint/neutral/label/color-text")};
+`;
+
+const FISTextArea = React.forwardRef((props, ref) => {
+    const { className, required = false, textLabel = "", iconLabel, iconSuffix, placeholder, disabled = false, readOnly = true, negative, message, positive, maxLength = 50, showCount, size = "md", fixedWidth, value, onClickIconLabel, onClickIconSuffix, onChange, onEnter, onBlur, ...rest } = props;
+    const [internalValue, setInternalValue] = React.useState("");
+    const inputRef = React.useRef(null);
+    const handleChange = React.useCallback((event) => {
+        const newValue = event.target.value;
+        if (newValue !== internalValue) {
+            setInternalValue(newValue);
+            onChange?.(newValue);
+        }
+    }, [internalValue, onChange]);
+    const handleKeyPress = React.useCallback((event) => {
+        if (event.key === "Enter") {
+            if (typeof onEnter === "function") {
+                onEnter(event.currentTarget.value);
+            }
+        }
+    }, [onEnter]);
+    const handleBlur = React.useCallback((event) => {
+        const value = event.target.value;
+        if (typeof onBlur === "function") {
+            onBlur(value);
+        }
+    }, [onBlur]);
+    React.useEffect(() => {
+        if (value !== undefined && value !== null) {
+            setInternalValue(value);
+        }
+    }, [value]);
+    React.useImperativeHandle(ref, () => {
+        const inputElement = inputRef.current;
+        return {
+            ...inputElement,
+            focus: () => {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                }
+            },
+            blur: () => {
+                if (inputRef.current) {
+                    inputRef.current.blur();
+                }
+            },
+            clear: () => {
+                if (inputRef.current) {
+                    inputRef.current.value = "";
+                    setInternalValue("");
+                }
+            },
+        };
+    });
+    const handleResize = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const textArea = inputRef.current;
+        if (!textArea)
+            return;
+        const rect = textArea.getBoundingClientRect();
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const startWidth = rect.width;
+        const startHeight = rect.height;
+        const doResize = (event) => {
+            event.preventDefault();
+            const resizeHandle = document.getElementById("resizeHandle");
+            const handleSize = resizeHandle ? resizeHandle.offsetWidth : 10;
+            const themeValue = getTheme("sem/typo/paragraph/line-height/sm");
+            const minHeight = themeValue
+                ? parseInt(themeValue.toString(), 10) || 20
+                : 20;
+            const newWidth = Math.max(startWidth + (event.clientX - startX) - handleSize);
+            const newHeight = Math.max(minHeight, startHeight + (event.clientY - startY) - handleSize);
+            textArea.style.width = `${newWidth}px`;
+            textArea.style.height = `${newHeight}px`;
+            if (resizeHandle) {
+                resizeHandle.style.right = "-2px";
+                resizeHandle.style.bottom = "-2px";
+            }
+        };
+        const stopResize = () => {
+            document.body.style.cursor = "";
+            document.removeEventListener("mousemove", doResize);
+            document.removeEventListener("mouseup", stopResize);
+        };
+        document.addEventListener("mousemove", doResize);
+        document.addEventListener("mouseup", stopResize);
+    };
+    return (jsxRuntime.jsxs(DicContainerSC, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsxs(DivAreaFieldSC, { className: classNames({
+                    "input-area-lg": size === "lg",
+                    "input-area-icon": iconSuffix,
+                    negative,
+                }), style: { width: fixedWidth ? `${fixedWidth}px` : "auto" }, children: [jsxRuntime.jsx(TextAreaSC, { ...rest, value: internalValue, onChange: handleChange, onKeyDown: handleKeyPress, onBlur: handleBlur, ref: inputRef, placeholder: placeholder, disabled: disabled, readOnly: readOnly, className: classNames({
+                            "input-area-lg": size === "lg",
+                            "input-area-icon": iconSuffix,
+                        }) }), iconSuffix && (jsxRuntime.jsx(DivIconSC, { children: jsxRuntime.jsx(FISIconButton, { variant: "tertiary-invisible", size: "sm", icon: iconSuffix, onClick: onClickIconSuffix }) })), jsxRuntime.jsx(DivResizeSC, { id: "resizeHandle", onMouseDown: handleResize, children: jsxRuntime.jsx(ResizeIcon, {}) })] }), jsxRuntime.jsxs(DivBottomSC, { children: [jsxRuntime.jsx(SpanHintSC$1, { className: classNames({
+                            disabled,
+                            negative,
+                            positive,
+                        }), children: message ? message : "" }), jsxRuntime.jsx(DivCountSC, { children: showCount && maxLength > 0 && (jsxRuntime.jsxs("span", { className: classNames("text-area__count", {
+                                negative: internalValue.length > maxLength,
+                            }), children: [internalValue?.replaceAll("\n", "")?.length, "/", maxLength] })) })] })] }));
+});
+FISTextArea.displayName = "FISTextArea";
+
+const InputSC = dt.input `
+  all: unset;
+  text-align: center;
+  caret-color: ${getTheme("com/typing-cursor/default")};
+  ${getTheme("Paragraph/Md")}
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  -moz-appearance: textfield;
+
+  ::placeholder {
+    color: ${getTheme("com/input/field/default/label/color-text/placeholder")};
+  }
+
+  &:disabled,
+  &:read-only {
+    text-align: left;
+    &::placeholder {
+      color: ${getTheme("com/input/field/disable/label-color")};
+    }
+  }
+
+  &.negative {
+    color: ${getTheme("com/input/field/negative/label/color-text/inputed")};
+  }
+`;
+const DivContainerSC = dt.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: fit-content;
+  background-color: ${getTheme("com/input/field/default/background/default")};
+  height: ${getTheme("com/input/field/size-md/height")};
+  min-width: ${getTheme("com/input/field/size-md/number/min-width")};
+  min-height: ${getTheme("com/input/field/size-md/height")};
+  max-height: ${getTheme("com/input/field/size-md/height")};
+  border-radius: ${getTheme("com/input/field/size-md/corner-radius")};
+  border: ${getTheme("com/input/field/stroke-width")} solid
+    ${getTheme("com/input/field/default/border/default")};
+  padding-right: ${getTheme("com/input/field/right-padding")};
+  padding-left: ${getTheme("com/input/field/left-padding")};
+
+  .decrement,
+  .increment {
+    flex-shrink: 0;
+  }
+
+  .disabled-button {
+    display: none;
+  }
+
+  &.input-text-lg {
+    height: ${getTheme("com/input/field/size-lg/height")};
+    min-width: ${getTheme("com/input/field/size-lg/number/min-width")};
+    min-height: ${getTheme("com/input/field/size-lg/height")};
+    max-height: ${getTheme("com/input/field/size-lg/height")};
+    border-radius: ${getTheme("com/input/field/size-lg/corner-radius")};
+  }
+
+  &:hover {
+    border-color: ${getTheme("com/input/field/default/border/hover")};
+    background-color: ${getTheme("com/input/field/default/background/hover")};
+  }
+
+  &:has(${InputSC}:focus) {
+    border-color: ${getTheme("com/input/field/default/border/active")};
+    background-color: ${getTheme("com/input/field/default/background/active")};
+    outline: ${getTheme("com/actived-mark/gap-spacing")} solid
+      ${getTheme("com/actived-mark/color-gap-spacing")};
+  }
+
+  &:has(${InputSC}:disabled),
+  &:has(${InputSC}:read-only) {
+    cursor: not-allowed;
+    border-color: ${getTheme("com/input/field/disable/stroke-color")};
+    background-color: ${getTheme("com/input/field/disable/background-color")};
+  }
+
+  &.negative {
+    border-color: ${getTheme("com/input/field/negative/border/default")};
+    background-color: ${getTheme("com/input/field/negative/background/default")};
+
+    &:hover {
+      border-color: ${getTheme("com/input/field/negative/border/hover")};
+      background-color: ${getTheme("com/input/field/negative/background/hover")};
+    }
+
+    &:has(${InputSC}:focus) {
+      border-color: ${getTheme("com/input/field/negative/border/active")};
+      background-color: ${getTheme("com/input/field/negative/background/active")};
+      outline: ${getTheme("com/actived-mark/gap-spacing")} solid
+        ${getTheme("com/actived-mark/color-gap-spacing")};
+    }
+  }
+`;
+const DivHintSC = dt.div `
+  display: flex;
+  justify-content: space-between;
+`;
+const SpanHintSC = dt.span `
+  ${getTheme("Paragraph/XS")}
+  color: ${getTheme("com/input/hint/neutral/label/color-text")};
+  padding-top: ${getTheme("com/input/hint/top-padding")};
+
+  &.negative {
+    color: ${getTheme("com/input/hint/negative/label/color-text")};
+  }
+
+  &.positive {
+    color: ${getTheme("com/input/hint/positive/label/color-text")};
+  }
+
+  &.disabled {
+    color: ${getTheme("com/input/hint/disable/label/color-text")};
+  }
+`;
+const DivWrapperSC = dt.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${getTheme("com/input/vertical-gap")};
+`;
+
+const FISInputStepper = React.forwardRef((props) => {
+    const { min, max, step = 1, defaultValue, sizeInput = "md", StartIcon, EndIcon, negative, positive, message, iconLabel, textLabel = "", onClickIconLabel, disabled, readOnly, onChange, ...rest } = props;
+    const [count, setCount] = React.useState(defaultValue !== undefined ? defaultValue : undefined);
+    const handleIncrement = () => {
+        setCount((prev) => {
+            const newValue = (prev ?? min ?? 0) + step;
+            return max !== undefined && newValue > max ? max : newValue;
+        });
+    };
+    const handleDecrement = () => {
+        setCount((prev) => {
+            const newValue = (prev ?? min ?? 0) - step;
+            return min !== undefined && newValue < min ? min : newValue;
+        });
+    };
+    const handleChange = (e) => {
+        const newValue = e.target.value
+            ? parseInt(e.target.value, 10)
+            : undefined;
+        if (!isNaN(newValue)) {
+            setCount(newValue);
+            onChange?.(newValue);
+        }
+        else {
+            setCount(undefined);
+        }
+    };
+    return (jsxRuntime.jsxs(DivWrapperSC, { children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: true, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsxs(DivContainerSC, { className: classNames({
+                    negative: negative,
+                    "input-text-lg": sizeInput === "lg",
+                }), children: [jsxRuntime.jsx(FISIconButton, { icon: StartIcon ? StartIcon : jsxRuntime.jsx(DecreIcon, {}), size: sizeInput === "lg" ? "md" : "sm", variant: "tertiary-invisible", onClick: handleDecrement, disabled: min !== undefined && count !== undefined && count <= min, className: classNames("decrement", {
+                            "disabled-button": disabled || readOnly,
+                        }) }), jsxRuntime.jsx(InputSC, { ...rest, disabled: disabled, readOnly: readOnly, type: "number", value: count !== undefined ? count : "", className: classNames({ negative: negative }), onChange: handleChange }), jsxRuntime.jsx(FISIconButton, { icon: EndIcon ? EndIcon : jsxRuntime.jsx(IncreIcon, {}), size: sizeInput === "lg" ? "md" : "sm", variant: "tertiary-invisible", onClick: handleIncrement, disabled: max !== undefined && count !== undefined && count >= max, className: classNames("increment", {
+                            "disabled-button": disabled || readOnly,
+                        }) })] }), jsxRuntime.jsx(DivHintSC, { children: jsxRuntime.jsx(SpanHintSC, { className: classNames({
+                        disabled: disabled,
+                        negative: negative,
+                        positive: positive,
+                    }), children: message ? message : "" }) })] }));
+});
+FISInputStepper.displayName = "FISInputStepper";
+
+exports.FISAvatar = FISAvatar;
+exports.FISBreadcrumb = FISBreadcrumb;
 exports.FISButton = FISButton;
 exports.FISCheckbox = FISCheckbox;
 exports.FISGroupButton = FISGroupButton;
 exports.FISIconButton = FISIconButton;
 exports.FISInputField = FISInputField;
 exports.FISInputLabel = FISInputLabel;
+exports.FISInputStepper = FISInputStepper;
 exports.FISInputText = FISInputText;
 exports.FISLinkButton = FISLinkButton;
 exports.FISRadio = FISRadio;
+exports.FISTextArea = FISTextArea;
 exports.FISThemeProvider = FISThemeProvider;
 //# sourceMappingURL=index.js.map