@chayns-components/core 5.0.0-beta.98 → 5.0.0-beta.981

package/lib/esm/components/accordion/accordion-provider/AccordionContextProvider.js

@@ -0,0 +1,6 @@
+import React from 'react';
+export const AccordionWrappedContext = /*#__PURE__*/React.createContext({
+  isWrapped: undefined
+});
+AccordionWrappedContext.displayName = 'AccordionWrappedContext';
+//# sourceMappingURL=AccordionContextProvider.js.map

package/lib/esm/components/accordion/accordion-provider/AccordionContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContextProvider.js","names":["React","AccordionWrappedContext","createContext","isWrapped","undefined","displayName"],"sources":["../../../../../src/components/accordion/accordion-provider/AccordionContextProvider.tsx"],"sourcesContent":["import React from 'react';\n\ninterface IAccordionWrappedContextProvider {\n    isWrapped?: boolean;\n}\n\nexport const AccordionWrappedContext = React.createContext<IAccordionWrappedContextProvider>({\n    isWrapped: undefined,\n});\n\nAccordionWrappedContext.displayName = 'AccordionWrappedContext';\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAMzB,OAAO,MAAMC,uBAAuB,gBAAGD,KAAK,CAACE,aAAa,CAAmC;EACzFC,SAAS,EAAEC;AACf,CAAC,CAAC;AAEFH,uBAAuB,CAACI,WAAW,GAAG,yBAAyB","ignoreList":[]}

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

