colibri-ui 0.7.72 → 0.7.74

package/Avatar/Avatar.module.css

@@ -0,0 +1,12 @@
+.avatar {
+  transition: border-color 0.15s ease;
+  border-radius: 100%;
+  box-sizing: border-box;
+}
+.avatar_bordered {
+  border: 4px solid transparent;
+  background-color: var(--palette-white);
+}
+.avatar_bordered:hover {
+  border-color: rgba(95, 99, 104, 0.24);
+}

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

@@ -0,0 +1,62 @@
+'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 _circle, _mask, _g;
+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 SvgMaleCircle = function SvgMaleCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 42,
+    height: 42,
+    fill: "none"
+  }, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 21,
+    cy: 21,
+    r: 21,
+    fill: "#eceef2"
+  })), _mask || (_mask = /*#__PURE__*/React__namespace.createElement("mask", {
+    id: "male-circle_svg__a",
+    width: 42,
+    height: 42,
+    x: 0,
+    y: 0,
+    maskUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 21,
+    cy: 21,
+    r: 21,
+    fill: "#eceef2"
+  }))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    mask: "url(#male-circle_svg__a)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#bcc1cc",
+    d: "M14.263 22.623c.242.876 1.197 1.356 1.38 2.246q.047.22.096.49c.246 1.331.695 1.944 1.228 2.22.398.205.709.595.63 1.036-.055.31-.174.608-.4.816-.52.473-2.07.675-3.75.895-1.26.164-2.592.339-3.613.644-2.443.727-2.742 4.037-2.815 6.318a3.484 3.484 0 0 0 2.937 3.521l9.974 1.576a4 4 0 0 0 1.444-.035l10.016-2.095c2.04-.427 3.428-2.358 2.864-4.364-.46-1.636-1.155-3.386-2.147-4.213-.942-.786-2.864-1.1-4.605-1.384-1.405-.23-2.691-.44-3.248-.863-.388-.294-.448-.848-.409-1.332a.56.56 0 0 1 .26-.409c.882-.597 1.106-1.223 1.477-2.666.076-.299.136-.544.184-.744.116-.483.683-.887.922-1.323.175-.315.862-2.777.862-3.223 0-.497-.676-1.067-.564-1.55.158-.677.318-1.562.318-2.355 0-2.004-1.952-4.829-6.649-4.829-1.683 0-2.276.621-2.839 1.212a1.14 1.14 0 0 1-.857.332c-2.607-.05-2.873 1.175-3.066 2.3-.176 1.03.212 2.85.45 3.811.044.183-.289.539-.45.636-.368.22.124 2.443.37 3.332"
+  }))));
+};
+var maleCircleUrl = "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%20viewBox%3D%220%200%2042%2042%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23eceef2%22%2F%3E%3Cmask%20id%3D%22male-circle_svg__a%22%20width%3D%2242%22%20height%3D%2242%22%20x%3D%220%22%20y%3D%220%22%20maskUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23eceef2%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23male-circle_svg__a%29%22%3E%3Cpath%20fill%3D%22%23bcc1cc%22%20d%3D%22M14.263%2022.623c.242.876%201.197%201.356%201.38%202.246.031.147.063.31.096.49.246%201.331.695%201.944%201.228%202.22.398.205.709.595.63%201.036-.055.31-.174.608-.4.816-.52.473-2.07.675-3.75.895-1.26.164-2.592.339-3.613.644-2.443.727-2.742%204.037-2.815%206.318a3.484%203.484%200%20002.937%203.521l9.974%201.576a4%204%200%20001.444-.035l10.016-2.095c2.04-.427%203.428-2.358%202.864-4.364-.46-1.636-1.155-3.386-2.147-4.213-.942-.786-2.864-1.1-4.605-1.384-1.405-.23-2.691-.44-3.248-.863-.388-.294-.448-.848-.409-1.332a.56.56%200%2001.26-.409c.882-.597%201.106-1.223%201.477-2.666.076-.299.136-.544.184-.744.116-.483.683-.887.922-1.323.175-.315.862-2.777.862-3.223%200-.497-.676-1.067-.564-1.55.158-.677.318-1.562.318-2.355%200-2.004-1.952-4.829-6.649-4.829-1.683%200-2.276.621-2.839%201.212a1.142%201.142%200%2001-.857.332c-2.607-.05-2.873%201.175-3.066%202.3-.176%201.03.212%202.85.45%203.811.044.183-.289.539-.45.636-.368.22.124%202.443.37%203.332z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+exports.ReactComponent = SvgMaleCircle;
+exports.default = maleCircleUrl;

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

