@choco-vanille/ui 1.5.0 → 1.5.2

package/dist/components/forms/text-area/TextArea.cjs

@@ -1,2 +1,2 @@
-"use strict";require('../../../ui-kit85.css');require('../../../ui-kit69.css');require('../../../ui-kit71.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const e=require("react/jsx-runtime"),j=require("./components/text-area-label/TextAreaLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                     */const v=require("./components/text-area-start-icon/TextAreaStartIcon.cjs");;/* empty css                                                                              */const z=require("./components/text-area-end-action/TextAreaEndAction.cjs");;/* empty css                                                                              */const H=require("./styles/TextArea.css.cjs"),U=require("../_shared/components/helper-text/HelperText.cjs"),X=require("./hooks/useAutoResizeTextArea.hook.cjs"),Y=require("./hooks/useTextArea.hook.cjs"),E=require("../../layout/flex/Flex.cjs");require("../../layout/flex/styles/Flex.css.cjs");const G=require("../../../utils/cn.cjs"),t=require("react"),n=t.memo(u=>{const{inputId:l,helperId:d,hasError:o,hasStartIcon:I,hasEndAction:x,handleMouseDown:g,handleFocus:y,handleBlur:C}=Y.useTextArea(u),{disabled:h,startIcon:A,className:S,width:q,error:i,helperText:a,label:T,endAction:_,size:k,placeholder:D,value:m,onChange:p,onKeyDown:F,onKeyUp:L,ref:r,rows:c,minRows:f,maxRows:N,...B}=u,w=k??"md",R=t.useRef(null),K=t.useCallback(s=>{R.current=s,typeof r=="function"?r(s):r&&(r.current=s)},[r]),{isEnabled:M,resize:b}=X.useAutoResizeTextArea(R,{minRows:f??c,maxRows:N,value:m}),P=t.useCallback(s=>{p?.(s),b()},[p,b]);return e.jsxs(E,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:q!==void 0?{width:q}:void 0,children:[T&&e.jsx(j,{htmlFor:l,disabled:h,children:T}),e.jsxs(E,{position:"relative",width:"100%",gap:"none",children:[A&&e.jsx(v,{icon:A,size:w}),e.jsx("textarea",{ref:K,id:l,disabled:h,"aria-invalid":o||void 0,"aria-describedby":i||a?d:void 0,onMouseDown:g,onFocus:y,onBlur:C,className:G.cn(H.TEXT_AREA_STYLES.recipe({size:w,hasError:o,hasStartIcon:I,hasEndAction:x}),S),placeholder:D,value:m,onChange:P,onKeyDown:F,onKeyUp:L,rows:M?f??c:c,...B}),x&&e.jsx(z,{children:_})]}),(i||a)&&e.jsx(U,{id:d,hasError:o,children:i??a})]})});n.displayName="TextArea";n.Label=j;n.StartIcon=v;n.EndAction=z;module.exports=n;
+"use strict";require('../../../ui-kit79.css');require('../../../ui-kit98.css');require('../../../ui-kit86.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const e=require("react/jsx-runtime"),y=require("./components/text-area-label/TextAreaLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                     */const E=require("./components/text-area-start-icon/TextAreaStartIcon.cjs");;/* empty css                                                                              */const j=require("./components/text-area-end-action/TextAreaEndAction.cjs");;/* empty css                                                                              */const X=require("./styles/TextArea.css.cjs"),Y=require("../_shared/components/helper-text/HelperText.cjs"),G=require("./hooks/useAutoResizeTextArea.hook.cjs"),J=require("./hooks/useTextArea.hook.cjs"),b=require("../../layout/flex/Flex.cjs");require("../../layout/flex/styles/Flex.css.cjs");const O=require("../../../utils/cn.cjs"),Q=require("../../../theme/contract.css.cjs"),s=require("react"),n=s.memo(l=>{const{inputId:u,helperId:d,hasError:o,hasStartIcon:v,hasEndAction:x,handleMouseDown:I,handleFocus:g,handleBlur:_}=J.useTextArea(l),{disabled:h,startIcon:q,className:C,width:A,error:i,helperText:a,label:f,endAction:k,size:D,fontSize:T="md",placeholder:F,value:m,onChange:p,onKeyDown:L,onKeyUp:N,ref:r,style:P,rows:c,minRows:w,maxRows:B,...K}=l,z=D??"md",R=s.useRef(null),M=s.useCallback(t=>{R.current=t,typeof r=="function"?r(t):r&&(r.current=t)},[r]),{isEnabled:H,resize:S}=G.useAutoResizeTextArea(R,{minRows:w??c,maxRows:B,value:m}),U=s.useCallback(t=>{p?.(t),S()},[p,S]);return e.jsxs(b,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:A!==void 0?{width:A}:void 0,children:[f&&e.jsx(y,{htmlFor:u,disabled:h,fontSize:T,children:f}),e.jsxs(b,{position:"relative",width:"100%",gap:"none",children:[q&&e.jsx(E,{icon:q,size:z}),e.jsx("textarea",{ref:M,id:u,disabled:h,"aria-invalid":o||void 0,"aria-describedby":i||a?d:void 0,onMouseDown:I,onFocus:g,onBlur:_,className:O.cn(X.TEXT_AREA_STYLES.recipe({size:z,hasError:o,hasStartIcon:v,hasEndAction:x}),C),placeholder:F,value:m,onChange:U,onKeyDown:L,onKeyUp:N,rows:H?w??c:c,...K,style:{fontSize:Q.vars.fontSize[T],...P}}),x&&e.jsx(j,{children:k})]}),(i||a)&&e.jsx(Y,{id:d,hasError:o,children:i??a})]})});n.displayName="TextArea";n.Label=y;n.StartIcon=E;n.EndAction=j;module.exports=n;
 //# sourceMappingURL=TextArea.cjs.map

package/dist/components/forms/text-area/TextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/forms/text-area/TextArea.tsx"],"sourcesContent":["import {\r\n    TextAreaLabel,\r\n    TextAreaStartIcon,\r\n    TextAreaEndAction,\r\n} from '@components/forms/text-area/components/index.ts'\r\nimport { TEXT_AREA_STYLES } from '@components/forms/text-area/styles/TextArea.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { useAutoResizeTextArea } from '@components/forms/text-area/hooks/useAutoResizeTextArea.hook.tsx'\r\nimport { useTextArea } from '@components/forms/text-area/hooks/useTextArea.hook.tsx'\r\nimport type { TextAreaCompound } from '@components/forms/text-area/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, useCallback, useRef } from 'react'\r\nimport type { TextAreaProps } from '@/components'\r\n\r\n/**\r\n  * A styled textarea built with a native `<textarea>` 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  * - `width` - overrides the default `100%` wrapper width.\r\n  * - `rows` - sets the native number of visible text lines.\r\n  * - `minRows` / `maxRows` - enables auto-resize; the textarea grows with content\r\n  *   until it reaches `maxRows`, then stops expanding and shows a scrollbar.\r\n  *   Manual resizing is always disabled.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * textarea 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  * <TextArea label=\"Description\" placeholder=\"Tell us more…\" rows={4} />\r\n  * <TextArea label=\"Comment\" startIcon=\"lucide:message-square\" minRows={2} maxRows={6} />\r\n  * <TextArea label=\"Bio\" endAction={<IconButton icon=\"lucide:x\" aria-label=\"Clear\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextArea label=\"Notes\" width=\"24rem\" />\r\n  * ```\r\n  */\r\nconst TextArea = memo<TextAreaProps>((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    } = useTextArea(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        endAction,\r\n        size: sizeProp,\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref: forwardedRef,\r\n        rows,\r\n        minRows,\r\n        maxRows,\r\n        ...textareaProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const innerRef = useRef<HTMLTextAreaElement>(null)\r\n    const setRef = useCallback(\r\n        (node: HTMLTextAreaElement | null) => {\r\n            innerRef.current = node\r\n            if (typeof forwardedRef === 'function') {\r\n                forwardedRef(node)\r\n            } else if (forwardedRef) {\r\n                forwardedRef.current = node\r\n            }\r\n        },\r\n        [forwardedRef],\r\n    )\r\n\r\n    const { isEnabled: autoResizeEnabled, resize } = useAutoResizeTextArea(\r\n        innerRef,\r\n        {\r\n            minRows: minRows ?? rows,\r\n            maxRows,\r\n            value,\r\n        },\r\n    )\r\n\r\n    const handleChange = useCallback(\r\n        (e: React.ChangeEvent<HTMLTextAreaElement>) => {\r\n            onChange?.(e)\r\n            resize()\r\n        },\r\n        [onChange, resize],\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                <TextAreaLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                >\r\n                    {label}\r\n                </TextAreaLabel>\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                    <TextAreaStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <textarea\r\n                    ref={setRef}\r\n                    id={inputId}\r\n                    disabled={disabled}\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_AREA_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={handleChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    rows={autoResizeEnabled ? (minRows ?? rows) : rows}\r\n                    {...textareaProps}\r\n                />\r\n\r\n                {hasEndAction && <TextAreaEndAction>{endAction}</TextAreaEndAction>}\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 TextAreaCompound\r\n\r\nTextArea.displayName = 'TextArea'\r\nTextArea.Label = TextAreaLabel\r\nTextArea.StartIcon = TextAreaStartIcon\r\nTextArea.EndAction = TextAreaEndAction\r\n\r\nexport default TextArea\r\n"],"names":["TextArea","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","useTextArea","disabled","startIcon","className","width","error","helperText","label","endAction","sizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","forwardedRef","rows","minRows","maxRows","textareaProps","size","innerRef","useRef","setRef","useCallback","node","autoResizeEnabled","resize","useAutoResizeTextArea","handleChange","e","jsxs","Flex","jsx","TextAreaLabel","TextAreaStartIcon","cn","TEXT_AREA_STYLES","TextAreaEndAction","HelperText"],"mappings":"w+BAsCMA,EAAWC,EAAAA,KAAqBC,GAAU,CAC5C,KAAM,CACF,QAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,WAAAC,CAAA,EACAC,EAAAA,YAAYT,CAAK,EAEf,CACF,SAAAU,EACA,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,KAAMC,EACN,YAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAKC,EACL,KAAAC,EACA,QAAAC,EACA,QAAAC,EACA,GAAGC,CAAA,EACH5B,EACE6B,EAAOX,GAAY,KAEnBY,EAAWC,EAAAA,OAA4B,IAAI,EAC3CC,EAASC,EAAAA,YACVC,GAAqC,CAClCJ,EAAS,QAAUI,EACf,OAAOV,GAAiB,WACxBA,EAAaU,CAAI,EACVV,IACPA,EAAa,QAAUU,EAE/B,EACA,CAACV,CAAY,CAAA,EAGX,CAAE,UAAWW,EAAmB,OAAAC,CAAA,EAAWC,EAAAA,sBAC7CP,EACA,CACI,QAASJ,GAAWD,EACpB,QAAAE,EACA,MAAAP,CAAA,CACJ,EAGEkB,EAAeL,EAAAA,YAChBM,GAA8C,CAC3ClB,IAAWkB,CAAC,EACZH,EAAA,CACJ,EACA,CAACf,EAAUe,CAAM,CAAA,EAGrB,OACII,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,IAAK,KACL,MAAO,OACP,WAAY,QACZ,MAAO5B,IAAU,OAAY,CAAE,MAAAA,GAAU,OAExC,SAAA,CAAAG,GACG0B,EAAAA,IAACC,EAAA,CACG,QAAS1C,EACT,SAAAS,EAEC,SAAAM,CAAA,CAAA,EAITwB,EAAAA,KAACC,EAAA,CACG,SAAU,WACV,MAAO,OACP,IAAK,OAEJ,SAAA,CAAA9B,GACG+B,EAAAA,IAACE,EAAA,CACG,KAAMjC,EACN,KAAAkB,CAAA,CAAA,EAIRa,EAAAA,IAAC,WAAA,CACG,IAAKV,EACL,GAAI/B,EACJ,SAAAS,EACA,eAAcP,GAAY,OAC1B,mBAAkBW,GAASC,EAAab,EAAW,OACnD,YAAaI,EACb,QAASC,EACT,OAAQC,EACR,UAAWqC,EAAAA,GACPC,EAAAA,iBAAiB,OAAO,CACpB,KAAAjB,EACA,SAAA1B,EACA,aAAAC,EACA,aAAAC,CAAA,CACH,EACDO,CAAA,EAEJ,YAAAO,EACA,MAAAC,EACA,SAAUkB,EACV,UAAAhB,EACA,QAAAC,EACA,KAAMY,EAAqBT,GAAWD,EAAQA,EAC7C,GAAGG,CAAA,CAAA,EAGPvB,GAAgBqC,EAAAA,IAACK,EAAA,CAAmB,SAAA9B,CAAA,CAAU,CAAA,CAAA,CAAA,GAGjDH,GAASC,IACP2B,EAAAA,IAACM,EAAA,CACG,GAAI9C,EACJ,SAAAC,EAEC,SAAAW,GAASC,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDjB,EAAS,YAAc,WACvBA,EAAS,MAAQ6C,EACjB7C,EAAS,UAAY8C,EACrB9C,EAAS,UAAYiD"}
+{"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/forms/text-area/TextArea.tsx"],"sourcesContent":["import {\r\n    TextAreaLabel,\r\n    TextAreaStartIcon,\r\n    TextAreaEndAction,\r\n} from '@components/forms/text-area/components/index.ts'\r\nimport { TEXT_AREA_STYLES } from '@components/forms/text-area/styles/TextArea.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { useAutoResizeTextArea } from '@components/forms/text-area/hooks/useAutoResizeTextArea.hook.tsx'\r\nimport { useTextArea } from '@components/forms/text-area/hooks/useTextArea.hook.tsx'\r\nimport type { TextAreaCompound } from '@components/forms/text-area/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { memo, useCallback, useRef } from 'react'\r\nimport type { TextAreaProps } from '@/components'\r\n\r\n/**\r\n  * A styled textarea built with a native `<textarea>` 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  * - `width` - overrides the default `100%` wrapper width.\r\n  * - `rows` - sets the native number of visible text lines.\r\n  * - `minRows` / `maxRows` - enables auto-resize; the textarea grows with content\r\n  *   until it reaches `maxRows`, then stops expanding and shows a scrollbar.\r\n  *   Manual resizing is always disabled.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * textarea 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  * <TextArea label=\"Description\" placeholder=\"Tell us more…\" rows={4} />\r\n  * <TextArea label=\"Comment\" startIcon=\"lucide:message-square\" minRows={2} maxRows={6} />\r\n  * <TextArea label=\"Bio\" endAction={<IconButton icon=\"lucide:x\" aria-label=\"Clear\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextArea label=\"Notes\" width=\"24rem\" />\r\n  * ```\r\n  */\r\nconst TextArea = memo<TextAreaProps>((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    } = useTextArea(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        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: forwardedRef,\r\n        style: textareaStyle,\r\n        rows,\r\n        minRows,\r\n        maxRows,\r\n        ...textareaProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const innerRef = useRef<HTMLTextAreaElement>(null)\r\n    const setRef = useCallback(\r\n        (node: HTMLTextAreaElement | null) => {\r\n            innerRef.current = node\r\n            if (typeof forwardedRef === 'function') {\r\n                forwardedRef(node)\r\n            } else if (forwardedRef) {\r\n                forwardedRef.current = node\r\n            }\r\n        },\r\n        [forwardedRef],\r\n    )\r\n\r\n    const { isEnabled: autoResizeEnabled, resize } = useAutoResizeTextArea(\r\n        innerRef,\r\n        {\r\n            minRows: minRows ?? rows,\r\n            maxRows,\r\n            value,\r\n        },\r\n    )\r\n\r\n    const handleChange = useCallback(\r\n        (e: React.ChangeEvent<HTMLTextAreaElement>) => {\r\n            onChange?.(e)\r\n            resize()\r\n        },\r\n        [onChange, resize],\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                <TextAreaLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                    fontSize={fontSizeProp}\r\n                >\r\n                    {label}\r\n                </TextAreaLabel>\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                    <TextAreaStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <textarea\r\n                    ref={setRef}\r\n                    id={inputId}\r\n                    disabled={disabled}\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_AREA_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={handleChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    rows={autoResizeEnabled ? (minRows ?? rows) : rows}\r\n                    {...textareaProps}\r\n                    style={{ fontSize: vars.fontSize[fontSizeProp], ...textareaStyle }}\r\n                />\r\n\r\n                {hasEndAction && <TextAreaEndAction>{endAction}</TextAreaEndAction>}\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 TextAreaCompound\r\n\r\nTextArea.displayName = 'TextArea'\r\nTextArea.Label = TextAreaLabel\r\nTextArea.StartIcon = TextAreaStartIcon\r\nTextArea.EndAction = TextAreaEndAction\r\n\r\nexport default TextArea\r\n"],"names":["TextArea","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","useTextArea","disabled","startIcon","className","width","error","helperText","label","endAction","sizeProp","fontSizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","forwardedRef","textareaStyle","rows","minRows","maxRows","textareaProps","size","innerRef","useRef","setRef","useCallback","node","autoResizeEnabled","resize","useAutoResizeTextArea","handleChange","e","jsxs","Flex","jsx","TextAreaLabel","TextAreaStartIcon","cn","TEXT_AREA_STYLES","vars","TextAreaEndAction","HelperText"],"mappings":"qhCAuCMA,EAAWC,EAAAA,KAAqBC,GAAU,CAC5C,KAAM,CACF,QAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,WAAAC,CAAA,EACAC,EAAAA,YAAYT,CAAK,EAEf,CACF,SAAAU,EACA,UAAAC,EACA,UAAAC,EACA,MAAAC,EACA,MAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,KAAMC,EACN,SAAUC,EAAe,KACzB,YAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAKC,EACL,MAAOC,EACP,KAAAC,EACA,QAAAC,EACA,QAAAC,EACA,GAAGC,CAAA,EACH9B,EACE+B,EAAOb,GAAY,KAEnBc,EAAWC,EAAAA,OAA4B,IAAI,EAC3CC,EAASC,EAAAA,YACVC,GAAqC,CAClCJ,EAAS,QAAUI,EACf,OAAOX,GAAiB,WACxBA,EAAaW,CAAI,EACVX,IACPA,EAAa,QAAUW,EAE/B,EACA,CAACX,CAAY,CAAA,EAGX,CAAE,UAAWY,EAAmB,OAAAC,CAAA,EAAWC,EAAAA,sBAC7CP,EACA,CACI,QAASJ,GAAWD,EACpB,QAAAE,EACA,MAAAR,CAAA,CACJ,EAGEmB,EAAeL,EAAAA,YAChBM,GAA8C,CAC3CnB,IAAWmB,CAAC,EACZH,EAAA,CACJ,EACA,CAAChB,EAAUgB,CAAM,CAAA,EAGrB,OACII,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,IAAK,KACL,MAAO,OACP,WAAY,QACZ,MAAO9B,IAAU,OAAY,CAAE,MAAAA,GAAU,OAExC,SAAA,CAAAG,GACG4B,EAAAA,IAACC,EAAA,CACG,QAAS5C,EACT,SAAAS,EACA,SAAUS,EAET,SAAAH,CAAA,CAAA,EAIT0B,EAAAA,KAACC,EAAA,CACG,SAAU,WACV,MAAO,OACP,IAAK,OAEJ,SAAA,CAAAhC,GACGiC,EAAAA,IAACE,EAAA,CACG,KAAMnC,EACN,KAAAoB,CAAA,CAAA,EAIRa,EAAAA,IAAC,WAAA,CACG,IAAKV,EACL,GAAIjC,EACJ,SAAAS,EACA,eAAcP,GAAY,OAC1B,mBAAkBW,GAASC,EAAab,EAAW,OACnD,YAAaI,EACb,QAASC,EACT,OAAQC,EACR,UAAWuC,EAAAA,GACPC,EAAAA,iBAAiB,OAAO,CACpB,KAAAjB,EACA,SAAA5B,EACA,aAAAC,EACA,aAAAC,CAAA,CACH,EACDO,CAAA,EAEJ,YAAAQ,EACA,MAAAC,EACA,SAAUmB,EACV,UAAAjB,EACA,QAAAC,EACA,KAAMa,EAAqBT,GAAWD,EAAQA,EAC7C,GAAGG,EACJ,MAAO,CAAE,SAAUmB,EAAAA,KAAK,SAAS9B,CAAY,EAAG,GAAGO,CAAA,CAAc,CAAA,EAGpErB,GAAgBuC,EAAAA,IAACM,EAAA,CAAmB,SAAAjC,CAAA,CAAU,CAAA,CAAA,CAAA,GAGjDH,GAASC,IACP6B,EAAAA,IAACO,EAAA,CACG,GAAIjD,EACJ,SAAAC,EAEC,SAAAW,GAASC,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDjB,EAAS,YAAc,WACvBA,EAAS,MAAQ+C,EACjB/C,EAAS,UAAYgD,EACrBhD,EAAS,UAAYoD"}

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

@@ -1,70 +1,73 @@
-import { jsxs as E, jsx as r } from "react/jsx-runtime";
-import g from "./components/text-area-label/TextAreaLabel.js";
-import '../../../ui-kit85.css';import '../../../ui-kit69.css';import '../../../ui-kit71.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
+import { jsxs as b, jsx as r } from "react/jsx-runtime";
+import v from "./components/text-area-label/TextAreaLabel.js";
+import '../../../ui-kit79.css';import '../../../ui-kit98.css';import '../../../ui-kit86.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
 /* empty css                                             */
 /* empty css                                                                   */
-import y from "./components/text-area-start-icon/TextAreaStartIcon.js";
+import I from "./components/text-area-start-icon/TextAreaStartIcon.js";
 /* empty css                                                                            */
-import z from "./components/text-area-end-action/TextAreaEndAction.js";
+import g from "./components/text-area-end-action/TextAreaEndAction.js";
 /* empty css                                                                            */
-import { TEXT_AREA_STYLES as X } from "./styles/TextArea.css.js";
-import Y from "../_shared/components/helper-text/HelperText.js";
-import { useAutoResizeTextArea as q } from "./hooks/useAutoResizeTextArea.hook.js";
-import { useTextArea as G } from "./hooks/useTextArea.hook.js";
-import v from "../../layout/flex/Flex.js";
+import { TEXT_AREA_STYLES as q } from "./styles/TextArea.css.js";
+import G from "../_shared/components/helper-text/HelperText.js";
+import { useAutoResizeTextArea as J } from "./hooks/useAutoResizeTextArea.hook.js";
+import { useTextArea as O } from "./hooks/useTextArea.hook.js";
+import y from "../../layout/flex/Flex.js";
 import "../../layout/flex/styles/Flex.css.js";
-import { cn as J } from "../../../utils/cn.js";
-import { memo as O, useRef as Q, useCallback as I } from "react";
-const t = O((l) => {
+import { cn as Q } from "../../../utils/cn.js";
+import { vars as V } from "../../../theme/contract.css.js";
+import { memo as W, useRef as Z, useCallback as E } from "react";
+const t = W((l) => {
   const {
     inputId: m,
     helperId: c,
     hasError: i,
-    hasStartIcon: S,
+    hasStartIcon: C,
     hasEndAction: d,
-    handleMouseDown: C,
-    handleFocus: D,
-    handleBlur: F
-  } = G(l), {
+    handleMouseDown: D,
+    handleFocus: F,
+    handleBlur: L
+  } = O(l), {
     disabled: p,
     startIcon: f,
-    className: L,
+    className: N,
     width: h,
     error: n,
     helperText: a,
     label: u,
-    endAction: N,
+    endAction: P,
     size: j,
+    fontSize: x = "md",
     placeholder: B,
-    value: x,
-    onChange: A,
+    value: A,
+    onChange: w,
     onKeyDown: K,
     onKeyUp: M,
     ref: e,
+    style: _,
     rows: s,
-    minRows: w,
-    maxRows: P,
-    ..._
-  } = l, T = j ?? "md", R = Q(null), k = I(
+    minRows: T,
+    maxRows: k,
+    ...H
+  } = l, z = j ?? "md", S = Z(null), U = E(
     (o) => {
-      R.current = o, typeof e == "function" ? e(o) : e && (e.current = o);
+      S.current = o, typeof e == "function" ? e(o) : e && (e.current = o);
     },
     [e]
-  ), { isEnabled: H, resize: b } = q(
-    R,
+  ), { isEnabled: X, resize: R } = J(
+    S,
     {
-      minRows: w ?? s,
-      maxRows: P,
-      value: x
+      minRows: T ?? s,
+      maxRows: k,
+      value: A
     }
-  ), U = I(
+  ), Y = E(
     (o) => {
-      A?.(o), b();
+      w?.(o), R();
     },
-    [A, b]
+    [w, R]
   );
-  return /* @__PURE__ */ E(
-    v,
+  return /* @__PURE__ */ b(
+    y,
     {
       flexDirection: "column",
       gap: "xs",
@@ -73,62 +76,64 @@ const t = O((l) => {
       style: h !== void 0 ? { width: h } : void 0,
       children: [
         u && /* @__PURE__ */ r(
-          g,
+          v,
           {
             htmlFor: m,
             disabled: p,
+            fontSize: x,
             children: u
           }
         ),
-        /* @__PURE__ */ E(
-          v,
+        /* @__PURE__ */ b(
+          y,
           {
             position: "relative",
             width: "100%",
             gap: "none",
             children: [
               f && /* @__PURE__ */ r(
-                y,
+                I,
                 {
                   icon: f,
-                  size: T
+                  size: z
                 }
               ),
               /* @__PURE__ */ r(
                 "textarea",
                 {
-                  ref: k,
+                  ref: U,
                   id: m,
                   disabled: p,
                   "aria-invalid": i || void 0,
                   "aria-describedby": n || a ? c : void 0,
-                  onMouseDown: C,
-                  onFocus: D,
-                  onBlur: F,
-                  className: J(
-                    X.recipe({
-                      size: T,
+                  onMouseDown: D,
+                  onFocus: F,
+                  onBlur: L,
+                  className: Q(
+                    q.recipe({
+                      size: z,
                       hasError: i,
-                      hasStartIcon: S,
+                      hasStartIcon: C,
                       hasEndAction: d
                     }),
-                    L
+                    N
                   ),
                   placeholder: B,
-                  value: x,
-                  onChange: U,
+                  value: A,
+                  onChange: Y,
                   onKeyDown: K,
                   onKeyUp: M,
-                  rows: H ? w ?? s : s,
-                  ..._
+                  rows: X ? T ?? s : s,
+                  ...H,
+                  style: { fontSize: V.fontSize[x], ..._ }
                 }
               ),
-              d && /* @__PURE__ */ r(z, { children: N })
+              d && /* @__PURE__ */ r(g, { children: P })
             ]
           }
         ),
         (n || a) && /* @__PURE__ */ r(
-          Y,
+          G,
           {
             id: c,
             hasError: i,
@@ -140,9 +145,9 @@ const t = O((l) => {
   );
 });
 t.displayName = "TextArea";
-t.Label = g;
-t.StartIcon = y;
-t.EndAction = z;
+t.Label = v;
+t.StartIcon = I;
+t.EndAction = g;
 export {
   t as default
 };

package/dist/components/forms/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../../src/components/forms/text-area/TextArea.tsx"],"sourcesContent":["import {\r\n    TextAreaLabel,\r\n    TextAreaStartIcon,\r\n    TextAreaEndAction,\r\n} from '@components/forms/text-area/components/index.ts'\r\nimport { TEXT_AREA_STYLES } from '@components/forms/text-area/styles/TextArea.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { useAutoResizeTextArea } from '@components/forms/text-area/hooks/useAutoResizeTextArea.hook.tsx'\r\nimport { useTextArea } from '@components/forms/text-area/hooks/useTextArea.hook.tsx'\r\nimport type { TextAreaCompound } from '@components/forms/text-area/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, useCallback, useRef } from 'react'\r\nimport type { TextAreaProps } from '@/components'\r\n\r\n/**\r\n  * A styled textarea built with a native `<textarea>` 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  * - `width` - overrides the default `100%` wrapper width.\r\n  * - `rows` - sets the native number of visible text lines.\r\n  * - `minRows` / `maxRows` - enables auto-resize; the textarea grows with content\r\n  *   until it reaches `maxRows`, then stops expanding and shows a scrollbar.\r\n  *   Manual resizing is always disabled.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * textarea 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  * <TextArea label=\"Description\" placeholder=\"Tell us more…\" rows={4} />\r\n  * <TextArea label=\"Comment\" startIcon=\"lucide:message-square\" minRows={2} maxRows={6} />\r\n  * <TextArea label=\"Bio\" endAction={<IconButton icon=\"lucide:x\" aria-label=\"Clear\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextArea label=\"Notes\" width=\"24rem\" />\r\n  * ```\r\n  */\r\nconst TextArea = memo<TextAreaProps>((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    } = useTextArea(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        endAction,\r\n        size: sizeProp,\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref: forwardedRef,\r\n        rows,\r\n        minRows,\r\n        maxRows,\r\n        ...textareaProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const innerRef = useRef<HTMLTextAreaElement>(null)\r\n    const setRef = useCallback(\r\n        (node: HTMLTextAreaElement | null) => {\r\n            innerRef.current = node\r\n            if (typeof forwardedRef === 'function') {\r\n                forwardedRef(node)\r\n            } else if (forwardedRef) {\r\n                forwardedRef.current = node\r\n            }\r\n        },\r\n        [forwardedRef],\r\n    )\r\n\r\n    const { isEnabled: autoResizeEnabled, resize } = useAutoResizeTextArea(\r\n        innerRef,\r\n        {\r\n            minRows: minRows ?? rows,\r\n            maxRows,\r\n            value,\r\n        },\r\n    )\r\n\r\n    const handleChange = useCallback(\r\n        (e: React.ChangeEvent<HTMLTextAreaElement>) => {\r\n            onChange?.(e)\r\n            resize()\r\n        },\r\n        [onChange, resize],\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                <TextAreaLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                >\r\n                    {label}\r\n                </TextAreaLabel>\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                    <TextAreaStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <textarea\r\n                    ref={setRef}\r\n                    id={inputId}\r\n                    disabled={disabled}\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_AREA_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={handleChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    rows={autoResizeEnabled ? (minRows ?? rows) : rows}\r\n                    {...textareaProps}\r\n                />\r\n\r\n                {hasEndAction && <TextAreaEndAction>{endAction}</TextAreaEndAction>}\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 TextAreaCompound\r\n\r\nTextArea.displayName = 'TextArea'\r\nTextArea.Label = TextAreaLabel\r\nTextArea.StartIcon = TextAreaStartIcon\r\nTextArea.EndAction = TextAreaEndAction\r\n\r\nexport default TextArea\r\n"],"names":["TextArea","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","useTextArea","disabled","startIcon","className","width","error","helperText","label","endAction","sizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","forwardedRef","rows","minRows","maxRows","textareaProps","size","innerRef","useRef","setRef","useCallback","node","autoResizeEnabled","resize","useAutoResizeTextArea","handleChange","e","jsxs","Flex","jsx","TextAreaLabel","TextAreaStartIcon","cn","TEXT_AREA_STYLES","TextAreaEndAction","HelperText"],"mappings":";;;;;;;;;;;;;;;;;AAsCA,MAAMA,IAAWC,EAAoB,CAACC,MAAU;AAC5C,QAAM;AAAA,IACF,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,EAAA,IACAC,EAAYT,CAAK,GAEf;AAAA,IACF,UAAAU;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAMC;AAAA,IACN,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,KAAKC;AAAA,IACL,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACH5B,GACE6B,IAAOX,KAAY,MAEnBY,IAAWC,EAA4B,IAAI,GAC3CC,IAASC;AAAA,IACX,CAACC,MAAqC;AAClC,MAAAJ,EAAS,UAAUI,GACf,OAAOV,KAAiB,aACxBA,EAAaU,CAAI,IACVV,MACPA,EAAa,UAAUU;AAAA,IAE/B;AAAA,IACA,CAACV,CAAY;AAAA,EAAA,GAGX,EAAE,WAAWW,GAAmB,QAAAC,EAAA,IAAWC;AAAA,IAC7CP;AAAA,IACA;AAAA,MACI,SAASJ,KAAWD;AAAA,MACpB,SAAAE;AAAA,MACA,OAAAP;AAAA,IAAA;AAAA,EACJ,GAGEkB,IAAeL;AAAA,IACjB,CAACM,MAA8C;AAC3C,MAAAlB,IAAWkB,CAAC,GACZH,EAAA;AAAA,IACJ;AAAA,IACA,CAACf,GAAUe,CAAM;AAAA,EAAA;AAGrB,SACI,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,eAAe;AAAA,MACf,KAAK;AAAA,MACL,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,OAAO5B,MAAU,SAAY,EAAE,OAAAA,MAAU;AAAA,MAExC,UAAA;AAAA,QAAAG,KACG,gBAAA0B;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,SAAS1C;AAAA,YACT,UAAAS;AAAA,YAEC,UAAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAIT,gBAAAwB;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,UAAU;AAAA,YACV,OAAO;AAAA,YACP,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAA9B,KACG,gBAAA+B;AAAA,gBAACE;AAAA,gBAAA;AAAA,kBACG,MAAMjC;AAAA,kBACN,MAAAkB;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIR,gBAAAa;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,KAAKV;AAAA,kBACL,IAAI/B;AAAA,kBACJ,UAAAS;AAAA,kBACA,gBAAcP,KAAY;AAAA,kBAC1B,oBAAkBW,KAASC,IAAab,IAAW;AAAA,kBACnD,aAAaI;AAAA,kBACb,SAASC;AAAA,kBACT,QAAQC;AAAA,kBACR,WAAWqC;AAAA,oBACPC,EAAiB,OAAO;AAAA,sBACpB,MAAAjB;AAAA,sBACA,UAAA1B;AAAA,sBACA,cAAAC;AAAA,sBACA,cAAAC;AAAA,oBAAA,CACH;AAAA,oBACDO;AAAA,kBAAA;AAAA,kBAEJ,aAAAO;AAAA,kBACA,OAAAC;AAAA,kBACA,UAAUkB;AAAA,kBACV,WAAAhB;AAAA,kBACA,SAAAC;AAAA,kBACA,MAAMY,IAAqBT,KAAWD,IAAQA;AAAA,kBAC7C,GAAGG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGPvB,KAAgB,gBAAAqC,EAACK,GAAA,EAAmB,UAAA9B,EAAA,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,SAGjDH,KAASC,MACP,gBAAA2B;AAAA,UAACM;AAAA,UAAA;AAAA,YACG,IAAI9C;AAAA,YACJ,UAAAC;AAAA,YAEC,UAAAW,KAASC;AAAA,UAAA;AAAA,QAAA;AAAA,MACd;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAEDjB,EAAS,cAAc;AACvBA,EAAS,QAAQ6C;AACjB7C,EAAS,YAAY8C;AACrB9C,EAAS,YAAYiD;"}
+{"version":3,"file":"TextArea.js","sources":["../../../../src/components/forms/text-area/TextArea.tsx"],"sourcesContent":["import {\r\n    TextAreaLabel,\r\n    TextAreaStartIcon,\r\n    TextAreaEndAction,\r\n} from '@components/forms/text-area/components/index.ts'\r\nimport { TEXT_AREA_STYLES } from '@components/forms/text-area/styles/TextArea.css.ts'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { useAutoResizeTextArea } from '@components/forms/text-area/hooks/useAutoResizeTextArea.hook.tsx'\r\nimport { useTextArea } from '@components/forms/text-area/hooks/useTextArea.hook.tsx'\r\nimport type { TextAreaCompound } from '@components/forms/text-area/types'\r\nimport { Flex } from '@components/layout/flex'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { memo, useCallback, useRef } from 'react'\r\nimport type { TextAreaProps } from '@/components'\r\n\r\n/**\r\n  * A styled textarea built with a native `<textarea>` 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  * - `width` - overrides the default `100%` wrapper width.\r\n  * - `rows` - sets the native number of visible text lines.\r\n  * - `minRows` / `maxRows` - enables auto-resize; the textarea grows with content\r\n  *   until it reaches `maxRows`, then stops expanding and shows a scrollbar.\r\n  *   Manual resizing is always disabled.\r\n  *\r\n  * Focus ring behavior: visible only on keyboard navigation (Tab). A click on the\r\n  * textarea 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  * <TextArea label=\"Description\" placeholder=\"Tell us more…\" rows={4} />\r\n  * <TextArea label=\"Comment\" startIcon=\"lucide:message-square\" minRows={2} maxRows={6} />\r\n  * <TextArea label=\"Bio\" endAction={<IconButton icon=\"lucide:x\" aria-label=\"Clear\" variant=\"ghost\" color=\"primary\" />} />\r\n  * <TextArea label=\"Notes\" width=\"24rem\" />\r\n  * ```\r\n  */\r\nconst TextArea = memo<TextAreaProps>((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    } = useTextArea(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        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: forwardedRef,\r\n        style: textareaStyle,\r\n        rows,\r\n        minRows,\r\n        maxRows,\r\n        ...textareaProps\r\n    } = props\r\n    const size = sizeProp ?? 'md'\r\n\r\n    const innerRef = useRef<HTMLTextAreaElement>(null)\r\n    const setRef = useCallback(\r\n        (node: HTMLTextAreaElement | null) => {\r\n            innerRef.current = node\r\n            if (typeof forwardedRef === 'function') {\r\n                forwardedRef(node)\r\n            } else if (forwardedRef) {\r\n                forwardedRef.current = node\r\n            }\r\n        },\r\n        [forwardedRef],\r\n    )\r\n\r\n    const { isEnabled: autoResizeEnabled, resize } = useAutoResizeTextArea(\r\n        innerRef,\r\n        {\r\n            minRows: minRows ?? rows,\r\n            maxRows,\r\n            value,\r\n        },\r\n    )\r\n\r\n    const handleChange = useCallback(\r\n        (e: React.ChangeEvent<HTMLTextAreaElement>) => {\r\n            onChange?.(e)\r\n            resize()\r\n        },\r\n        [onChange, resize],\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                <TextAreaLabel\r\n                    htmlFor={inputId}\r\n                    disabled={disabled}\r\n                    fontSize={fontSizeProp}\r\n                >\r\n                    {label}\r\n                </TextAreaLabel>\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                    <TextAreaStartIcon\r\n                        icon={startIcon}\r\n                        size={size}\r\n                    />\r\n                )}\r\n\r\n                <textarea\r\n                    ref={setRef}\r\n                    id={inputId}\r\n                    disabled={disabled}\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_AREA_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={handleChange}\r\n                    onKeyDown={onKeyDown}\r\n                    onKeyUp={onKeyUp}\r\n                    rows={autoResizeEnabled ? (minRows ?? rows) : rows}\r\n                    {...textareaProps}\r\n                    style={{ fontSize: vars.fontSize[fontSizeProp], ...textareaStyle }}\r\n                />\r\n\r\n                {hasEndAction && <TextAreaEndAction>{endAction}</TextAreaEndAction>}\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 TextAreaCompound\r\n\r\nTextArea.displayName = 'TextArea'\r\nTextArea.Label = TextAreaLabel\r\nTextArea.StartIcon = TextAreaStartIcon\r\nTextArea.EndAction = TextAreaEndAction\r\n\r\nexport default TextArea\r\n"],"names":["TextArea","memo","props","inputId","helperId","hasError","hasStartIcon","hasEndAction","handleMouseDown","handleFocus","handleBlur","useTextArea","disabled","startIcon","className","width","error","helperText","label","endAction","sizeProp","fontSizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","forwardedRef","textareaStyle","rows","minRows","maxRows","textareaProps","size","innerRef","useRef","setRef","useCallback","node","autoResizeEnabled","resize","useAutoResizeTextArea","handleChange","e","jsxs","Flex","jsx","TextAreaLabel","TextAreaStartIcon","cn","TEXT_AREA_STYLES","vars","TextAreaEndAction","HelperText"],"mappings":"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"}

package/dist/components/forms/text-area/components/text-area-end-action/styles/TextAreaEndAction.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit85.css');;/* empty css                                       */var e={root:"lf8geo0"};exports.TEXT_AREA_END_ACTION_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit79.css');;/* empty css                                       */var e={root:"lf8geo0"};exports.TEXT_AREA_END_ACTION_STYLES=e;
 //# sourceMappingURL=TextAreaEndAction.css.cjs.map

package/dist/components/forms/text-area/components/text-area-end-action/styles/TextAreaEndAction.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit85.css';/* empty css                                     */
+import '../../../../../../ui-kit79.css';/* empty css                                     */
 var r = { root: "lf8geo0" };
 export {
   r as TEXT_AREA_END_ACTION_STYLES

package/dist/components/forms/text-area/components/text-area-label/TextAreaLabel.cjs

@@ -1,2 +1,2 @@
-"use strict";const r=require("react/jsx-runtime"),o=require("react"),c=require("./styles/TextAreaLabel.css.cjs"),e=o.memo(({htmlFor:a,disabled:s,children:t})=>r.jsx("label",{htmlFor:a,className:c.TEXT_AREA_LABEL_STYLES.root,"data-disabled":s?"":void 0,children:t}));e.displayName="TextArea.Label";module.exports=e;
+"use strict";const o=require("react/jsx-runtime"),c=require("react"),i=require("./styles/TextAreaLabel.css.cjs"),l=require("../../../../../theme/contract.css.cjs"),e=c.memo(({htmlFor:s,disabled:t,fontSize:a="md",children:r})=>o.jsx("label",{htmlFor:s,className:i.TEXT_AREA_LABEL_STYLES.root,style:{fontSize:l.vars.fontSize[a]},"data-disabled":t?"":void 0,children:r}));e.displayName="TextArea.Label";module.exports=e;
 //# sourceMappingURL=TextAreaLabel.cjs.map

package/dist/components/forms/text-area/components/text-area-label/TextAreaLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaLabel.cjs","sources":["../../../../../../src/components/forms/text-area/components/text-area-label/TextAreaLabel.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\nimport { TEXT_AREA_LABEL_STYLES } from '@components/forms/text-area/components/text-area-label/styles/TextAreaLabel.css.ts'\r\nimport type { TextAreaLabelProps } from '@components/forms/text-area/components/text-area-label/types/TextAreaLabel.props.ts'\r\n\r\nconst TextAreaLabel: FC<TextAreaLabelProps> = memo(({ htmlFor, disabled, children }) => (\r\n    <label\r\n        htmlFor={htmlFor}\r\n        className={TEXT_AREA_LABEL_STYLES.root}\r\n        data-disabled={disabled ? '' : undefined}\r\n    >\r\n        {children}\r\n    </label>\r\n))\r\n\r\nTextAreaLabel.displayName = 'TextArea.Label'\r\n\r\nexport default TextAreaLabel\r\n"],"names":["TextAreaLabel","memo","htmlFor","disabled","children","jsx","TEXT_AREA_LABEL_STYLES"],"mappings":"iHAIMA,EAAwCC,EAAAA,KAAK,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,SAAAC,KACrEC,EAAAA,IAAC,QAAA,CACG,QAAAH,EACA,UAAWI,EAAAA,uBAAuB,KAClC,gBAAeH,EAAW,GAAK,OAE9B,SAAAC,CAAA,CACL,CACH,EAEDJ,EAAc,YAAc"}
+{"version":3,"file":"TextAreaLabel.cjs","sources":["../../../../../../src/components/forms/text-area/components/text-area-label/TextAreaLabel.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\nimport { TEXT_AREA_LABEL_STYLES } from '@components/forms/text-area/components/text-area-label/styles/TextAreaLabel.css.ts'\r\nimport type { TextAreaLabelProps } from '@components/forms/text-area/components/text-area-label/types/TextAreaLabel.props.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\n\r\nconst TextAreaLabel: FC<TextAreaLabelProps> = memo(({ htmlFor, disabled, fontSize = 'md', children }) => (\r\n    <label\r\n        htmlFor={htmlFor}\r\n        className={TEXT_AREA_LABEL_STYLES.root}\r\n        style={{ fontSize: vars.fontSize[fontSize] }}\r\n        data-disabled={disabled ? '' : undefined}\r\n    >\r\n        {children}\r\n    </label>\r\n))\r\n\r\nTextAreaLabel.displayName = 'TextArea.Label'\r\n\r\nexport default TextAreaLabel\r\n"],"names":["TextAreaLabel","memo","htmlFor","disabled","fontSize","children","jsx","TEXT_AREA_LABEL_STYLES","vars"],"mappings":"oKAKMA,EAAwCC,EAAAA,KAAK,CAAC,CAAE,QAAAC,EAAS,SAAAC,EAAU,SAAAC,EAAW,KAAM,SAAAC,CAAA,IACtFC,EAAAA,IAAC,QAAA,CACG,QAAAJ,EACA,UAAWK,EAAAA,uBAAuB,KAClC,MAAO,CAAE,SAAUC,EAAAA,KAAK,SAASJ,CAAQ,CAAA,EACzC,gBAAeD,EAAW,GAAK,OAE9B,SAAAE,CAAA,CACL,CACH,EAEDL,EAAc,YAAc"}

package/dist/components/forms/text-area/components/text-area-label/TextAreaLabel.js

@@ -1,17 +1,19 @@
 import { jsx as m } from "react/jsx-runtime";
 import { memo as r } from "react";
-import { TEXT_AREA_LABEL_STYLES as t } from "./styles/TextAreaLabel.css.js";
-const l = r(({ htmlFor: a, disabled: e, children: o }) => /* @__PURE__ */ m(
+import { TEXT_AREA_LABEL_STYLES as i } from "./styles/TextAreaLabel.css.js";
+import { vars as l } from "../../../../../theme/contract.css.js";
+const s = r(({ htmlFor: e, disabled: o, fontSize: a = "md", children: t }) => /* @__PURE__ */ m(
   "label",
   {
-    htmlFor: a,
-    className: t.root,
-    "data-disabled": e ? "" : void 0,
-    children: o
+    htmlFor: e,
+    className: i.root,
+    style: { fontSize: l.fontSize[a] },
+    "data-disabled": o ? "" : void 0,
+    children: t
   }
 ));
-l.displayName = "TextArea.Label";
+s.displayName = "TextArea.Label";
 export {
-  l as default
+  s as default
 };
 //# sourceMappingURL=TextAreaLabel.js.map

package/dist/components/forms/text-area/components/text-area-label/TextAreaLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaLabel.js","sources":["../../../../../../src/components/forms/text-area/components/text-area-label/TextAreaLabel.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\nimport { TEXT_AREA_LABEL_STYLES } from '@components/forms/text-area/components/text-area-label/styles/TextAreaLabel.css.ts'\r\nimport type { TextAreaLabelProps } from '@components/forms/text-area/components/text-area-label/types/TextAreaLabel.props.ts'\r\n\r\nconst TextAreaLabel: FC<TextAreaLabelProps> = memo(({ htmlFor, disabled, children }) => (\r\n    <label\r\n        htmlFor={htmlFor}\r\n        className={TEXT_AREA_LABEL_STYLES.root}\r\n        data-disabled={disabled ? '' : undefined}\r\n    >\r\n        {children}\r\n    </label>\r\n))\r\n\r\nTextAreaLabel.displayName = 'TextArea.Label'\r\n\r\nexport default TextAreaLabel\r\n"],"names":["TextAreaLabel","memo","htmlFor","disabled","children","jsx","TEXT_AREA_LABEL_STYLES"],"mappings":";;;AAIA,MAAMA,IAAwCC,EAAK,CAAC,EAAE,SAAAC,GAAS,UAAAC,GAAU,UAAAC,QACrE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,SAAAH;AAAA,IACA,WAAWI,EAAuB;AAAA,IAClC,iBAAeH,IAAW,KAAK;AAAA,IAE9B,UAAAC;AAAA,EAAA;AACL,CACH;AAEDJ,EAAc,cAAc;"}
+{"version":3,"file":"TextAreaLabel.js","sources":["../../../../../../src/components/forms/text-area/components/text-area-label/TextAreaLabel.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\nimport { TEXT_AREA_LABEL_STYLES } from '@components/forms/text-area/components/text-area-label/styles/TextAreaLabel.css.ts'\r\nimport type { TextAreaLabelProps } from '@components/forms/text-area/components/text-area-label/types/TextAreaLabel.props.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\n\r\nconst TextAreaLabel: FC<TextAreaLabelProps> = memo(({ htmlFor, disabled, fontSize = 'md', children }) => (\r\n    <label\r\n        htmlFor={htmlFor}\r\n        className={TEXT_AREA_LABEL_STYLES.root}\r\n        style={{ fontSize: vars.fontSize[fontSize] }}\r\n        data-disabled={disabled ? '' : undefined}\r\n    >\r\n        {children}\r\n    </label>\r\n))\r\n\r\nTextAreaLabel.displayName = 'TextArea.Label'\r\n\r\nexport default TextAreaLabel\r\n"],"names":["TextAreaLabel","memo","htmlFor","disabled","fontSize","children","jsx","TEXT_AREA_LABEL_STYLES","vars"],"mappings":";;;;AAKA,MAAMA,IAAwCC,EAAK,CAAC,EAAE,SAAAC,GAAS,UAAAC,GAAU,UAAAC,IAAW,MAAM,UAAAC,EAAA,MACtF,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,SAAAJ;AAAA,IACA,WAAWK,EAAuB;AAAA,IAClC,OAAO,EAAE,UAAUC,EAAK,SAASJ,CAAQ,EAAA;AAAA,IACzC,iBAAeD,IAAW,KAAK;AAAA,IAE9B,UAAAE;AAAA,EAAA;AACL,CACH;AAEDL,EAAc,cAAc;"}

package/dist/components/forms/text-area/components/text-area-label/styles/TextAreaLabel.css.cjs

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

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

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit71.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit86.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                                      */
 /* empty css                                 */
 var p = { root: "_1sjl5hx0" };

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

@@ -1,6 +1,9 @@
 import { ReactNode } from 'react';
+import { TypographySize } from '../../../../../foundation/typography/types/Typography.types.ts';
 export type TextAreaLabelProps = {
     htmlFor?: string;
     disabled?: boolean;
+    /** Font size applied to the label. @default 'md' */
+    fontSize?: TypographySize;
     children: ReactNode;
 };

package/dist/components/forms/text-area/components/text-area-start-icon/styles/TextAreaStartIcon.css.cjs

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

package/dist/components/forms/text-area/components/text-area-start-icon/styles/TextAreaStartIcon.css.js

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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit49.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                              */const a=require("@vanilla-extract/recipes/createRuntimeFn");var t={recipe:a.createRuntimeFn({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"]]})};exports.TEXT_AREA_STYLES=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit68.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                              */const a=require("@vanilla-extract/recipes/createRuntimeFn");var t={recipe:a.createRuntimeFn({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"]]})};exports.TEXT_AREA_STYLES=t;
 //# sourceMappingURL=TextArea.css.cjs.map

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

@@ -1,4 +1,4 @@
-import '../../../../ui-kit49.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit68.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,9 +1,12 @@
 import { RefAttributes } from 'react';
 import { TextAreaSize } from './TextArea.types.ts';
+import { TypographySize } from '../../../foundation/typography/types/Typography.types.ts';
 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. */
     label?: string;
+    /** Font size applied to the label and textarea text. @default 'md' */
+    fontSize?: TypographySize;
     /** Helper text rendered below the textarea. Hidden when `error` is provided. */
     helperText?: string;
     /** Error message rendered below the textarea. When set, the textarea is styled in its error state. */

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

@@ -1,2 +1,2 @@
-"use strict";require('../../../ui-kit91.css');require('../../../ui-kit73.css');require('../../../ui-kit90.css');require('../../../ui-kit2.css');require('../../../ui-kit.css');const e=require("react/jsx-runtime"),H=require("../../actions/icon-button/IconButton.cjs");require("../../actions/icon-button/styles/IconButton.css.cjs");const F=require("./components/text-field-label/TextFieldLabel.cjs");;/* empty css                                           */;/* empty css                                               */;/* empty css                                                                       */const I=require("./components/text-field-start-icon/TextFieldStartIcon.cjs");;/* empty css                                                                                */const m=require("./components/text-field-end-action/TextFieldEndAction.cjs");;/* empty css                                                                                */const K=require("./styles/TextField.css.cjs"),M=require("../_shared/components/helper-text/HelperText.cjs"),O=require("./constants/index.cjs"),U=require("./hooks/useTextfield.hook.cjs"),T=require("../../layout/flex/Flex.cjs");require("../../layout/flex/styles/Flex.css.cjs");const w=require("../../../constants/icons.cjs"),X=require("../../../utils/cn.cjs"),y=require("react"),r=y.memo(c=>{const{inputId:d,helperId:l,hasError:o,hasStartIcon:b,hasEndAction:a,handleMouseDown:v,handleFocus:g,handleBlur:j,resolvedType:S,isPassword:E,showPassword:i,setShowPassword:u}=U.useTextField(c),{disabled:h,startIcon:x,className:f,width:p,error:s,helperText:n,label:q,endAction:z,size:A,placeholder:P,value:D,onChange:_,onKeyDown:L,onKeyUp:k,ref:B,type:Y,...C}=c,t=A??"md",N=y.useCallback(()=>u(!i),[u,i]),R=E?e.jsx(H,{icon:i?w.IconRegistry.eyeOff:w.IconRegistry.eye,"aria-label":i?"Hide password":"Show password",variant:"ghost",color:"primary",size:O.fieldSizeToActionSize[t],type:"button",tabIndex:-1,onClick:N}):z;return e.jsxs(T,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:p!==void 0?{width:p}:void 0,children:[q&&e.jsx(F,{htmlFor:d,disabled:h,children:q}),e.jsxs(T,{position:"relative",width:"100%",gap:"none",children:[x&&e.jsx(I,{icon:x,size:t}),e.jsx("input",{ref:B,id:d,type:S,disabled:h,"aria-invalid":o||void 0,"aria-describedby":s||n?l:void 0,onMouseDown:v,onFocus:g,onBlur:j,className:X.cn(K.TEXT_FIELD_STYLES.recipe({size:t,hasError:o,hasStartIcon:b,hasEndAction:a}),f),placeholder:P,value:D,onChange:_,onKeyDown:L,onKeyUp:k,...C}),a&&e.jsx(m,{children:R})]}),(s||n)&&e.jsx(M,{id:l,hasError:o,children:s??n})]})});r.displayName="TextField";r.Label=F;r.StartIcon=I;r.EndAction=m;module.exports=r;
+"use strict";require('../../../ui-kit87.css');require('../../../ui-kit85.css');require('../../../ui-kit77.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;
 //# 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 { 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        endAction,\r\n        size: sizeProp,\r\n        placeholder,\r\n        value,\r\n        onChange,\r\n        onKeyDown,\r\n        onKeyUp,\r\n        ref,\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                >\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                    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                />\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","endAction","sizeProp","placeholder","value","onChange","onKeyDown","onKeyUp","ref","_type","inputProps","size","handleTogglePassword","useCallback","resolvedEndAction","jsx","IconButton","IconRegistry","fieldSizeToActionSize","jsxs","Flex","TextFieldLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","TextFieldEndAction","HelperText"],"mappings":"0oCAqCMA,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,UAAAC,EACA,KAAMC,EACN,YAAAC,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,KAAMC,EACN,GAAGC,CAAA,EACH9B,EACE+B,EAAOT,GAAY,KAEnBU,EAAuBC,EAAAA,YACzB,IAAMrB,EAAgB,CAACD,CAAY,EACnC,CAACC,EAAiBD,CAAY,CAAA,EAG5BuB,EAAoBxB,EACtByB,EAAAA,IAACC,EAAA,CACG,KAAMzB,EAAe0B,EAAAA,aAAa,OAASA,EAAAA,aAAa,IACxD,aAAY1B,EAAe,gBAAkB,gBAC7C,QAAS,QACT,MAAO,UACP,KAAM2B,EAAAA,sBAAsBP,CAAI,EAChC,KAAM,SACN,SAAU,GACV,QAASC,CAAA,CAAA,EAGbX,EAGJ,OACIkB,EAAAA,KAACC,EAAA,CACG,cAAe,SACf,IAAK,KACL,MAAO,OACP,WAAY,QACZ,MAAOvB,IAAU,OAAY,CAAE,MAAAA,GAAU,OAExC,SAAA,CAAAG,GACGe,EAAAA,IAACM,EAAA,CACG,QAASxC,EACT,SAAAa,EAEC,SAAAM,CAAA,CAAA,EAITmB,EAAAA,KAACC,EAAA,CACG,SAAU,WACV,MAAO,OACP,IAAK,OAEJ,SAAA,CAAAzB,GACGoB,EAAAA,IAACO,EAAA,CACG,KAAM3B,EACN,KAAAgB,CAAA,CAAA,EAIRI,EAAAA,IAAC,QAAA,CACG,IAAAP,EACA,GAAI3B,EAEJ,KAAMQ,EACN,SAAAK,EACA,eAAcX,GAAY,OAC1B,mBAAkBe,GAASC,EAAajB,EAAW,OACnD,YAAaI,EACb,QAASC,EACT,OAAQC,EACR,UAAWmC,EAAAA,GACPC,EAAAA,kBAAkB,OAAO,CACrB,KAAAb,EACA,SAAA5B,EACA,aAAAC,EACA,aAAAC,CAAA,CACH,EACDW,CAAA,EAEJ,YAAAO,EACA,MAAAC,EACA,SAAAC,EACA,UAAAC,EACA,QAAAC,EACC,GAAGG,CAAA,CAAA,EAGPzB,GACG8B,EAAAA,IAACU,EAAA,CAAoB,SAAAX,CAAA,CAAkB,CAAA,CAAA,CAAA,GAI7ChB,GAASC,IACPgB,EAAAA,IAACW,EAAA,CACG,GAAI5C,EACJ,SAAAC,EAEC,SAAAe,GAASC,CAAA,CAAA,CACd,CAAA,CAAA,CAIhB,CAAC,EAEDrB,EAAU,YAAc,YACxBA,EAAU,MAAQ2C,EAClB3C,EAAU,UAAY4C,EACtB5C,EAAU,UAAY+C"}
+{"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"}