@activecollab/components 1.0.74 → 1.0.77

package/dist/cjs/components/ComboBox/ComboBox.js

@@ -54,7 +54,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var ComboBox = function ComboBox(_ref) {
-  var _formRef$current;
+  var _comboBoxRef$current;
 
   var _ref$options = _ref.options,
       options = _ref$options === void 0 ? [] : _ref$options,
@@ -67,7 +67,8 @@ var ComboBox = function ComboBox(_ref) {
       handleEmptyAction = _ref.handleEmptyAction,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      size = _ref.size,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "regular" : _ref$size,
       prop = _objectWithoutProperties(_ref, _excluded);
 
   var selectedName = (0, _react.useMemo)(function () {
@@ -124,7 +125,6 @@ var ComboBox = function ComboBox(_ref) {
       e.stopPropagation();
     }
   }, [open, selectedName]);
-  var formRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     open && (childNode === null || childNode === void 0 ? void 0 : childNode.focus());
     !open && (childNode === null || childNode === void 0 ? void 0 : childNode.blur());
@@ -181,25 +181,22 @@ var ComboBox = function ComboBox(_ref) {
       document.removeEventListener("click", clickOutsideCallback);
     };
   }, [clickOutsideCallback]);
-  return /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBox, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBox, {
     className: "c-combo-box",
     $open: open,
     $loading: loading,
-    $size: size,
-    ref: comboBoxRef
-  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxWrapper, {
+    ref: comboBoxRef,
     onClick: onOpen,
-    onFocus: onOpen,
-    ref: formRef,
-    $loading: loading
+    onFocus: onOpen
   }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxInput, {
     ref: handleRef,
     value: loading && loadingText ? loadingText : value,
     onKeyDown: handleOnKeyDown,
     onChange: handleOnChange,
     placeholder: placeholder,
-    disabled: disabled
-  }), !disabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null) : selected ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    disabled: disabled,
+    size: size
+  }), !disabled ? /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxControls, null, loading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null) : selected ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
     onMouseDown: handleMouseDown,
     onClick: handleDeselect,
     variant: "text gray",