@@ -0,0 +1,64 @@
+'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 _circle, _mask, _g;
+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 SvgOrgCircle = function SvgOrgCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 42,
+    height: 42,
+    fill: "none"
+  }, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 21,
+    cy: 21,
+    r: 21,
+    fill: "#eceef2"
+  })), _mask || (_mask = /*#__PURE__*/React__namespace.createElement("mask", {
+    id: "org-circle_svg__a",
+    width: 42,
+    height: 42,
+    x: 0,
+    y: 0,
+    maskUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 21,
+    cy: 21,
+    r: 21,
+    fill: "#eceef2"
+  }))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    mask: "url(#org-circle_svg__a)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#bcc1cc",
+    fillRule: "evenodd",
+    d: "M19.103 27.36V34H9V12.062L22.567 6v21.36zm-6.64 0v1.733h3.176V27.36h-3.175zm0-6.638v1.732h6.64v-1.732zm0-4.042v1.732h6.64V16.68zM32.67 27.36h-6.062v1.733h6.062V34h-9.526V18.124h9.526z",
+    clipRule: "evenodd"
+  }))));
+};
+var orgCircleUrl = "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%20viewBox%3D%220%200%2042%2042%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23eceef2%22%2F%3E%3Cmask%20id%3D%22org-circle_svg__a%22%20width%3D%2242%22%20height%3D%2242%22%20x%3D%220%22%20y%3D%220%22%20maskUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23eceef2%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23org-circle_svg__a%29%22%3E%3Cpath%20fill%3D%22%23bcc1cc%22%20fill-rule%3D%22evenodd%22%20d%3D%22M19.103%2027.36V34H9V12.062L22.567%206v21.36h-3.464zm-6.64%200v1.733h3.176V27.36h-3.175zm0-6.638v1.732h6.64v-1.732h-6.64zm0-4.042v1.732h6.64V16.68h-6.64zM32.67%2027.36h-6.062v1.733h6.062V34h-9.526V18.124h9.526v9.237z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+exports.ReactComponent = SvgOrgCircle;
+exports.default = orgCircleUrl;

package/Avatar/constants.d.ts

@@ -0,0 +1,7 @@
+export declare enum AvatarSizes {
+    S = "2rem",
+    M = "3rem",
+    L = "3.5rem",
+    XL = "5rem",
+    XXL = "6rem"
+}

package/Avatar/constants.js

@@ -0,0 +1,10 @@
+'use strict';
+
+exports.AvatarSizes = void 0;
+(function (AvatarSizes) {
+  AvatarSizes["S"] = "2rem";
+  AvatarSizes["M"] = "3rem";
+  AvatarSizes["L"] = "3.5rem";
+  AvatarSizes["XL"] = "5rem";
+  AvatarSizes["XXL"] = "6rem";
+})(exports.AvatarSizes || (exports.AvatarSizes = {}));

package/Avatar/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { AvatarProps } from './index.props';
+declare const Avatar: FC<AvatarProps>;
+export default Avatar;

package/Avatar/index.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var constants = require('./constants.js');
+var maleCircle = require('./assets/male-circle.svg.js');
+var orgCircle = require('./assets/org-circle.svg.js');
+var styles = require('./Avatar.module.css');
+var classNames = require('classnames/bind');
+var index_props = require('./index.props.js');
+var index = require('../Image/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var Avatar = /*#__PURE__*/React.memo(function (props) {
+  var avatarURL = props.avatarURL,
+    _a = props.size,
+    size = _a === void 0 ? constants.AvatarSizes.M : _a,
+    className = props.className,
+    bordered = props.bordered,
+    _b = props.title,
+    title = _b === void 0 ? '' : _b,
+    _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;
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
+    alt: title,
+    src: avatarURL || stubImageURL,
+    width: size,
+    height: size,
+    className: clx(styles__default.default.avatar, {
+      'avatar_bordered': !!bordered
+    }, [className])
+  });
+});
+
+exports.default = Avatar;

package/Avatar/index.props.d.ts

