@frontify/fondue-components 18.0.0 → 18.1.0

package/dist/fondue-components.js

@@ -1,60 +1,62 @@
 /* empty css                   */
 import { Accordion as t } from "./fondue-components3.js";
-import { Box as m } from "./fondue-components4.js";
-import { Button as f } from "./fondue-components5.js";
-import { Checkbox as l } from "./fondue-components6.js";
-import { ColorPicker as d } from "./fondue-components7.js";
-import { Dialog as c } from "./fondue-components8.js";
-import { Divider as S } from "./fondue-components9.js";
-import { Dropdown as h } from "./fondue-components10.js";
-import { Flex as C } from "./fondue-components11.js";
-import { Flyout as B } from "./fondue-components12.js";
-import { Grid as F } from "./fondue-components13.js";
-import { Heading as k } from "./fondue-components14.js";
-import { Label as v } from "./fondue-components15.js";
-import { LoadingBar as A } from "./fondue-components16.js";
-import { LoadingCircle as y } from "./fondue-components17.js";
-import { ScrollArea as H } from "./fondue-components18.js";
-import { Section as j } from "./fondue-components19.js";
-import { SegmentedControl as z } from "./fondue-components20.js";
-import { Select as J } from "./fondue-components21.js";
-import { Slider as M } from "./fondue-components22.js";
-import { Switch as O } from "./fondue-components23.js";
-import { Table as R } from "./fondue-components24.js";
-import { Tabs as V } from "./fondue-components25.js";
-import { Text as X } from "./fondue-components26.js";
-import { TextInput as Z } from "./fondue-components27.js";
-import { ThemeContext as $, ThemeProvider as oo, useFondueTheme as ro } from "./fondue-components28.js";
-import { Tooltip as to } from "./fondue-components29.js";
+import { Badge as m } from "./fondue-components4.js";
+import { Box as f } from "./fondue-components5.js";
+import { Button as l } from "./fondue-components6.js";
+import { Checkbox as n } from "./fondue-components7.js";
+import { ColorPicker as c } from "./fondue-components8.js";
+import { Dialog as g } from "./fondue-components9.js";
+import { Divider as h } from "./fondue-components10.js";
+import { Dropdown as C } from "./fondue-components11.js";
+import { Flex as B } from "./fondue-components12.js";
+import { Flyout as F } from "./fondue-components13.js";
+import { Grid as k } from "./fondue-components14.js";
+import { Heading as v } from "./fondue-components15.js";
+import { Label as A } from "./fondue-components16.js";
+import { LoadingBar as y } from "./fondue-components17.js";
+import { LoadingCircle as H } from "./fondue-components18.js";
+import { ScrollArea as j } from "./fondue-components19.js";
+import { Section as z } from "./fondue-components20.js";
+import { SegmentedControl as J } from "./fondue-components21.js";
+import { Select as M } from "./fondue-components22.js";
+import { Slider as O } from "./fondue-components23.js";
+import { Switch as R } from "./fondue-components24.js";
+import { Table as V } from "./fondue-components25.js";
+import { Tabs as X } from "./fondue-components26.js";
+import { Text as Z } from "./fondue-components27.js";
+import { TextInput as $ } from "./fondue-components28.js";
+import { ThemeContext as ro, ThemeProvider as eo, useFondueTheme as to } from "./fondue-components29.js";
+import { Tooltip as mo } from "./fondue-components30.js";
 export {
   t as Accordion,
-  m as Box,
-  f as Button,
-  l as Checkbox,
-  d as ColorPicker,
-  c as Dialog,
-  S as Divider,
-  h as Dropdown,
-  C as Flex,
-  B as Flyout,
-  F as Grid,
-  k as Heading,
-  v as Label,
-  A as LoadingBar,
-  y as LoadingCircle,
-  H as ScrollArea,
-  j as Section,
-  z as SegmentedControl,
-  J as Select,
-  M as Slider,
-  O as Switch,
-  R as Table,
-  V as Tabs,
-  X as Text,
-  Z as TextInput,
-  $ as ThemeContext,
-  oo as ThemeProvider,
-  to as Tooltip,
-  ro as useFondueTheme
+  m as Badge,
+  f as Box,
+  l as Button,
+  n as Checkbox,
+  c as ColorPicker,
+  g as Dialog,
+  h as Divider,
+  C as Dropdown,
+  B as Flex,
+  F as Flyout,
+  k as Grid,
+  v as Heading,
+  A as Label,
+  y as LoadingBar,
+  H as LoadingCircle,
+  j as ScrollArea,
+  z as Section,
+  J as SegmentedControl,
+  M as Select,
+  O as Slider,
+  R as Switch,
+  V as Table,
+  X as Tabs,
+  Z as Text,
+  $ as TextInput,
+  ro as ThemeContext,
+  eo as ThemeProvider,
+  mo as Tooltip,
+  to as useFondueTheme
 };
 //# sourceMappingURL=fondue-components.js.map

