colibri-ui 0.7.40 → 0.7.42

package/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/Badge/Control/Control.module.css

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

package/Badge/Control/index.js

@@ -3,19 +3,20 @@
 var tslib = require('tslib');
 var React = require('react');
 var classNames = require('classnames');
-var Control_module = require('./Control.module.scss.js');
+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 styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var BadgeControl = function BadgeControl(_a) {
   var className = _a.className,
     children = _a.children,
     props = tslib.__rest(_a, ["className", "children"]);
   return /*#__PURE__*/React__default.default.createElement("span", tslib.__assign({
-    className: classNames__default.default(Control_module.default.root, className)
+    className: classNames__default.default(styles__default.default.root, className)
   }, props), children);
 };
 

package/Badge/index.js

@@ -6,14 +6,15 @@ var tslib = require('tslib');
 var React = require('react');
 var classNames = require('classnames/bind');
 var index = require('./Control/index.js');
-var Badge_module = require('./Badge.module.scss.js');
+var styles = require('./Badge.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(Badge_module.default);
+var clx = classNames__default.default.bind(styles__default.default);
 var Badge = function Badge(_a) {
   var _b;
   var className = _a.className,

package/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/Button/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 Button_module = require('./Button.module.scss.js');
+var styles = require('./Button.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(Button_module.default);
+var clx = classNames__default.default.bind(styles__default.default);
 var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _b;
   var className = _a.className,
@@ -31,7 +32,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   return /*#__PURE__*/React__default.default.createElement("button", tslib.__assign({
     onClick: onClick,
     ref: ref,
-    className: clx(Button_module.default.root, (_b = {
+    className: clx(styles__default.default.root, (_b = {
       root_icon: !!icon,
       root_disabled: disabled ? 1 : 0,
       root_fullWidth: fullWidth ? 1 : 0
@@ -39,11 +40,11 @@ var Button = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     disabled: disabled,
     "data-cy": "button"
   }, props), icon && /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(Button_module.default.icon)
+    className: clx(styles__default.default.icon)
   }, icon), iconStart && /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(Button_module.default.icon)
+    className: clx(styles__default.default.icon)
   }, iconStart), children && children, iconEnd && /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx(Button_module.default.icon)
+    className: clx(styles__default.default.icon)
   }, iconEnd));
 });
 

package/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/Checkbox/index.js

@@ -5,14 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classNames = require('classnames/bind');
 var index = require('../Typography/index.js');
-var Checkbox_module = require('./Checkbox.module.scss.js');
+var styles = require('./Checkbox.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(Checkbox_module.default);
+var clx = classNames__default.default.bind(styles__default.default);
 var Checkbox = function Checkbox(_a) {
   var _b, _c;
   var id = _a.id,
@@ -30,11 +31,11 @@ var Checkbox = function Checkbox(_a) {
     disabled = _a.disabled,
     isError = _a.isError;
   var control = /*#__PURE__*/React__default.default.createElement("label", {
-    className: clx(Checkbox_module.default.label)
+    className: clx(styles__default.default.label)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Checkbox_module.default.wrapper)
+    className: clx(styles__default.default.wrapper)
   }, /*#__PURE__*/React__default.default.createElement("input", {
-    className: clx(Checkbox_module.default.control, (_b = {}, _b["control_variant_".concat(variant)] = !!variant, _b), className),
+    className: clx(styles__default.default.control, (_b = {}, _b["control_variant_".concat(variant)] = !!variant, _b), className),
     type: "checkbox",
     id: id,
     name: name,
@@ -45,12 +46,12 @@ var Checkbox = function Checkbox(_a) {
     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))
+    className: clx(styles__default.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)
+    className: clx(styles__default.default.text)
   }, label)));
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Checkbox_module.default.root)
+    className: clx(styles__default.default.root)
   }, control, hint && ( /*#__PURE__*/React__default.default.createElement(index.default, {
     variant: isError ? "alert" : "secondary",
     tag: "span"

package/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/Counter/index.js

@@ -7,14 +7,15 @@ var classNames = require('classnames/bind');
 var index = require('../Button/index.js');
 var Minus = require('../Icons/Minus.js');
 var Plus = require('../Icons/Plus.js');
-var Counter_module = require('./Counter.module.scss.js');
+var styles = require('./Counter.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(Counter_module.default);
+var clx = classNames__default.default.bind(styles__default.default);
 var Counter = function Counter(_a) {
   var _b = _a.value,
     value = _b === void 0 ? 1 : _b,
@@ -29,11 +30,11 @@ var Counter = function Counter(_a) {
   var minusDisabled = disabled || value <= min;
   var plusDisabled = disabled || value >= max;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Counter_module.default.root, {
+    className: clx(styles__default.default.root, {
       root_fullWidth: fullWidth ? 1 : 0
     }, className)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Counter_module.default.control, {
+    className: clx(styles__default.default.control, {
       control_fullWidth: fullWidth ? 1 : 0
     })
   }, /*#__PURE__*/React__default.default.createElement(index.default, {
@@ -48,7 +49,7 @@ var Counter = function Counter(_a) {
     },
     "aria-label": "decrease"
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(Counter_module.default.value)
+    className: clx(styles__default.default.value)
   }, value), /*#__PURE__*/React__default.default.createElement(index.default, {
     icon: /*#__PURE__*/React__default.default.createElement(Plus.default, {
       width: 16,

package/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/DotsLoader/index.js

@@ -4,14 +4,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classNames = require('classnames/bind');
-var DotsLoader_module = require('./DotsLoader.module.scss.js');
+var styles = require('./DotsLoader.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(DotsLoader_module.default);
+var clx = classNames__default.default.bind(styles__default.default);
 var DotsLoader = function DotsLoader(_a) {
   var color = _a.color;
   return /*#__PURE__*/React__default.default.createElement("div", {

package/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/Dropdown/index.js

@@ -9,12 +9,13 @@ var classNames = require('classnames');
 var index = require('../Portal/index.js');
 var on = require('../helpers/on.js');
 var index$1 = require('../ClickOutside/index.js');
-var Dropdown_module = require('./Dropdown.module.scss.js');
+var dropDownStyles = require('./Dropdown.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 dropDownStyles__default = /*#__PURE__*/_interopDefault(dropDownStyles);
 
 var Dropdown = function Dropdown(_a) {
   var children = _a.children,
@@ -125,7 +126,7 @@ var Dropdown = function Dropdown(_a) {
     onClick: onClickOutside
   }, /*#__PURE__*/React__default.default.createElement("div", tslib.__assign({
     ref: setPopperElement,
-    className: classNames__default.default(Dropdown_module.default.popperContainer),
+    className: classNames__default.default(dropDownStyles__default.default.popperContainer),
     style: tslib.__assign(tslib.__assign(tslib.__assign({}, styles.popper), {
       zIndex: zIndex,
       minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
@@ -134,7 +135,7 @@ var Dropdown = function Dropdown(_a) {
     }),
     tabIndex: 0
   }, attributes.popper), /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(Dropdown_module.default.overlayContainer),
+    className: classNames__default.default(dropDownStyles__default.default.overlayContainer),
     onClick: onClickOverlay
   }, overlay))))));
 };

package/Grid/Grid.module.css

@@ -0,0 +1,8 @@
+.root {
+  width: 100%;
+}
+
+.items {
+  display: grid;
+  grid-auto-flow: row dense;
+}

package/Grid/Item/Grid-Item.module.css

@@ -0,0 +1,3 @@
+.full {
+  grid-column: 1/-1;
+}

package/Grid/Item/index.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classNames = require('classnames');
-var GridItem_module = require('./Grid-Item.module.scss.js');
+var styles = require('./Grid-Item.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 GridItem = function GridItem(_a) {
   var _b;
@@ -18,7 +19,7 @@ var GridItem = function GridItem(_a) {
     fullWidth = _c === void 0 ? false : _c,
     className = _a.className;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default((_b = {}, _b[GridItem_module.default.full] = fullWidth, _b), className)
+    className: classNames__default.default((_b = {}, _b[styles__default.default.full] = fullWidth, _b), className)
   }, children);
 };
 

package/Grid/index.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classNames = require('classnames');
-var Grid_module = require('./Grid.module.scss.js');
+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 styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var Grid = function Grid(_a) {
   var children = _a.children,
@@ -21,9 +22,9 @@ var Grid = function Grid(_a) {
     gridItemMinWidth = _d === void 0 ? 136 : _d,
     className = _a.className;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(Grid_module.default.root, className)
+    className: classNames__default.default(styles__default.default.root, className)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(Grid_module.default.items),
+    className: classNames__default.default(styles__default.default.items),
     style: {
       rowGap: "".concat(gridRowGap, "px"),
       columnGap: "".concat(gridColumnGap, "px"),

package/Image/Image.module.css

@@ -0,0 +1,19 @@
+.root {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.root img {
+  width: 100%;
+  height: 100%;
+  visibility: visible;
+  font: 0/0 a;
+  border: 0;
+  object-fit: cover;
+  text-indent: -100rem;
+}
+.root img :-moz-broken {
+  opacity: 0;
+}