@frontify/fondue-components 13.0.2 → 14.1.0

package/dist/fondue-components.js

@@ -1,58 +1,60 @@
 /* empty css                   */
-import { Box as t } from "./fondue-components3.js";
-import { Button as m } from "./fondue-components4.js";
-import { Checkbox as f } from "./fondue-components5.js";
-import { ColorPicker as l } from "./fondue-components6.js";
-import { Dialog as d } from "./fondue-components7.js";
-import { Divider as T } from "./fondue-components8.js";
-import { Dropdown as S } from "./fondue-components9.js";
-import { Flex as h } from "./fondue-components10.js";
-import { Flyout as C } from "./fondue-components11.js";
-import { Grid as B } from "./fondue-components12.js";
-import { Heading as F } from "./fondue-components13.js";
-import { Label as k } from "./fondue-components14.js";
-import { LoadingBar as v } from "./fondue-components15.js";
-import { LoadingCircle as P } from "./fondue-components16.js";
-import { ScrollArea as A } from "./fondue-components17.js";
-import { Section as H } from "./fondue-components18.js";
-import { SegmentedControl as j } from "./fondue-components19.js";
-import { Select as z } from "./fondue-components20.js";
-import { Slider as J } from "./fondue-components21.js";
-import { Switch as M } from "./fondue-components22.js";
-import { Table as O } from "./fondue-components23.js";
-import { Tabs as R } from "./fondue-components24.js";
-import { Text as V } from "./fondue-components25.js";
-import { TextInput as X } from "./fondue-components26.js";
-import { ThemeContext as Z, ThemeProvider as _, useFondueTheme as $ } from "./fondue-components27.js";
-import { Tooltip as ro } from "./fondue-components28.js";
+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";
 export {
-  t as Box,
-  m as Button,
-  f as Checkbox,
-  l as ColorPicker,
-  d as Dialog,
-  T as Divider,
-  S as Dropdown,
-  h as Flex,
-  C as Flyout,
-  B as Grid,
-  F as Heading,
-  k as Label,
-  v as LoadingBar,
-  P as LoadingCircle,
-  A as ScrollArea,
-  H as Section,
-  j as SegmentedControl,
-  z as Select,
-  J as Slider,
-  M as Switch,
-  O as Table,
-  R as Tabs,
-  V as Text,
-  X as TextInput,
-  Z as ThemeContext,
-  _ as ThemeProvider,
-  ro as Tooltip,
-  $ as useFondueTheme
+  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
 };
 //# 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,40 +1,130 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { propsToCssVariables as y } from "./fondue-components29.js";
