@frontify/fondue-components 24.0.0-rc.3 → 24.1.0

package/dist/fondue-components33.js

@@ -1,110 +1,61 @@
-import { jsxs as R, jsx as o } from "react/jsx-runtime";
-import { IconCheckMark as $, IconExclamationMarkTriangle as b, IconCross as q } from "@frontify/fondue-icons";
-import { forwardRef as G, useRef as y, useState as H, useEffect as z } from "react";
-import { useSyncRefs as J } from "./fondue-components52.js";
-import c from "./fondue-components88.js";
-const L = ({
-  "data-test-id": N = "fondue-textarea",
-  autocomplete: F,
-  autosize: S,
-  clearable: i,
-  decorator: d,
-  defaultValue: u,
-  disabled: r,
-  extraActions: l,
-  focusOnMount: C,
-  minRows: B = 1,
-  maxRows: T,
-  onEnterPressed: m,
-  readOnly: n,
-  resizable: D,
-  selectable: I = !0,
-  status: s = "default",
-  value: f,
-  ...t
-}, K) => {
-  const h = y(null), g = y(!1);
-  J(h, K);
-  const [k, w] = H(f ?? u ?? ""), v = (l == null ? void 0 : l.length) !== void 0 || i || ["success", "error"].includes(s), j = () => {
-    w("");
-  }, x = (a) => {
-    var e;
-    a.key === "Enter" && (m == null || m(a)), (e = t.onKeyDown) == null || e.call(t, a);
-  };
-  return z(() => {
-    w(f ?? u ?? "");
-  }, [u, f]), z(() => {
-    var a;
-    C && ((a = h.current) == null || a.focus());
-  }, [C]), /* @__PURE__ */ R(
-    "div",
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-tooltip";
+import { forwardRef as l } from "react";
+import { cn as R } from "./fondue-components40.js";
+import { useFondueTheme as N, ThemeProvider as x } from "./fondue-components32.js";
+import s from "./fondue-components88.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 m = ({ 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
+  }
+);
+m.displayName = "Tooltip.Trigger";
+const f = ({
+  children: t,
+  className: e,
+  maxWidth: i,
+  "data-test-id": n = "fondue-tooltip-content",
+  padding: c = "spacious",
+  side: g
+}, u) => {
+  const { theme: T, dir: d } = N(), h = (a) => !a || d === "ltr" ? a : a === "left" ? "right" : a === "right" ? "left" : a;
+  return /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ o(x, { theme: T, dir: d, children: /* @__PURE__ */ y(
+    r.Content,
     {
-      className: c.root,
-      "data-autosize": S,
-      "data-clearable": i,
-      "data-disabled": r || n,
-      "data-has-decorator": !!d,
-      "data-has-tools": v,
-      "data-replicated-value": k,
-      "data-resizable": D,
-      "data-status": s,
-      "data-max-rows": !!T,
-      "data-test-id": N,
-      style: { "--max-rows": `${T}` },
+      dir: d,
+      "data-test-id": n,
+      "data-tooltip-spacing": c,
+      className: R(s.root, e),
+      style: { maxWidth: i },
+      collisionPadding: 16,
+      sideOffset: 8,
+      ref: u,
+      side: h(g),
       children: [
-        d ? /* @__PURE__ */ o("div", { className: c.decorator, children: d }) : null,
-        /* @__PURE__ */ o(
-          "textarea",
-          {
-            ...t,
-            onMouseDown: (a) => {
-              g.current = !0, a.currentTarget.dataset.showFocusRing = "false";
-            },
-            onFocus: (a) => {
-              var e;
-              g.current || (a.target.dataset.showFocusRing = "true"), (e = t.onFocus) == null || e.call(t, a);
-            },
-            onBlur: (a) => {
-              var e;
-              a.target.dataset.showFocusRing = "false", g.current = !1, (e = t.onBlur) == null || e.call(t, a);
-            },
-            autoComplete: F ? "on" : "off",
-            className: c.textarea,
-            disabled: r,
-            onKeyDown: x,
-            onInput: (a) => w(a.currentTarget.value),
-            onSelect: (a) => {
-              I || (a.currentTarget.selectionStart = a.currentTarget.selectionEnd);
-            },
-            readOnly: n,
-            ref: h,
-            rows: B,
-            value: k
-          }
-        ),
-        s === "loading" && /* @__PURE__ */ o("div", { className: c.loadingStatus, "data-test-id": `${N}-loader` }),
-        v && /* @__PURE__ */ R("div", { className: c.tools, children: [
-          s === "success" && /* @__PURE__ */ o("div", { className: c.success, children: /* @__PURE__ */ o($, { size: 20 }) }),
-          s === "error" && /* @__PURE__ */ o("div", { className: c[s], children: /* @__PURE__ */ o(b, { size: 20 }) }),
-          l == null ? void 0 : l.map(({ icon: a, title: e, callback: M }) => /* @__PURE__ */ o(
-            "button",
-            {
-              className: c.toolsButton,
-              disabled: r || n,
-              onClick: M,
-              title: e,
-              children: a
-            },
-            e
-          )),
-          i && /* @__PURE__ */ o("button", { className: c.toolsButton, onClick: j, disabled: r || n, children: /* @__PURE__ */ o(q, { size: 20, fill: "currentColor" }) })
-        ] })
+        t,
+        /* @__PURE__ */ o(r.Arrow, { "aria-hidden": "true", className: s.arrow })
       ]
     }
-  );
-}, Q = G(L);
-Q.displayName = "Textarea";
+  ) }) });
+};
+f.displayName = "Tooltip.Content";
+const A = {
+  Root: p,
+  Trigger: l(m),
+  Content: l(f)
+};
 export {
-  Q as Textarea
+  A as Tooltip,
+  f as TooltipContent,
+  p as TooltipRoot,
+  m as TooltipTrigger
 };
 //# sourceMappingURL=fondue-components33.js.map

