@frontify/fondue 12.0.0-beta.164 → 12.0.0-beta.165

package/dist/components/MenuItem/MenuItem.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, PropsWithChildren } from 'react';
+import { MouseEvent, ReactNode } from 'react';
 import { MenuItemContentProps } from '../MenuItem/MenuItemContent';
 import { MenuItemContentSize, MenuItemStyle, SelectionIndicatorIcon } from './types';
 export type MenuItemProps = {
@@ -11,6 +11,7 @@ export type MenuItemProps = {
     type?: string;
     link?: string;
     onClick?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;
+    children?: ReactNode;
 } & Omit<MenuItemContentProps, 'iconSize'>;
 export declare const menuItemSizeClassMap: Record<MenuItemContentSize, string>;
 export declare enum MenuItemTextColorState {
@@ -20,6 +21,6 @@ export declare enum MenuItemTextColorState {
 }
 export declare const menuItemTextColorRecord: Record<MenuItemStyle, Record<MenuItemTextColorState, string>>;
 export declare const MenuItem: {
-    ({ title, decorator, switchComponent, subtitle, size, style, disabled, active, checked, selectionIndicator, children, link, onClick, }: PropsWithChildren<MenuItemProps>): JSX.Element;
+    ({ title, decorator, switchComponent, subtitle, size, style, disabled, active, checked, selectionIndicator, children, link, onClick, }: MenuItemProps): JSX.Element;
     displayName: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.es.js","sources":["../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { MouseEvent, PropsWithChildren, useEffect, useState } from 'react';\nimport { merge } from '@utilities/merge';\nimport { IconCaretRight, IconCheckMark } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { MenuItemContent, MenuItemContentProps } from '@components/MenuItem/MenuItemContent';\nimport { MenuItemContentSize, MenuItemStyle, SelectionIndicatorIcon } from './types';\nimport { getItemElementType } from '@utilities/elements';\n\nexport type MenuItemProps = {\n    style?: MenuItemStyle;\n    disabled?: boolean;\n    active?: boolean;\n    checked?: boolean;\n    selectionIndicator?: SelectionIndicatorIcon;\n    /** @deprecated this prop is not being used anymore */\n    type?: string;\n    link?: string;\n    onClick?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n} & Omit<MenuItemContentProps, 'iconSize'>;\n\nexport const menuItemSizeClassMap: Record<MenuItemContentSize, string> = {\n    [MenuItemContentSize.XSmall]: 'tw-px-5 tw-py-2 tw-min-h-[36px]',\n    [MenuItemContentSize.Small]: 'tw-px-5 tw-py-2.5 tw-min-h-[36px]',\n    [MenuItemContentSize.Large]: 'tw-px-5 tw-py-3 tw-min-h-[60px]',\n};\n\nexport enum MenuItemTextColorState {\n    Default = 'Default',\n    Active = 'Active',\n    Disabled = 'Disabled',\n}\n\nexport const menuItemTextColorRecord: Record<MenuItemStyle, Record<MenuItemTextColorState, string>> = {\n    [MenuItemStyle.Primary]: {\n        [MenuItemTextColorState.Default]: 'tw-text-text-x-weak',\n        [MenuItemTextColorState.Active]: 'tw-text-text',\n        [MenuItemTextColorState.Disabled]: 'tw-text-text-disabled',\n    },\n    [MenuItemStyle.Danger]: {\n        [MenuItemTextColorState.Default]: 'tw-text-red-60',\n        [MenuItemTextColorState.Active]: 'tw-text-red-70',\n        [MenuItemTextColorState.Disabled]: 'tw-text-red-40',\n    },\n    [MenuItemStyle.Warning]: {\n        [MenuItemTextColorState.Default]: 'tw-text-text-warning',\n        [MenuItemTextColorState.Active]: 'tw-text-yellow-90',\n        [MenuItemTextColorState.Disabled]: 'tw-text-yellow-40',\n    },\n};\n\nconst menuItemHoverColorRecord: Record<MenuItemStyle, string> = {\n    [MenuItemStyle.Primary]: 'hover:tw-text-text',\n    [MenuItemStyle.Danger]: 'hover:tw-text-text-negative',\n    [MenuItemStyle.Warning]: 'hover:tw-text-text-warning',\n};\n\nconst ITEM_WRAPPER_CLASSES =\n    'tw-cursor-pointer tw-flex tw-items-center tw-justify-between tw-transition-colors tw-gap-2';\nconst ITEM_HOVER_CLASSES = 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover';\nconst ITEM_BASE_CLASSES = merge(['tw-w-full tw-text-left tw-py-2 tw-px-5', ITEM_HOVER_CLASSES]);\nconst ITEM_CHECKED_CLASSES = 'tw-bg-box-selected';\n\nexport const MenuItem = ({\n    title,\n    decorator,\n    switchComponent,\n    subtitle,\n    size = MenuItemContentSize.Small,\n    style = MenuItemStyle.Primary,\n    disabled = false,\n    active = false,\n    checked = false,\n    selectionIndicator = SelectionIndicatorIcon.Check,\n    children,\n    link,\n    onClick,\n}: PropsWithChildren<MenuItemProps>) => {\n    const currentIconSize = size === MenuItemContentSize.XSmall ? IconSize.Size16 : IconSize.Size20;\n\n    const currentIcon = {\n        [SelectionIndicatorIcon.CaretRight]: <IconCaretRight data-test-id=\"menu-item-caret\" size={currentIconSize} />,\n        [SelectionIndicatorIcon.Check]: active && (\n            <IconCheckMark data-test-id=\"menu-item-active\" size={currentIconSize} />\n        ),\n        [SelectionIndicatorIcon.None]: null,\n    }[selectionIndicator];\n\n    let textState = MenuItemTextColorState.Default;\n    if (disabled) {\n        textState = MenuItemTextColorState.Disabled;\n    } else if (active) {\n        textState = MenuItemTextColorState.Active;\n    }\n\n    const textClass = menuItemTextColorRecord[style][textState];\n\n    const [mainElementType, setMainElementType] = useState('span');\n\n    useEffect(() => {\n        if (link || onClick) {\n            setMainElementType(getItemElementType(link, onClick));\n        }\n    }, [link, onClick]);\n\n    return (\n        <>\n            {children && (\n                <li\n                    data-test-id=\"menu-item\"\n                    role=\"menuitem\"\n                    className={merge([\n                        'tw-text-sm tw-leading-4 tw-text-text-weak',\n                        ITEM_WRAPPER_CLASSES,\n                        checked ? ITEM_CHECKED_CLASSES : '',\n                    ])}\n                >\n                    {mainElementType === 'a' && (\n                        <a href={link} className={ITEM_BASE_CLASSES} onClick={onClick}>\n                            {children}\n                        </a>\n                    )}\n                    {mainElementType === 'button' && (\n                        <button type=\"button\" disabled={disabled} onClick={onClick} className={ITEM_BASE_CLASSES}>\n                            {children}\n                        </button>\n                    )}\n                    {mainElementType === 'span' && <span className={ITEM_BASE_CLASSES}>{children}</span>}\n                </li>\n            )}\n            {/* The implementation without children is the first behavior of the MenuItem component.\n                This way we can introduce the new changes without breaking the current usage of it.\n                In the future, this implementation should be replaced by the new one and the projects updated properly\n            */}\n            {!children && (\n                <div\n                    className={merge([\n                        ITEM_WRAPPER_CLASSES,\n                        menuItemHoverColorRecord[style],\n                        menuItemSizeClassMap[size],\n                        disabled && 'tw-bg-box-disabled tw-pointer-events-none',\n                        active && 'tw-font-medium',\n                        textClass,\n                    ])}\n                >\n                    <MenuItemContent\n                        title={title}\n                        decorator={decorator}\n                        subtitle={size === MenuItemContentSize.Large ? subtitle : undefined}\n                        size={size}\n                        switchComponent={switchComponent}\n                    />\n                    <div className=\"tw-flex-none\">{currentIcon}</div>\n                </div>\n            )}\n        </>\n    );\n};\nMenuItem.displayName = 'FondueMenuItem';\n"],"names":["menuItemSizeClassMap","MenuItemContentSize","MenuItemTextColorState","menuItemTextColorRecord","MenuItemStyle","menuItemHoverColorRecord","ITEM_WRAPPER_CLASSES","ITEM_HOVER_CLASSES","ITEM_BASE_CLASSES","merge","ITEM_CHECKED_CLASSES","MenuItem","title","decorator","switchComponent","subtitle","size","style","disabled","active","checked","selectionIndicator","SelectionIndicatorIcon","children","link","onClick","currentIconSize","IconSize","currentIcon","IconCaretRight","IconCheckMark","textState","textClass","mainElementType","setMainElementType","useState","useEffect","getItemElementType","React","MenuItemContent"],"mappings":"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"}
+{"version":3,"file":"MenuItem.es.js","sources":["../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { MouseEvent, ReactNode, useEffect, useState } from 'react';\nimport { merge } from '@utilities/merge';\nimport { IconCaretRight, IconCheckMark } from '@foundation/Icon/Generated';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { MenuItemContent, MenuItemContentProps } from '@components/MenuItem/MenuItemContent';\nimport { MenuItemContentSize, MenuItemStyle, SelectionIndicatorIcon } from './types';\nimport { getItemElementType } from '@utilities/elements';\n\nexport type MenuItemProps = {\n    style?: MenuItemStyle;\n    disabled?: boolean;\n    active?: boolean;\n    checked?: boolean;\n    selectionIndicator?: SelectionIndicatorIcon;\n    /** @deprecated this prop is not being used anymore */\n    type?: string;\n    link?: string;\n    onClick?: <T extends HTMLButtonElement | HTMLAnchorElement>(event: MouseEvent<T>) => void;\n    children?: ReactNode;\n} & Omit<MenuItemContentProps, 'iconSize'>;\n\nexport const menuItemSizeClassMap: Record<MenuItemContentSize, string> = {\n    [MenuItemContentSize.XSmall]: 'tw-px-5 tw-py-2 tw-min-h-[36px]',\n    [MenuItemContentSize.Small]: 'tw-px-5 tw-py-2.5 tw-min-h-[36px]',\n    [MenuItemContentSize.Large]: 'tw-px-5 tw-py-3 tw-min-h-[60px]',\n};\n\nexport enum MenuItemTextColorState {\n    Default = 'Default',\n    Active = 'Active',\n    Disabled = 'Disabled',\n}\n\nexport const menuItemTextColorRecord: Record<MenuItemStyle, Record<MenuItemTextColorState, string>> = {\n    [MenuItemStyle.Primary]: {\n        [MenuItemTextColorState.Default]: 'tw-text-text-x-weak',\n        [MenuItemTextColorState.Active]: 'tw-text-text',\n        [MenuItemTextColorState.Disabled]: 'tw-text-text-disabled',\n    },\n    [MenuItemStyle.Danger]: {\n        [MenuItemTextColorState.Default]: 'tw-text-red-60',\n        [MenuItemTextColorState.Active]: 'tw-text-red-70',\n        [MenuItemTextColorState.Disabled]: 'tw-text-red-40',\n    },\n    [MenuItemStyle.Warning]: {\n        [MenuItemTextColorState.Default]: 'tw-text-text-warning',\n        [MenuItemTextColorState.Active]: 'tw-text-yellow-90',\n        [MenuItemTextColorState.Disabled]: 'tw-text-yellow-40',\n    },\n};\n\nconst menuItemHoverColorRecord: Record<MenuItemStyle, string> = {\n    [MenuItemStyle.Primary]: 'hover:tw-text-text',\n    [MenuItemStyle.Danger]: 'hover:tw-text-text-negative',\n    [MenuItemStyle.Warning]: 'hover:tw-text-text-warning',\n};\n\nconst ITEM_WRAPPER_CLASSES =\n    'tw-cursor-pointer tw-flex tw-items-center tw-justify-between tw-transition-colors tw-gap-2';\nconst ITEM_HOVER_CLASSES = 'hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover';\nconst ITEM_BASE_CLASSES = merge(['tw-w-full tw-text-left tw-py-2 tw-px-5', ITEM_HOVER_CLASSES]);\nconst ITEM_CHECKED_CLASSES = 'tw-bg-box-selected';\n\nexport const MenuItem = ({\n    title,\n    decorator,\n    switchComponent,\n    subtitle,\n    size = MenuItemContentSize.Small,\n    style = MenuItemStyle.Primary,\n    disabled = false,\n    active = false,\n    checked = false,\n    selectionIndicator = SelectionIndicatorIcon.Check,\n    children,\n    link,\n    onClick,\n}: MenuItemProps) => {\n    const currentIconSize = size === MenuItemContentSize.XSmall ? IconSize.Size16 : IconSize.Size20;\n\n    const currentIcon = {\n        [SelectionIndicatorIcon.CaretRight]: <IconCaretRight data-test-id=\"menu-item-caret\" size={currentIconSize} />,\n        [SelectionIndicatorIcon.Check]: active && (\n            <IconCheckMark data-test-id=\"menu-item-active\" size={currentIconSize} />\n        ),\n        [SelectionIndicatorIcon.None]: null,\n    }[selectionIndicator];\n\n    let textState = MenuItemTextColorState.Default;\n    if (disabled) {\n        textState = MenuItemTextColorState.Disabled;\n    } else if (active) {\n        textState = MenuItemTextColorState.Active;\n    }\n\n    const textClass = menuItemTextColorRecord[style][textState];\n\n    const [mainElementType, setMainElementType] = useState('span');\n\n    useEffect(() => {\n        if (link || onClick) {\n            setMainElementType(getItemElementType(link, onClick));\n        }\n    }, [link, onClick]);\n\n    return (\n        <>\n            {children && (\n                <li\n                    data-test-id=\"menu-item\"\n                    role=\"menuitem\"\n                    className={merge([\n                        'tw-text-sm tw-leading-4 tw-text-text-weak',\n                        ITEM_WRAPPER_CLASSES,\n                        checked ? ITEM_CHECKED_CLASSES : '',\n                    ])}\n                >\n                    {mainElementType === 'a' && (\n                        <a href={link} className={ITEM_BASE_CLASSES} onClick={onClick}>\n                            {children}\n                        </a>\n                    )}\n                    {mainElementType === 'button' && (\n                        <button type=\"button\" disabled={disabled} onClick={onClick} className={ITEM_BASE_CLASSES}>\n                            {children}\n                        </button>\n                    )}\n                    {mainElementType === 'span' && <span className={ITEM_BASE_CLASSES}>{children}</span>}\n                </li>\n            )}\n            {/* The implementation without children is the first behavior of the MenuItem component.\n                This way we can introduce the new changes without breaking the current usage of it.\n                In the future, this implementation should be replaced by the new one and the projects updated properly\n            */}\n            {!children && (\n                <div\n                    className={merge([\n                        ITEM_WRAPPER_CLASSES,\n                        menuItemHoverColorRecord[style],\n                        menuItemSizeClassMap[size],\n                        disabled && 'tw-bg-box-disabled tw-pointer-events-none',\n                        active && 'tw-font-medium',\n                        textClass,\n                    ])}\n                >\n                    <MenuItemContent\n                        title={title}\n                        decorator={decorator}\n                        subtitle={size === MenuItemContentSize.Large ? subtitle : undefined}\n                        size={size}\n                        switchComponent={switchComponent}\n                    />\n                    <div className=\"tw-flex-none\">{currentIcon}</div>\n                </div>\n            )}\n        </>\n    );\n};\nMenuItem.displayName = 'FondueMenuItem';\n"],"names":["menuItemSizeClassMap","MenuItemContentSize","MenuItemTextColorState","menuItemTextColorRecord","MenuItemStyle","menuItemHoverColorRecord","ITEM_WRAPPER_CLASSES","ITEM_HOVER_CLASSES","ITEM_BASE_CLASSES","merge","ITEM_CHECKED_CLASSES","MenuItem","title","decorator","switchComponent","subtitle","size","style","disabled","active","checked","selectionIndicator","SelectionIndicatorIcon","children","link","onClick","currentIconSize","IconSize","currentIcon","IconCaretRight","IconCheckMark","textState","textClass","mainElementType","setMainElementType","useState","useEffect","getItemElementType","React","MenuItemContent"],"mappings":"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"}

package/dist/components/MenuItem/MenuItemContent.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
 import { MenuItemContentSize } from './types';
 export type MenuItemContentProps = {
     title?: ReactNode;
@@ -7,8 +7,9 @@ export type MenuItemContentProps = {
     subtitle?: string;
     size?: MenuItemContentSize;
     ariaProps?: HTMLAttributes<HTMLElement>;
+    children?: ReactNode;
 };
 export declare const MenuItemContent: {
-    ({ title, decorator, switchComponent, subtitle, ariaProps, size, children, }: PropsWithChildren<MenuItemContentProps>): JSX.Element;
+    ({ title, decorator, switchComponent, subtitle, ariaProps, size, children, }: MenuItemContentProps): JSX.Element;
     displayName: string;
 };

package/dist/components/MenuItem/MenuItemContent.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemContent.es.js","sources":["../../../src/components/MenuItem/MenuItemContent.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { HTMLAttributes, PropsWithChildren, ReactElement, ReactNode, cloneElement } from 'react';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport { MenuItemContentSize } from './types';\n\nexport type MenuItemContentProps = {\n    title?: ReactNode;\n    decorator?: ReactElement;\n    switchComponent?: ReactElement;\n    subtitle?: string;\n    size?: MenuItemContentSize;\n    ariaProps?: HTMLAttributes<HTMLElement>;\n};\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pr-1.5` class.\n */\nconst paddingRight: Record<MenuItemContentSize, string> = {\n    [MenuItemContentSize.XSmall]: 'tw-pr-1.5',\n    [MenuItemContentSize.Small]: 'tw-pr-1.5',\n    [MenuItemContentSize.Large]: 'tw-pr-2',\n};\n\nexport const MenuItemContent = ({\n    title,\n    decorator,\n    switchComponent,\n    subtitle,\n    ariaProps,\n    size = MenuItemContentSize.Small,\n    children,\n}: PropsWithChildren<MenuItemContentProps>) => (\n    <div\n        {...ariaProps}\n        data-test-id=\"menu-item-content\"\n        className=\"tw-flex tw-box-border tw-items-center tw-font-sans tw-text-s tw-flex-auto tw-min-w-0\"\n    >\n        {decorator && (\n            <span className={merge(['tw-shrink-0', paddingRight[size]])} data-test-id=\"menu-item-decorator\">\n                {cloneElement(decorator, {\n                    size: size === MenuItemContentSize.Large ? IconSize.Size24 : IconSize.Size16,\n                })}\n            </span>\n        )}\n        <div className=\"tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">\n            <div\n                data-test-id=\"menu-item-title\"\n                className=\"tw-select-none tw-text-ellipsis tw-overflow-hidden\"\n                title={typeof title === 'string' ? title : ''}\n            >\n                {children || title}\n            </div>\n            {subtitle && size === MenuItemContentSize.Large && (\n                <div data-test-id=\"menu-item-subtitle\" className=\"tw-select-none tw-text-xxs\" title={subtitle}>\n                    {subtitle}\n                </div>\n            )}\n        </div>\n        {switchComponent && (\n            <span className={merge(['tw-shrink-0', paddingRight[size]])} data-test-id=\"menu-item-decorator\">\n                {switchComponent}\n            </span>\n        )}\n    </div>\n);\nMenuItemContent.displayName = 'FondueMenuItemContent';\n"],"names":["paddingRight","MenuItemContentSize","MenuItemContent","title","decorator","switchComponent","subtitle","ariaProps","size","children","React","merge","cloneElement","IconSize"],"mappings":";;;;AAmBA,MAAMA,IAAoD;AAAA,EACtD,CAACC,EAAoB,MAAM,GAAG;AAAA,EAC9B,CAACA,EAAoB,KAAK,GAAG;AAAA,EAC7B,CAACA,EAAoB,KAAK,GAAG;AACjC,GAEaC,IAAkB,CAAC;AAAA,EAC5B,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAOP,EAAoB;AAAA,EAC3B,UAAAQ;AACJ,MACI,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACI,GAAGH;AAAA,IACJ,gBAAa;AAAA,IACb,WAAU;AAAA,EAAA;AAAA,EAETH,KACG,gBAAAM,EAAA,cAAC,QAAK,EAAA,WAAWC,EAAM,CAAC,eAAeX,EAAaQ,CAAI,CAAC,CAAC,GAAG,gBAAa,sBAAA,GACrEI,EAAaR,GAAW;AAAA,IACrB,MAAMI,MAASP,EAAoB,QAAQY,EAAS,SAASA,EAAS;AAAA,EAAA,CACzE,CACL;AAAA,EAEJ,gBAAAH,EAAA,cAAC,OAAI,EAAA,WAAU,qEACX,GAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAU;AAAA,MACV,OAAO,OAAOP,KAAU,WAAWA,IAAQ;AAAA,IAAA;AAAA,IAE1CM,KAAYN;AAAA,EAAA,GAEhBG,KAAYE,MAASP,EAAoB,SACrC,gBAAAS,EAAA,cAAA,OAAA,EAAI,gBAAa,sBAAqB,WAAU,8BAA6B,OAAOJ,EAAA,GAChFA,CACL,CAER;AAAA,EACCD,KACG,gBAAAK,EAAA,cAAC,QAAK,EAAA,WAAWC,EAAM,CAAC,eAAeX,EAAaQ,CAAI,CAAC,CAAC,GAAG,gBAAa,yBACrEH,CACL;AAER;AAEJH,EAAgB,cAAc;"}
+{"version":3,"file":"MenuItemContent.es.js","sources":["../../../src/components/MenuItem/MenuItemContent.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { HTMLAttributes, ReactElement, ReactNode, cloneElement } from 'react';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { merge } from '@utilities/merge';\nimport { MenuItemContentSize } from './types';\n\nexport type MenuItemContentProps = {\n    title?: ReactNode;\n    decorator?: ReactElement;\n    switchComponent?: ReactElement;\n    subtitle?: string;\n    size?: MenuItemContentSize;\n    ariaProps?: HTMLAttributes<HTMLElement>;\n    children?: ReactNode;\n};\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pr-1.5` class.\n */\nconst paddingRight: Record<MenuItemContentSize, string> = {\n    [MenuItemContentSize.XSmall]: 'tw-pr-1.5',\n    [MenuItemContentSize.Small]: 'tw-pr-1.5',\n    [MenuItemContentSize.Large]: 'tw-pr-2',\n};\n\nexport const MenuItemContent = ({\n    title,\n    decorator,\n    switchComponent,\n    subtitle,\n    ariaProps,\n    size = MenuItemContentSize.Small,\n    children,\n}: MenuItemContentProps) => (\n    <div\n        {...ariaProps}\n        data-test-id=\"menu-item-content\"\n        className=\"tw-flex tw-box-border tw-items-center tw-font-sans tw-text-s tw-flex-auto tw-min-w-0\"\n    >\n        {decorator && (\n            <span className={merge(['tw-shrink-0', paddingRight[size]])} data-test-id=\"menu-item-decorator\">\n                {cloneElement(decorator, {\n                    size: size === MenuItemContentSize.Large ? IconSize.Size24 : IconSize.Size16,\n                })}\n            </span>\n        )}\n        <div className=\"tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">\n            <div\n                data-test-id=\"menu-item-title\"\n                className=\"tw-select-none tw-text-ellipsis tw-overflow-hidden\"\n                title={typeof title === 'string' ? title : ''}\n            >\n                {children || title}\n            </div>\n            {subtitle && size === MenuItemContentSize.Large && (\n                <div data-test-id=\"menu-item-subtitle\" className=\"tw-select-none tw-text-xxs\" title={subtitle}>\n                    {subtitle}\n                </div>\n            )}\n        </div>\n        {switchComponent && (\n            <span className={merge(['tw-shrink-0', paddingRight[size]])} data-test-id=\"menu-item-decorator\">\n                {switchComponent}\n            </span>\n        )}\n    </div>\n);\nMenuItemContent.displayName = 'FondueMenuItemContent';\n"],"names":["paddingRight","MenuItemContentSize","MenuItemContent","title","decorator","switchComponent","subtitle","ariaProps","size","children","React","merge","cloneElement","IconSize"],"mappings":";;;;AAoBA,MAAMA,IAAoD;AAAA,EACtD,CAACC,EAAoB,MAAM,GAAG;AAAA,EAC9B,CAACA,EAAoB,KAAK,GAAG;AAAA,EAC7B,CAACA,EAAoB,KAAK,GAAG;AACjC,GAEaC,IAAkB,CAAC;AAAA,EAC5B,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAOP,EAAoB;AAAA,EAC3B,UAAAQ;AACJ,MACI,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACI,GAAGH;AAAA,IACJ,gBAAa;AAAA,IACb,WAAU;AAAA,EAAA;AAAA,EAETH,KACG,gBAAAM,EAAA,cAAC,QAAK,EAAA,WAAWC,EAAM,CAAC,eAAeX,EAAaQ,CAAI,CAAC,CAAC,GAAG,gBAAa,sBAAA,GACrEI,EAAaR,GAAW;AAAA,IACrB,MAAMI,MAASP,EAAoB,QAAQY,EAAS,SAASA,EAAS;AAAA,EAAA,CACzE,CACL;AAAA,EAEJ,gBAAAH,EAAA,cAAC,OAAI,EAAA,WAAU,qEACX,GAAA,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAU;AAAA,MACV,OAAO,OAAOP,KAAU,WAAWA,IAAQ;AAAA,IAAA;AAAA,IAE1CM,KAAYN;AAAA,EAAA,GAEhBG,KAAYE,MAASP,EAAoB,SACrC,gBAAAS,EAAA,cAAA,OAAA,EAAI,gBAAa,sBAAqB,WAAU,8BAA6B,OAAOJ,EAAA,GAChFA,CACL,CAER;AAAA,EACCD,KACG,gBAAAK,EAAA,cAAC,QAAK,EAAA,WAAWC,EAAM,CAAC,eAAeX,EAAaQ,CAAI,CAAC,CAAC,GAAG,gBAAa,yBACrEH,CACL;AAER;AAEJH,EAAgB,cAAc;"}

package/dist/components/Modal/Modal.d.ts

@@ -3,8 +3,14 @@ import { ModalProps } from './types';
 export declare const Modal: {
     ({ isOpen, ...modalProps }: ModalProps): JSX.Element;
     displayName: string;
-    Header: React.FC<import("./types").ModalHeaderProps>;
-    Body: React.FC<import("./types").ModalBodyProps>;
+    Header: {
+        ({ title, leadText, decorator, variant, }: import("./types").ModalHeaderProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Body: {
+        ({ direction, children, horizontalPadding }: import("./types").ModalBodyProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        displayName: string;
+    };
     Footer: {
         ({ buttons }: import("./types").ModalFooterProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
         displayName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.es.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, memo, useRef } from 'react';\nimport { merge } from '@utilities/merge';\nimport { ModalProps, ModalWidth } from './types';\nimport { ModalVisual } from './ModalVisual';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { FocusScope } from '@react-aria/focus';\nimport { useDialog } from '@react-aria/dialog';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { ModalTitle } from './context/ModalTitle';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalBody } from './ModalBody';\nimport { ModalFooter } from './ModalFooter';\nimport { MODAL_PADDING, ModalLayout } from './context/ModalLayout';\n\nconst UNDERLAY_VARIANTS = {\n    initial: {\n        opacity: 0,\n    },\n    show: {\n        opacity: 1,\n        transition: {\n            duration: 0.15,\n        },\n    },\n    exit: {\n        opacity: 0,\n        transition: {\n            duration: 0.15,\n        },\n    },\n};\n\nconst MODAL_VARIANTS = {\n    initial: { y: -200 },\n    show: { y: 0, transition: { duration: 0.3 } },\n    exit: { y: 0 },\n};\n\nconst widthMap: Record<ModalWidth, string> = {\n    [ModalWidth.Default]: 'tw-max-w-[800px]',\n    [ModalWidth.Small]: 'tw-max-w-[600px]',\n    [ModalWidth.Large]: 'tw-max-w-[1200px]',\n};\n\nconst DEFAULT_ZINDEX = 50;\n\nconst ModalComponent: FC<ModalProps> = memo((props) => {\n    const { visual, children, width = ModalWidth.Default, zIndex = DEFAULT_ZINDEX, compact = false } = props;\n    const ref = useRef<HTMLDivElement>(null);\n    const {\n        overlayProps,\n        underlayProps: { onPointerDown },\n    } = useOverlay(props, ref);\n\n    usePreventScroll();\n    const { modalProps } = useModal();\n\n    const { dialogProps, titleProps } = useDialog(props, ref);\n\n    const padding = compact ? MODAL_PADDING.compact : MODAL_PADDING.default;\n\n    return (\n        <motion.div\n            variants={UNDERLAY_VARIANTS}\n            initial=\"initial\"\n            animate=\"show\"\n            exit=\"exit\"\n            style={{\n                background: 'rgba(0, 0, 0, .5)',\n                zIndex,\n            }}\n            onPointerDown={onPointerDown}\n            data-is-underlay={true}\n            className={\n                'tw-fixed tw-top-0 tw-left-0 tw-bottom-0 tw-right-0 tw-flex tw-justify-center tw-items-center tw-p-4'\n            }\n        >\n            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n            <FocusScope contain restoreFocus autoFocus>\n                <motion.div\n                    variants={MODAL_VARIANTS}\n                    className={merge([widthMap[width], 'tw-w-full tw-max-h-full tw-h-contents tw-flex tw-flex-col'])}\n                >\n                    <div\n                        {...overlayProps}\n                        {...dialogProps}\n                        {...modalProps}\n                        ref={ref}\n                        data-test-id=\"modal-container\"\n                        className=\"tw-flex-initial tw-min-h-0 tw-w-full tw-flex tw-bg-white tw-overflow-hidden tw-border tw-border-solid tw-border-line-strong tw-rounded tw-shadow-2xl\"\n                    >\n                        {visual?.pattern && (\n                            <div className=\"tw-w-[260px] tw-relative tw-flex-shrink-0 tw-overflow-hidden\">\n                                <ModalVisual {...visual} />\n                            </div>\n                        )}\n                        <div className=\"tw-flex tw-flex-col tw-flex-1 tw-space-y-6 tw-overflow-hidden\">\n                            <ModalLayout.Provider value={{ compact, padding }}>\n                                <ModalTitle.Provider value={titleProps}>{children}</ModalTitle.Provider>\n                            </ModalLayout.Provider>\n                        </div>\n                    </div>\n                </motion.div>\n            </FocusScope>\n        </motion.div>\n    );\n});\n\nModalComponent.displayName = 'Modal';\n\nexport const Modal = ({ isOpen, ...modalProps }: ModalProps) => (\n    <OverlayContainer>\n        <AnimatePresence>{isOpen && <ModalComponent {...modalProps} isOpen />}</AnimatePresence>\n    </OverlayContainer>\n);\n\nModal.displayName = 'FondueModal';\n\nModal.Header = ModalHeader;\nModal.Body = ModalBody;\nModal.Footer = ModalFooter;\n"],"names":["UNDERLAY_VARIANTS","MODAL_VARIANTS","widthMap","ModalWidth","DEFAULT_ZINDEX","ModalComponent","memo","props","visual","children","width","zIndex","compact","ref","useRef","overlayProps","onPointerDown","useOverlay","usePreventScroll","modalProps","useModal","dialogProps","titleProps","useDialog","padding","MODAL_PADDING","React","motion","FocusScope","merge","ModalVisual","ModalLayout","ModalTitle","Modal","isOpen","OverlayContainer","AnimatePresence","ModalHeader","ModalBody","ModalFooter"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,IAAoB;AAAA,EACtB,SAAS;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA,MAAM;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA,MACR,UAAU;AAAA,IACd;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA,MACR,UAAU;AAAA,IACd;AAAA,EACJ;AACJ,GAEMC,IAAiB;AAAA,EACnB,SAAS,EAAE,GAAG,KAAK;AAAA,EACnB,MAAM,EAAE,GAAG,GAAG,YAAY,EAAE,UAAU,MAAM;AAAA,EAC5C,MAAM,EAAE,GAAG,EAAE;AACjB,GAEMC,IAAuC;AAAA,EACzC,CAACC,EAAW,OAAO,GAAG;AAAA,EACtB,CAACA,EAAW,KAAK,GAAG;AAAA,EACpB,CAACA,EAAW,KAAK,GAAG;AACxB,GAEMC,IAAiB,IAEjBC,IAAiCC,EAAK,CAACC,MAAU;AAC7C,QAAA,EAAE,QAAAC,GAAQ,UAAAC,GAAU,OAAAC,IAAQP,EAAW,SAAS,QAAAQ,IAASP,GAAgB,SAAAQ,IAAU,GAAA,IAAUL,GAC7FM,IAAMC,EAAuB,IAAI,GACjC;AAAA,IACF,cAAAC;AAAA,IACA,eAAe,EAAE,eAAAC,EAAc;AAAA,EAAA,IAC/BC,EAAWV,GAAOM,CAAG;AAER,EAAAK;AACX,QAAA,EAAE,YAAAC,MAAeC,KAEjB,EAAE,aAAAC,GAAa,YAAAC,EAAA,IAAeC,EAAUhB,GAAOM,CAAG,GAElDW,IAAUZ,IAAUa,EAAc,UAAUA,EAAc;AAG5D,SAAA,gBAAAC,EAAA;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACG,UAAU3B;AAAA,MACV,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAO;AAAA,QACH,YAAY;AAAA,QACZ,QAAAW;AAAA,MACJ;AAAA,MACA,eAAAK;AAAA,MACA,oBAAkB;AAAA,MAClB,WACI;AAAA,IAAA;AAAA,oCAIHY,GAAW,EAAA,SAAO,IAAC,cAAY,IAAC,WAAS,GACtC,GAAA,gBAAAF,EAAA;AAAA,MAACC,EAAO;AAAA,MAAP;AAAA,QACG,UAAU1B;AAAA,QACV,WAAW4B,EAAM,CAAC3B,EAASQ,CAAK,GAAG,2DAA2D,CAAC;AAAA,MAAA;AAAA,MAE/F,gBAAAgB,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGX;AAAA,UACH,GAAGM;AAAA,UACH,GAAGF;AAAA,UACJ,KAAAN;AAAA,UACA,gBAAa;AAAA,UACb,WAAU;AAAA,QAAA;AAAA,SAETL,KAAA,gBAAAA,EAAQ,YACL,gBAAAkB,EAAA,cAAC,OAAI,EAAA,WAAU,kEACV,gBAAAA,EAAA,cAAAI,GAAA,EAAa,GAAGtB,EAAQ,CAAA,CAC7B;AAAA,QAEJ,gBAAAkB,EAAA,cAAC,SAAI,WAAU,mGACVK,EAAY,UAAZ,EAAqB,OAAO,EAAE,SAAAnB,GAAS,SAAAY,EAAQ,EAAA,mCAC3CQ,EAAW,UAAX,EAAoB,OAAOV,KAAab,CAAS,CACtD,CACJ;AAAA,MACJ;AAAA,IAAA,CAER;AAAA,EAAA;AAGZ,CAAC;AAEDJ,EAAe,cAAc;AAEtB,MAAM4B,IAAQ,CAAC,EAAE,QAAAC,GAAQ,GAAGf,QAC9B,gBAAAO,EAAA,cAAAS,GAAA,sCACIC,GAAiB,MAAAF,qCAAW7B,GAAgB,EAAA,GAAGc,GAAY,QAAM,GAAC,CAAA,CAAG,CAC1E;AAGJc,EAAM,cAAc;AAEpBA,EAAM,SAASI;AACfJ,EAAM,OAAOK;AACbL,EAAM,SAASM;"}
+{"version":3,"file":"Modal.es.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, memo, useRef } from 'react';\nimport { merge } from '@utilities/merge';\nimport { ModalProps, ModalWidth } from './types';\nimport { ModalVisual } from './ModalVisual';\nimport { OverlayContainer, useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';\nimport { FocusScope } from '@react-aria/focus';\nimport { useDialog } from '@react-aria/dialog';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { ModalTitle } from './context/ModalTitle';\nimport { ModalHeader } from './ModalHeader';\nimport { ModalBody } from './ModalBody';\nimport { ModalFooter } from './ModalFooter';\nimport { MODAL_PADDING, ModalLayout } from './context/ModalLayout';\n\nconst UNDERLAY_VARIANTS = {\n    initial: {\n        opacity: 0,\n    },\n    show: {\n        opacity: 1,\n        transition: {\n            duration: 0.15,\n        },\n    },\n    exit: {\n        opacity: 0,\n        transition: {\n            duration: 0.15,\n        },\n    },\n};\n\nconst MODAL_VARIANTS = {\n    initial: { y: -200 },\n    show: { y: 0, transition: { duration: 0.3 } },\n    exit: { y: 0 },\n};\n\nconst widthMap: Record<ModalWidth, string> = {\n    [ModalWidth.Default]: 'tw-max-w-[800px]',\n    [ModalWidth.Small]: 'tw-max-w-[600px]',\n    [ModalWidth.Large]: 'tw-max-w-[1200px]',\n};\n\nconst DEFAULT_ZINDEX = 50;\n\nconst ModalComponent = memo((props: ModalProps): ReactElement => {\n    const { visual, children, width = ModalWidth.Default, zIndex = DEFAULT_ZINDEX, compact = false } = props;\n    const ref = useRef<HTMLDivElement>(null);\n    const {\n        overlayProps,\n        underlayProps: { onPointerDown },\n    } = useOverlay(props, ref);\n\n    usePreventScroll();\n    const { modalProps } = useModal();\n\n    const { dialogProps, titleProps } = useDialog(props, ref);\n\n    const padding = compact ? MODAL_PADDING.compact : MODAL_PADDING.default;\n\n    return (\n        <motion.div\n            variants={UNDERLAY_VARIANTS}\n            initial=\"initial\"\n            animate=\"show\"\n            exit=\"exit\"\n            style={{\n                background: 'rgba(0, 0, 0, .5)',\n                zIndex,\n            }}\n            onPointerDown={onPointerDown}\n            data-is-underlay={true}\n            className={\n                'tw-fixed tw-top-0 tw-left-0 tw-bottom-0 tw-right-0 tw-flex tw-justify-center tw-items-center tw-p-4'\n            }\n        >\n            {/* eslint-disable-next-line jsx-a11y/no-autofocus */}\n            <FocusScope contain restoreFocus autoFocus>\n                <motion.div\n                    variants={MODAL_VARIANTS}\n                    className={merge([widthMap[width], 'tw-w-full tw-max-h-full tw-h-contents tw-flex tw-flex-col'])}\n                >\n                    <div\n                        {...overlayProps}\n                        {...dialogProps}\n                        {...modalProps}\n                        ref={ref}\n                        data-test-id=\"modal-container\"\n                        className=\"tw-flex-initial tw-min-h-0 tw-w-full tw-flex tw-bg-white tw-overflow-hidden tw-border tw-border-solid tw-border-line-strong tw-rounded tw-shadow-2xl\"\n                    >\n                        {visual?.pattern && (\n                            <div className=\"tw-w-[260px] tw-relative tw-flex-shrink-0 tw-overflow-hidden\">\n                                <ModalVisual {...visual} />\n                            </div>\n                        )}\n                        <div className=\"tw-flex tw-flex-col tw-flex-1 tw-space-y-6 tw-overflow-hidden\">\n                            <ModalLayout.Provider value={{ compact, padding }}>\n                                <ModalTitle.Provider value={titleProps}>{children}</ModalTitle.Provider>\n                            </ModalLayout.Provider>\n                        </div>\n                    </div>\n                </motion.div>\n            </FocusScope>\n        </motion.div>\n    );\n});\n\nModalComponent.displayName = 'Modal';\n\nexport const Modal = ({ isOpen, ...modalProps }: ModalProps) => (\n    <OverlayContainer>\n        <AnimatePresence>{isOpen && <ModalComponent {...modalProps} isOpen />}</AnimatePresence>\n    </OverlayContainer>\n);\n\nModal.displayName = 'FondueModal';\n\nModal.Header = ModalHeader;\nModal.Body = ModalBody;\nModal.Footer = ModalFooter;\n"],"names":["UNDERLAY_VARIANTS","MODAL_VARIANTS","widthMap","ModalWidth","DEFAULT_ZINDEX","ModalComponent","memo","props","visual","children","width","zIndex","compact","ref","useRef","overlayProps","onPointerDown","useOverlay","usePreventScroll","modalProps","useModal","dialogProps","titleProps","useDialog","padding","MODAL_PADDING","React","motion","FocusScope","merge","ModalVisual","ModalLayout","ModalTitle","Modal","isOpen","OverlayContainer","AnimatePresence","ModalHeader","ModalBody","ModalFooter"],"mappings":";;;;;;;;;;;;;AAgBA,MAAMA,IAAoB;AAAA,EACtB,SAAS;AAAA,IACL,SAAS;AAAA,EACb;AAAA,EACA,MAAM;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA,MACR,UAAU;AAAA,IACd;AAAA,EACJ;AAAA,EACA,MAAM;AAAA,IACF,SAAS;AAAA,IACT,YAAY;AAAA,MACR,UAAU;AAAA,IACd;AAAA,EACJ;AACJ,GAEMC,IAAiB;AAAA,EACnB,SAAS,EAAE,GAAG,KAAK;AAAA,EACnB,MAAM,EAAE,GAAG,GAAG,YAAY,EAAE,UAAU,MAAM;AAAA,EAC5C,MAAM,EAAE,GAAG,EAAE;AACjB,GAEMC,IAAuC;AAAA,EACzC,CAACC,EAAW,OAAO,GAAG;AAAA,EACtB,CAACA,EAAW,KAAK,GAAG;AAAA,EACpB,CAACA,EAAW,KAAK,GAAG;AACxB,GAEMC,IAAiB,IAEjBC,IAAiBC,EAAK,CAACC,MAAoC;AACvD,QAAA,EAAE,QAAAC,GAAQ,UAAAC,GAAU,OAAAC,IAAQP,EAAW,SAAS,QAAAQ,IAASP,GAAgB,SAAAQ,IAAU,GAAA,IAAUL,GAC7FM,IAAMC,EAAuB,IAAI,GACjC;AAAA,IACF,cAAAC;AAAA,IACA,eAAe,EAAE,eAAAC,EAAc;AAAA,EAAA,IAC/BC,EAAWV,GAAOM,CAAG;AAER,EAAAK;AACX,QAAA,EAAE,YAAAC,MAAeC,KAEjB,EAAE,aAAAC,GAAa,YAAAC,EAAA,IAAeC,EAAUhB,GAAOM,CAAG,GAElDW,IAAUZ,IAAUa,EAAc,UAAUA,EAAc;AAG5D,SAAA,gBAAAC,EAAA;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACG,UAAU3B;AAAA,MACV,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAO;AAAA,QACH,YAAY;AAAA,QACZ,QAAAW;AAAA,MACJ;AAAA,MACA,eAAAK;AAAA,MACA,oBAAkB;AAAA,MAClB,WACI;AAAA,IAAA;AAAA,oCAIHY,GAAW,EAAA,SAAO,IAAC,cAAY,IAAC,WAAS,GACtC,GAAA,gBAAAF,EAAA;AAAA,MAACC,EAAO;AAAA,MAAP;AAAA,QACG,UAAU1B;AAAA,QACV,WAAW4B,EAAM,CAAC3B,EAASQ,CAAK,GAAG,2DAA2D,CAAC;AAAA,MAAA;AAAA,MAE/F,gBAAAgB,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGX;AAAA,UACH,GAAGM;AAAA,UACH,GAAGF;AAAA,UACJ,KAAAN;AAAA,UACA,gBAAa;AAAA,UACb,WAAU;AAAA,QAAA;AAAA,SAETL,KAAA,gBAAAA,EAAQ,YACL,gBAAAkB,EAAA,cAAC,OAAI,EAAA,WAAU,kEACV,gBAAAA,EAAA,cAAAI,GAAA,EAAa,GAAGtB,EAAQ,CAAA,CAC7B;AAAA,QAEJ,gBAAAkB,EAAA,cAAC,SAAI,WAAU,mGACVK,EAAY,UAAZ,EAAqB,OAAO,EAAE,SAAAnB,GAAS,SAAAY,EAAQ,EAAA,mCAC3CQ,EAAW,UAAX,EAAoB,OAAOV,KAAab,CAAS,CACtD,CACJ;AAAA,MACJ;AAAA,IAAA,CAER;AAAA,EAAA;AAGZ,CAAC;AAEDJ,EAAe,cAAc;AAEtB,MAAM4B,IAAQ,CAAC,EAAE,QAAAC,GAAQ,GAAGf,QAC9B,gBAAAO,EAAA,cAAAS,GAAA,sCACIC,GAAiB,MAAAF,qCAAW7B,GAAgB,EAAA,GAAGc,GAAY,QAAM,GAAC,CAAA,CAAG,CAC1E;AAGJc,EAAM,cAAc;AAEpBA,EAAM,SAASI;AACfJ,EAAM,OAAOK;AACbL,EAAM,SAASM;"}

package/dist/components/Modal/ModalBody.d.ts

@@ -1,3 +1,6 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { ModalBodyProps } from './types';
-export declare const ModalBody: FC<ModalBodyProps>;
+export declare const ModalBody: {
+    ({ direction, children, horizontalPadding }: ModalBodyProps): ReactElement;
+    displayName: string;
+};

package/dist/components/Modal/ModalBody.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalBody.es.js","sources":["../../../src/components/Modal/ModalBody.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, useContext } from 'react';\nimport { ModalBodyProps } from './types';\nimport { ScrollWrapper } from '@components/ScrollWrapper/ScrollWrapper';\nimport { ModalLayout } from './context/ModalLayout';\n\nexport const ModalBody: FC<ModalBodyProps> = ({ direction, children, horizontalPadding = true }) => {\n    const { padding } = useContext(ModalLayout);\n\n    return (\n        <div\n            data-test-id=\"modal-body\"\n            className={`tw-flex-auto tw-min-h-0 ${horizontalPadding ? padding.horizontal : 'tw-pr-2'}`}\n        >\n            <ScrollWrapper direction={direction}>{children}</ScrollWrapper>\n        </div>\n    );\n};\nModalBody.displayName = 'FondueModalBody';\n"],"names":["ModalBody","direction","children","horizontalPadding","padding","useContext","ModalLayout","React","ScrollWrapper"],"mappings":";;;AAOO,MAAMA,IAAgC,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,mBAAAC,IAAoB,SAAW;AAChG,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAWC,CAAW;AAGtC,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAW,2BAA2BJ,IAAoBC,EAAQ,aAAa;AAAA,IAAA;AAAA,IAE/E,gBAAAG,EAAA,cAACC,GAAc,EAAA,WAAAP,EAAA,GAAuBC,CAAS;AAAA,EAAA;AAG3D;AACAF,EAAU,cAAc;"}
+{"version":3,"file":"ModalBody.es.js","sources":["../../../src/components/Modal/ModalBody.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, useContext } from 'react';\nimport { ModalBodyProps } from './types';\nimport { ScrollWrapper } from '@components/ScrollWrapper/ScrollWrapper';\nimport { ModalLayout } from './context/ModalLayout';\n\nexport const ModalBody = ({ direction, children, horizontalPadding = true }: ModalBodyProps): ReactElement => {\n    const { padding } = useContext(ModalLayout);\n\n    return (\n        <div\n            data-test-id=\"modal-body\"\n            className={`tw-flex-auto tw-min-h-0 ${horizontalPadding ? padding.horizontal : 'tw-pr-2'}`}\n        >\n            <ScrollWrapper direction={direction}>{children}</ScrollWrapper>\n        </div>\n    );\n};\nModalBody.displayName = 'FondueModalBody';\n"],"names":["ModalBody","direction","children","horizontalPadding","padding","useContext","ModalLayout","React","ScrollWrapper"],"mappings":";;;AAOO,MAAMA,IAAY,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,mBAAAC,IAAoB,SAAyC;AAC1G,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAWC,CAAW;AAGtC,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAW,2BAA2BJ,IAAoBC,EAAQ,aAAa;AAAA,IAAA;AAAA,IAE/E,gBAAAG,EAAA,cAACC,GAAc,EAAA,WAAAP,EAAA,GAAuBC,CAAS;AAAA,EAAA;AAG3D;AACAF,EAAU,cAAc;"}

package/dist/components/Modal/ModalHeader.d.ts

@@ -1,3 +1,6 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { ModalHeaderProps } from './types';
-export declare const ModalHeader: FC<ModalHeaderProps>;
+export declare const ModalHeader: {
+    ({ title, leadText, decorator, variant, }: ModalHeaderProps): ReactElement;
+    displayName: string;
+};

package/dist/components/Modal/ModalHeader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.es.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC, cloneElement, useContext } from 'react';\nimport { merge } from '@utilities/merge';\nimport { ModalHeaderProps, ModalHeaderVariant, modalHeaderVariants } from './types';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { ModalTitle } from './context/ModalTitle';\nimport { ModalLayout } from './context/ModalLayout';\n\nexport const ModalHeader: FC<ModalHeaderProps> = ({\n    title,\n    leadText,\n    decorator,\n    variant = ModalHeaderVariant.Default,\n}) => {\n    const ariaTitleProps = useContext(ModalTitle);\n    const { padding, compact } = useContext(ModalLayout);\n\n    return (\n        <div data-test-id=\"modal-header\" className={`${padding.top} ${padding.horizontal}`}>\n            <div className=\"tw-flex tw-items-center\">\n                {decorator && (\n                    <span\n                        data-test-id=\"modal-header-decorator-container\"\n                        className={merge(['tw-mr-2', modalHeaderVariants[variant]])}\n                    >\n                        {cloneElement(decorator, { size: IconSize.Size24 })}\n                    </span>\n                )}\n                <h3\n                    {...ariaTitleProps}\n                    className={merge([\n                        'tw-font-heading tw-font-medium tw-text-text',\n                        compact ? 'tw-text-lg' : 'tw-text-xl',\n                    ])}\n                >\n                    {title}\n                </h3>\n            </div>\n            {leadText && <p className=\"tw-text-text-weak tw-mt-4\">{leadText}</p>}\n        </div>\n    );\n};\nModalHeader.displayName = 'FondueModalHeader';\n"],"names":["ModalHeader","title","leadText","decorator","variant","ModalHeaderVariant","ariaTitleProps","useContext","ModalTitle","padding","compact","ModalLayout","React","merge","modalHeaderVariants","cloneElement","IconSize"],"mappings":";;;;;;AASO,MAAMA,IAAoC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAUC,EAAmB;AACjC,MAAM;AACI,QAAAC,IAAiBC,EAAWC,CAAU,GACtC,EAAE,SAAAC,GAAS,SAAAC,EAAQ,IAAIH,EAAWI,CAAW;AAEnD,SACK,gBAAAC,EAAA,cAAA,OAAA,EAAI,gBAAa,gBAAe,WAAW,GAAGH,EAAQ,OAAOA,EAAQ,aAClE,GAAA,gBAAAG,EAAA,cAAC,OAAI,EAAA,WAAU,6BACVT,KACG,gBAAAS,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAWC,EAAM,CAAC,WAAWC,EAAoBV,CAAO,CAAC,CAAC;AAAA,IAAA;AAAA,IAEzDW,EAAaZ,GAAW,EAAE,MAAMa,EAAS,QAAQ;AAAA,EAG1D,GAAA,gBAAAJ,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGN;AAAA,MACJ,WAAWO,EAAM;AAAA,QACb;AAAA,QACAH,IAAU,eAAe;AAAA,MAAA,CAC5B;AAAA,IAAA;AAAA,IAEAT;AAAA,EAAA,CAET,GACCC,KAAY,gBAAAU,EAAA,cAAC,OAAE,WAAU,4BAAA,GAA6BV,CAAS,CACpE;AAER;AACAF,EAAY,cAAc;"}
+{"version":3,"file":"ModalHeader.es.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, cloneElement, useContext } from 'react';\nimport { merge } from '@utilities/merge';\nimport { ModalHeaderProps, ModalHeaderVariant, modalHeaderVariants } from './types';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { ModalTitle } from './context/ModalTitle';\nimport { ModalLayout } from './context/ModalLayout';\n\nexport const ModalHeader = ({\n    title,\n    leadText,\n    decorator,\n    variant = ModalHeaderVariant.Default,\n}: ModalHeaderProps): ReactElement => {\n    const ariaTitleProps = useContext(ModalTitle);\n    const { padding, compact } = useContext(ModalLayout);\n\n    return (\n        <div data-test-id=\"modal-header\" className={`${padding.top} ${padding.horizontal}`}>\n            <div className=\"tw-flex tw-items-center\">\n                {decorator && (\n                    <span\n                        data-test-id=\"modal-header-decorator-container\"\n                        className={merge(['tw-mr-2', modalHeaderVariants[variant]])}\n                    >\n                        {cloneElement(decorator, { size: IconSize.Size24 })}\n                    </span>\n                )}\n                <h3\n                    {...ariaTitleProps}\n                    className={merge([\n                        'tw-font-heading tw-font-medium tw-text-text',\n                        compact ? 'tw-text-lg' : 'tw-text-xl',\n                    ])}\n                >\n                    {title}\n                </h3>\n            </div>\n            {leadText && <p className=\"tw-text-text-weak tw-mt-4\">{leadText}</p>}\n        </div>\n    );\n};\nModalHeader.displayName = 'FondueModalHeader';\n"],"names":["ModalHeader","title","leadText","decorator","variant","ModalHeaderVariant","ariaTitleProps","useContext","ModalTitle","padding","compact","ModalLayout","React","merge","modalHeaderVariants","cloneElement","IconSize"],"mappings":";;;;;;AASO,MAAMA,IAAc,CAAC;AAAA,EACxB,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC,IAAUC,EAAmB;AACjC,MAAsC;AAC5B,QAAAC,IAAiBC,EAAWC,CAAU,GACtC,EAAE,SAAAC,GAAS,SAAAC,EAAQ,IAAIH,EAAWI,CAAW;AAEnD,SACK,gBAAAC,EAAA,cAAA,OAAA,EAAI,gBAAa,gBAAe,WAAW,GAAGH,EAAQ,OAAOA,EAAQ,aAClE,GAAA,gBAAAG,EAAA,cAAC,OAAI,EAAA,WAAU,6BACVT,KACG,gBAAAS,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,WAAWC,EAAM,CAAC,WAAWC,EAAoBV,CAAO,CAAC,CAAC;AAAA,IAAA;AAAA,IAEzDW,EAAaZ,GAAW,EAAE,MAAMa,EAAS,QAAQ;AAAA,EAG1D,GAAA,gBAAAJ,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGN;AAAA,MACJ,WAAWO,EAAM;AAAA,QACb;AAAA,QACAH,IAAU,eAAe;AAAA,MAAA,CAC5B;AAAA,IAAA;AAAA,IAEAT;AAAA,EAAA,CAET,GACCC,KAAY,gBAAAU,EAAA,cAAC,OAAE,WAAU,4BAAA,GAA6BV,CAAS,CACpE;AAER;AACAF,EAAY,cAAc;"}

package/dist/components/Modal/ModalVisual.d.ts

@@ -1,3 +1,6 @@
-import { FC } from 'react';
+import { ReactElement } from 'react';
 import { ModalVisualProps } from './types';
-export declare const ModalVisual: FC<ModalVisualProps>;
+export declare const ModalVisual: {
+    ({ pattern, foregroundColor, }: ModalVisualProps): ReactElement;
+    displayName: string;
+};

package/dist/components/Modal/ModalVisual.es.js

@@ -4,7 +4,10 @@ import { FrontifyPattern as i } from "../FrontifyPattern/FrontifyPattern.es.js";
 import { patternThemes as s } from "../../foundation/Pattern/PatternTheme.es.js";
 import { PatternScale as l } from "../../foundation/Pattern/PatternScale.es.js";
 import { PatternDesign as o } from "../../foundation/Pattern/PatternDesigns.es.js";
-const r = ({ pattern: a = o.DigitalAssets, foregroundColor: t }) => /* @__PURE__ */ e.createElement(
+const r = ({
+  pattern: a = o.DigitalAssets,
+  foregroundColor: t
+}) => /* @__PURE__ */ e.createElement(
   "div",
   {
     "data-test-id": "modal-visual",

package/dist/components/Modal/ModalVisual.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalVisual.es.js","sources":["../../../src/components/Modal/ModalVisual.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { FC } from 'react';\nimport { merge } from '@utilities/merge';\nimport { ModalVisualProps } from './types';\nimport { FrontifyPattern } from '@components/FrontifyPattern/FrontifyPattern';\nimport { PatternDesign, PatternScale, patternThemes } from '@foundation/Pattern';\n\nexport const ModalVisual: FC<ModalVisualProps> = ({ pattern = PatternDesign.DigitalAssets, foregroundColor }) => {\n    return (\n        <div\n            data-test-id=\"modal-visual\"\n            className={merge([\n                'tw-h-[1802px] tw-absolute tw-bottom-0',\n                foregroundColor && patternThemes[foregroundColor],\n            ])}\n            style={{\n                clipPath:\n                    \"path('M0 0L252 145.492C256.95 148.35 260 153.632 260 159.349V1641.98C260 1647.7 256.95 1652.98 252 1655.84L0 1801.33V1501.11V0Z')\",\n            }}\n        >\n            <div className=\"tw-absolute tw-bottom-0\">\n                <FrontifyPattern\n                    pattern={pattern}\n                    scaleOrigin={['left', 'bottom']}\n                    scale={PatternScale.XXL}\n                    foregroundColor={foregroundColor}\n                />\n            </div>\n        </div>\n    );\n};\nModalVisual.displayName = 'FondueModalVisual';\n"],"names":["ModalVisual","pattern","PatternDesign","foregroundColor","React","merge","patternThemes","FrontifyPattern","PatternScale"],"mappings":";;;;;;AAQO,MAAMA,IAAoC,CAAC,EAAE,SAAAC,IAAUC,EAAc,eAAe,iBAAAC,QAEnF,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWC,EAAM;AAAA,MACb;AAAA,MACAF,KAAmBG,EAAcH,CAAe;AAAA,IAAA,CACnD;AAAA,IACD,OAAO;AAAA,MACH,UACI;AAAA,IACR;AAAA,EAAA;AAAA,EAEA,gBAAAC,EAAA,cAAC,OAAI,EAAA,WAAU,0BACX,GAAA,gBAAAA,EAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACG,SAAAN;AAAA,MACA,aAAa,CAAC,QAAQ,QAAQ;AAAA,MAC9B,OAAOO,EAAa;AAAA,MACpB,iBAAAL;AAAA,IAAA;AAAA,EAAA,CAER;AAAA;AAIZH,EAAY,cAAc;"}
+{"version":3,"file":"ModalVisual.es.js","sources":["../../../src/components/Modal/ModalVisual.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement } from 'react';\nimport { merge } from '@utilities/merge';\nimport { ModalVisualProps } from './types';\nimport { FrontifyPattern } from '@components/FrontifyPattern/FrontifyPattern';\nimport { PatternDesign, PatternScale, patternThemes } from '@foundation/Pattern';\n\nexport const ModalVisual = ({\n    pattern = PatternDesign.DigitalAssets,\n    foregroundColor,\n}: ModalVisualProps): ReactElement => {\n    return (\n        <div\n            data-test-id=\"modal-visual\"\n            className={merge([\n                'tw-h-[1802px] tw-absolute tw-bottom-0',\n                foregroundColor && patternThemes[foregroundColor],\n            ])}\n            style={{\n                clipPath:\n                    \"path('M0 0L252 145.492C256.95 148.35 260 153.632 260 159.349V1641.98C260 1647.7 256.95 1652.98 252 1655.84L0 1801.33V1501.11V0Z')\",\n            }}\n        >\n            <div className=\"tw-absolute tw-bottom-0\">\n                <FrontifyPattern\n                    pattern={pattern}\n                    scaleOrigin={['left', 'bottom']}\n                    scale={PatternScale.XXL}\n                    foregroundColor={foregroundColor}\n                />\n            </div>\n        </div>\n    );\n};\nModalVisual.displayName = 'FondueModalVisual';\n"],"names":["ModalVisual","pattern","PatternDesign","foregroundColor","React","merge","patternThemes","FrontifyPattern","PatternScale"],"mappings":";;;;;;AAQO,MAAMA,IAAc,CAAC;AAAA,EACxB,SAAAC,IAAUC,EAAc;AAAA,EACxB,iBAAAC;AACJ,MAEQ,gBAAAC,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAWC,EAAM;AAAA,MACb;AAAA,MACAF,KAAmBG,EAAcH,CAAe;AAAA,IAAA,CACnD;AAAA,IACD,OAAO;AAAA,MACH,UACI;AAAA,IACR;AAAA,EAAA;AAAA,EAEA,gBAAAC,EAAA,cAAC,OAAI,EAAA,WAAU,0BACX,GAAA,gBAAAA,EAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACG,SAAAN;AAAA,MACA,aAAa,CAAC,QAAQ,QAAQ;AAAA,MAC9B,OAAOO,EAAa;AAAA,MACpB,iBAAAL;AAAA,IAAA;AAAA,EAAA,CAER;AAAA;AAIZH,EAAY,cAAc;"}

package/dist/components/MultiInput/MultiInput.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ReactElement, ReactNode } from 'react';
 export declare enum MultiInputLayout {
     Columns = "Columns",
     Spider = "Spider"
@@ -6,5 +6,9 @@ export declare enum MultiInputLayout {
 export type MultiInputProps = {
     layout: MultiInputLayout;
     spanLastItem?: boolean;
+    children: ReactNode;
+};
+export declare const MultiInput: {
+    ({ layout, spanLastItem, children }: MultiInputProps): ReactElement;
+    displayName: string;
 };
-export declare const MultiInput: FC<MultiInputProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"MultiInput.es.js","sources":["../../../src/components/MultiInput/MultiInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, FC } from 'react';\n\nexport enum MultiInputLayout {\n    Columns = 'Columns',\n    Spider = 'Spider',\n}\n\nexport type MultiInputProps = {\n    layout: MultiInputLayout;\n    spanLastItem?: boolean;\n};\n\nexport const MultiInput: FC<MultiInputProps> = ({ layout, spanLastItem, children }) => {\n    const childrenArray = Children.toArray(children);\n\n    return (\n        <div data-test-id=\"multi-input\" className=\"tw-flex tw-gap-2 tw-w-full tw-flex-col\">\n            {layout === MultiInputLayout.Columns && (\n                <div data-test-id=\"multi-input-grid-columns\" className=\"tw-grid tw-grid-cols-2 tw-gap-2\">\n                    {childrenArray.map((child, index) => (\n                        <div\n                            className={spanLastItem && index === childrenArray.length - 1 ? 'tw-col-span-2' : ''}\n                            key={index}\n                        >\n                            {child}\n                        </div>\n                    ))}\n                </div>\n            )}\n            {layout === MultiInputLayout.Spider && (\n                <div data-test-id=\"multi-input-grid-spider\" className=\"tw-grid tw-grid-cols-4 tw-gap-2\">\n                    {childrenArray[0] && <div className=\"tw-col-start-2 tw-col-span-2\">{childrenArray[0]}</div>}\n                    {childrenArray[1] && <div className=\"tw-col-start-1 tw-col-span-2\">{childrenArray[1]}</div>}\n                    {childrenArray[2] && <div className=\"tw-col-start-3 tw-col-span-2\">{childrenArray[2]}</div>}\n                    {childrenArray[3] && <div className=\"tw-col-start-2 tw-col-span-2\">{childrenArray[3]}</div>}\n                </div>\n            )}\n        </div>\n    );\n};\nMultiInput.displayName = 'FondueMultiInput';\n"],"names":["MultiInputLayout","MultiInput","layout","spanLastItem","children","childrenArray","Children","React","child","index"],"mappings":";AAIY,IAAAA,sBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,SAAS,UAFDA,IAAAA,KAAA,CAAA,CAAA;AAUL,MAAMC,IAAkC,CAAC,EAAE,QAAAC,GAAQ,cAAAC,GAAc,UAAAC,QAAe;AAC7E,QAAAC,IAAgBC,EAAS,QAAQF,CAAQ;AAE/C,yCACK,OAAI,EAAA,gBAAa,eAAc,WAAU,yCAAA,GACrCF,MAAW,aACR,gBAAAK,EAAA,cAAC,OAAI,EAAA,gBAAa,4BAA2B,WAAU,kCAAA,GAClDF,EAAc,IAAI,CAACG,GAAOC,MACvB,gBAAAF,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWJ,KAAgBM,MAAUJ,EAAc,SAAS,IAAI,kBAAkB;AAAA,MAClF,KAAKI;AAAA,IAAA;AAAA,IAEJD;AAAA,EAER,CAAA,CACL,GAEHN,MAAW,4CACP,OAAI,EAAA,gBAAa,2BAA0B,WAAU,kCACjD,GAAAG,EAAc,CAAC,KAAK,gBAAAE,EAAA,cAAC,OAAI,EAAA,WAAU,+BAAgC,GAAAF,EAAc,CAAC,CAAE,GACpFA,EAAc,CAAC,KAAM,gBAAAE,EAAA,cAAA,OAAA,EAAI,WAAU,+BAAgC,GAAAF,EAAc,CAAC,CAAE,GACpFA,EAAc,CAAC,KAAM,gBAAAE,EAAA,cAAA,OAAA,EAAI,WAAU,+BAAA,GAAgCF,EAAc,CAAC,CAAE,GACpFA,EAAc,CAAC,KAAM,gBAAAE,EAAA,cAAA,OAAA,EAAI,WAAU,+BAAA,GAAgCF,EAAc,CAAC,CAAE,CACzF,CAER;AAER;AACAJ,EAAW,cAAc;"}
+{"version":3,"file":"MultiInput.es.js","sources":["../../../src/components/MultiInput/MultiInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { Children, ReactElement, ReactNode } from 'react';\n\nexport enum MultiInputLayout {\n    Columns = 'Columns',\n    Spider = 'Spider',\n}\n\nexport type MultiInputProps = {\n    layout: MultiInputLayout;\n    spanLastItem?: boolean;\n    children: ReactNode;\n};\n\nexport const MultiInput = ({ layout, spanLastItem, children }: MultiInputProps): ReactElement => {\n    const childrenArray = Children.toArray(children);\n\n    return (\n        <div data-test-id=\"multi-input\" className=\"tw-flex tw-gap-2 tw-w-full tw-flex-col\">\n            {layout === MultiInputLayout.Columns && (\n                <div data-test-id=\"multi-input-grid-columns\" className=\"tw-grid tw-grid-cols-2 tw-gap-2\">\n                    {childrenArray.map((child, index) => (\n                        <div\n                            className={spanLastItem && index === childrenArray.length - 1 ? 'tw-col-span-2' : ''}\n                            key={index}\n                        >\n                            {child}\n                        </div>\n                    ))}\n                </div>\n            )}\n            {layout === MultiInputLayout.Spider && (\n                <div data-test-id=\"multi-input-grid-spider\" className=\"tw-grid tw-grid-cols-4 tw-gap-2\">\n                    {childrenArray[0] && <div className=\"tw-col-start-2 tw-col-span-2\">{childrenArray[0]}</div>}\n                    {childrenArray[1] && <div className=\"tw-col-start-1 tw-col-span-2\">{childrenArray[1]}</div>}\n                    {childrenArray[2] && <div className=\"tw-col-start-3 tw-col-span-2\">{childrenArray[2]}</div>}\n                    {childrenArray[3] && <div className=\"tw-col-start-2 tw-col-span-2\">{childrenArray[3]}</div>}\n                </div>\n            )}\n        </div>\n    );\n};\nMultiInput.displayName = 'FondueMultiInput';\n"],"names":["MultiInputLayout","MultiInput","layout","spanLastItem","children","childrenArray","Children","React","child","index"],"mappings":";AAIY,IAAAA,sBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,SAAS,UAFDA,IAAAA,KAAA,CAAA,CAAA;AAWL,MAAMC,IAAa,CAAC,EAAE,QAAAC,GAAQ,cAAAC,GAAc,UAAAC,QAA8C;AACvF,QAAAC,IAAgBC,EAAS,QAAQF,CAAQ;AAE/C,yCACK,OAAI,EAAA,gBAAa,eAAc,WAAU,yCAAA,GACrCF,MAAW,aACR,gBAAAK,EAAA,cAAC,OAAI,EAAA,gBAAa,4BAA2B,WAAU,kCAAA,GAClDF,EAAc,IAAI,CAACG,GAAOC,MACvB,gBAAAF,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWJ,KAAgBM,MAAUJ,EAAc,SAAS,IAAI,kBAAkB;AAAA,MAClF,KAAKI;AAAA,IAAA;AAAA,IAEJD;AAAA,EAER,CAAA,CACL,GAEHN,MAAW,4CACP,OAAI,EAAA,gBAAa,2BAA0B,WAAU,kCACjD,GAAAG,EAAc,CAAC,KAAK,gBAAAE,EAAA,cAAC,OAAI,EAAA,WAAU,+BAAgC,GAAAF,EAAc,CAAC,CAAE,GACpFA,EAAc,CAAC,KAAM,gBAAAE,EAAA,cAAA,OAAA,EAAI,WAAU,+BAAgC,GAAAF,EAAc,CAAC,CAAE,GACpFA,EAAc,CAAC,KAAM,gBAAAE,EAAA,cAAA,OAAA,EAAI,WAAU,+BAAA,GAAgCF,EAAc,CAAC,CAAE,GACpFA,EAAc,CAAC,KAAM,gBAAAE,EAAA,cAAA,OAAA,EAAI,WAAU,+BAAA,GAAgCF,EAAc,CAAC,CAAE,CACzF,CAER;AAER;AACAJ,EAAW,cAAc;"}

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -1,5 +1,5 @@
 import { Validation } from '../../utilities/validation';
-import React, { FC } from 'react';
+import React, { ReactElement } from 'react';
 export declare enum MultiSelectType {
     Default = "Default",
     Summarized = "Summarized"
@@ -49,4 +49,7 @@ export type Item = {
     imgSrc?: string;
     ariaLabel?: string;
 };
-export declare const MultiSelect: FC<MultiSelectProps>;
+export declare const MultiSelect: {
+    ({ items, activeItemKeys, onSelectionChange, ariaLabel, disabled, placeholder, label, filterLabel, noResultsLabel, type, size, validation, emphasis, decorator, filterable, summarizedLabel: summarizedLabelFromProps, indeterminateItemKeys, flip, }: MultiSelectProps): ReactElement;
+    displayName: string;
+};

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger';\nimport { Text } from '@typography/Text';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { ChangeEvent, FC, KeyboardEvent, useEffect, useRef, useState } from 'react';\nimport { getInputWidth, getPaddingClasses } from './helpers';\nimport { Menu } from '@components/Menu';\nimport { MenuItem } from '@components/MenuItem';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { DefaultItem, NoSearchResults, OptionalItems } from './SelectMenuItems';\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@components/Dropdown/useDropdownAutoHeight';\nimport { DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT } from '@components/Dropdown/Dropdown';\n\nexport enum MultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\nexport enum MultiSelectEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n}\n\nexport type MultiSelectItem = {\n    value: string;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    avatar?: React.ReactNode;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\nexport type MultiSelectProps = {\n    items: MultiSelectItem[];\n    activeItemKeys: (string | number)[];\n    disabled?: boolean;\n    onSelectionChange: (keys: (string | number)[]) => void;\n    ariaLabel?: string;\n    label?: string;\n    placeholder?: string;\n    type?: MultiSelectType;\n    size?: MultiSelectSize;\n    validation?: Validation;\n    emphasis?: MultiSelectEmphasis;\n    decorator?: React.ReactNode;\n    filterable?: boolean;\n    filterLabel?: string;\n    noResultsLabel?: string;\n    summarizedLabel?: string;\n    indeterminateItemKeys?: (string | number)[];\n    flip?: boolean;\n};\n\nexport type Item = {\n    label: string;\n    value: string;\n    avatar?: React.ReactNode;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\nexport const MultiSelect: FC<MultiSelectProps> = ({\n    items,\n    activeItemKeys,\n    onSelectionChange,\n    ariaLabel = 'Select list',\n    disabled = false,\n    placeholder,\n    label,\n    filterLabel,\n    noResultsLabel,\n    type = MultiSelectType.Default,\n    size = MultiSelectSize.Medium,\n    validation = Validation.Default,\n    emphasis = MultiSelectEmphasis.Default,\n    decorator = null,\n    filterable = false,\n    summarizedLabel: summarizedLabelFromProps,\n    indeterminateItemKeys,\n    flip = false,\n}) => {\n    const [open, setOpen] = useState(false);\n    const [checkboxes, setCheckboxes] = useState<Item[]>([]);\n    const hasResults = !!checkboxes.find((item) => !item.isCategory && !item.isDivider);\n    const multiSelectRef = useRef<HTMLDivElement | null>(null);\n\n    const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null | HTMLDivElement>(null);\n    const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);\n\n    const filterInputRef = useRef<HTMLInputElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const { maxHeight } = useDropdownAutoHeight({ current: triggerRef }, { isOpen: open, autoResize: true });\n\n    const hasSelectedItems = activeItemKeys.length > 0;\n    const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n    const inputWidth = getInputWidth(hasSelectedItems, filterLabel, placeholder);\n\n    const handleClose = () => setOpen(false);\n\n    useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement, multiSelectMenuRef as HTMLElement]);\n\n    const heightIsReady = maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const toggleOpen = () => setOpen((open) => !open);\n\n    const { buttonProps } = useButton(\n        {\n            onPress: toggleOpen,\n            onKeyDown: (e) => {\n                if (e.key === 'Escape') {\n                    setOpen(false);\n                }\n            },\n            elementType: 'div',\n        },\n        { current: triggerRef },\n    );\n\n    const toggleSelection = (key: string | number) => {\n        const keySet = new Set(activeItemKeys);\n\n        if (keySet.has(key)) {\n            keySet.delete(key);\n        } else {\n            keySet.add(key);\n        }\n\n        onSelectionChange(Array.from(keySet));\n    };\n\n    const handleSpacebarToggle = (e: KeyboardEvent<HTMLDivElement>) => {\n        if (e.code === 'Space' && (filterInputRef.current !== document.activeElement || !filterable)) {\n            toggleOpen();\n        }\n    };\n\n    const getDecoratorClasses = () => {\n        if (emphasis === MultiSelectEmphasis.Weak) {\n            return hasSelectedItems ? '' : 'tw-text-text-weak';\n        }\n\n        return '';\n    };\n\n    const getTagType = () => {\n        if (emphasis === MultiSelectEmphasis.Weak || !open) {\n            return TagType.Selected;\n        }\n        return TagType.SelectedWithFocus;\n    };\n\n    const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {\n        setCheckboxes(\n            items\n                .filter((item) => {\n                    if (item.isCategory || item.isDivider) {\n                        return true;\n                    }\n\n                    return item.value.toLowerCase().includes(e.currentTarget.value.toLowerCase());\n                })\n                .map((item) => ({ ...item, label: item.value })),\n        );\n    };\n\n    useEffect(() => {\n        setCheckboxes(\n            items.map((item) => {\n                const checkboxBaseItem = { ...item, label: item.value };\n                if (indeterminateItemKeys?.includes(item.value)) {\n                    return { ...checkboxBaseItem, state: CheckboxState.Mixed };\n                }\n                return checkboxBaseItem;\n            }),\n        );\n    }, [items, indeterminateItemKeys]);\n\n    const popperInstance = usePopper(triggerRef, multiSelectMenuRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, 8],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    useEffect(() => {\n        if (popperInstance.update) {\n            popperInstance.update();\n        }\n    }, [activeItemKeys]);\n\n    return (\n        <div className=\"tw-relative\" ref={multiSelectRef}>\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={isFocusVisible}\n                isOpen={open}\n                validation={validation}\n                emphasis={emphasis === MultiSelectEmphasis.Default ? TriggerEmphasis.Default : TriggerEmphasis.Weak}\n            >\n                <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])} ref={setTriggerRef}>\n                    <div\n                        className=\"tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0\"\n                        onClick={(e) => {\n                            if (e.target === filterInputRef.current && open) {\n                                return;\n                            }\n                            toggleOpen();\n                        }}\n                        role=\"button\"\n                        {...focusProps}\n                        tabIndex={0}\n                        onKeyDown={handleSpacebarToggle}\n                    >\n                        <div className=\"tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]\">\n                            {decorator && <div className={getDecoratorClasses()}>{decorator}</div>}\n                            {label && hasSelectedItems && <Text weight=\"strong\">{label}</Text>}\n                            {type === MultiSelectType.Default &&\n                                activeItemKeys.map((key) => (\n                                    <Tag\n                                        key={key}\n                                        type={getTagType()}\n                                        label={key.toString()}\n                                        size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                        onClick={() => toggleSelection(key)}\n                                    />\n                                ))}\n\n                            {type === MultiSelectType.Summarized && (hasSelectedItems || summarizedLabelFromProps) && (\n                                <Tag\n                                    type={getTagType()}\n                                    label={summarizedLabel}\n                                    size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                    onClick={\n                                        indeterminateItemKeys?.length === 0 ? () => onSelectionChange([]) : undefined\n                                    }\n                                />\n                            )}\n\n                            {!filterable && activeItemKeys.length === 0 && placeholder && (\n                                <Text color=\"weak\">{placeholder}</Text>\n                            )}\n                        </div>\n                        {filterable && (\n                            <input\n                                ref={filterInputRef}\n                                className=\"focus:tw-outline-0 tw-text-s tw-bg-transparent\"\n                                style={{ maxWidth: inputWidth }}\n                                placeholder={activeItemKeys.length === 0 ? placeholder : filterLabel}\n                                onChange={handleFilterChange}\n                            />\n                        )}\n                    </div>\n                </div>\n            </Trigger>\n\n            {open &&\n                heightIsReady &&\n                emphasis === MultiSelectEmphasis.Default &&\n                createPortal(\n                    <div\n                        ref={setMultiSelectMenuRef}\n                        className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-30 tw-bg-base tw-min-w-[18rem]\"\n                        key=\"content\"\n                        style={{\n                            ...popperInstance.styles.popper,\n                            width: triggerRef?.getBoundingClientRect().width,\n                        }}\n                        {...popperInstance.attributes.popper}\n                    >\n                        <FocusScope restoreFocus>\n                            <div\n                                className=\"tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative\"\n                                style={{ maxHeight }}\n                            >\n                                <Checklist\n                                    activeValues={activeItemKeys.map((key) => key.toString())}\n                                    setActiveValues={onSelectionChange}\n                                    checkboxes={checkboxes.filter((item) => !item.isDivider && !item.isCategory)}\n                                    direction={ChecklistDirection.Vertical}\n                                    ariaLabel={ariaLabel}\n                                />\n                            </div>\n                        </FocusScope>\n                    </div>,\n                    document.body,\n                )}\n            {open &&\n                heightIsReady &&\n                emphasis === MultiSelectEmphasis.Weak &&\n                createPortal(\n                    <AnimatePresence>\n                        <motion.div\n                            ref={setMultiSelectMenuRef}\n                            style={{\n                                ...popperInstance.styles.popper,\n                                width: 'fit-content',\n                                zIndex: 30,\n                            }}\n                            {...popperInstance.attributes.popper}\n                            initial={{ height: DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT }}\n                            animate={{ height: 'auto' }}\n                            transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n                        >\n                            <Menu open={open} onClose={handleClose}>\n                                {checkboxes.length > 0 && hasResults ? (\n                                    checkboxes.map((item, index) => {\n                                        const { label, value, avatar, imgSrc } = item;\n                                        const isChecked = !!activeItemKeys.find((key) => key === value);\n                                        const handleMenuItemClick = () => toggleSelection(label);\n\n                                        if (item.isCategory || item.isDivider) {\n                                            return (\n                                                <OptionalItems\n                                                    key={value + item}\n                                                    {...{\n                                                        checkboxes,\n                                                        index,\n                                                    }}\n                                                />\n                                            );\n                                        }\n\n                                        return (\n                                            <MenuItem checked={isChecked} onClick={handleMenuItemClick} key={value}>\n                                                <DefaultItem {...{ label, value, avatar, imgSrc, isChecked }} />\n                                            </MenuItem>\n                                        );\n                                    })\n                                ) : (\n                                    <NoSearchResults label={noResultsLabel} />\n                                )}\n                            </Menu>\n                        </motion.div>\n                    </AnimatePresence>,\n                    document.body,\n                )}\n        </div>\n    );\n};\nMultiSelect.displayName = 'FondueMultiSelect';\n"],"names":["MultiSelectType","MultiSelectSize","MultiSelectEmphasis","MultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","filterLabel","noResultsLabel","type","size","validation","Validation","emphasis","decorator","filterable","summarizedLabelFromProps","indeterminateItemKeys","flip","open","setOpen","useState","checkboxes","setCheckboxes","hasResults","item","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","filterInputRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","inputWidth","getInputWidth","handleClose","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpacebarToggle","getDecoratorClasses","getTagType","TagType","handleFilterChange","useEffect","checkboxBaseItem","CheckboxState","popperInstance","usePopper","React","Trigger","TriggerEmphasis","merge","getPaddingClasses","Text","Tag","TagSize","createPortal","FocusScope","Checklist","ChecklistDirection","AnimatePresence","motion","DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT","Menu","index","value","avatar","imgSrc","isChecked","handleMenuItemClick","OptionalItems","MenuItem","DefaultItem","NoSearchResults"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger';\nimport { Text } from '@typography/Text';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { ChangeEvent, KeyboardEvent, ReactElement, useEffect, useRef, useState } from 'react';\nimport { getInputWidth, getPaddingClasses } from './helpers';\nimport { Menu } from '@components/Menu';\nimport { MenuItem } from '@components/MenuItem';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { DefaultItem, NoSearchResults, OptionalItems } from './SelectMenuItems';\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@components/Dropdown/useDropdownAutoHeight';\nimport { DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT } from '@components/Dropdown/Dropdown';\n\nexport enum MultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\nexport enum MultiSelectEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n}\n\nexport type MultiSelectItem = {\n    value: string;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    avatar?: React.ReactNode;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\nexport type MultiSelectProps = {\n    items: MultiSelectItem[];\n    activeItemKeys: (string | number)[];\n    disabled?: boolean;\n    onSelectionChange: (keys: (string | number)[]) => void;\n    ariaLabel?: string;\n    label?: string;\n    placeholder?: string;\n    type?: MultiSelectType;\n    size?: MultiSelectSize;\n    validation?: Validation;\n    emphasis?: MultiSelectEmphasis;\n    decorator?: React.ReactNode;\n    filterable?: boolean;\n    filterLabel?: string;\n    noResultsLabel?: string;\n    summarizedLabel?: string;\n    indeterminateItemKeys?: (string | number)[];\n    flip?: boolean;\n};\n\nexport type Item = {\n    label: string;\n    value: string;\n    avatar?: React.ReactNode;\n    isCategory?: boolean;\n    isDivider?: boolean;\n    imgSrc?: string;\n    ariaLabel?: string;\n};\n\nexport const MultiSelect = ({\n    items,\n    activeItemKeys,\n    onSelectionChange,\n    ariaLabel = 'Select list',\n    disabled = false,\n    placeholder,\n    label,\n    filterLabel,\n    noResultsLabel,\n    type = MultiSelectType.Default,\n    size = MultiSelectSize.Medium,\n    validation = Validation.Default,\n    emphasis = MultiSelectEmphasis.Default,\n    decorator = null,\n    filterable = false,\n    summarizedLabel: summarizedLabelFromProps,\n    indeterminateItemKeys,\n    flip = false,\n}: MultiSelectProps): ReactElement => {\n    const [open, setOpen] = useState(false);\n    const [checkboxes, setCheckboxes] = useState<Item[]>([]);\n    const hasResults = !!checkboxes.find((item) => !item.isCategory && !item.isDivider);\n    const multiSelectRef = useRef<HTMLDivElement | null>(null);\n\n    const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null | HTMLDivElement>(null);\n    const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);\n\n    const filterInputRef = useRef<HTMLInputElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const { maxHeight } = useDropdownAutoHeight({ current: triggerRef }, { isOpen: open, autoResize: true });\n\n    const hasSelectedItems = activeItemKeys.length > 0;\n    const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n    const inputWidth = getInputWidth(hasSelectedItems, filterLabel, placeholder);\n\n    const handleClose = () => setOpen(false);\n\n    useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement, multiSelectMenuRef as HTMLElement]);\n\n    const heightIsReady = maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n    const toggleOpen = () => setOpen((open) => !open);\n\n    const { buttonProps } = useButton(\n        {\n            onPress: toggleOpen,\n            onKeyDown: (e) => {\n                if (e.key === 'Escape') {\n                    setOpen(false);\n                }\n            },\n            elementType: 'div',\n        },\n        { current: triggerRef },\n    );\n\n    const toggleSelection = (key: string | number) => {\n        const keySet = new Set(activeItemKeys);\n\n        if (keySet.has(key)) {\n            keySet.delete(key);\n        } else {\n            keySet.add(key);\n        }\n\n        onSelectionChange(Array.from(keySet));\n    };\n\n    const handleSpacebarToggle = (e: KeyboardEvent<HTMLDivElement>) => {\n        if (e.code === 'Space' && (filterInputRef.current !== document.activeElement || !filterable)) {\n            toggleOpen();\n        }\n    };\n\n    const getDecoratorClasses = () => {\n        if (emphasis === MultiSelectEmphasis.Weak) {\n            return hasSelectedItems ? '' : 'tw-text-text-weak';\n        }\n\n        return '';\n    };\n\n    const getTagType = () => {\n        if (emphasis === MultiSelectEmphasis.Weak || !open) {\n            return TagType.Selected;\n        }\n        return TagType.SelectedWithFocus;\n    };\n\n    const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {\n        setCheckboxes(\n            items\n                .filter((item) => {\n                    if (item.isCategory || item.isDivider) {\n                        return true;\n                    }\n\n                    return item.value.toLowerCase().includes(e.currentTarget.value.toLowerCase());\n                })\n                .map((item) => ({ ...item, label: item.value })),\n        );\n    };\n\n    useEffect(() => {\n        setCheckboxes(\n            items.map((item) => {\n                const checkboxBaseItem = { ...item, label: item.value };\n                if (indeterminateItemKeys?.includes(item.value)) {\n                    return { ...checkboxBaseItem, state: CheckboxState.Mixed };\n                }\n                return checkboxBaseItem;\n            }),\n        );\n    }, [items, indeterminateItemKeys]);\n\n    const popperInstance = usePopper(triggerRef, multiSelectMenuRef, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, 8],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    useEffect(() => {\n        if (popperInstance.update) {\n            popperInstance.update();\n        }\n    }, [activeItemKeys]);\n\n    return (\n        <div className=\"tw-relative\" ref={multiSelectRef}>\n            <Trigger\n                disabled={disabled}\n                buttonProps={buttonProps}\n                isFocusVisible={isFocusVisible}\n                isOpen={open}\n                validation={validation}\n                emphasis={emphasis === MultiSelectEmphasis.Default ? TriggerEmphasis.Default : TriggerEmphasis.Weak}\n            >\n                <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])} ref={setTriggerRef}>\n                    <div\n                        className=\"tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0\"\n                        onClick={(e) => {\n                            if (e.target === filterInputRef.current && open) {\n                                return;\n                            }\n                            toggleOpen();\n                        }}\n                        role=\"button\"\n                        {...focusProps}\n                        tabIndex={0}\n                        onKeyDown={handleSpacebarToggle}\n                    >\n                        <div className=\"tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]\">\n                            {decorator && <div className={getDecoratorClasses()}>{decorator}</div>}\n                            {label && hasSelectedItems && <Text weight=\"strong\">{label}</Text>}\n                            {type === MultiSelectType.Default &&\n                                activeItemKeys.map((key) => (\n                                    <Tag\n                                        key={key}\n                                        type={getTagType()}\n                                        label={key.toString()}\n                                        size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                        onClick={() => toggleSelection(key)}\n                                    />\n                                ))}\n\n                            {type === MultiSelectType.Summarized && (hasSelectedItems || summarizedLabelFromProps) && (\n                                <Tag\n                                    type={getTagType()}\n                                    label={summarizedLabel}\n                                    size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                    onClick={\n                                        indeterminateItemKeys?.length === 0 ? () => onSelectionChange([]) : undefined\n                                    }\n                                />\n                            )}\n\n                            {!filterable && activeItemKeys.length === 0 && placeholder && (\n                                <Text color=\"weak\">{placeholder}</Text>\n                            )}\n                        </div>\n                        {filterable && (\n                            <input\n                                ref={filterInputRef}\n                                className=\"focus:tw-outline-0 tw-text-s tw-bg-transparent\"\n                                style={{ maxWidth: inputWidth }}\n                                placeholder={activeItemKeys.length === 0 ? placeholder : filterLabel}\n                                onChange={handleFilterChange}\n                            />\n                        )}\n                    </div>\n                </div>\n            </Trigger>\n\n            {open &&\n                heightIsReady &&\n                emphasis === MultiSelectEmphasis.Default &&\n                createPortal(\n                    <div\n                        ref={setMultiSelectMenuRef}\n                        className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-30 tw-bg-base tw-min-w-[18rem]\"\n                        key=\"content\"\n                        style={{\n                            ...popperInstance.styles.popper,\n                            width: triggerRef?.getBoundingClientRect().width,\n                        }}\n                        {...popperInstance.attributes.popper}\n                    >\n                        <FocusScope restoreFocus>\n                            <div\n                                className=\"tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative\"\n                                style={{ maxHeight }}\n                            >\n                                <Checklist\n                                    activeValues={activeItemKeys.map((key) => key.toString())}\n                                    setActiveValues={onSelectionChange}\n                                    checkboxes={checkboxes.filter((item) => !item.isDivider && !item.isCategory)}\n                                    direction={ChecklistDirection.Vertical}\n                                    ariaLabel={ariaLabel}\n                                />\n                            </div>\n                        </FocusScope>\n                    </div>,\n                    document.body,\n                )}\n            {open &&\n                heightIsReady &&\n                emphasis === MultiSelectEmphasis.Weak &&\n                createPortal(\n                    <AnimatePresence>\n                        <motion.div\n                            ref={setMultiSelectMenuRef}\n                            style={{\n                                ...popperInstance.styles.popper,\n                                width: 'fit-content',\n                                zIndex: 30,\n                            }}\n                            {...popperInstance.attributes.popper}\n                            initial={{ height: DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT }}\n                            animate={{ height: 'auto' }}\n                            transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n                        >\n                            <Menu open={open} onClose={handleClose}>\n                                {checkboxes.length > 0 && hasResults ? (\n                                    checkboxes.map((item, index) => {\n                                        const { label, value, avatar, imgSrc } = item;\n                                        const isChecked = !!activeItemKeys.find((key) => key === value);\n                                        const handleMenuItemClick = () => toggleSelection(label);\n\n                                        if (item.isCategory || item.isDivider) {\n                                            return (\n                                                <OptionalItems\n                                                    key={value + item}\n                                                    {...{\n                                                        checkboxes,\n                                                        index,\n                                                    }}\n                                                />\n                                            );\n                                        }\n\n                                        return (\n                                            <MenuItem checked={isChecked} onClick={handleMenuItemClick} key={value}>\n                                                <DefaultItem {...{ label, value, avatar, imgSrc, isChecked }} />\n                                            </MenuItem>\n                                        );\n                                    })\n                                ) : (\n                                    <NoSearchResults label={noResultsLabel} />\n                                )}\n                            </Menu>\n                        </motion.div>\n                    </AnimatePresence>,\n                    document.body,\n                )}\n        </div>\n    );\n};\nMultiSelect.displayName = 'FondueMultiSelect';\n"],"names":["MultiSelectType","MultiSelectSize","MultiSelectEmphasis","MultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","filterLabel","noResultsLabel","type","size","validation","Validation","emphasis","decorator","filterable","summarizedLabelFromProps","indeterminateItemKeys","flip","open","setOpen","useState","checkboxes","setCheckboxes","hasResults","item","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","filterInputRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","inputWidth","getInputWidth","handleClose","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpacebarToggle","getDecoratorClasses","getTagType","TagType","handleFilterChange","useEffect","checkboxBaseItem","CheckboxState","popperInstance","usePopper","React","Trigger","TriggerEmphasis","merge","getPaddingClasses","Text","Tag","TagSize","createPortal","FocusScope","Checklist","ChecklistDirection","AnimatePresence","motion","DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT","Menu","index","value","avatar","imgSrc","isChecked","handleMenuItemClick","OptionalItems","MenuItem","DefaultItem","NoSearchResults"],"mappings":"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"}

package/dist/components/RadioPill/RadioPill.d.ts

@@ -1,8 +1,11 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { MouseEvent, ReactElement } from 'react';
 export type RadioPillProps = {
     label: string;
     active: boolean;
     onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;
     icon?: React.ReactElement;
 };
-export declare const RadioPill: FC<RadioPillProps>;
+export declare const RadioPill: {
+    ({ label, active, icon, onClick }: RadioPillProps): ReactElement;
+    displayName: string;
+};

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

@@ -1 +1 @@
-{"version":3,"file":"RadioPill.es.js","sources":["../../../src/components/RadioPill/RadioPill.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, MouseEvent, cloneElement } from 'react';\n\nexport type RadioPillProps = {\n    label: string;\n    active: boolean;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    icon?: React.ReactElement;\n};\n\nexport const RadioPill: FC<RadioPillProps> = ({ label, active, icon, onClick }) => {\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <button\n            data-test-id=\"radio-pill\"\n            type=\"button\"\n            className={merge([\n                'tw-inline-flex tw-items-center tw-rounded-full tw-text-xs tw-px-2 tw-py-1',\n                active\n                    ? 'dark:tw-bg-black-5 dark:tw-text-black-100 tw-bg-black-100 tw-text-white'\n                    : 'tw-text-black-80 dark:tw-text-black-40',\n                isFocusVisible && FOCUS_STYLE,\n                !!onClick ? 'tw-cursor-pointer' : 'tw-cursor-auto',\n            ])}\n            onClick={onClick}\n            {...focusProps}\n        >\n            {icon && <span className=\"tw-mr-1\">{cloneElement(icon, { size: IconSize.Size16 })}</span>}\n            <span>{label}</span>\n        </button>\n    );\n};\nRadioPill.displayName = 'FondueRadioPill';\n"],"names":["RadioPill","label","active","icon","onClick","isFocusVisible","focusProps","useFocusRing","React","merge","FOCUS_STYLE","cloneElement","IconSize"],"mappings":";;;;;AAeO,MAAMA,IAAgC,CAAC,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,QAAc;AAC/E,QAAM,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa;AAGhD,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,MAAK;AAAA,MACL,WAAWC,EAAM;AAAA,QACb;AAAA,QACAP,IACM,4EACA;AAAA,QACNG,KAAkBK;AAAA,QAChBN,IAAU,sBAAsB;AAAA,MAAA,CACrC;AAAA,MACD,SAAAA;AAAA,MACC,GAAGE;AAAA,IAAA;AAAA,IAEHH,KAAQ,gBAAAK,EAAA,cAAC,QAAK,EAAA,WAAU,UAAW,GAAAG,EAAaR,GAAM,EAAE,MAAMS,EAAS,OAAQ,CAAA,CAAE;AAAA,IAClF,gBAAAJ,EAAA,cAAC,cAAMP,CAAM;AAAA,EAAA;AAGzB;AACAD,EAAU,cAAc;"}
+{"version":3,"file":"RadioPill.es.js","sources":["../../../src/components/RadioPill/RadioPill.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { MouseEvent, ReactElement, cloneElement } from 'react';\n\nexport type RadioPillProps = {\n    label: string;\n    active: boolean;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    icon?: React.ReactElement;\n};\n\nexport const RadioPill = ({ label, active, icon, onClick }: RadioPillProps): ReactElement => {\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <button\n            data-test-id=\"radio-pill\"\n            type=\"button\"\n            className={merge([\n                'tw-inline-flex tw-items-center tw-rounded-full tw-text-xs tw-px-2 tw-py-1',\n                active\n                    ? 'dark:tw-bg-black-5 dark:tw-text-black-100 tw-bg-black-100 tw-text-white'\n                    : 'tw-text-black-80 dark:tw-text-black-40',\n                isFocusVisible && FOCUS_STYLE,\n                !!onClick ? 'tw-cursor-pointer' : 'tw-cursor-auto',\n            ])}\n            onClick={onClick}\n            {...focusProps}\n        >\n            {icon && <span className=\"tw-mr-1\">{cloneElement(icon, { size: IconSize.Size16 })}</span>}\n            <span>{label}</span>\n        </button>\n    );\n};\nRadioPill.displayName = 'FondueRadioPill';\n"],"names":["RadioPill","label","active","icon","onClick","isFocusVisible","focusProps","useFocusRing","React","merge","FOCUS_STYLE","cloneElement","IconSize"],"mappings":";;;;;AAeO,MAAMA,IAAY,CAAC,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,QAA4C;AACzF,QAAM,EAAE,gBAAAC,GAAgB,YAAAC,EAAW,IAAIC,EAAa;AAGhD,SAAA,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAa;AAAA,MACb,MAAK;AAAA,MACL,WAAWC,EAAM;AAAA,QACb;AAAA,QACAP,IACM,4EACA;AAAA,QACNG,KAAkBK;AAAA,QAChBN,IAAU,sBAAsB;AAAA,MAAA,CACrC;AAAA,MACD,SAAAA;AAAA,MACC,GAAGE;AAAA,IAAA;AAAA,IAEHH,KAAQ,gBAAAK,EAAA,cAAC,QAAK,EAAA,WAAU,UAAW,GAAAG,EAAaR,GAAM,EAAE,MAAMS,EAAS,OAAQ,CAAA,CAAE;AAAA,IAClF,gBAAAJ,EAAA,cAAC,cAAMP,CAAM;AAAA,EAAA;AAGzB;AACAD,EAAU,cAAc;"}

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.es.js

@@ -41,7 +41,13 @@ const p = (r) => ({
       break;
   }
   return { ...t, cursor: "pointer", display: "inline-block", margin: "10px 0" };
-}, m = ({ attributes: r, styles: e = { hover: {} }, children: t, href: o = "#", target: s }) => {
+}, m = ({
+  attributes: r,
+  styles: e = { hover: {} },
+  children: t,
+  href: o = "#",
+  target: s
+}) => {
   const [a, n] = l(!1);
   return /* @__PURE__ */ u.createElement(
     "a",

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonMarkupElementNode.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\nimport { DesignTokens } from '@components/RichTextEditor/types';\nimport { HTMLPropsAs, PlateRenderElementProps, Value, useElementProps } from '@udecode/plate';\nimport React, { CSSProperties, FC, ReactNode, useState } from 'react';\nimport { ButtonStyles } from '../../TextStylePlugin/TextStyles';\nimport { RichTextButtonStyle, TButtonElement } from '../types';\n\nexport type ButtonRootProps = PlateRenderElementProps<Value, TButtonElement> & HTMLPropsAs<'a'>;\n\nconst useButton = (props: ButtonRootProps): HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle } => {\n    const _props = useElementProps<TButtonElement, 'a'>({\n        ...props,\n        elementToAttributes: (element) => ({\n            url: element.href,\n            buttonStyle: element.buttonStyle || 'primary',\n            target: element.target || '_blank',\n        }),\n    });\n\n    return {\n        ...(_props as HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle }),\n        // quick fix: hovering <a> with href loses the editor focus\n        onMouseOver: (e) => {\n            e.stopPropagation();\n        },\n    };\n};\n\nexport const ButtonMarkupElementNode = (props: ButtonRootProps) => {\n    const context = useRichTextEditorContext();\n    const { href, target, buttonStyle } = useButton(props);\n    const { attributes, children } = props;\n\n    return (\n        <HoverableButtonLink\n            attributes={attributes}\n            href={href}\n            target={target}\n            styles={context ? getButtonStyle(context.designTokens, buttonStyle) : undefined}\n        >\n            {children}\n        </HoverableButtonLink>\n    );\n};\n\nexport const getButtonStyle = (designTokens: DesignTokens, buttonStyle: RichTextButtonStyle) => {\n    let styles;\n    const design = designTokens as Partial<Record<ButtonStyles, CSSProperties & { hover: CSSProperties }>>;\n    switch (buttonStyle) {\n        case 'primary':\n            styles = design.buttonPrimary;\n            break;\n        case 'secondary':\n            styles = design.buttonSecondary;\n            break;\n        case 'tertiary':\n            styles = design.buttonTertiary;\n            break;\n    }\n    return { ...styles, cursor: 'pointer', display: 'inline-block', margin: '10px 0' };\n};\n\ntype Props = {\n    attributes: ButtonRootProps['attributes'];\n    children: ReactNode;\n    styles?: React.CSSProperties & { hover?: React.CSSProperties };\n    href?: string;\n    target?: React.HTMLAttributeAnchorTarget;\n};\n\nconst HoverableButtonLink: FC<Props> = ({ attributes, styles = { hover: {} }, children, href = '#', target }) => {\n    const [hovered, setHovered] = useState(false);\n\n    return (\n        <a\n            {...attributes}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n            href={href}\n            target={target}\n            style={hovered ? { ...styles, ...styles.hover } : styles}\n        >\n            {children}\n        </a>\n    );\n};\n"],"names":["useButton","props","useElementProps","element","e","ButtonMarkupElementNode","context","useRichTextEditorContext","href","target","buttonStyle","attributes","children","React","HoverableButtonLink","getButtonStyle","designTokens","styles","design","hovered","setHovered","useState"],"mappings":";;;AAWA,MAAMA,IAAY,CAACC,OAUR;AAAA,EACH,GAVWC,EAAqC;AAAA,IAChD,GAAGD;AAAA,IACH,qBAAqB,CAACE,OAAa;AAAA,MAC/B,KAAKA,EAAQ;AAAA,MACb,aAAaA,EAAQ,eAAe;AAAA,MACpC,QAAQA,EAAQ,UAAU;AAAA,IAAA;AAAA,EAC9B,CACH;AAAA;AAAA,EAKG,aAAa,CAACC,MAAM;AAChB,IAAAA,EAAE,gBAAgB;AAAA,EACtB;AAAA,IAIKC,IAA0B,CAACJ,MAA2B;AAC/D,QAAMK,IAAUC,KACV,EAAE,MAAAC,GAAM,QAAAC,GAAQ,aAAAC,EAAY,IAAIV,EAAUC,CAAK,GAC/C,EAAE,YAAAU,GAAY,UAAAC,EAAa,IAAAX;AAG7B,SAAA,gBAAAY,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,YAAAH;AAAA,MACA,MAAAH;AAAA,MACA,QAAAC;AAAA,MACA,QAAQH,IAAUS,EAAeT,EAAQ,cAAcI,CAAW,IAAI;AAAA,IAAA;AAAA,IAErEE;AAAA,EAAA;AAGb,GAEaG,IAAiB,CAACC,GAA4BN,MAAqC;AACxF,MAAAO;AACJ,QAAMC,IAASF;AACf,UAAQN,GAAa;AAAA,IACjB,KAAK;AACD,MAAAO,IAASC,EAAO;AAChB;AAAA,IACJ,KAAK;AACD,MAAAD,IAASC,EAAO;AAChB;AAAA,IACJ,KAAK;AACD,MAAAD,IAASC,EAAO;AAChB;AAAA,EACR;AACO,SAAA,EAAE,GAAGD,GAAQ,QAAQ,WAAW,SAAS,gBAAgB,QAAQ;AAC5E,GAUMH,IAAiC,CAAC,EAAE,YAAAH,GAAY,QAAAM,IAAS,EAAE,OAAO,GAAM,GAAA,UAAAL,GAAU,MAAAJ,IAAO,KAAK,QAAAC,QAAa;AAC7G,QAAM,CAACU,GAASC,CAAU,IAAIC,EAAS,EAAK;AAGxC,SAAA,gBAAAR,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,cAAc,MAAMS,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,MAAAZ;AAAA,MACA,QAAAC;AAAA,MACA,OAAOU,IAAU,EAAE,GAAGF,GAAQ,GAAGA,EAAO,UAAUA;AAAA,IAAA;AAAA,IAEjDL;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"ButtonMarkupElementNode.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/ButtonMarkupElement/ButtonMarkupElementNode.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\nimport { DesignTokens } from '@components/RichTextEditor/types';\nimport { HTMLPropsAs, PlateRenderElementProps, Value, useElementProps } from '@udecode/plate';\nimport React, { CSSProperties, ReactElement, ReactNode, useState } from 'react';\nimport { ButtonStyles } from '../../TextStylePlugin/TextStyles';\nimport { RichTextButtonStyle, TButtonElement } from '../types';\n\nexport type ButtonRootProps = PlateRenderElementProps<Value, TButtonElement> & HTMLPropsAs<'a'>;\n\nconst useButton = (props: ButtonRootProps): HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle } => {\n    const _props = useElementProps<TButtonElement, 'a'>({\n        ...props,\n        elementToAttributes: (element) => ({\n            url: element.href,\n            buttonStyle: element.buttonStyle || 'primary',\n            target: element.target || '_blank',\n        }),\n    });\n\n    return {\n        ...(_props as HTMLPropsAs<'a'> & { buttonStyle: RichTextButtonStyle }),\n        // quick fix: hovering <a> with href loses the editor focus\n        onMouseOver: (e) => {\n            e.stopPropagation();\n        },\n    };\n};\n\nexport const ButtonMarkupElementNode = (props: ButtonRootProps) => {\n    const context = useRichTextEditorContext();\n    const { href, target, buttonStyle } = useButton(props);\n    const { attributes, children } = props;\n\n    return (\n        <HoverableButtonLink\n            attributes={attributes}\n            href={href}\n            target={target}\n            styles={context ? getButtonStyle(context.designTokens, buttonStyle) : undefined}\n        >\n            {children}\n        </HoverableButtonLink>\n    );\n};\n\nexport const getButtonStyle = (designTokens: DesignTokens, buttonStyle: RichTextButtonStyle) => {\n    let styles;\n    const design = designTokens as Partial<Record<ButtonStyles, CSSProperties & { hover: CSSProperties }>>;\n    switch (buttonStyle) {\n        case 'primary':\n            styles = design.buttonPrimary;\n            break;\n        case 'secondary':\n            styles = design.buttonSecondary;\n            break;\n        case 'tertiary':\n            styles = design.buttonTertiary;\n            break;\n    }\n    return { ...styles, cursor: 'pointer', display: 'inline-block', margin: '10px 0' };\n};\n\ntype Props = {\n    attributes: ButtonRootProps['attributes'];\n    children: ReactNode;\n    styles?: React.CSSProperties & { hover?: React.CSSProperties };\n    href?: string;\n    target?: React.HTMLAttributeAnchorTarget;\n};\n\nconst HoverableButtonLink = ({\n    attributes,\n    styles = { hover: {} },\n    children,\n    href = '#',\n    target,\n}: Props): ReactElement => {\n    const [hovered, setHovered] = useState(false);\n\n    return (\n        <a\n            {...attributes}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n            href={href}\n            target={target}\n            style={hovered ? { ...styles, ...styles.hover } : styles}\n        >\n            {children}\n        </a>\n    );\n};\n"],"names":["useButton","props","useElementProps","element","e","ButtonMarkupElementNode","context","useRichTextEditorContext","href","target","buttonStyle","attributes","children","React","HoverableButtonLink","getButtonStyle","designTokens","styles","design","hovered","setHovered","useState"],"mappings":";;;AAWA,MAAMA,IAAY,CAACC,OAUR;AAAA,EACH,GAVWC,EAAqC;AAAA,IAChD,GAAGD;AAAA,IACH,qBAAqB,CAACE,OAAa;AAAA,MAC/B,KAAKA,EAAQ;AAAA,MACb,aAAaA,EAAQ,eAAe;AAAA,MACpC,QAAQA,EAAQ,UAAU;AAAA,IAAA;AAAA,EAC9B,CACH;AAAA;AAAA,EAKG,aAAa,CAACC,MAAM;AAChB,IAAAA,EAAE,gBAAgB;AAAA,EACtB;AAAA,IAIKC,IAA0B,CAACJ,MAA2B;AAC/D,QAAMK,IAAUC,KACV,EAAE,MAAAC,GAAM,QAAAC,GAAQ,aAAAC,EAAY,IAAIV,EAAUC,CAAK,GAC/C,EAAE,YAAAU,GAAY,UAAAC,EAAa,IAAAX;AAG7B,SAAA,gBAAAY,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,YAAAH;AAAA,MACA,MAAAH;AAAA,MACA,QAAAC;AAAA,MACA,QAAQH,IAAUS,EAAeT,EAAQ,cAAcI,CAAW,IAAI;AAAA,IAAA;AAAA,IAErEE;AAAA,EAAA;AAGb,GAEaG,IAAiB,CAACC,GAA4BN,MAAqC;AACxF,MAAAO;AACJ,QAAMC,IAASF;AACf,UAAQN,GAAa;AAAA,IACjB,KAAK;AACD,MAAAO,IAASC,EAAO;AAChB;AAAA,IACJ,KAAK;AACD,MAAAD,IAASC,EAAO;AAChB;AAAA,IACJ,KAAK;AACD,MAAAD,IAASC,EAAO;AAChB;AAAA,EACR;AACO,SAAA,EAAE,GAAGD,GAAQ,QAAQ,WAAW,SAAS,gBAAgB,QAAQ;AAC5E,GAUMH,IAAsB,CAAC;AAAA,EACzB,YAAAH;AAAA,EACA,QAAAM,IAAS,EAAE,OAAO,GAAG;AAAA,EACrB,UAAAL;AAAA,EACA,MAAAJ,IAAO;AAAA,EACP,QAAAC;AACJ,MAA2B;AACvB,QAAM,CAACU,GAASC,CAAU,IAAIC,EAAS,EAAK;AAGxC,SAAA,gBAAAR,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGF;AAAA,MACJ,cAAc,MAAMS,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,MAAAZ;AAAA,MACA,QAAAC;AAAA,MACA,OAAOU,IAAU,EAAE,GAAGF,GAAQ,GAAGA,EAAO,UAAUA;AAAA,IAAA;AAAA,IAEjDL;AAAA,EAAA;AAGb;"}

package/dist/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsertButtonModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { CSSProperties, FC, ReactNode, useState } from 'react';\n\nimport { FormControl } from '@components/FormControl';\nimport { useInsertModal } from './useInsertModal';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\nimport { InsertModal } from '@components/RichTextEditor/Plugins/LinkPlugin/FloatingLink/InsertLinkModal';\nimport { ButtonStyles } from '@components/RichTextEditor/Plugins/TextStylePlugin/TextStyles';\n\nexport const InsertButtonModal = () => {\n    const modalProps = useInsertModal();\n    const { state, onButtonStyleChange } = modalProps;\n    const context = useRichTextEditorContext();\n\n    const designTokens = context.designTokens as Partial<\n        Record<ButtonStyles, CSSProperties & { hover: CSSProperties }>\n    >;\n\n    return (\n        <InsertModal {...modalProps} testId=\"floating-button-insert\">\n            <div className=\"tw-pt-5\">\n                <FormControl\n                    label={{\n                        children: 'Button Style',\n                        htmlFor: 'buttonStyle',\n                        required: true,\n                    }}\n                >\n                    <HoverableButton\n                        id=\"primary\"\n                        styles={designTokens.buttonPrimary}\n                        isActive={state.buttonStyle === 'primary'}\n                        onClick={() => onButtonStyleChange('primary')}\n                    >\n                        {state.text || 'Primary Button'}\n                    </HoverableButton>\n\n                    <HoverableButton\n                        id=\"secondary\"\n                        styles={designTokens.buttonSecondary}\n                        isActive={state.buttonStyle === 'secondary'}\n                        onClick={() => onButtonStyleChange('secondary')}\n                    >\n                        {state.text || 'Secondary Button'}\n                    </HoverableButton>\n\n                    <HoverableButton\n                        id=\"tertiary\"\n                        styles={designTokens.buttonTertiary}\n                        isActive={state.buttonStyle === 'tertiary'}\n                        onClick={() => onButtonStyleChange('tertiary')}\n                    >\n                        {state.text || 'Tertiary Button'}\n                    </HoverableButton>\n                </FormControl>\n            </div>\n        </InsertModal>\n    );\n};\n\ntype Props = {\n    id: string;\n    styles?: CSSProperties & { hover?: CSSProperties };\n    isActive: boolean;\n    onClick: () => void;\n    children: ReactNode;\n};\n\nconst HoverableButton: FC<Props> = ({ id, styles, isActive, onClick, children }) => {\n    const [hovered, setHovered] = useState(false);\n    const getStyles = () => (styles && styles.hover && hovered ? { ...styles, ...styles.hover } : styles);\n\n    return (\n        <button\n            data-test-id={`floating-button-insert-${id}`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n            onClick={onClick}\n            style={getStyles()}\n            className={\n                isActive ? 'tw-outline tw-outline-1 tw-outline-violet-60 tw-outline-offset-2 tw-w-fit' : 'tw-w-fit'\n            }\n        >\n            {children}\n        </button>\n    );\n};\n"],"names":["InsertButtonModal","modalProps","useInsertModal","state","onButtonStyleChange","designTokens","useRichTextEditorContext","React","InsertModal","FormControl","HoverableButton","id","styles","isActive","onClick","children","hovered","setHovered","useState","getStyles"],"mappings":";;;;;AAUO,MAAMA,IAAoB,MAAM;AACnC,QAAMC,IAAaC,KACb,EAAE,OAAAC,GAAO,qBAAAC,EAAwB,IAAAH,GAGjCI,IAFUC,IAEa;AAKzB,SAAA,gBAAAC,EAAA,cAACC,KAAa,GAAGP,GAAY,QAAO,yBAChC,GAAA,gBAAAM,EAAA,cAAC,OAAI,EAAA,WAAU,UACX,GAAA,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,IAAA;AAAA,IAEA,gBAAAF,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,QAAQL,EAAa;AAAA,QACrB,UAAUF,EAAM,gBAAgB;AAAA,QAChC,SAAS,MAAMC,EAAoB,SAAS;AAAA,MAAA;AAAA,MAE3CD,EAAM,QAAQ;AAAA,IACnB;AAAA,IAEA,gBAAAI,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,QAAQL,EAAa;AAAA,QACrB,UAAUF,EAAM,gBAAgB;AAAA,QAChC,SAAS,MAAMC,EAAoB,WAAW;AAAA,MAAA;AAAA,MAE7CD,EAAM,QAAQ;AAAA,IACnB;AAAA,IAEA,gBAAAI,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,QAAQL,EAAa;AAAA,QACrB,UAAUF,EAAM,gBAAgB;AAAA,QAChC,SAAS,MAAMC,EAAoB,UAAU;AAAA,MAAA;AAAA,MAE5CD,EAAM,QAAQ;AAAA,IACnB;AAAA,EAER,CAAA,CACJ;AAER,GAUMO,IAA6B,CAAC,EAAE,IAAAC,GAAI,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,GAAS,UAAAC,QAAe;AAChF,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAY,MAAOP,KAAUA,EAAO,SAASI,IAAU,EAAE,GAAGJ,GAAQ,GAAGA,EAAO,MAAA,IAAUA;AAG1F,SAAA,gBAAAL,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,0BAA0BI;AAAA,MACxC,cAAc,MAAMM,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,SAAAH;AAAA,MACA,OAAOK,EAAU;AAAA,MACjB,WACIN,IAAW,8EAA8E;AAAA,IAAA;AAAA,IAG5FE;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"InsertButtonModal.es.js","sources":["../../../../../../../../src/components/RichTextEditor/Plugins/ButtonPlugin/components/FloatingButton/InsertButtonModal/InsertButtonModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { CSSProperties, ReactElement, ReactNode, useState } from 'react';\n\nimport { FormControl } from '@components/FormControl';\nimport { useInsertModal } from './useInsertModal';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\nimport { InsertModal } from '@components/RichTextEditor/Plugins/LinkPlugin/FloatingLink/InsertLinkModal';\nimport { ButtonStyles } from '@components/RichTextEditor/Plugins/TextStylePlugin/TextStyles';\n\nexport const InsertButtonModal = () => {\n    const modalProps = useInsertModal();\n    const { state, onButtonStyleChange } = modalProps;\n    const context = useRichTextEditorContext();\n\n    const designTokens = context.designTokens as Partial<\n        Record<ButtonStyles, CSSProperties & { hover: CSSProperties }>\n    >;\n\n    return (\n        <InsertModal {...modalProps} testId=\"floating-button-insert\">\n            <div className=\"tw-pt-5\">\n                <FormControl\n                    label={{\n                        children: 'Button Style',\n                        htmlFor: 'buttonStyle',\n                        required: true,\n                    }}\n                >\n                    <HoverableButton\n                        id=\"primary\"\n                        styles={designTokens.buttonPrimary}\n                        isActive={state.buttonStyle === 'primary'}\n                        onClick={() => onButtonStyleChange('primary')}\n                    >\n                        {state.text || 'Primary Button'}\n                    </HoverableButton>\n\n                    <HoverableButton\n                        id=\"secondary\"\n                        styles={designTokens.buttonSecondary}\n                        isActive={state.buttonStyle === 'secondary'}\n                        onClick={() => onButtonStyleChange('secondary')}\n                    >\n                        {state.text || 'Secondary Button'}\n                    </HoverableButton>\n\n                    <HoverableButton\n                        id=\"tertiary\"\n                        styles={designTokens.buttonTertiary}\n                        isActive={state.buttonStyle === 'tertiary'}\n                        onClick={() => onButtonStyleChange('tertiary')}\n                    >\n                        {state.text || 'Tertiary Button'}\n                    </HoverableButton>\n                </FormControl>\n            </div>\n        </InsertModal>\n    );\n};\n\ntype Props = {\n    id: string;\n    styles?: CSSProperties & { hover?: CSSProperties };\n    isActive: boolean;\n    onClick: () => void;\n    children: ReactNode;\n};\n\nconst HoverableButton = ({ id, styles, isActive, onClick, children }: Props): ReactElement => {\n    const [hovered, setHovered] = useState(false);\n    const getStyles = () => (styles && styles.hover && hovered ? { ...styles, ...styles.hover } : styles);\n\n    return (\n        <button\n            data-test-id={`floating-button-insert-${id}`}\n            onMouseEnter={() => setHovered(true)}\n            onMouseLeave={() => setHovered(false)}\n            onClick={onClick}\n            style={getStyles()}\n            className={\n                isActive ? 'tw-outline tw-outline-1 tw-outline-violet-60 tw-outline-offset-2 tw-w-fit' : 'tw-w-fit'\n            }\n        >\n            {children}\n        </button>\n    );\n};\n"],"names":["InsertButtonModal","modalProps","useInsertModal","state","onButtonStyleChange","designTokens","useRichTextEditorContext","React","InsertModal","FormControl","HoverableButton","id","styles","isActive","onClick","children","hovered","setHovered","useState","getStyles"],"mappings":";;;;;AAUO,MAAMA,IAAoB,MAAM;AACnC,QAAMC,IAAaC,KACb,EAAE,OAAAC,GAAO,qBAAAC,EAAwB,IAAAH,GAGjCI,IAFUC,IAEa;AAKzB,SAAA,gBAAAC,EAAA,cAACC,KAAa,GAAGP,GAAY,QAAO,yBAChC,GAAA,gBAAAM,EAAA,cAAC,OAAI,EAAA,WAAU,UACX,GAAA,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,OAAO;AAAA,QACH,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU;AAAA,MACd;AAAA,IAAA;AAAA,IAEA,gBAAAF,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,QAAQL,EAAa;AAAA,QACrB,UAAUF,EAAM,gBAAgB;AAAA,QAChC,SAAS,MAAMC,EAAoB,SAAS;AAAA,MAAA;AAAA,MAE3CD,EAAM,QAAQ;AAAA,IACnB;AAAA,IAEA,gBAAAI,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,QAAQL,EAAa;AAAA,QACrB,UAAUF,EAAM,gBAAgB;AAAA,QAChC,SAAS,MAAMC,EAAoB,WAAW;AAAA,MAAA;AAAA,MAE7CD,EAAM,QAAQ;AAAA,IACnB;AAAA,IAEA,gBAAAI,EAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,QAAQL,EAAa;AAAA,QACrB,UAAUF,EAAM,gBAAgB;AAAA,QAChC,SAAS,MAAMC,EAAoB,UAAU;AAAA,MAAA;AAAA,MAE5CD,EAAM,QAAQ;AAAA,IACnB;AAAA,EAER,CAAA,CACJ;AAER,GAUMO,IAAkB,CAAC,EAAE,IAAAC,GAAI,QAAAC,GAAQ,UAAAC,GAAU,SAAAC,GAAS,UAAAC,QAAoC;AAC1F,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtCC,IAAY,MAAOP,KAAUA,EAAO,SAASI,IAAU,EAAE,GAAGJ,GAAQ,GAAGA,EAAO,MAAA,IAAUA;AAG1F,SAAA,gBAAAL,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAc,0BAA0BI;AAAA,MACxC,cAAc,MAAMM,EAAW,EAAI;AAAA,MACnC,cAAc,MAAMA,EAAW,EAAK;AAAA,MACpC,SAAAH;AAAA,MACA,OAAOK,EAAU;AAAA,MACjB,WACIN,IAAW,8EAA8E;AAAA,IAAA;AAAA,IAG5FE;AAAA,EAAA;AAGb;"}

package/dist/components/RichTextEditor/Plugins/LinkPlugin/FloatingLink/InsertLinkModal/InsertModal.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { ReactElement } from 'react';
 import { InsertModalStateProps } from './types';
 type Props = {
     state: InsertModalStateProps;
@@ -12,5 +12,5 @@ type Props = {
     testId?: string;
     children?: React.ReactNode;
 };
-export declare const InsertModal: FC<Props>;
+export declare const InsertModal: ({ state, onTextChange, onUrlChange, onToggleTab, onCancel, onSave, isValidUrlOrEmpty, hasValues, testId, children, }: Props) => ReactElement;
 export {};

package/dist/components/RichTextEditor/Plugins/LinkPlugin/FloatingLink/InsertLinkModal/InsertModal.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsertModal.es.js","sources":["../../../../../../../src/components/RichTextEditor/Plugins/LinkPlugin/FloatingLink/InsertLinkModal/InsertModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { Button } from '@components/Button/Button';\nimport { Checkbox } from '@components/Checkbox';\nimport { FormControl } from '@components/FormControl';\nimport { TextInput } from '@components/TextInput';\nimport { IconCheckMark20 } from '@foundation/Icon/Generated';\nimport React, { FC } from 'react';\nimport { InsertModalStateProps } from './types';\n\ntype Props = {\n    state: InsertModalStateProps;\n    onTextChange: (value: string) => void;\n    onUrlChange: (value: string) => void;\n    onToggleTab: (checked: boolean) => void;\n    onCancel: () => void;\n    onSave: (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent | undefined) => void;\n    hasValues: boolean;\n    isValidUrlOrEmpty: () => boolean | undefined;\n    testId?: string;\n    children?: React.ReactNode;\n};\n\nexport const InsertModal: FC<Props> = ({\n    state,\n    onTextChange,\n    onUrlChange,\n    onToggleTab,\n    onCancel,\n    onSave,\n    isValidUrlOrEmpty,\n    hasValues,\n    testId,\n    children,\n}) => (\n    <div data-test-id={testId} className=\"tw-bg-white tw-rounded tw-shadow tw-p-7 tw-min-w-[400px] tw-overflow-y-auto\">\n        <FormControl\n            label={{\n                children: 'Text',\n                htmlFor: 'linkText',\n                required: true,\n            }}\n        >\n            <TextInput id=\"linkText\" value={state.text} placeholder=\"Link Text\" onChange={onTextChange} />\n        </FormControl>\n\n        {children}\n\n        <div className=\"tw-pt-5\">\n            <FormControl\n                label={{\n                    children: 'URL',\n                    htmlFor: 'url',\n                    required: true,\n                }}\n            >\n                <TextInput\n                    id=\"url\"\n                    value={state.url}\n                    placeholder=\"https://example.com\"\n                    focusOnMount\n                    onChange={onUrlChange}\n                />\n            </FormControl>\n            {!isValidUrlOrEmpty() && <div className=\"tw-text-red-65 tw-mt-3\">Please enter a valid URL.</div>}\n        </div>\n        <div className=\"tw-pt-5\">\n            <Checkbox value=\"new-tab\" label=\"Open in new tab\" state={state.newTab} onChange={onToggleTab} />\n        </div>\n        <div className=\"tw-mt-3\">\n            <div className={'tw-pt-5 tw-flex tw-gap-x-3 tw-justify-end tw-border-t tw-border-t-black-10'}>\n                <Button\n                    onClick={onCancel}\n                    size={ButtonSize.Medium}\n                    style={ButtonStyle.Default}\n                    emphasis={ButtonEmphasis.Default}\n                >\n                    Cancel\n                </Button>\n                <Button\n                    onClick={onSave}\n                    size={ButtonSize.Medium}\n                    icon={<IconCheckMark20 />}\n                    disabled={!isValidUrlOrEmpty() || !hasValues}\n                >\n                    Save\n                </Button>\n            </div>\n        </div>\n    </div>\n);\n"],"names":["InsertModal","state","onTextChange","onUrlChange","onToggleTab","onCancel","onSave","isValidUrlOrEmpty","hasValues","testId","children","React","FormControl","TextInput","Checkbox","Button","ButtonSize","ButtonStyle","ButtonEmphasis","IconCheckMark20"],"mappings":";;;;;;;AAwBO,MAAMA,IAAyB,CAAC;AAAA,EACnC,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACJ,MACK,gBAAAC,EAAA,cAAA,OAAA,EAAI,gBAAcF,GAAQ,WAAU,iFACjC,gBAAAE,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,OAAO;AAAA,MACH,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,IACd;AAAA,EAAA;AAAA,EAEA,gBAAAD,EAAA,cAACE,GAAU,EAAA,IAAG,YAAW,OAAOZ,EAAM,MAAM,aAAY,aAAY,UAAUC,EAAc,CAAA;AAChG,GAECQ,GAED,gBAAAC,EAAA,cAAC,OAAI,EAAA,WAAU,aACX,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,OAAO;AAAA,MACH,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,IACd;AAAA,EAAA;AAAA,EAEA,gBAAAD,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,IAAG;AAAA,MACH,OAAOZ,EAAM;AAAA,MACb,aAAY;AAAA,MACZ,cAAY;AAAA,MACZ,UAAUE;AAAA,IAAA;AAAA,EACd;AACJ,GACC,CAACI,OAAuB,gBAAAI,EAAA,cAAC,SAAI,WAAU,yBAAA,GAAyB,2BAAyB,CAC9F,GACC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,6CACVG,GAAS,EAAA,OAAM,WAAU,OAAM,mBAAkB,OAAOb,EAAM,QAAQ,UAAUG,GAAa,CAClG,GACA,gBAAAO,EAAA,cAAC,SAAI,WAAU,aACV,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAW,gFACZ,gBAAAA,EAAA;AAAA,EAACI;AAAA,EAAA;AAAA,IACG,SAASV;AAAA,IACT,MAAMW,EAAW;AAAA,IACjB,OAAOC,EAAY;AAAA,IACnB,UAAUC,EAAe;AAAA,EAAA;AAAA,EAC5B;AAED,GACA,gBAAAP,EAAA;AAAA,EAACI;AAAA,EAAA;AAAA,IACG,SAAST;AAAA,IACT,MAAMU,EAAW;AAAA,IACjB,sCAAOG,GAAgB,IAAA;AAAA,IACvB,UAAU,CAACZ,EAAkB,KAAK,CAACC;AAAA,EAAA;AAAA,EACtC;AAED,CACJ,CACJ,CACJ;"}
+{"version":3,"file":"InsertModal.es.js","sources":["../../../../../../../src/components/RichTextEditor/Plugins/LinkPlugin/FloatingLink/InsertLinkModal/InsertModal.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { Button } from '@components/Button/Button';\nimport { Checkbox } from '@components/Checkbox';\nimport { FormControl } from '@components/FormControl';\nimport { TextInput } from '@components/TextInput';\nimport { IconCheckMark20 } from '@foundation/Icon/Generated';\nimport React, { ReactElement } from 'react';\nimport { InsertModalStateProps } from './types';\n\ntype Props = {\n    state: InsertModalStateProps;\n    onTextChange: (value: string) => void;\n    onUrlChange: (value: string) => void;\n    onToggleTab: (checked: boolean) => void;\n    onCancel: () => void;\n    onSave: (e: React.MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent | undefined) => void;\n    hasValues: boolean;\n    isValidUrlOrEmpty: () => boolean | undefined;\n    testId?: string;\n    children?: React.ReactNode;\n};\n\nexport const InsertModal = ({\n    state,\n    onTextChange,\n    onUrlChange,\n    onToggleTab,\n    onCancel,\n    onSave,\n    isValidUrlOrEmpty,\n    hasValues,\n    testId,\n    children,\n}: Props): ReactElement => (\n    <div data-test-id={testId} className=\"tw-bg-white tw-rounded tw-shadow tw-p-7 tw-min-w-[400px] tw-overflow-y-auto\">\n        <FormControl\n            label={{\n                children: 'Text',\n                htmlFor: 'linkText',\n                required: true,\n            }}\n        >\n            <TextInput id=\"linkText\" value={state.text} placeholder=\"Link Text\" onChange={onTextChange} />\n        </FormControl>\n\n        {children}\n\n        <div className=\"tw-pt-5\">\n            <FormControl\n                label={{\n                    children: 'URL',\n                    htmlFor: 'url',\n                    required: true,\n                }}\n            >\n                <TextInput\n                    id=\"url\"\n                    value={state.url}\n                    placeholder=\"https://example.com\"\n                    focusOnMount\n                    onChange={onUrlChange}\n                />\n            </FormControl>\n            {!isValidUrlOrEmpty() && <div className=\"tw-text-red-65 tw-mt-3\">Please enter a valid URL.</div>}\n        </div>\n        <div className=\"tw-pt-5\">\n            <Checkbox value=\"new-tab\" label=\"Open in new tab\" state={state.newTab} onChange={onToggleTab} />\n        </div>\n        <div className=\"tw-mt-3\">\n            <div className={'tw-pt-5 tw-flex tw-gap-x-3 tw-justify-end tw-border-t tw-border-t-black-10'}>\n                <Button\n                    onClick={onCancel}\n                    size={ButtonSize.Medium}\n                    style={ButtonStyle.Default}\n                    emphasis={ButtonEmphasis.Default}\n                >\n                    Cancel\n                </Button>\n                <Button\n                    onClick={onSave}\n                    size={ButtonSize.Medium}\n                    icon={<IconCheckMark20 />}\n                    disabled={!isValidUrlOrEmpty() || !hasValues}\n                >\n                    Save\n                </Button>\n            </div>\n        </div>\n    </div>\n);\n"],"names":["InsertModal","state","onTextChange","onUrlChange","onToggleTab","onCancel","onSave","isValidUrlOrEmpty","hasValues","testId","children","React","FormControl","TextInput","Checkbox","Button","ButtonSize","ButtonStyle","ButtonEmphasis","IconCheckMark20"],"mappings":";;;;;;;AAwBO,MAAMA,IAAc,CAAC;AAAA,EACxB,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACJ,MACK,gBAAAC,EAAA,cAAA,OAAA,EAAI,gBAAcF,GAAQ,WAAU,iFACjC,gBAAAE,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,OAAO;AAAA,MACH,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,IACd;AAAA,EAAA;AAAA,EAEA,gBAAAD,EAAA,cAACE,GAAU,EAAA,IAAG,YAAW,OAAOZ,EAAM,MAAM,aAAY,aAAY,UAAUC,EAAc,CAAA;AAChG,GAECQ,GAED,gBAAAC,EAAA,cAAC,OAAI,EAAA,WAAU,aACX,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,OAAO;AAAA,MACH,UAAU;AAAA,MACV,SAAS;AAAA,MACT,UAAU;AAAA,IACd;AAAA,EAAA;AAAA,EAEA,gBAAAD,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,IAAG;AAAA,MACH,OAAOZ,EAAM;AAAA,MACb,aAAY;AAAA,MACZ,cAAY;AAAA,MACZ,UAAUE;AAAA,IAAA;AAAA,EACd;AACJ,GACC,CAACI,OAAuB,gBAAAI,EAAA,cAAC,SAAI,WAAU,yBAAA,GAAyB,2BAAyB,CAC9F,GACC,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAU,6CACVG,GAAS,EAAA,OAAM,WAAU,OAAM,mBAAkB,OAAOb,EAAM,QAAQ,UAAUG,GAAa,CAClG,GACA,gBAAAO,EAAA,cAAC,SAAI,WAAU,aACV,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAW,gFACZ,gBAAAA,EAAA;AAAA,EAACI;AAAA,EAAA;AAAA,IACG,SAASV;AAAA,IACT,MAAMW,EAAW;AAAA,IACjB,OAAOC,EAAY;AAAA,IACnB,UAAUC,EAAe;AAAA,EAAA;AAAA,EAC5B;AAED,GACA,gBAAAP,EAAA;AAAA,EAACI;AAAA,EAAA;AAAA,IACG,SAAST;AAAA,IACT,MAAMU,EAAW;AAAA,IACjB,sCAAOG,GAAgB,IAAA;AAAA,IACvB,UAAU,CAACZ,EAAkB,KAAK,CAACC;AAAA,EAAA;AAAA,EACtC;AAED,CACJ,CACJ,CACJ;"}