@frontify/fondue-components 22.0.0 → 22.1.0

package/dist/fondue-components27.js

@@ -1,11 +1,12 @@
 import { jsx as a, jsxs as b } from "react/jsx-runtime";
-import { createContext as E, forwardRef as l, useContext as f, useRef as w, useEffect as O, useMemo as I, useCallback as q, createElement as z } from "react";
-import { IconDotsHorizontal as B } from "@frontify/fondue-icons";
+import { createContext as E, forwardRef as l, useContext as f, useRef as w, useEffect as q, useMemo as I, useCallback as B, createElement as z } from "react";
+import { IconDotsHorizontal as F } from "@frontify/fondue-icons";
 import * as c from "@radix-ui/react-tabs";
 import { useControllableState as H } from "./fondue-components64.js";
 import { Button as M } from "./fondue-components6.js";
 import { Dropdown as d } from "./fondue-components11.js";
-import { useTabTriggers as W } from "./fondue-components78.js";
+import { useFondueTheme as W } from "./fondue-components31.js";
+import { useTabTriggers as G } from "./fondue-components78.js";
 import n from "./fondue-components79.js";
 const m = E({
   value: "",
@@ -28,31 +29,32 @@ const L = ({
   ...i
 }, S) => {
   var y;
-  const [g, C] = H({
+  const { dir: j } = W(), [g, C] = H({
     prop: o,
     defaultProp: s,
     onChange: u
-  }), x = q(
+  }), h = B(
     (e) => {
       C(e);
     },
     [C]
-  ), { triggerListRef: j, activeIndicatorRef: A, triggers: N, triggersOutOfView: h, addTrigger: R } = W({
+  ), { triggerListRef: A, activeIndicatorRef: D, triggers: x, triggersOutOfView: N, addTrigger: R } = G({
     activeTab: g
-  }), D = I(() => ({ addTrigger: R }), [R]);
-  return /* @__PURE__ */ a(v.Provider, { value: D, children: /* @__PURE__ */ b(
+  }), O = I(() => ({ addTrigger: R }), [R]);
+  return /* @__PURE__ */ a(v.Provider, { value: O, children: /* @__PURE__ */ b(
     c.Root,
     {
       ref: S,
+      dir: j,
       className: n.root,
-      onValueChange: x,
-      value: g ?? ((y = N[0]) == null ? void 0 : y.value),
+      onValueChange: h,
+      value: g ?? ((y = x[0]) == null ? void 0 : y.value),
       "data-tabs-content-padding": t,
       "data-tabs-variant": T,
       ...i,
       children: [
         /* @__PURE__ */ b("div", { className: n.triggerListWrapper, children: [
-          /* @__PURE__ */ a(c.List, { ref: j, "data-size": r, className: n.triggerList, children: N.map((e) => /* @__PURE__ */ z(
+          /* @__PURE__ */ a(c.List, { ref: A, "data-size": r, className: n.triggerList, children: x.map((e) => /* @__PURE__ */ z(
             c.Trigger,
             {
               ...e.props,
@@ -65,13 +67,13 @@ const L = ({
             e.element
           )) }),
           /* @__PURE__ */ b(d.Root, { children: [
-            h.length > 0 && /* @__PURE__ */ a(d.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ a(M, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ a(B, { size: 16 }) }) }),
-            /* @__PURE__ */ a(d.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: h.map((e) => /* @__PURE__ */ z(
+            N.length > 0 && /* @__PURE__ */ a(d.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ a(M, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ a(F, { size: 16 }) }) }),
+            /* @__PURE__ */ a(d.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: N.map((e) => /* @__PURE__ */ z(
               d.Item,
               {
                 ...e.props,
                 disabled: e.disabled,
-                onSelect: () => x(e.value),
+                onSelect: () => h(e.value),
                 key: e.value
               },
               e.element
@@ -81,7 +83,7 @@ const L = ({
             "span",
             {
               "data-test-id": "active-tab-indicator",
-              ref: A,
+              ref: D,
               className: n.activeIndicator
             }
           )
@@ -99,7 +101,7 @@ const V = ({ children: t, value: o, disabled: s }) => {
 V.displayName = "Tabs.Tab";
 const k = ({ children: t, ...o }, s) => {
   const { value: r, disabled: u } = f(m), { addTrigger: p } = f(v), T = w(null), i = w();
-  return O(() => {
+  return q(() => {
     p({
       ref: T || s,
       value: r ?? "",
@@ -116,14 +118,14 @@ const P = ({ children: t, ...o }, s) => {
   return /* @__PURE__ */ a(c.Content, { ref: s, ...o, className: n.content, value: r ?? "", children: t });
 };
 P.displayName = "Tabs.Content";
-const Z = {
+const ee = {
   Root: l(L),
   Tab: l(V),
   Trigger: l(k),
   Content: l(P)
 };
 export {
-  Z as Tabs,
+  ee as Tabs,
   P as TabsContent,
   L as TabsRoot,
   V as TabsTab,

package/dist/fondue-components27.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components27.js","sources":["../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconDotsHorizontal } from '@frontify/fondue-icons';\nimport * as RadixTabs from '@radix-ui/react-tabs';\nimport {\n    createContext,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport { Button } from '../Button/Button';\nimport { Dropdown } from '../Dropdown/Dropdown';\n\nimport { useTabTriggers } from './hooks/useTabTriggers';\nimport styles from './styles/tabs.module.scss';\nimport { type TabTrigger } from './types';\n\nexport type TabsRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The default active tab\n     * Used for uncontrolled components\n     */\n    defaultActiveTab?: string;\n    /**\n     * The controlled value of the active tab\n     */\n    activeTab?: string;\n    /**\n     * The height of the tabs\n     * @default 'medium'\n     */\n    size?: 'medium' | 'large';\n    /**\n     * Event handler called when the active tab changes\n     */\n    onActiveTabChange?: (value: string) => void;\n    /**\n     * Select the used variant\n     * “default 'default'\n     */\n    variant?: 'default' | 'pill';\n};\n\nconst TabConfigContext = createContext<{\n    value: string;\n    disabled?: boolean;\n}>({\n    value: '',\n    disabled: false,\n});\nTabConfigContext.displayName = 'TabConfigContext';\n\nconst TabTriggerContext = createContext<{\n    addTrigger: (trigger: TabTrigger) => void;\n}>({\n    addTrigger: () => {},\n});\nTabTriggerContext.displayName = 'TabTriggerContext';\n\nexport const TabsRoot = (\n    {\n        padding = 'compact',\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        size = 'medium',\n        onActiveTabChange,\n        children,\n        variant = 'default',\n        ...props\n    }: TabsRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [activeTab, setActiveTab] = useControllableState({\n        prop: propsActiveTab,\n        defaultProp: defaultActiveTab,\n        onChange: onActiveTabChange,\n    });\n\n    const handleSetActiveTab = useCallback(\n        (value: string) => {\n            setActiveTab(value);\n        },\n        [setActiveTab],\n    );\n\n    const { triggerListRef, activeIndicatorRef, triggers, triggersOutOfView, addTrigger } = useTabTriggers({\n        activeTab,\n    });\n\n    const contextValue = useMemo(() => ({ addTrigger }), [addTrigger]);\n\n    return (\n        <TabTriggerContext.Provider value={contextValue}>\n            <RadixTabs.Root\n                ref={ref}\n                className={styles.root}\n                onValueChange={handleSetActiveTab}\n                value={activeTab ?? triggers[0]?.value}\n                data-tabs-content-padding={padding}\n                data-tabs-variant={variant}\n                {...props}\n            >\n                <div className={styles.triggerListWrapper}>\n                    <RadixTabs.List ref={triggerListRef} data-size={size} className={styles.triggerList}>\n                        {triggers.map((trigger) => (\n                            <RadixTabs.Trigger\n                                {...trigger.props}\n                                key={trigger.value}\n                                value={trigger.value}\n                                disabled={trigger.disabled}\n                                className={styles.trigger}\n                                ref={trigger.ref}\n                            >\n                                {trigger.element}\n                            </RadixTabs.Trigger>\n                        ))}\n                    </RadixTabs.List>\n                    <Dropdown.Root>\n                        {triggersOutOfView.length > 0 && (\n                            <Dropdown.Trigger data-test-id=\"overflow-items-dropdown-trigger\">\n                                <Button emphasis=\"default\" aspect=\"square\" size=\"small\">\n                                    <IconDotsHorizontal size={16} />\n                                </Button>\n                            </Dropdown.Trigger>\n                        )}\n                        <Dropdown.Content align=\"end\" data-test-id=\"overflow-items-dropdown-content\">\n                            {triggersOutOfView.map((trigger) => (\n                                <Dropdown.Item\n                                    {...trigger.props}\n                                    disabled={trigger.disabled}\n                                    onSelect={() => handleSetActiveTab(trigger.value)}\n                                    key={trigger.value}\n                                >\n                                    {trigger.element}\n                                </Dropdown.Item>\n                            ))}\n                        </Dropdown.Content>\n                    </Dropdown.Root>\n                    <span\n                        data-test-id=\"active-tab-indicator\"\n                        ref={activeIndicatorRef}\n                        className={styles.activeIndicator}\n                    />\n                </div>\n                {children}\n            </RadixTabs.Root>\n        </TabTriggerContext.Provider>\n    );\n};\nTabsRoot.displayName = 'Tabs.Root';\n\ntype TabsTabProps = {\n    children: ReactNode;\n    value: string;\n    disabled?: boolean;\n};\n\nexport const TabsTab = ({ children, value, disabled }: TabsTabProps) => {\n    const contextValue = useMemo(() => ({ value, disabled }), [value, disabled]);\n\n    return <TabConfigContext.Provider value={contextValue}>{children}</TabConfigContext.Provider>;\n};\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabsTriggerProps = {\n    children: ReactNode;\n};\n\nexport const TabsTrigger = ({ children, ...props }: TabsTriggerProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { value, disabled } = useContext(TabConfigContext);\n\n    const { addTrigger } = useContext(TabTriggerContext);\n\n    const localRef = useRef<HTMLButtonElement>(null);\n    const previousElement = useRef<ReactNode>();\n\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n            previousElement: previousElement.current,\n        });\n        previousElement.current = children;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [children]);\n\n    return null;\n};\nTabsTrigger.displayName = 'Tabs.Trigger';\n\ntype TabsContentProps = {\n    children: ReactNode;\n    asChild?: boolean;\n};\n\nexport const TabsContent = ({ children, ...itemProps }: TabsContentProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const { value } = useContext(TabConfigContext);\n\n    return (\n        <RadixTabs.Content ref={ref} {...itemProps} className={styles.content} value={value ?? ''}>\n            {children}\n        </RadixTabs.Content>\n    );\n};\nTabsContent.displayName = 'Tabs.Content';\n\nexport const Tabs = {\n    Root: forwardRef<HTMLDivElement, TabsRootProps>(TabsRoot),\n    Tab: forwardRef<HTMLDivElement, TabsTabProps>(TabsTab),\n    Trigger: forwardRef<HTMLButtonElement, TabsTriggerProps>(TabsTrigger),\n    Content: forwardRef<HTMLDivElement, TabsContentProps>(TabsContent),\n};\n"],"names":["TabConfigContext","createContext","TabTriggerContext","TabsRoot","padding","propsActiveTab","defaultActiveTab","size","onActiveTabChange","children","variant","props","ref","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","contextValue","useMemo","jsx","jsxs","RadixTabs","styles","_a","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","previousElement","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components27.js","sources":["../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconDotsHorizontal } from '@frontify/fondue-icons';\nimport * as RadixTabs from '@radix-ui/react-tabs';\nimport {\n    createContext,\n    forwardRef,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport { Button } from '../Button/Button';\nimport { Dropdown } from '../Dropdown/Dropdown';\nimport { useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { useTabTriggers } from './hooks/useTabTriggers';\nimport styles from './styles/tabs.module.scss';\nimport { type TabTrigger } from './types';\n\nexport type TabsRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The default active tab\n     * Used for uncontrolled components\n     */\n    defaultActiveTab?: string;\n    /**\n     * The controlled value of the active tab\n     */\n    activeTab?: string;\n    /**\n     * The height of the tabs\n     * @default 'medium'\n     */\n    size?: 'medium' | 'large';\n    /**\n     * Event handler called when the active tab changes\n     */\n    onActiveTabChange?: (value: string) => void;\n    /**\n     * Select the used variant\n     * “default 'default'\n     */\n    variant?: 'default' | 'pill';\n};\n\nconst TabConfigContext = createContext<{\n    value: string;\n    disabled?: boolean;\n}>({\n    value: '',\n    disabled: false,\n});\nTabConfigContext.displayName = 'TabConfigContext';\n\nconst TabTriggerContext = createContext<{\n    addTrigger: (trigger: TabTrigger) => void;\n}>({\n    addTrigger: () => {},\n});\nTabTriggerContext.displayName = 'TabTriggerContext';\n\nexport const TabsRoot = (\n    {\n        padding = 'compact',\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        size = 'medium',\n        onActiveTabChange,\n        children,\n        variant = 'default',\n        ...props\n    }: TabsRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { dir } = useFondueTheme();\n\n    const [activeTab, setActiveTab] = useControllableState({\n        prop: propsActiveTab,\n        defaultProp: defaultActiveTab,\n        onChange: onActiveTabChange,\n    });\n\n    const handleSetActiveTab = useCallback(\n        (value: string) => {\n            setActiveTab(value);\n        },\n        [setActiveTab],\n    );\n\n    const { triggerListRef, activeIndicatorRef, triggers, triggersOutOfView, addTrigger } = useTabTriggers({\n        activeTab,\n    });\n\n    const contextValue = useMemo(() => ({ addTrigger }), [addTrigger]);\n\n    return (\n        <TabTriggerContext.Provider value={contextValue}>\n            <RadixTabs.Root\n                ref={ref}\n                dir={dir}\n                className={styles.root}\n                onValueChange={handleSetActiveTab}\n                value={activeTab ?? triggers[0]?.value}\n                data-tabs-content-padding={padding}\n                data-tabs-variant={variant}\n                {...props}\n            >\n                <div className={styles.triggerListWrapper}>\n                    <RadixTabs.List ref={triggerListRef} data-size={size} className={styles.triggerList}>\n                        {triggers.map((trigger) => (\n                            <RadixTabs.Trigger\n                                {...trigger.props}\n                                key={trigger.value}\n                                value={trigger.value}\n                                disabled={trigger.disabled}\n                                className={styles.trigger}\n                                ref={trigger.ref}\n                            >\n                                {trigger.element}\n                            </RadixTabs.Trigger>\n                        ))}\n                    </RadixTabs.List>\n                    <Dropdown.Root>\n                        {triggersOutOfView.length > 0 && (\n                            <Dropdown.Trigger data-test-id=\"overflow-items-dropdown-trigger\">\n                                <Button emphasis=\"default\" aspect=\"square\" size=\"small\">\n                                    <IconDotsHorizontal size={16} />\n                                </Button>\n                            </Dropdown.Trigger>\n                        )}\n                        <Dropdown.Content align=\"end\" data-test-id=\"overflow-items-dropdown-content\">\n                            {triggersOutOfView.map((trigger) => (\n                                <Dropdown.Item\n                                    {...trigger.props}\n                                    disabled={trigger.disabled}\n                                    onSelect={() => handleSetActiveTab(trigger.value)}\n                                    key={trigger.value}\n                                >\n                                    {trigger.element}\n                                </Dropdown.Item>\n                            ))}\n                        </Dropdown.Content>\n                    </Dropdown.Root>\n                    <span\n                        data-test-id=\"active-tab-indicator\"\n                        ref={activeIndicatorRef}\n                        className={styles.activeIndicator}\n                    />\n                </div>\n                {children}\n            </RadixTabs.Root>\n        </TabTriggerContext.Provider>\n    );\n};\nTabsRoot.displayName = 'Tabs.Root';\n\ntype TabsTabProps = {\n    children: ReactNode;\n    value: string;\n    disabled?: boolean;\n};\n\nexport const TabsTab = ({ children, value, disabled }: TabsTabProps) => {\n    const contextValue = useMemo(() => ({ value, disabled }), [value, disabled]);\n\n    return <TabConfigContext.Provider value={contextValue}>{children}</TabConfigContext.Provider>;\n};\nTabsTab.displayName = 'Tabs.Tab';\n\ntype TabsTriggerProps = {\n    children: ReactNode;\n};\n\nexport const TabsTrigger = ({ children, ...props }: TabsTriggerProps, ref: ForwardedRef<HTMLButtonElement>) => {\n    const { value, disabled } = useContext(TabConfigContext);\n\n    const { addTrigger } = useContext(TabTriggerContext);\n\n    const localRef = useRef<HTMLButtonElement>(null);\n    const previousElement = useRef<ReactNode>();\n\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n            previousElement: previousElement.current,\n        });\n        previousElement.current = children;\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [children]);\n\n    return null;\n};\nTabsTrigger.displayName = 'Tabs.Trigger';\n\ntype TabsContentProps = {\n    children: ReactNode;\n    asChild?: boolean;\n};\n\nexport const TabsContent = ({ children, ...itemProps }: TabsContentProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const { value } = useContext(TabConfigContext);\n\n    return (\n        <RadixTabs.Content ref={ref} {...itemProps} className={styles.content} value={value ?? ''}>\n            {children}\n        </RadixTabs.Content>\n    );\n};\nTabsContent.displayName = 'Tabs.Content';\n\nexport const Tabs = {\n    Root: forwardRef<HTMLDivElement, TabsRootProps>(TabsRoot),\n    Tab: forwardRef<HTMLDivElement, TabsTabProps>(TabsTab),\n    Trigger: forwardRef<HTMLButtonElement, TabsTriggerProps>(TabsTrigger),\n    Content: forwardRef<HTMLDivElement, TabsContentProps>(TabsContent),\n};\n"],"names":["TabConfigContext","createContext","TabTriggerContext","TabsRoot","padding","propsActiveTab","defaultActiveTab","size","onActiveTabChange","children","variant","props","ref","dir","useFondueTheme","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","contextValue","useMemo","jsx","jsxs","RadixTabs","styles","_a","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","previousElement","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":"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"}

package/dist/fondue-components29.js

@@ -1,62 +1,67 @@
-import { jsxs as w, jsx as l } from "react/jsx-runtime";
-import { IconCheckMark as N, IconExclamationMarkTriangle as S } from "@frontify/fondue-icons";
-import { forwardRef as n, useRef as T } from "react";
-import { cn as m } from "./fondue-components38.js";
-import t from "./fondue-components81.js";
-const f = ({
-  children: c,
-  className: i,
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { IconCheckMark as h, IconExclamationMarkTriangle as S } from "@frontify/fondue-icons";
+import { forwardRef as f, useRef as T } from "react";
+import { cn as u } from "./fondue-components38.js";
+import a from "./fondue-components81.js";
+const x = ({
+  children: i,
+  className: c,
   status: e = "neutral",
-  "data-test-id": r = "fondue-text-input",
-  "aria-errormessage": g,
-  ...a
-}, R) => {
-  const d = T(!1);
-  return /* @__PURE__ */ w("div", { className: m(t.root, i), "data-status": e, "data-test-id": r, children: [
-    e === "loading" ? /* @__PURE__ */ l("div", { className: t.loadingStatus, "data-test-id": `${r}-loader` }) : null,
-    /* @__PURE__ */ l(
-      "input",
-      {
-        onMouseDown: (o) => {
-          d.current = !0, o.currentTarget.dataset.showFocusRing = "false";
-        },
-        type: "text",
-        ...a,
-        onFocus: (o) => {
-          var s;
-          d.current || (o.target.dataset.showFocusRing = "true"), (s = a.onFocus) == null || s.call(a, o);
-        },
-        onBlur: (o) => {
-          var s;
-          o.target.dataset.showFocusRing = "false", d.current = !1, (s = a.onBlur) == null || s.call(a, o);
-        },
-        ref: R,
-        className: t.input,
-        "aria-invalid": e === "error",
-        "aria-errormessage": e === "error" ? g : void 0
-      }
-    ),
-    e === "success" ? /* @__PURE__ */ l(N, { size: 16, className: t.iconSuccess, "data-test-id": `${r}-success-icon` }) : null,
-    e === "error" ? /* @__PURE__ */ l(
+  "data-test-id": t = "fondue-text-input",
+  "aria-errormessage": N,
+  placeholder: d,
+  ...r
+}, w) => {
+  const n = T(!1);
+  return /* @__PURE__ */ m("div", { className: u(a.root, c), "data-status": e, "data-test-id": t, children: [
+    e === "loading" ? /* @__PURE__ */ s("div", { className: a.loadingStatus, "data-test-id": `${t}-loader` }) : null,
+    /* @__PURE__ */ m("div", { className: a.inputWrapper, children: [
+      d && /* @__PURE__ */ s("div", { className: a.placeholder, children: d }),
+      /* @__PURE__ */ s(
+        "input",
+        {
+          onMouseDown: (o) => {
+            n.current = !0, o.currentTarget.dataset.showFocusRing = "false";
+          },
+          type: "text",
+          placeholder: d,
+          ...r,
+          onFocus: (o) => {
+            var l;
+            n.current || (o.target.dataset.showFocusRing = "true"), (l = r.onFocus) == null || l.call(r, o);
+          },
+          onBlur: (o) => {
+            var l;
+            o.target.dataset.showFocusRing = "false", n.current = !1, (l = r.onBlur) == null || l.call(r, o);
+          },
+          ref: w,
+          className: a.input,
+          "aria-invalid": e === "error",
+          "aria-errormessage": e === "error" ? N : void 0
+        }
+      )
+    ] }),
+    e === "success" ? /* @__PURE__ */ s(h, { size: 16, className: a.iconSuccess, "data-test-id": `${t}-success-icon` }) : null,
+    e === "error" ? /* @__PURE__ */ s(
       S,
       {
         size: 16,
-        className: t.iconError,
-        "data-test-id": `${r}-error-icon`
+        className: a.iconError,
+        "data-test-id": `${t}-error-icon`
       }
     ) : null,
-    c
+    i
   ] });
 };
-f.displayName = "TextField.Root";
-const u = ({ name: c, className: i, ...e }, r) => /* @__PURE__ */ l("div", { "data-slot": !0, "data-name": c, ...e, ref: r, className: m(t.slot, i) });
-u.displayName = "TextField.Slot";
-const x = n(f), h = n(u), F = x;
-F.Root = x;
-F.Slot = h;
+x.displayName = "TextField.Root";
+const F = ({ name: i, className: c, ...e }, t) => /* @__PURE__ */ s("div", { "data-slot": !0, "data-name": i, ...e, ref: t, className: u(a.slot, c) });
+F.displayName = "TextField.Slot";
+const g = f(x), v = f(F), R = g;
+R.Root = g;
+R.Slot = v;
 export {
-  f as TextFieldRoot,
-  u as TextFieldSlot,
-  F as TextInput
+  x as TextFieldRoot,
+  F as TextFieldSlot,
+  R as TextInput
 };
 //# sourceMappingURL=fondue-components29.js.map

package/dist/fondue-components29.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components29.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    type FocusEvent,\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/text.module.scss';\n\nexport type TextInputProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The place where the input slots are placed\n     */\n    children?: ReactNode;\n    /**\n     * The default value of the text input\n     * Used for uncontrolled components\n     */\n    defaultValue?: string | number;\n    /**\n     * The controlled value of the text input\n     */\n    value?: string | number;\n    /**\n     * Type of the text input\n     * @default \"text\"\n     */\n    type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';\n    /**\n     * The placeholder in the text input\n     */\n    placeholder?: string;\n    /**\n     * Disable the text input\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the text input required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the text input spell-checkable\n     * @default true\n     */\n    spellCheck?: boolean;\n    /**\n     * Make the text input read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Set the type of input so autocomplete can help the user\n     * @default \"on\"\n     */\n    autoComplete?: string;\n    /**\n     * The maximum length of the text input\n     */\n    maxLength?: number;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error' | 'loading';\n    className?: string;\n    /**\n     * Event handler called when the text input value changes\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\n        'aria-errormessage': ariaErrormessage,\n        ...inputProps\n    }: TextInputProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) => {\n    const wasClicked = useRef(false);\n\n    return (\n        <div className={cn(styles.root, className)} data-status={status} data-test-id={dataTestId}>\n            {status === 'loading' ? (\n                <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />\n            ) : null}\n            <input\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                type=\"text\"\n                {...inputProps}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                    inputProps.onFocus?.(focusEvent);\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                    inputProps.onBlur?.(blurEvent);\n                }}\n                ref={ref}\n                className={styles.input}\n                aria-invalid={status === 'error'}\n                aria-errormessage={status === 'error' ? ariaErrormessage : undefined}\n            />\n\n            {status === 'success' ? (\n                <IconCheckMark size={16} className={styles.iconSuccess} data-test-id={`${dataTestId}-success-icon`} />\n            ) : null}\n\n            {status === 'error' ? (\n                <IconExclamationMarkTriangle\n                    size={16}\n                    className={styles.iconError}\n                    data-test-id={`${dataTestId}-error-icon`}\n                />\n            ) : null}\n\n            {children}\n        </div>\n    );\n};\nTextFieldRoot.displayName = 'TextField.Root';\n\nexport type TextFieldSlotProps = {\n    children: ReactNode;\n    name?: 'left' | 'right';\n    className?: string;\n};\n\nexport const TextFieldSlot = (\n    { name, className, ...slotProps }: TextFieldSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return <div data-slot data-name={name} {...slotProps} ref={forwardedRef} className={cn(styles.slot, className)} />;\n};\n\nTextFieldSlot.displayName = 'TextField.Slot';\n\nconst ForwardedRefTextFieldRoot = forwardRef<HTMLInputElement, TextInputProps>(TextFieldRoot);\nconst ForwardedRefTextFieldSlot = forwardRef<HTMLDivElement, TextFieldSlotProps>(TextFieldSlot);\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const TextInput: typeof TextFieldRoot & {\n    Root: typeof ForwardedRefTextFieldRoot;\n    Slot: typeof ForwardedRefTextFieldSlot;\n} = ForwardedRefTextFieldRoot;\nTextInput.Root = ForwardedRefTextFieldRoot;\nTextInput.Slot = ForwardedRefTextFieldSlot;\n"],"names":["TextFieldRoot","children","className","status","dataTestId","ariaErrormessage","inputProps","ref","wasClicked","useRef","jsxs","cn","styles","jsx","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA6GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,qBAAqBC;AAAA,EACrB,GAAGC;AACP,GACAC,MACC;AACD,QAAMC,IAAaC,EAAO,EAAK;AAE/B,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,MAAMV,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GAC1E,UAAA;AAAA,IAAAD,MAAW,YACR,gBAAAU,EAAC,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGR,CAAU,UAAA,CAAW,IAC5E;AAAA,IACJ,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,aAAa,CAACC,MAAe;AACzB,UAAAN,EAAW,UAAU,IACrBM,EAAW,cAAc,QAAQ,gBAAgB;AAAA,QACrD;AAAA,QACA,MAAK;AAAA,QACJ,GAAGR;AAAA,QACJ,SAAS,CAACS,MAAe;;AACrB,UAAKP,EAAW,YACZO,EAAW,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAV,EAAW,YAAX,QAAAU,EAAA,KAAAV,GAAqBS;AAAA,QACzB;AAAA,QACA,QAAQ,CAACE,MAAc;;AACnB,UAAAA,EAAU,OAAO,QAAQ,gBAAgB,SACzCT,EAAW,UAAU,KACrBQ,IAAAV,EAAW,WAAX,QAAAU,EAAA,KAAAV,GAAoBW;AAAA,QACxB;AAAA,QACA,KAAAV;AAAA,QACA,WAAWK,EAAO;AAAA,QAClB,gBAAcT,MAAW;AAAA,QACzB,qBAAmBA,MAAW,UAAUE,IAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,IAG9DF,MAAW,YACR,gBAAAU,EAACK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,aAAa,gBAAc,GAAGR,CAAU,iBAAiB,IACpG;AAAA,IAEHD,MAAW,UACR,gBAAAU;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWP,EAAO;AAAA,QAClB,gBAAc,GAAGR,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EAAA,GACL;AAER;AACAD,EAAc,cAAc;AAQrB,MAAMoB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAAnB,GAAW,GAAGoB,EAAA,GACtBC,MAEO,gBAAAV,EAAC,OAAA,EAAI,aAAS,IAAC,aAAWQ,GAAO,GAAGC,GAAW,KAAKC,GAAc,WAAWZ,EAAGC,EAAO,MAAMV,CAAS,GAAG;AAGpHkB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6CzB,CAAa,GACtF0B,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}
+{"version":3,"file":"fondue-components29.js","sources":["../src/components/TextInput/TextInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport {\n    type FocusEvent,\n    forwardRef,\n    useRef,\n    type ChangeEvent,\n    type ForwardedRef,\n    type KeyboardEvent,\n    type ReactNode,\n    type SyntheticEvent,\n} from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/text.module.scss';\n\nexport type TextInputProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The place where the input slots are placed\n     */\n    children?: ReactNode;\n    /**\n     * The default value of the text input\n     * Used for uncontrolled components\n     */\n    defaultValue?: string | number;\n    /**\n     * The controlled value of the text input\n     */\n    value?: string | number;\n    /**\n     * Type of the text input\n     * @default \"text\"\n     */\n    type?: 'date' | 'email' | 'hidden' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';\n    /**\n     * The placeholder in the text input\n     */\n    placeholder?: string;\n    /**\n     * Disable the text input\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Make the text input required in form\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Make the text input spell-checkable\n     * @default true\n     */\n    spellCheck?: boolean;\n    /**\n     * Make the text input read-only\n     * @default false\n     */\n    readOnly?: boolean;\n    /**\n     * Set the type of input so autocomplete can help the user\n     * @default \"on\"\n     */\n    autoComplete?: string;\n    /**\n     * The maximum length of the text input\n     */\n    maxLength?: number;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error' | 'loading';\n    className?: string;\n    /**\n     * Event handler called when the text input value changes\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is blurred\n     */\n    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text input is focused\n     */\n    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is pressed\n     */\n    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when a key is released\n     */\n    onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;\n    /**\n     * Event handler called when the text inside of text input is selected\n     */\n    onSelect?: (event: SyntheticEvent<HTMLInputElement>) => void;\n    'data-test-id'?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n    'aria-errormessage'?: string;\n};\n\nexport const TextFieldRoot = (\n    {\n        children,\n        className,\n        status = 'neutral',\n        'data-test-id': dataTestId = 'fondue-text-input',\n        'aria-errormessage': ariaErrormessage,\n        placeholder,\n        ...inputProps\n    }: TextInputProps,\n    ref: ForwardedRef<HTMLInputElement>,\n) => {\n    const wasClicked = useRef(false);\n\n    return (\n        <div className={cn(styles.root, className)} data-status={status} data-test-id={dataTestId}>\n            {status === 'loading' ? (\n                <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />\n            ) : null}\n            <div className={styles.inputWrapper}>\n                {placeholder && <div className={styles.placeholder}>{placeholder}</div>}\n                <input\n                    onMouseDown={(mouseEvent) => {\n                        wasClicked.current = true;\n                        mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                    }}\n                    type=\"text\"\n                    placeholder={placeholder}\n                    {...inputProps}\n                    onFocus={(focusEvent) => {\n                        if (!wasClicked.current) {\n                            focusEvent.target.dataset.showFocusRing = 'true';\n                        }\n                        inputProps.onFocus?.(focusEvent);\n                    }}\n                    onBlur={(blurEvent) => {\n                        blurEvent.target.dataset.showFocusRing = 'false';\n                        wasClicked.current = false;\n                        inputProps.onBlur?.(blurEvent);\n                    }}\n                    ref={ref}\n                    className={styles.input}\n                    aria-invalid={status === 'error'}\n                    aria-errormessage={status === 'error' ? ariaErrormessage : undefined}\n                />\n            </div>\n\n            {status === 'success' ? (\n                <IconCheckMark size={16} className={styles.iconSuccess} data-test-id={`${dataTestId}-success-icon`} />\n            ) : null}\n\n            {status === 'error' ? (\n                <IconExclamationMarkTriangle\n                    size={16}\n                    className={styles.iconError}\n                    data-test-id={`${dataTestId}-error-icon`}\n                />\n            ) : null}\n\n            {children}\n        </div>\n    );\n};\nTextFieldRoot.displayName = 'TextField.Root';\n\nexport type TextFieldSlotProps = {\n    children: ReactNode;\n    name?: 'left' | 'right';\n    className?: string;\n};\n\nexport const TextFieldSlot = (\n    { name, className, ...slotProps }: TextFieldSlotProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return <div data-slot data-name={name} {...slotProps} ref={forwardedRef} className={cn(styles.slot, className)} />;\n};\n\nTextFieldSlot.displayName = 'TextField.Slot';\n\nconst ForwardedRefTextFieldRoot = forwardRef<HTMLInputElement, TextInputProps>(TextFieldRoot);\nconst ForwardedRefTextFieldSlot = forwardRef<HTMLDivElement, TextFieldSlotProps>(TextFieldSlot);\n// @ts-expect-error We support both single component (without slots) and compound components (with slots)\nexport const TextInput: typeof TextFieldRoot & {\n    Root: typeof ForwardedRefTextFieldRoot;\n    Slot: typeof ForwardedRefTextFieldSlot;\n} = ForwardedRefTextFieldRoot;\nTextInput.Root = ForwardedRefTextFieldRoot;\nTextInput.Slot = ForwardedRefTextFieldSlot;\n"],"names":["TextFieldRoot","children","className","status","dataTestId","ariaErrormessage","placeholder","inputProps","ref","wasClicked","useRef","jsxs","cn","styles","jsx","mouseEvent","focusEvent","_a","blurEvent","IconCheckMark","IconExclamationMarkTriangle","TextFieldSlot","name","slotProps","forwardedRef","ForwardedRefTextFieldRoot","forwardRef","ForwardedRefTextFieldSlot","TextInput"],"mappings":";;;;;AA6GO,MAAMA,IAAgB,CACzB;AAAA,EACI,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,gBAAgBC,IAAa;AAAA,EAC7B,qBAAqBC;AAAA,EACrB,aAAAC;AAAA,EACA,GAAGC;AACP,GACAC,MACC;AACD,QAAMC,IAAaC,EAAO,EAAK;AAE/B,SACI,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,MAAMX,CAAS,GAAG,eAAaC,GAAQ,gBAAcC,GAC1E,UAAA;AAAA,IAAAD,MAAW,YACR,gBAAAW,EAAC,OAAA,EAAI,WAAWD,EAAO,eAAe,gBAAc,GAAGT,CAAU,UAAA,CAAW,IAC5E;AAAA,IACJ,gBAAAO,EAAC,OAAA,EAAI,WAAWE,EAAO,cAClB,UAAA;AAAA,MAAAP,KAAe,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,aAAc,UAAAP,GAAY;AAAA,MACjE,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,aAAa,CAACC,MAAe;AACzB,YAAAN,EAAW,UAAU,IACrBM,EAAW,cAAc,QAAQ,gBAAgB;AAAA,UACrD;AAAA,UACA,MAAK;AAAA,UACL,aAAAT;AAAA,UACC,GAAGC;AAAA,UACJ,SAAS,CAACS,MAAe;;AACrB,YAAKP,EAAW,YACZO,EAAW,OAAO,QAAQ,gBAAgB,UAE9CC,IAAAV,EAAW,YAAX,QAAAU,EAAA,KAAAV,GAAqBS;AAAA,UACzB;AAAA,UACA,QAAQ,CAACE,MAAc;;AACnB,YAAAA,EAAU,OAAO,QAAQ,gBAAgB,SACzCT,EAAW,UAAU,KACrBQ,IAAAV,EAAW,WAAX,QAAAU,EAAA,KAAAV,GAAoBW;AAAA,UACxB;AAAA,UACA,KAAAV;AAAA,UACA,WAAWK,EAAO;AAAA,UAClB,gBAAcV,MAAW;AAAA,UACzB,qBAAmBA,MAAW,UAAUE,IAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/D,GACJ;AAAA,IAECF,MAAW,YACR,gBAAAW,EAACK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,aAAa,gBAAc,GAAGT,CAAU,iBAAiB,IACpG;AAAA,IAEHD,MAAW,UACR,gBAAAW;AAAA,MAACM;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWP,EAAO;AAAA,QAClB,gBAAc,GAAGT,CAAU;AAAA,MAAA;AAAA,IAAA,IAE/B;AAAA,IAEHH;AAAA,EAAA,GACL;AAER;AACAD,EAAc,cAAc;AAQrB,MAAMqB,IAAgB,CACzB,EAAE,MAAAC,GAAM,WAAApB,GAAW,GAAGqB,EAAA,GACtBC,MAEO,gBAAAV,EAAC,OAAA,EAAI,aAAS,IAAC,aAAWQ,GAAO,GAAGC,GAAW,KAAKC,GAAc,WAAWZ,EAAGC,EAAO,MAAMX,CAAS,GAAG;AAGpHmB,EAAc,cAAc;AAE5B,MAAMI,IAA4BC,EAA6C1B,CAAa,GACtF2B,IAA4BD,EAA+CL,CAAa,GAEjFO,IAGTH;AACJG,EAAU,OAAOH;AACjBG,EAAU,OAAOD;"}

package/dist/fondue-components31.js

@@ -1,16 +1,16 @@
-import { jsx as o } from "react/jsx-runtime";
-import n from "./fondue-components83.js";
-import { Slot as i } from "@radix-ui/react-slot";
-import { createContext as l, useContext as a } from "react";
-const e = l("light");
-e.displayName = "ThemeContext";
-const u = () => a(e), x = ({ children: r, theme: t = "light", asChild: m = !1 }) => {
-  const s = m ? i : "div";
-  return /* @__PURE__ */ o(e.Provider, { value: t, children: /* @__PURE__ */ o(s, { className: n[t], children: r }) });
+import { jsx as r } from "react/jsx-runtime";
+import i from "./fondue-components83.js";
+import { Slot as c } from "@radix-ui/react-slot";
+import { createContext as a, useContext as u, useMemo as p } from "react";
+const o = a({ theme: "light", dir: "ltr" });
+o.displayName = "ThemeContext";
+const C = () => u(o), v = ({ children: m, theme: e = "light", dir: t = "ltr", asChild: s = !1 }) => {
+  const n = s ? c : "div", l = p(() => ({ theme: e, dir: t }), [e, t]);
+  return /* @__PURE__ */ r(o.Provider, { value: l, children: /* @__PURE__ */ r(n, { dir: t, className: i[e], children: m }) });
 };
 export {
-  e as ThemeContext,
-  x as ThemeProvider,
-  u as useFondueTheme
+  o as ThemeContext,
+  v as ThemeProvider,
+  C as useFondueTheme
 };
 //# sourceMappingURL=fondue-components31.js.map

package/dist/fondue-components31.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components31.js","sources":["../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from '@frontify/fondue-tokens/theme-tokens';\nimport { Slot } from '@radix-ui/react-slot';\nimport { createContext, useContext, type ReactNode } from 'react';\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     * 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\nexport const ThemeContext = createContext<AvailableTheme>('light');\nThemeContext.displayName = 'ThemeContext';\n\nexport const useFondueTheme = () => {\n    return useContext(ThemeContext);\n};\n\nexport const ThemeProvider = ({ children, theme = 'light', asChild = false }: ThemeProviderProps) => {\n    const Comp = asChild ? Slot : 'div';\n    return (\n        <ThemeContext.Provider value={theme}>\n            <Comp className={styles[theme]}>{children}</Comp>\n        </ThemeContext.Provider>\n    );\n};\n"],"names":["ThemeContext","createContext","useFondueTheme","useContext","ThemeProvider","children","theme","asChild","Comp","Slot","jsx","styles"],"mappings":";;;;AAsBO,MAAMA,IAAeC,EAA8B,OAAO;AACjED,EAAa,cAAc;AAEpB,MAAME,IAAiB,MACnBC,EAAWH,CAAY,GAGrBI,IAAgB,CAAC,EAAE,UAAAC,GAAU,OAAAC,IAAQ,SAAS,SAAAC,IAAU,SAAgC;AACjG,QAAMC,IAAOD,IAAUE,IAAO;AAC9B,SACI,gBAAAC,EAACV,EAAa,UAAb,EAAsB,OAAOM,GAC1B,UAAA,gBAAAI,EAACF,GAAA,EAAK,WAAWG,EAAOL,CAAK,GAAI,UAAAD,GAAS,GAC9C;AAER;"}
+{"version":3,"file":"fondue-components31.js","sources":["../src/components/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport styles from '@frontify/fondue-tokens/theme-tokens';\nimport { Slot } from '@radix-ui/react-slot';\nimport { createContext, useContext, useMemo, type ReactNode } from 'react';\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     * 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\nexport const ThemeContext = createContext<Pick<ThemeProviderProps, 'theme' | 'dir'>>({ theme: 'light', dir: 'ltr' });\nThemeContext.displayName = 'ThemeContext';\n\nexport const useFondueTheme = () => {\n    return useContext(ThemeContext);\n};\n\nexport const ThemeProvider = ({ children, theme = 'light', dir = 'ltr', asChild = false }: ThemeProviderProps) => {\n    const Comp = asChild ? Slot : 'div';\n\n    const contextValue = useMemo(() => ({ theme, dir }), [theme, dir]);\n\n    return (\n        <ThemeContext.Provider value={contextValue}>\n            <Comp dir={dir} className={styles[theme]}>\n                {children}\n            </Comp>\n        </ThemeContext.Provider>\n    );\n};\n"],"names":["ThemeContext","createContext","useFondueTheme","useContext","ThemeProvider","children","theme","dir","asChild","Comp","Slot","contextValue","useMemo","jsx","styles"],"mappings":";;;;AA2BO,MAAMA,IAAeC,EAAyD,EAAE,OAAO,SAAS,KAAK,OAAO;AACnHD,EAAa,cAAc;AAEpB,MAAME,IAAiB,MACnBC,EAAWH,CAAY,GAGrBI,IAAgB,CAAC,EAAE,UAAAC,GAAU,OAAAC,IAAQ,SAAS,KAAAC,IAAM,OAAO,SAAAC,IAAU,SAAgC;AAC9G,QAAMC,IAAOD,IAAUE,IAAO,OAExBC,IAAeC,EAAQ,OAAO,EAAE,OAAAN,GAAO,KAAAC,MAAQ,CAACD,GAAOC,CAAG,CAAC;AAEjE,SACI,gBAAAM,EAACb,EAAa,UAAb,EAAsB,OAAOW,GAC1B,UAAA,gBAAAE,EAACJ,GAAA,EAAK,KAAAF,GAAU,WAAWO,EAAOR,CAAK,GAClC,UAAAD,GACL,GACJ;AAER;"}

package/dist/fondue-components32.js

@@ -1,60 +1,60 @@
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import * as e from "@radix-ui/react-tooltip";
-import { forwardRef as n } from "react";
-import { cn as u } from "./fondue-components38.js";
-import { useFondueTheme as h, ThemeProvider as y } from "./fondue-components31.js";
-import d from "./fondue-components84.js";
-const s = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: a }) => /* @__PURE__ */ o(e.Provider, { children: /* @__PURE__ */ o(e.Root, { delayDuration: r, open: i, onOpenChange: a, children: t }) });
-s.displayName = "Tooltip.Root";
-const l = ({ asChild: t = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, a) => /* @__PURE__ */ o(
-  e.Trigger,
+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-components38.js";
+import { useFondueTheme as N, ThemeProvider as x } from "./fondue-components31.js";
+import s from "./fondue-components84.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: a,
-    children: r
+    ref: n,
+    children: e
   }
 );
-l.displayName = "Tooltip.Trigger";
-const p = ({
+m.displayName = "Tooltip.Trigger";
+const f = ({
   children: t,
-  className: r,
+  className: e,
   maxWidth: i,
-  "data-test-id": a = "fondue-tooltip-content",
-  padding: m = "spacious",
-  side: c
-}, g) => {
-  const T = h();
-  return /* @__PURE__ */ o(e.Portal, { children: /* @__PURE__ */ o(y, { theme: T, children: /* @__PURE__ */ f(
-    e.Content,
+  "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,
     {
-      "data-test-id": a,
-      "data-tooltip-spacing": m,
-      className: u(d.root, r),
+      "data-test-id": n,
+      "data-tooltip-spacing": c,
+      className: R(s.root, e),
       style: { maxWidth: i },
       collisionPadding: 16,
       sideOffset: 8,
-      ref: g,
-      side: c,
+      ref: u,
+      side: h(g),
       children: [
         t,
-        /* @__PURE__ */ o(e.Arrow, { "aria-hidden": "true", className: d.arrow })
+        /* @__PURE__ */ o(r.Arrow, { "aria-hidden": "true", className: s.arrow })
       ]
     }
   ) }) });
 };
-p.displayName = "Tooltip.Content";
-const w = {
-  Root: s,
-  Trigger: n(l),
-  Content: n(p)
+f.displayName = "Tooltip.Content";
+const A = {
+  Root: p,
+  Trigger: l(m),
+  Content: l(f)
 };
 export {
-  w as Tooltip,
-  p as TooltipContent,
-  s as TooltipRoot,
-  l as TooltipTrigger
+  A as Tooltip,
+  f as TooltipContent,
+  p as TooltipRoot,
+  m as TooltipTrigger
 };
 //# sourceMappingURL=fondue-components32.js.map

package/dist/fondue-components32.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components32.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 = useFondueTheme();\n    return (\n        <RadixTooltip.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixTooltip.Content\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={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","useFondueTheme","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,QAAMM,IAAQC,EAAA;AACd,2BACKX,EAAa,QAAb,EACG,UAAA,gBAAAD,EAACa,KAAc,OAAAF,GACX,UAAA,gBAAAG;AAAA,IAACb,EAAa;AAAA,IAAb;AAAA,MACG,gBAAcG;AAAA,MACd,wBAAsBK;AAAA,MACtB,WAAWM,EAAGC,EAAO,MAAMT,CAAS;AAAA,MACpC,OAAO,EAAE,UAAAC,EAAA;AAAA,MACT,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,KAAAH;AAAA,MACA,MAAAK;AAAA,MAEC,UAAA;AAAA,QAAAd;AAAA,QACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWe,EAAO,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAExE,EAAA,CACJ;AAER;AACAV,EAAe,cAAc;AAEtB,MAAMW,IAAU;AAAA,EACnB,MAAMtB;AAAA,EACN,SAASuB,EAAmDhB,CAAc;AAAA,EAC1E,SAASgB,EAAgDZ,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components32.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                    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,gBAAcG;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-components33.js

@@ -1,4 +1,4 @@
-const o = "_root_1jhe2_2", c = "_accordionItem_1jhe2_23", n = "_accordionTrigger_1jhe2_29", r = "_accordionHeader_1jhe2_34", t = "_accordionSlot_1jhe2_41", e = "_accordionCaret_1jhe2_66", a = "_accordionTriggerContent_1jhe2_74", i = "_accordionContent_1jhe2_79", d = "_accordionContentText_1jhe2_108", _ = {
+const o = "_root_eybkh_2", c = "_accordionItem_eybkh_23", n = "_accordionTrigger_eybkh_29", r = "_accordionHeader_eybkh_34", t = "_accordionSlot_eybkh_41", e = "_accordionCaret_eybkh_66", a = "_accordionTriggerContent_eybkh_74", i = "_accordionContent_eybkh_79", d = "_accordionContentText_eybkh_108", _ = {
   root: o,
   accordionItem: c,
   accordionTrigger: n,

package/dist/fondue-components34.js

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

package/dist/fondue-components35.js

@@ -1,4 +1,4 @@
-const s = "_root_frcwu_3", o = "_dismiss_frcwu_154", t = {
+const s = "_root_i684q_3", o = "_dismiss_i684q_156", t = {
   root: s,
   dismiss: o
 };

package/dist/fondue-components37.js

@@ -1,4 +1,4 @@
-const o = "_root_howjn_6", t = {
+const o = "_root_f9dx4_6", t = {
   root: o
 };
 export {

package/dist/fondue-components39.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components85.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components87.js";
 import { sv as e } from "./fondue-components38.js";
 const o = e({
   base: `tw-group tw-relative tw-flex tw-flex-row tw-gap-2 tw-items-center tw-justify-center tw-cursor-pointer tw-font-body tw-font-medium tw-box-border tw-whitespace-nowrap tw-transition-colors ${t}`,

package/dist/fondue-components4.js

@@ -13,7 +13,7 @@ const C = ({
   size: b = "default",
   status: f,
   title: n,
-  variant: u
+  variant: u = "default"
 }) => {
   const l = {
     "aria-label": e || n,

package/dist/fondue-components4.js.map

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

package/dist/fondue-components42.js

@@ -1,4 +1,4 @@
-import { FOCUS_OUTLINE as t } from "./fondue-components85.js";
+import { FOCUS_OUTLINE as t } from "./fondue-components87.js";
 import { sv as e } from "./fondue-components38.js";
 const s = e({
   base: `tw-peer tw-relative tw-inline-flex tw-bg-base tw-text-white tw-shrink-0 tw-rounded tw-border tw-border-line-x-strong group-hover:tw-border-line-xx-strong hover:tw-border-line-xx-strong tw-transition-colors data-[state="checked"]:tw-border-transparent data-[state="indeterminate"]:tw-border-transparent disabled:tw-border-line-strong disabled:tw-bg-base disabled:tw-cursor-not-allowed data-[state="checked"]:disabled:tw-bg-box-disabled-strong data-[readonly="true"]:tw-pointer-events-none ${t}`,