colibri-ui 0.7.153 → 0.7.154

package/Checkbox/Checkbox.module.css

@@ -3,10 +3,6 @@
   flex-direction: column;
 }
 
-.wrapper {
-  display: flex;
-}
-
 .label {
   cursor: pointer;
   display: inline-flex;

package/Checkbox/index.js

@@ -15,7 +15,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
 var Checkbox = function Checkbox(_a) {
-  var _b, _c;
+  var _b;
   var id = _a.id,
     name = _a.name,
     value = _a.value,
@@ -25,20 +25,18 @@ var Checkbox = function Checkbox(_a) {
     onChange = _a.onChange,
     onFocus = _a.onFocus,
     onBlur = _a.onBlur,
-    _d = _a.variant,
-    variant = _d === void 0 ? "primary" : _d,
+    _c = _a.variant,
+    variant = _c === void 0 ? "primary" : _c,
     className = _a.className,
     disabled = _a.disabled,
-    isError = _a.isError;
-  var control =
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/label-has-associated-control
-  React__default.default.createElement("label", {
-    className: clx(styles__default.default.label)
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.wrapper)
+    hasError = _a.hasError;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.root)
+  }, /*#__PURE__*/React__default.default.createElement("label", {
+    className: clx(styles__default.default.label),
+    htmlFor: id
   }, /*#__PURE__*/React__default.default.createElement("input", {
-    className: clx(styles__default.default.control, (_b = {}, _b["control_variant_".concat(variant)] = !!variant, _b), className),
+    className: clx(styles__default.default.control, styles__default.default["control_variant_".concat(variant)], className),
     type: "checkbox",
     id: id,
     name: name,
@@ -49,14 +47,11 @@ var Checkbox = function Checkbox(_a) {
     onBlur: onBlur,
     disabled: disabled
   }), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(styles__default.default["fake-checkbox"], (_c = {}, _c["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _c["variant_".concat(variant, "_error")] = isError ? 1 : 0, _c["variant_".concat(variant, "_checked")] = checked ? 1 : 0, _c.checked = checked ? 1 : 0, _c["variant_".concat(variant)] = !!variant, _c))
+    className: clx(styles__default.default["fake-checkbox"], styles__default.default["variant_".concat(variant)], (_b = {}, _b[styles__default.default["variant_".concat(variant, "_disabled")]] = disabled, _b[styles__default.default["variant_".concat(variant, "_error")]] = hasError, _b[styles__default.default["variant_".concat(variant, "_checked")]] = checked, _b[styles__default.default.checked] = checked, _b))
   }), /*#__PURE__*/React__default.default.createElement("span", {
     className: clx(styles__default.default.text)
-  }, label)));
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.root)
-  }, control, hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
-    variant: isError ? "alert" : "secondary",
+  }, label)), hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
+    variant: hasError ? "alert" : "secondary",
     tag: "span"
   }, hint)));
 };

package/Checkbox/index.props.d.ts

@@ -1,17 +1,17 @@
-import type { ReactNode } from "react";
+import type { FocusEvent, ChangeEvent, ReactNode } from "react";
 export interface CheckboxProps {
-    variant?: "primary";
-    size?: "s" | "m" | "l";
-    id?: string;
-    name?: string;
-    value?: string | number;
-    label?: ReactNode;
-    hint?: ReactNode;
     checked?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     className?: string;
     disabled?: boolean;
-    isError?: boolean;
+    hasError?: boolean;
+    hint?: ReactNode;
+    id?: string;
+    label?: ReactNode;
+    name?: string;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    size?: "s" | "m" | "l";
+    value?: string | number;
+    variant?: "primary";
 }

package/Input/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { InputProps } from "./index.props";
-declare const Input: ({ className, startIcon, endIcon, label, hint, error, required, onChange, inputRef, disabled, variant, size, ref, ...props }: InputProps) => React.JSX.Element;
+declare const Input: ({ className, startIcon, endIcon, label, hint, hasError, required, onChange, inputRef, disabled, variant, size, ref, ...props }: InputProps) => React.JSX.Element;
 export default Input;

package/Input/index.js

