@choco-vanille/ui 1.2.0 → 1.3.1-dev.1

package/README.md

@@ -29,41 +29,38 @@ yarn add @choco-vanille/ui react react-dom
 pnpm add @choco-vanille/ui react react-dom
 ```
 
-Import the stylesheet once (e.g. in your root layout/entry):
-
-```ts
-import '@choco-vanille/ui/styles.css';
-```
-
-Then use components:
+The package entry automatically loads its stylesheet. Then use components:
 
 ```tsx
-import { Text } from '@choco-vanille/ui';
+import { Typography } from '@choco-vanille/ui';
 
 export function Example() {
   return (
     <>
-      <Text variant="h1">Hello world</Text>
-      <Text variant="muted">A typographic primitive.</Text>
-      <Text variant="code">@choco-vanille/ui</Text>
+      <Typography variant="h1">Hello world</Typography>
+      <Typography variant="muted">A typographic primitive.</Typography>
+      <Typography variant="code">@choco-vanille/ui</Typography>
     </>
   );
 }
 ```
 
+For integrations that require explicit CSS loading, the stylesheet remains
+available at `@choco-vanille/ui/styles.css`.
+
 ## Components
 
 | Category | Components |
 |---|---|
 | **Foundation** | `Icon`, `Typography` |
-| **Layout** | `Box`, `Flex`, `Grid`, `Image`, `Separator`, `Form`, `Fieldset`, `Legend` |
+| **Layout** | `Box`, `Flex`, `Grid`, `Inset`, `Image`, `Separator`, `Form`, `Fieldset`, `Legend` |
 | **Actions** | `Button`, `IconButton`, `Toggle`, `ToggleGroup` |
-| **Forms** | `Autocomplete`, `Calendar`, `Checkbox`, `DatePicker`, `RadioGroup`, `Select`, `Switch`, `TextArea`, `TextField` |
-| **Data Display** | `Avatar`, `AvatarGroup`, `Badge`, `Table` |
+| **Forms** | `Autocomplete`, `Calendar`, `Checkbox`, `CheckboxGroup`, `DatePicker`, `RadioGroup`, `RichTextEditor`, `Select`, `Slider`, `Switch`, `TextArea`, `TextField`, `NumberField` |
+| **Data Display** | `Avatar`, `AvatarGroup`, `Badge`, `RichTextRenderer`, `Table` |
 | **Surfaces** | `Accordion`, `Card`, `Collapsible` |
-| **Navigation** | `Tabs`, `Link` |
-| **Overlay** | `Tooltip`, `DropdownMenu`, `Popover`, `HoverCard`, `Dialog`, `Drawer` |
-| **Feedback** | `Skeleton`, `Callout`, `Toast`, `Progress` |
+| **Navigation** | `Tabs`, `Link`, `Pagination`, `Breadcrumbs`, `Stepper`, `StepIndicator` |
+| **Overlay** | `Tooltip`, `DropdownMenu`, `ContextMenu`, `Popover`, `HoverCard`, `Dialog`, `AlertDialog`, `Drawer`, `Panel`, `Command` |
+| **Feedback** | `Skeleton`, `Callout`, `Toast`, `Progress`, `EmptyState`, `Spinner` |
 | **Theme** | `ThemeProvider`, `useTheme` |
 
 ## Theming

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                                     */var e={chevron:"_1oghhzs0"};exports.ROTATING_CHEVRON_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit124.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 @@
-/* empty css                                            */
+import '../../../../ui-kit124.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"});;/* empty css                                                 */;/* empty css                                  */var e={icon:"_7owzgg0"};exports.BUTTON_SHARED_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../../ui-kit46.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 @@
-/* empty css                                               */
+import '../../../../../ui-kit46.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"});;/* 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-kit51.css');require('../../../../ui-kit46.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 @@
-/* empty css                                            */
+import '../../../../ui-kit51.css';import '../../../../ui-kit46.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                                                           */
 /* empty css                          */
 import { createRuntimeFn as r } from "@vanilla-extract/recipes/createRuntimeFn";

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

@@ -1,2 +1,2 @@
-"use strict";const t=require("react/jsx-runtime"),N=require("./styles/IconButton.css.cjs"),T=require("../_shared/buttons/styles/buttonShared.css.cjs"),a=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const O=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,active:u,ref:_,...S})=>{const I=n.ICON_BUTTON_SIZE_TO_ICON_SIZE[e];return t.jsx("button",{ref:_,"data-active":u?"true":void 0,className:O.cn(N.ICON_BUTTON_STYLES.recipe({variant:s,color:o,size:e}),r),...S,children:t.jsx(a,{icon:i,size:I,className:T.BUTTON_SHARED_STYLES.icon})})};c.displayName="IconButton";module.exports=c;
+"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;
 //# 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\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    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            data-active={active ? 'true' : undefined}\r\n            className={cn(ICON_BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\r\n        >\r\n            <Icon\r\n                icon={icon}\r\n                size={iconSize}\r\n                className={BUTTON_SHARED_STYLES.icon}\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","active","ref","props","iconSize","ICON_BUTTON_SIZE_TO_ICON_SIZE","jsx","cn","ICON_BUTTON_STYLES","Icon","BUTTON_SHARED_STYLES"],"mappings":"oVAQMA,EAAkC,CAAC,CACrC,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAOC,EAAAA,kBAAkB,GACzB,UAAAC,EACA,KAAAC,EACA,OAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,8BAA8BR,CAAI,EAEnD,OACIS,EAAAA,IAAC,SAAA,CACG,IAAAJ,EACA,cAAaD,EAAS,OAAS,OAC/B,UAAWM,EAAAA,GAAGC,EAAAA,mBAAmB,OAAO,CAAE,QAAAb,EAAS,MAAAC,EAAO,KAAAC,EAAM,EAAGE,CAAS,EAC3E,GAAGI,EAEJ,SAAAG,EAAAA,IAACG,EAAA,CACG,KAAAT,EACA,KAAMI,EACN,UAAWM,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAGZ,EAEAhB,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\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":"oVAQMA,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"}

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

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

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\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    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            data-active={active ? 'true' : undefined}\r\n            className={cn(ICON_BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\r\n        >\r\n            <Icon\r\n                icon={icon}\r\n                size={iconSize}\r\n                className={BUTTON_SHARED_STYLES.icon}\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","active","ref","props","iconSize","ICON_BUTTON_SIZE_TO_ICON_SIZE","jsx","cn","ICON_BUTTON_STYLES","Icon","BUTTON_SHARED_STYLES"],"mappings":";;;;;;;AAQA,MAAMA,IAAkC,CAAC;AAAA,EACrC,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAOC,EAAkB;AAAA,EACzB,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAA8BR,CAAI;AAEnD,SACI,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAJ;AAAA,MACA,eAAaD,IAAS,SAAS;AAAA,MAC/B,WAAWM,EAAGC,EAAmB,OAAO,EAAE,SAAAb,GAAS,OAAAC,GAAO,MAAAC,GAAM,GAAGE,CAAS;AAAA,MAC3E,GAAGI;AAAA,MAEJ,UAAA,gBAAAG;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAAT;AAAA,UACA,MAAMI;AAAA,UACN,WAAWM,EAAqB;AAAA,QAAA;AAAA,MAAA;AAAA,IACpC;AAAA,EAAA;AAGZ;AAEAhB,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\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":";;;;;;;AAQA,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;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* 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-kit47.css');require('../../../../ui-kit46.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 @@
-/* empty css                                            */
+import '../../../../ui-kit47.css';import '../../../../ui-kit46.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,14 +1,20 @@
 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'> & {
+export type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label' | 'color'> & ({
+    /** Iconify icon name rendered inside the button. */
+    icon: string;
+    children?: never;
+} | {
+    icon?: never;
+    /** Custom icon content rendered inside the button. */
+    children: React.ReactNode;
+}) & {
     variant?: IconButtonVariant;
     color?: IconButtonColor;
     /** Button size. Defaults to `md`. */
     size?: IconButtonSize;
     /** Ref forwarded to the underlying `<button>` element. */
     ref?: React.Ref<HTMLButtonElement>;
-    /** Iconify icon name rendered inside the button. */
-    icon: string;
     /** Accessible label for the button (used as aria-label). */
     'aria-label': string;
     /** Whether the button is in an active/pressed state, e.g. when it triggers an open menu. */

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

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),m=require("@base-ui/react/toggle"),n=require("../_shared/buttons/styles/buttonShared.css.cjs"),d=require("../_shared/buttons/constants/index.cjs"),r=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const x=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const N=require("./constants/toggleSizes.const.cjs"),j=require("./styles/Toggle.css.cjs"),O=require("../../../utils/cn.cjs"),T=({variant:S,color:u,size:s="md",radius:a,className:g,label:l,icon:i,startIcon:c,endIcon:t,ref:_,...q})=>{const o=d.buttonSizeToIconSize[s],E=N.TOGGLE_SIZE_TO_FONT_SIZE[s];return e.jsx(m.Toggle,{ref:_,"data-icon-only":i?"":void 0,className:O.cn(j.TOGGLE_STYLES.recipe({variant:S,color:u,size:s,radius:a}),g),...q,children:i?e.jsx(r,{icon:i,size:o,className:n.BUTTON_SHARED_STYLES.icon}):e.jsxs(e.Fragment,{children:[c&&e.jsx(r,{icon:c,size:o,className:n.BUTTON_SHARED_STYLES.icon}),e.jsx(x,{as:"span",fontSize:E,fontWeight:"medium",children:l}),t&&e.jsx(r,{icon:t,size:o,className:n.BUTTON_SHARED_STYLES.icon})]})})};T.displayName="Toggle";module.exports=T;
+"use strict";const e=require("react/jsx-runtime"),d=require("@base-ui/react/toggle"),n=require("../_shared/buttons/styles/buttonShared.css.cjs"),x=require("../_shared/buttons/constants/index.cjs"),r=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const N=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const j=require("./constants/toggleSizes.const.cjs"),O=require("./styles/Toggle.css.cjs"),h=require("../../../utils/cn.cjs"),T=({variant:S,subtle:u,color:a,size:s="md",radius:g,className:l,label:_,icon:i,startIcon:c,endIcon:t,ref:q,...E})=>{const o=x.buttonSizeToIconSize[s],m=j.TOGGLE_SIZE_TO_FONT_SIZE[s];return e.jsx(d.Toggle,{ref:q,"data-icon-only":i?"":void 0,className:h.cn(O.TOGGLE_STYLES.recipe({variant:S,color:a,size:s,radius:g,subtle:u}),l),...E,children:i?e.jsx(r,{icon:i,size:o,className:n.BUTTON_SHARED_STYLES.icon}):e.jsxs(e.Fragment,{children:[c&&e.jsx(r,{icon:c,size:o,className:n.BUTTON_SHARED_STYLES.icon}),e.jsx(N,{as:"span",fontSize:m,fontWeight:"medium",children:_}),t&&e.jsx(r,{icon:t,size:o,className:n.BUTTON_SHARED_STYLES.icon})]})})};T.displayName="Toggle";module.exports=T;
 //# sourceMappingURL=Toggle.cjs.map

package/dist/components/actions/toggle/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","sources":["../../../../src/components/actions/toggle/Toggle.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { buttonSizeToIconSize } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { TOGGLE_SIZE_TO_FONT_SIZE } from '@components/actions/toggle/constants/toggleSizes.const.ts'\r\nimport { TOGGLE_STYLES } from '@components/actions/toggle/styles/Toggle.css.ts'\r\nimport type { ToggleProps } from '@components/actions/toggle/types/Toggle.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst Toggle: FC<ToggleProps> = ({\r\n    variant,\r\n    color,\r\n    size = 'md',\r\n    radius,\r\n    className,\r\n    label,\r\n    icon,\r\n    startIcon,\r\n    endIcon,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const fontSize = TOGGLE_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            data-icon-only={icon ? '' : undefined}\r\n            className={cn(TOGGLE_STYLES.recipe({ variant, color, size, radius }), className)}\r\n            {...props}\r\n        >\r\n            {icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : (\r\n                <>\r\n                    {startIcon && (\r\n                        <Icon\r\n                            icon={startIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                    <Typography\r\n                        as={'span'}\r\n                        fontSize={fontSize}\r\n                        fontWeight={'medium'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\r\n                    {endIcon && (\r\n                        <Icon\r\n                            icon={endIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                </>\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggle.displayName = 'Toggle'\r\n\r\nexport default Toggle\r\n"],"names":["Toggle","variant","color","size","radius","className","label","icon","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":"kiBAYMA,EAA0B,CAAC,CAC7B,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,qBAAqBV,CAAI,EACpCW,EAAWC,EAAAA,yBAAyBZ,CAAI,EAE9C,OACIa,EAAAA,IAACC,EAAAA,OAAA,CACG,IAAAP,EACA,iBAAgBH,EAAO,GAAK,OAC5B,UAAWW,EAAAA,GAAGC,gBAAc,OAAO,CAAE,QAAAlB,EAAS,MAAAC,EAAO,KAAAC,EAAM,OAAAC,EAAQ,EAAGC,CAAS,EAC9E,GAAGM,EAEH,SAAAJ,EACGS,EAAAA,IAACI,EAAA,CACG,KAAAb,EACA,KAAMK,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGpCC,EAAAA,KAAAC,WAAA,CACK,SAAA,CAAAf,GACGQ,EAAAA,IAACI,EAAA,CACG,KAAMZ,EACN,KAAMI,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGxCL,EAAAA,IAACQ,EAAA,CACG,GAAI,OACJ,SAAAV,EACA,WAAY,SAEX,SAAAR,CAAA,CAAA,EAEJG,GACGO,EAAAA,IAACI,EAAA,CACG,KAAMX,EACN,KAAMG,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAER,CAAA,CAAA,CAIhB,EAEArB,EAAO,YAAc"}
+{"version":3,"file":"Toggle.cjs","sources":["../../../../src/components/actions/toggle/Toggle.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { buttonSizeToIconSize } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { TOGGLE_SIZE_TO_FONT_SIZE } from '@components/actions/toggle/constants/toggleSizes.const.ts'\r\nimport { TOGGLE_STYLES } from '@components/actions/toggle/styles/Toggle.css.ts'\r\nimport type { ToggleProps } from '@components/actions/toggle/types/Toggle.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst Toggle: FC<ToggleProps> = ({\r\n    variant,\r\n    subtle,\r\n    color,\r\n    size = 'md',\r\n    radius,\r\n    className,\r\n    label,\r\n    icon,\r\n    startIcon,\r\n    endIcon,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const fontSize = TOGGLE_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            data-icon-only={icon ? '' : undefined}\r\n            className={cn(TOGGLE_STYLES.recipe({ variant, color, size, radius, subtle }), className)}\r\n            {...props}\r\n        >\r\n            {icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : (\r\n                <>\r\n                    {startIcon && (\r\n                        <Icon\r\n                            icon={startIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                    <Typography\r\n                        as={'span'}\r\n                        fontSize={fontSize}\r\n                        fontWeight={'medium'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\r\n                    {endIcon && (\r\n                        <Icon\r\n                            icon={endIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                </>\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggle.displayName = 'Toggle'\r\n\r\nexport default Toggle\r\n"],"names":["Toggle","variant","subtle","color","size","radius","className","label","icon","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":"kiBAYMA,EAA0B,CAAC,CAC7B,QAAAC,EACA,OAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,qBAAqBV,CAAI,EACpCW,EAAWC,EAAAA,yBAAyBZ,CAAI,EAE9C,OACIa,EAAAA,IAACC,EAAAA,OAAA,CACG,IAAAP,EACA,iBAAgBH,EAAO,GAAK,OAC5B,UAAWW,EAAAA,GAAGC,gBAAc,OAAO,CAAE,QAAAnB,EAAS,MAAAE,EAAO,KAAAC,EAAM,OAAAC,EAAQ,OAAAH,CAAA,CAAQ,EAAGI,CAAS,EACtF,GAAGM,EAEH,SAAAJ,EACGS,EAAAA,IAACI,EAAA,CACG,KAAAb,EACA,KAAMK,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGpCC,EAAAA,KAAAC,WAAA,CACK,SAAA,CAAAf,GACGQ,EAAAA,IAACI,EAAA,CACG,KAAMZ,EACN,KAAMI,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGxCL,EAAAA,IAACQ,EAAA,CACG,GAAI,OACJ,SAAAV,EACA,WAAY,SAEX,SAAAR,CAAA,CAAA,EAEJG,GACGO,EAAAA,IAACI,EAAA,CACG,KAAMX,EACN,KAAMG,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAER,CAAA,CAAA,CAIhB,EAEAtB,EAAO,YAAc"}

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

@@ -1,35 +1,36 @@
-import { jsx as o, jsxs as d, Fragment as E } from "react/jsx-runtime";
-import { Toggle as N } from "@base-ui/react/toggle";
+import { jsx as o, jsxs as E, Fragment as N } from "react/jsx-runtime";
+import { Toggle as _ } from "@base-ui/react/toggle";
 import { BUTTON_SHARED_STYLES as e } from "../_shared/buttons/styles/buttonShared.css.js";
-import { buttonSizeToIconSize as _ } from "../_shared/buttons/constants/index.js";
+import { buttonSizeToIconSize as h } from "../_shared/buttons/constants/index.js";
 import t from "../../foundation/icon/Icon.js";
 import "../../foundation/icon/styles/Icon.css.js";
-import h from "../../foundation/typography/Typography.js";
+import z from "../../foundation/typography/Typography.js";
 import "../../foundation/typography/styles/Typography.css.js";
-import { TOGGLE_SIZE_TO_FONT_SIZE as z } from "./constants/toggleSizes.const.js";
-import { TOGGLE_STYLES as O } from "./styles/Toggle.css.js";
-import { cn as u } from "../../../utils/cn.js";
-const y = ({
+import { TOGGLE_SIZE_TO_FONT_SIZE as O } from "./constants/toggleSizes.const.js";
+import { TOGGLE_STYLES as u } from "./styles/Toggle.css.js";
+import { cn as y } from "../../../utils/cn.js";
+const G = ({
   variant: n,
-  color: c,
+  subtle: c,
+  color: p,
   size: i = "md",
-  radius: p,
-  className: l,
-  label: T,
+  radius: l,
+  className: T,
+  label: f,
   icon: m,
   startIcon: s,
   endIcon: a,
-  ref: f,
-  ...g
+  ref: g,
+  ...S
 }) => {
-  const r = _[i], S = z[i];
+  const r = h[i], d = O[i];
   return /* @__PURE__ */ o(
-    N,
+    _,
     {
-      ref: f,
+      ref: g,
       "data-icon-only": m ? "" : void 0,
-      className: u(O.recipe({ variant: n, color: c, size: i, radius: p }), l),
-      ...g,
+      className: y(u.recipe({ variant: n, color: p, size: i, radius: l, subtle: c }), T),
+      ...S,
       children: m ? /* @__PURE__ */ o(
         t,
         {
@@ -37,7 +38,7 @@ const y = ({
           size: r,
           className: e.icon
         }
-      ) : /* @__PURE__ */ d(E, { children: [
+      ) : /* @__PURE__ */ E(N, { children: [
         s && /* @__PURE__ */ o(
           t,
           {
@@ -47,12 +48,12 @@ const y = ({
           }
         ),
         /* @__PURE__ */ o(
-          h,
+          z,
           {
             as: "span",
-            fontSize: S,
+            fontSize: d,
             fontWeight: "medium",
-            children: T
+            children: f
           }
         ),
         a && /* @__PURE__ */ o(
@@ -67,8 +68,8 @@ const y = ({
     }
   );
 };
-y.displayName = "Toggle";
+G.displayName = "Toggle";
 export {
-  y as default
+  G as default
 };
 //# sourceMappingURL=Toggle.js.map

package/dist/components/actions/toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","sources":["../../../../src/components/actions/toggle/Toggle.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { buttonSizeToIconSize } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { TOGGLE_SIZE_TO_FONT_SIZE } from '@components/actions/toggle/constants/toggleSizes.const.ts'\r\nimport { TOGGLE_STYLES } from '@components/actions/toggle/styles/Toggle.css.ts'\r\nimport type { ToggleProps } from '@components/actions/toggle/types/Toggle.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst Toggle: FC<ToggleProps> = ({\r\n    variant,\r\n    color,\r\n    size = 'md',\r\n    radius,\r\n    className,\r\n    label,\r\n    icon,\r\n    startIcon,\r\n    endIcon,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const fontSize = TOGGLE_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            data-icon-only={icon ? '' : undefined}\r\n            className={cn(TOGGLE_STYLES.recipe({ variant, color, size, radius }), className)}\r\n            {...props}\r\n        >\r\n            {icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : (\r\n                <>\r\n                    {startIcon && (\r\n                        <Icon\r\n                            icon={startIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                    <Typography\r\n                        as={'span'}\r\n                        fontSize={fontSize}\r\n                        fontWeight={'medium'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\r\n                    {endIcon && (\r\n                        <Icon\r\n                            icon={endIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                </>\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggle.displayName = 'Toggle'\r\n\r\nexport default Toggle\r\n"],"names":["Toggle","variant","color","size","radius","className","label","icon","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":";;;;;;;;;;;AAYA,MAAMA,IAA0B,CAAC;AAAA,EAC7B,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAAqBV,CAAI,GACpCW,IAAWC,EAAyBZ,CAAI;AAE9C,SACI,gBAAAa;AAAA,IAACC;AAAAA,IAAA;AAAA,MACG,KAAAP;AAAA,MACA,kBAAgBH,IAAO,KAAK;AAAA,MAC5B,WAAWW,EAAGC,EAAc,OAAO,EAAE,SAAAlB,GAAS,OAAAC,GAAO,MAAAC,GAAM,QAAAC,GAAQ,GAAGC,CAAS;AAAA,MAC9E,GAAGM;AAAA,MAEH,UAAAJ,IACG,gBAAAS;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,MAAAb;AAAA,UACA,MAAMK;AAAA,UACN,WAAWS,EAAqB;AAAA,QAAA;AAAA,MAAA,IAGpC,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAf,KACG,gBAAAQ;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,MAAMZ;AAAA,YACN,MAAMI;AAAA,YACN,WAAWS,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxC,gBAAAL;AAAA,UAACQ;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,UAAAV;AAAA,YACA,YAAY;AAAA,YAEX,UAAAR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJG,KACG,gBAAAO;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,MAAMX;AAAA,YACN,MAAMG;AAAA,YACN,WAAWS,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC,EAAA,CAER;AAAA,IAAA;AAAA,EAAA;AAIhB;AAEArB,EAAO,cAAc;"}
+{"version":3,"file":"Toggle.js","sources":["../../../../src/components/actions/toggle/Toggle.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { buttonSizeToIconSize } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { TOGGLE_SIZE_TO_FONT_SIZE } from '@components/actions/toggle/constants/toggleSizes.const.ts'\r\nimport { TOGGLE_STYLES } from '@components/actions/toggle/styles/Toggle.css.ts'\r\nimport type { ToggleProps } from '@components/actions/toggle/types/Toggle.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst Toggle: FC<ToggleProps> = ({\r\n    variant,\r\n    subtle,\r\n    color,\r\n    size = 'md',\r\n    radius,\r\n    className,\r\n    label,\r\n    icon,\r\n    startIcon,\r\n    endIcon,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const fontSize = TOGGLE_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            data-icon-only={icon ? '' : undefined}\r\n            className={cn(TOGGLE_STYLES.recipe({ variant, color, size, radius, subtle }), className)}\r\n            {...props}\r\n        >\r\n            {icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : (\r\n                <>\r\n                    {startIcon && (\r\n                        <Icon\r\n                            icon={startIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                    <Typography\r\n                        as={'span'}\r\n                        fontSize={fontSize}\r\n                        fontWeight={'medium'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\r\n                    {endIcon && (\r\n                        <Icon\r\n                            icon={endIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                </>\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggle.displayName = 'Toggle'\r\n\r\nexport default Toggle\r\n"],"names":["Toggle","variant","subtle","color","size","radius","className","label","icon","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":";;;;;;;;;;;AAYA,MAAMA,IAA0B,CAAC;AAAA,EAC7B,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAAqBV,CAAI,GACpCW,IAAWC,EAAyBZ,CAAI;AAE9C,SACI,gBAAAa;AAAA,IAACC;AAAAA,IAAA;AAAA,MACG,KAAAP;AAAA,MACA,kBAAgBH,IAAO,KAAK;AAAA,MAC5B,WAAWW,EAAGC,EAAc,OAAO,EAAE,SAAAnB,GAAS,OAAAE,GAAO,MAAAC,GAAM,QAAAC,GAAQ,QAAAH,EAAA,CAAQ,GAAGI,CAAS;AAAA,MACtF,GAAGM;AAAA,MAEH,UAAAJ,IACG,gBAAAS;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,MAAAb;AAAA,UACA,MAAMK;AAAA,UACN,WAAWS,EAAqB;AAAA,QAAA;AAAA,MAAA,IAGpC,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,QAAAf,KACG,gBAAAQ;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,MAAMZ;AAAA,YACN,MAAMI;AAAA,YACN,WAAWS,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxC,gBAAAL;AAAA,UAACQ;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,UAAAV;AAAA,YACA,YAAY;AAAA,YAEX,UAAAR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJG,KACG,gBAAAO;AAAA,UAACI;AAAA,UAAA;AAAA,YACG,MAAMX;AAAA,YACN,MAAMG;AAAA,YACN,WAAWS,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC,EAAA,CAER;AAAA,IAAA;AAAA,EAAA;AAIhB;AAEAtB,EAAO,cAAc;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                                                             */;/* empty css                            */const a=require("@vanilla-extract/recipes/createRuntimeFn");var i={recipe:a.createRuntimeFn({defaultClassName:"_1lqapti0",variantClassNames:{variant:{outlined:"_1lqapti1",ghost:"_1lqapti2"},color:{primary:"_1lqapti3",secondary:"_1lqapti4",tertiary:"_1lqapti5",destructive:"_1lqapti6",success:"_1lqapti7",warning:"_1lqapti8",info:"_1lqapti9"},size:{sm:"_1lqaptia",md:"_1lqaptib",lg:"_1lqaptic"},radius:{none:"_1lqaptid",xs:"_1lqaptie",sm:"_1lqaptif",md:"_1lqaptig",lg:"_1lqaptih",xl:"_1lqaptii","2xl":"_1lqaptij",full:"_1lqaptik"}},defaultVariants:{variant:"outlined",color:"primary",size:"md",radius:"sm"},compoundVariants:[]})};exports.TOGGLE_STYLES=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit69.css');require('../../../../ui-kit46.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.d.ts

@@ -9,6 +9,12 @@ export declare const TOGGLE_STYLES: {
                 borderColor: "transparent";
             };
         };
+        subtle: {
+            true: {
+                backgroundColor: "transparent";
+            };
+            false: {};
+        };
         color: {
             primary: {
                 color: `var(--${string})`;

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

@@ -1,9 +1,9 @@
-/* empty css                                            */
+import '../../../../ui-kit69.css';import '../../../../ui-kit46.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                                                           */
 /* empty css                          */
-import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
-var r = { recipe: a({ defaultClassName: "_1lqapti0", variantClassNames: { variant: { outlined: "_1lqapti1", ghost: "_1lqapti2" }, color: { primary: "_1lqapti3", secondary: "_1lqapti4", tertiary: "_1lqapti5", destructive: "_1lqapti6", success: "_1lqapti7", warning: "_1lqapti8", info: "_1lqapti9" }, size: { sm: "_1lqaptia", md: "_1lqaptib", lg: "_1lqaptic" }, radius: { none: "_1lqaptid", xs: "_1lqaptie", sm: "_1lqaptif", md: "_1lqaptig", lg: "_1lqaptih", xl: "_1lqaptii", "2xl": "_1lqaptij", full: "_1lqaptik" } }, defaultVariants: { variant: "outlined", color: "primary", size: "md", radius: "sm" }, compoundVariants: [] }) };
+import { createRuntimeFn as t } from "@vanilla-extract/recipes/createRuntimeFn";
+var e = { recipe: t({ 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"]] }) };
 export {
-  r as TOGGLE_STYLES
+  e as TOGGLE_STYLES
 };
 //# sourceMappingURL=Toggle.css.js.map

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

@@ -3,6 +3,8 @@ import { ToggleColor, ToggleContent, ToggleRadius, ToggleSize, ToggleVariant } f
 import type * as React from 'react';
 export type ToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> & ToggleContent & {
     variant?: ToggleVariant;
+    /** Uses the low-emphasis appearance for the selected variant. */
+    subtle?: boolean;
     color?: ToggleColor;
     /** Toggle size. Defaults to `md`. */
     size?: ToggleSize;

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),E=require("@base-ui/react/toggle"),i=require("../../../_shared/buttons/styles/buttonShared.css.cjs"),d=require("../../../_shared/buttons/constants/index.cjs"),n=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const x=require("../../../../foundation/typography/Typography.cjs");require("../../../../foundation/typography/styles/Typography.css.cjs");const N=require("../../../toggle/constants/toggleSizes.const.cjs"),p=require("../../../toggle/styles/Toggle.css.cjs"),j=require("../../../../../utils/cn.cjs"),T=({variant:u,color:S,size:s="md",radius:a,className:g,label:l,icon:o,startIcon:c,endIcon:t,ref:_,...m})=>{const r=d.buttonSizeToIconSize[s],q=N.TOGGLE_SIZE_TO_FONT_SIZE[s];return e.jsx(E.Toggle,{ref:_,"data-icon-only":o?"":void 0,className:j.cn(p.TOGGLE_STYLES.recipe({variant:u,color:S,size:s,radius:a}),g),...m,children:o?e.jsx(n,{icon:o,size:r,className:i.BUTTON_SHARED_STYLES.icon}):e.jsxs(e.Fragment,{children:[c&&e.jsx(n,{icon:c,size:r,className:i.BUTTON_SHARED_STYLES.icon}),e.jsx(x,{as:"span",fontSize:q,fontWeight:"medium",children:l}),t&&e.jsx(n,{icon:t,size:r,className:i.BUTTON_SHARED_STYLES.icon})]})})};T.displayName="ToggleGroup.Item";module.exports=T;
+"use strict";const e=require("react/jsx-runtime"),d=require("@base-ui/react/toggle"),i=require("../../../_shared/buttons/styles/buttonShared.css.cjs"),x=require("../../../_shared/buttons/constants/index.cjs"),n=require("../../../../foundation/icon/Icon.cjs");require("../../../../foundation/icon/styles/Icon.css.cjs");const N=require("../../../../foundation/typography/Typography.cjs");require("../../../../foundation/typography/styles/Typography.css.cjs");const p=require("../../../toggle/constants/toggleSizes.const.cjs"),j=require("../../../toggle/styles/Toggle.css.cjs"),O=require("../../../../../utils/cn.cjs"),T=({variant:u,subtle:S,color:a,size:s="md",radius:g,className:l,label:_,icon:o,startIcon:c,endIcon:t,ref:m,...q})=>{const r=x.buttonSizeToIconSize[s],E=p.TOGGLE_SIZE_TO_FONT_SIZE[s];return e.jsx(d.Toggle,{ref:m,"data-icon-only":o?"":void 0,className:O.cn(j.TOGGLE_STYLES.recipe({variant:u,color:a,size:s,radius:g,subtle:S}),l),...q,children:o?e.jsx(n,{icon:o,size:r,className:i.BUTTON_SHARED_STYLES.icon}):e.jsxs(e.Fragment,{children:[c&&e.jsx(n,{icon:c,size:r,className:i.BUTTON_SHARED_STYLES.icon}),e.jsx(N,{as:"span",fontSize:E,fontWeight:"medium",children:_}),t&&e.jsx(n,{icon:t,size:r,className:i.BUTTON_SHARED_STYLES.icon})]})})};T.displayName="ToggleGroup.Item";module.exports=T;
 //# sourceMappingURL=ToggleGroupItem.cjs.map

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.cjs","sources":["../../../../../../src/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { buttonSizeToIconSize } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { TOGGLE_SIZE_TO_FONT_SIZE } from '@components/actions/toggle/constants/toggleSizes.const.ts'\r\nimport { TOGGLE_STYLES } from '@components/actions/toggle/styles/Toggle.css.ts'\r\nimport type { ToggleGroupItemProps } from '@components/actions/toggle-group/components/toggle-group-item/types/ToggleGroupItem.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst ToggleGroupItem: FC<ToggleGroupItemProps> = ({\r\n    variant,\r\n    color,\r\n    size = 'md',\r\n    radius,\r\n    className,\r\n    label,\r\n    icon,\r\n    startIcon,\r\n    endIcon,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const fontSize = TOGGLE_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            data-icon-only={icon ? '' : undefined}\r\n            className={cn(TOGGLE_STYLES.recipe({ variant, color, size, radius }), className)}\r\n            {...props}\r\n        >\r\n            {icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : (\r\n                <>\r\n                    {startIcon && (\r\n                        <Icon\r\n                            icon={startIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                    <Typography\r\n                        as={'span'}\r\n                        fontSize={fontSize}\r\n                        fontWeight={'medium'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\r\n                    {endIcon && (\r\n                        <Icon\r\n                            icon={endIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                </>\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggleGroupItem.displayName = 'ToggleGroup.Item'\r\n\r\nexport default ToggleGroupItem\r\n"],"names":["ToggleGroupItem","variant","color","size","radius","className","label","icon","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":"wmBAYMA,EAA4C,CAAC,CAC/C,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,qBAAqBV,CAAI,EACpCW,EAAWC,EAAAA,yBAAyBZ,CAAI,EAE9C,OACIa,EAAAA,IAACC,EAAAA,OAAA,CACG,IAAAP,EACA,iBAAgBH,EAAO,GAAK,OAC5B,UAAWW,EAAAA,GAAGC,gBAAc,OAAO,CAAE,QAAAlB,EAAS,MAAAC,EAAO,KAAAC,EAAM,OAAAC,EAAQ,EAAGC,CAAS,EAC9E,GAAGM,EAEH,SAAAJ,EACGS,EAAAA,IAACI,EAAA,CACG,KAAAb,EACA,KAAMK,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGpCC,EAAAA,KAAAC,WAAA,CACK,SAAA,CAAAf,GACGQ,EAAAA,IAACI,EAAA,CACG,KAAMZ,EACN,KAAMI,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGxCL,EAAAA,IAACQ,EAAA,CACG,GAAI,OACJ,SAAAV,EACA,WAAY,SAEX,SAAAR,CAAA,CAAA,EAEJG,GACGO,EAAAA,IAACI,EAAA,CACG,KAAMX,EACN,KAAMG,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAER,CAAA,CAAA,CAIhB,EAEArB,EAAgB,YAAc"}
+{"version":3,"file":"ToggleGroupItem.cjs","sources":["../../../../../../src/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.tsx"],"sourcesContent":["import { Toggle as BaseToggle } from '@base-ui/react/toggle'\r\n\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { buttonSizeToIconSize } from '@components/actions/_shared/buttons/constants'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { TOGGLE_SIZE_TO_FONT_SIZE } from '@components/actions/toggle/constants/toggleSizes.const.ts'\r\nimport { TOGGLE_STYLES } from '@components/actions/toggle/styles/Toggle.css.ts'\r\nimport type { ToggleGroupItemProps } from '@components/actions/toggle-group/components/toggle-group-item/types/ToggleGroupItem.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\n\r\nconst ToggleGroupItem: FC<ToggleGroupItemProps> = ({\r\n    variant,\r\n    subtle,\r\n    color,\r\n    size = 'md',\r\n    radius,\r\n    className,\r\n    label,\r\n    icon,\r\n    startIcon,\r\n    endIcon,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const fontSize = TOGGLE_SIZE_TO_FONT_SIZE[size]\r\n\r\n    return (\r\n        <BaseToggle\r\n            ref={ref}\r\n            data-icon-only={icon ? '' : undefined}\r\n            className={cn(TOGGLE_STYLES.recipe({ variant, color, size, radius, subtle }), className)}\r\n            {...props}\r\n        >\r\n            {icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : (\r\n                <>\r\n                    {startIcon && (\r\n                        <Icon\r\n                            icon={startIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                    <Typography\r\n                        as={'span'}\r\n                        fontSize={fontSize}\r\n                        fontWeight={'medium'}\r\n                    >\r\n                        {label}\r\n                    </Typography>\r\n                    {endIcon && (\r\n                        <Icon\r\n                            icon={endIcon}\r\n                            size={iconSize}\r\n                            className={BUTTON_SHARED_STYLES.icon}\r\n                        />\r\n                    )}\r\n                </>\r\n            )}\r\n        </BaseToggle>\r\n    )\r\n}\r\n\r\nToggleGroupItem.displayName = 'ToggleGroup.Item'\r\n\r\nexport default ToggleGroupItem\r\n"],"names":["ToggleGroupItem","variant","subtle","color","size","radius","className","label","icon","startIcon","endIcon","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":"wmBAYMA,EAA4C,CAAC,CAC/C,QAAAC,EACA,OAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,UAAAC,EACA,QAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,qBAAqBV,CAAI,EACpCW,EAAWC,EAAAA,yBAAyBZ,CAAI,EAE9C,OACIa,EAAAA,IAACC,EAAAA,OAAA,CACG,IAAAP,EACA,iBAAgBH,EAAO,GAAK,OAC5B,UAAWW,EAAAA,GAAGC,gBAAc,OAAO,CAAE,QAAAnB,EAAS,MAAAE,EAAO,KAAAC,EAAM,OAAAC,EAAQ,OAAAH,CAAA,CAAQ,EAAGI,CAAS,EACtF,GAAGM,EAEH,SAAAJ,EACGS,EAAAA,IAACI,EAAA,CACG,KAAAb,EACA,KAAMK,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGpCC,EAAAA,KAAAC,WAAA,CACK,SAAA,CAAAf,GACGQ,EAAAA,IAACI,EAAA,CACG,KAAMZ,EACN,KAAMI,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGxCL,EAAAA,IAACQ,EAAA,CACG,GAAI,OACJ,SAAAV,EACA,WAAY,SAEX,SAAAR,CAAA,CAAA,EAEJG,GACGO,EAAAA,IAACI,EAAA,CACG,KAAMX,EACN,KAAMG,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAER,CAAA,CAAA,CAIhB,EAEAtB,EAAgB,YAAc"}

package/dist/components/actions/toggle-group/components/toggle-group-item/ToggleGroupItem.js

@@ -1,35 +1,36 @@
-import { jsx as o, jsxs as d, Fragment as E } from "react/jsx-runtime";
-import { Toggle as N } from "@base-ui/react/toggle";
+import { jsx as o, jsxs as E, Fragment as N } from "react/jsx-runtime";
+import { Toggle as _ } from "@base-ui/react/toggle";
 import { BUTTON_SHARED_STYLES as e } from "../../../_shared/buttons/styles/buttonShared.css.js";
-import { buttonSizeToIconSize as _ } from "../../../_shared/buttons/constants/index.js";
+import { buttonSizeToIconSize as u } from "../../../_shared/buttons/constants/index.js";
 import t from "../../../../foundation/icon/Icon.js";
 import "../../../../foundation/icon/styles/Icon.css.js";
-import u from "../../../../foundation/typography/Typography.js";
+import G from "../../../../foundation/typography/Typography.js";
 import "../../../../foundation/typography/styles/Typography.css.js";
-import { TOGGLE_SIZE_TO_FONT_SIZE as G } from "../../../toggle/constants/toggleSizes.const.js";
-import { TOGGLE_STYLES as h } from "../../../toggle/styles/Toggle.css.js";
-import { cn as z } from "../../../../../utils/cn.js";
-const O = ({
+import { TOGGLE_SIZE_TO_FONT_SIZE as h } from "../../../toggle/constants/toggleSizes.const.js";
+import { TOGGLE_STYLES as z } from "../../../toggle/styles/Toggle.css.js";
+import { cn as O } from "../../../../../utils/cn.js";
+const y = ({
   variant: s,
-  color: a,
+  subtle: a,
+  color: c,
   size: m = "md",
-  radius: c,
-  className: l,
-  label: T,
+  radius: l,
+  className: T,
+  label: f,
   icon: r,
   startIcon: p,
   endIcon: n,
-  ref: f,
-  ...S
+  ref: S,
+  ...g
 }) => {
-  const i = _[m], g = G[m];
+  const i = u[m], d = h[m];
   return /* @__PURE__ */ o(
-    N,
+    _,
     {
-      ref: f,
+      ref: S,
       "data-icon-only": r ? "" : void 0,
-      className: z(h.recipe({ variant: s, color: a, size: m, radius: c }), l),
-      ...S,
+      className: O(z.recipe({ variant: s, color: c, size: m, radius: l, subtle: a }), T),
+      ...g,
       children: r ? /* @__PURE__ */ o(
         t,
         {
@@ -37,7 +38,7 @@ const O = ({
           size: i,
           className: e.icon
         }
-      ) : /* @__PURE__ */ d(E, { children: [
+      ) : /* @__PURE__ */ E(N, { children: [
         p && /* @__PURE__ */ o(
           t,
           {
@@ -47,12 +48,12 @@ const O = ({
           }
         ),
         /* @__PURE__ */ o(
-          u,
+          G,
           {
             as: "span",
-            fontSize: g,
+            fontSize: d,
             fontWeight: "medium",
-            children: T
+            children: f
           }
         ),
         n && /* @__PURE__ */ o(
@@ -67,8 +68,8 @@ const O = ({
     }
   );
 };
-O.displayName = "ToggleGroup.Item";
+y.displayName = "ToggleGroup.Item";
 export {
-  O as default
+  y as default
 };
 //# sourceMappingURL=ToggleGroupItem.js.map