@activecollab/components 1.0.5 → 1.0.9

package/dist/cjs/components/Nav/Nav.js

@@ -0,0 +1,347 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Nav = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
+var _lodash = _interopRequireDefault(require("lodash.debounce"));
+
+var _Select = require("../Select/Select");
+
+var _Styles = require("./Styles");
+
+var _Styles2 = require("./Item/Styles");
+
+var _ExpandSingle = require("../Expanders/ExpandSingle");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var 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 = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      active = _useState2[0],
+      setActive = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visibleTabIndexes = _useState4[0],
+      setVisibleTabIndexes = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      measuringRender = _useState6[0],
+      setMeasuringRender = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      moreVisible = _useState8[0],
+      setMoreVisible = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      renderNavAsSelect = _useState10[0],
+      setRenderNavAsSelect = _useState10[1];
+
+  var _useState11 = (0, _react.useState)([]),
+      _useState12 = _slicedToArray(_useState11, 2),
+      options = _useState12[0],
+      setOptions = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      moreOpened = _useState14[0],
+      setMoreOpened = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      isMounted = _useState16[0],
+      setIsMounted = _useState16[1];
+
+  var navItemNames = (0, _react.useMemo)(function () {
+    return children.map(function (item) {
+      return item.props.name;
+    });
+  }, [children]);
+  var allOptions = (0, _react.useMemo)(function () {
+    return navItemNames.map(function (name, index) {
+      return {
+        id: index,
+        name: name
+      };
+    });
+  }, [navItemNames]); // REFS
+
+  var navRef = (0, _react.useRef)(null);
+  var navItemsRefs = (0, _react.useRef)({});
+  var moreItemRef = (0, _react.useRef)(null);
+  var onClick = (0, _react.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]);
+  (0, _react.useMemo)(function () {
+    _react.Children.forEach(children, function (child, index) {
+      if (child && child.props.active) {
+        setActive(index);
+      }
+    });
+  }, [children]);
+  (0, _react.useLayoutEffect)(function () {
+    if (type === "inline" && measuringRender && isMounted) {
+      var _navRef$current;
+
+      var containerWidth = ((_navRef$current = navRef.current) === null || _navRef$current === void 0 ? 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 || _moreItemRef$current === void 0 ? 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]);
+  (0, _react.useEffect)(function () {
+    if (type === "inline") {
+      var handleResize = (0, _lodash.default)(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
+
+  (0, _react.useEffect)(function () {
+    if (type === "inline" && navRef.current) {
+      var resizeObserver = new _resizeObserverPolyfill.default(function (entries) {
+        var _iterator = _createForOfIteratorHelper(entries),
+            _step;
+
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).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);
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+      resizeObserver.observe(navRef.current);
+      setTimeout(function () {
+        if (navRef.current) {
+          resizeObserver.unobserve(navRef.current);
+        }
+      }, 2000);
+      return function () {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [type]);
+  (0, _react.useEffect)(function () {
+    setMeasuringRender(true);
+    setIsMounted(true);
+  }, []);
+  var visibleTabs = (0, _react.useMemo)(function () {
+    var tabs = _react.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 = (0, _react.useCallback)(function (id) {
+    setActive(id);
+
+    if (onMoreOptionSelect) {
+      onMoreOptionSelect(id);
+    }
+
+    setMeasuringRender(true);
+  }, [onMoreOptionSelect]);
+  var navAsSelect = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(_Styles.StyledNavAsSelect, null, /*#__PURE__*/_react.default.createElement("span", null, navItemNames[active]), /*#__PURE__*/_react.default.createElement(_ExpandSingle.ExpandSingle, {
+      expanded: moreOpened,
+      fill: "currentColor"
+    }));
+  }, [active, moreOpened, navItemNames]);
+  var setMoreOpen = (0, _react.useCallback)(function () {
+    return setMoreOpened(true);
+  }, []);
+  var setMoreClose = (0, _react.useCallback)(function () {
+    return setMoreOpened(false);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledNav, {
+    className: (0, _classnames.default)("c-nav", className),
+    $align: alignment,
+    $role: role
+  }, /*#__PURE__*/_react.default.createElement(_Styles.StyledNavList, {
+    ref: navRef
+  }, type === "inline" && visibleTabs.map(function (child, index) {
+    var element = child;
+    return /*#__PURE__*/(0, _react.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.default.createElement(_Styles2.StyledNavListItemMore, {
+    ref: moreItemRef,
+    name: "More",
+    active: visibleTabIndexes.indexOf(active) === -1,
+    role: role
+  }, /*#__PURE__*/_react.default.createElement(_Select.Select, {
+    selected: active,
+    target: /*#__PURE__*/_react.default.createElement(_Styles.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.default.createElement(_Styles2.StyledNavListItemMore, {
+    name: "More",
+    active: visibleTabIndexes.indexOf(active) === -1,
+    role: role
+  }, /*#__PURE__*/_react.default.createElement(_Select.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));
+};
+
+exports.Nav = Nav;
+Nav.displayName = "Nav";
+//# sourceMappingURL=Nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Nav/Nav.tsx"],"names":["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","Children","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","ResizeObserver","entries","entry","contentRect","width","observe","setTimeout","unobserve","disconnect","visibleTabs","tabs","toArray","onMoreOptionClick","navAsSelect","setMoreOpen","setMoreClose","element","ref","el","indexOf","displayName"],"mappings":"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","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/cjs/components/Nav/Styles.js

@@ -0,0 +1,122 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledNavListItem = exports.StyledNavList = exports.StyledNavAsSelect = exports.StyledNavAsMoreTarget = exports.StyledNav = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var StyledNav = _styledComponents.default.nav.withConfig({
+  displayName: "Styles__StyledNav",
+  componentId: "sc-1khiypw-0"
+})(["", " height:100%;overflow:clip visible;", " ", " ", " ", ""], {
+  "display": "flex"
+}, function (props) {
+  return props.$align === "left" && (0, _styledComponents.css)(["", ""], {
+    "justifyContent": "flex-start"
+  });
+}, function (props) {
+  return props.$align === "center" && (0, _styledComponents.css)(["", ""], {
+    "justifyContent": "center"
+  });
+}, function (props) {
+  return props.$align === "right" && (0, _styledComponents.css)(["", ""], {
+    "justifyContent": "flex-end"
+  });
+}, function (props) {
+  return props.$role === "light" && (0, _styledComponents.css)(["height:auto;"]);
+});
+
+exports.StyledNav = StyledNav;
+StyledNav.displayName = "StyledNav";
+
+var StyledNavList = _styledComponents.default.ul.withConfig({
+  displayName: "Styles__StyledNavList",
+  componentId: "sc-1khiypw-1"
+})(["", " overflow:clip visible;"], {
+  "display": "flex",
+  "listStyleType": "none",
+  "margin": "0px",
+  "padding": "0px"
+});
+
+exports.StyledNavList = StyledNavList;
+StyledNavList.displayName = "StyledNavList";
+
+var StyledNavListItem = _styledComponents.default.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 && (0, _styledComponents.css)(["", ""], {
+    "color": "var(--color-primary)"
+  });
+}, function (props) {
+  return !props.$active && !props.$disabled && (0, _styledComponents.css)(["", ""], {
+    "cursor": "pointer"
+  });
+}, {
+  "position": "absolute",
+  "display": "block",
+  "margin": "auto",
+  "width": "0px",
+  "backgroundColor": "rgba(0, 0, 0, 0)"
+}, function (props) {
+  return props.$active && (0, _styledComponents.css)(["", " &::after{", "}"], {
+    "pointerEvents": "none"
+  }, {
+    "width": "100%",
+    "backgroundColor": "var(--color-primary)"
+  });
+}, function (props) {
+  return props.$disabled && (0, _styledComponents.css)(["", ""], {
+    "userSelect": "none",
+    "cursor": "not-allowed",
+    "opacity": "0.5"
+  });
+}, function (props) {
+  return props.$role === "light" && (0, _styledComponents.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 && (0, _styledComponents.css)(["", " & *{", "}"], {
+    "color": "var(--color-primary)"
+  }, {
+    "color": "var(--color-primary)"
+  });
+});
+
+exports.StyledNavListItem = StyledNavListItem;
+StyledNavListItem.displayName = "StyledNavListItem";
+
+var StyledNavAsSelect = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledNavAsSelect",
+  componentId: "sc-1khiypw-3"
+})(["padding:0 10px;height:100%;display:flex;align-items:center;svg{color:var(--color-primary);}"]);
+
+exports.StyledNavAsSelect = StyledNavAsSelect;
+StyledNavAsSelect.displayName = "StyledNavAsSelect";
+
+var StyledNavAsMoreTarget = _styledComponents.default.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" && (0, _styledComponents.css)(["padding:0;"]);
+});
+
+exports.StyledNavAsMoreTarget = StyledNavAsMoreTarget;
+StyledNavAsMoreTarget.displayName = "StyledNavAsMoreTarget";
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Nav/Styles.ts"],"names":["StyledNav","styled","nav","props","$align","css","$role","displayName","StyledNavList","ul","StyledNavListItem","li","$disabled","$active","StyledNavAsSelect","div","StyledNavAsMoreTarget"],"mappings":";;;;;;;;;AAAA;;;;;;AASO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,mEAChB;AAAA;AAAA,CADgB,EAKlB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,KAAiB,MAAjB,QACAC,qBADA,YAEM;AAAA;AAAA,GAFN,CADA;AAAA,CALkB,EAWlB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,KAAiB,QAAjB,QACAC,qBADA,YAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAXkB,EAiBlB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,KAAiB,OAAjB,QACAC,qBADA,YAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAjBkB,EAuBlB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,OAAhB,QACAD,qBADA,mBADA;AAAA,CAvBkB,CAAf;;;AA8BPL,SAAS,CAACO,WAAV,GAAwB,WAAxB;;AAEO,IAAMC,aAAa,GAAGP,0BAAOQ,EAAV;AAAA;AAAA;AAAA,oCACpB;AAAA;AAAA;AAAA;AAAA;AAAA,CADoB,CAAnB;;;AAKPD,aAAa,CAACD,WAAd,GAA4B,eAA5B;;AASO,IAAMG,iBAAiB,GAAGT,0BAAOU,EAAV;AAAA;AAAA;AAAA,gUACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADwB,EAYxB,UAACR,KAAD;AAAA,SACA,CAACA,KAAK,CAACS,SAAP,QACAP,qBADA,YAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAZwB,EAmB1B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACU,OAAP,IACA,CAACV,KAAK,CAACS,SADP,QAEAP,qBAFA,YAGM;AAAA;AAAA,GAHN,CADA;AAAA,CAnB0B,EA4BtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CA5BsB,EAoC1B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACU,OAAN,QACAR,qBADA,2BAEM;AAAA;AAAA,GAFN,EAIQ;AAAA;AAAA;AAAA,GAJR,CADA;AAAA,CApC0B,EA6C1B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACS,SAAN,QACAP,qBADA,YAEM;AAAA;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CA7C0B,EAmD1B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,OAAhB,QACAD,qBADA,yGAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CAnD0B,EAiE1B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACU,OAAN,QACAR,qBADA,sBAEM;AAAA;AAAA,GAFN,EAIQ;AAAA;AAAA,GAJR,CADA;AAAA,CAjE0B,CAAvB;;;AA2EPK,iBAAiB,CAACH,WAAlB,GAAgC,mBAAhC;;AAEO,IAAMO,iBAAiB,GAAGb,0BAAOc,GAAV;AAAA;AAAA;AAAA,mGAAvB;;;AAWPD,iBAAiB,CAACP,WAAlB,GAAgC,mBAAhC;;AAEO,IAAMS,qBAAqB,GAAGf,0BAAOc,GAAV;AAAA;AAAA;AAAA,wEAQ9B,UAACZ,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,OAAhB,QACAD,qBADA,iBADA;AAAA,CAR8B,CAA3B;;;AAePW,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/cjs/components/Nav/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Nav = require("./Nav");
+
+Object.keys(_Nav).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Nav[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Nav[key];
+    }
+  });
+});
+
+var _Item = require("./Item");
+
+Object.keys(_Item).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Item[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Item[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

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

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

package/dist/cjs/components/Overlay/Overlay.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Overlay = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Styles = require("./Styles");
+
+var _excluded = ["className"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Overlay = function Overlay(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledOverlay, _extends({
+    className: (0, _classnames.default)("c-overlay", className)
+  }, rest));
+};
+
+exports.Overlay = Overlay;
+Overlay.displayName = "Overlay";
+//# sourceMappingURL=Overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":["Overlay","className","rest","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAEO,IAAMA,OAA2C,GAAG,SAA9CA,OAA8C,OAGrD;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,IACC;;AACJ,sBACE,6BAAC,qBAAD;AAAe,IAAA,SAAS,EAAE,yBAAW,WAAX,EAAwBD,SAAxB;AAA1B,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/cjs/components/Overlay/Styles.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledOverlay = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var StyledOverlay = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledOverlay",
+  componentId: "sc-flnrpv-0"
+})(["position:fixed;top:0;right:0;bottom:0;left:0;"]);
+
+exports.StyledOverlay = StyledOverlay;
+StyledOverlay.displayName = "StyledOverlay";
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Overlay/Styles.ts"],"names":["StyledOverlay","styled","div","displayName"],"mappings":";;;;;;;AAAA;;;;AAEO,IAAMA,aAAa,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,qDAAnB;;;AAQPF,aAAa,CAACG,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/cjs/components/Overlay/index.js

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

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

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