@frontify/fondue-components 16.0.0 → 16.0.3

package/dist/fondue-components21.js

@@ -26,7 +26,7 @@ const S = ({
   viewportCollisionPadding: x = "compact",
   ...l
 }, F) => {
-  const { inputSlots: k, menuSlots: v, items: B, clearButton: u, getItemByValue: p } = _(h), M = p(I), P = p(b), i = L(!1), [G, f] = Q(!1), { getToggleButtonProps: O, getMenuProps: z, getItemProps: D, reset: V, selectedItem: r, isOpen: j, highlightedIndex: E } = J({
+  const { inputSlots: v, menuSlots: k, items: B, clearButton: u, getItemByValue: p } = _(h), M = p(I), P = p(b), i = L(!1), [G, f] = Q(!1), { getToggleButtonProps: O, getMenuProps: z, getItemProps: D, reset: V, selectedItem: r, isOpen: j, highlightedIndex: E } = J({
     items: B,
     defaultSelectedItem: M,
     selectedItem: P,
@@ -71,7 +71,7 @@ const S = ({
             }),
             children: [
               /* @__PURE__ */ a("span", { className: o.selectedValue, children: H }),
-              k,
+              v,
               u && /* @__PURE__ */ a(
                 q,
                 {
@@ -117,7 +117,7 @@ const S = ({
         selectedItem: r,
         hasInteractedSinceOpening: G,
         viewportCollisionPadding: x,
-        children: v
+        children: k
       }
     )
   ] });

package/dist/fondue-components24.js

@@ -1,51 +1,51 @@
 import { jsx as t, jsxs as p } from "react/jsx-runtime";
 import { IconArrowUp as A, IconArrowDown as K, IconArrowBidirectional as h } from "@frontify/fondue-icons";
-import { forwardRef as m, useRef as w, useMemo as j } from "react";
+import { forwardRef as b, useRef as w, useMemo as j } from "react";
 import { useSyncRefs as g } from "./fondue-components43.js";
 import { useTextTruncation as N } from "./fondue-components67.js";
 import { Box as L } from "./fondue-components4.js";
 import { LoadingCircle as S } from "./fondue-components17.js";
 import i from "./fondue-components68.js";
 import { handleKeyDown as $ } from "./fondue-components69.js";
-const R = m(
-  ({ layout: a = "auto", fontSize: e = "medium", sticky: n, children: r, ...d }, l) => /* @__PURE__ */ t("div", { onKeyDown: $, role: "grid", tabIndex: -1, children: /* @__PURE__ */ t(
+const R = b(
+  ({ layout: a = "auto", fontSize: e = "medium", sticky: d, children: r, ...o }, l) => /* @__PURE__ */ t("div", { onKeyDown: $, role: "grid", tabIndex: -1, children: /* @__PURE__ */ t(
     "table",
     {
       ref: l,
       className: i.table,
       "data-layout": a,
       "data-font-size": e,
-      "data-sticky": n,
-      ...d,
+      "data-sticky": d,
+      ...o,
       children: r
     }
   ) })
 );
 R.displayName = "Table.Root";
-const C = m(({ children: a }, e) => /* @__PURE__ */ t("caption", { ref: e, className: i.caption, children: a }));
+const C = b(({ children: a }, e) => /* @__PURE__ */ t("caption", { ref: e, className: i.caption, children: a }));
 C.displayName = "Table.Caption";
-const x = m(
-  ({ children: a, "aria-label": e, "aria-busy": n }, r) => /* @__PURE__ */ t("thead", { ref: r, className: i.header, "aria-label": e, "aria-busy": n, children: a })
+const x = b(
+  ({ children: a, "aria-label": e, "aria-busy": d }, r) => /* @__PURE__ */ t("thead", { ref: r, className: i.header, "aria-label": e, "aria-busy": d, children: a })
 );
 x.displayName = "Table.Header";
-const T = m(
+const v = b(
   ({
     noShrink: a = !1,
     truncate: e = !1,
-    align: n = "left",
+    align: d = "left",
     scope: r = "col",
-    sortTranslations: d,
+    sortTranslations: o,
     sortDirection: l,
     colSpan: c,
-    width: f,
-    state: b = "idle",
+    width: m,
+    state: f = "idle",
     loadingStateAriaLabel: u,
     onSortChange: s,
-    children: o
-  }, v) => {
+    children: n
+  }, k) => {
     const y = w(null);
-    g(y, v), N(y);
-    const z = j(() => typeof o == "string" ? l === "ascending" ? (d == null ? void 0 : d.sortDescending) ?? `Sort by ${o} descending` : (d == null ? void 0 : d.sortAscending) ?? `Sort by ${o} ascending` : l === "ascending" ? "Sort descending" : "Sort ascending", [o, l, d]), B = () => {
+    g(y, k), N(y);
+    const z = j(() => typeof n == "string" ? l === "ascending" ? (o == null ? void 0 : o.sortDescending) ?? `Sort by ${n} descending` : (o == null ? void 0 : o.sortAscending) ?? `Sort by ${n} ascending` : l === "ascending" ? "Sort descending" : "Sort ascending", [n, l, o]), B = () => {
       if (!s)
         return;
       s(l === void 0 || l === "descending" ? "ascending" : "descending");
@@ -54,17 +54,17 @@ const T = m(
       "th",
       {
         ref: y,
-        style: { width: f },
+        style: { width: m },
         className: i.headerCell,
         scope: r,
         colSpan: c,
-        "data-align": n,
+        "data-align": d,
         "data-truncate": e,
         "data-no-shrink": a,
         "data-sortable": !!s,
         "aria-sort": s ? l || "none" : void 0,
-        children: b === "loading" ? /* @__PURE__ */ p("div", { className: i.cellContent, "aria-live": "polite", "aria-label": u, children: [
-          typeof o == "string" && e ? /* @__PURE__ */ t("span", { className: i.buttonText, children: o }) : o,
+        children: f === "loading" ? /* @__PURE__ */ p("div", { className: i.cellContent, "aria-live": "polite", "aria-label": u, children: [
+          typeof n == "string" && e ? /* @__PURE__ */ t("span", { className: i.buttonText, children: n }) : n,
           /* @__PURE__ */ t(S, { "data-test-id": "fondue-loading-circle", size: "xx-small" })
         ] }) : s ? /* @__PURE__ */ p(
           "button",
@@ -74,26 +74,26 @@ const T = m(
             "data-active": !!l,
             onClick: B,
             children: [
-              typeof o == "string" && e ? /* @__PURE__ */ t("span", { className: i.buttonText, children: o }) : o,
+              typeof n == "string" && e ? /* @__PURE__ */ t("span", { className: i.buttonText, children: n }) : n,
               /* @__PURE__ */ t(L, { width: 3, children: l === "ascending" ? /* @__PURE__ */ t(A, { size: "12" }) : l === "descending" ? /* @__PURE__ */ t(K, { size: "12" }) : /* @__PURE__ */ t(h, { className: i.sortIndicator, size: "12" }) })
             ]
           }
-        ) : o
+        ) : n
       }
     );
   }
 );
-T.displayName = "Table.HeaderCell";
-const I = m(
-  ({ children: a, "aria-busy": e }, n) => /* @__PURE__ */ t("tbody", { ref: n, className: i.body, "aria-busy": e, children: a })
+v.displayName = "Table.HeaderCell";
+const T = b(
+  ({ children: a, "aria-busy": e }, d) => /* @__PURE__ */ t("tbody", { ref: d, className: i.body, "aria-busy": e, children: a })
 );
-I.displayName = "Table.Body";
-const H = m(
-  ({ disabled: a = !1, selected: e = !1, onClick: n, children: r, "aria-label": d, "data-test-id": l }, c) => {
-    const f = n !== void 0 && !a, b = () => {
-      a || n && n(e);
+T.displayName = "Table.Body";
+const I = b(
+  ({ disabled: a = !1, selected: e = !1, onClick: d, children: r, "aria-label": o, "data-test-id": l }, c) => {
+    const m = d !== void 0 && !a, f = () => {
+      a || d && d(e);
     }, u = (s) => {
-      f && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), b());
+      m && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), f());
     };
     return /* @__PURE__ */ t(
       "tr",
@@ -101,24 +101,24 @@ const H = m(
         ref: c,
         className: i.row,
         tabIndex: 0,
-        role: f ? "button" : "row",
+        role: m ? "button" : "row",
         "data-disabled": a,
-        "data-interactive": f,
+        "data-interactive": m,
         "data-selected": e,
         "aria-disabled": a,
-        "aria-label": d,
+        "aria-label": o,
         "aria-selected": e,
-        onClick: f ? b : void 0,
-        onKeyDown: f ? u : void 0,
+        onClick: m ? f : void 0,
+        onKeyDown: m ? u : void 0,
         "data-test-id": l,
         children: r
       }
     );
   }
 );
-H.displayName = "Table.Row";
-const k = m(
-  ({ colSpan: a, truncate: e, align: n = "left", children: r, "aria-label": d }, l) => {
+I.displayName = "Table.Row";
+const H = b(
+  ({ colSpan: a, truncate: e, align: d = "left", children: r, "aria-label": o }, l) => {
     const c = w(null);
     return g(c, l), N(c), /* @__PURE__ */ t(
       "td",
@@ -126,32 +126,32 @@ const k = m(
         ref: c,
         className: i.rowCell,
         colSpan: a,
-        "data-align": n,
+        "data-align": d,
         "data-truncate": e,
-        "aria-label": d,
+        "aria-label": o,
         children: r
       }
     );
   }
 );
-k.displayName = "Table.RowCell";
+H.displayName = "Table.RowCell";
 const Q = {
   Root: R,
   Caption: C,
   Header: x,
-  HeaderCell: T,
-  Body: I,
-  Row: H,
-  RowCell: k
+  HeaderCell: v,
+  Body: T,
+  Row: I,
+  RowCell: H
 };
 export {
   Q as Table,
-  I as TableBody,
+  T as TableBody,
   C as TableCaption,
   x as TableHeader,
-  T as TableHeaderCell,
+  v as TableHeaderCell,
   R as TableRoot,
-  H as TableRow,
-  k as TableRowCell
+  I as TableRow,
+  H as TableRowCell
 };
 //# sourceMappingURL=fondue-components24.js.map

package/dist/fondue-components25.js

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as u } from "react/jsx-runtime";
-import { createContext as x, forwardRef as i, useCallback as A, createElement as N, useContext as b, useRef as D, useEffect as E } from "react";
+import { createContext as x, forwardRef as i, useContext as b, useRef as A, useEffect as D, useCallback as E, createElement as N } from "react";
 import { IconDotsHorizontal as O } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-tabs";
 import { useControllableState as V } from "./fondue-components57.js";
@@ -27,7 +27,7 @@ const T = x({
     prop: o,
     defaultProp: s,
     onChange: c
-  }), g = A(
+  }), g = E(
     (e) => {
       v(e);
     },
@@ -89,8 +89,8 @@ y.displayName = "Tabs.Root";
 const z = ({ children: t, value: o, disabled: s }) => /* @__PURE__ */ a(T.Provider, { value: { value: o, disabled: s }, children: t });
 z.displayName = "Tabs.Tab";
 const I = ({ children: t, ...o }, s) => {
-  const { value: n, disabled: c } = b(T), { addTrigger: m } = b(w), p = D(null);
-  return E(() => {
+  const { value: n, disabled: c } = b(T), { addTrigger: m } = b(w), p = A(null);
+  return D(() => {
     m({
       ref: p || s,
       value: n ?? "",

package/dist/fondue-components25.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components25.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    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\nconst TabConfigContext = createContext<{\n    value: string;\n    disabled?: boolean;\n}>({\n    value: '',\n    disabled: false,\n});\n\nconst TabTriggerContext = createContext<{\n    addTrigger: (trigger: TabTrigger) => void;\n}>({\n    addTrigger: () => {},\n});\n\nexport const TabsRoot = (\n    {\n        padding = 'compact',\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        size = 'medium',\n        onActiveTabChange,\n        children,\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    return (\n        <TabTriggerContext.Provider value={{ addTrigger }}>\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                {...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    <TabConfigContext.Provider value={{ value, disabled }}>{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\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n        });\n    }, []);\n\n    return null;\n};\nTabsTrigger.displayName = 'Tabs.Trigger';\n\ntype TabsContentProps = {\n    children: ReactNode;\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","props","ref","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","jsxs","RadixTabs","styles","_a","jsx","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components25.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    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\nconst TabConfigContext = createContext<{\n    value: string;\n    disabled?: boolean;\n}>({\n    value: '',\n    disabled: false,\n});\n\nconst TabTriggerContext = createContext<{\n    addTrigger: (trigger: TabTrigger) => void;\n}>({\n    addTrigger: () => {},\n});\n\nexport const TabsRoot = (\n    {\n        padding = 'compact',\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        size = 'medium',\n        onActiveTabChange,\n        children,\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    return (\n        <TabTriggerContext.Provider value={{ addTrigger }}>\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                {...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    <TabConfigContext.Provider value={{ value, disabled }}>{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\n    useEffect(() => {\n        addTrigger({\n            ref: localRef || ref,\n            value: value ?? '',\n            disabled,\n            props,\n            element: children,\n        });\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    return null;\n};\nTabsTrigger.displayName = 'Tabs.Trigger';\n\ntype TabsContentProps = {\n    children: ReactNode;\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","props","ref","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","jsxs","RadixTabs","styles","_a","jsx","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":"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"}

package/dist/fondue-components29.js

@@ -1,18 +1,18 @@
 import { jsx as t, jsxs as g } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-tooltip";
-import { forwardRef as d } from "react";
+import { forwardRef as s } from "react";
 import { cn as u } from "./fondue-components33.js";
 import { useFondueTheme as h, ThemeProvider as y } from "./fondue-components28.js";
-import s from "./fondue-components75.js";
-const l = ({ children: o, enterDelay: r = 700, open: i, onOpenChange: n, ...a }) => /* @__PURE__ */ t(e.Provider, { children: /* @__PURE__ */ t(e.Root, { delayDuration: r, open: i, onOpenChange: n, ...a, children: o }) });
+import d from "./fondue-components75.js";
+const l = ({ children: o, enterDelay: r = 700, open: i, onOpenChange: a, ...n }) => /* @__PURE__ */ t(e.Provider, { children: /* @__PURE__ */ t(e.Root, { delayDuration: r, open: i, onOpenChange: a, ...n, children: o }) });
 l.displayName = "Tooltip.Root";
-const p = ({ asChild: o = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, n) => /* @__PURE__ */ t(
+const p = ({ asChild: o = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, a) => /* @__PURE__ */ t(
   e.Trigger,
   {
     "data-test-id": i,
     type: o ? void 0 : "button",
     asChild: o,
-    ref: n,
+    ref: a,
     children: r
   }
 );
@@ -21,37 +21,37 @@ const m = ({
   children: o,
   className: r,
   maxWidth: i,
-  "data-test-id": n = "fondue-tooltip-content",
-  padding: a = "spacious",
+  "data-test-id": a = "fondue-tooltip-content",
+  padding: n = "spacious",
   ...c
-}, f) => {
-  const T = h();
-  return /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ t(y, { theme: T, children: /* @__PURE__ */ g(
+}, T) => {
+  const f = h();
+  return /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ t(y, { theme: f, children: /* @__PURE__ */ g(
     e.Content,
     {
-      "data-test-id": n,
-      "data-tooltip-spacing": a,
-      className: u(s.root, r),
+      "data-test-id": a,
+      "data-tooltip-spacing": n,
+      className: u(d.root, r),
       style: { maxWidth: i },
       collisionPadding: 16,
       sideOffset: 8,
-      ref: f,
+      ref: T,
       ...c,
       children: [
         o,
-        /* @__PURE__ */ t(e.Arrow, { "aria-hidden": "true", className: s.arrow })
+        /* @__PURE__ */ t(e.Arrow, { "aria-hidden": "true", className: d.arrow })
       ]
     }
   ) }) });
 };
 m.displayName = "Tooltip.Content";
-const C = {
+const w = {
   Root: l,
-  Trigger: d(p),
-  Content: d(m)
+  Trigger: s(p),
+  Content: s(m)
 };
 export {
-  C as Tooltip,
+  w as Tooltip,
   m as TooltipContent,
   l as TooltipRoot,
   p as TooltipTrigger

package/dist/fondue-components3.js

@@ -1,94 +1,92 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
 import { IconCaretDown as A } from "@frontify/fondue-icons";
-import * as c from "@radix-ui/react-accordion";
-import a from "./fondue-components30.js";
-const s = ({
+import * as n from "@radix-ui/react-accordion";
+import d from "./fondue-components30.js";
+const c = ({
   "data-test-id": t = "fondue-accordion",
   border: o = !0,
   children: e,
-  defaultValue: d,
-  disabled: i,
-  value: n
-}) => /* @__PURE__ */ r(
-  c.Root,
+  defaultValue: i,
+  disabled: r,
+  value: u
+}) => /* @__PURE__ */ a(
+  n.Root,
   {
-    className: a.root,
+    className: d.root,
     "data-test-id": t,
-    defaultValue: d,
-    disabled: i,
+    defaultValue: i,
+    disabled: r,
     type: "multiple",
-    value: n,
+    value: u,
     "data-border": o,
     children: e
   }
 );
-s.displayName = "Accordion.Root";
-const m = ({
+c.displayName = "Accordion.Root";
+const s = ({
   "data-test-id": t = "fondue-accordion-item",
   children: o,
   disabled: e,
-  onClick: d,
   value: i
-}) => /* @__PURE__ */ r(
-  c.Item,
+}) => /* @__PURE__ */ a(
+  n.Item,
   {
-    className: a.accordionItem,
+    className: d.accordionItem,
     value: i,
-    onPointerDown: (n) => {
-      n.currentTarget.dataset.showFocusRing = "false";
+    onPointerDown: (r) => {
+      r.currentTarget.dataset.showFocusRing = "false";
     },
-    onBlur: (n) => {
-      n.currentTarget.dataset.showFocusRing = "true";
+    onBlur: (r) => {
+      r.currentTarget.dataset.showFocusRing = "true";
     },
-    onClick: d,
     disabled: e,
     "data-test-id": t,
     children: o
   }
 );
-m.displayName = "Accordion.Item";
-const l = ({ children: t }) => /* @__PURE__ */ r(c.Header, { children: t });
-l.displayName = "Accordion.Header";
-const g = ({
+s.displayName = "Accordion.Item";
+const m = ({ onClick: t, children: o }) => /* @__PURE__ */ a(n.Header, { onClick: t, children: o });
+m.displayName = "Accordion.Header";
+const l = ({
   "data-test-id": t = "fondue-accordion-trigger",
   asChild: o,
   children: e
-}) => /* @__PURE__ */ p(c.Trigger, { asChild: o, className: a.accordionTrigger, "data-test-id": t, children: [
+}) => /* @__PURE__ */ p(n.Trigger, { asChild: o, className: d.accordionTrigger, "data-test-id": t, children: [
   e,
-  /* @__PURE__ */ r(A, { className: a.accordionCaret, size: "16" })
+  /* @__PURE__ */ a(A, { className: d.accordionCaret, size: "16" })
 ] });
-g.displayName = "Accordion.Trigger";
-const u = ({
+l.displayName = "Accordion.Trigger";
+const g = ({
   "data-test-id": t = "collapsible-wrap",
   children: o,
   divider: e = !1,
-  onClick: d,
-  padding: i = "large"
-}) => /* @__PURE__ */ r(
-  c.Content,
+  onClick: i,
+  padding: r = "large"
+}) => /* @__PURE__ */ a(
+  n.Content,
   {
-    className: a.accordionContent,
-    onClick: d,
+    className: d.accordionContent,
+    onClick: i,
     "data-test-id": t,
-    "data-item-padding": i,
+    "data-item-padding": r,
     "data-item-divider": e,
-    children: /* @__PURE__ */ r("div", { className: a.accordionContentText, "data-test-id": `inner-${t}`, children: o })
+    children: /* @__PURE__ */ a("div", { className: d.accordionContentText, "data-test-id": `inner-${t}`, children: o })
   }
 );
-u.displayName = "Accordion.Content";
+g.displayName = "Accordion.Content";
 const y = {
-  Root: s,
-  Item: m,
-  Header: l,
-  Trigger: g,
-  Content: u
+  Root: c,
+  Item: s,
+  Header: m,
+  Trigger: l,
+  Content: g
 };
 export {
   y as Accordion,
-  u as AccordionContent,
-  l as AccordionHeader,
-  m as AccordionItem,
-  s as AccordionRoot,
-  g as AccordionTrigger
+  g as AccordionContent,
+  m as AccordionHeader,
+  s as AccordionItem,
+  c as AccordionRoot,
+  l as AccordionTrigger
 };
 //# sourceMappingURL=fondue-components3.js.map

package/dist/fondue-components3.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components3.js","sources":["../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixAccordion from '@radix-ui/react-accordion';\nimport { type MouseEventHandler, type ReactNode } from 'react';\n\nimport styles from './styles/accordion.module.scss';\n\ntype AccordionPadding = 'none' | 'small' | 'medium' | 'large';\n\nexport type AccordionRootProps = {\n    'data-test-id'?: string;\n    /**\n     * Show or hide the top and bottom border\n     * @default true\n     */\n    border?: boolean;\n    /**\n     * Children of the Accordion component. This should contain the `Accordion.Item` components\n     */\n    children?: ReactNode;\n    /**\n     * The value of the items whose contents are expanded when the accordion is initially rendered.\n     * Use `defaultValue` if you do not need to control the state of an accordion.\n     */\n    defaultValue?: string[];\n    /**\n     * Whether or not an accordion is disabled from user interaction.\n     */\n    disabled?: boolean;\n    /**\n     * The controlled stateful value of the accordion items whose contents are expanded.\n     */\n    value?: string[];\n};\n\nexport const AccordionRoot = ({\n    'data-test-id': dataTestId = 'fondue-accordion',\n    border = true,\n    children,\n    defaultValue,\n    disabled,\n    value,\n}: AccordionRootProps) => {\n    return (\n        <RadixAccordion.Root\n            className={styles.root}\n            data-test-id={dataTestId}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            type=\"multiple\"\n            value={value}\n            data-border={border}\n        >\n            {children}\n        </RadixAccordion.Root>\n    );\n};\nAccordionRoot.displayName = 'Accordion.Root';\n\nexport type AccordionItemProps = {\n    'data-test-id'?: string;\n    /**\n     * Children of the Accordion item. This should contain the `Accordion.Header` and `Accordion.Content` components\n     */\n    children?: ReactNode;\n    /**\n     * Whether or not an accordion item is disabled from user interaction.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click callback for this item.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * A string value for the accordion item. All items within an accordion should use a unique value.\n     */\n    value: string;\n};\n\nexport const AccordionItem = ({\n    'data-test-id': dataTestId = 'fondue-accordion-item',\n    children,\n    disabled,\n    onClick,\n    value,\n}: AccordionItemProps) => {\n    return (\n        <RadixAccordion.Item\n            className={styles.accordionItem}\n            value={value}\n            onPointerDown={(event) => {\n                event.currentTarget.dataset.showFocusRing = 'false';\n            }}\n            onBlur={(event) => {\n                event.currentTarget.dataset.showFocusRing = 'true';\n            }}\n            onClick={onClick}\n            disabled={disabled}\n            data-test-id={dataTestId}\n        >\n            {children}\n        </RadixAccordion.Item>\n    );\n};\nAccordionItem.displayName = 'Accordion.Item';\n\nexport type AccordionHeaderProps = {\n    /**\n     * Children of the Accordion header. This should contain `Accordion.Trigger`\n     */\n    children?: ReactNode;\n};\n\nexport const AccordionHeader = ({ children }: AccordionHeaderProps) => {\n    return <RadixAccordion.Header>{children}</RadixAccordion.Header>;\n};\nAccordionHeader.displayName = 'Accordion.Header';\n\nexport type AccordionTriggerProps = {\n    'data-test-id'?: string;\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     * Children of the Accordion trigger. This contains the actually clickable and visible header content\n     */\n    children?: ReactNode;\n};\n\nexport const AccordionTrigger = ({\n    'data-test-id': dataTestId = 'fondue-accordion-trigger',\n    asChild,\n    children,\n}: AccordionTriggerProps) => {\n    return (\n        <RadixAccordion.Trigger asChild={asChild} className={styles.accordionTrigger} data-test-id={dataTestId}>\n            {children}\n            <IconCaretDown className={styles.accordionCaret} size=\"16\" />\n        </RadixAccordion.Trigger>\n    );\n};\nAccordionTrigger.displayName = 'Accordion.Trigger';\n\ntype AccordionContentProps = {\n    'data-test-id'?: string;\n    /**\n     * Children of the Accordion content. This contains the main content.\n     */\n    children?: ReactNode;\n    /**\n     * Adds a divider line between the header and the content.\n     */\n    divider?: boolean;\n    /**\n     * Click callback for the content.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Controls if we show paddings around the content.\n     * @default 'large'\n     */\n    padding?: AccordionPadding;\n};\n\nexport const AccordionContent = ({\n    'data-test-id': dataTestId = 'collapsible-wrap',\n    children,\n    divider = false,\n    onClick,\n    padding = 'large',\n}: AccordionContentProps) => {\n    return (\n        <RadixAccordion.Content\n            className={styles.accordionContent}\n            onClick={onClick}\n            data-test-id={dataTestId}\n            data-item-padding={padding}\n            data-item-divider={divider}\n        >\n            <div className={styles.accordionContentText} data-test-id={`inner-${dataTestId}`}>\n                {children}\n            </div>\n        </RadixAccordion.Content>\n    );\n};\nAccordionContent.displayName = 'Accordion.Content';\n\nexport const Accordion = {\n    Root: AccordionRoot,\n    Item: AccordionItem,\n    Header: AccordionHeader,\n    Trigger: AccordionTrigger,\n    Content: AccordionContent,\n};\n"],"names":["AccordionRoot","dataTestId","border","children","defaultValue","disabled","value","jsx","RadixAccordion","styles","AccordionItem","onClick","event","AccordionHeader","AccordionTrigger","asChild","jsxs","IconCaretDown","AccordionContent","divider","padding","Accordion"],"mappings":";;;;AAoCO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,gBAAgBC,IAAa;AAAA,EAC7B,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACJ,MAEQ,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,gBAAcR;AAAA,IACd,cAAAG;AAAA,IACA,UAAAC;AAAA,IACA,MAAK;AAAA,IACL,OAAAC;AAAA,IACA,eAAaJ;AAAA,IAEZ,UAAAC;AAAA,EAAA;AACL;AAGRH,EAAc,cAAc;AAwBrB,MAAMU,IAAgB,CAAC;AAAA,EAC1B,gBAAgBT,IAAa;AAAA,EAC7B,UAAAE;AAAA,EACA,UAAAE;AAAA,EACA,SAAAM;AAAA,EACA,OAAAL;AACJ,MAEQ,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,OAAAH;AAAA,IACA,eAAe,CAACM,MAAU;AAChB,MAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,IAChD;AAAA,IACA,QAAQ,CAACA,MAAU;AACT,MAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,IAChD;AAAA,IACA,SAAAD;AAAA,IACA,UAAAN;AAAA,IACA,gBAAcJ;AAAA,IAEb,UAAAE;AAAA,EAAA;AACL;AAGRO,EAAc,cAAc;AASrB,MAAMG,IAAkB,CAAC,EAAE,UAAAV,QACtB,gBAAAI,EAAAC,EAAe,QAAf,EAAuB,UAAAL,EAAS,CAAA;AAE5CU,EAAgB,cAAc;AAevB,MAAMC,IAAmB,CAAC;AAAA,EAC7B,gBAAgBb,IAAa;AAAA,EAC7B,SAAAc;AAAA,EACA,UAAAZ;AACJ,MAEQ,gBAAAa,EAACR,EAAe,SAAf,EAAuB,SAAAO,GAAkB,WAAWN,EAAO,kBAAkB,gBAAcR,GACvF,UAAA;AAAA,EAAAE;AAAA,oBACAc,GAAc,EAAA,WAAWR,EAAO,gBAAgB,MAAK,KAAK,CAAA;AAAA,GAC/D;AAGRK,EAAiB,cAAc;AAuBxB,MAAMI,IAAmB,CAAC;AAAA,EAC7B,gBAAgBjB,IAAa;AAAA,EAC7B,UAAAE;AAAA,EACA,SAAAgB,IAAU;AAAA,EACV,SAAAR;AAAA,EACA,SAAAS,IAAU;AACd,MAEQ,gBAAAb;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,SAAAE;AAAA,IACA,gBAAcV;AAAA,IACd,qBAAmBmB;AAAA,IACnB,qBAAmBD;AAAA,IAEnB,UAAA,gBAAAZ,EAAC,SAAI,WAAWE,EAAO,sBAAsB,gBAAc,SAASR,CAAU,IACzE,UAAAE,EACL,CAAA;AAAA,EAAA;AACJ;AAGRe,EAAiB,cAAc;AAExB,MAAMG,IAAY;AAAA,EACrB,MAAMrB;AAAA,EACN,MAAMU;AAAA,EACN,QAAQG;AAAA,EACR,SAASC;AAAA,EACT,SAASI;AACb;"}
+{"version":3,"file":"fondue-components3.js","sources":["../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown } from '@frontify/fondue-icons';\nimport * as RadixAccordion from '@radix-ui/react-accordion';\nimport { type MouseEventHandler, type ReactNode } from 'react';\n\nimport styles from './styles/accordion.module.scss';\n\ntype AccordionPadding = 'none' | 'small' | 'medium' | 'large';\n\nexport type AccordionRootProps = {\n    'data-test-id'?: string;\n    /**\n     * Show or hide the top and bottom border\n     * @default true\n     */\n    border?: boolean;\n    /**\n     * Children of the Accordion component. This should contain the `Accordion.Item` components\n     */\n    children?: ReactNode;\n    /**\n     * The value of the items whose contents are expanded when the accordion is initially rendered.\n     * Use `defaultValue` if you do not need to control the state of an accordion.\n     */\n    defaultValue?: string[];\n    /**\n     * Whether or not an accordion is disabled from user interaction.\n     */\n    disabled?: boolean;\n    /**\n     * The controlled stateful value of the accordion items whose contents are expanded.\n     */\n    value?: string[];\n};\n\nexport const AccordionRoot = ({\n    'data-test-id': dataTestId = 'fondue-accordion',\n    border = true,\n    children,\n    defaultValue,\n    disabled,\n    value,\n}: AccordionRootProps) => {\n    return (\n        <RadixAccordion.Root\n            className={styles.root}\n            data-test-id={dataTestId}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            type=\"multiple\"\n            value={value}\n            data-border={border}\n        >\n            {children}\n        </RadixAccordion.Root>\n    );\n};\nAccordionRoot.displayName = 'Accordion.Root';\n\nexport type AccordionItemProps = {\n    'data-test-id'?: string;\n    /**\n     * Children of the Accordion item. This should contain the `Accordion.Header` and `Accordion.Content` components\n     */\n    children?: ReactNode;\n    /**\n     * Whether or not an accordion item is disabled from user interaction.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * A string value for the accordion item. All items within an accordion should use a unique value.\n     */\n    value: string;\n};\n\nexport const AccordionItem = ({\n    'data-test-id': dataTestId = 'fondue-accordion-item',\n    children,\n    disabled,\n    value,\n}: AccordionItemProps) => {\n    return (\n        <RadixAccordion.Item\n            className={styles.accordionItem}\n            value={value}\n            onPointerDown={(event) => {\n                event.currentTarget.dataset.showFocusRing = 'false';\n            }}\n            onBlur={(event) => {\n                event.currentTarget.dataset.showFocusRing = 'true';\n            }}\n            disabled={disabled}\n            data-test-id={dataTestId}\n        >\n            {children}\n        </RadixAccordion.Item>\n    );\n};\nAccordionItem.displayName = 'Accordion.Item';\n\nexport type AccordionHeaderProps = {\n    /**\n     * Click callback for this item.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Children of the Accordion header. This should contain `Accordion.Trigger`\n     */\n    children?: ReactNode;\n};\n\nexport const AccordionHeader = ({ onClick, children }: AccordionHeaderProps) => {\n    return <RadixAccordion.Header onClick={onClick}>{children}</RadixAccordion.Header>;\n};\nAccordionHeader.displayName = 'Accordion.Header';\n\nexport type AccordionTriggerProps = {\n    'data-test-id'?: string;\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     * Children of the Accordion trigger. This contains the actually clickable and visible header content\n     */\n    children?: ReactNode;\n};\n\nexport const AccordionTrigger = ({\n    'data-test-id': dataTestId = 'fondue-accordion-trigger',\n    asChild,\n    children,\n}: AccordionTriggerProps) => {\n    return (\n        <RadixAccordion.Trigger asChild={asChild} className={styles.accordionTrigger} data-test-id={dataTestId}>\n            {children}\n            <IconCaretDown className={styles.accordionCaret} size=\"16\" />\n        </RadixAccordion.Trigger>\n    );\n};\nAccordionTrigger.displayName = 'Accordion.Trigger';\n\ntype AccordionContentProps = {\n    'data-test-id'?: string;\n    /**\n     * Children of the Accordion content. This contains the main content.\n     */\n    children?: ReactNode;\n    /**\n     * Adds a divider line between the header and the content.\n     */\n    divider?: boolean;\n    /**\n     * Click callback for the content.\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Controls if we show paddings around the content.\n     * @default 'large'\n     */\n    padding?: AccordionPadding;\n};\n\nexport const AccordionContent = ({\n    'data-test-id': dataTestId = 'collapsible-wrap',\n    children,\n    divider = false,\n    onClick,\n    padding = 'large',\n}: AccordionContentProps) => {\n    return (\n        <RadixAccordion.Content\n            className={styles.accordionContent}\n            onClick={onClick}\n            data-test-id={dataTestId}\n            data-item-padding={padding}\n            data-item-divider={divider}\n        >\n            <div className={styles.accordionContentText} data-test-id={`inner-${dataTestId}`}>\n                {children}\n            </div>\n        </RadixAccordion.Content>\n    );\n};\nAccordionContent.displayName = 'Accordion.Content';\n\nexport const Accordion = {\n    Root: AccordionRoot,\n    Item: AccordionItem,\n    Header: AccordionHeader,\n    Trigger: AccordionTrigger,\n    Content: AccordionContent,\n};\n"],"names":["AccordionRoot","dataTestId","border","children","defaultValue","disabled","value","jsx","RadixAccordion","styles","AccordionItem","event","AccordionHeader","onClick","AccordionTrigger","asChild","jsxs","IconCaretDown","AccordionContent","divider","padding","Accordion"],"mappings":";;;;AAoCO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,gBAAgBC,IAAa;AAAA,EAC7B,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACJ,MAEQ,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,gBAAcR;AAAA,IACd,cAAAG;AAAA,IACA,UAAAC;AAAA,IACA,MAAK;AAAA,IACL,OAAAC;AAAA,IACA,eAAaJ;AAAA,IAEZ,UAAAC;AAAA,EAAA;AACL;AAGRH,EAAc,cAAc;AAoBrB,MAAMU,IAAgB,CAAC;AAAA,EAC1B,gBAAgBT,IAAa;AAAA,EAC7B,UAAAE;AAAA,EACA,UAAAE;AAAA,EACA,OAAAC;AACJ,MAEQ,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,OAAAH;AAAA,IACA,eAAe,CAACK,MAAU;AAChB,MAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,IAChD;AAAA,IACA,QAAQ,CAACA,MAAU;AACT,MAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,IAChD;AAAA,IACA,UAAAN;AAAA,IACA,gBAAcJ;AAAA,IAEb,UAAAE;AAAA,EAAA;AACL;AAGRO,EAAc,cAAc;AAarB,MAAME,IAAkB,CAAC,EAAE,SAAAC,GAAS,UAAAV,QAC/B,gBAAAI,EAAAC,EAAe,QAAf,EAAsB,SAAAK,GAAmB,UAAAV,EAAS,CAAA;AAE9DS,EAAgB,cAAc;AAevB,MAAME,IAAmB,CAAC;AAAA,EAC7B,gBAAgBb,IAAa;AAAA,EAC7B,SAAAc;AAAA,EACA,UAAAZ;AACJ,MAEQ,gBAAAa,EAACR,EAAe,SAAf,EAAuB,SAAAO,GAAkB,WAAWN,EAAO,kBAAkB,gBAAcR,GACvF,UAAA;AAAA,EAAAE;AAAA,oBACAc,GAAc,EAAA,WAAWR,EAAO,gBAAgB,MAAK,KAAK,CAAA;AAAA,GAC/D;AAGRK,EAAiB,cAAc;AAuBxB,MAAMI,IAAmB,CAAC;AAAA,EAC7B,gBAAgBjB,IAAa;AAAA,EAC7B,UAAAE;AAAA,EACA,SAAAgB,IAAU;AAAA,EACV,SAAAN;AAAA,EACA,SAAAO,IAAU;AACd,MAEQ,gBAAAb;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,SAAAI;AAAA,IACA,gBAAcZ;AAAA,IACd,qBAAmBmB;AAAA,IACnB,qBAAmBD;AAAA,IAEnB,UAAA,gBAAAZ,EAAC,SAAI,WAAWE,EAAO,sBAAsB,gBAAc,SAASR,CAAU,IACzE,UAAAE,EACL,CAAA;AAAA,EAAA;AACJ;AAGRe,EAAiB,cAAc;AAExB,MAAMG,IAAY;AAAA,EACrB,MAAMrB;AAAA,EACN,MAAMU;AAAA,EACN,QAAQE;AAAA,EACR,SAASE;AAAA,EACT,SAASI;AACb;"}

package/dist/fondue-components30.js

@@ -1,12 +1,10 @@
-const o = "_root_1f8r4_2", c = "_accordionItem_1f8r4_7", n = "_accordionTrigger_1f8r4_13", r = "_accordionCaret_1f8r4_31", t = "_accordionContent_1f8r4_35", e = "_accordionContentText_1f8r4_62", i = "_slideDown_1f8r4_1", _ = "_slideUp_1f8r4_1", d = {
+const o = "_root_1f8r4_2", c = "_accordionItem_1f8r4_7", n = "_accordionTrigger_1f8r4_13", r = "_accordionCaret_1f8r4_31", t = "_accordionContent_1f8r4_35", e = "_accordionContentText_1f8r4_62", a = {
   root: o,
   accordionItem: c,
   accordionTrigger: n,
   accordionCaret: r,
   accordionContent: t,
-  accordionContentText: e,
-  slideDown: i,
-  slideUp: _
+  accordionContentText: e
 };
 export {
   r as accordionCaret,
@@ -14,9 +12,7 @@ export {
   e as accordionContentText,
   c as accordionItem,
   n as accordionTrigger,
-  d as default,
-  o as root,
-  i as slideDown,
-  _ as slideUp
+  a as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components30.js.map

package/dist/fondue-components30.js.map

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

package/dist/fondue-components31.js

@@ -18,15 +18,15 @@ const g = (n) => n.startsWith("aria-") || n === "role", s = {
   wrap: "flex-wrap",
   columns: "grid-template-columns",
   rows: "grid-template-rows"
-}, m = (n, r) => n === "columns" || n === "rows" ? typeof r == "number" ? `repeat(${r}, 1fr)` : r : typeof r == "number" ? `${r * 0.25}rem` : r, f = (n, r = {}) => Object.entries(n).reduce((i, [t, e]) => {
+}, m = (n, r) => n === "columns" || n === "rows" ? typeof r == "number" ? `repeat(${r}, 1fr)` : r : typeof r == "number" ? `${r * 0.25}rem` : r, f = (n, r = {}) => Object.entries(n).reduce((i, [t, o]) => {
   if (g(t))
     return i;
-  const o = t in r ? r[t] : t in s ? s[t] : t, p = o == null ? void 0 : o.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-  if (typeof e == "object")
-    for (const [d, a] of Object.entries(e))
+  const e = t in r ? r[t] : t in s ? s[t] : t, p = e == null ? void 0 : e.replaceAll(/([\da-z]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+  if (typeof o == "object")
+    for (const [d, a] of Object.entries(o))
       a !== void 0 && (i[`--${d}-${p}`] = m(t, a));
   else
-    i[`--${p}`] = m(t, e);
+    i[`--${p}`] = m(t, o);
   return i;
 }, {});
 export {