colibri-ui 0.8.53 → 0.8.54

package/Button/index.js

@@ -5,17 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var tslib = require('tslib');
 var React = require('react');
-var classNames = require('classnames/bind');
+var clsx = require('clsx');
 var styles = require('./Button.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(styles__default.default);
 var Button = function Button(_a) {
   var className = _a.className,
     _a$fullWidth = _a.fullWidth,
@@ -35,22 +34,19 @@ var Button = function Button(_a) {
   return /*#__PURE__*/React__default.default.createElement("button", Object.assign({
     onClick: onClick,
     ref: ref,
-    className: clx("root", _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({
-      root_icon: !!icon,
-      root_fullWidth: !!fullWidth
-    }, "size_".concat(size), !!size), "variant_".concat(variant), !!variant), "variant_".concat(variant, "_disabled"), !!disabled), className),
+    className: clsx__default.default(styles__default.default.root, _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default['root_icon'], Boolean(icon)), styles__default.default['root_fullWidth'], Boolean(fullWidth)), styles__default.default["size_".concat(size)], Boolean(size)), styles__default.default["variant_".concat(variant)], Boolean(variant)), styles__default.default["variant_".concat(variant, "_disabled")], Boolean(disabled)), className),
     disabled: disabled,
     "data-testid": "button",
     type: type || "button",
     role: "button"
   }, props), icon && /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(styles__default.default.icon)
+    className: styles__default.default.icon
   }, icon), iconStart && /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(styles__default.default.icon)
+    className: styles__default.default.icon
   }, iconStart), children && /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(styles__default.default.text)
+    className: styles__default.default.text
   }, children), iconEnd && /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(styles__default.default.icon)
+    className: styles__default.default.icon
   }, iconEnd));
 };
 

package/Calendar/index.js

