@frontify/fondue-components 3.3.5 → 4.0.0

package/dist/fondue-components11.js

@@ -1,22 +1,22 @@
 import { jsx as a, jsxs as v } 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 x } from "react";
+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-components38.js";
 import { addAutoFocusAttribute as b, syncRefs as n, addShowFocusRing as A } from "./fondue-components35.js";
-import d from "./fondue-components41.js";
-const c = ({ children: t, ...o }) => /* @__PURE__ */ a(r.Root, { ...o, children: t });
+import u from "./fondue-components41.js";
+const c = ({ children: t, ...o }) => /* @__PURE__ */ a(d.Root, { ...o, children: t });
 c.displayName = "Flyout.Root";
-const y = ({ children: t, "data-test-id": o = "fondue-flyout-trigger" }, e) => /* @__PURE__ */ a(
-  r.Trigger,
+const y = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger" }, s) => /* @__PURE__ */ a(
+  d.Trigger,
   {
     onMouseDown: b,
     "data-auto-focus-visible": "true",
     "data-auto-focus-trigger": !0,
-    "data-test-id": o,
-    asChild: !0,
-    ref: e,
-    children: t
+    "data-test-id": e,
+    asChild: t,
+    ref: s,
+    children: o
   }
 );
 y.displayName = "Flyout.Trigger";