@@ -207,7 +204,7 @@ var ComboBox = function ComboBox(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCollapseExpandSingleIcon, {
     $open: open
   })) : null), !disabled ? /*#__PURE__*/_react.default.createElement(_Popper.Popper, {
-    anchorEl: formRef.current,
+    anchorEl: comboBoxRef.current,
     open: open,
     placement: "bottom",
     style: {
@@ -217,7 +214,7 @@ var ComboBox = function ComboBox(_ref) {
     noIsolation: true,
     allowPinchZoom: true
   }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxList, {
-    $width: (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.clientWidth
+    $width: (_comboBoxRef$current = comboBoxRef.current) === null || _comboBoxRef$current === void 0 ? void 0 : _comboBoxRef$current.clientWidth
   }, /*#__PURE__*/_react.default.createElement(_Autocomplete.Autocomplete, _extends({}, prop, {
     inputEl: childNode,
     selected: selected,

package/dist/cjs/components/ComboBox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","formRef","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","comboBoxRef","clickOutsideCallback","event","current","contains","document","addEventListener","removeEventListener","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n  StyledComboBox,\n  StyledComboBoxCloseSmallIcon,\n  StyledComboBoxCollapseExpandSingleIcon,\n  StyledComboBoxInput,\n  StyledComboBoxList,\n  StyledComboBoxWrapper,\n} from \"./Styles\";\n\ninterface IComboBoxProps {\n  /** Set selected items */\n  selected?: string | number;\n  /** Set combobox in to loading state */\n  loading?: boolean;\n  /** Text to display while in loading state */\n  loadingText?: string;\n  /** onChange callback */\n  onChange?: (e: string | number) => void;\n  /** Placeholder for Select input */\n  placeholder?: string;\n  /** disable Input element */\n  disabled?: boolean;\n  /** Button size can be big, medium or small */\n  size?: \"big\" | \"small\";\n}\n\nexport const ComboBox: FC<IComboBoxProps & IAutocompleteProps> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  size,\n  ...prop\n}) => {\n  const selectedName = useMemo(() => {\n    let value = \"\";\n    if (!selected) {\n      return value;\n    }\n    options.map((v) => {\n      if ((v as IOptionGroupProps)?.options) {\n        return (v as IOptionGroupProps).options.find((q) => {\n          if (q.id === selected) {\n            value = q.name;\n            return;\n          }\n        });\n      } else {\n        if (v.id === selected) {\n          value = v.name;\n          return;\n        }\n      }\n    });\n    return value;\n  }, [options, selected]);\n  const [value, setValue] = useState(selectedName);\n  const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n  const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n  const elementRef = useRef<HTMLInputElement | null>(null);\n  const handleRef = useForkRef(setChildNode, elementRef);\n\n  const [open, setOpen] = useState(false);\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Escape\" && open) {\n        setOpen(false);\n        setValue(selectedName);\n        e.stopPropagation();\n      }\n    },\n    [open, selectedName]\n  );\n\n  const formRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    open && childNode?.focus();\n    !open && childNode?.blur();\n  }, [childNode, open]);\n\n  useEffect(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const emptyAction = useCallback(\n    (v) => {\n      handleEmptyAction?.(v);\n      setOpen(false);\n    },\n    [handleEmptyAction]\n  );\n\n  const handleChange = useCallback(\n    (selectedValue) => {\n      if (selectedValue) {\n        onChange?.(selectedValue);\n        setOpen(false);\n      }\n    },\n    [onChange]\n  );\n\n  const onClose = useCallback(() => {\n    setTimeout(() => {\n      setOpen(false);\n    }, 200);\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const onOpen = useCallback(() => {\n    if (!disabled) {\n      setOpen(true);\n    }\n  }, [disabled]);\n\n  const handleRenderOption = useCallback((option, props) => {\n    return (\n      <>\n        <OptionContent\n          imageUrl={option.image}\n          color={option.color}\n          textColor={option.textColor}\n          name={option.name}\n        />\n        <RadioButton {...props} />\n      </>\n    );\n  }, []);\n\n  const handleDeselect = useCallback(\n    (e) => {\n      e.stopPropagation();\n      onChange?.(\"\");\n      setOpen(false);\n    },\n    [onChange]\n  );\n\n  const handleMouseDown = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n  const clickOutsideCallback = useCallback(\n    (event) => {\n      if (comboBoxRef.current && !comboBoxRef.current.contains(event.target)) {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  useEffect(() => {\n    document.addEventListener(`click`, clickOutsideCallback);\n    return () => {\n      document.removeEventListener(`click`, clickOutsideCallback);\n    };\n  }, [clickOutsideCallback]);\n\n  return (\n    <StyledComboBox\n      className=\"c-combo-box\"\n      $open={open}\n      $loading={loading}\n      $size={size}\n      ref={comboBoxRef}\n    >\n      <StyledComboBoxWrapper\n        onClick={onOpen}\n        onFocus={onOpen}\n        ref={formRef}\n        $loading={loading}\n      >\n        <StyledComboBoxInput\n          ref={handleRef}\n          value={loading && loadingText ? loadingText : value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          placeholder={placeholder}\n          disabled={disabled}\n        />\n        {!disabled ? (\n          <>\n            {loading ? (\n              <SpinnerLoader />\n            ) : selected ? (\n              <Button\n                onMouseDown={handleMouseDown}\n                onClick={handleDeselect}\n                variant=\"text gray\"\n                size=\"small\"\n              >\n                <StyledComboBoxCloseSmallIcon />\n              </Button>\n            ) : null}\n            <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n          </>\n        ) : null}\n      </StyledComboBoxWrapper>\n      {!disabled ? (\n        <Popper\n          anchorEl={formRef.current}\n          open={open}\n          placement=\"bottom\"\n          style={{ zIndex: 10 }}\n        >\n          <RemoveScroll noIsolation allowPinchZoom>\n            <StyledComboBoxList $width={formRef.current?.clientWidth}>\n              <Autocomplete\n                {...prop}\n                inputEl={childNode}\n                selected={selected}\n                handleChange={handleChange}\n                renderOption={handleRenderOption}\n                options={options}\n                type=\"single\"\n                handleEmptyAction={emptyAction}\n              />\n            </StyledComboBoxList>\n          </RemoveScroll>\n        </Popper>\n      ) : null}\n    </StyledComboBox>\n  );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
+{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","comboBoxRef","clickOutsideCallback","event","current","contains","document","addEventListener","removeEventListener","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n  StyledComboBox,\n  StyledComboBoxCloseSmallIcon,\n  StyledComboBoxCollapseExpandSingleIcon,\n  StyledComboBoxInput,\n  StyledComboBoxList,\n  StyledComboBoxControls,\n} from \"./Styles\";\nimport { InputSize } from \"../Input\";\n\nexport interface IComboBoxProps {\n  /** Set selected items */\n  selected?: string | number;\n  /** Set combobox in to loading state */\n  loading?: boolean;\n  /** Text to display while in loading state */\n  loadingText?: string;\n  /** onChange callback */\n  onChange?: (e: string | number) => void;\n  /** Placeholder for Select input */\n  placeholder?: string;\n  /** disable Input element */\n  disabled?: boolean;\n  /** Combobox size */\n  size?: InputSize;\n}\n\nexport const ComboBox: FC<IComboBoxProps & IAutocompleteProps> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  size = \"regular\",\n  ...prop\n}) => {\n  const selectedName = useMemo(() => {\n    let value = \"\";\n    if (!selected) {\n      return value;\n    }\n    options.map((v) => {\n      if ((v as IOptionGroupProps)?.options) {\n        return (v as IOptionGroupProps).options.find((q) => {\n          if (q.id === selected) {\n            value = q.name;\n            return;\n          }\n        });\n      } else {\n        if (v.id === selected) {\n          value = v.name;\n          return;\n        }\n      }\n    });\n    return value;\n  }, [options, selected]);\n  const [value, setValue] = useState(selectedName);\n  const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n  const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n  const elementRef = useRef<HTMLInputElement | null>(null);\n  const handleRef = useForkRef(setChildNode, elementRef);\n\n  const [open, setOpen] = useState(false);\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Escape\" && open) {\n        setOpen(false);\n        setValue(selectedName);\n        e.stopPropagation();\n      }\n    },\n    [open, selectedName]\n  );\n\n  useEffect(() => {\n    open && childNode?.focus();\n    !open && childNode?.blur();\n  }, [childNode, open]);\n\n  useEffect(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const emptyAction = useCallback(\n    (v) => {\n      handleEmptyAction?.(v);\n      setOpen(false);\n    },\n    [handleEmptyAction]\n  );\n\n  const handleChange = useCallback(\n    (selectedValue) => {\n      if (selectedValue) {\n        onChange?.(selectedValue);\n        setOpen(false);\n      }\n    },\n    [onChange]\n  );\n\n  const onClose = useCallback(() => {\n    setTimeout(() => {\n      setOpen(false);\n    }, 200);\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const onOpen = useCallback(() => {\n    if (!disabled) {\n      setOpen(true);\n    }\n  }, [disabled]);\n\n  const handleRenderOption = useCallback((option, props) => {\n    return (\n      <>\n        <OptionContent\n          imageUrl={option.image}\n          color={option.color}\n          textColor={option.textColor}\n          name={option.name}\n        />\n        <RadioButton {...props} />\n      </>\n    );\n  }, []);\n\n  const handleDeselect = useCallback(\n    (e) => {\n      e.stopPropagation();\n      onChange?.(\"\");\n      setOpen(false);\n    },\n    [onChange]\n  );\n\n  const handleMouseDown = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n  const clickOutsideCallback = useCallback(\n    (event) => {\n      if (comboBoxRef.current && !comboBoxRef.current.contains(event.target)) {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  useEffect(() => {\n    document.addEventListener(`click`, clickOutsideCallback);\n    return () => {\n      document.removeEventListener(`click`, clickOutsideCallback);\n    };\n  }, [clickOutsideCallback]);\n\n  return (\n    <>\n      <StyledComboBox\n        className=\"c-combo-box\"\n        $open={open}\n        $loading={loading}\n        ref={comboBoxRef}\n        onClick={onOpen}\n        onFocus={onOpen}\n      >\n        <StyledComboBoxInput\n          ref={handleRef}\n          value={loading && loadingText ? loadingText : value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          placeholder={placeholder}\n          disabled={disabled}\n          size={size}\n        />\n        {!disabled ? (\n          <StyledComboBoxControls>\n            {loading ? (\n              <SpinnerLoader />\n            ) : selected ? (\n              <Button\n                onMouseDown={handleMouseDown}\n                onClick={handleDeselect}\n                variant=\"text gray\"\n                size=\"small\"\n              >\n                <StyledComboBoxCloseSmallIcon />\n              </Button>\n            ) : null}\n            <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n          </StyledComboBoxControls>\n        ) : null}\n      </StyledComboBox>\n      {!disabled ? (\n        <Popper\n          anchorEl={comboBoxRef.current}\n          open={open}\n          placement=\"bottom\"\n          style={{ zIndex: 10 }}\n        >\n          <RemoveScroll noIsolation allowPinchZoom>\n            <StyledComboBoxList $width={comboBoxRef.current?.clientWidth}>\n              <Autocomplete\n                {...prop}\n                inputEl={childNode}\n                selected={selected}\n                handleChange={handleChange}\n                renderOption={handleRenderOption}\n                options={options}\n                type=\"single\"\n                handleEmptyAction={emptyAction}\n              />\n            </StyledComboBoxList>\n          </RemoveScroll>\n        </Popper>\n      ) : null}\n    </>\n  );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}

package/dist/cjs/components/ComboBox/Styles.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledComboBoxWrapper = exports.StyledComboBoxList = exports.StyledComboBoxInput = exports.StyledComboBoxCollapseExpandSingleIcon = exports.StyledComboBoxCloseSmallIcon = exports.StyledComboBox = void 0;
+exports.StyledComboBoxList = exports.StyledComboBoxInput = exports.StyledComboBoxControls = exports.StyledComboBoxCollapseExpandSingleIcon = exports.StyledComboBoxCloseSmallIcon = exports.StyledComboBox = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -24,33 +24,25 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledComboBox = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledComboBox",
   componentId: "sc-5qvkpb-0"
-})(["height:34px;border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);font-size:14px;background-color:var(--input-background-color);cursor:text;", " ", " ", " ", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
-  return props.$open && (0, _styledComponents.css)(["border-color:var(--color-primary);"]);
-}, function (props) {
+})(["position:relative;cursor:text;", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
   return props.$loading && (0, _styledComponents.css)(["cursor:progress;"]);
-}, function (props) {
-  return props.$size == "small" && (0, _styledComponents.css)(["height:26px;"]);
-}, function (props) {
-  return props.$size == "big" && (0, _styledComponents.css)(["height:42px;"]);
 });
 
 exports.StyledComboBox = StyledComboBox;
 StyledComboBox.displayName = "StyledComboBox";
 
-var StyledComboBoxWrapper = _styledComponents.default.div.withConfig({
-  displayName: "Styles__StyledComboBoxWrapper",
+var StyledComboBoxControls = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledComboBoxControls",
   componentId: "sc-5qvkpb-1"
-})(["width:100%;height:100%;display:flex;align-items:center;", ""], function (props) {
-  return props.$loading && (0, _styledComponents.css)(["pointer-events:none;"]);
-});
+})(["position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;"]);
 
-exports.StyledComboBoxWrapper = StyledComboBoxWrapper;
-StyledComboBoxWrapper.displayName = "StyledComboBoxWrapper";
+exports.StyledComboBoxControls = StyledComboBoxControls;
+StyledComboBoxControls.displayName = "StyledComboBoxControls";
 var StyledIconDefaults = (0, _styledComponents.css)(["flex-shrink:0;cursor:pointer;"]);
 var StyledComboBoxCloseSmallIcon = (0, _styledComponents.default)(_collection.CloseSmallIcon).withConfig({
   displayName: "Styles__StyledComboBoxCloseSmallIcon",
   componentId: "sc-5qvkpb-2"
-})(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxWrapper);
+})(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBox);
 exports.StyledComboBoxCloseSmallIcon = StyledComboBoxCloseSmallIcon;
 StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
 var StyledComboBoxCollapseExpandSingleIcon = (0, _styledComponents.default)(_collection.CollapseExpandSingleIcon).withConfig({
@@ -64,7 +56,9 @@ StyledComboBoxCollapseExpandSingleIcon.displayName = "StyledComboBoxCollapseExpa
 var StyledComboBoxInput = (0, _styledComponents.default)(_Input.Input).withConfig({
   displayName: "Styles__StyledComboBoxInput",
   componentId: "sc-5qvkpb-4"
-})(["overflow:hidden;text-overflow:ellipsis;background-color:transparent;border:none;width:100%;"]);
+})(["overflow:hidden;text-overflow:ellipsis;width:100%;padding-right:80px;", ":hover &{", "}"], StyledComboBox, {
+  "borderColor": "var(--color-primary)"
+});
 exports.StyledComboBoxInput = StyledComboBoxInput;
 StyledComboBoxInput.displayName = "StyledComboBoxInput";
 