-import x from "./fondue-components47.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 d, jsxs as m } from "react/jsx-runtime";
+import { IconCaretRight as I } from "@frontify/fondue-icons";
+import * as n from "@radix-ui/react-dropdown-menu";
+import { forwardRef as i } from "react";
+import { useFondueTheme as w, ThemeProvider as f } from "./fondue-components28.js";
+import { useProcessedChildren as g } from "./fondue-components47.js";
+import a from "./fondue-components48.js";
+const D = ({
+  children: t,
+  open: o,
+  modal: e = !1,
+  onOpenChange: r,
+  "data-test-id": s = "fondue-dropdown"
+}) => /* @__PURE__ */ d(n.Root, { open: o, modal: e, onOpenChange: r, "data-test-id": s, children: t });
+D.displayName = "Dropdown.Root";
+const b = ({
+  asChild: t = !0,
+  children: o,
+  "data-test-id": e = "fondue-dropdown-trigger",
+  ...r
+}, s) => /* @__PURE__ */ d(n.Trigger, { asChild: t, "data-test-id": e, ref: s, ...r, children: o });
+b.displayName = "Dropdown.Trigger";
+const P = {
+  compact: 8,
+  comfortable: 12,
+  spacious: 16
+}, S = ({
+  side: t = "bottom",
+  align: o = "start",
+  triggerOffset: e = "compact",
+  children: r,
+  preventTriggerFocusOnClose: s,
+  "data-test-id": p = "fondue-dropdown-content"
+}, u) => {
+  const c = w();
+  return /* @__PURE__ */ d(n.Portal, { children: /* @__PURE__ */ d(f, { theme: c, children: /* @__PURE__ */ d(
+    n.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: o,
+      collisionPadding: 8,
+      sideOffset: P[e],
+      side: t,
+      className: a.content,
+      "data-test-id": p,
+      ref: u,
+      onCloseAutoFocus: (l) => {
+        s && l.preventDefault();
+      },
       children: r
     }
-  )
-);
-u.displayName = "Flex";
+  ) }) });
+};
+S.displayName = "Dropdown.Content";
+const N = ({ children: t, heading: o, "data-test-id": e = "fondue-dropdown-group" }, r) => /* @__PURE__ */ m(n.Group, { className: a.group, "data-test-id": e, ref: r, children: [
+  o ? /* @__PURE__ */ d("div", { className: a.groupHeading, children: /* @__PURE__ */ d("span", { "aria-label": o, children: o }) }) : null,
+  t
+] });
+N.displayName = "Dropdown.Group";
+const C = ({
+  children: t,
+  "data-test-id": o = "fondue-dropdown-submenu"
+}) => /* @__PURE__ */ d(n.Sub, { "data-test-id": o, children: t });
+C.displayName = "Dropdown.SubMenu";
+const h = ({ children: t, "data-test-id": o = "fondue-dropdown-subtrigger" }, e) => {
+  const { content: r } = g(t);
+  return /* @__PURE__ */ m(n.SubTrigger, { className: a.subTrigger, "data-test-id": o, ref: e, children: [
+    r,
+    /* @__PURE__ */ d(I, { className: a.subMenuIndicator, size: 16 })
+  ] });
+};
+h.displayName = "Dropdown.SubTrigger";
+const R = ({ children: t, "data-test-id": o = "fondue-dropdown-subcontent" }, e) => {
+  const r = w();
+  return /* @__PURE__ */ d(n.Portal, { children: /* @__PURE__ */ d(f, { theme: r, children: /* @__PURE__ */ d(n.SubContent, { className: a.subContent, "data-test-id": o, ref: e, children: t }) }) });
+};
+R.displayName = "Dropdown.SubContent";
+const T = ({
+  children: t,
+  disabled: o,
+  textValue: e,
+  onSelect: r,
+  emphasis: s = "default",
+  asChild: p = !1,
+  "data-test-id": u = "fondue-dropdown-subtrigger",
+  ...c
+}, l) => {
+  const { content: F } = g(t);
+  return /* @__PURE__ */ d(
+    n.Item,
+    {
+      onSelect: r,
+      className: a.item,
+      textValue: e,
+      "data-test-id": u,
+      "data-emphasis": s,
+      ref: l,
+      disabled: o,
+      asChild: p,
+      ...c,
+      children: F
+    }
+  );
+};
+T.displayName = "Dropdown.Item";
+const y = ({ children: t, name: o, "data-test-id": e = "fondue-dropdown-slot" }, r) => /* @__PURE__ */ d("div", { "data-name": o, className: a.slot, "data-test-id": e, ref: r, children: t });
+y.displayName = "Dropdown.Slot";
+const G = i(b), M = i(S), v = i(N), x = i(h), A = i(R), j = i(T), z = i(y), E = {
+  Root: D,
+  Trigger: G,
+  Content: M,
+  Group: v,
+  SubMenu: C,
+  SubTrigger: x,
+  SubContent: A,
+  Item: j,
+  Slot: z
+};
 export {
-  u as Flex
+  E as Dropdown,
+  S as DropdownContent,
+  N as DropdownGroup,
+  T as DropdownItem,
+  D as DropdownRoot,
+  y as DropdownSlot,
+  R as DropdownSubContent,
+  C as DropdownSubMenu,
+  h as DropdownSubTrigger,
+  b as DropdownTrigger
 };
 //# sourceMappingURL=fondue-components10.js.map

