@choco-vanille/ui 1.14.5 → 1.14.6

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

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

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

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

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

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

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

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

package/dist/components/actions/_shared/buttons/types/index.d.ts

@@ -1,3 +1,4 @@
+import { BoxProps } from '../../../../layout/box/types/Box.props.ts';
 import { BUTTON_COLORS, BUTTON_SIZES, BUTTON_VARIANTS } from '../constants';
 /** Visual style variants shared by Button and IconButton. */
 export type ButtonVariantShared = (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_VARIANTS];
@@ -5,3 +6,5 @@ export type ButtonVariantShared = (typeof BUTTON_VARIANTS)[keyof typeof BUTTON_V
 export type ButtonColorShared = (typeof BUTTON_COLORS)[keyof typeof BUTTON_COLORS];
 /** Size variants shared by Button and IconButton. */
 export type ButtonSizeShared = (typeof BUTTON_SIZES)[keyof typeof BUTTON_SIZES];
+/** Layout props shared by the action components that render a button. */
+export type ButtonLayoutProps = Pick<BoxProps, 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'width' | 'alignSelf'>;

package/dist/components/actions/_shared/buttons/utils/buttonLayout.utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../../../layout/box/styles/Box.css.cjs"),d=({marginTop:e,marginRight:t,marginBottom:o,marginLeft:s})=>{if(!(e===void 0&&t===void 0&&o===void 0&&s===void 0))return u.BOX_STYLES.recipe({marginTop:e,marginRight:t,marginBottom:o,marginLeft:s})};exports.getButtonLayoutClassName=d;
+//# sourceMappingURL=buttonLayout.utils.cjs.map

package/dist/components/actions/_shared/buttons/utils/buttonLayout.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonLayout.utils.cjs","sources":["../../../../../../src/components/actions/_shared/buttons/utils/buttonLayout.utils.ts"],"sourcesContent":["import { BOX_STYLES } from '@components/layout/box/styles/Box.css.ts'\r\nimport type { ButtonLayoutProps } from '@components/actions/_shared/buttons/types'\r\n\r\nexport const getButtonLayoutClassName = ({\r\n    marginTop,\r\n    marginRight,\r\n    marginBottom,\r\n    marginLeft,\r\n}: ButtonLayoutProps): string | undefined => {\r\n    if (\r\n        marginTop === undefined &&\r\n        marginRight === undefined &&\r\n        marginBottom === undefined &&\r\n        marginLeft === undefined\r\n    ) {\r\n        return undefined\r\n    }\r\n\r\n    return BOX_STYLES.recipe({ marginTop, marginRight, marginBottom, marginLeft })\r\n}\r\n"],"names":["getButtonLayoutClassName","marginTop","marginRight","marginBottom","marginLeft","BOX_STYLES"],"mappings":"6IAGaA,EAA2B,CAAC,CACrC,UAAAC,EACA,YAAAC,EACA,aAAAC,EACA,WAAAC,CACJ,IAA6C,CACzC,GACI,EAAAH,IAAc,QACdC,IAAgB,QAChBC,IAAiB,QACjBC,IAAe,QAKnB,OAAOC,EAAAA,WAAW,OAAO,CAAE,UAAAJ,EAAW,YAAAC,EAAa,aAAAC,EAAc,WAAAC,EAAY,CACjF"}

package/dist/components/actions/_shared/buttons/utils/buttonLayout.utils.d.ts

@@ -0,0 +1,2 @@
+import { ButtonLayoutProps } from '../types';
+export declare const getButtonLayoutClassName: ({ marginTop, marginRight, marginBottom, marginLeft, }: ButtonLayoutProps) => string | undefined;

package/dist/components/actions/_shared/buttons/utils/buttonLayout.utils.js

@@ -0,0 +1,14 @@
+import { BOX_STYLES as v } from "../../../../layout/box/styles/Box.css.js";
+const u = ({
+  marginTop: o,
+  marginRight: e,
+  marginBottom: d,
+  marginLeft: t
+}) => {
+  if (!(o === void 0 && e === void 0 && d === void 0 && t === void 0))
+    return v.recipe({ marginTop: o, marginRight: e, marginBottom: d, marginLeft: t });
+};
+export {
+  u as getButtonLayoutClassName
+};
+//# sourceMappingURL=buttonLayout.utils.js.map

package/dist/components/actions/_shared/buttons/utils/buttonLayout.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonLayout.utils.js","sources":["../../../../../../src/components/actions/_shared/buttons/utils/buttonLayout.utils.ts"],"sourcesContent":["import { BOX_STYLES } from '@components/layout/box/styles/Box.css.ts'\r\nimport type { ButtonLayoutProps } from '@components/actions/_shared/buttons/types'\r\n\r\nexport const getButtonLayoutClassName = ({\r\n    marginTop,\r\n    marginRight,\r\n    marginBottom,\r\n    marginLeft,\r\n}: ButtonLayoutProps): string | undefined => {\r\n    if (\r\n        marginTop === undefined &&\r\n        marginRight === undefined &&\r\n        marginBottom === undefined &&\r\n        marginLeft === undefined\r\n    ) {\r\n        return undefined\r\n    }\r\n\r\n    return BOX_STYLES.recipe({ marginTop, marginRight, marginBottom, marginLeft })\r\n}\r\n"],"names":["getButtonLayoutClassName","marginTop","marginRight","marginBottom","marginLeft","BOX_STYLES"],"mappings":";AAGO,MAAMA,IAA2B,CAAC;AAAA,EACrC,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AACJ,MAA6C;AACzC,MACI,EAAAH,MAAc,UACdC,MAAgB,UAChBC,MAAiB,UACjBC,MAAe;AAKnB,WAAOC,EAAW,OAAO,EAAE,WAAAJ,GAAW,aAAAC,GAAa,cAAAC,GAAc,YAAAC,GAAY;AACjF;"}

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

@@ -1,2 +1,2 @@
-"use strict";const e=require("react/jsx-runtime"),m=require("./styles/Button.css.cjs"),o=require("../_shared/buttons/styles/buttonShared.css.cjs"),c=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 B=require("../../../utils/cn.cjs"),E=require("../_shared/buttons/constants/index.cjs"),z=require("./constants/buttonSizes.const.cjs"),O=require("../_shared/buttons/constants/buttonSizes.const.cjs"),r=({variant:u,color:S,size:t=O.BUTTON_SIZES.md,className:T,label:a,startIcon:s,endIcon:n,active:_,ref:q,...N})=>{const i=E.buttonSizeToIconSize[t],d=z.BUTTON_SIZE_TO_FONT_SIZE[t];return e.jsxs("button",{ref:q,"data-active":_?"true":void 0,className:B.cn(m.BUTTON_STYLES.recipe({variant:u,color:S,size:t}),T),...N,children:[s&&e.jsx(c,{icon:s,size:i,className:o.BUTTON_SHARED_STYLES.icon}),e.jsx(x,{as:"span",fontSize:d,fontWeight:"medium",children:a}),n&&e.jsx(c,{icon:n,size:i,className:o.BUTTON_SHARED_STYLES.icon})]})};r.displayName="Button";module.exports=r;
+"use strict";const e=require("react/jsx-runtime"),b=require("./styles/Button.css.cjs"),i=require("../_shared/buttons/styles/buttonShared.css.cjs"),p=require("../_shared/buttons/utils/buttonLayout.utils.cjs"),r=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const y=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const h=require("../../../utils/cn.cjs"),j=require("../_shared/buttons/constants/index.cjs"),L=require("./constants/buttonSizes.const.cjs"),U=require("../_shared/buttons/constants/buttonSizes.const.cjs"),c=({variant:u,color:S,size:t=U.BUTTON_SIZES.md,className:a,label:T,startIcon:s,endIcon:n,active:_,marginTop:q,marginRight:N,marginBottom:l,marginLeft:m,width:B,alignSelf:d,style:x,ref:E,...z})=>{const o=j.buttonSizeToIconSize[t],O=L.BUTTON_SIZE_TO_FONT_SIZE[t];return e.jsxs("button",{ref:E,"data-active":_?"true":void 0,className:h.cn(b.BUTTON_STYLES.recipe({variant:u,color:S,size:t}),p.getButtonLayoutClassName({marginTop:q,marginRight:N,marginBottom:l,marginLeft:m}),a),style:{width:B,alignSelf:d,...x},...z,children:[s&&e.jsx(r,{icon:s,size:o,className:i.BUTTON_SHARED_STYLES.icon}),e.jsx(y,{as:"span",fontSize:O,fontWeight:"medium",children:T}),n&&e.jsx(r,{icon:n,size:o,className:i.BUTTON_SHARED_STYLES.icon})]})};c.displayName="Button";module.exports=c;
 //# sourceMappingURL=Button.cjs.map

package/dist/components/actions/button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","sources":["../../../../src/components/actions/button/Button.tsx"],"sourcesContent":["import { BUTTON_STYLES } from '@components/actions/button/styles/Button.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 { Typography } from '@components/foundation/typography'\r\nimport type { ButtonProps } from '@components/actions/button/types/Button.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\nimport { BUTTON_SIZE_TO_FONT_SIZE, buttonSizeToIconSize } from '@components/actions/button/constants'\r\nimport { BUTTON_SIZES } from '@components/actions/_shared/buttons/constants'\r\n\r\n/**\r\n * Text-label action button. Requires a visible `label`. Supports\r\n * `variant` (contained|outlined|ghost), semantic `color`, `size`\r\n * (sm|md|lg), and optional `startIcon`/`endIcon` Iconify identifiers.\r\n */\r\nconst Button: FC<ButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = BUTTON_SIZES.md,\r\n    className,\r\n    label,\r\n    startIcon,\r\n    endIcon,\r\n    active,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const textSize = BUTTON_SIZE_TO_FONT_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(BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\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={textSize}\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        </button>\r\n    )\r\n}\r\n\r\nButton.displayName = 'Button'\r\n\r\nexport default Button\r\n"],"names":["Button","variant","color","size","BUTTON_SIZES","className","label","startIcon","endIcon","active","ref","props","iconSize","buttonSizeToIconSize","textSize","BUTTON_SIZE_TO_FONT_SIZE","jsxs","cn","BUTTON_STYLES","jsx","Icon","BUTTON_SHARED_STYLES","Typography"],"mappings":"+jBAeMA,EAA0B,CAAC,CAC7B,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAOC,EAAAA,aAAa,GACpB,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,OAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,qBAAqBV,CAAI,EACpCW,EAAWC,EAAAA,yBAAyBZ,CAAI,EAE9C,OACIa,EAAAA,KAAC,SAAA,CACG,IAAAN,EACA,cAAaD,EAAS,OAAS,OAC/B,UAAWQ,EAAAA,GAAGC,EAAAA,cAAc,OAAO,CAAE,QAAAjB,EAAS,MAAAC,EAAO,KAAAC,EAAM,EAAGE,CAAS,EACtE,GAAGM,EAEH,SAAA,CAAAJ,GACGY,EAAAA,IAACC,EAAA,CACG,KAAMb,EACN,KAAMK,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,EAGxCF,EAAAA,IAACG,EAAA,CACG,GAAI,OACJ,SAAUR,EACV,WAAY,SAEX,SAAAR,CAAA,CAAA,EAEJE,GACGW,EAAAA,IAACC,EAAA,CACG,KAAMZ,EACN,KAAMI,EACN,UAAWS,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAAA,CAIhB,EAEArB,EAAO,YAAc"}
+{"version":3,"file":"Button.cjs","sources":["../../../../src/components/actions/button/Button.tsx"],"sourcesContent":["import { BUTTON_STYLES } from '@components/actions/button/styles/Button.css.ts'\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { getButtonLayoutClassName } from '@components/actions/_shared/buttons/utils/buttonLayout.utils.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport type { ButtonProps } from '@components/actions/button/types/Button.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\nimport { BUTTON_SIZE_TO_FONT_SIZE, buttonSizeToIconSize } from '@components/actions/button/constants'\r\nimport { BUTTON_SIZES } from '@components/actions/_shared/buttons/constants'\r\n\r\n/**\r\n * Text-label action button. Requires a visible `label`. Supports\r\n * `variant` (contained|outlined|ghost), semantic `color`, `size`\r\n * (sm|md|lg), and optional `startIcon`/`endIcon` Iconify identifiers.\r\n */\r\nconst Button: FC<ButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = BUTTON_SIZES.md,\r\n    className,\r\n    label,\r\n    startIcon,\r\n    endIcon,\r\n    active,\r\n    marginTop,\r\n    marginRight,\r\n    marginBottom,\r\n    marginLeft,\r\n    width,\r\n    alignSelf,\r\n    style,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const textSize = BUTTON_SIZE_TO_FONT_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(\r\n                BUTTON_STYLES.recipe({ variant, color, size }),\r\n                getButtonLayoutClassName({ marginTop, marginRight, marginBottom, marginLeft, width, alignSelf }),\r\n                className,\r\n            )}\r\n            style={{ width, alignSelf, ...style }}\r\n            {...props}\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={textSize}\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        </button>\r\n    )\r\n}\r\n\r\nButton.displayName = 'Button'\r\n\r\nexport default Button\r\n"],"names":["Button","variant","color","size","BUTTON_SIZES","className","label","startIcon","endIcon","active","marginTop","marginRight","marginBottom","marginLeft","width","alignSelf","style","ref","props","iconSize","buttonSizeToIconSize","textSize","BUTTON_SIZE_TO_FONT_SIZE","jsxs","cn","BUTTON_STYLES","getButtonLayoutClassName","jsx","Icon","BUTTON_SHARED_STYLES","Typography"],"mappings":"4nBAgBMA,EAA0B,CAAC,CAC7B,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAOC,EAAAA,aAAa,GACpB,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,OAAAC,EACA,UAAAC,EACA,YAAAC,EACA,aAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,MAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,qBAAqBjB,CAAI,EACpCkB,EAAWC,EAAAA,yBAAyBnB,CAAI,EAE9C,OACIoB,EAAAA,KAAC,SAAA,CACG,IAAAN,EACA,cAAaR,EAAS,OAAS,OAC/B,UAAWe,EAAAA,GACPC,EAAAA,cAAc,OAAO,CAAE,QAAAxB,EAAS,MAAAC,EAAO,KAAAC,EAAM,EAC7CuB,EAAAA,yBAAyB,CAAE,UAAAhB,EAAW,YAAAC,EAAa,aAAAC,EAAc,WAAAC,CAA6B,CAAC,EAC/FR,CAAA,EAEJ,MAAO,CAAE,MAAAS,EAAO,UAAAC,EAAW,GAAGC,CAAA,EAC7B,GAAGE,EAEH,SAAA,CAAAX,GACGoB,EAAAA,IAACC,EAAA,CACG,KAAMrB,EACN,KAAMY,EACN,UAAWU,EAAAA,qBAAqB,IAAA,CAAA,EAGxCF,EAAAA,IAACG,EAAA,CACG,GAAI,OACJ,SAAUT,EACV,WAAY,SAEX,SAAAf,CAAA,CAAA,EAEJE,GACGmB,EAAAA,IAACC,EAAA,CACG,KAAMpB,EACN,KAAMW,EACN,UAAWU,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAAA,CAIhB,EAEA7B,EAAO,YAAc"}

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

