colibri-ui 0.8.53 → 0.8.55

package/Accordion/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');
 require('../Icons/index.js');
 var index = require('../Typography/index.js');
 var styles = require('./Accordion.module.css');
@@ -12,12 +13,12 @@ var Chevron = require('../Icons/Chevron.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 Accordion = function Accordion(_ref) {
   var title = _ref.title,
     _ref$boldTitle = _ref.boldTitle,
@@ -39,11 +40,11 @@ var Accordion = function Accordion(_ref) {
     }
   }, [isOpen]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx("root", className)
+    className: clsx__default.default(styles__default.default.root, className)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx("header")
+    className: styles__default.default.header
   }, /*#__PURE__*/React__default.default.createElement("button", {
-    className: clx("button"),
+    className: styles__default.default.button,
     onClick: toggleAccordion,
     type: "button",
     role: "button",
@@ -51,19 +52,17 @@ var Accordion = function Accordion(_ref) {
     tabIndex: tabIndex,
     "aria-label": "Toggle"
   }, /*#__PURE__*/React__default.default.createElement(Chevron.default, {
-    className: clx("chevron", {
-      chevron_open: isOpen
-    }),
+    className: clsx__default.default(styles__default.default.chevron, _defineProperty__default.default({}, styles__default.default["chevron_open"], Boolean(isOpen))),
     width: 20,
     height: 20
   }), /*#__PURE__*/React__default.default.createElement(index.default, {
-    className: clx("text"),
+    className: styles__default.default.text,
     fontWeight: boldTitle ? "bold" : "normal"
   }, title), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx("line")
+    className: styles__default.default.line
   }))), /*#__PURE__*/React__default.default.createElement("div", {
     ref: contentRef,
-    className: clx("content")
+    className: styles__default.default.content
   }, children));
 };
 

package/Avatar/index.js

@@ -5,7 +5,7 @@ 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 constants = require('./constants.js');
 var userCircle = require('./assets/user-circle.svg.js');
 var orgCircle = require('./assets/org-circle.svg.js');
@@ -16,10 +16,9 @@ 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 getStubImage = function getStubImage(type) {
   return type === index_props.AccountType.Organization ? orgCircle.default : userCircle.default;
 };
@@ -44,7 +43,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
   var stubSrc = getStubImage(accountType);
   // Приоритет: переданное изображение (src) > инициалы > дефолтное изображение
   var hasInitials = initials && initials.trim().length > 0;
-  var hasCustomImage = !!src;
+  var hasCustomImage = Boolean(src);
   // Показываем изображение если есть src ИЛИ (нет инициалов И есть дефолтное изображение)
   var shouldShowImage = hasCustomImage || !hasInitials && stubSrc;
   var finalSrc = src || stubSrc;
@@ -52,9 +51,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events
   React__default.default.createElement("div", {
-    className: clx(styles__default.default.avatarWrapper, {
-      avatarLoader: !!loading
-    }),
+    className: clsx__default.default(styles__default.default["avatar-wrapper"], _defineProperty__default.default({}, styles__default.default["avatar-loader"], Boolean(loading))),
     onClick: onClick,
     role: "button",
     "aria-label": ariaLabel || "Avatar"
@@ -63,9 +60,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
     "data-testid": "avatar",
     alt: alt,
     src: finalSrc,
-    className: clx("avatar", {
-      avatarBordered: !!bordered
-    }, SIZE_CLASSES[size], className)
+    className: clsx__default.default(styles__default.default.avatar, _defineProperty__default.default({}, styles__default.default["avatar-bordered"], Boolean(bordered)), SIZE_CLASSES[size], className)
   }, rest)))) : (
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events
@@ -75,12 +70,9 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
     role: "button",
     "aria-label": ariaLabel || "Avatar",
     onClick: onClick,
-    className: clx("avatarInitials", {
-      avatarBordered: !!bordered,
-      loading: !!loading
-    }, SIZE_CLASSES[size], className)
+    className: clsx__default.default(styles__default.default["avatar-initials"], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["avatar-bordered"], Boolean(bordered)), styles__default.default["avatar-loader"], Boolean(loading)), SIZE_CLASSES[size], className)
   }, rest), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx("initialsText", TEXT_CLASSES[size])
+    className: clsx__default.default(styles__default.default["initials-text"], TEXT_CLASSES[size])
   }, (initials === null || initials === void 0 ? void 0 : initials.trim().slice(0, 2)) || "")));
 });
 

