@frontify/fondue-components 13.0.2 → 14.0.0

package/dist/fondue-components31.js

@@ -1,15 +1,35 @@
-import { extendTailwindMerge as e } from "tailwind-merge";
-import { tv as o } from "tailwind-variants";
-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);
+const g = (n) => n.startsWith("aria-") || n === "role", s = {
+  m: "margin",
+  mx: "margin-x",
+  my: "margin-y",
+  mt: "margin-top",
+  mr: "margin-right",
+  mb: "margin-bottom",
+  ml: "margin-left",
+  p: "padding",
+  px: "padding-x",
+  py: "padding-y",
+  pt: "padding-top",
+  pr: "padding-right",
+  pb: "padding-bottom",
+  pl: "padding-left",
+  direction: "flex-direction",
+  align: "align-items",
+  wrap: "flex-wrap",
+  columns: "grid-template-columns",
+  rows: "grid-template-rows"
+}, m = (n, r) => n === "columns" || n === "rows" ? typeof r == "number" ? `repeat(${r}, 1fr)` : r : typeof r == "number" ? `${r * 0.25}rem` : r, f = (n, r = {}) => Object.entries(n).reduce((i, [t, e]) => {
+  if (g(t))
+    return i;
+  const o = t in r ? r[t] : t in s ? s[t] : t, p = o == null ? void 0 : o.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+  if (typeof e == "object")
+    for (const [d, a] of Object.entries(e))
+      a !== void 0 && (i[`--${d}-${p}`] = m(t, a));
+  else
+    i[`--${p}`] = m(t, e);
+  return i;
+}, {});
 export {
-  m as cn,
-  x as sv
+  f as propsToCssVariables
 };
 //# sourceMappingURL=fondue-components31.js.map

package/dist/fondue-components31.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components31.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,IAAA;AAAA,EAC/F;AAER,CAAC,GAEYC,IAAK,IAAIC,MACXH,EAAc,GAAGG,CAAU,GAGzBC,IAAS,CAACC,MACZC,EAAGD,CAAQ;"}
+{"version":3,"file":"fondue-components31.js","sources":["../src/helpers/propsToCssVariables.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type CSSProperties } from 'react';\n\nimport { type Breakpoint } from './layout';\n\nconst isAriaProp = (key: string): boolean => {\n    return key.startsWith('aria-') || key === 'role';\n};\n\nconst abbreviationToCssProperty: Record<string, string> = {\n    m: 'margin',\n    mx: 'margin-x',\n    my: 'margin-y',\n    mt: 'margin-top',\n    mr: 'margin-right',\n    mb: 'margin-bottom',\n    ml: 'margin-left',\n    p: 'padding',\n    px: 'padding-x',\n    py: 'padding-y',\n    pt: 'padding-top',\n    pr: 'padding-right',\n    pb: 'padding-bottom',\n    pl: 'padding-left',\n    direction: 'flex-direction',\n    align: 'align-items',\n    wrap: 'flex-wrap',\n    columns: 'grid-template-columns',\n    rows: 'grid-template-rows',\n};\n\nconst transformValueBasedOnKey = (key: string, value: string | number): string | number => {\n    if (key === 'columns' || key === 'rows') {\n        if (typeof value === 'number') {\n            return `repeat(${value}, 1fr)`;\n        }\n        return value;\n    }\n\n    // Spacing tokens\n    if (typeof value === 'number') {\n        return `${value * 0.25}rem`;\n    }\n\n    return value;\n};\n\nexport const propsToCssVariables = (\n    props: Record<string, string | number | boolean | { [key in Breakpoint]?: string | number | boolean }>,\n    extraAbbreviationToCssProperty: Record<string, string> = {},\n): CSSProperties => {\n    return Object.entries(props).reduce((acc, [key, value]) => {\n        if (isAriaProp(key)) {\n            return acc;\n        }\n\n        const cssProperty =\n            key in extraAbbreviationToCssProperty\n                ? extraAbbreviationToCssProperty[key]\n                : key in abbreviationToCssProperty\n                  ? abbreviationToCssProperty[key]\n                  : key;\n        const cssPropertyKebabCase = cssProperty?.replaceAll(/([\\da-z]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();\n\n        if (typeof value === 'object') {\n            for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n                if (breakpointValue !== undefined) {\n                    // @ts-expect-error CSS variables are not typed into `CSSProperties`\n                    acc[`--${breakpoint}-${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, breakpointValue);\n                }\n            }\n        } else {\n            // @ts-expect-error CSS variables are not typed into `CSSProperties`\n            acc[`--${cssPropertyKebabCase}`] = transformValueBasedOnKey(key, value);\n        }\n\n        return acc;\n    }, {} as CSSProperties);\n};\n"],"names":["isAriaProp","key","abbreviationToCssProperty","transformValueBasedOnKey","value","propsToCssVariables","props","extraAbbreviationToCssProperty","acc","cssProperty","cssPropertyKebabCase","breakpoint","breakpointValue"],"mappings":"AAMA,MAAMA,IAAa,CAACC,MACTA,EAAI,WAAW,OAAO,KAAKA,MAAQ,QAGxCC,IAAoD;AAAA,EACtD,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AACV,GAEMC,IAA2B,CAACF,GAAaG,MACvCH,MAAQ,aAAaA,MAAQ,SACzB,OAAOG,KAAU,WACV,UAAUA,CAAK,WAEnBA,IAIP,OAAOA,KAAU,WACV,GAAGA,IAAQ,IAAI,QAGnBA,GAGEC,IAAsB,CAC/BC,GACAC,IAAyD,OAElD,OAAO,QAAQD,CAAK,EAAE,OAAO,CAACE,GAAK,CAACP,GAAKG,CAAK,MAAM;AACnD,MAAAJ,EAAWC,CAAG;AACP,WAAAO;AAGL,QAAAC,IACFR,KAAOM,IACDA,EAA+BN,CAAG,IAClCA,KAAOC,IACLA,EAA0BD,CAAG,IAC7BA,GACNS,IAAuBD,KAAA,gBAAAA,EAAa,WAAW,+BAA+B,SAAS;AAEzF,MAAA,OAAOL,KAAU;AACjB,eAAW,CAACO,GAAYC,CAAe,KAAK,OAAO,QAAQR,CAAK;AAC5D,MAAIQ,MAAoB,WAEhBJ,EAAA,KAAKG,CAAU,IAAID,CAAoB,EAAE,IAAIP,EAAyBF,GAAKW,CAAe;AAAA;AAKtG,IAAAJ,EAAI,KAAKE,CAAoB,EAAE,IAAIP,EAAyBF,GAAKG,CAAK;AAGnE,SAAAI;AACX,GAAG,EAAmB;"}

