colibri-ui 0.7.34 → 0.7.36

package/Badge/Badge.module.scss.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".Badge-module_root__KSuIQ {\n  position: absolute;\n  z-index: 1;\n  user-select: none;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 4px;\n  font-size: 12px;\n  border-radius: 10px;\n  background-color: var(--palette-brand-default-1);\n  color: var(--palette-white);\n}\n.Badge-module_root_direction_right__xv2eq {\n  top: 0;\n  right: 0;\n  transform: scale(1) translate(60%, -50%);\n}\n.Badge-module_root_direction_left__EejAl {\n  top: 0;\n  left: 0;\n  transform: scale(1) translate(-60%, -50%);\n}\n.Badge-module_root_invisible__A59Wf {\n  transform: scale(0) translate(50%, -50%);\n}";
+var styles = {"root":"Badge-module_root__KSuIQ","root_direction_right":"Badge-module_root_direction_right__xv2eq","root_direction_left":"Badge-module_root_direction_left__EejAl","root_invisible":"Badge-module_root_invisible__A59Wf"};
+var stylesheet=".Badge-module_root__KSuIQ {\n  position: absolute;\n  z-index: 1;\n  user-select: none;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 4px;\n  font-size: 12px;\n  border-radius: 10px;\n  background-color: var(--palette-brand-default-1);\n  color: var(--palette-white);\n}\n.Badge-module_root_direction_right__xv2eq {\n  top: 0;\n  right: 0;\n  transform: scale(1) translate(60%, -50%);\n}\n.Badge-module_root_direction_left__EejAl {\n  top: 0;\n  left: 0;\n  transform: scale(1) translate(-60%, -50%);\n}\n.Badge-module_root_invisible__A59Wf {\n  transform: scale(0) translate(50%, -50%);\n}";
+styleInject_es.default(css_248z);
+
+exports.default = styles;
+exports.stylesheet = stylesheet;

package/Badge/Control/Control.module.scss.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".Control-module_root__wUlkm {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  vertical-align: middle;\n}";
+var styles = {"root":"Control-module_root__wUlkm"};
+var stylesheet=".Control-module_root__wUlkm {\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  vertical-align: middle;\n}";
+styleInject_es.default(css_248z);
+
+exports.default = styles;
+exports.stylesheet = stylesheet;

package/Badge/Control/index.js

@@ -1,18 +1,22 @@
 'use strict';
 
 var tslib = require('tslib');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var styles = require('./styles.js');
