@frontify/fondue-components 5.1.0 → 5.1.2

package/dist/fondue-components10.js

@@ -1,22 +1,36 @@
-import { jsx as r } from "react/jsx-runtime";
-import { propsToCssVariables as a } from "./fondue-components24.js";
-import i from "./fondue-components41.js";
-const l = ({
-  as: t = "div",
-  "data-test-id": s = "fondue-flex",
-  children: e,
-  ...o
-}) => /* @__PURE__ */ r(
-  t,
+import { jsx as n } from "react/jsx-runtime";
+import { propsToCssVariables as y } from "./fondue-components24.js";
+import m from "./fondue-components41.js";
+const f = ({
+  as: a = "div",
+  "data-test-id": e = "fondue-flex",
+  children: i,
+  role: r,
+  "aria-label": d,
+  "aria-hidden": s,
+  "aria-describedby": t,
+  "aria-labelledby": l,
+  "aria-expanded": o,
+  "aria-haspopup": p,
+  ...b
+}) => /* @__PURE__ */ n(
+  a,
   {
-    className: i.root,
-    "data-test-id": s,
-    style: a(o, { justify: "justify-content" }),
-    children: e
+    className: m.root,
+    "data-test-id": e,
+    style: y(b, { justify: "justify-content" }),
+    role: r,
+    "aria-label": d,
+    "aria-hidden": s,
+    "aria-describedby": t,
+    "aria-labelledby": l,
+    "aria-expanded": o,
+    "aria-haspopup": p,
+    children: i
   }
 );
-l.displayName = "Flex";
+f.displayName = "Flex";
 export {
-  l as Flex
+  f as Flex
 };
 //# sourceMappingURL=fondue-components10.js.map

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;AACL;AAGRH,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    role,\n    'aria-label': ariaLabel,\n    'aria-hidden': ariaHidden,\n    'aria-describedby': ariaDescribedBy,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\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            role={role}\n            aria-label={ariaLabel}\n            aria-hidden={ariaHidden}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy}\n            aria-expanded={ariaExpanded}\n            aria-haspopup={ariaHasPopup}\n        >\n            {children}\n        </Component>\n    );\n};\nFlex.displayName = 'Flex';\n"],"names":["Flex","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","jsx","styles","propsToCssVariables"],"mappings":";;;AAuDO,MAAMA,IAAO,CAAC;AAAA,EACjB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,eAAeC;AAAA,EACf,oBAAoBC;AAAA,EACpB,mBAAmBC;AAAA,EACnB,iBAAiBC;AAAA,EACjB,iBAAiBC;AAAA,EACjB,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACX;AAAA,EAAA;AAAA,IACG,WAAWY,EAAO;AAAA,IAClB,gBAAcX;AAAA,IACd,OAAOY,EAAoBH,GAAO,EAAE,SAAS,mBAAmB;AAAA,IAChE,MAAAP;AAAA,IACA,cAAYC;AAAA,IACZ,eAAaC;AAAA,IACb,oBAAkBC;AAAA,IAClB,mBAAiBC;AAAA,IACjB,iBAAeC;AAAA,IACf,iBAAeC;AAAA,IAEd,UAAAP;AAAA,EAAA;AACL;AAGRH,EAAK,cAAc;"}

package/dist/fondue-components11.js

@@ -3,11 +3,11 @@ 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 { addAutoFocusAttribute as H, syncRefs as c, addShowFocusRing as P } from "./fondue-components36.js";
 import u from "./fondue-components42.js";
-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" }, d) => /* @__PURE__ */ a(
+const y = ({ children: t, ...o }) => /* @__PURE__ */ a(r.Root, { ...o, children: t });
+y.displayName = "Flyout.Root";
+const f = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...d }, n) => /* @__PURE__ */ a(
   r.Trigger,
   {
     onMouseDown: H,
@@ -15,39 +15,40 @@ const y = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-tr
     "data-auto-focus-trigger": !0,
     "data-test-id": e,
     asChild: t,
-    ref: d,
+    ref: n,
+    ...d,
     children: o
   }
 );