@@ -0,0 +1,275 @@
+import { AnimatePresence } from 'framer-motion';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { checkForValidAmount } from '../../utils/amountControl';
+import Icon from '../icon/Icon';
+import { StyledAmountControl, StyledAmountControlInput, StyledAmountControlPseudoInput, StyledMotionAmountControlButton } from './AmountControl.styles';
+const AmountControl = _ref => {
+  let {
+    amount,
+    icon,
+    iconColor,
+    isDisabled = false,
+    label,
+    maxAmount,
+    minAmount = 0,
+    onChange,
+    shouldShowAddIconOnMinAmount = false,
+    shouldShowIcon = true,
+    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);
+
+  /**
+   * This function controls the displayState
+   */
+  useEffect(() => {
+    switch (true) {
+      case maxAmount === 1 && amountValue === 1:
+        setDisplayState('delete');
+        return;
+      case maxAmount && amountValue >= maxAmount:
+        setDisplayState('maxAmount');
+        return;
+      case amountValue > minAmount:
+        setDisplayState('normal');
+        return;
+      case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:
+        setDisplayState('minAmount');
+        return;
+      default:
+        setDisplayState('default');
+    }
+  }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);
+  const hasFocus = useMemo(() => displayState !== 'default', [displayState]);
+
+  /**
+   * Function that sets the amountValue to the amount
+   */
+  useEffect(() => {
+    if (typeof amount !== "number") {
+      return;
+    }
+    setAmountValue(checkForValidAmount({
+      amount,
+      maxAmount,
+      minAmount
+    }));
+    setInputValue(checkForValidAmount({
+      amount,
+      maxAmount,
+      minAmount
+    }).toString());
+  }, [amount, maxAmount, minAmount]);
+  const handleAmountAdd = useCallback(() => {
+    setAmountValue(prevState => {
+      const newAmount = checkForValidAmount({
+        amount: prevState + step,
+        minAmount,
+        maxAmount
+      });
+      if (typeof onChange === 'function') {
+        onChange(newAmount);
+      }
+      return typeof amount === 'number' ? prevState : newAmount;
+    });
+    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 = checkForValidAmount({
+        amount: prevState - step,
+        minAmount,
+        maxAmount
+      });
+      if (typeof onChange === 'function') {
+        onChange(newAmount);
+      }
+      return newAmount;
+    });
+    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 + step);
+    }
+    setAmountValue(minAmount + step);
+    setInputValue((minAmount + step).toString());
+  }, [amountValue, minAmount, onChange, step]);
+  const handleDeleteIconClick = useCallback(() => {
+    if (inputValue === '0') {
+      window.setTimeout(() => {
+        inputRef.current?.focus();
+      }, 500);
+    } else {
+      handleAmountRemove();
+    }
+  }, [handleAmountRemove, inputValue]);
+  const handleInputBlur = useCallback(() => {
+    const checkedValue = checkForValidAmount({
+      minAmount,
+      maxAmount,
+      amount: Math.round(Number(inputValue) / step) * step
+    });
+    setAmountValue(checkedValue);
+    setInputValue(checkedValue.toString());
+    if (typeof onChange === 'function') {
+      onChange(checkedValue);
+    }
+    if (inputValue === '') {
+      setInputValue(minAmount.toString());
+    }
+  }, [inputValue, maxAmount, minAmount, onChange, step]);
+  const handleInputChange = useCallback(event => {
+    const {
+      value
+    } = event.target;
+    const valueBefore = Number(value.replace(/\D/g, ''));
+    if (valueBefore < minAmount && minAmount === 0) {
+      setInputValue('0');
+      return;
+    }
+    setInputValue(valueBefore === 0 ? '' : valueBefore.toString());
+  }, [minAmount]);
+  const leftIcon = useMemo(() => {
+    let item = null;
+    switch (displayState) {
+      case 'default':
+        item = /*#__PURE__*/React.createElement(Icon, {
+          icons: [icon ?? 'fa fa-cart-shopping'],
+          size: 15,
+          color: iconColor
+        });
+        break;
+      case 'delete':
+        item = /*#__PURE__*/React.createElement(Icon, {
+          icons: ['fa ts-check'],
+          size: 20,
+          color: "white"
+        });
+        break;
+      case 'normal':
+        item = /*#__PURE__*/React.createElement(Icon, {
+          icons: ['fa fa-minus'],
+          size: 15,
+          color: "red"
+        });
+        break;
+      case 'maxAmount':
+        item = /*#__PURE__*/React.createElement(Icon, {
+          icons: ['fa fa-minus'],
+          size: 15,
+          color: "red"
+        });
+        break;
+      default:
+        break;
+    }
+    return item;
+  }, [displayState, icon, iconColor]);
+  const shouldShowLeftIcon = useMemo(() => {
+    if (shouldShowAddIconOnMinAmount && displayState === 'minAmount') {
+      return false;
+    }
+    if (shouldShowIcon) {
+      return true;
+    }
+    return !((displayState === 'default' || displayState === 'minAmount') && !shouldShowIcon);
+  }, [displayState, shouldShowAddIconOnMinAmount, shouldShowIcon]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledAmountControl, {
+    onClick: handleFirstAmount,
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, shouldShowLeftIcon && /*#__PURE__*/React.createElement(StyledMotionAmountControlButton, {
+    key: "right_button",
+    initial: {
+      width: 0,
+      opacity: 0,
+      padding: 0
+    },
+    animate: {
+      width: displayState === 'normal' || displayState === 'maxAmount' ? 40 : 28,
+      opacity: 1,
+      padding: 0
+    },
+    exit: {
+      width: 0,
+      opacity: 0,
+      padding: 0
+    },
+    $isWide: displayState === 'normal' || displayState === 'maxAmount',
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    },
+    onClick: handleAmountRemove,
+    $color: displayState === 'delete' ? 'rgb(32, 198, 90)' : undefined,
+    disabled: amountValue !== 0 && amountValue <= minAmount,
+    $isDisabled: amountValue !== 0 && amountValue <= minAmount
+  }, leftIcon)), displayState === 'delete' || inputValue === '0' ? /*#__PURE__*/React.createElement(StyledAmountControlPseudoInput, {
+    onClick: handleDeleteIconClick,
+    $shouldShowWideInput: shouldShowWideInput
+  }, displayState === 'default' && label ? label : inputValue) : /*#__PURE__*/React.createElement(StyledAmountControlInput, {
+    ref: inputRef,
+    $displayState: displayState,
+    $shouldShowIcon: shouldShowIcon,
+    $shouldShowWideInput: shouldShowWideInput,
+    $hasFocus: hasFocus,
+    onBlur: handleInputBlur,
+    onChange: handleInputChange,
+    value: displayState === 'default' && label ? label : inputValue
+  }), /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, (displayState === 'normal' || displayState === 'minAmount') && /*#__PURE__*/React.createElement(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,
+    $isWide: true,
+    disabled: maxAmount ? amountValue >= maxAmount : false,
+    $isDisabled: maxAmount ? amountValue >= maxAmount : false
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-plus'],
+    size: 15,
+    color: "green"
+  })))), [amountValue, displayState, handleAmountAdd, handleAmountRemove, handleDeleteIconClick, handleFirstAmount, handleInputBlur, handleInputChange, hasFocus, inputValue, isDisabled, label, leftIcon, maxAmount, minAmount, shouldShowIcon, shouldShowLeftIcon, shouldShowWideInput]);
+};
+AmountControl.displayName = 'AmountControl';
+export default AmountControl;
+//# sourceMappingURL=AmountControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledAmountControlPseudoInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","iconColor","isDisabled","label","maxAmount","minAmount","onChange","shouldShowAddIconOnMinAmount","shouldShowIcon","shouldShowWideInput","step","stepProp","amountValue","setAmountValue","inputValue","setInputValue","toString","displayState","setDisplayState","Number","isSafeInteger","inputRef","hasFocus","handleAmountAdd","prevState","newAmount","handleAmountRemove","handleFirstAmount","handleDeleteIconClick","window","setTimeout","current","focus","handleInputBlur","checkedValue","Math","round","handleInputChange","event","value","target","valueBefore","replace","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","$isDisabled","initial","key","width","opacity","padding","animate","exit","$isWide","transition","duration","type","$color","undefined","disabled","$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' | 'minAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * The color of the icon.\n     */\n    iconColor?: string;\n    /**\n     * Whether the control should be disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * A Text that should be displayed, if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is 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 add icon should be displayed if the minAmount is reached.\n     */\n    shouldShowAddIconOnMinAmount?: boolean;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n    /**\n     * Whether the input should be wider\n     */\n    shouldShowWideInput?: boolean;\n    /**\n     * Defines the amount that will change when adjusted\n     */\n    step?: number;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    iconColor,\n    isDisabled = false,\n    label,\n    maxAmount,\n    minAmount = 0,\n    onChange,\n    shouldShowAddIconOnMinAmount = false,\n    shouldShowIcon = true,\n    shouldShowWideInput = false,\n    step: stepProp = 1,\n}) => {\n    const [amountValue, setAmountValue] = useState(minAmount);\n    const [inputValue, setInputValue] = useState(minAmount.toString());\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const step = useMemo(\n        () => (Number.isSafeInteger(stepProp) && stepProp >= 1 ? stepProp : 1),\n        [stepProp],\n    );\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount === 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            case amountValue === minAmount && amountValue >= 0 && shouldShowAddIconOnMinAmount:\n                setDisplayState('minAmount');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount, minAmount, shouldShowAddIconOnMinAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (typeof amount !== \"number\") {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    const handleAmountAdd = useCallback(() => {\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState + step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return typeof amount === 'number' ? prevState : newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) + step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [amount, maxAmount, minAmount, onChange, step]);\n\n    const handleAmountRemove = useCallback(() => {\n        if (displayState === 'default') {\n            return;\n        }\n\n        setAmountValue((prevState) => {\n            const newAmount = checkForValidAmount({\n                amount: prevState - step,\n                minAmount,\n                maxAmount,\n            });\n\n            if (typeof onChange === 'function') {\n                onChange(newAmount);\n            }\n\n            return newAmount;\n        });\n        setInputValue((prevState) =>\n            checkForValidAmount({\n                amount: Number(prevState) - step,\n                minAmount,\n                maxAmount,\n            }).toString(),\n        );\n    }, [displayState, maxAmount, minAmount, onChange, step]);\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== minAmount) {\n            return;\n        }\n\n        if (typeof onChange === 'function') {\n            onChange(minAmount + step);\n        }\n\n        setAmountValue(minAmount + step);\n        setInputValue((minAmount + step).toString());\n    }, [amountValue, minAmount, onChange, step]);\n\n    const handleDeleteIconClick = useCallback(() => {\n        if (inputValue === '0') {\n            window.setTimeout(() => {\n                inputRef.current?.focus();\n            }, 500);\n        } else {\n            handleAmountRemove();\n        }\n    }, [handleAmountRemove, inputValue]);\n\n    const handleInputBlur = useCallback(() => {\n        const checkedValue = checkForValidAmount({\n            minAmount,\n            maxAmount,\n            amount: Math.round(Number(inputValue) / step) * step,\n        });\n\n        setAmountValue(checkedValue);\n        setInputValue(checkedValue.toString());\n\n        if (typeof onChange === 'function') {\n            onChange(checkedValue);\n        }\n\n        if (inputValue === '') {\n            setInputValue(minAmount.toString());\n        }\n    }, [inputValue, maxAmount, minAmount, onChange, step]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const { value } = event.target;\n\n            const valueBefore = Number(value.replace(/\\D/g, ''));\n\n            if (valueBefore < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(valueBefore === 0 ? '' : valueBefore.toString());\n        },\n        [minAmount],\n    );\n\n    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 (shouldShowAddIconOnMinAmount && displayState === 'minAmount') {\n            return false;\n        }\n\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !((displayState === 'default' || displayState === 'minAmount') && !shouldShowIcon);\n    }, [displayState, shouldShowAddIconOnMinAmount, shouldShowIcon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount} $isDisabled={isDisabled}>\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' || displayState === 'minAmount') && (\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\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            isDisabled,\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":"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","ignoreList":[]}

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

