@activecollab/components 1.0.121 → 1.0.122

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

@@ -9,6 +9,8 @@ exports.StyledAutocompleteScrollShadow = exports.StyledAutocompleteNoResult = ex
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _FontStyle = require("../FontStyle");
+
 var _ScrollShadow = require("../ScrollShadow");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -48,10 +50,10 @@ StyledAutocompleteNoResult.displayName = "StyledAutocompleteNoResult";
 var StyledAutocompleteNewItem = _styledComponents.default.label.withConfig({
   displayName: "Styles__StyledAutocompleteNewItem",
   componentId: "sc-1bc1vz9-3"
-})(["", ";padding:6px 16px;margin:4px 0;font-weight:normal;color:var(--color-primary);&:before{content:\"+ \";}", ""], {
+})(["", ";", " padding:6px 16px;margin:4px 0;font-weight:normal;color:var(--color-primary);&:before{content:\"+ \";}", ""], {
   "cursor": "pointer",
   "userSelect": "none"
-}, function (props) {
+}, _FontStyle.FontStyle, function (props) {
   return props.hover && (0, _styledComponents.css)(["background-color:var(--color-theme-200);content:\"+ \";"]);
 });
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Autocomplete/Styles.ts"],"names":["StyledAutocompleteScrollShadow","ScrollShadow","props","$isHidden","css","displayName","StyledAutocompleteBody","styled","div","StyledAutocompleteNoResult","StyledAutocompleteNewItem","label","hover"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;AAEO,IAAMA,8BAA8B,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,4BAKvC,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,SAAN,QACAC,qBADA,aAEM;AAAA;AAAA,GAFN,CADA;AAAA,CALuC,CAApC;;AAYPJ,8BAA8B,CAACK,WAA/B,GAA6C,gCAA7C;;AAEO,IAAMC,sBAAsB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,yDAA5B;;;AAMPF,sBAAsB,CAACD,WAAvB,GAAqC,wBAArC;;AAEO,IAAMI,0BAA0B,GAAGF,0BAAOC,GAAV;AAAA;AAAA;AAAA,0HACjC;AAAA;AAAA;AAAA,CADiC,CAAhC;;;AAaPC,0BAA0B,CAACJ,WAA3B,GAAyC,4BAAzC;;AAEO,IAAMK,yBAAyB,GAAGH,0BAAOI,KAAV;AAAA;AAAA;AAAA,uHAChC;AAAA;AAAA;AAAA,CADgC,EAYlC,UAACT,KAAD;AAAA,SACAA,KAAK,CAACU,KAAN,QACAR,qBADA,8DADA;AAAA,CAZkC,CAA/B;;;AAoBPM,yBAAyB,CAACL,WAA1B,GAAwC,2BAAxC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { ScrollShadow } from \"../ScrollShadow\";\n\nexport const StyledAutocompleteScrollShadow = styled(ScrollShadow)<{\n  $isHidden: boolean;\n}>`\n  margin-top: 4px;\n\n  ${(props) =>\n    props.$isHidden &&\n    css`\n      ${tw`tw-hidden`};\n    `}\n`;\n\nStyledAutocompleteScrollShadow.displayName = \"StyledAutocompleteScrollShadow\";\n\nexport const StyledAutocompleteBody = styled.div`\n  max-height: 340px;\n  overflow: auto;\n  margin-bottom: 6px;\n`;\n\nStyledAutocompleteBody.displayName = \"StyledAutocompleteBody\";\n\nexport const StyledAutocompleteNoResult = styled.div`\n  ${tw`tw-cursor-pointer tw-select-none`};\n\n  padding: 6px 16px;\n  margin: 4px 0;\n\n  &:hover {\n    background-color: var(--color-theme-200);\n  }\n\n  color: var(--color-theme-600);\n`;\n\nStyledAutocompleteNoResult.displayName = \"StyledAutocompleteNoResult\";\n\nexport const StyledAutocompleteNewItem = styled.label<{ hover: boolean }>`\n  ${tw`tw-cursor-pointer tw-select-none`};\n\n  padding: 6px 16px;\n  margin: 4px 0;\n  font-weight: normal;\n  color: var(--color-primary);\n\n  &:before {\n    content: \"+ \";\n  }\n\n  ${(props) =>\n    props.hover &&\n    css`\n      background-color: var(--color-theme-200);\n      content: \"+ \";\n    `}\n`;\n\nStyledAutocompleteNewItem.displayName = \"StyledAutocompleteNewItem\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Autocomplete/Styles.ts"],"names":["StyledAutocompleteScrollShadow","ScrollShadow","props","$isHidden","css","displayName","StyledAutocompleteBody","styled","div","StyledAutocompleteNoResult","StyledAutocompleteNewItem","label","FontStyle","hover"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAEO,IAAMA,8BAA8B,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,4BAKvC,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,SAAN,QACAC,qBADA,aAEM;AAAA;AAAA,GAFN,CADA;AAAA,CALuC,CAApC;;AAYPJ,8BAA8B,CAACK,WAA/B,GAA6C,gCAA7C;;AAEO,IAAMC,sBAAsB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,yDAA5B;;;AAMPF,sBAAsB,CAACD,WAAvB,GAAqC,wBAArC;;AAEO,IAAMI,0BAA0B,GAAGF,0BAAOC,GAAV;AAAA;AAAA;AAAA,0HACjC;AAAA;AAAA;AAAA,CADiC,CAAhC;;;AAaPC,0BAA0B,CAACJ,WAA3B,GAAyC,4BAAzC;;AAEO,IAAMK,yBAAyB,GAAGH,0BAAOI,KAAV;AAAA;AAAA;AAAA,4HAChC;AAAA;AAAA;AAAA,CADgC,EAGlCC,oBAHkC,EAclC,UAACV,KAAD;AAAA,SACAA,KAAK,CAACW,KAAN,QACAT,qBADA,8DADA;AAAA,CAdkC,CAA/B;;;AAsBPM,yBAAyB,CAACL,WAA1B,GAAwC,2BAAxC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ScrollShadow } from \"../ScrollShadow\";\n\nexport const StyledAutocompleteScrollShadow = styled(ScrollShadow)<{\n  $isHidden: boolean;\n}>`\n  margin-top: 4px;\n\n  ${(props) =>\n    props.$isHidden &&\n    css`\n      ${tw`tw-hidden`};\n    `}\n`;\n\nStyledAutocompleteScrollShadow.displayName = \"StyledAutocompleteScrollShadow\";\n\nexport const StyledAutocompleteBody = styled.div`\n  max-height: 340px;\n  overflow: auto;\n  margin-bottom: 6px;\n`;\n\nStyledAutocompleteBody.displayName = \"StyledAutocompleteBody\";\n\nexport const StyledAutocompleteNoResult = styled.div`\n  ${tw`tw-cursor-pointer tw-select-none`};\n\n  padding: 6px 16px;\n  margin: 4px 0;\n\n  &:hover {\n    background-color: var(--color-theme-200);\n  }\n\n  color: var(--color-theme-600);\n`;\n\nStyledAutocompleteNoResult.displayName = \"StyledAutocompleteNoResult\";\n\nexport const StyledAutocompleteNewItem = styled.label<{ hover: boolean }>`\n  ${tw`tw-cursor-pointer tw-select-none`};\n\n  ${FontStyle}\n\n  padding: 6px 16px;\n  margin: 4px 0;\n  font-weight: normal;\n  color: var(--color-primary);\n\n  &:before {\n    content: \"+ \";\n  }\n\n  ${(props) =>\n    props.hover &&\n    css`\n      background-color: var(--color-theme-200);\n      content: \"+ \";\n    `}\n`;\n\nStyledAutocompleteNewItem.displayName = \"StyledAutocompleteNewItem\";\n"],"file":"Styles.js"}

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

