@choco-vanille/ui 1.6.0 → 1.7.0

package/dist/components/_common/rotating-chevron/RotatingChevron.cjs

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),i=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const s=require("../../../constants/icons.cjs"),c=require("../../../utils/cn.cjs");require("react");const a=require("./styles/RotatingChevron.css.cjs"),e=({expanded:n,className:r,...o})=>t.jsx(i,{icon:s.IconRegistry.chevronDown,className:c.cn(a.ROTATING_CHEVRON_STYLES.chevron,r),"data-expanded":n,"aria-hidden":!0,...o});e.displayName="RotatingChevron";module.exports=e;
+"use strict";const t=require("react/jsx-runtime"),i=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const s=require("../../../resources/asset/ChevronDownIcon.svg.cjs"),c=require("../../../utils/cn.cjs");require("react");const a=require("./styles/RotatingChevron.css.cjs"),e=({expanded:n,className:r,...o})=>t.jsx(i,{icon:s,className:c.cn(a.ROTATING_CHEVRON_STYLES.chevron,r),"data-expanded":n,"aria-hidden":!0,...o});e.displayName="RotatingChevron";module.exports=e;
 //# sourceMappingURL=RotatingChevron.cjs.map

package/dist/components/_common/rotating-chevron/RotatingChevron.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RotatingChevron.cjs","sources":["../../../../src/components/_common/rotating-chevron/RotatingChevron.tsx"],"sourcesContent":["import { Icon } from '@components/foundation/icon'\r\nimport { IconRegistry } from '@constants/icons.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { type FC } from 'react'\r\n\r\nimport { ROTATING_CHEVRON_STYLES } from '@components/_common/rotating-chevron/styles/RotatingChevron.css.ts'\r\nimport type { RotatingChevronProps } from '@components/_common/rotating-chevron/types/RotatingChevron.props.ts'\r\n\r\nconst RotatingChevron: FC<RotatingChevronProps> = ({\r\n    expanded,\r\n    className,\r\n    ...props\r\n}) => (\r\n    <Icon\r\n        icon={IconRegistry.chevronDown}\r\n        className={cn(ROTATING_CHEVRON_STYLES.chevron, className)}\r\n        data-expanded={expanded}\r\n        aria-hidden\r\n        {...props}\r\n    />\r\n)\r\n\r\nRotatingChevron.displayName = 'RotatingChevron'\r\n\r\nexport default RotatingChevron\r\n"],"names":["RotatingChevron","expanded","className","props","jsx","Icon","IconRegistry","cn","ROTATING_CHEVRON_STYLES"],"mappings":"2SAQMA,EAA4C,CAAC,CAC/C,SAAAC,EACA,UAAAC,EACA,GAAGC,CACP,IACIC,EAAAA,IAACC,EAAA,CACG,KAAMC,EAAAA,aAAa,YACnB,UAAWC,EAAAA,GAAGC,0BAAwB,QAASN,CAAS,EACxD,gBAAeD,EACf,cAAW,GACV,GAAGE,CAAA,CACR,EAGJH,EAAgB,YAAc"}
+{"version":3,"file":"RotatingChevron.cjs","sources":["../../../../src/components/_common/rotating-chevron/RotatingChevron.tsx"],"sourcesContent":["import { Icon } from '@components/foundation/icon'\r\nimport ChevronDownIcon from '@resources/asset/ChevronDownIcon.svg?react'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { type FC } from 'react'\r\n\r\nimport { ROTATING_CHEVRON_STYLES } from '@components/_common/rotating-chevron/styles/RotatingChevron.css.ts'\r\nimport type { RotatingChevronProps } from '@components/_common/rotating-chevron/types/RotatingChevron.props.ts'\r\n\r\nconst RotatingChevron: FC<RotatingChevronProps> = ({\r\n    expanded,\r\n    className,\r\n    ...props\r\n}) => (\r\n    <Icon\r\n        icon={ChevronDownIcon}\r\n        className={cn(ROTATING_CHEVRON_STYLES.chevron, className)}\r\n        data-expanded={expanded}\r\n        aria-hidden\r\n        {...props}\r\n    />\r\n)\r\n\r\nRotatingChevron.displayName = 'RotatingChevron'\r\n\r\nexport default RotatingChevron\r\n"],"names":["RotatingChevron","expanded","className","props","jsx","Icon","ChevronDownIcon","cn","ROTATING_CHEVRON_STYLES"],"mappings":"+TAQMA,EAA4C,CAAC,CAC/C,SAAAC,EACA,UAAAC,EACA,GAAGC,CACP,IACIC,EAAAA,IAACC,EAAA,CACG,KAAMC,EACN,UAAWC,EAAAA,GAAGC,0BAAwB,QAASN,CAAS,EACxD,gBAAeD,EACf,cAAW,GACV,GAAGE,CAAA,CACR,EAGJH,EAAgB,YAAc"}

package/dist/components/_common/rotating-chevron/RotatingChevron.js

@@ -1,19 +1,19 @@
-import { jsx as i } from "react/jsx-runtime";
-import m from "../../foundation/icon/Icon.js";
+import { jsx as m } from "react/jsx-runtime";
+import n from "../../foundation/icon/Icon.js";
 import "../../foundation/icon/styles/Icon.css.js";
