@frontify/fondue-components 22.1.0 → 22.1.1

package/dist/fondue-components11.js

@@ -1,10 +1,10 @@
 import { jsx as n, jsxs as g } from "react/jsx-runtime";
 import { IconCaretRight as M } from "@frontify/fondue-icons";
 import * as a from "@radix-ui/react-dropdown-menu";
-import { forwardRef as c, useMemo as v, Children as G, useRef as A } from "react";
+import { forwardRef as p, useMemo as A, Children as G, useRef as O } from "react";
 import { useFondueTheme as D, ThemeProvider as b } from "./fondue-components31.js";
 import { useProcessedChildren as h } from "./fondue-components53.js";
-import s from "./fondue-components54.js";
+import i from "./fondue-components54.js";
 const N = ({
   children: o,
   open: t,
@@ -20,7 +20,7 @@ const S = ({
   ...r
 }, d) => /* @__PURE__ */ n(a.Trigger, { asChild: o, "data-test-id": e, ref: d, ...r, children: t });
 S.displayName = "Dropdown.Trigger";
-const O = {
+const v = {
   compact: 8,
   comfortable: 12,
   spacious: 16
@@ -33,27 +33,27 @@ const O = {
   triggerOffset: e = "compact",
   children: r,
   preventTriggerFocusOnClose: d,
-  viewportCollisionPadding: p = "compact",
+  viewportCollisionPadding: c = "compact",
   forceMount: l = !1,
   "data-test-id": m = "fondue-dropdown-content"
 }, w) => {
-  const { theme: f, dir: i } = D();
-  return /* @__PURE__ */ n(a.Portal, { forceMount: l || void 0, children: /* @__PURE__ */ n(b, { theme: f, dir: i, children: /* @__PURE__ */ n(
+  const { theme: f, dir: u } = D();
+  return /* @__PURE__ */ n(a.Portal, { forceMount: l || void 0, children: /* @__PURE__ */ n(b, { theme: f, dir: u, children: /* @__PURE__ */ n(
     a.Content,
     {
-      dir: i,
+      dir: u,
       align: t,
-      collisionPadding: x[p],
-      sideOffset: O[e],
+      collisionPadding: x[c],
+      sideOffset: v[e],
       side: o,
-      className: s.content,
+      className: i.content,
       "data-test-id": m,
       ref: w,
-      onPointerDownOutside: (u) => {
-        u.preventDefault();
+      onPointerDownOutside: (s) => {
+        l && s.currentTarget instanceof HTMLElement && s.currentTarget.getAttribute("data-state") === "open" && s.preventDefault();
       },
-      onCloseAutoFocus: (u) => {
-        d && u.preventDefault();
+      onCloseAutoFocus: (s) => {
+        d && s.preventDefault();
       },
       forceMount: l || void 0,
       children: r
@@ -61,11 +61,11 @@ const O = {
   ) }) });
 };
 C.displayName = "Dropdown.Content";
-const R = ({ children: o, heading: t, "data-test-id": e = "fondue-dropdown-group" }, r) => v(
-  () => G.toArray(o).filter((p) => p !== null).length > 0,
+const R = ({ children: o, heading: t, "data-test-id": e = "fondue-dropdown-group" }, r) => A(
+  () => G.toArray(o).filter((c) => c !== null).length > 0,
   [o]
-) ? /* @__PURE__ */ g(a.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,
+) ? /* @__PURE__ */ g(a.Group, { className: i.group, "data-test-id": e, ref: r, children: [
+  t ? /* @__PURE__ */ n("div", { className: i.groupHeading, children: /* @__PURE__ */ n("span", { "aria-label": t, children: t }) }) : null,
   o
 ] }) : null;
 R.displayName = "Dropdown.Group";
@@ -76,9 +76,9 @@ const T = ({
 T.displayName = "Dropdown.SubMenu";
 const I = ({ children: o, "data-test-id": t = "fondue-dropdown-subtrigger" }, e) => {
   const { content: r } = h(o);
-  return /* @__PURE__ */ g(a.SubTrigger, { className: s.subTrigger, "data-test-id": t, ref: e, children: [
+  return /* @__PURE__ */ g(a.SubTrigger, { className: i.subTrigger, "data-test-id": t, ref: e, children: [
     r,
-    /* @__PURE__ */ n(M, { className: s.subMenuIndicator, size: 16 })
+    /* @__PURE__ */ n(M, { className: i.subMenuIndicator, size: 16 })
   ] });
 };
 I.displayName = "Dropdown.SubTrigger";
@@ -88,7 +88,7 @@ const F = ({ children: o, "data-test-id": t = "fondue-dropdown-subcontent" }, e)
     a.SubContent,
     {
       dir: d,
-      className: s.subContent,
+      className: i.subContent,
       "data-test-id": t,
       ref: e,
       children: o
@@ -102,31 +102,31 @@ const y = ({
   textValue: e,
   onSelect: r,
   emphasis: d = "default",
-  asChild: p = !1,
+  asChild: c = !1,
   "data-test-id": l = "fondue-dropdown-subtrigger",
   ...m
 }, w) => {
-  const { content: f } = h(o), i = A(!1);
+  const { content: f } = h(o), u = O(!1);
   return /* @__PURE__ */ n(
     a.Item,
     {
       onSelect: r,
-      className: s.item,
+      className: i.item,
       textValue: e,
       "data-test-id": l,
       "data-emphasis": d,
       ref: w,
       disabled: t,
-      asChild: p,
-      "data-show-focus-ring": i.current,
+      asChild: c,
+      "data-show-focus-ring": u.current,
       onMouseEnter: () => {
-        i.current = !0;
+        u.current = !0;
       },
-      onFocus: (u) => {
-        i.current || (u.target.dataset.showFocusRing = "true");
+      onFocus: (s) => {
+        u.current || (s.target.dataset.showFocusRing = "true");
       },
-      onBlur: (u) => {
-        u.target.dataset.showFocusRing = "false", i.current = !1;
+      onBlur: (s) => {
+        s.target.dataset.showFocusRing = "false", u.current = !1;
       },
       ...m,
       children: f
@@ -134,21 +134,21 @@ const y = ({
   );
 };
 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 });
+const P = ({ children: o, name: t, "data-test-id": e = "fondue-dropdown-slot" }, r) => /* @__PURE__ */ n("div", { "data-name": t, className: i.slot, "data-test-id": e, ref: r, children: o });
 P.displayName = "Dropdown.Slot";
-const _ = c(S), j = c(C), E = c(R), L = c(I), z = c(F), B = c(y), H = c(P), Q = {
+const _ = p(S), E = p(C), L = p(R), j = p(I), H = p(F), z = p(y), B = p(P), U = {
   Root: N,
   Trigger: _,
-  Content: j,
-  Group: E,
+  Content: E,
+  Group: L,
   SubMenu: T,
-  SubTrigger: L,
-  SubContent: z,
-  Item: B,
-  Slot: H
+  SubTrigger: j,
+  SubContent: H,
+  Item: z,
+  Slot: B
 };
 export {
-  Q as Dropdown,
+  U as Dropdown,
   C as DropdownContent,
   R as DropdownGroup,
   y as DropdownItem,

package/dist/fondue-components11.js.map

@@ -1 +1 @@
-{"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     * When true, the content will always be mounted in the DOM. Before enabling, make sure you really need it.\n     * @default false\n     */\n    forceMount?: boolean;\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        forceMount = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal forceMount={forceMount || undefined}>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixDropdown.Content\n                    // @ts-expect-error - dir prop works at runtime but is not in the Radix UI type definition\n                    dir={dir}\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                    onPointerDownOutside={(event) => {\n                        event.preventDefault();\n                    }}\n                    onCloseAutoFocus={(event) => {\n                        if (preventTriggerFocusOnClose) {\n                            event.preventDefault();\n                        }\n                    }}\n                    forceMount={forceMount || undefined}\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, dir } = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixDropdown.SubContent\n                    // @ts-expect-error - dir prop works at runtime but is not in the Radix UI type definition\n                    dir={dir}\n                    className={styles.subContent}\n                    data-test-id={dataTestId}\n                    ref={ref}\n                >\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","forceMount","theme","dir","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-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     * When true, the content will always be mounted in the DOM. Before enabling, make sure you really need it.\n     * @default false\n     */\n    forceMount?: boolean;\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        forceMount = false,\n        'data-test-id': dataTestId = 'fondue-dropdown-content',\n    }: DropdownContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal forceMount={forceMount || undefined}>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixDropdown.Content\n                    // @ts-expect-error - dir prop works at runtime but is not in the Radix UI type definition\n                    dir={dir}\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                    onPointerDownOutside={(event) => {\n                        if (forceMount && event.currentTarget instanceof HTMLElement) {\n                            // Trigger is technically outside the dropdown content and when forceMount is true\n                            // the content is always in the DOM so the onPointerDownOutside event is triggered\n                            const dropdownIsOpen = event.currentTarget.getAttribute('data-state') === 'open';\n                            if (dropdownIsOpen) {\n                                event.preventDefault();\n                            }\n                        }\n                    }}\n                    onCloseAutoFocus={(event) => {\n                        if (preventTriggerFocusOnClose) {\n                            event.preventDefault();\n                        }\n                    }}\n                    forceMount={forceMount || undefined}\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, dir } = useFondueTheme();\n\n    return (\n        <RadixDropdown.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixDropdown.SubContent\n                    // @ts-expect-error - dir prop works at runtime but is not in the Radix UI type definition\n                    dir={dir}\n                    className={styles.subContent}\n                    data-test-id={dataTestId}\n                    ref={ref}\n                >\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","forceMount","theme","dir","useFondueTheme","ThemeProvider","styles","event","DropdownGroup","heading","useMemo","Children","child","jsxs","DropdownSubMenu","DropdownSubTrigger","content","useProcessedChildren","IconCaretRight","DropdownSubContent","DropdownItem","disabled","textValue","onSelect","emphasis","wasMouseInteracted","useRef","focusEvent","blurEvent","DropdownSlot","name","ForwardedRefDropdownTrigger","forwardRef","ForwardedRefDropdownContent","ForwardedRefDropdownGroup","ForwardedRefDropdownSubTrigger","ForwardedRefDropdownSubContent","ForwardedRefDropdownItem","ForwardedRefDropdownSlot","Dropdown"],"mappings":"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"}

package/dist/fondue-components34.js

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
-import s from "./fondue-components85.js";
-import { colorToCss as e } from "./fondue-components86.js";
+import s from "./fondue-components86.js";
+import { colorToCss as e } from "./fondue-components87.js";
 const a = ["default", "positive", "highlight", "warning", "negative"], i = (t) => typeof t == "string" && a.includes(t), p = ({ status: t }) => {
   const o = i(t) ? { "data-status": t } : { style: { backgroundColor: typeof t == "string" ? t : e(t) || "transparent" } };
   return /* @__PURE__ */ r("div", { "data-test-id": "badge-status", className: s.root, ...o });

package/dist/fondue-components39.js

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

package/dist/fondue-components42.js

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

package/dist/fondue-components44.js

@@ -2,7 +2,7 @@ import { jsxs as t, jsx as a, Fragment as f } from "react/jsx-runtime";
 import { IconDroplet as h, IconCross as I, IconCaretDown as v } from "@frontify/fondue-icons";
 import { forwardRef as k } from "react";
 import { Button as w } from "./fondue-components6.js";
-import s from "./fondue-components88.js";
+import s from "./fondue-components90.js";
 import { getColorWithName as y, colorToCss as z } from "./fondue-components47.js";
 const c = ({
   id: m,

package/dist/fondue-components68.js

@@ -4,7 +4,7 @@ import { Slot as V } from "@radix-ui/react-slot";
 import { isValidElement as D } from "react";
 import { useFondueTheme as M, ThemeProvider as T } from "./fondue-components31.js";
 import n from "./fondue-components70.js";
-import { recursiveMap as E, getSelectOptionValue as F } from "./fondue-components89.js";
+import { recursiveMap as E, getSelectOptionValue as F } from "./fondue-components88.js";
 const R = ({
   highlightedIndex: p,
   getMenuProps: c,

package/dist/fondue-components71.js

@@ -1,9 +1,9 @@
 import { jsx as E } from "react/jsx-runtime";
 import { useState as S, useMemo as b, Children as v, isValidElement as C, cloneElement as w, useCallback as B, useEffect as x } from "react";
-import { SelectClear as F } from "./fondue-components90.js";
+import { SelectClear as F } from "./fondue-components89.js";
 import { ForwardedRefSelectItem as L } from "./fondue-components67.js";
 import { ForwardedRefSelectSlot as y } from "./fondue-components69.js";
-import { getSelectOptionValue as I } from "./fondue-components89.js";
+import { getSelectOptionValue as I } from "./fondue-components88.js";
 const O = (n, s) => {
   const [e, r] = S(!1), [m, i] = S(null), [l, f] = S({
     menuComponents: [],

package/dist/fondue-components85.js

@@ -1,8 +1,5 @@
-const o = "_root_b0bc4_2", t = {
-  root: o
-};
+const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
 export {
-  t as default,
-  o as root
+  t as FOCUS_OUTLINE
 };
 //# sourceMappingURL=fondue-components85.js.map

package/dist/fondue-components85.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components85.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"fondue-components85.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}

package/dist/fondue-components86.js

@@ -1,8 +1,8 @@
-const r = (e) => {
-  if (e)
-    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
+const o = "_root_b0bc4_2", t = {
+  root: o
 };
 export {
-  r as colorToCss
+  t as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components86.js.map

package/dist/fondue-components86.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components86.js","sources":["../src/components/Badge/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n"],"names":["colorToCss","color"],"mappings":"AAiBO,MAAMA,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF;"}
+{"version":3,"file":"fondue-components86.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/fondue-components87.js

@@ -1,5 +1,8 @@
-const t = "focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue";
+const r = (e) => {
+  if (e)
+    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
+};
 export {
-  t as FOCUS_OUTLINE
+  r as colorToCss
 };
 //# sourceMappingURL=fondue-components87.js.map

package/dist/fondue-components87.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components87.js","sources":["../src/utilities/focusStyle.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const FOCUS_OUTLINE =\n    'focus-visible:tw-outline has-[[data-show-focus-ring=true]]:tw-outline tw-outline-4 tw-outline-offset-2 tw-outline-blue focus-visible:tw-outline-blue'; // second declaration of tw-outline-blue is to assure that in firefox the outline isn't overriden by a global definition of :-moz-focusring which is coming from tailwinds normalization styling\n"],"names":["FOCUS_OUTLINE"],"mappings":"AAEO,MAAMA,IACT;"}
+{"version":3,"file":"fondue-components87.js","sources":["../src/components/Badge/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n"],"names":["colorToCss","color"],"mappings":"AAiBO,MAAMA,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF;"}

package/dist/fondue-components88.js

@@ -1,20 +1,43 @@
-const o = "_root_2prsn_5", c = "_clearIcon_2prsn_35", t = "_caret_2prsn_52", n = "_colorName_2prsn_70", r = "_button_2prsn_91", s = "_colorIndicator_2prsn_103", _ = "_actions_2prsn_122", a = {
-  root: o,
-  clearIcon: c,
-  caret: t,
-  colorName: n,
-  button: r,
-  colorIndicator: s,
-  actions: _
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components67.js";
+const g = ({
+  children: o,
+  value: r,
+  label: s
+}) => o && typeof o == "string" ? {
+  value: r || o,
+  label: s || o
+} : {
+  value: r || "",
+  label: s || r || "",
+  ...o ? { children: o } : null
+}, w = (o, r) => u(o) && o.type === r, y = (o, r, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(o, (e) => {
+    if (w(e, E) && u(e))
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(r(e, p + t)), t++);
+    else if (u(e) && (e != null && e.props.children)) {
+      const { parsedChildren: m, subElementCount: C } = y(
+        e.props.children,
+        r,
+        "",
+        p + t
+      );
+      e = f(e, {
+        children: m,
+        key: `group-${p + t}`
+      }), n.push(e), t += C;
+    } else
+      n.push(e);
+  }), {
+    parsedChildren: n,
+    subElementCount: t
+  };
 };
 export {
-  _ as actions,
-  r as button,
-  t as caret,
-  c as clearIcon,
-  s as colorIndicator,
-  n as colorName,
-  a as default,
-  o as root
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
 };
 //# sourceMappingURL=fondue-components88.js.map

package/dist/fondue-components88.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components88.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"fondue-components88.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string, children?: ReactNode }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n    children?: ReactNode;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n        ...(children ? { children } : null),\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAKQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAAA,IAIxB;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AAAA,EAChC,GAAID,IAAW,EAAE,UAAAA,MAAa;AAAA,GAmBzBG,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAA;AACvC,MAAIC,IAAc;AAClB,SAAAC,EAAS,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAChF,YAAM,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAAA;AAEhB,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GAC5BQ,KAAeI;AAAA,IACnB;AACI,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAEpC,CAAC,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EAAA;AAEzB;"}

package/dist/fondue-components89.js

@@ -1,43 +1,9 @@
-import { Children as a, isValidElement as u, cloneElement as f } from "react";
-import { ForwardedRefSelectItem as E } from "./fondue-components67.js";
-const g = ({
-  children: o,
-  value: r,
-  label: s
-}) => o && typeof o == "string" ? {
-  value: r || o,
-  label: s || o
-} : {
-  value: r || "",
-  label: s || r || "",
-  ...o ? { children: o } : null
-}, w = (o, r) => u(o) && o.type === r, y = (o, r, s, p = 0) => {
-  const n = [];
-  let t = 0;
-  return a.forEach(o, (e) => {
-    if (w(e, E) && u(e))
-      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(r(e, p + t)), t++);
-    else if (u(e) && (e != null && e.props.children)) {
-      const { parsedChildren: m, subElementCount: C } = y(
-        e.props.children,
-        r,
-        "",
-        p + t
-      );
-      e = f(e, {
-        children: m,
-        key: `group-${p + t}`
-      }), n.push(e), t += C;
-    } else
-      n.push(e);
-  }), {
-    parsedChildren: n,
-    subElementCount: t
-  };
-};
+import { jsx as e } from "react/jsx-runtime";
+import { IconCross as s } from "@frontify/fondue-icons";
+import { Button as o } from "./fondue-components6.js";
+import t from "./fondue-components70.js";
+const c = ({ onClear: r }) => /* @__PURE__ */ e(o, { "aria-label": "clear input", type: "button", size: "small", emphasis: "weak", aspect: "square", onPress: r, children: /* @__PURE__ */ e(s, { className: t.clearIcon, size: 16 }) });
 export {
-  g as getSelectOptionValue,
-  w as isReactLeaf,
-  y as recursiveMap
+  c as SelectClear
 };
 //# sourceMappingURL=fondue-components89.js.map

package/dist/fondue-components89.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components89.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string, children?: ReactNode }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n    children?: ReactNode;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n        ...(children ? { children } : null),\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAKQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAAA,IAIxB;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AAAA,EAChC,GAAID,IAAW,EAAE,UAAAA,MAAa;AAAA,GAmBzBG,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAA;AACvC,MAAIC,IAAc;AAClB,SAAAC,EAAS,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAChF,YAAM,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAAA;AAEhB,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GAC5BQ,KAAeI;AAAA,IACnB;AACI,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAEpC,CAAC,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EAAA;AAEzB;"}
+{"version":3,"file":"fondue-components89.js","sources":["../src/components/Select/SelectClear.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\n\nimport { Button } from '../Button/Button';\n\nimport styles from './styles/select.module.scss';\n\nexport const SelectClear = ({ onClear }: { onClear?: () => void }) => {\n    return (\n        <Button aria-label=\"clear input\" type=\"button\" size=\"small\" emphasis=\"weak\" aspect=\"square\" onPress={onClear}>\n            <IconCross className={styles.clearIcon} size={16} />\n        </Button>\n    );\n};\n"],"names":["SelectClear","onClear","jsx","Button","IconCross","styles"],"mappings":";;;;AAQO,MAAMA,IAAc,CAAC,EAAE,SAAAC,QAEtB,gBAAAC,EAACC,KAAO,cAAW,eAAc,MAAK,UAAS,MAAK,SAAQ,UAAS,QAAO,QAAO,UAAS,SAASF,GACjG,UAAA,gBAAAC,EAACE,GAAA,EAAU,WAAWC,EAAO,WAAW,MAAM,GAAA,CAAI,EAAA,CACtD;"}

package/dist/fondue-components90.js

@@ -1,9 +1,20 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconCross as s } from "@frontify/fondue-icons";
-import { Button as o } from "./fondue-components6.js";
-import t from "./fondue-components70.js";
-const c = ({ onClear: r }) => /* @__PURE__ */ e(o, { "aria-label": "clear input", type: "button", size: "small", emphasis: "weak", aspect: "square", onPress: r, children: /* @__PURE__ */ e(s, { className: t.clearIcon, size: 16 }) });
+const o = "_root_2prsn_5", c = "_clearIcon_2prsn_35", t = "_caret_2prsn_52", n = "_colorName_2prsn_70", r = "_button_2prsn_91", s = "_colorIndicator_2prsn_103", _ = "_actions_2prsn_122", a = {
+  root: o,
+  clearIcon: c,
+  caret: t,
+  colorName: n,
+  button: r,
+  colorIndicator: s,
+  actions: _
+};
 export {
-  c as SelectClear
+  _ as actions,
+  r as button,
+  t as caret,
+  c as clearIcon,
+  s as colorIndicator,
+  n as colorName,
+  a as default,
+  o as root
 };
 //# sourceMappingURL=fondue-components90.js.map

package/dist/fondue-components90.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components90.js","sources":["../src/components/Select/SelectClear.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\n\nimport { Button } from '../Button/Button';\n\nimport styles from './styles/select.module.scss';\n\nexport const SelectClear = ({ onClear }: { onClear?: () => void }) => {\n    return (\n        <Button aria-label=\"clear input\" type=\"button\" size=\"small\" emphasis=\"weak\" aspect=\"square\" onPress={onClear}>\n            <IconCross className={styles.clearIcon} size={16} />\n        </Button>\n    );\n};\n"],"names":["SelectClear","onClear","jsx","Button","IconCross","styles"],"mappings":";;;;AAQO,MAAMA,IAAc,CAAC,EAAE,SAAAC,QAEtB,gBAAAC,EAACC,KAAO,cAAW,eAAc,MAAK,UAAS,MAAK,SAAQ,UAAS,QAAO,QAAO,UAAS,SAASF,GACjG,UAAA,gBAAAC,EAACE,GAAA,EAAU,WAAWC,EAAO,WAAW,MAAM,GAAA,CAAI,EAAA,CACtD;"}
+{"version":3,"file":"fondue-components90.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frontify/fondue-components",
   "type": "module",
-  "version": "22.1.0",
+  "version": "22.1.1",
   "homepage": "https://github.com/Frontify/fondue",
   "repository": {
     "type": "git",
@@ -105,8 +105,8 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
-    "@frontify/fondue-icons": "^0.20.0",
-    "@frontify/fondue-tokens": "^4.2.2"
+    "@frontify/fondue-tokens": "^4.2.2",
+    "@frontify/fondue-icons": "^0.20.0"
   },
   "scripts": {
     "build": "vite build",