-y.displayName = "Flyout.Trigger";
-const f = ({
+f.displayName = "Flyout.Trigger";
+const m = ({
   align: t = "start",
   maxWidth: o = "360px",
   padding: e = "compact",
   rounded: d = "medium",
-  width: g = "fit-content",
+  width: n = "fit-content",
   shadow: N = "medium",
   "data-test-id": h = "fondue-flyout-content",
   children: R,
   ...v
-}, n) => {
+}, l) => {
   const i = b(null), { setMaxHeight: w } = A(i);
   return /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(
     r.Content,
     {
       style: {
         "--flyout-max-width": o,
-        "--flyout-width": g
+        "--flyout-width": n
       },
       ref: i,
       align: t,
       collisionPadding: 8,
       sideOffset: 8,
       onOpenAutoFocus: () => {
-        w(), l(i, n);
+        w(), c(i, l);
       },
       onCloseAutoFocus: () => {
-        l(i, n);
+        c(i, l);
       },
       className: u.root,
       "data-flyout-spacing": e,
@@ -60,31 +61,31 @@ const f = ({
     }
   ) });
 };
-f.displayName = "Flyout.Content";
-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: [
+m.displayName = "Flyout.Content";
+const p = ({ 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(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";
+p.displayName = "Flyout.Header";
+const F = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: u.footer, children: t });
+F.displayName = "Flyout.Footer";
+const g = ({ 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 });
+g.displayName = "Flyout.Body";
 const z = {
-  Root: c,
-  Trigger: s(y),
-  Content: s(f),
-  Header: s(m),
-  Footer: s(p),
-  Body: s(F)
+  Root: y,
+  Trigger: s(f),
+  Content: s(m),
+  Header: s(p),
+  Footer: s(F),
+  Body: s(g)
 };
 export {
   z as Flyout,
-  F as FlyoutBody,
-  f as FlyoutContent,
-  p as FlyoutFooter,
-  m as FlyoutHeader,
-  c as FlyoutRoot,
-  y as FlyoutTrigger
+  g as FlyoutBody,
+  m as FlyoutContent,
+  F as FlyoutFooter,
+  p as FlyoutHeader,
+  y as FlyoutRoot,
+  f as FlyoutTrigger
 };
 //# sourceMappingURL=fondue-components11.js.map

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 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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"}
+{"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', ...props }: 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            {...props}\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":";;;;;;;AA6BO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,GAAS;AAEnDD,EAAW,cAAc;AAYlB,MAAMI,IAAgB,CACzB,EAAE,SAAAC,IAAU,IAAM,UAAAJ,GAAU,gBAAgBK,IAAa,yBAAyB,GAAGJ,EAAM,GAC3FK,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,IACC,GAAGL;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;AAGRG,EAAc,cAAc;AA0CrB,MAAMM,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAgBV,IAAa;AAAA,EAC7B,UAAAL;AAAA,EACA,GAAGC;AACP,GACAK,MACC;AACK,QAAAU,IAAWC,EAAO,IAAI,GAEtB,EAAE,cAAAC,EAAA,IAAiBC,EAA2BH,CAAQ;AAGxD,SAAA,gBAAAT,EAACL,EAAa,QAAb,EACG,UAAA,gBAAAK;AAAA,IAACL,EAAa;AAAA,IAAb;AAAA,MACG,OACI;AAAA,QACI,sBAAsBS;AAAA,QACtB,kBAAkBG;AAAA,MACtB;AAAA,MAEJ,KAAKE;AAAA,MACL,OAAAN;AAAA,MACA,kBAAkB;AAAA,MAClB,YAAY;AAAA,MACZ,iBAAiB,MAAM;AACN,QAAAQ,EAAA,GACbE,EAASJ,GAAUV,CAAG;AAAA,MAC1B;AAAA,MACA,kBAAkB,MAAM;AACpB,QAAAc,EAASJ,GAAUV,CAAG;AAAA,MAC1B;AAAA,MACA,WAAWe,EAAO;AAAA,MAClB,uBAAqBT;AAAA,MACrB,gBAAcC;AAAA,MACd,eAAaE;AAAA,MACb,gBAAcV;AAAA,MACd,SAASiB;AAAA,MACR,GAAGrB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA,GAET;AAER;AACAS,EAAc,cAAc;AAYf,MAAAc,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAAxB,GAAU,gBAAgBK,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWe,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAd,EAAC,SAAK,UAAAP,GAAS;AAAA,EACdwB,KACI,gBAAAjB,EAAAL,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGG,CAAU,UAAU,WAAWgB,EAAO,OACrF,4BAACI,GAAU,EAAA,MAAM,IAAI,EACzB,CAAA;AAAA,GAER;AAGRF,EAAa,cAAc;AAId,MAAAG,IAAe,CACxB,EAAE,UAAA1B,GAAU,gBAAgBK,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWe,EAAO,QACtD,UAAArB,GACL;AAGR0B,EAAa,cAAc;AAId,MAAAC,IAAa,CACtB,EAAE,UAAA3B,GAAU,gBAAgBK,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWe,EAAO,MACpF,UAAArB,EACL,CAAA;AAGR2B,EAAW,cAAc;AAElB,MAAMC,IAAS;AAAA,EAClB,MAAM7B;AAAA,EACN,SAAS8B,EAAkD1B,CAAa;AAAA,EACxE,SAAS0B,EAA+CpB,CAAa;AAAA,EACrE,QAAQoB,EAA8CN,CAAY;AAAA,EAClE,QAAQM,EAA8CH,CAAY;AAAA,EAClE,MAAMG,EAA4CF,CAAU;AAChE;"}

package/dist/fondue-components12.js

@@ -1,22 +1,36 @@
-import { jsx as o } from "react/jsx-runtime";
-import { propsToCssVariables as a } from "./fondue-components24.js";
-import e from "./fondue-components43.js";
-const d = ({
-  as: s = "div",
-  "data-test-id": t = "fondue-grid",
+import { jsx as m } from "react/jsx-runtime";
+import { propsToCssVariables as y } from "./fondue-components24.js";
+import n from "./fondue-components43.js";
+const f = ({
+  as: a = "div",
+  "data-test-id": i = "fondue-grid",
   children: r,
-  ...i
-}) => /* @__PURE__ */ o(
-  s,
+  role: e,
+  "aria-label": d,
+  "aria-hidden": s,
+  "aria-describedby": t,
+  "aria-labelledby": l,
+  "aria-expanded": o,
+  "aria-haspopup": p,
+  ...b
+}) => /* @__PURE__ */ m(
+  a,
   {
-    className: e.root,
-    "data-test-id": t,
-    style: a(i, { justify: "justify-items" }),
+    className: n.root,
+    "data-test-id": i,
+    style: y(b, { justify: "justify-items" }),
+    role: e,
+    "aria-label": d,
+    "aria-hidden": s,
+    "aria-describedby": t,
+    "aria-labelledby": l,
+    "aria-expanded": o,
+    "aria-haspopup": p,
     children: r
   }
 );
-d.displayName = "Grid";
+f.displayName = "Grid";
 export {
-  d as Grid
+  f as Grid
 };
 //# sourceMappingURL=fondue-components12.js.map

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;AACL;AAGRH,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    role,\n    'aria-label': ariaLabel,\n    'aria-hidden': ariaHidden,\n    'aria-describedby': ariaDescribedBy,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\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            role={role}\n            aria-label={ariaLabel}\n            aria-hidden={ariaHidden}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy}\n            aria-expanded={ariaExpanded}\n            aria-haspopup={ariaHasPopup}\n        >\n            {children}\n        </Component>\n    );\n};\nGrid.displayName = 'Grid';\n"],"names":["Grid","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","jsx","styles","propsToCssVariables"],"mappings":";;;AA2DO,MAAMA,IAAO,CAAC;AAAA,EACjB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,eAAeC;AAAA,EACf,oBAAoBC;AAAA,EACpB,mBAAmBC;AAAA,EACnB,iBAAiBC;AAAA,EACjB,iBAAiBC;AAAA,EACjB,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACX;AAAA,EAAA;AAAA,IACG,WAAWY,EAAO;AAAA,IAClB,gBAAcX;AAAA,IACd,OAAOY,EAAoBH,GAAO,EAAE,SAAS,iBAAiB;AAAA,IAC9D,MAAAP;AAAA,IACA,cAAYC;AAAA,IACZ,eAAaC;AAAA,IACb,oBAAkBC;AAAA,IAClB,mBAAiBC;AAAA,IACjB,iBAAeC;AAAA,IACf,iBAAeC;AAAA,IAEd,UAAAP;AAAA,EAAA;AACL;AAGRH,EAAK,cAAc;"}

package/dist/fondue-components16.js

@@ -1,9 +1,35 @@
-import { jsx as e } from "react/jsx-runtime";
-import { propsToCssVariables as r } from "./fondue-components24.js";
-import i from "./fondue-components46.js";
-const a = ({ "data-test-id": t = "fondue-section", children: o, ...s }) => /* @__PURE__ */ e("section", { className: i.root, "data-test-id": t, style: r(s), children: o });
-a.displayName = "Section";
+import { jsx as b } from "react/jsx-runtime";
+import { propsToCssVariables as n } from "./fondue-components24.js";
+import c from "./fondue-components46.js";
+const m = ({
+  "data-test-id": a = "fondue-section",
+  children: e,
+  role: i,
+  "aria-label": r,
+  "aria-hidden": d,
+  "aria-describedby": s,
+  "aria-labelledby": o,
+  "aria-expanded": t,
+  "aria-haspopup": l,
+  ...p
+}) => /* @__PURE__ */ b(
+  "section",
+  {
+    className: c.root,
+    "data-test-id": a,
+    style: n(p),
+    role: i,
+    "aria-label": r,
+    "aria-hidden": d,
+    "aria-describedby": s,
+    "aria-labelledby": o,
+    "aria-expanded": t,
+    "aria-haspopup": l,
+    children: e
+  }
+);
+m.displayName = "Section";
 export {
-  a as Section
+  m as Section
 };
 //# sourceMappingURL=fondue-components16.js.map

package/dist/fondue-components16.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components16.js","sources":["../src/components/Section/Section.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 LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/section.module.scss';\n\nexport type SectionProps = LayoutComponentProps & {\n    /**\n     * The display property.\n     * @default 'block'\n     */\n    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Section = ({ 'data-test-id': dataTestId = 'fondue-section', children, ...props }: SectionProps) => {\n    return (\n        <section className={styles.root} data-test-id={dataTestId} style={propsToCssVariables(props)}>\n            {children}\n        </section>\n    );\n};\nSection.displayName = 'Section';\n"],"names":["Section","dataTestId","children","props","jsx","styles","propsToCssVariables"],"mappings":";;;AAqBa,MAAAA,IAAU,CAAC,EAAE,gBAAgBC,IAAa,kBAAkB,UAAAC,GAAU,GAAGC,QAE9E,gBAAAC,EAAC,WAAQ,EAAA,WAAWC,EAAO,MAAM,gBAAcJ,GAAY,OAAOK,EAAoBH,CAAK,GACtF,UAAAD,EACL,CAAA;AAGRF,EAAQ,cAAc;"}
+{"version":3,"file":"fondue-components16.js","sources":["../src/components/Section/Section.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 LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/section.module.scss';\n\nexport type SectionProps = LayoutComponentProps & {\n    /**\n     * The display property.\n     * @default 'block'\n     */\n    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Section = ({\n    'data-test-id': dataTestId = 'fondue-section',\n    children,\n    role,\n    'aria-label': ariaLabel,\n    'aria-hidden': ariaHidden,\n    'aria-describedby': ariaDescribedBy,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    ...props\n}: SectionProps) => {\n    return (\n        <section\n            className={styles.root}\n            data-test-id={dataTestId}\n            style={propsToCssVariables(props)}\n            role={role}\n            aria-label={ariaLabel}\n            aria-hidden={ariaHidden}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy}\n            aria-expanded={ariaExpanded}\n            aria-haspopup={ariaHasPopup}\n        >\n            {children}\n        </section>\n    );\n};\nSection.displayName = 'Section';\n"],"names":["Section","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","jsx","styles","propsToCssVariables"],"mappings":";;;AAqBO,MAAMA,IAAU,CAAC;AAAA,EACpB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,eAAeC;AAAA,EACf,oBAAoBC;AAAA,EACpB,mBAAmBC;AAAA,EACnB,iBAAiBC;AAAA,EACjB,iBAAiBC;AAAA,EACjB,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAO;AAAA,IAClB,gBAAcX;AAAA,IACd,OAAOY,EAAoBH,CAAK;AAAA,IAChC,MAAAP;AAAA,IACA,cAAYC;AAAA,IACZ,eAAaC;AAAA,IACb,oBAAkBC;AAAA,IAClB,mBAAiBC;AAAA,IACjB,iBAAeC;AAAA,IACf,iBAAeC;AAAA,IAEd,UAAAP;AAAA,EAAA;AACL;AAGRF,EAAQ,cAAc;"}

package/dist/fondue-components23.js

@@ -1,25 +1,25 @@
 import { jsx as a, jsxs as g } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-tooltip";
-import { forwardRef as s } from "react";
+import { forwardRef as n } from "react";
 import { cn as T } from "./fondue-components26.js";
-import n from "./fondue-components60.js";
-const d = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: e }) => /* @__PURE__ */ a(o.Provider, { children: /* @__PURE__ */ a(o.Root, { delayDuration: r, open: i, onOpenChange: e, children: t }) });
-d.displayName = "Tooltip.Root";
-const l = ({ asChild: t = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, e) => /* @__PURE__ */ a(o.Trigger, { "data-test-id": i, asChild: t, ref: e, children: r });
-l.displayName = "Tooltip.Trigger";
-const p = ({
+import d from "./fondue-components60.js";
+const l = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: e, ...s }) => /* @__PURE__ */ a(o.Provider, { children: /* @__PURE__ */ a(o.Root, { delayDuration: r, open: i, onOpenChange: e, ...s, children: t }) });
+l.displayName = "Tooltip.Root";
+const p = ({ asChild: t = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, e) => /* @__PURE__ */ a(o.Trigger, { "data-test-id": i, asChild: t, ref: e, children: r });
+p.displayName = "Tooltip.Trigger";
+const m = ({
   children: t,
   className: r,
   maxWidth: i,
   "data-test-id": e = "fondue-tooltip-content",
-  padding: m = "spacious",
+  padding: s = "spacious",
   ...c
 }, f) => /* @__PURE__ */ a(o.Portal, { children: /* @__PURE__ */ g(
   o.Content,
   {
     "data-test-id": e,
-    "data-tooltip-spacing": m,
-    className: T(n.root, r),
+    "data-tooltip-spacing": s,
+    className: T(d.root, r),
     style: { maxWidth: i },
     collisionPadding: 16,
     sideOffset: 8,
@@ -27,20 +27,20 @@ const p = ({
     ...c,
     children: [
       t,
-      /* @__PURE__ */ a(o.Arrow, { "aria-hidden": "true", className: n.arrow })
+      /* @__PURE__ */ a(o.Arrow, { "aria-hidden": "true", className: d.arrow })
     ]
   }
 ) });
-p.displayName = "Tooltip.Content";
+m.displayName = "Tooltip.Content";
 const h = {
-  Root: d,
-  Trigger: s(l),
-  Content: s(p)
+  Root: l,
+  Trigger: n(p),
+  Content: n(m)
 };
 export {
   h as Tooltip,
-  p as TooltipContent,
-  d as TooltipRoot,
-  l as TooltipTrigger
+  m as TooltipContent,
+  l as TooltipRoot,
+  p as TooltipTrigger
 };
 //# sourceMappingURL=fondue-components23.js.map

package/dist/fondue-components23.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components23.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} asChild={asChild} ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                data-tooltip-spacing={padding}\n                className={cn(styles.root, className)}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n                <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n            </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","props","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;AA0Ba,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,QAEvD,gBAAAC,EAAAC,EAAa,UAAb,EACG,UAAC,gBAAAD,EAAAC,EAAa,MAAb,EAAkB,eAAeJ,GAAY,MAAAC,GAAY,cAAAC,GACrD,UAAAH,EACL,CAAA,GACJ;AAGRD,EAAY,cAAc;AAYb,MAAAO,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAP,GAAU,gBAAgBQ,IAAa,yBAAyB,GACnFC,MAGI,gBAAAL,EAACC,EAAa,SAAb,EAAqB,gBAAcG,GAAY,SAAAD,GAAkB,KAAAE,GAC7D,UAAAT,GACL;AAGRM,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAV;AAAA,EACA,WAAAW;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGC;AACP,GACAL,MAGI,gBAAAL,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAU;AAAA,EAACV,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcG;AAAA,IACd,wBAAsBK;AAAA,IACtB,WAAWG,EAAGC,EAAO,MAAMN,CAAS;AAAA,IACpC,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGK;AAAA,IAEH,UAAA;AAAA,MAAAd;AAAA,MACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWY,EAAO,MAAO,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,GAExE;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMnB;AAAA,EACN,SAASoB,EAAmDb,CAAc;AAAA,EAC1E,SAASa,EAAgDT,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components23.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange, ...props }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange} {...props}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} asChild={asChild} ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                data-tooltip-spacing={padding}\n                className={cn(styles.root, className)}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n                <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n            </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","props","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;AA0Ba,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,GAAc,GAAGC,QAExE,gBAAAC,EAAAC,EAAa,UAAb,EACG,4BAACA,EAAa,MAAb,EAAkB,eAAeL,GAAY,MAAAC,GAAY,cAAAC,GAA6B,GAAGC,GACrF,UAAAJ,EACL,CAAA,GACJ;AAGRD,EAAY,cAAc;AAYb,MAAAQ,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAR,GAAU,gBAAgBS,IAAa,yBAAyB,GACnFC,MAGI,gBAAAL,EAACC,EAAa,SAAb,EAAqB,gBAAcG,GAAY,SAAAD,GAAkB,KAAAE,GAC7D,UAAAV,GACL;AAGRO,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAX;AAAA,EACA,WAAAY;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGV;AACP,GACAM,MAGI,gBAAAL,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAS;AAAA,EAACT,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcG;AAAA,IACd,wBAAsBK;AAAA,IACtB,WAAWE,EAAGC,EAAO,MAAML,CAAS;AAAA,IACpC,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGN;AAAA,IAEH,UAAA;AAAA,MAAAJ;AAAA,MACD,gBAAAK,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWW,EAAO,MAAO,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,GAExE;AAGRN,EAAe,cAAc;AAEtB,MAAMO,IAAU;AAAA,EACnB,MAAMnB;AAAA,EACN,SAASoB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDR,CAAc;AAC3E;"}

