@chayns-components/core 5.4.7 → 5.4.8-alpha.0

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","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":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAGRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,mBAAmB,EACnBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,kBAAkB,EAClBC,+BAA+B,QAC5B,wBAAwB;AA2D/B,MAAMC,aAAqC,GAAGA,CAAC;EAC3CC,MAAM;EACNC,IAAI;EACJC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,KAAK;EACLC,SAAS;EACTC,SAAS,GAAG,CAAC;EACbC,QAAQ;EACRC,gBAAgB,GAAG,KAAK;EACxBC,4BAA4B,GAAG,KAAK;EACpCC,cAAc,GAAG,IAAI;EACrBC,mBAAmB,GAAG,KAAK;EAC3BC,IAAI,EAAEC,QAAQ,GAAG;AACrB,CAAC,KAAK;EACF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGxB,QAAQ,CAACe,SAAS,CAAC;EACzD,MAAM,CAACU,UAAU,EAAEC,aAAa,CAAC,GAAG1B,QAAQ,CAACe,SAAS,CAACY,QAAQ,CAAC,CAAC,CAAC;EAClE,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG7B,QAAQ,CAAe,SAAS,CAAC;EAEzE,MAAMqB,IAAI,GAAGvB,OAAO,CAChB,MAAOgC,MAAM,CAACC,aAAa,CAACT,QAAQ,CAAC,IAAIA,QAAQ,IAAI,CAAC,GAAGA,QAAQ,GAAG,CAAE,EACtE,CAACA,QAAQ,CACb,CAAC;EAED,MAAMU,QAAQ,GAAGjC,MAAM,CAAmB,IAAI,CAAC;;EAE/C;AACJ;AACA;EACIF,SAAS,CAAC,MAAM;IACZ,QAAQ,IAAI;MACR,KAAKiB,SAAS,IAAIS,WAAW,IAAIT,SAAS;QACtCe,eAAe,CAAC,WAAW,CAAC;QAC5B;MACJ,KAAKN,WAAW,GAAGR,SAAS;QACxBc,eAAe,CAAC,QAAQ,CAAC;QACzB;MACJ,KAAKN,WAAW,KAAKR,SAAS,IAAIQ,WAAW,IAAI,CAAC,IAAIL,4BAA4B;QAC9EW,eAAe,CAAC,WAAW,CAAC;QAC5B;MACJ;QACIA,eAAe,CAAC,SAAS,CAAC;IAClC;EACJ,CAAC,EAAE,CAACN,WAAW,EAAET,SAAS,EAAEC,SAAS,EAAEG,4BAA4B,CAAC,CAAC;EAErE,MAAMe,QAAQ,GAAGnC,OAAO,CAAC,MAAM8B,YAAY,KAAK,SAAS,EAAE,CAACA,YAAY,CAAC,CAAC;;EAE1E;AACJ;AACA;EACI/B,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOY,MAAM,KAAK,QAAQ,EAAE;MAC5B;IACJ;IAEAe,cAAc,CAACvB,mBAAmB,CAAC;MAAEQ,MAAM;MAAEK,SAAS;MAAEC;IAAU,CAAC,CAAC,CAAC;IACrEW,aAAa,CAACzB,mBAAmB,CAAC;MAAEQ,MAAM;MAAEK,SAAS;MAAEC;IAAU,CAAC,CAAC,CAACY,QAAQ,CAAC,CAAC,CAAC;EACnF,CAAC,EAAE,CAAClB,MAAM,EAAEK,SAAS,EAAEC,SAAS,CAAC,CAAC;EAElC,MAAMmB,eAAe,GAAGtC,WAAW,CAAC,MAAM;IACtC4B,cAAc,CAAEW,SAAS,IAAK;MAC1B,MAAMC,SAAS,GAAGnC,mBAAmB,CAAC;QAClCQ,MAAM,EAAE0B,SAAS,GAAGd,IAAI;QACxBN,SAAS;QACTD;MACJ,CAAC,CAAC;MAEF,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACoB,SAAS,CAAC;MACvB;MAEA,OAAO,OAAO3B,MAAM,KAAK,QAAQ,GAAG0B,SAAS,GAAGC,SAAS;IAC7D,CAAC,CAAC;IACFV,aAAa,CAAES,SAAS,IACpBlC,mBAAmB,CAAC;MAChBQ,MAAM,EAAEqB,MAAM,CAACK,SAAS,CAAC,GAAGd,IAAI;MAChCN,SAAS;MACTD;IACJ,CAAC,CAAC,CAACa,QAAQ,CAAC,CAChB,CAAC;EACL,CAAC,EAAE,CAAClB,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEK,IAAI,CAAC,CAAC;EAElD,MAAMgB,kBAAkB,GAAGzC,WAAW,CAAC,MAAM;IACzC,IAAIgC,YAAY,KAAK,SAAS,EAAE;MAC5B;IACJ;IAEAJ,cAAc,CAAEW,SAAS,IAAK;MAC1B,MAAMC,SAAS,GAAGnC,mBAAmB,CAAC;QAClCQ,MAAM,EAAE0B,SAAS,GAAGd,IAAI;QACxBN,SAAS;QACTD;MACJ,CAAC,CAAC;MAEF,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACoB,SAAS,CAAC;MACvB;MAEA,OAAOA,SAAS;IACpB,CAAC,CAAC;IACFV,aAAa,CAAES,SAAS,IACpBlC,mBAAmB,CAAC;MAChBQ,MAAM,EAAEqB,MAAM,CAACK,SAAS,CAAC,GAAGd,IAAI;MAChCN,SAAS;MACTD;IACJ,CAAC,CAAC,CAACa,QAAQ,CAAC,CAChB,CAAC;EACL,CAAC,EAAE,CAACC,YAAY,EAAEd,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEK,IAAI,CAAC,CAAC;EAExD,MAAMiB,iBAAiB,GAAG1C,WAAW,CAAC,MAAM;IACxC,IAAI2B,WAAW,KAAKR,SAAS,EAAE;MAC3B;IACJ;IAEA,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACD,SAAS,GAAGM,IAAI,CAAC;IAC9B;IAEAG,cAAc,CAACT,SAAS,GAAGM,IAAI,CAAC;IAChCK,aAAa,CAAC,CAACX,SAAS,GAAGM,IAAI,EAAEM,QAAQ,CAAC,CAAC,CAAC;EAChD,CAAC,EAAE,CAACJ,WAAW,EAAER,SAAS,EAAEC,QAAQ,EAAEK,IAAI,CAAC,CAAC;EAE5C,MAAMkB,qBAAqB,GAAG3C,WAAW,CAAC,MAAM;IAC5C,IAAI6B,UAAU,KAAK,GAAG,EAAE;MACpBe,MAAM,CAACC,UAAU,CAAC,MAAM;QACpBT,QAAQ,CAACU,OAAO,EAAEC,KAAK,CAAC,CAAC;MAC7B,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,MAAM;MACHN,kBAAkB,CAAC,CAAC;IACxB;EACJ,CAAC,EAAE,CAACA,kBAAkB,EAAEZ,UAAU,CAAC,CAAC;EAEpC,MAAMmB,eAAe,GAAGhD,WAAW,CAAC,MAAM;IACtC,MAAMiD,YAAY,GAAG5C,mBAAmB,CAAC;MACrCc,SAAS;MACTD,SAAS;MACTL,MAAM,EAAEqC,IAAI,CAACC,KAAK,CAACjB,MAAM,CAACL,UAAU,CAAC,GAAGJ,IAAI,CAAC,GAAGA;IACpD,CAAC,CAAC;IAEFG,cAAc,CAACqB,YAAY,CAAC;IAC5BnB,aAAa,CAACmB,YAAY,CAAClB,QAAQ,CAAC,CAAC,CAAC;IAEtC,IAAI,OAAOX,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAAC6B,YAAY,CAAC;IAC1B;IAEA,IAAIpB,UAAU,KAAK,EAAE,EAAE;MACnBC,aAAa,CAACX,SAAS,CAACY,QAAQ,CAAC,CAAC,CAAC;IACvC;EACJ,CAAC,EAAE,CAACF,UAAU,EAAEX,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEK,IAAI,CAAC,CAAC;EAEtD,MAAM2B,iBAAiB,GAAGpD,WAAW,CAChCqD,KAAoC,IAAK;IACtC,MAAM;MAAEC;IAAM,CAAC,GAAGD,KAAK,CAACE,MAAM;IAE9B,MAAMC,WAAW,GAAGtB,MAAM,CAACoB,KAAK,CAACG,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAEpD,IAAID,WAAW,GAAGrC,SAAS,IAAIA,SAAS,KAAK,CAAC,EAAE;MAC5CW,aAAa,CAAC,GAAG,CAAC;MAElB;IACJ;IAEAA,aAAa,CAAC0B,WAAW,KAAK,CAAC,GAAG,EAAE,GAAGA,WAAW,CAACzB,QAAQ,CAAC,CAAC,CAAC;EAClE,CAAC,EACD,CAACZ,SAAS,CACd,CAAC;EAED,IAAIuC,UAAU,GAAG7B,UAAU;EAE3B,IAAI,OAAOZ,KAAK,KAAK,QAAQ,KAAKe,YAAY,KAAK,SAAS,IAAIX,gBAAgB,CAAC,EAAE;IAC/EqC,UAAU,GAAGzC,KAAK;EACtB;EAEA,OAAOf,OAAO,CACV,mBACIH,KAAA,CAAA4D,aAAA,CAACpD,mBAAmB;IAACqD,OAAO,EAAElB,iBAAkB;IAACmB,WAAW,EAAE7C;EAAW,gBACrEjB,KAAA,CAAA4D,aAAA,CAAC7D,eAAe;IAACgE,OAAO,EAAE;EAAM,GAC3B,CAAC,QAAQ,CAAC,CAACC,QAAQ,CAAC/B,YAAY,CAAC,iBAC9BjC,KAAA,CAAA4D,aAAA,CAAChD,+BAA+B;IAC5BqD,GAAG,EAAC,aAAa;IACjBF,OAAO,EAAE;MAAEG,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7CZ,OAAO,EAAEnB,kBAAmB;IAC5BgC,QAAQ,EAAE9C,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIR,SAAU;IACxD0C,WAAW,EAAElC,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIR;EAAU,gBAE3DpB,KAAA,CAAA4D,aAAA,CAACrD,IAAI;IAACoE,KAAK,EAAE,CAAC,aAAa,CAAE;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAC;EAAO,CAAE,CAC1B,CAExB,CAAC,eAClB7E,KAAA,CAAA4D,aAAA,CAACjD,kBAAkB,QACdsB,YAAY,KAAK,WAAW,IAC7BH,UAAU,KAAK,GAAG,IACjBR,gBAAgB,IAAI,OAAOJ,KAAK,KAAK,QAAS,IAC/CyC,UAAU,KAAKzC,KAAK,gBAChBlB,KAAA,CAAA4D,aAAA,CAAClD,8BAA8B;IAC3BmD,OAAO,EAAEjB,qBAAsB;IAC/BkC,oBAAoB,EAAErD,mBAAoB;IAC1CsD,oBAAoB,EAAE,CAAC,CAAC,WAAW,CAAC,CAACf,QAAQ,CAAC/B,YAAY;EAAE,GAE3D0B,UAC2B,CAAC,gBAEjC3D,KAAA,CAAA4D,aAAA,CAACnD,wBAAwB;IACrBuE,GAAG,EAAE3C,QAAS;IACd4C,aAAa,EAAEhD,YAAa;IAC5BiD,eAAe,EAAE1D,cAAe;IAChCsD,oBAAoB,EAAErD,mBAAoB;IAC1C0D,SAAS,EAAE7C,QAAS;IACpB8C,MAAM,EAAEnC,eAAgB;IACxB5B,QAAQ,EAAEgC,iBAAkB;IAC5BE,KAAK,EAAEI;EAAW,CACrB,CAEW,CAAC,eACrB3D,KAAA,CAAA4D,aAAA,CAAC7D,eAAe;IAACgE,OAAO,EAAE;EAAM,gBAC5B/D,KAAA,CAAA4D,aAAA,CAAChD,+BAA+B;IAC5BqD,GAAG,EAAC,cAAc;IAClBF,OAAO,EAAE;MAAEG,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7CY,MAAM,EAAEpD,YAAY,KAAK,WAAW,GAAG,kBAAkB,GAAGqD,SAAU;IACtEzB,OAAO,EACH5B,YAAY,KAAK,WAAW,GAAGS,kBAAkB,GAAGH,eACvD;IACDmC,QAAQ,EAAEvD,SAAS,GAAGS,WAAW,IAAIT,SAAS,GAAG,KAAM;IACvD2C,WAAW,EAAE3C,SAAS,GAAGS,WAAW,IAAIT,SAAS,GAAG;EAAM,gBAE1DnB,KAAA,CAAA4D,aAAA,CAACrD,IAAI;IACDoE,KAAK,EACD,CAAC,CAAC,QAAQ,CAAC,CAACX,QAAQ,CAAC/B,YAAY,CAAC,IAAIlB,IAAI,GACpC,CAACkB,YAAY,KAAK,WAAW,GAAG,aAAa,GAAGlB,IAAI,CAAC,GACrD,CAACkB,YAAY,KAAK,WAAW,GAAG,aAAa,GAAG,YAAY,CACrE;IACD2C,IAAI,EAAE,EAAG;IACTC,KAAK,EAAE7D,SAAS,IAAI;EAAQ,CAC/B,CAC4B,CACpB,CACA,CACxB,EACD,CACIY,WAAW,EACXK,YAAY,EACZM,eAAe,EACfG,kBAAkB,EAClBE,qBAAqB,EACrBD,iBAAiB,EACjBM,eAAe,EACfI,iBAAiB,EACjBf,QAAQ,EACRvB,IAAI,EACJC,SAAS,EACT2C,UAAU,EACV7B,UAAU,EACVb,UAAU,EACVC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTE,gBAAgB,EAChBE,cAAc,EACdC,mBAAmB,CAE3B,CAAC;AACL,CAAC;AAEDZ,aAAa,CAAC0E,WAAW,GAAG,eAAe;AAE3C,eAAe1E,aAAa","ignoreList":[]}
+{"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":"AAAA,SAASA,eAAe,QAAQ,cAAc;AAC9C,OAAOC,KAAK,IAAqBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACjG,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,SAASC,4BAA4B,QAAQ,0CAA0C;AACvF,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,mBAAmB,EACnBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,kBAAkB,EAClBC,+BAA+B,QAC5B,wBAAwB;AAgE/B,MAAMC,aAAqC,GAAGA,CAAC;EAC3CC,MAAM;EACNC,IAAI;EACJC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,KAAK;EACLC,SAAS;EACTC,SAAS,GAAG,CAAC;EACbC,QAAQ;EACRC,gCAAgC;EAChCC,gBAAgB,GAAG,KAAK;EACxBC,4BAA4B,GAAG,KAAK;EACpCC,cAAc,GAAG,IAAI;EACrBC,mBAAmB,GAAG,KAAK;EAC3BC,IAAI,EAAEC,QAAQ,GAAG;AACrB,CAAC,KAAK;EACF,MAAMC,8BAA8B,GAAGvB,4BAA4B,CAC/DgB,gCAAgC,IAAI,CAACL,UACzC,CAAC;EAED,MAAM,CAACa,WAAW,EAAEC,cAAc,CAAC,GAAG3B,QAAQ,CAACgB,SAAS,CAAC;EACzD,MAAM,CAACY,UAAU,EAAEC,aAAa,CAAC,GAAG7B,QAAQ,CAACgB,SAAS,CAACc,QAAQ,CAAC,CAAC,CAAC;EAClE,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGhC,QAAQ,CAAe,SAAS,CAAC;EACzE,MAAM,CAACiC,SAAS,EAAEC,YAAY,CAAC,GAAGlC,QAAQ,CAAC,KAAK,CAAC;EAEjD,MAAMuB,IAAI,GAAGzB,OAAO,CAChB,MAAOqC,MAAM,CAACC,aAAa,CAACZ,QAAQ,CAAC,IAAIA,QAAQ,IAAI,CAAC,GAAGA,QAAQ,GAAG,CAAE,EACtE,CAACA,QAAQ,CACb,CAAC;EAED,MAAMa,QAAQ,GAAGtC,MAAM,CAAmB,IAAI,CAAC;;EAE/C;AACJ;AACA;EACIF,SAAS,CAAC,MAAM;IACZ,QAAQ,IAAI;MACR,KAAKkB,SAAS,IAAIW,WAAW,IAAIX,SAAS;QACtCiB,eAAe,CAAC,WAAW,CAAC;QAC5B;MACJ,KAAKN,WAAW,GAAGV,SAAS;QACxBgB,eAAe,CAAC,QAAQ,CAAC;QACzB;MACJ,KAAKN,WAAW,KAAKV,SAAS,IAAIU,WAAW,IAAI,CAAC,IAAIN,4BAA4B;QAC9EY,eAAe,CAAC,WAAW,CAAC;QAC5B;MACJ;QACIA,eAAe,CAAC,SAAS,CAAC;IAClC;EACJ,CAAC,EAAE,CAACN,WAAW,EAAEX,SAAS,EAAEC,SAAS,EAAEI,4BAA4B,CAAC,CAAC;EAErE,MAAMkB,QAAQ,GAAGxC,OAAO,CAAC,MAAMiC,YAAY,KAAK,SAAS,EAAE,CAACA,YAAY,CAAC,CAAC;;EAE1E;AACJ;AACA;EACIlC,SAAS,CAAC,MAAM;IACZ,IAAI,OAAOa,MAAM,KAAK,QAAQ,EAAE;MAC5B;IACJ;IAEAiB,cAAc,CAAC1B,mBAAmB,CAAC;MAAES,MAAM;MAAEK,SAAS;MAAEC;IAAU,CAAC,CAAC,CAAC;IACrEa,aAAa,CAAC5B,mBAAmB,CAAC;MAAES,MAAM;MAAEK,SAAS;MAAEC;IAAU,CAAC,CAAC,CAACc,QAAQ,CAAC,CAAC,CAAC;EACnF,CAAC,EAAE,CAACpB,MAAM,EAAEK,SAAS,EAAEC,SAAS,CAAC,CAAC;EAElC,MAAMuB,eAAe,GAAG3C,WAAW,CAAC,MAAM;IACtC+B,cAAc,CAAEa,SAAS,IAAK;MAC1B,MAAMC,SAAS,GAAGxC,mBAAmB,CAAC;QAClCS,MAAM,EAAE8B,SAAS,GAAGjB,IAAI;QACxBP,SAAS;QACTD;MACJ,CAAC,CAAC;MAEF,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACwB,SAAS,CAAC;MACvB;MAEA,OAAO,OAAO/B,MAAM,KAAK,QAAQ,GAAG8B,SAAS,GAAGC,SAAS;IAC7D,CAAC,CAAC;IACFZ,aAAa,CAAEW,SAAS,IACpBvC,mBAAmB,CAAC;MAChBS,MAAM,EAAEyB,MAAM,CAACK,SAAS,CAAC,GAAGjB,IAAI;MAChCP,SAAS;MACTD;IACJ,CAAC,CAAC,CAACe,QAAQ,CAAC,CAChB,CAAC;EACL,CAAC,EAAE,CAACpB,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEM,IAAI,CAAC,CAAC;EAElD,MAAMmB,kBAAkB,GAAG9C,WAAW,CAAC,MAAM;IACzC,IAAImC,YAAY,KAAK,SAAS,EAAE;MAC5B;IACJ;IAEAJ,cAAc,CAAEa,SAAS,IAAK;MAC1B,MAAMC,SAAS,GAAGxC,mBAAmB,CAAC;QAClCS,MAAM,EAAE8B,SAAS,GAAGjB,IAAI;QACxBP,SAAS;QACTD;MACJ,CAAC,CAAC;MAEF,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACwB,SAAS,CAAC;MACvB;MAEA,OAAOA,SAAS;IACpB,CAAC,CAAC;IACFZ,aAAa,CAAEW,SAAS,IACpBvC,mBAAmB,CAAC;MAChBS,MAAM,EAAEyB,MAAM,CAACK,SAAS,CAAC,GAAGjB,IAAI;MAChCP,SAAS;MACTD;IACJ,CAAC,CAAC,CAACe,QAAQ,CAAC,CAChB,CAAC;EACL,CAAC,EAAE,CAACC,YAAY,EAAEhB,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEM,IAAI,CAAC,CAAC;EAExD,MAAMoB,iBAAiB,GAAG/C,WAAW,CAAC,MAAM;IACxC,IAAIiB,UAAU,EAAE;MACZ;IACJ;IAEA,IAAIa,WAAW,KAAKV,SAAS,EAAE;MAC3B;IACJ;IAEA,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACD,SAAS,GAAGO,IAAI,CAAC;IAC9B;IAEAI,cAAc,CAACX,SAAS,GAAGO,IAAI,CAAC;IAChCM,aAAa,CAAC,CAACb,SAAS,GAAGO,IAAI,EAAEO,QAAQ,CAAC,CAAC,CAAC;EAChD,CAAC,EAAE,CAACJ,WAAW,EAAEb,UAAU,EAAEG,SAAS,EAAEC,QAAQ,EAAEM,IAAI,CAAC,CAAC;EAExD,MAAMqB,sBAAsB,GAAGhD,WAAW,CAAC,MAAM;IAC7C,IAAIiB,UAAU,EAAE;MACZ;IACJ;IAEAqB,YAAY,CAAC,IAAI,CAAC;IAElBW,MAAM,CAACC,qBAAqB,CAAC,MAAM;MAC/BT,QAAQ,CAACU,OAAO,EAAEC,KAAK,CAAC,CAAC;IAC7B,CAAC,CAAC;EACN,CAAC,EAAE,CAACnC,UAAU,CAAC,CAAC;EAEhB,MAAMoC,eAAe,GAAGrD,WAAW,CAAC,MAAM;IACtC,MAAMsD,YAAY,GAAGjD,mBAAmB,CAAC;MACrCe,SAAS;MACTD,SAAS;MACTL,MAAM,EAAEyC,IAAI,CAACC,KAAK,CAACjB,MAAM,CAACP,UAAU,CAAC,GAAGL,IAAI,CAAC,GAAGA;IACpD,CAAC,CAAC;IAEFI,cAAc,CAACuB,YAAY,CAAC;IAC5BrB,aAAa,CAACqB,YAAY,CAACpB,QAAQ,CAAC,CAAC,CAAC;IACtCI,YAAY,CAAC,KAAK,CAAC;IAEnB,IAAI,OAAOjB,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACiC,YAAY,CAAC;IAC1B;IAEA,IAAItB,UAAU,KAAK,EAAE,EAAE;MACnBC,aAAa,CAACb,SAAS,CAACc,QAAQ,CAAC,CAAC,CAAC;IACvC;EACJ,CAAC,EAAE,CAACF,UAAU,EAAEb,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEM,IAAI,CAAC,CAAC;EAEtD,MAAM8B,iBAAiB,GAAGzD,WAAW,CAChC0D,KAAoC,IAAK;IACtC,MAAM;MAAEC;IAAM,CAAC,GAAGD,KAAK,CAACE,MAAM;IAE9B,MAAMC,WAAW,GAAGtB,MAAM,CAACoB,KAAK,CAACG,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAEpD,IAAID,WAAW,GAAGzC,SAAS,IAAIA,SAAS,KAAK,CAAC,EAAE;MAC5Ca,aAAa,CAAC,GAAG,CAAC;MAElB;IACJ;IAEAA,aAAa,CAAC4B,WAAW,KAAK,CAAC,GAAG,EAAE,GAAGA,WAAW,CAAC3B,QAAQ,CAAC,CAAC,CAAC;EAClE,CAAC,EACD,CAACd,SAAS,CACd,CAAC;EAED,IAAI2C,UAAU,GAAG/B,UAAU;EAE3B,IAAI,OAAOd,KAAK,KAAK,QAAQ,KAAKiB,YAAY,KAAK,SAAS,IAAIZ,gBAAgB,CAAC,EAAE;IAC/EwC,UAAU,GAAG7C,KAAK;EACtB;EAEA,MAAM8C,qBAAqB,GACvB,CAAC3B,SAAS,KACTL,UAAU,KAAK,GAAG,IACdT,gBAAgB,IAAI,OAAOL,KAAK,KAAK,QAAS,IAC/C6C,UAAU,KAAK7C,KAAK,CAAC;EAE7B,OAAOhB,OAAO,CACV,mBACIH,KAAA,CAAAkE,aAAA,CAACzD,mBAAmB;IAAC0D,OAAO,EAAEnB,iBAAkB;IAACoB,WAAW,EAAElD;EAAW,gBACrElB,KAAA,CAAAkE,aAAA,CAACnE,eAAe;IAACsE,OAAO,EAAE;EAAM,GAC3B,CAAC,QAAQ,CAAC,CAACC,QAAQ,CAAClC,YAAY,CAAC,iBAC9BpC,KAAA,CAAAkE,aAAA,CAACrD,+BAA+B;IAC5B0D,+BAA+B,EAAEzC,8BAA+B;IAChE0C,GAAG,EAAC,aAAa;IACjBH,OAAO,EAAE;MAAEI,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7Cb,OAAO,EAAEpB,kBAAmB;IAC5BkC,QAAQ,EAAE/D,UAAU,IAAKa,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIV,SAAW;IACxE+C,WAAW,EACPlD,UAAU,IAAKa,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIV;EACtD,gBAEDrB,KAAA,CAAAkE,aAAA,CAAC1D,IAAI;IAAC0E,KAAK,EAAE,CAAC,aAAa,CAAE;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAC;EAAO,CAAE,CAC1B,CAExB,CAAC,eAClBpF,KAAA,CAAAkE,aAAA,CAACtD,kBAAkB,QACdqD,qBAAqB,gBAClBjE,KAAA,CAAAkE,aAAA,CAACvD,8BAA8B;IAC3BwD,OAAO,EAAElB,sBAAuB;IAChCoC,oBAAoB,EAAE1D,mBAAoB;IAC1C2D,oBAAoB,EAAE,CAAC,CAAC,WAAW,CAAC,CAAChB,QAAQ,CAAClC,YAAY;EAAE,GAE3D4B,UAC2B,CAAC,gBAEjChE,KAAA,CAAAkE,aAAA,CAACxD,wBAAwB;IACrB6E,GAAG,EAAE7C,QAAS;IACd8C,aAAa,EAAEpD,YAAa;IAC5BqD,eAAe,EAAE/D,cAAe;IAChC2D,oBAAoB,EAAE1D,mBAAoB;IAC1C+D,SAAS,EAAE/C,QAAS;IACpB4B,+BAA+B,EAAEzC,8BAA+B;IAChEmD,QAAQ,EAAE/D,UAAW;IACrByE,OAAO,EAAEA,CAAA,KAAMpD,YAAY,CAAC,IAAI,CAAE;IAClCqD,MAAM,EAAEtC,eAAgB;IACxBhC,QAAQ,EAAEoC,iBAAkB;IAC5BE,KAAK,EAAEI;EAAW,CACrB,CAEW,CAAC,eACrBhE,KAAA,CAAAkE,aAAA,CAACnE,eAAe;IAACsE,OAAO,EAAE;EAAM,gBAC5BrE,KAAA,CAAAkE,aAAA,CAACrD,+BAA+B;IAC5B0D,+BAA+B,EAAEzC,8BAA+B;IAChE0C,GAAG,EAAC,cAAc;IAClBH,OAAO,EAAE;MAAEI,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7Ca,MAAM,EAAEzD,YAAY,KAAK,WAAW,GAAG,kBAAkB,GAAG0D,SAAU;IACtE3B,OAAO,EACH/B,YAAY,KAAK,WAAW,GAAGW,kBAAkB,GAAGH,eACvD;IACDqC,QAAQ,EAAE/D,UAAU,KAAKE,SAAS,GAAGW,WAAW,IAAIX,SAAS,GAAG,KAAK,CAAE;IACvEgD,WAAW,EAAElD,UAAU,KAAKE,SAAS,GAAGW,WAAW,IAAIX,SAAS,GAAG,KAAK;EAAE,gBAE1EpB,KAAA,CAAAkE,aAAA,CAAC1D,IAAI;IACD0E,KAAK,EACD,CAAC,CAAC,QAAQ,CAAC,CAACZ,QAAQ,CAAClC,YAAY,CAAC,IAAIpB,IAAI,GACpC,CAACoB,YAAY,KAAK,WAAW,GAAG,aAAa,GAAGpB,IAAI,CAAC,GACrD,CAACoB,YAAY,KAAK,WAAW,GAAG,aAAa,GAAG,YAAY,CACrE;IACD+C,IAAI,EAAE,EAAG;IACTC,KAAK,EAAEnE,SAAS,IAAI;EAAQ,CAC/B,CAC4B,CACpB,CACA,CACxB,EACD,CACIc,WAAW,EACXK,YAAY,EACZQ,eAAe,EACfG,kBAAkB,EAClBC,iBAAiB,EACjBM,eAAe,EACfI,iBAAiB,EACjBT,sBAAsB,EACtBN,QAAQ,EACR3B,IAAI,EACJC,SAAS,EACT+C,UAAU,EACV9C,UAAU,EACVE,SAAS,EACTC,SAAS,EACTK,cAAc,EACdI,8BAA8B,EAC9BmC,qBAAqB,EACrBtC,mBAAmB,CAE3B,CAAC;AACL,CAAC;AAEDb,aAAa,CAACiF,WAAW,GAAG,eAAe;AAE3C,eAAejF,aAAa","ignoreList":[]}

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

