@frontify/fondue-components 4.0.1 → 4.0.2

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/flex.module.scss';\n\nexport type FlexProps = LayoutComponentProps & {\n    /**\n     * The element to render the Flex component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n    /**\n     * The display property.\n     * @default 'flex'\n     */\n    display?: Responsive<'none' | 'flex' | 'inline-flex'>;\n    /**\n     * The direction of the children.\n     * @default 'row'\n     */\n    direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;\n    /**\n     * The wrap property.\n     */\n    wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Flex = ({\n    as: Component = 'div',\n    'data-test-id': dataTestId = 'fondue-flex',\n    children,\n    ...props\n}: FlexProps) => {\n    return (\n        <Component\n            className={styles.root}\n            data-test-id={dataTestId}\n            style={propsToCssVariables(props, { justify: 'justify-content' })}\n        >\n            {children}\n        </Component>\n    );\n};\nFlex.displayName = 'Flex';\n"],"names":["Flex","Component","dataTestId","children","props","jsx","styles","propsToCssVariables"],"mappings":";;;AAuDO,MAAMA,IAAO,CAAC;AAAA,EACjB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACJ;AAAA,EAAA;AAAA,IACG,WAAWK,EAAO;AAAA,IAClB,gBAAcJ;AAAA,IACd,OAAOK,EAAoBH,GAAO,EAAE,SAAS,mBAAmB;AAAA,IAE/D,UAAAD;AAAA,EAAA;AAAA;AAIbH,EAAK,cAAc;"}
+{"version":3,"file":"fondue-components10.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/flex.module.scss';\n\nexport type FlexProps = LayoutComponentProps & {\n    /**\n     * The element to render the Flex component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n    /**\n     * The display property.\n     * @default 'flex'\n     */\n    display?: Responsive<'none' | 'flex' | 'inline-flex'>;\n    /**\n     * The direction of the children.\n     * @default 'row'\n     */\n    direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;\n    /**\n     * The wrap property.\n     */\n    wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Flex = ({\n    as: Component = 'div',\n    'data-test-id': dataTestId = 'fondue-flex',\n    children,\n    ...props\n}: FlexProps) => {\n    return (\n        <Component\n            className={styles.root}\n            data-test-id={dataTestId}\n            style={propsToCssVariables(props, { justify: 'justify-content' })}\n        >\n            {children}\n        </Component>\n    );\n};\nFlex.displayName = 'Flex';\n"],"names":["Flex","Component","dataTestId","children","props","jsx","styles","propsToCssVariables"],"mappings":";;;AAuDO,MAAMA,IAAO,CAAC;AAAA,EACjB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACJ;AAAA,EAAA;AAAA,IACG,WAAWK,EAAO;AAAA,IAClB,gBAAcJ;AAAA,IACd,OAAOK,EAAoBH,GAAO,EAAE,SAAS,mBAAmB;AAAA,IAE/D,UAAAD;AAAA,EAAA;AACL;AAGRH,EAAK,cAAc;"}

package/dist/fondue-components11.js

@@ -1,21 +1,21 @@
-import { jsx as a, jsxs as v } from "react/jsx-runtime";
-import { IconCross as x } from "@frontify/fondue-icons";
-import * as d from "@radix-ui/react-popover";
-import { forwardRef as r, useRef as C } from "react";
-import { usePreventDropdownOverflow as w } from "./fondue-components39.js";
-import { addAutoFocusAttribute as b, syncRefs as n, addShowFocusRing as A } from "./fondue-components36.js";
+import { jsx as a, jsxs as x } from "react/jsx-runtime";
+import { IconCross as C } from "@frontify/fondue-icons";
+import * as r from "@radix-ui/react-popover";
+import { forwardRef as s, useRef as b } from "react";
+import { usePreventDropdownOverflow as A } from "./fondue-components39.js";
+import { addAutoFocusAttribute as H, syncRefs as l, addShowFocusRing as P } from "./fondue-components36.js";
 import u from "./fondue-components42.js";
-const c = ({ children: t, ...o }) => /* @__PURE__ */ a(d.Root, { ...o, children: t });
+const c = ({ children: t, ...o }) => /* @__PURE__ */ a(r.Root, { ...o, children: t });
 c.displayName = "Flyout.Root";
-const y = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger" }, s) => /* @__PURE__ */ a(
-  d.Trigger,
+const y = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger" }, d) => /* @__PURE__ */ a(
+  r.Trigger,
   {
-    onMouseDown: b,
+    onMouseDown: H,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
     "data-test-id": e,
     asChild: t,
-    ref: s,
+    ref: d,
     children: o
   }
 );
@@ -24,58 +24,62 @@ const f = ({
   align: t = "start",
   maxWidth: o = "360px",
   padding: e = "compact",
-  "data-test-id": s = "fondue-flyout-content",
-  children: g,
-  rounded: N,
-  ...R
-}, l) => {
-  const i = C(null), { setMaxHeight: h } = w(i);
-  return /* @__PURE__ */ a(d.Portal, { children: /* @__PURE__ */ a(
-    d.Content,
+  rounded: d = "medium",
+  width: g = "fit-content",
+  shadow: N = "medium",
+  "data-test-id": h = "fondue-flyout-content",
+  children: R,
+  ...v
+}, n) => {
+  const i = b(null), { setMaxHeight: w } = A(i);
+  return /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(
+    r.Content,
     {
       style: {
-        "--flyout-max-width": o
+        "--flyout-max-width": o,
+        "--flyout-width": g
       },
       ref: i,
       align: t,
       collisionPadding: 8,
       sideOffset: 8,
       onOpenAutoFocus: () => {
-        h(), n(i, l);
+        w(), l(i, n);
       },
       onCloseAutoFocus: () => {
-        n(i, l);
+        l(i, n);
       },
       className: u.root,
       "data-flyout-spacing": e,
-      "data-rounded": N,
-      "data-test-id": s,
-      onFocus: A,
-      ...R,
-      children: g
+      "data-rounded": d,
+      "data-shadow": N,
+      "data-test-id": h,
+      onFocus: P,
+      ...v,
+      children: R
     }
   ) });
 };
 f.displayName = "Flyout.Content";
-const m = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, s) => /* @__PURE__ */ v("div", { "data-test-id": e, ref: s, className: u.header, children: [
+const m = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, d) => /* @__PURE__ */ x("div", { "data-test-id": e, ref: d, className: u.header, children: [
   /* @__PURE__ */ a("div", { children: o }),
-  t && /* @__PURE__ */ a(d.Close, { role: "button", "data-test-id": `${e}-close`, className: u.close, children: /* @__PURE__ */ a(x, { size: 20 }) })
+  t && /* @__PURE__ */ a(r.Close, { role: "button", "data-test-id": `${e}-close`, className: u.close, children: /* @__PURE__ */ a(C, { size: 20 }) })
 ] });
 m.displayName = "Flyout.Header";
 const p = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: u.footer, children: t });
 p.displayName = "Flyout.Footer";
 const F = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: u.body, children: t });
 F.displayName = "Flyout.Body";