@@ -1,34 +1,47 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { BUTTON_STYLES as _ } from "./styles/Button.css.js";
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import { BUTTON_STYLES as z } from "./styles/Button.css.js";
 import { BUTTON_SHARED_STYLES as e } from "../_shared/buttons/styles/buttonShared.css.js";
+import { getButtonLayoutClassName as h } from "../_shared/buttons/utils/buttonLayout.utils.js";
 import n from "../../foundation/icon/Icon.js";
 import "../../foundation/icon/styles/Icon.css.js";
-import d from "../../foundation/typography/Typography.js";
+import x from "../../foundation/typography/Typography.js";
 import "../../foundation/typography/styles/Typography.css.js";
-import { cn as l } from "../../../utils/cn.js";
-import { buttonSizeToIconSize as B } from "../_shared/buttons/constants/index.js";
-import { BUTTON_SIZE_TO_FONT_SIZE as E } from "./constants/buttonSizes.const.js";
-import { BUTTON_SIZES as O } from "../_shared/buttons/constants/buttonSizes.const.js";
-const z = ({
-  variant: p,
-  color: c,
-  size: o = O.md,
-  className: a,
-  label: s,
+import { cn as U } from "../../../utils/cn.js";
+import { buttonSizeToIconSize as g } from "../_shared/buttons/constants/index.js";
+import { BUTTON_SIZE_TO_FONT_SIZE as I } from "./constants/buttonSizes.const.js";
+import { BUTTON_SIZES as L } from "../_shared/buttons/constants/buttonSizes.const.js";
+const Z = ({
+  variant: a,
+  color: p,
+  size: o = L.md,
+  className: s,
+  label: c,
   startIcon: i,
   endIcon: m,
   active: S,
-  ref: T,
-  ...f
+  marginTop: T,
+  marginRight: f,
+  marginBottom: u,
+  marginLeft: N,
+  width: l,
+  alignSelf: _,
+  style: d,
+  ref: B,
+  ...E
 }) => {
-  const r = B[o], N = E[o];
-  return /* @__PURE__ */ u(
+  const r = g[o], O = I[o];
+  return /* @__PURE__ */ y(
     "button",
     {
-      ref: T,
+      ref: B,
       "data-active": S ? "true" : void 0,
-      className: l(_.recipe({ variant: p, color: c, size: o }), a),
-      ...f,
+      className: U(
+        z.recipe({ variant: a, color: p, size: o }),
+        h({ marginTop: T, marginRight: f, marginBottom: u, marginLeft: N }),
+        s
+      ),
+      style: { width: l, alignSelf: _, ...d },
+      ...E,
       children: [
         i && /* @__PURE__ */ t(
           n,
@@ -39,12 +52,12 @@ const z = ({
           }
         ),
         /* @__PURE__ */ t(
-          d,
+          x,
           {
             as: "span",
-            fontSize: N,
+            fontSize: O,
             fontWeight: "medium",
-            children: s
+            children: c
           }
         ),
         m && /* @__PURE__ */ t(
@@ -59,8 +72,8 @@ const z = ({
     }
   );
 };
-z.displayName = "Button";
+Z.displayName = "Button";
 export {
-  z as default
+  Z as default
 };
 //# sourceMappingURL=Button.js.map

package/dist/components/actions/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/actions/button/Button.tsx"],"sourcesContent":["import { BUTTON_STYLES } from '@components/actions/button/styles/Button.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 { Typography } from '@components/foundation/typography'\r\nimport type { ButtonProps } from '@components/actions/button/types/Button.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\nimport { BUTTON_SIZE_TO_FONT_SIZE, buttonSizeToIconSize } from '@components/actions/button/constants'\r\nimport { BUTTON_SIZES } from '@components/actions/_shared/buttons/constants'\r\n\r\n/**\r\n * Text-label action button. Requires a visible `label`. Supports\r\n * `variant` (contained|outlined|ghost), semantic `color`, `size`\r\n * (sm|md|lg), and optional `startIcon`/`endIcon` Iconify identifiers.\r\n */\r\nconst Button: FC<ButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = BUTTON_SIZES.md,\r\n    className,\r\n    label,\r\n    startIcon,\r\n    endIcon,\r\n    active,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const textSize = BUTTON_SIZE_TO_FONT_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(BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\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={textSize}\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        </button>\r\n    )\r\n}\r\n\r\nButton.displayName = 'Button'\r\n\r\nexport default Button\r\n"],"names":["Button","variant","color","size","BUTTON_SIZES","className","label","startIcon","endIcon","active","ref","props","iconSize","buttonSizeToIconSize","textSize","BUTTON_SIZE_TO_FONT_SIZE","jsxs","cn","BUTTON_STYLES","jsx","Icon","BUTTON_SHARED_STYLES","Typography"],"mappings":";;;;;;;;;;;AAeA,MAAMA,IAA0B,CAAC;AAAA,EAC7B,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAOC,EAAa;AAAA,EACpB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAAqBV,CAAI,GACpCW,IAAWC,EAAyBZ,CAAI;AAE9C,SACI,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,eAAaD,IAAS,SAAS;AAAA,MAC/B,WAAWQ,EAAGC,EAAc,OAAO,EAAE,SAAAjB,GAAS,OAAAC,GAAO,MAAAC,GAAM,GAAGE,CAAS;AAAA,MACtE,GAAGM;AAAA,MAEH,UAAA;AAAA,QAAAJ,KACG,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAMb;AAAA,YACN,MAAMK;AAAA,YACN,WAAWS,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxC,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,UAAUR;AAAA,YACV,YAAY;AAAA,YAEX,UAAAR;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJE,KACG,gBAAAW;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAMZ;AAAA,YACN,MAAMI;AAAA,YACN,WAAWS,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC;AAAA,IAAA;AAAA,EAAA;AAIhB;AAEArB,EAAO,cAAc;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/actions/button/Button.tsx"],"sourcesContent":["import { BUTTON_STYLES } from '@components/actions/button/styles/Button.css.ts'\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { getButtonLayoutClassName } from '@components/actions/_shared/buttons/utils/buttonLayout.utils.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport type { ButtonProps } from '@components/actions/button/types/Button.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\nimport { BUTTON_SIZE_TO_FONT_SIZE, buttonSizeToIconSize } from '@components/actions/button/constants'\r\nimport { BUTTON_SIZES } from '@components/actions/_shared/buttons/constants'\r\n\r\n/**\r\n * Text-label action button. Requires a visible `label`. Supports\r\n * `variant` (contained|outlined|ghost), semantic `color`, `size`\r\n * (sm|md|lg), and optional `startIcon`/`endIcon` Iconify identifiers.\r\n */\r\nconst Button: FC<ButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = BUTTON_SIZES.md,\r\n    className,\r\n    label,\r\n    startIcon,\r\n    endIcon,\r\n    active,\r\n    marginTop,\r\n    marginRight,\r\n    marginBottom,\r\n    marginLeft,\r\n    width,\r\n    alignSelf,\r\n    style,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = buttonSizeToIconSize[size]\r\n    const textSize = BUTTON_SIZE_TO_FONT_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(\r\n                BUTTON_STYLES.recipe({ variant, color, size }),\r\n                getButtonLayoutClassName({ marginTop, marginRight, marginBottom, marginLeft, width, alignSelf }),\r\n                className,\r\n            )}\r\n            style={{ width, alignSelf, ...style }}\r\n            {...props}\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={textSize}\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        </button>\r\n    )\r\n}\r\n\r\nButton.displayName = 'Button'\r\n\r\nexport default Button\r\n"],"names":["Button","variant","color","size","BUTTON_SIZES","className","label","startIcon","endIcon","active","marginTop","marginRight","marginBottom","marginLeft","width","alignSelf","style","ref","props","iconSize","buttonSizeToIconSize","textSize","BUTTON_SIZE_TO_FONT_SIZE","jsxs","cn","BUTTON_STYLES","getButtonLayoutClassName","jsx","Icon","BUTTON_SHARED_STYLES","Typography"],"mappings":";;;;;;;;;;;;AAgBA,MAAMA,IAA0B,CAAC;AAAA,EAC7B,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAOC,EAAa;AAAA,EACpB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAAqBjB,CAAI,GACpCkB,IAAWC,EAAyBnB,CAAI;AAE9C,SACI,gBAAAoB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,eAAaR,IAAS,SAAS;AAAA,MAC/B,WAAWe;AAAA,QACPC,EAAc,OAAO,EAAE,SAAAxB,GAAS,OAAAC,GAAO,MAAAC,GAAM;AAAA,QAC7CuB,EAAyB,EAAE,WAAAhB,GAAW,aAAAC,GAAa,cAAAC,GAAc,YAAAC,EAA6B,CAAC;AAAA,QAC/FR;AAAA,MAAA;AAAA,MAEJ,OAAO,EAAE,OAAAS,GAAO,WAAAC,GAAW,GAAGC,EAAA;AAAA,MAC7B,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAX,KACG,gBAAAoB;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAMrB;AAAA,YACN,MAAMY;AAAA,YACN,WAAWU,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxC,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,UAAUT;AAAA,YACV,YAAY;AAAA,YAEX,UAAAf;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJE,KACG,gBAAAmB;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAMpB;AAAA,YACN,MAAMW;AAAA,YACN,WAAWU,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC;AAAA,IAAA;AAAA,EAAA;AAIhB;AAEA7B,EAAO,cAAc;"}

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

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

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

@@ -1,4 +1,4 @@
-import '../../../../ui-kit35.css';import '../../../../ui-kit34.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit61.css';import '../../../../ui-kit43.css';import '../../../../ui-kit.css';/* empty css                                            */
 /* empty css                                                           */
 /* empty css                          */
 import { createRuntimeFn as r } from "@vanilla-extract/recipes/createRuntimeFn";

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

@@ -1,4 +1,5 @@
 import { IconComponent } from '../../../foundation/icon';
+import { ButtonLayoutProps } from '../../_shared/buttons/types';
 import { ButtonColor, ButtonSize, ButtonVariant } from './Button.types.ts';
 import type * as React from 'react';
 export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color'> & {
@@ -18,4 +19,4 @@ export type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'c
     endIcon?: IconComponent;
     /** Whether the button is in an active/pressed state, e.g. when it triggers an open menu. */
     active?: boolean;
-};
+} & ButtonLayoutProps;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.cjs","sources":["../../../../src/components/actions/icon-button/IconButton.tsx"],"sourcesContent":["import { ICON_BUTTON_STYLES } from '@components/actions/icon-button/styles/IconButton.css.ts'\r\nimport { BUTTON_SHARED_STYLES } from '@components/actions/_shared/buttons/styles/buttonShared.css.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport type { IconButtonProps } from '@components/actions/icon-button/types/IconButton.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\nimport { ICON_BUTTON_SIZE_TO_ICON_SIZE, ICON_BUTTON_SIZES } from '@components/actions/icon-button/constants'\r\n\r\n/**\r\n * Icon-only action button. Requires `aria-label` for accessibility.\r\n * Supports `variant` (contained|outlined|ghost), semantic `color`,\r\n *  `size` (xs|sm|md|lg), and a local SVG `icon` component.\r\n */\r\nconst IconButton: FC<IconButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = ICON_BUTTON_SIZES.md,\r\n    className,\r\n    icon,\r\n    children,\r\n    active,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = ICON_BUTTON_SIZE_TO_ICON_SIZE[size]\r\n\r\n    return (\r\n        <button\r\n            ref={ref}\r\n            className={cn(ICON_BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\r\n            data-active={active ? 'true' : undefined}\r\n        >\r\n            {children ?? (icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : null)}\r\n        </button>\r\n    )\r\n}\r\n\r\nIconButton.displayName = 'IconButton'\r\n\r\nexport default IconButton\r\n"],"names":["IconButton","variant","color","size","ICON_BUTTON_SIZES","className","icon","children","active","ref","props","iconSize","ICON_BUTTON_SIZE_TO_ICON_SIZE","jsx","cn","ICON_BUTTON_STYLES","Icon","BUTTON_SHARED_STYLES"],"mappings":"oVAaMA,EAAkC,CAAC,CACrC,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAOC,EAAAA,kBAAkB,GACzB,UAAAC,EACA,KAAAC,EACA,SAAAC,EACA,OAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,8BAA8BT,CAAI,EAEnD,OACIU,EAAAA,IAAC,SAAA,CACG,IAAAJ,EACA,UAAWK,EAAAA,GAAGC,EAAAA,mBAAmB,OAAO,CAAE,QAAAd,EAAS,MAAAC,EAAO,KAAAC,EAAM,EAAGE,CAAS,EAC3E,GAAGK,EACJ,cAAaF,EAAS,OAAS,OAE9B,aAAaF,EACVO,EAAAA,IAACG,EAAA,CACG,KAAAV,EACA,KAAMK,EACN,UAAWM,EAAAA,qBAAqB,IAAA,CAAA,EAEpC,KAAA,CAAA,CAGhB,EAEAjB,EAAW,YAAc"}
+{"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 { getButtonLayoutClassName } from '@components/actions/_shared/buttons/utils/buttonLayout.utils.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport type { IconButtonProps } from '@components/actions/icon-button/types/IconButton.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\nimport { ICON_BUTTON_SIZE_TO_ICON_SIZE, ICON_BUTTON_SIZES } from '@components/actions/icon-button/constants'\r\n\r\n/**\r\n * Icon-only action button. Requires `aria-label` for accessibility.\r\n * Supports `variant` (contained|outlined|ghost), semantic `color`,\r\n *  `size` (xs|sm|md|lg), and a local SVG `icon` component.\r\n */\r\nconst IconButton: FC<IconButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = ICON_BUTTON_SIZES.md,\r\n    className,\r\n    icon,\r\n    children,\r\n    active,\r\n    marginTop,\r\n    marginRight,\r\n    marginBottom,\r\n    marginLeft,\r\n    width,\r\n    alignSelf,\r\n    style,\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(\r\n                ICON_BUTTON_STYLES.recipe({ variant, color, size }),\r\n                getButtonLayoutClassName({ marginTop, marginRight, marginBottom, marginLeft, width, alignSelf }),\r\n                className,\r\n            )}\r\n            style={{ width, alignSelf, ...style }}\r\n            {...props}\r\n            data-active={active ? 'true' : undefined}\r\n        >\r\n            {children ?? (icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : null)}\r\n        </button>\r\n    )\r\n}\r\n\r\nIconButton.displayName = 'IconButton'\r\n\r\nexport default IconButton\r\n"],"names":["IconButton","variant","color","size","ICON_BUTTON_SIZES","className","icon","children","active","marginTop","marginRight","marginBottom","marginLeft","width","alignSelf","style","ref","props","iconSize","ICON_BUTTON_SIZE_TO_ICON_SIZE","jsx","cn","ICON_BUTTON_STYLES","getButtonLayoutClassName","Icon","BUTTON_SHARED_STYLES"],"mappings":"iZAcMA,EAAkC,CAAC,CACrC,QAAAC,EACA,MAAAC,EACA,KAAAC,EAAOC,EAAAA,kBAAkB,GACzB,UAAAC,EACA,KAAAC,EACA,SAAAC,EACA,OAAAC,EACA,UAAAC,EACA,YAAAC,EACA,aAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,MAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,8BAA8BhB,CAAI,EAEnD,OACIiB,EAAAA,IAAC,SAAA,CACG,IAAAJ,EACA,UAAWK,EAAAA,GACPC,EAAAA,mBAAmB,OAAO,CAAE,QAAArB,EAAS,MAAAC,EAAO,KAAAC,EAAM,EAClDoB,EAAAA,yBAAyB,CAAE,UAAAd,EAAW,YAAAC,EAAa,aAAAC,EAAc,WAAAC,CAA6B,CAAC,EAC/FP,CAAA,EAEJ,MAAO,CAAE,MAAAQ,EAAO,UAAAC,EAAW,GAAGC,CAAA,EAC7B,GAAGE,EACJ,cAAaT,EAAS,OAAS,OAE9B,aAAaF,EACVc,EAAAA,IAACI,EAAA,CACG,KAAAlB,EACA,KAAMY,EACN,UAAWO,EAAAA,qBAAqB,IAAA,CAAA,EAEpC,KAAA,CAAA,CAGhB,EAEAzB,EAAW,YAAc"}

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

@@ -1,42 +1,55 @@
 import { jsx as r } from "react/jsx-runtime";
-import { ICON_BUTTON_STYLES as _ } from "./styles/IconButton.css.js";
-import { BUTTON_SHARED_STYLES as p } from "../_shared/buttons/styles/buttonShared.css.js";
-import I from "../../foundation/icon/Icon.js";
+import { ICON_BUTTON_STYLES as O } from "./styles/IconButton.css.js";
+import { BUTTON_SHARED_STYLES as f } from "../_shared/buttons/styles/buttonShared.css.js";
+import { getButtonLayoutClassName as B } from "../_shared/buttons/utils/buttonLayout.utils.js";
+import d from "../../foundation/icon/Icon.js";
 import "../../foundation/icon/styles/Icon.css.js";
-import { cn as S } from "../../../utils/cn.js";
-import { ICON_BUTTON_SIZE_TO_ICON_SIZE as s, ICON_BUTTON_SIZES as O } from "./constants/iconButtonSizes.const.js";
-const f = ({
+import { cn as E } from "../../../utils/cn.js";
+import { ICON_BUTTON_SIZE_TO_ICON_SIZE as C, ICON_BUTTON_SIZES as U } from "./constants/iconButtonSizes.const.js";
+const y = ({
   variant: m,
-  color: i,
-  size: o = O.md,
-  className: n,
+  color: e,
+  size: o = U.md,
+  className: i,
   icon: t,
-  children: c,
-  active: e,
-  ref: a,
-  ...N
+  children: a,
+  active: n,
+  marginTop: c,
+  marginRight: s,
+  marginBottom: N,
+  marginLeft: p,
+  width: T,
+  alignSelf: _,
+  style: I,
+  ref: S,
+  ...l
 }) => {
-  const T = s[o];
+  const u = C[o];
   return /* @__PURE__ */ r(
     "button",
     {
-      ref: a,
-      className: S(_.recipe({ variant: m, color: i, size: o }), n),
-      ...N,
-      "data-active": e ? "true" : void 0,
-      children: c ?? (t ? /* @__PURE__ */ r(
-        I,
+      ref: S,
+      className: E(
+        O.recipe({ variant: m, color: e, size: o }),
+        B({ marginTop: c, marginRight: s, marginBottom: N, marginLeft: p }),
+        i
+      ),
+      style: { width: T, alignSelf: _, ...I },
+      ...l,
+      "data-active": n ? "true" : void 0,
+      children: a ?? (t ? /* @__PURE__ */ r(
+        d,
         {
           icon: t,
-          size: T,
-          className: p.icon
+          size: u,
+          className: f.icon
         }
       ) : null)
     }
   );
 };
-f.displayName = "IconButton";
+y.displayName = "IconButton";
 export {
-  f as default
+  y 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\n/**\r\n * Icon-only action button. Requires `aria-label` for accessibility.\r\n * Supports `variant` (contained|outlined|ghost), semantic `color`,\r\n *  `size` (xs|sm|md|lg), and a local SVG `icon` component.\r\n */\r\nconst IconButton: FC<IconButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = ICON_BUTTON_SIZES.md,\r\n    className,\r\n    icon,\r\n    children,\r\n    active,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const iconSize = ICON_BUTTON_SIZE_TO_ICON_SIZE[size]\r\n\r\n    return (\r\n        <button\r\n            ref={ref}\r\n            className={cn(ICON_BUTTON_STYLES.recipe({ variant, color, size }), className)}\r\n            {...props}\r\n            data-active={active ? 'true' : undefined}\r\n        >\r\n            {children ?? (icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : null)}\r\n        </button>\r\n    )\r\n}\r\n\r\nIconButton.displayName = 'IconButton'\r\n\r\nexport default IconButton\r\n"],"names":["IconButton","variant","color","size","ICON_BUTTON_SIZES","className","icon","children","active","ref","props","iconSize","ICON_BUTTON_SIZE_TO_ICON_SIZE","jsx","cn","ICON_BUTTON_STYLES","Icon","BUTTON_SHARED_STYLES"],"mappings":";;;;;;;AAaA,MAAMA,IAAkC,CAAC;AAAA,EACrC,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAOC,EAAkB;AAAA,EACzB,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAA8BT,CAAI;AAEnD,SACI,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAJ;AAAA,MACA,WAAWK,EAAGC,EAAmB,OAAO,EAAE,SAAAd,GAAS,OAAAC,GAAO,MAAAC,GAAM,GAAGE,CAAS;AAAA,MAC3E,GAAGK;AAAA,MACJ,eAAaF,IAAS,SAAS;AAAA,MAE9B,gBAAaF,IACV,gBAAAO;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAAV;AAAA,UACA,MAAMK;AAAA,UACN,WAAWM,EAAqB;AAAA,QAAA;AAAA,MAAA,IAEpC;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEAjB,EAAW,cAAc;"}
+{"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 { getButtonLayoutClassName } from '@components/actions/_shared/buttons/utils/buttonLayout.utils.ts'\r\nimport { Icon } from '@components/foundation/icon'\r\nimport type { IconButtonProps } from '@components/actions/icon-button/types/IconButton.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport type { FC } from 'react'\r\nimport { ICON_BUTTON_SIZE_TO_ICON_SIZE, ICON_BUTTON_SIZES } from '@components/actions/icon-button/constants'\r\n\r\n/**\r\n * Icon-only action button. Requires `aria-label` for accessibility.\r\n * Supports `variant` (contained|outlined|ghost), semantic `color`,\r\n *  `size` (xs|sm|md|lg), and a local SVG `icon` component.\r\n */\r\nconst IconButton: FC<IconButtonProps> = ({\r\n    variant,\r\n    color,\r\n    size = ICON_BUTTON_SIZES.md,\r\n    className,\r\n    icon,\r\n    children,\r\n    active,\r\n    marginTop,\r\n    marginRight,\r\n    marginBottom,\r\n    marginLeft,\r\n    width,\r\n    alignSelf,\r\n    style,\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(\r\n                ICON_BUTTON_STYLES.recipe({ variant, color, size }),\r\n                getButtonLayoutClassName({ marginTop, marginRight, marginBottom, marginLeft, width, alignSelf }),\r\n                className,\r\n            )}\r\n            style={{ width, alignSelf, ...style }}\r\n            {...props}\r\n            data-active={active ? 'true' : undefined}\r\n        >\r\n            {children ?? (icon ? (\r\n                <Icon\r\n                    icon={icon}\r\n                    size={iconSize}\r\n                    className={BUTTON_SHARED_STYLES.icon}\r\n                />\r\n            ) : null)}\r\n        </button>\r\n    )\r\n}\r\n\r\nIconButton.displayName = 'IconButton'\r\n\r\nexport default IconButton\r\n"],"names":["IconButton","variant","color","size","ICON_BUTTON_SIZES","className","icon","children","active","marginTop","marginRight","marginBottom","marginLeft","width","alignSelf","style","ref","props","iconSize","ICON_BUTTON_SIZE_TO_ICON_SIZE","jsx","cn","ICON_BUTTON_STYLES","getButtonLayoutClassName","Icon","BUTTON_SHARED_STYLES"],"mappings":";;;;;;;;AAcA,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,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAWC,EAA8BhB,CAAI;AAEnD,SACI,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAJ;AAAA,MACA,WAAWK;AAAA,QACPC,EAAmB,OAAO,EAAE,SAAArB,GAAS,OAAAC,GAAO,MAAAC,GAAM;AAAA,QAClDoB,EAAyB,EAAE,WAAAd,GAAW,aAAAC,GAAa,cAAAC,GAAc,YAAAC,EAA6B,CAAC;AAAA,QAC/FP;AAAA,MAAA;AAAA,MAEJ,OAAO,EAAE,OAAAQ,GAAO,WAAAC,GAAW,GAAGC,EAAA;AAAA,MAC7B,GAAGE;AAAA,MACJ,eAAaT,IAAS,SAAS;AAAA,MAE9B,gBAAaF,IACV,gBAAAc;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,MAAAlB;AAAA,UACA,MAAMY;AAAA,UACN,WAAWO,EAAqB;AAAA,QAAA;AAAA,MAAA,IAEpC;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEAzB,EAAW,cAAc;"}

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

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

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

@@ -1,4 +1,4 @@
-import '../../../../ui-kit52.css';import '../../../../ui-kit34.css';import '../../../../ui-kit.css';/* empty css                                            */
+import '../../../../ui-kit44.css';import '../../../../ui-kit43.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,4 +1,5 @@
 import { IconComponent } from '../../../foundation/icon';
+import { ButtonLayoutProps } from '../../_shared/buttons/types';
 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'> & ({
@@ -20,4 +21,4 @@ export type IconButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     'aria-label': string;
     /** Whether the button is in an active/pressed state, e.g. when it triggers an open menu. */
     active?: boolean;
-};
+} & ButtonLayoutProps;

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

@@ -1,2 +1,2 @@
-"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;
+"use strict";const e=require("react/jsx-runtime"),h=require("@base-ui/react/toggle"),i=require("../_shared/buttons/styles/buttonShared.css.cjs"),p=require("../_shared/buttons/constants/index.cjs"),z=require("../_shared/buttons/utils/buttonLayout.utils.cjs"),n=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const B=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const G=require("./constants/toggleSizes.const.cjs"),R=require("./styles/Toggle.css.cjs"),Y=require("../../../utils/cn.cjs"),u=({variant:a,subtle:T,color:S,size:s="md",radius:l,className:g,label:_,icon:o,startIcon:r,endIcon:c,marginTop:q,marginRight:m,marginBottom:E,marginLeft:N,width:d,alignSelf:x,style:L,ref:j,...y})=>{const t=p.buttonSizeToIconSize[s],O=G.TOGGLE_SIZE_TO_FONT_SIZE[s];return e.jsx(h.Toggle,{ref:j,"data-icon-only":o?"":void 0,className:Y.cn(R.TOGGLE_STYLES.recipe({variant:a,color:S,size:s,radius:l,subtle:T}),z.getButtonLayoutClassName({marginTop:q,marginRight:m,marginBottom:E,marginLeft:N}),g),style:{width:d,alignSelf:x,...L},...y,children:o?e.jsx(n,{icon:o,size:t,className:i.BUTTON_SHARED_STYLES.icon}):e.jsxs(e.Fragment,{children:[r&&e.jsx(n,{icon:r,size:t,className:i.BUTTON_SHARED_STYLES.icon}),e.jsx(B,{as:"span",fontSize:O,fontWeight:"medium",children:_}),c&&e.jsx(n,{icon:c,size:t,className:i.BUTTON_SHARED_STYLES.icon})]})})};u.displayName="Toggle";module.exports=u;
 //# 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\n/**\r\n * Two-state toggle button backed by Base UI Toggle. Supports text mode\r\n * (requires `label`) and icon-only mode (pass `icon`). Accepts\r\n * `variant` (outlined|ghost), semantic `color`, `size`, and the full\r\n * Base UI controlled/uncontrolled state contract.\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":"kiBAkBMA,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"}
+{"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 { getButtonLayoutClassName } from '@components/actions/_shared/buttons/utils/buttonLayout.utils.ts'\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\n/**\r\n * Two-state toggle button backed by Base UI Toggle. Supports text mode\r\n * (requires `label`) and icon-only mode (pass `icon`). Accepts\r\n * `variant` (outlined|ghost), semantic `color`, `size`, and the full\r\n * Base UI controlled/uncontrolled state contract.\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    marginTop,\r\n    marginRight,\r\n    marginBottom,\r\n    marginLeft,\r\n    width,\r\n    alignSelf,\r\n    style,\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(\r\n                TOGGLE_STYLES.recipe({ variant, color, size, radius, subtle }),\r\n                getButtonLayoutClassName({ marginTop, marginRight, marginBottom, marginLeft, width, alignSelf }),\r\n                className,\r\n            )}\r\n            style={{ width, alignSelf, ...style }}\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","marginTop","marginRight","marginBottom","marginLeft","width","alignSelf","style","ref","props","iconSize","buttonSizeToIconSize","fontSize","TOGGLE_SIZE_TO_FONT_SIZE","jsx","BaseToggle","cn","TOGGLE_STYLES","getButtonLayoutClassName","Icon","BUTTON_SHARED_STYLES","jsxs","Fragment","Typography"],"mappings":"+lBAmBMA,EAA0B,CAAC,CAC7B,QAAAC,EACA,OAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,KACP,OAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,UAAAC,EACA,QAAAC,EACA,UAAAC,EACA,YAAAC,EACA,aAAAC,EACA,WAAAC,EACA,MAAAC,EACA,UAAAC,EACA,MAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAWC,EAAAA,qBAAqBjB,CAAI,EACpCkB,EAAWC,EAAAA,yBAAyBnB,CAAI,EAE9C,OACIoB,EAAAA,IAACC,EAAAA,OAAA,CACG,IAAAP,EACA,iBAAgBV,EAAO,GAAK,OAC5B,UAAWkB,EAAAA,GACPC,EAAAA,cAAc,OAAO,CAAE,QAAA1B,EAAS,MAAAE,EAAO,KAAAC,EAAM,OAAAC,EAAQ,OAAAH,EAAQ,EAC7D0B,EAAAA,yBAAyB,CAAE,UAAAjB,EAAW,YAAAC,EAAa,aAAAC,EAAc,WAAAC,CAA6B,CAAC,EAC/FR,CAAA,EAEJ,MAAO,CAAE,MAAAS,EAAO,UAAAC,EAAW,GAAGC,CAAA,EAC7B,GAAGE,EAEH,SAAAX,EACGgB,EAAAA,IAACK,EAAA,CACG,KAAArB,EACA,KAAMY,EACN,UAAWU,EAAAA,qBAAqB,IAAA,CAAA,EAGpCC,EAAAA,KAAAC,WAAA,CACK,SAAA,CAAAvB,GACGe,EAAAA,IAACK,EAAA,CACG,KAAMpB,EACN,KAAMW,EACN,UAAWU,EAAAA,qBAAqB,IAAA,CAAA,EAGxCN,EAAAA,IAACS,EAAA,CACG,GAAI,OACJ,SAAAX,EACA,WAAY,SAEX,SAAAf,CAAA,CAAA,EAEJG,GACGc,EAAAA,IAACK,EAAA,CACG,KAAMnB,EACN,KAAMU,EACN,UAAWU,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAER,CAAA,CAAA,CAIhB,EAEA9B,EAAO,YAAc"}

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

@@ -1,75 +1,88 @@
-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 h } from "../_shared/buttons/constants/index.js";
-import t from "../../foundation/icon/Icon.js";
+import { jsx as o, jsxs as L, Fragment as O } from "react/jsx-runtime";
+import { Toggle as G } from "@base-ui/react/toggle";
+import { BUTTON_SHARED_STYLES as t } from "../_shared/buttons/styles/buttonShared.css.js";
+import { buttonSizeToIconSize as x } from "../_shared/buttons/constants/index.js";
+import { getButtonLayoutClassName as j } from "../_shared/buttons/utils/buttonLayout.utils.js";
+import e from "../../foundation/icon/Icon.js";
 import "../../foundation/icon/styles/Icon.css.js";
-import z from "../../foundation/typography/Typography.js";
+import B from "../../foundation/typography/Typography.js";
 import "../../foundation/typography/styles/Typography.css.js";
-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 = ({
+import { TOGGLE_SIZE_TO_FONT_SIZE as F } from "./constants/toggleSizes.const.js";
+import { TOGGLE_STYLES as I } from "./styles/Toggle.css.js";
+import { cn as Y } from "../../../utils/cn.js";
+const Z = ({
   variant: n,
-  subtle: c,
-  color: p,
-  size: i = "md",
+  subtle: p,
+  color: c,
+  size: m = "md",
   radius: l,
   className: T,
   label: f,
-  icon: m,
+  icon: i,
   startIcon: s,
   endIcon: a,
-  ref: g,
-  ...S
+  marginTop: g,
+  marginRight: S,
+  marginBottom: d,
+  marginLeft: N,
+  width: E,
+  alignSelf: _,
+  style: u,
+  ref: y,
+  ...h
 }) => {
-  const r = h[i], d = O[i];
+  const r = x[m], z = F[m];
   return /* @__PURE__ */ o(
-    _,
+    G,
     {
-      ref: g,
-      "data-icon-only": m ? "" : void 0,
-      className: y(u.recipe({ variant: n, color: p, size: i, radius: l, subtle: c }), T),
-      ...S,
-      children: m ? /* @__PURE__ */ o(
-        t,
+      ref: y,
+      "data-icon-only": i ? "" : void 0,
+      className: Y(
+        I.recipe({ variant: n, color: c, size: m, radius: l, subtle: p }),
+        j({ marginTop: g, marginRight: S, marginBottom: d, marginLeft: N }),
+        T
+      ),
+      style: { width: E, alignSelf: _, ...u },
+      ...h,
+      children: i ? /* @__PURE__ */ o(
+        e,
         {
-          icon: m,
+          icon: i,
           size: r,
-          className: e.icon
+          className: t.icon
         }
-      ) : /* @__PURE__ */ E(N, { children: [
+      ) : /* @__PURE__ */ L(O, { children: [
         s && /* @__PURE__ */ o(
-          t,
+          e,
           {
             icon: s,
             size: r,
-            className: e.icon
+            className: t.icon
           }
         ),
         /* @__PURE__ */ o(
-          z,
+          B,
           {
             as: "span",
-            fontSize: d,
+            fontSize: z,
             fontWeight: "medium",
             children: f
           }
         ),
         a && /* @__PURE__ */ o(
-          t,
+          e,
           {
             icon: a,
             size: r,
-            className: e.icon
+            className: t.icon
           }
         )
       ] })
     }
   );
 };
-G.displayName = "Toggle";
+Z.displayName = "Toggle";
 export {
-  G as default
+  Z as default
 };
 //# sourceMappingURL=Toggle.js.map