package/dist/fondue-components10.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components10.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { 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-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 { forwardRef, 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';\n\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\nconst SPACING_MAP: Record<DropdownSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nexport const DropdownContent = (\n    {\n        side = 'bottom',\n        align = 'start',\n        triggerOffset = 'compact',\n        children,\n        preventTriggerFocusOnClose,\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={8}\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    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","DropdownContent","side","align","triggerOffset","preventTriggerFocusOnClose","theme","useFondueTheme","ThemeProvider","styles","event","DropdownGroup","heading","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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"}

package/dist/fondue-components11.js

@@ -1,88 +1,40 @@
-import { jsx as a, jsxs as l } from "react/jsx-runtime";
-import { IconCross as w } from "@frontify/fondue-icons";
-import * as i from "@radix-ui/react-popover";
-import { forwardRef as s } from "react";
-import { addAutoFocusAttribute as x, addShowFocusRing as C } from "./fondue-components42.js";
-import { useFondueTheme as b, ThemeProvider as T } from "./fondue-components27.js";
-import d from "./fondue-components48.js";
-const n = ({ children: t, ...o }) => /* @__PURE__ */ a(i.Root, { ...o, children: t });
-n.displayName = "Flyout.Root";
-const m = ({ asChild: t = !0, children: o, "data-test-id": e = "fondue-flyout-trigger", ...r }, u) => /* @__PURE__ */ a(
-  i.Trigger,
-  {
-    onMouseDown: x,
-    "data-auto-focus-visible": "true",
-    "data-auto-focus-trigger": !0,
-    "data-test-id": e,
-    asChild: t,
-    ref: u,
-    ...r,
-    children: o
-  }
+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,
+    {
+      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,
+      children: r
+    }
+  )
 );
-m.displayName = "Flyout.Trigger";
-const y = ({
-  align: t = "start",
-  maxWidth: o = "360px",
-  padding: e = "compact",
-  rounded: r = "medium",
-  width: u = "fit-content",
-  shadow: F = "medium",
-  "data-test-id": g = "fondue-flyout-content",
-  children: h,
-  ...N
-}, v) => {
-  const R = b();
-  return /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ l(T, { theme: R, children: [
-    /* @__PURE__ */ a("div", { className: d.overlay }),
-    /* @__PURE__ */ a(
-      i.Content,
-      {
-        style: {
-          "--flyout-max-width": o,
-          "--flyout-width": u
-        },
-        ref: v,
-        align: t,
-        collisionPadding: 8,
-        sideOffset: 8,
-        className: d.root,
-        "data-flyout-spacing": e,
-        "data-rounded": r,
-        "data-shadow": F,
-        "data-test-id": g,
-        onFocus: C,
-        ...N,
-        children: h
-      }
-    )
-  ] }) });
-};
-y.displayName = "Flyout.Content";
-const c = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, r) => /* @__PURE__ */ l("div", { "data-test-id": e, ref: r, className: d.header, children: [
-  /* @__PURE__ */ a("div", { children: o }),
-  t && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: d.close, children: /* @__PURE__ */ a(w, { size: 20 }) })
-] });
-c.displayName = "Flyout.Header";
-const f = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: d.footer, children: t });
-f.displayName = "Flyout.Footer";
-const p = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: d.body, children: t });
-p.displayName = "Flyout.Body";
-const D = {
-  Root: n,
-  Trigger: s(m),
-  Content: s(y),
-  Header: s(c),
-  Footer: s(f),
-  Body: s(p)
-};
+u.displayName = "Flex";
 export {
-  D as Flyout,
-  p as FlyoutBody,
-  y as FlyoutContent,
-  f as FlyoutFooter,
-  c as FlyoutHeader,
-  n as FlyoutRoot,
-  m as FlyoutTrigger
+  u as Flex
 };
 //# sourceMappingURL=fondue-components11.js.map

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components11.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, 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\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const 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={8}\n                    sideOffset={8}\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 = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body' }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} data-flyout-spacing=\"compact\" className={styles.body}>\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","theme","useFondueTheme","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","IconCross","FlyoutFooter","FlyoutBody","Flyout","forwardRef"],"mappings":";;;;;;;AA8BO,MAAMA,IAAa,CAAC,EAAE,UAAAC,GAAU,GAAGC,0BAC9BC,EAAa,MAAb,EAAmB,GAAGD,GAAQ,UAAAD,GAAS;AAEnDD,EAAW,cAAc;AAYlB,MAAMI,IAAgB,CACzB,EAAE,SAAAC,IAAU,IAAM,UAAAJ,GAAU,gBAAgBK,IAAa,yBAAyB,GAAGJ,EAAM,GAC3FK,MAGI,gBAAAC;AAAA,EAACL,EAAa;AAAA,EAAb;AAAA,IACG,aAAaM;AAAA,IACb,2BAAwB;AAAA,IACxB,2BAAuB;AAAA,IACvB,gBAAcH;AAAA,IACd,SAAAD;AAAA,IACA,KAAAE;AAAA,IACC,GAAGL;AAAA,IAEH,UAAAD;AAAA,EAAA;AACL;AAGRG,EAAc,cAAc;AA0CrB,MAAMM,IAAgB,CACzB;AAAA,EACI,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,gBAAgBV,IAAa;AAAA,EAC7B,UAAAL;AAAA,EACA,GAAGC;AACP,GACAK,MACC;AACD,QAAMU,IAAQC,EAAe;AAC7B,2BACKf,EAAa,QAAb,EACG,UAAA,gBAAAgB,EAACC,KAAc,OAAAH,GACX,UAAA;AAAA,IAAC,gBAAAT,EAAA,OAAA,EAAI,WAAWa,EAAO,QAAS,CAAA;AAAA,IAChC,gBAAAb;AAAA,MAACL,EAAa;AAAA,MAAb;AAAA,QACG,OACI;AAAA,UACI,sBAAsBS;AAAA,UACtB,kBAAkBG;AAAA,QACtB;AAAA,QAEJ,KAAAR;AAAA,QACA,OAAAI;AAAA,QACA,kBAAkB;AAAA,QAClB,YAAY;AAAA,QACZ,WAAWU,EAAO;AAAA,QAClB,uBAAqBR;AAAA,QACrB,gBAAcC;AAAA,QACd,eAAaE;AAAA,QACb,gBAAcV;AAAA,QACd,SAASgB;AAAA,QACR,GAAGpB;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,EAAA,CACJ,EACJ,CAAA;AAER;AACAS,EAAc,cAAc;AAYf,MAAAa,IAAe,CACxB,EAAE,iBAAAC,GAAiB,UAAAvB,GAAU,gBAAgBK,IAAa,uBAAuB,GACjFC,wBAGK,OAAI,EAAA,gBAAcD,GAAY,KAAAC,GAAU,WAAWc,EAAO,QACvD,UAAA;AAAA,EAAA,gBAAAb,EAAC,SAAK,UAAAP,GAAS;AAAA,EACduB,KACI,gBAAAhB,EAAAL,EAAa,OAAb,EAAmB,MAAK,UAAS,gBAAc,GAAGG,CAAU,UAAU,WAAWe,EAAO,OACrF,4BAACI,GAAU,EAAA,MAAM,IAAI,EACzB,CAAA;AAAA,GAER;AAGRF,EAAa,cAAc;AAId,MAAAG,IAAe,CACxB,EAAE,UAAAzB,GAAU,gBAAgBK,IAAa,0BACzCC,MAGI,gBAAAC,EAAC,SAAI,gBAAcF,GAAY,KAAAC,GAAU,WAAWc,EAAO,QACtD,UAAApB,GACL;AAGRyB,EAAa,cAAc;AAId,MAAAC,IAAa,CACtB,EAAE,UAAA1B,GAAU,gBAAgBK,IAAa,wBACzCC,MAGI,gBAAAC,EAAC,OAAI,EAAA,gBAAcF,GAAY,KAAAC,GAAU,uBAAoB,WAAU,WAAWc,EAAO,MACpF,UAAApB,EACL,CAAA;AAGR0B,EAAW,cAAc;AAElB,MAAMC,IAAS;AAAA,EAClB,MAAM5B;AAAA,EACN,SAAS6B,EAAkDzB,CAAa;AAAA,EACxE,SAASyB,EAA+CnB,CAAa;AAAA,EACrE,QAAQmB,EAA8CN,CAAY;AAAA,EAClE,QAAQM,EAA8CH,CAAY;AAAA,EAClE,MAAMG,EAA4CF,CAAU;AAChE;"}
+{"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;"}

