@frontify/fondue-components 19.2.0 → 19.3.0

package/dist/fondue-components22.js

@@ -4,12 +4,12 @@ import * as g from "@radix-ui/react-popover";
 import { Slot as q } from "@radix-ui/react-slot";
 import { useSelect as J } from "downshift";
 import { forwardRef as K, useRef as L, useState as Q } from "react";
-import { ForwardedRefCombobox as U } from "./fondue-components63.js";
-import { ForwardedRefSelectItem as W, ForwardedRefSelectItemGroup as X } from "./fondue-components64.js";
-import { SelectMenu as Y } from "./fondue-components65.js";
-import { ForwardedRefSelectSlot as Z } from "./fondue-components66.js";
-import o from "./fondue-components67.js";
-import { useSelectData as _ } from "./fondue-components68.js";
+import { ForwardedRefCombobox as U } from "./fondue-components64.js";
+import { ForwardedRefSelectItem as W, ForwardedRefSelectItemGroup as X } from "./fondue-components65.js";
+import { SelectMenu as Y } from "./fondue-components66.js";
+import { ForwardedRefSelectSlot as Z } from "./fondue-components67.js";
+import o from "./fondue-components68.js";
+import { useSelectData as _ } from "./fondue-components69.js";
 const S = ({
   children: h,
   onSelect: s,
@@ -72,7 +72,7 @@ const S = ({
             children: [
               /* @__PURE__ */ a("span", { className: o.selectedValue, children: H }),
               v,
-              u && /* @__PURE__ */ a(
+              u ? /* @__PURE__ */ a(
                 q,
                 {
                   onClick: (e) => {
@@ -81,7 +81,7 @@ const S = ({
                   className: o.clear,
                   children: u
                 }
-              ),
+              ) : null,
               /* @__PURE__ */ d("div", { className: o.icons, children: [
                 /* @__PURE__ */ a(T, { size: 16, className: o.caret }),
                 n === "success" ? /* @__PURE__ */ a(

package/dist/fondue-components22.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components22.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 { type CommonAriaProps } from '#/helpers/aria';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } 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 | null) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string | null;\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     * 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     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Id of the select component\n     */\n    id?: string;\n    /**\n     * The value of the select is shown as plan text when set to true, items child components are used if set to true\n     * @default true\n     */\n    showStringValue?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n} & CommonAriaProps;\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        showStringValue = true,\n        'data-test-id': dataTestId = 'fondue-select',\n        viewportCollisionPadding = 'compact',\n        ...props\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            toggleButtonId: id,\n            labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect?.(selectedItem?.value ?? null);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    const displayedValue = selectedItem\n        ? (!showStringValue && selectedItem.children) || selectedItem.label\n        : placeholder;\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': 'aria-label' in props ? props['aria-label'] : undefined,\n                              ref: forwardedRef,\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{displayedValue}</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                side={side}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\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","side","id","showStringValue","dataTestId","viewportCollisionPadding","props","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","displayedValue","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-components22.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 { type CommonAriaProps } from '#/helpers/aria';\n\nimport { ForwardedRefCombobox } from './Combobox';\nimport { ForwardedRefSelectItem, ForwardedRefSelectItemGroup } from './SelectItem';\nimport { SelectMenu, type SelectMenuViewportCollisionPadding } 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 | null) => void;\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     */\n    value?: string | null;\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     * 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     * The data test id of the select component.\n     */\n    'data-test-id'?: string;\n    /**\n     * Id of the select component\n     */\n    id?: string;\n    /**\n     * The value of the select is shown as plan text when set to true, items child components are used if set to true\n     * @default true\n     */\n    showStringValue?: boolean;\n    /**\n     * Define the minimum distance between the select menu and the viewport edge\n     * @default 'compact'\n     */\n    viewportCollisionPadding?: SelectMenuViewportCollisionPadding;\n} & CommonAriaProps;\n\nexport const SelectInput = (\n    {\n        children,\n        onSelect,\n        value,\n        defaultValue,\n        placeholder = '',\n        status = 'neutral',\n        disabled,\n        alignMenu = 'start',\n        side = 'bottom',\n        id,\n        showStringValue = true,\n        'data-test-id': dataTestId = 'fondue-select',\n        viewportCollisionPadding = 'compact',\n        ...props\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            toggleButtonId: id,\n            labelId: 'aria-labelledby' in props ? props['aria-labelledby'] : undefined,\n            onIsOpenChange: () => {\n                setHasInteractedSinceOpening(false);\n            },\n            onHighlightedIndexChange: () => {\n                setHasInteractedSinceOpening(true);\n            },\n            onSelectedItemChange: ({ selectedItem }) => {\n                onSelect?.(selectedItem?.value ?? null);\n            },\n            itemToString: (item) => (item ? item.label : ''),\n        });\n\n    const displayedValue = selectedItem\n        ? (!showStringValue && selectedItem.children) || selectedItem.label\n        : placeholder;\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': 'aria-label' in props ? props['aria-label'] : undefined,\n                              ref: forwardedRef,\n                          }))}\n                >\n                    <span className={styles.selectedValue}>{displayedValue}</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                    ) : null}\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                side={side}\n                highlightedIndex={highlightedIndex}\n                getMenuProps={getMenuProps}\n                getItemProps={getItemProps}\n                selectedItem={selectedItem}\n                hasInteractedSinceOpening={hasInteractedSinceOpening}\n                viewportCollisionPadding={viewportCollisionPadding}\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","side","id","showStringValue","dataTestId","viewportCollisionPadding","props","forwardedRef","inputSlots","menuSlots","items","clearButton","getItemByValue","useSelectData","defaultItem","activeItem","wasClicked","useRef","hasInteractedSinceOpening","setHasInteractedSinceOpening","useState","getToggleButtonProps","getMenuProps","getItemProps","reset","selectedItem","isOpen","highlightedIndex","useSelect","item","displayedValue","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-components23.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as s } from "react/jsx-runtime";
 import * as e from "@radix-ui/react-slider";
 import { forwardRef as h, useRef as R } from "react";
-import r from "./fondue-components69.js";
+import r from "./fondue-components70.js";
 const g = ({
   value: a,
   defaultValue: n = [0],

package/dist/fondue-components23.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components23.js","sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixSlider from '@radix-ui/react-slider';\nimport { type ForwardedRef, forwardRef, useRef } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/slider.module.scss';\n\nexport type SliderProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The default value of the slider\n     * Used for uncontrolled components\n     * @default [0]\n     */\n    defaultValue?: number[];\n    /**\n     * The controlled value of the slider\n     * @default [0]\n     */\n    value?: number[];\n    /**\n     * Minimum value of the slider\n     * @default 0\n     */\n    min?: number;\n    /**\n     * Maximum value of the slider\n     * @default 100\n     */\n    max?: number;\n    /**\n     * The granularity with which the slider can step through values\n     * @default 1\n     */\n    step?: number;\n    /**\n     * The minimum steps between thumbs in a range slider\n     * @default 0\n     */\n    minStepsBetweenThumbs?: number;\n    /**\n     * Disable the slider\n     * @default false\n     */\n    disabled?: boolean;\n    onChange?: (value: number[]) => void;\n    onCommit?: (value: number[]) => void;\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nconst SliderComponent = (\n    {\n        value,\n        defaultValue = [0],\n        onChange,\n        onCommit,\n        'data-test-id': dataTestId = 'fondue-slider',\n        ...props\n    }: SliderProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    const sliderThumbRef = useRef<HTMLSpanElement | null>(null);\n    return (\n        <RadixSlider.Root\n            ref={ref}\n            className={styles.root}\n            value={value}\n            defaultValue={defaultValue}\n            onValueChange={onChange}\n            onValueCommit={onCommit}\n            data-test-id={dataTestId}\n            {...props}\n        >\n            <RadixSlider.Track\n                onPointerDown={() => {\n                    if (sliderThumbRef.current) {\n                        sliderThumbRef.current.dataset.showFocusRing = 'false';\n                    }\n                }}\n                className={styles.track}\n            >\n                <RadixSlider.Range className={styles.range} />\n            </RadixSlider.Track>\n            {(value || defaultValue).map((_, index) => (\n                <RadixSlider.Thumb\n                    ref={sliderThumbRef}\n                    className={styles.thumb}\n                    onPointerDown={(event) => {\n                        event.currentTarget.dataset.showFocusRing = 'false';\n                    }}\n                    onBlur={(event) => {\n                        event.currentTarget.dataset.showFocusRing = 'true';\n                    }}\n                    key={index}\n                />\n            ))}\n        </RadixSlider.Root>\n    );\n};\n\nexport const Slider = forwardRef<HTMLButtonElement, SliderProps>(SliderComponent);\nSlider.displayName = 'Slider';\n"],"names":["SliderComponent","value","defaultValue","onChange","onCommit","dataTestId","props","ref","sliderThumbRef","useRef","jsxs","RadixSlider","styles","jsx","_","index","event","Slider","forwardRef"],"mappings":";;;;AAqDA,MAAMA,IAAkB,CACpB;AAAA,EACI,OAAAC;AAAA,EACA,cAAAC,IAAe,CAAC,CAAC;AAAA,EACjB,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACK,QAAAC,IAAiBC,EAA+B,IAAI;AAEtD,SAAA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACG,KAAAJ;AAAA,MACA,WAAWK,EAAO;AAAA,MAClB,OAAAX;AAAA,MACA,cAAAC;AAAA,MACA,eAAeC;AAAA,MACf,eAAeC;AAAA,MACf,gBAAcC;AAAA,MACb,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACG,eAAe,MAAM;AACjB,cAAIH,EAAe,YACAA,EAAA,QAAQ,QAAQ,gBAAgB;AAAA,YAEvD;AAAA,YACA,WAAWI,EAAO;AAAA,YAElB,4BAACD,EAAY,OAAZ,EAAkB,WAAWC,EAAO,MAAO,CAAA;AAAA,UAAA;AAAA,QAChD;AAAA,SACEX,KAASC,GAAc,IAAI,CAACY,GAAGC,MAC7B,gBAAAF;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACG,KAAKH;AAAA,YACL,WAAWI,EAAO;AAAA,YAClB,eAAe,CAACI,MAAU;AAChB,cAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,YAChD;AAAA,YACA,QAAQ,CAACA,MAAU;AACT,cAAAA,EAAA,cAAc,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAChD;AAAA,UACKD;AAAA,QAEZ,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACL;AAER,GAEaE,IAASC,EAA2ClB,CAAe;AAChFiB,EAAO,cAAc;"}
+{"version":3,"file":"fondue-components23.js","sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixSlider from '@radix-ui/react-slider';\nimport { type ForwardedRef, forwardRef, useRef } from 'react';\n\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/slider.module.scss';\n\nexport type SliderProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The default value of the slider\n     * Used for uncontrolled components\n     * @default [0]\n     */\n    defaultValue?: number[];\n    /**\n     * The controlled value of the slider\n     * @default [0]\n     */\n    value?: number[];\n    /**\n     * Minimum value of the slider\n     * @default 0\n     */\n    min?: number;\n    /**\n     * Maximum value of the slider\n     * @default 100\n     */\n    max?: number;\n    /**\n     * The granularity with which the slider can step through values\n     * @default 1\n     */\n    step?: number;\n    /**\n     * The minimum steps between thumbs in a range slider\n     * @default 0\n     */\n    minStepsBetweenThumbs?: number;\n    /**\n     * Disable the slider\n     * @default false\n     */\n    disabled?: boolean;\n    onChange?: (value: number[]) => void;\n    onCommit?: (value: number[]) => void;\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nconst SliderComponent = (\n    {\n        value,\n        defaultValue = [0],\n        onChange,\n        onCommit,\n        'data-test-id': dataTestId = 'fondue-slider',\n        ...props\n    }: SliderProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => {\n    const sliderThumbRef = useRef<HTMLSpanElement | null>(null);\n    return (\n        <RadixSlider.Root\n            ref={ref}\n            className={styles.root}\n            value={value}\n            defaultValue={defaultValue}\n            onValueChange={onChange}\n            onValueCommit={onCommit}\n            data-test-id={dataTestId}\n            {...props}\n        >\n            <RadixSlider.Track\n                onPointerDown={() => {\n                    if (sliderThumbRef.current) {\n                        sliderThumbRef.current.dataset.showFocusRing = 'false';\n                    }\n                }}\n                className={styles.track}\n            >\n                <RadixSlider.Range className={styles.range} />\n            </RadixSlider.Track>\n            {(value || defaultValue).map((_, index) => (\n                <RadixSlider.Thumb\n                    ref={sliderThumbRef}\n                    className={styles.thumb}\n                    onPointerDown={(event) => {\n                        event.currentTarget.dataset.showFocusRing = 'false';\n                    }}\n                    onBlur={(event) => {\n                        event.currentTarget.dataset.showFocusRing = 'true';\n                    }}\n                    key={index}\n                />\n            ))}\n        </RadixSlider.Root>\n    );\n};\n\nexport const Slider = forwardRef<HTMLButtonElement, SliderProps>(SliderComponent);\nSlider.displayName = 'Slider';\n"],"names":["SliderComponent","value","defaultValue","onChange","onCommit","dataTestId","props","ref","sliderThumbRef","useRef","jsxs","RadixSlider","styles","jsx","_","index","event","Slider","forwardRef"],"mappings":";;;;AAqDA,MAAMA,IAAkB,CACpB;AAAA,EACI,OAAAC;AAAA,EACA,cAAAC,IAAe,CAAC,CAAC;AAAA,EACjB,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,GAAGC;AACP,GACAC,MACC;AACD,QAAMC,IAAiBC,EAA+B,IAAI;AAC1D,SACI,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACG,KAAAJ;AAAA,MACA,WAAWK,EAAO;AAAA,MAClB,OAAAX;AAAA,MACA,cAAAC;AAAA,MACA,eAAeC;AAAA,MACf,eAAeC;AAAA,MACf,gBAAcC;AAAA,MACb,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACG,eAAe,MAAM;AACjB,cAAIH,EAAe,YACfA,EAAe,QAAQ,QAAQ,gBAAgB;AAAA,YAEvD;AAAA,YACA,WAAWI,EAAO;AAAA,YAElB,4BAACD,EAAY,OAAZ,EAAkB,WAAWC,EAAO,MAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,SAE9CX,KAASC,GAAc,IAAI,CAACY,GAAGC,MAC7B,gBAAAF;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACG,KAAKH;AAAA,YACL,WAAWI,EAAO;AAAA,YAClB,eAAe,CAACI,MAAU;AACtB,cAAAA,EAAM,cAAc,QAAQ,gBAAgB;AAAA,YAChD;AAAA,YACA,QAAQ,CAACA,MAAU;AACf,cAAAA,EAAM,cAAc,QAAQ,gBAAgB;AAAA,YAChD;AAAA,UAAA;AAAA,UACKD;AAAA,QAAA,CAEZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb,GAEaE,IAASC,EAA2ClB,CAAe;AAChFiB,EAAO,cAAc;"}

package/dist/fondue-components24.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-switch";
 import { forwardRef as l } from "react";
-import { cn as f } from "./fondue-components36.js";
-import t from "./fondue-components70.js";
+import { cn as f } from "./fondue-components37.js";
+import t from "./fondue-components71.js";
 const n = ({
   value: a,
   defaultValue: i,

package/dist/fondue-components24.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components24.js","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { type FormEvent, type ForwardedRef, forwardRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/switch.module.scss';\n\ntype SwitchProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The size of the switch component.\n     * @default medium\n     */\n    size?: 'small' | 'medium' | 'large';\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     * @default false\n     */\n    value?: boolean;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     * @default false\n     */\n    defaultValue?: boolean;\n    /**\n     * Disables the select component.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Whether the switch is required.\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Callback function that is called when the switch is toggled.\n     * @param checked - The new checked state of the switch\n     */\n    onChange?: (checked: boolean) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     * @param event - The event object\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     * @param event - The event object\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nconst SwitchComponent = (\n    {\n        value,\n        defaultValue,\n        size = 'medium',\n        onChange,\n        'data-test-id': dataTestId = 'fondue-switch',\n        'aria-label': ariaLabel = 'Switch',\n        ...props\n    }: SwitchProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <RadixSwitch.Root\n        ref={ref}\n        checked={value}\n        defaultChecked={defaultValue}\n        className={cn([styles.root, styles[size]])}\n        onCheckedChange={onChange}\n        aria-label={ariaLabel}\n        data-test-id={dataTestId}\n        {...props}\n    >\n        <RadixSwitch.Thumb className={styles.thumb} />\n    </RadixSwitch.Root>\n);\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(SwitchComponent);\nSwitch.displayName = 'Switch';\n"],"names":["SwitchComponent","value","defaultValue","size","onChange","dataTestId","ariaLabel","props","ref","jsx","RadixSwitch","cn","styles","Switch","forwardRef"],"mappings":";;;;;AAwDA,MAAMA,IAAkB,CACpB;AAAA,EACI,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,cAAcC,IAAY;AAAA,EAC1B,GAAGC;AACP,GACAC,MAEA,gBAAAC;AAAA,EAACC,EAAY;AAAA,EAAZ;AAAA,IACG,KAAAF;AAAA,IACA,SAASP;AAAA,IACT,gBAAgBC;AAAA,IAChB,WAAWS,EAAG,CAACC,EAAO,MAAMA,EAAOT,CAAI,CAAC,CAAC;AAAA,IACzC,iBAAiBC;AAAA,IACjB,cAAYE;AAAA,IACZ,gBAAcD;AAAA,IACb,GAAGE;AAAA,IAEJ,4BAACG,EAAY,OAAZ,EAAkB,WAAWE,EAAO,MAAO,CAAA;AAAA,EAAA;AAChD,GAGSC,IAASC,EAA2Cd,CAAe;AAChFa,EAAO,cAAc;"}
+{"version":3,"file":"fondue-components24.js","sources":["../src/components/Switch/Switch.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { type FormEvent, type ForwardedRef, forwardRef } from 'react';\n\nimport { cn } from '#/utilities/styleUtilities';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport styles from './styles/switch.module.scss';\n\ntype SwitchProps = {\n    id?: string;\n    name?: string;\n    /**\n     * The size of the switch component.\n     * @default medium\n     */\n    size?: 'small' | 'medium' | 'large';\n    /**\n     * The active value in the select component. This is used to control the select externally.\n     * @default false\n     */\n    value?: boolean;\n    /**\n     * The default value of the select component. Used for uncontrolled usages.\n     * @default false\n     */\n    defaultValue?: boolean;\n    /**\n     * Disables the select component.\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Whether the switch is required.\n     * @default false\n     */\n    required?: boolean;\n    /**\n     * Callback function that is called when the switch is toggled.\n     * @param checked - The new checked state of the switch\n     */\n    onChange?: (checked: boolean) => void;\n    /**\n     * Event handler called when the checkbox is blurred\n     * @param event - The event object\n     */\n    onBlur?: (event: FormEvent<HTMLButtonElement>) => void;\n    /**\n     * Event handler called when the checkbox is focused\n     * @param event - The event object\n     */\n    onFocus?: (event: FormEvent<HTMLButtonElement>) => void;\n    'data-test-id'?: string;\n} & CommonAriaAttrs;\n\nconst SwitchComponent = (\n    {\n        value,\n        defaultValue,\n        size = 'medium',\n        onChange,\n        'data-test-id': dataTestId = 'fondue-switch',\n        'aria-label': ariaLabel = 'Switch',\n        ...props\n    }: SwitchProps,\n    ref: ForwardedRef<HTMLButtonElement>,\n) => (\n    <RadixSwitch.Root\n        ref={ref}\n        checked={value}\n        defaultChecked={defaultValue}\n        className={cn([styles.root, styles[size]])}\n        onCheckedChange={onChange}\n        aria-label={ariaLabel}\n        data-test-id={dataTestId}\n        {...props}\n    >\n        <RadixSwitch.Thumb className={styles.thumb} />\n    </RadixSwitch.Root>\n);\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(SwitchComponent);\nSwitch.displayName = 'Switch';\n"],"names":["SwitchComponent","value","defaultValue","size","onChange","dataTestId","ariaLabel","props","ref","jsx","RadixSwitch","cn","styles","Switch","forwardRef"],"mappings":";;;;;AAwDA,MAAMA,IAAkB,CACpB;AAAA,EACI,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AAAA,EAC7B,cAAcC,IAAY;AAAA,EAC1B,GAAGC;AACP,GACAC,MAEA,gBAAAC;AAAA,EAACC,EAAY;AAAA,EAAZ;AAAA,IACG,KAAAF;AAAA,IACA,SAASP;AAAA,IACT,gBAAgBC;AAAA,IAChB,WAAWS,EAAG,CAACC,EAAO,MAAMA,EAAOT,CAAI,CAAC,CAAC;AAAA,IACzC,iBAAiBC;AAAA,IACjB,cAAYE;AAAA,IACZ,gBAAcD;AAAA,IACb,GAAGE;AAAA,IAEJ,4BAACG,EAAY,OAAZ,EAAkB,WAAWE,EAAO,MAAA,CAAO;AAAA,EAAA;AAChD,GAGSC,IAASC,EAA2Cd,CAAe;AAChFa,EAAO,cAAc;"}

package/dist/fondue-components25.js

@@ -1,51 +1,51 @@
 import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { IconArrowUp as A, IconArrowDown as K, IconArrowBidirectional as E } from "@frontify/fondue-icons";
-import { forwardRef as b, useRef as w, useMemo as h } from "react";
-import { useSyncRefs as g } from "./fondue-components46.js";
-import { useTextTruncation as N } from "./fondue-components71.js";
-import { Box as j } from "./fondue-components5.js";
-import { LoadingCircle as L } from "./fondue-components18.js";
-import o from "./fondue-components72.js";
-import { handleKeyDown as S, isEventFromInteractiveElement as $ } from "./fondue-components73.js";
-const R = b(
-  ({ layout: a = "auto", fontSize: e = "medium", sticky: d, children: s, ...n }, l) => /* @__PURE__ */ t("div", { onKeyDown: S, role: "grid", tabIndex: -1, children: /* @__PURE__ */ t(
+import { IconArrowUp as A, IconArrowDown as K, IconArrowBidirectional as h } from "@frontify/fondue-icons";
+import { forwardRef as m, useRef as w, useMemo as j } from "react";
+import { useSyncRefs as g } from "./fondue-components47.js";
+import { useTextTruncation as N } from "./fondue-components72.js";
+import { Box as L } from "./fondue-components5.js";
+import { LoadingCircle as S } from "./fondue-components18.js";
+import n from "./fondue-components73.js";
+import { handleKeyDown as $, shouldIgnoreRowClick as D } from "./fondue-components74.js";
+const R = m(
+  ({ layout: a = "auto", fontSize: e = "medium", sticky: o, children: s, ...d }, l) => /* @__PURE__ */ t("div", { onKeyDown: $, role: "grid", tabIndex: -1, children: /* @__PURE__ */ t(
     "table",
     {
       ref: l,
-      className: o.table,
+      className: n.table,
       "data-layout": a,
       "data-font-size": e,
-      "data-sticky": d,
-      ...n,
+      "data-sticky": o,
+      ...d,
       children: s
     }
   ) })
 );
 R.displayName = "Table.Root";
-const v = b(({ children: a }, e) => /* @__PURE__ */ t("caption", { ref: e, className: o.caption, children: a }));
-v.displayName = "Table.Caption";
-const C = b(
-  ({ children: a, "aria-label": e, "aria-busy": d }, s) => /* @__PURE__ */ t("thead", { ref: s, className: o.header, "aria-label": e, "aria-busy": d, children: a })
+const C = m(({ children: a }, e) => /* @__PURE__ */ t("caption", { ref: e, className: n.caption, children: a }));
+C.displayName = "Table.Caption";
+const x = m(
+  ({ children: a, "aria-label": e, "aria-busy": o }, s) => /* @__PURE__ */ t("thead", { ref: s, className: n.header, "aria-label": e, "aria-busy": o, children: a })
 );
-C.displayName = "Table.Header";
-const x = b(
+x.displayName = "Table.Header";
+const v = m(
   ({
     noShrink: a = !1,
     truncate: e = !1,
-    align: d = "left",
+    align: o = "left",
     scope: s = "col",
-    sortTranslations: n,
+    sortTranslations: d,
     sortDirection: l,
     colSpan: c,
-    width: m,
+    width: b,
     state: f = "idle",
     loadingStateAriaLabel: u,
     onSortChange: i,
     children: r
-  }, k) => {
+  }, H) => {
     const y = w(null);
-    g(y, k), N(y);
-    const z = h(() => typeof r == "string" ? l === "ascending" ? (n == null ? void 0 : n.sortDescending) ?? `Sort by ${r} descending` : (n == null ? void 0 : n.sortAscending) ?? `Sort by ${r} ascending` : l === "ascending" ? "Sort descending" : "Sort ascending", [r, l, n]), B = () => {
+    g(y, H), N(y);
+    const z = j(() => 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]), B = () => {
       if (!i)
         return;
       i(l === void 0 || l === "descending" ? "ascending" : "descending");
@@ -54,28 +54,29 @@ const x = b(
       "th",
       {
         ref: y,
-        style: { width: m },
-        className: o.headerCell,
+        style: { width: b },
+        className: n.headerCell,
         scope: s,
         colSpan: c,
-        "data-align": d,
+        "data-align": o,
         "data-truncate": e,
         "data-no-shrink": a,
         "data-sortable": !!i,
         "aria-sort": i ? l || "none" : void 0,
-        children: f === "loading" ? /* @__PURE__ */ p("div", { className: o.cellContent, "aria-live": "polite", "aria-label": u, children: [
-          typeof r == "string" && e ? /* @__PURE__ */ t("span", { className: o.buttonText, children: r }) : r,
-          /* @__PURE__ */ t(L, { "data-test-id": "fondue-loading-circle", size: "xx-small" })
+        children: f === "loading" ? /* @__PURE__ */ p("div", { className: n.cellContent, "aria-live": "polite", "aria-label": u, children: [
+          typeof r == "string" && e ? /* @__PURE__ */ t("span", { className: n.buttonText, children: r }) : r,
+          /* @__PURE__ */ t(S, { "data-test-id": "fondue-loading-circle", size: "xx-small" })
         ] }) : i ? /* @__PURE__ */ p(
           "button",
           {
-            className: o.cellContent,
+            className: n.cellContent,
             "aria-label": z,
             "data-active": !!l,
             onClick: B,
+            type: "button",
             children: [
-              typeof r == "string" && e ? /* @__PURE__ */ t("span", { className: o.buttonText, children: r }) : r,
-              /* @__PURE__ */ t(j, { width: 3, children: l === "ascending" ? /* @__PURE__ */ t(A, { size: "12" }) : l === "descending" ? /* @__PURE__ */ t(K, { size: "12" }) : /* @__PURE__ */ t(E, { className: o.sortIndicator, size: "12" }) })
+              typeof r == "string" && e ? /* @__PURE__ */ t("span", { className: n.buttonText, children: r }) : r,
+              /* @__PURE__ */ t(L, { width: 3, children: l === "ascending" ? /* @__PURE__ */ t(A, { size: "12" }) : l === "descending" ? /* @__PURE__ */ t(K, { size: "12" }) : /* @__PURE__ */ t(h, { className: n.sortIndicator, size: "12" }) })
             ]
           }
         ) : r
@@ -83,33 +84,33 @@ const x = b(
     );
   }
 );
-x.displayName = "Table.HeaderCell";
-const T = b(
-  ({ children: a, "aria-busy": e }, d) => /* @__PURE__ */ t("tbody", { ref: d, className: o.body, "aria-busy": e, children: a })
+v.displayName = "Table.HeaderCell";
+const T = m(
+  ({ children: a, "aria-busy": e }, o) => /* @__PURE__ */ t("tbody", { ref: o, className: n.body, "aria-busy": e, children: a })
 );
 T.displayName = "Table.Body";
-const I = b(
-  ({ disabled: a = !1, selected: e = !1, onClick: d, children: s, "aria-label": n, "data-test-id": l }, c) => {
-    const m = d !== void 0 && !a, f = (i) => {
-      a || d && !$(i) && d(e);
+const I = m(
+  ({ disabled: a = !1, selected: e = !1, onClick: o, children: s, "aria-label": d, "data-test-id": l }, c) => {
+    const b = o !== void 0 && !a, f = (i) => {
+      a || D(i) || o && o(e);
     }, u = (i) => {
-      m && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), f());
+      b && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), f());
     };
     return /* @__PURE__ */ t(
       "tr",
       {
         ref: c,
-        className: o.row,
+        className: n.row,
         tabIndex: 0,
-        role: m ? "button" : "row",
+        role: b ? "button" : "row",
         "data-disabled": a,
-        "data-interactive": m,
+        "data-interactive": b,
         "data-selected": e,
         "aria-disabled": a,
-        "aria-label": n,
+        "aria-label": d,
         "aria-selected": e,
-        onClick: m ? f : void 0,
-        onKeyDown: m ? u : void 0,
+        onClick: b ? f : void 0,
+        onKeyDown: b ? u : void 0,
         "data-test-id": l,
         children: s
       }
@@ -117,41 +118,41 @@ const I = b(
   }
 );
 I.displayName = "Table.Row";
-const H = b(
-  ({ colSpan: a, truncate: e, align: d = "left", children: s, "aria-label": n }, l) => {
+const k = m(
+  ({ colSpan: a, truncate: e, align: o = "left", children: s, "aria-label": d }, l) => {
     const c = w(null);
     return g(c, l), N(c), /* @__PURE__ */ t(
       "td",
       {
         ref: c,
-        className: o.rowCell,
+        className: n.rowCell,
         colSpan: a,
-        "data-align": d,
+        "data-align": o,
         "data-truncate": e,
-        "aria-label": n,
+        "aria-label": d,
         children: s
       }
     );
   }
 );
-H.displayName = "Table.RowCell";
+k.displayName = "Table.RowCell";
 const V = {
   Root: R,
-  Caption: v,
-  Header: C,
-  HeaderCell: x,
+  Caption: C,
+  Header: x,
+  HeaderCell: v,
   Body: T,
   Row: I,
-  RowCell: H
+  RowCell: k
 };
 export {
   V as Table,
   T as TableBody,
-  v as TableCaption,
-  C as TableHeader,
-  x as TableHeaderCell,
+  C as TableCaption,
+  x as TableHeader,
+  v as TableHeaderCell,
   R as TableRoot,
   I as TableRow,
-  H as TableRowCell
+  k as TableRowCell
 };
 //# sourceMappingURL=fondue-components25.js.map

package/dist/fondue-components25.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components25.js","sources":["../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconArrowBidirectional, IconArrowDown, IconArrowUp } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type KeyboardEvent,\n    type MouseEvent,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTextTruncation } from '#/hooks/useTextTruncation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport { Box } from '../Box/Box';\nimport { LoadingCircle } from '../LoadingCircle/LoadingCircle';\n\nimport styles from './styles/table.module.scss';\nimport { handleKeyDown, isEventFromInteractiveElement } 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     * State of the cell, used for displaying loading state\n     * @default 'idle'\n     */\n    state?: 'idle' | 'loading';\n    /**\n     * The aria-label to be applied when state='loading'\n     */\n    loadingStateAriaLabel?: string;\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            state = 'idle',\n            loadingStateAriaLabel,\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                {state === 'loading' ? (\n                    <div className={styles.cellContent} aria-live=\"polite\" aria-label={loadingStateAriaLabel}>\n                        {typeof children === 'string' && truncate ? (\n                            <span className={styles.buttonText}>{children}</span>\n                        ) : (\n                            children\n                        )}\n                        <LoadingCircle data-test-id=\"fondue-loading-circle\" size=\"xx-small\" />\n                    </div>\n                ) : onSortChange ? (\n                    <button\n                        className={styles.cellContent}\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                        <Box width={3}>\n                            {sortDirection === 'ascending' ? (\n                                <IconArrowUp size=\"12\" />\n                            ) : sortDirection === 'descending' ? (\n                                <IconArrowDown size=\"12\" />\n                            ) : (\n                                <IconArrowBidirectional className={styles.sortIndicator} size=\"12\" />\n                            )}\n                        </Box>\n                    </button>\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 = (event?: MouseEvent) => {\n            if (disabled) {\n                return;\n            }\n\n            if (onClick && !isEventFromInteractiveElement(event)) {\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","state","loadingStateAriaLabel","onSortChange","cellRef","useRef","useSyncRefs","useTextTruncation","sortLabel","useMemo","handleSortChange","jsxs","LoadingCircle","Box","IconArrowUp","IconArrowDown","IconArrowBidirectional","TableBody","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","isEventFromInteractiveElement","TableRowCell","Table"],"mappings":"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"}
+{"version":3,"file":"fondue-components25.js","sources":["../src/components/Table/Table.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconArrowBidirectional, IconArrowDown, IconArrowUp } from '@frontify/fondue-icons';\nimport {\n    forwardRef,\n    useMemo,\n    useRef,\n    type CSSProperties,\n    type KeyboardEvent,\n    type MouseEvent,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { useSyncRefs } from '#/hooks/useSyncRefs';\nimport { useTextTruncation } from '#/hooks/useTextTruncation';\nimport { type CommonAriaAttrs } from '#/utilities/types';\n\nimport { Box } from '../Box/Box';\nimport { LoadingCircle } from '../LoadingCircle/LoadingCircle';\n\nimport styles from './styles/table.module.scss';\nimport { handleKeyDown, shouldIgnoreRowClick } 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     * State of the cell, used for displaying loading state\n     * @default 'idle'\n     */\n    state?: 'idle' | 'loading';\n    /**\n     * The aria-label to be applied when state='loading'\n     */\n    loadingStateAriaLabel?: string;\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            state = 'idle',\n            loadingStateAriaLabel,\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                {state === 'loading' ? (\n                    <div className={styles.cellContent} aria-live=\"polite\" aria-label={loadingStateAriaLabel}>\n                        {typeof children === 'string' && truncate ? (\n                            <span className={styles.buttonText}>{children}</span>\n                        ) : (\n                            children\n                        )}\n                        <LoadingCircle data-test-id=\"fondue-loading-circle\" size=\"xx-small\" />\n                    </div>\n                ) : onSortChange ? (\n                    <button\n                        className={styles.cellContent}\n                        aria-label={sortLabel}\n                        data-active={!!sortDirection}\n                        onClick={handleSortChange}\n                        type=\"button\"\n                    >\n                        {typeof children === 'string' && truncate ? (\n                            <span className={styles.buttonText}>{children}</span>\n                        ) : (\n                            children\n                        )}\n                        <Box width={3}>\n                            {sortDirection === 'ascending' ? (\n                                <IconArrowUp size=\"12\" />\n                            ) : sortDirection === 'descending' ? (\n                                <IconArrowDown size=\"12\" />\n                            ) : (\n                                <IconArrowBidirectional className={styles.sortIndicator} size=\"12\" />\n                            )}\n                        </Box>\n                    </button>\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 TableRowProps = 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};\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 = (event?: MouseEvent) => {\n            if (disabled) {\n                return;\n            }\n\n            if (shouldIgnoreRowClick(event)) {\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","state","loadingStateAriaLabel","onSortChange","cellRef","useRef","useSyncRefs","useTextTruncation","sortLabel","useMemo","handleSortChange","jsxs","LoadingCircle","Box","IconArrowUp","IconArrowDown","IconArrowBidirectional","TableBody","TableRow","disabled","selected","onClick","dataTestId","isInteractive","handleClick","event","shouldIgnoreRowClick","TableRowCell","Table"],"mappings":"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"}