@choco-vanille/ui 1.14.2 → 1.14.4

package/dist/components/forms/select/components/select-content/styles/SelectContent.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit113.css';import '../../../../../../ui-kit6.css';import '../../../../../../ui-kit9.css';import '../../../../../../ui-kit4.css';import '../../../../../../ui-kit7.css';import '../../../../../../ui-kit12.css';import '../../../../../../ui-kit10.css';import '../../../../../../ui-kit5.css';import '../../../../../../ui-kit8.css';import '../../../../../../ui-kit14.css';import '../../../../../../ui-kit11.css';import '../../../../../../ui-kit3.css';import '../../../../../../ui-kit13.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit106.css';import '../../../../../../ui-kit8.css';import '../../../../../../ui-kit3.css';import '../../../../../../ui-kit5.css';import '../../../../../../ui-kit4.css';import '../../../../../../ui-kit6.css';import '../../../../../../ui-kit10.css';import '../../../../../../ui-kit14.css';import '../../../../../../ui-kit12.css';import '../../../../../../ui-kit9.css';import '../../../../../../ui-kit11.css';import '../../../../../../ui-kit13.css';import '../../../../../../ui-kit7.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                                                    */
 /* empty css                                                                     */
 /* empty css                                                                             */

package/dist/components/forms/select/components/select-field/SelectField.cjs

@@ -1,2 +1,2 @@
-"use strict";const l=require("react/jsx-runtime"),i=require("react"),G=require("../../../../layout/flex/Flex.cjs");require("../../../../layout/flex/styles/Flex.css.cjs");const H=require("../../../_shared/components/form-label/FormLabel.cjs"),M=require("../../../_shared/components/helper-text/HelperText.cjs"),a=require("../../Select.cjs"),N=require("./hooks/useSelectField.hook.cjs"),w=require("./utils/flattenItems.utils.cjs"),g=i.memo(({label:c,helperText:t,error:s,startIcon:o,placeholder:v,size:q="md",fontSize:n="md",width:h,disabled:m,required:I,listboxAriaLabel:F,options:u,className:y,value:C,defaultValue:S,onValueChange:p,open:V,defaultOpen:L,onOpenChange:$,name:k,...R})=>{const{triggerId:x,helperId:f,hasError:d,selectedValue:_,handleValueChange:b}=N({error:s,value:C,defaultValue:S,onValueChange:p}),D=i.useMemo(()=>w.flattenItems(u),[u]),E=i.useCallback(e=>{e!==null&&b(e)},[b]);return l.jsxs(G,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:h!==void 0?{width:h}:void 0,className:y,...R,children:[c&&l.jsx(H,{htmlFor:x,disabled:m,fontSize:n,children:c}),l.jsxs(a.default,{value:_??null,onValueChange:E,disabled:m,required:I,open:V,defaultOpen:L,onOpenChange:$,name:k,items:D,children:[l.jsx(a.default.Trigger,{id:x,placeholder:v,startIcon:o,size:q,fontSize:n,hasError:d,"aria-describedby":s||t?f:void 0,"aria-invalid":d||void 0}),l.jsx(a.default.Content,{listboxAriaLabel:F,children:l.jsx(a.default.List,{children:u.map((e,j)=>e.type==="separator"?l.jsx(a.default.Separator,{},`sep-${j}`):e.type==="group"?l.jsxs(a.default.Group,{children:[l.jsx(a.default.Label,{children:e.label}),e.options.map(r=>l.jsx(a.default.Item,{value:r.value,disabled:r.disabled,label:r.label},r.value))]},`group-${e.label}-${j}`):l.jsx(a.default.Item,{value:e.value,disabled:e.disabled,label:e.label},e.value))})})]}),(s||t)&&l.jsx(M,{id:f,hasError:d,children:s??t})]})});g.displayName="SelectField";module.exports=g;
+"use strict";const l=require("react/jsx-runtime"),c=require("react"),H=require("../../../../layout/flex/Flex.cjs");require("../../../../layout/flex/styles/Flex.css.cjs");const M=require("../../../_shared/components/form-label/FormLabel.cjs"),N=require("../../../_shared/components/helper-text/HelperText.cjs"),a=require("../../Select.cjs"),w=require("./hooks/useSelectField.hook.cjs"),A=require("./utils/flattenItems.utils.cjs"),v=c.memo(({label:d,helperText:t,error:s,startIcon:g,placeholder:q,size:I="md",fontSize:n="md",width:b,disabled:x,required:y,listboxAriaLabel:C,options:u,className:F,value:S,defaultValue:p,onValueChange:V,open:$,defaultOpen:L,onOpenChange:k,name:R,..._})=>{const{triggerId:f,helperId:h,hasError:i,selectedValue:D,handleValueChange:m}=w({error:s,value:S,defaultValue:p,onValueChange:V}),E=c.useMemo(()=>A.flattenItems(u),[u]),j=d?`${f}-label`:void 0,G=c.useCallback(e=>{e!==null&&m(e)},[m]);return l.jsxs(H,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:b!==void 0?{width:b}:void 0,className:F,..._,children:[d&&l.jsx(M,{id:j,disabled:x,fontSize:n,children:d}),l.jsxs(a.default,{value:D??null,onValueChange:G,disabled:x,required:y,open:$,defaultOpen:L,onOpenChange:k,name:R,items:E,children:[l.jsx(a.default.Trigger,{id:f,placeholder:q,startIcon:g,size:I,fontSize:n,"aria-labelledby":j,hasError:i,"aria-describedby":s||t?h:void 0,"aria-invalid":i||void 0}),l.jsx(a.default.Content,{listboxAriaLabel:C,children:l.jsx(a.default.List,{children:u.map((e,o)=>e.type==="separator"?l.jsx(a.default.Separator,{},`sep-${o}`):e.type==="group"?l.jsxs(a.default.Group,{children:[l.jsx(a.default.Label,{children:e.label}),e.options.map(r=>l.jsx(a.default.Item,{value:r.value,disabled:r.disabled,label:r.label},r.value))]},`group-${e.label}-${o}`):l.jsx(a.default.Item,{value:e.value,disabled:e.disabled,label:e.label},e.value))})})]}),(s||t)&&l.jsx(N,{id:h,hasError:i,children:s??t})]})});v.displayName="SelectField";module.exports=v;
 //# sourceMappingURL=SelectField.cjs.map

