@chayns-components/core 5.4.13-alpha.0 → 5.4.13

package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","getElementClickEvent","AreaContext","Icon","Input","InputSize","SearchInput","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","StyledTitleInputWrapper","StyledUnicodeIcon","getIsExpandableIcon","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","shouldSkipAnimation","uuid","titleInputProps","onTitleInputChange","titleColor","shouldEnableKeyboardHighlighting","headHeight","setHeadHeight","closed","open","isSearchActive","setIsSearchActive","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","shouldPreventRightElementClick","window","setTimeout","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","color","iconColor","headline","internalIcon","accordionIcon","className","iconStyle","$icon","accordionHeadHeight","height","animate","initial","key","transition","duration","rotate","undefined","opacity","ref","$isWrapped","Provider","shouldChangeColor","_extends","onChange","mode","style","display","alignItems","gap","scale","exit","transitionEnd","$isOpen","$color","$hasSearch","$isSearchActive","onActiveChange","isActive","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    type CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/element';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { type InputProps, InputSize } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionSearchWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n    StyledTitleInputWrapper,\n} from './AccordionHead.styles';\nimport { StyledUnicodeIcon } from '../../icon/Icon.styles';\nimport { getIsExpandableIcon } from '../../../utils/icon';\n\nexport type AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchPlaceholder?: string;\n    searchValue?: string;\n    shouldRotateIcon?: boolean;\n    title?: string;\n    titleElement?: ReactNode;\n    uuid: string;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\n    titleColor?: CSSProperties['color'];\n    shouldSkipAnimation?: boolean;\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldRotateIcon,\n    title,\n    titleElement,\n    shouldSkipAnimation,\n    uuid,\n    titleInputProps,\n    onTitleInputChange,\n    titleColor,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 32,\n        open: isWrapped ? 40 : 42,\n    });\n\n    const [isSearchActive, setIsSearchActive] = useState(false);\n\n    const theme = useTheme() as Theme;\n\n    const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n    useEffect(() => {\n        setInternalSearchValue(searchValue);\n    }, [searchValue]);\n\n    useEffect(() => {\n        if (typeof onSearchChange === 'function' && !isOpen) {\n            setIsSearchActive(false);\n        }\n    }, [isOpen, onSearchChange]);\n\n    const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n        setInternalSearchValue(event.target.value);\n        if (typeof onSearchChange === 'function') {\n            onSearchChange(event);\n        }\n    };\n\n    const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n        shouldUseChildElement: true,\n    });\n\n    const shouldPreventRightElementClick = useMemo(\n        () => getElementClickEvent(rightElement),\n        [rightElement],\n    );\n\n    useEffect(() => {\n        if (typeof onTitleInputChange === 'function') {\n            setHeadHeight({ closed: 50, open: 50 });\n        } else {\n            // The timeout is needed because the width is incorrect on the first render\n            window.setTimeout(() => {\n                setHeadHeight(\n                    getAccordionHeadHeight({\n                        isWrapped,\n                        title,\n                        width: titleWrapperRef.current?.clientWidth ?? 0,\n                        hasSearch: typeof onSearchChange === 'function',\n                    }),\n                );\n            }, 1);\n        }\n        // The fontSize need to be included to trigger a new calculation.\n        // After the size is increased, the Title is cut at the bottom.\n    }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || isFixed) {\n            return (\n                <Icon\n                    icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n                    color={theme.iconColor || theme.headline}\n                />\n            );\n        }\n\n        const internalIcon = getIsExpandableIcon(theme.accordionIcon);\n        return (\n            <StyledUnicodeIcon className={theme.iconStyle ?? 'fa-regular'} $icon={internalIcon} />\n        );\n    }, [icon, isFixed, theme.accordionIcon, theme.headline, theme.iconColor, theme.iconStyle]);\n\n    let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n    if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n        // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n        // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n        accordionHeadHeight = titleElementChildrenSize.height + 8;\n    }\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: accordionHeadHeight }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            key={`accordionHead--${uuid}`}\n            transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                key={`accordionHeadIcon--${uuid}`}\n                transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                ref={titleWrapperRef}\n                $isWrapped={isWrapped}\n                key={`accordionHeadContentWrapper--${uuid}`}\n            >\n                {typeof onTitleInputChange === 'function' ? (\n                    // eslint-disable-next-line react/jsx-no-constructed-context-values\n                    <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                        <StyledTitleInputWrapper>\n                            <Input\n                                /* eslint-disable-next-line react/jsx-props-no-spreading */\n                                {...titleInputProps}\n                                value={title}\n                                onChange={onTitleInputChange}\n                                shouldEnableKeyboardHighlighting={\n                                    titleInputProps?.shouldEnableKeyboardHighlighting ??\n                                    shouldEnableKeyboardHighlighting\n                                }\n                            />\n                        </StyledTitleInputWrapper>\n                    </AreaContext.Provider>\n                ) : (\n                    <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n                        <AnimatePresence\n                            initial={false}\n                            mode=\"sync\"\n                            key={`accordionHeadTitleWrapper--${uuid}`}\n                        >\n                            <StyledMotionTitleWrapper\n                                key={`accordionHeadTitleWrapperWrapper--${uuid}`}\n                                style={{\n                                    display: 'flex',\n                                    alignItems: 'center',\n                                    gap: '12px',\n                                    width: typeof title !== 'string' ? '100%' : undefined,\n                                }}\n                                initial={\n                                    !shouldSkipAnimation\n                                        ? { scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }\n                                        : false\n                                }\n                                exit={\n                                    shouldSkipAnimation\n                                        ? {\n                                              opacity: 0,\n                                              transition: { duration: 0 },\n                                              transitionEnd: { display: 'none' },\n                                          }\n                                        : { scale: 1, opacity: 0 }\n                                }\n                                animate={{ scale: 1, opacity: 1 }}\n                                transition={{\n                                    duration: shouldSkipAnimation ? 0 : 0.25,\n                                    opacity: { duration: 0 },\n                                }}\n                            >\n                                {title && (\n                                    <StyledMotionTitle\n                                        $isOpen={isOpen}\n                                        $isWrapped={isWrapped}\n                                        $color={titleColor}\n                                        $hasSearch={typeof onSearchChange === 'function'}\n                                        animate={{\n                                            fontSize: isOpen && !isWrapped ? '1.3rem' : '1rem',\n                                        }}\n                                        initial={shouldSkipAnimation ? false : { fontSize: '1rem' }}\n                                        transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n                                    >\n                                        {title}\n                                    </StyledMotionTitle>\n                                )}\n\n                                {titleElement && (\n                                    <StyledMotionTitleElementWrapper\n                                        key={`accordionTitleElement--${uuid}`}\n                                        ref={titleElementWrapperRef}\n                                    >\n                                        {titleElement}\n                                    </StyledMotionTitleElementWrapper>\n                                )}\n                            </StyledMotionTitleWrapper>\n                        </AnimatePresence>\n                    </LayoutGroup>\n                )}\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper $isSearchActive={isSearchActive}>\n                    <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n                        {typeof onSearchChange === 'function' && isOpen && (\n                            <StyledMotionSearchWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`searchWrapper--${uuid}`}\n                            >\n                                <SearchInput\n                                    onChange={handleOnSearchChance}\n                                    onActiveChange={(isActive) => setIsSearchActive(isActive)}\n                                    placeholder={searchPlaceholder}\n                                    size={InputSize.Small}\n                                    value={internalSearchValue}\n                                    shouldEnableKeyboardHighlighting={\n                                        shouldEnableKeyboardHighlighting\n                                    }\n                                />\n                            </StyledMotionSearchWrapper>\n                        )}\n                        {rightElement && (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`rightElementWrapper--${uuid}`}\n                                onClick={\n                                    !isFixed && !shouldPreventRightElementClick\n                                        ? onClick\n                                        : undefined\n                                }\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AccordionHead.js","names":["AnimatePresence","LayoutGroup","React","useEffect","useMemo","useRef","useState","useTheme","useElementSize","getAccordionHeadHeight","getElementClickEvent","AreaContext","Icon","Input","InputSize","SearchInput","StyledMotionAccordionHead","StyledMotionContentWrapper","StyledMotionIconWrapper","StyledMotionRightElementWrapper","StyledMotionSearchWrapper","StyledMotionTitle","StyledMotionTitleElementWrapper","StyledMotionTitleWrapper","StyledRightWrapper","StyledTitleInputWrapper","StyledUnicodeIcon","getIsExpandableIcon","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","shouldSkipAnimation","uuid","titleInputProps","onTitleInputChange","titleColor","headHeight","setHeadHeight","closed","open","isSearchActive","setIsSearchActive","theme","titleElementWrapperRef","titleWrapperRef","internalSearchValue","setInternalSearchValue","handleOnSearchChance","event","target","value","titleElementChildrenSize","shouldUseChildElement","shouldPreventRightElementClick","window","setTimeout","width","current","clientWidth","hasSearch","fontSize","iconElement","createElement","icons","color","iconColor","headline","internalIcon","accordionIcon","className","iconStyle","$icon","accordionHeadHeight","height","animate","initial","key","transition","duration","rotate","undefined","opacity","ref","$isWrapped","Provider","shouldChangeColor","_extends","onChange","mode","style","display","alignItems","gap","scale","exit","transitionEnd","$isOpen","$color","$hasSearch","$isSearchActive","onActiveChange","isActive","placeholder","size","Small","displayName"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'motion/react';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    type CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/element';\nimport { getAccordionHeadHeight, getElementClickEvent } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport type { Theme } from '../../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { type InputProps, InputSize } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionSearchWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n    StyledTitleInputWrapper,\n} from './AccordionHead.styles';\nimport { StyledUnicodeIcon } from '../../icon/Icon.styles';\nimport { getIsExpandableIcon } from '../../../utils/icon';\n\nexport type AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchPlaceholder?: string;\n    searchValue?: string;\n    shouldRotateIcon?: boolean;\n    title?: string;\n    titleElement?: ReactNode;\n    uuid: string;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\n    titleColor?: CSSProperties['color'];\n    shouldSkipAnimation?: boolean;\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldRotateIcon,\n    title,\n    titleElement,\n    shouldSkipAnimation,\n    uuid,\n    titleInputProps,\n    onTitleInputChange,\n    titleColor,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 32,\n        open: isWrapped ? 40 : 42,\n    });\n\n    const [isSearchActive, setIsSearchActive] = useState(false);\n\n    const theme = useTheme() as Theme;\n\n    const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const [internalSearchValue, setInternalSearchValue] = useState<string>();\n\n    useEffect(() => {\n        setInternalSearchValue(searchValue);\n    }, [searchValue]);\n\n    useEffect(() => {\n        if (typeof onSearchChange === 'function' && !isOpen) {\n            setIsSearchActive(false);\n        }\n    }, [isOpen, onSearchChange]);\n\n    const handleOnSearchChance = (event: ChangeEvent<HTMLInputElement>) => {\n        setInternalSearchValue(event.target.value);\n        if (typeof onSearchChange === 'function') {\n            onSearchChange(event);\n        }\n    };\n\n    const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n        shouldUseChildElement: true,\n    });\n\n    const shouldPreventRightElementClick = useMemo(\n        () => getElementClickEvent(rightElement),\n        [rightElement],\n    );\n\n    useEffect(() => {\n        if (typeof onTitleInputChange === 'function') {\n            setHeadHeight({ closed: 50, open: 50 });\n        } else {\n            // The timeout is needed because the width is incorrect on the first render\n            window.setTimeout(() => {\n                setHeadHeight(\n                    getAccordionHeadHeight({\n                        isWrapped,\n                        title,\n                        width: titleWrapperRef.current?.clientWidth ?? 0,\n                        hasSearch: typeof onSearchChange === 'function',\n                    }),\n                );\n            }, 1);\n        }\n        // The fontSize need to be included to trigger a new calculation.\n        // After the size is increased, the Title is cut at the bottom.\n    }, [isWrapped, onSearchChange, onTitleInputChange, theme.fontSize, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || isFixed) {\n            return (\n                <Icon\n                    icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n                    color={theme.iconColor || theme.headline}\n                />\n            );\n        }\n\n        const internalIcon = getIsExpandableIcon(theme.accordionIcon);\n        return (\n            <StyledUnicodeIcon className={theme.iconStyle ?? 'fa-regular'} $icon={internalIcon} />\n        );\n    }, [icon, isFixed, theme.accordionIcon, theme.headline, theme.iconColor, theme.iconStyle]);\n\n    let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n    if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n        // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n        // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n        accordionHeadHeight = titleElementChildrenSize.height + 8;\n    }\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: accordionHeadHeight }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            key={`accordionHead--${uuid}`}\n            transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                key={`accordionHeadIcon--${uuid}`}\n                transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                ref={titleWrapperRef}\n                $isWrapped={isWrapped}\n                key={`accordionHeadContentWrapper--${uuid}`}\n            >\n                {typeof onTitleInputChange === 'function' ? (\n                    // eslint-disable-next-line react/jsx-no-constructed-context-values\n                    <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                        <StyledTitleInputWrapper>\n                            <Input\n                                /* eslint-disable-next-line react/jsx-props-no-spreading */\n                                {...titleInputProps}\n                                value={title}\n                                onChange={onTitleInputChange}\n                            />\n                        </StyledTitleInputWrapper>\n                    </AreaContext.Provider>\n                ) : (\n                    <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n                        <AnimatePresence\n                            initial={false}\n                            mode=\"sync\"\n                            key={`accordionHeadTitleWrapper--${uuid}`}\n                        >\n                            <StyledMotionTitleWrapper\n                                key={`accordionHeadTitleWrapperWrapper--${uuid}`}\n                                style={{\n                                    display: 'flex',\n                                    alignItems: 'center',\n                                    gap: '12px',\n                                    width: typeof title !== 'string' ? '100%' : undefined,\n                                }}\n                                initial={\n                                    !shouldSkipAnimation\n                                        ? { scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }\n                                        : false\n                                }\n                                exit={\n                                    shouldSkipAnimation\n                                        ? {\n                                              opacity: 0,\n                                              transition: { duration: 0 },\n                                              transitionEnd: { display: 'none' },\n                                          }\n                                        : { scale: 1, opacity: 0 }\n                                }\n                                animate={{ scale: 1, opacity: 1 }}\n                                transition={{\n                                    duration: shouldSkipAnimation ? 0 : 0.25,\n                                    opacity: { duration: 0 },\n                                }}\n                            >\n                                {title && (\n                                    <StyledMotionTitle\n                                        $isOpen={isOpen}\n                                        $isWrapped={isWrapped}\n                                        $color={titleColor}\n                                        $hasSearch={typeof onSearchChange === 'function'}\n                                        animate={{\n                                            fontSize: isOpen && !isWrapped ? '1.3rem' : '1rem',\n                                        }}\n                                        initial={shouldSkipAnimation ? false : { fontSize: '1rem' }}\n                                        transition={{ duration: shouldSkipAnimation ? 0 : 0.25 }}\n                                    >\n                                        {title}\n                                    </StyledMotionTitle>\n                                )}\n\n                                {titleElement && (\n                                    <StyledMotionTitleElementWrapper\n                                        key={`accordionTitleElement--${uuid}`}\n                                        ref={titleElementWrapperRef}\n                                    >\n                                        {titleElement}\n                                    </StyledMotionTitleElementWrapper>\n                                )}\n                            </StyledMotionTitleWrapper>\n                        </AnimatePresence>\n                    </LayoutGroup>\n                )}\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper $isSearchActive={isSearchActive}>\n                    <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n                        {typeof onSearchChange === 'function' && isOpen && (\n                            <StyledMotionSearchWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`searchWrapper--${uuid}`}\n                            >\n                                <SearchInput\n                                    onChange={handleOnSearchChance}\n                                    onActiveChange={(isActive) => setIsSearchActive(isActive)}\n                                    placeholder={searchPlaceholder}\n                                    size={InputSize.Small}\n                                    value={internalSearchValue}\n                                />\n                            </StyledMotionSearchWrapper>\n                        )}\n                        {rightElement && (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`rightElementWrapper--${uuid}`}\n                                onClick={\n                                    !isFixed && !shouldPreventRightElementClick\n                                        ? onClick\n                                        : undefined\n                                }\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js

