@choco-vanille/ui 1.2.0 → 1.3.0

package/README.md

@@ -38,14 +38,14 @@ import '@choco-vanille/ui/styles.css';
 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>
     </>
   );
 }
@@ -56,14 +56,14 @@ export function Example() {
 | 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/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/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"});;/* 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                                            */
 /* 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

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupItem.js","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":";;;;;;;;;;;AAYA,MAAMA,IAA4C,CAAC;AAAA,EAC/C,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,EAAgB,cAAc;"}
+{"version":3,"file":"ToggleGroupItem.js","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":";;;;;;;;;;;AAYA,MAAMA,IAA4C,CAAC;AAAA,EAC/C,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,EAAgB,cAAc;"}

package/dist/components/actions/toggle-group/components/toggle-group-item/types/ToggleGroupItem.props.d.ts

@@ -4,6 +4,7 @@ import type * as React from 'react';
 export type ToggleGroupItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> & ToggleContent & {
     value: string;
     variant?: ToggleVariant;
+    subtle?: boolean;
     color?: ToggleColor;
     size?: ToggleSize;
     radius?: ToggleRadius;

package/dist/components/data-display/_shared/utils/extractText.utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=r=>typeof r=="string"||typeof r=="number"?String(r):Array.isArray(r)?r.map(t).join(""):e.isValidElement(r)?t(r.props.children):"";exports.extractTextFromReactNode=t;
+//# sourceMappingURL=extractText.utils.cjs.map

package/dist/components/data-display/_shared/utils/extractText.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractText.utils.cjs","sources":["../../../../../src/components/data-display/_shared/utils/extractText.utils.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from 'react'\r\n\r\nexport const extractTextFromReactNode = (value: ReactNode): string => {\r\n    if (typeof value === 'string' || typeof value === 'number') {\r\n        return String(value)\r\n    }\r\n\r\n    if (Array.isArray(value)) {\r\n        return value.map(extractTextFromReactNode).join('')\r\n    }\r\n\r\n    if (isValidElement<{ children?: ReactNode }>(value)) {\r\n        return extractTextFromReactNode(value.props.children)\r\n    }\r\n\r\n    return ''\r\n}\r\n"],"names":["extractTextFromReactNode","value","isValidElement"],"mappings":"yGAEaA,EAA4BC,GACjC,OAAOA,GAAU,UAAY,OAAOA,GAAU,SACvC,OAAOA,CAAK,EAGnB,MAAM,QAAQA,CAAK,EACZA,EAAM,IAAID,CAAwB,EAAE,KAAK,EAAE,EAGlDE,EAAAA,eAAyCD,CAAK,EACvCD,EAAyBC,EAAM,MAAM,QAAQ,EAGjD"}

package/dist/components/data-display/_shared/utils/extractText.utils.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const extractTextFromReactNode: (value: ReactNode) => string;

package/dist/components/data-display/_shared/utils/extractText.utils.js

@@ -0,0 +1,6 @@
+import { isValidElement as i } from "react";
+const t = (r) => typeof r == "string" || typeof r == "number" ? String(r) : Array.isArray(r) ? r.map(t).join("") : i(r) ? t(r.props.children) : "";
+export {
+  t as extractTextFromReactNode
+};
+//# sourceMappingURL=extractText.utils.js.map

package/dist/components/data-display/_shared/utils/extractText.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extractText.utils.js","sources":["../../../../../src/components/data-display/_shared/utils/extractText.utils.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from 'react'\r\n\r\nexport const extractTextFromReactNode = (value: ReactNode): string => {\r\n    if (typeof value === 'string' || typeof value === 'number') {\r\n        return String(value)\r\n    }\r\n\r\n    if (Array.isArray(value)) {\r\n        return value.map(extractTextFromReactNode).join('')\r\n    }\r\n\r\n    if (isValidElement<{ children?: ReactNode }>(value)) {\r\n        return extractTextFromReactNode(value.props.children)\r\n    }\r\n\r\n    return ''\r\n}\r\n"],"names":["extractTextFromReactNode","value","isValidElement"],"mappings":";AAEO,MAAMA,IAA2B,CAACC,MACjC,OAAOA,KAAU,YAAY,OAAOA,KAAU,WACvC,OAAOA,CAAK,IAGnB,MAAM,QAAQA,CAAK,IACZA,EAAM,IAAID,CAAwB,EAAE,KAAK,EAAE,IAGlDE,EAAyCD,CAAK,IACvCD,EAAyBC,EAAM,MAAM,QAAQ,IAGjD;"}

package/dist/components/data-display/badge/constants/badgeVariants.const.d.ts

@@ -4,4 +4,4 @@ export declare const BADGE_VARIANTS: {
     readonly outlined: "outlined";
     readonly outlinedSubtle: "outlinedSubtle";
 };
-export declare const BADGE_VARIANTS_ARRAY: ("contained" | "subtle" | "outlined" | "outlinedSubtle")[];
+export declare const BADGE_VARIANTS_ARRAY: ("contained" | "outlined" | "subtle" | "outlinedSubtle")[];

package/dist/components/data-display/index.d.ts

@@ -1,4 +1,5 @@
 export * from './avatar';
 export * from './avatar-group';
 export * from './badge';
+export * from './rich-text-renderer';
 export * from './table';

package/dist/components/data-display/markdown-renderer/constants/markdownAllowedElements.const.d.ts

@@ -0,0 +1 @@
+export declare const MARKDOWN_ALLOWED_ELEMENTS: readonly ["a", "blockquote", "br", "code", "del", "em", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "li", "ol", "p", "pre", "strong", "table", "tbody", "td", "th", "thead", "tr", "ul"];

package/dist/components/data-display/rich-text-renderer/RichTextRenderer.cjs

@@ -0,0 +1,2 @@
+"use strict";const n=require("react/jsx-runtime"),i=require("react"),o=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const R=require("../../../utils/cn.cjs"),u=require("./styles/RichTextRenderer.css.cjs"),d=require("./utils/renderRichTextNodes.utils.cjs"),e=i.memo(({value:r,className:c,ref:s,...t})=>n.jsx(o,{ref:s,className:R.cn(u.RICH_TEXT_RENDERER_STYLES,c),...t,children:d.renderRichTextNodes(r.content)}));e.displayName="RichTextRenderer";module.exports=e;
+//# sourceMappingURL=RichTextRenderer.cjs.map

package/dist/components/data-display/rich-text-renderer/RichTextRenderer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextRenderer.cjs","sources":["../../../../src/components/data-display/rich-text-renderer/RichTextRenderer.tsx"],"sourcesContent":["import { memo } from 'react'\r\n\r\nimport { Box } from '@components/layout/box'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { RICH_TEXT_RENDERER_STYLES } from '@components/data-display/rich-text-renderer/styles/RichTextRenderer.css.ts'\r\nimport type { RichTextRendererProps } from '@components/data-display/rich-text-renderer/types'\r\nimport { renderRichTextNodes } from '@components/data-display/rich-text-renderer/utils/renderRichTextNodes.utils.tsx'\r\n\r\nconst RichTextRenderer = memo<RichTextRendererProps>(({\r\n    value,\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => (\r\n    <Box\r\n        ref={ref}\r\n        className={cn(RICH_TEXT_RENDERER_STYLES, className)}\r\n        {...props}\r\n    >\r\n        {renderRichTextNodes(value.content)}\r\n    </Box>\r\n))\r\n\r\nRichTextRenderer.displayName = 'RichTextRenderer'\r\n\r\nexport default RichTextRenderer\r\n"],"names":["RichTextRenderer","memo","value","className","ref","props","jsx","Box","cn","RICH_TEXT_RENDERER_STYLES","renderRichTextNodes"],"mappings":"qSAQMA,EAAmBC,EAAAA,KAA4B,CAAC,CAClD,MAAAC,EACA,UAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IACIC,EAAAA,IAACC,EAAA,CACG,IAAAH,EACA,UAAWI,EAAAA,GAAGC,EAAAA,0BAA2BN,CAAS,EACjD,GAAGE,EAEH,SAAAK,EAAAA,oBAAoBR,EAAM,OAAO,CAAA,CACtC,CACH,EAEDF,EAAiB,YAAc"}