@chayns-components/core 5.0.0-beta.535 → 5.0.0-beta.537

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

@@ -21,6 +21,10 @@ export type AmountControlProps = {
      * A Function that is executed when the amount is changed
      */
     onChange?: (amount: number) => void;
+    /**
+     * Whether the icon should be displayed if no amount is selected
+     */
+    shouldShowIcon?: boolean;
 };
 declare const AmountControl: FC<AmountControlProps>;
 export default AmountControl;

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

@@ -7,6 +7,7 @@ const AmountControl = _ref => {
   let {
     amount,
     icon,
+    shouldShowIcon = true,
     label,
     maxAmount,
     onChange
@@ -130,14 +131,43 @@ const AmountControl = _ref => {
     }
     return item;
   }, [displayState, icon]);
+  const shouldShowLeftIcon = useMemo(() => {
+    if (shouldShowIcon) {
+      return true;
+    }
+    return !(displayState === 'default' && !shouldShowIcon);
+  }, [displayState, shouldShowIcon]);
   return useMemo(() => /*#__PURE__*/React.createElement(StyledAmountControl, {
     onClick: handleFirstAmount
-  }, /*#__PURE__*/React.createElement(StyledMotionAmountControlButton, {
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, shouldShowLeftIcon && /*#__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: handleAmountRemove,
     disabled: amountValue !== 0 && amountValue <= minAmount,
     $isDisabled: amountValue !== 0 && amountValue <= minAmount
-  }, leftIcon), /*#__PURE__*/React.createElement(StyledAmountControlInput, {
+  }, leftIcon)), /*#__PURE__*/React.createElement(StyledAmountControlInput, {
     $displayState: displayState,
+    $shouldShowIcon: shouldShowIcon,
     onBlur: handleInputBlur,
     onChange: handleInputChange,
     value: displayState === 'default' && label ? label : inputValue,
@@ -172,7 +202,7 @@ const AmountControl = _ref => {
     icons: ['fa fa-plus'],
     size: 15,
     color: "green"
-  })))), [amountValue, displayState, handleFirstAmount, handleInputBlur, handleInputChange, inputValue, label, leftIcon, maxAmount, minAmount]);
+  })))), [amountValue, displayState, handleFirstAmount, handleInputBlur, handleInputChange, inputValue, label, leftIcon, maxAmount, shouldShowIcon, shouldShowLeftIcon]);
 };
 AmountControl.displayName = 'AmountControl';
 export default AmountControl;

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

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","label","maxAmount","onChange","amountValue","setAmountValue","inputValue","setInputValue","displayState","setDisplayState","minAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","handleInputBlur","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","leftIcon","item","createElement","icons","size","color","onClick","disabled","$isDisabled","$displayState","onBlur","type","initial","key","width","opacity","padding","animate","exit","transition","duration","displayName"],"sources":["../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * 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, icon, 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={[icon ?? '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, icon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount}>\n                <StyledMotionAmountControlButton\n                    onClick={handleAmountRemove}\n                    disabled={amountValue !== 0 && amountValue <= minAmount}\n                    $isDisabled={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                            $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n                        >\n                            <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            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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"}
+{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","maxAmount","onChange","amountValue","setAmountValue","inputValue","setInputValue","displayState","setDisplayState","minAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","handleInputBlur","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","$isDisabled","$displayState","$shouldShowIcon","onBlur","displayName"],"sources":["../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * A Text that should be displayed, if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    maxAmount,\n    onChange,\n}) => {\n    const [amountValue, setAmountValue] = useState(0);\n    const [inputValue, setInputValue] = useState('0');\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const minAmount = 0;\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount === 1 && amountValue === 1:\n                setDisplayState('delete');\n                return;\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > 0:\n                setDisplayState('normal');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount]);\n\n    /**\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={[icon ?? '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, icon]);\n\n    const shouldShowLeftIcon = useMemo(() => {\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !(displayState === 'default' && !shouldShowIcon);\n    }, [displayState, shouldShowIcon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount}>\n                <AnimatePresence initial={false}>\n                    {shouldShowLeftIcon && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{ width: 40, opacity: 1, padding: 0 }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                <StyledAmountControlInput\n                    $displayState={displayState}\n                    $shouldShowIcon={shouldShowIcon}\n                    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                            $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n                        >\n                            <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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"}

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

@@ -7,6 +7,7 @@ export declare const StyledAmountControl: import("styled-components").IStyledCom
 }>>;
 type StyledAmountControlInputProps = WithTheme<{
     $displayState: DisplayState;
+    $shouldShowIcon: boolean;
 }>;
 export declare const StyledAmountControlInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledAmountControlInputProps>>;
 type StyledAmountControlButtonProps = WithTheme<{

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

@@ -31,6 +31,17 @@ export const StyledAmountControlInput = styled.input`
             border-top-right-radius: 3px;
         `;
 }}
+
+    ${_ref4 => {
+  let {
+    $displayState,
+    $shouldShowIcon
+  } = _ref4;
+  return $displayState === 'default' && !$shouldShowIcon && css`
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
+        `;
+}}
 `;
 export const StyledMotionAmountControlButton = styled(motion.button)`
     overflow: hidden;
@@ -38,10 +49,10 @@ export const StyledMotionAmountControlButton = styled(motion.button)`
     height: 28px;
     width: 40px;
 
-    ${_ref4 => {
+    ${_ref5 => {
   let {
     $isDisabled
-  } = _ref4;
+  } = _ref5;
   return $isDisabled && css`
             opacity: 0.5;
         `;

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

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","StyledAmountControlInput","input","_ref2","_ref3","$displayState","StyledMotionAmountControlButton","button","_ref4","$isDisabled"],"sources":["../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n}>;\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    $isDisabled: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: rgba(255, 255, 255, 0.2);\n    height: 28px;\n    width: 40px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAM/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACO,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA,MAAMI,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,IAC1BT,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAMD,OAAO,MAAMU,+BAA+B,GAAGX,MAAM,CACjDD,MAAM,CAACa,MACX,CAAkC;AAClC;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACXb,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC"}
+{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","StyledAmountControlInput","input","_ref2","_ref3","$displayState","_ref4","$shouldShowIcon","StyledMotionAmountControlButton","button","_ref5","$isDisabled"],"sources":["../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n}>;\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    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `}\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: rgba(255, 255, 255, 0.2);\n    height: 28px;\n    width: 40px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAM/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACO,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA,MAAMI,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,IAC1BT,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMU,KAAA;EAAA,IAAC;IAAED,aAAa;IAAEE;EAAgB,CAAC,GAAAD,KAAA;EAAA,OACjCD,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChBX,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAMD,OAAO,MAAMY,+BAA+B,GAAGb,MAAM,CACjDD,MAAM,CAACe,MACX,CAAkC;AAClC;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACXf,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC"}

package/lib/components/checkbox/Checkbox.styles.js

@@ -81,43 +81,53 @@ export const StyledCheckboxLabel = styled.label`
   }
   return $isChecked ? theme['408'] : theme['403'];
 }};
-        border: 1px solid rgba(${_ref7 => {
+        
+        ${_ref7 => {
   let {
-    theme
+    $shouldShowAsSwitch
   } = _ref7;
-  return theme['409-rgb'];
-}}, 0.5);
-        border-radius: ${_ref8 => {
+  return !$shouldShowAsSwitch && css`
+                border: 1px solid
+                    rgba(${_ref8 => {
+    let {
+      theme
+    } = _ref8;
+    return theme['409-rgb'];
+  }}, 0.5);
+            `;
+}}
+        
+        border-radius: ${_ref9 => {
   let {
     $shouldShowAsSwitch
-  } = _ref8;
+  } = _ref9;
   return $shouldShowAsSwitch ? '100px' : 0;
 }};
         content: ' ';
-        height: ${_ref9 => {
+        height: ${_ref10 => {
   let {
     $shouldShowAsSwitch
-  } = _ref9;
+  } = _ref10;
   return $shouldShowAsSwitch ? '13px' : '15px';
 }};
-        left: ${_ref10 => {
+        left: ${_ref11 => {
   let {
     $shouldShowAsSwitch
-  } = _ref10;
+  } = _ref11;
   return $shouldShowAsSwitch ? '10px' : 0;
 }};
         position: absolute;
         transition: background-color 0.2s ease;
-        width: ${_ref11 => {
+        width: ${_ref12 => {
   let {
     $shouldShowAsSwitch
-  } = _ref11;
+  } = _ref12;
   return $shouldShowAsSwitch ? '28px' : '15px';
 }};
-        ${_ref12 => {
+        ${_ref13 => {
   let {
     $lineHeight
-  } = _ref12;
+  } = _ref13;
   return $lineHeight ? css`
                       top: ${$lineHeight / 1.5}px;
                       transform: translateY(-50%);

package/lib/components/checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12"],"sources":["../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch, $lineHeight }) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: ${$lineHeight ? `${$lineHeight / 1.5}px` : '50%'};\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: ${$lineHeight\n                          ? `calc(${$lineHeight / 1.5}px - 2px)`\n                          : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxLabelProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n        border: 1px solid rgba(${({ theme }: StyledCheckboxLabelProps) => theme['409-rgb']}, 0.5);\n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight }) =>\n            $lineHeight\n                ? css`\n                      top: ${$lineHeight / 1.5}px;\n                      transform: translateY(-50%);\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n        }\n    }\n`;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.styles.js","names":["styled","css","StyledCheckbox","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","_ref","theme","text","_ref2","$isDisabled","_ref3","_ref4","$shouldShowAsSwitch","_ref5","$isChecked","$lineHeight","_ref6","green","red","_ref7","_ref8","_ref9","_ref10","_ref11","_ref12","_ref13"],"sources":["../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<{\n    $shouldShowAsSwitch?: CheckboxProps['shouldShowAsSwitch'];\n    $isDisabled?: CheckboxProps['isDisabled'];\n    $isChecked?: CheckboxProps['isChecked'];\n    $lineHeight?: number;\n}>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    color: ${({ theme }: StyledCheckboxLabelProps) => theme.text};\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding-left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ $isChecked, $shouldShowAsSwitch, $lineHeight }) =>\n            $shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      top: ${$lineHeight ? `${$lineHeight / 1.5}px` : '50%'};\n                      transform: translateX(${$isChecked ? '18px' : 0}) translateY(-50%);\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 2px;\n                      opacity: ${$isChecked ? 1 : 0};\n                      top: ${$lineHeight\n                          ? `calc(${$lineHeight / 1.5}px - 2px)`\n                          : 'calc(50% - 2px)'};\n                      transform: rotateZ(37deg) translateY(-50%);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n    }\n\n    &:before {\n        background-color: ${({\n            $isChecked,\n            $shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxLabelProps) => {\n            if ($shouldShowAsSwitch) {\n                return $isChecked ? theme.green : theme.red;\n            }\n\n            return $isChecked ? theme['408'] : theme['403'];\n        }};\n        \n        ${({ $shouldShowAsSwitch }) =>\n            !$shouldShowAsSwitch &&\n            css`\n                border: 1px solid\n                    rgba(${({ theme }: StyledCheckboxLabelProps) => theme['409-rgb']}, 0.5);\n            `}\n        \n        border-radius: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        transition: background-color 0.2s ease;\n        width: ${({ $shouldShowAsSwitch }) => ($shouldShowAsSwitch ? '28px' : '15px')};\n        ${({ $lineHeight }) =>\n            $lineHeight\n                ? css`\n                      top: ${$lineHeight / 1.5}px;\n                      transform: translateY(-50%);\n                  `\n                : css`\n                      top: 50%;\n                      transform: translateY(-50%);\n                  `}\n        }\n    }\n`;\n"],"mappings":"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"}

package/lib/components/content-card/ContentCard.styles.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
-export declare const StyledContentCard: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledContentCard: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}>>;

package/lib/components/content-card/ContentCard.styles.js

@@ -1,28 +1,16 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 export const StyledContentCard = styled.div`
-    background-color: rgba(${_ref => {
+    ${_ref => {
   let {
     theme
   } = _ref;
-  return theme['100-rgb'];
-}}, ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.cardBackgroundOpacity;
-}};
-    border-radius: ${_ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.cardBorderRadius;
-}}px;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${_ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.cardShadow;
-}});
+  return css`
+        background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
+        border-radius: ${theme.cardBorderRadius}px;
+        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
+    `;
+}}
+
     padding: 8px 12px;
 
     &:not(:last-child) {

package/lib/components/content-card/ContentCard.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentCard.styles.js","names":["styled","StyledContentCard","div","_ref","theme","_ref2","cardBackgroundOpacity","_ref3","cardBorderRadius","_ref4","cardShadow"],"sources":["../../../src/components/content-card/ContentCard.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContentCardProps = WithTheme<unknown>;\n\nexport const StyledContentCard = styled.div`\n    background-color: rgba(${({ theme }: StyledContentCardProps) => theme['100-rgb']}, ${({ theme }: StyledContentCardProps) => theme.cardBackgroundOpacity};\n    border-radius: ${({ theme }: StyledContentCardProps) => theme.cardBorderRadius}px;\n    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${({ theme }: StyledContentCardProps) => theme.cardShadow});\n    padding: 8px 12px;\n\n    &:not(:last-child) {\n        margin-bottom: 8px;\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,iBAAiB,GAAGD,MAAM,CAACE,GAAI;AAC5C,6BAA6BC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC,KAAIC,KAAA;EAAA,IAAC;IAAED;EAA8B,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,qBAAqB;AAAA,CAAC;AAC5J,qBAAqBC,KAAA;EAAA,IAAC;IAAEH;EAA8B,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,gBAAgB;AAAA,CAAC;AACnF,4CAA4CC,KAAA;EAAA,IAAC;IAAEL;EAA8B,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAACM,UAAU;AAAA,CAAC;AACpG;AACA;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"ContentCard.styles.js","names":["styled","css","StyledContentCard","div","_ref","theme","cardBackgroundOpacity","cardBorderRadius","cardShadow"],"sources":["../../../src/components/content-card/ContentCard.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContentCardProps = WithTheme<unknown>;\n\nexport const StyledContentCard = styled.div<StyledContentCardProps>`\n    ${({ theme }: StyledContentCardProps) => css`\n        background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        border-radius: ${theme.cardBorderRadius}px;\n        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n    `}\n\n    padding: 8px 12px;\n\n    &:not(:last-child) {\n        margin-bottom: 8px;\n    }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,GAA4B;AACpE,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAKH,GAAI;AACjD,iCAAiCI,KAAK,CAAC,SAAS,CAAE,KAAIA,KAAK,CAACC,qBAAsB;AAClF,yBAAyBD,KAAK,CAACE,gBAAiB;AAChD,gDAAgDF,KAAK,CAACG,UAAW;AACjE,KAAK;AAAA,CAAC;AACN;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}

package/lib/components/context-menu/ContextMenu.js

@@ -10,7 +10,8 @@ const ContextMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     alignment,
     children = /*#__PURE__*/React.createElement(Icon, {
-      icons: ['ts-ellipsis_v']
+      icons: ['ts-ellipsis_v'],
+      size: 20
     }),
     container = document.body,
     coordinates,

