@choco-vanille/ui 1.14.5 → 1.14.7

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-kit119.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-kit119.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-kit23.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-kit23.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, 'margin' | '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 d=require("../../../../layout/box/styles/Box.css.cjs"),v=({margin:e,marginTop:o,marginRight:t,marginBottom:s,marginLeft:u})=>{if(!(e===void 0&&o===void 0&&t===void 0&&s===void 0&&u===void 0))return d.BOX_STYLES.recipe({margin:e,marginTop:o,marginRight:t,marginBottom:s,marginLeft:u})};exports.getButtonLayoutClassName=v;
+//# 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    margin,\r\n    marginTop,\r\n    marginRight,\r\n    marginBottom,\r\n    marginLeft,\r\n}: ButtonLayoutProps): string | undefined => {\r\n    if (\r\n        margin === undefined &&\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({ margin, marginTop, marginRight, marginBottom, marginLeft })\r\n}\r\n"],"names":["getButtonLayoutClassName","margin","marginTop","marginRight","marginBottom","marginLeft","BOX_STYLES"],"mappings":"6IAGaA,EAA2B,CAAC,CACrC,OAAAC,EACA,UAAAC,EACA,YAAAC,EACA,aAAAC,EACA,WAAAC,CACJ,IAA6C,CACzC,GACI,EAAAJ,IAAW,QACXC,IAAc,QACdC,IAAgB,QAChBC,IAAiB,QACjBC,IAAe,QAKnB,OAAOC,EAAAA,WAAW,OAAO,CAAE,OAAAL,EAAQ,UAAAC,EAAW,YAAAC,EAAa,aAAAC,EAAc,WAAAC,EAAY,CACzF"}

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

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

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

@@ -0,0 +1,15 @@
+import { BOX_STYLES as u } from "../../../../layout/box/styles/Box.css.js";
+const r = ({
+  margin: o,
+  marginTop: d,
+  marginRight: e,
+  marginBottom: v,
+  marginLeft: t
+}) => {
+  if (!(o === void 0 && d === void 0 && e === void 0 && v === void 0 && t === void 0))
+    return u.recipe({ margin: o, marginTop: d, marginRight: e, marginBottom: v, marginLeft: t });
+};
+export {
+  r 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    margin,\r\n    marginTop,\r\n    marginRight,\r\n    marginBottom,\r\n    marginLeft,\r\n}: ButtonLayoutProps): string | undefined => {\r\n    if (\r\n        margin === undefined &&\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({ margin, marginTop, marginRight, marginBottom, marginLeft })\r\n}\r\n"],"names":["getButtonLayoutClassName","margin","marginTop","marginRight","marginBottom","marginLeft","BOX_STYLES"],"mappings":";AAGO,MAAMA,IAA2B,CAAC;AAAA,EACrC,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AACJ,MAA6C;AACzC,MACI,EAAAJ,MAAW,UACXC,MAAc,UACdC,MAAgB,UAChBC,MAAiB,UACjBC,MAAe;AAKnB,WAAOC,EAAW,OAAO,EAAE,QAAAL,GAAQ,WAAAC,GAAW,aAAAC,GAAa,cAAAC,GAAc,YAAAC,GAAY;AACzF;"}

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"),p=require("./styles/Button.css.cjs"),i=require("../_shared/buttons/styles/buttonShared.css.cjs"),y=require("../_shared/buttons/utils/buttonLayout.utils.cjs"),r=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const h=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const j=require("../../../utils/cn.cjs"),L=require("../_shared/buttons/constants/index.cjs"),U=require("./constants/buttonSizes.const.cjs"),g=require("../_shared/buttons/constants/buttonSizes.const.cjs"),c=({variant:u,color:S,size:t=g.BUTTON_SIZES.md,className:a,label:T,startIcon:s,endIcon:n,active:_,margin:q,marginTop:N,marginRight:l,marginBottom:m,marginLeft:B,width:d,alignSelf:x,style:E,ref:z,...O})=>{const o=L.buttonSizeToIconSize[t],b=U.BUTTON_SIZE_TO_FONT_SIZE[t];return e.jsxs("button",{ref:z,"data-active":_?"true":void 0,className:j.cn(p.BUTTON_STYLES.recipe({variant:u,color:S,size:t}),y.getButtonLayoutClassName({margin:q,marginTop:N,marginRight:l,marginBottom:m,marginLeft:B}),a),style:{width:d,alignSelf:x,...E},...O,children:[s&&e.jsx(r,{icon:s,size:o,className:i.BUTTON_SHARED_STYLES.icon}),e.jsx(h,{as:"span",fontSize:b,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    margin,\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({ margin, 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","margin","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,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,qBAAqBlB,CAAI,EACpCmB,EAAWC,EAAAA,yBAAyBpB,CAAI,EAE9C,OACIqB,EAAAA,KAAC,SAAA,CACG,IAAAN,EACA,cAAaT,EAAS,OAAS,OAC/B,UAAWgB,EAAAA,GACPC,EAAAA,cAAc,OAAO,CAAE,QAAAzB,EAAS,MAAAC,EAAO,KAAAC,EAAM,EAC7CwB,EAAAA,yBAAyB,CAAE,OAAAjB,EAAQ,UAAAC,EAAW,YAAAC,EAAa,aAAAC,EAAc,WAAAC,CAA6B,CAAC,EACvGT,CAAA,EAEJ,MAAO,CAAE,MAAAU,EAAO,UAAAC,EAAW,GAAGC,CAAA,EAC7B,GAAGE,EAEH,SAAA,CAAAZ,GACGqB,EAAAA,IAACC,EAAA,CACG,KAAMtB,EACN,KAAMa,EACN,UAAWU,EAAAA,qBAAqB,IAAA,CAAA,EAGxCF,EAAAA,IAACG,EAAA,CACG,GAAI,OACJ,SAAUT,EACV,WAAY,SAEX,SAAAhB,CAAA,CAAA,EAEJE,GACGoB,EAAAA,IAACC,EAAA,CACG,KAAMrB,EACN,KAAMY,EACN,UAAWU,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAAA,CAIhB,EAEA9B,EAAO,YAAc"}

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