package/dist/fondue-components33.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components33.js","sources":["../src/components/Textarea/Textarea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconCross, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useEffect,\n    useRef,\n    useState,\n    type ChangeEventHandler,\n    type CSSProperties,\n    type FocusEventHandler,\n    type ForwardedRef,\n    type KeyboardEventHandler,\n    type ReactElement,\n    type SyntheticEvent,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\n\nimport styles from './styles/textarea.module.scss';\n\nexport type ExtraAction = {\n    icon: ReactElement;\n    title: string;\n    callback: () => void;\n};\n\ntype Status = 'default' | 'loading' | 'success' | 'error';\n\ntype TextareaProps = {\n    /**\n     * The id of the textarea\n     */\n    id?: string;\n    /**\n     * If `true`, Textarea will have `autoComplete` functionality\n     */\n    autocomplete?: boolean;\n    /**\n     * If `true`, component rendered is a auto sizing Textarea\n     */\n    autosize?: boolean;\n    /**\n     * Render `clear` button to clear input on click\n     */\n    clearable?: boolean;\n    /**\n     * A `ReactElement` that will be rendered at the start of the `Textarea`\n     */\n    decorator?: ReactElement;\n    /**\n     * Initial value\n     */\n    defaultValue?: string;\n    disabled?: boolean;\n    /**\n     * Collection of extra actions the input can preform\n     */\n    extraActions?: ExtraAction[];\n    /**\n     * If `true`, Textarea will be focused on mount\n     */\n    focusOnMount?: boolean;\n    /**\n     * If autosize is false, this is used as rows property for default textarea\n     * @default 1\n     */\n    minRows?: number;\n    /**\n     * If `autosize` is `false`, this property is ignored\n     */\n    maxRows?: number;\n    /**\n     * Event handler called when the textarea value changes\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when Enter is pressed\n     */\n    onEnterPressed?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: KeyboardEventHandler<HTMLTextAreaElement>;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLTextAreaElement>) => void;\n    /**\n     * If `true`, Textarea will be required\n     */\n    required?: boolean;\n    /**\n     * The test id of the textarea\n     */\n    'data-test-id'?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    resizable?: boolean;\n    selectable?: boolean;\n    /**\n     * The current status of the input. It will trigger the corresponding icon to be appended to the Textarea.\n     * @default 'default'\n     */\n    status?: Status;\n    value?: string;\n};\n\nconst TextareaComponent = (\n    {\n        'data-test-id': dataTestId = 'fondue-textarea',\n        autocomplete,\n        autosize,\n        clearable,\n        decorator,\n        defaultValue,\n        disabled,\n        extraActions,\n        focusOnMount,\n        minRows: rows = 1,\n        maxRows,\n        onEnterPressed,\n        readOnly,\n        resizable,\n        selectable = true,\n        status = 'default',\n        value: inputValue,\n        ...props\n    }: TextareaProps,\n    forwardedRef: ForwardedRef<HTMLTextAreaElement>,\n) => {\n    const ref = useRef<HTMLTextAreaElement>(null);\n    const wasClicked = useRef(false);\n\n    useSyncRefs<HTMLTextAreaElement>(ref, forwardedRef);\n\n    const [value, setValue] = useState(inputValue ?? defaultValue ?? '');\n\n    const hasTools = extraActions?.length !== undefined || clearable || ['success', 'error'].includes(status);\n\n    const clear = () => {\n        setValue('');\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (event) => {\n        if (event.key === 'Enter') {\n            onEnterPressed?.(event);\n        }\n        props.onKeyDown?.(event);\n    };\n\n    useEffect(() => {\n        setValue(inputValue ?? defaultValue ?? '');\n    }, [defaultValue, inputValue]);\n\n    useEffect(() => {\n        if (focusOnMount) {\n            ref.current?.focus();\n        }\n    }, [focusOnMount]);\n\n    return (\n        <div\n            className={styles.root}\n            data-autosize={autosize}\n            data-clearable={clearable}\n            data-disabled={disabled || readOnly}\n            data-has-decorator={decorator ? true : false}\n            data-has-tools={hasTools}\n            data-replicated-value={value}\n            data-resizable={resizable}\n            data-status={status}\n            data-max-rows={!!maxRows}\n            data-test-id={dataTestId}\n            style={{ '--max-rows': `${maxRows}` } as CSSProperties}\n        >\n            {decorator ? <div className={styles.decorator}>{decorator}</div> : null}\n            <textarea\n                {...props}\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                    props.onFocus?.(focusEvent);\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                    props.onBlur?.(blurEvent);\n                }}\n                autoComplete={autocomplete ? 'on' : 'off'}\n                className={styles.textarea}\n                disabled={disabled}\n                onKeyDown={handleKeyDown}\n                onInput={(event) => setValue(event.currentTarget.value)}\n                onSelect={(event) => {\n                    if (!selectable) {\n                        event.currentTarget.selectionStart = event.currentTarget.selectionEnd;\n                    }\n                }}\n                readOnly={readOnly}\n                ref={ref}\n                rows={rows}\n                value={value}\n            ></textarea>\n            {status === 'loading' && <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />}\n            {hasTools && (\n                <div className={styles.tools}>\n                    {status === 'success' && (\n                        <div className={styles.success}>\n                            <IconCheckMark size={20} />\n                        </div>\n                    )}\n                    {status === 'error' && (\n                        <div className={styles[status]}>\n                            <IconExclamationMarkTriangle size={20} />\n                        </div>\n                    )}\n                    {extraActions?.map(({ icon, title, callback }) => (\n                        <button\n                            className={styles.toolsButton}\n                            disabled={disabled || readOnly}\n                            key={title}\n                            onClick={callback}\n                            title={title}\n                        >\n                            {icon}\n                        </button>\n                    ))}\n                    {clearable && (\n                        <button className={styles.toolsButton} onClick={clear} disabled={disabled || readOnly}>\n                            <IconCross size={20} fill=\"currentColor\" />\n                        </button>\n                    )}\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(TextareaComponent);\nTextarea.displayName = 'Textarea';\n"],"names":["TextareaComponent","dataTestId","autocomplete","autosize","clearable","decorator","defaultValue","disabled","extraActions","focusOnMount","rows","maxRows","onEnterPressed","readOnly","resizable","selectable","status","inputValue","props","forwardedRef","ref","useRef","wasClicked","useSyncRefs","value","setValue","useState","hasTools","clear","handleKeyDown","event","_a","useEffect","jsxs","styles","jsx","mouseEvent","focusEvent","blurEvent","IconCheckMark","IconExclamationMarkTriangle","icon","title","callback","IconCross","Textarea","forwardRef"],"mappings":";;;;;AAwHA,MAAMA,IAAoB,CACtB;AAAA,EACI,gBAAgBC,IAAa;AAAA,EAC7B,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAASC,IAAO;AAAA,EAChB,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,QAAAC,IAAS;AAAA,EACT,OAAOC;AAAA,EACP,GAAGC;AACP,GACAC,MACC;AACD,QAAMC,IAAMC,EAA4B,IAAI,GACtCC,IAAaD,EAAO,EAAK;AAE/B,EAAAE,EAAiCH,GAAKD,CAAY;AAElD,QAAM,CAACK,GAAOC,CAAQ,IAAIC,EAAST,KAAcX,KAAgB,EAAE,GAE7DqB,KAAWnB,KAAA,gBAAAA,EAAc,YAAW,UAAaJ,KAAa,CAAC,WAAW,OAAO,EAAE,SAASY,CAAM,GAElGY,IAAQ,MAAM;AAChB,IAAAH,EAAS,EAAE;AAAA,EACf,GAEMI,IAA2D,CAACC,MAAU;;AACxE,IAAIA,EAAM,QAAQ,YACdlB,KAAA,QAAAA,EAAiBkB,MAErBC,IAAAb,EAAM,cAAN,QAAAa,EAAA,KAAAb,GAAkBY;AAAA,EACtB;AAEA,SAAAE,EAAU,MAAM;AACZ,IAAAP,EAASR,KAAcX,KAAgB,EAAE;AAAA,EAC7C,GAAG,CAACA,GAAcW,CAAU,CAAC,GAE7Be,EAAU,MAAM;;AACZ,IAAIvB,OACAsB,IAAAX,EAAI,YAAJ,QAAAW,EAAa;AAAA,EAErB,GAAG,CAACtB,CAAY,CAAC,GAGb,gBAAAwB;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAO;AAAA,MAClB,iBAAe/B;AAAA,MACf,kBAAgBC;AAAA,MAChB,iBAAeG,KAAYM;AAAA,MAC3B,sBAAoB,EAAAR;AAAA,MACpB,kBAAgBsB;AAAA,MAChB,yBAAuBH;AAAA,MACvB,kBAAgBV;AAAA,MAChB,eAAaE;AAAA,MACb,iBAAe,CAAC,CAACL;AAAA,MACjB,gBAAcV;AAAA,MACd,OAAO,EAAE,cAAc,GAAGU,CAAO,GAAA;AAAA,MAEhC,UAAA;AAAA,QAAAN,sBAAa,OAAA,EAAI,WAAW6B,EAAO,WAAY,aAAU,IAAS;AAAA,QACnE,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACI,GAAGjB;AAAA,YACJ,aAAa,CAACkB,MAAe;AACzB,cAAAd,EAAW,UAAU,IACrBc,EAAW,cAAc,QAAQ,gBAAgB;AAAA,YACrD;AAAA,YACA,SAAS,CAACC,MAAe;;AACrB,cAAKf,EAAW,YACZe,EAAW,OAAO,QAAQ,gBAAgB,UAE9CN,IAAAb,EAAM,YAAN,QAAAa,EAAA,KAAAb,GAAgBmB;AAAA,YACpB;AAAA,YACA,QAAQ,CAACC,MAAc;;AACnB,cAAAA,EAAU,OAAO,QAAQ,gBAAgB,SACzChB,EAAW,UAAU,KACrBS,IAAAb,EAAM,WAAN,QAAAa,EAAA,KAAAb,GAAeoB;AAAA,YACnB;AAAA,YACA,cAAcpC,IAAe,OAAO;AAAA,YACpC,WAAWgC,EAAO;AAAA,YAClB,UAAA3B;AAAA,YACA,WAAWsB;AAAA,YACX,SAAS,CAACC,MAAUL,EAASK,EAAM,cAAc,KAAK;AAAA,YACtD,UAAU,CAACA,MAAU;AACjB,cAAKf,MACDe,EAAM,cAAc,iBAAiBA,EAAM,cAAc;AAAA,YAEjE;AAAA,YACA,UAAAjB;AAAA,YACA,KAAAO;AAAA,YACA,MAAAV;AAAA,YACA,OAAAc;AAAA,UAAA;AAAA,QAAA;AAAA,QAEHR,MAAW,aAAa,gBAAAmB,EAAC,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGjC,CAAU,UAAA,CAAW;AAAA,QACpG0B,KACG,gBAAAM,EAAC,OAAA,EAAI,WAAWC,EAAO,OAClB,UAAA;AAAA,UAAAlB,MAAW,aACR,gBAAAmB,EAAC,OAAA,EAAI,WAAWD,EAAO,SACnB,UAAA,gBAAAC,EAACI,GAAA,EAAc,MAAM,GAAA,CAAI,EAAA,CAC7B;AAAA,UAEHvB,MAAW,WACR,gBAAAmB,EAAC,OAAA,EAAI,WAAWD,EAAOlB,CAAM,GACzB,UAAA,gBAAAmB,EAACK,GAAA,EAA4B,MAAM,GAAA,CAAI,GAC3C;AAAA,UAEHhC,KAAA,gBAAAA,EAAc,IAAI,CAAC,EAAE,MAAAiC,GAAM,OAAAC,GAAO,UAAAC,QAC/B,gBAAAR;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,WAAWD,EAAO;AAAA,cAClB,UAAU3B,KAAYM;AAAA,cAEtB,SAAS8B;AAAA,cACT,OAAAD;AAAA,cAEC,UAAAD;AAAA,YAAA;AAAA,YAJIC;AAAA,UAAA;AAAA,UAOZtC,KACG,gBAAA+B,EAAC,UAAA,EAAO,WAAWD,EAAO,aAAa,SAASN,GAAO,UAAUrB,KAAYM,GACzE,UAAA,gBAAAsB,EAACS,GAAA,EAAU,MAAM,IAAI,MAAK,gBAAe,EAAA,CAC7C;AAAA,QAAA,EAAA,CAER;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB,GAEaC,IAAWC,EAA+C9C,CAAiB;AACxF6C,EAAS,cAAc;"}
+{"version":3,"file":"fondue-components33.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 { cn } from '#/utilities/styleUtilities';\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={cn(styles.root, className)}\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","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;;AA4BO,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,WAAWQ,EAAGC,EAAO,MAAMX,CAAS;AAAA,MACpC,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,WAAWiB,EAAO,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAExE,EAAA,CACJ;AAER;AACAZ,EAAe,cAAc;AAEtB,MAAMa,IAAU;AAAA,EACnB,MAAMxB;AAAA,EACN,SAASyB,EAAmDlB,CAAc;AAAA,EAC1E,SAASkB,EAAgDd,CAAc;AAC3E;"}

package/dist/fondue-components34.js

@@ -1,40 +1,24 @@
-import { jsx as n } from "react/jsx-runtime";
-import d from "./fondue-components89.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-components90.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 }) });
+const o = "_root_90yvr_2", c = "_accordionItem_90yvr_23", r = "_accordionTrigger_90yvr_29", n = "_accordionHeader_90yvr_34", t = "_accordionSlot_90yvr_42", e = "_accordionCaret_90yvr_69", a = "_accordionTriggerContent_90yvr_77", i = "_accordionContent_90yvr_82", d = "_accordionContentText_90yvr_111", _ = {
+  root: o,
+  accordionItem: c,
+  accordionTrigger: r,
+  accordionHeader: n,
+  accordionSlot: t,
+  accordionCaret: e,
+  accordionTriggerContent: a,
+  accordionContent: i,
+  accordionContentText: d
 };
 export {
-  r as ThemeContext,
-  y as ThemeProvider,
-  g as useFondueTheme
+  e as accordionCaret,
+  i as accordionContent,
+  d as accordionContentText,
+  n as accordionHeader,
+  c as accordionItem,
+  t as accordionSlot,
+  r as accordionTrigger,
+  a as accordionTriggerContent,
+  _ as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components34.js.map

package/dist/fondue-components34.js.map

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

package/dist/fondue-components35.js

@@ -1,61 +1,27 @@
-import { jsx as o, jsxs as y } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-tooltip";
-import { forwardRef as l } from "react";
-import { cn as R } from "./fondue-components42.js";
-import { useFondueTheme as N, ThemeProvider as x } from "./fondue-components34.js";
-import s from "./fondue-components91.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 m = ({ 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
-  }
-);
-m.displayName = "Tooltip.Trigger";
-const f = ({
-  children: t,
-  className: e,
-  maxWidth: i,
-  "data-test-id": n = "fondue-tooltip-content",
-  padding: c = "spacious",
-  side: g
-}, u) => {
-  const { theme: T, dir: d } = N(), h = (a) => !a || d === "ltr" ? a : a === "left" ? "right" : a === "right" ? "left" : a;
-  return /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ o(x, { theme: T, dir: d, children: /* @__PURE__ */ y(
-    r.Content,
-    {
-      dir: d,
-      "data-test-id": n,
-      "data-tooltip-spacing": c,
-      className: R(s.root, e),
-      style: { maxWidth: i },
-      collisionPadding: 16,
-      sideOffset: 8,
-      ref: u,
-      side: h(g),
-      children: [
-        t,
-        /* @__PURE__ */ o(r.Arrow, { "aria-hidden": "true", className: s.arrow })
-      ]
-    }
-  ) }) });
-};
-f.displayName = "Tooltip.Content";
-const A = {
-  Root: p,
-  Trigger: l(m),
-  Content: l(f)
+import { useContext as i, useCallback as u } from "react";
+import { ThemeContext as c } from "./fondue-components32.js";
+const d = () => {
+  const { translations: r } = i(c);
+  return {
+    /** Translation function */
+    t: u(
+      (o, e) => {
+        const n = r[o];
+        if (n === void 0)
+          return process.env.NODE_ENV !== "production" && console.warn(`[Fondue] Translation key "${o}" not found`), o;
+        if (typeof n != "string")
+          return process.env.NODE_ENV !== "production" && console.warn(`[Fondue] Translation value for key "${o}" is not a string`), o;
+        let t = n;
+        if (e)
+          for (const [s, a] of Object.entries(e))
+            t = t.replaceAll(`\${${s}}`, a);
+        return t;
+      },
+      [r]
+    )
+  };
 };
 export {
-  A as Tooltip,
-  f as TooltipContent,
-  p as TooltipRoot,
-  m as TooltipTrigger
+  d as useTranslation
 };
 //# sourceMappingURL=fondue-components35.js.map

package/dist/fondue-components35.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components35.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 { cn } from '#/utilities/styleUtilities';\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={cn(styles.root, className)}\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","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;;AA4BO,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,WAAWQ,EAAGC,EAAO,MAAMX,CAAS;AAAA,MACpC,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,WAAWiB,EAAO,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAExE,EAAA,CACJ;AAER;AACAZ,EAAe,cAAc;AAEtB,MAAMa,IAAU;AAAA,EACnB,MAAMxB;AAAA,EACN,SAASyB,EAAmDlB,CAAc;AAAA,EAC1E,SAASkB,EAAgDd,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components35.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-components36.js

@@ -1,24 +1,11 @@
-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 r } from "react/jsx-runtime";
+import s from "./fondue-components89.js";
+import { colorToCss as e } from "./fondue-components90.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 {
-  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
+  p as BadgeStatus
 };
 //# sourceMappingURL=fondue-components36.js.map

