@frontify/fondue-components 29.1.0 → 29.2.0

package/dist/fondue-components4.js

@@ -1,50 +1,50 @@
-import { jsx as t, jsxs as p, Fragment as B } from "react/jsx-runtime";
+import { jsx as t, jsxs as p, Fragment as h } from "react/jsx-runtime";
 import { IconCross as y } from "@frontify/fondue-icons";
-import { useTranslation as v } from "./fondue-components42.js";
-import { BadgeStatus as x } from "./fondue-components43.js";
-import l from "./fondue-components44.js";
-const S = ({
+import { useTranslation as N } from "./fondue-components43.js";
+import { BadgeStatus as v } from "./fondue-components44.js";
+import l from "./fondue-components45.js";
+const x = ({
   "aria-label": a,
   "data-test-id": e = "badge",
   children: d,
   disabled: r = !1,
   emphasis: b = "strong",
   onClick: o,
-  onDismiss: n,
+  onDismiss: s,
   size: f = "default",
   status: i,
-  title: s,
+  title: n,
   variant: g = "default"
 }) => {
-  const { t: h } = v(), m = {
-    "aria-label": a || s,
+  const { t: B } = N(), m = {
+    "aria-label": a || n,
     "data-component": "badge",
     "data-disabled": r,
-    "data-dismissable": !!n,
+    "data-dismissable": !!s,
     "data-emphasis": b,
     "data-size": f,
     "data-test-id": e,
     "data-variant": g,
     className: l.root,
-    title: s
-  }, u = n ? /* @__PURE__ */ t(
+    title: n
+  }, u = s ? /* @__PURE__ */ t(
     "button",
     {
       type: "button",
-      "aria-label": h("Badge_dismiss", { label: a || s || "" }),
+      "aria-label": B("Badge_dismiss", { label: a || n || "" }),
       className: l.dismiss,
       "data-test-id": `${e}-dismiss`,
       disabled: r,
-      onClick: n,
+      onClick: s,
       children: /* @__PURE__ */ t(y, { size: "12" })
     }
   ) : null;
-  return o && n ? /* @__PURE__ */ p("div", { ...m, children: [
+  return o && s ? /* @__PURE__ */ p("div", { ...m, children: [
     /* @__PURE__ */ t(
       "button",
       {
         type: "button",
-        "aria-label": a || s,
+        "aria-label": a || n,
         className: l.inner,
         disabled: r,
         onClick: o,
@@ -56,11 +56,13 @@ const S = ({
     /* @__PURE__ */ t(c, { status: i, children: d }),
     u
   ] });
-}, c = ({ children: a, status: e }) => /* @__PURE__ */ p(B, { children: [
-  e && /* @__PURE__ */ t(x, { status: e }),
+};
+x.displayName = "Badge";
+const c = ({ children: a, status: e }) => /* @__PURE__ */ p(h, { children: [
+  e && /* @__PURE__ */ t(v, { status: e }),
   a
 ] });
 export {
-  S as Badge
+  x 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 { 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 { t } = useTranslation();\n\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 dismissButton = onDismiss ? (\n        <button\n            type=\"button\"\n            aria-label={t('Badge_dismiss', { label: ariaLabel || title || '' })}\n            className={styles.dismiss}\n            data-test-id={`${dataTestId}-dismiss`}\n            disabled={disabled}\n            onClick={onDismiss}\n        >\n            <IconCross size=\"12\" />\n        </button>\n    ) : null;\n\n    // When both onClick and onDismiss are provided, render as siblings inside a\n    // wrapper div to avoid nesting interactive elements (invalid HTML / a11y issue).\n    if (onClick && onDismiss) {\n        return (\n            <div {...commonProps}>\n                <button\n                    type=\"button\"\n                    aria-label={ariaLabel || title}\n                    className={styles.inner}\n                    disabled={disabled}\n                    onClick={onClick}\n                >\n                    <BadgeContent status={status}>{children}</BadgeContent>\n                </button>\n                {dismissButton}\n            </div>\n        );\n    }\n\n    if (onClick) {\n        return (\n            <button type=\"button\" disabled={disabled} {...commonProps} onClick={onClick}>\n                <BadgeContent status={status}>{children}</BadgeContent>\n            </button>\n        );\n    }\n\n    return (\n        <div {...commonProps}>\n            <BadgeContent status={status}>{children}</BadgeContent>\n            {dismissButton}\n        </div>\n    );\n};\n\nconst BadgeContent = ({ children, status }: { children: ReactNode; status?: BadgeStatusProps['status'] }) => (\n    <>\n        {status && <BadgeStatus status={status} />}\n        {children}\n    </>\n);\n"],"names":["Badge","ariaLabel","dataTestId","children","disabled","emphasis","onClick","onDismiss","size","status","title","variant","t","useTranslation","commonProps","styles","dismissButton","jsx","IconCross","jsxs","BadgeContent","Fragment","BadgeStatus"],"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,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GAERC,IAAc;AAAA,IAChB,cAAcb,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,WAAWI,EAAO;AAAA,IAClB,OAAAL;AAAA,EAAA,GAGEM,IAAgBT,IAClB,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAYL,EAAE,iBAAiB,EAAE,OAAOX,KAAaS,KAAS,IAAI;AAAA,MAClE,WAAWK,EAAO;AAAA,MAClB,gBAAc,GAAGb,CAAU;AAAA,MAC3B,UAAAE;AAAA,MACA,SAASG;AAAA,MAET,UAAA,gBAAAU,EAACC,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,IAAA;AAAA,EAAA,IAEzB;AAIJ,SAAIZ,KAAWC,IAEP,gBAAAY,EAAC,OAAA,EAAK,GAAGL,GACL,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,cAAYhB,KAAaS;AAAA,QACzB,WAAWK,EAAO;AAAA,QAClB,UAAAX;AAAA,QACA,SAAAE;AAAA,QAEA,UAAA,gBAAAW,EAACG,GAAA,EAAa,QAAAX,GAAiB,UAAAN,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAE3Ca;AAAA,EAAA,GACL,IAIJV,IAEI,gBAAAW,EAAC,UAAA,EAAO,MAAK,UAAS,UAAAb,GAAqB,GAAGU,GAAa,SAAAR,GACvD,UAAA,gBAAAW,EAACG,GAAA,EAAa,QAAAX,GAAiB,UAAAN,EAAA,CAAS,GAC5C,IAKJ,gBAAAgB,EAAC,OAAA,EAAK,GAAGL,GACL,UAAA;AAAA,IAAA,gBAAAG,EAACG,GAAA,EAAa,QAAAX,GAAiB,UAAAN,EAAA,CAAS;AAAA,IACvCa;AAAA,EAAA,GACL;AAER,GAEMI,IAAe,CAAC,EAAE,UAAAjB,GAAU,QAAAM,EAAA,MAC9B,gBAAAU,EAAAE,GAAA,EACK,UAAA;AAAA,EAAAZ,KAAU,gBAAAQ,EAACK,KAAY,QAAAb,EAAA,CAAgB;AAAA,EACvCN;AAAA,GACL;"}
+{"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 { t } = useTranslation();\n\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 dismissButton = onDismiss ? (\n        <button\n            type=\"button\"\n            aria-label={t('Badge_dismiss', { label: ariaLabel || title || '' })}\n            className={styles.dismiss}\n            data-test-id={`${dataTestId}-dismiss`}\n            disabled={disabled}\n            onClick={onDismiss}\n        >\n            <IconCross size=\"12\" />\n        </button>\n    ) : null;\n\n    // When both onClick and onDismiss are provided, render as siblings inside a\n    // wrapper div to avoid nesting interactive elements (invalid HTML / a11y issue).\n    if (onClick && onDismiss) {\n        return (\n            <div {...commonProps}>\n                <button\n                    type=\"button\"\n                    aria-label={ariaLabel || title}\n                    className={styles.inner}\n                    disabled={disabled}\n                    onClick={onClick}\n                >\n                    <BadgeContent status={status}>{children}</BadgeContent>\n                </button>\n                {dismissButton}\n            </div>\n        );\n    }\n\n    if (onClick) {\n        return (\n            <button type=\"button\" disabled={disabled} {...commonProps} onClick={onClick}>\n                <BadgeContent status={status}>{children}</BadgeContent>\n            </button>\n        );\n    }\n\n    return (\n        <div {...commonProps}>\n            <BadgeContent status={status}>{children}</BadgeContent>\n            {dismissButton}\n        </div>\n    );\n};\n\nBadge.displayName = 'Badge';\n\nconst BadgeContent = ({ children, status }: { children: ReactNode; status?: BadgeStatusProps['status'] }) => (\n    <>\n        {status && <BadgeStatus status={status} />}\n        {children}\n    </>\n);\n"],"names":["Badge","ariaLabel","dataTestId","children","disabled","emphasis","onClick","onDismiss","size","status","title","variant","t","useTranslation","commonProps","styles","dismissButton","jsx","IconCross","jsxs","BadgeContent","Fragment","BadgeStatus"],"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,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GAERC,IAAc;AAAA,IAChB,cAAcb,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,WAAWI,EAAO;AAAA,IAClB,OAAAL;AAAA,EAAA,GAGEM,IAAgBT,IAClB,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAYL,EAAE,iBAAiB,EAAE,OAAOX,KAAaS,KAAS,IAAI;AAAA,MAClE,WAAWK,EAAO;AAAA,MAClB,gBAAc,GAAGb,CAAU;AAAA,MAC3B,UAAAE;AAAA,MACA,SAASG;AAAA,MAET,UAAA,gBAAAU,EAACC,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,IAAA;AAAA,EAAA,IAEzB;AAIJ,SAAIZ,KAAWC,IAEP,gBAAAY,EAAC,OAAA,EAAK,GAAGL,GACL,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,cAAYhB,KAAaS;AAAA,QACzB,WAAWK,EAAO;AAAA,QAClB,UAAAX;AAAA,QACA,SAAAE;AAAA,QAEA,UAAA,gBAAAW,EAACG,GAAA,EAAa,QAAAX,GAAiB,UAAAN,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAE3Ca;AAAA,EAAA,GACL,IAIJV,IAEI,gBAAAW,EAAC,UAAA,EAAO,MAAK,UAAS,UAAAb,GAAqB,GAAGU,GAAa,SAAAR,GACvD,UAAA,gBAAAW,EAACG,GAAA,EAAa,QAAAX,GAAiB,UAAAN,EAAA,CAAS,GAC5C,IAKJ,gBAAAgB,EAAC,OAAA,EAAK,GAAGL,GACL,UAAA;AAAA,IAAA,gBAAAG,EAACG,GAAA,EAAa,QAAAX,GAAiB,UAAAN,EAAA,CAAS;AAAA,IACvCa;AAAA,EAAA,GACL;AAER;AAEAhB,EAAM,cAAc;AAEpB,MAAMoB,IAAe,CAAC,EAAE,UAAAjB,GAAU,QAAAM,EAAA,MAC9B,gBAAAU,EAAAE,GAAA,EACK,UAAA;AAAA,EAAAZ,KAAU,gBAAAQ,EAACK,KAAY,QAAAb,EAAA,CAAgB;AAAA,EACvCN;AAAA,GACL;"}

package/dist/fondue-components40.js

@@ -1,60 +1,40 @@
-import { jsx as o, jsxs as y } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-tooltip";
-import { forwardRef as d } from "react";
-import { useFondueTheme as R, ThemeProvider as N } from "./fondue-components39.js";
-import s from "./fondue-components110.js";
-const p = ({ children: t, enterDelay: e = 700, open: i, onOpenChange: n }) => /* @__PURE__ */ o(r.Provider, { children: /* @__PURE__ */ o(r.Root, { delayDuration: e, open: i, onOpenChange: n, children: t }) });
-p.displayName = "Tooltip.Root";
-const f = ({ asChild: t = !1, children: e, "data-test-id": i = "fondue-tooltip-trigger" }, n) => /* @__PURE__ */ o(
-  r.Trigger,
-  {
-    "data-tooltip-trigger": !0,
-    "data-test-id": i,
-    type: t ? void 0 : "button",
-    asChild: t,
-    ref: n,
-    children: e
-  }
-);
-f.displayName = "Tooltip.Trigger";
-const m = ({
-  children: t,
-  className: e,
-  maxWidth: i,
-  "data-test-id": n = "fondue-tooltip-content",
-  padding: g = "spacious",
-  side: u
-}, c) => {
-  const { theme: T, dir: l } = R(), h = (a) => !a || l === "ltr" ? a : a === "left" ? "right" : a === "right" ? "left" : a;
-  return /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ o(N, { theme: T, dir: l, children: /* @__PURE__ */ y(
-    r.Content,
-    {
-      dir: l,
-      "data-test-id": n,
-      "data-tooltip-spacing": g,
-      className: [s.root, e].filter(Boolean).join(" "),
-      style: { maxWidth: i },
-      collisionPadding: 16,
-      sideOffset: 8,
-      ref: c,
-      side: h(u),
-      children: [
-        t,
-        /* @__PURE__ */ o(r.Arrow, { "aria-hidden": "true", className: s.arrow })
-      ]
-    }
-  ) }) });
-};
-m.displayName = "Tooltip.Content";
-const w = {
-  Root: p,
-  Trigger: d(f),
-  Content: d(m)
+import { jsx as n } from "react/jsx-runtime";
+import d from "./fondue-components113.js";
+import { Slot as p } from "@radix-ui/react-slot";
+import { createContext as u, useContext as a, useMemo as x } from "react";
+import { enUS as s } from "./fondue-components114.js";
+const r = u({
+  theme: "light",
+  dir: "ltr",
+  translations: s
+});
+r.displayName = "ThemeContext";
+const g = () => {
+  const e = a(r);
+  return {
+    ...e,
+    dir: e.dir || "ltr"
+  };
+}, y = ({
+  children: e,
+  theme: t = "light",
+  dir: o = "ltr",
+  translations: m = s,
+  asChild: i = !1
+}) => {
+  const l = i ? p : "div", c = x(
+    () => ({
+      theme: t,
+      dir: o,
+      translations: m
+    }),
+    [o, t, m]
+  );
+  return /* @__PURE__ */ n(r.Provider, { value: c, children: /* @__PURE__ */ n(l, { dir: o, className: `${d[t]} fondue-theme-provider`, children: e }) });
 };
 export {
-  w as Tooltip,
-  m as TooltipContent,
-  p as TooltipRoot,
-  f as TooltipTrigger
+  r as ThemeContext,
+  y as ThemeProvider,
+  g as useFondueTheme
 };
 //# sourceMappingURL=fondue-components40.js.map

package/dist/fondue-components40.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components40.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger\n            data-tooltip-trigger\n            data-test-id={dataTestId}\n            type={!asChild ? 'button' : undefined}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        side,\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side?: 'top' | 'right' | 'bottom' | 'left') => {\n        if (!side || dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixTooltip.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixTooltip.Content\n                    dir={dir}\n                    data-test-id={dataTestId}\n                    data-tooltip-spacing={padding}\n                    className={[styles.root, className].filter(Boolean).join(' ')}\n                    style={{ maxWidth }}\n                    collisionPadding={16}\n                    sideOffset={8}\n                    ref={ref}\n                    side={getAdjustedSide(side)}\n                >\n                    {children}\n                    <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n                </RadixTooltip.Content>\n            </ThemeProvider>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","side","theme","dir","useFondueTheme","getAdjustedSide","ThemeProvider","jsxs","styles","Tooltip","forwardRef"],"mappings":";;;;;AA0BO,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAExD,gBAAAC,EAACC,EAAa,UAAb,EACG,UAAA,gBAAAD,EAACC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,GACJ;AAGRD,EAAY,cAAc;AAYnB,MAAMO,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAP,GAAU,gBAAgBQ,IAAa,yBAAA,GAC1DC,MAGI,gBAAAL;AAAA,EAACC,EAAa;AAAA,EAAb;AAAA,IACG,wBAAoB;AAAA,IACpB,gBAAcG;AAAA,IACd,MAAOD,IAAqB,SAAX;AAAA,IACjB,SAAAA;AAAA,IACA,KAAAE;AAAA,IAEC,UAAAT;AAAA,EAAA;AAAA;AAIbM,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAV;AAAA,EACA,WAAAW;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,MAAAC;AACJ,GACAL,MACC;AACD,QAAM,EAAE,OAAAM,GAAO,KAAAC,EAAA,IAAQC,EAAA,GAEjBC,IAAkB,CAACJ,MACjB,CAACA,KAAQE,MAAQ,QACVF,IAGPA,MAAS,SACF,UAEPA,MAAS,UACF,SAGJA;AAGX,2BACKT,EAAa,QAAb,EACG,UAAA,gBAAAD,EAACe,GAAA,EAAc,OAAAJ,GAAc,KAAAC,GACzB,UAAA,gBAAAI;AAAA,IAACf,EAAa;AAAA,IAAb;AAAA,MACG,KAAAW;AAAA,MACA,gBAAcR;AAAA,MACd,wBAAsBK;AAAA,MACtB,WAAW,CAACQ,EAAO,MAAMV,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC5D,OAAO,EAAE,UAAAC,EAAA;AAAA,MACT,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,KAAAH;AAAA,MACA,MAAMS,EAAgBJ,CAAI;AAAA,MAEzB,UAAA;AAAA,QAAAd;AAAA,QACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWgB,EAAO,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAExE,EAAA,CACJ;AAER;AACAX,EAAe,cAAc;AAEtB,MAAMY,IAAU;AAAA,EACnB,MAAMvB;AAAA,EACN,SAASwB,EAAmDjB,CAAc;AAAA,EAC1E,SAASiB,EAAgDb,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components40.js","sources":["../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from '@frontify/fondue-tokens/themes';\nimport { Slot } from '@radix-ui/react-slot';\nimport { createContext, useContext, useMemo, type ReactNode } from 'react';\n\nimport { enUS, type Translations } from '../../locales';\n\ntype AvailableTheme = keyof typeof styles;\n\ntype ThemeProviderProps = {\n    children: ReactNode;\n    /**\n     * The theme to apply\n     * @default \"light\"\n     * */\n    theme?: AvailableTheme;\n    /**\n     * Direction to apply to the theme\n     * @default \"ltr\"\n     */\n    dir?: 'ltr' | 'rtl';\n    /**\n     * Translations object to use for component strings.\n     * Import from '@frontify/fondue/components/locales' or provide your own.\n     * Must be a complete Translations object.\n     * @default \"enUS\"\n     * @example\n     * ```tsx\n     * import { deDE } from '@frontify/fondue/components/locales';\n     * <ThemeProvider translations={deDE}>...</ThemeProvider>\n     * ```\n     */\n    translations?: Translations;\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n};\n\ntype ThemeContextValue = {\n    theme: AvailableTheme;\n    dir: 'ltr' | 'rtl';\n    translations: Translations;\n};\n\nexport const ThemeContext = createContext<ThemeContextValue>({\n    theme: 'light',\n    dir: 'ltr',\n    translations: enUS,\n});\nThemeContext.displayName = 'ThemeContext';\n\nexport const useFondueTheme = () => {\n    const context = useContext(ThemeContext);\n    // Ensure we always have a valid direction, defaulting to 'ltr' if not provided\n    return {\n        ...context,\n        dir: context.dir || 'ltr',\n    };\n};\n\nexport const ThemeProvider = ({\n    children,\n    theme = 'light',\n    dir = 'ltr',\n    translations = enUS,\n    asChild = false,\n}: ThemeProviderProps) => {\n    const Comp = asChild ? Slot : 'div';\n\n    const contextValue = useMemo(\n        () => ({\n            theme,\n            dir,\n            translations,\n        }),\n        [dir, theme, translations],\n    );\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <Comp dir={dir} className={`${styles[theme]} fondue-theme-provider`}>\n                {children}\n            </Comp>\n        </ThemeContext.Provider>\n    );\n};\n"],"names":["ThemeContext","createContext","enUS","useFondueTheme","context","useContext","ThemeProvider","children","theme","dir","translations","asChild","Comp","Slot","contextValue","useMemo","jsx","styles"],"mappings":";;;;;AA+CO,MAAMA,IAAeC,EAAiC;AAAA,EACzD,OAAO;AAAA,EACP,KAAK;AAAA,EACL,cAAcC;AAClB,CAAC;AACDF,EAAa,cAAc;AAEpB,MAAMG,IAAiB,MAAM;AAChC,QAAMC,IAAUC,EAAWL,CAAY;AAEvC,SAAO;AAAA,IACH,GAAGI;AAAA,IACH,KAAKA,EAAQ,OAAO;AAAA,EAAA;AAE5B,GAEaE,IAAgB,CAAC;AAAA,EAC1B,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,KAAAC,IAAM;AAAA,EACN,cAAAC,IAAeR;AAAA,EACf,SAAAS,IAAU;AACd,MAA0B;AACtB,QAAMC,IAAOD,IAAUE,IAAO,OAExBC,IAAeC;AAAA,IACjB,OAAO;AAAA,MACH,OAAAP;AAAA,MACA,KAAAC;AAAA,MACA,cAAAC;AAAA,IAAA;AAAA,IAEJ,CAACD,GAAKD,GAAOE,CAAY;AAAA,EAAA;AAG7B,2BACKV,EAAa,UAAb,EAAsB,OAAOc,GAC1B,UAAA,gBAAAE,EAACJ,GAAA,EAAK,KAAAH,GAAU,WAAW,GAAGQ,EAAOT,CAAK,CAAC,0BACtC,UAAAD,GACL,GACJ;AAER;"}

package/dist/fondue-components41.js

@@ -1,24 +1,60 @@
-const o = "_root_vsckf_2", c = "_accordionItem_vsckf_23", n = "_accordionTrigger_vsckf_29", r = "_accordionHeader_vsckf_34", t = "_accordionSlot_vsckf_42", e = "_accordionCaret_vsckf_70", a = "_accordionTriggerContent_vsckf_78", i = "_accordionContent_vsckf_83", d = "_accordionContentText_vsckf_112", _ = {
-  root: o,
-  accordionItem: c,
-  accordionTrigger: n,
-  accordionHeader: r,
-  accordionSlot: t,
-  accordionCaret: e,
-  accordionTriggerContent: a,
-  accordionContent: i,
-  accordionContentText: d
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-tooltip";
+import { forwardRef as d } from "react";
+import { useFondueTheme as R, ThemeProvider as N } from "./fondue-components40.js";
+import s from "./fondue-components115.js";
+const p = ({ children: t, enterDelay: e = 700, open: i, onOpenChange: n }) => /* @__PURE__ */ o(r.Provider, { children: /* @__PURE__ */ o(r.Root, { delayDuration: e, open: i, onOpenChange: n, children: t }) });
+p.displayName = "Tooltip.Root";
+const f = ({ asChild: t = !1, children: e, "data-test-id": i = "fondue-tooltip-trigger" }, n) => /* @__PURE__ */ o(
+  r.Trigger,
+  {
+    "data-tooltip-trigger": !0,
+    "data-test-id": i,
+    type: t ? void 0 : "button",
+    asChild: t,
+    ref: n,
+    children: e
+  }
+);
+f.displayName = "Tooltip.Trigger";
+const m = ({
+  children: t,
+  className: e,
+  maxWidth: i,
+  "data-test-id": n = "fondue-tooltip-content",
+  padding: g = "spacious",
+  side: u
+}, c) => {
+  const { theme: T, dir: l } = R(), h = (a) => !a || l === "ltr" ? a : a === "left" ? "right" : a === "right" ? "left" : a;
+  return /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ o(N, { theme: T, dir: l, children: /* @__PURE__ */ y(
+    r.Content,
+    {
+      dir: l,
+      "data-test-id": n,
+      "data-tooltip-spacing": g,
+      className: [s.root, e].filter(Boolean).join(" "),
+      style: { maxWidth: i },
+      collisionPadding: 16,
+      sideOffset: 8,
+      ref: c,
+      side: h(u),
+      children: [
+        t,
+        /* @__PURE__ */ o(r.Arrow, { "aria-hidden": "true", className: s.arrow })
+      ]
+    }
+  ) }) });
+};
+m.displayName = "Tooltip.Content";
+const w = {
+  Root: p,
+  Trigger: d(f),
+  Content: d(m)
 };
 export {
-  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
+  w as Tooltip,
+  m as TooltipContent,
+  p as TooltipRoot,
+  f as TooltipTrigger
 };
 //# sourceMappingURL=fondue-components41.js.map

package/dist/fondue-components41.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components41.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"fondue-components41.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger\n            data-tooltip-trigger\n            data-test-id={dataTestId}\n            type={!asChild ? 'button' : undefined}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        side,\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side?: 'top' | 'right' | 'bottom' | 'left') => {\n        if (!side || dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixTooltip.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixTooltip.Content\n                    dir={dir}\n                    data-test-id={dataTestId}\n                    data-tooltip-spacing={padding}\n                    className={[styles.root, className].filter(Boolean).join(' ')}\n                    style={{ maxWidth }}\n                    collisionPadding={16}\n                    sideOffset={8}\n                    ref={ref}\n                    side={getAdjustedSide(side)}\n                >\n                    {children}\n                    <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n                </RadixTooltip.Content>\n            </ThemeProvider>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","side","theme","dir","useFondueTheme","getAdjustedSide","ThemeProvider","jsxs","styles","Tooltip","forwardRef"],"mappings":";;;;;AA0BO,MAAMA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAExD,gBAAAC,EAACC,EAAa,UAAb,EACG,UAAA,gBAAAD,EAACC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,GACL,GACJ;AAGRD,EAAY,cAAc;AAYnB,MAAMO,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAP,GAAU,gBAAgBQ,IAAa,yBAAA,GAC1DC,MAGI,gBAAAL;AAAA,EAACC,EAAa;AAAA,EAAb;AAAA,IACG,wBAAoB;AAAA,IACpB,gBAAcG;AAAA,IACd,MAAOD,IAAqB,SAAX;AAAA,IACjB,SAAAA;AAAA,IACA,KAAAE;AAAA,IAEC,UAAAT;AAAA,EAAA;AAAA;AAIbM,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAV;AAAA,EACA,WAAAW;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,MAAAC;AACJ,GACAL,MACC;AACD,QAAM,EAAE,OAAAM,GAAO,KAAAC,EAAA,IAAQC,EAAA,GAEjBC,IAAkB,CAACJ,MACjB,CAACA,KAAQE,MAAQ,QACVF,IAGPA,MAAS,SACF,UAEPA,MAAS,UACF,SAGJA;AAGX,2BACKT,EAAa,QAAb,EACG,UAAA,gBAAAD,EAACe,GAAA,EAAc,OAAAJ,GAAc,KAAAC,GACzB,UAAA,gBAAAI;AAAA,IAACf,EAAa;AAAA,IAAb;AAAA,MACG,KAAAW;AAAA,MACA,gBAAcR;AAAA,MACd,wBAAsBK;AAAA,MACtB,WAAW,CAACQ,EAAO,MAAMV,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC5D,OAAO,EAAE,UAAAC,EAAA;AAAA,MACT,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,KAAAH;AAAA,MACA,MAAMS,EAAgBJ,CAAI;AAAA,MAEzB,UAAA;AAAA,QAAAd;AAAA,QACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWgB,EAAO,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAExE,EAAA,CACJ;AAER;AACAX,EAAe,cAAc;AAEtB,MAAMY,IAAU;AAAA,EACnB,MAAMvB;AAAA,EACN,SAASwB,EAAmDjB,CAAc;AAAA,EAC1E,SAASiB,EAAgDb,CAAc;AAC3E;"}

package/dist/fondue-components42.js

@@ -1,29 +1,24 @@
-import { useContext as i, useCallback as l } from "react";
-import { ThemeContext as u } from "./fondue-components39.js";
-const d = () => {
-  const {
-    translations: { translationStrings: r }
-  } = i(u);
-  return {
-    /** Translation function */
-    t: l(
-      (n, e) => {
-        const t = r[n];
-        if (t === void 0)
-          return process.env.NODE_ENV !== "production" && console.warn(`[Fondue] Translation key "${n}" not found`), n;
-        if (typeof t != "string")
-          return process.env.NODE_ENV !== "production" && console.warn(`[Fondue] Translation value for key "${n}" is not a string`), n;
-        let o = t;
-        if (e)
-          for (const [s, a] of Object.entries(e))
-            o = o.replaceAll(`\${${s}}`, a);
-        return o;
-      },
-      [r]
-    )
-  };
+const o = "_root_vsckf_2", c = "_accordionItem_vsckf_23", n = "_accordionTrigger_vsckf_29", r = "_accordionHeader_vsckf_34", t = "_accordionSlot_vsckf_42", e = "_accordionCaret_vsckf_70", a = "_accordionTriggerContent_vsckf_78", i = "_accordionContent_vsckf_83", d = "_accordionContentText_vsckf_112", _ = {
+  root: o,
+  accordionItem: c,
+  accordionTrigger: n,
+  accordionHeader: r,
+  accordionSlot: t,
+  accordionCaret: e,
+  accordionTriggerContent: a,
+  accordionContent: i,
+  accordionContentText: d
 };
 export {
-  d as useTranslation
+  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-components42.js.map

package/dist/fondue-components42.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components42.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 {\n        translations: { translationStrings: translations },\n    } = 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;AAAA,IACF,cAAc,EAAE,oBAAoBC,EAAA;AAAA,EAAa,IACjDC,EAAWC,CAAY;AA4C3B,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;"}
+{"version":3,"file":"fondue-components42.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/fondue-components43.js

@@ -1,11 +1,29 @@
-import { jsx as r } from "react/jsx-runtime";
-import s from "./fondue-components111.js";
-import { colorToCss as e } from "./fondue-components112.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 });
+import { useContext as i, useCallback as l } from "react";
+import { ThemeContext as u } from "./fondue-components40.js";
+const d = () => {
+  const {
+    translations: { translationStrings: r }
+  } = i(u);
+  return {
+    /** Translation function */
+    t: l(
+      (n, e) => {
+        const t = r[n];
+        if (t === void 0)
+          return process.env.NODE_ENV !== "production" && console.warn(`[Fondue] Translation key "${n}" not found`), n;
+        if (typeof t != "string")
+          return process.env.NODE_ENV !== "production" && console.warn(`[Fondue] Translation value for key "${n}" is not a string`), n;
+        let o = t;
+        if (e)
+          for (const [s, a] of Object.entries(e))
+            o = o.replaceAll(`\${${s}}`, a);
+        return o;
+      },
+      [r]
+    )
+  };
 };
 export {
-  p as BadgeStatus
+  d as useTranslation
 };
 //# sourceMappingURL=fondue-components43.js.map

package/dist/fondue-components43.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components43.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-components43.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 {\n        translations: { translationStrings: translations },\n    } = 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;AAAA,IACF,cAAc,EAAE,oBAAoBC,EAAA;AAAA,EAAa,IACjDC,EAAWC,CAAY;AA4C3B,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-components44.js

@@ -1,12 +1,11 @@
-const s = "_root_xdptq_3", t = "_inner_xdptq_30", o = "_dismiss_xdptq_175", n = {
-  root: s,
-  inner: t,
-  dismiss: o
+import { jsx as r } from "react/jsx-runtime";
+import s from "./fondue-components116.js";
+import { colorToCss as e } from "./fondue-components117.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 {
-  n as default,
-  o as dismiss,
-  t as inner,
-  s as root
+  p as BadgeStatus
 };
 //# sourceMappingURL=fondue-components44.js.map

package/dist/fondue-components44.js.map

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

@@ -1,44 +1,12 @@
-const g = (o) => o.startsWith("aria-") || o === "role", m = {
-  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"
-}, d = {
-  overflow: ["overflow-x", "overflow-y"]
-}, a = (o, t) => o === "columns" || o === "rows" ? typeof t == "number" ? `repeat(${t}, 1fr)` : t : typeof t == "number" ? `${t * 0.25}rem` : t, l = (o, t = {}) => Object.entries(o).reduce((n, [r, i]) => {
-  if (!(r in d))
-    return [...n, [r, i]];
-  n.push([r, i]);
-  for (const e of d[r] ?? [])
-    n.push([e, i]);
-  return n;
-}, []).reduce((n, [r, i]) => {
-  if (g(r))
-    return n;
-  const e = r in t ? t[r] : r in m ? m[r] : r, p = e == null ? void 0 : e.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-  if (typeof i == "object")
-    for (const [f, s] of Object.entries(i))
-      s !== void 0 && (n[`--${f}-${p}`] = a(r, s));
-  else
-    n[`--${p}`] = a(r, i);
-  return n;
-}, {});
+const s = "_root_xdptq_3", t = "_inner_xdptq_30", o = "_dismiss_xdptq_175", n = {
+  root: s,
+  inner: t,
+  dismiss: o
+};
 export {
-  l as propsToCssVariables
+  n as default,
+  o as dismiss,
+  t as inner,
+  s as root
 };
 //# sourceMappingURL=fondue-components45.js.map

package/dist/fondue-components45.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components45.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 explodeProps: Record<string, string[]> = {\n    overflow: ['overflow-x', 'overflow-y'],\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)\n        .reduce<[keyof typeof props, (typeof props)[keyof typeof props]][]>((acc, [key, value]) => {\n            if (!(key in explodeProps)) {\n                return [...acc, [key, value]];\n            }\n\n            acc.push([key, value]);\n            for (const newKey of explodeProps[key] ?? []) {\n                acc.push([newKey, value]);\n            }\n\n            return acc;\n        }, [])\n        .reduce<CSSProperties>((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            return acc;\n        }, {});\n};\n"],"names":["isAriaProp","key","abbreviationToCssProperty","explodeProps","transformValueBasedOnKey","value","propsToCssVariables","props","extraAbbreviationToCssProperty","acc","newKey","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,IAAyC;AAAA,EAC3C,UAAU,CAAC,cAAc,YAAY;AACzC,GAEMC,IAA2B,CAACH,GAAaI,MACvCJ,MAAQ,aAAaA,MAAQ,SACzB,OAAOI,KAAU,WACV,UAAUA,CAAK,WAEnBA,IAIP,OAAOA,KAAU,WACV,GAAGA,IAAQ,IAAI,QAGnBA,GAGEC,IAAsB,CAC/BC,GACAC,IAAyD,OAElD,OAAO,QAAQD,CAAK,EACtB,OAAmE,CAACE,GAAK,CAACR,GAAKI,CAAK,MAAM;AACvF,MAAI,EAAEJ,KAAOE;AACT,WAAO,CAAC,GAAGM,GAAK,CAACR,GAAKI,CAAK,CAAC;AAGhC,EAAAI,EAAI,KAAK,CAACR,GAAKI,CAAK,CAAC;AACrB,aAAWK,KAAUP,EAAaF,CAAG,KAAK,CAAA;AACtC,IAAAQ,EAAI,KAAK,CAACC,GAAQL,CAAK,CAAC;AAG5B,SAAOI;AACX,GAAG,CAAA,CAAE,EACJ,OAAsB,CAACA,GAAK,CAACR,GAAKI,CAAK,MAAM;AAC1C,MAAIL,EAAWC,CAAG;AACd,WAAOQ;AAGX,QAAME,IACFV,KAAOO,IACDA,EAA+BP,CAAG,IAClCA,KAAOC,IACLA,EAA0BD,CAAG,IAC7BA,GAENW,IAAuBD,KAAA,gBAAAA,EAAa,WAAW,+BAA+B,SAAS;AAE7F,MAAI,OAAON,KAAU;AACjB,eAAW,CAACQ,GAAYC,CAAe,KAAK,OAAO,QAAQT,CAAK;AAC5D,MAAIS,MAAoB,WAEpBL,EAAI,KAAKI,CAAU,IAAID,CAAoB,EAAE,IAAIR,EAAyBH,GAAKa,CAAe;AAAA;AAKtG,IAAAL,EAAI,KAAKG,CAAoB,EAAE,IAAIR,EAAyBH,GAAKI,CAAK;AAE1E,SAAOI;AACX,GAAG,CAAA,CAAE;"}
+{"version":3,"file":"fondue-components45.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/fondue-components46.js

@@ -1,8 +1,44 @@
-const o = "_root_f9dx4_6", t = {
-  root: o
-};
+const g = (o) => o.startsWith("aria-") || o === "role", m = {
+  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"
+}, d = {
+  overflow: ["overflow-x", "overflow-y"]
+}, a = (o, t) => o === "columns" || o === "rows" ? typeof t == "number" ? `repeat(${t}, 1fr)` : t : typeof t == "number" ? `${t * 0.25}rem` : t, l = (o, t = {}) => Object.entries(o).reduce((n, [r, i]) => {
+  if (!(r in d))
+    return [...n, [r, i]];
+  n.push([r, i]);
+  for (const e of d[r] ?? [])
+    n.push([e, i]);
+  return n;
+}, []).reduce((n, [r, i]) => {
+  if (g(r))
+    return n;
+  const e = r in t ? t[r] : r in m ? m[r] : r, p = e == null ? void 0 : e.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+  if (typeof i == "object")
+    for (const [f, s] of Object.entries(i))
+      s !== void 0 && (n[`--${f}-${p}`] = a(r, s));
+  else
+    n[`--${p}`] = a(r, i);
+  return n;
+}, {});
 export {
-  t as default,
-  o as root
+  l as propsToCssVariables
 };
 //# sourceMappingURL=fondue-components46.js.map