npm - @choco-vanille/ui - Versions diffs - 1.7.2 → 1.9.0 - Mend

@choco-vanille/ui 1.7.2 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (601) hide show

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

@@ -1,12 +1,11 @@
 import { jsxs as b, jsx as r } from "react/jsx-runtime";
-import v from "./components/text-area-label/TextAreaLabel.js";
-import '../../../ui-kit75.css';import '../../../ui-kit92.css';import '../../../ui-kit86.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
+import v from "./components/text-area-start-icon/TextAreaStartIcon.js";
+import '../../../ui-kit84.css';import '../../../ui-kit90.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
 /* empty css                                             */
-/* empty css                                                                   */
-import I from "./components/text-area-start-icon/TextAreaStartIcon.js";
 /* empty css                                                                            */
-import g from "./components/text-area-end-action/TextAreaEndAction.js";
+import I from "./components/text-area-end-action/TextAreaEndAction.js";
 /* empty css                                                                            */
+import g from "../_shared/components/form-label/FormLabel.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";
@@ -21,10 +20,10 @@ const t = W((l) => {
     inputId: m,
     helperId: c,
     hasError: i,
-    hasStartIcon: C,
+    hasStartIcon: F,
     hasEndAction: d,
-    handleMouseDown: D,
-    handleFocus: F,
+    handleMouseDown: C,
+    handleFocus: D,
     handleBlur: L
   } = O(l), {
     disabled: p,
@@ -45,18 +44,18 @@ const t = W((l) => {
     ref: e,
     style: _,
     rows: s,
-    minRows: T,
+    minRows: z,
     maxRows: k,
     ...H
-  } = l, z = j ?? "md", S = Z(null), U = E(
+  } = l, S = j ?? "md", T = Z(null), U = E(
     (o) => {
-      S.current = o, typeof e == "function" ? e(o) : e && (e.current = o);
+      T.current = o, typeof e == "function" ? e(o) : e && (e.current = o);
     },
     [e]
   ), { isEnabled: X, resize: R } = J(
-    S,
+    T,
     {
-      minRows: T ?? s,
+      minRows: z ?? s,
       maxRows: k,
       value: A
     }
@@ -76,7 +75,7 @@ const t = W((l) => {
       style: h !== void 0 ? { width: h } : void 0,
       children: [
         u && /* @__PURE__ */ r(
-          v,
+          g,
           {
             htmlFor: m,
             disabled: p,
@@ -92,10 +91,10 @@ const t = W((l) => {
             gap: "none",
             children: [
               f && /* @__PURE__ */ r(
-                I,
+                v,
                 {
                   icon: f,
-                  size: z
+                  size: S
                 }
               ),
               /* @__PURE__ */ r(
@@ -106,14 +105,14 @@ const t = W((l) => {
                   disabled: p,
                   "aria-invalid": i || void 0,
                   "aria-describedby": n || a ? c : void 0,
-                  onMouseDown: D,
-                  onFocus: F,
+                  onMouseDown: C,
+                  onFocus: D,
                   onBlur: L,
                   className: Q(
                     q.recipe({
-                      size: z,
+                      size: S,
                       hasError: i,
-                      hasStartIcon: C,
+                      hasStartIcon: F,
                       hasEndAction: d
                     }),
                     N
@@ -123,12 +122,12 @@ const t = W((l) => {
                   onChange: Y,
                   onKeyDown: K,
                   onKeyUp: M,
-                  rows: X ? T ?? s : s,
+                  rows: X ? z ?? s : s,
                   ...H,
                   style: { fontSize: V.fontSize[x], ..._ }
                 }
               ),
-              d && /* @__PURE__ */ r(g, { children: P })
+              d && /* @__PURE__ */ r(I, { children: P })
             ]
           }
         ),
@@ -145,9 +144,9 @@ const t = W((l) => {
   );
 });
 t.displayName = "TextArea";
-t.Label = v;
-t.StartIcon = I;
-t.EndAction = g;
+t.Label = g;
+t.StartIcon = v;
+t.EndAction = I;
 export {
   t as default
 };

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

	@@ -1 +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 { 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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"}
1	+ {"version":3,"file":"TextArea.js","sources":["../../../../src/components/forms/text-area/TextArea.tsx"],"sourcesContent":["import {\r\n TextAreaStartIcon,\r\n TextAreaEndAction,\r\n} from '@components/forms/text-area/components/index.ts'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\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 <FormLabel\r\n htmlFor={inputId}\r\n disabled={disabled}\r\n fontSize={fontSizeProp}\r\n >\r\n {label}\r\n </FormLabel>\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 = FormLabel\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","FormLabel","TextAreaStartIcon","cn","TEXT_AREA_STYLES","vars","TextAreaEndAction","HelperText"],"mappings":"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"}

package/dist/components/forms/text-area/components/index.d.ts CHANGED Viewed

@@ -1,5 +1,3 @@
-export { default as TextAreaLabel } from './text-area-label/TextAreaLabel.tsx';
-export { TEXT_AREA_LABEL_STYLES } from './text-area-label/styles/TextAreaLabel.css.ts';
 export { default as TextAreaStartIcon } from './text-area-start-icon/TextAreaStartIcon.tsx';
 export { TEXT_AREA_START_ICON_STYLES } from './text-area-start-icon/styles/TextAreaStartIcon.css.ts';
 export { default as TextAreaEndAction } from './text-area-end-action/TextAreaEndAction.tsx';

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit75.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-kit84.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 CHANGED Viewed

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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit92.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-kit90.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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit92.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 T = { root: "_1q572tr0" };

package/dist/components/forms/text-area/index.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 export { default as TextArea } from './TextArea.tsx';
 export { TEXT_AREA_STYLES } from './styles/TextArea.css.ts';
-export { TEXT_AREA_LABEL_STYLES } from './components/text-area-label/styles/TextAreaLabel.css.ts';
+export { FORM_LABEL_STYLES as TEXT_AREA_LABEL_STYLES, } from '../_shared/components/form-label/styles/FormLabel.css.ts';
 export { TEXT_AREA_START_ICON_STYLES } from './components/text-area-start-icon/styles/TextAreaStartIcon.css.ts';
 export { TEXT_AREA_END_ACTION_STYLES } from './components/text-area-end-action/styles/TextAreaEndAction.css.ts';
 export type { TextAreaProps } from './types/TextArea.props.ts';
 export type { TextAreaSize } from './types/TextArea.types.ts';
 export type { TextAreaEndActionProps } from './components/text-area-end-action/types/TextAreaEndAction.props.ts';
-export type { TextAreaLabelProps } from './components/text-area-label/types/TextAreaLabel.props.ts';
+export type { FormLabelProps as TextAreaLabelProps, } from '../_shared/components/form-label/types/FormLabel.props.ts';
 export type { TextAreaStartIconProps } from './components/text-area-start-icon/types/TextAreaStartIcon.types.ts';

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit29.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-kit51.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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import '../../../../ui-kit29.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit51.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/index.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 import { FC } from 'react';
 import { default as TextAreaEndAction } from '../components/text-area-end-action/TextAreaEndAction.tsx';
-import { default as TextAreaLabel } from '../components/text-area-label/TextAreaLabel.tsx';
 import { default as TextAreaStartIcon } from '../components/text-area-start-icon/TextAreaStartIcon.tsx';
+import { default as FormLabel } from '../../_shared/components/form-label/FormLabel.tsx';
 import { TextAreaProps } from './TextArea.props.ts';
 export type TextAreaCompound = FC<TextAreaProps> & {
-    Label: typeof TextAreaLabel;
+    Label: typeof FormLabel;
     StartIcon: typeof TextAreaStartIcon;
     EndAction: typeof TextAreaEndAction;
 };

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

@@ -1,2 +1,2 @@
-"use strict";require('../../../ui-kit79.css');require('../../../ui-kit81.css');require('../../../ui-kit72.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;
+"use strict";require('../../../ui-kit74.css');require('../../../ui-kit82.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 m=require("../_shared/components/form-label/FormLabel.cjs"),I=require("./components/text-field-start-icon/TextFieldStartIcon.cjs");;/* empty css                                           */;/* empty css                                               */;/* 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"),S=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"),T=require("react"),r=T.memo(c=>{const{inputId:d,helperId:a,hasError:i,hasStartIcon:f,hasEndAction:l,handleMouseDown:v,handleFocus:z,handleBlur:b,resolvedType:E,isPassword:j,showPassword:o,setShowPassword:u}=G.useTextField(c),{disabled:h,startIcon:p,className:g,width:q,error:t,helperText:n,label:x,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=T.useCallback(()=>u(!o),[u,o]),M=j?e.jsx(O,{icon:o?Q:J,"aria-label":o?"Hide password":"Show password",variant:"ghost",color:"primary",size:Y.fieldSizeToActionSize[s],type:"button",tabIndex:-1,onClick:K}):A;return e.jsxs(S,{flexDirection:"column",gap:"xs",width:"100%",alignItems:"start",style:q!==void 0?{width:q}:void 0,children:[x&&e.jsx(m,{htmlFor:d,disabled:h,required:w&&P,fontSize:y,children:x}),e.jsxs(S,{position:"relative",width:"100%",gap:"none",children:[p&&e.jsx(I,{icon:p,size:s}),e.jsx("input",{ref:N,id:d,type:E,disabled:h,required:w,"aria-invalid":i||void 0,"aria-describedby":t||n?a:void 0,onMouseDown:v,onFocus:z,onBlur:b,className:V.cn(U.TEXT_FIELD_STYLES.recipe({size:s,hasError:i,hasStartIcon:f,hasEndAction:l}),g),placeholder:D,value:L,onChange:k,onKeyDown:B,onKeyUp:C,...H,style:{fontSize:W.vars.fontSize[y],...R}}),l&&e.jsx(F,{children:M})]}),(t||n)&&e.jsx(X,{id:a,hasError:i,children:t??n})]})});r.displayName="TextField";r.Label=m;r.StartIcon=I;r.EndAction=F;module.exports=r;
 //# sourceMappingURL=TextField.cjs.map

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

	@@ -1 +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 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"}
1	+ {"version":3,"file":"TextField.cjs","sources":["../../../../src/components/forms/text-field/TextField.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport {\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 <FormLabel\r\n htmlFor={inputId}\r\n disabled={disabled}\r\n required={required && showRequiredIndicator}\r\n fontSize={fontSizeProp}\r\n >\r\n {label}\r\n </FormLabel>\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 = FormLabel\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","FormLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","vars","TextFieldEndAction","HelperText"],"mappings":"8pCAuCMA,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 CHANGED Viewed

@@ -1,13 +1,12 @@
 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 T from "./components/text-field-label/TextFieldLabel.js";
-import '../../../ui-kit79.css';import '../../../ui-kit81.css';import '../../../ui-kit72.css';import '../../../ui-kit2.css';import '../../../ui-kit.css';/* empty css                                         */
+import v from "../_shared/components/form-label/FormLabel.js";
+import I from "./components/text-field-start-icon/TextFieldStartIcon.js";
+import '../../../ui-kit74.css';import '../../../ui-kit82.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 I from "./components/text-field-end-action/TextFieldEndAction.js";
+import T from "./components/text-field-end-action/TextFieldEndAction.js";
 /* empty css                                                                              */
 import { TEXT_FIELD_STYLES as U } from "./styles/TextField.css.js";
 import X from "../_shared/components/helper-text/HelperText.js";
@@ -82,7 +81,7 @@ const r = Z((d) => {
       style: h !== void 0 ? { width: h } : void 0,
       children: [
         u && /* @__PURE__ */ o(
-          T,
+          v,
           {
             htmlFor: a,
             disabled: c,
@@ -99,7 +98,7 @@ const r = Z((d) => {
             gap: "none",
             children: [
               f && /* @__PURE__ */ o(
-                v,
+                I,
                 {
                   icon: f,
                   size: s
@@ -136,7 +135,7 @@ const r = Z((d) => {
                   style: { fontSize: W.fontSize[w], ...H }
                 }
               ),
-              m && /* @__PURE__ */ o(I, { children: O })
+              m && /* @__PURE__ */ o(T, { children: O })
             ]
           }
         ),
@@ -153,9 +152,9 @@ const r = Z((d) => {
   );
 });
 r.displayName = "TextField";
-r.Label = T;
-r.StartIcon = v;
-r.EndAction = I;
+r.Label = v;
+r.StartIcon = I;
+r.EndAction = T;
 export {
   r as default
 };

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

	@@ -1 +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 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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"}
1	+ {"version":3,"file":"TextField.js","sources":["../../../../src/components/forms/text-field/TextField.tsx"],"sourcesContent":["import { IconButton } from '@components/actions/icon-button'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport {\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 <FormLabel\r\n htmlFor={inputId}\r\n disabled={disabled}\r\n required={required && showRequiredIndicator}\r\n fontSize={fontSizeProp}\r\n >\r\n {label}\r\n </FormLabel>\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 = FormLabel\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","FormLabel","TextFieldStartIcon","cn","TEXT_FIELD_STYLES","vars","TextFieldEndAction","HelperText"],"mappings":"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"}

package/dist/components/forms/text-field/components/index.d.ts CHANGED Viewed

@@ -1,5 +1,3 @@
-export { default as TextFieldLabel } from './text-field-label/TextFieldLabel.tsx';
-export { TEXT_FIELD_LABEL_STYLES } from './text-field-label/styles/TextFieldLabel.css.ts';
 export { default as TextFieldStartIcon } from './text-field-start-icon/TextFieldStartIcon.tsx';
 export { TEXT_FIELD_START_ICON_STYLES } from './text-field-start-icon/styles/TextFieldStartIcon.css.ts';
 export { default as TextFieldEndAction } from './text-field-end-action/TextFieldEndAction.tsx';

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit79.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-kit74.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 CHANGED Viewed

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

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit81.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-kit82.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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit81.css';import '../../../../../../ui-kit2.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit82.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/index.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 export { default as TextField } from './TextField.tsx';
 export { TEXT_FIELD_STYLES } from './styles/TextField.css.ts';
-export { TEXT_FIELD_LABEL_STYLES } from './components/text-field-label/styles/TextFieldLabel.css.ts';
+export { FORM_LABEL_STYLES as TEXT_FIELD_LABEL_STYLES, } from '../_shared/components/form-label/styles/FormLabel.css.ts';
 export { TEXT_FIELD_START_ICON_STYLES } from './components/text-field-start-icon/styles/TextFieldStartIcon.css.ts';
 export { TEXT_FIELD_END_ACTION_STYLES } from './components/text-field-end-action/styles/TextFieldEndAction.css.ts';
 export type { TextFieldProps } from './types/TextField.props.ts';
 export type { TextFieldSize } from './types/TextField.types.ts';
-export type { TextFieldLabelProps } from './components/text-field-label/types/TextFieldLabel.props.ts';
+export type { FormLabelProps as TextFieldLabelProps, } from '../_shared/components/form-label/types/FormLabel.props.ts';
 export type { TextFieldStartIconProps } from './components/text-field-start-icon/types/TextFieldStartIcon.types.ts';
 export type { TextFieldEndActionProps } from './components/text-field-end-action/types/TextFieldEndAction.props.ts';

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit61.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-kit54.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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import '../../../../ui-kit61.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit54.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/index.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 import { FC } from 'react';
 import { default as TextFieldEndAction } from '../components/text-field-end-action/TextFieldEndAction.tsx';
-import { default as TextFieldLabel } from '../components/text-field-label/TextFieldLabel.tsx';
 import { default as TextFieldStartIcon } from '../components/text-field-start-icon/TextFieldStartIcon.tsx';
+import { default as FormLabel } from '../../_shared/components/form-label/FormLabel.tsx';
 import { TextFieldProps } from './TextField.props.ts';
 export type TextFieldCompound = FC<TextFieldProps> & {
-    Label: typeof TextFieldLabel;
+    Label: typeof FormLabel;
     StartIcon: typeof TextFieldStartIcon;
     EndAction: typeof TextFieldEndAction;
 };

package/dist/components/foundation/icon/styles/Icon.css.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit25.css');require('../../../../ui-kit5.css');require('../../../../ui-kit13.css');require('../../../../ui-kit9.css');require('../../../../ui-kit12.css');require('../../../../ui-kit3.css');require('../../../../ui-kit6.css');require('../../../../ui-kit10.css');require('../../../../ui-kit4.css');require('../../../../ui-kit14.css');require('../../../../ui-kit15.css');require('../../../../ui-kit7.css');require('../../../../ui-kit8.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                                                */;/* empty css                                                                 */;/* empty css                                                                         */;/* empty css                                                                      */;/* empty css                                                                       */;/* empty css                                                                    */;/* empty css                                                                     */;/* empty css                                                                       */;/* empty css                                                                        */;/* empty css                                                                      */;/* empty css                                                                       */;/* empty css                                                                       */;/* empty css                          */const l=require("@vanilla-extract/recipes/createRuntimeFn");var e={recipe:l.createRuntimeFn({defaultClassName:"_1liyln50",variantClassNames:{size:{xs:"_1liyln51",sm:"_1liyln52",md:"_1liyln53",lg:"_1liyln54",xl:"_1liyln55","2xl":"_1liyln56"},spin:{true:"_1liyln57"},color:{background:"_1liyln58",foreground:"_1liyln59",text:"_1liyln5a",textSecondary:"_1liyln5b",textTertiary:"_1liyln5c",card:"_1liyln5d",cardForeground:"_1liyln5e",popover:"_1liyln5f",popoverForeground:"_1liyln5g",muted:"_1liyln5h",mutedForeground:"_1liyln5i",overlay:"_1liyln5j",primary:"_1liyln5k",primaryHover:"_1liyln5l",primaryActive:"_1liyln5m",primaryForeground:"_1liyln5n",primarySubtle:"_1liyln5o",primarySubtleHover:"_1liyln5p",primarySubtleActive:"_1liyln5q",primarySubtleForeground:"_1liyln5r",primarySubtleBorder:"_1liyln5s",link:"_1liyln5t",linkHover:"_1liyln5u",linkActive:"_1liyln5v",secondary:"_1liyln5w",secondaryHover:"_1liyln5x",secondaryActive:"_1liyln5y",secondaryForeground:"_1liyln5z",secondarySubtle:"_1liyln510",secondarySubtleHover:"_1liyln511",secondarySubtleActive:"_1liyln512",secondarySubtleForeground:"_1liyln513",secondarySubtleBorder:"_1liyln514",tertiary:"_1liyln515",tertiaryHover:"_1liyln516",tertiaryActive:"_1liyln517",tertiaryForeground:"_1liyln518",tertiarySubtle:"_1liyln519",tertiarySubtleHover:"_1liyln51a",tertiarySubtleActive:"_1liyln51b",tertiarySubtleForeground:"_1liyln51c",tertiarySubtleBorder:"_1liyln51d",success:"_1liyln51e",successHover:"_1liyln51f",successActive:"_1liyln51g",successForeground:"_1liyln51h",successSubtle:"_1liyln51i",successSubtleHover:"_1liyln51j",successSubtleActive:"_1liyln51k",successSubtleForeground:"_1liyln51l",successSubtleBorder:"_1liyln51m",warning:"_1liyln51n",warningHover:"_1liyln51o",warningActive:"_1liyln51p",warningForeground:"_1liyln51q",warningSubtle:"_1liyln51r",warningSubtleHover:"_1liyln51s",warningSubtleActive:"_1liyln51t",warningSubtleForeground:"_1liyln51u",warningSubtleBorder:"_1liyln51v",info:"_1liyln51w",infoHover:"_1liyln51x",infoActive:"_1liyln51y",infoForeground:"_1liyln51z",infoSubtle:"_1liyln520",infoSubtleHover:"_1liyln521",infoSubtleActive:"_1liyln522",infoSubtleForeground:"_1liyln523",infoSubtleBorder:"_1liyln524",destructive:"_1liyln525",destructiveHover:"_1liyln526",destructiveActive:"_1liyln527",destructiveForeground:"_1liyln528",destructiveSubtle:"_1liyln529",destructiveSubtleHover:"_1liyln52a",destructiveSubtleActive:"_1liyln52b",destructiveSubtleForeground:"_1liyln52c",destructiveSubtleBorder:"_1liyln52d",purple:"_1liyln52e",purpleHover:"_1liyln52f",purpleActive:"_1liyln52g",purpleForeground:"_1liyln52h",purpleSubtle:"_1liyln52i",purpleSubtleHover:"_1liyln52j",purpleSubtleActive:"_1liyln52k",purpleSubtleForeground:"_1liyln52l",purpleSubtleBorder:"_1liyln52m",pink:"_1liyln52n",pinkHover:"_1liyln52o",pinkActive:"_1liyln52p",pinkForeground:"_1liyln52q",pinkSubtle:"_1liyln52r",pinkSubtleHover:"_1liyln52s",pinkSubtleActive:"_1liyln52t",pinkSubtleForeground:"_1liyln52u",pinkSubtleBorder:"_1liyln52v",orange:"_1liyln52w",orangeHover:"_1liyln52x",orangeActive:"_1liyln52y",orangeForeground:"_1liyln52z",orangeSubtle:"_1liyln530",orangeSubtleHover:"_1liyln531",orangeSubtleActive:"_1liyln532",orangeSubtleForeground:"_1liyln533",orangeSubtleBorder:"_1liyln534",teal:"_1liyln535",tealHover:"_1liyln536",tealActive:"_1liyln537",tealForeground:"_1liyln538",tealSubtle:"_1liyln539",tealSubtleHover:"_1liyln53a",tealSubtleActive:"_1liyln53b",tealSubtleForeground:"_1liyln53c",tealSubtleBorder:"_1liyln53d",cyan:"_1liyln53e",cyanHover:"_1liyln53f",cyanActive:"_1liyln53g",cyanForeground:"_1liyln53h",cyanSubtle:"_1liyln53i",cyanSubtleHover:"_1liyln53j",cyanSubtleActive:"_1liyln53k",cyanSubtleForeground:"_1liyln53l",cyanSubtleBorder:"_1liyln53m",indigo:"_1liyln53n",indigoHover:"_1liyln53o",indigoActive:"_1liyln53p",indigoForeground:"_1liyln53q",indigoSubtle:"_1liyln53r",indigoSubtleHover:"_1liyln53s",indigoSubtleActive:"_1liyln53t",indigoSubtleForeground:"_1liyln53u",indigoSubtleBorder:"_1liyln53v",border:"_1liyln53w",borderStrong:"_1liyln53x",ring:"_1liyln53y",highlight:"_1liyln53z",highlightForeground:"_1liyln540",skeleton:"_1liyln541",skeletonForeground:"_1liyln542",transparent:"_1liyln543"}},defaultVariants:{size:"md"},compoundVariants:[]})};exports.ICON_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit25.css');require('../../../../ui-kit14.css');require('../../../../ui-kit11.css');require('../../../../ui-kit5.css');require('../../../../ui-kit7.css');require('../../../../ui-kit10.css');require('../../../../ui-kit8.css');require('../../../../ui-kit12.css');require('../../../../ui-kit6.css');require('../../../../ui-kit4.css');require('../../../../ui-kit3.css');require('../../../../ui-kit13.css');require('../../../../ui-kit9.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                                                */;/* empty css                                                                 */;/* empty css                                                                         */;/* empty css                                                                      */;/* empty css                                                                       */;/* empty css                                                                    */;/* empty css                                                                     */;/* empty css                                                                       */;/* empty css                                                                        */;/* empty css                                                                      */;/* empty css                                                                       */;/* empty css                                                                       */;/* empty css                          */const l=require("@vanilla-extract/recipes/createRuntimeFn");var e={recipe:l.createRuntimeFn({defaultClassName:"_1liyln50",variantClassNames:{size:{xs:"_1liyln51",sm:"_1liyln52",md:"_1liyln53",lg:"_1liyln54",xl:"_1liyln55","2xl":"_1liyln56"},spin:{true:"_1liyln57"},color:{background:"_1liyln58",foreground:"_1liyln59",text:"_1liyln5a",textSecondary:"_1liyln5b",textTertiary:"_1liyln5c",card:"_1liyln5d",cardForeground:"_1liyln5e",popover:"_1liyln5f",popoverForeground:"_1liyln5g",muted:"_1liyln5h",mutedForeground:"_1liyln5i",overlay:"_1liyln5j",primary:"_1liyln5k",primaryHover:"_1liyln5l",primaryActive:"_1liyln5m",primaryForeground:"_1liyln5n",primarySubtle:"_1liyln5o",primarySubtleHover:"_1liyln5p",primarySubtleActive:"_1liyln5q",primarySubtleForeground:"_1liyln5r",primarySubtleBorder:"_1liyln5s",link:"_1liyln5t",linkHover:"_1liyln5u",linkActive:"_1liyln5v",secondary:"_1liyln5w",secondaryHover:"_1liyln5x",secondaryActive:"_1liyln5y",secondaryForeground:"_1liyln5z",secondarySubtle:"_1liyln510",secondarySubtleHover:"_1liyln511",secondarySubtleActive:"_1liyln512",secondarySubtleForeground:"_1liyln513",secondarySubtleBorder:"_1liyln514",tertiary:"_1liyln515",tertiaryHover:"_1liyln516",tertiaryActive:"_1liyln517",tertiaryForeground:"_1liyln518",tertiarySubtle:"_1liyln519",tertiarySubtleHover:"_1liyln51a",tertiarySubtleActive:"_1liyln51b",tertiarySubtleForeground:"_1liyln51c",tertiarySubtleBorder:"_1liyln51d",success:"_1liyln51e",successHover:"_1liyln51f",successActive:"_1liyln51g",successForeground:"_1liyln51h",successSubtle:"_1liyln51i",successSubtleHover:"_1liyln51j",successSubtleActive:"_1liyln51k",successSubtleForeground:"_1liyln51l",successSubtleBorder:"_1liyln51m",warning:"_1liyln51n",warningHover:"_1liyln51o",warningActive:"_1liyln51p",warningForeground:"_1liyln51q",warningSubtle:"_1liyln51r",warningSubtleHover:"_1liyln51s",warningSubtleActive:"_1liyln51t",warningSubtleForeground:"_1liyln51u",warningSubtleBorder:"_1liyln51v",info:"_1liyln51w",infoHover:"_1liyln51x",infoActive:"_1liyln51y",infoForeground:"_1liyln51z",infoSubtle:"_1liyln520",infoSubtleHover:"_1liyln521",infoSubtleActive:"_1liyln522",infoSubtleForeground:"_1liyln523",infoSubtleBorder:"_1liyln524",destructive:"_1liyln525",destructiveHover:"_1liyln526",destructiveActive:"_1liyln527",destructiveForeground:"_1liyln528",destructiveSubtle:"_1liyln529",destructiveSubtleHover:"_1liyln52a",destructiveSubtleActive:"_1liyln52b",destructiveSubtleForeground:"_1liyln52c",destructiveSubtleBorder:"_1liyln52d",purple:"_1liyln52e",purpleHover:"_1liyln52f",purpleActive:"_1liyln52g",purpleForeground:"_1liyln52h",purpleSubtle:"_1liyln52i",purpleSubtleHover:"_1liyln52j",purpleSubtleActive:"_1liyln52k",purpleSubtleForeground:"_1liyln52l",purpleSubtleBorder:"_1liyln52m",pink:"_1liyln52n",pinkHover:"_1liyln52o",pinkActive:"_1liyln52p",pinkForeground:"_1liyln52q",pinkSubtle:"_1liyln52r",pinkSubtleHover:"_1liyln52s",pinkSubtleActive:"_1liyln52t",pinkSubtleForeground:"_1liyln52u",pinkSubtleBorder:"_1liyln52v",orange:"_1liyln52w",orangeHover:"_1liyln52x",orangeActive:"_1liyln52y",orangeForeground:"_1liyln52z",orangeSubtle:"_1liyln530",orangeSubtleHover:"_1liyln531",orangeSubtleActive:"_1liyln532",orangeSubtleForeground:"_1liyln533",orangeSubtleBorder:"_1liyln534",teal:"_1liyln535",tealHover:"_1liyln536",tealActive:"_1liyln537",tealForeground:"_1liyln538",tealSubtle:"_1liyln539",tealSubtleHover:"_1liyln53a",tealSubtleActive:"_1liyln53b",tealSubtleForeground:"_1liyln53c",tealSubtleBorder:"_1liyln53d",cyan:"_1liyln53e",cyanHover:"_1liyln53f",cyanActive:"_1liyln53g",cyanForeground:"_1liyln53h",cyanSubtle:"_1liyln53i",cyanSubtleHover:"_1liyln53j",cyanSubtleActive:"_1liyln53k",cyanSubtleForeground:"_1liyln53l",cyanSubtleBorder:"_1liyln53m",indigo:"_1liyln53n",indigoHover:"_1liyln53o",indigoActive:"_1liyln53p",indigoForeground:"_1liyln53q",indigoSubtle:"_1liyln53r",indigoSubtleHover:"_1liyln53s",indigoSubtleActive:"_1liyln53t",indigoSubtleForeground:"_1liyln53u",indigoSubtleBorder:"_1liyln53v",border:"_1liyln53w",borderStrong:"_1liyln53x",ring:"_1liyln53y",highlight:"_1liyln53z",highlightForeground:"_1liyln540",skeleton:"_1liyln541",skeletonForeground:"_1liyln542",transparent:"_1liyln543"}},defaultVariants:{size:"md"},compoundVariants:[]})};exports.ICON_STYLES=e;
 //# sourceMappingURL=Icon.css.cjs.map

package/dist/components/foundation/icon/styles/Icon.css.js CHANGED Viewed

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