package/Badge/Control/index.js

@@ -2,13 +2,13 @@
 
 var tslib = require('tslib');
 var React = require('react');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var styles = require('./Control.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 BadgeControl = function BadgeControl(_a) {
@@ -16,7 +16,7 @@ var BadgeControl = function BadgeControl(_a) {
     children = _a.children,
     props = tslib.__rest(_a, ["className", "children"]);
   return /*#__PURE__*/React__default.default.createElement("span", Object.assign({
-    className: classNames__default.default(styles__default.default.root, className)
+    className: clsx__default.default(styles__default.default.root, className)
   }, props), children);
 };
 

package/Badge/index.js

@@ -5,7 +5,7 @@ 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 index = require('./Control/index.js');
 var styles = require('./Badge.module.css');
 
@@ -13,10 +13,9 @@ 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 Badge = function Badge(_a) {
   var background = _a.background,
     children = _a.children,
@@ -37,7 +36,7 @@ var Badge = function Badge(_a) {
   }
   var displayValue = content ? content > max ? "".concat(max, "+") : content : undefined;
   return /*#__PURE__*/React__default.default.createElement(index.BadgeControl, Object.assign({}, props), children, displayValue && (/*#__PURE__*/React__default.default.createElement("span", {
-    className: clx("root", _defineProperty__default.default(_defineProperty__default.default({}, "root_direction_".concat(direction), !!direction), "root_invisible", invisible), className),
+    className: clsx__default.default(styles__default.default.root, _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["root_direction_".concat(direction)], Boolean(direction)), styles__default.default["root_invisible"], Boolean(invisible)), className),
     "data-testid": "badge",
     style: {
       backgroundColor: background,

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/components/ContinueButton/index.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-var classNames = require('classnames/bind');
 var index$2 = require('../../../Button/index.js');
 var index$1 = require('../../../libs/requestIdleCallback/index.js');
 var index = require('../../../helpers/date/index.js');
@@ -10,10 +9,8 @@ var styles = require('./index.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 styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(styles__default.default);
 var ContinueButton = function ContinueButton(_ref) {
   var selectedDate = _ref.selectedDate,
     selectedPeriod = _ref.selectedPeriod,
@@ -34,7 +31,7 @@ var ContinueButton = function ContinueButton(_ref) {
     });
   }, [isChanged, onContinue, onCancel]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.root),
+    className: styles__default.default.root,
     "data-testid": "continue-button"
   }, /*#__PURE__*/React__default.default.createElement(index$2.default, {
     size: "l",

package/Calendar/components/Month/Month.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/bind');
+var clsx = require('clsx');
 var leadingZeros = require('../../../libs/numbers/leadingZeros.js');
 var index$1 = require('../../../Typography/index.js');
 var index = require('../../../helpers/date/index.js');
@@ -33,10 +33,9 @@ function _interopNamespace(e) {
 
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__namespace = /*#__PURE__*/_interopNamespace(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 WEEK_DAYS = Array.from({
   length: 7
 }, function (_, idx) {
@@ -59,18 +58,18 @@ var Item = /*#__PURE__*/React__namespace.memo(function (_ref) {
     isStartOfSelection = _ref.isStartOfSelection,
     isEndOfSelection = _ref.isEndOfSelection,
     children = _ref.children;
-  var itemClass = clx("day", _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, "selected-day", isSelected), "selected-range-day", isInSelectedRange || isSelected), "no-selection", isStartOfSelection && isEndOfSelection), "start-of-selection", isStartOfSelection && !isEndOfSelection), "end-of-selection", isEndOfSelection && !isStartOfSelection), "first-child", isEndOfSelection), "last-child", isStartOfSelection));
+  var itemClass = clsx__default.default(styles__default.default.day, _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["selected-day"], isSelected), styles__default.default["selected-range-day"], isInSelectedRange || isSelected), styles__default.default["no-selection"], isStartOfSelection && isEndOfSelection), styles__default.default["start-of-selection"], isStartOfSelection && !isEndOfSelection), styles__default.default["end-of-selection"], isEndOfSelection && !isStartOfSelection), styles__default.default["first-child"], isEndOfSelection), styles__default.default["last-child"], isStartOfSelection));
   if (isSelected) {
     return /*#__PURE__*/React__namespace.createElement("li", {
       className: itemClass
     }, children);
   } else if (isInSelectedRange) {
     return /*#__PURE__*/React__namespace.createElement("li", {
-      className: clx("selected-range-day")
+      className: styles__default.default["selected-range-day"]
     }, children);
   }
   return /*#__PURE__*/React__namespace.createElement("li", {
-    className: clx("day")
+    className: styles__default.default.day
   }, children);
 });
 Item.displayName = "Item";
