@activecollab/components 1.0.6 → 1.0.10

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/MultiAvatar/Styles.ts"],"names":["styled","css","BoxSizingStyle","StyledMultiAvatarImg","StyledMultiAvatarInner","div","StyledMultiAvatar","props","$urlCount","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,cAAT,QAA+B,mBAA/B;AAEA,IAAMC,oBAAoB,GAAGF,GAAH,mCAA1B;AAKA,OAAO,IAAMG,sBAAsB,GAAGJ,MAAM,CAACK,GAAV;AAAA;AAAA;AAAA,0CAA5B;AAKP,OAAO,IAAMC,iBAAiB,GAAGN,MAAM,CAACK,GAAV;AAAA;AAAA;AAAA,iFAC1BH,cAD0B,EAO1B,UAACK,KAAD;AAAA,SACAA,KAAK,CAACC,SAAN,KAAoB,CAApB,IACAP,GADA,yHAEIG,sBAFJ,EAQIA,sBARJ,CADA;AAAA,CAP0B,EAwB1B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,SAAN,KAAoB,CAApB,IACAP,GADA,wJAEIG,sBAFJ,EAQIA,sBARJ,EAaQD,oBAbR,EAgBIC,sBAhBJ,EAqBQD,oBArBR,CADA;AAAA,CAxB0B,EAmD1B,UAACI,KAAD;AAAA,SACAA,KAAK,CAACC,SAAN,GAAkB,CAAlB,IACAP,GADA,kJAGME,oBAHN,EAKIC,sBALJ,EAQIA,sBARJ,EAYIA,sBAZJ,EAgBIA,sBAhBJ,CADA;AAAA,CAnD0B,CAAvB;AA2EPE,iBAAiB,CAACG,WAAlB,GAAgC,mBAAhC;AACAL,sBAAsB,CAACK,WAAvB,GAAqC,wBAArC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\nconst StyledMultiAvatarImg = css`\n  width: inherit;\n  height: inherit;\n`;\n\nexport const StyledMultiAvatarInner = styled.div`\n  overflow: hidden;\n  position: absolute;\n`;\n\nexport const StyledMultiAvatar = styled.div<{ $urlCount: number }>`\n  ${BoxSizingStyle}\n\n  border-radius: 100%;\n  position: relative;\n  overflow: hidden;\n\n  ${(props) =>\n    props.$urlCount === 2 &&\n    css`\n      ${StyledMultiAvatarInner}:first-child {\n        left: 0;\n        img {\n          transform: translateX(-20%);\n        }\n      }\n      ${StyledMultiAvatarInner}:last-child {\n        right: 0;\n        img {\n          transform: translateX(-20%);\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$urlCount === 3 &&\n    css`\n      ${StyledMultiAvatarInner}:nth-child(1) {\n        left: 0;\n        img {\n          transform: translateX(-20%);\n        }\n      }\n      ${StyledMultiAvatarInner}:nth-child(2) {\n        right: 0;\n        top: 0;\n\n        img {\n          ${StyledMultiAvatarImg}\n        }\n      }\n      ${StyledMultiAvatarInner}:nth-child(3) {\n        right: 0;\n        bottom: 0;\n\n        img {\n          ${StyledMultiAvatarImg}\n        }\n      }\n    `}\n\n  ${(props) =>\n    props.$urlCount > 3 &&\n    css`\n      img {\n        ${StyledMultiAvatarImg}\n      }\n      ${StyledMultiAvatarInner}:nth-child(1) {\n        left: 0;\n      }\n      ${StyledMultiAvatarInner}:nth-child(2) {\n        left: 0;\n        bottom: 0;\n      }\n      ${StyledMultiAvatarInner}:nth-child(3) {\n        right: 0;\n        top: 0;\n      }\n      ${StyledMultiAvatarInner}:nth-child(4) {\n        right: 0;\n        bottom: 0;\n      }\n    `}\n`;\n\nStyledMultiAvatar.displayName = \"StyledMultiAvatar\";\nStyledMultiAvatarInner.displayName = \"StyledMultiAvatarInner\";\n"],"file":"Styles.js"}

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

@@ -0,0 +1,2 @@
+export * from "./MultiAvatar";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/MultiAvatar/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd","sourcesContent":["export * from \"./MultiAvatar\";\n"],"file":"index.js"}

package/dist/esm/components/Nav/Item/Item.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "active", "disabled", "className", "role"];
+import classNames from "classnames";
+import React from "react";
+import { StyledNavListItem } from "../Styles";
+export var Item = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      _ref$active = _ref.active,
+      active = _ref$active === void 0 ? false : _ref$active,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      className = _ref.className,
+      role = _ref.role,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(StyledNavListItem, _extends({
+    className: classNames("c-nav__item", {
+      "c-nav__item--active": active
+    }, className),
+    ref: ref
+  }, rest, {
+    $active: active,
+    $disabled: disabled,
+    $role: role
+  }), children);
+});
+Item.displayName = "Item";
+//# sourceMappingURL=Item.js.map

package/dist/esm/components/Nav/Item/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Nav/Item/Item.tsx"],"names":["classNames","React","StyledNavListItem","Item","forwardRef","ref","children","active","disabled","className","role","rest","displayName"],"mappings":";;;AAAA,OAAOA,UAAP,MAAuB,YAAvB;AACA,OAAOC,KAAP,MAAkC,OAAlC;AAEA,SAASC,iBAAT,QAAkC,WAAlC;AAcA,OAAO,IAAMC,IAAI,gBAAGF,KAAK,CAACG,UAAN,CAIlB,gBAEEC,GAFF,EAGK;AAAA,MAFDC,QAEC,QAFDA,QAEC;AAAA,yBAFSC,MAET;AAAA,MAFSA,MAET,4BAFkB,KAElB;AAAA,2BAFyBC,QAEzB;AAAA,MAFyBA,QAEzB,8BAFoC,KAEpC;AAAA,MAF2CC,SAE3C,QAF2CA,SAE3C;AAAA,MAFsDC,IAEtD,QAFsDA,IAEtD;AAAA,MAF+DC,IAE/D;;AACH,sBACE,oBAAC,iBAAD;AACE,IAAA,SAAS,EAAEX,UAAU,gBAEnB;AACE,6BAAuBO;AADzB,KAFmB,EAKnBE,SALmB,CADvB;AAQE,IAAA,GAAG,EAAEJ;AARP,KASMM,IATN;AAUE,IAAA,OAAO,EAAEJ,MAVX;AAWE,IAAA,SAAS,EAAEC,QAXb;AAYE,IAAA,KAAK,EAAEE;AAZT,MAcGJ,QAdH,CADF;AAkBD,CA1BiB,CAAb;AA6BPH,IAAI,CAACS,WAAL,GAAmB,MAAnB","sourcesContent":["import classNames from \"classnames\";\nimport React, { ReactChild } from \"react\";\nimport { NavRoleType } from \"../Nav\";\nimport { StyledNavListItem } from \"../Styles\";\n\nexport interface ItemProps {\n  /** Classname prop for custom styling. */\n  children: ReactChild | string;\n  /** Active state(underline). */\n  active?: boolean;\n  /** Disabled state. */\n  disabled?: boolean;\n  className?: string;\n  name: string;\n  role?: NavRoleType;\n}\n\nexport const Item = React.forwardRef<\n  HTMLLIElement,\n  ItemProps & React.ComponentPropsWithoutRef<\"li\">\n>(\n  (\n    { children, active = false, disabled = false, className, role, ...rest },\n    ref\n  ) => {\n    return (\n      <StyledNavListItem\n        className={classNames(\n          `c-nav__item`,\n          {\n            \"c-nav__item--active\": active,\n          },\n          className\n        )}\n        ref={ref}\n        {...rest}\n        $active={active}\n        $disabled={disabled}\n        $role={role}\n      >\n        {children}\n      </StyledNavListItem>\n    );\n  }\n);\n\nItem.displayName = \"Item\";\n"],"file":"Item.js"}

package/dist/esm/components/Nav/Item/Styles.js

@@ -0,0 +1,12 @@
+import styled, { css } from "styled-components";
+import { Item } from "./Item";
+export var StyledNavListItemMore = styled(Item).withConfig({
+  displayName: "Styles__StyledNavListItemMore",
+  componentId: "sc-m6npdq-0"
+})(["", " cursor:pointer;", ""], function (props) {
+  return props.role !== "light" && css(["padding:0;"]);
+}, {
+  "pointerEvents": "auto"
+});
+StyledNavListItemMore.displayName = "StyledNavListItemMore";
+//# sourceMappingURL=Styles.js.map

package/dist/esm/components/Nav/Item/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Nav/Item/Styles.ts"],"names":["styled","css","Item","StyledNavListItemMore","props","role","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,IAAT,QAAqB,QAArB;AAEA,OAAO,IAAMC,qBAAqB,GAAGH,MAAM,CAACE,IAAD,CAAT;AAAA;AAAA;AAAA,iCAC9B,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAe,OAAf,IACAJ,GADA,gBADA;AAAA,CAD8B,EAO5B;AAAA;AAAA,CAP4B,CAA3B;AAUPE,qBAAqB,CAACG,WAAtB,GAAoC,uBAApC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Item } from \"./Item\";\n\nexport const StyledNavListItemMore = styled(Item)`\n  ${(props) =>\n    props.role !== \"light\" &&\n    css`\n      padding: 0;\n    `}\n  cursor: pointer;\n  ${tw`tw-pointer-events-auto`}\n`;\n\nStyledNavListItemMore.displayName = \"StyledNavListItemMore\";\n"],"file":"Styles.js"}

