@frontify/fondue-components 29.0.1 → 29.2.0

package/dist/fondue-components148.js

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

package/dist/fondue-components148.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components148.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;"}
+{"version":3,"file":"fondue-components148.js","sources":["../src/components/Select/components/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 '#/components/ThemeProvider/ThemeProvider';\n\nimport styles from '../styles/select.module.scss';\nimport { getSelectOptionValue, recursiveMap } from '../utils';\n\nimport { type SelectItemProps } from './SelectItem';\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    selectedItemValues?: string[];\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     * @internal\n     * Event handler called when the escape key is pressed.\n     */\n    onEscapeKeyDown?: (event: KeyboardEvent) => void;\n};\n\nexport const SelectMenu = ({\n    highlightedIndex,\n    getMenuProps,\n    getItemProps,\n    children,\n    filterText,\n    align,\n    side,\n    selectedItemValues,\n    hasInteractedSinceOpening,\n    viewportCollisionPadding = 'compact',\n    onEscapeKeyDown,\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                    dir={dir}\n                    align={align}\n                    side={getAdjustedSide(side)}\n                    collisionPadding={VIEWPORT_COLLISION_PADDING_MAP[viewportCollisionPadding] + 8}\n                    onOpenAutoFocus={handleOnOpenAutoFocus}\n                    onEscapeKeyDown={onEscapeKeyDown}\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 = selectedItemValues?.includes(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","selectedItemValues","hasInteractedSinceOpening","viewportCollisionPadding","onEscapeKeyDown","handleOnOpenAutoFocus","event","VIEWPORT_COLLISION_PADDING_MAP","theme","dir","useFondueTheme","getAdjustedSide","RadixPopover","jsx","ThemeProvider","styles","recursiveMap","child","index","isValidElement","optionData","getSelectOptionValue","itemProps","isSelected","RadixSlot"],"mappings":";;;;;;;AA4EO,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,oBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,iBAAAC;AACJ,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,CAACX,MACjBS,MAAQ,QACDT,IAGPA,MAAS,SACF,UAEPA,MAAS,UACF,SAGJA;AAGX,2BACKY,EAAa,QAAb,EACG,UAAA,gBAAAC,EAACC,GAAA,EAAc,OAAAN,GAAc,KAAAC,GACzB,UAAA,gBAAAI;AAAA,IAACD,EAAa;AAAA,IAAb;AAAA,MACG,KAAAH;AAAA,MACA,OAAAV;AAAA,MACA,MAAMY,EAAgBX,CAAI;AAAA,MAC1B,kBAAkBO,EAA+BJ,CAAwB,IAAI;AAAA,MAC7E,iBAAiBE;AAAA,MACjB,iBAAAD;AAAA,MACA,WAAWW,EAAO;AAAA,MAElB,UAAA,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWE,EAAO;AAAA,UAKjB,GAAGpB,EAAa,CAAA,GAAI,EAAE,kBAAkB,IAAM;AAAA,UAC/C,uBAAqBO,IAA4B,SAAS;AAAA,UAC1D,gBAAa;AAAA,UAGT,UAAAc;AAAA,YACInB;AAAA,YACA,CAACoB,GAAOC,MAAU;AAOd,mBANgB,CACZD;AAAAA;AAAAA,gBAGAE,EAAuBF,CAAK,KAAKA,EAAM,QAAQ;AAAA,iBAEtBA,CAAK,GAAG;AACjC,sBAAMG,IAAaC,EAAqBJ,EAAM,KAAK,GAC7CK,IAAY1B,EAAa;AAAA,kBAC3B,MAAMwB;AAAA,kBACN,OAAAF;AAAA,kBACA,GAAID,EAAM,MAAM,EAAE,KAAKA,EAAM,IAAA,IAAQ,CAAA;AAAA,gBAAC,CACzC,GAEKM,IAAatB,KAAA,gBAAAA,EAAoB,SAASmB,EAAW;AAE3D,uBACI,gBAAAP;AAAA,kBAACW;AAAAA,kBAAA;AAAA,oBACG,WAAWT,EAAO;AAAA,oBAClB,oBAAkBrB,MAAqBwB;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,YACAnB;AAAA,UAAA,EACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAEV;AAAA,EAAA,GAER,EAAA,CACJ;AAER;AACAL,EAAW,cAAc;"}

package/dist/fondue-components149.js

