@frontify/fondue-components 26.0.2 → 27.0.0

package/dist/fondue-components32.js

@@ -1,18 +1,18 @@
 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 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-components69.js";
-import { Button as M } from "./fondue-components6.js";
-import { Dropdown as d } from "./fondue-components11.js";
-import { useFondueTheme as W } from "./fondue-components36.js";
-import { useTabTriggers as G } from "./fondue-components84.js";
+import { createContext as E, forwardRef as d, useContext as f, useRef as y, useEffect as F, useMemo as I, useCallback as H, createElement as z } from "react";
+import { IconDotsHorizontal as M } from "@frontify/fondue-icons";
+import * as m from "@radix-ui/react-tabs";
+import { useControllableState as W } from "./fondue-components69.js";
+import { Button as G } from "./fondue-components6.js";
+import { Dropdown as c } from "./fondue-components11.js";
+import { useFondueTheme as J } from "./fondue-components36.js";
+import { useTabTriggers as K } from "./fondue-components84.js";
 import n from "./fondue-components85.js";
-const m = E({
+const u = E({
   value: "",
   disabled: !1
 });
-m.displayName = "TabConfigContext";
+u.displayName = "TabConfigContext";
 const v = E({
   addTrigger: () => {
   }
@@ -23,39 +23,41 @@ const L = ({
   activeTab: o,
   defaultActiveTab: s,
   size: r = "medium",
-  onActiveTabChange: u,
-  children: p,
-  variant: T = "default",
-  ...i
-}, S) => {
-  var y;
-  const { dir: j } = W(), [g, C] = H({
+  onActiveTabChange: p,
+  children: T,
+  variant: i = "default",
+  withDivider: l = !1,
+  ...D
+}, P) => {
+  var w;
+  const { dir: j } = J(), [g, C] = W({
     prop: o,
     defaultProp: s,
-    onChange: u
-  }), h = B(
+    onChange: p
+  }), h = H(
     (e) => {
       C(e);
     },
     [C]
-  ), { triggerListRef: A, activeIndicatorRef: D, triggers: x, triggersOutOfView: N, addTrigger: R } = G({
+  ), { triggerListRef: A, activeIndicatorRef: O, triggers: x, triggersOutOfView: N, addTrigger: R } = K({
     activeTab: g
-  }), O = I(() => ({ addTrigger: R }), [R]);
-  return /* @__PURE__ */ a(v.Provider, { value: O, children: /* @__PURE__ */ b(
-    c.Root,
+  }), q = I(() => ({ addTrigger: R }), [R]), B = i === "pill" && l;
+  return /* @__PURE__ */ a(v.Provider, { value: q, children: /* @__PURE__ */ b(
+    m.Root,
     {
-      ref: S,
+      ref: P,
       dir: j,
       className: n.root,
       onValueChange: h,
-      value: g ?? ((y = x[0]) == null ? void 0 : y.value),
+      value: g ?? ((w = x[0]) == null ? void 0 : w.value),
       "data-tabs-content-padding": t,
-      "data-tabs-variant": T,
-      ...i,
+      "data-tabs-variant": i,
+      "data-tabs-with-divider": B,
+      ...D,
       children: [
         /* @__PURE__ */ b("div", { className: n.triggerListWrapper, children: [
-          /* @__PURE__ */ a(c.List, { ref: A, "data-size": r, className: n.triggerList, children: x.map((e) => /* @__PURE__ */ z(
-            c.Trigger,
+          /* @__PURE__ */ a(m.List, { ref: A, "data-size": r, className: n.triggerList, children: x.map((e) => /* @__PURE__ */ z(
+            m.Trigger,
             {
               ...e.props,
               key: e.value,
@@ -66,10 +68,10 @@ const L = ({
             },
             e.element
           )) }),
-          /* @__PURE__ */ b(d.Root, { children: [
-            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,
+          /* @__PURE__ */ b(c.Root, { children: [
+            N.length > 0 && /* @__PURE__ */ a(c.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ a(G, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ a(M, { size: 16 }) }) }),
+            /* @__PURE__ */ a(c.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: N.map((e) => /* @__PURE__ */ z(
+              c.Item,
               {
                 ...e.props,
                 disabled: e.disabled,
@@ -83,52 +85,52 @@ const L = ({
             "span",
             {
               "data-test-id": "active-tab-indicator",
-              ref: D,
+              ref: O,
               className: n.activeIndicator
             }
           )
         ] }),
-        p
+        T
       ]
     }
   ) });
 };
 L.displayName = "Tabs.Root";
-const V = ({ children: t, value: o, disabled: s }) => {
+const S = ({ children: t, value: o, disabled: s }) => {
   const r = I(() => ({ value: o, disabled: s }), [o, s]);
-  return /* @__PURE__ */ a(m.Provider, { value: r, children: t });
+  return /* @__PURE__ */ a(u.Provider, { value: r, children: t });
 };
-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 q(() => {
-    p({
-      ref: T || s,
+S.displayName = "Tabs.Tab";
+const V = ({ children: t, ...o }, s) => {
+  const { value: r, disabled: p } = f(u), { addTrigger: T } = f(v), i = y(null), l = y();
+  return F(() => {
+    T({
+      ref: i || s,
       value: r ?? "",
-      disabled: u,
+      disabled: p,
       props: o,
       element: t,
-      previousElement: i.current
-    }), i.current = t;
+      previousElement: l.current
+    }), l.current = t;
   }, [t]), null;
 };
-k.displayName = "Tabs.Trigger";
-const P = ({ children: t, ...o }, s) => {
-  const { value: r } = f(m);
-  return /* @__PURE__ */ a(c.Content, { ref: s, ...o, className: n.content, value: r ?? "", children: t });
+V.displayName = "Tabs.Trigger";
+const k = ({ children: t, ...o }, s) => {
+  const { value: r } = f(u);
+  return /* @__PURE__ */ a(m.Content, { ref: s, ...o, className: n.content, value: r ?? "", children: t });
 };
-P.displayName = "Tabs.Content";
-const ee = {
-  Root: l(L),
-  Tab: l(V),
-  Trigger: l(k),
-  Content: l(P)
+k.displayName = "Tabs.Content";
+const ae = {
+  Root: d(L),
+  Tab: d(S),
+  Trigger: d(V),
+  Content: d(k)
 };
 export {
-  ee as Tabs,
-  P as TabsContent,
+  ae as Tabs,
+  k as TabsContent,
   L as TabsRoot,
-  V as TabsTab,
-  k as TabsTrigger
+  S as TabsTab,
+  V as TabsTrigger
 };
 //# sourceMappingURL=fondue-components32.js.map

package/dist/fondue-components32.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components32.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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"}
+{"version":3,"file":"fondue-components32.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     * Add a divider line below the tabs\n     * Only available when variant is 'pill'\n     * Useful for tabs placed inside Dialog content\n     * @default false\n     */\n    withDivider?: boolean;\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        withDivider = false,\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    // Only apply withDivider when variant is 'pill'\n    const shouldShowDivider = variant === 'pill' && withDivider;\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                data-tabs-with-divider={shouldShowDivider}\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","withDivider","props","ref","dir","useFondueTheme","activeTab","setActiveTab","useControllableState","handleSetActiveTab","useCallback","value","triggerListRef","activeIndicatorRef","triggers","triggersOutOfView","addTrigger","useTabTriggers","contextValue","useMemo","shouldShowDivider","jsx","jsxs","RadixTabs","styles","_a","trigger","createElement","Dropdown","Button","IconDotsHorizontal","TabsTab","disabled","TabsTrigger","useContext","localRef","useRef","previousElement","useEffect","TabsContent","itemProps","Tabs","forwardRef"],"mappings":";;;;;;;;;;AAkEA,MAAMA,IAAmBC,EAGtB;AAAA,EACC,OAAO;AAAA,EACP,UAAU;AACd,CAAC;AACDD,EAAiB,cAAc;AAE/B,MAAME,IAAoBD,EAEvB;AAAA,EACC,YAAY,MAAM;AAAA,EAAC;AACvB,CAAC;AACDC,EAAkB,cAAc;AAEzB,MAAMC,IAAW,CACpB;AAAA,EACI,SAAAC,IAAU;AAAA,EACV,WAAWC;AAAA,EACX,kBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,GAAGC;AACP,GACAC,MACC;;AACD,QAAM,EAAE,KAAAC,EAAA,IAAQC,EAAA,GAEV,CAACC,GAAWC,CAAY,IAAIC,EAAqB;AAAA,IACnD,MAAMb;AAAA,IACN,aAAaC;AAAA,IACb,UAAUE;AAAA,EAAA,CACb,GAEKW,IAAqBC;AAAA,IACvB,CAACC,MAAkB;AACf,MAAAJ,EAAaI,CAAK;AAAA,IACtB;AAAA,IACA,CAACJ,CAAY;AAAA,EAAA,GAGX,EAAE,gBAAAK,GAAgB,oBAAAC,GAAoB,UAAAC,GAAU,mBAAAC,GAAmB,YAAAC,EAAA,IAAeC,EAAe;AAAA,IACnG,WAAAX;AAAA,EAAA,CACH,GAEKY,IAAeC,EAAQ,OAAO,EAAE,YAAAH,MAAe,CAACA,CAAU,CAAC,GAG3DI,IAAoBpB,MAAY,UAAUC;AAEhD,SACI,gBAAAoB,EAAC7B,EAAkB,UAAlB,EAA2B,OAAO0B,GAC/B,UAAA,gBAAAI;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACG,KAAApB;AAAA,MACA,KAAAC;AAAA,MACA,WAAWoB,EAAO;AAAA,MAClB,eAAef;AAAA,MACf,OAAOH,OAAamB,IAAAX,EAAS,CAAC,MAAV,gBAAAW,EAAa;AAAA,MACjC,6BAA2B/B;AAAA,MAC3B,qBAAmBM;AAAA,MACnB,0BAAwBoB;AAAA,MACvB,GAAGlB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAoB,EAAC,OAAA,EAAI,WAAWE,EAAO,oBACnB,UAAA;AAAA,UAAA,gBAAAH,EAACE,EAAU,MAAV,EAAe,KAAKX,GAAgB,aAAWf,GAAM,WAAW2B,EAAO,aACnE,UAAAV,EAAS,IAAI,CAACY,MACX,gBAAAC;AAAA,YAACJ,EAAU;AAAA,YAAV;AAAA,cACI,GAAGG,EAAQ;AAAA,cACZ,KAAKA,EAAQ;AAAA,cACb,OAAOA,EAAQ;AAAA,cACf,UAAUA,EAAQ;AAAA,cAClB,WAAWF,EAAO;AAAA,cAClB,KAAKE,EAAQ;AAAA,YAAA;AAAA,YAEZA,EAAQ;AAAA,UAAA,CAEhB,GACL;AAAA,UACA,gBAAAJ,EAACM,EAAS,MAAT,EACI,UAAA;AAAA,YAAAb,EAAkB,SAAS,KACxB,gBAAAM,EAACO,EAAS,SAAT,EAAiB,gBAAa,mCAC3B,UAAA,gBAAAP,EAACQ,GAAA,EAAO,UAAS,WAAU,QAAO,UAAS,MAAK,SAC5C,4BAACC,GAAA,EAAmB,MAAM,IAAI,EAAA,CAClC,EAAA,CACJ;AAAA,YAEJ,gBAAAT,EAACO,EAAS,SAAT,EAAiB,OAAM,OAAM,gBAAa,mCACtC,UAAAb,EAAkB,IAAI,CAACW,MACpB,gBAAAC;AAAA,cAACC,EAAS;AAAA,cAAT;AAAA,gBACI,GAAGF,EAAQ;AAAA,gBACZ,UAAUA,EAAQ;AAAA,gBAClB,UAAU,MAAMjB,EAAmBiB,EAAQ,KAAK;AAAA,gBAChD,KAAKA,EAAQ;AAAA,cAAA;AAAA,cAEZA,EAAQ;AAAA,YAAA,CAEhB,EAAA,CACL;AAAA,UAAA,GACJ;AAAA,UACA,gBAAAL;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,gBAAa;AAAA,cACb,KAAKR;AAAA,cACL,WAAWW,EAAO;AAAA,YAAA;AAAA,UAAA;AAAA,QACtB,GACJ;AAAA,QACCzB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAET;AAER;AACAN,EAAS,cAAc;AAQhB,MAAMsC,IAAU,CAAC,EAAE,UAAAhC,GAAU,OAAAY,GAAO,UAAAqB,QAA6B;AACpE,QAAMd,IAAeC,EAAQ,OAAO,EAAE,OAAAR,GAAO,UAAAqB,MAAa,CAACrB,GAAOqB,CAAQ,CAAC;AAE3E,2BAAQ1C,EAAiB,UAAjB,EAA0B,OAAO4B,GAAe,UAAAnB,GAAS;AACrE;AACAgC,EAAQ,cAAc;AAMf,MAAME,IAAc,CAAC,EAAE,UAAAlC,GAAU,GAAGG,EAAA,GAA2BC,MAAyC;AAC3G,QAAM,EAAE,OAAAQ,GAAO,UAAAqB,MAAaE,EAAW5C,CAAgB,GAEjD,EAAE,YAAA0B,EAAA,IAAekB,EAAW1C,CAAiB,GAE7C2C,IAAWC,EAA0B,IAAI,GACzCC,IAAkBD,EAAA;AAExB,SAAAE,EAAU,MAAM;AACZ,IAAAtB,EAAW;AAAA,MACP,KAAKmB,KAAYhC;AAAA,MACjB,OAAOQ,KAAS;AAAA,MAChB,UAAAqB;AAAA,MACA,OAAA9B;AAAA,MACA,SAASH;AAAA,MACT,iBAAiBsC,EAAgB;AAAA,IAAA,CACpC,GACDA,EAAgB,UAAUtC;AAAA,EAE9B,GAAG,CAACA,CAAQ,CAAC,GAEN;AACX;AACAkC,EAAY,cAAc;AAOnB,MAAMM,IAAc,CAAC,EAAE,UAAAxC,GAAU,GAAGyC,EAAA,GAA+BrC,MAAsC;AAC5G,QAAM,EAAE,OAAAQ,EAAA,IAAUuB,EAAW5C,CAAgB;AAE7C,SACI,gBAAA+B,EAACE,EAAU,SAAV,EAAkB,KAAApB,GAAW,GAAGqC,GAAW,WAAWhB,EAAO,SAAS,OAAOb,KAAS,IAClF,UAAAZ,EAAA,CACL;AAER;AACAwC,EAAY,cAAc;AAEnB,MAAME,KAAO;AAAA,EAChB,MAAMC,EAA0CjD,CAAQ;AAAA,EACxD,KAAKiD,EAAyCX,CAAO;AAAA,EACrD,SAASW,EAAgDT,CAAW;AAAA,EACpE,SAASS,EAA6CH,CAAW;AACrE;"}

package/dist/fondue-components4.js

@@ -1,58 +1,66 @@
-import { jsx as a, jsxs as g, Fragment as h } from "react/jsx-runtime";
-import { IconCross as B } from "@frontify/fondue-icons";
-import { useTranslation as x } from "./fondue-components39.js";
-import { BadgeStatus as y } from "./fondue-components40.js";
-import p from "./fondue-components41.js";
-const P = ({
-  "aria-label": e,
-  "data-test-id": n = "badge",
-  children: o,
-  disabled: t = !1,
-  emphasis: r = "strong",
-  onClick: s,
-  onDismiss: i,
-  size: b = "default",
-  status: f,
-  title: d,
-  variant: u = "default"
+import { jsx as t, jsxs as p, Fragment as B } from "react/jsx-runtime";
+import { IconCross as y } from "@frontify/fondue-icons";
+import { useTranslation as v } from "./fondue-components39.js";
+import { BadgeStatus as x } from "./fondue-components40.js";
+import l from "./fondue-components41.js";
+const S = ({
+  "aria-label": a,
+  "data-test-id": e = "badge",
+  children: d,
+  disabled: r = !1,
+  emphasis: b = "strong",
+  onClick: o,
+  onDismiss: n,
+  size: f = "default",
+  status: i,
+  title: s,
+  variant: g = "default"
 }) => {
-  const l = {
-    "aria-label": e || d,
+  const { t: h } = v(), m = {
+    "aria-label": a || s,
     "data-component": "badge",
-    "data-disabled": t,
-    "data-dismissable": !!i,
-    "data-emphasis": r,
-    "data-size": b,
-    "data-test-id": n,
-    "data-variant": u,
-    className: p.root,
-    title: d
-  }, m = {
-    "aria-label": e || d,
-    disabled: t,
-    onDismiss: i,
-    status: f
-  };
-  return s ? /* @__PURE__ */ a("button", { type: "button", disabled: t, ...l, onClick: s, children: /* @__PURE__ */ a(c, { ...m, children: o }) }) : /* @__PURE__ */ a("div", { ...l, children: /* @__PURE__ */ a(c, { ...m, children: o }) });
-}, c = ({ "aria-label": e, children: n, disabled: o = !1, onDismiss: t, status: r }) => {
-  const { t: s } = x();
-  return /* @__PURE__ */ g(h, { children: [
-    r && /* @__PURE__ */ a(y, { status: r }),
-    n,
-    t && /* @__PURE__ */ a(
+    "data-disabled": r,
+    "data-dismissable": !!n,
+    "data-emphasis": b,
+    "data-size": f,
+    "data-test-id": e,
+    "data-variant": g,
+    className: l.root,
+    title: s
+  }, u = n ? /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      "aria-label": h("Badge_dismiss", { label: a || s || "" }),
+      className: l.dismiss,
+      "data-test-id": `${e}-dismiss`,
+      disabled: r,
+      onClick: n,
+      children: /* @__PURE__ */ t(y, { size: "12" })
+    }
+  ) : null;
+  return o && n ? /* @__PURE__ */ p("div", { ...m, children: [
+    /* @__PURE__ */ t(
       "button",
       {
         type: "button",
-        "aria-label": s("Badge_dismiss", { label: e || "" }),
-        className: p.dismiss,
-        disabled: o,
-        onClick: t,
-        children: /* @__PURE__ */ a(B, { size: "12" })
+        "aria-label": a || s,
+        className: l.inner,
+        disabled: r,
+        onClick: o,
+        children: /* @__PURE__ */ t(c, { status: i, children: d })
       }
-    )
+    ),
+    u
+  ] }) : o ? /* @__PURE__ */ t("button", { type: "button", disabled: r, ...m, onClick: o, children: /* @__PURE__ */ t(c, { status: i, children: d }) }) : /* @__PURE__ */ p("div", { ...m, children: [
+    /* @__PURE__ */ t(c, { status: i, children: d }),
+    u
   ] });
-};
+}, c = ({ children: a, status: e }) => /* @__PURE__ */ p(B, { children: [
+  e && /* @__PURE__ */ t(x, { status: e }),
+  a
+] });
 export {
-  P as Badge
+  S as Badge
 };
 //# sourceMappingURL=fondue-components4.js.map

package/dist/fondue-components4.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components4.js","sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { BadgeStatus, type BadgeStatusProps } from './BadgeStatus';\nimport styles from './styles/badge.module.scss';\n\ntype BadgeStyle = 'default' | 'positive' | 'highlight' | 'warning' | 'negative';\n\ntype BadgeEmphasis = 'strong' | 'weak';\n\ntype BadgeSize = 'default' | 'small';\n\ntype BadgeProps = {\n    /**\n     * @default 'strong'\n     */\n    emphasis?: BadgeEmphasis;\n    /**\n     * @default 'default'\n     */\n    variant?: BadgeStyle;\n    /**\n     * @default 'default'\n     */\n    size?: BadgeSize;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler\n     */\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on dismiss - providing this will show the dismiss button\n     */\n    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * The color of the status dot\n     */\n    status?: BadgeStatusProps['status'];\n    title?: string;\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nexport const Badge = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'badge',\n    children,\n    disabled = false,\n    emphasis = 'strong',\n    onClick,\n    onDismiss,\n    size = 'default',\n    status,\n    title,\n    variant = 'default',\n}: BadgeProps) => {\n    const 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    const { t } = useTranslation();\n\n    return (\n        <>\n            {status && <BadgeStatus status={status} />}\n            {children}\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    aria-label={t('Badge_dismiss', { label: 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","t","useTranslation","jsxs","Fragment","BadgeStatus","IconCross"],"mappings":";;;;;AAmDO,MAAMA,IAAQ,CAAC;AAAA,EAClB,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AACd,MAAkB;AACd,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,QAAyB;AAC7G,QAAM,EAAE,GAAAQ,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAX,KAAU,gBAAAM,EAACM,KAAY,QAAAZ,EAAA,CAAgB;AAAA,IACvCN;AAAA,IACAI,KACG,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,cAAYE,EAAE,iBAAiB,EAAE,OAAOhB,KAAa,IAAI;AAAA,QACzD,WAAWY,EAAO;AAAA,QAClB,UAAAT;AAAA,QACA,SAASG;AAAA,QAET,UAAA,gBAAAQ,EAACO,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACzB,GAER;AAER;"}
+{"version":3,"file":"fondue-components4.js","sources":["../src/components/Badge/Badge.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport { BadgeStatus, type BadgeStatusProps } from './BadgeStatus';\nimport styles from './styles/badge.module.scss';\n\ntype BadgeStyle = 'default' | 'positive' | 'highlight' | 'warning' | 'negative';\n\ntype BadgeEmphasis = 'strong' | 'weak';\n\ntype BadgeSize = 'default' | 'small';\n\ntype BadgeProps = {\n    /**\n     * @default 'strong'\n     */\n    emphasis?: BadgeEmphasis;\n    /**\n     * @default 'default'\n     */\n    variant?: BadgeStyle;\n    /**\n     * @default 'default'\n     */\n    size?: BadgeSize;\n    /**\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Click handler\n     */\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Click handler on dismiss - providing this will show the dismiss button\n     */\n    onDismiss?: (event: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * The color of the status dot\n     */\n    status?: BadgeStatusProps['status'];\n    title?: string;\n    'aria-label'?: string;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nexport const Badge = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'badge',\n    children,\n    disabled = false,\n    emphasis = 'strong',\n    onClick,\n    onDismiss,\n    size = 'default',\n    status,\n    title,\n    variant = 'default',\n}: BadgeProps) => {\n    const { t } = useTranslation();\n\n    const commonProps = {\n        'aria-label': ariaLabel || title,\n        'data-component': 'badge',\n        'data-disabled': disabled,\n        'data-dismissable': !!onDismiss,\n        'data-emphasis': emphasis,\n        'data-size': size,\n        'data-test-id': dataTestId,\n        'data-variant': variant,\n        className: styles.root,\n        title,\n    };\n\n    const dismissButton = onDismiss ? (\n        <button\n            type=\"button\"\n            aria-label={t('Badge_dismiss', { label: ariaLabel || title || '' })}\n            className={styles.dismiss}\n            data-test-id={`${dataTestId}-dismiss`}\n            disabled={disabled}\n            onClick={onDismiss}\n        >\n            <IconCross size=\"12\" />\n        </button>\n    ) : null;\n\n    // When both onClick and onDismiss are provided, render as siblings inside a\n    // wrapper div to avoid nesting interactive elements (invalid HTML / a11y issue).\n    if (onClick && onDismiss) {\n        return (\n            <div {...commonProps}>\n                <button\n                    type=\"button\"\n                    aria-label={ariaLabel || title}\n                    className={styles.inner}\n                    disabled={disabled}\n                    onClick={onClick}\n                >\n                    <BadgeContent status={status}>{children}</BadgeContent>\n                </button>\n                {dismissButton}\n            </div>\n        );\n    }\n\n    if (onClick) {\n        return (\n            <button type=\"button\" disabled={disabled} {...commonProps} onClick={onClick}>\n                <BadgeContent status={status}>{children}</BadgeContent>\n            </button>\n        );\n    }\n\n    return (\n        <div {...commonProps}>\n            <BadgeContent status={status}>{children}</BadgeContent>\n            {dismissButton}\n        </div>\n    );\n};\n\nconst BadgeContent = ({ children, status }: { children: ReactNode; status?: BadgeStatusProps['status'] }) => (\n    <>\n        {status && <BadgeStatus status={status} />}\n        {children}\n    </>\n);\n"],"names":["Badge","ariaLabel","dataTestId","children","disabled","emphasis","onClick","onDismiss","size","status","title","variant","t","useTranslation","commonProps","styles","dismissButton","jsx","IconCross","jsxs","BadgeContent","Fragment","BadgeStatus"],"mappings":";;;;;AAmDO,MAAMA,IAAQ,CAAC;AAAA,EAClB,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AACd,MAAkB;AACd,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GAERC,IAAc;AAAA,IAChB,cAAcb,KAAaS;AAAA,IAC3B,kBAAkB;AAAA,IAClB,iBAAiBN;AAAA,IACjB,oBAAoB,CAAC,CAACG;AAAA,IACtB,iBAAiBF;AAAA,IACjB,aAAaG;AAAA,IACb,gBAAgBN;AAAA,IAChB,gBAAgBS;AAAA,IAChB,WAAWI,EAAO;AAAA,IAClB,OAAAL;AAAA,EAAA,GAGEM,IAAgBT,IAClB,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAYL,EAAE,iBAAiB,EAAE,OAAOX,KAAaS,KAAS,IAAI;AAAA,MAClE,WAAWK,EAAO;AAAA,MAClB,gBAAc,GAAGb,CAAU;AAAA,MAC3B,UAAAE;AAAA,MACA,SAASG;AAAA,MAET,UAAA,gBAAAU,EAACC,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,IAAA;AAAA,EAAA,IAEzB;AAIJ,SAAIZ,KAAWC,IAEP,gBAAAY,EAAC,OAAA,EAAK,GAAGL,GACL,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,cAAYhB,KAAaS;AAAA,QACzB,WAAWK,EAAO;AAAA,QAClB,UAAAX;AAAA,QACA,SAAAE;AAAA,QAEA,UAAA,gBAAAW,EAACG,GAAA,EAAa,QAAAX,GAAiB,UAAAN,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAE3Ca;AAAA,EAAA,GACL,IAIJV,IAEI,gBAAAW,EAAC,UAAA,EAAO,MAAK,UAAS,UAAAb,GAAqB,GAAGU,GAAa,SAAAR,GACvD,UAAA,gBAAAW,EAACG,GAAA,EAAa,QAAAX,GAAiB,UAAAN,EAAA,CAAS,GAC5C,IAKJ,gBAAAgB,EAAC,OAAA,EAAK,GAAGL,GACL,UAAA;AAAA,IAAA,gBAAAG,EAACG,GAAA,EAAa,QAAAX,GAAiB,UAAAN,EAAA,CAAS;AAAA,IACvCa;AAAA,EAAA,GACL;AAER,GAEMI,IAAe,CAAC,EAAE,UAAAjB,GAAU,QAAAM,EAAA,MAC9B,gBAAAU,EAAAE,GAAA,EACK,UAAA;AAAA,EAAAZ,KAAU,gBAAAQ,EAACK,KAAY,QAAAb,EAAA,CAAgB;AAAA,EACvCN;AAAA,GACL;"}

package/dist/fondue-components41.js

@@ -1,10 +1,12 @@
-const s = "_root_1jyow_3", o = "_dismiss_1jyow_156", t = {
+const s = "_root_xdptq_3", t = "_inner_xdptq_30", o = "_dismiss_xdptq_175", n = {
   root: s,
+  inner: t,
   dismiss: o
 };
 export {
-  t as default,
+  n as default,
   o as dismiss,
+  t as inner,
   s as root
 };
 //# sourceMappingURL=fondue-components41.js.map

package/dist/fondue-components41.js.map

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

package/dist/fondue-components53.js

@@ -1,18 +1,20 @@
-const t = "_content_1sjx0_6", e = "_header_1sjx0_44", o = "_footer_1sjx0_45", n = "_body_1sjx0_46", s = "_underlay_1sjx0_179", _ = "_sideContent_1sjx0_189", d = {
-  content: t,
-  header: e,
-  footer: o,
-  body: n,
-  underlay: s,
-  sideContent: _
+const e = "_content_3jnjr_6", n = "_header_3jnjr_44", t = "_footer_3jnjr_45", o = "_body_3jnjr_46", r = "_underlay_3jnjr_181", _ = "_sideContent_3jnjr_191", s = "_screenReaderOnly_3jnjr_203", d = {
+  content: e,
+  header: n,
+  footer: t,
+  body: o,
+  underlay: r,
+  sideContent: _,
+  screenReaderOnly: s
 };
 export {
-  n as body,
-  t as content,
+  o as body,
+  e as content,
   d as default,
-  o as footer,
-  e as header,
+  t as footer,
+  n as header,
+  s as screenReaderOnly,
   _ as sideContent,
-  s as underlay
+  r as underlay
 };
 //# sourceMappingURL=fondue-components53.js.map

package/dist/fondue-components53.js.map

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

package/dist/fondue-components85.js

@@ -1,18 +1,18 @@
-const t = "_root_1f9jh_5", r = "_triggerListWrapper_1f9jh_13", e = "_trigger_1f9jh_13", i = "_activeIndicator_1f9jh_61", o = "_triggerList_1f9jh_13", g = "_content_1f9jh_149", _ = {
+const t = "_root_166ls_5", r = "_triggerListWrapper_166ls_17", s = "_trigger_166ls_17", e = "_activeIndicator_166ls_65", i = "_triggerList_166ls_17", o = "_content_166ls_159", g = {
   root: t,
   triggerListWrapper: r,
-  trigger: e,
-  activeIndicator: i,
-  triggerList: o,
-  content: g
+  trigger: s,
+  activeIndicator: e,
+  triggerList: i,
+  content: o
 };
 export {
-  i as activeIndicator,
-  g as content,
-  _ as default,
+  e as activeIndicator,
+  o as content,
+  g as default,
   t as root,
-  e as trigger,
-  o as triggerList,
+  s as trigger,
+  i as triggerList,
   r as triggerListWrapper
 };
 //# sourceMappingURL=fondue-components85.js.map