@frontify/fondue-components 26.0.3 → 27.0.1

package/dist/fondue-components75.js

@@ -1,7 +1,7 @@
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
 import { IconCheckMark as n } from "@frontify/fondue-icons";
 import { forwardRef as l } from "react";
-import a from "./fondue-components96.js";
+import a from "./fondue-components99.js";
 const o = ({ "data-test-id": c = "fondue-select-item", ...e }, t) => /* @__PURE__ */ d("li", { "data-test-id": c, ref: t, ...e, children: [
   /* @__PURE__ */ r("div", { className: a.itemValue, children: e.children }),
   /* @__PURE__ */ r(n, { className: a.checkmarkIcon })

package/dist/fondue-components76.js

@@ -1,6 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
 import { forwardRef as d } from "react";
-import m from "./fondue-components96.js";
+import m from "./fondue-components99.js";
 const t = ({ children: e, name: o, "data-test-id": r = "fondue-select-slot", ...a }, s) => /* @__PURE__ */ l("div", { "data-test-id": r, ref: s, className: m.slot, "data-name": o, ...a, children: e });
 t.displayName = "Select.Slot";
 const S = d(t);

package/dist/fondue-components85.js

@@ -1,18 +1,18 @@
-const t = "_root_1f9jh_5", r = "_triggerListWrapper_1f9jh_13", e = "_trigger_1f9jh_13", i = "_activeIndicator_1f9jh_61", o = "_triggerList_1f9jh_13", g = "_content_1f9jh_149", _ = {
+const t = "_root_ujssn_5", r = "_triggerListWrapper_ujssn_17", s = "_trigger_ujssn_17", n = "_activeIndicator_ujssn_65", e = "_triggerList_ujssn_17", i = "_content_ujssn_159", o = {
   root: t,
   triggerListWrapper: r,
-  trigger: e,
-  activeIndicator: i,
-  triggerList: o,
-  content: g
+  trigger: s,
+  activeIndicator: n,
+  triggerList: e,
+  content: i
 };
 export {
-  i as activeIndicator,
-  g as content,
-  _ as default,
+  n as activeIndicator,
+  i as content,
+  o as default,
   t as root,
-  e as trigger,
-  o as triggerList,
+  s as trigger,
+  e as triggerList,
   r as triggerListWrapper
 };
 //# sourceMappingURL=fondue-components85.js.map

package/dist/fondue-components9.js

@@ -1,21 +1,21 @@
-import { jsx as o, jsxs as L } from "react/jsx-runtime";
-import { IconCross as _ } from "@frontify/fondue-icons";
-import * as d from "@radix-ui/react-dialog";
-import { createContext as $, forwardRef as l, useRef as k, useContext as G, useMemo as I } from "react";
+import { jsx as o, jsxs as E } from "react/jsx-runtime";
+import { IconCross as L } from "@frontify/fondue-icons";
+import * as r from "@radix-ui/react-dialog";
+import { createContext as _, forwardRef as d, useRef as k, useContext as G, useMemo as I } from "react";
 import { useSyncRefs as J } from "./fondue-components51.js";
 import { useTranslation as K } from "./fondue-components39.js";
 import { addShowFocusRing as Q, addAutoFocusAttribute as U } from "./fondue-components52.js";
 import { useFondueTheme as V, ThemeProvider as W } from "./fondue-components36.js";
-import n from "./fondue-components53.js";
-const D = $({ isModal: !1 });
+import s from "./fondue-components53.js";
+const D = _({ isModal: !1 });
 D.displayName = "DialogContext";
-const x = ({ children: t, modal: e, onOpenChange: a, open: i }) => {
-  const r = I(() => ({ isModal: e ?? !1 }), [e]);
-  return /* @__PURE__ */ o(D.Provider, { value: r, children: /* @__PURE__ */ o(d.Root, { open: i, onOpenChange: a, modal: e, children: t }) });
+const T = ({ children: t, modal: e, onOpenChange: a, open: i }) => {
+  const n = I(() => ({ isModal: e ?? !1 }), [e]);
+  return /* @__PURE__ */ o(D.Provider, { value: n, children: /* @__PURE__ */ o(r.Root, { open: i, onOpenChange: a, modal: e, children: t }) });
 };
-x.displayName = "Dialog.Root";
-const S = ({ asChild: t = !0, children: e, "data-test-id": a = "fondue-dialog-trigger" }, i) => /* @__PURE__ */ o(
-  d.Trigger,
+T.displayName = "Dialog.Root";
+const R = ({ asChild: t = !0, children: e, "data-test-id": a = "fondue-dialog-trigger" }, i) => /* @__PURE__ */ o(
+  r.Trigger,
   {
     onMouseDown: U,
     "data-auto-focus-visible": "true",
@@ -26,94 +26,94 @@ const S = ({ asChild: t = !0, children: e, "data-test-id": a = "fondue-dialog-tr
     children: e
   }
 );
-S.displayName = "Dialog.Trigger";
+R.displayName = "Dialog.Trigger";
 const X = ({ children: t, showUnderlay: e }) => {
   const { isModal: a } = G(D);
-  return a ? /* @__PURE__ */ o(d.Overlay, { "data-visible": e, className: n.underlay, children: t }) : /* @__PURE__ */ o("div", { className: n.underlay, "data-visible": e, children: t });
-}, T = ({
+  return a ? /* @__PURE__ */ o(r.Overlay, { "data-visible": e, className: s.underlay, children: t }) : /* @__PURE__ */ o("div", { className: s.underlay, "data-visible": e, children: t });
+}, S = ({
   maxWidth: t = "800px",
   minWidth: e = "400px",
   minHeight: a = "200px",
   padding: i = "compact",
-  verticalAlign: r = "center",
-  "data-test-id": c = "fondue-dialog-content",
-  showUnderlay: u = !1,
-  rounded: g = !0,
-  onEscapeKeyDown: O,
-  children: P
-}, j) => {
-  const { theme: B, dir: h } = V(), s = k(null);
-  J(s, j);
-  const z = (E) => {
-    var b, N, v;
-    E.preventDefault();
-    const m = 'button:not([data-tooltip-trigger="true"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', p = (b = s.current) == null ? void 0 : b.querySelector('[data-dialog-layout-component="body"]'), f = (N = s.current) == null ? void 0 : N.querySelector('[data-dialog-layout-component="footer"]'), y = (v = s.current) == null ? void 0 : v.querySelector('[data-dialog-layout-component="header"]'), C = (p == null ? void 0 : p.querySelector(m)) || (f == null ? void 0 : f.querySelector(m)) || (y == null ? void 0 : y.querySelector(m));
-    C instanceof HTMLElement && C.focus();
+  verticalAlign: n = "center",
+  "data-test-id": u = "fondue-dialog-content",
+  showUnderlay: c = !1,
+  rounded: p = !0,
+  onEscapeKeyDown: j,
+  children: A
+}, H) => {
+  const { theme: P, dir: N } = V(), l = k(null);
+  J(l, H);
+  const B = (z) => {
+    var C, v, x;
+    z.preventDefault();
+    const g = 'button:not([data-tooltip-trigger="true"]), [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', m = (C = l.current) == null ? void 0 : C.querySelector('[data-dialog-layout-component="body"]'), f = (v = l.current) == null ? void 0 : v.querySelector('[data-dialog-layout-component="footer"]'), y = (x = l.current) == null ? void 0 : x.querySelector('[data-dialog-layout-component="header"]'), b = (m == null ? void 0 : m.querySelector(g)) || (f == null ? void 0 : f.querySelector(g)) || (y == null ? void 0 : y.querySelector(g));
+    b instanceof HTMLElement && b.focus();
   };
-  return /* @__PURE__ */ o(d.Portal, { children: /* @__PURE__ */ o(W, { theme: B, dir: h, children: /* @__PURE__ */ o(X, { showUnderlay: u, children: /* @__PURE__ */ o(
-    d.Content,
+  return /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ o(W, { theme: P, dir: N, children: /* @__PURE__ */ o(X, { showUnderlay: c, children: /* @__PURE__ */ o(
+    r.Content,
     {
       style: {
         "--dialog-max-width": t,
         "--dialog-min-width": e,
         "--dialog-min-height": a
       },
-      ref: s,
-      className: n.content,
+      ref: l,
+      className: s.content,
       onFocus: Q,
-      onOpenAutoFocus: z,
-      onEscapeKeyDown: O,
+      onOpenAutoFocus: B,
+      onEscapeKeyDown: j,
       "data-dialog-padding": i,
-      "data-dialog-rounded": g,
-      "data-test-id": c,
-      "data-dialog-vertical-align": r,
-      dir: h,
-      children: P
+      "data-dialog-rounded": p,
+      "data-test-id": u,
+      "data-dialog-vertical-align": n,
+      dir: N,
+      children: A
     }
   ) }) }) });
 };
-T.displayName = "Dialog.Content";
-const R = ({
+S.displayName = "Dialog.Content";
+const h = ({
   padding: t,
   showBorder: e = !0,
   showCloseButton: a = !0,
   closeProps: i,
-  children: r,
-  "data-test-id": c = "fondue-dialog-header"
-}, u) => {
-  const { t: g } = K();
-  return /* @__PURE__ */ L(
+  children: n,
+  "data-test-id": u = "fondue-dialog-header"
+}, c) => {
+  const { t: p } = K();
+  return /* @__PURE__ */ E(
     "div",
     {
-      "data-test-id": c,
-      ref: u,
-      className: n.header,
+      "data-test-id": u,
+      ref: c,
+      className: s.header,
       "data-dialog-header-padding": t,
       "data-show-border": e,
       "data-dialog-layout-component": "header",
       children: [
-        /* @__PURE__ */ o("div", { children: r }),
+        /* @__PURE__ */ o("div", { children: n }),
         a && /* @__PURE__ */ o(
-          d.Close,
+          r.Close,
           {
             role: "button",
-            "data-test-id": `${c}-close`,
-            "aria-label": g("Dialog_close"),
+            "data-test-id": `${u}-close`,
+            "aria-label": p("Dialog_close"),
             ...i,
-            children: /* @__PURE__ */ o(_, { size: 20 })
+            children: /* @__PURE__ */ o(L, { size: 20 })
           }
         )
       ]
     }
   );
 };
-R.displayName = "Dialog.Header";
-const F = ({ padding: t, showBorder: e = !0, children: a, "data-test-id": i = "fondue-dialog-footer" }, r) => /* @__PURE__ */ o(
+h.displayName = "Dialog.Header";
+const F = ({ padding: t, showBorder: e = !0, children: a, "data-test-id": i = "fondue-dialog-footer" }, n) => /* @__PURE__ */ o(
   "div",
   {
     "data-test-id": i,
-    ref: r,
-    className: n.footer,
+    ref: n,
+    className: s.footer,
     "data-dialog-footer-padding": t,
     "data-show-border": e,
     "data-dialog-layout-component": "footer",
@@ -126,44 +126,56 @@ const q = ({ padding: t, children: e, "data-test-id": a = "fondue-dialog-body" }
   {
     "data-test-id": a,
     ref: i,
-    className: n.body,
+    className: s.body,
     "data-dialog-body-padding": t,
     "data-dialog-layout-component": "body",
     children: e
   }
 );
 q.displayName = "Dialog.Body";
-const w = ({ children: t, "data-test-id": e = "fondue-dialog-side-content" }, a) => /* @__PURE__ */ o("div", { "data-test-id": e, ref: a, className: n.sideContent, "data-dialog-layout-component": !0, children: t });
+const w = ({ children: t, "data-test-id": e = "fondue-dialog-side-content" }, a) => /* @__PURE__ */ o("div", { "data-test-id": e, ref: a, className: s.sideContent, "data-dialog-layout-component": !0, children: t });
 w.displayName = "Dialog.SideContent";
-const M = ({ children: t }) => /* @__PURE__ */ o(d.Close, { asChild: !0, children: t });
+const M = ({ children: t }) => /* @__PURE__ */ o(r.Close, { asChild: !0, children: t });
 M.displayName = "Dialog.Close";
-const A = ({ children: t, asChild: e }) => /* @__PURE__ */ o(d.Title, { asChild: e, children: t });
-A.displayName = "Dialog.Title";
-const H = ({ children: t, asChild: e }) => /* @__PURE__ */ o(d.Description, { asChild: e, children: t });
-H.displayName = "Dialog.Description";
-const rt = {
-  Root: x,
-  Title: A,
-  Description: H,
+const O = ({ children: t, asChild: e, screenReaderOnly: a = !1 }) => a && !e ? /* @__PURE__ */ o(r.Title, { asChild: !0, children: /* @__PURE__ */ o("span", { className: s.screenReaderOnly, children: t }) }) : a && e ? /* @__PURE__ */ o(r.Title, { asChild: !0, children: typeof t == "object" && t && "props" in t ? {
+  ...t,
+  props: {
+    ...t.props,
+    className: `${t.props.className || ""} ${s.screenReaderOnly}`.trim()
+  }
+} : t }) : /* @__PURE__ */ o(r.Title, { asChild: e, children: t });
+O.displayName = "Dialog.Title";
+const $ = ({ children: t, asChild: e, screenReaderOnly: a = !1 }) => a && !e ? /* @__PURE__ */ o(r.Description, { asChild: !0, children: /* @__PURE__ */ o("span", { className: s.screenReaderOnly, children: t }) }) : a && e ? /* @__PURE__ */ o(r.Description, { asChild: !0, children: typeof t == "object" && t && "props" in t ? {
+  ...t,
+  props: {
+    ...t.props,
+    className: `${t.props.className || ""} ${s.screenReaderOnly}`.trim()
+  }
+} : t }) : /* @__PURE__ */ o(r.Description, { asChild: e, children: t });
+$.displayName = "Dialog.Description";
+const st = {
+  Root: T,
+  Title: O,
+  Description: $,
   Close: M,
-  Trigger: l(S),
-  Content: l(T),
-  Header: l(R),
-  Footer: l(F),
-  Body: l(q),
-  SideContent: l(w)
+  Trigger: d(R),
+  Content: d(S),
+  Header: d(h),
+  Footer: d(F),
+  Body: d(q),
+  SideContent: d(w)
 };
 export {
-  rt as Dialog,
+  st as Dialog,
   q as DialogBody,
   M as DialogClose,
-  T as DialogContent,
-  H as DialogDescription,
+  S as DialogContent,
+  $ as DialogDescription,
   F as DialogFooter,
-  R as DialogHeader,
-  x as DialogRoot,
+  h as DialogHeader,
+  T as DialogRoot,
   w as DialogSideContent,
-  A as DialogTitle,
-  S as DialogTrigger
+  O as DialogTitle,
+  R as DialogTrigger
 };
 //# sourceMappingURL=fondue-components9.js.map

package/dist/fondue-components9.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport {\n    createContext,\n    forwardRef,\n    useContext,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\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 dialog\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 DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a minimum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    /**\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = {\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 type DialogHeaderProps = {\n    /**\n     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    closeProps?: CommonAriaProps;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\n    /**\n     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogBodyProps = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = { children?: ReactNode; asChild?: boolean };\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\nDialogContext.displayName = 'DialogContext';\n\nexport const DialogRoot = ({ children, modal, onOpenChange, open }: DialogRootProps) => {\n    const value = useMemo(() => ({ isModal: modal ?? false }), [modal]);\n\n    return (\n        <DialogContext.Provider value={value}>\n            <RadixDialog.Root open={open} onOpenChange={onOpenChange} modal={modal}>\n                {children}\n            </RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.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        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        onEscapeKeyDown,\n        children,\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useSyncRefs<HTMLDivElement>(contentRef, ref);\n\n    const handleOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n\n        const focusableSelector =\n            'button:not([data-tooltip-trigger=\"true\"]), [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\n        // Try to find focusable element in order: body -> footer -> header\n        const dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n        const dialogFooter = contentRef.current?.querySelector('[data-dialog-layout-component=\"footer\"]');\n        const dialogHeader = contentRef.current?.querySelector('[data-dialog-layout-component=\"header\"]');\n\n        const firstFocusable =\n            dialogBody?.querySelector(focusableSelector) ||\n            dialogFooter?.querySelector(focusableSelector) ||\n            dialogHeader?.querySelector(focusableSelector);\n\n        if (firstFocusable instanceof HTMLElement) {\n            firstFocusable.focus();\n        }\n    };\n\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <DialogUnderlay showUnderlay={showUnderlay}>\n                    <RadixDialog.Content\n                        style={\n                            {\n                                '--dialog-max-width': maxWidth,\n                                '--dialog-min-width': minWidth,\n                                '--dialog-min-height': minHeight,\n                            } as CSSProperties\n                        }\n                        ref={contentRef}\n                        className={styles.content}\n                        onFocus={addShowFocusRing}\n                        onOpenAutoFocus={handleOpenAutoFocus}\n                        onEscapeKeyDown={onEscapeKeyDown}\n                        data-dialog-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                        dir={dir}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        closeProps,\n        children,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"header\"\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    aria-label={t('Dialog_close')}\n                    {...closeProps}\n                >\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"footer\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component=\"body\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild }: DialogAnnouncementProps) => {\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","modal","onOpenChange","open","value","useMemo","jsx","RadixDialog","DialogTrigger","asChild","dataTestId","ref","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","onEscapeKeyDown","theme","dir","useFondueTheme","contentRef","useRef","useSyncRefs","handleOpenAutoFocus","event","focusableSelector","dialogBody","_a","dialogFooter","_b","dialogHeader","_c","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","closeProps","t","useTranslation","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","DialogDescription","Dialog","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components9.js","sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixDialog from '@radix-ui/react-dialog';\nimport {\n    createContext,\n    forwardRef,\n    useContext,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type ReactNode,\n} from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/dialog.module.scss';\n\nexport type DialogRootProps = {\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 dialog\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 DialogContentProps = {\n    /**\n     * Add rounded corners to the dialog\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * Define the padding of the dialog\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * The vertical alignment of the divider\n     * @default \"center\"\n     */\n    verticalAlign?: 'top' | 'center';\n\n    /**\n     * Define a maximum width for the dialog\n     * @default \"800px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define a minimum width for the dialog\n     * @default \"400px\"\n     */\n    minWidth?: string;\n    /**\n     * Define a minimum height for the dialog\n     * @default \"200px\"\n     */\n    minHeight?: string;\n    /**\n     * Show a dark underlay behind the dialog\n     * @default false\n     */\n    showUnderlay?: boolean;\n    /**\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogTriggerProps = {\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 type DialogHeaderProps = {\n    /**\n     * Define the padding for the dialog header\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the bottom of the header\n     * @default true\n     */\n    showBorder?: boolean;\n    /**\n     * Show a close button in the header\n     * @default true\n     */\n    showCloseButton?: boolean;\n    closeProps?: CommonAriaProps;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogFooterProps = {\n    /**\n     * Define the padding for the dialog footer\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Show a border at the top of the footer\n     * @default true\n     */\n    showBorder?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogBodyProps = {\n    /**\n     * Define the padding for the dialog body\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport type DialogSideContentProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport type DialogCloseProps = { children?: ReactNode };\n\nexport type DialogAnnouncementProps = {\n    children?: ReactNode;\n    asChild?: boolean;\n    /**\n     * Visually hide the element while keeping it accessible to screen readers\n     * @default false\n     */\n    screenReaderOnly?: boolean;\n};\n\ntype DialogContextType = {\n    isModal: boolean;\n};\n\nconst DialogContext = createContext<DialogContextType>({ isModal: false });\nDialogContext.displayName = 'DialogContext';\n\nexport const DialogRoot = ({ children, modal, onOpenChange, open }: DialogRootProps) => {\n    const value = useMemo(() => ({ isModal: modal ?? false }), [modal]);\n\n    return (\n        <DialogContext.Provider value={value}>\n            <RadixDialog.Root open={open} onOpenChange={onOpenChange} modal={modal}>\n                {children}\n            </RadixDialog.Root>\n        </DialogContext.Provider>\n    );\n};\nDialogRoot.displayName = 'Dialog.Root';\n\nexport const DialogTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-dialog-trigger' }: DialogTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDialog.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        </RadixDialog.Trigger>\n    );\n};\nDialogTrigger.displayName = 'Dialog.Trigger';\n\nconst DialogUnderlay = ({ children, showUnderlay }: { children: ReactNode; showUnderlay: boolean }) => {\n    const { isModal } = useContext(DialogContext);\n    if (isModal) {\n        return (\n            <RadixDialog.Overlay data-visible={showUnderlay} className={styles.underlay}>\n                {children}\n            </RadixDialog.Overlay>\n        );\n    }\n    return (\n        <div className={styles.underlay} data-visible={showUnderlay}>\n            {children}\n        </div>\n    );\n};\n\nexport const DialogContent = (\n    {\n        maxWidth = '800px',\n        minWidth = '400px',\n        minHeight = '200px',\n        padding = 'compact',\n        verticalAlign = 'center',\n        'data-test-id': dataTestId = 'fondue-dialog-content',\n        showUnderlay = false,\n        rounded = true,\n        onEscapeKeyDown,\n        children,\n    }: DialogContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    useSyncRefs<HTMLDivElement>(contentRef, ref);\n\n    const handleOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n\n        const focusableSelector =\n            'button:not([data-tooltip-trigger=\"true\"]), [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])';\n\n        // Try to find focusable element in order: body -> footer -> header\n        const dialogBody = contentRef.current?.querySelector('[data-dialog-layout-component=\"body\"]');\n        const dialogFooter = contentRef.current?.querySelector('[data-dialog-layout-component=\"footer\"]');\n        const dialogHeader = contentRef.current?.querySelector('[data-dialog-layout-component=\"header\"]');\n\n        const firstFocusable =\n            dialogBody?.querySelector(focusableSelector) ||\n            dialogFooter?.querySelector(focusableSelector) ||\n            dialogHeader?.querySelector(focusableSelector);\n\n        if (firstFocusable instanceof HTMLElement) {\n            firstFocusable.focus();\n        }\n    };\n\n    return (\n        <RadixDialog.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <DialogUnderlay showUnderlay={showUnderlay}>\n                    <RadixDialog.Content\n                        style={\n                            {\n                                '--dialog-max-width': maxWidth,\n                                '--dialog-min-width': minWidth,\n                                '--dialog-min-height': minHeight,\n                            } as CSSProperties\n                        }\n                        ref={contentRef}\n                        className={styles.content}\n                        onFocus={addShowFocusRing}\n                        onOpenAutoFocus={handleOpenAutoFocus}\n                        onEscapeKeyDown={onEscapeKeyDown}\n                        data-dialog-padding={padding}\n                        data-dialog-rounded={rounded}\n                        data-test-id={dataTestId}\n                        data-dialog-vertical-align={verticalAlign}\n                        dir={dir}\n                    >\n                        {children}\n                    </RadixDialog.Content>\n                </DialogUnderlay>\n            </ThemeProvider>\n        </RadixDialog.Portal>\n    );\n};\nDialogContent.displayName = 'Dialog.Content';\n\nexport const DialogHeader = (\n    {\n        padding,\n        showBorder = true,\n        showCloseButton = true,\n        closeProps,\n        children,\n        'data-test-id': dataTestId = 'fondue-dialog-header',\n    }: DialogHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.header}\n            data-dialog-header-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"header\"\n        >\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixDialog.Close\n                    role=\"button\"\n                    data-test-id={`${dataTestId}-close`}\n                    aria-label={t('Dialog_close')}\n                    {...closeProps}\n                >\n                    <IconCross size={20} />\n                </RadixDialog.Close>\n            )}\n        </div>\n    );\n};\nDialogHeader.displayName = 'Dialog.Header';\n\nexport const DialogFooter = (\n    { padding, showBorder = true, children, 'data-test-id': dataTestId = 'fondue-dialog-footer' }: DialogFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.footer}\n            data-dialog-footer-padding={padding}\n            data-show-border={showBorder}\n            data-dialog-layout-component=\"footer\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogFooter.displayName = 'Dialog.Footer';\n\nexport const DialogBody = (\n    { padding, children, 'data-test-id': dataTestId = 'fondue-dialog-body' }: DialogBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            className={styles.body}\n            data-dialog-body-padding={padding}\n            data-dialog-layout-component=\"body\"\n        >\n            {children}\n        </div>\n    );\n};\nDialogBody.displayName = 'Dialog.Body';\n\nexport const DialogSideContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dialog-side-content' }: DialogSideContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.sideContent} data-dialog-layout-component>\n            {children}\n        </div>\n    );\n};\nDialogSideContent.displayName = 'Dialog.SideContent';\n\nexport const DialogClose = ({ children }: DialogCloseProps) => {\n    return <RadixDialog.Close asChild>{children}</RadixDialog.Close>;\n};\nDialogClose.displayName = 'Dialog.Close';\n\nexport const DialogTitle = ({ children, asChild, screenReaderOnly = false }: DialogAnnouncementProps) => {\n    if (screenReaderOnly && !asChild) {\n        return (\n            <RadixDialog.Title asChild>\n                <span className={styles.screenReaderOnly}>{children}</span>\n            </RadixDialog.Title>\n        );\n    }\n\n    if (screenReaderOnly && asChild) {\n        // When using asChild with screenReaderOnly, apply className to the child\n        return (\n            <RadixDialog.Title asChild>\n                {typeof children === 'object' && children && 'props' in children\n                    ? {\n                          ...children,\n                          props: {\n                              ...children.props,\n                              className: `${children.props.className || ''} ${styles.screenReaderOnly}`.trim(),\n                          },\n                      }\n                    : children}\n            </RadixDialog.Title>\n        );\n    }\n\n    return <RadixDialog.Title asChild={asChild}>{children}</RadixDialog.Title>;\n};\nDialogTitle.displayName = 'Dialog.Title';\n\nexport const DialogDescription = ({ children, asChild, screenReaderOnly = false }: DialogAnnouncementProps) => {\n    if (screenReaderOnly && !asChild) {\n        return (\n            <RadixDialog.Description asChild>\n                <span className={styles.screenReaderOnly}>{children}</span>\n            </RadixDialog.Description>\n        );\n    }\n\n    if (screenReaderOnly && asChild) {\n        // When using asChild with screenReaderOnly, apply className to the child\n        return (\n            <RadixDialog.Description asChild>\n                {typeof children === 'object' && children && 'props' in children\n                    ? {\n                          ...children,\n                          props: {\n                              ...children.props,\n                              className: `${children.props.className || ''} ${styles.screenReaderOnly}`.trim(),\n                          },\n                      }\n                    : children}\n            </RadixDialog.Description>\n        );\n    }\n\n    return <RadixDialog.Description asChild={asChild}>{children}</RadixDialog.Description>;\n};\nDialogDescription.displayName = 'Dialog.Description';\n\nexport const Dialog = {\n    Root: DialogRoot,\n    Title: DialogTitle,\n    Description: DialogDescription,\n    Close: DialogClose,\n    Trigger: forwardRef<HTMLButtonElement, DialogTriggerProps>(DialogTrigger),\n    Content: forwardRef<HTMLDivElement, DialogContentProps>(DialogContent),\n    Header: forwardRef<HTMLDivElement, DialogHeaderProps>(DialogHeader),\n    Footer: forwardRef<HTMLDivElement, DialogFooterProps>(DialogFooter),\n    Body: forwardRef<HTMLDivElement, DialogBodyProps>(DialogBody),\n    SideContent: forwardRef<HTMLDivElement, DialogSideContentProps>(DialogSideContent),\n};\n"],"names":["DialogContext","createContext","DialogRoot","children","modal","onOpenChange","open","value","useMemo","jsx","RadixDialog","DialogTrigger","asChild","dataTestId","ref","addAutoFocusAttribute","DialogUnderlay","showUnderlay","isModal","useContext","styles","DialogContent","maxWidth","minWidth","minHeight","padding","verticalAlign","rounded","onEscapeKeyDown","theme","dir","useFondueTheme","contentRef","useRef","useSyncRefs","handleOpenAutoFocus","event","focusableSelector","dialogBody","_a","dialogFooter","_b","dialogHeader","_c","firstFocusable","ThemeProvider","addShowFocusRing","DialogHeader","showBorder","showCloseButton","closeProps","t","useTranslation","jsxs","IconCross","DialogFooter","DialogBody","DialogSideContent","DialogClose","DialogTitle","screenReaderOnly","DialogDescription","Dialog","forwardRef"],"mappings":"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"}

package/dist/fondue-components92.js

@@ -1,220 +1,8 @@
-import { jsxs as g, jsx as n, Fragment as ue } from "react/jsx-runtime";
-import { IconCaretDown as me } from "@frontify/fondue-icons";
-import * as H from "@radix-ui/react-popover";
-import { useMultipleSelection as K, useCombobox as s } from "downshift";
-import { forwardRef as be, useRef as he, useCallback as fe, useState as ge, useMemo as j } from "react";
-import { LoadingCircle as pe } from "./fondue-components19.js";
-import { useTranslation as Ce } from "./fondue-components39.js";
-import { useBadgeItems as ye } from "./fondue-components100.js";
-import { useFocusRing as Ie } from "./fondue-components101.js";
-import { useSelectData as ve } from "./fondue-components102.js";
-import { useSelectionDescription as Be } from "./fondue-components103.js";
-import c from "./fondue-components96.js";
-import { ClearButton as xe } from "./fondue-components104.js";
-import { CollapsibleBadges as Se } from "./fondue-components105.js";
-import { SelectMenu as we } from "./fondue-components106.js";
-import { ForwardedRefSelectSlot as De } from "./fondue-components76.js";
-import { StatusIcons as Re } from "./fondue-components107.js";
-const z = ({
-  children: E,
-  selectedItemValues: i,
-  onItemSelect: m,
-  onClear: $,
-  placeholder: x = "",
-  status: p = "neutral",
-  disabled: b,
-  "data-test-id": d = "fondue-select-combobox",
-  alignMenu: _ = "start",
-  side: q = "bottom",
-  id: G,
-  viewportCollisionPadding: J = "compact",
-  getAsyncItems: C,
-  onEscapeKeyDown: Q,
-  multiple: o,
-  ...a
-}, U) => {
-  const h = he(null), W = fe((e) => {
-    h.current = e;
-  }, []), { t: X } = Ce(), { inputSlots: Y, menuSlots: Z, items: y, filterText: A, clearButton: S, getItemByValue: r, setFilterText: I, asyncItemStatus: w } = ve(E, C), { wasClickedRef: V, onMouseDown: D, onFocus: R, onBlur: ee } = Ie(), { selectionDescriptionId: L, selectionDescription: O } = Be(
-    o,
-    i,
-    r
-  ), te = ye(i, r), [ae, k] = ge(!1), M = j(() => i.map((e) => r(e)).filter((e) => e !== void 0 && "value" in e && "label" in e), [i, r]), ne = K(
-    o ? {
-      selectedItems: M,
-      onStateChange({ selectedItems: e, type: l }) {
-        if (l === K.stateChangeTypes.SelectedItemKeyDownBackspace) {
-          const t = M.find((u) => !(e != null && e.includes(u)));
-          t && m(t.value);
-        }
-      }
-    } : { selectedItems: [] }
-  ), oe = o ? ne.removeSelectedItem : () => {
-  }, {
-    getInputProps: f,
-    getToggleButtonProps: ie,
-    getMenuProps: le,
-    getItemProps: re,
-    reset: N,
-    selectedItem: v,
-    isOpen: T,
-    highlightedIndex: se,
-    inputValue: B
-  } = s({
-    items: y,
-    selectedItem: o ? null : r(i[0]),
-    defaultHighlightedIndex: 0,
-    toggleButtonId: G,
-    // Only set labelId if aria-labelledby is explicitly provided, otherwise downshift generates an orphan ID
-    ..."aria-labelledby" in a && a["aria-labelledby"] ? { labelId: a["aria-labelledby"] } : {},
-    onSelectedItemChange: ({ selectedItem: e }) => {
-      e && m(e.value), o && I("");
-    },
-    onInputValueChange: ({ inputValue: e }) => {
-      I(e);
-    },
-    onIsOpenChange: () => {
-      k(!1), I("");
-    },
-    onHighlightedIndexChange: () => {
-      k(!0);
-    },
-    itemToString: (e) => e ? e.label : "",
-    stateReducer: (e, l) => {
-      const { changes: t, type: u } = l;
-      if (o)
-        switch (u) {
-          case s.stateChangeTypes.InputKeyDownEnter:
-          case s.stateChangeTypes.ItemClick:
-            return {
-              ...t,
-              isOpen: !0,
-              highlightedIndex: e.highlightedIndex,
-              inputValue: ""
-            };
-          case s.stateChangeTypes.InputBlur:
-            return {
-              ...t,
-              inputValue: ""
-            };
-        }
-      else
-        switch (u) {
-          case s.stateChangeTypes.InputKeyDownEnter:
-          case s.stateChangeTypes.ItemClick:
-            t.selectedItem && e.selectedItem && t.selectedItem.value === e.selectedItem.value && m(t.selectedItem.value);
-            break;
-        }
-      return t;
-    }
-  }), F = j(() => o ? !1 : !C && !y.find((e) => e.label.toLowerCase().includes(B.toLowerCase())), [B, y, C, o]) || !!w.error || p === "error", ce = (e, l) => {
-    const t = r(e);
-    t && (oe(t), m(e), h.current && (h.current.focus(), l && (h.current.dataset.showFocusRing = "false")));
-  }, de = () => {
-    $(), N();
-  }, P = (e) => {
-    var l, t;
-    ee(e), o || ((v == null ? void 0 : v.label) ?? "").toLocaleLowerCase() !== B.toLocaleLowerCase() && N(), f().onBlur && ((t = (l = f()).onBlur) == null || t.call(l, e));
-  };
-  return /* @__PURE__ */ g(H.Root, { open: T, children: [
-    /* @__PURE__ */ n(H.Anchor, { asChild: !0, children: /* @__PURE__ */ g(
-      "div",
-      {
-        ref: U,
-        className: c.root,
-        "data-status": F ? "error" : p,
-        "data-disabled": b,
-        "data-empty": i.length === 0,
-        children: [
-          o ? /* @__PURE__ */ g(ue, { children: [
-            /* @__PURE__ */ n("span", { id: L, className: c.srOnly, children: O }),
-            /* @__PURE__ */ n(
-              Se,
-              {
-                items: te,
-                onDismiss: ce,
-                selectedCount: i.length,
-                children: /* @__PURE__ */ n(
-                  "input",
-                  {
-                    ...f({
-                      ref: W,
-                      "aria-label": "aria-label" in a ? a["aria-label"] : void 0,
-                      // Remove auto-generated aria-labelledby if not explicitly provided
-                      "aria-labelledby": "aria-labelledby" in a && a["aria-labelledby"] ? a["aria-labelledby"] : void 0,
-                      "aria-describedby": O ? L : void 0
-                    }),
-                    "data-test-id": d,
-                    placeholder: i.length === 0 ? x : "",
-                    className: c.multiSelectInput,
-                    disabled: b,
-                    onMouseDown: D,
-                    onFocus: R,
-                    onBlur: P
-                  }
-                )
-              }
-            )
-          ] }) : /* @__PURE__ */ n(
-            "input",
-            {
-              ...f({
-                "aria-label": "aria-label" in a ? a["aria-label"] : void 0,
-                // Remove auto-generated aria-labelledby if not explicitly provided
-                "aria-labelledby": "aria-labelledby" in a && a["aria-labelledby"] ? a["aria-labelledby"] : void 0
-              }),
-              "data-test-id": d,
-              placeholder: x,
-              className: c.input,
-              disabled: b,
-              onMouseDown: D,
-              onFocus: R,
-              onBlur: P
-            }
-          ),
-          Y,
-          S ? /* @__PURE__ */ n(xe, { onClear: de, children: S }) : null,
-          w.isLoading && T ? /* @__PURE__ */ n(De, { name: "right", "data-test-id": `${d}-right-slot`, children: /* @__PURE__ */ n(pe, { size: "x-small", "data-test-id": `${d}-loading-circle` }) }) : null,
-          /* @__PURE__ */ g("div", { className: c.icons, children: [
-            /* @__PURE__ */ n(
-              "button",
-              {
-                "aria-label": X("Select_toggleMenu"),
-                ...ie(),
-                type: "button",
-                disabled: b,
-                onMouseDown: () => {
-                  V.current = !0;
-                },
-                children: /* @__PURE__ */ n(me, { size: 16, className: c.caret })
-              }
-            ),
-            /* @__PURE__ */ n(Re, { status: p, hasError: F, dataTestId: d })
-          ] })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ n(
-      we,
-      {
-        align: _,
-        side: q,
-        highlightedIndex: se,
-        filterText: A,
-        getMenuProps: le,
-        getItemProps: re,
-        selectedItemValues: i,
-        hasInteractedSinceOpening: ae,
-        viewportCollisionPadding: J,
-        onEscapeKeyDown: Q,
-        children: Z
-      }
-    )
-  ] });
+const o = "_root_1y4f3_2", t = {
+  root: o
 };
-z.displayName = "Select.Combobox";
-const Qe = be(z);
 export {
-  Qe as ComboboxBase
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components92.js.map