-const D = {
+const z = {
   Root: c,
-  Trigger: r(y),
-  Content: r(f),
-  Header: r(m),
-  Footer: r(p),
-  Body: r(F)
+  Trigger: s(y),
+  Content: s(f),
+  Header: s(m),
+  Footer: s(p),
+  Body: s(F)
 };
 export {
-  D as Flyout,
+  z as Flyout,
   F as FlyoutBody,
   f as FlyoutContent,
   p as FlyoutFooter,

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, useRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { addAutoFocusAttribute, addShowFocusRing, syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger' }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\nexport type FlyoutContentProps = {\n    /**\n     * Add rounded corners to the flyout\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        rounded,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                style={\n                    {\n                        '--flyout-max-width': maxWidth,\n                    } as CSSProperties\n                }\n                ref={localRef}\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                onOpenAutoFocus={() => {\n                    setMaxHeight();\n                    syncRefs(localRef, ref);\n                }}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                }}\n                className={styles.root}\n                data-flyout-spacing={padding}\n                data-rounded={rounded}\n                data-test-id={dataTestId}\n                onFocus={addShowFocusRing}\n                {...props}\n            >\n                {children}\n            </RadixPopover.Content>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={styles.body}>\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","FlyoutContent","align","maxWidth","padding","rounded","localRef","useRef","setMaxHeight","usePreventDropdownOverflow","syncRefs","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":";;;;;;;AA6BO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,EAAS,CAAA;AAEnDD,EAAW,cAAc;AAYZ,MAAAI,IAAgB,CACzB,EAAE,SAAAC,IAAU,IAAM,UAAAJ,GAAU,gBAAgBK,IAAa,wBAAwB,GACjFC,MAGI,gBAAAC;AAAA,EAACL,EAAa;AAAA,EAAb;AAAA,IACG,aAAaM;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAAD;AAAA,IACA,KAAAE;AAAA,IAEC,UAAAN;AAAA,EAAA;AAAA;AAIbG,EAAc,cAAc;AAgCrB,MAAMM,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,gBAAgBP,IAAa;AAAA,EAC7B,UAAAL;AAAA,EACA,SAAAa;AAAA,EACA,GAAGZ;AACP,GACAK,MACC;AACK,QAAAQ,IAAWC,EAAO,IAAI,GAEtB,EAAE,cAAAC,EAAA,IAAiBC,EAA2BH,CAAQ;AAGxD,SAAA,gBAAAP,EAACL,EAAa,QAAb,EACG,UAAA,gBAAAK;AAAA,IAACL,EAAa;AAAA,IAAb;AAAA,MACG,OACI;AAAA,QACI,sBAAsBS;AAAA,MAC1B;AAAA,MAEJ,KAAKG;AAAA,MACL,OAAAJ;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,iBAAiB,MAAM;AACN,QAAAM,KACbE,EAASJ,GAAUR,CAAG;AAAA,MAC1B;AAAA,MACA,kBAAkB,MAAM;AACpB,QAAAY,EAASJ,GAAUR,CAAG;AAAA,MAC1B;AAAA,MACA,WAAWa,EAAO;AAAA,MAClB,uBAAqBP;AAAA,MACrB,gBAAcC;AAAA,MACd,gBAAcR;AAAA,MACd,SAASe;AAAA,MACR,GAAGnB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAER;AACAS,EAAc,cAAc;AAYf,MAAAY,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAAtB,GAAU,gBAAgBK,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWa,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAZ,EAAC,SAAK,UAAAP,GAAS;AAAA,EACdsB,KACI,gBAAAf,EAAAL,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGG,CAAU,UAAU,WAAWc,EAAO,OACrF,4BAACI,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAER,EAAA,CAAA;AAGRF,EAAa,cAAc;AAId,MAAAG,IAAe,CACxB,EAAE,UAAAxB,GAAU,gBAAgBK,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWa,EAAO,QACtD,UAAAnB,EACL,CAAA;AAGRwB,EAAa,cAAc;AAId,MAAAC,IAAa,CACtB,EAAE,UAAAzB,GAAU,gBAAgBK,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWa,EAAO,MACpF,UAAAnB,EACL,CAAA;AAGRyB,EAAW,cAAc;AAElB,MAAMC,IAAS;AAAA,EAClB,MAAM3B;AAAA,EACN,SAAS4B,EAAkDxB,CAAa;AAAA,EACxE,SAASwB,EAA+ClB,CAAa;AAAA,EACrE,QAAQkB,EAA8CN,CAAY;AAAA,EAClE,QAAQM,EAA8CH,CAAY;AAAA,EAClE,MAAMG,EAA4CF,CAAU;AAChE;"}
+{"version":3,"file":"fondue-components11.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, useRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { usePreventDropdownOverflow } from '#/hooks/usePreventDropdownOverflow';\nimport { addAutoFocusAttribute, addShowFocusRing, syncRefs } from '#/utilities/domUtilities';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger' }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const localRef = useRef(null);\n\n    const { setMaxHeight } = usePreventDropdownOverflow(localRef);\n\n    return (\n        <RadixPopover.Portal>\n            <RadixPopover.Content\n                style={\n                    {\n                        '--flyout-max-width': maxWidth,\n                        '--flyout-width': width,\n                    } as CSSProperties\n                }\n                ref={localRef}\n                align={align}\n                collisionPadding={8}\n                sideOffset={8}\n                onOpenAutoFocus={() => {\n                    setMaxHeight();\n                    syncRefs(localRef, ref);\n                }}\n                onCloseAutoFocus={() => {\n                    syncRefs(localRef, ref);\n                }}\n                className={styles.root}\n                data-flyout-spacing={padding}\n                data-rounded={rounded}\n                data-shadow={shadow}\n                data-test-id={dataTestId}\n                onFocus={addShowFocusRing}\n                {...props}\n            >\n                {children}\n            </RadixPopover.Content>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header' }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close role=\"button\" data-test-id={`${dataTestId}-close`} className={styles.close}>\n                    <IconCross size={20} />\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={styles.body}>\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","localRef","useRef","setMaxHeight","usePreventDropdownOverflow","syncRefs","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":"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"}

package/dist/fondue-components12.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components12.js","sources":["../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/grid.module.scss';\n\nexport type GridProps = LayoutComponentProps & {\n    /**\n     * The element to render the Grid component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n\n    /**\n     * The display property.\n     * @default 'grid'\n     */\n    display?: 'none' | 'grid' | 'inline-grid';\n    /**\n     * The columns property.\n     */\n    columns?: Responsive<string | number>;\n    /**\n     * The rows property.\n     */\n    rows?: Responsive<string | number>;\n    /**\n     * The flow property.\n     */\n    flow?: Responsive<'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'start' | 'center' | 'end' | 'between'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Grid = ({\n    as: Component = 'div',\n    'data-test-id': dataTestId = 'fondue-grid',\n    children,\n    ...props\n}: GridProps) => {\n    return (\n        <Component\n            className={styles.root}\n            data-test-id={dataTestId}\n            style={propsToCssVariables(props, { justify: 'justify-items' })}\n        >\n            {children}\n        </Component>\n    );\n};\nGrid.displayName = 'Grid';\n"],"names":["Grid","Component","dataTestId","children","props","jsx","styles","propsToCssVariables"],"mappings":";;;AA2DO,MAAMA,IAAO,CAAC;AAAA,EACjB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACJ;AAAA,EAAA;AAAA,IACG,WAAWK,EAAO;AAAA,IAClB,gBAAcJ;AAAA,IACd,OAAOK,EAAoBH,GAAO,EAAE,SAAS,iBAAiB;AAAA,IAE7D,UAAAD;AAAA,EAAA;AAAA;AAIbH,EAAK,cAAc;"}
+{"version":3,"file":"fondue-components12.js","sources":["../src/components/Grid/Grid.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/grid.module.scss';\n\nexport type GridProps = LayoutComponentProps & {\n    /**\n     * The element to render the Grid component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n\n    /**\n     * The display property.\n     * @default 'grid'\n     */\n    display?: 'none' | 'grid' | 'inline-grid';\n    /**\n     * The columns property.\n     */\n    columns?: Responsive<string | number>;\n    /**\n     * The rows property.\n     */\n    rows?: Responsive<string | number>;\n    /**\n     * The flow property.\n     */\n    flow?: Responsive<'row' | 'column' | 'dense' | 'row-dense' | 'column-dense'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'start' | 'center' | 'end' | 'between'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Grid = ({\n    as: Component = 'div',\n    'data-test-id': dataTestId = 'fondue-grid',\n    children,\n    ...props\n}: GridProps) => {\n    return (\n        <Component\n            className={styles.root}\n            data-test-id={dataTestId}\n            style={propsToCssVariables(props, { justify: 'justify-items' })}\n        >\n            {children}\n        </Component>\n    );\n};\nGrid.displayName = 'Grid';\n"],"names":["Grid","Component","dataTestId","children","props","jsx","styles","propsToCssVariables"],"mappings":";;;AA2DO,MAAMA,IAAO,CAAC;AAAA,EACjB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACJ;AAAA,EAAA;AAAA,IACG,WAAWK,EAAO;AAAA,IAClB,gBAAcJ;AAAA,IACd,OAAOK,EAAoBH,GAAO,EAAE,SAAS,iBAAiB;AAAA,IAE7D,UAAAD;AAAA,EAAA;AACL;AAGRH,EAAK,cAAc;"}

package/dist/fondue-components13.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components13.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    className?: string;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(\n                'tw-group tw-flex tw-gap-1 tw-font-sans tw-font-normal peer-data-[state=\"checked\"]:tw-font-medium peer-data-[state=\"indeterminate\"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',\n                // Disabled state if siblings has disabled state\n                'has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed',\n                // Required asterisk\n                'after:tw-hidden data-[required=\"true\"]:after:tw-flex after:tw-content-[\"*\"] after:-tw-ml-1 after:tw-font-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',\n                className,\n            )}\n            data-test-id={dataTestId}\n            {...props}\n        />\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","props","ref","jsx","LabelPrimitive","cn","Label","forwardRef"],"mappings":";;;;AAuBa,MAAAA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,GAAGC,EAAM,GACnEC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI;AAAA,MACP;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,MACAN;AAAA,IACJ;AAAA,IACA,gBAAcC;AAAA,IACb,GAAGC;AAAA,EAAA;AAAA,GAKHK,IAAQC,EAAyCT,CAAc;AAC5EQ,EAAM,cAAc;"}
+{"version":3,"file":"fondue-components13.js","sources":["../src/components/Label/Label.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport { type ForwardedRef, forwardRef, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nexport type LabelProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The id of the input element the label is associated with\n     */\n    htmlFor: string;\n    /**\n     * Add an asterisk to the label to indicate it is required\n     * @default false\n     */\n    required?: boolean;\n    className?: string;\n    'data-test-id'?: string;\n};\n\nexport const LabelComponent = (\n    { className, 'data-test-id': dataTestId = 'fondue-label', ...props }: LabelProps,\n    ref: ForwardedRef<HTMLLabelElement>,\n) => {\n    return (\n        <LabelPrimitive.Root\n            ref={ref}\n            data-required={props.required}\n            className={cn(\n                'tw-group tw-flex tw-gap-1 tw-font-sans tw-font-normal peer-data-[state=\"checked\"]:tw-font-medium peer-data-[state=\"indeterminate\"]:tw-font-medium tw-text-body-medium tw-text-text-weak peer-hover:tw-text-text has-[+_*_input:hover:not(:disabled)]:tw-text-text tw-transition-colors',\n                // Disabled state if siblings has disabled state\n                'has-[+_*_:disabled]:tw-text-text-disabled has-[~_:disabled]:tw-cursor-not-allowed peer-disabled:tw-text-text-disabled peer-disabled:tw-cursor-not-allowed',\n                // Required asterisk\n                'after:tw-hidden data-[required=\"true\"]:after:tw-flex after:tw-content-[\"*\"] after:-tw-ml-1 after:tw-font-sans after:tw-text-body-small after:tw-font-medium after:tw-text-text-negative group-hover:tw-text-text-negative-hover',\n                className,\n            )}\n            data-test-id={dataTestId}\n            {...props}\n        />\n    );\n};\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(LabelComponent);\nLabel.displayName = 'Label';\n"],"names":["LabelComponent","className","dataTestId","props","ref","jsx","LabelPrimitive","cn","Label","forwardRef"],"mappings":";;;;AAuBa,MAAAA,IAAiB,CAC1B,EAAE,WAAAC,GAAW,gBAAgBC,IAAa,gBAAgB,GAAGC,EAAM,GACnEC,MAGI,gBAAAC;AAAA,EAACC,EAAe;AAAA,EAAf;AAAA,IACG,KAAAF;AAAA,IACA,iBAAeD,EAAM;AAAA,IACrB,WAAWI;AAAA,MACP;AAAA;AAAA,MAEA;AAAA;AAAA,MAEA;AAAA,MACAN;AAAA,IACJ;AAAA,IACA,gBAAcC;AAAA,IACb,GAAGC;AAAA,EAAA;AACR,GAIKK,IAAQC,EAAyCT,CAAc;AAC5EQ,EAAM,cAAc;"}

package/dist/fondue-components14.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components14.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * The maximum value of the loading bar\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * Add rounded corners to the loading bar\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * The style of the loading bar\n     * @default \"default\"\n     */\n    variant?: 'default' | 'positive' | 'negative';\n    /**\n     * The size of the loading bar\n     * @default \"medium\"\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    /**\n     * The label of the loading bar for accessibility purposes\n     */\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            variant = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        }: LoadingBarProps,\n        ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, variant })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={\n                    {\n                        '--loading-bar-value': value,\n                        '--loading-bar-max': max,\n                        '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n                    } as CSSProperties\n                }\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ variant, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","variant","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,SAAAD,GAAS;AAAA,MAC/D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAChC;AAAA,MAEH,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,SAAAR,GAAS,oBAAoBH,MAAU,MAAM;AAAA,QAAA;AAAA,MAC/E;AAAA,IAAA;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components14.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport { loadingBarContainerStyles, loadingBarStyles } from './styles/loadingBarStyles';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * The maximum value of the loading bar\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * Add rounded corners to the loading bar\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * The style of the loading bar\n     * @default \"default\"\n     */\n    variant?: 'default' | 'positive' | 'negative';\n    /**\n     * The size of the loading bar\n     * @default \"medium\"\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    /**\n     * The label of the loading bar for accessibility purposes\n     */\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            variant = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        }: LoadingBarProps,\n        ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={loadingBarContainerStyles({ rounded, size, variant })}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={\n                    {\n                        '--loading-bar-value': value,\n                        '--loading-bar-max': max,\n                        '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n                    } as CSSProperties\n                }\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={loadingBarStyles({ variant, indeterminateState: value === null })}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","variant","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","loadingBarContainerStyles","loadingBarStyles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAA0B,EAAE,SAAAR,GAAS,MAAAE,GAAM,SAAAD,GAAS;AAAA,MAC/D,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAChC;AAAA,MAEH,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWE,EAAiB,EAAE,SAAAR,GAAS,oBAAoBH,MAAU,KAAM,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/E;AAAA,EACJ;AAGZ;AACAF,EAAW,cAAc;"}

package/dist/fondue-components15.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components15.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type,\n        maxHeight = '100%',\n        maxWidth = '100%',\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-test-id={`${dataTestId}-viewport`}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AA8BA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAP;AAAA,IACA,WAAWQ,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAN,EAAS;AAAA,IAClB,gBAAcE;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAP,EAAU;AAAA,UACnB,gBAAc,GAAGG,CAAU;AAAA,UAE1B,UAAAD;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAC/B;AAAA,QAAA;AAAA,MACJ;AAAA,MACA,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAC/B;AAAA,QAAA;AAAA,MACJ;AAAA,MACA,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAW,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,GAKvFM,IAAaC,EAA4CZ,CAAmB;AACzFW,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components15.js","sources":["../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixScrollArea from '@radix-ui/react-scroll-area';\nimport { type ForwardedRef, forwardRef, type ReactElement, type ReactNode } from 'react';\n\nimport styles from './styles/scrollArea.module.scss';\n\nexport type ScrollAreaProps = {\n    /**\n     * \"auto\" visible when content is overflowing on the corresponding orientation.\n     * \"always\" always visible regardless of whether the content is overflowing.\n     * \"scroll\" visible when the user is scrolling along its corresponding orientation.\n     * \"hover\" when the user is hovering over the scroll area.\n     * @default 'hover'\n     */\n    type?: 'auto' | 'always' | 'scroll' | 'hover';\n    /**\n     * Maximum height of the scroll area\n     * @default '100%'\n     */\n    maxHeight?: string | number;\n    /**\n     * Minimum width of the scroll area\n     * @default '100%'\n     */\n    maxWidth?: string | number;\n    'data-test-id'?: string;\n    children: ReactNode;\n};\n\nconst ScrollAreaComponent = (\n    {\n        type,\n        maxHeight = '100%',\n        maxWidth = '100%',\n        children,\n        'data-test-id': dataTestId = 'fondue-scroll-area',\n    }: ScrollAreaProps,\n    ref: ForwardedRef<HTMLDivElement>,\n): ReactElement => {\n    return (\n        <RadixScrollArea.Root\n            type={type}\n            className={styles.root}\n            style={{ maxWidth }}\n            data-test-id={dataTestId}\n            ref={ref}\n        >\n            <RadixScrollArea.Viewport\n                className={styles.viewport}\n                style={{ maxHeight }}\n                data-test-id={`${dataTestId}-viewport`}\n            >\n                {children}\n            </RadixScrollArea.Viewport>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"vertical\"\n                data-test-id={`${dataTestId}-vertical-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-vertical-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Scrollbar\n                className={styles.scrollbar}\n                orientation=\"horizontal\"\n                data-test-id={`${dataTestId}-horizontal-scrollbar`}\n            >\n                <RadixScrollArea.Thumb\n                    className={styles.thumb}\n                    data-test-id={`${dataTestId}-horizontal-scrollbar-thumb`}\n                />\n            </RadixScrollArea.Scrollbar>\n            <RadixScrollArea.Corner className={styles.corner} data-test-id={`${dataTestId}-corner`} />\n        </RadixScrollArea.Root>\n    );\n};\n\nexport const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(ScrollAreaComponent);\nScrollArea.displayName = 'ScrollArea';\n"],"names":["ScrollAreaComponent","type","maxHeight","maxWidth","children","dataTestId","ref","jsxs","RadixScrollArea","styles","jsx","ScrollArea","forwardRef"],"mappings":";;;;AA8BA,MAAMA,IAAsB,CACxB;AAAA,EACI,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,GACAC,MAGI,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACG,MAAAP;AAAA,IACA,WAAWQ,EAAO;AAAA,IAClB,OAAO,EAAE,UAAAN,EAAS;AAAA,IAClB,gBAAcE;AAAA,IACd,KAAAC;AAAA,IAEA,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,OAAO,EAAE,WAAAP,EAAU;AAAA,UACnB,gBAAc,GAAGG,CAAU;AAAA,UAE1B,UAAAD;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAM;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK;AAAA,QAACF,EAAgB;AAAA,QAAhB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,aAAY;AAAA,UACZ,gBAAc,GAAGJ,CAAU;AAAA,UAE3B,UAAA,gBAAAK;AAAA,YAACF,EAAgB;AAAA,YAAhB;AAAA,cACG,WAAWC,EAAO;AAAA,cAClB,gBAAc,GAAGJ,CAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QAC/B;AAAA,MACJ;AAAA,MACA,gBAAAK,EAACF,EAAgB,QAAhB,EAAuB,WAAWC,EAAO,QAAQ,gBAAc,GAAGJ,CAAU,UAAW,CAAA;AAAA,IAAA;AAAA,EAAA;AAC5F,GAIKM,IAAaC,EAA4CZ,CAAmB;AACzFW,EAAW,cAAc;"}

package/dist/fondue-components17.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components17.js","sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport styles from './styles/segmentedControl.module.scss';\n\nexport type SegmentedControlRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default value of the segmented control\n     * Used for uncontrolled components\n     */\n    defaultValue: string;\n    /**\n     * The controlled value of the segmented control\n     */\n    value?: string;\n    /**\n     * Event handler called when the value changes\n     */\n    onValueChange?: (value: string) => void;\n    /**\n     * Disable the segmented control\n     * @default false\n     */\n    disabled?: boolean;\n};\n\nexport const SegmentedControlRoot = (\n    { children, value: propsValue, defaultValue, onValueChange, ...rootProps }: SegmentedControlRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [value, setValue] = useControllableState({\n        prop: propsValue,\n        defaultProp: defaultValue,\n        onChange: onValueChange,\n    });\n\n    return (\n        <ToggleGroupPrimitive.Root\n            ref={ref}\n            {...rootProps}\n            className={styles.root}\n            onValueChange={(value) => {\n                if (value) {\n                    setValue(value);\n                }\n            }}\n            value={value}\n            type=\"single\"\n            asChild={false}\n            aria-disabled={rootProps.disabled}\n        >\n            {children}\n            {/* Active indicator */}\n            <div className={styles.activeIndicator} />\n        </ToggleGroupPrimitive.Root>\n    );\n};\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n\ntype SegmentedControlItemProps = {\n    children: ReactNode;\n    value: string;\n};\n\nexport const SegmentedControlItem = (\n    { children, ...itemProps }: SegmentedControlItemProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={styles.item} asChild={false}>\n        {/* Separator */}\n        <span className={styles.separator} />\n        <span className={styles.itemLabel}>\n            {/* Active children */}\n            <span className={styles.itemLabelActive}>{children}</span>\n\n            {/* Inactive children */}\n            <span className={styles.itemLabelInactive}>{children}</span>\n        </span>\n    </ToggleGroupPrimitive.Item>\n);\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n\nexport const SegmentedControl = {\n    Root: forwardRef<HTMLDivElement, SegmentedControlRootProps>(SegmentedControlRoot),\n    Item: forwardRef<HTMLButtonElement, SegmentedControlItemProps>(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","styles","jsx","SegmentedControlItem","itemProps","SegmentedControl","forwardRef"],"mappings":";;;;;AAgCa,MAAAA,IAAuB,CAChC,EAAE,UAAAC,GAAU,OAAOC,GAAY,cAAAC,GAAc,eAAAC,GAAe,GAAGC,EAAU,GACzEC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMP;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAM;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO,EAAO;AAAA,MAClB,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAK;AAAA,MAEtB;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAeF,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAJ;AAAA,QAEA,gBAAAY,EAAA,OAAA,EAAI,WAAWD,EAAO,gBAAiB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD;AACAZ,EAAqB,cAAc;AAO5B,MAAMc,IAAuB,CAChC,EAAE,UAAAb,GAAU,GAAGc,EAAA,GACfT,MAEA,gBAAAI,EAACC,EAAqB,MAArB,EAA0B,KAAAL,GAAW,GAAGS,GAAW,WAAWH,EAAO,MAAM,SAAS,IAEjF,UAAA;AAAA,EAAC,gBAAAC,EAAA,QAAA,EAAK,WAAWD,EAAO,UAAW,CAAA;AAAA,EAClC,gBAAAF,EAAA,QAAA,EAAK,WAAWE,EAAO,WAEpB,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWD,EAAO,iBAAkB,UAAAX,GAAS;AAAA,IAGlD,gBAAAY,EAAA,QAAA,EAAK,WAAWD,EAAO,mBAAoB,UAAAX,GAAS;AAAA,EAAA,GACzD;AAAA,GACJ;AAEJa,EAAqB,cAAc;AAE5B,MAAME,IAAmB;AAAA,EAC5B,MAAMC,EAAsDjB,CAAoB;AAAA,EAChF,MAAMiB,EAAyDH,CAAoB;AACvF;"}
+{"version":3,"file":"fondue-components17.js","sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';\nimport { forwardRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { useControllableState } from '#/hooks/useControllableState';\n\nimport styles from './styles/segmentedControl.module.scss';\n\nexport type SegmentedControlRootProps = {\n    id?: string;\n    children: ReactNode;\n    /**\n     * The default value of the segmented control\n     * Used for uncontrolled components\n     */\n    defaultValue: string;\n    /**\n     * The controlled value of the segmented control\n     */\n    value?: string;\n    /**\n     * Event handler called when the value changes\n     */\n    onValueChange?: (value: string) => void;\n    /**\n     * Disable the segmented control\n     * @default false\n     */\n    disabled?: boolean;\n};\n\nexport const SegmentedControlRoot = (\n    { children, value: propsValue, defaultValue, onValueChange, ...rootProps }: SegmentedControlRootProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const [value, setValue] = useControllableState({\n        prop: propsValue,\n        defaultProp: defaultValue,\n        onChange: onValueChange,\n    });\n\n    return (\n        <ToggleGroupPrimitive.Root\n            ref={ref}\n            {...rootProps}\n            className={styles.root}\n            onValueChange={(value) => {\n                if (value) {\n                    setValue(value);\n                }\n            }}\n            value={value}\n            type=\"single\"\n            asChild={false}\n            aria-disabled={rootProps.disabled}\n        >\n            {children}\n            {/* Active indicator */}\n            <div className={styles.activeIndicator} />\n        </ToggleGroupPrimitive.Root>\n    );\n};\nSegmentedControlRoot.displayName = 'SegmentedControl.Root';\n\ntype SegmentedControlItemProps = {\n    children: ReactNode;\n    value: string;\n};\n\nexport const SegmentedControlItem = (\n    { children, ...itemProps }: SegmentedControlItemProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <ToggleGroupPrimitive.Item ref={ref} {...itemProps} className={styles.item} asChild={false}>\n        {/* Separator */}\n        <span className={styles.separator} />\n        <span className={styles.itemLabel}>\n            {/* Active children */}\n            <span className={styles.itemLabelActive}>{children}</span>\n\n            {/* Inactive children */}\n            <span className={styles.itemLabelInactive}>{children}</span>\n        </span>\n    </ToggleGroupPrimitive.Item>\n);\nSegmentedControlItem.displayName = 'SegmentedControl.Item';\n\nexport const SegmentedControl = {\n    Root: forwardRef<HTMLDivElement, SegmentedControlRootProps>(SegmentedControlRoot),\n    Item: forwardRef<HTMLButtonElement, SegmentedControlItemProps>(SegmentedControlItem),\n};\n"],"names":["SegmentedControlRoot","children","propsValue","defaultValue","onValueChange","rootProps","ref","value","setValue","useControllableState","jsxs","ToggleGroupPrimitive","styles","jsx","SegmentedControlItem","itemProps","SegmentedControl","forwardRef"],"mappings":";;;;;AAgCa,MAAAA,IAAuB,CAChC,EAAE,UAAAC,GAAU,OAAOC,GAAY,cAAAC,GAAc,eAAAC,GAAe,GAAGC,EAAU,GACzEC,MACC;AACD,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAqB;AAAA,IAC3C,MAAMP;AAAA,IACN,aAAaC;AAAA,IACb,UAAUC;AAAA,EAAA,CACb;AAGG,SAAA,gBAAAM;AAAA,IAACC,EAAqB;AAAA,IAArB;AAAA,MACG,KAAAL;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWO,EAAO;AAAA,MAClB,eAAe,CAACL,MAAU;AACtB,QAAIA,KACAC,EAASD,CAAK;AAAA,MAEtB;AAAA,MACA,OAAAA;AAAA,MACA,MAAK;AAAA,MACL,SAAS;AAAA,MACT,iBAAeF,EAAU;AAAA,MAExB,UAAA;AAAA,QAAAJ;AAAA,QAEA,gBAAAY,EAAA,OAAA,EAAI,WAAWD,EAAO,gBAAiB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAC5C;AAER;AACAZ,EAAqB,cAAc;AAO5B,MAAMc,IAAuB,CAChC,EAAE,UAAAb,GAAU,GAAGc,EAAA,GACfT,MAEA,gBAAAI,EAACC,EAAqB,MAArB,EAA0B,KAAAL,GAAW,GAAGS,GAAW,WAAWH,EAAO,MAAM,SAAS,IAEjF,UAAA;AAAA,EAAC,gBAAAC,EAAA,QAAA,EAAK,WAAWD,EAAO,UAAW,CAAA;AAAA,EAClC,gBAAAF,EAAA,QAAA,EAAK,WAAWE,EAAO,WAEpB,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAK,EAAA,WAAWD,EAAO,iBAAkB,UAAAX,GAAS;AAAA,IAGlD,gBAAAY,EAAA,QAAA,EAAK,WAAWD,EAAO,mBAAoB,UAAAX,EAAS,CAAA;AAAA,EAAA,EACzD,CAAA;AAAA,EACJ,CAAA;AAEJa,EAAqB,cAAc;AAE5B,MAAME,IAAmB;AAAA,EAC5B,MAAMC,EAAsDjB,CAAoB;AAAA,EAChF,MAAMiB,EAAyDH,CAAoB;AACvF;"}

package/dist/fondue-components18.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components18.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * The aria label of the select component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select',\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const wasClicked = useRef(false);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect && onSelect(selectedItem.value);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor\n                asChild\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                }}\n            >\n                <div\n                    className={styles.root}\n                    data-status={status}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': ariaLabel,\n                              ...(forwardedRef ? { ref: forwardedRef } : {}),\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{selectedItem ? selectedItem.label : placeholder}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","alignMenu","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}
+{"version":3,"file":"fondue-components18.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * The aria label of the select component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select',\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const wasClicked = useRef(false);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect && onSelect(selectedItem.value);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor\n                asChild\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                }}\n            >\n                <div\n                    className={styles.root}\n                    data-status={status}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': ariaLabel,\n                              ...(forwardedRef ? { ref: forwardedRef } : {}),\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{selectedItem ? selectedItem.label : placeholder}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","alignMenu","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}

package/dist/fondue-components19.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components19.js","sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixSlider from '@radix-ui/react-slider';\nimport { type ForwardedRef, forwardRef, useRef } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/slider.module.scss';\n\nexport type SliderProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The default value of the slider\n     * Used for uncontrolled components\n     * @default [0]\n     */\n    defaultValue?: number[];\n    /**\n     * The controlled value of the slider\n     * @default [0]\n     */\n    value?: number[];\n    /**\n     * Minimum value of the slider\n     * @default 0\n     */\n    min?: number;\n    /**\n     * Maximum value of the slider\n     * @default 100\n     */\n    max?: number;\n    /**\n     * The granularity with which the slider can step through values\n     * @default 1\n     */\n    step?: number;\n    /**\n     * The minimum steps between thumbs in a range slider\n     * @default 0\n     */\n    minStepsBetweenThumbs?: number;\n    /**\n     * Disable the slider\n     * @default false\n     */\n    disabled?: boolean;\n    onChange?: (value: number[]) => void;\n    onCommit?: (value: number[]) => void;\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nconst SliderComponent = (\n    {\n        value,\n        defaultValue = [0],\n        onChange,\n        onCommit,\n        'data-test-id': dataTestId = 'fondue-slider',\n        ...props\n    }: SliderProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    const sliderThumbRef = useRef<HTMLSpanElement | null>(null);\n    return (\n        <RadixSlider.Root\n            ref={ref}\n            className={styles.root}\n            value={value}\n            defaultValue={defaultValue}\n            onValueChange={onChange}\n            onValueCommit={onCommit}\n            data-test-id={dataTestId}\n            {...props}\n        >\n            <RadixSlider.Track\n                onPointerDown={() => {\n                    if (sliderThumbRef.current) {\n                        sliderThumbRef.current.dataset.showFocusRing = 'false';\n                    }\n                }}\n                className={styles.track}\n            >\n                <RadixSlider.Range className={styles.range} />\n            </RadixSlider.Track>\n            {(value || defaultValue).map((_, index) => (\n                <RadixSlider.Thumb\n                    ref={sliderThumbRef}\n                    className={styles.thumb}\n                    onPointerDown={(event) => {\n                        event.currentTarget.dataset.showFocusRing = 'false';\n                    }}\n                    onBlur={(event) => {\n                        event.currentTarget.dataset.showFocusRing = 'true';\n                    }}\n                    key={index}\n                />\n            ))}\n        </RadixSlider.Root>\n    );\n};\n\nexport const Slider = forwardRef<HTMLButtonElement, SliderProps>(SliderComponent);\nSlider.displayName = 'Slider';\n"],"names":["SliderComponent","value","defaultValue","onChange","onCommit","dataTestId","props","ref","sliderThumbRef","useRef","jsxs","RadixSlider","styles","jsx","_","index","event","Slider","forwardRef"],"mappings":";;;;AAqDA,MAAMA,IAAkB,CACpB;AAAA,EACI,OAAAC;AAAA,EACA,cAAAC,IAAe,CAAC,CAAC;AAAA,EACjB,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAiBC,EAA+B,IAAI;AAEtD,SAAA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACG,KAAAJ;AAAA,MACA,WAAWK,EAAO;AAAA,MAClB,OAAAX;AAAA,MACA,cAAAC;AAAA,MACA,eAAeC;AAAA,MACf,eAAeC;AAAA,MACf,gBAAcC;AAAA,MACb,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACG,eAAe,MAAM;AACjB,cAAIH,EAAe,YACAA,EAAA,QAAQ,QAAQ,gBAAgB;AAAA,YAEvD;AAAA,YACA,WAAWI,EAAO;AAAA,YAElB,4BAACD,EAAY,OAAZ,EAAkB,WAAWC,EAAO,OAAO;AAAA,UAAA;AAAA,QAChD;AAAA,SACEX,KAASC,GAAc,IAAI,CAACY,GAAGC,MAC7B,gBAAAF;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACG,KAAKH;AAAA,YACL,WAAWI,EAAO;AAAA,YAClB,eAAe,CAACI,MAAU;AAChB,cAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,YAChD;AAAA,YACA,QAAQ,CAACA,MAAU;AACT,cAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,YAChD;AAAA,UAAA;AAAA,UACKD;AAAA,QAAA,CAEZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb,GAEaE,IAASC,EAA2ClB,CAAe;AAChFiB,EAAO,cAAc;"}
+{"version":3,"file":"fondue-components19.js","sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixSlider from '@radix-ui/react-slider';\nimport { type ForwardedRef, forwardRef, useRef } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/slider.module.scss';\n\nexport type SliderProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The default value of the slider\n     * Used for uncontrolled components\n     * @default [0]\n     */\n    defaultValue?: number[];\n    /**\n     * The controlled value of the slider\n     * @default [0]\n     */\n    value?: number[];\n    /**\n     * Minimum value of the slider\n     * @default 0\n     */\n    min?: number;\n    /**\n     * Maximum value of the slider\n     * @default 100\n     */\n    max?: number;\n    /**\n     * The granularity with which the slider can step through values\n     * @default 1\n     */\n    step?: number;\n    /**\n     * The minimum steps between thumbs in a range slider\n     * @default 0\n     */\n    minStepsBetweenThumbs?: number;\n    /**\n     * Disable the slider\n     * @default false\n     */\n    disabled?: boolean;\n    onChange?: (value: number[]) => void;\n    onCommit?: (value: number[]) => void;\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nconst SliderComponent = (\n    {\n        value,\n        defaultValue = [0],\n        onChange,\n        onCommit,\n        'data-test-id': dataTestId = 'fondue-slider',\n        ...props\n    }: SliderProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    const sliderThumbRef = useRef<HTMLSpanElement | null>(null);\n    return (\n        <RadixSlider.Root\n            ref={ref}\n            className={styles.root}\n            value={value}\n            defaultValue={defaultValue}\n            onValueChange={onChange}\n            onValueCommit={onCommit}\n            data-test-id={dataTestId}\n            {...props}\n        >\n            <RadixSlider.Track\n                onPointerDown={() => {\n                    if (sliderThumbRef.current) {\n                        sliderThumbRef.current.dataset.showFocusRing = 'false';\n                    }\n                }}\n                className={styles.track}\n            >\n                <RadixSlider.Range className={styles.range} />\n            </RadixSlider.Track>\n            {(value || defaultValue).map((_, index) => (\n                <RadixSlider.Thumb\n                    ref={sliderThumbRef}\n                    className={styles.thumb}\n                    onPointerDown={(event) => {\n                        event.currentTarget.dataset.showFocusRing = 'false';\n                    }}\n                    onBlur={(event) => {\n                        event.currentTarget.dataset.showFocusRing = 'true';\n                    }}\n                    key={index}\n                />\n            ))}\n        </RadixSlider.Root>\n    );\n};\n\nexport const Slider = forwardRef<HTMLButtonElement, SliderProps>(SliderComponent);\nSlider.displayName = 'Slider';\n"],"names":["SliderComponent","value","defaultValue","onChange","onCommit","dataTestId","props","ref","sliderThumbRef","useRef","jsxs","RadixSlider","styles","jsx","_","index","event","Slider","forwardRef"],"mappings":";;;;AAqDA,MAAMA,IAAkB,CACpB;AAAA,EACI,OAAAC;AAAA,EACA,cAAAC,IAAe,CAAC,CAAC;AAAA,EACjB,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAiBC,EAA+B,IAAI;AAEtD,SAAA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACG,KAAAJ;AAAA,MACA,WAAWK,EAAO;AAAA,MAClB,OAAAX;AAAA,MACA,cAAAC;AAAA,MACA,eAAeC;AAAA,MACf,eAAeC;AAAA,MACf,gBAAcC;AAAA,MACb,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACG,eAAe,MAAM;AACjB,cAAIH,EAAe,YACAA,EAAA,QAAQ,QAAQ,gBAAgB;AAAA,YAEvD;AAAA,YACA,WAAWI,EAAO;AAAA,YAElB,4BAACD,EAAY,OAAZ,EAAkB,WAAWC,EAAO,MAAO,CAAA;AAAA,UAAA;AAAA,QAChD;AAAA,SACEX,KAASC,GAAc,IAAI,CAACY,GAAGC,MAC7B,gBAAAF;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACG,KAAKH;AAAA,YACL,WAAWI,EAAO;AAAA,YAClB,eAAe,CAACI,MAAU;AAChB,cAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,YAChD;AAAA,YACA,QAAQ,CAACA,MAAU;AACT,cAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAChD;AAAA,UACKD;AAAA,QAEZ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACL;AAER,GAEaE,IAASC,EAA2ClB,CAAe;AAChFiB,EAAO,cAAc;"}