@@ -0,0 +1,13 @@
+import { AvatarSizes } from "./constants";
+export declare enum AccountType {
+    Person = "person",
+    Organization = "org"
+}
+export type AvatarProps = {
+    accountType?: AccountType;
+    title?: string;
+    size?: AvatarSizes | number;
+    avatarURL?: string;
+    bordered?: boolean;
+    className?: string;
+};

package/Avatar/index.props.js

@@ -0,0 +1,7 @@
+'use strict';
+
+exports.AccountType = void 0;
+(function (AccountType) {
+  AccountType["Person"] = "person";
+  AccountType["Organization"] = "org";
+})(exports.AccountType || (exports.AccountType = {}));

package/Avatar/package.json

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

package/Image/Image.module.css

@@ -1,12 +1,8 @@
 .root {
   height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
   width: 100%;
 }
 .root img {
-  border: 0;
   height: 100%;
   object-fit: cover;
   text-indent: -100rem;

package/Theme/global.css

@@ -44,4 +44,7 @@
 [data-page=colibri-ui] h6 {
   color: inherit;
   margin: 0;
+}
+[data-page=colibri-ui] img {
+  border: 0;
 }

package/esm/Avatar/Avatar.module.css

@@ -0,0 +1,12 @@
+.avatar {
+  transition: border-color 0.15s ease;
+  border-radius: 100%;
+  box-sizing: border-box;
+}
+.avatar_bordered {
+  border: 4px solid transparent;
+  background-color: var(--palette-white);
+}
+.avatar_bordered:hover {
+  border-color: rgba(95, 99, 104, 0.24);
+}

package/esm/Avatar/assets/male-circle.svg.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+var _circle, _mask, _g;
+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 SvgMaleCircle = function SvgMaleCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 42,
+    height: 42,
+    fill: "none"
+  }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 21,
+    cy: 21,
+    r: 21,
+    fill: "#eceef2"
+  })), _mask || (_mask = /*#__PURE__*/React.createElement("mask", {
+    id: "male-circle_svg__a",
+    width: 42,
+    height: 42,
+    x: 0,
+    y: 0,
+    maskUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: 21,
+    cy: 21,
+    r: 21,
+    fill: "#eceef2"
+  }))), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    mask: "url(#male-circle_svg__a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#bcc1cc",
+    d: "M14.263 22.623c.242.876 1.197 1.356 1.38 2.246q.047.22.096.49c.246 1.331.695 1.944 1.228 2.22.398.205.709.595.63 1.036-.055.31-.174.608-.4.816-.52.473-2.07.675-3.75.895-1.26.164-2.592.339-3.613.644-2.443.727-2.742 4.037-2.815 6.318a3.484 3.484 0 0 0 2.937 3.521l9.974 1.576a4 4 0 0 0 1.444-.035l10.016-2.095c2.04-.427 3.428-2.358 2.864-4.364-.46-1.636-1.155-3.386-2.147-4.213-.942-.786-2.864-1.1-4.605-1.384-1.405-.23-2.691-.44-3.248-.863-.388-.294-.448-.848-.409-1.332a.56.56 0 0 1 .26-.409c.882-.597 1.106-1.223 1.477-2.666.076-.299.136-.544.184-.744.116-.483.683-.887.922-1.323.175-.315.862-2.777.862-3.223 0-.497-.676-1.067-.564-1.55.158-.677.318-1.562.318-2.355 0-2.004-1.952-4.829-6.649-4.829-1.683 0-2.276.621-2.839 1.212a1.14 1.14 0 0 1-.857.332c-2.607-.05-2.873 1.175-3.066 2.3-.176 1.03.212 2.85.45 3.811.044.183-.289.539-.45.636-.368.22.124 2.443.37 3.332"
+  }))));
+};
+var maleCircleUrl = "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%20viewBox%3D%220%200%2042%2042%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23eceef2%22%2F%3E%3Cmask%20id%3D%22male-circle_svg__a%22%20width%3D%2242%22%20height%3D%2242%22%20x%3D%220%22%20y%3D%220%22%20maskUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23eceef2%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23male-circle_svg__a%29%22%3E%3Cpath%20fill%3D%22%23bcc1cc%22%20d%3D%22M14.263%2022.623c.242.876%201.197%201.356%201.38%202.246.031.147.063.31.096.49.246%201.331.695%201.944%201.228%202.22.398.205.709.595.63%201.036-.055.31-.174.608-.4.816-.52.473-2.07.675-3.75.895-1.26.164-2.592.339-3.613.644-2.443.727-2.742%204.037-2.815%206.318a3.484%203.484%200%20002.937%203.521l9.974%201.576a4%204%200%20001.444-.035l10.016-2.095c2.04-.427%203.428-2.358%202.864-4.364-.46-1.636-1.155-3.386-2.147-4.213-.942-.786-2.864-1.1-4.605-1.384-1.405-.23-2.691-.44-3.248-.863-.388-.294-.448-.848-.409-1.332a.56.56%200%2001.26-.409c.882-.597%201.106-1.223%201.477-2.666.076-.299.136-.544.184-.744.116-.483.683-.887.922-1.323.175-.315.862-2.777.862-3.223%200-.497-.676-1.067-.564-1.55.158-.677.318-1.562.318-2.355%200-2.004-1.952-4.829-6.649-4.829-1.683%200-2.276.621-2.839%201.212a1.142%201.142%200%2001-.857.332c-2.607-.05-2.873%201.175-3.066%202.3-.176%201.03.212%202.85.45%203.811.044.183-.289.539-.45.636-.368.22.124%202.443.37%203.332z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+export { SvgMaleCircle as ReactComponent, maleCircleUrl as default };

