@frontify/fondue-components 22.2.0 → 23.0.0

package/dist/fondue-components34.js.map

@@ -1 +1 @@
-{"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;"}
+{"version":3,"file":"fondue-components34.js","sources":["../src/hooks/useTranslation.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCallback, useContext } from 'react';\n\nimport { ThemeContext } from '../components/ThemeProvider/ThemeProvider';\n\n/**\n * Hook to access translation functionality.\n *\n * @returns Object containing translation function\n *\n * @example\n * ```tsx\n * const { t } = useTranslation();\n *\n * // Simple translation\n * const label = t('ColorPicker_selectColor');\n *\n * // Translation with variables\n * const sortLabel = t('Table_sortByAscending', { column: 'Name' });\n * ```\n */\nexport const useTranslation = () => {\n    const { translations } = useContext(ThemeContext);\n\n    /**\n     * Translates a key to its localized string value.\n     * Keys follow the format ComponentName_localLabelName[_moreLocalLabelName]\n     * and support variable interpolation using ${variable} syntax.\n     *\n     * @param key - The translation key (e.g., 'ColorPicker_selectColor')\n     * @param variables - Optional variables to interpolate into the translation\n     * @returns The translated string, or the key itself if translation is not found\n     */\n    const t = useCallback(\n        (key: keyof typeof translations, variables?: Record<string, string>): string => {\n            // Direct lookup for flat keys\n            const value = translations[key];\n\n            if (value === undefined) {\n                if (process.env.NODE_ENV !== 'production') {\n                    console.warn(`[Fondue] Translation key \"${key}\" not found`);\n                }\n                return key;\n            }\n\n            if (typeof value !== 'string') {\n                if (process.env.NODE_ENV !== 'production') {\n                    console.warn(`[Fondue] Translation value for key \"${key}\" is not a string`);\n                }\n                return key;\n            }\n\n            let text = value;\n\n            // Variable interpolation: replace ${variable} with actual values\n            if (variables) {\n                for (const [varKey, varValue] of Object.entries(variables)) {\n                    text = text.replaceAll(`\\${${varKey}}`, varValue);\n                }\n            }\n\n            return text;\n        },\n        [translations],\n    );\n\n    return {\n        /** Translation function */\n        t,\n    };\n};\n"],"names":["useTranslation","translations","useContext","ThemeContext","useCallback","key","variables","value","text","varKey","varValue"],"mappings":";;AAsBO,MAAMA,IAAiB,MAAM;AAChC,QAAM,EAAE,cAAAC,EAAA,IAAiBC,EAAWC,CAAY;AA4ChD,SAAO;AAAA;AAAA,IAEH,GAnCMC;AAAA,MACN,CAACC,GAAgCC,MAA+C;AAE5E,cAAMC,IAAQN,EAAaI,CAAG;AAE9B,YAAIE,MAAU;AACV,iBAAI,QAAQ,IAAI,aAAa,gBACzB,QAAQ,KAAK,6BAA6BF,CAAG,aAAa,GAEvDA;AAGX,YAAI,OAAOE,KAAU;AACjB,iBAAI,QAAQ,IAAI,aAAa,gBACzB,QAAQ,KAAK,uCAAuCF,CAAG,mBAAmB,GAEvEA;AAGX,YAAIG,IAAOD;AAGX,YAAID;AACA,qBAAW,CAACG,GAAQC,CAAQ,KAAK,OAAO,QAAQJ,CAAS;AACrD,YAAAE,IAAOA,EAAK,WAAW,MAAMC,CAAM,KAAKC,CAAQ;AAIxD,eAAOF;AAAA,MACX;AAAA,MACA,CAACP,CAAY;AAAA,IAAA;AAAA,EAKb;AAER;"}

package/dist/fondue-components35.js

