@frontify/fondue-components 9.0.0 → 10.0.1

package/dist/fondue-components18.js

@@ -33,7 +33,7 @@ const g = ({
       f(!0);
     },
     onSelectedItemChange: ({ selectedItem: e }) => {
-      i && i(e.value);
+      i && i(e == null ? void 0 : e.value);
     },
     itemToString: (e) => e ? e.label : ""
   });

package/dist/fondue-components18.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components18.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue: string) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * The aria label of the select component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select',\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const wasClicked = useRef(false);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect && onSelect(selectedItem.value);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor\n                asChild\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                }}\n            >\n                <div\n                    className={styles.root}\n                    data-status={status}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': ariaLabel,\n                              ...(forwardedRef ? { ref: forwardedRef } : {}),\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{selectedItem ? selectedItem.label : placeholder}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","alignMenu","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}
+{"version":3,"file":"fondue-components18.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconCheckMark, IconExclamationMarkTriangle } from '@frontify/fondue-icons';\nimport * as RadixPopover from '@radix-ui/react-popover';\nimport { Slot as RadixSlot } from '@radix-ui/react-slot';\nimport { useSelect } from 'downshift';\nimport { forwardRef, useRef, useState, type ForwardedRef, type ReactNode } from 'react';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu } from './SelectMenu';\nimport { ForwardedRefSelectSlot } from './SelectSlot';\nimport styles from './styles/select.module.scss';\nimport { useSelectData } from './useSelectData';\n\nexport type SelectComponentProps = {\n    /**\n     * Children of the Select component. This can contain the `Select.Slot` components for the label, decorators, clear action and menu.\n     */\n    children?: ReactNode;\n    /**\n     * Callback function that is called when an item is selected.\n     */\n    onSelect?: (selectedValue?: string) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     */\n    defaultValue?: string;\n    /**\n     * The placeholder in the select component.\n     */\n    placeholder?: string;\n    /**\n     * Status of the text input\n     * @default \"neutral\"\n     */\n    status?: 'neutral' | 'success' | 'error';\n    /**\n     * Disables the select component.\n     */\n    disabled?: boolean;\n    /**\n     * The alignment of the menu.\n     * @default \"start\"\n     */\n    alignMenu?: 'start' | 'center' | 'end';\n    /**\n     * The aria label of the select component.\n     */\n    'aria-label'?: string;\n    /**\n     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n};\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        'aria-label': ariaLabel,\n        'data-test-id': dataTestId = 'fondue-select',\n    }: SelectComponentProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const { inputSlots, menuSlots, items, clearButton, getItemByValue } = useSelectData(children);\n\n    const defaultItem = getItemByValue(defaultValue);\n    const activeItem = getItemByValue(value);\n\n    const wasClicked = useRef(false);\n\n    const [hasInteractedSinceOpening, setHasInteractedSinceOpening] = useState(false);\n\n    const { getToggleButtonProps, getMenuProps, getItemProps, reset, selectedItem, isOpen, highlightedIndex } =\n        useSelect({\n            items,\n            defaultSelectedItem: defaultItem,\n            selectedItem: activeItem,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect && onSelect(selectedItem?.value);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    return (\n        <RadixPopover.Root open={isOpen}>\n            <RadixPopover.Anchor\n                asChild\n                onMouseDown={(mouseEvent) => {\n                    wasClicked.current = true;\n                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';\n                }}\n                onFocus={(focusEvent) => {\n                    if (!wasClicked.current) {\n                        focusEvent.target.dataset.showFocusRing = 'true';\n                    }\n                }}\n                onBlur={(blurEvent) => {\n                    blurEvent.target.dataset.showFocusRing = 'false';\n                    wasClicked.current = false;\n                }}\n            >\n                <div\n                    className={styles.root}\n                    data-status={status}\n                    data-disabled={disabled}\n                    data-empty={!selectedItem}\n                    data-test-id={dataTestId}\n                    {...(disabled\n                        ? {}\n                        : getToggleButtonProps({\n                              'aria-label': ariaLabel,\n                              ...(forwardedRef ? { ref: forwardedRef } : {}),\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{selectedItem ? selectedItem.label : placeholder}</span>\n                    {inputSlots}\n                    {clearButton && (\n                        <RadixSlot\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                reset();\n                            }}\n                            className={styles.clear}\n                        >\n                            {clearButton}\n                        </RadixSlot>\n                    )}\n                    <div className={styles.icons}>\n                        <IconCaretDown size={16} className={styles.caret} />\n                        {status === 'success' ? (\n                            <IconCheckMark\n                                size={16}\n                                className={styles.iconSuccess}\n                                data-test-id={`${dataTestId}-success-icon`}\n                            />\n                        ) : null}\n                        {status === 'error' ? (\n                            <IconExclamationMarkTriangle\n                                size={16}\n                                className={styles.iconError}\n                                data-test-id={`${dataTestId}-error-icon`}\n                            />\n                        ) : null}\n                    </div>\n                </div>\n            </RadixPopover.Anchor>\n\n            <SelectMenu\n                align={alignMenu}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n            >\n                {menuSlots}\n            </SelectMenu>\n        </RadixPopover.Root>\n    );\n};\nSelectInput.displayName = 'Select';\n\nexport const ForwardedRefSelect = forwardRef<HTMLDivElement, SelectComponentProps>(SelectInput);\n\n// @ts-expect-error We support both Select and Select.Combobox as the Root\nexport const Select: typeof SelectInput & {\n    Combobox: typeof ForwardedRefCombobox;\n    Item: typeof ForwardedRefSelectItem;\n    Group: typeof ForwardedRefSelectItemGroup;\n    Slot: typeof ForwardedRefSelectSlot;\n} = ForwardedRefSelect;\nSelect.displayName = 'Select';\nSelect.Combobox = ForwardedRefCombobox;\nSelect.Combobox.displayName = 'Select.Combobox';\nSelect.Item = ForwardedRefSelectItem;\nSelect.Item.displayName = 'Select.Item';\nSelect.Group = ForwardedRefSelectItemGroup;\nSelect.Group.displayName = 'Select.Group';\nSelect.Slot = ForwardedRefSelectSlot;\nSelect.Slot.displayName = 'Select.Slot';\n"],"names":["SelectInput","children","onSelect","value","defaultValue","placeholder","status","disabled","alignMenu","ariaLabel","dataTestId","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","jsxs","RadixPopover","jsx","mouseEvent","focusEvent","blurEvent","styles","RadixSlot","event","IconCaretDown","IconCheckMark","IconExclamationMarkTriangle","SelectMenu","ForwardedRefSelect","forwardRef","Select","ForwardedRefCombobox","ForwardedRefSelectItem","ForwardedRefSelectItemGroup","ForwardedRefSelectSlot"],"mappings":"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"}

package/dist/fondue-components21.js

@@ -1,28 +1,39 @@
 import { jsx as n, jsxs as k } from "react/jsx-runtime";
-import { IconArrowUp as B, IconArrowDown as A, IconArrowBidirectional as K } from "@frontify/fondue-icons";
-import { forwardRef as m, useRef as y, useMemo as h } from "react";
+import { IconArrowUp as B, IconArrowDown as z, IconArrowBidirectional as A } from "@frontify/fondue-icons";
+import { forwardRef as m, useRef as y, useMemo as K } from "react";
 import { useSyncRefs as p } from "./fondue-components58.js";
 import { useTextTruncation as w } from "./fondue-components59.js";
 import o from "./fondue-components60.js";