+var React = require('react');
+var classNames = require('classnames');
+var Control_module = require('./Control.module.scss.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 
 var BadgeControl = function BadgeControl(_a) {
   var className = _a.className,
     children = _a.children,
     props = tslib.__rest(_a, ["className", "children"]);
-  return jsxRuntime.jsx(styles.Root, tslib.__assign({
-    className: className
-  }, props, {
-    children: children
-  }));
+  return /*#__PURE__*/React__default.default.createElement("span", tslib.__assign({
+    className: classNames__default.default(Control_module.default.root, className)
+  }, props), children);
 };
 
 exports.BadgeControl = BadgeControl;

package/Badge/index.js

@@ -3,22 +3,30 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var classNames = require('classnames/bind');
 var index = require('./Control/index.js');
-var styles = require('./styles.js');
+var Badge_module = require('./Badge.module.scss.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(Badge_module.default);
 var Badge = function Badge(_a) {
+  var _b;
   var className = _a.className,
     content = _a.content,
     children = _a.children,
     invisibleProp = _a.invisible,
-    _b = _a.max,
-    max = _b === void 0 ? 99 : _b,
-    _c = _a.showZero,
-    showZero = _c === void 0 ? false : _c,
+    _c = _a.max,
+    max = _c === void 0 ? 99 : _c,
+    _d = _a.showZero,
+    showZero = _d === void 0 ? false : _d,
     color = _a.color,
-    _d = _a.direction,
-    direction = _d === void 0 ? "right" : _d,
+    _e = _a.direction,
+    direction = _e === void 0 ? "right" : _e,
     background = _a.background,
     props = tslib.__rest(_a, ["className", "content", "children", "invisible", "max", "showZero", "color", "direction", "background"]);
   var invisible = invisibleProp;
@@ -29,18 +37,16 @@ var Badge = function Badge(_a) {
   if (content) {
     displayValue = content > max ? "".concat(max, "+") : content;
   }
-  return jsxRuntime.jsxs(index.BadgeControl, tslib.__assign({}, props, {
-    children: [children, jsxRuntime.jsx(styles.Root, {
-      style: {
-        color: color,
-        backgroundColor: background
-      },
-      direction: direction,
-      invisible: invisible,
-      className: className,
-      children: displayValue
-    })]
-  }));
+  return /*#__PURE__*/React__default.default.createElement(index.BadgeControl, tslib.__assign({}, props), children, /*#__PURE__*/React__default.default.createElement("span", {
+    style: {
+      color: color,
+      backgroundColor: background
+    },
+    className: clx((_b = {
+      root: true
+    }, _b["root_direction_".concat(direction)] = !!direction, _b.root_invisible = invisible, _b), className),
+    "data-cy": "badge"
+  }, displayValue));
 };
 
 exports.default = Badge;

package/Button/Button.module.scss.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".Button-module_root__8RX49 {\n  color: var(--palette-black);\n  padding: 0 12px;\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  gap: 8px;\n  flex-shrink: 0;\n  border: 1px solid;\n  font-style: normal;\n  font-weight: 400;\n  height: 36px;\n  font-size: 15px;\n  line-height: 36px;\n  transition: transform 0.1s ease-out;\n  color: 0.15s linear;\n  transform: scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  width: fit-content;\n  border-radius: var(--button-border-radius);\n}\n.Button-module_root_icon__KAJGT {\n  border-radius: 50%;\n  width: 36px;\n}\n.Button-module_root_icon__KAJGT.Button-module_size_xs__iIFbj {\n  width: 29px;\n}\n.Button-module_root_icon__KAJGT.Button-module_size_s__7A-Lo {\n  width: 32px;\n}\n.Button-module_root_icon__KAJGT.Button-module_size_m__HuaqX {\n  width: 36px;\n}\n.Button-module_root_icon__KAJGT.Button-module_size_l__2g-SP {\n  width: 42px;\n}\n.Button-module_root_fullWidth__tPJ0T {\n  width: 100%;\n}\n.Button-module_root_disabled__BFDIZ {\n  cursor: not-allowed;\n  pointer-events: none;\n  color: var(--button-primary-color-disabled);\n  background-color: var(--button-primary-background-color-disabled);\n  border-color: var(--button-primary-border-color-disabled);\n}\n\n.Button-module_icon__xIuVv {\n  display: flex;\n}\n\n.Button-module_size_xs__iIFbj {\n  height: 29px;\n  font-size: 12px;\n  line-height: 29px;\n}\n.Button-module_size_s__7A-Lo {\n  height: 32px;\n  font-size: 13px;\n  line-height: 32px;\n}\n.Button-module_size_m__HuaqX {\n  height: 36px;\n  font-size: 15px;\n  line-height: 36px;\n}\n.Button-module_size_l__2g-SP {\n  height: 42px;\n  font-size: 18px;\n  line-height: 42px;\n}\n\n.Button-module_variant_primary__pHnPB {\n  color: var(--button-primary-color);\n  background-color: var(--button-primary-background-color);\n  border-color: var(--button-primary-border-color);\n}\n.Button-module_variant_primary__pHnPB:hover {\n  color: var(--button-primary-color-hovered);\n  background-color: var(--button-primary-background-color-hovered);\n  border-color: var(--button-primary-border-color-hovered);\n}\n.Button-module_variant_primary__pHnPB:active {\n  color: var(--button-primary-color-active);\n  background-color: var(--button-primary-background-color-active);\n  border-color: var(--button-primary-border-color-active);\n}\n.Button-module_variant_secondary__6Ude- {\n  color: var(--button-secondary-color);\n  background-color: var(--button-secondary-background-color);\n  border-color: var(--button-secondary-border-color);\n}\n.Button-module_variant_secondary__6Ude-:hover {\n  color: var(--button-secondary-color-hovered);\n  background-color: var(--button-secondary-background-color-hovered);\n  border-color: var(--button-secondary-border-color-hovered);\n}\n.Button-module_variant_secondary__6Ude-:active {\n  color: var(--button-secondary-color-active);\n  background-color: var(--button-secondary-background-color-active);\n  border-color: var(--button-secondary-border-color-active);\n}\n.Button-module_variant_pseudo__yM1xM {\n  color: var(--button-pseudo-color);\n  background-color: var(--button-pseudo-background-color);\n  border-color: var(--button-pseudo-border-color);\n}\n.Button-module_variant_pseudo__yM1xM:hover {\n  color: var(--button-pseudo-color-hovered);\n  background-color: var(--button-pseudo-background-color-hovered);\n  border-color: var(--button-pseudo-border-color-hovered);\n}\n.Button-module_variant_pseudo__yM1xM:active {\n  color: var(--button-pseudo-color-active);\n  background-color: var(--button-pseudo-background-color-active);\n  border-color: var(--button-pseudo-border-color-active);\n}\n.Button-module_variant_clear__WSMoZ {\n  color: var(--button-clear-color);\n  background-color: transparent;\n  border-color: transparent;\n}\n.Button-module_variant_clear__WSMoZ:hover {\n  color: var(--button-clear-color-hovered);\n}\n.Button-module_variant_clear__WSMoZ:active {\n  color: var(--button-clear-color-active);\n}";
+var styles = {"root":"Button-module_root__8RX49","root_icon":"Button-module_root_icon__KAJGT","size_xs":"Button-module_size_xs__iIFbj","size_s":"Button-module_size_s__7A-Lo","size_m":"Button-module_size_m__HuaqX","size_l":"Button-module_size_l__2g-SP","root_fullWidth":"Button-module_root_fullWidth__tPJ0T","root_disabled":"Button-module_root_disabled__BFDIZ","icon":"Button-module_icon__xIuVv","variant_primary":"Button-module_variant_primary__pHnPB","variant_secondary":"Button-module_variant_secondary__6Ude-","variant_pseudo":"Button-module_variant_pseudo__yM1xM","variant_clear":"Button-module_variant_clear__WSMoZ"};
+var stylesheet=".Button-module_root__8RX49 {\n  color: var(--palette-black);\n  padding: 0 12px;\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  gap: 8px;\n  flex-shrink: 0;\n  border: 1px solid;\n  font-style: normal;\n  font-weight: 400;\n  height: 36px;\n  font-size: 15px;\n  line-height: 36px;\n  transition: transform 0.1s ease-out;\n  color: 0.15s linear;\n  transform: scale(1);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  width: fit-content;\n  border-radius: var(--button-border-radius);\n}\n.Button-module_root_icon__KAJGT {\n  border-radius: 50%;\n  width: 36px;\n}\n.Button-module_root_icon__KAJGT.Button-module_size_xs__iIFbj {\n  width: 29px;\n}\n.Button-module_root_icon__KAJGT.Button-module_size_s__7A-Lo {\n  width: 32px;\n}\n.Button-module_root_icon__KAJGT.Button-module_size_m__HuaqX {\n  width: 36px;\n}\n.Button-module_root_icon__KAJGT.Button-module_size_l__2g-SP {\n  width: 42px;\n}\n.Button-module_root_fullWidth__tPJ0T {\n  width: 100%;\n}\n.Button-module_root_disabled__BFDIZ {\n  cursor: not-allowed;\n  pointer-events: none;\n  color: var(--button-primary-color-disabled);\n  background-color: var(--button-primary-background-color-disabled);\n  border-color: var(--button-primary-border-color-disabled);\n}\n\n.Button-module_icon__xIuVv {\n  display: flex;\n}\n\n.Button-module_size_xs__iIFbj {\n  height: 29px;\n  font-size: 12px;\n  line-height: 29px;\n}\n.Button-module_size_s__7A-Lo {\n  height: 32px;\n  font-size: 13px;\n  line-height: 32px;\n}\n.Button-module_size_m__HuaqX {\n  height: 36px;\n  font-size: 15px;\n  line-height: 36px;\n}\n.Button-module_size_l__2g-SP {\n  height: 42px;\n  font-size: 18px;\n  line-height: 42px;\n}\n\n.Button-module_variant_primary__pHnPB {\n  color: var(--button-primary-color);\n  background-color: var(--button-primary-background-color);\n  border-color: var(--button-primary-border-color);\n}\n.Button-module_variant_primary__pHnPB:hover {\n  color: var(--button-primary-color-hovered);\n  background-color: var(--button-primary-background-color-hovered);\n  border-color: var(--button-primary-border-color-hovered);\n}\n.Button-module_variant_primary__pHnPB:active {\n  color: var(--button-primary-color-active);\n  background-color: var(--button-primary-background-color-active);\n  border-color: var(--button-primary-border-color-active);\n}\n.Button-module_variant_secondary__6Ude- {\n  color: var(--button-secondary-color);\n  background-color: var(--button-secondary-background-color);\n  border-color: var(--button-secondary-border-color);\n}\n.Button-module_variant_secondary__6Ude-:hover {\n  color: var(--button-secondary-color-hovered);\n  background-color: var(--button-secondary-background-color-hovered);\n  border-color: var(--button-secondary-border-color-hovered);\n}\n.Button-module_variant_secondary__6Ude-:active {\n  color: var(--button-secondary-color-active);\n  background-color: var(--button-secondary-background-color-active);\n  border-color: var(--button-secondary-border-color-active);\n}\n.Button-module_variant_pseudo__yM1xM {\n  color: var(--button-pseudo-color);\n  background-color: var(--button-pseudo-background-color);\n  border-color: var(--button-pseudo-border-color);\n}\n.Button-module_variant_pseudo__yM1xM:hover {\n  color: var(--button-pseudo-color-hovered);\n  background-color: var(--button-pseudo-background-color-hovered);\n  border-color: var(--button-pseudo-border-color-hovered);\n}\n.Button-module_variant_pseudo__yM1xM:active {\n  color: var(--button-pseudo-color-active);\n  background-color: var(--button-pseudo-background-color-active);\n  border-color: var(--button-pseudo-border-color-active);\n}\n.Button-module_variant_clear__WSMoZ {\n  color: var(--button-clear-color);\n  background-color: transparent;\n  border-color: transparent;\n}\n.Button-module_variant_clear__WSMoZ:hover {\n  color: var(--button-clear-color-hovered);\n}\n.Button-module_variant_clear__WSMoZ:active {\n  color: var(--button-clear-color-active);\n}";
+styleInject_es.default(css_248z);
+
+exports.default = styles;
+exports.stylesheet = stylesheet;

package/Button/index.js

@@ -3,16 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
-var styles = require('./styles.js');
+var classNames = require('classnames/bind');
+var Button_module = require('./Button.module.scss.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(Button_module.default);
 var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b;
   var className = _a.className,
-    _b = _a.fullWidth,
-    fullWidth = _b === void 0 ? false : _b,
-    _c = _a.scale,
-    scale = _c === void 0 ? false : _c,
+    _c = _a.fullWidth,
+    fullWidth = _c === void 0 ? false : _c,
     _d = _a.variant,
     variant = _d === void 0 ? "primary" : _d,
     iconStart = _a.iconStart,
@@ -20,27 +25,26 @@ var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     icon = _a.icon,
     size = _a.size,
     children = _a.children,
+    disabled = _a.disabled,
     onClick = _a.onClick,
-    props = tslib.__rest(_a, ["className", "fullWidth", "scale", "variant", "iconStart", "iconEnd", "icon", "size", "children", "onClick"]);
-  return jsxRuntime.jsxs(styles.StyledButton, tslib.__assign({
+    props = tslib.__rest(_a, ["className", "fullWidth", "variant", "iconStart", "iconEnd", "icon", "size", "children", "disabled", "onClick"]);
+  return /*#__PURE__*/React__default.default.createElement("button", tslib.__assign({
     onClick: onClick,
     ref: ref,
-    size: size,
-    className: className,
-    variant: variant,
-    icon: icon,
-    fullWidth: fullWidth,
-    scale: scale,
+    className: clx(Button_module.default.root, (_b = {
+      root_icon: !!icon,
+      root_disabled: disabled ? 1 : 0,
+      root_fullWidth: fullWidth ? 1 : 0
+    }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className),
+    disabled: disabled,
     "data-cy": "button"
-  }, props, {
-    children: [icon && jsxRuntime.jsx(styles.StyledIcon, {
-      children: icon
-    }), iconStart && jsxRuntime.jsx(styles.StyledIcon, {
-      children: iconStart
-    }), children && children, iconEnd && jsxRuntime.jsx(styles.StyledIcon, {
-      children: iconEnd
-    })]
-  }));
+  }, props), icon && /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(Button_module.default.icon)
+  }, icon), iconStart && /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(Button_module.default.icon)
+  }, iconStart), children && children, iconEnd && /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(Button_module.default.icon)
+  }, iconEnd));
 });
 
 exports.default = Button;