@@ -1,10 +1,11 @@
-const s = "_root_i684q_3", o = "_dismiss_i684q_156", t = {
-  root: s,
-  dismiss: o
+import { jsx as r } from "react/jsx-runtime";
+import s from "./fondue-components87.js";
+import { colorToCss as e } from "./fondue-components88.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-components35.js.map

package/dist/fondue-components35.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components35.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"fondue-components35.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-components36.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_i684q_3", o = "_dismiss_i684q_156", t = {
+  root: s,
+  dismiss: o
+};
 export {
-  f as propsToCssVariables
+  t as default,
+  o as dismiss,
+  s as root
 };
 //# sourceMappingURL=fondue-components36.js.map

package/dist/fondue-components36.js.map

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

package/dist/fondue-components37.js

@@ -1,8 +1,35 @@
-const o = "_root_f9dx4_6", 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-components37.js.map

package/dist/fondue-components37.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components37.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"fondue-components37.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-components38.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_f9dx4_6", t = {
+  root: o
+};
 export {
-  m as cn,
-  x as sv
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components38.js.map

package/dist/fondue-components38.js.map

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

package/dist/fondue-components39.js

@@ -1,158 +1,15 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components88.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: "",
-      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-components39.js.map

package/dist/fondue-components39.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components39.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-components39.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-components4.js

@@ -1,54 +1,58 @@
 import { jsx as a, jsxs as g, Fragment as h } from "react/jsx-runtime";
-import { IconCross as x } from "@frontify/fondue-icons";
-import { BadgeStatus as y } from "./fondue-components34.js";
-import p from "./fondue-components35.js";
-const C = ({
+import { IconCross as B } from "@frontify/fondue-icons";
+import { useTranslation as x } from "./fondue-components34.js";
+import { BadgeStatus as y } from "./fondue-components35.js";
+import p from "./fondue-components36.js";
+const P = ({
   "aria-label": e,
-  "data-test-id": s = "badge",
-  children: r,
+  "data-test-id": n = "badge",
+  children: o,
   disabled: t = !1,
-  emphasis: o = "strong",
-  onClick: d,
+  emphasis: r = "strong",
+  onClick: s,
   onDismiss: i,
   size: b = "default",
   status: f,
-  title: n,
+  title: d,
   variant: u = "default"
 }) => {
   const l = {
-    "aria-label": e || n,
+    "aria-label": e || d,
     "data-component": "badge",
     "data-disabled": t,
     "data-dismissable": !!i,
-    "data-emphasis": o,
+    "data-emphasis": r,
     "data-size": b,
-    "data-test-id": s,
+    "data-test-id": n,
     "data-variant": u,
     className: p.root,
-    title: n
+    title: d
   }, m = {
-    "aria-label": e || n,
+    "aria-label": e || d,
     disabled: t,
     onDismiss: i,
     status: f
   };
-  return d ? /* @__PURE__ */ a("button", { type: "button", disabled: t, ...l, onClick: d, children: /* @__PURE__ */ a(c, { ...m, children: r }) }) : /* @__PURE__ */ a("div", { ...l, children: /* @__PURE__ */ a(c, { ...m, children: r }) });
-}, c = ({ "aria-label": e, children: s, disabled: r = !1, onDismiss: t, status: o }) => /* @__PURE__ */ g(h, { children: [
-  o && /* @__PURE__ */ a(y, { status: o }),
-  s,
-  t && /* @__PURE__ */ a(
-    "button",
-    {
-      type: "button",
-      "aria-label": `Dismiss ${e}`,
-      className: p.dismiss,
-      disabled: r,
-      onClick: t,
-      children: /* @__PURE__ */ a(x, { size: "12" })
-    }
-  )
-] });
+  return s ? /* @__PURE__ */ a("button", { type: "button", disabled: t, ...l, onClick: s, children: /* @__PURE__ */ a(c, { ...m, children: o }) }) : /* @__PURE__ */ a("div", { ...l, children: /* @__PURE__ */ a(c, { ...m, children: o }) });
+}, c = ({ "aria-label": e, children: n, disabled: o = !1, onDismiss: t, status: r }) => {
+  const { t: s } = x();
+  return /* @__PURE__ */ g(h, { children: [
+    r && /* @__PURE__ */ a(y, { status: r }),
+    n,
+    t && /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        "aria-label": s("Badge_dismiss", { label: e || "" }),
+        className: p.dismiss,
+        disabled: o,
+        onClick: t,
+        children: /* @__PURE__ */ a(B, { size: "12" })
+      }
+    )
+  ] });
+};
 export {
-  C as Badge
+  P as Badge
 };
 //# sourceMappingURL=fondue-components4.js.map

package/dist/fondue-components4.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components4.js","sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport { BadgeStatus, type BadgeStatusProps } from './BadgeStatus';\nimport styles from './styles/badge.module.scss';\n\ntype BadgeStyle = 'default' | 'positive' | 'highlight' | 'warning' | 'negative';\n\ntype BadgeEmphasis = 'strong' | 'weak';\n\ntype BadgeSize = 'default' | 'small';\n\ntype BadgeProps = {\n    /**\n     * @default 'strong'\n     */\n    emphasis?: BadgeEmphasis;\n    /**\n     * @default 'default'\n     */\n    variant?: BadgeStyle;\n    /**\n     * @default 'default'\n     */\n    size?: BadgeSize;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler\n     */\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on dismiss - providing this will show the dismiss button\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * The color of the status dot\n     */\n    status?: BadgeStatusProps['status'];\n    title?: string;\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nexport const Badge = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'badge',\n    children,\n    disabled = false,\n    emphasis = 'strong',\n    onClick,\n    onDismiss,\n    size = 'default',\n    status,\n    title,\n    variant = 'default',\n}: BadgeProps) => {\n    const commonProps = {\n        'aria-label': ariaLabel || title,\n        'data-component': 'badge',\n        'data-disabled': disabled,\n        'data-dismissable': !!onDismiss,\n        'data-emphasis': emphasis,\n        'data-size': size,\n        'data-test-id': dataTestId,\n        'data-variant': variant,\n        className: styles.root,\n        title,\n    };\n\n    const contentProps = {\n        'aria-label': ariaLabel || title,\n        disabled,\n        onDismiss,\n        status,\n    };\n\n    if (onClick) {\n        return (\n            <button type=\"button\" disabled={disabled} {...commonProps} onClick={onClick}>\n                <BadgeContent {...contentProps}>{children}</BadgeContent>\n            </button>\n        );\n    }\n\n    return (\n        <div {...commonProps}>\n            <BadgeContent {...contentProps}>{children}</BadgeContent>\n        </div>\n    );\n};\n\nconst BadgeContent = ({ 'aria-label': ariaLabel, children, disabled = false, onDismiss, status }: BadgeProps) => {\n    return (\n        <>\n            {status && <BadgeStatus status={status} />}\n            {children}\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    aria-label={`Dismiss ${ariaLabel}`}\n                    className={styles.dismiss}\n                    disabled={disabled}\n                    onClick={onDismiss}\n                >\n                    <IconCross size=\"12\" />\n                </button>\n            )}\n        </>\n    );\n};\n"],"names":["Badge","ariaLabel","dataTestId","children","disabled","emphasis","onClick","onDismiss","size","status","title","variant","commonProps","styles","contentProps","jsx","BadgeContent","jsxs","Fragment","BadgeStatus","IconCross"],"mappings":";;;;AAiDO,MAAMA,IAAQ,CAAC;AAAA,EAClB,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AACd,MAAkB;AACd,QAAMC,IAAc;AAAA,IAChB,cAAcX,KAAaS;AAAA,IAC3B,kBAAkB;AAAA,IAClB,iBAAiBN;AAAA,IACjB,oBAAoB,CAAC,CAACG;AAAA,IACtB,iBAAiBF;AAAA,IACjB,aAAaG;AAAA,IACb,gBAAgBN;AAAA,IAChB,gBAAgBS;AAAA,IAChB,WAAWE,EAAO;AAAA,IAClB,OAAAH;AAAA,EAAA,GAGEI,IAAe;AAAA,IACjB,cAAcb,KAAaS;AAAA,IAC3B,UAAAN;AAAA,IACA,WAAAG;AAAA,IACA,QAAAE;AAAA,EAAA;AAGJ,SAAIH,IAEI,gBAAAS,EAAC,UAAA,EAAO,MAAK,UAAS,UAAAX,GAAqB,GAAGQ,GAAa,SAAAN,GACvD,UAAA,gBAAAS,EAACC,GAAA,EAAc,GAAGF,GAAe,UAAAX,GAAS,GAC9C,IAKJ,gBAAAY,EAAC,SAAK,GAAGH,GACL,4BAACI,GAAA,EAAc,GAAGF,GAAe,UAAAX,EAAA,CAAS,EAAA,CAC9C;AAER,GAEMa,IAAe,CAAC,EAAE,cAAcf,GAAW,UAAAE,GAAU,UAAAC,IAAW,IAAO,WAAAG,GAAW,QAAAE,QAEhF,gBAAAQ,EAAAC,GAAA,EACK,UAAA;AAAA,EAAAT,KAAU,gBAAAM,EAACI,KAAY,QAAAV,EAAA,CAAgB;AAAA,EACvCN;AAAA,EACAI,KACG,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAY,WAAWd,CAAS;AAAA,MAChC,WAAWY,EAAO;AAAA,MAClB,UAAAT;AAAA,MACA,SAASG;AAAA,MAET,UAAA,gBAAAQ,EAACK,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,IAAA;AAAA,EAAA;AACzB,GAER;"}
+{"version":3,"file":"fondue-components4.js","sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { BadgeStatus, type BadgeStatusProps } from './BadgeStatus';\nimport styles from './styles/badge.module.scss';\n\ntype BadgeStyle = 'default' | 'positive' | 'highlight' | 'warning' | 'negative';\n\ntype BadgeEmphasis = 'strong' | 'weak';\n\ntype BadgeSize = 'default' | 'small';\n\ntype BadgeProps = {\n    /**\n     * @default 'strong'\n     */\n    emphasis?: BadgeEmphasis;\n    /**\n     * @default 'default'\n     */\n    variant?: BadgeStyle;\n    /**\n     * @default 'default'\n     */\n    size?: BadgeSize;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler\n     */\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on dismiss - providing this will show the dismiss button\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * The color of the status dot\n     */\n    status?: BadgeStatusProps['status'];\n    title?: string;\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nexport const Badge = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'badge',\n    children,\n    disabled = false,\n    emphasis = 'strong',\n    onClick,\n    onDismiss,\n    size = 'default',\n    status,\n    title,\n    variant = 'default',\n}: BadgeProps) => {\n    const commonProps = {\n        'aria-label': ariaLabel || title,\n        'data-component': 'badge',\n        'data-disabled': disabled,\n        'data-dismissable': !!onDismiss,\n        'data-emphasis': emphasis,\n        'data-size': size,\n        'data-test-id': dataTestId,\n        'data-variant': variant,\n        className: styles.root,\n        title,\n    };\n\n    const contentProps = {\n        'aria-label': ariaLabel || title,\n        disabled,\n        onDismiss,\n        status,\n    };\n\n    if (onClick) {\n        return (\n            <button type=\"button\" disabled={disabled} {...commonProps} onClick={onClick}>\n                <BadgeContent {...contentProps}>{children}</BadgeContent>\n            </button>\n        );\n    }\n\n    return (\n        <div {...commonProps}>\n            <BadgeContent {...contentProps}>{children}</BadgeContent>\n        </div>\n    );\n};\n\nconst BadgeContent = ({ 'aria-label': ariaLabel, children, disabled = false, onDismiss, status }: BadgeProps) => {\n    const { t } = useTranslation();\n\n    return (\n        <>\n            {status && <BadgeStatus status={status} />}\n            {children}\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    aria-label={t('Badge_dismiss', { label: ariaLabel || '' })}\n                    className={styles.dismiss}\n                    disabled={disabled}\n                    onClick={onDismiss}\n                >\n                    <IconCross size=\"12\" />\n                </button>\n            )}\n        </>\n    );\n};\n"],"names":["Badge","ariaLabel","dataTestId","children","disabled","emphasis","onClick","onDismiss","size","status","title","variant","commonProps","styles","contentProps","jsx","BadgeContent","t","useTranslation","jsxs","Fragment","BadgeStatus","IconCross"],"mappings":";;;;;AAmDO,MAAMA,IAAQ,CAAC;AAAA,EAClB,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AACd,MAAkB;AACd,QAAMC,IAAc;AAAA,IAChB,cAAcX,KAAaS;AAAA,IAC3B,kBAAkB;AAAA,IAClB,iBAAiBN;AAAA,IACjB,oBAAoB,CAAC,CAACG;AAAA,IACtB,iBAAiBF;AAAA,IACjB,aAAaG;AAAA,IACb,gBAAgBN;AAAA,IAChB,gBAAgBS;AAAA,IAChB,WAAWE,EAAO;AAAA,IAClB,OAAAH;AAAA,EAAA,GAGEI,IAAe;AAAA,IACjB,cAAcb,KAAaS;AAAA,IAC3B,UAAAN;AAAA,IACA,WAAAG;AAAA,IACA,QAAAE;AAAA,EAAA;AAGJ,SAAIH,IAEI,gBAAAS,EAAC,UAAA,EAAO,MAAK,UAAS,UAAAX,GAAqB,GAAGQ,GAAa,SAAAN,GACvD,UAAA,gBAAAS,EAACC,GAAA,EAAc,GAAGF,GAAe,UAAAX,GAAS,GAC9C,IAKJ,gBAAAY,EAAC,SAAK,GAAGH,GACL,4BAACI,GAAA,EAAc,GAAGF,GAAe,UAAAX,EAAA,CAAS,EAAA,CAC9C;AAER,GAEMa,IAAe,CAAC,EAAE,cAAcf,GAAW,UAAAE,GAAU,UAAAC,IAAW,IAAO,WAAAG,GAAW,QAAAE,QAAyB;AAC7G,QAAM,EAAE,GAAAQ,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAX,KAAU,gBAAAM,EAACM,KAAY,QAAAZ,EAAA,CAAgB;AAAA,IACvCN;AAAA,IACAI,KACG,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,cAAYE,EAAE,iBAAiB,EAAE,OAAOhB,KAAa,IAAI;AAAA,QACzD,WAAWY,EAAO;AAAA,QAClB,UAAAT;AAAA,QACA,SAASG;AAAA,QAET,UAAA,gBAAAQ,EAACO,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACzB,GAER;AAER;"}