-import { handleKeyDown as z } from "./fondue-components61.js";
+import { handleKeyDown as h } from "./fondue-components61.js";
 const N = m(
-  ({ layout: e = "auto", sticky: a, children: l, ...i }, t) => /* @__PURE__ */ n("div", { onKeyDown: z, role: "grid", tabIndex: -1, children: /* @__PURE__ */ n("table", { ref: t, className: o.table, "data-layout": e, "data-sticky": a, ...i, children: l }) })
+  ({ layout: e = "auto", fontSize: a = "medium", sticky: t, children: i, ...d }, l) => /* @__PURE__ */ n("div", { onKeyDown: h, role: "grid", tabIndex: -1, children: /* @__PURE__ */ n(
+    "table",
+    {
+      ref: l,
+      className: o.table,
+      "data-layout": e,
+      "data-font-size": a,
+      "data-sticky": t,
+      ...d,
+      children: i
+    }
+  ) })
 );
 N.displayName = "Table.Root";
 const g = m(({ children: e }, a) => /* @__PURE__ */ n("caption", { ref: a, className: o.caption, children: e }));
 g.displayName = "Table.Caption";
 const R = m(
-  ({ children: e, "aria-label": a, "aria-busy": l }, i) => /* @__PURE__ */ n("thead", { ref: i, className: o.header, "aria-label": a, "aria-busy": l, children: e })
+  ({ children: e, "aria-label": a, "aria-busy": t }, i) => /* @__PURE__ */ n("thead", { ref: i, className: o.header, "aria-label": a, "aria-busy": t, children: e })
 );
 R.displayName = "Table.Header";
 const C = m(
   ({
     noShrink: e = !1,
     truncate: a = !1,
-    align: l = "left",
+    align: t = "left",
     scope: i = "col",
-    sortTranslations: t,
-    sortDirection: d,
+    sortTranslations: d,
+    sortDirection: l,
     colSpan: c,
     width: b,
     onSortChange: s,
@@ -30,10 +41,10 @@ const C = m(
   }, u) => {
     const f = y(null);
     p(f, u), w(f);
-    const I = h(() => typeof r == "string" ? d === "ascending" ? (t == null ? void 0 : t.sortDescending) ?? `Sort by ${r} descending` : (t == null ? void 0 : t.sortAscending) ?? `Sort by ${r} ascending` : d === "ascending" ? "Sort descending" : "Sort ascending", [r, d, t]), H = () => {
+    const I = K(() => typeof r == "string" ? l === "ascending" ? (d == null ? void 0 : d.sortDescending) ?? `Sort by ${r} descending` : (d == null ? void 0 : d.sortAscending) ?? `Sort by ${r} ascending` : l === "ascending" ? "Sort descending" : "Sort ascending", [r, l, d]), H = () => {
       if (!s)
         return;
-      s(d === void 0 || d === "descending" ? "ascending" : "descending");
+      s(l === void 0 || l === "descending" ? "ascending" : "descending");
     };
     return /* @__PURE__ */ n(
       "th",
@@ -43,21 +54,21 @@ const C = m(
         className: o.headerCell,
         scope: i,
         colSpan: c,
-        "data-align": l,
+        "data-align": t,
         "data-truncate": a,
         "data-no-shrink": e,
         "data-sortable": !!s,
-        "aria-sort": s ? d || "none" : void 0,
+        "aria-sort": s ? l || "none" : void 0,
         children: s ? /* @__PURE__ */ n("div", { className: o.cellContent, children: /* @__PURE__ */ k(
           "button",
           {
             className: o.sortButton,
             "aria-label": I,
-            "data-active": !!d,
+            "data-active": !!l,
             onClick: H,
             children: [
               typeof r == "string" && a ? /* @__PURE__ */ n("span", { className: o.buttonText, children: r }) : r,
-              d === "ascending" ? /* @__PURE__ */ n(B, { size: "12" }) : d === "descending" ? /* @__PURE__ */ n(A, { size: "12" }) : /* @__PURE__ */ n(K, { className: o.sortIndicator, size: "12" })
+              l === "ascending" ? /* @__PURE__ */ n(B, { size: "12" }) : l === "descending" ? /* @__PURE__ */ n(z, { size: "12" }) : /* @__PURE__ */ n(A, { className: o.sortIndicator, size: "12" })
             ]
           }
         ) }) : r
@@ -67,13 +78,13 @@ const C = m(
 );
 C.displayName = "Table.HeaderCell";
 const v = m(
-  ({ children: e, "aria-busy": a }, l) => /* @__PURE__ */ n("tbody", { ref: l, className: o.body, "aria-busy": a, children: e })
+  ({ children: e, "aria-busy": a }, t) => /* @__PURE__ */ n("tbody", { ref: t, className: o.body, "aria-busy": a, children: e })
 );
 v.displayName = "Table.Body";
 const T = m(
-  ({ disabled: e = !1, selected: a = !1, onClick: l, children: i, "aria-label": t, "data-test-id": d }, c) => {
-    const b = l !== void 0 && !e, s = () => {
-      e || l && l(a);
+  ({ disabled: e = !1, selected: a = !1, onClick: t, children: i, "aria-label": d, "data-test-id": l }, c) => {
+    const b = t !== void 0 && !e, s = () => {
+      e || t && t(a);
     }, r = (u) => {
       b && (u.key === "Enter" || u.key === " ") && (u.preventDefault(), s());
     };
@@ -88,11 +99,11 @@ const T = m(
         "data-interactive": b,
         "data-selected": a,
         "aria-disabled": e,
-        "aria-label": t,
+        "aria-label": d,
         "aria-selected": a,
         onClick: b ? s : void 0,
         onKeyDown: b ? r : void 0,
-        "data-test-id": d,
+        "data-test-id": l,
         children: i
       }
     );
@@ -100,17 +111,17 @@ const T = m(
 );
 T.displayName = "Table.Row";
 const x = m(
-  ({ colSpan: e, truncate: a, align: l = "left", children: i, "aria-label": t }, d) => {
+  ({ colSpan: e, truncate: a, align: t = "left", children: i, "aria-label": d }, l) => {
     const c = y(null);
-    return p(c, d), w(c), /* @__PURE__ */ n(
+    return p(c, l), w(c), /* @__PURE__ */ n(
       "td",
       {
         ref: c,
         className: o.rowCell,
         colSpan: e,
-        "data-align": l,
+        "data-align": t,
         "data-truncate": a,
-        "aria-label": t,
+        "aria-label": d,
         children: i
       }
     );

package/dist/fondue-components21.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components21.js","sources":["../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconArrowDown, IconArrowUp, IconArrowBidirectional } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useMemo,\n    useRef,\n    type ReactNode,\n    type KeyboardEvent,\n    type CSSProperties,\n    type ReactElement,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTextTruncation } from '#/hooks/useTextTruncation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/table.module.scss';\nimport { handleKeyDown } from './utils';\n\ntype TableRootProps = {\n    /**\n     * Whether the table should have a fixed or auto layout\n     * @default 'auto'\n     */\n    layout?: 'auto' | 'fixed';\n    /**\n     * Whether header should stick to the top when scrolling\n     */\n    sticky?: 'head' | 'col' | 'both';\n    children: ReactNode;\n} & CommonAriaAttrs;\n\nexport const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(\n    ({ layout = 'auto', sticky, children, ...props }, ref) => {\n        return (\n            <div onKeyDown={handleKeyDown} role=\"grid\" tabIndex={-1}>\n                <table ref={ref} className={styles.table} data-layout={layout} data-sticky={sticky} {...props}>\n                    {children}\n                </table>\n            </div>\n        );\n    },\n);\nTableRoot.displayName = 'Table.Root';\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, { children: ReactNode }>(({ children }, ref) => {\n    return (\n        <caption ref={ref} className={styles.caption}>\n            {children}\n        </caption>\n    );\n});\nTableCaption.displayName = 'Table.Caption';\n\ntype TableHeaderProps = {\n    children: ReactNode;\n    'aria-label'?: string;\n    'aria-busy'?: boolean;\n};\n\nexport const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n    ({ children, 'aria-label': ariaLabel, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <thead ref={ref} className={styles.header} aria-label={ariaLabel} aria-busy={ariaBusy}>\n                {children}\n            </thead>\n        );\n    },\n);\nTableHeader.displayName = 'Table.Header';\n\ntype SortDirection = 'ascending' | 'descending' | undefined;\ntype HorizontalAlignment = 'left' | 'center' | 'right';\n\ntype TableHeaderCellProps = {\n    /**\n     * Scope of the column\n     * @default 'col'\n     */\n    scope?: HTMLTableCellElement['scope'];\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Width of the column\n     */\n    width?: CSSProperties['width'];\n    /**\n     * Current sort direction of the column\n     */\n    sortDirection?: SortDirection;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Aria label for asceding/descending sort. Variables: {column} - column name\n     * @default \"Sort by {column} ascending/descending\"\n     */\n    sortTranslations?: {\n        sortAscending?: string;\n        sortDescending?: string;\n    };\n    /**\n     * Whether the column should have a minimum width\n     * @default false\n     */\n    noShrink?: boolean;\n    /**\n     * Handler called when the sort direction changes\n     * @param direction - The new sort direction\n     */\n    onSortChange?: (direction: SortDirection) => void;\n    children: ReactNode;\n};\n\nexport const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n    (\n        {\n            noShrink = false,\n            truncate = false,\n            align = 'left',\n            scope = 'col',\n            sortTranslations,\n            sortDirection,\n            colSpan,\n            width,\n            onSortChange,\n            children,\n        },\n        ref,\n    ) => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        const sortLabel = useMemo(() => {\n            if (typeof children === 'string') {\n                if (sortDirection === 'ascending') {\n                    return sortTranslations?.sortDescending ?? `Sort by ${children} descending`;\n                }\n                return sortTranslations?.sortAscending ?? `Sort by ${children} ascending`;\n            }\n\n            return sortDirection === 'ascending' ? 'Sort descending' : 'Sort ascending';\n        }, [children, sortDirection, sortTranslations]);\n\n        const handleSortChange = () => {\n            if (!onSortChange) {\n                return;\n            }\n\n            const newDirection: SortDirection =\n                sortDirection === undefined || sortDirection === 'descending' ? 'ascending' : 'descending';\n\n            onSortChange(newDirection);\n        };\n\n        return (\n            <th\n                ref={cellRef}\n                style={{ width }}\n                className={styles.headerCell}\n                scope={scope}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                data-no-shrink={noShrink}\n                data-sortable={!!onSortChange}\n                aria-sort={onSortChange ? sortDirection || 'none' : undefined}\n            >\n                {onSortChange ? (\n                    <div className={styles.cellContent}>\n                        <button\n                            className={styles.sortButton}\n                            aria-label={sortLabel}\n                            data-active={!!sortDirection}\n                            onClick={handleSortChange}\n                        >\n                            {typeof children === 'string' && truncate ? (\n                                <span className={styles.buttonText}>{children}</span>\n                            ) : (\n                                children\n                            )}\n                            {sortDirection === 'ascending' ? (\n                                <IconArrowUp size=\"12\" />\n                            ) : sortDirection === 'descending' ? (\n                                <IconArrowDown size=\"12\" />\n                            ) : (\n                                <IconArrowBidirectional className={styles.sortIndicator} size=\"12\" />\n                            )}\n                        </button>\n                    </div>\n                ) : (\n                    children\n                )}\n            </th>\n        );\n    },\n);\nTableHeaderCell.displayName = 'Table.HeaderCell';\n\ntype TableBodyProps = {\n    children: ReactNode;\n    'aria-busy'?: boolean;\n};\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n    ({ children, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <tbody ref={ref} className={styles.body} aria-busy={ariaBusy}>\n                {children}\n            </tbody>\n        );\n    },\n);\nTableBody.displayName = 'Table.Body';\n\ntype BaseTableRowProps = {\n    /**\n     * Whether the row is in a selected state\n     * @default false\n     */\n    selected?: boolean;\n    /**\n     * Whether to disable interactions for this row\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Content to be rendered within the row\n     */\n    children: ReactNode;\n    /**\n     * Accessible label for the row\n     */\n    'aria-label'?: string;\n    'data-test-id'?: string;\n};\n\ntype ClickableTableRowProps = BaseTableRowProps & {\n    /**\n     * Handler called when the row is clicked or activated via keyboard\n     * If provided, the row will be hoverable and interactive\n     */\n    onClick: (selected: boolean) => void;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype NavigableTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    /**\n     * Handler called when the row is clicked or activated via keyboard for navigation\n     * Must be provided together with href\n     */\n    onNavigate: (href: string) => void;\n    /**\n     * URL associated with this row for navigation\n     * Must be provided together with onNavigate\n     */\n    href: string;\n};\n\ntype NonInteractiveTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype TableRowProps = ClickableTableRowProps | NavigableTableRowProps | NonInteractiveTableRowProps;\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n    (\n        { disabled = false, selected = false, onClick, children, 'aria-label': ariaLabel, 'data-test-id': dataTestId },\n        ref,\n    ) => {\n        const isInteractive = onClick !== undefined && !disabled;\n\n        const handleClick = () => {\n            if (disabled) {\n                return;\n            }\n\n            if (onClick) {\n                onClick(selected);\n            }\n        };\n\n        const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n            if (!isInteractive) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleClick();\n            }\n        };\n\n        return (\n            <tr\n                ref={ref}\n                className={styles.row}\n                tabIndex={0}\n                role={isInteractive ? 'button' : 'row'}\n                data-disabled={disabled}\n                data-interactive={isInteractive}\n                data-selected={selected}\n                aria-disabled={disabled}\n                aria-label={ariaLabel}\n                aria-selected={selected}\n                onClick={isInteractive ? handleClick : undefined}\n                onKeyDown={isInteractive ? handleKeyDown : undefined}\n                data-test-id={dataTestId}\n            >\n                {children}\n            </tr>\n        );\n    },\n);\nTableRow.displayName = 'Table.Row';\n\ntype TableRowCellProps = {\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    children: ReactNode;\n    'aria-label'?: string;\n};\n\nexport const TableRowCell = forwardRef<HTMLTableCellElement, TableRowCellProps>(\n    ({ colSpan, truncate, align = 'left', children, 'aria-label': ariaLabel }, ref): ReactElement => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        return (\n            <td\n                ref={cellRef}\n                className={styles.rowCell}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                aria-label={ariaLabel}\n            >\n                {children}\n            </td>\n        );\n    },\n);\nTableRowCell.displayName = 'Table.RowCell';\n\nexport const Table = {\n    Root: TableRoot,\n    Caption: TableCaption,\n    Header: TableHeader,\n    HeaderCell: TableHeaderCell,\n    Body: TableBody,\n    Row: TableRow,\n    RowCell: TableRowCell,\n};\n"],"names":["TableRoot","forwardRef","layout","sticky","children","props","ref","jsx","handleKeyDown","styles","TableCaption","TableHeader","ariaLabel","ariaBusy","TableHeaderCell","noShrink","truncate","align","scope","sortTranslations","sortDirection","colSpan","width","onSortChange","cellRef","useRef","useSyncRefs","useTextTruncation","sortLabel","useMemo","handleSortChange","jsxs","IconArrowUp","IconArrowDown","IconArrowBidirectional","TableBody","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","TableRowCell","Table"],"mappings":"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"}
+{"version":3,"file":"fondue-components21.js","sources":["../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconArrowDown, IconArrowUp, IconArrowBidirectional } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useMemo,\n    useRef,\n    type ReactNode,\n    type KeyboardEvent,\n    type CSSProperties,\n    type ReactElement,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTextTruncation } from '#/hooks/useTextTruncation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/table.module.scss';\nimport { handleKeyDown } from './utils';\n\ntype TableRootProps = {\n    /**\n     * Whether the table should have a fixed or auto layout\n     * @default 'auto'\n     */\n    layout?: 'auto' | 'fixed';\n    /**\n     * Font size of the table content\n     * @default 'small'\n     */\n    fontSize?: 'small' | 'medium';\n    /**\n     * Whether header should stick to the top when scrolling\n     */\n    sticky?: 'head' | 'col' | 'both';\n    children: ReactNode;\n} & CommonAriaAttrs;\n\nexport const TableRoot = forwardRef<HTMLTableElement, TableRootProps>(\n    ({ layout = 'auto', fontSize = 'medium', sticky, children, ...props }, ref) => {\n        return (\n            <div onKeyDown={handleKeyDown} role=\"grid\" tabIndex={-1}>\n                <table\n                    ref={ref}\n                    className={styles.table}\n                    data-layout={layout}\n                    data-font-size={fontSize}\n                    data-sticky={sticky}\n                    {...props}\n                >\n                    {children}\n                </table>\n            </div>\n        );\n    },\n);\nTableRoot.displayName = 'Table.Root';\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, { children: ReactNode }>(({ children }, ref) => {\n    return (\n        <caption ref={ref} className={styles.caption}>\n            {children}\n        </caption>\n    );\n});\nTableCaption.displayName = 'Table.Caption';\n\ntype TableHeaderProps = {\n    children: ReactNode;\n    'aria-label'?: string;\n    'aria-busy'?: boolean;\n};\n\nexport const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n    ({ children, 'aria-label': ariaLabel, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <thead ref={ref} className={styles.header} aria-label={ariaLabel} aria-busy={ariaBusy}>\n                {children}\n            </thead>\n        );\n    },\n);\nTableHeader.displayName = 'Table.Header';\n\ntype SortDirection = 'ascending' | 'descending' | undefined;\ntype HorizontalAlignment = 'left' | 'center' | 'right';\n\ntype TableHeaderCellProps = {\n    /**\n     * Scope of the column\n     * @default 'col'\n     */\n    scope?: HTMLTableCellElement['scope'];\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Width of the column\n     */\n    width?: CSSProperties['width'];\n    /**\n     * Current sort direction of the column\n     */\n    sortDirection?: SortDirection;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Aria label for asceding/descending sort. Variables: {column} - column name\n     * @default \"Sort by {column} ascending/descending\"\n     */\n    sortTranslations?: {\n        sortAscending?: string;\n        sortDescending?: string;\n    };\n    /**\n     * Whether the column should have a minimum width\n     * @default false\n     */\n    noShrink?: boolean;\n    /**\n     * Handler called when the sort direction changes\n     * @param direction - The new sort direction\n     */\n    onSortChange?: (direction: SortDirection) => void;\n    children: ReactNode;\n};\n\nexport const TableHeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n    (\n        {\n            noShrink = false,\n            truncate = false,\n            align = 'left',\n            scope = 'col',\n            sortTranslations,\n            sortDirection,\n            colSpan,\n            width,\n            onSortChange,\n            children,\n        },\n        ref,\n    ) => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        const sortLabel = useMemo(() => {\n            if (typeof children === 'string') {\n                if (sortDirection === 'ascending') {\n                    return sortTranslations?.sortDescending ?? `Sort by ${children} descending`;\n                }\n                return sortTranslations?.sortAscending ?? `Sort by ${children} ascending`;\n            }\n\n            return sortDirection === 'ascending' ? 'Sort descending' : 'Sort ascending';\n        }, [children, sortDirection, sortTranslations]);\n\n        const handleSortChange = () => {\n            if (!onSortChange) {\n                return;\n            }\n\n            const newDirection: SortDirection =\n                sortDirection === undefined || sortDirection === 'descending' ? 'ascending' : 'descending';\n\n            onSortChange(newDirection);\n        };\n\n        return (\n            <th\n                ref={cellRef}\n                style={{ width }}\n                className={styles.headerCell}\n                scope={scope}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                data-no-shrink={noShrink}\n                data-sortable={!!onSortChange}\n                aria-sort={onSortChange ? sortDirection || 'none' : undefined}\n            >\n                {onSortChange ? (\n                    <div className={styles.cellContent}>\n                        <button\n                            className={styles.sortButton}\n                            aria-label={sortLabel}\n                            data-active={!!sortDirection}\n                            onClick={handleSortChange}\n                        >\n                            {typeof children === 'string' && truncate ? (\n                                <span className={styles.buttonText}>{children}</span>\n                            ) : (\n                                children\n                            )}\n                            {sortDirection === 'ascending' ? (\n                                <IconArrowUp size=\"12\" />\n                            ) : sortDirection === 'descending' ? (\n                                <IconArrowDown size=\"12\" />\n                            ) : (\n                                <IconArrowBidirectional className={styles.sortIndicator} size=\"12\" />\n                            )}\n                        </button>\n                    </div>\n                ) : (\n                    children\n                )}\n            </th>\n        );\n    },\n);\nTableHeaderCell.displayName = 'Table.HeaderCell';\n\ntype TableBodyProps = {\n    children: ReactNode;\n    'aria-busy'?: boolean;\n};\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(\n    ({ children, 'aria-busy': ariaBusy }, ref) => {\n        return (\n            <tbody ref={ref} className={styles.body} aria-busy={ariaBusy}>\n                {children}\n            </tbody>\n        );\n    },\n);\nTableBody.displayName = 'Table.Body';\n\ntype BaseTableRowProps = {\n    /**\n     * Whether the row is in a selected state\n     * @default false\n     */\n    selected?: boolean;\n    /**\n     * Whether to disable interactions for this row\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Content to be rendered within the row\n     */\n    children: ReactNode;\n    /**\n     * Accessible label for the row\n     */\n    'aria-label'?: string;\n    'data-test-id'?: string;\n};\n\ntype ClickableTableRowProps = BaseTableRowProps & {\n    /**\n     * Handler called when the row is clicked or activated via keyboard\n     * If provided, the row will be hoverable and interactive\n     */\n    onClick: (selected: boolean) => void;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype NavigableTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    /**\n     * Handler called when the row is clicked or activated via keyboard for navigation\n     * Must be provided together with href\n     */\n    onNavigate: (href: string) => void;\n    /**\n     * URL associated with this row for navigation\n     * Must be provided together with onNavigate\n     */\n    href: string;\n};\n\ntype NonInteractiveTableRowProps = BaseTableRowProps & {\n    onClick?: never;\n    onNavigate?: never;\n    href?: never;\n};\n\ntype TableRowProps = ClickableTableRowProps | NavigableTableRowProps | NonInteractiveTableRowProps;\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n    (\n        { disabled = false, selected = false, onClick, children, 'aria-label': ariaLabel, 'data-test-id': dataTestId },\n        ref,\n    ) => {\n        const isInteractive = onClick !== undefined && !disabled;\n\n        const handleClick = () => {\n            if (disabled) {\n                return;\n            }\n\n            if (onClick) {\n                onClick(selected);\n            }\n        };\n\n        const handleKeyDown = (event: KeyboardEvent<HTMLTableRowElement>) => {\n            if (!isInteractive) {\n                return;\n            }\n\n            if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleClick();\n            }\n        };\n\n        return (\n            <tr\n                ref={ref}\n                className={styles.row}\n                tabIndex={0}\n                role={isInteractive ? 'button' : 'row'}\n                data-disabled={disabled}\n                data-interactive={isInteractive}\n                data-selected={selected}\n                aria-disabled={disabled}\n                aria-label={ariaLabel}\n                aria-selected={selected}\n                onClick={isInteractive ? handleClick : undefined}\n                onKeyDown={isInteractive ? handleKeyDown : undefined}\n                data-test-id={dataTestId}\n            >\n                {children}\n            </tr>\n        );\n    },\n);\nTableRow.displayName = 'Table.Row';\n\ntype TableRowCellProps = {\n    /**\n     * Number of columns the cell should span\n     */\n    colSpan?: HTMLTableCellElement['colSpan'];\n    /**\n     * Whether to truncate content with ellipsis when it overflows\n     * @default false\n     */\n    truncate?: boolean;\n    /**\n     * Horizontal alignment of the content\n     * @default 'left'\n     */\n    align?: HorizontalAlignment;\n    children: ReactNode;\n    'aria-label'?: string;\n};\n\nexport const TableRowCell = forwardRef<HTMLTableCellElement, TableRowCellProps>(\n    ({ colSpan, truncate, align = 'left', children, 'aria-label': ariaLabel }, ref): ReactElement => {\n        const cellRef = useRef<HTMLTableCellElement>(null);\n        useSyncRefs<HTMLTableCellElement>(cellRef, ref);\n\n        useTextTruncation(cellRef);\n\n        return (\n            <td\n                ref={cellRef}\n                className={styles.rowCell}\n                colSpan={colSpan}\n                data-align={align}\n                data-truncate={truncate}\n                aria-label={ariaLabel}\n            >\n                {children}\n            </td>\n        );\n    },\n);\nTableRowCell.displayName = 'Table.RowCell';\n\nexport const Table = {\n    Root: TableRoot,\n    Caption: TableCaption,\n    Header: TableHeader,\n    HeaderCell: TableHeaderCell,\n    Body: TableBody,\n    Row: TableRow,\n    RowCell: TableRowCell,\n};\n"],"names":["TableRoot","forwardRef","layout","fontSize","sticky","children","props","ref","handleKeyDown","jsx","styles","TableCaption","TableHeader","ariaLabel","ariaBusy","TableHeaderCell","noShrink","truncate","align","scope","sortTranslations","sortDirection","colSpan","width","onSortChange","cellRef","useRef","useSyncRefs","useTextTruncation","sortLabel","useMemo","handleSortChange","jsxs","IconArrowUp","IconArrowDown","IconArrowBidirectional","TableBody","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","TableRowCell","Table"],"mappings":";;;;;;;AAsCO,MAAMA,IAAYC;AAAA,EACrB,CAAC,EAAE,QAAAC,IAAS,QAAQ,UAAAC,IAAW,UAAU,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAM,GAAGC,wBAE9D,OAAI,EAAA,WAAWC,GAAe,MAAK,QAAO,UAAU,IACjD,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAF;AAAA,MACA,WAAWG,EAAO;AAAA,MAClB,eAAaR;AAAA,MACb,kBAAgBC;AAAA,MAChB,eAAaC;AAAA,MACZ,GAAGE;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA,GAET;AAGZ;AACAL,EAAU,cAAc;AAEjB,MAAMW,IAAeV,EAA6D,CAAC,EAAE,UAAAI,EAAA,GAAYE,wBAE/F,WAAQ,EAAA,KAAAA,GAAU,WAAWG,EAAO,SAChC,UAAAL,GACL,CAEP;AACDM,EAAa,cAAc;AAQpB,MAAMC,IAAcX;AAAA,EACvB,CAAC,EAAE,UAAAI,GAAU,cAAcQ,GAAW,aAAaC,KAAYP,MAEvD,gBAAAE,EAAC,SAAM,EAAA,KAAAF,GAAU,WAAWG,EAAO,QAAQ,cAAYG,GAAW,aAAWC,GACxE,UAAAT,EACL,CAAA;AAGZ;AACAO,EAAY,cAAc;AAsDnB,MAAMG,IAAkBd;AAAA,EAC3B,CACI;AAAA,IACI,UAAAe,IAAW;AAAA,IACX,UAAAC,IAAW;AAAA,IACX,OAAAC,IAAQ;AAAA,IACR,OAAAC,IAAQ;AAAA,IACR,kBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAnB;AAAA,KAEJE,MACC;AACK,UAAAkB,IAAUC,EAA6B,IAAI;AACjD,IAAAC,EAAkCF,GAASlB,CAAG,GAE9CqB,EAAkBH,CAAO;AAEnB,UAAAI,IAAYC,EAAQ,MAClB,OAAOzB,KAAa,WAChBgB,MAAkB,eACXD,KAAA,gBAAAA,EAAkB,mBAAkB,WAAWf,CAAQ,iBAE3De,KAAA,gBAAAA,EAAkB,kBAAiB,WAAWf,CAAQ,eAG1DgB,MAAkB,cAAc,oBAAoB,kBAC5D,CAAChB,GAAUgB,GAAeD,CAAgB,CAAC,GAExCW,IAAmB,MAAM;AAC3B,UAAI,CAACP;AACD;AAMJ,MAAAA,EAFIH,MAAkB,UAAaA,MAAkB,eAAe,cAAc,YAEzD;AAAA,IAC7B;AAGI,WAAA,gBAAAZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKgB;AAAA,QACL,OAAO,EAAE,OAAAF,EAAM;AAAA,QACf,WAAWb,EAAO;AAAA,QAClB,OAAAS;AAAA,QACA,SAAAG;AAAA,QACA,cAAYJ;AAAA,QACZ,iBAAeD;AAAA,QACf,kBAAgBD;AAAA,QAChB,iBAAe,CAAC,CAACQ;AAAA,QACjB,aAAWA,IAAeH,KAAiB,SAAS;AAAA,QAEnD,UACGG,IAAA,gBAAAf,EAAC,OAAI,EAAA,WAAWC,EAAO,aACnB,UAAA,gBAAAsB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWtB,EAAO;AAAA,YAClB,cAAYmB;AAAA,YACZ,eAAa,CAAC,CAACR;AAAA,YACf,SAASU;AAAA,YAER,UAAA;AAAA,cAAO,OAAA1B,KAAa,YAAYY,IAC7B,gBAAAR,EAAC,UAAK,WAAWC,EAAO,YAAa,UAAAL,EAAA,CAAS,IAE9CA;AAAA,cAEHgB,MAAkB,cACd,gBAAAZ,EAAAwB,GAAA,EAAY,MAAK,KAAK,CAAA,IACvBZ,MAAkB,eAClB,gBAAAZ,EAACyB,KAAc,MAAK,KAAA,CAAK,IAExB,gBAAAzB,EAAA0B,GAAA,EAAuB,WAAWzB,EAAO,eAAe,MAAK,KAAK,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,WAG/E,IAEAL;AAAA,MAAA;AAAA,IAER;AAAA,EAAA;AAGZ;AACAU,EAAgB,cAAc;AAOvB,MAAMqB,IAAYnC;AAAA,EACrB,CAAC,EAAE,UAAAI,GAAU,aAAaS,EAAA,GAAYP,MAE9B,gBAAAE,EAAC,WAAM,KAAAF,GAAU,WAAWG,EAAO,MAAM,aAAWI,GAC/C,UAAAT,GACL;AAGZ;AACA+B,EAAU,cAAc;AAwDjB,MAAMC,IAAWpC;AAAA,EACpB,CACI,EAAE,UAAAqC,IAAW,IAAO,UAAAC,IAAW,IAAO,SAAAC,GAAS,UAAAnC,GAAU,cAAcQ,GAAW,gBAAgB4B,EAAA,GAClGlC,MACC;AACK,UAAAmC,IAAgBF,MAAY,UAAa,CAACF,GAE1CK,IAAc,MAAM;AACtB,MAAIL,KAIAE,KACAA,EAAQD,CAAQ;AAAA,IAExB,GAEM/B,IAAgB,CAACoC,MAA8C;AACjE,MAAKF,MAIDE,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCA,EAAM,eAAe,GACTD,EAAA;AAAA,IAEpB;AAGI,WAAA,gBAAAlC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAAF;AAAA,QACA,WAAWG,EAAO;AAAA,QAClB,UAAU;AAAA,QACV,MAAMgC,IAAgB,WAAW;AAAA,QACjC,iBAAeJ;AAAA,QACf,oBAAkBI;AAAA,QAClB,iBAAeH;AAAA,QACf,iBAAeD;AAAA,QACf,cAAYzB;AAAA,QACZ,iBAAe0B;AAAA,QACf,SAASG,IAAgBC,IAAc;AAAA,QACvC,WAAWD,IAAgBlC,IAAgB;AAAA,QAC3C,gBAAciC;AAAA,QAEb,UAAApC;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGZ;AACAgC,EAAS,cAAc;AAqBhB,MAAMQ,IAAe5C;AAAA,EACxB,CAAC,EAAE,SAAAqB,GAAS,UAAAL,GAAU,OAAAC,IAAQ,QAAQ,UAAAb,GAAU,cAAcQ,EAAU,GAAGN,MAAsB;AACvF,UAAAkB,IAAUC,EAA6B,IAAI;AACjD,WAAAC,EAAkCF,GAASlB,CAAG,GAE9CqB,EAAkBH,CAAO,GAGrB,gBAAAhB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKgB;AAAA,QACL,WAAWf,EAAO;AAAA,QAClB,SAAAY;AAAA,QACA,cAAYJ;AAAA,QACZ,iBAAeD;AAAA,QACf,cAAYJ;AAAA,QAEX,UAAAR;AAAA,MAAA;AAAA,IACL;AAAA,EAAA;AAGZ;AACAwC,EAAa,cAAc;AAEpB,MAAMC,IAAQ;AAAA,EACjB,MAAM9C;AAAA,EACN,SAASW;AAAA,EACT,QAAQC;AAAA,EACR,YAAYG;AAAA,EACZ,MAAMqB;AAAA,EACN,KAAKC;AAAA,EACL,SAASQ;AACb;"}

package/dist/fondue-components24.js

@@ -1,24 +1,33 @@
 import { jsx as a, jsxs as g } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-tooltip";
-import { forwardRef as n } from "react";
+import * as t from "@radix-ui/react-tooltip";
+import { forwardRef as s } from "react";
 import { cn as T } from "./fondue-components27.js";
 import d from "./fondue-components65.js";
-const l = ({ children: t, enterDelay: r = 700, open: i, onOpenChange: e, ...s }) => /* @__PURE__ */ a(o.Provider, { children: /* @__PURE__ */ a(o.Root, { delayDuration: r, open: i, onOpenChange: e, ...s, children: t }) });
+const l = ({ children: o, enterDelay: r = 700, open: i, onOpenChange: e, ...n }) => /* @__PURE__ */ a(t.Provider, { children: /* @__PURE__ */ a(t.Root, { delayDuration: r, open: i, onOpenChange: e, ...n, children: o }) });
 l.displayName = "Tooltip.Root";
-const p = ({ asChild: t = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, e) => /* @__PURE__ */ a(o.Trigger, { "data-test-id": i, asChild: t, ref: e, children: r });
+const p = ({ asChild: o = !1, children: r, "data-test-id": i = "fondue-tooltip-trigger" }, e) => /* @__PURE__ */ a(
+  t.Trigger,
+  {
+    "data-test-id": i,
+    type: o ? void 0 : "button",
+    asChild: o,
+    ref: e,
+    children: r
+  }
+);
 p.displayName = "Tooltip.Trigger";
 const m = ({
-  children: t,
+  children: o,
   className: r,
   maxWidth: i,
   "data-test-id": e = "fondue-tooltip-content",
-  padding: s = "spacious",
+  padding: n = "spacious",
   ...c
-}, f) => /* @__PURE__ */ a(o.Portal, { children: /* @__PURE__ */ g(
-  o.Content,
+}, f) => /* @__PURE__ */ a(t.Portal, { children: /* @__PURE__ */ g(
+  t.Content,
   {
     "data-test-id": e,
-    "data-tooltip-spacing": s,
+    "data-tooltip-spacing": n,
     className: T(d.root, r),
     style: { maxWidth: i },
     collisionPadding: 16,
@@ -26,19 +35,19 @@ const m = ({
     ref: f,
     ...c,
     children: [
-      t,
-      /* @__PURE__ */ a(o.Arrow, { "aria-hidden": "true", className: d.arrow })
+      o,
+      /* @__PURE__ */ a(t.Arrow, { "aria-hidden": "true", className: d.arrow })
     ]
   }
 ) });
 m.displayName = "Tooltip.Content";
-const h = {
+const x = {
   Root: l,
-  Trigger: n(p),
-  Content: n(m)
+  Trigger: s(p),
+  Content: s(m)
 };
 export {
-  h as Tooltip,
+  x as Tooltip,
   m as TooltipContent,
   l as TooltipRoot,
   p as TooltipTrigger

package/dist/fondue-components24.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components24.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange, ...props }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange} {...props}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger data-test-id={dataTestId} asChild={asChild} ref={ref}>\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                data-tooltip-spacing={padding}\n                className={cn(styles.root, className)}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n                <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n            </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","props","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;AA0Ba,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,GAAc,GAAGC,QAExE,gBAAAC,EAAAC,EAAa,UAAb,EACG,4BAACA,EAAa,MAAb,EAAkB,eAAeL,GAAY,MAAAC,GAAY,cAAAC,GAA6B,GAAGC,GACrF,UAAAJ,EACL,CAAA,GACJ;AAGRD,EAAY,cAAc;AAYb,MAAAQ,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAR,GAAU,gBAAgBS,IAAa,yBAAyB,GACnFC,MAGI,gBAAAL,EAACC,EAAa,SAAb,EAAqB,gBAAcG,GAAY,SAAAD,GAAkB,KAAAE,GAC7D,UAAAV,GACL;AAGRO,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAX;AAAA,EACA,WAAAY;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGV;AACP,GACAM,MAGI,gBAAAL,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAS;AAAA,EAACT,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcG;AAAA,IACd,wBAAsBK;AAAA,IACtB,WAAWE,EAAGC,EAAO,MAAML,CAAS;AAAA,IACpC,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGN;AAAA,IAEH,UAAA;AAAA,MAAAJ;AAAA,MACD,gBAAAK,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWW,EAAO,MAAO,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,GAExE;AAGRN,EAAe,cAAc;AAEtB,MAAMO,IAAU;AAAA,EACnB,MAAMnB;AAAA,EACN,SAASoB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDR,CAAc;AAC3E;"}
+{"version":3,"file":"fondue-components24.js","sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { forwardRef, type ForwardedRef, type ReactElement, type ReactNode } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\n\nimport styles from './styles/tooltip.module.scss';\n\nexport type TooltipRootProps = {\n    /**\n     * Sets the open state of the tooltip.\n     */\n    open?: boolean;\n    /**\n     * Callback that is called when the open state of the tooltip changes.\n     */\n    onOpenChange?: (open: boolean) => void;\n    /**\n     * The delay in milliseconds before the tooltip appears.\n     * @default 700\n     */\n    enterDelay?: number;\n    children: Array<ReactElement<TooltipTriggerProps | TooltipContentProps>>;\n};\n\nexport const TooltipRoot = ({ children, enterDelay = 700, open, onOpenChange, ...props }: TooltipRootProps) => {\n    return (\n        <RadixTooltip.Provider>\n            <RadixTooltip.Root delayDuration={enterDelay} open={open} onOpenChange={onOpenChange} {...props}>\n                {children}\n            </RadixTooltip.Root>\n        </RadixTooltip.Provider>\n    );\n};\nTooltipRoot.displayName = 'Tooltip.Root';\n\nexport type TooltipTriggerProps = {\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipTrigger = (\n    { asChild = false, children, 'data-test-id': dataTestId = 'fondue-tooltip-trigger' }: TooltipTriggerProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    return (\n        <RadixTooltip.Trigger\n            data-test-id={dataTestId}\n            type={!asChild ? 'button' : undefined}\n            asChild={asChild}\n            ref={ref}\n        >\n            {children}\n        </RadixTooltip.Trigger>\n    );\n};\nTooltipTrigger.displayName = 'Tooltip.Trigger';\n\nexport type TooltipContentProps = {\n    /**\n     * @default \"spacious\"\n     */\n    padding?: 'spacious' | 'compact';\n    /**\n     * Defines the preferred side of the tooltip. It will not be respected if there are collisions with the viewport.\n     */\n    side?: 'top' | 'right' | 'bottom' | 'left';\n    maxWidth?: string;\n    className?: string;\n    children: ReactNode;\n    'data-test-id'?: string;\n};\n\nexport const TooltipContent = (\n    {\n        children,\n        className,\n        maxWidth,\n        'data-test-id': dataTestId = 'fondue-tooltip-content',\n        padding = 'spacious',\n        ...props\n    }: TooltipContentProps,\n    ref: ForwardedRef<HTMLDivElement>,\n) => {\n    return (\n        <RadixTooltip.Portal>\n            <RadixTooltip.Content\n                data-test-id={dataTestId}\n                data-tooltip-spacing={padding}\n                className={cn(styles.root, className)}\n                style={{ maxWidth }}\n                collisionPadding={16}\n                sideOffset={8}\n                ref={ref}\n                {...props}\n            >\n                {children}\n                <RadixTooltip.Arrow aria-hidden=\"true\" className={styles.arrow} />\n            </RadixTooltip.Content>\n        </RadixTooltip.Portal>\n    );\n};\nTooltipContent.displayName = 'Tooltip.Content';\n\nexport const Tooltip = {\n    Root: TooltipRoot,\n    Trigger: forwardRef<HTMLButtonElement, TooltipTriggerProps>(TooltipTrigger),\n    Content: forwardRef<HTMLDivElement, TooltipContentProps>(TooltipContent),\n};\n"],"names":["TooltipRoot","children","enterDelay","open","onOpenChange","props","jsx","RadixTooltip","TooltipTrigger","asChild","dataTestId","ref","TooltipContent","className","maxWidth","padding","jsxs","cn","styles","Tooltip","forwardRef"],"mappings":";;;;;AA0Ba,MAAAA,IAAc,CAAC,EAAE,UAAAC,GAAU,YAAAC,IAAa,KAAK,MAAAC,GAAM,cAAAC,GAAc,GAAGC,QAExE,gBAAAC,EAAAC,EAAa,UAAb,EACG,4BAACA,EAAa,MAAb,EAAkB,eAAeL,GAAY,MAAAC,GAAY,cAAAC,GAA6B,GAAGC,GACrF,UAAAJ,EACL,CAAA,GACJ;AAGRD,EAAY,cAAc;AAYb,MAAAQ,IAAiB,CAC1B,EAAE,SAAAC,IAAU,IAAO,UAAAR,GAAU,gBAAgBS,IAAa,yBAAyB,GACnFC,MAGI,gBAAAL;AAAA,EAACC,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcG;AAAA,IACd,MAAOD,IAAqB,SAAX;AAAA,IACjB,SAAAA;AAAA,IACA,KAAAE;AAAA,IAEC,UAAAV;AAAA,EAAA;AACL;AAGRO,EAAe,cAAc;AAiBtB,MAAMI,IAAiB,CAC1B;AAAA,EACI,UAAAX;AAAA,EACA,WAAAY;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBJ,IAAa;AAAA,EAC7B,SAAAK,IAAU;AAAA,EACV,GAAGV;AACP,GACAM,MAGI,gBAAAL,EAACC,EAAa,QAAb,EACG,UAAA,gBAAAS;AAAA,EAACT,EAAa;AAAA,EAAb;AAAA,IACG,gBAAcG;AAAA,IACd,wBAAsBK;AAAA,IACtB,WAAWE,EAAGC,EAAO,MAAML,CAAS;AAAA,IACpC,OAAO,EAAE,UAAAC,EAAS;AAAA,IAClB,kBAAkB;AAAA,IAClB,YAAY;AAAA,IACZ,KAAAH;AAAA,IACC,GAAGN;AAAA,IAEH,UAAA;AAAA,MAAAJ;AAAA,MACD,gBAAAK,EAACC,EAAa,OAAb,EAAmB,eAAY,QAAO,WAAWW,EAAO,MAAO,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,GAExE;AAGRN,EAAe,cAAc;AAEtB,MAAMO,IAAU;AAAA,EACnB,MAAMnB;AAAA,EACN,SAASoB,EAAmDZ,CAAc;AAAA,EAC1E,SAASY,EAAgDR,CAAc;AAC3E;"}

package/dist/fondue-components28.js

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

package/dist/fondue-components31.js

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

package/dist/fondue-components33.js

@@ -1,7 +1,7 @@
 import { jsxs as s, jsx as a, Fragment as p } from "react/jsx-runtime";
 import { IconDroplet as h, IconTrashBin as N, IconCaretDown as f } from "@frontify/fondue-icons";
 import { forwardRef as b } from "react";
-import e from "./fondue-components66.js";
+import e from "./fondue-components67.js";
 import { colorToCss as I } from "./fondue-components36.js";
 const o = ({
   id: c,

package/dist/fondue-components34.js

@@ -1,5 +1,5 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { forwardRef as b, useState as g, useEffect as R } from "react";
+import { forwardRef as N, useState as b, useEffect as R } from "react";
 import { Select as c } from "./fondue-components18.js";
 import { TextInput as r } from "./fondue-components23.js";
 import a from "./fondue-components35.js";
@@ -12,11 +12,11 @@ const h = ({
   setCurrentFormat: v = () => {
   },
   "data-test-id": f = "color-picker-value-input"
-}, N) => {
-  const [u, p] = g(d(t));
+}, g) => {
+  const [u, p] = b(d(t));
   return R(() => {
     p(d(t));
-  }, [t]), /* @__PURE__ */ o("div", { className: a.inputs, "data-test-id": f, ref: N, children: [
+  }, [t]), /* @__PURE__ */ o("div", { className: a.inputs, "data-test-id": f, ref: g, children: [
     /* @__PURE__ */ e("div", { className: a.colorFormatInput, children: /* @__PURE__ */ o(
       c,
       {
@@ -107,7 +107,7 @@ const h = ({
       {
         "data-test-id": "color-picker-value-input-alpha",
         className: a.valueInput,
-        value: t.alpha === void 0 ? 100 : Math.trunc(t.alpha * 100),
+        value: t.alpha === void 0 ? 100 : Math.trunc(t.alpha * 100).toString(),
         type: "number",
         onChange: (l) => {
           i({
@@ -125,7 +125,7 @@ const h = ({
   ] });
 };
 h.displayName = "ColorPicker.Values";
-const E = b(h);
+const E = N(h);
 export {
   h as ColorValueInput,
   E as ForwardedRefColorValueInput

package/dist/fondue-components34.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components34.js","sources":["../src/components/ColorPicker/ColorValueInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef, useEffect, useState } from 'react';\n\nimport { Select } from '../Select/Select';\nimport { TextInput } from '../TextInput/TextInput';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport {\n    DEFAULT_COLOR,\n    DEFAULT_FORMAT,\n    getLimitedColorChannelValue,\n    hexColorToRgba,\n    isValidHexColor,\n    rgbColorToHex,\n} from './utils';\n\ntype ColorFormat = 'HEX' | 'RGBA';\n\ntype ColorValueInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    currentFormat?: ColorFormat;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    setCurrentFormat?: (format: ColorFormat) => void;\n    /**\n     * The test id of the color picker value input\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorValueInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        currentFormat = DEFAULT_FORMAT,\n        setCurrentFormat = () => {},\n        'data-test-id': dataTestId = 'color-picker-value-input',\n    }: ColorValueInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const [hexColorValue, setHexColorValue] = useState<string>(rgbColorToHex(currentColor));\n\n    useEffect(() => {\n        setHexColorValue(rgbColorToHex(currentColor));\n    }, [currentColor]);\n\n    return (\n        <div className={styles.inputs} data-test-id={dataTestId} ref={forwardedRef}>\n            <div className={styles.colorFormatInput}>\n                <Select\n                    data-test-id=\"color-picker-select-format\"\n                    aria-label=\"Select a color format\"\n                    onSelect={(selectedValue) => {\n                        setCurrentFormat(selectedValue as ColorFormat);\n                    }}\n                    value={currentFormat}\n                >\n                    <Select.Item value=\"HEX\">HEX</Select.Item>\n                    <Select.Item value=\"RGBA\">RGBA</Select.Item>\n                </Select>\n            </div>\n            {currentFormat === 'HEX' ? (\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-hex\"\n                    className={styles.valueInput}\n                    type=\"text\"\n                    value={hexColorValue}\n                    status={isValidHexColor(hexColorValue) ? 'neutral' : 'error'}\n                    onBlur={(event) => {\n                        if (isValidHexColor(event.target.value)) {\n                            onColorChange(hexColorToRgba(event.target.value));\n                        }\n                    }}\n                    onChange={(event) => {\n                        setHexColorValue(event.target.value);\n                    }}\n                    aria-label=\"Hex color value\"\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>#</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            ) : (\n                <div className={styles.colorChannelInputGroup}>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-red\"\n                        className={styles.valueInput}\n                        value={currentColor.red}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                red: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label=\"Red Color Channel\"\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>R</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-green\"\n                        className={styles.valueInput}\n                        value={currentColor.green}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                green: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label=\"Green Color Channel\"\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>G</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-blue\"\n                        className={styles.valueInput}\n                        value={currentColor.blue}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                blue: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label=\"Blue Color Channel\"\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>B</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                </div>\n            )}\n            <div className={styles.colorAlphaInput}>\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-alpha\"\n                    className={styles.valueInput}\n                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100)}\n                    type=\"number\"\n                    onChange={(event) => {\n                        onColorChange({\n                            ...currentColor,\n                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,\n                        });\n                    }}\n                    aria-label=\"Color Opacity\"\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>A</span>\n                    </TextInput.Slot>\n                    <TextInput.Slot name=\"right\">\n                        <span className={styles.inputDecorator}>%</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            </div>\n        </div>\n    );\n};\nColorValueInput.displayName = 'ColorPicker.Values';\n\nexport const ForwardedRefColorValueInput = forwardRef<HTMLDivElement, ColorValueInputProps>(ColorValueInput);\n"],"names":["ColorValueInput","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","DEFAULT_FORMAT","setCurrentFormat","dataTestId","forwardedRef","hexColorValue","setHexColorValue","useState","rgbColorToHex","useEffect","jsxs","styles","jsx","Select","selectedValue","TextInput","isValidHexColor","event","hexColorToRgba","getLimitedColorChannelValue","ForwardedRefColorValueInput","forwardRef"],"mappings":"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"}
+{"version":3,"file":"fondue-components34.js","sources":["../src/components/ColorPicker/ColorValueInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ForwardedRef, forwardRef, useEffect, useState } from 'react';\n\nimport { Select } from '../Select/Select';\nimport { TextInput } from '../TextInput/TextInput';\n\nimport styles from './styles/customColorPicker.module.scss';\nimport { type RgbaColor } from './types';\nimport {\n    DEFAULT_COLOR,\n    DEFAULT_FORMAT,\n    getLimitedColorChannelValue,\n    hexColorToRgba,\n    isValidHexColor,\n    rgbColorToHex,\n} from './utils';\n\ntype ColorFormat = 'HEX' | 'RGBA';\n\ntype ColorValueInputProps = {\n    /**\n     * @ignore\n     * The active color in the color picker, passed down from the root component\n     */\n    currentColor?: RgbaColor;\n    /**\n     * @ignore\n     * Event handler called when the color changes, passed down from the root component\n     */\n    onColorChange?: (color: RgbaColor) => void;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    currentFormat?: ColorFormat;\n    /**\n     * @ignore\n     * The format to use for the color input, passed down from the root component\n     */\n    setCurrentFormat?: (format: ColorFormat) => void;\n    /**\n     * The test id of the color picker value input\n     */\n    'data-test-id'?: string;\n};\n\nexport const ColorValueInput = (\n    {\n        currentColor = DEFAULT_COLOR,\n        onColorChange = () => {},\n        currentFormat = DEFAULT_FORMAT,\n        setCurrentFormat = () => {},\n        'data-test-id': dataTestId = 'color-picker-value-input',\n    }: ColorValueInputProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n) => {\n    const [hexColorValue, setHexColorValue] = useState<string>(rgbColorToHex(currentColor));\n\n    useEffect(() => {\n        setHexColorValue(rgbColorToHex(currentColor));\n    }, [currentColor]);\n\n    return (\n        <div className={styles.inputs} data-test-id={dataTestId} ref={forwardedRef}>\n            <div className={styles.colorFormatInput}>\n                <Select\n                    data-test-id=\"color-picker-select-format\"\n                    aria-label=\"Select a color format\"\n                    onSelect={(selectedValue) => {\n                        setCurrentFormat(selectedValue as ColorFormat);\n                    }}\n                    value={currentFormat}\n                >\n                    <Select.Item value=\"HEX\">HEX</Select.Item>\n                    <Select.Item value=\"RGBA\">RGBA</Select.Item>\n                </Select>\n            </div>\n            {currentFormat === 'HEX' ? (\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-hex\"\n                    className={styles.valueInput}\n                    type=\"text\"\n                    value={hexColorValue}\n                    status={isValidHexColor(hexColorValue) ? 'neutral' : 'error'}\n                    onBlur={(event) => {\n                        if (isValidHexColor(event.target.value)) {\n                            onColorChange(hexColorToRgba(event.target.value));\n                        }\n                    }}\n                    onChange={(event) => {\n                        setHexColorValue(event.target.value);\n                    }}\n                    aria-label=\"Hex color value\"\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>#</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            ) : (\n                <div className={styles.colorChannelInputGroup}>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-red\"\n                        className={styles.valueInput}\n                        value={currentColor.red}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                red: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label=\"Red Color Channel\"\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>R</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-green\"\n                        className={styles.valueInput}\n                        value={currentColor.green}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                green: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label=\"Green Color Channel\"\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>G</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                    <TextInput.Root\n                        data-test-id=\"color-picker-value-input-blue\"\n                        className={styles.valueInput}\n                        value={currentColor.blue}\n                        type=\"number\"\n                        onChange={(event) => {\n                            onColorChange({\n                                ...currentColor,\n                                blue: getLimitedColorChannelValue(event.target.value),\n                            });\n                        }}\n                        aria-label=\"Blue Color Channel\"\n                    >\n                        <TextInput.Slot name=\"left\">\n                            <span className={styles.inputDecorator}>B</span>\n                        </TextInput.Slot>\n                    </TextInput.Root>\n                </div>\n            )}\n            <div className={styles.colorAlphaInput}>\n                <TextInput.Root\n                    data-test-id=\"color-picker-value-input-alpha\"\n                    className={styles.valueInput}\n                    /* .toString() is a workaround for https://github.com/facebook/react/issues/9402 */\n                    value={currentColor.alpha === undefined ? 100 : Math.trunc(currentColor.alpha * 100).toString()}\n                    type=\"number\"\n                    onChange={(event) => {\n                        onColorChange({\n                            ...currentColor,\n                            alpha: getLimitedColorChannelValue(event.target.value, 0, 100) / 100,\n                        });\n                    }}\n                    aria-label=\"Color Opacity\"\n                >\n                    <TextInput.Slot name=\"left\">\n                        <span className={styles.inputDecorator}>A</span>\n                    </TextInput.Slot>\n                    <TextInput.Slot name=\"right\">\n                        <span className={styles.inputDecorator}>%</span>\n                    </TextInput.Slot>\n                </TextInput.Root>\n            </div>\n        </div>\n    );\n};\nColorValueInput.displayName = 'ColorPicker.Values';\n\nexport const ForwardedRefColorValueInput = forwardRef<HTMLDivElement, ColorValueInputProps>(ColorValueInput);\n"],"names":["ColorValueInput","currentColor","DEFAULT_COLOR","onColorChange","currentFormat","DEFAULT_FORMAT","setCurrentFormat","dataTestId","forwardedRef","hexColorValue","setHexColorValue","useState","rgbColorToHex","useEffect","jsxs","styles","jsx","Select","selectedValue","TextInput","isValidHexColor","event","hexColorToRgba","getLimitedColorChannelValue","ForwardedRefColorValueInput","forwardRef"],"mappings":"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"}

package/dist/fondue-components35.js

@@ -1,7 +1,7 @@
-const o = "_root_v784d_5", t = "_inputs_v784d_12", n = "_colorFormatInput_v784d_23", r = "_colorAlphaInput_v784d_24", u = "_colorChannelInputGroup_v784d_28", p = "_inputDecorator_v784d_39", _ = "_gradientInput_v784d_43", l = "_reactColorful_v784d_46", c = "_valueInput_v784d_50", a = {
+const o = "_root_riubn_4", n = "_inputs_riubn_12", t = "_colorFormatInput_riubn_23", r = "_colorAlphaInput_riubn_24", u = "_colorChannelInputGroup_riubn_28", p = "_inputDecorator_riubn_39", _ = "_gradientInput_riubn_43", l = "_reactColorful_riubn_46", c = "_valueInput_riubn_50", a = {
   root: o,
-  inputs: t,
-  colorFormatInput: n,
+  inputs: n,
+  colorFormatInput: t,
   colorAlphaInput: r,
   colorChannelInputGroup: u,
   inputDecorator: p,
@@ -12,11 +12,11 @@ const o = "_root_v784d_5", t = "_inputs_v784d_12", n = "_colorFormatInput_v784d_
 export {
   r as colorAlphaInput,
   u as colorChannelInputGroup,
-  n as colorFormatInput,
+  t as colorFormatInput,
   a as default,
   _ as gradientInput,
   p as inputDecorator,
-  t as inputs,
+  n as inputs,
   l as reactColorful,
   o as root,
   c as valueInput

package/dist/fondue-components41.js

@@ -1,20 +1,20 @@
-const t = "_content_1d0au_5", n = "_subContent_1d0au_6", o = "_item_1d0au_20", s = "_subTrigger_1d0au_20", u = "_subMenuIndicator_1d0au_102", _ = "_group_1d0au_108", e = "_slot_1d0au_115", c = {
+const t = "_content_z8sz3_6", s = "_subContent_z8sz3_7", n = "_item_z8sz3_21", o = "_subTrigger_z8sz3_22", _ = "_subMenuIndicator_z8sz3_107", e = "_group_z8sz3_113", u = "_slot_z8sz3_120", c = {
   content: t,
-  subContent: n,
-  item: o,
-  subTrigger: s,
-  subMenuIndicator: u,
-  group: _,
-  slot: e
+  subContent: s,
+  item: n,
+  subTrigger: o,
+  subMenuIndicator: _,
+  group: e,
+  slot: u
 };
 export {
   t as content,
   c as default,
-  _ as group,
-  o as item,
-  e as slot,
-  n as subContent,
-  u as subMenuIndicator,
-  s as subTrigger
+  e as group,
+  n as item,
+  u as slot,
+  s as subContent,
+  _ as subMenuIndicator,
+  o as subTrigger
 };
 //# sourceMappingURL=fondue-components41.js.map

package/dist/fondue-components60.js

@@ -1,24 +1,24 @@
-const t = "_table_4n7pf_4", o = "_headerCell_4n7pf_18", n = "_rowCell_4n7pf_19", _ = "_caption_4n7pf_40", e = "_sortButton_4n7pf_65", r = "_buttonText_4n7pf_83", s = "_sortIndicator_4n7pf_92", l = "_body_4n7pf_96", c = "_row_4n7pf_19", a = {
+const t = "_table_tkqa4_4", o = "_headerCell_tkqa4_18", _ = "_rowCell_tkqa4_19", a = "_caption_tkqa4_46", n = "_sortButton_tkqa4_71", e = "_buttonText_tkqa4_89", r = "_sortIndicator_tkqa4_98", s = "_body_tkqa4_102", l = "_row_tkqa4_19", c = {
   table: t,
   headerCell: o,
-  rowCell: n,
-  caption: _,
-  sortButton: e,
-  buttonText: r,
-  sortIndicator: s,
-  body: l,
-  row: c
+  rowCell: _,
+  caption: a,
+  sortButton: n,
+  buttonText: e,
+  sortIndicator: r,
+  body: s,
+  row: l
 };
 export {
-  l as body,
-  r as buttonText,
-  _ as caption,
-  a as default,
+  s as body,
+  e as buttonText,
+  a as caption,
+  c as default,
   o as headerCell,
-  c as row,
-  n as rowCell,
-  e as sortButton,
-  s as sortIndicator,
+  l as row,
+  _ as rowCell,
+  n as sortButton,
+  r as sortIndicator,
   t as table
 };
 //# sourceMappingURL=fondue-components60.js.map