@activecollab/components 2.0.179 → 2.0.180

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

@@ -1,52 +1,64 @@
-import React, { useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo, Children, cloneElement } from "react";
+import React, { useState, useRef, useCallback, useMemo, Children, cloneElement, useEffect, useLayoutEffect } from "react";
 import classNames from "classnames";
-import debounce from "lodash.debounce";
-import ResizeObserver from "resize-observer-polyfill";
 import { StyledNavListItemMore } from "./Item/Styles";
-import { StyledNav, StyledNavAsMoreTarget, StyledNavAsSelect, StyledNavList } from "./Styles";
+import { StyledNav, StyledNavAsSelect, StyledNavList } from "./Styles";
+import { useResizeObserver } from "../../utils";
 import { ExpandSingle } from "../Expanders/ExpandSingle";
 import { Select } from "../Select/Select";
 export const Nav = _ref => {
+  var _dimensions$width, _childDimensions$widt;
   let {
     children,
     alignment = "left",
     onSelect,
-    onMoreOptionSelect,
     className,
-    role = "bold",
-    moreLabel,
-    type = "inline"
+    role = "bold"
   } = _ref;
   const [active, setActive] = useState(0);
-  const [visibleTabIndexes, setVisibleTabIndexes] = useState([]);
-  const [measuringRender, setMeasuringRender] = useState(false);
-  const [moreVisible, setMoreVisible] = useState(false);
-  const [renderNavAsSelect, setRenderNavAsSelect] = useState(false);
-  const [options, setOptions] = useState([]);
   const [moreOpened, setMoreOpened] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
-  const navItemNames = useMemo(() => children.map(item => item.props.name), [children]);
+  const [type, setType] = useState("inline");
+  const setMoreOpen = useCallback(() => setMoreOpened(true), []);
+  const setMoreClose = useCallback(() => setMoreOpened(false), []);
+  const navItemNames = useMemo(() => {
+    return children ? Children.toArray(children).map(item => {
+      var _item$props;
+      return item == null || (_item$props = item.props) == null ? void 0 : _item$props.name;
+    }) : [];
+  }, [children]);
   const allOptions = useMemo(() => {
-    return navItemNames.map((name, index) => {
+    return navItemNames == null ? void 0 : navItemNames.map((name, index) => {
       return {
         id: index,
         name: name
       };
     });
   }, [navItemNames]);
-
-  // REFS
   const navRef = useRef(null);
-  const navItemsRefs = useRef({});
-  const moreItemRef = useRef(null);
+  const wrapRef = useRef(null);
+  const dimensions = useResizeObserver(wrapRef);
+  const childDimensions = useResizeObserver(navRef);
+  const parentWidth = (_dimensions$width = dimensions == null ? void 0 : dimensions.width) != null ? _dimensions$width : 0;
+  const childWidth = (_childDimensions$widt = childDimensions == null ? void 0 : childDimensions.width) != null ? _childDimensions$widt : 0;
+  const [childrenWidth, setChildrenWidth] = useState(childWidth);
+  useLayoutEffect(() => {
+    if (type === "inline") setChildrenWidth(childWidth);
+  }, [childWidth, type]);
   const onClick = useCallback(e => {
+    if (e.metaKey || e.ctrlKey) {
+      return;
+    }
     if (e.target && e.currentTarget.dataset.index && !e.currentTarget.dataset.disabled) {
       const index = Number(e.currentTarget.dataset.index);
       setActive(index);
       if (onSelect) {
         onSelect(index);
       }
-      setMeasuringRender(true);
+    }
+  }, [onSelect]);
+  const onMoreOptionClick = useCallback(id => {
+    setActive(id);
+    if (onSelect) {
+      onSelect(id);
     }
   }, [onSelect]);
   useMemo(() => {
@@ -56,187 +68,52 @@ export const Nav = _ref => {
       }
     });
   }, [children]);
-  useLayoutEffect(() => {
-    if (type === "inline" && measuringRender && isMounted) {
-      var _navRef$current;
-      const containerWidth = ((_navRef$current = navRef.current) == null ? void 0 : _navRef$current.offsetWidth) || 0;
-      const itemsWidth = Object.values(navItemsRefs.current).reduce((acc, item) => {
-        const 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;
-        const moreItemWidth = ((_moreItemRef$current = moreItemRef.current) == null ? void 0 : _moreItemRef$current.offsetWidth) || 0;
-        const firstItemWidth = navItemsRefs.current[0].offsetWidth;
-
-        // collapse Nav to Select, there is no enough room
-        if (containerWidth < moreItemWidth + firstItemWidth) {
-          setVisibleTabIndexes([]);
-          const options = navItemNames.map((name, index) => {
-            return {
-              id: index,
-              name: name
-            };
-          });
-          setOptions(options);
-          setRenderNavAsSelect(true);
-          setMoreVisible(false);
-          return setMeasuringRender(false);
-        }
-
-        // item(s) + More...
-        const visible = [];
-        let allWidth = 0;
-        Object.values(navItemsRefs.current).forEach((item, index) => {
-          const liItem = item;
-          allWidth += liItem.offsetWidth;
-          if (moreItemWidth + allWidth <= containerWidth) {
-            visible.push(index);
-          }
-        });
-        setVisibleTabIndexes(visible);
-        const options = navItemNames.map((name, index) => {
-          return {
-            id: index,
-            name: name
-          };
-        }).filter(item => !visible.includes(item.id));
-        setOptions(options);
-        setRenderNavAsSelect(false);
-        setMeasuringRender(false);
-      }
-    }
-  }, [children, isMounted, measuringRender, moreVisible, navItemNames, type, visibleTabIndexes]);
-  useEffect(() => {
-    if (type === "inline") {
-      const handleResize = debounce(() => {
-        setMeasuringRender(true);
-      }, 300);
-      window.addEventListener("resize", handleResize);
-      return () => {
-        window.removeEventListener("resize", handleResize);
-      };
-    }
-  }, [type]);
-
-  // we are using observer to solve the problem of the initial rendering
-  useEffect(() => {
-    if (type === "inline" && navRef.current) {
-      const resizeObserver = new ResizeObserver(entries => {
-        for (const entry of entries) {
-          const {
-            contentRect
-          } = entry;
-          const {
-            width = 0
-          } = contentRect;
-          if (width > 0) {
-            setMeasuringRender(true);
-          }
-        }
-      });
-      resizeObserver.observe(navRef.current);
-      setTimeout(() => {
-        if (navRef.current) {
-          resizeObserver.unobserve(navRef.current);
-        }
-      }, 2000);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [type]);
-  useEffect(() => {
-    setMeasuringRender(true);
-    setIsMounted(true);
-  }, []);
-  const visibleTabs = useMemo(() => {
-    const tabs = Children.toArray(children);
-    if (measuringRender || !isMounted) {
-      return tabs;
-    } else {
-      return tabs.filter((child, index) => {
-        return visibleTabIndexes.includes(index);
-      });
-    }
-  }, [children, isMounted, measuringRender, visibleTabIndexes]);
-  const onMoreOptionClick = useCallback(id => {
-    setActive(id);
-    if (onMoreOptionSelect) {
-      onMoreOptionSelect(id);
-    }
-    setMeasuringRender(true);
-  }, [onMoreOptionSelect]);
   const navAsSelect = useMemo(() => {
     return /*#__PURE__*/React.createElement(StyledNavAsSelect, null, /*#__PURE__*/React.createElement("span", null, navItemNames[active]), /*#__PURE__*/React.createElement(ExpandSingle, {
       expanded: moreOpened,
       fill: "currentColor"
     }));
   }, [active, moreOpened, navItemNames]);
-  const setMoreOpen = useCallback(() => setMoreOpened(true), []);
-  const setMoreClose = useCallback(() => setMoreOpened(false), []);
+  useEffect(() => {
+    if (!navRef.current || !wrapRef.current) return;
+    if (childrenWidth >= parentWidth) {
+      setType("dropdown");
+    } else {
+      setType("inline");
+    }
+  }, [childrenWidth, parentWidth]);
+  if (!children) return;
   return /*#__PURE__*/React.createElement(StyledNav, {
     className: classNames("c-nav", className),
     $align: alignment,
-    $role: role
+    $role: role,
+    ref: wrapRef
   }, /*#__PURE__*/React.createElement(StyledNavList, {
     ref: navRef
-  }, type === "inline" && visibleTabs.map((child, index) => {
+  }, type === "inline" && Children.toArray(children).map((child, index) => {
     const element = child;
     return /*#__PURE__*/cloneElement(element, {
       active: index === active,
       role,
-      ref: el => {
-        navItemsRefs.current[index] = el;
-      },
       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, {
+  }), type === "dropdown" ? /*#__PURE__*/React.createElement(StyledNavListItemMore, {
     name: "More",
-    active: visibleTabIndexes.indexOf(active) === -1,
+    active: Array.from(navItemNames.keys()).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,
+    onChange: onMoreOptionClick,
     onSelectOpen: setMoreOpen,
     onSelectClose: setMoreClose
   })) : null));

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

@@ -1 +1 @@
-{"version":3,"file":"Nav.js","names":["React","useState","useRef","useCallback","useEffect","useLayoutEffect","useMemo","Children","cloneElement","classNames","debounce","ResizeObserver","StyledNavListItemMore","StyledNav","StyledNavAsMoreTarget","StyledNavAsSelect","StyledNavList","ExpandSingle","Select","Nav","_ref","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","_navRef$current","containerWidth","current","offsetWidth","itemsWidth","Object","values","reduce","acc","itemEl","Array","from","keys","_moreItemRef$current","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","createElement","expanded","fill","setMoreOpen","setMoreClose","$align","$role","ref","element","el","indexOf","selected","disabledInternalSort","onChange","mode","forceCloseMenu","disableSearch","keepSameOptionsOrder","onSelectOpen","onSelectClose","displayName"],"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\";\n\nimport classNames from \"classnames\";\nimport debounce from \"lodash.debounce\";\nimport ResizeObserver from \"resize-observer-polyfill\";\n\nimport { ItemProps } from \"./Item/Item\";\nimport { StyledNavListItemMore } from \"./Item/Styles\";\nimport {\n  StyledNav,\n  StyledNavAsMoreTarget,\n  StyledNavAsSelect,\n  StyledNavList,\n} from \"./Styles\";\nimport { ISyntheticEvent } from \"../../types\";\nimport { ExpandSingle } from \"../Expanders/ExpandSingle\";\nimport { IOptionItemProps } from \"../Select/Option\";\nimport { Select } from \"../Select/Select\";\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"],"mappings":"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"}
+{"version":3,"file":"Nav.js","names":["React","useState","useRef","useCallback","useMemo","Children","cloneElement","useEffect","useLayoutEffect","classNames","StyledNavListItemMore","StyledNav","StyledNavAsSelect","StyledNavList","useResizeObserver","ExpandSingle","Select","Nav","_ref","_dimensions$width","_childDimensions$widt","children","alignment","onSelect","className","role","active","setActive","moreOpened","setMoreOpened","type","setType","setMoreOpen","setMoreClose","navItemNames","toArray","map","item","_item$props","props","name","allOptions","index","id","navRef","wrapRef","dimensions","childDimensions","parentWidth","width","childWidth","childrenWidth","setChildrenWidth","onClick","e","metaKey","ctrlKey","target","currentTarget","dataset","disabled","Number","onMoreOptionClick","forEach","child","navAsSelect","createElement","expanded","fill","current","$align","$role","ref","element","Array","from","keys","indexOf","selected","disabledInternalSort","options","mode","forceCloseMenu","disableSearch","keepSameOptionsOrder","onChange","onSelectOpen","onSelectClose","displayName"],"sources":["../../../../src/components/Nav/Nav.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  FC,\n  ReactNode,\n  useState,\n  useRef,\n  useCallback,\n  useMemo,\n  Children,\n  cloneElement,\n  useEffect,\n  useLayoutEffect,\n} from \"react\";\n\nimport classNames from \"classnames\";\n\nimport { ItemProps } from \"./Item/Item\";\nimport { StyledNavListItemMore } from \"./Item/Styles\";\nimport { StyledNav, StyledNavAsSelect, StyledNavList } from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\nimport { ExpandSingle } from \"../Expanders/ExpandSingle\";\nimport { Select } from \"../Select/Select\";\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  /** Aligment of nav component. */\n  alignment?: NavAlignType;\n  /** CSS classes. */\n  className?: string;\n  /** Role of nav component. */\n  role?: NavRoleType;\n}\n\nexport const Nav: FC<INavProps> = ({\n  children,\n  alignment = \"left\",\n  onSelect,\n  className,\n  role = \"bold\",\n}) => {\n  const [active, setActive] = useState(0);\n  const [moreOpened, setMoreOpened] = useState(false);\n  const [type, setType] = useState<NavType>(\"inline\");\n\n  const setMoreOpen = useCallback(() => setMoreOpened(true), []);\n  const setMoreClose = useCallback(() => setMoreOpened(false), []);\n\n  const navItemNames = useMemo(() => {\n    return children\n      ? (Children.toArray(children) as ReactElement<ItemProps>[]).map(\n          (item) => item?.props?.name\n        )\n      : [];\n  }, [children]);\n\n  const allOptions = useMemo(() => {\n    return navItemNames?.map((name, index) => {\n      return { id: index, name: name };\n    });\n  }, [navItemNames]);\n\n  const navRef = useRef<HTMLUListElement | null>(null);\n  const wrapRef = useRef<HTMLElement | null>(null);\n  const dimensions = useResizeObserver(wrapRef);\n  const childDimensions = useResizeObserver(navRef);\n\n  const parentWidth = dimensions?.width ?? 0;\n  const childWidth = childDimensions?.width ?? 0;\n\n  const [childrenWidth, setChildrenWidth] = useState(childWidth);\n\n  useLayoutEffect(() => {\n    if (type === \"inline\") setChildrenWidth(childWidth);\n  }, [childWidth, type]);\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLElement, MouseEvent>) => {\n      if (e.metaKey || e.ctrlKey) {\n        return;\n      }\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      }\n    },\n    [onSelect]\n  );\n\n  const onMoreOptionClick = useCallback(\n    (id) => {\n      setActive(id);\n      if (onSelect) {\n        onSelect(id);\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  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  useEffect(() => {\n    if (!navRef.current || !wrapRef.current) return;\n\n    if (childrenWidth >= parentWidth) {\n      setType(\"dropdown\");\n    } else {\n      setType(\"inline\");\n    }\n  }, [childrenWidth, parentWidth]);\n\n  if (!children) return;\n\n  return (\n    <StyledNav\n      className={classNames(\"c-nav\", className)}\n      $align={alignment}\n      $role={role}\n      ref={wrapRef}\n    >\n      <StyledNavList ref={navRef}>\n        {type === \"inline\" &&\n          Children.toArray(children).map((child: ReactNode, index: number) => {\n            const element = child as ReactElement;\n            return cloneElement(element, {\n              active: index === active,\n              role,\n              onClick,\n              \"data-index\": index,\n              \"data-disabled\": element.props.disabled,\n            });\n          })}\n        {type === \"dropdown\" ? (\n          <StyledNavListItemMore\n            name=\"More\"\n            active={Array.from(navItemNames.keys()).indexOf(active) === -1}\n            role={role}\n          >\n            <Select\n              selected={active}\n              target={navAsSelect}\n              disabledInternalSort\n              options={allOptions}\n              type=\"single\"\n              mode=\"normal\"\n              forceCloseMenu\n              disableSearch\n              keepSameOptionsOrder\n              onChange={onMoreOptionClick}\n              onSelectOpen={setMoreOpen}\n              onSelectClose={setMoreClose}\n            />\n          </StyledNavListItemMore>\n        ) : null}\n      </StyledNavList>\n    </StyledNav>\n  );\n};\n\nNav.displayName = \"Nav\";\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/Styles.ts"],"names":[],"mappings":"AAGA,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"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Nav/Styles.ts"],"names":[],"mappings":"AAGA,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,gFA6BrB,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

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 export const StyledNav = styled.nav.withConfig({
   displayName: "Styles__StyledNav",
   componentId: "sc-1khiypw-0"
-})(["", " height:100%;overflow:clip visible;", " ", " ", " ", ""], {
+})(["", " height:100%;width:100%;overflow:clip visible;", " ", " ", " ", ""], {
   "display": "flex"
 }, props => props.$align === "left" && css(["", ""], {
   "justifyContent": "flex-start"

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","StyledNav","nav","withConfig","displayName","componentId","props","$align","$role","StyledNavList","ul","StyledNavListItem","li","$disabled","$active","StyledNavAsSelect","div","StyledNavAsMoreTarget"],"sources":["../../../../src/components/Nav/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\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"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,SAAS,GAAGF,MAAM,CAACG,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mEAC7B;EAAA;AAAQ,CAAC,EAIVC,KAAK,IACNA,KAAK,CAACC,MAAM,KAAK,MAAM,IACvBP,GAAG,WACG;EAAA;AAAiB,CAAC,CACvB,EAEAM,KAAK,IACNA,KAAK,CAACC,MAAM,KAAK,QAAQ,IACzBP,GAAG,WACG;EAAA;AAAkB,CAAC,CACxB,EAEAM,KAAK,IACNA,KAAK,CAACC,MAAM,KAAK,OAAO,IACxBP,GAAG,WACG;EAAA;AAAe,CAAC,CACrB,EAEAM,KAAK,IACNA,KAAK,CAACE,KAAK,KAAK,OAAO,IACvBR,GAAG,kBAEF,CACJ;AAEDC,SAAS,CAACG,WAAW,GAAG,WAAW;AAEnC,OAAO,MAAMK,aAAa,GAAGV,MAAM,CAACW,EAAE,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAChC;EAAA;EAAA;EAAA;EAAA;AAAmC,CAAC,CAEzC;AAEDI,aAAa,CAACL,WAAW,GAAG,eAAe;AAS3C,OAAO,MAAMO,iBAAiB,GAAGZ,MAAM,CAACa,EAAE,CAAAT,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gUACpC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwD,CAAC,EAWxDC,KAAK,IACN,CAACA,KAAK,CAACO,SAAS,IAChBb,GAAG,WACG;EAAA;AAAgB,CAAC,CACtB,EAGFM,KAAK,IACN,CAACA,KAAK,CAACQ,OAAO,IACd,CAACR,KAAK,CAACO,SAAS,IAChBb,GAAG,WACG;EAAA;AAAkB,CAAC,CACxB,EAIG;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwD,CAAC,EAQ5DM,KAAK,IACNA,KAAK,CAACQ,OAAO,IACbd,GAAG,0BACG;EAAA;AAAuB,CAAC,EAEtB;EAAA;EAAA;AAAwB,CAAC,CAEhC,EAEAM,KAAK,IACNA,KAAK,CAACO,SAAS,IACfb,GAAG,WACG;EAAA;EAAA;EAAA;AAAmD,CAAC,CACzD,EAEAM,KAAK,IACNA,KAAK,CAACE,KAAK,KAAK,OAAO,IACvBR,GAAG,wGACG;EAAA;EAAA;AAAW,CAAC,CASjB,EAEAM,KAAK,IACNA,KAAK,CAACQ,OAAO,IACbd,GAAG,qBACG;EAAA;AAAgB,CAAC,EAEf;EAAA;AAAgB,CAAC,CAExB,CACJ;AAEDW,iBAAiB,CAACP,WAAW,GAAG,mBAAmB;AAEnD,OAAO,MAAMW,iBAAiB,GAAGhB,MAAM,CAACiB,GAAG,CAAAb,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mGAS1C;AAEDU,iBAAiB,CAACX,WAAW,GAAG,mBAAmB;AAEnD,OAAO,MAAMa,qBAAqB,GAAGlB,MAAM,CAACiB,GAAG,CAAAb,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEAQ1CC,KAAK,IACNA,KAAK,CAACE,KAAK,KAAK,OAAO,IACvBR,GAAG,gBAEF,CACJ;AAEDiB,qBAAqB,CAACb,WAAW,GAAG,uBAAuB"}
+{"version":3,"file":"Styles.js","names":["styled","css","StyledNav","nav","withConfig","displayName","componentId","props","$align","$role","StyledNavList","ul","StyledNavListItem","li","$disabled","$active","StyledNavAsSelect","div","StyledNavAsMoreTarget"],"sources":["../../../../src/components/Nav/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\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  width: 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"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,SAAS,GAAGF,MAAM,CAACG,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8EAC7B;EAAA;AAAQ,CAAC,EAKVC,KAAK,IACNA,KAAK,CAACC,MAAM,KAAK,MAAM,IACvBP,GAAG,WACG;EAAA;AAAiB,CAAC,CACvB,EAEAM,KAAK,IACNA,KAAK,CAACC,MAAM,KAAK,QAAQ,IACzBP,GAAG,WACG;EAAA;AAAkB,CAAC,CACxB,EAEAM,KAAK,IACNA,KAAK,CAACC,MAAM,KAAK,OAAO,IACxBP,GAAG,WACG;EAAA;AAAe,CAAC,CACrB,EAEAM,KAAK,IACNA,KAAK,CAACE,KAAK,KAAK,OAAO,IACvBR,GAAG,kBAEF,CACJ;AAEDC,SAAS,CAACG,WAAW,GAAG,WAAW;AAEnC,OAAO,MAAMK,aAAa,GAAGV,MAAM,CAACW,EAAE,CAAAP,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,oCAChC;EAAA;EAAA;EAAA;EAAA;AAAmC,CAAC,CAEzC;AAEDI,aAAa,CAACL,WAAW,GAAG,eAAe;AAS3C,OAAO,MAAMO,iBAAiB,GAAGZ,MAAM,CAACa,EAAE,CAAAT,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,gUACpC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwD,CAAC,EAWxDC,KAAK,IACN,CAACA,KAAK,CAACO,SAAS,IAChBb,GAAG,WACG;EAAA;AAAgB,CAAC,CACtB,EAGFM,KAAK,IACN,CAACA,KAAK,CAACQ,OAAO,IACd,CAACR,KAAK,CAACO,SAAS,IAChBb,GAAG,WACG;EAAA;AAAkB,CAAC,CACxB,EAIG;EAAA;EAAA;EAAA;EAAA;EAAA;AAAwD,CAAC,EAQ5DM,KAAK,IACNA,KAAK,CAACQ,OAAO,IACbd,GAAG,0BACG;EAAA;AAAuB,CAAC,EAEtB;EAAA;EAAA;AAAwB,CAAC,CAEhC,EAEAM,KAAK,IACNA,KAAK,CAACO,SAAS,IACfb,GAAG,WACG;EAAA;EAAA;EAAA;AAAmD,CAAC,CACzD,EAEAM,KAAK,IACNA,KAAK,CAACE,KAAK,KAAK,OAAO,IACvBR,GAAG,wGACG;EAAA;EAAA;AAAW,CAAC,CASjB,EAEAM,KAAK,IACNA,KAAK,CAACQ,OAAO,IACbd,GAAG,qBACG;EAAA;AAAgB,CAAC,EAEf;EAAA;AAAgB,CAAC,CAExB,CACJ;AAEDW,iBAAiB,CAACP,WAAW,GAAG,mBAAmB;AAEnD,OAAO,MAAMW,iBAAiB,GAAGhB,MAAM,CAACiB,GAAG,CAAAb,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mGAS1C;AAEDU,iBAAiB,CAACX,WAAW,GAAG,mBAAmB;AAEnD,OAAO,MAAMa,qBAAqB,GAAGlB,MAAM,CAACiB,GAAG,CAAAb,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wEAQ1CC,KAAK,IACNA,KAAK,CAACE,KAAK,KAAK,OAAO,IACvBR,GAAG,gBAEF,CACJ;AAEDiB,qBAAqB,CAACb,WAAW,GAAG,uBAAuB"}