@chayns-components/core 5.0.0-beta.626 → 5.0.0-beta.627

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

@@ -19,7 +19,8 @@ const AmountControl = ({
   label,
   iconColor,
   maxAmount,
-  onChange
+  onChange,
+  shouldShowWideInput = false
 }) => {
   const [amountValue, setAmountValue] = (0, _react.useState)(0);
   const [inputValue, setInputValue] = (0, _react.useState)('0');
@@ -164,7 +165,7 @@ const AmountControl = ({
       padding: 0
     },
     animate: {
-      width: 28,
+      width: displayState === 'normal' || displayState === 'maxAmount' ? 40 : 28,
       opacity: 1,
       padding: 0
     },
@@ -173,6 +174,7 @@ const AmountControl = ({
       opacity: 0,
       padding: 0
     },
+    $isWide: displayState === 'normal' || displayState === 'maxAmount',
     transition: {
       duration: 0.2,
       type: 'tween'
@@ -184,6 +186,7 @@ const AmountControl = ({
   }, leftIcon)), /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControlInput, {
     $displayState: displayState,
     $shouldShowIcon: shouldShowIcon,
+    $shouldShowWideInput: shouldShowWideInput,
     $hasFocus: hasFocus,
     onBlur: handleInputBlur,
     onChange: handleInputChange,
@@ -198,7 +201,7 @@ const AmountControl = ({
       padding: 0
     },
     animate: {
-      width: 28,
+      width: 40,
       opacity: 1,
       padding: 0
     },
@@ -212,13 +215,14 @@ const AmountControl = ({
       type: 'tween'
     },
     onClick: handleAmountAdd,
+    $isWide: displayState === 'normal' || displayState === 'maxAmount',
     disabled: maxAmount ? amountValue >= maxAmount : false,
     $isDisabled: maxAmount ? amountValue >= maxAmount : false
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-plus'],
     size: 15,
     color: "green"
-  })))), [amountValue, displayState, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon]);
+  })))), [amountValue, displayState, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
 };
 AmountControl.displayName = 'AmountControl';
 var _default = exports.default = AmountControl;

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","$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":[]}
+{"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","shouldShowWideInput","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","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","StyledAmountControlInput","$displayState","$shouldShowIcon","$shouldShowWideInput","$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     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    onChange,\n    shouldShowWideInput = false,\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={{\n                                width:\n                                    displayState === 'normal' || displayState === 'maxAmount'\n                                        ? 40\n                                        : 28,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\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                    $shouldShowWideInput={shouldShowWideInput}\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={{\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={handleAmountAdd}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\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            shouldShowWideInput,\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

@@ -26,7 +26,9 @@ const StyledAmountControlInput = exports.StyledAmountControlInput = _styledCompo
 }) => theme.text};
     border: none;
     height: 28px;
-    width: 90px;
+    width: ${({
+  $shouldShowWideInput
+}) => $shouldShowWideInput ? 90 : 55}px;
     text-align: center;
     cursor: ${({
   $hasFocus
@@ -53,7 +55,9 @@ const StyledMotionAmountControlButton = exports.StyledMotionAmountControlButton
 }) => $color ?? 'rgba(255, 255, 255, 0.2)'};
     transition: background-color 0.2s ease-in-out;
     height: 28px;
