colibri-ui 0.7.85 → 0.7.87

package/Avatar/assets/user-circle.svg.js

@@ -24,30 +24,20 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-var _g, _defs;
+var _path;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 var SvgUserCircle = function SvgUserCircle(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: 42,
-    height: 42,
+    height: 39,
     fill: "none"
-  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
-    clipPath: "url(#user-circle_svg__a)"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "#ECEEF2",
-    d: "M21.266 41.475C32.717 41.475 42 32.194 42 20.745S32.717.013 21.266.013C9.816.014.532 9.295.532 20.744s9.283 20.731 20.734 20.731"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#000",
-    d: "M11.949 19.867a1.866 1.866 0 1 0 0-3.732 1.866 1.866 0 0 0 0 3.732M26.044 30.49c.29 1.953-.396 3.77-1.887 4.53-1.49.76-3.364.246-4.772-1.136 1.01-.185 2.208-.558 3.559-1.247 1.35-.688 2.356-1.437 3.1-2.147M26.048 19.867a1.866 1.866 0 1 0 0-3.732 1.866 1.866 0 0 0 0 3.732M20.765 15.72l2.955 7.878h-5.91z"
-  }))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
-    id: "user-circle_svg__a"
-  }, /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "#fff",
-    d: "M0 0h42v41.475H0z"
-  })))));
+    d: "M33.6 37.997c-2.9-1.709-7-4.725-8.6-4.725h-3.802c-.9 0-2.8-.805-3-1.507-.199-.503-.199-1.408-.1-2.212 0-.1.303-.1.402 0 .8.905 1.099 1.508 1.9 1.508h1.8c.7 0 3.1-2.111 4.099-4.725.2-.603.4-1.608.5-2.713 0-.1.1-.202.1-.1.1.501.3 1.105.4 1.105.3.201.7-.603 1.2-1.709.5-1.006.5-1.608.7-2.413.3-1.105-.1-1.91-.4-1.91a.91.91 0 0 0-.7.302c-.1 0-.2 0-.2-.1 0-.704.1-1.81.9-2.413-1.1-1.005-.4-2.714-.4-2.714.4.2.4 0 .4 0l-.2-1.106c.6-.1 1.1-.603 1.1-.603s-1.6-.402-2.4-1.005c.7-.202 1.117-.957 1.117-.957S27 9.952 26 9.65c.9-.904.3-2.15.3-2.15s-1.6.441-4.7.441c-2.2-.1-3-.402-4.6 1.207-1.9 1.909-1.9 2.412-3.1 2.412 1 1.407.5 2.814.5 2.814l-.1 2.112.1.401s0 .1.1.302c0 .101 0 .303.1.402l.3 1.61s-.1.1-.2 0a1.42 1.42 0 0 0-1.2-.604c-.3 0-.8.805-.4 1.91.3.804.6 1.306.9 2.412s.9 1.91 1.2 1.71q.15-.153.3-.906c0-.1.1 0 .2.102.1 1.004.3 1.908.5 2.411.2.302.4.703.6 1.005-.2 1.709-.4 3.82-.8 5.428-2.6.704-6.6 1.91-10 2.714-3.8-3.416-6-8.643-6-14.273C0 9.45 9.4 0 21 0s21 9.45 21 21.11c0 6.936-3.3 13.066-8.4 16.887"
+  })));
 };
