colibri-ui 0.7.152 → 0.7.154

package/Calendar/index.js

@@ -74,16 +74,20 @@ var Calendar = function Calendar(_a) {
     var _a;
     setContentWidth(((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
   }, []);
-  var showPrevMonth = React.useCallback(function () {
+  var showPrevMonth = function showPrevMonth(event) {
+    event.preventDefault();
+    event.stopPropagation();
     setCurrentMonthOffset(function (prev) {
       return prev - 1;
     });
-  }, []);
-  var showNextMonth = React.useCallback(function () {
+  };
+  var showNextMonth = function showNextMonth(event) {
+    event.preventDefault();
+    event.stopPropagation();
     setCurrentMonthOffset(function (prev) {
       return prev + 1;
     });
-  }, []);
+  };
   var selectDate = React.useCallback(function (date, period, rangeCompleted) {
     setSelectedDate(date);
     setSelectedPeriod(period);

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/Datepicker/components/DatePicker/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { DatePickerProps } from "./index.props";
-declare const DatePicker: ({ className, selectedDate, onChangeDate, }: DatePickerProps) => React.JSX.Element;
+declare const DatePicker: React.FC<DatePickerProps>;
 export default DatePicker;

package/Datepicker/components/DatePicker/index.js

@@ -16,6 +16,20 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
+var CalendarIcon = function CalendarIcon() {
+  return /*#__PURE__*/React__default.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    className: clx("calendar-icon"),
+    strokeWidth: 1.5,
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__default.default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
+  }));
+};
 var DatePicker = function DatePicker(_a) {
   var className = _a.className,
     _b = _a.selectedDate,
@@ -24,29 +38,28 @@ var DatePicker = function DatePicker(_a) {
   var _c = React.useState(selectedDate),
     date = _c[0],
     setDate = _c[1];
-  var handleDateChange = function handleDateChange(payload) {
-    var newDate = payload.date;
-    setDate(newDate);
-    onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(newDate);
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  var handleDateChange = function handleDateChange(_a) {
+    var date = _a.date;
+    setDate(date);
+    onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(date);
   };
   return /*#__PURE__*/React__default.default.createElement(index.default, {
     placement: "bottom",
-    preventAutoClose: true,
-    preventOverflow: true,
     fontSize: 14,
     trigger: ["click"],
     overlay: /*#__PURE__*/React__default.default.createElement(index$1.default, {
       minWidth: 260,
-      className: styles__default.default.calendar,
+      className: clx("calendar", className),
       today: index$2.toISODate(new Date()),
       titleSize: "h5",
       selectedDate: date,
       onChange: handleDateChange
     })
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["input-container"], styles__default.default["input-date"], className)
+    className: clx("input-container", "input-date", className)
   }, /*#__PURE__*/React__default.default.createElement("input", {
-    className: clx(styles__default.default["input-field"]),
+    className: clx("input-field"),
     tabIndex: 0,
     "aria-expanded": "false",
     "aria-haspopup": "true",
@@ -55,7 +68,7 @@ var DatePicker = function DatePicker(_a) {
     maxLength: 7,
     readOnly: true,
     value: index$2.toDMYDate(date)
-  })));
+  }), /*#__PURE__*/React__default.default.createElement(CalendarIcon, null)));
 };
 
 exports.default = DatePicker;

package/Datepicker/components/DatePicker/index.module.css

@@ -1,49 +1,56 @@
 .input-container {
-  align-items: center;
-  border-bottom: 1px solid var(--palette-bg-3);
-  border-bottom-right-radius: 0.375rem;
-  border-right: 1px solid var(--palette-bg-3);
-  border-top: 1px solid var(--palette-bg-3);
-  border-top-right-radius: 0.375rem;
-  box-sizing: border-box;
   display: flex;
-  height: 36px;
+  align-items: center;
   justify-content: center;
+  height: 36px;
+  box-sizing: border-box;
+  border: 1px solid var(--palette-bg-3);
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  border-left: none;
 }
 
 .input-field {
-  background: transparent;
-  border: none;
-  box-sizing: border-box;
-  font-size: 1em;
+  width: 100%;
   height: 100%;
-  outline: none;
   padding: 4px;
   text-align: center;
-  width: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
 }
 
 .input-date {
+  cursor: pointer;
   flex: 3;
   position: relative;
+  border-top: 1px solid var(--palette-bg-3);
+  border-right: 1px solid var(--palette-bg-3);
+  border-bottom: 1px solid var(--palette-bg-3);
 }
 
 .input-date:focus-within {
-  border-bottom: 1px solid var(--palette-primary-3);
-  border-right: 1px solid var(--palette-primary-3);
-  border-top: 1px solid var(--palette-primary-3);
+  border-color: var(--palette-primary-3);
   box-shadow: 0 0 0 2px var(--palette-primary-2);
 }
 
 .input-date:focus-within::before {
-  background-color: var(--palette-primary-3);
   content: "";
-  height: 100%;
-  left: 0;
   position: absolute;
+  left: 0;
   width: 1px;
+  height: 100%;
+  background-color: var(--palette-primary-3);
 }
 
 .calendar {
   max-width: 250px;
+}
+
+.calendar-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  cursor: pointer;
 }

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;