@frontify/fondue 12.0.0-beta.6 → 12.0.0-beta.8

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

@@ -1 +1 @@
-{"version":3,"file":"LinkChooser.es.js","sources":["../../../src/components/LinkChooser/LinkChooser.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { Checkbox, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { useDropdownAutoHeight } from '@components/Dropdown/useDropdownAutoHeight';\nimport {\n    IconArrowOutExternal,\n    IconBuildingBlock,\n    IconDocument,\n    IconDocumentStack,\n    IconLayersSingle,\n    IconLink,\n} from '@foundation/Icon/Generated';\nimport { useComboBox } from '@react-aria/combobox';\nimport { DismissButton } from '@react-aria/overlays';\nimport { scrollIntoView } from '@react-aria/utils';\nimport { useComboBoxState } from '@react-stately/combobox';\nimport { Validation } from '@utilities/validation';\nimport { useMachine } from '@xstate/react';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { FC, Key, MouseEvent, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { NavigationMenu } from './NavigationMenu';\nimport { Popover } from './Popover';\nimport { SearchInput } from './SearchInput';\nimport { SearchResultsList } from './SearchResultsList';\nimport { defaultSection } from './sections';\nimport { linkChooserMachine } from './state/machine';\nimport { LinkChooserState } from './state/types';\nimport { IconName, LinkChooserProps, SearchMenuBlock } from './types';\nimport { decoratedResults, doesContainSubstring, findSection, getDefaultData } from './utils/helpers';\nimport { closeBoxState, isLoaded, openBoxState, queryMatchesSelection, shouldGoBack } from './utils/state';\nimport { createCustomLink } from './utils/transformers';\nimport { useManualComboBoxEventHandlers } from './utils/useManualComboBoxHandlers';\n\nexport const IconOptions: Record<IconName | string, ReactElement> = {\n    [IconName.Document]: <IconDocument />,\n    [IconName.Library]: <IconDocumentStack />,\n    [IconName.Link]: <IconLink />,\n    [IconName.External]: <IconArrowOutExternal />,\n    [IconName.Template]: <IconLayersSingle />,\n    [IconName.Block]: <IconBuildingBlock />,\n};\n\nexport const DEFAULT_ICON = IconName.Link;\nexport const CUSTOM_LINK_ID = 'custom-link';\nexport const MAX_STORED_ITEMS = 5;\nexport const QUERIES_STORAGE_KEY = 'queries';\n\nexport const LinkChooser: FC<LinkChooserProps> = ({\n    getGlobalByQuery = getDefaultData,\n    openPreview = window.open,\n    clipboardOptions = navigator.clipboard,\n    selectedResult = null,\n    openInNewTab = false,\n    ariaLabel = 'Menu',\n    extraSections = [],\n    label,\n    placeholder,\n    onOpenInNewTabChange,\n    onLinkChange,\n    disabled,\n    clearable,\n    required,\n    validation = Validation.Default,\n}) => {\n    const [{ context, matches, value }, send, service] = useMachine(() =>\n        linkChooserMachine.withContext({\n            searchResults: [],\n            selectedResult,\n            query: '',\n            interruptedFetch: false,\n            getExtraResultsByQuery: null,\n            currentSectionId: defaultSection.id,\n            extraSections,\n            clipboardOptions,\n            openPreview,\n            getGlobalByQuery,\n            onLinkChange,\n        }),\n    );\n\n    const [searchInput, setSearchInput] = useState(selectedResult?.title);\n    const isDefault = !shouldGoBack(matches);\n    const searchResultMenuBlocks = useMemo(\n        () =>\n            [\n                !isDefault && { id: 'menu-top', menuItems: [findSection(extraSections, context.currentSectionId)] },\n                {\n                    id: 'search',\n                    menuItems: decoratedResults(context.searchResults),\n                },\n                isDefault && { id: 'menu-bottom', menuItems: extraSections.map(({ id, title }) => ({ id, title })) },\n            ].filter(Boolean),\n        [context.searchResults, isDefault, context.currentSectionId],\n    ) as SearchMenuBlock[];\n\n    const props = mapToAriaProps(ariaLabel, searchResultMenuBlocks);\n\n    const triggerRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const listBoxRef = useRef<HTMLUListElement | null>(null);\n    const popoverRef = useRef<HTMLDivElement | null>(null);\n\n    const handleSelectionChange = (key: Key) => {\n        const foundItem = context.searchResults.find((item) => item.id === key);\n        if (foundItem) {\n            setSearchInput(foundItem.title);\n            send({ type: 'SET_SELECTED_SEARCH_RESULT', data: { selectedResult: foundItem } });\n        }\n        closeBoxState(state);\n        setSelectedKey(key);\n    };\n\n    const handleInputChange = useCallback(\n        (query: string) => {\n            setSearchInput(query);\n            send({ type: 'TYPING', data: { query } });\n        },\n        [value],\n    );\n\n    const [selectedKey, setSelectedKey] = useState<Key | undefined>(context.selectedResult?.id);\n\n    const state = useComboBoxState({\n        ...props,\n        defaultFilter: (textValue, inputValue) => doesContainSubstring(textValue, inputValue, extraSections),\n        inputValue: searchInput,\n        onInputChange: handleInputChange,\n        onSelectionChange: handleSelectionChange,\n        menuTrigger: 'manual',\n        shouldCloseOnBlur: false,\n        allowsEmptyCollection: true,\n        selectedKey,\n    });\n\n    const { inputProps, listBoxProps, labelProps } = useComboBox(\n        {\n            ...props,\n            inputRef,\n            listBoxRef,\n            popoverRef,\n            isRequired: required,\n            placeholder,\n        },\n        state,\n    );\n\n    const handleClearClick = useCallback(() => {\n        state.setInputValue('');\n        setSelectedKey('');\n        send({ type: 'CLEARING', data: { query: '' } });\n    }, []);\n\n    const handleDropdownOpen = () => {\n        send('OPEN_DROPDOWN');\n        openBoxState(state);\n    };\n\n    const handleWrapperClick = () => {\n        if (document.activeElement !== inputRef.current) {\n            inputRef.current?.focus();\n        }\n        handleDropdownOpen();\n    };\n\n    const handleWrapperMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n        if (matches(LinkChooserState.Focused) && event.target !== inputRef.current) {\n            event.preventDefault();\n        }\n    };\n\n    const handleDropdownClose = () => {\n        let selectedResult = null;\n        if (context.query) {\n            if (queryMatchesSelection(context.selectedResult, context.query)) {\n                selectedResult = context.selectedResult;\n            } else {\n                selectedResult = createCustomLink(state.inputValue);\n            }\n        }\n        send({ type: 'CLOSE_DROPDOWN', data: { selectedResult } });\n        if (selectedResult && selectedKey !== selectedResult.id) {\n            setSelectedKey(selectedResult.id);\n        }\n        closeBoxState(state);\n    };\n\n    const manualInputProps = useManualComboBoxEventHandlers(\n        { inputProps, inputRef, popoverRef, state },\n        {\n            onOpen: handleDropdownOpen,\n            onClose: handleDropdownClose,\n            onNavigate: (id) => {\n                if (isDefault) {\n                    send({\n                        type: 'SELECT_EXTRA_SECTION',\n                        data: {\n                            getExtraResultsByQuery: findSection(extraSections, id)?.getResults || null,\n                            currentSectionId: id.toString(),\n                        },\n                    });\n                } else {\n                    send({\n                        type: 'BACK_TO_DEFAULT',\n                        data: { getExtraResultsByQuery: null },\n                    });\n                }\n            },\n            onSelect: handleSelectionChange,\n        },\n    );\n\n    useEffect(() => {\n        if (isLoaded(matches) && context.interruptedFetch) {\n            send({ type: 'TYPING', data: { query: context.query } });\n        }\n    }, [context.interruptedFetch, value]);\n\n    const { maxHeight } = useDropdownAutoHeight(inputRef, {\n        isOpen: matches(LinkChooserState.Focused),\n        autoResize: true,\n    });\n\n    const {\n        isOpen,\n        selectionManager: { focusedKey },\n    } = state;\n\n    useEffect(() => {\n        if (focusedKey && popoverRef.current && isOpen) {\n            const dropdownItem = popoverRef.current.querySelector(`[data-key=\"${focusedKey}\"]`);\n            if (dropdownItem) {\n                scrollIntoView(popoverRef.current, dropdownItem as HTMLElement);\n            }\n        }\n    }, [focusedKey, isOpen]);\n\n    const [flyoutWidth, setFlyoutWidth] = useState(0);\n\n    const calcFlyoutWidth = () => {\n        setFlyoutWidth(triggerRef.current?.getBoundingClientRect().width || 0);\n    };\n\n    useEffect(() => {\n        calcFlyoutWidth();\n        window.addEventListener('resize', calcFlyoutWidth, false);\n    }, []);\n\n    return (\n        <div data-test-id=\"link-chooser\" ref={triggerRef} className=\"tw-w-full tw-font-sans tw-text-s\">\n            {!!label && (\n                <label\n                    {...labelProps}\n                    data-test-id=\"link-chooser-label\"\n                    className=\"tw-text-black-80 tw-mb-1 tw-flex tw-align-items-center\"\n                >\n                    {label}\n                    {required && (\n                        <span\n                            data-test-id=\"link-chooser-label-required\"\n                            className=\"tw-h-4 tw-text-m tw-text-red-60 dark:tw-text-red-50 tw-ml-1\"\n                        >\n                            *\n                        </span>\n                    )}\n                </label>\n            )}\n            <SearchInput\n                ariaProps={manualInputProps}\n                selectedResult={context.selectedResult}\n                ref={inputRef}\n                disabled={disabled}\n                decorator={IconOptions[context.selectedResult?.icon || DEFAULT_ICON]}\n                clearable={clearable}\n                onClear={handleClearClick}\n                machineService={service}\n                validation={validation}\n                onClick={handleWrapperClick}\n                onMouseDown={handleWrapperMouseDown}\n            />\n            <AnimatePresence>\n                {matches(LinkChooserState.Focused) && (\n                    <motion.div\n                        style={{\n                            width: flyoutWidth,\n                        }}\n                        className=\"tw-absolute tw-left-auto tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-20\"\n                        key=\"content\"\n                        initial={{ height: 0 }}\n                        animate={{ height: 'auto' }}\n                        exit={{ height: 0 }}\n                        transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n                        data-test-id=\"link-chooser-dropdown\"\n                    >\n                        <DismissButton onDismiss={handleDropdownClose} />\n                        <Popover\n                            popoverRef={popoverRef}\n                            isOpen={matches(LinkChooserState.Focused)}\n                            onClose={handleDropdownClose}\n                            maxHeight={maxHeight}\n                        >\n                            <SearchResultsList\n                                {...listBoxProps}\n                                listBoxRef={listBoxRef}\n                                state={state}\n                                menuBlocks={searchResultMenuBlocks}\n                                border={false}\n                                machineService={service}\n                            />\n                            <div data-test-id=\"link-chooser-action-menu\" className=\"tw-border-t tw-border-black-10\">\n                                <NavigationMenu machineService={service} state={state} />\n                            </div>\n                        </Popover>\n                        <DismissButton onDismiss={handleDropdownClose} />\n                    </motion.div>\n                )}\n            </AnimatePresence>\n            <div className=\"tw-my-2\" data-test-id=\"link-chooser-new-tab\">\n                <Checkbox\n                    value=\"new-tab\"\n                    disabled={disabled}\n                    state={openInNewTab ? CheckboxState.Checked : CheckboxState.Unchecked}\n                    onChange={onOpenInNewTabChange}\n                    label=\"Open in New Tab\"\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"LinkChooser.es.js","sources":["../../../src/components/LinkChooser/LinkChooser.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { mapToAriaProps } from '@components/ActionMenu/Aria/helper';\nimport { Checkbox, CheckboxState } from '@components/Checkbox/Checkbox';\nimport { useDropdownAutoHeight } from '@components/Dropdown/useDropdownAutoHeight';\nimport {\n    IconArrowOutExternal,\n    IconBuildingBlock,\n    IconDocument,\n    IconDocumentStack,\n    IconLayersSingle,\n    IconLink,\n} from '@foundation/Icon/Generated';\nimport { useComboBox } from '@react-aria/combobox';\nimport { DismissButton } from '@react-aria/overlays';\nimport { scrollIntoView } from '@react-aria/utils';\nimport { useComboBoxState } from '@react-stately/combobox';\nimport { Validation } from '@utilities/validation';\nimport { useMachine } from '@xstate/react';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { FC, Key, MouseEvent, ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { NavigationMenu } from './NavigationMenu';\nimport { Popover } from './Popover';\nimport { SearchInput } from './SearchInput';\nimport { SearchResultsList } from './SearchResultsList';\nimport { defaultSection } from './sections';\nimport { linkChooserMachine } from './state/machine';\nimport { LinkChooserState } from './state/types';\nimport { IconName, LinkChooserProps, SearchMenuBlock } from './types';\nimport { decoratedResults, doesContainSubstring, findSection, getDefaultData } from './utils/helpers';\nimport { closeBoxState, isLoaded, openBoxState, queryMatchesSelection, shouldGoBack } from './utils/state';\nimport { createCustomLink } from './utils/transformers';\nimport { useManualComboBoxEventHandlers } from './utils/useManualComboBoxHandlers';\n\nexport const IconOptions: Record<IconName | string, ReactElement> = {\n    [IconName.Document]: <IconDocument />,\n    [IconName.Library]: <IconDocumentStack />,\n    [IconName.Link]: <IconLink />,\n    [IconName.External]: <IconArrowOutExternal />,\n    [IconName.Template]: <IconLayersSingle />,\n    [IconName.Block]: <IconBuildingBlock />,\n};\n\nexport const DEFAULT_ICON = IconName.Link;\nexport const CUSTOM_LINK_ID = 'custom-link';\nexport const MAX_STORED_ITEMS = 5;\nexport const QUERIES_STORAGE_KEY = 'queries';\n\nexport const LinkChooser: FC<LinkChooserProps> = ({\n    getGlobalByQuery = getDefaultData,\n    openPreview = window.open,\n    clipboardOptions = navigator.clipboard,\n    selectedResult = null,\n    openInNewTab = false,\n    ariaLabel = 'Menu',\n    extraSections = [],\n    label,\n    placeholder,\n    onOpenInNewTabChange,\n    onLinkChange,\n    disabled,\n    clearable,\n    required,\n    validation = Validation.Default,\n}) => {\n    const [{ context, matches, value }, send, service] = useMachine(() =>\n        linkChooserMachine.withContext({\n            searchResults: [],\n            selectedResult,\n            query: '',\n            interruptedFetch: false,\n            getExtraResultsByQuery: null,\n            currentSectionId: defaultSection.id,\n            extraSections,\n            clipboardOptions,\n            openPreview,\n            getGlobalByQuery,\n            onLinkChange,\n        }),\n    );\n\n    const [searchInput, setSearchInput] = useState(selectedResult?.title);\n    const isDefault = !shouldGoBack(matches);\n    const searchResultMenuBlocks = useMemo(\n        () =>\n            [\n                !isDefault && { id: 'menu-top', menuItems: [findSection(extraSections, context.currentSectionId)] },\n                {\n                    id: 'search',\n                    menuItems: decoratedResults(context.searchResults),\n                },\n                isDefault && { id: 'menu-bottom', menuItems: extraSections.map(({ id, title }) => ({ id, title })) },\n            ].filter(Boolean),\n        [context.searchResults, isDefault, context.currentSectionId],\n    ) as SearchMenuBlock[];\n\n    const props = mapToAriaProps(ariaLabel, searchResultMenuBlocks);\n\n    const triggerRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const listBoxRef = useRef<HTMLUListElement | null>(null);\n    const popoverRef = useRef<HTMLDivElement | null>(null);\n\n    const handleSelectionChange = (key: Key) => {\n        const foundItem = context.searchResults.find((item) => item.id === key);\n        if (foundItem) {\n            setSearchInput(foundItem.title);\n            send({ type: 'SET_SELECTED_SEARCH_RESULT', data: { selectedResult: foundItem } });\n        }\n        closeBoxState(state);\n        setSelectedKey(key);\n    };\n\n    const handleInputChange = useCallback(\n        (query: string) => {\n            setSearchInput(query);\n            send({ type: 'TYPING', data: { query } });\n        },\n        [value],\n    );\n\n    const [selectedKey, setSelectedKey] = useState<Key | undefined>(context.selectedResult?.id);\n\n    const state = useComboBoxState({\n        ...props,\n        defaultFilter: (textValue, inputValue) => doesContainSubstring(textValue, inputValue, extraSections),\n        inputValue: searchInput,\n        onInputChange: handleInputChange,\n        onSelectionChange: handleSelectionChange,\n        menuTrigger: 'manual',\n        shouldCloseOnBlur: false,\n        allowsEmptyCollection: true,\n        selectedKey,\n    });\n\n    const { inputProps, listBoxProps, labelProps } = useComboBox(\n        {\n            ...props,\n            inputRef,\n            listBoxRef,\n            popoverRef,\n            isRequired: required,\n            placeholder,\n        },\n        state,\n    );\n\n    const handleClearClick = useCallback(() => {\n        state.setInputValue('');\n        setSelectedKey('');\n        send({ type: 'CLEARING', data: { query: '' } });\n    }, []);\n\n    const handleDropdownOpen = () => {\n        send('OPEN_DROPDOWN');\n        openBoxState(state);\n    };\n\n    const handleWrapperClick = () => {\n        if (document.activeElement !== inputRef.current) {\n            inputRef.current?.focus();\n        }\n        handleDropdownOpen();\n    };\n\n    const handleWrapperMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n        if (matches(LinkChooserState.Focused) && event.target !== inputRef.current) {\n            event.preventDefault();\n        }\n    };\n\n    const handleDropdownClose = () => {\n        let selectedResult = null;\n        if (context.query) {\n            if (queryMatchesSelection(context.selectedResult, context.query)) {\n                selectedResult = context.selectedResult;\n            } else {\n                selectedResult = createCustomLink(state.inputValue);\n            }\n        }\n        send({ type: 'CLOSE_DROPDOWN', data: { selectedResult } });\n        if (selectedResult && selectedKey !== selectedResult.id) {\n            setSelectedKey(selectedResult.id);\n        }\n        closeBoxState(state);\n    };\n\n    const manualInputProps = useManualComboBoxEventHandlers(\n        { inputProps, inputRef, popoverRef, state },\n        {\n            onOpen: handleDropdownOpen,\n            onClose: handleDropdownClose,\n            onNavigate: (id) => {\n                if (isDefault) {\n                    send({\n                        type: 'SELECT_EXTRA_SECTION',\n                        data: {\n                            getExtraResultsByQuery: findSection(extraSections, id)?.getResults || null,\n                            currentSectionId: id.toString(),\n                        },\n                    });\n                } else {\n                    send({\n                        type: 'BACK_TO_DEFAULT',\n                        data: { getExtraResultsByQuery: null },\n                    });\n                }\n            },\n            onSelect: handleSelectionChange,\n        },\n    );\n\n    useEffect(() => {\n        if (isLoaded(matches) && context.interruptedFetch) {\n            send({ type: 'TYPING', data: { query: context.query } });\n        }\n    }, [context.interruptedFetch, value]);\n\n    const { maxHeight } = useDropdownAutoHeight(inputRef, {\n        isOpen: matches(LinkChooserState.Focused),\n        autoResize: true,\n    });\n\n    const {\n        isOpen,\n        selectionManager: { focusedKey },\n    } = state;\n\n    useEffect(() => {\n        if (focusedKey && popoverRef.current && isOpen) {\n            const dropdownItem = popoverRef.current.querySelector(`[data-key=\"${focusedKey}\"]`);\n            if (dropdownItem) {\n                scrollIntoView(popoverRef.current, dropdownItem as HTMLElement);\n            }\n        }\n    }, [focusedKey, isOpen]);\n\n    const [flyoutWidth, setFlyoutWidth] = useState(0);\n\n    const calcFlyoutWidth = () => {\n        setFlyoutWidth(triggerRef.current?.getBoundingClientRect().width || 0);\n    };\n\n    useEffect(() => {\n        calcFlyoutWidth();\n        window.addEventListener('resize', calcFlyoutWidth, false);\n    }, []);\n\n    return (\n        <div data-test-id=\"link-chooser\" ref={triggerRef} className=\"tw-w-full tw-font-sans tw-text-s\">\n            {!!label && (\n                <label\n                    {...labelProps}\n                    data-test-id=\"link-chooser-label\"\n                    className=\"tw-text-black-80 tw-mb-1 tw-flex tw-align-items-center\"\n                >\n                    {label}\n                    {required && (\n                        <span\n                            data-test-id=\"link-chooser-label-required\"\n                            className=\"tw-h-4 tw-text-m tw-text-red-60 dark:tw-text-red-50 tw-ml-1\"\n                        >\n                            *\n                        </span>\n                    )}\n                </label>\n            )}\n            <SearchInput\n                ariaProps={manualInputProps}\n                selectedResult={context.selectedResult}\n                ref={inputRef}\n                disabled={disabled}\n                decorator={IconOptions[context.selectedResult?.icon || DEFAULT_ICON]}\n                clearable={clearable}\n                onClear={handleClearClick}\n                machineService={service}\n                validation={validation}\n                onClick={handleWrapperClick}\n                onMouseDown={handleWrapperMouseDown}\n            />\n            <AnimatePresence>\n                {matches(LinkChooserState.Focused) && (\n                    <motion.div\n                        style={{\n                            width: flyoutWidth,\n                        }}\n                        className=\"tw-absolute tw-left-auto tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-20\"\n                        key=\"content\"\n                        initial={{ height: 0 }}\n                        animate={{ height: 'auto' }}\n                        exit={{ height: 0 }}\n                        transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n                        data-test-id=\"link-chooser-dropdown\"\n                    >\n                        <DismissButton onDismiss={handleDropdownClose} />\n                        <Popover\n                            popoverRef={popoverRef}\n                            isOpen={matches(LinkChooserState.Focused)}\n                            onClose={handleDropdownClose}\n                            maxHeight={maxHeight}\n                        >\n                            <SearchResultsList\n                                {...listBoxProps}\n                                listBoxRef={listBoxRef}\n                                state={state}\n                                menuBlocks={searchResultMenuBlocks}\n                                border={false}\n                                machineService={service}\n                            />\n                            <div data-test-id=\"link-chooser-action-menu\" className=\"tw-border-t tw-border-black-10\">\n                                <NavigationMenu machineService={service} state={state} />\n                            </div>\n                        </Popover>\n                        <DismissButton onDismiss={handleDropdownClose} />\n                    </motion.div>\n                )}\n            </AnimatePresence>\n            <div className=\"tw-my-2\" data-test-id=\"link-chooser-new-tab\">\n                <Checkbox\n                    value=\"new-tab\"\n                    disabled={disabled}\n                    state={openInNewTab ? CheckboxState.Checked : CheckboxState.Unchecked}\n                    onChange={onOpenInNewTabChange}\n                    label=\"Open in New Tab\"\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/components/LinkChooser/NavigationMenu.es.js

@@ -1337,6 +1337,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1644,7 +1656,7 @@ import { merge as S } from "../../utilities/merge.es.js";
 import { useActor as h } from "@xstate/react";
 import { defaultSection as k } from "./sections.es.js";
 import { LinkChooserState as v, DropdownState as b } from "./state/types.es.js";
-const ZR = ({ machineService: t, state: i }) => {
+const l0 = ({ machineService: t, state: i }) => {
   const [{ matches: p, context: e }, m] = h(t);
   return p(`${v.Focused}.${b.Default}`) ? /* @__PURE__ */ r.createElement("ul", {
     className: "tw-py-2"
@@ -1687,7 +1699,7 @@ const ZR = ({ machineService: t, state: i }) => {
   }));
 };
 export {
-  ZR as NavigationMenu,
+  l0 as NavigationMenu,
   w as NavigationMenuItem
 };
 //# sourceMappingURL=NavigationMenu.es.js.map

package/dist/components/LinkChooser/NavigationMenu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.es.js","sources":["../../../src/components/LinkChooser/NavigationMenu.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItem } from '@components/MenuItem';\nimport { SelectionIndicatorIcon } from '@components/MenuItem/MenuItem';\nimport { MenuItemContentSize } from '@components/MenuItem/MenuItemContent';\nimport { IconArrowLeft } from '@foundation/Icon';\nimport { getInteractionModality } from '@react-aria/interactions';\nimport { useOption } from '@react-aria/listbox';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { FC, useMemo, useRef } from 'react';\nimport { defaultSection } from './sections';\nimport { DropdownState, LinkChooserState } from './state/types';\nimport { NavigationMenuItemProps, NavigationMenuProps } from './types';\n\nexport const NavigationMenu: FC<NavigationMenuProps> = ({ machineService, state }) => {\n    const [{ matches, context }, send] = useActor(machineService);\n\n    return matches(`${LinkChooserState.Focused}.${DropdownState.Default}`) ? (\n        <ul className=\"tw-py-2\">\n            {context.extraSections.map((section) => (\n                <NavigationMenuItem\n                    key={section.id}\n                    section={section}\n                    state={state}\n                    onPress={() => {\n                        send({\n                            type: 'SELECT_EXTRA_SECTION',\n                            data: { getExtraResultsByQuery: section.getResults, currentSectionId: section.id },\n                        });\n                    }}\n                />\n            ))}\n        </ul>\n    ) : null;\n};\n\nexport const NavigationMenuItem: FC<NavigationMenuItemProps> = ({\n    section: { id, title },\n    onPress,\n    state,\n    direction = 'right',\n}) => {\n    const ref = useRef<HTMLLIElement>(null);\n    const { isFocused } = useOption(\n        {\n            key: id,\n            shouldFocusOnHover: false,\n        },\n        state,\n        ref,\n    );\n\n    const itemTitle = useMemo(\n        () => (id === defaultSection.id ? <p className=\"tw-ml-1 tw-text-black-80 tw-capitalize\">{title}</p> : title),\n        [title],\n    );\n\n    const isFocusVisible = getInteractionModality() !== 'pointer';\n\n    return (\n        <div\n            onClick={onPress}\n            tabIndex={0}\n            role=\"menuitem\"\n            aria-label={`Navigate to ${id} section of search results.`}\n            data-key={id}\n            data-test-id=\"link-chooser-navigation-menu-item\"\n            className={merge(['hover:tw-bg-black-10', isFocused && isFocusVisible && 'tw-bg-black-10'])}\n        >\n            <MenuItem\n                title={itemTitle}\n                selectionIndicator={direction === 'right' ? SelectionIndicatorIcon.CaretRight : undefined}\n                decorator={direction === 'left' ? <IconArrowLeft /> : undefined}\n                size={MenuItemContentSize.XSmall}\n            />\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,KAA0C,CAAC,EAAE,mBAAgB,eAAY;AAClF,QAAM,CAAC,EAAE,YAAS,cAAW,KAAQ,EAAS,CAAc;AAE5D,SAAO,EAAQ,GAAG,EAAiB,WAAW,EAAc,SAAS,IAChE,kBAAA,cAAA,MAAA;AAAA,IAAG,WAAU;AAAA,EAAA,GACT,EAAQ,cAAc,IAAI,CAAC,MACvB,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK,EAAQ;AAAA,IACb;AAAA,IACA;AAAA,IACA,SAAS,MAAM;AACN,QAAA;AAAA,QACD,MAAM;AAAA,QACN,MAAM,EAAE,wBAAwB,EAAQ,YAAY,kBAAkB,EAAQ,GAAG;AAAA,MAAA,CACpF;AAAA,IACL;AAAA,EAAA,CACJ,CACH,CACL,IACA;AACR,GAEa,IAAkD,CAAC;AAAA,EAC5D,SAAS,EAAE,OAAI;AAAA,EACf;AAAA,EACA;AAAA,EACA,eAAY;AAAA,MACV;AACI,QAAA,IAAM,EAAsB,IAAI,GAChC,EAAE,iBAAc,EAClB;AAAA,IACI,KAAK;AAAA,IACL,oBAAoB;AAAA,EAAA,GAExB,GACA,CACJ,GAEM,IAAY,EACd,MAAO,MAAO,EAAe,KAAM,kBAAA,cAAA,KAAA;AAAA,IAAE,WAAU;AAAA,EAAA,GAA0C,CAAM,IAAO,GACtG,CAAC,CAAK,CACV,GAEM,IAAiB,EAA6B,MAAA;AAEpD,SACK,kBAAA,cAAA,OAAA;AAAA,IACG,SAAS;AAAA,IACT,UAAU;AAAA,IACV,MAAK;AAAA,IACL,cAAY,eAAe;AAAA,IAC3B,YAAU;AAAA,IACV,gBAAa;AAAA,IACb,WAAW,EAAM,CAAC,wBAAwB,KAAa,KAAkB,gBAAgB,CAAC;AAAA,EAAA,GAEzF,kBAAA,cAAA,GAAA;AAAA,IACG,OAAO;AAAA,IACP,oBAAoB,MAAc,UAAU,EAAuB,aAAa;AAAA,IAChF,WAAW,MAAc,SAAS,kBAAA,cAAC,OAAc,IAAK;AAAA,IACtD,MAAM,EAAoB;AAAA,EAC9B,CAAA,CACJ;AAER;"}
+{"version":3,"file":"NavigationMenu.es.js","sources":["../../../src/components/LinkChooser/NavigationMenu.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItem } from '@components/MenuItem';\nimport { SelectionIndicatorIcon } from '@components/MenuItem/MenuItem';\nimport { MenuItemContentSize } from '@components/MenuItem/MenuItemContent';\nimport { IconArrowLeft } from '@foundation/Icon';\nimport { getInteractionModality } from '@react-aria/interactions';\nimport { useOption } from '@react-aria/listbox';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { FC, useMemo, useRef } from 'react';\nimport { defaultSection } from './sections';\nimport { DropdownState, LinkChooserState } from './state/types';\nimport { NavigationMenuItemProps, NavigationMenuProps } from './types';\n\nexport const NavigationMenu: FC<NavigationMenuProps> = ({ machineService, state }) => {\n    const [{ matches, context }, send] = useActor(machineService);\n\n    return matches(`${LinkChooserState.Focused}.${DropdownState.Default}`) ? (\n        <ul className=\"tw-py-2\">\n            {context.extraSections.map((section) => (\n                <NavigationMenuItem\n                    key={section.id}\n                    section={section}\n                    state={state}\n                    onPress={() => {\n                        send({\n                            type: 'SELECT_EXTRA_SECTION',\n                            data: { getExtraResultsByQuery: section.getResults, currentSectionId: section.id },\n                        });\n                    }}\n                />\n            ))}\n        </ul>\n    ) : null;\n};\n\nexport const NavigationMenuItem: FC<NavigationMenuItemProps> = ({\n    section: { id, title },\n    onPress,\n    state,\n    direction = 'right',\n}) => {\n    const ref = useRef<HTMLLIElement>(null);\n    const { isFocused } = useOption(\n        {\n            key: id,\n            shouldFocusOnHover: false,\n        },\n        state,\n        ref,\n    );\n\n    const itemTitle = useMemo(\n        () => (id === defaultSection.id ? <p className=\"tw-ml-1 tw-text-black-80 tw-capitalize\">{title}</p> : title),\n        [title],\n    );\n\n    const isFocusVisible = getInteractionModality() !== 'pointer';\n\n    return (\n        <div\n            onClick={onPress}\n            tabIndex={0}\n            role=\"menuitem\"\n            aria-label={`Navigate to ${id} section of search results.`}\n            data-key={id}\n            data-test-id=\"link-chooser-navigation-menu-item\"\n            className={merge(['hover:tw-bg-black-10', isFocused && isFocusVisible && 'tw-bg-black-10'])}\n        >\n            <MenuItem\n                title={itemTitle}\n                selectionIndicator={direction === 'right' ? SelectionIndicatorIcon.CaretRight : undefined}\n                decorator={direction === 'left' ? <IconArrowLeft /> : undefined}\n                size={MenuItemContentSize.XSmall}\n            />\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,KAA0C,CAAC,EAAE,mBAAgB,eAAY;AAClF,QAAM,CAAC,EAAE,YAAS,cAAW,KAAQ,EAAS,CAAc;AAE5D,SAAO,EAAQ,GAAG,EAAiB,WAAW,EAAc,SAAS,IAChE,kBAAA,cAAA,MAAA;AAAA,IAAG,WAAU;AAAA,EAAA,GACT,EAAQ,cAAc,IAAI,CAAC,MACvB,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK,EAAQ;AAAA,IACb;AAAA,IACA;AAAA,IACA,SAAS,MAAM;AACN,QAAA;AAAA,QACD,MAAM;AAAA,QACN,MAAM,EAAE,wBAAwB,EAAQ,YAAY,kBAAkB,EAAQ,GAAG;AAAA,MAAA,CACpF;AAAA,IACL;AAAA,EAAA,CACJ,CACH,CACL,IACA;AACR,GAEa,IAAkD,CAAC;AAAA,EAC5D,SAAS,EAAE,OAAI;AAAA,EACf;AAAA,EACA;AAAA,EACA,eAAY;AAAA,MACV;AACI,QAAA,IAAM,EAAsB,IAAI,GAChC,EAAE,iBAAc,EAClB;AAAA,IACI,KAAK;AAAA,IACL,oBAAoB;AAAA,EAAA,GAExB,GACA,CACJ,GAEM,IAAY,EACd,MAAO,MAAO,EAAe,KAAM,kBAAA,cAAA,KAAA;AAAA,IAAE,WAAU;AAAA,EAAA,GAA0C,CAAM,IAAO,GACtG,CAAC,CAAK,CACV,GAEM,IAAiB,EAA6B,MAAA;AAEpD,SACK,kBAAA,cAAA,OAAA;AAAA,IACG,SAAS;AAAA,IACT,UAAU;AAAA,IACV,MAAK;AAAA,IACL,cAAY,eAAe;AAAA,IAC3B,YAAU;AAAA,IACV,gBAAa;AAAA,IACb,WAAW,EAAM,CAAC,wBAAwB,KAAa,KAAkB,gBAAgB,CAAC;AAAA,EAAA,GAEzF,kBAAA,cAAA,GAAA;AAAA,IACG,OAAO;AAAA,IACP,oBAAoB,MAAc,UAAU,EAAuB,aAAa;AAAA,IAChF,WAAW,MAAc,SAAS,kBAAA,cAAC,OAAc,IAAK;AAAA,IACtD,MAAM,EAAoB;AAAA,EAC9B,CAAA,CACJ;AAER;"}

package/dist/components/LinkChooser/SearchInput.es.js

@@ -1343,6 +1343,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";

package/dist/components/LinkChooser/SearchInput.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.es.js","sources":["../../../src/components/LinkChooser/SearchInput.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* (c) Copyright Frontify Ltd., all rights reserved. */\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { FC, MouseEvent, forwardRef } from 'react';\nimport { IconButtonProps, SearchInputProps } from './types';\nimport { IconArrowOutExternal, IconClipboard, IconCross } from '@foundation/Icon';\n\nexport const SearchInput = forwardRef<HTMLInputElement | null, SearchInputProps>(\n    (\n        {\n            disabled = false,\n            clearable = true,\n            ariaProps,\n            selectedResult,\n            decorator,\n            machineService,\n            onClear,\n            validation = Validation.Default,\n            onClick,\n            onMouseDown,\n        },\n        inputElement,\n    ) => {\n        const { value } = ariaProps;\n        const { isFocusVisible, focusProps, isFocused } = useFocusRing({ isTextInput: true });\n\n        const [, send] = useActor(machineService);\n\n        const isLoading = validation === Validation.Loading;\n\n        return (\n            <div\n                data-test-id=\"link-chooser-search-wrapper\"\n                className={merge([\n                    'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-2.5 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                    disabled\n                        ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                        : merge([\n                              'focus-within:tw-border-black-100',\n                              isFocusVisible && FOCUS_STYLE,\n                              validationClassMap[validation],\n                          ]),\n                ])}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n            >\n                {decorator && (\n                    <div\n                        className={merge([\n                            'tw-flex tw-items-center tw-justify-center tw-flex-none',\n                            disabled || !selectedResult ? 'tw-text-black-40' : 'tw-text-violet-60',\n                        ])}\n                        data-test-id=\"link-chooser-decorator-icon\"\n                    >\n                        {decorator}\n                    </div>\n                )}\n\n                <input\n                    {...mergeProps(focusProps, ariaProps)}\n                    readOnly={!isFocused}\n                    ref={inputElement}\n                    className={merge([\n                        'tw-flex-auto tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-min-w-0 tw-whitespace-nowrap tw-truncate',\n                        disabled\n                            ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                            : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                    ])}\n                    value={value}\n                    disabled={disabled}\n                    data-test-id=\"link-chooser-search-input\"\n                />\n                {selectedResult && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-preview-icon\"\n                        title=\"Preview link\"\n                        ariaLabel=\"preview link\"\n                        icon={<IconArrowOutExternal />}\n                        onClick={() => send('OPEN_PREVIEW')}\n                    />\n                )}\n                {selectedResult && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-copy-icon\"\n                        title=\"Copy text to clipboard\"\n                        ariaLabel=\"copy text to clipboard\"\n                        icon={<IconClipboard />}\n                        onClick={() => send('COPY_TO_CLIPBOARD')}\n                    />\n                )}\n                {`${value}`.length > 0 && clearable && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-clear-icon\"\n                        title=\"Clear text input\"\n                        ariaLabel=\"clear text input\"\n                        icon={<IconCross />}\n                        isComboBoxControl\n                        onClick={onClear}\n                    />\n                )}\n                {isLoading && (\n                    <span className=\"tw-flex tw-flex-none tw-justify-center tw-align-center\">\n                        <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                    </span>\n                )}\n            </div>\n        );\n    },\n);\nSearchInput.displayName = 'SearchInput';\n\nconst IconButton: FC<IconButtonProps> = ({ disabled, title, ariaLabel, testId, icon, onClick, isComboBoxControl }) => {\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        onClick && onClick();\n    };\n\n    return (\n        <button\n            className={merge([\n                'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-flex-none',\n                disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-80  hover:tw-text-black-100',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            data-test-id={testId}\n            title={title}\n            aria-label={ariaLabel}\n            data-combo-box-control={isComboBoxControl}\n            disabled={disabled}\n            onClick={handleClick}\n            type=\"button\"\n            {...focusProps}\n        >\n            {icon}\n        </button>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}
+{"version":3,"file":"SearchInput.es.js","sources":["../../../src/components/LinkChooser/SearchInput.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* (c) Copyright Frontify Ltd., all rights reserved. */\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { FC, MouseEvent, forwardRef } from 'react';\nimport { IconButtonProps, SearchInputProps } from './types';\nimport { IconArrowOutExternal, IconClipboard, IconCross } from '@foundation/Icon';\n\nexport const SearchInput = forwardRef<HTMLInputElement | null, SearchInputProps>(\n    (\n        {\n            disabled = false,\n            clearable = true,\n            ariaProps,\n            selectedResult,\n            decorator,\n            machineService,\n            onClear,\n            validation = Validation.Default,\n            onClick,\n            onMouseDown,\n        },\n        inputElement,\n    ) => {\n        const { value } = ariaProps;\n        const { isFocusVisible, focusProps, isFocused } = useFocusRing({ isTextInput: true });\n\n        const [, send] = useActor(machineService);\n\n        const isLoading = validation === Validation.Loading;\n\n        return (\n            <div\n                data-test-id=\"link-chooser-search-wrapper\"\n                className={merge([\n                    'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-2.5 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n                    disabled\n                        ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n                        : merge([\n                              'focus-within:tw-border-black-100',\n                              isFocusVisible && FOCUS_STYLE,\n                              validationClassMap[validation],\n                          ]),\n                ])}\n                onClick={onClick}\n                onMouseDown={onMouseDown}\n            >\n                {decorator && (\n                    <div\n                        className={merge([\n                            'tw-flex tw-items-center tw-justify-center tw-flex-none',\n                            disabled || !selectedResult ? 'tw-text-black-40' : 'tw-text-violet-60',\n                        ])}\n                        data-test-id=\"link-chooser-decorator-icon\"\n                    >\n                        {decorator}\n                    </div>\n                )}\n\n                <input\n                    {...mergeProps(focusProps, ariaProps)}\n                    readOnly={!isFocused}\n                    ref={inputElement}\n                    className={merge([\n                        'tw-flex-auto tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-min-w-0 tw-whitespace-nowrap tw-truncate',\n                        disabled\n                            ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n                            : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n                    ])}\n                    value={value}\n                    disabled={disabled}\n                    data-test-id=\"link-chooser-search-input\"\n                />\n                {selectedResult && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-preview-icon\"\n                        title=\"Preview link\"\n                        ariaLabel=\"preview link\"\n                        icon={<IconArrowOutExternal />}\n                        onClick={() => send('OPEN_PREVIEW')}\n                    />\n                )}\n                {selectedResult && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-copy-icon\"\n                        title=\"Copy text to clipboard\"\n                        ariaLabel=\"copy text to clipboard\"\n                        icon={<IconClipboard />}\n                        onClick={() => send('COPY_TO_CLIPBOARD')}\n                    />\n                )}\n                {`${value}`.length > 0 && clearable && !isLoading && (\n                    <IconButton\n                        disabled={disabled}\n                        testId=\"link-chooser-clear-icon\"\n                        title=\"Clear text input\"\n                        ariaLabel=\"clear text input\"\n                        icon={<IconCross />}\n                        isComboBoxControl\n                        onClick={onClear}\n                    />\n                )}\n                {isLoading && (\n                    <span className=\"tw-flex tw-flex-none tw-justify-center tw-align-center\">\n                        <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n                    </span>\n                )}\n            </div>\n        );\n    },\n);\nSearchInput.displayName = 'SearchInput';\n\nconst IconButton: FC<IconButtonProps> = ({ disabled, title, ariaLabel, testId, icon, onClick, isComboBoxControl }) => {\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        onClick && onClick();\n    };\n\n    return (\n        <button\n            className={merge([\n                'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-flex-none',\n                disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-80  hover:tw-text-black-100',\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n            data-test-id={testId}\n            title={title}\n            aria-label={ariaLabel}\n            data-combo-box-control={isComboBoxControl}\n            disabled={disabled}\n            onClick={handleClick}\n            type=\"button\"\n            {...focusProps}\n        >\n            {icon}\n        </button>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

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

@@ -1338,6 +1338,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1657,7 +1669,7 @@ const S = {
     Active: "tw-text-red-70",
     Disabled: "tw-text-red-40"
   }
-}, ZA = ({
+}, nE = ({
   title: t,
   decorator: c,
   switchComponent: s,
@@ -1702,7 +1714,7 @@ const S = {
   }, x));
 };
 export {
-  ZA as MenuItem,
+  nE as MenuItem,
   b as MenuItemStyle,
   y as MenuItemTextColorState,
   C as SelectionIndicatorIcon,

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 { MenuItemContent, MenuItemContentProps, MenuItemContentSize } from '@components/MenuItem/MenuItemContent';\nimport { merge } from '@utilities/merge';\nimport React, { FC } from 'react';\nimport { IconCaretRight, IconCheckMark, IconSize } from '@foundation/Icon';\n\nexport enum MenuItemStyle {\n    Primary = 'Primary',\n    Danger = 'Danger',\n}\n\nexport enum SelectionIndicatorIcon {\n    Check = 'Check',\n    CaretRight = 'CaretRight',\n    None = 'None',\n}\n\nexport type MenuItemProps = {\n    style?: MenuItemStyle;\n    size?: MenuItemContentSize;\n    disabled?: boolean;\n    active?: boolean;\n    selectionIndicator?: SelectionIndicatorIcon;\n    type?: string;\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-black-80',\n        [MenuItemTextColorState.Active]: 'tw-text-black',\n        [MenuItemTextColorState.Disabled]: 'tw-text-black-40',\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};\n\nexport const MenuItem: FC<MenuItemProps> = ({\n    title,\n    decorator,\n    switchComponent,\n    subtitle,\n    size = MenuItemContentSize.Small,\n    style = MenuItemStyle.Primary,\n    disabled = false,\n    active = false,\n    selectionIndicator = SelectionIndicatorIcon.Check,\n}) => {\n    const isDangerStyle = style === MenuItemStyle.Danger;\n\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    return (\n        <div\n            className={merge([\n                'tw-rounded tw-cursor-pointer tw-flex tw-items-center tw-justify-between tw-transition-colors tw-gap-2',\n                isDangerStyle ? 'hover:tw-text-red-70' : 'hover:tw-text-black',\n                menuItemSizeClassMap[size],\n                disabled && 'tw-bg-black-0 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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOY,IAAA,sBAAA,MACE,GAAA,UAAA,WACD,EAAA,SAAA,UAFD,IAAA,KAAA,CAAA,CAAA,GAKA,sBAAA,MACA,GAAA,QAAA,SACK,EAAA,aAAA,cACN,EAAA,OAAA,QAHC,IAAA,KAAA,CAAA,CAAA;AAeL,MAAM,IAA4D;AAAA,EACrE,CAAC,EAAoB,SAAS;AAAA,EAC9B,CAAC,EAAoB,QAAQ;AAAA,EAC7B,CAAC,EAAoB,QAAQ;AACjC;AAEY,IAAA,sBAAA,MACE,GAAA,UAAA,WACD,EAAA,SAAA,UACE,EAAA,WAAA,YAHH,IAAA,KAAA,CAAA,CAAA;AAML,MAAM,IAAyF;AAAA,EAClG,AAAC,SAAwB;AAAA,IACrB,AAAC,SAAiC;AAAA,IAClC,AAAC,QAAgC;AAAA,IACjC,AAAC,UAAkC;AAAA,EACvC;AAAA,EACA,AAAC,QAAuB;AAAA,IACpB,AAAC,SAAiC;AAAA,IAClC,AAAC,QAAgC;AAAA,IACjC,AAAC,UAAkC;AAAA,EACvC;AACJ,GAEa,KAA8B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAO,EAAoB;AAAA,EAC3B,WAAQ;AAAA,EACR,cAAW;AAAA,EACX,YAAS;AAAA,EACT,wBAAqB;AAAA,MACnB;AACF,QAAM,IAAgB,MAAU,UAE1B,IAAkB,MAAS,EAAoB,SAAS,EAAS,SAAS,EAAS,QAEnF,IAAc;AAAA,IAChB,AAAC,YAAqC,kBAAA,cAAA,GAAA;AAAA,MAAe,gBAAa;AAAA,MAAkB,MAAM;AAAA,IAAA,CAAiB;AAAA,IAC3G,AAAC,OAA+B,KAC3B,kBAAA,cAAA,GAAA;AAAA,MAAc,gBAAa;AAAA,MAAmB,MAAM;AAAA,IAAA,CAAiB;AAAA,IAE1E,AAAC,MAA8B;AAAA,EACjC,EAAA;AAEF,MAAI,IAAY;AAChB,EAAI,IACY,IAAA,aACL,KACK,KAAA;AAGV,QAAA,IAAY,EAAwB,GAAO;AAEjD,SACK,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAgB,yBAAyB;AAAA,MACzC,EAAqB;AAAA,MACrB,KAAY;AAAA,MACZ,KAAU;AAAA,MACV;AAAA,IAAA,CACH;AAAA,EAAA,GAEA,kBAAA,cAAA,GAAA;AAAA,IACG;AAAA,IACA;AAAA,IACA,UAAU,MAAS,EAAoB,QAAQ,IAAW;AAAA,IAC1D;AAAA,IACA;AAAA,EAAA,CACJ,GACC,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GAAgB,CAAY,CAC/C;AAER;"}
+{"version":3,"file":"MenuItem.es.js","sources":["../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MenuItemContent, MenuItemContentProps, MenuItemContentSize } from '@components/MenuItem/MenuItemContent';\nimport { merge } from '@utilities/merge';\nimport React, { FC } from 'react';\nimport { IconCaretRight, IconCheckMark, IconSize } from '@foundation/Icon';\n\nexport enum MenuItemStyle {\n    Primary = 'Primary',\n    Danger = 'Danger',\n}\n\nexport enum SelectionIndicatorIcon {\n    Check = 'Check',\n    CaretRight = 'CaretRight',\n    None = 'None',\n}\n\nexport type MenuItemProps = {\n    style?: MenuItemStyle;\n    size?: MenuItemContentSize;\n    disabled?: boolean;\n    active?: boolean;\n    selectionIndicator?: SelectionIndicatorIcon;\n    type?: string;\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-black-80',\n        [MenuItemTextColorState.Active]: 'tw-text-black',\n        [MenuItemTextColorState.Disabled]: 'tw-text-black-40',\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};\n\nexport const MenuItem: FC<MenuItemProps> = ({\n    title,\n    decorator,\n    switchComponent,\n    subtitle,\n    size = MenuItemContentSize.Small,\n    style = MenuItemStyle.Primary,\n    disabled = false,\n    active = false,\n    selectionIndicator = SelectionIndicatorIcon.Check,\n}) => {\n    const isDangerStyle = style === MenuItemStyle.Danger;\n\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    return (\n        <div\n            className={merge([\n                'tw-rounded tw-cursor-pointer tw-flex tw-items-center tw-justify-between tw-transition-colors tw-gap-2',\n                isDangerStyle ? 'hover:tw-text-red-70' : 'hover:tw-text-black',\n                menuItemSizeClassMap[size],\n                disabled && 'tw-bg-black-0 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"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOY,IAAA,sBAAA,MACE,GAAA,UAAA,WACD,EAAA,SAAA,UAFD,IAAA,KAAA,CAAA,CAAA,GAKA,sBAAA,MACA,GAAA,QAAA,SACK,EAAA,aAAA,cACN,EAAA,OAAA,QAHC,IAAA,KAAA,CAAA,CAAA;AAeL,MAAM,IAA4D;AAAA,EACrE,CAAC,EAAoB,SAAS;AAAA,EAC9B,CAAC,EAAoB,QAAQ;AAAA,EAC7B,CAAC,EAAoB,QAAQ;AACjC;AAEY,IAAA,sBAAA,MACE,GAAA,UAAA,WACD,EAAA,SAAA,UACE,EAAA,WAAA,YAHH,IAAA,KAAA,CAAA,CAAA;AAML,MAAM,IAAyF;AAAA,EAClG,AAAC,SAAwB;AAAA,IACrB,AAAC,SAAiC;AAAA,IAClC,AAAC,QAAgC;AAAA,IACjC,AAAC,UAAkC;AAAA,EACvC;AAAA,EACA,AAAC,QAAuB;AAAA,IACpB,AAAC,SAAiC;AAAA,IAClC,AAAC,QAAgC;AAAA,IACjC,AAAC,UAAkC;AAAA,EACvC;AACJ,GAEa,KAA8B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAO,EAAoB;AAAA,EAC3B,WAAQ;AAAA,EACR,cAAW;AAAA,EACX,YAAS;AAAA,EACT,wBAAqB;AAAA,MACnB;AACF,QAAM,IAAgB,MAAU,UAE1B,IAAkB,MAAS,EAAoB,SAAS,EAAS,SAAS,EAAS,QAEnF,IAAc;AAAA,IAChB,AAAC,YAAqC,kBAAA,cAAA,GAAA;AAAA,MAAe,gBAAa;AAAA,MAAkB,MAAM;AAAA,IAAA,CAAiB;AAAA,IAC3G,AAAC,OAA+B,KAC3B,kBAAA,cAAA,GAAA;AAAA,MAAc,gBAAa;AAAA,MAAmB,MAAM;AAAA,IAAA,CAAiB;AAAA,IAE1E,AAAC,MAA8B;AAAA,EACjC,EAAA;AAEF,MAAI,IAAY;AAChB,EAAI,IACY,IAAA,aACL,KACK,KAAA;AAGV,QAAA,IAAY,EAAwB,GAAO;AAEjD,SACK,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAgB,yBAAyB;AAAA,MACzC,EAAqB;AAAA,MACrB,KAAY;AAAA,MACZ,KAAU;AAAA,MACV;AAAA,IAAA,CACH;AAAA,EAAA,GAEA,kBAAA,cAAA,GAAA;AAAA,IACG;AAAA,IACA;AAAA,IACA,UAAU,MAAS,EAAoB,QAAQ,IAAW;AAAA,IAC1D;AAAA,IACA;AAAA,EAAA,CACJ,GACC,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GAAgB,CAAY,CAC/C;AAER;"}

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

@@ -1338,6 +1338,18 @@ import "../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1641,7 +1653,7 @@ import "../../foundation/Icon/IconsMap.es.js";
 import { IconSize as w } from "../../foundation/Icon/IconSize.es.js";
 import { ModalTitle as f } from "./context/ModalTitle.es.js";
 import { ModalLayout as x } from "./context/ModalLayout.es.js";
-const F$ = ({
+const tk = ({
   title: e,
   leadText: o,
   decorator: r,
@@ -1667,6 +1679,6 @@ const F$ = ({
   }, o));
 };
 export {
-  F$ as ModalHeader
+  tk as ModalHeader
 };
 //# sourceMappingURL=ModalHeader.es.js.map

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';\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};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,KAAoC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAU,EAAmB;AAAA,MAC3B;AACI,QAAA,IAAiB,EAAW,CAAU,GACtC,EAAE,YAAS,eAAY,EAAW,CAAW;AAEnD,SACK,kBAAA,cAAA,OAAA;AAAA,IAAI,gBAAa;AAAA,IAAe,WAAW,GAAG,EAAQ,OAAO,EAAQ;AAAA,EAAA,GACjE,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,KACI,kBAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM,CAAC,WAAW,EAAoB,EAAQ,CAAC;AAAA,EAEzD,GAAA,EAAa,GAAW,EAAE,MAAM,EAAS,OAAQ,CAAA,CACtD,GAEH,kBAAA,cAAA,MAAA;AAAA,IACI,GAAG;AAAA,IACJ,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAU,eAAe;AAAA,IAAA,CAC5B;AAAA,EAAA,GAEA,CACL,CACJ,GACC,KAAa,kBAAA,cAAA,KAAA;AAAA,IAAE,WAAU;AAAA,EAAA,GAA6B,CAAS,CACpE;AAER;"}
+{"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';\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};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAM,KAAoC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAU,EAAmB;AAAA,MAC3B;AACI,QAAA,IAAiB,EAAW,CAAU,GACtC,EAAE,YAAS,eAAY,EAAW,CAAW;AAEnD,SACK,kBAAA,cAAA,OAAA;AAAA,IAAI,gBAAa;AAAA,IAAe,WAAW,GAAG,EAAQ,OAAO,EAAQ;AAAA,EAAA,GACjE,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,KACI,kBAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM,CAAC,WAAW,EAAoB,EAAQ,CAAC;AAAA,EAEzD,GAAA,EAAa,GAAW,EAAE,MAAM,EAAS,OAAQ,CAAA,CACtD,GAEH,kBAAA,cAAA,MAAA;AAAA,IACI,GAAG;AAAA,IACJ,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAU,eAAe;AAAA,IAAA,CAC5B;AAAA,EAAA,GAEA,CACL,CACJ,GACC,KAAa,kBAAA,cAAA,KAAA;AAAA,IAAE,WAAU;AAAA,EAAA,GAA6B,CAAS,CACpE;AAER;"}

package/dist/components/RichTextEditor/EditorPositioningWrapper/ToolbarWrapper/types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ButtonGroupWidths } from '../../../RichTextEditor/types';
-import { ButtonGroupsPerRow } from '../../EditorActions/Toolbar/types';
+import { ButtonGroupsPerRow } from '../../Toolbar/types';
 export declare type ToolbarWrapperProps = {
     children: ReactNode;
     editorWidth?: number;

package/dist/components/RichTextEditor/{EditorActions/Plugins/StrikethroughPlugin/StrikethroughButton.es.js → Plugins/AlignPlugin/AlignCenterPlugin/AlignCenterButton.es.js}

@@ -1,5 +1,5 @@
 import t from "react";
-import { MarkToolbarButton as m, getPluginType as i } from "@udecode/plate";
+import { AlignToolbarButton as r } from "@udecode/plate";
 import "../../../../../foundation/Icon/Generated/IconAdobeCreativeCloud.es.js";
 import "../../../../../foundation/Icon/Generated/IconAdobeCreativeCloud12.es.js";
 import "../../../../../foundation/Icon/Generated/IconAdobeCreativeCloud16.es.js";
@@ -1337,6 +1337,18 @@ import "../../../../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../../../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../../../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../../../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../../../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../../../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../../../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1486,7 +1498,7 @@ import "../../../../../foundation/Icon/Generated/IconTester16.es.js";
 import "../../../../../foundation/Icon/Generated/IconTester20.es.js";
 import "../../../../../foundation/Icon/Generated/IconTester24.es.js";
 import "../../../../../foundation/Icon/Generated/IconTester32.es.js";
-import "../../../../../foundation/Icon/Generated/IconTextAlignmentCentre.es.js";
+import m from "../../../../../foundation/Icon/Generated/IconTextAlignmentCentre.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextAlignmentCentre12.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextAlignmentCentre16.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextAlignmentCentre20.es.js";
@@ -1546,7 +1558,7 @@ import "../../../../../foundation/Icon/Generated/IconTextFormatItalic16.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextFormatItalic20.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextFormatItalic24.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextFormatItalic32.es.js";
-import p from "../../../../../foundation/Icon/Generated/IconTextFormatStrikethrough.es.js";
+import "../../../../../foundation/Icon/Generated/IconTextFormatStrikethrough.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextFormatStrikethrough12.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextFormatStrikethrough16.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextFormatStrikethrough20.es.js";
@@ -1637,21 +1649,21 @@ import "../../../../../foundation/Icon/Generated/IconWorkflowShapes20.es.js";
 import "../../../../../foundation/Icon/Generated/IconWorkflowShapes24.es.js";
 import "../../../../../foundation/Icon/Generated/IconWorkflowShapes32.es.js";
 import "../../../../../foundation/Icon/IconsMap.es.js";
-import { IconSize as e } from "../../../../../foundation/Icon/IconSize.es.js";
-import { ButtonWrapper as n, IconStylingWrapper as a, buttonClassNames as c, buttonStyles as l } from "../helper.es.js";
-const vF = ({ editor: r, id: o }) => /* @__PURE__ */ t.createElement(n, {
+import { IconSize as i } from "../../../../../foundation/Icon/IconSize.es.js";
+import { ButtonWrapper as p, IconStylingWrapper as e, buttonClassNames as n, buttonStyles as l } from "../../helper.es.js";
+const PR = ({ id: o }) => /* @__PURE__ */ t.createElement(p, {
   id: o
-}, /* @__PURE__ */ t.createElement(m, {
-  type: i(r, o),
-  icon: /* @__PURE__ */ t.createElement(a, {
-    icon: /* @__PURE__ */ t.createElement(p, {
-      size: e.Size16
+}, /* @__PURE__ */ t.createElement(r, {
+  value: "center",
+  icon: /* @__PURE__ */ t.createElement(e, {
+    icon: /* @__PURE__ */ t.createElement(m, {
+      size: i.Size16
     })
   }),
-  classNames: c,
+  classNames: n,
   styles: l
 }));
 export {
-  vF as StrikethroughButton
+  PR as AlignCenterButton
 };
-//# sourceMappingURL=StrikethroughButton.es.js.map
+//# sourceMappingURL=AlignCenterButton.es.js.map

package/dist/components/RichTextEditor/{EditorActions/Plugins/CodePlugin/CodeButton.es.js.map → Plugins/AlignPlugin/AlignCenterPlugin/AlignCenterButton.es.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CodeButton.es.js","sources":["../../../../../../src/components/RichTextEditor/EditorActions/Plugins/CodePlugin/CodeButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { MarkToolbarButton, getPluginType } from '@udecode/plate';\nimport { IconSize, IconTextBrackets } from '@foundation/Icon';\nimport { ButtonWrapper, IconStylingWrapper, buttonClassNames, buttonStyles } from '../helper';\nimport { PluginButtonProps } from '../types';\n\nexport const CodeButton = ({ editor, id }: PluginButtonProps) => (\n    <ButtonWrapper id={id}>\n        <MarkToolbarButton\n            type={getPluginType(editor, id)}\n            icon={<IconStylingWrapper icon={<IconTextBrackets size={IconSize.Size16} />} />}\n            classNames={buttonClassNames}\n            styles={buttonStyles}\n        />\n    </ButtonWrapper>\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,KAAa,CAAC,EAAE,WAAQ,YAChC,kBAAA,cAAA,GAAA;AAAA,EAAc;AAAA,GACV,kBAAA,cAAA,GAAA;AAAA,EACG,MAAM,EAAc,GAAQ,CAAE;AAAA,EAC9B,MAAO,kBAAA,cAAA,GAAA;AAAA,IAAmB,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAiB,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,EAAA,CAAI;AAAA,EAC7E,YAAY;AAAA,EACZ,QAAQ;AAAA,CACZ,CACJ;"}
+{"version":3,"file":"AlignCenterButton.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/AlignPlugin/AlignCenterPlugin/AlignCenterButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { AlignToolbarButton } from '@udecode/plate';\nimport { IconSize, IconTextAlignmentCentre } from '@foundation/Icon';\nimport { PluginButtonProps } from '../../types';\nimport { ButtonWrapper, IconStylingWrapper, buttonClassNames, buttonStyles } from '../../helper';\n\nexport const AlignCenterButton = ({ id }: PluginButtonProps) => (\n    <ButtonWrapper id={id}>\n        <AlignToolbarButton\n            value=\"center\"\n            icon={<IconStylingWrapper icon={<IconTextAlignmentCentre size={IconSize.Size16} />} />}\n            classNames={buttonClassNames}\n            styles={buttonStyles}\n        />\n    </ButtonWrapper>\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,MAAM,KAAoB,CAAC,EAAE,YAC/B,kBAAA,cAAA,GAAA;AAAA,EAAc;AAAA,GACV,kBAAA,cAAA,GAAA;AAAA,EACG,OAAM;AAAA,EACN,MAAO,kBAAA,cAAA,GAAA;AAAA,IAAmB,MAAO,kBAAA,cAAA,GAAA;AAAA,MAAwB,MAAM,EAAS;AAAA,IAAA,CAAQ;AAAA,EAAA,CAAI;AAAA,EACpF,YAAY;AAAA,EACZ,QAAQ;AAAA,CACZ,CACJ;"}

package/dist/components/RichTextEditor/Plugins/AlignPlugin/AlignCenterPlugin/AlignCenterMarkupElement.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlignCenterMarkupElement.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/AlignPlugin/AlignCenterPlugin/AlignCenterMarkupElement.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { MarkupElement } from '../../MarkupElement';\n\nexport class AlignCenterMarkupElement extends MarkupElement {\n    constructor(id = 'align-center') {\n        super(id);\n    }\n}\n"],"names":[],"mappings":";AAIO,MAAM,UAAiC,EAAc;AAAA,EACxD,YAAY,IAAK,gBAAgB;AAC7B,UAAM,CAAE;AAAA,EACZ;AACJ;"}

package/dist/components/RichTextEditor/Plugins/AlignPlugin/AlignCenterPlugin/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/AlignPlugin/AlignCenterPlugin/index.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ALIGN_PLUGIN } from '../id';\nimport { AlignCenterMarkupElement } from './AlignCenterMarkupElement';\nimport { AlignCenterButton } from './AlignCenterButton';\nimport { AlignPlugin } from '../AlignPlugin';\nimport { PluginProps } from '../../Plugin';\n\nexport class AlignCenterPlugin extends AlignPlugin {\n    constructor(props?: PluginProps) {\n        super(ALIGN_PLUGIN, {\n            button: AlignCenterButton,\n            markupElement: new AlignCenterMarkupElement(),\n            ...props,\n        });\n    }\n}\n"],"names":[],"mappings":";;;;AAQO,MAAM,UAA0B,EAAY;AAAA,EAC/C,YAAY,GAAqB;AAC7B,UAAM,GAAc;AAAA,MAChB,QAAQ;AAAA,MACR,eAAe,IAAI,EAAyB;AAAA,MAC5C,GAAG;AAAA,IAAA,CACN;AAAA,EACL;AACJ;"}

package/dist/components/RichTextEditor/{EditorActions/Plugins/CodePlugin/CodeButton.es.js → Plugins/AlignPlugin/AlignJustifyPlugin/AlignJustifyButton.es.js}

@@ -1,5 +1,5 @@
 import t from "react";
-import { MarkToolbarButton as m, getPluginType as p } from "@udecode/plate";
+import { AlignToolbarButton as r } from "@udecode/plate";
 import "../../../../../foundation/Icon/Generated/IconAdobeCreativeCloud.es.js";
 import "../../../../../foundation/Icon/Generated/IconAdobeCreativeCloud12.es.js";
 import "../../../../../foundation/Icon/Generated/IconAdobeCreativeCloud16.es.js";
@@ -1337,6 +1337,18 @@ import "../../../../../foundation/Icon/Generated/IconSide16.es.js";
 import "../../../../../foundation/Icon/Generated/IconSide20.es.js";
 import "../../../../../foundation/Icon/Generated/IconSide24.es.js";
 import "../../../../../foundation/Icon/Generated/IconSide32.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarLeft.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarLeft12.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarLeft16.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarLeft20.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarLeft24.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarLeft32.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarRight.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarRight12.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarRight16.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarRight20.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarRight24.es.js";
+import "../../../../../foundation/Icon/Generated/IconSidebarRight32.es.js";
 import "../../../../../foundation/Icon/Generated/IconSketch.es.js";
 import "../../../../../foundation/Icon/Generated/IconSketch12.es.js";
 import "../../../../../foundation/Icon/Generated/IconSketch16.es.js";
@@ -1492,7 +1504,7 @@ import "../../../../../foundation/Icon/Generated/IconTextAlignmentCentre16.es.js
 import "../../../../../foundation/Icon/Generated/IconTextAlignmentCentre20.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextAlignmentCentre24.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextAlignmentCentre32.es.js";
-import "../../../../../foundation/Icon/Generated/IconTextAlignmentJustify.es.js";
+import i from "../../../../../foundation/Icon/Generated/IconTextAlignmentJustify.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextAlignmentJustify12.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextAlignmentJustify16.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextAlignmentJustify20.es.js";
@@ -1516,7 +1528,7 @@ import "../../../../../foundation/Icon/Generated/IconTextBoxStack16.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextBoxStack20.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextBoxStack24.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextBoxStack32.es.js";
-import i from "../../../../../foundation/Icon/Generated/IconTextBrackets.es.js";
+import "../../../../../foundation/Icon/Generated/IconTextBrackets.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextBrackets12.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextBrackets16.es.js";
 import "../../../../../foundation/Icon/Generated/IconTextBrackets20.es.js";
@@ -1637,21 +1649,21 @@ import "../../../../../foundation/Icon/Generated/IconWorkflowShapes20.es.js";
 import "../../../../../foundation/Icon/Generated/IconWorkflowShapes24.es.js";
 import "../../../../../foundation/Icon/Generated/IconWorkflowShapes32.es.js";
 import "../../../../../foundation/Icon/IconsMap.es.js";
-import { IconSize as e } from "../../../../../foundation/Icon/IconSize.es.js";
-import { ButtonWrapper as n, IconStylingWrapper as a, buttonClassNames as c, buttonStyles as s } from "../helper.es.js";
-const vP = ({ editor: r, id: o }) => /* @__PURE__ */ t.createElement(n, {
+import { IconSize as m } from "../../../../../foundation/Icon/IconSize.es.js";
+import { ButtonWrapper as p, IconStylingWrapper as e, buttonClassNames as n, buttonStyles as l } from "../../helper.es.js";
+const Pv = ({ id: o }) => /* @__PURE__ */ t.createElement(p, {
   id: o
-}, /* @__PURE__ */ t.createElement(m, {
-  type: p(r, o),
-  icon: /* @__PURE__ */ t.createElement(a, {
+}, /* @__PURE__ */ t.createElement(r, {
+  value: "justify",
+  icon: /* @__PURE__ */ t.createElement(e, {
     icon: /* @__PURE__ */ t.createElement(i, {
-      size: e.Size16
+      size: m.Size16
     })
   }),
-  classNames: c,
-  styles: s
+  classNames: n,
+  styles: l
 }));
 export {
-  vP as CodeButton
+  Pv as AlignJustifyButton
 };
-//# sourceMappingURL=CodeButton.es.js.map
+//# sourceMappingURL=AlignJustifyButton.es.js.map