package/dist/fondue-components20.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components20.js","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { type FormEvent, type ForwardedRef, forwardRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/switch.module.scss';\n\ntype SwitchProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The size of the switch component.\n     * @default medium\n     */\n    size?: 'small' | 'medium' | 'large';\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     * @default false\n     */\n    value?: boolean;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     * @default false\n     */\n    defaultValue?: boolean;\n    /**\n     * Disables the select component.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Whether the switch is required.\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Callback function that is called when the switch is toggled.\n     * @param checked - The new checked state of the switch\n     */\n    onChange?: (checked: boolean) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     * @param event - The event object\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     * @param event - The event object\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nconst SwitchComponent = (\n    {\n        value,\n        defaultValue,\n        size = 'medium',\n        onChange,\n        'data-test-id': dataTestId = 'fondue-switch',\n        'aria-label': ariaLabel = 'Switch',\n        ...props\n    }: SwitchProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <RadixSwitch.Root\n        ref={ref}\n        checked={value}\n        defaultChecked={defaultValue}\n        className={cn([styles.root, styles[size]])}\n        onCheckedChange={onChange}\n        aria-label={ariaLabel}\n        data-test-id={dataTestId}\n        {...props}\n    >\n        <RadixSwitch.Thumb className={styles.thumb} />\n    </RadixSwitch.Root>\n);\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(SwitchComponent);\nSwitch.displayName = 'Switch';\n"],"names":["SwitchComponent","value","defaultValue","size","onChange","dataTestId","ariaLabel","props","ref","jsx","RadixSwitch","cn","styles","Switch","forwardRef"],"mappings":";;;;;AAwDA,MAAMA,IAAkB,CACpB;AAAA,EACI,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,cAAcC,IAAY;AAAA,EAC1B,GAAGC;AACP,GACAC,MAEA,gBAAAC;AAAA,EAACC,EAAY;AAAA,EAAZ;AAAA,IACG,KAAAF;AAAA,IACA,SAASP;AAAA,IACT,gBAAgBC;AAAA,IAChB,WAAWS,EAAG,CAACC,EAAO,MAAMA,EAAOT,CAAI,CAAC,CAAC;AAAA,IACzC,iBAAiBC;AAAA,IACjB,cAAYE;AAAA,IACZ,gBAAcD;AAAA,IACb,GAAGE;AAAA,IAEJ,4BAACG,EAAY,OAAZ,EAAkB,WAAWE,EAAO,OAAO;AAAA,EAAA;AAChD,GAGSC,IAASC,EAA2Cd,CAAe;AAChFa,EAAO,cAAc;"}
+{"version":3,"file":"fondue-components20.js","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { type FormEvent, type ForwardedRef, forwardRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/switch.module.scss';\n\ntype SwitchProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The size of the switch component.\n     * @default medium\n     */\n    size?: 'small' | 'medium' | 'large';\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     * @default false\n     */\n    value?: boolean;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     * @default false\n     */\n    defaultValue?: boolean;\n    /**\n     * Disables the select component.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Whether the switch is required.\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Callback function that is called when the switch is toggled.\n     * @param checked - The new checked state of the switch\n     */\n    onChange?: (checked: boolean) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     * @param event - The event object\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     * @param event - The event object\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nconst SwitchComponent = (\n    {\n        value,\n        defaultValue,\n        size = 'medium',\n        onChange,\n        'data-test-id': dataTestId = 'fondue-switch',\n        'aria-label': ariaLabel = 'Switch',\n        ...props\n    }: SwitchProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <RadixSwitch.Root\n        ref={ref}\n        checked={value}\n        defaultChecked={defaultValue}\n        className={cn([styles.root, styles[size]])}\n        onCheckedChange={onChange}\n        aria-label={ariaLabel}\n        data-test-id={dataTestId}\n        {...props}\n    >\n        <RadixSwitch.Thumb className={styles.thumb} />\n    </RadixSwitch.Root>\n);\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(SwitchComponent);\nSwitch.displayName = 'Switch';\n"],"names":["SwitchComponent","value","defaultValue","size","onChange","dataTestId","ariaLabel","props","ref","jsx","RadixSwitch","cn","styles","Switch","forwardRef"],"mappings":";;;;;AAwDA,MAAMA,IAAkB,CACpB;AAAA,EACI,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,cAAcC,IAAY;AAAA,EAC1B,GAAGC;AACP,GACAC,MAEA,gBAAAC;AAAA,EAACC,EAAY;AAAA,EAAZ;AAAA,IACG,KAAAF;AAAA,IACA,SAASP;AAAA,IACT,gBAAgBC;AAAA,IAChB,WAAWS,EAAG,CAACC,EAAO,MAAMA,EAAOT,CAAI,CAAC,CAAC;AAAA,IACzC,iBAAiBC;AAAA,IACjB,cAAYE;AAAA,IACZ,gBAAcD;AAAA,IACb,GAAGE;AAAA,IAEJ,4BAACG,EAAY,OAAZ,EAAkB,WAAWE,EAAO,MAAO,CAAA;AAAA,EAAA;AAChD,GAGSC,IAASC,EAA2Cd,CAAe;AAChFa,EAAO,cAAc;"}

