@chayns-components/core 5.0.0-beta.1003 → 5.0.0-beta.1005

package/lib/cjs/components/radio-button/RadioButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledRadioButton","exports","styled","span","$isDisabled","$radioButtonRightElementMargin","css","StyledRadioButtonWrapper","div","StyledRadioButtonCheckBox","input","StyledRadioButtonPseudoCheckBox","theme","$isChecked","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonLabel","p","text","StyledLabelWrapper","StyledMotionRadioButtonChildren","motion"],"sources":["../../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\n\ntype StyledRadioButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $radioButtonRightElementMargin: RadioButtonRightElementMargin;\n}>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n    display: flex;\n    flex-direction: column;\n\n    position: relative;\n\n    opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n\n    ${({ $radioButtonRightElementMargin }: StyledRadioButtonProps) => {\n        switch ($radioButtonRightElementMargin) {\n            case 'BOTH':\n                return css`\n                    margin: 6px 0;\n                `;\n            case 'TOP':\n                return css`\n                    margin-top: 6px;\n                `;\n            case 'BOTTOM':\n                return css`\n                    margin-bottom: 6px;\n                `;\n            case 'NONE':\n            default:\n                return css`\n                    margin: 0;\n                `;\n        }\n    }}\n`;\n\nexport const StyledRadioButtonWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 5px;\n    user-select: none;\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n    opacity: 0;\n    height: 15px;\n    width: 15px;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{\n    $isChecked: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n    background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n    opacity: 1;\n    border: 1px solid\n        rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    border-radius: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: ${({ $isDisabled }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n    $isHovered: boolean;\n    $isSelected: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n    background-color: transparent;\n    position: absolute;\n    top: 1px;\n    left: 3.925px;\n    display: inline-block;\n    transform: rotate(35deg);\n    height: 9px;\n    width: 5px;\n    border-bottom: 2px solid white;\n    border-right: 2px solid white;\n    border-top: transparent;\n    border-left: transparent;\n    z-index: 2;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxMarkProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n\n    ${({ $isHovered, $isSelected }) => {\n        if ($isSelected) {\n            return css`\n                opacity: 1;\n            `;\n        }\n\n        if ($isHovered) {\n            return css`\n                opacity: 0.5;\n            `;\n        }\n\n        return css`\n            opacity: 0;\n        `;\n    }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n    margin: 0;\n    cursor: ${({ $isDisabled }: StyledRadioButtonLabelProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\nexport const StyledLabelWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 12px;\n`;\n\ntype StyledMotionRadioButtonChildrenProps = WithTheme<unknown>;\n\nexport const StyledMotionRadioButtonChildren = styled(\n    motion.div,\n)<StyledMotionRadioButtonChildrenProps>`\n    margin-left: 18px;\n    cursor: text;\n    overflow: hidden;\n    color: ${({ theme }: StyledMotionRadioButtonChildrenProps) => theme.text};\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RadioButton.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledRadioButton","exports","styled","span","$isDisabled","$radioButtonRightElementMargin","css","StyledRadioButtonWrapper","div","StyledRadioButtonCheckBox","input","StyledRadioButtonPseudoCheckBox","theme","$isChecked","StyledRadioButtonCheckBoxMark","$isHovered","$isSelected","StyledRadioButtonLabel","p","text","StyledLabelWrapper","StyledMotionRadioButtonChildren","motion"],"sources":["../../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { RadioButtonRightElementMargin } from '../../types/radioButton';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledRadioButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $radioButtonRightElementMargin: RadioButtonRightElementMargin;\n}>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n    display: flex;\n    flex-direction: column;\n\n    position: relative;\n\n    opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n\n    ${({ $radioButtonRightElementMargin }: StyledRadioButtonProps) => {\n        switch ($radioButtonRightElementMargin) {\n            case 'BOTH':\n                return css`\n                    margin: 6px 0;\n                `;\n            case 'TOP':\n                return css`\n                    margin-top: 6px;\n                `;\n            case 'BOTTOM':\n                return css`\n                    margin-bottom: 6px;\n                `;\n            case 'NONE':\n            default:\n                return css`\n                    margin: 0;\n                `;\n        }\n    }}\n`;\n\nexport const StyledRadioButtonWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 5px;\n    user-select: none;\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n    opacity: 0;\n    height: 15px;\n    width: 15px;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{\n    $isChecked: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n    background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n    opacity: 1;\n    border: 1px solid\n        rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    border-radius: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: ${({ $isDisabled }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n    $isHovered: boolean;\n    $isSelected: boolean;\n    $isDisabled: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n    background-color: transparent;\n    position: absolute;\n    top: 1px;\n    left: 3.925px;\n    display: inline-block;\n    transform: rotate(35deg);\n    height: 9px;\n    width: 5px;\n    border-bottom: 2px solid white;\n    border-right: 2px solid white;\n    border-top: transparent;\n    border-left: transparent;\n    z-index: 2;\n    cursor: ${({ $isDisabled }: StyledRadioButtonCheckBoxMarkProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n\n    ${({ $isHovered, $isSelected }) => {\n        if ($isSelected) {\n            return css`\n                opacity: 1;\n            `;\n        }\n\n        if ($isHovered) {\n            return css`\n                opacity: 0.5;\n            `;\n        }\n\n        return css`\n            opacity: 0;\n        `;\n    }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n    margin: 0;\n    cursor: ${({ $isDisabled }: StyledRadioButtonLabelProps) =>\n        $isDisabled ? 'default !important' : 'pointer !important'};\n`;\n\nexport const StyledLabelWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 12px;\n`;\n\ntype StyledMotionRadioButtonChildrenProps = WithTheme<unknown>;\n\nexport const StyledMotionRadioButtonChildren = styled(\n    motion.div,\n)<StyledMotionRadioButtonChildrenProps>`\n    margin-left: 18px;\n    cursor: text;\n    overflow: hidden;\n    color: ${({ theme }: StyledMotionRadioButtonChildrenProps) => theme.text};\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _chaynsApi = require("chayns-api");
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
 var _reactDom = require("react-dom");
 var _styledComponents = require("styled-components");
 var _calculate = require("../../utils/calculate");
@@ -21,7 +21,7 @@ var _SearchBox = require("./SearchBox.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 && {}.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 SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
+const SearchBox = /*#__PURE__*/(0, _react2.forwardRef)(({
   placeholder,
   leftIcons,
   lists,
@@ -37,45 +37,45 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   shouldAddInputToList = true,
   shouldShowToggleIcon = false
 }, ref) => {
-  const [matchingListsItems, setMatchingListsItems] = (0, _react.useState)(lists);
-  const [selectedImage, setSelectedImage] = (0, _react.useState)();
-  const [value, setValue] = (0, _react.useState)('');
-  const [isAnimating, setIsAnimating] = (0, _react.useState)(false);
-  const [height, setHeight] = (0, _react.useState)(0);
-  const [width, setWidth] = (0, _react.useState)(0);
-  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(null);
-  const [hasMultipleGroups, setHasMultipleGroups] = (0, _react.useState)(lists.length > 1);
-  const [filteredChildrenArray, setFilteredChildrenArray] = (0, _react.useState)();
-  const [inputToListValue, setInputToListValue] = (0, _react.useState)('');
-  const [groups, setGroups] = (0, _react.useState)(['all']);
-  const [portal, setPortal] = (0, _react.useState)();
-  const [internalCoordinates, setInternalCoordinates] = (0, _react.useState)({
+  const [matchingListsItems, setMatchingListsItems] = (0, _react2.useState)(lists);
+  const [selectedImage, setSelectedImage] = (0, _react2.useState)();
+  const [value, setValue] = (0, _react2.useState)('');
+  const [isAnimating, setIsAnimating] = (0, _react2.useState)(false);
+  const [height, setHeight] = (0, _react2.useState)(0);
+  const [width, setWidth] = (0, _react2.useState)(0);
+  const [focusedIndex, setFocusedIndex] = (0, _react2.useState)(null);
+  const [hasMultipleGroups, setHasMultipleGroups] = (0, _react2.useState)(lists.length > 1);
+  const [filteredChildrenArray, setFilteredChildrenArray] = (0, _react2.useState)();
+  const [inputToListValue, setInputToListValue] = (0, _react2.useState)('');
+  const [groups, setGroups] = (0, _react2.useState)(['all']);
+  const [portal, setPortal] = (0, _react2.useState)();
+  const [internalCoordinates, setInternalCoordinates] = (0, _react2.useState)({
     x: 0,
     y: 0
   });
-  const [newContainer, setNewContainer] = (0, _react.useState)(container ?? null);
-  const boxRef = (0, _react.useRef)(null);
-  const contentRef = (0, _react.useRef)(null);
-  const inputRef = (0, _react.useRef)(null);
-  const hasFocusRef = (0, _react.useRef)(false);
-  const isAnimatingRef = (0, _react.useRef)(false);
+  const [newContainer, setNewContainer] = (0, _react2.useState)(container ?? null);
+  const boxRef = (0, _react2.useRef)(null);
+  const contentRef = (0, _react2.useRef)(null);
+  const inputRef = (0, _react2.useRef)(null);
+  const hasFocusRef = (0, _react2.useRef)(false);
+  const isAnimatingRef = (0, _react2.useRef)(false);
   const theme = (0, _styledComponents.useTheme)();
   const {
     browser
   } = (0, _chaynsApi.getDevice)();
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (boxRef.current && !container) {
       const el = boxRef.current;
       const element = el.closest('.dialog-inner') || el.closest('body');
       setNewContainer(element);
     }
   }, [container]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (container instanceof Element) {
       setNewContainer(container);
     }
   }, [container]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (boxRef.current) {
       const {
         x,
@@ -91,10 +91,10 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   /**
    * Checks if Lists are smaller then 1
    */
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     setHasMultipleGroups(lists.length > 1);
   }, [lists]);
-  const filterButtons = (0, _react.useMemo)(() => {
+  const filterButtons = (0, _react2.useMemo)(() => {
     const items = [];
     if (lists.length <= 1) {
       return items;
@@ -115,7 +115,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   /**
    * Filters the lists by the FilterButtons
    */
-  const activeList = (0, _react.useMemo)(() => {
+  const activeList = (0, _react2.useMemo)(() => {
     let newLists = [];
     if (groups[0] === 'all') {
       newLists = lists;
@@ -158,7 +158,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
     setMatchingListsItems(filteredMatchingListItems);
     return newLists;
   }, [groups, lists, shouldAddInputToList, value]);
-  const handleOpen = (0, _react.useCallback)(() => {
+  const handleOpen = (0, _react2.useCallback)(() => {
     if (boxRef.current) {
       const {
         x,
@@ -172,7 +172,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       setIsAnimating(true);
     }
   }, []);
-  const handleClose = (0, _react.useCallback)(() => {
+  const handleClose = (0, _react2.useCallback)(() => {
     setIsAnimating(false);
   }, []);
   const handleFilterButtonsGroupSelect = keys => {
@@ -182,7 +182,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   /**
    * This function closes the list of items
    */
-  const handleOutsideClick = (0, _react.useCallback)(event => {
+  const handleOutsideClick = (0, _react2.useCallback)(event => {
     if (boxRef.current && !boxRef.current.contains(event.target) && contentRef.current && !contentRef.current.contains(event.target)) {
       handleClose();
     }
@@ -191,7 +191,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   /**
    * This hook listens for clicks
    */
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     document.addEventListener('click', handleOutsideClick);
     window.addEventListener('blur', () => handleClose());
     return () => {
@@ -203,7 +203,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   /**
    * This hook calculates the height
    */
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     const textArray = [];
     activeList.forEach(({
       list,
@@ -226,7 +226,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   /**
    * This hook calculates the width
    */
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     const input = document.getElementById('search_box_input');
     const getInputWidth = () => {
       if (input) {
@@ -237,7 +237,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       new ResizeObserver(getInputWidth).observe(input);
     }
   }, []);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (selectedId) {
       activeList.forEach(({
         list
@@ -248,7 +248,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
         if (selectedItem) {
           setValue(selectedItem.text);
           if (selectedItem.imageUrl) {
-            setSelectedImage(/*#__PURE__*/_react.default.createElement(_SearchBoxItem2.StyledSearchBoxItemImage, {
+            setSelectedImage(/*#__PURE__*/_react2.default.createElement(_SearchBoxItem2.StyledSearchBoxItemImage, {
               src: selectedItem.imageUrl,
               $shouldShowRoundImage: shouldShowRoundImage
             }));
@@ -262,15 +262,15 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
    * This hook resets the value if the selectedId changes to undefined. This is an own useEffect because the value
    * should not be reset if the list changes and the selectedId is still undefined.
    */
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (!selectedId) {
       setValue('');
     }
   }, [selectedId]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     isAnimatingRef.current = isAnimating;
   }, [isAnimating]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (matchingListsItems.length !== 0 && !isAnimatingRef.current && hasFocusRef.current) {
       handleOpen();
     }
@@ -279,7 +279,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   /**
    * This function sets the items on focus if shouldShowContentOnEmptyInput
    */
-  const handleFocus = (0, _react.useCallback)(() => {
+  const handleFocus = (0, _react2.useCallback)(() => {
     hasFocusRef.current = true;
     if (shouldShowContentOnEmptyInput) {
       const newMatchingItems = [];
@@ -322,7 +322,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
    * This function filters the lists by input
    */
 
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     const newMatchingItems = [];
     activeList.forEach(({
       list,
@@ -359,32 +359,32 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       });
     }
   }, [inputToListValue, activeList, shouldAddInputToList, shouldShowContentOnEmptyInput, value]);
-  const handleClick = (0, _react.useCallback)(() => {
+  const handleClick = (0, _react2.useCallback)(() => {
     if (isAnimating) {
       handleClose();
     } else {
       handleOpen();
     }
   }, [handleClose, handleOpen, isAnimating]);
-  const rightElement = (0, _react.useMemo)(() => {
+  const rightElement = (0, _react2.useMemo)(() => {
     if (!shouldShowToggleIcon) {
       return undefined;
     }
-    return /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBoxIcon, {
+    return /*#__PURE__*/_react2.default.createElement(_SearchBox.StyledSearchBoxIcon, {
       onClick: handleClick
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    }, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
       icons: ['fa fa-chevron-down'],
       color: theme['006']
     }));
   }, [handleClick, shouldShowToggleIcon, theme]);
-  const leftElement = (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBoxLeftWrapper, null, leftIcons && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  const leftElement = (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_SearchBox.StyledSearchBoxLeftWrapper, null, leftIcons && /*#__PURE__*/_react2.default.createElement(_Icon.default, {
     icons: leftIcons
   }), selectedImage && selectedImage), [leftIcons, selectedImage]);
 
   /**
    * This function handles changes of the input
    */
-  const handleChange = (0, _react.useCallback)(event => {
+  const handleChange = (0, _react2.useCallback)(event => {
     const filteredLists = [];
     activeList.forEach(({
       list,
@@ -426,7 +426,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   /**
    * This function handles the blur event of the input
    */
-  const handleBlur = (0, _react.useCallback)(event => {
+  const handleBlur = (0, _react2.useCallback)(event => {
     hasFocusRef.current = false;
     if (typeof onBlur === 'function') {
       onBlur(event);
@@ -436,14 +436,14 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
   /**
    * This function handles the item selection
    */
-  const handleSelect = (0, _react.useCallback)(item => {
+  const handleSelect = (0, _react2.useCallback)(item => {
     const newItem = {
       ...item,
       text: item.text.replace('<b>', '').replace('</b>', '').replace('</b', '')
     };
     setValue(newItem.text);
     handleClose();
-    setSelectedImage(newItem.imageUrl ? /*#__PURE__*/_react.default.createElement(_SearchBoxItem2.StyledSearchBoxItemImage, {
+    setSelectedImage(newItem.imageUrl ? /*#__PURE__*/_react2.default.createElement(_SearchBoxItem2.StyledSearchBoxItemImage, {
       src: newItem.imageUrl,
       $shouldShowRoundImage: shouldShowRoundImage
     }) : undefined);
@@ -452,7 +452,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       onSelect(newItem);
     }
   }, [handleClose, onSelect, shouldShowRoundImage]);
-  const content = (0, _react.useMemo)(() => {
+  const content = (0, _react2.useMemo)(() => {
     const items = [];
     matchingListsItems.forEach(({
       groupName,
@@ -463,7 +463,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
           return;
         }
         if (index !== 0) {
-          items.push(/*#__PURE__*/_react.default.createElement(_GroupName.default, {
+          items.push(/*#__PURE__*/_react2.default.createElement(_GroupName.default, {
             key: groupName,
             name: groupName ?? ''
           }));
@@ -474,7 +474,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
         text,
         imageUrl
       }) => {
-        items.push(/*#__PURE__*/_react.default.createElement(_SearchBoxItem.default, {
+        items.push(/*#__PURE__*/_react2.default.createElement(_SearchBoxItem.default, {
           key: `${id}_${groupName ?? ''}`,
           id: id,
           text: text,
@@ -486,7 +486,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       });
     });
     if (shouldAddInputToList && inputToListValue !== '') {
-      items.push(/*#__PURE__*/_react.default.createElement(_SearchBoxItem.default, {
+      items.push(/*#__PURE__*/_react2.default.createElement(_SearchBoxItem.default, {
         id: "input-value",
         onSelect: handleSelect,
         text: `<b>${inputToListValue}</b`
@@ -494,7 +494,7 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
     }
     return items;
   }, [matchingListsItems, shouldAddInputToList, inputToListValue, hasMultipleGroups, shouldShowRoundImage, handleSelect]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     const handleKeyDown = e => {
       if (!isAnimating || matchingListsItems.length === 0) {
         return;
@@ -557,27 +557,27 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [filteredChildrenArray, focusedIndex, handleSelect, isAnimating, matchingListsItems.length]);
-  const handleKeyPress = (0, _react.useCallback)(event => {
+  const handleKeyPress = (0, _react2.useCallback)(event => {
     if (event.keyCode === 27) {
       setMatchingListsItems([]);
     }
   }, []);
-  (0, _react.useImperativeHandle)(ref, () => ({
+  (0, _react2.useImperativeHandle)(ref, () => ({
     clear: () => setValue('')
   }), []);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     document.addEventListener('keydown', handleKeyPress);
     return () => {
       document.addEventListener('keydown', handleKeyPress);
     };
   }, [handleKeyPress]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (!newContainer) {
       return;
     }
-    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
       initial: false
-    }, isAnimating && matchingListsItems.length !== 0 && (value.trim() !== '' || shouldShowContentOnEmptyInput) && /*#__PURE__*/_react.default.createElement(_SearchBoxBody.default, {
+    }, isAnimating && matchingListsItems.length !== 0 && (value.trim() !== '' || shouldShowContentOnEmptyInput) && /*#__PURE__*/_react2.default.createElement(_SearchBoxBody.default, {
       filterButtons: filterButtons,
       selectedGroups: groups,
       width: width,
@@ -589,11 +589,11 @@ const SearchBox = /*#__PURE__*/(0, _react.forwardRef)(({
       shouldHideFilterButtons: shouldHideFilterButtons
     }, content)), newContainer));
   }, [browser === null || browser === void 0 ? void 0 : browser.name, newContainer, content, filterButtons, groups, height, internalCoordinates, isAnimating, width, shouldHideFilterButtons, matchingListsItems.length, value, shouldShowContentOnEmptyInput]);
-  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_SearchBox.StyledSearchBox, {
+  return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_SearchBox.StyledSearchBox, {
     ref: boxRef
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react2.default.createElement("div", {
     id: "search_box_input"
-  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+  }, /*#__PURE__*/_react2.default.createElement(_Input.default, {
     ref: inputRef,
     onChange: handleChange,
     onBlur: handleBlur,