@@ -0,0 +1,134 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledAmountControl = styled.div`
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['202'];
+}};
+    display: flex;
+    width: fit-content;
+    border-radius: 3px;
+    overflow: hidden;
+    transition: opacity 0.2s ease;
+
+    ${_ref2 => {
+  let {
+    $isDisabled
+  } = _ref2;
+  return $isDisabled && css`
+            opacity: 0.5;
+            pointer-events: none;
+        `;
+}}
+`;
+export const StyledAmountControlInput = styled.input`
+    background-color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['202'];
+}};
+    color: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.text;
+}};
+    border: none;
+    height: 28px;
+    width: ${_ref5 => {
+  let {
+    $shouldShowWideInput
+  } = _ref5;
+  return $shouldShowWideInput ? 90 : 55;
+}}px;
+    text-align: center;
+    cursor: ${_ref6 => {
+  let {
+    $hasFocus
+  } = _ref6;
+  return $hasFocus ? 'text' : 'pointer';
+}};
+
+    ${_ref7 => {
+  let {
+    $displayState
+  } = _ref7;
+  return $displayState !== 'normal' && css`
+            border-bottom-right-radius: 3px;
+            border-top-right-radius: 3px;
+        `;
+}}
+    ${_ref8 => {
+  let {
+    $displayState,
+    $shouldShowIcon
+  } = _ref8;
+  return $displayState === 'default' && !$shouldShowIcon && css`
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
+        `;
+}};
+`;
+export const StyledAmountControlPseudoInput = styled.div`
+    background-color: ${_ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme['202'];
+}};
+    color: ${_ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.text;
+}};
+    border: none;
+    height: 28px;
+    min-width: ${_ref11 => {
+  let {
+    $shouldShowWideInput
+  } = _ref11;
+  return $shouldShowWideInput ? 90 : 55;
+}}px;
+    padding: 0 8px;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+`;
+export const StyledMotionAmountControlButton = styled(motion.button)`
+    overflow: hidden;
+    background-color: ${_ref12 => {
+  let {
+    $color
+  } = _ref12;
+  return $color ?? 'rgba(255, 255, 255, 0.2)';
+}};
+    transition: background-color 0.2s ease-in-out;
+    height: 28px;
+    width: ${_ref13 => {
+  let {
+    $isWide
+  } = _ref13;
+  return $isWide ? 40 : 28;
+}}px;
+
+    ${_ref14 => {
+  let {
+    $isDisabled
+  } = _ref14;
+  return $isDisabled && css`
+            opacity: 0.5;
+        `;
+}}
+`;
+//# sourceMappingURL=AmountControl.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","_ref2","$isDisabled","StyledAmountControlInput","input","_ref3","_ref4","text","_ref5","$shouldShowWideInput","_ref6","$hasFocus","_ref7","$displayState","_ref8","$shouldShowIcon","StyledAmountControlPseudoInput","_ref9","_ref10","_ref11","StyledMotionAmountControlButton","button","_ref12","$color","_ref13","$isWide","_ref14"],"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<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n    overflow: hidden;\n    transition: opacity 0.2s ease;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n            pointer-events: none;\n        `}\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState !== 'normal' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlPseudoInputProps = WithTheme<{\n    $shouldShowWideInput: boolean;\n}>;\n\nexport const StyledAmountControlPseudoInput = styled.div<StyledAmountControlPseudoInputProps>`\n    background-color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme['202']};\n    color: ${({ theme }: StyledAmountControlPseudoInputProps) => theme.text};\n    border: none;\n    height: 28px;\n    min-width: ${({ $shouldShowWideInput }) => ($shouldShowWideInput ? 90 : 55)}px;\n    padding: 0 8px;\n    text-align: center;\n    cursor: pointer;\n    user-select: none;\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $color?: string;\n    $isWide?: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: ${({ $color }) => $color ?? 'rgba(255, 255, 255, 0.2)'};\n    transition: background-color 0.2s ease-in-out;\n    height: 28px;\n    width: ${({ $isWide }) => ($isWide ? 40 : 28)}px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA6B;AACvE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACXN,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,CAAC;AASD,OAAO,MAAMO,wBAAwB,GAAGR,MAAM,CAACS,KAAoC;AACnF,wBAAwBC,KAAA;EAAA,IAAC;IAAEL;EAAqC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,KAAK,CAAC;AAAA;AAClF,aAAaM,KAAA;EAAA,IAAC;IAAEN;EAAqC,CAAC,GAAAM,KAAA;EAAA,OAAKN,KAAK,CAACO,IAAI;AAAA;AACrE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AAC3E;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,MAAM,GAAG,SAAS;AAAA,CAAC;AACjE;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,IAC1BjB,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,MAAMkB,KAAA;EAAA,IAAC;IAAED,aAAa;IAAEE;EAAgB,CAAC,GAAAD,KAAA;EAAA,OACjCD,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChBnB,GAAG;AACX;AACA;AACA,SAAS;AAAA;AACT,CAAC;AAMD,OAAO,MAAMoB,8BAA8B,GAAGrB,MAAM,CAACG,GAAwC;AAC7F,wBAAwBmB,KAAA;EAAA,IAAC;IAAEjB;EAA2C,CAAC,GAAAiB,KAAA;EAAA,OAAKjB,KAAK,CAAC,KAAK,CAAC;AAAA;AACxF,aAAakB,MAAA;EAAA,IAAC;IAAElB;EAA2C,CAAC,GAAAkB,MAAA;EAAA,OAAKlB,KAAK,CAACO,IAAI;AAAA;AAC3E;AACA;AACA,iBAAiBY,MAAA;EAAA,IAAC;IAAEV;EAAqB,CAAC,GAAAU,MAAA;EAAA,OAAMV,oBAAoB,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMW,+BAA+B,GAAGzB,MAAM,CACjDD,MAAM,CAAC2B,MACX,CAAiC;AACjC;AACA,wBAAwBC,MAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,MAAA;EAAA,OAAKC,MAAM,IAAI,0BAA0B;AAAA;AAC5E;AACA;AACA,aAAaC,MAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,MAAA;EAAA,OAAMC,OAAO,GAAG,EAAE,GAAG,EAAE;AAAA,CAAC;AACjD;AACA,MAAMC,MAAA;EAAA,IAAC;IAAExB;EAAY,CAAC,GAAAwB,MAAA;EAAA,OACdxB,WAAW,IACXN,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/area-provider/AreaContextProvider.js

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+export const AreaContext = /*#__PURE__*/React.createContext({
+  shouldChangeColor: undefined
+});
+AreaContext.displayName = 'AreaContext';
+const AreaContextProvider = _ref => {
+  let {
+    children,
+    shouldChangeColor = true
+  } = _ref;
+  const providerValue = useMemo(() => ({
+    shouldChangeColor
+  }), [shouldChangeColor]);
+  return /*#__PURE__*/React.createElement(AreaContext.Provider, {
+    value: providerValue
+  }, children);
+};
+AreaContextProvider.displayName = 'AreaContextProvider';
+export default AreaContextProvider;
+//# sourceMappingURL=AreaContextProvider.js.map