package/Button/index.props.d.ts

@@ -1,43 +1,12 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
-import type { CSSObject } from "@emotion/react";
-type BaseStyles = {
-    color?: CSSObject["color"];
-    borderRadius: CSSObject["borderRadius"];
-    border?: CSSObject["border"];
-};
-type VariantStyles = {
-    color?: CSSObject["color"];
-    backgroundColor?: CSSObject["backgroundColor"];
-    borderColor?: CSSObject["borderColor"];
-    boxShadow?: CSSObject["boxShadow"];
-    borderWidth?: CSSObject["borderWidth"];
-    borderRadius?: CSSObject["borderRadius"];
-    border?: CSSObject["border"];
-};
-type VariantStates = {
-    normal?: VariantStyles;
-    hovered?: VariantStyles;
-    focused?: VariantStyles;
-    active?: VariantStyles;
-    disabled?: VariantStyles;
-};
-export type ButtonBase = {
-    base: BaseStyles;
-};
-export type ButtonVariant = {
-    primary: VariantStates;
-    secondary: VariantStates;
-    pseudo: VariantStates;
-    clear: VariantStates;
-};
+export type ButtonVariant = "primary" | "secondary" | "pseudo" | "clear";
 export type ButtonSize = "xs" | "s" | "m" | "l";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: keyof ButtonVariant;
