@chayns-components/core 5.0.0-beta.22 → 5.0.0-beta.220

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

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
+var _AmountControl = require("./AmountControl.styles");
+var _utils = require("./utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const AmountControl = _ref => {
+  let {
+    amount,
+    label,
+    maxAmount,
+    onChange
+  } = _ref;
+  const [amountValue, setAmountValue] = (0, _react.useState)(0);
+  const [inputValue, setInputValue] = (0, _react.useState)('0');
+  const [displayState, setDisplayState] = (0, _react.useState)('default');
+  const minAmount = 0;
+
+  /**
+   * This function controls the displayState
+   */
+  (0, _react.useEffect)(() => {
+    switch (true) {
+      case maxAmount === 1 && amountValue === 1:
+        setDisplayState('delete');
+        return;
+      case maxAmount && amountValue >= maxAmount:
+        setDisplayState('maxAmount');
+        return;
+      case amountValue > 0:
+        setDisplayState('normal');
+        return;
+      default:
+        setDisplayState('default');
+    }
+  }, [amountValue, maxAmount]);
+
+  /**
+   * Function that sets the amountValue to the amount
+   */
+  (0, _react.useEffect)(() => {
+    if (!amount) {
+      return;
+    }
+    setAmountValue((0, _utils.checkForValidAmount)({
+      amount,
+      maxAmount,
+      minAmount
+    }));
+    setInputValue((0, _utils.checkForValidAmount)({
+      amount,
+      maxAmount,
+      minAmount
+    }).toString());
+  }, [amount, maxAmount, minAmount]);
+
+  /**
+   * Function that updates the onChange event
+   */
+  (0, _react.useEffect)(() => {
+    if (onChange) {
+      onChange(amountValue);
+    }
+  }, [amountValue, onChange]);
+  const handleAmountAdd = () => {
+    setAmountValue(prevState => prevState + 1);
+    setInputValue(prevState => (Number(prevState) + 1).toString());
+  };
+  const handleAmountRemove = () => {
+    setAmountValue(prevState => prevState - 1);
+    setInputValue(prevState => (Number(prevState) - 1).toString());
+  };
+  const handleFirstAmount = (0, _react.useCallback)(() => {
+    if (amountValue !== 0) {
+      return;
+    }
+    setAmountValue(1);
+    setInputValue('1');
+  }, [amountValue]);
+  const handleInputBlur = (0, _react.useCallback)(() => {
+    setAmountValue(inputValue === '' ? 0 : Number(inputValue));
+    if (inputValue === '') {
+      setInputValue('0');
+    }
+  }, [inputValue]);
+  const handleInputChange = (0, _react.useCallback)(event => {
+    const valueBeforeCheck = Number(event.target.value);
+    const checkedValue = (0, _utils.checkForValidAmount)({
+      minAmount,
+      maxAmount,
+      amount: Number(event.target.value)
+    });
+    if (valueBeforeCheck < minAmount && minAmount === 0) {
+      setInputValue('0');
+      return;
+    }
+    setInputValue(checkedValue === 0 ? '' : checkedValue.toString());
+  }, [maxAmount, minAmount]);
+  const leftIcon = (0, _react.useMemo)(() => {
+    let item = null;
+    switch (displayState) {
+      case 'default':
+        item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          icons: ['fa fa-cart-shopping'],
+          size: 15
+        });
+        break;
+      case 'delete':
+        item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          icons: ['fa ts-trash'],
+          size: 25
+        });
+        break;
+      case 'normal':
+        item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          icons: ['fa fa-minus'],
+          size: 15,
+          color: "red"
+        });
+        break;
+      case 'maxAmount':
+        item = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+          icons: ['fa fa-minus'],
+          size: 15,
+          color: "red"
+        });
+        break;
+      default:
+        break;
+    }
+    return item;
+  }, [displayState]);
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControl, {
+    onClick: handleFirstAmount
+  }, /*#__PURE__*/_react.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
+    onClick: handleAmountRemove,
+    disabled: amountValue !== 0 && amountValue <= minAmount
+  }, leftIcon), /*#__PURE__*/_react.default.createElement(_AmountControl.StyledAmountControlInput, {
+    displayState: displayState,
+    onBlur: handleInputBlur,
+    onChange: handleInputChange,
+    value: displayState === 'default' && label ? label : inputValue,
+    type: amountValue === 0 ? 'text' : 'number'
+  }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, displayState === 'normal' && /*#__PURE__*/_react.default.createElement(_AmountControl.StyledMotionAmountControlButton, {
+    key: "right_button",
+    initial: {
+      width: 0,
+      opacity: 0,
+      padding: 0
+    },
+    animate: {
+      width: 40,
+      opacity: 1,
+      padding: 0
+    },
+    exit: {
+      width: 0,
+      opacity: 0,
+      padding: 0
+    },
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    },
+    onClick: handleAmountAdd,
+    disabled: maxAmount ? amountValue >= maxAmount : false
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: ['fa fa-plus'],
+    size: 15,
+    color: "green"
+  })))), [amountValue, displayState, handleFirstAmount, handleInputBlur, handleInputChange, inputValue, label, leftIcon, maxAmount, minAmount]);
+};
+AmountControl.displayName = 'AmountControl';
+var _default = AmountControl;
+exports.default = _default;
+//# sourceMappingURL=AmountControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountControl.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_Icon","_interopRequireDefault","_AmountControl","_utils","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AmountControl","_ref","amount","label","maxAmount","onChange","amountValue","setAmountValue","useState","inputValue","setInputValue","displayState","setDisplayState","minAmount","useEffect","checkForValidAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","useCallback","handleInputBlur","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","leftIcon","useMemo","item","createElement","icons","size","color","StyledAmountControl","onClick","StyledMotionAmountControlButton","disabled","StyledAmountControlInput","onBlur","type","AnimatePresence","initial","width","opacity","padding","animate","exit","transition","duration","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 Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\nimport { checkForValidAmount } from './utils';\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     * 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\nconst AmountControl: FC<AmountControlProps> = ({ amount, label, maxAmount, onChange }) => {\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    /**\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 valueBeforeCheck = Number(event.target.value);\n\n            const checkedValue = checkForValidAmount({\n                minAmount,\n                maxAmount,\n                amount: Number(event.target.value),\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={['fa fa-cart-shopping']} size={15} />;\n                break;\n            case 'delete':\n                item = <Icon icons={['fa ts-trash']} size={25} />;\n                break;\n            case 'normal':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            case 'maxAmount':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            default:\n                break;\n        }\n\n        return item;\n    }, [displayState]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount}>\n                <StyledMotionAmountControlButton\n                    onClick={handleAmountRemove}\n                    disabled={amountValue !== 0 && amountValue <= minAmount}\n                >\n                    {leftIcon}\n                </StyledMotionAmountControlButton>\n                <StyledAmountControlInput\n                    displayState={displayState}\n                    onBlur={handleInputBlur}\n                    onChange={handleInputChange}\n                    value={displayState === 'default' && label ? label : inputValue}\n                    type={amountValue === 0 ? 'text' : 'number'}\n                />\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{ width: 40, opacity: 1, padding: 0 }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            disabled={maxAmount ? amountValue >= maxAmount : false}\n                        >\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            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            minAmount,\n        ]\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+import type { DisplayState } from './AmountControl';
+export declare const StyledAmountControl: import("styled-components").StyledComponent<"div", any, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledAmountControlInput: import("styled-components").StyledComponent<"input", any, {
+    displayState: DisplayState;
+} & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledMotionAmountControlButton: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLButtonElement, import("framer-motion").HTMLMotionProps<"button">>, any, {
+    disabled: boolean;
+} & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

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

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionAmountControlButton = exports.StyledAmountControlInput = exports.StyledAmountControl = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StyledAmountControl = _styledComponents.default.div`
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['202'];
+}};
+    display: flex;
+    width: fit-content;
+    border-radius: 3px;
+`;
+exports.StyledAmountControl = StyledAmountControl;
+const StyledAmountControlInput = _styledComponents.default.input`
+    background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['202'];
+}};
+    border: none;
+    height: 28px;
+    width: 95px;
+    text-align: center;
+    ${_ref3 => {
+  let {
+    displayState
+  } = _ref3;
+  return displayState !== 'normal' && (0, _styledComponents.css)`
+            border-bottom-right-radius: 3px;
+            border-top-right-radius: 3px;
+        `;
+}}
+`;
+exports.StyledAmountControlInput = StyledAmountControlInput;
+const StyledMotionAmountControlButton = (0, _styledComponents.default)(_framerMotion.motion.button)`
+    overflow: hidden;
+    background-color: rgba(255, 255, 255, 0.2);
+    height: 28px;
+    width: 40px;
+
+    ${_ref4 => {
+  let {
+    disabled
+  } = _ref4;
+  return disabled && (0, _styledComponents.css)`
+            opacity: 0.5;
+        `;
+}}
+`;
+exports.StyledMotionAmountControlButton = StyledMotionAmountControlButton;
+//# sourceMappingURL=AmountControl.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountControl.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledAmountControl","styled","div","_ref","theme","exports","StyledAmountControlInput","input","_ref2","_ref3","displayState","css","StyledMotionAmountControlButton","motion","button","_ref4","disabled"],"sources":["../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    displayState: DisplayState;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    border: none;\n    height: 28px;\n    width: 95px;\n    text-align: center;\n    ${({ displayState }) =>\n        displayState !== 'normal' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    disabled: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: rgba(255, 255, 255, 0.2);\n    height: 28px;\n    width: 40px;\n\n    ${({ disabled }) =>\n        disabled &&\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,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAF,wBAAAM,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAMzC,MAAMW,mBAAmB,GAAGC,yBAAM,CAACC,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAL,mBAAA,GAAAA,mBAAA;AAMK,MAAMM,wBAAwB,GAAGL,yBAAM,CAACM,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEJ;EAAqC,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA,MAAMK,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,KAAK,QAAQ,IACzB,IAAAC,qBAAG,CAAC;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACN,OAAA,CAAAC,wBAAA,GAAAA,wBAAA;AAMK,MAAMM,+BAA+B,GAAG,IAAAX,yBAAM,EACjDY,oBAAM,CAACC,MACX,CAAkC;AAClC;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OACXC,QAAQ,IACR,IAAAL,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACN,OAAA,CAAAO,+BAAA,GAAAA,+BAAA"}

