@chayns-components/core 5.0.0-beta.607 → 5.0.0-beta.609

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

@@ -122,8 +122,9 @@ const AmountControl = ({
         break;
       case 'delete':
         item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
-          icons: ['fa ts-trash'],
-          size: 25
+          icons: ['fa ts-check'],
+          size: 20,
+          color: "white"
         });
         break;
       case 'normal':
@@ -163,7 +164,7 @@ const AmountControl = ({
       padding: 0
     },
     animate: {
-      width: 40,
+      width: 28,
       opacity: 1,
       padding: 0
     },
@@ -177,6 +178,7 @@ const AmountControl = ({
       type: 'tween'
     },
     onClick: handleAmountRemove,
+    $color: displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined,
     disabled: amountValue !== 0 && amountValue <= minAmount,
     $isDisabled: amountValue !== 0 && amountValue <= minAmount
   }, leftIcon)), /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControlInput, {
@@ -196,7 +198,7 @@ const AmountControl = ({
       padding: 0
     },
     animate: {
-      width: 40,
+      width: 28,
       opacity: 1,
       padding: 0
     },

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

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_amountControl","_Icon","_interopRequireDefault","_AmountControl","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AmountControl","amount","icon","shouldShowIcon","label","iconColor","maxAmount","onChange","amountValue","setAmountValue","useState","inputValue","setInputValue","displayState","setDisplayState","minAmount","useEffect","hasFocus","useMemo","checkForValidAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","useCallback","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","StyledAmountControl","onClick","AnimatePresence","initial","StyledMotionAmountControlButton","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","$isDisabled","StyledAmountControlInput","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName","_default","exports"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount';\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     * 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 set to one, a delete button is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    onChange,\n}) => {\n    const [amountValue, setAmountValue] = useState(0);\n    const [inputValue, setInputValue] = useState('0');\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const minAmount = 0;\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount === 1 && amountValue === 1:\n                setDisplayState('delete');\n                return;\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > 0:\n                setDisplayState('normal');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (!amount) {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    /**\n     * Function that updates the onChange event\n     */\n    useEffect(() => {\n        if (onChange) {\n            onChange(amountValue);\n        }\n    }, [amountValue, onChange]);\n\n    const handleAmountAdd = () => {\n        setAmountValue((prevState) => prevState + 1);\n        setInputValue((prevState) => (Number(prevState) + 1).toString());\n    };\n\n    const handleAmountRemove = () => {\n        setAmountValue((prevState) => prevState - 1);\n        setInputValue((prevState) => (Number(prevState) - 1).toString());\n    };\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== 0) {\n            return;\n        }\n\n        setAmountValue(1);\n        setInputValue('1');\n    }, [amountValue]);\n\n    const handleInputBlur = useCallback(() => {\n        setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n        if (inputValue === '') {\n            setInputValue('0');\n        }\n    }, [inputValue]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBeforeCheck = Number(value.replace(/\\D/g, ''));\n\n            const checkedValue = checkForValidAmount({\n                minAmount,\n                maxAmount,\n                amount: valueBeforeCheck,\n            });\n\n            if (valueBeforeCheck < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n        },\n        [maxAmount, minAmount],\n    );\n\n    const leftIcon = useMemo(() => {\n        let item: ReactElement | null = null;\n\n        switch (displayState) {\n            case 'default':\n                item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} color={iconColor} />;\n                break;\n            case 'delete':\n                item = <Icon icons={['fa ts-trash']} size={25} />;\n                break;\n            case 'normal':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            case 'maxAmount':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            default:\n                break;\n        }\n\n        return item;\n    }, [displayState, icon, iconColor]);\n\n    const shouldShowLeftIcon = useMemo(() => {\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !(displayState === 'default' && !shouldShowIcon);\n    }, [displayState, shouldShowIcon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount}>\n                <AnimatePresence initial={false}>\n                    {shouldShowLeftIcon && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{ width: 40, opacity: 1, padding: 0 }}\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                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                <StyledAmountControlInput\n                    $displayState={displayState}\n                    $shouldShowIcon={shouldShowIcon}\n                    $hasFocus={hasFocus}\n                    onBlur={handleInputBlur}\n                    onChange={handleInputChange}\n                    value={displayState === 'default' && label ? label : inputValue}\n                />\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{ width: 40, opacity: 1, padding: 0 }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            disabled={maxAmount ? amountValue >= maxAmount : false}\n                            $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n                        >\n                            <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            hasFocus,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_amountControl","_Icon","_interopRequireDefault","_AmountControl","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AmountControl","amount","icon","shouldShowIcon","label","iconColor","maxAmount","onChange","amountValue","setAmountValue","useState","inputValue","setInputValue","displayState","setDisplayState","minAmount","useEffect","hasFocus","useMemo","checkForValidAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","useCallback","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","StyledAmountControl","onClick","AnimatePresence","initial","StyledMotionAmountControlButton","key","width","opacity","padding","animate","exit","transition","duration","type","$color","undefined","disabled","$isDisabled","StyledAmountControlInput","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName","_default","exports"],"sources":["../../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount';\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     * 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 set to one, a delete button is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    onChange,\n}) => {\n    const [amountValue, setAmountValue] = useState(0);\n    const [inputValue, setInputValue] = useState('0');\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const minAmount = 0;\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount === 1 && amountValue === 1:\n                setDisplayState('delete');\n                return;\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > 0:\n                setDisplayState('normal');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (!amount) {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    /**\n     * Function that updates the onChange event\n     */\n    useEffect(() => {\n        if (onChange) {\n            onChange(amountValue);\n        }\n    }, [amountValue, onChange]);\n\n    const handleAmountAdd = () => {\n        setAmountValue((prevState) => prevState + 1);\n        setInputValue((prevState) => (Number(prevState) + 1).toString());\n    };\n\n    const handleAmountRemove = () => {\n        setAmountValue((prevState) => prevState - 1);\n        setInputValue((prevState) => (Number(prevState) - 1).toString());\n    };\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== 0) {\n            return;\n        }\n\n        setAmountValue(1);\n        setInputValue('1');\n    }, [amountValue]);\n\n    const handleInputBlur = useCallback(() => {\n        setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n        if (inputValue === '') {\n            setInputValue('0');\n        }\n    }, [inputValue]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBeforeCheck = Number(value.replace(/\\D/g, ''));\n\n            const checkedValue = checkForValidAmount({\n                minAmount,\n                maxAmount,\n                amount: valueBeforeCheck,\n            });\n\n            if (valueBeforeCheck < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n        },\n        [maxAmount, minAmount],\n    );\n\n    const leftIcon = useMemo(() => {\n        let item: ReactElement | null = null;\n\n        switch (displayState) {\n            case 'default':\n                item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} color={iconColor} />;\n                break;\n            case 'delete':\n                item = <Icon icons={['fa ts-check']} size={20} color=\"white\" />;\n                break;\n            case 'normal':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            case 'maxAmount':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            default:\n                break;\n        }\n\n        return item;\n    }, [displayState, icon, iconColor]);\n\n    const shouldShowLeftIcon = useMemo(() => {\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !(displayState === 'default' && !shouldShowIcon);\n    }, [displayState, shouldShowIcon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount}>\n                <AnimatePresence initial={false}>\n                    {shouldShowLeftIcon && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{ width: 28, opacity: 1, padding: 0 }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            $color={displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                <StyledAmountControlInput\n                    $displayState={displayState}\n                    $shouldShowIcon={shouldShowIcon}\n                    $hasFocus={hasFocus}\n                    onBlur={handleInputBlur}\n                    onChange={handleInputChange}\n                    value={displayState === 'default' && label ? label : inputValue}\n                />\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{ width: 28, opacity: 1, padding: 0 }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            disabled={maxAmount ? amountValue >= maxAmount : false}\n                            $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n                        >\n                            <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            hasFocus,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

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

@@ -15,6 +15,7 @@ const StyledAmountControl = exports.StyledAmountControl = _styledComponents.defa
     display: flex;
     width: fit-content;
     border-radius: 3px;
+    overflow: hidden;
 `;
 const StyledAmountControlInput = exports.StyledAmountControlInput = _styledComponents.default.input`
     background-color: ${({
@@ -25,7 +26,7 @@ const StyledAmountControlInput = exports.StyledAmountControlInput = _styledCompo
 }) => theme.text};
     border: none;
     height: 28px;
-    width: 95px;
+    width: 90px;
     text-align: center;
     cursor: ${({
   $hasFocus
@@ -47,9 +48,12 @@ const StyledAmountControlInput = exports.StyledAmountControlInput = _styledCompo
 `;
 const StyledMotionAmountControlButton = exports.StyledMotionAmountControlButton = (0, _styledComponents.default)(_framerMotion.motion.button)`
     overflow: hidden;
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: ${({
+  $color
+}) => $color ?? 'rgba(255, 255, 255, 0.2)'};
+    transition: background-color 0.2s ease-in-out;
     height: 28px;
-    width: 40px;
+    width: 28px;
 
     ${({
   $isDisabled

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

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledAmountControl","exports","styled","div","theme","StyledAmountControlInput","input","text","$hasFocus","$displayState","css","$shouldShowIcon","StyledMotionAmountControlButton","motion","button","$isDisabled"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\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`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    width: 95px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState !== 'normal' &&\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 StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: rgba(255, 255, 255, 0.2);\n    height: 28px;\n    width: 40px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAMzC,MAAMW,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA8B;AACxE,wBAAwB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AAC9E;AACA;AACA;AACA,CAAC;AAQM,MAAMC,wBAAwB,GAAAJ,OAAA,CAAAI,wBAAA,GAAGH,yBAAM,CAACI,KAAqC;AACpF,wBAAwB,CAAC;EAAEF;AAAqC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AACnF,aAAa,CAAC;EAAEA;AAAqC,CAAC,KAAKA,KAAK,CAACG,IAAK;AACtE;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,MAAM,GAAG,SAAW;AAClE;AACA,MAAM,CAAC;EAAEC;AAAc,CAAC,KAChBA,aAAa,KAAK,QAAQ,IAC1B,IAAAC,qBAAG,CAAC;AACZ;AACA;AACA,SAAU;AACV,MAAM,CAAC;EAAED,aAAa;EAAEE;AAAgB,CAAC,KACjCF,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChB,IAAAD,qBAAG,CAAC;AACZ;AACA;AACA,SAAU;AACV,CAAC;AAMM,MAAME,+BAA+B,GAAAX,OAAA,CAAAW,+BAAA,GAAG,IAAAV,yBAAM,EACjDW,oBAAM,CAACC,MACX,CAAkC;AAClC;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACX,IAAAL,qBAAG,CAAC;AACZ;AACA,SAAU;AACV,CAAC","ignoreList":[]}
+{"version":3,"file":"AmountControl.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledAmountControl","exports","styled","div","theme","StyledAmountControlInput","input","text","$hasFocus","$displayState","css","$shouldShowIcon","StyledMotionAmountControlButton","motion","button","$color","$isDisabled"],"sources":["../../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\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`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    width: 90px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState !== 'normal' &&\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 StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: ${({ $color }) => $color ?? 'rgba(255, 255, 255, 0.2)'};\n    transition: background-color 0.2s ease-in-out;\n    height: 28px;\n    width: 28px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAMzC,MAAMW,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA8B;AACxE,wBAAwB,CAAC;EAAEC;AAAgC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AAC9E;AACA;AACA;AACA;AACA,CAAC;AAQM,MAAMC,wBAAwB,GAAAJ,OAAA,CAAAI,wBAAA,GAAGH,yBAAM,CAACI,KAAqC;AACpF,wBAAwB,CAAC;EAAEF;AAAqC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAE;AACnF,aAAa,CAAC;EAAEA;AAAqC,CAAC,KAAKA,KAAK,CAACG,IAAK;AACtE;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAU,CAAC,KAAMA,SAAS,GAAG,MAAM,GAAG,SAAW;AAClE;AACA,MAAM,CAAC;EAAEC;AAAc,CAAC,KAChBA,aAAa,KAAK,QAAQ,IAC1B,IAAAC,qBAAG,CAAC;AACZ;AACA;AACA,SAAU;AACV,MAAM,CAAC;EAAED,aAAa;EAAEE;AAAgB,CAAC,KACjCF,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChB,IAAAD,qBAAG,CAAC;AACZ;AACA;AACA,SAAU;AACV,CAAC;AAOM,MAAME,+BAA+B,GAAAX,OAAA,CAAAW,+BAAA,GAAG,IAAAV,yBAAM,EACjDW,oBAAM,CAACC,MACX,CAAkC;AAClC;AACA,wBAAwB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM,IAAI,0BAA2B;AAC7E;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACX,IAAAN,qBAAG,CAAC;AACZ;AACA,SAAU;AACV,CAAC","ignoreList":[]}

package/lib/cjs/components/badge/Badge.styles.js

@@ -15,7 +15,7 @@ const StyledBadge = exports.StyledBadge = _styledComponents.default.div`
     color: ${({
   $fontColor,
   theme
-}) => $fontColor ?? theme['007']};
+}) => $fontColor ?? theme.text};
     display: inline-block;
     font-size: 0.8rem;
     min-width: 1.65rem;

package/lib/cjs/components/badge/Badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledBadge","exports","styled","div","$backgroundColor","theme","$fontColor","$isOnClick"],"sources":["../../../../src/components/badge/Badge.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledBadgeProps = WithTheme<{\n    $backgroundColor?: string;\n    $fontColor?: string;\n    $isOnClick: boolean;\n}>;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n    background-color: ${({ $backgroundColor, theme }: StyledBadgeProps) =>\n        $backgroundColor ?? theme['secondary-202']};\n    border-radius: 15px;\n    color: ${({ $fontColor, theme }: StyledBadgeProps) => $fontColor ?? theme['007']};\n    display: inline-block;\n    font-size: 0.8rem;\n    min-width: 1.65rem;\n    padding: 2px 7px;\n    text-align: center;\n    cursor: ${({ $isOnClick }) => ($isOnClick ? 'pointer' : 'default')};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAShC,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAsB;AACxD,wBAAwB,CAAC;EAAEC,gBAAgB;EAAEC;AAAwB,CAAC,KAC9DD,gBAAgB,IAAIC,KAAK,CAAC,eAAe,CAAE;AACnD;AACA,aAAa,CAAC;EAAEC,UAAU;EAAED;AAAwB,CAAC,KAAKC,UAAU,IAAID,KAAK,CAAC,KAAK,CAAE;AACrF;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEE;AAAW,CAAC,KAAMA,UAAU,GAAG,SAAS,GAAG,SAAW;AACvE,CAAC","ignoreList":[]}
+{"version":3,"file":"Badge.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledBadge","exports","styled","div","$backgroundColor","theme","$fontColor","text","$isOnClick"],"sources":["../../../../src/components/badge/Badge.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledBadgeProps = WithTheme<{\n    $backgroundColor?: string;\n    $fontColor?: string;\n    $isOnClick: boolean;\n}>;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n    background-color: ${({ $backgroundColor, theme }: StyledBadgeProps) =>\n        $backgroundColor ?? theme['secondary-202']};\n    border-radius: 15px;\n    color: ${({ $fontColor, theme }: StyledBadgeProps) => $fontColor ?? theme.text};\n    display: inline-block;\n    font-size: 0.8rem;\n    min-width: 1.65rem;\n    padding: 2px 7px;\n    text-align: center;\n    cursor: ${({ $isOnClick }) => ($isOnClick ? 'pointer' : 'default')};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAShC,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAsB;AACxD,wBAAwB,CAAC;EAAEC,gBAAgB;EAAEC;AAAwB,CAAC,KAC9DD,gBAAgB,IAAIC,KAAK,CAAC,eAAe,CAAE;AACnD;AACA,aAAa,CAAC;EAAEC,UAAU;EAAED;AAAwB,CAAC,KAAKC,UAAU,IAAID,KAAK,CAACE,IAAK;AACnF;AACA;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAW,CAAC,KAAMA,UAAU,GAAG,SAAS,GAAG,SAAW;AACvE,CAAC","ignoreList":[]}

package/lib/cjs/components/combobox/ComboBox.styles.js

@@ -112,20 +112,19 @@ const StyledMotionComboBoxBody = exports.StyledMotionComboBoxBody = (0, _styledC
 }) => $overflowY};
 
     ${({
-  $direction,
-  theme
+  $direction
 }) => {
   if ($direction === _comboBox.ComboBoxDirection.BOTTOM) {
     return (0, _styledComponents.css)`
                 border-bottom-left-radius: 3px;
                 border-bottom-right-radius: 3px;
-                box-shadow: 0 2px 8px 2px rgba(${theme['009-rgb']}, 0.15);
+                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
             `;
   }
   return (0, _styledComponents.css)`
             border-top-left-radius: 3px;
             border-top-right-radius: 3px;
-            box-shadow: 0 -2px 8px 2px rgba(${theme['009-rgb']}, 0.15);
+            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);
         `;
 }}
 

package/lib/cjs/components/combobox/ComboBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","StyledComboBoxHeader","$isDisabled","theme","$minWidth","$isOpen","$direction","ComboBoxDirection","BOTTOM","css","$isMobile","StyledComboBoxPlaceholder","text","StyledComboBoxPlaceholderImage","img","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$browser"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\n\nexport const StyledComboBox = styled.div`\n    user-select: none;\n    width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isMobile: boolean;\n    $isOpen: boolean;\n    $minWidth: number;\n    $direction: ComboBoxDirection;\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    min-width: ${({ $minWidth }) => $minWidth}px;\n    max-width: ${({ $minWidth }) => $minWidth}px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return $direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isMobile, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isMobile &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n    Pick<ComboBoxItemProps, 'shouldShowRoundImage'>\n>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ shouldShowRoundImage }) =>\n        shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $overflowY: CSSProperties['overflowY'];\n    $minWidth: number;\n    $maxHeight: CSSProperties['maxHeight'];\n    $direction: ComboBoxDirection;\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    min-width: ${({ $minWidth }) => $minWidth}px;\n    max-width: ${({ $minWidth }) => $minWidth}px;\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: ${({ $overflowY }) => $overflowY};\n\n    ${({ $direction, theme }) => {\n        if ($direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 2px 8px 2px rgba(${theme['009-rgb']}, 0.15);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -2px 8px 2px rgba(${theme['009-rgb']}, 0.15);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","StyledComboBoxHeader","$isDisabled","theme","$minWidth","$isOpen","$direction","ComboBoxDirection","BOTTOM","css","$isMobile","StyledComboBoxPlaceholder","text","StyledComboBoxPlaceholderImage","img","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","$maxHeight","$overflowY","$browser"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\n\nexport const StyledComboBox = styled.div`\n    user-select: none;\n    width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isMobile: boolean;\n    $isOpen: boolean;\n    $minWidth: number;\n    $direction: ComboBoxDirection;\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    min-width: ${({ $minWidth }) => $minWidth}px;\n    max-width: ${({ $minWidth }) => $minWidth}px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return $direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isMobile, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isMobile &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n    Pick<ComboBoxItemProps, 'shouldShowRoundImage'>\n>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ shouldShowRoundImage }) =>\n        shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $overflowY: CSSProperties['overflowY'];\n    $minWidth: number;\n    $maxHeight: CSSProperties['maxHeight'];\n    $direction: ComboBoxDirection;\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    min-width: ${({ $minWidth }) => $minWidth}px;\n    max-width: ${({ $minWidth }) => $minWidth}px;\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: ${({ $overflowY }) => $overflowY};\n\n    ${({ $direction }) => {\n        if ($direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/input/Input.js

@@ -90,9 +90,9 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
       };
     }
     return {
-      left: -1
+      left: placeholderElement ? 2 : -1
     };
-  }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);
+  }, [hasValue, placeholderElement, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);
   return /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
     className: "beta-chayns-input",
     $isDisabled: isDisabled
@@ -132,7 +132,21 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
       type: 'tween',
       duration: 0.1
     }
-  }, placeholderElement, /*#__PURE__*/_react.default.createElement(_Input.StyledInputLabel, {
+  }, /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputElement, {
+    animate: hasValue && !shouldShowOnlyBottomBorder && !shouldRemainPlaceholder ? {
+      scale: 0.4,
+      x: '6px',
+      y: '2px'
+    } : {
+      scale: 1
+    },
+    initial: false,
+    layout: true,
+    transition: {
+      type: 'tween',
+      duration: 0.1
+    }
+  }, placeholderElement), /*#__PURE__*/_react.default.createElement(_Input.StyledInputLabel, {
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,

package/lib/cjs/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Input","forwardRef","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","fontSize","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                >\n                    {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={{\n                                fontSize:\n                                    hasValue &&\n                                    !shouldShowOnlyBottomBorder &&\n                                    !shouldRemainPlaceholder\n                                        ? '9px'\n                                        : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.1 }}\n                        >\n                            {placeholderElement}\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Input","forwardRef","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","fontSize","initial","layout","transition","duration","StyledMotionInputElement","scale","x","y","StyledInputLabel","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputElement,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: -10, right: -6 };\n            }\n\n            return { left: placeholderElement ? 2 : -1 };\n        }, [hasValue, placeholderElement, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                >\n                    {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={{\n                                fontSize:\n                                    hasValue &&\n                                    !shouldShowOnlyBottomBorder &&\n                                    !shouldRemainPlaceholder\n                                        ? '9px'\n                                        : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.1 }}\n                        >\n                            <StyledMotionInputElement\n                                animate={\n                                    hasValue &&\n                                    !shouldShowOnlyBottomBorder &&\n                                    !shouldRemainPlaceholder\n                                        ? { scale: 0.4, x: '6px', y: '2px' }\n                                        : { scale: 1 }\n                                }\n                                initial={false}\n                                layout\n                                transition={{ type: 'tween', duration: 0.1 }}\n                            >\n                                {placeholderElement}\n                            </StyledMotionInputElement>\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/input/Input.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMotionInputLabelWrapper = exports.StyledMotionInputClearIcon = exports.StyledInputRightElement = exports.StyledInputLabel = exports.StyledInputIconWrapper = exports.StyledInputField = exports.StyledInputContentWrapper = exports.StyledInputContent = exports.StyledInput = void 0;
+exports.StyledMotionInputLabelWrapper = exports.StyledMotionInputElement = exports.StyledMotionInputClearIcon = exports.StyledInputRightElement = exports.StyledInputLabel = exports.StyledInputIconWrapper = exports.StyledInputField = exports.StyledInputContentWrapper = exports.StyledInputContent = exports.StyledInput = void 0;
 var _framerMotion = require("framer-motion");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -105,6 +105,7 @@ const StyledMotionInputLabelWrapper = exports.StyledMotionInputLabelWrapper = (0
     user-select: none;
     max-width: 100%;
 `;
+const StyledMotionInputElement = exports.StyledMotionInputElement = (0, _styledComponents.default)(_framerMotion.motion.div)``;
 const StyledInputLabel = exports.StyledInputLabel = _styledComponents.default.label`
     line-height: 1.3;
     pointer-events: none;

package/lib/cjs/components/input/Input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","$shouldShowOnlyBottomBorder","css","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledInputLabel","undefined","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    $shouldRoundRightCorners: boolean;\n    $shouldShowOnlyBottomBorder?: boolean;\n    $isInvalid?: boolean;\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border: 1px solid\n        ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n            $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder &&\n        css`\n            min-height: 42px;\n        `}\n\n    ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n        if ($shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if ($shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n            border-right: none;\n        `;\n    }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n    $isInvalid?: boolean;\n    $shouldShowCenteredContent: boolean;\n    $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    padding: 0;\n    width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n    line-height: 1em;\n\n    ${({ $shouldShowCenteredContent }) =>\n        $shouldShowCenteredContent &&\n        css`\n            text-align: center;\n        `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n    line-height: 1.3;\n    pointer-events: none;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n        $isInvalid ? theme.wrong : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n        $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledInput","exports","styled","div","$isDisabled","StyledInputContentWrapper","theme","$shouldChangeColor","colorMode","$isInvalid","wrong","$shouldShowOnlyBottomBorder","css","$shouldRoundRightCorners","StyledInputContent","StyledInputField","input","text","$placeholderWidth","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","motion","label","StyledMotionInputElement","StyledInputLabel","undefined","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    $shouldRoundRightCorners: boolean;\n    $shouldShowOnlyBottomBorder?: boolean;\n    $isInvalid?: boolean;\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border: 1px solid\n        ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n            $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder &&\n        css`\n            min-height: 42px;\n        `}\n\n    ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n        if ($shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if ($shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n            border-right: none;\n        `;\n    }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n    $isInvalid?: boolean;\n    $shouldShowCenteredContent: boolean;\n    $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    padding: 0;\n    width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n    line-height: 1em;\n\n    ${({ $shouldShowCenteredContent }) =>\n        $shouldShowCenteredContent &&\n        css`\n            text-align: center;\n        `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)``;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n    line-height: 1.3;\n    pointer-events: none;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n        $isInvalid ? theme.wrong : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n        $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider-button/SliderButton.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _chaynsApi = require("chayns-api");
 var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
 var _useElementSize = require("../../hooks/useElementSize");
 var _calculate = require("../../utils/calculate");
 var _sliderButton = require("../../utils/sliderButton");
@@ -31,6 +32,7 @@ const SliderButton = ({
   const [scope, animate] = (0, _framerMotion.useAnimate)();
   const itemWidth = (0, _react.useMemo)(() => (0, _calculate.calculateBiggestWidth)(items), [items]);
   const sliderSize = (0, _useElementSize.useElementSize)(sliderButtonRef);
+  const theme = (0, _styledComponents.useTheme)();
   const isSliderBigger = (0, _react.useMemo)(() => sliderSize && Math.floor(sliderSize.width / itemWidth) < items.length, [itemWidth, items.length, sliderSize]);
   (0, _react.useEffect)(() => {
     if (sliderSize) {
@@ -258,8 +260,15 @@ const SliderButton = ({
     },
     $width: itemWidth,
     onDrag: handleWhileDrag,
-    onDragEnd: handleDragEnd
+    onDragEnd: handleDragEnd,
+    whileTap: isDisabled ? {} : {
+      backgroundColor: theme['407']
+    },
+    whileHover: isDisabled ? {} : {
+      backgroundColor: theme['409']
+    }
   }, thumbText), /*#__PURE__*/_react.default.createElement(_SliderButton.StyledSliderButtonWrapper, {
+    $isDisabled: isDisabled,
     $width: !isSliderBigger ? dragRange.right + itemWidth : dragRange.right,
     ref: sliderButtonWrapperRef,
     onScroll: handleScroll