gd-design-library 1.8.2 → 1.8.3

package/components/atoms/Loader/Loader.d.cts

@@ -0,0 +1,2 @@
+import { LoaderProps } from './Loader.types.js';
+export declare const Loader: import('react').ForwardRefExoticComponent<LoaderProps & import('react').RefAttributes<HTMLSpanElement>>;

package/components/atoms/Loader/Loader.d.ts

@@ -1,2 +1,2 @@
-import { LoaderProps } from './Loader.types';
+import { LoaderProps } from './Loader.types.js';
 export declare const Loader: import('react').ForwardRefExoticComponent<LoaderProps & import('react').RefAttributes<HTMLSpanElement>>;

package/components/atoms/Loader/Loader.types.d.cts

@@ -0,0 +1,20 @@
+import { ElementType, PropsWithChildren } from 'react';
+import { EnumOrPrimitive, SizeVariant, WrapperVariant, Rounded } from '../../../types/index.js';
+import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../../index.js';
+export type LoaderName = 'circle' | 'dots';
+export interface LoaderProps extends CommonCssComponentProps, PropsWithChildren {
+    name?: LoaderName;
+    variant?: EnumOrPrimitive<WrapperVariant>;
+    rounded?: Rounded;
+    size?: EnumOrPrimitive<SizeVariant>;
+    withWrapper?: boolean;
+    animationProps?: string;
+    WrapperView?: keyof HTMLElementTagNameMap | ElementType;
+}
+export interface LoaderStyledProps extends CommonCssComponentStyledProps, PropsWithChildren {
+    $name?: LoaderName;
+    $rounded?: Rounded;
+    $variant?: EnumOrPrimitive<WrapperVariant>;
+    $size?: EnumOrPrimitive<SizeVariant>;
+    $animationProps?: string;
+}

package/components/atoms/Loader/Loader.types.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, PropsWithChildren } from 'react';
-import { EnumOrPrimitive, SizeVariant, WrapperVariant, Rounded } from '../../../types';
-import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
+import { EnumOrPrimitive, SizeVariant, WrapperVariant, Rounded } from '../../../types/index.js';
+import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../../index.js';
 export type LoaderName = 'circle' | 'dots';
 export interface LoaderProps extends CommonCssComponentProps, PropsWithChildren {
     name?: LoaderName;

package/components/atoms/Loader/LoaderStyled.cjs

@@ -1 +1 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../utils/helpers.cjs`),t=require(`../../../tokens/utils.cjs`),n=require(`../../../types/common.cjs`),r=require(`../../../types/wrapper.cjs`),i=require(`./utils.cjs`);let a=require(`react`),o=require(`@emotion/react/jsx-runtime`);var s=(0,a.forwardRef)(({theme:{loader:a,animations:s,...c}={},styles:l,$name:u,$variant:d=r.WrapperVariant.Inline,$size:f=n.SizeVariant.Md,$animationProps:p,children:m,$rounded:h,...g},_)=>{let{boxStyles:v,restProps:y}=t.getBoxStyles(g),b=new Proxy(a||{},t.tokensHandler(c)),{animation:x,AnimationView:S}=i.getAnimationDataByName(u,e.get(s,e.get(b,[`animation`,u,`name`],``),{}),p);return(0,o.jsxs)(`span`,{css:[e.get(b,`default`,{}),e.get(b,d,{}),e.get(b,[u,`default`],{}),e.get(b,[u,f],{}),u===`circle`?{}:{".dot":{borderRadius:e.get(c,[`radius`,h],`0px`)}},...x?[{animation:x}]:[],v,l],...y,ref:_,children:[(0,o.jsx)(S,{}),m]})});exports.LoaderStyled=s;
+const e=require("../../../utils/helpers.cjs"),t=require("../../../tokens/utils.cjs"),n=require("../../../types/common.cjs"),r=require("../../../types/wrapper.cjs"),i=require("./utils.cjs");let a=require("react"),o=require("@emotion/react/jsx-runtime");var s=(0,a.forwardRef)(({theme:{loader:a,animations:s,...c}={},styles:l,$name:u,$variant:d=r.WrapperVariant.Inline,$size:f=n.SizeVariant.Md,$animationProps:p,children:m,$rounded:h,...g},_)=>{let{boxStyles:v,restProps:y}=t.getBoxStyles(g),b=new Proxy(a||{},t.tokensHandler(c)),{animation:x,AnimationView:S}=i.getAnimationDataByName(u,e.get(s,e.get(b,[`animation`,u,`name`],``),{}),p);return(0,o.jsxs)(`span`,{css:[e.get(b,`default`,{}),e.get(b,d,{}),e.get(b,[u,`default`],{}),e.get(b,[u,f],{}),u===`circle`?{}:{".dot":{borderRadius:e.get(c,[`radius`,h],`0px`)}},...x?[{animation:x}]:[],v,l],...y,ref:_,children:[(0,o.jsx)(S,{}),m]})});exports.LoaderStyled=s;

package/components/atoms/Loader/LoaderStyled.d.cts

@@ -0,0 +1,2 @@
+import { LoaderStyledProps } from './Loader.types.js';
+export declare const LoaderStyled: import('react').ForwardRefExoticComponent<Omit<LoaderStyledProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;

package/components/atoms/Loader/LoaderStyled.d.ts

@@ -1,2 +1,2 @@
-import { LoaderStyledProps } from './Loader.types';
+import { LoaderStyledProps } from './Loader.types.js';
 export declare const LoaderStyled: import('react').ForwardRefExoticComponent<Omit<LoaderStyledProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;

package/components/atoms/Loader/constants.cjs

@@ -1 +1 @@
-const e=require(`../../../constants/timers.cjs`);var t=`Loader`,n=`${e.BASE_ANIMATION_MS}ms ease-in-out infinite`;exports.BASE_ANIMATION=n,exports.COMPONENT_NAME=t;
+const e=require("../../../constants/timers.cjs");var t=`Loader`,n=`${e.BASE_ANIMATION_MS}ms ease-in-out infinite`;exports.BASE_ANIMATION=n,exports.COMPONENT_NAME=t;

package/components/atoms/Loader/constants.d.cts

@@ -0,0 +1,2 @@
+export declare const COMPONENT_NAME = "Loader";
+export declare const BASE_ANIMATION = "2000ms ease-in-out infinite";

package/components/atoms/Loader/index.d.cts

@@ -0,0 +1,2 @@
+export * from './Loader.js';
+export * from './Loader.types.js';

package/components/atoms/Loader/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Loader';
-export * from './Loader.types';
+export * from './Loader.js';
+export * from './Loader.types.js';

package/components/atoms/Loader/utils.cjs

@@ -1 +1 @@
-"use client";require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../tokens/utils.cjs`);let t=require(`@emotion/react`),n=require(`@emotion/react/jsx-runtime`);var r=(r,i={},a)=>{let o=`${e.convertJsonToCssKeyframeCss(i)} ${a}`;switch(r){case`dots`:return{animation:null,AnimationView:()=>(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`span`,{css:(0,t.css)({animation:o}),className:`dot`}),(0,n.jsx)(`span`,{css:(0,t.css)({animation:o}),className:`dot`}),(0,n.jsx)(`span`,{css:(0,t.css)({animation:o}),className:`dot`})]})};case`circle`:return{animation:o,AnimationView:()=>null};default:return{animation:null,AnimationView:()=>null}}};exports.getAnimationDataByName=r;
+"use client";const e=require("../../../tokens/utils.cjs");let t=require("@emotion/react"),n=require("@emotion/react/jsx-runtime");var r=(r,i={},a)=>{let o=`${e.convertJsonToCssKeyframeCss(i)} ${a}`;switch(r){case`dots`:return{animation:null,AnimationView:()=>(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`span`,{css:(0,t.css)({animation:o}),className:`dot`}),(0,n.jsx)(`span`,{css:(0,t.css)({animation:o}),className:`dot`}),(0,n.jsx)(`span`,{css:(0,t.css)({animation:o}),className:`dot`})]})};case`circle`:return{animation:o,AnimationView:()=>null};default:return{animation:null,AnimationView:()=>null}}};exports.getAnimationDataByName=r;

package/components/atoms/Loader/utils.d.cts

@@ -0,0 +1,11 @@
+import { CSSObject } from '@emotion/react';
+export declare const getAnimationDataByName: (animationName?: string, animationKeyframes?: Record<string, CSSObject>, animationProps?: string) => {
+    animation: null;
+    AnimationView: () => import("@emotion/react/jsx-runtime").JSX.Element;
+} | {
+    animation: string;
+    AnimationView: () => null;
+} | {
+    animation: null;
+    AnimationView: () => null;
+};

package/components/atoms/Loader/utils.js