package/dist/fondue-components32.js

@@ -1,158 +1,8 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components74.js";
-import { sv as e } from "./fondue-components31.js";
-const o = e({
-  base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium tw-box-border tw-whitespace-nowrap ${t}`,
-  variants: {
-    disabled: {
-      true: "tw-not-allowed tw-pointer-events-none tw-text-box-disabled-inverse tw-bg-box-disabled"
-    },
-    rounding: {
-      medium: "tw-rounded",
-      full: "tw-rounded-full"
-    },
-    size: {
-      small: "tw-h-6 tw-text-body-small",
-      medium: "tw-h-9 tw-text-body-medium",
-      large: "tw-h-12 tw-text-body-large"
-    },
-    aspect: {
-      square: "tw-aspect-square tw-px-0",
-      default: ""
-    },
-    hugWidth: {
-      false: "tw-w-full"
-    },
-    emphasis: {
-      default: "",
-      weak: "",
-      strong: ""
-    },
-    variant: {
-      default: "",
-      positive: "",
-      negative: "",
-      danger: "",
-      loud: ""
-    }
-  },
-  compoundVariants: [
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "default",
-      class: "tw-bg-button-background hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "weak",
-      class: "hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "strong",
-      class: "tw-bg-button-strong-background hover:tw-bg-button-strong-background-hover active:tw-bg-button-strong-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "default",
-      class: "tw-bg-button-positive-background hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "weak",
-      class: "hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "strong",
-      class: "tw-bg-button-strong-positive-background hover:tw-bg-button-strong-positive-background-hover active:tw-bg-button-strong-positive-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "default",
-      class: "tw-bg-button-negative-background hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "weak",
-      class: "hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "strong",
-      class: "tw-bg-button-strong-negative-background hover:tw-bg-button-strong-negative-background-hover active:tw-bg-button-strong-negative-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "default",
-      class: "tw-bg-button-background hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "weak",
-      class: "hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "strong",
-      class: "tw-bg-button-danger-background hover:tw-bg-button-danger-background-hover active:tw-bg-button-danger-background-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "default",
-      class: "tw-bg-box-selected hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "weak",
-      class: "tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "strong",
-      class: "tw-bg-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed "
-    },
-    {
-      aspect: "default",
-      size: "small",
-      class: "tw-px-2"
-    },
-    {
-      aspect: "default",
-      size: "medium",
-      class: "tw-px-4"
-    },
-    {
-      aspect: "default",
-      size: "large",
-      class: "tw-px-6"
-    }
-  ],
-  defaultVariants: {
-    variant: "default",
-    emphasis: "strong",
-    size: "medium",
-    rounding: "medium",
-    hugWidth: !0,
-    aspect: "default",
-    disabled: !1
-  }
-});
+const o = "_root_yrjuz_5", t = {
+  root: o
+};
 export {
-  o as buttonStyles
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components32.js.map

package/dist/fondue-components32.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components32.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n    base:\n        'tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium tw-box-border tw-whitespace-nowrap ' +\n        `${FOCUS_OUTLINE}`,\n    variants: {\n        disabled: {\n            true: 'tw-not-allowed tw-pointer-events-none 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        variant: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-background ' +\n                'hover:tw-bg-button-strong-background-hover ' +\n                'active:tw-bg-button-strong-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-positive-background ' +\n                'hover:tw-bg-button-positive-background-hover ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-positive-background ' +\n                'hover:tw-bg-button-strong-positive-background-hover ' +\n                'active:tw-bg-button-strong-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-negative-background ' +\n                'hover:tw-bg-button-negative-background-hover ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-negative-background ' +\n                'hover:tw-bg-button-strong-negative-background-hover ' +\n                'active:tw-bg-button-strong-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-danger-background ' +\n                'hover:tw-bg-button-danger-background-hover ' +\n                'active:tw-bg-button-danger-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'default',\n            class: 'tw-bg-box-selected hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'weak',\n            class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-bg-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        variant: 'default',\n        emphasis: 'strong',\n        size: 'medium',\n        rounding: 'medium',\n        hugWidth: true,\n        aspect: 'default',\n        disabled: false,\n    },\n});\n"],"names":["buttonStyles","sv","FOCUS_OUTLINE"],"mappings":"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"}
+{"version":3,"file":"fondue-components32.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components33.js

@@ -1,121 +1,15 @@
-import { sv as t } from "./fondue-components31.js";
-const s = t({
-  variants: {
-    emphasis: {
-      default: "",
-      weak: "",
-      strong: ""
-    },
-    variant: {
-      default: "",
-      positive: "",
-      negative: "",
-      danger: "",
-      loud: ""
-    },
-    disabled: {
-      true: "tw-text-box-disabled-inverse"
+import { extendTailwindMerge as e } from "tailwind-merge";
+import { tv as o } from "tailwind-variants";
+const r = e({
+  prefix: "tw-",
+  extend: {
+    classGroups: {
+      "font-size": ["text-body-x-small", "text-body-small", "text-body-medium", "text-body-large"]
     }
-  },
-  compoundVariants: [
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "default",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "weak",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "default",
-      emphasis: "strong",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "default",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "weak",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "positive",
-      emphasis: "strong",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "default",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "weak",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "negative",
-      emphasis: "strong",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "default",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "weak",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "danger",
-      emphasis: "strong",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "default",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "weak",
-      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"
-    },
-    {
-      disabled: !1,
-      variant: "loud",
-      emphasis: "strong",
-      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: {
-    emphasis: "strong",
-    variant: "default",
-    disabled: !1
   }
-});
+}), m = (...t) => r(...t), x = (t) => o(t);
 export {
-  s as iconStyles
+  m as cn,
+  x as sv
 };
 //# sourceMappingURL=fondue-components33.js.map

package/dist/fondue-components33.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components33.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        variant: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n        disabled: {\n            true: 'tw-text-box-disabled-inverse',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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        variant: 'default',\n        disabled: false,\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,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAEd;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,EAIZ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAElB,CAAC;"}
+{"version":3,"file":"fondue-components33.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,IAAA;AAAA,EAC/F;AAER,CAAC,GAEYC,IAAK,IAAIC,MACXH,EAAc,GAAGG,CAAU,GAGzBC,IAAS,CAACC,MACZC,EAAGD,CAAQ;"}

package/dist/fondue-components34.js

@@ -1,6 +1,27 @@
-import { sv as t } from "./fondue-components31.js";
-const s = t({
+import { FOCUS_OUTLINE as t } from "./fondue-components76.js";
+import { sv as e } from "./fondue-components33.js";
+const o = e({
+  base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium tw-box-border tw-whitespace-nowrap ${t}`,
   variants: {
+    disabled: {
+      true: "tw-not-allowed tw-pointer-events-none tw-text-box-disabled-inverse tw-bg-box-disabled"
+    },
+    rounding: {
+      medium: "tw-rounded",
+      full: "tw-rounded-full"
+    },
+    size: {
+      small: "tw-h-6 tw-text-body-small",
+      medium: "tw-h-9 tw-text-body-medium",
+      large: "tw-h-12 tw-text-body-large"
+    },
+    aspect: {
+      square: "tw-aspect-square tw-px-0",
+      default: ""
+    },
+    hugWidth: {
+      false: "tw-w-full"
+    },
     emphasis: {
       default: "",
       weak: "",
@@ -12,9 +33,6 @@ const s = t({
       negative: "",
       danger: "",
       loud: ""
-    },
-    disabled: {
-      true: "tw-text-box-disabled-inverse"
     }
   },
   compoundVariants: [
@@ -22,100 +40,119 @@ const s = t({
       disabled: !1,
       variant: "default",
       emphasis: "default",
-      class: "tw-text-button-text group-hover:tw-text-button-text-hover group-active:tw-text-button-text-pressed"
+      class: "tw-bg-button-background hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
     },
     {
       disabled: !1,
       variant: "default",
       emphasis: "weak",
-      class: "tw-text-button-text group-hover:tw-text-button-text-hover group-active:tw-text-button-text-pressed"
+      class: "hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
     },
     {
       disabled: !1,
       variant: "default",
       emphasis: "strong",
-      class: "tw-text-button-strong-icon group-hover:tw-text-button-strong-icon-hover group-active:tw-text-button-strong-text-pressed"
+      class: "tw-bg-button-strong-background hover:tw-bg-button-strong-background-hover active:tw-bg-button-strong-background-pressed"
     },
     {
       disabled: !1,
       variant: "positive",
       emphasis: "default",
-      class: "tw-text-button-positive-text group-hover:tw-text-button-positive-text-hover group-active:tw-text-button-positive-text-pressed"
+      class: "tw-bg-button-positive-background hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
     },
     {
       disabled: !1,
       variant: "positive",
       emphasis: "weak",
-      class: "tw-text-button-positive-text group-hover:tw-text-button-positive-text-hover group-active:tw-text-button-positive-text-pressed"
+      class: "hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
     },
     {
       disabled: !1,
       variant: "positive",
       emphasis: "strong",
-      class: "tw-text-button-strong-positive-text group-hover:tw-text-button-strong-positive-text-hover group-active:tw-text-button-strong-positive-text-pressed"
+      class: "tw-bg-button-strong-positive-background hover:tw-bg-button-strong-positive-background-hover active:tw-bg-button-strong-positive-background-pressed"
     },
     {
       disabled: !1,
       variant: "negative",
       emphasis: "default",
-      class: "tw-text-button-negative-text group-hover:tw-text-button-negative-text-hovergroup-active:tw-text-button-negative-text-pressed"
+      class: "tw-bg-button-negative-background hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
     },
     {
       disabled: !1,
       variant: "negative",
       emphasis: "weak",
-      class: "tw-text-button-negative-text group-hover:tw-text-button-negative-text-hovergroup-active:tw-text-button-negative-text-pressed"
+      class: "hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
     },
     {
       disabled: !1,
       variant: "negative",
       emphasis: "strong",
-      class: "tw-text-button-strong-negative-text group-hover:tw-text-button-strong-negative-text-hovergroup-active:tw-text-button-strong-negative-text-pressed"
+      class: "tw-bg-button-strong-negative-background hover:tw-bg-button-strong-negative-background-hover active:tw-bg-button-strong-negative-background-pressed"
     },
     {
       disabled: !1,
       variant: "danger",
       emphasis: "default",
-      class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed"
+      class: "tw-bg-button-background hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
     },
     {
       disabled: !1,
       variant: "danger",
       emphasis: "weak",
-      class: "tw-text-button-negative-icon group-hover:tw-text-button-negative-icon-hovergroup-active:tw-text-button-negative-icon-pressed"
+      class: "hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
     },
     {
       disabled: !1,
       variant: "danger",
       emphasis: "strong",
-      class: "tw-text-button-danger-text group-hover:tw-text-button-danger-text-hovergroup-active:tw-text-button-danger-text-pressed"
+      class: "tw-bg-button-danger-background hover:tw-bg-button-danger-background-hover active:tw-bg-button-danger-background-pressed"
     },
     {
       disabled: !1,
       variant: "loud",
       emphasis: "default",
-      class: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed"
+      class: "tw-bg-box-selected hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
     },
     {
       disabled: !1,
       variant: "loud",
       emphasis: "weak",
-      class: "tw-text-box-selected-inverse group-hover:tw-text-box-selected-inverse-hovergroup-active:tw-text-box-selected-inverse-pressed"
+      class: "tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
     },
     {
       disabled: !1,
       variant: "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"
+      class: "tw-bg-box-selected-strong hover:tw-bg-box-selected-strong-hover active:tw-bg-box-selected-strong-pressed "
+    },
+    {
+      aspect: "default",
+      size: "small",
+      class: "tw-px-2"
+    },
+    {
+      aspect: "default",
+      size: "medium",
+      class: "tw-px-4"
+    },
+    {
+      aspect: "default",
+      size: "large",
+      class: "tw-px-6"
     }
   ],
   defaultVariants: {
-    emphasis: "strong",
     variant: "default",
+    emphasis: "strong",
+    size: "medium",
+    rounding: "medium",
+    hugWidth: !0,
+    aspect: "default",
     disabled: !1
   }
 });
 export {
-  s as textStyles
+  o as buttonStyles
 };
 //# sourceMappingURL=fondue-components34.js.map

package/dist/fondue-components34.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components34.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        variant: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n        disabled: {\n            true: 'tw-text-box-disabled-inverse',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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            disabled: false,\n            variant: '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        variant: 'default',\n        disabled: false,\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,SAAS;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,MAAM;AAAA,IACV;AAAA,IACA,UAAU;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAEd;AAAA,EACA,kBAAkB;AAAA,IACd;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAGR;AAAA,IACA;AAAA,MACI,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,MACV,OACI;AAAA,IAAA;AAAA,EAIZ;AAAA,EACA,iBAAiB;AAAA,IACb,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,EAAA;AAElB,CAAC;"}
+{"version":3,"file":"fondue-components34.js","sources":["../src/components/Button/styles/buttonStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { FOCUS_OUTLINE } from '#/utilities/focusStyle';\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const buttonStyles = sv({\n    base:\n        'tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium tw-box-border tw-whitespace-nowrap ' +\n        `${FOCUS_OUTLINE}`,\n    variants: {\n        disabled: {\n            true: 'tw-not-allowed tw-pointer-events-none 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        variant: {\n            default: '',\n            positive: '',\n            negative: '',\n            danger: '',\n            loud: '',\n        },\n    },\n    compoundVariants: [\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'default',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-background ' +\n                'hover:tw-bg-button-strong-background-hover ' +\n                'active:tw-bg-button-strong-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-positive-background ' +\n                'hover:tw-bg-button-positive-background-hover ' +\n                'active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'positive',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-positive-background ' +\n                'hover:tw-bg-button-strong-positive-background-hover ' +\n                'active:tw-bg-button-strong-positive-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-negative-background ' +\n                'hover:tw-bg-button-negative-background-hover ' +\n                'active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'negative',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-strong-negative-background ' +\n                'hover:tw-bg-button-strong-negative-background-hover ' +\n                'active:tw-bg-button-strong-negative-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'default',\n            class:\n                'tw-bg-button-background ' +\n                'hover:tw-bg-button-background-hover ' +\n                'active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'weak',\n            class: 'hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'danger',\n            emphasis: 'strong',\n            class:\n                'tw-bg-button-danger-background ' +\n                'hover:tw-bg-button-danger-background-hover ' +\n                'active:tw-bg-button-danger-background-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'default',\n            class: 'tw-bg-box-selected hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'weak',\n            class: 'tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed',\n        },\n        {\n            disabled: false,\n            variant: 'loud',\n            emphasis: 'strong',\n            class:\n                'tw-bg-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        variant: 'default',\n        emphasis: 'strong',\n        size: 'medium',\n        rounding: 'medium',\n        hugWidth: true,\n        aspect: 'default',\n        disabled: false,\n    },\n});\n"],"names":["buttonStyles","sv","FOCUS_OUTLINE"],"mappings":"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"}