package/dist/fondue-components21.js

@@ -1,13 +1,13 @@
-import { jsx as a, jsxs as T } from "react/jsx-runtime";
-import { createContext as x, forwardRef as l, useCallback as j, createElement as N, useContext as b, useRef as A, useEffect as D } from "react";
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import { createContext as x, forwardRef as i, useCallback as j, createElement as N, useContext as T, useRef as A, useEffect as D } from "react";
 import { IconDotsHorizontal as E } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-tabs";
 import { useControllableState as O } from "./fondue-components47.js";
 import { Button as V } from "./fondue-components4.js";
-import { Dropdown as i } from "./fondue-components9.js";
+import { Dropdown as l } from "./fondue-components9.js";
 import { useTabTriggers as q } from "./fondue-components57.js";
 import r from "./fondue-components58.js";
-const f = x({
+const b = x({
   value: "",
   disabled: !1
 }), w = x({
@@ -22,29 +22,29 @@ const f = x({
   ...m
 }, u) => {
   var R;
-  const [v, g] = O({
+  const [f, v] = O({
     prop: o,
     defaultProp: s,
     onChange: n
-  }), C = j(
+  }), g = j(
     (e) => {
-      g(e);
+      v(e);
     },
-    [g]
-  ), { triggerListRef: k, activeIndicatorRef: P, triggers: p, triggersOutOfView: h, addTrigger: S } = q({
-    activeTab: v
+    [v]
+  ), { triggerListRef: k, activeIndicatorRef: P, triggers: C, triggersOutOfView: h, addTrigger: S } = q({
+    activeTab: f
   });
-  return console.log(p), /* @__PURE__ */ a(w.Provider, { value: { addTrigger: S }, children: /* @__PURE__ */ T(
+  return /* @__PURE__ */ a(w.Provider, { value: { addTrigger: S }, children: /* @__PURE__ */ p(
     d.Root,
     {
       ref: u,
       className: r.root,
-      onValueChange: C,
-      value: v ?? ((R = p[0]) == null ? void 0 : R.value),
+      onValueChange: g,
+      value: f ?? ((R = C[0]) == null ? void 0 : R.value),
       ...m,
       children: [
-        /* @__PURE__ */ T("div", { className: r.triggerListWrapper, children: [
-          /* @__PURE__ */ a(d.List, { ref: k, "data-size": c, className: r.triggerList, children: p.map((e) => /* @__PURE__ */ N(
+        /* @__PURE__ */ p("div", { className: r.triggerListWrapper, children: [
+          /* @__PURE__ */ a(d.List, { ref: k, "data-size": c, className: r.triggerList, children: C.map((e) => /* @__PURE__ */ N(
             d.Trigger,
             {
               ...e.props,
@@ -56,14 +56,14 @@ const f = x({
             },
             e.element
           )) }),
-          /* @__PURE__ */ T(i.Root, { children: [
-            h.length > 0 && /* @__PURE__ */ a(i.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ a(V, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ a(E, { size: 16 }) }) }),
-            /* @__PURE__ */ a(i.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: h.map((e) => /* @__PURE__ */ N(
-              i.Item,
+          /* @__PURE__ */ p(l.Root, { children: [
+            h.length > 0 && /* @__PURE__ */ a(l.Trigger, { "data-test-id": "overflow-items-dropdown-trigger", children: /* @__PURE__ */ a(V, { emphasis: "default", aspect: "square", size: "small", children: /* @__PURE__ */ a(E, { size: 16 }) }) }),
+            /* @__PURE__ */ a(l.Content, { align: "end", "data-test-id": "overflow-items-dropdown-content", children: h.map((e) => /* @__PURE__ */ N(
+              l.Item,
               {
                 ...e.props,
                 disabled: e.disabled,
-                onSelect: () => C(e.value),
+                onSelect: () => g(e.value),
                 key: e.value
               },
               e.element
@@ -84,10 +84,10 @@ const f = x({
   ) });
 };
 y.displayName = "Tabs.Root";
-const z = ({ children: t, value: o, disabled: s }) => /* @__PURE__ */ a(f.Provider, { value: { value: o, disabled: s }, children: t });
+const z = ({ children: t, value: o, disabled: s }) => /* @__PURE__ */ a(b.Provider, { value: { value: o, disabled: s }, children: t });
 z.displayName = "Tabs.Tab";
 const I = ({ children: t, ...o }, s) => {
-  const { value: n, disabled: c } = b(f), { addTrigger: m } = b(w), u = A(null);
+  const { value: n, disabled: c } = T(b), { addTrigger: m } = T(w), u = A(null);
   return D(() => {
     m({
       ref: u || s,
@@ -100,15 +100,15 @@ const I = ({ children: t, ...o }, s) => {
 };
 I.displayName = "Tabs.Trigger";
 const L = ({ children: t, ...o }, s) => {
-  const { value: n } = b(f);
+  const { value: n } = T(b);
   return /* @__PURE__ */ a(d.Content, { ref: s, ...o, className: r.content, value: n ?? "", children: t });
 };
 L.displayName = "Tabs.Content";
 const Q = {
-  Root: l(y),
-  Tab: l(z),
-  Trigger: l(I),
-  Content: l(L)
+  Root: i(y),
+  Tab: i(z),
+  Trigger: i(I),
+  Content: i(L)
 };
 export {
   Q as Tabs,

package/dist/fondue-components21.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components21.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     * 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        children,\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        onActiveTabChange,\n        size = 'medium',\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    console.log(triggers);\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                {...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","children","propsActiveTab","defaultActiveTab","onActiveTabChange","size","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-components21.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     * 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        children,\n        activeTab: propsActiveTab,\n        defaultActiveTab,\n        onActiveTabChange,\n        size = 'medium',\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                {...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","children","propsActiveTab","defaultActiveTab","onActiveTabChange","size","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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"}