@activecollab/components 0.1.537 → 1.0.1

package/dist/esm/components/Nav/Nav.d.ts

@@ -1,22 +1,15 @@
-import React, { ReactElement, ReactChild, FC } from "react";
-import "./Nav.css";
-interface IItemProps {
-    children: ReactChild | string;
-    active?: boolean;
-    disabled?: boolean;
-    className?: string;
-    name: string;
-}
-export declare const Item: React.ForwardRefExoticComponent<IItemProps & React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
-declare type ItemType = ReactElement<IItemProps>;
+import { ReactElement, FC } from "react";
+import { ItemProps } from "./Item/Item";
 declare type NavType = "inline" | "dropdown";
-interface INavProps {
-    children: ItemType[];
+export declare type NavAlignType = "left" | "center" | "right";
+export declare type NavRoleType = "bold" | "light";
+export interface INavProps {
+    children: ReactElement<ItemProps>[];
     onSelect?: (index: number) => void;
     onMoreOptionSelect?: (index: number) => void;
-    alignment?: "left" | "center" | "right";
+    alignment?: NavAlignType;
     className?: string;
-    role?: "bold" | "light";
+    role?: NavRoleType;
     moreLabel?: string;
     type?: NavType;
 }

package/dist/esm/components/Nav/Nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/Nav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,YAAY,EACZ,UAAU,EACV,EAAE,EAYH,MAAM,OAAO,CAAC;AAQf,OAAO,WAAW,CAAC;AAEnB,UAAU,UAAU;IAElB,QAAQ,EAAE,UAAU,GAAG,MAAM,CAAC;IAE9B,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,IAAI,0HAwBhB,CAAC;AAIF,aAAK,QAAQ,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC;AACzC,aAAK,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErC,UAAU,SAAS;IACjB,QAAQ,EAAE,QAAQ,EAAE,CAAC;IAErB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAExC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAExB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,SAAS,CA+R7B,CAAC"}
+{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/Nav.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,YAAY,EACZ,EAAE,EAUH,MAAM,OAAO,CAAC;AAcf,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,aAAK,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AACrC,oBAAY,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvD,oBAAY,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC;IAEpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C,SAAS,CAAC,EAAE,YAAY,CAAC;IAEzB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,GAAG,EAAE,EAAE,CAAC,SAAS,CA6R7B,CAAC"}

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

@@ -0,0 +1,327 @@
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
+import { useState, useMemo, useRef, useCallback, Children, useLayoutEffect, useEffect, cloneElement } from 'react';
+import classnames from 'classnames';
+import ResizeObserver from 'resize-observer-polyfill';
+import debounce from 'lodash.debounce';
+import { Select } from '../Select/Select.js';
+import { StyledNavAsSelect, StyledNav, StyledNavList, StyledNavAsMoreTarget } from './Styles.js';
+import { StyledNavListItemMore } from './Item/Styles.js';
+import { ExpandSingle } from '../Expanders/ExpandSingle.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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(_e) { throw _e; }, 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(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+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; }
+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),
+      _useState2 = _slicedToArray(_useState, 2),
+      active = _useState2[0],
+      setActive = _useState2[1];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visibleTabIndexes = _useState4[0],
+      setVisibleTabIndexes = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      measuringRender = _useState6[0],
+      setMeasuringRender = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      moreVisible = _useState8[0],
+      setMoreVisible = _useState8[1];
+
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      renderNavAsSelect = _useState10[0],
+      setRenderNavAsSelect = _useState10[1];
+
+  var _useState11 = useState([]),
+      _useState12 = _slicedToArray(_useState11, 2),
+      options = _useState12[0],
+      setOptions = _useState12[1];
+
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      moreOpened = _useState14[0],
+      setMoreOpened = _useState14[1];
+
+  var _useState15 = useState(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      isMounted = _useState16[0],
+      setIsMounted = _useState16[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 || _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]);
+  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) {
+        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]);
+  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__*/jsxs(StyledNavAsSelect, {
+      children: [/*#__PURE__*/jsx("span", {
+        children: navItemNames[active]
+      }), /*#__PURE__*/jsx(ExpandSingle, {
+        expanded: moreOpened,
+        fill: "currentColor"
+      })]
+    });
+  }, [active, moreOpened, navItemNames]);
+  var setMoreOpen = useCallback(function () {
+    return setMoreOpened(true);
+  }, []);
+  var setMoreClose = useCallback(function () {
+    return setMoreOpened(false);
+  }, []);
+  return /*#__PURE__*/jsx(StyledNav, {
+    className: classnames("c-nav", className),
+    $align: alignment,
+    $role: role,
+    children: /*#__PURE__*/jsxs(StyledNavList, {
+      ref: navRef,
+      children: [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__*/jsx(StyledNavListItemMore, {
+        ref: moreItemRef,
+        name: "More",
+        active: visibleTabIndexes.indexOf(active) === -1,
+        role: role,
+        children: /*#__PURE__*/jsx(Select, {
+          selected: active,
+          target: /*#__PURE__*/jsx(StyledNavAsMoreTarget, {
+            $role: role,
+            children: 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__*/jsx(StyledNavListItemMore, {
+        name: "More",
+        active: visibleTabIndexes.indexOf(active) === -1,
+        role: role,
+        children: /*#__PURE__*/jsx(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";
+
+export { Nav };
+//# sourceMappingURL=Nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Nav.js","sources":["../../../../src/components/Nav/Nav.tsx"],"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"],"names":["Nav","children","alignment","onSelect","onMoreOptionSelect","className","role","moreLabel","type","useState","active","setActive","visibleTabIndexes","setVisibleTabIndexes","measuringRender","setMeasuringRender","moreVisible","setMoreVisible","renderNavAsSelect","setRenderNavAsSelect","options","setOptions","moreOpened","setMoreOpened","isMounted","setIsMounted","navItemNames","useMemo","map","item","props","name","allOptions","index","id","navRef","useRef","navItemsRefs","moreItemRef","onClick","useCallback","e","target","currentTarget","dataset","disabled","Number","Children","forEach","child","useLayoutEffect","containerWidth","current","offsetWidth","itemsWidth","Object","values","reduce","acc","itemEl","Array","from","keys","moreItemWidth","firstItemWidth","visible","allWidth","liItem","push","filter","includes","useEffect","handleResize","debounce","window","addEventListener","removeEventListener","resizeObserver","ResizeObserver","entries","entry","contentRect","width","observe","setTimeout","unobserve","disconnect","visibleTabs","tabs","toArray","onMoreOptionClick","navAsSelect","_jsxs","_jsx","setMoreOpen","setMoreClose","classNames","element","cloneElement","ref","el","indexOf","displayName"],"mappings":"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"}

package/dist/esm/components/Nav/Styles.d.ts

@@ -0,0 +1,20 @@
+import { NavAlignType, NavRoleType } from "./Nav";
+interface StyledNavProps {
+    $align?: NavAlignType;
+    $role?: NavRoleType;
+}
+export declare const StyledNav: import("styled-components").StyledComponent<"nav", any, StyledNavProps, never>;
+export declare const StyledNavList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+interface StyledNavListItemProps {
+    $active?: boolean;
+    $disabled?: boolean;
+    $role?: NavRoleType;
+    $asMore?: boolean;
+}
+export declare const StyledNavListItem: import("styled-components").StyledComponent<"li", any, StyledNavListItemProps, never>;
+export declare const StyledNavAsSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledNavAsMoreTarget: import("styled-components").StyledComponent<"div", any, {
+    $role?: NavRoleType | undefined;
+}, never>;
+export {};
+//# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Nav/Styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAElD,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,gFA4BrB,CAAC;AAIF,eAAO,MAAM,aAAa,mEAGzB,CAAC;AAIF,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,uFAyE7B,CAAC;AAIF,eAAO,MAAM,iBAAiB,oEAS7B,CAAC;AAIF,eAAO,MAAM,qBAAqB;;SAajC,CAAC"}

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

@@ -0,0 +1,97 @@
+import styled, { css } from 'styled-components';
+
+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";
+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";
+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";
+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";
+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";
+
+export { StyledNav, StyledNavAsMoreTarget, StyledNavAsSelect, StyledNavList, StyledNavListItem };
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","sources":["../../../../src/components/Nav/Styles.ts"],"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"],"names":["StyledNav","styled","nav","props","$align","css","$role","displayName","StyledNavList","ul","StyledNavListItem","li","$disabled","$active","StyledNavAsSelect","div","StyledNavAsMoreTarget"],"mappings":";;IASaA,SAAS,GAAGC,MAAM,CAACC,GAAV;AAAA;AAAA;AAAA,mEAChB;AAAA;AAAA,CADgB,EAKlB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,KAAiB,MAAjB,IACAC,GADA,WAEM;AAAA;AAAA,GAFN,CADA;AAAA,CALkB,EAWlB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,KAAiB,QAAjB,IACAC,GADA,WAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAXkB,EAiBlB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,KAAiB,OAAjB,IACAC,GADA,WAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAjBkB,EAuBlB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,OAAhB,IACAD,GADA,kBADA;AAAA,CAvBkB;AA8BtBL,SAAS,CAACO,WAAV,GAAwB,WAAxB;IAEaC,aAAa,GAAGP,MAAM,CAACQ,EAAV;AAAA;AAAA;AAAA,oCACpB;AAAA;AAAA;AAAA;AAAA;AAAA,CADoB;AAK1BD,aAAa,CAACD,WAAd,GAA4B,eAA5B;IASaG,iBAAiB,GAAGT,MAAM,CAACU,EAAV;AAAA;AAAA;AAAA,gUACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADwB,EAYxB,UAACR,KAAD;AAAA,SACA,CAACA,KAAK,CAACS,SAAP,IACAP,GADA,WAEM;AAAA;AAAA,GAFN,CADA;AAAA,CAZwB,EAmB1B,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACU,OAAP,IACA,CAACV,KAAK,CAACS,SADP,IAEAP,GAFA,WAGM;AAAA;AAAA,GAHN,CADA;AAAA,CAnB0B,EA4BtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CA5BsB,EAoC1B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACU,OAAN,IACAR,GADA,0BAEM;AAAA;AAAA,GAFN,EAIQ;AAAA;AAAA;AAAA,GAJR,CADA;AAAA,CApC0B,EA6C1B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACS,SAAN,IACAP,GADA,WAEM;AAAA;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CA7C0B,EAmD1B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,OAAhB,IACAD,GADA,wGAEM;AAAA;AAAA;AAAA,GAFN,CADA;AAAA,CAnD0B,EAiE1B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACU,OAAN,IACAR,GADA,qBAEM;AAAA;AAAA,GAFN,EAIQ;AAAA;AAAA,GAJR,CADA;AAAA,CAjE0B;AA2E9BK,iBAAiB,CAACH,WAAlB,GAAgC,mBAAhC;IAEaO,iBAAiB,GAAGb,MAAM,CAACc,GAAV;AAAA;AAAA;AAAA;AAW9BD,iBAAiB,CAACP,WAAlB,GAAgC,mBAAhC;IAEaS,qBAAqB,GAAGf,MAAM,CAACc,GAAV;AAAA;AAAA;AAAA,wEAQ9B,UAACZ,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,OAAhB,IACAD,GADA,gBADA;AAAA,CAR8B;AAelCW,qBAAqB,CAACT,WAAtB,GAAoC,uBAApC;;;;"}

package/dist/esm/components/Nav/index.d.ts

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

package/dist/esm/components/Nav/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC"}

package/dist/esm/components/Overlay/Overlay.d.ts

@@ -1,4 +1,3 @@
 import { FC, HTMLAttributes } from "react";
-import "./Overlay.css";
 export declare const Overlay: FC<HTMLAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Overlay.d.ts.map

package/dist/esm/components/Overlay/Overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,eAAe,CAAC;AAGvB,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,CAKtD,CAAC"}
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIlD,eAAO,MAAM,OAAO,EAAE,EAAE,CAAC,cAAc,CAAC,cAAc,CAAC,CAOtD,CAAC"}

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

@@ -0,0 +1,24 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import classnames from 'classnames';
+import { StyledOverlay } from './Styles.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["className"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var Overlay = function Overlay(_ref) {
+  var className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(StyledOverlay, _objectSpread({
+    className: classnames("c-overlay", className)
+  }, rest));
+};
+Overlay.displayName = "Overlay";
+
+export { Overlay };
+//# sourceMappingURL=Overlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sources":["../../../../src/components/Overlay/Overlay.tsx"],"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"],"names":["Overlay","className","rest","_jsx","classnames","displayName"],"mappings":";;;;;;;;;;;;IAIaA,OAA2C,GAAG,SAA9CA,OAA8C,OAGrD;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,IACC;;AACJ,sBACEC,IAAC,aAAD;AAAe,IAAA,SAAS,EAAEC,UAAU,CAAC,WAAD,EAAcH,SAAd;AAApC,KAAkEC,IAAlE,EADF;AAGD;AAEDF,OAAO,CAACK,WAAR,GAAsB,SAAtB;;;;"}

package/dist/esm/components/Overlay/Styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+//# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Overlay/Styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Overlay/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,oEAMzB,CAAC"}

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+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";
+
+export { StyledOverlay };
+//# sourceMappingURL=Styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.js","sources":["../../../../src/components/Overlay/Styles.ts"],"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"],"names":["StyledOverlay","styled","div","displayName"],"mappings":";;IAEaA,aAAa,GAAGC,MAAM,CAACC,GAAV;AAAA;AAAA;AAAA;AAQ1BF,aAAa,CAACG,WAAd,GAA4B,eAA5B;;;;"}

package/dist/esm/components/Paper/Paper.d.ts

@@ -1,6 +1,5 @@
 import React, { ReactNode, RefObject } from "react";
-import "./Paper.css";
-interface IPaperProps {
+export interface IPaperProps {
     children: ReactNode;
     className?: string;
     innerRef?: RefObject<HTMLDivElement>;
@@ -10,5 +9,4 @@ interface IPaperProps {
     useOptimizedShadow?: boolean;
 }
 export declare const Paper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & IPaperProps & React.RefAttributes<HTMLDivElement>>;
-export {};
 //# sourceMappingURL=Paper.d.ts.map

package/dist/esm/components/Paper/Paper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Paper.d.ts","sourceRoot":"","sources":["../../../../src/components/Paper/Paper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,SAAS,EAET,SAAS,EACV,MAAM,OAAO,CAAC;AAEf,OAAO,aAAa,CAAC;AAErB,UAAU,WAAW;IAEnB,QAAQ,EAAE,SAAS,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAErC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IAEzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAKD,eAAO,MAAM,KAAK,2HAyCjB,CAAC"}
+{"version":3,"file":"Paper.d.ts","sourceRoot":"","sources":["../../../../src/components/Paper/Paper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAGZ,SAAS,EAET,SAAS,EACV,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,WAAW;IAE1B,QAAQ,EAAE,SAAS,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAErC,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;IAEzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAKD,eAAO,MAAM,KAAK,2HAqCjB,CAAC"}