@choco-vanille/ui 1.6.0 → 1.7.0

package/dist/components/forms/text-area/styles/TextArea.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit53.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit75.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                            */
 import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
 var m = { recipe: a({ defaultClassName: "sqatm00", variantClassNames: { size: { sm: "sqatm01", md: "sqatm02", lg: "sqatm03" }, hasError: { true: "sqatm04", false: "sqatm05" }, hasStartIcon: { true: "sqatm06", false: "sqatm07" }, hasEndAction: { true: "sqatm08", false: "sqatm09" } }, defaultVariants: { size: "md", hasError: !1, hasStartIcon: !1, hasEndAction: !1 }, compoundVariants: [[{ size: "sm", hasStartIcon: !0 }, "sqatm0a"], [{ size: "md", hasStartIcon: !0 }, "sqatm0b"], [{ size: "lg", hasStartIcon: !0 }, "sqatm0c"], [{ size: "sm", hasEndAction: !0 }, "sqatm0d"], [{ size: "md", hasEndAction: !0 }, "sqatm0e"], [{ size: "lg", hasEndAction: !0 }, "sqatm0f"]] }) };

package/dist/components/forms/text-area/types/TextArea.props.d.ts

@@ -1,6 +1,7 @@
 import { RefAttributes } from 'react';
 import { TextAreaSize } from './TextArea.types.ts';
 import { TypographySize } from '../../../foundation/typography/types/Typography.types.ts';