package/dist/fondue-components3.js

@@ -1,14 +1,36 @@
-import { jsx as r } from "react/jsx-runtime";
-import { propsToCssVariables as e } from "./fondue-components24.js";
-import i from "./fondue-components25.js";
-const m = ({
-  as: t = "div",
-  "data-test-id": s = "fondue-box",
-  children: a,
-  ...o
-}) => /* @__PURE__ */ r(t, { className: i.root, "data-test-id": s, ...o, style: e(o), children: a });
-m.displayName = "Box";
+import { jsx as m } from "react/jsx-runtime";
+import { propsToCssVariables as n } from "./fondue-components24.js";
+import x from "./fondue-components25.js";
+const y = ({
+  as: a = "div",
+  "data-test-id": e = "fondue-box",
+  children: r,
+  role: i,
+  "aria-label": d,
+  "aria-hidden": s,
+  "aria-describedby": o,
+  "aria-labelledby": l,
+  "aria-expanded": p,
+  "aria-haspopup": t,
+  ...b
+}) => /* @__PURE__ */ m(
+  a,
+  {
+    className: x.root,
+    "data-test-id": e,
+    style: n(b),
+    role: i,
+    "aria-label": d,
+    "aria-hidden": s,
+    "aria-describedby": o,
+    "aria-labelledby": l,
+    "aria-expanded": p,
+    "aria-haspopup": t,
+    children: r
+  }
+);
+y.displayName = "Box";
 export {
-  m as Box
+  y as Box
 };
 //# sourceMappingURL=fondue-components3.js.map

