@activecollab/components 1.0.415 → 2.0.1

package/dist/esm/components/MenuSelector/MenuSelector.js

@@ -1,33 +1,42 @@
-import React, { useCallback } from "react";
-import classNames from "classnames";
-import { Input } from "../Input";
-import { StyledMenuSelector, StyledMenuSelectorBack, StyledMenuSelectorDots, StyledMenuSelectorInner } from "./Styles";
-export var MenuSelector = function MenuSelector(_ref) {
-  var defaultValue = _ref.defaultValue,
-    children = _ref.children,
-    placeholder = _ref.placeholder,
-    onChange = _ref.onChange,
-    onBack = _ref.onBack,
-    onEdit = _ref.onEdit,
-    _ref$autoFocus = _ref.autoFocus,
-    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
-    className = _ref.className,
-    onFocus = _ref.onFocus,
-    onBlur = _ref.onBlur,
-    _ref$autoComplete = _ref.autoComplete,
-    autoComplete = _ref$autoComplete === void 0 ? false : _ref$autoComplete;
-  var handleChange = useCallback(function (e) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuSelector = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Input = require("../Input");
+var _Styles = require("./Styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const MenuSelector = _ref => {
+  let {
+    defaultValue,
+    children,
+    placeholder,
+    onChange,
+    onBack,
+    onEdit,
+    autoFocus = false,
+    className,
+    onFocus,
+    onBlur,
+    autoComplete = false
+  } = _ref;
+  const handleChange = (0, _react.useCallback)(e => {
     if (typeof onChange === "function") {
       onChange(e.target.value);
     }
   }, [onChange]);
-  return /*#__PURE__*/React.createElement(StyledMenuSelector, {
-    className: classNames("c-menu-selector", className)
-  }, /*#__PURE__*/React.createElement(StyledMenuSelectorInner, null, typeof onBack === "function" ? /*#__PURE__*/React.createElement(StyledMenuSelectorBack, {
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledMenuSelector, {
+    className: (0, _classnames.default)("c-menu-selector", className)
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledMenuSelectorInner, null, typeof onBack === "function" ? /*#__PURE__*/_react.default.createElement(_Styles.StyledMenuSelectorBack, {
     onClick: onBack,
     width: "16px",
     height: "16px"
-  }) : null, /*#__PURE__*/React.createElement(Input, {
+  }) : null, /*#__PURE__*/_react.default.createElement(_Input.Input, {
     onChange: handleChange,
     placeholder: placeholder,
     autoFocus: autoFocus,
@@ -35,9 +44,10 @@ export var MenuSelector = function MenuSelector(_ref) {
     onFocus: onFocus,
     onBlur: onBlur,
     autoComplete: autoComplete ? "on" : "off"
-  }), typeof onEdit === "function" ? /*#__PURE__*/React.createElement(StyledMenuSelectorDots, {
+  }), typeof onEdit === "function" ? /*#__PURE__*/_react.default.createElement(_Styles.StyledMenuSelectorDots, {
     onClick: onEdit
   }) : null), children);
 };
+exports.MenuSelector = MenuSelector;
 MenuSelector.displayName = "MenuSelector";
 //# sourceMappingURL=MenuSelector.js.map

package/dist/esm/components/MenuSelector/MenuSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSelector.js","names":["React","useCallback","classNames","Input","StyledMenuSelector","StyledMenuSelectorBack","StyledMenuSelectorDots","StyledMenuSelectorInner","MenuSelector","defaultValue","children","placeholder","onChange","onBack","onEdit","autoFocus","className","onFocus","onBlur","autoComplete","handleChange","e","target","value","displayName"],"sources":["../../../../src/components/MenuSelector/MenuSelector.tsx"],"sourcesContent":["import React, { FC, FocusEvent, useCallback, ChangeEvent } from \"react\";\nimport classNames from \"classnames\";\nimport { Input } from \"../Input\";\nimport {\n  StyledMenuSelector,\n  StyledMenuSelectorBack,\n  StyledMenuSelectorDots,\n  StyledMenuSelectorInner,\n} from \"./Styles\";\n\ninterface IMenuSelector {\n  /** Initial value on mount */\n  defaultValue?: string;\n  /** Input placeholder */\n  placeholder?: string;\n  /** Execute callback when input has been changed */\n  onChange?: (value: string) => void;\n  /** Execute callback when click on back button */\n  onBack?: () => void;\n  /** Execute callback when click on edit button */\n  onEdit?: () => void;\n  /** Auto focus on mount */\n  autoFocus?: boolean;\n  /** Applies passed classes */\n  className?: string;\n  /** Input focus event callback */\n  onFocus?: (e: FocusEvent<HTMLInputElement>) => void;\n  /** Input focus event callback */\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;\n  /** Set auto complete option on/off */\n  autoComplete?: boolean;\n}\n\nexport const MenuSelector: FC<IMenuSelector> = ({\n  defaultValue,\n  children,\n  placeholder,\n  onChange,\n  onBack,\n  onEdit,\n  autoFocus = false,\n  className,\n  onFocus,\n  onBlur,\n  autoComplete = false,\n}) => {\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (typeof onChange === \"function\") {\n        onChange(e.target.value);\n      }\n    },\n    [onChange]\n  );\n\n  return (\n    <StyledMenuSelector className={classNames(\"c-menu-selector\", className)}>\n      <StyledMenuSelectorInner>\n        {typeof onBack === \"function\" ? (\n          <StyledMenuSelectorBack onClick={onBack} width=\"16px\" height=\"16px\" />\n        ) : null}\n        <Input\n          onChange={handleChange}\n          placeholder={placeholder}\n          autoFocus={autoFocus}\n          defaultValue={defaultValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          autoComplete={autoComplete ? \"on\" : \"off\"}\n        />\n        {typeof onEdit === \"function\" ? (\n          <StyledMenuSelectorDots onClick={onEdit} />\n        ) : null}\n      </StyledMenuSelectorInner>\n      {children}\n    </StyledMenuSelector>\n  );\n};\n\nMenuSelector.displayName = \"MenuSelector\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAoBC,WAAW,QAAqB,OAAO;AACvE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,KAAK,QAAQ,UAAU;AAChC,SACEC,kBAAkB,EAClBC,sBAAsB,EACtBC,sBAAsB,EACtBC,uBAAuB,QAClB,UAAU;AAyBjB,OAAO,IAAMC,YAA+B,GAAG,SAAlCA,YAA+B,OAYtC;EAAA,IAXJC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IAAA,sBACNC,SAAS;IAATA,SAAS,+BAAG,KAAK;IACjBC,SAAS,QAATA,SAAS;IACTC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IAAA,yBACNC,YAAY;IAAZA,YAAY,kCAAG,KAAK;EAEpB,IAAMC,YAAY,GAAGnB,WAAW,CAC9B,UAACoB,CAAgC,EAAK;IACpC,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAClCA,QAAQ,CAACS,CAAC,CAACC,MAAM,CAACC,KAAK,CAAC;IAC1B;EACF,CAAC,EACD,CAACX,QAAQ,CAAC,CACX;EAED,oBACE,oBAAC,kBAAkB;IAAC,SAAS,EAAEV,UAAU,CAAC,iBAAiB,EAAEc,SAAS;EAAE,gBACtE,oBAAC,uBAAuB,QACrB,OAAOH,MAAM,KAAK,UAAU,gBAC3B,oBAAC,sBAAsB;IAAC,OAAO,EAAEA,MAAO;IAAC,KAAK,EAAC,MAAM;IAAC,MAAM,EAAC;EAAM,EAAG,GACpE,IAAI,eACR,oBAAC,KAAK;IACJ,QAAQ,EAAEO,YAAa;IACvB,WAAW,EAAET,WAAY;IACzB,SAAS,EAAEI,SAAU;IACrB,YAAY,EAAEN,YAAa;IAC3B,OAAO,EAAEQ,OAAQ;IACjB,MAAM,EAAEC,MAAO;IACf,YAAY,EAAEC,YAAY,GAAG,IAAI,GAAG;EAAM,EAC1C,EACD,OAAOL,MAAM,KAAK,UAAU,gBAC3B,oBAAC,sBAAsB;IAAC,OAAO,EAAEA;EAAO,EAAG,GACzC,IAAI,CACgB,EACzBJ,QAAQ,CACU;AAEzB,CAAC;AAEDF,YAAY,CAACgB,WAAW,GAAG,cAAc"}
+{"version":3,"file":"MenuSelector.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_Input","_Styles","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","MenuSelector","_ref","defaultValue","children","placeholder","onChange","onBack","onEdit","autoFocus","className","onFocus","onBlur","autoComplete","handleChange","useCallback","target","value","createElement","StyledMenuSelector","classNames","StyledMenuSelectorInner","StyledMenuSelectorBack","onClick","width","height","Input","StyledMenuSelectorDots","exports","displayName"],"sources":["../../../../src/components/MenuSelector/MenuSelector.tsx"],"sourcesContent":["import React, {\n  FC,\n  FocusEvent,\n  useCallback,\n  ChangeEvent,\n  PropsWithChildren,\n} from \"react\";\nimport classNames from \"classnames\";\nimport { Input } from \"../Input\";\nimport {\n  StyledMenuSelector,\n  StyledMenuSelectorBack,\n  StyledMenuSelectorDots,\n  StyledMenuSelectorInner,\n} from \"./Styles\";\n\ninterface IMenuSelector {\n  /** Initial value on mount */\n  defaultValue?: string;\n  /** Input placeholder */\n  placeholder?: string;\n  /** Execute callback when input has been changed */\n  onChange?: (value: string) => void;\n  /** Execute callback when click on back button */\n  onBack?: () => void;\n  /** Execute callback when click on edit button */\n  onEdit?: () => void;\n  /** Auto focus on mount */\n  autoFocus?: boolean;\n  /** Applies passed classes */\n  className?: string;\n  /** Input focus event callback */\n  onFocus?: (e: FocusEvent<HTMLInputElement>) => void;\n  /** Input focus event callback */\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void;\n  /** Set auto complete option on/off */\n  autoComplete?: boolean;\n}\n\nexport const MenuSelector: FC<PropsWithChildren<IMenuSelector>> = ({\n  defaultValue,\n  children,\n  placeholder,\n  onChange,\n  onBack,\n  onEdit,\n  autoFocus = false,\n  className,\n  onFocus,\n  onBlur,\n  autoComplete = false,\n}) => {\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (typeof onChange === \"function\") {\n        onChange(e.target.value);\n      }\n    },\n    [onChange]\n  );\n\n  return (\n    <StyledMenuSelector className={classNames(\"c-menu-selector\", className)}>\n      <StyledMenuSelectorInner>\n        {typeof onBack === \"function\" ? (\n          <StyledMenuSelectorBack onClick={onBack} width=\"16px\" height=\"16px\" />\n        ) : null}\n        <Input\n          onChange={handleChange}\n          placeholder={placeholder}\n          autoFocus={autoFocus}\n          defaultValue={defaultValue}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          autoComplete={autoComplete ? \"on\" : \"off\"}\n        />\n        {typeof onEdit === \"function\" ? (\n          <StyledMenuSelectorDots onClick={onEdit} />\n        ) : null}\n      </StyledMenuSelectorInner>\n      {children}\n    </StyledMenuSelector>\n  );\n};\n\nMenuSelector.displayName = \"MenuSelector\";\n"],"mappings":"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"}

package/dist/esm/components/MenuSelector/Styles.js

@@ -1,9 +1,16 @@
-import styled from "styled-components";
-import { FontStyle } from "../FontStyle";
-import { BoxSizingStyle } from "../BoxSizingStyle";
-import ArrowLeftIcon from "../Icons/collection/ArrowLeft";
-import TreeDotsIcon from "../Icons/collection/TreeDots";
-export var StyledMenuSelectorDots = styled(TreeDotsIcon).withConfig({
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMenuSelectorInner = exports.StyledMenuSelectorDots = exports.StyledMenuSelectorBack = exports.StyledMenuSelector = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _FontStyle = require("../FontStyle");
+var _BoxSizingStyle = require("../BoxSizingStyle");
+var _ArrowLeft = _interopRequireDefault(require("../Icons/collection/ArrowLeft"));
+var _TreeDots = _interopRequireDefault(require("../Icons/collection/TreeDots"));
+const StyledMenuSelectorDots = exports.StyledMenuSelectorDots = (0, _styledComponents.default)(_TreeDots.default).withConfig({
   displayName: "Styles__StyledMenuSelectorDots",
   componentId: "sc-1x7qbnu-0"
 })(["", ""], {
@@ -12,7 +19,7 @@ export var StyledMenuSelectorDots = styled(TreeDotsIcon).withConfig({
   "cursor": "pointer"
 });
 StyledMenuSelectorDots.displayName = "StyledMenuSelectorDots";
-export var StyledMenuSelectorBack = styled(ArrowLeftIcon).withConfig({
+const StyledMenuSelectorBack = exports.StyledMenuSelectorBack = (0, _styledComponents.default)(_ArrowLeft.default).withConfig({
   displayName: "Styles__StyledMenuSelectorBack",
   componentId: "sc-1x7qbnu-1"
 })(["", ""], {
@@ -22,12 +29,12 @@ export var StyledMenuSelectorBack = styled(ArrowLeftIcon).withConfig({
   "stroke": "currentColor"
 });
 StyledMenuSelectorBack.displayName = "StyledMenuSelectorBack";
-export var StyledMenuSelector = styled.div.withConfig({
+const StyledMenuSelector = exports.StyledMenuSelector = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledMenuSelector",
   componentId: "sc-1x7qbnu-2"
-})(["", " ", " color:var(--color-theme-700);"], BoxSizingStyle, FontStyle);
+})(["", " ", " color:var(--color-theme-700);"], _BoxSizingStyle.BoxSizingStyle, _FontStyle.FontStyle);
 StyledMenuSelector.displayName = "StyledMenuSelector";
-export var StyledMenuSelectorInner = styled.div.withConfig({
+const StyledMenuSelectorInner = exports.StyledMenuSelectorInner = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledMenuSelectorInner",
   componentId: "sc-1x7qbnu-3"
 })(["", ""], {

package/dist/esm/components/MenuSelector/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","FontStyle","BoxSizingStyle","ArrowLeftIcon","TreeDotsIcon","StyledMenuSelectorDots","displayName","StyledMenuSelectorBack","StyledMenuSelector","div","StyledMenuSelectorInner"],"sources":["../../../../src/components/MenuSelector/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport ArrowLeftIcon from \"../Icons/collection/ArrowLeft\";\nimport TreeDotsIcon from \"../Icons/collection/TreeDots\";\n\nexport const StyledMenuSelectorDots = styled(TreeDotsIcon)`\n  ${tw`tw-cursor-pointer tw-flex-shrink-0 tw-ml-2`}\n`;\n\nStyledMenuSelectorDots.displayName = \"StyledMenuSelectorDots\";\n\nexport const StyledMenuSelectorBack = styled(ArrowLeftIcon)`\n  ${tw`tw-cursor-pointer tw-stroke-current tw-flex-shrink-0 tw-mr-2`}\n`;\n\nStyledMenuSelectorBack.displayName = \"StyledMenuSelectorBack\";\n\nexport const StyledMenuSelector = styled.div`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  color: var(--color-theme-700);\n`;\n\nStyledMenuSelector.displayName = \"StyledMenuSelector\";\n\nexport const StyledMenuSelectorInner = styled.div`\n  ${tw`tw-flex tw-items-center tw-m-4`}\n`;\n\nStyledMenuSelectorInner.displayName = \"StyledMenuSelectorInner\";\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,OAAOC,aAAa,MAAM,+BAA+B;AACzD,OAAOC,YAAY,MAAM,8BAA8B;AAEvD,OAAO,IAAMC,sBAAsB,GAAGL,MAAM,CAACI,YAAY,CAAC;EAAA;EAAA;AAAA,aACpD;EAAA;EAAA;EAAA;AAA2C,CAAC,CACjD;AAEDC,sBAAsB,CAACC,WAAW,GAAG,wBAAwB;AAE7D,OAAO,IAAMC,sBAAsB,GAAGP,MAAM,CAACG,aAAa,CAAC;EAAA;EAAA;AAAA,aACrD;EAAA;EAAA;EAAA;EAAA;AAA6D,CAAC,CACnE;AAEDI,sBAAsB,CAACD,WAAW,GAAG,wBAAwB;AAE7D,OAAO,IAAME,kBAAkB,GAAGR,MAAM,CAACS,GAAG;EAAA;EAAA;AAAA,gDACxCP,cAAc,EACdD,SAAS,CAGZ;AAEDO,kBAAkB,CAACF,WAAW,GAAG,oBAAoB;AAErD,OAAO,IAAMI,uBAAuB,GAAGV,MAAM,CAACS,GAAG;EAAA;EAAA;AAAA,aAC3C;EAAA;EAAA;EAAA;AAA+B,CAAC,CACrC;AAEDC,uBAAuB,CAACJ,WAAW,GAAG,yBAAyB"}
+{"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireDefault","require","_FontStyle","_BoxSizingStyle","_ArrowLeft","_TreeDots","StyledMenuSelectorDots","exports","styled","TreeDotsIcon","withConfig","displayName","componentId","StyledMenuSelectorBack","ArrowLeftIcon","StyledMenuSelector","div","BoxSizingStyle","FontStyle","StyledMenuSelectorInner"],"sources":["../../../../src/components/MenuSelector/Styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport ArrowLeftIcon from \"../Icons/collection/ArrowLeft\";\nimport TreeDotsIcon from \"../Icons/collection/TreeDots\";\n\nexport const StyledMenuSelectorDots = styled(TreeDotsIcon)`\n  ${tw`tw-cursor-pointer tw-flex-shrink-0 tw-ml-2`}\n`;\n\nStyledMenuSelectorDots.displayName = \"StyledMenuSelectorDots\";\n\nexport const StyledMenuSelectorBack = styled(ArrowLeftIcon)`\n  ${tw`tw-cursor-pointer tw-stroke-current tw-flex-shrink-0 tw-mr-2`}\n`;\n\nStyledMenuSelectorBack.displayName = \"StyledMenuSelectorBack\";\n\nexport const StyledMenuSelector = styled.div`\n  ${BoxSizingStyle}\n  ${FontStyle}\n\n  color: var(--color-theme-700);\n`;\n\nStyledMenuSelector.displayName = \"StyledMenuSelector\";\n\nexport const StyledMenuSelectorInner = styled.div`\n  ${tw`tw-flex tw-items-center tw-m-4`}\n`;\n\nStyledMenuSelectorInner.displayName = \"StyledMenuSelectorInner\";\n"],"mappings":";;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,SAAA,GAAAL,sBAAA,CAAAC,OAAA;AAEO,MAAMK,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAG,IAAAE,yBAAM,EAACC,iBAAY,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACpD;EAAA;EAAA;EAAA;AAA2C,CAAC,CACjD;AAEDN,sBAAsB,CAACK,WAAW,GAAG,wBAAwB;AAEtD,MAAME,sBAAsB,GAAAN,OAAA,CAAAM,sBAAA,GAAG,IAAAL,yBAAM,EAACM,kBAAa,CAAC,CAAAJ,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACrD;EAAA;EAAA;EAAA;EAAA;AAA6D,CAAC,CACnE;AAEDC,sBAAsB,CAACF,WAAW,GAAG,wBAAwB;AAEtD,MAAMI,kBAAkB,GAAAR,OAAA,CAAAQ,kBAAA,GAAGP,yBAAM,CAACQ,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gDACxCK,8BAAc,EACdC,oBAAS,CAGZ;AAEDH,kBAAkB,CAACJ,WAAW,GAAG,oBAAoB;AAE9C,MAAMQ,uBAAuB,GAAAZ,OAAA,CAAAY,uBAAA,GAAGX,yBAAM,CAACQ,GAAG,CAAAN,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aAC3C;EAAA;EAAA;EAAA;AAA+B,CAAC,CACrC;AAEDO,uBAAuB,CAACR,WAAW,GAAG,yBAAyB"}

package/dist/esm/components/MenuSelector/index.js

@@ -1,2 +1,17 @@
-export * from "./MenuSelector";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _MenuSelector = require("./MenuSelector");
+Object.keys(_MenuSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MenuSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MenuSelector[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/dist/esm/components/MenuSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/MenuSelector/index.ts"],"sourcesContent":["export * from \"./MenuSelector\";\n"],"mappings":"AAAA,cAAc,gBAAgB"}
+{"version":3,"file":"index.js","names":["_MenuSelector","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/components/MenuSelector/index.ts"],"sourcesContent":["export * from \"./MenuSelector\";\n"],"mappings":";;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,aAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,aAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,aAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}

package/dist/esm/components/Modal/Modal.js

@@ -1,52 +1,51 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "disableFocusLock", "disableScrollLock", "disableBackgroundClick", "disableBackgroundColor", "disableCloseOnEsc", "open", "onClose", "onClickOutside"];
-import React, { forwardRef, useRef, cloneElement, useMemo, useCallback, useState, useEffect } from "react";
-import { Window } from "../Window";
-import useForkRef from "../../utils/useForkRef";
-import createChainedFunction from "../../utils/createChainedFunction";
-import { Overlay } from "../Overlay";
-var getHasTransition = function getHasTransition(children) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _Window = require("../Window");
+var _useForkRef = _interopRequireDefault(require("../../utils/useForkRef"));
+var _createChainedFunction = _interopRequireDefault(require("../../utils/createChainedFunction"));
+var _Overlay = require("../Overlay");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const getHasTransition = children => {
   return children.props ? Object.prototype.hasOwnProperty.call(children.props, "in") : false;
 };
-export var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    _ref$disableFocusLock = _ref.disableFocusLock,
-    disableFocusLock = _ref$disableFocusLock === void 0 ? false : _ref$disableFocusLock,
-    _ref$disableScrollLoc = _ref.disableScrollLock,
-    disableScrollLock = _ref$disableScrollLoc === void 0 ? false : _ref$disableScrollLoc,
-    _ref$disableBackgroun = _ref.disableBackgroundClick,
-    disableBackgroundClick = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
-    _ref$disableBackgroun2 = _ref.disableBackgroundColor,
-    disableBackgroundColor = _ref$disableBackgroun2 === void 0 ? false : _ref$disableBackgroun2,
-    _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
-    disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
-    _ref$open = _ref.open,
-    defaultOpen = _ref$open === void 0 ? false : _ref$open,
-    onClose = _ref.onClose,
-    onClickOutside = _ref.onClickOutside,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = useState(defaultOpen),
-    open = _useState[0],
-    setOpen = _useState[1];
-  var _useState2 = useState(true),
-    exited = _useState2[0],
-    setExited = _useState2[1];
-  var innerRef = useRef(null);
-  var handleRef = useForkRef(innerRef, ref);
-  var hasTransition = useMemo(function () {
+const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    disableFocusLock = false,
+    disableScrollLock = false,
+    disableBackgroundClick = false,
+    disableBackgroundColor = false,
+    disableCloseOnEsc = false,
+    open: defaultOpen = false,
+    onClose,
+    onClickOutside,
+    ...rest
+  } = _ref;
+  const [open, setOpen] = (0, _react.useState)(defaultOpen);
+  const [exited, setExited] = (0, _react.useState)(true);
+  const innerRef = (0, _react.useRef)(null);
+  const handleRef = (0, _useForkRef.default)(innerRef, ref);
+  const hasTransition = (0, _react.useMemo)(() => {
     return getHasTransition(children);
   }, [children]);
-  useEffect(function () {
+  (0, _react.useEffect)(() => {
     setOpen(defaultOpen);
   }, [defaultOpen]);
-  var handleClose = useCallback(function () {
+  const handleClose = (0, _react.useCallback)(() => {
     setOpen(false);
     if (!hasTransition) {
       typeof onClose === "function" && onClose();
     }
   }, [hasTransition, onClose]);
-  var handleBackgroundClick = useCallback(function (event) {
+  const handleBackgroundClick = (0, _react.useCallback)(event => {
     if (!disableBackgroundClick) {
       event.preventDefault();
       return handleClose();
@@ -55,21 +54,21 @@ export var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onClickOutside(event);
     }
   }, [disableBackgroundClick, onClickOutside, handleClose]);
-  var handleEnter = useCallback(function () {
+  const handleEnter = (0, _react.useCallback)(() => {
     setExited(false);
   }, []);
-  var handleExited = useCallback(function () {
+  const handleExited = (0, _react.useCallback)(() => {
     setExited(true);
     typeof onClose === "function" && onClose();
   }, [onClose]);
-  var childProps = useMemo(function () {
-    var props = {};
+  const childProps = (0, _react.useMemo)(() => {
+    let props = {};
 
     // It's a Transition like component
     if (hasTransition && children) {
       props = {
-        onEnter: createChainedFunction(handleEnter, children.props.onEnter),
-        onExited: createChainedFunction(handleExited, children.props.onExited),
+        onEnter: (0, _createChainedFunction.default)(handleEnter, children.props.onEnter),
+        onExited: (0, _createChainedFunction.default)(handleExited, children.props.onExited),
         in: open
       };
     }
@@ -78,16 +77,16 @@ export var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   if (!open && (!hasTransition || exited)) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Window, _extends({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_Window.Window, (0, _extends2.default)({}, rest, {
     ref: handleRef,
     onClose: handleClose,
     disableFocusLock: disableFocusLock,
     disableScrollLock: disableScrollLock,
     disableCloseOnEsc: disableCloseOnEsc
-  }), open ? /*#__PURE__*/React.createElement(Overlay, {
+  }), open ? /*#__PURE__*/_react.default.createElement(_Overlay.Overlay, {
     onClick: handleBackgroundClick,
     disableBackgroundColor: disableBackgroundColor
-  }) : null, /*#__PURE__*/cloneElement(children, childProps));
+  }) : null, /*#__PURE__*/(0, _react.cloneElement)(children, childProps));
 });
 Modal.displayName = "Modal";
 //# sourceMappingURL=Modal.js.map

package/dist/esm/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["React","forwardRef","useRef","cloneElement","useMemo","useCallback","useState","useEffect","Window","useForkRef","createChainedFunction","Overlay","getHasTransition","children","props","Object","prototype","hasOwnProperty","call","Modal","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","disableCloseOnEsc","open","defaultOpen","onClose","onClickOutside","rest","setOpen","exited","setExited","innerRef","handleRef","hasTransition","handleClose","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","onExited","in","displayName"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  useRef,\n  cloneElement,\n  useMemo,\n  useCallback,\n  ReactElement,\n  useState,\n  useEffect,\n  MouseEvent,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { Overlay } from \"../Overlay\";\n\nexport interface IModal {\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  open?: boolean;\n  disableBackgroundClick?: boolean;\n  disableCloseOnEsc?: boolean;\n  disableBackgroundColor?: boolean;\n  onClose?: () => void;\n  children: ReactElement;\n  onClickOutside?: (event) => void;\n}\n\nconst getHasTransition = (children): boolean => {\n  return children.props\n    ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n    : false;\n};\n\nexport const Modal = forwardRef<\n  HTMLDivElement,\n  IModal & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundClick = false,\n      disableBackgroundColor = false,\n      disableCloseOnEsc = false,\n      open: defaultOpen = false,\n      onClose,\n      onClickOutside,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n    const innerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(innerRef, ref);\n\n    const hasTransition = useMemo(() => {\n      return getHasTransition(children);\n    }, [children]);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n      if (!hasTransition) {\n        typeof onClose === \"function\" && onClose();\n      }\n    }, [hasTransition, onClose]);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          return handleClose();\n        }\n\n        if (onClickOutside) {\n          onClickOutside(event);\n        }\n      },\n      [disableBackgroundClick, onClickOutside, handleClose]\n    );\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      typeof onClose === \"function\" && onClose();\n    }, [onClose]);\n\n    const childProps = useMemo(() => {\n      let props = {};\n\n      // It's a Transition like component\n      if (hasTransition && children) {\n        props = {\n          onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n          onExited: createChainedFunction(\n            handleExited,\n            children.props.onExited\n          ),\n          in: open,\n        };\n      }\n\n      return props;\n    }, [children, handleEnter, handleExited, hasTransition, open]);\n\n    if (!open && (!hasTransition || exited)) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        ref={handleRef}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n        disableCloseOnEsc={disableCloseOnEsc}\n      >\n        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\n        {cloneElement(children, childProps)}\n      </Window>\n    );\n  }\n);\n\nModal.displayName = \"Modal\";\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["_react","_interopRequireWildcard","require","_Window","_useForkRef","_interopRequireDefault","_createChainedFunction","_Overlay","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","getHasTransition","children","props","Modal","exports","forwardRef","_ref","ref","disableFocusLock","disableScrollLock","disableBackgroundClick","disableBackgroundColor","disableCloseOnEsc","open","defaultOpen","onClose","onClickOutside","rest","setOpen","useState","exited","setExited","innerRef","useRef","handleRef","useForkRef","hasTransition","useMemo","useEffect","handleClose","useCallback","handleBackgroundClick","event","preventDefault","handleEnter","handleExited","childProps","onEnter","createChainedFunction","onExited","in","createElement","Window","_extends2","Overlay","onClick","cloneElement","displayName"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  useRef,\n  cloneElement,\n  useMemo,\n  useCallback,\n  ReactElement,\n  useState,\n  useEffect,\n  MouseEvent,\n} from \"react\";\nimport { Window } from \"../Window\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport createChainedFunction from \"../../utils/createChainedFunction\";\nimport { Overlay } from \"../Overlay\";\n\nexport interface IModal {\n  disableFocusLock?: boolean;\n  disableScrollLock?: boolean;\n  open?: boolean;\n  disableBackgroundClick?: boolean;\n  disableCloseOnEsc?: boolean;\n  disableBackgroundColor?: boolean;\n  onClose?: () => void;\n  children: ReactElement;\n  onClickOutside?: (event) => void;\n}\n\nconst getHasTransition = (children): boolean => {\n  return children.props\n    ? Object.prototype.hasOwnProperty.call(children.props, \"in\")\n    : false;\n};\n\nexport const Modal = forwardRef<\n  HTMLDivElement,\n  IModal & HTMLAttributes<HTMLDivElement>\n>(\n  (\n    {\n      children,\n      disableFocusLock = false,\n      disableScrollLock = false,\n      disableBackgroundClick = false,\n      disableBackgroundColor = false,\n      disableCloseOnEsc = false,\n      open: defaultOpen = false,\n      onClose,\n      onClickOutside,\n      ...rest\n    },\n    ref\n  ) => {\n    const [open, setOpen] = useState(defaultOpen);\n    const [exited, setExited] = useState(true);\n    const innerRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(innerRef, ref);\n\n    const hasTransition = useMemo(() => {\n      return getHasTransition(children);\n    }, [children]);\n\n    useEffect(() => {\n      setOpen(defaultOpen);\n    }, [defaultOpen]);\n\n    const handleClose = useCallback(() => {\n      setOpen(false);\n      if (!hasTransition) {\n        typeof onClose === \"function\" && onClose();\n      }\n    }, [hasTransition, onClose]);\n\n    const handleBackgroundClick = useCallback(\n      (event: MouseEvent<HTMLDivElement>) => {\n        if (!disableBackgroundClick) {\n          event.preventDefault();\n          return handleClose();\n        }\n\n        if (onClickOutside) {\n          onClickOutside(event);\n        }\n      },\n      [disableBackgroundClick, onClickOutside, handleClose]\n    );\n\n    const handleEnter = useCallback(() => {\n      setExited(false);\n    }, []);\n\n    const handleExited = useCallback(() => {\n      setExited(true);\n      typeof onClose === \"function\" && onClose();\n    }, [onClose]);\n\n    const childProps = useMemo(() => {\n      let props = {};\n\n      // It's a Transition like component\n      if (hasTransition && children) {\n        props = {\n          onEnter: createChainedFunction(handleEnter, children.props.onEnter),\n          onExited: createChainedFunction(\n            handleExited,\n            children.props.onExited\n          ),\n          in: open,\n        };\n      }\n\n      return props;\n    }, [children, handleEnter, handleExited, hasTransition, open]);\n\n    if (!open && (!hasTransition || exited)) {\n      return null;\n    }\n\n    return (\n      <Window\n        {...rest}\n        ref={handleRef}\n        onClose={handleClose}\n        disableFocusLock={disableFocusLock}\n        disableScrollLock={disableScrollLock}\n        disableCloseOnEsc={disableCloseOnEsc}\n      >\n        {open ? (\n          <Overlay\n            onClick={handleBackgroundClick}\n            disableBackgroundColor={disableBackgroundColor}\n          />\n        ) : null}\n        {cloneElement(children, childProps)}\n      </Window>\n    );\n  }\n);\n\nModal.displayName = \"Modal\";\n"],"mappings":"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"}

package/dist/esm/components/Modal/index.js

@@ -1,2 +1,17 @@
-export * from "./Modal";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Modal = require("./Modal");
+Object.keys(_Modal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Modal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Modal[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Modal/index.ts"],"sourcesContent":["export * from \"./Modal\";\n"],"mappings":"AAAA,cAAc,SAAS"}
+{"version":3,"file":"index.js","names":["_Modal","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["../../../../src/components/Modal/index.ts"],"sourcesContent":["export * from \"./Modal\";\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA"}

package/dist/esm/components/MultiAvatar/MultiAvatar.js

@@ -1,5 +1,13 @@
-import React, { useCallback, useMemo } from "react";
-import { StyledMultiAvatar, StyledMultiAvatarInner } from "./Styles";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiAvatar = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Styles = require("./Styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @component MultiAvatar
  * @description
@@ -27,71 +35,71 @@ import { StyledMultiAvatar, StyledMultiAvatarInner } from "./Styles";
  * @see
  * https://design.activecollab.com/docs/components/avatar
  */
-export var MultiAvatar = function MultiAvatar(_ref) {
-  var url = _ref.url,
-    alt = _ref.alt,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 24 : _ref$size,
-    className = _ref.className,
-    children = _ref.children;
-  var setSize = useCallback(function (i) {
+const MultiAvatar = _ref => {
+  let {
+    url,
+    alt,
+    size = 24,
+    className,
+    children
+  } = _ref;
+  const setSize = (0, _react.useCallback)(i => {
     switch (url.length) {
       case 1:
         return {
-          width: size + "px",
-          height: size + "px"
+          width: `${size}px`,
+          height: `${size}px`
         };
       case 2:
         return {
-          width: size / 2 + "px",
-          height: size + "px"
+          width: `${size / 2}px`,
+          height: `${size}px`
         };
       case 3:
         if (i === 0) {
           return {
-            width: size / 2 + "px",
-            height: size + "px"
+            width: `${size / 2}px`,
+            height: `${size}px`
           };
         } else {
           return {
-            width: size / 2 + "px",
-            height: size / 2 + "px"
+            width: `${size / 2}px`,
+            height: `${size / 2}px`
           };
         }
       default:
         return {
-          width: size / 2 + "px",
-          height: size / 2 + "px"
+          width: `${size / 2}px`,
+          height: `${size / 2}px`
         };
     }
   }, [size, url.length]);
-  var slicedUrl = useMemo(function () {
-    if ((url == null ? void 0 : url.length) > 4) {
+  const slicedUrl = (0, _react.useMemo)(() => {
+    if (url?.length > 4) {
       return url.slice(0, 4);
     }
     return url;
   }, [url]);
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement("span", {
     className: "tw-relative tw-inline-flex"
-  }, /*#__PURE__*/React.createElement(StyledMultiAvatar, {
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledMultiAvatar, {
     style: {
-      width: size + "px",
-      height: size + "px"
+      width: `${size}px`,
+      height: `${size}px`
     },
     className: className,
     $urlCount: url.length
-  }, slicedUrl.map(function (v, i) {
-    return /*#__PURE__*/React.createElement(StyledMultiAvatarInner, {
-      style: setSize(i),
-      className: "c-multi-avatar__wrapper",
-      key: "avatar_" + i
-    }, /*#__PURE__*/React.createElement("img", {
-      src: v,
-      alt: alt && alt[i] ? alt[i] : "avatar_" + i,
-      width: size,
-      height: size
-    }));
-  })), children);
+  }, slicedUrl.map((v, i) => /*#__PURE__*/_react.default.createElement(_Styles.StyledMultiAvatarInner, {
+    style: setSize(i),
+    className: "c-multi-avatar__wrapper",
+    key: `avatar_${i}`
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: v,
+    alt: alt && alt[i] ? alt[i] : `avatar_${i}`,
+    width: size,
+    height: size
+  })))), children);
 };
+exports.MultiAvatar = MultiAvatar;
 MultiAvatar.displayName = "MultiAvatar";
 //# sourceMappingURL=MultiAvatar.js.map

package/dist/esm/components/MultiAvatar/MultiAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiAvatar.js","names":["React","useCallback","useMemo","StyledMultiAvatar","StyledMultiAvatarInner","MultiAvatar","url","alt","size","className","children","setSize","i","length","width","height","slicedUrl","slice","map","v","displayName"],"sources":["../../../../src/components/MultiAvatar/MultiAvatar.tsx"],"sourcesContent":["import React, { PropsWithChildren, useCallback, useMemo } from \"react\";\nimport { StyledMultiAvatar, StyledMultiAvatarInner } from \"./Styles\";\n\nexport interface MultiAvatarProps {\n  /** Path url. */\n  url: string[];\n  /** Alt text. */\n  alt?: string[];\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n}\n\n/**\n * @component MultiAvatar\n * @description\n * The MultiAvatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image urls of the MultiAvatar.\n * @prop {size} - controls the size of an MultiAvatar (width and height) in pixels.\n * @prop {alt} - alt attributes of the imgs.\n *\n * @example\n * <MultiAvatar\n *  url={[\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\", \"https://faces-img.xcdn.link/image-lorem-face-953.jpg\"]}\n *  alt={[\"Profile picture of John\", \"Profile picture of Sarah\"]} />\n *\n * @example\n * <MultiAvatar\n *  url={[\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\", \"https://faces-img.xcdn.link/image-lorem-face-953.jpg\"]}\n *  alt={[\"Profile picture of John\", \"Profile picture of Sarah\"]}\n * >\n *  <Badge />\n * </MultiAvatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const MultiAvatar = ({\n  url,\n  alt,\n  size = 24,\n  className,\n  children,\n}: PropsWithChildren<MultiAvatarProps>) => {\n  const setSize = useCallback(\n    (i: number): object => {\n      switch (url.length) {\n        case 1:\n          return { width: `${size}px`, height: `${size}px` };\n        case 2:\n          return { width: `${size / 2}px`, height: `${size}px` };\n        case 3:\n          if (i === 0) {\n            return { width: `${size / 2}px`, height: `${size}px` };\n          } else {\n            return { width: `${size / 2}px`, height: `${size / 2}px` };\n          }\n        default:\n          return { width: `${size / 2}px`, height: `${size / 2}px` };\n      }\n    },\n    [size, url.length]\n  );\n\n  const slicedUrl = useMemo(() => {\n    if (url?.length > 4) {\n      return url.slice(0, 4);\n    }\n\n    return url;\n  }, [url]);\n\n  return (\n    <span className=\"tw-relative tw-inline-flex\">\n      <StyledMultiAvatar\n        style={{ width: `${size}px`, height: `${size}px` }}\n        className={className}\n        $urlCount={url.length}\n      >\n        {slicedUrl.map((v, i) => (\n          <StyledMultiAvatarInner\n            style={setSize(i)}\n            className=\"c-multi-avatar__wrapper\"\n            key={`avatar_${i}`}\n          >\n            <img\n              src={v}\n              alt={alt && alt[i] ? alt[i] : `avatar_${i}`}\n              width={size}\n              height={size}\n            />\n          </StyledMultiAvatarInner>\n        ))}\n      </StyledMultiAvatar>\n      {children}\n    </span>\n  );\n};\n\nMultiAvatar.displayName = \"MultiAvatar\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAuBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACtE,SAASC,iBAAiB,EAAEC,sBAAsB,QAAQ,UAAU;AAapE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW,OAMmB;EAAA,IALzCC,GAAG,QAAHA,GAAG;IACHC,GAAG,QAAHA,GAAG;IAAA,iBACHC,IAAI;IAAJA,IAAI,0BAAG,EAAE;IACTC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;EAER,IAAMC,OAAO,GAAGV,WAAW,CACzB,UAACW,CAAS,EAAa;IACrB,QAAQN,GAAG,CAACO,MAAM;MAChB,KAAK,CAAC;QACJ,OAAO;UAAEC,KAAK,EAAKN,IAAI,OAAI;UAAEO,MAAM,EAAKP,IAAI;QAAK,CAAC;MACpD,KAAK,CAAC;QACJ,OAAO;UAAEM,KAAK,EAAKN,IAAI,GAAG,CAAC,OAAI;UAAEO,MAAM,EAAKP,IAAI;QAAK,CAAC;MACxD,KAAK,CAAC;QACJ,IAAII,CAAC,KAAK,CAAC,EAAE;UACX,OAAO;YAAEE,KAAK,EAAKN,IAAI,GAAG,CAAC,OAAI;YAAEO,MAAM,EAAKP,IAAI;UAAK,CAAC;QACxD,CAAC,MAAM;UACL,OAAO;YAAEM,KAAK,EAAKN,IAAI,GAAG,CAAC,OAAI;YAAEO,MAAM,EAAKP,IAAI,GAAG,CAAC;UAAK,CAAC;QAC5D;MACF;QACE,OAAO;UAAEM,KAAK,EAAKN,IAAI,GAAG,CAAC,OAAI;UAAEO,MAAM,EAAKP,IAAI,GAAG,CAAC;QAAK,CAAC;IAAC;EAEjE,CAAC,EACD,CAACA,IAAI,EAAEF,GAAG,CAACO,MAAM,CAAC,CACnB;EAED,IAAMG,SAAS,GAAGd,OAAO,CAAC,YAAM;IAC9B,IAAI,CAAAI,GAAG,oBAAHA,GAAG,CAAEO,MAAM,IAAG,CAAC,EAAE;MACnB,OAAOP,GAAG,CAACW,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;IACxB;IAEA,OAAOX,GAAG;EACZ,CAAC,EAAE,CAACA,GAAG,CAAC,CAAC;EAET,oBACE;IAAM,SAAS,EAAC;EAA4B,gBAC1C,oBAAC,iBAAiB;IAChB,KAAK,EAAE;MAAEQ,KAAK,EAAKN,IAAI,OAAI;MAAEO,MAAM,EAAKP,IAAI;IAAK,CAAE;IACnD,SAAS,EAAEC,SAAU;IACrB,SAAS,EAAEH,GAAG,CAACO;EAAO,GAErBG,SAAS,CAACE,GAAG,CAAC,UAACC,CAAC,EAAEP,CAAC;IAAA,oBAClB,oBAAC,sBAAsB;MACrB,KAAK,EAAED,OAAO,CAACC,CAAC,CAAE;MAClB,SAAS,EAAC,yBAAyB;MACnC,GAAG,cAAYA;IAAI,gBAEnB;MACE,GAAG,EAAEO,CAAE;MACP,GAAG,EAAEZ,GAAG,IAAIA,GAAG,CAACK,CAAC,CAAC,GAAGL,GAAG,CAACK,CAAC,CAAC,eAAaA,CAAI;MAC5C,KAAK,EAAEJ,IAAK;MACZ,MAAM,EAAEA;IAAK,EACb,CACqB;EAAA,CAC1B,CAAC,CACgB,EACnBE,QAAQ,CACJ;AAEX,CAAC;AAEDL,WAAW,CAACe,WAAW,GAAG,aAAa"}
+{"version":3,"file":"MultiAvatar.js","names":["_react","_interopRequireWildcard","require","_Styles","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","MultiAvatar","_ref","url","alt","size","className","children","setSize","useCallback","length","width","height","slicedUrl","useMemo","slice","createElement","StyledMultiAvatar","style","$urlCount","map","v","StyledMultiAvatarInner","key","src","exports","displayName"],"sources":["../../../../src/components/MultiAvatar/MultiAvatar.tsx"],"sourcesContent":["import React, { PropsWithChildren, useCallback, useMemo } from \"react\";\nimport { StyledMultiAvatar, StyledMultiAvatarInner } from \"./Styles\";\n\nexport interface MultiAvatarProps {\n  /** Path url. */\n  url: string[];\n  /** Alt text. */\n  alt?: string[];\n  /** Image size. */\n  size?: number;\n  /** Custom class. */\n  className?: string;\n}\n\n/**\n * @component MultiAvatar\n * @description\n * The MultiAvatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @prop {url} - The image urls of the MultiAvatar.\n * @prop {size} - controls the size of an MultiAvatar (width and height) in pixels.\n * @prop {alt} - alt attributes of the imgs.\n *\n * @example\n * <MultiAvatar\n *  url={[\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\", \"https://faces-img.xcdn.link/image-lorem-face-953.jpg\"]}\n *  alt={[\"Profile picture of John\", \"Profile picture of Sarah\"]} />\n *\n * @example\n * <MultiAvatar\n *  url={[\"https://faces-img.xcdn.link/image-lorem-face-954.jpg\", \"https://faces-img.xcdn.link/image-lorem-face-953.jpg\"]}\n *  alt={[\"Profile picture of John\", \"Profile picture of Sarah\"]}\n * >\n *  <Badge />\n * </MultiAvatar>\n *\n * @see\n * https://system.activecollab.com/?path=/story/components-button-indicators-avatar--avatar\n * @see\n * https://design.activecollab.com/docs/components/avatar\n */\nexport const MultiAvatar = ({\n  url,\n  alt,\n  size = 24,\n  className,\n  children,\n}: PropsWithChildren<MultiAvatarProps>) => {\n  const setSize = useCallback(\n    (i: number): object => {\n      switch (url.length) {\n        case 1:\n          return { width: `${size}px`, height: `${size}px` };\n        case 2:\n          return { width: `${size / 2}px`, height: `${size}px` };\n        case 3:\n          if (i === 0) {\n            return { width: `${size / 2}px`, height: `${size}px` };\n          } else {\n            return { width: `${size / 2}px`, height: `${size / 2}px` };\n          }\n        default:\n          return { width: `${size / 2}px`, height: `${size / 2}px` };\n      }\n    },\n    [size, url.length]\n  );\n\n  const slicedUrl = useMemo(() => {\n    if (url?.length > 4) {\n      return url.slice(0, 4);\n    }\n\n    return url;\n  }, [url]);\n\n  return (\n    <span className=\"tw-relative tw-inline-flex\">\n      <StyledMultiAvatar\n        style={{ width: `${size}px`, height: `${size}px` }}\n        className={className}\n        $urlCount={url.length}\n      >\n        {slicedUrl.map((v, i) => (\n          <StyledMultiAvatarInner\n            style={setSize(i)}\n            className=\"c-multi-avatar__wrapper\"\n            key={`avatar_${i}`}\n          >\n            <img\n              src={v}\n              alt={alt && alt[i] ? alt[i] : `avatar_${i}`}\n              width={size}\n              height={size}\n            />\n          </StyledMultiAvatarInner>\n        ))}\n      </StyledMultiAvatar>\n      {children}\n    </span>\n  );\n};\n\nMultiAvatar.displayName = \"MultiAvatar\";\n"],"mappings":"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"}