package/dist/cjs/components/ComboBox/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["StyledComboBox","styled","div","FontStyle","BoxSizingStyle","props","$open","css","$loading","$size","displayName","StyledComboBoxWrapper","StyledIconDefaults","StyledComboBoxCloseSmallIcon","CloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","CollapseExpandSingleIcon","StyledComboBoxInput","Input","StyledComboBoxList","$width"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAQO,IAAMA,cAAc,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,mNAQvBC,oBARuB,EASvBC,8BATuB,EAWvB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAC,qBADA,yCADA;AAAA,CAXuB,EAiBvB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,QACAD,qBADA,uBADA;AAAA,CAjBuB,EAuBvB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACI,KAAN,IAAe,OAAf,QACAF,qBADA,mBADA;AAAA,CAvBuB,EA6BvB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACI,KAAN,IAAe,KAAf,QACAF,qBADA,mBADA;AAAA,CA7BuB,CAApB;;;AAoCPP,cAAc,CAACU,WAAf,GAA6B,gBAA7B;;AAEO,IAAMC,qBAAqB,GAAGV,0BAAOC,GAAV;AAAA;AAAA;AAAA,oEAM9B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,QACAD,qBADA,2BADA;AAAA,CAN8B,CAA3B;;;AAaPI,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;AAEA,IAAME,kBAAkB,OAAGL,qBAAH,oCAAxB;AAKO,IAAMM,4BAA4B,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,2IACrCF,kBADqC,EAOrCD,qBAPqC,CAAlC;;AAaPE,4BAA4B,CAACH,WAA7B,GAA2C,8BAA3C;AAEO,IAAMK,sCAAsC,GAAG,+BACpDC,oCADoD,CAAH;AAAA;AAAA;AAAA,yFAG/CJ,kBAH+C,EAQ/C,UAACP,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,QACAC,qBADA,8BADA;AAAA,CAR+C,CAA5C;;AAePQ,sCAAsC,CAACL,WAAvC,GACE,wCADF;AAGO,IAAMO,mBAAmB,GAAG,+BAAOC,YAAP,CAAH;AAAA;AAAA;AAAA,mGAAzB;;AAQPD,mBAAmB,CAACP,WAApB,GAAkC,qBAAlC;;AAEO,IAAMS,kBAAkB,GAAGlB,0BAAOC,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACG,KAAD;AAAA,mBAAcA,KAAK,CAACe,MAApB;AAAA,CAPoB,CAAxB;;;AAUPD,kBAAkB,CAACT,WAAnB,GAAiC,oBAAjC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input/Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledComboBoxProps {\n  $open?: boolean;\n  $loading?: boolean;\n  $size?: string;\n}\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n  height: 34px;\n  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  color: var(--color-theme-900);\n  font-size: 14px;\n  background-color: var(--input-background-color);\n  cursor: text;\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$open &&\n    css`\n      border-color: var(--color-primary);\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.$size == \"small\" &&\n    css`\n      height: 26px;\n    `}\n\n  ${(props) =>\n    props.$size == \"big\" &&\n    css`\n      height: 42px;\n    `}\n`;\n\nStyledComboBox.displayName = \"StyledComboBox\";\n\nexport const StyledComboBoxWrapper = styled.div<{ $loading?: boolean }>`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      pointer-events: none;\n    `}\n`;\n\nStyledComboBoxWrapper.displayName = \"StyledComboBoxWrapper\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults}\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBoxWrapper}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults}\n  margin: 0 4px 0 0;\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxInput = styled(Input)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background-color: transparent;\n  border: none;\n  width: 100%;\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["StyledComboBox","styled","div","FontStyle","BoxSizingStyle","props","$loading","css","displayName","StyledComboBoxControls","StyledIconDefaults","StyledComboBoxCloseSmallIcon","CloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","CollapseExpandSingleIcon","$open","StyledComboBoxInput","Input","StyledComboBoxList","$width"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AASO,IAAMA,cAAc,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,qDAGvBC,oBAHuB,EAIvBC,8BAJuB,EAMvB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,uBADA;AAAA,CANuB,CAApB;;;AAaPP,cAAc,CAACQ,WAAf,GAA6B,gBAA7B;;AAEO,IAAMC,sBAAsB,GAAGR,0BAAOC,GAAV;AAAA;AAAA;AAAA,2GAA5B;;;AAUPO,sBAAsB,CAACD,WAAvB,GAAqC,wBAArC;AAEA,IAAME,kBAAkB,OAAGH,qBAAH,oCAAxB;AAKO,IAAMI,4BAA4B,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,2IACrCF,kBADqC,EAOrCV,cAPqC,CAAlC;;AAaPW,4BAA4B,CAACH,WAA7B,GAA2C,8BAA3C;AAEO,IAAMK,sCAAsC,GAAG,+BACpDC,oCADoD,CAAH;AAAA;AAAA;AAAA,yFAG/CJ,kBAH+C,EAQ/C,UAACL,KAAD;AAAA,SACAA,KAAK,CAACU,KAAN,QACAR,qBADA,8BADA;AAAA,CAR+C,CAA5C;;AAePM,sCAAsC,CAACL,WAAvC,GACE,wCADF;AAGO,IAAMQ,mBAAmB,GAAG,+BAAOC,YAAP,CAAH;AAAA;AAAA;AAAA,gGAM5BjB,cAN4B,EAOxB;AAAA;AAAA,CAPwB,CAAzB;;AAWPgB,mBAAmB,CAACR,WAApB,GAAkC,qBAAlC;;AAEO,IAAMU,kBAAkB,GAAGjB,0BAAOC,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACG,KAAD;AAAA,mBAAcA,KAAK,CAACc,MAApB;AAAA,CAPoB,CAAxB;;;AAUPD,kBAAkB,CAACV,WAAnB,GAAiC,oBAAjC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input/Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport tw from \"twin.macro\";\n\ninterface StyledComboBoxProps {\n  $open?: boolean;\n  $loading?: boolean;\n  $size?: string;\n}\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n  position: relative;\n  cursor: text;\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n`;\n\nStyledComboBox.displayName = \"StyledComboBox\";\n\nexport const StyledComboBoxControls = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nStyledComboBoxControls.displayName = \"StyledComboBoxControls\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults}\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBox}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults}\n  margin: 0 4px 0 0;\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxInput = styled(Input)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  padding-right: 80px;\n\n  ${StyledComboBox}:hover & {\n    ${tw`tw-border-primary`}\n  }\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n"],"file":"Styles.js"}