-var userCircleUrl = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2242%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23a%29%22%3E%3Cpath%20fill%3D%22%23ECEEF2%22%20d%3D%22M21.266%2041.475C32.717%2041.475%2042%2032.194%2042%2020.745S32.717.013%2021.266.013C9.816.014.532%209.295.532%2020.744s9.283%2020.731%2020.734%2020.731%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M11.949%2019.867a1.866%201.866%200%201%200%200-3.732%201.866%201.866%200%200%200%200%203.732%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20fillRule%3D%22evenodd%22%20d%3D%22M26.044%2030.49c.29%201.953-.396%203.77-1.887%204.53-1.49.76-3.364.246-4.772-1.136%201.01-.185%202.208-.558%203.559-1.247%201.35-.688%202.356-1.437%203.1-2.147%22%20clipRule%3D%22evenodd%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M26.048%2019.867a1.866%201.866%200%201%200%200-3.732%201.866%201.866%200%200%200%200%203.732%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20fillRule%3D%22evenodd%22%20d%3D%22m20.765%2015.72%202.955%207.878h-5.91z%22%20clipRule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%200h42v41.475H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
+var userCircleUrl = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2239%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23ECEEF2%22%20fillRule%3D%22evenodd%22%20d%3D%22M33.6%2037.997c-2.9-1.709-7-4.725-8.6-4.725h-3.802c-.9%200-2.8-.805-3-1.507-.199-.503-.199-1.408-.1-2.212%200-.1.303-.1.402%200%20.8.905%201.099%201.508%201.9%201.508h1.8c.7%200%203.1-2.111%204.099-4.725.2-.603.4-1.608.5-2.713%200-.1.1-.202.1-.1.1.501.3%201.105.4%201.105.3.201.7-.603%201.2-1.709.5-1.006.5-1.608.7-2.413.3-1.105-.1-1.91-.4-1.91a.91.91%200%200%200-.7.302c-.1%200-.2%200-.2-.1%200-.704.1-1.81.9-2.413-1.1-1.005-.4-2.714-.4-2.714.4.2.4%200%20.4%200l-.2-1.106c.6-.1%201.1-.603%201.1-.603s-1.6-.402-2.4-1.005c.7-.202%201.117-.957%201.117-.957S27%209.952%2026%209.65c.9-.904.3-2.15.3-2.15s-1.6.441-4.7.441c-2.2-.1-3-.402-4.6%201.207-1.9%201.909-1.9%202.412-3.1%202.412%201%201.407.5%202.814.5%202.814l-.1%202.112.1.401s0%20.1.1.302c0%20.101%200%20.303.1.402l.3%201.61s-.1.1-.2%200a1.42%201.42%200%200%200-1.2-.604c-.3%200-.8.805-.4%201.91.3.804.6%201.306.9%202.412s.9%201.91%201.2%201.71q.15-.153.3-.906c0-.1.1%200%20.2.102.1%201.004.3%201.908.5%202.411.2.302.4.703.6%201.005-.2%201.709-.4%203.82-.8%205.428-2.6.704-6.6%201.91-10%202.714C2.2%2031.967%200%2026.74%200%2021.11%200%209.45%209.4%200%2021%200s21%209.45%2021%2021.11c0%206.936-3.3%2013.066-8.4%2016.887%22%20clipRule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E";
 
 exports.ReactComponent = SvgUserCircle;
 exports.default = userCircleUrl;

package/Button/Button.module.css