-import { IconRegistry as n } from "../../../constants/icons.js";
-import { cn as a } from "../../../utils/cn.js";
+import a from "../../../resources/asset/ChevronDownIcon.svg.js";
+import { cn as i } from "../../../utils/cn.js";
 import "react";
 import { ROTATING_CHEVRON_STYLES as e } from "./styles/RotatingChevron.css.js";
 const p = ({
   expanded: o,
   className: r,
   ...t
-}) => /* @__PURE__ */ i(
-  m,
+}) => /* @__PURE__ */ m(
+  n,
   {
-    icon: n.chevronDown,
-    className: a(e.chevron, r),
+    icon: a,
+    className: i(e.chevron, r),
     "data-expanded": o,
     "aria-hidden": !0,
     ...t

package/dist/components/_common/rotating-chevron/RotatingChevron.js.map

@@ -1 +1 @@
-{"version":3,"file":"RotatingChevron.js","sources":["../../../../src/components/_common/rotating-chevron/RotatingChevron.tsx"],"sourcesContent":["import { Icon } from '@components/foundation/icon'\r\nimport { IconRegistry } from '@constants/icons.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { type FC } from 'react'\r\n\r\nimport { ROTATING_CHEVRON_STYLES } from '@components/_common/rotating-chevron/styles/RotatingChevron.css.ts'\r\nimport type { RotatingChevronProps } from '@components/_common/rotating-chevron/types/RotatingChevron.props.ts'\r\n\r\nconst RotatingChevron: FC<RotatingChevronProps> = ({\r\n    expanded,\r\n    className,\r\n    ...props\r\n}) => (\r\n    <Icon\r\n        icon={IconRegistry.chevronDown}\r\n        className={cn(ROTATING_CHEVRON_STYLES.chevron, className)}\r\n        data-expanded={expanded}\r\n        aria-hidden\r\n        {...props}\r\n    />\r\n)\r\n\r\nRotatingChevron.displayName = 'RotatingChevron'\r\n\r\nexport default RotatingChevron\r\n"],"names":["RotatingChevron","expanded","className","props","jsx","Icon","IconRegistry","cn","ROTATING_CHEVRON_STYLES"],"mappings":";;;;;;;AAQA,MAAMA,IAA4C,CAAC;AAAA,EAC/C,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACP,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,MAAMC,EAAa;AAAA,IACnB,WAAWC,EAAGC,EAAwB,SAASN,CAAS;AAAA,IACxD,iBAAeD;AAAA,IACf,eAAW;AAAA,IACV,GAAGE;AAAA,EAAA;AACR;AAGJH,EAAgB,cAAc;"}
+{"version":3,"file":"RotatingChevron.js","sources":["../../../../src/components/_common/rotating-chevron/RotatingChevron.tsx"],"sourcesContent":["import { Icon } from '@components/foundation/icon'\r\nimport ChevronDownIcon from '@resources/asset/ChevronDownIcon.svg?react'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { type FC } from 'react'\r\n\r\nimport { ROTATING_CHEVRON_STYLES } from '@components/_common/rotating-chevron/styles/RotatingChevron.css.ts'\r\nimport type { RotatingChevronProps } from '@components/_common/rotating-chevron/types/RotatingChevron.props.ts'\r\n\r\nconst RotatingChevron: FC<RotatingChevronProps> = ({\r\n    expanded,\r\n    className,\r\n    ...props\r\n}) => (\r\n    <Icon\r\n        icon={ChevronDownIcon}\r\n        className={cn(ROTATING_CHEVRON_STYLES.chevron, className)}\r\n        data-expanded={expanded}\r\n        aria-hidden\r\n        {...props}\r\n    />\r\n)\r\n\r\nRotatingChevron.displayName = 'RotatingChevron'\r\n\r\nexport default RotatingChevron\r\n"],"names":["RotatingChevron","expanded","className","props","jsx","Icon","ChevronDownIcon","cn","ROTATING_CHEVRON_STYLES"],"mappings":";;;;;;;AAQA,MAAMA,IAA4C,CAAC;AAAA,EAC/C,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACP,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,MAAMC;AAAAA,IACN,WAAWC,EAAGC,EAAwB,SAASN,CAAS;AAAA,IACxD,iBAAeD;AAAA,IACf,eAAW;AAAA,IACV,GAAGE;AAAA,EAAA;AACR;AAGJH,EAAgB,cAAc;"}

package/dist/components/_common/rotating-chevron/styles/RotatingChevron.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit135.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                     */var e={chevron:"_1oghhzs0"};exports.ROTATING_CHEVRON_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit132.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                     */var e={chevron:"_1oghhzs0"};exports.ROTATING_CHEVRON_STYLES=e;
 //# sourceMappingURL=RotatingChevron.css.cjs.map

package/dist/components/_common/rotating-chevron/styles/RotatingChevron.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit135.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit132.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                                   */
 var h = { chevron: "_1oghhzs0" };
 export {

package/dist/components/actions/_shared/buttons/styles/buttonShared.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../ui-kit38.css');require('../../../../../ui-kit.css');;/* empty css                                                 */;/* empty css                                  */var e={icon:"_7owzgg0"};exports.BUTTON_SHARED_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../ui-kit20.css');require('../../../../../ui-kit.css');;/* empty css                                                 */;/* empty css                                  */var e={icon:"_7owzgg0"};exports.BUTTON_SHARED_STYLES=e;
 //# sourceMappingURL=buttonShared.css.cjs.map

package/dist/components/actions/_shared/buttons/styles/buttonShared.css.js

@@ -1,4 +1,4 @@
-import '../../../../../ui-kit38.css';import '../../../../../ui-kit.css';/* empty css                                               */
+import '../../../../../ui-kit20.css';import '../../../../../ui-kit.css';/* empty css                                               */
 /* empty css                                */
 var i = { icon: "_7owzgg0" };
 export {

package/dist/components/actions/button/styles/Button.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit39.css');require('../../../../ui-kit38.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                                             */;/* empty css                            */const r=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:r.createRuntimeFn({defaultClassName:"q672pj0",variantClassNames:{variant:{contained:"q672pj1",outlined:"q672pj2",ghost:"q672pj3"},color:{primary:"q672pj4",secondary:"q672pj5",tertiary:"q672pj6",destructive:"q672pj7",success:"q672pj8",warning:"q672pj9",info:"q672pja"},size:{sm:"q672pjb",md:"q672pjc",lg:"q672pjd"}},defaultVariants:{variant:"contained",color:"primary",size:"md"},compoundVariants:[[{variant:"contained",color:"primary"},"q672pje"],[{variant:"contained",color:"secondary"},"q672pjf"],[{variant:"contained",color:"tertiary"},"q672pjg"],[{variant:"contained",color:"destructive"},"q672pjh"],[{variant:"contained",color:"success"},"q672pji"],[{variant:"contained",color:"warning"},"q672pjj"],[{variant:"contained",color:"info"},"q672pjk"],[{variant:"outlined",color:"primary"},"q672pjl"],[{variant:"outlined",color:"secondary"},"q672pjm"],[{variant:"outlined",color:"tertiary"},"q672pjn"],[{variant:"outlined",color:"destructive"},"q672pjo"],[{variant:"outlined",color:"success"},"q672pjp"],[{variant:"outlined",color:"warning"},"q672pjq"],[{variant:"outlined",color:"info"},"q672pjr"],[{variant:"ghost",color:"primary"},"q672pjs"],[{variant:"ghost",color:"secondary"},"q672pjt"],[{variant:"ghost",color:"tertiary"},"q672pju"],[{variant:"ghost",color:"destructive"},"q672pjv"],[{variant:"ghost",color:"success"},"q672pjw"],[{variant:"ghost",color:"warning"},"q672pjx"],[{variant:"ghost",color:"info"},"q672pjy"]]})};exports.BUTTON_STYLES=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit27.css');require('../../../../ui-kit20.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                                             */;/* empty css                            */const r=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:r.createRuntimeFn({defaultClassName:"q672pj0",variantClassNames:{variant:{contained:"q672pj1",outlined:"q672pj2",ghost:"q672pj3"},color:{primary:"q672pj4",secondary:"q672pj5",tertiary:"q672pj6",destructive:"q672pj7",success:"q672pj8",warning:"q672pj9",info:"q672pja"},size:{sm:"q672pjb",md:"q672pjc",lg:"q672pjd"}},defaultVariants:{variant:"contained",color:"primary",size:"md"},compoundVariants:[[{variant:"contained",color:"primary"},"q672pje"],[{variant:"contained",color:"secondary"},"q672pjf"],[{variant:"contained",color:"tertiary"},"q672pjg"],[{variant:"contained",color:"destructive"},"q672pjh"],[{variant:"contained",color:"success"},"q672pji"],[{variant:"contained",color:"warning"},"q672pjj"],[{variant:"contained",color:"info"},"q672pjk"],[{variant:"outlined",color:"primary"},"q672pjl"],[{variant:"outlined",color:"secondary"},"q672pjm"],[{variant:"outlined",color:"tertiary"},"q672pjn"],[{variant:"outlined",color:"destructive"},"q672pjo"],[{variant:"outlined",color:"success"},"q672pjp"],[{variant:"outlined",color:"warning"},"q672pjq"],[{variant:"outlined",color:"info"},"q672pjr"],[{variant:"ghost",color:"primary"},"q672pjs"],[{variant:"ghost",color:"secondary"},"q672pjt"],[{variant:"ghost",color:"tertiary"},"q672pju"],[{variant:"ghost",color:"destructive"},"q672pjv"],[{variant:"ghost",color:"success"},"q672pjw"],[{variant:"ghost",color:"warning"},"q672pjx"],[{variant:"ghost",color:"info"},"q672pjy"]]})};exports.BUTTON_STYLES=a;
 //# sourceMappingURL=Button.css.cjs.map

package/dist/components/actions/button/styles/Button.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit39.css';import '../../../../ui-kit38.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit27.css';import '../../../../ui-kit20.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                                                           */
 /* empty css                          */
 import { createRuntimeFn as r } from "@vanilla-extract/recipes/createRuntimeFn";

package/dist/components/actions/button/types/Button.props.d.ts

@@ -1,3 +1,4 @@
+import { IconComponent } from '../../../foundation/icon';
 import { ButtonColor, ButtonSize, ButtonVariant } from './Button.types.ts';
 import type * as React from 'react';
 export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> & {
@@ -11,10 +12,10 @@ export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'c
     ref?: React.Ref<HTMLButtonElement>;
     /** The text content rendered inside the button via the Typography component. */
     label: string;
-    /** Iconify icon name rendered before the label. Size and color are derived from the Button variant and size. */
-    startIcon?: string;
-    /** Iconify icon name rendered after the label. Size and color are derived from the Button variant and size. */
-    endIcon?: string;
+    /** SVG component rendered before the label. */
+    startIcon?: IconComponent;
+    /** SVG component rendered after the label. */
+    endIcon?: IconComponent;
     /** Whether the button is in an active/pressed state, e.g. when it triggers an open menu. */
     active?: boolean;
 };

package/dist/components/actions/icon-button/IconButton.cjs

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),T=require("./styles/IconButton.css.cjs"),a=require("../_shared/buttons/styles/buttonShared.css.cjs"),O=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const B=require("../../../utils/cn.cjs"),n=require("./constants/iconButtonSizes.const.cjs"),c=({variant:s,color:o,size:e=n.ICON_BUTTON_SIZES.md,className:r,icon:i,children:u,active:_,ref:S,...I})=>{const N=n.ICON_BUTTON_SIZE_TO_ICON_SIZE[e];return t.jsx("button",{ref:S,className:B.cn(T.ICON_BUTTON_STYLES.recipe({variant:s,color:o,size:e}),r),...I,"data-active":_?"true":void 0,children:u??t.jsx(O,{icon:i,size:N,className:a.BUTTON_SHARED_STYLES.icon})})};c.displayName="IconButton";module.exports=c;
+"use strict";const n=require("react/jsx-runtime"),T=require("./styles/IconButton.css.cjs"),a=require("../_shared/buttons/styles/buttonShared.css.cjs"),O=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const B=require("../../../utils/cn.cjs"),c=require("./constants/iconButtonSizes.const.cjs"),s=({variant:o,color:r,size:e=c.ICON_BUTTON_SIZES.md,className:i,icon:t,children:u,active:_,ref:S,...I})=>{const N=c.ICON_BUTTON_SIZE_TO_ICON_SIZE[e];return n.jsx("button",{ref:S,className:B.cn(T.ICON_BUTTON_STYLES.recipe({variant:o,color:r,size:e}),i),...I,"data-active":_?"true":void 0,children:u??(t?n.jsx(O,{icon:t,size:N,className:a.BUTTON_SHARED_STYLES.icon}):null)})};s.displayName="IconButton";module.exports=s;
 //# sourceMappingURL=IconButton.cjs.map