package/lib/esm/components/area-provider/AreaContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaContextProvider.js","names":["React","useMemo","AreaContext","createContext","shouldChangeColor","undefined","displayName","AreaContextProvider","_ref","children","providerValue","createElement","Provider","value"],"sources":["../../../../src/components/area-provider/AreaContextProvider.tsx"],"sourcesContent":["import React, { useMemo, type ReactNode } from 'react';\n\ninterface IAreaProviderContext {\n    shouldChangeColor?: boolean;\n}\n\nexport const AreaContext = React.createContext<IAreaProviderContext>({\n    shouldChangeColor: undefined,\n});\n\nAreaContext.displayName = 'AreaContext';\n\ninterface AreaContextProviderProps {\n    children: ReactNode;\n    shouldChangeColor?: boolean;\n}\n\nconst AreaContextProvider = ({ children, shouldChangeColor = true }: AreaContextProviderProps) => {\n    const providerValue = useMemo<IAreaProviderContext>(\n        () => ({\n            shouldChangeColor,\n        }),\n        [shouldChangeColor],\n    );\n\n    return <AreaContext.Provider value={providerValue}>{children}</AreaContext.Provider>;\n};\n\nAreaContextProvider.displayName = 'AreaContextProvider';\n\nexport default AreaContextProvider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAwB,OAAO;AAMtD,OAAO,MAAMC,WAAW,gBAAGF,KAAK,CAACG,aAAa,CAAuB;EACjEC,iBAAiB,EAAEC;AACvB,CAAC,CAAC;AAEFH,WAAW,CAACI,WAAW,GAAG,aAAa;AAOvC,MAAMC,mBAAmB,GAAGC,IAAA,IAAsE;EAAA,IAArE;IAAEC,QAAQ;IAAEL,iBAAiB,GAAG;EAA+B,CAAC,GAAAI,IAAA;EACzF,MAAME,aAAa,GAAGT,OAAO,CACzB,OAAO;IACHG;EACJ,CAAC,CAAC,EACF,CAACA,iBAAiB,CACtB,CAAC;EAED,oBAAOJ,KAAA,CAAAW,aAAA,CAACT,WAAW,CAACU,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAAED,QAA+B,CAAC;AACxF,CAAC;AAEDF,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,eAAeC,mBAAmB","ignoreList":[]}

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