package/esm/Avatar/assets/org-circle.svg.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+
+var _circle, _mask, _g;
+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 SvgOrgCircle = function SvgOrgCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 42,
+    height: 42,
+    fill: "none"
+  }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 21,
+    cy: 21,
+    r: 21,
+    fill: "#eceef2"
+  })), _mask || (_mask = /*#__PURE__*/React.createElement("mask", {
+    id: "org-circle_svg__a",
+    width: 42,
+    height: 42,
+    x: 0,
+    y: 0,
+    maskUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: 21,
+    cy: 21,
+    r: 21,
+    fill: "#eceef2"
+  }))), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    mask: "url(#org-circle_svg__a)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#bcc1cc",
+    fillRule: "evenodd",
+    d: "M19.103 27.36V34H9V12.062L22.567 6v21.36zm-6.64 0v1.733h3.176V27.36h-3.175zm0-6.638v1.732h6.64v-1.732zm0-4.042v1.732h6.64V16.68zM32.67 27.36h-6.062v1.733h6.062V34h-9.526V18.124h9.526z",
+    clipRule: "evenodd"
+  }))));
+};
+var orgCircleUrl = "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%20viewBox%3D%220%200%2042%2042%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23eceef2%22%2F%3E%3Cmask%20id%3D%22org-circle_svg__a%22%20width%3D%2242%22%20height%3D%2242%22%20x%3D%220%22%20y%3D%220%22%20maskUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23eceef2%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23org-circle_svg__a%29%22%3E%3Cpath%20fill%3D%22%23bcc1cc%22%20fill-rule%3D%22evenodd%22%20d%3D%22M19.103%2027.36V34H9V12.062L22.567%206v21.36h-3.464zm-6.64%200v1.733h3.176V27.36h-3.175zm0-6.638v1.732h6.64v-1.732h-6.64zm0-4.042v1.732h6.64V16.68h-6.64zM32.67%2027.36h-6.062v1.733h6.062V34h-9.526V18.124h9.526v9.237z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+export { SvgOrgCircle as ReactComponent, orgCircleUrl as default };

package/esm/Avatar/constants.d.ts

@@ -0,0 +1,7 @@
+export declare enum AvatarSizes {
+    S = "2rem",
+    M = "3rem",
+    L = "3.5rem",
+    XL = "5rem",
+    XXL = "6rem"
+}

package/esm/Avatar/constants.js

@@ -0,0 +1,10 @@
+var AvatarSizes;
+(function (AvatarSizes) {
+  AvatarSizes["S"] = "2rem";
+  AvatarSizes["M"] = "3rem";
+  AvatarSizes["L"] = "3.5rem";
+  AvatarSizes["XL"] = "5rem";
+  AvatarSizes["XXL"] = "6rem";
+})(AvatarSizes || (AvatarSizes = {}));
+
+export { AvatarSizes };

package/esm/Avatar/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { AvatarProps } from './index.props';
+declare const Avatar: FC<AvatarProps>;
+export default Avatar;

package/esm/Avatar/index.js