@@ -243,7 +243,7 @@ var Calendar = function Calendar(_ref) {
     ref: $root
   }, /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, state.contentWidth ? (/*#__PURE__*/React__default.default.createElement("div", {
     "data-component": "Months",
-    className: clx(styles__default.default.months),
+    className: styles__default.default.months,
     style: {
       transform: "translate3D(".concat(-1 * state.currentMonthOffset * state.contentWidth, "px, 0, 0)")
     }
@@ -272,7 +272,7 @@ var Calendar = function Calendar(_ref) {
     role: "button",
     "aria-label": "Prev"
   }, /*#__PURE__*/React__default.default.createElement(ArrowNext.default, {
-    className: clx(styles__default.default["month-control-prev-arrow"])
+    className: styles__default.default["month-control-prev-arrow"]
   })), /*#__PURE__*/React__default.default.createElement("button", {
     className: clx(styles__default.default["month-control"], styles__default.default["month-control-next"]),
     onClick: showNextMonth,
@@ -281,7 +281,7 @@ var Calendar = function Calendar(_ref) {
     role: "button",
     "aria-label": "Next"
   }, /*#__PURE__*/React__default.default.createElement(ArrowNext.default, {
-    className: clx(styles__default.default["month-control-next-arrow"])
+    className: styles__default.default["month-control-next-arrow"]
   }))), datePresets && (/*#__PURE__*/React__default.default.createElement(index$2.Presets, {
     presets: datePresets,
     onPresetSelect: handlePresetSelect

package/Counter/index.js

@@ -2,8 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var classNames = require('classnames/bind');
+var clsx = require('clsx');
 var index = require('../Button/index.js');
 var Minus = require('../Icons/Minus.js');
 var Plus = require('../Icons/Plus.js');
@@ -11,11 +12,11 @@ var styles = require('./Counter.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(styles__default.default);
 var Counter = function Counter(_ref) {
   var _ref$value = _ref.value,
     value = _ref$value === void 0 ? 1 : _ref$value,
@@ -35,13 +36,9 @@ var Counter = function Counter(_ref) {
     onChange(newValue);
   };
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.root, {
-      root_fullWidth: fullWidth ? 1 : 0
-    }, className)
+    className: clsx__default.default(styles__default.default.root, _defineProperty__default.default({}, styles__default.default['root_fullWidth'], Boolean(fullWidth)), className)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.control, {
-      control_fullWidth: fullWidth ? 1 : 0
-    })
+    className: clsx__default.default(styles__default.default.control, _defineProperty__default.default({}, styles__default.default['control_fullWidth'], Boolean(fullWidth)))
   }, /*#__PURE__*/React__default.default.createElement(index.default, {
     icon: /*#__PURE__*/React__default.default.createElement(Minus.default, {
       width: 16,
@@ -55,7 +52,7 @@ var Counter = function Counter(_ref) {
     },
     "aria-label": "decrease"
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.value)
+    className: styles__default.default.value
   }, value), /*#__PURE__*/React__default.default.createElement(index.default, {
     icon: /*#__PURE__*/React__default.default.createElement(Plus.default, {
       width: 16,

package/Dropdown/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
-var classNames = require('classnames/bind');
+var clsx = require('clsx');
 var react = require('@floating-ui/react');
 var index = require('../ClickOutside/index.js');
 var styles = require('./Dropdown.module.css');
@@ -15,10 +15,9 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
 var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(styles__default.default);
 var Dropdown = function Dropdown(_ref) {
   var children = _ref.children,
     zIndex = _ref.zIndex,
@@ -104,7 +103,7 @@ var Dropdown = function Dropdown(_ref) {
   }, /*#__PURE__*/React__default.default.createElement("div", Object.assign({
     ref: refs.setFloating,
     "data-testid": "popper-container",
-    className: clx("popper-container", "placement-".concat(finalPlacement)),
+    className: clsx__default.default(styles__default.default["popper-container"], styles__default.default["placement-".concat(finalPlacement)]),
     style: Object.assign(Object.assign({}, floatingStyles), {
       zIndex: zIndex,
       minWidth: samewidth ? "".concat((_a = refs.reference.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, "px") : undefined,
@@ -113,7 +112,7 @@ var Dropdown = function Dropdown(_ref) {
     tabIndex: 0
   }, getFloatingProps()), /*#__PURE__*/React__default.default.createElement("div", {
     "data-testid": "overlay-container",
-    className: clx("overlay-container"),
+    className: styles__default.default['overlay-container'],
     onClick: onClickOverlay
   }, overlay))))));
 };

package/MultiSelect/index.js

@@ -2,10 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
-var classNames = require('classnames/bind');
+var clsx = require('clsx');
 var index$2 = require('../Dropdown/index.js');
 var index$4 = require('../base/InputRoot/index.js');
 var index$1 = require('../base/FormField/index.js');
@@ -19,13 +20,13 @@ var CrossFill = require('../Icons/CrossFill.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
 var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(styles__default.default);
 var getValue = function getValue(options) {
   return options.map(function (_ref) {
     var label = _ref.label;
@@ -109,9 +110,7 @@ var MultiSelect = function MultiSelect(_ref2) {
     });
   }, [preparedGroups]);
   return /*#__PURE__*/React__default.default.createElement(index$1.default, {
-    className: clx(styles__default.default["form-field"], {
-      "full-width": fullWidth
-    }, className),
+    className: clsx__default.default(styles__default.default["form-field"], _defineProperty__default.default({}, styles__default.default["full-width"], Boolean(fullWidth)), className),
     required: required,
     label: label,
     hint: hint,
@@ -133,23 +132,21 @@ var MultiSelect = function MultiSelect(_ref2) {
     tabIndex: 0,
     role: "button",
     style: {
-      width: 'fit-content'
+      width: fullWidth ? '100%' : 'fit-content'
     }
   }, /*#__PURE__*/React__default.default.createElement(index$4.default, {
     hasError: hasError,
     size: size,
-    style: style,
-    className: clx("root", {
-      root_auto: preparedLabel.length
+    style: Object.assign(Object.assign({}, style), {
+      width: fullWidth ? '100%' : ''
     }),
+    className: clsx__default.default(styles__default.default.root, _defineProperty__default.default({}, styles__default.default['root_auto'], preparedLabel.length)),
     endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
-      className: clx("icon", {
-        icon_isOpen: isOpen && Boolean(!disabled)
-      })
+      className: clsx__default.default(styles__default.default.icon, _defineProperty__default.default({}, styles__default.default['icon_isOpen'], isOpen && Boolean(!disabled)))
     }),
     disabled: Boolean(disabled)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["base-input"], styles__default.default[type === "chip" ? "base-input-flex" : "base-input-text"])
+    className: clsx__default.default(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 (_ref6) {
@@ -165,7 +162,7 @@ var MultiSelect = function MultiSelect(_ref2) {
       }
     }, label);
   }) : getValue(preparedLabel) : (/*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(styles__default.default.placeholder)
+    className: styles__default.default.placeholder
   }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
     type: "hidden",
     name: name,

package/Select/index.js

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
-var classNames = require('classnames/bind');
+var clsx = require('clsx');
 var Chevron = require('../Icons/Chevron.js');
 var index$3 = require('../base/InputRoot/index.js');
 var index = require('../base/FormField/index.js');
@@ -14,12 +15,12 @@ var index$2 = require('./components/MenuOverlay/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(styles__default.default);
 var Select = function Select(_ref) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
@@ -65,9 +66,7 @@ var Select = function Select(_ref) {
     })) === null || _a === void 0 ? void 0 : _a.label;
   }, [preparedOptions]);
   return /*#__PURE__*/React__default.default.createElement(index.default, {
-    className: clx(styles__default.default["form-field"], {
-      "full-width": fullWidth ? 1 : 0
-    }, className),
+    className: clsx__default.default(styles__default.default["form-field"], _defineProperty__default.default({}, styles__default.default["full-width"], Boolean(fullWidth)), className),
     required: required,
     label: label,
     hint: hint,
@@ -89,23 +88,24 @@ var Select = function Select(_ref) {
     tabIndex: 0,
     role: "button",
     style: {
-      width: 'fit-content'
+      width: fullWidth ? '100%' : 'fit-content'
     }
   }, /*#__PURE__*/React__default.default.createElement(index$3.default, {
     hasError: hasError,
     size: size,
-    className: clx(styles__default.default.root),
+    style: {
+      width: fullWidth ? '100%' : ''
+    },
+    className: styles__default.default.root,
     endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
-      className: clx(styles__default.default.icon, {
-        icon_isOpen: isOpen && Boolean(!disabled)
-      })
+      className: clsx__default.default(styles__default.default.icon, _defineProperty__default.default({}, styles__default.default['icon_isOpen'], isOpen && Boolean(!disabled)))
     }),
     disabled: Boolean(disabled)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["base-input"]),
+    className: styles__default.default["base-input"],
     "data-testid": "base-input"
   }, preparedLabel !== null && preparedLabel !== void 0 ? preparedLabel : (/*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(styles__default.default.placeholder)
+    className: styles__default.default.placeholder
   }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
     type: "hidden",
     name: name,

package/TimeSelect/index.d.ts

@@ -11,6 +11,7 @@ interface TimeSelectProps extends Omit<SelectProps<string>, "options"> {
     name?: string;
     disabled?: boolean;
     allowedTimeRange?: TimeRange;
+    fullWidth?: boolean;
 }
 declare const TimeSelect: FC<TimeSelectProps>;
 export default TimeSelect;

package/TimeSelect/index.js

@@ -43,7 +43,8 @@ var TimeSelect = function TimeSelect(_a) {
     onChange = _a.onChange,
     disabled = _a.disabled,
     allowedTimeRange = _a.allowedTimeRange,
-    props = tslib.__rest(_a, ["value", "name", "currentDate", "selectedDate", "label", "interval", "onChange", "disabled", "allowedTimeRange"]);
+    fullWidth = _a.fullWidth,
+    props = tslib.__rest(_a, ["value", "name", "currentDate", "selectedDate", "label", "interval", "onChange", "disabled", "allowedTimeRange", "fullWidth"]);
   var baseOptions = React.useMemo(function () {
     return helpers.generateSuggest(interval).map(function (item) {
       return {
@@ -66,6 +67,7 @@ var TimeSelect = function TimeSelect(_a) {
     });
   }, [baseOptions, currentDate, selectedDate, interval, allowedTimeRange]);
   return /*#__PURE__*/React__default.default.createElement(index$1.default, Object.assign({}, props, {
+    fullWidth: fullWidth,
     name: name,
     value: value,
     label: label,

package/base/BaseInput/index.js

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var styles = require('./BaseInput.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var BaseInput = function BaseInput(_a) {
@@ -25,7 +25,7 @@ var BaseInput = function BaseInput(_a) {
     if (onChange) onChange(e, e.target.value);
   };
   return /*#__PURE__*/React__default.default.createElement("input", Object.assign({
-    className: classNames__default.default(styles__default.default["base-input"], className),
+    className: clsx__default.default(styles__default.default["base-input"], className),
     onChange: onChangeHandler,
     onFocus: onFocus,
     onBlur: onBlur,

package/base/FormField/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var index = require('../../Typography/index.js');
 var styles = require('./FormField.module.css');
 
@@ -12,7 +12,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var FormField = function FormField(_ref) {
@@ -24,10 +24,10 @@ var FormField = function FormField(_ref) {
     className = _ref.className,
     ref = _ref.ref;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(styles__default.default.container, className),
+    className: clsx__default.default(styles__default.default.container, className),
     ref: ref
   }, label && (/*#__PURE__*/React__default.default.createElement(index.default, {
-    className: classNames__default.default(styles__default.default.label, _defineProperty__default.default({}, styles__default.default.label_required, required)),
+    className: clsx__default.default(styles__default.default.label, _defineProperty__default.default({}, styles__default.default.label_required, Boolean(required))),
     tag: "label"
   }, label)), children, hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
     variant: hasError ? "alert" : "secondary",

package/base/InputRoot/index.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var styles = require('./InputRoot.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var InputRoot = function InputRoot(_ref) {
@@ -29,7 +29,7 @@ var InputRoot = function InputRoot(_ref) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     ref: ref,
     style: style,
-    className: classNames__default.default(styles__default.default.root, styles__default.default["variant_".concat(variant)], size && styles__default.default["size_".concat(size)], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["variant_".concat(variant, "_disabled")], disabled), styles__default.default["variant_".concat(variant, "_error")], hasError), className)
+    className: clsx__default.default(styles__default.default.root, styles__default.default["variant_".concat(variant)], size && styles__default.default["size_".concat(size)], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["variant_".concat(variant, "_disabled")], disabled), styles__default.default["variant_".concat(variant, "_error")], hasError), className)
   }, startIcon && /*#__PURE__*/React__default.default.createElement("div", {
     className: styles__default.default["base-icon"]
   }, startIcon), children, endIcon && /*#__PURE__*/React__default.default.createElement("div", {

package/esm/Button/index.js

@@ -1,10 +1,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { __rest } from 'tslib';
 import React__default from 'react';
-import classNames from 'classnames/bind';
+import clsx from 'clsx';
 import styles from './Button.module.css';
 
-var clx = classNames.bind(styles);
 var Button = function Button(_a) {
   var className = _a.className,
     _a$fullWidth = _a.fullWidth,
@@ -24,22 +23,19 @@ var Button = function Button(_a) {
   return /*#__PURE__*/React__default.createElement("button", Object.assign({
     onClick: onClick,
     ref: ref,
-    className: clx("root", _defineProperty(_defineProperty(_defineProperty({
-      root_icon: !!icon,
-      root_fullWidth: !!fullWidth
-    }, "size_".concat(size), !!size), "variant_".concat(variant), !!variant), "variant_".concat(variant, "_disabled"), !!disabled), className),
+    className: clsx(styles.root, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles['root_icon'], Boolean(icon)), styles['root_fullWidth'], Boolean(fullWidth)), styles["size_".concat(size)], Boolean(size)), styles["variant_".concat(variant)], Boolean(variant)), styles["variant_".concat(variant, "_disabled")], Boolean(disabled)), className),
     disabled: disabled,
     "data-testid": "button",
     type: type || "button",
     role: "button"
   }, props), icon && /*#__PURE__*/React__default.createElement("span", {
-    className: clx(styles.icon)
+    className: styles.icon
   }, icon), iconStart && /*#__PURE__*/React__default.createElement("span", {
-    className: clx(styles.icon)
+    className: styles.icon
   }, iconStart), children && /*#__PURE__*/React__default.createElement("span", {
-    className: clx(styles.text)
+    className: styles.text
   }, children), iconEnd && /*#__PURE__*/React__default.createElement("span", {
-    className: clx(styles.icon)
+    className: styles.icon
   }, iconEnd));
 };
 

package/esm/Calendar/index.js

@@ -232,7 +232,7 @@ var Calendar = function Calendar(_ref) {
     ref: $root
   }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, state.contentWidth ? (/*#__PURE__*/React__default.createElement("div", {
     "data-component": "Months",
-    className: clx(styles.months),
+    className: styles.months,
     style: {
       transform: "translate3D(".concat(-1 * state.currentMonthOffset * state.contentWidth, "px, 0, 0)")
     }
@@ -261,7 +261,7 @@ var Calendar = function Calendar(_ref) {
     role: "button",
     "aria-label": "Prev"
   }, /*#__PURE__*/React__default.createElement(ArrowNext, {
-    className: clx(styles["month-control-prev-arrow"])
+    className: styles["month-control-prev-arrow"]
   })), /*#__PURE__*/React__default.createElement("button", {
     className: clx(styles["month-control"], styles["month-control-next"]),
     onClick: showNextMonth,
@@ -270,7 +270,7 @@ var Calendar = function Calendar(_ref) {
     role: "button",
     "aria-label": "Next"
   }, /*#__PURE__*/React__default.createElement(ArrowNext, {
-    className: clx(styles["month-control-next-arrow"])
+    className: styles["month-control-next-arrow"]
   }))), datePresets && (/*#__PURE__*/React__default.createElement(Presets, {
     presets: datePresets,
     onPresetSelect: handlePresetSelect

package/esm/Counter/index.js

@@ -1,11 +1,11 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
-import classNames from 'classnames/bind';
+import clsx from 'clsx';
 import Button from '../Button/index.js';
 import MinusIcon from '../Icons/Minus.js';
 import PlusIcon from '../Icons/Plus.js';
 import styles from './Counter.module.css';
 
-var clx = classNames.bind(styles);
 var Counter = function Counter(_ref) {
   var _ref$value = _ref.value,
     value = _ref$value === void 0 ? 1 : _ref$value,
@@ -25,13 +25,9 @@ var Counter = function Counter(_ref) {
     onChange(newValue);
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles.root, {
-      root_fullWidth: fullWidth ? 1 : 0
-    }, className)
+    className: clsx(styles.root, _defineProperty({}, styles['root_fullWidth'], Boolean(fullWidth)), className)
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles.control, {
-      control_fullWidth: fullWidth ? 1 : 0
-    })
+    className: clsx(styles.control, _defineProperty({}, styles['control_fullWidth'], Boolean(fullWidth)))
   }, /*#__PURE__*/React__default.createElement(Button, {
     icon: /*#__PURE__*/React__default.createElement(MinusIcon, {
       width: 16,
@@ -45,7 +41,7 @@ var Counter = function Counter(_ref) {
     },
     "aria-label": "decrease"
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles.value)
+    className: styles.value
   }, value), /*#__PURE__*/React__default.createElement(Button, {
     icon: /*#__PURE__*/React__default.createElement(PlusIcon, {
       width: 16,

package/esm/Dropdown/index.js

@@ -1,12 +1,11 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React__default, { useState, useMemo, Children, useCallback, useEffect } from 'react';
-import classNames from 'classnames/bind';
+import clsx from 'clsx';
 import { useFloating, offset, autoUpdate, flip, shift, useHover, useClick, useFocus, useDismiss, useRole, useInteractions, FloatingPortal } from '@floating-ui/react';
 import ClickOutside from '../ClickOutside/index.js';
 import styles from './Dropdown.module.css';
 
-var clx = classNames.bind(styles);
 var Dropdown = function Dropdown(_ref) {
   var children = _ref.children,
     zIndex = _ref.zIndex,
@@ -92,7 +91,7 @@ var Dropdown = function Dropdown(_ref) {
   }, /*#__PURE__*/React__default.createElement("div", Object.assign({
     ref: refs.setFloating,
     "data-testid": "popper-container",
-    className: clx("popper-container", "placement-".concat(finalPlacement)),
+    className: clsx(styles["popper-container"], styles["placement-".concat(finalPlacement)]),
     style: Object.assign(Object.assign({}, floatingStyles), {
       zIndex: zIndex,
       minWidth: samewidth ? "".concat((_a = refs.reference.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, "px") : undefined,
@@ -101,7 +100,7 @@ var Dropdown = function Dropdown(_ref) {
     tabIndex: 0
   }, getFloatingProps()), /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "overlay-container",
-    className: clx("overlay-container"),
+    className: styles['overlay-container'],
     onClick: onClickOverlay
   }, overlay))))));
 };

package/esm/MultiSelect/index.js

@@ -1,7 +1,8 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React__default, { useState, useMemo, useCallback } from 'react';
-import classNames from 'classnames/bind';
+import clsx from 'clsx';
 import Dropdown from '../Dropdown/index.js';
 import InputRoot from '../base/InputRoot/index.js';
 import FormField from '../base/FormField/index.js';
@@ -13,7 +14,6 @@ import styles from './index.module.css';
 import MenuOverlay from './components/MenuOverlay/index.js';
 import { toKey, fromKey } from './utils/index.js';
 
-var clx = classNames.bind(styles);
 var getValue = function getValue(options) {
   return options.map(function (_ref) {
     var label = _ref.label;
@@ -97,9 +97,7 @@ var MultiSelect = function MultiSelect(_ref2) {
     });
   }, [preparedGroups]);
   return /*#__PURE__*/React__default.createElement(FormField, {
-    className: clx(styles["form-field"], {
-      "full-width": fullWidth
-    }, className),
+    className: clsx(styles["form-field"], _defineProperty({}, styles["full-width"], Boolean(fullWidth)), className),
     required: required,
     label: label,
     hint: hint,
@@ -121,23 +119,21 @@ var MultiSelect = function MultiSelect(_ref2) {
     tabIndex: 0,
     role: "button",
     style: {
-      width: 'fit-content'
+      width: fullWidth ? '100%' : 'fit-content'
     }
   }, /*#__PURE__*/React__default.createElement(InputRoot, {
     hasError: hasError,
     size: size,
-    style: style,
-    className: clx("root", {
-      root_auto: preparedLabel.length
+    style: Object.assign(Object.assign({}, style), {
+      width: fullWidth ? '100%' : ''
     }),
+    className: clsx(styles.root, _defineProperty({}, styles['root_auto'], preparedLabel.length)),
     endIcon: /*#__PURE__*/React__default.createElement(Chevron, {
-      className: clx("icon", {
-        icon_isOpen: isOpen && Boolean(!disabled)
-      })
+      className: clsx(styles.icon, _defineProperty({}, styles['icon_isOpen'], isOpen && Boolean(!disabled)))
     }),
     disabled: Boolean(disabled)
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["base-input"], styles[type === "chip" ? "base-input-flex" : "base-input-text"])
+    className: clsx(styles["base-input"], styles[type === "chip" ? "base-input-flex" : "base-input-text"])
   }, preparedLabel.length ? type === "chip" ?
   // eslint-disable-next-line @typescript-eslint/no-shadow
   preparedLabel.map(function (_ref6) {
@@ -153,7 +149,7 @@ var MultiSelect = function MultiSelect(_ref2) {
       }
     }, label);
   }) : getValue(preparedLabel) : (/*#__PURE__*/React__default.createElement("span", {
-    className: clx(styles.placeholder)
+    className: styles.placeholder
   }, placeholder))), /*#__PURE__*/React__default.createElement("input", {
     type: "hidden",
     name: name,

package/esm/Select/index.js

@@ -1,6 +1,7 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React__default, { useState, useMemo } from 'react';
-import classNames from 'classnames/bind';
+import clsx from 'clsx';
 import Chevron from '../Icons/Chevron.js';
 import InputRoot from '../base/InputRoot/index.js';
 import FormField from '../base/FormField/index.js';
@@ -8,7 +9,6 @@ import Dropdown from '../Dropdown/index.js';
 import styles from './index.module.css';
 import MenuOverlay from './components/MenuOverlay/index.js';
 
-var clx = classNames.bind(styles);
 var Select = function Select(_ref) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,
@@ -54,9 +54,7 @@ var Select = function Select(_ref) {
     })) === null || _a === void 0 ? void 0 : _a.label;
   }, [preparedOptions]);
   return /*#__PURE__*/React__default.createElement(FormField, {
-    className: clx(styles["form-field"], {
-      "full-width": fullWidth ? 1 : 0
-    }, className),
+    className: clsx(styles["form-field"], _defineProperty({}, styles["full-width"], Boolean(fullWidth)), className),
     required: required,
     label: label,
     hint: hint,
@@ -78,23 +76,24 @@ var Select = function Select(_ref) {
     tabIndex: 0,
     role: "button",
     style: {
-      width: 'fit-content'
+      width: fullWidth ? '100%' : 'fit-content'
     }
   }, /*#__PURE__*/React__default.createElement(InputRoot, {
     hasError: hasError,
     size: size,
-    className: clx(styles.root),
+    style: {
+      width: fullWidth ? '100%' : ''
+    },
+    className: styles.root,
     endIcon: /*#__PURE__*/React__default.createElement(Chevron, {
-      className: clx(styles.icon, {
-        icon_isOpen: isOpen && Boolean(!disabled)
-      })
+      className: clsx(styles.icon, _defineProperty({}, styles['icon_isOpen'], isOpen && Boolean(!disabled)))
     }),
     disabled: Boolean(disabled)
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["base-input"]),
+    className: styles["base-input"],
     "data-testid": "base-input"
   }, preparedLabel !== null && preparedLabel !== void 0 ? preparedLabel : (/*#__PURE__*/React__default.createElement("span", {
-    className: clx(styles.placeholder)
+    className: styles.placeholder
   }, placeholder))), /*#__PURE__*/React__default.createElement("input", {
     type: "hidden",
     name: name,

package/esm/TimeSelect/index.d.ts

@@ -11,6 +11,7 @@ interface TimeSelectProps extends Omit<SelectProps<string>, "options"> {
     name?: string;
     disabled?: boolean;
     allowedTimeRange?: TimeRange;
+    fullWidth?: boolean;
 }
 declare const TimeSelect: FC<TimeSelectProps>;
 export default TimeSelect;

package/esm/TimeSelect/index.js

@@ -34,7 +34,8 @@ var TimeSelect = function TimeSelect(_a) {
     onChange = _a.onChange,
     disabled = _a.disabled,
     allowedTimeRange = _a.allowedTimeRange,
-    props = __rest(_a, ["value", "name", "currentDate", "selectedDate", "label", "interval", "onChange", "disabled", "allowedTimeRange"]);
+    fullWidth = _a.fullWidth,
+    props = __rest(_a, ["value", "name", "currentDate", "selectedDate", "label", "interval", "onChange", "disabled", "allowedTimeRange", "fullWidth"]);
   var baseOptions = useMemo(function () {
     return generateSuggest(interval).map(function (item) {
       return {
@@ -57,6 +58,7 @@ var TimeSelect = function TimeSelect(_a) {
     });
   }, [baseOptions, currentDate, selectedDate, interval, allowedTimeRange]);
   return /*#__PURE__*/React__default.createElement(Select, Object.assign({}, props, {
+    fullWidth: fullWidth,
     name: name,
     value: value,
     label: label,

package/esm/base/BaseInput/index.js

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import React__default from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import styles from './BaseInput.module.css';
 
 var BaseInput = function BaseInput(_a) {
@@ -15,7 +15,7 @@ var BaseInput = function BaseInput(_a) {
     if (onChange) onChange(e, e.target.value);
   };
   return /*#__PURE__*/React__default.createElement("input", Object.assign({
-    className: classNames(styles["base-input"], className),
+    className: clsx(styles["base-input"], className),
     onChange: onChangeHandler,
     onFocus: onFocus,
     onBlur: onBlur,

package/esm/base/FormField/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import Typography from '../../Typography/index.js';
 import styles from './FormField.module.css';
 
@@ -13,10 +13,10 @@ var FormField = function FormField(_ref) {
     className = _ref.className,
     ref = _ref.ref;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames(styles.container, className),
+    className: clsx(styles.container, className),
     ref: ref
   }, label && (/*#__PURE__*/React__default.createElement(Typography, {
-    className: classNames(styles.label, _defineProperty({}, styles.label_required, required)),
+    className: clsx(styles.label, _defineProperty({}, styles.label_required, Boolean(required))),
     tag: "label"
   }, label)), children, hint && (/*#__PURE__*/React__default.createElement(Typography, {
     variant: hasError ? "alert" : "secondary",

package/esm/base/InputRoot/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import styles from './InputRoot.module.css';
 
 var InputRoot = function InputRoot(_ref) {
@@ -18,7 +18,7 @@ var InputRoot = function InputRoot(_ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: style,
-    className: classNames(styles.root, styles["variant_".concat(variant)], size && styles["size_".concat(size)], _defineProperty(_defineProperty({}, styles["variant_".concat(variant, "_disabled")], disabled), styles["variant_".concat(variant, "_error")], hasError), className)
+    className: clsx(styles.root, styles["variant_".concat(variant)], size && styles["size_".concat(size)], _defineProperty(_defineProperty({}, styles["variant_".concat(variant, "_disabled")], disabled), styles["variant_".concat(variant, "_error")], hasError), className)
   }, startIcon && /*#__PURE__*/React__default.createElement("div", {
     className: styles["base-icon"]
   }, startIcon), children, endIcon && /*#__PURE__*/React__default.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.53",
+  "version": "0.8.54",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,6 +27,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
     "classnames": "2.5.1",
+    "clsx": "^2.1.1",
     "date-fns": "3.6.0",
     "react-textarea-autosize": "8.5.9"
   },