@@ -1,34 +1,48 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { BUTTON_STYLES as _ } from "./styles/Button.css.js";
+import { jsxs as z, jsx as t } from "react/jsx-runtime";
+import { BUTTON_STYLES as h } from "./styles/Button.css.js";
 import { BUTTON_SHARED_STYLES as e } from "../_shared/buttons/styles/buttonShared.css.js";
+import { getButtonLayoutClassName as x } 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 U 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 g } from "../../../utils/cn.js";
+import { buttonSizeToIconSize as I } from "../_shared/buttons/constants/index.js";
+import { BUTTON_SIZE_TO_FONT_SIZE as L } from "./constants/buttonSizes.const.js";
+import { BUTTON_SIZES as Z } from "../_shared/buttons/constants/buttonSizes.const.js";
+const b = ({
+  variant: a,
+  color: p,
+  size: o = Z.md,
+  className: s,
+  label: c,
   startIcon: i,
   endIcon: m,
   active: S,
-  ref: T,
-  ...f
+  margin: T,
+  marginTop: f,
+  marginRight: u,
+  marginBottom: N,
+  marginLeft: l,
+  width: _,
+  alignSelf: d,
+  style: B,
+  ref: E,
+  ...O
 }) => {
-  const r = B[o], N = E[o];
-  return /* @__PURE__ */ u(
+  const r = I[o], y = L[o];
+  return /* @__PURE__ */ z(
     "button",
     {
-      ref: T,
+      ref: E,
       "data-active": S ? "true" : void 0,
-      className: l(_.recipe({ variant: p, color: c, size: o }), a),
-      ...f,
+      className: g(
+        h.recipe({ variant: a, color: p, size: o }),
+        x({ margin: T, marginTop: f, marginRight: u, marginBottom: N, marginLeft: l }),
+        s
+      ),
+      style: { width: _, alignSelf: d, ...B },
+      ...O,
       children: [
         i && /* @__PURE__ */ t(
           n,
@@ -39,12 +53,12 @@ const z = ({
           }
         ),
         /* @__PURE__ */ t(
-          d,
+          U,
           {
             as: "span",
-            fontSize: N,
+            fontSize: y,
             fontWeight: "medium",
-            children: s
+            children: c
           }
         ),
         m && /* @__PURE__ */ t(
@@ -59,8 +73,8 @@ const z = ({
     }
   );
 };
-z.displayName = "Button";
+b.displayName = "Button";
 export {
-  z as default
+  b 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    margin,\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({ margin, 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","margin","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,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,EAAqBlB,CAAI,GACpCmB,IAAWC,EAAyBpB,CAAI;AAE9C,SACI,gBAAAqB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,eAAaT,IAAS,SAAS;AAAA,MAC/B,WAAWgB;AAAA,QACPC,EAAc,OAAO,EAAE,SAAAzB,GAAS,OAAAC,GAAO,MAAAC,GAAM;AAAA,QAC7CwB,EAAyB,EAAE,QAAAjB,GAAQ,WAAAC,GAAW,aAAAC,GAAa,cAAAC,GAAc,YAAAC,EAA6B,CAAC;AAAA,QACvGT;AAAA,MAAA;AAAA,MAEJ,OAAO,EAAE,OAAAU,GAAO,WAAAC,GAAW,GAAGC,EAAA;AAAA,MAC7B,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAZ,KACG,gBAAAqB;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAMtB;AAAA,YACN,MAAMa;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,UAAAhB;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJE,KACG,gBAAAoB;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAMrB;AAAA,YACN,MAAMY;AAAA,YACN,WAAWU,EAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MACpC;AAAA,IAAA;AAAA,EAAA;AAIhB;AAEA9B,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-kit62.css');require('../../../../ui-kit23.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-kit62.css';import '../../../../ui-kit23.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"),E=require("./styles/IconButton.css.cjs"),C=require("../_shared/buttons/styles/buttonShared.css.cjs"),x=require("../_shared/buttons/utils/buttonLayout.utils.cjs"),y=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const L=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:_,margin:a,marginTop:N,marginRight:S,marginBottom:I,marginLeft:T,width:l,alignSelf:B,style:O,ref:q,...d})=>{const m=s.ICON_BUTTON_SIZE_TO_ICON_SIZE[t];return n.jsx("button",{ref:q,className:L.cn(E.ICON_BUTTON_STYLES.recipe({variant:c,color:r,size:t}),x.getButtonLayoutClassName({margin:a,marginTop:N,marginRight:S,marginBottom:I,marginLeft:T}),u),style:{width:l,alignSelf:B,...O},...d,"data-active":_?"true":void 0,children:i??(e?n.jsx(y,{icon:e,size:m,className:C.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    margin,\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({ margin, 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","margin","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,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,8BAA8BjB,CAAI,EAEnD,OACIkB,EAAAA,IAAC,SAAA,CACG,IAAAJ,EACA,UAAWK,EAAAA,GACPC,EAAAA,mBAAmB,OAAO,CAAE,QAAAtB,EAAS,MAAAC,EAAO,KAAAC,EAAM,EAClDqB,EAAAA,yBAAyB,CAAE,OAAAf,EAAQ,UAAAC,EAAW,YAAAC,EAAa,aAAAC,EAAc,WAAAC,CAA6B,CAAC,EACvGR,CAAA,EAEJ,MAAO,CAAE,MAAAS,EAAO,UAAAC,EAAW,GAAGC,CAAA,EAC7B,GAAGE,EACJ,cAAaV,EAAS,OAAS,OAE9B,aAAaF,EACVe,EAAAA,IAACI,EAAA,CACG,KAAAnB,EACA,KAAMa,EACN,UAAWO,EAAAA,qBAAqB,IAAA,CAAA,EAEpC,KAAA,CAAA,CAGhB,EAEA1B,EAAW,YAAc"}

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

@@ -1,42 +1,56 @@
 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 f } from "./styles/IconButton.css.js";
+import { BUTTON_SHARED_STYLES as B } from "../_shared/buttons/styles/buttonShared.css.js";
+import { getButtonLayoutClassName as d } from "../_shared/buttons/utils/buttonLayout.utils.js";
+import E 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 C } from "../../../utils/cn.js";
+import { ICON_BUTTON_SIZE_TO_ICON_SIZE as U, ICON_BUTTON_SIZES as y } from "./constants/iconButtonSizes.const.js";
+const L = ({
   variant: m,
-  color: i,
-  size: o = O.md,
-  className: n,
+  color: e,
+  size: o = y.md,
+  className: i,
   icon: t,
-  children: c,
-  active: e,
-  ref: a,
-  ...N
+  children: a,
+  active: n,
+  margin: c,
+  marginTop: s,
+  marginRight: N,
+  marginBottom: p,
+  marginLeft: T,
+  width: _,
+  alignSelf: I,
+  style: S,
+  ref: l,
+  ...u
 }) => {
-  const T = s[o];
+  const O = U[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: l,
+      className: C(
+        f.recipe({ variant: m, color: e, size: o }),
+        d({ margin: c, marginTop: s, marginRight: N, marginBottom: p, marginLeft: T }),
+        i
+      ),
+      style: { width: _, alignSelf: I, ...S },
+      ...u,
+      "data-active": n ? "true" : void 0,
+      children: a ?? (t ? /* @__PURE__ */ r(
+        E,
         {
           icon: t,
-          size: T,
-          className: p.icon
+          size: O,
+          className: B.icon
         }
       ) : null)
     }
   );
 };
-f.displayName = "IconButton";
+L.displayName = "IconButton";
 export {
-  f as default
+  L 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    margin,\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({ margin, 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","margin","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,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,EAA8BjB,CAAI;AAEnD,SACI,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAJ;AAAA,MACA,WAAWK;AAAA,QACPC,EAAmB,OAAO,EAAE,SAAAtB,GAAS,OAAAC,GAAO,MAAAC,GAAM;AAAA,QAClDqB,EAAyB,EAAE,QAAAf,GAAQ,WAAAC,GAAW,aAAAC,GAAa,cAAAC,GAAc,YAAAC,EAA6B,CAAC;AAAA,QACvGR;AAAA,MAAA;AAAA,MAEJ,OAAO,EAAE,OAAAS,GAAO,WAAAC,GAAW,GAAGC,EAAA;AAAA,MAC7B,GAAGE;AAAA,MACJ,eAAaV,IAAS,SAAS;AAAA,MAE9B,gBAAaF,IACV,gBAAAe;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,MAAAnB;AAAA,UACA,MAAMa;AAAA,UACN,WAAWO,EAAqB;AAAA,QAAA;AAAA,MAAA,IAEpC;AAAA,IAAA;AAAA,EAAA;AAGhB;AAEA1B,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-kit24.css');require('../../../../ui-kit23.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-kit24.css';import '../../../../ui-kit23.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"),p=require("@base-ui/react/toggle"),i=require("../_shared/buttons/styles/buttonShared.css.cjs"),z=require("../_shared/buttons/constants/index.cjs"),B=require("../_shared/buttons/utils/buttonLayout.utils.cjs"),n=require("../../foundation/icon/Icon.cjs");require("../../foundation/icon/styles/Icon.css.cjs");const G=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const R=require("./constants/toggleSizes.const.cjs"),Y=require("./styles/Toggle.css.cjs"),b=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,margin:q,marginTop:m,marginRight:E,marginBottom:N,marginLeft:d,width:x,alignSelf:L,style:j,ref:y,...O})=>{const t=z.buttonSizeToIconSize[s],h=R.TOGGLE_SIZE_TO_FONT_SIZE[s];return e.jsx(p.Toggle,{ref:y,"data-icon-only":o?"":void 0,className:b.cn(Y.TOGGLE_STYLES.recipe({variant:a,color:S,size:s,radius:l,subtle:T}),B.getButtonLayoutClassName({margin:q,marginTop:m,marginRight:E,marginBottom:N,marginLeft:d}),g),style:{width:x,alignSelf:L,...j},...O,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(G,{as:"span",fontSize:h,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    margin,\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({ margin, 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","margin","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,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,qBAAqBlB,CAAI,EACpCmB,EAAWC,EAAAA,yBAAyBpB,CAAI,EAE9C,OACIqB,EAAAA,IAACC,EAAAA,OAAA,CACG,IAAAP,EACA,iBAAgBX,EAAO,GAAK,OAC5B,UAAWmB,EAAAA,GACPC,EAAAA,cAAc,OAAO,CAAE,QAAA3B,EAAS,MAAAE,EAAO,KAAAC,EAAM,OAAAC,EAAQ,OAAAH,EAAQ,EAC7D2B,EAAAA,yBAAyB,CAAE,OAAAlB,EAAQ,UAAAC,EAAW,YAAAC,EAAa,aAAAC,EAAc,WAAAC,CAA6B,CAAC,EACvGT,CAAA,EAEJ,MAAO,CAAE,MAAAU,EAAO,UAAAC,EAAW,GAAGC,CAAA,EAC7B,GAAGE,EAEH,SAAAZ,EACGiB,EAAAA,IAACK,EAAA,CACG,KAAAtB,EACA,KAAMa,EACN,UAAWU,EAAAA,qBAAqB,IAAA,CAAA,EAGpCC,EAAAA,KAAAC,WAAA,CACK,SAAA,CAAAxB,GACGgB,EAAAA,IAACK,EAAA,CACG,KAAMrB,EACN,KAAMY,EACN,UAAWU,EAAAA,qBAAqB,IAAA,CAAA,EAGxCN,EAAAA,IAACS,EAAA,CACG,GAAI,OACJ,SAAAX,EACA,WAAY,SAEX,SAAAhB,CAAA,CAAA,EAEJG,GACGe,EAAAA,IAACK,EAAA,CACG,KAAMpB,EACN,KAAMW,EACN,UAAWU,EAAAA,qBAAqB,IAAA,CAAA,CACpC,CAAA,CAER,CAAA,CAAA,CAIhB,EAEA/B,EAAO,YAAc"}