@os-design/core 1.0.156 → 1.0.157

package/dist/cjs/Alert/index.js

@@ -1,90 +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 = _interopRequireWildcard(require("react"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _icons = require("@os-design/icons");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react2 = require("@emotion/react");
-
 var _excluded = ["type", "size", "children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
 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 _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); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var infoContainerStyles = function infoContainerStyles(p) {
   return p.type === 'info' && (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.alertInfoColorBg));
 };
-
 var successContainerStyles = function successContainerStyles(p) {
   return p.type === 'success' && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.alertSuccessColorBg));
 };
-
 var errorContainerStyles = function errorContainerStyles(p) {
   return p.type === 'error' && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), (0, _theming.clr)(p.theme.alertErrorColorBg));
 };
-
 var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('type', 'size'))(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: 1em;\n  border-radius: ", "em;\n  color: ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return p.theme.borderRadius;
 }, function (p) {
   return (0, _theming.clr)(p.theme.colorText);
 }, infoContainerStyles, successContainerStyles, errorContainerStyles, _styles.sizeStyles);
-
 var infoIconContainerStyles = function infoIconContainerStyles(p) {
   return p.type === 'info' && (0, _react2.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), (0, _theming.clr)(p.theme.alertInfoColorIcon));
 };
-
 var successIconContainerStyles = function successIconContainerStyles(p) {
   return p.type === 'success' && (0, _react2.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), (0, _theming.clr)(p.theme.alertSuccessColorIcon));
 };
-
 var errorIconContainerStyles = function errorIconContainerStyles(p) {
   return p.type === 'error' && (0, _react2.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), (0, _theming.clr)(p.theme.alertErrorColorIcon));
 };