@@ -1,5 +1,6 @@
 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
@@ -7,7 +8,6 @@ export const StyledAmountControl = styled.div`
     display: flex;
     width: fit-content;
     border-radius: 3px;
-    overflow: hidden;
     transition: opacity 0.2s ease;
     height: 28px;
 
@@ -36,6 +36,14 @@ export const StyledAmountControlInput = styled.input`
   $hasFocus
 }) => $hasFocus ? 'text' : 'pointer'};
 
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
+
     ${({
   $displayState
 }) => $displayState === 'maxAmount' && css`
@@ -82,9 +90,17 @@ 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","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":[]}
+{"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":[]}

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

@@ -2,6 +2,7 @@ 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';
@@ -17,7 +18,8 @@ const Button = ({
   shouldShowAsSelectButton = false,
   shouldShowTextAsRobotoMedium = true,
   buttonDesign,
-  tapDuration = 0.5
+  tapDuration = 0.5,
+  shouldEnableKeyboardHighlighting
 }) => {
   const handleClick = event => {
     if (shouldStopPropagation) {
@@ -28,6 +30,7 @@ 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;
@@ -70,6 +73,7 @@ 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","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":[]}
+{"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":[]}

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

@@ -1,5 +1,6 @@
 import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledMotionButton = styled(motion.button)`
     ${({
   $shouldShowTextAsRobotoMedium,
@@ -57,6 +58,15 @@ export const StyledMotionButton = styled(motion.button)`
     user-select: none;
     width: fit-content;
 
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
+
     ${({
   $hasIcon,
   $hasChildren,

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

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.js","names":["motion","styled","css","StyledMotionButton","button","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$isSecondary","$effectiveButtonDesign","theme","text","buttonColor","buttonBackgroundColor","$isDisabled","$hasIcon","$hasChildren","$shouldShowWaitCursor","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledButtonProps = WithTheme<{\n    $hasIcon: boolean;\n    $hasChildren: boolean;\n    $isDisabled?: boolean;\n    $isSecondary?: boolean;\n    $shouldShowTextAsRobotoMedium: boolean;\n    $shouldShowAsSelectButton: boolean;\n    $shouldShowWaitCursor?: boolean;\n    $effectiveButtonDesign: number;\n}>;\n\nexport const StyledMotionButton = styled(motion.button)<StyledButtonProps>`\n    ${({ $shouldShowTextAsRobotoMedium, $shouldShowAsSelectButton }) =>\n        $shouldShowTextAsRobotoMedium &&\n        !$shouldShowAsSelectButton &&\n        css`\n            font-size: 110%;\n            font-family: 'Roboto Medium', serif;\n        `}\n\n    align-items: center;\n\n    ${({\n        $isSecondary,\n        $shouldShowAsSelectButton,\n        $effectiveButtonDesign,\n        theme,\n    }: StyledButtonProps) => {\n        if ($isSecondary || $shouldShowAsSelectButton) {\n            return css`\n                color: ${theme.text};\n            `;\n        }\n\n        return css`\n            color: ${$effectiveButtonDesign === 2\n                ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n                : (theme.buttonColor ?? 'white')};\n        `;\n    }}\n\n    ${({\n        theme,\n        $isSecondary,\n        $shouldShowAsSelectButton,\n        $effectiveButtonDesign,\n    }: StyledButtonProps) => {\n        if ($effectiveButtonDesign === 2 && !$shouldShowAsSelectButton) {\n            return css`\n                border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};\n                box-shadow: none;\n            `;\n        }\n\n        return css`\n            border: none;\n            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    border-radius: 3px;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    display: inline-flex;\n    flex: 0 0 auto;\n    line-height: 22px;\n    min-height: 32px;\n    position: relative;\n    user-select: none;\n    width: fit-content;\n\n    ${({ $hasIcon, $hasChildren, $shouldShowWaitCursor }) => {\n        if ($shouldShowWaitCursor) {\n            return css`\n                padding: 4px 12px;\n            `;\n        }\n\n        if ($hasIcon) {\n            if ($hasChildren) {\n                return css`\n                    padding: 6px 12px 6px 42px;\n                `;\n            }\n            return css`\n                padding: 6px 12px 6px 18px;\n            `;\n        }\n        return css`\n            padding: 6px 12px 6px 12px;\n        `;\n    }}\n`;\n\nexport const StyledIconWrapper = styled.span`\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n`;\n\nexport const StyledMotionChildrenWrapper = styled(motion.div)`\n    will-change: unset !important;\n`;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAc/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACD,MAAM,CAACI,MAAM,CAAoB;AAC1E,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA0B,CAAC,KAC3DD,6BAA6B,IAC7B,CAACC,yBAAyB,IAC1BJ,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,MAAM,CAAC;EACCK,YAAY;EACZD,yBAAyB;EACzBE,sBAAsB;EACtBC;AACe,CAAC,KAAK;EACrB,IAAIF,YAAY,IAAID,yBAAyB,EAAE;IAC3C,OAAOJ,GAAG;AACtB,yBAAyBO,KAAK,CAACC,IAAI;AACnC,aAAa;EACL;EAEA,OAAOR,GAAG;AAClB,qBAAqBM,sBAAsB,KAAK,CAAC,GAC9BC,KAAK,CAACE,WAAW,IAAIF,KAAK,CAACG,qBAAqB,IAAI,OAAO,GAC3DH,KAAK,CAACE,WAAW,IAAI,OAAQ;AAChD,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EACCF,KAAK;EACLF,YAAY;EACZD,yBAAyB;EACzBE;AACe,CAAC,KAAK;EACrB,IAAIA,sBAAsB,KAAK,CAAC,IAAI,CAACF,yBAAyB,EAAE;IAC5D,OAAOJ,GAAG;AACtB,oCAAoCK,YAAY,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACG,qBAAqB;AAC7F;AACA,aAAa;EACL;EAEA,OAAOV,GAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,cAAc,CAAC;EAAEW;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC,YAAY;EAAEC;AAAsB,CAAC,KAAK;EACrD,IAAIA,qBAAqB,EAAE;IACvB,OAAOd,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIY,QAAQ,EAAE;IACV,IAAIC,YAAY,EAAE;MACd,OAAOb,GAAG;AAC1B;AACA,iBAAiB;IACL;IACA,OAAOA,GAAG;AACtB;AACA,aAAa;EACL;EACA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAED,OAAO,MAAMe,iBAAiB,GAAGhB,MAAM,CAACiB,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGlB,MAAM,CAACD,MAAM,CAACoB,GAAG,CAAC;AAC7D;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGpB,MAAM,CAACD,MAAM,CAACoB,GAAG,CAAC;AAC/D;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Button.styles.js","names":["motion","styled","css","keyboardFocusHighlightingRingCss","StyledMotionButton","button","$shouldShowTextAsRobotoMedium","$shouldShowAsSelectButton","$isSecondary","$effectiveButtonDesign","theme","text","buttonColor","buttonBackgroundColor","$isDisabled","$shouldShowKeyboardHighlighting","$hasIcon","$hasChildren","$shouldShowWaitCursor","StyledIconWrapper","span","StyledMotionChildrenWrapper","div","StyledMotionWaitCursorWrapper"],"sources":["../../../../src/components/button/Button.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';\n\ntype StyledButtonProps = WithTheme<{\n    $hasIcon: boolean;\n    $hasChildren: boolean;\n    $isDisabled?: boolean;\n    $isSecondary?: boolean;\n    $shouldShowTextAsRobotoMedium: boolean;\n    $shouldShowAsSelectButton: boolean;\n    $shouldShowWaitCursor?: boolean;\n    $effectiveButtonDesign: number;\n    $shouldShowKeyboardHighlighting?: boolean;\n}>;\n\nexport const StyledMotionButton = styled(motion.button)<StyledButtonProps>`\n    ${({ $shouldShowTextAsRobotoMedium, $shouldShowAsSelectButton }) =>\n        $shouldShowTextAsRobotoMedium &&\n        !$shouldShowAsSelectButton &&\n        css`\n            font-size: 110%;\n            font-family: 'Roboto Medium', serif;\n        `}\n\n    align-items: center;\n\n    ${({\n        $isSecondary,\n        $shouldShowAsSelectButton,\n        $effectiveButtonDesign,\n        theme,\n    }: StyledButtonProps) => {\n        if ($isSecondary || $shouldShowAsSelectButton) {\n            return css`\n                color: ${theme.text};\n            `;\n        }\n\n        return css`\n            color: ${$effectiveButtonDesign === 2\n                ? (theme.buttonColor ?? theme.buttonBackgroundColor ?? 'white')\n                : (theme.buttonColor ?? 'white')};\n        `;\n    }}\n\n    ${({\n        theme,\n        $isSecondary,\n        $shouldShowAsSelectButton,\n        $effectiveButtonDesign,\n    }: StyledButtonProps) => {\n        if ($effectiveButtonDesign === 2 && !$shouldShowAsSelectButton) {\n            return css`\n                border: 1px solid ${$isSecondary ? theme['202'] : theme.buttonBackgroundColor};\n                box-shadow: none;\n            `;\n        }\n\n        return css`\n            border: none;\n            box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    border-radius: 3px;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    display: inline-flex;\n    flex: 0 0 auto;\n    line-height: 22px;\n    min-height: 32px;\n    position: relative;\n    user-select: none;\n    width: fit-content;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n\n    ${({ $hasIcon, $hasChildren, $shouldShowWaitCursor }) => {\n        if ($shouldShowWaitCursor) {\n            return css`\n                padding: 4px 12px;\n            `;\n        }\n\n        if ($hasIcon) {\n            if ($hasChildren) {\n                return css`\n                    padding: 6px 12px 6px 42px;\n                `;\n            }\n            return css`\n                padding: 6px 12px 6px 18px;\n            `;\n        }\n        return css`\n            padding: 6px 12px 6px 12px;\n        `;\n    }}\n`;\n\nexport const StyledIconWrapper = styled.span`\n    align-items: center;\n    background-color: rgba(255, 255, 255, 0.2);\n    bottom: 0;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 30px;\n`;\n\nexport const StyledMotionChildrenWrapper = styled(motion.div)`\n    will-change: unset !important;\n`;\n\nexport const StyledMotionWaitCursorWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    justify-content: center;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,gCAAgC,QAAQ,8CAA8C;AAc/F,OAAO,MAAMC,kBAAkB,GAAGH,MAAM,CAACD,MAAM,CAACK,MAAM,CAAoB;AAC1E,MAAM,CAAC;EAAEC,6BAA6B;EAAEC;AAA0B,CAAC,KAC3DD,6BAA6B,IAC7B,CAACC,yBAAyB,IAC1BL,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA;AACA;AACA,MAAM,CAAC;EACCM,YAAY;EACZD,yBAAyB;EACzBE,sBAAsB;EACtBC;AACe,CAAC,KAAK;EACrB,IAAIF,YAAY,IAAID,yBAAyB,EAAE;IAC3C,OAAOL,GAAG;AACtB,yBAAyBQ,KAAK,CAACC,IAAI;AACnC,aAAa;EACL;EAEA,OAAOT,GAAG;AAClB,qBAAqBO,sBAAsB,KAAK,CAAC,GAC9BC,KAAK,CAACE,WAAW,IAAIF,KAAK,CAACG,qBAAqB,IAAI,OAAO,GAC3DH,KAAK,CAACE,WAAW,IAAI,OAAQ;AAChD,SAAS;AACL,CAAC;AACL;AACA,MAAM,CAAC;EACCF,KAAK;EACLF,YAAY;EACZD,yBAAyB;EACzBE;AACe,CAAC,KAAK;EACrB,IAAIA,sBAAsB,KAAK,CAAC,IAAI,CAACF,yBAAyB,EAAE;IAC5D,OAAOL,GAAG;AACtB,oCAAoCM,YAAY,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAACG,qBAAqB;AAC7F;AACA,aAAa;EACL;EAEA,OAAOX,GAAG;AAClB;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,cAAc,CAAC;EAAEY;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClCA,+BAA+B,IAC/Bb,GAAG;AACX;AACA;AACA,kBAAkBC,gCAAgC;AAClD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEa,QAAQ;EAAEC,YAAY;EAAEC;AAAsB,CAAC,KAAK;EACrD,IAAIA,qBAAqB,EAAE;IACvB,OAAOhB,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIc,QAAQ,EAAE;IACV,IAAIC,YAAY,EAAE;MACd,OAAOf,GAAG;AAC1B;AACA,iBAAiB;IACL;IACA,OAAOA,GAAG;AACtB;AACA,aAAa;EACL;EACA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL,CAAC;AAED,OAAO,MAAMiB,iBAAiB,GAAGlB,MAAM,CAACmB,IAAI;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGpB,MAAM,CAACD,MAAM,CAACsB,GAAG,CAAC;AAC7D;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGtB,MAAM,CAACD,MAAM,CAACsB,GAAG,CAAC;AAC/D;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"Button.types.js","names":[],"sources":["../../../../src/components/button/Button.types.ts"],"sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\n\nexport type ButtonProps = {\n    /**\n     * The label of the button.\n     * @description\n     * The content to be displayed inside the button. This can be text, icons, or any React node.\n     * It serves as the primary label for the button's action.\n     * @optional\n     */\n    children?: ReactNode;\n    /**\n     * Additional class names for the button element.\n     * @description\n     * Allows adding custom CSS classes to the button for further styling or integration with CSS frameworks.\n     * Multiple classes can be provided as a space-separated string.\n     * @optional\n     */\n    className?: string;\n    /**\n     * An icon that is displayed on the left-hand side of the button text.\n     * @description\n     * Specifies an icon to be shown alongside the button text. The icon is positioned to the left of the text.\n     * This enhances the visual representation of the button's function.\n     * @optional\n     */\n    icon?: string;\n    /**\n     * Whether the button is disabled and cannot be clicked anymore.\n     * @description\n     * When set to true, the button becomes non-interactive, preventing user clicks and often changing its appearance to indicate the disabled state.\n     * This is useful for scenarios where the action is temporarily unavailable.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Displays the button in the secondary style.\n     * @description\n     * Applies a secondary visual style to the button, typically with a different background color or border.\n     * This is used to differentiate less prominent actions from primary ones.\n     * @optional\n     */\n    isSecondary?: boolean;\n    /**\n     * Function to be executed when the button is clicked.\n     * @description\n     * A callback function that is triggered when the user clicks on the button. This can be used to handle interactions,\n     * such as submitting forms, navigating to pages, or performing any custom action.\n     */\n    onClick: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * Whether the button should be displayed as a selectButton.\n     * @description\n     * Modifies the button's appearance to resemble a select button, often used in dropdowns or selection interfaces.\n     * This changes the styling to indicate a selection state.\n     * @optional\n     * @default false\n     */\n    shouldShowAsSelectButton?: boolean;\n    /**\n     * Whether the text should be 'Roboto Medium'.\n     * @description\n     * Controls the font weight of the button text. When true, applies 'Roboto Medium' font weight for emphasis.\n     * This can improve readability or match design guidelines.\n     * @optional\n     * @default true\n     */\n    shouldShowTextAsRobotoMedium?: boolean;\n    /**\n     * Shows a wait cursor instead of button text.\n     * @description\n     * Replaces the button content with a wait cursor animation, indicating that an action is in progress.\n     * This provides visual feedback during loading or processing states.\n     * @optional\n     */\n    shouldShowWaitCursor?: boolean;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * Prevents the click event from bubbling up to parent elements, isolating the button's interaction.\n     * Useful in complex UI structures where event handling needs to be contained.\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional button design override.\n     * @description\n     * Allows overriding the default button design with a specific numeric value, corresponding to different visual themes or styles.\n     * This provides flexibility for custom theming.\n     * @optional\n     */\n    buttonDesign?: number;\n    /**\n     * Duration in seconds for the tap animation.\n     * @description\n     * Overrides how long the pressed state animation should take when the button is tapped.\n     * Set this to `0` for an immediate press effect.\n     * @optional\n     */\n    tapDuration?: number;\n};\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"Button.types.js","names":[],"sources":["../../../../src/components/button/Button.types.ts"],"sourcesContent":["import type { MouseEventHandler, ReactNode } from 'react';\n\nexport type ButtonProps = {\n    /**\n     * The label of the button.\n     * @description\n     * The content to be displayed inside the button. This can be text, icons, or any React node.\n     * It serves as the primary label for the button's action.\n     * @optional\n     */\n    children?: ReactNode;\n    /**\n     * Additional class names for the button element.\n     * @description\n     * Allows adding custom CSS classes to the button for further styling or integration with CSS frameworks.\n     * Multiple classes can be provided as a space-separated string.\n     * @optional\n     */\n    className?: string;\n    /**\n     * An icon that is displayed on the left-hand side of the button text.\n     * @description\n     * Specifies an icon to be shown alongside the button text. The icon is positioned to the left of the text.\n     * This enhances the visual representation of the button's function.\n     * @optional\n     */\n    icon?: string;\n    /**\n     * Whether the button is disabled and cannot be clicked anymore.\n     * @description\n     * When set to true, the button becomes non-interactive, preventing user clicks and often changing its appearance to indicate the disabled state.\n     * This is useful for scenarios where the action is temporarily unavailable.\n     * @optional\n     */\n    isDisabled?: boolean;\n    /**\n     * Displays the button in the secondary style.\n     * @description\n     * Applies a secondary visual style to the button, typically with a different background color or border.\n     * This is used to differentiate less prominent actions from primary ones.\n     * @optional\n     */\n    isSecondary?: boolean;\n    /**\n     * Function to be executed when the button is clicked.\n     * @description\n     * A callback function that is triggered when the user clicks on the button. This can be used to handle interactions,\n     * such as submitting forms, navigating to pages, or performing any custom action.\n     */\n    onClick: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * Whether the button should be displayed as a selectButton.\n     * @description\n     * Modifies the button's appearance to resemble a select button, often used in dropdowns or selection interfaces.\n     * This changes the styling to indicate a selection state.\n     * @optional\n     * @default false\n     */\n    shouldShowAsSelectButton?: boolean;\n    /**\n     * Whether the text should be 'Roboto Medium'.\n     * @description\n     * Controls the font weight of the button text. When true, applies 'Roboto Medium' font weight for emphasis.\n     * This can improve readability or match design guidelines.\n     * @optional\n     * @default true\n     */\n    shouldShowTextAsRobotoMedium?: boolean;\n    /**\n     * Shows a wait cursor instead of button text.\n     * @description\n     * Replaces the button content with a wait cursor animation, indicating that an action is in progress.\n     * This provides visual feedback during loading or processing states.\n     * @optional\n     */\n    shouldShowWaitCursor?: boolean;\n    /**\n     * Stops event propagation on click.\n     * @description\n     * Prevents the click event from bubbling up to parent elements, isolating the button's interaction.\n     * Useful in complex UI structures where event handling needs to be contained.\n     * @optional\n     */\n    shouldStopPropagation?: boolean;\n    /**\n     * Optional button design override.\n     * @description\n     * Allows overriding the default button design with a specific numeric value, corresponding to different visual themes or styles.\n     * This provides flexibility for custom theming.\n     * @optional\n     */\n    buttonDesign?: number;\n    /**\n     * Duration in seconds for the tap animation.\n     * @description\n     * Overrides how long the pressed state animation should take when the button is tapped.\n     * Set this to `0` for an immediate press effect.\n     * @optional\n     */\n    tapDuration?: number;\n    /**\n     * Enables keyboard-only focus highlighting.\n     * @description\n     * Focus styles are only shown while navigating with the keyboard and are reset on mouse interaction.\n     * @optional\n     * @default false\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n"],"mappings":"","ignoreList":[]}

package/lib/esm/components/checkbox/Checkbox.js

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';
 import { useUuid } from '../../hooks/uuid';
 import { getHeightOfSingleTextLine } from '../../utils/calculate';
 import { StyledCheckbox, StyledCheckboxBox, StyledCheckboxBoxWrapper, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';
@@ -12,7 +13,8 @@ const Checkbox = ({
   borderRadius,
   colors,
   shouldShowCentered = false,
-  shouldChangeOnLabelClick = true
+  shouldChangeOnLabelClick = true,
+  shouldEnableKeyboardHighlighting
 }) => {
   const [isActive, setIsActive] = useState(isChecked ?? false);
   const [checkboxTop, setCheckboxTop] = useState(undefined);
@@ -34,9 +36,11 @@ const Checkbox = ({
       setCheckboxTop((singleLineHeight - boxHeight) / 2);
     }
   }, [shouldShowCentered]);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldEnableKeyboardHighlighting && !isDisabled);
   return /*#__PURE__*/React.createElement(StyledCheckbox, {
     ref: checkboxRootRef
   }, /*#__PURE__*/React.createElement(StyledCheckboxInput, {
+    $shouldShowKeyboardHighlighting: shouldShowKeyboardHighlighting,
     checked: isChecked,
     disabled: isDisabled,
     id: uuid,

package/lib/esm/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","useCallback","useEffect","useRef","useState","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxBoxWrapper","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","isActive","setIsActive","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","checkboxRootRef","handleChange","event","target","checked","uuid","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","createElement","ref","disabled","id","type","$shouldShowAsSwitch","style","top","transform","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","className","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n    /**\n     * Background color for the checked state.\n     */\n    checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * Background color for the unchecked state.\n     */\n    uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n    /**\n     * Border color for the checkbox or switch indicator.\n     */\n    borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Border radius for the checkbox or switch indicator.\n     */\n    borderRadius?: CSSProperties['borderRadius'];\n    colors?: CheckboxColors;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    borderRadius,\n    colors,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef}>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n\n            <StyledCheckboxBoxWrapper\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                    $checkedBackgroundColor={colors?.checkedBackgroundColor}\n                    $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n                    $borderRadius={borderRadius}\n                    $borderColor={colors?.borderColor}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["React","useCallback","useEffect","useRef","useState","useKeyboardFocusHighlighting","useUuid","getHeightOfSingleTextLine","StyledCheckbox","StyledCheckboxBox","StyledCheckboxBoxWrapper","StyledCheckboxInput","StyledCheckboxLabel","Checkbox","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","borderRadius","colors","shouldShowCentered","shouldChangeOnLabelClick","shouldEnableKeyboardHighlighting","isActive","setIsActive","checkboxTop","setCheckboxTop","undefined","checkboxBoxRef","checkboxRootRef","handleChange","event","target","checked","uuid","current","singleLineHeight","container","boxHeight","getBoundingClientRect","height","shouldShowKeyboardHighlighting","createElement","ref","$shouldShowKeyboardHighlighting","disabled","id","type","$shouldShowAsSwitch","style","top","transform","htmlFor","$isChecked","$isDisabled","$checkedBackgroundColor","checkedBackgroundColor","$uncheckedBackgroundColor","uncheckedBackgroundColor","$borderRadius","$borderColor","borderColor","className","$shouldChangeOnLabelClick","displayName"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    KeyboardEvent,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useKeyboardFocusHighlighting } from '../../hooks/useKeyboardFocusHighlighting';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport {\n    StyledCheckbox,\n    StyledCheckboxBox,\n    StyledCheckboxBoxWrapper,\n    StyledCheckboxInput,\n    StyledCheckboxLabel,\n} from './Checkbox.styles';\n\ntype CheckboxColors = {\n    /**\n     * Background color for the checked state.\n     */\n    checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    /**\n     * Background color for the unchecked state.\n     */\n    uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n\n    /**\n     * Border color for the checkbox or switch indicator.\n     */\n    borderColor?: CSSProperties['borderColor'];\n};\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Whether the label should change the state of the checkbox\n     */\n    shouldChangeOnLabelClick?: boolean;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Border radius for the checkbox or switch indicator.\n     */\n    borderRadius?: CSSProperties['borderRadius'];\n    colors?: CheckboxColors;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n    /**\n     * Enables keyboard-only focus highlighting.\n     */\n    shouldEnableKeyboardHighlighting?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    borderRadius,\n    colors,\n    shouldShowCentered = false,\n    shouldChangeOnLabelClick = true,\n    shouldEnableKeyboardHighlighting,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n    const [checkboxTop, setCheckboxTop] = useState<number | undefined>(undefined);\n\n    const checkboxBoxRef = useRef<HTMLLabelElement>(null);\n    const checkboxRootRef = useRef<HTMLDivElement>(null);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    useEffect(() => {\n        if (checkboxRootRef.current && !shouldShowCentered) {\n            const singleLineHeight = getHeightOfSingleTextLine({\n                container: checkboxRootRef.current,\n            });\n\n            const boxHeight = checkboxBoxRef.current?.getBoundingClientRect().height ?? 0;\n\n            setCheckboxTop((singleLineHeight - boxHeight) / 2);\n        }\n    }, [shouldShowCentered]);\n\n    const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n        shouldEnableKeyboardHighlighting && !isDisabled,\n    );\n\n    return (\n        <StyledCheckbox ref={checkboxRootRef}>\n            <StyledCheckboxInput\n                $shouldShowKeyboardHighlighting={shouldShowKeyboardHighlighting}\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n\n            <StyledCheckboxBoxWrapper\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                style={{\n                    top: shouldShowCentered ? '50%' : checkboxTop,\n                    transform: shouldShowCentered ? 'translateY(-50%)' : undefined,\n                }}\n            >\n                <StyledCheckboxBox\n                    htmlFor={uuid}\n                    ref={checkboxBoxRef}\n                    $isChecked={isChecked ?? isActive}\n                    $isDisabled={isDisabled}\n                    $shouldShowAsSwitch={shouldShowAsSwitch}\n                    $checkedBackgroundColor={colors?.checkedBackgroundColor}\n                    $uncheckedBackgroundColor={colors?.uncheckedBackgroundColor}\n                    $borderRadius={borderRadius}\n                    $borderColor={colors?.borderColor}\n                />\n            </StyledCheckboxBoxWrapper>\n            <StyledCheckboxLabel\n                className={labelClassName}\n                $isDisabled={isDisabled}\n                $shouldChangeOnLabelClick={shouldChangeOnLabelClick}\n                $shouldShowAsSwitch={shouldShowAsSwitch}\n                htmlFor={shouldChangeOnLabelClick ? uuid : undefined}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/checkbox/Checkbox.styles.js

@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';
 export const StyledCheckbox = styled.div`
     align-items: center;
     display: flex;
@@ -7,7 +8,28 @@ export const StyledCheckbox = styled.div`
     min-height: 20px;
 `;
 export const StyledCheckboxInput = styled.input`
-    display: none;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    left: 0;
+    margin: 0;
+    opacity: 0;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    white-space: nowrap;
+    width: 1px;
+
+    ${({
+  $shouldShowKeyboardHighlighting
+}) => $shouldShowKeyboardHighlighting && css`
+            &:focus-visible + div > label {
+                transition: none;
+                ${keyboardFocusHighlightingRingCss}
+            }
+        `}
 `;
 export const StyledCheckboxBoxWrapper = styled.div`
     display: flex;
@@ -32,6 +54,10 @@ export const StyledCheckboxBox = styled.label`
   $isDisabled
 }) => $isDisabled ? 0.5 : 1};
     position: relative;
+    display: inline-block;
+    width: ${({
+  $shouldShowAsSwitch
+}) => $shouldShowAsSwitch ? '44px' : '16px'};
     transition: opacity 0.2s ease;
     user-select: none;
     height: 16px;
@@ -90,7 +116,8 @@ export const StyledCheckboxBox = styled.label`
   if ($shouldShowAsSwitch) {
     return 'none';
   }
-  return `1px solid ${$borderColor ?? `rgba(${theme['409-rgb']}, 0.5)`}`;
+  const fallbackBorderColor = theme['409-rgb'] ? `rgba(${theme['409-rgb']}, 0.5)` : theme.text;
+  return `1px solid ${$borderColor ?? fallbackBorderColor}`;
 }};
 
         border-radius: ${({

package/lib/esm/components/checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$checkedBackgroundColor","$uncheckedBackgroundColor","activeBackgroundColor","green","inactiveBackgroundColor","red","$borderColor","$borderRadius","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch &&\n        css`\n            right: 42px;\n        `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    $uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius?: CSSProperties['borderRadius'];\n    $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            $checkedBackgroundColor,\n            $uncheckedBackgroundColor,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            const activeBackgroundColor =\n                $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);\n            const inactiveBackgroundColor =\n                $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);\n\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n            }\n\n            return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n        }};\n\n        border: ${({ $borderColor, $shouldShowAsSwitch, theme }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return 'none';\n            }\n\n            return `1px solid ${$borderColor ?? `rgba(${theme['409-rgb']}, 0.5)`}`;\n        }};\n\n        border-radius: ${({ $shouldShowAsSwitch, $borderRadius }) =>\n            $borderRadius ?? ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch\n            ? css`\n                  padding-right: 48px;\n              `\n            : css`\n                  padding-left: 20px;\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.styles.js","names":["styled","css","keyboardFocusHighlightingRingCss","StyledCheckbox","div","StyledCheckboxInput","input","$shouldShowKeyboardHighlighting","StyledCheckboxBoxWrapper","$shouldShowAsSwitch","StyledCheckboxBox","label","theme","text","$isDisabled","$isChecked","$checkedBackgroundColor","$uncheckedBackgroundColor","activeBackgroundColor","green","inactiveBackgroundColor","red","$borderColor","fallbackBorderColor","$borderRadius","StyledCheckboxLabel","$shouldChangeOnLabelClick"],"sources":["../../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { CSSProperties } from 'react';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { keyboardFocusHighlightingRingCss } from '../../utils/keyboardFocusHighlighting.styles';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n    width: 100%;\n    min-height: 20px;\n`;\n\ntype StyledCheckboxInputProps = {\n    $shouldShowKeyboardHighlighting?: boolean;\n};\n\nexport const StyledCheckboxInput = styled.input<StyledCheckboxInputProps>`\n    border: 0;\n    clip: rect(0 0 0 0);\n    clip-path: inset(50%);\n    height: 1px;\n    left: 0;\n    margin: 0;\n    opacity: 0;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    white-space: nowrap;\n    width: 1px;\n\n    ${({ $shouldShowKeyboardHighlighting }) =>\n        $shouldShowKeyboardHighlighting &&\n        css`\n            &:focus-visible + div > label {\n                transition: none;\n                ${keyboardFocusHighlightingRingCss}\n            }\n        `}\n`;\n\ntype StyledCheckboxBoxWrapperProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxBoxWrapper = styled.div<StyledCheckboxBoxWrapperProps>`\n    display: flex;\n    flex-shrink: 0;\n    height: 16px;\n    position: absolute;\n\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch &&\n        css`\n            right: 42px;\n        `}\n`;\n\ntype StyledCheckboxBoxProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $checkedBackgroundColor?: CSSProperties['backgroundColor'];\n    $uncheckedBackgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius?: CSSProperties['borderRadius'];\n    $borderColor?: CSSProperties['borderColor'];\n}>;\n\nexport const StyledCheckboxBox = styled.label<StyledCheckboxBoxProps>`\n    color: ${({ theme }: StyledCheckboxBoxProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    position: relative;\n    display: inline-block;\n    width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '44px' : '16px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    height: 16px;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch }: StyledCheckboxBoxProps) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: 50%;\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: calc(50% - 2px);\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            $checkedBackgroundColor,\n            $uncheckedBackgroundColor,\n            theme,\n        }: StyledCheckboxBoxProps) => {\n            const activeBackgroundColor =\n                $checkedBackgroundColor ?? ($shouldShowAsSwitch ? theme.green : theme['408']);\n            const inactiveBackgroundColor =\n                $uncheckedBackgroundColor ?? ($shouldShowAsSwitch ? theme.red : theme['403']);\n\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n            }\n\n            return $isChecked ? activeBackgroundColor : inactiveBackgroundColor;\n        }};\n\n        border: ${({ $borderColor, $shouldShowAsSwitch, theme }: StyledCheckboxBoxProps) => {\n            if ($shouldShowAsSwitch) {\n                return 'none';\n            }\n\n            const fallbackBorderColor = theme['409-rgb']\n                ? `rgba(${theme['409-rgb']}, 0.5)`\n                : theme.text;\n\n            return `1px solid ${$borderColor ?? fallbackBorderColor}`;\n        }};\n\n        border-radius: ${({ $shouldShowAsSwitch, $borderRadius }) =>\n            $borderRadius ?? ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n    }\n}\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $shouldChangeOnLabelClick?: CheckboxProps['shouldChangeOnLabelClick'];\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $shouldChangeOnLabelClick }) =>\n        !$shouldChangeOnLabelClick ? 'default' : 'pointer'};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: opacity 0.2s ease;\n    user-select: none;\n    ${({ $shouldShowAsSwitch }) =>\n        $shouldShowAsSwitch\n            ? css`\n                  padding-right: 48px;\n              `\n            : css`\n                  padding-left: 20px;\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js

@@ -73,7 +73,8 @@ const ColorSchemeProvider = ({
   siteId,
   style = {},
   iconColor,
-  customVariables
+  customVariables,
+  shouldEnableKeyboardHighlighting
 }) => {
   const context = useContext(ColorSchemeContext);
   const {
@@ -84,6 +85,7 @@ const ColorSchemeProvider = ({
   const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;
   const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
   const paragraphFormat = useMemo(() => overrideParagraphFormat ? [] : undefined, [overrideParagraphFormat]);
+  const resolvedShouldEnableKeyboardHighlighting = shouldEnableKeyboardHighlighting ?? context?.shouldEnableKeyboardHighlighting ?? false;
   const contextValue = useChaynsTheme({
     color,
     iconColor,
@@ -97,7 +99,10 @@ const ColorSchemeProvider = ({
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: contextValue.theme
   }, /*#__PURE__*/React.createElement(ColorSchemeContext.Provider, {
-    value: contextValue
+    value: {
+      ...contextValue,
+      shouldEnableKeyboardHighlighting: resolvedShouldEnableKeyboardHighlighting
+    }
   }, /*#__PURE__*/React.createElement(StyledColorSchemeProvider, {
     className: "color-scheme-provider",
     style: style