@frontify/fondue-components 19.4.0 → 19.6.0

package/dist/fondue-components33.js

@@ -1,11 +1,24 @@
-import { jsx as r } from "react/jsx-runtime";
-import s from "./fondue-components82.js";
-import { colorToCss as e } from "./fondue-components83.js";
-const a = ["default", "positive", "highlight", "warning", "negative"], i = (t) => typeof t == "string" && a.includes(t), p = ({ status: t }) => {
-  const o = i(t) ? { "data-status": t } : { style: { backgroundColor: typeof t == "string" ? t : e(t) || "transparent" } };
-  return /* @__PURE__ */ r("div", { "data-test-id": "badge-status", className: s.root, ...o });
+const o = "_root_1jhe2_2", c = "_accordionItem_1jhe2_23", n = "_accordionTrigger_1jhe2_29", r = "_accordionHeader_1jhe2_34", t = "_accordionSlot_1jhe2_41", e = "_accordionCaret_1jhe2_66", a = "_accordionTriggerContent_1jhe2_74", i = "_accordionContent_1jhe2_79", d = "_accordionContentText_1jhe2_108", _ = {
+  root: o,
+  accordionItem: c,
+  accordionTrigger: n,
+  accordionHeader: r,
+  accordionSlot: t,
+  accordionCaret: e,
+  accordionTriggerContent: a,
+  accordionContent: i,
+  accordionContentText: d
 };
 export {
-  p as BadgeStatus
+  e as accordionCaret,
+  i as accordionContent,
+  d as accordionContentText,
+  r as accordionHeader,
+  c as accordionItem,
+  t as accordionSlot,
+  n as accordionTrigger,
+  a as accordionTriggerContent,
+  _ as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components33.js.map

package/dist/fondue-components33.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components33.js","sources":["../src/components/Badge/BadgeStatus.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from './styles/badgestatus.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss } from './utils';\n\ntype BadgeStatusType = 'default' | 'positive' | 'highlight' | 'warning' | 'negative';\n\nconst badgeStatusMap = ['default', 'positive', 'highlight', 'warning', 'negative'];\n\nexport type BadgeStatusProps = { status: BadgeStatusType } | { status: RgbaColor | string };\n\nconst isBadgeStatusType = (value: RgbaColor | string): value is BadgeStatusType =>\n    typeof value === 'string' && badgeStatusMap.includes(value);\n\nexport const BadgeStatus = ({ status }: BadgeStatusProps) => {\n    const colorProps = isBadgeStatusType(status)\n        ? { 'data-status': status }\n        : { style: { backgroundColor: typeof status === 'string' ? status : colorToCss(status) || 'transparent' } };\n\n    return <div data-test-id=\"badge-status\" className={styles.root} {...colorProps}></div>;\n};\n"],"names":["badgeStatusMap","isBadgeStatusType","value","BadgeStatus","status","colorProps","colorToCss","jsx","styles"],"mappings":";;;AAQA,MAAMA,IAAiB,CAAC,WAAW,YAAY,aAAa,WAAW,UAAU,GAI3EC,IAAoB,CAACC,MACvB,OAAOA,KAAU,YAAYF,EAAe,SAASE,CAAK,GAEjDC,IAAc,CAAC,EAAE,QAAAC,QAA+B;AACzD,QAAMC,IAAaJ,EAAkBG,CAAM,IACrC,EAAE,eAAeA,EAAA,IACjB,EAAE,OAAO,EAAE,iBAAiB,OAAOA,KAAW,WAAWA,IAASE,EAAWF,CAAM,KAAK,gBAAc;AAE5G,SAAO,gBAAAG,EAAC,SAAI,gBAAa,gBAAe,WAAWC,EAAO,MAAO,GAAGH,GAAY;AACpF;"}
+{"version":3,"file":"fondue-components33.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/fondue-components34.js

@@ -1,10 +1,11 @@
-const s = "_root_qxbmr_3", o = "_dismiss_qxbmr_161", t = {
-  root: s,
-  dismiss: o
+import { jsx as r } from "react/jsx-runtime";
+import s from "./fondue-components85.js";
+import { colorToCss as e } from "./fondue-components86.js";
+const a = ["default", "positive", "highlight", "warning", "negative"], i = (t) => typeof t == "string" && a.includes(t), p = ({ status: t }) => {
+  const o = i(t) ? { "data-status": t } : { style: { backgroundColor: typeof t == "string" ? t : e(t) || "transparent" } };
+  return /* @__PURE__ */ r("div", { "data-test-id": "badge-status", className: s.root, ...o });
 };
 export {
-  t as default,
-  o as dismiss,
-  s as root
+  p as BadgeStatus
 };
 //# sourceMappingURL=fondue-components34.js.map

package/dist/fondue-components34.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components34.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"fondue-components34.js","sources":["../src/components/Badge/BadgeStatus.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from './styles/badgestatus.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss } from './utils';\n\ntype BadgeStatusType = 'default' | 'positive' | 'highlight' | 'warning' | 'negative';\n\nconst badgeStatusMap = ['default', 'positive', 'highlight', 'warning', 'negative'];\n\nexport type BadgeStatusProps = { status: BadgeStatusType } | { status: RgbaColor | string };\n\nconst isBadgeStatusType = (value: RgbaColor | string): value is BadgeStatusType =>\n    typeof value === 'string' && badgeStatusMap.includes(value);\n\nexport const BadgeStatus = ({ status }: BadgeStatusProps) => {\n    const colorProps = isBadgeStatusType(status)\n        ? { 'data-status': status }\n        : { style: { backgroundColor: typeof status === 'string' ? status : colorToCss(status) || 'transparent' } };\n\n    return <div data-test-id=\"badge-status\" className={styles.root} {...colorProps}></div>;\n};\n"],"names":["badgeStatusMap","isBadgeStatusType","value","BadgeStatus","status","colorProps","colorToCss","jsx","styles"],"mappings":";;;AAQA,MAAMA,IAAiB,CAAC,WAAW,YAAY,aAAa,WAAW,UAAU,GAI3EC,IAAoB,CAACC,MACvB,OAAOA,KAAU,YAAYF,EAAe,SAASE,CAAK,GAEjDC,IAAc,CAAC,EAAE,QAAAC,QAA+B;AACzD,QAAMC,IAAaJ,EAAkBG,CAAM,IACrC,EAAE,eAAeA,EAAA,IACjB,EAAE,OAAO,EAAE,iBAAiB,OAAOA,KAAW,WAAWA,IAASE,EAAWF,CAAM,KAAK,gBAAc;AAE5G,SAAO,gBAAAG,EAAC,SAAI,gBAAa,gBAAe,WAAWC,EAAO,MAAO,GAAGH,GAAY;AACpF;"}

package/dist/fondue-components35.js

@@ -1,35 +1,10 @@
-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, o]) => {
-  if (g(t))
-    return i;
-  const e = t in r ? r[t] : t in s ? s[t] : t, p = e == null ? void 0 : e.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-  if (typeof o == "object")
-    for (const [d, a] of Object.entries(o))
-      a !== void 0 && (i[`--${d}-${p}`] = m(t, a));
-  else
-    i[`--${p}`] = m(t, o);
-  return i;
-}, {});
+const s = "_root_qxbmr_3", o = "_dismiss_qxbmr_161", t = {
+  root: s,
+  dismiss: o
+};
 export {
-  f as propsToCssVariables
+  t as default,
+  o as dismiss,
+  s as root
 };
 //# sourceMappingURL=fondue-components35.js.map