-
 var IconContainer = (0, _styled["default"])('i', (0, _utils.omitEmotionProps)('type'))(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  margin-right: 0.3em;\n  font-size: 1.4em;\n\n  ", ";\n  ", ";\n  ", ";\n"])), infoIconContainerStyles, successIconContainerStyles, errorIconContainerStyles);
 var typeIconMap = {
   info: _icons.InfoCircle,
   success: _icons.CheckCircle,
   error: _icons.CloseCircle
 };
+
 /**
  * The component for feedback.
  */
-
 var Alert = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var type = _ref.type,
-      size = _ref.size,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    size = _ref.size,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var Icon = (0, _react.useMemo)(function () {
     return typeIconMap[type];
   }, [type]);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["infoContainerStyles","p","type","css","clr","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","styled","omitEmotionProps","borderRadius","colorText","sizeStyles","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","InfoCircle","success","CheckCircle","error","CloseCircle","Alert","forwardRef","ref","size","children","rest","Icon","useMemo","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;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD;EAAA,OAC1BA,CAAC,CAACC,IAAF,KAAW,MAAX,QACAC,WADA,wGAEsB,IAAAC,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQC,gBAAZ,CAFtB,CAD0B;AAAA,CAA5B;;AAMA,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACN,CAAD;EAAA,OAC7BA,CAAC,CAACC,IAAF,KAAW,SAAX,QACAC,WADA,0GAEsB,IAAAC,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQG,mBAAZ,CAFtB,CAD6B;AAAA,CAA/B;;AAMA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACR,CAAD;EAAA,OAC3BA,CAAC,CAACC,IAAF,KAAW,OAAX,QACAC,WADA,0GAEsB,IAAAC,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQK,iBAAZ,CAFtB,CAD2B;AAAA,CAA7B;;AAOA,IAAMC,SAAS,GAAG,IAAAC,kBAAA,EAChB,KADgB,EAEhB,IAAAC,uBAAA,EAAiB,MAAjB,EAAyB,MAAzB,CAFgB,CAAH,+OASI,UAACZ,CAAD;EAAA,OAAOA,CAAC,CAACI,KAAF,CAAQS,YAAf;AAAA,CATJ,EAUJ,UAACb,CAAD;EAAA,OAAO,IAAAG,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQU,SAAZ,CAAP;AAAA,CAVI,EAYXf,mBAZW,EAaXO,sBAbW,EAcXE,oBAdW,EAeXO,kBAfW,CAAf;;AAkBA,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,CAAChB,CAAD;EAAA,OAC9BA,CAAC,CAACC,IAAF,KAAW,MAAX,QACAC,WADA,+FAEW,IAAAC,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQa,kBAAZ,CAFX,CAD8B;AAAA,CAAhC;;AAMA,IAAMC,0BAA0B,GAAG,SAA7BA,0BAA6B,CAAClB,CAAD;EAAA,OACjCA,CAAC,CAACC,IAAF,KAAW,SAAX,QACAC,WADA,+FAEW,IAAAC,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQe,qBAAZ,CAFX,CADiC;AAAA,CAAnC;;AAMA,IAAMC,wBAAwB,GAAG,SAA3BA,wBAA2B,CAACpB,CAAD;EAAA,OAC/BA,CAAC,CAACC,IAAF,KAAW,OAAX,QACAC,WADA,+FAEW,IAAAC,YAAA,EAAIH,CAAC,CAACI,KAAF,CAAQiB,mBAAZ,CAFX,CAD+B;AAAA,CAAjC;;AAOA,IAAMC,aAAa,GAAG,IAAAX,kBAAA,EAAO,GAAP,EAAY,IAAAC,uBAAA,EAAiB,MAAjB,CAAZ,CAAH,gMAOfI,uBAPe,EAQfE,0BARe,EASfE,wBATe,CAAnB;AAYA,IAAMG,WAAW,GAAG;EAClBC,IAAI,EAAEC,iBADY;EAElBC,OAAO,EAAEC,kBAFS;EAGlBC,KAAK,EAAEC;AAHW,CAApB;AAMA;AACA;AACA;;AACA,IAAMC,KAAK,gBAAG,IAAAC,iBAAA,EACZ,gBAAoCC,GAApC,EAA4C;EAAA,IAAzC/B,IAAyC,QAAzCA,IAAyC;EAAA,IAAnCgC,IAAmC,QAAnCA,IAAmC;EAAA,IAA7BC,QAA6B,QAA7BA,QAA6B;EAAA,IAAhBC,IAAgB;;EAC1C,IAAMC,IAAI,GAAG,IAAAC,cAAA,EAAQ;IAAA,OAAMd,WAAW,CAACtB,IAAD,CAAjB;EAAA,CAAR,EAAiC,CAACA,IAAD,CAAjC,CAAb;EAEA,oBACE,gCAAC,SAAD;IAAW,IAAI,EAAEgC,IAAjB;IAAuB,IAAI,EAAEhC,IAA7B;IAAmC,IAAI,EAAC;EAAxC,GAAoDkC,IAApD;IAA0D,GAAG,EAAEH;EAA/D,iBACE,gCAAC,aAAD;IAAe,IAAI,EAAE/B;EAArB,gBACE,gCAAC,IAAD,OADF,CADF,eAIE,8CAAOiC,QAAP,CAJF,CADF;AAQD,CAZW,CAAd;AAeAJ,KAAK,CAACQ,WAAN,GAAoB,OAApB;eAEeR,K"}
+{"version":3,"file":"index.js","names":["infoContainerStyles","p","type","css","clr","theme","alertInfoColorBg","successContainerStyles","alertSuccessColorBg","errorContainerStyles","alertErrorColorBg","Container","styled","omitEmotionProps","borderRadius","colorText","sizeStyles","infoIconContainerStyles","alertInfoColorIcon","successIconContainerStyles","alertSuccessColorIcon","errorIconContainerStyles","alertErrorColorIcon","IconContainer","typeIconMap","info","InfoCircle","success","CheckCircle","error","CloseCircle","Alert","forwardRef","ref","size","children","rest","Icon","useMemo","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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"}

package/dist/cjs/Avatar/index.js

@@ -1,48 +1,28 @@
 "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 = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _icons = require("@os-design/icons");
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _nameToInitials = _interopRequireDefault(require("./utils/nameToInitials"));
-
 var _strToHue = _interopRequireDefault(require("./utils/strToHue"));
-
 var _Image = _interopRequireDefault(require("../Image"));
-
 var _excluded = ["firstName", "lastName", "image", "imageProps", "online", "size"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 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 _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); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 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"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  width: 1em;\n  height: 1em;\n  min-width: 1em;\n  min-height: 1em;\n  ", ";\n"])), _styles.sizeStyles);
 var AvatarContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('bgColor'))(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  border-radius: ", "em;\n\n  font-weight: 500;\n  line-height: 1;\n\n  color: hsl(0, 0%, 100%);\n  background-color: ", ";\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  ", ";\n"])), function (p) {
   return p.theme.borderRadius;
@@ -50,37 +30,31 @@ var AvatarContainer = (0, _styled["default"])('div', (0, _utils.omitEmotionProps
   return (0, _theming.clr)(p.bgColor);
 }, _styles.sizeStyles);
 var UserIcon = (0, _styled["default"])(_icons.User)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: 0.6em;\n"])));
-
 var Initials = _styled["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: 0.35em;\n"])));