package/lib/components/context-menu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","container","document","body","coordinates","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","handleHide","handleShow","isMobile","isTablet","chayns","env","buttonType","selection","dialog","select","buttons","list","map","_ref2","index","text","name","value","icon","type","onClick","current","rootElement","querySelector","height","childrenHeight","width","childrenWidth","getBoundingClientRect","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","addEventListener","window","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n    text: string;\n};\n\nexport type ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be closed if its clicked.\n     */\n    shouldCloseOnPopupClick?: boolean;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} />,\n            container = document.body,\n            coordinates,\n            items,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const { isMobile, isTablet } = chayns.env;\n\n            if (isMobile || isTablet) {\n                // ToDo: Replace with new api function if new api is ready\n                const { buttonType, selection } = await chayns.dialog.select({\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        value: index,\n                        icon: icons[0],\n                    })),\n                    type: 2,\n                });\n\n                if (buttonType === 1 && typeof selection[0]?.value === 'number') {\n                    void items[selection[0].value]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                const rootElement = document.querySelector('.tapp') || document.body;\n\n                const {\n                    x,\n                    y,\n                    height: childrenHeight,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n                const { height, width } = rootElement.getBoundingClientRect();\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [items]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            },\n            [handleHide, shouldCloseOnPopupClick],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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"}
+{"version":3,"file":"ContextMenu.js","names":["AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","ContextMenuAlignment","Icon","ContextMenuContent","StyledContextMenu","ContextMenu","_ref","ref","alignment","children","createElement","icons","size","container","document","body","coordinates","items","onHide","onShow","shouldCloseOnPopupClick","internalCoordinates","setInternalCoordinates","x","y","internalAlignment","setInternalAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","contextMenuContentRef","contextMenuRef","handleHide","handleShow","isMobile","isTablet","chayns","env","buttonType","selection","dialog","select","buttons","list","map","_ref2","index","text","name","value","icon","type","onClick","current","rootElement","querySelector","height","childrenHeight","width","childrenWidth","getBoundingClientRect","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","hide","show","addEventListener","window","removeEventListener","initial","key","Fragment","className","displayName"],"sources":["../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n    text: string;\n};\n\nexport type ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be closed if its clicked.\n     */\n    shouldCloseOnPopupClick?: boolean;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} size={20} />,\n            container = document.body,\n            coordinates,\n            items,\n            onHide,\n            onShow,\n            shouldCloseOnPopupClick = true,\n        },\n        ref,\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft,\n        );\n        const [isContentShown, setIsContentShown] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const { isMobile, isTablet } = chayns.env;\n\n            if (isMobile || isTablet) {\n                // ToDo: Replace with new api function if new api is ready\n                const { buttonType, selection } = await chayns.dialog.select({\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        value: index,\n                        icon: icons[0],\n                    })),\n                    type: 2,\n                });\n\n                if (buttonType === 1 && typeof selection[0]?.value === 'number') {\n                    void items[selection[0].value]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                const rootElement = document.querySelector('.tapp') || document.body;\n\n                const {\n                    x,\n                    y,\n                    height: childrenHeight,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n                const { height, width } = rootElement.getBoundingClientRect();\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [items]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !shouldCloseOnPopupClick &&\n                    contextMenuContentRef.current?.contains(event.target as Node)\n                ) {\n                    return;\n                }\n\n                handleHide();\n            },\n            [handleHide, shouldCloseOnPopupClick],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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"}

package/lib/components/file-input/FileInput.d.ts

@@ -3,7 +3,23 @@ export type FileInputProps = {
     /**
      * An array of icons that should be displayed inside the FileInput
      */
-    icons?: string[];
+    fileSelectionIcons?: string[];
+    /**
+     * The text that should be displayed inside the FileInput.
+     */
+    fileSelectionPlaceholder?: string;
+    /**
+     * The filetypes that could be selected. Example for multiple types: 'image/*, video/*'.
+     */
+    fileTypes?: string;
+    /**
+     * The icon of the image selection.
+     */
+    imageSelectIcons?: string[];
+    /**
+     * If set, pictures can be select via Pixabay.
+     */
+    imageSelectPlaceholder?: string;
     /**
      * The maximum amount of Files that can be uploaded.
      */
@@ -11,7 +27,7 @@ export type FileInputProps = {
     /**
      * A function to be executed when files are added.
      */
-    onAdd?: (files: File[]) => void;
+    onAdd?: (files: File[] | string[]) => void;
     /**
      * Function to be executed when the maximum amount of Files are reached.
      */
@@ -19,11 +35,7 @@ export type FileInputProps = {
     /**
      * A function to be executed when a file is removed.
      */
-    onRemove?: (file: File) => void;
-    /**
-     * The text that should be displayed inside the FileInput
-     */
-    placeholder?: string;
+    onRemove?: (file: File | string) => void;
 };
 declare const FileInput: FC<FileInputProps>;
 export default FileInput;