package/dist/fondue-components.js.map

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

package/dist/fondue-components10.js

@@ -1,147 +1,33 @@
-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 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 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 });
-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 });
-S.displayName = "Dropdown.Trigger";
-const x = {
-  compact: 8,
-  comfortable: 12,
-  spacious: 16
-}, O = {
-  compact: 8,
-  spacious: 24
-}, C = ({
-  side: o = "bottom",
-  align: t = "start",
-  triggerOffset: e = "compact",
-  children: r,
-  preventTriggerFocusOnClose: a,
-  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,
+import { jsx as d } from "react/jsx-runtime";
+import * as m from "@radix-ui/react-separator";
+import { forwardRef as s } from "react";
+import { cn as f } from "./fondue-components36.js";
+import { dividerStyles as p } from "./fondue-components49.js";
+const n = s(
+  ({
+    "data-test-id": r = "fondue-divider",
+    direction: o = "horizontal",
+    className: t,
+    variant: i,
+    ...e
+  }, a) => /* @__PURE__ */ d(
+    m.Root,
     {
-      align: t,
-      collisionPadding: O[u],
-      sideOffset: x[e],
-      side: o,
-      className: s.content,
-      "data-test-id": p,
-      ref: l,
-      onCloseAutoFocus: (w) => {
-        a && w.preventDefault();
-      },
-      children: r
+      ref: a,
+      className: f(
+        p({
+          direction: o,
+          variant: i,
+          ...e
+        }),
+        t
+      ),
+      "data-test-id": r
     }
-  ) }) });
-};
-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__ */ 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;
-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 });
-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(M, { className: s.subMenuIndicator, size: 16 })
-  ] });
-};
-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 }) }) });
-};
-F.displayName = "Dropdown.SubContent";
-const y = ({
-  children: o,
-  disabled: t,
-  textValue: e,
-  onSelect: r,
-  emphasis: a = "default",
-  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": p,
-      "data-emphasis": a,
-      ref: m,
-      disabled: t,
-      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
-    }
-  );
-};
-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
-};
+  )
+);
+n.displayName = "Divider";
 export {
-  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
+  n as Divider
 };
 //# 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, 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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"}
+{"version":3,"file":"fondue-components10.js","sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as Separator from '@radix-ui/react-separator';\nimport { forwardRef, type ForwardedRef, type ReactElement } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport { dividerStyles } from './styles/dividerStyles';\n\ntype DividerStyle = 'noline' | 'dashed' | 'solid';\ntype DividerPadding = 'none' | 'small' | 'medium' | 'large';\ntype DividerDirection = 'horizontal' | 'vertical';\ntype DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';\n\nexport type DividerProps = {\n    /**\n     * The style of the divider\n     * @default \"solid\"\n     */\n    variant?: DividerStyle;\n    /**\n     * The padding of the divider\n     * @default \"medium\"\n     */\n    padding?: DividerPadding;\n    /**\n     * The color of the divider\n     * @default \"default\"\n     */\n    color?: DividerColor;\n    /**\n     * The direction of the divider\n     * @default \"horizontal\"\n     */\n    direction?: DividerDirection;\n    'data-test-id'?: string;\n    className?: string;\n};\n\nexport const Divider = forwardRef<HTMLDivElement, DividerProps>(\n    (\n        {\n            'data-test-id': dataTestId = 'fondue-divider',\n            direction = 'horizontal',\n            className,\n            variant,\n            ...props\n        }: DividerProps,\n        ref: ForwardedRef<HTMLDivElement | null>,\n    ): ReactElement => {\n        return (\n            <Separator.Root\n                ref={ref}\n                className={cn(\n                    dividerStyles({\n                        direction,\n                        variant,\n                        ...props,\n                    }),\n                    className,\n                )}\n                data-test-id={dataTestId}\n            />\n        );\n    },\n);\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","forwardRef","dataTestId","direction","className","variant","props","ref","jsx","Separator","cn","dividerStyles"],"mappings":";;;;;AAuCO,MAAMA,IAAUC;AAAA,EACnB,CACI;AAAA,IACI,gBAAgBC,IAAa;AAAA,IAC7B,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACG,KAAAF;AAAA,MACA,WAAWG;AAAA,QACPC,EAAc;AAAA,UACV,WAAAR;AAAA,UACA,SAAAE;AAAA,UACA,GAAGC;AAAA,QAAA,CACN;AAAA,QACDF;AAAA,MACJ;AAAA,MACA,gBAAcF;AAAA,IAAA;AAAA,EAClB;AAGZ;AAEAF,EAAQ,cAAc;"}