package/dist/cjs/components/Input/Styles.js

@@ -20,8 +20,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledInput = _styledComponents.default.input.withConfig({
   displayName: "Styles__StyledInput",
   componentId: "sc-ce8kcp-0"
-})(["", " border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{color:var(--color-theme-600);}"], {
+})(["", " ", " ", " ", " ", " border:1px solid var(--border-primary);border-radius:10px;padding:4px 10px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}"], {
   "fontSize": "0.875rem"
+}, {
+  "color": "var(--color-theme-900)"
+}, {
+  "lineHeight": "1.375"
+}, {
+  "letterSpacing": "0.02em"
+}, {
+  "fontWeight": "400"
 }, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
   return props.$size === "small" && (0, _styledComponents.css)(["border-radius:6px;height:24px;"]);
 }, function (props) {
@@ -40,6 +48,8 @@ var StyledInput = _styledComponents.default.input.withConfig({
   }, {
     "borderColor": "var(--color-primary)"
   });
+}, {
+  "color": "var(--color-theme-transparent-500)"
 });
 
 exports.StyledInput = StyledInput;

package/dist/cjs/components/Input/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["StyledInput","styled","input","FontStyle","BoxSizingStyle","props","$size","css","disabled","displayName"],"mappings":";;;;;;;;;AAAA;;AAGA;;AACA;;;;;;AAEO,IAAMA,WAAW,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,iTAGlB;AAAA;AAAA,CAHkB,EAcpBC,oBAdoB,EAepBC,8BAfoB,EAiBpB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,QACAC,qBADA,qCADA;AAAA,CAjBoB,EAwBpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,QACAC,qBADA,yBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAxBoB,EA+BpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,OACID,qBADJ,YAEU;AAAA;AAAA;AAAA;AAAA,GAFV,QAIIA,qBAJJ,gDAMY;AAAA;AAAA,GANZ,EAUY;AAAA;AAAA,GAVZ,EAcY;AAAA;AAAA,GAdZ,CADA;AAAA,CA/BoB,CAAjB;;;AAuDPP,WAAW,CAACS,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { InputSize } from \"./Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledInput = styled.input<{\n  $size?: InputSize;\n}>`\n  ${tw`tw-text-body-2`}\n  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  color: var(--color-theme-900);\n  padding: 4px 10px 6px 8px;\n  height: 32px;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\n  outline: none;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      ${tw`tw-text-body-1`}\n      height: 40px;\n    `}\n\n  ${(props) =>\n    props.disabled\n      ? css`\n          ${tw`tw-cursor-not-allowed tw-opacity-50 tw-border-theme-400`}\n        `\n      : css`\n          &:hover {\n            ${tw`tw-border-primary`}\n          }\n\n          &:active {\n            ${tw`tw-border-primary`}\n          }\n\n          &:focus {\n            ${tw`tw-border-primary`}\n          }\n        `}\n\n  &::placeholder {\n    color: var(--color-theme-600);\n  }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["StyledInput","styled","input","FontStyle","BoxSizingStyle","props","$size","css","disabled","displayName"],"mappings":";;;;;;;;;AAAA;;AAGA;;AACA;;;;;;AAEO,IAAMA,WAAW,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,+QAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,EAOlB;AAAA;AAAA,CAPkB,EAiBpBC,oBAjBoB,EAkBpBC,8BAlBoB,EAoBpB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,QACAC,qBADA,qCADA;AAAA,CApBoB,EA2BpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,QACAC,qBADA,yBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CA3BoB,EAkCpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,OACID,qBADJ,YAEU;AAAA;AAAA;AAAA;AAAA,GAFV,QAIIA,qBAJJ,gDAMY;AAAA;AAAA,GANZ,EAUY;AAAA;AAAA,GAVZ,EAcY;AAAA;AAAA,GAdZ,CADA;AAAA,CAlCoB,EAsDhB;AAAA;AAAA,CAtDgB,CAAjB;;;AA0DPP,WAAW,CAACS,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { InputSize } from \"./Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledInput = styled.input<{\n  $size?: InputSize;\n}>`\n  ${tw`tw-text-body-2`}\n  ${tw`tw-text-theme-900`}\n  ${tw`tw-leading-regular`}\n  ${tw`tw-tracking-regular`}\n  ${tw`tw-font-regular`}\n  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  padding: 4px 10px 6px 8px;\n  height: 32px;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\n  outline: none;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      ${tw`tw-text-body-1`}\n      height: 40px;\n    `}\n\n  ${(props) =>\n    props.disabled\n      ? css`\n          ${tw`tw-cursor-not-allowed tw-opacity-50 tw-border-theme-400`}\n        `\n      : css`\n          &:hover {\n            ${tw`tw-border-primary`}\n          }\n\n          &:active {\n            ${tw`tw-border-primary`}\n          }\n\n          &:focus {\n            ${tw`tw-border-primary`}\n          }\n        `}\n\n  &::placeholder {\n    ${tw`tw-text-theme-transparent-500`}\n  }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}

package/dist/esm/components/ComboBox/ComboBox.d.ts

@@ -1,14 +1,14 @@
 import { FC } from "react";
 import { IAutocompleteProps } from "../Autocomplete/Autocomplete";