package/dist/components/forms/select/components/select-field/SelectField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.cjs","sources":["../../../../../../src/components/forms/select/components/select-field/SelectField.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useMemo } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport Select from '@components/forms/select/Select.tsx'\r\nimport type { SelectFieldProps } from '@components/forms/select/types/Select.props.ts'\r\nimport useSelectField from '@components/forms/select/components/select-field/hooks/useSelectField.hook.ts'\r\nimport { flattenItems } from '@components/forms/select/components/select-field/utils/flattenItems.utils.ts'\r\n\r\n/**\r\n * Convenience wrapper around `Select` that provides a TextField-like API:\r\n * label, helperText, error, size, width, startIcon, placeholder and an\r\n * `options` array.\r\n *\r\n * @example\r\n * ```tsx\r\n * <SelectField\r\n *   label=\"Fruit\"\r\n *   placeholder=\"Pick a fruit\"\r\n *   options={[\r\n *     { value: 'apple', label: 'Apple' },\r\n *     { value: 'banana', label: 'Banana' },\r\n *   ]}\r\n *   value={value}\r\n *   onValueChange={setValue}\r\n * />\r\n * ```\r\n */\r\nconst SelectField: FC<SelectFieldProps> = memo(({\r\n    label,\r\n    helperText,\r\n    error,\r\n    startIcon,\r\n    placeholder,\r\n    size = 'md',\r\n    fontSize = 'md',\r\n    width,\r\n    disabled,\r\n    required,\r\n    listboxAriaLabel,\r\n    options,\r\n    className,\r\n    value,\r\n    defaultValue,\r\n    onValueChange,\r\n    open,\r\n    defaultOpen,\r\n    onOpenChange,\r\n    name,\r\n    ...props\r\n}) => {\r\n    const { triggerId, helperId, hasError, selectedValue, handleValueChange } = useSelectField({\r\n        error,\r\n        value,\r\n        defaultValue,\r\n        onValueChange,\r\n    })\r\n\r\n    const items = useMemo(() => flattenItems(options), [options])\r\n\r\n    const handleSelectValueChange = useCallback(\r\n        (v: string | null) => { if (v !== null) { handleValueChange(v) } },\r\n        [handleValueChange],\r\n    )\r\n\r\n    return (\r\n        <Flex\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={'100%'}\r\n            alignItems={'start'}\r\n            style={width !== undefined ? { width } : undefined}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            {label && (\r\n                <FormLabel\r\n                    htmlFor={triggerId}\r\n                    disabled={disabled}\r\n                    fontSize={fontSize}\r\n                >\r\n                    {label}\r\n                </FormLabel>\r\n            )}\r\n\r\n            <Select\r\n                value={selectedValue ?? null}\r\n                onValueChange={handleSelectValueChange}\r\n                disabled={disabled}\r\n                required={required}\r\n                open={open}\r\n                defaultOpen={defaultOpen}\r\n                onOpenChange={onOpenChange}\r\n                name={name}\r\n                items={items}\r\n            >\r\n                <Select.Trigger\r\n                    id={triggerId}\r\n                    placeholder={placeholder}\r\n                    startIcon={startIcon}\r\n                    size={size}\r\n                    fontSize={fontSize}\r\n                    hasError={hasError}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    aria-invalid={hasError || undefined}\r\n                />\r\n                <Select.Content listboxAriaLabel={listboxAriaLabel}>\r\n                    <Select.List>\r\n                        {options.map((option, index) => {\r\n                            if (option.type === 'separator') {\r\n                                return <Select.Separator key={`sep-${index}`} />\r\n                            }\r\n\r\n                            if (option.type === 'group') {\r\n                                return (\r\n                                    <Select.Group key={`group-${option.label}-${index}`}>\r\n                                        <Select.Label>{option.label}</Select.Label>\r\n                                        {option.options.map((item) => (\r\n                                            <Select.Item\r\n                                                key={item.value}\r\n                                                value={item.value}\r\n                                                disabled={item.disabled}\r\n                                                label={item.label}\r\n                                            />\r\n                                        ))}\r\n                                    </Select.Group>\r\n                                )\r\n                            }\r\n\r\n                            return (\r\n                                <Select.Item\r\n                                    key={option.value}\r\n                                    value={option.value}\r\n                                    disabled={option.disabled}\r\n                                    label={option.label}\r\n                                />\r\n                            )\r\n                        })}\r\n                    </Select.List>\r\n                </Select.Content>\r\n            </Select>\r\n\r\n            {(error || helperText) && (\r\n                <HelperText\r\n                    id={helperId}\r\n                    hasError={hasError}\r\n                >\r\n                    {error ?? helperText}\r\n                </HelperText>\r\n            )}\r\n        </Flex>\r\n    )\r\n})\r\n\r\nSelectField.displayName = 'SelectField'\r\n\r\nexport default SelectField\r\n"],"names":["SelectField","memo","label","helperText","error","startIcon","placeholder","size","fontSize","width","disabled","required","listboxAriaLabel","options","className","value","defaultValue","onValueChange","open","defaultOpen","onOpenChange","name","props","triggerId","helperId","hasError","selectedValue","handleValueChange","useSelectField","items","useMemo","flattenItems","handleSelectValueChange","useCallback","v","jsxs","Flex","jsx","FormLabel","Select","option","index","item","HelperText"],"mappings":"6aA6BMA,EAAoCC,EAAAA,KAAK,CAAC,CAC5C,MAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EAAW,KACX,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,aAAAC,EACA,cAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,KAAAC,EACA,GAAGC,CACP,IAAM,CACF,KAAM,CAAE,UAAAC,EAAW,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,kBAAAC,CAAA,EAAsBC,EAAe,CACvF,MAAAxB,EACA,MAAAW,EACA,aAAAC,EACA,cAAAC,CAAA,CACH,EAEKY,EAAQC,EAAAA,QAAQ,IAAMC,EAAAA,aAAalB,CAAO,EAAG,CAACA,CAAO,CAAC,EAEtDmB,EAA0BC,EAAAA,YAC3BC,GAAqB,CAAMA,IAAM,MAAQP,EAAkBO,CAAC,CAAI,EACjE,CAACP,CAAiB,CAAA,EAGtB,OACIQ,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,IAAK,KACL,MAAO,OACP,WAAY,QACZ,MAAO3B,IAAU,OAAY,CAAE,MAAAA,GAAU,OACzC,UAAAK,EACC,GAAGQ,EAEH,SAAA,CAAApB,GACGmC,EAAAA,IAACC,EAAA,CACG,QAASf,EACT,SAAAb,EACA,SAAAF,EAEC,SAAAN,CAAA,CAAA,EAITiC,EAAAA,KAACI,EAAAA,QAAA,CACG,MAAOb,GAAiB,KACxB,cAAeM,EACf,SAAAtB,EACA,SAAAC,EACA,KAAAO,EACA,YAAAC,EACA,aAAAC,EACA,KAAAC,EACA,MAAAQ,EAEA,SAAA,CAAAQ,EAAAA,IAACE,EAAAA,QAAO,QAAP,CACG,GAAIhB,EACJ,YAAAjB,EACA,UAAAD,EACA,KAAAE,EACA,SAAAC,EACA,SAAAiB,EACA,mBAAkBrB,GAASD,EAAaqB,EAAW,OACnD,eAAcC,GAAY,MAAA,CAAA,EAE9BY,EAAAA,IAACE,EAAAA,QAAO,QAAP,CAAe,iBAAA3B,EACZ,SAAAyB,EAAAA,IAACE,EAAAA,QAAO,KAAP,CACI,SAAA1B,EAAQ,IAAI,CAAC2B,EAAQC,IACdD,EAAO,OAAS,kBACRD,EAAAA,QAAO,UAAP,CAAA,EAAsB,OAAOE,CAAK,EAAI,EAG9CD,EAAO,OAAS,QAEZL,OAACI,EAAAA,QAAO,MAAP,CACG,SAAA,CAAAF,EAAAA,IAACE,EAAAA,QAAO,MAAP,CAAc,SAAAC,EAAO,MAAM,EAC3BA,EAAO,QAAQ,IAAKE,GACjBL,EAAAA,IAACE,EAAAA,QAAO,KAAP,CAEG,MAAOG,EAAK,MACZ,SAAUA,EAAK,SACf,MAAOA,EAAK,KAAA,EAHPA,EAAK,KAAA,CAKjB,CAAA,CAAA,EATc,SAASF,EAAO,KAAK,IAAIC,CAAK,EAUjD,EAKJJ,EAAAA,IAACE,EAAAA,QAAO,KAAP,CAEG,MAAOC,EAAO,MACd,SAAUA,EAAO,SACjB,MAAOA,EAAO,KAAA,EAHTA,EAAO,KAAA,CAMvB,EACL,CAAA,CACJ,CAAA,CAAA,CAAA,GAGFpC,GAASD,IACPkC,EAAAA,IAACM,EAAA,CACG,GAAInB,EACJ,SAAAC,EAEC,SAAArB,GAASD,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDH,EAAY,YAAc"}
+{"version":3,"file":"SelectField.cjs","sources":["../../../../../../src/components/forms/select/components/select-field/SelectField.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useMemo } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport Select from '@components/forms/select/Select.tsx'\r\nimport type { SelectFieldProps } from '@components/forms/select/types/Select.props.ts'\r\nimport useSelectField from '@components/forms/select/components/select-field/hooks/useSelectField.hook.ts'\r\nimport { flattenItems } from '@components/forms/select/components/select-field/utils/flattenItems.utils.ts'\r\n\r\n/**\r\n * Convenience wrapper around `Select` that provides a TextField-like API:\r\n * label, helperText, error, size, width, startIcon, placeholder and an\r\n * `options` array.\r\n *\r\n * @example\r\n * ```tsx\r\n * <SelectField\r\n *   label=\"Fruit\"\r\n *   placeholder=\"Pick a fruit\"\r\n *   options={[\r\n *     { value: 'apple', label: 'Apple' },\r\n *     { value: 'banana', label: 'Banana' },\r\n *   ]}\r\n *   value={value}\r\n *   onValueChange={setValue}\r\n * />\r\n * ```\r\n */\r\nconst SelectField: FC<SelectFieldProps> = memo(({\r\n    label,\r\n    helperText,\r\n    error,\r\n    startIcon,\r\n    placeholder,\r\n    size = 'md',\r\n    fontSize = 'md',\r\n    width,\r\n    disabled,\r\n    required,\r\n    listboxAriaLabel,\r\n    options,\r\n    className,\r\n    value,\r\n    defaultValue,\r\n    onValueChange,\r\n    open,\r\n    defaultOpen,\r\n    onOpenChange,\r\n    name,\r\n    ...props\r\n}) => {\r\n    const { triggerId, helperId, hasError, selectedValue, handleValueChange } = useSelectField({\r\n        error,\r\n        value,\r\n        defaultValue,\r\n        onValueChange,\r\n    })\r\n\r\n    const items = useMemo(() => flattenItems(options), [options])\r\n    const labelId = label ? `${triggerId}-label` : undefined\r\n\r\n    const handleSelectValueChange = useCallback(\r\n        (v: string | null) => { if (v !== null) { handleValueChange(v) } },\r\n        [handleValueChange],\r\n    )\r\n\r\n    return (\r\n        <Flex\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={'100%'}\r\n            alignItems={'start'}\r\n            style={width !== undefined ? { width } : undefined}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            {label && (\r\n                <FormLabel\r\n                    id={labelId}\r\n                    disabled={disabled}\r\n                    fontSize={fontSize}\r\n                >\r\n                    {label}\r\n                </FormLabel>\r\n            )}\r\n\r\n            <Select\r\n                value={selectedValue ?? null}\r\n                onValueChange={handleSelectValueChange}\r\n                disabled={disabled}\r\n                required={required}\r\n                open={open}\r\n                defaultOpen={defaultOpen}\r\n                onOpenChange={onOpenChange}\r\n                name={name}\r\n                items={items}\r\n            >\r\n                <Select.Trigger\r\n                    id={triggerId}\r\n                    placeholder={placeholder}\r\n                    startIcon={startIcon}\r\n                    size={size}\r\n                    fontSize={fontSize}\r\n                    aria-labelledby={labelId}\r\n                    hasError={hasError}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    aria-invalid={hasError || undefined}\r\n                />\r\n                <Select.Content listboxAriaLabel={listboxAriaLabel}>\r\n                    <Select.List>\r\n                        {options.map((option, index) => {\r\n                            if (option.type === 'separator') {\r\n                                return <Select.Separator key={`sep-${index}`} />\r\n                            }\r\n\r\n                            if (option.type === 'group') {\r\n                                return (\r\n                                    <Select.Group key={`group-${option.label}-${index}`}>\r\n                                        <Select.Label>{option.label}</Select.Label>\r\n                                        {option.options.map((item) => (\r\n                                            <Select.Item\r\n                                                key={item.value}\r\n                                                value={item.value}\r\n                                                disabled={item.disabled}\r\n                                                label={item.label}\r\n                                            />\r\n                                        ))}\r\n                                    </Select.Group>\r\n                                )\r\n                            }\r\n\r\n                            return (\r\n                                <Select.Item\r\n                                    key={option.value}\r\n                                    value={option.value}\r\n                                    disabled={option.disabled}\r\n                                    label={option.label}\r\n                                />\r\n                            )\r\n                        })}\r\n                    </Select.List>\r\n                </Select.Content>\r\n            </Select>\r\n\r\n            {(error || helperText) && (\r\n                <HelperText\r\n                    id={helperId}\r\n                    hasError={hasError}\r\n                >\r\n                    {error ?? helperText}\r\n                </HelperText>\r\n            )}\r\n        </Flex>\r\n    )\r\n})\r\n\r\nSelectField.displayName = 'SelectField'\r\n\r\nexport default SelectField\r\n"],"names":["SelectField","memo","label","helperText","error","startIcon","placeholder","size","fontSize","width","disabled","required","listboxAriaLabel","options","className","value","defaultValue","onValueChange","open","defaultOpen","onOpenChange","name","props","triggerId","helperId","hasError","selectedValue","handleValueChange","useSelectField","items","useMemo","flattenItems","labelId","handleSelectValueChange","useCallback","v","jsxs","Flex","jsx","FormLabel","Select","option","index","item","HelperText"],"mappings":"6aA6BMA,EAAoCC,EAAAA,KAAK,CAAC,CAC5C,MAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,YAAAC,EACA,KAAAC,EAAO,KACP,SAAAC,EAAW,KACX,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,aAAAC,EACA,cAAAC,EACA,KAAAC,EACA,YAAAC,EACA,aAAAC,EACA,KAAAC,EACA,GAAGC,CACP,IAAM,CACF,KAAM,CAAE,UAAAC,EAAW,SAAAC,EAAU,SAAAC,EAAU,cAAAC,EAAe,kBAAAC,CAAA,EAAsBC,EAAe,CACvF,MAAAxB,EACA,MAAAW,EACA,aAAAC,EACA,cAAAC,CAAA,CACH,EAEKY,EAAQC,EAAAA,QAAQ,IAAMC,EAAAA,aAAalB,CAAO,EAAG,CAACA,CAAO,CAAC,EACtDmB,EAAU9B,EAAQ,GAAGqB,CAAS,SAAW,OAEzCU,EAA0BC,EAAAA,YAC3BC,GAAqB,CAAMA,IAAM,MAAQR,EAAkBQ,CAAC,CAAI,EACjE,CAACR,CAAiB,CAAA,EAGtB,OACIS,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,IAAK,KACL,MAAO,OACP,WAAY,QACZ,MAAO5B,IAAU,OAAY,CAAE,MAAAA,GAAU,OACzC,UAAAK,EACC,GAAGQ,EAEH,SAAA,CAAApB,GACGoC,EAAAA,IAACC,EAAA,CACG,GAAIP,EACJ,SAAAtB,EACA,SAAAF,EAEC,SAAAN,CAAA,CAAA,EAITkC,EAAAA,KAACI,EAAAA,QAAA,CACG,MAAOd,GAAiB,KACxB,cAAeO,EACf,SAAAvB,EACA,SAAAC,EACA,KAAAO,EACA,YAAAC,EACA,aAAAC,EACA,KAAAC,EACA,MAAAQ,EAEA,SAAA,CAAAS,EAAAA,IAACE,EAAAA,QAAO,QAAP,CACG,GAAIjB,EACJ,YAAAjB,EACA,UAAAD,EACA,KAAAE,EACA,SAAAC,EACA,kBAAiBwB,EACjB,SAAAP,EACA,mBAAkBrB,GAASD,EAAaqB,EAAW,OACnD,eAAcC,GAAY,MAAA,CAAA,EAE9Ba,EAAAA,IAACE,EAAAA,QAAO,QAAP,CAAe,iBAAA5B,EACZ,SAAA0B,EAAAA,IAACE,EAAAA,QAAO,KAAP,CACI,SAAA3B,EAAQ,IAAI,CAAC4B,EAAQC,IACdD,EAAO,OAAS,kBACRD,EAAAA,QAAO,UAAP,CAAA,EAAsB,OAAOE,CAAK,EAAI,EAG9CD,EAAO,OAAS,QAEZL,OAACI,EAAAA,QAAO,MAAP,CACG,SAAA,CAAAF,EAAAA,IAACE,EAAAA,QAAO,MAAP,CAAc,SAAAC,EAAO,MAAM,EAC3BA,EAAO,QAAQ,IAAKE,GACjBL,EAAAA,IAACE,EAAAA,QAAO,KAAP,CAEG,MAAOG,EAAK,MACZ,SAAUA,EAAK,SACf,MAAOA,EAAK,KAAA,EAHPA,EAAK,KAAA,CAKjB,CAAA,CAAA,EATc,SAASF,EAAO,KAAK,IAAIC,CAAK,EAUjD,EAKJJ,EAAAA,IAACE,EAAAA,QAAO,KAAP,CAEG,MAAOC,EAAO,MACd,SAAUA,EAAO,SACjB,MAAOA,EAAO,KAAA,EAHTA,EAAO,KAAA,CAMvB,EACL,CAAA,CACJ,CAAA,CAAA,CAAA,GAGFrC,GAASD,IACPmC,EAAAA,IAACM,EAAA,CACG,GAAIpB,EACJ,SAAAC,EAEC,SAAArB,GAASD,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDH,EAAY,YAAc"}