@@ -27,6 +27,8 @@ var _OptionContent = require("../Select/OptionContent/OptionContent");
 
 var _Styles = require("./Styles");
 
+var _InputAdornment = require("../Input/InputAdornment");
+
 var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -73,6 +75,7 @@ var ComboBox = function ComboBox(_ref) {
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
       prop = _objectWithoutProperties(_ref, _excluded);
 
+  var timeoutRef = (0, _react.useRef)();
   var selectedName = (0, _react.useMemo)(function () {
     var value = "";
 
@@ -144,12 +147,6 @@ var ComboBox = function ComboBox(_ref) {
       setOpen(false);
     }
   }, [onChange]);
-  var onClose = (0, _react.useCallback)(function () {
-    setTimeout(function () {
-      setOpen(false);
-    }, 200);
-    setValue(selectedName);
-  }, [selectedName]);
   var onOpen = (0, _react.useCallback)(function () {
     if (!disabled) {
       setOpen(true);
@@ -172,41 +169,42 @@ var ComboBox = function ComboBox(_ref) {
     e.preventDefault();
   }, []);
   var comboBoxRef = (0, _react.useRef)(null);
-  var clickOutsideCallback = (0, _react.useCallback)(function (event) {
-    if (comboBoxRef.current && !comboBoxRef.current.contains(event.target)) {
-      onClose();
-    }
-  }, [onClose]);
+  var handleBlur = (0, _react.useCallback)(function () {
+    setValue(selectedName);
+    timeoutRef.current = setTimeout(function () {
+      setOpen(false);
+    }, 200);
+  }, [selectedName]);
   (0, _react.useEffect)(function () {
-    document.addEventListener("click", clickOutsideCallback);
     return function () {
-      document.removeEventListener("click", clickOutsideCallback);
+      timeoutRef.current && clearTimeout(timeoutRef.current);
     };
-  }, [clickOutsideCallback]);
-  return /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBox, {
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxInput, {
     className: "c-combo-box",
-    $open: open,
-    $loading: loading,
+    onBlur: handleBlur,
+    onFocus: onOpen,
     ref: comboBoxRef,
-    onClick: onOpen,
-    onFocus: onOpen
-  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxInput, {
-    ref: handleRef,
+    inputRef: handleRef,
     value: loading && loadingText ? loadingText : value,
     onKeyDown: handleOnKeyDown,
     onChange: handleOnChange,
     placeholder: placeholder,
     disabled: disabled,
     size: size,
-    invalid: invalid
-  }), !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",
-    size: "small"
-  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCloseSmallIcon, null)) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledComboBoxCollapseExpandSingleIcon, {
-    $open: open
-  })) : null, !disabled ? /*#__PURE__*/_react.default.createElement(_Popper.Popper, {
+    invalid: invalid,
+    $loading: loading,
+    endAdornment: !disabled ? /*#__PURE__*/_react.default.createElement(_InputAdornment.InputAdornment, {
+      disablePointerEvents: disabled
+    }, loading ? /*#__PURE__*/_react.default.createElement(_SpinnerLoader.SpinnerLoader, null) : selected ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
+      onMouseDown: handleMouseDown,
+      onClick: handleDeselect,
+      variant: "text gray",
+      size: "small"
+    }, /*#__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: comboBoxRef.current,
     open: open,
     placement: "bottom",

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","invalid","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  /** Invalid state */\n  invalid?: boolean;\n}\n\nexport const ComboBox: FC<\n  IComboBoxProps & Omit<IAutocompleteProps, keyof IComboBoxProps>\n> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  size = \"regular\",\n  invalid = false,\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    <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        invalid={invalid}\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      {!disabled ? (\n        <Popper\n          anchorEl={comboBoxRef.current}\n          open={open}\n          placement=\"bottom\"\n          style={{ zIndex: 10 }}\n          strategy={\"fixed\"}\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    </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","invalid","prop","timeoutRef","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","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","comboBoxRef","handleBlur","current","setTimeout","clearTimeout","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  StyledComboBoxCloseSmallIcon,\n  StyledComboBoxCollapseExpandSingleIcon,\n  StyledComboBoxInput,\n  StyledComboBoxList,\n} from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { InputAdornment } from \"../Input/InputAdornment\";\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  /** Invalid state */\n  invalid?: boolean;\n}\n\nexport const ComboBox: FC<\n  IComboBoxProps & Omit<IAutocompleteProps, keyof IComboBoxProps>\n> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  size = \"regular\",\n  invalid = false,\n  ...prop\n}) => {\n  const timeoutRef = useRef<NodeJS.Timeout>();\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 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 handleBlur = useCallback(() => {\n    setValue(selectedName);\n    timeoutRef.current = setTimeout(() => {\n      setOpen(false);\n    }, 200);\n  }, [selectedName]);\n\n  useEffect(() => {\n    return () => {\n      timeoutRef.current && clearTimeout(timeoutRef.current);\n    };\n  }, []);\n\n  return (\n    <>\n      <StyledComboBoxInput\n        className=\"c-combo-box\"\n        onBlur={handleBlur}\n        onFocus={onOpen}\n        ref={comboBoxRef}\n        inputRef={handleRef}\n        value={loading && loadingText ? loadingText : value}\n        onKeyDown={handleOnKeyDown}\n        onChange={handleOnChange}\n        placeholder={placeholder}\n        disabled={disabled}\n        size={size}\n        invalid={invalid}\n        $loading={loading}\n        endAdornment={\n          !disabled ? (\n            <InputAdornment disablePointerEvents={disabled}>\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            </InputAdornment>\n          ) : null\n        }\n      />\n      {!disabled ? (\n        <Popper\n          anchorEl={comboBoxRef.current}\n          open={open}\n          placement=\"bottom\"\n          style={{ zIndex: 10 }}\n          strategy={\"fixed\"}\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,66 +5,45 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledComboBoxList = exports.StyledComboBoxInput = exports.StyledComboBoxControls = exports.StyledComboBoxCollapseExpandSingleIcon = exports.StyledComboBoxCloseSmallIcon = exports.StyledComboBox = void 0;
+exports.StyledComboBoxList = exports.StyledComboBoxInput = exports.StyledComboBoxCollapseExpandSingleIcon = exports.StyledComboBoxCloseSmallIcon = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _collection = require("../Icons/collection");
 
-var _Input = require("../Input/Input");
-
-var _BoxSizingStyle = require("../BoxSizingStyle");
-
-var _FontStyle = require("../FontStyle");
+var _Input = require("../Input");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var StyledComboBox = _styledComponents.default.div.withConfig({
-  displayName: "Styles__StyledComboBox",
+var StyledComboBoxInput = (0, _styledComponents.default)(_Input.Input).withConfig({
+  displayName: "Styles__StyledComboBoxInput",
   componentId: "sc-5qvkpb-0"
-})(["position:relative;cursor:text;", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
+})(["overflow:hidden;text-overflow:ellipsis;width:100%;", ""], function (props) {
   return props.$loading && (0, _styledComponents.css)(["cursor:progress;"]);
 });
-
-exports.StyledComboBox = StyledComboBox;
-StyledComboBox.displayName = "StyledComboBox";
-
-var StyledComboBoxControls = _styledComponents.default.div.withConfig({
-  displayName: "Styles__StyledComboBoxControls",
-  componentId: "sc-5qvkpb-1"
-})(["position:absolute;top:0;right:0;height:100%;display:flex;align-items:center;justify-content:center;"]);
-
-exports.StyledComboBoxControls = StyledComboBoxControls;
-StyledComboBoxControls.displayName = "StyledComboBoxControls";
+exports.StyledComboBoxInput = StyledComboBoxInput;
+StyledComboBoxInput.displayName = "StyledComboBoxInput";
 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, StyledComboBox);
-exports.StyledComboBoxCloseSmallIcon = StyledComboBoxCloseSmallIcon;
-StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
 var StyledComboBoxCollapseExpandSingleIcon = (0, _styledComponents.default)(_collection.CollapseExpandSingleIcon).withConfig({
   displayName: "Styles__StyledComboBoxCollapseExpandSingleIcon",
-  componentId: "sc-5qvkpb-3"
-})(["", " margin:0 4px 0 0;color:var(--color-theme-600);transform:rotate(180deg);", ""], StyledIconDefaults, function (props) {
+  componentId: "sc-5qvkpb-1"
+})(["", " color:var(--color-theme-600);transform:rotate(180deg);", ""], StyledIconDefaults, function (props) {
   return props.$open && (0, _styledComponents.css)(["transform:rotate(0deg);"]);
 });
 exports.StyledComboBoxCollapseExpandSingleIcon = StyledComboBoxCollapseExpandSingleIcon;
 StyledComboBoxCollapseExpandSingleIcon.displayName = "StyledComboBoxCollapseExpandSingleIcon";
-var StyledComboBoxInput = (0, _styledComponents.default)(_Input.Input).withConfig({
-  displayName: "Styles__StyledComboBoxInput",
-  componentId: "sc-5qvkpb-4"
-})(["overflow:hidden;text-overflow:ellipsis;width:100%;padding-right:80px;", ":hover &{", "}"], StyledComboBox, {
-  "borderColor": "var(--color-primary)"
-});
-exports.StyledComboBoxInput = StyledComboBoxInput;
-StyledComboBoxInput.displayName = "StyledComboBoxInput";
+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, StyledComboBoxInput);
+exports.StyledComboBoxCloseSmallIcon = StyledComboBoxCloseSmallIcon;
+StyledComboBoxCloseSmallIcon.displayName = "StyledComboBoxCloseSmallIcon";
 
 var StyledComboBoxList = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledComboBoxList",
-  componentId: "sc-5qvkpb-5"
+  componentId: "sc-5qvkpb-3"
 })(["min-width:260px;background-color:var(--page-paper-main);border-radius:8px;border:1px solid var(--border-primary);box-shadow:var(--shadow-tertiary);margin:8px 0;width:", ";"], function (props) {
   return "".concat(props.$width, "px");
 });

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","$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"}
+{"version":3,"sources":["../../../../src/components/ComboBox/Styles.ts"],"names":["StyledComboBoxInput","Input","props","$loading","css","displayName","StyledIconDefaults","StyledComboBoxCollapseExpandSingleIcon","CollapseExpandSingleIcon","$open","StyledComboBoxCloseSmallIcon","CloseSmallIcon","StyledComboBoxList","styled","div","$width"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAEO,IAAMA,mBAAmB,GAAG,+BAAOC,YAAP,CAAH;AAAA;AAAA;AAAA,+DAK5B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,uBADA;AAAA,CAL4B,CAAzB;;AAYPJ,mBAAmB,CAACK,WAApB,GAAkC,qBAAlC;AAEA,IAAMC,kBAAkB,OAAGF,qBAAH,oCAAxB;AAKO,IAAMG,sCAAsC,GAAG,+BACpDC,oCADoD,CAAH;AAAA;AAAA;AAAA,wEAG/CF,kBAH+C,EAO/C,UAACJ,KAAD;AAAA,SACAA,KAAK,CAACO,KAAN,QACAL,qBADA,8BADA;AAAA,CAP+C,CAA5C;;AAcPG,sCAAsC,CAACF,WAAvC,GACE,wCADF;AAGO,IAAMK,4BAA4B,GAAG,+BAAOC,0BAAP,CAAH;AAAA;AAAA;AAAA,2IACrCL,kBADqC,EAOrCN,mBAPqC,CAAlC;;AAaPU,4BAA4B,CAACL,WAA7B,GAA2C,8BAA3C;;AAEO,IAAMO,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,oLAOpB,UAACZ,KAAD;AAAA,mBAAcA,KAAK,CAACa,MAApB;AAAA,CAPoB,CAAxB;;;AAUPH,kBAAkB,CAACP,WAAnB,GAAiC,oBAAjC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CollapseExpandSingleIcon, CloseSmallIcon } from \"../Icons/collection\";\nimport { Input } from \"../Input\";\n\nexport const StyledComboBoxInput = styled(Input)<{ $loading?: boolean }>`\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n`;\n\nStyledComboBoxInput.displayName = \"StyledComboBoxInput\";\n\nconst StyledIconDefaults = css`\n  flex-shrink: 0;\n  cursor: pointer;\n`;\n\nexport const StyledComboBoxCollapseExpandSingleIcon = styled(\n  CollapseExpandSingleIcon\n)<{ $open?: boolean }>`\n  ${StyledIconDefaults}\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 StyledComboBoxCloseSmallIcon = styled(CloseSmallIcon)`\n  ${StyledIconDefaults}\n  opacity: 0;\n  transition-property: all;\n  transition-duration: 0.2s;\n  transition-delay: 0.5s;\n\n  ${StyledComboBoxInput}:hover & {\n    opacity: 1;\n    transition-delay: 0s;\n  }\n`;\n\nStyledComboBoxCloseSmallIcon.displayName = \"StyledComboBoxCloseSmallIcon\";\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/Input.js

@@ -13,7 +13,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Styles = require("./Styles");
 
-var _excluded = ["className", "type", "disabled", "size", "invalid"];
+var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
+
+var _excluded = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "inputRef"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,9 +29,10 @@ 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 Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
+      style = _ref.style,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? "text" : _ref$type,
       _ref$disabled = _ref.disabled,
@@ -38,17 +41,34 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       size = _ref$size === void 0 ? "regular" : _ref$size,
       _ref$invalid = _ref.invalid,
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+      startAdornment = _ref.startAdornment,
+      endAdornment = _ref.endAdornment,
+      inputRef = _ref.inputRef,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_react.default.createElement(_Styles.StyledInput, _extends({
-    ref: ref,
-    type: type,
-    disabled: disabled,
+  var intInputRef = (0, _react.useRef)(null);
+  var handleRef = (0, _useForkRef.default)(inputRef, intInputRef);
+  var handleWrapperClick = (0, _react.useCallback)(function () {
+    var _intInputRef$current;
+
+    (_intInputRef$current = intInputRef.current) === null || _intInputRef$current === void 0 ? void 0 : _intInputRef$current.focus();
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledInputWrapper, {
+    $size: size,
+    $invalid: invalid,
+    $disabled: disabled,
     className: (0, _classnames.default)("c-input", className),
+    style: style,
+    onClick: handleWrapperClick,
+    ref: ref
+  }, startAdornment, /*#__PURE__*/_react.default.createElement(_Styles.StyledInput, _extends({
+    ref: handleRef,
+    type: type,
     $size: size,
-    $invalid: invalid
-  }, rest));
+    disabled: disabled
+  }, rest)), endAdornment);
 });