package/dist/esm/components/Nav/Item/index.js

@@ -0,0 +1,2 @@
+export * from "./Item";
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Nav/Item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/Nav/Item/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAd","sourcesContent":["export * from \"./Item\";\n"],"file":"index.js"}

package/dist/esm/components/Nav/Nav.js

@@ -0,0 +1,297 @@
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+import React, { useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo, Children, cloneElement } from "react";
+import classNames from "classnames";
+import ResizeObserver from "resize-observer-polyfill";
+import debounce from "lodash.debounce";
+import { Select } from "../Select/Select";
+import { StyledNav, StyledNavAsMoreTarget, StyledNavAsSelect, StyledNavList } from "./Styles";
+import { StyledNavListItemMore } from "./Item/Styles";
+import { ExpandSingle } from "../Expanders/ExpandSingle";
+export var Nav = function Nav(_ref) {
+  var children = _ref.children,
+      _ref$alignment = _ref.alignment,
+      alignment = _ref$alignment === void 0 ? "left" : _ref$alignment,
+      onSelect = _ref.onSelect,
+      onMoreOptionSelect = _ref.onMoreOptionSelect,
+      className = _ref.className,
+      _ref$role = _ref.role,
+      role = _ref$role === void 0 ? "bold" : _ref$role,
+      moreLabel = _ref.moreLabel,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? "inline" : _ref$type;
+
+  var _useState = useState(0),
+      active = _useState[0],
+      setActive = _useState[1];
+
+  var _useState2 = useState([]),
+      visibleTabIndexes = _useState2[0],
+      setVisibleTabIndexes = _useState2[1];
+
+  var _useState3 = useState(false),
+      measuringRender = _useState3[0],
+      setMeasuringRender = _useState3[1];
+
+  var _useState4 = useState(false),
+      moreVisible = _useState4[0],
+      setMoreVisible = _useState4[1];
+
+  var _useState5 = useState(false),
+      renderNavAsSelect = _useState5[0],
+      setRenderNavAsSelect = _useState5[1];
+
+  var _useState6 = useState([]),
+      options = _useState6[0],
+      setOptions = _useState6[1];
+
+  var _useState7 = useState(false),
+      moreOpened = _useState7[0],
+      setMoreOpened = _useState7[1];
+
+  var _useState8 = useState(false),
+      isMounted = _useState8[0],
+      setIsMounted = _useState8[1];
+
+  var navItemNames = useMemo(function () {
+    return children.map(function (item) {
+      return item.props.name;
+    });
+  }, [children]);
+  var allOptions = useMemo(function () {
+    return navItemNames.map(function (name, index) {
+      return {
+        id: index,
+        name: name
+      };
+    });
+  }, [navItemNames]); // REFS
+
+  var navRef = useRef(null);
+  var navItemsRefs = useRef({});
+  var moreItemRef = useRef(null);
+  var onClick = useCallback(function (e) {
+    if (e.target && e.currentTarget.dataset.index && !e.currentTarget.dataset.disabled) {
+      var _index = Number(e.currentTarget.dataset.index);
+
+      setActive(_index);
+
+      if (onSelect) {
+        onSelect(_index);
+      }
+
+      setMeasuringRender(true);
+    }
+  }, [onSelect]);
+  useMemo(function () {
+    Children.forEach(children, function (child, index) {
+      if (child && child.props.active) {
+        setActive(index);
+      }
+    });
+  }, [children]);
+  useLayoutEffect(function () {
+    if (type === "inline" && measuringRender && isMounted) {
+      var _navRef$current;
+
+      var containerWidth = ((_navRef$current = navRef.current) == null ? void 0 : _navRef$current.offsetWidth) || 0;
+      var itemsWidth = Object.values(navItemsRefs.current).reduce(function (acc, item) {
+        var itemEl = item;
+        return acc + (itemEl ? itemEl.offsetWidth : 0);
+      }, 0); // all tabs are visible
+
+      if (containerWidth >= itemsWidth) {
+        setVisibleTabIndexes(Array.from(navItemNames.keys()));
+        setMoreVisible(false);
+        setRenderNavAsSelect(false);
+        return setMeasuringRender(false);
+      }
+
+      setMoreVisible(true);
+
+      if (moreVisible) {
+        var _moreItemRef$current;
+
+        var moreItemWidth = ((_moreItemRef$current = moreItemRef.current) == null ? void 0 : _moreItemRef$current.offsetWidth) || 0;
+        var firstItemWidth = navItemsRefs.current[0].offsetWidth; // collapse Nav to Select, there is no enough room
+
+        if (containerWidth < moreItemWidth + firstItemWidth) {
+          setVisibleTabIndexes([]);
+
+          var _options2 = navItemNames.map(function (name, index) {
+            return {
+              id: index,
+              name: name
+            };
+          });
+
+          setOptions(_options2);
+          setRenderNavAsSelect(true);
+          setMoreVisible(false);
+          return setMeasuringRender(false);
+        } // item(s) + More...
+
+
+        var visible = [];
+        var allWidth = 0;
+        Object.values(navItemsRefs.current).forEach(function (item, index) {
+          var liItem = item;
+          allWidth += liItem.offsetWidth;
+
+          if (moreItemWidth + allWidth <= containerWidth) {
+            visible.push(index);
+          }
+        });
+        setVisibleTabIndexes(visible);
+
+        var _options = navItemNames.map(function (name, index) {
+          return {
+            id: index,
+            name: name
+          };
+        }).filter(function (item) {
+          return !visible.includes(item.id);
+        });
+
+        setOptions(_options);
+        setRenderNavAsSelect(false);
+        setMeasuringRender(false);
+      }
+    }
+  }, [children, isMounted, measuringRender, moreVisible, navItemNames, type, visibleTabIndexes]);
+  useEffect(function () {
+    if (type === "inline") {
+      var handleResize = debounce(function () {
+        setMeasuringRender(true);
+      }, 300);
+      window.addEventListener("resize", handleResize);
+      return function () {
+        window.removeEventListener("resize", handleResize);
+      };
+    }
+  }, [type]); // we are using observer to solve the problem of the initial rendering
+
+  useEffect(function () {
+    if (type === "inline" && navRef.current) {
+      var resizeObserver = new ResizeObserver(function (entries) {
+        for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
+          var entry = _step.value;
+          var contentRect = entry.contentRect;
+          var _contentRect$width = contentRect.width,
+              width = _contentRect$width === void 0 ? 0 : _contentRect$width;
+
+          if (width > 0) {
+            setMeasuringRender(true);
+          }
+        }
+      });
+      resizeObserver.observe(navRef.current);
+      setTimeout(function () {
+        if (navRef.current) {
+          resizeObserver.unobserve(navRef.current);
+        }
+      }, 2000);
+      return function () {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [type]);
+  useEffect(function () {
+    setMeasuringRender(true);
+    setIsMounted(true);
+  }, []);
+  var visibleTabs = useMemo(function () {
+    var tabs = Children.toArray(children);
+
+    if (measuringRender || !isMounted) {
+      return tabs;
+    } else {
+      return tabs.filter(function (child, index) {
+        return visibleTabIndexes.includes(index);
+      });
+    }
+  }, [children, isMounted, measuringRender, visibleTabIndexes]);
+  var onMoreOptionClick = useCallback(function (id) {
+    setActive(id);
+
+    if (onMoreOptionSelect) {
+      onMoreOptionSelect(id);
+    }
+
+    setMeasuringRender(true);
+  }, [onMoreOptionSelect]);
+  var navAsSelect = useMemo(function () {
+    return /*#__PURE__*/React.createElement(StyledNavAsSelect, null, /*#__PURE__*/React.createElement("span", null, navItemNames[active]), /*#__PURE__*/React.createElement(ExpandSingle, {
+      expanded: moreOpened,
+      fill: "currentColor"
+    }));
+  }, [active, moreOpened, navItemNames]);
+  var setMoreOpen = useCallback(function () {
+    return setMoreOpened(true);
+  }, []);
+  var setMoreClose = useCallback(function () {
+    return setMoreOpened(false);
+  }, []);
+  return /*#__PURE__*/React.createElement(StyledNav, {
+    className: classNames("c-nav", className),
+    $align: alignment,
+    $role: role
+  }, /*#__PURE__*/React.createElement(StyledNavList, {
+    ref: navRef
+  }, type === "inline" && visibleTabs.map(function (child, index) {
+    var element = child;
+    return /*#__PURE__*/cloneElement(element, {
+      active: index === active,
+      role: role,
+      ref: function ref(el) {
+        navItemsRefs.current[index] = el;
+      },
+      onClick: onClick,
+      "data-index": index,
+      "data-disabled": element.props.disabled
+    });
+  }), type === "inline" && moreVisible ? /*#__PURE__*/React.createElement(StyledNavListItemMore, {
+    ref: moreItemRef,
+    name: "More",
+    active: visibleTabIndexes.indexOf(active) === -1,
+    role: role
+  }, /*#__PURE__*/React.createElement(Select, {
+    selected: active,
+    target: /*#__PURE__*/React.createElement(StyledNavAsMoreTarget, {
+      $role: role
+    }, moreLabel),
+    disabledInternalSort: true,
+    onChange: onMoreOptionClick,
+    options: options,
+    type: "single",
+    mode: "normal",
+    forceCloseMenu: true,
+    disableSearch: true,
+    keepSameOptionsOrder: true,
+    onSelectOpen: setMoreOpen,
+    onSelectClose: setMoreClose
+  })) : null, type === "dropdown" || renderNavAsSelect ? /*#__PURE__*/React.createElement(StyledNavListItemMore, {
+    name: "More",
+    active: visibleTabIndexes.indexOf(active) === -1,
+    role: role
+  }, /*#__PURE__*/React.createElement(Select, {
+    selected: active,
+    target: navAsSelect,
+    disabledInternalSort: true,
+    onChange: onMoreOptionClick,
+    options: allOptions,
+    type: "single",
+    mode: "normal",
+    forceCloseMenu: true,
+    disableSearch: true,
+    keepSameOptionsOrder: true,
+    onSelectOpen: setMoreOpen,
+    onSelectClose: setMoreClose
+  })) : null));
+};
+Nav.displayName = "Nav";
+//# sourceMappingURL=Nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Nav/Nav.tsx"],"names":["React","useState","useRef","useCallback","useEffect","useLayoutEffect","useMemo","Children","cloneElement","classNames","ResizeObserver","debounce","Select","StyledNav","StyledNavAsMoreTarget","StyledNavAsSelect","StyledNavList","StyledNavListItemMore","ExpandSingle","Nav","children","alignment","onSelect","onMoreOptionSelect","className","role","moreLabel","type","active","setActive","visibleTabIndexes","setVisibleTabIndexes","measuringRender","setMeasuringRender","moreVisible","setMoreVisible","renderNavAsSelect","setRenderNavAsSelect","options","setOptions","moreOpened","setMoreOpened","isMounted","setIsMounted","navItemNames","map","item","props","name","allOptions","index","id","navRef","navItemsRefs","moreItemRef","onClick","e","target","currentTarget","dataset","disabled","Number","forEach","child","containerWidth","current","offsetWidth","itemsWidth","Object","values","reduce","acc","itemEl","Array","from","keys","moreItemWidth","firstItemWidth","visible","allWidth","liItem","push","filter","includes","handleResize","window","addEventListener","removeEventListener","resizeObserver","entries","entry","contentRect","width","observe","setTimeout","unobserve","disconnect","visibleTabs","tabs","toArray","onMoreOptionClick","navAsSelect","setMoreOpen","setMoreClose","element","ref","el","indexOf","displayName"],"mappings":";;;;;;AAAA,OAAOA,KAAP,IAIEC,QAJF,EAKEC,MALF,EAMEC,WANF,EAOEC,SAPF,EAQEC,eARF,EASEC,OATF,EAUEC,QAVF,EAWEC,YAXF,QAYO,OAZP;AAaA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAOC,cAAP,MAA2B,0BAA3B;AACA,OAAOC,QAAP,MAAqB,iBAArB;AAGA,SAASC,MAAT,QAAuB,kBAAvB;AACA,SACEC,SADF,EAEEC,qBAFF,EAGEC,iBAHF,EAIEC,aAJF,QAKO,UALP;AAMA,SAASC,qBAAT,QAAsC,eAAtC;AAEA,SAASC,YAAT,QAA6B,2BAA7B;AAwBA,OAAO,IAAMC,GAAkB,GAAG,SAArBA,GAAqB,OAS5B;AAAA,MARJC,QAQI,QARJA,QAQI;AAAA,4BAPJC,SAOI;AAAA,MAPJA,SAOI,+BAPQ,MAOR;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,kBAKI,QALJA,kBAKI;AAAA,MAJJC,SAII,QAJJA,SAII;AAAA,uBAHJC,IAGI;AAAA,MAHJA,IAGI,0BAHG,MAGH;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,uBADJC,IACI;AAAA,MADJA,IACI,0BADG,QACH;;AACJ,kBAA4B1B,QAAQ,CAAC,CAAD,CAApC;AAAA,MAAO2B,MAAP;AAAA,MAAeC,SAAf;;AACA,mBAAkD5B,QAAQ,CAAW,EAAX,CAA1D;AAAA,MAAO6B,iBAAP;AAAA,MAA0BC,oBAA1B;;AACA,mBAA8C9B,QAAQ,CAAC,KAAD,CAAtD;AAAA,MAAO+B,eAAP;AAAA,MAAwBC,kBAAxB;;AACA,mBAAsChC,QAAQ,CAAC,KAAD,CAA9C;AAAA,MAAOiC,WAAP;AAAA,MAAoBC,cAApB;;AACA,mBAAkDlC,QAAQ,CAAC,KAAD,CAA1D;AAAA,MAAOmC,iBAAP;AAAA,MAA0BC,oBAA1B;;AACA,mBAA8BpC,QAAQ,CAAqB,EAArB,CAAtC;AAAA,MAAOqC,OAAP;AAAA,MAAgBC,UAAhB;;AACA,mBAAoCtC,QAAQ,CAAC,KAAD,CAA5C;AAAA,MAAOuC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,mBAAkCxC,QAAQ,CAAC,KAAD,CAA1C;AAAA,MAAOyC,SAAP;AAAA,MAAkBC,YAAlB;;AAEA,MAAMC,YAAY,GAAGtC,OAAO,CAC1B;AAAA,WAAMc,QAAQ,CAACyB,GAAT,CAAa,UAACC,IAAD;AAAA,aAAUA,IAAI,CAACC,KAAL,CAAWC,IAArB;AAAA,KAAb,CAAN;AAAA,GAD0B,EAE1B,CAAC5B,QAAD,CAF0B,CAA5B;AAKA,MAAM6B,UAAU,GAAG3C,OAAO,CAAC,YAAM;AAC/B,WAAOsC,YAAY,CAACC,GAAb,CAAiB,UAACG,IAAD,EAAOE,KAAP,EAAiB;AACvC,aAAO;AAAEC,QAAAA,EAAE,EAAED,KAAN;AAAaF,QAAAA,IAAI,EAAEA;AAAnB,OAAP;AACD,KAFM,CAAP;AAGD,GAJyB,EAIvB,CAACJ,YAAD,CAJuB,CAA1B,CAfI,CAqBJ;;AACA,MAAMQ,MAAM,GAAGlD,MAAM,CAA0B,IAA1B,CAArB;AACA,MAAMmD,YAAY,GAAGnD,MAAM,CAEzB,EAFyB,CAA3B;AAGA,MAAMoD,WAAW,GAAGpD,MAAM,CAAuB,IAAvB,CAA1B;AAEA,MAAMqD,OAAO,GAAGpD,WAAW,CACzB,UAACqD,CAAD,EAAwB;AACtB,QACEA,CAAC,CAACC,MAAF,IACAD,CAAC,CAACE,aAAF,CAAgBC,OAAhB,CAAwBT,KADxB,IAEA,CAACM,CAAC,CAACE,aAAF,CAAgBC,OAAhB,CAAwBC,QAH3B,EAIE;AACA,UAAMV,MAAK,GAAGW,MAAM,CAACL,CAAC,CAACE,aAAF,CAAgBC,OAAhB,CAAwBT,KAAzB,CAApB;;AACArB,MAAAA,SAAS,CAACqB,MAAD,CAAT;;AACA,UAAI5B,QAAJ,EAAc;AACZA,QAAAA,QAAQ,CAAC4B,MAAD,CAAR;AACD;;AACDjB,MAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACD;AACF,GAdwB,EAezB,CAACX,QAAD,CAfyB,CAA3B;AAkBAhB,EAAAA,OAAO,CAAC,YAAM;AACZC,IAAAA,QAAQ,CAACuD,OAAT,CACE1C,QADF,EAEE,UAAC2C,KAAD,EAAsBb,KAAtB,EAAgC;AAC9B,UAAIa,KAAK,IAAIA,KAAK,CAAChB,KAAN,CAAYnB,MAAzB,EAAiC;AAC/BC,QAAAA,SAAS,CAACqB,KAAD,CAAT;AACD;AACF,KANH;AAQD,GATM,EASJ,CAAC9B,QAAD,CATI,CAAP;AAWAf,EAAAA,eAAe,CAAC,YAAM;AACpB,QAAIsB,IAAI,KAAK,QAAT,IAAqBK,eAArB,IAAwCU,SAA5C,EAAuD;AAAA;;AACrD,UAAMsB,cAAc,GAAG,oBAAAZ,MAAM,CAACa,OAAP,qCAAgBC,WAAhB,KAA+B,CAAtD;AACA,UAAMC,UAAU,GAAGC,MAAM,CAACC,MAAP,CAAchB,YAAY,CAACY,OAA3B,EAAoCK,MAApC,CACjB,UAACC,GAAD,EAAczB,IAAd,EAAuB;AACrB,YAAM0B,MAAM,GAAG1B,IAAf;AACA,eAAOyB,GAAG,IAAIC,MAAM,GAAGA,MAAM,CAACN,WAAV,GAAwB,CAAlC,CAAV;AACD,OAJgB,EAKjB,CALiB,CAAnB,CAFqD,CAUrD;;AACA,UAAIF,cAAc,IAAIG,UAAtB,EAAkC;AAChCpC,QAAAA,oBAAoB,CAAC0C,KAAK,CAACC,IAAN,CAAW9B,YAAY,CAAC+B,IAAb,EAAX,CAAD,CAApB;AACAxC,QAAAA,cAAc,CAAC,KAAD,CAAd;AACAE,QAAAA,oBAAoB,CAAC,KAAD,CAApB;AACA,eAAOJ,kBAAkB,CAAC,KAAD,CAAzB;AACD;;AAEDE,MAAAA,cAAc,CAAC,IAAD,CAAd;;AAEA,UAAID,WAAJ,EAAiB;AAAA;;AACf,YAAM0C,aAAa,GAAG,yBAAAtB,WAAW,CAACW,OAAZ,0CAAqBC,WAArB,KAAoC,CAA1D;AACA,YAAMW,cAAc,GAAGxB,YAAY,CAACY,OAAb,CAAqB,CAArB,EAAwBC,WAA/C,CAFe,CAIf;;AACA,YAAIF,cAAc,GAAGY,aAAa,GAAGC,cAArC,EAAqD;AACnD9C,UAAAA,oBAAoB,CAAC,EAAD,CAApB;;AACA,cAAMO,SAAO,GAAGM,YAAY,CAACC,GAAb,CAAiB,UAACG,IAAD,EAAOE,KAAP,EAAiB;AAChD,mBAAO;AAAEC,cAAAA,EAAE,EAAED,KAAN;AAAaF,cAAAA,IAAI,EAAEA;AAAnB,aAAP;AACD,WAFe,CAAhB;;AAGAT,UAAAA,UAAU,CAACD,SAAD,CAAV;AACAD,UAAAA,oBAAoB,CAAC,IAAD,CAApB;AACAF,UAAAA,cAAc,CAAC,KAAD,CAAd;AACA,iBAAOF,kBAAkB,CAAC,KAAD,CAAzB;AACD,SAdc,CAgBf;;;AACA,YAAM6C,OAAiB,GAAG,EAA1B;AACA,YAAIC,QAAQ,GAAG,CAAf;AACAX,QAAAA,MAAM,CAACC,MAAP,CAAchB,YAAY,CAACY,OAA3B,EAAoCH,OAApC,CAA4C,UAAChB,IAAD,EAAOI,KAAP,EAAiB;AAC3D,cAAM8B,MAAM,GAAGlC,IAAf;AACAiC,UAAAA,QAAQ,IAAIC,MAAM,CAACd,WAAnB;;AACA,cAAIU,aAAa,GAAGG,QAAhB,IAA4Bf,cAAhC,EAAgD;AAC9Cc,YAAAA,OAAO,CAACG,IAAR,CAAa/B,KAAb;AACD;AACF,SAND;AAOAnB,QAAAA,oBAAoB,CAAC+C,OAAD,CAApB;;AACA,YAAMxC,QAAO,GAAGM,YAAY,CACzBC,GADa,CACT,UAACG,IAAD,EAAOE,KAAP,EAAiB;AACpB,iBAAO;AAAEC,YAAAA,EAAE,EAAED,KAAN;AAAaF,YAAAA,IAAI,EAAEA;AAAnB,WAAP;AACD,SAHa,EAIbkC,MAJa,CAIN,UAACpC,IAAD;AAAA,iBAAU,CAACgC,OAAO,CAACK,QAAR,CAAiBrC,IAAI,CAACK,EAAtB,CAAX;AAAA,SAJM,CAAhB;;AAKAZ,QAAAA,UAAU,CAACD,QAAD,CAAV;AACAD,QAAAA,oBAAoB,CAAC,KAAD,CAApB;AACAJ,QAAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD;AACF;AACF,GA1Dc,EA0DZ,CACDb,QADC,EAEDsB,SAFC,EAGDV,eAHC,EAIDE,WAJC,EAKDU,YALC,EAMDjB,IANC,EAODG,iBAPC,CA1DY,CAAf;AAoEA1B,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIuB,IAAI,KAAK,QAAb,EAAuB;AACrB,UAAMyD,YAAY,GAAGzE,QAAQ,CAAC,YAAY;AACxCsB,QAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACD,OAF4B,EAE1B,GAF0B,CAA7B;AAGAoD,MAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkCF,YAAlC;AACA,aAAO,YAAY;AACjBC,QAAAA,MAAM,CAACE,mBAAP,CAA2B,QAA3B,EAAqCH,YAArC;AACD,OAFD;AAGD;AACF,GAVQ,EAUN,CAACzD,IAAD,CAVM,CAAT,CA7HI,CAyIJ;;AACAvB,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIuB,IAAI,KAAK,QAAT,IAAqByB,MAAM,CAACa,OAAhC,EAAyC;AACvC,UAAMuB,cAAc,GAAG,IAAI9E,cAAJ,CAAmB,UAAC+E,OAAD,EAAa;AACrD,6DAAoBA,OAApB,wCAA6B;AAAA,cAAlBC,KAAkB;AAC3B,cAAQC,WAAR,GAAwBD,KAAxB,CAAQC,WAAR;AACA,mCAAsBA,WAAtB,CAAQC,KAAR;AAAA,cAAQA,KAAR,mCAAgB,CAAhB;;AACA,cAAIA,KAAK,GAAG,CAAZ,EAAe;AACb3D,YAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACD;AACF;AACF,OARsB,CAAvB;AAUAuD,MAAAA,cAAc,CAACK,OAAf,CAAuBzC,MAAM,CAACa,OAA9B;AAEA6B,MAAAA,UAAU,CAAC,YAAM;AACf,YAAI1C,MAAM,CAACa,OAAX,EAAoB;AAClBuB,UAAAA,cAAc,CAACO,SAAf,CAAyB3C,MAAM,CAACa,OAAhC;AACD;AACF,OAJS,EAIP,IAJO,CAAV;AAMA,aAAO,YAAY;AACjBuB,QAAAA,cAAc,CAACQ,UAAf;AACD,OAFD;AAGD;AACF,GAxBQ,EAwBN,CAACrE,IAAD,CAxBM,CAAT;AA0BAvB,EAAAA,SAAS,CAAC,YAAM;AACd6B,IAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACAU,IAAAA,YAAY,CAAC,IAAD,CAAZ;AACD,GAHQ,EAGN,EAHM,CAAT;AAKA,MAAMsD,WAAW,GAAG3F,OAAO,CAAC,YAAM;AAChC,QAAM4F,IAAI,GAAG3F,QAAQ,CAAC4F,OAAT,CAAiB/E,QAAjB,CAAb;;AACA,QAAIY,eAAe,IAAI,CAACU,SAAxB,EAAmC;AACjC,aAAOwD,IAAP;AACD,KAFD,MAEO;AACL,aAAOA,IAAI,CAAChB,MAAL,CAAY,UAACnB,KAAD,EAAQb,KAAR,EAAkB;AACnC,eAAOpB,iBAAiB,CAACqD,QAAlB,CAA2BjC,KAA3B,CAAP;AACD,OAFM,CAAP;AAGD;AACF,GAT0B,EASxB,CAAC9B,QAAD,EAAWsB,SAAX,EAAsBV,eAAtB,EAAuCF,iBAAvC,CATwB,CAA3B;AAWA,MAAMsE,iBAAiB,GAAGjG,WAAW,CACnC,UAACgD,EAAD,EAAQ;AACNtB,IAAAA,SAAS,CAACsB,EAAD,CAAT;;AACA,QAAI5B,kBAAJ,EAAwB;AACtBA,MAAAA,kBAAkB,CAAC4B,EAAD,CAAlB;AACD;;AACDlB,IAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACD,GAPkC,EAQnC,CAACV,kBAAD,CARmC,CAArC;AAWA,MAAM8E,WAAW,GAAG/F,OAAO,CAAC,YAAM;AAChC,wBACE,oBAAC,iBAAD,qBACE,kCAAOsC,YAAY,CAAChB,MAAD,CAAnB,CADF,eAEE,oBAAC,YAAD;AAAc,MAAA,QAAQ,EAAEY,UAAxB;AAAoC,MAAA,IAAI,EAAC;AAAzC,MAFF,CADF;AAMD,GAP0B,EAOxB,CAACZ,MAAD,EAASY,UAAT,EAAqBI,YAArB,CAPwB,CAA3B;AASA,MAAM0D,WAAW,GAAGnG,WAAW,CAAC;AAAA,WAAMsC,aAAa,CAAC,IAAD,CAAnB;AAAA,GAAD,EAA4B,EAA5B,CAA/B;AACA,MAAM8D,YAAY,GAAGpG,WAAW,CAAC;AAAA,WAAMsC,aAAa,CAAC,KAAD,CAAnB;AAAA,GAAD,EAA6B,EAA7B,CAAhC;AAEA,sBACE,oBAAC,SAAD;AACE,IAAA,SAAS,EAAEhC,UAAU,CAAC,OAAD,EAAUe,SAAV,CADvB;AAEE,IAAA,MAAM,EAAEH,SAFV;AAGE,IAAA,KAAK,EAAEI;AAHT,kBAKE,oBAAC,aAAD;AAAe,IAAA,GAAG,EAAE2B;AAApB,KACGzB,IAAI,KAAK,QAAT,IACCsE,WAAW,CAACpD,GAAZ,CAAgB,UAACkB,KAAD,EAAmBb,KAAnB,EAAqC;AACnD,QAAMsD,OAAO,GAAGzC,KAAhB;AACA,wBAAOvD,YAAY,CAACgG,OAAD,EAAU;AAC3B5E,MAAAA,MAAM,EAAEsB,KAAK,KAAKtB,MADS;AAE3BH,MAAAA,IAAI,EAAJA,IAF2B;AAG3BgF,MAAAA,GAAG,EAAE,aAACC,EAAD,EAAQ;AACXrD,QAAAA,YAAY,CAACY,OAAb,CAAqBf,KAArB,IAA8BwD,EAA9B;AACD,OAL0B;AAM3BnD,MAAAA,OAAO,EAAPA,OAN2B;AAO3B,oBAAcL,KAPa;AAQ3B,uBAAiBsD,OAAO,CAACzD,KAAR,CAAca;AARJ,KAAV,CAAnB;AAUD,GAZD,CAFJ,EAeGjC,IAAI,KAAK,QAAT,IAAqBO,WAArB,gBACC,oBAAC,qBAAD;AACE,IAAA,GAAG,EAAEoB,WADP;AAEE,IAAA,IAAI,EAAC,MAFP;AAGE,IAAA,MAAM,EAAExB,iBAAiB,CAAC6E,OAAlB,CAA0B/E,MAA1B,MAAsC,CAAC,CAHjD;AAIE,IAAA,IAAI,EAAEH;AAJR,kBAME,oBAAC,MAAD;AACE,IAAA,QAAQ,EAAEG,MADZ;AAEE,IAAA,MAAM,eACJ,oBAAC,qBAAD;AAAuB,MAAA,KAAK,EAAEH;AAA9B,OACGC,SADH,CAHJ;AAOE,IAAA,oBAAoB,MAPtB;AAQE,IAAA,QAAQ,EAAE0E,iBARZ;AASE,IAAA,OAAO,EAAE9D,OATX;AAUE,IAAA,IAAI,EAAE,QAVR;AAWE,IAAA,IAAI,EAAE,QAXR;AAYE,IAAA,cAAc,MAZhB;AAaE,IAAA,aAAa,MAbf;AAcE,IAAA,oBAAoB,MAdtB;AAeE,IAAA,YAAY,EAAEgE,WAfhB;AAgBE,IAAA,aAAa,EAAEC;AAhBjB,IANF,CADD,GA0BG,IAzCN,EA0CG5E,IAAI,KAAK,UAAT,IAAuBS,iBAAvB,gBACC,oBAAC,qBAAD;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,MAAM,EAAEN,iBAAiB,CAAC6E,OAAlB,CAA0B/E,MAA1B,MAAsC,CAAC,CAFjD;AAGE,IAAA,IAAI,EAAEH;AAHR,kBAKE,oBAAC,MAAD;AACE,IAAA,QAAQ,EAAEG,MADZ;AAEE,IAAA,MAAM,EAAEyE,WAFV;AAGE,IAAA,oBAAoB,MAHtB;AAIE,IAAA,QAAQ,EAAED,iBAJZ;AAKE,IAAA,OAAO,EAAEnD,UALX;AAME,IAAA,IAAI,EAAE,QANR;AAOE,IAAA,IAAI,EAAE,QAPR;AAQE,IAAA,cAAc,MARhB;AASE,IAAA,aAAa,MATf;AAUE,IAAA,oBAAoB,MAVtB;AAWE,IAAA,YAAY,EAAEqD,WAXhB;AAYE,IAAA,aAAa,EAAEC;AAZjB,IALF,CADD,GAqBG,IA/DN,CALF,CADF;AAyED,CA7RM;AA+RPpF,GAAG,CAACyF,WAAJ,GAAkB,KAAlB","sourcesContent":["import React, {\n  ReactElement,\n  FC,\n  ReactNode,\n  useState,\n  useRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  Children,\n  cloneElement,\n} from \"react\";\nimport classNames from \"classnames\";\nimport ResizeObserver from \"resize-observer-polyfill\";\nimport debounce from \"lodash.debounce\";\nimport { ISyntheticEvent } from \"../../types\";\nimport { IOptionItemProps } from \"../Select/Option\";\nimport { Select } from \"../Select/Select\";\nimport {\n  StyledNav,\n  StyledNavAsMoreTarget,\n  StyledNavAsSelect,\n  StyledNavList,\n} from \"./Styles\";\nimport { StyledNavListItemMore } from \"./Item/Styles\";\nimport { ItemProps } from \"./Item/Item\";\nimport { ExpandSingle } from \"../Expanders/ExpandSingle\";\n\ntype NavType = \"inline\" | \"dropdown\";\nexport type NavAlignType = \"left\" | \"center\" | \"right\";\nexport type NavRoleType = \"bold\" | \"light\";\n\nexport interface INavProps {\n  children: ReactElement<ItemProps>[];\n  /** Function for changing active navs. */\n  onSelect?: (index: number) => void;\n  /** Function triggered when option in More... is selected */\n  onMoreOptionSelect?: (index: number) => void;\n  /** Aligment of nav component. */\n  alignment?: NavAlignType;\n  /** CSS classes. */\n  className?: string;\n  /** Role of nav component. */\n  role?: NavRoleType;\n  /** Label for More... item */\n  moreLabel?: string;\n  /** Nav type */\n  type?: NavType;\n}\n\nexport const Nav: FC<INavProps> = ({\n  children,\n  alignment = \"left\",\n  onSelect,\n  onMoreOptionSelect,\n  className,\n  role = \"bold\",\n  moreLabel,\n  type = \"inline\",\n}) => {\n  const [active, setActive] = useState(0);\n  const [visibleTabIndexes, setVisibleTabIndexes] = useState<number[]>([]);\n  const [measuringRender, setMeasuringRender] = useState(false);\n  const [moreVisible, setMoreVisible] = useState(false);\n  const [renderNavAsSelect, setRenderNavAsSelect] = useState(false);\n  const [options, setOptions] = useState<IOptionItemProps[]>([]);\n  const [moreOpened, setMoreOpened] = useState(false);\n  const [isMounted, setIsMounted] = useState(false);\n\n  const navItemNames = useMemo(\n    () => children.map((item) => item.props.name),\n    [children]\n  );\n\n  const allOptions = useMemo(() => {\n    return navItemNames.map((name, index) => {\n      return { id: index, name: name };\n    });\n  }, [navItemNames]);\n\n  // REFS\n  const navRef = useRef<HTMLUListElement | null>(null);\n  const navItemsRefs = useRef<\n    { index: number; element: HTMLLIElement } | Record<string, unknown>\n  >({});\n  const moreItemRef = useRef<HTMLLIElement | null>(null);\n\n  const onClick = useCallback(\n    (e: ISyntheticEvent) => {\n      if (\n        e.target &&\n        e.currentTarget.dataset.index &&\n        !e.currentTarget.dataset.disabled\n      ) {\n        const index = Number(e.currentTarget.dataset.index);\n        setActive(index);\n        if (onSelect) {\n          onSelect(index);\n        }\n        setMeasuringRender(true);\n      }\n    },\n    [onSelect]\n  );\n\n  useMemo(() => {\n    Children.forEach(\n      children as ReactElement[],\n      (child: ReactElement, index) => {\n        if (child && child.props.active) {\n          setActive(index);\n        }\n      }\n    );\n  }, [children]);\n\n  useLayoutEffect(() => {\n    if (type === \"inline\" && measuringRender && isMounted) {\n      const containerWidth = navRef.current?.offsetWidth || 0;\n      const itemsWidth = Object.values(navItemsRefs.current).reduce(\n        (acc: number, item) => {\n          const itemEl = item as HTMLLIElement;\n          return acc + (itemEl ? itemEl.offsetWidth : 0);\n        },\n        0\n      );\n\n      // all tabs are visible\n      if (containerWidth >= itemsWidth) {\n        setVisibleTabIndexes(Array.from(navItemNames.keys()));\n        setMoreVisible(false);\n        setRenderNavAsSelect(false);\n        return setMeasuringRender(false);\n      }\n\n      setMoreVisible(true);\n\n      if (moreVisible) {\n        const moreItemWidth = moreItemRef.current?.offsetWidth || 0;\n        const firstItemWidth = navItemsRefs.current[0].offsetWidth;\n\n        // collapse Nav to Select, there is no enough room\n        if (containerWidth < moreItemWidth + firstItemWidth) {\n          setVisibleTabIndexes([]);\n          const options = navItemNames.map((name, index) => {\n            return { id: index, name: name };\n          });\n          setOptions(options);\n          setRenderNavAsSelect(true);\n          setMoreVisible(false);\n          return setMeasuringRender(false);\n        }\n\n        // item(s) + More...\n        const visible: number[] = [];\n        let allWidth = 0;\n        Object.values(navItemsRefs.current).forEach((item, index) => {\n          const liItem = item as HTMLLIElement;\n          allWidth += liItem.offsetWidth;\n          if (moreItemWidth + allWidth <= containerWidth) {\n            visible.push(index);\n          }\n        });\n        setVisibleTabIndexes(visible);\n        const options = navItemNames\n          .map((name, index) => {\n            return { id: index, name: name };\n          })\n          .filter((item) => !visible.includes(item.id));\n        setOptions(options);\n        setRenderNavAsSelect(false);\n        setMeasuringRender(false);\n      }\n    }\n  }, [\n    children,\n    isMounted,\n    measuringRender,\n    moreVisible,\n    navItemNames,\n    type,\n    visibleTabIndexes,\n  ]);\n\n  useEffect(() => {\n    if (type === \"inline\") {\n      const handleResize = debounce((): void => {\n        setMeasuringRender(true);\n      }, 300);\n      window.addEventListener(\"resize\", handleResize);\n      return (): void => {\n        window.removeEventListener(\"resize\", handleResize);\n      };\n    }\n  }, [type]);\n\n  // we are using observer to solve the problem of the initial rendering\n  useEffect(() => {\n    if (type === \"inline\" && navRef.current) {\n      const resizeObserver = new ResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { contentRect } = entry;\n          const { width = 0 } = contentRect;\n          if (width > 0) {\n            setMeasuringRender(true);\n          }\n        }\n      });\n\n      resizeObserver.observe(navRef.current);\n\n      setTimeout(() => {\n        if (navRef.current) {\n          resizeObserver.unobserve(navRef.current);\n        }\n      }, 2000);\n\n      return (): void => {\n        resizeObserver.disconnect();\n      };\n    }\n  }, [type]);\n\n  useEffect(() => {\n    setMeasuringRender(true);\n    setIsMounted(true);\n  }, []);\n\n  const visibleTabs = useMemo(() => {\n    const tabs = Children.toArray(children);\n    if (measuringRender || !isMounted) {\n      return tabs;\n    } else {\n      return tabs.filter((child, index) => {\n        return visibleTabIndexes.includes(index);\n      });\n    }\n  }, [children, isMounted, measuringRender, visibleTabIndexes]);\n\n  const onMoreOptionClick = useCallback(\n    (id) => {\n      setActive(id);\n      if (onMoreOptionSelect) {\n        onMoreOptionSelect(id);\n      }\n      setMeasuringRender(true);\n    },\n    [onMoreOptionSelect]\n  );\n\n  const navAsSelect = useMemo(() => {\n    return (\n      <StyledNavAsSelect>\n        <span>{navItemNames[active]}</span>\n        <ExpandSingle expanded={moreOpened} fill=\"currentColor\" />\n      </StyledNavAsSelect>\n    );\n  }, [active, moreOpened, navItemNames]);\n\n  const setMoreOpen = useCallback(() => setMoreOpened(true), []);\n  const setMoreClose = useCallback(() => setMoreOpened(false), []);\n\n  return (\n    <StyledNav\n      className={classNames(\"c-nav\", className)}\n      $align={alignment}\n      $role={role}\n    >\n      <StyledNavList ref={navRef}>\n        {type === \"inline\" &&\n          visibleTabs.map((child: ReactNode, index: number) => {\n            const element = child as ReactElement;\n            return cloneElement(element, {\n              active: index === active,\n              role,\n              ref: (el) => {\n                navItemsRefs.current[index] = el;\n              },\n              onClick,\n              \"data-index\": index,\n              \"data-disabled\": element.props.disabled,\n            });\n          })}\n        {type === \"inline\" && moreVisible ? (\n          <StyledNavListItemMore\n            ref={moreItemRef}\n            name=\"More\"\n            active={visibleTabIndexes.indexOf(active) === -1}\n            role={role}\n          >\n            <Select\n              selected={active}\n              target={\n                <StyledNavAsMoreTarget $role={role}>\n                  {moreLabel}\n                </StyledNavAsMoreTarget>\n              }\n              disabledInternalSort\n              onChange={onMoreOptionClick}\n              options={options}\n              type={\"single\"}\n              mode={\"normal\"}\n              forceCloseMenu\n              disableSearch\n              keepSameOptionsOrder\n              onSelectOpen={setMoreOpen}\n              onSelectClose={setMoreClose}\n            />\n          </StyledNavListItemMore>\n        ) : null}\n        {type === \"dropdown\" || renderNavAsSelect ? (\n          <StyledNavListItemMore\n            name=\"More\"\n            active={visibleTabIndexes.indexOf(active) === -1}\n            role={role}\n          >\n            <Select\n              selected={active}\n              target={navAsSelect}\n              disabledInternalSort\n              onChange={onMoreOptionClick}\n              options={allOptions}\n              type={\"single\"}\n              mode={\"normal\"}\n              forceCloseMenu\n              disableSearch\n              keepSameOptionsOrder\n              onSelectOpen={setMoreOpen}\n              onSelectClose={setMoreClose}\n            />\n          </StyledNavListItemMore>\n        ) : null}\n      </StyledNavList>\n    </StyledNav>\n  );\n};\n\nNav.displayName = \"Nav\";\n"],"file":"Nav.js"}

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

@@ -0,0 +1,94 @@
+import styled, { css } from "styled-components";
+export var StyledNav = styled.nav.withConfig({
+  displayName: "Styles__StyledNav",
+  componentId: "sc-1khiypw-0"
+})(["", " height:100%;overflow:clip visible;", " ", " ", " ", ""], {
+  "display": "flex"
+}, function (props) {
+  return props.$align === "left" && css(["", ""], {
+    "justifyContent": "flex-start"
+  });
+}, function (props) {
+  return props.$align === "center" && css(["", ""], {
+    "justifyContent": "center"
+  });
+}, function (props) {
+  return props.$align === "right" && css(["", ""], {
+    "justifyContent": "flex-end"
+  });
+}, function (props) {
+  return props.$role === "light" && css(["height:auto;"]);
+});
+StyledNav.displayName = "StyledNav";
+export var StyledNavList = styled.ul.withConfig({
+  displayName: "Styles__StyledNavList",
+  componentId: "sc-1khiypw-1"
+})(["", " overflow:clip visible;"], {
+  "display": "flex",
+  "listStyleType": "none",
+  "margin": "0px",
+  "padding": "0px"
+});
+StyledNavList.displayName = "StyledNavList";
+export var StyledNavListItem = styled.li.withConfig({
+  displayName: "Styles__StyledNavListItem",
+  componentId: "sc-1khiypw-2"
+})(["", " color:var(--color-theme-700);font-size:15px;display:flex;align-items:center;font-weight:500;padding:0 10px;flex-shrink:0;&:hover,&:hover *{", "}", " &::after{content:\"\";", " bottom:0;left:50%;transform:translateX(-50%);height:3px;transition:width 0.3s ease,background-color 0.3s ease;}", " ", " ", " ", ""], {
+  "fontSize": "0.875rem",
+  "lineHeight": "1.25rem",
+  "cursor": "default",
+  "position": "relative",
+  "userSelect": "none"
+}, function (props) {
+  return !props.$disabled && css(["", ""], {
+    "color": "var(--color-primary)"
+  });
+}, function (props) {
+  return !props.$active && !props.$disabled && css(["", ""], {
+    "cursor": "pointer"
+  });
+}, {
+  "position": "absolute",
+  "display": "block",
+  "margin": "auto",
+  "width": "0px",
+  "backgroundColor": "rgba(0, 0, 0, 0)"
+}, function (props) {
+  return props.$active && css(["", " &::after{", "}"], {
+    "pointerEvents": "none"
+  }, {
+    "width": "100%",
+    "backgroundColor": "var(--color-primary)"
+  });
+}, function (props) {
+  return props.$disabled && css(["", ""], {
+    "userSelect": "none",
+    "cursor": "not-allowed",
+    "opacity": "0.5"
+  });
+}, function (props) {
+  return props.$role === "light" && css(["", " color:var(--color-theme-800);font-weight:400;padding:0 8px;&::after{bottom:-4px;height:2px;}"], {
+    "fontSize": "0.875rem",
+    "lineHeight": "1.25rem"
+  });
+}, function (props) {
+  return props.$active && css(["", " & *{", "}"], {
+    "color": "var(--color-primary)"
+  }, {
+    "color": "var(--color-primary)"
+  });
+});
+StyledNavListItem.displayName = "StyledNavListItem";
+export var StyledNavAsSelect = styled.div.withConfig({
+  displayName: "Styles__StyledNavAsSelect",
+  componentId: "sc-1khiypw-3"
+})(["padding:0 10px;height:100%;display:flex;align-items:center;svg{color:var(--color-primary);}"]);
+StyledNavAsSelect.displayName = "StyledNavAsSelect";
+export var StyledNavAsMoreTarget = styled.div.withConfig({
+  displayName: "Styles__StyledNavAsMoreTarget",
+  componentId: "sc-1khiypw-4"
+})(["padding:0 10px;height:100%;display:flex;align-items:center;", ""], function (props) {
+  return props.$role === "light" && css(["padding:0;"]);
+});
+StyledNavAsMoreTarget.displayName = "StyledNavAsMoreTarget";
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Nav/Styles.ts"],"names":["styled","css","StyledNav","nav","props","$align","$role","displayName","StyledNavList","ul","StyledNavListItem","li","$disabled","$active","StyledNavAsSelect","div","StyledNavAsMoreTarget"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AASA,OAAO,IAAMC,SAAS,GAAGF,MAAM,CAACG,GAAV;AAAA;AAAA;AAAA,mEAChB;AAAA;AAAA,CADgB,EAKlB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,KAAiB,MAAjB,IACAJ,GADA,WAEM;AAAA;AAAA,GAFN,CADA;AAAA,CALkB,EAWlB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,KAAiB,QAAjB,IACAJ,GADA,WAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAXkB,EAiBlB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,KAAiB,OAAjB,IACAJ,GADA,WAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAjBkB,EAuBlB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,OAAhB,IACAL,GADA,kBADA;AAAA,CAvBkB,CAAf;AA8BPC,SAAS,CAACK,WAAV,GAAwB,WAAxB;AAEA,OAAO,IAAMC,aAAa,GAAGR,MAAM,CAACS,EAAV;AAAA;AAAA;AAAA,oCACpB;AAAA;AAAA;AAAA;AAAA;AAAA,CADoB,CAAnB;AAKPD,aAAa,CAACD,WAAd,GAA4B,eAA5B;AASA,OAAO,IAAMG,iBAAiB,GAAGV,MAAM,CAACW,EAAV;AAAA;AAAA;AAAA,gUACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADwB,EAYxB,UAACP,KAAD;AAAA,SACA,CAACA,KAAK,CAACQ,SAAP,IACAX,GADA,WAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAZwB,EAmB1B,UAACG,KAAD;AAAA,SACA,CAACA,KAAK,CAACS,OAAP,IACA,CAACT,KAAK,CAACQ,SADP,IAEAX,GAFA,WAGM;AAAA;AAAA,GAHN,CADA;AAAA,CAnB0B,EA4BtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CA5BsB,EAoC1B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACS,OAAN,IACAZ,GADA,0BAEM;AAAA;AAAA,GAFN,EAIQ;AAAA;AAAA;AAAA,GAJR,CADA;AAAA,CApC0B,EA6C1B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACQ,SAAN,IACAX,GADA,WAEM;AAAA;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CA7C0B,EAmD1B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,OAAhB,IACAL,GADA,wGAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CAnD0B,EAiE1B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACS,OAAN,IACAZ,GADA,qBAEM;AAAA;AAAA,GAFN,EAIQ;AAAA;AAAA,GAJR,CADA;AAAA,CAjE0B,CAAvB;AA2EPS,iBAAiB,CAACH,WAAlB,GAAgC,mBAAhC;AAEA,OAAO,IAAMO,iBAAiB,GAAGd,MAAM,CAACe,GAAV;AAAA;AAAA;AAAA,mGAAvB;AAWPD,iBAAiB,CAACP,WAAlB,GAAgC,mBAAhC;AAEA,OAAO,IAAMS,qBAAqB,GAAGhB,MAAM,CAACe,GAAV;AAAA;AAAA;AAAA,wEAQ9B,UAACX,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,OAAhB,IACAL,GADA,gBADA;AAAA,CAR8B,CAA3B;AAePe,qBAAqB,CAACT,WAAtB,GAAoC,uBAApC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { NavAlignType, NavRoleType } from \"./Nav\";\n\ninterface StyledNavProps {\n  $align?: NavAlignType;\n  $role?: NavRoleType;\n}\n\nexport const StyledNav = styled.nav<StyledNavProps>`\n  ${tw`tw-flex`}\n  height: 100%;\n  overflow: clip visible;\n\n  ${(props) =>\n    props.$align === \"left\" &&\n    css`\n      ${tw`tw-justify-start`}\n    `}\n\n  ${(props) =>\n    props.$align === \"center\" &&\n    css`\n      ${tw`tw-justify-center`}\n    `}\n\n  ${(props) =>\n    props.$align === \"right\" &&\n    css`\n      ${tw`tw-justify-end`}\n    `}\n\n  ${(props) =>\n    props.$role === \"light\" &&\n    css`\n      height: auto;\n    `}\n`;\n\nStyledNav.displayName = \"StyledNav\";\n\nexport const StyledNavList = styled.ul`\n  ${tw`tw-flex tw-list-none tw-m-0 tw-p-0`}\n  overflow: clip visible;\n`;\n\nStyledNavList.displayName = \"StyledNavList\";\n\ninterface StyledNavListItemProps {\n  $active?: boolean;\n  $disabled?: boolean;\n  $role?: NavRoleType;\n  $asMore?: boolean;\n}\n\nexport const StyledNavListItem = styled.li<StyledNavListItemProps>`\n  ${tw`tw-text-sm tw-cursor-default tw-relative tw-select-none`}\n  color: var(--color-theme-700);\n  font-size: 15px;\n  display: flex;\n  align-items: center;\n  font-weight: 500;\n  padding: 0 10px;\n  flex-shrink: 0;\n\n  &:hover,\n  &:hover * {\n    ${(props) =>\n      !props.$disabled &&\n      css`\n        ${tw`tw-text-primary`}\n      `}\n  }\n\n  ${(props) =>\n    !props.$active &&\n    !props.$disabled &&\n    css`\n      ${tw`tw-cursor-pointer`}\n    `}\n\n  &::after {\n    content: \"\";\n    ${tw`tw-absolute tw-block tw-m-auto tw-w-0 tw-bg-transparent`}\n    bottom: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    height: 3px;\n    transition: width 0.3s ease, background-color 0.3s ease;\n  }\n\n  ${(props) =>\n    props.$active &&\n    css`\n      ${tw`tw-pointer-events-none`}\n      &::after {\n        ${tw`tw-w-full tw-bg-primary`}\n      }\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      ${tw`tw-select-none tw-cursor-not-allowed tw-opacity-50`}\n    `}\n\n  ${(props) =>\n    props.$role === \"light\" &&\n    css`\n      ${tw`tw-text-sm`}\n      color: var(--color-theme-800);\n      font-weight: 400;\n      padding: 0 8px;\n\n      &::after {\n        bottom: -4px;\n        height: 2px;\n      }\n    `}\n\n  ${(props) =>\n    props.$active &&\n    css`\n      ${tw`tw-text-primary`}\n      & * {\n        ${tw`tw-text-primary`}\n      }\n    `}\n`;\n\nStyledNavListItem.displayName = \"StyledNavListItem\";\n\nexport const StyledNavAsSelect = styled.div`\n  padding: 0 10px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  svg {\n    color: var(--color-primary);\n  }\n`;\n\nStyledNavAsSelect.displayName = \"StyledNavAsSelect\";\n\nexport const StyledNavAsMoreTarget = styled.div<{\n  $role?: NavRoleType;\n}>`\n  padding: 0 10px;\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  ${(props) =>\n    props.$role === \"light\" &&\n    css`\n      padding: 0;\n    `}\n`;\n\nStyledNavAsMoreTarget.displayName = \"StyledNavAsMoreTarget\";\n"],"file":"Styles.js"}

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