-
 var INNER_SIZE = 0.25;
 var OUTER_SIZE = INNER_SIZE * 1.2;
-
 var Online = _styled["default"].span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: -0.05em;\n  bottom: -0.05em;\n  width: ", "em;\n  height: ", "em;\n  border-radius: 50%;\n  background-color: ", ";\n\n  &::before {\n    content: '';\n    position: absolute;\n    left: ", "em;\n    bottom: ", "em;\n    width: ", "em;\n    height: ", "em;\n    border-radius: 50%;\n    background-color: ", ";\n  }\n"])), OUTER_SIZE, OUTER_SIZE, function (p) {
   return (0, _theming.clr)(p.theme.avatarOnlineColorScoop);
 }, (OUTER_SIZE - INNER_SIZE) / 2, (OUTER_SIZE - INNER_SIZE) / 2, INNER_SIZE, INNER_SIZE, function (p) {
   return (0, _theming.clr)(p.theme.avatarOnlineColorBg);
 });
+
 /**
  * Avatar can be used to represent people.
  */
-
-
 var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var firstName = _ref.firstName,
-      lastName = _ref.lastName,
-      image = _ref.image,
-      _ref$imageProps = _ref.imageProps,
-      imageProps = _ref$imageProps === void 0 ? {} : _ref$imageProps,
-      _ref$online = _ref.online,
-      online = _ref$online === void 0 ? false : _ref$online,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? '2em' : _ref$size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    lastName = _ref.lastName,
+    image = _ref.image,
+    _ref$imageProps = _ref.imageProps,
+    imageProps = _ref$imageProps === void 0 ? {} : _ref$imageProps,
+    _ref$online = _ref.online,
+    online = _ref$online === void 0 ? false : _ref$online,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? '2em' : _ref$size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = (0, _theming.useTheme)(),
-      theme = _useTheme.theme;
-
+    theme = _useTheme.theme;
   var bgColor = (0, _react.useMemo)(function () {
     var parts = [];
     if (firstName) parts.push(firstName);
@@ -98,14 +72,16 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     if (image) return /*#__PURE__*/_react["default"].createElement(_Image["default"], _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
     var initials = (0, _nameToInitials["default"])({
       firstName: firstName,
       lastName: lastName
     });
-    if (initials) return /*#__PURE__*/_react["default"].createElement(Initials, null, initials); // Otherwise render the user icon
+    if (initials) return /*#__PURE__*/_react["default"].createElement(Initials, null, initials);
 
+    // Otherwise render the user icon
     return /*#__PURE__*/_react["default"].createElement(UserIcon, null);
   }, [image, imageProps, firstName, lastName]);
   return /*#__PURE__*/_react["default"].createElement(Container, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","AvatarContainer","p","theme","borderRadius","clr","bgColor","UserIcon","User","Initials","div","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","forwardRef","ref","firstName","lastName","image","imageProps","online","size","rest","useTheme","useMemo","parts","push","length","strToHue","join","avatarDefaultColorBg","fullName","filter","i","undefined","renderChildren","useCallback","initials","nameToInitials","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":["Container","styled","omitEmotionProps","sizeStyles","AvatarContainer","p","theme","borderRadius","clr","bgColor","UserIcon","User","Initials","div","INNER_SIZE","OUTER_SIZE","Online","span","avatarOnlineColorScoop","avatarOnlineColorBg","Avatar","forwardRef","ref","firstName","lastName","image","imageProps","online","size","rest","useTheme","useMemo","parts","push","length","strToHue","join","avatarDefaultColorBg","fullName","filter","i","undefined","renderChildren","useCallback","initials","nameToInitials","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/cjs/Avatar/utils/nameToInitials.js

@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var nameToInitials = function nameToInitials(_ref) {
   var firstName = _ref.firstName,
-      lastName = _ref.lastName;
+    lastName = _ref.lastName;
   var first = firstName ? firstName.charAt(0) : '';
   var second = lastName ? lastName.charAt(0) : '';
   return "".concat(first).concat(second).toUpperCase();
 };
-
 var _default = nameToInitials;
 exports["default"] = _default;
 //# sourceMappingURL=nameToInitials.js.map

package/dist/cjs/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,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,OAA2C;EAAA,IAAxCC,SAAwC,QAAxCA,SAAwC;EAAA,IAA7BC,QAA6B,QAA7BA,QAA6B;EAChE,IAAMC,KAAK,GAAGF,SAAS,GAAGA,SAAS,CAACG,MAAV,CAAiB,CAAjB,CAAH,GAAyB,EAAhD;EACA,IAAMC,MAAM,GAAGH,QAAQ,GAAGA,QAAQ,CAACE,MAAT,CAAgB,CAAhB,CAAH,GAAwB,EAA/C;EACA,OAAO,UAAGD,KAAH,SAAWE,MAAX,EAAoBC,WAApB,EAAP;AACD,CAJD;;eAMeN,c"}
+{"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,IAAMA,cAAc,GAAG,SAAjBA,cAAc,OAA8C;EAAA,IAAxCC,SAAS,QAATA,SAAS;IAAEC,QAAQ,QAARA,QAAQ;EAC3C,IAAMC,KAAK,GAAGF,SAAS,GAAGA,SAAS,CAACG,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;EAClD,IAAMC,MAAM,GAAGH,QAAQ,GAAGA,QAAQ,CAACE,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE;EACjD,OAAO,UAAGD,KAAK,SAAGE,MAAM,EAAGC,WAAW,EAAE;AAC1C,CAAC;AAAC,eAEaN,cAAc;AAAA"}

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

@@ -4,21 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 /**
  * Return the hue of the color by string.
  */
 var strToHue = function strToHue(str) {
   var hash = 0;
-
   for (var i = 0; i < str.length; i += 1) {
     // eslint-disable-next-line no-bitwise
     hash = str.charCodeAt(i) + ((hash << 5) - hash);
   }
-
   return hash % 360;
 };
-
 var _default = strToHue;
 exports["default"] = _default;
 //# sourceMappingURL=strToHue.js.map

package/dist/cjs/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,IAAMA,QAAQ,GAAG,SAAXA,QAAW,CAACC,GAAD,EAAyB;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;;eASeF,Q"}
+{"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,IAAMA,QAAQ,GAAG,SAAXA,QAAQ,CAAIC,GAAW,EAAa;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;AAAC,eAEaF,QAAQ;AAAA"}

package/dist/cjs/AvatarSkeleton/index.js

@@ -1,50 +1,33 @@
 "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 _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _Skeleton = _interopRequireDefault(require("../Skeleton"));
-
 var _excluded = ["size"];
-
 var _templateObject;
-
 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 }; }
