@frontify/fondue-components 1.1.0 → 1.2.0

package/dist/fondue-components3.js

@@ -1,49 +1,35 @@
-import { j as i } from "./fondue-components6.js";
-import { forwardRef as u, cloneElement as c } from "react";
-import { buttonStyles as f, buttonIconSizeMap as x } from "./fondue-components7.js";
-import { iconStyles as p } from "./fondue-components8.js";
-import { textStyles as d } from "./fondue-components9.js";
-const j = u(
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { cn as d } from "./fondue-components6.js";
+import { buttonStyles as u } from "./fondue-components7.js";
+import { iconStyles as s } from "./fondue-components8.js";
+import { textStyles as c } from "./fondue-components9.js";
+const b = f(
   ({
-    icon: n,
-    children: t,
-    hideLabel: m,
-    style: a,
-    size: s = "medium",
+    children: m,
+    style: o,
+    size: r = "medium",
     "data-test-id": e = "fondue-button",
-    ...o
-  }, r) => /* @__PURE__ */ i.jsxs(
+    className: i = "",
+    ...t
+  }, n) => /* @__PURE__ */ a(
     "button",
     {
-      ref: r,
+      ref: n,
       "data-test-id": e,
-      className: f({
-        iconOnly: n && !t || m,
-        size: s,
-        style: a,
-        ...o
-      }),
-      ...o,
-      children: [
-        n && /* @__PURE__ */ i.jsx(
-          "span",
-          {
-            "data-test-id": `${e}-icon`,
-            className: p({
-              iconSpacing: t && !m ? s : "none",
-              style: a,
-              ...o
-            }),
-            children: c(n, { size: x[s] })
-          }
-        ),
-        t && /* @__PURE__ */ i.jsx("span", { className: d({ hideLabel: m, style: a, ...o }), "data-test-id": `${e}-text`, children: t })
-      ]
+      className: d(
+        u({ size: r, style: o, ...t }),
+        c({ style: o, ...t }),
+        s({ style: o, ...t }),
+        i
+      ),
+      ...t,
+      children: m
     }
   )
 );
-j.displayName = "Button";
+b.displayName = "Button";
 export {
-  j as Button
+  b as Button
 };
 //# sourceMappingURL=fondue-components3.js.map