@@ -88,7 +87,7 @@ var DayButton = /*#__PURE__*/React__namespace.memo(function (_ref2) {
   var dayInnerActive = isActive ? "day-inner-active" : "";
   var bgStyle = isSelected ? SELECTED_BG_STYLE : TRANSPARENT_BG_STYLE;
   return /*#__PURE__*/React__namespace.createElement("button", {
-    className: clx("day-inner", dayInnerActive),
+    className: clsx__default.default(styles__default.default["day-inner"], dayInnerActive),
     style: bgStyle,
     role: "button",
     type: "button",
@@ -131,23 +130,23 @@ var Month = function Month(props) {
   }, [offsetLeft]);
   return /*#__PURE__*/React__namespace.createElement("div", {
     "data-testid": "month",
-    className: clx("root"),
+    className: styles__default.default.root,
     style: leftStyle
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: clx("month-name")
+    className: styles__default.default["month-name"]
   }, /*#__PURE__*/React__namespace.createElement(index$1.default, {
     tag: "span",
     size: titleSize
   }, monthName)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: clx("table")
+    className: styles__default.default.table
   }, /*#__PURE__*/React__namespace.createElement("ul", {
-    className: clx("legend")
+    className: styles__default.default.legend
   }, WEEK_DAYS.map(function (_ref3) {
     var index = _ref3.index,
       name = _ref3.name,
       isWeekend = _ref3.isWeekend;
     return /*#__PURE__*/React__namespace.createElement("li", {
-      className: clx("day"),
+      className: styles__default.default.day,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(index$1.default, {
       style: {
@@ -158,12 +157,12 @@ var Month = function Month(props) {
   })), weeks.map(function (days, weekIndex) {
     return /*#__PURE__*/React__namespace.createElement("ul", {
       key: "week-".concat(weekIndex),
-      className: clx("week")
+      className: styles__default.default.week
     }, days.map(function (day, dayIndex) {
       var key = "day-".concat(dayIndex);
       if (day.isDummy) {
         return /*#__PURE__*/React__namespace.createElement("li", {
-          className: clx("day"),
+          className: styles__default.default.day,
           key: key
         });
       }

package/Calendar/components/Presets/index.js

@@ -1,7 +1,6 @@
 'use strict';
 
 var React = require('react');
-var classNames = require('classnames/bind');
 var index = require('../../../Button/index.js');
 var styles = require('./index.module.css');
 
@@ -26,10 +25,8 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var clx = classNames__default.default.bind(styles__default.default);
 exports.PRESETS = void 0;
 (function (PRESETS) {
   PRESETS["TODAY"] = "today";
@@ -44,12 +41,12 @@ var Presets = function Presets(_ref) {
   return /*#__PURE__*/React__namespace.createElement("div", {
     "data-testid": "presets"
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: clx(styles__default.default["native-scroll-inner"])
+    className: styles__default.default["native-scroll-inner"]
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: clx(styles__default.default.inner)
+    className: styles__default.default.inner
   }, presets.map(function (preset) {
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: clx(styles__default.default.item),
+      className: styles__default.default.item,
       key: "preset=".concat(arguments.length <= 1 ? undefined : arguments[1])
     }, /*#__PURE__*/React__namespace.createElement(index.default, {
       variant: "outline",

package/Calendar/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
-var classNames = require('classnames/bind');
+var clsx = require('clsx');
 var index$1 = require('../libs/requestIdleCallback/index.js');
 var index = require('../helpers/date/index.js');
 require('../Icons/index.js');
@@ -20,10 +20,9 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 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 idleCallbackOptions = {
   timeout: 1000
 };
@@ -235,7 +234,7 @@ var Calendar = function Calendar(_ref) {
     });
   }, [initialSelectedDate, initialSelectedPeriod, startMonth]);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.root, className),
+    className: clsx__default.default(styles__default.default.root, className),
     style: {
       minWidth: "".concat(minWidth, "px")
     },
@@ -243,7 +242,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)")
     }
@@ -265,23 +264,23 @@ var Calendar = function Calendar(_ref) {
     startDate: getMonthStartDate(state.currentMonthOffset),
     offsetLeft: 0
   }, commonAttrs))), /*#__PURE__*/React__default.default.createElement("button", {
-    className: clx(styles__default.default["month-control"], styles__default.default["month-control-prev"]),
+    className: clsx__default.default(styles__default.default["month-control"], styles__default.default["month-control-prev"]),
     onClick: showPrevMonth,
     disabled: state.currentMonthOffset <= 0,
     type: "button",
     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"]),
+    className: clsx__default.default(styles__default.default["month-control"], styles__default.default["month-control-next"]),
     onClick: showNextMonth,
     disabled: state.currentMonthOffset >= 11,
     type: "button",
     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/Checkbox/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/bind');
+var clsx = require('clsx');
 var index = require('../Typography/index.js');
 var styles = require('./Checkbox.module.css');
 
@@ -12,10 +12,9 @@ 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 Checkbox = function Checkbox(_ref) {
   var id = _ref.id,
     name = _ref.name,
@@ -32,12 +31,12 @@ var Checkbox = function Checkbox(_ref) {
     disabled = _ref.disabled,
     hasError = _ref.hasError;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.root)
+    className: styles__default.default.root
   }, /*#__PURE__*/React__default.default.createElement("label", {
-    className: clx(styles__default.default.label),
+    className: styles__default.default.label,
     htmlFor: id
   }, /*#__PURE__*/React__default.default.createElement("input", {
-    className: clx(styles__default.default.control, styles__default.default["control_variant_".concat(variant)], className),
+    className: clsx__default.default(styles__default.default.control, styles__default.default["control_variant_".concat(variant)], className),
     type: "checkbox",
     id: id,
     name: name,
@@ -48,9 +47,9 @@ var Checkbox = function Checkbox(_ref) {
     onBlur: onBlur,
     disabled: disabled
   }), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(styles__default.default["fake-checkbox"], styles__default.default["variant_".concat(variant)], _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["variant_".concat(variant, "_disabled")], disabled), styles__default.default["variant_".concat(variant, "_error")], hasError), styles__default.default["variant_".concat(variant, "_checked")], checked), styles__default.default.checked, checked))
+    className: clsx__default.default(styles__default.default["fake-checkbox"], styles__default.default["variant_".concat(variant)], _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["variant_".concat(variant, "_disabled")], Boolean(disabled)), styles__default.default["variant_".concat(variant, "_error")], Boolean(hasError)), styles__default.default["variant_".concat(variant, "_checked")], Boolean(checked)), styles__default.default.checked, Boolean(checked)))
   }), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(styles__default.default.text)
+    className: styles__default.default.text
   }, label)), hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
     variant: hasError ? "alert" : "secondary",
     tag: "span"

package/Chip/index.js

@@ -2,18 +2,19 @@
 
 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('./Chip.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 Chip = function Chip(_a) {
   var children = _a.children,
     iconEnd = _a.iconEnd,
@@ -26,27 +27,24 @@ var Chip = function Chip(_a) {
     testID = _a$testID === void 0 ? "chip" : _a$testID,
     props = tslib.__rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "testID"]);
   return /*#__PURE__*/React__default.default.createElement("span", Object.assign({
-    className: clx("chip"),
+    className: styles__default.default.chip,
     "data-testid": testID
   }, props), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx("inner", {
-      inner_active: iconEnd || isActive,
-      inner_inactive: !iconEnd && !isActive
-    }),
+    className: clsx__default.default(styles__default.default.inner, _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["inner_active"], iconEnd || isActive), styles__default.default["inner_inactive"], !iconEnd && !isActive)),
     "data-size": size
   }, /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx("content"),
+    className: styles__default.default.content,
     "aria-pressed": isActive,
     role: "button",
     tabIndex: 0,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx("content-inner")
+    className: styles__default.default["content-inner"]
   }, children)), iconEnd && (
   /*#__PURE__*/
   // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
   React__default.default.createElement("span", {
-    className: clx("icon-right"),
+    className: styles__default.default["icon-right"],
     role: "button",
     tabIndex: 0,
     onClick: onClickIcon

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,