package/dist/fondue-components35.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components35.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        // The lookahead is necessary to split camelCase boundaries; disabling false-positive lint warning\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;AACvD,MAAIJ,EAAWC,CAAG;AACd,WAAOO;AAGX,QAAMC,IACFR,KAAOM,IACDA,EAA+BN,CAAG,IAClCA,KAAOC,IACLA,EAA0BD,CAAG,IAC7BA,GAENS,IAAuBD,KAAA,gBAAAA,EAAa,WAAW,+BAA+B,SAAS;AAE7F,MAAI,OAAOL,KAAU;AACjB,eAAW,CAACO,GAAYC,CAAe,KAAK,OAAO,QAAQR,CAAK;AAC5D,MAAIQ,MAAoB,WAEpBJ,EAAI,KAAKG,CAAU,IAAID,CAAoB,EAAE,IAAIP,EAAyBF,GAAKW,CAAe;AAAA;AAKtG,IAAAJ,EAAI,KAAKE,CAAoB,EAAE,IAAIP,EAAyBF,GAAKG,CAAK;AAG1E,SAAOI;AACX,GAAG,CAAA,CAAmB;"}
+{"version":3,"file":"fondue-components35.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/fondue-components36.js

@@ -1,8 +1,35 @@
-const o = "_root_5sic9_5", t = {
-  root: o
-};
+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, o]) => {
+  if (g(t))
+    return i;
+  const e = t in r ? r[t] : t in s ? s[t] : t, p = e == null ? void 0 : e.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+  if (typeof o == "object")
+    for (const [d, a] of Object.entries(o))
+      a !== void 0 && (i[`--${d}-${p}`] = m(t, a));
+  else
+    i[`--${p}`] = m(t, o);
+  return i;
+}, {});
 export {
-  t as default,
-  o as root
+  f as propsToCssVariables
 };
 //# sourceMappingURL=fondue-components36.js.map