package/dist/fondue-components3.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components3.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { cloneElement, forwardRef, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { buttonIconSizeMap, buttonStyles } from './styles/buttonStyles';\nimport { iconStyles } from './styles/iconStyles';\nimport { textStyles } from './styles/textStyles';\n\ntype ButtonRounding = 'medium' | 'full';\n\ntype ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'loud';\n\ntype ButtonSize = 'small' | 'medium' | 'large';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\n\ntype ButtonEmphasis = 'default' | 'weak' | 'strong';\n\nexport type ButtonProps = {\n    /**\n     * @default null\n     */\n    type?: ButtonType;\n    /**\n     * @default null\n     */\n    title?: string;\n    /**\n     * @default 'default'\n     */\n    style?: ButtonStyle;\n    /**\n     * @default 'strong'\n     */\n    emphasis?: ButtonEmphasis;\n    /**\n     * @default false\n     */\n    hideLabel?: boolean;\n    /**\n     * @default 'medium'\n     */\n    size?: ButtonSize;\n    /**\n     * @default 'medium'\n     */\n    rounding?: ButtonRounding;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * @default true\n     */\n    hugWidth?: boolean;\n    icon?: ReactElement;\n    children?: ReactNode;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    'data-test-id'?: string;\n};\n\nexport const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(\n    (\n        {\n            icon,\n            children,\n            hideLabel,\n            style,\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-button',\n            ...props\n        }: ButtonProps,\n        ref: ForwardedRef<HTMLButtonElement | null>,\n    ) => {\n        return (\n            <button\n                ref={ref}\n                data-test-id={dataTestId}\n                className={buttonStyles({\n                    iconOnly: (icon && !children) || hideLabel,\n                    size,\n                    style,\n                    ...props,\n                })}\n                {...props}\n            >\n                {icon && (\n                    <span\n                        data-test-id={`${dataTestId}-icon`}\n                        className={iconStyles({\n                            iconSpacing: children && !hideLabel ? size : 'none',\n                            style,\n                            ...props,\n                        })}\n                    >\n                        {cloneElement(icon, { size: buttonIconSizeMap[size] })}\n                    </span>\n                )}\n                {children && (\n                    <span className={textStyles({ hideLabel, style, ...props })} data-test-id={`${dataTestId}-text`}>\n                        {children}\n                    </span>\n                )}\n            </button>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","icon","children","hideLabel","style","size","dataTestId","props","ref","jsxs","buttonStyles","jsx","iconStyles","buttonIconSizeMap","textStyles"],"mappings":";;;;;AA+DO,MAAMA,IAASC;AAAA,EAClB,CACI;AAAA,IACI,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGIC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWI,EAAa;AAAA,QACpB,UAAWT,KAAQ,CAACC,KAAaC;AAAA,QACjC,MAAAE;AAAA,QACA,OAAAD;AAAA,QACA,GAAGG;AAAA,MAAA,CACN;AAAA,MACA,GAAGA;AAAA,MAEH,UAAA;AAAA,QACGN,KAAAU,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,gBAAc,GAAGL,CAAU;AAAA,YAC3B,WAAWM,EAAW;AAAA,cAClB,aAAaV,KAAY,CAACC,IAAYE,IAAO;AAAA,cAC7C,OAAAD;AAAA,cACA,GAAGG;AAAA,YAAA,CACN;AAAA,YAEA,YAAaN,GAAM,EAAE,MAAMY,EAAkBR,CAAI,GAAG;AAAA,UAAA;AAAA,QACzD;AAAA,QAEHH,KACIS,gBAAAA,EAAA,IAAA,QAAA,EAAK,WAAWG,EAAW,EAAE,WAAAX,GAAW,OAAAC,GAAO,GAAGG,EAAO,CAAA,GAAG,gBAAc,GAAGD,CAAU,SACnF,UAAAJ,GACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKpB;AAEAH,EAAO,cAAc;"}
+{"version":3,"file":"fondue-components3.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef, type MouseEvent, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { buttonStyles } from './styles/buttonStyles';\nimport { iconStyles } from './styles/iconStyles';\nimport { textStyles } from './styles/textStyles';\n\ntype ButtonRounding = 'medium' | 'full';\n\ntype ButtonStyle = 'default' | 'positive' | 'negative' | 'danger' | 'loud';\n\ntype ButtonSize = 'small' | 'medium' | 'large';\n\ntype ButtonType = 'button' | 'submit' | 'reset';\n\ntype ButtonEmphasis = 'default' | 'weak' | 'strong';\n\ntype ButtonAspect = 'default' | 'square';\n\nexport type ButtonProps = {\n    /**\n     * @default null\n     */\n    type?: ButtonType;\n    /**\n     * @default null\n     */\n    title?: string;\n    /**\n     * @default 'default'\n     */\n    style?: ButtonStyle;\n    /**\n     * @default 'strong'\n     */\n    emphasis?: ButtonEmphasis;\n    /**\n     * @default 'medium'\n     */\n    size?: ButtonSize;\n    /**\n     * @default 'medium'\n     */\n    rounding?: ButtonRounding;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * @default 'default'\n     */\n    aspect?: ButtonAspect;\n    /**\n     * @default true\n     */\n    hugWidth?: boolean;\n    children?: ReactNode;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    'aria-label'?: string;\n    'aria-describedby'?: string;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Button = forwardRef<HTMLButtonElement | null, ButtonProps>(\n    (\n        {\n            children,\n            style,\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-button',\n            className = '',\n            ...props\n        }: ButtonProps,\n        ref: ForwardedRef<HTMLButtonElement | null>,\n    ) => {\n        return (\n            <button\n                ref={ref}\n                data-test-id={dataTestId}\n                className={cn(\n                    buttonStyles({ size, style, ...props }),\n                    textStyles({ style, ...props }),\n                    iconStyles({ style, ...props }),\n                    className,\n                )}\n                {...props}\n            >\n                {children}\n            </button>\n        );\n    },\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","children","style","size","dataTestId","className","props","ref","jsx","cn","buttonStyles","textStyles","iconStyles"],"mappings":";;;;;;AAmEO,MAAMA,IAASC;AAAA,EAClB,CACI;AAAA,IACI,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,gBAAcH;AAAA,MACd,WAAWK;AAAA,QACPC,EAAa,EAAE,MAAAP,GAAM,OAAAD,GAAO,GAAGI,GAAO;AAAA,QACtCK,EAAW,EAAE,OAAAT,GAAO,GAAGI,GAAO;AAAA,QAC9BM,EAAW,EAAE,OAAAV,GAAO,GAAGI,GAAO;AAAA,QAC9BD;AAAA,MACJ;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAL;AAAA,IAAA;AAAA,EAAA;AAIjB;AAEAF,EAAO,cAAc;"}

package/dist/fondue-components4.js

@@ -1,4 +1,4 @@
-import { j as t } from "./fondue-components6.js";
+import { jsx as t } from "react/jsx-runtime";
 const l = {
   noline: "tw-border-none",
   dashed: "tw-border-dashed",
@@ -12,39 +12,39 @@ const l = {
   vertical: a = !1,
   style: r = "solid",
   height: e = "small",
-  "data-test-id": s = o,
-  color: i = "#CCC"
-}) => a ? /* @__PURE__ */ t.jsx(
+  "data-test-id": i = o,
+  color: s = "#CCC"
+}) => a ? /* @__PURE__ */ t(
   "div",
   {
     "aria-hidden": "true",
     className: "tw-flex tw-self-stretch tw-mt-0 tw-mb-0 tw-items-center tw-justify-center",
-    "data-test-id": s,
+    "data-test-id": i,
     style: {
       marginLeft: d[e] / 2,
       marginRight: d[e] / 2
     },
-    children: /* @__PURE__ */ t.jsx(
+    children: /* @__PURE__ */ t(
       "div",
       {
         className: `tw-w-px tw-h-full tw-border-r tw-m-0 ${l[r]}`,
-        style: { borderRightColor: i },
+        style: { borderRightColor: s },
         "data-test-id": "fondue-divider-line"
       }
     )
   }
-) : /* @__PURE__ */ t.jsx(
+) : /* @__PURE__ */ t(
   "div",
   {
     "aria-hidden": "true",
     className: "tw-flex tw-items-center tw-w-full",
     style: { height: d[e] },
-    "data-test-id": s,
-    children: /* @__PURE__ */ t.jsx(
+    "data-test-id": i,
+    children: /* @__PURE__ */ t(
       "hr",
       {
         className: `tw-border-t tw-m-0 tw-w-full ${l[r]}`,
-        style: { borderTopColor: i },
+        style: { borderTopColor: s },
         "data-test-id": "fondue-divider-line"
       }
     )

package/dist/fondue-components4.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components4.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement } from 'react';\n\nexport type DividerStyle = 'noline' | 'dashed' | 'solid' | 'dotted';\n\nexport type DividerHeight = 'small' | 'medium' | 'large';\n\nexport type DividerProps = {\n    style?: DividerStyle;\n    height?: DividerHeight;\n    color?: string;\n    vertical?: boolean;\n    'data-test-id'?: string;\n};\n\nconst styleMap = {\n    noline: 'tw-border-none',\n    dashed: 'tw-border-dashed',\n    solid: 'tw-border-solid',\n    dotted: 'tw-border-dotted',\n};\n\nconst heightMap = {\n    small: 36,\n    medium: 60,\n    large: 96,\n};\n\nconst DIVIDER_TEST_ID = 'fondue-divider';\n\nexport const Divider = ({\n    vertical = false,\n    style = 'solid',\n    height = 'small',\n    'data-test-id': dataTestId = DIVIDER_TEST_ID,\n    color = '#CCC',\n}: DividerProps): ReactElement => {\n    return vertical ? (\n        <div\n            aria-hidden=\"true\"\n            className=\"tw-flex tw-self-stretch tw-mt-0 tw-mb-0 tw-items-center tw-justify-center\"\n            data-test-id={dataTestId}\n            style={{\n                marginLeft: heightMap[height] / 2,\n                marginRight: heightMap[height] / 2,\n            }}\n        >\n            <div\n                className={`tw-w-px tw-h-full tw-border-r tw-m-0 ${styleMap[style]}`}\n                style={{ borderRightColor: color }}\n                data-test-id=\"fondue-divider-line\"\n            />\n        </div>\n    ) : (\n        <div\n            aria-hidden=\"true\"\n            className=\"tw-flex tw-items-center tw-w-full\"\n            style={{ height: heightMap[height] }}\n            data-test-id={dataTestId}\n        >\n            <hr\n                className={`tw-border-t tw-m-0 tw-w-full ${styleMap[style]}`}\n                style={{ borderTopColor: color }}\n                data-test-id=\"fondue-divider-line\"\n            />\n        </div>\n    );\n};\n"],"names":["styleMap","heightMap","DIVIDER_TEST_ID","Divider","vertical","style","height","dataTestId","color","jsx"],"mappings":";AAgBA,MAAMA,IAAW;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACZ,GAEMC,IAAY;AAAA,EACd,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,IAAkB,kBAEXC,IAAU,CAAC;AAAA,EACpB,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAaL;AAAA,EAC7B,OAAAM,IAAQ;AACZ,MACWJ,IACHK,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,WAAU;AAAA,IACV,gBAAcF;AAAA,IACd,OAAO;AAAA,MACH,YAAYN,EAAUK,CAAM,IAAI;AAAA,MAChC,aAAaL,EAAUK,CAAM,IAAI;AAAA,IACrC;AAAA,IAEA,UAAAG,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,wCAAwCT,EAASK,CAAK,CAAC;AAAA,QAClE,OAAO,EAAE,kBAAkBG,EAAM;AAAA,QACjC,gBAAa;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAAA,IAGJC,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,WAAU;AAAA,IACV,OAAO,EAAE,QAAQR,EAAUK,CAAM,EAAE;AAAA,IACnC,gBAAcC;AAAA,IAEd,UAAAE,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,gCAAgCT,EAASK,CAAK,CAAC;AAAA,QAC1D,OAAO,EAAE,gBAAgBG,EAAM;AAAA,QAC/B,gBAAa;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"fondue-components4.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement } from 'react';\n\nexport type DividerStyle = 'noline' | 'dashed' | 'solid' | 'dotted';\n\nexport type DividerHeight = 'small' | 'medium' | 'large';\n\nexport type DividerProps = {\n    style?: DividerStyle;\n    height?: DividerHeight;\n    color?: string;\n    vertical?: boolean;\n    'data-test-id'?: string;\n};\n\nconst styleMap = {\n    noline: 'tw-border-none',\n    dashed: 'tw-border-dashed',\n    solid: 'tw-border-solid',\n    dotted: 'tw-border-dotted',\n};\n\nconst heightMap = {\n    small: 36,\n    medium: 60,\n    large: 96,\n};\n\nconst DIVIDER_TEST_ID = 'fondue-divider';\n\nexport const Divider = ({\n    vertical = false,\n    style = 'solid',\n    height = 'small',\n    'data-test-id': dataTestId = DIVIDER_TEST_ID,\n    color = '#CCC',\n}: DividerProps): ReactElement => {\n    return vertical ? (\n        <div\n            aria-hidden=\"true\"\n            className=\"tw-flex tw-self-stretch tw-mt-0 tw-mb-0 tw-items-center tw-justify-center\"\n            data-test-id={dataTestId}\n            style={{\n                marginLeft: heightMap[height] / 2,\n                marginRight: heightMap[height] / 2,\n            }}\n        >\n            <div\n                className={`tw-w-px tw-h-full tw-border-r tw-m-0 ${styleMap[style]}`}\n                style={{ borderRightColor: color }}\n                data-test-id=\"fondue-divider-line\"\n            />\n        </div>\n    ) : (\n        <div\n            aria-hidden=\"true\"\n            className=\"tw-flex tw-items-center tw-w-full\"\n            style={{ height: heightMap[height] }}\n            data-test-id={dataTestId}\n        >\n            <hr\n                className={`tw-border-t tw-m-0 tw-w-full ${styleMap[style]}`}\n                style={{ borderTopColor: color }}\n                data-test-id=\"fondue-divider-line\"\n            />\n        </div>\n    );\n};\n"],"names":["styleMap","heightMap","DIVIDER_TEST_ID","Divider","vertical","style","height","dataTestId","color","jsx"],"mappings":";AAgBA,MAAMA,IAAW;AAAA,EACb,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACZ,GAEMC,IAAY;AAAA,EACd,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,IAAkB,kBAEXC,IAAU,CAAC;AAAA,EACpB,UAAAC,IAAW;AAAA,EACX,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAaL;AAAA,EAC7B,OAAAM,IAAQ;AACZ,MACWJ,IACH,gBAAAK;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,WAAU;AAAA,IACV,gBAAcF;AAAA,IACd,OAAO;AAAA,MACH,YAAYN,EAAUK,CAAM,IAAI;AAAA,MAChC,aAAaL,EAAUK,CAAM,IAAI;AAAA,IACrC;AAAA,IAEA,UAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,wCAAwCT,EAASK,CAAK,CAAC;AAAA,QAClE,OAAO,EAAE,kBAAkBG,EAAM;AAAA,QACjC,gBAAa;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAAA,IAGJ,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,WAAU;AAAA,IACV,OAAO,EAAE,QAAQR,EAAUK,CAAM,EAAE;AAAA,IACnC,gBAAcC;AAAA,IAEd,UAAA,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,gCAAgCT,EAASK,CAAK,CAAC;AAAA,QAC1D,OAAO,EAAE,gBAAgBG,EAAM;AAAA,QAC/B,gBAAa;AAAA,MAAA;AAAA,IACjB;AAAA,EAAA;AAAA;"}

package/dist/fondue-components5.js

@@ -1,4 +1,4 @@
-import { j as i } from "./fondue-components6.js";
+import { jsx as i } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-progress";
 import { forwardRef as l } from "react";
 import { loadingBarContainerStyles as f, loadingBarStyles as g } from "./fondue-components10.js";
@@ -6,23 +6,23 @@ const p = l(
   ({
     value: a,
     max: r = 100,
-    rounded: e = !0,
+    rounded: d = !0,
     style: t = "default",
-    size: d = "medium",
-    "data-test-id": s = "fondue-loading-bar",
-    ...n
-  }, m) => /* @__PURE__ */ i.jsx(
+    size: e = "medium",
+    "data-test-id": n = "fondue-loading-bar",
+    ...s
+  }, m) => /* @__PURE__ */ i(
     o.Root,
     {
       ref: m,
-      "data-test-id": s,
-      className: f({ rounded: e, size: d, style: t }),
+      "data-test-id": n,
+      className: f({ rounded: d, size: e, style: t }),
       "aria-busy": a !== r,
       value: a,
       max: r,
       style: a ? { "--loading-bar-value": `${a}%` } : {},
-      ...n,
-      children: /* @__PURE__ */ i.jsx(
+      ...s,
+      children: /* @__PURE__ */ i(
         o.Indicator,
         {
           className: g({ style: t, indeterminateState: a === null })

package/dist/fondue-components5.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components5.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { type CSSProperties, forwardRef, type ElementRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * @default 'default'\n     */\n    style?: 'default' | 'positive' | 'negative';\n    /**\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            style = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, style })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={value ? ({ '--loading-bar-value': `${value}%` } as CSSProperties) : {}}\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ style, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","style","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AAoCO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGIC,gBAAAA,EAAA;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,OAAAD,GAAO;AAAA,MAC7D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OAAOD,IAAS,EAAE,uBAAuB,GAAGA,CAAK,IAAA,IAA0B,CAAC;AAAA,MAC3E,GAAGM;AAAA,MAEJ,UAAAE,gBAAAA,EAAA;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,OAAAR,GAAO,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAC7E;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components5.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { type CSSProperties, forwardRef, type ElementRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * @default 'default'\n     */\n    style?: 'default' | 'positive' | 'negative';\n    /**\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            style = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, style })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={value ? ({ '--loading-bar-value': `${value}%` } as CSSProperties) : {}}\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ style, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","style","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AAoCO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,OAAAD,GAAO;AAAA,MAC7D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OAAOD,IAAS,EAAE,uBAAuB,GAAGA,CAAK,IAAA,IAA0B,CAAC;AAAA,MAC3E,GAAGM;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,OAAAR,GAAO,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAC7E;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}

package/dist/fondue-components6.js

@@ -1,9 +1,15 @@
-import { __module as e } from "./fondue-components12.js";
-import { __require as r } from "./fondue-components13.js";
-import { __require as o } from "./fondue-components14.js";
-process.env.NODE_ENV === "production" ? e.exports = r() : e.exports = o();
-var m = e.exports;
+import { extendTailwindMerge as e } from "./fondue-components11.js";
+import { tv as o } from "./fondue-components12.js";
+const r = e({
+  prefix: "tw-",
+  extend: {
+    classGroups: {
+      "font-size": ["text-body-x-small", "text-body-small", "text-body-medium", "text-body-large"]
+    }
+  }
+}), m = (...t) => r(...t), x = (t) => o(t);
 export {
-  m as j
+  m as cn,
+  x as sv
 };
 //# sourceMappingURL=fondue-components6.js.map

package/dist/fondue-components6.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components6.js","sources":["../../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js"],"sourcesContent":["'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n  module.exports = require('./cjs/react-jsx-runtime.production.min.js');\n} else {\n  module.exports = require('./cjs/react-jsx-runtime.development.js');\n}\n"],"names":["jsxRuntimeModule","require$$0","require$$1"],"mappings":";;;AAEI,QAAQ,IAAI,aAAa,eAC3BA,EAAA,UAAiBC,MAEjBD,EAAA,UAAiBE;;","x_google_ignoreList":[0]}
+{"version":3,"file":"fondue-components6.js","sources":["../src/utilities/styleUtilities.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { extendTailwindMerge } from 'tailwind-merge';\nimport { tv, type TV } from 'tailwind-variants';\n\ntype ClassNameValue = ClassNameArray | string | null | undefined | 0 | false;\ntype ClassNameArray = ClassNameValue[];\n\nconst customTwMerge = extendTailwindMerge({\n    prefix: 'tw-',\n    extend: {\n        classGroups: {\n            'font-size': ['text-body-x-small', 'text-body-small', 'text-body-medium', 'text-body-large'],\n        },\n    },\n});\n\nexport const cn = (...classLists: ClassNameValue[]): string => {\n    return customTwMerge(...classLists);\n};\n\nexport const sv: TV = (variants) => {\n    return tv(variants);\n};\n"],"names":["customTwMerge","extendTailwindMerge","cn","classLists","sv","variants","tv"],"mappings":";;AAQA,MAAMA,IAAgBC,EAAoB;AAAA,EACtC,QAAQ;AAAA,EACR,QAAQ;AAAA,IACJ,aAAa;AAAA,MACT,aAAa,CAAC,qBAAqB,mBAAmB,oBAAoB,iBAAiB;AAAA,IAC/F;AAAA,EACJ;AACJ,CAAC,GAEYC,IAAK,IAAIC,MACXH,EAAc,GAAGG,CAAU,GAGzBC,IAAS,CAACC,MACZC,EAAGD,CAAQ;"}

package/dist/fondue-components7.js

@@ -1,10 +1,6 @@
-import { sv as t } from "./fondue-components11.js";
-const o = {
-  small: 16,
-  medium: 20,
-  large: 24
-}, r = t({
-  base: "tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-outline-none tw-font-body tw-font-medium",
+import { sv as t } from "./fondue-components6.js";
+const o = t({
+  base: "tw-group tw-border tw-box-box tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-outline-none tw-font-body tw-font-medium",
   variants: {
     disabled: {
       true: "tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled"
@@ -18,8 +14,9 @@ const o = {
       medium: "tw-h-9 tw-text-body-medium",
       large: "tw-h-12 tw-text-body-large"
     },
-    iconOnly: {
-      true: "tw-aspect-square tw-px-0"
+    aspect: {
+      square: "tw-aspect-square tw-px-0",
+      default: ""
     },
     hugWidth: {
       false: "tw-w-full"
@@ -114,18 +111,18 @@ const o = {
       class: "tw-bg-box-selected-strong tw-border-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed "
     },
     {
-      iconOnly: !1,
+      aspect: "default",
       size: "small",
       class: "tw-px-2"
     },
     {
-      iconOnly: !1,
+      aspect: "default",
       size: "medium",
       class: "tw-px-4"
     },
     {
-      iconOnly: !1,
-      size: "small",
+      aspect: "default",
+      size: "large",
       class: "tw-px-6"
     }
   ],
@@ -134,11 +131,11 @@ const o = {
     emphasis: "strong",
     size: "medium",
     rounding: "medium",
-    hugWidth: !0
+    hugWidth: !0,
+    aspect: "default"
   }
 });
 export {
-  o as buttonIconSizeMap,
-  r as buttonStyles
+  o as buttonStyles
 };
 //# sourceMappingURL=fondue-components7.js.map

package/dist/fondue-components7.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components7.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FondueIconProps } from '@frontify/fondue-icons';\n\nimport { sv } from '#/utilities/styleUtilities';\n\nimport { type ButtonProps } from '../Button';\n\nexport const buttonIconSizeMap: { [buttonSize in Exclude<ButtonProps['size'], undefined>]: FondueIconProps['size'] } = {\n    small: 16,\n    medium: 20,\n    large: 24,\n};\n\nexport const buttonStyles = sv({\n    base: 'tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-outline-none tw-font-body tw-font-medium',\n    variants: {\n        disabled: {\n            true: 'tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled',\n        },\n        rounding: {\n            medium: 'tw-rounded',\n            full: 'tw-rounded-full',\n        },\n        size: {\n            small: 'tw-h-6 tw-text-body-small',\n            medium: 'tw-h-9 tw-text-body-medium',\n            large: 'tw-h-12 tw-text-body-large',\n        },\n        iconOnly: {\n            true: 'tw-aspect-square tw-px-0',\n        },\n        hugWidth: {\n            false: 'tw-w-full',\n        },\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        style: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            style: 'default',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background tw-border-button-border ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            style: 'default',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-background-hover hover:tw-border-button-border ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            style: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-background tw-border-button-strong-border ' +\n                'hover:tw-bg-button-strong-background-hover ' +\n                'active:tw-bg-button-strong-background-pressed',\n        },\n        {\n            style: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-positive-background tw-border-button-positive-border ' +\n                'hover:tw-bg-button-positive-background-hover ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            style: 'positive',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            style: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-positive-background tw-border-button-strong-positive-border ' +\n                'hover:tw-bg-button-strong-positive-background-hover ' +\n                'active:tw-bg-button-strong-positive-background-pressed',\n        },\n        {\n            style: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-negative-background tw-border-button-negative-border ' +\n                'hover:tw-bg-button-negative-background-hover ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            style: 'negative',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            style: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-negative-background tw-border-button-strong-negative-border ' +\n                'hover:tw-bg-button-strong-negative-background-hover ' +\n                'active:tw-bg-button-strong-negative-background-pressed',\n        },\n        {\n            style: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background tw-border-button-border ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            style: 'danger',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            style: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-danger-background tw-border-button-danger-border ' +\n                'hover:tw-bg-button-danger-background-hover ' +\n                'active:tw-bg-button-danger-background-pressed',\n        },\n        {\n            style: 'loud',\n            emphasis: 'default',\n            class:\n                'tw-bg-box-selected tw-border-button-border ' +\n                'hover:tw-bg-box-selected-hover ' +\n                'active:tw-bg-box-selected-pressed ',\n        },\n        {\n            style: 'loud',\n            emphasis: 'weak',\n            class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n        },\n        {\n            style: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-bg-box-selected-strong tw-border-box-selected-strong ' +\n                'hover:tw-bg-box-selected-strong-hover ' +\n                'active:tw-bg-box-selected-strong-pressed ',\n        },\n        {\n            iconOnly: false,\n            size: 'small',\n            class: 'tw-px-2',\n        },\n        {\n            iconOnly: false,\n            size: 'medium',\n            class: 'tw-px-4',\n        },\n        {\n            iconOnly: false,\n            size: 'small',\n            class: 'tw-px-6',\n        },\n    ],\n    defaultVariants: {\n        style: 'default',\n        emphasis: 'strong',\n        size: 'medium',\n        rounding: 'medium',\n        hugWidth: true,\n    },\n});\n"],"names":["buttonIconSizeMap","buttonStyles","sv"],"mappings":";AAQO,MAAMA,IAA0G;AAAA,EACnH,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEaC,IAAeC,EAAG;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,EACd;AACJ,CAAC;"}
+{"version":3,"file":"fondue-components7.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n    base: 'tw-group tw-border tw-box-box tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-outline-none tw-font-body tw-font-medium',\n    variants: {\n        disabled: {\n            true: 'tw-not-allowed tw-pointer-events-none tw-border-transparent tw-text-box-disabled-inverse tw-bg-box-disabled',\n        },\n        rounding: {\n            medium: 'tw-rounded',\n            full: 'tw-rounded-full',\n        },\n        size: {\n            small: 'tw-h-6 tw-text-body-small',\n            medium: 'tw-h-9 tw-text-body-medium',\n            large: 'tw-h-12 tw-text-body-large',\n        },\n        aspect: {\n            square: 'tw-aspect-square tw-px-0',\n            default: '',\n        },\n        hugWidth: {\n            false: 'tw-w-full',\n        },\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        style: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            style: 'default',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background tw-border-button-border ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            style: 'default',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-background-hover hover:tw-border-button-border ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            style: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-background tw-border-button-strong-border ' +\n                'hover:tw-bg-button-strong-background-hover ' +\n                'active:tw-bg-button-strong-background-pressed',\n        },\n        {\n            style: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-positive-background tw-border-button-positive-border ' +\n                'hover:tw-bg-button-positive-background-hover ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            style: 'positive',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-positive-background-hover hover:tw-border-button-positive-border ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            style: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-positive-background tw-border-button-strong-positive-border ' +\n                'hover:tw-bg-button-strong-positive-background-hover ' +\n                'active:tw-bg-button-strong-positive-background-pressed',\n        },\n        {\n            style: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-negative-background tw-border-button-negative-border ' +\n                'hover:tw-bg-button-negative-background-hover ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            style: 'negative',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-negative-background-hover hover:tw-border-button-negative-border ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            style: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-negative-background tw-border-button-strong-negative-border ' +\n                'hover:tw-bg-button-strong-negative-background-hover ' +\n                'active:tw-bg-button-strong-negative-background-pressed',\n        },\n        {\n            style: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background tw-border-button-border ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            style: 'danger',\n            emphasis: 'weak',\n            class:\n                'tw-border-transparent ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            style: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-danger-background tw-border-button-danger-border ' +\n                'hover:tw-bg-button-danger-background-hover ' +\n                'active:tw-bg-button-danger-background-pressed',\n        },\n        {\n            style: 'loud',\n            emphasis: 'default',\n            class:\n                'tw-bg-box-selected tw-border-button-border ' +\n                'hover:tw-bg-box-selected-hover ' +\n                'active:tw-bg-box-selected-pressed ',\n        },\n        {\n            style: 'loud',\n            emphasis: 'weak',\n            class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n        },\n        {\n            style: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-bg-box-selected-strong tw-border-box-selected-strong ' +\n                'hover:tw-bg-box-selected-strong-hover ' +\n                'active:tw-bg-box-selected-strong-pressed ',\n        },\n        {\n            aspect: 'default',\n            size: 'small',\n            class: 'tw-px-2',\n        },\n        {\n            aspect: 'default',\n            size: 'medium',\n            class: 'tw-px-4',\n        },\n        {\n            aspect: 'default',\n            size: 'large',\n            class: 'tw-px-6',\n        },\n    ],\n    defaultVariants: {\n        style: 'default',\n        emphasis: 'strong',\n        size: 'medium',\n        rounding: 'medium',\n        hugWidth: true,\n        aspect: 'default',\n    },\n});\n"],"names":["buttonStyles","sv"],"mappings":";AAIO,MAAMA,IAAeC,EAAG;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,UAAU;AAAA,MACN,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,MAAM;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,QAAQ;AAAA,MACJ,QAAQ;AAAA,MACR,SAAS;AAAA,IACb;AAAA,IACA,UAAU;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,IACA;AAAA,MACI,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACX;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,EACZ;AACJ,CAAC;"}

package/dist/fondue-components8.js

@@ -1,12 +1,6 @@
-import { sv as t } from "./fondue-components11.js";
-const o = t({
+import { sv as t } from "./fondue-components6.js";
+const s = t({
   variants: {
-    iconSpacing: {
-      none: "",
-      small: "tw--ml-0.5 tw-mr-1",
-      medium: "tw--ml-1 tw-mr-1.5",
-      large: "tw--ml-1 tw-mr-2"
-    },
     emphasis: {
       default: "",
       weak: "",
@@ -24,77 +18,77 @@ const o = t({
     {
       style: "default",
       emphasis: "default",
-      class: "tw-text-button-icon group-hover:tw-text-button-icon-hover group-active:tw-text-button-icon-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "default",
       emphasis: "weak",
-      class: "tw-text-button-icon group-hover:tw-text-button-icon-hover group-active:tw-text-button-icon-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-button-icon group-hover:[&_svg]:tw-text-button-icon-hover group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "default",
       emphasis: "strong",
-      class: "tw-text-button-strong-icon group-hover:tw-text-button-strong-icon-hover group-active:tw-text-button-strong-icon-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-button-strong-icon group-hover:[&_svg]:tw-text-button-strong-icon-hover group-active:[&_svg]:tw-text-button-strong-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "positive",
       emphasis: "default",
-      class: "tw-text-button-positive-icon group-hover:tw-text-button-positive-icon-hover group-active:tw-text-button-positive-icon-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-button-positive-icon group-hover:[&_svg]:tw-text-button-positive-icon-hover group-active:[&_svg]:tw-text-button-positive-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "positive",
       emphasis: "weak",
-      class: "tw-text-button-strong-positive-icon group-hover:tw-text-button-strong-positive-icon-hovergroup-active:tw-text-button-strong-positive-icon-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hovergroup-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "positive",
       emphasis: "strong",
-      class: "tw-text-button-strong-positive-icon group-hover:tw-text-button-strong-positive-icon-hover group-active:tw-text-button-strong-positive-icon-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-button-strong-positive-icon group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "negative",
       emphasis: "default",
-      class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "negative",
       emphasis: "weak",
-      class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "negative",
       emphasis: "strong",
-      class: "tw-text-button-strong-negative-icon group-hover:tw-text-button-strong-negative-icon-hovergroup-active:tw-text-button-strong-negative-icon-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-button-strong-negative-icon group-hover:[&_svg]:tw-text-button-strong-negative-icon-hovergroup-active:[&_svg]:tw-text-button-strong-negative-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "danger",
       emphasis: "default",
-      class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "danger",
       emphasis: "weak",
-      class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-button-negative-icon group-hover:[&_svg]:tw-text-button-negative-icon-hovergroup-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "danger",
       emphasis: "strong",
-      class: "tw-text-button-danger-icon group-hover:tw-text-button-danger-icon-hovergroup-active:tw-text-button-danger-icon-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-button-danger-icon group-hover:[&_svg]:tw-text-button-danger-icon-hovergroup-active:[&_svg]:tw-text-button-danger-icon-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "loud",
       emphasis: "default",
-      class: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "loud",
       emphasis: "weak",
-      class: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed tw-leading-none"
+      class: "[&_svg]:tw-text-box-selected-inverse group-hover:[&_svg]:tw-text-box-selected-inverse-hovergroup-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none"
     },
     {
       style: "loud",
       emphasis: "strong",
-      class: "tw-text-box-selected-strong-inverse group-hover:tw-text-box-selected-strong-inversegroup-active:tw-text-box-selected-strong-inverse tw-leading-none"
+      class: "[&_svg]:tw-text-box-selected-strong-inverse group-hover:[&_svg]:tw-text-box-selected-strong-inversegroup-active:[&_svg]:tw-text-box-selected-strong-inverse [&_svg]:tw-leading-none"
     }
   ],
   defaultVariants: {
@@ -103,6 +97,6 @@ const o = t({
   }
 });
 export {
-  o as iconStyles
+  s as iconStyles
 };
 //# sourceMappingURL=fondue-components8.js.map

package/dist/fondue-components8.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components8.js","sources":["../src/components/Button/styles/iconStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const iconStyles = sv({\n    variants: {\n        iconSpacing: {\n            none: '',\n            small: 'tw--ml-0.5 tw-mr-1',\n            medium: 'tw--ml-1 tw-mr-1.5',\n            large: 'tw--ml-1 tw-mr-2',\n        },\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        style: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            style: 'default',\n            emphasis: 'default',\n            class:\n                'tw-text-button-icon ' +\n                'group-hover:tw-text-button-icon-hover ' +\n                'group-active:tw-text-button-icon-pressed tw-leading-none',\n        },\n        {\n            style: 'default',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-icon ' +\n                'group-hover:tw-text-button-icon-hover ' +\n                'group-active:tw-text-button-icon-pressed tw-leading-none',\n        },\n        {\n            style: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-icon ' +\n                'group-hover:tw-text-button-strong-icon-hover ' +\n                'group-active:tw-text-button-strong-icon-pressed tw-leading-none',\n        },\n        {\n            style: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-text-button-positive-icon ' +\n                'group-hover:tw-text-button-positive-icon-hover ' +\n                'group-active:tw-text-button-positive-icon-pressed tw-leading-none',\n        },\n        {\n            style: 'positive',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-strong-positive-icon ' +\n                'group-hover:tw-text-button-strong-positive-icon-hover' +\n                'group-active:tw-text-button-strong-positive-icon-pressed tw-leading-none',\n        },\n        {\n            style: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-positive-icon ' +\n                'group-hover:tw-text-button-strong-positive-icon-hover ' +\n                'group-active:tw-text-button-strong-positive-icon-pressed tw-leading-none',\n        },\n        {\n            style: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-text-button-negative-icon ' +\n                'group-hover:tw-text-button-negative-icon-hover' +\n                'group-active:tw-text-button-negative-icon-pressed tw-leading-none',\n        },\n        {\n            style: 'negative',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-negative-icon ' +\n                'group-hover:tw-text-button-negative-icon-hover' +\n                'group-active:tw-text-button-negative-icon-pressed tw-leading-none',\n        },\n        {\n            style: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-negative-icon ' +\n                'group-hover:tw-text-button-strong-negative-icon-hover' +\n                'group-active:tw-text-button-strong-negative-icon-pressed tw-leading-none',\n        },\n        {\n            style: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-text-button-negative-icon ' +\n                'group-hover:tw-text-button-negative-icon-hover' +\n                'group-active:tw-text-button-negative-icon-pressed tw-leading-none',\n        },\n        {\n            style: 'danger',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-negative-icon ' +\n                'group-hover:tw-text-button-negative-icon-hover' +\n                'group-active:tw-text-button-negative-icon-pressed tw-leading-none',\n        },\n        {\n            style: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-danger-icon ' +\n                'group-hover:tw-text-button-danger-icon-hover' +\n                'group-active:tw-text-button-danger-icon-pressed tw-leading-none',\n        },\n        {\n            style: 'loud',\n            emphasis: 'default',\n            class:\n                'tw-text-box-selected-inverse ' +\n                'group-hover:tw-text-box-selected-inverse-hover' +\n                'group-active:tw-text-box-selected-inverse-pressed tw-leading-none',\n        },\n        {\n            style: 'loud',\n            emphasis: 'weak',\n            class:\n                'tw-text-box-selected-inverse ' +\n                'group-hover:tw-text-box-selected-inverse-hover' +\n                'group-active:tw-text-box-selected-inverse-pressed tw-leading-none',\n        },\n        {\n            style: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-text-box-selected-strong-inverse ' +\n                'group-hover:tw-text-box-selected-strong-inverse' +\n                'group-active:tw-text-box-selected-strong-inverse tw-leading-none',\n        },\n    ],\n    defaultVariants: {\n        emphasis: 'strong',\n        style: 'default',\n    },\n});\n"],"names":["iconStyles","sv"],"mappings":";AAIO,MAAMA,IAAaC,EAAG;AAAA,EACzB,UAAU;AAAA,IACN,aAAa;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,EACX;AACJ,CAAC;"}
+{"version":3,"file":"fondue-components8.js","sources":["../src/components/Button/styles/iconStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const iconStyles = sv({\n    variants: {\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        style: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            style: 'default',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-button-icon ' +\n                'group-hover:[&_svg]:tw-text-button-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'default',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-button-icon ' +\n                'group-hover:[&_svg]:tw-text-button-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'default',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-button-strong-icon ' +\n                'group-hover:[&_svg]:tw-text-button-strong-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-strong-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'positive',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-button-positive-icon ' +\n                'group-hover:[&_svg]:tw-text-button-positive-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-positive-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'positive',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-button-strong-positive-icon ' +\n                'group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'positive',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-button-strong-positive-icon ' +\n                'group-hover:[&_svg]:tw-text-button-strong-positive-icon-hover ' +\n                'group-active:[&_svg]:tw-text-button-strong-positive-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'negative',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-button-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'negative',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-button-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'negative',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-button-strong-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-strong-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-strong-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'danger',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-button-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'danger',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-button-negative-icon ' +\n                'group-hover:[&_svg]:tw-text-button-negative-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-negative-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'danger',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-button-danger-icon ' +\n                'group-hover:[&_svg]:tw-text-button-danger-icon-hover' +\n                'group-active:[&_svg]:tw-text-button-danger-icon-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'loud',\n            emphasis: 'default',\n            class:\n                '[&_svg]:tw-text-box-selected-inverse ' +\n                'group-hover:[&_svg]:tw-text-box-selected-inverse-hover' +\n                'group-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'loud',\n            emphasis: 'weak',\n            class:\n                '[&_svg]:tw-text-box-selected-inverse ' +\n                'group-hover:[&_svg]:tw-text-box-selected-inverse-hover' +\n                'group-active:[&_svg]:tw-text-box-selected-inverse-pressed [&_svg]:tw-leading-none',\n        },\n        {\n            style: 'loud',\n            emphasis: 'strong',\n            class:\n                '[&_svg]:tw-text-box-selected-strong-inverse ' +\n                'group-hover:[&_svg]:tw-text-box-selected-strong-inverse' +\n                'group-active:[&_svg]:tw-text-box-selected-strong-inverse [&_svg]:tw-leading-none',\n        },\n    ],\n    defaultVariants: {\n        emphasis: 'strong',\n        style: 'default',\n    },\n});\n"],"names":["iconStyles","sv"],"mappings":";AAIO,MAAMA,IAAaC,EAAG;AAAA,EACzB,UAAU;AAAA,IACN,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,EACX;AACJ,CAAC;"}

package/dist/fondue-components9.js

@@ -1,9 +1,6 @@
-import { sv as t } from "./fondue-components11.js";
+import { sv as t } from "./fondue-components6.js";
 const s = t({
   variants: {
-    hideLabel: {
-      true: "tw-sr-only"
-    },
     emphasis: {
       default: "",
       weak: "",

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.js","sources":["../src/components/Button/styles/textStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const textStyles = sv({\n    variants: {\n        hideLabel: {\n            true: 'tw-sr-only',\n        },\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        style: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            style: 'default',\n            emphasis: 'default',\n            class:\n                'tw-text-button-text ' +\n                'group-hover:tw-text-button-text-hover ' +\n                'group-active:tw-text-button-text-pressed',\n        },\n        {\n            style: 'default',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-text ' +\n                'group-hover:tw-text-button-text-hover ' +\n                'group-active:tw-text-button-text-pressed',\n        },\n        {\n            style: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-icon ' +\n                'group-hover:tw-text-button-strong-icon-hover ' +\n                'group-active:tw-text-button-strong-text-pressed',\n        },\n        {\n            style: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-text-button-positive-text ' +\n                'group-hover:tw-text-button-positive-text-hover ' +\n                'group-active:tw-text-button-positive-text-pressed',\n        },\n        {\n            style: 'positive',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-positive-text ' +\n                'group-hover:tw-text-button-positive-text-hover ' +\n                'group-active:tw-text-button-positive-text-pressed',\n        },\n        {\n            style: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-positive-text ' +\n                'group-hover:tw-text-button-strong-positive-text-hover ' +\n                'group-active:tw-text-button-strong-positive-text-pressed',\n        },\n        {\n            style: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-text-button-negative-text ' +\n                'group-hover:tw-text-button-negative-text-hover' +\n                'group-active:tw-text-button-negative-text-pressed',\n        },\n        {\n            style: 'negative',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-negative-text ' +\n                'group-hover:tw-text-button-negative-text-hover' +\n                'group-active:tw-text-button-negative-text-pressed',\n        },\n        {\n            style: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-negative-text ' +\n                'group-hover:tw-text-button-strong-negative-text-hover' +\n                'group-active:tw-text-button-strong-negative-text-pressed',\n        },\n        {\n            style: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-text-button-negative-icon ' +\n                'group-hover:tw-text-button-negative-icon-hover' +\n                'group-active:tw-text-button-negative-icon-pressed',\n        },\n        {\n            style: 'danger',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-negative-icon ' +\n                'group-hover:tw-text-button-negative-icon-hover' +\n                'group-active:tw-text-button-negative-icon-pressed',\n        },\n        {\n            style: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-danger-text ' +\n                'group-hover:tw-text-button-danger-text-hover' +\n                'group-active:tw-text-button-danger-text-pressed',\n        },\n        {\n            style: 'loud',\n            emphasis: 'default',\n            class:\n                'tw-text-box-selected-inverse ' +\n                'group-hover:tw-text-box-selected-inverse-hover' +\n                'group-active:tw-text-box-selected-inverse-pressed',\n        },\n        {\n            style: 'loud',\n            emphasis: 'weak',\n            class:\n                'tw-text-box-selected-inverse ' +\n                'group-hover:tw-text-box-selected-inverse-hover' +\n                'group-active:tw-text-box-selected-inverse-pressed',\n        },\n        {\n            style: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-text-box-selected-strong-inverse ' +\n                'group-hover:tw-text-box-selected-strong-inverse' +\n                'group-active:tw-text-box-selected-strong-inverse',\n        },\n    ],\n    defaultVariants: {\n        emphasis: 'strong',\n        style: 'default',\n    },\n});\n"],"names":["textStyles","sv"],"mappings":";AAIO,MAAMA,IAAaC,EAAG;AAAA,EACzB,UAAU;AAAA,IACN,WAAW;AAAA,MACP,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,EACX;AACJ,CAAC;"}
+{"version":3,"file":"fondue-components9.js","sources":["../src/components/Button/styles/textStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const textStyles = sv({\n    variants: {\n        emphasis: {\n            default: '',\n            weak: '',\n            strong: '',\n        },\n        style: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            style: 'default',\n            emphasis: 'default',\n            class:\n                'tw-text-button-text ' +\n                'group-hover:tw-text-button-text-hover ' +\n                'group-active:tw-text-button-text-pressed',\n        },\n        {\n            style: 'default',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-text ' +\n                'group-hover:tw-text-button-text-hover ' +\n                'group-active:tw-text-button-text-pressed',\n        },\n        {\n            style: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-icon ' +\n                'group-hover:tw-text-button-strong-icon-hover ' +\n                'group-active:tw-text-button-strong-text-pressed',\n        },\n        {\n            style: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-text-button-positive-text ' +\n                'group-hover:tw-text-button-positive-text-hover ' +\n                'group-active:tw-text-button-positive-text-pressed',\n        },\n        {\n            style: 'positive',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-positive-text ' +\n                'group-hover:tw-text-button-positive-text-hover ' +\n                'group-active:tw-text-button-positive-text-pressed',\n        },\n        {\n            style: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-positive-text ' +\n                'group-hover:tw-text-button-strong-positive-text-hover ' +\n                'group-active:tw-text-button-strong-positive-text-pressed',\n        },\n        {\n            style: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-text-button-negative-text ' +\n                'group-hover:tw-text-button-negative-text-hover' +\n                'group-active:tw-text-button-negative-text-pressed',\n        },\n        {\n            style: 'negative',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-negative-text ' +\n                'group-hover:tw-text-button-negative-text-hover' +\n                'group-active:tw-text-button-negative-text-pressed',\n        },\n        {\n            style: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-strong-negative-text ' +\n                'group-hover:tw-text-button-strong-negative-text-hover' +\n                'group-active:tw-text-button-strong-negative-text-pressed',\n        },\n        {\n            style: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-text-button-negative-icon ' +\n                'group-hover:tw-text-button-negative-icon-hover' +\n                'group-active:tw-text-button-negative-icon-pressed',\n        },\n        {\n            style: 'danger',\n            emphasis: 'weak',\n            class:\n                'tw-text-button-negative-icon ' +\n                'group-hover:tw-text-button-negative-icon-hover' +\n                'group-active:tw-text-button-negative-icon-pressed',\n        },\n        {\n            style: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-text-button-danger-text ' +\n                'group-hover:tw-text-button-danger-text-hover' +\n                'group-active:tw-text-button-danger-text-pressed',\n        },\n        {\n            style: 'loud',\n            emphasis: 'default',\n            class:\n                'tw-text-box-selected-inverse ' +\n                'group-hover:tw-text-box-selected-inverse-hover' +\n                'group-active:tw-text-box-selected-inverse-pressed',\n        },\n        {\n            style: 'loud',\n            emphasis: 'weak',\n            class:\n                'tw-text-box-selected-inverse ' +\n                'group-hover:tw-text-box-selected-inverse-hover' +\n                'group-active:tw-text-box-selected-inverse-pressed',\n        },\n        {\n            style: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-text-box-selected-strong-inverse ' +\n                'group-hover:tw-text-box-selected-strong-inverse' +\n                'group-active:tw-text-box-selected-strong-inverse',\n        },\n    ],\n    defaultVariants: {\n        emphasis: 'strong',\n        style: 'default',\n    },\n});\n"],"names":["textStyles","sv"],"mappings":";AAIO,MAAMA,IAAaC,EAAG;AAAA,EACzB,UAAU;AAAA,IACN,UAAU;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,QAAQ;AAAA,IACZ;AAAA,IACA,OAAO;AAAA,MACH,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,EACJ;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,EACJ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,EACX;AACJ,CAAC;"}