naria-ui 0.1.48 → 0.1.50

package/dist/lib/components/Button/Button.d.ts

@@ -1,6 +1,16 @@
-import { default as React, FC } from 'react';
+import { default as React, FC, ReactNode } from 'react';
 export interface props extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     type?: "button" | "submit";
+    classNames?: {
+        button: string;
+        loading: {
+            wrapper: string;
+            color: string;
+        };
+    };
     value: string;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    icon?: ReactNode;
 }
 export declare const Button: FC<props>;

package/dist/lib/components/Input/Input.d.ts

@@ -5,6 +5,7 @@ export interface props {
         wrapper?: string;
         label?: string;
         input?: string;
+        errorText?: string;
     };
     placeholder: string;
     label: string;

package/dist/lib/components/Select/Select.d.ts

@@ -27,6 +27,8 @@ export interface props {
         listWrapper?: string;
         list?: string;
         option?: string;
+        optionActive?: string;
+        mobileHeader?: string;
     };
     onSelectChange?: any;
 }

package/dist/light.css

@@ -0,0 +1 @@
+.test{color:red}.test.x{background-color:#ff0}.test .y{color:blue}

package/dist/light.scss

@@ -0,0 +1,9 @@
+.test {
+    color: red;
+    &.x {
+        background-color: yellow;
+    }
+    & .y {
+        color: blue;
+    }
+}

package/dist/naria-ui.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react");function se(t){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const d=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(i,s,d.get?d:{enumerable:!0,get:()=>t[s]})}}return i.default=t,Object.freeze(i)}const P=se(l);var V={exports:{}},U={};/**
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react");function se(t){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const d=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(i,o,d.get?d:{enumerable:!0,get:()=>t[o]})}}return i.default=t,Object.freeze(i)}const P=se(l);var V={exports:{}},H={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var K;function ie(){if(K)return U;K=1;var t=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function s(d,o,f){var g=null;if(f!==void 0&&(g=""+f),o.key!==void 0&&(g=""+o.key),"key"in o){f={};for(var m in o)m!=="key"&&(f[m]=o[m])}else f=o;return o=f.ref,{$$typeof:t,type:d,key:g,ref:o!==void 0?o:null,props:f}}return U.Fragment=i,U.jsx=s,U.jsxs=s,U}var H={};/**
+ */var ee;function ie(){if(ee)return H;ee=1;var t=Symbol.for("react.transitional.element"),i=Symbol.for("react.fragment");function o(d,s,u){var p=null;if(u!==void 0&&(p=""+u),s.key!==void 0&&(p=""+s.key),"key"in s){u={};for(var h in s)h!=="key"&&(u[h]=s[h])}else u=s;return s=u.ref,{$$typeof:t,type:d,key:p,ref:s!==void 0?s:null,props:u}}return H.Fragment=i,H.jsx=o,H.jsxs=o,H}var U={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,14 +14,13 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var ee;function ce(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===k?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case T:return"Fragment";case S:return"Profiler";case q:return"StrictMode";case u:return"Suspense";case M:return"SuspenseList";case B:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case W:return"Portal";case G:return(e.displayName||"Context")+".Provider";case L:return(e._context.displayName||"Context")+".Consumer";case z:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case _:return n=e.displayName||null,n!==null?n:t(e.type)||"Memo";case C:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function i(e){return""+e}function s(e){try{i(e);var n=!1}catch{n=!0}if(n){n=console;var c=n.error,r=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return c.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",r),i(e)}}function d(e){if(e===T)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var n=t(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function o(){var e=v.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function g(e){if(Y.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function m(e,n){function c(){y||(y=!0,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)",n))}c.isReactWarning=!0,Object.defineProperty(e,"key",{get:c,configurable:!0})}function x(){var e=t(this.type);return D[e]||(D[e]=!0,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.")),e=this.props.ref,e!==void 0?e:null}function E(e,n,c,r,b,w,X,Z){return c=w.ref,e={$$typeof:I,type:e,key:n,props:w,_owner:b},(c!==void 0?c:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:x}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function $(e,n,c,r,b,w,X,Z){var p=n.children;if(p!==void 0)if(r)if(j(p)){for(r=0;r<p.length;r++)R(p[r]);Object.freeze&&Object.freeze(p)}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 R(p);if(Y.call(n,"key")){p=t(e);var A=Object.keys(n).filter(function(oe){return oe!=="key"});r=0<A.length?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}",J[p+r]||(A=0<A.length?"{"+A.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var re;function ce(){return re||(re=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===T?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case k:return"Fragment";case R:return"Profiler";case B:return"StrictMode";case f:return"Suspense";case M:return"SuspenseList";case q:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case W:return"Portal";case G:return(e.displayName||"Context")+".Provider";case O:return(e._context.displayName||"Context")+".Consumer";case z:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case _:return n=e.displayName||null,n!==null?n:t(e.type)||"Memo";case C:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function i(e){return""+e}function o(e){try{i(e);var n=!1}catch{n=!0}if(n){n=console;var c=n.error,r=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return c.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",r),i(e)}}function d(e){if(e===k)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var n=t(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function s(){var e=v.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function p(e){if(Y.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function h(e,n){function c(){L||(L=!0,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)",n))}c.isReactWarning=!0,Object.defineProperty(e,"key",{get:c,configurable:!0})}function E(){var e=t(this.type);return D[e]||(D[e]=!0,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.")),e=this.props.ref,e!==void 0?e:null}function x(e,n,c,r,b,w,X,Z){return c=w.ref,e={$$typeof:I,type:e,key:n,props:w,_owner:b},(c!==void 0?c:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:E}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Z}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,n,c,r,b,w,X,Z){var m=n.children;if(m!==void 0)if(r)if(j(m)){for(r=0;r<m.length;r++)S(m[r]);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 S(m);if(Y.call(n,"key")){m=t(e);var $=Object.keys(n).filter(function(oe){return oe!=="key"});r=0<$.length?"{key: someKey, "+$.join(": ..., ")+": ...}":"{key: someKey}",J[m+r]||($=0<$.length?"{"+$.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,r,p,A,p),J[p+r]=!0)}if(p=null,c!==void 0&&(s(c),p=""+c),g(n)&&(s(n.key),p=""+n.key),"key"in n){c={};for(var Q in n)Q!=="key"&&(c[Q]=n[Q])}else c=n;return p&&m(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),E(e,p,w,b,o(),c,X,Z)}function R(e){typeof e=="object"&&e!==null&&e.$$typeof===I&&e._store&&(e._store.validated=1)}var h=l,I=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),S=Symbol.for("react.profiler"),L=Symbol.for("react.consumer"),G=Symbol.for("react.context"),z=Symbol.for("react.forward_ref"),u=Symbol.for("react.suspense"),M=Symbol.for("react.suspense_list"),_=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),B=Symbol.for("react.activity"),k=Symbol.for("react.client.reference"),v=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,j=Array.isArray,O=console.createTask?console.createTask:function(){return null};h={"react-stack-bottom-frame":function(e){return e()}};var y,D={},N=h["react-stack-bottom-frame"].bind(h,f)(),F=O(d(f)),J={};H.Fragment=T,H.jsx=function(e,n,c,r,b){var w=1e4>v.recentlyCreatedOwnerStacks++;return $(e,n,c,!1,r,b,w?Error("react-stack-top-frame"):N,w?O(d(e)):F)},H.jsxs=function(e,n,c,r,b){var w=1e4>v.recentlyCreatedOwnerStacks++;return $(e,n,c,!0,r,b,w?Error("react-stack-top-frame"):N,w?O(d(e)):F)}}()),H}var re;function le(){return re||(re=1,process.env.NODE_ENV==="production"?V.exports=ie():V.exports=ce()),V.exports}var a=le();const ue=({type:t="button",value:i})=>a.jsx("button",{type:t,children:i}),fe=({type:t="text",placeholder:i,classNames:s={wrapper:"",label:"",input:""},label:d,hasError:o,register:f,name:g,isDisabled:m=!1,autocomplete:x=!1,...E})=>a.jsxs("div",{className:`nariaInputWrapper ${s.wrapper}`,children:[a.jsxs("label",{htmlFor:g,className:`${s.label} ${o&&"nariaInputLabel-error"}`,children:[d,a.jsx("input",{disabled:m,autoComplete:x?"on":"off",id:g,...f,...E,type:t,name:g,className:`${s.input} ${o&&"nariaInput-error"}`,placeholder:i})]}),o&&a.jsx("p",{className:"nariaInputErrorText",children:o})]}),te=t=>P.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",...t},P.createElement("path",{fill:"currentColor",d:"M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z"})),de=t=>P.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",...t},P.createElement("path",{fill:"currentColor",d:"M7.5 105c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l151 151 151-151c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-151 151 151 151c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-151-151-151 151c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l151-151-151-151z"})),ne=t=>P.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",fill:"currentColor",...t},P.createElement("path",{fill:"currentColor",d:"M368 208a160 160 0 1 0 -320 0 160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z"})),pe=()=>{const[t,i]=l.useState(typeof window<"u"?window.innerWidth:0),s=()=>i(typeof window<"u"?window.innerWidth:0);return l.useEffect(()=>(window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)),[t]),t},ae=({classNames:t={wrapper:"",color:""}})=>a.jsxs("svg",{className:`nariaLoading ${t.wrapper}`,viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[a.jsx("path",{d:"M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z",stroke:"currentColor",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round"}),a.jsx("path",{d:"M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762",stroke:"currentColor",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",className:t.color})]}),ge=()=>{const t=`${window.location.pathname}${window.location.search}`;window.history.replaceState(null,"",t)},me=t=>{window.location.hash=t},he=t=>{const[i,s]=l.useState(!1);return l.useEffect(()=>{const d=o=>{window.location.hash!==t?s(!0):s(!1)};return window.addEventListener("hashchange",d),()=>{window.removeEventListener("hashchange",d)}},[]),i},we=(t,i,s)=>{l.useEffect(()=>{function d(o){i.current&&!i.current.contains(o.target)&&t?.current&&!t?.current.contains(o.target)&&s()}return document.addEventListener("mousedown",d),()=>{document.removeEventListener("mousedown",d)}},[t,s])},ve=({options:t,label:i,hasError:s,title:d,value:o,api:f,selected:g,placeholder:m,disabled:x=!1,pagination:E,optionFilterLabel:$,hasSearch:R=!1,classNames:h={wrapper:"",label:"",title:"",button:"",input:"",listWrapper:"",list:"",option:""},onSelectChange:I})=>{let W=!0;const T=pe(),q=he("#select"),[S,L]=l.useState(!1),[G,z]=l.useState(!0),[u,M]=l.useState(null),[_,C]=l.useState(null),[B,k]=l.useState(""),[v,Y]=l.useState({page:1,pageLabel:"page",size:20,sizeLabel:"size",isLoading:!1}),j=l.useRef(void 0),O=l.useRef(void 0),y=l.useRef(void 0),D=async()=>{if(j?.current)try{const r=await fetch(j?.current);if(!r.ok)throw new Error(`Response status: ${r.status}`);return await r.json()}catch(r){console.error(r.message)}};l.useEffect(()=>()=>{W=!1},[]),l.useEffect(()=>{if(f?.length){if(j.current=f,j.current.includes(E?.pageLabel||"page")){const r=new URL(f);r.searchParams.set(E?.pageLabel||"page",(E?.page||v.page).toString()),r.searchParams.set(E?.sizeLabel||"size",(E?.size||v.size).toString()),j.current=r.href}z(!0),D().then(r=>{W&&(z(!1),C(r))})}},[f,E]),l.useEffect(()=>{if(v.isLoading){if(j.current.includes(E?.pageLabel||"page")){const r=new URL(j.current);r.searchParams.set(E?.pageLabel||"page",v.page.toString()),j.current=r.href}D().then(r=>{W&&(z(!1),Y({...v,isLoading:!1}),C([..._,...r]))})}},[v]),l.useEffect(()=>{T<768&&(S?(me("select"),document.body.style.overflow="hidden",y.current?.focus()):(window.location.hash&&!document.referrer.includes("#")&&ge(),document.body.style.overflow="auto"))},[S]),l.useEffect(()=>{g&&t?.length&&(t?.find(r=>r[i]===g)?M(t?.find(r=>r[i]===g)):M(g))},[g]),l.useEffect(()=>{u&&R&&(o?.length&&_?.find(r=>r[i]===u[i])?k(_?.find(r=>r[i]===u[i])[o]||""):k(u))},[u]),l.useEffect(()=>{q&&L(!1)},[q]),l.useEffect(()=>{t?.length&&C(t)},[t]);const N=()=>{R&&C(t),L(r=>!r)},F=()=>{R&&(C(t),k(typeof u=="string"?u:u?u[o]:"")),L(!1)},J=r=>{R&&(o?.length?k(r[o]):k(r)),M(r),N(),I&&I(r)},e=r=>{if(!u)return"";if(i?.length&&r[i]===u[i]||r===u)return"bg-grey-100"},n=r=>{f?.length&&_?.length&&!v.isLoading&&r.target.offsetHeight+r.target.scrollTop>=r.target.scrollHeight-100&&Y({page:v.page+1,isLoading:!0})},c=r=>{const b=r?.target?.value?.length?t.filter(w=>typeof w=="object"?w[$?.length?$:o].includes(r?.target?.value):w.includes(r?.target?.value)):t;C(b),k(r?.target?.value),S||L(!0)};return we(O,y,F),a.jsxs("div",{className:`nariaSelect ${x?"nariaSelect-disabled":""} ${h?.wrapper}`,"data-prop":"wrapper",children:[a.jsxs("label",{className:`cursor-pointer
-                ${s&&"!text-danger-100"}
-                ${h?.label}`,"data-prop":"label",children:[a.jsx("span",{className:h?.title,"data-prop":"title",children:d}),R?a.jsxs("div",{className:"nariaSearchInput",children:[a.jsx("input",{ref:y,placeholder:m?.length?m:"Select",className:`${u?"text-dark-100":"text-grey-300"} 
-                                ${s&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${h?.input}`,value:B,disabled:x,type:"text",onClick:N,onChange:c,"data-prop":"input"}),S?a.jsx(ne,{className:"nariaSearchIcon"}):a.jsx(te,{className:`nariaArrowIcon ${S?"nariaArrowIcon-rotate-180":""}`})]}):a.jsxs("button",{type:"button",ref:y,disabled:x,className:`nariaHandler ${u?"text-dark-100":"text-grey-300"} 
-                                ${s&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${h?.button}`,"data-prop":"button",onClick:N,children:[u?o?.length?u[o]:u:m?.length?m:"Select"," ",a.jsx(te,{className:`nariaArrowIcon ${S?"nariaArrowIcon-rotate-180":""}`})]})]}),S?a.jsx("div",{className:`nariaListWrapper ${T<768?"nariaListWrapper-mobile":""} ${h?.listWrapper}`,"data-prop":"listWrapper",ref:O,children:a.jsx("div",{className:`nariaList ${T<768?"nariaList-mobile":"nariaList-desktop"} ${h?.list}`,"data-prop":"input",onScroll:n,children:f&&G?a.jsx("div",{className:"nariaLoadingWrapper",children:a.jsx(ae,{})}):a.jsxs(a.Fragment,{children:[T<768?a.jsxs("div",{className:"nariaSelectMobileHeader",children:[R?a.jsxs("div",{className:"nariaSearchInput",children:[a.jsx("input",{ref:y,placeholder:m?.length?m:"Select",className:`${u?"text-dark-100":"text-grey-300"} 
-                                                               ${s&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${h?.input}`,"data-prop":"input",value:B,disabled:x,type:"text",onChange:c}),a.jsx(ne,{className:"nariaSearchIcon"})]}):void 0,a.jsx("button",{className:"p-3",onClick:F,disabled:x,children:a.jsx(de,{className:"w-6"})})]}):void 0,_?.length?a.jsx(a.Fragment,{children:_?.map((r,b)=>a.jsx("button",{type:"button",onClick:()=>J(r),disabled:x,className:`${h?.option} ${e(r)}`,"data-prop":"option",children:o?.length?r[o]:r},b.toString()))}):a.jsx("div",{children:"No Data"}),v.isLoading?a.jsx("div",{className:"nariaLoadingMoreWrapper",children:a.jsx(ae,{})}):void 0]})})}):void 0,s&&a.jsx("p",{className:"text-xs mt-1 text-danger-100",children:s})]})};function be(t){return t.charAt(0).toUpperCase()+t.slice(1)}exports.Button=ue;exports.Input=fe;exports.Select=ve;exports.capitalize=be;
+  <%s key={someKey} {...props} />`,r,m,$,m),J[m+r]=!0)}if(m=null,c!==void 0&&(o(c),m=""+c),p(n)&&(o(n.key),m=""+n.key),"key"in n){c={};for(var Q in n)Q!=="key"&&(c[Q]=n[Q])}else c=n;return m&&h(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),x(e,m,w,b,s(),c,X,Z)}function S(e){typeof e=="object"&&e!==null&&e.$$typeof===I&&e._store&&(e._store.validated=1)}var g=l,I=Symbol.for("react.transitional.element"),W=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),R=Symbol.for("react.profiler"),O=Symbol.for("react.consumer"),G=Symbol.for("react.context"),z=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),M=Symbol.for("react.suspense_list"),_=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),q=Symbol.for("react.activity"),T=Symbol.for("react.client.reference"),v=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,j=Array.isArray,y=console.createTask?console.createTask:function(){return null};g={"react-stack-bottom-frame":function(e){return e()}};var L,D={},A=g["react-stack-bottom-frame"].bind(g,u)(),F=y(d(u)),J={};U.Fragment=k,U.jsx=function(e,n,c,r,b){var w=1e4>v.recentlyCreatedOwnerStacks++;return N(e,n,c,!1,r,b,w?Error("react-stack-top-frame"):A,w?y(d(e)):F)},U.jsxs=function(e,n,c,r,b){var w=1e4>v.recentlyCreatedOwnerStacks++;return N(e,n,c,!0,r,b,w?Error("react-stack-top-frame"):A,w?y(d(e)):F)}}()),U}var te;function le(){return te||(te=1,process.env.NODE_ENV==="production"?V.exports=ie():V.exports=ce()),V.exports}var a=le();const K=({classNames:t={wrapper:"",color:""}})=>a.jsxs("svg",{className:`nariaLoading ${t.wrapper}`,"data-prop":"wrapper",viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[a.jsx("path",{d:"M32 3C35.8083 3 39.5794 3.75011 43.0978 5.20749C46.6163 6.66488 49.8132 8.80101 52.5061 11.4939C55.199 14.1868 57.3351 17.3837 58.7925 20.9022C60.2499 24.4206 61 28.1917 61 32C61 35.8083 60.2499 39.5794 58.7925 43.0978C57.3351 46.6163 55.199 49.8132 52.5061 52.5061C49.8132 55.199 46.6163 57.3351 43.0978 58.7925C39.5794 60.2499 35.8083 61 32 61C28.1917 61 24.4206 60.2499 20.9022 58.7925C17.3837 57.3351 14.1868 55.199 11.4939 52.5061C8.801 49.8132 6.66487 46.6163 5.20749 43.0978C3.7501 39.5794 3 35.8083 3 32C3 28.1917 3.75011 24.4206 5.2075 20.9022C6.66489 17.3837 8.80101 14.1868 11.4939 11.4939C14.1868 8.80099 17.3838 6.66487 20.9022 5.20749C24.4206 3.7501 28.1917 3 32 3L32 3Z",stroke:"currentColor",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round"}),a.jsx("path",{d:"M32 3C36.5778 3 41.0906 4.08374 45.1692 6.16256C49.2477 8.24138 52.7762 11.2562 55.466 14.9605C58.1558 18.6647 59.9304 22.9531 60.6448 27.4748C61.3591 31.9965 60.9928 36.6232 59.5759 40.9762",stroke:"currentColor",strokeWidth:"6",strokeLinecap:"round",strokeLinejoin:"round",className:t.color,"data-prop":"color"})]}),ue=({type:t="button",classNames:i={button:"",loading:{wrapper:"",color:""}},value:o,icon:d=null,isLoading:s=!1,isDisabled:u=!1,...p})=>a.jsxs("button",{type:t,disabled:u,...p,className:`nariaButton ${u?"nariaButton-disabled":""} ${i?.button}`,"data-prop":"button",children:[s?a.jsx(K,{classNames:{wrapper:i.loading.wrapper,color:i.loading.color},"data-prop-wrapper":"wrapper","data-prop-color":"color"}):d,o]}),de=({type:t="text",placeholder:i,classNames:o={wrapper:"",label:"",input:"",errorText:""},label:d,hasError:s,register:u,name:p,isDisabled:h=!1,autocomplete:E=!1,...x})=>a.jsxs("div",{className:`nariaInputWrapper ${o.wrapper}`,"data-prop":"wrapper",children:[a.jsxs("label",{htmlFor:p,className:`${o.label} ${s&&"nariaInputLabel-error"}`,"data-prop":"label",children:[d,a.jsx("input",{disabled:h,autoComplete:E?"on":"off",id:p,...u,...x,type:t,name:p,className:`${o.input} ${s&&"nariaInput-error"}`,placeholder:i,"data-prop":"input"})]}),s&&a.jsx("p",{className:`nariaInputErrorText ${o?.errorText}`,"data-prop":"errorText",children:s})]}),ne=t=>P.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",...t},P.createElement("path",{fill:"currentColor",d:"M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z"})),fe=t=>P.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",...t},P.createElement("path",{fill:"currentColor",d:"M7.5 105c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l151 151 151-151c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-151 151 151 151c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-151-151-151 151c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l151-151-151-151z"})),ae=t=>P.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",fill:"currentColor",...t},P.createElement("path",{fill:"currentColor",d:"M368 208a160 160 0 1 0 -320 0 160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z"})),pe=()=>{const[t,i]=l.useState(typeof window<"u"?window.innerWidth:0),o=()=>i(typeof window<"u"?window.innerWidth:0);return l.useEffect(()=>(window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)),[t]),t},ge=()=>{const t=`${window.location.pathname}${window.location.search}`;window.history.replaceState(null,"",t)},me=t=>{window.location.hash=t},he=t=>{const[i,o]=l.useState(!1);return l.useEffect(()=>{const d=s=>{window.location.hash!==t?o(!0):o(!1)};return window.addEventListener("hashchange",d),()=>{window.removeEventListener("hashchange",d)}},[]),i},we=(t,i,o)=>{l.useEffect(()=>{function d(s){i.current&&!i.current.contains(s.target)&&t?.current&&!t?.current.contains(s.target)&&o()}return document.addEventListener("mousedown",d),()=>{document.removeEventListener("mousedown",d)}},[t,o])},ve=({options:t,label:i,hasError:o,title:d,value:s,api:u,selected:p,placeholder:h,disabled:E=!1,pagination:x,optionFilterLabel:N,hasSearch:S=!1,classNames:g={wrapper:"",label:"",title:"",button:"",input:"",listWrapper:"",list:"",option:"",optionActive:"",mobileHeader:""},onSelectChange:I})=>{let W=!0;const k=pe(),B=he("#select"),[R,O]=l.useState(!1),[G,z]=l.useState(!0),[f,M]=l.useState(null),[_,C]=l.useState(null),[q,T]=l.useState(""),[v,Y]=l.useState({page:1,pageLabel:"page",size:20,sizeLabel:"size",isLoading:!1}),j=l.useRef(void 0),y=l.useRef(void 0),L=l.useRef(void 0),D=async()=>{if(j?.current)try{const r=await fetch(j?.current);if(!r.ok)throw new Error(`Response status: ${r.status}`);return await r.json()}catch(r){console.error(r.message)}};l.useEffect(()=>()=>{W=!1},[]),l.useEffect(()=>{if(u?.length){if(j.current=u,j.current.includes(x?.pageLabel||"page")){const r=new URL(u);r.searchParams.set(x?.pageLabel||"page",(x?.page||v.page).toString()),r.searchParams.set(x?.sizeLabel||"size",(x?.size||v.size).toString()),j.current=r.href}z(!0),D().then(r=>{W&&(z(!1),C(r))})}},[u,x]),l.useEffect(()=>{if(v.isLoading){if(j.current.includes(x?.pageLabel||"page")){const r=new URL(j.current);r.searchParams.set(x?.pageLabel||"page",v.page.toString()),j.current=r.href}D().then(r=>{W&&(z(!1),Y({...v,isLoading:!1}),C([..._,...r]))})}},[v]),l.useEffect(()=>{k<768&&(R?(me("select"),document.body.style.overflow="hidden",L.current?.focus()):(window.location.hash&&!document.referrer.includes("#")&&ge(),document.body.style.overflow="auto"))},[R]),l.useEffect(()=>{p&&t?.length&&(t?.find(r=>r[i]===p)?M(t?.find(r=>r[i]===p)):M(p))},[p]),l.useEffect(()=>{f&&S&&(s?.length&&_?.find(r=>r[i]===f[i])?T(_?.find(r=>r[i]===f[i])[s]||""):T(f))},[f]),l.useEffect(()=>{B&&O(!1)},[B]),l.useEffect(()=>{t?.length&&C(t)},[t]);const A=()=>{S&&C(t),O(r=>!r)},F=()=>{S&&(C(t),T(typeof f=="string"?f:f?f[s]:"")),O(!1)},J=r=>{S&&(s?.length?T(r[s]):T(r)),M(r),A(),I&&I(r)},e=r=>{if(!f)return"";if(i?.length&&r[i]===f[i])return`nariaSelectOption-active ${g?.optionActive}`;if(r===f)return`nariaSelectOption-active ${g?.optionActive}`},n=r=>{u?.length&&_?.length&&!v.isLoading&&r.target.offsetHeight+r.target.scrollTop>=r.target.scrollHeight-100&&Y({page:v.page+1,isLoading:!0})},c=r=>{const b=r?.target?.value?.length?t.filter(w=>typeof w=="object"?w[N?.length?N:s].includes(r?.target?.value):w.includes(r?.target?.value)):t;C(b),T(r?.target?.value),R||O(!0)};return we(y,L,F),a.jsxs("div",{className:`nariaSelect ${E?"nariaSelect-disabled":""} ${g?.wrapper}`,"data-prop":"wrapper",children:[a.jsxs("label",{className:`${o&&"!text-danger-100"}
+                ${g?.label}`,"data-prop":"label",children:[a.jsx("span",{className:g?.title,"data-prop":"title",children:d}),S?a.jsxs("div",{className:"nariaSearchInput",children:[a.jsx("input",{ref:L,placeholder:h?.length?h:"Select",className:`${f?"text-dark-100":"text-grey-300"} 
+                                ${o&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${g?.input}`,value:q,disabled:E,type:"text",onClick:A,onChange:c,"data-prop":"input"}),R?a.jsx(ae,{className:"nariaSearchIcon"}):a.jsx(ne,{className:`nariaArrowIcon ${R?"nariaArrowIcon-rotate-180":""}`})]}):a.jsxs("button",{type:"button",ref:L,disabled:E,className:`nariaHandler ${f?"text-dark-100":"text-grey-300"} 
+                                ${o&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${g?.button}`,"data-prop":"button",onClick:A,children:[f?s?.length?f[s]:f:h?.length?h:"Select"," ",a.jsx(ne,{className:`nariaArrowIcon ${R?"nariaArrowIcon-rotate-180":""}`})]})]}),R?a.jsx("div",{className:`nariaListWrapper ${k<768?"nariaListWrapper-mobile":""} ${g?.listWrapper}`,"data-prop":"listWrapper",ref:y,children:a.jsx("div",{className:`nariaList ${k<768?"nariaList-mobile":"nariaList-desktop"} ${g?.list}`,"data-prop":"input",onScroll:n,children:u&&G?a.jsx("div",{className:"nariaLoadingWrapper",children:a.jsx(K,{})}):a.jsxs(a.Fragment,{children:[k<768?a.jsxs("div",{className:`nariaSelectMobileHeader ${g?.mobileHeader}`,"data-prop":"mobileHeader",children:[S?a.jsxs("div",{className:"nariaSearchInput",children:[a.jsx("input",{ref:L,placeholder:h?.length?h:"Select",className:`${f?"text-dark-100":"text-grey-300"} 
+                                                               ${o&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${g?.input}`,"data-prop":"input",value:q,disabled:E,type:"text",onChange:c}),a.jsx(ae,{className:"nariaSearchIcon"})]}):void 0,a.jsx("button",{className:"p-3",onClick:F,disabled:E,children:a.jsx(fe,{className:"w-6"})})]}):void 0,_?.length?a.jsx(a.Fragment,{children:_?.map((r,b)=>a.jsx("button",{type:"button",onClick:()=>J(r),disabled:E,className:`nariaSelectOption ${g?.option} ${e(r)}`,"data-prop":"option","data-prop-active":"optionActive",children:s?.length?r[s]:r},b.toString()))}):a.jsx("div",{children:"No Data"}),v.isLoading?a.jsx("div",{className:"nariaLoadingMoreWrapper",children:a.jsx(K,{})}):void 0]})})}):void 0,o&&a.jsx("p",{className:"text-xs mt-1 text-danger-100",children:o})]})};function be(t){return t.charAt(0).toUpperCase()+t.slice(1)}exports.Button=ue;exports.Input=de;exports.Select=ve;exports.capitalize=be;

package/dist/naria-ui.css

@@ -1 +1 @@
-.nariaLoading{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.nariaSelect{position:relative}.nariaSelect .nariaListWrapper{overflow:hidden}.nariaSelect .nariaListWrapper.nariaListWrapper-mobile{position:fixed;top:0;right:0;height:100%;width:100%;z-index:97}.nariaSelect .nariaList{display:flex;flex-direction:column;width:100%;z-index:99;position:relative;overflow:auto}.nariaSelect .nariaList.nariaList-mobile{position:relative;height:100%}.nariaSelect .nariaList.nariaList-desktop{position:absolute;animation:fadeInTranslateY .3s ease-out forwards;max-height:150px}.nariaSelect .nariaList .nariaLoadingWrapper{padding:24px 0;display:flex;justify-content:center}.nariaSelect .nariaList .nariaLoadingMoreWrapper{position:sticky;bottom:0;text-align:center;width:100%}.nariaSelect .nariaList .nariaLoadingMoreWrapper .nariaLoading{width:20px}.nariaSelect .nariaList .nariaSelectMobileHeader{position:sticky;top:0;justify-content:end;display:flex}.nariaSelect .nariaList .nariaSelectMobileHeader .nariaSearchInput{flex-grow:1}.nariaSelect .nariaSearchInput{position:relative;display:flex}.nariaSelect .nariaSearchInput input{width:100%}.nariaSelect .nariaSearchInput .nariaArrowIcon,.nariaSelect .nariaSearchInput .nariaSearchIcon{position:absolute;bottom:0;margin-top:auto;margin-bottom:auto;top:0;right:0;width:12px;height:12px;z-index:1}.nariaSelect .nariaHandler{position:relative;display:flex;gap:4px;width:100%;align-items:center;justify-content:space-between}.nariaSelect .nariaHandler .nariaArrowIcon{width:12px;height:12px;transition:transform .4s;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0)}.nariaSelect .nariaHandler .nariaArrowIcon.nariaArrowIcon-rotate-180{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}html[dir=rtl] .nariaSelect .nariaSearchInput .nariaArrowIcon,html[dir=rtl] .nariaSelect .nariaSearchInput .nariaSearchIcon{left:0;right:auto}@keyframes fadeInTranslateY{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
+.nariaButton{display:flex;align-items:center;width:100%}.nariaButton .nariaLoading{width:14px;height:14px}.nariaLoading{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.nariaSelect{position:relative}.nariaSelect .nariaListWrapper{overflow:hidden}.nariaSelect .nariaListWrapper.nariaListWrapper-mobile{position:fixed;top:0;right:0;height:100%;width:100%;z-index:97}.nariaSelect .nariaList{display:flex;flex-direction:column;width:100%;z-index:99;position:relative;overflow:auto}.nariaSelect .nariaList.nariaList-mobile{position:relative;height:100%}.nariaSelect .nariaList.nariaList-desktop{position:absolute;animation:fadeInTranslateY .3s ease-out forwards;max-height:150px}.nariaSelect .nariaList .nariaLoadingWrapper{padding:24px 0;display:flex;justify-content:center}.nariaSelect .nariaList .nariaLoadingMoreWrapper{position:sticky;bottom:0;text-align:center;width:100%}.nariaSelect .nariaList .nariaLoadingMoreWrapper .nariaLoading{width:20px}.nariaSelect .nariaList .nariaSelectMobileHeader{position:sticky;top:0;justify-content:end;display:flex;gap:8px}.nariaSelect .nariaList .nariaSelectMobileHeader .nariaSearchInput{flex-grow:1}.nariaSelect .nariaSearchInput{position:relative;display:flex}.nariaSelect .nariaSearchInput input{width:100%}.nariaSelect .nariaSearchInput .nariaArrowIcon,.nariaSelect .nariaSearchInput .nariaSearchIcon{position:absolute;bottom:0;margin-top:auto;margin-bottom:auto;top:0;right:0;width:12px;height:12px;z-index:1}.nariaSelect .nariaHandler{position:relative;display:flex;gap:4px;width:100%;align-items:center;justify-content:space-between}.nariaSelect .nariaHandler .nariaArrowIcon{width:12px;height:12px;transition:transform .4s;-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0)}.nariaSelect .nariaHandler .nariaArrowIcon.nariaArrowIcon-rotate-180{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}html[dir=rtl] .nariaSelect .nariaSearchInput .nariaArrowIcon,html[dir=rtl] .nariaSelect .nariaSearchInput .nariaSearchIcon{left:0;right:auto}@keyframes fadeInTranslateY{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

package/dist/naria-ui.es.js

@@ -1,6 +1,6 @@
-import * as $ from "react";
-import ce, { useState as y, useEffect as x, useRef as ee } from "react";
-var G = { exports: {} }, H = {};
+import * as P from "react";
+import le, { useState as A, useEffect as x, useRef as ee } from "react";
+var G = { exports: {} }, U = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -10,29 +10,29 @@ var G = { exports: {} }, H = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var re;
-function le() {
-  if (re) return H;
-  re = 1;
+var te;
+function ce() {
+  if (te) return U;
+  te = 1;
   var t = Symbol.for("react.transitional.element"), i = Symbol.for("react.fragment");
-  function c(f, o, u) {
-    var p = null;
-    if (u !== void 0 && (p = "" + u), o.key !== void 0 && (p = "" + o.key), "key" in o) {
-      u = {};
-      for (var g in o)
-        g !== "key" && (u[g] = o[g]);
-    } else u = o;
-    return o = u.ref, {
+  function s(d, o, c) {
+    var f = null;
+    if (c !== void 0 && (f = "" + c), o.key !== void 0 && (f = "" + o.key), "key" in o) {
+      c = {};
+      for (var m in o)
+        m !== "key" && (c[m] = o[m]);
+    } else c = o;
+    return o = c.ref, {
       $$typeof: t,
-      type: f,
-      key: p,
+      type: d,
+      key: f,
       ref: o !== void 0 ? o : null,
-      props: u
+      props: c
     };
   }
-  return H.Fragment = i, H.jsx = c, H.jsxs = c, H;
+  return U.Fragment = i, U.jsx = s, U.jsxs = s, U;
 }
-var J = {};
+var B = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -42,26 +42,26 @@ var J = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var te;
+var ne;
 function ue() {
-  return te || (te = 1, process.env.NODE_ENV !== "production" && function() {
+  return ne || (ne = 1, process.env.NODE_ENV !== "production" && function() {
     function t(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === S ? null : e.displayName || e.name || null;
+        return e.$$typeof === T ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case _:
+        case k:
           return "Fragment";
         case C:
           return "Profiler";
-        case q:
+        case J:
           return "StrictMode";
-        case l:
+        case u:
           return "Suspense";
         case M:
           return "SuspenseList";
-        case B:
+        case q:
           return "Activity";
       }
       if (typeof e == "object")
@@ -72,14 +72,14 @@ function ue() {
             return "Portal";
           case X:
             return (e.displayName || "Context") + ".Provider";
-          case A:
+          case O:
             return (e._context.displayName || "Context") + ".Consumer";
           case Y:
             var n = e.render;
             return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case T:
+          case _:
             return n = e.displayName || null, n !== null ? n : t(e.type) || "Memo";
-          case k:
+          case S:
             n = e._payload, e = e._init;
             try {
               return t(e(n));
@@ -91,7 +91,7 @@ function ue() {
     function i(e) {
       return "" + e;
     }
-    function c(e) {
+    function s(e) {
       try {
         i(e);
         var n = !1;
@@ -100,17 +100,17 @@ function ue() {
       }
       if (n) {
         n = console;
-        var s = n.error, r = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return s.call(
+        var l = n.error, r = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return l.call(
           n,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           r
         ), i(e);
       }
     }
-    function f(e) {
-      if (e === _) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === k)
+    function d(e) {
+      if (e === k) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === S)
         return "<...>";
       try {
         var n = t(e);
@@ -123,25 +123,25 @@ function ue() {
       var e = w.A;
       return e === null ? null : e.getOwner();
     }
-    function u() {
+    function c() {
       return Error("react-stack-top-frame");
     }
-    function p(e) {
+    function f(e) {
       if (D.call(e, "key")) {
         var n = Object.getOwnPropertyDescriptor(e, "key").get;
         if (n && n.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function g(e, n) {
-      function s() {
+    function m(e, n) {
+      function l() {
         L || (L = !0, 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)",
           n
         ));
       }
-      s.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: s,
+      l.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: l,
         configurable: !0
       });
     }
@@ -151,14 +151,14 @@ function ue() {
         "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."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function b(e, n, s, r, v, h, Z, Q) {
-      return s = h.ref, e = {
+    function b(e, n, l, r, v, h, Z, Q) {
+      return l = h.ref, e = {
         $$typeof: W,
         type: e,
         key: n,
         props: h,
         _owner: v
-      }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
+      }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
         get: E
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
@@ -183,25 +183,25 @@ function ue() {
         value: Q
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function I(e, n, s, r, v, h, Z, Q) {
-      var d = n.children;
-      if (d !== void 0)
+    function I(e, n, l, r, v, h, Z, Q) {
+      var g = n.children;
+      if (g !== void 0)
         if (r)
-          if (R(d)) {
-            for (r = 0; r < d.length; r++)
-              j(d[r]);
-            Object.freeze && Object.freeze(d);
+          if (R(g)) {
+            for (r = 0; r < g.length; r++)
+              j(g[r]);
+            Object.freeze && Object.freeze(g);
           } 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 j(d);
+        else j(g);
       if (D.call(n, "key")) {
-        d = t(e);
-        var P = Object.keys(n).filter(function(ie) {
+        g = t(e);
+        var N = Object.keys(n).filter(function(ie) {
           return ie !== "key";
         });
-        r = 0 < P.length ? "{key: someKey, " + P.join(": ..., ") + ": ...}" : "{key: someKey}", V[d + r] || (P = 0 < P.length ? "{" + P.join(": ..., ") + ": ...}" : "{}", console.error(
+        r = 0 < N.length ? "{key: someKey, " + N.join(": ..., ") + ": ...}" : "{key: someKey}", V[g + r] || (N = 0 < N.length ? "{" + N.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -209,26 +209,26 @@ React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
           r,
-          d,
-          P,
-          d
-        ), V[d + r] = !0);
+          g,
+          N,
+          g
+        ), V[g + r] = !0);
       }
-      if (d = null, s !== void 0 && (c(s), d = "" + s), p(n) && (c(n.key), d = "" + n.key), "key" in n) {
-        s = {};
+      if (g = null, l !== void 0 && (s(l), g = "" + l), f(n) && (s(n.key), g = "" + n.key), "key" in n) {
+        l = {};
         for (var K in n)
-          K !== "key" && (s[K] = n[K]);
-      } else s = n;
-      return d && g(
-        s,
+          K !== "key" && (l[K] = n[K]);
+      } else l = n;
+      return g && m(
+        l,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
       ), b(
         e,
-        d,
+        g,
         h,
         v,
         o(),
-        s,
+        l,
         Z,
         Q
       );
@@ -236,95 +236,51 @@ React keys must be passed directly to JSX without using spread:
     function j(e) {
       typeof e == "object" && e !== null && e.$$typeof === W && e._store && (e._store.validated = 1);
     }
-    var m = ce, W = Symbol.for("react.transitional.element"), z = Symbol.for("react.portal"), _ = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), C = Symbol.for("react.profiler"), A = Symbol.for("react.consumer"), X = Symbol.for("react.context"), Y = Symbol.for("react.forward_ref"), l = Symbol.for("react.suspense"), M = Symbol.for("react.suspense_list"), T = Symbol.for("react.memo"), k = Symbol.for("react.lazy"), B = Symbol.for("react.activity"), S = Symbol.for("react.client.reference"), w = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, D = Object.prototype.hasOwnProperty, R = Array.isArray, N = console.createTask ? console.createTask : function() {
+    var p = le, W = Symbol.for("react.transitional.element"), z = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), C = Symbol.for("react.profiler"), O = Symbol.for("react.consumer"), X = Symbol.for("react.context"), Y = Symbol.for("react.forward_ref"), u = Symbol.for("react.suspense"), M = Symbol.for("react.suspense_list"), _ = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), q = Symbol.for("react.activity"), T = Symbol.for("react.client.reference"), w = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, D = Object.prototype.hasOwnProperty, R = Array.isArray, $ = console.createTask ? console.createTask : function() {
       return null;
     };
-    m = {
+    p = {
       "react-stack-bottom-frame": function(e) {
         return e();
       }
     };
-    var L, F = {}, O = m["react-stack-bottom-frame"].bind(
-      m,
-      u
-    )(), U = N(f(u)), V = {};
-    J.Fragment = _, J.jsx = function(e, n, s, r, v) {
+    var L, F = {}, y = p["react-stack-bottom-frame"].bind(
+      p,
+      c
+    )(), H = $(d(c)), V = {};
+    B.Fragment = k, B.jsx = function(e, n, l, r, v) {
       var h = 1e4 > w.recentlyCreatedOwnerStacks++;
       return I(
         e,
         n,
-        s,
+        l,
         !1,
         r,
         v,
-        h ? Error("react-stack-top-frame") : O,
-        h ? N(f(e)) : U
+        h ? Error("react-stack-top-frame") : y,
+        h ? $(d(e)) : H
       );
-    }, J.jsxs = function(e, n, s, r, v) {
+    }, B.jsxs = function(e, n, l, r, v) {
       var h = 1e4 > w.recentlyCreatedOwnerStacks++;
       return I(
         e,
         n,
-        s,
+        l,
         !0,
         r,
         v,
-        h ? Error("react-stack-top-frame") : O,
-        h ? N(f(e)) : U
+        h ? Error("react-stack-top-frame") : y,
+        h ? $(d(e)) : H
       );
     };
-  }()), J;
+  }()), B;
 }
-var ne;
+var ae;
 function de() {
-  return ne || (ne = 1, process.env.NODE_ENV === "production" ? G.exports = le() : G.exports = ue()), G.exports;
+  return ae || (ae = 1, process.env.NODE_ENV === "production" ? G.exports = ce() : G.exports = ue()), G.exports;
 }
 var a = de();
-const be = ({ type: t = "button", value: i }) => /* @__PURE__ */ a.jsx("button", { type: t, children: i }), xe = ({
-  type: t = "text",
-  placeholder: i,
-  classNames: c = {
-    wrapper: "",
-    label: "",
-    input: ""
-  },
-  label: f,
-  hasError: o,
-  register: u,
-  name: p,
-  isDisabled: g = !1,
-  autocomplete: E = !1,
-  ...b
-}) => /* @__PURE__ */ a.jsxs("div", { className: `nariaInputWrapper ${c.wrapper}`, children: [
-  /* @__PURE__ */ a.jsxs(
-    "label",
-    {
-      htmlFor: p,
-      className: `${c.label} ${o && "nariaInputLabel-error"}`,
-      children: [
-        f,
-        /* @__PURE__ */ a.jsx(
-          "input",
-          {
-            disabled: g,
-            autoComplete: E ? "on" : "off",
-            id: p,
-            ...u,
-            ...b,
-            type: t,
-            name: p,
-            className: `${c.input} ${o && "nariaInput-error"}`,
-            placeholder: i
-          }
-        )
-      ]
-    }
-  ),
-  o && /* @__PURE__ */ a.jsx("p", { className: "nariaInputErrorText", children: o })
-] }), ae = (t) => /* @__PURE__ */ $.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", fill: "currentColor", ...t }, /* @__PURE__ */ $.createElement("path", { fill: "currentColor", d: "M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z" })), fe = (t) => /* @__PURE__ */ $.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", fill: "currentColor", ...t }, /* @__PURE__ */ $.createElement("path", { fill: "currentColor", d: "M7.5 105c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l151 151 151-151c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-151 151 151 151c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-151-151-151 151c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l151-151-151-151z" })), oe = (t) => /* @__PURE__ */ $.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", fill: "currentColor", ...t }, /* @__PURE__ */ $.createElement("path", { fill: "currentColor", d: "M368 208a160 160 0 1 0 -320 0 160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z" })), pe = () => {
-  const [t, i] = y(typeof window < "u" ? window.innerWidth : 0), c = () => i(typeof window < "u" ? window.innerWidth : 0);
-  return x(() => (window.addEventListener("resize", c), () => window.removeEventListener("resize", c)), [t]), t;
-}, se = ({
+const re = ({
   classNames: t = {
     wrapper: "",
     color: ""
@@ -333,6 +289,7 @@ const be = ({ type: t = "button", value: i }) => /* @__PURE__ */ a.jsx("button",
   "svg",
   {
     className: `nariaLoading ${t.wrapper}`,
+    "data-prop": "wrapper",
     viewBox: "0 0 64 64",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
@@ -355,49 +312,127 @@ const be = ({ type: t = "button", value: i }) => /* @__PURE__ */ a.jsx("button",
           strokeWidth: "6",
           strokeLinecap: "round",
           strokeLinejoin: "round",
-          className: t.color
+          className: t.color,
+          "data-prop": "color"
         }
       )
     ]
   }
-), ge = () => {
+), be = ({
+  type: t = "button",
+  classNames: i = {
+    button: "",
+    loading: {
+      wrapper: "",
+      color: ""
+    }
+  },
+  value: s,
+  icon: d = null,
+  isLoading: o = !1,
+  isDisabled: c = !1,
+  ...f
+}) => /* @__PURE__ */ a.jsxs(
+  "button",
+  {
+    type: t,
+    disabled: c,
+    ...f,
+    className: `nariaButton ${c ? "nariaButton-disabled" : ""} ${i?.button}`,
+    "data-prop": "button",
+    children: [
+      o ? /* @__PURE__ */ a.jsx(re, { classNames: {
+        wrapper: i.loading.wrapper,
+        color: i.loading.color
+      }, "data-prop-wrapper": "wrapper", "data-prop-color": "color" }) : d,
+      s
+    ]
+  }
+), xe = ({
+  type: t = "text",
+  placeholder: i,
+  classNames: s = {
+    wrapper: "",
+    label: "",
+    input: "",
+    errorText: ""
+  },
+  label: d,
+  hasError: o,
+  register: c,
+  name: f,
+  isDisabled: m = !1,
+  autocomplete: E = !1,
+  ...b
+}) => /* @__PURE__ */ a.jsxs("div", { className: `nariaInputWrapper ${s.wrapper}`, "data-prop": "wrapper", children: [
+  /* @__PURE__ */ a.jsxs(
+    "label",
+    {
+      htmlFor: f,
+      className: `${s.label} ${o && "nariaInputLabel-error"}`,
+      "data-prop": "label",
+      children: [
+        d,
+        /* @__PURE__ */ a.jsx(
+          "input",
+          {
+            disabled: m,
+            autoComplete: E ? "on" : "off",
+            id: f,
+            ...c,
+            ...b,
+            type: t,
+            name: f,
+            className: `${s.input} ${o && "nariaInput-error"}`,
+            placeholder: i,
+            "data-prop": "input"
+          }
+        )
+      ]
+    }
+  ),
+  o && /* @__PURE__ */ a.jsx("p", { className: `nariaInputErrorText ${s?.errorText}`, "data-prop": "errorText", children: o })
+] }), oe = (t) => /* @__PURE__ */ P.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", fill: "currentColor", ...t }, /* @__PURE__ */ P.createElement("path", { fill: "currentColor", d: "M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z" })), fe = (t) => /* @__PURE__ */ P.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", fill: "currentColor", ...t }, /* @__PURE__ */ P.createElement("path", { fill: "currentColor", d: "M7.5 105c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l151 151 151-151c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-151 151 151 151c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-151-151-151 151c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l151-151-151-151z" })), se = (t) => /* @__PURE__ */ P.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", fill: "currentColor", ...t }, /* @__PURE__ */ P.createElement("path", { fill: "currentColor", d: "M368 208a160 160 0 1 0 -320 0 160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z" })), pe = () => {
+  const [t, i] = A(typeof window < "u" ? window.innerWidth : 0), s = () => i(typeof window < "u" ? window.innerWidth : 0);
+  return x(() => (window.addEventListener("resize", s), () => window.removeEventListener("resize", s)), [t]), t;
+}, ge = () => {
   const t = `${window.location.pathname}${window.location.search}`;
   window.history.replaceState(null, "", t);
 }, me = (t) => {
   window.location.hash = t;
 }, he = (t) => {
-  const [i, c] = y(!1);
+  const [i, s] = A(!1);
   return x(() => {
-    const f = (o) => {
-      window.location.hash !== t ? c(!0) : c(!1);
+    const d = (o) => {
+      window.location.hash !== t ? s(!0) : s(!1);
     };
-    return window.addEventListener("hashchange", f), () => {
-      window.removeEventListener("hashchange", f);
+    return window.addEventListener("hashchange", d), () => {
+      window.removeEventListener("hashchange", d);
     };
   }, []), i;
-}, we = (t, i, c) => {
+}, we = (t, i, s) => {
   x(() => {
-    function f(o) {
-      i.current && !i.current.contains(o.target) && t?.current && !t?.current.contains(o.target) && c();
+    function d(o) {
+      i.current && !i.current.contains(o.target) && t?.current && !t?.current.contains(o.target) && s();
     }
-    return document.addEventListener("mousedown", f), () => {
-      document.removeEventListener("mousedown", f);
+    return document.addEventListener("mousedown", d), () => {
+      document.removeEventListener("mousedown", d);
     };
-  }, [t, c]);
+  }, [t, s]);
 }, Ee = ({
   options: t,
   label: i,
-  hasError: c,
-  title: f,
+  hasError: s,
+  title: d,
   value: o,
-  api: u,
-  selected: p,
-  placeholder: g,
+  api: c,
+  selected: f,
+  placeholder: m,
   disabled: E = !1,
   pagination: b,
   optionFilterLabel: I,
   hasSearch: j = !1,
-  classNames: m = {
+  classNames: p = {
     wrapper: "",
     label: "",
     title: "",
@@ -405,18 +440,20 @@ const be = ({ type: t = "button", value: i }) => /* @__PURE__ */ a.jsx("button",
     input: "",
     listWrapper: "",
     list: "",
-    option: ""
+    option: "",
+    optionActive: "",
+    mobileHeader: ""
   },
   onSelectChange: W
 }) => {
   let z = !0;
-  const _ = pe(), q = he("#select"), [C, A] = y(!1), [X, Y] = y(!0), [l, M] = y(null), [T, k] = y(null), [B, S] = y(""), [w, D] = y({
+  const k = pe(), J = he("#select"), [C, O] = A(!1), [X, Y] = A(!0), [u, M] = A(null), [_, S] = A(null), [q, T] = A(""), [w, D] = A({
     page: 1,
     pageLabel: "page",
     size: 20,
     sizeLabel: "size",
     isLoading: !1
-  }), R = ee(void 0), N = ee(void 0), L = ee(void 0), F = async () => {
+  }), R = ee(void 0), $ = ee(void 0), L = ee(void 0), F = async () => {
     if (R?.current)
       try {
         const r = await fetch(R?.current);
@@ -430,16 +467,16 @@ const be = ({ type: t = "button", value: i }) => /* @__PURE__ */ a.jsx("button",
   x(() => () => {
     z = !1;
   }, []), x(() => {
-    if (u?.length) {
-      if (R.current = u, R.current.includes(b?.pageLabel || "page")) {
-        const r = new URL(u);
+    if (c?.length) {
+      if (R.current = c, R.current.includes(b?.pageLabel || "page")) {
+        const r = new URL(c);
         r.searchParams.set(b?.pageLabel || "page", (b?.page || w.page).toString()), r.searchParams.set(b?.sizeLabel || "size", (b?.size || w.size).toString()), R.current = r.href;
       }
       Y(!0), F().then((r) => {
-        z && (Y(!1), k(r));
+        z && (Y(!1), S(r));
       });
     }
-  }, [u, b]), x(() => {
+  }, [c, b]), x(() => {
     if (w.isLoading) {
       if (R.current.includes(b?.pageLabel || "page")) {
         const r = new URL(R.current);
@@ -449,81 +486,82 @@ const be = ({ type: t = "button", value: i }) => /* @__PURE__ */ a.jsx("button",
         z && (Y(!1), D({
           ...w,
           isLoading: !1
-        }), k([
-          ...T,
+        }), S([
+          ..._,
           ...r
         ]));
       });
     }
   }, [w]), x(() => {
-    _ < 768 && (C ? (me("select"), document.body.style.overflow = "hidden", L.current?.focus()) : (window.location.hash && !document.referrer.includes("#") && ge(), document.body.style.overflow = "auto"));
+    k < 768 && (C ? (me("select"), document.body.style.overflow = "hidden", L.current?.focus()) : (window.location.hash && !document.referrer.includes("#") && ge(), document.body.style.overflow = "auto"));
   }, [C]), x(() => {
-    p && t?.length && (t?.find((r) => r[i] === p) ? M(t?.find((r) => r[i] === p)) : M(p));
-  }, [p]), x(() => {
-    l && j && (o?.length && T?.find((r) => r[i] === l[i]) ? S(T?.find((r) => r[i] === l[i])[o] || "") : S(l));
-  }, [l]), x(() => {
-    q && A(!1);
-  }, [q]), x(() => {
-    t?.length && k(t);
+    f && t?.length && (t?.find((r) => r[i] === f) ? M(t?.find((r) => r[i] === f)) : M(f));
+  }, [f]), x(() => {
+    u && j && (o?.length && _?.find((r) => r[i] === u[i]) ? T(_?.find((r) => r[i] === u[i])[o] || "") : T(u));
+  }, [u]), x(() => {
+    J && O(!1);
+  }, [J]), x(() => {
+    t?.length && S(t);
   }, [t]);
-  const O = () => {
-    j && k(t), A((r) => !r);
-  }, U = () => {
-    j && (k(t), S(typeof l == "string" ? l : l ? l[o] : "")), A(!1);
+  const y = () => {
+    j && S(t), O((r) => !r);
+  }, H = () => {
+    j && (S(t), T(typeof u == "string" ? u : u ? u[o] : "")), O(!1);
   }, V = (r) => {
-    j && (o?.length ? S(r[o]) : S(r)), M(r), O(), W && W(r);
+    j && (o?.length ? T(r[o]) : T(r)), M(r), y(), W && W(r);
   }, e = (r) => {
-    if (!l)
+    if (!u)
       return "";
-    if (i?.length && r[i] === l[i] || r === l)
-      return "bg-grey-100";
+    if (i?.length && r[i] === u[i])
+      return `nariaSelectOption-active ${p?.optionActive}`;
+    if (r === u)
+      return `nariaSelectOption-active ${p?.optionActive}`;
   }, n = (r) => {
-    u?.length && T?.length && !w.isLoading && r.target.offsetHeight + r.target.scrollTop >= r.target.scrollHeight - 100 && D({
+    c?.length && _?.length && !w.isLoading && r.target.offsetHeight + r.target.scrollTop >= r.target.scrollHeight - 100 && D({
       page: w.page + 1,
       isLoading: !0
     });
-  }, s = (r) => {
+  }, l = (r) => {
     const v = r?.target?.value?.length ? t.filter((h) => typeof h == "object" ? h[I?.length ? I : o].includes(r?.target?.value) : h.includes(r?.target?.value)) : t;
-    k(v), S(r?.target?.value), C || A(!0);
+    S(v), T(r?.target?.value), C || O(!0);
   };
-  return we(N, L, U), /* @__PURE__ */ a.jsxs(
+  return we($, L, H), /* @__PURE__ */ a.jsxs(
     "div",
     {
-      className: `nariaSelect ${E ? "nariaSelect-disabled" : ""} ${m?.wrapper}`,
+      className: `nariaSelect ${E ? "nariaSelect-disabled" : ""} ${p?.wrapper}`,
       "data-prop": "wrapper",
       children: [
         /* @__PURE__ */ a.jsxs(
           "label",
           {
-            className: `cursor-pointer
-                ${c && "!text-danger-100"}
-                ${m?.label}`,
+            className: `${s && "!text-danger-100"}
+                ${p?.label}`,
             "data-prop": "label",
             children: [
-              /* @__PURE__ */ a.jsx("span", { className: m?.title, "data-prop": "title", children: f }),
+              /* @__PURE__ */ a.jsx("span", { className: p?.title, "data-prop": "title", children: d }),
               j ? /* @__PURE__ */ a.jsxs("div", { className: "nariaSearchInput", children: [
                 /* @__PURE__ */ a.jsx(
                   "input",
                   {
                     ref: L,
-                    placeholder: g?.length ? g : "Select",
-                    className: `${l ? "text-dark-100" : "text-grey-300"} 
-                                ${c && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${m?.input}`,
-                    value: B,
+                    placeholder: m?.length ? m : "Select",
+                    className: `${u ? "text-dark-100" : "text-grey-300"} 
+                                ${s && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${p?.input}`,
+                    value: q,
                     disabled: E,
                     type: "text",
-                    onClick: O,
-                    onChange: s,
+                    onClick: y,
+                    onChange: l,
                     "data-prop": "input"
                   }
                 ),
                 C ? /* @__PURE__ */ a.jsx(
-                  oe,
+                  se,
                   {
                     className: "nariaSearchIcon"
                   }
                 ) : /* @__PURE__ */ a.jsx(
-                  ae,
+                  oe,
                   {
                     className: `nariaArrowIcon ${C ? "nariaArrowIcon-rotate-180" : ""}`
                   }
@@ -534,15 +572,15 @@ const be = ({ type: t = "button", value: i }) => /* @__PURE__ */ a.jsx("button",
                   type: "button",
                   ref: L,
                   disabled: E,
-                  className: `nariaHandler ${l ? "text-dark-100" : "text-grey-300"} 
-                                ${c && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${m?.button}`,
+                  className: `nariaHandler ${u ? "text-dark-100" : "text-grey-300"} 
+                                ${s && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${p?.button}`,
                   "data-prop": "button",
-                  onClick: O,
+                  onClick: y,
                   children: [
-                    l ? o?.length ? l[o] : l : g?.length ? g : "Select",
+                    u ? o?.length ? u[o] : u : m?.length ? m : "Select",
                     " ",
                     /* @__PURE__ */ a.jsx(
-                      ae,
+                      oe,
                       {
                         className: `nariaArrowIcon ${C ? "nariaArrowIcon-rotate-180" : ""}`
                       }
@@ -556,60 +594,68 @@ const be = ({ type: t = "button", value: i }) => /* @__PURE__ */ a.jsx("button",
         C ? /* @__PURE__ */ a.jsx(
           "div",
           {
-            className: `nariaListWrapper ${_ < 768 ? "nariaListWrapper-mobile" : ""} ${m?.listWrapper}`,
+            className: `nariaListWrapper ${k < 768 ? "nariaListWrapper-mobile" : ""} ${p?.listWrapper}`,
             "data-prop": "listWrapper",
-            ref: N,
+            ref: $,
             children: /* @__PURE__ */ a.jsx(
               "div",
               {
-                className: `nariaList ${_ < 768 ? "nariaList-mobile" : "nariaList-desktop"} ${m?.list}`,
+                className: `nariaList ${k < 768 ? "nariaList-mobile" : "nariaList-desktop"} ${p?.list}`,
                 "data-prop": "input",
                 onScroll: n,
-                children: u && X ? /* @__PURE__ */ a.jsx("div", { className: "nariaLoadingWrapper", children: /* @__PURE__ */ a.jsx(se, {}) }) : /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
-                  _ < 768 ? /* @__PURE__ */ a.jsxs("div", { className: "nariaSelectMobileHeader", children: [
-                    j ? /* @__PURE__ */ a.jsxs("div", { className: "nariaSearchInput", children: [
-                      /* @__PURE__ */ a.jsx(
-                        "input",
-                        {
-                          ref: L,
-                          placeholder: g?.length ? g : "Select",
-                          className: `${l ? "text-dark-100" : "text-grey-300"} 
-                                                               ${c && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${m?.input}`,
-                          "data-prop": "input",
-                          value: B,
-                          disabled: E,
-                          type: "text",
-                          onChange: s
-                        }
-                      ),
-                      /* @__PURE__ */ a.jsx(
-                        oe,
-                        {
-                          className: "nariaSearchIcon"
-                        }
-                      )
-                    ] }) : void 0,
-                    /* @__PURE__ */ a.jsx("button", { className: "p-3", onClick: U, disabled: E, children: /* @__PURE__ */ a.jsx(fe, { className: "w-6" }) })
-                  ] }) : void 0,
-                  T?.length ? /* @__PURE__ */ a.jsx(a.Fragment, { children: T?.map((r, v) => /* @__PURE__ */ a.jsx(
+                children: c && X ? /* @__PURE__ */ a.jsx("div", { className: "nariaLoadingWrapper", children: /* @__PURE__ */ a.jsx(re, {}) }) : /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+                  k < 768 ? /* @__PURE__ */ a.jsxs(
+                    "div",
+                    {
+                      className: `nariaSelectMobileHeader ${p?.mobileHeader}`,
+                      "data-prop": "mobileHeader",
+                      children: [
+                        j ? /* @__PURE__ */ a.jsxs("div", { className: "nariaSearchInput", children: [
+                          /* @__PURE__ */ a.jsx(
+                            "input",
+                            {
+                              ref: L,
+                              placeholder: m?.length ? m : "Select",
+                              className: `${u ? "text-dark-100" : "text-grey-300"} 
+                                                               ${s && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${p?.input}`,
+                              "data-prop": "input",
+                              value: q,
+                              disabled: E,
+                              type: "text",
+                              onChange: l
+                            }
+                          ),
+                          /* @__PURE__ */ a.jsx(
+                            se,
+                            {
+                              className: "nariaSearchIcon"
+                            }
+                          )
+                        ] }) : void 0,
+                        /* @__PURE__ */ a.jsx("button", { className: "p-3", onClick: H, disabled: E, children: /* @__PURE__ */ a.jsx(fe, { className: "w-6" }) })
+                      ]
+                    }
+                  ) : void 0,
+                  _?.length ? /* @__PURE__ */ a.jsx(a.Fragment, { children: _?.map((r, v) => /* @__PURE__ */ a.jsx(
                     "button",
                     {
                       type: "button",
                       onClick: () => V(r),
                       disabled: E,
-                      className: `${m?.option} ${e(r)}`,
+                      className: `nariaSelectOption ${p?.option} ${e(r)}`,
                       "data-prop": "option",
+                      "data-prop-active": "optionActive",
                       children: o?.length ? r[o] : r
                     },
                     v.toString()
                   )) }) : /* @__PURE__ */ a.jsx("div", { children: "No Data" }),
-                  w.isLoading ? /* @__PURE__ */ a.jsx("div", { className: "nariaLoadingMoreWrapper", children: /* @__PURE__ */ a.jsx(se, {}) }) : void 0
+                  w.isLoading ? /* @__PURE__ */ a.jsx("div", { className: "nariaLoadingMoreWrapper", children: /* @__PURE__ */ a.jsx(re, {}) }) : void 0
                 ] })
               }
             )
           }
         ) : void 0,
-        c && /* @__PURE__ */ a.jsx("p", { className: "text-xs mt-1 text-danger-100", children: c })
+        s && /* @__PURE__ */ a.jsx("p", { className: "text-xs mt-1 text-danger-100", children: s })
       ]
     }
   );

package/package.json

@@ -5,19 +5,18 @@
     "name": "Mohammad Mehdi Mohammadi",
     "url": ""
   },
-  "version": "0.1.48",
+  "version": "0.1.50",
   "type": "module",
-  "main": "dist/naria-ui.cjs.js",
-  "module": "dist/naria-ui.es.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/naria-ui.cjs.js",
+  "module": "./dist/naria-ui.es.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/naria-ui.es.js",
       "require": "./dist/naria-ui.cjs.js"
     },
-    "./dist/*.css": "./dist/*.css",
-    "./assets/*.css": "./assets/*.css"
+    "./*": "./*"
   },
   "files": [
     "dist"
@@ -30,7 +29,8 @@
     "build": "vite build",
     "tsc": "tsc -p tsconfig.build.json",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "sass-prod": "sass --no-source-map --style=compressed public"
   },
   "dependencies": {
     "vite-plugin-svgr": "^4.5.0"