+    variant?: ButtonVariant;
     fullWidth?: boolean;
     icon?: ReactNode;
     iconStart?: ReactNode;
     iconEnd?: ReactNode;
     size?: ButtonSize;
-    scale?: boolean;
+    disabled?: boolean;
 }
-export {};

package/Checkbox/Checkbox.module.scss.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".Checkbox-module_root__BS5dT {\n  display: flex;\n  flex-direction: column;\n}\n\n.Checkbox-module_wrapper__rznMS {\n  display: flex;\n}\n\n.Checkbox-module_label__JBaRm {\n  display: inline-flex;\n  line-height: 18px;\n  position: relative;\n  cursor: pointer;\n}\n\n.Checkbox-module_text__usAwV {\n  font-size: 16px;\n  margin-block-start: -1px;\n  margin-inline-start: 8px;\n}\n\n.Checkbox-module_fakeCheckbox__mMV2U {\n  background-color: var(--palette-white);\n  block-size: 16px;\n  border: 1px solid var(--palette-bg-3);\n  border-radius: 4px;\n  box-sizing: border-box;\n  direction: ltr;\n  display: block;\n  flex-shrink: 0;\n  inline-size: 16px;\n  position: relative;\n  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.Checkbox-module_checked__XfvkJ {\n  border: 0;\n  background-color: var(--checkbox-primary-background-color-checked);\n}\n.Checkbox-module_checked__XfvkJ::after {\n  box-sizing: content-box;\n  content: \"\";\n  display: block;\n  position: absolute;\n  block-size: 8px;\n  border-block-end: 2px solid var(--palette-black);\n  border-inline-end: 2px solid var(--palette-black);\n  inline-size: 4px;\n  inset-block-start: 45%;\n  inset-inline-start: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.Checkbox-module_variant_primary_error__jenG7 {\n  border-color: red;\n  box-shadow: 0 0 0 2px red;\n}\n.Checkbox-module_variant_primary_checked__Aoq0H::after {\n  border-block-end: 2px solid var(--palette-white);\n  border-inline-end: 2px solid var(--palette-white);\n}\n\n.Checkbox-module_control__QFHjF {\n  inset-inline-start: -9999px;\n  position: absolute;\n}\n.Checkbox-module_control__QFHjF:disabled + .Checkbox-module_fakeCheckbox__mMV2U::after {\n  border-block-end: 2px solid var(--palette-bg-4);\n  border-inline-end: 2px solid var(--palette-bg-4);\n}\n.Checkbox-module_control__QFHjF:hover:not(:disabled) + .Checkbox-module_fakeCheckbox__mMV2U {\n  border-color: var(--palette-bg-3);\n}\n.Checkbox-module_control_variant_primary__v-gEp:focus:not(:disabled) + .Checkbox-module_fakeCheckbox__mMV2U {\n  box-shadow: 0 0 0 2px var(--checkbox-primary-box-shadow-focused);\n}\n.Checkbox-module_control_variant_primary__v-gEp:hover:not(:disabled) + .Checkbox-module_fakeCheckbox__mMV2U {\n  background-color: var(--checkbox-primary-background-color-hovered);\n}\n.Checkbox-module_control_variant_primary__v-gEp:active:not(:disabled) + .Checkbox-module_fakeCheckbox__mMV2U {\n  background-color: var(--checkbox-primary-background-color-active);\n  border-color: var(--checkbox-primary-border-color-active);\n  box-shadow: var(--checkbox-primary-box-shadow-active);\n}\n.Checkbox-module_control_variant_primary__v-gEp:disabled + .Checkbox-module_fakeCheckbox__mMV2U {\n  z-index: 1;\n  background-color: var(--checkbox-primary-background-color-disabled);\n}";
+var styles = {"root":"Checkbox-module_root__BS5dT","wrapper":"Checkbox-module_wrapper__rznMS","label":"Checkbox-module_label__JBaRm","text":"Checkbox-module_text__usAwV","fakeCheckbox":"Checkbox-module_fakeCheckbox__mMV2U","checked":"Checkbox-module_checked__XfvkJ","variant_primary_error":"Checkbox-module_variant_primary_error__jenG7","variant_primary_checked":"Checkbox-module_variant_primary_checked__Aoq0H","control":"Checkbox-module_control__QFHjF","control_variant_primary":"Checkbox-module_control_variant_primary__v-gEp"};
+var stylesheet=".Checkbox-module_root__BS5dT {\n  display: flex;\n  flex-direction: column;\n}\n\n.Checkbox-module_wrapper__rznMS {\n  display: flex;\n}\n\n.Checkbox-module_label__JBaRm {\n  display: inline-flex;\n  line-height: 18px;\n  position: relative;\n  cursor: pointer;\n}\n\n.Checkbox-module_text__usAwV {\n  font-size: 16px;\n  margin-block-start: -1px;\n  margin-inline-start: 8px;\n}\n\n.Checkbox-module_fakeCheckbox__mMV2U {\n  background-color: var(--palette-white);\n  block-size: 16px;\n  border: 1px solid var(--palette-bg-3);\n  border-radius: 4px;\n  box-sizing: border-box;\n  direction: ltr;\n  display: block;\n  flex-shrink: 0;\n  inline-size: 16px;\n  position: relative;\n  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;\n}\n\n.Checkbox-module_checked__XfvkJ {\n  border: 0;\n  background-color: var(--checkbox-primary-background-color-checked);\n}\n.Checkbox-module_checked__XfvkJ::after {\n  box-sizing: content-box;\n  content: \"\";\n  display: block;\n  position: absolute;\n  block-size: 8px;\n  border-block-end: 2px solid var(--palette-black);\n  border-inline-end: 2px solid var(--palette-black);\n  inline-size: 4px;\n  inset-block-start: 45%;\n  inset-inline-start: 50%;\n  transform: translate(-50%, -50%) rotate(45deg);\n}\n\n.Checkbox-module_variant_primary_error__jenG7 {\n  border-color: red;\n  box-shadow: 0 0 0 2px red;\n}\n.Checkbox-module_variant_primary_checked__Aoq0H::after {\n  border-block-end: 2px solid var(--palette-white);\n  border-inline-end: 2px solid var(--palette-white);\n}\n\n.Checkbox-module_control__QFHjF {\n  inset-inline-start: -9999px;\n  position: absolute;\n}\n.Checkbox-module_control__QFHjF:disabled + .Checkbox-module_fakeCheckbox__mMV2U::after {\n  border-block-end: 2px solid var(--palette-bg-4);\n  border-inline-end: 2px solid var(--palette-bg-4);\n}\n.Checkbox-module_control__QFHjF:hover:not(:disabled) + .Checkbox-module_fakeCheckbox__mMV2U {\n  border-color: var(--palette-bg-3);\n}\n.Checkbox-module_control_variant_primary__v-gEp:focus:not(:disabled) + .Checkbox-module_fakeCheckbox__mMV2U {\n  box-shadow: 0 0 0 2px var(--checkbox-primary-box-shadow-focused);\n}\n.Checkbox-module_control_variant_primary__v-gEp:hover:not(:disabled) + .Checkbox-module_fakeCheckbox__mMV2U {\n  background-color: var(--checkbox-primary-background-color-hovered);\n}\n.Checkbox-module_control_variant_primary__v-gEp:active:not(:disabled) + .Checkbox-module_fakeCheckbox__mMV2U {\n  background-color: var(--checkbox-primary-background-color-active);\n  border-color: var(--checkbox-primary-border-color-active);\n  box-shadow: var(--checkbox-primary-box-shadow-active);\n}\n.Checkbox-module_control_variant_primary__v-gEp:disabled + .Checkbox-module_fakeCheckbox__mMV2U {\n  z-index: 1;\n  background-color: var(--checkbox-primary-background-color-disabled);\n}";
+styleInject_es.default(css_248z);
+
+exports.default = styles;
+exports.stylesheet = stylesheet;