@@ -24,32 +24,32 @@ const f = ({
   align: t = "start",
   maxWidth: o = "360px",
   padding: e = "compact",
-  "data-test-id": i = "fondue-flyout-content",
+  "data-test-id": s = "fondue-flyout-content",
   children: g,
   rounded: N,
   ...R
 }, l) => {
-  const u = x(null), { setMaxHeight: h } = w(u);
-  return /* @__PURE__ */ a(r.Portal, { children: /* @__PURE__ */ a(
-    r.Content,
+  const i = C(null), { setMaxHeight: h } = w(i);
+  return /* @__PURE__ */ a(d.Portal, { children: /* @__PURE__ */ a(
+    d.Content,
     {
       style: {
         "--flyout-max-width": o
       },
-      ref: u,
+      ref: i,
       align: t,
       collisionPadding: 8,
       sideOffset: 8,
       onOpenAutoFocus: () => {
-        h(), n(u, l);
+        h(), n(i, l);
       },
       onCloseAutoFocus: () => {
-        n(u, l);
+        n(i, l);
       },
-      className: d.root,
+      className: u.root,
       "data-flyout-spacing": e,
       "data-rounded": N,
-      "data-test-id": i,
+      "data-test-id": s,
       onFocus: A,
       ...R,
       children: g
@@ -57,22 +57,22 @@ const f = ({
   ) });
 };
 f.displayName = "Flyout.Content";
-const m = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, i) => /* @__PURE__ */ v("div", { "data-test-id": e, ref: i, className: d.header, children: [
+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: [
   /* @__PURE__ */ a("div", { children: o }),
-  t && /* @__PURE__ */ a(r.Close, { role: "button", "data-test-id": `${e}-close`, className: d.close, children: /* @__PURE__ */ a(C, { size: 20 }) })
+  t && /* @__PURE__ */ a(d.Close, { role: "button", "data-test-id": `${e}-close`, className: u.close, children: /* @__PURE__ */ a(x, { 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: d.footer, children: t });
+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: d.body, children: t });
+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 = {
   Root: c,
-  Trigger: s(y),
-  Content: s(f),
-  Header: s(m),
-  Footer: s(p),
-  Body: s(F)
+  Trigger: r(y),
+  Content: r(f),
+  Header: r(m),
+  Footer: r(p),
+  Body: r(F)
 };
 export {
   D as Flyout,

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 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 type FlyoutTriggerProps = { children?: ReactNode; 'data-test-id'?: string };\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 type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type FlyoutBodyProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport const FlyoutTrigger = (\n    { 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\n            ref={ref}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\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 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 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 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","dataTestId","ref","jsx","addAutoFocusAttribute","FlyoutContent","align","maxWidth","padding","rounded","localRef","useRef","setMaxHeight","usePreventDropdownOverflow","syncRefs","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":";;;;;;;AA2EO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,EAAS,CAAA;AAEnDD,EAAW,cAAc;AAEZ,MAAAI,IAAgB,CACzB,EAAE,UAAAH,GAAU,gBAAgBI,IAAa,2BACzCC,MAGI,gBAAAC;AAAA,EAACJ,EAAa;AAAA,EAAb;AAAA,IACG,aAAaK;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAO;AAAA,IACP,KAAAC;AAAA,IAEC,UAAAL;AAAA,EAAA;AAAA;AAIbG,EAAc,cAAc;AAErB,MAAMK,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,gBAAgBP,IAAa;AAAA,EAC7B,UAAAJ;AAAA,EACA,SAAAY;AAAA,EACA,GAAGX;AACP,GACAI,MACC;AACK,QAAAQ,IAAWC,EAAO,IAAI,GAEtB,EAAE,cAAAC,EAAA,IAAiBC,EAA2BH,CAAQ;AAGxD,SAAA,gBAAAP,EAACJ,EAAa,QAAb,EACG,UAAA,gBAAAI;AAAA,IAACJ,EAAa;AAAA,IAAb;AAAA,MACG,OACI;AAAA,QACI,sBAAsBQ;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,GAAGlB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAER;AACAQ,EAAc,cAAc;AAEf,MAAAY,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAArB,GAAU,gBAAgBI,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWa,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAZ,EAAC,SAAK,UAAAN,GAAS;AAAA,EACdqB,KACI,gBAAAf,EAAAJ,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGE,CAAU,UAAU,WAAWc,EAAO,OACrF,4BAACI,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAER,EAAA,CAAA;AAGRF,EAAa,cAAc;AAEd,MAAAG,IAAe,CACxB,EAAE,UAAAvB,GAAU,gBAAgBI,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWa,EAAO,QACtD,UAAAlB,EACL,CAAA;AAGRuB,EAAa,cAAc;AAEd,MAAAC,IAAa,CACtB,EAAE,UAAAxB,GAAU,gBAAgBI,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWa,EAAO,MACpF,UAAAlB,EACL,CAAA;AAGRwB,EAAW,cAAc;AAElB,MAAMC,IAAS;AAAA,EAClB,MAAM1B;AAAA,EACN,SAAS2B,EAAkDvB,CAAa;AAAA,EACxE,SAASuB,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 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;"}

package/dist/fondue-components18.js

@@ -1,15 +1,15 @@
 import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import { IconCaretDown as z, IconCheckMark as D, IconExclamationMarkTriangle as j } from "@frontify/fondue-icons";
+import { IconCaretDown as D, IconCheckMark as j, IconExclamationMarkTriangle as E } from "@frontify/fondue-icons";
 import * as S from "@radix-ui/react-popover";
-import { Slot as E } from "@radix-ui/react-slot";
-import { useSelect as H } from "downshift";
-import { forwardRef as T, useRef as $, useState as A } from "react";
-import { ForwardedRefCombobox as V } from "./fondue-components48.js";
-import { ForwardedRefSelectItem as q, ForwardedRefSelectItemGroup as J } from "./fondue-components49.js";
-import { SelectMenu as K } from "./fondue-components50.js";
-import { ForwardedRefSelectSlot as L } from "./fondue-components51.js";
+import { Slot as H } from "@radix-ui/react-slot";
+import { useSelect as T } from "downshift";
+import { forwardRef as V, useRef as $, useState as A } from "react";
+import { ForwardedRefCombobox as q } from "./fondue-components48.js";
+import { ForwardedRefSelectItem as J, ForwardedRefSelectItemGroup as K } from "./fondue-components49.js";
+import { SelectMenu as L } from "./fondue-components50.js";
+import { ForwardedRefSelectSlot as Q } from "./fondue-components51.js";
 import a from "./fondue-components52.js";
-import { useSelectData as Q } from "./fondue-components53.js";
+import { useSelectData as U } from "./fondue-components53.js";
 const g = ({
   children: h,
   onSelect: i,
@@ -18,13 +18,14 @@ const g = ({
   placeholder: b = "",
   status: s = "neutral",
   disabled: m,
-  "aria-label": C,
+  alignMenu: C = "start",
+  "aria-label": w,
   "data-test-id": l = "fondue-select"
 }, d) => {
-  const { inputSlots: w, menuSlots: x, items: R, clearButton: u, getItemByValue: p } = Q(h), y = p(N), F = p(I), c = $(!1), [k, f] = A(!1), { getToggleButtonProps: v, getMenuProps: M, getItemProps: P, reset: B, selectedItem: r, isOpen: G, highlightedIndex: O } = H({
-    items: R,
-    defaultSelectedItem: y,
-    selectedItem: F,
+  const { inputSlots: x, menuSlots: R, items: y, clearButton: u, getItemByValue: p } = U(h), F = p(N), k = p(I), c = $(!1), [v, f] = A(!1), { getToggleButtonProps: M, getMenuProps: P, getItemProps: B, reset: G, selectedItem: r, isOpen: O, highlightedIndex: z } = T({
+    items: y,
+    defaultSelectedItem: F,
+    selectedItem: k,
     onIsOpenChange: () => {
       f(!1);
     },
@@ -36,7 +37,7 @@ const g = ({
     },
     itemToString: (e) => e ? e.label : ""
   });
-  return /* @__PURE__ */ n(S.Root, { open: G, children: [
+  return /* @__PURE__ */ n(S.Root, { open: O, children: [
     /* @__PURE__ */ o(
       S.Anchor,
       {
@@ -58,27 +59,27 @@ const g = ({
             "data-disabled": m,
             "data-empty": !r,
             "data-test-id": l,
-            ...m ? {} : v({
-              "aria-label": C,
+            ...m ? {} : M({
+              "aria-label": w,
               ...d ? { ref: d } : {}
             }),
             children: [
-              /* @__PURE__ */ o("span", { className: a.input, children: r ? r.label : b }),
-              w,
+              /* @__PURE__ */ o("span", { className: a.selectedValue, children: r ? r.label : b }),
+              x,
               u && /* @__PURE__ */ o(
-                E,
+                H,
                 {
                   onClick: (e) => {
-                    e.stopPropagation(), B();
+                    e.stopPropagation(), G();
                   },
                   className: a.clear,
                   children: u
                 }
               ),
               /* @__PURE__ */ n("div", { className: a.icons, children: [
-                /* @__PURE__ */ o(z, { size: 16, className: a.caret }),
+                /* @__PURE__ */ o(D, { size: 16, className: a.caret }),
                 s === "success" ? /* @__PURE__ */ o(
-                  D,
+                  j,
                   {
                     size: 16,
                     className: a.iconSuccess,
@@ -86,7 +87,7 @@ const g = ({
                   }
                 ) : null,
                 s === "error" ? /* @__PURE__ */ o(
-                  j,
+                  E,
                   {
                     size: 16,
                     className: a.iconError,
@@ -100,31 +101,32 @@ const g = ({
       }
     ),
     /* @__PURE__ */ o(
-      K,
+      L,
       {
-        highlightedIndex: O,
-        getMenuProps: M,
-        getItemProps: P,
+        align: C,
+        highlightedIndex: z,
+        getMenuProps: P,
+        getItemProps: B,
         selectedItem: r,
-        hasInteractedSinceOpening: k,
-        children: x
+        hasInteractedSinceOpening: v,
+        children: R
       }
     )
   ] });
 };
 g.displayName = "Select";
-const U = T(g), t = U;
+const W = V(g), t = W;
 t.displayName = "Select";
-t.Combobox = V;
+t.Combobox = q;
 t.Combobox.displayName = "Select.Combobox";
-t.Item = q;
+t.Item = J;
 t.Item.displayName = "Select.Item";
-t.Group = J;
+t.Group = K;
 t.Group.displayName = "Select.Group";
-t.Slot = L;
+t.Slot = Q;
 t.Slot.displayName = "Select.Slot";
 export {
-  U as ForwardedRefSelect,
+  W as ForwardedRefSelect,
   t as Select,
   g as SelectInput
 };

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 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        '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.input}>{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                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","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-components22.js

@@ -1,44 +1,44 @@
-import { jsx as e, jsxs as T } from "react/jsx-runtime";
+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 { cn as f } from "./fondue-components25.js";
+import { cn as T } from "./fondue-components25.js";
 import n from "./fondue-components57.js";
-const d = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: a }) => /* @__PURE__ */ e(o.Provider, { children: /* @__PURE__ */ e(o.Root, { delayDuration: r, open: i, onOpenChange: a, children: t }) });
+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 = ({ children: t, "data-test-id": r = "fondue-tooltip-trigger" }, i) => /* @__PURE__ */ e(o.Trigger, { "data-test-id": r, asChild: !0, ref: i, children: t });
+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 = ({
   children: t,
   className: r,
   maxWidth: i,
-  "data-test-id": a = "fondue-tooltip-content",
+  "data-test-id": e = "fondue-tooltip-content",
   padding: m = "spacious",
   ...c
-}, g) => /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ T(
+}, f) => /* @__PURE__ */ a(o.Portal, { children: /* @__PURE__ */ g(
   o.Content,
   {
-    "data-test-id": a,
+    "data-test-id": e,
     "data-tooltip-spacing": m,
-    className: f(n.root, r),
+    className: T(n.root, r),
     style: { maxWidth: i },
     collisionPadding: 16,
     sideOffset: 8,
-    ref: g,
+    ref: f,
     ...c,
     children: [
       t,
-      /* @__PURE__ */ e(o.Arrow, { "aria-hidden": "true", className: n.arrow })
+      /* @__PURE__ */ a(o.Arrow, { "aria-hidden": "true", className: n.arrow })
     ]
   }
 ) });
 p.displayName = "Tooltip.Content";
-const C = {
+const h = {
   Root: d,
   Trigger: s(l),
   Content: s(p)
 };
 export {
-  C as Tooltip,
+  h as Tooltip,
   p as TooltipContent,
   d as TooltipRoot,
   l as TooltipTrigger

package/dist/fondue-components22.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components22.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};\nexport type TooltipTriggerProps = { children: ReactNode; 'data-test-id'?: string };\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 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 const TooltipTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} asChild ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\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","dataTestId","ref","TooltipContent","className","maxWidth","padding","props","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;AAyCa,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,GACL,EACJ,CAAA;AAGRD,EAAY,cAAc;AAEb,MAAAO,IAAiB,CAC1B,EAAE,UAAAN,GAAU,gBAAgBO,IAAa,4BACzCC,MAGI,gBAAAJ,EAACC,EAAa,SAAb,EAAqB,gBAAcE,GAAY,SAAO,IAAC,KAAAC,GACnD,UAAAR,EACL,CAAA;AAGRM,EAAe,cAAc;AAEtB,MAAMG,IAAiB,CAC1B;AAAA,EACI,UAAAT;AAAA,EACA,WAAAU;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGC;AACP,GACAL,MAGI,gBAAAJ,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAS;AAAA,EAACT,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcE;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,MAAAb;AAAA,MACD,gBAAAI,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWW,EAAO,OAAO;AAAA,IAAA;AAAA,EAAA;AAExE,EAAA,CAAA;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMlB;AAAA,EACN,SAASmB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDT,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components22.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,GACL,EACJ,CAAA;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,EACL,CAAA;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,OAAO;AAAA,IAAA;AAAA,EAAA;AAExE,EAAA,CAAA;AAGRP,EAAe,cAAc;AAEtB,MAAMQ,IAAU;AAAA,EACnB,MAAMnB;AAAA,EACN,SAASoB,EAAmDb,CAAc;AAAA,EAC1E,SAASa,EAAgDT,CAAc;AAC3E;"}

package/dist/fondue-components26.js

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

package/dist/fondue-components29.js

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

package/dist/fondue-components31.js

@@ -1,31 +1,31 @@
-import { jsxs as d, jsx as a, Fragment as m } from "react/jsx-runtime";
-import { IconDroplet as n, IconTrashBin as p, IconCaretDown as f } from "@frontify/fondue-icons";
-import { forwardRef as I, useId as N } from "react";
-import i from "./fondue-components58.js";
-import { colorToCss as h } from "./fondue-components34.js";
-const c = ({ currentColor: e, onClear: s, "data-test-id": t = "color-picker-input", ...r }, l) => {
-  const o = N();
-  return /* @__PURE__ */ d("div", { className: i.root, ...r, ref: l, "data-test-id": t, children: [
+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-components59.js";
+import { colorToCss as b } from "./fondue-components34.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(
       "div",
       {
         "aria-describedby": o,
         className: i.colorIndicator,
-        style: { backgroundColor: h(e) }
+        style: { backgroundColor: b(e) }
       }
-    ) : /* @__PURE__ */ d(m, { children: [
-      /* @__PURE__ */ a(n, { size: 16 }),
+    ) : /* @__PURE__ */ d(n, { children: [
+      /* @__PURE__ */ a(p, { 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(p, { size: 16 }) }),
-    /* @__PURE__ */ a("div", { children: /* @__PURE__ */ a(f, { size: 16, className: i.caret }) })
+    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 x = I(c);
+const z = N(c);
 export {
   c as ColorPickerInput,
-  x as ForwardedRefColorPickerInput
+  z as ForwardedRefColorPickerInput
 };
 //# sourceMappingURL=fondue-components31.js.map

package/dist/fondue-components31.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components31.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    /**\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    { 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 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","currentColor","onClear","dataTestId","props","forwardedRef","colorNameId","useId","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconTrashBin","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AA8Ba,MAAAA,IAAmB,CAC5B,EAAE,cAAAC,GAAc,SAAAC,GAAS,gBAAgBC,IAAa,sBAAsB,GAAGC,EAAM,GACrFC,MACC;AACD,QAAMC,IAAcC;AAGhB,SAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWC,EAAO,MAAO,GAAGL,GAAO,KAAKC,GAAc,gBAAcF,GACpE,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,MAAA,CAAO,EACtD,CAAA;AAAA,EACJ,EAAA,CAAA;AAER;AACAT,EAAiB,cAAc;AAElB,MAAAgB,IAA+BC,EAAkDjB,CAAgB;"}
+{"version":3,"file":"fondue-components31.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;AAGhB,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,MAAA,CAAO,EACtD,CAAA;AAAA,EACJ,EAAA,CAAA;AAER;AACAV,EAAiB,cAAc;AAElB,MAAAiB,IAA+BC,EAAkDlB,CAAgB;"}

package/dist/fondue-components36.js

@@ -1,18 +1,18 @@
-const o = "_content_1nokb_6", n = "_header_1nokb_50", t = "_footer_1nokb_51", e = "_body_1nokb_52", _ = "_underlay_1nokb_77", d = "_sideContent_1nokb_90", s = {
-  content: o,
-  header: n,
-  footer: t,
-  body: e,
-  underlay: _,
-  sideContent: d
+const n = "_content_1dnjb_6", t = "_header_1dnjb_50", e = "_footer_1dnjb_51", o = "_body_1dnjb_52", d = "_underlay_1dnjb_77", _ = "_sideContent_1dnjb_90", s = {
+  content: n,
+  header: t,
+  footer: e,
+  body: o,
+  underlay: d,
+  sideContent: _
 };
 export {
-  e as body,
-  o as content,
+  o as body,
+  n as content,
   s as default,
-  t as footer,
-  n as header,
-  d as sideContent,
-  _ as underlay
+  e as footer,
+  t as header,
+  _ as sideContent,
+  d as underlay
 };
 //# sourceMappingURL=fondue-components36.js.map

package/dist/fondue-components39.js

@@ -1,20 +1,22 @@
-const o = "_content_ojnoh_4", n = "_subContent_ojnoh_5", t = "_item_ojnoh_23", s = "_subTrigger_ojnoh_24", _ = "_subMenuIndicator_ojnoh_63", e = "_group_ojnoh_69", u = "_slot_ojnoh_76", c = {
-  content: o,
+const t = "_content_1m5jw_5", n = "_subContent_1m5jw_6", o = "_item_1m5jw_32", e = "_subTrigger_1m5jw_33", s = "_itemContent_1m5jw_72", _ = "_subMenuIndicator_1m5jw_79", u = "_group_1m5jw_85", c = "_slot_1m5jw_92", m = {
+  content: t,
   subContent: n,
-  item: t,
-  subTrigger: s,
+  item: o,
+  subTrigger: e,
+  itemContent: s,
   subMenuIndicator: _,
-  group: e,
-  slot: u
+  group: u,
+  slot: c
 };
 export {
-  o as content,
-  c as default,
-  e as group,
-  t as item,
-  u as slot,
+  t as content,
+  m as default,
+  u as group,
+  o as item,
+  s as itemContent,
+  c as slot,
   n as subContent,
   _ as subMenuIndicator,
-  s as subTrigger
+  e as subTrigger
 };
 //# sourceMappingURL=fondue-components39.js.map

package/dist/fondue-components39.js.map

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