@chayns-components/core 5.0.0-beta.430 → 5.0.0-beta.433

package/README.md

@@ -31,14 +31,4 @@ yarn add @chayns-components/core
 
 ## Usage
 
-You can use the components in your project as in the following example.
-
-```typescript jsx
-import { Button } from '@chayns-components/core';
-
-const handleButtonClick: MouseEventHandler<HTMLButtonElement> = (event) => {
-    // Your code
-};
-
-<Button onClick={handleButtonClick}>Click me!</Button>;
-```
+For detailed usage visit the [storybook](https://components.chayns.site/storybook).

package/lib/api/signature/delete.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.deleteUserSignature = void 0;
-var _signature = require("../../constants/signature");
 var _chaynsApi = require("chayns-api");
+var _signature = require("../../constants/signature");
 const deleteUserSignature = async () => {
   const {
     accessToken

package/lib/api/signature/delete.js.map

@@ -1 +1 @@
-{"version":3,"file":"delete.js","names":["_signature","require","_chaynsApi","deleteUserSignature","accessToken","getAccessToken","response","fetch","SIGNATURE_SERVER_URL","method","headers","accept","authorization","ok","status","console","error","ex","exports"],"sources":["../../../src/api/signature/delete.ts"],"sourcesContent":["import { SIGNATURE_SERVER_URL } from '../../constants/signature';\nimport { getAccessToken } from 'chayns-api';\n\nexport const deleteUserSignature = async () => {\n    const { accessToken } = await getAccessToken();\n\n    if (!accessToken) {\n        return false;\n    }\n\n    try {\n        const response = await fetch(SIGNATURE_SERVER_URL, {\n            method: 'DELETE',\n            headers: {\n                accept: 'application/json',\n                authorization: `bearer ${accessToken}`,\n            },\n        });\n\n        if (response.ok || response.status === 304) {\n            return true;\n        }\n\n        console.error(\n            '[chayns components] Signature: failed to delete user signature',\n            response.status,\n        );\n    } catch (ex) {\n        console.error('[chayns components] Signature: failed to delete user signature', ex);\n    }\n\n    return false;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEO,MAAME,mBAAmB,GAAG,MAAAA,CAAA,KAAY;EAC3C,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAM,IAAAC,yBAAc,EAAC,CAAC;EAE9C,IAAI,CAACD,WAAW,EAAE;IACd,OAAO,KAAK;EAChB;EAEA,IAAI;IACA,MAAME,QAAQ,GAAG,MAAMC,KAAK,CAACC,+BAAoB,EAAE;MAC/CC,MAAM,EAAE,QAAQ;MAChBC,OAAO,EAAE;QACLC,MAAM,EAAE,kBAAkB;QAC1BC,aAAa,EAAG,UAASR,WAAY;MACzC;IACJ,CAAC,CAAC;IAEF,IAAIE,QAAQ,CAACO,EAAE,IAAIP,QAAQ,CAACQ,MAAM,KAAK,GAAG,EAAE;MACxC,OAAO,IAAI;IACf;IAEAC,OAAO,CAACC,KAAK,CACT,gEAAgE,EAChEV,QAAQ,CAACQ,MACb,CAAC;EACL,CAAC,CAAC,OAAOG,EAAE,EAAE;IACTF,OAAO,CAACC,KAAK,CAAC,gEAAgE,EAAEC,EAAE,CAAC;EACvF;EAEA,OAAO,KAAK;AAChB,CAAC;AAACC,OAAA,CAAAf,mBAAA,GAAAA,mBAAA"}
+{"version":3,"file":"delete.js","names":["_chaynsApi","require","_signature","deleteUserSignature","accessToken","getAccessToken","response","fetch","SIGNATURE_SERVER_URL","method","headers","accept","authorization","ok","status","console","error","ex","exports"],"sources":["../../../src/api/signature/delete.ts"],"sourcesContent":["import { getAccessToken } from 'chayns-api';\nimport { SIGNATURE_SERVER_URL } from '../../constants/signature';\n\nexport const deleteUserSignature = async () => {\n    const { accessToken } = await getAccessToken();\n\n    if (!accessToken) {\n        return false;\n    }\n\n    try {\n        const response = await fetch(SIGNATURE_SERVER_URL, {\n            method: 'DELETE',\n            headers: {\n                accept: 'application/json',\n                authorization: `bearer ${accessToken}`,\n            },\n        });\n\n        if (response.ok || response.status === 304) {\n            return true;\n        }\n\n        console.error(\n            '[chayns components] Signature: failed to delete user signature',\n            response.status,\n        );\n    } catch (ex) {\n        console.error('[chayns components] Signature: failed to delete user signature', ex);\n    }\n\n    return false;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEO,MAAME,mBAAmB,GAAG,MAAAA,CAAA,KAAY;EAC3C,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAM,IAAAC,yBAAc,EAAC,CAAC;EAE9C,IAAI,CAACD,WAAW,EAAE;IACd,OAAO,KAAK;EAChB;EAEA,IAAI;IACA,MAAME,QAAQ,GAAG,MAAMC,KAAK,CAACC,+BAAoB,EAAE;MAC/CC,MAAM,EAAE,QAAQ;MAChBC,OAAO,EAAE;QACLC,MAAM,EAAE,kBAAkB;QAC1BC,aAAa,EAAG,UAASR,WAAY;MACzC;IACJ,CAAC,CAAC;IAEF,IAAIE,QAAQ,CAACO,EAAE,IAAIP,QAAQ,CAACQ,MAAM,KAAK,GAAG,EAAE;MACxC,OAAO,IAAI;IACf;IAEAC,OAAO,CAACC,KAAK,CACT,gEAAgE,EAChEV,QAAQ,CAACQ,MACb,CAAC;EACL,CAAC,CAAC,OAAOG,EAAE,EAAE;IACTF,OAAO,CAACC,KAAK,CAAC,gEAAgE,EAAEC,EAAE,CAAC;EACvF;EAEA,OAAO,KAAK;AAChB,CAAC;AAACC,OAAA,CAAAf,mBAAA,GAAAA,mBAAA"}

package/lib/api/signature/put.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.putUserSignature = void 0;
-var _signature = require("../../constants/signature");
 var _chaynsApi = require("chayns-api");
+var _signature = require("../../constants/signature");
 const putUserSignature = async dataURL => {
   const {
     accessToken

package/lib/api/signature/put.js.map

@@ -1 +1 @@
-{"version":3,"file":"put.js","names":["_signature","require","_chaynsApi","putUserSignature","dataURL","accessToken","getAccessToken","response","fetch","SIGNATURE_SERVER_URL","method","headers","accept","authorization","body","JSON","stringify","value","ok","console","error","status","ex","exports"],"sources":["../../../src/api/signature/put.ts"],"sourcesContent":["import { SIGNATURE_SERVER_URL } from '../../constants/signature';\nimport { getAccessToken } from 'chayns-api';\n\nexport const putUserSignature = async (dataURL: string) => {\n    const { accessToken } = await getAccessToken();\n\n    if (!accessToken) {\n        return false;\n    }\n\n    try {\n        const response = await fetch(SIGNATURE_SERVER_URL, {\n            method: 'PUT',\n            headers: {\n                accept: 'application/json',\n                authorization: `bearer ${accessToken}`,\n                'content-type': 'application/json',\n            },\n            body: JSON.stringify({ value: dataURL }),\n        });\n\n        if (response.ok) {\n            return true;\n        }\n\n        console.error(\n            '[chayns components] Signature: failed to put user signature',\n            response.status,\n        );\n    } catch (ex) {\n        console.error('[chayns components] Signature: failed to put user signature', ex);\n    }\n\n    return false;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEO,MAAME,gBAAgB,GAAG,MAAOC,OAAe,IAAK;EACvD,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAM,IAAAC,yBAAc,EAAC,CAAC;EAE9C,IAAI,CAACD,WAAW,EAAE;IACd,OAAO,KAAK;EAChB;EAEA,IAAI;IACA,MAAME,QAAQ,GAAG,MAAMC,KAAK,CAACC,+BAAoB,EAAE;MAC/CC,MAAM,EAAE,KAAK;MACbC,OAAO,EAAE;QACLC,MAAM,EAAE,kBAAkB;QAC1BC,aAAa,EAAG,UAASR,WAAY,EAAC;QACtC,cAAc,EAAE;MACpB,CAAC;MACDS,IAAI,EAAEC,IAAI,CAACC,SAAS,CAAC;QAAEC,KAAK,EAAEb;MAAQ,CAAC;IAC3C,CAAC,CAAC;IAEF,IAAIG,QAAQ,CAACW,EAAE,EAAE;MACb,OAAO,IAAI;IACf;IAEAC,OAAO,CAACC,KAAK,CACT,6DAA6D,EAC7Db,QAAQ,CAACc,MACb,CAAC;EACL,CAAC,CAAC,OAAOC,EAAE,EAAE;IACTH,OAAO,CAACC,KAAK,CAAC,6DAA6D,EAAEE,EAAE,CAAC;EACpF;EAEA,OAAO,KAAK;AAChB,CAAC;AAACC,OAAA,CAAApB,gBAAA,GAAAA,gBAAA"}
+{"version":3,"file":"put.js","names":["_chaynsApi","require","_signature","putUserSignature","dataURL","accessToken","getAccessToken","response","fetch","SIGNATURE_SERVER_URL","method","headers","accept","authorization","body","JSON","stringify","value","ok","console","error","status","ex","exports"],"sources":["../../../src/api/signature/put.ts"],"sourcesContent":["import { getAccessToken } from 'chayns-api';\nimport { SIGNATURE_SERVER_URL } from '../../constants/signature';\n\nexport const putUserSignature = async (dataURL: string) => {\n    const { accessToken } = await getAccessToken();\n\n    if (!accessToken) {\n        return false;\n    }\n\n    try {\n        const response = await fetch(SIGNATURE_SERVER_URL, {\n            method: 'PUT',\n            headers: {\n                accept: 'application/json',\n                authorization: `bearer ${accessToken}`,\n                'content-type': 'application/json',\n            },\n            body: JSON.stringify({ value: dataURL }),\n        });\n\n        if (response.ok) {\n            return true;\n        }\n\n        console.error(\n            '[chayns components] Signature: failed to put user signature',\n            response.status,\n        );\n    } catch (ex) {\n        console.error('[chayns components] Signature: failed to put user signature', ex);\n    }\n\n    return false;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAEO,MAAME,gBAAgB,GAAG,MAAOC,OAAe,IAAK;EACvD,MAAM;IAAEC;EAAY,CAAC,GAAG,MAAM,IAAAC,yBAAc,EAAC,CAAC;EAE9C,IAAI,CAACD,WAAW,EAAE;IACd,OAAO,KAAK;EAChB;EAEA,IAAI;IACA,MAAME,QAAQ,GAAG,MAAMC,KAAK,CAACC,+BAAoB,EAAE;MAC/CC,MAAM,EAAE,KAAK;MACbC,OAAO,EAAE;QACLC,MAAM,EAAE,kBAAkB;QAC1BC,aAAa,EAAG,UAASR,WAAY,EAAC;QACtC,cAAc,EAAE;MACpB,CAAC;MACDS,IAAI,EAAEC,IAAI,CAACC,SAAS,CAAC;QAAEC,KAAK,EAAEb;MAAQ,CAAC;IAC3C,CAAC,CAAC;IAEF,IAAIG,QAAQ,CAACW,EAAE,EAAE;MACb,OAAO,IAAI;IACf;IAEAC,OAAO,CAACC,KAAK,CACT,6DAA6D,EAC7Db,QAAQ,CAACc,MACb,CAAC;EACL,CAAC,CAAC,OAAOC,EAAE,EAAE;IACTH,OAAO,CAACC,KAAK,CAAC,6DAA6D,EAAEE,EAAE,CAAC;EACpF;EAEA,OAAO,KAAK;AAChB,CAAC;AAACC,OAAA,CAAApB,gBAAA,GAAAA,gBAAA"}

package/lib/components/combobox/ComboBox.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
 var _comboBox = require("../../types/comboBox");
 var _calculate = require("../../utils/calculate");
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _ComboBoxItem = _interopRequireDefault(require("./combobox-item/ComboBoxItem"));
 var _ComboBox = require("./ComboBox.styles");
-var _chaynsApi = require("chayns-api");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/lib/components/combobox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":["_react","_interopRequireWildcard","require","_comboBox","_calculate","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","_chaynsApi","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ComboBox","_ref","direction","ComboBoxDirection","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","height","setHeight","ref","useRef","browser","getDevice","isMobile","chayns","env","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","isAtLeastOneItemWithImageGiven","some","_ref2","imageUrl","textArray","map","_ref3","text","calculateContentHeight","push","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref4","value","createElement","isSelected","key","animate","opacity","style","TOP","transform","StyledMotionComboBoxBody","name","initial","transition","duration","StyledComboBox","StyledComboBoxHeader","onClick","isOpen","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","icons","displayName","_default","exports"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\nimport { getDevice } from 'chayns-api';\n\nexport interface IComboBoxItem {\n    imageUrl?: string;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    list: IComboBoxItem[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    list,\n    maxHeight = '300px',\n    onSelect,\n    placeholder,\n    selectedItem,\n    shouldShowRoundImage,\n}) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [height, setHeight] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = getDevice();\n\n    const { isMobile } = chayns.env;\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [ref],\n    );\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, ref]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect],\n    );\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n\n        textArray.push(placeholder);\n\n        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        setMinWidth(\n            calculateContentWidth(textArray) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0),\n        );\n    }, [list, placeholder]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        if (selectedItem) {\n            setItem(selectedItem);\n            setIsAnimating(false);\n        }\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (item) {\n            return item.imageUrl;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (item) {\n            text = item.text;\n        }\n\n        return text;\n    }, [item, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            setIsAnimating((prevState) => !prevState);\n        }\n    }, [isDisabled]);\n\n    const comboBoxBody = useMemo(() => {\n        const items = list.map(({ imageUrl, text, value }) => (\n            <ComboBoxItem\n                imageUrl={imageUrl}\n                isSelected={selectedItem ? value === selectedItem.value : false}\n                key={value}\n                onSelect={handleSetSelectedItem}\n                shouldShowRoundImage={shouldShowRoundImage}\n                text={text}\n                value={value}\n            />\n        ));\n\n        const animate = isAnimating\n            ? { height: 'fit-content', opacity: 1 }\n            : { height: 0, opacity: 0 };\n\n        const style =\n            direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n        return (\n            <StyledMotionComboBoxBody\n                browser={browser?.name}\n                animate={animate}\n                height={height}\n                initial={{ height: 0, opacity: 0 }}\n                maxHeight={maxHeight}\n                minWidth={minWidth}\n                style={style}\n                direction={direction}\n                transition={{ duration: 0.2 }}\n            >\n                {items}\n            </StyledMotionComboBoxBody>\n        );\n    }, [\n        browser?.name,\n        direction,\n        handleSetSelectedItem,\n        height,\n        isAnimating,\n        list,\n        maxHeight,\n        minWidth,\n        selectedItem,\n        shouldShowRoundImage,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={ref}>\n                {direction === ComboBoxDirection.TOP && comboBoxBody}\n                <StyledComboBoxHeader\n                    direction={direction}\n                    minWidth={minWidth}\n                    onClick={handleHeaderClick}\n                    isOpen={isAnimating}\n                    isMobile={isMobile}\n                    isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder>\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderText}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n            </StyledComboBox>\n        ),\n        [\n            comboBoxBody,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isMobile,\n            minWidth,\n            placeholderImageUrl,\n            placeholderText,\n            shouldShowRoundImage,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_comboBox","_calculate","_Icon","_interopRequireDefault","_ComboBoxItem","_ComboBox","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ComboBox","_ref","direction","ComboBoxDirection","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","useState","isAnimating","setIsAnimating","minWidth","setMinWidth","height","setHeight","ref","useRef","browser","getDevice","isMobile","chayns","env","handleClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","isAtLeastOneItemWithImageGiven","some","_ref2","imageUrl","textArray","map","_ref3","text","calculateContentHeight","push","calculateContentWidth","placeholderImageUrl","useMemo","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref4","value","createElement","isSelected","key","animate","opacity","style","TOP","transform","StyledMotionComboBoxBody","name","initial","transition","duration","StyledComboBox","StyledComboBoxHeader","onClick","isOpen","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","src","StyledComboBoxIconWrapper","icons","displayName","_default","exports"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n    imageUrl?: string;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    list: IComboBoxItem[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    list,\n    maxHeight = '300px',\n    onSelect,\n    placeholder,\n    selectedItem,\n    shouldShowRoundImage,\n}) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [height, setHeight] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = getDevice();\n\n    const { isMobile } = chayns.env;\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [ref],\n    );\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, ref]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect],\n    );\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n\n        textArray.push(placeholder);\n\n        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        setMinWidth(\n            calculateContentWidth(textArray) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0),\n        );\n    }, [list, placeholder]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        if (selectedItem) {\n            setItem(selectedItem);\n            setIsAnimating(false);\n        }\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (item) {\n            return item.imageUrl;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (item) {\n            text = item.text;\n        }\n\n        return text;\n    }, [item, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            setIsAnimating((prevState) => !prevState);\n        }\n    }, [isDisabled]);\n\n    const comboBoxBody = useMemo(() => {\n        const items = list.map(({ imageUrl, text, value }) => (\n            <ComboBoxItem\n                imageUrl={imageUrl}\n                isSelected={selectedItem ? value === selectedItem.value : false}\n                key={value}\n                onSelect={handleSetSelectedItem}\n                shouldShowRoundImage={shouldShowRoundImage}\n                text={text}\n                value={value}\n            />\n        ));\n\n        const animate = isAnimating\n            ? { height: 'fit-content', opacity: 1 }\n            : { height: 0, opacity: 0 };\n\n        const style =\n            direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n        return (\n            <StyledMotionComboBoxBody\n                browser={browser?.name}\n                animate={animate}\n                height={height}\n                initial={{ height: 0, opacity: 0 }}\n                maxHeight={maxHeight}\n                minWidth={minWidth}\n                style={style}\n                direction={direction}\n                transition={{ duration: 0.2 }}\n            >\n                {items}\n            </StyledMotionComboBoxBody>\n        );\n    }, [\n        browser?.name,\n        direction,\n        handleSetSelectedItem,\n        height,\n        isAnimating,\n        list,\n        maxHeight,\n        minWidth,\n        selectedItem,\n        shouldShowRoundImage,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={ref}>\n                {direction === ComboBoxDirection.TOP && comboBoxBody}\n                <StyledComboBoxHeader\n                    direction={direction}\n                    minWidth={minWidth}\n                    onClick={handleHeaderClick}\n                    isOpen={isAnimating}\n                    isMobile={isMobile}\n                    isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder>\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderText}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n            </StyledComboBox>\n        ),\n        [\n            comboBoxBody,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isMobile,\n            minWidth,\n            placeholderImageUrl,\n            placeholderText,\n            shouldShowRoundImage,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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"}

package/lib/components/combobox/ComboBox.styles.d.ts

@@ -1,8 +1,8 @@
+import type { Browser } from 'detect-browser';
 import type { CSSProperties } from 'react';
 import { ComboBoxDirection } from '../../types/comboBox';
 import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';
-import type { Browser } from 'detect-browser';
 export declare const StyledComboBox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 type StyledComboBoxHeaderProps = WithTheme<{
     isMobile: boolean;

package/lib/components/combobox/ComboBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","StyledComboBoxHeader","_ref","isDisabled","_ref2","theme","_ref3","_ref4","minWidth","_ref5","_ref6","isOpen","direction","ComboBoxDirection","BOTTOM","css","_ref7","isMobile","StyledComboBoxPlaceholder","_ref8","text","StyledComboBoxPlaceholderImage","img","_ref9","_ref10","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","_ref11","_ref12","_ref13","_ref14","maxHeight","_ref15","height","_ref16","_ref17","browser"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\nimport type { Browser } from 'detect-browser';\n\nexport const StyledComboBox = styled.div`\n    user-select: none;\n    width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    isMobile: boolean;\n    isOpen: boolean;\n    minWidth: number;\n    direction: ComboBoxDirection;\n    isDisabled?: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ isDisabled }) => (!isDisabled ? 'pointer' : 'default')};\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    min-width: ${({ minWidth }) => minWidth}px;\n    max-width: ${({ minWidth }) => minWidth}px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ isOpen, direction }) => {\n        if (isOpen) {\n            return direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ isMobile, isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !isMobile &&\n        !isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n    Pick<ComboBoxItemProps, 'shouldShowRoundImage'>\n>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ shouldShowRoundImage }) =>\n        shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    height: number;\n    minWidth: number;\n    maxHeight: CSSProperties['maxHeight'];\n    direction: ComboBoxDirection;\n    browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    min-width: ${({ minWidth }) => minWidth}px;\n    max-width: ${({ minWidth }) => minWidth}px;\n    max-height: ${({ maxHeight }) => maxHeight};\n    overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n\n    ${({ direction, theme }) => {\n        if (direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 2px 8px 2px rgba(${theme['009-rgb']}, 0.15);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -2px 8px 2px rgba(${theme['009-rgb']}, 0.15);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ browser, theme }: StyledComboBoxBodyProps) =>\n        browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":"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"}
+{"version":3,"file":"ComboBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_comboBox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledComboBox","exports","styled","div","StyledComboBoxHeader","_ref","isDisabled","_ref2","theme","_ref3","_ref4","minWidth","_ref5","_ref6","isOpen","direction","ComboBoxDirection","BOTTOM","css","_ref7","isMobile","StyledComboBoxPlaceholder","_ref8","text","StyledComboBoxPlaceholderImage","img","_ref9","_ref10","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","motion","_ref11","_ref12","_ref13","_ref14","maxHeight","_ref15","height","_ref16","_ref17","browser"],"sources":["../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\n\nexport const StyledComboBox = styled.div`\n    user-select: none;\n    width: fit-content;\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    isMobile: boolean;\n    isOpen: boolean;\n    minWidth: number;\n    direction: ComboBoxDirection;\n    isDisabled?: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ isDisabled }) => (!isDisabled ? 'pointer' : 'default')};\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    min-width: ${({ minWidth }) => minWidth}px;\n    max-width: ${({ minWidth }) => minWidth}px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ isOpen, direction }) => {\n        if (isOpen) {\n            return direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ isMobile, isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !isMobile &&\n        !isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n    Pick<ComboBoxItemProps, 'shouldShowRoundImage'>\n>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ shouldShowRoundImage }) =>\n        shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    height: number;\n    minWidth: number;\n    maxHeight: CSSProperties['maxHeight'];\n    direction: ComboBoxDirection;\n    browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    min-width: ${({ minWidth }) => minWidth}px;\n    max-width: ${({ minWidth }) => minWidth}px;\n    max-height: ${({ maxHeight }) => maxHeight};\n    overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n\n    ${({ direction, theme }) => {\n        if (direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 2px 8px 2px rgba(${theme['009-rgb']}, 0.15);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -2px 8px 2px rgba(${theme['009-rgb']}, 0.15);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ browser, theme }: StyledComboBoxBodyProps) =>\n        browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,SAAA,GAAAH,OAAA;AAAyD,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAIlD,MAAMY,cAAc,GAAAC,OAAA,CAAAD,cAAA,GAAGE,yBAAM,CAACC,GAAI;AACzC;AACA;AACA,CAAC;AAUM,MAAMC,oBAAoB,GAAAH,OAAA,CAAAG,oBAAA,GAAGF,yBAAM,CAACC,GAA+B;AAC1E;AACA;AACA;AACA;AACA,cAAcE,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAM,CAACC,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAE;AACxE,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAiC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACzE,eAAeC,KAAA;EAAA,IAAC;IAAEH;EAAW,CAAC,GAAAG,KAAA;EAAA,OAAMH,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D,iBAAiBI,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OAAKC,QAAQ;AAAA,CAAC;AAC5C,iBAAiBC,KAAA;EAAA,IAAC;IAAED;EAAS,CAAC,GAAAC,KAAA;EAAA,OAAKD,QAAQ;AAAA,CAAC;AAC5C;AACA;AACA,MAAME,KAAA,IAA2B;EAAA,IAA1B;IAAEC,MAAM;IAAEC;EAAU,CAAC,GAAAF,KAAA;EACpB,IAAIC,MAAM,EAAE;IACR,OAAOC,SAAS,KAAKC,2BAAiB,CAACC,MAAM,GACvC,IAAAC,qBAAG,CAAC;AACtB;AACA;AACA,mBAAmB,GACD,IAAAA,qBAAG,CAAC;AACtB;AACA;AACA,mBAAmB;EACX;EAEA,OAAO,IAAAA,qBAAG,CAAC;AACnB;AACA,SAAS;AACL,CAAE;AACN;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEd,UAAU;IAAEE;EAAiC,CAAC,GAAAW,KAAA;EAAA,OACzD,CAACC,QAAQ,IACT,CAACd,UAAU,IACX,IAAAY,qBAAG,CAAC;AACZ;AACA,oCAAoCV,KAAK,CAAC,eAAe,CAAE;AAC3D;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAIM,MAAMa,yBAAyB,GAAApB,OAAA,CAAAoB,yBAAA,GAAGnB,yBAAM,CAACC,GAAoC;AACpF;AACA,aAAamB,KAAA;EAAA,IAAC;IAAEd;EAAsC,CAAC,GAAAc,KAAA;EAAA,OAAKd,KAAK,CAACe,IAAI;AAAA,CAAC;AACvE;AACA;AACA,CAAC;AAMM,MAAMC,8BAA8B,GAAAvB,OAAA,CAAAuB,8BAAA,GAAGtB,yBAAM,CAACuB,GAAyC;AAC9F;AACA,eAAeC,KAAA;EAAA,IAAC;IAAElB;EAA2C,CAAC,GAAAkB,KAAA;EAAA,OAAKlB,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACpF;AACA;AACA;AACA,MAAMmB,MAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,MAAA;EAAA,OACvBC,oBAAoB,IACpB,IAAAV,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAEM,MAAMW,yBAAyB,GAAA5B,OAAA,CAAA4B,yBAAA,GAAG3B,yBAAM,CAACC,GAAI;AACpD;AACA,CAAC;AAUM,MAAM2B,wBAAwB,GAAA7B,OAAA,CAAA6B,wBAAA,GAAG,IAAA5B,yBAAM,EAAC6B,oBAAM,CAAC5B,GAAG,CAA2B;AACpF,kBAAkB6B,MAAA;EAAA,IAAC;IAAExB;EAA+B,CAAC,GAAAwB,MAAA;EAAA,OAAKxB,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiByB,MAAA;EAAA,IAAC;IAAEtB;EAAS,CAAC,GAAAsB,MAAA;EAAA,OAAKtB,QAAQ;AAAA,CAAC;AAC5C,iBAAiBuB,MAAA;EAAA,IAAC;IAAEvB;EAAS,CAAC,GAAAuB,MAAA;EAAA,OAAKvB,QAAQ;AAAA,CAAC;AAC5C,kBAAkBwB,MAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,MAAA;EAAA,OAAKC,SAAS;AAAA,CAAC;AAC/C,kBAAkBC,MAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,MAAA;EAAA,OAAMC,MAAM,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAE;AACtE;AACA,MAAMC,MAAA,IAA0B;EAAA,IAAzB;IAAExB,SAAS;IAAEP;EAAM,CAAC,GAAA+B,MAAA;EACnB,IAAIxB,SAAS,KAAKC,2BAAiB,CAACC,MAAM,EAAE;IACxC,OAAO,IAAAC,qBAAG,CAAC;AACvB;AACA;AACA,iDAAiDV,KAAK,CAAC,SAAS,CAAE;AAClE,aAAa;EACL;EAEA,OAAO,IAAAU,qBAAG,CAAC;AACnB;AACA;AACA,8CAA8CV,KAAK,CAAC,SAAS,CAAE;AAC/D,SAAS;AACL,CAAE;AACN;AACA;AACA,MAAMgC,MAAA;EAAA,IAAC;IAAEC,OAAO;IAAEjC;EAA+B,CAAC,GAAAgC,MAAA;EAAA,OAC1CC,OAAO,KAAK,SAAS,GACf,IAAAvB,qBAAG,CAAC;AAClB,0CAA0CV,KAAK,CAAC,UAAU,CAAE;AAC5D;AACA,eAAe,GACD,IAAAU,qBAAG,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CV,KAAK,CAAC,UAAU,CAAE;AACjE;AACA;AACA,eAAe;AAAA,CAAC;AAChB,CAAC"}

package/lib/components/popup/popup-content/PopupContent.d.ts

@@ -1,4 +1,4 @@
-import React, { type MouseEventHandler, ReactNode } from 'react';
+import React, { ReactNode, type MouseEventHandler } from 'react';
 import { PopupAlignment, PopupCoordinates } from '../../../types/popup';
 type PopupContentProps = {
     alignment: PopupAlignment;

package/lib/components/popup/popup-content/PopupContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContent.js","names":["_react","_interopRequireDefault","require","_colorMode","_popup","_PopupContent","obj","__esModule","default","PopupContent","React","forwardRef","_ref","ref","alignment","coordinates","content","onMouseLeave","colorMode","useColorMode","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContent","animate","opacity","y","exit","initial","position","style","left","x","top","transition","type","transformTemplate","_ref2","StyledPopupContentInner","displayName","_default","exports"],"sources":["../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import React, { type MouseEventHandler, ReactNode } from 'react';\nimport { useColorMode } from '../../../hooks/colorMode';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContent, StyledPopupContentInner } from './PopupContent.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    coordinates: PopupCoordinates;\n    content: ReactNode;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n};\n\nconst PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, coordinates, content, onMouseLeave }, ref) => {\n        const colorMode = useColorMode();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContent\n                animate={{ opacity: 1, y: 0 }}\n                colorMode={colorMode}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                position={alignment}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentInner>{content}</StyledPopupContentInner>\n            </StyledMotionPopupContent>\n        );\n    },\n);\n\nPopupContent.displayName = 'PopupContent';\n\nexport default PopupContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAA0F,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAS1F,MAAMG,YAAY,gBAAGC,cAAK,CAACC,UAAU,CACjC,CAAAC,IAAA,EAAoDC,GAAG,KAAK;EAAA,IAA3D;IAAEC,SAAS;IAAEC,WAAW;IAAEC,OAAO;IAAEC;EAAa,CAAC,GAAAL,IAAA;EAC9C,MAAMM,SAAS,GAAG,IAAAC,uBAAY,EAAC,CAAC;EAEhC,MAAMC,qBAAqB,GAAGN,SAAS,KAAKO,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGT,SAAS,KAAKO,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGX,SAAS,KAAKO,qBAAc,CAACK,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIzB,MAAA,CAAAQ,OAAA,CAAAwB,aAAA,CAAC3B,aAAA,CAAA4B,wBAAwB;IACrBC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BlB,SAAS,EAAEA,SAAU;IACrBmB,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CQ,QAAQ,EAAEzB,SAAU;IACpBD,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBI,YAAY,EAAEA,YAAa;IAC3BuB,KAAK,EAAE;MAAEC,IAAI,EAAE1B,WAAW,CAAC2B,CAAC;MAAEC,GAAG,EAAE5B,WAAW,CAACqB;IAAE,CAAE;IACnDQ,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEX,CAAC,GAAG;MAAM,CAAC,GAAAW,KAAA;MAAA,OAAM;AACvD,iCAAiCpB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCM,CAAE;AACnC,iBAAiB;IAAA;EAAC,gBAEFpC,MAAA,CAAAQ,OAAA,CAAAwB,aAAA,CAAC3B,aAAA,CAAA2C,uBAAuB,QAAEhC,OAAiC,CACrC,CAAC;AAEnC,CACJ,CAAC;AAEDP,YAAY,CAACwC,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3C,OAAA,GAE3BC,YAAY"}
+{"version":3,"file":"PopupContent.js","names":["_react","_interopRequireDefault","require","_colorMode","_popup","_PopupContent","obj","__esModule","default","PopupContent","React","forwardRef","_ref","ref","alignment","coordinates","content","onMouseLeave","colorMode","useColorMode","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContent","animate","opacity","y","exit","initial","position","style","left","x","top","transition","type","transformTemplate","_ref2","StyledPopupContentInner","displayName","_default","exports"],"sources":["../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import React, { ReactNode, type MouseEventHandler } from 'react';\nimport { useColorMode } from '../../../hooks/colorMode';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContent, StyledPopupContentInner } from './PopupContent.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    coordinates: PopupCoordinates;\n    content: ReactNode;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n};\n\nconst PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, coordinates, content, onMouseLeave }, ref) => {\n        const colorMode = useColorMode();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContent\n                animate={{ opacity: 1, y: 0 }}\n                colorMode={colorMode}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                position={alignment}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentInner>{content}</StyledPopupContentInner>\n            </StyledMotionPopupContent>\n        );\n    },\n);\n\nPopupContent.displayName = 'PopupContent';\n\nexport default PopupContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAA0F,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAS1F,MAAMG,YAAY,gBAAGC,cAAK,CAACC,UAAU,CACjC,CAAAC,IAAA,EAAoDC,GAAG,KAAK;EAAA,IAA3D;IAAEC,SAAS;IAAEC,WAAW;IAAEC,OAAO;IAAEC;EAAa,CAAC,GAAAL,IAAA;EAC9C,MAAMM,SAAS,GAAG,IAAAC,uBAAY,EAAC,CAAC;EAEhC,MAAMC,qBAAqB,GAAGN,SAAS,KAAKO,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGT,SAAS,KAAKO,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGX,SAAS,KAAKO,qBAAc,CAACK,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIzB,MAAA,CAAAQ,OAAA,CAAAwB,aAAA,CAAC3B,aAAA,CAAA4B,wBAAwB;IACrBC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BlB,SAAS,EAAEA,SAAU;IACrBmB,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CQ,QAAQ,EAAEzB,SAAU;IACpBD,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBI,YAAY,EAAEA,YAAa;IAC3BuB,KAAK,EAAE;MAAEC,IAAI,EAAE1B,WAAW,CAAC2B,CAAC;MAAEC,GAAG,EAAE5B,WAAW,CAACqB;IAAE,CAAE;IACnDQ,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEX,CAAC,GAAG;MAAM,CAAC,GAAAW,KAAA;MAAA,OAAM;AACvD,iCAAiCpB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCM,CAAE;AACnC,iBAAiB;IAAA;EAAC,gBAEFpC,MAAA,CAAAQ,OAAA,CAAAwB,aAAA,CAAC3B,aAAA,CAAA2C,uBAAuB,QAAEhC,OAAiC,CACrC,CAAC;AAEnC,CACJ,CAAC;AAEDP,YAAY,CAACwC,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3C,OAAA,GAE3BC,YAAY"}

package/lib/components/scroll-view/ScrollView.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
 var _ScrollView = require("./ScrollView.styles");
-var _chaynsApi = require("chayns-api");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const ScrollView = _ref => {

package/lib/components/scroll-view/ScrollView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.js","names":["_react","_interopRequireWildcard","require","_ScrollView","_chaynsApi","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ScrollView","_ref","maxHeight","children","browser","getDevice","useMemo","createElement","StyledScrollView","name","displayName","_default","exports"],"sources":["../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import React, { CSSProperties, FC, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\nimport { getDevice } from 'chayns-api';\n\nexport type ScrollViewProps = {\n    /**\n     * The elements that should be shown inside the scrollview\n     */\n    children: ReactNode;\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight: CSSProperties['height'];\n};\n\nconst ScrollView: FC<ScrollViewProps> = ({ maxHeight = '300px', children }) => {\n    const { browser } = getDevice();\n\n    return useMemo(\n        () => (\n            <StyledScrollView browser={browser?.name} maxHeight={maxHeight}>\n                {children}\n            </StyledScrollView>\n        ),\n        [browser?.name, children, maxHeight],\n    );\n};\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AAAuC,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAavC,MAAMY,UAA+B,GAAGC,IAAA,IAAuC;EAAA,IAAtC;IAAEC,SAAS,GAAG,OAAO;IAAEC;EAAS,CAAC,GAAAF,IAAA;EACtE,MAAM;IAAEG;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,OAAO,IAAAC,cAAO,EACV,mBACIhC,MAAA,CAAAW,OAAA,CAAAsB,aAAA,CAAC9B,WAAA,CAAA+B,gBAAgB;IAACJ,OAAO,EAAEA,OAAO,EAAEK,IAAK;IAACP,SAAS,EAAEA;EAAU,GAC1DC,QACa,CACrB,EACD,CAACC,OAAO,EAAEK,IAAI,EAAEN,QAAQ,EAAED,SAAS,CACvC,CAAC;AACL,CAAC;AAEDF,UAAU,CAACU,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEvBe,UAAU"}
+{"version":3,"file":"ScrollView.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_ScrollView","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ScrollView","_ref","maxHeight","children","browser","getDevice","useMemo","createElement","StyledScrollView","name","displayName","_default","exports"],"sources":["../../../src/components/scroll-view/ScrollView.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { CSSProperties, FC, ReactNode, useMemo } from 'react';\nimport { StyledScrollView } from './ScrollView.styles';\n\nexport type ScrollViewProps = {\n    /**\n     * The elements that should be shown inside the scrollview\n     */\n    children: ReactNode;\n    /**\n     * The maximum height of the scroll view.\n     */\n    maxHeight: CSSProperties['height'];\n};\n\nconst ScrollView: FC<ScrollViewProps> = ({ maxHeight = '300px', children }) => {\n    const { browser } = getDevice();\n\n    return useMemo(\n        () => (\n            <StyledScrollView browser={browser?.name} maxHeight={maxHeight}>\n                {children}\n            </StyledScrollView>\n        ),\n        [browser?.name, children, maxHeight],\n    );\n};\n\nScrollView.displayName = 'ScrollView';\n\nexport default ScrollView;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,WAAA,GAAAH,OAAA;AAAuD,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAavD,MAAMY,UAA+B,GAAGC,IAAA,IAAuC;EAAA,IAAtC;IAAEC,SAAS,GAAG,OAAO;IAAEC;EAAS,CAAC,GAAAF,IAAA;EACtE,MAAM;IAAEG;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,OAAO,IAAAC,cAAO,EACV,mBACI9B,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAAC7B,WAAA,CAAA8B,gBAAgB;IAACJ,OAAO,EAAEA,OAAO,EAAEK,IAAK;IAACP,SAAS,EAAEA;EAAU,GAC1DC,QACa,CACrB,EACD,CAACC,OAAO,EAAEK,IAAI,EAAEN,QAAQ,EAAED,SAAS,CACvC,CAAC;AACL,CAAC;AAEDF,UAAU,CAACU,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEvBe,UAAU"}

package/lib/components/scroll-view/ScrollView.styles.d.ts

@@ -1,6 +1,6 @@
+import type { Browser } from 'detect-browser';
 import type { CSSProperties } from 'react';
 import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
-import type { Browser } from 'detect-browser';
 type StyledScrollViewProps = WithTheme<{
     maxHeight: CSSProperties['height'];
     browser: Browser | 'bot' | null | undefined;

package/lib/components/scroll-view/ScrollView.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledScrollView","exports","styled","div","_ref","maxHeight","_ref2","browser","theme","css"],"sources":["../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { Browser } from 'detect-browser';\n\ntype StyledScrollViewProps = WithTheme<{\n    maxHeight: CSSProperties['height'];\n    browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    max-height: ${({ maxHeight }) => maxHeight};\n    overflow-y: scroll;\n\n    // Styles for custom scrollbar\n    ${({ browser, theme }: StyledScrollViewProps) =>\n        browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AASzC,MAAMY,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAA2B;AAClE,kBAAkBC,IAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,IAAA;EAAA,OAAKC,SAAS;AAAA,CAAC;AAC/C;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EAAA,OACxCC,OAAO,KAAK,SAAS,GACf,IAAAE,qBAAG,CAAC;AAClB,0CAA0CD,KAAK,CAAC,UAAU,CAAE;AAC5D;AACA,eAAe,GACD,IAAAC,qBAAG,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CD,KAAK,CAAC,UAAU,CAAE;AACjE;AACA;AACA,eAAe;AAAA,CAAC;AAChB,CAAC"}
+{"version":3,"file":"ScrollView.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledScrollView","exports","styled","div","_ref","maxHeight","_ref2","browser","theme","css"],"sources":["../../../src/components/scroll-view/ScrollView.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledScrollViewProps = WithTheme<{\n    maxHeight: CSSProperties['height'];\n    browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledScrollView = styled.div<StyledScrollViewProps>`\n    max-height: ${({ maxHeight }) => maxHeight};\n    overflow-y: scroll;\n\n    // Styles for custom scrollbar\n    ${({ browser, theme }: StyledScrollViewProps) =>\n        browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":";;;;;;AAEA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQzC,MAAMY,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAGE,yBAAM,CAACC,GAA2B;AAClE,kBAAkBC,IAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,IAAA;EAAA,OAAKC,SAAS;AAAA,CAAC;AAC/C;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAA6B,CAAC,GAAAF,KAAA;EAAA,OACxCC,OAAO,KAAK,SAAS,GACf,IAAAE,qBAAG,CAAC;AAClB,0CAA0CD,KAAK,CAAC,UAAU,CAAE;AAC5D;AACA,eAAe,GACD,IAAAC,qBAAG,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CD,KAAK,CAAC,UAAU,CAAE;AACjE;AACA;AACA,eAAe;AAAA,CAAC;AAChB,CAAC"}

package/lib/components/search-box/SearchBox.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _chaynsApi = require("chayns-api");
 var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
 var _calculate = require("../../utils/calculate");
+var _searchBox = require("../../utils/searchBox");
 var _Input = _interopRequireDefault(require("../input/Input"));
 var _SearchBoxItem = _interopRequireDefault(require("./search-box-item/SearchBoxItem"));
 var _SearchBox = require("./SearchBox.styles");
-var _searchBox = require("../../utils/searchBox");
-var _chaynsApi = require("chayns-api");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/lib/components/search-box/SearchBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_calculate","_Input","_interopRequireDefault","_SearchBoxItem","_SearchBox","_searchBox","_chaynsApi","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SearchBox","_ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","useState","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","useRef","contentRef","inputRef","browser","getDevice","handleOutsideClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","textArray","map","_ref2","text","calculateContentHeight","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","searchList","items","searchString","handleChange","searchedItems","length","handleBlur","handleSelect","item","content","useMemo","sort","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","StyledSearchBox","ref","onFocus","AnimatePresence","initial","StyledMotionSearchBoxBody","name","opacity","animate","transition","duration","type","displayName","_default","exports"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { searchList } from '../../utils/searchBox';\nimport { getDevice } from 'chayns-api';\n\nexport type SearchBoxProps = {\n    /**\n     * A list of items that can be searched.\n     */\n    list: ISearchBoxItem[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Function to be executed when the input lost focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = ({\n    placeholder,\n    list,\n    onChange,\n    onBlur,\n    onSelect,\n    selectedId,\n    shouldShowRoundImage,\n    shouldShowContentOnEmptyInput = true,\n}) => {\n    const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n    const [value, setValue] = useState('');\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [height, setHeight] = useState<number>(0);\n    const [width, setWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n    const boxRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const { browser } = getDevice();\n\n    /**\n     * This function closes the list of items\n     */\n    const handleOutsideClick = useCallback(\n        (event: MouseEvent) => {\n            if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [boxRef],\n    );\n\n    /**\n     * This hook listens for clicks\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleOutsideClick);\n\n        return () => {\n            document.removeEventListener('click', handleOutsideClick);\n        };\n    }, [handleOutsideClick, boxRef]);\n\n    /**\n     * This hook calculates the height\n     */\n    useEffect(() => {\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n    }, [list, placeholder]);\n\n    /**\n     * This hook calculates the width\n     */\n    useEffect(() => {\n        const input = document.getElementById('search_box_input');\n\n        if (input) {\n            setWidth(input.offsetWidth);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (selectedId) {\n            const selectedItem = list.find(({ id }) => id === selectedId);\n\n            if (selectedItem) {\n                setValue(selectedItem.text);\n            }\n        }\n    }, [list, selectedId]);\n\n    /**\n     * This function sets the items on focus if shouldShowContentOnEmptyInput\n     */\n    const handleFocus = useCallback(() => {\n        if (shouldShowContentOnEmptyInput) {\n            setMatchingItems(searchList({ items: list, searchString: value }));\n            setIsAnimating(true);\n        }\n    }, [list, shouldShowContentOnEmptyInput, value]);\n\n    /**\n     * This function handles changes of the input\n     */\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n            if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                setMatchingItems([]);\n            } else {\n                setMatchingItems(searchedItems);\n                setIsAnimating(searchedItems.length !== 0);\n            }\n\n            setValue(event.target.value);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [list, onChange, shouldShowContentOnEmptyInput],\n    );\n\n    /**\n     * This function handles the blur event of the input\n     */\n    const handleBlur = useCallback(\n        (event: FocusEvent<HTMLInputElement>) => {\n            if (typeof onBlur === 'function') {\n                onBlur(event);\n            }\n        },\n        [onBlur],\n    );\n\n    /**\n     * This function handles the item selection\n     */\n    const handleSelect = useCallback(\n        (item: ISearchBoxItem) => {\n            setValue(item.text);\n            setIsAnimating(false);\n\n            if (typeof onSelect === 'function') {\n                onSelect(item);\n            }\n        },\n        [onSelect],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n        matchingItems.forEach(({ id, text, imageUrl }) => {\n            items.push(\n                <SearchBoxItem\n                    key={id}\n                    text={text}\n                    imageUrl={imageUrl}\n                    id={id}\n                    shouldShowRoundImage={shouldShowRoundImage}\n                    onSelect={handleSelect}\n                />,\n            );\n        });\n\n        return items;\n    }, [shouldShowRoundImage, handleSelect, matchingItems]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id, textContent } = element;\n\n                handleSelect({ id: id.replace('search-box-item__', ''), text: textContent ?? '' });\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect]);\n\n    const handleKeyPress = useCallback((event: KeyboardEvent) => {\n        if (event.keyCode === 27) {\n            setMatchingItems([]);\n        }\n    }, []);\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyPress);\n\n        return () => {\n            document.addEventListener('keydown', handleKeyPress);\n        };\n    }, [handleKeyPress]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBox ref={boxRef}>\n                <div id=\"search_box_input\">\n                    <Input\n                        ref={inputRef}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        placeholder={placeholder}\n                        value={value}\n                    />\n                </div>\n                <AnimatePresence initial={false}>\n                    <StyledMotionSearchBoxBody\n                        browser={browser?.name}\n                        key=\"content\"\n                        height={height}\n                        width={width}\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={\n                            isAnimating\n                                ? { height: 'fit-content', opacity: 1 }\n                                : { height: 0, opacity: 0 }\n                        }\n                        transition={{\n                            duration: 0.2,\n                            type: 'tween',\n                        }}\n                    >\n                        <div ref={contentRef}>{content}</div>\n                    </StyledMotionSearchBoxBody>\n                </AnimatePresence>\n            </StyledSearchBox>\n        ),\n        [\n            browser?.name,\n            content,\n            handleBlur,\n            handleChange,\n            handleFocus,\n            height,\n            isAnimating,\n            placeholder,\n            value,\n            width,\n        ],\n    );\n};\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBox.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_calculate","_searchBox","_Input","_interopRequireDefault","_SearchBoxItem","_SearchBox","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SearchBox","_ref","placeholder","list","onChange","onBlur","onSelect","selectedId","shouldShowRoundImage","shouldShowContentOnEmptyInput","matchingItems","setMatchingItems","useState","value","setValue","isAnimating","setIsAnimating","height","setHeight","width","setWidth","focusedIndex","setFocusedIndex","boxRef","useRef","contentRef","inputRef","browser","getDevice","handleOutsideClick","useCallback","event","current","contains","target","useEffect","document","addEventListener","removeEventListener","textArray","map","_ref2","text","calculateContentHeight","input","getElementById","offsetWidth","selectedItem","find","_ref3","id","handleFocus","searchList","items","searchString","handleChange","searchedItems","length","handleBlur","handleSelect","item","content","useMemo","sort","b","localeCompare","forEach","_ref4","imageUrl","push","createElement","key","handleKeyDown","preventDefault","children","newIndex","prevElement","tabIndex","newElement","focus","element","textContent","replace","handleKeyPress","keyCode","StyledSearchBox","ref","onFocus","AnimatePresence","initial","StyledMotionSearchBoxBody","name","opacity","animate","transition","duration","type","displayName","_default","exports"],"sources":["../../../src/components/search-box/SearchBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    FocusEvent,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport type { ISearchBoxItem } from '../../types/searchBox';\nimport { calculateContentHeight } from '../../utils/calculate';\nimport { searchList } from '../../utils/searchBox';\nimport Input from '../input/Input';\nimport SearchBoxItem from './search-box-item/SearchBoxItem';\nimport { StyledMotionSearchBoxBody, StyledSearchBox } from './SearchBox.styles';\n\nexport type SearchBoxProps = {\n    /**\n     * A list of items that can be searched.\n     */\n    list: ISearchBoxItem[];\n    /**\n     * The placeholder that should be displayed.\n     */\n    placeholder?: string;\n    /**\n     * Function to be executed when the input lost focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when the input is changed.\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function to be executed when an item is selected.\n     */\n    onSelect?: (item: ISearchBoxItem) => void;\n    /**\n     * Control the selected item. If you use this prop, make sure to update it when the user selects an item.\n     */\n    selectedId?: string;\n    /**\n     * Whether the full list of items should be displayed if the input is empty.\n     */\n    shouldShowContentOnEmptyInput?: boolean;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst SearchBox: FC<SearchBoxProps> = ({\n    placeholder,\n    list,\n    onChange,\n    onBlur,\n    onSelect,\n    selectedId,\n    shouldShowRoundImage,\n    shouldShowContentOnEmptyInput = true,\n}) => {\n    const [matchingItems, setMatchingItems] = useState<ISearchBoxItem[]>([]);\n    const [value, setValue] = useState('');\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [height, setHeight] = useState<number>(0);\n    const [width, setWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n\n    const boxRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const { browser } = getDevice();\n\n    /**\n     * This function closes the list of items\n     */\n    const handleOutsideClick = useCallback(\n        (event: MouseEvent) => {\n            if (boxRef.current && !boxRef.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [boxRef],\n    );\n\n    /**\n     * This hook listens for clicks\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleOutsideClick);\n\n        return () => {\n            document.removeEventListener('click', handleOutsideClick);\n        };\n    }, [handleOutsideClick, boxRef]);\n\n    /**\n     * This hook calculates the height\n     */\n    useEffect(() => {\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n    }, [list, placeholder]);\n\n    /**\n     * This hook calculates the width\n     */\n    useEffect(() => {\n        const input = document.getElementById('search_box_input');\n\n        if (input) {\n            setWidth(input.offsetWidth);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (selectedId) {\n            const selectedItem = list.find(({ id }) => id === selectedId);\n\n            if (selectedItem) {\n                setValue(selectedItem.text);\n            }\n        }\n    }, [list, selectedId]);\n\n    /**\n     * This function sets the items on focus if shouldShowContentOnEmptyInput\n     */\n    const handleFocus = useCallback(() => {\n        if (shouldShowContentOnEmptyInput) {\n            setMatchingItems(searchList({ items: list, searchString: value }));\n            setIsAnimating(true);\n        }\n    }, [list, shouldShowContentOnEmptyInput, value]);\n\n    /**\n     * This function handles changes of the input\n     */\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const searchedItems = searchList({ items: list, searchString: event.target.value });\n\n            if (!shouldShowContentOnEmptyInput && !event.target.value) {\n                setMatchingItems([]);\n            } else {\n                setMatchingItems(searchedItems);\n                setIsAnimating(searchedItems.length !== 0);\n            }\n\n            setValue(event.target.value);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [list, onChange, shouldShowContentOnEmptyInput],\n    );\n\n    /**\n     * This function handles the blur event of the input\n     */\n    const handleBlur = useCallback(\n        (event: FocusEvent<HTMLInputElement>) => {\n            if (typeof onBlur === 'function') {\n                onBlur(event);\n            }\n        },\n        [onBlur],\n    );\n\n    /**\n     * This function handles the item selection\n     */\n    const handleSelect = useCallback(\n        (item: ISearchBoxItem) => {\n            setValue(item.text);\n            setIsAnimating(false);\n\n            if (typeof onSelect === 'function') {\n                onSelect(item);\n            }\n        },\n        [onSelect],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        matchingItems.sort((a, b) => a.text.localeCompare(b.text));\n\n        matchingItems.forEach(({ id, text, imageUrl }) => {\n            items.push(\n                <SearchBoxItem\n                    key={id}\n                    text={text}\n                    imageUrl={imageUrl}\n                    id={id}\n                    shouldShowRoundImage={shouldShowRoundImage}\n                    onSelect={handleSelect}\n                />,\n            );\n        });\n\n        return items;\n    }, [shouldShowRoundImage, handleSelect, matchingItems]);\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id, textContent } = element;\n\n                handleSelect({ id: id.replace('search-box-item__', ''), text: textContent ?? '' });\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect]);\n\n    const handleKeyPress = useCallback((event: KeyboardEvent) => {\n        if (event.keyCode === 27) {\n            setMatchingItems([]);\n        }\n    }, []);\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyPress);\n\n        return () => {\n            document.addEventListener('keydown', handleKeyPress);\n        };\n    }, [handleKeyPress]);\n\n    return useMemo(\n        () => (\n            <StyledSearchBox ref={boxRef}>\n                <div id=\"search_box_input\">\n                    <Input\n                        ref={inputRef}\n                        onChange={handleChange}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        placeholder={placeholder}\n                        value={value}\n                    />\n                </div>\n                <AnimatePresence initial={false}>\n                    <StyledMotionSearchBoxBody\n                        browser={browser?.name}\n                        key=\"content\"\n                        height={height}\n                        width={width}\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={\n                            isAnimating\n                                ? { height: 'fit-content', opacity: 1 }\n                                : { height: 0, opacity: 0 }\n                        }\n                        transition={{\n                            duration: 0.2,\n                            type: 'tween',\n                        }}\n                    >\n                        <div ref={contentRef}>{content}</div>\n                    </StyledMotionSearchBoxBody>\n                </AnimatePresence>\n            </StyledSearchBox>\n        ),\n        [\n            browser?.name,\n            content,\n            handleBlur,\n            handleChange,\n            handleFocus,\n            height,\n            isAnimating,\n            placeholder,\n            value,\n            width,\n        ],\n    );\n};\n\nSearchBox.displayName = 'SearchBox';\n\nexport default SearchBox;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,uBAAA,CAAAH,OAAA;AAcA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,cAAA,GAAAD,sBAAA,CAAAP,OAAA;AACA,IAAAS,UAAA,GAAAT,OAAA;AAAgF,SAAAO,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAqChF,MAAMY,SAA6B,GAAGC,IAAA,IAShC;EAAA,IATiC;IACnCC,WAAW;IACXC,IAAI;IACJC,QAAQ;IACRC,MAAM;IACNC,QAAQ;IACRC,UAAU;IACVC,oBAAoB;IACpBC,6BAA6B,GAAG;EACpC,CAAC,GAAAR,IAAA;EACG,MAAM,CAACS,aAAa,EAAEC,gBAAgB,CAAC,GAAG,IAAAC,eAAQ,EAAmB,EAAE,CAAC;EACxE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAF,eAAQ,EAAC,EAAE,CAAC;EACtC,MAAM,CAACG,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAJ,eAAQ,EAAC,KAAK,CAAC;EACrD,MAAM,CAACK,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAN,eAAQ,EAAS,CAAC,CAAC;EAC/C,MAAM,CAACO,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAR,eAAQ,EAAC,CAAC,CAAC;EACrC,MAAM,CAACS,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAV,eAAQ,EAAgB,IAAI,CAAC;EAErE,MAAMW,MAAM,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAC3C,MAAMC,UAAU,GAAG,IAAAD,aAAM,EAAwB,IAAI,CAAC;EACtD,MAAME,QAAQ,GAAG,IAAAF,aAAM,EAA0B,IAAI,CAAC;EAEtD,MAAM;IAAEG;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;;EAE/B;AACJ;AACA;EACI,MAAMC,kBAAkB,GAAG,IAAAC,kBAAW,EACjCC,KAAiB,IAAK;IACnB,IAAIR,MAAM,CAACS,OAAO,IAAI,CAACT,MAAM,CAACS,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,EAAE;MAClElB,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EACD,CAACO,MAAM,CACX,CAAC;;EAED;AACJ;AACA;EACI,IAAAY,gBAAS,EAAC,MAAM;IACZC,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAER,kBAAkB,CAAC;IAEtD,OAAO,MAAM;MACTO,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAET,kBAAkB,CAAC;IAC7D,CAAC;EACL,CAAC,EAAE,CAACA,kBAAkB,EAAEN,MAAM,CAAC,CAAC;;EAEhC;AACJ;AACA;EACI,IAAAY,gBAAS,EAAC,MAAM;IACZ,MAAMI,SAAS,GAAGpC,IAAI,CAACqC,GAAG,CAACC,KAAA;MAAA,IAAC;QAAEC;MAAK,CAAC,GAAAD,KAAA;MAAA,OAAKC,IAAI;IAAA,EAAC;IAE9CxB,SAAS,CAAC,IAAAyB,iCAAsB,EAACJ,SAAS,CAAC,CAAC;EAChD,CAAC,EAAE,CAACpC,IAAI,EAAED,WAAW,CAAC,CAAC;;EAEvB;AACJ;AACA;EACI,IAAAiC,gBAAS,EAAC,MAAM;IACZ,MAAMS,KAAK,GAAGR,QAAQ,CAACS,cAAc,CAAC,kBAAkB,CAAC;IAEzD,IAAID,KAAK,EAAE;MACPxB,QAAQ,CAACwB,KAAK,CAACE,WAAW,CAAC;IAC/B;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAX,gBAAS,EAAC,MAAM;IACZ,IAAI5B,UAAU,EAAE;MACZ,MAAMwC,YAAY,GAAG5C,IAAI,CAAC6C,IAAI,CAACC,KAAA;QAAA,IAAC;UAAEC;QAAG,CAAC,GAAAD,KAAA;QAAA,OAAKC,EAAE,KAAK3C,UAAU;MAAA,EAAC;MAE7D,IAAIwC,YAAY,EAAE;QACdjC,QAAQ,CAACiC,YAAY,CAACL,IAAI,CAAC;MAC/B;IACJ;EACJ,CAAC,EAAE,CAACvC,IAAI,EAAEI,UAAU,CAAC,CAAC;;EAEtB;AACJ;AACA;EACI,MAAM4C,WAAW,GAAG,IAAArB,kBAAW,EAAC,MAAM;IAClC,IAAIrB,6BAA6B,EAAE;MAC/BE,gBAAgB,CAAC,IAAAyC,qBAAU,EAAC;QAAEC,KAAK,EAAElD,IAAI;QAAEmD,YAAY,EAAEzC;MAAM,CAAC,CAAC,CAAC;MAClEG,cAAc,CAAC,IAAI,CAAC;IACxB;EACJ,CAAC,EAAE,CAACb,IAAI,EAAEM,6BAA6B,EAAEI,KAAK,CAAC,CAAC;;EAEhD;AACJ;AACA;EACI,MAAM0C,YAAY,GAAG,IAAAzB,kBAAW,EAC3BC,KAAoC,IAAK;IACtC,MAAMyB,aAAa,GAAG,IAAAJ,qBAAU,EAAC;MAAEC,KAAK,EAAElD,IAAI;MAAEmD,YAAY,EAAEvB,KAAK,CAACG,MAAM,CAACrB;IAAM,CAAC,CAAC;IAEnF,IAAI,CAACJ,6BAA6B,IAAI,CAACsB,KAAK,CAACG,MAAM,CAACrB,KAAK,EAAE;MACvDF,gBAAgB,CAAC,EAAE,CAAC;IACxB,CAAC,MAAM;MACHA,gBAAgB,CAAC6C,aAAa,CAAC;MAC/BxC,cAAc,CAACwC,aAAa,CAACC,MAAM,KAAK,CAAC,CAAC;IAC9C;IAEA3C,QAAQ,CAACiB,KAAK,CAACG,MAAM,CAACrB,KAAK,CAAC;IAE5B,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAAC2B,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAAC5B,IAAI,EAAEC,QAAQ,EAAEK,6BAA6B,CAClD,CAAC;;EAED;AACJ;AACA;EACI,MAAMiD,UAAU,GAAG,IAAA5B,kBAAW,EACzBC,KAAmC,IAAK;IACrC,IAAI,OAAO1B,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAAC0B,KAAK,CAAC;IACjB;EACJ,CAAC,EACD,CAAC1B,MAAM,CACX,CAAC;;EAED;AACJ;AACA;EACI,MAAMsD,YAAY,GAAG,IAAA7B,kBAAW,EAC3B8B,IAAoB,IAAK;IACtB9C,QAAQ,CAAC8C,IAAI,CAAClB,IAAI,CAAC;IACnB1B,cAAc,CAAC,KAAK,CAAC;IAErB,IAAI,OAAOV,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACsD,IAAI,CAAC;IAClB;EACJ,CAAC,EACD,CAACtD,QAAQ,CACb,CAAC;EAED,MAAMuD,OAAO,GAAG,IAAAC,cAAO,EAAC,MAAM;IAC1B,MAAMT,KAAqB,GAAG,EAAE;IAEhC3C,aAAa,CAACqD,IAAI,CAAC,CAACzE,CAAC,EAAE0E,CAAC,KAAK1E,CAAC,CAACoD,IAAI,CAACuB,aAAa,CAACD,CAAC,CAACtB,IAAI,CAAC,CAAC;IAE1DhC,aAAa,CAACwD,OAAO,CAACC,KAAA,IAA4B;MAAA,IAA3B;QAAEjB,EAAE;QAAER,IAAI;QAAE0B;MAAS,CAAC,GAAAD,KAAA;MACzCd,KAAK,CAACgB,IAAI,eACNnG,MAAA,CAAAU,OAAA,CAAA0F,aAAA,CAAC9F,cAAA,CAAAI,OAAa;QACV2F,GAAG,EAAErB,EAAG;QACRR,IAAI,EAAEA,IAAK;QACX0B,QAAQ,EAAEA,QAAS;QACnBlB,EAAE,EAAEA,EAAG;QACP1C,oBAAoB,EAAEA,oBAAqB;QAC3CF,QAAQ,EAAEqD;MAAa,CAC1B,CACL,CAAC;IACL,CAAC,CAAC;IAEF,OAAON,KAAK;EAChB,CAAC,EAAE,CAAC7C,oBAAoB,EAAEmD,YAAY,EAAEjD,aAAa,CAAC,CAAC;EAEvD,IAAAyB,gBAAS,EAAC,MAAM;IACZ,MAAMqC,aAAa,GAAI1F,CAAgB,IAAK;MACxC,IAAIA,CAAC,CAACyF,GAAG,KAAK,SAAS,IAAIzF,CAAC,CAACyF,GAAG,KAAK,WAAW,EAAE;QAC9CzF,CAAC,CAAC2F,cAAc,CAAC,CAAC;QAClB,MAAMC,QAAQ,GAAGjD,UAAU,CAACO,OAAO,EAAE0C,QAAQ;QAC7C,IAAIA,QAAQ,IAAIA,QAAQ,CAACjB,MAAM,GAAG,CAAC,EAAE;UACjC,MAAMkB,QAAQ,GACVtD,YAAY,KAAK,IAAI,GACf,CAACA,YAAY,IAAIvC,CAAC,CAACyF,GAAG,KAAK,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAGG,QAAQ,CAACjB,MAAM,IAChEiB,QAAQ,CAACjB,MAAM,GACf,CAAC;UAEX,IAAIpC,YAAY,KAAK,IAAI,EAAE;YACvB,MAAMuD,WAAW,GAAGF,QAAQ,CAACrD,YAAY,CAAmB;YAC5DuD,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEAvD,eAAe,CAACqD,QAAQ,CAAC;UAEzB,MAAMG,UAAU,GAAGJ,QAAQ,CAACC,QAAQ,CAAmB;UACvDG,UAAU,CAACD,QAAQ,GAAG,CAAC;UACvBC,UAAU,CAACC,KAAK,CAAC,CAAC;QACtB;MACJ,CAAC,MAAM,IAAIjG,CAAC,CAACyF,GAAG,KAAK,OAAO,IAAIlD,YAAY,KAAK,IAAI,EAAE;QACnD,MAAM2D,OAAO,GAAGvD,UAAU,CAACO,OAAO,EAAE0C,QAAQ,CAACrD,YAAY,CAAC;QAE1D,IAAI,CAAC2D,OAAO,EAAE;UACV;QACJ;QAEA,MAAM;UAAE9B,EAAE;UAAE+B;QAAY,CAAC,GAAGD,OAAO;QAEnCrB,YAAY,CAAC;UAAET,EAAE,EAAEA,EAAE,CAACgC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC;UAAExC,IAAI,EAAEuC,WAAW,IAAI;QAAG,CAAC,CAAC;MACtF;IACJ,CAAC;IAED7C,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEmC,aAAa,CAAC;IAEnD,OAAO,MAAM;MACTpC,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEkC,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CAACnD,YAAY,EAAEsC,YAAY,CAAC,CAAC;EAEhC,MAAMwB,cAAc,GAAG,IAAArD,kBAAW,EAAEC,KAAoB,IAAK;IACzD,IAAIA,KAAK,CAACqD,OAAO,KAAK,EAAE,EAAE;MACtBzE,gBAAgB,CAAC,EAAE,CAAC;IACxB;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAwB,gBAAS,EAAC,MAAM;IACZC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAE8C,cAAc,CAAC;IAEpD,OAAO,MAAM;MACT/C,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAE8C,cAAc,CAAC;IACxD,CAAC;EACL,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,OAAO,IAAArB,cAAO,EACV,mBACI5F,MAAA,CAAAU,OAAA,CAAA0F,aAAA,CAAC7F,UAAA,CAAA4G,eAAe;IAACC,GAAG,EAAE/D;EAAO,gBACzBrD,MAAA,CAAAU,OAAA,CAAA0F,aAAA;IAAKpB,EAAE,EAAC;EAAkB,gBACtBhF,MAAA,CAAAU,OAAA,CAAA0F,aAAA,CAAChG,MAAA,CAAAM,OAAK;IACF0G,GAAG,EAAE5D,QAAS;IACdtB,QAAQ,EAAEmD,YAAa;IACvBlD,MAAM,EAAEqD,UAAW;IACnB6B,OAAO,EAAEpC,WAAY;IACrBjD,WAAW,EAAEA,WAAY;IACzBW,KAAK,EAAEA;EAAM,CAChB,CACA,CAAC,eACN3C,MAAA,CAAAU,OAAA,CAAA0F,aAAA,CAACrG,aAAA,CAAAuH,eAAe;IAACC,OAAO,EAAE;EAAM,gBAC5BvH,MAAA,CAAAU,OAAA,CAAA0F,aAAA,CAAC7F,UAAA,CAAAiH,yBAAyB;IACtB/D,OAAO,EAAEA,OAAO,EAAEgE,IAAK;IACvBpB,GAAG,EAAC,SAAS;IACbtD,MAAM,EAAEA,MAAO;IACfE,KAAK,EAAEA,KAAM;IACbsE,OAAO,EAAE;MAAExE,MAAM,EAAE,CAAC;MAAE2E,OAAO,EAAE;IAAE,CAAE;IACnCC,OAAO,EACH9E,WAAW,GACL;MAAEE,MAAM,EAAE,aAAa;MAAE2E,OAAO,EAAE;IAAE,CAAC,GACrC;MAAE3E,MAAM,EAAE,CAAC;MAAE2E,OAAO,EAAE;IAAE,CACjC;IACDE,UAAU,EAAE;MACRC,QAAQ,EAAE,GAAG;MACbC,IAAI,EAAE;IACV;EAAE,gBAEF9H,MAAA,CAAAU,OAAA,CAAA0F,aAAA;IAAKgB,GAAG,EAAE7D;EAAW,GAAEoC,OAAa,CACb,CACd,CACJ,CACpB,EACD,CACIlC,OAAO,EAAEgE,IAAI,EACb9B,OAAO,EACPH,UAAU,EACVH,YAAY,EACZJ,WAAW,EACXlC,MAAM,EACNF,WAAW,EACXb,WAAW,EACXW,KAAK,EACLM,KAAK,CAEb,CAAC;AACL,CAAC;AAEDnB,SAAS,CAACiG,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvH,OAAA,GAErBoB,SAAS"}

package/lib/components/search-box/SearchBox.styles.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 /// <reference types="react" />
-import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { Browser } from 'detect-browser';
+import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 export declare const StyledSearchBox: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 type StyledMotionSearchBoxBodyProps = WithTheme<{
     height: number;

package/lib/components/search-box/SearchBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledSearchBox","exports","styled","div","StyledMotionSearchBoxBody","motion","_ref","theme","_ref2","width","_ref3","height","_ref4","_ref5","browser","css"],"sources":["../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { Browser } from 'detect-browser';\n\nexport const StyledSearchBox = styled.div``;\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n    height: number;\n    width: number;\n    browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n    background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['001']};\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    border-top: none;\n    cursor: pointer;\n    width: ${({ width }) => width}px;\n    max-height: 300px;\n    overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n\n    // Styles for custom scrollbar\n    ${({ browser, theme }: StyledMotionSearchBoxBodyProps) =>\n        browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAIzC,MAAMY,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAI,EAAC;AAQpC,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAG,IAAAF,yBAAM,EAACG,oBAAM,CAACF,GAAG,CAAkC;AAC5F,kBAAkBG,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AAClC;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAMC,MAAM,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAE;AACtE;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEL;EAAsC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC/E;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC,OAAO;IAAEP;EAAsC,CAAC,GAAAM,KAAA;EAAA,OACjDC,OAAO,KAAK,SAAS,GACf,IAAAC,qBAAG,CAAC;AAClB,0CAA0CR,KAAK,CAAC,UAAU,CAAE;AAC5D;AACA,eAAe,GACD,IAAAQ,qBAAG,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CR,KAAK,CAAC,UAAU,CAAE;AACjE;AACA;AACA,eAAe;AAAA,CAAC;AAChB,CAAC"}
+{"version":3,"file":"SearchBox.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledSearchBox","exports","styled","div","StyledMotionSearchBoxBody","motion","_ref","theme","_ref2","width","_ref3","height","_ref4","_ref5","browser","css"],"sources":["../../../src/components/search-box/SearchBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSearchBox = styled.div``;\n\ntype StyledMotionSearchBoxBodyProps = WithTheme<{\n    height: number;\n    width: number;\n    browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionSearchBoxBody = styled(motion.div)<StyledMotionSearchBoxBodyProps>`\n    background: ${({ theme }: StyledMotionSearchBoxBodyProps) => theme['001']};\n    position: absolute;\n    z-index: 4;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    border-top: none;\n    cursor: pointer;\n    width: ${({ width }) => width}px;\n    max-height: 300px;\n    overflow-y: ${({ height }) => (height <= 300 ? 'hidden' : 'auto')};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMotionSearchBoxBodyProps) => theme['009-rgb']}, 0.08) inset;\n\n    // Styles for custom scrollbar\n    ${({ browser, theme }: StyledMotionSearchBoxBodyProps) =>\n        browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAGzC,MAAMY,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAGE,yBAAM,CAACC,GAAI,EAAC;AAQpC,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAG,IAAAF,yBAAM,EAACG,oBAAM,CAACF,GAAG,CAAkC;AAC5F,kBAAkBG,IAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AAClC;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAMC,MAAM,IAAI,GAAG,GAAG,QAAQ,GAAG,MAAM;AAAA,CAAE;AACtE;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEL;EAAsC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC/E;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC,OAAO;IAAEP;EAAsC,CAAC,GAAAM,KAAA;EAAA,OACjDC,OAAO,KAAK,SAAS,GACf,IAAAC,qBAAG,CAAC;AAClB,0CAA0CR,KAAK,CAAC,UAAU,CAAE;AAC5D;AACA,eAAe,GACD,IAAAQ,qBAAG,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CR,KAAK,CAAC,UAAU,CAAE;AACjE;AACA;AACA,eAAe;AAAA,CAAC;AAChB,CAAC"}

package/lib/components/signature/Signature.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
-var _Button = _interopRequireDefault(require("../button/Button"));
-var _Signature = require("./Signature.styles");
-var _put = require("../../api/signature/put");
 var _delete = require("../../api/signature/delete");
 var _get = require("../../api/signature/get");
+var _put = require("../../api/signature/put");
+var _Button = _interopRequireDefault(require("../button/Button"));
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
-var _chaynsApi = require("chayns-api");
+var _Signature = require("./Signature.styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/lib/components/signature/Signature.js.map

@@ -1 +1 @@
-{"version":3,"file":"Signature.js","names":["_react","_interopRequireWildcard","require","_Button","_interopRequireDefault","_Signature","_put","_delete","_get","_Icon","_chaynsApi","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Signature","forwardRef","_ref","ref","onEdit","onRemove","onUnsubscribe","onSubscribe","buttonText","isDisabled","signatureUrl","setSignatureUrl","useState","undefined","hasSubscribed","setHasSubscribed","useEffect","loadUserSignature","getUserSignature","then","signature","handleCallDialog","useCallback","shouldSubscribe","dialog","createDialog","type","DialogType","SIGNATURE","open","buttonType","result","putUserSignature","success","handleEdit","handleDelete","deleteUserSignature","handleClick","handleUnSubscribe","useImperativeHandle","edit","delete","createElement","StyledSignature","onClick","StyledSignatureImageWrapper","StyledSignatureImage","src","StyledSignatureDeleteIconWrapper","icons","size","displayName","_default","exports"],"sources":["../../../src/components/signature/Signature.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';\nimport Button from '../button/Button';\nimport {\n    StyledSignature,\n    StyledSignatureDeleteIconWrapper,\n    StyledSignatureImage,\n    StyledSignatureImageWrapper,\n} from './Signature.styles';\nimport { putUserSignature } from '../../api/signature/put';\nimport { deleteUserSignature } from '../../api/signature/delete';\nimport { getUserSignature } from '../../api/signature/get';\nimport Icon from '../icon/Icon';\nimport { createDialog, DialogType } from 'chayns-api';\nimport type { SignatureDialogResult } from '../../types/signature';\n\nexport interface SignatureRef {\n    edit: VoidFunction;\n    delete: VoidFunction;\n}\n\nexport type SignatureProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the signature is edited.\n     */\n    onEdit?: (signature: string) => void;\n    /**\n     * Function to be executed when the user deletes the signature.\n     */\n    onRemove?: () => void;\n    /**\n     * Function to be executed when the user subscribes.\n     */\n    onSubscribe?: () => void;\n    /**\n     * Function to be executed when the user unsubscribes.\n     */\n    onUnsubscribe?: () => void;\n};\n\nconst Signature = forwardRef<SignatureRef, SignatureProps>(\n    ({ onEdit, onRemove, onUnsubscribe, onSubscribe, buttonText, isDisabled }, ref) => {\n        const [signatureUrl, setSignatureUrl] = useState<string | undefined>(undefined);\n        const [hasSubscribed, setHasSubscribed] = useState(false);\n\n        useEffect(() => {\n            const loadUserSignature = async () => {\n                await getUserSignature().then((signature) => {\n                    setSignatureUrl(signature);\n                });\n            };\n\n            void loadUserSignature();\n        }, []);\n\n        const handleCallDialog = useCallback(\n            async (shouldSubscribe: boolean) => {\n                const dialog = (await createDialog({\n                    type: DialogType.SIGNATURE,\n                }).open()) as SignatureDialogResult;\n\n                if (dialog.buttonType === 1 && dialog.result) {\n                    await putUserSignature(dialog.result).then((success) => {\n                        if (success) {\n                            setSignatureUrl(dialog.result);\n\n                            if (shouldSubscribe) {\n                                setHasSubscribed(true);\n\n                                if (typeof onSubscribe === 'function') {\n                                    onSubscribe();\n                                }\n                            } else if (typeof onEdit === 'function') {\n                                onEdit(dialog.result);\n                            }\n                        }\n                    });\n                }\n            },\n            [onEdit, onSubscribe],\n        );\n\n        const handleEdit = useCallback(() => {\n            void handleCallDialog(false);\n        }, [handleCallDialog]);\n\n        const handleDelete = useCallback(async () => {\n            await deleteUserSignature().then((success) => {\n                if (success) {\n                    setSignatureUrl(undefined);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove();\n                    }\n                }\n            });\n        }, [onRemove]);\n\n        const handleClick = useCallback(() => {\n            if (signatureUrl) {\n                setHasSubscribed(true);\n\n                if (typeof onSubscribe === 'function') {\n                    onSubscribe();\n                }\n            } else {\n                void handleCallDialog(true);\n            }\n        }, [handleCallDialog, onSubscribe, signatureUrl]);\n\n        const handleUnSubscribe = () => {\n            setHasSubscribed(false);\n            setSignatureUrl(undefined);\n\n            if (typeof onUnsubscribe === 'function') {\n                onUnsubscribe();\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                edit: handleEdit,\n                delete: handleDelete,\n            }),\n            [handleDelete, handleEdit],\n        );\n\n        return (\n            <StyledSignature>\n                {!hasSubscribed ? (\n                    <Button isDisabled={isDisabled} onClick={handleClick}>\n                        {buttonText}\n                    </Button>\n                ) : (\n                    <StyledSignatureImageWrapper>\n                        <StyledSignatureImage src={signatureUrl} />\n                        <StyledSignatureDeleteIconWrapper>\n                            <Icon icons={['ts-wrong']} size={20} onClick={handleUnSubscribe} />\n                        </StyledSignatureDeleteIconWrapper>\n                    </StyledSignatureImageWrapper>\n                )}\n            </StyledSignature>\n        );\n    },\n);\n\nSignature.displayName = 'Signature';\n\nexport default Signature;\n"],"mappings":"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"}
+{"version":3,"file":"Signature.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_delete","_get","_put","_Button","_interopRequireDefault","_Icon","_Signature","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Signature","forwardRef","_ref","ref","onEdit","onRemove","onUnsubscribe","onSubscribe","buttonText","isDisabled","signatureUrl","setSignatureUrl","useState","undefined","hasSubscribed","setHasSubscribed","useEffect","loadUserSignature","getUserSignature","then","signature","handleCallDialog","useCallback","shouldSubscribe","dialog","createDialog","type","DialogType","SIGNATURE","open","buttonType","result","putUserSignature","success","handleEdit","handleDelete","deleteUserSignature","handleClick","handleUnSubscribe","useImperativeHandle","edit","delete","createElement","StyledSignature","onClick","StyledSignatureImageWrapper","StyledSignatureImage","src","StyledSignatureDeleteIconWrapper","icons","size","displayName","_default","exports"],"sources":["../../../src/components/signature/Signature.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport React, { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';\nimport { deleteUserSignature } from '../../api/signature/delete';\nimport { getUserSignature } from '../../api/signature/get';\nimport { putUserSignature } from '../../api/signature/put';\nimport type { SignatureDialogResult } from '../../types/signature';\nimport Button from '../button/Button';\nimport Icon from '../icon/Icon';\nimport {\n    StyledSignature,\n    StyledSignatureDeleteIconWrapper,\n    StyledSignatureImage,\n    StyledSignatureImageWrapper,\n} from './Signature.styles';\n\nexport interface SignatureRef {\n    edit: VoidFunction;\n    delete: VoidFunction;\n}\n\nexport type SignatureProps = {\n    /**\n     * The text that should be displayed inside the button.\n     */\n    buttonText: string;\n    /**\n     * Whether the button is disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the signature is edited.\n     */\n    onEdit?: (signature: string) => void;\n    /**\n     * Function to be executed when the user deletes the signature.\n     */\n    onRemove?: () => void;\n    /**\n     * Function to be executed when the user subscribes.\n     */\n    onSubscribe?: () => void;\n    /**\n     * Function to be executed when the user unsubscribes.\n     */\n    onUnsubscribe?: () => void;\n};\n\nconst Signature = forwardRef<SignatureRef, SignatureProps>(\n    ({ onEdit, onRemove, onUnsubscribe, onSubscribe, buttonText, isDisabled }, ref) => {\n        const [signatureUrl, setSignatureUrl] = useState<string | undefined>(undefined);\n        const [hasSubscribed, setHasSubscribed] = useState(false);\n\n        useEffect(() => {\n            const loadUserSignature = async () => {\n                await getUserSignature().then((signature) => {\n                    setSignatureUrl(signature);\n                });\n            };\n\n            void loadUserSignature();\n        }, []);\n\n        const handleCallDialog = useCallback(\n            async (shouldSubscribe: boolean) => {\n                const dialog = (await createDialog({\n                    type: DialogType.SIGNATURE,\n                }).open()) as SignatureDialogResult;\n\n                if (dialog.buttonType === 1 && dialog.result) {\n                    await putUserSignature(dialog.result).then((success) => {\n                        if (success) {\n                            setSignatureUrl(dialog.result);\n\n                            if (shouldSubscribe) {\n                                setHasSubscribed(true);\n\n                                if (typeof onSubscribe === 'function') {\n                                    onSubscribe();\n                                }\n                            } else if (typeof onEdit === 'function') {\n                                onEdit(dialog.result);\n                            }\n                        }\n                    });\n                }\n            },\n            [onEdit, onSubscribe],\n        );\n\n        const handleEdit = useCallback(() => {\n            void handleCallDialog(false);\n        }, [handleCallDialog]);\n\n        const handleDelete = useCallback(async () => {\n            await deleteUserSignature().then((success) => {\n                if (success) {\n                    setSignatureUrl(undefined);\n\n                    if (typeof onRemove === 'function') {\n                        onRemove();\n                    }\n                }\n            });\n        }, [onRemove]);\n\n        const handleClick = useCallback(() => {\n            if (signatureUrl) {\n                setHasSubscribed(true);\n\n                if (typeof onSubscribe === 'function') {\n                    onSubscribe();\n                }\n            } else {\n                void handleCallDialog(true);\n            }\n        }, [handleCallDialog, onSubscribe, signatureUrl]);\n\n        const handleUnSubscribe = () => {\n            setHasSubscribed(false);\n            setSignatureUrl(undefined);\n\n            if (typeof onUnsubscribe === 'function') {\n                onUnsubscribe();\n            }\n        };\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                edit: handleEdit,\n                delete: handleDelete,\n            }),\n            [handleDelete, handleEdit],\n        );\n\n        return (\n            <StyledSignature>\n                {!hasSubscribed ? (\n                    <Button isDisabled={isDisabled} onClick={handleClick}>\n                        {buttonText}\n                    </Button>\n                ) : (\n                    <StyledSignatureImageWrapper>\n                        <StyledSignatureImage src={signatureUrl} />\n                        <StyledSignatureDeleteIconWrapper>\n                            <Icon icons={['ts-wrong']} size={20} onClick={handleUnSubscribe} />\n                        </StyledSignatureDeleteIconWrapper>\n                    </StyledSignatureImageWrapper>\n                )}\n            </StyledSignature>\n        );\n    },\n);\n\nSignature.displayName = 'Signature';\n\nexport default Signature;\n"],"mappings":"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"}