@@ -1,7 +1,7 @@
 .root {
   align-items: center;
   border: 1px solid;
-  border-radius: var(--button-border-radius);
+  border-radius: 1.125rem;
   box-sizing: border-box;
   color: 0.15s linear;
   cursor: pointer;
@@ -68,88 +68,88 @@
 }
 
 .variant_primary {
-  background-color: var(--button-primary-background-color);
+  background-color: var(--button-primary-bg);
   border-color: var(--button-primary-border-color);
   color: var(--button-primary-color);
 }
 .variant_primary:hover {
-  background-color: var(--button-primary-background-color-hovered);
+  background-color: var(--button-primary-bg-hovered);
   border-color: var(--button-primary-border-color-hovered);
   color: var(--button-primary-color-hovered);
 }
 .variant_primary:active {
-  background-color: var(--button-primary-background-color-active);
+  background-color: var(--button-primary-bg-active);
   border-color: var(--button-primary-border-color-active);
   color: var(--button-primary-color-active);
 }
 .variant_primary_disabled {
-  background-color: var(--button-primary-background-color-disabled);
+  background-color: var(--button-primary-bg-disabled);
   border-color: var(--button-primary-border-color-disabled);
   color: var(--button-primary-color-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
 .variant_secondary {
-  background-color: var(--button-secondary-background-color);
+  background-color: var(--button-secondary-bg);
   border-color: var(--button-secondary-border-color);
   color: var(--button-secondary-color);
 }
 .variant_secondary:hover {
-  background-color: var(--button-secondary-background-color-hovered);
+  background-color: var(--button-secondary-bg-hovered);
   border-color: var(--button-secondary-border-color-hovered);
   color: var(--button-secondary-color-hovered);
 }
 .variant_secondary:active {
-  background-color: var(--button-secondary-background-color-active);
+  background-color: var(--button-secondary-bg-active);
   border-color: var(--button-secondary-border-color-active);
   color: var(--button-secondary-color-active);
 }
 .variant_secondary_disabled {
-  background-color: var(--button-secondary-background-color-disabled);
+  background-color: var(--button-secondary-bg-disabled);
   border-color: var(--button-secondary-border-color-disabled);
   color: var(--button-secondary-color-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
 .variant_pseudo {
-  background-color: var(--button-pseudo-background-color);
+  background-color: var(--button-pseudo-bg);
   border-color: var(--button-pseudo-border-color);
   color: var(--button-pseudo-color);
 }
 .variant_pseudo:hover {
-  background-color: var(--button-pseudo-background-color-hovered);
+  background-color: var(--button-pseudo-bg-hovered);
   border-color: var(--button-pseudo-border-color-hovered);
   color: var(--button-pseudo-color-hovered);
 }
 .variant_pseudo:active {
-  background-color: var(--button-pseudo-background-color-active);
+  background-color: var(--button-pseudo-bg-active);
   border-color: var(--button-pseudo-border-color-active);
   color: var(--button-pseudo-color-active);
 }
 .variant_pseudo_disabled {
-  background-color: var(--button-pseudo-background-color-disabled);
+  background-color: var(--button-pseudo-bg-disabled);
   border-color: var(--button-pseudo-border-color-disabled);
   color: var(--button-pseudo-color-disabled);
   cursor: not-allowed;
   pointer-events: none;
 }
 .variant_outline {
-  background-color: var(--button-outline-background-color);
+  background-color: var(--button-outline-bg);
   border-color: var(--button-outline-border-color);
   color: var(--button-outline-color);
 }
 .variant_outline:hover {
-  background-color: var(--button-outline-background-color-hovered);
+  background-color: var(--button-outline-bg-hovered);
   border-color: var(--button-outline-border-color-hovered);
   color: var(--button-outline-color-hovered);
 }
 .variant_outline:active {
-  background-color: var(--button-outline-background-color-active);
+  background-color: var(--button-outline-bg-active);
   border-color: var(--button-outline-border-color-active);
   color: var(--button-outline-color-active);
 }
 .variant_outline_disabled {
-  background-color: var(--button-outline-background-color-disabled);
+  background-color: var(--button-outline-bg-disabled);
   border-color: var(--button-outline-border-color-disabled);
   color: var(--button-outline-color-disabled);
   cursor: not-allowed;
@@ -167,7 +167,7 @@
   color: var(--button-clear-color-active);
 }
 .variant_clear_disabled {
-  background-color: var(--button-clear-background-color-disabled);
+  background-color: var(--button-clear-bg-disabled);
   border-color: var(--button-clear-border-color-disabled);
   color: var(--button-clear-color-disabled);
   cursor: not-allowed;

package/Checkbox/Checkbox.module.css

@@ -35,7 +35,7 @@
 }
 
 .checked {
-  background-color: var(--checkbox-background-color-checked);
+  background-color: var(--checkbox-bg-checked);
   border: 0;
 }
 .checked::after {
@@ -76,14 +76,14 @@
   box-shadow: 0 0 0 2px var(--checkbox-box-shadow-focused);
 }
 .control_variant_primary:hover:not(:disabled) + .fake-checkbox {
-  background-color: var(--checkbox-background-color-hovered);
+  background-color: var(--checkbox-bg-hovered);
 }
 .control_variant_primary:active:not(:disabled) + .fake-checkbox {
-  background-color: var(--checkbox-background-color-active);
+  background-color: var(--checkbox-bg-active);
   border-color: var(--checkbox-border-color-active);
   box-shadow: var(--checkbox-box-shadow-active);
 }
 .control_variant_primary:disabled + .fake-checkbox {
-  background-color: var(--checkbox-background-color-disabled);
+  background-color: var(--checkbox-bg-disabled);
   z-index: 1;
 }

package/InputRadio/InputRadio.module.css

@@ -51,26 +51,26 @@
   position: absolute;
 }
 .input:not(.input_disabled, .input_error):hover + .icon {
-  border-color: var(--input-radio-background-color-hovered);
+  border-color: var(--input-radio-bg-hovered);
 }
 .input:not(.input_disabled, .input_error):focus + .icon {
   box-shadow: 0 0 0 2px var(--input-radio-box-shadow-focused);
 }
 .input:not(.input_disabled, .input_error):active + .icon {
-  background-color: var(--input-radio-background-color-focused);
+  background-color: var(--input-radio-bg-focused);
   border-color: var(--input-radio-border-color-focused);
   box-shadow: 0 0 0 2px var(--input-radio-box-shadow-focused);
 }
 .input:not(.input_disabled, .input_error) .input_checked:hover + .icon {
-  border-color: var(--input-radio-background-color-hovered);
+  border-color: var(--input-radio-bg-hovered);
 }
 .input:not(.input_disabled, .input_error) .input_checked:active + .icon {
   background-color: var(--palette-white);
-  border: 4px solid var(--input-radio-background-color-checked);
+  border: 4px solid var(--input-radio-bg-checked);
 }
 .input_checked + .icon {
   background-color: var(--palette-white);
-  border: 4px solid var(--input-radio-background-color-checked);
+  border: 4px solid var(--input-radio-bg-checked);
 }
 .input_disabled + .icon {
   border-radius: 50%;

package/Status/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { StatusProps } from "./index.props";
+declare const Status: ({ className, tag: Component, children, type, }: StatusProps) => React.JSX.Element;
+export default Status;

package/Status/index.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var styles = require('./index.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var Status = function Status(_a) {
+  var _b;
+  var className = _a.className,
+    _c = _a.tag,
+    Component = _c === void 0 ? "span" : _c,
+    children = _a.children,
+    type = _a.type;
+  return /*#__PURE__*/React__default.default.createElement(Component, {
+    className: clx(styles__default.default.root, (_b = {}, _b["root_".concat(type)] = !!type, _b), className)
+  }, children);
+};
+
+exports.default = Status;

package/Status/index.module.css

@@ -0,0 +1,45 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: var(--status-neutral-bg);
+  line-height: 1.5rem;
+  padding: 0 0.5rem;
+  border-radius: 6rem;
+  inline-size: fit-content;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  vertical-align: middle;
+}
+.root::before {
+  background-color: var(--status-neutral);
+  content: "";
+  inline-size: 0.4rem;
+  block-size: 0.4rem;
+  border-radius: 100%;
+}
+.root_success {
+  background-color: var(--status-success-bg);
+}
+.root_success::before {
+  background-color: var(--status-success);
+}
+.root_info {
+  background-color: var(--status-info-bg);
+}
+.root_info::before {
+  background-color: var(--status-info);
+}
+.root_failure {
+  background-color: var(--status-failure-bg);
+}
+.root_failure::before {
+  background-color: var(--status-failure);
+}
+.root_warning {
+  background-color: var(--status-warning-bg);
+}
+.root_warning::before {
+  background-color: var(--status-warning);
+}

package/Status/index.props.d.ts

@@ -0,0 +1,13 @@
+export type StatusTag = "span" | "div";
+export declare enum STATUS_TYPE {
+    SUCCESS = "success",
+    FAILURE = "failure",
+    INFO = "info",
+    WARNING = "warning"
+}
+export type StatusProps = {
+    className?: string;
+    tag?: StatusTag;
+    children?: string;
+    type?: STATUS_TYPE;
+};

package/Status/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Status/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Switch/Switch.module.css

@@ -18,7 +18,7 @@
   width: 40px;
 }
 .wrapper_variant_primary {
-  background-color: var(--switch-background-color);
+  background-color: var(--switch-bg);
   border-color: var(--switch-border-color);
 }
 
@@ -48,7 +48,7 @@
   z-index: 1;
 }
 .checkbox:checked + .wrapper {
-  background-color: var(--switch-background-color-checked);
+  background-color: var(--switch-bg-checked);
   border-color: var(--switch-border-color-checked);
 }
 .checkbox:checked + .wrapper .base-switch {

package/Theme/colors/common.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 
 var Common = {
-  WHITE: "#fff",
+  WHITE: "#FFF",
   BLACK: "#000"
 };
 var Backgrounds = {
@@ -16,8 +16,8 @@ var Backgrounds = {
   BG_5: "#BCC1CC"
 };
 var Accents = {
-  ALERT: "#ff564e",
-  SUCCESS: "#28bc00"
+  ALERT: "#FF564E",
+  SUCCESS: "#4AC99B"
 };
 var Color = tslib.__assign(tslib.__assign(tslib.__assign({}, Common), Accents), Backgrounds);
 

package/Theme/colors/theme_buenos_aires.js

@@ -5,17 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 
 var PrimaryBA = {
-  PRIMARY_BA_1: "#ffe695",
-  PRIMARY_BA_2: "#ffe07b",
-  PRIMARY_BA_3: "#ffd85a",
-  PRIMARY_BA_4: "#ffce31",
-  PRIMARY_BA_5: "#ffc818"
+  PRIMARY_BA_1: "#FFE695",
+  PRIMARY_BA_2: "#FFE07B",
+  PRIMARY_BA_3: "#FFD85A",
+  PRIMARY_BA_4: "#FFCE31",
+  PRIMARY_BA_5: "#FFC818"
 };
 var SecondaryBA = {
-  SECONDARY_BA_1: "#7d7d7d",
-  SECONDARY_BA_2: "#5c5c5c",
+  SECONDARY_BA_1: "#7D7D7D",
+  SECONDARY_BA_2: "#5C5C5C",
   SECONDARY_BA_3: "#333",
-  SECONDARY_BA_4: "#1f1f1f",
+  SECONDARY_BA_4: "#1F1F1F",
   SECONDARY_BA_5: "#000"
 };
 var TretiaryBA = {
@@ -23,13 +23,13 @@ var TretiaryBA = {
   TRETIARY_BA_2: "#C0CFF8",
   TRETIARY_BA_3: "#AFC3F5",
   TRETIARY_BA_4: "#80A0ED",
-  TRETIARY_BA_5: "#6088ea"
+  TRETIARY_BA_5: "#6088EA"
 };
 var BrandBA = {
-  BRAND_BA_1: "#fcdfe2",
-  BRAND_BA_2: "#facdd2",
-  BRAND_BA_3: "#F59fa7",
-  BRAND_BA_4: "#ef6975",
+  BRAND_BA_1: "#FCDFE2",
+  BRAND_BA_2: "#FACDD2",
+  BRAND_BA_3: "#F59FA7",
+  BRAND_BA_4: "#EF6975",
   BRAND_BA_5: "#E61428"
 };
 var Color = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, BrandBA), PrimaryBA), SecondaryBA), TretiaryBA);