package/dist/components/actions/icon-button/IconButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/actions/icon-button/IconButton.tsx"],"sourcesContent":["import { ICON_BUTTON_STYLES } from '@components/actions/icon-button/styles/IconButton.css.ts'\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport type { IconButtonProps } from '@components/actions/icon-button/types/IconButton.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\nimport { ICON_BUTTON_SIZE_TO_ICON_SIZE, ICON_BUTTON_SIZES } from '@components/actions/icon-button/constants'\r\n\r\n/**\r\n * Icon-only action button. Requires `aria-label` for accessibility.\r\n * Supports `variant` (contained|outlined|ghost), semantic `color`,\r\n * `size` (xs|sm|md|lg), and an Iconify `icon` identifier.\r\n */\r\nconst IconButton: FC<IconButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = ICON_BUTTON_SIZES.md,\r\n    className,\r\n    icon,\r\n    children,\r\n    active,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = ICON_BUTTON_SIZE_TO_ICON_SIZE[size]\r\n\r\n    return (\r\n        <button\r\n            ref={ref}\r\n            className={cn(ICON_BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\r\n            data-active={active ? 'true' : undefined}\r\n        >\r\n            {children ?? (\r\n                <Icon\r\n                    icon={icon as string}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            )}\r\n        </button>\r\n    )\r\n}\r\n\r\nIconButton.displayName = 'IconButton'\r\n\r\nexport default IconButton\r\n"],"names":["IconButton","variant","color","size","ICON_BUTTON_SIZES","className","icon","children","active","ref","props","iconSize","ICON_BUTTON_SIZE_TO_ICON_SIZE","jsx","cn","ICON_BUTTON_STYLES","Icon","BUTTON_SHARED_STYLES"],"mappings":"oVAaMA,EAAkC,CAAC,CACrC,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAOC,EAAAA,kBAAkB,GACzB,UAAAC,EACA,KAAAC,EACA,SAAAC,EACA,OAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,8BAA8BT,CAAI,EAEnD,OACIU,EAAAA,IAAC,SAAA,CACG,IAAAJ,EACA,UAAWK,EAAAA,GAAGC,EAAAA,mBAAmB,OAAO,CAAE,QAAAd,EAAS,MAAAC,EAAO,KAAAC,EAAM,EAAGE,CAAS,EAC3E,GAAGK,EACJ,cAAaF,EAAS,OAAS,OAE9B,SAAAD,GACGM,EAAAA,IAACG,EAAA,CACG,KAAAV,EACA,KAAMK,EACN,UAAWM,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAIhB,EAEAjB,EAAW,YAAc"}
+{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/actions/icon-button/IconButton.tsx"],"sourcesContent":["import { ICON_BUTTON_STYLES } from '@components/actions/icon-button/styles/IconButton.css.ts'\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport type { IconButtonProps } from '@components/actions/icon-button/types/IconButton.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\nimport { ICON_BUTTON_SIZE_TO_ICON_SIZE, ICON_BUTTON_SIZES } from '@components/actions/icon-button/constants'\r\n\r\n/**\r\n * Icon-only action button. Requires `aria-label` for accessibility.\r\n * Supports `variant` (contained|outlined|ghost), semantic `color`,\r\n *  `size` (xs|sm|md|lg), and a local SVG `icon` component.\r\n */\r\nconst IconButton: FC<IconButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = ICON_BUTTON_SIZES.md,\r\n    className,\r\n    icon,\r\n    children,\r\n    active,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = ICON_BUTTON_SIZE_TO_ICON_SIZE[size]\r\n\r\n    return (\r\n        <button\r\n            ref={ref}\r\n            className={cn(ICON_BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\r\n            data-active={active ? 'true' : undefined}\r\n        >\r\n            {children ?? (icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : null)}\r\n        </button>\r\n    )\r\n}\r\n\r\nIconButton.displayName = 'IconButton'\r\n\r\nexport default IconButton\r\n"],"names":["IconButton","variant","color","size","ICON_BUTTON_SIZES","className","icon","children","active","ref","props","iconSize","ICON_BUTTON_SIZE_TO_ICON_SIZE","jsx","cn","ICON_BUTTON_STYLES","Icon","BUTTON_SHARED_STYLES"],"mappings":"oVAaMA,EAAkC,CAAC,CACrC,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAOC,EAAAA,kBAAkB,GACzB,UAAAC,EACA,KAAAC,EACA,SAAAC,EACA,OAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,8BAA8BT,CAAI,EAEnD,OACIU,EAAAA,IAAC,SAAA,CACG,IAAAJ,EACA,UAAWK,EAAAA,GAAGC,EAAAA,mBAAmB,OAAO,CAAE,QAAAd,EAAS,MAAAC,EAAO,KAAAC,EAAM,EAAGE,CAAS,EAC3E,GAAGK,EACJ,cAAaF,EAAS,OAAS,OAE9B,aAAaF,EACVO,EAAAA,IAACG,EAAA,CACG,KAAAV,EACA,KAAMK,EACN,UAAWM,EAAAA,qBAAqB,IAAA,CAAA,EAEpC,KAAA,CAAA,CAGhB,EAEAjB,EAAW,YAAc"}

package/dist/components/actions/icon-button/IconButton.d.ts

@@ -3,7 +3,7 @@ import { FC } from 'react';
 /**
  * Icon-only action button. Requires `aria-label` for accessibility.
  * Supports `variant` (contained|outlined|ghost), semantic `color`,
- * `size` (xs|sm|md|lg), and an Iconify `icon` identifier.
+ *  `size` (xs|sm|md|lg), and a local SVG `icon` component.
  */
 declare const IconButton: FC<IconButtonProps>;
 export default IconButton;

package/dist/components/actions/icon-button/IconButton.js

@@ -1,4 +1,4 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as r } from "react/jsx-runtime";
 import { ICON_BUTTON_STYLES as _ } from "./styles/IconButton.css.js";
 import { BUTTON_SHARED_STYLES as p } from "../_shared/buttons/styles/buttonShared.css.js";
 import I from "../../foundation/icon/Icon.js";
@@ -6,32 +6,32 @@ import "../../foundation/icon/styles/Icon.css.js";
 import { cn as S } from "../../../utils/cn.js";
 import { ICON_BUTTON_SIZE_TO_ICON_SIZE as s, ICON_BUTTON_SIZES as O } from "./constants/iconButtonSizes.const.js";
 const f = ({
-  variant: r,
-  color: m,
+  variant: m,
+  color: i,
   size: o = O.md,
-  className: i,
-  icon: c,
-  children: n,
+  className: n,
+  icon: t,
+  children: c,
   active: e,
   ref: a,
   ...N
 }) => {
   const T = s[o];
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ r(
     "button",
     {
       ref: a,
-      className: S(_.recipe({ variant: r, color: m, size: o }), i),
+      className: S(_.recipe({ variant: m, color: i, size: o }), n),
       ...N,
       "data-active": e ? "true" : void 0,
-      children: n ?? /* @__PURE__ */ t(
+      children: c ?? (t ? /* @__PURE__ */ r(
         I,
         {
-          icon: c,
+          icon: t,
           size: T,
           className: p.icon
         }
-      )
+      ) : null)
     }
   );
 };