@@ -0,0 +1,34 @@
+import React__default, { memo } from 'react';
+import { AvatarSizes } from './constants.js';
+import maleCircleUrl from './assets/male-circle.svg.js';
+import orgCircleUrl from './assets/org-circle.svg.js';
+import styles from './Avatar.module.css';
+import classNames from 'classnames/bind';
+import { AccountType } from './index.props.js';
+import Image from '../Image/index.js';
+
+var clx = classNames.bind(styles);
+var Avatar = /*#__PURE__*/memo(function (props) {
+  var avatarURL = props.avatarURL,
+    _a = props.size,
+    size = _a === void 0 ? AvatarSizes.M : _a,
+    className = props.className,
+    bordered = props.bordered,
+    _b = props.title,
+    title = _b === void 0 ? '' : _b,
+    _c = props.accountType,
+    accountType = _c === void 0 ? AccountType.Organization : _c;
+  var isOrg = accountType === AccountType.Organization;
+  var stubImageURL = isOrg ? orgCircleUrl : maleCircleUrl;
+  return /*#__PURE__*/React__default.createElement(Image, {
+    alt: title,
+    src: avatarURL || stubImageURL,
+    width: size,
+    height: size,
+    className: clx(styles.avatar, {
+      'avatar_bordered': !!bordered
+    }, [className])
+  });
+});
+
+export { Avatar as default };

package/esm/Avatar/index.props.d.ts

@@ -0,0 +1,13 @@
+import { AvatarSizes } from "./constants";
+export declare enum AccountType {
+    Person = "person",
+    Organization = "org"
+}
+export type AvatarProps = {
+    accountType?: AccountType;
+    title?: string;
+    size?: AvatarSizes | number;
+    avatarURL?: string;
+    bordered?: boolean;
+    className?: string;
+};

package/esm/Avatar/index.props.js

@@ -0,0 +1,7 @@
+var AccountType;
+(function (AccountType) {
+  AccountType["Person"] = "person";
+  AccountType["Organization"] = "org";
+})(AccountType || (AccountType = {}));
+
+export { AccountType };

package/esm/Image/Image.module.css

@@ -1,12 +1,8 @@
 .root {
   height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
   width: 100%;
 }
 .root img {
-  border: 0;
   height: 100%;
   object-fit: cover;
   text-indent: -100rem;

package/esm/Theme/global.css

@@ -44,4 +44,7 @@
 [data-page=colibri-ui] h6 {
   color: inherit;
   margin: 0;
+}
+[data-page=colibri-ui] img {
+  border: 0;
 }

package/esm/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Avatar } from "./Avatar";
 export { default as Badge } from "./Badge";
 export { default as Button } from "./Button";
 export { default as Calendar } from "./Calendar";

package/esm/index.js

@@ -1,3 +1,4 @@
+export { default as Avatar } from './Avatar/index.js';
 export { default as Badge } from './Badge/index.js';
 export { default as Button } from './Button/index.js';
 export { default as Calendar } from './Calendar/index.js';

package/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Avatar } from "./Avatar";
 export { default as Badge } from "./Badge";
 export { default as Button } from "./Button";
 export { default as Calendar } from "./Calendar";

package/index.js

@@ -1,33 +1,34 @@
 'use strict';
 