@@ -10,15 +10,15 @@ var a = (a, o = {}, s) => {
 			animation: null,
 			AnimationView: () => /* @__PURE__ */ i(n, { children: [
 				/* @__PURE__ */ r("span", {
-					css: /* @__PURE__ */ t({ animation: c }),
+					css: /*#__PURE__*/ t({ animation: c }),
 					className: "dot"
 				}),
 				/* @__PURE__ */ r("span", {
-					css: /* @__PURE__ */ t({ animation: c }),
+					css: /*#__PURE__*/ t({ animation: c }),
 					className: "dot"
 				}),
 				/* @__PURE__ */ r("span", {
-					css: /* @__PURE__ */ t({ animation: c }),
+					css: /*#__PURE__*/ t({ animation: c }),
 					className: "dot"
 				})
 			] })

package/components/atoms/Select/Select.cjs

@@ -1 +1 @@
-"use client";require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../utils/focus.cjs`),t=require(`../../../utils/helpers.cjs`),n=require(`../../../hooks/useLogger/useLogger.cjs`),r=require(`../../../hooks/useTheme/useTheme.cjs`),i=require(`../../layout/Portal/Portal.cjs`),a=require(`../../../constants/keyboard.cjs`),o=require(`../Icon/Icon.cjs`),s=require(`./hooks/useSelectContext.cjs`),c=require(`../../molecules/DropdownItem/DropdownItem.cjs`),l=require(`../../molecules/Dropdown/Dropdown.cjs`),u=require(`./constants.cjs`),d=require(`./SelectStyled.cjs`);let f=require(`react`),p=require(`@emotion/react/jsx-runtime`);var m=(0,f.forwardRef)((m,ee)=>{let{onSelect:h,children:g,initiator:te,onInitiatorClick:_,renderOption:v,emptyItemsResult:ne,autoOpen:re=!0,width:y=`100%`,minWidth:b,maxWidth:x=`initial`,styles:ie,activeIndex:S,value:C,onChange:w,placeholder:T=u.DEFAULT_SELECTED_VALUE,itemStringifier:E=e=>t.get(e,`name`,String(e)),itemIdentifier:D=(e,t)=>e?.value===t?.value,disabled:O=!1,items:k,adornmentStart:A,adornmentEnd:j,dropdownMaxHeight:M=`240px`,multiple:N=!1,color:ae=`primary`,searchable:P=!1,searchPlaceholder:oe=`Search...`}=m,{theme:F}=r.useTheme(),I=n.useLogger(),L=(0,f.useRef)(null),R=(0,f.useRef)(null),z=(0,f.useRef)(null),B=(0,f.useRef)(!0),[V,H]=(0,f.useState)(!1),[U,W]=(0,f.useState)(N?Array.isArray(C)?C:C?[C]:[]:C??null),[G,K]=(0,f.useState)(``),q=(0,f.useRef)(null),J=P&&G?k?.filter(e=>E(e).toLowerCase().includes(G.toLowerCase())):k,[se,ce]=(0,f.useState)(y),[le,ue]=(0,f.useState)(`bottom`),[de,fe]=(0,f.useState)(M),[pe,me]=(0,f.useState)(-9999),[he,Y]=(0,f.useState)(void 0),[ge,X]=(0,f.useState)(void 0);(0,f.useEffect)(()=>{V?(I.debug(`${u.COMPONENT_NAME}: Open`,{trigger:`programmatic`,hasItems:!!(k?.length||g),placeholder:T,currentValue:N?Array.isArray(U)?U.map(e=>e.value):[]:Array.isArray(U)?void 0:U?.value}),(z.current||L.current)&&ce(`${(z.current||L.current).getBoundingClientRect().width}px`),P&&setTimeout(()=>q.current?.focus())):K(``)},[V,y,k,g,T,N,I,P,JSON.stringify(U)]);let Z=(0,f.useCallback)(()=>{let e=z.current||L.current;if(!e)return;let t=e.getBoundingClientRect(),n=window.innerHeight||document.documentElement.clientHeight,r=n-t.bottom,i=t.top,a=parseFloat(String(M)),o=r>=a+1,s=i>=a+1,c=`bottom`;!o&&s?c=`top`:!o&&!s&&(c=r>=i?`bottom`:`top`),ue(c);let l=(c===`bottom`?r:i)-1;fe(`${Math.floor(Math.max(0,Math.min(a,l)))}px`),me(Math.floor(t.left)),c===`bottom`?(Y(Math.floor(t.bottom+1)),X(void 0)):(Y(void 0),X(Math.floor(n-t.top+1)))},[M]);(0,f.useEffect)(()=>{if(!V)return;Z();let e=()=>Z(),t=()=>Z();return window.addEventListener(`resize`,e),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,t,!0)}},[V,Z]);let Q=(0,f.useCallback)(()=>{L.current&&!O&&e.getClosestFocusable({initial:L.current,root:L.current,keyboard:!0})?.focus()},[O]),_e=()=>J?.length?we():ne,ve=({event:e,data:t})=>{if(!(O||!t))if(e.preventDefault(),N){let n=Array.isArray(U)?U:[],r=n.some(e=>D?.(e,t)??e.value===t.value),i;i=r?n.filter(e=>!(D?.(e,t)??e.value===t.value)):[...n,t],I.debug(`${u.COMPONENT_NAME}: Select (multiple)`,{value:t?.value,name:t?.name,action:r?`removed`:`added`,selectedCount:i.length}),W(i),w?.(i),h?.({event:e,data:t})}else I.debug(`${u.COMPONENT_NAME}: Select`,{value:t?.value,name:t?.name,previousValue:Array.isArray(U)?void 0:U?.value,previousName:Array.isArray(U)?void 0:U?.name}),W(t),w?.(t),h?.({event:e,data:t}),H(!1),setTimeout(()=>{Q()})},ye={onSelect:ve,value:U,itemIdentifier:D,multiple:N},be=e=>{if(!O&&[a.KEYBOARD_KEYS.ARROW_DOWN,a.KEYBOARD_KEYS.ARROW_UP].includes(e.key))switch(e.preventDefault(),e.key){case a.KEYBOARD_KEYS.ARROW_DOWN:xe(e,!1);break;case a.KEYBOARD_KEYS.ARROW_UP:xe(e,!0);break}},xe=(t,n)=>{if(O)return;t.preventDefault();let r=R.current;if(!r){I.debug(`${u.COMPONENT_NAME}: Open`,{trigger:`arrow`,direction:n?`up`:`down`}),H(!0);return}I.debug(`${u.COMPONENT_NAME}: Arrow navigation`,{direction:n?`up`:`down`}),e.getClosestFocusable({initial:n?r.appendChild(document.createElement(`div`)):r,previous:n,root:r})?.focus()},Se=()=>{if(!O&&re){let e=!V;I.debug(`${u.COMPONENT_NAME}: ${e?`Open`:`Close`}`,{trigger:`click`}),H(e)}},Ce=e=>{O||(_?_(e):Se())},we=()=>(0,p.jsx)(p.Fragment,{children:J?.map((e,n)=>v?v({item:e,index:n,isActiveItem:S==n,className:t.toNumber(S)===n?`active`:``}):(0,p.jsx)(c.DropdownItem,{value:e.value,name:e.name,className:`${t.toNumber(S)===n?`active`:``}`},`dropdown-item-${e.value}-${n}`))}),$=(0,f.useRef)(C);return(0,f.useEffect)(()=>{if(B.current){B.current=!1,$.current=C;return}if($.current!==C)if($.current=C,N){let e=Array.isArray(C)?C:C?[C]:[];W(t=>Array.isArray(t)&&Array.isArray(e)&&t.length===e.length&&t.every((t,n)=>{let r=e[n];return D?.(t,r)??t.value===r.value})?t:e)}else{let e=Array.isArray(C)?null:C??null;W(t=>t===e?t:!t||!e||Array.isArray(t)?e:D?.(t,e)??t.value===e.value?t:e)}},[C,N,D]),(0,f.useEffect)(()=>{if(!V)return;let e=e=>{let t=e.target,n=L.current,r=R.current,i=!!n&&n.contains(t),a=!!r&&r.contains(t);!i&&!a&&(I.debug(`${u.COMPONENT_NAME}: Close`,{trigger:`outsideClick`}),H(!1))};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[V,I]),(0,f.useEffect)(()=>{let t=t=>{if(!(!V||O)){if(t.key===a.KEYBOARD_KEYS.ESCAPE)t.preventDefault(),I.debug(`${u.COMPONENT_NAME}: Close`,{trigger:`escape`}),H(!1),Q();else if(t.key===a.KEYBOARD_KEYS.TAB&&(t.preventDefault(),I.debug(`${u.COMPONENT_NAME}: Close`,{trigger:`tab`}),H(!1),L.current)){let t=document.createElement(`div`);L.current.parentNode?.insertBefore(t,L.current.nextSibling);let n=e.getClosestFocusable({initial:t,root:document.body,keyboard:!0});t.remove(),n?.focus()}}};return document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`keydown`,t)}},[V,O,I,Q]),(0,f.useImperativeHandle)(ee,()=>({ref:L,isOpen:V,selectedValue:U,onSelect:ve,open:()=>{O||H(!0)},close:()=>H(!1),toggle:()=>{O||H(e=>!e)}})),(0,p.jsx)(s.SelectContext.Provider,{value:ye,children:(0,p.jsxs)(d.SelectWrapperStyled,{ref:L,theme:F,"data-testid":u.COMPONENT_NAME,styles:{...ie,width:y,maxWidth:x,minWidth:b},$disabled:O,children:[(0,p.jsx)(d.InitiatorWrapperStyled,{ref:z,theme:F,onClick:Ce,onKeyDown:be,"data-testid":`${u.COMPONENT_NAME}-initiator-wrapper`,children:te??(0,p.jsx)(d.DropdownButtonStyled,{theme:F,disabled:O,$color:ae,iconStart:A&&(0,p.jsx)(d.SelectAdornmentStyled,{theme:F,children:A}),iconEnd:(0,p.jsxs)(d.SelectAdornmentStyled,{theme:F,children:[j&&(0,p.jsx)(d.SelectAdornmentStyled,{theme:F,children:j}),(0,p.jsx)(d.ArrowIconWrapperStyled,{theme:F,$isOpen:V,children:(0,p.jsx)(o.Icon,{...t.get(F,`select.icons.arrowIcon`,{name:`arrowDown`})})})]}),"data-testid":`Select-initiator`,children:(()=>{if(N){let e=Array.isArray(U)?U:[];return e.length===0?T:e.map(e=>E(e)).join(`, `)}return Array.isArray(U)?T:U?.value?E(U):T})()})}),V&&!O&&(0,p.jsx)(i.Portal,{withWrapper:!1,blocksScroll:!0,children:(0,p.jsxs)(l.Dropdown,{"data-testid":`Select-dropdown`,styles:{position:`fixed`,width:se,maxWidth:x,minWidth:b,maxHeight:de,left:pe,...le===`bottom`?{top:he}:{bottom:ge}},ref:R,children:[P&&(0,p.jsx)(d.SelectSearchInputStyled,{ref:q,theme:F,type:`text`,value:G,onChange:e=>K(e.currentTarget.value),placeholder:oe,"data-testid":`Select-search`,onClick:e=>e.stopPropagation(),onKeyDown:e=>e.stopPropagation()}),Array.isArray(g)||(0,f.isValidElement)(g)?g:_e()]})})]})})});m.displayName=u.COMPONENT_NAME,exports.Select=m;
+"use client";const e=require("../../../utils/focus.cjs"),t=require("../../../utils/helpers.cjs"),n=require("../../../hooks/useLogger/useLogger.cjs"),r=require("../../../hooks/useTheme/useTheme.cjs"),i=require("../../layout/Portal/Portal.cjs"),a=require("../../../constants/keyboard.cjs"),o=require("../Icon/Icon.cjs"),s=require("./hooks/useSelectContext.cjs"),c=require("../../molecules/DropdownItem/DropdownItem.cjs"),l=require("../../molecules/Dropdown/Dropdown.cjs"),u=require("./constants.cjs"),d=require("./SelectStyled.cjs");let f=require("react"),p=require("@emotion/react/jsx-runtime");var m=(0,f.forwardRef)((m,ee)=>{let{onSelect:h,children:g,initiator:te,onInitiatorClick:_,renderOption:v,emptyItemsResult:ne,autoOpen:re=!0,width:y=`100%`,minWidth:b,maxWidth:x=`initial`,styles:ie,activeIndex:S,value:C,onChange:w,placeholder:T=u.DEFAULT_SELECTED_VALUE,itemStringifier:E=e=>t.get(e,`name`,String(e)),itemIdentifier:D=(e,t)=>e?.value===t?.value,disabled:O=!1,items:k,adornmentStart:A,adornmentEnd:j,dropdownMaxHeight:M=`240px`,multiple:N=!1,color:ae=`primary`,searchable:P=!1,searchPlaceholder:oe=`Search...`}=m,{theme:F}=r.useTheme(),I=n.useLogger(),L=(0,f.useRef)(null),R=(0,f.useRef)(null),z=(0,f.useRef)(null),B=(0,f.useRef)(!0),[V,H]=(0,f.useState)(!1),[U,W]=(0,f.useState)(N?Array.isArray(C)?C:C?[C]:[]:C??null),[G,K]=(0,f.useState)(``),q=(0,f.useRef)(null),J=P&&G?k?.filter(e=>E(e).toLowerCase().includes(G.toLowerCase())):k,[se,ce]=(0,f.useState)(y),[le,ue]=(0,f.useState)(`bottom`),[de,fe]=(0,f.useState)(M),[pe,me]=(0,f.useState)(-9999),[he,Y]=(0,f.useState)(void 0),[ge,X]=(0,f.useState)(void 0);(0,f.useEffect)(()=>{V?(I.debug(`${u.COMPONENT_NAME}: Open`,{trigger:`programmatic`,hasItems:!!(k?.length||g),placeholder:T,currentValue:N?Array.isArray(U)?U.map(e=>e.value):[]:Array.isArray(U)?void 0:U?.value}),(z.current||L.current)&&ce(`${(z.current||L.current).getBoundingClientRect().width}px`),P&&setTimeout(()=>q.current?.focus())):K(``)},[V,y,k,g,T,N,I,P,JSON.stringify(U)]);let Z=(0,f.useCallback)(()=>{let e=z.current||L.current;if(!e)return;let t=e.getBoundingClientRect(),n=window.innerHeight||document.documentElement.clientHeight,r=n-t.bottom,i=t.top,a=parseFloat(String(M)),o=r>=a+1,s=i>=a+1,c=`bottom`;!o&&s?c=`top`:!o&&!s&&(c=r>=i?`bottom`:`top`),ue(c);let l=(c===`bottom`?r:i)-1;fe(`${Math.floor(Math.max(0,Math.min(a,l)))}px`),me(Math.floor(t.left)),c===`bottom`?(Y(Math.floor(t.bottom+1)),X(void 0)):(Y(void 0),X(Math.floor(n-t.top+1)))},[M]);(0,f.useEffect)(()=>{if(!V)return;Z();let e=()=>Z(),t=()=>Z();return window.addEventListener(`resize`,e),window.addEventListener(`scroll`,t,!0),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`scroll`,t,!0)}},[V,Z]);let Q=(0,f.useCallback)(()=>{L.current&&!O&&e.getClosestFocusable({initial:L.current,root:L.current,keyboard:!0})?.focus()},[O]),_e=()=>J?.length?we():ne,ve=({event:e,data:t})=>{if(!(O||!t))if(e.preventDefault(),N){let n=Array.isArray(U)?U:[],r=n.some(e=>D?.(e,t)??e.value===t.value),i;i=r?n.filter(e=>!(D?.(e,t)??e.value===t.value)):[...n,t],I.debug(`${u.COMPONENT_NAME}: Select (multiple)`,{value:t?.value,name:t?.name,action:r?`removed`:`added`,selectedCount:i.length}),W(i),w?.(i),h?.({event:e,data:t})}else I.debug(`${u.COMPONENT_NAME}: Select`,{value:t?.value,name:t?.name,previousValue:Array.isArray(U)?void 0:U?.value,previousName:Array.isArray(U)?void 0:U?.name}),W(t),w?.(t),h?.({event:e,data:t}),H(!1),setTimeout(()=>{Q()})},ye={onSelect:ve,value:U,itemIdentifier:D,multiple:N},be=e=>{if(!O&&[a.KEYBOARD_KEYS.ARROW_DOWN,a.KEYBOARD_KEYS.ARROW_UP].includes(e.key))switch(e.preventDefault(),e.key){case a.KEYBOARD_KEYS.ARROW_DOWN:xe(e,!1);break;case a.KEYBOARD_KEYS.ARROW_UP:xe(e,!0);break}},xe=(t,n)=>{if(O)return;t.preventDefault();let r=R.current;if(!r){I.debug(`${u.COMPONENT_NAME}: Open`,{trigger:`arrow`,direction:n?`up`:`down`}),H(!0);return}I.debug(`${u.COMPONENT_NAME}: Arrow navigation`,{direction:n?`up`:`down`}),e.getClosestFocusable({initial:n?r.appendChild(document.createElement(`div`)):r,previous:n,root:r})?.focus()},Se=()=>{if(!O&&re){let e=!V;I.debug(`${u.COMPONENT_NAME}: ${e?`Open`:`Close`}`,{trigger:`click`}),H(e)}},Ce=e=>{O||(_?_(e):Se())},we=()=>(0,p.jsx)(p.Fragment,{children:J?.map((e,n)=>v?v({item:e,index:n,isActiveItem:S==n,className:t.toNumber(S)===n?`active`:``}):(0,p.jsx)(c.DropdownItem,{value:e.value,name:e.name,className:`${t.toNumber(S)===n?`active`:``}`},`dropdown-item-${e.value}-${n}`))}),$=(0,f.useRef)(C);return(0,f.useEffect)(()=>{if(B.current){B.current=!1,$.current=C;return}if($.current!==C)if($.current=C,N){let e=Array.isArray(C)?C:C?[C]:[];W(t=>Array.isArray(t)&&Array.isArray(e)&&t.length===e.length&&t.every((t,n)=>{let r=e[n];return D?.(t,r)??t.value===r.value})?t:e)}else{let e=Array.isArray(C)?null:C??null;W(t=>t===e?t:!t||!e||Array.isArray(t)?e:D?.(t,e)??t.value===e.value?t:e)}},[C,N,D]),(0,f.useEffect)(()=>{if(!V)return;let e=e=>{let t=e.target,n=L.current,r=R.current,i=!!n&&n.contains(t),a=!!r&&r.contains(t);!i&&!a&&(I.debug(`${u.COMPONENT_NAME}: Close`,{trigger:`outsideClick`}),H(!1))};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[V,I]),(0,f.useEffect)(()=>{let t=t=>{if(!(!V||O)){if(t.key===a.KEYBOARD_KEYS.ESCAPE)t.preventDefault(),I.debug(`${u.COMPONENT_NAME}: Close`,{trigger:`escape`}),H(!1),Q();else if(t.key===a.KEYBOARD_KEYS.TAB&&(t.preventDefault(),I.debug(`${u.COMPONENT_NAME}: Close`,{trigger:`tab`}),H(!1),L.current)){let t=document.createElement(`div`);L.current.parentNode?.insertBefore(t,L.current.nextSibling);let n=e.getClosestFocusable({initial:t,root:document.body,keyboard:!0});t.remove(),n?.focus()}}};return document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`keydown`,t)}},[V,O,I,Q]),(0,f.useImperativeHandle)(ee,()=>({ref:L,isOpen:V,selectedValue:U,onSelect:ve,open:()=>{O||H(!0)},close:()=>H(!1),toggle:()=>{O||H(e=>!e)}})),(0,p.jsx)(s.SelectContext.Provider,{value:ye,children:(0,p.jsxs)(d.SelectWrapperStyled,{ref:L,theme:F,"data-testid":u.COMPONENT_NAME,styles:{...ie,width:y,maxWidth:x,minWidth:b},$disabled:O,children:[(0,p.jsx)(d.InitiatorWrapperStyled,{ref:z,theme:F,onClick:Ce,onKeyDown:be,"data-testid":`${u.COMPONENT_NAME}-initiator-wrapper`,children:te??(0,p.jsx)(d.DropdownButtonStyled,{theme:F,disabled:O,$color:ae,iconStart:A&&(0,p.jsx)(d.SelectAdornmentStyled,{theme:F,children:A}),iconEnd:(0,p.jsxs)(d.SelectAdornmentStyled,{theme:F,children:[j&&(0,p.jsx)(d.SelectAdornmentStyled,{theme:F,children:j}),(0,p.jsx)(d.ArrowIconWrapperStyled,{theme:F,$isOpen:V,children:(0,p.jsx)(o.Icon,{...t.get(F,`select.icons.arrowIcon`,{name:`arrowDown`})})})]}),"data-testid":`Select-initiator`,children:(()=>{if(N){let e=Array.isArray(U)?U:[];return e.length===0?T:e.map(e=>E(e)).join(`, `)}return Array.isArray(U)?T:U?.value?E(U):T})()})}),V&&!O&&(0,p.jsx)(i.Portal,{withWrapper:!1,blocksScroll:!0,children:(0,p.jsxs)(l.Dropdown,{"data-testid":`Select-dropdown`,styles:{position:`fixed`,width:se,maxWidth:x,minWidth:b,maxHeight:de,left:pe,...le===`bottom`?{top:he}:{bottom:ge}},ref:R,children:[P&&(0,p.jsx)(d.SelectSearchInputStyled,{ref:q,theme:F,type:`text`,value:G,onChange:e=>K(e.currentTarget.value),placeholder:oe,"data-testid":`Select-search`,onClick:e=>e.stopPropagation(),onKeyDown:e=>e.stopPropagation()}),Array.isArray(g)||(0,f.isValidElement)(g)?g:_e()]})})]})})});m.displayName=u.COMPONENT_NAME,exports.Select=m;

package/components/atoms/Select/Select.d.cts

@@ -0,0 +1,2 @@
+import { SelectProps, SelectRef } from '../../index.js';
+export declare const Select: import('react').ForwardRefExoticComponent<SelectProps<HTMLDivElement> & import('react').RefAttributes<SelectRef>>;

package/components/atoms/Select/Select.d.ts

@@ -1,2 +1,2 @@
-import { SelectProps, SelectRef } from '../..';
+import { SelectProps, SelectRef } from '../../index.js';
 export declare const Select: import('react').ForwardRefExoticComponent<SelectProps<HTMLDivElement> & import('react').RefAttributes<SelectRef>>;

package/components/atoms/Select/Select.types.d.cts

@@ -0,0 +1,75 @@
+import { PropsWithChildren, ReactNode, MouseEvent, ReactEventHandler, Ref, InputHTMLAttributes } from 'react';
+import { Theme } from '../../../hooks/useTheme/index.js';
+import { EnumOrPrimitive, InputColorVariant } from '../../../types/index.js';
+import { ButtonProps, CommonCssComponentProps, CommonCssComponentStyledProps, OnSelectProps } from '../../index.js';
+export type ItemIdentifier = (selected: Option | null, current: Option) => boolean;
+export type SelectOnSelect = (props: OnSelectProps) => void;
+export interface Option<V = unknown> {
+    name: string;
+    value?: V;
+}
+export type renderOptionType = {
+    item: Option;
+    index: number;
+    isActiveItem: boolean;
+    className: string;
+};
+export interface SelectProps<T = HTMLDivElement> extends Omit<CommonCssComponentProps<T>, 'onSelect' | 'onChange'>, PropsWithChildren {
+    items?: (never | Option)[];
+    onSelect?: SelectOnSelect;
+    onKeyDown?: ReactEventHandler<T>;
+    onInitiatorClick?: (event: MouseEvent<T>) => void;
+    children?: ReactNode;
+    itemsCount?: number;
+    initiator?: ReactNode;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    emptyItemsResult?: ReactNode;
+    renderOption?: (data: renderOptionType) => ReactNode;
+    autoOpen?: boolean;
+    activeIndex?: string | number;
+    value?: Option | Option[] | null;
+    onChange?: (data: Option | Option[]) => void;
+    itemStringifier?: (data: Option) => string;
+    itemIdentifier?: ItemIdentifier;
+    disabled?: boolean;
+    placeholder?: string;
+    dropdownMaxHeight?: string;
+    adornmentStart?: ReactNode;
+    adornmentEnd?: ReactNode;
+    multiple?: boolean;
+    color?: EnumOrPrimitive<InputColorVariant>;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+}
+export interface SelectRef {
+    ref: Ref<HTMLDivElement>;
+    selectedValue?: Option | Option[] | null;
+    isOpen: boolean;
+    onSelect: SelectOnSelect;
+    open: () => void;
+    close: () => void;
+}
+export interface SelectContextType {
+    onSelect: SelectOnSelect;
+    value?: Option | Option[] | null;
+    itemIdentifier?: ItemIdentifier;
+    multiple?: boolean;
+}
+export interface SelectWrapperStyledProps extends CommonCssComponentStyledProps {
+    $disabled?: boolean;
+}
+export interface ArrowIconWrapperStyledProps extends CommonCssComponentStyledProps {
+    $isOpen?: boolean;
+}
+export interface SelectInitiatorWrapperStyledProps extends CommonCssComponentStyledProps {
+    width?: string;
+}
+export type DropdownIconStyledProps = CommonCssComponentStyledProps;
+export type SelectAdornmentStyledProps = PropsWithChildren<CommonCssComponentStyledProps>;
+export type SelectSearchInputStyledProps = CommonCssComponentStyledProps & InputHTMLAttributes<HTMLInputElement>;
+export interface DropdownButtonStyledProps extends ButtonProps {
+    theme?: Theme;
+    $color?: EnumOrPrimitive<InputColorVariant>;
+}

package/components/atoms/Select/Select.types.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren, ReactNode, MouseEvent, ReactEventHandler, Ref, InputHTMLAttributes } from 'react';
-import { Theme } from '../../../hooks/useTheme';
-import { EnumOrPrimitive, InputColorVariant } from '../../../types';
-import { ButtonProps, CommonCssComponentProps, CommonCssComponentStyledProps, OnSelectProps } from '../..';
+import { Theme } from '../../../hooks/useTheme/index.js';
+import { EnumOrPrimitive, InputColorVariant } from '../../../types/index.js';
+import { ButtonProps, CommonCssComponentProps, CommonCssComponentStyledProps, OnSelectProps } from '../../index.js';
 export type ItemIdentifier = (selected: Option | null, current: Option) => boolean;
 export type SelectOnSelect = (props: OnSelectProps) => void;
 export interface Option<V = unknown> {

package/components/atoms/Select/SelectStyled.cjs

@@ -1 +1 @@
-require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../utils/helpers.cjs`),t=require(`../../../tokens/utils.cjs`),n=require(`../Button/Button.cjs`);let r=require(`react`),i=require(`@emotion/react/jsx-runtime`);var a=(0,r.forwardRef)((n,r)=>{let{theme:{select:a,...o}={},styles:s={},$disabled:c,...l}=n,{boxStyles:u,restProps:d}=t.getBoxStyles(l),f=new Proxy(a||{},t.tokensHandler(o));return(0,i.jsx)(`div`,{css:[e.get(f,`default`,{}),c?e.get(f,`disabled`,{}):{},u,s],...d,ref:r})}),o=(0,r.forwardRef)((n,r)=>{let{theme:{select:a,...o}={},styles:s,...c}=n,{boxStyles:l,restProps:u}=t.getBoxStyles(c);return(0,i.jsx)(`div`,{css:[e.get(new Proxy(a||{},t.tokensHandler(o)),`initiatorWrapper`,{}),l,s],...u,ref:r})}),s=n=>{let{theme:{select:r,...a}={},$isOpen:o,styles:s,...c}=n,{boxStyles:l,restProps:u}=t.getBoxStyles(c),d=new Proxy(r||{},t.tokensHandler(a));return(0,i.jsx)(`span`,{css:[e.get(d,`arrowIconWrapper.default`,{}),o?e.get(d,`arrowIconWrapper.transform.open`,{}):e.get(d,`arrowIconWrapper.transform.close`,{}),l,s],...u})},c=r=>{let{theme:{select:a,...o}={},styles:s,$color:c=`primary`,...l}=r,{boxStyles:u,restProps:d}=t.getBoxStyles(l),f=new Proxy(a||{},t.tokensHandler(o));return(0,i.jsx)(n.Button,{css:[e.get(f,`button.default`,{}),e.get(f,[`button`,c],{}),u,s],...e.get(f,`button.attrs`,{}),...d})},l=n=>{let{theme:{select:r,...a}={},styles:o,...s}=n,{boxStyles:c,restProps:l}=t.getBoxStyles(s);return(0,i.jsx)(`span`,{css:[e.get(new Proxy(r||{},t.tokensHandler(a)),`adornment.default`,{}),c,o],...l})},u=(0,r.forwardRef)((n,r)=>{let{theme:{select:a,...o}={},styles:s,...c}=n;return(0,i.jsx)(`input`,{css:[e.get(new Proxy(a||{},t.tokensHandler(o)),`searchInput.default`,{}),s],...c,ref:r})});exports.ArrowIconWrapperStyled=s,exports.DropdownButtonStyled=c,exports.InitiatorWrapperStyled=o,exports.SelectAdornmentStyled=l,exports.SelectSearchInputStyled=u,exports.SelectWrapperStyled=a;
+const e=require("../../../utils/helpers.cjs"),t=require("../../../tokens/utils.cjs"),n=require("../Button/Button.cjs");let r=require("react"),i=require("@emotion/react/jsx-runtime");var a=(0,r.forwardRef)((n,r)=>{let{theme:{select:a,...o}={},styles:s={},$disabled:c,...l}=n,{boxStyles:u,restProps:d}=t.getBoxStyles(l),f=new Proxy(a||{},t.tokensHandler(o));return(0,i.jsx)(`div`,{css:[e.get(f,`default`,{}),c?e.get(f,`disabled`,{}):{},u,s],...d,ref:r})}),o=(0,r.forwardRef)((n,r)=>{let{theme:{select:a,...o}={},styles:s,...c}=n,{boxStyles:l,restProps:u}=t.getBoxStyles(c);return(0,i.jsx)(`div`,{css:[e.get(new Proxy(a||{},t.tokensHandler(o)),`initiatorWrapper`,{}),l,s],...u,ref:r})}),s=n=>{let{theme:{select:r,...a}={},$isOpen:o,styles:s,...c}=n,{boxStyles:l,restProps:u}=t.getBoxStyles(c),d=new Proxy(r||{},t.tokensHandler(a));return(0,i.jsx)(`span`,{css:[e.get(d,`arrowIconWrapper.default`,{}),o?e.get(d,`arrowIconWrapper.transform.open`,{}):e.get(d,`arrowIconWrapper.transform.close`,{}),l,s],...u})},c=r=>{let{theme:{select:a,...o}={},styles:s,$color:c=`primary`,...l}=r,{boxStyles:u,restProps:d}=t.getBoxStyles(l),f=new Proxy(a||{},t.tokensHandler(o));return(0,i.jsx)(n.Button,{css:[e.get(f,`button.default`,{}),e.get(f,[`button`,c],{}),u,s],...e.get(f,`button.attrs`,{}),...d})},l=n=>{let{theme:{select:r,...a}={},styles:o,...s}=n,{boxStyles:c,restProps:l}=t.getBoxStyles(s);return(0,i.jsx)(`span`,{css:[e.get(new Proxy(r||{},t.tokensHandler(a)),`adornment.default`,{}),c,o],...l})},u=(0,r.forwardRef)((n,r)=>{let{theme:{select:a,...o}={},styles:s,...c}=n;return(0,i.jsx)(`input`,{css:[e.get(new Proxy(a||{},t.tokensHandler(o)),`searchInput.default`,{}),s],...c,ref:r})});exports.ArrowIconWrapperStyled=s,exports.DropdownButtonStyled=c,exports.InitiatorWrapperStyled=o,exports.SelectAdornmentStyled=l,exports.SelectSearchInputStyled=u,exports.SelectWrapperStyled=a;