package/dist/fondue-components36.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components36.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"fondue-components36.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        // The lookahead is necessary to split camelCase boundaries; disabling false-positive lint warning\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;AACvD,MAAIJ,EAAWC,CAAG;AACd,WAAOO;AAGX,QAAMC,IACFR,KAAOM,IACDA,EAA+BN,CAAG,IAClCA,KAAOC,IACLA,EAA0BD,CAAG,IAC7BA,GAENS,IAAuBD,KAAA,gBAAAA,EAAa,WAAW,+BAA+B,SAAS;AAE7F,MAAI,OAAOL,KAAU;AACjB,eAAW,CAACO,GAAYC,CAAe,KAAK,OAAO,QAAQR,CAAK;AAC5D,MAAIQ,MAAoB,WAEpBJ,EAAI,KAAKG,CAAU,IAAID,CAAoB,EAAE,IAAIP,EAAyBF,GAAKW,CAAe;AAAA;AAKtG,IAAAJ,EAAI,KAAKE,CAAoB,EAAE,IAAIP,EAAyBF,GAAKG,CAAK;AAG1E,SAAOI;AACX,GAAG,CAAA,CAAmB;"}

package/dist/fondue-components37.js

@@ -1,15 +1,8 @@
-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 o = "_root_5sic9_5", t = {
+  root: o
+};
 export {
-  m as cn,
-  x as sv
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components37.js.map

package/dist/fondue-components37.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components37.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-components37.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components38.js

@@ -1,158 +1,15 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components84.js";
-import { sv as e } from "./fondue-components37.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 tw-transition-colors ${t}`,
-  variants: {
-    disabled: {
-      true: "tw-cursor-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: ""
+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: "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
   }
-});
+}), m = (...t) => r(...t), x = (t) => o(t);
 export {
-  o as buttonStyles
+  m as cn,
+  x as sv
 };
 //# sourceMappingURL=fondue-components38.js.map

package/dist/fondue-components38.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components38.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 tw-transition-colors ' +\n        `${FOCUS_OUTLINE}`,\n    variants: {\n        disabled: {\n            true: 'tw-cursor-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-components38.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-components39.js

@@ -1,6 +1,27 @@
-import { sv as t } from "./fondue-components37.js";
-const s = t({
+import { FOCUS_OUTLINE as t } from "./fondue-components87.js";
+import { sv as e } from "./fondue-components38.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 tw-transition-colors ${t}`,
   variants: {
+    disabled: {
+      true: "tw-cursor-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: "[&_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"
+      class: "tw-bg-button-background hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
     },
     {
       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"
+      class: "hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
     },
     {
       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"
+      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: "[&_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"
+      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: "[&_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"
+      class: "hover:tw-bg-button-positive-background-hover active:tw-bg-button-positive-background-pressed"
     },
     {
       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"
+      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: "[&_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"
+      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: "[&_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"
+      class: "hover:tw-bg-button-negative-background-hover active:tw-bg-button-negative-background-pressed"
     },
     {
       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"
+      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: "[&_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"
+      class: "tw-bg-button-background hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
     },
     {
       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"
+      class: "hover:tw-bg-button-background-hover active:tw-bg-button-background-pressed"
     },
     {
       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"
+      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: "[&_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"
+      class: "tw-bg-box-selected hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
     },
     {
       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"
+      class: "tw-border-transparent hover:tw-bg-box-selected-hover active:tw-bg-box-selected-pressed"
     },
     {
       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"
+      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 iconStyles
+  o as buttonStyles
 };
 //# sourceMappingURL=fondue-components39.js.map