-var index = require('./Badge/index.js');
-var index$1 = require('./Button/index.js');
-var index$2 = require('./Calendar/index.js');
-var index$3 = require('./Checkbox/index.js');
-var index$4 = require('./Chip/index.js');
-var index$5 = require('./Counter/index.js');
-var index$6 = require('./DotsLoader/index.js');
-var index$7 = require('./Dropdown/index.js');
-var index$8 = require('./Grid/index.js');
-var index$9 = require('./Grid/Item/index.js');
-var index$a = require('./Image/index.js');
-var index$b = require('./Input/index.js');
-var index$c = require('./Menu/index.js');
-var index$d = require('./Menu/components/MenuItem/index.js');
-var index$e = require('./Modal/index.js');
-var index$f = require('./Portal/index.js');
-var index$g = require('./RadioGroup/index.js');
-var index$h = require('./Select/index.js');
-var index$i = require('./Separator/index.js');
-var index$j = require('./Skeleton/index.js');
-var index$k = require('./Switch/index.js');
-var index$l = require('./Theme/index.js');
-var index$m = require('./Tooltip/index.js');
-var index$n = require('./TimeSelect/index.js');
-var index$o = require('./Typography/index.js');
-var index$p = require('./hooks/useMediaSizes/index.js');
-var index$q = require('./hooks/useOnClickOutside/index.js');
-var index$r = require('./hooks/useScrollLock/index.js');
+var index = require('./Avatar/index.js');
+var index$1 = require('./Badge/index.js');
+var index$2 = require('./Button/index.js');
+var index$3 = require('./Calendar/index.js');
+var index$4 = require('./Checkbox/index.js');
+var index$5 = require('./Chip/index.js');
+var index$6 = require('./Counter/index.js');
+var index$7 = require('./DotsLoader/index.js');
+var index$8 = require('./Dropdown/index.js');
+var index$9 = require('./Grid/index.js');
+var index$a = require('./Grid/Item/index.js');
+var index$b = require('./Image/index.js');
+var index$c = require('./Input/index.js');
+var index$d = require('./Menu/index.js');
+var index$e = require('./Menu/components/MenuItem/index.js');
+var index$f = require('./Modal/index.js');
+var index$g = require('./Portal/index.js');
+var index$h = require('./RadioGroup/index.js');
+var index$i = require('./Select/index.js');
+var index$j = require('./Separator/index.js');
+var index$k = require('./Skeleton/index.js');
+var index$l = require('./Switch/index.js');
+var index$m = require('./Theme/index.js');
+var index$n = require('./Tooltip/index.js');
+var index$o = require('./TimeSelect/index.js');
+var index$p = require('./Typography/index.js');
+var index$q = require('./hooks/useMediaSizes/index.js');
+var index$r = require('./hooks/useOnClickOutside/index.js');
+var index$s = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Cart = require('./Icons/Cart.js');
@@ -47,35 +48,36 @@ var User = require('./Icons/User.js');
 
 
 
-exports.Badge = index.default;
-exports.Button = index$1.default;
-exports.Calendar = index$2.default;
-exports.Checkbox = index$3.default;
-exports.Chip = index$4.default;
-exports.Counter = index$5.default;
-exports.DotsLoader = index$6.default;
-exports.Dropdown = index$7.default;
-exports.Grid = index$8.default;
-exports.GridItem = index$9.default;
-exports.Image = index$a.default;
-exports.Input = index$b.default;
-exports.Menu = index$c.default;
-exports.MenuItem = index$d.default;
-exports.Modal = index$e.default;
-exports.Portal = index$f.default;
-exports.RadioGroup = index$g.default;
-exports.Select = index$h.default;
-exports.Separator = index$i.default;
-exports.SkeletonRect = index$j.SkeletonRect;
-exports.SkeletonText = index$j.SkeletonText;
-exports.Switch = index$k.default;
-exports.THEMES = index$l.THEMES;
-exports.Tooltip = index$m.default;
-exports.TimeSelect = index$n.default;
-exports.Typography = index$o.default;
-exports.useMediaSizes = index$p.default;
-exports.useOnClickOutside = index$q.default;
-exports.useScrollLock = index$r.default;
+exports.Avatar = index.default;
+exports.Badge = index$1.default;
+exports.Button = index$2.default;
+exports.Calendar = index$3.default;
+exports.Checkbox = index$4.default;
+exports.Chip = index$5.default;
+exports.Counter = index$6.default;
+exports.DotsLoader = index$7.default;
+exports.Dropdown = index$8.default;
+exports.Grid = index$9.default;
+exports.GridItem = index$a.default;
+exports.Image = index$b.default;
+exports.Input = index$c.default;
+exports.Menu = index$d.default;
+exports.MenuItem = index$e.default;
+exports.Modal = index$f.default;
+exports.Portal = index$g.default;
+exports.RadioGroup = index$h.default;
+exports.Select = index$i.default;
+exports.Separator = index$j.default;
+exports.SkeletonRect = index$k.SkeletonRect;
+exports.SkeletonText = index$k.SkeletonText;
+exports.Switch = index$l.default;
+exports.THEMES = index$m.THEMES;
+exports.Tooltip = index$n.default;
+exports.TimeSelect = index$o.default;
+exports.Typography = index$p.default;
+exports.useMediaSizes = index$q.default;
+exports.useOnClickOutside = index$r.default;
+exports.useScrollLock = index$s.default;
 exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.72",
+  "version": "0.7.74",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},