package/dist/fondue-components36.js.map

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

@@ -1,27 +1,10 @@
-import { useContext as i, useCallback as u } from "react";
-import { ThemeContext as c } from "./fondue-components34.js";
-const d = () => {
-  const { translations: r } = i(c);
-  return {
-    /** Translation function */
-    t: u(
-      (o, e) => {
-        const n = r[o];
-        if (n === void 0)
-          return process.env.NODE_ENV !== "production" && console.warn(`[Fondue] Translation key "${o}" not found`), o;
-        if (typeof n != "string")
-          return process.env.NODE_ENV !== "production" && console.warn(`[Fondue] Translation value for key "${o}" is not a string`), o;
-        let t = n;
-        if (e)
-          for (const [s, a] of Object.entries(e))
-            t = t.replaceAll(`\${${s}}`, a);
-        return t;
-      },
-      [r]
-    )
-  };
+const s = "_root_i684q_3", o = "_dismiss_i684q_156", t = {
+  root: s,
+  dismiss: o
 };
 export {
-  d as useTranslation
+  t as default,
+  o as dismiss,
+  s as root
 };
 //# sourceMappingURL=fondue-components37.js.map

package/dist/fondue-components37.js.map

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

package/dist/fondue-components38.js

@@ -1,11 +1,35 @@
-import { jsx as r } from "react/jsx-runtime";
-import s from "./fondue-components93.js";
-import { colorToCss as e } from "./fondue-components94.js";
-const a = ["default", "positive", "highlight", "warning", "negative"], i = (t) => typeof t == "string" && a.includes(t), p = ({ status: t }) => {
-  const o = i(t) ? { "data-status": t } : { style: { backgroundColor: typeof t == "string" ? t : e(t) || "transparent" } };
-  return /* @__PURE__ */ r("div", { "data-test-id": "badge-status", className: s.root, ...o });
-};
+const 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 {
-  p as BadgeStatus
+  f as propsToCssVariables
 };
 //# sourceMappingURL=fondue-components38.js.map

package/dist/fondue-components38.js.map

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

@@ -1,10 +1,8 @@
-const s = "_root_o6e73_3", o = "_dismiss_o6e73_156", t = {
-  root: s,
-  dismiss: o
+const o = "_root_f9dx4_6", t = {
+  root: o
 };
 export {
   t as default,
-  o as dismiss,
-  s as root
+  o as root
 };
 //# sourceMappingURL=fondue-components39.js.map

package/dist/fondue-components39.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components39.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"fondue-components39.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components4.js

@@ -1,8 +1,8 @@
 import { jsx as a, jsxs as g, Fragment as h } from "react/jsx-runtime";
 import { IconCross as B } from "@frontify/fondue-icons";
-import { useTranslation as x } from "./fondue-components37.js";
-import { BadgeStatus as y } from "./fondue-components38.js";
-import p from "./fondue-components39.js";
+import { useTranslation as x } from "./fondue-components35.js";
+import { BadgeStatus as y } from "./fondue-components36.js";
+import p from "./fondue-components37.js";
 const P = ({
   "aria-label": e,
   "data-test-id": n = "badge",