package/Checkbox/index.js

@@ -2,11 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var classNames = require('classnames/bind');
 var index = require('../Typography/index.js');
-var styles = require('./styles.js');
+var Checkbox_module = require('./Checkbox.module.scss.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(Checkbox_module.default);
 var Checkbox = function Checkbox(_a) {
+  var _b, _c;
   var id = _a.id,
     name = _a.name,
     value = _a.value,
@@ -16,41 +24,37 @@ var Checkbox = function Checkbox(_a) {
     onChange = _a.onChange,
     onFocus = _a.onFocus,
     onBlur = _a.onBlur,
-    _b = _a.variant,
-    variant = _b === void 0 ? "primary" : _b,
+    _d = _a.variant,
+    variant = _d === void 0 ? "primary" : _d,
     className = _a.className,
     disabled = _a.disabled,
     isError = _a.isError;
-  var control = jsxRuntime.jsx(styles.Label, {
-    children: jsxRuntime.jsxs(styles.Wrapper, {
-      children: [jsxRuntime.jsx(styles.Control, {
-        className: className,
-        type: "checkbox",
-        id: id,
-        variant: variant,
-        name: name,
-        value: value,
-        checked: checked,
-        onChange: onChange,
-        onFocus: onFocus,
-        onBlur: onBlur,
-        disabled: disabled
-      }), jsxRuntime.jsx(styles.FakeCheckbox, {
-        variant: variant,
-        checked: checked,
-        isError: isError
-      }), jsxRuntime.jsx(styles.Text, {
-        children: label
-      })]
-    })
-  });
-  return jsxRuntime.jsxs(styles.Root, {
-    children: [control, hint && jsxRuntime.jsx(index.default, {
-      variant: isError ? "alert" : "secondary",
-      tag: "span",
-      children: hint
-    })]
-  });
+  var control = /*#__PURE__*/React__default.default.createElement("label", {
+    className: clx(Checkbox_module.default.label)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(Checkbox_module.default.wrapper)
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    className: clx(Checkbox_module.default.control, (_b = {}, _b["control_variant_".concat(variant)] = !!variant, _b), className),
+    type: "checkbox",
+    id: id,
+    name: name,
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled
+  }), /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(Checkbox_module.default.fakeCheckbox, (_c = {}, _c["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _c["variant_".concat(variant, "_error")] = isError ? 1 : 0, _c["variant_".concat(variant, "_checked")] = checked ? 1 : 0, _c.checked = checked ? 1 : 0, _c["variant_".concat(variant)] = !!variant, _c))
+  }), /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(Checkbox_module.default.text)
+  }, label)));
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(Checkbox_module.default.root)
+  }, control, hint && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+    variant: isError ? "alert" : "secondary",
+    tag: "span"
+  }, hint)));
 };
 
 exports.default = Checkbox;