-
 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); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 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"])('div', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n"])), _styles.sizeStyles);
+
 /**
  * Provides an avatar placeholder while a user waits for the content to load.
  */
-
 var AvatarSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? '2em' : _ref$size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    size = _ref$size === void 0 ? '2em' : _ref$size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
     size: size
   }, rest, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","AvatarSkeleton","forwardRef","ref","size","rest","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;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,SAAS,GAAG,IAAAC,kBAAA,EAAO,KAAP,EAAc,IAAAC,uBAAA,EAAiB,MAAjB,CAAd,CAAH,iFACXC,kBADW,CAAf;AAIA;AACA;AACA;;AACA,IAAMC,cAAc,gBAAG,IAAAC,iBAAA,EACrB,gBAA4BC,GAA5B;EAAA,qBAAGC,IAAH;EAAA,IAAGA,IAAH,0BAAU,KAAV;EAAA,IAAoBC,IAApB;;EAAA,oBACE,gCAAC,SAAD;IAAW,IAAI,EAAED;EAAjB,GAA2BC,IAA3B;IAAiC,GAAG,EAAEF;EAAtC,iBACE,gCAAC,oBAAD;IAAU,KAAK,EAAC;EAAhB,EADF,CADF;AAAA,CADqB,CAAvB;AAQAF,cAAc,CAACK,WAAf,GAA6B,gBAA7B;eAEeL,c"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","sizeStyles","AvatarSkeleton","forwardRef","ref","size","rest","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;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKnC,IAAMA,SAAS,GAAG,IAAAC,kBAAM,EAAC,KAAK,EAAE,IAAAC,uBAAgB,EAAC,MAAM,CAAC,CAAC,iFACrDC,kBAAU,CACb;;AAED;AACA;AACA;AACA,IAAMC,cAAc,gBAAG,IAAAC,iBAAU,EAC/B,gBAA4BC,GAAG;EAAA,qBAA5BC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IAAKC,IAAI;EAAA,oBACtB,gCAAC,SAAS;IAAC,IAAI,EAAED;EAAK,GAAKC,IAAI;IAAE,GAAG,EAAEF;EAAI,iBACxC,gCAAC,oBAAQ;IAAC,KAAK,EAAC;EAAK,EAAG,CACd;AAAA,CACb,CACF;AAEDF,cAAc,CAACK,WAAW,GAAG,gBAAgB;AAAC,eAE/BL,cAAc;AAAA"}

