npm - @chayns-components/core - Versions diffs - 5.0.0-beta.841 → 5.0.0-beta.845 - Mend

@chayns-components/core 5.0.0-beta.841 → 5.0.0-beta.845

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

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

@@ -21,11 +21,13 @@ const AmountControl = ({
   maxAmount,
   minAmount = 0,
   onChange,
-  shouldShowWideInput = false
+  shouldShowWideInput = false,
+  step: stepProp = 1
 }) => {
   const [amountValue, setAmountValue] = (0, _react.useState)(minAmount);
   const [inputValue, setInputValue] = (0, _react.useState)(minAmount.toString());
   const [displayState, setDisplayState] = (0, _react.useState)('default');
+  const step = (0, _react.useMemo)(() => Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1, [stepProp]);
   const inputRef = (0, _react.useRef)(null);
   /**
@@ -68,37 +70,53 @@ const AmountControl = ({
   }, [amount, maxAmount, minAmount]);
   const handleAmountAdd = (0, _react.useCallback)(() => {
     setAmountValue(prevState => {
-      const newAmount = prevState + 1;
+      const newAmount = (0, _amountControl.checkForValidAmount)({
+        amount: prevState + step,
+        minAmount,
+        maxAmount
+      });
       if (typeof onChange === 'function') {
         onChange(newAmount);
       }
-      return newAmount;
+      return typeof amount === 'number' ? prevState : newAmount;
     });
-    setInputValue(prevState => (Number(prevState) + 1).toString());
-  }, [onChange]);
+    setInputValue(prevState => (0, _amountControl.checkForValidAmount)({
+      amount: Number(prevState) + step,
+      minAmount,
+      maxAmount
+    }).toString());
+  }, [amount, maxAmount, minAmount, onChange, step]);
   const handleAmountRemove = (0, _react.useCallback)(() => {
     if (displayState === 'default') {
       return;
     }
     setAmountValue(prevState => {
-      const newAmount = prevState - 1;
+      const newAmount = (0, _amountControl.checkForValidAmount)({
+        amount: prevState - step,
+        minAmount,
+        maxAmount
+      });
       if (typeof onChange === 'function') {
         onChange(newAmount);
       }
       return newAmount;
     });
-    setInputValue(prevState => (Number(prevState) - 1).toString());
-  }, [displayState, onChange]);
+    setInputValue(prevState => (0, _amountControl.checkForValidAmount)({
+      amount: Number(prevState) - step,
+      minAmount,
+      maxAmount
+    }).toString());
+  }, [displayState, maxAmount, minAmount, onChange, step]);
   const handleFirstAmount = (0, _react.useCallback)(() => {
     if (amountValue !== minAmount) {
       return;
     }
     if (typeof onChange === 'function') {
-      onChange(minAmount + 1);
+      onChange(minAmount + step);
     }
-    setAmountValue(minAmount + 1);
-    setInputValue((minAmount + 1).toString());
-  }, [amountValue, minAmount, onChange]);
+    setAmountValue(minAmount + step);
+    setInputValue((minAmount + step).toString());
+  }, [amountValue, minAmount, onChange, step]);
   const handleDeleteIconClick = (0, _react.useCallback)(() => {
     if (inputValue === '0') {
       window.setTimeout(() => {
@@ -110,30 +128,31 @@ const AmountControl = ({
     }
   }, [handleAmountRemove, inputValue]);
   const handleInputBlur = (0, _react.useCallback)(() => {
-    setAmountValue(inputValue === '' ? minAmount : Number(inputValue));
+    const checkedValue = (0, _amountControl.checkForValidAmount)({
+      minAmount,
+      maxAmount,
+      amount: Math.round(Number(inputValue) / step) * step
+    });
+    setAmountValue(checkedValue);
+    setInputValue(checkedValue.toString());
     if (typeof onChange === 'function') {
-      onChange(inputValue === '' ? minAmount : Number(inputValue));
+      onChange(checkedValue);
     }
     if (inputValue === '') {
       setInputValue(minAmount.toString());
     }
-  }, [inputValue, minAmount, onChange]);
+  }, [inputValue, maxAmount, minAmount, onChange, step]);
   const handleInputChange = (0, _react.useCallback)(event => {
     const {
       value
     } = event.target;
-    const valueBeforeCheck = Number(value.replace(/\D/g, ''));
-    const checkedValue = (0, _amountControl.checkForValidAmount)({
-      minAmount,
-      maxAmount,
-      amount: valueBeforeCheck
-    });
-    if (valueBeforeCheck < minAmount && minAmount === 0) {
+    const valueBefore = Number(value.replace(/\D/g, ''));
+    if (valueBefore < minAmount && minAmount === 0) {
       setInputValue('0');
       return;
     }
-    setInputValue(checkedValue === 0 ? '' : checkedValue.toString());
-  }, [maxAmount, minAmount]);
+    setInputValue(valueBefore === 0 ? '' : valueBefore.toString());
+  }, [minAmount]);
   const leftIcon = (0, _react.useMemo)(() => {
     let item = null;
     switch (displayState) {
@@ -249,7 +268,7 @@ const AmountControl = ({
     icons: ['fa fa-plus'],
     size: 15,
     color: "green"
-  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
+  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, minAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
 };
 AmountControl.displayName = 'AmountControl';
 var _default = exports.default = AmountControl;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_amountControl","_Icon","_interopRequireDefault","_AmountControl","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AmountControl","amount","icon","shouldShowIcon","label","iconColor","maxAmount","minAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","useState","inputValue","setInputValue","toString","displayState","setDisplayState","inputRef","useRef","useEffect","hasFocus","useMemo","checkForValidAmount","handleAmountAdd","useCallback","prevState","newAmount","Number","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","_inputRef$current","current","focus","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","StyledAmountControlPseudoInput","$shouldShowWideInput","StyledAmountControlInput","ref","$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 useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\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 The minimum allowed amount.\n /\n minAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the 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 minAmount = 0,\n onChange,\n shouldShowWideInput = false,\n}) => {\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const inputRef = useRef<HTMLInputElement>(null);\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 > minAmount:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount]);\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 const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = prevState + 1;\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n }, [onChange]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = prevState - 1;\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n }, [displayState, onChange]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + 1);\n }\n\n setAmountValue(minAmount + 1);\n setInputValue((minAmount + 1).toString());\n }, [amountValue, minAmount, onChange]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? minAmount : Number(inputValue));\n\n if (typeof onChange === 'function') {\n onChange(inputValue === '' ? minAmount : Number(inputValue));\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, minAmount, onChange]);\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 {displayState === 'delete' \|\| inputValue === '0' ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n >\n {displayState === 'default' && label ? label : inputValue}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n />\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 handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\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":[]}
1	+ {"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_amountControl","_Icon","_interopRequireDefault","_AmountControl","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AmountControl","amount","icon","shouldShowIcon","label","iconColor","maxAmount","minAmount","onChange","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","useState","inputValue","setInputValue","toString","displayState","setDisplayState","useMemo","Number","isSafeInteger","inputRef","useRef","useEffect","hasFocus","checkForValidAmount","handleAmountAdd","useCallback","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","_inputRef$current","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","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","StyledAmountControlPseudoInput","$shouldShowWideInput","StyledAmountControlInput","ref","$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 useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\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 The minimum allowed amount.\n /\n minAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n /\n Whether the input should be wider\n /\n shouldShowWideInput?: boolean;\n /\n Defines the amount that will change when adjusted\n /\n step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n shouldShowIcon = true,\n label,\n iconColor,\n maxAmount,\n minAmount = 0,\n onChange,\n shouldShowWideInput = false,\n step: stepProp = 1,\n}) => {\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const step = useMemo(\n () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n [stepProp],\n );\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > minAmount:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount]);\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 const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState + step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return typeof amount === 'number' ? prevState : newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) + step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [amount, maxAmount, minAmount, onChange, step]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState - step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) - step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [displayState, maxAmount, minAmount, onChange, step]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + step);\n }\n\n setAmountValue(minAmount + step);\n setInputValue((minAmount + step).toString());\n }, [amountValue, minAmount, onChange, step]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Math.round(Number(inputValue) / step) step,\n });\n\n setAmountValue(checkedValue);\n setInputValue(checkedValue.toString());\n\n if (typeof onChange === 'function') {\n onChange(checkedValue);\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBefore = Number(value.replace(/\\D/g, ''));\n\n if (valueBefore < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n },\n [minAmount],\n );\n\n 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 {displayState === 'delete' \|\| inputValue === '0' ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n >\n {displayState === 'default' && label ? label : inputValue}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n />\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 handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n hasFocus,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n minAmount,\n shouldShowIcon,\n shouldShowLeftIcon,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAUA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,cAAA,GAAAN,OAAA;AAKgC,SAAAK,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,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,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AA+ChC,MAAMW,aAAqC,GAAGA,CAAC;EAC3CC,MAAM;EACNC,IAAI;EACJC,cAAc,GAAG,IAAI;EACrBC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,SAAS,GAAG,CAAC;EACbC,QAAQ;EACRC,mBAAmB,GAAG,KAAK;EAC3BC,IAAI,EAAEC,QAAQ,GAAG;AACrB,CAAC,KAAK;EACF,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAACP,SAAS,CAAC;EACzD,MAAM,CAACQ,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAF,eAAQ,EAACP,SAAS,CAACU,QAAQ,CAAC,CAAC,CAAC;EAClE,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAL,eAAQ,EAAe,SAAS,CAAC;EAEzE,MAAMJ,IAAI,GAAG,IAAAU,cAAO,EAChB,MAAOC,MAAM,CAACC,aAAa,CAACX,QAAQ,CAAC,IAAIA,QAAQ,IAAI,CAAC,GAAGA,QAAQ,GAAG,CAAE,EACtE,CAACA,QAAQ,CACb,CAAC;EAED,MAAMY,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;;EAE/C;AACJ;AACA;EACI,IAAAC,gBAAS,EAAC,MAAM;IACZ,QAAQ,IAAI;MACR,KAAKnB,SAAS,KAAK,CAAC,IAAIM,WAAW,KAAK,CAAC;QACrCO,eAAe,CAAC,QAAQ,CAAC;QACzB;MACJ,KAAKb,SAAS,IAAIM,WAAW,IAAIN,SAAS;QACtCa,eAAe,CAAC,WAAW,CAAC;QAC5B;MACJ,KAAKP,WAAW,GAAGL,SAAS;QACxBY,eAAe,CAAC,QAAQ,CAAC;QACzB;MACJ;QACIA,eAAe,CAAC,SAAS,CAAC;IAClC;EACJ,CAAC,EAAE,CAACP,WAAW,EAAEN,SAAS,EAAEC,SAAS,CAAC,CAAC;EAEvC,MAAMmB,QAAQ,GAAG,IAAAN,cAAO,EAAC,MAAMF,YAAY,KAAK,SAAS,EAAE,CAACA,YAAY,CAAC,CAAC;;EAE1E;AACJ;AACA;EACI,IAAAO,gBAAS,EAAC,MAAM;IACZ,IAAI,CAACxB,MAAM,EAAE;MACT;IACJ;IAEAY,cAAc,CAAC,IAAAc,kCAAmB,EAAC;MAAE1B,MAAM;MAAEK,SAAS;MAAEC;IAAU,CAAC,CAAC,CAAC;IACrES,aAAa,CAAC,IAAAW,kCAAmB,EAAC;MAAE1B,MAAM;MAAEK,SAAS;MAAEC;IAAU,CAAC,CAAC,CAACU,QAAQ,CAAC,CAAC,CAAC;EACnF,CAAC,EAAE,CAAChB,MAAM,EAAEK,SAAS,EAAEC,SAAS,CAAC,CAAC;EAElC,MAAMqB,eAAe,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACtChB,cAAc,CAAEiB,SAAS,IAAK;MAC1B,MAAMC,SAAS,GAAG,IAAAJ,kCAAmB,EAAC;QAClC1B,MAAM,EAAE6B,SAAS,GAAGpB,IAAI;QACxBH,SAAS;QACTD;MACJ,CAAC,CAAC;MAEF,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACuB,SAAS,CAAC;MACvB;MAEA,OAAO,OAAO9B,MAAM,KAAK,QAAQ,GAAG6B,SAAS,GAAGC,SAAS;IAC7D,CAAC,CAAC;IACFf,aAAa,CAAEc,SAAS,IACpB,IAAAH,kCAAmB,EAAC;MAChB1B,MAAM,EAAEoB,MAAM,CAACS,SAAS,CAAC,GAAGpB,IAAI;MAChCH,SAAS;MACTD;IACJ,CAAC,CAAC,CAACW,QAAQ,CAAC,CAChB,CAAC;EACL,CAAC,EAAE,CAAChB,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEE,IAAI,CAAC,CAAC;EAElD,MAAMsB,kBAAkB,GAAG,IAAAH,kBAAW,EAAC,MAAM;IACzC,IAAIX,YAAY,KAAK,SAAS,EAAE;MAC5B;IACJ;IAEAL,cAAc,CAAEiB,SAAS,IAAK;MAC1B,MAAMC,SAAS,GAAG,IAAAJ,kCAAmB,EAAC;QAClC1B,MAAM,EAAE6B,SAAS,GAAGpB,IAAI;QACxBH,SAAS;QACTD;MACJ,CAAC,CAAC;MAEF,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACuB,SAAS,CAAC;MACvB;MAEA,OAAOA,SAAS;IACpB,CAAC,CAAC;IACFf,aAAa,CAAEc,SAAS,IACpB,IAAAH,kCAAmB,EAAC;MAChB1B,MAAM,EAAEoB,MAAM,CAACS,SAAS,CAAC,GAAGpB,IAAI;MAChCH,SAAS;MACTD;IACJ,CAAC,CAAC,CAACW,QAAQ,CAAC,CAChB,CAAC;EACL,CAAC,EAAE,CAACC,YAAY,EAAEZ,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEE,IAAI,CAAC,CAAC;EAExD,MAAMuB,iBAAiB,GAAG,IAAAJ,kBAAW,EAAC,MAAM;IACxC,IAAIjB,WAAW,KAAKL,SAAS,EAAE;MAC3B;IACJ;IAEA,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACD,SAAS,GAAGG,IAAI,CAAC;IAC9B;IAEAG,cAAc,CAACN,SAAS,GAAGG,IAAI,CAAC;IAChCM,aAAa,CAAC,CAACT,SAAS,GAAGG,IAAI,EAAEO,QAAQ,CAAC,CAAC,CAAC;EAChD,CAAC,EAAE,CAACL,WAAW,EAAEL,SAAS,EAAEC,QAAQ,EAAEE,IAAI,CAAC,CAAC;EAE5C,MAAMwB,qBAAqB,GAAG,IAAAL,kBAAW,EAAC,MAAM;IAC5C,IAAId,UAAU,KAAK,GAAG,EAAE;MACpBoB,MAAM,CAACC,UAAU,CAAC,MAAM;QAAA,IAAAC,iBAAA;QACpB,CAAAA,iBAAA,GAAAd,QAAQ,CAACe,OAAO,cAAAD,iBAAA,eAAhBA,iBAAA,CAAkBE,KAAK,CAAC,CAAC;MAC7B,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,MAAM;MACHP,kBAAkB,CAAC,CAAC;IACxB;EACJ,CAAC,EAAE,CAACA,kBAAkB,EAAEjB,UAAU,CAAC,CAAC;EAEpC,MAAMyB,eAAe,GAAG,IAAAX,kBAAW,EAAC,MAAM;IACtC,MAAMY,YAAY,GAAG,IAAAd,kCAAmB,EAAC;MACrCpB,SAAS;MACTD,SAAS;MACTL,MAAM,EAAEyC,IAAI,CAACC,KAAK,CAACtB,MAAM,CAACN,UAAU,CAAC,GAAGL,IAAI,CAAC,GAAGA;IACpD,CAAC,CAAC;IAEFG,cAAc,CAAC4B,YAAY,CAAC;IAC5BzB,aAAa,CAACyB,YAAY,CAACxB,QAAQ,CAAC,CAAC,CAAC;IAEtC,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACiC,YAAY,CAAC;IAC1B;IAEA,IAAI1B,UAAU,KAAK,EAAE,EAAE;MACnBC,aAAa,CAACT,SAAS,CAACU,QAAQ,CAAC,CAAC,CAAC;IACvC;EACJ,CAAC,EAAE,CAACF,UAAU,EAAET,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEE,IAAI,CAAC,CAAC;EAEtD,MAAMkC,iBAAiB,GAAG,IAAAf,kBAAW,EAChCgB,KAAoC,IAAK;IACtC,MAAM;MAAEC;IAAM,CAAC,GAAGD,KAAK,CAACE,MAAM;IAE9B,MAAMC,WAAW,GAAG3B,MAAM,CAACyB,KAAK,CAACG,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAEpD,IAAID,WAAW,GAAGzC,SAAS,IAAIA,SAAS,KAAK,CAAC,EAAE;MAC5CS,aAAa,CAAC,GAAG,CAAC;MAElB;IACJ;IAEAA,aAAa,CAACgC,WAAW,KAAK,CAAC,GAAG,EAAE,GAAGA,WAAW,CAAC/B,QAAQ,CAAC,CAAC,CAAC;EAClE,CAAC,EACD,CAACV,SAAS,CACd,CAAC;EAED,MAAM2C,QAAQ,GAAG,IAAA9B,cAAO,EAAC,MAAM;IAC3B,IAAI+B,IAAyB,GAAG,IAAI;IAEpC,QAAQjC,YAAY;MAChB,KAAK,SAAS;QACViC,IAAI,gBAAG7E,MAAA,CAAAQ,OAAA,CAAAsE,aAAA,CAAC3E,KAAA,CAAAK,OAAI;UAACuE,KAAK,EAAE,CAACnD,IAAI,IAAI,qBAAqB,CAAE;UAACoD,IAAI,EAAE,EAAG;UAACC,KAAK,EAAElD;QAAU,CAAE,CAAC;QACnF;MACJ,KAAK,QAAQ;QACT8C,IAAI,gBAAG7E,MAAA,CAAAQ,OAAA,CAAAsE,aAAA,CAAC3E,KAAA,CAAAK,OAAI;UAACuE,KAAK,EAAE,CAAC,aAAa,CAAE;UAACC,IAAI,EAAE,EAAG;UAACC,KAAK,EAAC;QAAO,CAAE,CAAC;QAC/D;MACJ,KAAK,QAAQ;QACTJ,IAAI,gBAAG7E,MAAA,CAAAQ,OAAA,CAAAsE,aAAA,CAAC3E,KAAA,CAAAK,OAAI;UAACuE,KAAK,EAAE,CAAC,aAAa,CAAE;UAACC,IAAI,EAAE,EAAG;UAACC,KAAK,EAAC;QAAK,CAAE,CAAC;QAC7D;MACJ,KAAK,WAAW;QACZJ,IAAI,gBAAG7E,MAAA,CAAAQ,OAAA,CAAAsE,aAAA,CAAC3E,KAAA,CAAAK,OAAI;UAACuE,KAAK,EAAE,CAAC,aAAa,CAAE;UAACC,IAAI,EAAE,EAAG;UAACC,KAAK,EAAC;QAAK,CAAE,CAAC;QAC7D;MACJ;QACI;IACR;IAEA,OAAOJ,IAAI;EACf,CAAC,EAAE,CAACjC,YAAY,EAAEhB,IAAI,EAAEG,SAAS,CAAC,CAAC;EAEnC,MAAMmD,kBAAkB,GAAG,IAAApC,cAAO,EAAC,MAAM;IACrC,IAAIjB,cAAc,EAAE;MAChB,OAAO,IAAI;IACf;IAEA,OAAO,EAAEe,YAAY,KAAK,SAAS,IAAI,CAACf,cAAc,CAAC;EAC3D,CAAC,EAAE,CAACe,YAAY,EAAEf,cAAc,CAAC,CAAC;EAElC,OAAO,IAAAiB,cAAO,EACV,mBACI9C,MAAA,CAAAQ,OAAA,CAAAsE,aAAA,CAACzE,cAAA,CAAA8E,mBAAmB;IAACC,OAAO,EAAEzB;EAAkB,gBAC5C3D,MAAA,CAAAQ,OAAA,CAAAsE,aAAA,CAAChF,aAAA,CAAAuF,eAAe;IAACC,OAAO,EAAE;EAAM,GAC3BJ,kBAAkB,iBACflF,MAAA,CAAAQ,OAAA,CAAAsE,aAAA,CAACzE,cAAA,CAAAkF,+BAA+B;IAC5BC,GAAG,EAAC,cAAc;IAClBF,OAAO,EAAE;MAAEG,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EACD7C,YAAY,KAAK,QAAQ,IAAIA,YAAY,KAAK,WAAW,GACnD,EAAE,GACF,EAAE;MACZ8C,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CG,OAAO,EAAElD,YAAY,KAAK,QAAQ,IAAIA,YAAY,KAAK,WAAY;IACnEmD,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7Cb,OAAO,EAAE1B,kBAAmB;IAC5BwC,MAAM,EAAEtD,YAAY,KAAK,QAAQ,GAAG,kBAAkB,GAAGuD,SAAU;IACnEC,QAAQ,EAAE9D,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIL,SAAU;IACxDoE,WAAW,EAAE/D,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIL;EAAU,GAE1D2C,QAC4B,CAExB,CAAC,EACjBhC,YAAY,KAAK,QAAQ,IAAIH,UAAU,KAAK,GAAG,gBAC5CzC,MAAA,CAAAQ,OAAA,CAAAsE,aAAA,CAACzE,cAAA,CAAAiG,8BAA8B;IAC3BlB,OAAO,EAAExB,qBAAsB;IAC/B2C,oBAAoB,EAAEpE;EAAoB,GAEzCS,YAAY,KAAK,SAAS,IAAId,KAAK,GAAGA,KAAK,GAAGW,UACnB,CAAC,gBAEjCzC,MAAA,CAAAQ,OAAA,CAAAsE,aAAA,CAACzE,cAAA,CAAAmG,wBAAwB;IACrBC,GAAG,EAAExD,QAAS;IACdyD,aAAa,EAAE9D,YAAa;IAC5B+D,eAAe,EAAE9E,cAAe;IAChC0E,oBAAoB,EAAEpE,mBAAoB;IAC1CyE,SAAS,EAAExD,QAAS;IACpByD,MAAM,EAAE3C,eAAgB;IACxBhC,QAAQ,EAAEoC,iBAAkB;IAC5BE,KAAK,EAAE5B,YAAY,KAAK,SAAS,IAAId,KAAK,GAAGA,KAAK,GAAGW;EAAW,CACnE,CACJ,eACDzC,MAAA,CAAAQ,OAAA,CAAAsE,aAAA,CAAChF,aAAA,CAAAuF,eAAe;IAACC,OAAO,EAAE;EAAM,GAC3B1C,YAAY,KAAK,QAAQ,iBACtB5C,MAAA,CAAAQ,OAAA,CAAAsE,aAAA,CAACzE,cAAA,CAAAkF,+BAA+B;IAC5BC,GAAG,EAAC,cAAc;IAClBF,OAAO,EAAE;MAAEG,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CI,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7Cb,OAAO,EAAE9B,eAAgB;IACzBwC,OAAO,EAAElD,YAAY,KAAK,QAAQ,IAAIA,YAAY,KAAK,WAAY;IACnEwD,QAAQ,EAAEpE,SAAS,GAAGM,WAAW,IAAIN,SAAS,GAAG,KAAM;IACvDqE,WAAW,EAAErE,SAAS,GAAGM,WAAW,IAAIN,SAAS,GAAG;EAAM,gBAE1DhC,MAAA,CAAAQ,OAAA,CAAAsE,aAAA,CAAC3E,KAAA,CAAAK,OAAI;IAACuE,KAAK,EAAE,CAAC,YAAY,CAAE;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAC;EAAO,CAAE,CACzB,CAExB,CACA,CACxB,EACD,CACI3C,WAAW,EACXM,YAAY,EACZU,eAAe,EACfI,kBAAkB,EAClBE,qBAAqB,EACrBD,iBAAiB,EACjBO,eAAe,EACfI,iBAAiB,EACjBlB,QAAQ,EACRX,UAAU,EACVX,KAAK,EACL8C,QAAQ,EACR5C,SAAS,EACTC,SAAS,EACTJ,cAAc,EACdqD,kBAAkB,EAClB/C,mBAAmB,CAE3B,CAAC;AACL,CAAC;AAEDT,aAAa,CAACoF,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAxG,OAAA,GAE7BkB,aAAa","ignoreList":[]}

package/lib/cjs/components/icon/Icon.js CHANGED Viewed

@@ -57,9 +57,15 @@ const Icon = ({
     $size: size
   }, icons.map(icon => {
     const stackSizeFactor = (0, _icon.getStackSizeFactor)(icon);
-    const isIconStyleGiven = /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
-    const iconStyle = isIconStyleGiven ? undefined : (theme === null || theme === void 0 ? void 0 : theme.iconStyle) ?? 'fa-regular';
-    const iconClasses = (0, _clsx.default)(iconStyle, icon, {
+    // const isIconStyleGiven =
+    //     /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
+    //
+    // const iconStyle = isIconStyleGiven
+    //     ? undefined
+    //     : (theme?.iconStyle as string) ?? 'fa-regular';
+    const iconClasses = (0, _clsx.default)(icon, {
       'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
     });
     return /*#__PURE__*/_react.default.createElement(_Icon.StyledIcon, {

package/lib/cjs/components/icon/Icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_styledComponents","_icon","_Icon","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","useTheme","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","$size","map","~~isIconStyleGiven","test","iconStyle","~~iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","key","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { useTheme } from 'styled-components';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /*\n Additional class names for the root element\n /\n className?: string;\n /\n The color of the icon\n /\n color?: string;\n /\n The FontAwesome or tobit icons to render. Multiple icons are stacked.\n /\n icons: string[];\n /\n Disables the icon so that it cannot be clicked anymore\n /\n isDisabled?: boolean;\n /\n Function to be executed when the icon was clicked\n /\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when the icon was double-clicked\n /\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when a mouse button is pressed on the icon\n /\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /\n Size of the icon in pixel\n /\n size?: number;\n /\n Stops event propagation on click\n /\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n const theme = useTheme();\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className,\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n $isDisabled={isDisabled}\n onClick={typeof onClick === 'function' ? handleClick : undefined}\n $isOnClick={typeof onClick === 'function'}\n onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n onMouseDown={onMouseDown}\n $size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n const isIconStyleGiven =\n /fa[srltd]\|fa-(?:regular\|solid\|thin\|light\|duotone\|sharp)/.test(icon);\n\n const iconStyle = isIconStyleGiven\n ? undefined\n : (theme?.iconStyle as string) ?? 'fa-regular';\n\n const iconClasses = clsx(~~iconStyle,~~ icon, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n $color={icon.includes('fa-inverse') ? 'white' : color}\n $fontSize={((stackSizeFactor \|\| 1) / maxStackSizeFactor) size}\n $isStacked={shouldUseStackedIcon}\n key={icon}\n $size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAA8D,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAyC9D,MAAMG,IAAmB,GAAGA,CAAC;EACzBC,SAAS;EACTC,KAAK;EACLC,KAAK;EACLC,UAAU;EACVC,OAAO;EACPC,aAAa;EACbC,WAAW;EACXC,IAAI,GAAG,EAAE;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAOP,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACM,KAAK,CAAC;IAClB;EACJ,CAAC;EAED,MAAME,iBAAqD,GAAIF,KAAK,IAAK;IACrE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,MAAMG,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAC;EAExB,IAAIC,kBAAkB,GAAG,CAAC;EAE1Bb,KAAK,CAACc,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAG,IAAAC,wBAAkB,EAACF,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAME,oBAAoB,GAAGlB,KAAK,CAACmB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG,IAAAC,aAAI,EACvB,kBAAkB,EAClBH,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtCpB,SACJ,CAAC;EAED,oBACIR,MAAA,CAAAM,OAAA,CAAA0B,aAAA,CAAC7B,KAAA,CAAA8B,iBAAiB;IACdzB,SAAS,EAAEsB,cAAe;IAC1BI,WAAW,EAAEvB,UAAW;IACxBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,GAAGK,WAAW,GAAGkB,SAAU;IACjEC,UAAU,EAAE,OAAOxB,OAAO,KAAK,UAAW;IAC1CC,aAAa,EAAE,OAAOA,aAAa,KAAK,UAAU,GAAGO,iBAAiB,GAAGe,SAAU;IACnFrB,WAAW,EAAEA,WAAY;IACzBuB,KAAK,EAAEtB;EAAK,GAEXL,KAAK,CAAC4B,GAAG,CAAEb,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAG,IAAAC,wBAAkB,EAACF,IAAI,CAAC;IAEhD~~,MAAMc,gBAAgB,GAClB,yDAAyD,CAACC,IAAI,CAACf,IAAI,CAAC~~;~~IAExE,MAAMgB,SAAS,GAAGF,gBAAgB,GAC5BJ,SAAS,GACT,CAACd,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEoB,SAAS,KAAe,YAAY~~;~~IAElD~~,~~MAAMC~~,WAAW,GAAG,~~IAAAX~~,aAAI,~~EAACU~~,~~SAAS,EAAEhB,~~IAAI,EAAE;~~MACtC~~,aAAa,EAAEG,oBAAoB,IAAIF,eAAe,KAAKS;IAC/D,CAAC,CAAC;IAEF,oBACInC,MAAA,CAAAM,OAAA,CAAA0B,aAAA,CAAC7B,KAAA,~~CAAAwC~~,UAAU;~~MACPnC~~,SAAS,~~EAAEkC~~,WAAY;MACvBE,MAAM,~~EAAEnB~~,IAAI,~~CAACoB~~,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,~~GAAGpC~~,KAAM;~~MACtDqC~~,SAAS,EAAG,~~CAACpB~~,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIR,IAAK;~~MAChEgC~~,UAAU,~~EAAEnB~~,oBAAqB;~~MACjCoB~~,GAAG,~~EAAEvB~~,IAAK;MACVY,KAAK,EAAEtB;IAAK,CACf,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDR,IAAI,~~CAAC0C~~,WAAW,GAAG,MAAM;AAAC,IAAAC,QAAA,GAAAC,OAAA,~~CAAA7C~~,OAAA,GAEXC,IAAI","ignoreList":[]}
1	+ {"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_styledComponents","_icon","_Icon","e","__esModule","default","Icon","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","useTheme","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","$isDisabled","undefined","$isOnClick","$size","map","iconClasses","StyledIcon","$color","includes","$fontSize","$isStacked","key","displayName","_default","exports"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { useTheme } from 'styled-components';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /*\n Additional class names for the root element\n /\n className?: string;\n /\n The color of the icon\n /\n color?: string;\n /\n The FontAwesome or tobit icons to render. Multiple icons are stacked.\n /\n icons: string[];\n /\n Disables the icon so that it cannot be clicked anymore\n /\n isDisabled?: boolean;\n /\n Function to be executed when the icon was clicked\n /\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when the icon was double-clicked\n /\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when a mouse button is pressed on the icon\n /\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /\n Size of the icon in pixel\n /\n size?: number;\n /\n Stops event propagation on click\n /\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n const theme = useTheme();\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className,\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n $isDisabled={isDisabled}\n onClick={typeof onClick === 'function' ? handleClick : undefined}\n $isOnClick={typeof onClick === 'function'}\n onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n onMouseDown={onMouseDown}\n $size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n // const isIconStyleGiven =\n // /fa[srltd]\|fa-(?:regular\|solid\|thin\|light\|duotone\|sharp)/.test(icon);\n //\n // const iconStyle = isIconStyleGiven\n // ? undefined\n // : (theme?.iconStyle as string) ?? 'fa-regular';\n\n const iconClasses = clsx(icon, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n $color={icon.includes('fa-inverse') ? 'white' : color}\n $fontSize={((stackSizeFactor \|\| 1) / maxStackSizeFactor) size}\n $isStacked={shouldUseStackedIcon}\n key={icon}\n $size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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","ignoreList":[]}

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

@@ -13,11 +13,13 @@ const AmountControl = _ref => {
     maxAmount,
     minAmount = 0,
     onChange,
-    shouldShowWideInput = false
+    shouldShowWideInput = false,
+    step: stepProp = 1
   } = _ref;
   const [amountValue, setAmountValue] = useState(minAmount);
   const [inputValue, setInputValue] = useState(minAmount.toString());
   const [displayState, setDisplayState] = useState('default');
+  const step = useMemo(() => Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1, [stepProp]);
   const inputRef = useRef(null);
   /**
@@ -60,37 +62,53 @@ const AmountControl = _ref => {
   }, [amount, maxAmount, minAmount]);
   const handleAmountAdd = useCallback(() => {
     setAmountValue(prevState => {
-      const newAmount = prevState + 1;
+      const newAmount = checkForValidAmount({
+        amount: prevState + step,
+        minAmount,
+        maxAmount
+      });
       if (typeof onChange === 'function') {
         onChange(newAmount);
       }
-      return newAmount;
+      return typeof amount === 'number' ? prevState : newAmount;
     });
-    setInputValue(prevState => (Number(prevState) + 1).toString());
-  }, [onChange]);
+    setInputValue(prevState => checkForValidAmount({
+      amount: Number(prevState) + step,
+      minAmount,
+      maxAmount
+    }).toString());
+  }, [amount, maxAmount, minAmount, onChange, step]);
   const handleAmountRemove = useCallback(() => {
     if (displayState === 'default') {
       return;
     }
     setAmountValue(prevState => {
-      const newAmount = prevState - 1;
+      const newAmount = checkForValidAmount({
+        amount: prevState - step,
+        minAmount,
+        maxAmount
+      });
       if (typeof onChange === 'function') {
         onChange(newAmount);
       }
       return newAmount;
     });
-    setInputValue(prevState => (Number(prevState) - 1).toString());
-  }, [displayState, onChange]);
+    setInputValue(prevState => checkForValidAmount({
+      amount: Number(prevState) - step,
+      minAmount,
+      maxAmount
+    }).toString());
+  }, [displayState, maxAmount, minAmount, onChange, step]);
   const handleFirstAmount = useCallback(() => {
     if (amountValue !== minAmount) {
       return;
     }
     if (typeof onChange === 'function') {
-      onChange(minAmount + 1);
+      onChange(minAmount + step);
     }
-    setAmountValue(minAmount + 1);
-    setInputValue((minAmount + 1).toString());
-  }, [amountValue, minAmount, onChange]);
+    setAmountValue(minAmount + step);
+    setInputValue((minAmount + step).toString());
+  }, [amountValue, minAmount, onChange, step]);
   const handleDeleteIconClick = useCallback(() => {
     if (inputValue === '0') {
       window.setTimeout(() => {
@@ -101,30 +119,31 @@ const AmountControl = _ref => {
     }
   }, [handleAmountRemove, inputValue]);
   const handleInputBlur = useCallback(() => {
-    setAmountValue(inputValue === '' ? minAmount : Number(inputValue));
+    const checkedValue = checkForValidAmount({
+      minAmount,
+      maxAmount,
+      amount: Math.round(Number(inputValue) / step) * step
+    });
+    setAmountValue(checkedValue);
+    setInputValue(checkedValue.toString());
     if (typeof onChange === 'function') {
-      onChange(inputValue === '' ? minAmount : Number(inputValue));
+      onChange(checkedValue);
     }
     if (inputValue === '') {
       setInputValue(minAmount.toString());
     }
-  }, [inputValue, minAmount, onChange]);
+  }, [inputValue, maxAmount, minAmount, onChange, step]);
   const handleInputChange = useCallback(event => {
     const {
       value
     } = event.target;
-    const valueBeforeCheck = Number(value.replace(/\D/g, ''));
-    const checkedValue = checkForValidAmount({
-      minAmount,
-      maxAmount,
-      amount: valueBeforeCheck
-    });
-    if (valueBeforeCheck < minAmount && minAmount === 0) {
+    const valueBefore = Number(value.replace(/\D/g, ''));
+    if (valueBefore < minAmount && minAmount === 0) {
       setInputValue('0');
       return;
     }
-    setInputValue(checkedValue === 0 ? '' : checkedValue.toString());
-  }, [maxAmount, minAmount]);
+    setInputValue(valueBefore === 0 ? '' : valueBefore.toString());
+  }, [minAmount]);
   const leftIcon = useMemo(() => {
     let item = null;
     switch (displayState) {
@@ -240,7 +259,7 @@ const AmountControl = _ref => {
     icons: ['fa fa-plus'],
     size: 15,
     color: "green"
-  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
+  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, label, leftIcon, maxAmount, minAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
 };
 AmountControl.displayName = 'AmountControl';
 export default AmountControl;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","iconColor","maxAmount","minAmount","onChange","shouldShowWideInput","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","Number","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","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","$shouldShowWideInput","ref","$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 useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\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 The minimum allowed amount.\n /\n minAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the 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 minAmount = 0,\n onChange,\n shouldShowWideInput = false,\n}) => {\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const inputRef = useRef<HTMLInputElement>(null);\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 > minAmount:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount]);\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 const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = prevState + 1;\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) => (Number(prevState) + 1).toString());\n }, [onChange]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = prevState - 1;\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) => (Number(prevState) - 1).toString());\n }, [displayState, onChange]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + 1);\n }\n\n setAmountValue(minAmount + 1);\n setInputValue((minAmount + 1).toString());\n }, [amountValue, minAmount, onChange]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n setAmountValue(inputValue === '' ? minAmount : Number(inputValue));\n\n if (typeof onChange === 'function') {\n onChange(inputValue === '' ? minAmount : Number(inputValue));\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, minAmount, onChange]);\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 {displayState === 'delete' \|\| inputValue === '0' ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n >\n {displayState === 'default' && label ? label : inputValue}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n />\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 handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\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":[]}
1	+ {"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","iconColor","maxAmount","minAmount","onChange","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$isDisabled","$shouldShowWideInput","ref","$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 useRef,\n useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n StyledAmountControl,\n StyledAmountControlInput,\n StyledAmountControlPseudoInput,\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 The minimum allowed amount.\n /\n minAmount?: number;\n /\n A Function that is executed when the amount is changed\n /\n onChange?: (amount: number) => void;\n /\n Whether the icon should be displayed if no amount is selected\n /\n shouldShowIcon?: boolean;\n /\n Whether the input should be wider\n /\n shouldShowWideInput?: boolean;\n /\n Defines the amount that will change when adjusted\n /\n step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n amount,\n icon,\n shouldShowIcon = true,\n label,\n iconColor,\n maxAmount,\n minAmount = 0,\n onChange,\n shouldShowWideInput = false,\n step: stepProp = 1,\n}) => {\n const [amountValue, setAmountValue] = useState(minAmount);\n const [inputValue, setInputValue] = useState(minAmount.toString());\n const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n const step = useMemo(\n () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n [stepProp],\n );\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n /\n This function controls the displayState\n /\n useEffect(() => {\n switch (true) {\n case maxAmount === 1 && amountValue === 1:\n setDisplayState('delete');\n return;\n case maxAmount && amountValue >= maxAmount:\n setDisplayState('maxAmount');\n return;\n case amountValue > minAmount:\n setDisplayState('normal');\n return;\n default:\n setDisplayState('default');\n }\n }, [amountValue, maxAmount, minAmount]);\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 const handleAmountAdd = useCallback(() => {\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState + step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return typeof amount === 'number' ? prevState : newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) + step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [amount, maxAmount, minAmount, onChange, step]);\n\n const handleAmountRemove = useCallback(() => {\n if (displayState === 'default') {\n return;\n }\n\n setAmountValue((prevState) => {\n const newAmount = checkForValidAmount({\n amount: prevState - step,\n minAmount,\n maxAmount,\n });\n\n if (typeof onChange === 'function') {\n onChange(newAmount);\n }\n\n return newAmount;\n });\n setInputValue((prevState) =>\n checkForValidAmount({\n amount: Number(prevState) - step,\n minAmount,\n maxAmount,\n }).toString(),\n );\n }, [displayState, maxAmount, minAmount, onChange, step]);\n\n const handleFirstAmount = useCallback(() => {\n if (amountValue !== minAmount) {\n return;\n }\n\n if (typeof onChange === 'function') {\n onChange(minAmount + step);\n }\n\n setAmountValue(minAmount + step);\n setInputValue((minAmount + step).toString());\n }, [amountValue, minAmount, onChange, step]);\n\n const handleDeleteIconClick = useCallback(() => {\n if (inputValue === '0') {\n window.setTimeout(() => {\n inputRef.current?.focus();\n }, 500);\n } else {\n handleAmountRemove();\n }\n }, [handleAmountRemove, inputValue]);\n\n const handleInputBlur = useCallback(() => {\n const checkedValue = checkForValidAmount({\n minAmount,\n maxAmount,\n amount: Math.round(Number(inputValue) / step) step,\n });\n\n setAmountValue(checkedValue);\n setInputValue(checkedValue.toString());\n\n if (typeof onChange === 'function') {\n onChange(checkedValue);\n }\n\n if (inputValue === '') {\n setInputValue(minAmount.toString());\n }\n }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n const handleInputChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { value } = event.target;\n\n const valueBefore = Number(value.replace(/\\D/g, ''));\n\n if (valueBefore < minAmount && minAmount === 0) {\n setInputValue('0');\n\n return;\n }\n\n setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n },\n [minAmount],\n );\n\n 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 {displayState === 'delete' \|\| inputValue === '0' ? (\n <StyledAmountControlPseudoInput\n onClick={handleDeleteIconClick}\n $shouldShowWideInput={shouldShowWideInput}\n >\n {displayState === 'default' && label ? label : inputValue}\n </StyledAmountControlPseudoInput>\n ) : (\n <StyledAmountControlInput\n ref={inputRef}\n $displayState={displayState}\n $shouldShowIcon={shouldShowIcon}\n $shouldShowWideInput={shouldShowWideInput}\n $hasFocus={hasFocus}\n onBlur={handleInputBlur}\n onChange={handleInputChange}\n value={displayState === 'default' && label ? label : inputValue}\n />\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 handleAmountAdd,\n handleAmountRemove,\n handleDeleteIconClick,\n handleFirstAmount,\n handleInputBlur,\n handleInputChange,\n hasFocus,\n inputValue,\n label,\n leftIcon,\n maxAmount,\n minAmount,\n shouldShowIcon,\n shouldShowLeftIcon,\n shouldShowWideInput,\n ],\n );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAIRC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,mBAAmB,QAAQ,2BAA2B;AAC/D,OAAOC,IAAI,MAAM,cAAc;AAC/B,SACIC,mBAAmB,EACnBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,+BAA+B,QAC5B,wBAAwB;AA+C/B,MAAMC,aAAqC,GAAGC,IAAA,IAWxC;EAAA,IAXyC;IAC3CC,MAAM;IACNC,IAAI;IACJC,cAAc,GAAG,IAAI;IACrBC,KAAK;IACLC,SAAS;IACTC,SAAS;IACTC,SAAS,GAAG,CAAC;IACbC,QAAQ;IACRC,mBAAmB,GAAG,KAAK;IAC3BC,IAAI,EAAEC,QAAQ,GAAG;EACrB,CAAC,GAAAX,IAAA;EACG,MAAM,CAACY,WAAW,EAAEC,cAAc,CAAC,GAAGrB,QAAQ,CAACe,SAAS,CAAC;EACzD,MAAM,CAACO,UAAU,EAAEC,aAAa,CAAC,GAAGvB,QAAQ,CAACe,SAAS,CAACS,QAAQ,CAAC,CAAC,CAAC;EAClE,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG1B,QAAQ,CAAe,SAAS,CAAC;EAEzE,MAAMkB,IAAI,GAAGpB,OAAO,CAChB,MAAO6B,MAAM,CAACC,aAAa,CAACT,QAAQ,CAAC,IAAIA,QAAQ,IAAI,CAAC,GAAGA,QAAQ,GAAG,CAAE,EACtE,CAACA,QAAQ,CACb,CAAC;EAED,MAAMU,QAAQ,GAAG9B,MAAM,CAAmB,IAAI,CAAC;;EAE/C;AACJ;AACA;EACIF,SAAS,CAAC,MAAM;IACZ,QAAQ,IAAI;MACR,KAAKiB,SAAS,KAAK,CAAC,IAAIM,WAAW,KAAK,CAAC;QACrCM,eAAe,CAAC,QAAQ,CAAC;QACzB;MACJ,KAAKZ,SAAS,IAAIM,WAAW,IAAIN,SAAS;QACtCY,eAAe,CAAC,WAAW,CAAC;QAC5B;MACJ,KAAKN,WAAW,GAAGL,SAAS;QACxBW,eAAe,CAAC,QAAQ,CAAC;QACzB;MACJ;QACIA,eAAe,CAAC,SAAS,CAAC;IAClC;EACJ,CAAC,EAAE,CAACN,WAAW,EAAEN,SAAS,EAAEC,SAAS,CAAC,CAAC;EAEvC,MAAMe,QAAQ,GAAGhC,OAAO,CAAC,MAAM2B,YAAY,KAAK,SAAS,EAAE,CAACA,YAAY,CAAC,CAAC;;EAE1E;AACJ;AACA;EACI5B,SAAS,CAAC,MAAM;IACZ,IAAI,CAACY,MAAM,EAAE;MACT;IACJ;IAEAY,cAAc,CAACpB,mBAAmB,CAAC;MAAEQ,MAAM;MAAEK,SAAS;MAAEC;IAAU,CAAC,CAAC,CAAC;IACrEQ,aAAa,CAACtB,mBAAmB,CAAC;MAAEQ,MAAM;MAAEK,SAAS;MAAEC;IAAU,CAAC,CAAC,CAACS,QAAQ,CAAC,CAAC,CAAC;EACnF,CAAC,EAAE,CAACf,MAAM,EAAEK,SAAS,EAAEC,SAAS,CAAC,CAAC;EAElC,MAAMgB,eAAe,GAAGnC,WAAW,CAAC,MAAM;IACtCyB,cAAc,CAAEW,SAAS,IAAK;MAC1B,MAAMC,SAAS,GAAGhC,mBAAmB,CAAC;QAClCQ,MAAM,EAAEuB,SAAS,GAAGd,IAAI;QACxBH,SAAS;QACTD;MACJ,CAAC,CAAC;MAEF,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACiB,SAAS,CAAC;MACvB;MAEA,OAAO,OAAOxB,MAAM,KAAK,QAAQ,GAAGuB,SAAS,GAAGC,SAAS;IAC7D,CAAC,CAAC;IACFV,aAAa,CAAES,SAAS,IACpB/B,mBAAmB,CAAC;MAChBQ,MAAM,EAAEkB,MAAM,CAACK,SAAS,CAAC,GAAGd,IAAI;MAChCH,SAAS;MACTD;IACJ,CAAC,CAAC,CAACU,QAAQ,CAAC,CAChB,CAAC;EACL,CAAC,EAAE,CAACf,MAAM,EAAEK,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEE,IAAI,CAAC,CAAC;EAElD,MAAMgB,kBAAkB,GAAGtC,WAAW,CAAC,MAAM;IACzC,IAAI6B,YAAY,KAAK,SAAS,EAAE;MAC5B;IACJ;IAEAJ,cAAc,CAAEW,SAAS,IAAK;MAC1B,MAAMC,SAAS,GAAGhC,mBAAmB,CAAC;QAClCQ,MAAM,EAAEuB,SAAS,GAAGd,IAAI;QACxBH,SAAS;QACTD;MACJ,CAAC,CAAC;MAEF,IAAI,OAAOE,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAACiB,SAAS,CAAC;MACvB;MAEA,OAAOA,SAAS;IACpB,CAAC,CAAC;IACFV,aAAa,CAAES,SAAS,IACpB/B,mBAAmB,CAAC;MAChBQ,MAAM,EAAEkB,MAAM,CAACK,SAAS,CAAC,GAAGd,IAAI;MAChCH,SAAS;MACTD;IACJ,CAAC,CAAC,CAACU,QAAQ,CAAC,CAChB,CAAC;EACL,CAAC,EAAE,CAACC,YAAY,EAAEX,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEE,IAAI,CAAC,CAAC;EAExD,MAAMiB,iBAAiB,GAAGvC,WAAW,CAAC,MAAM;IACxC,IAAIwB,WAAW,KAAKL,SAAS,EAAE;MAC3B;IACJ;IAEA,IAAI,OAAOC,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACD,SAAS,GAAGG,IAAI,CAAC;IAC9B;IAEAG,cAAc,CAACN,SAAS,GAAGG,IAAI,CAAC;IAChCK,aAAa,CAAC,CAACR,SAAS,GAAGG,IAAI,EAAEM,QAAQ,CAAC,CAAC,CAAC;EAChD,CAAC,EAAE,CAACJ,WAAW,EAAEL,SAAS,EAAEC,QAAQ,EAAEE,IAAI,CAAC,CAAC;EAE5C,MAAMkB,qBAAqB,GAAGxC,WAAW,CAAC,MAAM;IAC5C,IAAI0B,UAAU,KAAK,GAAG,EAAE;MACpBe,MAAM,CAACC,UAAU,CAAC,MAAM;QACpBT,QAAQ,CAACU,OAAO,EAAEC,KAAK,CAAC,CAAC;MAC7B,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,MAAM;MACHN,kBAAkB,CAAC,CAAC;IACxB;EACJ,CAAC,EAAE,CAACA,kBAAkB,EAAEZ,UAAU,CAAC,CAAC;EAEpC,MAAMmB,eAAe,GAAG7C,WAAW,CAAC,MAAM;IACtC,MAAM8C,YAAY,GAAGzC,mBAAmB,CAAC;MACrCc,SAAS;MACTD,SAAS;MACTL,MAAM,EAAEkC,IAAI,CAACC,KAAK,CAACjB,MAAM,CAACL,UAAU,CAAC,GAAGJ,IAAI,CAAC,GAAGA;IACpD,CAAC,CAAC;IAEFG,cAAc,CAACqB,YAAY,CAAC;IAC5BnB,aAAa,CAACmB,YAAY,CAAClB,QAAQ,CAAC,CAAC,CAAC;IAEtC,IAAI,OAAOR,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAAC0B,YAAY,CAAC;IAC1B;IAEA,IAAIpB,UAAU,KAAK,EAAE,EAAE;MACnBC,aAAa,CAACR,SAAS,CAACS,QAAQ,CAAC,CAAC,CAAC;IACvC;EACJ,CAAC,EAAE,CAACF,UAAU,EAAER,SAAS,EAAEC,SAAS,EAAEC,QAAQ,EAAEE,IAAI,CAAC,CAAC;EAEtD,MAAM2B,iBAAiB,GAAGjD,WAAW,CAChCkD,KAAoC,IAAK;IACtC,MAAM;MAAEC;IAAM,CAAC,GAAGD,KAAK,CAACE,MAAM;IAE9B,MAAMC,WAAW,GAAGtB,MAAM,CAACoB,KAAK,CAACG,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAEpD,IAAID,WAAW,GAAGlC,SAAS,IAAIA,SAAS,KAAK,CAAC,EAAE;MAC5CQ,aAAa,CAAC,GAAG,CAAC;MAElB;IACJ;IAEAA,aAAa,CAAC0B,WAAW,KAAK,CAAC,GAAG,EAAE,GAAGA,WAAW,CAACzB,QAAQ,CAAC,CAAC,CAAC;EAClE,CAAC,EACD,CAACT,SAAS,CACd,CAAC;EAED,MAAMoC,QAAQ,GAAGrD,OAAO,CAAC,MAAM;IAC3B,IAAIsD,IAAyB,GAAG,IAAI;IAEpC,QAAQ3B,YAAY;MAChB,KAAK,SAAS;QACV2B,IAAI,gBAAGzD,KAAA,CAAA0D,aAAA,CAACnD,IAAI;UAACoD,KAAK,EAAE,CAAC5C,IAAI,IAAI,qBAAqB,CAAE;UAAC6C,IAAI,EAAE,EAAG;UAACC,KAAK,EAAE3C;QAAU,CAAE,CAAC;QACnF;MACJ,KAAK,QAAQ;QACTuC,IAAI,gBAAGzD,KAAA,CAAA0D,aAAA,CAACnD,IAAI;UAACoD,KAAK,EAAE,CAAC,aAAa,CAAE;UAACC,IAAI,EAAE,EAAG;UAACC,KAAK,EAAC;QAAO,CAAE,CAAC;QAC/D;MACJ,KAAK,QAAQ;QACTJ,IAAI,gBAAGzD,KAAA,CAAA0D,aAAA,CAACnD,IAAI;UAACoD,KAAK,EAAE,CAAC,aAAa,CAAE;UAACC,IAAI,EAAE,EAAG;UAACC,KAAK,EAAC;QAAK,CAAE,CAAC;QAC7D;MACJ,KAAK,WAAW;QACZJ,IAAI,gBAAGzD,KAAA,CAAA0D,aAAA,CAACnD,IAAI;UAACoD,KAAK,EAAE,CAAC,aAAa,CAAE;UAACC,IAAI,EAAE,EAAG;UAACC,KAAK,EAAC;QAAK,CAAE,CAAC;QAC7D;MACJ;QACI;IACR;IAEA,OAAOJ,IAAI;EACf,CAAC,EAAE,CAAC3B,YAAY,EAAEf,IAAI,EAAEG,SAAS,CAAC,CAAC;EAEnC,MAAM4C,kBAAkB,GAAG3D,OAAO,CAAC,MAAM;IACrC,IAAIa,cAAc,EAAE;MAChB,OAAO,IAAI;IACf;IAEA,OAAO,EAAEc,YAAY,KAAK,SAAS,IAAI,CAACd,cAAc,CAAC;EAC3D,CAAC,EAAE,CAACc,YAAY,EAAEd,cAAc,CAAC,CAAC;EAElC,OAAOb,OAAO,CACV,mBACIH,KAAA,CAAA0D,aAAA,CAAClD,mBAAmB;IAACuD,OAAO,EAAEvB;EAAkB,gBAC5CxC,KAAA,CAAA0D,aAAA,CAAC3D,eAAe;IAACiE,OAAO,EAAE;EAAM,GAC3BF,kBAAkB,iBACf9D,KAAA,CAAA0D,aAAA,CAAC/C,+BAA+B;IAC5BsD,GAAG,EAAC,cAAc;IAClBD,OAAO,EAAE;MAAEE,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EACDpC,YAAY,KAAK,QAAQ,IAAIA,YAAY,KAAK,WAAW,GACnD,EAAE,GACF,EAAE;MACZqC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CG,OAAO,EAAEzC,YAAY,KAAK,QAAQ,IAAIA,YAAY,KAAK,WAAY;IACnE0C,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7CX,OAAO,EAAExB,kBAAmB;IAC5BoC,MAAM,EAAE7C,YAAY,KAAK,QAAQ,GAAG,kBAAkB,GAAG8C,SAAU;IACnEC,QAAQ,EAAEpD,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIL,SAAU;IACxD0D,WAAW,EAAErD,WAAW,KAAK,CAAC,IAAIA,WAAW,IAAIL;EAAU,GAE1DoC,QAC4B,CAExB,CAAC,EACjB1B,YAAY,KAAK,QAAQ,IAAIH,UAAU,KAAK,GAAG,gBAC5C3B,KAAA,CAAA0D,aAAA,CAAChD,8BAA8B;IAC3BqD,OAAO,EAAEtB,qBAAsB;IAC/BsC,oBAAoB,EAAEzD;EAAoB,GAEzCQ,YAAY,KAAK,SAAS,IAAIb,KAAK,GAAGA,KAAK,GAAGU,UACnB,CAAC,gBAEjC3B,KAAA,CAAA0D,aAAA,CAACjD,wBAAwB;IACrBuE,GAAG,EAAE9C,QAAS;IACd+C,aAAa,EAAEnD,YAAa;IAC5BoD,eAAe,EAAElE,cAAe;IAChC+D,oBAAoB,EAAEzD,mBAAoB;IAC1C6D,SAAS,EAAEhD,QAAS;IACpBiD,MAAM,EAAEtC,eAAgB;IACxBzB,QAAQ,EAAE6B,iBAAkB;IAC5BE,KAAK,EAAEtB,YAAY,KAAK,SAAS,IAAIb,KAAK,GAAGA,KAAK,GAAGU;EAAW,CACnE,CACJ,eACD3B,KAAA,CAAA0D,aAAA,CAAC3D,eAAe;IAACiE,OAAO,EAAE;EAAM,GAC3BlC,YAAY,KAAK,QAAQ,iBACtB9B,KAAA,CAAA0D,aAAA,CAAC/C,+BAA+B;IAC5BsD,GAAG,EAAC,cAAc;IAClBD,OAAO,EAAE;MAAEE,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC9CC,OAAO,EAAE;MACLH,KAAK,EAAE,EAAE;MACTC,OAAO,EAAE,CAAC;MACVC,OAAO,EAAE;IACb,CAAE;IACFE,IAAI,EAAE;MAAEJ,KAAK,EAAE,CAAC;MAAEC,OAAO,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAC3CI,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC7CX,OAAO,EAAE3B,eAAgB;IACzBmC,OAAO,EAAEzC,YAAY,KAAK,QAAQ,IAAIA,YAAY,KAAK,WAAY;IACnE+C,QAAQ,EAAE1D,SAAS,GAAGM,WAAW,IAAIN,SAAS,GAAG,KAAM;IACvD2D,WAAW,EAAE3D,SAAS,GAAGM,WAAW,IAAIN,SAAS,GAAG;EAAM,gBAE1DnB,KAAA,CAAA0D,aAAA,CAACnD,IAAI;IAACoD,KAAK,EAAE,CAAC,YAAY,CAAE;IAACC,IAAI,EAAE,EAAG;IAACC,KAAK,EAAC;EAAO,CAAE,CACzB,CAExB,CACA,CACxB,EACD,CACIpC,WAAW,EACXK,YAAY,EACZM,eAAe,EACfG,kBAAkB,EAClBE,qBAAqB,EACrBD,iBAAiB,EACjBM,eAAe,EACfI,iBAAiB,EACjBf,QAAQ,EACRR,UAAU,EACVV,KAAK,EACLuC,QAAQ,EACRrC,SAAS,EACTC,SAAS,EACTJ,cAAc,EACd8C,kBAAkB,EAClBxC,mBAAmB,CAE3B,CAAC;AACL,CAAC;AAEDV,aAAa,CAACyE,WAAW,GAAG,eAAe;AAE3C,eAAezE,aAAa","ignoreList":[]}

package/lib/esm/components/icon/Icon.js CHANGED Viewed

@@ -51,9 +51,15 @@ const Icon = _ref => {
     $size: size
   }, icons.map(icon => {
     const stackSizeFactor = getStackSizeFactor(icon);
-    const isIconStyleGiven = /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
-    const iconStyle = isIconStyleGiven ? undefined : theme?.iconStyle ?? 'fa-regular';
-    const iconClasses = clsx(iconStyle, icon, {
+    // const isIconStyleGiven =
+    //     /fa[srltd]|fa-(?:regular|solid|thin|light|duotone|sharp)/.test(icon);
+    //
+    // const iconStyle = isIconStyleGiven
+    //     ? undefined
+    //     : (theme?.iconStyle as string) ?? 'fa-regular';
+    const iconClasses = clsx(icon, {
       'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
     });
     return /*#__PURE__*/React.createElement(StyledIcon, {

package/lib/esm/components/icon/Icon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.js","names":["clsx","React","useTheme","getStackSizeFactor","StyledIcon","StyledIconWrapper","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","$size","map","~~isIconStyleGiven","test","iconStyle","~~iconClasses","$color","includes","$fontSize","$isStacked","key","displayName"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { useTheme } from 'styled-components';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /*\n Additional class names for the root element\n /\n className?: string;\n /\n The color of the icon\n /\n color?: string;\n /\n The FontAwesome or tobit icons to render. Multiple icons are stacked.\n /\n icons: string[];\n /\n Disables the icon so that it cannot be clicked anymore\n /\n isDisabled?: boolean;\n /\n Function to be executed when the icon was clicked\n /\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when the icon was double-clicked\n /\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when a mouse button is pressed on the icon\n /\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /\n Size of the icon in pixel\n /\n size?: number;\n /\n Stops event propagation on click\n /\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n const theme = useTheme();\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className,\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n $isDisabled={isDisabled}\n onClick={typeof onClick === 'function' ? handleClick : undefined}\n $isOnClick={typeof onClick === 'function'}\n onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n onMouseDown={onMouseDown}\n $size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n const isIconStyleGiven =\n /fa[srltd]\|fa-(?:regular\|solid\|thin\|light\|duotone\|sharp)/.test(icon);\n\n const iconStyle = isIconStyleGiven\n ? undefined\n : (theme?.iconStyle as string) ?? 'fa-regular';\n\n const iconClasses = clsx(~~iconStyle,~~ icon, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n $color={icon.includes('fa-inverse') ? 'white' : color}\n $fontSize={((stackSizeFactor \|\| 1) / maxStackSizeFactor) size}\n $isStacked={shouldUseStackedIcon}\n key={icon}\n $size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,MAAiC,OAAO;AACpD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,kBAAkB,QAAQ,kBAAkB;AACrD,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,eAAe;AAyC7D,MAAMC,IAAmB,GAAGC,IAAA,IAUtB;EAAA,IAVuB;IACzBC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,IAAI,GAAG,EAAE;IACTC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAOP,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACM,KAAK,CAAC;IAClB;EACJ,CAAC;EAED,MAAME,iBAAqD,GAAIF,KAAK,IAAK;IACrE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,MAAMG,KAAK,GAAGnB,QAAQ,CAAC,CAAC;EAExB,IAAIoB,kBAAkB,GAAG,CAAC;EAE1BZ,KAAK,CAACa,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAGtB,kBAAkB,CAACqB,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAMC,oBAAoB,GAAGhB,KAAK,CAACiB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG5B,IAAI,CACvB,kBAAkB,EAClB0B,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtClB,SACJ,CAAC;EAED,oBACIP,KAAA,CAAA4B,aAAA,CAACxB,iBAAiB;IACdG,SAAS,EAAEoB,cAAe;IAC1BE,WAAW,EAAEnB,UAAW;IACxBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,GAAGK,WAAW,GAAGc,SAAU;IACjEC,UAAU,EAAE,OAAOpB,OAAO,KAAK,UAAW;IAC1CC,aAAa,EAAE,OAAOA,aAAa,KAAK,UAAU,GAAGO,iBAAiB,GAAGW,SAAU;IACnFjB,WAAW,EAAEA,WAAY;IACzBmB,KAAK,EAAElB;EAAK,GAEXL,KAAK,CAACwB,GAAG,CAAEV,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAGtB,kBAAkB,CAACqB,IAAI,CAAC;IAEhD~~,MAAMW,gBAAgB,GAClB,yDAAyD,CAACC,IAAI,CAACZ,IAAI,CAAC~~;~~IAExE,MAAMa,SAAS,GAAGF,gBAAgB,GAC5BJ,SAAS,GACRV,KAAK,EAAEgB,SAAS,IAAe,YAAY~~;~~IAElD~~,~~MAAMC~~,WAAW,~~GAAGtC~~,IAAI,~~CAACqC~~,~~SAAS,EAAEb,~~IAAI,EAAE;~~MACtC~~,aAAa,EAAEE,oBAAoB,IAAID,eAAe,KAAKM;IAC/D,CAAC,CAAC;IAEF,oBACI9B,KAAA,CAAA4B,aAAA,CAACzB,UAAU;MACPI,SAAS,~~EAAE8B~~,WAAY;MACvBC,MAAM,~~EAAEf~~,IAAI,~~CAACgB~~,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,~~GAAG/B~~,KAAM;~~MACtDgC~~,SAAS,EAAG,~~CAAChB~~,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIP,IAAK;~~MAChE2B~~,UAAU,~~EAAEhB~~,oBAAqB;~~MACjCiB~~,GAAG,~~EAAEnB~~,IAAK;MACVS,KAAK,EAAElB;IAAK,CACf,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDT,IAAI,~~CAACsC~~,WAAW,GAAG,MAAM;AAEzB,~~eAAetC~~,IAAI","ignoreList":[]}
1	+ {"version":3,"file":"Icon.js","names":["clsx","React","useTheme","getStackSizeFactor","StyledIcon","StyledIconWrapper","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","theme","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","createElement","$isDisabled","undefined","$isOnClick","$size","map","iconClasses","$color","includes","$fontSize","$isStacked","key","displayName"],"sources":["../../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { useTheme } from 'styled-components';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\n\nexport type IconProps = {\n /*\n Additional class names for the root element\n /\n className?: string;\n /\n The color of the icon\n /\n color?: string;\n /\n The FontAwesome or tobit icons to render. Multiple icons are stacked.\n /\n icons: string[];\n /\n Disables the icon so that it cannot be clicked anymore\n /\n isDisabled?: boolean;\n /\n Function to be executed when the icon was clicked\n /\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when the icon was double-clicked\n /\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /\n Function to be executed when a mouse button is pressed on the icon\n /\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /\n Size of the icon in pixel\n /\n size?: number;\n /\n Stops event propagation on click\n /\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n const theme = useTheme();\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className,\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n $isDisabled={isDisabled}\n onClick={typeof onClick === 'function' ? handleClick : undefined}\n $isOnClick={typeof onClick === 'function'}\n onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n onMouseDown={onMouseDown}\n $size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n // const isIconStyleGiven =\n // /fa[srltd]\|fa-(?:regular\|solid\|thin\|light\|duotone\|sharp)/.test(icon);\n //\n // const iconStyle = isIconStyleGiven\n // ? undefined\n // : (theme?.iconStyle as string) ?? 'fa-regular';\n\n const iconClasses = clsx(icon, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n $color={icon.includes('fa-inverse') ? 'white' : color}\n $fontSize={((stackSizeFactor \|\| 1) / maxStackSizeFactor) size}\n $isStacked={shouldUseStackedIcon}\n key={icon}\n $size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,MAAiC,OAAO;AACpD,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,kBAAkB,QAAQ,kBAAkB;AACrD,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,eAAe;AAyC7D,MAAMC,IAAmB,GAAGC,IAAA,IAUtB;EAAA,IAVuB;IACzBC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,IAAI,GAAG,EAAE;IACTC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAOP,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACM,KAAK,CAAC;IAClB;EACJ,CAAC;EAED,MAAME,iBAAqD,GAAIF,KAAK,IAAK;IACrE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,MAAMG,KAAK,GAAGnB,QAAQ,CAAC,CAAC;EAExB,IAAIoB,kBAAkB,GAAG,CAAC;EAE1BZ,KAAK,CAACa,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAGtB,kBAAkB,CAACqB,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAMC,oBAAoB,GAAGhB,KAAK,CAACiB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG5B,IAAI,CACvB,kBAAkB,EAClB0B,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtClB,SACJ,CAAC;EAED,oBACIP,KAAA,CAAA4B,aAAA,CAACxB,iBAAiB;IACdG,SAAS,EAAEoB,cAAe;IAC1BE,WAAW,EAAEnB,UAAW;IACxBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,GAAGK,WAAW,GAAGc,SAAU;IACjEC,UAAU,EAAE,OAAOpB,OAAO,KAAK,UAAW;IAC1CC,aAAa,EAAE,OAAOA,aAAa,KAAK,UAAU,GAAGO,iBAAiB,GAAGW,SAAU;IACnFjB,WAAW,EAAEA,WAAY;IACzBmB,KAAK,EAAElB;EAAK,GAEXL,KAAK,CAACwB,GAAG,CAAEV,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAGtB,kBAAkB,CAACqB,IAAI,CAAC;;IAEhD;IACA;IACA;IACA;IACA;IACA;;IAEA,MAAMW,WAAW,GAAGnC,IAAI,CAACwB,IAAI,EAAE;MAC3B,aAAa,EAAEE,oBAAoB,IAAID,eAAe,KAAKM;IAC/D,CAAC,CAAC;IAEF,oBACI9B,KAAA,CAAA4B,aAAA,CAACzB,UAAU;MACPI,SAAS,EAAE2B,WAAY;MACvBC,MAAM,EAAEZ,IAAI,CAACa,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,GAAG5B,KAAM;MACtD6B,SAAS,EAAG,CAACb,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIP,IAAK;MAChEwB,UAAU,EAAEb,oBAAqB;MACjCc,GAAG,EAAEhB,IAAK;MACVS,KAAK,EAAElB;IAAK,CACf,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDT,IAAI,CAACmC,WAAW,GAAG,MAAM;AAEzB,eAAenC,IAAI","ignoreList":[]}

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

@@ -37,6 +37,10 @@ export type AmountControlProps = {
      * Whether the input should be wider
      */
     shouldShowWideInput?: boolean;
+    /**
+     * Defines the amount that will change when adjusted
+     */
+    step?: number;
 };
 declare const AmountControl: FC<AmountControlProps>;
 export default AmountControl;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.841",
+    "version": "5.0.0-beta.845",
     "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": "e463c64df725dbbf31144ac73cfe0c9a9f385571"
+    "gitHead": "f1be75337f534fc33003d9f511d84a22fcfecb6c"
 }