colibri-ui 0.7.39 → 0.7.41

package/Typography/Typography.module.css

@@ -0,0 +1,64 @@
+.root {
+  color: var(--palette-black);
+}
+
+.size_xs {
+  font-size: 12px;
+  line-height: 16px;
+}
+.size_s {
+  font-size: 14px;
+  line-height: 18px;
+}
+.size_m {
+  font-size: 16px;
+  line-height: 22px;
+}
+.size_l {
+  font-size: 18px;
+  line-height: 28px;
+}
+.size_h1 {
+  font-size: 40px;
+  line-height: 56px;
+}
+.size_h2 {
+  font-size: 32px;
+  line-height: 40px;
+}
+.size_h3 {
+  font-size: 24px;
+  line-height: 32px;
+}
+.size_h4 {
+  font-size: 20px;
+  line-height: 28px;
+}
+.size_h5 {
+  font-size: 16px;
+  line-height: 24px;
+}
+.size_h6 {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.fontWeight_normal {
+  font-weight: 400;
+}
+.fontWeight_medium {
+  font-weight: 500;
+}
+.fontWeight_bold {
+  font-weight: 700;
+}
+
+.variant_alert {
+  color: var(--typography-alert);
+}
+.variant_success {
+  color: var(--typography-success);
+}
+.variant_secondary {
+  color: var(--typography-secondary);
+}

package/Typography/index.js

@@ -5,14 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var classNames = require('classnames/bind');
-var Typography_module = require('./Typography.module.scss.js');
+var styles = require('./Typography.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(Typography_module.default);
+var clx = classNames__default.default.bind(styles__default.default);
 var Typography = function Typography(_a) {
   var _b;
   var _c = _a.tag,

package/base/BaseInput/BaseInput.module.css

@@ -0,0 +1,12 @@
+.baseInput {
+  margin: 7px 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.baseInput ::placeholder {
+  color: var(--palette-bg-2);
+}

package/base/BaseInput/index.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var classNames = require('classnames');
-var BaseInput_module = require('./BaseInput.module.scss.js');
+var styles = require('./BaseInput.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var BaseInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var className = _a.className,
@@ -20,7 +21,7 @@ var BaseInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     if (onChange) onChange(e, e.target.value);
   };
   return /*#__PURE__*/React__default.default.createElement("input", tslib.__assign({
-    className: classNames__default.default(BaseInput_module.default.baseInput, className),
+    className: classNames__default.default(styles__default.default.baseInput, className),
     onChange: onChangeHandler,
     ref: ref,
     type: "text"

package/base/FormField/FormField.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}

package/base/FormField/index.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classNames = require('classnames');
 var index = require('../../Typography/index.js');
-var FormField_module = require('./FormField.module.scss.js');
+var styles = require('./FormField.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 FormField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
@@ -19,7 +20,7 @@ var FormField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     error = _a.error,
     className = _a.className;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(FormField_module.default.container, className),
+    className: classNames__default.default(styles__default.default.container, className),
     ref: ref
   }, label && /*#__PURE__*/React__default.default.createElement(index.default, {
     tag: "label"

package/base/InputRoot/InputRoot.module.css

@@ -0,0 +1,74 @@
+.baseIcon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 16px;
+  color: inherit;
+}
+
+.baseDisableWrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  cursor: not-allowed;
+}
+
+.root {
+  background-color: var(--palette-white);
+  color: var(--palette-black);
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  padding: 5px 10px;
+}
+
+.variant_primary {
+  border-color: var(--input-primary-border-color);
+}
+.variant_primary:hover {
+  border-color: var(--palette-primary-3);
+  box-shadow: 0px 0px 0px 2px var(--palette-primary-2);
+}
+.variant_primary:active {
+  border-color: var(--palette-primary-4);
+}
+.variant_primary:focus, .variant_primary:focus-within {
+  border-color: var(--palette-primary-4);
+}
+.variant_primary_disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: var(--palette-bg-3);
+  background-color: var(--palette-bg-1);
+  border-color: var(--palette-bg-3);
+}
+.variant_primary_error {
+  background-color: var(--palette-tretiary-2);
+  border-color: var(--palette-alert);
+}
+.variant_primary_error:hover {
+  background-color: var(--palette-white);
+  border-color: var(--palette-alert);
+  box-shadow: 0px 0px 0px 2px var(--palette-tretiary-2);
+}
+.variant_primary_error:focus, .variant_primary_error:focus-within {
+  border-color: var(--palette-alert);
+  background-color: var(--palette-white);
+}
+
+.size_s {
+  height: 32px;
+}
+.size_m {
+  height: 36px;
+}
+.size_l {
+  height: 42px;
+}

package/base/InputRoot/index.js

@@ -4,14 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classNames = require('classnames/bind');
-var InputRoot_module = require('./InputRoot.module.scss.js');
+var styles = require('./InputRoot.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(InputRoot_module.default);
+var clx = classNames__default.default.bind(styles__default.default);
 var InputRoot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b;
   var className = _a.className,
@@ -25,13 +26,13 @@ var InputRoot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     size = _a.size;
   return /*#__PURE__*/React__default.default.createElement("div", {
     ref: ref,
-    className: clx(InputRoot_module.default.root, (_b = {}, _b["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _b["variant_".concat(variant, "_error")] = error ? 1 : 0, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className)
+    className: clx(styles__default.default.root, (_b = {}, _b["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _b["variant_".concat(variant, "_error")] = error ? 1 : 0, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className)
   }, startIcon && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(InputRoot_module.default.baseIcon)
+    className: clx(styles__default.default.baseIcon)
   }, startIcon), children, endIcon && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(InputRoot_module.default.baseIcon)
+    className: clx(styles__default.default.baseIcon)
   }, endIcon), disabled && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(InputRoot_module.default.baseDisableWrapper)
+    className: clx(styles__default.default.baseDisableWrapper)
   }));
 });
 

package/esm/Badge/Badge.module.css

@@ -0,0 +1,32 @@
+.root {
+  position: absolute;
+  z-index: 1;
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 4px;
+  font-size: 12px;
+  border-radius: 10px;
+  background-color: var(--palette-brand-default-1);
+  color: var(--palette-white);
+}
+.root_direction_right {
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(60%, -50%);
+}
+.root_direction_left {
+  top: 0;
+  left: 0;
+  transform: scale(1) translate(-60%, -50%);
+}
+.root_invisible {
+  transform: scale(0) translate(50%, -50%);
+}

package/esm/Badge/Control/Control.module.css

@@ -0,0 +1,6 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  vertical-align: middle;
+}

package/esm/Badge/Control/index.js

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classNames from 'classnames';
-import styles from './Control.module.scss.js';
+import styles from './Control.module.css';
 
 var BadgeControl = function BadgeControl(_a) {
   var className = _a.className,

package/esm/Badge/index.js

@@ -2,7 +2,7 @@ import { __rest, __assign } from 'tslib';
 import React from 'react';
 import classNames from 'classnames/bind';
 import { BadgeControl } from './Control/index.js';
-import styles from './Badge.module.scss.js';
+import styles from './Badge.module.css';
 
 var clx = classNames.bind(styles);
 var Badge = function Badge(_a) {

package/esm/Button/Button.module.css

@@ -0,0 +1,133 @@
+.root {
+  color: var(--palette-black);
+  padding: 0 12px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  gap: 8px;
+  flex-shrink: 0;
+  border: 1px solid;
+  font-style: normal;
+  font-weight: 400;
+  height: 36px;
+  font-size: 15px;
+  line-height: 36px;
+  transition: transform 0.1s ease-out;
+  color: 0.15s linear;
+  transform: scale(1);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: fit-content;
+  border-radius: var(--button-border-radius);
+}
+.root_icon {
+  border-radius: 50%;
+  width: 36px;
+}
+.root_icon.size_xs {
+  width: 29px;
+}
+.root_icon.size_s {
+  width: 32px;
+}
+.root_icon.size_m {
+  width: 36px;
+}
+.root_icon.size_l {
+  width: 42px;
+}
+.root_fullWidth {
+  width: 100%;
+}
+.root_disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  color: var(--button-primary-color-disabled);
+  background-color: var(--button-primary-background-color-disabled);
+  border-color: var(--button-primary-border-color-disabled);
+}
+
+.icon {
+  display: flex;
+}
+
+.size_xs {
+  height: 29px;
+  font-size: 12px;
+  line-height: 29px;
+}
+.size_s {
+  height: 32px;
+  font-size: 13px;
+  line-height: 32px;
+}
+.size_m {
+  height: 36px;
+  font-size: 15px;
+  line-height: 36px;
+}
+.size_l {
+  height: 42px;
+  font-size: 18px;
+  line-height: 42px;
+}
+
+.variant_primary {
+  color: var(--button-primary-color);
+  background-color: var(--button-primary-background-color);
+  border-color: var(--button-primary-border-color);
+}
+.variant_primary:hover {
+  color: var(--button-primary-color-hovered);
+  background-color: var(--button-primary-background-color-hovered);
+  border-color: var(--button-primary-border-color-hovered);
+}
+.variant_primary:active {
+  color: var(--button-primary-color-active);
+  background-color: var(--button-primary-background-color-active);
+  border-color: var(--button-primary-border-color-active);
+}
+.variant_secondary {
+  color: var(--button-secondary-color);
+  background-color: var(--button-secondary-background-color);
+  border-color: var(--button-secondary-border-color);
+}
+.variant_secondary:hover {
+  color: var(--button-secondary-color-hovered);
+  background-color: var(--button-secondary-background-color-hovered);
+  border-color: var(--button-secondary-border-color-hovered);
+}
+.variant_secondary:active {
+  color: var(--button-secondary-color-active);
+  background-color: var(--button-secondary-background-color-active);
+  border-color: var(--button-secondary-border-color-active);
+}
+.variant_pseudo {
+  color: var(--button-pseudo-color);
+  background-color: var(--button-pseudo-background-color);
+  border-color: var(--button-pseudo-border-color);
+}
+.variant_pseudo:hover {
+  color: var(--button-pseudo-color-hovered);
+  background-color: var(--button-pseudo-background-color-hovered);
+  border-color: var(--button-pseudo-border-color-hovered);
+}
+.variant_pseudo:active {
+  color: var(--button-pseudo-color-active);
+  background-color: var(--button-pseudo-background-color-active);
+  border-color: var(--button-pseudo-border-color-active);
+}
+.variant_clear {
+  color: var(--button-clear-color);
+  background-color: transparent;
+  border-color: transparent;
+}
+.variant_clear:hover {
+  color: var(--button-clear-color-hovered);
+}
+.variant_clear:active {
+  color: var(--button-clear-color-active);
+}

package/esm/Button/index.js

@@ -1,7 +1,7 @@
 import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import classNames from 'classnames/bind';
-import styles from './Button.module.scss.js';
+import styles from './Button.module.css';
 
 var clx = classNames.bind(styles);
 var Button = /*#__PURE__*/forwardRef(function (_a, ref) {

package/esm/Checkbox/Checkbox.module.css

@@ -0,0 +1,89 @@
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.wrapper {
+  display: flex;
+}
+
+.label {
+  display: inline-flex;
+  line-height: 18px;
+  position: relative;
+  cursor: pointer;
+}
+
+.text {
+  font-size: 16px;
+  margin-block-start: -1px;
+  margin-inline-start: 8px;
+}
+
+.fakeCheckbox {
+  background-color: var(--palette-white);
+  block-size: 16px;
+  border: 1px solid var(--palette-bg-3);
+  border-radius: 4px;
+  box-sizing: border-box;
+  direction: ltr;
+  display: block;
+  flex-shrink: 0;
+  inline-size: 16px;
+  position: relative;
+  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.checked {
+  border: 0;
+  background-color: var(--checkbox-primary-background-color-checked);
+}
+.checked::after {
+  box-sizing: content-box;
+  content: "";
+  display: block;
+  position: absolute;
+  block-size: 8px;
+  border-block-end: 2px solid var(--palette-black);
+  border-inline-end: 2px solid var(--palette-black);
+  inline-size: 4px;
+  inset-block-start: 45%;
+  inset-inline-start: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.variant_primary_error {
+  border-color: red;
+  box-shadow: 0 0 0 2px red;
+}
+.variant_primary_checked::after {
+  border-block-end: 2px solid var(--palette-white);
+  border-inline-end: 2px solid var(--palette-white);
+}
+
+.control {
+  inset-inline-start: -9999px;
+  position: absolute;
+}
+.control:disabled + .fakeCheckbox::after {
+  border-block-end: 2px solid var(--palette-bg-4);
+  border-inline-end: 2px solid var(--palette-bg-4);
+}
+.control:hover:not(:disabled) + .fakeCheckbox {
+  border-color: var(--palette-bg-3);
+}
+.control_variant_primary:focus:not(:disabled) + .fakeCheckbox {
+  box-shadow: 0 0 0 2px var(--checkbox-primary-box-shadow-focused);
+}
+.control_variant_primary:hover:not(:disabled) + .fakeCheckbox {
+  background-color: var(--checkbox-primary-background-color-hovered);
+}
+.control_variant_primary:active:not(:disabled) + .fakeCheckbox {
+  background-color: var(--checkbox-primary-background-color-active);
+  border-color: var(--checkbox-primary-border-color-active);
+  box-shadow: var(--checkbox-primary-box-shadow-active);
+}
+.control_variant_primary:disabled + .fakeCheckbox {
+  z-index: 1;
+  background-color: var(--checkbox-primary-background-color-disabled);
+}

package/esm/Checkbox/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import classNames from 'classnames/bind';
 import Typography from '../Typography/index.js';
-import styles from './Checkbox.module.scss.js';
+import styles from './Checkbox.module.css';
 
 var clx = classNames.bind(styles);
 var Checkbox = function Checkbox(_a) {

package/esm/Counter/Counter.module.css

@@ -0,0 +1,34 @@
+.root {
+  background-color: var(--palette-white);
+  border-radius: 4px;
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: 16px;
+  max-block-size: 40px;
+  min-block-size: 40px;
+  min-inline-size: 96px;
+  overflow: hidden;
+  position: relative;
+}
+.root_fullWidth {
+  inline-size: 100%;
+}
+
+.control {
+  align-items: center;
+  block-size: 38px;
+  display: flex;
+  justify-content: space-between;
+  gap: 4px;
+}
+.control_fullWidth {
+  inline-size: 100%;
+}
+
+.value {
+  font-weight: 500;
+  font-size: 18px;
+  inline-size: 24px;
+  user-select: none;
+  text-align: center;
+}

package/esm/Counter/index.js

@@ -3,7 +3,7 @@ import classNames from 'classnames/bind';
 import Button from '../Button/index.js';
 import MinusIcon from '../Icons/Minus.js';
 import PlusIcon from '../Icons/Plus.js';
-import styles from './Counter.module.scss.js';
+import styles from './Counter.module.css';
 
 var clx = classNames.bind(styles);
 var Counter = function Counter(_a) {

package/esm/DotsLoader/DotsLoader.module.css

@@ -0,0 +1,39 @@
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  width: 70px;
+}
+
+.dot {
+  animation-duration: 1.6s;
+  animation-iteration-count: infinite;
+  animation-name: pending;
+  background-color: var(--palette-black);
+  border-radius: 5px;
+  height: 10px;
+  transform: scale(0);
+  width: 10px;
+}
+@keyframes pending {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+.dot_first {
+  animation-delay: 0s;
+}
+.dot_second {
+  animation-delay: 0.2s;
+}
+.dot_third {
+  animation-delay: 0.4s;
+}
+.dot_fourth {
+  animation-delay: 0.6s;
+}

package/esm/DotsLoader/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames/bind';
-import styles from './DotsLoader.module.scss.js';
+import styles from './DotsLoader.module.css';
 
 var clx = classNames.bind(styles);
 var DotsLoader = function DotsLoader(_a) {

package/esm/Dropdown/Dropdown.module.css

@@ -0,0 +1,13 @@
+.popperContainer {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.overlayContainer {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  overflow: hidden;
+  border-color: var(--palette-bg-2);
+  background-color: var(--palette-white);
+}

package/esm/Dropdown/index.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import Portal from '../Portal/index.js';
 import { on } from '../helpers/on.js';
 import ClickOutside from '../ClickOutside/index.js';
-import dropDownStyles from './Dropdown.module.scss.js';
+import dropDownStyles from './Dropdown.module.css';
 
 var Dropdown = function Dropdown(_a) {
   var children = _a.children,