package/Theme/colors/theme_default.js

@@ -12,18 +12,18 @@ var Primary = {
   PRIMARY_DEFAULT_5: "#0066DC"
 };
 var Secondary = {
-  SECONDARY_DEFAULT_1: "#fff1db",
-  SECONDARY_DEFAULT_2: "#ffdaa3",
-  SECONDARY_DEFAULT_3: "#ffca79",
-  SECONDARY_DEFAULT_4: "#f4b968",
-  SECONDARY_DEFAULT_5: "#ffab0f"
+  SECONDARY_DEFAULT_1: "#FFF1DB",
+  SECONDARY_DEFAULT_2: "#FFDAA3",
+  SECONDARY_DEFAULT_3: "#FFCA79",
+  SECONDARY_DEFAULT_4: "#F4B968",
+  SECONDARY_DEFAULT_5: "#FFAB0F"
 };
 var Tretiary = {
   TRETIARY_DEFAULT_1: "#FFF5F0",
   TRETIARY_DEFAULT_2: "#FFEAE2",
   TRETIARY_DEFAULT_3: "#FFD8CA",
-  TRETIARY_DEFAULT_4: "#FFA384 ",
-  TRETIARY_DEFAULT_5: "#fc5200"
+  TRETIARY_DEFAULT_4: "#FFA384",
+  TRETIARY_DEFAULT_5: "#FC5200"
 };
 var Brand = {
   BRAND_DEFAULT_1: "#F393D2",