@@ -8,12 +8,6 @@ export const StyledMotionAccordionHead = styled(motion.div)`
     display: flex;
     overflow: hidden;
     padding: 4px 0;
-
-    &:focus-within {
-        overflow: visible;
-        position: relative;
-        z-index: 1;
-    }
 `;
 export const StyledMotionIconWrapper = styled(motion.div)`
     align-items: center;
@@ -37,10 +31,6 @@ export const StyledMotionContentWrapper = styled(motion.div)`
     overflow: hidden;
     margin-right: 10px;
 
-    &:focus-within {
-        overflow: visible;
-    }
-
     ${({
   $isWrapped
 }) => $isWrapped && css`
@@ -104,10 +94,6 @@ export const StyledRightWrapper = styled.div`
     margin-right: 5px;
     overflow: hidden;
     position: relative;
-
-    &:focus-within {
-        overflow: visible;
-    }
 `;
 export const StyledMotionSearchWrapper = styled(motion.div)`
     align-items: center;

package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","theme","text","StyledMotionIconWrapper","onClick","StyledMotionContentWrapper","$isWrapped","StyledMotionTitleWrapper","StyledTitleInputWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n\n    &:focus-within {\n        overflow: visible;\n        position: relative;\n        z-index: 1;\n    }\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'inherit')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'inherit')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n\n    &:focus-within {\n        overflow: visible;\n    }\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-items: center;\n        `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\nexport const StyledTitleInputWrapper = styled.div`\n    width: 100%;\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $color?: CSSProperties['color'];\n    $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n    white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n        $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n    will-change: unset !important;\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-content: center;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n\ntype StyledRightWrapperProps = {\n    $isSearchActive: boolean;\n};\n\nexport const StyledRightWrapper = styled.div<StyledRightWrapperProps>`\n    display: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n\n    &:focus-within {\n        overflow: visible;\n    }\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)`\n    align-items: center;\n    justify-content: end;\n    position: relative;\n    display: flex;\n    width: 100%;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'inherit')};\n\n    will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AccordionHead.styles.js","names":["motion","styled","css","StyledMotionAccordionHead","div","theme","text","StyledMotionIconWrapper","onClick","StyledMotionContentWrapper","$isWrapped","StyledMotionTitleWrapper","StyledTitleInputWrapper","StyledMotionTitle","$isOpen","undefined","$hasSearch","$color","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'inherit')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\ntype StyledMotionContentWrapperProps = WithTheme<{ $isWrapped: boolean }>;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<StyledMotionContentWrapperProps>`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'inherit')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-items: center;\n        `}\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\nexport const StyledTitleInputWrapper = styled.div`\n    width: 100%;\n`;\n\ntype StyledMotionTitleProps = WithTheme<{\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $color?: CSSProperties['color'];\n    $hasSearch: boolean;\n}>;\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ $isOpen, $isWrapped }) => ($isOpen && !$isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ $isOpen, $isWrapped }) => ($isOpen && $isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ $isWrapped, $hasSearch }) => ($isWrapped || $hasSearch ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    color: ${({ $color, theme }: StyledMotionTitleProps) => $color ?? theme.text};\n    white-space: ${({ $isOpen, $isWrapped, $hasSearch }) =>\n        $isOpen && !$isWrapped && !$hasSearch ? 'normal' : 'nowrap'};\n\n    will-change: unset !important;\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            align-content: center;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n\ntype StyledRightWrapperProps = {\n    $isSearchActive: boolean;\n};\n\nexport const StyledRightWrapper = styled.div<StyledRightWrapperProps>`\n    display: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)`\n    align-items: center;\n    justify-content: end;\n    position: relative;\n    display: flex;\n    width: 100%;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'inherit')};\n\n    will-change: unset !important;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    $hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ $hasIcon }) => ($hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/amount-control/AmountControl.js

@@ -1,7 +1,6 @@
 import { AnimatePresence } from 'motion/react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { checkForValidAmount } from '../../utils/amountControl';
-import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import Icon from '../icon/Icon';
 import { StyledAmountControl, StyledAmountControlInput, StyledAmountControlPseudoInput, StyledInputWrapper, StyledMotionAmountControlButton } from './AmountControl.styles';
 const AmountControl = ({
@@ -13,18 +12,15 @@ const AmountControl = ({
   maxAmount,
   minAmount = 0,
   onChange,
-  shouldEnableKeyboardHighlighting,
   shouldForceLabel = false,
   shouldShowAddIconOnMinAmount = false,
   shouldShowIcon = true,
   shouldShowWideInput = false,
   step: stepProp = 1
 }) => {
-  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   const [amountValue, setAmountValue] = useState(minAmount);
   const [inputValue, setInputValue] = useState(minAmount.toString());
   const [displayState, setDisplayState] = useState('default');
-  const [isEditing, setIsEditing] = useState(false);
   const step = useMemo(() => Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1, [stepProp]);
   const inputRef = useRef(null);
 
@@ -106,9 +102,6 @@ const AmountControl = ({
     }).toString());
   }, [displayState, maxAmount, minAmount, onChange, step]);
   const handleFirstAmount = useCallback(() => {
-    if (isDisabled) {
-      return;
-    }
     if (amountValue !== minAmount) {
       return;
     }
@@ -117,16 +110,16 @@ const AmountControl = ({
     }
     setAmountValue(minAmount + step);
     setInputValue((minAmount + step).toString());
-  }, [amountValue, isDisabled, minAmount, onChange, step]);
-  const handlePseudoInputClick = useCallback(() => {
-    if (isDisabled) {
-      return;
+  }, [amountValue, minAmount, onChange, step]);
+  const handleDeleteIconClick = useCallback(() => {
+    if (inputValue === '0') {
+      window.setTimeout(() => {
+        inputRef.current?.focus();
+      }, 500);
+    } else {
+      handleAmountRemove();
     }
-    setIsEditing(true);
-    window.requestAnimationFrame(() => {
-      inputRef.current?.focus();
-    });
-  }, [isDisabled]);
+  }, [handleAmountRemove, inputValue]);
   const handleInputBlur = useCallback(() => {
     const checkedValue = checkForValidAmount({
       minAmount,
@@ -135,7 +128,6 @@ const AmountControl = ({
     });
     setAmountValue(checkedValue);
     setInputValue(checkedValue.toString());
-    setIsEditing(false);
     if (typeof onChange === 'function') {
       onChange(checkedValue);
     }
@@ -158,14 +150,12 @@ const AmountControl = ({
   if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {
     inputLabel = label;
   }
-  const shouldShowPseudoInput = !isEditing && (inputValue === '0' || shouldForceLabel && typeof label === 'string' || inputLabel === label);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledAmountControl, {
     onClick: handleFirstAmount,
     $isDisabled: isDisabled
   }, /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, ['normal'].includes(displayState) && /*#__PURE__*/React.createElement(StyledMotionAmountControlButton, {
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     key: "left_button",
     initial: {
       width: 0,
@@ -187,14 +177,14 @@ const AmountControl = ({
       type: 'tween'
     },
     onClick: handleAmountRemove,
-    disabled: isDisabled || amountValue !== 0 && amountValue <= minAmount,
-    $isDisabled: isDisabled || amountValue !== 0 && amountValue <= minAmount
+    disabled: amountValue !== 0 && amountValue <= minAmount,
+    $isDisabled: amountValue !== 0 && amountValue <= minAmount
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-minus'],
     size: 14,
     color: "white"
-  }))), /*#__PURE__*/React.createElement(StyledInputWrapper, null, shouldShowPseudoInput ? /*#__PURE__*/React.createElement(StyledAmountControlPseudoInput, {
-    onClick: handlePseudoInputClick,
+  }))), /*#__PURE__*/React.createElement(StyledInputWrapper, null, displayState === 'maxAmount' || inputValue === '0' || shouldForceLabel && typeof label === 'string' || inputLabel === label ? /*#__PURE__*/React.createElement(StyledAmountControlPseudoInput, {
+    onClick: handleDeleteIconClick,
     $shouldShowWideInput: shouldShowWideInput,
     $shouldShowRightIcon: !['maxAmount'].includes(displayState)
   }, inputLabel) : /*#__PURE__*/React.createElement(StyledAmountControlInput, {
@@ -203,16 +193,12 @@ const AmountControl = ({
     $shouldShowIcon: shouldShowIcon,
     $shouldShowWideInput: shouldShowWideInput,
     $hasFocus: hasFocus,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
-    disabled: isDisabled,
-    onFocus: () => setIsEditing(true),
     onBlur: handleInputBlur,
     onChange: handleInputChange,
     value: inputLabel
   })), /*#__PURE__*/React.createElement(AnimatePresence, {
     initial: false
   }, /*#__PURE__*/React.createElement(StyledMotionAmountControlButton, {
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     key: "right_button",
     initial: {
       width: 0,
@@ -235,13 +221,13 @@ const AmountControl = ({
     },
     $color: displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined,
     onClick: displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd,
-    disabled: isDisabled || (maxAmount ? amountValue >= maxAmount : false),
-    $isDisabled: isDisabled || (maxAmount ? amountValue >= maxAmount : false)
+    disabled: maxAmount ? amountValue >= maxAmount : false,
+    $isDisabled: maxAmount ? amountValue >= maxAmount : false
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: !['normal'].includes(displayState) && icon ? [displayState === 'maxAmount' ? 'fa fa-check' : icon] : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus'],
     size: 14,
     color: iconColor ?? 'white'
-  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleFirstAmount, handleInputBlur, handleInputChange, handlePseudoInputClick, hasFocus, icon, iconColor, inputLabel, isDisabled, maxAmount, minAmount, shouldShowIcon, shouldShowKeyboardHighlighting, shouldShowPseudoInput, shouldShowWideInput]);
+  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, icon, iconColor, inputLabel, inputValue, isDisabled, label, maxAmount, minAmount, shouldForceLabel, shouldShowIcon, shouldShowWideInput]);
 };
 AmountControl.displayName = 'AmountControl';
 export default AmountControl;

package/lib/esm/components/amount-control/AmountControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","useKeyboardFocusHighlighting","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledInputWrapper","StyledMotionAmountControlButton","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldEnableKeyboardHighlighting","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","shouldShowKeyboardHighlighting","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","isEditing","setIsEditing","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handlePseudoInputClick","window","requestAnimationFrame","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","shouldShowPseudoInput","createElement","onClick","$isDisabled","initial","includes","$shouldShowKeyboardHighlighting","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","$shouldShowWideInput","$shouldShowRightIcon","ref","$displayState","$shouldShowIcon","$hasFocus","onFocus","onBlur","$color","undefined","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\n    StyledInputWrapper,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'normal' | 'maxAmount' | 'minAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * The color of the icon.\n     */\n    iconColor?: string;\n    /**\n     * Whether the control should be disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * A Text that should be displayed if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * The minimum allowed amount.\n     */\n    minAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Enables keyboard-only focus highlighting. The highlighting is only visible while the\n     * user navigates with the keyboard and is reset on mouse movement or click.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n    /**\n     * Whether the label should be displayed even if an amount is selected.\n     */\n    shouldForceLabel?: boolean;\n    /**\n     * Whether the \"add\"-icon should be displayed if the minAmount is reached.\n     */\n    shouldShowAddIconOnMinAmount?: boolean;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n    /**\n     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n    /**\n     * Defines the amount that will change when adjusted\n     */\n    step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    iconColor,\n    isDisabled = false,\n    label,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldEnableKeyboardHighlighting,\n    shouldForceLabel = false,\n    shouldShowAddIconOnMinAmount = false,\n    shouldShowIcon = true,\n    shouldShowWideInput = false,\n    step: stepProp = 1,\n}) => {\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n    const [isEditing, setIsEditing] = useState(false);\n\n    const step = useMemo(\n        () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n        [stepProp],\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > minAmount:\n                setDisplayState('normal');\n                return;\n            case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n                setDisplayState('minAmount');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (typeof amount !== 'number') {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    const handleAmountAdd = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState + step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return typeof amount === 'number' ? prevState : newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) + step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [amount, maxAmount, minAmount, onChange, step]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState - step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) - step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [displayState, maxAmount, minAmount, onChange, step]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + step);\n        }\n\n        setAmountValue(minAmount + step);\n        setInputValue((minAmount + step).toString());\n    }, [amountValue, isDisabled, minAmount, onChange, step]);\n\n    const handlePseudoInputClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        setIsEditing(true);\n\n        window.requestAnimationFrame(() => {\n            inputRef.current?.focus();\n        });\n    }, [isDisabled]);\n\n    const handleInputBlur = useCallback(() => {\n        const checkedValue = checkForValidAmount({\n            minAmount,\n            maxAmount,\n            amount: Math.round(Number(inputValue) / step) * step,\n        });\n\n        setAmountValue(checkedValue);\n        setInputValue(checkedValue.toString());\n        setIsEditing(false);\n\n        if (typeof onChange === 'function') {\n            onChange(checkedValue);\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBefore = Number(value.replace(/\\D/g, ''));\n\n            if (valueBefore < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n        },\n        [minAmount],\n    );\n\n    let inputLabel = inputValue;\n\n    if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {\n        inputLabel = label;\n    }\n\n    const shouldShowPseudoInput =\n        !isEditing &&\n        (inputValue === '0' ||\n            (shouldForceLabel && typeof label === 'string') ||\n            inputLabel === label);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n                <AnimatePresence initial={false}>\n                    {['normal'].includes(displayState) && (\n                        <StyledMotionAmountControlButton\n                            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                            key=\"left_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            disabled={isDisabled || (amountValue !== 0 && amountValue <= minAmount)}\n                            $isDisabled={\n                                isDisabled || (amountValue !== 0 && amountValue <= minAmount)\n                            }\n                        >\n                            <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                <StyledInputWrapper>\n                    {shouldShowPseudoInput ? (\n                        <StyledAmountControlPseudoInput\n                            onClick={handlePseudoInputClick}\n                            $shouldShowWideInput={shouldShowWideInput}\n                            $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n                        >\n                            {inputLabel}\n                        </StyledAmountControlPseudoInput>\n                    ) : (\n                        <StyledAmountControlInput\n                            ref={inputRef}\n                            $displayState={displayState}\n                            $shouldShowIcon={shouldShowIcon}\n                            $shouldShowWideInput={shouldShowWideInput}\n                            $hasFocus={hasFocus}\n                            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                            disabled={isDisabled}\n                            onFocus={() => setIsEditing(true)}\n                            onBlur={handleInputBlur}\n                            onChange={handleInputChange}\n                            value={inputLabel}\n                        />\n                    )}\n                </StyledInputWrapper>\n                <AnimatePresence initial={false}>\n                    <StyledMotionAmountControlButton\n                        $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                        key=\"right_button\"\n                        initial={{ width: 0, opacity: 0, padding: 0 }}\n                        animate={{\n                            width: 40,\n                            opacity: 1,\n                            padding: 0,\n                        }}\n                        exit={{ width: 0, opacity: 0, padding: 0 }}\n                        transition={{ duration: 0.2, type: 'tween' }}\n                        $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n                        onClick={\n                            displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n                        }\n                        disabled={isDisabled || (maxAmount ? amountValue >= maxAmount : false)}\n                        $isDisabled={isDisabled || (maxAmount ? amountValue >= maxAmount : false)}\n                    >\n                        <Icon\n                            icons={\n                                !['normal'].includes(displayState) && icon\n                                    ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n                                    : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n                            }\n                            size={14}\n                            color={iconColor ?? 'white'}\n                        />\n                    </StyledMotionAmountControlButton>\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleAmountAdd,\n            handleAmountRemove,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            handlePseudoInputClick,\n            hasFocus,\n            icon,\n            iconColor,\n            inputLabel,\n            isDisabled,\n            maxAmount,\n            minAmount,\n            shouldShowIcon,\n            shouldShowKeyboardHighlighting,\n            shouldShowPseudoInput,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledInputWrapper","StyledMotionAmountControlButton","AmountControl","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldForceLabel","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","inputLabel","createElement","onClick","$isDisabled","initial","includes","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","icons","size","color","$shouldShowWideInput","$shouldShowRightIcon","ref","$displayState","$shouldShowIcon","$hasFocus","onBlur","$color","undefined","displayName"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    ChangeEvent,\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledAmountControlPseudoInput,\n    StyledInputWrapper,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'normal' | 'maxAmount' | 'minAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * The color of the icon.\n     */\n    iconColor?: string;\n    /**\n     * Whether the control should be disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * A Text that should be displayed if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is reached, a check icon is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * The minimum allowed amount.\n     */\n    minAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the label should be displayed even if an amount is selected.\n     */\n    shouldForceLabel?: boolean;\n    /**\n     * Whether the \"add\"-icon should be displayed if the minAmount is reached.\n     */\n    shouldShowAddIconOnMinAmount?: boolean;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n    /**\n     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n    /**\n     * Defines the amount that will change when adjusted\n     */\n    step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    iconColor,\n    isDisabled = false,\n    label,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldForceLabel = false,\n    shouldShowAddIconOnMinAmount = false,\n    shouldShowIcon = true,\n    shouldShowWideInput = false,\n    step: stepProp = 1,\n}) => {\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const step = useMemo(\n        () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n        [stepProp],\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > minAmount:\n                setDisplayState('normal');\n                return;\n            case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n                setDisplayState('minAmount');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (typeof amount !== 'number') {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    const handleAmountAdd = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState + step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return typeof amount === 'number' ? prevState : newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) + step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [amount, maxAmount, minAmount, onChange, step]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState - step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) - step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [displayState, maxAmount, minAmount, onChange, step]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + step);\n        }\n\n        setAmountValue(minAmount + step);\n        setInputValue((minAmount + step).toString());\n    }, [amountValue, minAmount, onChange, step]);\n\n    const handleDeleteIconClick = useCallback(() => {\n        if (inputValue === '0') {\n            window.setTimeout(() => {\n                inputRef.current?.focus();\n            }, 500);\n        } else {\n            handleAmountRemove();\n        }\n    }, [handleAmountRemove, inputValue]);\n\n    const handleInputBlur = useCallback(() => {\n        const checkedValue = checkForValidAmount({\n            minAmount,\n            maxAmount,\n            amount: Math.round(Number(inputValue) / step) * step,\n        });\n\n        setAmountValue(checkedValue);\n        setInputValue(checkedValue.toString());\n\n        if (typeof onChange === 'function') {\n            onChange(checkedValue);\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBefore = Number(value.replace(/\\D/g, ''));\n\n            if (valueBefore < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n        },\n        [minAmount],\n    );\n\n    let inputLabel = inputValue;\n\n    if (typeof label === 'string' && (displayState === 'default' || shouldForceLabel)) {\n        inputLabel = label;\n    }\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\n                <AnimatePresence initial={false}>\n                    {['normal'].includes(displayState) && (\n                        <StyledMotionAmountControlButton\n                            key=\"left_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{\n                                width: 40,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            <Icon icons={['fa fa-minus']} size={14} color=\"white\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                <StyledInputWrapper>\n                    {displayState === 'maxAmount' ||\n                    inputValue === '0' ||\n                    (shouldForceLabel && typeof label === 'string') ||\n                    inputLabel === label ? (\n                        <StyledAmountControlPseudoInput\n                            onClick={handleDeleteIconClick}\n                            $shouldShowWideInput={shouldShowWideInput}\n                            $shouldShowRightIcon={!['maxAmount'].includes(displayState)}\n                        >\n                            {inputLabel}\n                        </StyledAmountControlPseudoInput>\n                    ) : (\n                        <StyledAmountControlInput\n                            ref={inputRef}\n                            $displayState={displayState}\n                            $shouldShowIcon={shouldShowIcon}\n                            $shouldShowWideInput={shouldShowWideInput}\n                            $hasFocus={hasFocus}\n                            onBlur={handleInputBlur}\n                            onChange={handleInputChange}\n                            value={inputLabel}\n                        />\n                    )}\n                </StyledInputWrapper>\n                <AnimatePresence initial={false}>\n                    <StyledMotionAmountControlButton\n                        key=\"right_button\"\n                        initial={{ width: 0, opacity: 0, padding: 0 }}\n                        animate={{\n                            width: 40,\n                            opacity: 1,\n                            padding: 0,\n                        }}\n                        exit={{ width: 0, opacity: 0, padding: 0 }}\n                        transition={{ duration: 0.2, type: 'tween' }}\n                        $color={displayState === 'maxAmount' ? 'rgb(32, 198, 90)' : undefined}\n                        onClick={\n                            displayState === 'maxAmount' ? handleAmountRemove : handleAmountAdd\n                        }\n                        disabled={maxAmount ? amountValue >= maxAmount : false}\n                        $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n                    >\n                        <Icon\n                            icons={\n                                !['normal'].includes(displayState) && icon\n                                    ? [displayState === 'maxAmount' ? 'fa fa-check' : icon]\n                                    : [displayState === 'maxAmount' ? 'fa fa-check' : 'fa fa-plus']\n                            }\n                            size={14}\n                            color={iconColor ?? 'white'}\n                        />\n                    </StyledMotionAmountControlButton>\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleAmountAdd,\n            handleAmountRemove,\n            handleDeleteIconClick,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            hasFocus,\n            icon,\n            iconColor,\n            inputLabel,\n            inputValue,\n            isDisabled,\n            label,\n            maxAmount,\n            minAmount,\n            shouldForceLabel,\n            shouldShowIcon,\n            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/amount-control/AmountControl.styles.js

@@ -1,6 +1,5 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
-import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledAmountControl = styled.div`
     background-color: ${({
   theme
@@ -8,6 +7,7 @@ export const StyledAmountControl = styled.div`
     display: flex;
     width: fit-content;
     border-radius: 3px;
+    overflow: hidden;
     transition: opacity 0.2s ease;
     height: 28px;
 
@@ -36,14 +36,6 @@ export const StyledAmountControlInput = styled.input`
   $hasFocus
 }) => $hasFocus ? 'text' : 'pointer'};
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `}
-
     ${({
   $displayState
 }) => $displayState === 'maxAmount' && css`
@@ -90,17 +82,9 @@ export const StyledMotionAmountControlButton = styled(motion.button)`
 }) => $color ?? theme['408']};
     display: flex;
     justify-content: center;
-    //overflow: hidden;
+    overflow: hidden;
     transition: background-color 0.2s ease-in-out;
 
-    ${({
-  $shouldShowKeyboardHighlighting
-}) => $shouldShowKeyboardHighlighting && css`
-            &:focus-visible {
-                ${keyboardFocusHighlightingRingCss}
-            }
-        `};
-
     ${({
   $isDisabled
 }) => $isDisabled && css`

package/lib/esm/components/amount-control/AmountControl.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","keyboardFocusHighlightingRingCss","StyledAmountControl","div","theme","$isDisabled","StyledInputWrapper","StyledAmountControlInput","input","$shouldShowWideInput","$hasFocus","$shouldShowKeyboardHighlighting","$displayState","$shouldShowIcon","StyledAmountControlPseudoInput","$shouldShowRightIcon","StyledMotionAmountControlButton","button","$color"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    transition: opacity 0.2s ease;\n    height: 28px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledInputWrapper = styled.div<WithTheme<unknown>>`\n    background-color: ${({ theme }) => theme['408']};\n`;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n\n    ${({ $displayState }) =>\n        $displayState === 'maxAmount' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n    $shouldShowRightIcon: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    border: none;\n    height: 28px;\n    min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    padding: 1px 8px;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-left-radius: ${({ $shouldShowRightIcon }) =>\n        $shouldShowRightIcon ? '3px' : 'unset'};\n    border-top-left-radius: ${({ $shouldShowRightIcon }) =>\n        $shouldShowRightIcon ? '3px' : 'unset'};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    align-items: center;\n    background-color: ${({ theme, $color }: StyledAmountControlButtonProps) =>\n        $color ?? theme['408']};\n    display: flex;\n    justify-content: center;\n    //overflow: hidden;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $shouldShowKeyboardHighlighting }: StyledAmountControlButtonProps) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `};\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAO/F,OAAO,MAAMC,mBAAmB,GAAGH,MAAM,CAACI,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXL,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAUD,OAAO,MAAMM,kBAAkB,GAAGP,MAAM,CAACI,GAAuB;AAChE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAED,OAAO,MAAMG,wBAAwB,GAAGR,MAAM,CAACS,KAAoC;AACnF;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC3E;AACA,cAAc,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,MAAM,GAAG,SAAU;AACjE;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/BX,GAAG;AACX;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEW;AAAc,CAAC,KAChBA,aAAa,KAAK,WAAW,IAC7BZ,GAAG;AACX;AACA;AACA,SAAS;AACT,MAAM,CAAC;EAAEY,aAAa;EAAEC;AAAgB,CAAC,KACjCD,aAAa,KAAK,SAAS,IAC3B,CAACC,eAAe,IAChBb,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAOD,OAAO,MAAMc,8BAA8B,GAAGf,MAAM,CAACI,GAAwC;AAC7F;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEM;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEM;AAAqB,CAAC,KAClDA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,8BAA8B,CAAC;EAAEA;AAAqB,CAAC,KAC/CA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,CAAC;AAQD,OAAO,MAAMC,+BAA+B,GAAGjB,MAAM,CACjDD,MAAM,CAACmB,MACX,CAAiC;AACjC;AACA,wBAAwB,CAAC;EAAEb,KAAK;EAAEc;AAAuC,CAAC,KAClEA,MAAM,IAAId,KAAK,CAAC,KAAK,CAAC;AAC9B;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEO;AAAgE,CAAC,KAClEA,+BAA+B,IAC/BX,GAAG;AACX;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEI;AAAY,CAAC,KACdA,WAAW,IACXL,GAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","theme","$isDisabled","StyledInputWrapper","StyledAmountControlInput","input","$shouldShowWideInput","$hasFocus","$displayState","$shouldShowIcon","StyledAmountControlPseudoInput","$shouldShowRightIcon","StyledMotionAmountControlButton","button","$color"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    overflow: hidden;\n    transition: opacity 0.2s ease;\n    height: 28px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledInputWrapper = styled.div<WithTheme<unknown>>`\n    background-color: ${({ theme }) => theme['408']};\n`;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState === 'maxAmount' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n    $shouldShowRightIcon: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: rgba(255, 255, 255, 0.2);\n    color: white;\n    border: none;\n    height: 28px;\n    min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    padding: 1px 8px;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-left-radius: ${({ $shouldShowRightIcon }) =>\n        $shouldShowRightIcon ? '3px' : 'unset'};\n    border-top-left-radius: ${({ $shouldShowRightIcon }) =>\n        $shouldShowRightIcon ? '3px' : 'unset'};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    align-items: center;\n    background-color: ${({ theme, $color }: StyledAmountControlButtonProps) =>\n        $color ?? theme['408']};\n    display: flex;\n    justify-content: center;\n    overflow: hidden;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE,wBAAwB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXJ,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AASD,OAAO,MAAMK,kBAAkB,GAAGN,MAAM,CAACG,GAAuB;AAChE,wBAAwB,CAAC;EAAEC;AAAM,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACnD,CAAC;AAED,OAAO,MAAMG,wBAAwB,GAAGP,MAAM,CAACQ,KAAoC;AACnF;AACA;AACA;AACA;AACA,aAAa,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC3E;AACA,cAAc,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,MAAM,GAAG,SAAU;AACjE;AACA,MAAM,CAAC;EAAEC;AAAc,CAAC,KAChBA,aAAa,KAAK,WAAW,IAC7BV,GAAG;AACX;AACA;AACA,SAAS;AACT,MAAM,CAAC;EAAEU,aAAa;EAAEC;AAAgB,CAAC,KACjCD,aAAa,KAAK,SAAS,IAC3B,CAACC,eAAe,IAChBX,GAAG;AACX;AACA;AACA,SAAS;AACT,CAAC;AAOD,OAAO,MAAMY,8BAA8B,GAAGb,MAAM,CAACG,GAAwC;AAC7F;AACA;AACA;AACA;AACA,iBAAiB,CAAC;EAAEM;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAG;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC,CAAC;EAAEK;AAAqB,CAAC,KAClDA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,8BAA8B,CAAC;EAAEA;AAAqB,CAAC,KAC/CA,oBAAoB,GAAG,KAAK,GAAG,OAAO;AAC9C,CAAC;AAOD,OAAO,MAAMC,+BAA+B,GAAGf,MAAM,CACjDD,MAAM,CAACiB,MACX,CAAiC;AACjC;AACA,wBAAwB,CAAC;EAAEZ,KAAK;EAAEa;AAAuC,CAAC,KAClEA,MAAM,IAAIb,KAAK,CAAC,KAAK,CAAC;AAC9B;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXJ,GAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/button/Button.js

@@ -2,7 +2,6 @@ import clsx from 'clsx';
 import { AnimatePresence } from 'motion/react';
 import React, { useMemo } from 'react';
 import { useTheme } from 'styled-components';
-import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import Icon from '../icon/Icon';
 import { StyledIconWrapper, StyledMotionButton, StyledMotionChildrenWrapper, StyledMotionWaitCursorWrapper } from './Button.styles';
 import WaitCursor from './wait-cursor/WaitCursor';
@@ -18,8 +17,7 @@ const Button = ({
   shouldShowAsSelectButton = false,
   shouldShowTextAsRobotoMedium = true,
   buttonDesign,
-  tapDuration = 0.5,
-  shouldEnableKeyboardHighlighting
+  tapDuration = 0.5
 }) => {
   const handleClick = event => {
     if (shouldStopPropagation) {
@@ -30,7 +28,6 @@ const Button = ({
   const buttonClasses = clsx('beta-chayns-button ellipsis', className);
   const theme = useTheme();
   const effectiveButtonDesign = buttonDesign ?? theme.buttonDesign;
-  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   const iconColor = useMemo(() => {
     if (isSecondary) {
       return theme.text;
@@ -73,7 +70,6 @@ const Button = ({
     $shouldShowTextAsRobotoMedium: shouldShowTextAsRobotoMedium,
     $shouldShowAsSelectButton: shouldShowAsSelectButton,
     $shouldShowWaitCursor: shouldShowWaitCursor,
-    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     className: buttonClasses,
     disabled: isDisabled,
     $isDisabled: isDisabled,

package/lib/esm/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useMemo","useTheme","useKeyboardFocusHighlighting","Icon","StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","WaitCursor","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","buttonDesign","tapDuration","shouldEnableKeyboardHighlighting","handleClick","event","stopPropagation","buttonClasses","theme","effectiveButtonDesign","shouldShowKeyboardHighlighting","iconColor","text","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","$shouldShowKeyboardHighlighting","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","$effectiveButtonDesign","style","visibility","initial","animate","transition","duration","ease","type","whileTap","whileHover","icons","width","exit","key","overflow","shouldHideBackground","displayName"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEventHandler, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledIconWrapper,\n    StyledMotionButton,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport type { ButtonProps } from './Button.types';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldShowWaitCursor,\n    shouldStopPropagation,\n    shouldShowAsSelectButton = false,\n    shouldShowTextAsRobotoMedium = true,\n    buttonDesign,\n    tapDuration = 0.5,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    const theme = useTheme() as Theme;\n\n    const effectiveButtonDesign = (buttonDesign ?? theme.buttonDesign) as number;\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    const iconColor = useMemo(() => {\n        if (isSecondary) {\n            return theme.text;\n        }\n\n        return effectiveButtonDesign === 2\n            ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n            : (theme.buttonColor ?? 'white');\n    }, [\n        isSecondary,\n        theme.buttonBackgroundColor,\n        theme.buttonColor,\n        effectiveButtonDesign,\n        theme.text,\n    ]);\n\n    const backgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary || shouldShowAsSelectButton) {\n            color = theme['202'];\n        } else {\n            color = theme.buttonBackgroundColor ?? theme['408'];\n        }\n\n        if (effectiveButtonDesign === 2) {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const tapStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return {\n                backgroundColor:\n                    isSecondary || shouldShowAsSelectButton\n                        ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n                        : `${theme.buttonBackgroundColor ?? ''}40`,\n            };\n        }\n\n        return { opacity: 0.6 };\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const hoverStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n        }\n\n        return { opacity: 1 };\n    }, [theme, effectiveButtonDesign]);\n\n    return (\n        <StyledMotionButton\n            $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n            $shouldShowAsSelectButton={shouldShowAsSelectButton}\n            $shouldShowWaitCursor={shouldShowWaitCursor}\n            $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n            className={buttonClasses}\n            disabled={isDisabled}\n            $isDisabled={isDisabled}\n            $hasChildren={!!children}\n            $hasIcon={typeof icon === 'string' && icon !== ''}\n            $isSecondary={isSecondary}\n            $effectiveButtonDesign={effectiveButtonDesign}\n            onClick={handleClick}\n            style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n            initial={{ opacity: 0.5 }}\n            animate={{\n                opacity: isDisabled ? 0.5 : 1,\n            }}\n            transition={{\n                visibility: { duration: 0 },\n                duration: tapDuration,\n                ease: 'easeIn',\n                type: 'tween',\n            }}\n            whileTap={isDisabled ? {} : { ...tapStyles, transition: { duration: 0 } }}\n            whileHover={isDisabled ? {} : { ...hoverStyles }}\n        >\n            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color={iconColor} icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {shouldShowWaitCursor && (\n                    <StyledMotionWaitCursorWrapper\n                        animate={{ opacity: 1, width: 40 }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"wait-cursor\"\n                        style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n                    </StyledMotionWaitCursorWrapper>\n                )}\n                {!shouldShowWaitCursor && children && (\n                    <StyledMotionChildrenWrapper\n                        animate={{ opacity: 1, width: 'auto' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"children\"\n                        // style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {children}\n                    </StyledMotionChildrenWrapper>\n                )}\n            </AnimatePresence>\n        </StyledMotionButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useMemo","useTheme","Icon","StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","WaitCursor","Button","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","shouldShowAsSelectButton","shouldShowTextAsRobotoMedium","buttonDesign","tapDuration","handleClick","event","stopPropagation","buttonClasses","theme","effectiveButtonDesign","iconColor","text","buttonColor","buttonBackgroundColor","backgroundColor","color","tapStyles","opacity","hoverStyles","createElement","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$shouldShowWaitCursor","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","$effectiveButtonDesign","style","visibility","initial","animate","transition","duration","ease","type","whileTap","whileHover","icons","width","exit","key","overflow","shouldHideBackground","displayName"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEventHandler, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledIconWrapper,\n    StyledMotionButton,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} from './Button.styles';\nimport type { ButtonProps } from './Button.types';\nimport WaitCursor from './wait-cursor/WaitCursor';\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldShowWaitCursor,\n    shouldStopPropagation,\n    shouldShowAsSelectButton = false,\n    shouldShowTextAsRobotoMedium = true,\n    buttonDesign,\n    tapDuration = 0.5,\n}) => {\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    const theme = useTheme() as Theme;\n\n    const effectiveButtonDesign = (buttonDesign ?? theme.buttonDesign) as number;\n\n    const iconColor = useMemo(() => {\n        if (isSecondary) {\n            return theme.text;\n        }\n\n        return effectiveButtonDesign === 2\n            ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n            : (theme.buttonColor ?? 'white');\n    }, [\n        isSecondary,\n        theme.buttonBackgroundColor,\n        theme.buttonColor,\n        effectiveButtonDesign,\n        theme.text,\n    ]);\n\n    const backgroundColor = useMemo(() => {\n        let color;\n\n        if (isSecondary || shouldShowAsSelectButton) {\n            color = theme['202'];\n        } else {\n            color = theme.buttonBackgroundColor ?? theme['408'];\n        }\n\n        if (effectiveButtonDesign === 2) {\n            color = `rgba(${theme['102-rgb'] ?? ''}, 0)`;\n        }\n\n        return color;\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const tapStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return {\n                backgroundColor:\n                    isSecondary || shouldShowAsSelectButton\n                        ? `rgba(${theme['202-rgb'] ?? ''}, 0.7)`\n                        : `${theme.buttonBackgroundColor ?? ''}40`,\n            };\n        }\n\n        return { opacity: 0.6 };\n    }, [isSecondary, shouldShowAsSelectButton, theme, effectiveButtonDesign]);\n\n    const hoverStyles = useMemo(() => {\n        if (effectiveButtonDesign === 2) {\n            return { backgroundColor: `rgba(${theme['102-rgb'] ?? ''}, 0.5)` };\n        }\n\n        return { opacity: 1 };\n    }, [theme, effectiveButtonDesign]);\n\n    return (\n        <StyledMotionButton\n            $shouldShowTextAsRobotoMedium={shouldShowTextAsRobotoMedium}\n            $shouldShowAsSelectButton={shouldShowAsSelectButton}\n            $shouldShowWaitCursor={shouldShowWaitCursor}\n            className={buttonClasses}\n            disabled={isDisabled}\n            $isDisabled={isDisabled}\n            $hasChildren={!!children}\n            $hasIcon={typeof icon === 'string' && icon !== ''}\n            $isSecondary={isSecondary}\n            $effectiveButtonDesign={effectiveButtonDesign}\n            onClick={handleClick}\n            style={{ visibility: !backgroundColor ? 'hidden' : 'visible', backgroundColor }}\n            initial={{ opacity: 0.5 }}\n            animate={{\n                opacity: isDisabled ? 0.5 : 1,\n            }}\n            transition={{\n                visibility: { duration: 0 },\n                duration: tapDuration,\n                ease: 'easeIn',\n                type: 'tween',\n            }}\n            whileTap={isDisabled ? {} : { ...tapStyles, transition: { duration: 0 } }}\n            whileHover={isDisabled ? {} : { ...hoverStyles }}\n        >\n            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color={iconColor} icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {shouldShowWaitCursor && (\n                    <StyledMotionWaitCursorWrapper\n                        animate={{ opacity: 1, width: 40 }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"wait-cursor\"\n                        style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        <WaitCursor color={iconColor ?? 'white'} shouldHideBackground />\n                    </StyledMotionWaitCursorWrapper>\n                )}\n                {!shouldShowWaitCursor && children && (\n                    <StyledMotionChildrenWrapper\n                        animate={{ opacity: 1, width: 'auto' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"children\"\n                        // style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {children}\n                    </StyledMotionChildrenWrapper>\n                )}\n            </AnimatePresence>\n        </StyledMotionButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}