@@ -0,0 +1,33 @@
+import clsx from 'clsx';
+import React, { useRef } from 'react';
+import { useElementSize } from '../../hooks/useElementSize';
+import { StyledBadge } from './Badge.styles';
+const Badge = _ref => {
+  let {
+    backgroundColor,
+    children,
+    className,
+    fontColor,
+    onClick
+  } = _ref;
+  const badgeClasses = clsx('beta-chayns-badge ellipsis', className);
+  const badgeRef = useRef(null);
+  const size = useElementSize(badgeRef);
+
+  // Add 4px to the height to account for the padding
+  const borderRadius = size ? `${(size.height + 4) / 2}px` : '15px';
+  const minWidth = size ? `${size.height + 4}px` : '1.65rem';
+  return /*#__PURE__*/React.createElement(StyledBadge, {
+    className: badgeClasses,
+    onClick: onClick,
+    ref: badgeRef,
+    $backgroundColor: backgroundColor,
+    $borderRadius: borderRadius,
+    $cursor: typeof onClick === 'function' ? 'pointer' : 'default',
+    $fontColor: fontColor,
+    $minWidth: minWidth
+  }, children || '​');
+};
+Badge.displayName = 'Badge';
+export default Badge;
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","names":["clsx","React","useRef","useElementSize","StyledBadge","Badge","_ref","backgroundColor","children","className","fontColor","onClick","badgeClasses","badgeRef","size","borderRadius","height","minWidth","createElement","ref","$backgroundColor","$borderRadius","$cursor","$fontColor","$minWidth","displayName"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, ReactNode, useRef, type CSSProperties, type MouseEventHandler } from 'react';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { StyledBadge } from './Badge.styles';\n\nexport type BadgeProps = {\n    /**\n     * The background color of the badge\n     */\n    backgroundColor?: CSSProperties['backgroundColor'];\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?: CSSProperties['color'];\n    /**\n     * Function to be executed when the badge is clicked\n     */\n    onClick?: MouseEventHandler;\n};\n\nconst Badge: FC<BadgeProps> = ({ backgroundColor, children, className, fontColor, onClick }) => {\n    const badgeClasses = clsx('beta-chayns-badge ellipsis', className);\n\n    const badgeRef = useRef<HTMLDivElement>(null);\n\n    const size = useElementSize(badgeRef);\n\n    // Add 4px to the height to account for the padding\n    const borderRadius = size ? `${(size.height + 4) / 2}px` : '15px';\n    const minWidth = size ? `${size.height + 4}px` : '1.65rem';\n\n    return (\n        <StyledBadge\n            className={badgeClasses}\n            onClick={onClick}\n            ref={badgeRef}\n            $backgroundColor={backgroundColor}\n            $borderRadius={borderRadius}\n            $cursor={typeof onClick === 'function' ? 'pointer' : 'default'}\n            $fontColor={fontColor}\n            $minWidth={minWidth}\n        >\n            {children || '​'}\n        </StyledBadge>\n    );\n};\n\nBadge.displayName = 'Badge';\n\nexport default Badge;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,OAAOC,KAAK,IAAmBC,MAAM,QAAoD,OAAO;AAChG,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,gBAAgB;AAyB5C,MAAMC,KAAqB,GAAGC,IAAA,IAAkE;EAAA,IAAjE;IAAEC,eAAe;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,SAAS;IAAEC;EAAQ,CAAC,GAAAL,IAAA;EACvF,MAAMM,YAAY,GAAGZ,IAAI,CAAC,4BAA4B,EAAES,SAAS,CAAC;EAElE,MAAMI,QAAQ,GAAGX,MAAM,CAAiB,IAAI,CAAC;EAE7C,MAAMY,IAAI,GAAGX,cAAc,CAACU,QAAQ,CAAC;;EAErC;EACA,MAAME,YAAY,GAAGD,IAAI,GAAG,GAAG,CAACA,IAAI,CAACE,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM;EACjE,MAAMC,QAAQ,GAAGH,IAAI,GAAG,GAAGA,IAAI,CAACE,MAAM,GAAG,CAAC,IAAI,GAAG,SAAS;EAE1D,oBACIf,KAAA,CAAAiB,aAAA,CAACd,WAAW;IACRK,SAAS,EAAEG,YAAa;IACxBD,OAAO,EAAEA,OAAQ;IACjBQ,GAAG,EAAEN,QAAS;IACdO,gBAAgB,EAAEb,eAAgB;IAClCc,aAAa,EAAEN,YAAa;IAC5BO,OAAO,EAAE,OAAOX,OAAO,KAAK,UAAU,GAAG,SAAS,GAAG,SAAU;IAC/DY,UAAU,EAAEb,SAAU;IACtBc,SAAS,EAAEP;EAAS,GAEnBT,QAAQ,IAAI,GACJ,CAAC;AAEtB,CAAC;AAEDH,KAAK,CAACoB,WAAW,GAAG,OAAO;AAE3B,eAAepB,KAAK","ignoreList":[]}

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