+
 exports.Input = Input;
 Input.displayName = "Input";
 //# sourceMappingURL=Input.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"names":["Input","ref","className","type","disabled","size","invalid","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AASO,IAAMA,KAAK,gBAAG,uBAInB,gBASEC,GATF,EAUK;AAAA,4BARDC,SAQC;AAAA,MARDA,SAQC,+BARW,EAQX;AAAA,uBAPDC,IAOC;AAAA,MAPDA,IAOC,0BAPM,MAON;AAAA,2BANDC,QAMC;AAAA,MANDA,QAMC,8BANU,KAMV;AAAA,uBALDC,IAKC;AAAA,MALDA,IAKC,0BALM,SAKN;AAAA,0BAJDC,OAIC;AAAA,MAJDA,OAIC,6BAJS,KAIT;AAAA,MAHEC,IAGF;;AACH,sBACE,6BAAC,mBAAD;AACE,IAAA,GAAG,EAAEN,GADP;AAEE,IAAA,IAAI,EAAEE,IAFR;AAGE,IAAA,QAAQ,EAAEC,QAHZ;AAIE,IAAA,SAAS,EAAE,yBAAW,SAAX,EAAsBF,SAAtB,CAJb;AAKE,IAAA,KAAK,EAAEG,IALT;AAME,IAAA,QAAQ,EAAEC;AANZ,KAOMC,IAPN,EADF;AAWD,CA1BkB,CAAd;;AA6BPP,KAAK,CAACQ,WAAN,GAAoB,OAApB","sourcesContent":["import React, { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput } from \"./Styles\";\n\nexport type InputSize = \"small\" | \"regular\" | \"big\";\nexport interface InputProps {\n  /** Velicina inputa koja definse font-size i border radius */\n  size?: InputSize;\n  invalid?: boolean;\n}\n\nexport const Input = forwardRef<\n  HTMLInputElement,\n  InputProps & Omit<React.ComponentPropsWithoutRef<\"input\">, keyof InputProps>\n>(\n  (\n    {\n      className = \"\",\n      type = \"text\",\n      disabled = false,\n      size = \"regular\",\n      invalid = false,\n      ...rest\n    },\n    ref\n  ) => {\n    return (\n      <StyledInput\n        ref={ref}\n        type={type}\n        disabled={disabled}\n        className={classnames(\"c-input\", className)}\n        $size={size}\n        $invalid={invalid}\n        {...rest}\n      />\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"file":"Input.js"}
