@frontify/fondue-components 27.0.1 → 29.0.0

package/dist/fondue-components38.js

@@ -1,24 +1,127 @@
-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 { jsxs as F, jsx as e } from "react/jsx-runtime";
+import { IconCheckMark as J, IconExclamationMarkTriangle as L, IconCross as Q } from "@frontify/fondue-icons";
+import { forwardRef as B, useRef as y, useState as U, useEffect as z } from "react";
+import { useSyncRefs as X } from "./fondue-components54.js";
+import o from "./fondue-components107.js";
+const D = ({
+  "data-test-id": c = "fondue-textarea",
+  autocomplete: i,
+  autosize: u,
+  children: m,
+  clearable: f,
+  decorator: h,
+  defaultValue: g,
+  disabled: n,
+  extraActions: r,
+  focusOnMount: v,
+  minRows: M = 1,
+  maxRows: k,
+  onEnterPressed: w,
+  readOnly: d,
+  resizable: $,
+  selectable: b = !0,
+  status: s = "default",
+  value: N,
+  ...l
+}, W) => {
+  const R = y(null), T = y(!1);
+  X(R, W);
+  const [x, S] = U(N ?? g ?? ""), C = (r == null ? void 0 : r.length) !== void 0 || f || ["success", "error"].includes(s), q = () => {
+    S("");
+  }, G = (a) => {
+    var t;
+    a.key === "Enter" && (w == null || w(a)), (t = l.onKeyDown) == null || t.call(l, a);
+  };
+  return z(() => {
+    S(N ?? g ?? "");
+  }, [g, N]), z(() => {
+    var a;
+    v && ((a = R.current) == null || a.focus());
+  }, [v]), /* @__PURE__ */ F(
+    "div",
+    {
+      className: o.root,
+      "data-autosize": u,
+      "data-clearable": f,
+      "data-disabled": n || d,
+      "data-has-decorator": !!h,
+      "data-has-tools": C,
+      "data-resizable": $,
+      "data-status": s,
+      "data-max-rows": !!k,
+      "data-test-id": c,
+      style: { "--max-rows": `${k}` },
+      children: [
+        h ? /* @__PURE__ */ e("div", { className: o.decorator, children: h }) : null,
+        /* @__PURE__ */ e("div", { className: o.textareaWrapper, "data-replicated-value": x, children: /* @__PURE__ */ e(
+          "textarea",
+          {
+            ...l,
+            onMouseDown: (a) => {
+              T.current = !0, a.currentTarget.dataset.showFocusRing = "false";
+            },
+            onFocus: (a) => {
+              var t;
+              T.current || (a.target.dataset.showFocusRing = "true"), (t = l.onFocus) == null || t.call(l, a);
+            },
+            onBlur: (a) => {
+              var t;
+              a.target.dataset.showFocusRing = "false", T.current = !1, (t = l.onBlur) == null || t.call(l, a);
+            },
+            autoComplete: i ? "on" : "off",
+            className: o.textarea,
+            disabled: n,
+            onKeyDown: G,
+            onInput: (a) => S(a.currentTarget.value),
+            onSelect: (a) => {
+              b || (a.currentTarget.selectionStart = a.currentTarget.selectionEnd);
+            },
+            readOnly: d,
+            ref: R,
+            rows: M,
+            value: x
+          }
+        ) }),
+        s === "loading" && /* @__PURE__ */ e("div", { className: o.loadingStatus, "data-test-id": `${c}-loader` }),
+        C && /* @__PURE__ */ F("div", { className: o.tools, children: [
+          s === "success" && /* @__PURE__ */ e("div", { className: o.success, children: /* @__PURE__ */ e(J, { size: 20 }) }),
+          s === "error" && /* @__PURE__ */ e("div", { className: o[s], children: /* @__PURE__ */ e(L, { size: 20 }) }),
+          r == null ? void 0 : r.map(({ icon: a, title: t, callback: H }) => /* @__PURE__ */ e(
+            "button",
+            {
+              className: o.toolsButton,
+              disabled: n || d,
+              onClick: H,
+              title: t,
+              children: a
+            },
+            t
+          )),
+          f && /* @__PURE__ */ e("button", { className: o.toolsButton, onClick: q, disabled: n || d, children: /* @__PURE__ */ e(Q, { size: 20, fill: "currentColor" }) })
+        ] }),
+        m
+      ]
+    }
+  );
 };
+D.displayName = "Textarea.Root";
+const j = ({ name: c, className: i, ...u }, m) => /* @__PURE__ */ e(
+  "div",
+  {
+    "data-slot": !0,
+    "data-name": c,
+    ...u,
+    ref: m,
+    className: [o.slot, i].filter(Boolean).join(" ")
+  }
+);
+j.displayName = "Textarea.Slot";
+const I = B(D), Y = B(j), K = I;
+K.Root = I;
+K.Slot = Y;
 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
+  K as Textarea,
+  D as TextareaRoot,
+  j as TextareaSlot
 };
 //# sourceMappingURL=fondue-components38.js.map

