colibri-ui 0.7.84 → 0.7.86

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

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _g, _defs;
+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,
+    fill: "none"
+  }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    clipPath: "url(#user-circle_svg__a)"
+  }, /*#__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"
+  })))));
+};
+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";
+
+exports.ReactComponent = SvgUserCircle;
+exports.default = userCircleUrl;

package/Avatar/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classNames = require('classnames/bind');
 var constants = require('./constants.js');
-var maleCircle = require('./assets/male-circle.svg.js');
+var userCircle = require('./assets/user-circle.svg.js');
 var orgCircle = require('./assets/org-circle.svg.js');
 var styles = require('./Avatar.module.css');
 var index_props = require('./index.props.js');
@@ -28,7 +28,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
     _c = props.accountType,
     accountType = _c === void 0 ? index_props.AccountType.Organization : _c;
   var isOrg = accountType === index_props.AccountType.Organization;
-  var stubImageURL = isOrg ? orgCircle.default : maleCircle.default;
+  var stubImageURL = isOrg ? orgCircle.default : userCircle.default;
   return /*#__PURE__*/React__default.default.createElement("img", {
     alt: title,
     src: avatarURL || stubImageURL,

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/Chip/Chip.module.css

@@ -6,9 +6,7 @@
 .inner {
   box-sizing: border-box;
   display: flex;
-  font-family: Roboto, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  font: inherit;
   min-width: 0;
   place-items: stretch flex-start;
   transition-duration: 0.3s;

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/Menu/components/MenuItem/index.js

@@ -26,7 +26,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref,
     "data-component": "menu-item",
     style: {
-      backgroundColor: isSelected ? "var(--palette-primary-1, rgb(232, 240, 254))" : "transparent"
+      backgroundColor: isSelected ? "var(--palette-primary-1, rgb(232, 240, 254))" : ""
     },
     "data-testid": "menuitem",
     className: clx("item", (_b = {

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/TabsMenu/Tab/Tab.props.d.ts

@@ -9,7 +9,6 @@ export type TabProps = {
     onClick?: MouseEventHandler<HTMLLIElement>;
     innerRef?: RefObject<HTMLLIElement>;
     className?: string;
-    role?: string;
     tabIndex?: number;
     onKeyDown?: KeyboardEventHandler<HTMLElement>;
     size?: Size;

package/TabsMenu/index.js

@@ -24,9 +24,8 @@ var TabsMenu = function TabsMenu(_a) {
     tabs = _a.tabs,
     _b = _a.size,
     size = _b === void 0 ? "m" : _b,
-    externalTabsRefs = _a.tabsRefs,
-    props = tslib.__rest(_a, ["activeTab", "onChange", "className", "innerRef", "tabs", "size", "tabsRefs"]);
-  var tabsRefs = externalTabsRefs || React.useMemo(function () {
+    props = tslib.__rest(_a, ["activeTab", "onChange", "className", "innerRef", "tabs", "size"]);
+  var tabsRefs = React.useMemo(function () {
     return tabs.map(function () {
       return /*#__PURE__*/React.createRef();
     });

package/TabsMenu/index.props.d.ts

@@ -5,7 +5,6 @@ export type TabsMenuProps = {
     activeTab?: string;
     onChange?: (tabId: string) => void;
     tabs: TabProps[];
-    tabsRefs?: RefObject<HTMLLIElement>[];
     innerRef?: RefObject<HTMLUListElement>;
     className?: string;
     size?: Size;

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",