-    width: 28px;
+    width: ${({
+  $isWide
+}) => $isWide ? 40 : 28}px;
 
     ${({
   $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","$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":[]}
+{"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","$shouldShowWideInput","$hasFocus","$displayState","css","$shouldShowIcon","StyledMotionAmountControlButton","motion","button","$color","$isWide","$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    $shouldShowWideInput: 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: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\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    $isWide?: boolean;\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: ${({ $isWide }) => ($isWide ? 40 : 28)}px;\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;AASM,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,aAAa,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,EAAE,GAAG,EAAI;AAC5E;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;AAQM,MAAME,+BAA+B,GAAAZ,OAAA,CAAAY,+BAAA,GAAG,IAAAX,yBAAM,EACjDY,oBAAM,CAACC,MACX,CAAkC;AAClC;AACA,wBAAwB,CAAC;EAAEC;AAAO,CAAC,KAAKA,MAAM,IAAI,0BAA2B;AAC7E;AACA;AACA,aAAa,CAAC;EAAEC;AAAQ,CAAC,KAAMA,OAAO,GAAG,EAAE,GAAG,EAAI;AAClD;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACX,IAAAP,qBAAG,CAAC;AACZ;AACA,SAAU;AACV,CAAC","ignoreList":[]}

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

@@ -11,7 +11,8 @@ const AmountControl = _ref => {
     label,
     iconColor,
     maxAmount,
-    onChange
+    onChange,
+    shouldShowWideInput = false
   } = _ref;
   const [amountValue, setAmountValue] = useState(0);
   const [inputValue, setInputValue] = useState('0');
@@ -156,7 +157,7 @@ const AmountControl = _ref => {
       padding: 0
     },
     animate: {
-      width: 28,
+      width: displayState === 'normal' || displayState === 'maxAmount' ? 40 : 28,
       opacity: 1,
       padding: 0
     },
@@ -165,6 +166,7 @@ const AmountControl = _ref => {
       opacity: 0,
       padding: 0
     },
+    $isWide: displayState === 'normal' || displayState === 'maxAmount',
     transition: {
       duration: 0.2,
       type: 'tween'
@@ -176,6 +178,7 @@ const AmountControl = _ref => {
   }, leftIcon)), /*#__PURE__*/React.createElement(StyledAmountControlInput, {
     $displayState: displayState,
     $shouldShowIcon: shouldShowIcon,
+    $shouldShowWideInput: shouldShowWideInput,
     $hasFocus: hasFocus,
     onBlur: handleInputBlur,
     onChange: handleInputChange,
@@ -190,7 +193,7 @@ const AmountControl = _ref => {
       padding: 0
     },
     animate: {
-      width: 28,
+      width: 40,
       opacity: 1,
       padding: 0
     },
@@ -204,13 +207,14 @@ const AmountControl = _ref => {
       type: 'tween'
     },
     onClick: handleAmountAdd,
+    $isWide: displayState === 'normal' || displayState === 'maxAmount',
     disabled: maxAmount ? amountValue >= maxAmount : false,
     $isDisabled: maxAmount ? amountValue >= maxAmount : false
   }, /*#__PURE__*/React.createElement(Icon, {
     icons: ['fa fa-plus'],
     size: 15,
     color: "green"
-  })))), [amountValue, displayState, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon]);
+  })))), [amountValue, displayState, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
 };
 AmountControl.displayName = 'AmountControl';
 export default AmountControl;

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

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","iconColor","maxAmount","onChange","amountValue","setAmountValue","inputValue","setInputValue","displayState","setDisplayState","minAmount","hasFocus","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","transition","duration","type","$color","undefined","disabled","$isDisabled","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName"],"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":[]}
+{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","iconColor","maxAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","inputValue","setInputValue","displayState","setDisplayState","minAmount","hasFocus","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","handleInputBlur","handleInputChange","event","value","target","valueBeforeCheck","replace","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","$displayState","$shouldShowIcon","$shouldShowWideInput","$hasFocus","onBlur","displayName"],"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     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    iconColor,\n    maxAmount,\n    onChange,\n    shouldShowWideInput = false,\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={{\n                                width:\n                                    displayState === 'normal' || displayState === 'maxAmount'\n                                        ? 40\n                                        : 28,\n                                opacity: 1,\n                                padding: 0,\n                            }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\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                    $shouldShowWideInput={shouldShowWideInput}\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={{\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={handleAmountAdd}\n                            $isWide={displayState === 'normal' || displayState === 'maxAmount'}\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            shouldShowWideInput,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

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

@@ -27,29 +27,34 @@ export const StyledAmountControlInput = styled.input`
 }};
     border: none;
     height: 28px;
-    width: 90px;
+    width: ${_ref4 => {
+  let {
+    $shouldShowWideInput
+  } = _ref4;
+  return $shouldShowWideInput ? 90 : 55;
+}}px;
     text-align: center;
-    cursor: ${_ref4 => {
+    cursor: ${_ref5 => {
   let {
     $hasFocus
-  } = _ref4;
+  } = _ref5;
   return $hasFocus ? 'text' : 'pointer';
 }};
 
-    ${_ref5 => {
+    ${_ref6 => {
   let {
     $displayState
-  } = _ref5;
+  } = _ref6;
   return $displayState !== 'normal' && css`
             border-bottom-right-radius: 3px;
             border-top-right-radius: 3px;
         `;
 }}
-    ${_ref6 => {
+    ${_ref7 => {
   let {
     $displayState,
     $shouldShowIcon
-  } = _ref6;
+  } = _ref7;
   return $displayState === 'default' && !$shouldShowIcon && css`
             border-bottom-left-radius: 3px;
             border-top-left-radius: 3px;
@@ -58,20 +63,25 @@ export const StyledAmountControlInput = styled.input`
 `;
 export const StyledMotionAmountControlButton = styled(motion.button)`
     overflow: hidden;
-    background-color: ${_ref7 => {
+    background-color: ${_ref8 => {
   let {
     $color
-  } = _ref7;
+  } = _ref8;
   return $color ?? 'rgba(255, 255, 255, 0.2)';
 }};
     transition: background-color 0.2s ease-in-out;
     height: 28px;
-    width: 28px;
+    width: ${_ref9 => {
+  let {
+    $isWide
+  } = _ref9;
+  return $isWide ? 40 : 28;
+}}px;
 
-    ${_ref8 => {
+    ${_ref10 => {
   let {
     $isDisabled
-  } = _ref8;
+  } = _ref10;
   return $isDisabled && css`
             opacity: 0.5;
         `;

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

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","StyledAmountControlInput","input","_ref2","_ref3","text","_ref4","$hasFocus","_ref5","$displayState","_ref6","$shouldShowIcon","StyledMotionAmountControlButton","button","_ref7","$color","_ref8","$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,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAM/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACO,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF,aAAaI,KAAA;EAAA,IAAC;IAAEJ;EAAqC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAACK,IAAI;AAAA,CAAC;AACtE;AACA;AACA;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,MAAM,GAAG,SAAS;AAAA,CAAE;AAClE;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,IAC1Bb,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,MAAMc,KAAA;EAAA,IAAC;IAAED,aAAa;IAAEE;EAAgB,CAAC,GAAAD,KAAA;EAAA,OACjCD,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChBf,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAOD,OAAO,MAAMgB,+BAA+B,GAAGjB,MAAM,CACjDD,MAAM,CAACmB,MACX,CAAkC;AAClC;AACA,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM,IAAI,0BAA0B;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACXrB,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC","ignoreList":[]}
+{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","StyledAmountControlInput","input","_ref2","_ref3","text","_ref4","$shouldShowWideInput","_ref5","$hasFocus","_ref6","$displayState","_ref7","$shouldShowIcon","StyledMotionAmountControlButton","button","_ref8","$color","_ref9","$isWide","_ref10","$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    $shouldShowWideInput: 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: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\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    $isWide?: boolean;\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: ${({ $isWide }) => ($isWide ? 40 : 28)}px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAM/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA,CAAC;AASD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACO,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF,aAAaI,KAAA;EAAA,IAAC;IAAEJ;EAAqC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAACK,IAAI;AAAA,CAAC;AACtE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,EAAE,GAAG,EAAE;AAAA,CAAE;AAC5E;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,MAAM,GAAG,SAAS;AAAA,CAAE;AAClE;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,IAC1Bf,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,MAAMgB,KAAA;EAAA,IAAC;IAAED,aAAa;IAAEE;EAAgB,CAAC,GAAAD,KAAA;EAAA,OACjCD,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChBjB,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAQD,OAAO,MAAMkB,+BAA+B,GAAGnB,MAAM,CACjDD,MAAM,CAACqB,MACX,CAAkC;AAClC;AACA,wBAAwBC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAKC,MAAM,IAAI,0BAA0B;AAAA,CAAC;AAC7E;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,GAAG,EAAE,GAAG,EAAE;AAAA,CAAE;AAClD;AACA,MAAMC,MAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,MAAA;EAAA,OACdC,WAAW,IACXzB,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC","ignoreList":[]}

package/lib/types/components/amount-control/AmountControl.d.ts

@@ -29,6 +29,10 @@ export type AmountControlProps = {
      * Whether the icon should be displayed if no amount is selected
      */
     shouldShowIcon?: boolean;
+    /**
+     * Whether the input should be wider
+     */
+    shouldShowWideInput?: boolean;
 };
 declare const AmountControl: FC<AmountControlProps>;
 export default AmountControl;

package/lib/types/components/amount-control/AmountControl.styles.d.ts

@@ -9,11 +9,13 @@ type StyledAmountControlInputProps = WithTheme<{
     $displayState: DisplayState;
     $shouldShowIcon: boolean;
     $hasFocus: boolean;
+    $shouldShowWideInput: boolean;
 }>;
 export declare const StyledAmountControlInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledAmountControlInputProps>> & string;
 type StyledAmountControlButtonProps = WithTheme<{
     $isDisabled: boolean;
     $color?: string;
+    $isWide?: boolean;
 }>;
 export declare const StyledMotionAmountControlButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     form?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.626",
+    "version": "5.0.0-beta.627",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "cc2ab2f0fb2bf88dd3c2f7b8c39e6567045e4009"
+    "gitHead": "7f528d0e2af9da630168adc8203d16145bc3578a"
 }