package/dist/fondue-components12.js

@@ -1,40 +1,93 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { propsToCssVariables as n } from "./fondue-components29.js";
-import u from "./fondue-components49.js";
-const c = y(
-  ({
-    as: a = "div",
-    "data-test-id": r = "fondue-grid",
-    children: i,
-    role: e,
-    "aria-label": d,
-    "aria-hidden": s,
-    "aria-describedby": t,
-    "aria-labelledby": o,
-    "aria-expanded": p,
-    "aria-haspopup": l,
-    ...b
-  }, m) => /* @__PURE__ */ f(
-    a,
-    {
-      className: u.root,
-      "data-test-id": r,
-      style: n(b, { justify: "justify-items" }),
-      role: e,
-      "aria-label": d,
-      "aria-hidden": s,
-      "aria-describedby": t,
-      "aria-labelledby": o,
-      "aria-expanded": p,
-      "aria-haspopup": l,
-      ref: m,
-      children: i
-    }
-  )
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+import { IconCross as b } from "@frontify/fondue-icons";
+import * as i from "@radix-ui/react-popover";
+import { forwardRef as s } from "react";
+import { addAutoFocusAttribute as w, addShowFocusRing as x } from "./fondue-components44.js";
+import { useFondueTheme as P, ThemeProvider as T } from "./fondue-components28.js";
+import d from "./fondue-components50.js";
+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", ...r }, u) => /* @__PURE__ */ a(
+  i.Trigger,
+  {
+    onMouseDown: w,
+    "data-auto-focus-visible": "true",
+    "data-auto-focus-trigger": !0,
+    "data-test-id": e,
+    asChild: t,
+    ref: u,
+    ...r,
+    children: o
+  }
 );