package/Checkbox/index.props.d.ts

@@ -1,23 +1,6 @@
 import type { ReactNode } from "react";
-import type { CSSObject } from "@emotion/react";
-type VariantStyles = {
-    backgroundColor?: CSSObject["backgroundColor"];
-    borderColor?: CSSObject["borderColor"];
-    boxShadow?: CSSObject["boxShadow"];
-};
-type VariantStates = {
-    normal?: VariantStyles;
-    hovered?: VariantStyles;
-    checked?: VariantStyles;
-    focused?: VariantStyles;
-    active?: VariantStyles;
-    disabled?: VariantStyles;
-};
-export type CheckboxVariant = {
-    primary: VariantStates;
-};
 export interface CheckboxProps {
-    variant?: keyof CheckboxVariant;
+    variant?: "primary";
     size?: "s" | "m" | "l";
     id?: string;
     name?: string;
@@ -32,4 +15,3 @@ export interface CheckboxProps {
     disabled?: boolean;
     isError?: boolean;
 }
-export {};

package/Counter/Counter.module.scss.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".Counter-module_root__OFEM- {\n  background-color: var(--palette-white);\n  border-radius: 4px;\n  box-sizing: border-box;\n  display: inline-block;\n  font-size: 16px;\n  max-block-size: 40px;\n  min-block-size: 40px;\n  min-inline-size: 96px;\n  overflow: hidden;\n  position: relative;\n}\n.Counter-module_root_fullWidth__yP-g9 {\n  inline-size: 100%;\n}\n\n.Counter-module_control__z5Uxb {\n  align-items: center;\n  block-size: 38px;\n  display: flex;\n  justify-content: space-between;\n  gap: 4px;\n}\n.Counter-module_control_fullWidth__cf8hN {\n  inline-size: 100%;\n}\n\n.Counter-module_value__uELqN {\n  font-weight: 500;\n  font-size: 18px;\n  inline-size: 24px;\n  user-select: none;\n  text-align: center;\n}";
+var styles = {"root":"Counter-module_root__OFEM-","root_fullWidth":"Counter-module_root_fullWidth__yP-g9","control":"Counter-module_control__z5Uxb","control_fullWidth":"Counter-module_control_fullWidth__cf8hN","value":"Counter-module_value__uELqN"};
+var stylesheet=".Counter-module_root__OFEM- {\n  background-color: var(--palette-white);\n  border-radius: 4px;\n  box-sizing: border-box;\n  display: inline-block;\n  font-size: 16px;\n  max-block-size: 40px;\n  min-block-size: 40px;\n  min-inline-size: 96px;\n  overflow: hidden;\n  position: relative;\n}\n.Counter-module_root_fullWidth__yP-g9 {\n  inline-size: 100%;\n}\n\n.Counter-module_control__z5Uxb {\n  align-items: center;\n  block-size: 38px;\n  display: flex;\n  justify-content: space-between;\n  gap: 4px;\n}\n.Counter-module_control_fullWidth__cf8hN {\n  inline-size: 100%;\n}\n\n.Counter-module_value__uELqN {\n  font-weight: 500;\n  font-size: 18px;\n  inline-size: 24px;\n  user-select: none;\n  text-align: center;\n}";
+styleInject_es.default(css_248z);
+
+exports.default = styles;
+exports.stylesheet = stylesheet;

package/Counter/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { Props } from "./index.props";
-declare const Counter: React.FC<Props>;
+import type { CounterProps } from "./index.props";
+declare const Counter: React.FC<CounterProps>;
 export default Counter;

package/Counter/index.js

@@ -2,13 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var React = require('react');
+var classNames = require('classnames/bind');
 var index = require('../Button/index.js');
 var Minus = require('../Icons/Minus.js');
 var Plus = require('../Icons/Plus.js');
-var styles = require('./styles.js');
+var Counter_module = require('./Counter.module.scss.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(Counter_module.default);
 var Counter = function Counter(_a) {
   var _b = _a.value,
     value = _b === void 0 ? 1 : _b,
@@ -22,38 +28,39 @@ var Counter = function Counter(_a) {
   var lastNumValue = React.useRef(value);
   var minusDisabled = disabled || value <= min;
   var plusDisabled = disabled || value >= max;
-  return jsxRuntime.jsx(styles.Root, {
-    className: className,
-    fullWidth: fullWidth,
-    children: jsxRuntime.jsxs(styles.Control, {
-      fullWidth: fullWidth,
-      children: [jsxRuntime.jsx(index.default, {
-        icon: jsxRuntime.jsx(Minus.default, {
-          width: 16,
-          height: 16
-        }),
-        disabled: minusDisabled,
-        onClick: function onClick() {
-          onChange(value - 1);
-          lastNumValue.current = value - 1;
-        },
-        "aria-label": "decrease"
-      }), jsxRuntime.jsx(styles.Value, {
-        children: value
-      }), jsxRuntime.jsx(index.default, {
-        icon: jsxRuntime.jsx(Plus.default, {
-          width: 16,
-          height: 16
-        }),
-        disabled: plusDisabled,
-        onClick: function onClick() {
-          onChange(value + 1);
-          lastNumValue.current = value + 1;
-        },
-        "aria-label": "increase"
-      })]
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(Counter_module.default.root, {
+      root_fullWidth: fullWidth ? 1 : 0
+    }, className)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(Counter_module.default.control, {
+      control_fullWidth: fullWidth ? 1 : 0
     })
-  });
+  }, /*#__PURE__*/React__default.default.createElement(index.default, {
+    icon: /*#__PURE__*/React__default.default.createElement(Minus.default, {
+      width: 16,
+      height: 16
+    }),
+    disabled: minusDisabled,
+    onClick: function onClick() {
+      onChange(value - 1);
+      lastNumValue.current = value - 1;
+    },
+    "aria-label": "decrease"
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(Counter_module.default.value)
+  }, value), /*#__PURE__*/React__default.default.createElement(index.default, {
+    icon: /*#__PURE__*/React__default.default.createElement(Plus.default, {
+      width: 16,
+      height: 16
+    }),
+    disabled: plusDisabled,
+    onClick: function onClick() {
+      onChange(value + 1);
+      lastNumValue.current = value + 1;
+    },
+    "aria-label": "increase"
+  })));
 };
 
 exports.default = Counter;

package/Counter/index.props.d.ts

@@ -1,4 +1,4 @@
-export type Props = {
+export type CounterProps = {
     value: number;
     max: number;
     min: number;

package/DotsLoader/DotsLoader.module.scss.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleInject_es = require('../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".DotsLoader-module_wrapper__FhKIJ {\n  display: flex;\n  justify-content: space-between;\n  width: 70px;\n}\n\n.DotsLoader-module_dot__oZoA0 {\n  animation-duration: 1.6s;\n  animation-iteration-count: infinite;\n  animation-name: DotsLoader-module_pending__qL-8B;\n  background-color: var(--palette-black);\n  border-radius: 5px;\n  height: 10px;\n  transform: scale(0);\n  width: 10px;\n}\n@keyframes DotsLoader-module_pending__qL-8B {\n  0% {\n    transform: scale(0);\n  }\n  50% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n}\n.DotsLoader-module_dot_first__6nsQ8 {\n  animation-delay: 0s;\n}\n.DotsLoader-module_dot_second__p8BzX {\n  animation-delay: 0.2s;\n}\n.DotsLoader-module_dot_third__1II0s {\n  animation-delay: 0.4s;\n}\n.DotsLoader-module_dot_fourth__VR4zl {\n  animation-delay: 0.6s;\n}";
+var styles = {"wrapper":"DotsLoader-module_wrapper__FhKIJ","dot":"DotsLoader-module_dot__oZoA0","pending":"DotsLoader-module_pending__qL-8B","dot_first":"DotsLoader-module_dot_first__6nsQ8","dot_second":"DotsLoader-module_dot_second__p8BzX","dot_third":"DotsLoader-module_dot_third__1II0s","dot_fourth":"DotsLoader-module_dot_fourth__VR4zl"};
+var stylesheet=".DotsLoader-module_wrapper__FhKIJ {\n  display: flex;\n  justify-content: space-between;\n  width: 70px;\n}\n\n.DotsLoader-module_dot__oZoA0 {\n  animation-duration: 1.6s;\n  animation-iteration-count: infinite;\n  animation-name: DotsLoader-module_pending__qL-8B;\n  background-color: var(--palette-black);\n  border-radius: 5px;\n  height: 10px;\n  transform: scale(0);\n  width: 10px;\n}\n@keyframes DotsLoader-module_pending__qL-8B {\n  0% {\n    transform: scale(0);\n  }\n  50% {\n    transform: scale(1);\n  }\n  100% {\n    transform: scale(0);\n  }\n}\n.DotsLoader-module_dot_first__6nsQ8 {\n  animation-delay: 0s;\n}\n.DotsLoader-module_dot_second__p8BzX {\n  animation-delay: 0.2s;\n}\n.DotsLoader-module_dot_third__1II0s {\n  animation-delay: 0.4s;\n}\n.DotsLoader-module_dot_fourth__VR4zl {\n  animation-delay: 0.6s;\n}";
+styleInject_es.default(css_248z);
+
+exports.default = styles;
+exports.stylesheet = stylesheet;

package/DotsLoader/index.js

@@ -2,26 +2,53 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var jsxRuntime = require('@emotion/react/jsx-runtime');
-var styles = require('./styles.js');
+var React = require('react');
+var classNames = require('classnames/bind');
+var DotsLoader_module = require('./DotsLoader.module.scss.js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(DotsLoader_module.default);
 var DotsLoader = function DotsLoader(_a) {
   var color = _a.color;
-  return jsxRuntime.jsxs(styles.Wrapper, {
-    children: [jsxRuntime.jsx(styles.Dot, {
-      first: true,
-      color: color
-    }), jsxRuntime.jsx(styles.Dot, {
-      second: true,
-      color: color
-    }), jsxRuntime.jsx(styles.Dot, {
-      third: true,
-      color: color
-    }), jsxRuntime.jsx(styles.Dot, {
-      fourth: true,
-      color: color
-    })]
-  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("wrapper")
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    style: {
+      backgroundColor: color
+    },
+    className: clx({
+      dot: true,
+      dot_first: true
+    })
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    style: {
+      backgroundColor: color
+    },
+    className: clx({
+      dot: true,
+      dot_second: true
+    })
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    style: {
+      backgroundColor: color
+    },
+    className: clx({
+      dot: true,
+      dot_third: true
+    })
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    style: {
+      backgroundColor: color
+    },
+    className: clx({
+      dot: true,
+      dot_fourth: true
+    })
+  }));
 };
 
 exports.default = DotsLoader;