package/dist/components/actions/icon-button/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/actions/icon-button/IconButton.tsx"],"sourcesContent":["import { ICON_BUTTON_STYLES } from '@components/actions/icon-button/styles/IconButton.css.ts'\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport type { IconButtonProps } from '@components/actions/icon-button/types/IconButton.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\nimport { ICON_BUTTON_SIZE_TO_ICON_SIZE, ICON_BUTTON_SIZES } from '@components/actions/icon-button/constants'\r\n\r\n/**\r\n * Icon-only action button. Requires `aria-label` for accessibility.\r\n * Supports `variant` (contained|outlined|ghost), semantic `color`,\r\n * `size` (xs|sm|md|lg), and an Iconify `icon` identifier.\r\n */\r\nconst IconButton: FC<IconButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = ICON_BUTTON_SIZES.md,\r\n    className,\r\n    icon,\r\n    children,\r\n    active,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = ICON_BUTTON_SIZE_TO_ICON_SIZE[size]\r\n\r\n    return (\r\n        <button\r\n            ref={ref}\r\n            className={cn(ICON_BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\r\n            data-active={active ? 'true' : undefined}\r\n        >\r\n            {children ?? (\r\n                <Icon\r\n                    icon={icon as string}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            )}\r\n        </button>\r\n    )\r\n}\r\n\r\nIconButton.displayName = 'IconButton'\r\n\r\nexport default IconButton\r\n"],"names":["IconButton","variant","color","size","ICON_BUTTON_SIZES","className","icon","children","active","ref","props","iconSize","ICON_BUTTON_SIZE_TO_ICON_SIZE","jsx","cn","ICON_BUTTON_STYLES","Icon","BUTTON_SHARED_STYLES"],"mappings":";;;;;;;AAaA,MAAMA,IAAkC,CAAC;AAAA,EACrC,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAOC,EAAkB;AAAA,EACzB,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAA8BT,CAAI;AAEnD,SACI,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAJ;AAAA,MACA,WAAWK,EAAGC,EAAmB,OAAO,EAAE,SAAAd,GAAS,OAAAC,GAAO,MAAAC,GAAM,GAAGE,CAAS;AAAA,MAC3E,GAAGK;AAAA,MACJ,eAAaF,IAAS,SAAS;AAAA,MAE9B,UAAAD,KACG,gBAAAM;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAAV;AAAA,UACA,MAAMK;AAAA,UACN,WAAWM,EAAqB;AAAA,QAAA;AAAA,MAAA;AAAA,IACpC;AAAA,EAAA;AAIhB;AAEAjB,EAAW,cAAc;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/actions/icon-button/IconButton.tsx"],"sourcesContent":["import { ICON_BUTTON_STYLES } from '@components/actions/icon-button/styles/IconButton.css.ts'\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport type { IconButtonProps } from '@components/actions/icon-button/types/IconButton.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\nimport { ICON_BUTTON_SIZE_TO_ICON_SIZE, ICON_BUTTON_SIZES } from '@components/actions/icon-button/constants'\r\n\r\n/**\r\n * Icon-only action button. Requires `aria-label` for accessibility.\r\n * Supports `variant` (contained|outlined|ghost), semantic `color`,\r\n *  `size` (xs|sm|md|lg), and a local SVG `icon` component.\r\n */\r\nconst IconButton: FC<IconButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = ICON_BUTTON_SIZES.md,\r\n    className,\r\n    icon,\r\n    children,\r\n    active,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = ICON_BUTTON_SIZE_TO_ICON_SIZE[size]\r\n\r\n    return (\r\n        <button\r\n            ref={ref}\r\n            className={cn(ICON_BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\r\n            data-active={active ? 'true' : undefined}\r\n        >\r\n            {children ?? (icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : null)}\r\n        </button>\r\n    )\r\n}\r\n\r\nIconButton.displayName = 'IconButton'\r\n\r\nexport default IconButton\r\n"],"names":["IconButton","variant","color","size","ICON_BUTTON_SIZES","className","icon","children","active","ref","props","iconSize","ICON_BUTTON_SIZE_TO_ICON_SIZE","jsx","cn","ICON_BUTTON_STYLES","Icon","BUTTON_SHARED_STYLES"],"mappings":";;;;;;;AAaA,MAAMA,IAAkC,CAAC;AAAA,EACrC,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAOC,EAAkB;AAAA,EACzB,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAA8BT,CAAI;AAEnD,SACI,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAJ;AAAA,MACA,WAAWK,EAAGC,EAAmB,OAAO,EAAE,SAAAd,GAAS,OAAAC,GAAO,MAAAC,GAAM,GAAGE,CAAS;AAAA,MAC3E,GAAGK;AAAA,MACJ,eAAaF,IAAS,SAAS;AAAA,MAE9B,gBAAaF,IACV,gBAAAO;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAAV;AAAA,UACA,MAAMK;AAAA,UACN,WAAWM,EAAqB;AAAA,QAAA;AAAA,MAAA,IAEpC;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEAjB,EAAW,cAAc;"}

package/dist/components/actions/icon-button/styles/IconButton.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit54.css');require('../../../../ui-kit38.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                                             */;/* empty css                                */const o=require("@vanilla-extract/recipes/createRuntimeFn");var t={recipe:o.createRuntimeFn({defaultClassName:"_11odjt50",variantClassNames:{variant:{contained:"_11odjt51",outlined:"_11odjt52",ghost:"_11odjt53"},color:{primary:"_11odjt54",secondary:"_11odjt55",tertiary:"_11odjt56",destructive:"_11odjt57",success:"_11odjt58",warning:"_11odjt59",info:"_11odjt5a"},size:{xs:"_11odjt5b",sm:"_11odjt5c",md:"_11odjt5d",lg:"_11odjt5e"}},defaultVariants:{variant:"contained",color:"primary",size:"md"},compoundVariants:[[{variant:"contained",color:"primary"},"_11odjt5f"],[{variant:"contained",color:"secondary"},"_11odjt5g"],[{variant:"contained",color:"tertiary"},"_11odjt5h"],[{variant:"contained",color:"destructive"},"_11odjt5i"],[{variant:"contained",color:"success"},"_11odjt5j"],[{variant:"contained",color:"warning"},"_11odjt5k"],[{variant:"contained",color:"info"},"_11odjt5l"],[{variant:"outlined",color:"primary"},"_11odjt5m"],[{variant:"outlined",color:"secondary"},"_11odjt5n"],[{variant:"outlined",color:"tertiary"},"_11odjt5o"],[{variant:"outlined",color:"destructive"},"_11odjt5p"],[{variant:"outlined",color:"success"},"_11odjt5q"],[{variant:"outlined",color:"warning"},"_11odjt5r"],[{variant:"outlined",color:"info"},"_11odjt5s"],[{variant:"ghost",color:"primary"},"_11odjt5t"],[{variant:"ghost",color:"secondary"},"_11odjt5u"],[{variant:"ghost",color:"tertiary"},"_11odjt5v"],[{variant:"ghost",color:"destructive"},"_11odjt5w"],[{variant:"ghost",color:"success"},"_11odjt5x"],[{variant:"ghost",color:"warning"},"_11odjt5y"],[{variant:"ghost",color:"info"},"_11odjt5z"]]})};exports.ICON_BUTTON_STYLES=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit21.css');require('../../../../ui-kit20.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                                             */;/* empty css                                */const o=require("@vanilla-extract/recipes/createRuntimeFn");var t={recipe:o.createRuntimeFn({defaultClassName:"_11odjt50",variantClassNames:{variant:{contained:"_11odjt51",outlined:"_11odjt52",ghost:"_11odjt53"},color:{primary:"_11odjt54",secondary:"_11odjt55",tertiary:"_11odjt56",destructive:"_11odjt57",success:"_11odjt58",warning:"_11odjt59",info:"_11odjt5a"},size:{xs:"_11odjt5b",sm:"_11odjt5c",md:"_11odjt5d",lg:"_11odjt5e"}},defaultVariants:{variant:"contained",color:"primary",size:"md"},compoundVariants:[[{variant:"contained",color:"primary"},"_11odjt5f"],[{variant:"contained",color:"secondary"},"_11odjt5g"],[{variant:"contained",color:"tertiary"},"_11odjt5h"],[{variant:"contained",color:"destructive"},"_11odjt5i"],[{variant:"contained",color:"success"},"_11odjt5j"],[{variant:"contained",color:"warning"},"_11odjt5k"],[{variant:"contained",color:"info"},"_11odjt5l"],[{variant:"outlined",color:"primary"},"_11odjt5m"],[{variant:"outlined",color:"secondary"},"_11odjt5n"],[{variant:"outlined",color:"tertiary"},"_11odjt5o"],[{variant:"outlined",color:"destructive"},"_11odjt5p"],[{variant:"outlined",color:"success"},"_11odjt5q"],[{variant:"outlined",color:"warning"},"_11odjt5r"],[{variant:"outlined",color:"info"},"_11odjt5s"],[{variant:"ghost",color:"primary"},"_11odjt5t"],[{variant:"ghost",color:"secondary"},"_11odjt5u"],[{variant:"ghost",color:"tertiary"},"_11odjt5v"],[{variant:"ghost",color:"destructive"},"_11odjt5w"],[{variant:"ghost",color:"success"},"_11odjt5x"],[{variant:"ghost",color:"warning"},"_11odjt5y"],[{variant:"ghost",color:"info"},"_11odjt5z"]]})};exports.ICON_BUTTON_STYLES=t;
 //# sourceMappingURL=IconButton.css.cjs.map

package/dist/components/actions/icon-button/styles/IconButton.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit54.css';import '../../../../ui-kit38.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit21.css';import '../../../../ui-kit20.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                                                           */
 /* empty css                              */
 import { createRuntimeFn as o } from "@vanilla-extract/recipes/createRuntimeFn";

package/dist/components/actions/icon-button/types/IconButton.props.d.ts

@@ -1,8 +1,9 @@
+import { IconComponent } from '../../../foundation/icon';
 import { IconButtonColor, IconButtonSize, IconButtonVariant } from './IconButton.types.ts';
 import type * as React from 'react';
 export type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label' | 'color'> & ({
-    /** Iconify icon name rendered inside the button. */
-    icon: string;
+    /** SVG component rendered inside the button. */
+    icon: IconComponent;
     children?: never;
 } | {
     icon?: never;

package/dist/components/actions/toggle/styles/Toggle.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit65.css');require('../../../../ui-kit38.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                                             */;/* empty css                            */const t=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:t.createRuntimeFn({defaultClassName:"_1lqapti0",variantClassNames:{variant:{outlined:"_1lqapti1",ghost:"_1lqapti2"},subtle:{true:"_1lqapti3",false:"_1lqapti4"},color:{primary:"_1lqapti5",secondary:"_1lqapti6",tertiary:"_1lqapti7",destructive:"_1lqapti8",success:"_1lqapti9",warning:"_1lqaptia",info:"_1lqaptib"},size:{sm:"_1lqaptic",md:"_1lqaptid",lg:"_1lqaptie"},radius:{none:"_1lqaptif",xs:"_1lqaptig",sm:"_1lqaptih",md:"_1lqaptii",lg:"_1lqaptij",xl:"_1lqaptik","2xl":"_1lqaptil",full:"_1lqaptim"}},defaultVariants:{variant:"outlined",color:"primary",size:"md",radius:"sm"},compoundVariants:[[{variant:"ghost",color:"primary",subtle:!0},"_1lqaptin"],[{variant:"outlined",color:"primary",subtle:!0},"_1lqaptio"],[{variant:"ghost",color:"secondary",subtle:!0},"_1lqaptip"],[{variant:"outlined",color:"secondary",subtle:!0},"_1lqaptiq"],[{variant:"ghost",color:"tertiary",subtle:!0},"_1lqaptir"],[{variant:"outlined",color:"tertiary",subtle:!0},"_1lqaptis"],[{variant:"ghost",color:"destructive",subtle:!0},"_1lqaptit"],[{variant:"outlined",color:"destructive",subtle:!0},"_1lqaptiu"],[{variant:"ghost",color:"success",subtle:!0},"_1lqaptiv"],[{variant:"outlined",color:"success",subtle:!0},"_1lqaptiw"],[{variant:"ghost",color:"warning",subtle:!0},"_1lqaptix"],[{variant:"outlined",color:"warning",subtle:!0},"_1lqaptiy"],[{variant:"ghost",color:"info",subtle:!0},"_1lqaptiz"],[{variant:"outlined",color:"info",subtle:!0},"_1lqapti10"]]})};exports.TOGGLE_STYLES=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit26.css');require('../../../../ui-kit20.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                                             */;/* empty css                            */const t=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:t.createRuntimeFn({defaultClassName:"_1lqapti0",variantClassNames:{variant:{outlined:"_1lqapti1",ghost:"_1lqapti2"},subtle:{true:"_1lqapti3",false:"_1lqapti4"},color:{primary:"_1lqapti5",secondary:"_1lqapti6",tertiary:"_1lqapti7",destructive:"_1lqapti8",success:"_1lqapti9",warning:"_1lqaptia",info:"_1lqaptib"},size:{sm:"_1lqaptic",md:"_1lqaptid",lg:"_1lqaptie"},radius:{none:"_1lqaptif",xs:"_1lqaptig",sm:"_1lqaptih",md:"_1lqaptii",lg:"_1lqaptij",xl:"_1lqaptik","2xl":"_1lqaptil",full:"_1lqaptim"}},defaultVariants:{variant:"outlined",color:"primary",size:"md",radius:"sm"},compoundVariants:[[{variant:"ghost",color:"primary",subtle:!0},"_1lqaptin"],[{variant:"outlined",color:"primary",subtle:!0},"_1lqaptio"],[{variant:"ghost",color:"secondary",subtle:!0},"_1lqaptip"],[{variant:"outlined",color:"secondary",subtle:!0},"_1lqaptiq"],[{variant:"ghost",color:"tertiary",subtle:!0},"_1lqaptir"],[{variant:"outlined",color:"tertiary",subtle:!0},"_1lqaptis"],[{variant:"ghost",color:"destructive",subtle:!0},"_1lqaptit"],[{variant:"outlined",color:"destructive",subtle:!0},"_1lqaptiu"],[{variant:"ghost",color:"success",subtle:!0},"_1lqaptiv"],[{variant:"outlined",color:"success",subtle:!0},"_1lqaptiw"],[{variant:"ghost",color:"warning",subtle:!0},"_1lqaptix"],[{variant:"outlined",color:"warning",subtle:!0},"_1lqaptiy"],[{variant:"ghost",color:"info",subtle:!0},"_1lqaptiz"],[{variant:"outlined",color:"info",subtle:!0},"_1lqapti10"]]})};exports.TOGGLE_STYLES=a;
 //# sourceMappingURL=Toggle.css.cjs.map

