@os-design/core 1.0.155 → 1.0.157

package/dist/cjs/message/AlertIcon.js

@@ -4,50 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _icons = require("@os-design/icons");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var Container = (0, _styled["default"])('i', (0, _utils.omitEmotionProps)('iconColor'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  margin-right: 0.3em;\n  font-size: 1.4em;\n  color: ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.iconColor);
 });
-
 var AlertIcon = function AlertIcon(_ref) {
   var type = _ref.type;
   var _info$success$error$t = {
-    info: {
-      Icon: _icons.InfoCircle,
-      iconColor: _theming.light.alertInfoColorIcon
-    },
-    success: {
-      Icon: _icons.CheckCircle,
-      iconColor: _theming.light.alertSuccessColorIcon
-    },
-    error: {
-      Icon: _icons.CloseCircle,
-      iconColor: _theming.light.alertErrorColorIcon
-    }
-  }[type],
-      Icon = _info$success$error$t.Icon,
-      iconColor = _info$success$error$t.iconColor;
+      info: {
+        Icon: _icons.InfoCircle,
+        iconColor: _theming.light.alertInfoColorIcon
+      },
+      success: {
+        Icon: _icons.CheckCircle,
+        iconColor: _theming.light.alertSuccessColorIcon
+      },
+      error: {
+        Icon: _icons.CloseCircle,
+        iconColor: _theming.light.alertErrorColorIcon
+      }
+    }[type],
+    Icon = _info$success$error$t.Icon,
+    iconColor = _info$success$error$t.iconColor;
   return /*#__PURE__*/_react["default"].createElement(Container, {
     iconColor: iconColor
   }, /*#__PURE__*/_react["default"].createElement(Icon, null));
 };
-
 AlertIcon.displayName = 'AlertIcon';
 var _default = AlertIcon;
 exports["default"] = _default;

package/dist/cjs/message/AlertIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertIcon.js","names":["Container","styled","omitEmotionProps","p","clr","iconColor","AlertIcon","type","info","Icon","InfoCircle","light","alertInfoColorIcon","success","CheckCircle","alertSuccessColorIcon","error","CloseCircle","alertErrorColorIcon","displayName"],"sources":["../../../src/message/AlertIcon.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, Color, light } from '@os-design/theming';\n\ninterface AlertIconProps {\n  type: 'info' | 'success' | 'error';\n}\n\ninterface ContainerProps {\n  iconColor: Color;\n}\nconst Container = styled('i', omitEmotionProps('iconColor'))<ContainerProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  margin-right: 0.3em;\n  font-size: 1.4em;\n  color: ${(p) => clr(p.iconColor)};\n`;\n\nconst AlertIcon: React.FC<AlertIconProps> = ({ type }) => {\n  const { Icon, iconColor } = {\n    info: {\n      Icon: InfoCircle,\n      iconColor: light.alertInfoColorIcon,\n    },\n    success: {\n      Icon: CheckCircle,\n      iconColor: light.alertSuccessColorIcon,\n    },\n    error: {\n      Icon: CloseCircle,\n      iconColor: light.alertErrorColorIcon,\n    },\n  }[type];\n\n  return (\n    <Container iconColor={iconColor}>\n      <Icon />\n    </Container>\n  );\n};\n\nAlertIcon.displayName = 'AlertIcon';\n\nexport default AlertIcon;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AASA,IAAMA,SAAS,GAAG,IAAAC,kBAAA,EAAO,GAAP,EAAY,IAAAC,uBAAA,EAAiB,WAAjB,CAAZ,CAAH,yMAOJ,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,SAAN,CAAP;AAAA,CAPI,CAAf;;AAUA,IAAMC,SAAmC,GAAG,SAAtCA,SAAsC,OAAc;EAAA,IAAXC,IAAW,QAAXA,IAAW;EACxD,4BAA4B;IAC1BC,IAAI,EAAE;MACJC,IAAI,EAAEC,iBADF;MAEJL,SAAS,EAAEM,cAAA,CAAMC;IAFb,CADoB;IAK1BC,OAAO,EAAE;MACPJ,IAAI,EAAEK,kBADC;MAEPT,SAAS,EAAEM,cAAA,CAAMI;IAFV,CALiB;IAS1BC,KAAK,EAAE;MACLP,IAAI,EAAEQ,kBADD;MAELZ,SAAS,EAAEM,cAAA,CAAMO;IAFZ;EATmB,EAa1BX,IAb0B,CAA5B;EAAA,IAAQE,IAAR,yBAAQA,IAAR;EAAA,IAAcJ,SAAd,yBAAcA,SAAd;EAeA,oBACE,gCAAC,SAAD;IAAW,SAAS,EAAEA;EAAtB,gBACE,gCAAC,IAAD,OADF,CADF;AAKD,CArBD;;AAuBAC,SAAS,CAACa,WAAV,GAAwB,WAAxB;eAEeb,S"}
+{"version":3,"file":"AlertIcon.js","names":["Container","styled","omitEmotionProps","p","clr","iconColor","AlertIcon","type","info","Icon","InfoCircle","light","alertInfoColorIcon","success","CheckCircle","alertSuccessColorIcon","error","CloseCircle","alertErrorColorIcon","displayName"],"sources":["../../../src/message/AlertIcon.tsx"],"sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, Color, light } from '@os-design/theming';\n\ninterface AlertIconProps {\n  type: 'info' | 'success' | 'error';\n}\n\ninterface ContainerProps {\n  iconColor: Color;\n}\nconst Container = styled('i', omitEmotionProps('iconColor'))<ContainerProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  margin-right: 0.3em;\n  font-size: 1.4em;\n  color: ${(p) => clr(p.iconColor)};\n`;\n\nconst AlertIcon: React.FC<AlertIconProps> = ({ type }) => {\n  const { Icon, iconColor } = {\n    info: {\n      Icon: InfoCircle,\n      iconColor: light.alertInfoColorIcon,\n    },\n    success: {\n      Icon: CheckCircle,\n      iconColor: light.alertSuccessColorIcon,\n    },\n    error: {\n      Icon: CloseCircle,\n      iconColor: light.alertErrorColorIcon,\n    },\n  }[type];\n\n  return (\n    <Container iconColor={iconColor}>\n      <Icon />\n    </Container>\n  );\n};\n\nAlertIcon.displayName = 'AlertIcon';\n\nexport default AlertIcon;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAAuD;AAAA;AAAA;AASvD,IAAMA,SAAS,GAAG,IAAAC,kBAAM,EAAC,GAAG,EAAE,IAAAC,uBAAgB,EAAC,WAAW,CAAC,CAAC,yMAOjD,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,SAAS,CAAC;AAAA,EACjC;AAED,IAAMC,SAAmC,GAAG,SAAtCA,SAAmC,OAAiB;EAAA,IAAXC,IAAI,QAAJA,IAAI;EACjD,4BAA4B;MAC1BC,IAAI,EAAE;QACJC,IAAI,EAAEC,iBAAU;QAChBL,SAAS,EAAEM,cAAK,CAACC;MACnB,CAAC;MACDC,OAAO,EAAE;QACPJ,IAAI,EAAEK,kBAAW;QACjBT,SAAS,EAAEM,cAAK,CAACI;MACnB,CAAC;MACDC,KAAK,EAAE;QACLP,IAAI,EAAEQ,kBAAW;QACjBZ,SAAS,EAAEM,cAAK,CAACO;MACnB;IACF,CAAC,CAACX,IAAI,CAAC;IAbCE,IAAI,yBAAJA,IAAI;IAAEJ,SAAS,yBAATA,SAAS;EAevB,oBACE,gCAAC,SAAS;IAAC,SAAS,EAAEA;EAAU,gBAC9B,gCAAC,IAAI,OAAG,CACE;AAEhB,CAAC;AAEDC,SAAS,CAACa,WAAW,GAAG,WAAW;AAAC,eAErBb,SAAS;AAAA"}

package/dist/cjs/message/Message.js

@@ -1,36 +1,22 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.MESSAGE_DURATION_MS = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react2 = require("@emotion/react");
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _AlertIcon = _interopRequireDefault(require("./AlertIcon"));
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var fadeIn = (0, _react2.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
 var MESSAGE_HEIGHT_EM = 2.5;
 var MESSAGE_MARGIN_TOP_EM = 0.7;
@@ -48,12 +34,10 @@ var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('typ
 }, function (p) {
   return MESSAGE_DURATION_MS - p.transitionDelay;
 });
-
 var Text = _styled["default"].span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n"])), _styles.ellipsisStyles);
-
 var Message = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var type = _ref.type,