package/dist/cjs/Breadcrumb/index.js

@@ -1,69 +1,46 @@
 "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 = _interopRequireWildcard(require("react"));
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _theming = require("@os-design/theming");
-
 var _BreadcrumbItem = _interopRequireDefault(require("../BreadcrumbItem"));
-
 var _excluded = ["aria-label", "children"];
-
 var _templateObject;
-
 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 _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); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 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"])('ol', (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  color: ", ";\n\n  ", ";\n  ", ";\n"])), function (p) {
   return (0, _theming.clr)(p.theme.colorText);
 }, (0, _styles.enableScrollingStyles)('x', false), _styles.sizeStyles);
 var childIndex = 0;
+
 /**
  * Displays the current location within the hierarchical structure.
  * Implements the Schema.org markup for breadcrumbs.
  * See https://schema.org/BreadcrumbList
  */
-
 var Breadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _ref$ariaLabel = _ref['aria-label'],
-      ariaLabel = _ref$ariaLabel === void 0 ? 'Breadcrumb' : _ref$ariaLabel,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    ariaLabel = _ref$ariaLabel === void 0 ? 'Breadcrumb' : _ref$ariaLabel,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var breadcrumbItems = (0, _react.useMemo)(function () {
     var items = [];
-
     var childrenArray = _react["default"].Children.toArray(children);
-
     childrenArray.forEach(function (child, index) {
       if (! /*#__PURE__*/_react["default"].isValidElement(child)) return;
       var element;
@@ -72,17 +49,14 @@ var Breadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         position: index + 1,
         hasRightArrow: index < childrenArray.length - 1
       };
-
       if (child.type === _BreadcrumbItem["default"]) {
         element = /*#__PURE__*/_react["default"].cloneElement(child, breadcrumbItemProps);
       } else if ( /*#__PURE__*/_react["default"].isValidElement(child.props.children) && child.props.children.type === _BreadcrumbItem["default"]) {
         var breadcrumbItem = /*#__PURE__*/_react["default"].cloneElement(child.props.children, breadcrumbItemProps);
-
         element = /*#__PURE__*/_react["default"].cloneElement(child, _objectSpread(_objectSpread({}, child.props || {}), {}, {
           key: childIndex
         }), breadcrumbItem);
       }
-
       if (!element) return;
       items.push(element);
       childIndex += 1;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","clr","theme","colorText","enableScrollingStyles","sizeStyles","childIndex","Breadcrumb","forwardRef","ref","ariaLabel","children","rest","breadcrumbItems","useMemo","items","childrenArray","React","Children","toArray","forEach","child","index","isValidElement","element","breadcrumbItemProps","key","position","hasRightArrow","length","type","BreadcrumbItem","cloneElement","props","breadcrumbItem","push","displayName"],"sources":["../../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport BreadcrumbItem from '../BreadcrumbItem';\n\ntype JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;\nexport interface BreadcrumbProps extends JsxOlProps, WithSize {\n  'aria-label'?: string;\n}\n\nconst Container = styled('ol', omitEmotionProps('size'))<WithSize>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${enableScrollingStyles('x', false)};\n  ${sizeStyles};\n`;\n\nlet childIndex = 0;\n\n/**\n * Displays the current location within the hierarchical structure.\n * Implements the Schema.org markup for breadcrumbs.\n * See https://schema.org/BreadcrumbList\n */\nconst Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(\n  ({ 'aria-label': ariaLabel = 'Breadcrumb', children, ...rest }, ref) => {\n    const breadcrumbItems = useMemo(() => {\n      const items: ReactElement[] = [];\n      const childrenArray = React.Children.toArray(children);\n      childrenArray.forEach((child, index) => {\n        if (!React.isValidElement(child)) return;\n\n        let element;\n        const breadcrumbItemProps = {\n          key: childIndex,\n          position: index + 1,\n          hasRightArrow: index < childrenArray.length - 1,\n        };\n\n        if (child.type === BreadcrumbItem) {\n          element = React.cloneElement(child, breadcrumbItemProps);\n        } else if (\n          React.isValidElement(child.props.children) &&\n          child.props.children.type === BreadcrumbItem\n        ) {\n          const breadcrumbItem = React.cloneElement(\n            child.props.children,\n            breadcrumbItemProps\n          );\n          element = React.cloneElement(\n            child,\n            {\n              ...(child.props || {}),\n              key: childIndex,\n            },\n            breadcrumbItem\n          );\n        }\n        if (!element) return;\n\n        items.push(element);\n        childIndex += 1;\n      });\n      return items;\n    }, [children]);\n\n    if (breadcrumbItems.length === 0) return null;\n\n    return (\n      <nav aria-label={ariaLabel}>\n        <Container\n          itemScope\n          itemType='https://schema.org/BreadcrumbList'\n          {...rest}\n          ref={ref}\n        >\n          {breadcrumbItems}\n        </Container>\n      </nav>\n    );\n  }\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,IAAMA,SAAS,GAAG,IAAAC,kBAAA,EAAO,IAAP,EAAa,IAAAC,uBAAA,EAAiB,MAAjB,CAAb,CAAH,wMAMJ,UAACC,CAAD;EAAA,OAAO,IAAAC,YAAA,EAAID,CAAC,CAACE,KAAF,CAAQC,SAAZ,CAAP;AAAA,CANI,EAQX,IAAAC,6BAAA,EAAsB,GAAtB,EAA2B,KAA3B,CARW,EASXC,kBATW,CAAf;AAYA,IAAIC,UAAU,GAAG,CAAjB;AAEA;AACA;AACA;AACA;AACA;;AACA,IAAMC,UAAU,gBAAG,IAAAC,iBAAA,EACjB,gBAAgEC,GAAhE,EAAwE;EAAA,0BAArE,YAAqE;EAAA,IAAvDC,SAAuD,+BAA3C,YAA2C;EAAA,IAA7BC,QAA6B,QAA7BA,QAA6B;EAAA,IAAhBC,IAAgB;;EACtE,IAAMC,eAAe,GAAG,IAAAC,cAAA,EAAQ,YAAM;IACpC,IAAMC,KAAqB,GAAG,EAA9B;;IACA,IAAMC,aAAa,GAAGC,iBAAA,CAAMC,QAAN,CAAeC,OAAf,CAAuBR,QAAvB,CAAtB;;IACAK,aAAa,CAACI,OAAd,CAAsB,UAACC,KAAD,EAAQC,KAAR,EAAkB;MACtC,IAAI,eAACL,iBAAA,CAAMM,cAAN,CAAqBF,KAArB,CAAL,EAAkC;MAElC,IAAIG,OAAJ;MACA,IAAMC,mBAAmB,GAAG;QAC1BC,GAAG,EAAEpB,UADqB;QAE1BqB,QAAQ,EAAEL,KAAK,GAAG,CAFQ;QAG1BM,aAAa,EAAEN,KAAK,GAAGN,aAAa,CAACa,MAAd,GAAuB;MAHpB,CAA5B;;MAMA,IAAIR,KAAK,CAACS,IAAN,KAAeC,0BAAnB,EAAmC;QACjCP,OAAO,gBAAGP,iBAAA,CAAMe,YAAN,CAAmBX,KAAnB,EAA0BI,mBAA1B,CAAV;MACD,CAFD,MAEO,IACL,cAAAR,iBAAA,CAAMM,cAAN,CAAqBF,KAAK,CAACY,KAAN,CAAYtB,QAAjC,KACAU,KAAK,CAACY,KAAN,CAAYtB,QAAZ,CAAqBmB,IAArB,KAA8BC,0BAFzB,EAGL;QACA,IAAMG,cAAc,gBAAGjB,iBAAA,CAAMe,YAAN,CACrBX,KAAK,CAACY,KAAN,CAAYtB,QADS,EAErBc,mBAFqB,CAAvB;;QAIAD,OAAO,gBAAGP,iBAAA,CAAMe,YAAN,CACRX,KADQ,kCAGFA,KAAK,CAACY,KAAN,IAAe,EAHb;UAINP,GAAG,EAAEpB;QAJC,IAMR4B,cANQ,CAAV;MAQD;;MACD,IAAI,CAACV,OAAL,EAAc;MAEdT,KAAK,CAACoB,IAAN,CAAWX,OAAX;MACAlB,UAAU,IAAI,CAAd;IACD,CAjCD;IAkCA,OAAOS,KAAP;EACD,CAtCuB,EAsCrB,CAACJ,QAAD,CAtCqB,CAAxB;EAwCA,IAAIE,eAAe,CAACgB,MAAhB,KAA2B,CAA/B,EAAkC,OAAO,IAAP;EAElC,oBACE;IAAK,cAAYnB;EAAjB,gBACE,gCAAC,SAAD;IACE,SAAS,MADX;IAEE,QAAQ,EAAC;EAFX,GAGME,IAHN;IAIE,GAAG,EAAEH;EAJP,IAMGI,eANH,CADF,CADF;AAYD,CAxDgB,CAAnB;AA2DAN,UAAU,CAAC6B,WAAX,GAAyB,YAAzB;eAEe7B,U"}
+{"version":3,"file":"index.js","names":["Container","styled","omitEmotionProps","p","clr","theme","colorText","enableScrollingStyles","sizeStyles","childIndex","Breadcrumb","forwardRef","ref","ariaLabel","children","rest","breadcrumbItems","useMemo","items","childrenArray","React","Children","toArray","forEach","child","index","isValidElement","element","breadcrumbItemProps","key","position","hasRightArrow","length","type","BreadcrumbItem","cloneElement","props","breadcrumbItem","push","displayName"],"sources":["../../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { enableScrollingStyles, sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { clr } from '@os-design/theming';\nimport BreadcrumbItem from '../BreadcrumbItem';\n\ntype JsxOlProps = Omit<JSX.IntrinsicElements['ol'], 'ref'>;\nexport interface BreadcrumbProps extends JsxOlProps, WithSize {\n  'aria-label'?: string;\n}\n\nconst Container = styled('ol', omitEmotionProps('size'))<WithSize>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${enableScrollingStyles('x', false)};\n  ${sizeStyles};\n`;\n\nlet childIndex = 0;\n\n/**\n * Displays the current location within the hierarchical structure.\n * Implements the Schema.org markup for breadcrumbs.\n * See https://schema.org/BreadcrumbList\n */\nconst Breadcrumb = forwardRef<HTMLOListElement, BreadcrumbProps>(\n  ({ 'aria-label': ariaLabel = 'Breadcrumb', children, ...rest }, ref) => {\n    const breadcrumbItems = useMemo(() => {\n      const items: ReactElement[] = [];\n      const childrenArray = React.Children.toArray(children);\n      childrenArray.forEach((child, index) => {\n        if (!React.isValidElement(child)) return;\n\n        let element;\n        const breadcrumbItemProps = {\n          key: childIndex,\n          position: index + 1,\n          hasRightArrow: index < childrenArray.length - 1,\n        };\n\n        if (child.type === BreadcrumbItem) {\n          element = React.cloneElement(child, breadcrumbItemProps);\n        } else if (\n          React.isValidElement(child.props.children) &&\n          child.props.children.type === BreadcrumbItem\n        ) {\n          const breadcrumbItem = React.cloneElement(\n            child.props.children,\n            breadcrumbItemProps\n          );\n          element = React.cloneElement(\n            child,\n            {\n              ...(child.props || {}),\n              key: childIndex,\n            },\n            breadcrumbItem\n          );\n        }\n        if (!element) return;\n\n        items.push(element);\n        childIndex += 1;\n      });\n      return items;\n    }, [children]);\n\n    if (breadcrumbItems.length === 0) return null;\n\n    return (\n      <nav aria-label={ariaLabel}>\n        <Container\n          itemScope\n          itemType='https://schema.org/BreadcrumbList'\n          {...rest}\n          ref={ref}\n        >\n          {breadcrumbItems}\n        </Container>\n      </nav>\n    );\n  }\n);\n\nBreadcrumb.displayName = 'Breadcrumb';\n\nexport default Breadcrumb;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAA+C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO/C,IAAMA,SAAS,GAAG,IAAAC,kBAAM,EAAC,IAAI,EAAE,IAAAC,uBAAgB,EAAC,MAAM,CAAC,CAAC,wMAM7C,UAACC,CAAC;EAAA,OAAK,IAAAC,YAAG,EAACD,CAAC,CAACE,KAAK,CAACC,SAAS,CAAC;AAAA,GAEpC,IAAAC,6BAAqB,EAAC,GAAG,EAAE,KAAK,CAAC,EACjCC,kBAAU,CACb;AAED,IAAIC,UAAU,GAAG,CAAC;;AAElB;AACA;AACA;AACA;AACA;AACA,IAAMC,UAAU,gBAAG,IAAAC,iBAAU,EAC3B,gBAAgEC,GAAG,EAAK;EAAA,0BAArE,YAAY;IAAEC,SAAS,+BAAG,YAAY;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,IAAI;EAC1D,IAAMC,eAAe,GAAG,IAAAC,cAAO,EAAC,YAAM;IACpC,IAAMC,KAAqB,GAAG,EAAE;IAChC,IAAMC,aAAa,GAAGC,iBAAK,CAACC,QAAQ,CAACC,OAAO,CAACR,QAAQ,CAAC;IACtDK,aAAa,CAACI,OAAO,CAAC,UAACC,KAAK,EAAEC,KAAK,EAAK;MACtC,IAAI,eAACL,iBAAK,CAACM,cAAc,CAACF,KAAK,CAAC,EAAE;MAElC,IAAIG,OAAO;MACX,IAAMC,mBAAmB,GAAG;QAC1BC,GAAG,EAAEpB,UAAU;QACfqB,QAAQ,EAAEL,KAAK,GAAG,CAAC;QACnBM,aAAa,EAAEN,KAAK,GAAGN,aAAa,CAACa,MAAM,GAAG;MAChD,CAAC;MAED,IAAIR,KAAK,CAACS,IAAI,KAAKC,0BAAc,EAAE;QACjCP,OAAO,gBAAGP,iBAAK,CAACe,YAAY,CAACX,KAAK,EAAEI,mBAAmB,CAAC;MAC1D,CAAC,MAAM,IACL,cAAAR,iBAAK,CAACM,cAAc,CAACF,KAAK,CAACY,KAAK,CAACtB,QAAQ,CAAC,IAC1CU,KAAK,CAACY,KAAK,CAACtB,QAAQ,CAACmB,IAAI,KAAKC,0BAAc,EAC5C;QACA,IAAMG,cAAc,gBAAGjB,iBAAK,CAACe,YAAY,CACvCX,KAAK,CAACY,KAAK,CAACtB,QAAQ,EACpBc,mBAAmB,CACpB;QACDD,OAAO,gBAAGP,iBAAK,CAACe,YAAY,CAC1BX,KAAK,kCAECA,KAAK,CAACY,KAAK,IAAI,CAAC,CAAC;UACrBP,GAAG,EAAEpB;QAAU,IAEjB4B,cAAc,CACf;MACH;MACA,IAAI,CAACV,OAAO,EAAE;MAEdT,KAAK,CAACoB,IAAI,CAACX,OAAO,CAAC;MACnBlB,UAAU,IAAI,CAAC;IACjB,CAAC,CAAC;IACF,OAAOS,KAAK;EACd,CAAC,EAAE,CAACJ,QAAQ,CAAC,CAAC;EAEd,IAAIE,eAAe,CAACgB,MAAM,KAAK,CAAC,EAAE,OAAO,IAAI;EAE7C,oBACE;IAAK,cAAYnB;EAAU,gBACzB,gCAAC,SAAS;IACR,SAAS;IACT,QAAQ,EAAC;EAAmC,GACxCE,IAAI;IACR,GAAG,EAAEH;EAAI,IAERI,eAAe,CACN,CACR;AAEV,CAAC,CACF;AAEDN,UAAU,CAAC6B,WAAW,GAAG,YAAY;AAAC,eAEvB7B,UAAU;AAAA"}