package/dist/components/actions/toggle/styles/Toggle.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit65.css';import '../../../../ui-kit38.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit26.css';import '../../../../ui-kit20.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                                                           */
 /* empty css                          */
 import { createRuntimeFn as t } from "@vanilla-extract/recipes/createRuntimeFn";

package/dist/components/actions/toggle/types/Toggle.types.d.ts

@@ -1,5 +1,6 @@
 import { ButtonColorShared, ButtonSizeShared } from '../../_shared/buttons/types';
 import { Radius } from '../../../../theme/tokens/radii.ts';
+import { IconComponent } from '../../../foundation/icon';
 export type ToggleVariant = 'ghost' | 'outlined';
 export type ToggleColor = ButtonColorShared;
 export type ToggleSize = ButtonSizeShared;
@@ -8,12 +9,12 @@ export type ToggleLabelContent = {
     label: string;
     icon?: never;
     'aria-label'?: string;
-    startIcon?: string;
-    endIcon?: string;
+    startIcon?: IconComponent;
+    endIcon?: IconComponent;
 };
 export type ToggleIconContent = {
     label?: never;
-    icon: string;
+    icon: IconComponent;
     'aria-label': string;
     startIcon?: never;
     endIcon?: never;

package/dist/components/actions/toggle-group/styles/ToggleGroup.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit43.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                 */const e=require("@vanilla-extract/recipes/createRuntimeFn");var t={recipe:e.createRuntimeFn({defaultClassName:"_40ge150",variantClassNames:{orientation:{horizontal:"_40ge151",vertical:"_40ge152"}},defaultVariants:{orientation:"horizontal"},compoundVariants:[]})};exports.TOGGLE_GROUP_STYLES=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit22.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                 */const e=require("@vanilla-extract/recipes/createRuntimeFn");var t={recipe:e.createRuntimeFn({defaultClassName:"_40ge150",variantClassNames:{orientation:{horizontal:"_40ge151",vertical:"_40ge152"}},defaultVariants:{orientation:"horizontal"},compoundVariants:[]})};exports.TOGGLE_GROUP_STYLES=t;
 //# sourceMappingURL=ToggleGroup.css.cjs.map

package/dist/components/actions/toggle-group/styles/ToggleGroup.css.js

@@ -1,4 +1,4 @@
-import '../../../../ui-kit43.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit22.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                               */
 import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
 var i = { recipe: a({ defaultClassName: "_40ge150", variantClassNames: { orientation: { horizontal: "_40ge151", vertical: "_40ge152" } }, defaultVariants: { orientation: "horizontal" }, compoundVariants: [] }) };

package/dist/components/data-display/avatar/Avatar.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./components/avatar-fallback/AvatarFallback.cjs"),c=require("./components/avatar-image/AvatarImage.cjs"),n=require("./components/avatar-root/AvatarRoot.cjs"),i=require("./components/avatar-status/AvatarStatus.cjs"),I=require("./constants/avatarSizes.const.cjs"),R=require("react"),a=R.memo(({src:t,alt:l,initials:u,icon:m,size:r=I.AVATAR_SIZES.md,shape:A="circle",color:v="primary",status:o,statusLabel:q,statusSize:S,fallbackDelay:d,onLoadingStatusChange:j,className:b,ref:g,...x})=>{const y=!!t;return e.jsxs(n,{ref:g,size:r,shape:A,color:v,className:b,...x,children:[y&&e.jsx(c,{src:t,alt:l,onLoadingStatusChange:j}),e.jsx(s,{initials:u,icon:m,size:r,delay:d}),o&&e.jsx(i,{status:o,size:S??r,label:q})]})});a.displayName="Avatar";a.Root=n;a.Image=c;a.Fallback=s;a.Status=i;exports.Avatar=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./components/avatar-fallback/AvatarFallback.cjs"),c=require("./components/avatar-image/AvatarImage.cjs"),n=require("./components/avatar-root/AvatarRoot.cjs"),i=require("./components/avatar-status/AvatarStatus.cjs"),R=require("./constants/avatarSizes.const.cjs"),I=require("react"),a=I.memo(({src:t,alt:l,initials:u,icon:m,size:r=R.AVATAR_SIZES.md,shape:A="circle",color:v="primary",status:o,statusLabel:q,statusSize:S,fallbackDelay:d,onLoadingStatusChange:j,className:b,ref:g,...x})=>{const y=!!t;return e.jsxs(n,{ref:g,size:r,shape:A,color:v,className:b,...x,children:[y&&e.jsx(c,{src:t,alt:l,onLoadingStatusChange:j}),e.jsx(s,{initials:u,icon:m,size:r,delay:d}),o&&e.jsx(i,{status:o,size:S??r,label:q})]})});a.displayName="Avatar";a.Root=n;a.Image=c;a.Fallback=s;a.Status=i;exports.Avatar=a;
 //# sourceMappingURL=Avatar.cjs.map

package/dist/components/data-display/avatar/components/avatar-fallback/AvatarFallback.cjs