@@ -0,0 +1,3 @@
+export * from "./Nav";
+export * from "./Item";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Nav/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAd;AACA,cAAc,QAAd","sourcesContent":["export * from \"./Nav\";\nexport * from \"./Item\";\n"],"file":"index.js"}

package/dist/esm/components/Overlay/Overlay.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["className"];
+import React from "react";
+import classnames from "classnames";
+import { StyledOverlay } from "./Styles";
+export var Overlay = function Overlay(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(StyledOverlay, _extends({
+    className: classnames("c-overlay", className)
+  }, rest));
+};
+Overlay.displayName = "Overlay";
+//# sourceMappingURL=Overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":["React","classnames","StyledOverlay","Overlay","className","rest","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,MAA0C,OAA1C;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,aAAT,QAA8B,UAA9B;AAEA,OAAO,IAAMC,OAA2C,GAAG,SAA9CA,OAA8C,OAGrD;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,IACC;;AACJ,sBACE,oBAAC,aAAD;AAAe,IAAA,SAAS,EAAEJ,UAAU,CAAC,WAAD,EAAcG,SAAd;AAApC,KAAkEC,IAAlE,EADF;AAGD,CAPM;AASPF,OAAO,CAACG,WAAR,GAAsB,SAAtB","sourcesContent":["import React, { FC, HTMLAttributes } from \"react\";\nimport classnames from \"classnames\";\nimport { StyledOverlay } from \"./Styles\";\n\nexport const Overlay: FC<HTMLAttributes<HTMLDivElement>> = ({\n  className,\n  ...rest\n}) => {\n  return (\n    <StyledOverlay className={classnames(\"c-overlay\", className)} {...rest} />\n  );\n};\n\nOverlay.displayName = \"Overlay\";\n"],"file":"Overlay.js"}

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+export var StyledOverlay = styled.div.withConfig({
+  displayName: "Styles__StyledOverlay",
+  componentId: "sc-flnrpv-0"
+})(["position:fixed;top:0;right:0;bottom:0;left:0;"]);
+StyledOverlay.displayName = "StyledOverlay";
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Overlay/Styles.ts"],"names":["styled","StyledOverlay","div","displayName"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,OAAO,IAAMC,aAAa,GAAGD,MAAM,CAACE,GAAV;AAAA;AAAA;AAAA,qDAAnB;AAQPD,aAAa,CAACE,WAAd,GAA4B,eAA5B","sourcesContent":["import styled from \"styled-components\";\n\nexport const StyledOverlay = styled.div`\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n`;\n\nStyledOverlay.displayName = \"StyledOverlay\";\n"],"file":"Styles.js"}

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