package/components/atoms/Select/SelectStyled.d.cts

@@ -0,0 +1,7 @@
+import { SelectWrapperStyledProps, SelectInitiatorWrapperStyledProps, ArrowIconWrapperStyledProps, SelectAdornmentStyledProps, DropdownButtonStyledProps, SelectSearchInputStyledProps } from './Select.types.js';
+export declare const SelectWrapperStyled: import('react').ForwardRefExoticComponent<Omit<SelectWrapperStyledProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const InitiatorWrapperStyled: import('react').ForwardRefExoticComponent<Omit<SelectInitiatorWrapperStyledProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ArrowIconWrapperStyled: (props: ArrowIconWrapperStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DropdownButtonStyled: (props: DropdownButtonStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SelectAdornmentStyled: (props: SelectAdornmentStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SelectSearchInputStyled: import('react').ForwardRefExoticComponent<Omit<SelectSearchInputStyledProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;

package/components/atoms/Select/SelectStyled.d.ts

@@ -1,4 +1,4 @@
-import { SelectWrapperStyledProps, SelectInitiatorWrapperStyledProps, ArrowIconWrapperStyledProps, SelectAdornmentStyledProps, DropdownButtonStyledProps, SelectSearchInputStyledProps } from './Select.types';
+import { SelectWrapperStyledProps, SelectInitiatorWrapperStyledProps, ArrowIconWrapperStyledProps, SelectAdornmentStyledProps, DropdownButtonStyledProps, SelectSearchInputStyledProps } from './Select.types.js';
 export declare const SelectWrapperStyled: import('react').ForwardRefExoticComponent<Omit<SelectWrapperStyledProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export declare const InitiatorWrapperStyled: import('react').ForwardRefExoticComponent<Omit<SelectInitiatorWrapperStyledProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ArrowIconWrapperStyled: (props: ArrowIconWrapperStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/atoms/Select/constants.d.cts

@@ -0,0 +1,2 @@
+export declare const COMPONENT_NAME = "Select";
+export declare const DEFAULT_SELECTED_VALUE = "Select";

package/components/atoms/Select/hooks/index.d.cts

@@ -0,0 +1 @@
+export * from './useSelectContext.js';

package/components/atoms/Select/hooks/index.d.ts

@@ -1 +1 @@
-export * from './useSelectContext';
+export * from './useSelectContext.js';

package/components/atoms/Select/hooks/useSelectContext.cjs

@@ -1 +1 @@
-"use client";require(`../../../../_virtual/_rolldown/runtime.cjs`);let e=require(`react`);var t=(0,e.createContext)(void 0),n=()=>{let n=(0,e.useContext)(t);if(!n)throw Error(`useSelectContext must be used within a Select component or children`);return n};exports.SelectContext=t,exports.useSelectContext=n;
+"use client";let e=require("react");var t=(0,e.createContext)(void 0),n=()=>{let n=(0,e.useContext)(t);if(!n)throw Error(`useSelectContext must be used within a Select component or children`);return n};exports.SelectContext=t,exports.useSelectContext=n;

package/components/atoms/Select/hooks/useSelectContext.d.cts

@@ -0,0 +1,3 @@
+import { SelectContextType } from '../index.js';
+export declare const SelectContext: import('react').Context<SelectContextType | undefined>;
+export declare const useSelectContext: () => SelectContextType;

package/components/atoms/Select/hooks/useSelectContext.d.ts

@@ -1,3 +1,3 @@
-import { SelectContextType } from '..';
+import { SelectContextType } from '../index.js';
 export declare const SelectContext: import('react').Context<SelectContextType | undefined>;
 export declare const useSelectContext: () => SelectContextType;

package/components/atoms/Select/index.d.cts

@@ -0,0 +1,3 @@
+export * from './Select.js';
+export * from './hooks/index.js';
+export * from './Select.types.js';

package/components/atoms/Select/index.d.ts

@@ -1,3 +1,3 @@
-export * from './Select';
-export * from './hooks';
-export * from './Select.types';
+export * from './Select.js';
+export * from './hooks/index.js';
+export * from './Select.types.js';

package/components/atoms/Separator/Separator.cjs

@@ -1 +1 @@
-"use client";require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../types/separator.cjs`),t=require(`../../../hooks/useTheme/useTheme.cjs`),n=require(`./constants.cjs`),r=require(`./SeparatorStyled.cjs`);let i=require(`react`),a=require(`@emotion/react/jsx-runtime`);var o=(0,i.forwardRef)((i,o)=>{let{as:s=`div`,styles:c={},label:l,labelPosition:u=e.SeparatorLabelPosition.Center,size:d,variant:f,orientation:p,length:m,color:h,labelColor:g,..._}=i,{theme:v}=t.useTheme(),y=!!l,b=y&&u===e.SeparatorLabelPosition.Start,x=y&&u===e.SeparatorLabelPosition.Center,S=y&&u===e.SeparatorLabelPosition.End,C=s===`hr`&&y?`div`:s,w=s===`hr`?`hr`:s;return(0,a.jsxs)(r.SeparatorWrapperStyled,{theme:v,styles:c,ref:o,"data-testid":n.COMPONENT_NAME,$as:C,$orientation:p,$length:m,..._,children:[b&&(0,a.jsx)(r.SeparatorLabelStyled,{theme:v,$size:d,$labelColor:g,children:l}),(0,a.jsx)(r.SeparatorLineStyled,{theme:v,$as:w,$color:h,$size:d,$variant:f,$orientation:p}),x&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.SeparatorLabelStyled,{theme:v,$size:d,$labelColor:g,children:l}),(0,a.jsx)(r.SeparatorLineStyled,{theme:v,$as:w,$color:h,$size:d,$variant:f,$orientation:p})]}),S&&(0,a.jsx)(r.SeparatorLabelStyled,{theme:v,$size:d,$labelColor:g,children:l})]})});o.displayName=n.COMPONENT_NAME,exports.Separator=o;
+"use client";const e=require("../../../types/separator.cjs"),t=require("../../../hooks/useTheme/useTheme.cjs"),n=require("./constants.cjs"),r=require("./SeparatorStyled.cjs");let i=require("react"),a=require("@emotion/react/jsx-runtime");var o=(0,i.forwardRef)((i,o)=>{let{as:s=`div`,styles:c={},label:l,labelPosition:u=e.SeparatorLabelPosition.Center,size:d,variant:f,orientation:p,length:m,color:h,labelColor:g,..._}=i,{theme:v}=t.useTheme(),y=!!l,b=y&&u===e.SeparatorLabelPosition.Start,x=y&&u===e.SeparatorLabelPosition.Center,S=y&&u===e.SeparatorLabelPosition.End,C=s===`hr`&&y?`div`:s,w=s===`hr`?`hr`:s;return(0,a.jsxs)(r.SeparatorWrapperStyled,{theme:v,styles:c,ref:o,"data-testid":n.COMPONENT_NAME,$as:C,$orientation:p,$length:m,..._,children:[b&&(0,a.jsx)(r.SeparatorLabelStyled,{theme:v,$size:d,$labelColor:g,children:l}),(0,a.jsx)(r.SeparatorLineStyled,{theme:v,$as:w,$color:h,$size:d,$variant:f,$orientation:p}),x&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.SeparatorLabelStyled,{theme:v,$size:d,$labelColor:g,children:l}),(0,a.jsx)(r.SeparatorLineStyled,{theme:v,$as:w,$color:h,$size:d,$variant:f,$orientation:p})]}),S&&(0,a.jsx)(r.SeparatorLabelStyled,{theme:v,$size:d,$labelColor:g,children:l})]})});o.displayName=n.COMPONENT_NAME,exports.Separator=o;

package/components/atoms/Separator/Separator.d.cts

@@ -0,0 +1,2 @@
+import { SeparatorElement, SeparatorProps } from './Separator.types.js';
+export declare const Separator: import('react').ForwardRefExoticComponent<SeparatorProps & import('react').RefAttributes<SeparatorElement>>;

package/components/atoms/Separator/Separator.d.ts

@@ -1,2 +1,2 @@
-import { SeparatorElement, SeparatorProps } from './Separator.types';
+import { SeparatorElement, SeparatorProps } from './Separator.types.js';
 export declare const Separator: import('react').ForwardRefExoticComponent<SeparatorProps & import('react').RefAttributes<SeparatorElement>>;

package/components/atoms/Separator/Separator.types.d.cts

@@ -0,0 +1,34 @@
+import { PropsWithChildren } from 'react';
+import { BoxCssComponentProps, BoxCssComponentStyledProps, CommonCssComponentProps, CommonCssComponentStyledProps, TypographyStyledProps } from '../../index.js';
+import { EnumOrPrimitive, KeysByPrefix, Orientation, SeparatorLabelPosition, SeparatorVariant, SizeVariant } from '../../../types/index.js';
+import { Unit } from '../../../tokens/index.js';
+type SpacingKeys = KeysByPrefix<BoxCssComponentProps, 'margin'> | KeysByPrefix<BoxCssComponentProps, 'padding'>;
+export type SeparatorElement = HTMLDivElement | HTMLHRElement | HTMLSpanElement;
+export type SeparatorAs = 'div' | 'hr' | 'span';
+export interface SeparatorProps extends CommonCssComponentProps<SeparatorElement>, Pick<BoxCssComponentProps, SpacingKeys> {
+    orientation?: EnumOrPrimitive<Orientation>;
+    length?: `${number}${Unit}`;
+    color?: string;
+    size?: SizeVariant;
+    variant?: EnumOrPrimitive<SeparatorVariant>;
+    as?: SeparatorAs;
+    label?: string;
+    labelPosition?: EnumOrPrimitive<SeparatorLabelPosition>;
+    labelColor?: string;
+}
+export interface SeparatorWrapperStyledProps extends CommonCssComponentStyledProps<SeparatorElement>, BoxCssComponentStyledProps<SeparatorElement>, PropsWithChildren {
+    $as?: SeparatorAs;
+    $orientation?: EnumOrPrimitive<Orientation>;
+    $length?: `${number}${Unit}`;
+}
+export interface SeparatorLineStyledProps extends Omit<CommonCssComponentStyledProps<SeparatorElement>, 'ref'>, PropsWithChildren {
+    $as?: SeparatorAs;
+    $orientation?: EnumOrPrimitive<Orientation>;
+    $color?: string;
+    $size?: EnumOrPrimitive<SizeVariant>;
+    $variant?: EnumOrPrimitive<SeparatorVariant>;
+}
+export interface SeparatorLabelStyledProps extends TypographyStyledProps {
+    $labelColor?: string;
+}
+export {};

package/components/atoms/Separator/Separator.types.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-import { BoxCssComponentProps, BoxCssComponentStyledProps, CommonCssComponentProps, CommonCssComponentStyledProps, TypographyStyledProps } from '../..';
-import { EnumOrPrimitive, KeysByPrefix, Orientation, SeparatorLabelPosition, SeparatorVariant, SizeVariant } from '../../../types';
-import { Unit } from '../../../tokens';
+import { BoxCssComponentProps, BoxCssComponentStyledProps, CommonCssComponentProps, CommonCssComponentStyledProps, TypographyStyledProps } from '../../index.js';
+import { EnumOrPrimitive, KeysByPrefix, Orientation, SeparatorLabelPosition, SeparatorVariant, SizeVariant } from '../../../types/index.js';
+import { Unit } from '../../../tokens/index.js';
 type SpacingKeys = KeysByPrefix<BoxCssComponentProps, 'margin'> | KeysByPrefix<BoxCssComponentProps, 'padding'>;
 export type SeparatorElement = HTMLDivElement | HTMLHRElement | HTMLSpanElement;
 export type SeparatorAs = 'div' | 'hr' | 'span';

package/components/atoms/Separator/SeparatorStyled.cjs

@@ -1 +1 @@
-"use client";require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../utils/helpers.cjs`),t=require(`../../../tokens/utils.cjs`),n=require(`../../../types/common.cjs`),r=require(`../../../types/separator.cjs`),i=require(`../Typography/TypographyStyled.cjs`);let a=require(`react`),o=require(`@emotion/react/jsx-runtime`);var s=(0,a.forwardRef)((r,i)=>{let{theme:{separator:a,...s}={},styles:c={},$as:l=`div`,$orientation:u=n.Orientation.Horizontal,$length:d,...f}=r,p={[u===n.Orientation.Horizontal?`width`:`height`]:d},{boxStyles:m,restProps:h}=t.getBoxStyles(f),g=new Proxy(a||{},t.tokensHandler(s)),_=[e.get(g,`default`,{}),e.get(g,u,{}),d?p:{},m,c];return l===`hr`?(0,o.jsx)(`hr`,{css:_,...h,ref:i}):l===`span`?(0,o.jsx)(`span`,{css:_,...h,ref:i}):(0,o.jsx)(`div`,{css:_,...h,ref:i})}),c=i=>{let{theme:{separator:a,colors:s,values:c,...l}={},styles:u={},$as:d=`div`,$orientation:f=n.Orientation.Horizontal,$color:p,$size:m=n.SizeVariant.Sm,$variant:h=r.SeparatorVariant.Solid,...g}=i,{boxStyles:_,restProps:v}=t.getBoxStyles(g),y=new Proxy(a||{},t.tokensHandler(l)),b=`${e.get(c,`separator.thickness.${m}`,c?.separator?.thickness?.sm)} ${h} ${t.resolveThemeColor(s,p??`border.default`)}`,x=f===n.Orientation.Horizontal?`borderTop`:`borderLeft`,S={...e.get(y,`line.${f}`,{}),[x]:b};return(0,o.jsx)(d,{css:[e.get(y,`line.default`,{}),S,_,u],...v})},l=n=>{let{theme:{separator:r,colors:a,...s}={},$labelColor:c,$size:l,children:u,styles:d,...f}=n,{boxStyles:p,restProps:m}=t.getBoxStyles(f),h=new Proxy(r||{},t.tokensHandler(s)),g=t.resolveThemeColor(a,c??`text.caption`);return(0,o.jsx)(i.TypographyStyled,{css:[e.get(h,`label.default`,{}),p,d],...e.get(h,`label.attrs.${l}`,{}),$color:g,...m,children:u})};exports.SeparatorLabelStyled=l,exports.SeparatorLineStyled=c,exports.SeparatorWrapperStyled=s;
+"use client";const e=require("../../../utils/helpers.cjs"),t=require("../../../tokens/utils.cjs"),n=require("../../../types/common.cjs"),r=require("../../../types/separator.cjs"),i=require("../Typography/TypographyStyled.cjs");let a=require("react"),o=require("@emotion/react/jsx-runtime");var s=(0,a.forwardRef)((r,i)=>{let{theme:{separator:a,...s}={},styles:c={},$as:l=`div`,$orientation:u=n.Orientation.Horizontal,$length:d,...f}=r,p={[u===n.Orientation.Horizontal?`width`:`height`]:d},{boxStyles:m,restProps:h}=t.getBoxStyles(f),g=new Proxy(a||{},t.tokensHandler(s)),_=[e.get(g,`default`,{}),e.get(g,u,{}),d?p:{},m,c];return l===`hr`?(0,o.jsx)(`hr`,{css:_,...h,ref:i}):l===`span`?(0,o.jsx)(`span`,{css:_,...h,ref:i}):(0,o.jsx)(`div`,{css:_,...h,ref:i})}),c=i=>{let{theme:{separator:a,colors:s,values:c,...l}={},styles:u={},$as:d=`div`,$orientation:f=n.Orientation.Horizontal,$color:p,$size:m=n.SizeVariant.Sm,$variant:h=r.SeparatorVariant.Solid,...g}=i,{boxStyles:_,restProps:v}=t.getBoxStyles(g),y=new Proxy(a||{},t.tokensHandler(l)),b=`${e.get(c,`separator.thickness.${m}`,c?.separator?.thickness?.sm)} ${h} ${t.resolveThemeColor(s,p??`border.default`)}`,x=f===n.Orientation.Horizontal?`borderTop`:`borderLeft`,S={...e.get(y,`line.${f}`,{}),[x]:b};return(0,o.jsx)(d,{css:[e.get(y,`line.default`,{}),S,_,u],...v})},l=n=>{let{theme:{separator:r,colors:a,...s}={},$labelColor:c,$size:l,children:u,styles:d,...f}=n,{boxStyles:p,restProps:m}=t.getBoxStyles(f),h=new Proxy(r||{},t.tokensHandler(s)),g=t.resolveThemeColor(a,c??`text.caption`);return(0,o.jsx)(i.TypographyStyled,{css:[e.get(h,`label.default`,{}),p,d],...e.get(h,`label.attrs.${l}`,{}),$color:g,...m,children:u})};exports.SeparatorLabelStyled=l,exports.SeparatorLineStyled=c,exports.SeparatorWrapperStyled=s;

package/components/atoms/Separator/SeparatorStyled.d.cts

@@ -0,0 +1,4 @@
+import { SeparatorElement, SeparatorLabelStyledProps, SeparatorLineStyledProps, SeparatorWrapperStyledProps } from './/index.js';
+export declare const SeparatorWrapperStyled: import('react').ForwardRefExoticComponent<Omit<SeparatorWrapperStyledProps, "ref"> & import('react').RefAttributes<SeparatorElement>>;
+export declare const SeparatorLineStyled: (props: SeparatorLineStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SeparatorLabelStyled: (props: SeparatorLabelStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/atoms/Separator/SeparatorStyled.d.ts

@@ -1,4 +1,4 @@
-import { SeparatorElement, SeparatorLabelStyledProps, SeparatorLineStyledProps, SeparatorWrapperStyledProps } from './';
+import { SeparatorElement, SeparatorLabelStyledProps, SeparatorLineStyledProps, SeparatorWrapperStyledProps } from './/index.js';
 export declare const SeparatorWrapperStyled: import('react').ForwardRefExoticComponent<Omit<SeparatorWrapperStyledProps, "ref"> & import('react').RefAttributes<SeparatorElement>>;
 export declare const SeparatorLineStyled: (props: SeparatorLineStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export declare const SeparatorLabelStyled: (props: SeparatorLabelStyledProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/components/atoms/Separator/constants.d.cts

@@ -0,0 +1 @@
+export declare const COMPONENT_NAME = "Separator";

package/components/atoms/Separator/index.d.cts

@@ -0,0 +1,2 @@
+export * from './Separator.js';
+export * from './Separator.types.js';

package/components/atoms/Separator/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Separator';
-export * from './Separator.types';
+export * from './Separator.js';
+export * from './Separator.types.js';

package/components/atoms/Skeleton/Skeleton.cjs

@@ -1 +1 @@
-"use client";require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../types/skeleton.cjs`),t=require(`../../../hooks/useTheme/useTheme.cjs`),n=require(`./constants.cjs`),r=require(`./SkeletonStyled.cjs`);let i=require(`react`),a=require(`@emotion/react/jsx-runtime`);var o=(0,i.forwardRef)((i,o)=>{let{variant:s=e.SkeletonVariant.Rounded,children:c,animationName:l,animationProps:u=n.BASE_ANIMATION,width:d,height:f,backgroundColor:p,...m}=i,{theme:h}=t.useTheme();return(0,a.jsx)(r.SkeletonStyled,{ref:o,theme:h,$width:d,$height:f,$backgroundColor:p,$variant:s,$animationName:l,$animationProps:u,"data-testid":n.COMPONENT_NAME,...m,children:c})});exports.Skeleton=o;
+"use client";const e=require("../../../types/skeleton.cjs"),t=require("../../../hooks/useTheme/useTheme.cjs"),n=require("./constants.cjs"),r=require("./SkeletonStyled.cjs");let i=require("react"),a=require("@emotion/react/jsx-runtime");var o=(0,i.forwardRef)((i,o)=>{let{variant:s=e.SkeletonVariant.Rounded,children:c,animationName:l,animationProps:u=n.BASE_ANIMATION,width:d,height:f,backgroundColor:p,...m}=i,{theme:h}=t.useTheme();return(0,a.jsx)(r.SkeletonStyled,{ref:o,theme:h,$width:d,$height:f,$backgroundColor:p,$variant:s,$animationName:l,$animationProps:u,"data-testid":n.COMPONENT_NAME,...m,children:c})});exports.Skeleton=o;

package/components/atoms/Skeleton/Skeleton.d.cts

@@ -0,0 +1,2 @@
+import { SkeletonProps } from './Skeleton.types.js';
+export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLSpanElement>>;

package/components/atoms/Skeleton/Skeleton.d.ts

@@ -1,2 +1,2 @@
-import { SkeletonProps } from './Skeleton.types';
+import { SkeletonProps } from './Skeleton.types.js';
 export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLSpanElement>>;

package/components/atoms/Skeleton/Skeleton.types.d.cts

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+import { EnumOrPrimitive, NullableType, SkeletonVariant } from '../../../types/index.js';
+import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../../index.js';
+export interface SkeletonProps extends CommonCssComponentProps<HTMLSpanElement>, PropsWithChildren {
+    animationName?: NullableType<string>;
+    animationProps?: string;
+    width?: string;
+    height?: string;
+    backgroundColor?: string;
+    variant?: EnumOrPrimitive<SkeletonVariant>;
+}
+export interface SkeletonPropsStyled extends CommonCssComponentStyledProps<HTMLSpanElement>, PropsWithChildren {
+    $animationName?: NullableType<string>;
+    $animationProps?: string;
+    $width?: string;
+    $height?: string;
+    $backgroundColor?: string;
+    $variant?: EnumOrPrimitive<SkeletonVariant>;
+}

package/components/atoms/Skeleton/Skeleton.types.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
-import { EnumOrPrimitive, NullableType, SkeletonVariant } from '../../../types';
-import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
+import { EnumOrPrimitive, NullableType, SkeletonVariant } from '../../../types/index.js';
+import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../../index.js';
 export interface SkeletonProps extends CommonCssComponentProps<HTMLSpanElement>, PropsWithChildren {
     animationName?: NullableType<string>;
     animationProps?: string;

package/components/atoms/Skeleton/SkeletonStyled.cjs

@@ -1 +1 @@
-"use client";require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../utils/helpers.cjs`),t=require(`../../../tokens/utils.cjs`),n=require(`../../../types/skeleton.cjs`);let r=require(`react`),i=require(`@emotion/react/jsx-runtime`);var a=(0,r.forwardRef)((r,a)=>{let{theme:{skeleton:o,animations:s,colors:c,...l}={},$variant:u=n.SkeletonVariant.Rounded,styles:d={},$animationName:f=`blinkKeyframes`,$animationProps:p,$backgroundColor:m,...h}=r,{boxStyles:g,restProps:_}=t.getBoxStyles(h),v=new Proxy(o||{},t.tokensHandler(l)),y=e.get(s,f??``,null),b=y?t.convertJsonToCssKeyframeCss(y):f,x={animation:`${b} ${p}`},S=m?{backgroundColor:t.resolveThemeColor(c,m)}:{};return(0,i.jsx)(`span`,{css:[e.get(v,`default`,{}),e.get(v,u,{}),S,g,b?x:{},d],..._,ref:a})});exports.SkeletonStyled=a;
+"use client";const e=require("../../../utils/helpers.cjs"),t=require("../../../tokens/utils.cjs"),n=require("../../../types/skeleton.cjs");let r=require("react"),i=require("@emotion/react/jsx-runtime");var a=(0,r.forwardRef)((r,a)=>{let{theme:{skeleton:o,animations:s,colors:c,...l}={},$variant:u=n.SkeletonVariant.Rounded,styles:d={},$animationName:f=`blinkKeyframes`,$animationProps:p,$backgroundColor:m,...h}=r,{boxStyles:g,restProps:_}=t.getBoxStyles(h),v=new Proxy(o||{},t.tokensHandler(l)),y=e.get(s,f??``,null),b=y?t.convertJsonToCssKeyframeCss(y):f,x={animation:`${b} ${p}`},S=m?{backgroundColor:t.resolveThemeColor(c,m)}:{};return(0,i.jsx)(`span`,{css:[e.get(v,`default`,{}),e.get(v,u,{}),S,g,b?x:{},d],..._,ref:a})});exports.SkeletonStyled=a;

package/components/atoms/Skeleton/SkeletonStyled.d.cts

@@ -0,0 +1,2 @@
+import { SkeletonPropsStyled } from './/index.js';
+export declare const SkeletonStyled: import('react').ForwardRefExoticComponent<Omit<SkeletonPropsStyled, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;

package/components/atoms/Skeleton/SkeletonStyled.d.ts

@@ -1,2 +1,2 @@
-import { SkeletonPropsStyled } from './';
+import { SkeletonPropsStyled } from './/index.js';
 export declare const SkeletonStyled: import('react').ForwardRefExoticComponent<Omit<SkeletonPropsStyled, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;

package/components/atoms/Skeleton/constants.cjs

@@ -1 +1 @@
-const e=require(`../../../constants/timers.cjs`);var t=`Skeleton`,n=`${e.BASE_ANIMATION_MS}ms ease-in-out 500ms infinite`;exports.BASE_ANIMATION=n,exports.COMPONENT_NAME=t;
+const e=require("../../../constants/timers.cjs");var t=`Skeleton`,n=`${e.BASE_ANIMATION_MS}ms ease-in-out 500ms infinite`;exports.BASE_ANIMATION=n,exports.COMPONENT_NAME=t;

package/components/atoms/Skeleton/constants.d.cts

@@ -0,0 +1,2 @@
+export declare const COMPONENT_NAME = "Skeleton";
+export declare const BASE_ANIMATION = "2000ms ease-in-out 500ms infinite";

package/components/atoms/Skeleton/index.d.cts

@@ -0,0 +1,2 @@
+export * from './Skeleton.js';
+export * from './Skeleton.types.js';

package/components/atoms/Skeleton/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Skeleton';
-export * from './Skeleton.types';
+export * from './Skeleton.js';
+export * from './Skeleton.types.js';

package/components/atoms/Slider/Slider.cjs

@@ -1 +1 @@
-"use client";require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../utils/setInRange.cjs`),t=require(`../../../hooks/useTheme/useTheme.cjs`),n=require(`./SliderStyled.cjs`),r=require(`./constants.cjs`);let i=require(`react`),a=require(`@emotion/react/jsx-runtime`);var o=(0,i.forwardRef)((o,s)=>{let{min:c=0,max:l=100,value:u,onChange:d,disabled:f,...p}=o,{theme:m}=t.useTheme(),[h,g]=(0,i.useState)(u||c);return(0,i.useEffect)(()=>{u!==void 0&&g(u)},[u]),(0,a.jsx)(n.StyledSlider,{"data-testid":r.COMPONENT_NAME,type:`range`,role:`slider`,min:c,max:l,value:h,disabled:f,theme:m,fillRatio:l>c?(h-c)/(l-c):c,onChange:t=>{let n=e.setInRange({min:c,max:l,value:Number(t.target.value)});g(n),d?.(n)},"aria-valuenow":h,"aria-valuemin":c,"aria-valuemax":l,"aria-disabled":f,ref:s,...p})});o.displayName=r.COMPONENT_NAME,exports.Slider=o;
+"use client";const e=require("../../../utils/setInRange.cjs"),t=require("../../../hooks/useTheme/useTheme.cjs"),n=require("./SliderStyled.cjs"),r=require("./constants.cjs");let i=require("react"),a=require("@emotion/react/jsx-runtime");var o=(0,i.forwardRef)((o,s)=>{let{min:c=0,max:l=100,value:u,onChange:d,disabled:f,...p}=o,{theme:m}=t.useTheme(),[h,g]=(0,i.useState)(u||c);return(0,i.useEffect)(()=>{u!==void 0&&g(u)},[u]),(0,a.jsx)(n.StyledSlider,{"data-testid":r.COMPONENT_NAME,type:`range`,role:`slider`,min:c,max:l,value:h,disabled:f,theme:m,fillRatio:l>c?(h-c)/(l-c):c,onChange:t=>{let n=e.setInRange({min:c,max:l,value:Number(t.target.value)});g(n),d?.(n)},"aria-valuenow":h,"aria-valuemin":c,"aria-valuemax":l,"aria-disabled":f,ref:s,...p})});o.displayName=r.COMPONENT_NAME,exports.Slider=o;

package/components/atoms/Slider/Slider.d.cts

@@ -0,0 +1,20 @@
+import { SliderProps } from './Slider.types.js';
+/**
+ * Slider component allows users to select a numeric value from a specified range by dragging a thumb.
+ *
+ * Supports both controlled and uncontrolled usage.
+ * The background visually indicates the current value as a percentage of the range.
+ * Can be disabled and accepts custom styles.
+ *
+ * @component
+ * @param {number} [min=0] - Minimum value of the slider.
+ * @param {number} [max=100] - Maximum value of the slider.
+ * @param {number} [value] - Current value (for controlled usage).
+ * @param {(value: number) => void} [onChange] - Callback fired when the value changes.
+ * @param {boolean} [disabled] - If true, the slider is disabled.
+ * @param {object} [styles] - Additional custom styles for the slider.
+ *
+ * @example
+ * <Slider min={0} max={10} value={5} onChange={val => console.log(val)} />
+ */
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLInputElement>>;

package/components/atoms/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-import { SliderProps } from './Slider.types';
+import { SliderProps } from './Slider.types.js';
 /**
  * Slider component allows users to select a numeric value from a specified range by dragging a thumb.
  *

package/components/atoms/Slider/Slider.types.d.cts

@@ -0,0 +1,17 @@
+import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../../index.js';
+export interface SliderProps extends Omit<CommonCssComponentProps<HTMLInputElement>, 'onChange'> {
+    min?: number;
+    max?: number;
+    value?: number;
+    onChange?: (value: number) => void;
+    step?: number;
+    disabled?: boolean;
+}
+export interface SliderStyledProps extends CommonCssComponentStyledProps<HTMLInputElement> {
+    type: string;
+    fillRatio: number;
+    min?: number;
+    max?: number;
+    value?: number;
+    disabled?: boolean;
+}

package/components/atoms/Slider/Slider.types.d.ts

@@ -1,4 +1,4 @@
-import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../..';
+import { CommonCssComponentProps, CommonCssComponentStyledProps } from '../../index.js';
 export interface SliderProps extends Omit<CommonCssComponentProps<HTMLInputElement>, 'onChange'> {
     min?: number;
     max?: number;

package/components/atoms/Slider/SliderStyled.cjs

@@ -1 +1 @@
-"use client";require(`../../../_virtual/_rolldown/runtime.cjs`);const e=require(`../../../utils/helpers.cjs`),t=require(`../../../tokens/utils.cjs`);let n=require(`react`),r=require(`@emotion/react/jsx-runtime`);var i=(0,n.forwardRef)((n,i)=>{let{theme:{slider:a,...o}={},fillRatio:s,styles:c={},...l}=n;return(0,r.jsx)(`input`,{css:[e.get(new Proxy(a||{},t.tokensHandler(o)),`default`,{}),{"--gd-slider-fill-ratio":s},c],...l,ref:i})});exports.StyledSlider=i;
+"use client";const e=require("../../../utils/helpers.cjs"),t=require("../../../tokens/utils.cjs");let n=require("react"),r=require("@emotion/react/jsx-runtime");var i=(0,n.forwardRef)((n,i)=>{let{theme:{slider:a,...o}={},fillRatio:s,styles:c={},...l}=n;return(0,r.jsx)(`input`,{css:[e.get(new Proxy(a||{},t.tokensHandler(o)),`default`,{}),{"--gd-slider-fill-ratio":s},c],...l,ref:i})});exports.StyledSlider=i;