@@ -1,2 +1,2 @@
-"use strict";require('../../../../../ui-kit6.css');require('../../../../../ui-kit14.css');require('../../../../../ui-kit13.css');require('../../../../../ui-kit12.css');require('../../../../../ui-kit4.css');require('../../../../../ui-kit10.css');require('../../../../../ui-kit11.css');require('../../../../../ui-kit8.css');require('../../../../../ui-kit3.css');require('../../../../../ui-kit7.css');require('../../../../../ui-kit9.css');require('../../../../../ui-kit5.css');const e=require("react/jsx-runtime"),q=require("@base-ui/react/avatar"),l=require("./styles/AvatarFallback.css.cjs"),i=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const A=require("../../../../foundation/typography/Typography.cjs");require("../../../../foundation/typography/styles/Typography.css.cjs");const p=require("../../../../../utils/cn.cjs"),T=require("react"),_=require("./constants/sizeToTypography.const.cjs");;/* 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 d=require("../../../../../constants/icons.cjs"),s=T.memo(({initials:r,icon:a,size:c="md",delay:t,className:u,...n})=>{const o=r?e.jsx(A,{as:"span",variant:"span","aria-hidden":"true",fontSize:_.AVATAR_SIZE_TO_TYPOGRAPHY_SIZE[c],children:r.slice(0,2).toUpperCase()}):a?e.jsx(i,{icon:a}):e.jsx(i,{icon:d.IconRegistry.user});return e.jsx(q.Avatar.Fallback,{className:p.cn(l.AVATAR_FALLBACK_STYLES.recipe(),u),delay:t,...n,children:o})});s.displayName="Avatar.Fallback";module.exports=s;
+"use strict";const e=require("react/jsx-runtime"),l=require("@base-ui/react/avatar"),A=require("./styles/AvatarFallback.css.cjs"),s=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const p=require("../../../../foundation/typography/Typography.cjs");require("../../../../foundation/typography/styles/Typography.css.cjs");const q=require("../../../../../utils/cn.cjs"),T=require("react"),_=require("./constants/sizeToTypography.const.cjs"),d=require("../../../../../resources/asset/UserIcon.svg.cjs"),c=T.memo(({initials:r,icon:a,size:t="md",delay:n,className:o,...i})=>{const u=r?e.jsx(p,{as:"span",variant:"span","aria-hidden":"true",fontSize:_.AVATAR_SIZE_TO_TYPOGRAPHY_SIZE[t],children:r.slice(0,2).toUpperCase()}):a?e.jsx(s,{icon:a}):e.jsx(s,{icon:d});return e.jsx(l.Avatar.Fallback,{className:q.cn(A.AVATAR_FALLBACK_STYLES.recipe(),o),delay:n,...i,children:u})});c.displayName="Avatar.Fallback";module.exports=c;
 //# sourceMappingURL=AvatarFallback.cjs.map

package/dist/components/data-display/avatar/components/avatar-fallback/AvatarFallback.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFallback.cjs","sources":["../../../../../../src/components/data-display/avatar/components/avatar-fallback/AvatarFallback.tsx"],"sourcesContent":["import { Avatar as BaseAvatar } from '@base-ui/react/avatar'\r\n\r\nimport { AVATAR_FALLBACK_STYLES } from '@components/data-display/avatar/components/avatar-fallback/styles/AvatarFallback.css.ts'\r\nimport type { AvatarFallbackProps } from '@components/data-display/avatar/components/avatar-fallback/types/AvatarFallback.props.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\nimport {\r\n    AVATAR_SIZE_TO_TYPOGRAPHY_SIZE\r\n} from '@components/data-display/avatar/components/avatar-fallback/constants/sizeToTypography.const.ts'\r\nimport { IconRegistry } from '@constants'\r\n\r\n/**\r\n * Fallback content slot for `Avatar.Root`. Renders initials (up to 2\r\n * characters), a custom `icon`, or a default user icon when the image\r\n * fails to load or no `src` is provided.\r\n */\r\nconst AvatarFallback: FC<AvatarFallbackProps> = memo(({\r\n    initials,\r\n    icon,\r\n    size = 'md',\r\n    delay,\r\n    className,\r\n    ...props\r\n}) => {\r\n    const fallbackContent = initials ? (\r\n        <Typography\r\n            as={'span'}\r\n            variant={'span'}\r\n            aria-hidden={'true'}\r\n            fontSize={AVATAR_SIZE_TO_TYPOGRAPHY_SIZE[size]}\r\n        >\r\n            {initials.slice(0, 2).toUpperCase()}\r\n        </Typography>\r\n    ) : icon ? (\r\n        <Icon icon={icon} />\r\n    ) : (\r\n        <Icon icon={IconRegistry.user} />\r\n    )\r\n\r\n    return (\r\n        <BaseAvatar.Fallback\r\n            className={cn(AVATAR_FALLBACK_STYLES.recipe(), className)}\r\n            delay={delay}\r\n            {...props}\r\n        >\r\n            {fallbackContent}\r\n        </BaseAvatar.Fallback>\r\n    )\r\n})\r\n\r\nAvatarFallback.displayName = 'Avatar.Fallback'\r\n\r\nexport default AvatarFallback\r\n"],"names":["AvatarFallback","memo","initials","icon","size","delay","className","props","fallbackContent","jsx","Typography","AVATAR_SIZE_TO_TYPOGRAPHY_SIZE","Icon","IconRegistry","BaseAvatar","cn","AVATAR_FALLBACK_STYLES"],"mappings":"ikDAkBMA,EAA0CC,EAAAA,KAAK,CAAC,CAClD,SAAAC,EACA,KAAAC,EACA,KAAAC,EAAO,KACP,MAAAC,EACA,UAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAkBN,EACpBO,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,cAAa,OACb,SAAUC,EAAAA,+BAA+BP,CAAI,EAE5C,SAAAF,EAAS,MAAM,EAAG,CAAC,EAAE,YAAA,CAAY,CAAA,EAEtCC,EACAM,EAAAA,IAACG,EAAA,CAAK,KAAAT,CAAA,CAAY,EAElBM,EAAAA,IAACG,EAAA,CAAK,KAAMC,EAAAA,aAAa,IAAA,CAAM,EAGnC,OACIJ,EAAAA,IAACK,EAAAA,OAAW,SAAX,CACG,UAAWC,EAAAA,GAAGC,EAAAA,uBAAuB,OAAA,EAAUV,CAAS,EACxD,MAAAD,EACC,GAAGE,EAEH,SAAAC,CAAA,CAAA,CAGb,CAAC,EAEDR,EAAe,YAAc"}
+{"version":3,"file":"AvatarFallback.cjs","sources":["../../../../../../src/components/data-display/avatar/components/avatar-fallback/AvatarFallback.tsx"],"sourcesContent":["import { Avatar as BaseAvatar } from '@base-ui/react/avatar'\r\n\r\nimport { AVATAR_FALLBACK_STYLES } from '@components/data-display/avatar/components/avatar-fallback/styles/AvatarFallback.css.ts'\r\nimport type { AvatarFallbackProps } from '@components/data-display/avatar/components/avatar-fallback/types/AvatarFallback.props.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\nimport {\r\n    AVATAR_SIZE_TO_TYPOGRAPHY_SIZE\r\n} from '@components/data-display/avatar/components/avatar-fallback/constants/sizeToTypography.const.ts'\r\nimport UserIcon from '@resources/asset/UserIcon.svg?react'\r\n\r\n/**\r\n * Fallback content slot for `Avatar.Root`. Renders initials (up to 2\r\n * characters), a custom `icon`, or a default user icon when the image\r\n * fails to load or no `src` is provided.\r\n */\r\nconst AvatarFallback: FC<AvatarFallbackProps> = memo(({\r\n    initials,\r\n    icon,\r\n    size = 'md',\r\n    delay,\r\n    className,\r\n    ...props\r\n}) => {\r\n    const fallbackContent = initials ? (\r\n        <Typography\r\n            as={'span'}\r\n            variant={'span'}\r\n            aria-hidden={'true'}\r\n            fontSize={AVATAR_SIZE_TO_TYPOGRAPHY_SIZE[size]}\r\n        >\r\n            {initials.slice(0, 2).toUpperCase()}\r\n        </Typography>\r\n    ) : icon ? (\r\n        <Icon icon={icon} />\r\n    ) : (\r\n        <Icon icon={UserIcon} />\r\n    )\r\n\r\n    return (\r\n        <BaseAvatar.Fallback\r\n            className={cn(AVATAR_FALLBACK_STYLES.recipe(), className)}\r\n            delay={delay}\r\n            {...props}\r\n        >\r\n            {fallbackContent}\r\n        </BaseAvatar.Fallback>\r\n    )\r\n})\r\n\r\nAvatarFallback.displayName = 'Avatar.Fallback'\r\n\r\nexport default AvatarFallback\r\n"],"names":["AvatarFallback","memo","initials","icon","size","delay","className","props","fallbackContent","jsx","Typography","AVATAR_SIZE_TO_TYPOGRAPHY_SIZE","Icon","UserIcon","BaseAvatar","cn","AVATAR_FALLBACK_STYLES"],"mappings":"6iBAkBMA,EAA0CC,EAAAA,KAAK,CAAC,CAClD,SAAAC,EACA,KAAAC,EACA,KAAAC,EAAO,KACP,MAAAC,EACA,UAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAkBN,EACpBO,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,cAAa,OACb,SAAUC,EAAAA,+BAA+BP,CAAI,EAE5C,SAAAF,EAAS,MAAM,EAAG,CAAC,EAAE,YAAA,CAAY,CAAA,EAEtCC,EACAM,EAAAA,IAACG,EAAA,CAAK,KAAAT,EAAY,EAElBM,EAAAA,IAACG,EAAA,CAAK,KAAMC,CAAA,CAAU,EAG1B,OACIJ,EAAAA,IAACK,EAAAA,OAAW,SAAX,CACG,UAAWC,EAAAA,GAAGC,EAAAA,uBAAuB,OAAA,EAAUV,CAAS,EACxD,MAAAD,EACC,GAAGE,EAEH,SAAAC,CAAA,CAAA,CAGb,CAAC,EAEDR,EAAe,YAAc"}

package/dist/components/data-display/avatar/components/avatar-fallback/AvatarFallback.js

@@ -1,56 +1,44 @@
 import { jsx as r } from "react/jsx-runtime";
 import { Avatar as n } from "@base-ui/react/avatar";
 import { AVATAR_FALLBACK_STYLES as l } from "./styles/AvatarFallback.css.js";
-import t from "../../../../foundation/icon/Icon.js";
+import m from "../../../../foundation/icon/Icon.js";
 import "../../../../foundation/icon/styles/Icon.css.js";
-import s from "../../../../foundation/typography/Typography.js";
+import f from "../../../../foundation/typography/Typography.js";
 import "../../../../foundation/typography/styles/Typography.css.js";
