naria-ui 0.1.47 → 0.1.49

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

@@ -1,10 +1,11 @@
 import { FC } from 'react';
 export interface props {
     type?: "password" | "text";
-    wrapperClass?: string;
-    labelClass?: string;
-    inputClass?: string;
-    errorClass?: string;
+    classNames?: {
+        wrapper?: string;
+        label?: string;
+        input?: string;
+    };
     placeholder: string;
     label: string;
     hasError?: string | null;

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

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

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(r){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const s in r)if(s!=="default"){const d=Object.getOwnPropertyDescriptor(r,s);Object.defineProperty(a,s,d.get?d:{enumerable:!0,get:()=>r[s]})}}return a.default=r,Object.freeze(a)}const $=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 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:{}},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 ce(){if(K)return U;K=1;var r=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function s(d,c,u){var v=null;if(u!==void 0&&(v=""+u),c.key!==void 0&&(v=""+c.key),"key"in c){u={};for(var g in c)g!=="key"&&(u[g]=c[g])}else u=c;return c=u.ref,{$$typeof:r,type:d,key:v,ref:c!==void 0?c:null,props:u}}return U.Fragment=a,U.jsx=s,U.jsxs=s,U}var H={};/**
+ */var K;function ie(){if(K)return H;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 h in o)h!=="key"&&(f[h]=o[h])}else f=o;return o=f.ref,{$$typeof:t,type:d,key:g,ref:o!==void 0?o:null,props:f}}return H.Fragment=i,H.jsx=s,H.jsxs=s,H}var U={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,14 +14,14 @@
  *
  * 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 ie(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===_?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case S:return"Fragment";case C:return"Profiler";case q:return"StrictMode";case f: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 z:return"Portal";case G:return(e.displayName||"Context")+".Provider";case O:return(e._context.displayName||"Context")+".Consumer";case W:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case T:return n=e.displayName||null,n!==null?n:r(e.type)||"Memo";case k:n=e._payload,e=e._init;try{return r(e(n))}catch{}}return null}function a(e){return""+e}function s(e){try{a(e);var n=!1}catch{n=!0}if(n){n=console;var i=n.error,t=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return i.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),a(e)}}function d(e){if(e===S)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===k)return"<...>";try{var n=r(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function c(){var e=b.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function v(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 g(e,n){function i(){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))}i.isReactWarning=!0,Object.defineProperty(e,"key",{get:i,configurable:!0})}function j(){var e=r(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 h(e,n,i,t,x,w,X,Z){return i=w.ref,e={$$typeof:I,type:e,key:n,props:w,_owner:x},(i!==void 0?i:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:j}):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 L(e,n,i,t,x,w,X,Z){var p=n.children;if(p!==void 0)if(t)if(R(p)){for(t=0;t<p.length;t++)E(p[t]);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 E(p);if(Y.call(n,"key")){p=r(e);var P=Object.keys(n).filter(function(ae){return ae!=="key"});t=0<P.length?"{key: someKey, "+P.join(": ..., ")+": ...}":"{key: someKey}",J[p+t]||(P=0<P.length?"{"+P.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */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=b.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 h(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,v,w,X,Z){return c=w.ref,e={$$typeof:I,type:e,key:n,props:w,_owner:v},(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,v,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 N=Object.keys(n).filter(function(oe){return oe!=="key"});r=0<N.length?"{key: someKey, "+N.join(": ..., ")+": ...}":"{key: someKey}",J[p+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} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,t,p,P,p),J[p+t]=!0)}if(p=null,i!==void 0&&(s(i),p=""+i),v(n)&&(s(n.key),p=""+n.key),"key"in n){i={};for(var Q in n)Q!=="key"&&(i[Q]=n[Q])}else i=n;return p&&g(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),h(e,p,w,x,c(),i,X,Z)}function E(e){typeof e=="object"&&e!==null&&e.$$typeof===I&&e._store&&(e._store.validated=1)}var m=l,I=Symbol.for("react.transitional.element"),z=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),C=Symbol.for("react.profiler"),O=Symbol.for("react.consumer"),G=Symbol.for("react.context"),W=Symbol.for("react.forward_ref"),f=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"),_=Symbol.for("react.client.reference"),b=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,R=Array.isArray,N=console.createTask?console.createTask:function(){return null};m={"react-stack-bottom-frame":function(e){return e()}};var y,D={},A=m["react-stack-bottom-frame"].bind(m,u)(),F=N(d(u)),J={};H.Fragment=S,H.jsx=function(e,n,i,t,x){var w=1e4>b.recentlyCreatedOwnerStacks++;return L(e,n,i,!1,t,x,w?Error("react-stack-top-frame"):A,w?N(d(e)):F)},H.jsxs=function(e,n,i,t,x){var w=1e4>b.recentlyCreatedOwnerStacks++;return L(e,n,i,!0,t,x,w?Error("react-stack-top-frame"):A,w?N(d(e)):F)}}()),H}var te;function le(){return te||(te=1,process.env.NODE_ENV==="production"?V.exports=ce():V.exports=ie()),V.exports}var o=le();const ue=({type:r="button",value:a})=>o.jsx("button",{type:r,children:a}),fe=({type:r="text",placeholder:a,wrapperClass:s="",labelClass:d="",inputClass:c="",errorClass:u="",label:v,hasError:g,register:j,name:h,isDisabled:L=!1,autocomplete:E=!1,...m})=>o.jsxs("div",{className:s,children:[o.jsxs("label",{htmlFor:h,className:`${d} ${g&&"error"}`,children:[v,o.jsx("input",{disabled:L,autoComplete:E?"on":"off",id:h,...j,...m,type:r,name:h,className:`${c} ${g&&"error"} ${u}`,placeholder:a})]}),g&&o.jsx("p",{className:u,children:g})]}),re=r=>$.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",...r},$.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=r=>$.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 384 512",fill:"currentColor",...r},$.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=r=>$.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",fill:"currentColor",...r},$.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"})),ge=()=>{const[r,a]=l.useState(typeof window<"u"?window.innerWidth:0),s=()=>a(typeof window<"u"?window.innerWidth:0);return l.useEffect(()=>(window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)),[r]),r},oe=({classNames:r={wrapper:"",color:""}})=>o.jsxs("svg",{className:`nariaLoading ${r.wrapper}`,viewBox:"0 0 64 64",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[o.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"}),o.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:r.color})]}),me=()=>{const r=`${window.location.pathname}${window.location.search}`;window.history.replaceState(null,"",r)},pe=r=>{window.location.hash=r},he=r=>{const[a,s]=l.useState(!1);return l.useEffect(()=>{const d=c=>{window.location.hash!==r?s(!0):s(!1)};return window.addEventListener("hashchange",d),()=>{window.removeEventListener("hashchange",d)}},[]),a},we=(r,a,s)=>{l.useEffect(()=>{function d(c){a.current&&!a.current.contains(c.target)&&r?.current&&!r?.current.contains(c.target)&&s()}return document.addEventListener("mousedown",d),()=>{document.removeEventListener("mousedown",d)}},[r,s])},ve=({options:r,label:a,hasError:s,title:d,value:c,api:u,selected:v,placeholder:g,disabled:j=!1,pagination:h,optionFilterLabel:L,hasSearch:E=!1,classNames:m={wrapper:"",label:"",title:"",button:"",input:"",listWrapper:"",list:"",option:""},onSelectChange:I})=>{let z=!0;const S=ge(),q=he("#select"),[C,O]=l.useState(!1),[G,W]=l.useState(!0),[f,M]=l.useState(null),[T,k]=l.useState(null),[B,_]=l.useState(""),[b,Y]=l.useState({page:1,pageLabel:"page",size:20,sizeLabel:"size",isLoading:!1}),R=l.useRef(void 0),N=l.useRef(void 0),y=l.useRef(void 0),D=async()=>{if(R?.current)try{const t=await fetch(R?.current);if(!t.ok)throw new Error(`Response status: ${t.status}`);return await t.json()}catch(t){console.error(t.message)}};l.useEffect(()=>()=>{z=!1},[]),l.useEffect(()=>{if(u?.length){if(R.current=u,R.current.includes(h?.pageLabel||"page")){const t=new URL(u);t.searchParams.set(h?.pageLabel||"page",(h?.page||b.page).toString()),t.searchParams.set(h?.sizeLabel||"size",(h?.size||b.size).toString()),R.current=t.href}W(!0),D().then(t=>{z&&(W(!1),k(t))})}},[u,h]),l.useEffect(()=>{if(b.isLoading){if(R.current.includes(h?.pageLabel||"page")){const t=new URL(R.current);t.searchParams.set(h?.pageLabel||"page",b.page.toString()),R.current=t.href}D().then(t=>{z&&(W(!1),Y({...b,isLoading:!1}),k([...T,...t]))})}},[b]),l.useEffect(()=>{S<768&&(C?(pe("select"),document.body.style.overflow="hidden",y.current?.focus()):(window.location.hash&&!document.referrer.includes("#")&&me(),document.body.style.overflow="auto"))},[C]),l.useEffect(()=>{v&&r?.length&&(r?.find(t=>t[a]===v)?M(r?.find(t=>t[a]===v)):M(v))},[v]),l.useEffect(()=>{f&&E&&(c?.length&&T?.find(t=>t[a]===f[a])?_(T?.find(t=>t[a]===f[a])[c]||""):_(f))},[f]),l.useEffect(()=>{q&&O(!1)},[q]),l.useEffect(()=>{r?.length&&k(r)},[r]);const A=()=>{E&&k(r),O(t=>!t)},F=()=>{E&&(k(r),_(typeof f=="string"?f:f?f[c]:"")),O(!1)},J=t=>{E&&(c?.length?_(t[c]):_(t)),M(t),A(),I&&I(t)},e=t=>{if(!f)return"";if(a?.length&&t[a]===f[a]||t===f)return"bg-grey-100"},n=t=>{u?.length&&T?.length&&!b.isLoading&&t.target.offsetHeight+t.target.scrollTop>=t.target.scrollHeight-100&&Y({page:b.page+1,isLoading:!0})},i=t=>{const x=t?.target?.value?.length?r.filter(w=>typeof w=="object"?w[L?.length?L:c].includes(t?.target?.value):w.includes(t?.target?.value)):r;k(x),_(t?.target?.value),C||O(!0)};return we(N,y,F),o.jsxs("div",{className:`nariaSelect ${j?"nariaSelect-disabled":""} ${m?.wrapper}`,children:[o.jsxs("label",{className:`cursor-pointer
+  <%s key={someKey} {...props} />`,r,p,N,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&&h(c,typeof e=="function"?e.displayName||e.name||"Unknown":e),E(e,p,w,v,o(),c,X,Z)}function R(e){typeof e=="object"&&e!==null&&e.$$typeof===I&&e._store&&(e._store.validated=1)}var m=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"),b=m.__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};m={"react-stack-bottom-frame":function(e){return e()}};var y,D={},A=m["react-stack-bottom-frame"].bind(m,f)(),F=O(d(f)),J={};U.Fragment=T,U.jsx=function(e,n,c,r,v){var w=1e4>b.recentlyCreatedOwnerStacks++;return $(e,n,c,!1,r,v,w?Error("react-stack-top-frame"):A,w?O(d(e)):F)},U.jsxs=function(e,n,c,r,v){var w=1e4>b.recentlyCreatedOwnerStacks++;return $(e,n,c,!0,r,v,w?Error("react-stack-top-frame"):A,w?O(d(e)):F)}}()),U}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:h=!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:h,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])},be=({options:t,label:i,hasError:s,title:d,value:o,api:f,selected:g,placeholder:h,disabled:x=!1,pagination:E,optionFilterLabel:$,hasSearch:R=!1,classNames:m={wrapper:"",label:"",title:"",button:"",input:"",listWrapper:"",list:"",option:"",mobileHeader:""},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(""),[b,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||b.page).toString()),r.searchParams.set(E?.sizeLabel||"size",(E?.size||b.size).toString()),j.current=r.href}z(!0),D().then(r=>{W&&(z(!1),C(r))})}},[f,E]),l.useEffect(()=>{if(b.isLoading){if(j.current.includes(E?.pageLabel||"page")){const r=new URL(j.current);r.searchParams.set(E?.pageLabel||"page",b.page.toString()),j.current=r.href}D().then(r=>{W&&(z(!1),Y({...b,isLoading:!1}),C([..._,...r]))})}},[b]),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 A=()=>{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),A(),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&&!b.isLoading&&r.target.offsetHeight+r.target.scrollTop>=r.target.scrollHeight-100&&Y({page:b.page+1,isLoading:!0})},c=r=>{const v=r?.target?.value?.length?t.filter(w=>typeof w=="object"?w[$?.length?$:o].includes(r?.target?.value):w.includes(r?.target?.value)):t;C(v),k(r?.target?.value),S||L(!0)};return we(O,y,F),a.jsxs("div",{className:`nariaSelect ${x?"nariaSelect-disabled":""} ${m?.wrapper}`,"data-prop":"wrapper",children:[a.jsxs("label",{className:`cursor-pointer
                 ${s&&"!text-danger-100"}
-                ${m?.label}`,children:[o.jsx("span",{className:m?.title,children:d}),E?o.jsxs("div",{className:"nariaSearchInput",children:[o.jsx("input",{ref:y,placeholder:g?.length?g:"Select",className:`${f?"text-dark-100":"text-grey-300"} 
-                                ${s&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${m?.input}`,value:B,disabled:j,type:"text",onClick:A,onChange:i}),C?o.jsx(ne,{className:"nariaSearchIcon"}):o.jsx(re,{className:`nariaArrowIcon ${C?"nariaArrowIcon-rotate-180":""}`})]}):o.jsxs("button",{type:"button",ref:y,disabled:j,className:`nariaHandler ${f?"text-dark-100":"text-grey-300"} 
-                                ${s&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${m?.button}`,onClick:A,children:[f?c?.length?f[c]:f:g?.length?g:"Select"," ",o.jsx(re,{className:`nariaArrowIcon ${C?"nariaArrowIcon-rotate-180":""}`})]})]}),C?o.jsxs("div",{className:`nariaListWrapper ${S<768?"nariaListWrapper-mobile":""} ${m?.listWrapper}`,ref:N,children:[E&&S<768?o.jsxs("div",{className:"nariaSearchInput",children:[o.jsx("input",{ref:y,placeholder:g?.length?g:"Select",className:`${f?"text-dark-100":"text-grey-300"} 
-                                ${s&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${m?.input}`,value:B,disabled:j,type:"text",onChange:i}),o.jsx(ne,{className:"nariaSearchIcon"})]}):void 0,o.jsx("div",{className:`nariaList ${S<768?"nariaList-mobile":"nariaList-desktop"} ${m?.list}`,onScroll:n,children:u&&G?o.jsx("div",{className:"nariaLoadingWrapper",children:o.jsx(oe,{})}):o.jsxs(o.Fragment,{children:[S<768?o.jsx("div",{className:"sticky top-0 text-left",children:o.jsx("button",{className:"p-3",onClick:F,disabled:j,children:o.jsx(de,{className:"w-6"})})}):void 0,T?.length?o.jsx(o.Fragment,{children:T?.map((t,x)=>o.jsx("button",{type:"button",onClick:()=>J(t),disabled:j,className:`${m?.option} ${e(t)}`,children:c?.length?t[c]:t},x.toString()))}):o.jsx("div",{children:"No Data"}),b.isLoading?o.jsx("div",{className:"nariaLoadingMoreWrapper",children:o.jsx(oe,{})}):void 0]})})]}):void 0,s&&o.jsx("p",{className:"text-xs mt-1 text-danger-100",children:s})]})};function be(r){return r.charAt(0).toUpperCase()+r.slice(1)}exports.Button=ue;exports.Input=fe;exports.Select=ve;exports.capitalize=be;
+                ${m?.label}`,"data-prop":"label",children:[a.jsx("span",{className:m?.title,"data-prop":"title",children:d}),R?a.jsxs("div",{className:"nariaSearchInput",children:[a.jsx("input",{ref:y,placeholder:h?.length?h:"Select",className:`${u?"text-dark-100":"text-grey-300"} 
+                                ${s&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${m?.input}`,value:B,disabled:x,type:"text",onClick:A,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"} ${m?.button}`,"data-prop":"button",onClick:A,children:[u?o?.length?u[o]:u:h?.length?h:"Select"," ",a.jsx(te,{className:`nariaArrowIcon ${S?"nariaArrowIcon-rotate-180":""}`})]})]}),S?a.jsx("div",{className:`nariaListWrapper ${T<768?"nariaListWrapper-mobile":""} ${m?.listWrapper}`,"data-prop":"listWrapper",ref:O,children:a.jsx("div",{className:`nariaList ${T<768?"nariaList-mobile":"nariaList-desktop"} ${m?.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 ${m?.mobileHeader}`,"data-prop":"mobileHeader",children:[R?a.jsxs("div",{className:"nariaSearchInput",children:[a.jsx("input",{ref:y,placeholder:h?.length?h:"Select",className:`${u?"text-dark-100":"text-grey-300"} 
+                                                               ${s&&"!border-danger-100 focus:border-danger-100 outline-danger-100"} ${m?.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,v)=>a.jsx("button",{type:"button",onClick:()=>J(r),disabled:x,className:`${m?.option} ${e(r)}`,"data-prop":"option",children:o?.length?r[o]:r},v.toString()))}):a.jsx("div",{children:"No Data"}),b.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 ve(t){return t.charAt(0).toUpperCase()+t.slice(1)}exports.Button=ue;exports.Input=fe;exports.Select=be;exports.capitalize=ve;

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:100px}.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 .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)}}
+.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)}}

package/dist/naria-ui.es.js

@@ -1,6 +1,6 @@
-import * as I from "react";
-import ce, { useState as y, useEffect as E, useRef as ee } from "react";
-var G = { exports: {} }, H = {};
+import * as P from "react";
+import ce, { useState as y, useEffect as x, useRef as ee } from "react";
+var G = { exports: {} }, U = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -12,25 +12,25 @@ var G = { exports: {} }, H = {};
  */
 var re;
 function le() {
-  if (re) return H;
+  if (re) return U;
   re = 1;
   var t = Symbol.for("react.transitional.element"), i = Symbol.for("react.fragment");
-  function c(m, a, l) {
-    var w = null;
-    if (l !== void 0 && (w = "" + l), a.key !== void 0 && (w = "" + a.key), "key" in a) {
-      l = {};
-      for (var d in a)
-        d !== "key" && (l[d] = a[d]);
-    } else l = a;
-    return a = l.ref, {
+  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 m in o)
+        m !== "key" && (u[m] = o[m]);
+    } else u = o;
+    return o = u.ref, {
       $$typeof: t,
-      type: m,
-      key: w,
-      ref: a !== void 0 ? a : null,
-      props: l
+      type: f,
+      key: p,
+      ref: o !== void 0 ? o : null,
+      props: u
     };
   }
-  return H.Fragment = i, H.jsx = c, H.jsxs = c, H;
+  return U.Fragment = i, U.jsx = c, U.jsxs = c, U;
 }
 var J = {};
 /**
@@ -51,13 +51,13 @@ function ue() {
         return e.$$typeof === S ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case C:
+        case _:
           return "Fragment";
-        case k:
+        case C:
           return "Profiler";
         case q:
           return "StrictMode";
-        case u:
+        case l:
           return "Suspense";
         case M:
           return "SuspenseList";
@@ -79,7 +79,7 @@ function ue() {
             return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case T:
             return n = e.displayName || null, n !== null ? n : t(e.type) || "Memo";
-          case _:
+          case k:
             n = e._payload, e = e._init;
             try {
               return t(e(n));
@@ -108,9 +108,9 @@ function ue() {
         ), i(e);
       }
     }
-    function m(e) {
-      if (e === C) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === _)
+    function f(e) {
+      if (e === _) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === k)
         return "<...>";
       try {
         var n = t(e);
@@ -119,21 +119,21 @@ function ue() {
         return "<...>";
       }
     }
-    function a() {
-      var e = v.A;
+    function o() {
+      var e = w.A;
       return e === null ? null : e.getOwner();
     }
-    function l() {
+    function u() {
       return Error("react-stack-top-frame");
     }
-    function w(e) {
+    function p(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 d(e, n) {
+    function m(e, n) {
       function s() {
         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)",
@@ -145,22 +145,22 @@ function ue() {
         configurable: !0
       });
     }
-    function R() {
+    function E() {
       var e = t(this.type);
       return F[e] || (F[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 h(e, n, s, r, x, p, Z, Q) {
-      return s = p.ref, e = {
+    function b(e, n, s, r, v, h, Z, Q) {
+      return s = h.ref, e = {
         $$typeof: W,
         type: e,
         key: n,
-        props: p,
-        _owner: x
+        props: h,
+        _owner: v
       }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: R
+        get: E
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -183,25 +183,25 @@ function ue() {
         value: Q
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function N(e, n, s, r, x, p, Z, Q) {
-      var g = n.children;
-      if (g !== void 0)
+    function I(e, n, s, r, v, h, Z, Q) {
+      var d = n.children;
+      if (d !== void 0)
         if (r)
-          if (j(g)) {
-            for (r = 0; r < g.length; r++)
-              b(g[r]);
-            Object.freeze && Object.freeze(g);
+          if (R(d)) {
+            for (r = 0; r < d.length; r++)
+              j(d[r]);
+            Object.freeze && Object.freeze(d);
           } 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 b(g);
+        else j(d);
       if (D.call(n, "key")) {
-        g = t(e);
+        d = t(e);
         var $ = Object.keys(n).filter(function(ie) {
           return ie !== "key";
         });
-        r = 0 < $.length ? "{key: someKey, " + $.join(": ..., ") + ": ...}" : "{key: someKey}", V[g + r] || ($ = 0 < $.length ? "{" + $.join(": ..., ") + ": ...}" : "{}", console.error(
+        r = 0 < $.length ? "{key: someKey, " + $.join(": ..., ") + ": ...}" : "{key: someKey}", V[d + r] || ($ = 0 < $.length ? "{" + $.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -209,68 +209,68 @@ React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
           r,
-          g,
+          d,
           $,
-          g
-        ), V[g + r] = !0);
+          d
+        ), V[d + r] = !0);
       }
-      if (g = null, s !== void 0 && (c(s), g = "" + s), w(n) && (c(n.key), g = "" + n.key), "key" in n) {
+      if (d = null, s !== void 0 && (c(s), d = "" + s), p(n) && (c(n.key), d = "" + n.key), "key" in n) {
         s = {};
         for (var K in n)
           K !== "key" && (s[K] = n[K]);
       } else s = n;
-      return g && d(
+      return d && m(
         s,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), h(
+      ), b(
         e,
-        g,
-        p,
-        x,
-        a(),
+        d,
+        h,
+        v,
+        o(),
         s,
         Z,
         Q
       );
     }
-    function b(e) {
+    function j(e) {
       typeof e == "object" && e !== null && e.$$typeof === W && e._store && (e._store.validated = 1);
     }
-    var f = ce, W = Symbol.for("react.transitional.element"), z = Symbol.for("react.portal"), C = Symbol.for("react.fragment"), q = Symbol.for("react.strict_mode"), k = Symbol.for("react.profiler"), A = 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"), T = Symbol.for("react.memo"), _ = Symbol.for("react.lazy"), B = Symbol.for("react.activity"), S = Symbol.for("react.client.reference"), v = f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, D = Object.prototype.hasOwnProperty, j = Array.isArray, O = console.createTask ? console.createTask : function() {
+    var g = 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 = g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, D = Object.prototype.hasOwnProperty, R = Array.isArray, N = console.createTask ? console.createTask : function() {
       return null;
     };
-    f = {
+    g = {
       "react-stack-bottom-frame": function(e) {
         return e();
       }
     };
-    var L, F = {}, P = f["react-stack-bottom-frame"].bind(
-      f,
-      l
-    )(), U = O(m(l)), V = {};
-    J.Fragment = C, J.jsx = function(e, n, s, r, x) {
-      var p = 1e4 > v.recentlyCreatedOwnerStacks++;
-      return N(
+    var L, F = {}, O = g["react-stack-bottom-frame"].bind(
+      g,
+      u
+    )(), H = N(f(u)), V = {};
+    J.Fragment = _, J.jsx = function(e, n, s, r, v) {
+      var h = 1e4 > w.recentlyCreatedOwnerStacks++;
+      return I(
         e,
         n,
         s,
         !1,
         r,
-        x,
-        p ? Error("react-stack-top-frame") : P,
-        p ? O(m(e)) : U
+        v,
+        h ? Error("react-stack-top-frame") : O,
+        h ? N(f(e)) : H
       );
-    }, J.jsxs = function(e, n, s, r, x) {
-      var p = 1e4 > v.recentlyCreatedOwnerStacks++;
-      return N(
+    }, J.jsxs = function(e, n, s, r, v) {
+      var h = 1e4 > w.recentlyCreatedOwnerStacks++;
+      return I(
         e,
         n,
         s,
         !0,
         r,
-        x,
-        p ? Error("react-stack-top-frame") : P,
-        p ? O(m(e)) : U
+        v,
+        h ? Error("react-stack-top-frame") : O,
+        h ? N(f(e)) : H
       );
     };
   }()), J;
@@ -279,56 +279,57 @@ var ne;
 function de() {
   return ne || (ne = 1, process.env.NODE_ENV === "production" ? G.exports = le() : G.exports = ue()), G.exports;
 }
-var o = de();
-const xe = ({ type: t = "button", value: i }) => /* @__PURE__ */ o.jsx("button", { type: t, children: i }), be = ({
+var a = de();
+const be = ({ type: t = "button", value: i }) => /* @__PURE__ */ a.jsx("button", { type: t, children: i }), xe = ({
   type: t = "text",
   placeholder: i,
-  wrapperClass: c = "",
-  labelClass: m = "",
-  inputClass: a = "",
-  errorClass: l = "",
-  label: w,
-  hasError: d,
-  register: R,
-  name: h,
-  isDisabled: N = !1,
-  autocomplete: b = !1,
-  ...f
-}) => /* @__PURE__ */ o.jsxs("div", { className: c, children: [
-  /* @__PURE__ */ o.jsxs(
+  classNames: c = {
+    wrapper: "",
+    label: "",
+    input: ""
+  },
+  label: f,
+  hasError: o,
+  register: u,
+  name: p,
+  isDisabled: m = !1,
+  autocomplete: E = !1,
+  ...b
+}) => /* @__PURE__ */ a.jsxs("div", { className: `nariaInputWrapper ${c.wrapper}`, children: [
+  /* @__PURE__ */ a.jsxs(
     "label",
     {
-      htmlFor: h,
-      className: `${m} ${d && "error"}`,
+      htmlFor: p,
+      className: `${c.label} ${o && "nariaInputLabel-error"}`,
       children: [
-        w,
-        /* @__PURE__ */ o.jsx(
+        f,
+        /* @__PURE__ */ a.jsx(
           "input",
           {
-            disabled: N,
-            autoComplete: b ? "on" : "off",
-            id: h,
-            ...R,
-            ...f,
+            disabled: m,
+            autoComplete: E ? "on" : "off",
+            id: p,
+            ...u,
+            ...b,
             type: t,
-            name: h,
-            className: `${a} ${d && "error"} ${l}`,
+            name: p,
+            className: `${c.input} ${o && "nariaInput-error"}`,
             placeholder: i
           }
         )
       ]
     }
   ),
-  d && /* @__PURE__ */ o.jsx("p", { className: l, children: d })
-] }), oe = (t) => /* @__PURE__ */ I.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", fill: "currentColor", ...t }, /* @__PURE__ */ I.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__ */ I.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", fill: "currentColor", ...t }, /* @__PURE__ */ I.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) => /* @__PURE__ */ I.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", fill: "currentColor", ...t }, /* @__PURE__ */ I.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" })), ge = () => {
+  o && /* @__PURE__ */ a.jsx("p", { className: "nariaInputErrorText", children: o })
+] }), ae = (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" })), oe = (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] = y(typeof window < "u" ? window.innerWidth : 0), c = () => i(typeof window < "u" ? window.innerWidth : 0);
-  return E(() => (window.addEventListener("resize", c), () => window.removeEventListener("resize", c)), [t]), t;
+  return x(() => (window.addEventListener("resize", c), () => window.removeEventListener("resize", c)), [t]), t;
 }, se = ({
   classNames: t = {
     wrapper: "",
     color: ""
   }
-}) => /* @__PURE__ */ o.jsxs(
+}) => /* @__PURE__ */ a.jsxs(
   "svg",
   {
     className: `nariaLoading ${t.wrapper}`,
@@ -336,7 +337,7 @@ const xe = ({ type: t = "button", value: i }) => /* @__PURE__ */ o.jsx("button",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ o.jsx(
+      /* @__PURE__ */ 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",
@@ -346,7 +347,7 @@ const xe = ({ type: t = "button", value: i }) => /* @__PURE__ */ o.jsx("button",
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ o.jsx(
+      /* @__PURE__ */ 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",
@@ -359,44 +360,44 @@ const xe = ({ type: t = "button", value: i }) => /* @__PURE__ */ o.jsx("button",
       )
     ]
   }
-), me = () => {
+), ge = () => {
   const t = `${window.location.pathname}${window.location.search}`;
   window.history.replaceState(null, "", t);
-}, he = (t) => {
+}, me = (t) => {
   window.location.hash = t;
-}, pe = (t) => {
+}, he = (t) => {
   const [i, c] = y(!1);
-  return E(() => {
-    const m = (a) => {
+  return x(() => {
+    const f = (o) => {
       window.location.hash !== t ? c(!0) : c(!1);
     };
-    return window.addEventListener("hashchange", m), () => {
-      window.removeEventListener("hashchange", m);
+    return window.addEventListener("hashchange", f), () => {
+      window.removeEventListener("hashchange", f);
     };
   }, []), i;
 }, we = (t, i, c) => {
-  E(() => {
-    function m(a) {
-      i.current && !i.current.contains(a.target) && t?.current && !t?.current.contains(a.target) && c();
+  x(() => {
+    function f(o) {
+      i.current && !i.current.contains(o.target) && t?.current && !t?.current.contains(o.target) && c();
     }
-    return document.addEventListener("mousedown", m), () => {
-      document.removeEventListener("mousedown", m);
+    return document.addEventListener("mousedown", f), () => {
+      document.removeEventListener("mousedown", f);
     };
   }, [t, c]);
 }, Ee = ({
   options: t,
   label: i,
   hasError: c,
-  title: m,
-  value: a,
-  api: l,
-  selected: w,
-  placeholder: d,
-  disabled: R = !1,
-  pagination: h,
-  optionFilterLabel: N,
-  hasSearch: b = !1,
-  classNames: f = {
+  title: f,
+  value: o,
+  api: u,
+  selected: p,
+  placeholder: m,
+  disabled: E = !1,
+  pagination: b,
+  optionFilterLabel: I,
+  hasSearch: j = !1,
+  classNames: g = {
     wrapper: "",
     label: "",
     title: "",
@@ -404,21 +405,22 @@ const xe = ({ type: t = "button", value: i }) => /* @__PURE__ */ o.jsx("button",
     input: "",
     listWrapper: "",
     list: "",
-    option: ""
+    option: "",
+    mobileHeader: ""
   },
   onSelectChange: W
 }) => {
   let z = !0;
-  const C = ge(), q = pe("#select"), [k, A] = y(!1), [X, Y] = y(!0), [u, M] = y(null), [T, _] = y(null), [B, S] = y(""), [v, D] = y({
+  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({
     page: 1,
     pageLabel: "page",
     size: 20,
     sizeLabel: "size",
     isLoading: !1
-  }), j = ee(void 0), O = ee(void 0), L = ee(void 0), F = async () => {
-    if (j?.current)
+  }), R = ee(void 0), N = ee(void 0), L = ee(void 0), F = async () => {
+    if (R?.current)
       try {
-        const r = await fetch(j?.current);
+        const r = await fetch(R?.current);
         if (!r.ok)
           throw new Error(`Response status: ${r.status}`);
         return await r.json();
@@ -426,185 +428,199 @@ const xe = ({ type: t = "button", value: i }) => /* @__PURE__ */ o.jsx("button",
         console.error(r.message);
       }
   };
-  E(() => () => {
+  x(() => () => {
     z = !1;
-  }, []), E(() => {
-    if (l?.length) {
-      if (j.current = l, j.current.includes(h?.pageLabel || "page")) {
-        const r = new URL(l);
-        r.searchParams.set(h?.pageLabel || "page", (h?.page || v.page).toString()), r.searchParams.set(h?.sizeLabel || "size", (h?.size || v.size).toString()), j.current = r.href;
+  }, []), x(() => {
+    if (u?.length) {
+      if (R.current = u, R.current.includes(b?.pageLabel || "page")) {
+        const r = new URL(u);
+        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), _(r));
+        z && (Y(!1), k(r));
       });
     }
-  }, [l, h]), E(() => {
-    if (v.isLoading) {
-      if (j.current.includes(h?.pageLabel || "page")) {
-        const r = new URL(j.current);
-        r.searchParams.set(h?.pageLabel || "page", v.page.toString()), j.current = r.href;
+  }, [u, b]), x(() => {
+    if (w.isLoading) {
+      if (R.current.includes(b?.pageLabel || "page")) {
+        const r = new URL(R.current);
+        r.searchParams.set(b?.pageLabel || "page", w.page.toString()), R.current = r.href;
       }
       F().then((r) => {
         z && (Y(!1), D({
-          ...v,
+          ...w,
           isLoading: !1
-        }), _([
+        }), k([
           ...T,
           ...r
         ]));
       });
     }
-  }, [v]), E(() => {
-    C < 768 && (k ? (he("select"), document.body.style.overflow = "hidden", L.current?.focus()) : (window.location.hash && !document.referrer.includes("#") && me(), document.body.style.overflow = "auto"));
-  }, [k]), E(() => {
-    w && t?.length && (t?.find((r) => r[i] === w) ? M(t?.find((r) => r[i] === w)) : M(w));
-  }, [w]), E(() => {
-    u && b && (a?.length && T?.find((r) => r[i] === u[i]) ? S(T?.find((r) => r[i] === u[i])[a] || "") : S(u));
-  }, [u]), E(() => {
+  }, [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"));
+  }, [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]), E(() => {
-    t?.length && _(t);
+  }, [q]), x(() => {
+    t?.length && k(t);
   }, [t]);
-  const P = () => {
-    b && _(t), A((r) => !r);
-  }, U = () => {
-    b && (_(t), S(typeof u == "string" ? u : u ? u[a] : "")), A(!1);
+  const O = () => {
+    j && k(t), A((r) => !r);
+  }, H = () => {
+    j && (k(t), S(typeof l == "string" ? l : l ? l[o] : "")), A(!1);
   }, V = (r) => {
-    b && (a?.length ? S(r[a]) : S(r)), M(r), P(), W && W(r);
+    j && (o?.length ? S(r[o]) : S(r)), M(r), O(), W && W(r);
   }, e = (r) => {
-    if (!u)
+    if (!l)
       return "";
-    if (i?.length && r[i] === u[i] || r === u)
+    if (i?.length && r[i] === l[i] || r === l)
       return "bg-grey-100";
   }, n = (r) => {
-    l?.length && T?.length && !v.isLoading && r.target.offsetHeight + r.target.scrollTop >= r.target.scrollHeight - 100 && D({
-      page: v.page + 1,
+    u?.length && T?.length && !w.isLoading && r.target.offsetHeight + r.target.scrollTop >= r.target.scrollHeight - 100 && D({
+      page: w.page + 1,
       isLoading: !0
     });
   }, s = (r) => {
-    const x = r?.target?.value?.length ? t.filter((p) => typeof p == "object" ? p[N?.length ? N : a].includes(r?.target?.value) : p.includes(r?.target?.value)) : t;
-    _(x), S(r?.target?.value), k || A(!0);
+    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);
   };
-  return we(O, L, U), /* @__PURE__ */ o.jsxs("div", { className: `nariaSelect ${R ? "nariaSelect-disabled" : ""} ${f?.wrapper}`, children: [
-    /* @__PURE__ */ o.jsxs(
-      "label",
-      {
-        className: `cursor-pointer
+  return we(N, L, H), /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      className: `nariaSelect ${E ? "nariaSelect-disabled" : ""} ${g?.wrapper}`,
+      "data-prop": "wrapper",
+      children: [
+        /* @__PURE__ */ a.jsxs(
+          "label",
+          {
+            className: `cursor-pointer
                 ${c && "!text-danger-100"}
-                ${f?.label}`,
-        children: [
-          /* @__PURE__ */ o.jsx("span", { className: f?.title, children: m }),
-          b ? /* @__PURE__ */ o.jsxs("div", { className: "nariaSearchInput", children: [
-            /* @__PURE__ */ o.jsx(
-              "input",
-              {
-                ref: L,
-                placeholder: d?.length ? d : "Select",
-                className: `${u ? "text-dark-100" : "text-grey-300"} 
-                                ${c && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${f?.input}`,
-                value: B,
-                disabled: R,
-                type: "text",
-                onClick: P,
-                onChange: s
-              }
-            ),
-            k ? /* @__PURE__ */ o.jsx(
-              ae,
-              {
-                className: "nariaSearchIcon"
-              }
-            ) : /* @__PURE__ */ o.jsx(
-              oe,
-              {
-                className: `nariaArrowIcon ${k ? "nariaArrowIcon-rotate-180" : ""}`
-              }
-            )
-          ] }) : /* @__PURE__ */ o.jsxs(
-            "button",
-            {
-              type: "button",
-              ref: L,
-              disabled: R,
-              className: `nariaHandler ${u ? "text-dark-100" : "text-grey-300"} 
-                                ${c && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${f?.button}`,
-              onClick: P,
-              children: [
-                u ? a?.length ? u[a] : u : d?.length ? d : "Select",
-                " ",
-                /* @__PURE__ */ o.jsx(
+                ${g?.label}`,
+            "data-prop": "label",
+            children: [
+              /* @__PURE__ */ a.jsx("span", { className: g?.title, "data-prop": "title", children: f }),
+              j ? /* @__PURE__ */ a.jsxs("div", { className: "nariaSearchInput", children: [
+                /* @__PURE__ */ a.jsx(
+                  "input",
+                  {
+                    ref: L,
+                    placeholder: m?.length ? m : "Select",
+                    className: `${l ? "text-dark-100" : "text-grey-300"} 
+                                ${c && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${g?.input}`,
+                    value: B,
+                    disabled: E,
+                    type: "text",
+                    onClick: O,
+                    onChange: s,
+                    "data-prop": "input"
+                  }
+                ),
+                C ? /* @__PURE__ */ a.jsx(
                   oe,
                   {
-                    className: `nariaArrowIcon ${k ? "nariaArrowIcon-rotate-180" : ""}`
+                    className: "nariaSearchIcon"
+                  }
+                ) : /* @__PURE__ */ a.jsx(
+                  ae,
+                  {
+                    className: `nariaArrowIcon ${C ? "nariaArrowIcon-rotate-180" : ""}`
                   }
                 )
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    k ? /* @__PURE__ */ o.jsxs(
-      "div",
-      {
-        className: `nariaListWrapper ${C < 768 ? "nariaListWrapper-mobile" : ""} ${f?.listWrapper}`,
-        ref: O,
-        children: [
-          b && C < 768 ? /* @__PURE__ */ o.jsxs("div", { className: "nariaSearchInput", children: [
-            /* @__PURE__ */ o.jsx(
-              "input",
-              {
-                ref: L,
-                placeholder: d?.length ? d : "Select",
-                className: `${u ? "text-dark-100" : "text-grey-300"} 
-                                ${c && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${f?.input}`,
-                value: B,
-                disabled: R,
-                type: "text",
-                onChange: s
-              }
-            ),
-            /* @__PURE__ */ o.jsx(
-              ae,
+              ] }) : /* @__PURE__ */ a.jsxs(
+                "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"} ${g?.button}`,
+                  "data-prop": "button",
+                  onClick: O,
+                  children: [
+                    l ? o?.length ? l[o] : l : m?.length ? m : "Select",
+                    " ",
+                    /* @__PURE__ */ a.jsx(
+                      ae,
+                      {
+                        className: `nariaArrowIcon ${C ? "nariaArrowIcon-rotate-180" : ""}`
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        C ? /* @__PURE__ */ a.jsx(
+          "div",
+          {
+            className: `nariaListWrapper ${_ < 768 ? "nariaListWrapper-mobile" : ""} ${g?.listWrapper}`,
+            "data-prop": "listWrapper",
+            ref: N,
+            children: /* @__PURE__ */ a.jsx(
+              "div",
               {
-                className: "nariaSearchIcon"
+                className: `nariaList ${_ < 768 ? "nariaList-mobile" : "nariaList-desktop"} ${g?.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 ${g?.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: `${l ? "text-dark-100" : "text-grey-300"} 
+                                                               ${c && "!border-danger-100 focus:border-danger-100 outline-danger-100"} ${g?.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: H, 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(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => V(r),
+                      disabled: E,
+                      className: `${g?.option} ${e(r)}`,
+                      "data-prop": "option",
+                      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
+                ] })
               }
             )
-          ] }) : void 0,
-          /* @__PURE__ */ o.jsx(
-            "div",
-            {
-              className: `nariaList ${C < 768 ? "nariaList-mobile" : "nariaList-desktop"} ${f?.list}`,
-              onScroll: n,
-              children: l && X ? /* @__PURE__ */ o.jsx("div", { className: "nariaLoadingWrapper", children: /* @__PURE__ */ o.jsx(se, {}) }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-                C < 768 ? /* @__PURE__ */ o.jsx("div", { className: "sticky top-0 text-left", children: /* @__PURE__ */ o.jsx("button", { className: "p-3", onClick: U, disabled: R, children: /* @__PURE__ */ o.jsx(fe, { className: "w-6" }) }) }) : void 0,
-                T?.length ? /* @__PURE__ */ o.jsx(o.Fragment, { children: T?.map((r, x) => /* @__PURE__ */ o.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => V(r),
-                    disabled: R,
-                    className: `${f?.option} ${e(r)}`,
-                    children: a?.length ? r[a] : r
-                  },
-                  x.toString()
-                )) }) : /* @__PURE__ */ o.jsx("div", { children: "No Data" }),
-                v.isLoading ? /* @__PURE__ */ o.jsx("div", { className: "nariaLoadingMoreWrapper", children: /* @__PURE__ */ o.jsx(se, {}) }) : void 0
-              ] })
-            }
-          )
-        ]
-      }
-    ) : void 0,
-    c && /* @__PURE__ */ o.jsx("p", { className: "text-xs mt-1 text-danger-100", children: c })
-  ] });
+          }
+        ) : void 0,
+        c && /* @__PURE__ */ a.jsx("p", { className: "text-xs mt-1 text-danger-100", children: c })
+      ]
+    }
+  );
 };
 function Re(t) {
   return t.charAt(0).toUpperCase() + t.slice(1);
 }
 export {
-  xe as Button,
-  be as Input,
+  be as Button,
+  xe as Input,
   Ee as Select,
   Re as capitalize
 };

package/package.json

@@ -5,7 +5,7 @@
     "name": "Mohammad Mehdi Mohammadi",
     "url": ""
   },
-  "version": "0.1.47",
+  "version": "0.1.49",
   "type": "module",
   "main": "dist/naria-ui.cjs.js",
   "module": "dist/naria-ui.es.js",