@@ -1,43 +1,34 @@
-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
-  };
+import { jsxs as c, Fragment as n, jsx as r } from "react/jsx-runtime";
+import { IconCheckMark as i, IconExclamationMarkTriangle as l } from "@frontify/fondue-icons";
+import { useTranslation as m } from "./fondue-components43.js";
+import s from "./fondue-components134.js";
+const f = ({ status: o, hasError: a, dataTestId: e }) => {
+  const { t } = m();
+  return /* @__PURE__ */ c(n, { children: [
+    o === "success" ? /* @__PURE__ */ r(
+      i,
+      {
+        size: 16,
+        className: s.iconSuccess,
+        "data-test-id": `${e}-success-icon`,
+        "aria-hidden": "true"
+      }
+    ) : null,
+    a ? /* @__PURE__ */ c(n, { children: [
+      /* @__PURE__ */ r(
+        l,
+        {
+          size: 16,
+          className: s.iconError,
+          "data-test-id": `${e}-error-icon`,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ r("span", { className: s.srOnly, role: "alert", children: t("Select_error") })
+    ] }) : null
+  ] });
 };
 export {
-  g as getSelectOptionValue,
-  v as isReactLeaf,
-  w as recursiveMap
+  f as StatusIcons
 };
 //# 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/Select/components/StatusIcons.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport { type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from '../styles/select.module.scss';\n\ntype StatusIconsProps = {\n    /** The current status of the component. */\n    status: 'neutral' | 'success' | 'error';\n    /** Whether the component is in an error state (may differ from status when validation is involved). */\n    hasError: boolean;\n    /** The data-test-id prefix for the icons. */\n    dataTestId: string;\n};\n\nexport const StatusIcons = ({ status, hasError, dataTestId }: StatusIconsProps): ReactNode => {\n    const { t } = useTranslation();\n    return (\n        <>\n            {status === 'success' ? (\n                <IconCheckMark\n                    size={16}\n                    className={styles.iconSuccess}\n                    data-test-id={`${dataTestId}-success-icon`}\n                    aria-hidden=\"true\"\n                />\n            ) : null}\n            {hasError ? (\n                <>\n                    <IconExclamationMarkTriangle\n                        size={16}\n                        className={styles.iconError}\n                        data-test-id={`${dataTestId}-error-icon`}\n                        aria-hidden=\"true\"\n                    />\n                    <span className={styles.srOnly} role=\"alert\">\n                        {t('Select_error')}\n                    </span>\n                </>\n            ) : null}\n        </>\n    );\n};\n"],"names":["StatusIcons","status","hasError","dataTestId","useTranslation","jsxs","Fragment","jsx","IconCheckMark","styles","IconExclamationMarkTriangle"],"mappings":";;;;AAkBO,MAAMA,IAAc,CAAC,EAAE,QAAAC,GAAQ,UAAAC,GAAU,YAAAC,QAA8C;AAC1F,QAAM,EAAE,EAAA,IAAMC,EAAA;AACd,SACI,gBAAAC,EAAAC,GAAA,EACK,UAAA;AAAA,IAAAL,MAAW,YACR,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,MAAM;AAAA,QACN,WAAWC,EAAO;AAAA,QAClB,gBAAc,GAAGN,CAAU;AAAA,QAC3B,eAAY;AAAA,MAAA;AAAA,IAAA,IAEhB;AAAA,IACHD,IACG,gBAAAG,EAAAC,GAAA,EACI,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACG;AAAA,QAAA;AAAA,UACG,MAAM;AAAA,UACN,WAAWD,EAAO;AAAA,UAClB,gBAAc,GAAGN,CAAU;AAAA,UAC3B,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAEhB,gBAAAI,EAAC,UAAK,WAAWE,EAAO,QAAQ,MAAK,SAChC,UAAA,EAAE,cAAc,EAAA,CACrB;AAAA,IAAA,EAAA,CACJ,IACA;AAAA,EAAA,GACR;AAER;"}

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,22 @@
-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"
+import { formatDistance as o } from "./fondue-components157.js";
+import { formatLong as t } from "./fondue-components158.js";
+import { formatRelative as a } from "./fondue-components159.js";
+import { localize as r } from "./fondue-components160.js";
+import { match as e } from "./fondue-components161.js";
+const s = {
+  code: "en-US",
+  formatDistance: o,
+  formatLong: t,
+  formatRelative: a,
+  localize: r,
+  match: e,
+  options: {
+    weekStartsOn: 0,
+    firstWeekContainsDate: 1
   }
-}, 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;
 };
 export {
-  r as formatDistance
+  s as default,
+  s as enUS
 };
 //# 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":["../../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/en-US.mjs"],"sourcesContent":["import { formatDistance } from \"./en-US/_lib/formatDistance.mjs\";\nimport { formatLong } from \"./en-US/_lib/formatLong.mjs\";\nimport { formatRelative } from \"./en-US/_lib/formatRelative.mjs\";\nimport { localize } from \"./en-US/_lib/localize.mjs\";\nimport { match } from \"./en-US/_lib/match.mjs\";\n\n/**\n * @category Locales\n * @summary English locale (United States).\n * @language English\n * @iso-639-2 eng\n * @author Sasha Koss [@kossnocorp](https://github.com/kossnocorp)\n * @author Lesha Koss [@leshakoss](https://github.com/leshakoss)\n */\nexport const enUS = {\n  code: \"en-US\",\n  formatDistance: formatDistance,\n  formatLong: formatLong,\n  formatRelative: formatRelative,\n  localize: localize,\n  match: match,\n  options: {\n    weekStartsOn: 0 /* Sunday */,\n    firstWeekContainsDate: 1,\n  },\n};\n\n// Fallback for modularized imports:\nexport default enUS;\n"],"names":["enUS","formatDistance","formatLong","formatRelative","localize","match"],"mappings":";;;;;AAcY,MAACA,IAAO;AAAA,EAClB,MAAM;AAAA,EACN,gBAAgBC;AAAA,EAChB,YAAYC;AAAA,EACZ,gBAAgBC;AAAA,EAChB,UAAUC;AAAA,EACV,OAAOC;AAAA,EACP,SAAS;AAAA,IACP,cAAc;AAAA,IACd,uBAAuB;AAAA,EAC3B;AACA;","x_google_ignoreList":[0]}