@frontify/fondue-components 29.1.0 → 30.0.0

package/dist/fondue-components149.js

@@ -1,43 +1,45 @@
-import { Children as a, isValidElement as u, cloneElement as f } from "react";
-import { ForwardedRefSelectItem as E } from "./fondue-components94.js";
-const g = ({
-  children: o,
-  value: r,
-  label: s
-}) => o && typeof o == "string" ? {
-  value: r !== void 0 ? r : o,
-  label: s !== void 0 ? s : o
-} : {
-  value: r ?? "",
-  label: s !== void 0 ? s : r ?? "",
-  ...o ? { children: o } : null
-}, v = (o, r) => u(o) && o.type === r, w = (o, r, s, p = 0) => {
-  const n = [];
-  let t = 0;
-  return a.forEach(o, (e) => {
-    if (v(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 } = w(
-        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
-  };
+const i = (r) => {
+  if (r)
+    return {
+      year: r.getFullYear(),
+      // Month is 0-indexed in JavaScript, so we add 1 to get the correct month
+      month: r.getMonth() + 1,
+      day: r.getDate()
+    };
+}, t = (r) => {
+  if (r)
+    return new Date(r.year, r.month - 1, r.day);
+}, m = (r) => {
+  const n = i(r == null ? void 0 : r.from), o = i(r == null ? void 0 : r.to);
+  if (!(!n || !o))
+    return {
+      from: n,
+      to: o
+    };
+}, u = (r) => {
+  if (r)
+    return {
+      from: t(r.from),
+      to: t(r.to)
+    };
+}, c = (r) => {
+  if (!r)
+    return;
+  const o = (Array.isArray(r) ? r : [r]).flatMap((f) => {
+    if ("before" in f) {
+      const s = t(f.before);
+      return s ? [{ before: s }] : [];
+    }
+    const e = t(f.after);
+    return e ? [{ after: e }] : [];
+  });
+  return o.length > 0 ? o : void 0;
 };
 export {
-  g as getSelectOptionValue,
-  v as isReactLeaf,
-  w as recursiveMap
+  t as transformDatePickerDateToDate,
+  u as transformDateRangeToPickerDateRange,
+  i as transformDateToDatePickerDate,
+  c as transformDisabledDates,
+  m as transformPickerDateRangeToDateRange
 };
 //# sourceMappingURL=fondue-components149.js.map

package/dist/fondue-components149.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components149.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 './components/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 !== undefined ? value : children,\n            label: label !== undefined ? label : children,\n        };\n    }\n\n    return {\n        value: value ?? '',\n        label: label !== undefined ? 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,MAAU,SAAYA,IAAQD;AAAA,EACrC,OAAOE,MAAU,SAAYA,IAAQF;AAAA,IAItC;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,MAAU,SAAYA,IAASD,KAAS;AAAA,EAC/C,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-components149.js","sources":["../src/components/DatePicker/helpers/dateTransformer.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type DateRange as InternalDayPickerDateRange } from 'react-day-picker';\n\nimport { type DisabledDatePickerDates, type DatePickerDate, type DatePickerDateRange } from '../types';\n\nexport const transformDateToDatePickerDate = (date?: Date): DatePickerDate | undefined => {\n    if (!date) {\n        return undefined;\n    }\n    return {\n        year: date.getFullYear(),\n        // Month is 0-indexed in JavaScript, so we add 1 to get the correct month\n        month: date.getMonth() + 1,\n        day: date.getDate(),\n    };\n};\n\nexport const transformDatePickerDateToDate = (datePickerDate?: DatePickerDate): Date | undefined => {\n    if (!datePickerDate) {\n        return undefined;\n    }\n    // Month is 0-indexed in JavaScript, so we subtract 1 to get the correct month\n    return new Date(datePickerDate.year, datePickerDate.month - 1, datePickerDate.day);\n};\n\nexport const transformPickerDateRangeToDateRange = (dateRange?: InternalDayPickerDateRange): DatePickerDateRange => {\n    const fromDate = transformDateToDatePickerDate(dateRange?.from);\n    const toDate = transformDateToDatePickerDate(dateRange?.to);\n    if (!fromDate || !toDate) {\n        return undefined;\n    }\n\n    return {\n        from: fromDate,\n        to: toDate,\n    };\n};\n\nexport const transformDateRangeToPickerDateRange = (\n    dateRange?: DatePickerDateRange,\n): InternalDayPickerDateRange | undefined => {\n    if (!dateRange) {\n        return undefined;\n    }\n\n    return {\n        from: transformDatePickerDateToDate(dateRange.from),\n        to: transformDatePickerDateToDate(dateRange.to),\n    };\n};\n\ntype DisabledDate = { before: Date } | { after: Date };\n\nexport const transformDisabledDates = (\n    disabledDates?: DisabledDatePickerDates | DisabledDatePickerDates[],\n): DisabledDate[] | undefined => {\n    if (!disabledDates) {\n        return undefined;\n    }\n\n    const entries = Array.isArray(disabledDates) ? disabledDates : [disabledDates];\n\n    const transformedDisabledDates = entries.flatMap((entry): DisabledDate[] => {\n        if ('before' in entry) {\n            const date = transformDatePickerDateToDate(entry.before);\n            return date ? [{ before: date }] : [];\n        }\n        const date = transformDatePickerDateToDate(entry.after);\n        return date ? [{ after: date }] : [];\n    });\n\n    return transformedDisabledDates.length > 0 ? transformedDisabledDates : undefined;\n};\n"],"names":["transformDateToDatePickerDate","date","transformDatePickerDateToDate","datePickerDate","transformPickerDateRangeToDateRange","dateRange","fromDate","toDate","transformDateRangeToPickerDateRange","transformDisabledDates","disabledDates","transformedDisabledDates","entry"],"mappings":"AAMO,MAAMA,IAAgC,CAACC,MAA4C;AACtF,MAAKA;AAGL,WAAO;AAAA,MACH,MAAMA,EAAK,YAAA;AAAA;AAAA,MAEX,OAAOA,EAAK,SAAA,IAAa;AAAA,MACzB,KAAKA,EAAK,QAAA;AAAA,IAAQ;AAE1B,GAEaC,IAAgC,CAACC,MAAsD;AAChG,MAAKA;AAIL,WAAO,IAAI,KAAKA,EAAe,MAAMA,EAAe,QAAQ,GAAGA,EAAe,GAAG;AACrF,GAEaC,IAAsC,CAACC,MAAgE;AAChH,QAAMC,IAAWN,EAA8BK,KAAA,gBAAAA,EAAW,IAAI,GACxDE,IAASP,EAA8BK,KAAA,gBAAAA,EAAW,EAAE;AAC1D,MAAI,GAACC,KAAY,CAACC;AAIlB,WAAO;AAAA,MACH,MAAMD;AAAA,MACN,IAAIC;AAAA,IAAA;AAEZ,GAEaC,IAAsC,CAC/CH,MACyC;AACzC,MAAKA;AAIL,WAAO;AAAA,MACH,MAAMH,EAA8BG,EAAU,IAAI;AAAA,MAClD,IAAIH,EAA8BG,EAAU,EAAE;AAAA,IAAA;AAEtD,GAIaI,IAAyB,CAClCC,MAC6B;AAC7B,MAAI,CAACA;AACD;AAKJ,QAAMC,KAFU,MAAM,QAAQD,CAAa,IAAIA,IAAgB,CAACA,CAAa,GAEpC,QAAQ,CAACE,MAA0B;AACxE,QAAI,YAAYA,GAAO;AACnB,YAAMX,IAAOC,EAA8BU,EAAM,MAAM;AACvD,aAAOX,IAAO,CAAC,EAAE,QAAQA,EAAAA,CAAM,IAAI,CAAA;AAAA,IACvC;AACA,UAAMA,IAAOC,EAA8BU,EAAM,KAAK;AACtD,WAAOX,IAAO,CAAC,EAAE,OAAOA,EAAA,CAAM,IAAI,CAAA;AAAA,EACtC,CAAC;AAED,SAAOU,EAAyB,SAAS,IAAIA,IAA2B;AAC5E;"}

package/dist/fondue-components15.js

@@ -1,125 +1,40 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { IconCross as x } from "@frontify/fondue-icons";
-import * as l from "@radix-ui/react-popover";
-import { forwardRef as i } from "react";
-import { useTranslation as I } from "./fondue-components42.js";
-import { addAutoFocusAttribute as _, addShowFocusRing as B } from "./fondue-components55.js";
-import { Button as O } from "./fondue-components6.js";
-import { useFondueTheme as S, ThemeProvider as j } from "./fondue-components39.js";
-import u from "./fondue-components65.js";
-const f = ({ children: t, ...o }) => /* @__PURE__ */ e(l.Root, { ...o, children: t });
-f.displayName = "Flyout.Root";
-const y = ({ asChild: t = !0, children: o, "data-test-id": a = "fondue-flyout-trigger", ...r }, d) => /* @__PURE__ */ e(
-  l.Trigger,
-  {
-    onMouseDown: _,
-    "data-auto-focus-visible": "true",
-    "data-auto-focus-trigger": !0,
-    "data-test-id": a,
-    asChild: t,
-    ref: d,
-    ...r,
-    children: o
-  }
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { propsToCssVariables as y } from "./fondue-components46.js";
+import x from "./fondue-components69.js";
+const u = n(
+  ({
+    as: a = "div",
+    "data-test-id": e = "fondue-flex",
+    children: r,
+    role: i,
+    "aria-label": d,
+    "aria-hidden": s,
+    "aria-describedby": t,
+    "aria-labelledby": o,
+    "aria-expanded": l,
+    "aria-haspopup": p,
+    ...b
+  }, f) => /* @__PURE__ */ m(
+    a,
+    {
+      className: x.root,
+      "data-test-id": e,
+      style: y(b, { justify: "justify-content" }),
+      role: i,
+      "aria-label": d,
+      "aria-hidden": s,
+      "aria-describedby": t,
+      "aria-labelledby": o,
+      "aria-expanded": l,
+      "aria-haspopup": p,
+      ref: f,
+      children: r
+    }
+  )
 );
-y.displayName = "Flyout.Trigger";
-const D = {
-  compact: 8,
-  comfortable: 12,
-  spacious: 16
-}, H = {
-  compact: 8,
-  spacious: 24
-}, p = ({
-  align: t = "start",
-  maxWidth: o = "360px",
-  padding: a = "compact",
-  rounded: r = "medium",
-  width: d = "fit-content",
-  shadow: n = "medium",
-  side: N,
-  triggerOffset: v = "compact",
-  viewportCollisionPadding: C = "compact",
-  "data-test-id": P = "fondue-flyout-content",
-  children: R,
-  ...b
-}, w) => {
-  const { theme: A, dir: c } = S(), T = (s) => !s || c === "ltr" ? s : s === "left" ? "right" : s === "right" ? "left" : s;
-  return /* @__PURE__ */ e(l.Portal, { children: /* @__PURE__ */ m(j, { theme: A, dir: c, children: [
-    /* @__PURE__ */ e("div", { "data-test-id": "fondue-flyout-overlay", className: u.overlay }),
-    /* @__PURE__ */ e(
-      l.Content,
-      {
-        dir: c,
-        style: {
-          "--flyout-max-width": o,
-          "--flyout-width": d
-        },
-        ref: w,
-        align: t,
-        collisionPadding: H[C],
-        sideOffset: D[v],
-        side: T(N),
-        className: u.root,
-        "data-flyout-spacing": a,
-        "data-rounded": r,
-        "data-shadow": n,
-        "data-test-id": P,
-        onFocus: B,
-        ...b,
-        children: R
-      }
-    )
-  ] }) });
-};
-p.displayName = "Flyout.Content";
-const F = ({ showCloseButton: t, children: o, "data-test-id": a = "fondue-flyout-header", closeProps: r }, d) => {
-  const { t: n } = I();
-  return /* @__PURE__ */ m("div", { "data-test-id": a, ref: d, className: u.header, children: [
-    /* @__PURE__ */ e("div", { children: o }),
-    t && /* @__PURE__ */ e(l.Close, { asChild: !0, ...r, children: /* @__PURE__ */ e(
-      O,
-      {
-        size: "small",
-        aspect: "square",
-        emphasis: "weak",
-        "aria-label": n("Flyout_close"),
-        "data-test-id": `${a}-close`,
-        children: /* @__PURE__ */ e(x, { size: 20 })
-      }
-    ) })
-  ] });
-};
-F.displayName = "Flyout.Header";
-const g = ({ children: t, "data-test-id": o = "fondue-flyout-footer" }, a) => /* @__PURE__ */ e("div", { "data-test-id": o, ref: a, className: u.footer, children: t });
-g.displayName = "Flyout.Footer";
-const h = ({ children: t, "data-test-id": o = "fondue-flyout-body", scrollable: a = !1 }, r) => /* @__PURE__ */ e(
-  "div",
-  {
-    "data-test-id": o,
-    ref: r,
-    "data-flyout-spacing": "compact",
-    "data-scrollable": a,
-    className: u.body,
-    children: t
-  }
-);
-h.displayName = "Flyout.Body";
-const W = {
-  Root: f,
-  Trigger: i(y),
-  Content: i(p),
-  Header: i(F),
-  Footer: i(g),
-  Body: i(h)
-};
+u.displayName = "Flex";
 export {
-  W as Flyout,
-  h as FlyoutBody,
-  p as FlyoutContent,
-  g as FlyoutFooter,
-  F as FlyoutHeader,
-  f as FlyoutRoot,
-  y as FlyoutTrigger
+  u as Flex
 };
 //# sourceMappingURL=fondue-components15.js.map

package/dist/fondue-components15.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components15.js","sources":["../src/components/Flyout/Flyout.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { forwardRef, type CSSProperties, type ForwardedRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { useTranslation } from '#/hooks/useTranslation';\nimport { addAutoFocusAttribute, addShowFocusRing } from '#/utilities/domUtilities';\n\nimport { Button } from '../Button/Button';\nimport { ThemeProvider, useFondueTheme } from '../ThemeProvider/ThemeProvider';\n\nimport styles from './styles/flyout.module.scss';\n\nexport type FlyoutRootProps = {\n    /**\n     * Disable interaction with the rest of the page\n     * @default false\n     */\n    modal?: boolean;\n    /**\n     * The controlled `open` state of the flyout\n     * @default false\n     */\n    open?: boolean;\n    /**\n     * Event handler called when the `open` state changes\n     */\n    onOpenChange?: (open: boolean) => void;\n    children?: ReactNode;\n};\n\nexport const FlyoutRoot = ({ children, ...props }: FlyoutRootProps) => {\n    return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\nFlyoutRoot.displayName = 'Flyout.Root';\n\nexport type FlyoutTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default true\n     */\n    asChild?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const FlyoutTrigger = (\n    { asChild = true, children, 'data-test-id': dataTestId = 'fondue-flyout-trigger', ...props }: FlyoutTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixPopover.Trigger\n            onMouseDown={addAutoFocusAttribute}\n            data-auto-focus-visible=\"true\"\n            data-auto-focus-trigger\n            data-test-id={dataTestId}\n            asChild={asChild}\n            ref={ref}\n            {...props}\n        >\n            {children}\n        </RadixPopover.Trigger>\n    );\n};\nFlyoutTrigger.displayName = 'Flyout.Trigger';\n\ntype FlyoutSpacing = 'compact' | 'comfortable' | 'spacious';\ntype FlyoutViewportCollisionPadding = 'compact' | 'spacious';\nexport type FlyoutContentProps = {\n    /**\n     * Add a shadow to the flyout\n     * @default \"medium\"\n     */\n    shadow?: 'none' | 'medium' | 'large';\n    /**\n     * Add rounded corners to the flyout\n     * @default \"medium\"\n     */\n    rounded?: 'none' | 'medium' | 'large';\n    /**\n     * Define the prefered side of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"bottom\"\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    /**\n     * Define the prefered alignment of the flyout. Can be overriden by viewport collisions viewport.\n     * @default \"start\"\n     */\n    align?: 'start' | 'center' | 'end';\n    /**\n     * Define the padding of the flyout\n     * @default \"compact\"\n     */\n    padding?: 'none' | 'tight' | 'compact' | 'comfortable' | 'spacious';\n    /**\n     * Define the fixed width of the flyout\n     * @default \"fit-content\"\n     */\n    width?: string;\n    /**\n     * Defines the spacing between the dropdown and its trigger.\n     * @default 'compact'\n     */\n    triggerOffset?: FlyoutSpacing;\n    /**\n     * Define the maximum width of the flyout\n     * @default \"360px\"\n     */\n    maxWidth?: string;\n    /**\n     * Define the minimum distance between the flyout and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: FlyoutViewportCollisionPadding;\n    /**\n     * Event handler called when auto-focusing on open\n     */\n    onOpenAutoFocus?: (event: Event) => void;\n    /**\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n    children?: ReactNode;\n    'data-test-id'?: string;\n};\n\nconst SPACING_MAP: Record<FlyoutSpacing, number> = {\n    compact: 8,\n    comfortable: 12,\n    spacious: 16,\n};\n\nconst VIEWPORT_COLLISION_PADDING_MAP: Record<FlyoutViewportCollisionPadding, number> = {\n    compact: 8,\n    spacious: 24,\n};\n\nexport const FlyoutContent = (\n    {\n        align = 'start',\n        maxWidth = '360px',\n        padding = 'compact',\n        rounded = 'medium',\n        width = 'fit-content',\n        shadow = 'medium',\n        side,\n        triggerOffset = 'compact',\n        viewportCollisionPadding = 'compact',\n        'data-test-id': dataTestId = 'fondue-flyout-content',\n        children,\n        ...props\n    }: FlyoutContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { theme, dir } = useFondueTheme();\n\n    const getAdjustedSide = (side?: 'top' | 'right' | 'bottom' | 'left') => {\n        if (!side || 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                <div data-test-id=\"fondue-flyout-overlay\" className={styles.overlay} />\n                <RadixPopover.Content\n                    dir={dir}\n                    style={\n                        {\n                            '--flyout-max-width': maxWidth,\n                            '--flyout-width': width,\n                        } as CSSProperties\n                    }\n                    ref={ref}\n                    align={align}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding]}\n                    sideOffset={SPACING_MAP[triggerOffset]}\n                    side={getAdjustedSide(side)}\n                    className={styles.root}\n                    data-flyout-spacing={padding}\n                    data-rounded={rounded}\n                    data-shadow={shadow}\n                    data-test-id={dataTestId}\n                    onFocus={addShowFocusRing}\n                    {...props}\n                >\n                    {children}\n                </RadixPopover.Content>\n            </ThemeProvider>\n        </RadixPopover.Portal>\n    );\n};\nFlyoutContent.displayName = 'Flyout.Content';\n\nexport type FlyoutHeaderProps = {\n    /**\n     * Show a close button in the header\n     * @default false\n     */\n    showCloseButton?: boolean;\n    children?: ReactNode;\n    'data-test-id'?: string;\n    closeProps?: CommonAriaProps;\n};\n\nexport const FlyoutHeader = (\n    { showCloseButton, children, 'data-test-id': dataTestId = 'fondue-flyout-header', closeProps }: FlyoutHeaderProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    const { t } = useTranslation();\n\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.header}>\n            <div>{children}</div>\n            {showCloseButton && (\n                <RadixPopover.Close asChild {...closeProps}>\n                    <Button\n                        size=\"small\"\n                        aspect=\"square\"\n                        emphasis=\"weak\"\n                        aria-label={t('Flyout_close')}\n                        data-test-id={`${dataTestId}-close`}\n                    >\n                        <IconCross size={20} />\n                    </Button>\n                </RadixPopover.Close>\n            )}\n        </div>\n    );\n};\nFlyoutHeader.displayName = 'Flyout.Header';\n\nexport type FlyoutFooterProps = { children?: ReactNode; 'data-test-id'?: string };\n\nexport const FlyoutFooter = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-footer' }: FlyoutFooterProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div data-test-id={dataTestId} ref={ref} className={styles.footer}>\n            {children}\n        </div>\n    );\n};\nFlyoutFooter.displayName = 'Flyout.Footer';\n\nexport type FlyoutBodyProps = {\n    children?: ReactNode;\n    'data-test-id'?: string;\n    /**\n     * Allow the body to scroll if the max height of the flyout is reached\n     * @default false\n     */\n    scrollable?: boolean;\n};\n\nexport const FlyoutBody = (\n    { children, 'data-test-id': dataTestId = 'fondue-flyout-body', scrollable = false }: FlyoutBodyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <div\n            data-test-id={dataTestId}\n            ref={ref}\n            data-flyout-spacing=\"compact\"\n            data-scrollable={scrollable}\n            className={styles.body}\n        >\n            {children}\n        </div>\n    );\n};\nFlyoutBody.displayName = 'Flyout.Body';\n\nexport const Flyout = {\n    Root: FlyoutRoot,\n    Trigger: forwardRef<HTMLButtonElement, FlyoutTriggerProps>(FlyoutTrigger),\n    Content: forwardRef<HTMLDivElement, FlyoutContentProps>(FlyoutContent),\n    Header: forwardRef<HTMLDivElement, FlyoutHeaderProps>(FlyoutHeader),\n    Footer: forwardRef<HTMLDivElement, FlyoutFooterProps>(FlyoutFooter),\n    Body: forwardRef<HTMLDivElement, FlyoutBodyProps>(FlyoutBody),\n};\n"],"names":["FlyoutRoot","children","props","RadixPopover","FlyoutTrigger","asChild","dataTestId","ref","jsx","addAutoFocusAttribute","SPACING_MAP","VIEWPORT_COLLISION_PADDING_MAP","FlyoutContent","align","maxWidth","padding","rounded","width","shadow","side","triggerOffset","viewportCollisionPadding","theme","dir","useFondueTheme","getAdjustedSide","jsxs","ThemeProvider","styles","addShowFocusRing","FlyoutHeader","showCloseButton","closeProps","t","useTranslation","Button","IconCross","FlyoutFooter","FlyoutBody","scrollable","Flyout","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components15.js","sources":["../src/components/Flex/Flex.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type CommonAriaProps } from '#/helpers/aria';\nimport { type Responsive, type SizeValue, type LayoutComponentProps } from '#/helpers/layout';\nimport { propsToCssVariables } from '#/helpers/propsToCssVariables';\n\nimport styles from './styles/flex.module.scss';\n\nexport type FlexProps = LayoutComponentProps & {\n    /**\n     * The element to render the Flex component as.\n     * @default 'div'\n     */\n    as?: 'div' | 'span';\n    /**\n     * The display property.\n     * @default 'flex'\n     */\n    display?: Responsive<'none' | 'flex' | 'inline-flex'>;\n    /**\n     * The direction of the children.\n     * @default 'row'\n     */\n    direction?: Responsive<'row' | 'row-reverse' | 'column' | 'column-reverse'>;\n    /**\n     * The alignment of the children.\n     */\n    align?: Responsive<'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'>;\n    /**\n     * The justification of the children.\n     */\n    justify?: Responsive<'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly'>;\n    /**\n     * The wrap property.\n     */\n    wrap?: Responsive<'nowrap' | 'wrap' | 'wrap-reverse'>;\n    /**\n     * The gap between the children.\n     */\n    gap?: Responsive<SizeValue>;\n    /**\n     * The horizontal gap between the children.\n     */\n    gapX?: Responsive<SizeValue>;\n    /**\n     * The vertical gap between the children.\n     */\n    gapY?: Responsive<SizeValue>;\n\n    children?: ReactNode;\n    'data-test-id'?: string;\n} & CommonAriaProps;\n\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>(\n    (\n        {\n            as: Component = 'div',\n            'data-test-id': dataTestId = 'fondue-flex',\n            children,\n            role,\n            'aria-label': ariaLabel,\n            'aria-hidden': ariaHidden,\n            'aria-describedby': ariaDescribedBy,\n            'aria-labelledby': ariaLabelledBy,\n            'aria-expanded': ariaExpanded,\n            'aria-haspopup': ariaHasPopup,\n            ...props\n        },\n        ref,\n    ) => {\n        return (\n            <Component\n                className={styles.root}\n                data-test-id={dataTestId}\n                style={propsToCssVariables(props, { justify: 'justify-content' })}\n                role={role}\n                aria-label={ariaLabel}\n                aria-hidden={ariaHidden}\n                aria-describedby={ariaDescribedBy}\n                aria-labelledby={ariaLabelledBy}\n                aria-expanded={ariaExpanded}\n                aria-haspopup={ariaHasPopup}\n                ref={ref}\n            >\n                {children}\n            </Component>\n        );\n    },\n);\nFlex.displayName = 'Flex';\n"],"names":["Flex","forwardRef","Component","dataTestId","children","role","ariaLabel","ariaHidden","ariaDescribedBy","ariaLabelledBy","ariaExpanded","ariaHasPopup","props","ref","jsx","styles","propsToCssVariables"],"mappings":";;;;AAuDO,MAAMA,IAAOC;AAAA,EAChB,CACI;AAAA,IACI,IAAIC,IAAY;AAAA,IAChB,gBAAgBC,IAAa;AAAA,IAC7B,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAcC;AAAA,IACd,eAAeC;AAAA,IACf,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IACnB,iBAAiBC;AAAA,IACjB,iBAAiBC;AAAA,IACjB,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACG,WAAWa,EAAO;AAAA,MAClB,gBAAcZ;AAAA,MACd,OAAOa,EAAoBJ,GAAO,EAAE,SAAS,mBAAmB;AAAA,MAChE,MAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,eAAaC;AAAA,MACb,oBAAkBC;AAAA,MAClB,mBAAiBC;AAAA,MACjB,iBAAeC;AAAA,MACf,iBAAeC;AAAA,MACf,KAAAE;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAIjB;AACAJ,EAAK,cAAc;"}

package/dist/fondue-components150.js

@@ -1,71 +1,44 @@
-const a = {
-  lessThanXSeconds: {
-    one: "less than a second",
-    other: "less than {{count}} seconds"
-  },
-  xSeconds: {
-    one: "1 second",
-    other: "{{count}} seconds"
-  },
-  halfAMinute: "half a minute",
-  lessThanXMinutes: {
-    one: "less than a minute",
-    other: "less than {{count}} minutes"
-  },
-  xMinutes: {
-    one: "1 minute",
-    other: "{{count}} minutes"
-  },
-  aboutXHours: {
-    one: "about 1 hour",
-    other: "about {{count}} hours"
-  },
-  xHours: {
-    one: "1 hour",
-    other: "{{count}} hours"
-  },
-  xDays: {
-    one: "1 day",
-    other: "{{count}} days"
-  },
-  aboutXWeeks: {
-    one: "about 1 week",
-    other: "about {{count}} weeks"
-  },
-  xWeeks: {
-    one: "1 week",
-    other: "{{count}} weeks"
-  },
-  aboutXMonths: {
-    one: "about 1 month",
-    other: "about {{count}} months"
-  },
-  xMonths: {
-    one: "1 month",
-    other: "{{count}} months"
-  },
-  aboutXYears: {
-    one: "about 1 year",
-    other: "about {{count}} years"
-  },
-  xYears: {
-    one: "1 year",
-    other: "{{count}} years"
-  },
-  overXYears: {
-    one: "over 1 year",
-    other: "over {{count}} years"
-  },
-  almostXYears: {
-    one: "almost 1 year",
-    other: "almost {{count}} years"
-  }
-}, r = (s, n, o) => {
-  let e;
-  const t = a[s];
-  return typeof t == "string" ? e = t : n === 1 ? e = t.one : e = t.other.replace("{{count}}", n.toString()), o != null && o.addSuffix ? o.comparison && o.comparison > 0 ? "in " + e : e + " ago" : e;
+const e = "_wrapper_1iuqu_4", t = "_root_1iuqu_8", o = "_toggleMonthButtonContainer_1iuqu_8", n = "_nextMonthButtonContainer_1iuqu_22", _ = "_weekday_1iuqu_27", u = "_weekdays_1iuqu_39", d = "_week_1iuqu_27", s = "_day_1iuqu_49", c = "_disabled_1iuqu_70", i = "_dayContent_1iuqu_73", r = "_outside_1iuqu_77", a = "_dayButton_1iuqu_90", l = "_selected_1iuqu_124", q = "_selectedMiddle_1iuqu_134", y = "_selectedStart_1iuqu_147", h = "_selectedEnd_1iuqu_147", w = "_hoverAfter_1iuqu_180", B = "_hoverSelected_1iuqu_193", k = "_hoverBefore_1iuqu_254", v = {
+  wrapper: e,
+  root: t,
+  toggleMonthButtonContainer: o,
+  nextMonthButtonContainer: n,
+  weekday: _,
+  weekdays: u,
+  week: d,
+  day: s,
+  disabled: c,
+  dayContent: i,
+  outside: r,
+  dayButton: a,
+  selected: l,
+  selectedMiddle: q,
+  selectedStart: y,
+  selectedEnd: h,
+  hoverAfter: w,
+  hoverSelected: B,
+  hoverBefore: k
 };
 export {
-  r as formatDistance
+  s as day,
+  a as dayButton,
+  i as dayContent,
+  v as default,
+  c as disabled,
+  w as hoverAfter,
+  k as hoverBefore,
+  B as hoverSelected,
+  n as nextMonthButtonContainer,
+  r as outside,
+  t as root,
+  l as selected,
+  h as selectedEnd,
+  q as selectedMiddle,
+  y as selectedStart,
+  o as toggleMonthButtonContainer,
+  d as week,
+  _ as weekday,
+  u as weekdays,
+  e as wrapper
 };
 //# sourceMappingURL=fondue-components150.js.map

package/dist/fondue-components150.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components150.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/en-US/_lib/formatDistance.mjs"],"sourcesContent":["const formatDistanceLocale = {\n  lessThanXSeconds: {\n    one: \"less than a second\",\n    other: \"less than {{count}} seconds\",\n  },\n\n  xSeconds: {\n    one: \"1 second\",\n    other: \"{{count}} seconds\",\n  },\n\n  halfAMinute: \"half a minute\",\n\n  lessThanXMinutes: {\n    one: \"less than a minute\",\n    other: \"less than {{count}} minutes\",\n  },\n\n  xMinutes: {\n    one: \"1 minute\",\n    other: \"{{count}} minutes\",\n  },\n\n  aboutXHours: {\n    one: \"about 1 hour\",\n    other: \"about {{count}} hours\",\n  },\n\n  xHours: {\n    one: \"1 hour\",\n    other: \"{{count}} hours\",\n  },\n\n  xDays: {\n    one: \"1 day\",\n    other: \"{{count}} days\",\n  },\n\n  aboutXWeeks: {\n    one: \"about 1 week\",\n    other: \"about {{count}} weeks\",\n  },\n\n  xWeeks: {\n    one: \"1 week\",\n    other: \"{{count}} weeks\",\n  },\n\n  aboutXMonths: {\n    one: \"about 1 month\",\n    other: \"about {{count}} months\",\n  },\n\n  xMonths: {\n    one: \"1 month\",\n    other: \"{{count}} months\",\n  },\n\n  aboutXYears: {\n    one: \"about 1 year\",\n    other: \"about {{count}} years\",\n  },\n\n  xYears: {\n    one: \"1 year\",\n    other: \"{{count}} years\",\n  },\n\n  overXYears: {\n    one: \"over 1 year\",\n    other: \"over {{count}} years\",\n  },\n\n  almostXYears: {\n    one: \"almost 1 year\",\n    other: \"almost {{count}} years\",\n  },\n};\n\nexport const formatDistance = (token, count, options) => {\n  let result;\n\n  const tokenValue = formatDistanceLocale[token];\n  if (typeof tokenValue === \"string\") {\n    result = tokenValue;\n  } else if (count === 1) {\n    result = tokenValue.one;\n  } else {\n    result = tokenValue.other.replace(\"{{count}}\", count.toString());\n  }\n\n  if (options?.addSuffix) {\n    if (options.comparison && options.comparison > 0) {\n      return \"in \" + result;\n    } else {\n      return result + \" ago\";\n    }\n  }\n\n  return result;\n};\n"],"names":["formatDistanceLocale","formatDistance","token","count","options","result","tokenValue"],"mappings":"AAAA,MAAMA,IAAuB;AAAA,EAC3B,kBAAkB;AAAA,IAChB,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,UAAU;AAAA,IACR,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,aAAa;AAAA,EAEb,kBAAkB;AAAA,IAChB,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,UAAU;AAAA,IACR,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,aAAa;AAAA,IACX,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,OAAO;AAAA,IACL,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,aAAa;AAAA,IACX,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,cAAc;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,SAAS;AAAA,IACP,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,aAAa;AAAA,IACX,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,QAAQ;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,YAAY;AAAA,IACV,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AAAA,EAEE,cAAc;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,EACX;AACA,GAEaC,IAAiB,CAACC,GAAOC,GAAOC,MAAY;AACvD,MAAIC;AAEJ,QAAMC,IAAaN,EAAqBE,CAAK;AAS7C,SARI,OAAOI,KAAe,WACxBD,IAASC,IACAH,MAAU,IACnBE,IAASC,EAAW,MAEpBD,IAASC,EAAW,MAAM,QAAQ,aAAaH,EAAM,UAAU,GAG7DC,KAAA,QAAAA,EAAS,YACPA,EAAQ,cAAcA,EAAQ,aAAa,IACtC,QAAQC,IAERA,IAAS,SAIbA;AACT;","x_google_ignoreList":[0]}
+{"version":3,"file":"fondue-components150.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/fondue-components151.js

@@ -1,34 +1,24 @@
-import { buildFormatLongFn as t } from "./fondue-components159.js";
-const m = {
-  full: "EEEE, MMMM do, y",
-  long: "MMMM do, y",
-  medium: "MMM d, y",
-  short: "MM/dd/yyyy"
-}, a = {
-  full: "h:mm:ss a zzzz",
-  long: "h:mm:ss a z",
-  medium: "h:mm:ss a",
-  short: "h:mm a"
-}, o = {
-  full: "{{date}} 'at' {{time}}",
-  long: "{{date}} 'at' {{time}}",
-  medium: "{{date}}, {{time}}",
-  short: "{{date}}, {{time}}"
-}, e = {
-  date: t({
-    formats: m,
-    defaultWidth: "full"
-  }),
-  time: t({
-    formats: a,
-    defaultWidth: "full"
-  }),
-  dateTime: t({
-    formats: o,
-    defaultWidth: "full"
-  })
+import { jsx as e } from "react/jsx-runtime";
+import { IconCross as s } from "@frontify/fondue-icons";
+import { Button as t } from "./fondue-components6.js";
+import { useTranslation as a } from "./fondue-components43.js";
+import l from "./fondue-components122.js";
+const f = ({ onClear: r }) => {
+  const { t: o } = a();
+  return /* @__PURE__ */ e(
+    t,
+    {
+      "aria-label": o("Select_clear"),
+      type: "button",
+      size: "small",
+      emphasis: "weak",
+      aspect: "square",
+      onPress: r,
+      children: /* @__PURE__ */ e(s, { className: l.clearIcon, size: 16 })
+    }
+  );
 };
 export {
-  e as formatLong
+  f as SelectClear
 };
 //# sourceMappingURL=fondue-components151.js.map

package/dist/fondue-components151.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components151.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/en-US/_lib/formatLong.mjs"],"sourcesContent":["import { buildFormatLongFn } from \"../../_lib/buildFormatLongFn.mjs\";\n\nconst dateFormats = {\n  full: \"EEEE, MMMM do, y\",\n  long: \"MMMM do, y\",\n  medium: \"MMM d, y\",\n  short: \"MM/dd/yyyy\",\n};\n\nconst timeFormats = {\n  full: \"h:mm:ss a zzzz\",\n  long: \"h:mm:ss a z\",\n  medium: \"h:mm:ss a\",\n  short: \"h:mm a\",\n};\n\nconst dateTimeFormats = {\n  full: \"{{date}} 'at' {{time}}\",\n  long: \"{{date}} 'at' {{time}}\",\n  medium: \"{{date}}, {{time}}\",\n  short: \"{{date}}, {{time}}\",\n};\n\nexport const formatLong = {\n  date: buildFormatLongFn({\n    formats: dateFormats,\n    defaultWidth: \"full\",\n  }),\n\n  time: buildFormatLongFn({\n    formats: timeFormats,\n    defaultWidth: \"full\",\n  }),\n\n  dateTime: buildFormatLongFn({\n    formats: dateTimeFormats,\n    defaultWidth: \"full\",\n  }),\n};\n"],"names":["dateFormats","timeFormats","dateTimeFormats","formatLong","buildFormatLongFn"],"mappings":";AAEA,MAAMA,IAAc;AAAA,EAClB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT,GAEMC,IAAc;AAAA,EAClB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT,GAEMC,IAAkB;AAAA,EACtB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT,GAEaC,IAAa;AAAA,EACxB,MAAMC,EAAkB;AAAA,IACtB,SAASJ;AAAA,IACT,cAAc;AAAA,EAClB,CAAG;AAAA,EAED,MAAMI,EAAkB;AAAA,IACtB,SAASH;AAAA,IACT,cAAc;AAAA,EAClB,CAAG;AAAA,EAED,UAAUG,EAAkB;AAAA,IAC1B,SAASF;AAAA,IACT,cAAc;AAAA,EAClB,CAAG;AACH;","x_google_ignoreList":[0]}
+{"version":3,"file":"fondue-components151.js","sources":["../src/components/Select/components/SelectClear.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\n\nimport { Button } from '#/components/Button/Button';\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from '../styles/select.module.scss';\n\nexport const SelectClear = ({ onClear }: { onClear?: () => void }) => {\n    const { t } = useTranslation();\n\n    return (\n        <Button\n            aria-label={t('Select_clear')}\n            type=\"button\"\n            size=\"small\"\n            emphasis=\"weak\"\n            aspect=\"square\"\n            onPress={onClear}\n        >\n            <IconCross className={styles.clearIcon} size={16} />\n        </Button>\n    );\n};\n"],"names":["SelectClear","onClear","t","useTranslation","jsx","Button","IconCross","styles"],"mappings":";;;;;AASO,MAAMA,IAAc,CAAC,EAAE,SAAAC,QAAwC;AAClE,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,cAAYH,EAAE,cAAc;AAAA,MAC5B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,UAAS;AAAA,MACT,QAAO;AAAA,MACP,SAASD;AAAA,MAET,4BAACK,GAAA,EAAU,WAAWC,EAAO,WAAW,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA;AAG9D;"}

package/dist/fondue-components152.js

@@ -1,12 +1,43 @@
-const t = {
-  lastWeek: "'last' eeee 'at' p",
-  yesterday: "'yesterday at' p",
-  today: "'today at' p",
-  tomorrow: "'tomorrow at' p",
-  nextWeek: "eeee 'at' p",
-  other: "P"
-}, s = (e, a, o, r) => t[e];
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components99.js";
+const g = ({
+  children: o,
+  value: r,
+  label: s
+}) => o && typeof o == "string" ? {
+  value: r !== void 0 ? r : o,
+  label: s !== void 0 ? s : o
+} : {
+  value: r ?? "",
+  label: s !== void 0 ? s : r ?? "",
+  ...o ? { children: o } : null
+}, v = (o, r) => u(o) && o.type === r, w = (o, r, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(o, (e) => {
+    if (v(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 } = w(
+        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 {
-  s as formatRelative
+  g as getSelectOptionValue,
+  v as isReactLeaf,
+  w as recursiveMap
 };
 //# sourceMappingURL=fondue-components152.js.map

package/dist/fondue-components152.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components152.js","sources":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/en-US/_lib/formatRelative.mjs"],"sourcesContent":["const formatRelativeLocale = {\n  lastWeek: \"'last' eeee 'at' p\",\n  yesterday: \"'yesterday at' p\",\n  today: \"'today at' p\",\n  tomorrow: \"'tomorrow at' p\",\n  nextWeek: \"eeee 'at' p\",\n  other: \"P\",\n};\n\nexport const formatRelative = (token, _date, _baseDate, _options) =>\n  formatRelativeLocale[token];\n"],"names":["formatRelativeLocale","formatRelative","token","_date","_baseDate","_options"],"mappings":"AAAA,MAAMA,IAAuB;AAAA,EAC3B,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AACT,GAEaC,IAAiB,CAACC,GAAOC,GAAOC,GAAWC,MACtDL,EAAqBE,CAAK;","x_google_ignoreList":[0]}
+{"version":3,"file":"fondue-components152.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 './components/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 !== undefined ? value : children,\n            label: label !== undefined ? label : children,\n        };\n    }\n\n    return {\n        value: value ?? '',\n        label: label !== undefined ? 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,MAAU,SAAYA,IAAQD;AAAA,EACrC,OAAOE,MAAU,SAAYA,IAAQF;AAAA,IAItC;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,MAAU,SAAYA,IAASD,KAAS;AAAA,EAC/C,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;"}