-import { cn as f } from "../../../../../utils/cn.js";
+import { cn as s } from "../../../../../utils/cn.js";
 import { memo as A } from "react";
 import { AVATAR_SIZE_TO_TYPOGRAPHY_SIZE as d } from "./constants/sizeToTypography.const.js";
-import '../../../../../ui-kit6.css';import '../../../../../ui-kit14.css';import '../../../../../ui-kit13.css';import '../../../../../ui-kit12.css';import '../../../../../ui-kit4.css';import '../../../../../ui-kit10.css';import '../../../../../ui-kit11.css';import '../../../../../ui-kit8.css';import '../../../../../ui-kit3.css';import '../../../../../ui-kit7.css';import '../../../../../ui-kit9.css';import '../../../../../ui-kit5.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                                                                        */
-import { IconRegistry as T } from "../../../../../constants/icons.js";
-const _ = A(({
+import S from "../../../../../resources/asset/UserIcon.svg.js";
+const T = A(({
   initials: o,
-  icon: m,
-  size: p = "md",
-  delay: i,
-  className: a,
-  ...e
+  icon: a,
+  size: t = "md",
+  delay: p,
+  className: e,
+  ...i
 }) => {
   const c = o ? /* @__PURE__ */ r(
-    s,
+    f,
     {
       as: "span",
       variant: "span",
       "aria-hidden": "true",
-      fontSize: d[p],
+      fontSize: d[t],
       children: o.slice(0, 2).toUpperCase()
     }
-  ) : m ? /* @__PURE__ */ r(t, { icon: m }) : /* @__PURE__ */ r(t, { icon: T.user });
+  ) : a ? /* @__PURE__ */ r(m, { icon: a }) : /* @__PURE__ */ r(m, { icon: S });
   return /* @__PURE__ */ r(
     n.Fallback,
     {
-      className: f(l.recipe(), a),
-      delay: i,
-      ...e,
+      className: s(l.recipe(), e),
+      delay: p,
+      ...i,
       children: c
     }
   );
 });
-_.displayName = "Avatar.Fallback";
+T.displayName = "Avatar.Fallback";
 export {
-  _ as default
+  T as default
 };
 //# sourceMappingURL=AvatarFallback.js.map

package/dist/components/data-display/avatar/components/avatar-fallback/AvatarFallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarFallback.js","sources":["../../../../../../src/components/data-display/avatar/components/avatar-fallback/AvatarFallback.tsx"],"sourcesContent":["import { Avatar as BaseAvatar } from '@base-ui/react/avatar'\r\n\r\nimport { AVATAR_FALLBACK_STYLES } from '@components/data-display/avatar/components/avatar-fallback/styles/AvatarFallback.css.ts'\r\nimport type { AvatarFallbackProps } from '@components/data-display/avatar/components/avatar-fallback/types/AvatarFallback.props.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\nimport {\r\n    AVATAR_SIZE_TO_TYPOGRAPHY_SIZE\r\n} from '@components/data-display/avatar/components/avatar-fallback/constants/sizeToTypography.const.ts'\r\nimport { IconRegistry } from '@constants'\r\n\r\n/**\r\n * Fallback content slot for `Avatar.Root`. Renders initials (up to 2\r\n * characters), a custom `icon`, or a default user icon when the image\r\n * fails to load or no `src` is provided.\r\n */\r\nconst AvatarFallback: FC<AvatarFallbackProps> = memo(({\r\n    initials,\r\n    icon,\r\n    size = 'md',\r\n    delay,\r\n    className,\r\n    ...props\r\n}) => {\r\n    const fallbackContent = initials ? (\r\n        <Typography\r\n            as={'span'}\r\n            variant={'span'}\r\n            aria-hidden={'true'}\r\n            fontSize={AVATAR_SIZE_TO_TYPOGRAPHY_SIZE[size]}\r\n        >\r\n            {initials.slice(0, 2).toUpperCase()}\r\n        </Typography>\r\n    ) : icon ? (\r\n        <Icon icon={icon} />\r\n    ) : (\r\n        <Icon icon={IconRegistry.user} />\r\n    )\r\n\r\n    return (\r\n        <BaseAvatar.Fallback\r\n            className={cn(AVATAR_FALLBACK_STYLES.recipe(), className)}\r\n            delay={delay}\r\n            {...props}\r\n        >\r\n            {fallbackContent}\r\n        </BaseAvatar.Fallback>\r\n    )\r\n})\r\n\r\nAvatarFallback.displayName = 'Avatar.Fallback'\r\n\r\nexport default AvatarFallback\r\n"],"names":["AvatarFallback","memo","initials","icon","size","delay","className","props","fallbackContent","jsx","Typography","AVATAR_SIZE_TO_TYPOGRAPHY_SIZE","Icon","IconRegistry","BaseAvatar","cn","AVATAR_FALLBACK_STYLES"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAMA,IAA0CC,EAAK,CAAC;AAAA,EAClD,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAkBN,IACpB,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,eAAa;AAAA,MACb,UAAUC,EAA+BP,CAAI;AAAA,MAE5C,UAAAF,EAAS,MAAM,GAAG,CAAC,EAAE,YAAA;AAAA,IAAY;AAAA,EAAA,IAEtCC,IACA,gBAAAM,EAACG,GAAA,EAAK,MAAAT,EAAA,CAAY,IAElB,gBAAAM,EAACG,GAAA,EAAK,MAAMC,EAAa,KAAA,CAAM;AAGnC,SACI,gBAAAJ;AAAA,IAACK,EAAW;AAAA,IAAX;AAAA,MACG,WAAWC,EAAGC,EAAuB,OAAA,GAAUV,CAAS;AAAA,MACxD,OAAAD;AAAA,MACC,GAAGE;AAAA,MAEH,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAEDR,EAAe,cAAc;"}
+{"version":3,"file":"AvatarFallback.js","sources":["../../../../../../src/components/data-display/avatar/components/avatar-fallback/AvatarFallback.tsx"],"sourcesContent":["import { Avatar as BaseAvatar } from '@base-ui/react/avatar'\r\n\r\nimport { AVATAR_FALLBACK_STYLES } from '@components/data-display/avatar/components/avatar-fallback/styles/AvatarFallback.css.ts'\r\nimport type { AvatarFallbackProps } from '@components/data-display/avatar/components/avatar-fallback/types/AvatarFallback.props.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\nimport {\r\n    AVATAR_SIZE_TO_TYPOGRAPHY_SIZE\r\n} from '@components/data-display/avatar/components/avatar-fallback/constants/sizeToTypography.const.ts'\r\nimport UserIcon from '@resources/asset/UserIcon.svg?react'\r\n\r\n/**\r\n * Fallback content slot for `Avatar.Root`. Renders initials (up to 2\r\n * characters), a custom `icon`, or a default user icon when the image\r\n * fails to load or no `src` is provided.\r\n */\r\nconst AvatarFallback: FC<AvatarFallbackProps> = memo(({\r\n    initials,\r\n    icon,\r\n    size = 'md',\r\n    delay,\r\n    className,\r\n    ...props\r\n}) => {\r\n    const fallbackContent = initials ? (\r\n        <Typography\r\n            as={'span'}\r\n            variant={'span'}\r\n            aria-hidden={'true'}\r\n            fontSize={AVATAR_SIZE_TO_TYPOGRAPHY_SIZE[size]}\r\n        >\r\n            {initials.slice(0, 2).toUpperCase()}\r\n        </Typography>\r\n    ) : icon ? (\r\n        <Icon icon={icon} />\r\n    ) : (\r\n        <Icon icon={UserIcon} />\r\n    )\r\n\r\n    return (\r\n        <BaseAvatar.Fallback\r\n            className={cn(AVATAR_FALLBACK_STYLES.recipe(), className)}\r\n            delay={delay}\r\n            {...props}\r\n        >\r\n            {fallbackContent}\r\n        </BaseAvatar.Fallback>\r\n    )\r\n})\r\n\r\nAvatarFallback.displayName = 'Avatar.Fallback'\r\n\r\nexport default AvatarFallback\r\n"],"names":["AvatarFallback","memo","initials","icon","size","delay","className","props","fallbackContent","jsx","Typography","AVATAR_SIZE_TO_TYPOGRAPHY_SIZE","Icon","UserIcon","BaseAvatar","cn","AVATAR_FALLBACK_STYLES"],"mappings":";;;;;;;;;;;AAkBA,MAAMA,IAA0CC,EAAK,CAAC;AAAA,EAClD,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAkBN,IACpB,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,eAAa;AAAA,MACb,UAAUC,EAA+BP,CAAI;AAAA,MAE5C,UAAAF,EAAS,MAAM,GAAG,CAAC,EAAE,YAAA;AAAA,IAAY;AAAA,EAAA,IAEtCC,IACA,gBAAAM,EAACG,GAAA,EAAK,MAAAT,GAAY,IAElB,gBAAAM,EAACG,GAAA,EAAK,MAAMC,EAAA,CAAU;AAG1B,SACI,gBAAAJ;AAAA,IAACK,EAAW;AAAA,IAAX;AAAA,MACG,WAAWC,EAAGC,EAAuB,OAAA,GAAUV,CAAS;AAAA,MACxD,OAAAD;AAAA,MACC,GAAGE;AAAA,MAEH,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGb,CAAC;AAEDR,EAAe,cAAc;"}

package/dist/components/data-display/avatar/components/avatar-fallback/styles/AvatarFallback.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit74.css');;/* empty css                                    */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:e.createRuntimeFn({defaultClassName:"_13eayvd0",variantClassNames:{},defaultVariants:{},compoundVariants:[]})};exports.AVATAR_FALLBACK_STYLES=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit41.css');;/* empty css                                    */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:e.createRuntimeFn({defaultClassName:"_13eayvd0",variantClassNames:{},defaultVariants:{},compoundVariants:[]})};exports.AVATAR_FALLBACK_STYLES=a;
 //# sourceMappingURL=AvatarFallback.css.cjs.map

