@rubenpazch/autocomplete 2.0.4 → 3.0.0

package/dist/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../src/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,CACR,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAC7B,MAAM,CAAC,EAAE,kBAAkB,KACxB,IAAI,CAAC;IACV,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,kBAAkB,EAC1B,UAAU,EAAE,OAAO,KAChB,KAAK,CAAC,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC7B;AAgCD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4c7C,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../src/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,CACR,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAC7B,MAAM,CAAC,EAAE,kBAAkB,KACxB,IAAI,CAAC;IACV,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CACb,MAAM,EAAE,kBAAkB,EAC1B,UAAU,EAAE,OAAO,KAChB,KAAK,CAAC,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CAC7B;AA6BD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkc7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/index.cjs.js

@@ -433,7 +433,7 @@ var r,s={exports:{}},o={};var t,n,l={};
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===M?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case x:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case f:return "Suspense";case C:return "SuspenseList";case N:return "Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case u:return "Portal";case j:return e.displayName||"Context";case g:return (e._context.displayName||"Context")+".Consumer";case k:var s=e.render;return (e=e.displayName)||(e=""!==(e=s.displayName||s.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(s=e.displayName||null)?s:r(e.type)||"Memo";case y:s=e._payload,e=e._init;try{return r(e(s))}catch(e){}}return null}function s(e){return ""+e}function o(e){try{s(e);var r=!1;}catch(e){r=true;}if(r){var o=(r=console).error,t="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),s(e)}}function t(e){if(e===x)return "<>";if("object"==typeof e&&null!==e&&e.$$typeof===y)return "<...>";try{var s=r(e);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function n(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return W[e]||(W[e]=true,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function i(e,s,t,n,l,i){var h,m=s.children;if(void 0!==m)if(n)if(z(m)){for(n=0;n<m.length;n++)c(m[n]);Object.freeze&&Object.freeze(m);}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(m);if($.call(s,"key")){m=r(e);var u=Object.keys(s).filter(function(e){return "key"!==e});n=0<u.length?"{key: someKey, "+u.join(": ..., ")+": ...}":"{key: someKey}",_[m+n]||(u=0<u.length?"{"+u.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',n,m,u,m),_[m+n]=true);}if(m=null,void 0!==t&&(o(t),m=""+t),function(e){if($.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return  false}return void 0!==e.key}(s)&&(o(s.key),m=""+s.key),"key"in s)for(var x in t={},s)"key"!==x&&(t[x]=s[x]);else t=s;return m&&function(e,r){function s(){d||(d=true,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r));}s.isReactWarning=true,Object.defineProperty(e,"key",{get:s,configurable:true});}(t,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,s,o,t,n){var l=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==l?l:null)?Object.defineProperty(e,"ref",{enumerable:false,get:a}):Object.defineProperty(e,"ref",{enumerable:false,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:false,enumerable:false,writable:true,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:false,enumerable:false,writable:true,value:null}),Object.defineProperty(e,"_debugStack",{configurable:false,enumerable:false,writable:true,value:t}),Object.defineProperty(e,"_debugTask",{configurable:false,enumerable:false,writable:true,value:n}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,t,null===(h=b.A)?null:h.getOwner(),l,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===y&&("fulfilled"===e._payload.status?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1));}function h(e){return "object"==typeof e&&null!==e&&e.$$typeof===w}var d,m=require$$0,w=Symbol.for("react.transitional.element"),u=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),j=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),C=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),M=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,z=Array.isArray,B=console.createTask?console.createTask:function(){return null},W={},H=(m={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(m,n)(),V=B(t(n)),_={};l.Fragment=x,l.jsx=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,false,o?Error("react-stack-top-frame"):H,o?B(t(e)):V)},l.jsxs=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,true,o?Error("react-stack-top-frame"):H,o?B(t(e)):V)};}()),l}var i=(n||(n=1,"production"===process.env.NODE_ENV?s.exports=function(){if(r)return o;r=1;var e=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function t(r,s,o){var t=null;if(void 0!==o&&(t=""+o),void 0!==s.key&&(t=""+s.key),"key"in s)for(var n in o={},s)"key"!==n&&(o[n]=s[n]);else o=s;return s=o.ref,{$$typeof:e,type:r,key:t,ref:void 0!==s?s:null,props:o}}return o.Fragment=s,o.jsx=t,o.jsxs=t,o}():s.exports=a()),s.exports);function p({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:s,"aria-label":"Check",children:i.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}const f=({className:e="",size:r="md",color:s="currentColor",direction:o="down"})=>i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${{up:"rotate-180",down:"",left:"rotate-90",right:"-rotate-90"}[o]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 9l6 6 6-6"})});function M({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 18L18 6M6 6l12 12"})})}
+ */function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===M?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case u:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case f:return "Suspense";case C:return "SuspenseList";case N:return "Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case x:return "Portal";case j:return e.displayName||"Context";case g:return (e._context.displayName||"Context")+".Consumer";case k:var s=e.render;return (e=e.displayName)||(e=""!==(e=s.displayName||s.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(s=e.displayName||null)?s:r(e.type)||"Memo";case y:s=e._payload,e=e._init;try{return r(e(s))}catch(e){}}return null}function s(e){return ""+e}function o(e){try{s(e);var r=!1;}catch(e){r=true;}if(r){var o=(r=console).error,t="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),s(e)}}function t(e){if(e===u)return "<>";if("object"==typeof e&&null!==e&&e.$$typeof===y)return "<...>";try{var s=r(e);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function n(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return B[e]||(B[e]=true,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function i(e,s,t,n,l,i){var h,m=s.children;if(void 0!==m)if(n)if(z(m)){for(n=0;n<m.length;n++)c(m[n]);Object.freeze&&Object.freeze(m);}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(m);if($.call(s,"key")){m=r(e);var x=Object.keys(s).filter(function(e){return "key"!==e});n=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",_[m+n]||(x=0<x.length?"{"+x.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',n,m,x,m),_[m+n]=true);}if(m=null,void 0!==t&&(o(t),m=""+t),function(e){if($.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return  false}return void 0!==e.key}(s)&&(o(s.key),m=""+s.key),"key"in s)for(var u in t={},s)"key"!==u&&(t[u]=s[u]);else t=s;return m&&function(e,r){function s(){d||(d=true,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r));}s.isReactWarning=true,Object.defineProperty(e,"key",{get:s,configurable:true});}(t,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,s,o,t,n){var l=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==l?l:null)?Object.defineProperty(e,"ref",{enumerable:false,get:a}):Object.defineProperty(e,"ref",{enumerable:false,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:false,enumerable:false,writable:true,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:false,enumerable:false,writable:true,value:null}),Object.defineProperty(e,"_debugStack",{configurable:false,enumerable:false,writable:true,value:t}),Object.defineProperty(e,"_debugTask",{configurable:false,enumerable:false,writable:true,value:n}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,t,null===(h=b.A)?null:h.getOwner(),l,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===y&&("fulfilled"===e._payload.status?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1));}function h(e){return "object"==typeof e&&null!==e&&e.$$typeof===w}var d,m=require$$0,w=Symbol.for("react.transitional.element"),x=Symbol.for("react.portal"),u=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),j=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),C=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),M=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,z=Array.isArray,H=console.createTask?console.createTask:function(){return null},B={},W=(m={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(m,n)(),V=H(t(n)),_={};l.Fragment=u,l.jsx=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,false,o?Error("react-stack-top-frame"):W,o?H(t(e)):V)},l.jsxs=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,true,o?Error("react-stack-top-frame"):W,o?H(t(e)):V)};}()),l}var i=(n||(n=1,"production"===process.env.NODE_ENV?s.exports=function(){if(r)return o;r=1;var e=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function t(r,s,o){var t=null;if(void 0!==o&&(t=""+o),void 0!==s.key&&(t=""+s.key),"key"in s)for(var n in o={},s)"key"!==n&&(o[n]=s[n]);else o=s;return s=o.ref,{$$typeof:e,type:r,key:t,ref:void 0!==s?s:null,props:o}}return o.Fragment=s,o.jsx=t,o.jsxs=t,o}():s.exports=a()),s.exports);function p({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:s,"aria-label":"Check",children:i.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}const f=({className:e="",size:r="md",color:s="currentColor",direction:o="down"})=>i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${{up:"rotate-180",down:"",left:"rotate-90",right:"-rotate-90"}[o]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 9l6 6 6-6"})});function M({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 18L18 6M6 6l12 12"})})}
 
 var jsxRuntime = {exports: {}};
 
@@ -857,6 +857,40 @@ function requireJsxRuntime () {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
+function styleInject$1(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = "/* Container */\n.LoadingSpinner-module_container__PHl1j {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.LoadingSpinner-module_containerInline__eD4FZ {\n  display: inline-flex;\n}\n\n/* Inner wrapper */\n.LoadingSpinner-module_inner__SvATp {\n  text-align: center;\n}\n\n.LoadingSpinner-module_innerInline__MPS3Y {\n  display: inline-flex;\n}\n\n/* Spinner base */\n.LoadingSpinner-module_spinner__vu6Ri {\n  border-radius: 9999px;\n  border-width: 2px;\n  animation: LoadingSpinner-module_spin__vEieX 1s linear infinite;\n}\n\n/* Sizes */\n.LoadingSpinner-module_sizeSm__tL-IR {\n  height: 1rem;\n  width: 1rem;\n}\n\n.LoadingSpinner-module_sizeMd__AT592 {\n  height: 2rem;\n  width: 2rem;\n}\n\n.LoadingSpinner-module_sizeLg__jyX27 {\n  height: 3rem;\n  width: 3rem;\n}\n\n/* Colors - spinner */\n.LoadingSpinner-module_colorBlue__Jtuu1 {\n  border-color: #2563eb;\n}\n\n.LoadingSpinner-module_colorGray__-EMqs {\n  border-color: #4b5563;\n}\n\n.LoadingSpinner-module_colorWhite__95Hoo {\n  border-color: #ffffff;\n}\n\n/* Spinner transparent borders */\n.LoadingSpinner-module_spinnerTransparent__G3zcb {\n  border-top-color: transparent;\n  border-right-color: transparent;\n}\n\n/* Spacing */\n.LoadingSpinner-module_spacingDefault__8At6H {\n  margin: 0 auto 1rem auto;\n}\n\n/* Dots container */\n.LoadingSpinner-module_dotsContainer__l3FsV {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.LoadingSpinner-module_dotsContainerInline__Kl4Fz {\n  display: flex;\n  gap: 0.25rem;\n}\n\n/* Dot sizes */\n.LoadingSpinner-module_dotSizeSm__YuBra {\n  height: 0.375rem;\n  width: 0.375rem;\n}\n\n.LoadingSpinner-module_dotSizeMd__rXeyS {\n  height: 0.625rem;\n  width: 0.625rem;\n}\n\n.LoadingSpinner-module_dotSizeLg__M8etz {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n\n/* Dot colors */\n.LoadingSpinner-module_dotColorBlue__5evmc {\n  background-color: #2563eb;\n}\n\n.LoadingSpinner-module_dotColorGray__dr80J {\n  background-color: #4b5563;\n}\n\n.LoadingSpinner-module_dotColorWhite__54ur- {\n  background-color: #ffffff;\n}\n\n/* Dot */\n.LoadingSpinner-module_dot__tz0lA {\n  border-radius: 9999px;\n  animation: LoadingSpinner-module_bounce__7Raih 1s ease-in-out infinite;\n}\n\n.LoadingSpinner-module_dotDelay1__-94Os {\n  animation-delay: 0ms;\n}\n\n.LoadingSpinner-module_dotDelay2__Oy8E- {\n  animation-delay: 150ms;\n}\n\n.LoadingSpinner-module_dotDelay3__7EZYH {\n  animation-delay: 300ms;\n}\n\n/* Pulse */\n.LoadingSpinner-module_pulse__gKUHJ {\n  border-radius: 9999px;\n  animation: LoadingSpinner-module_pulse__gKUHJ 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Ring */\n.LoadingSpinner-module_ringContainer__4p8NG {\n  position: relative;\n}\n\n.LoadingSpinner-module_ringBackground__aF2w1 {\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  border-width: 2px;\n  opacity: 0.25;\n}\n\n.LoadingSpinner-module_ringSpinner__b92-S {\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  border-width: 2px;\n  border-color: transparent;\n  animation: LoadingSpinner-module_spin__vEieX 1s linear infinite;\n}\n\n.LoadingSpinner-module_ringSpinnerBlue__zGTgw {\n  border-top-color: #2563eb;\n}\n\n.LoadingSpinner-module_ringSpinnerGray__kHnkJ {\n  border-top-color: #4b5563;\n}\n\n.LoadingSpinner-module_ringSpinnerWhite__yu8d0 {\n  border-top-color: #ffffff;\n}\n\n.LoadingSpinner-module_ringTransparent__DTSbu {\n  border-right-color: transparent;\n  border-bottom-color: transparent;\n  border-left-color: transparent;\n}\n\n/* Message */\n.LoadingSpinner-module_message__FoOvh {\n  color: #4b5563;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  margin-top: 0.5rem;\n}\n\n/* Animations */\n@keyframes LoadingSpinner-module_spin__vEieX {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes LoadingSpinner-module_bounce__7Raih {\n  0%,\n  100% {\n    transform: translateY(0);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n  50% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n}\n\n@keyframes LoadingSpinner-module_pulse__gKUHJ {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n";
+var styles$1 = {"container":"LoadingSpinner-module_container__PHl1j","containerInline":"LoadingSpinner-module_containerInline__eD4FZ","inner":"LoadingSpinner-module_inner__SvATp","innerInline":"LoadingSpinner-module_innerInline__MPS3Y","spinner":"LoadingSpinner-module_spinner__vu6Ri","spin":"LoadingSpinner-module_spin__vEieX","sizeSm":"LoadingSpinner-module_sizeSm__tL-IR","sizeMd":"LoadingSpinner-module_sizeMd__AT592","sizeLg":"LoadingSpinner-module_sizeLg__jyX27","colorBlue":"LoadingSpinner-module_colorBlue__Jtuu1","colorGray":"LoadingSpinner-module_colorGray__-EMqs","colorWhite":"LoadingSpinner-module_colorWhite__95Hoo","spinnerTransparent":"LoadingSpinner-module_spinnerTransparent__G3zcb","spacingDefault":"LoadingSpinner-module_spacingDefault__8At6H","dotsContainer":"LoadingSpinner-module_dotsContainer__l3FsV","dotsContainerInline":"LoadingSpinner-module_dotsContainerInline__Kl4Fz","dotSizeSm":"LoadingSpinner-module_dotSizeSm__YuBra","dotSizeMd":"LoadingSpinner-module_dotSizeMd__rXeyS","dotSizeLg":"LoadingSpinner-module_dotSizeLg__M8etz","dotColorBlue":"LoadingSpinner-module_dotColorBlue__5evmc","dotColorGray":"LoadingSpinner-module_dotColorGray__dr80J","dotColorWhite":"LoadingSpinner-module_dotColorWhite__54ur-","dot":"LoadingSpinner-module_dot__tz0lA","bounce":"LoadingSpinner-module_bounce__7Raih","dotDelay1":"LoadingSpinner-module_dotDelay1__-94Os","dotDelay2":"LoadingSpinner-module_dotDelay2__Oy8E-","dotDelay3":"LoadingSpinner-module_dotDelay3__7EZYH","pulse":"LoadingSpinner-module_pulse__gKUHJ","ringContainer":"LoadingSpinner-module_ringContainer__4p8NG","ringBackground":"LoadingSpinner-module_ringBackground__aF2w1","ringSpinner":"LoadingSpinner-module_ringSpinner__b92-S","ringSpinnerBlue":"LoadingSpinner-module_ringSpinnerBlue__zGTgw","ringSpinnerGray":"LoadingSpinner-module_ringSpinnerGray__kHnkJ","ringSpinnerWhite":"LoadingSpinner-module_ringSpinnerWhite__yu8d0","ringTransparent":"LoadingSpinner-module_ringTransparent__DTSbu","message":"LoadingSpinner-module_message__FoOvh"};
+styleInject$1(css_248z$1);
+
+function classNames$1(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
 /**
  * LoadingSpinner component
  * Displays a loading indicator with multiple style variants
@@ -866,65 +900,69 @@ var jsxRuntimeExports = requireJsxRuntime();
  * @param color - Color scheme: 'blue' (default), 'gray', 'white'
  */
 const LoadingSpinner = ({ message, size = "md", className = "", variant = "spinner", inline = false, color = "blue", }) => {
-    const sizeClasses = {
-        sm: "h-4 w-4",
-        md: "h-8 w-8",
-        lg: "h-12 w-12",
-    };
-    const colorClasses = {
-        blue: "border-blue-600",
-        gray: "border-gray-600",
-        white: "border-white",
-    };
-    const dotColorClasses = {
-        blue: "bg-blue-600",
-        gray: "bg-gray-600",
-        white: "bg-white",
-    };
-    const dotSizeClasses = {
-        sm: "h-1.5 w-1.5",
-        md: "h-2.5 w-2.5",
-        lg: "h-3.5 w-3.5",
-    };
+    const sizeClass = styles$1[`size${size.charAt(0).toUpperCase() + size.slice(1)}`];
+    const colorClass = styles$1[`color${color.charAt(0).toUpperCase() + color.slice(1)}`];
+    const dotColorClass = styles$1[`dotColor${color.charAt(0).toUpperCase() + color.slice(1)}`];
+    const dotSizeClass = styles$1[`dotSize${size.charAt(0).toUpperCase() + size.slice(1)}`];
     // Spinner variant (circular border)
     if (variant === "spinner") {
-        return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsx("div", { className: `animate-spin rounded-full border-2 ${colorClasses[color]} ${sizeClasses[size]} ${inline ? "" : "mx-auto mb-4"}`, style: {
-                            borderTopColor: "transparent",
-                            borderRightColor: "transparent",
-                        } }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
+        return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.spinner, styles$1.spinnerTransparent, colorClass, sizeClass, !inline ? styles$1.spacingDefault : undefined) }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
     }
     // Dots variant (three bouncing dots)
     if (variant === "dots") {
-        return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "flex gap-1" : "text-center", children: [jsxRuntimeExports.jsxs("div", { className: `flex gap-1 ${inline ? "" : "mx-auto mb-4"}`, children: [jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "0ms" } }), jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "150ms" } }), jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "300ms" } })] }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
+        return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsxs("div", { className: classNames$1(inline ? styles$1.dotsContainerInline : styles$1.dotsContainer, !inline ? styles$1.spacingDefault : undefined), children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.dot, dotSizeClass, dotColorClass, styles$1.dotDelay1) }), jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.dot, dotSizeClass, dotColorClass, styles$1.dotDelay2) }), jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.dot, dotSizeClass, dotColorClass, styles$1.dotDelay3) })] }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
     }
     // Pulse variant (pulsing circle)
     if (variant === "pulse") {
-        return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsx("div", { className: `${sizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-pulse ${inline ? "" : "mx-auto mb-4"}` }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
+        return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.pulse, sizeClass, dotColorClass, !inline ? styles$1.spacingDefault : undefined) }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
     }
     // Ring variant (rotating ring with gradient)
     if (variant === "ring") {
-        const ringColorMap = {
-            blue: "border-blue-600",
-            gray: "border-gray-600",
-            white: "border-white",
-        };
-        return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsxs("div", { className: `relative ${sizeClasses[size]} ${inline ? "" : "mx-auto mb-4"}`, children: [jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 ${colorClasses[color]} opacity-25` }), jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 border-transparent ${ringColorMap[color]} animate-spin`, style: {
-                                    borderTopColor: "currentColor",
-                                    borderRightColor: "transparent",
-                                    borderBottomColor: "transparent",
-                                    borderLeftColor: "transparent",
-                                } })] }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
+        const ringSpinnerColorClass = styles$1[`ringSpinner${color.charAt(0).toUpperCase() + color.slice(1)}`];
+        return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsxs("div", { className: classNames$1(styles$1.ringContainer, sizeClass, !inline ? styles$1.spacingDefault : undefined), children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.ringBackground, colorClass) }), jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.ringSpinner, styles$1.ringTransparent, ringSpinnerColorClass) })] }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
     }
     return null;
 };
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".Autocomplete-module_container__Qc33j {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.Autocomplete-module_label__-7YPH {\n  display: block;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 500;\n  color: #374151;\n}\n\n.Autocomplete-module_required__N3ZwR {\n  color: #ef4444;\n  margin-left: 0.25rem;\n}\n\n.Autocomplete-module_inputWrapper__NS450 {\n  position: relative;\n}\n\n.Autocomplete-module_iconLeft__gee-m {\n  position: absolute;\n  left: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #9ca3af;\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n}\n\n.Autocomplete-module_input__ZShCt {\n  width: 100%;\n  padding: 0.5rem 1rem;\n  border-radius: 0.5rem;\n  border: 2px solid #d1d5db;\n  transition:\n    border-color 150ms ease,\n    box-shadow 150ms ease;\n  outline: none;\n  font-weight: 500;\n  color: #111827;\n}\n\n.Autocomplete-module_input__ZShCt::placeholder {\n  color: #9ca3af;\n}\n\n.Autocomplete-module_input__ZShCt:disabled {\n  background: #f3f4f6;\n  color: #6b7280;\n  cursor: not-allowed;\n}\n\n.Autocomplete-module_input__ZShCt:hover:not(:disabled):not(:focus) {\n  border-color: #9ca3af;\n}\n\n.Autocomplete-module_input__ZShCt:focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.Autocomplete-module_inputWithIcon__-qV4P {\n  padding-left: 2.5rem;\n}\n\n.Autocomplete-module_inputWithClear__a8C83 {\n  padding-right: 5rem;\n}\n\n.Autocomplete-module_inputWithoutClear__LN8yW {\n  padding-right: 3rem;\n}\n\n.Autocomplete-module_inputReadOnly__dG7ZO {\n  background: #f9fafb;\n  cursor: default;\n}\n\n.Autocomplete-module_inputError__Kdk14 {\n  border-color: #ef4444;\n}\n\n.Autocomplete-module_inputError__Kdk14:focus {\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n.Autocomplete-module_inputWarning__XTQux {\n  border-color: #eab308;\n}\n\n.Autocomplete-module_inputWarning__XTQux:focus {\n  border-color: #eab308;\n  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);\n}\n\n.Autocomplete-module_inputFocused__1zKVR {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.Autocomplete-module_rightIcons__ygVzq {\n  position: absolute;\n  right: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.Autocomplete-module_clearButton__tVaO9 {\n  color: #9ca3af;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition: color 150ms ease;\n}\n\n.Autocomplete-module_clearButton__tVaO9:hover {\n  color: #4b5563;\n}\n\n.Autocomplete-module_toggleButton__nxFFh {\n  color: #9ca3af;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition: color 150ms ease;\n}\n\n.Autocomplete-module_toggleButton__nxFFh:hover:not(:disabled) {\n  color: #4b5563;\n}\n\n.Autocomplete-module_toggleButton__nxFFh:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.Autocomplete-module_toggleIcon__fD90b {\n  width: 1.25rem;\n  height: 1.25rem;\n  transition: transform 200ms ease;\n}\n\n.Autocomplete-module_toggleIconOpen__aFQVZ {\n  transform: rotate(180deg);\n}\n\n.Autocomplete-module_dropdown__oT12R {\n  position: absolute;\n  z-index: 50;\n  left: 0;\n  right: 0;\n  margin-top: 0.25rem;\n  background: #ffffff;\n  border: 2px solid #e5e7eb;\n  border-radius: 0.5rem;\n  box-shadow:\n    0 10px 15px -3px rgba(0, 0, 0, 0.1),\n    0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n}\n\n.Autocomplete-module_dropdownTop__yN9gw {\n  bottom: 100%;\n  top: auto;\n  margin-top: 0;\n  margin-bottom: 0.25rem;\n}\n\n.Autocomplete-module_dropdownContent__0RNSN {\n  overflow-y: auto;\n  max-height: 100%;\n}\n\n.Autocomplete-module_loadingState__HQ2Vq {\n  padding: 0.75rem 1rem;\n  text-align: center;\n  color: #6b7280;\n}\n\n.Autocomplete-module_loadingSpinner__9qSHW {\n  margin: 0 auto;\n}\n\n.Autocomplete-module_loadingText__6g6Qb {\n  display: block;\n  margin-top: 0.5rem;\n  font-size: 0.875rem;\n}\n\n.Autocomplete-module_option__O2-MC {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  transition: background-color 150ms ease;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.Autocomplete-module_option__O2-MC:hover:not(.Autocomplete-module_optionDisabled__kkjS2) {\n  background: #f9fafb;\n}\n\n.Autocomplete-module_optionDisabled__kkjS2 {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background: #f9fafb;\n}\n\n.Autocomplete-module_optionHighlighted__WpIwj:not(.Autocomplete-module_optionDisabled__kkjS2) {\n  background: #eff6ff;\n}\n\n.Autocomplete-module_optionSelected__CeDeN:not(.Autocomplete-module_optionDisabled__kkjS2) {\n  background: #dbeafe;\n}\n\n.Autocomplete-module_optionContent__TzYTm {\n  flex: 1;\n}\n\n.Autocomplete-module_optionLabel__5FOIH {\n  font-weight: 500;\n  color: #111827;\n}\n\n.Autocomplete-module_optionDescription__0HEsl {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: #6b7280;\n  margin-top: 0.125rem;\n}\n\n.Autocomplete-module_optionCheckIcon__MEavu {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: #3b82f6;\n  flex-shrink: 0;\n}\n\n.Autocomplete-module_highlight__MW3bw {\n  background: #fef08a;\n  font-weight: 600;\n  color: #111827;\n}\n\n.Autocomplete-module_createOption__xIHDz {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  transition: background-color 150ms ease;\n}\n\n.Autocomplete-module_createOption__xIHDz:hover {\n  background: #f9fafb;\n}\n\n.Autocomplete-module_createOptionWithBorder__BX0mv {\n  border-top: 1px solid #e5e7eb;\n}\n\n.Autocomplete-module_createOptionHighlighted__-3e6V {\n  background: #eff6ff;\n}\n\n.Autocomplete-module_createIcon__wh5Nu {\n  color: #3b82f6;\n  font-weight: 500;\n}\n\n.Autocomplete-module_createText__V9uqQ {\n  color: #111827;\n}\n\n.Autocomplete-module_noResults__rAoto {\n  padding: 0.75rem 1rem;\n  text-align: center;\n  color: #6b7280;\n  font-size: 0.875rem;\n}\n\n.Autocomplete-module_hint__E-DXp {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: #6b7280;\n}\n\n.Autocomplete-module_warning__6-JRr {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: #ca8a04;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.Autocomplete-module_warningIcon__gEaAt {\n  width: 1rem;\n  height: 1rem;\n}\n\n.Autocomplete-module_error__XLtyW {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: #dc2626;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.Autocomplete-module_errorIcon__Ftizo {\n  width: 1rem;\n  height: 1rem;\n}\n";
+var styles = {"container":"Autocomplete-module_container__Qc33j","label":"Autocomplete-module_label__-7YPH","required":"Autocomplete-module_required__N3ZwR","inputWrapper":"Autocomplete-module_inputWrapper__NS450","iconLeft":"Autocomplete-module_iconLeft__gee-m","input":"Autocomplete-module_input__ZShCt","inputWithIcon":"Autocomplete-module_inputWithIcon__-qV4P","inputWithClear":"Autocomplete-module_inputWithClear__a8C83","inputWithoutClear":"Autocomplete-module_inputWithoutClear__LN8yW","inputReadOnly":"Autocomplete-module_inputReadOnly__dG7ZO","inputError":"Autocomplete-module_inputError__Kdk14","inputWarning":"Autocomplete-module_inputWarning__XTQux","inputFocused":"Autocomplete-module_inputFocused__1zKVR","rightIcons":"Autocomplete-module_rightIcons__ygVzq","clearButton":"Autocomplete-module_clearButton__tVaO9","toggleButton":"Autocomplete-module_toggleButton__nxFFh","toggleIcon":"Autocomplete-module_toggleIcon__fD90b","toggleIconOpen":"Autocomplete-module_toggleIconOpen__aFQVZ","dropdown":"Autocomplete-module_dropdown__oT12R","dropdownTop":"Autocomplete-module_dropdownTop__yN9gw","dropdownContent":"Autocomplete-module_dropdownContent__0RNSN","loadingState":"Autocomplete-module_loadingState__HQ2Vq","loadingSpinner":"Autocomplete-module_loadingSpinner__9qSHW","loadingText":"Autocomplete-module_loadingText__6g6Qb","option":"Autocomplete-module_option__O2-MC","optionDisabled":"Autocomplete-module_optionDisabled__kkjS2","optionHighlighted":"Autocomplete-module_optionHighlighted__WpIwj","optionSelected":"Autocomplete-module_optionSelected__CeDeN","optionContent":"Autocomplete-module_optionContent__TzYTm","optionLabel":"Autocomplete-module_optionLabel__5FOIH","optionDescription":"Autocomplete-module_optionDescription__0HEsl","optionCheckIcon":"Autocomplete-module_optionCheckIcon__MEavu","highlight":"Autocomplete-module_highlight__MW3bw","createOption":"Autocomplete-module_createOption__xIHDz","createOptionWithBorder":"Autocomplete-module_createOptionWithBorder__BX0mv","createOptionHighlighted":"Autocomplete-module_createOptionHighlighted__-3e6V","createIcon":"Autocomplete-module_createIcon__wh5Nu","createText":"Autocomplete-module_createText__V9uqQ","noResults":"Autocomplete-module_noResults__rAoto","hint":"Autocomplete-module_hint__E-DXp","warning":"Autocomplete-module_warning__6-JRr","warningIcon":"Autocomplete-module_warningIcon__gEaAt","error":"Autocomplete-module_error__XLtyW","errorIcon":"Autocomplete-module_errorIcon__Ftizo"};
+styleInject(css_248z);
+
+const classNames = (...classes) => classes.filter(Boolean).join(" ");
 // Helper function to highlight matching text
 const highlightMatchText = (text, search, shouldHighlight = true) => {
     if (!shouldHighlight || !search || !text)
         return text;
     const regex = new RegExp(`(${search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
     const parts = text.split(regex);
-    return (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: parts.map((part, index) => regex.test(part) ? (jsxRuntimeExports$1.jsx("mark", { className: "bg-yellow-200 font-semibold text-gray-900", children: part }, index)) : (jsxRuntimeExports$1.jsx("span", { children: part }, index))) }));
+    return (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: parts.map((part, index) => regex.test(part) ? (jsxRuntimeExports$1.jsx("mark", { className: styles.highlight, children: part }, index)) : (jsxRuntimeExports$1.jsx("span", { children: part }, index))) }));
 };
 const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Search or select...", error, warning, hint, required = false, disabled = false, loading = false, searchable = true, clearable = true, icon, className = "", maxHeight = "300px", onCreate, onSearch, readOnly = false, renderOption, onBlur, onFocus, createLabel = "Create", noResultsText = "No results found", loadingText = "Loading...", highlightMatch = true, minSearchLength = 0, debounceMs = 300, keepListOpen = false, position = "bottom", }) => {
     const [isOpen, setIsOpen] = require$$0.useState(false);
@@ -1086,56 +1124,21 @@ const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Sea
                 break;
         }
     };
-    const getBorderColor = () => {
-        if (error) {
-            return "border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-200";
-        }
-        if (warning) {
-            return "border-yellow-500 focus:border-yellow-500 focus:ring-2 focus:ring-yellow-200";
-        }
-        if (isFocused) {
-            return "border-blue-500 focus:ring-2 focus:ring-blue-200";
-        }
-        return "border-gray-300 hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-200";
+    const getInputClassName = () => {
+        return classNames(styles.input, icon ? styles.inputWithIcon : undefined, clearable && value ? styles.inputWithClear : styles.inputWithoutClear, readOnly ? styles.inputReadOnly : undefined, error ? styles.inputError : undefined, warning && !error ? styles.inputWarning : undefined, isFocused && !error && !warning ? styles.inputFocused : undefined);
     };
-    return (jsxRuntimeExports$1.jsxs("div", { className: `flex flex-col gap-2 ${className}`, children: [label && (jsxRuntimeExports$1.jsxs("label", { className: "block text-sm font-medium text-gray-700", children: [label, required && jsxRuntimeExports$1.jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), jsxRuntimeExports$1.jsxs("div", { ref: containerRef, className: "relative", children: [icon && (jsxRuntimeExports$1.jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none flex items-center", children: icon })), jsxRuntimeExports$1.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly || !searchable, className: `
-            w-full px-4 py-2 rounded-lg border-2 transition-all outline-none
-            font-medium text-gray-900 placeholder-gray-400
-            disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed
-            ${icon ? "pl-10" : ""}
-            ${clearable && value ? "pr-20" : "pr-12"}
-            ${getBorderColor()}
-            ${readOnly ? "bg-gray-50 cursor-default" : ""}
-          `, "data-testid": "autocomplete-input" }), jsxRuntimeExports$1.jsxs("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2", children: [loading && jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "dots", inline: true }), clearable && value && !loading && !disabled && (jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleClear, className: "text-gray-400 hover:text-gray-600 transition-colors", "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(M, { className: "w-4 h-4" }) })), jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleToggle, className: `text-gray-400 transition-all ${disabled || readOnly
-                                    ? "cursor-not-allowed opacity-50"
-                                    : "hover:text-gray-600"}`, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(f, { className: `w-5 h-5 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` }) })] }), isOpen && !disabled && !readOnly && (jsxRuntimeExports$1.jsxs("div", { ref: dropdownRef, className: `
-              absolute z-50 left-0 right-0 mt-1
-              bg-white border-2 border-gray-200 rounded-lg shadow-lg
-              overflow-hidden
-              ${position === "top" ? "bottom-full mb-1" : "top-full"}
-            `, style: { maxHeight }, "data-testid": "autocomplete-dropdown", children: [loading && filteredOptions.length === 0 && (jsxRuntimeExports$1.jsxs("div", { className: "px-4 py-3 text-center text-gray-500", children: [jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "spinner", className: "mx-auto" }), jsxRuntimeExports$1.jsx("span", { className: "block mt-2 text-sm", children: loadingText })] })), jsxRuntimeExports$1.jsx("div", { className: "overflow-y-auto max-h-full", children: !loading && filteredOptions.length > 0 && (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: filteredOptions.map((option, index) => {
+    return (jsxRuntimeExports$1.jsxs("div", { className: classNames(styles.container, className), children: [label && (jsxRuntimeExports$1.jsxs("label", { className: styles.label, children: [label, required && jsxRuntimeExports$1.jsx("span", { className: styles.required, children: "*" })] })), jsxRuntimeExports$1.jsxs("div", { ref: containerRef, className: styles.inputWrapper, children: [icon && jsxRuntimeExports$1.jsx("div", { className: styles.iconLeft, children: icon }), jsxRuntimeExports$1.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly || !searchable, className: getInputClassName(), "data-testid": "autocomplete-input", "data-has-error": error ? "true" : "false", "data-has-warning": warning ? "true" : "false", "data-is-focused": isFocused ? "true" : "false" }), jsxRuntimeExports$1.jsxs("div", { className: styles.rightIcons, children: [loading && jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "dots", inline: true }), clearable && value && !loading && !disabled && (jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleClear, className: styles.clearButton, "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(M, { className: "w-4 h-4" }) })), jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleToggle, className: styles.toggleButton, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(f, { className: classNames(styles.toggleIcon, isOpen && styles.toggleIconOpen) }) })] }), isOpen && !disabled && !readOnly && (jsxRuntimeExports$1.jsxs("div", { ref: dropdownRef, className: classNames(styles.dropdown, position === "top" && styles.dropdownTop), style: { maxHeight }, "data-testid": "autocomplete-dropdown", children: [loading && filteredOptions.length === 0 && (jsxRuntimeExports$1.jsxs("div", { className: styles.loadingState, children: [jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "spinner", className: styles.loadingSpinner }), jsxRuntimeExports$1.jsx("span", { className: styles.loadingText, children: loadingText })] })), jsxRuntimeExports$1.jsx("div", { className: styles.dropdownContent, children: !loading && filteredOptions.length > 0 && (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: filteredOptions.map((option, index) => {
                                         const isSelected = option.value === value;
                                         const isHighlighted = index === highlightedIndex;
                                         return (jsxRuntimeExports$1.jsx("div", { ref: (el) => {
                                                 optionRefs.current[index] = el;
-                                            }, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), className: `
-                        px-4 py-3 cursor-pointer transition-colors flex items-center justify-between
-                        ${option.disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : ""}
-                        ${isHighlighted && !option.disabled ? "bg-blue-50" : ""}
-                        ${isSelected && !option.disabled ? "bg-blue-100" : ""}
-                        ${!isHighlighted && !isSelected && !option.disabled ? "hover:bg-gray-50" : ""}
-                      `, "data-testid": `autocomplete-option-${option.value}`, children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: "flex-1", children: [jsxRuntimeExports$1.jsx("div", { className: "font-medium text-gray-900", children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(p, { className: "w-5 h-5 text-blue-600 flex-shrink-0" }))] })) }, option.value));
+                                            }, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), className: classNames(styles.option, option.disabled && styles.optionDisabled, isHighlighted && styles.optionHighlighted, isSelected && styles.optionSelected), "data-testid": `autocomplete-option-${option.value}`, "data-disabled": option.disabled ? "true" : "false", "data-selected": isSelected ? "true" : "false", "data-highlighted": isHighlighted ? "true" : "false", children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: styles.optionContent, children: [jsxRuntimeExports$1.jsx("div", { className: styles.optionLabel, children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: styles.optionDescription, children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(p, { className: styles.optionCheckIcon }))] })) }, option.value));
                                     }) })) }), onCreate && searchTerm && (jsxRuntimeExports$1.jsxs("div", { onClick: () => {
                                     onCreate(searchTerm.trim());
                                     setIsOpen(false);
                                     setSearchTerm("");
-                                }, className: `
-                  px-4 py-3 cursor-pointer
-                  flex items-center gap-2
-                  ${filteredOptions.length > 0 ? "border-t border-gray-200" : ""}
-                  transition-colors
-                  ${highlightedIndex === filteredOptions.length ? "bg-blue-50" : "hover:bg-gray-50"}
-                `, "data-testid": "autocomplete-create", children: [jsxRuntimeExports$1.jsx("span", { className: "text-blue-600 font-medium", children: "+" }), jsxRuntimeExports$1.jsxs("span", { className: "text-gray-900", children: [createLabel, " \"", searchTerm, "\""] })] })), !loading && filteredOptions.length === 0 && !onCreate && (jsxRuntimeExports$1.jsx("div", { className: "px-4 py-3 text-center text-gray-500 text-sm", children: noResultsText }))] }))] }), hint && !error && !warning && (jsxRuntimeExports$1.jsx("p", { className: "text-xs text-gray-500", children: hint })), warning && !error && (jsxRuntimeExports$1.jsxs("p", { className: "text-xs text-yellow-600 flex items-center gap-1", children: [jsxRuntimeExports$1.jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), warning] })), error && (jsxRuntimeExports$1.jsxs("p", { className: "text-xs text-red-600 flex items-center gap-1", children: [jsxRuntimeExports$1.jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }), error] }))] }));
+                                }, className: classNames(styles.createOption, filteredOptions.length > 0 && styles.createOptionWithBorder, highlightedIndex === filteredOptions.length &&
+                                    styles.createOptionHighlighted), "data-testid": "autocomplete-create", children: [jsxRuntimeExports$1.jsx("span", { className: styles.createIcon, children: "+" }), jsxRuntimeExports$1.jsxs("span", { className: styles.createText, children: [createLabel, " \"", searchTerm, "\""] })] })), !loading && filteredOptions.length === 0 && !onCreate && (jsxRuntimeExports$1.jsx("div", { className: styles.noResults, children: noResultsText }))] }))] }), hint && !error && !warning && jsxRuntimeExports$1.jsx("p", { className: styles.hint, children: hint }), warning && !error && (jsxRuntimeExports$1.jsxs("p", { className: styles.warning, children: [jsxRuntimeExports$1.jsx("svg", { className: styles.warningIcon, fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), warning] })), error && (jsxRuntimeExports$1.jsxs("p", { className: styles.error, children: [jsxRuntimeExports$1.jsx("svg", { className: styles.errorIcon, fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }), error] }))] }));
 };
 
 module.exports = Autocomplete;

package/dist/index.esm.js

@@ -431,7 +431,7 @@ var r,s={exports:{}},o={};var t,n,l={};
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===M?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case x:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case f:return "Suspense";case C:return "SuspenseList";case N:return "Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case u:return "Portal";case j:return e.displayName||"Context";case g:return (e._context.displayName||"Context")+".Consumer";case k:var s=e.render;return (e=e.displayName)||(e=""!==(e=s.displayName||s.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(s=e.displayName||null)?s:r(e.type)||"Memo";case y:s=e._payload,e=e._init;try{return r(e(s))}catch(e){}}return null}function s(e){return ""+e}function o(e){try{s(e);var r=!1;}catch(e){r=true;}if(r){var o=(r=console).error,t="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),s(e)}}function t(e){if(e===x)return "<>";if("object"==typeof e&&null!==e&&e.$$typeof===y)return "<...>";try{var s=r(e);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function n(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return W[e]||(W[e]=true,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function i(e,s,t,n,l,i){var h,m=s.children;if(void 0!==m)if(n)if(z(m)){for(n=0;n<m.length;n++)c(m[n]);Object.freeze&&Object.freeze(m);}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(m);if($.call(s,"key")){m=r(e);var u=Object.keys(s).filter(function(e){return "key"!==e});n=0<u.length?"{key: someKey, "+u.join(": ..., ")+": ...}":"{key: someKey}",_[m+n]||(u=0<u.length?"{"+u.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',n,m,u,m),_[m+n]=true);}if(m=null,void 0!==t&&(o(t),m=""+t),function(e){if($.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return  false}return void 0!==e.key}(s)&&(o(s.key),m=""+s.key),"key"in s)for(var x in t={},s)"key"!==x&&(t[x]=s[x]);else t=s;return m&&function(e,r){function s(){d||(d=true,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r));}s.isReactWarning=true,Object.defineProperty(e,"key",{get:s,configurable:true});}(t,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,s,o,t,n){var l=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==l?l:null)?Object.defineProperty(e,"ref",{enumerable:false,get:a}):Object.defineProperty(e,"ref",{enumerable:false,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:false,enumerable:false,writable:true,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:false,enumerable:false,writable:true,value:null}),Object.defineProperty(e,"_debugStack",{configurable:false,enumerable:false,writable:true,value:t}),Object.defineProperty(e,"_debugTask",{configurable:false,enumerable:false,writable:true,value:n}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,t,null===(h=b.A)?null:h.getOwner(),l,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===y&&("fulfilled"===e._payload.status?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1));}function h(e){return "object"==typeof e&&null!==e&&e.$$typeof===w}var d,m=require$$0,w=Symbol.for("react.transitional.element"),u=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),j=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),C=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),M=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,z=Array.isArray,B=console.createTask?console.createTask:function(){return null},W={},H=(m={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(m,n)(),V=B(t(n)),_={};l.Fragment=x,l.jsx=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,false,o?Error("react-stack-top-frame"):H,o?B(t(e)):V)},l.jsxs=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,true,o?Error("react-stack-top-frame"):H,o?B(t(e)):V)};}()),l}var i=(n||(n=1,"production"===process.env.NODE_ENV?s.exports=function(){if(r)return o;r=1;var e=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function t(r,s,o){var t=null;if(void 0!==o&&(t=""+o),void 0!==s.key&&(t=""+s.key),"key"in s)for(var n in o={},s)"key"!==n&&(o[n]=s[n]);else o=s;return s=o.ref,{$$typeof:e,type:r,key:t,ref:void 0!==s?s:null,props:o}}return o.Fragment=s,o.jsx=t,o.jsxs=t,o}():s.exports=a()),s.exports);function p({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:s,"aria-label":"Check",children:i.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}const f=({className:e="",size:r="md",color:s="currentColor",direction:o="down"})=>i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${{up:"rotate-180",down:"",left:"rotate-90",right:"-rotate-90"}[o]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 9l6 6 6-6"})});function M({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 18L18 6M6 6l12 12"})})}
+ */function a(){return t||(t=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===M?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case u:return "Fragment";case v:return "Profiler";case p:return "StrictMode";case f:return "Suspense";case C:return "SuspenseList";case N:return "Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case x:return "Portal";case j:return e.displayName||"Context";case g:return (e._context.displayName||"Context")+".Consumer";case k:var s=e.render;return (e=e.displayName)||(e=""!==(e=s.displayName||s.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case L:return null!==(s=e.displayName||null)?s:r(e.type)||"Memo";case y:s=e._payload,e=e._init;try{return r(e(s))}catch(e){}}return null}function s(e){return ""+e}function o(e){try{s(e);var r=!1;}catch(e){r=true;}if(r){var o=(r=console).error,t="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),s(e)}}function t(e){if(e===u)return "<>";if("object"==typeof e&&null!==e&&e.$$typeof===y)return "<...>";try{var s=r(e);return s?"<"+s+">":"<...>"}catch(e){return "<...>"}}function n(){return Error("react-stack-top-frame")}function a(){var e=r(this.type);return B[e]||(B[e]=true,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function i(e,s,t,n,l,i){var h,m=s.children;if(void 0!==m)if(n)if(z(m)){for(n=0;n<m.length;n++)c(m[n]);Object.freeze&&Object.freeze(m);}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(m);if($.call(s,"key")){m=r(e);var x=Object.keys(s).filter(function(e){return "key"!==e});n=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",_[m+n]||(x=0<x.length?"{"+x.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',n,m,x,m),_[m+n]=true);}if(m=null,void 0!==t&&(o(t),m=""+t),function(e){if($.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return  false}return void 0!==e.key}(s)&&(o(s.key),m=""+s.key),"key"in s)for(var u in t={},s)"key"!==u&&(t[u]=s[u]);else t=s;return m&&function(e,r){function s(){d||(d=true,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r));}s.isReactWarning=true,Object.defineProperty(e,"key",{get:s,configurable:true});}(t,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,s,o,t,n){var l=s.ref;return e={$$typeof:w,type:e,key:r,props:s,_owner:o},null!==(void 0!==l?l:null)?Object.defineProperty(e,"ref",{enumerable:false,get:a}):Object.defineProperty(e,"ref",{enumerable:false,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:false,enumerable:false,writable:true,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:false,enumerable:false,writable:true,value:null}),Object.defineProperty(e,"_debugStack",{configurable:false,enumerable:false,writable:true,value:t}),Object.defineProperty(e,"_debugTask",{configurable:false,enumerable:false,writable:true,value:n}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,m,t,null===(h=b.A)?null:h.getOwner(),l,i)}function c(e){h(e)?e._store&&(e._store.validated=1):"object"==typeof e&&null!==e&&e.$$typeof===y&&("fulfilled"===e._payload.status?h(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1));}function h(e){return "object"==typeof e&&null!==e&&e.$$typeof===w}var d,m=require$$0,w=Symbol.for("react.transitional.element"),x=Symbol.for("react.portal"),u=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),v=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),j=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),C=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),M=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,$=Object.prototype.hasOwnProperty,z=Array.isArray,H=console.createTask?console.createTask:function(){return null},B={},W=(m={react_stack_bottom_frame:function(e){return e()}}).react_stack_bottom_frame.bind(m,n)(),V=H(t(n)),_={};l.Fragment=u,l.jsx=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,false,o?Error("react-stack-top-frame"):W,o?H(t(e)):V)},l.jsxs=function(e,r,s){var o=1e4>b.recentlyCreatedOwnerStacks++;return i(e,r,s,true,o?Error("react-stack-top-frame"):W,o?H(t(e)):V)};}()),l}var i=(n||(n=1,"production"===process.env.NODE_ENV?s.exports=function(){if(r)return o;r=1;var e=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function t(r,s,o){var t=null;if(void 0!==o&&(t=""+o),void 0!==s.key&&(t=""+s.key),"key"in s)for(var n in o={},s)"key"!==n&&(o[n]=s[n]);else o=s;return s=o.ref,{$$typeof:e,type:r,key:t,ref:void 0!==s?s:null,props:o}}return o.Fragment=s,o.jsx=t,o.jsxs=t,o}():s.exports=a()),s.exports);function p({className:e="",size:r="md"}){const s=`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`;return i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",className:s,"aria-label":"Check",children:i.jsx("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"})})}const f=({className:e="",size:r="md",color:s="currentColor",direction:o="down"})=>i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${{up:"rotate-180",down:"",left:"rotate-90",right:"-rotate-90"}[o]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 9l6 6 6-6"})});function M({className:e="",size:r="md",color:s="currentColor"}){return i.jsx("svg",{className:`${{sm:"w-4 h-4",md:"w-5 h-5",lg:"w-6 h-6"}[r]} ${e}`,fill:"none",stroke:s,viewBox:"0 0 24 24",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:i.jsx("path",{d:"M6 18L18 6M6 6l12 12"})})}
 
 var jsxRuntime = {exports: {}};
 
@@ -855,6 +855,40 @@ function requireJsxRuntime () {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
+function styleInject$1(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$1 = "/* Container */\n.LoadingSpinner-module_container__PHl1j {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.LoadingSpinner-module_containerInline__eD4FZ {\n  display: inline-flex;\n}\n\n/* Inner wrapper */\n.LoadingSpinner-module_inner__SvATp {\n  text-align: center;\n}\n\n.LoadingSpinner-module_innerInline__MPS3Y {\n  display: inline-flex;\n}\n\n/* Spinner base */\n.LoadingSpinner-module_spinner__vu6Ri {\n  border-radius: 9999px;\n  border-width: 2px;\n  animation: LoadingSpinner-module_spin__vEieX 1s linear infinite;\n}\n\n/* Sizes */\n.LoadingSpinner-module_sizeSm__tL-IR {\n  height: 1rem;\n  width: 1rem;\n}\n\n.LoadingSpinner-module_sizeMd__AT592 {\n  height: 2rem;\n  width: 2rem;\n}\n\n.LoadingSpinner-module_sizeLg__jyX27 {\n  height: 3rem;\n  width: 3rem;\n}\n\n/* Colors - spinner */\n.LoadingSpinner-module_colorBlue__Jtuu1 {\n  border-color: #2563eb;\n}\n\n.LoadingSpinner-module_colorGray__-EMqs {\n  border-color: #4b5563;\n}\n\n.LoadingSpinner-module_colorWhite__95Hoo {\n  border-color: #ffffff;\n}\n\n/* Spinner transparent borders */\n.LoadingSpinner-module_spinnerTransparent__G3zcb {\n  border-top-color: transparent;\n  border-right-color: transparent;\n}\n\n/* Spacing */\n.LoadingSpinner-module_spacingDefault__8At6H {\n  margin: 0 auto 1rem auto;\n}\n\n/* Dots container */\n.LoadingSpinner-module_dotsContainer__l3FsV {\n  display: flex;\n  gap: 0.25rem;\n}\n\n.LoadingSpinner-module_dotsContainerInline__Kl4Fz {\n  display: flex;\n  gap: 0.25rem;\n}\n\n/* Dot sizes */\n.LoadingSpinner-module_dotSizeSm__YuBra {\n  height: 0.375rem;\n  width: 0.375rem;\n}\n\n.LoadingSpinner-module_dotSizeMd__rXeyS {\n  height: 0.625rem;\n  width: 0.625rem;\n}\n\n.LoadingSpinner-module_dotSizeLg__M8etz {\n  height: 0.875rem;\n  width: 0.875rem;\n}\n\n/* Dot colors */\n.LoadingSpinner-module_dotColorBlue__5evmc {\n  background-color: #2563eb;\n}\n\n.LoadingSpinner-module_dotColorGray__dr80J {\n  background-color: #4b5563;\n}\n\n.LoadingSpinner-module_dotColorWhite__54ur- {\n  background-color: #ffffff;\n}\n\n/* Dot */\n.LoadingSpinner-module_dot__tz0lA {\n  border-radius: 9999px;\n  animation: LoadingSpinner-module_bounce__7Raih 1s ease-in-out infinite;\n}\n\n.LoadingSpinner-module_dotDelay1__-94Os {\n  animation-delay: 0ms;\n}\n\n.LoadingSpinner-module_dotDelay2__Oy8E- {\n  animation-delay: 150ms;\n}\n\n.LoadingSpinner-module_dotDelay3__7EZYH {\n  animation-delay: 300ms;\n}\n\n/* Pulse */\n.LoadingSpinner-module_pulse__gKUHJ {\n  border-radius: 9999px;\n  animation: LoadingSpinner-module_pulse__gKUHJ 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n/* Ring */\n.LoadingSpinner-module_ringContainer__4p8NG {\n  position: relative;\n}\n\n.LoadingSpinner-module_ringBackground__aF2w1 {\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  border-width: 2px;\n  opacity: 0.25;\n}\n\n.LoadingSpinner-module_ringSpinner__b92-S {\n  position: absolute;\n  inset: 0;\n  border-radius: 9999px;\n  border-width: 2px;\n  border-color: transparent;\n  animation: LoadingSpinner-module_spin__vEieX 1s linear infinite;\n}\n\n.LoadingSpinner-module_ringSpinnerBlue__zGTgw {\n  border-top-color: #2563eb;\n}\n\n.LoadingSpinner-module_ringSpinnerGray__kHnkJ {\n  border-top-color: #4b5563;\n}\n\n.LoadingSpinner-module_ringSpinnerWhite__yu8d0 {\n  border-top-color: #ffffff;\n}\n\n.LoadingSpinner-module_ringTransparent__DTSbu {\n  border-right-color: transparent;\n  border-bottom-color: transparent;\n  border-left-color: transparent;\n}\n\n/* Message */\n.LoadingSpinner-module_message__FoOvh {\n  color: #4b5563;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  margin-top: 0.5rem;\n}\n\n/* Animations */\n@keyframes LoadingSpinner-module_spin__vEieX {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes LoadingSpinner-module_bounce__7Raih {\n  0%,\n  100% {\n    transform: translateY(0);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  }\n  50% {\n    transform: translateY(-25%);\n    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);\n  }\n}\n\n@keyframes LoadingSpinner-module_pulse__gKUHJ {\n  0%,\n  100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}\n";
+var styles$1 = {"container":"LoadingSpinner-module_container__PHl1j","containerInline":"LoadingSpinner-module_containerInline__eD4FZ","inner":"LoadingSpinner-module_inner__SvATp","innerInline":"LoadingSpinner-module_innerInline__MPS3Y","spinner":"LoadingSpinner-module_spinner__vu6Ri","spin":"LoadingSpinner-module_spin__vEieX","sizeSm":"LoadingSpinner-module_sizeSm__tL-IR","sizeMd":"LoadingSpinner-module_sizeMd__AT592","sizeLg":"LoadingSpinner-module_sizeLg__jyX27","colorBlue":"LoadingSpinner-module_colorBlue__Jtuu1","colorGray":"LoadingSpinner-module_colorGray__-EMqs","colorWhite":"LoadingSpinner-module_colorWhite__95Hoo","spinnerTransparent":"LoadingSpinner-module_spinnerTransparent__G3zcb","spacingDefault":"LoadingSpinner-module_spacingDefault__8At6H","dotsContainer":"LoadingSpinner-module_dotsContainer__l3FsV","dotsContainerInline":"LoadingSpinner-module_dotsContainerInline__Kl4Fz","dotSizeSm":"LoadingSpinner-module_dotSizeSm__YuBra","dotSizeMd":"LoadingSpinner-module_dotSizeMd__rXeyS","dotSizeLg":"LoadingSpinner-module_dotSizeLg__M8etz","dotColorBlue":"LoadingSpinner-module_dotColorBlue__5evmc","dotColorGray":"LoadingSpinner-module_dotColorGray__dr80J","dotColorWhite":"LoadingSpinner-module_dotColorWhite__54ur-","dot":"LoadingSpinner-module_dot__tz0lA","bounce":"LoadingSpinner-module_bounce__7Raih","dotDelay1":"LoadingSpinner-module_dotDelay1__-94Os","dotDelay2":"LoadingSpinner-module_dotDelay2__Oy8E-","dotDelay3":"LoadingSpinner-module_dotDelay3__7EZYH","pulse":"LoadingSpinner-module_pulse__gKUHJ","ringContainer":"LoadingSpinner-module_ringContainer__4p8NG","ringBackground":"LoadingSpinner-module_ringBackground__aF2w1","ringSpinner":"LoadingSpinner-module_ringSpinner__b92-S","ringSpinnerBlue":"LoadingSpinner-module_ringSpinnerBlue__zGTgw","ringSpinnerGray":"LoadingSpinner-module_ringSpinnerGray__kHnkJ","ringSpinnerWhite":"LoadingSpinner-module_ringSpinnerWhite__yu8d0","ringTransparent":"LoadingSpinner-module_ringTransparent__DTSbu","message":"LoadingSpinner-module_message__FoOvh"};
+styleInject$1(css_248z$1);
+
+function classNames$1(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
 /**
  * LoadingSpinner component
  * Displays a loading indicator with multiple style variants
@@ -864,65 +898,69 @@ var jsxRuntimeExports = requireJsxRuntime();
  * @param color - Color scheme: 'blue' (default), 'gray', 'white'
  */
 const LoadingSpinner = ({ message, size = "md", className = "", variant = "spinner", inline = false, color = "blue", }) => {
-    const sizeClasses = {
-        sm: "h-4 w-4",
-        md: "h-8 w-8",
-        lg: "h-12 w-12",
-    };
-    const colorClasses = {
-        blue: "border-blue-600",
-        gray: "border-gray-600",
-        white: "border-white",
-    };
-    const dotColorClasses = {
-        blue: "bg-blue-600",
-        gray: "bg-gray-600",
-        white: "bg-white",
-    };
-    const dotSizeClasses = {
-        sm: "h-1.5 w-1.5",
-        md: "h-2.5 w-2.5",
-        lg: "h-3.5 w-3.5",
-    };
+    const sizeClass = styles$1[`size${size.charAt(0).toUpperCase() + size.slice(1)}`];
+    const colorClass = styles$1[`color${color.charAt(0).toUpperCase() + color.slice(1)}`];
+    const dotColorClass = styles$1[`dotColor${color.charAt(0).toUpperCase() + color.slice(1)}`];
+    const dotSizeClass = styles$1[`dotSize${size.charAt(0).toUpperCase() + size.slice(1)}`];
     // Spinner variant (circular border)
     if (variant === "spinner") {
-        return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsx("div", { className: `animate-spin rounded-full border-2 ${colorClasses[color]} ${sizeClasses[size]} ${inline ? "" : "mx-auto mb-4"}`, style: {
-                            borderTopColor: "transparent",
-                            borderRightColor: "transparent",
-                        } }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
+        return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.spinner, styles$1.spinnerTransparent, colorClass, sizeClass, !inline ? styles$1.spacingDefault : undefined) }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
     }
     // Dots variant (three bouncing dots)
     if (variant === "dots") {
-        return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "flex gap-1" : "text-center", children: [jsxRuntimeExports.jsxs("div", { className: `flex gap-1 ${inline ? "" : "mx-auto mb-4"}`, children: [jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "0ms" } }), jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "150ms" } }), jsxRuntimeExports.jsx("div", { className: `${dotSizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-bounce`, style: { animationDelay: "300ms" } })] }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
+        return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsxs("div", { className: classNames$1(inline ? styles$1.dotsContainerInline : styles$1.dotsContainer, !inline ? styles$1.spacingDefault : undefined), children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.dot, dotSizeClass, dotColorClass, styles$1.dotDelay1) }), jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.dot, dotSizeClass, dotColorClass, styles$1.dotDelay2) }), jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.dot, dotSizeClass, dotColorClass, styles$1.dotDelay3) })] }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
     }
     // Pulse variant (pulsing circle)
     if (variant === "pulse") {
-        return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsx("div", { className: `${sizeClasses[size]} ${dotColorClasses[color]} rounded-full animate-pulse ${inline ? "" : "mx-auto mb-4"}` }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
+        return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.pulse, sizeClass, dotColorClass, !inline ? styles$1.spacingDefault : undefined) }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
     }
     // Ring variant (rotating ring with gradient)
     if (variant === "ring") {
-        const ringColorMap = {
-            blue: "border-blue-600",
-            gray: "border-gray-600",
-            white: "border-white",
-        };
-        return (jsxRuntimeExports.jsx("div", { className: inline ? className : `flex justify-center items-center ${className}`, children: jsxRuntimeExports.jsxs("div", { className: inline ? "" : "text-center", children: [jsxRuntimeExports.jsxs("div", { className: `relative ${sizeClasses[size]} ${inline ? "" : "mx-auto mb-4"}`, children: [jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 ${colorClasses[color]} opacity-25` }), jsxRuntimeExports.jsx("div", { className: `absolute inset-0 rounded-full border-2 border-transparent ${ringColorMap[color]} animate-spin`, style: {
-                                    borderTopColor: "currentColor",
-                                    borderRightColor: "transparent",
-                                    borderBottomColor: "transparent",
-                                    borderLeftColor: "transparent",
-                                } })] }), message && jsxRuntimeExports.jsx("p", { className: "text-gray-600 text-sm mt-2", children: message })] }) }));
+        const ringSpinnerColorClass = styles$1[`ringSpinner${color.charAt(0).toUpperCase() + color.slice(1)}`];
+        return (jsxRuntimeExports.jsx("div", { className: classNames$1(inline ? styles$1.containerInline : styles$1.container, className), "data-testid": "loading-spinner", "data-variant": variant, "data-size": size, "data-color": color, children: jsxRuntimeExports.jsxs("div", { className: inline ? styles$1.innerInline : styles$1.inner, children: [jsxRuntimeExports.jsxs("div", { className: classNames$1(styles$1.ringContainer, sizeClass, !inline ? styles$1.spacingDefault : undefined), children: [jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.ringBackground, colorClass) }), jsxRuntimeExports.jsx("div", { className: classNames$1(styles$1.ringSpinner, styles$1.ringTransparent, ringSpinnerColorClass) })] }), message && jsxRuntimeExports.jsx("p", { className: styles$1.message, children: message })] }) }));
     }
     return null;
 };
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".Autocomplete-module_container__Qc33j {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.Autocomplete-module_label__-7YPH {\n  display: block;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  font-weight: 500;\n  color: #374151;\n}\n\n.Autocomplete-module_required__N3ZwR {\n  color: #ef4444;\n  margin-left: 0.25rem;\n}\n\n.Autocomplete-module_inputWrapper__NS450 {\n  position: relative;\n}\n\n.Autocomplete-module_iconLeft__gee-m {\n  position: absolute;\n  left: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #9ca3af;\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n}\n\n.Autocomplete-module_input__ZShCt {\n  width: 100%;\n  padding: 0.5rem 1rem;\n  border-radius: 0.5rem;\n  border: 2px solid #d1d5db;\n  transition:\n    border-color 150ms ease,\n    box-shadow 150ms ease;\n  outline: none;\n  font-weight: 500;\n  color: #111827;\n}\n\n.Autocomplete-module_input__ZShCt::placeholder {\n  color: #9ca3af;\n}\n\n.Autocomplete-module_input__ZShCt:disabled {\n  background: #f3f4f6;\n  color: #6b7280;\n  cursor: not-allowed;\n}\n\n.Autocomplete-module_input__ZShCt:hover:not(:disabled):not(:focus) {\n  border-color: #9ca3af;\n}\n\n.Autocomplete-module_input__ZShCt:focus {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.Autocomplete-module_inputWithIcon__-qV4P {\n  padding-left: 2.5rem;\n}\n\n.Autocomplete-module_inputWithClear__a8C83 {\n  padding-right: 5rem;\n}\n\n.Autocomplete-module_inputWithoutClear__LN8yW {\n  padding-right: 3rem;\n}\n\n.Autocomplete-module_inputReadOnly__dG7ZO {\n  background: #f9fafb;\n  cursor: default;\n}\n\n.Autocomplete-module_inputError__Kdk14 {\n  border-color: #ef4444;\n}\n\n.Autocomplete-module_inputError__Kdk14:focus {\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n.Autocomplete-module_inputWarning__XTQux {\n  border-color: #eab308;\n}\n\n.Autocomplete-module_inputWarning__XTQux:focus {\n  border-color: #eab308;\n  box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);\n}\n\n.Autocomplete-module_inputFocused__1zKVR {\n  border-color: #3b82f6;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.Autocomplete-module_rightIcons__ygVzq {\n  position: absolute;\n  right: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.Autocomplete-module_clearButton__tVaO9 {\n  color: #9ca3af;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition: color 150ms ease;\n}\n\n.Autocomplete-module_clearButton__tVaO9:hover {\n  color: #4b5563;\n}\n\n.Autocomplete-module_toggleButton__nxFFh {\n  color: #9ca3af;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  transition: color 150ms ease;\n}\n\n.Autocomplete-module_toggleButton__nxFFh:hover:not(:disabled) {\n  color: #4b5563;\n}\n\n.Autocomplete-module_toggleButton__nxFFh:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.Autocomplete-module_toggleIcon__fD90b {\n  width: 1.25rem;\n  height: 1.25rem;\n  transition: transform 200ms ease;\n}\n\n.Autocomplete-module_toggleIconOpen__aFQVZ {\n  transform: rotate(180deg);\n}\n\n.Autocomplete-module_dropdown__oT12R {\n  position: absolute;\n  z-index: 50;\n  left: 0;\n  right: 0;\n  margin-top: 0.25rem;\n  background: #ffffff;\n  border: 2px solid #e5e7eb;\n  border-radius: 0.5rem;\n  box-shadow:\n    0 10px 15px -3px rgba(0, 0, 0, 0.1),\n    0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  overflow: hidden;\n}\n\n.Autocomplete-module_dropdownTop__yN9gw {\n  bottom: 100%;\n  top: auto;\n  margin-top: 0;\n  margin-bottom: 0.25rem;\n}\n\n.Autocomplete-module_dropdownContent__0RNSN {\n  overflow-y: auto;\n  max-height: 100%;\n}\n\n.Autocomplete-module_loadingState__HQ2Vq {\n  padding: 0.75rem 1rem;\n  text-align: center;\n  color: #6b7280;\n}\n\n.Autocomplete-module_loadingSpinner__9qSHW {\n  margin: 0 auto;\n}\n\n.Autocomplete-module_loadingText__6g6Qb {\n  display: block;\n  margin-top: 0.5rem;\n  font-size: 0.875rem;\n}\n\n.Autocomplete-module_option__O2-MC {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  transition: background-color 150ms ease;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.Autocomplete-module_option__O2-MC:hover:not(.Autocomplete-module_optionDisabled__kkjS2) {\n  background: #f9fafb;\n}\n\n.Autocomplete-module_optionDisabled__kkjS2 {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background: #f9fafb;\n}\n\n.Autocomplete-module_optionHighlighted__WpIwj:not(.Autocomplete-module_optionDisabled__kkjS2) {\n  background: #eff6ff;\n}\n\n.Autocomplete-module_optionSelected__CeDeN:not(.Autocomplete-module_optionDisabled__kkjS2) {\n  background: #dbeafe;\n}\n\n.Autocomplete-module_optionContent__TzYTm {\n  flex: 1;\n}\n\n.Autocomplete-module_optionLabel__5FOIH {\n  font-weight: 500;\n  color: #111827;\n}\n\n.Autocomplete-module_optionDescription__0HEsl {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: #6b7280;\n  margin-top: 0.125rem;\n}\n\n.Autocomplete-module_optionCheckIcon__MEavu {\n  width: 1.25rem;\n  height: 1.25rem;\n  color: #3b82f6;\n  flex-shrink: 0;\n}\n\n.Autocomplete-module_highlight__MW3bw {\n  background: #fef08a;\n  font-weight: 600;\n  color: #111827;\n}\n\n.Autocomplete-module_createOption__xIHDz {\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  transition: background-color 150ms ease;\n}\n\n.Autocomplete-module_createOption__xIHDz:hover {\n  background: #f9fafb;\n}\n\n.Autocomplete-module_createOptionWithBorder__BX0mv {\n  border-top: 1px solid #e5e7eb;\n}\n\n.Autocomplete-module_createOptionHighlighted__-3e6V {\n  background: #eff6ff;\n}\n\n.Autocomplete-module_createIcon__wh5Nu {\n  color: #3b82f6;\n  font-weight: 500;\n}\n\n.Autocomplete-module_createText__V9uqQ {\n  color: #111827;\n}\n\n.Autocomplete-module_noResults__rAoto {\n  padding: 0.75rem 1rem;\n  text-align: center;\n  color: #6b7280;\n  font-size: 0.875rem;\n}\n\n.Autocomplete-module_hint__E-DXp {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: #6b7280;\n}\n\n.Autocomplete-module_warning__6-JRr {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: #ca8a04;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.Autocomplete-module_warningIcon__gEaAt {\n  width: 1rem;\n  height: 1rem;\n}\n\n.Autocomplete-module_error__XLtyW {\n  font-size: 0.75rem;\n  line-height: 1rem;\n  color: #dc2626;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.Autocomplete-module_errorIcon__Ftizo {\n  width: 1rem;\n  height: 1rem;\n}\n";
+var styles = {"container":"Autocomplete-module_container__Qc33j","label":"Autocomplete-module_label__-7YPH","required":"Autocomplete-module_required__N3ZwR","inputWrapper":"Autocomplete-module_inputWrapper__NS450","iconLeft":"Autocomplete-module_iconLeft__gee-m","input":"Autocomplete-module_input__ZShCt","inputWithIcon":"Autocomplete-module_inputWithIcon__-qV4P","inputWithClear":"Autocomplete-module_inputWithClear__a8C83","inputWithoutClear":"Autocomplete-module_inputWithoutClear__LN8yW","inputReadOnly":"Autocomplete-module_inputReadOnly__dG7ZO","inputError":"Autocomplete-module_inputError__Kdk14","inputWarning":"Autocomplete-module_inputWarning__XTQux","inputFocused":"Autocomplete-module_inputFocused__1zKVR","rightIcons":"Autocomplete-module_rightIcons__ygVzq","clearButton":"Autocomplete-module_clearButton__tVaO9","toggleButton":"Autocomplete-module_toggleButton__nxFFh","toggleIcon":"Autocomplete-module_toggleIcon__fD90b","toggleIconOpen":"Autocomplete-module_toggleIconOpen__aFQVZ","dropdown":"Autocomplete-module_dropdown__oT12R","dropdownTop":"Autocomplete-module_dropdownTop__yN9gw","dropdownContent":"Autocomplete-module_dropdownContent__0RNSN","loadingState":"Autocomplete-module_loadingState__HQ2Vq","loadingSpinner":"Autocomplete-module_loadingSpinner__9qSHW","loadingText":"Autocomplete-module_loadingText__6g6Qb","option":"Autocomplete-module_option__O2-MC","optionDisabled":"Autocomplete-module_optionDisabled__kkjS2","optionHighlighted":"Autocomplete-module_optionHighlighted__WpIwj","optionSelected":"Autocomplete-module_optionSelected__CeDeN","optionContent":"Autocomplete-module_optionContent__TzYTm","optionLabel":"Autocomplete-module_optionLabel__5FOIH","optionDescription":"Autocomplete-module_optionDescription__0HEsl","optionCheckIcon":"Autocomplete-module_optionCheckIcon__MEavu","highlight":"Autocomplete-module_highlight__MW3bw","createOption":"Autocomplete-module_createOption__xIHDz","createOptionWithBorder":"Autocomplete-module_createOptionWithBorder__BX0mv","createOptionHighlighted":"Autocomplete-module_createOptionHighlighted__-3e6V","createIcon":"Autocomplete-module_createIcon__wh5Nu","createText":"Autocomplete-module_createText__V9uqQ","noResults":"Autocomplete-module_noResults__rAoto","hint":"Autocomplete-module_hint__E-DXp","warning":"Autocomplete-module_warning__6-JRr","warningIcon":"Autocomplete-module_warningIcon__gEaAt","error":"Autocomplete-module_error__XLtyW","errorIcon":"Autocomplete-module_errorIcon__Ftizo"};
+styleInject(css_248z);
+
+const classNames = (...classes) => classes.filter(Boolean).join(" ");
 // Helper function to highlight matching text
 const highlightMatchText = (text, search, shouldHighlight = true) => {
     if (!shouldHighlight || !search || !text)
         return text;
     const regex = new RegExp(`(${search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
     const parts = text.split(regex);
-    return (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: parts.map((part, index) => regex.test(part) ? (jsxRuntimeExports$1.jsx("mark", { className: "bg-yellow-200 font-semibold text-gray-900", children: part }, index)) : (jsxRuntimeExports$1.jsx("span", { children: part }, index))) }));
+    return (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: parts.map((part, index) => regex.test(part) ? (jsxRuntimeExports$1.jsx("mark", { className: styles.highlight, children: part }, index)) : (jsxRuntimeExports$1.jsx("span", { children: part }, index))) }));
 };
 const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Search or select...", error, warning, hint, required = false, disabled = false, loading = false, searchable = true, clearable = true, icon, className = "", maxHeight = "300px", onCreate, onSearch, readOnly = false, renderOption, onBlur, onFocus, createLabel = "Create", noResultsText = "No results found", loadingText = "Loading...", highlightMatch = true, minSearchLength = 0, debounceMs = 300, keepListOpen = false, position = "bottom", }) => {
     const [isOpen, setIsOpen] = useState(false);
@@ -1084,56 +1122,21 @@ const Autocomplete = ({ label, value, onChange, options = [], placeholder = "Sea
                 break;
         }
     };
-    const getBorderColor = () => {
-        if (error) {
-            return "border-red-500 focus:border-red-500 focus:ring-2 focus:ring-red-200";
-        }
-        if (warning) {
-            return "border-yellow-500 focus:border-yellow-500 focus:ring-2 focus:ring-yellow-200";
-        }
-        if (isFocused) {
-            return "border-blue-500 focus:ring-2 focus:ring-blue-200";
-        }
-        return "border-gray-300 hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-200";
+    const getInputClassName = () => {
+        return classNames(styles.input, icon ? styles.inputWithIcon : undefined, clearable && value ? styles.inputWithClear : styles.inputWithoutClear, readOnly ? styles.inputReadOnly : undefined, error ? styles.inputError : undefined, warning && !error ? styles.inputWarning : undefined, isFocused && !error && !warning ? styles.inputFocused : undefined);
     };
-    return (jsxRuntimeExports$1.jsxs("div", { className: `flex flex-col gap-2 ${className}`, children: [label && (jsxRuntimeExports$1.jsxs("label", { className: "block text-sm font-medium text-gray-700", children: [label, required && jsxRuntimeExports$1.jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), jsxRuntimeExports$1.jsxs("div", { ref: containerRef, className: "relative", children: [icon && (jsxRuntimeExports$1.jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none flex items-center", children: icon })), jsxRuntimeExports$1.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly || !searchable, className: `
-            w-full px-4 py-2 rounded-lg border-2 transition-all outline-none
-            font-medium text-gray-900 placeholder-gray-400
-            disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed
-            ${icon ? "pl-10" : ""}
-            ${clearable && value ? "pr-20" : "pr-12"}
-            ${getBorderColor()}
-            ${readOnly ? "bg-gray-50 cursor-default" : ""}
-          `, "data-testid": "autocomplete-input" }), jsxRuntimeExports$1.jsxs("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 flex items-center gap-2", children: [loading && jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "dots", inline: true }), clearable && value && !loading && !disabled && (jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleClear, className: "text-gray-400 hover:text-gray-600 transition-colors", "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(M, { className: "w-4 h-4" }) })), jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleToggle, className: `text-gray-400 transition-all ${disabled || readOnly
-                                    ? "cursor-not-allowed opacity-50"
-                                    : "hover:text-gray-600"}`, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(f, { className: `w-5 h-5 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` }) })] }), isOpen && !disabled && !readOnly && (jsxRuntimeExports$1.jsxs("div", { ref: dropdownRef, className: `
-              absolute z-50 left-0 right-0 mt-1
-              bg-white border-2 border-gray-200 rounded-lg shadow-lg
-              overflow-hidden
-              ${position === "top" ? "bottom-full mb-1" : "top-full"}
-            `, style: { maxHeight }, "data-testid": "autocomplete-dropdown", children: [loading && filteredOptions.length === 0 && (jsxRuntimeExports$1.jsxs("div", { className: "px-4 py-3 text-center text-gray-500", children: [jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "spinner", className: "mx-auto" }), jsxRuntimeExports$1.jsx("span", { className: "block mt-2 text-sm", children: loadingText })] })), jsxRuntimeExports$1.jsx("div", { className: "overflow-y-auto max-h-full", children: !loading && filteredOptions.length > 0 && (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: filteredOptions.map((option, index) => {
+    return (jsxRuntimeExports$1.jsxs("div", { className: classNames(styles.container, className), children: [label && (jsxRuntimeExports$1.jsxs("label", { className: styles.label, children: [label, required && jsxRuntimeExports$1.jsx("span", { className: styles.required, children: "*" })] })), jsxRuntimeExports$1.jsxs("div", { ref: containerRef, className: styles.inputWrapper, children: [icon && jsxRuntimeExports$1.jsx("div", { className: styles.iconLeft, children: icon }), jsxRuntimeExports$1.jsx("input", { ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: disabled, readOnly: readOnly || !searchable, className: getInputClassName(), "data-testid": "autocomplete-input", "data-has-error": error ? "true" : "false", "data-has-warning": warning ? "true" : "false", "data-is-focused": isFocused ? "true" : "false" }), jsxRuntimeExports$1.jsxs("div", { className: styles.rightIcons, children: [loading && jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "dots", inline: true }), clearable && value && !loading && !disabled && (jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleClear, className: styles.clearButton, "data-testid": "autocomplete-clear", "aria-label": "Clear selection", children: jsxRuntimeExports$1.jsx(M, { className: "w-4 h-4" }) })), jsxRuntimeExports$1.jsx("button", { type: "button", onClick: handleToggle, className: styles.toggleButton, disabled: disabled, "data-testid": "autocomplete-toggle", "aria-label": isOpen ? "Close dropdown" : "Open dropdown", children: jsxRuntimeExports$1.jsx(f, { className: classNames(styles.toggleIcon, isOpen && styles.toggleIconOpen) }) })] }), isOpen && !disabled && !readOnly && (jsxRuntimeExports$1.jsxs("div", { ref: dropdownRef, className: classNames(styles.dropdown, position === "top" && styles.dropdownTop), style: { maxHeight }, "data-testid": "autocomplete-dropdown", children: [loading && filteredOptions.length === 0 && (jsxRuntimeExports$1.jsxs("div", { className: styles.loadingState, children: [jsxRuntimeExports$1.jsx(LoadingSpinner, { size: "sm", variant: "spinner", className: styles.loadingSpinner }), jsxRuntimeExports$1.jsx("span", { className: styles.loadingText, children: loadingText })] })), jsxRuntimeExports$1.jsx("div", { className: styles.dropdownContent, children: !loading && filteredOptions.length > 0 && (jsxRuntimeExports$1.jsx(jsxRuntimeExports$1.Fragment, { children: filteredOptions.map((option, index) => {
                                         const isSelected = option.value === value;
                                         const isHighlighted = index === highlightedIndex;
                                         return (jsxRuntimeExports$1.jsx("div", { ref: (el) => {
                                                 optionRefs.current[index] = el;
-                                            }, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), className: `
-                        px-4 py-3 cursor-pointer transition-colors flex items-center justify-between
-                        ${option.disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : ""}
-                        ${isHighlighted && !option.disabled ? "bg-blue-50" : ""}
-                        ${isSelected && !option.disabled ? "bg-blue-100" : ""}
-                        ${!isHighlighted && !isSelected && !option.disabled ? "hover:bg-gray-50" : ""}
-                      `, "data-testid": `autocomplete-option-${option.value}`, children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: "flex-1", children: [jsxRuntimeExports$1.jsx("div", { className: "font-medium text-gray-900", children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(p, { className: "w-5 h-5 text-blue-600 flex-shrink-0" }))] })) }, option.value));
+                                            }, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), className: classNames(styles.option, option.disabled && styles.optionDisabled, isHighlighted && styles.optionHighlighted, isSelected && styles.optionSelected), "data-testid": `autocomplete-option-${option.value}`, "data-disabled": option.disabled ? "true" : "false", "data-selected": isSelected ? "true" : "false", "data-highlighted": isHighlighted ? "true" : "false", children: renderOption ? (renderOption(option, isSelected)) : (jsxRuntimeExports$1.jsxs(jsxRuntimeExports$1.Fragment, { children: [jsxRuntimeExports$1.jsxs("div", { className: styles.optionContent, children: [jsxRuntimeExports$1.jsx("div", { className: styles.optionLabel, children: highlightMatchText(option.label, searchTerm, highlightMatch) }), option.description && (jsxRuntimeExports$1.jsx("div", { className: styles.optionDescription, children: option.description }))] }), isSelected && (jsxRuntimeExports$1.jsx(p, { className: styles.optionCheckIcon }))] })) }, option.value));
                                     }) })) }), onCreate && searchTerm && (jsxRuntimeExports$1.jsxs("div", { onClick: () => {
                                     onCreate(searchTerm.trim());
                                     setIsOpen(false);
                                     setSearchTerm("");
-                                }, className: `
-                  px-4 py-3 cursor-pointer
-                  flex items-center gap-2
-                  ${filteredOptions.length > 0 ? "border-t border-gray-200" : ""}
-                  transition-colors
-                  ${highlightedIndex === filteredOptions.length ? "bg-blue-50" : "hover:bg-gray-50"}
-                `, "data-testid": "autocomplete-create", children: [jsxRuntimeExports$1.jsx("span", { className: "text-blue-600 font-medium", children: "+" }), jsxRuntimeExports$1.jsxs("span", { className: "text-gray-900", children: [createLabel, " \"", searchTerm, "\""] })] })), !loading && filteredOptions.length === 0 && !onCreate && (jsxRuntimeExports$1.jsx("div", { className: "px-4 py-3 text-center text-gray-500 text-sm", children: noResultsText }))] }))] }), hint && !error && !warning && (jsxRuntimeExports$1.jsx("p", { className: "text-xs text-gray-500", children: hint })), warning && !error && (jsxRuntimeExports$1.jsxs("p", { className: "text-xs text-yellow-600 flex items-center gap-1", children: [jsxRuntimeExports$1.jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), warning] })), error && (jsxRuntimeExports$1.jsxs("p", { className: "text-xs text-red-600 flex items-center gap-1", children: [jsxRuntimeExports$1.jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }), error] }))] }));
+                                }, className: classNames(styles.createOption, filteredOptions.length > 0 && styles.createOptionWithBorder, highlightedIndex === filteredOptions.length &&
+                                    styles.createOptionHighlighted), "data-testid": "autocomplete-create", children: [jsxRuntimeExports$1.jsx("span", { className: styles.createIcon, children: "+" }), jsxRuntimeExports$1.jsxs("span", { className: styles.createText, children: [createLabel, " \"", searchTerm, "\""] })] })), !loading && filteredOptions.length === 0 && !onCreate && (jsxRuntimeExports$1.jsx("div", { className: styles.noResults, children: noResultsText }))] }))] }), hint && !error && !warning && jsxRuntimeExports$1.jsx("p", { className: styles.hint, children: hint }), warning && !error && (jsxRuntimeExports$1.jsxs("p", { className: styles.warning, children: [jsxRuntimeExports$1.jsx("svg", { className: styles.warningIcon, fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }), warning] })), error && (jsxRuntimeExports$1.jsxs("p", { className: styles.error, children: [jsxRuntimeExports$1.jsx("svg", { className: styles.errorIcon, fill: "currentColor", viewBox: "0 0 20 20", children: jsxRuntimeExports$1.jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }), error] }))] }));
 };
 
 export { Autocomplete as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubenpazch/autocomplete",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "description": "Autocomplete component",
   "private": false,
   "main": "dist/index.cjs.js",
@@ -16,7 +16,9 @@
   "files": [
     "dist"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
@@ -29,8 +31,8 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@rubenpazch/icons": "3.0.3",
-    "@rubenpazch/loading-spinner": "2.0.0"
+    "@rubenpazch/icons": "4.0.0",
+    "@rubenpazch/loading-spinner": "3.0.0"
   },
   "devDependencies": {
     "@rubenpazch/typescript-config": "3.0.0"