package/dist/fondue-components3.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components3.js","sources":["../src/components/Box/Box.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 LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/box.module.scss';\n\nexport type BoxProps = LayoutComponentProps & {\n    /**\n     * The element to render the Box component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n    /**\n     * The display property.\n     * @default 'block'\n     */\n    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Box = ({\n    as: Component = 'div',\n    'data-test-id': dataTestId = 'fondue-box',\n    children,\n    ...props\n}: BoxProps) => {\n    return (\n        <Component className={styles.root} data-test-id={dataTestId} {...props} style={propsToCssVariables(props)}>\n            {children}\n        </Component>\n    );\n};\nBox.displayName = 'Box';\n"],"names":["Box","Component","dataTestId","children","props","jsx","styles","propsToCssVariables"],"mappings":";;;AA0BO,MAAMA,IAAM,CAAC;AAAA,EAChB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,GAAGC;AACP,MAES,gBAAAC,EAAAJ,GAAA,EAAU,WAAWK,EAAO,MAAM,gBAAcJ,GAAa,GAAGE,GAAO,OAAOG,EAAoBH,CAAK,GACnG,UAAAD,EACL,CAAA;AAGRH,EAAI,cAAc;"}
+{"version":3,"file":"fondue-components3.js","sources":["../src/components/Box/Box.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 LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/box.module.scss';\n\nexport type BoxProps = LayoutComponentProps & {\n    /**\n     * The element to render the Box component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n    /**\n     * The display property.\n     * @default 'block'\n     */\n    display?: Responsive<'none' | 'block' | 'inline-block' | 'inline'>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Box = ({\n    as: Component = 'div',\n    'data-test-id': dataTestId = 'fondue-box',\n    children,\n    role,\n    'aria-label': ariaLabel,\n    'aria-hidden': ariaHidden,\n    'aria-describedby': ariaDescribedBy,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    ...props\n}: BoxProps) => {\n    return (\n        <Component\n            className={styles.root}\n            data-test-id={dataTestId}\n            style={propsToCssVariables(props)}\n            role={role}\n            aria-label={ariaLabel}\n            aria-hidden={ariaHidden}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={ariaLabelledBy}\n            aria-expanded={ariaExpanded}\n            aria-haspopup={ariaHasPopup}\n        >\n            {children}\n        </Component>\n    );\n};\nBox.displayName = 'Box';\n"],"names":["Box","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","jsx","styles","propsToCssVariables"],"mappings":";;;AA0BO,MAAMA,IAAM,CAAC;AAAA,EAChB,IAAIC,IAAY;AAAA,EAChB,gBAAgBC,IAAa;AAAA,EAC7B,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAcC;AAAA,EACd,eAAeC;AAAA,EACf,oBAAoBC;AAAA,EACpB,mBAAmBC;AAAA,EACnB,iBAAiBC;AAAA,EACjB,iBAAiBC;AAAA,EACjB,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACX;AAAA,EAAA;AAAA,IACG,WAAWY,EAAO;AAAA,IAClB,gBAAcX;AAAA,IACd,OAAOY,EAAoBH,CAAK;AAAA,IAChC,MAAAP;AAAA,IACA,cAAYC;AAAA,IACZ,eAAaC;AAAA,IACb,oBAAkBC;AAAA,IAClB,mBAAiBC;AAAA,IACjB,iBAAeC;AAAA,IACf,iBAAeC;AAAA,IAEd,UAAAP;AAAA,EAAA;AACL;AAGRH,EAAI,cAAc;"}

