colibri-ui 0.8.53 → 0.8.55

package/Datepicker/components/DatePicker/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 = require('../../../Dropdown/index.js');
 var index$1 = require('../../../Calendar/index.js');
 var index$2 = require('../../../helpers/date/index.js');
@@ -14,16 +14,15 @@ 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 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"),
+    className: styles__default.default["calendar-icon"],
     strokeWidth: 1.5,
     stroke: "currentColor"
   }, /*#__PURE__*/React__default.default.createElement("path", {
@@ -53,16 +52,16 @@ var DatePicker = function DatePicker(_ref) {
     trigger: ["click"],
     overlay: /*#__PURE__*/React__default.default.createElement(index$1.default, {
       minWidth: 260,
-      className: clx("calendar", className),
+      className: clsx__default.default(styles__default.default.calendar, className),
       today: index$2.toISODate(new Date()),
       titleSize: "h5",
       selectedDate: date,
       onChange: handleDateChange
     })
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx("input-container", "input-date", className)
+    className: clsx__default.default(styles__default.default["input-container"], styles__default.default["input-date"], className)
   }, /*#__PURE__*/React__default.default.createElement("input", {
-    className: clx("input-field"),
+    className: styles__default.default["input-field"],
     tabIndex: 0,
     "aria-expanded": "false",
     "aria-haspopup": "true",

package/Datepicker/components/TimePicker/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('../../../Select/index.js');
 var styles = require('./index.module.css');
 var helpers = require('./helpers.js');
@@ -14,10 +14,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 TimePicker = function TimePicker(_ref) {
   var className = _ref.className,
     _ref$interval = _ref.interval,
@@ -45,13 +44,13 @@ var TimePicker = function TimePicker(_ref) {
     onChangeTime === null || onChangeTime === void 0 ? void 0 : onChangeTime(value);
   };
   return /*#__PURE__*/React__default.default.createElement(index$1.default, {
-    className: clx(className, styles__default.default.select),
+    className: clsx__default.default(className, styles__default.default.select),
     options: options,
     fontSize: 14,
     customInputRoot: /*#__PURE__*/React__default.default.createElement("div", {
-      className: clx(styles__default.default["input-container"], styles__default.default["input-time"])
+      className: clsx__default.default(styles__default.default["input-container"], styles__default.default["input-time"])
     }, /*#__PURE__*/React__default.default.createElement("input", {
-      className: clx(styles__default.default["input-field"]),
+      className: styles__default.default["input-field"],
       tabIndex: 0,
       "aria-expanded": "false",
       "aria-haspopup": "true",

package/Datepicker/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames/bind');
+var clsx = require('clsx');
 var styles = require('./Datepicker.module.css');
 var index = require('./components/TimePicker/index.js');
 var index$1 = require('./components/DatePicker/index.js');
@@ -11,10 +11,9 @@ var index$1 = require('./components/DatePicker/index.js');
 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 clx = classNames__default.default.bind(styles__default.default);
 var Datepicker = function Datepicker(_ref) {
   var className = _ref.className,
     selectedTime = _ref.selectedTime,
@@ -22,7 +21,7 @@ var Datepicker = function Datepicker(_ref) {
     onChangeDate = _ref.onChangeDate,
     onChangeTime = _ref.onChangeTime;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.root, className)
+    className: clsx__default.default(styles__default.default.root, className)
   }, /*#__PURE__*/React__default.default.createElement(index.default, {
     selectedTime: selectedTime,
     onChangeTime: onChangeTime

package/DotsLoader/index.js

@@ -2,53 +2,42 @@
 
 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 styles = require('./DotsLoader.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 DotsLoader = function DotsLoader(_ref) {
   var color = _ref.color;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx("wrapper")
+    className: styles__default.default.wrapper
   }, /*#__PURE__*/React__default.default.createElement("div", {
     style: {
       backgroundColor: color
     },
-    className: clx({
-      dot: true,
-      dot_first: true
-    })
+    className: clsx__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default.dot, true), styles__default.default.dot_first, true))
   }), /*#__PURE__*/React__default.default.createElement("div", {
     style: {
       backgroundColor: color
     },
-    className: clx({
-      dot: true,
-      dot_second: true
-    })
+    className: clsx__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default.dot, true), styles__default.default.dot_second, true))
   }), /*#__PURE__*/React__default.default.createElement("div", {
     style: {
       backgroundColor: color
     },
-    className: clx({
-      dot: true,
-      dot_third: true
-    })
+    className: clsx__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default.dot, true), styles__default.default.dot_third, true))
   }), /*#__PURE__*/React__default.default.createElement("div", {
     style: {
       backgroundColor: color
     },
-    className: clx({
-      dot: true,
-      dot_fourth: true
-    })
+    className: clsx__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default.dot, true), styles__default.default.dot_fourth, true))
   }));
 };
 

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/Grid/Item/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('./Grid-Item.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 GridItem = function GridItem(_ref) {
@@ -21,7 +21,7 @@ var GridItem = function GridItem(_ref) {
     className = _ref.className,
     style = _ref.style;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(styles__default.default.item, _defineProperty__default.default({}, styles__default.default.full, fullWidth), className),
+    className: clsx__default.default(styles__default.default.item, _defineProperty__default.default({}, styles__default.default.full, Boolean(fullWidth)), className),
     style: style
   }, children);
 };