+{"version":3,"sources":["../../../../src/components/Input/Input.tsx"],"names":["Input","React","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","inputRef","rest","intInputRef","handleRef","handleWrapperClick","current","focus","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAWO,IAAMA,KAAK,gBAAGC,eAAMC,UAAN,CAInB,gBAaEC,GAbF,EAcK;AAAA,4BAZDC,SAYC;AAAA,MAZDA,SAYC,+BAZW,EAYX;AAAA,MAXDC,KAWC,QAXDA,KAWC;AAAA,uBAVDC,IAUC;AAAA,MAVDA,IAUC,0BAVM,MAUN;AAAA,2BATDC,QASC;AAAA,MATDA,QASC,8BATU,KASV;AAAA,uBARDC,IAQC;AAAA,MARDA,IAQC,0BARM,SAQN;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,KAOT;AAAA,MANDC,cAMC,QANDA,cAMC;AAAA,MALDC,YAKC,QALDA,YAKC;AAAA,MAJDC,QAIC,QAJDA,QAIC;AAAA,MAHEC,IAGF;;AACH,MAAMC,WAAW,GAAG,mBAAyB,IAAzB,CAApB;AACA,MAAMC,SAAS,GAAG,yBAAWH,QAAX,EAAqBE,WAArB,CAAlB;AAEA,MAAME,kBAAkB,GAAG,wBAAY,YAAM;AAAA;;AAC3C,4BAAAF,WAAW,CAACG,OAAZ,8EAAqBC,KAArB;AACD,GAF0B,EAExB,EAFwB,CAA3B;AAIA,sBACE,6BAAC,0BAAD;AACE,IAAA,KAAK,EAAEV,IADT;AAEE,IAAA,QAAQ,EAAEC,OAFZ;AAGE,IAAA,SAAS,EAAEF,QAHb;AAIE,IAAA,SAAS,EAAE,yBAAW,SAAX,EAAsBH,SAAtB,CAJb;AAKE,IAAA,KAAK,EAAEC,KALT;AAME,IAAA,OAAO,EAAEW,kBANX;AAOE,IAAA,GAAG,EAAEb;AAPP,KASGO,cATH,eAUE,6BAAC,mBAAD;AACE,IAAA,GAAG,EAAEK,SADP;AAEE,IAAA,IAAI,EAAET,IAFR;AAGE,IAAA,KAAK,EAAEE,IAHT;AAIE,IAAA,QAAQ,EAAED;AAJZ,KAKMM,IALN,EAVF,EAiBGF,YAjBH,CADF;AAqBD,CA/CkB,CAAd;;;AAkDPX,KAAK,CAACmB,WAAN,GAAoB,OAApB","sourcesContent":["import React, { ReactNode, Ref, useCallback, useRef } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\nexport interface InputProps {\n  /** Velicina inputa koja definse font-size i border radius */\n  size?: InputSize;\n  invalid?: boolean;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  inputRef?: Ref<HTMLInputElement>;\n}\n\nexport const Input = React.forwardRef<\n  HTMLDivElement,\n  InputProps & Omit<React.ComponentPropsWithoutRef<\"input\">, keyof InputProps>\n>(\n  (\n    {\n      className = \"\",\n      style,\n      type = \"text\",\n      disabled = false,\n      size = \"regular\",\n      invalid = false,\n      startAdornment,\n      endAdornment,\n      inputRef,\n      ...rest\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(inputRef, intInputRef);\n\n    const handleWrapperClick = useCallback(() => {\n      intInputRef.current?.focus();\n    }, []);\n\n    return (\n      <StyledInputWrapper\n        $size={size}\n        $invalid={invalid}\n        $disabled={disabled}\n        className={classnames(\"c-input\", className)}\n        style={style}\n        onClick={handleWrapperClick}\n        ref={ref}\n      >\n        {startAdornment}\n        <StyledInput\n          ref={handleRef}\n          type={type}\n          $size={size}\n          disabled={disabled}\n          {...rest}\n        />\n        {endAdornment}\n      </StyledInputWrapper>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"file":"Input.js"}

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

@@ -0,0 +1,57 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputAdornment = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _excluded = ["children", "as", "disablePointerEvents"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 InputAdornmentBase = _styledComponents.default.div.withConfig({
+  displayName: "InputAdornment__InputAdornmentBase",
+  componentId: "sc-1xfjx1z-0"
+})(["", " ", " ", ""], {
+  "display": "flex"
+}, {
+  "alignItems": "center"
+}, function (props) {
+  return props.$disablePointerEvents && (0, _styledComponents.css)(["", ""], {
+    "pointerEvents": "none"
+  });
+});
+
+var InputAdornment = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      as = _ref.as,
+      disablePointerEvents = _ref.disablePointerEvents,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var Component = as || "div";
+  return /*#__PURE__*/_react.default.createElement(InputAdornmentBase, _extends({}, rest, {
+    as: Component,
+    $disablePointerEvents: disablePointerEvents,
+    ref: ref
+  }), children);
+});
+
+exports.InputAdornment = InputAdornment;
+InputAdornment.displayName = "InputAdornment";
+//# sourceMappingURL=InputAdornment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Input/InputAdornment.tsx"],"names":["InputAdornmentBase","styled","div","props","$disablePointerEvents","css","InputAdornment","React","forwardRef","ref","children","as","disablePointerEvents","rest","Component","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;AAWA,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,uBAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAIpB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,qBAAN,QACAC,qBADA,YAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAJoB,CAAxB;;AAkBO,IAAMC,cAEZ,gBAAGC,eAAMC,UAAN,CACF,gBAEEC,GAFF,EAGK;AAAA,MAFDC,QAEC,QAFDA,QAEC;AAAA,MAFSC,EAET,QAFSA,EAET;AAAA,MAFaC,oBAEb,QAFaA,oBAEb;AAAA,MAFsCC,IAEtC;;AACH,MAAMC,SAAS,GAAGH,EAAE,IAAI,KAAxB;AACA,sBACE,6BAAC,kBAAD,eACME,IADN;AAEE,IAAA,EAAE,EAAEC,SAFN;AAGE,IAAA,qBAAqB,EAAEF,oBAHzB;AAIE,IAAA,GAAG,EAAEH;AAJP,MAMGC,QANH,CADF;AAUD,CAhBC,CAFG;;;AAqBPJ,cAAc,CAACS,WAAf,GAA6B,gBAA7B","sourcesContent":["import React from \"react\";\nimport styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\n\ninterface BaseInputAdornmentProps {\n  disablePointerEvents?: boolean;\n}\n\nconst InputAdornmentBase = styled.div<{ $disablePointerEvents?: boolean }>`\n  ${tw`tw-flex`}\n  ${tw`tw-items-center`}\n\n  ${(props) =>\n    props.$disablePointerEvents &&\n    css`\n      ${tw`tw-pointer-events-none`}\n    `}\n`;\n\nexport type InputAdornmentProps<C extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<C, BaseInputAdornmentProps>;\n\nexport type InputAdornmentComponent = <C extends React.ElementType = \"div\">(\n  props: InputAdornmentProps<C>\n) => React.ReactElement | null;\n\nexport const InputAdornment: InputAdornmentComponent & {\n  displayName?: string;\n} = React.forwardRef(\n  <C extends React.ElementType = \"div\">(\n    { children, as, disablePointerEvents, ...rest }: InputAdornmentProps<C>,\n    ref: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"div\";\n    return (\n      <InputAdornmentBase\n        {...rest}\n        as={Component}\n        $disablePointerEvents={disablePointerEvents}\n        ref={ref}\n      >\n        {children}\n      </InputAdornmentBase>\n    );\n  }\n);\n\nInputAdornment.displayName = \"InputAdornment\";\n"],"file":"InputAdornment.js"}

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

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledInput = void 0;
+exports.StyledInputWrapper = exports.StyledInput = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -17,41 +17,63 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var StyledInput = _styledComponents.default.input.withConfig({
-  displayName: "Styles__StyledInput",
+var StyledInputWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledInputWrapper",
   componentId: "sc-ce8kcp-0"
-})(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px 8px 6px 8px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;outline:none;", " ", " ", " ", " ", " ", " &::placeholder{", "}", ""], {
-  "fontSize": "0.875rem"
+})(["", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", ""], {
+  "cursor": "text"
 }, {
-  "color": "var(--color-theme-900)"
+  "display": "flex"
 }, {
-  "lineHeight": "1.375"
-}, {
-  "letterSpacing": "0.02em"
-}, {
-  "fontWeight": "400"
+  "alignItems": "center"
 }, {
   "borderColor": "var(--color-theme-500)"
 }, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
   return props.$size === "small" && (0, _styledComponents.css)(["border-radius:6px;height:24px;"]);
 }, function (props) {
-  return props.$size === "big" && (0, _styledComponents.css)(["", " height:40px;"], {
-    "fontSize": "1rem"
-  });
+  return props.$size === "big" && (0, _styledComponents.css)(["height:40px;"]);
 }, function (props) {
-  return props.disabled && (0, _styledComponents.css)(["", ""], {
+  return props.$disabled && (0, _styledComponents.css)(["", ""], {
     "cursor": "not-allowed",
     "opacity": "0.5"
   });
 }, function (props) {
-  return !props.disabled && !props.$invalid && (0, _styledComponents.css)(["&:active,&:focus,&:hover{", "}"], {
+  return !props.$disabled && !props.$invalid && (0, _styledComponents.css)(["&:focus-within,&:hover{", "}"], {
     "borderColor": "var(--color-primary)"
   });
+}, function (props) {
+  return !props.$disabled && props.$invalid && (0, _styledComponents.css)(["", ""], {
+    "borderColor": "var(--red-alert)"
+  });
+});
+
+exports.StyledInputWrapper = StyledInputWrapper;
+StyledInputWrapper.displayName = "StyledInputWrapper";
+
+var StyledInput = _styledComponents.default.input.withConfig({
+  displayName: "Styles__StyledInput",
+  componentId: "sc-ce8kcp-1"
+})(["", " ", " ", " ", " ", " ", " padding:0px;margin:0 4px;background-color:var(--input-background-color);border:none;outline:none;&::placeholder{", "}", " ", ""], {
+  "fontSize": "0.875rem"
+}, {
+  "color": "var(--color-theme-900)"
+}, {
+  "lineHeight": "1.375"
+}, {
+  "letterSpacing": "0.02em"
+}, {
+  "fontWeight": "400"
+}, {
+  "width": "100%"
 }, {
   "color": "var(--color-theme-transparent-500)"
 }, function (props) {
-  return !props.disabled && props.$invalid && (0, _styledComponents.css)(["", ""], {
-    "borderColor": "var(--red-alert)"
+  return props.$size === "big" && (0, _styledComponents.css)(["", ""], {
+    "fontSize": "1rem"
+  });
+}, function (props) {
+  return props.disabled && (0, _styledComponents.css)(["", ""], {
+    "cursor": "not-allowed"
   });
 });
 

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","$invalid","displayName"],"mappings":";;;;;;;;;AAAA;;AAGA;;AACA;;;;;;AAEO,IAAMA,WAAW,GAAGC,0BAAOC,KAAV;AAAA;AAAA;AAAA,wRAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,EAOlB;AAAA;AAAA,CAPkB,EAQlB;AAAA;AAAA,CARkB,EAWlB;AAAA;AAAA,CAXkB,EAoBpBC,oBApBoB,EAqBpBC,8BArBoB,EAuBpB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,QACAC,qBADA,qCADA;AAAA,CAvBoB,EA8BpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,QACAC,qBADA,yBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CA9BoB,EAqCpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,QACAD,qBADA,YAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CArCoB,EA2CpB,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,QAAP,IACA,CAACH,KAAK,CAACI,QADP,QAEAF,qBAFA,sCAMQ;AAAA;AAAA,GANR,CADA;AAAA,CA3CoB,EAuDhB;AAAA;AAAA,CAvDgB,EA0DpB,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,QAAP,IACAH,KAAK,CAACI,QADN,QAEAF,qBAFA,YAGM;AAAA;AAAA,GAHN,CADA;AAAA,CA1DoB,CAAjB;;;AAkEPP,WAAW,CAACU,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  $invalid?: boolean;\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-width: 1px;\n  border-style: solid;\n  ${tw`tw-border-theme-500`}\n  border-radius: 8px;\n  padding: 4px 8px 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`}\n    `}\n\n  ${(props) =>\n    !props.disabled &&\n    !props.$invalid &&\n    css`\n      &:active,\n      &:focus,\n      &:hover {\n        ${tw`tw-border-primary`}\n      }\n    `}\n\n  &::placeholder {\n    ${tw`tw-text-theme-transparent-500`}\n  }\n\n  ${(props) =>\n    !props.disabled &&\n    props.$invalid &&\n    css`\n      ${tw`tw-border-alert`}\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Input/Styles.ts"],"names":["StyledInputWrapper","styled","div","FontStyle","BoxSizingStyle","props","$size","css","$disabled","$invalid","displayName","StyledInput","input","disabled"],"mappings":";;;;;;;;;AAAA;;AAGA;;AACA;;;;;;AAOO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,iOACzB;AAAA;AAAA,CADyB,EAEzB;AAAA;AAAA,CAFyB,EAGzB;AAAA;AAAA,CAHyB,EAMzB;AAAA;AAAA,CANyB,EAc3BC,oBAd2B,EAe3BC,8BAf2B,EAiB3B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,QACAC,qBADA,qCADA;AAAA,CAjB2B,EAwB3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,QACAC,qBADA,mBADA;AAAA,CAxB2B,EA8B3B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,SAAN,QACAD,qBADA,YAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CA9B2B,EAoC3B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,SAAP,IACA,CAACH,KAAK,CAACI,QADP,QAEAF,qBAFA,oCAKQ;AAAA;AAAA,GALR,CADA;AAAA,CApC2B,EA8C3B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,SAAP,IACAH,KAAK,CAACI,QADN,QAEAF,qBAFA,YAGM;AAAA;AAAA,GAHN,CADA;AAAA,CA9C2B,CAAxB;;;AAsDPP,kBAAkB,CAACU,WAAnB,GAAiC,oBAAjC;;AAMO,IAAMC,WAAW,GAAGV,0BAAOW,KAAV;AAAA;AAAA;AAAA,qKAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,EAgBhB;AAAA;AAAA,CAhBgB,EAmBpB,UAACP,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,QACAC,qBADA,YAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAnBoB,EAyBpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACQ,QAAN,QACAN,qBADA,YAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAzBoB,CAAjB;;;AAgCPI,WAAW,CAACD,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  ${tw`tw-cursor-text`}\n  ${tw`tw-flex`}\n  ${tw`tw-items-center`}\n  border-width: 1px;\n  border-style: solid;\n  ${tw`tw-border-theme-500`}\n  border-radius: 8px;\n  padding: 4px;\n  height: 32px;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\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      height: 40px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-cursor-not-allowed tw-opacity-50`}\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        ${tw`tw-border-primary`}\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    css`\n      ${tw`tw-border-alert`}\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps {\n  $size?: InputSize;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\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  ${tw`tw-w-full`}\n\n  padding: 0px;\n  margin: 0 4px;\n\n  background-color: var(--input-background-color);\n  border: none;\n  outline: none;\n\n  &::placeholder {\n    ${tw`tw-text-theme-transparent-500`}\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      ${tw`tw-text-body-1`}\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      ${tw`tw-cursor-not-allowed`}\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}

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

@@ -16,4 +16,17 @@ Object.keys(_Input).forEach(function (key) {
     }
   });
 });
+
+var _InputAdornment = require("./InputAdornment");
+
+Object.keys(_InputAdornment).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputAdornment[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InputAdornment[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Input/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./Input\";\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/components/Input/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./Input\";\nexport * from \"./InputAdornment\";\n"],"file":"index.js"}

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

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}