package/dist/fondue-components32.js

@@ -1,31 +1,40 @@
-import { jsxs as d, jsx as a, Fragment as n } from "react/jsx-runtime";
-import { IconDroplet as p, IconTrashBin as f, IconCaretDown as I } from "@frontify/fondue-icons";
-import { forwardRef as N, useId as h } from "react";
-import i from "./fondue-components62.js";
+import { jsxs as i, jsx as a, Fragment as p } from "react/jsx-runtime";
+import { IconDroplet as h, IconTrashBin as N, IconCaretDown as f } from "@frontify/fondue-icons";
+import { forwardRef as I } from "react";
+import e from "./fondue-components62.js";
 import { colorToCss as b } from "./fondue-components35.js";
-const c = ({ id: t, currentColor: e, onClear: s, "data-test-id": r = "color-picker-input", ...l }, m) => {
-  const o = h();
-  return /* @__PURE__ */ d("div", { id: t, className: i.root, ...l, ref: m, "data-test-id": r, children: [
-    (e == null ? void 0 : e.red) !== void 0 ? /* @__PURE__ */ a(
+const o = ({
+  id: c,
+  currentColor: s,
+  isOpen: d,
+  onClear: t,
+  onClick: l,
+  "data-test-id": r = "color-picker-input",
+  ...n
+}, m) => /* @__PURE__ */ i("div", { id: c, className: e.root, ...n, ref: m, "data-test-id": r, children: [
+  /* @__PURE__ */ i("button", { className: e.button, onClick: l, "data-color-input-select": !0, children: [
+    (s == null ? void 0 : s.red) !== void 0 ? /* @__PURE__ */ a(
       "div",
       {
-        "aria-describedby": o,
-        className: i.colorIndicator,
-        style: { backgroundColor: b(e) }
+        "aria-hidden": !0,
+        className: e.colorIndicator,
+        style: { backgroundColor: b(s) }
       }
-    ) : /* @__PURE__ */ d(n, { children: [
-      /* @__PURE__ */ a(p, { size: 16 }),
+    ) : /* @__PURE__ */ i(p, { children: [
+      /* @__PURE__ */ a(h, { size: 16 }),
       /* @__PURE__ */ a("span", { children: "Select Color" })
     ] }),
-    /* @__PURE__ */ a("span", { id: o, className: i.colorName, children: e == null ? void 0 : e.name }),
-    s && /* @__PURE__ */ a("button", { type: "button", "aria-label": "Clear color", onClick: s, className: i.clear, children: /* @__PURE__ */ a(f, { size: 16 }) }),
-    /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(I, { size: 16, className: i.caret }) })
-  ] });
-};
-c.displayName = "ColorPicker.Input";
-const z = N(c);
+    /* @__PURE__ */ a("span", { className: e.colorName, children: s == null ? void 0 : s.name })
+  ] }),
+  /* @__PURE__ */ i("div", { className: e.actions, children: [
+    t && /* @__PURE__ */ a("button", { type: "button", "aria-label": "Clear color", onClick: t, className: e.clear, children: /* @__PURE__ */ a(N, { size: 16 }) }),
+    /* @__PURE__ */ a("div", { className: e.caret, "data-state": d ? "open" : "closed", children: /* @__PURE__ */ a(f, { size: 16, className: e.caret }) })
+  ] })
+] });
+o.displayName = "ColorPicker.Input";
+const x = I(o);
 export {
-  c as ColorPickerInput,
-  z as ForwardedRefColorPickerInput
+  o as ColorPickerInput,
+  x as ForwardedRefColorPickerInput
 };
 //# sourceMappingURL=fondue-components32.js.map

package/dist/fondue-components32.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components32.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconDroplet, IconTrashBin } from '@frontify/fondue-icons';\nimport { type ForwardedRef, forwardRef, useId } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss } from './utils';\n\ntype ColorPickerInputProps = {\n    id?: string;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * The open state of the color picker used to dermine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    { id, currentColor, onClear, 'data-test-id': dataTestId = 'color-picker-input', ...props }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const colorNameId = useId();\n\n    return (\n        <div id={id} className={styles.root} {...props} ref={forwardedRef} data-test-id={dataTestId}>\n            {currentColor?.red !== undefined ? (\n                <div\n                    aria-describedby={colorNameId}\n                    className={styles.colorIndicator}\n                    style={{ backgroundColor: colorToCss(currentColor) }}\n                />\n            ) : (\n                <>\n                    <IconDroplet size={16} />\n                    <span>Select Color</span>\n                </>\n            )}\n\n            <span id={colorNameId} className={styles.colorName}>\n                {currentColor?.name}\n            </span>\n            {onClear && (\n                <button type=\"button\" aria-label=\"Clear color\" onClick={onClear} className={styles.clear}>\n                    <IconTrashBin size={16} />\n                </button>\n            )}\n            <div>\n                <IconCaretDown size={16} className={styles.caret} />\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","onClear","dataTestId","props","forwardedRef","colorNameId","useId","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconTrashBin","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AA+BO,MAAMA,IAAmB,CAC5B,EAAE,IAAAC,GAAI,cAAAC,GAAc,SAAAC,GAAS,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GACzFC,MACC;AACD,QAAMC,IAAcC,EAAM;AAGtB,SAAA,gBAAAC,EAAC,OAAI,EAAA,IAAAR,GAAQ,WAAWS,EAAO,MAAO,GAAGL,GAAO,KAAKC,GAAc,gBAAcF,GAC5E,UAAA;AAAA,KAAAF,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,oBAAkBJ;AAAA,QAClB,WAAWG,EAAO;AAAA,QAClB,OAAO,EAAE,iBAAiBE,EAAWV,CAAY,EAAE;AAAA,MAAA;AAAA,IAAA,IAInD,gBAAAO,EAAAI,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAF,EAAAG,GAAA,EAAY,MAAM,GAAI,CAAA;AAAA,MACvB,gBAAAH,EAAC,UAAK,UAAY,eAAA,CAAA;AAAA,IAAA,GACtB;AAAA,IAGJ,gBAAAA,EAAC,UAAK,IAAIJ,GAAa,WAAWG,EAAO,WACpC,iCAAc,KACnB,CAAA;AAAA,IACCP,KACI,gBAAAQ,EAAA,UAAA,EAAO,MAAK,UAAS,cAAW,eAAc,SAASR,GAAS,WAAWO,EAAO,OAC/E,UAAA,gBAAAC,EAACI,GAAa,EAAA,MAAM,GAAI,CAAA,GAC5B;AAAA,IAEJ,gBAAAJ,EAAC,SACG,UAAC,gBAAAA,EAAAK,GAAA,EAAc,MAAM,IAAI,WAAWN,EAAO,MAAO,CAAA,EACtD,CAAA;AAAA,EAAA,GACJ;AAER;AACAV,EAAiB,cAAc;AAElB,MAAAiB,IAA+BC,EAAkDlB,CAAgB;"}
+{"version":3,"file":"fondue-components32.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconDroplet, IconTrashBin } from '@frontify/fondue-icons';\nimport { type ForwardedRef, forwardRef } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss } from './utils';\n\ntype ColorPickerInputProps = {\n    id?: string;\n    /**\n     * The active color in the color picker\n     */\n    currentColor?: RgbaColor;\n    /**\n     * The open state of the color picker used to dermine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * Event handler called when the color picker input is clicked\n     */\n    onClick?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    {\n        id,\n        currentColor,\n        isOpen,\n        onClear,\n        onClick,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div id={id} className={styles.root} {...props} ref={forwardedRef} data-test-id={dataTestId}>\n            <button className={styles.button} onClick={onClick} data-color-input-select>\n                {currentColor?.red !== undefined ? (\n                    <div\n                        aria-hidden\n                        className={styles.colorIndicator}\n                        style={{ backgroundColor: colorToCss(currentColor) }}\n                    />\n                ) : (\n                    <>\n                        <IconDroplet size={16} />\n                        <span>Select Color</span>\n                    </>\n                )}\n\n                <span className={styles.colorName}>{currentColor?.name}</span>\n            </button>\n            <div className={styles.actions}>\n                {onClear && (\n                    <button type=\"button\" aria-label=\"Clear color\" onClick={onClear} className={styles.clear}>\n                        <IconTrashBin size={16} />\n                    </button>\n                )}\n                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n                    <IconCaretDown size={16} className={styles.caret} />\n                </div>\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","isOpen","onClear","onClick","dataTestId","props","forwardedRef","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconTrashBin","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AAmCO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MAGI,gBAAAC,EAAC,OAAI,EAAA,IAAAR,GAAQ,WAAWS,EAAO,MAAO,GAAGH,GAAO,KAAKC,GAAc,gBAAcF,GAC7E,UAAA;AAAA,EAAA,gBAAAG,EAAC,YAAO,WAAWC,EAAO,QAAQ,SAAAL,GAAkB,2BAAuB,IACtE,UAAA;AAAA,KAAAH,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAWD,EAAO;AAAA,QAClB,OAAO,EAAE,iBAAiBE,EAAWV,CAAY,EAAE;AAAA,MAAA;AAAA,IAAA,IAInD,gBAAAO,EAAAI,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAF,EAAAG,GAAA,EAAY,MAAM,GAAI,CAAA;AAAA,MACvB,gBAAAH,EAAC,UAAK,UAAY,eAAA,CAAA;AAAA,IAAA,GACtB;AAAA,sBAGH,QAAK,EAAA,WAAWD,EAAO,WAAY,iCAAc,KAAK,CAAA;AAAA,EAAA,GAC3D;AAAA,EACC,gBAAAD,EAAA,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,IAAAN,KACI,gBAAAO,EAAA,UAAA,EAAO,MAAK,UAAS,cAAW,eAAc,SAASP,GAAS,WAAWM,EAAO,OAC/E,UAAA,gBAAAC,EAACI,GAAa,EAAA,MAAM,GAAI,CAAA,GAC5B;AAAA,sBAEH,OAAI,EAAA,WAAWL,EAAO,OAAO,cAAYP,IAAS,SAAS,UACxD,UAAA,gBAAAQ,EAACK,KAAc,MAAM,IAAI,WAAWN,EAAO,OAAO,EACtD,CAAA;AAAA,EAAA,EACJ,CAAA;AAAA,GACJ;AAGRV,EAAiB,cAAc;AAElB,MAAAiB,IAA+BC,EAAkDlB,CAAgB;"}