@frontify/fondue 13.4.4 → 13.4.5

package/dist/components/ActionMenu/Aria/AriaMenuItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AriaMenuItem.es.js","sources":["../../../../src/components/ActionMenu/Aria/AriaMenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMenuItem } from '@react-aria/menu';\nimport { mergeProps } from '@react-aria/utils';\nimport { type TreeState } from '@react-stately/tree';\nimport { type Node } from '@react-types/shared';\nimport { type ReactElement, useEffect, useRef, useState } from 'react';\n\nimport { type ActionMenuItemType, type ActionMenuSwitchItemType } from '@components/ActionMenu/ActionMenu';\nimport { type MenuItemType } from '@components/Dropdown';\nimport { MenuItem } from '@components/MenuItem/MenuItem';\nimport { Switch } from '@components/Switch/Switch';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Please use a custom component instead.\n */\nexport type AriaOptionProps = {\n    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType;\n    node: Node<object>;\n    isSelected?: boolean;\n    state: TreeState<object>;\n    /**\n     *  @deprecated Use `menuItem.onClick` instead\n     *  */\n    onClick?: () => void;\n};\n\ninterface SwitchObject {\n    switchComponent: ReactElement | undefined;\n    switchValue: boolean | null;\n    toggleSwitch: VoidFunction | null;\n}\n\nconst isActionMenuItem = (\n    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType,\n): menuItem is ActionMenuItemType =>\n    typeof (menuItem as ActionMenuItemType).onClick !== 'undefined' && typeof menuItem.type === 'undefined';\nconst isActionMenuSwitchItem = (\n    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType,\n): menuItem is ActionMenuSwitchItemType =>\n    typeof (menuItem as ActionMenuSwitchItemType).onClick !== 'undefined' && menuItem.type === 'switch';\n\nconst useSwitch = (isSwitch: boolean, initialValue: boolean) => {\n    const [switchValue, setSwitchValue] = useState<boolean>(initialValue ?? false);\n    const [switchObject, setSwitchObject] = useState<SwitchObject>({\n        switchComponent: undefined,\n        switchValue: null,\n        toggleSwitch: null,\n    });\n\n    useEffect(() => {\n        if (isSwitch) {\n            const toggleSwitch = () => setSwitchValue(!switchValue);\n            const switchComponent = <Switch size=\"small\" mode={switchValue ? 'on' : 'off'} />;\n\n            // eslint-disable-next-line react-hooks/set-state-in-effect\n            setSwitchObject({\n                switchComponent,\n                switchValue,\n                toggleSwitch,\n            });\n        }\n    }, [isSwitch, switchValue]);\n\n    return switchObject;\n};\n\n/**\n * @deprecated Please use a custom component instead.\n */\nexport const AriaMenuItem = ({ menuItem, node, state, isSelected, onClick }: AriaOptionProps): ReactElement => {\n    const ref = useRef<HTMLLIElement | null>(null);\n    const initialValue = isActionMenuSwitchItem(menuItem) ? menuItem.initialValue : false;\n    const {\n        switchComponent = undefined,\n        switchValue = null,\n        toggleSwitch = null,\n    } = useSwitch(isActionMenuSwitchItem(menuItem), initialValue);\n\n    const { menuItemProps } = useMenuItem(\n        {\n            ...node,\n            onAction: () => {\n                if (isActionMenuItem(menuItem)) {\n                    menuItem.onClick();\n                }\n                if (isActionMenuSwitchItem(menuItem)) {\n                    toggleSwitch?.();\n                    menuItem.onClick(Boolean(!switchValue));\n                }\n            },\n            isDisabled: menuItem?.disabled || false,\n            'aria-label': typeof menuItem?.title === 'string' ? menuItem?.title : 'Menu item',\n        },\n        state,\n        ref,\n    );\n    const { title, decorator, subtitle, size, style, disabled, selectionIndicator } = menuItem;\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <li\n            {...mergeProps(menuItemProps, focusProps, { onClick: () => onClick?.() })}\n            data-test-id=\"menu-item\"\n            className={merge([\n                'tw-relative hover:tw-bg-box-neutral-hover tw-list-none tw-outline-none',\n                disabled && 'tw-pointer-events-none tw-top-px',\n                isFocusVisible && FOCUS_STYLE_INSET,\n            ])}\n            ref={ref}\n        >\n            <MenuItem\n                title={title}\n                decorator={decorator}\n                subtitle={subtitle}\n                size={size}\n                style={style}\n                disabled={disabled}\n                active={isSelected}\n                selectionIndicator={selectionIndicator}\n                switchComponent={switchComponent}\n            />\n        </li>\n    );\n};\nAriaMenuItem.displayName = 'FondueAriaMenuItem';\n"],"names":["isActionMenuItem","menuItem","isActionMenuSwitchItem","useSwitch","isSwitch","initialValue","switchValue","setSwitchValue","useState","switchObject","setSwitchObject","useEffect","Switch","AriaMenuItem","node","state","isSelected","onClick","ref","useRef","switchComponent","toggleSwitch","menuItemProps","useMenuItem","title","decorator","subtitle","size","style","disabled","selectionIndicator","isFocusVisible","focusProps","useFocusRing","jsx","mergeProps","merge","FOCUS_STYLE_INSET","MenuItem"],"mappings":";;;;;;;;;AAoCA,MAAMA,IAAmB,CACrBC,MAEA,OAAQA,EAAgC,UAAY,OAAe,OAAOA,EAAS,OAAS,KAC1FC,IAAyB,CAC3BD,MAEA,OAAQA,EAAsC,UAAY,OAAeA,EAAS,SAAS,UAEzFE,IAAY,CAACC,GAAmBC,MAA0B;AAC5D,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAkBH,KAAgB,EAAK,GACvE,CAACI,GAAcC,CAAe,IAAIF,EAAuB;AAAA,IAC3D,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,EAAA,CACjB;AAED,SAAAG,EAAU,MAAM;AACZ,IAAIP,KAKAM,EAAgB;AAAA,MACZ,mCAJqBE,GAAA,EAAO,MAAK,SAAQ,MAAMN,IAAc,OAAO,OAAO;AAAA,MAK3E,aAAAA;AAAA,MACA,cAPiB,MAAMC,EAAe,CAACD,CAAW;AAAA,IAOlD,CACH;AAAA,EAET,GAAG,CAACF,GAAUE,CAAW,CAAC,GAEnBG;AACX,GAKaI,IAAe,CAAC,EAAE,UAAAZ,GAAU,MAAAa,GAAM,OAAAC,GAAO,YAAAC,GAAY,SAAAC,QAA6C;AAC3G,QAAMC,IAAMC,EAA6B,IAAI,GACvCd,IAAeH,EAAuBD,CAAQ,IAAIA,EAAS,eAAe,IAC1E;AAAA,IACF,iBAAAmB,IAAkB;AAAA,IAClB,aAAAd,IAAc;AAAA,IACd,cAAAe,IAAe;AAAA,EAAA,IACflB,EAAUD,EAAuBD,CAAQ,GAAGI,CAAY,GAEtD,EAAE,eAAAiB,MAAkBC;AAAA,IACtB;AAAA,MACI,GAAGT;AAAA,MACH,UAAU,MAAM;AACZ,QAAId,EAAiBC,CAAQ,KACzBA,EAAS,QAAA,GAETC,EAAuBD,CAAQ,MAC/BoB,KAAA,QAAAA,KACApB,EAAS,QAAgB,CAACK,CAAY;AAAA,MAE9C;AAAA,MACA,aAAYL,KAAA,gBAAAA,EAAU,aAAY;AAAA,MAClC,cAAc,QAAOA,KAAA,gBAAAA,EAAU,UAAU,WAAWA,KAAA,gBAAAA,EAAU,QAAQ;AAAA,IAAA;AAAA,IAE1Ec;AAAA,IACAG;AAAA,EAAA,GAEE,EAAE,OAAAM,GAAO,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,oBAAAC,MAAuB7B,GAC5E,EAAE,gBAAA8B,GAAgB,YAAAC,EAAA,IAAeC,EAAA;AAEvC,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC,EAAWb,GAAeU,GAAY,EAAE,SAAS,MAAMf,KAAA,gBAAAA,KAAa;AAAA,MACxE,gBAAa;AAAA,MACb,WAAWmB,EAAM;AAAA,QACb;AAAA,QACAP,KAAY;AAAA,QACZE,KAAkBM;AAAA,MAAA,CACrB;AAAA,MACD,KAAAnB;AAAA,MAEA,UAAA,gBAAAgB;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,OAAAd;AAAA,UACA,WAAAC;AAAA,UACA,UAAAC;AAAA,UACA,MAAAC;AAAA,UACA,OAAAC;AAAA,UACA,UAAAC;AAAA,UACA,QAAQb;AAAA,UACR,oBAAAc;AAAA,UACA,iBAAAV;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAP,EAAa,cAAc;"}
+{"version":3,"file":"AriaMenuItem.es.js","sources":["../../../../src/components/ActionMenu/Aria/AriaMenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMenuItem } from '@react-aria/menu';\nimport { mergeProps } from '@react-aria/utils';\nimport { type TreeState } from '@react-stately/tree';\nimport { type Node } from '@react-types/shared';\nimport { type ReactElement, useEffect, useRef, useState } from 'react';\n\nimport { type ActionMenuItemType, type ActionMenuSwitchItemType } from '@components/ActionMenu/ActionMenu';\nimport { type MenuItemType } from '@components/Dropdown';\nimport { MenuItem } from '@components/MenuItem/MenuItem';\nimport { Switch } from '@components/Switch/Switch';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Please use a custom component instead.\n */\nexport type AriaOptionProps = {\n    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType;\n    node: Node<object>;\n    isSelected?: boolean;\n    state: TreeState<object>;\n    /**\n     *  @deprecated Use `menuItem.onClick` instead\n     *  */\n    onClick?: () => void;\n};\n\ninterface SwitchObject {\n    switchComponent: ReactElement | undefined;\n    switchValue: boolean | null;\n    toggleSwitch: VoidFunction | null;\n}\n\nconst isActionMenuItem = (\n    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType,\n): menuItem is ActionMenuItemType =>\n    typeof (menuItem as ActionMenuItemType).onClick !== 'undefined' && typeof menuItem.type === 'undefined';\nconst isActionMenuSwitchItem = (\n    menuItem: MenuItemType | ActionMenuItemType | ActionMenuSwitchItemType,\n): menuItem is ActionMenuSwitchItemType =>\n    typeof (menuItem as ActionMenuSwitchItemType).onClick !== 'undefined' && menuItem.type === 'switch';\n\nconst useSwitch = (isSwitch: boolean, initialValue: boolean) => {\n    const [switchValue, setSwitchValue] = useState<boolean>(initialValue ?? false);\n    const [switchObject, setSwitchObject] = useState<SwitchObject>({\n        switchComponent: undefined,\n        switchValue: null,\n        toggleSwitch: null,\n    });\n\n    useEffect(() => {\n        if (isSwitch) {\n            const toggleSwitch = () => setSwitchValue(!switchValue);\n            const switchComponent = <Switch size=\"small\" mode={switchValue ? 'on' : 'off'} />;\n\n            // eslint-disable-next-line @eslint-react/set-state-in-effect\n            setSwitchObject({\n                switchComponent,\n                switchValue,\n                toggleSwitch,\n            });\n        }\n    }, [isSwitch, switchValue]);\n\n    return switchObject;\n};\n\n/**\n * @deprecated Please use a custom component instead.\n */\nexport const AriaMenuItem = ({ menuItem, node, state, isSelected, onClick }: AriaOptionProps): ReactElement => {\n    const ref = useRef<HTMLLIElement | null>(null);\n    const initialValue = isActionMenuSwitchItem(menuItem) ? menuItem.initialValue : false;\n    const {\n        switchComponent = undefined,\n        switchValue = null,\n        toggleSwitch = null,\n    } = useSwitch(isActionMenuSwitchItem(menuItem), initialValue);\n\n    const { menuItemProps } = useMenuItem(\n        {\n            ...node,\n            onAction: () => {\n                if (isActionMenuItem(menuItem)) {\n                    menuItem.onClick();\n                }\n                if (isActionMenuSwitchItem(menuItem)) {\n                    toggleSwitch?.();\n                    menuItem.onClick(Boolean(!switchValue));\n                }\n            },\n            isDisabled: menuItem?.disabled || false,\n            'aria-label': typeof menuItem?.title === 'string' ? menuItem?.title : 'Menu item',\n        },\n        state,\n        ref,\n    );\n    const { title, decorator, subtitle, size, style, disabled, selectionIndicator } = menuItem;\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <li\n            {...mergeProps(menuItemProps, focusProps, { onClick: () => onClick?.() })}\n            data-test-id=\"menu-item\"\n            className={merge([\n                'tw-relative hover:tw-bg-box-neutral-hover tw-list-none tw-outline-none',\n                disabled && 'tw-pointer-events-none tw-top-px',\n                isFocusVisible && FOCUS_STYLE_INSET,\n            ])}\n            ref={ref}\n        >\n            <MenuItem\n                title={title}\n                decorator={decorator}\n                subtitle={subtitle}\n                size={size}\n                style={style}\n                disabled={disabled}\n                active={isSelected}\n                selectionIndicator={selectionIndicator}\n                switchComponent={switchComponent}\n            />\n        </li>\n    );\n};\nAriaMenuItem.displayName = 'FondueAriaMenuItem';\n"],"names":["isActionMenuItem","menuItem","isActionMenuSwitchItem","useSwitch","isSwitch","initialValue","switchValue","setSwitchValue","useState","switchObject","setSwitchObject","useEffect","Switch","AriaMenuItem","node","state","isSelected","onClick","ref","useRef","switchComponent","toggleSwitch","menuItemProps","useMenuItem","title","decorator","subtitle","size","style","disabled","selectionIndicator","isFocusVisible","focusProps","useFocusRing","jsx","mergeProps","merge","FOCUS_STYLE_INSET","MenuItem"],"mappings":";;;;;;;;;AAoCA,MAAMA,IAAmB,CACrBC,MAEA,OAAQA,EAAgC,UAAY,OAAe,OAAOA,EAAS,OAAS,KAC1FC,IAAyB,CAC3BD,MAEA,OAAQA,EAAsC,UAAY,OAAeA,EAAS,SAAS,UAEzFE,IAAY,CAACC,GAAmBC,MAA0B;AAC5D,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAkBH,KAAgB,EAAK,GACvE,CAACI,GAAcC,CAAe,IAAIF,EAAuB;AAAA,IAC3D,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,cAAc;AAAA,EAAA,CACjB;AAED,SAAAG,EAAU,MAAM;AACZ,IAAIP,KAKAM,EAAgB;AAAA,MACZ,mCAJqBE,GAAA,EAAO,MAAK,SAAQ,MAAMN,IAAc,OAAO,OAAO;AAAA,MAK3E,aAAAA;AAAA,MACA,cAPiB,MAAMC,EAAe,CAACD,CAAW;AAAA,IAOlD,CACH;AAAA,EAET,GAAG,CAACF,GAAUE,CAAW,CAAC,GAEnBG;AACX,GAKaI,IAAe,CAAC,EAAE,UAAAZ,GAAU,MAAAa,GAAM,OAAAC,GAAO,YAAAC,GAAY,SAAAC,QAA6C;AAC3G,QAAMC,IAAMC,EAA6B,IAAI,GACvCd,IAAeH,EAAuBD,CAAQ,IAAIA,EAAS,eAAe,IAC1E;AAAA,IACF,iBAAAmB,IAAkB;AAAA,IAClB,aAAAd,IAAc;AAAA,IACd,cAAAe,IAAe;AAAA,EAAA,IACflB,EAAUD,EAAuBD,CAAQ,GAAGI,CAAY,GAEtD,EAAE,eAAAiB,MAAkBC;AAAA,IACtB;AAAA,MACI,GAAGT;AAAA,MACH,UAAU,MAAM;AACZ,QAAId,EAAiBC,CAAQ,KACzBA,EAAS,QAAA,GAETC,EAAuBD,CAAQ,MAC/BoB,KAAA,QAAAA,KACApB,EAAS,QAAgB,CAACK,CAAY;AAAA,MAE9C;AAAA,MACA,aAAYL,KAAA,gBAAAA,EAAU,aAAY;AAAA,MAClC,cAAc,QAAOA,KAAA,gBAAAA,EAAU,UAAU,WAAWA,KAAA,gBAAAA,EAAU,QAAQ;AAAA,IAAA;AAAA,IAE1Ec;AAAA,IACAG;AAAA,EAAA,GAEE,EAAE,OAAAM,GAAO,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,oBAAAC,MAAuB7B,GAC5E,EAAE,gBAAA8B,GAAgB,YAAAC,EAAA,IAAeC,EAAA;AAEvC,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGC,EAAWb,GAAeU,GAAY,EAAE,SAAS,MAAMf,KAAA,gBAAAA,KAAa;AAAA,MACxE,gBAAa;AAAA,MACb,WAAWmB,EAAM;AAAA,QACb;AAAA,QACAP,KAAY;AAAA,QACZE,KAAkBM;AAAA,MAAA,CACrB;AAAA,MACD,KAAAnB;AAAA,MAEA,UAAA,gBAAAgB;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,OAAAd;AAAA,UACA,WAAAC;AAAA,UACA,UAAAC;AAAA,UACA,MAAAC;AAAA,UACA,OAAAC;AAAA,UACA,UAAAC;AAAA,UACA,QAAQb;AAAA,UACR,oBAAAc;AAAA,UACA,iBAAAV;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAP,EAAa,cAAc;"}

package/dist/components/Breadcrumbs/BreadcrumbItem.es.js

@@ -51,8 +51,7 @@ const T = () => /* @__PURE__ */ r(
       ]),
       "data-test-id": `${d}-item`,
       children: [
-        l ?? // eslint-disable-next-line react-hooks/static-components
-        /* @__PURE__ */ a(t, { ref: n, ...h, className: g, children: [
+        l ?? /* @__PURE__ */ a(t, { ref: n, ...h, className: g, children: [
           p,
           s
         ] }),

package/dist/components/Breadcrumbs/BreadcrumbItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { type ReactElement, useRef } from 'react';\n\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type Breadcrumb } from './Breadcrumbs';\n\nconst Separator = () => (\n    <svg\n        aria-hidden=\"true\"\n        width=\"13\"\n        height=\"17\"\n        viewBox=\"0 0 13 17\"\n        fill=\"none\"\n        className=\"tw-stroke-current tw-text-black-20\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <line x1=\"3.52447\" y1=\"16.0623\" x2=\"8.46874\" y2=\"0.845385\" />\n    </svg>\n);\n\n/*\n * @deprecated This type is deprecated and will be removed in the next major version.\n */\ntype BreadcrumbItemProps = Pick<Breadcrumb, 'label' | 'link' | 'onClick' | 'decorator'> & {\n    showSeparator: boolean;\n    children?: ReactElement;\n    'data-test-id'?: string;\n};\n\n/**\n * @deprecated This component is deprecated and will be removed in the next major version.\n */\nexport const BreadcrumbItem = ({\n    decorator,\n    label,\n    link,\n    onClick,\n    showSeparator,\n    children,\n    'data-test-id': dataTestId = 'breadcrumb',\n}: BreadcrumbItemProps): ReactElement => {\n    const ref = useRef(null);\n\n    const Element = getItemElementType(link, onClick);\n    const isInteractive = Element !== 'span';\n\n    const { itemProps } = useBreadcrumbItem(\n        {\n            isCurrent: false,\n            children: label,\n            elementType: Element,\n        },\n        ref,\n    );\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const elementTypeProps = {\n        a: { href: link },\n        button: { onClick, type: 'button' as const },\n        span: { tabIndex: -1 },\n    };\n    const props = isInteractive\n        ? mergeProps(itemProps, focusProps, elementTypeProps[Element])\n        : elementTypeProps[Element];\n\n    const classNames = merge([\n        'tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-rounded',\n        isInteractive && isFocusVisible && FOCUS_STYLE_NO_OFFSET,\n    ]);\n\n    return (\n        <li\n            className={merge([\n                'tw-flex tw-items-center tw-text-text-weak tw-text-xs tw-transition-colors',\n                isInteractive && 'hover:tw-text-text',\n            ])}\n            data-test-id={`${dataTestId}-item`}\n        >\n            {children ?? (\n                // eslint-disable-next-line react-hooks/static-components\n                <Element ref={ref} {...props} className={classNames}>\n                    {decorator}\n                    {label}\n                </Element>\n            )}\n            {showSeparator && <Separator />}\n        </li>\n    );\n};\nBreadcrumbItem.displayName = 'FondueBreadcrumbItem';\n"],"names":["Separator","jsx","BreadcrumbItem","decorator","label","link","onClick","showSeparator","children","dataTestId","ref","useRef","Element","getItemElementType","isInteractive","itemProps","useBreadcrumbItem","isFocusVisible","focusProps","useFocusRing","elementTypeProps","props","mergeProps","classNames","merge","FOCUS_STYLE_NO_OFFSET","jsxs"],"mappings":";;;;;;;;AAaA,MAAMA,IAAY,MACd,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,OAAM;AAAA,IAEN,UAAA,gBAAAA,EAAC,UAAK,IAAG,WAAU,IAAG,WAAU,IAAG,WAAU,IAAG,WAAA,CAAW;AAAA,EAAA;AAC/D,GAeSC,IAAiB,CAAC;AAAA,EAC3B,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAyC;AACrC,QAAMC,IAAMC,EAAO,IAAI,GAEjBC,IAAUC,EAAmBR,GAAMC,CAAO,GAC1CQ,IAAgBF,MAAY,QAE5B,EAAE,WAAAG,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUZ;AAAA,MACV,aAAaQ;AAAA,IAAA;AAAA,IAEjBF;AAAA,EAAA,GAGE,EAAE,gBAAAO,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GAEjCC,IAAmB;AAAA,IACrB,GAAG,EAAE,MAAMf,EAAA;AAAA,IACX,QAAQ,EAAE,SAAAC,GAAS,MAAM,SAAA;AAAA,IACzB,MAAM,EAAE,UAAU,GAAA;AAAA,EAAG,GAEnBe,IAAQP,IACRQ,EAAWP,GAAWG,GAAYE,EAAiBR,CAAO,CAAC,IAC3DQ,EAAiBR,CAAO,GAExBW,IAAaC,EAAM;AAAA,IACrB;AAAA,IACAV,KAAiBG,KAAkBQ;AAAA,EAAA,CACtC;AAED,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWF,EAAM;AAAA,QACb;AAAA,QACAV,KAAiB;AAAA,MAAA,CACpB;AAAA,MACD,gBAAc,GAAGL,CAAU;AAAA,MAE1B,UAAA;AAAA,QAAAD;AAAA,0BAEII,GAAA,EAAQ,KAAAF,GAAW,GAAGW,GAAO,WAAWE,GACpC,UAAA;AAAA,UAAApB;AAAA,UACAC;AAAA,QAAA,GACL;AAAA,QAEHG,uBAAkBP,GAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzC;AACAE,EAAe,cAAc;"}
+{"version":3,"file":"BreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { type ReactElement, useRef } from 'react';\n\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type Breadcrumb } from './Breadcrumbs';\n\nconst Separator = () => (\n    <svg\n        aria-hidden=\"true\"\n        width=\"13\"\n        height=\"17\"\n        viewBox=\"0 0 13 17\"\n        fill=\"none\"\n        className=\"tw-stroke-current tw-text-black-20\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <line x1=\"3.52447\" y1=\"16.0623\" x2=\"8.46874\" y2=\"0.845385\" />\n    </svg>\n);\n\n/*\n * @deprecated This type is deprecated and will be removed in the next major version.\n */\ntype BreadcrumbItemProps = Pick<Breadcrumb, 'label' | 'link' | 'onClick' | 'decorator'> & {\n    showSeparator: boolean;\n    children?: ReactElement;\n    'data-test-id'?: string;\n};\n\n/**\n * @deprecated This component is deprecated and will be removed in the next major version.\n */\nexport const BreadcrumbItem = ({\n    decorator,\n    label,\n    link,\n    onClick,\n    showSeparator,\n    children,\n    'data-test-id': dataTestId = 'breadcrumb',\n}: BreadcrumbItemProps): ReactElement => {\n    const ref = useRef(null);\n\n    const Element = getItemElementType(link, onClick);\n    const isInteractive = Element !== 'span';\n\n    const { itemProps } = useBreadcrumbItem(\n        {\n            isCurrent: false,\n            children: label,\n            elementType: Element,\n        },\n        ref,\n    );\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const elementTypeProps = {\n        a: { href: link },\n        button: { onClick, type: 'button' as const },\n        span: { tabIndex: -1 },\n    };\n    const props = isInteractive\n        ? mergeProps(itemProps, focusProps, elementTypeProps[Element])\n        : elementTypeProps[Element];\n\n    const classNames = merge([\n        'tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-rounded',\n        isInteractive && isFocusVisible && FOCUS_STYLE_NO_OFFSET,\n    ]);\n\n    return (\n        <li\n            className={merge([\n                'tw-flex tw-items-center tw-text-text-weak tw-text-xs tw-transition-colors',\n                isInteractive && 'hover:tw-text-text',\n            ])}\n            data-test-id={`${dataTestId}-item`}\n        >\n            {children ?? (\n                <Element ref={ref} {...props} className={classNames}>\n                    {decorator}\n                    {label}\n                </Element>\n            )}\n            {showSeparator && <Separator />}\n        </li>\n    );\n};\nBreadcrumbItem.displayName = 'FondueBreadcrumbItem';\n"],"names":["Separator","jsx","BreadcrumbItem","decorator","label","link","onClick","showSeparator","children","dataTestId","ref","useRef","Element","getItemElementType","isInteractive","itemProps","useBreadcrumbItem","isFocusVisible","focusProps","useFocusRing","elementTypeProps","props","mergeProps","classNames","merge","FOCUS_STYLE_NO_OFFSET","jsxs"],"mappings":";;;;;;;;AAaA,MAAMA,IAAY,MACd,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,OAAM;AAAA,IAEN,UAAA,gBAAAA,EAAC,UAAK,IAAG,WAAU,IAAG,WAAU,IAAG,WAAU,IAAG,WAAA,CAAW;AAAA,EAAA;AAC/D,GAeSC,IAAiB,CAAC;AAAA,EAC3B,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAyC;AACrC,QAAMC,IAAMC,EAAO,IAAI,GAEjBC,IAAUC,EAAmBR,GAAMC,CAAO,GAC1CQ,IAAgBF,MAAY,QAE5B,EAAE,WAAAG,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUZ;AAAA,MACV,aAAaQ;AAAA,IAAA;AAAA,IAEjBF;AAAA,EAAA,GAGE,EAAE,gBAAAO,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GAEjCC,IAAmB;AAAA,IACrB,GAAG,EAAE,MAAMf,EAAA;AAAA,IACX,QAAQ,EAAE,SAAAC,GAAS,MAAM,SAAA;AAAA,IACzB,MAAM,EAAE,UAAU,GAAA;AAAA,EAAG,GAEnBe,IAAQP,IACRQ,EAAWP,GAAWG,GAAYE,EAAiBR,CAAO,CAAC,IAC3DQ,EAAiBR,CAAO,GAExBW,IAAaC,EAAM;AAAA,IACrB;AAAA,IACAV,KAAiBG,KAAkBQ;AAAA,EAAA,CACtC;AAED,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWF,EAAM;AAAA,QACb;AAAA,QACAV,KAAiB;AAAA,MAAA,CACpB;AAAA,MACD,gBAAc,GAAGL,CAAU;AAAA,MAE1B,UAAA;AAAA,QAAAD,uBACII,GAAA,EAAQ,KAAAF,GAAW,GAAGW,GAAO,WAAWE,GACpC,UAAA;AAAA,UAAApB;AAAA,UACAC;AAAA,QAAA,GACL;AAAA,QAEHG,uBAAkBP,GAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzC;AACAE,EAAe,cAAc;"}

package/dist/components/Breadcrumbs/CurrentBreadcrumbItem.es.js

@@ -1,8 +1,8 @@
-import { jsxs as c } from "react/jsx-runtime";
-import { useRef as E, createElement as I } from "react";
+import { jsxs as c, jsx as I } from "react/jsx-runtime";
 import { useBreadcrumbItem as N } from "@react-aria/breadcrumbs";
 import { useFocusRing as T } from "@react-aria/focus";
 import { mergeProps as B } from "@react-aria/utils";
+import { useRef as E } from "react";
 import { Badge as P } from "../Badge/Badge.es.js";
 import { getItemElementType as C } from "../../utilities/elements.es.js";
 import { FOCUS_STYLE_NO_OFFSET as O } from "../../utilities/focusStyle.es.js";
@@ -11,13 +11,13 @@ const S = ({
   label: r,
   badges: e,
   bold: u,
-  decorator: l,
+  decorator: d,
   link: m,
   onClick: o,
   activeInline: s,
-  "data-test-id": w = "breadcrumb"
+  "data-test-id": l = "breadcrumb"
 }) => {
-  const n = E(null), t = C(m, o), i = t !== "span", { itemProps: d } = N(
+  const n = E(null), t = C(m, o), i = t !== "span", { itemProps: w } = N(
     {
       isCurrent: !0,
       children: r,
@@ -28,7 +28,7 @@ const S = ({
     a: { href: m },
     button: { onClick: o, type: "button" },
     span: { tabIndex: -1 }
-  }, { isFocusVisible: f, focusProps: x } = T(), b = i ? B(d, x, p[t]) : p[t], h = a([
+  }, { isFocusVisible: f, focusProps: x } = T(), b = i ? B(w, x, p[t]) : p[t], h = a([
     "tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-font-medium tw-rounded",
     u && "tw-font-bold",
     s && "tw-text-xs",
@@ -41,13 +41,13 @@ const S = ({
         "tw-align-middle tw-gap-x-1 tw-text-m tw-text-text tw-items-center",
         s ? "tw-flex tw-items-center" : "tw-w-full tw-inline-flex"
       ]),
-      "data-test-id": `${w}-item`,
+      "data-test-id": `${l}-item`,
       children: [
         /* @__PURE__ */ c(t, { ref: n, ...b, className: h, children: [
-          l,
+          d,
           r
         ] }),
-        e == null ? void 0 : e.map(({ children: g, ...y }, F) => /* @__PURE__ */ I(P, { ...y, key: `breadcrumb-badge-${F}` }, g))
+        e == null ? void 0 : e.map(({ children: g, ...F }, y) => /* @__PURE__ */ I(P, { ...F, children: g }, `breadcrumb-badge-${y}`))
       ]
     }
   );

package/dist/components/Breadcrumbs/CurrentBreadcrumbItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurrentBreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/CurrentBreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { type ReactElement, useRef } from 'react';\n\nimport { Badge } from '@components/Badge/Badge';\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type Breadcrumb } from './Breadcrumbs';\n\ntype CurrentBreadcrumbItemProps = Breadcrumb;\n\n/**\n * @deprecated This component is deprecated and will be removed in the next major version.\n */\nexport const CurrentBreadcrumbItem = ({\n    label,\n    badges,\n    bold,\n    decorator,\n    link,\n    onClick,\n    activeInline,\n    'data-test-id': dataTestId = 'breadcrumb',\n}: CurrentBreadcrumbItemProps): ReactElement => {\n    const ref = useRef(null);\n    const Element = getItemElementType(link, onClick);\n    const isInteractive = Element !== 'span';\n    const { itemProps } = useBreadcrumbItem(\n        {\n            isCurrent: true,\n            children: label,\n            elementType: Element,\n        },\n        ref,\n    );\n\n    const elementTypeProps = {\n        a: { href: link },\n        button: { onClick, type: 'button' as const },\n        span: { tabIndex: -1 },\n    };\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const props = isInteractive\n        ? mergeProps(itemProps, focusProps, elementTypeProps[Element])\n        : elementTypeProps[Element];\n\n    const classNames = merge([\n        'tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-font-medium tw-rounded',\n        bold && 'tw-font-bold',\n        activeInline && 'tw-text-xs',\n        isInteractive && isFocusVisible && FOCUS_STYLE_NO_OFFSET,\n    ]);\n\n    return (\n        <li\n            className={merge([\n                'tw-align-middle tw-gap-x-1 tw-text-m tw-text-text tw-items-center',\n                activeInline ? 'tw-flex tw-items-center' : 'tw-w-full tw-inline-flex',\n            ])}\n            data-test-id={`${dataTestId}-item`}\n        >\n            {/* eslint-disable-next-line react-hooks/static-components */}\n            <Element ref={ref} {...props} className={classNames}>\n                {decorator}\n                {label}\n            </Element>\n            {badges?.map(({ children: badge, ...props }, index) => (\n                <Badge {...props} key={`breadcrumb-badge-${index}`}>\n                    {badge}\n                </Badge>\n            ))}\n        </li>\n    );\n};\nCurrentBreadcrumbItem.displayName = 'FondueCurrentBreadcrumbItem';\n"],"names":["CurrentBreadcrumbItem","label","badges","bold","decorator","link","onClick","activeInline","dataTestId","ref","useRef","Element","getItemElementType","isInteractive","itemProps","useBreadcrumbItem","elementTypeProps","isFocusVisible","focusProps","useFocusRing","props","mergeProps","classNames","merge","FOCUS_STYLE_NO_OFFSET","jsxs","badge","index","createElement","Badge"],"mappings":";;;;;;;;;AAmBO,MAAMA,IAAwB,CAAC;AAAA,EAClC,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAgD;AAC5C,QAAMC,IAAMC,EAAO,IAAI,GACjBC,IAAUC,EAAmBP,GAAMC,CAAO,GAC1CO,IAAgBF,MAAY,QAC5B,EAAE,WAAAG,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUd;AAAA,MACV,aAAaU;AAAA,IAAA;AAAA,IAEjBF;AAAA,EAAA,GAGEO,IAAmB;AAAA,IACrB,GAAG,EAAE,MAAMX,EAAA;AAAA,IACX,QAAQ,EAAE,SAAAC,GAAS,MAAM,SAAA;AAAA,IACzB,MAAM,EAAE,UAAU,GAAA;AAAA,EAAG,GAGnB,EAAE,gBAAAW,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GACjCC,IAAQP,IACRQ,EAAWP,GAAWI,GAAYF,EAAiBL,CAAO,CAAC,IAC3DK,EAAiBL,CAAO,GAExBW,IAAaC,EAAM;AAAA,IACrB;AAAA,IACApB,KAAQ;AAAA,IACRI,KAAgB;AAAA,IAChBM,KAAiBI,KAAkBO;AAAA,EAAA,CACtC;AAED,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWF,EAAM;AAAA,QACb;AAAA,QACAhB,IAAe,4BAA4B;AAAA,MAAA,CAC9C;AAAA,MACD,gBAAc,GAAGC,CAAU;AAAA,MAG3B,UAAA;AAAA,QAAA,gBAAAiB,EAACd,GAAA,EAAQ,KAAAF,GAAW,GAAGW,GAAO,WAAWE,GACpC,UAAA;AAAA,UAAAlB;AAAA,UACAH;AAAA,QAAA,GACL;AAAA,QACCC,KAAA,gBAAAA,EAAQ,IAAI,CAAC,EAAE,UAAUwB,GAAO,GAAGN,EAAAA,GAASO,MACzC,gBAAAC,EAACC,GAAA,EAAO,GAAGT,GAAO,KAAK,oBAAoBO,CAAK,GAAA,GAC3CD,CACL;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGb;AACA1B,EAAsB,cAAc;"}
+{"version":3,"file":"CurrentBreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/CurrentBreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { type ReactElement, useRef } from 'react';\n\nimport { Badge } from '@components/Badge/Badge';\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { type Breadcrumb } from './Breadcrumbs';\n\ntype CurrentBreadcrumbItemProps = Breadcrumb;\n\n/**\n * @deprecated This component is deprecated and will be removed in the next major version.\n */\nexport const CurrentBreadcrumbItem = ({\n    label,\n    badges,\n    bold,\n    decorator,\n    link,\n    onClick,\n    activeInline,\n    'data-test-id': dataTestId = 'breadcrumb',\n}: CurrentBreadcrumbItemProps): ReactElement => {\n    const ref = useRef(null);\n    const Element = getItemElementType(link, onClick);\n    const isInteractive = Element !== 'span';\n    const { itemProps } = useBreadcrumbItem(\n        {\n            isCurrent: true,\n            children: label,\n            elementType: Element,\n        },\n        ref,\n    );\n\n    const elementTypeProps = {\n        a: { href: link },\n        button: { onClick, type: 'button' as const },\n        span: { tabIndex: -1 },\n    };\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const props = isInteractive\n        ? mergeProps(itemProps, focusProps, elementTypeProps[Element])\n        : elementTypeProps[Element];\n\n    const classNames = merge([\n        'tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-font-medium tw-rounded',\n        bold && 'tw-font-bold',\n        activeInline && 'tw-text-xs',\n        isInteractive && isFocusVisible && FOCUS_STYLE_NO_OFFSET,\n    ]);\n\n    return (\n        <li\n            className={merge([\n                'tw-align-middle tw-gap-x-1 tw-text-m tw-text-text tw-items-center',\n                activeInline ? 'tw-flex tw-items-center' : 'tw-w-full tw-inline-flex',\n            ])}\n            data-test-id={`${dataTestId}-item`}\n        >\n            <Element ref={ref} {...props} className={classNames}>\n                {decorator}\n                {label}\n            </Element>\n            {badges?.map(({ children: badge, ...props }, index) => (\n                <Badge key={`breadcrumb-badge-${index}`} {...props}>\n                    {badge}\n                </Badge>\n            ))}\n        </li>\n    );\n};\nCurrentBreadcrumbItem.displayName = 'FondueCurrentBreadcrumbItem';\n"],"names":["CurrentBreadcrumbItem","label","badges","bold","decorator","link","onClick","activeInline","dataTestId","ref","useRef","Element","getItemElementType","isInteractive","itemProps","useBreadcrumbItem","elementTypeProps","isFocusVisible","focusProps","useFocusRing","props","mergeProps","classNames","merge","FOCUS_STYLE_NO_OFFSET","jsxs","badge","index","jsx","Badge"],"mappings":";;;;;;;;;AAmBO,MAAMA,IAAwB,CAAC;AAAA,EAClC,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAgD;AAC5C,QAAMC,IAAMC,EAAO,IAAI,GACjBC,IAAUC,EAAmBP,GAAMC,CAAO,GAC1CO,IAAgBF,MAAY,QAC5B,EAAE,WAAAG,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUd;AAAA,MACV,aAAaU;AAAA,IAAA;AAAA,IAEjBF;AAAA,EAAA,GAGEO,IAAmB;AAAA,IACrB,GAAG,EAAE,MAAMX,EAAA;AAAA,IACX,QAAQ,EAAE,SAAAC,GAAS,MAAM,SAAA;AAAA,IACzB,MAAM,EAAE,UAAU,GAAA;AAAA,EAAG,GAGnB,EAAE,gBAAAW,GAAgB,YAAAC,EAAA,IAAeC,EAAA,GACjCC,IAAQP,IACRQ,EAAWP,GAAWI,GAAYF,EAAiBL,CAAO,CAAC,IAC3DK,EAAiBL,CAAO,GAExBW,IAAaC,EAAM;AAAA,IACrB;AAAA,IACApB,KAAQ;AAAA,IACRI,KAAgB;AAAA,IAChBM,KAAiBI,KAAkBO;AAAA,EAAA,CACtC;AAED,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWF,EAAM;AAAA,QACb;AAAA,QACAhB,IAAe,4BAA4B;AAAA,MAAA,CAC9C;AAAA,MACD,gBAAc,GAAGC,CAAU;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAiB,EAACd,GAAA,EAAQ,KAAAF,GAAW,GAAGW,GAAO,WAAWE,GACpC,UAAA;AAAA,UAAAlB;AAAA,UACAH;AAAA,QAAA,GACL;AAAA,QACCC,KAAA,gBAAAA,EAAQ,IAAI,CAAC,EAAE,UAAUwB,GAAO,GAAGN,EAAAA,GAASO,MACzC,gBAAAC,EAACC,KAAyC,GAAGT,GACxC,eADO,oBAAoBO,CAAK,EAErC;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGb;AACA3B,EAAsB,cAAc;"}

package/dist/components/Checkbox/Checkbox.es.js

@@ -1,14 +1,14 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import { IconMinus as K, IconCheckMark as Q } from "@frontify/fondue-icons";
-import { useCheckbox as V } from "@react-aria/checkbox";
-import { useFocusRing as Z } from "@react-aria/focus";
-import { mergeProps as q } from "@react-aria/utils";
-import { useToggleState as R } from "@react-stately/toggle";
-import { forwardRef as T, useState as k, useRef as O, useEffect as y, useCallback as ee } from "react";
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { IconMinus as J, IconCheckMark as K } from "@frontify/fondue-icons";
+import { useCheckbox as Q } from "@react-aria/checkbox";
+import { useFocusRing as V } from "@react-aria/focus";
+import { mergeProps as Z } from "@react-aria/utils";
+import { useToggleState as q } from "@react-stately/toggle";
+import { forwardRef as T, useState as b, useRef as O, useEffect as y, useCallback as ee } from "react";
 import { InputLabel as te } from "../InputLabel/InputLabel.es.js";
 import { useMemoizedId as re } from "../../hooks/useMemoizedId.es.js";
 import { FOCUS_STYLE as ne } from "../../utilities/focusStyle.es.js";
-import { merge as s } from "../../utilities/merge.es.js";
+import { merge as o } from "../../utilities/merge.es.js";
 import { useForwardedRef as oe } from "../../utilities/useForwardedRef.es.js";
 var se = /* @__PURE__ */ ((e) => (e.Checked = "Checked", e.Unchecked = "Unchecked", e.Mixed = "Mixed", e))(se || {}), ie = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Weak = "Weak", e.Strong = "Strong", e))(ie || {}), le = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Large = "Large", e.XLarge = "XLarge", e))(le || {});
 const ae = (e) => e === "Checked" || e === "Mixed", E = "tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover", ce = {
@@ -21,136 +21,135 @@ const ae = (e) => e === "Checked" || e === "Mixed", E = "tw-bg-box-selected-stro
   XLarge: "tw-h-8 tw-w-8"
 }, de = ({
   id: e,
-  emphasis: C = "Default",
-  size: L = "Default",
-  disabled: i,
-  required: b,
-  label: o,
-  hideLabel: v,
+  emphasis: v = "Default",
+  size: p = "Default",
+  disabled: s,
+  required: x,
+  label: n,
+  hideLabel: h,
   tooltip: S,
-  helperText: l,
-  "aria-label": M,
+  helperText: i,
+  "aria-label": k,
   value: W,
   groupInputProps: $,
   onChange: U,
-  state: a = "Unchecked",
-  "data-test-id": c = "checkbox"
-}, X) => {
-  const h = re(e), t = oe(X), { focusProps: j } = Z(), z = R({
-    onChange: i ? void 0 : U,
-    isSelected: a === "Checked"
+  state: l = "Unchecked",
+  "data-test-id": a = "checkbox"
+}, R) => {
+  const f = re(e), c = oe(R), { focusProps: X } = V(), j = q({
+    onChange: s ? void 0 : U,
+    isSelected: l === "Checked"
     /* Checked */
-  }), [I, D] = k(), w = O(null), d = O(null), [P, H] = k(!1), [Y, _] = k(!1), N = (n) => {
-    n.key === "Tab" && D(!0);
-  }, F = () => {
-    D(!1);
+  }), [z, C] = b(), w = O(null), d = O(null), [I, P] = b(!1), [H, Y] = b(!1), L = (t) => {
+    t.key === "Tab" && C(!0);
+  }, M = () => {
+    C(!1);
   };
   y(() => {
-    var n, f;
-    return (n = t == null ? void 0 : t.current) == null || n.addEventListener("keyup", N), (f = t == null ? void 0 : t.current) == null || f.addEventListener("blur", F), () => {
-      var m, x;
-      (m = t == null ? void 0 : t.current) == null || m.removeEventListener("keyup", N), (x = t == null ? void 0 : t.current) == null || x.removeEventListener("blur", F);
+    const t = c == null ? void 0 : c.current;
+    return t == null || t.addEventListener("keyup", L), t == null || t.addEventListener("blur", M), () => {
+      t == null || t.removeEventListener("keyup", L), t == null || t.removeEventListener("blur", M);
     };
   }, []);
-  const { inputProps: A } = V(
+  const { inputProps: _ } = Q(
     {
-      isDisabled: i,
-      isRequired: b,
-      isIndeterminate: a === "Mixed",
-      "aria-label": M,
+      isDisabled: s,
+      isRequired: x,
+      isIndeterminate: l === "Mixed",
+      "aria-label": k,
       value: W
     },
-    z,
-    t
-  ), B = {
-    Checked: /* @__PURE__ */ r(Q, { size: L === "XLarge" ? 24 : 16 }),
-    Mixed: /* @__PURE__ */ r(K, {}),
+    j,
+    c
+  ), A = {
+    Checked: /* @__PURE__ */ r(K, { size: p === "XLarge" ? 24 : 16 }),
+    Mixed: /* @__PURE__ */ r(J, {}),
     Unchecked: null
-  }, g = ae(a), G = s([
+  }, m = ae(l), B = o([
     "tw-bg-box-disabled tw-pointer-events-none tw-text-box-disabled-inverse tw-border-line-strong",
-    g && "tw-text-box-disabled-inverse tw-border-line-strong"
-  ]), J = g ? ce[C] : s([
+    m && "tw-text-box-disabled-inverse tw-border-line-strong"
+  ]), G = m ? ce[v] : o([
     "tw-bg-base hover:tw-bg-box-neutral",
-    C === "Strong" ? "tw-border-2 tw-border-box-selected-strong" : "tw-border tw-border-line-xx-strong"
+    v === "Strong" ? "tw-border-2 tw-border-box-selected-strong" : "tw-border tw-border-line-xx-strong"
   ]), u = ee(() => {
-    var n, f, m, x;
-    w.current && H(((n = w.current) == null ? void 0 : n.scrollWidth) > ((f = w.current) == null ? void 0 : f.clientWidth)), d.current && _(
-      ((m = d.current) == null ? void 0 : m.scrollWidth) > ((x = d.current) == null ? void 0 : x.clientWidth)
+    var t, D, N, F;
+    w.current && P(((t = w.current) == null ? void 0 : t.scrollWidth) > ((D = w.current) == null ? void 0 : D.clientWidth)), d.current && Y(
+      ((N = d.current) == null ? void 0 : N.scrollWidth) > ((F = d.current) == null ? void 0 : F.clientWidth)
     );
   }, [w, d]);
   return y(() => {
-    if (!(!o && !l || v))
+    if (!(!n && !i || h))
       return u(), window.removeEventListener("resize", u), window.addEventListener("resize", u), () => {
         window.removeEventListener("resize", u);
       };
-  }, [o, l, v, u]), /* @__PURE__ */ r("div", { className: "tw-gap-1 tw-transition-colors tw-w-full", "data-test-id": c, children: /* @__PURE__ */ r("div", { className: s(["tw-inline-flex tw-flex-row tw-rounded tw-w-full", I ? ne : ""]), children: /* @__PURE__ */ r(
+  }, [n, i, h, u]), /* @__PURE__ */ r("div", { className: "tw-gap-1 tw-transition-colors tw-w-full", "data-test-id": a, children: /* @__PURE__ */ r("div", { className: o(["tw-inline-flex tw-flex-row tw-rounded tw-w-full", z ? ne : ""]), children: /* @__PURE__ */ r(
     te,
     {
-      id: `${h}-label`,
-      disabled: i,
+      id: `${f}-label`,
+      disabled: s,
       clickable: !0,
-      htmlFor: h,
+      htmlFor: f,
       tooltip: S,
-      required: b,
-      bold: g,
-      children: /* @__PURE__ */ p("span", { className: "tw-flex tw-items-center tw-whitespace-nowrap", children: [
-        /* @__PURE__ */ p("span", { className: "tw-inline-flex", children: [
+      required: x,
+      bold: m,
+      children: /* @__PURE__ */ g("span", { className: "tw-flex tw-items-center tw-whitespace-nowrap", children: [
+        /* @__PURE__ */ g("span", { className: "tw-inline-flex", children: [
           /* @__PURE__ */ r(
             "input",
             {
-              ...q($ || A, j),
-              id: h,
-              ref: t,
+              ...Z($ || _, X),
+              id: f,
+              ref: c,
               className: "tw-sr-only",
-              "data-test-id": `${c}-input`,
+              "data-test-id": `${a}-input`,
               role: "checkbox",
-              "aria-checked": a === "Checked",
-              required: b,
-              "aria-label": M,
-              "aria-labelledby": o ? `${h}-label` : void 0
+              "aria-checked": l === "Checked",
+              required: x,
+              "aria-label": k,
+              "aria-labelledby": n ? `${f}-label` : void 0
             }
           ),
           /* @__PURE__ */ r(
             "span",
             {
-              "data-test-id": `${c}-icon-box`,
+              "data-test-id": `${a}-icon-box`,
               "aria-hidden": "true",
-              className: s([
+              className: o([
                 "tw-leading-3 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none",
-                we[L],
-                i ? G : J
+                we[p],
+                s ? B : G
               ]),
-              children: B[a]
+              children: A[l]
             }
           )
         ] }),
-        !v && /* @__PURE__ */ p("span", { className: "tw-inline-flex tw-flex-col tw-min-w-0 tw-ml-1.5", children: [
-          o && /* @__PURE__ */ r(
+        !h && /* @__PURE__ */ g("span", { className: "tw-inline-flex tw-flex-col tw-min-w-0 tw-ml-1.5", children: [
+          n && /* @__PURE__ */ r(
             "span",
             {
               ref: w,
-              "data-test-id": `${c}-label`,
-              className: s([
+              "data-test-id": `${a}-label`,
+              className: o([
                 "tw-text-ellipsis tw-overflow-hidden",
                 "tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white",
-                g && "tw-font-medium"
+                m && "tw-font-medium"
               ]),
-              title: P ? o : void 0,
-              children: o
+              title: I ? n : void 0,
+              children: n
             }
           ),
-          l && /* @__PURE__ */ r(
+          i && /* @__PURE__ */ r(
             "span",
             {
               ref: d,
-              "data-test-id": `${c}-helper-text`,
-              className: s([
+              "data-test-id": `${a}-helper-text`,
+              className: o([
                 "tw-text-ellipsis tw-overflow-hidden",
                 "tw-font-sans tw-text-xs tw-font-normal",
-                i ? "text-disabled" : "tw-text-text-weak"
+                s ? "text-disabled" : "tw-text-text-weak"
               ]),
-              title: Y ? l : void 0,
-              children: l
+              title: H ? i : void 0,
+              children: i
             }
           )
         ] })

package/dist/components/Checkbox/Checkbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@frontify/fondue-icons';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggleState } from '@react-stately/toggle';\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n    type ForwardRefRenderFunction,\n    type HTMLAttributes,\n    type ReactNode,\n} from 'react';\n\nimport { InputLabel, type InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport enum CheckboxState {\n    Checked = 'Checked',\n    Unchecked = 'Unchecked',\n    Mixed = 'Mixed',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport enum CheckboxEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n    Strong = 'Strong',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport enum CheckboxSize {\n    Default = 'Default',\n    Large = 'Large',\n    XLarge = 'XLarge',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport type CheckboxProps = {\n    id?: string;\n    state?: CheckboxState;\n    emphasis?: CheckboxEmphasis;\n    size?: CheckboxSize;\n    disabled?: boolean;\n    required?: boolean;\n    value?: string;\n    onChange?: (isChecked: boolean) => void;\n    label?: string;\n    hideLabel?: boolean;\n    tooltip?: InputLabelTooltipProps;\n    helperText?: string;\n    'aria-label'?: string;\n    groupInputProps?: HTMLAttributes<HTMLElement>;\n    'data-test-id'?: string;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n    return checked === CheckboxState.Checked || checked === CheckboxState.Mixed;\n};\n\nconst emphasisDefaultClasses =\n    'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover';\n\nconst emphasisCheckedClassesMap: Record<CheckboxEmphasis, string> = {\n    [CheckboxEmphasis.Weak]:\n        'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover',\n    [CheckboxEmphasis.Default]: emphasisDefaultClasses,\n    [CheckboxEmphasis.Strong]: emphasisDefaultClasses,\n};\n\nconst sizeClassesMap: Record<CheckboxSize, string> = {\n    [CheckboxSize.Default]: 'tw-h-4 tw-w-4',\n    [CheckboxSize.Large]: 'tw-h-5 tw-w-5',\n    [CheckboxSize.XLarge]: 'tw-h-8 tw-w-8',\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n    {\n        id: propId,\n        emphasis = CheckboxEmphasis.Default,\n        size = CheckboxSize.Default,\n        disabled,\n        required,\n        label,\n        hideLabel,\n        tooltip,\n        helperText,\n        'aria-label': ariaLabel,\n        value,\n        groupInputProps,\n        onChange,\n        state = CheckboxState.Unchecked,\n        'data-test-id': dataTestId = 'checkbox',\n    },\n    ref,\n) => {\n    const id = useMemoizedId(propId);\n    const inputRef = useForwardedRef<HTMLInputElement | null>(ref);\n    const { focusProps } = useFocusRing();\n    const toggleState = useToggleState({\n        onChange: disabled ? undefined : onChange,\n        isSelected: state === CheckboxState.Checked,\n    });\n    const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n    const labelContainer = useRef<HTMLSpanElement>(null);\n    const helperTextContainer = useRef<HTMLSpanElement>(null);\n    const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);\n    const [isHelperTextOverflowing, setIsHelperTextOverflowing] = useState(false);\n\n    const tabFocusListener = (event: KeyboardEvent) => {\n        if (event.key === 'Tab') {\n            setShowFocus(true);\n        }\n    };\n\n    const blurListener = () => {\n        setShowFocus(false);\n    };\n\n    useEffect(() => {\n        inputRef?.current?.addEventListener('keyup', tabFocusListener);\n        inputRef?.current?.addEventListener('blur', blurListener);\n\n        return () => {\n            inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n            inputRef?.current?.removeEventListener('blur', blurListener);\n        };\n    }, []);\n\n    const { inputProps } = useCheckbox(\n        {\n            isDisabled: disabled,\n            isRequired: required,\n            isIndeterminate: state === CheckboxState.Mixed,\n            'aria-label': ariaLabel,\n            value,\n        },\n        toggleState,\n        inputRef,\n    );\n\n    const stateMap: Record<CheckboxState, ReactNode> = {\n        [CheckboxState.Checked]: <IconCheckMark size={size === CheckboxSize.XLarge ? 24 : 16} />,\n        [CheckboxState.Mixed]: <IconMinus />,\n        [CheckboxState.Unchecked]: null,\n    };\n\n    const checkedOrMixed = isCheckedOrMixed(state);\n\n    const disabledClasses = merge([\n        'tw-bg-box-disabled tw-pointer-events-none tw-text-box-disabled-inverse tw-border-line-strong',\n        checkedOrMixed && 'tw-text-box-disabled-inverse tw-border-line-strong',\n    ]);\n\n    const enabledClasses = checkedOrMixed\n        ? emphasisCheckedClassesMap[emphasis]\n        : merge([\n              'tw-bg-base hover:tw-bg-box-neutral',\n              emphasis === CheckboxEmphasis.Strong\n                  ? 'tw-border-2 tw-border-box-selected-strong'\n                  : 'tw-border tw-border-line-xx-strong',\n          ]);\n\n    // eslint-disable-next-line @eslint-react/no-unnecessary-use-callback\n    const checkOverflowing = useCallback(() => {\n        if (labelContainer.current) {\n            setIsLabelOverflowing(labelContainer.current?.scrollWidth > labelContainer.current?.clientWidth);\n        }\n\n        if (helperTextContainer.current) {\n            setIsHelperTextOverflowing(\n                helperTextContainer.current?.scrollWidth > helperTextContainer.current?.clientWidth,\n            );\n        }\n    }, [labelContainer, helperTextContainer]);\n\n    useEffect(() => {\n        if ((!label && !helperText) || hideLabel) {\n            return;\n        }\n        // eslint-disable-next-line react-hooks/set-state-in-effect\n        checkOverflowing();\n\n        window.removeEventListener('resize', checkOverflowing);\n        window.addEventListener('resize', checkOverflowing);\n\n        return () => {\n            window.removeEventListener('resize', checkOverflowing);\n        };\n    }, [label, helperText, hideLabel, checkOverflowing]);\n\n    return (\n        <div className=\"tw-gap-1 tw-transition-colors tw-w-full\" data-test-id={dataTestId}>\n            <div className={merge(['tw-inline-flex tw-flex-row tw-rounded tw-w-full', showFocus ? FOCUS_STYLE : ''])}>\n                <InputLabel\n                    id={`${id}-label`}\n                    disabled={disabled}\n                    clickable\n                    htmlFor={id}\n                    tooltip={tooltip}\n                    required={required}\n                    bold={checkedOrMixed}\n                >\n                    <span className=\"tw-flex tw-items-center tw-whitespace-nowrap\">\n                        <span className=\"tw-inline-flex\">\n                            <input\n                                {...mergeProps(groupInputProps || inputProps, focusProps)}\n                                id={id}\n                                ref={inputRef}\n                                className=\"tw-sr-only\"\n                                data-test-id={`${dataTestId}-input`}\n                                role=\"checkbox\"\n                                aria-checked={state === CheckboxState.Checked}\n                                required={required}\n                                aria-label={ariaLabel}\n                                aria-labelledby={label ? `${id}-label` : undefined}\n                            />\n                            <span\n                                data-test-id={`${dataTestId}-icon-box`}\n                                aria-hidden=\"true\"\n                                className={merge([\n                                    'tw-leading-3 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none',\n                                    sizeClassesMap[size],\n                                    disabled ? disabledClasses : enabledClasses,\n                                ])}\n                            >\n                                {stateMap[state]}\n                            </span>\n                        </span>\n                        {!hideLabel && (\n                            <span className=\"tw-inline-flex tw-flex-col tw-min-w-0 tw-ml-1.5\">\n                                {label && (\n                                    <span\n                                        ref={labelContainer}\n                                        data-test-id={`${dataTestId}-label`}\n                                        className={merge([\n                                            'tw-text-ellipsis tw-overflow-hidden',\n                                            'tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white',\n                                            checkedOrMixed && 'tw-font-medium',\n                                        ])}\n                                        title={isLabelOverflowing ? label : undefined}\n                                    >\n                                        {label}\n                                    </span>\n                                )}\n                                {helperText && (\n                                    <span\n                                        ref={helperTextContainer}\n                                        data-test-id={`${dataTestId}-helper-text`}\n                                        className={merge([\n                                            'tw-text-ellipsis tw-overflow-hidden',\n                                            'tw-font-sans tw-text-xs tw-font-normal',\n                                            disabled ? 'text-disabled' : 'tw-text-text-weak',\n                                        ])}\n                                        title={isHelperTextOverflowing ? helperText : undefined}\n                                    >\n                                        {helperText}\n                                    </span>\n                                )}\n                            </span>\n                        )}\n                    </span>\n                </InputLabel>\n            </div>\n        </div>\n    );\n};\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'FondueCheckbox';\n"],"names":["CheckboxState","CheckboxEmphasis","CheckboxSize","isCheckedOrMixed","checked","emphasisDefaultClasses","emphasisCheckedClassesMap","sizeClassesMap","CheckboxComponent","propId","emphasis","size","disabled","required","label","hideLabel","tooltip","helperText","ariaLabel","value","groupInputProps","onChange","state","dataTestId","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","labelContainer","useRef","helperTextContainer","isLabelOverflowing","setIsLabelOverflowing","isHelperTextOverflowing","setIsHelperTextOverflowing","tabFocusListener","event","blurListener","useEffect","_a","_b","inputProps","useCheckbox","stateMap","jsx","IconCheckMark","IconMinus","checkedOrMixed","disabledClasses","merge","enabledClasses","checkOverflowing","useCallback","_c","_d","FOCUS_STYLE","InputLabel","jsxs","mergeProps","Checkbox","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@frontify/fondue-icons';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { useToggleState } from '@react-stately/toggle';\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n    type ForwardRefRenderFunction,\n    type HTMLAttributes,\n    type ReactNode,\n} from 'react';\n\nimport { InputLabel, type InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport enum CheckboxState {\n    Checked = 'Checked',\n    Unchecked = 'Unchecked',\n    Mixed = 'Mixed',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport enum CheckboxEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n    Strong = 'Strong',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport enum CheckboxSize {\n    Default = 'Default',\n    Large = 'Large',\n    XLarge = 'XLarge',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport type CheckboxProps = {\n    id?: string;\n    state?: CheckboxState;\n    emphasis?: CheckboxEmphasis;\n    size?: CheckboxSize;\n    disabled?: boolean;\n    required?: boolean;\n    value?: string;\n    onChange?: (isChecked: boolean) => void;\n    label?: string;\n    hideLabel?: boolean;\n    tooltip?: InputLabelTooltipProps;\n    helperText?: string;\n    'aria-label'?: string;\n    groupInputProps?: HTMLAttributes<HTMLElement>;\n    'data-test-id'?: string;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n    return checked === CheckboxState.Checked || checked === CheckboxState.Mixed;\n};\n\nconst emphasisDefaultClasses =\n    'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover';\n\nconst emphasisCheckedClassesMap: Record<CheckboxEmphasis, string> = {\n    [CheckboxEmphasis.Weak]:\n        'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover',\n    [CheckboxEmphasis.Default]: emphasisDefaultClasses,\n    [CheckboxEmphasis.Strong]: emphasisDefaultClasses,\n};\n\nconst sizeClassesMap: Record<CheckboxSize, string> = {\n    [CheckboxSize.Default]: 'tw-h-4 tw-w-4',\n    [CheckboxSize.Large]: 'tw-h-5 tw-w-5',\n    [CheckboxSize.XLarge]: 'tw-h-8 tw-w-8',\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n    {\n        id: propId,\n        emphasis = CheckboxEmphasis.Default,\n        size = CheckboxSize.Default,\n        disabled,\n        required,\n        label,\n        hideLabel,\n        tooltip,\n        helperText,\n        'aria-label': ariaLabel,\n        value,\n        groupInputProps,\n        onChange,\n        state = CheckboxState.Unchecked,\n        'data-test-id': dataTestId = 'checkbox',\n    },\n    ref,\n) => {\n    const id = useMemoizedId(propId);\n    const inputRef = useForwardedRef<HTMLInputElement | null>(ref);\n    const { focusProps } = useFocusRing();\n    const toggleState = useToggleState({\n        onChange: disabled ? undefined : onChange,\n        isSelected: state === CheckboxState.Checked,\n    });\n    const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n    const labelContainer = useRef<HTMLSpanElement>(null);\n    const helperTextContainer = useRef<HTMLSpanElement>(null);\n    const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);\n    const [isHelperTextOverflowing, setIsHelperTextOverflowing] = useState(false);\n\n    const tabFocusListener = (event: KeyboardEvent) => {\n        if (event.key === 'Tab') {\n            setShowFocus(true);\n        }\n    };\n\n    const blurListener = () => {\n        setShowFocus(false);\n    };\n\n    useEffect(() => {\n        const node = inputRef?.current;\n        node?.addEventListener('keyup', tabFocusListener);\n        node?.addEventListener('blur', blurListener);\n\n        return () => {\n            node?.removeEventListener('keyup', tabFocusListener);\n            node?.removeEventListener('blur', blurListener);\n        };\n        // eslint-disable-next-line @eslint-react/exhaustive-deps\n    }, []);\n\n    const { inputProps } = useCheckbox(\n        {\n            isDisabled: disabled,\n            isRequired: required,\n            isIndeterminate: state === CheckboxState.Mixed,\n            'aria-label': ariaLabel,\n            value,\n        },\n        toggleState,\n        inputRef,\n    );\n\n    const stateMap: Record<CheckboxState, ReactNode> = {\n        [CheckboxState.Checked]: <IconCheckMark size={size === CheckboxSize.XLarge ? 24 : 16} />,\n        [CheckboxState.Mixed]: <IconMinus />,\n        [CheckboxState.Unchecked]: null,\n    };\n\n    const checkedOrMixed = isCheckedOrMixed(state);\n\n    const disabledClasses = merge([\n        'tw-bg-box-disabled tw-pointer-events-none tw-text-box-disabled-inverse tw-border-line-strong',\n        checkedOrMixed && 'tw-text-box-disabled-inverse tw-border-line-strong',\n    ]);\n\n    const enabledClasses = checkedOrMixed\n        ? emphasisCheckedClassesMap[emphasis]\n        : merge([\n              'tw-bg-base hover:tw-bg-box-neutral',\n              emphasis === CheckboxEmphasis.Strong\n                  ? 'tw-border-2 tw-border-box-selected-strong'\n                  : 'tw-border tw-border-line-xx-strong',\n          ]);\n\n    // eslint-disable-next-line @eslint-react/no-unnecessary-use-callback\n    const checkOverflowing = useCallback(() => {\n        if (labelContainer.current) {\n            setIsLabelOverflowing(labelContainer.current?.scrollWidth > labelContainer.current?.clientWidth);\n        }\n\n        if (helperTextContainer.current) {\n            setIsHelperTextOverflowing(\n                helperTextContainer.current?.scrollWidth > helperTextContainer.current?.clientWidth,\n            );\n        }\n    }, [labelContainer, helperTextContainer]);\n\n    useEffect(() => {\n        if ((!label && !helperText) || hideLabel) {\n            return;\n        }\n        // eslint-disable-next-line @eslint-react/set-state-in-effect\n        checkOverflowing();\n\n        window.removeEventListener('resize', checkOverflowing);\n        window.addEventListener('resize', checkOverflowing);\n\n        return () => {\n            window.removeEventListener('resize', checkOverflowing);\n        };\n    }, [label, helperText, hideLabel, checkOverflowing]);\n\n    return (\n        <div className=\"tw-gap-1 tw-transition-colors tw-w-full\" data-test-id={dataTestId}>\n            <div className={merge(['tw-inline-flex tw-flex-row tw-rounded tw-w-full', showFocus ? FOCUS_STYLE : ''])}>\n                <InputLabel\n                    id={`${id}-label`}\n                    disabled={disabled}\n                    clickable\n                    htmlFor={id}\n                    tooltip={tooltip}\n                    required={required}\n                    bold={checkedOrMixed}\n                >\n                    <span className=\"tw-flex tw-items-center tw-whitespace-nowrap\">\n                        <span className=\"tw-inline-flex\">\n                            <input\n                                {...mergeProps(groupInputProps || inputProps, focusProps)}\n                                id={id}\n                                ref={inputRef}\n                                className=\"tw-sr-only\"\n                                data-test-id={`${dataTestId}-input`}\n                                role=\"checkbox\"\n                                aria-checked={state === CheckboxState.Checked}\n                                required={required}\n                                aria-label={ariaLabel}\n                                aria-labelledby={label ? `${id}-label` : undefined}\n                            />\n                            <span\n                                data-test-id={`${dataTestId}-icon-box`}\n                                aria-hidden=\"true\"\n                                className={merge([\n                                    'tw-leading-3 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none',\n                                    sizeClassesMap[size],\n                                    disabled ? disabledClasses : enabledClasses,\n                                ])}\n                            >\n                                {stateMap[state]}\n                            </span>\n                        </span>\n                        {!hideLabel && (\n                            <span className=\"tw-inline-flex tw-flex-col tw-min-w-0 tw-ml-1.5\">\n                                {label && (\n                                    <span\n                                        ref={labelContainer}\n                                        data-test-id={`${dataTestId}-label`}\n                                        className={merge([\n                                            'tw-text-ellipsis tw-overflow-hidden',\n                                            'tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white',\n                                            checkedOrMixed && 'tw-font-medium',\n                                        ])}\n                                        title={isLabelOverflowing ? label : undefined}\n                                    >\n                                        {label}\n                                    </span>\n                                )}\n                                {helperText && (\n                                    <span\n                                        ref={helperTextContainer}\n                                        data-test-id={`${dataTestId}-helper-text`}\n                                        className={merge([\n                                            'tw-text-ellipsis tw-overflow-hidden',\n                                            'tw-font-sans tw-text-xs tw-font-normal',\n                                            disabled ? 'text-disabled' : 'tw-text-text-weak',\n                                        ])}\n                                        title={isHelperTextOverflowing ? helperText : undefined}\n                                    >\n                                        {helperText}\n                                    </span>\n                                )}\n                            </span>\n                        )}\n                    </span>\n                </InputLabel>\n            </div>\n        </div>\n    );\n};\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}.\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'FondueCheckbox';\n"],"names":["CheckboxState","CheckboxEmphasis","CheckboxSize","isCheckedOrMixed","checked","emphasisDefaultClasses","emphasisCheckedClassesMap","sizeClassesMap","CheckboxComponent","propId","emphasis","size","disabled","required","label","hideLabel","tooltip","helperText","ariaLabel","value","groupInputProps","onChange","state","dataTestId","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","labelContainer","useRef","helperTextContainer","isLabelOverflowing","setIsLabelOverflowing","isHelperTextOverflowing","setIsHelperTextOverflowing","tabFocusListener","event","blurListener","useEffect","node","inputProps","useCheckbox","stateMap","jsx","IconCheckMark","IconMinus","checkedOrMixed","disabledClasses","merge","enabledClasses","checkOverflowing","useCallback","_a","_b","_c","_d","FOCUS_STYLE","InputLabel","jsxs","mergeProps","Checkbox","forwardRef"],"mappings":"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"}

package/dist/components/Checklist/Checklist.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checklist.es.js","sources":["../../../src/components/Checklist/Checklist.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCheckboxGroup, useCheckboxGroupItem } from '@react-aria/checkbox';\nimport { type CheckboxGroupState, useCheckboxGroupState } from '@react-stately/checkbox';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { Checkbox, type CheckboxProps, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n */\nexport enum ChecklistDirection {\n    Horizontal = 'Horizontal',\n    Vertical = 'Vertical',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n */\nexport type Columns = 1 | 2 | 3 | 4;\n\nconst columnsStyle: Record<Columns, string> = {\n    1: 'tw-grid-cols-1',\n    2: 'tw-grid-cols-2',\n    3: 'tw-grid-cols-3',\n    4: 'tw-grid-cols-4',\n};\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n */\nexport type CheckboxValue = Omit<CheckboxProps, 'onChange' | 'groupInputProps' | 'value'> & { value: string };\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n */\nexport type ChecklistBase = {\n    checkboxes: CheckboxValue[];\n    setActiveValues: (value: string[]) => void;\n    activeValues?: string[];\n    ariaLabel?: string;\n    'data-test-id'?: string;\n};\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n */\nexport type ChecklistProps = ChecklistBase & {\n    direction: ChecklistDirection.Vertical | ChecklistDirection.Horizontal;\n    columns?: Columns;\n};\n\ntype ChecklistItemProps = {\n    checkbox: CheckboxValue;\n    state: CheckboxGroupState;\n    forwardedRef?: (ref: HTMLInputElement) => void;\n};\n\nconst ChecklistItem = ({ checkbox, state, forwardedRef }: ChecklistItemProps) => {\n    const ref = useRef<HTMLInputElement | null>(null);\n    const { value, disabled, label, 'aria-label': checkboxAriaLabel, state: checkboxState } = checkbox;\n    const [checkState, setCheckState] = useState(checkboxState);\n    const isSelected = state.isSelected(value);\n    const { inputProps } = useCheckboxGroupItem(\n        { value, isDisabled: disabled, 'aria-label': checkboxAriaLabel || label },\n        state,\n        ref,\n    );\n\n    useEffect(() => {\n        if (checkState === CheckboxState.Mixed && !isSelected) {\n            // eslint-disable-next-line react-hooks/set-state-in-effect\n            setCheckState(CheckboxState.Mixed);\n        } else {\n            setCheckState(isSelected ? CheckboxState.Checked : CheckboxState.Unchecked);\n        }\n    }, [checkState, isSelected]);\n\n    useEffect(() => {\n        if (forwardedRef && ref.current) {\n            forwardedRef(ref.current);\n        }\n    }, [forwardedRef, isSelected]);\n\n    return <Checkbox {...checkbox} state={checkState} groupInputProps={inputProps} ref={ref} />;\n};\n\nconst getLastItemColumnSpan = (items: CheckboxValue[], columns: number) => {\n    if (!columns || columns <= 1) {\n        return '';\n    }\n\n    const gridSpan = 'auto / span';\n    const spanItems = items.length % columns;\n\n    if (spanItems === 0) {\n        return '';\n    }\n\n    return `${gridSpan} ${columns - spanItems + 1}`;\n};\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n */\nexport const Checklist = ({\n    checkboxes,\n    setActiveValues,\n    ariaLabel = 'Checklist',\n    activeValues = [],\n    direction = ChecklistDirection.Horizontal,\n    'data-test-id': dataTestId = 'checklist',\n    ...props\n}: ChecklistProps) => {\n    const checkboxRefs = useRef<(HTMLInputElement | null)[]>(Array.from({ length: checkboxes.length }));\n    const listContainerRef = useRef<HTMLDivElement | null>(null);\n    const state = useCheckboxGroupState({\n        value: activeValues,\n        onChange: setActiveValues,\n    });\n    const { groupProps } = useCheckboxGroup(\n        {\n            'aria-label': ariaLabel,\n        },\n        state,\n    );\n\n    const columns = ('columns' in props && props.columns) || 1;\n\n    useLayoutEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            const focusableElements = checkboxRefs.current.filter((el) => el !== null);\n            const currentIndex = focusableElements.indexOf(document.activeElement as HTMLInputElement);\n            let nextIndex = currentIndex;\n\n            if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n                nextIndex++;\n                if (nextIndex === focusableElements.length) {\n                    nextIndex = 0;\n                }\n                if (focusableElements[nextIndex].disabled) {\n                    nextIndex++;\n                }\n            } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n                nextIndex--;\n                if (nextIndex === -1) {\n                    nextIndex = focusableElements.length - 1;\n                }\n\n                if (focusableElements[nextIndex].disabled) {\n                    nextIndex--;\n                }\n            } else {\n                return;\n            }\n\n            focusableElements[nextIndex].focus();\n\n            const tabEvent = new KeyboardEvent('keyup', {\n                key: 'Tab',\n                code: 'Tab',\n                keyCode: 9,\n                bubbles: true,\n            });\n\n            focusableElements[nextIndex].dispatchEvent(tabEvent);\n        };\n\n        const listElem = listContainerRef.current;\n        listElem?.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            listElem?.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [checkboxes.length]);\n\n    return (\n        <div\n            {...groupProps}\n            data-test-id={dataTestId}\n            className={merge([\n                direction === ChecklistDirection.Horizontal\n                    ? 'tw-flex tw-flex-row tw-gap-12'\n                    : `tw-grid tw-gap-4 ${columnsStyle[columns]}`,\n            ])}\n            ref={listContainerRef}\n        >\n            {/* eslint-disable-next-line react-hooks/refs */}\n            {checkboxes.map((checkbox, index) => (\n                <div\n                    key={checkbox.value}\n                    style={{\n                        maxWidth: listContainerRef?.current?.getBoundingClientRect().width,\n                        gridColumn:\n                            index === checkboxes.length - 1 && direction === ChecklistDirection.Vertical\n                                ? getLastItemColumnSpan(checkboxes, columns)\n                                : undefined,\n                    }}\n                >\n                    <ChecklistItem\n                        checkbox={checkbox}\n                        state={state}\n                        forwardedRef={(el) => (checkboxRefs.current[index] = el)}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\n\n/**\n * @deprecated Use multiple `Checkbox` components from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checklist the migration guide}.\n */\nChecklist.displayName = 'FondueChecklist';\n"],"names":["ChecklistDirection","columnsStyle","ChecklistItem","checkbox","state","forwardedRef","ref","useRef","value","disabled","label","checkboxAriaLabel","checkboxState","checkState","setCheckState","useState","isSelected","inputProps","useCheckboxGroupItem","useEffect","CheckboxState","jsx","Checkbox","getLastItemColumnSpan","items","columns","gridSpan","spanItems","Checklist","checkboxes","setActiveValues","ariaLabel","activeValues","direction","dataTestId","props","checkboxRefs","listContainerRef","useCheckboxGroupState","groupProps","useCheckboxGroup","useLayoutEffect","handleKeyDown","event","focusableElements","el","nextIndex","tabEvent","listElem","merge","index","_a"],"mappings":"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"}
+{"version":3,"file":"Checklist.es.js","sources":["../../../src/components/Checklist/Checklist.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useCheckboxGroup, useCheckboxGroupItem } from '@react-aria/checkbox';\nimport { type CheckboxGroupState, useCheckboxGroupState } from '@react-stately/checkbox';\nimport { useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nimport { Checkbox, type CheckboxProps, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n */\nexport enum ChecklistDirection {\n    Horizontal = 'Horizontal',\n    Vertical = 'Vertical',\n}\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n */\nexport type Columns = 1 | 2 | 3 | 4;\n\nconst columnsStyle: Record<Columns, string> = {\n    1: 'tw-grid-cols-1',\n    2: 'tw-grid-cols-2',\n    3: 'tw-grid-cols-3',\n    4: 'tw-grid-cols-4',\n};\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n */\nexport type CheckboxValue = Omit<CheckboxProps, 'onChange' | 'groupInputProps' | 'value'> & { value: string };\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n */\nexport type ChecklistBase = {\n    checkboxes: CheckboxValue[];\n    setActiveValues: (value: string[]) => void;\n    activeValues?: string[];\n    ariaLabel?: string;\n    'data-test-id'?: string;\n};\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n */\nexport type ChecklistProps = ChecklistBase & {\n    direction: ChecklistDirection.Vertical | ChecklistDirection.Horizontal;\n    columns?: Columns;\n};\n\ntype ChecklistItemProps = {\n    checkbox: CheckboxValue;\n    state: CheckboxGroupState;\n    forwardedRef?: (ref: HTMLInputElement) => void;\n};\n\nconst ChecklistItem = ({ checkbox, state, forwardedRef }: ChecklistItemProps) => {\n    const ref = useRef<HTMLInputElement | null>(null);\n    const { value, disabled, label, 'aria-label': checkboxAriaLabel, state: checkboxState } = checkbox;\n    const [checkState, setCheckState] = useState(checkboxState);\n    const isSelected = state.isSelected(value);\n    const { inputProps } = useCheckboxGroupItem(\n        { value, isDisabled: disabled, 'aria-label': checkboxAriaLabel || label },\n        state,\n        ref,\n    );\n\n    useEffect(() => {\n        if (checkState === CheckboxState.Mixed && !isSelected) {\n            // eslint-disable-next-line @eslint-react/set-state-in-effect\n            setCheckState(CheckboxState.Mixed);\n        } else {\n            setCheckState(isSelected ? CheckboxState.Checked : CheckboxState.Unchecked);\n        }\n    }, [checkState, isSelected]);\n\n    useEffect(() => {\n        if (forwardedRef && ref.current) {\n            forwardedRef(ref.current);\n        }\n    }, [forwardedRef, isSelected]);\n\n    return <Checkbox {...checkbox} state={checkState} groupInputProps={inputProps} ref={ref} />;\n};\n\nconst getLastItemColumnSpan = (items: CheckboxValue[], columns: number) => {\n    if (!columns || columns <= 1) {\n        return '';\n    }\n\n    const gridSpan = 'auto / span';\n    const spanItems = items.length % columns;\n\n    if (spanItems === 0) {\n        return '';\n    }\n\n    return `${gridSpan} ${columns - spanItems + 1}`;\n};\n\n/**\n * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead.\n */\nexport const Checklist = ({\n    checkboxes,\n    setActiveValues,\n    ariaLabel = 'Checklist',\n    activeValues = [],\n    direction = ChecklistDirection.Horizontal,\n    'data-test-id': dataTestId = 'checklist',\n    ...props\n}: ChecklistProps) => {\n    const checkboxRefs = useRef<(HTMLInputElement | null)[]>(Array.from({ length: checkboxes.length }));\n    const listContainerRef = useRef<HTMLDivElement | null>(null);\n    const state = useCheckboxGroupState({\n        value: activeValues,\n        onChange: setActiveValues,\n    });\n    const { groupProps } = useCheckboxGroup(\n        {\n            'aria-label': ariaLabel,\n        },\n        state,\n    );\n\n    const columns = ('columns' in props && props.columns) || 1;\n\n    useLayoutEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            const focusableElements = checkboxRefs.current.filter((el) => el !== null);\n            const currentIndex = focusableElements.indexOf(document.activeElement as HTMLInputElement);\n            let nextIndex = currentIndex;\n\n            if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n                nextIndex++;\n                if (nextIndex === focusableElements.length) {\n                    nextIndex = 0;\n                }\n                if (focusableElements[nextIndex].disabled) {\n                    nextIndex++;\n                }\n            } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n                nextIndex--;\n                if (nextIndex === -1) {\n                    nextIndex = focusableElements.length - 1;\n                }\n\n                if (focusableElements[nextIndex].disabled) {\n                    nextIndex--;\n                }\n            } else {\n                return;\n            }\n\n            focusableElements[nextIndex].focus();\n\n            const tabEvent = new KeyboardEvent('keyup', {\n                key: 'Tab',\n                code: 'Tab',\n                keyCode: 9,\n                bubbles: true,\n            });\n\n            focusableElements[nextIndex].dispatchEvent(tabEvent);\n        };\n\n        const listElem = listContainerRef.current;\n        listElem?.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            listElem?.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [checkboxes.length]);\n\n    return (\n        <div\n            {...groupProps}\n            data-test-id={dataTestId}\n            className={merge([\n                direction === ChecklistDirection.Horizontal\n                    ? 'tw-flex tw-flex-row tw-gap-12'\n                    : `tw-grid tw-gap-4 ${columnsStyle[columns]}`,\n            ])}\n            ref={listContainerRef}\n        >\n            {/* eslint-disable-next-line @eslint-react/refs */}\n            {checkboxes.map((checkbox, index) => (\n                <div\n                    key={checkbox.value}\n                    style={{\n                        maxWidth: listContainerRef?.current?.getBoundingClientRect().width,\n                        gridColumn:\n                            index === checkboxes.length - 1 && direction === ChecklistDirection.Vertical\n                                ? getLastItemColumnSpan(checkboxes, columns)\n                                : undefined,\n                    }}\n                >\n                    <ChecklistItem\n                        checkbox={checkbox}\n                        state={state}\n                        forwardedRef={(el) => (checkboxRefs.current[index] = el)}\n                    />\n                </div>\n            ))}\n        </div>\n    );\n};\n\n/**\n * @deprecated Use multiple `Checkbox` components from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checklist the migration guide}.\n */\nChecklist.displayName = 'FondueChecklist';\n"],"names":["ChecklistDirection","columnsStyle","ChecklistItem","checkbox","state","forwardedRef","ref","useRef","value","disabled","label","checkboxAriaLabel","checkboxState","checkState","setCheckState","useState","isSelected","inputProps","useCheckboxGroupItem","useEffect","CheckboxState","jsx","Checkbox","getLastItemColumnSpan","items","columns","gridSpan","spanItems","Checklist","checkboxes","setActiveValues","ariaLabel","activeValues","direction","dataTestId","props","checkboxRefs","listContainerRef","useCheckboxGroupState","groupProps","useCheckboxGroup","useLayoutEffect","handleKeyDown","event","focusableElements","el","nextIndex","tabEvent","listElem","merge","index","_a"],"mappings":"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"}

package/dist/components/EditableText/EditableText.es.js

@@ -49,7 +49,7 @@ const R = ({
     var t;
     s.current && U(T.copyStyles(s.current)), c === "INPUT" && ((t = f.current) == null || t.select());
   }, [c, f, u]);
-  const s = N(), A = u && // eslint-disable-next-line @eslint-react/no-clone-element, react-hooks/refs
+  const s = N(), A = u && // eslint-disable-next-line @eslint-react/no-clone-element, @eslint-react/refs
   C(u, {
     ref: s
   });