-interface IComboBoxProps {
+import { InputSize } from "../Input";
+export interface IComboBoxProps {
     selected?: string | number;
     loading?: boolean;
     loadingText?: string;
     onChange?: (e: string | number) => void;
     placeholder?: string;
     disabled?: boolean;
-    size?: "big" | "small";
+    size?: InputSize;
 }
 export declare const ComboBox: FC<IComboBoxProps & IAutocompleteProps>;
-export {};
 //# sourceMappingURL=ComboBox.d.ts.map

package/dist/esm/components/ComboBox/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,EAAE,EAMH,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAgBlE,UAAU,cAAc;IAEtB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAExC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,cAAc,GAAG,kBAAkB,CA6M5D,CAAC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,EAAE,EAMH,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAelE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,MAAM,WAAW,cAAc;IAE7B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAExC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,cAAc,GAAG,kBAAkB,CAwM5D,CAAC"}

package/dist/esm/components/ComboBox/ComboBox.js

@@ -10,9 +10,9 @@ import { Popper } from "../Popper";
 import { RemoveScroll } from "react-remove-scroll";
 import { SpinnerLoader } from "../Loaders/Spinner/SpinnerLoader";
 import { OptionContent } from "../Select/OptionContent/OptionContent";
-import { StyledComboBox, StyledComboBoxCloseSmallIcon, StyledComboBoxCollapseExpandSingleIcon, StyledComboBoxInput, StyledComboBoxList, StyledComboBoxWrapper } from "./Styles";
+import { StyledComboBox, StyledComboBoxCloseSmallIcon, StyledComboBoxCollapseExpandSingleIcon, StyledComboBoxInput, StyledComboBoxList, StyledComboBoxControls } from "./Styles";
 export var ComboBox = function ComboBox(_ref) {
-  var _formRef$current;
+  var _comboBoxRef$current;
 
   var _ref$options = _ref.options,
       options = _ref$options === void 0 ? [] : _ref$options,
@@ -25,7 +25,8 @@ export var ComboBox = function ComboBox(_ref) {
       handleEmptyAction = _ref.handleEmptyAction,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      size = _ref.size,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? "regular" : _ref$size,
       prop = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var selectedName = useMemo(function () {
@@ -79,7 +80,6 @@ export var ComboBox = function ComboBox(_ref) {
       e.stopPropagation();
     }
   }, [open, selectedName]);
-  var formRef = useRef(null);
   useEffect(function () {
     open && (childNode == null ? void 0 : childNode.focus());
     !open && (childNode == null ? void 0 : childNode.blur());
@@ -136,25 +136,22 @@ export var ComboBox = function ComboBox(_ref) {
       document.removeEventListener("click", clickOutsideCallback);
     };
   }, [clickOutsideCallback]);
-  return /*#__PURE__*/React.createElement(StyledComboBox, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledComboBox, {
     className: "c-combo-box",
     $open: open,
     $loading: loading,
-    $size: size,
-    ref: comboBoxRef
-  }, /*#__PURE__*/React.createElement(StyledComboBoxWrapper, {
+    ref: comboBoxRef,
     onClick: onOpen,
-    onFocus: onOpen,
-    ref: formRef,
-    $loading: loading
+    onFocus: onOpen
   }, /*#__PURE__*/React.createElement(StyledComboBoxInput, {
     ref: handleRef,
     value: loading && loadingText ? loadingText : value,
     onKeyDown: handleOnKeyDown,
     onChange: handleOnChange,
     placeholder: placeholder,
-    disabled: disabled
-  }), !disabled ? /*#__PURE__*/React.createElement(React.Fragment, null, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React.createElement(Button, {
+    disabled: disabled,
+    size: size
+  }), !disabled ? /*#__PURE__*/React.createElement(StyledComboBoxControls, null, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React.createElement(Button, {
     onMouseDown: handleMouseDown,
     onClick: handleDeselect,
     variant: "text gray",
@@ -162,7 +159,7 @@ export var ComboBox = function ComboBox(_ref) {
   }, /*#__PURE__*/React.createElement(StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/React.createElement(StyledComboBoxCollapseExpandSingleIcon, {
     $open: open
   })) : null), !disabled ? /*#__PURE__*/React.createElement(Popper, {
-    anchorEl: formRef.current,
+    anchorEl: comboBoxRef.current,
     open: open,
     placement: "bottom",
     style: {
@@ -172,7 +169,7 @@ export var ComboBox = function ComboBox(_ref) {
     noIsolation: true,
     allowPinchZoom: true
   }, /*#__PURE__*/React.createElement(StyledComboBoxList, {
-    $width: (_formRef$current = formRef.current) == null ? void 0 : _formRef$current.clientWidth
+    $width: (_comboBoxRef$current = comboBoxRef.current) == null ? void 0 : _comboBoxRef$current.clientWidth
   }, /*#__PURE__*/React.createElement(Autocomplete, _extends({}, prop, {
     inputEl: childNode,
     selected: selected,

package/dist/esm/components/ComboBox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["React","useCallback","useState","useEffect","useRef","useMemo","RadioButton","Autocomplete","Button","useForkRef","Popper","RemoveScroll","SpinnerLoader","OptionContent","StyledComboBox","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","StyledComboBoxInput","StyledComboBoxList","StyledComboBoxWrapper","ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","formRef","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","comboBoxRef","clickOutsideCallback","event","current","contains","document","addEventListener","removeEventListener","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n  StyledComboBox,\n  StyledComboBoxCloseSmallIcon,\n  StyledComboBoxCollapseExpandSingleIcon,\n  StyledComboBoxInput,\n  StyledComboBoxList,\n  StyledComboBoxWrapper,\n} from \"./Styles\";\n\ninterface IComboBoxProps {\n  /** Set selected items */\n  selected?: string | number;\n  /** Set combobox in to loading state */\n  loading?: boolean;\n  /** Text to display while in loading state */\n  loadingText?: string;\n  /** onChange callback */\n  onChange?: (e: string | number) => void;\n  /** Placeholder for Select input */\n  placeholder?: string;\n  /** disable Input element */\n  disabled?: boolean;\n  /** Button size can be big, medium or small */\n  size?: \"big\" | \"small\";\n}\n\nexport const ComboBox: FC<IComboBoxProps & IAutocompleteProps> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  size,\n  ...prop\n}) => {\n  const selectedName = useMemo(() => {\n    let value = \"\";\n    if (!selected) {\n      return value;\n    }\n    options.map((v) => {\n      if ((v as IOptionGroupProps)?.options) {\n        return (v as IOptionGroupProps).options.find((q) => {\n          if (q.id === selected) {\n            value = q.name;\n            return;\n          }\n        });\n      } else {\n        if (v.id === selected) {\n          value = v.name;\n          return;\n        }\n      }\n    });\n    return value;\n  }, [options, selected]);\n  const [value, setValue] = useState(selectedName);\n  const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n  const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n  const elementRef = useRef<HTMLInputElement | null>(null);\n  const handleRef = useForkRef(setChildNode, elementRef);\n\n  const [open, setOpen] = useState(false);\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Escape\" && open) {\n        setOpen(false);\n        setValue(selectedName);\n        e.stopPropagation();\n      }\n    },\n    [open, selectedName]\n  );\n\n  const formRef = useRef<HTMLDivElement | null>(null);\n\n  useEffect(() => {\n    open && childNode?.focus();\n    !open && childNode?.blur();\n  }, [childNode, open]);\n\n  useEffect(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const emptyAction = useCallback(\n    (v) => {\n      handleEmptyAction?.(v);\n      setOpen(false);\n    },\n    [handleEmptyAction]\n  );\n\n  const handleChange = useCallback(\n    (selectedValue) => {\n      if (selectedValue) {\n        onChange?.(selectedValue);\n        setOpen(false);\n      }\n    },\n    [onChange]\n  );\n\n  const onClose = useCallback(() => {\n    setTimeout(() => {\n      setOpen(false);\n    }, 200);\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const onOpen = useCallback(() => {\n    if (!disabled) {\n      setOpen(true);\n    }\n  }, [disabled]);\n\n  const handleRenderOption = useCallback((option, props) => {\n    return (\n      <>\n        <OptionContent\n          imageUrl={option.image}\n          color={option.color}\n          textColor={option.textColor}\n          name={option.name}\n        />\n        <RadioButton {...props} />\n      </>\n    );\n  }, []);\n\n  const handleDeselect = useCallback(\n    (e) => {\n      e.stopPropagation();\n      onChange?.(\"\");\n      setOpen(false);\n    },\n    [onChange]\n  );\n\n  const handleMouseDown = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n  const clickOutsideCallback = useCallback(\n    (event) => {\n      if (comboBoxRef.current && !comboBoxRef.current.contains(event.target)) {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  useEffect(() => {\n    document.addEventListener(`click`, clickOutsideCallback);\n    return () => {\n      document.removeEventListener(`click`, clickOutsideCallback);\n    };\n  }, [clickOutsideCallback]);\n\n  return (\n    <StyledComboBox\n      className=\"c-combo-box\"\n      $open={open}\n      $loading={loading}\n      $size={size}\n      ref={comboBoxRef}\n    >\n      <StyledComboBoxWrapper\n        onClick={onOpen}\n        onFocus={onOpen}\n        ref={formRef}\n        $loading={loading}\n      >\n        <StyledComboBoxInput\n          ref={handleRef}\n          value={loading && loadingText ? loadingText : value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          placeholder={placeholder}\n          disabled={disabled}\n        />\n        {!disabled ? (\n          <>\n            {loading ? (\n              <SpinnerLoader />\n            ) : selected ? (\n              <Button\n                onMouseDown={handleMouseDown}\n                onClick={handleDeselect}\n                variant=\"text gray\"\n                size=\"small\"\n              >\n                <StyledComboBoxCloseSmallIcon />\n              </Button>\n            ) : null}\n            <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n          </>\n        ) : null}\n      </StyledComboBoxWrapper>\n      {!disabled ? (\n        <Popper\n          anchorEl={formRef.current}\n          open={open}\n          placement=\"bottom\"\n          style={{ zIndex: 10 }}\n        >\n          <RemoveScroll noIsolation allowPinchZoom>\n            <StyledComboBoxList $width={formRef.current?.clientWidth}>\n              <Autocomplete\n                {...prop}\n                inputEl={childNode}\n                selected={selected}\n                handleChange={handleChange}\n                renderOption={handleRenderOption}\n                options={options}\n                type=\"single\"\n                handleEmptyAction={emptyAction}\n              />\n            </StyledComboBoxList>\n          </RemoveScroll>\n        </Popper>\n      ) : null}\n    </StyledComboBox>\n  );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
+{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["React","useCallback","useState","useEffect","useRef","useMemo","RadioButton","Autocomplete","Button","useForkRef","Popper","RemoveScroll","SpinnerLoader","OptionContent","StyledComboBox","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","StyledComboBoxInput","StyledComboBoxList","StyledComboBoxControls","ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","open","setOpen","handleOnKeyDown","key","stopPropagation","focus","blur","emptyAction","handleChange","selectedValue","onClose","setTimeout","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","comboBoxRef","clickOutsideCallback","event","current","contains","document","addEventListener","removeEventListener","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport { IAutocompleteProps } from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n  StyledComboBox,\n  StyledComboBoxCloseSmallIcon,\n  StyledComboBoxCollapseExpandSingleIcon,\n  StyledComboBoxInput,\n  StyledComboBoxList,\n  StyledComboBoxControls,\n} from \"./Styles\";\nimport { InputSize } from \"../Input\";\n\nexport interface IComboBoxProps {\n  /** Set selected items */\n  selected?: string | number;\n  /** Set combobox in to loading state */\n  loading?: boolean;\n  /** Text to display while in loading state */\n  loadingText?: string;\n  /** onChange callback */\n  onChange?: (e: string | number) => void;\n  /** Placeholder for Select input */\n  placeholder?: string;\n  /** disable Input element */\n  disabled?: boolean;\n  /** Combobox size */\n  size?: InputSize;\n}\n\nexport const ComboBox: FC<IComboBoxProps & IAutocompleteProps> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  size = \"regular\",\n  ...prop\n}) => {\n  const selectedName = useMemo(() => {\n    let value = \"\";\n    if (!selected) {\n      return value;\n    }\n    options.map((v) => {\n      if ((v as IOptionGroupProps)?.options) {\n        return (v as IOptionGroupProps).options.find((q) => {\n          if (q.id === selected) {\n            value = q.name;\n            return;\n          }\n        });\n      } else {\n        if (v.id === selected) {\n          value = v.name;\n          return;\n        }\n      }\n    });\n    return value;\n  }, [options, selected]);\n  const [value, setValue] = useState(selectedName);\n  const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n  const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n  const elementRef = useRef<HTMLInputElement | null>(null);\n  const handleRef = useForkRef(setChildNode, elementRef);\n\n  const [open, setOpen] = useState(false);\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Escape\" && open) {\n        setOpen(false);\n        setValue(selectedName);\n        e.stopPropagation();\n      }\n    },\n    [open, selectedName]\n  );\n\n  useEffect(() => {\n    open && childNode?.focus();\n    !open && childNode?.blur();\n  }, [childNode, open]);\n\n  useEffect(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const emptyAction = useCallback(\n    (v) => {\n      handleEmptyAction?.(v);\n      setOpen(false);\n    },\n    [handleEmptyAction]\n  );\n\n  const handleChange = useCallback(\n    (selectedValue) => {\n      if (selectedValue) {\n        onChange?.(selectedValue);\n        setOpen(false);\n      }\n    },\n    [onChange]\n  );\n\n  const onClose = useCallback(() => {\n    setTimeout(() => {\n      setOpen(false);\n    }, 200);\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const onOpen = useCallback(() => {\n    if (!disabled) {\n      setOpen(true);\n    }\n  }, [disabled]);\n\n  const handleRenderOption = useCallback((option, props) => {\n    return (\n      <>\n        <OptionContent\n          imageUrl={option.image}\n          color={option.color}\n          textColor={option.textColor}\n          name={option.name}\n        />\n        <RadioButton {...props} />\n      </>\n    );\n  }, []);\n\n  const handleDeselect = useCallback(\n    (e) => {\n      e.stopPropagation();\n      onChange?.(\"\");\n      setOpen(false);\n    },\n    [onChange]\n  );\n\n  const handleMouseDown = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n  const clickOutsideCallback = useCallback(\n    (event) => {\n      if (comboBoxRef.current && !comboBoxRef.current.contains(event.target)) {\n        onClose();\n      }\n    },\n    [onClose]\n  );\n\n  useEffect(() => {\n    document.addEventListener(`click`, clickOutsideCallback);\n    return () => {\n      document.removeEventListener(`click`, clickOutsideCallback);\n    };\n  }, [clickOutsideCallback]);\n\n  return (\n    <>\n      <StyledComboBox\n        className=\"c-combo-box\"\n        $open={open}\n        $loading={loading}\n        ref={comboBoxRef}\n        onClick={onOpen}\n        onFocus={onOpen}\n      >\n        <StyledComboBoxInput\n          ref={handleRef}\n          value={loading && loadingText ? loadingText : value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          placeholder={placeholder}\n          disabled={disabled}\n          size={size}\n        />\n        {!disabled ? (\n          <StyledComboBoxControls>\n            {loading ? (\n              <SpinnerLoader />\n            ) : selected ? (\n              <Button\n                onMouseDown={handleMouseDown}\n                onClick={handleDeselect}\n                variant=\"text gray\"\n                size=\"small\"\n              >\n                <StyledComboBoxCloseSmallIcon />\n              </Button>\n            ) : null}\n            <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n          </StyledComboBoxControls>\n        ) : null}\n      </StyledComboBox>\n      {!disabled ? (\n        <Popper\n          anchorEl={comboBoxRef.current}\n          open={open}\n          placement=\"bottom\"\n          style={{ zIndex: 10 }}\n        >\n          <RemoveScroll noIsolation allowPinchZoom>\n            <StyledComboBoxList $width={comboBoxRef.current?.clientWidth}>\n              <Autocomplete\n                {...prop}\n                inputEl={childNode}\n                selected={selected}\n                handleChange={handleChange}\n                renderOption={handleRenderOption}\n                options={options}\n                type=\"single\"\n                handleEmptyAction={emptyAction}\n              />\n            </StyledComboBoxList>\n          </RemoveScroll>\n        </Popper>\n      ) : null}\n    </>\n  );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}

package/dist/esm/components/ComboBox/Styles.d.ts

@@ -5,9 +5,7 @@ interface StyledComboBoxProps {
     $size?: string;
 }
 export declare const StyledComboBox: import("styled-components").StyledComponent<"div", any, StyledComboBoxProps, never>;
-export declare const StyledComboBoxWrapper: import("styled-components").StyledComponent<"div", any, {
-    $loading?: boolean | undefined;
-}, never>;
+export declare const StyledComboBoxControls: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledComboBoxCloseSmallIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").SVGProps<SVGSVGElement>, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "name" | "type" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "height" | "max" | "media" | "method" | "min" | "target" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
 export declare const StyledComboBoxCollapseExpandSingleIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Pick<import("react").SVGProps<SVGSVGElement>, "string" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "name" | "type" | "className" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "height" | "max" | "media" | "method" | "min" | "target" | "width" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "alignmentBaseline" | "allowReorder" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "azimuth" | "baseFrequency" | "baselineShift" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clip" | "clipPathUnits" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorProfile" | "colorRendering" | "contentScriptType" | "contentStyleType" | "cursor" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "direction" | "display" | "divisor" | "dominantBaseline" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "fill" | "fillOpacity" | "fillRule" | "filterRes" | "filterUnits" | "floodColor" | "floodOpacity" | "focusable" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "format" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphOrientationVertical" | "glyphRef" | "gradientTransform" | "gradientUnits" | "horizAdvX" | "horizOriginX" | "href" | "imageRendering" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "letterSpacing" | "lightingColor" | "limitingConeAngle" | "local" | "markerEnd" | "markerHeight" | "markerMid" | "markerStart" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mode" | "numOctaves" | "offset" | "opacity" | "operator" | "order" | "orient" | "orientation" | "origin" | "overflow" | "overlinePosition" | "overlineThickness" | "paintOrder" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "pointerEvents" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rotate" | "rx" | "ry" | "scale" | "seed" | "shapeRendering" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "stopColor" | "stopOpacity" | "strikethroughPosition" | "strikethroughThickness" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textAnchor" | "textDecoration" | "textLength" | "textRendering" | "to" | "transform" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeBidi" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "vectorEffect" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "visibility" | "vMathematical" | "widths" | "wordSpacing" | "writingMode" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & import("react").RefAttributes<SVGSVGElement>>, any, {
     $open?: boolean | undefined;

package/dist/esm/components/ComboBox/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/Styles.ts"],"names":[],"mappings":";AAMA,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,cAAc,qFAkC1B,CAAC;AAIF,eAAO,MAAM,qBAAqB;;SAWjC,CAAC;AASF,eAAO,MAAM,4BAA4B,wqPAWxC,CAAC;AAIF,eAAO,MAAM,sCAAsC;;SAalD,CAAC;AAKF,eAAO,MAAM,mBAAmB,qYAM/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;SAQ9B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/ComboBox/Styles.ts"],"names":[],"mappings":";AAOA,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,cAAc,qFAW1B,CAAC;AAIF,eAAO,MAAM,sBAAsB,oEAQlC,CAAC;AASF,eAAO,MAAM,4BAA4B,wqPAWxC,CAAC;AAIF,eAAO,MAAM,sCAAsC;;SAalD,CAAC;AAKF,eAAO,MAAM,mBAAmB,qYAS/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;SAQ9B,CAAC"}

package/dist/esm/components/ComboBox/Styles.js

@@ -6,28 +6,20 @@ import { FontStyle } from "../FontStyle";
 export var StyledComboBox = styled.div.withConfig({
   displayName: "Styles__StyledComboBox",
   componentId: "sc-5qvkpb-0"
-})(["height:34px;border:1px solid var(--border-primary);border-radius:10px;color:var(--color-theme-900);font-size:14px;background-color:var(--input-background-color);cursor:text;", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
-  return props.$open && css(["border-color:var(--color-primary);"]);
-}, function (props) {
+})(["position:relative;cursor:text;", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
   return props.$loading && css(["cursor:progress;"]);
-}, function (props) {
-  return props.$size == "small" && css(["height:26px;"]);
-}, function (props) {
-  return props.$size == "big" && css(["height:42px;"]);
 });
 StyledComboBox.displayName = "StyledComboBox";
-export var StyledComboBoxWrapper = styled.div.withConfig({
-  displayName: "Styles__StyledComboBoxWrapper",
+export var StyledComboBoxControls = styled.div.withConfig({
+  displayName: "Styles__StyledComboBoxControls",
   componentId: "sc-5qvkpb-1"
-})(["width:100%;height:100%;display:flex;align-items:center;", ""], function (props) {
-  return props.$loading && css(["pointer-events:none;"]);
-});
-StyledComboBoxWrapper.displayName = "StyledComboBoxWrapper";
+})(["position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;"]);
+StyledComboBoxControls.displayName = "StyledComboBoxControls";
 var StyledIconDefaults = css(["flex-shrink:0;cursor:pointer;"]);
 export var StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon).withConfig({
   displayName: "Styles__StyledComboBoxCloseSmallIcon",
   componentId: "sc-5qvkpb-2"
-})(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBoxWrapper);
+})(["", " opacity:0;transition-property:all;transition-duration:0.2s;transition-delay:0.5s;", ":hover &{opacity:1;transition-delay:0s;}"], StyledIconDefaults, StyledComboBox);
 StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
 export var StyledComboBoxCollapseExpandSingleIcon = styled(CollapseExpandSingleIcon).withConfig({
   displayName: "Styles__StyledComboBoxCollapseExpandSingleIcon",
@@ -39,7 +31,9 @@ StyledComboBoxCollapseExpandSingleIcon.displayName = "StyledComboBoxCollapseExpa
 export var StyledComboBoxInput = styled(Input).withConfig({
   displayName: "Styles__StyledComboBoxInput",
   componentId: "sc-5qvkpb-4"
-})(["overflow:hidden;text-overflow:ellipsis;background-color:transparent;border:none;width:100%;"]);
+})(["overflow:hidden;text-overflow:ellipsis;width:100%;padding-right:80px;", ":hover &{", "}"], StyledComboBox, {
+  "borderColor": "var(--color-primary)"
+});
 StyledComboBoxInput.displayName = "StyledComboBoxInput";
 export var StyledComboBoxList = styled.div.withConfig({
   displayName: "Styles__StyledComboBoxList",

package/dist/esm/components/ComboBox/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["styled","css","CollapseExpandSingleIcon","CloseSmallIcon","Input","BoxSizingStyle","FontStyle","StyledComboBox","div","props","$open","$loading","$size","displayName","StyledComboBoxWrapper","StyledIconDefaults","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","StyledComboBoxInput","StyledComboBoxList","$width"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,wBAAT,EAAmCC,cAAnC,QAAyD,qBAAzD;AACA,SAASC,KAAT,QAAsB,gBAAtB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAQA,OAAO,IAAMC,cAAc,GAAGP,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,mNAQvBF,SARuB,EASvBD,cATuB,EAWvB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,IACAT,GADA,wCADA;AAAA,CAXuB,EAiBvB,UAACQ,KAAD;AAAA,SACAA,KAAK,CAACE,QAAN,IACAV,GADA,sBADA;AAAA,CAjBuB,EAuBvB,UAACQ,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,IAAe,OAAf,IACAX,GADA,kBADA;AAAA,CAvBuB,EA6BvB,UAACQ,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,IAAe,KAAf,IACAX,GADA,kBADA;AAAA,CA7BuB,CAApB;AAoCPM,cAAc,CAACM,WAAf,GAA6B,gBAA7B;AAEA,OAAO,IAAMC,qBAAqB,GAAGd,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,oEAM9B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACE,QAAN,IACAV,GADA,0BADA;AAAA,CAN8B,CAA3B;AAaPa,qBAAqB,CAACD,WAAtB,GAAoC,uBAApC;AAEA,IAAME,kBAAkB,GAAGd,GAAH,mCAAxB;AAKA,OAAO,IAAMe,4BAA4B,GAAGhB,MAAM,CAACG,cAAD,CAAT;AAAA;AAAA;AAAA,2IACrCY,kBADqC,EAOrCD,qBAPqC,CAAlC;AAaPE,4BAA4B,CAACH,WAA7B,GAA2C,8BAA3C;AAEA,OAAO,IAAMI,sCAAsC,GAAGjB,MAAM,CAC1DE,wBAD0D,CAAT;AAAA;AAAA;AAAA,yFAG/Ca,kBAH+C,EAQ/C,UAACN,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,IACAT,GADA,6BADA;AAAA,CAR+C,CAA5C;AAePgB,sCAAsC,CAACJ,WAAvC,GACE,wCADF;AAGA,OAAO,IAAMK,mBAAmB,GAAGlB,MAAM,CAACI,KAAD,CAAT;AAAA;AAAA;AAAA,mGAAzB;AAQPc,mBAAmB,CAACL,WAApB,GAAkC,qBAAlC;AAEA,OAAO,IAAMM,kBAAkB,GAAGnB,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACC,KAAD;AAAA,SAAcA,KAAK,CAACW,MAApB;AAAA,CAPoB,CAAxB;AAUPD,kBAAkB,CAACN,WAAnB,GAAiC,oBAAjC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input/Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledComboBoxProps {\n  $open?: boolean;\n  $loading?: boolean;\n  $size?: string;\n}\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n  height: 34px;\n  border: 1px solid var(--border-primary);\n  border-radius: 10px;\n  color: var(--color-theme-900);\n  font-size: 14px;\n  background-color: var(--input-background-color);\n  cursor: text;\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$open &&\n    css`\n      border-color: var(--color-primary);\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.$size == \"small\" &&\n    css`\n      height: 26px;\n    `}\n\n  ${(props) =>\n    props.$size == \"big\" &&\n    css`\n      height: 42px;\n    `}\n`;\n\nStyledComboBox.displayName = \"StyledComboBox\";\n\nexport const StyledComboBoxWrapper = styled.div<{ $loading?: boolean }>`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      pointer-events: none;\n    `}\n`;\n\nStyledComboBoxWrapper.displayName = \"StyledComboBoxWrapper\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults}\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBoxWrapper}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults}\n  margin: 0 4px 0 0;\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxInput = styled(Input)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  background-color: transparent;\n  border: none;\n  width: 100%;\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["styled","css","CollapseExpandSingleIcon","CloseSmallIcon","Input","BoxSizingStyle","FontStyle","StyledComboBox","div","props","$loading","displayName","StyledComboBoxControls","StyledIconDefaults","StyledComboBoxCloseSmallIcon","StyledComboBoxCollapseExpandSingleIcon","$open","StyledComboBoxInput","StyledComboBoxList","$width"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,wBAAT,EAAmCC,cAAnC,QAAyD,qBAAzD;AACA,SAASC,KAAT,QAAsB,gBAAtB;AACA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AASA,OAAO,IAAMC,cAAc,GAAGP,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,qDAGvBF,SAHuB,EAIvBD,cAJuB,EAMvB,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,IACAT,GADA,sBADA;AAAA,CANuB,CAApB;AAaPM,cAAc,CAACI,WAAf,GAA6B,gBAA7B;AAEA,OAAO,IAAMC,sBAAsB,GAAGZ,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,2GAA5B;AAUPI,sBAAsB,CAACD,WAAvB,GAAqC,wBAArC;AAEA,IAAME,kBAAkB,GAAGZ,GAAH,mCAAxB;AAKA,OAAO,IAAMa,4BAA4B,GAAGd,MAAM,CAACG,cAAD,CAAT;AAAA;AAAA;AAAA,2IACrCU,kBADqC,EAOrCN,cAPqC,CAAlC;AAaPO,4BAA4B,CAACH,WAA7B,GAA2C,8BAA3C;AAEA,OAAO,IAAMI,sCAAsC,GAAGf,MAAM,CAC1DE,wBAD0D,CAAT;AAAA;AAAA;AAAA,yFAG/CW,kBAH+C,EAQ/C,UAACJ,KAAD;AAAA,SACAA,KAAK,CAACO,KAAN,IACAf,GADA,6BADA;AAAA,CAR+C,CAA5C;AAePc,sCAAsC,CAACJ,WAAvC,GACE,wCADF;AAGA,OAAO,IAAMM,mBAAmB,GAAGjB,MAAM,CAACI,KAAD,CAAT;AAAA;AAAA;AAAA,gGAM5BG,cAN4B,EAOxB;AAAA;AAAA,CAPwB,CAAzB;AAWPU,mBAAmB,CAACN,WAApB,GAAkC,qBAAlC;AAEA,OAAO,IAAMO,kBAAkB,GAAGlB,MAAM,CAACQ,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACC,KAAD;AAAA,SAAcA,KAAK,CAACU,MAApB;AAAA,CAPoB,CAAxB;AAUPD,kBAAkB,CAACP,WAAnB,GAAiC,oBAAjC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input/Input\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport tw from \"twin.macro\";\n\ninterface StyledComboBoxProps {\n  $open?: boolean;\n  $loading?: boolean;\n  $size?: string;\n}\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n  position: relative;\n  cursor: text;\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n`;\n\nStyledComboBox.displayName = \"StyledComboBox\";\n\nexport const StyledComboBoxControls = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nStyledComboBoxControls.displayName = \"StyledComboBoxControls\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults}\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBox}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults}\n  margin: 0 4px 0 0;\n  color: var(--color-theme-600);\n  transform: rotate(180deg);\n\n  ${(props) =>\n    props.$open &&\n    css`\n      transform: rotate(0deg);\n    `}\n`;\n\nStyledComboBoxCollapseExpandSingleIcon.displayName =\n  \"StyledComboBoxCollapseExpandSingleIcon\";\n\nexport const StyledComboBoxInput = styled(Input)`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n  padding-right: 80px;\n\n  ${StyledComboBox}:hover & {\n    ${tw`tw-border-primary`}\n  }\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nexport const StyledComboBoxList = styled.div<{ $width?: number }>`\n  min-width: 260px;\n  background-color: var(--page-paper-main);\n  border-radius: 8px;\n  border: 1px solid var(--border-primary);\n  box-shadow: var(--shadow-tertiary);\n  margin: 8px 0;\n  width: ${(props) => `${props.$width}px`};\n`;\n\nStyledComboBoxList.displayName = \"StyledComboBoxList\";\n"],"file":"Styles.js"}