@@ -0,0 +1,2 @@
+export * from "./Overlay";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Overlay/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAd","sourcesContent":["export * from \"./Overlay\";\n"],"file":"index.js"}

package/dist/esm/components/Paper/Paper.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "className", "type", "hover", "useOptimizedShadow"];
+import React, { forwardRef } from "react";
+import classNames from "classnames";
+import { StyledPaper } from "./Styles";
+
+/**
+ * This is a component description and should sit directly above your component
+ */
+export var Paper = /*#__PURE__*/forwardRef(function (_ref, innerRef) {
+  var children = _ref.children,
+      className = _ref.className,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? "paper-1" : _ref$type,
+      _ref$hover = _ref.hover,
+      hover = _ref$hover === void 0 ? false : _ref$hover,
+      _ref$useOptimizedShad = _ref.useOptimizedShadow,
+      useOptimizedShadow = _ref$useOptimizedShad === void 0 ? false : _ref$useOptimizedShad,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(StyledPaper, _extends({
+    className: classNames(className, {
+      "ac-shadow--hover--lg": !useOptimizedShadow && hover && type === "paper-1",
+      "ac-shadow-optimized--lg": useOptimizedShadow && hover && type === "paper-1",
+      "ac-shadow--lg": !hover && type === "paper-1",
+      "ac-shadow--hover--sm": !useOptimizedShadow && hover && type === "paper-2" || !useOptimizedShadow && hover && type === "paper-3",
+      "ac-shadow-optimized--sm": useOptimizedShadow && hover && type === "paper-2" || useOptimizedShadow && hover && type === "paper-3",
+      "ac-shadow--sm": !hover && type === "paper-2" || !hover && type === "paper-3"
+    }),
+    ref: innerRef,
+    type: type
+  }, rest), children);
+});
+Paper.displayName = "Paper";
+//# sourceMappingURL=Paper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Paper/Paper.tsx"],"names":["React","forwardRef","classNames","StyledPaper","Paper","innerRef","children","className","type","hover","useOptimizedShadow","rest","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IACEC,UADF,QAMO,OANP;AAOA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,WAAT,QAA4B,UAA5B;;AAmBA;AACA;AACA;AACA,OAAO,IAAMC,KAAK,gBAAGH,UAAU,CAC7B,gBASEI,QATF,EAUK;AAAA,MARDC,QAQC,QARDA,QAQC;AAAA,MAPDC,SAOC,QAPDA,SAOC;AAAA,uBANDC,IAMC;AAAA,MANDA,IAMC,0BANM,SAMN;AAAA,wBALDC,KAKC;AAAA,MALDA,KAKC,2BALO,KAKP;AAAA,mCAJDC,kBAIC;AAAA,MAJDA,kBAIC,sCAJoB,KAIpB;AAAA,MAHEC,IAGF;;AACH,sBACE,oBAAC,WAAD;AACE,IAAA,SAAS,EAAET,UAAU,CAACK,SAAD,EAAY;AAC/B,8BACE,CAACG,kBAAD,IAAuBD,KAAvB,IAAgCD,IAAI,KAAK,SAFZ;AAG/B,iCACEE,kBAAkB,IAAID,KAAtB,IAA+BD,IAAI,KAAK,SAJX;AAK/B,uBAAiB,CAACC,KAAD,IAAUD,IAAI,KAAK,SALL;AAM/B,8BACG,CAACE,kBAAD,IAAuBD,KAAvB,IAAgCD,IAAI,KAAK,SAA1C,IACC,CAACE,kBAAD,IAAuBD,KAAvB,IAAgCD,IAAI,KAAK,SARb;AAS/B,iCACGE,kBAAkB,IAAID,KAAtB,IAA+BD,IAAI,KAAK,SAAzC,IACCE,kBAAkB,IAAID,KAAtB,IAA+BD,IAAI,KAAK,SAXZ;AAY/B,uBACG,CAACC,KAAD,IAAUD,IAAI,KAAK,SAApB,IAAmC,CAACC,KAAD,IAAUD,IAAI,KAAK;AAbzB,KAAZ,CADvB;AAgBE,IAAA,GAAG,EAAEH,QAhBP;AAiBE,IAAA,IAAI,EAAEG;AAjBR,KAkBMG,IAlBN,GAoBGL,QApBH,CADF;AAwBD,CApC4B,CAAxB;AAuCPF,KAAK,CAACQ,WAAN,GAAoB,OAApB","sourcesContent":["import React, {\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefObject,\n} from \"react\";\nimport classNames from \"classnames\";\nimport { StyledPaper } from \"./Styles\";\n\nexport interface IPaperProps {\n  /** Children type of node or string */\n  children: ReactNode;\n  /** CSS classes */\n  className?: string;\n  /** Ref object. */\n  innerRef?: RefObject<HTMLDivElement>;\n  /** Define custom style */\n  style?: object;\n  /** Type of paper to be used */\n  type?: \"paper-1\" | \"paper-2\" | \"paper-3\";\n  /** Paper has hover or not */\n  hover?: boolean;\n  /** Use optimized shadow */\n  useOptimizedShadow?: boolean;\n}\n\n/**\n * This is a component description and should sit directly above your component\n */\nexport const Paper = forwardRef(\n  (\n    {\n      children,\n      className,\n      type = \"paper-1\",\n      hover = false,\n      useOptimizedShadow = false,\n      ...rest\n    }: HTMLAttributes<HTMLDivElement> & IPaperProps,\n    innerRef: Ref<HTMLDivElement> | null | undefined\n  ) => {\n    return (\n      <StyledPaper\n        className={classNames(className, {\n          \"ac-shadow--hover--lg\":\n            !useOptimizedShadow && hover && type === \"paper-1\",\n          \"ac-shadow-optimized--lg\":\n            useOptimizedShadow && hover && type === \"paper-1\",\n          \"ac-shadow--lg\": !hover && type === \"paper-1\",\n          \"ac-shadow--hover--sm\":\n            (!useOptimizedShadow && hover && type === \"paper-2\") ||\n            (!useOptimizedShadow && hover && type === \"paper-3\"),\n          \"ac-shadow-optimized--sm\":\n            (useOptimizedShadow && hover && type === \"paper-2\") ||\n            (useOptimizedShadow && hover && type === \"paper-3\"),\n          \"ac-shadow--sm\":\n            (!hover && type === \"paper-2\") || (!hover && type === \"paper-3\"),\n        })}\n        ref={innerRef}\n        type={type}\n        {...rest}\n      >\n        {children}\n      </StyledPaper>\n    );\n  }\n);\n\nPaper.displayName = \"Paper\";\n"],"file":"Paper.js"}