+import { IconComponent } from '../../../foundation/icon';
 import type * as React from 'react';
 export type TextAreaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & RefAttributes<HTMLTextAreaElement> & {
     /** Text label rendered above the textarea, linked via Radix Label for accessibility. */
@@ -12,7 +13,7 @@ export type TextAreaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElemen
     /** Error message rendered below the textarea. When set, the textarea is styled in its error state. */
     error?: string;
     /** Iconify icon name rendered on the left side of the textarea. */
-    startIcon?: string;
+    startIcon?: IconComponent;
     /** Custom action element (e.g. `<IconButton>`) rendered on the right side of the textarea. */
     endAction?: React.ReactNode;
     /** CSS width of the outer wrapper. Defaults to `100%`. */

package/dist/components/forms/text-field/TextField.cjs

@@ -1,2 +1,2 @@
-"use strict";require('../../../ui-kit82.css');require('../../../ui-kit77.css');require('../../../ui-kit93.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const e=require("react/jsx-runtime"),U=require("../../actions/icon-button/IconButton.cjs");require("../../actions/icon-button/styles/IconButton.css.cjs");const m=require("./components/text-field-label/TextFieldLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                       */const F=require("./components/text-field-start-icon/TextFieldStartIcon.cjs");;/* empty css                                                                                */const f=require("./components/text-field-end-action/TextFieldEndAction.cjs");;/* empty css                                                                                */const X=require("./styles/TextField.css.cjs"),Y=require("../_shared/components/helper-text/HelperText.cjs"),G=require("./constants/index.cjs"),J=require("./hooks/useTextfield.hook.cjs"),T=require("../../layout/flex/Flex.cjs");require("../../layout/flex/styles/Flex.css.cjs");const S=require("../../../constants/icons.cjs"),Q=require("../../../utils/cn.cjs"),V=require("../../../theme/contract.css.cjs"),I=require("react"),r=I.memo(c=>{const{inputId:d,helperId:l,hasError:o,hasStartIcon:v,hasEndAction:a,handleMouseDown:z,handleFocus:b,handleBlur:g,resolvedType:j,isPassword:E,showPassword:i,setShowPassword:u}=J.useTextField(c),{disabled:h,startIcon:x,className:P,width:p,error:t,helperText:s,label:q,required:y,showRequiredIndicator:A=!0,endAction:_,size:D,fontSize:w="md",placeholder:L,value:R,onChange:k,onKeyDown:B,onKeyUp:C,ref:N,style:H,type:W,...K}=c,n=D??"md",M=I.useCallback(()=>u(!i),[u,i]),O=E?e.jsx(U,{icon:i?S.IconRegistry.eyeOff:S.IconRegistry.eye,"aria-label":i?"Hide password":"Show password",variant:"ghost",color:"primary",size:G.fieldSizeToActionSize[n],type:"button",tabIndex:-1,onClick:M}):_;return e.jsxs(T,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:p!==void 0?{width:p}:void 0,children:[q&&e.jsx(m,{htmlFor:d,disabled:h,required:y&&A,fontSize:w,children:q}),e.jsxs(T,{position:"relative",width:"100%",gap:"none",children:[x&&e.jsx(F,{icon:x,size:n}),e.jsx("input",{ref:N,id:d,type:j,disabled:h,required:y,"aria-invalid":o||void 0,"aria-describedby":t||s?l:void 0,onMouseDown:z,onFocus:b,onBlur:g,className:Q.cn(X.TEXT_FIELD_STYLES.recipe({size:n,hasError:o,hasStartIcon:v,hasEndAction:a}),P),placeholder:L,value:R,onChange:k,onKeyDown:B,onKeyUp:C,...K,style:{fontSize:V.vars.fontSize[w],...H}}),a&&e.jsx(f,{children:O})]}),(t||s)&&e.jsx(Y,{id:l,hasError:o,children:t??s})]})});r.displayName="TextField";r.Label=m;r.StartIcon=F;r.EndAction=f;module.exports=r;
+"use strict";require('../../../ui-kit88.css');require('../../../ui-kit89.css');require('../../../ui-kit90.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const e=require("react/jsx-runtime"),O=require("../../actions/icon-button/IconButton.cjs");require("../../actions/icon-button/styles/IconButton.css.cjs");const I=require("./components/text-field-label/TextFieldLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                       */const m=require("./components/text-field-start-icon/TextFieldStartIcon.cjs");;/* empty css                                                                                */const F=require("./components/text-field-end-action/TextFieldEndAction.cjs");;/* empty css                                                                                */const U=require("./styles/TextField.css.cjs"),X=require("../_shared/components/helper-text/HelperText.cjs"),Y=require("./constants/index.cjs"),G=require("./hooks/useTextfield.hook.cjs"),T=require("../../layout/flex/Flex.cjs");require("../../layout/flex/styles/Flex.css.cjs");const J=require("../../../resources/asset/EyeIcon.svg.cjs"),Q=require("../../../resources/asset/EyeOffIcon.svg.cjs"),V=require("../../../utils/cn.cjs"),W=require("../../../theme/contract.css.cjs"),S=require("react"),r=S.memo(c=>{const{inputId:d,helperId:l,hasError:o,hasStartIcon:f,hasEndAction:a,handleMouseDown:v,handleFocus:z,handleBlur:b,resolvedType:E,isPassword:j,showPassword:i,setShowPassword:u}=G.useTextField(c),{disabled:h,startIcon:q,className:g,width:x,error:t,helperText:n,label:p,required:w,showRequiredIndicator:P=!0,endAction:A,size:_,fontSize:y="md",placeholder:D,value:L,onChange:k,onKeyDown:B,onKeyUp:C,ref:N,style:R,type:Z,...H}=c,s=_??"md",K=S.useCallback(()=>u(!i),[u,i]),M=j?e.jsx(O,{icon:i?Q:J,"aria-label":i?"Hide password":"Show password",variant:"ghost",color:"primary",size:Y.fieldSizeToActionSize[s],type:"button",tabIndex:-1,onClick:K}):A;return e.jsxs(T,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:x!==void 0?{width:x}:void 0,children:[p&&e.jsx(I,{htmlFor:d,disabled:h,required:w&&P,fontSize:y,children:p}),e.jsxs(T,{position:"relative",width:"100%",gap:"none",children:[q&&e.jsx(m,{icon:q,size:s}),e.jsx("input",{ref:N,id:d,type:E,disabled:h,required:w,"aria-invalid":o||void 0,"aria-describedby":t||n?l:void 0,onMouseDown:v,onFocus:z,onBlur:b,className:V.cn(U.TEXT_FIELD_STYLES.recipe({size:s,hasError:o,hasStartIcon:f,hasEndAction:a}),g),placeholder:D,value:L,onChange:k,onKeyDown:B,onKeyUp:C,...H,style:{fontSize:W.vars.fontSize[y],...R}}),a&&e.jsx(F,{children:M})]}),(t||n)&&e.jsx(X,{id:l,hasError:o,children:t??n})]})});r.displayName="TextField";r.Label=I;r.StartIcon=m;r.EndAction=F;module.exports=r;
 //# sourceMappingURL=TextField.cjs.map

package/dist/components/forms/text-field/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/forms/text-field/TextField.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport {\r\n    TextFieldLabel,\r\n    TextFieldStartIcon,\r\n    TextFieldEndAction,\r\n} from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useTextField } from '@components/forms/text-field/hooks/useTextfield.hook.tsx'\r\nimport type { TextFieldCompound } from '@components/forms/text-field/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { IconRegistry } from '@constants/icons'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { memo, useCallback } from 'react'\r\nimport type { TextFieldProps } from '@/components'\r\n\r\n/**\r\n  * A styled text input built with a native `<input>` and `<label>`.\r\n  *\r\n  * - `startIcon` - Iconify icon name rendered on the left.\r\n  * - `endAction` - any ReactNode (e.g. `<IconButton>`) rendered on the right.\r\n  * - `type=\"password\"` - auto-shows an eye-toggle `IconButton` (overrides `endAction`).\r\n  * - `width` - overrides the default `100%` wrapper width.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * input shows the primary border without the ring halo, detected via `onMouseDown`\r\n  * and a `data-mouse-focus` attribute.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <TextField label=\"Email\" startIcon=\"lucide:mail\" placeholder=\"you@example.com\" />\r\n  * <TextField label=\"Password\" type=\"password\" />\r\n  * <TextField label=\"Search\" endAction={<IconButton icon=\"lucide:search\" aria-label=\"Search\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextField label=\"Amount\" width=\"12rem\" />\r\n  * ```\r\n  */\r\nconst TextField = memo<TextFieldProps>((props) => {\r\n    const {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        hasStartIcon,\r\n        hasEndAction,\r\n        handleMouseDown,\r\n        handleFocus,\r\n        handleBlur,\r\n        resolvedType,\r\n        isPassword,\r\n        showPassword,\r\n        setShowPassword,\r\n    } = useTextField(props)\r\n\r\n    const {\r\n        disabled,\r\n        startIcon,\r\n        className,\r\n        width,\r\n        error,\r\n        helperText,\r\n        label,\r\n        required,\r\n        showRequiredIndicator = true,\r\n        endAction,\r\n        size: sizeProp,\r\n        fontSize: fontSizeProp = 'md',\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref,\r\n        style: inputStyle,\r\n        type: _type,\r\n        ...inputProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const handleTogglePassword = useCallback(\r\n        () => setShowPassword(!showPassword),\r\n        [setShowPassword, showPassword],\r\n    )\r\n\r\n    const resolvedEndAction = isPassword ? (\r\n        <IconButton\r\n            icon={showPassword ? IconRegistry.eyeOff : IconRegistry.eye}\r\n            aria-label={showPassword ? 'Hide password' : 'Show password'}\r\n            variant={'ghost'}\r\n            color={'primary'}\r\n            size={fieldSizeToActionSize[size]}\r\n            type={'button'}\r\n            tabIndex={-1}\r\n            onClick={handleTogglePassword}\r\n        />\r\n    ) : (\r\n        endAction\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        >\r\n            {label && (\r\n                <TextFieldLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                    required={required && showRequiredIndicator}\r\n                    fontSize={fontSizeProp}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\r\n            )}\r\n\r\n            <Flex\r\n                position={'relative'}\r\n                width={'100%'}\r\n                gap={'none'}\r\n            >\r\n                {startIcon && (\r\n                    <TextFieldStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <input\r\n                    ref={ref}\r\n                    id={inputId}\r\n                    // `type` is resolved by useTextField for password toggling.\r\n                    type={resolvedType}\r\n                    disabled={disabled}\r\n                    required={required}\r\n                    aria-invalid={hasError || undefined}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    onMouseDown={handleMouseDown}\r\n                    onFocus={handleFocus}\r\n                    onBlur={handleBlur}\r\n                    className={cn(\r\n                        TEXT_FIELD_STYLES.recipe({\r\n                            size,\r\n                            hasError,\r\n                            hasStartIcon,\r\n                            hasEndAction,\r\n                        }),\r\n                        className,\r\n                    )}\r\n                    placeholder={placeholder}\r\n                    value={value}\r\n                    onChange={onChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    {...inputProps}\r\n                    style={{ fontSize: vars.fontSize[fontSizeProp], ...inputStyle }}\r\n                />\r\n\r\n                {hasEndAction && (\r\n                    <TextFieldEndAction>{resolvedEndAction}</TextFieldEndAction>\r\n                )}\r\n            </Flex>\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}) as unknown as TextFieldCompound\r\n\r\nTextField.displayName = 'TextField'\r\nTextField.Label = TextFieldLabel\r\nTextField.StartIcon = TextFieldStartIcon\r\nTextField.EndAction = TextFieldEndAction\r\n\r\nexport default TextField\r\n"],"names":["TextField","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","resolvedType","isPassword","showPassword","setShowPassword","useTextField","disabled","startIcon","className","width","error","helperText","label","required","showRequiredIndicator","endAction","sizeProp","fontSizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","ref","inputStyle","_type","inputProps","size","handleTogglePassword","useCallback","resolvedEndAction","jsx","IconButton","IconRegistry","fieldSizeToActionSize","jsxs","Flex","TextFieldLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","vars","TextFieldEndAction","HelperText"],"mappings":"urCAsCMA,EAAYC,EAAAA,KAAsBC,GAAU,CAC9C,KAAM,CACF,QAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,WAAAC,EACA,aAAAC,EACA,WAAAC,EACA,aAAAC,EACA,gBAAAC,CAAA,EACAC,EAAAA,aAAab,CAAK,EAEhB,CACF,SAAAc,EACA,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,MAAAC,EACA,SAAAC,EACA,sBAAAC,EAAwB,GACxB,UAAAC,EACA,KAAMC,EACN,SAAUC,EAAe,KACzB,YAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,MAAOC,EACP,KAAMC,EACN,GAAGC,CAAA,EACHlC,EACEmC,EAAOX,GAAY,KAEnBY,EAAuBC,EAAAA,YACzB,IAAMzB,EAAgB,CAACD,CAAY,EACnC,CAACC,EAAiBD,CAAY,CAAA,EAG5B2B,EAAoB5B,EACtB6B,EAAAA,IAACC,EAAA,CACG,KAAM7B,EAAe8B,EAAAA,aAAa,OAASA,EAAAA,aAAa,IACxD,aAAY9B,EAAe,gBAAkB,gBAC7C,QAAS,QACT,MAAO,UACP,KAAM+B,EAAAA,sBAAsBP,CAAI,EAChC,KAAM,SACN,SAAU,GACV,QAASC,CAAA,CAAA,EAGbb,EAGJ,OACIoB,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,IAAK,KACL,MAAO,OACP,WAAY,QACZ,MAAO3B,IAAU,OAAY,CAAE,MAAAA,GAAU,OAExC,SAAA,CAAAG,GACGmB,EAAAA,IAACM,EAAA,CACG,QAAS5C,EACT,SAAAa,EACA,SAAUO,GAAYC,EACtB,SAAUG,EAET,SAAAL,CAAA,CAAA,EAITuB,EAAAA,KAACC,EAAA,CACG,SAAU,WACV,MAAO,OACP,IAAK,OAEJ,SAAA,CAAA7B,GACGwB,EAAAA,IAACO,EAAA,CACG,KAAM/B,EACN,KAAAoB,CAAA,CAAA,EAIRI,EAAAA,IAAC,QAAA,CACG,IAAAR,EACA,GAAI9B,EAEJ,KAAMQ,EACN,SAAAK,EACA,SAAAO,EACA,eAAclB,GAAY,OAC1B,mBAAkBe,GAASC,EAAajB,EAAW,OACnD,YAAaI,EACb,QAASC,EACT,OAAQC,EACR,UAAWuC,EAAAA,GACPC,EAAAA,kBAAkB,OAAO,CACrB,KAAAb,EACA,SAAAhC,EACA,aAAAC,EACA,aAAAC,CAAA,CACH,EACDW,CAAA,EAEJ,YAAAU,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACC,GAAGI,EACJ,MAAO,CAAE,SAAUe,EAAAA,KAAK,SAASxB,CAAY,EAAG,GAAGO,CAAA,CAAW,CAAA,EAGjE3B,GACGkC,EAAAA,IAACW,EAAA,CAAoB,SAAAZ,CAAA,CAAkB,CAAA,CAAA,CAAA,GAI7CpB,GAASC,IACPoB,EAAAA,IAACY,EAAA,CACG,GAAIjD,EACJ,SAAAC,EAEC,SAAAe,GAASC,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDrB,EAAU,YAAc,YACxBA,EAAU,MAAQ+C,EAClB/C,EAAU,UAAYgD,EACtBhD,EAAU,UAAYoD"}
+{"version":3,"file":"TextField.cjs","sources":["../../../../src/components/forms/text-field/TextField.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport {\r\n    TextFieldLabel,\r\n    TextFieldStartIcon,\r\n    TextFieldEndAction,\r\n} from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useTextField } from '@components/forms/text-field/hooks/useTextfield.hook.tsx'\r\nimport type { TextFieldCompound } from '@components/forms/text-field/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport EyeIcon from '@resources/asset/EyeIcon.svg?react'\r\nimport EyeOffIcon from '@resources/asset/EyeOffIcon.svg?react'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { memo, useCallback } from 'react'\r\nimport type { TextFieldProps } from '@/components'\r\n\r\n/**\r\n  * A styled text input built with a native `<input>` and `<label>`.\r\n  *\r\n  * - `startIcon` - Iconify icon name rendered on the left.\r\n  * - `endAction` - any ReactNode (e.g. `<IconButton>`) rendered on the right.\r\n  * - `type=\"password\"` - auto-shows an eye-toggle `IconButton` (overrides `endAction`).\r\n  * - `width` - overrides the default `100%` wrapper width.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * input shows the primary border without the ring halo, detected via `onMouseDown`\r\n  * and a `data-mouse-focus` attribute.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <TextField label=\"Email\" startIcon=\"lucide:mail\" placeholder=\"you@example.com\" />\r\n  * <TextField label=\"Password\" type=\"password\" />\r\n  * <TextField label=\"Search\" endAction={<IconButton icon=\"lucide:search\" aria-label=\"Search\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextField label=\"Amount\" width=\"12rem\" />\r\n  * ```\r\n  */\r\nconst TextField = memo<TextFieldProps>((props) => {\r\n    const {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        hasStartIcon,\r\n        hasEndAction,\r\n        handleMouseDown,\r\n        handleFocus,\r\n        handleBlur,\r\n        resolvedType,\r\n        isPassword,\r\n        showPassword,\r\n        setShowPassword,\r\n    } = useTextField(props)\r\n\r\n    const {\r\n        disabled,\r\n        startIcon,\r\n        className,\r\n        width,\r\n        error,\r\n        helperText,\r\n        label,\r\n        required,\r\n        showRequiredIndicator = true,\r\n        endAction,\r\n        size: sizeProp,\r\n        fontSize: fontSizeProp = 'md',\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref,\r\n        style: inputStyle,\r\n        type: _type,\r\n        ...inputProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const handleTogglePassword = useCallback(\r\n        () => setShowPassword(!showPassword),\r\n        [setShowPassword, showPassword],\r\n    )\r\n\r\n    const resolvedEndAction = isPassword ? (\r\n        <IconButton\r\n            icon={showPassword ? EyeOffIcon : EyeIcon}\r\n            aria-label={showPassword ? 'Hide password' : 'Show password'}\r\n            variant={'ghost'}\r\n            color={'primary'}\r\n            size={fieldSizeToActionSize[size]}\r\n            type={'button'}\r\n            tabIndex={-1}\r\n            onClick={handleTogglePassword}\r\n        />\r\n    ) : (\r\n        endAction\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        >\r\n            {label && (\r\n                <TextFieldLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                    required={required && showRequiredIndicator}\r\n                    fontSize={fontSizeProp}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\r\n            )}\r\n\r\n            <Flex\r\n                position={'relative'}\r\n                width={'100%'}\r\n                gap={'none'}\r\n            >\r\n                {startIcon && (\r\n                    <TextFieldStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <input\r\n                    ref={ref}\r\n                    id={inputId}\r\n                    // `type` is resolved by useTextField for password toggling.\r\n                    type={resolvedType}\r\n                    disabled={disabled}\r\n                    required={required}\r\n                    aria-invalid={hasError || undefined}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    onMouseDown={handleMouseDown}\r\n                    onFocus={handleFocus}\r\n                    onBlur={handleBlur}\r\n                    className={cn(\r\n                        TEXT_FIELD_STYLES.recipe({\r\n                            size,\r\n                            hasError,\r\n                            hasStartIcon,\r\n                            hasEndAction,\r\n                        }),\r\n                        className,\r\n                    )}\r\n                    placeholder={placeholder}\r\n                    value={value}\r\n                    onChange={onChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    {...inputProps}\r\n                    style={{ fontSize: vars.fontSize[fontSizeProp], ...inputStyle }}\r\n                />\r\n\r\n                {hasEndAction && (\r\n                    <TextFieldEndAction>{resolvedEndAction}</TextFieldEndAction>\r\n                )}\r\n            </Flex>\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}) as unknown as TextFieldCompound\r\n\r\nTextField.displayName = 'TextField'\r\nTextField.Label = TextFieldLabel\r\nTextField.StartIcon = TextFieldStartIcon\r\nTextField.EndAction = TextFieldEndAction\r\n\r\nexport default TextField\r\n"],"names":["TextField","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","resolvedType","isPassword","showPassword","setShowPassword","useTextField","disabled","startIcon","className","width","error","helperText","label","required","showRequiredIndicator","endAction","sizeProp","fontSizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","ref","inputStyle","_type","inputProps","size","handleTogglePassword","useCallback","resolvedEndAction","jsx","IconButton","EyeOffIcon","EyeIcon","fieldSizeToActionSize","jsxs","Flex","TextFieldLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","vars","TextFieldEndAction","HelperText"],"mappings":"4vCAuCMA,EAAYC,EAAAA,KAAsBC,GAAU,CAC9C,KAAM,CACF,QAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,WAAAC,EACA,aAAAC,EACA,WAAAC,EACA,aAAAC,EACA,gBAAAC,CAAA,EACAC,EAAAA,aAAab,CAAK,EAEhB,CACF,SAAAc,EACA,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,MAAAC,EACA,SAAAC,EACA,sBAAAC,EAAwB,GACxB,UAAAC,EACA,KAAMC,EACN,SAAUC,EAAe,KACzB,YAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,MAAOC,EACP,KAAMC,EACN,GAAGC,CAAA,EACHlC,EACEmC,EAAOX,GAAY,KAEnBY,EAAuBC,EAAAA,YACzB,IAAMzB,EAAgB,CAACD,CAAY,EACnC,CAACC,EAAiBD,CAAY,CAAA,EAG5B2B,EAAoB5B,EACtB6B,EAAAA,IAACC,EAAA,CACG,KAAM7B,EAAe8B,EAAaC,EAClC,aAAY/B,EAAe,gBAAkB,gBAC7C,QAAS,QACT,MAAO,UACP,KAAMgC,EAAAA,sBAAsBR,CAAI,EAChC,KAAM,SACN,SAAU,GACV,QAASC,CAAA,CAAA,EAGbb,EAGJ,OACIqB,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,IAAK,KACL,MAAO,OACP,WAAY,QACZ,MAAO5B,IAAU,OAAY,CAAE,MAAAA,GAAU,OAExC,SAAA,CAAAG,GACGmB,EAAAA,IAACO,EAAA,CACG,QAAS7C,EACT,SAAAa,EACA,SAAUO,GAAYC,EACtB,SAAUG,EAET,SAAAL,CAAA,CAAA,EAITwB,EAAAA,KAACC,EAAA,CACG,SAAU,WACV,MAAO,OACP,IAAK,OAEJ,SAAA,CAAA9B,GACGwB,EAAAA,IAACQ,EAAA,CACG,KAAMhC,EACN,KAAAoB,CAAA,CAAA,EAIRI,EAAAA,IAAC,QAAA,CACG,IAAAR,EACA,GAAI9B,EAEJ,KAAMQ,EACN,SAAAK,EACA,SAAAO,EACA,eAAclB,GAAY,OAC1B,mBAAkBe,GAASC,EAAajB,EAAW,OACnD,YAAaI,EACb,QAASC,EACT,OAAQC,EACR,UAAWwC,EAAAA,GACPC,EAAAA,kBAAkB,OAAO,CACrB,KAAAd,EACA,SAAAhC,EACA,aAAAC,EACA,aAAAC,CAAA,CACH,EACDW,CAAA,EAEJ,YAAAU,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACC,GAAGI,EACJ,MAAO,CAAE,SAAUgB,EAAAA,KAAK,SAASzB,CAAY,EAAG,GAAGO,CAAA,CAAW,CAAA,EAGjE3B,GACGkC,EAAAA,IAACY,EAAA,CAAoB,SAAAb,CAAA,CAAkB,CAAA,CAAA,CAAA,GAI7CpB,GAASC,IACPoB,EAAAA,IAACa,EAAA,CACG,GAAIlD,EACJ,SAAAC,EAEC,SAAAe,GAASC,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDrB,EAAU,YAAc,YACxBA,EAAU,MAAQgD,EAClBhD,EAAU,UAAYiD,EACtBjD,EAAU,UAAYqD"}

package/dist/components/forms/text-field/TextField.js

@@ -1,78 +1,79 @@
-import { jsxs as x, jsx as o } from "react/jsx-runtime";
-import U from "../../actions/icon-button/IconButton.js";
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import R from "../../actions/icon-button/IconButton.js";
 import "../../actions/icon-button/styles/IconButton.css.js";
-import I from "./components/text-field-label/TextFieldLabel.js";
-import '../../../ui-kit82.css';import '../../../ui-kit77.css';import '../../../ui-kit93.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
+import T from "./components/text-field-label/TextFieldLabel.js";
+import '../../../ui-kit88.css';import '../../../ui-kit89.css';import '../../../ui-kit90.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
 /* empty css                                             */
 /* empty css                                                                     */
 import v from "./components/text-field-start-icon/TextFieldStartIcon.js";
 /* empty css                                                                              */
-import z from "./components/text-field-end-action/TextFieldEndAction.js";
+import I from "./components/text-field-end-action/TextFieldEndAction.js";
 /* empty css                                                                              */
-import { TEXT_FIELD_STYLES as X } from "./styles/TextField.css.js";
-import Y from "../_shared/components/helper-text/HelperText.js";
-import { fieldSizeToActionSize as G } from "./constants/index.js";
-import { useTextField as J } from "./hooks/useTextfield.hook.js";
-import S from "../../layout/flex/Flex.js";
+import { TEXT_FIELD_STYLES as U } from "./styles/TextField.css.js";
+import X from "../_shared/components/helper-text/HelperText.js";
+import { fieldSizeToActionSize as Y } from "./constants/index.js";
+import { useTextField as G } from "./hooks/useTextfield.hook.js";
+import x from "../../layout/flex/Flex.js";
 import "../../layout/flex/styles/Flex.css.js";
-import { IconRegistry as T } from "../../../constants/icons.js";
-import { cn as Q } from "../../../utils/cn.js";
-import { vars as V } from "../../../theme/contract.css.js";
-import { memo as W, useCallback as Z } from "react";
-const r = W((d) => {
+import J from "../../../resources/asset/EyeIcon.svg.js";
+import Q from "../../../resources/asset/EyeOffIcon.svg.js";
+import { cn as V } from "../../../utils/cn.js";
+import { vars as W } from "../../../theme/contract.css.js";
+import { memo as Z, useCallback as $ } from "react";
+const r = Z((d) => {
   const {
     inputId: a,
     helperId: l,
     hasError: i,
-    hasStartIcon: F,
+    hasStartIcon: z,
     hasEndAction: m,
-    handleMouseDown: b,
-    handleFocus: g,
+    handleMouseDown: F,
+    handleFocus: b,
     handleBlur: E,
-    resolvedType: P,
-    isPassword: A,
+    resolvedType: g,
+    isPassword: P,
     showPassword: e,
     setShowPassword: p
-  } = J(d), {
+  } = G(d), {
     disabled: c,
     startIcon: f,
-    className: D,
+    className: A,
     width: h,
     error: t,
     helperText: n,
     label: u,
-    required: y,
-    showRequiredIndicator: L = !0,
-    endAction: q,
-    size: B,
+    required: S,
+    showRequiredIndicator: D = !0,
+    endAction: L,
+    size: q,
     fontSize: w = "md",
-    placeholder: C,
-    value: N,
-    onChange: _,
-    onKeyDown: j,
-    onKeyUp: k,
-    ref: H,
-    style: K,
-    type: $,
-    ...M
-  } = d, s = B ?? "md", R = Z(
+    placeholder: B,
+    value: C,
+    onChange: N,
+    onKeyDown: _,
+    onKeyUp: j,
+    ref: k,
+    style: H,
+    type: oo,
+    ...K
+  } = d, s = q ?? "md", M = $(
     () => p(!e),
     [p, e]
-  ), O = A ? /* @__PURE__ */ o(
-    U,
+  ), O = P ? /* @__PURE__ */ o(
+    R,
     {
-      icon: e ? T.eyeOff : T.eye,
+      icon: e ? Q : J,
       "aria-label": e ? "Hide password" : "Show password",
       variant: "ghost",
       color: "primary",
-      size: G[s],
+      size: Y[s],
       type: "button",
       tabIndex: -1,
-      onClick: R
+      onClick: M
     }
-  ) : q;
-  return /* @__PURE__ */ x(
-    S,
+  ) : L;
+  return /* @__PURE__ */ y(
+    x,
     {
       flexDirection: "column",
       gap: "xs",
@@ -81,17 +82,17 @@ const r = W((d) => {
       style: h !== void 0 ? { width: h } : void 0,
       children: [
         u && /* @__PURE__ */ o(
-          I,
+          T,
           {
             htmlFor: a,
             disabled: c,
-            required: y && L,
+            required: S && D,
             fontSize: w,
             children: u
           }
         ),
-        /* @__PURE__ */ x(
-          S,
+        /* @__PURE__ */ y(
+          x,
           {
             position: "relative",
             width: "100%",
@@ -107,40 +108,40 @@ const r = W((d) => {
               /* @__PURE__ */ o(
                 "input",
                 {
-                  ref: H,
+                  ref: k,
                   id: a,
-                  type: P,
+                  type: g,
                   disabled: c,
-                  required: y,
+                  required: S,
                   "aria-invalid": i || void 0,
                   "aria-describedby": t || n ? l : void 0,
-                  onMouseDown: b,
-                  onFocus: g,
+                  onMouseDown: F,
+                  onFocus: b,
                   onBlur: E,
-                  className: Q(
-                    X.recipe({
+                  className: V(
+                    U.recipe({
                       size: s,
                       hasError: i,
-                      hasStartIcon: F,
+                      hasStartIcon: z,
                       hasEndAction: m
                     }),
-                    D
+                    A
                   ),
-                  placeholder: C,
-                  value: N,
-                  onChange: _,
-                  onKeyDown: j,
-                  onKeyUp: k,
-                  ...M,
-                  style: { fontSize: V.fontSize[w], ...K }
+                  placeholder: B,
+                  value: C,
+                  onChange: N,
+                  onKeyDown: _,
+                  onKeyUp: j,
+                  ...K,
+                  style: { fontSize: W.fontSize[w], ...H }
                 }
               ),
-              m && /* @__PURE__ */ o(z, { children: O })
+              m && /* @__PURE__ */ o(I, { children: O })
             ]
           }
         ),
         (t || n) && /* @__PURE__ */ o(
-          Y,
+          X,
           {
             id: l,
             hasError: i,
@@ -152,9 +153,9 @@ const r = W((d) => {
   );
 });
 r.displayName = "TextField";
-r.Label = I;
+r.Label = T;
 r.StartIcon = v;
-r.EndAction = z;
+r.EndAction = I;
 export {
   r as default
 };

package/dist/components/forms/text-field/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../../src/components/forms/text-field/TextField.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport {\r\n    TextFieldLabel,\r\n    TextFieldStartIcon,\r\n    TextFieldEndAction,\r\n} from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useTextField } from '@components/forms/text-field/hooks/useTextfield.hook.tsx'\r\nimport type { TextFieldCompound } from '@components/forms/text-field/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { IconRegistry } from '@constants/icons'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { memo, useCallback } from 'react'\r\nimport type { TextFieldProps } from '@/components'\r\n\r\n/**\r\n  * A styled text input built with a native `<input>` and `<label>`.\r\n  *\r\n  * - `startIcon` - Iconify icon name rendered on the left.\r\n  * - `endAction` - any ReactNode (e.g. `<IconButton>`) rendered on the right.\r\n  * - `type=\"password\"` - auto-shows an eye-toggle `IconButton` (overrides `endAction`).\r\n  * - `width` - overrides the default `100%` wrapper width.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * input shows the primary border without the ring halo, detected via `onMouseDown`\r\n  * and a `data-mouse-focus` attribute.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <TextField label=\"Email\" startIcon=\"lucide:mail\" placeholder=\"you@example.com\" />\r\n  * <TextField label=\"Password\" type=\"password\" />\r\n  * <TextField label=\"Search\" endAction={<IconButton icon=\"lucide:search\" aria-label=\"Search\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextField label=\"Amount\" width=\"12rem\" />\r\n  * ```\r\n  */\r\nconst TextField = memo<TextFieldProps>((props) => {\r\n    const {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        hasStartIcon,\r\n        hasEndAction,\r\n        handleMouseDown,\r\n        handleFocus,\r\n        handleBlur,\r\n        resolvedType,\r\n        isPassword,\r\n        showPassword,\r\n        setShowPassword,\r\n    } = useTextField(props)\r\n\r\n    const {\r\n        disabled,\r\n        startIcon,\r\n        className,\r\n        width,\r\n        error,\r\n        helperText,\r\n        label,\r\n        required,\r\n        showRequiredIndicator = true,\r\n        endAction,\r\n        size: sizeProp,\r\n        fontSize: fontSizeProp = 'md',\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref,\r\n        style: inputStyle,\r\n        type: _type,\r\n        ...inputProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const handleTogglePassword = useCallback(\r\n        () => setShowPassword(!showPassword),\r\n        [setShowPassword, showPassword],\r\n    )\r\n\r\n    const resolvedEndAction = isPassword ? (\r\n        <IconButton\r\n            icon={showPassword ? IconRegistry.eyeOff : IconRegistry.eye}\r\n            aria-label={showPassword ? 'Hide password' : 'Show password'}\r\n            variant={'ghost'}\r\n            color={'primary'}\r\n            size={fieldSizeToActionSize[size]}\r\n            type={'button'}\r\n            tabIndex={-1}\r\n            onClick={handleTogglePassword}\r\n        />\r\n    ) : (\r\n        endAction\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        >\r\n            {label && (\r\n                <TextFieldLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                    required={required && showRequiredIndicator}\r\n                    fontSize={fontSizeProp}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\r\n            )}\r\n\r\n            <Flex\r\n                position={'relative'}\r\n                width={'100%'}\r\n                gap={'none'}\r\n            >\r\n                {startIcon && (\r\n                    <TextFieldStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <input\r\n                    ref={ref}\r\n                    id={inputId}\r\n                    // `type` is resolved by useTextField for password toggling.\r\n                    type={resolvedType}\r\n                    disabled={disabled}\r\n                    required={required}\r\n                    aria-invalid={hasError || undefined}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    onMouseDown={handleMouseDown}\r\n                    onFocus={handleFocus}\r\n                    onBlur={handleBlur}\r\n                    className={cn(\r\n                        TEXT_FIELD_STYLES.recipe({\r\n                            size,\r\n                            hasError,\r\n                            hasStartIcon,\r\n                            hasEndAction,\r\n                        }),\r\n                        className,\r\n                    )}\r\n                    placeholder={placeholder}\r\n                    value={value}\r\n                    onChange={onChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    {...inputProps}\r\n                    style={{ fontSize: vars.fontSize[fontSizeProp], ...inputStyle }}\r\n                />\r\n\r\n                {hasEndAction && (\r\n                    <TextFieldEndAction>{resolvedEndAction}</TextFieldEndAction>\r\n                )}\r\n            </Flex>\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}) as unknown as TextFieldCompound\r\n\r\nTextField.displayName = 'TextField'\r\nTextField.Label = TextFieldLabel\r\nTextField.StartIcon = TextFieldStartIcon\r\nTextField.EndAction = TextFieldEndAction\r\n\r\nexport default TextField\r\n"],"names":["TextField","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","resolvedType","isPassword","showPassword","setShowPassword","useTextField","disabled","startIcon","className","width","error","helperText","label","required","showRequiredIndicator","endAction","sizeProp","fontSizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","ref","inputStyle","_type","inputProps","size","handleTogglePassword","useCallback","resolvedEndAction","jsx","IconButton","IconRegistry","fieldSizeToActionSize","jsxs","Flex","TextFieldLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","vars","TextFieldEndAction","HelperText"],"mappings":"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"}
+{"version":3,"file":"TextField.js","sources":["../../../../src/components/forms/text-field/TextField.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport {\r\n    TextFieldLabel,\r\n    TextFieldStartIcon,\r\n    TextFieldEndAction,\r\n} from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useTextField } from '@components/forms/text-field/hooks/useTextfield.hook.tsx'\r\nimport type { TextFieldCompound } from '@components/forms/text-field/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport EyeIcon from '@resources/asset/EyeIcon.svg?react'\r\nimport EyeOffIcon from '@resources/asset/EyeOffIcon.svg?react'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { memo, useCallback } from 'react'\r\nimport type { TextFieldProps } from '@/components'\r\n\r\n/**\r\n  * A styled text input built with a native `<input>` and `<label>`.\r\n  *\r\n  * - `startIcon` - Iconify icon name rendered on the left.\r\n  * - `endAction` - any ReactNode (e.g. `<IconButton>`) rendered on the right.\r\n  * - `type=\"password\"` - auto-shows an eye-toggle `IconButton` (overrides `endAction`).\r\n  * - `width` - overrides the default `100%` wrapper width.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * input shows the primary border without the ring halo, detected via `onMouseDown`\r\n  * and a `data-mouse-focus` attribute.\r\n  *\r\n  * @example\r\n  * ```tsx\r\n  * <TextField label=\"Email\" startIcon=\"lucide:mail\" placeholder=\"you@example.com\" />\r\n  * <TextField label=\"Password\" type=\"password\" />\r\n  * <TextField label=\"Search\" endAction={<IconButton icon=\"lucide:search\" aria-label=\"Search\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextField label=\"Amount\" width=\"12rem\" />\r\n  * ```\r\n  */\r\nconst TextField = memo<TextFieldProps>((props) => {\r\n    const {\r\n        inputId,\r\n        helperId,\r\n        hasError,\r\n        hasStartIcon,\r\n        hasEndAction,\r\n        handleMouseDown,\r\n        handleFocus,\r\n        handleBlur,\r\n        resolvedType,\r\n        isPassword,\r\n        showPassword,\r\n        setShowPassword,\r\n    } = useTextField(props)\r\n\r\n    const {\r\n        disabled,\r\n        startIcon,\r\n        className,\r\n        width,\r\n        error,\r\n        helperText,\r\n        label,\r\n        required,\r\n        showRequiredIndicator = true,\r\n        endAction,\r\n        size: sizeProp,\r\n        fontSize: fontSizeProp = 'md',\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref,\r\n        style: inputStyle,\r\n        type: _type,\r\n        ...inputProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const handleTogglePassword = useCallback(\r\n        () => setShowPassword(!showPassword),\r\n        [setShowPassword, showPassword],\r\n    )\r\n\r\n    const resolvedEndAction = isPassword ? (\r\n        <IconButton\r\n            icon={showPassword ? EyeOffIcon : EyeIcon}\r\n            aria-label={showPassword ? 'Hide password' : 'Show password'}\r\n            variant={'ghost'}\r\n            color={'primary'}\r\n            size={fieldSizeToActionSize[size]}\r\n            type={'button'}\r\n            tabIndex={-1}\r\n            onClick={handleTogglePassword}\r\n        />\r\n    ) : (\r\n        endAction\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        >\r\n            {label && (\r\n                <TextFieldLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                    required={required && showRequiredIndicator}\r\n                    fontSize={fontSizeProp}\r\n                >\r\n                    {label}\r\n                </TextFieldLabel>\r\n            )}\r\n\r\n            <Flex\r\n                position={'relative'}\r\n                width={'100%'}\r\n                gap={'none'}\r\n            >\r\n                {startIcon && (\r\n                    <TextFieldStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <input\r\n                    ref={ref}\r\n                    id={inputId}\r\n                    // `type` is resolved by useTextField for password toggling.\r\n                    type={resolvedType}\r\n                    disabled={disabled}\r\n                    required={required}\r\n                    aria-invalid={hasError || undefined}\r\n                    aria-describedby={error || helperText ? helperId : undefined}\r\n                    onMouseDown={handleMouseDown}\r\n                    onFocus={handleFocus}\r\n                    onBlur={handleBlur}\r\n                    className={cn(\r\n                        TEXT_FIELD_STYLES.recipe({\r\n                            size,\r\n                            hasError,\r\n                            hasStartIcon,\r\n                            hasEndAction,\r\n                        }),\r\n                        className,\r\n                    )}\r\n                    placeholder={placeholder}\r\n                    value={value}\r\n                    onChange={onChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    {...inputProps}\r\n                    style={{ fontSize: vars.fontSize[fontSizeProp], ...inputStyle }}\r\n                />\r\n\r\n                {hasEndAction && (\r\n                    <TextFieldEndAction>{resolvedEndAction}</TextFieldEndAction>\r\n                )}\r\n            </Flex>\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}) as unknown as TextFieldCompound\r\n\r\nTextField.displayName = 'TextField'\r\nTextField.Label = TextFieldLabel\r\nTextField.StartIcon = TextFieldStartIcon\r\nTextField.EndAction = TextFieldEndAction\r\n\r\nexport default TextField\r\n"],"names":["TextField","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","resolvedType","isPassword","showPassword","setShowPassword","useTextField","disabled","startIcon","className","width","error","helperText","label","required","showRequiredIndicator","endAction","sizeProp","fontSizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","ref","inputStyle","_type","inputProps","size","handleTogglePassword","useCallback","resolvedEndAction","jsx","IconButton","EyeOffIcon","EyeIcon","fieldSizeToActionSize","jsxs","Flex","TextFieldLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","vars","TextFieldEndAction","HelperText"],"mappings":"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"}

package/dist/components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit82.css');;/* empty css                                        */var e={root:"_14iivnx0"};exports.TEXT_FIELD_END_ACTION_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit88.css');;/* empty css                                        */var e={root:"_14iivnx0"};exports.TEXT_FIELD_END_ACTION_STYLES=e;
 //# sourceMappingURL=TextFieldEndAction.css.cjs.map

package/dist/components/forms/text-field/components/text-field-end-action/styles/TextFieldEndAction.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit82.css';/* empty css                                      */
+import '../../../../../../ui-kit88.css';/* empty css                                      */
 var o = { root: "_14iivnx0" };
 export {
   o as TEXT_FIELD_END_ACTION_STYLES

package/dist/components/forms/text-field/components/text-field-label/TextFieldLabel.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),l=require("react"),s=require("./styles/TextFieldLabel.css.cjs"),n=require("../../../../../theme/contract.css.cjs"),t=l.memo(({htmlFor:r,disabled:a,required:i,fontSize:c="md",children:d})=>e.jsxs("label",{htmlFor:r,className:s.TEXT_FIELD_LABEL_STYLES.root,style:{fontSize:n.vars.fontSize[c]},"data-disabled":a?"":void 0,children:[d,i&&e.jsx("span",{className:s.TEXT_FIELD_LABEL_STYLES.requiredIndicator,"aria-hidden":"true",children:" *"})]}));t.displayName="TextField.Label";module.exports=t;
+"use strict";const e=require("react/jsx-runtime"),l=require("react"),s=require("./styles/TextFieldLabel.css.cjs"),n=require("../../../../../theme/contract.css.cjs"),t=l.memo(({htmlFor:a,disabled:i,required:r,fontSize:c="md",children:d})=>e.jsxs("label",{htmlFor:a,className:s.TEXT_FIELD_LABEL_STYLES.root,style:{fontSize:n.vars.fontSize[c]},"data-disabled":i?"":void 0,children:[d,r&&e.jsx("span",{className:s.TEXT_FIELD_LABEL_STYLES.requiredIndicator,"aria-hidden":"true",children:" *"})]}));t.displayName="TextField.Label";module.exports=t;
 //# sourceMappingURL=TextFieldLabel.cjs.map

package/dist/components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit93.css');require('../../../../../../ui-kit2.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                    */var r={root:"_1uvjcr80",requiredIndicator:"_1uvjcr81"};exports.TEXT_FIELD_LABEL_STYLES=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit90.css');require('../../../../../../ui-kit2.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                    */var r={root:"_1uvjcr80",requiredIndicator:"_1uvjcr81"};exports.TEXT_FIELD_LABEL_STYLES=r;
 //# sourceMappingURL=TextFieldLabel.css.cjs.map

package/dist/components/forms/text-field/components/text-field-label/styles/TextFieldLabel.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit93.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit90.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                                      */
 /* empty css                                  */
 var i = { root: "_1uvjcr80", requiredIndicator: "_1uvjcr81" };

package/dist/components/forms/text-field/components/text-field-start-icon/styles/TextFieldStartIcon.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit77.css');require('../../../../../../ui-kit2.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                        */var e={root:"_1hy9fia0"};exports.TEXT_FIELD_START_ICON_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit89.css');require('../../../../../../ui-kit2.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                                        */;/* empty css                                        */var e={root:"_1hy9fia0"};exports.TEXT_FIELD_START_ICON_STYLES=e;
 //# sourceMappingURL=TextFieldStartIcon.css.cjs.map

package/dist/components/forms/text-field/components/text-field-start-icon/styles/TextFieldStartIcon.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit77.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit89.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                                      */
 /* empty css                                      */
 var T = { root: "_1hy9fia0" };

package/dist/components/forms/text-field/components/text-field-start-icon/types/TextFieldStartIcon.types.d.ts

@@ -1,5 +1,6 @@
 import { TextFieldSize } from '../../../../..';
+import { IconComponent } from '../../../../../foundation/icon';
 export type TextFieldStartIconProps = {
-    icon: string;
+    icon: IconComponent;
     size: NonNullable<TextFieldSize>;
 };

package/dist/components/forms/text-field/styles/TextField.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit46.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                               */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:e.createRuntimeFn({defaultClassName:"_1ugc12d0",variantClassNames:{size:{sm:"_1ugc12d1",md:"_1ugc12d2",lg:"_1ugc12d3"},hasError:{true:"_1ugc12d4",false:"_1ugc12d5"},hasStartIcon:{true:"_1ugc12d6",false:"_1ugc12d7"},hasEndAction:{true:"_1ugc12d8",false:"_1ugc12d9"}},defaultVariants:{size:"md",hasError:!1,hasStartIcon:!1,hasEndAction:!1},compoundVariants:[[{size:"sm",hasStartIcon:!0},"_1ugc12da"],[{size:"md",hasStartIcon:!0},"_1ugc12db"],[{size:"lg",hasStartIcon:!0},"_1ugc12dc"],[{size:"sm",hasEndAction:!0},"_1ugc12dd"],[{size:"md",hasEndAction:!0},"_1ugc12de"],[{size:"lg",hasEndAction:!0},"_1ugc12df"]]})};exports.TEXT_FIELD_STYLES=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit76.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                               */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:e.createRuntimeFn({defaultClassName:"_1ugc12d0",variantClassNames:{size:{sm:"_1ugc12d1",md:"_1ugc12d2",lg:"_1ugc12d3"},hasError:{true:"_1ugc12d4",false:"_1ugc12d5"},hasStartIcon:{true:"_1ugc12d6",false:"_1ugc12d7"},hasEndAction:{true:"_1ugc12d8",false:"_1ugc12d9"}},defaultVariants:{size:"md",hasError:!1,hasStartIcon:!1,hasEndAction:!1},compoundVariants:[[{size:"sm",hasStartIcon:!0},"_1ugc12da"],[{size:"md",hasStartIcon:!0},"_1ugc12db"],[{size:"lg",hasStartIcon:!0},"_1ugc12dc"],[{size:"sm",hasEndAction:!0},"_1ugc12dd"],[{size:"md",hasEndAction:!0},"_1ugc12de"],[{size:"lg",hasEndAction:!0},"_1ugc12df"]]})};exports.TEXT_FIELD_STYLES=a;
 //# sourceMappingURL=TextField.css.cjs.map

package/dist/components/forms/text-field/styles/TextField.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit46.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit76.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                             */
 import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
 var r = { recipe: a({ defaultClassName: "_1ugc12d0", variantClassNames: { size: { sm: "_1ugc12d1", md: "_1ugc12d2", lg: "_1ugc12d3" }, hasError: { true: "_1ugc12d4", false: "_1ugc12d5" }, hasStartIcon: { true: "_1ugc12d6", false: "_1ugc12d7" }, hasEndAction: { true: "_1ugc12d8", false: "_1ugc12d9" } }, defaultVariants: { size: "md", hasError: !1, hasStartIcon: !1, hasEndAction: !1 }, compoundVariants: [[{ size: "sm", hasStartIcon: !0 }, "_1ugc12da"], [{ size: "md", hasStartIcon: !0 }, "_1ugc12db"], [{ size: "lg", hasStartIcon: !0 }, "_1ugc12dc"], [{ size: "sm", hasEndAction: !0 }, "_1ugc12dd"], [{ size: "md", hasEndAction: !0 }, "_1ugc12de"], [{ size: "lg", hasEndAction: !0 }, "_1ugc12df"]] }) };

package/dist/components/forms/text-field/types/TextField.props.d.ts

@@ -1,6 +1,7 @@
 import { RefAttributes } from 'react';
 import { TextFieldSize } from './TextField.types.ts';
 import { TypographySize } from '../../../foundation/typography/types/Typography.types.ts';
+import { IconComponent } from '../../../foundation/icon';
 import type * as React from 'react';
 export type TextFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & RefAttributes<HTMLInputElement> & {
     /** Input size. @default 'md' */
@@ -15,8 +16,8 @@ export type TextFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, '
     helperText?: string;
     /** Error message rendered below the input. When set, the input is styled in its error state. */
     error?: string;
-    /** Iconify icon name rendered on the left side of the input. */
-    startIcon?: string;
+    /** SVG component rendered on the left side of the input. */
+    startIcon?: IconComponent;
     /**
      * Custom action element (e.g. `<IconButton>`) rendered on the right side of the input.
      * Ignored when `type="password"` (the toggle button takes precedence).

package/dist/components/foundation/icon/Icon.cjs

@@ -1,2 +1,2 @@
-"use strict";const r=require("react/jsx-runtime"),j=require("@iconify/react"),v=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const S=require("./styles/Icon.css.cjs"),h=require("../../../utils/cn.cjs"),C=require("react"),c=C.memo(({icon:i,size:n,spin:o,color:t,padding:a,borderColor:l,backgroundColor:u,borderWidth:d,borderStyle:m,borderRadius:p,"aria-label":e,className:q,style:x,...I})=>{const s=e===void 0,y=S.ICON_STYLES.recipe({size:n,spin:o,color:t}),N={...x};return r.jsx(v,{as:"span",display:"inline-flex",padding:a,borderColor:l,backgroundColor:u,borderWidth:d,borderStyle:m,borderRadius:p,children:r.jsx(j.Icon,{icon:i,"aria-hidden":s,"aria-label":e,role:s?void 0:"img",className:h.cn(y,q),style:N,...I})})});c.displayName="Icon";module.exports=c;
+"use strict";const s=require("react/jsx-runtime"),I=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const N=require("./styles/Icon.css.cjs"),j=require("../../../utils/cn.cjs"),S=require("react"),c=S.memo(({icon:o,size:r,spin:n,color:t,padding:a,borderColor:l,backgroundColor:d,borderWidth:u,borderStyle:m,borderRadius:p,"aria-label":e,className:q,style:x,...h})=>{const i=e===void 0,v=N.ICON_STYLES.recipe({size:r,spin:n,color:t}),y={...x};return s.jsx(I,{as:"span",display:"inline-flex",padding:a,borderColor:l,backgroundColor:d,borderWidth:u,borderStyle:m,borderRadius:p,children:s.jsx(o,{width:void 0,height:void 0,"aria-hidden":i,"aria-label":e,role:i?void 0:"img",className:j.cn(v,q),style:y,...h})})});c.displayName="Icon";module.exports=c;
 //# sourceMappingURL=Icon.cjs.map

package/dist/components/foundation/icon/Icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.cjs","sources":["../../../../src/components/foundation/icon/Icon.tsx"],"sourcesContent":["import { Icon as Iconify } from '@iconify/react'\r\n\r\nimport { Box } from '@components/layout/box'\r\nimport { ICON_STYLES } from '@components/foundation/icon/styles/Icon.css.ts'\r\nimport type { IconProps } from '@components/foundation/icon/types/Icon.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type CSSProperties, type FC } from 'react'\r\n\r\n/**\r\n * Iconify icon wrapper. Decorative by default (`aria-hidden`). Pass\r\n * `aria-label` to emit `role=\"img\"` for informative icons. An icon inside\r\n * a named control should remain decorative — the control owns the name.\r\n */\r\nconst Icon: FC<IconProps> = memo(({\r\n    icon,\r\n    size,\r\n    spin,\r\n    color,\r\n    padding,\r\n    borderColor,\r\n    backgroundColor,\r\n    borderWidth,\r\n    borderStyle,\r\n    borderRadius,\r\n    'aria-label': ariaLabel,\r\n    className,\r\n    style,\r\n    ...props\r\n}) => {\r\n    const isDecorative = ariaLabel === undefined\r\n\r\n    const recipeClassName = ICON_STYLES.recipe({\r\n        size,\r\n        spin,\r\n        color,\r\n    })\r\n\r\n    const computedStyle: CSSProperties = {\r\n        ...style,\r\n    }\r\n\r\n    return (\r\n        <Box\r\n            as={'span'}\r\n            display={'inline-flex'}\r\n            padding={padding}\r\n            borderColor={borderColor}\r\n            backgroundColor={backgroundColor}\r\n            borderWidth={borderWidth}\r\n            borderStyle={borderStyle}\r\n            borderRadius={borderRadius}\r\n        >\r\n            <Iconify\r\n                icon={icon}\r\n                aria-hidden={isDecorative}\r\n                aria-label={ariaLabel}\r\n                role={isDecorative ? undefined : 'img'}\r\n                className={cn(recipeClassName, className)}\r\n                style={computedStyle}\r\n                {...props}\r\n            />\r\n        </Box>\r\n    )\r\n})\r\n\r\nIcon.displayName = 'Icon'\r\n\r\nexport default Icon\r\n"],"names":["Icon","memo","icon","size","spin","color","padding","borderColor","backgroundColor","borderWidth","borderStyle","borderRadius","ariaLabel","className","style","props","isDecorative","recipeClassName","ICON_STYLES","computedStyle","jsx","Box","Iconify","cn"],"mappings":"kQAaMA,EAAsBC,EAAAA,KAAK,CAAC,CAC9B,KAAAC,EACA,KAAAC,EACA,KAAAC,EACA,MAAAC,EACA,QAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAcC,EACd,UAAAC,EACA,MAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAeJ,IAAc,OAE7BK,EAAkBC,EAAAA,YAAY,OAAO,CACvC,KAAAf,EACA,KAAAC,EACA,MAAAC,CAAA,CACH,EAEKc,EAA+B,CACjC,GAAGL,CAAA,EAGP,OACIM,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,cACT,QAAAf,EACA,YAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,YAAAC,EACA,aAAAC,EAEA,SAAAS,EAAAA,IAACE,EAAAA,KAAA,CACG,KAAApB,EACA,cAAac,EACb,aAAYJ,EACZ,KAAMI,EAAe,OAAY,MACjC,UAAWO,EAAAA,GAAGN,EAAiBJ,CAAS,EACxC,MAAOM,EACN,GAAGJ,CAAA,CAAA,CACR,CAAA,CAGZ,CAAC,EAEDf,EAAK,YAAc"}
+{"version":3,"file":"Icon.cjs","sources":["../../../../src/components/foundation/icon/Icon.tsx"],"sourcesContent":["import { Box } from '@components/layout/box'\r\nimport { ICON_STYLES } from '@components/foundation/icon/styles/Icon.css.ts'\r\nimport type { IconProps } from '@components/foundation/icon/types/Icon.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type CSSProperties, type FC } from 'react'\r\n\r\n/**\r\n * SVG icon wrapper. Decorative by default (`aria-hidden`). Pass\r\n * `aria-label` to emit `role=\"img\"` for informative icons. An icon inside\r\n * a named control should remain decorative — the control owns the name.\r\n */\r\nconst Icon: FC<IconProps> = memo(({\r\n    icon: IconComponent,\r\n    size,\r\n    spin,\r\n    color,\r\n    padding,\r\n    borderColor,\r\n    backgroundColor,\r\n    borderWidth,\r\n    borderStyle,\r\n    borderRadius,\r\n    'aria-label': ariaLabel,\r\n    className,\r\n    style,\r\n    ...props\r\n}) => {\r\n    const isDecorative = ariaLabel === undefined\r\n\r\n    const recipeClassName = ICON_STYLES.recipe({\r\n        size,\r\n        spin,\r\n        color,\r\n    })\r\n\r\n    const computedStyle: CSSProperties = {\r\n        ...style,\r\n    }\r\n\r\n    return (\r\n        <Box\r\n            as={'span'}\r\n            display={'inline-flex'}\r\n            padding={padding}\r\n            borderColor={borderColor}\r\n            backgroundColor={backgroundColor}\r\n            borderWidth={borderWidth}\r\n            borderStyle={borderStyle}\r\n            borderRadius={borderRadius}\r\n        >\r\n            <IconComponent\r\n                width={undefined}\r\n                height={undefined}\r\n                aria-hidden={isDecorative}\r\n                aria-label={ariaLabel}\r\n                role={isDecorative ? undefined : 'img'}\r\n                className={cn(recipeClassName, className)}\r\n                style={computedStyle}\r\n                {...props}\r\n            />\r\n        </Box>\r\n    )\r\n})\r\n\r\nIcon.displayName = 'Icon'\r\n\r\nexport default Icon\r\n"],"names":["Icon","memo","IconComponent","size","spin","color","padding","borderColor","backgroundColor","borderWidth","borderStyle","borderRadius","ariaLabel","className","style","props","isDecorative","recipeClassName","ICON_STYLES","computedStyle","jsx","Box","cn"],"mappings":"sOAWMA,EAAsBC,EAAAA,KAAK,CAAC,CAC9B,KAAMC,EACN,KAAAC,EACA,KAAAC,EACA,MAAAC,EACA,QAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAcC,EACd,UAAAC,EACA,MAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAeJ,IAAc,OAE7BK,EAAkBC,EAAAA,YAAY,OAAO,CACvC,KAAAf,EACA,KAAAC,EACA,MAAAC,CAAA,CACH,EAEKc,EAA+B,CACjC,GAAGL,CAAA,EAGP,OACIM,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,cACT,QAAAf,EACA,YAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,YAAAC,EACA,aAAAC,EAEA,SAAAS,EAAAA,IAAClB,EAAA,CACG,MAAO,OACP,OAAQ,OACR,cAAac,EACb,aAAYJ,EACZ,KAAMI,EAAe,OAAY,MACjC,UAAWM,EAAAA,GAAGL,EAAiBJ,CAAS,EACxC,MAAOM,EACN,GAAGJ,CAAA,CAAA,CACR,CAAA,CAGZ,CAAC,EAEDf,EAAK,YAAc"}

package/dist/components/foundation/icon/Icon.d.ts

@@ -1,7 +1,7 @@
 import { IconProps } from './types/Icon.props.ts';
 import { FC } from 'react';
 /**
- * Iconify icon wrapper. Decorative by default (`aria-hidden`). Pass
+ * SVG icon wrapper. Decorative by default (`aria-hidden`). Pass
  * `aria-label` to emit `role="img"` for informative icons. An icon inside
  * a named control should remain decorative — the control owns the name.
  */

package/dist/components/foundation/icon/Icon.js

@@ -1,61 +1,61 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Icon as u } from "@iconify/react";
-import v from "../../layout/box/Box.js";
+import N from "../../layout/box/Box.js";
 import "../../layout/box/styles/Box.css.js";
-import { ICON_STYLES as S } from "./styles/Icon.css.js";
-import { cn as h } from "../../../utils/cn.js";
-import { memo as C } from "react";
-const b = C(({
-  icon: i,
-  size: m,
-  spin: a,
-  color: t,
+import { ICON_STYLES as u } from "./styles/Icon.css.js";
+import { cn as I } from "../../../utils/cn.js";
+import { memo as S } from "react";
+const g = S(({
+  icon: r,
+  size: t,
+  spin: m,
+  color: a,
   padding: s,
   borderColor: c,
-  backgroundColor: n,
-  borderWidth: l,
+  backgroundColor: l,
+  borderWidth: n,
   borderStyle: p,
   borderRadius: d,
   "aria-label": o,
   className: f,
-  style: I,
-  ...x
+  style: h,
+  ...v
 }) => {
-  const r = o === void 0, y = S.recipe({
-    size: m,
-    spin: a,
-    color: t
-  }), N = {
-    ...I
+  const i = o === void 0, x = u.recipe({
+    size: t,
+    spin: m,
+    color: a
+  }), y = {
+    ...h
   };
   return /* @__PURE__ */ e(
-    v,
+    N,
     {
       as: "span",
       display: "inline-flex",
       padding: s,
       borderColor: c,
-      backgroundColor: n,
-      borderWidth: l,
+      backgroundColor: l,
+      borderWidth: n,
       borderStyle: p,
       borderRadius: d,
       children: /* @__PURE__ */ e(
-        u,
+        r,
         {
-          icon: i,
-          "aria-hidden": r,
+          width: void 0,
+          height: void 0,
+          "aria-hidden": i,
           "aria-label": o,
-          role: r ? void 0 : "img",
-          className: h(y, f),
-          style: N,
-          ...x
+          role: i ? void 0 : "img",
+          className: I(x, f),
+          style: y,
+          ...v
         }
       )
     }
   );
 });
-b.displayName = "Icon";
+g.displayName = "Icon";
 export {
-  b as default
+  g as default
 };
 //# sourceMappingURL=Icon.js.map