@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+export const StyledBadge = styled.div`
+    background-color: ${_ref => {
+  let {
+    $backgroundColor,
+    theme
+  } = _ref;
+  return $backgroundColor ?? theme['secondary-202'];
+}};
+    border-radius: ${_ref2 => {
+  let {
+    $borderRadius
+  } = _ref2;
+  return $borderRadius;
+}};
+    color: ${_ref3 => {
+  let {
+    $fontColor,
+    theme
+  } = _ref3;
+  return $fontColor ?? theme.text;
+}};
+    display: inline-block;
+    font-size: 0.8rem;
+    min-width: ${_ref4 => {
+  let {
+    $minWidth
+  } = _ref4;
+  return $minWidth;
+}};
+    padding: 2px 6px;
+    line-height: 20px;
+    text-align: center;
+    cursor: ${_ref5 => {
+  let {
+    $cursor
+  } = _ref5;
+  return $cursor;
+}};
+`;
+//# sourceMappingURL=Badge.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.styles.js","names":["styled","StyledBadge","div","_ref","$backgroundColor","theme","_ref2","$borderRadius","_ref3","$fontColor","text","_ref4","$minWidth","_ref5","$cursor"],"sources":["../../../../src/components/badge/Badge.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledBadgeProps = WithTheme<{\n    $cursor: CSSProperties['cursor'];\n    $backgroundColor?: CSSProperties['backgroundColor'];\n    $borderRadius: CSSProperties['borderRadius'];\n    $fontColor?: CSSProperties['color'];\n    $minWidth: CSSProperties['minWidth'];\n}>;\n\nexport const StyledBadge = styled.div<StyledBadgeProps>`\n    background-color: ${({ $backgroundColor, theme }: StyledBadgeProps) =>\n        $backgroundColor ?? theme['secondary-202']};\n    border-radius: ${({ $borderRadius }) => $borderRadius};\n    color: ${({ $fontColor, theme }: StyledBadgeProps) => $fontColor ?? theme.text};\n    display: inline-block;\n    font-size: 0.8rem;\n    min-width: ${({ $minWidth }) => $minWidth};\n    padding: 2px 6px;\n    line-height: 20px;\n    text-align: center;\n    cursor: ${({ $cursor }) => $cursor};\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AAWtC,OAAO,MAAMC,WAAW,GAAGD,MAAM,CAACE,GAAqB;AACvD,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,gBAAgB;IAAEC;EAAwB,CAAC,GAAAF,IAAA;EAAA,OAC9DC,gBAAgB,IAAIC,KAAK,CAAC,eAAe,CAAC;AAAA;AAClD,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAAKC,aAAa;AAAA;AACzD,aAAaC,KAAA;EAAA,IAAC;IAAEC,UAAU;IAAEJ;EAAwB,CAAC,GAAAG,KAAA;EAAA,OAAKC,UAAU,IAAIJ,KAAK,CAACK,IAAI;AAAA;AAClF;AACA;AACA,iBAAiBC,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAKC,SAAS;AAAA;AAC7C;AACA;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAKC,OAAO;AAAA;AACtC,CAAC","ignoreList":[]}