@frontify/fondue-components 17.1.0 → 18.0.0

package/dist/fondue-components10.js

@@ -1,137 +1,147 @@
-import { jsx as n, jsxs as w } from "react/jsx-runtime";
-import { IconCaretRight as P } from "@frontify/fondue-icons";
+import { jsx as n, jsxs as g } from "react/jsx-runtime";
+import { IconCaretRight as M } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-dropdown-menu";
-import { forwardRef as i, useMemo as F, Children as G } from "react";
-import { useFondueTheme as f, ThemeProvider as g } from "./fondue-components28.js";
-import { useProcessedChildren as D } from "./fondue-components47.js";
+import { forwardRef as i, useMemo as G, Children as A, useRef as v } from "react";
+import { useFondueTheme as D, ThemeProvider as b } from "./fondue-components28.js";
+import { useProcessedChildren as h } from "./fondue-components47.js";
 import s from "./fondue-components48.js";
-const b = ({
+const N = ({
   children: o,
   open: t,
   modal: e = !1,
   onOpenChange: r,
   "data-test-id": a = "fondue-dropdown"
 }) => /* @__PURE__ */ n(d.Root, { open: t, modal: e, onOpenChange: r, "data-test-id": a, children: o });
-b.displayName = "Dropdown.Root";
-const N = ({
+N.displayName = "Dropdown.Root";
+const S = ({
   asChild: o = !0,
   children: t,
   "data-test-id": e = "fondue-dropdown-trigger",
   ...r
 }, a) => /* @__PURE__ */ n(d.Trigger, { asChild: o, "data-test-id": e, ref: a, ...r, children: t });
-N.displayName = "Dropdown.Trigger";
-const M = {
+S.displayName = "Dropdown.Trigger";
+const x = {
   compact: 8,
   comfortable: 12,
   spacious: 16
-}, A = {
+}, O = {
   compact: 8,
   spacious: 24
-}, S = ({
+}, C = ({
   side: o = "bottom",
   align: t = "start",
   triggerOffset: e = "compact",
   children: r,
   preventTriggerFocusOnClose: a,
-  viewportCollisionPadding: p = "compact",
-  "data-test-id": u = "fondue-dropdown-content"
-}, c) => {
-  const l = f();
-  return /* @__PURE__ */ n(d.Portal, { children: /* @__PURE__ */ n(g, { theme: l, children: /* @__PURE__ */ n(
+  viewportCollisionPadding: u = "compact",
+  "data-test-id": p = "fondue-dropdown-content"
+}, l) => {
+  const m = D();
+  return /* @__PURE__ */ n(d.Portal, { children: /* @__PURE__ */ n(b, { theme: m, children: /* @__PURE__ */ n(
     d.Content,
     {
       align: t,
-      collisionPadding: A[p],
-      sideOffset: M[e],
+      collisionPadding: O[u],
+      sideOffset: x[e],
       side: o,
       className: s.content,
-      "data-test-id": u,
-      ref: c,
-      onCloseAutoFocus: (m) => {
-        a && m.preventDefault();
+      "data-test-id": p,
+      ref: l,
+      onCloseAutoFocus: (w) => {
+        a && w.preventDefault();
       },
       children: r
     }
   ) }) });
 };
-S.displayName = "Dropdown.Content";
-const C = ({ children: o, heading: t, "data-test-id": e = "fondue-dropdown-group" }, r) => F(
-  () => G.toArray(o).filter((p) => p !== null).length > 0,
+C.displayName = "Dropdown.Content";
+const R = ({ children: o, heading: t, "data-test-id": e = "fondue-dropdown-group" }, r) => G(
+  () => A.toArray(o).filter((u) => u !== null).length > 0,
   [o]
-) ? /* @__PURE__ */ w(d.Group, { className: s.group, "data-test-id": e, ref: r, children: [
+) ? /* @__PURE__ */ g(d.Group, { className: s.group, "data-test-id": e, ref: r, children: [
   t ? /* @__PURE__ */ n("div", { className: s.groupHeading, children: /* @__PURE__ */ n("span", { "aria-label": t, children: t }) }) : null,
   o
 ] }) : null;
-C.displayName = "Dropdown.Group";
-const h = ({
+R.displayName = "Dropdown.Group";
+const T = ({
   children: o,
   "data-test-id": t = "fondue-dropdown-submenu"
 }) => /* @__PURE__ */ n(d.Sub, { "data-test-id": t, children: o });
-h.displayName = "Dropdown.SubMenu";
-const R = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, e) => {
-  const { content: r } = D(o);
-  return /* @__PURE__ */ w(d.SubTrigger, { className: s.subTrigger, "data-test-id": t, ref: e, children: [
+T.displayName = "Dropdown.SubMenu";
+const I = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, e) => {
+  const { content: r } = h(o);
+  return /* @__PURE__ */ g(d.SubTrigger, { className: s.subTrigger, "data-test-id": t, ref: e, children: [
     r,
-    /* @__PURE__ */ n(P, { className: s.subMenuIndicator, size: 16 })
+    /* @__PURE__ */ n(M, { className: s.subMenuIndicator, size: 16 })
   ] });
 };
-R.displayName = "Dropdown.SubTrigger";
-const T = ({ children: o, "data-test-id": t = "fondue-dropdown-subcontent" }, e) => {
-  const r = f();
-  return /* @__PURE__ */ n(d.Portal, { children: /* @__PURE__ */ n(g, { theme: r, children: /* @__PURE__ */ n(d.SubContent, { className: s.subContent, "data-test-id": t, ref: e, children: o }) }) });
+I.displayName = "Dropdown.SubTrigger";
+const F = ({ children: o, "data-test-id": t = "fondue-dropdown-subcontent" }, e) => {
+  const r = D();
+  return /* @__PURE__ */ n(d.Portal, { children: /* @__PURE__ */ n(b, { theme: r, children: /* @__PURE__ */ n(d.SubContent, { className: s.subContent, "data-test-id": t, ref: e, children: o }) }) });
 };
-T.displayName = "Dropdown.SubContent";
-const I = ({
+F.displayName = "Dropdown.SubContent";
+const y = ({
   children: o,
   disabled: t,
   textValue: e,
   onSelect: r,
   emphasis: a = "default",
-  asChild: p = !1,
-  "data-test-id": u = "fondue-dropdown-subtrigger",
-  ...c
-}, l) => {
-  const { content: m } = D(o);
+  asChild: u = !1,
+  "data-test-id": p = "fondue-dropdown-subtrigger",
+  ...l
+}, m) => {
+  const { content: w } = h(o), c = v(!1);
   return /* @__PURE__ */ n(
     d.Item,
     {
       onSelect: r,
       className: s.item,
       textValue: e,
-      "data-test-id": u,
+      "data-test-id": p,
       "data-emphasis": a,
-      ref: l,
+      ref: m,
       disabled: t,
-      asChild: p,
-      ...c,
-      children: m
+      asChild: u,
+      "data-show-focus-ring": c.current,
+      onMouseEnter: () => {
+        c.current = !0;
+      },
+      onFocus: (f) => {
+        c.current || (f.target.dataset.showFocusRing = "true");
+      },
+      onBlur: (f) => {
+        f.target.dataset.showFocusRing = "false", c.current = !1;
+      },
+      ...l,
+      children: w
     }
   );
 };
-I.displayName = "Dropdown.Item";
-const y = ({ children: o, name: t, "data-test-id": e = "fondue-dropdown-slot" }, r) => /* @__PURE__ */ n("div", { "data-name": t, className: s.slot, "data-test-id": e, ref: r, children: o });
-y.displayName = "Dropdown.Slot";
-const v = i(N), x = i(S), O = i(C), _ = i(R), j = i(T), L = i(I), z = i(y), B = {
-  Root: b,
-  Trigger: v,
-  Content: x,
-  Group: O,
-  SubMenu: h,
-  SubTrigger: _,
-  SubContent: j,
-  Item: L,
-  Slot: z
+y.displayName = "Dropdown.Item";
+const P = ({ children: o, name: t, "data-test-id": e = "fondue-dropdown-slot" }, r) => /* @__PURE__ */ n("div", { "data-name": t, className: s.slot, "data-test-id": e, ref: r, children: o });
+P.displayName = "Dropdown.Slot";
+const _ = i(S), j = i(C), E = i(R), L = i(I), z = i(F), B = i(y), H = i(P), Q = {
+  Root: N,
+  Trigger: _,
+  Content: j,
+  Group: E,
+  SubMenu: T,
+  SubTrigger: L,
+  SubContent: z,
+  Item: B,
+  Slot: H
 };
 export {
-  B as Dropdown,
-  S as DropdownContent,
-  C as DropdownGroup,
-  I as DropdownItem,
-  b as DropdownRoot,
-  y as DropdownSlot,
-  T as DropdownSubContent,
-  h as DropdownSubMenu,
-  R as DropdownSubTrigger,
-  N as DropdownTrigger
+  Q as Dropdown,
+  C as DropdownContent,
+  R as DropdownGroup,
+  y as DropdownItem,
+  N as DropdownRoot,
+  P as DropdownSlot,
+  F as DropdownSubContent,
+  T as DropdownSubMenu,
+  I as DropdownSubTrigger,
+  S as DropdownTrigger
 };
 //# sourceMappingURL=fondue-components10.js.map

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { Children, forwardRef, useMemo, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { useProcessedChildren } from './hooks/useProcessedChildren';\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    modal = false,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} modal={modal} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = {\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 DropdownTrigger = (\n    {\n        asChild = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-trigger',\n        ...props\n    }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref} {...props}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\ntype DropdownSpacing = 'compact' | 'comfortable' | 'spacious';\ntype DropdownViewportCollisionPadding = 'compact' | 'spacious';\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Defines the alignment of the dropdown.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: DropdownSpacing;\n    /**\n     * Prevents the focus from being set on the trigger when the dropdown is closed.\n     */\n    preventTriggerFocusOnClose?: boolean;\n    /**\n     * Define the minimum distance between the dropdown and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: DropdownViewportCollisionPadding;\n};\n\nconst SPACING_MAP: Record<DropdownSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<DropdownViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        align = 'start',\n        triggerOffset = 'compact',\n        children,\n        preventTriggerFocusOnClose,\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.Content\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    side={side}\n                    className={styles.content}\n                    data-test-id={dataTestId}\n                    ref={ref}\n                    onCloseAutoFocus={(event) => {\n                        if (preventTriggerFocusOnClose) {\n                            event.preventDefault();\n                        }\n                    }}\n                >\n                    {children}\n                </RadixDropdown.Content>\n            </ThemeProvider>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; heading?: string; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, heading, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const hasChildren = useMemo(\n        () => Children.toArray(children).filter((child) => child !== null).length > 0,\n        [children],\n    );\n\n    if (!hasChildren) {\n        return null;\n    }\n\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span aria-label={heading}>{heading}</span>\n                </div>\n            ) : null}\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            {content}\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subcontent' }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>\n                    {children}\n                </RadixDropdown.SubContent>\n            </ThemeProvider>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * The style of the item.\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'danger';\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    /**\n     * If true, the item props will be passed to the child element.\n     * @default false\n     */\n    asChild?: boolean;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        asChild = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            data-emphasis={emphasis}\n            ref={ref}\n            disabled={disabled}\n            asChild={asChild}\n            {...props}\n        >\n            {content}\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","modal","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","DropdownContent","side","align","triggerOffset","preventTriggerFocusOnClose","viewportCollisionPadding","theme","useFondueTheme","ThemeProvider","styles","event","DropdownGroup","heading","useMemo","Children","child","jsxs","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}
+{"version":3,"file":"fondue-components10.js","sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretRight } from '@frontify/fondue-icons';\nimport * as RadixDropdown from '@radix-ui/react-dropdown-menu';\nimport { Children, forwardRef, useMemo, useRef, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { useProcessedChildren } from './hooks/useProcessedChildren';\nimport styles from './styles/dropdown.module.scss';\n\nexport type DropdownRootProps = {\n    children?: ReactNode;\n    /**\n     * When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * Controls the open state of the dropdown.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the dropdown changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n\n    'data-test-id'?: string;\n};\n\nexport const DropdownRoot = ({\n    children,\n    open,\n    modal = false,\n    onOpenChange,\n    'data-test-id': dataTestId = 'fondue-dropdown',\n}: DropdownRootProps) => {\n    return (\n        <RadixDropdown.Root open={open} modal={modal} onOpenChange={onOpenChange} data-test-id={dataTestId}>\n            {children}\n        </RadixDropdown.Root>\n    );\n};\nDropdownRoot.displayName = 'Dropdown.Root';\n\nexport type DropdownTriggerProps = {\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 DropdownTrigger = (\n    {\n        asChild = true,\n        children,\n        'data-test-id': dataTestId = 'fondue-dropdown-trigger',\n        ...props\n    }: DropdownTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixDropdown.Trigger asChild={asChild} data-test-id={dataTestId} ref={ref} {...props}>\n            {children}\n        </RadixDropdown.Trigger>\n    );\n};\nDropdownTrigger.displayName = 'Dropdown.Trigger';\n\ntype DropdownSpacing = 'compact' | 'comfortable' | 'spacious';\ntype DropdownViewportCollisionPadding = 'compact' | 'spacious';\nexport type DropdownContentProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Defines the alignment of the dropdown.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Defines the preferred side of the dropdown. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: DropdownSpacing;\n    /**\n     * Prevents the focus from being set on the trigger when the dropdown is closed.\n     */\n    preventTriggerFocusOnClose?: boolean;\n    /**\n     * Define the minimum distance between the dropdown and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: DropdownViewportCollisionPadding;\n};\n\nconst SPACING_MAP: Record<DropdownSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<DropdownViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        align = 'start',\n        triggerOffset = 'compact',\n        children,\n        preventTriggerFocusOnClose,\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.Content\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    side={side}\n                    className={styles.content}\n                    data-test-id={dataTestId}\n                    ref={ref}\n                    onCloseAutoFocus={(event) => {\n                        if (preventTriggerFocusOnClose) {\n                            event.preventDefault();\n                        }\n                    }}\n                >\n                    {children}\n                </RadixDropdown.Content>\n            </ThemeProvider>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownContent.displayName = 'Dropdown.Content';\n\nexport type DropdownGroupProps = { children: ReactNode; heading?: string; 'data-test-id'?: string };\n\nexport const DropdownGroup = (\n    { children, heading, 'data-test-id': dataTestId = 'fondue-dropdown-group' }: DropdownGroupProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const hasChildren = useMemo(\n        () => Children.toArray(children).filter((child) => child !== null).length > 0,\n        [children],\n    );\n\n    if (!hasChildren) {\n        return null;\n    }\n\n    return (\n        <RadixDropdown.Group className={styles.group} data-test-id={dataTestId} ref={ref}>\n            {heading ? (\n                <div className={styles.groupHeading}>\n                    <span aria-label={heading}>{heading}</span>\n                </div>\n            ) : null}\n            {children}\n        </RadixDropdown.Group>\n    );\n};\nDropdownGroup.displayName = 'Dropdown.Group';\n\nexport type DropdownSubMenuProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubMenu = ({\n    children,\n    'data-test-id': dataTestId = 'fondue-dropdown-submenu',\n}: DropdownSubMenuProps) => {\n    return <RadixDropdown.Sub data-test-id={dataTestId}>{children}</RadixDropdown.Sub>;\n};\nDropdownSubMenu.displayName = 'Dropdown.SubMenu';\n\nexport type DropdownSubTriggerProps = { children: ReactNode; 'data-test-id'?: string };\n\nexport const DropdownSubTrigger = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subtrigger' }: DropdownSubTriggerProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    return (\n        <RadixDropdown.SubTrigger className={styles.subTrigger} data-test-id={dataTestId} ref={ref}>\n            {content}\n            <IconCaretRight className={styles.subMenuIndicator} size={16} />\n        </RadixDropdown.SubTrigger>\n    );\n};\nDropdownSubTrigger.displayName = 'Dropdown.SubTrigger';\n\nexport type DropdownSubContentProps = {\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const DropdownSubContent = (\n    { children, 'data-test-id': dataTestId = 'fondue-dropdown-subcontent' }: DropdownSubContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixDropdown.SubContent className={styles.subContent} data-test-id={dataTestId} ref={ref}>\n                    {children}\n                </RadixDropdown.SubContent>\n            </ThemeProvider>\n        </RadixDropdown.Portal>\n    );\n};\nDropdownSubContent.displayName = 'Dropdown.SubContent';\n\nexport type DropdownItemProps = {\n    children: ReactNode;\n    /**\n     * Disables the item.\n     */\n    disabled?: boolean;\n    /**\n     * The text value of the item that is passed to the onSelect callback.\n     */\n    textValue?: string;\n    /**\n     * The style of the item.\n     * @default \"default\"\n     */\n    emphasis?: 'default' | 'danger';\n    /**\n     * Callback that is called when the item is selected.\n     */\n    onSelect?: (event: Event) => void;\n    /**\n     * If true, the item props will be passed to the child element.\n     * @default false\n     */\n    asChild?: boolean;\n    'data-test-id'?: string;\n};\n\nexport const DropdownItem = (\n    {\n        children,\n        disabled,\n        textValue,\n        onSelect,\n        emphasis = 'default',\n        asChild = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-subtrigger',\n        ...props\n    }: DropdownItemProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { content } = useProcessedChildren(children);\n    const wasMouseInteracted = useRef(false);\n\n    return (\n        <RadixDropdown.Item\n            onSelect={onSelect}\n            className={styles.item}\n            textValue={textValue}\n            data-test-id={dataTestId}\n            data-emphasis={emphasis}\n            ref={ref}\n            disabled={disabled}\n            asChild={asChild}\n            data-show-focus-ring={wasMouseInteracted.current}\n            onMouseEnter={() => {\n                wasMouseInteracted.current = true;\n            }}\n            onFocus={(focusEvent) => {\n                if (!wasMouseInteracted.current) {\n                    focusEvent.target.dataset.showFocusRing = 'true';\n                }\n            }}\n            onBlur={(blurEvent) => {\n                blurEvent.target.dataset.showFocusRing = 'false';\n                wasMouseInteracted.current = false;\n            }}\n            {...props}\n        >\n            {content}\n        </RadixDropdown.Item>\n    );\n};\nDropdownItem.displayName = 'Dropdown.Item';\n\nexport type DropdownSlotProps = { children: ReactNode; name?: 'left' | 'right'; 'data-test-id'?: string };\n\nexport const DropdownSlot = (\n    { children, name, 'data-test-id': dataTestId = 'fondue-dropdown-slot' }: DropdownSlotProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-name={name} className={styles.slot} data-test-id={dataTestId} ref={ref}>\n            {children}\n        </div>\n    );\n};\nDropdownSlot.displayName = 'Dropdown.Slot';\n\nconst ForwardedRefDropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(DropdownTrigger);\nconst ForwardedRefDropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(DropdownContent);\nconst ForwardedRefDropdownGroup = forwardRef<HTMLDivElement, DropdownGroupProps>(DropdownGroup);\nconst ForwardedRefDropdownSubTrigger = forwardRef<HTMLDivElement, DropdownSubTriggerProps>(DropdownSubTrigger);\nconst ForwardedRefDropdownSubContent = forwardRef<HTMLDivElement, DropdownSubContentProps>(DropdownSubContent);\nconst ForwardedRefDropdownItem = forwardRef<HTMLDivElement, DropdownItemProps>(DropdownItem);\nconst ForwardedRefDropdownSlot = forwardRef<HTMLDivElement, DropdownSlotProps>(DropdownSlot);\n\nexport const Dropdown = {\n    Root: DropdownRoot,\n    Trigger: ForwardedRefDropdownTrigger,\n    Content: ForwardedRefDropdownContent,\n    Group: ForwardedRefDropdownGroup,\n    SubMenu: DropdownSubMenu,\n    SubTrigger: ForwardedRefDropdownSubTrigger,\n    SubContent: ForwardedRefDropdownSubContent,\n    Item: ForwardedRefDropdownItem,\n    Slot: ForwardedRefDropdownSlot,\n};\n"],"names":["DropdownRoot","children","open","modal","onOpenChange","dataTestId","jsx","RadixDropdown","DropdownTrigger","asChild","props","ref","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","DropdownContent","side","align","triggerOffset","preventTriggerFocusOnClose","viewportCollisionPadding","theme","useFondueTheme","ThemeProvider","styles","event","DropdownGroup","heading","useMemo","Children","child","jsxs","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","wasMouseInteracted","useRef","focusEvent","blurEvent","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}

package/dist/fondue-components12.js

@@ -5,9 +5,9 @@ import { forwardRef as r } from "react";
 import { addAutoFocusAttribute as w, addShowFocusRing as x } from "./fondue-components44.js";
 import { useFondueTheme as A, ThemeProvider as T } from "./fondue-components28.js";
 import s from "./fondue-components50.js";
-const c = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
-c.displayName = "Flyout.Root";
-const n = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...d }, l) => /* @__PURE__ */ a(
+const n = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
+n.displayName = "Flyout.Root";
+const c = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...d }, l) => /* @__PURE__ */ a(
   i.Trigger,
   {
     onMouseDown: w,
@@ -20,7 +20,7 @@ const n = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-tr
     children: o
   }
 );
-n.displayName = "Flyout.Trigger";
+c.displayName = "Flyout.Trigger";
 const I = {
   compact: 8,
   comfortable: 12,
@@ -43,7 +43,7 @@ const I = {
 }, C) => {
   const R = A();
   return /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ u(T, { theme: R, children: [
-    /* @__PURE__ */ a("div", { className: s.overlay }),
+    /* @__PURE__ */ a("div", { "data-test-id": "fondue-flyout-overlay", className: s.overlay }),
     /* @__PURE__ */ a(
       i.Content,
       {
@@ -88,8 +88,8 @@ const p = ({ children: t, "data-test-id": o = "fondue-flyout-body", scrollable:
 );
 p.displayName = "Flyout.Body";
 const j = {
-  Root: c,
-  Trigger: r(n),
+  Root: n,
+  Trigger: r(c),
   Content: r(m),
   Header: r(y),
   Footer: r(f),
@@ -101,7 +101,7 @@ export {
   m as FlyoutContent,
   f as FlyoutFooter,
   y as FlyoutHeader,
-  c as FlyoutRoot,
-  n as FlyoutTrigger
+  n as FlyoutRoot,
+  c as FlyoutTrigger
 };
 //# sourceMappingURL=fondue-components12.js.map

package/dist/fondue-components12.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components12.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, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\ntype FlyoutViewportCollisionPadding = 'compact' | 'spacious';\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define the minimum distance between the flyout and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: FlyoutViewportCollisionPadding;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<FlyoutViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        triggerOffset = 'compact',\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\n                <div className={styles.overlay} />\n                <RadixPopover.Content\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\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 = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Allow the body to scroll if the max height of the flyout is reached\n     * @default false\n     */\n    scrollable?: boolean;\n};\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body', scrollable = false }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            data-flyout-spacing=\"compact\"\n            data-scrollable={scrollable}\n            className={styles.body}\n        >\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","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","triggerOffset","viewportCollisionPadding","theme","useFondueTheme","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components12.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, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\ntype FlyoutViewportCollisionPadding = 'compact' | 'spacious';\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define the minimum distance between the flyout and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: FlyoutViewportCollisionPadding;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<FlyoutViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        triggerOffset = 'compact',\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\n                <div data-test-id=\"fondue-flyout-overlay\" className={styles.overlay} />\n                <RadixPopover.Content\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\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 = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Allow the body to scroll if the max height of the flyout is reached\n     * @default false\n     */\n    scrollable?: boolean;\n};\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body', scrollable = false }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            data-flyout-spacing=\"compact\"\n            data-scrollable={scrollable}\n            className={styles.body}\n        >\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","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","triggerOffset","viewportCollisionPadding","theme","useFondueTheme","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":"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"}

package/dist/fondue-components39.js

@@ -1,26 +1,26 @@
-import { jsxs as t, jsx as e, Fragment as f } from "react/jsx-runtime";
-import { IconDroplet as h, IconCross as I, IconCaretDown as b } from "@frontify/fondue-icons";
-import { forwardRef as v } from "react";
-import s from "./fondue-components78.js";
+import { jsxs as s, jsx as e, Fragment as f } from "react/jsx-runtime";
+import { IconDroplet as h, IconCross as I, IconCaretDown as v } from "@frontify/fondue-icons";
+import { forwardRef as b } from "react";
+import t from "./fondue-components77.js";
 import { getColorWithName as k, colorToCss as y } from "./fondue-components42.js";
-const o = ({
-  id: c,
+const c = ({
+  id: l,
   currentColor: a,
-  isOpen: l,
-  disabled: d = !1,
-  onClear: i,
+  isOpen: d,
+  disabled: i = !1,
+  onClear: o,
   onClick: m,
   "data-test-id": n = "color-picker-input",
   ...r
 }, p) => {
   const N = (a == null ? void 0 : a.name) ?? (a ? k(a, "RGBA").name : "");
-  return /* @__PURE__ */ t("div", { id: c, className: s.root, ref: p, "data-test-id": n, children: [
-    /* @__PURE__ */ t(
+  return /* @__PURE__ */ s("div", { id: l, className: t.root, ref: p, "data-test-id": n, children: [
+    /* @__PURE__ */ s(
       "button",
       {
-        className: s.button,
+        className: t.button,
         ...r,
-        disabled: d,
+        disabled: i,
         onClick: m,
         type: "button",
         "data-color-input-select": !0,
@@ -29,27 +29,37 @@ const o = ({
             "div",
             {
               "aria-hidden": !0,
-              className: s.colorIndicator,
+              className: t.colorIndicator,
               style: { "--active-color": y(a) }
             }
-          ) : /* @__PURE__ */ t(f, { children: [
+          ) : /* @__PURE__ */ s(f, { children: [
             /* @__PURE__ */ e(h, { size: 16 }),
             /* @__PURE__ */ e("span", { children: "Select Color" })
           ] }),
-          /* @__PURE__ */ e("span", { className: s.colorName, children: N })
+          /* @__PURE__ */ e("span", { className: t.colorName, children: N })
         ]
       }
     ),
-    /* @__PURE__ */ t("div", { className: s.actions, children: [
-      i && /* @__PURE__ */ e("button", { type: "button", "aria-label": "Clear color", onClick: i, className: s.clear, children: /* @__PURE__ */ e(I, { size: 16 }) }),
-      /* @__PURE__ */ e("div", { className: s.caret, "data-state": l ? "open" : "closed", children: /* @__PURE__ */ e(b, { size: 16, className: s.caret }) })
+    /* @__PURE__ */ s("div", { className: t.actions, children: [
+      o && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear color",
+          onClick: o,
+          className: t.clear,
+          disabled: i,
+          children: /* @__PURE__ */ e(I, { size: 16 })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: t.caret, "data-state": d ? "open" : "closed", children: /* @__PURE__ */ e(v, { size: 16, className: t.caret }) })
     ] })
   ] });
 };
-o.displayName = "ColorPicker.Input";
-const g = v(o);
+c.displayName = "ColorPicker.Input";
+const g = b(c);
 export {
-  o as ColorPickerInput,
+  c as ColorPickerInput,
   g as ForwardedRefColorPickerInput
 };
 //# sourceMappingURL=fondue-components39.js.map

package/dist/fondue-components39.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components39.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconDroplet } from '@frontify/fondue-icons';\nimport { type CSSProperties, type ForwardedRef, forwardRef } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss, getColorWithName } 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 determine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the color picker input is disabled\n     */\n    disabled?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * Event handler called when the color picker input is clicked\n     */\n    onClick?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    {\n        id,\n        currentColor,\n        isOpen,\n        disabled = false,\n        onClear,\n        onClick,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const colorName = currentColor?.name ?? (currentColor ? getColorWithName(currentColor, 'RGBA').name : '');\n    return (\n        <div id={id} className={styles.root} ref={forwardedRef} data-test-id={dataTestId}>\n            <button\n                className={styles.button}\n                {...props}\n                disabled={disabled}\n                onClick={onClick}\n                type=\"button\"\n                data-color-input-select\n            >\n                {currentColor?.red !== undefined ? (\n                    <div\n                        aria-hidden\n                        className={styles.colorIndicator}\n                        style={{ '--active-color': colorToCss(currentColor) } as CSSProperties}\n                    />\n                ) : (\n                    <>\n                        <IconDroplet size={16} />\n                        <span>Select Color</span>\n                    </>\n                )}\n\n                <span className={styles.colorName}>{colorName}</span>\n            </button>\n            <div className={styles.actions}>\n                {onClear && (\n                    <button type=\"button\" aria-label=\"Clear color\" onClick={onClear} className={styles.clear}>\n                        <IconCross size={16} />\n                    </button>\n                )}\n                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n                    <IconCaretDown size={16} className={styles.caret} />\n                </div>\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","isOpen","disabled","onClear","onClick","dataTestId","props","forwardedRef","colorName","getColorWithName","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconCross","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AAuCO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,KAAYR,KAAA,gBAAAA,EAAc,UAASA,IAAeS,EAAiBT,GAAc,MAAM,EAAE,OAAO;AAElG,SAAA,gBAAAU,EAAC,SAAI,IAAAX,GAAQ,WAAWY,EAAO,MAAM,KAAKJ,GAAc,gBAAcF,GAClE,UAAA;AAAA,IAAA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAO;AAAA,QACjB,GAAGL;AAAA,QACJ,UAAAJ;AAAA,QACA,SAAAE;AAAA,QACA,MAAK;AAAA,QACL,2BAAuB;AAAA,QAEtB,UAAA;AAAA,WAAAJ,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAY;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,eAAW;AAAA,cACX,WAAWD,EAAO;AAAA,cAClB,OAAO,EAAE,kBAAkBE,EAAWb,CAAY,EAAE;AAAA,YAAA;AAAA,UAAA,IAIpD,gBAAAU,EAAAI,GAAA,EAAA,UAAA;AAAA,YAAC,gBAAAF,EAAAG,GAAA,EAAY,MAAM,GAAI,CAAA;AAAA,YACvB,gBAAAH,EAAC,UAAK,UAAY,eAAA,CAAA;AAAA,UAAA,GACtB;AAAA,UAGH,gBAAAA,EAAA,QAAA,EAAK,WAAWD,EAAO,WAAY,UAAUH,EAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAClD;AAAA,IACC,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,MAAAR,KACI,gBAAAS,EAAA,UAAA,EAAO,MAAK,UAAS,cAAW,eAAc,SAAST,GAAS,WAAWQ,EAAO,OAC/E,UAAA,gBAAAC,EAACI,GAAU,EAAA,MAAM,GAAI,CAAA,GACzB;AAAA,wBAEH,OAAI,EAAA,WAAWL,EAAO,OAAO,cAAYV,IAAS,SAAS,UACxD,UAAA,gBAAAW,EAACK,KAAc,MAAM,IAAI,WAAWN,EAAO,OAAO,EACtD,CAAA;AAAA,IAAA,EACJ,CAAA;AAAA,EAAA,GACJ;AAER;AACAb,EAAiB,cAAc;AAElB,MAAAoB,IAA+BC,EAAkDrB,CAAgB;"}
+{"version":3,"file":"fondue-components39.js","sources":["../src/components/ColorPicker/ColorPickerInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCross, IconDroplet } from '@frontify/fondue-icons';\nimport { type CSSProperties, type ForwardedRef, forwardRef } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/colorInput.module.scss';\nimport { type RgbaColor } from './types';\nimport { colorToCss, getColorWithName } 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 determine arrow state\n     */\n    isOpen?: boolean;\n    /**\n     * Whether the color picker input is disabled\n     */\n    disabled?: boolean;\n    /**\n     * callback for clearing the color\n     */\n    onClear?: () => void;\n    /**\n     * Event handler called when the color picker input is clicked\n     */\n    onClick?: () => void;\n    /**\n     * The test id of the color picker input\n     */\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nexport const ColorPickerInput = (\n    {\n        id,\n        currentColor,\n        isOpen,\n        disabled = false,\n        onClear,\n        onClick,\n        'data-test-id': dataTestId = 'color-picker-input',\n        ...props\n    }: ColorPickerInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const colorName = currentColor?.name ?? (currentColor ? getColorWithName(currentColor, 'RGBA').name : '');\n    return (\n        <div id={id} className={styles.root} ref={forwardedRef} data-test-id={dataTestId}>\n            <button\n                className={styles.button}\n                {...props}\n                disabled={disabled}\n                onClick={onClick}\n                type=\"button\"\n                data-color-input-select\n            >\n                {currentColor?.red !== undefined ? (\n                    <div\n                        aria-hidden\n                        className={styles.colorIndicator}\n                        style={{ '--active-color': colorToCss(currentColor) } as CSSProperties}\n                    />\n                ) : (\n                    <>\n                        <IconDroplet size={16} />\n                        <span>Select Color</span>\n                    </>\n                )}\n\n                <span className={styles.colorName}>{colorName}</span>\n            </button>\n            <div className={styles.actions}>\n                {onClear && (\n                    <button\n                        type=\"button\"\n                        aria-label=\"Clear color\"\n                        onClick={onClear}\n                        className={styles.clear}\n                        disabled={disabled}\n                    >\n                        <IconCross size={16} />\n                    </button>\n                )}\n                <div className={styles.caret} data-state={isOpen ? 'open' : 'closed'}>\n                    <IconCaretDown size={16} className={styles.caret} />\n                </div>\n            </div>\n        </div>\n    );\n};\nColorPickerInput.displayName = 'ColorPicker.Input';\n\nexport const ForwardedRefColorPickerInput = forwardRef<HTMLDivElement, ColorPickerInputProps>(ColorPickerInput);\n"],"names":["ColorPickerInput","id","currentColor","isOpen","disabled","onClear","onClick","dataTestId","props","forwardedRef","colorName","getColorWithName","jsxs","styles","jsx","colorToCss","Fragment","IconDroplet","IconCross","IconCaretDown","ForwardedRefColorPickerInput","forwardRef"],"mappings":";;;;;AAuCO,MAAMA,IAAmB,CAC5B;AAAA,EACI,IAAAC;AAAA,EACA,cAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,KAAYR,KAAA,gBAAAA,EAAc,UAASA,IAAeS,EAAiBT,GAAc,MAAM,EAAE,OAAO;AAElG,SAAA,gBAAAU,EAAC,SAAI,IAAAX,GAAQ,WAAWY,EAAO,MAAM,KAAKJ,GAAc,gBAAcF,GAClE,UAAA;AAAA,IAAA,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAO;AAAA,QACjB,GAAGL;AAAA,QACJ,UAAAJ;AAAA,QACA,SAAAE;AAAA,QACA,MAAK;AAAA,QACL,2BAAuB;AAAA,QAEtB,UAAA;AAAA,WAAAJ,KAAA,gBAAAA,EAAc,SAAQ,SACnB,gBAAAY;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,eAAW;AAAA,cACX,WAAWD,EAAO;AAAA,cAClB,OAAO,EAAE,kBAAkBE,EAAWb,CAAY,EAAE;AAAA,YAAA;AAAA,UAAA,IAIpD,gBAAAU,EAAAI,GAAA,EAAA,UAAA;AAAA,YAAC,gBAAAF,EAAAG,GAAA,EAAY,MAAM,GAAI,CAAA;AAAA,YACvB,gBAAAH,EAAC,UAAK,UAAY,eAAA,CAAA;AAAA,UAAA,GACtB;AAAA,UAGH,gBAAAA,EAAA,QAAA,EAAK,WAAWD,EAAO,WAAY,UAAUH,EAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAClD;AAAA,IACC,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAO,SAClB,UAAA;AAAA,MACGR,KAAA,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,cAAW;AAAA,UACX,SAAST;AAAA,UACT,WAAWQ,EAAO;AAAA,UAClB,UAAAT;AAAA,UAEA,UAAA,gBAAAU,EAACI,GAAU,EAAA,MAAM,GAAI,CAAA;AAAA,QAAA;AAAA,MACzB;AAAA,wBAEH,OAAI,EAAA,WAAWL,EAAO,OAAO,cAAYV,IAAS,SAAS,UACxD,UAAA,gBAAAW,EAACK,KAAc,MAAM,IAAI,WAAWN,EAAO,OAAO,EACtD,CAAA;AAAA,IAAA,EACJ,CAAA;AAAA,EAAA,GACJ;AAER;AACAb,EAAiB,cAAc;AAElB,MAAAoB,IAA+BC,EAAkDrB,CAAgB;"}

package/dist/fondue-components48.js

@@ -1,22 +1,22 @@
-const t = "_content_8bl6l_6", n = "_subContent_8bl6l_7", o = "_item_8bl6l_20", s = "_subTrigger_8bl6l_21", _ = "_subMenuIndicator_8bl6l_119", e = "_group_8bl6l_125", l = "_groupHeading_8bl6l_132", u = "_slot_8bl6l_143", b = {
+const t = "_content_1s2bq_7", s = "_subContent_1s2bq_8", n = "_item_1s2bq_21", o = "_subTrigger_1s2bq_22", _ = "_subMenuIndicator_1s2bq_129", e = "_group_1s2bq_135", u = "_groupHeading_1s2bq_142", b = "_slot_1s2bq_153", r = {
   content: t,
-  subContent: n,
-  item: o,
-  subTrigger: s,
+  subContent: s,
+  item: n,
+  subTrigger: o,
   subMenuIndicator: _,
   group: e,
-  groupHeading: l,
-  slot: u
+  groupHeading: u,
+  slot: b
 };
 export {
   t as content,
-  b as default,
+  r as default,
   e as group,
-  l as groupHeading,
-  o as item,
-  u as slot,
-  n as subContent,
+  u as groupHeading,
+  n as item,
+  b as slot,
+  s as subContent,
   _ as subMenuIndicator,
-  s as subTrigger
+  o as subTrigger
 };
 //# sourceMappingURL=fondue-components48.js.map

package/dist/fondue-components50.js

@@ -1,18 +1,18 @@
-const o = "_root_hstbt_6", t = "_overlay_hstbt_51", s = "_header_hstbt_68", e = "_body_hstbt_89", _ = "_footer_hstbt_114", r = "_close_hstbt_135", c = {
+const o = "_root_xgv97_6", e = "_overlay_xgv97_51", _ = "_header_xgv97_67", t = "_body_xgv97_88", r = "_footer_xgv97_113", s = "_close_xgv97_134", c = {
   root: o,
-  overlay: t,
-  header: s,
-  body: e,
-  footer: _,
-  close: r
+  overlay: e,
+  header: _,
+  body: t,
+  footer: r,
+  close: s
 };
 export {
-  e as body,
-  r as close,
+  t as body,
+  s as close,
   c as default,
-  _ as footer,
-  s as header,
-  t as overlay,
+  r as footer,
+  _ as header,
+  e as overlay,
   o as root
 };
 //# sourceMappingURL=fondue-components50.js.map

package/dist/fondue-components61.js

@@ -4,7 +4,7 @@ import { Slot as C } from "@radix-ui/react-slot";
 import { isValidElement as V } from "react";
 import { useFondueTheme as g, ThemeProvider as A } from "./fondue-components28.js";
 import n from "./fondue-components63.js";
-import { recursiveMap as D, getSelectOptionValue as M } from "./fondue-components77.js";
+import { recursiveMap as D, getSelectOptionValue as M } from "./fondue-components78.js";
 const T = ({
   highlightedIndex: p,
   getMenuProps: l,

package/dist/fondue-components64.js

@@ -3,7 +3,7 @@ import { IconCross as x } from "@frontify/fondue-icons";
 import { useState as B, useMemo as i, Children as f, isValidElement as a, cloneElement as E, useCallback as v } from "react";
 import { ForwardedRefSelectItem as F } from "./fondue-components60.js";
 import { ForwardedRefSelectSlot as c } from "./fondue-components62.js";
-import { getSelectOptionValue as I } from "./fondue-components77.js";
+import { getSelectOptionValue as I } from "./fondue-components78.js";
 const S = (r) => {
   const t = [];
   return f.forEach(r, (o) => {

package/dist/fondue-components71.js

@@ -1,4 +1,4 @@
-const t = "_triggerListWrapper_d8wxe_5", r = "_trigger_d8wxe_5", e = "_activeIndicator_d8wxe_53", i = "_triggerList_d8wxe_5", o = "_root_d8wxe_135", g = "_content_d8wxe_158", _ = {
+const t = "_triggerListWrapper_1qrbj_5", r = "_trigger_1qrbj_5", e = "_activeIndicator_1qrbj_53", i = "_triggerList_1qrbj_5", o = "_root_1qrbj_140", g = "_content_1qrbj_163", _ = {
   triggerListWrapper: t,
   trigger: r,
   activeIndicator: e,