package/dist/components/forms/select/components/select-field/SelectField.js

@@ -1,93 +1,94 @@
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
-import { memo as M, useMemo as N, useCallback as q } from "react";
-import w from "../../../../layout/flex/Flex.js";
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+import { memo as N, useMemo as q, useCallback as w } from "react";
+import A from "../../../../layout/flex/Flex.js";
 import "../../../../layout/flex/styles/Flex.css.js";
-import A from "../../../_shared/components/form-label/FormLabel.js";
-import B from "../../../_shared/components/helper-text/HelperText.js";
+import B from "../../../_shared/components/form-label/FormLabel.js";
+import J from "../../../_shared/components/helper-text/HelperText.js";
 import a from "../../Select.js";
-import J from "./hooks/useSelectField.hook.js";
-import { flattenItems as K } from "./utils/flattenItems.utils.js";
-const O = M(({
-  label: u,
-  helperText: i,
+import K from "./hooks/useSelectField.hook.js";
+import { flattenItems as O } from "./utils/flattenItems.utils.js";
+const P = N(({
+  label: i,
+  helperText: t,
   error: r,
   startIcon: g,
-  placeholder: v,
-  size: F = "md",
+  placeholder: I,
+  size: y = "md",
   fontSize: c = "md",
   width: n,
   disabled: o,
-  required: I,
-  listboxAriaLabel: y,
-  options: t,
-  className: C,
-  value: S,
-  defaultValue: x,
-  onValueChange: V,
+  required: C,
+  listboxAriaLabel: F,
+  options: m,
+  className: S,
+  value: x,
+  defaultValue: V,
+  onValueChange: $,
   open: L,
-  defaultOpen: $,
-  onOpenChange: j,
-  name: k,
-  ...D
+  defaultOpen: j,
+  onOpenChange: k,
+  name: D,
+  ...E
 }) => {
-  const { triggerId: h, helperId: b, hasError: m, selectedValue: E, handleValueChange: f } = J({
+  const { triggerId: b, helperId: f, hasError: s, selectedValue: G, handleValueChange: h } = K({
     error: r,
-    value: S,
-    defaultValue: x,
-    onValueChange: V
-  }), G = N(() => K(t), [t]), H = q(
+    value: x,
+    defaultValue: V,
+    onValueChange: $
+  }), H = q(() => O(m), [m]), p = i ? `${b}-label` : void 0, M = w(
     (e) => {
-      e !== null && f(e);
+      e !== null && h(e);
     },
-    [f]
+    [h]
   );
-  return /* @__PURE__ */ s(
-    w,
+  return /* @__PURE__ */ u(
+    A,
     {
       flexDirection: "column",
       gap: "xs",
       width: "100%",
       alignItems: "start",
       style: n !== void 0 ? { width: n } : void 0,
-      className: C,
-      ...D,
+      className: S,
+      ...E,
       children: [
-        u && /* @__PURE__ */ l(
-          A,
+        i && /* @__PURE__ */ l(
+          B,
           {
-            htmlFor: h,
+            id: p,
             disabled: o,
             fontSize: c,
-            children: u
+            children: i
           }
         ),
-        /* @__PURE__ */ s(
+        /* @__PURE__ */ u(
           a,
           {
-            value: E ?? null,
-            onValueChange: H,
+            value: G ?? null,
+            onValueChange: M,
             disabled: o,
-            required: I,
+            required: C,
             open: L,
-            defaultOpen: $,
-            onOpenChange: j,
-            name: k,
-            items: G,
+            defaultOpen: j,
+            onOpenChange: k,
+            name: D,
+            items: H,
             children: [
               /* @__PURE__ */ l(
                 a.Trigger,
                 {
-                  id: h,
-                  placeholder: v,
+                  id: b,
+                  placeholder: I,
                   startIcon: g,
-                  size: F,
+                  size: y,
                   fontSize: c,
-                  hasError: m,
-                  "aria-describedby": r || i ? b : void 0,
-                  "aria-invalid": m || void 0
+                  "aria-labelledby": p,
+                  hasError: s,
+                  "aria-describedby": r || t ? f : void 0,
+                  "aria-invalid": s || void 0
                 }
               ),
-              /* @__PURE__ */ l(a.Content, { listboxAriaLabel: y, children: /* @__PURE__ */ l(a.List, { children: t.map((e, p) => e.type === "separator" ? /* @__PURE__ */ l(a.Separator, {}, `sep-${p}`) : e.type === "group" ? /* @__PURE__ */ s(a.Group, { children: [
+              /* @__PURE__ */ l(a.Content, { listboxAriaLabel: F, children: /* @__PURE__ */ l(a.List, { children: m.map((e, v) => e.type === "separator" ? /* @__PURE__ */ l(a.Separator, {}, `sep-${v}`) : e.type === "group" ? /* @__PURE__ */ u(a.Group, { children: [
                 /* @__PURE__ */ l(a.Label, { children: e.label }),
                 e.options.map((d) => /* @__PURE__ */ l(
                   a.Item,
@@ -98,7 +99,7 @@ const O = M(({
                   },
                   d.value
                 ))
-              ] }, `group-${e.label}-${p}`) : /* @__PURE__ */ l(
+              ] }, `group-${e.label}-${v}`) : /* @__PURE__ */ l(
                 a.Item,
                 {
                   value: e.value,
@@ -110,20 +111,20 @@ const O = M(({
             ]
           }
         ),
-        (r || i) && /* @__PURE__ */ l(
-          B,
+        (r || t) && /* @__PURE__ */ l(
+          J,
           {
-            id: b,
-            hasError: m,
-            children: r ?? i
+            id: f,
+            hasError: s,
+            children: r ?? t
           }
         )
       ]
     }
   );
 });
-O.displayName = "SelectField";
+P.displayName = "SelectField";
 export {
-  O as default
+  P as default
 };
 //# sourceMappingURL=SelectField.js.map

package/dist/components/forms/select/components/select-field/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sources":["../../../../../../src/components/forms/select/components/select-field/SelectField.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useMemo } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport Select from '@components/forms/select/Select.tsx'\r\nimport type { SelectFieldProps } from '@components/forms/select/types/Select.props.ts'\r\nimport useSelectField from '@components/forms/select/components/select-field/hooks/useSelectField.hook.ts'\r\nimport { flattenItems } from '@components/forms/select/components/select-field/utils/flattenItems.utils.ts'\r\n\r\n/**\r\n * Convenience wrapper around `Select` that provides a TextField-like API:\r\n * label, helperText, error, size, width, startIcon, placeholder and an\r\n * `options` array.\r\n *\r\n * @example\r\n * ```tsx\r\n * <SelectField\r\n *   label=\"Fruit\"\r\n *   placeholder=\"Pick a fruit\"\r\n *   options={[\r\n *     { value: 'apple', label: 'Apple' },\r\n *     { value: 'banana', label: 'Banana' },\r\n *   ]}\r\n *   value={value}\r\n *   onValueChange={setValue}\r\n * />\r\n * ```\r\n */\r\nconst SelectField: FC<SelectFieldProps> = memo(({\r\n    label,\r\n    helperText,\r\n    error,\r\n    startIcon,\r\n    placeholder,\r\n    size = 'md',\r\n    fontSize = 'md',\r\n    width,\r\n    disabled,\r\n    required,\r\n    listboxAriaLabel,\r\n    options,\r\n    className,\r\n    value,\r\n    defaultValue,\r\n    onValueChange,\r\n    open,\r\n    defaultOpen,\r\n    onOpenChange,\r\n    name,\r\n    ...props\r\n}) => {\r\n    const { triggerId, helperId, hasError, selectedValue, handleValueChange } = useSelectField({\r\n        error,\r\n        value,\r\n        defaultValue,\r\n        onValueChange,\r\n    })\r\n\r\n    const items = useMemo(() => flattenItems(options), [options])\r\n\r\n    const handleSelectValueChange = useCallback(\r\n        (v: string | null) => { if (v !== null) { handleValueChange(v) } },\r\n        [handleValueChange],\r\n    )\r\n\r\n    return (\r\n        <Flex\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={'100%'}\r\n            alignItems={'start'}\r\n            style={width !== undefined ? { width } : undefined}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            {label && (\r\n                <FormLabel\r\n                    htmlFor={triggerId}\r\n                    disabled={disabled}\r\n                    fontSize={fontSize}\r\n                >\r\n                    {label}\r\n                </FormLabel>\r\n            )}\r\n\r\n            <Select\r\n                value={selectedValue ?? null}\r\n                onValueChange={handleSelectValueChange}\r\n                disabled={disabled}\r\n                required={required}\r\n                open={open}\r\n                defaultOpen={defaultOpen}\r\n                onOpenChange={onOpenChange}\r\n                name={name}\r\n                items={items}\r\n            >\r\n                <Select.Trigger\r\n                    id={triggerId}\r\n                    placeholder={placeholder}\r\n                    startIcon={startIcon}\r\n                    size={size}\r\n                    fontSize={fontSize}\r\n                    hasError={hasError}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    aria-invalid={hasError || undefined}\r\n                />\r\n                <Select.Content listboxAriaLabel={listboxAriaLabel}>\r\n                    <Select.List>\r\n                        {options.map((option, index) => {\r\n                            if (option.type === 'separator') {\r\n                                return <Select.Separator key={`sep-${index}`} />\r\n                            }\r\n\r\n                            if (option.type === 'group') {\r\n                                return (\r\n                                    <Select.Group key={`group-${option.label}-${index}`}>\r\n                                        <Select.Label>{option.label}</Select.Label>\r\n                                        {option.options.map((item) => (\r\n                                            <Select.Item\r\n                                                key={item.value}\r\n                                                value={item.value}\r\n                                                disabled={item.disabled}\r\n                                                label={item.label}\r\n                                            />\r\n                                        ))}\r\n                                    </Select.Group>\r\n                                )\r\n                            }\r\n\r\n                            return (\r\n                                <Select.Item\r\n                                    key={option.value}\r\n                                    value={option.value}\r\n                                    disabled={option.disabled}\r\n                                    label={option.label}\r\n                                />\r\n                            )\r\n                        })}\r\n                    </Select.List>\r\n                </Select.Content>\r\n            </Select>\r\n\r\n            {(error || helperText) && (\r\n                <HelperText\r\n                    id={helperId}\r\n                    hasError={hasError}\r\n                >\r\n                    {error ?? helperText}\r\n                </HelperText>\r\n            )}\r\n        </Flex>\r\n    )\r\n})\r\n\r\nSelectField.displayName = 'SelectField'\r\n\r\nexport default SelectField\r\n"],"names":["SelectField","memo","label","helperText","error","startIcon","placeholder","size","fontSize","width","disabled","required","listboxAriaLabel","options","className","value","defaultValue","onValueChange","open","defaultOpen","onOpenChange","name","props","triggerId","helperId","hasError","selectedValue","handleValueChange","useSelectField","items","useMemo","flattenItems","handleSelectValueChange","useCallback","v","jsxs","Flex","jsx","FormLabel","Select","option","index","item","HelperText"],"mappings":"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"}
+{"version":3,"file":"SelectField.js","sources":["../../../../../../src/components/forms/select/components/select-field/SelectField.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useMemo } from 'react'\r\n\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport Select from '@components/forms/select/Select.tsx'\r\nimport type { SelectFieldProps } from '@components/forms/select/types/Select.props.ts'\r\nimport useSelectField from '@components/forms/select/components/select-field/hooks/useSelectField.hook.ts'\r\nimport { flattenItems } from '@components/forms/select/components/select-field/utils/flattenItems.utils.ts'\r\n\r\n/**\r\n * Convenience wrapper around `Select` that provides a TextField-like API:\r\n * label, helperText, error, size, width, startIcon, placeholder and an\r\n * `options` array.\r\n *\r\n * @example\r\n * ```tsx\r\n * <SelectField\r\n *   label=\"Fruit\"\r\n *   placeholder=\"Pick a fruit\"\r\n *   options={[\r\n *     { value: 'apple', label: 'Apple' },\r\n *     { value: 'banana', label: 'Banana' },\r\n *   ]}\r\n *   value={value}\r\n *   onValueChange={setValue}\r\n * />\r\n * ```\r\n */\r\nconst SelectField: FC<SelectFieldProps> = memo(({\r\n    label,\r\n    helperText,\r\n    error,\r\n    startIcon,\r\n    placeholder,\r\n    size = 'md',\r\n    fontSize = 'md',\r\n    width,\r\n    disabled,\r\n    required,\r\n    listboxAriaLabel,\r\n    options,\r\n    className,\r\n    value,\r\n    defaultValue,\r\n    onValueChange,\r\n    open,\r\n    defaultOpen,\r\n    onOpenChange,\r\n    name,\r\n    ...props\r\n}) => {\r\n    const { triggerId, helperId, hasError, selectedValue, handleValueChange } = useSelectField({\r\n        error,\r\n        value,\r\n        defaultValue,\r\n        onValueChange,\r\n    })\r\n\r\n    const items = useMemo(() => flattenItems(options), [options])\r\n    const labelId = label ? `${triggerId}-label` : undefined\r\n\r\n    const handleSelectValueChange = useCallback(\r\n        (v: string | null) => { if (v !== null) { handleValueChange(v) } },\r\n        [handleValueChange],\r\n    )\r\n\r\n    return (\r\n        <Flex\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={'100%'}\r\n            alignItems={'start'}\r\n            style={width !== undefined ? { width } : undefined}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            {label && (\r\n                <FormLabel\r\n                    id={labelId}\r\n                    disabled={disabled}\r\n                    fontSize={fontSize}\r\n                >\r\n                    {label}\r\n                </FormLabel>\r\n            )}\r\n\r\n            <Select\r\n                value={selectedValue ?? null}\r\n                onValueChange={handleSelectValueChange}\r\n                disabled={disabled}\r\n                required={required}\r\n                open={open}\r\n                defaultOpen={defaultOpen}\r\n                onOpenChange={onOpenChange}\r\n                name={name}\r\n                items={items}\r\n            >\r\n                <Select.Trigger\r\n                    id={triggerId}\r\n                    placeholder={placeholder}\r\n                    startIcon={startIcon}\r\n                    size={size}\r\n                    fontSize={fontSize}\r\n                    aria-labelledby={labelId}\r\n                    hasError={hasError}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    aria-invalid={hasError || undefined}\r\n                />\r\n                <Select.Content listboxAriaLabel={listboxAriaLabel}>\r\n                    <Select.List>\r\n                        {options.map((option, index) => {\r\n                            if (option.type === 'separator') {\r\n                                return <Select.Separator key={`sep-${index}`} />\r\n                            }\r\n\r\n                            if (option.type === 'group') {\r\n                                return (\r\n                                    <Select.Group key={`group-${option.label}-${index}`}>\r\n                                        <Select.Label>{option.label}</Select.Label>\r\n                                        {option.options.map((item) => (\r\n                                            <Select.Item\r\n                                                key={item.value}\r\n                                                value={item.value}\r\n                                                disabled={item.disabled}\r\n                                                label={item.label}\r\n                                            />\r\n                                        ))}\r\n                                    </Select.Group>\r\n                                )\r\n                            }\r\n\r\n                            return (\r\n                                <Select.Item\r\n                                    key={option.value}\r\n                                    value={option.value}\r\n                                    disabled={option.disabled}\r\n                                    label={option.label}\r\n                                />\r\n                            )\r\n                        })}\r\n                    </Select.List>\r\n                </Select.Content>\r\n            </Select>\r\n\r\n            {(error || helperText) && (\r\n                <HelperText\r\n                    id={helperId}\r\n                    hasError={hasError}\r\n                >\r\n                    {error ?? helperText}\r\n                </HelperText>\r\n            )}\r\n        </Flex>\r\n    )\r\n})\r\n\r\nSelectField.displayName = 'SelectField'\r\n\r\nexport default SelectField\r\n"],"names":["SelectField","memo","label","helperText","error","startIcon","placeholder","size","fontSize","width","disabled","required","listboxAriaLabel","options","className","value","defaultValue","onValueChange","open","defaultOpen","onOpenChange","name","props","triggerId","helperId","hasError","selectedValue","handleValueChange","useSelectField","items","useMemo","flattenItems","labelId","handleSelectValueChange","useCallback","v","jsxs","Flex","jsx","FormLabel","Select","option","index","item","HelperText"],"mappings":"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"}

package/dist/components/forms/select/components/select-item/styles/SelectItem.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit108.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                */var e={root:"_64wk5i0",indicator:"_64wk5i1"};exports.SELECT_ITEM_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit113.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                */var e={root:"_64wk5i0",indicator:"_64wk5i1"};exports.SELECT_ITEM_STYLES=e;
 //# sourceMappingURL=SelectItem.css.cjs.map

package/dist/components/forms/select/components/select-item/styles/SelectItem.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit108.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit113.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                              */
 var r = { root: "_64wk5i0", indicator: "_64wk5i1" };
 export {

package/dist/components/forms/select/components/select-label/styles/SelectLabel.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit103.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                 */var e={root:"_1tcc5uo0"};exports.SELECT_LABEL_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit109.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                 */var e={root:"_1tcc5uo0"};exports.SELECT_LABEL_STYLES=e;
 //# sourceMappingURL=SelectLabel.css.cjs.map

package/dist/components/forms/select/components/select-label/styles/SelectLabel.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit103.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit109.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                               */
 var t = { root: "_1tcc5uo0" };
 export {

package/dist/components/forms/select/components/select-separator/styles/SelectSeparator.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit105.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                     */var e={root:"_1g2ch1s0"};exports.SELECT_SEPARATOR_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit104.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                     */var e={root:"_1g2ch1s0"};exports.SELECT_SEPARATOR_STYLES=e;
 //# sourceMappingURL=SelectSeparator.css.cjs.map

package/dist/components/forms/select/components/select-separator/styles/SelectSeparator.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit105.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit104.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                   */
 var t = { root: "_1g2ch1s0" };
 export {

package/dist/components/forms/select/components/select-trigger/SelectTrigger.cjs

@@ -1,2 +1,2 @@
-"use strict";require('../../../../../ui-kit91.css');require('../../../../../ui-kit73.css');require('../../../../../ui-kit2.css');require('../../../../../ui-kit.css');const e=require("react/jsx-runtime"),c=require("@base-ui/react/select"),j=require("react"),R=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const I=require("../../../../../resources/asset/ChevronDownIcon.svg.cjs"),N=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const B=require("../../../text-field/components/text-field-start-icon/TextFieldStartIcon.cjs");;/* empty css                                                 */;/* empty css                                                     */;/* empty css                                                                                                  */require("../../../text-field/components/text-field-end-action/TextFieldEndAction.cjs");;/* empty css                                                                                                  */const s=require("./styles/SelectTrigger.css.cjs"),C=require("../../../../../utils/cn.cjs"),D=require("./hooks/useSelectTrigger.hook.cjs"),F=require("../../../../../theme/contract.css.cjs"),n=j.memo(({className:i,placeholder:t,startIcon:r,size:o="md",fontSize:u="md",hasError:l=!1,width:q,children:a,onMouseDown:S,onFocus:d,onBlur:g,style:m,...T})=>{const{handleMouseDown:x,handleFocus:h,handleBlur:E,mergedStyle:_}=D({width:q,style:m,onMouseDown:S,onFocus:d,onBlur:g});return e.jsxs(c.Select.Trigger,{...T,className:C.cn(s.SELECT_TRIGGER_STYLES.recipe({size:o,hasError:l,hasStartIcon:!!r}),i),style:{fontSize:F.vars.fontSize[u],..._},onMouseDown:x,onFocus:h,onBlur:E,children:[r&&e.jsx(B,{icon:r,size:o}),a??e.jsx(c.Select.Value,{placeholder:t}),e.jsx(N,{className:s.SELECT_TRIGGER_END_ICON,children:e.jsx(R,{icon:I,size:"md",color:"mutedForeground"})})]})});n.displayName="Select.Trigger";module.exports=n;
+"use strict";require('../../../../../ui-kit87.css');require('../../../../../ui-kit92.css');require('../../../../../ui-kit2.css');require('../../../../../ui-kit.css');const e=require("react/jsx-runtime"),c=require("@base-ui/react/select"),j=require("react"),R=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const I=require("../../../../../resources/asset/ChevronDownIcon.svg.cjs"),N=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const B=require("../../../text-field/components/text-field-start-icon/TextFieldStartIcon.cjs");;/* empty css                                                 */;/* empty css                                                     */;/* empty css                                                                                                  */require("../../../text-field/components/text-field-end-action/TextFieldEndAction.cjs");;/* empty css                                                                                                  */const s=require("./styles/SelectTrigger.css.cjs"),C=require("../../../../../utils/cn.cjs"),D=require("./hooks/useSelectTrigger.hook.cjs"),F=require("../../../../../theme/contract.css.cjs"),n=j.memo(({className:i,placeholder:t,startIcon:r,size:o="md",fontSize:u="md",hasError:l=!1,width:q,children:a,onMouseDown:S,onFocus:d,onBlur:g,style:m,...T})=>{const{handleMouseDown:x,handleFocus:h,handleBlur:E,mergedStyle:_}=D({width:q,style:m,onMouseDown:S,onFocus:d,onBlur:g});return e.jsxs(c.Select.Trigger,{...T,className:C.cn(s.SELECT_TRIGGER_STYLES.recipe({size:o,hasError:l,hasStartIcon:!!r}),i),style:{fontSize:F.vars.fontSize[u],..._},onMouseDown:x,onFocus:h,onBlur:E,children:[r&&e.jsx(B,{icon:r,size:o}),a??e.jsx(c.Select.Value,{placeholder:t}),e.jsx(N,{className:s.SELECT_TRIGGER_END_ICON,children:e.jsx(R,{icon:I,size:"md",color:"mutedForeground"})})]})});n.displayName="Select.Trigger";module.exports=n;
 //# sourceMappingURL=SelectTrigger.cjs.map

package/dist/components/forms/select/components/select-trigger/SelectTrigger.js

@@ -7,7 +7,7 @@ import N from "../../../../../resources/asset/ChevronDownIcon.svg.js";
 import _ from "../../../../layout/box/Box.js";
 import "../../../../layout/box/styles/Box.css.js";
 import B from "../../../text-field/components/text-field-start-icon/TextFieldStartIcon.js";
-import '../../../../../ui-kit91.css';import '../../../../../ui-kit73.css';import '../../../../../ui-kit2.css';import '../../../../../ui-kit.css';/* empty css                                               */
+import '../../../../../ui-kit87.css';import '../../../../../ui-kit92.css';import '../../../../../ui-kit2.css';import '../../../../../ui-kit.css';/* empty css                                               */
 /* empty css                                                   */
 /* empty css                                                                                                */
 import "../../../text-field/components/text-field-end-action/TextFieldEndAction.js";

package/dist/components/forms/select/components/select-trigger/styles/SelectTrigger.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit107.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                   */const n=require("@vanilla-extract/recipes/createRuntimeFn");var e="_15nnodx0",r={recipe:n.createRuntimeFn({defaultClassName:"_15nnodx1",variantClassNames:{size:{sm:"_15nnodx2",md:"_15nnodx3",lg:"_15nnodx4"},hasError:{true:"_15nnodx5"},hasStartIcon:{true:"_15nnodx6"},hasEndIcon:{true:"_15nnodx7"}},defaultVariants:{size:"md",hasError:!1,hasStartIcon:!1,hasEndIcon:!0},compoundVariants:[[{hasStartIcon:!0},"_15nnodx8"],[{hasEndIcon:!0},"_15nnodx9"]]})};exports.SELECT_TRIGGER_END_ICON=e;exports.SELECT_TRIGGER_STYLES=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit114.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                   */const n=require("@vanilla-extract/recipes/createRuntimeFn");var e="_15nnodx0",r={recipe:n.createRuntimeFn({defaultClassName:"_15nnodx1",variantClassNames:{size:{sm:"_15nnodx2",md:"_15nnodx3",lg:"_15nnodx4"},hasError:{true:"_15nnodx5"},hasStartIcon:{true:"_15nnodx6"},hasEndIcon:{true:"_15nnodx7"}},defaultVariants:{size:"md",hasError:!1,hasStartIcon:!1,hasEndIcon:!0},compoundVariants:[[{hasStartIcon:!0},"_15nnodx8"],[{hasEndIcon:!0},"_15nnodx9"]]})};exports.SELECT_TRIGGER_END_ICON=e;exports.SELECT_TRIGGER_STYLES=r;
 //# sourceMappingURL=SelectTrigger.css.cjs.map

package/dist/components/forms/select/components/select-trigger/styles/SelectTrigger.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit107.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit114.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                 */
 import { createRuntimeFn as n } from "@vanilla-extract/recipes/createRuntimeFn";
 var t = "_15nnodx0", e = { recipe: n({ defaultClassName: "_15nnodx1", variantClassNames: { size: { sm: "_15nnodx2", md: "_15nnodx3", lg: "_15nnodx4" }, hasError: { true: "_15nnodx5" }, hasStartIcon: { true: "_15nnodx6" }, hasEndIcon: { true: "_15nnodx7" } }, defaultVariants: { size: "md", hasError: !1, hasStartIcon: !1, hasEndIcon: !0 }, compoundVariants: [[{ hasStartIcon: !0 }, "_15nnodx8"], [{ hasEndIcon: !0 }, "_15nnodx9"]] }) };

package/dist/components/forms/select/styles/Select.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit21.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                            */var e={placeholder:"f53dgk0"};exports.SELECT_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit54.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                            */var e={placeholder:"f53dgk0"};exports.SELECT_STYLES=e;
 //# sourceMappingURL=Select.css.cjs.map

package/dist/components/forms/select/styles/Select.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit21.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit54.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                          */
 var p = { placeholder: "f53dgk0" };
 export {

package/dist/components/forms/slider/Slider.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),E=require("@base-ui/react/field"),I=require("@base-ui/react/slider"),l=require("react"),L=require("./components/slider-header/SliderHeader.cjs"),_=require("./components/slider-track/SliderTrack.cjs"),d=require("./styles/Slider.css.cjs"),x=require("../../../utils/cn.cjs"),o=l.memo(({label:a,showValue:S=!1,helperText:n,error:e,width:u="100%",size:m="md",color:q="primary",className:j,ref:p,value:c,defaultValue:t,...y})=>{const s=l.useId(),r=!!(e||n),R=Array.isArray(c??t);return i.jsx(E.Field.Root,{invalid:!!e,children:i.jsxs(I.Slider.Root,{ref:p,className:x.cn(d.SLIDER_STYLES.root,j),style:{width:u},"aria-describedby":r?s:void 0,value:c,defaultValue:t,...y,children:[i.jsx(L,{label:a,showValue:S}),i.jsx(_,{range:R,size:m,color:q,error:e,descriptionId:r?s:void 0}),r&&i.jsx("span",{id:s,className:e?d.SLIDER_STYLES.error:d.SLIDER_STYLES.helper,children:e??n})]})})});o.displayName="Slider";exports.Slider=o;exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),b=require("@base-ui/react/field"),E=require("@base-ui/react/slider"),d=require("react"),L=require("./components/slider-header/SliderHeader.cjs"),_=require("./components/slider-track/SliderTrack.cjs"),o=require("./styles/Slider.css.cjs"),v=require("../../../utils/cn.cjs"),n=d.memo(({label:c,showValue:u=!1,helperText:t,error:e,width:m="100%",size:q="md",color:y="primary",className:I,ref:j,value:l,defaultValue:a,...p})=>{const s=d.useId(),S=d.useId(),r=!!(e||t),R=Array.isArray(l??a);return i.jsx(b.Field.Root,{invalid:!!e,children:i.jsxs(E.Slider.Root,{ref:j,className:v.cn(o.SLIDER_STYLES.root,I),style:{width:m},"aria-labelledby":c?S:void 0,"aria-describedby":r?s:void 0,value:l,defaultValue:a,...p,children:[i.jsx(L,{label:c,labelId:S,showValue:u}),i.jsx(_,{range:R,size:q,color:y,error:e,descriptionId:r?s:void 0}),r&&i.jsx("span",{id:s,className:e?o.SLIDER_STYLES.error:o.SLIDER_STYLES.helper,children:e??t})]})})});n.displayName="Slider";exports.Slider=n;exports.default=n;
 //# sourceMappingURL=Slider.cjs.map

package/dist/components/forms/slider/Slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.cjs","sources":["../../../../src/components/forms/slider/Slider.tsx"],"sourcesContent":["import { Field } from '@base-ui/react/field'\r\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\r\nimport { memo, type FC, useId } from 'react'\r\n\r\nimport SliderHeader from '@components/forms/slider/components/slider-header/SliderHeader.tsx'\r\nimport SliderTrack from '@components/forms/slider/components/slider-track/SliderTrack.tsx'\r\nimport { SLIDER_STYLES } from '@components/forms/slider/styles/Slider.css.ts'\r\nimport type { SliderProps } from '@components/forms/slider/types'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * Range input backed by Base UI Slider with a visible label, helper/error\r\n * text, and design-token `size` and `color` props. Supports both single-value\r\n * and multi-thumb range mode (pass an array for `value`/`defaultValue`).\r\n */\r\nexport const Slider: FC<SliderProps> = memo(({\r\n    label,\r\n    showValue = false,\r\n    helperText,\r\n    error,\r\n    width = '100%',\r\n    size = 'md',\r\n    color = 'primary',\r\n    className,\r\n    ref,\r\n    value,\r\n    defaultValue,\r\n    ...props\r\n}) => {\r\n    const descriptionId = useId()\r\n    const hasDescription = Boolean(error || helperText)\r\n    const range = Array.isArray(value ?? defaultValue)\r\n\r\n    return (\r\n        <Field.Root invalid={Boolean(error)}>\r\n            <BaseSlider.Root\r\n                ref={ref}\r\n                className={cn(SLIDER_STYLES.root, className)}\r\n                style={{ width }}\r\n                aria-describedby={hasDescription ? descriptionId : undefined}\r\n                value={value}\r\n                defaultValue={defaultValue}\r\n                {...props}\r\n            >\r\n                <SliderHeader\r\n                    label={label}\r\n                    showValue={showValue}\r\n                />\r\n                <SliderTrack\r\n                    range={range}\r\n                    size={size}\r\n                    color={color}\r\n                    error={error}\r\n                    descriptionId={hasDescription ? descriptionId : undefined}\r\n                />\r\n                {hasDescription && (\r\n                    <span\r\n                        id={descriptionId}\r\n                        className={error ? SLIDER_STYLES.error : SLIDER_STYLES.helper}\r\n                    >\r\n                        {error ?? helperText}\r\n                    </span>\r\n                )}\r\n            </BaseSlider.Root>\r\n        </Field.Root>\r\n    )\r\n})\r\n\r\nSlider.displayName = 'Slider'\r\n\r\nexport default Slider\r\n"],"names":["Slider","memo","label","showValue","helperText","error","width","size","color","className","ref","value","defaultValue","props","descriptionId","useId","hasDescription","range","Field","jsxs","BaseSlider","cn","SLIDER_STYLES","jsx","SliderHeader","SliderTrack"],"mappings":"iaAeaA,EAA0BC,EAAAA,KAAK,CAAC,CACzC,MAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EACA,MAAAC,EACA,MAAAC,EAAQ,OACR,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACR,UAAAC,EACA,IAAAC,EACA,MAAAC,EACA,aAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAgBC,EAAAA,MAAA,EAChBC,EAAiB,GAAQX,GAASD,GAClCa,EAAQ,MAAM,QAAQN,GAASC,CAAY,EAEjD,aACKM,EAAAA,MAAM,KAAN,CAAW,QAAS,EAAQb,EACzB,SAAAc,EAAAA,KAACC,EAAAA,OAAW,KAAX,CACG,IAAAV,EACA,UAAWW,EAAAA,GAAGC,gBAAc,KAAMb,CAAS,EAC3C,MAAO,CAAE,MAAAH,CAAA,EACT,mBAAkBU,EAAiBF,EAAgB,OACnD,MAAAH,EACA,aAAAC,EACC,GAAGC,EAEJ,SAAA,CAAAU,EAAAA,IAACC,EAAA,CACG,MAAAtB,EACA,UAAAC,CAAA,CAAA,EAEJoB,EAAAA,IAACE,EAAA,CACG,MAAAR,EACA,KAAAV,EACA,MAAAC,EACA,MAAAH,EACA,cAAeW,EAAiBF,EAAgB,MAAA,CAAA,EAEnDE,GACGO,EAAAA,IAAC,OAAA,CACG,GAAIT,EACJ,UAAWT,EAAQiB,EAAAA,cAAc,MAAQA,EAAAA,cAAc,OAEtD,SAAAjB,GAASD,CAAA,CAAA,CACd,CAAA,CAAA,EAGZ,CAER,CAAC,EAEDJ,EAAO,YAAc"}
+{"version":3,"file":"Slider.cjs","sources":["../../../../src/components/forms/slider/Slider.tsx"],"sourcesContent":["import { Field } from '@base-ui/react/field'\r\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\r\nimport { memo, type FC, useId } from 'react'\r\n\r\nimport SliderHeader from '@components/forms/slider/components/slider-header/SliderHeader.tsx'\r\nimport SliderTrack from '@components/forms/slider/components/slider-track/SliderTrack.tsx'\r\nimport { SLIDER_STYLES } from '@components/forms/slider/styles/Slider.css.ts'\r\nimport type { SliderProps } from '@components/forms/slider/types'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * Range input backed by Base UI Slider with a visible label, helper/error\r\n * text, and design-token `size` and `color` props. Supports both single-value\r\n * and multi-thumb range mode (pass an array for `value`/`defaultValue`).\r\n */\r\nexport const Slider: FC<SliderProps> = memo(({\r\n    label,\r\n    showValue = false,\r\n    helperText,\r\n    error,\r\n    width = '100%',\r\n    size = 'md',\r\n    color = 'primary',\r\n    className,\r\n    ref,\r\n    value,\r\n    defaultValue,\r\n    ...props\r\n}) => {\r\n    const descriptionId = useId()\r\n    const labelId = useId()\r\n    const hasDescription = Boolean(error || helperText)\r\n    const range = Array.isArray(value ?? defaultValue)\r\n\r\n    return (\r\n        <Field.Root invalid={Boolean(error)}>\r\n            <BaseSlider.Root\r\n                ref={ref}\r\n                className={cn(SLIDER_STYLES.root, className)}\r\n                style={{ width }}\r\n                aria-labelledby={label ? labelId : undefined}\r\n                aria-describedby={hasDescription ? descriptionId : undefined}\r\n                value={value}\r\n                defaultValue={defaultValue}\r\n                {...props}\r\n            >\r\n                <SliderHeader\r\n                    label={label}\r\n                    labelId={labelId}\r\n                    showValue={showValue}\r\n                />\r\n                <SliderTrack\r\n                    range={range}\r\n                    size={size}\r\n                    color={color}\r\n                    error={error}\r\n                    descriptionId={hasDescription ? descriptionId : undefined}\r\n                />\r\n                {hasDescription && (\r\n                    <span\r\n                        id={descriptionId}\r\n                        className={error ? SLIDER_STYLES.error : SLIDER_STYLES.helper}\r\n                    >\r\n                        {error ?? helperText}\r\n                    </span>\r\n                )}\r\n            </BaseSlider.Root>\r\n        </Field.Root>\r\n    )\r\n})\r\n\r\nSlider.displayName = 'Slider'\r\n\r\nexport default Slider\r\n"],"names":["Slider","memo","label","showValue","helperText","error","width","size","color","className","ref","value","defaultValue","props","descriptionId","useId","labelId","hasDescription","range","Field","jsxs","BaseSlider","cn","SLIDER_STYLES","jsx","SliderHeader","SliderTrack"],"mappings":"iaAeaA,EAA0BC,EAAAA,KAAK,CAAC,CACzC,MAAAC,EACA,UAAAC,EAAY,GACZ,WAAAC,EACA,MAAAC,EACA,MAAAC,EAAQ,OACR,KAAAC,EAAO,KACP,MAAAC,EAAQ,UACR,UAAAC,EACA,IAAAC,EACA,MAAAC,EACA,aAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAgBC,EAAAA,MAAA,EAChBC,EAAUD,EAAAA,MAAA,EACVE,EAAiB,GAAQZ,GAASD,GAClCc,EAAQ,MAAM,QAAQP,GAASC,CAAY,EAEjD,aACKO,EAAAA,MAAM,KAAN,CAAW,QAAS,EAAQd,EACzB,SAAAe,EAAAA,KAACC,EAAAA,OAAW,KAAX,CACG,IAAAX,EACA,UAAWY,EAAAA,GAAGC,gBAAc,KAAMd,CAAS,EAC3C,MAAO,CAAE,MAAAH,CAAA,EACT,kBAAiBJ,EAAQc,EAAU,OACnC,mBAAkBC,EAAiBH,EAAgB,OACnD,MAAAH,EACA,aAAAC,EACC,GAAGC,EAEJ,SAAA,CAAAW,EAAAA,IAACC,EAAA,CACG,MAAAvB,EACA,QAAAc,EACA,UAAAb,CAAA,CAAA,EAEJqB,EAAAA,IAACE,EAAA,CACG,MAAAR,EACA,KAAAX,EACA,MAAAC,EACA,MAAAH,EACA,cAAeY,EAAiBH,EAAgB,MAAA,CAAA,EAEnDG,GACGO,EAAAA,IAAC,OAAA,CACG,GAAIV,EACJ,UAAWT,EAAQkB,EAAAA,cAAc,MAAQA,EAAAA,cAAc,OAEtD,SAAAlB,GAASD,CAAA,CAAA,CACd,CAAA,CAAA,EAGZ,CAER,CAAC,EAEDJ,EAAO,YAAc"}

package/dist/components/forms/slider/Slider.js

@@ -1,50 +1,52 @@
-import { jsx as o, jsxs as I } from "react/jsx-runtime";
+import { jsx as o, jsxs as v } from "react/jsx-runtime";
 import { Field as N } from "@base-ui/react/field";
 import { Slider as R } from "@base-ui/react/slider";
-import { memo as b, useId as j } from "react";
-import v from "./components/slider-header/SliderHeader.js";
-import x from "./components/slider-track/SliderTrack.js";
-import { SLIDER_STYLES as s } from "./styles/Slider.css.js";
-import { cn as A } from "../../../utils/cn.js";
-const B = b(({
-  label: t,
-  showValue: n = !1,
-  helperText: e,
+import { memo as j, useId as n } from "react";
+import x from "./components/slider-header/SliderHeader.js";
+import A from "./components/slider-track/SliderTrack.js";
+import { SLIDER_STYLES as e } from "./styles/Slider.css.js";
+import { cn as B } from "../../../utils/cn.js";
+const D = j(({
+  label: s,
+  showValue: c = !1,
+  helperText: a,
   error: i,
-  width: l = "100%",
-  size: c = "md",
-  color: p = "primary",
-  className: f,
-  ref: S,
+  width: p = "100%",
+  size: f = "md",
+  color: S = "primary",
+  className: y,
+  ref: I,
   value: m,
-  defaultValue: a,
-  ...y
+  defaultValue: t,
+  ...b
 }) => {
-  const r = j(), d = !!(i || e), h = Array.isArray(m ?? a);
-  return /* @__PURE__ */ o(N.Root, { invalid: !!i, children: /* @__PURE__ */ I(
+  const r = n(), l = n(), d = !!(i || a), h = Array.isArray(m ?? t);
+  return /* @__PURE__ */ o(N.Root, { invalid: !!i, children: /* @__PURE__ */ v(
     R.Root,
     {
-      ref: S,
-      className: A(s.root, f),
-      style: { width: l },
+      ref: I,
+      className: B(e.root, y),
+      style: { width: p },
+      "aria-labelledby": s ? l : void 0,
       "aria-describedby": d ? r : void 0,
       value: m,
-      defaultValue: a,
-      ...y,
+      defaultValue: t,
+      ...b,
       children: [
         /* @__PURE__ */ o(
-          v,
+          x,
           {
-            label: t,
-            showValue: n
+            label: s,
+            labelId: l,
+            showValue: c
           }
         ),
         /* @__PURE__ */ o(
-          x,
+          A,
           {
             range: h,
-            size: c,
-            color: p,
+            size: f,
+            color: S,
             error: i,
             descriptionId: d ? r : void 0
           }
@@ -53,17 +55,17 @@ const B = b(({
           "span",
           {
             id: r,
-            className: i ? s.error : s.helper,
-            children: i ?? e
+            className: i ? e.error : e.helper,
+            children: i ?? a
           }
         )
       ]
     }
   ) });
 });
-B.displayName = "Slider";
+D.displayName = "Slider";
 export {
-  B as Slider,
-  B as default
+  D as Slider,
+  D as default
 };
 //# sourceMappingURL=Slider.js.map

package/dist/components/forms/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../src/components/forms/slider/Slider.tsx"],"sourcesContent":["import { Field } from '@base-ui/react/field'\r\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\r\nimport { memo, type FC, useId } from 'react'\r\n\r\nimport SliderHeader from '@components/forms/slider/components/slider-header/SliderHeader.tsx'\r\nimport SliderTrack from '@components/forms/slider/components/slider-track/SliderTrack.tsx'\r\nimport { SLIDER_STYLES } from '@components/forms/slider/styles/Slider.css.ts'\r\nimport type { SliderProps } from '@components/forms/slider/types'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * Range input backed by Base UI Slider with a visible label, helper/error\r\n * text, and design-token `size` and `color` props. Supports both single-value\r\n * and multi-thumb range mode (pass an array for `value`/`defaultValue`).\r\n */\r\nexport const Slider: FC<SliderProps> = memo(({\r\n    label,\r\n    showValue = false,\r\n    helperText,\r\n    error,\r\n    width = '100%',\r\n    size = 'md',\r\n    color = 'primary',\r\n    className,\r\n    ref,\r\n    value,\r\n    defaultValue,\r\n    ...props\r\n}) => {\r\n    const descriptionId = useId()\r\n    const hasDescription = Boolean(error || helperText)\r\n    const range = Array.isArray(value ?? defaultValue)\r\n\r\n    return (\r\n        <Field.Root invalid={Boolean(error)}>\r\n            <BaseSlider.Root\r\n                ref={ref}\r\n                className={cn(SLIDER_STYLES.root, className)}\r\n                style={{ width }}\r\n                aria-describedby={hasDescription ? descriptionId : undefined}\r\n                value={value}\r\n                defaultValue={defaultValue}\r\n                {...props}\r\n            >\r\n                <SliderHeader\r\n                    label={label}\r\n                    showValue={showValue}\r\n                />\r\n                <SliderTrack\r\n                    range={range}\r\n                    size={size}\r\n                    color={color}\r\n                    error={error}\r\n                    descriptionId={hasDescription ? descriptionId : undefined}\r\n                />\r\n                {hasDescription && (\r\n                    <span\r\n                        id={descriptionId}\r\n                        className={error ? SLIDER_STYLES.error : SLIDER_STYLES.helper}\r\n                    >\r\n                        {error ?? helperText}\r\n                    </span>\r\n                )}\r\n            </BaseSlider.Root>\r\n        </Field.Root>\r\n    )\r\n})\r\n\r\nSlider.displayName = 'Slider'\r\n\r\nexport default Slider\r\n"],"names":["Slider","memo","label","showValue","helperText","error","width","size","color","className","ref","value","defaultValue","props","descriptionId","useId","hasDescription","range","Field","jsxs","BaseSlider","cn","SLIDER_STYLES","jsx","SliderHeader","SliderTrack"],"mappings":";;;;;;;;AAeO,MAAMA,IAA0BC,EAAK,CAAC;AAAA,EACzC,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAgBC,EAAA,GAChBC,IAAiB,GAAQX,KAASD,IAClCa,IAAQ,MAAM,QAAQN,KAASC,CAAY;AAEjD,2BACKM,EAAM,MAAN,EAAW,SAAS,EAAQb,GACzB,UAAA,gBAAAc;AAAA,IAACC,EAAW;AAAA,IAAX;AAAA,MACG,KAAAV;AAAA,MACA,WAAWW,EAAGC,EAAc,MAAMb,CAAS;AAAA,MAC3C,OAAO,EAAE,OAAAH,EAAA;AAAA,MACT,oBAAkBU,IAAiBF,IAAgB;AAAA,MACnD,OAAAH;AAAA,MACA,cAAAC;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAU;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,OAAAtB;AAAA,YACA,WAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ,gBAAAoB;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,OAAAR;AAAA,YACA,MAAAV;AAAA,YACA,OAAAC;AAAA,YACA,OAAAH;AAAA,YACA,eAAeW,IAAiBF,IAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnDE,KACG,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAIT;AAAA,YACJ,WAAWT,IAAQiB,EAAc,QAAQA,EAAc;AAAA,YAEtD,UAAAjB,KAASD;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA,GAGZ;AAER,CAAC;AAEDJ,EAAO,cAAc;"}
+{"version":3,"file":"Slider.js","sources":["../../../../src/components/forms/slider/Slider.tsx"],"sourcesContent":["import { Field } from '@base-ui/react/field'\r\nimport { Slider as BaseSlider } from '@base-ui/react/slider'\r\nimport { memo, type FC, useId } from 'react'\r\n\r\nimport SliderHeader from '@components/forms/slider/components/slider-header/SliderHeader.tsx'\r\nimport SliderTrack from '@components/forms/slider/components/slider-track/SliderTrack.tsx'\r\nimport { SLIDER_STYLES } from '@components/forms/slider/styles/Slider.css.ts'\r\nimport type { SliderProps } from '@components/forms/slider/types'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * Range input backed by Base UI Slider with a visible label, helper/error\r\n * text, and design-token `size` and `color` props. Supports both single-value\r\n * and multi-thumb range mode (pass an array for `value`/`defaultValue`).\r\n */\r\nexport const Slider: FC<SliderProps> = memo(({\r\n    label,\r\n    showValue = false,\r\n    helperText,\r\n    error,\r\n    width = '100%',\r\n    size = 'md',\r\n    color = 'primary',\r\n    className,\r\n    ref,\r\n    value,\r\n    defaultValue,\r\n    ...props\r\n}) => {\r\n    const descriptionId = useId()\r\n    const labelId = useId()\r\n    const hasDescription = Boolean(error || helperText)\r\n    const range = Array.isArray(value ?? defaultValue)\r\n\r\n    return (\r\n        <Field.Root invalid={Boolean(error)}>\r\n            <BaseSlider.Root\r\n                ref={ref}\r\n                className={cn(SLIDER_STYLES.root, className)}\r\n                style={{ width }}\r\n                aria-labelledby={label ? labelId : undefined}\r\n                aria-describedby={hasDescription ? descriptionId : undefined}\r\n                value={value}\r\n                defaultValue={defaultValue}\r\n                {...props}\r\n            >\r\n                <SliderHeader\r\n                    label={label}\r\n                    labelId={labelId}\r\n                    showValue={showValue}\r\n                />\r\n                <SliderTrack\r\n                    range={range}\r\n                    size={size}\r\n                    color={color}\r\n                    error={error}\r\n                    descriptionId={hasDescription ? descriptionId : undefined}\r\n                />\r\n                {hasDescription && (\r\n                    <span\r\n                        id={descriptionId}\r\n                        className={error ? SLIDER_STYLES.error : SLIDER_STYLES.helper}\r\n                    >\r\n                        {error ?? helperText}\r\n                    </span>\r\n                )}\r\n            </BaseSlider.Root>\r\n        </Field.Root>\r\n    )\r\n})\r\n\r\nSlider.displayName = 'Slider'\r\n\r\nexport default Slider\r\n"],"names":["Slider","memo","label","showValue","helperText","error","width","size","color","className","ref","value","defaultValue","props","descriptionId","useId","labelId","hasDescription","range","Field","jsxs","BaseSlider","cn","SLIDER_STYLES","jsx","SliderHeader","SliderTrack"],"mappings":";;;;;;;;AAeO,MAAMA,IAA0BC,EAAK,CAAC;AAAA,EACzC,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAgBC,EAAA,GAChBC,IAAUD,EAAA,GACVE,IAAiB,GAAQZ,KAASD,IAClCc,IAAQ,MAAM,QAAQP,KAASC,CAAY;AAEjD,2BACKO,EAAM,MAAN,EAAW,SAAS,EAAQd,GACzB,UAAA,gBAAAe;AAAA,IAACC,EAAW;AAAA,IAAX;AAAA,MACG,KAAAX;AAAA,MACA,WAAWY,EAAGC,EAAc,MAAMd,CAAS;AAAA,MAC3C,OAAO,EAAE,OAAAH,EAAA;AAAA,MACT,mBAAiBJ,IAAQc,IAAU;AAAA,MACnC,oBAAkBC,IAAiBH,IAAgB;AAAA,MACnD,OAAAH;AAAA,MACA,cAAAC;AAAA,MACC,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAW;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,OAAAvB;AAAA,YACA,SAAAc;AAAA,YACA,WAAAb;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ,gBAAAqB;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,OAAAR;AAAA,YACA,MAAAX;AAAA,YACA,OAAAC;AAAA,YACA,OAAAH;AAAA,YACA,eAAeY,IAAiBH,IAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnDG,KACG,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,IAAIV;AAAA,YACJ,WAAWT,IAAQkB,EAAc,QAAQA,EAAc;AAAA,YAEtD,UAAAlB,KAASD;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA,GAGZ;AAER,CAAC;AAEDJ,EAAO,cAAc;"}

package/dist/components/forms/slider/components/slider-header/SliderHeader.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),i=require("@base-ui/react/slider"),s=require("./styles/SliderHeader.css.cjs"),c=({label:r,showValue:l})=>e.jsxs("div",{className:s.SLIDER_HEADER_STYLES.root,children:[r&&e.jsx(i.Slider.Label,{className:s.SLIDER_HEADER_STYLES.label,children:r}),l&&e.jsx(i.Slider.Value,{className:s.SLIDER_HEADER_STYLES.value,children:S=>S.join(" – ")})]});module.exports=c;
+"use strict";const e=require("react/jsx-runtime"),c=require("@base-ui/react/slider"),n=require("../../../../foundation/typography/Typography.cjs");require("../../../../foundation/typography/styles/Typography.css.cjs");const r=require("./styles/SliderHeader.css.cjs"),E=({label:s,labelId:i,showValue:a})=>e.jsxs("div",{className:r.SLIDER_HEADER_STYLES.root,children:[s&&e.jsx(n,{as:"span",variant:"label",id:i,className:r.SLIDER_HEADER_STYLES.label,children:s}),a&&e.jsx(c.Slider.Value,{className:r.SLIDER_HEADER_STYLES.value,children:l=>l.join(" – ")})]});module.exports=E;
 //# sourceMappingURL=SliderHeader.cjs.map

package/dist/components/forms/slider/components/slider-header/SliderHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SliderHeader.cjs","sources":["../../../../../../src/components/forms/slider/components/slider-header/SliderHeader.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\r\n\r\nimport { SLIDER_HEADER_STYLES } from '@components/forms/slider/components/slider-header/styles/SliderHeader.css.ts'\r\nimport type { SliderHeaderProps } from '@components/forms/slider/components/slider-header/types/SliderHeader.props.ts'\r\n\r\nconst SliderHeader = ({ label, showValue }: SliderHeaderProps) => (\r\n    <div className={SLIDER_HEADER_STYLES.root}>\r\n        {label && <BaseSlider.Label className={SLIDER_HEADER_STYLES.label}>{label}</BaseSlider.Label>}\r\n        {showValue && (\r\n            <BaseSlider.Value className={SLIDER_HEADER_STYLES.value}>\r\n                {(formattedValues) => formattedValues.join(' – ')}\r\n            </BaseSlider.Value>\r\n        )}\r\n    </div>\r\n)\r\n\r\nexport default SliderHeader\r\n"],"names":["SliderHeader","label","showValue","jsxs","SLIDER_HEADER_STYLES","BaseSlider","jsx","formattedValues"],"mappings":"gIAKMA,EAAe,CAAC,CAAE,MAAAC,EAAO,UAAAC,KAC3BC,EAAAA,KAAC,MAAA,CAAI,UAAWC,uBAAqB,KAChC,SAAA,CAAAH,SAAUI,EAAAA,OAAW,MAAX,CAAiB,UAAWD,EAAAA,qBAAqB,MAAQ,SAAAH,EAAM,EACzEC,GACGI,EAAAA,IAACD,EAAAA,OAAW,MAAX,CAAiB,UAAWD,EAAAA,qBAAqB,MAC7C,SAACG,GAAoBA,EAAgB,KAAK,KAAK,CAAA,CACpD,CAAA,CAAA,CAER"}
+{"version":3,"file":"SliderHeader.cjs","sources":["../../../../../../src/components/forms/slider/components/slider-header/SliderHeader.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\r\nimport { Typography } from '@components/foundation/typography'\r\n\r\nimport { SLIDER_HEADER_STYLES } from '@components/forms/slider/components/slider-header/styles/SliderHeader.css.ts'\r\nimport type { SliderHeaderProps } from '@components/forms/slider/components/slider-header/types/SliderHeader.props.ts'\r\n\r\nconst SliderHeader = ({ label, labelId, showValue }: SliderHeaderProps) => (\r\n    <div className={SLIDER_HEADER_STYLES.root}>\r\n        {label && (\r\n            <Typography\r\n                as={'span'}\r\n                variant={'label'}\r\n                id={labelId}\r\n                className={SLIDER_HEADER_STYLES.label}\r\n            >\r\n                {label}\r\n            </Typography>\r\n        )}\r\n        {showValue && (\r\n            <BaseSlider.Value className={SLIDER_HEADER_STYLES.value}>\r\n                {(formattedValues) => formattedValues.join(' – ')}\r\n            </BaseSlider.Value>\r\n        )}\r\n    </div>\r\n)\r\n\r\nexport default SliderHeader\r\n"],"names":["SliderHeader","label","labelId","showValue","jsxs","SLIDER_HEADER_STYLES","jsx","Typography","BaseSlider","formattedValues"],"mappings":"2QAMMA,EAAe,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,UAAAC,CAAA,IACpCC,OAAC,MAAA,CAAI,UAAWC,uBAAqB,KAChC,SAAA,CAAAJ,GACGK,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,QACT,GAAIL,EACJ,UAAWG,EAAAA,qBAAqB,MAE/B,SAAAJ,CAAA,CAAA,EAGRE,GACGG,EAAAA,IAACE,EAAAA,OAAW,MAAX,CAAiB,UAAWH,EAAAA,qBAAqB,MAC7C,SAACI,GAAoBA,EAAgB,KAAK,KAAK,CAAA,CACpD,CAAA,CAAA,CAER"}