package/dist/fondue-components38.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components38.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"fondue-components38.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 ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\n\nimport styles from './styles/textarea.module.scss';\n\n/**\n * @deprecated Use Textarea.Slot instead for custom actions\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     * The place where the textarea slots are placed\n     */\n    children?: ReactNode;\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     * @deprecated Use Textarea.Slot instead for custom actions\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\nexport const TextareaRoot = (\n    {\n        'data-test-id': dataTestId = 'fondue-textarea',\n        autocomplete,\n        autosize,\n        children,\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        // eslint-disable-next-line react-hooks/set-state-in-effect\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-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            <div className={styles.textareaWrapper} data-replicated-value={value}>\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            </div>\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            {children}\n        </div>\n    );\n};\nTextareaRoot.displayName = 'Textarea.Root';\n\nexport type TextareaSlotProps = {\n    children: ReactNode;\n    name?: 'left' | 'right';\n    className?: string;\n};\n\nexport const TextareaSlot = (\n    { name, className, ...slotProps }: TextareaSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-slot\n            data-name={name}\n            {...slotProps}\n            ref={forwardedRef}\n            className={[styles.slot, className].filter(Boolean).join(' ')}\n        />\n    );\n};\n\nTextareaSlot.displayName = 'Textarea.Slot';\n\nconst ForwardedRefTextareaRoot = forwardRef<HTMLTextAreaElement, TextareaProps>(TextareaRoot);\nconst ForwardedRefTextareaSlot = forwardRef<HTMLDivElement, TextareaSlotProps>(TextareaSlot);\n\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const Textarea: typeof TextareaRoot & {\n    Root: typeof ForwardedRefTextareaRoot;\n    Slot: typeof ForwardedRefTextareaSlot;\n} = ForwardedRefTextareaRoot;\nTextarea.Root = ForwardedRefTextareaRoot;\nTextarea.Slot = ForwardedRefTextareaSlot;\n"],"names":["TextareaRoot","dataTestId","autocomplete","autosize","children","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","TextareaSlot","name","className","slotProps","ForwardedRefTextareaRoot","forwardRef","ForwardedRefTextareaSlot","Textarea"],"mappings":"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"}

package/dist/fondue-components39.js

@@ -1,27 +1,40 @@
-import { useContext as i, useCallback as u } from "react";
-import { ThemeContext as c } from "./fondue-components36.js";
-const d = () => {
-  const { translations: r } = i(c);
+import { jsx as n } from "react/jsx-runtime";
+import d from "./fondue-components108.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-components109.js";
+const r = u({
+  theme: "light",
+  dir: "ltr",
+  translations: s
+});
+r.displayName = "ThemeContext";
+const g = () => {
+  const e = a(r);
   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]
-    )
+    ...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 {
-  d as useTranslation
+  r as ThemeContext,
+  y as ThemeProvider,
+  g as useFondueTheme
 };
 //# sourceMappingURL=fondue-components39.js.map

package/dist/fondue-components39.js.map

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

@@ -1,8 +1,8 @@
 import { jsx as t, jsxs as p, Fragment as B } from "react/jsx-runtime";
 import { IconCross as y } from "@frontify/fondue-icons";
-import { useTranslation as v } from "./fondue-components39.js";
-import { BadgeStatus as x } from "./fondue-components40.js";
-import l from "./fondue-components41.js";
+import { useTranslation as v } from "./fondue-components42.js";
+import { BadgeStatus as x } from "./fondue-components43.js";
+import l from "./fondue-components44.js";
 const S = ({
   "aria-label": a,
   "data-test-id": e = "badge",

package/dist/fondue-components40.js

@@ -1,11 +1,60 @@
-import { jsx as r } from "react/jsx-runtime";
-import s from "./fondue-components92.js";
-import { colorToCss as e } from "./fondue-components93.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 { 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)
 };
 export {
-  p as BadgeStatus
+  w as Tooltip,
+  m as TooltipContent,
+  p as TooltipRoot,
+  f as TooltipTrigger
 };
 //# sourceMappingURL=fondue-components40.js.map

package/dist/fondue-components40.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components40.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-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;"}

package/dist/fondue-components41.js

@@ -1,12 +1,24 @@
-const s = "_root_xdptq_3", t = "_inner_xdptq_30", o = "_dismiss_xdptq_175", n = {
-  root: s,
-  inner: t,
-  dismiss: o
+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 {
-  n as default,
-  o as dismiss,
-  t as inner,
-  s as root
+  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-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":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/fondue-components42.js

@@ -1,44 +1,29 @@
-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;
-}, {});
+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]
+    )
+  };
+};
 export {
-  l as propsToCssVariables
+  d as useTranslation
 };
 //# sourceMappingURL=fondue-components42.js.map

package/dist/fondue-components42.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components42.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-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;"}

package/dist/fondue-components43.js

@@ -1,8 +1,11 @@
-const o = "_root_f9dx4_6", t = {
-  root: o
+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 });
 };
 export {
-  t as default,
-  o as root
+  p as BadgeStatus
 };
 //# sourceMappingURL=fondue-components43.js.map

package/dist/fondue-components43.js.map

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

package/dist/fondue-components44.js

@@ -1,8 +1,12 @@
-const o = "_root_ebauq_5", t = {
-  root: o
+const s = "_root_xdptq_3", t = "_inner_xdptq_30", o = "_dismiss_xdptq_175", n = {
+  root: s,
+  inner: t,
+  dismiss: o
 };
 export {
-  t as default,
-  o as root
+  n as default,
+  o as dismiss,
+  t as inner,
+  s as root
 };
 //# 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":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}