-      text = _ref.text;
+    text = _ref.text;
   var backgroundColor = {
     info: _theming.light.messageInfoColorBg,
     success: _theming.light.messageSuccessColorBg,

package/dist/cjs/message/Message.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message.js","names":["fadeIn","keyframes","MESSAGE_HEIGHT_EM","MESSAGE_MARGIN_TOP_EM","MESSAGE_DURATION_MS","fadeOut","Container","styled","omitEmotionProps","p","clr","backgroundColor","textColor","transitionDelay","Text","span","ellipsisStyles","Message","forwardRef","ref","type","text","info","light","messageInfoColorBg","success","messageSuccessColorBg","error","messageErrorColorBg","colorText","displayName"],"sources":["../../../src/message/Message.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, Color, light } from '@os-design/theming';\nimport AlertIcon from './AlertIcon';\n\nexport interface MessageProps {\n  type: 'info' | 'success' | 'error';\n  text: string;\n}\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst MESSAGE_HEIGHT_EM = 2.5;\nconst MESSAGE_MARGIN_TOP_EM = 0.7;\nexport const MESSAGE_DURATION_MS = 3000;\n\nconst fadeOut = keyframes`\n  from {\n    opacity: 1;\n    height: ${MESSAGE_HEIGHT_EM}em;\n    margin-top: ${MESSAGE_MARGIN_TOP_EM}em;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    height: 0;\n    margin-top: 0;\n    transform: translateY(-100%);\n  }\n`;\n\ninterface ContainerProps extends Pick<MessageProps, 'type'> {\n  textColor: Color;\n  backgroundColor: Color;\n  transitionDelay: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('type', 'textColor', 'backgroundColor', 'transitionDelay')\n)<ContainerProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  height: ${MESSAGE_HEIGHT_EM}em;\n  margin-top: ${MESSAGE_MARGIN_TOP_EM}em;\n\n  box-sizing: border-box;\n  padding: 0 1em;\n  max-width: 90%;\n\n  border-radius: 0.25em;\n  box-shadow: 0 0.15em 0.45em hsla(0, 0%, 0%, 0.1);\n  background-color: ${(p) => clr(p.backgroundColor)};\n  color: ${(p) => clr(p.textColor)};\n\n  pointer-events: auto;\n  overflow: hidden;\n\n  animation: ${fadeIn} ${(p) => p.transitionDelay}ms,\n    ${fadeOut} ${(p) => p.transitionDelay}ms\n      ${(p) => MESSAGE_DURATION_MS - p.transitionDelay}ms;\n  animation-fill-mode: forwards;\n`;\n\nconst Text = styled.span`\n  ${ellipsisStyles};\n`;\n\nconst Message = forwardRef<HTMLDivElement, MessageProps>(\n  ({ type, text }, ref) => {\n    const backgroundColor = {\n      info: light.messageInfoColorBg,\n      success: light.messageSuccessColorBg,\n      error: light.messageErrorColorBg,\n    }[type];\n\n    return (\n      <Container\n        ref={ref}\n        type={type}\n        textColor={light.colorText}\n        backgroundColor={backgroundColor}\n        transitionDelay={light.transitionDelay}\n        role='alert'\n      >\n        <AlertIcon type={type} />\n        <Text>{text}</Text>\n      </Container>\n    );\n  }\n);\n\nMessage.displayName = 'Message';\n\nexport default Message;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAOA,IAAMA,MAAM,OAAGC,iBAAH,wMAAZ;AAWA,IAAMC,iBAAiB,GAAG,GAA1B;AACA,IAAMC,qBAAqB,GAAG,GAA9B;AACO,IAAMC,mBAAmB,GAAG,IAA5B;;AAEP,IAAMC,OAAO,OAAGJ,iBAAH,6RAGCC,iBAHD,EAIKC,qBAJL,CAAb;AAoBA,IAAMG,SAAS,GAAG,IAAAC,kBAAA,EAChB,KADgB,EAEhB,IAAAC,uBAAA,EAAiB,MAAjB,EAAyB,WAAzB,EAAsC,iBAAtC,EAAyD,iBAAzD,CAFgB,CAAH,sgBAQHN,iBARG,EASCC,qBATD,EAiBO,UAACM,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,eAAN,CAAP;AAAA,CAjBP,EAkBJ,UAACF,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACG,SAAN,CAAP;AAAA,CAlBI,EAuBAZ,MAvBA,EAuBU,UAACS,CAAD;EAAA,OAAOA,CAAC,CAACI,eAAT;AAAA,CAvBV,EAwBTR,OAxBS,EAwBE,UAACI,CAAD;EAAA,OAAOA,CAAC,CAACI,eAAT;AAAA,CAxBF,EAyBP,UAACJ,CAAD;EAAA,OAAOL,mBAAmB,GAAGK,CAAC,CAACI,eAA/B;AAAA,CAzBO,CAAf;;AA6BA,IAAMC,IAAI,GAAGP,kBAAA,CAAOQ,IAAV,mFACNC,sBADM,CAAV;;AAIA,IAAMC,OAAO,gBAAG,IAAAC,iBAAA,EACd,gBAAiBC,GAAjB,EAAyB;EAAA,IAAtBC,IAAsB,QAAtBA,IAAsB;EAAA,IAAhBC,IAAgB,QAAhBA,IAAgB;EACvB,IAAMV,eAAe,GAAG;IACtBW,IAAI,EAAEC,cAAA,CAAMC,kBADU;IAEtBC,OAAO,EAAEF,cAAA,CAAMG,qBAFO;IAGtBC,KAAK,EAAEJ,cAAA,CAAMK;EAHS,EAItBR,IAJsB,CAAxB;EAMA,oBACE,gCAAC,SAAD;IACE,GAAG,EAAED,GADP;IAEE,IAAI,EAAEC,IAFR;IAGE,SAAS,EAAEG,cAAA,CAAMM,SAHnB;IAIE,eAAe,EAAElB,eAJnB;IAKE,eAAe,EAAEY,cAAA,CAAMV,eALzB;IAME,IAAI,EAAC;EANP,gBAQE,gCAAC,qBAAD;IAAW,IAAI,EAAEO;EAAjB,EARF,eASE,gCAAC,IAAD,QAAOC,IAAP,CATF,CADF;AAaD,CArBa,CAAhB;AAwBAJ,OAAO,CAACa,WAAR,GAAsB,SAAtB;eAEeb,O"}
+{"version":3,"file":"Message.js","names":["fadeIn","keyframes","MESSAGE_HEIGHT_EM","MESSAGE_MARGIN_TOP_EM","MESSAGE_DURATION_MS","fadeOut","Container","styled","omitEmotionProps","p","clr","backgroundColor","textColor","transitionDelay","Text","span","ellipsisStyles","Message","forwardRef","ref","type","text","info","light","messageInfoColorBg","success","messageSuccessColorBg","error","messageErrorColorBg","colorText","displayName"],"sources":["../../../src/message/Message.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styled from '@emotion/styled';\nimport { keyframes } from '@emotion/react';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, Color, light } from '@os-design/theming';\nimport AlertIcon from './AlertIcon';\n\nexport interface MessageProps {\n  type: 'info' | 'success' | 'error';\n  text: string;\n}\n\nconst fadeIn = keyframes`\n  from {\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nconst MESSAGE_HEIGHT_EM = 2.5;\nconst MESSAGE_MARGIN_TOP_EM = 0.7;\nexport const MESSAGE_DURATION_MS = 3000;\n\nconst fadeOut = keyframes`\n  from {\n    opacity: 1;\n    height: ${MESSAGE_HEIGHT_EM}em;\n    margin-top: ${MESSAGE_MARGIN_TOP_EM}em;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    height: 0;\n    margin-top: 0;\n    transform: translateY(-100%);\n  }\n`;\n\ninterface ContainerProps extends Pick<MessageProps, 'type'> {\n  textColor: Color;\n  backgroundColor: Color;\n  transitionDelay: number;\n}\nconst Container = styled(\n  'div',\n  omitEmotionProps('type', 'textColor', 'backgroundColor', 'transitionDelay')\n)<ContainerProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  height: ${MESSAGE_HEIGHT_EM}em;\n  margin-top: ${MESSAGE_MARGIN_TOP_EM}em;\n\n  box-sizing: border-box;\n  padding: 0 1em;\n  max-width: 90%;\n\n  border-radius: 0.25em;\n  box-shadow: 0 0.15em 0.45em hsla(0, 0%, 0%, 0.1);\n  background-color: ${(p) => clr(p.backgroundColor)};\n  color: ${(p) => clr(p.textColor)};\n\n  pointer-events: auto;\n  overflow: hidden;\n\n  animation: ${fadeIn} ${(p) => p.transitionDelay}ms,\n    ${fadeOut} ${(p) => p.transitionDelay}ms\n      ${(p) => MESSAGE_DURATION_MS - p.transitionDelay}ms;\n  animation-fill-mode: forwards;\n`;\n\nconst Text = styled.span`\n  ${ellipsisStyles};\n`;\n\nconst Message = forwardRef<HTMLDivElement, MessageProps>(\n  ({ type, text }, ref) => {\n    const backgroundColor = {\n      info: light.messageInfoColorBg,\n      success: light.messageSuccessColorBg,\n      error: light.messageErrorColorBg,\n    }[type];\n\n    return (\n      <Container\n        ref={ref}\n        type={type}\n        textColor={light.colorText}\n        backgroundColor={backgroundColor}\n        transitionDelay={light.transitionDelay}\n        role='alert'\n      >\n        <AlertIcon type={type} />\n        <Text>{text}</Text>\n      </Container>\n    );\n  }\n);\n\nMessage.displayName = 'Message';\n\nexport default Message;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoC;AAAA;AAAA;AAAA;AAAA;AAOpC,IAAMA,MAAM,OAAGC,iBAAS,wMASvB;AAED,IAAMC,iBAAiB,GAAG,GAAG;AAC7B,IAAMC,qBAAqB,GAAG,GAAG;AAC1B,IAAMC,mBAAmB,GAAG,IAAI;AAAC;AAExC,IAAMC,OAAO,OAAGJ,iBAAS,6RAGXC,iBAAiB,EACbC,qBAAqB,CAStC;AAOD,IAAMG,SAAS,GAAG,IAAAC,kBAAM,EACtB,KAAK,EACL,IAAAC,uBAAgB,EAAC,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAC5E,sgBAKWN,iBAAiB,EACbC,qBAAqB,EAQf,UAACM,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,eAAe,CAAC;AAAA,GACxC,UAACF,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACG,SAAS,CAAC;AAAA,GAKnBZ,MAAM,EAAI,UAACS,CAAC;EAAA,OAAKA,CAAC,CAACI,eAAe;AAAA,GAC3CR,OAAO,EAAI,UAACI,CAAC;EAAA,OAAKA,CAAC,CAACI,eAAe;AAAA,GACjC,UAACJ,CAAC;EAAA,OAAKL,mBAAmB,GAAGK,CAAC,CAACI,eAAe;AAAA,EAErD;AAED,IAAMC,IAAI,GAAGP,kBAAM,CAACQ,IAAI,mFACpBC,sBAAc,CACjB;AAED,IAAMC,OAAO,gBAAG,IAAAC,iBAAU,EACxB,gBAAiBC,GAAG,EAAK;EAAA,IAAtBC,IAAI,QAAJA,IAAI;IAAEC,IAAI,QAAJA,IAAI;EACX,IAAMV,eAAe,GAAG;IACtBW,IAAI,EAAEC,cAAK,CAACC,kBAAkB;IAC9BC,OAAO,EAAEF,cAAK,CAACG,qBAAqB;IACpCC,KAAK,EAAEJ,cAAK,CAACK;EACf,CAAC,CAACR,IAAI,CAAC;EAEP,oBACE,gCAAC,SAAS;IACR,GAAG,EAAED,GAAI;IACT,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEG,cAAK,CAACM,SAAU;IAC3B,eAAe,EAAElB,eAAgB;IACjC,eAAe,EAAEY,cAAK,CAACV,eAAgB;IACvC,IAAI,EAAC;EAAO,gBAEZ,gCAAC,qBAAS;IAAC,IAAI,EAAEO;EAAK,EAAG,eACzB,gCAAC,IAAI,QAAEC,IAAI,CAAQ,CACT;AAEhB,CAAC,CACF;AAEDJ,OAAO,CAACa,WAAW,GAAG,SAAS;AAAC,eAEjBb,OAAO;AAAA"}

package/dist/cjs/message/index.js

@@ -1,78 +1,64 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _Message = _interopRequireWildcard(require("./Message"));
-
 var _styles = require("./styles");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var containerElement;
+
 /**
  * Creates the container for storing messages.
  */
-
 var getContainer = function getContainer() {
   if (!containerElement) {
     containerElement = document.createElement('div');
     (0, _styles.setStylesToHtmlElement)(containerElement, _styles.containerStyles);
     document.body.appendChild(containerElement);
   }
-
   return containerElement;
 };
+
 /**
  * Delete the container if there are no more messages in it.
  */
-
-
 var deleteContainerIfNoChildNodes = function deleteContainerIfNoChildNodes() {
   if (!containerElement || containerElement.hasChildNodes()) return;
   document.body.removeChild(containerElement);
   containerElement = null;
 };
+
 /**
  * Renders a new message.
  */
-
-
 var send = function send(type, text) {
   // Create a new container for the message
   var container = getContainer();
   var messageContainer = document.createElement('div');
   (0, _styles.setStylesToHtmlElement)(messageContainer, _styles.messageContainerStyles);
-  container.appendChild(messageContainer); // Render the message element
+  container.appendChild(messageContainer);
 
+  // Render the message element
   var messageElement = /*#__PURE__*/_react["default"].createElement(_Message["default"], {
     type: type,
     text: text
   });
+  _reactDom["default"].render(messageElement, messageContainer);
 
-  _reactDom["default"].render(messageElement, messageContainer); // Delete the message container after N ms
-
-
+  // Delete the message container after N ms
   setTimeout(function () {
     _reactDom["default"].unmountComponentAtNode(messageContainer);
-
     container.removeChild(messageContainer);
     deleteContainerIfNoChildNodes();
   }, _Message.MESSAGE_DURATION_MS);
 };
-
 var message = {
   info: function info(text) {
     return send('info', text);

package/dist/cjs/message/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["containerElement","getContainer","document","createElement","setStylesToHtmlElement","containerStyles","body","appendChild","deleteContainerIfNoChildNodes","hasChildNodes","removeChild","send","type","text","container","messageContainer","messageContainerStyles","messageElement","ReactDOM","render","setTimeout","unmountComponentAtNode","MESSAGE_DURATION_MS","message","info","success","error"],"sources":["../../../src/message/index.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Message, { MESSAGE_DURATION_MS } from './Message';\nimport { AlertProps } from '../Alert';\nimport {\n  containerStyles,\n  messageContainerStyles,\n  setStylesToHtmlElement,\n} from './styles';\n\nlet containerElement: HTMLElement | null;\n\n/**\n * Creates the container for storing messages.\n */\nconst getContainer = () => {\n  if (!containerElement) {\n    containerElement = document.createElement('div');\n    setStylesToHtmlElement(containerElement, containerStyles);\n    document.body.appendChild(containerElement);\n  }\n  return containerElement;\n};\n\n/**\n * Delete the container if there are no more messages in it.\n */\nconst deleteContainerIfNoChildNodes = () => {\n  if (!containerElement || containerElement.hasChildNodes()) return;\n  document.body.removeChild(containerElement);\n  containerElement = null;\n};\n\n/**\n * Renders a new message.\n */\nconst send = (type: AlertProps['type'], text: string) => {\n  // Create a new container for the message\n  const container = getContainer();\n  const messageContainer = document.createElement('div');\n  setStylesToHtmlElement(messageContainer, messageContainerStyles);\n  container.appendChild(messageContainer);\n\n  // Render the message element\n  const messageElement = <Message type={type} text={text} />;\n  ReactDOM.render(messageElement, messageContainer);\n\n  // Delete the message container after N ms\n  setTimeout(() => {\n    ReactDOM.unmountComponentAtNode(messageContainer);\n    container.removeChild(messageContainer);\n    deleteContainerIfNoChildNodes();\n  }, MESSAGE_DURATION_MS);\n};\n\nconst message: Record<AlertProps['type'], (text: string) => void> = {\n  info: (text) => send('info', text),\n  success: (text) => send('success', text),\n  error: (text) => send('error', text),\n};\n\nexport default message;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;AAMA,IAAIA,gBAAJ;AAEA;AACA;AACA;;AACA,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;EACzB,IAAI,CAACD,gBAAL,EAAuB;IACrBA,gBAAgB,GAAGE,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAnB;IACA,IAAAC,8BAAA,EAAuBJ,gBAAvB,EAAyCK,uBAAzC;IACAH,QAAQ,CAACI,IAAT,CAAcC,WAAd,CAA0BP,gBAA1B;EACD;;EACD,OAAOA,gBAAP;AACD,CAPD;AASA;AACA;AACA;;;AACA,IAAMQ,6BAA6B,GAAG,SAAhCA,6BAAgC,GAAM;EAC1C,IAAI,CAACR,gBAAD,IAAqBA,gBAAgB,CAACS,aAAjB,EAAzB,EAA2D;EAC3DP,QAAQ,CAACI,IAAT,CAAcI,WAAd,CAA0BV,gBAA1B;EACAA,gBAAgB,GAAG,IAAnB;AACD,CAJD;AAMA;AACA;AACA;;;AACA,IAAMW,IAAI,GAAG,SAAPA,IAAO,CAACC,IAAD,EAA2BC,IAA3B,EAA4C;EACvD;EACA,IAAMC,SAAS,GAAGb,YAAY,EAA9B;EACA,IAAMc,gBAAgB,GAAGb,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAzB;EACA,IAAAC,8BAAA,EAAuBW,gBAAvB,EAAyCC,8BAAzC;EACAF,SAAS,CAACP,WAAV,CAAsBQ,gBAAtB,EALuD,CAOvD;;EACA,IAAME,cAAc,gBAAG,gCAAC,mBAAD;IAAS,IAAI,EAAEL,IAAf;IAAqB,IAAI,EAAEC;EAA3B,EAAvB;;EACAK,oBAAA,CAASC,MAAT,CAAgBF,cAAhB,EAAgCF,gBAAhC,EATuD,CAWvD;;;EACAK,UAAU,CAAC,YAAM;IACfF,oBAAA,CAASG,sBAAT,CAAgCN,gBAAhC;;IACAD,SAAS,CAACJ,WAAV,CAAsBK,gBAAtB;IACAP,6BAA6B;EAC9B,CAJS,EAIPc,4BAJO,CAAV;AAKD,CAjBD;;AAmBA,IAAMC,OAA2D,GAAG;EAClEC,IAAI,EAAE,cAACX,IAAD;IAAA,OAAUF,IAAI,CAAC,MAAD,EAASE,IAAT,CAAd;EAAA,CAD4D;EAElEY,OAAO,EAAE,iBAACZ,IAAD;IAAA,OAAUF,IAAI,CAAC,SAAD,EAAYE,IAAZ,CAAd;EAAA,CAFyD;EAGlEa,KAAK,EAAE,eAACb,IAAD;IAAA,OAAUF,IAAI,CAAC,OAAD,EAAUE,IAAV,CAAd;EAAA;AAH2D,CAApE;eAMeU,O"}
+{"version":3,"file":"index.js","names":["containerElement","getContainer","document","createElement","setStylesToHtmlElement","containerStyles","body","appendChild","deleteContainerIfNoChildNodes","hasChildNodes","removeChild","send","type","text","container","messageContainer","messageContainerStyles","messageElement","ReactDOM","render","setTimeout","unmountComponentAtNode","MESSAGE_DURATION_MS","message","info","success","error"],"sources":["../../../src/message/index.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Message, { MESSAGE_DURATION_MS } from './Message';\nimport { AlertProps } from '../Alert';\nimport {\n  containerStyles,\n  messageContainerStyles,\n  setStylesToHtmlElement,\n} from './styles';\n\nlet containerElement: HTMLElement | null;\n\n/**\n * Creates the container for storing messages.\n */\nconst getContainer = () => {\n  if (!containerElement) {\n    containerElement = document.createElement('div');\n    setStylesToHtmlElement(containerElement, containerStyles);\n    document.body.appendChild(containerElement);\n  }\n  return containerElement;\n};\n\n/**\n * Delete the container if there are no more messages in it.\n */\nconst deleteContainerIfNoChildNodes = () => {\n  if (!containerElement || containerElement.hasChildNodes()) return;\n  document.body.removeChild(containerElement);\n  containerElement = null;\n};\n\n/**\n * Renders a new message.\n */\nconst send = (type: AlertProps['type'], text: string) => {\n  // Create a new container for the message\n  const container = getContainer();\n  const messageContainer = document.createElement('div');\n  setStylesToHtmlElement(messageContainer, messageContainerStyles);\n  container.appendChild(messageContainer);\n\n  // Render the message element\n  const messageElement = <Message type={type} text={text} />;\n  ReactDOM.render(messageElement, messageContainer);\n\n  // Delete the message container after N ms\n  setTimeout(() => {\n    ReactDOM.unmountComponentAtNode(messageContainer);\n    container.removeChild(messageContainer);\n    deleteContainerIfNoChildNodes();\n  }, MESSAGE_DURATION_MS);\n};\n\nconst message: Record<AlertProps['type'], (text: string) => void> = {\n  info: (text) => send('info', text),\n  success: (text) => send('success', text),\n  error: (text) => send('error', text),\n};\n\nexport default message;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AAIkB;AAAA;AAAA;AAElB,IAAIA,gBAAoC;;AAExC;AACA;AACA;AACA,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;EACzB,IAAI,CAACD,gBAAgB,EAAE;IACrBA,gBAAgB,GAAGE,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAChD,IAAAC,8BAAsB,EAACJ,gBAAgB,EAAEK,uBAAe,CAAC;IACzDH,QAAQ,CAACI,IAAI,CAACC,WAAW,CAACP,gBAAgB,CAAC;EAC7C;EACA,OAAOA,gBAAgB;AACzB,CAAC;;AAED;AACA;AACA;AACA,IAAMQ,6BAA6B,GAAG,SAAhCA,6BAA6B,GAAS;EAC1C,IAAI,CAACR,gBAAgB,IAAIA,gBAAgB,CAACS,aAAa,EAAE,EAAE;EAC3DP,QAAQ,CAACI,IAAI,CAACI,WAAW,CAACV,gBAAgB,CAAC;EAC3CA,gBAAgB,GAAG,IAAI;AACzB,CAAC;;AAED;AACA;AACA;AACA,IAAMW,IAAI,GAAG,SAAPA,IAAI,CAAIC,IAAwB,EAAEC,IAAY,EAAK;EACvD;EACA,IAAMC,SAAS,GAAGb,YAAY,EAAE;EAChC,IAAMc,gBAAgB,GAAGb,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EACtD,IAAAC,8BAAsB,EAACW,gBAAgB,EAAEC,8BAAsB,CAAC;EAChEF,SAAS,CAACP,WAAW,CAACQ,gBAAgB,CAAC;;EAEvC;EACA,IAAME,cAAc,gBAAG,gCAAC,mBAAO;IAAC,IAAI,EAAEL,IAAK;IAAC,IAAI,EAAEC;EAAK,EAAG;EAC1DK,oBAAQ,CAACC,MAAM,CAACF,cAAc,EAAEF,gBAAgB,CAAC;;EAEjD;EACAK,UAAU,CAAC,YAAM;IACfF,oBAAQ,CAACG,sBAAsB,CAACN,gBAAgB,CAAC;IACjDD,SAAS,CAACJ,WAAW,CAACK,gBAAgB,CAAC;IACvCP,6BAA6B,EAAE;EACjC,CAAC,EAAEc,4BAAmB,CAAC;AACzB,CAAC;AAED,IAAMC,OAA2D,GAAG;EAClEC,IAAI,EAAE,cAACX,IAAI;IAAA,OAAKF,IAAI,CAAC,MAAM,EAAEE,IAAI,CAAC;EAAA;EAClCY,OAAO,EAAE,iBAACZ,IAAI;IAAA,OAAKF,IAAI,CAAC,SAAS,EAAEE,IAAI,CAAC;EAAA;EACxCa,KAAK,EAAE,eAACb,IAAI;IAAA,OAAKF,IAAI,CAAC,OAAO,EAAEE,IAAI,CAAC;EAAA;AACtC,CAAC;AAAC,eAEaU,OAAO;AAAA"}

package/dist/cjs/message/styles.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.setStylesToHtmlElement = exports.messageContainerStyles = exports.containerStyles = void 0;
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 var containerStyles = {
   position: 'fixed',
   top: '0',
@@ -33,17 +26,14 @@ var messageContainerStyles = {
   justifyContent: 'center'
 };
 exports.messageContainerStyles = messageContainerStyles;
-
 var setStylesToHtmlElement = function setStylesToHtmlElement(element, styles) {
   Object.entries(styles).forEach(function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
-
+      key = _ref2[0],
+      value = _ref2[1];
     // eslint-disable-next-line no-param-reassign
     element.style[key] = value;
   });
 };
-
 exports.setStylesToHtmlElement = setStylesToHtmlElement;
 //# sourceMappingURL=styles.js.map

package/dist/cjs/message/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["containerStyles","position","top","left","right","zIndex","pointerEvents","display","flexDirection","messageContainerStyles","justifyContent","setStylesToHtmlElement","element","styles","Object","entries","forEach","key","value","style"],"sources":["../../../src/message/styles.ts"],"sourcesContent":["export const containerStyles: Partial<CSSStyleDeclaration> = {\n  position: 'fixed',\n  top: '0',\n  left: '0',\n  right: '0',\n  zIndex: '1001',\n  pointerEvents: 'none',\n  display: 'flex',\n  flexDirection: 'column',\n};\n\nexport const messageContainerStyles: Partial<CSSStyleDeclaration> = {\n  display: 'flex',\n  justifyContent: 'center',\n};\n\nexport const setStylesToHtmlElement = (\n  element: HTMLElement,\n  styles: Partial<CSSStyleDeclaration>\n): void => {\n  Object.entries(styles).forEach(([key, value]) => {\n    // eslint-disable-next-line no-param-reassign\n    element.style[key] = value;\n  });\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAO,IAAMA,eAA6C,GAAG;EAC3DC,QAAQ,EAAE,OADiD;EAE3DC,GAAG,EAAE,GAFsD;EAG3DC,IAAI,EAAE,GAHqD;EAI3DC,KAAK,EAAE,GAJoD;EAK3DC,MAAM,EAAE,MALmD;EAM3DC,aAAa,EAAE,MAN4C;EAO3DC,OAAO,EAAE,MAPkD;EAQ3DC,aAAa,EAAE;AAR4C,CAAtD;;AAWA,IAAMC,sBAAoD,GAAG;EAClEF,OAAO,EAAE,MADyD;EAElEG,cAAc,EAAE;AAFkD,CAA7D;;;AAKA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CACpCC,OADoC,EAEpCC,MAFoC,EAG3B;EACTC,MAAM,CAACC,OAAP,CAAeF,MAAf,EAAuBG,OAAvB,CAA+B,gBAAkB;IAAA;IAAA,IAAhBC,GAAgB;IAAA,IAAXC,KAAW;;IAC/C;IACAN,OAAO,CAACO,KAAR,CAAcF,GAAd,IAAqBC,KAArB;EACD,CAHD;AAID,CARM"}
+{"version":3,"file":"styles.js","names":["containerStyles","position","top","left","right","zIndex","pointerEvents","display","flexDirection","messageContainerStyles","justifyContent","setStylesToHtmlElement","element","styles","Object","entries","forEach","key","value","style"],"sources":["../../../src/message/styles.ts"],"sourcesContent":["export const containerStyles: Partial<CSSStyleDeclaration> = {\n  position: 'fixed',\n  top: '0',\n  left: '0',\n  right: '0',\n  zIndex: '1001',\n  pointerEvents: 'none',\n  display: 'flex',\n  flexDirection: 'column',\n};\n\nexport const messageContainerStyles: Partial<CSSStyleDeclaration> = {\n  display: 'flex',\n  justifyContent: 'center',\n};\n\nexport const setStylesToHtmlElement = (\n  element: HTMLElement,\n  styles: Partial<CSSStyleDeclaration>\n): void => {\n  Object.entries(styles).forEach(([key, value]) => {\n    // eslint-disable-next-line no-param-reassign\n    element.style[key] = value;\n  });\n};\n"],"mappings":";;;;;;;;;;;;AAAO,IAAMA,eAA6C,GAAG;EAC3DC,QAAQ,EAAE,OAAO;EACjBC,GAAG,EAAE,GAAG;EACRC,IAAI,EAAE,GAAG;EACTC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE,MAAM;EACdC,aAAa,EAAE,MAAM;EACrBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE;AACjB,CAAC;AAAC;AAEK,IAAMC,sBAAoD,GAAG;EAClEF,OAAO,EAAE,MAAM;EACfG,cAAc,EAAE;AAClB,CAAC;AAAC;AAEK,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsB,CACjCC,OAAoB,EACpBC,MAAoC,EAC3B;EACTC,MAAM,CAACC,OAAO,CAACF,MAAM,CAAC,CAACG,OAAO,CAAC,gBAAkB;IAAA;MAAhBC,GAAG;MAAEC,KAAK;IACzC;IACAN,OAAO,CAACO,KAAK,CAACF,GAAG,CAAC,GAAGC,KAAK;EAC5B,CAAC,CAAC;AACJ,CAAC;AAAC"}

package/dist/esm/Alert/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useMemo } from 'react';
 import { sizeStyles } from '@os-design/styles';
 import { omitEmotionProps } from '@os-design/utils';
@@ -7,19 +6,15 @@ import { clr } from '@os-design/theming';
 import { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-
 const infoContainerStyles = p => p.type === 'info' && css`
     background-color: ${clr(p.theme.alertInfoColorBg)};
   `;
-
 const successContainerStyles = p => p.type === 'success' && css`
     background-color: ${clr(p.theme.alertSuccessColorBg)};
   `;
-
 const errorContainerStyles = p => p.type === 'error' && css`
     background-color: ${clr(p.theme.alertErrorColorBg)};
   `;
-
 const Container = styled('div', omitEmotionProps('type', 'size'))`
   display: flex;
   flex-direction: row;
@@ -34,19 +29,15 @@ const Container = styled('div', omitEmotionProps('type', 'size'))`
   ${errorContainerStyles};
   ${sizeStyles};
 `;
-
 const infoIconContainerStyles = p => p.type === 'info' && css`
     color: ${clr(p.theme.alertInfoColorIcon)};
   `;
-
 const successIconContainerStyles = p => p.type === 'success' && css`
     color: ${clr(p.theme.alertSuccessColorIcon)};
   `;
-
 const errorIconContainerStyles = p => p.type === 'error' && css`
     color: ${clr(p.theme.alertErrorColorIcon)};
   `;
-
 const IconContainer = styled('i', omitEmotionProps('type'))`
   display: flex;
   align-items: center;
@@ -63,10 +54,10 @@ const typeIconMap = {
   success: CheckCircle,
   error: CloseCircle
 };
+
 /**
  * The component for feedback.
  */
-
 const Alert = /*#__PURE__*/forwardRef(({
   type,
   size,

package/dist/esm/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","sizeStyles","omitEmotionProps","clr","CheckCircle","CloseCircle","InfoCircle","styled","css","infoContainerStyles","p","type","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","borderRadius","colorText","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","success","error","Alert","size","children","rest","ref","Icon","displayName"],"sources":["../../../src/Alert/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AlertProps extends JsxDivProps, WithSize {\n  /**\n   * Type of styles.\n   */\n  type: 'info' | 'success' | 'error';\n}\n\nconst infoContainerStyles = (p) =>\n  p.type === 'info' &&\n  css`\n    background-color: ${clr(p.theme.alertInfoColorBg)};\n  `;\n\nconst successContainerStyles = (p) =>\n  p.type === 'success' &&\n  css`\n    background-color: ${clr(p.theme.alertSuccessColorBg)};\n  `;\n\nconst errorContainerStyles = (p) =>\n  p.type === 'error' &&\n  css`\n    background-color: ${clr(p.theme.alertErrorColorBg)};\n  `;\n\ntype ContainerProps = Pick<AlertProps, 'type' | 'size'>;\nconst Container = styled(\n  'div',\n  omitEmotionProps('type', 'size')\n)<ContainerProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: 1em;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${infoContainerStyles};\n  ${successContainerStyles};\n  ${errorContainerStyles};\n  ${sizeStyles};\n`;\n\nconst infoIconContainerStyles = (p) =>\n  p.type === 'info' &&\n  css`\n    color: ${clr(p.theme.alertInfoColorIcon)};\n  `;\n\nconst successIconContainerStyles = (p) =>\n  p.type === 'success' &&\n  css`\n    color: ${clr(p.theme.alertSuccessColorIcon)};\n  `;\n\nconst errorIconContainerStyles = (p) =>\n  p.type === 'error' &&\n  css`\n    color: ${clr(p.theme.alertErrorColorIcon)};\n  `;\n\ntype IconContainerProps = Pick<AlertProps, 'type'>;\nconst IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`\n  display: flex;\n  align-items: center;\n\n  margin-right: 0.3em;\n  font-size: 1.4em;\n\n  ${infoIconContainerStyles};\n  ${successIconContainerStyles};\n  ${errorIconContainerStyles};\n`;\n\nconst typeIconMap = {\n  info: InfoCircle,\n  success: CheckCircle,\n  error: CloseCircle,\n};\n\n/**\n * The component for feedback.\n */\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n  ({ type, size, children, ...rest }, ref) => {\n    const Icon = useMemo(() => typeIconMap[type], [type]);\n\n    return (\n      <Container size={size} type={type} role='alert' {...rest} ref={ref}>\n        <IconContainer type={type}>\n          <Icon />\n        </IconContainer>\n        <span>{children}</span>\n      </Container>\n    );\n  }\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useMemo","sizeStyles","omitEmotionProps","clr","CheckCircle","CloseCircle","InfoCircle","styled","css","infoContainerStyles","p","type","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","borderRadius","colorText","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","success","error","Alert","size","children","rest","ref","Icon","displayName"],"sources":["../../../src/Alert/index.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport { CheckCircle, CloseCircle, InfoCircle } from '@os-design/icons';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AlertProps extends JsxDivProps, WithSize {\n  /**\n   * Type of styles.\n   */\n  type: 'info' | 'success' | 'error';\n}\n\nconst infoContainerStyles = (p) =>\n  p.type === 'info' &&\n  css`\n    background-color: ${clr(p.theme.alertInfoColorBg)};\n  `;\n\nconst successContainerStyles = (p) =>\n  p.type === 'success' &&\n  css`\n    background-color: ${clr(p.theme.alertSuccessColorBg)};\n  `;\n\nconst errorContainerStyles = (p) =>\n  p.type === 'error' &&\n  css`\n    background-color: ${clr(p.theme.alertErrorColorBg)};\n  `;\n\ntype ContainerProps = Pick<AlertProps, 'type' | 'size'>;\nconst Container = styled(\n  'div',\n  omitEmotionProps('type', 'size')\n)<ContainerProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: 1em;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${infoContainerStyles};\n  ${successContainerStyles};\n  ${errorContainerStyles};\n  ${sizeStyles};\n`;\n\nconst infoIconContainerStyles = (p) =>\n  p.type === 'info' &&\n  css`\n    color: ${clr(p.theme.alertInfoColorIcon)};\n  `;\n\nconst successIconContainerStyles = (p) =>\n  p.type === 'success' &&\n  css`\n    color: ${clr(p.theme.alertSuccessColorIcon)};\n  `;\n\nconst errorIconContainerStyles = (p) =>\n  p.type === 'error' &&\n  css`\n    color: ${clr(p.theme.alertErrorColorIcon)};\n  `;\n\ntype IconContainerProps = Pick<AlertProps, 'type'>;\nconst IconContainer = styled('i', omitEmotionProps('type'))<IconContainerProps>`\n  display: flex;\n  align-items: center;\n\n  margin-right: 0.3em;\n  font-size: 1.4em;\n\n  ${infoIconContainerStyles};\n  ${successIconContainerStyles};\n  ${errorIconContainerStyles};\n`;\n\nconst typeIconMap = {\n  info: InfoCircle,\n  success: CheckCircle,\n  error: CloseCircle,\n};\n\n/**\n * The component for feedback.\n */\nconst Alert = forwardRef<HTMLDivElement, AlertProps>(\n  ({ type, size, children, ...rest }, ref) => {\n    const Icon = useMemo(() => typeIconMap[type], [type]);\n\n    return (\n      <Container size={size} type={type} role='alert' {...rest} ref={ref}>\n        <IconContainer type={type}>\n          <Icon />\n        </IconContainer>\n        <span>{children}</span>\n      </Container>\n    );\n  }\n);\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAClD,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,GAAG,QAAQ,oBAAoB;AACxC,SAASC,WAAW,EAAEC,WAAW,EAAEC,UAAU,QAAQ,kBAAkB;AACvE,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,GAAG,QAAQ,gBAAgB;AAUpC,MAAMC,mBAAmB,GAAIC,CAAC,IAC5BA,CAAC,CAACC,IAAI,KAAK,MAAM,IACjBH,GAAI;AACN,wBAAwBL,GAAG,CAACO,CAAC,CAACE,KAAK,CAACC,gBAAgB,CAAE;AACtD,GAAG;AAEH,MAAMC,sBAAsB,GAAIJ,CAAC,IAC/BA,CAAC,CAACC,IAAI,KAAK,SAAS,IACpBH,GAAI;AACN,wBAAwBL,GAAG,CAACO,CAAC,CAACE,KAAK,CAACG,mBAAmB,CAAE;AACzD,GAAG;AAEH,MAAMC,oBAAoB,GAAIN,CAAC,IAC7BA,CAAC,CAACC,IAAI,KAAK,OAAO,IAClBH,GAAI;AACN,wBAAwBL,GAAG,CAACO,CAAC,CAACE,KAAK,CAACK,iBAAiB,CAAE;AACvD,GAAG;AAGH,MAAMC,SAAS,GAAGX,MAAM,CACtB,KAAK,EACLL,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAChB;AAClB;AACA;AACA;AACA;AACA;AACA,mBAAoBQ,CAAC,IAAKA,CAAC,CAACE,KAAK,CAACO,YAAa;AAC/C,WAAYT,CAAC,IAAKP,GAAG,CAACO,CAAC,CAACE,KAAK,CAACQ,SAAS,CAAE;AACzC;AACA,IAAIX,mBAAoB;AACxB,IAAIK,sBAAuB;AAC3B,IAAIE,oBAAqB;AACzB,IAAIf,UAAW;AACf,CAAC;AAED,MAAMoB,uBAAuB,GAAIX,CAAC,IAChCA,CAAC,CAACC,IAAI,KAAK,MAAM,IACjBH,GAAI;AACN,aAAaL,GAAG,CAACO,CAAC,CAACE,KAAK,CAACU,kBAAkB,CAAE;AAC7C,GAAG;AAEH,MAAMC,0BAA0B,GAAIb,CAAC,IACnCA,CAAC,CAACC,IAAI,KAAK,SAAS,IACpBH,GAAI;AACN,aAAaL,GAAG,CAACO,CAAC,CAACE,KAAK,CAACY,qBAAqB,CAAE;AAChD,GAAG;AAEH,MAAMC,wBAAwB,GAAIf,CAAC,IACjCA,CAAC,CAACC,IAAI,KAAK,OAAO,IAClBH,GAAI;AACN,aAAaL,GAAG,CAACO,CAAC,CAACE,KAAK,CAACc,mBAAmB,CAAE;AAC9C,GAAG;AAGH,MAAMC,aAAa,GAAGpB,MAAM,CAAC,GAAG,EAAEL,gBAAgB,CAAC,MAAM,CAAC,CAAsB;AAChF;AACA;AACA;AACA;AACA;AACA;AACA,IAAImB,uBAAwB;AAC5B,IAAIE,0BAA2B;AAC/B,IAAIE,wBAAyB;AAC7B,CAAC;AAED,MAAMG,WAAW,GAAG;EAClBC,IAAI,EAAEvB,UAAU;EAChBwB,OAAO,EAAE1B,WAAW;EACpB2B,KAAK,EAAE1B;AACT,CAAC;;AAED;AACA;AACA;AACA,MAAM2B,KAAK,gBAAGjC,UAAU,CACtB,CAAC;EAAEY,IAAI;EAAEsB,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,KAAK;EAC1C,MAAMC,IAAI,GAAGrC,OAAO,CAAC,MAAM4B,WAAW,CAACjB,IAAI,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAErD,oBACE,oBAAC,SAAS;IAAC,IAAI,EAAEsB,IAAK;IAAC,IAAI,EAAEtB,IAAK;IAAC,IAAI,EAAC;EAAO,GAAKwB,IAAI;IAAE,GAAG,EAAEC;EAAI,iBACjE,oBAAC,aAAa;IAAC,IAAI,EAAEzB;EAAK,gBACxB,oBAAC,IAAI,OAAG,CACM,eAChB,kCAAOuB,QAAQ,CAAQ,CACb;AAEhB,CAAC,CACF;AAEDF,KAAK,CAACM,WAAW,GAAG,OAAO;AAE3B,eAAeN,KAAK"}

package/dist/esm/Avatar/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { forwardRef, useCallback, useMemo } from 'react';
 import styled from '@emotion/styled';
 import { User } from '@os-design/icons';
@@ -65,10 +64,10 @@ const Online = styled.span`
     background-color: ${p => clr(p.theme.avatarOnlineColorBg)};
   }
 `;
+
 /**
  * Avatar can be used to represent people.
  */
-
 const Avatar = /*#__PURE__*/forwardRef(({
   firstName,
   lastName,
@@ -94,14 +93,16 @@ const Avatar = /*#__PURE__*/forwardRef(({
     if (image) return /*#__PURE__*/React.createElement(Image, _extends({
       url: image,
       cropped: true
-    }, imageProps)); // Render the initials of the name if either firstName or lastName was specified
+    }, imageProps));
 
+    // Render the initials of the name if either firstName or lastName was specified
     const initials = nameToInitials({
       firstName,
       lastName
     });
-    if (initials) return /*#__PURE__*/React.createElement(Initials, null, initials); // Otherwise render the user icon
+    if (initials) return /*#__PURE__*/React.createElement(Initials, null, initials);
 
+    // Otherwise render the user icon
     return /*#__PURE__*/React.createElement(UserIcon, null);
   }, [image, imageProps, firstName, lastName]);
   return /*#__PURE__*/React.createElement(Container, {

package/dist/esm/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","styled","User","sizeStyles","omitEmotionProps","clr","useTheme","nameToInitials","strToHue","Image","Container","AvatarContainer","p","theme","borderRadius","bgColor","UserIcon","Initials","div","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","firstName","lastName","image","imageProps","online","size","rest","ref","parts","push","length","join","avatarDefaultColorBg","fullName","filter","i","undefined","renderChildren","initials","displayName"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, Color, useTheme } from '@os-design/theming';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\nimport Image, { ImageProps } from '../Image';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n  /**\n   * Used to render the first letter if the image URL is not specified.\n   * @default undefined\n   */\n  firstName?: string;\n  /**\n   * Used to render the second letter if the image URL is not specified.\n   * @default undefined\n   */\n  lastName?: string;\n  /**\n   * The URL of the image.\n   * @default undefined\n   */\n  image?: string;\n  /**\n   * The props of the image.\n   * @default undefined\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * Whether the user is online.\n   * @default false\n   */\n  online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  position: relative;\n  width: 1em;\n  height: 1em;\n  min-width: 1em;\n  min-height: 1em;\n  ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n  bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n  'div',\n  omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n  width: 100%;\n  height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  font-weight: 500;\n  line-height: 1;\n\n  color: hsl(0, 0%, 100%);\n  background-color: ${(p) => clr(p.bgColor)};\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  white-space: nowrap; // To disable multiline text\n  overflow: hidden; // To trim the image corners\n\n  ${sizeStyles};\n`;\n\nconst UserIcon = styled(User)`\n  font-size: 0.6em;\n`;\n\nconst Initials = styled.div`\n  font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n  position: absolute;\n  right: -0.05em;\n  bottom: -0.05em;\n  width: ${OUTER_SIZE}em;\n  height: ${OUTER_SIZE}em;\n  border-radius: 50%;\n  background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n  &::before {\n    content: '';\n    position: absolute;\n    left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n    bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n    width: ${INNER_SIZE}em;\n    height: ${INNER_SIZE}em;\n    border-radius: 50%;\n    background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n  }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      firstName,\n      lastName,\n      image,\n      imageProps = {},\n      online = false,\n      size = '2em',\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n\n    const bgColor = useMemo<Color>(() => {\n      const parts: string[] = [];\n      if (firstName) parts.push(firstName);\n      if (lastName) parts.push(lastName);\n      if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n      return theme.avatarDefaultColorBg;\n    }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n    const fullName = useMemo(\n      () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n      [firstName, lastName]\n    );\n\n    const renderChildren = useCallback(() => {\n      // Render the image if the image property was specified\n      if (image) return <Image url={image} cropped {...imageProps} />;\n\n      // Render the initials of the name if either firstName or lastName was specified\n      const initials = nameToInitials({ firstName, lastName });\n      if (initials) return <Initials>{initials}</Initials>;\n\n      // Otherwise render the user icon\n      return <UserIcon />;\n    }, [image, imageProps, firstName, lastName]);\n\n    return (\n      <Container size={size}>\n        <AvatarContainer\n          bgColor={bgColor}\n          role='img'\n          aria-label={fullName || 'User'}\n          {...rest}\n          ref={ref}\n        >\n          {renderChildren()}\n        </AvatarContainer>\n        {online && <Online />}\n      </Container>\n    );\n  }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","styled","User","sizeStyles","omitEmotionProps","clr","useTheme","nameToInitials","strToHue","Image","Container","AvatarContainer","p","theme","borderRadius","bgColor","UserIcon","Initials","div","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","firstName","lastName","image","imageProps","online","size","rest","ref","parts","push","length","join","avatarDefaultColorBg","fullName","filter","i","undefined","renderChildren","initials","displayName"],"sources":["../../../src/Avatar/index.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { User } from '@os-design/icons';\nimport { WithSize, sizeStyles } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr, Color, useTheme } from '@os-design/theming';\nimport nameToInitials from './utils/nameToInitials';\nimport strToHue from './utils/strToHue';\nimport Image, { ImageProps } from '../Image';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport interface AvatarProps extends JsxDivProps, WithSize {\n  /**\n   * Used to render the first letter if the image URL is not specified.\n   * @default undefined\n   */\n  firstName?: string;\n  /**\n   * Used to render the second letter if the image URL is not specified.\n   * @default undefined\n   */\n  lastName?: string;\n  /**\n   * The URL of the image.\n   * @default undefined\n   */\n  image?: string;\n  /**\n   * The props of the image.\n   * @default undefined\n   */\n  imageProps?: Omit<ImageProps, 'url'>;\n  /**\n   * Whether the user is online.\n   * @default false\n   */\n  online?: boolean;\n}\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  position: relative;\n  width: 1em;\n  height: 1em;\n  min-width: 1em;\n  min-height: 1em;\n  ${sizeStyles};\n`;\n\ninterface AvatarContainerProps {\n  bgColor: Color;\n}\n\nconst AvatarContainer = styled(\n  'div',\n  omitEmotionProps('bgColor')\n)<AvatarContainerProps>`\n  width: 100%;\n  height: 100%;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  font-weight: 500;\n  line-height: 1;\n\n  color: hsl(0, 0%, 100%);\n  background-color: ${(p) => clr(p.bgColor)};\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  white-space: nowrap; // To disable multiline text\n  overflow: hidden; // To trim the image corners\n\n  ${sizeStyles};\n`;\n\nconst UserIcon = styled(User)`\n  font-size: 0.6em;\n`;\n\nconst Initials = styled.div`\n  font-size: 0.35em;\n`;\n\nconst INNER_SIZE = 0.25;\nconst OUTER_SIZE = INNER_SIZE * 1.2;\n\nconst Online = styled.span`\n  position: absolute;\n  right: -0.05em;\n  bottom: -0.05em;\n  width: ${OUTER_SIZE}em;\n  height: ${OUTER_SIZE}em;\n  border-radius: 50%;\n  background-color: ${(p) => clr(p.theme.avatarOnlineColorScoop)};\n\n  &::before {\n    content: '';\n    position: absolute;\n    left: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n    bottom: ${(OUTER_SIZE - INNER_SIZE) / 2}em;\n    width: ${INNER_SIZE}em;\n    height: ${INNER_SIZE}em;\n    border-radius: 50%;\n    background-color: ${(p) => clr(p.theme.avatarOnlineColorBg)};\n  }\n`;\n\n/**\n * Avatar can be used to represent people.\n */\nconst Avatar = forwardRef<HTMLDivElement, AvatarProps>(\n  (\n    {\n      firstName,\n      lastName,\n      image,\n      imageProps = {},\n      online = false,\n      size = '2em',\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useTheme();\n\n    const bgColor = useMemo<Color>(() => {\n      const parts: string[] = [];\n      if (firstName) parts.push(firstName);\n      if (lastName) parts.push(lastName);\n      if (parts.length > 0) return [strToHue(parts.join(' ')), 30, 60];\n      return theme.avatarDefaultColorBg;\n    }, [firstName, lastName, theme.avatarDefaultColorBg]);\n\n    const fullName = useMemo(\n      () => [firstName, lastName].filter((i) => i).join(' ') || undefined,\n      [firstName, lastName]\n    );\n\n    const renderChildren = useCallback(() => {\n      // Render the image if the image property was specified\n      if (image) return <Image url={image} cropped {...imageProps} />;\n\n      // Render the initials of the name if either firstName or lastName was specified\n      const initials = nameToInitials({ firstName, lastName });\n      if (initials) return <Initials>{initials}</Initials>;\n\n      // Otherwise render the user icon\n      return <UserIcon />;\n    }, [image, imageProps, firstName, lastName]);\n\n    return (\n      <Container size={size}>\n        <AvatarContainer\n          bgColor={bgColor}\n          role='img'\n          aria-label={fullName || 'User'}\n          {...rest}\n          ref={ref}\n        >\n          {renderChildren()}\n        </AvatarContainer>\n        {online && <Online />}\n      </Container>\n    );\n  }\n);\n\nAvatar.displayName = 'Avatar';\n\nexport default Avatar;\n"],"mappings":"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"}

package/dist/esm/Avatar/utils/nameToInitials.js

@@ -6,6 +6,5 @@ const nameToInitials = ({
   const second = lastName ? lastName.charAt(0) : '';
   return `${first}${second}`.toUpperCase();
 };
-
 export default nameToInitials;
 //# sourceMappingURL=nameToInitials.js.map

package/dist/esm/Avatar/utils/nameToInitials.js.map

@@ -1 +1 @@
-{"version":3,"file":"nameToInitials.js","names":["nameToInitials","firstName","lastName","first","charAt","second","toUpperCase"],"sources":["../../../../src/Avatar/utils/nameToInitials.ts"],"sourcesContent":["interface Name {\n  firstName?: string;\n  lastName?: string;\n}\n\nconst nameToInitials = ({ firstName, lastName }: Name): string => {\n  const first = firstName ? firstName.charAt(0) : '';\n  const second = lastName ? lastName.charAt(0) : '';\n  return `${first}${second}`.toUpperCase();\n};\n\nexport default nameToInitials;\n"],"mappings":"AAKA,MAAMA,cAAc,GAAG,CAAC;EAAEC,SAAF;EAAaC;AAAb,CAAD,KAA2C;EAChE,MAAMC,KAAK,GAAGF,SAAS,GAAGA,SAAS,CAACG,MAAV,CAAiB,CAAjB,CAAH,GAAyB,EAAhD;EACA,MAAMC,MAAM,GAAGH,QAAQ,GAAGA,QAAQ,CAACE,MAAT,CAAgB,CAAhB,CAAH,GAAwB,EAA/C;EACA,OAAQ,GAAED,KAAM,GAAEE,MAAO,EAAlB,CAAoBC,WAApB,EAAP;AACD,CAJD;;AAMA,eAAeN,cAAf"}
+{"version":3,"file":"nameToInitials.js","names":["nameToInitials","firstName","lastName","first","charAt","second","toUpperCase"],"sources":["../../../../src/Avatar/utils/nameToInitials.ts"],"sourcesContent":["interface Name {\n  firstName?: string;\n  lastName?: string;\n}\n\nconst nameToInitials = ({ firstName, lastName }: Name): string => {\n  const first = firstName ? firstName.charAt(0) : '';\n  const second = lastName ? lastName.charAt(0) : '';\n  return `${first}${second}`.toUpperCase();\n};\n\nexport default nameToInitials;\n"],"mappings":"AAKA,MAAMA,cAAc,GAAG,CAAC;EAAEC,SAAS;EAAEC;AAAe,CAAC,KAAa;EAChE,MAAMC,KAAK,GAAGF,SAAS,GAAGA,SAAS,CAACG,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;EAClD,MAAMC,MAAM,GAAGH,QAAQ,GAAGA,QAAQ,CAACE,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;EACjD,OAAQ,GAAED,KAAM,GAAEE,MAAO,EAAC,CAACC,WAAW,EAAE;AAC1C,CAAC;AAED,eAAeN,cAAc"}

package/dist/esm/Avatar/utils/strToHue.js

@@ -3,14 +3,11 @@
  */
 const strToHue = str => {
   let hash = 0;
-
   for (let i = 0; i < str.length; i += 1) {
     // eslint-disable-next-line no-bitwise
     hash = str.charCodeAt(i) + ((hash << 5) - hash);
   }
-
   return hash % 360;
 };
-
 export default strToHue;
 //# sourceMappingURL=strToHue.js.map

package/dist/esm/Avatar/utils/strToHue.js.map

@@ -1 +1 @@
-{"version":3,"file":"strToHue.js","names":["strToHue","str","hash","i","length","charCodeAt"],"sources":["../../../../src/Avatar/utils/strToHue.ts"],"sourcesContent":["/**\n * Return the hue of the color by string.\n */\nconst strToHue = (str: string): number => {\n  let hash = 0;\n  for (let i = 0; i < str.length; i += 1) {\n    // eslint-disable-next-line no-bitwise\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n  }\n  return hash % 360;\n};\n\nexport default strToHue;\n"],"mappings":"AAAA;AACA;AACA;AACA,MAAMA,QAAQ,GAAIC,GAAD,IAAyB;EACxC,IAAIC,IAAI,GAAG,CAAX;;EACA,KAAK,IAAIC,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGF,GAAG,CAACG,MAAxB,EAAgCD,CAAC,IAAI,CAArC,EAAwC;IACtC;IACAD,IAAI,GAAGD,GAAG,CAACI,UAAJ,CAAeF,CAAf,KAAqB,CAACD,IAAI,IAAI,CAAT,IAAcA,IAAnC,CAAP;EACD;;EACD,OAAOA,IAAI,GAAG,GAAd;AACD,CAPD;;AASA,eAAeF,QAAf"}
+{"version":3,"file":"strToHue.js","names":["strToHue","str","hash","i","length","charCodeAt"],"sources":["../../../../src/Avatar/utils/strToHue.ts"],"sourcesContent":["/**\n * Return the hue of the color by string.\n */\nconst strToHue = (str: string): number => {\n  let hash = 0;\n  for (let i = 0; i < str.length; i += 1) {\n    // eslint-disable-next-line no-bitwise\n    hash = str.charCodeAt(i) + ((hash << 5) - hash);\n  }\n  return hash % 360;\n};\n\nexport default strToHue;\n"],"mappings":"AAAA;AACA;AACA;AACA,MAAMA,QAAQ,GAAIC,GAAW,IAAa;EACxC,IAAIC,IAAI,GAAG,CAAC;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,GAAG,CAACG,MAAM,EAAED,CAAC,IAAI,CAAC,EAAE;IACtC;IACAD,IAAI,GAAGD,GAAG,CAACI,UAAU,CAACF,CAAC,CAAC,IAAI,CAACD,IAAI,IAAI,CAAC,IAAIA,IAAI,CAAC;EACjD;EACA,OAAOA,IAAI,GAAG,GAAG;AACnB,CAAC;AAED,eAAeF,QAAQ"}

package/dist/esm/AvatarSkeleton/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import styled from '@emotion/styled';
 import React, { forwardRef } from 'react';
 import { sizeStyles } from '@os-design/styles';
@@ -8,10 +7,10 @@ import Skeleton from '../Skeleton';
 const Container = styled('div', omitEmotionProps('size'))`
   ${sizeStyles};
 `;
+
 /**
  * Provides an avatar placeholder while a user waits for the content to load.
  */
-
 const AvatarSkeleton = /*#__PURE__*/forwardRef(({
   size = '2em',
   ...rest

package/dist/esm/AvatarSkeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","Container","AvatarSkeleton","size","rest","ref","displayName"],"sources":["../../../src/AvatarSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type AvatarSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\n/**\n * Provides an avatar placeholder while a user waits for the content to load.\n */\nconst AvatarSkeleton = forwardRef<HTMLDivElement, AvatarSkeletonProps>(\n  ({ size = '2em', ...rest }, ref) => (\n    <Container size={size} {...rest} ref={ref}>\n      <Skeleton width='1em' />\n    </Container>\n  )\n);\n\nAvatarSkeleton.displayName = 'AvatarSkeleton';\n\nexport default AvatarSkeleton;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,OAAOC,QAAP,MAAqB,aAArB;AAKA,MAAMC,SAAS,GAAGN,MAAM,CAAC,KAAD,EAAQI,gBAAgB,CAAC,MAAD,CAAxB,CAA4C;AACpE,IAAID,UAAW;AACf,CAFA;AAIA;AACA;AACA;;AACA,MAAMI,cAAc,gBAAGL,UAAU,CAC/B,CAAC;EAAEM,IAAI,GAAG,KAAT;EAAgB,GAAGC;AAAnB,CAAD,EAA4BC,GAA5B,kBACE,oBAAC,SAAD;EAAW,IAAI,EAAEF;AAAjB,GAA2BC,IAA3B;EAAiC,GAAG,EAAEC;AAAtC,iBACE,oBAAC,QAAD;EAAU,KAAK,EAAC;AAAhB,EADF,CAF6B,CAAjC;AAQAH,cAAc,CAACI,WAAf,GAA6B,gBAA7B;AAEA,eAAeJ,cAAf"}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","Container","AvatarSkeleton","size","rest","ref","displayName"],"sources":["../../../src/AvatarSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport Skeleton from '../Skeleton';\n\ntype JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;\nexport type AvatarSkeletonProps = JsxDivProps & WithSize;\n\nconst Container = styled('div', omitEmotionProps('size'))<WithSize>`\n  ${sizeStyles};\n`;\n\n/**\n * Provides an avatar placeholder while a user waits for the content to load.\n */\nconst AvatarSkeleton = forwardRef<HTMLDivElement, AvatarSkeletonProps>(\n  ({ size = '2em', ...rest }, ref) => (\n    <Container size={size} {...rest} ref={ref}>\n      <Skeleton width='1em' />\n    </Container>\n  )\n);\n\nAvatarSkeleton.displayName = 'AvatarSkeleton';\n\nexport default AvatarSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,OAAOC,QAAQ,MAAM,aAAa;AAKlC,MAAMC,SAAS,GAAGN,MAAM,CAAC,KAAK,EAAEI,gBAAgB,CAAC,MAAM,CAAC,CAAY;AACpE,IAAID,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA,MAAMI,cAAc,gBAAGL,UAAU,CAC/B,CAAC;EAAEM,IAAI,GAAG,KAAK;EAAE,GAAGC;AAAK,CAAC,EAAEC,GAAG,kBAC7B,oBAAC,SAAS;EAAC,IAAI,EAAEF;AAAK,GAAKC,IAAI;EAAE,GAAG,EAAEC;AAAI,iBACxC,oBAAC,QAAQ;EAAC,KAAK,EAAC;AAAK,EAAG,CAE3B,CACF;AAEDH,cAAc,CAACI,WAAW,GAAG,gBAAgB;AAE7C,eAAeJ,cAAc"}