@frontify/fondue-components 22.0.0 → 22.1.0

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-components90.js";
+import s from "./fondue-components88.js";
 import { getColorWithName as y, colorToCss as z } from "./fondue-components47.js";
 const c = ({
   id: m,

package/dist/fondue-components50.js

@@ -1,18 +1,18 @@
-const t = "_content_1ajv4_6", e = "_header_1ajv4_50", o = "_footer_1ajv4_51", n = "_body_1ajv4_52", _ = "_underlay_1ajv4_176", a = "_sideContent_1ajv4_189", d = {
+const t = "_content_1h2ch_6", e = "_header_1h2ch_49", o = "_footer_1h2ch_50", n = "_body_1h2ch_51", _ = "_underlay_1h2ch_181", c = "_sideContent_1h2ch_191", h = {
   content: t,
   header: e,
   footer: o,
   body: n,
   underlay: _,
-  sideContent: a
+  sideContent: c
 };
 export {
   n as body,
   t as content,
-  d as default,
+  h as default,
   o as footer,
   e as header,
-  a as sideContent,
+  c as sideContent,
   _ as underlay
 };
 //# sourceMappingURL=fondue-components50.js.map

package/dist/fondue-components52.js

@@ -4,7 +4,7 @@ const i = t({
   variants: {
     direction: {
       horizontal: "tw-flex-col tw-h-0 tw-border-t tw-w-full",
-      vertical: "tw-flex-row tw-w-0 tw-border-r tw-h-full "
+      vertical: "tw-flex-row tw-w-0 tw-border-e tw-h-full "
     },
     color: {
       weak: "tw-border-line-weak",

package/dist/fondue-components52.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components52.js","sources":["../src/components/Divider/styles/dividerStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const dividerStyles = sv({\n    base: 'tw-flex tw-self-stretch tw-justify-center ',\n    variants: {\n        direction: {\n            horizontal: 'tw-flex-col tw-h-0 tw-border-t tw-w-full',\n            vertical: 'tw-flex-row tw-w-0 tw-border-r tw-h-full ',\n        },\n        color: {\n            weak: 'tw-border-line-weak',\n            default: 'tw-border-line',\n            strong: 'tw-border-line-strong',\n            'x-strong': 'tw-border-x-line-strong',\n        },\n        variant: {\n            solid: 'tw-border-solid',\n            dashed: 'tw-border-dashed',\n            noline: 'tw-border-none',\n        },\n    },\n    compoundVariants: [\n        {\n            direction: 'horizontal',\n            padding: 'small',\n            class: 'tw-my-4',\n        },\n        {\n            direction: 'horizontal',\n            padding: 'medium',\n            class: 'tw-my-7',\n        },\n        {\n            direction: 'horizontal',\n            padding: 'large',\n            class: 'tw-my-12',\n        },\n        {\n            direction: 'vertical',\n            padding: 'small',\n            class: 'tw-mx-4',\n        },\n        {\n            direction: 'vertical',\n            padding: 'medium',\n            class: 'tw-mx-7',\n        },\n        {\n            direction: 'vertical',\n            padding: 'large',\n            class: 'tw-mx-12',\n        },\n    ],\n    defaultVariants: {\n        padding: 'medium',\n        direction: 'horizontal',\n        color: 'default',\n        variant: 'solid',\n    },\n});\n"],"names":["dividerStyles","sv"],"mappings":";AAIO,MAAMA,IAAgBC,EAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,WAAW;AAAA,MACP,YAAY;AAAA,MACZ,UAAU;AAAA,IAAA;AAAA,IAEd,OAAO;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,YAAY;AAAA,IAAA;AAAA,IAEhB,SAAS;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,EACZ;AAAA,EAEJ,kBAAkB;AAAA,IACd;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACX;AAAA,EAEJ,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEjB,CAAC;"}
+{"version":3,"file":"fondue-components52.js","sources":["../src/components/Divider/styles/dividerStyles.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { sv } from '#/utilities/styleUtilities';\n\nexport const dividerStyles = sv({\n    base: 'tw-flex tw-self-stretch tw-justify-center ',\n    variants: {\n        direction: {\n            horizontal: 'tw-flex-col tw-h-0 tw-border-t tw-w-full',\n            vertical: 'tw-flex-row tw-w-0 tw-border-e tw-h-full ',\n        },\n        color: {\n            weak: 'tw-border-line-weak',\n            default: 'tw-border-line',\n            strong: 'tw-border-line-strong',\n            'x-strong': 'tw-border-x-line-strong',\n        },\n        variant: {\n            solid: 'tw-border-solid',\n            dashed: 'tw-border-dashed',\n            noline: 'tw-border-none',\n        },\n    },\n    compoundVariants: [\n        {\n            direction: 'horizontal',\n            padding: 'small',\n            class: 'tw-my-4',\n        },\n        {\n            direction: 'horizontal',\n            padding: 'medium',\n            class: 'tw-my-7',\n        },\n        {\n            direction: 'horizontal',\n            padding: 'large',\n            class: 'tw-my-12',\n        },\n        {\n            direction: 'vertical',\n            padding: 'small',\n            class: 'tw-mx-4',\n        },\n        {\n            direction: 'vertical',\n            padding: 'medium',\n            class: 'tw-mx-7',\n        },\n        {\n            direction: 'vertical',\n            padding: 'large',\n            class: 'tw-mx-12',\n        },\n    ],\n    defaultVariants: {\n        padding: 'medium',\n        direction: 'horizontal',\n        color: 'default',\n        variant: 'solid',\n    },\n});\n"],"names":["dividerStyles","sv"],"mappings":";AAIO,MAAMA,IAAgBC,EAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACN,WAAW;AAAA,MACP,YAAY;AAAA,MACZ,UAAU;AAAA,IAAA;AAAA,IAEd,OAAO;AAAA,MACH,MAAM;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,YAAY;AAAA,IAAA;AAAA,IAEhB,SAAS;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IAAA;AAAA,EACZ;AAAA,EAEJ,kBAAkB;AAAA,IACd;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,IAEX;AAAA,MACI,WAAW;AAAA,MACX,SAAS;AAAA,MACT,OAAO;AAAA,IAAA;AAAA,EACX;AAAA,EAEJ,iBAAiB;AAAA,IACb,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEjB,CAAC;"}

package/dist/fondue-components54.js

@@ -1,22 +1,22 @@
-const t = "_content_1ysry_7", s = "_subContent_1ysry_8", n = "_item_1ysry_21", o = "_subTrigger_1ysry_22", r = "_subMenuIndicator_1ysry_115", _ = "_group_1ysry_121", e = "_groupHeading_1ysry_128", u = "_slot_1ysry_139", y = {
+const t = "_content_gmjid_7", n = "_subContent_gmjid_8", o = "_item_gmjid_29", s = "_subTrigger_gmjid_30", _ = "_subMenuIndicator_gmjid_123", g = "_group_gmjid_133", e = "_groupHeading_gmjid_140", i = "_slot_gmjid_151", u = {
   content: t,
-  subContent: s,
-  item: n,
-  subTrigger: o,
-  subMenuIndicator: r,
-  group: _,
+  subContent: n,
+  item: o,
+  subTrigger: s,
+  subMenuIndicator: _,
+  group: g,
   groupHeading: e,
-  slot: u
+  slot: i
 };
 export {
   t as content,
-  y as default,
-  _ as group,
+  u as default,
+  g as group,
   e as groupHeading,
-  n as item,
-  u as slot,
-  s as subContent,
-  r as subMenuIndicator,
-  o as subTrigger
+  o as item,
+  i as slot,
+  n as subContent,
+  _ as subMenuIndicator,
+  s as subTrigger
 };
 //# sourceMappingURL=fondue-components54.js.map

package/dist/fondue-components55.js

@@ -1,4 +1,4 @@
-const o = "_root_1sw7a_6", t = {
+const o = "_root_wpwbd_6", t = {
   root: o
 };
 export {

package/dist/fondue-components56.js

@@ -1,18 +1,18 @@
-const o = "_root_hstbt_6", t = "_overlay_hstbt_51", s = "_header_hstbt_68", e = "_body_hstbt_89", _ = "_footer_hstbt_114", r = "_close_hstbt_135", c = {
+const o = "_root_1i0yz_6", e = "_overlay_1i0yz_51", _ = "_header_1i0yz_68", t = "_body_1i0yz_93", r = "_footer_1i0yz_122", s = "_close_1i0yz_147", y = {
   root: o,
-  overlay: t,
-  header: s,
-  body: e,
-  footer: _,
-  close: r
+  overlay: e,
+  header: _,
+  body: t,
+  footer: r,
+  close: s
 };
 export {
-  e as body,
-  r as close,
-  c as default,
-  _ as footer,
-  s as header,
-  t as overlay,
+  t as body,
+  s as close,
+  y as default,
+  r as footer,
+  _ as header,
+  e as overlay,
   o as root
 };
 //# sourceMappingURL=fondue-components56.js.map

package/dist/fondue-components57.js

@@ -1,4 +1,4 @@
-const o = "_root_1edjk_6", t = {
+const o = "_root_1b3p9_6", t = {
   root: o
 };
 export {

package/dist/fondue-components59.js

@@ -1,14 +1,14 @@
-const t = "_root_1n5v6_3", e = "_contentArea_1n5v6_66", n = "_hiddenText_1n5v6_71", o = "_visibleText_1n5v6_77", _ = {
+const t = "_root_kwmbr_3", e = "_contentArea_kwmbr_66", o = "_hiddenText_kwmbr_71", n = "_visibleText_kwmbr_77", _ = {
   root: t,
   contentArea: e,
-  hiddenText: n,
-  visibleText: o
+  hiddenText: o,
+  visibleText: n
 };
 export {
   e as contentArea,
   _ as default,
-  n as hiddenText,
+  o as hiddenText,
   t as root,
-  o as visibleText
+  n as visibleText
 };
 //# sourceMappingURL=fondue-components59.js.map

package/dist/fondue-components62.js

@@ -1,13 +1,13 @@
-const o = "_root_hkznm_4", r = "_viewport_hkznm_12", t = "_scrollbar_hkznm_43", _ = "_thumb_hkznm_75", n = "_corner_hkznm_93", c = {
+const o = "_root_1bhxy_4", r = "_viewport_1bhxy_12", t = "_scrollbar_1bhxy_43", _ = "_thumb_1bhxy_75", c = "_corner_1bhxy_93", s = {
   root: o,
   viewport: r,
   scrollbar: t,
   thumb: _,
-  corner: n
+  corner: c
 };
 export {
-  n as corner,
-  c as default,
+  c as corner,
+  s as default,
   o as root,
   t as scrollbar,
   _ as thumb,

package/dist/fondue-components63.js

@@ -1,4 +1,4 @@
-const o = "_root_howjn_6", t = {
+const o = "_root_f9dx4_6", t = {
   root: o
 };
 export {

package/dist/fondue-components65.js

@@ -1,20 +1,20 @@
-const t = "_root_12yi8_5", e = "_item_12yi8_29", i = "_itemLabel_12yi8_50", a = "_itemLabelActive_12yi8_72", o = "_itemLabelInactive_12yi8_102", _ = "_activeIndicator_12yi8_132", c = "_separator_12yi8_229", n = {
-  root: t,
-  item: e,
-  itemLabel: i,
+const e = "_root_nerqc_5", t = "_item_nerqc_33", c = "_itemLabel_nerqc_54", a = "_itemLabelActive_nerqc_75", i = "_itemLabelInactive_nerqc_105", n = "_activeIndicator_nerqc_135", o = "_separator_nerqc_262", _ = {
+  root: e,
+  item: t,
+  itemLabel: c,
   itemLabelActive: a,
-  itemLabelInactive: o,
-  activeIndicator: _,
-  separator: c
+  itemLabelInactive: i,
+  activeIndicator: n,
+  separator: o
 };
 export {
-  _ as activeIndicator,
-  n as default,
-  e as item,
-  i as itemLabel,
+  n as activeIndicator,
+  _ as default,
+  t as item,
+  c as itemLabel,
   a as itemLabelActive,
-  o as itemLabelInactive,
-  t as root,
-  c as separator
+  i as itemLabelInactive,
+  e as root,
+  o as separator
 };
 //# sourceMappingURL=fondue-components65.js.map

package/dist/fondue-components68.js

@@ -1,66 +1,66 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as l from "@radix-ui/react-popover";
+import { jsx as r } from "react/jsx-runtime";
+import * as u from "@radix-ui/react-popover";
 import { Slot as V } from "@radix-ui/react-slot";
-import { isValidElement as g } from "react";
-import { useFondueTheme as A, ThemeProvider as D } from "./fondue-components31.js";
-import s from "./fondue-components70.js";
-import { recursiveMap as M, getSelectOptionValue as T } from "./fondue-components86.js";
-const E = ({
+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";
+const R = ({
   highlightedIndex: p,
   getMenuProps: c,
   getItemProps: m,
-  children: u,
+  children: f,
   filterText: d,
-  align: f,
-  side: h,
-  selectedItem: r,
-  hasInteractedSinceOpening: v,
-  viewportCollisionPadding: P = "compact"
+  align: h,
+  side: v,
+  selectedItem: o,
+  hasInteractedSinceOpening: P,
+  viewportCollisionPadding: S = "compact"
 }) => {
-  const O = (e) => {
+  const g = (e) => {
     e.preventDefault();
-  }, S = {
+  }, O = {
     compact: 8,
     spacious: 24
-  }, N = A();
-  return /* @__PURE__ */ t(l.Portal, { children: /* @__PURE__ */ t(D, { theme: N, children: /* @__PURE__ */ t(
-    l.Content,
+  }, { theme: N, dir: i } = M(), A = (e) => i === "ltr" ? e : e === "left" ? "right" : e === "right" ? "left" : e;
+  return /* @__PURE__ */ r(u.Portal, { children: /* @__PURE__ */ r(T, { theme: N, dir: i, children: /* @__PURE__ */ r(
+    u.Content,
     {
-      align: f,
-      side: h,
-      collisionPadding: S[P] + 8,
-      onOpenAutoFocus: O,
-      className: s.portal,
-      children: /* @__PURE__ */ t(
+      align: h,
+      side: A(v),
+      collisionPadding: O[S] + 8,
+      onOpenAutoFocus: g,
+      className: n.portal,
+      children: /* @__PURE__ */ r(
         "ul",
         {
-          className: s.menu,
+          className: n.menu,
           ...c({}, { suppressRefError: !0 }),
-          "data-has-interacted": v ? "true" : "false",
+          "data-has-interacted": P ? "true" : "false",
           "data-test-id": "fondue-select-menu",
-          children: M(
-            u,
-            (e, n) => {
-              if (((o) => (
+          children: E(
+            f,
+            (e, s) => {
+              if (((t) => (
                 // @ts-expect-error - We are explicitly checking for ref
-                g(o) && o.ref !== void 0
+                D(t) && t.ref !== void 0
               ))(e)) {
-                const o = T(e.props), a = m({
-                  item: o,
-                  index: n,
+                const t = F(e.props), a = m({
+                  item: t,
+                  index: s,
                   ...e.ref ? { ref: e.ref } : {}
-                }), i = (r == null ? void 0 : r.value) === o.value;
-                return /* @__PURE__ */ t(
+                }), l = (o == null ? void 0 : o.value) === t.value;
+                return /* @__PURE__ */ r(
                   V,
                   {
-                    className: s.item,
-                    "data-highlighted": p === n,
-                    "data-selected": i,
+                    className: n.item,
+                    "data-highlighted": p === s,
+                    "data-selected": l,
                     onTouchStart: (C) => {
                       a.onClick && a.onClick(C);
                     },
                     ...a,
-                    "aria-selected": i,
+                    "aria-selected": l,
                     children: e
                   },
                   e.props.value
@@ -74,8 +74,8 @@ const E = ({
     }
   ) }) });
 };
-E.displayName = "Select.Menu";
+R.displayName = "Select.Menu";
 export {
-  E as SelectMenu
+  R as SelectMenu
 };
 //# sourceMappingURL=fondue-components68.js.map

package/dist/fondue-components68.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components68.js","sources":["../src/components/Select/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { type SelectItemProps } from './SelectItem';\nimport styles from './styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from './utils';\n\nexport type SelectMenuViewportCollisionPadding = 'compact' | 'spacious';\n\nexport type SelectMenuProps = {\n    /**\n     * @internal\n     * The index of the highlighted item in the menu.\n     */\n    highlightedIndex: number;\n    /**\n     * @internal\n     * Callback function to retrieve the props for a menu element.\n     */\n    getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n    /**\n     * @internal\n     * Callback function to retrieve the props for a item element.\n     */\n    getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n    /**\n     * @internal\n     * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n     */\n    children: ReactNode;\n    /**\n     * @internal\n     * The filter text shown in the combobox input element.\n     */\n    filterText?: string;\n    /**\n     * @internal\n     * The alignment of the menu.\n     */\n    align: 'start' | 'center' | 'end';\n    /**\n     * @internal\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * @internal\n     * The type of the menu.\n     */\n    selectedItem?: {\n        value: string;\n    } | null;\n    /**\n     * @internal\n     * A boolean to indicate if highlighted item was changed since opening the menu.\n     * This is used to determine the style of the selected/highlighted item.\n     */\n    hasInteractedSinceOpening?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    align,\n    side,\n    selectedItem,\n    hasInteractedSinceOpening,\n    viewportCollisionPadding = 'compact',\n}: SelectMenuProps) => {\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n    };\n\n    const VIEWPORT_COLLISION_PADDING_MAP: Record<SelectMenuViewportCollisionPadding, number> = {\n        compact: 8,\n        spacious: 24,\n    };\n\n    const theme = useFondueTheme();\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme}>\n                <RadixPopover.Content\n                    align={align}\n                    side={side}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding] + 8}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    className={styles.portal}\n                >\n                    <ul\n                        className={styles.menu}\n                        // TODO: fix this accessibility issue\n                        // We are mounting/unmounting the menu on open/close\n                        // We should instead toggle its visibility for accessibility reasons\n                        // https://github.com/downshift-js/downshift?tab=readme-ov-file#getmenuprops\n                        {...getMenuProps({}, { suppressRefError: true })}\n                        data-has-interacted={hasInteractedSinceOpening ? 'true' : 'false'}\n                        data-test-id=\"fondue-select-menu\"\n                    >\n                        {\n                            recursiveMap(\n                                children,\n                                (child, index) => {\n                                    const isValid = <TProps,>(\n                                        child: ReactNode,\n                                    ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } =>\n                                        // @ts-expect-error - We are explicitly checking for ref\n                                        isValidElement<TProps>(child) && child.ref !== undefined;\n\n                                    if (isValid<SelectItemProps>(child)) {\n                                        const optionData = getSelectOptionValue(child.props);\n                                        const itemProps = getItemProps({\n                                            item: optionData,\n                                            index,\n                                            ...(child.ref ? { ref: child.ref } : {}),\n                                        });\n\n                                        const isSelected = selectedItem?.value === optionData.value;\n\n                                        return (\n                                            <RadixSlot\n                                                className={styles.item}\n                                                data-highlighted={highlightedIndex === index}\n                                                data-selected={isSelected}\n                                                key={child.props.value}\n                                                // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n                                                onTouchStart={(event) => {\n                                                    if (itemProps.onClick) {\n                                                        itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n                                                    }\n                                                }}\n                                                {...itemProps}\n                                                aria-selected={isSelected}\n                                            >\n                                                {child}\n                                            </RadixSlot>\n                                        );\n                                    }\n                                },\n                                filterText,\n                            ).parsedChildren\n                        }\n                    </ul>\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","side","selectedItem","hasInteractedSinceOpening","viewportCollisionPadding","handleOnOpenAutoFocus","event","VIEWPORT_COLLISION_PADDING_MAP","theme","useFondueTheme","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","isSelected","RadixSlot"],"mappings":";;;;;;;AAwEO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,0BAAAC,IAA2B;AAC/B,MAAuB;AACnB,QAAMC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAA;AAAA,EACV,GAEMC,IAAqF;AAAA,IACvF,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,GAGRC,IAAQC,EAAA;AACd,2BACKC,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,KAAc,OAAAJ,GACX,UAAA,gBAAAG;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,OAAAV;AAAA,MACA,MAAAC;AAAA,MACA,kBAAkBM,EAA+BH,CAAwB,IAAI;AAAA,MAC7E,iBAAiBC;AAAA,MACjB,WAAWQ,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGjB,EAAa,CAAA,GAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAW;AAAA,YACIhB;AAAA,YACA,CAACiB,GAAOC,MAAU;AAOd,mBANgB,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AACjC,sBAAMG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAYvB,EAAa;AAAA,kBAC3B,MAAMqB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC,GAEKM,KAAanB,KAAA,gBAAAA,EAAc,WAAUgB,EAAW;AAEtD,uBACI,gBAAAP;AAAA,kBAACW;AAAAA,kBAAA;AAAA,oBACG,WAAWT,EAAO;AAAA,oBAClB,oBAAkBlB,MAAqBqB;AAAA,oBACvC,iBAAeK;AAAA,oBAGf,cAAc,CAACf,MAAU;AACrB,sBAAIc,EAAU,WACVA,EAAU,QAAQd,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGc;AAAA,oBACJ,iBAAeC;AAAA,oBAEd,UAAAN;AAAA,kBAAA;AAAA,kBAVIA,EAAM,MAAM;AAAA,gBAAA;AAAA,cAa7B;AAAA,YACJ;AAAA,YACAhB;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA,GAER,EAAA,CACJ;AAER;AACAL,EAAW,cAAc;"}
+{"version":3,"file":"fondue-components68.js","sources":["../src/components/Select/SelectMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { type UseComboboxPropGetters, type UseSelectPropGetters } from 'downshift';\nimport { isValidElement, type ForwardedRef, type MouseEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport { type SelectItemProps } from './SelectItem';\nimport styles from './styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from './utils';\n\nexport type SelectMenuViewportCollisionPadding = 'compact' | 'spacious';\n\nexport type SelectMenuProps = {\n    /**\n     * @internal\n     * The index of the highlighted item in the menu.\n     */\n    highlightedIndex: number;\n    /**\n     * @internal\n     * Callback function to retrieve the props for a menu element.\n     */\n    getMenuProps: UseSelectPropGetters<unknown>['getMenuProps'] | UseComboboxPropGetters<unknown>['getMenuProps'];\n    /**\n     * @internal\n     * Callback function to retrieve the props for a item element.\n     */\n    getItemProps: UseSelectPropGetters<unknown>['getItemProps'] | UseComboboxPropGetters<unknown>['getItemProps'];\n    /**\n     * @internal\n     * The children of the menu component. This can contain multiple `Select.Item` or `Select.Group` components.\n     */\n    children: ReactNode;\n    /**\n     * @internal\n     * The filter text shown in the combobox input element.\n     */\n    filterText?: string;\n    /**\n     * @internal\n     * The alignment of the menu.\n     */\n    align: 'start' | 'center' | 'end';\n    /**\n     * @internal\n     * Defines the preferred side of the select. It will not be respected if there are collisions with the viewport.\n     * @default \"bottom\"\n     */\n    side: 'left' | 'right' | 'bottom' | 'top';\n    /**\n     * @internal\n     * The type of the menu.\n     */\n    selectedItem?: {\n        value: string;\n    } | null;\n    /**\n     * @internal\n     * A boolean to indicate if highlighted item was changed since opening the menu.\n     * This is used to determine the style of the selected/highlighted item.\n     */\n    hasInteractedSinceOpening?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    align,\n    side,\n    selectedItem,\n    hasInteractedSinceOpening,\n    viewportCollisionPadding = 'compact',\n}: SelectMenuProps) => {\n    const handleOnOpenAutoFocus = (event: Event) => {\n        event.preventDefault();\n    };\n\n    const VIEWPORT_COLLISION_PADDING_MAP: Record<SelectMenuViewportCollisionPadding, number> = {\n        compact: 8,\n        spacious: 24,\n    };\n\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side: 'left' | 'right' | 'bottom' | 'top') => {\n        if (dir === 'ltr') {\n            return side;\n        }\n\n        if (side === 'left') {\n            return 'right';\n        }\n        if (side === 'right') {\n            return 'left';\n        }\n\n        return side;\n    };\n\n    return (\n        <RadixPopover.Portal>\n            <ThemeProvider theme={theme} dir={dir}>\n                <RadixPopover.Content\n                    align={align}\n                    side={getAdjustedSide(side)}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding] + 8}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    className={styles.portal}\n                >\n                    <ul\n                        className={styles.menu}\n                        // TODO: fix this accessibility issue\n                        // We are mounting/unmounting the menu on open/close\n                        // We should instead toggle its visibility for accessibility reasons\n                        // https://github.com/downshift-js/downshift?tab=readme-ov-file#getmenuprops\n                        {...getMenuProps({}, { suppressRefError: true })}\n                        data-has-interacted={hasInteractedSinceOpening ? 'true' : 'false'}\n                        data-test-id=\"fondue-select-menu\"\n                    >\n                        {\n                            recursiveMap(\n                                children,\n                                (child, index) => {\n                                    const isValid = <TProps,>(\n                                        child: ReactNode,\n                                    ): child is ReactElement<TProps> & { ref: ForwardedRef<HTMLElement> } =>\n                                        // @ts-expect-error - We are explicitly checking for ref\n                                        isValidElement<TProps>(child) && child.ref !== undefined;\n\n                                    if (isValid<SelectItemProps>(child)) {\n                                        const optionData = getSelectOptionValue(child.props);\n                                        const itemProps = getItemProps({\n                                            item: optionData,\n                                            index,\n                                            ...(child.ref ? { ref: child.ref } : {}),\n                                        });\n\n                                        const isSelected = selectedItem?.value === optionData.value;\n\n                                        return (\n                                            <RadixSlot\n                                                className={styles.item}\n                                                data-highlighted={highlightedIndex === index}\n                                                data-selected={isSelected}\n                                                key={child.props.value}\n                                                // Workaround for the issue where the onClick event is not fired on touch devices because of portal usage\n                                                onTouchStart={(event) => {\n                                                    if (itemProps.onClick) {\n                                                        itemProps.onClick(event as unknown as MouseEvent<HTMLElement>);\n                                                    }\n                                                }}\n                                                {...itemProps}\n                                                aria-selected={isSelected}\n                                            >\n                                                {child}\n                                            </RadixSlot>\n                                        );\n                                    }\n                                },\n                                filterText,\n                            ).parsedChildren\n                        }\n                    </ul>\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nSelectMenu.displayName = 'Select.Menu';\n"],"names":["SelectMenu","highlightedIndex","getMenuProps","getItemProps","children","filterText","align","side","selectedItem","hasInteractedSinceOpening","viewportCollisionPadding","handleOnOpenAutoFocus","event","VIEWPORT_COLLISION_PADDING_MAP","theme","dir","useFondueTheme","getAdjustedSide","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","isSelected","RadixSlot"],"mappings":";;;;;;;AAwEO,MAAMA,IAAa,CAAC;AAAA,EACvB,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,0BAAAC,IAA2B;AAC/B,MAAuB;AACnB,QAAMC,IAAwB,CAACC,MAAiB;AAC5C,IAAAA,EAAM,eAAA;AAAA,EACV,GAEMC,IAAqF;AAAA,IACvF,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,GAGR,EAAE,OAAAC,GAAO,KAAAC,EAAA,IAAQC,EAAA,GAEjBC,IAAkB,CAACV,MACjBQ,MAAQ,QACDR,IAGPA,MAAS,SACF,UAEPA,MAAS,UACF,SAGJA;AAGX,2BACKW,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAAN,GAAc,KAAAC,GACzB,UAAA,gBAAAI;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,OAAAZ;AAAA,MACA,MAAMW,EAAgBV,CAAI;AAAA,MAC1B,kBAAkBM,EAA+BH,CAAwB,IAAI;AAAA,MAC7E,iBAAiBC;AAAA,MACjB,WAAWU,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGnB,EAAa,CAAA,GAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAa;AAAA,YACIlB;AAAA,YACA,CAACmB,GAAOC,MAAU;AAOd,mBANgB,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AACjC,sBAAMG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAYzB,EAAa;AAAA,kBAC3B,MAAMuB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC,GAEKM,KAAarB,KAAA,gBAAAA,EAAc,WAAUkB,EAAW;AAEtD,uBACI,gBAAAP;AAAA,kBAACW;AAAAA,kBAAA;AAAA,oBACG,WAAWT,EAAO;AAAA,oBAClB,oBAAkBpB,MAAqBuB;AAAA,oBACvC,iBAAeK;AAAA,oBAGf,cAAc,CAACjB,MAAU;AACrB,sBAAIgB,EAAU,WACVA,EAAU,QAAQhB,CAA2C;AAAA,oBAErE;AAAA,oBACC,GAAGgB;AAAA,oBACJ,iBAAeC;AAAA,oBAEd,UAAAN;AAAA,kBAAA;AAAA,kBAVIA,EAAM,MAAM;AAAA,gBAAA;AAAA,cAa7B;AAAA,YACJ;AAAA,YACAlB;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA,GAER,EAAA,CACJ;AAER;AACAL,EAAW,cAAc;"}

package/dist/fondue-components70.js

@@ -1,40 +1,40 @@
-const c = "_root_1qbdb_7", o = "_selectedValue_1qbdb_57", _ = "_input_1qbdb_75", e = "_slot_1qbdb_101", t = "_clear_1qbdb_153", n = "_clearIcon_1qbdb_160", s = "_icons_1qbdb_164", b = "_caret_1qbdb_170", r = "_iconSuccess_1qbdb_198", a = "_iconError_1qbdb_204", d = "_menu_1qbdb_210", l = "_portal_1qbdb_233", u = "_item_1qbdb_249", i = "_checkmarkIcon_1qbdb_278", q = "_itemValue_1qbdb_285", p = "_group_1qbdb_299", m = "_groupHeading_1qbdb_310", g = {
-  root: c,
-  selectedValue: o,
-  input: _,
-  slot: e,
-  clear: t,
-  clearIcon: n,
-  icons: s,
-  caret: b,
+const n = "_root_1a48n_7", c = "_selectedValue_1a48n_57", o = "_input_1a48n_74", _ = "_slot_1a48n_100", e = "_clear_1a48n_150", t = "_clearIcon_1a48n_157", a = "_icons_1a48n_161", s = "_caret_1a48n_167", r = "_iconSuccess_1a48n_195", l = "_iconError_1a48n_201", u = "_menu_1a48n_207", i = "_portal_1a48n_230", p = "_item_1a48n_246", m = "_checkmarkIcon_1a48n_276", g = "_itemValue_1a48n_283", d = "_group_1a48n_297", k = "_groupHeading_1a48n_308", I = {
+  root: n,
+  selectedValue: c,
+  input: o,
+  slot: _,
+  clear: e,
+  clearIcon: t,
+  icons: a,
+  caret: s,
   iconSuccess: r,
-  iconError: a,
-  menu: d,
-  portal: l,
-  item: u,
-  checkmarkIcon: i,
-  itemValue: q,
-  group: p,
-  groupHeading: m
+  iconError: l,
+  menu: u,
+  portal: i,
+  item: p,
+  checkmarkIcon: m,
+  itemValue: g,
+  group: d,
+  groupHeading: k
 };
 export {
-  b as caret,
-  i as checkmarkIcon,
-  t as clear,
-  n as clearIcon,
-  g as default,
-  p as group,
-  m as groupHeading,
-  a as iconError,
+  s as caret,
+  m as checkmarkIcon,
+  e as clear,
+  t as clearIcon,
+  I as default,
+  d as group,
+  k as groupHeading,
+  l as iconError,
   r as iconSuccess,
-  s as icons,
-  _ as input,
-  u as item,
-  q as itemValue,
-  d as menu,
-  l as portal,
-  c as root,
-  o as selectedValue,
-  e as slot
+  a as icons,
+  o as input,
+  p as item,
+  g as itemValue,
+  u as menu,
+  i as portal,
+  n as root,
+  c as selectedValue,
+  _ as slot
 };
 //# sourceMappingURL=fondue-components70.js.map

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-components87.js";
+import { SelectClear as F } from "./fondue-components90.js";
 import { ForwardedRefSelectItem as L } from "./fondue-components67.js";
 import { ForwardedRefSelectSlot as y } from "./fondue-components69.js";
-import { getSelectOptionValue as I } from "./fondue-components86.js";
+import { getSelectOptionValue as I } from "./fondue-components89.js";
 const O = (n, s) => {
   const [e, r] = S(!1), [m, i] = S(null), [l, f] = S({
     menuComponents: [],

package/dist/fondue-components73.js

@@ -1,16 +1,16 @@
-const m = "_root_eum1z_5", t = "_small_eum1z_16", _ = "_medium_eum1z_20", e = "_large_eum1z_24", o = "_thumb_eum1z_61", s = {
-  root: m,
+const s = "_root_6is9j_5", t = "_small_6is9j_16", _ = "_medium_6is9j_20", o = "_large_6is9j_24", m = "_thumb_6is9j_61", l = {
+  root: s,
   small: t,
   medium: _,
-  large: e,
-  thumb: o
+  large: o,
+  thumb: m
 };
 export {
-  s as default,
-  e as large,
+  l as default,
+  o as large,
   _ as medium,
-  m as root,
+  s as root,
   t as small,
-  o as thumb
+  m as thumb
 };
 //# sourceMappingURL=fondue-components73.js.map

package/dist/fondue-components75.js

@@ -1,24 +1,26 @@
-const t = "_table_1outv_4", o = "_headerCell_1outv_18", e = "_rowCell_1outv_19", _ = "_caption_1outv_46", n = "_cellContent_1outv_71", l = "_sortIndicator_1outv_96", c = "_body_1outv_100", r = "_row_1outv_19", s = "_buttonText_1outv_164", a = {
+const t = "_table_n4gw5_4", n = "_headerCell_n4gw5_18", o = "_rowCell_n4gw5_19", e = "_caption_n4gw5_61", _ = "_header_n4gw5_18", l = "_cellContent_n4gw5_93", c = "_sortIndicator_n4gw5_118", r = "_body_n4gw5_122", a = "_row_n4gw5_19", s = "_buttonText_n4gw5_186", w = {
   table: t,
-  headerCell: o,
-  rowCell: e,
-  caption: _,
-  cellContent: n,
-  sortIndicator: l,
-  body: c,
-  row: r,
+  headerCell: n,
+  rowCell: o,
+  caption: e,
+  header: _,
+  cellContent: l,
+  sortIndicator: c,
+  body: r,
+  row: a,
   buttonText: s
 };
 export {
-  c as body,
+  r as body,
   s as buttonText,
-  _ as caption,
-  n as cellContent,
-  a as default,
-  o as headerCell,
-  r as row,
-  e as rowCell,
-  l as sortIndicator,
+  e as caption,
+  l as cellContent,
+  w as default,
+  _ as header,
+  n as headerCell,
+  a as row,
+  o as rowCell,
+  c as sortIndicator,
   t as table
 };
 //# sourceMappingURL=fondue-components75.js.map

package/dist/fondue-components75.js.map

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

package/dist/fondue-components77.js

@@ -1,14 +1,14 @@
-const t = "_root_1cw3g_3", n = "_mainContent_1cw3g_15", o = "_actionButton_1cw3g_28", c = "_secondaryContent_1cw3g_123", e = {
-  root: t,
-  mainContent: n,
+const n = "_root_1nybm_3", t = "_mainContent_1nybm_15", o = "_actionButton_1nybm_28", e = "_secondaryContent_1nybm_123", _ = {
+  root: n,
+  mainContent: t,
   actionButton: o,
-  secondaryContent: c
+  secondaryContent: e
 };
 export {
   o as actionButton,
-  e as default,
-  n as mainContent,
-  t as root,
-  c as secondaryContent
+  _ as default,
+  t as mainContent,
+  n as root,
+  e as secondaryContent
 };
 //# sourceMappingURL=fondue-components77.js.map