@activecollab/components 1.0.94 → 1.0.97

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

@@ -27,7 +27,7 @@ var _OptionContent = require("../Select/OptionContent/OptionContent");
 
 var _Styles = require("./Styles");
 
-var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size"];
+var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -69,6 +69,8 @@ var ComboBox = function ComboBox(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "regular" : _ref$size,
+      _ref$invalid = _ref.invalid,
+      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
       prop = _objectWithoutProperties(_ref, _excluded);
 
   var selectedName = (0, _react.useMemo)(function () {
@@ -195,7 +197,8 @@ var ComboBox = function ComboBox(_ref) {
     onChange: handleOnChange,
     placeholder: placeholder,
     disabled: disabled,
-    size: size
+    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,

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","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    <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      {!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","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"}

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

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Styles = require("./Styles");
 
-var _excluded = ["className", "type", "disabled", "size"];
+var _excluded = ["className", "type", "disabled", "size", "invalid"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -36,6 +36,8 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "regular" : _ref$size,
+      _ref$invalid = _ref.invalid,
+      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledInput, _extends({
@@ -43,7 +45,8 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     type: type,
     disabled: disabled,
     className: (0, _classnames.default)("c-input", className),
-    $size: size
+    $size: size,
+    $invalid: invalid
   }, rest));
 });
 exports.Input = Input;

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","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAQO,IAAMA,KAAK,gBAAG,uBAInB,gBAQEC,GARF,EASK;AAAA,4BAPDC,SAOC;AAAA,MAPDA,SAOC,+BAPW,EAOX;AAAA,uBANDC,IAMC;AAAA,MANDA,IAMC,0BANM,MAMN;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,KAKV;AAAA,uBAJDC,IAIC;AAAA,MAJDA,IAIC,0BAJM,SAIN;AAAA,MAHEC,IAGF;;AACH,sBACE,6BAAC,mBAAD;AACE,IAAA,GAAG,EAAEL,GADP;AAEE,IAAA,IAAI,EAAEE,IAFR;AAGE,IAAA,QAAQ,EAAEC,QAHZ;AAIE,IAAA,SAAS,EAAE,yBAAW,SAAX,EAAsBF,SAAtB,CAJb;AAKE,IAAA,KAAK,EAAEG;AALT,KAMMC,IANN,EADF;AAUD,CAxBkB,CAAd;;AA2BPN,KAAK,CAACO,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}\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      ...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        {...rest}\n      />\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"file":"Input.js"}
+{"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"}

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

@@ -20,7 +20,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledInput = _styledComponents.default.input.withConfig({
   displayName: "Styles__StyledInput",
   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{", "}"], {
+})(["", " ", " ", " ", " ", " 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"
 }, {
   "color": "var(--color-theme-900)"
@@ -39,18 +39,20 @@ var StyledInput = _styledComponents.default.input.withConfig({
     "fontSize": "1rem"
   });
 }, function (props) {
-  return props.disabled ? (0, _styledComponents.css)(["", ""], {
+  return props.disabled && (0, _styledComponents.css)(["", ""], {
     "cursor": "not-allowed",
     "opacity": "0.5"
-  }) : (0, _styledComponents.css)(["&:hover{", "}&:active{", "}&:focus{", "}"], {
-    "borderColor": "var(--color-primary)"
-  }, {
-    "borderColor": "var(--color-primary)"
-  }, {
+  });
+}, function (props) {
+  return !props.disabled && !props.$invalid && (0, _styledComponents.css)(["&:active,&:focus,&:hover{", "}"], {
     "borderColor": "var(--color-primary)"
   });
 }, {
   "color": "var(--color-theme-transparent-500)"
+}, function (props) {
+  return !props.disabled && props.$invalid && (0, _styledComponents.css)(["", ""], {
+    "borderColor": "var(--red-alert)"
+  });
 });
 
 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,+QAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,EAOlB;AAAA;AAAA,CAPkB,EAUlB;AAAA;AAAA,CAVkB,EAmBpBC,oBAnBoB,EAoBpBC,8BApBoB,EAsBpB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,OAAhB,QACAC,qBADA,qCADA;AAAA,CAtBoB,EA6BpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,KAAN,KAAgB,KAAhB,QACAC,qBADA,yBAEM;AAAA;AAAA,GAFN,CADA;AAAA,CA7BoB,EAoCpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,QAAN,OACID,qBADJ,YAEU;AAAA;AAAA;AAAA,GAFV,QAIIA,qBAJJ,gDAMY;AAAA;AAAA,GANZ,EAUY;AAAA;AAAA,GAVZ,EAcY;AAAA;AAAA,GAdZ,CADA;AAAA,CApCoB,EAwDhB;AAAA;AAAA,CAxDgB,CAAjB;;;AA4DPP,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-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      : 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"}
+{"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"}

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

@@ -20,7 +20,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledTextarea = _styledComponents.default.textarea.withConfig({
   displayName: "Styles__StyledTextarea",
   componentId: "sc-m6jqw8-0"
-})(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;", " ", " ", " &:active,&:focus{outline:none !important;", "}&:focus{box-shadow:none;}&::placeholder{", "}", ""], {
+})(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " &::placeholder{", "}", ""], {
   "fontSize": "0.875rem"
 }, {
   "color": "var(--color-theme-900)"
@@ -33,17 +33,19 @@ var StyledTextarea = _styledComponents.default.textarea.withConfig({
 }, {
   "borderColor": "var(--color-theme-500)"
 }, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
-  return !props.disabled && (0, _styledComponents.css)(["&:hover{outline:none !important;", "}"], {
+  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{", "}"], {
     "borderColor": "var(--color-primary)"
   });
-}, {
-  "borderColor": "var(--color-primary)"
 }, {
   "color": "var(--color-theme-transparent-500)"
 }, function (props) {
-  return props.disabled && (0, _styledComponents.css)(["outline:none;", " &:hover{border-color:var(--border-primary);}"], {
-    "cursor": "not-allowed",
-    "opacity": "0.5"
+  return !props.disabled && props.$invalid && (0, _styledComponents.css)(["", ""], {
+    "borderColor": "var(--red-alert)"
   });
 });
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Textarea/Styles.ts"],"names":["StyledTextarea","styled","textarea","FontStyle","BoxSizingStyle","props","disabled","css","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAOO,IAAMA,cAAc,GAAGC,0BAAOC,QAAV;AAAA;AAAA;AAAA,mVACrB;AAAA;AAAA,CADqB,EAErB;AAAA;AAAA,CAFqB,EAGrB;AAAA;AAAA,CAHqB,EAIrB;AAAA;AAAA,CAJqB,EAKrB;AAAA;AAAA,CALqB,EAQrB;AAAA;AAAA,CARqB,EAgBvBC,oBAhBuB,EAiBvBC,8BAjBuB,EAmBvB,UAACC,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,QAAP,QACAC,qBADA,6CAIQ;AAAA;AAAA,GAJR,CADA;AAAA,CAnBuB,EA8BnB;AAAA;AAAA,CA9BmB,EAsCnB;AAAA;AAAA,CAtCmB,EAyCvB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,sEAGM;AAAA;AAAA;AAAA,GAHN,CADA;AAAA,CAzCuB,CAApB;;;AAqDPP,cAAc,CAACQ,WAAf,GAA6B,gBAA7B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport tw from \"twin.macro\";\n\ninterface StyledTextareaProps {\n  disabled: boolean;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\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: auto;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\n  min-height: 90px;\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    !props.disabled &&\n    css`\n      &:hover {\n        outline: none !important;\n        ${tw`tw-border-primary`}\n      }\n    `}\n\n  &:active, &:focus {\n    outline: none !important;\n    ${tw`tw-border-primary`}\n  }\n\n  &:focus {\n    box-shadow: none;\n  }\n\n  &::placeholder {\n    ${tw`tw-text-theme-transparent-500`}\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      outline: none;\n      ${tw`tw-cursor-not-allowed tw-opacity-50`}\n\n      &:hover {\n        border-color: var(--border-primary);\n      }\n    `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Textarea/Styles.ts"],"names":["StyledTextarea","styled","textarea","FontStyle","BoxSizingStyle","props","disabled","css","$invalid","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAQO,IAAMA,cAAc,GAAGC,0BAAOC,QAAV;AAAA;AAAA;AAAA,8RACrB;AAAA;AAAA,CADqB,EAErB;AAAA;AAAA,CAFqB,EAGrB;AAAA;AAAA,CAHqB,EAIrB;AAAA;AAAA,CAJqB,EAKrB;AAAA;AAAA,CALqB,EAQrB;AAAA;AAAA,CARqB,EAiBvBC,oBAjBuB,EAkBvBC,8BAlBuB,EAoBvB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,QAAN,QACAC,qBADA,YAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CApBuB,EA0BvB,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,QAAP,IACA,CAACD,KAAK,CAACG,QADP,QAEAD,qBAFA,sCAMQ;AAAA;AAAA,GANR,CADA;AAAA,CA1BuB,EAsCnB;AAAA;AAAA,CAtCmB,EAyCvB,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACC,QAAP,IACAD,KAAK,CAACG,QADN,QAEAD,qBAFA,YAGM;AAAA;AAAA,GAHN,CADA;AAAA,CAzCuB,CAApB;;;AAiDPP,cAAc,CAACS,WAAf,GAA6B,gBAA7B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport tw from \"twin.macro\";\n\ninterface StyledTextareaProps {\n  disabled: boolean;\n  $invalid: boolean;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\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: auto;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\n  min-height: 90px;\n  outline: none;\n  ${FontStyle}\n  ${BoxSizingStyle}\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\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"file":"Styles.js"}

package/dist/cjs/components/Textarea/Textarea.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Styles = require("./Styles");
 
-var _excluded = ["className", "disabled"];
+var _excluded = ["className", "disabled", "invalid"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,9 +31,12 @@ var Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var className = _ref.className,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$invalid = _ref.invalid,
+      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledTextarea, _extends({}, rest, {
+    $invalid: invalid,
     ref: ref,
     disabled: disabled,
     className: (0, _classnames.default)("c-textarea", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":["Textarea","ref","className","disabled","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEO,IAAMA,QAAQ,gBAAG,uBACtB,gBAMEC,GANF,EAOK;AAAA,MALDC,SAKC,QALDA,SAKC;AAAA,2BAJDC,QAIC;AAAA,MAJDA,QAIC,8BAJU,KAIV;AAAA,MAHEC,IAGF;;AACH,sBACE,6BAAC,sBAAD,eACMA,IADN;AAEE,IAAA,GAAG,EAAEH,GAFP;AAGE,IAAA,QAAQ,EAAEE,QAHZ;AAIE,IAAA,SAAS,EAAE,yBACT,YADS,EAET;AAAE,8BAAwBA;AAA1B,KAFS,EAGTD,SAHS;AAJb,KADF;AAYD,CArBqB,CAAjB;;AAwBPF,QAAQ,CAACK,WAAT,GAAuB,UAAvB","sourcesContent":["import React, { TextareaHTMLAttributes, forwardRef, Ref } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledTextarea } from \"./Styles\";\n\nexport const Textarea = forwardRef(\n  (\n    {\n      className,\n      disabled = false,\n      ...rest\n    }: TextareaHTMLAttributes<HTMLTextAreaElement>,\n    ref: Ref<HTMLTextAreaElement> | null | undefined\n  ) => {\n    return (\n      <StyledTextarea\n        {...rest}\n        ref={ref}\n        disabled={disabled}\n        className={classnames(\n          \"c-textarea\",\n          { \"c-textarea__disabled\": disabled },\n          className\n        )}\n      />\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\n"],"file":"Textarea.js"}
+{"version":3,"sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":["Textarea","ref","className","disabled","invalid","rest","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;AAMO,IAAMA,QAAQ,gBAAG,uBACtB,gBAQEC,GARF,EASK;AAAA,MAPDC,SAOC,QAPDA,SAOC;AAAA,2BANDC,QAMC;AAAA,MANDA,QAMC,8BANU,KAMV;AAAA,0BALDC,OAKC;AAAA,MALDA,OAKC,6BALS,KAKT;AAAA,MAJEC,IAIF;;AACH,sBACE,6BAAC,sBAAD,eACMA,IADN;AAEE,IAAA,QAAQ,EAAED,OAFZ;AAGE,IAAA,GAAG,EAAEH,GAHP;AAIE,IAAA,QAAQ,EAAEE,QAJZ;AAKE,IAAA,SAAS,EAAE,yBACT,YADS,EAET;AAAE,8BAAwBA;AAA1B,KAFS,EAGTD,SAHS;AALb,KADF;AAaD,CAxBqB,CAAjB;;AA2BPF,QAAQ,CAACM,WAAT,GAAuB,UAAvB","sourcesContent":["import React, { forwardRef, Ref } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledTextarea } from \"./Styles\";\n\nexport interface TextareaProps {\n  invalid?: boolean;\n}\n\nexport const Textarea = forwardRef(\n  (\n    {\n      className,\n      disabled = false,\n      invalid = false,\n      ...rest\n    }: TextareaProps &\n      Omit<React.ComponentPropsWithoutRef<\"textarea\">, keyof TextareaProps>,\n    ref: Ref<HTMLTextAreaElement> | null | undefined\n  ) => {\n    return (\n      <StyledTextarea\n        {...rest}\n        $invalid={invalid}\n        ref={ref}\n        disabled={disabled}\n        className={classnames(\n          \"c-textarea\",\n          { \"c-textarea__disabled\": disabled },\n          className\n        )}\n      />\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\n"],"file":"Textarea.js"}

package/dist/cjs/helpers/Portal/Portal.js

@@ -5,15 +5,42 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Portal = void 0;
 
+var _react = require("react");
+
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var getContainer = function getContainer(container) {
+  return typeof container === "function" ? container() : container;
+};
+
 var Portal = function Portal(_ref) {
   var children = _ref.children,
-      _ref$root = _ref.root,
-      root = _ref$root === void 0 ? document.body : _ref$root;
-  return document.body.contains(root) || root === document.body ? /*#__PURE__*/_reactDom.default.createPortal(children, root) : null;
+      _ref$container = _ref.container,
+      container = _ref$container === void 0 ? document.body : _ref$container;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      mountNode = _useState2[0],
+      setMountNode = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setMountNode(getContainer(container));
+  }, [container]);
+  return mountNode ? /*#__PURE__*/_reactDom.default.createPortal(children, mountNode) : mountNode;
 };
 
 exports.Portal = Portal;

package/dist/cjs/helpers/Portal/Portal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/helpers/Portal/Portal.tsx"],"names":["Portal","children","root","document","body","contains","ReactDOM","createPortal","displayName"],"mappings":";;;;;;;AACA;;;;AAMO,IAAMA,MAAmB,GAAG,SAAtBA,MAAsB,OAAwC;AAAA,MAArCC,QAAqC,QAArCA,QAAqC;AAAA,uBAA3BC,IAA2B;AAAA,MAA3BA,IAA2B,0BAApBC,QAAQ,CAACC,IAAW;AACzE,SAAOD,QAAQ,CAACC,IAAT,CAAcC,QAAd,CAAuBH,IAAvB,KAAgCA,IAAI,KAAKC,QAAQ,CAACC,IAAlD,gBACHE,kBAASC,YAAT,CAAsBN,QAAtB,EAAgCC,IAAhC,CADG,GAEH,IAFJ;AAGD,CAJM;;;AAMPF,MAAM,CAACQ,WAAP,GAAqB,QAArB","sourcesContent":["import { FC } from \"react\";\nimport ReactDOM from \"react-dom\";\n\ninterface IPortal {\n  root?: HTMLElement;\n}\n\nexport const Portal: FC<IPortal> = ({ children, root = document.body }) => {\n  return document.body.contains(root) || root === document.body\n    ? ReactDOM.createPortal(children, root)\n    : null;\n};\n\nPortal.displayName = \"Portal\";\n"],"file":"Portal.js"}
+{"version":3,"sources":["../../../../src/helpers/Portal/Portal.tsx"],"names":["getContainer","container","Portal","children","document","body","mountNode","setMountNode","ReactDOM","createPortal","displayName"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;;;;;;;;;AAQA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAACC,SAAD,EAA0B;AAC7C,SAAO,OAAOA,SAAP,KAAqB,UAArB,GAAkCA,SAAS,EAA3C,GAAgDA,SAAvD;AACD,CAFD;;AAIO,IAAMC,MAAmB,GAAG,SAAtBA,MAAsB,OAG7B;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,4BADJF,SACI;AAAA,MADJA,SACI,+BADQG,QAAQ,CAACC,IACjB;;AACJ,kBAAkC,qBAA6B,IAA7B,CAAlC;AAAA;AAAA,MAAOC,SAAP;AAAA,MAAkBC,YAAlB;;AAEA,wBAAU,YAAM;AACdA,IAAAA,YAAY,CAACP,YAAY,CAACC,SAAD,CAAb,CAAZ;AACD,GAFD,EAEG,CAACA,SAAD,CAFH;AAIA,SAAOK,SAAS,gBAAGE,kBAASC,YAAT,CAAsBN,QAAtB,EAAgCG,SAAhC,CAAH,GAAgDA,SAAhE;AACD,CAXM;;;AAaPJ,MAAM,CAACQ,WAAP,GAAqB,QAArB","sourcesContent":["import { FC, useEffect, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\n\ntype ContainerFunc = () => HTMLElement;\ntype Container = HTMLElement | ContainerFunc;\ninterface IPortal {\n  container?: Container;\n}\n\nconst getContainer = (container: Container) => {\n  return typeof container === \"function\" ? container() : container;\n};\n\nexport const Portal: FC<IPortal> = ({\n  children,\n  container = document.body,\n}) => {\n  const [mountNode, setMountNode] = useState<HTMLElement | null>(null);\n\n  useEffect(() => {\n    setMountNode(getContainer(container));\n  }, [container]);\n\n  return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode;\n};\n\nPortal.displayName = \"Portal\";\n"],"file":"Portal.js"}

package/dist/cjs/utils/index.js

@@ -3,11 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  useForkRef: true
+};
+Object.defineProperty(exports, "useForkRef", {
+  enumerable: true,
+  get: function get() {
+    return _useForkRef.default;
+  }
+});
 
 var _layers = require("./layers");
 
 Object.keys(_layers).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _layers[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -16,4 +26,8 @@ Object.keys(_layers).forEach(function (key) {
     }
   });
 });
+
+var _useForkRef = _interopRequireDefault(require("./useForkRef"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/dist/cjs/utils/index.js.map

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

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

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-export declare const StyledAutoResizeTextarea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>, any, {}, never>;
+export declare const StyledAutoResizeTextarea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Textarea").TextareaProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "key" | keyof import("react").TextareaHTMLAttributes<HTMLTextAreaElement>>, "invalid"> & import("react").RefAttributes<HTMLTextAreaElement>>, any, {}, never>;
 //# sourceMappingURL=Styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AutoResizeTextarea/Styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,wBAAwB,0NAIpC,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/AutoResizeTextarea/Styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,wBAAwB,0ZAIpC,CAAC"}

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

@@ -9,6 +9,7 @@ export interface IComboBoxProps {
     placeholder?: string;
     disabled?: boolean;
     size?: InputSize;
+    invalid?: boolean;
 }
-export declare const ComboBox: FC<IComboBoxProps & IAutocompleteProps>;
+export declare const ComboBox: FC<IComboBoxProps & Omit<IAutocompleteProps, keyof IComboBoxProps>>;
 //# 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;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,CAuM5D,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;IAEjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CACvB,cAAc,GAAG,IAAI,CAAC,kBAAkB,EAAE,MAAM,cAAc,CAAC,CA0MhE,CAAC"}

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size"];
+var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid"];
 import React, { useCallback, useState, useEffect, useRef, useMemo } from "react";
 import { RadioButton } from "../RadioButton";
 import { Autocomplete } from "../Autocomplete";
@@ -27,6 +27,8 @@ export var ComboBox = function ComboBox(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "regular" : _ref$size,
+      _ref$invalid = _ref.invalid,
+      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
       prop = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var selectedName = useMemo(function () {
@@ -150,7 +152,8 @@ export var ComboBox = function ComboBox(_ref) {
     onChange: handleOnChange,
     placeholder: placeholder,
     disabled: disabled,
-    size: size
+    size: size,
+    invalid: invalid
   }), !disabled ? /*#__PURE__*/React.createElement(StyledComboBoxControls, null, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, null) : selected ? /*#__PURE__*/React.createElement(Button, {
     onMouseDown: handleMouseDown,
     onClick: handleDeselect,

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","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    <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      {!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":["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","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"}

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

@@ -10,7 +10,7 @@ export declare const StyledComboBoxCloseSmallIcon: import("styled-components").S
 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;
 }, never>;
-export declare const StyledComboBoxInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Input/Input").InputProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "size"> & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
+export declare const StyledComboBoxInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Input/Input").InputProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, keyof import("../Input/Input").InputProps> & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;
 export declare const StyledComboBoxList: import("styled-components").StyledComponent<"div", any, {
     $width?: number | undefined;
 }, never>;

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":";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"}
+{"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,waAS/B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;SAQ9B,CAAC"}

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

@@ -2,6 +2,7 @@ import React from "react";
 export declare type InputSize = "small" | "regular" | "big";
 export interface InputProps {
     size?: InputSize;
+    invalid?: boolean;
 }
-export declare const Input: React.ForwardRefExoticComponent<InputProps & Omit<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "size"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & Omit<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, keyof InputProps> & React.RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,oBAAY,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,CAAC;AACpD,MAAM,WAAW,UAAU;IAEzB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,KAAK,6PAyBjB,CAAC"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,oBAAY,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,CAAC;AACpD,MAAM,WAAW,UAAU;IAEzB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,uQA2BjB,CAAC"}

package/dist/esm/components/Input/Input.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["className", "type", "disabled", "size"];
+var _excluded = ["className", "type", "disabled", "size", "invalid"];
 import React, { forwardRef } from "react";
 import classnames from "classnames";
 import { StyledInput } from "./Styles";
@@ -13,6 +13,8 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "regular" : _ref$size,
+      _ref$invalid = _ref.invalid,
+      invalid = _ref$invalid === void 0 ? false : _ref$invalid,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(StyledInput, _extends({
@@ -20,7 +22,8 @@ export var Input = /*#__PURE__*/forwardRef(function (_ref, ref) {
     type: type,
     disabled: disabled,
     className: classnames("c-input", className),
-    $size: size
+    $size: size,
+    $invalid: invalid
   }, rest));
 });
 Input.displayName = "Input";