package/Grid/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var styles = require('./Grid.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 Grid = function Grid(_ref) {
@@ -22,7 +22,7 @@ var Grid = function Grid(_ref) {
     gridItemMinWidth = _ref$gridItemMinWidth === void 0 ? 100 : _ref$gridItemMinWidth,
     className = _ref.className;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(styles__default.default.root, className),
+    className: clsx__default.default(styles__default.default.root, className),
     style: {
       rowGap: "".concat(gridRowGap, "px"),
       columnGap: "".concat(gridColumnGap, "px"),

package/Image/index.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var tslib = require('tslib');
 var React = require('react');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var styles = require('./Image.module.css');
 
 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 emptyImage = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
@@ -52,7 +52,7 @@ var Image = function Image(_a) {
   }, []);
   return /*#__PURE__*/React__default.default.createElement("picture", {
     ref: ref,
-    className: classNames__default.default(styles__default.default.root)
+    className: styles__default.default.root
   }, !!sources.length && sources.map(function (source, index) {
     return /*#__PURE__*/React__default.default.createElement("source", Object.assign({
       key: "item-".concat(index)
@@ -60,7 +60,7 @@ var Image = function Image(_a) {
   }), /*#__PURE__*/React__default.default.createElement("img", Object.assign({
     alt: alt,
     style: sizeAttrs,
-    className: classNames__default.default(className),
+    className: clsx__default.default(className),
     loading: loading,
     "aria-hidden": ariaLabel ? "false" : "true",
     "aria-label": ariaLabel,

package/Input/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var classNames = require('classnames');
+var clsx = require('clsx');
 var index = require('../base/FormField/index.js');
 var index$1 = require('../base/InputRoot/index.js');
 var index$2 = require('../base/BaseInput/index.js');
@@ -12,7 +12,7 @@ var index$2 = require('../base/BaseInput/index.js');
 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 Input = function Input(_a) {
   var className = _a.className,
@@ -35,7 +35,7 @@ var Input = function Input(_a) {
     ref = _a.ref,
     props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "hasError", "required", "onChange", "onFocus", "onBlur", "onKeyDown", "inputRef", "disabled", "variant", "size", "ref"]);
   return /*#__PURE__*/React__default.default.createElement(index.default, {
-    className: classNames__default.default(className),
+    className: clsx__default.default(className),
     label: label,
     required: required,
     hint: hint,

package/InputRadio/index.js

@@ -2,19 +2,20 @@
 
 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('../Typography/index.js');
 var styles = require('./InputRadio.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 InputRadio = /*#__PURE__*/React.memo(function (_a) {
   var checked = _a.checked,
     children = _a.children,
@@ -39,40 +40,33 @@ var InputRadio = /*#__PURE__*/React.memo(function (_a) {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     React__default.default.createElement("label", {
-      className: clx(styles__default.default.label, className),
+      className: clsx__default.default(styles__default.default.label, className),
       htmlFor: id,
       style: style,
       onClick: onClick,
       onMouseEnter: onMouseEnter,
       "data-testid": testid
     }, /*#__PURE__*/React__default.default.createElement("div", {
-      className: clx(styles__default.default.container, {
-        container_disabled: !!disabled,
-        container_error: !!error
-      }, containerClassName)
+      className: clsx__default.default(styles__default.default.container, _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["container_disabled"], Boolean(disabled)), styles__default.default["container_error"], Boolean(error)), containerClassName)
     }, /*#__PURE__*/React__default.default.createElement("input", Object.assign({
       type: "radio",
       id: id,
       value: value,
       name: name,
-      className: clx(styles__default.default.input, {
-        input_error: !!error,
-        input_checked: !!checked,
-        input_disabled: !!disabled
-      }),
+      className: clsx__default.default(styles__default.default.input, _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["input_error"], Boolean(error)), styles__default.default["input_checked"], Boolean(checked)), styles__default.default["input_disabled"], Boolean(disabled))),
       checked: checked,
       disabled: disabled,
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur
     }, rest)), /*#__PURE__*/React__default.default.createElement("span", {
-      className: clx(styles__default.default.icon)
+      className: styles__default.default.icon
     }), /*#__PURE__*/React__default.default.createElement("span", {
-      className: clx(styles__default.default.text)
+      className: styles__default.default.text
     }, !children && text, !text && children)), !!note && (/*#__PURE__*/React__default.default.createElement(index.default, {
       tag: "p",
       size: "s",
-      className: clx(styles__default.default.note)
+      className: styles__default.default.note
     }, note)))
   );
 });

package/Menu/components/MenuItem/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('./MenuItem.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 MenuItem = function MenuItem(_a) {
   var className = _a.className,
     isSelected = _a.isSelected,
@@ -39,10 +38,7 @@ var MenuItem = function MenuItem(_a) {
     tabIndex: disabled ? -1 : 0,
     "data-testid": "menuitem",
     "aria-disabled": disabled || undefined,
-    className: clx("item", _defineProperty__default.default({
-      item_disabled: disabled,
-      item_selected: isSelected
-    }, "item_variant_".concat(variant), true), className),
+    className: clsx__default.default(styles__default.default.item, _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["item_disabled"], Boolean(disabled)), styles__default.default["item_selected"], Boolean(isSelected)), styles__default.default["item_variant_".concat(variant)], Boolean(variant)), className),
     onClick: !disabled ? onClick : undefined,
     onKeyDown: handleKeyDown,
     onMouseEnter: onMouseEnter

package/Menu/index.js

@@ -3,16 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames/bind');
+var clsx = require('clsx');
 var styles = require('./Menu.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 clx = classNames__default.default.bind(styles__default.default);
 var Menu = function Menu(_ref) {
   var selected = _ref.selected,
     variant = _ref.variant,
@@ -39,7 +38,7 @@ var Menu = function Menu(_ref) {
   }, [children, selected, onClick, variant]);
   return /*#__PURE__*/React__default.default.createElement("ul", {
     ref: ref,
-    className: clx("menu", className),
+    className: clsx__default.default(styles__default.default.menu, className),
     role: "menu"
   }, renderChild);
 };

package/Modal/components/Close/index.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames');
 require('../../../Icons/index.js');
 var styles = require('./Close.module.css');
 var Close$1 = require('../../../Icons/Close.js');
@@ -11,7 +10,6 @@ var Close$1 = require('../../../Icons/Close.js');
 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 Close = function Close(_ref) {
@@ -20,7 +18,7 @@ var Close = function Close(_ref) {
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
     React__default.default.createElement(Close$1.default, {
-      className: classNames__default.default(styles__default.default.close),
+      className: styles__default.default.close,
       onClick: onClick
     })
   );

package/Modal/components/Content/index.js

@@ -2,13 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var classNames = require('classnames');
 var React = require('react');
 var styles = require('./Content.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
@@ -16,7 +14,7 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 var Content = function Content(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(styles__default.default.root)
+    className: styles__default.default.root
   }, children);
 };
 

package/Modal/components/Title/index.js

@@ -3,26 +3,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames/bind');
 var index = require('../../../Typography/index.js');
 var styles = require('./Title.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);
 // eslint-disable-next-line @typescript-eslint/ban-types
 var Title = function Title(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React__default.default.createElement(index.default, {
     tag: "h3",
     size: "h3",
-    className: clx(styles__default.default.title)
+    className: styles__default.default.title
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.wrapper)
+    className: styles__default.default.wrapper
   }, children));
 };
 

package/Modal/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$1 = require('../hooks/useScrollLock/index.js');
 var index$2 = require('../hooks/useTrapFocus/index.js');
 var index$3 = require('../Portal/index.js');
@@ -15,11 +16,11 @@ var styles = require('./Modal.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 Modal = function Modal(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -51,27 +52,24 @@ var Modal = function Modal(_ref) {
     };
   }, [handleClose]);
   return /*#__PURE__*/React__default.default.createElement(index$3.default, null, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx("root"),
+    className: styles__default.default.root,
     role: "dialog",
     "aria-modal": "true",
     "aria-labelledby": title ? "modal-title" : undefined
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx("modal-overlay"),
+    className: styles__default.default["modal-overlay"],
     onClick: handleOverlayClick,
     "aria-hidden": "true"
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx("modal-wrapper", {
-      "modal-wrapper_desktop": isDesktop,
-      "modal-wrapper_mobile": !isDesktop
-    }, className),
+    className: clsx__default.default(styles__default.default["modal-wrapper"], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["modal-wrapper_desktop"], isDesktop), styles__default.default["modal-wrapper_mobile"], !isDesktop), className),
     ref: modalRef
   }, title ? (/*#__PURE__*/React__default.default.createElement("div", {
-    className: clx("title-wrapper")
+    className: styles__default.default["title-wrapper"]
   }, /*#__PURE__*/React__default.default.createElement(index$4.default, null, title), /*#__PURE__*/React__default.default.createElement(index$5.default, {
     onClick: handleClose,
     "aria-label": "Close modal"
   }))) : (/*#__PURE__*/React__default.default.createElement("div", {
-    className: clx("close-wrapper")
+    className: styles__default.default["close-wrapper"]
   }, /*#__PURE__*/React__default.default.createElement(index$5.default, {
     onClick: handleClose,
     "aria-label": "Close modal"