package/lib/components/amount-control/utils.d.ts

@@ -0,0 +1,7 @@
+interface CheckForValidAmount {
+    amount: number;
+    maxAmount?: number;
+    minAmount: number;
+}
+export declare const checkForValidAmount: ({ amount, maxAmount, minAmount }: CheckForValidAmount) => number;
+export {};

package/lib/components/amount-control/utils.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkForValidAmount = void 0;
+const checkForValidAmount = _ref => {
+  let {
+    amount,
+    maxAmount,
+    minAmount
+  } = _ref;
+  if (maxAmount && amount > maxAmount) {
+    return maxAmount;
+  }
+  if (amount < minAmount) {
+    return minAmount;
+  }
+  return amount;
+};
+exports.checkForValidAmount = checkForValidAmount;
+//# sourceMappingURL=utils.js.map

package/lib/components/amount-control/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["checkForValidAmount","_ref","amount","maxAmount","minAmount","exports"],"sources":["../../../src/components/amount-control/utils.ts"],"sourcesContent":["interface CheckForValidAmount {\n    amount: number;\n    maxAmount?: number;\n    minAmount: number;\n}\n\nexport const checkForValidAmount = ({ amount, maxAmount, minAmount }: CheckForValidAmount) => {\n    if (maxAmount && amount > maxAmount) {\n        return maxAmount;\n    }\n\n    if (amount < minAmount) {\n        return minAmount;\n    }\n\n    return amount;\n};\n"],"mappings":";;;;;;AAMO,MAAMA,mBAAmB,GAAGC,IAAA,IAA2D;EAAA,IAA1D;IAAEC,MAAM;IAAEC,SAAS;IAAEC;EAA+B,CAAC,GAAAH,IAAA;EACrF,IAAIE,SAAS,IAAID,MAAM,GAAGC,SAAS,EAAE;IACjC,OAAOA,SAAS;EACpB;EAEA,IAAID,MAAM,GAAGE,SAAS,EAAE;IACpB,OAAOA,SAAS;EACpB;EAEA,OAAOF,MAAM;AACjB,CAAC;AAACG,OAAA,CAAAL,mBAAA,GAAAA,mBAAA"}