-c.displayName = "Grid";
+c.displayName = "Flyout.Trigger";
+const A = {
+  compact: 8,
+  comfortable: 12,
+  spacious: 16
+}, m = ({
+  align: t = "start",
+  maxWidth: o = "360px",
+  padding: e = "compact",
+  rounded: r = "medium",
+  width: u = "fit-content",
+  shadow: F = "medium",
+  triggerOffset: g = "compact",
+  "data-test-id": h = "fondue-flyout-content",
+  children: N,
+  ...v
+}, C) => {
+  const R = P();
+  return /* @__PURE__ */ a(i.Portal, { children: /* @__PURE__ */ l(T, { theme: R, children: [
+    /* @__PURE__ */ a("div", { className: d.overlay }),
+    /* @__PURE__ */ a(
+      i.Content,
+      {
+        style: {
+          "--flyout-max-width": o,
+          "--flyout-width": u
+        },
+        ref: C,
+        align: t,
+        collisionPadding: 8,
+        sideOffset: A[g],
+        className: d.root,
+        "data-flyout-spacing": e,
+        "data-rounded": r,
+        "data-shadow": F,
+        "data-test-id": h,
+        onFocus: x,
+        ...v,
+        children: N
+      }
+    )
+  ] }) });
+};
+m.displayName = "Flyout.Content";
+const y = ({ showCloseButton: t, children: o, "data-test-id": e = "fondue-flyout-header" }, r) => /* @__PURE__ */ l("div", { "data-test-id": e, ref: r, className: d.header, children: [
+  /* @__PURE__ */ a("div", { children: o }),
+  t && /* @__PURE__ */ a(i.Close, { role: "button", "data-test-id": `${e}-close`, className: d.close, children: /* @__PURE__ */ a(b, { size: 20 }) })
+] });
+y.displayName = "Flyout.Header";
+const f = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, className: d.footer, children: t });
+f.displayName = "Flyout.Footer";
+const p = ({ children: t, "data-test-id": o = "fondue-flyout-body" }, e) => /* @__PURE__ */ a("div", { "data-test-id": o, ref: e, "data-flyout-spacing": "compact", className: d.body, children: t });
+p.displayName = "Flyout.Body";
+const D = {
+  Root: n,
+  Trigger: s(c),
+  Content: s(m),
+  Header: s(y),
+  Footer: s(f),
+  Body: s(p)
+};
 export {
-  c as Grid
+  D as Flyout,
+  p as FlyoutBody,
+  m as FlyoutContent,
+  f as FlyoutFooter,
+  y as FlyoutHeader,
+  n as FlyoutRoot,
+  c as FlyoutTrigger
 };
 //# sourceMappingURL=fondue-components12.js.map