@@ -20,7 +20,7 @@ var Input = function Input(_a) {
     endIcon = _a.endIcon,
     label = _a.label,
     hint = _a.hint,
-    error = _a.error,
+    hasError = _a.hasError,
     required = _a.required,
     onChange = _a.onChange,
     inputRef = _a.inputRef,
@@ -30,13 +30,13 @@ var Input = function Input(_a) {
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
     ref = _a.ref,
-    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "inputRef", "disabled", "variant", "size", "ref"]);
+    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "hasError", "required", "onChange", "inputRef", "disabled", "variant", "size", "ref"]);
   return /*#__PURE__*/React__default.default.createElement(index.default, {
     className: classNames__default.default(className),
     label: label,
     required: required,
     hint: hint,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.default.createElement(index$1.default, {
     ref: ref,
     startIcon: startIcon,
@@ -44,7 +44,7 @@ var Input = function Input(_a) {
     variant: variant,
     size: size,
     disabled: !!disabled,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.default.createElement(index$2.default, tslib.__assign({
     ref: inputRef,
     onChange: onChange,

package/Input/index.props.d.ts

@@ -1,16 +1,16 @@
-import type { ChangeEvent, ForwardedRef, InputHTMLAttributes, ReactNode } from "react";
+import type { ChangeEvent, ForwardedRef, InputHTMLAttributes, ReactNode, Ref } from "react";
 import type { FormFieldProps } from "../base/FormField/index.props";
 import type { Size, Variant } from "../base/InputRoot/index.props";
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children"> {
-    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
-    variant?: Variant;
-    size?: Size;
-    startIcon?: ReactNode;
     endIcon?: ReactNode;
-    label?: ReactNode;
+    hasError?: boolean;
     hint?: ReactNode;
-    error?: boolean;
-    required?: boolean;
     inputRef?: ForwardedRef<HTMLInputElement>;
-    ref?: React.Ref<HTMLInputElement>;
+    label?: ReactNode;
+    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
+    ref?: Ref<HTMLInputElement>;
+    required?: boolean;
+    size?: Size;
+    startIcon?: ReactNode;
+    variant?: Variant;
 }

package/MultiSelect/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { MultiSelectProps } from "./index.props";
-declare const MultiSelect: ({ className, groups, zIndex, fontSize, disabled, fullWidth, required, label, hint, error, size, placeholder, name, type, onChange, }: MultiSelectProps) => React.JSX.Element;
+declare const MultiSelect: React.FC<MultiSelectProps>;
 export default MultiSelect;

package/MultiSelect/index.js

@@ -23,23 +23,27 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
-var sortedItems = function sortedItems(items) {
-  return items.sort(function (a, b) {
-    if (!a || !b) return 0;
-    var matchA = a.match(/group-(\d+)-option-(\d+)/);
-    var matchB = b.match(/group-(\d+)-option-(\d+)/);
-    if (!matchA || !matchB) {
-      return 0;
-    }
-    var _a = matchA.map(Number),
-      groupA = _a[1],
-      optionA = _a[2];
-    var _b = matchB.map(Number),
-      groupB = _b[1],
-      optionB = _b[2];
+var sortItems = function sortItems(items) {
+  return tslib.__spreadArray([], items, true).sort(function (a, b) {
+    var parseKey = function parseKey(key) {
+      var _a;
+      return ((_a = key.match(/group-(\d+)-option-(\d+)/)) === null || _a === void 0 ? void 0 : _a.slice(1).map(Number)) || [];
+    };
+    var _a = parseKey(a),
+      groupA = _a[0],
+      optionA = _a[1];
+    var _b = parseKey(b),
+      groupB = _b[0],
+      optionB = _b[1];
     return groupA - groupB || optionA - optionB;
   });
 };
+var getValue = function getValue(options) {
+  return options.map(function (_a) {
+    var label = _a.label;
+    return label;
+  }).join(", ");
+};
 var MultiSelect = function MultiSelect(_a) {
   var className = _a.className,
     groups = _a.groups,
@@ -51,7 +55,7 @@ var MultiSelect = function MultiSelect(_a) {
     required = _a.required,
     label = _a.label,
     hint = _a.hint,
-    error = _a.error,
+    hasError = _a.hasError,
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
     placeholder = _a.placeholder,
@@ -69,7 +73,7 @@ var MultiSelect = function MultiSelect(_a) {
       return tslib.__assign(tslib.__assign({}, group), {
         options: group.options.map(function (option) {
           return tslib.__assign(tslib.__assign({}, option), {
-            selected: (value === null || value === void 0 ? void 0 : value.includes(index.createGroupOptionString(group.value, option.value))) || false
+            selected: value.includes(index.createGroupOptionString(group.value, option.value))
           });
         })
       });
@@ -77,35 +81,40 @@ var MultiSelect = function MultiSelect(_a) {
   }, [value, groups]);
   var handleChange = React.useCallback(function (key) {
     setValue(function (prev) {
-      var newValue = prev.indexOf(key) !== -1 ? prev.filter(function (prevValue) {
-        return prevValue !== key;
-      }) : sortedItems(tslib.__spreadArray(tslib.__spreadArray([], prev, true), [key], false));
-      if (onChange) {
-        onChange(newValue);
-      }
+      var newValue = prev.includes(key) ? prev.filter(function (v) {
+        return v !== key;
+      }) : sortItems(tslib.__spreadArray(tslib.__spreadArray([], prev, true), [key], false));
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
       return newValue;
     });
   }, [onChange]);
-  var prepraredLabel = React.useMemo(function () {
-    return preparedGroups.flatMap(function (group) {
-      return group.options.filter(function (option) {
-        return option.selected;
-      }).map(function (option) {
+  var preparedLabel = React.useMemo(function () {
+    return preparedGroups.flatMap(function (_a) {
+      var groupVal = _a.value,
+        options = _a.options;
+      return options.filter(function (_a) {
+        var selected = _a.selected;
+        return selected;
+      }).map(
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      function (_a) {
+        var label = _a.label,
+          optVal = _a.value;
         return {
-          label: option.label,
-          key: index.createGroupOptionString(group.value, option.value)
+          label: label,
+          key: index.createGroupOptionString(groupVal, optVal)
         };
       });
     });
   }, [preparedGroups]);
   return /*#__PURE__*/React__default.default.createElement(index$1.default, {
     className: clx(styles__default.default["form-field"], {
-      "full-width": fullWidth ? 1 : 0
+      "full-width": fullWidth
     }, className),
     required: required,
     label: label,
     hint: hint,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.default.createElement(index$2.default, {
     placement: "bottom-start",
     preventOverflow: true,
@@ -113,63 +122,48 @@ var MultiSelect = function MultiSelect(_a) {
     trigger: ["click"],
     zIndex: zIndex,
     fontSize: fontSize,
-    disabled: !!disabled,
+    disabled: disabled,
     overlay: /*#__PURE__*/React__default.default.createElement(index$3.default, {
       groups: preparedGroups,
       onChange: handleChange
     }),
     samewidth: true
-  }, type === "chip" ? (/*#__PURE__*/React__default.default.createElement(index$4.default, {
-    error: error,
+  }, /*#__PURE__*/React__default.default.createElement(index$4.default, {
+    hasError: hasError,
     size: size,
     className: clx(styles__default.default.root, {
-      auto: !!prepraredLabel.length
+      root_auto: preparedLabel.length
     }),
     endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
       className: clx(styles__default.default.icon, {
-        icon_isOpen: isOpen ? 1 : 0
+        icon_isOpen: isOpen
       })
     }),
-    disabled: !!disabled
+    disabled: Boolean(disabled)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["base-input"], styles__default.default["base-input-flex"])
-  }, prepraredLabel.length ? (/*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, prepraredLabel.map(function (option, index) {
+    className: clx(styles__default.default["base-input"], styles__default.default[type === "chip" ? "base-input-flex" : "base-input-text"])
+  }, preparedLabel.length ? type === "chip" ?
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  preparedLabel.map(function (_a) {
+    var label = _a.label,
+      key = _a.key;
     return /*#__PURE__*/React__default.default.createElement(index$5.default, {
+      key: key,
       size: "s",
       iconEnd: /*#__PURE__*/React__default.default.createElement(CrossFill.default, null),
       "data-ignore-click": true,
-      key: "item-".concat(index),
       onClickIcon: function onClickIcon() {
-        return handleChange(option.key);
+        return handleChange(key);
       }
-    }, option.label);
-  }))) : (/*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(styles__default.default.placeholder)
-  }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
-    type: "hidden",
-    name: name,
-    tabIndex: -1,
-    value: value || ""
-  }))) : (/*#__PURE__*/React__default.default.createElement(index$4.default, {
-    error: error,
-    size: size,
-    className: clx(styles__default.default.root),
-    endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
-      className: clx(styles__default.default.icon, {
-        icon_isOpen: isOpen ? 1 : 0
-      })
-    }),
-    disabled: !!disabled
-  }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["base-input"], styles__default.default["base-input-text"])
-  }, prepraredLabel.length ? prepraredLabel.join(", ") : (/*#__PURE__*/React__default.default.createElement("span", {
+    }, label);
+  }) : getValue(preparedLabel) : (/*#__PURE__*/React__default.default.createElement("span", {
     className: clx(styles__default.default.placeholder)
   }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
     type: "hidden",
     name: name,
     tabIndex: -1,
-    value: value || ""
-  })))));
+    value: value.join(",") || ""
+  }))));
 };
 
 exports.default = MultiSelect;

package/MultiSelect/index.module.css

@@ -2,7 +2,7 @@
   cursor: pointer;
 }
 
-.root.auto {
+.root_auto {
   height: auto;
   min-height: 36px;
 }
@@ -18,10 +18,9 @@
 .base-input {
   background: transparent;
   border: none;
-  display: inline-block;
+  display: flex;
   flex: 1;
   margin: 7px 0;
-  width: 100%;
 }
 .base-input ::placeholder {
   color: var(--palette-bg-2);

package/Select/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { SelectProps } from "./index.props";
-declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, error, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, }: SelectProps<T>) => React.JSX.Element;
+declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, }: SelectProps<T>) => React.JSX.Element;
 export default Select;

package/Select/index.js

@@ -27,7 +27,7 @@ var Select = function Select(_a) {
     fontSize = _a.fontSize,
     label = _a.label,
     hint = _a.hint,
-    error = _a.error,
+    hasError = _a.hasError,
     required = _a.required,
     placeholder = _a.placeholder,
     disabled = _a.disabled,
@@ -68,7 +68,7 @@ var Select = function Select(_a) {
     required: required,
     label: label,
     hint: hint,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.default.createElement(index$1.default, {
     placement: "bottom-start",
     preventOverflow: true,
@@ -83,7 +83,7 @@ var Select = function Select(_a) {
     }),
     samewidth: true
   }, customInputRoot ? customInputRoot : (/*#__PURE__*/React__default.default.createElement(index$3.default, {
-    error: error,
+    hasError: hasError,
     size: size,
     className: clx(styles__default.default.root),
     endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {

package/Select/index.props.d.ts

@@ -1,28 +1,28 @@
 import type { ReactNode } from "react";
 import type { FormFieldProps } from "../base/FormField/index.props";
 type Size = "s" | "m" | "l";
+export type Coordinates = {
+    height: number;
+    top: number;
+};
 export interface IOption<T extends string> {
-    value: T;
-    label: ReactNode;
     disabled?: boolean;
+    label: ReactNode;
+    value: T;
 }
 export interface SelectProps<T extends string> extends Omit<FormFieldProps, "children"> {
-    options: IOption<T>[];
-    value?: T;
-    zIndex?: number;
+    className?: string;
+    customInputRoot?: ReactNode;
+    disabled?: boolean;
     fontSize?: number;
+    fullWidth?: boolean;
+    name?: string;
     onChange: (value: T) => void;
-    disabled?: boolean;
+    options: IOption<T>[];
     placeholder?: string;
-    fullWidth?: boolean;
     required?: boolean;
     size?: Size;
-    className?: string;
-    customInputRoot?: ReactNode;
-    name?: string;
+    value?: T;
+    zIndex?: number;
 }
-export type Coordinates = {
-    top: number;
-    height: number;
-};
 export {};

package/TextArea/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ITextAreaProps } from "./index.props";
-declare const TextArea: ({ className, value, minRows, maxRows, onChange, label, required, error, hint, disabled, inputRef, ref, ...props }: ITextAreaProps) => React.JSX.Element;
+declare const TextArea: ({ className, value, minRows, maxRows, onChange, label, required, hasError, hint, disabled, inputRef, ref, ...props }: ITextAreaProps) => React.JSX.Element;
 export default TextArea;

package/TextArea/index.js

@@ -29,12 +29,12 @@ var TextArea = function TextArea(_a) {
     onChange = _a.onChange,
     label = _a.label,
     required = _a.required,
-    error = _a.error,
+    hasError = _a.hasError,
     hint = _a.hint,
     disabled = _a.disabled,
     inputRef = _a.inputRef,
     ref = _a.ref,
-    props = tslib.__rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "error", "hint", "disabled", "inputRef", "ref"]);
+    props = tslib.__rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "hasError", "hint", "disabled", "inputRef", "ref"]);
   var onChangeHandler = function onChangeHandler(event) {
     if (onChange) onChange(event.target.value, event);
   };
@@ -44,10 +44,10 @@ var TextArea = function TextArea(_a) {
     required: required,
     label: label,
     hint: hint,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.default.createElement(index$1.default, {
     disabled: !!disabled,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.default.createElement(TextareaAutosize__default.default, tslib.__assign({
     ref: inputRef,
     "data-testid": "textarea",

package/TextArea/index.props.d.ts

@@ -5,7 +5,7 @@ export interface ITextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
     value?: string;
     label?: ReactNode;
     hint?: ReactNode;
-    error?: boolean;
+    hasError?: boolean;
     required?: boolean;
     onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
     inputRef?: ForwardedRef<HTMLTextAreaElement>;

package/base/FormField/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { FormFieldProps } from "./index.props";
-declare const FormField: ({ label, hint, children, error, required, ref, className, }: FormFieldProps) => React.JSX.Element;
+declare const FormField: ({ label, hint, children, hasError, required, className, ref, }: FormFieldProps) => React.JSX.Element;
 export default FormField;

package/base/FormField/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames/bind');
+var classNames = require('classnames');
 var index = require('../../Typography/index.js');
 var styles = require('./FormField.module.css');
 
@@ -13,25 +13,23 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(styles__default.default);
 var FormField = function FormField(_a) {
+  var _b;
   var label = _a.label,
     hint = _a.hint,
     children = _a.children,
-    error = _a.error,
+    hasError = _a.hasError,
     required = _a.required,
-    ref = _a.ref,
-    className = _a.className;
+    className = _a.className,
+    ref = _a.ref;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.container, className),
+    className: classNames__default.default(styles__default.default.container, className),
     ref: ref
   }, label && (/*#__PURE__*/React__default.default.createElement(index.default, {
-    className: clx(styles__default.default.label, {
-      label_required: !!required
-    }),
+    className: classNames__default.default(styles__default.default.label, (_b = {}, _b[styles__default.default.label_required] = required, _b)),
     tag: "label"
   }, label)), children, hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
-    variant: error ? "alert" : "secondary",
+    variant: hasError ? "alert" : "secondary",
     tag: "span"
   }, hint)));
 };

package/base/FormField/index.props.d.ts

@@ -1,10 +1,10 @@
 import type { ReactNode } from "react";
 import type { PropsWithChildren } from "react";
 export type FormFieldProps = PropsWithChildren<{
-    label?: ReactNode;
-    hint?: ReactNode;
-    error?: boolean;
-    required?: boolean;
     className?: string;
+    hasError?: boolean;
+    hint?: ReactNode;
+    label?: ReactNode;
     ref?: React.Ref<HTMLDivElement>;
+    required?: boolean;
 }>;

package/base/InputRoot/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { InputProps } from "./index.props";
-declare const InputRoot: ({ className, startIcon, endIcon, children, variant, disabled, error, style, size, ref, }: InputProps) => React.JSX.Element;
+declare const InputRoot: ({ className, startIcon, endIcon, children, variant, disabled, hasError, style, size, ref, }: InputProps) => React.JSX.Element;
 export default InputRoot;

package/base/InputRoot/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames/bind');
+var classNames = require('classnames');
 var styles = require('./InputRoot.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,7 +12,6 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(styles__default.default);
 var InputRoot = function InputRoot(_a) {
   var _b;
   var className = _a.className,
@@ -22,20 +21,20 @@ var InputRoot = function InputRoot(_a) {
     _c = _a.variant,
     variant = _c === void 0 ? "primary" : _c,
     disabled = _a.disabled,
-    error = _a.error,
+    hasError = _a.hasError,
     style = _a.style,
     size = _a.size,
     ref = _a.ref;
   return /*#__PURE__*/React__default.default.createElement("div", {
     ref: ref,
     style: style,
-    className: clx(styles__default.default.root, (_b = {}, _b["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _b["variant_".concat(variant, "_error")] = error ? 1 : 0, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className)
+    className: classNames__default.default(styles__default.default.root, styles__default.default["variant_".concat(variant)], size && styles__default.default["size_".concat(size)], (_b = {}, _b[styles__default.default["variant_".concat(variant, "_disabled")]] = disabled, _b[styles__default.default["variant_".concat(variant, "_error")]] = hasError, _b), className)
   }, startIcon && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["base-icon"])
+    className: styles__default.default["base-icon"]
   }, startIcon), children, endIcon && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["base-icon"])
+    className: styles__default.default["base-icon"]
   }, endIcon), disabled && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["base-disable-wrapper"])
+    className: styles__default.default["base-disable-wrapper"]
   }));
 };
 

package/base/InputRoot/index.props.d.ts

@@ -5,7 +5,7 @@ export type Variant = "primary";
 export type InputProps = PropsWithChildren<{
     variant?: Variant;
     disabled: boolean;
-    error?: boolean;
+    hasError?: boolean;
     className?: string;
     startIcon?: ReactNode;
     endIcon?: ReactNode;