package/dist/components/data-display/avatar/components/avatar-fallback/styles/AvatarFallback.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit74.css';/* empty css                                  */
+import '../../../../../../ui-kit41.css';/* empty css                                  */
 import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
 var t = { recipe: a({ defaultClassName: "_13eayvd0", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] }) };
 export {

package/dist/components/data-display/avatar/components/avatar-fallback/types/AvatarFallback.props.d.ts

@@ -1,11 +1,12 @@
 import { Avatar } from '@base-ui/react/avatar';
 import { HTMLAttributes } from 'react';
 import { AvatarSize } from '../../../types/Avatar.types.ts';
+import { IconComponent } from '../../../../../foundation/icon';
 export type AvatarFallbackProps = HTMLAttributes<HTMLSpanElement> & {
     /** Initials displayed when the image fails to load or is omitted. */
     initials?: string;
     /** Iconify icon name displayed as a fallback when no initials are provided. */
-    icon?: string;
+    icon?: IconComponent;
     /** Size variant used to scale the fallback text. */
     size?: AvatarSize;
     /** Delay in milliseconds before showing the fallback. */

package/dist/components/data-display/avatar/components/avatar-image/styles/AvatarImage.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit87.css');;/* empty css                                 */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:e.createRuntimeFn({defaultClassName:"_1if4j8q0",variantClassNames:{},defaultVariants:{},compoundVariants:[]})};exports.AVATAR_IMAGE_STYLES=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit43.css');;/* empty css                                 */const e=require("@vanilla-extract/recipes/createRuntimeFn");var a={recipe:e.createRuntimeFn({defaultClassName:"_1if4j8q0",variantClassNames:{},defaultVariants:{},compoundVariants:[]})};exports.AVATAR_IMAGE_STYLES=a;
 //# sourceMappingURL=AvatarImage.css.cjs.map

package/dist/components/data-display/avatar/components/avatar-image/styles/AvatarImage.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit87.css';/* empty css                               */
+import '../../../../../../ui-kit43.css';/* empty css                               */
 import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
 var t = { recipe: a({ defaultClassName: "_1if4j8q0", variantClassNames: {}, defaultVariants: {}, compoundVariants: [] }) };
 export {

package/dist/components/data-display/avatar/components/avatar-root/styles/AvatarRoot.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit100.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                */const r=require("@vanilla-extract/recipes/createRuntimeFn");var e={recipe:r.createRuntimeFn({defaultClassName:"d3r51n0",variantClassNames:{size:{sm:"d3r51n1",md:"d3r51n2",lg:"d3r51n3",xl:"d3r51n4"},shape:{circle:"d3r51n5",square:"d3r51n6"},color:{primary:"d3r51n7",secondary:"d3r51n8",tertiary:"d3r51n9",destructive:"d3r51na",success:"d3r51nb",warning:"d3r51nc",info:"d3r51nd",purple:"d3r51ne",pink:"d3r51nf",orange:"d3r51ng",teal:"d3r51nh",cyan:"d3r51ni",indigo:"d3r51nj"}},defaultVariants:{size:"md",shape:"circle",color:"primary"},compoundVariants:[]})};exports.AVATAR_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit44.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                */const r=require("@vanilla-extract/recipes/createRuntimeFn");var e={recipe:r.createRuntimeFn({defaultClassName:"d3r51n0",variantClassNames:{size:{sm:"d3r51n1",md:"d3r51n2",lg:"d3r51n3",xl:"d3r51n4"},shape:{circle:"d3r51n5",square:"d3r51n6"},color:{primary:"d3r51n7",secondary:"d3r51n8",tertiary:"d3r51n9",destructive:"d3r51na",success:"d3r51nb",warning:"d3r51nc",info:"d3r51nd",purple:"d3r51ne",pink:"d3r51nf",orange:"d3r51ng",teal:"d3r51nh",cyan:"d3r51ni",indigo:"d3r51nj"}},defaultVariants:{size:"md",shape:"circle",color:"primary"},compoundVariants:[]})};exports.AVATAR_STYLES=e;
 //# sourceMappingURL=AvatarRoot.css.cjs.map

package/dist/components/data-display/avatar/components/avatar-root/styles/AvatarRoot.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit100.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit44.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                              */
 import { createRuntimeFn as r } from "@vanilla-extract/recipes/createRuntimeFn";
 var e = { recipe: r({ defaultClassName: "d3r51n0", variantClassNames: { size: { sm: "d3r51n1", md: "d3r51n2", lg: "d3r51n3", xl: "d3r51n4" }, shape: { circle: "d3r51n5", square: "d3r51n6" }, color: { primary: "d3r51n7", secondary: "d3r51n8", tertiary: "d3r51n9", destructive: "d3r51na", success: "d3r51nb", warning: "d3r51nc", info: "d3r51nd", purple: "d3r51ne", pink: "d3r51nf", orange: "d3r51ng", teal: "d3r51nh", cyan: "d3r51ni", indigo: "d3r51nj" } }, defaultVariants: { size: "md", shape: "circle", color: "primary" }, compoundVariants: [] }) };

package/dist/components/data-display/avatar/components/avatar-status/AvatarStatus.cjs

@@ -1,2 +1,2 @@
-"use strict";const n=require("react/jsx-runtime"),i=require("../../constants/avatarStatus.const.cjs"),o=require("./styles/AvatarStatus.css.cjs"),u=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const A=require("../../../../../utils/cn.cjs"),S=require("react"),t=S.memo(({status:e=i.AVATAR_STATUS.online,size:r,label:s,className:a,...c})=>n.jsx(u,{as:"span",className:A.cn(o.AVATAR_STATUS_STYLES.recipe({size:r,status:e}),a),"aria-label":s??e,role:"status",...c}));t.displayName="Avatar.Status";module.exports=t;
+"use strict";const n=require("react/jsx-runtime"),i=require("../../constants/avatarStatus.const.cjs"),o=require("./styles/AvatarStatus.css.cjs"),u=require("../../../../layout/box/Box.cjs");require("../../../../layout/box/styles/Box.css.cjs");const A=require("../../../../../utils/cn.cjs"),S=require("react"),t=S.memo(({status:e=i.AVATAR_STATUS.online,size:s,label:a,className:r,...c})=>n.jsx(u,{as:"span",className:A.cn(o.AVATAR_STATUS_STYLES.recipe({size:s,status:e}),r),"aria-label":a??e,role:"status",...c}));t.displayName="Avatar.Status";module.exports=t;
 //# sourceMappingURL=AvatarStatus.cjs.map

package/dist/components/data-display/avatar/components/avatar-status/styles/AvatarStatus.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit99.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                  */const e=require("@vanilla-extract/recipes/createRuntimeFn");var n={recipe:e.createRuntimeFn({defaultClassName:"_1n12kyw0",variantClassNames:{size:{sm:"_1n12kyw1",md:"_1n12kyw2",lg:"_1n12kyw3",xl:"_1n12kyw4"},status:{online:"_1n12kyw5",offline:"_1n12kyw6",busy:"_1n12kyw7",away:"_1n12kyw8"}},defaultVariants:{size:"md",status:"online"},compoundVariants:[]})};exports.AVATAR_STATUS_STYLES=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../../ui-kit45.css');require('../../../../../../ui-kit.css');;/* empty css                                                    */;/* empty css                                  */const e=require("@vanilla-extract/recipes/createRuntimeFn");var n={recipe:e.createRuntimeFn({defaultClassName:"_1n12kyw0",variantClassNames:{size:{sm:"_1n12kyw1",md:"_1n12kyw2",lg:"_1n12kyw3",xl:"_1n12kyw4"},status:{online:"_1n12kyw5",offline:"_1n12kyw6",busy:"_1n12kyw7",away:"_1n12kyw8"}},defaultVariants:{size:"md",status:"online"},compoundVariants:[]})};exports.AVATAR_STATUS_STYLES=n;
 //# sourceMappingURL=AvatarStatus.css.cjs.map

package/dist/components/data-display/avatar/components/avatar-status/styles/AvatarStatus.css.js

@@ -1,4 +1,4 @@
-import '../../../../../../ui-kit99.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
+import '../../../../../../ui-kit45.css';import '../../../../../../ui-kit.css';/* empty css                                                  */
 /* empty css                                */
 import { createRuntimeFn as n } from "@vanilla-extract/recipes/createRuntimeFn";
 var t = { recipe: n({ defaultClassName: "_1n12kyw0", variantClassNames: { size: { sm: "_1n12kyw1", md: "_1n12kyw2", lg: "_1n12kyw3", xl: "_1n12kyw4" }, status: { online: "_1n12kyw5", offline: "_1n12kyw6", busy: "_1n12kyw7", away: "_1n12kyw8" } }, defaultVariants: { size: "md", status: "online" }, compoundVariants: [] }) };