package/dist/fondue-components11.js

@@ -1,40 +1,147 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { propsToCssVariables as y } from "./fondue-components31.js";
-import x from "./fondue-components49.js";
-const u = n(
-  ({
-    as: a = "div",
-    "data-test-id": e = "fondue-flex",
-    children: r,
-    role: i,
-    "aria-label": d,
-    "aria-hidden": s,
-    "aria-describedby": t,
-    "aria-labelledby": o,
-    "aria-expanded": l,
-    "aria-haspopup": p,
-    ...b
-  }, f) => /* @__PURE__ */ m(
-    a,
+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 G, Children as A, useRef as v } from "react";
+import { useFondueTheme as D, ThemeProvider as b } from "./fondue-components29.js";
+import { useProcessedChildren as h } from "./fondue-components50.js";
+import s from "./fondue-components51.js";
+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 });
+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 });
+S.displayName = "Dropdown.Trigger";
+const x = {
+  compact: 8,
+  comfortable: 12,
+  spacious: 16
+}, O = {
+  compact: 8,
+  spacious: 24
+}, C = ({
+  side: o = "bottom",
+  align: t = "start",
+  triggerOffset: e = "compact",
+  children: r,
+  preventTriggerFocusOnClose: a,
+  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,
     {
-      className: x.root,
-      "data-test-id": e,
-      style: y(b, { justify: "justify-content" }),
-      role: i,
-      "aria-label": d,
-      "aria-hidden": s,
-      "aria-describedby": t,
-      "aria-labelledby": o,
-      "aria-expanded": l,
-      "aria-haspopup": p,
-      ref: f,
+      align: t,
+      collisionPadding: O[u],
+      sideOffset: x[e],
+      side: o,
+      className: s.content,
+      "data-test-id": p,
+      ref: l,
+      onCloseAutoFocus: (w) => {
+        a && w.preventDefault();
+      },
       children: r
     }
-  )
-);
-u.displayName = "Flex";
+  ) }) });
+};
+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__ */ 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;
+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 });
+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(M, { className: s.subMenuIndicator, size: 16 })
+  ] });
+};
+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 }) }) });
+};
+F.displayName = "Dropdown.SubContent";
+const y = ({
+  children: o,
+  disabled: t,
+  textValue: e,
+  onSelect: r,
+  emphasis: a = "default",
+  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": p,
+      "data-emphasis": a,
+      ref: m,
+      disabled: t,
+      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
+    }
+  );
+};
+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 {
-  u as Flex
+  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-components11.js.map

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/flex.module.scss';\n\nexport type FlexProps = LayoutComponentProps & {\n    /**\n     * The element to render the Flex component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n    /**\n     * The display property.\n     * @default 'flex'\n     */\n    display?: Responsive<'none' | 'flex' | 'inline-flex'>;\n    /**\n     * The direction of the children.\n     * @default 'row'\n     */\n    direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;\n    /**\n     * The wrap property.\n     */\n    wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(\n    (\n        {\n            as: Component = 'div',\n            'data-test-id': dataTestId = 'fondue-flex',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Component\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props, { justify: 'justify-content' })}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </Component>\n        );\n    },\n);\nFlex.displayName = 'Flex';\n"],"names":["Flex","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AAuDO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,KAEPC,MAGI,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,mBAAmB;AAAA,MAChE,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EACL;AAGZ;AACAJ,EAAK,cAAc;"}
+{"version":3,"file":"fondue-components11.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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"}