package/lib/components/badge/Badge.d.ts

@@ -1,5 +1,9 @@
 import { FC, ReactNode } from 'react';
-declare type BadgeProps = {
+export type BadgeProps = {
+    /**
+     * The background color of the badge
+     */
+    backgroundColor?: string;
     /**
      * The content of the badge
      */
@@ -8,6 +12,10 @@ declare type BadgeProps = {
      * Additional class names for the badge element
      */
     className?: string;
+    /**
+     * The font color of the badge
+     */
+    fontColor?: string;
 };
 declare const Badge: FC<BadgeProps>;
 export default Badge;

package/lib/components/badge/Badge.js

@@ -4,24 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
+var _react = _interopRequireDefault(require("react"));
 var _Badge = require("./Badge.styles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Badge = function Badge(_ref) {
-  var children = _ref.children,
-      className = _ref.className;
-  var badgeClasses = (0, _clsx.default)('beta-chayns-badge ellipsis', className);
+const Badge = _ref => {
+  let {
+    backgroundColor,
+    children,
+    className,
+    fontColor
+  } = _ref;
+  const badgeClasses = (0, _clsx.default)('beta-chayns-badge ellipsis', className);
   return /*#__PURE__*/_react.default.createElement(_Badge.StyledBadge, {
-    className: badgeClasses
+    backgroundColor: backgroundColor,
+    className: badgeClasses,
+    fontColor: fontColor
   }, children);
 };
-
 Badge.displayName = 'Badge';
 var _default = Badge;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/badge/Badge.tsx"],"names":["Badge","children","className","badgeClasses","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAaA,IAAMA,KAAqB,GAAG,SAAxBA,KAAwB,OAA6B;AAAA,MAA1BC,QAA0B,QAA1BA,QAA0B;AAAA,MAAhBC,SAAgB,QAAhBA,SAAgB;AACvD,MAAMC,YAAY,GAAG,mBAAK,4BAAL,EAAmCD,SAAnC,CAArB;AAEA,sBAAO,6BAAC,kBAAD;AAAa,IAAA,SAAS,EAAEC;AAAxB,KAAuCF,QAAvC,CAAP;AACH,CAJD;;AAMAD,KAAK,CAACI,WAAN,GAAoB,OAApB;eAEeJ,K","sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { StyledBadge } from './Badge.styles';\n\ntype BadgeProps = {\n    /**\n     * The content of the badge\n     */\n    children: ReactNode;\n    /**\n     * Additional class names for the badge element\n     */\n    className?: string;\n};\n\nconst Badge: FC<BadgeProps> = ({ children, className }) => {\n    const badgeClasses = clsx('beta-chayns-badge ellipsis', className);\n\n    return <StyledBadge className={badgeClasses}>{children}</StyledBadge>;\n};\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"file":"Badge.js"}
+{"version":3,"file":"Badge.js","names":["_clsx","_interopRequireDefault","require","_react","_Badge","obj","__esModule","default","Badge","_ref","backgroundColor","children","className","fontColor","badgeClasses","clsx","createElement","StyledBadge","displayName","_default","exports"],"sources":["../../../src/components/badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, ReactNode } from 'react';\nimport { StyledBadge } from './Badge.styles';\n\nexport type BadgeProps = {\n    /**\n     * The background color of the badge\n     */\n    backgroundColor?: string;\n    /**\n     * The content of the badge\n     */\n    children: ReactNode;\n    /**\n     * Additional class names for the badge element\n     */\n    className?: string;\n    /**\n     * The font color of the badge\n     */\n    fontColor?: string;\n};\n\nconst Badge: FC<BadgeProps> = ({ backgroundColor, children, className, fontColor }) => {\n    const badgeClasses = clsx('beta-chayns-badge ellipsis', className);\n\n    return (\n        <StyledBadge\n            backgroundColor={backgroundColor}\n            className={badgeClasses}\n            fontColor={fontColor}\n        >\n            {children}\n        </StyledBadge>\n    );\n};\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAA6C,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAqB7C,MAAMG,KAAqB,GAAGC,IAAA,IAAyD;EAAA,IAAxD;IAAEC,eAAe;IAAEC,QAAQ;IAAEC,SAAS;IAAEC;EAAU,CAAC,GAAAJ,IAAA;EAC9E,MAAMK,YAAY,GAAG,IAAAC,aAAI,EAAC,4BAA4B,EAAEH,SAAS,CAAC;EAElE,oBACIT,MAAA,CAAAI,OAAA,CAAAS,aAAA,CAACZ,MAAA,CAAAa,WAAW;IACRP,eAAe,EAAEA,eAAgB;IACjCE,SAAS,EAAEE,YAAa;IACxBD,SAAS,EAAEA;EAAU,GAEpBF,QACQ,CAAC;AAEtB,CAAC;AAEDH,KAAK,CAACU,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAEbX,KAAK;AAAAY,OAAA,CAAAb,OAAA,GAAAY,QAAA"}

package/lib/components/badge/Badge.styles.d.ts

@@ -1 +1,4 @@
-export declare const StyledBadge: import("styled-components").StyledComponent<"div", any, {}, never>;
+import type { BadgeProps } from './Badge';
+export declare const StyledBadge: import("styled-components").StyledComponent<"div", any, Pick<BadgeProps, "backgroundColor" | "fontColor"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

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

@@ -4,22 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledBadge = void 0;
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledBadge = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border-radius: 15px;\n    color: ", ";\n    font-size: 0.8rem;\n    min-width: 1.65rem;\n    padding: 2px 7px;\n    text-align: center;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme['secondary-202'];
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme['007'];
-});
-
+const StyledBadge = _styledComponents.default.div`
+    background-color: ${_ref => {
+  let {
+    backgroundColor,
+    theme
+  } = _ref;
+  return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme['secondary-202'];
+}};
+    border-radius: 15px;
+    color: ${_ref2 => {
+  let {
+    fontColor,
+    theme
+  } = _ref2;
+  return fontColor !== null && fontColor !== void 0 ? fontColor : theme['007'];
+}};
+    display: inline-block;
+    font-size: 0.8rem;
+    min-width: 1.65rem;
+    padding: 2px 7px;
+    text-align: center;
+`;
 exports.StyledBadge = StyledBadge;
 //# sourceMappingURL=Badge.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/badge/Badge.styles.ts"],"names":["StyledBadge","styled","div","theme"],"mappings":";;;;;;;AAAA;;;;;;;;AAKO,IAAMA,WAAW,GAAGC,0BAAOC,GAAV,kPACA;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAiCA,KAAK,CAAC,eAAD,CAAtC;AAAA,CADA,EAGX;AAAA,MAAGA,KAAH,SAAGA,KAAH;AAAA,SAAiCA,KAAK,CAAC,KAAD,CAAtC;AAAA,CAHW,CAAjB","sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledBadgeProps = WithTheme<unknown>;\n\nexport const StyledBadge = styled.div`\n    background-color: ${({ theme }: StyledBadgeProps) => theme['secondary-202']};\n    border-radius: 15px;\n    color: ${({ theme }: StyledBadgeProps) => theme['007']};\n    font-size: 0.8rem;\n    min-width: 1.65rem;\n    padding: 2px 7px;\n    text-align: center;\n`;\n"],"file":"Badge.styles.js"}
+{"version":3,"file":"Badge.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledBadge","styled","div","_ref","backgroundColor","theme","_ref2","fontColor","exports"],"sources":["../../../src/components/badge/Badge.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { BadgeProps } from './Badge';\n\ntype StyledBadgeProps = WithTheme<Pick<BadgeProps, 'backgroundColor' | 'fontColor'>>;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n    background-color: ${({ backgroundColor, theme }: StyledBadgeProps) =>\n        backgroundColor ?? theme['secondary-202']};\n    border-radius: 15px;\n    color: ${({ fontColor, theme }: StyledBadgeProps) => fontColor ?? theme['007']};\n    display: inline-block;\n    font-size: 0.8rem;\n    min-width: 1.65rem;\n    padding: 2px 7px;\n    text-align: center;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAMhC,MAAMG,WAAW,GAAGC,yBAAM,CAACC,GAAsB;AACxD,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,eAAe;IAAEC;EAAwB,CAAC,GAAAF,IAAA;EAAA,OAC7DC,eAAe,aAAfA,eAAe,cAAfA,eAAe,GAAIC,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AAClD;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC,SAAS;IAAEF;EAAwB,CAAC,GAAAC,KAAA;EAAA,OAAKC,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIF,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA,CAAC;AAACG,OAAA,CAAAR,WAAA,GAAAA,WAAA"}

package/lib/components/button/Button.d.ts

@@ -1,5 +1,5 @@
 import { FC, MouseEventHandler, ReactNode } from 'react';
-export declare type ButtonProps = {
+export type ButtonProps = {
     /**
      * The label of the button
      */
@@ -9,7 +9,7 @@ export declare type ButtonProps = {
      */
     className?: string;
     /**
-     * An icon that is displayed on the left hand side of the button text
+     * An icon that is displayed on the left-hand side of the button text
      */
     icon?: string;
     /**
@@ -24,6 +24,10 @@ export declare type ButtonProps = {
      * Function to be executed when the button is clicked
      */
     onClick: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Shows a wait cursor instead of button text
+     */
+    shouldShowWaitCursor?: boolean;
     /**
      * Stops event propagation on click
      */

package/lib/components/button/Button.js

@@ -4,47 +4,90 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
+var _framerMotion = require("framer-motion");
 var _react = _interopRequireDefault(require("react"));
-
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
-
+var _SmallWaitCursor = _interopRequireWildcard(require("../small-wait-cursor/SmallWaitCursor"));
 var _Button = require("./Button.styles");
-
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var Button = function Button(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      icon = _ref.icon,
-      isDisabled = _ref.isDisabled,
-      isSecondary = _ref.isSecondary,
-      onClick = _ref.onClick,
-      shouldStopPropagation = _ref.shouldStopPropagation;
-
-  var handleClick = function handleClick(event) {
+const Button = _ref => {
+  let {
+    children,
+    className,
+    icon,
+    isDisabled,
+    isSecondary,
+    onClick,
+    shouldShowWaitCursor,
+    shouldStopPropagation
+  } = _ref;
+  const handleClick = event => {
     if (shouldStopPropagation) {
       event.stopPropagation();
     }
-
     onClick(event);
   };
-
-  var buttonClasses = (0, _clsx.default)('beta-chayns-button ellipsis', className);
+  const buttonClasses = (0, _clsx.default)('beta-chayns-button ellipsis', className);
   return /*#__PURE__*/_react.default.createElement(_Button.StyledButton, {
     className: buttonClasses,
     disabled: isDisabled,
     hasIcon: typeof icon === 'string' && icon !== '',
     isSecondary: isSecondary,
     onClick: handleClick
-  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement(_Button.StyledIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, icon && /*#__PURE__*/_react.default.createElement(_Button.StyledIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     color: "white",
     icons: [icon]
-  })), children));
+  })), shouldShowWaitCursor ? /*#__PURE__*/_react.default.createElement(_Button.StyledMotionWaitCursorWrapper, {
+    animate: {
+      opacity: 1,
+      width: 40
+    },
+    exit: {
+      opacity: 0,
+      width: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0
+    },
+    key: "wait-cursor",
+    style: {
+      overflow: 'hidden'
+    },
+    transition: {
+      duration: 0.2
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SmallWaitCursor.default, {
+    color: "white",
+    shouldHideBackground: true,
+    size: _SmallWaitCursor.SmallWaitCursorSize.Small
+  })) : /*#__PURE__*/_react.default.createElement(_Button.StyledMotionChildrenWrapper, {
+    animate: {
+      opacity: 1,
+      width: 'auto'
+    },
+    exit: {
+      opacity: 0,
+      width: 0
+    },
+    initial: {
+      opacity: 0,
+      width: 0
+    },
+    key: "children",
+    style: {
+      overflow: 'hidden'
+    },
+    transition: {
+      duration: 0.2
+    }
+  }, children)));
 };
-
 Button.displayName = 'Button';
 var _default = Button;
 exports.default = _default;