@ssa-ui-kit/core 2.6.0 → 2.7.0

package/dist/index.js

@@ -82,6 +82,9 @@ __webpack_require__.d(__webpack_exports__, {
   Checkbox: () => (/* reexport */ Checkbox_Checkbox),
   CollapsibleNavBar: () => (/* reexport */ CollapsibleNavBar),
   CollapsibleNavBarContext: () => (/* reexport */ CollapsibleNavBarContext),
+  CollapsibleNavBarCustomIconSVG: () => (/* reexport */ CollapsibleNavBarCustomIconSVG),
+  CollapsibleNavBarItemContext: () => (/* reexport */ CollapsibleNavBarItemContext),
+  CollapsibleNavBarItemProvider: () => (/* reexport */ CollapsibleNavBarItemProvider),
   CollapsibleNavBarProvider: () => (/* reexport */ CollapsibleNavBarProvider),
   ColorPicker: () => (/* reexport */ ColorPicker_ColorPicker),
   DatePicker: () => (/* reexport */ DatePicker),
@@ -236,6 +239,7 @@ __webpack_require__.d(__webpack_exports__, {
   styles: () => (/* reexport */ Tooltip_styles_namespaceObject),
   useAccordionGroupContext: () => (/* reexport */ useAccordionGroupContext),
   useCollapsibleNavBarContext: () => (/* reexport */ useCollapsibleNavBarContext),
+  useCollapsibleNavBarItemContext: () => (/* reexport */ useCollapsibleNavBarItemContext),
   useDrawer: () => (/* reexport */ useDrawer),
   useFieldContext: () => (/* reexport */ useFieldContext),
   useFilterMultiSelect: () => (/* reexport */ useFilterMultiSelect),
@@ -8013,13 +8017,9 @@ const CardList = ({
 
 ;// ./src/components/CollapsibleNavBar/styles.ts
 
-const AccordionTitleWrapper = navBarTheme => theme => /*#__PURE__*/(0,react_namespaceObject.css)("cursor:pointer;align-items:center;", theme.mediaQueries.md, "{display:flex;justify-content:center;}& div.icon-wrapper{width:100%;gap:0;}& div.icon-wrapper:not(.active):hover>button svg path,& div.icon-wrapper.active>button svg path{stroke:", navBarTheme === 'default' ? '#fff' : theme.colors.greyDarker80, ";fill:none;}& .trigger-icon{height:22px;}&:has(+ div > a.active){& div:nth-of-type(2) button{font-weight:900;}}" + ( true ? "" : 0),  true ? "" : 0);
-const styles_AccordionTitle = navBarTheme => theme => /*#__PURE__*/(0,react_namespaceObject.css)("padding:0 14px 0 20px;color:", navBarTheme === 'default' ? theme.colors.white : theme.colors.greyDarker, ";svg path{stroke:", navBarTheme === 'light' && theme.colors.greyDropdownFocused, ";}", theme.mediaQueries.md, "{display:none;}" + ( true ? "" : 0),  true ? "" : 0);
-const styles_AccordionContent = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;align-items:flex-start;width:100%;padding-left:45px;overflow:hidden;perspective:1px;", theme.mediaQueries.md, "{display:none;}", theme.mediaQueries.lg, "{display:none;}" + ( true ? "" : 0),  true ? "" : 0);
-const AccordionContentPopover = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;", theme.mediaQueries.md, "{display:flex;}", theme.mediaQueries.lg, "{display:flex;}" + ( true ? "" : 0),  true ? "" : 0);
 const LogoWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;", theme.mediaQueries.md, "{justify-content:center;}", theme.mediaQueries.lg, "{justify-content:flex-start;}" + ( true ? "" : 0),  true ? "" : 0);
 const ContentToggle = (navBarTheme, isChecked) => theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:none;position:absolute;cursor:pointer;right:-17px;width:34px;height:34px;background:", navBarTheme === 'default' ? theme.colors.greyLighter : theme.colors.greyFocused, ";border-radius:12px;justify-content:center;align-items:center;& input{display:none;}& svg{cursor:pointer;}", theme.mediaQueries.lg, "{display:flex;}", theme.mediaQueries.xlg, "{display:flex;right:", isChecked ? '-32px' : '-17px', ";}" + ( true ? "" : 0),  true ? "" : 0);
-;// ./src/components/CollapsibleNavBar/CollapsibleNavBarBase.ts
+;// ./src/components/CollapsibleNavBar/components/CollapsibleNavBarBase.ts
 
 
 
@@ -8040,7 +8040,7 @@ const backgroundByTheme = (theme, navBarTheme) => /*#__PURE__*/(0,react_namespac
         #e1e4ea 87.68%
       );`, ";" + ( true ? "" : 0),  true ? "" : 0);
 const CollapsibleNavBarBase = /*#__PURE__*/base_default()(NavBar_NavBarBase,  true ? {
-  target: "eat377q0"
+  target: "e1rgi4fo0"
 } : 0)("padding:15px 0 0 15px;position:absolute;& li{", popupIconsToggle(false), ";}&.opened{", ({
   theme,
   ...rest
@@ -8061,41 +8061,17 @@ const CollapsibleNavBarBase = /*#__PURE__*/base_default()(NavBar_NavBarBase,  tr
 }) => theme.mediaQueries.md, "{width:85px;padding:0;position:static;z-index:0;min-width:unset;& li{", staticIconsToggle(false), " ", popupIconsToggle(true), ";}}", ({
   theme
 }) => theme.mediaQueries.lg, "{&.opened{min-width:240px;width:291px;&>div:nth-of-type(2){width:240px;padding-left:29.5px;& img{margin-left:0;}& li{justify-content:flex-start;& button{display:flex;}", staticIconsToggle(true), " ", popupIconsToggle(false), " &>a>span{display:block;}& div>div>div:nth-of-type(2){display:flex;}}}}}" + ( true ? "" : 0));
-/* harmony default export */ const CollapsibleNavBar_CollapsibleNavBarBase = (CollapsibleNavBarBase);
-;// ./src/components/CollapsibleNavBar/CollapsibleNavBarWrapper.ts
-
-
-const CollapsibleNavBarWrapper = /*#__PURE__*/base_default()(NavBar_NavBarWrapper,  true ? {
-  target: "e17jwp1e0"
-} : 0)("transform:none;transition:unset;position:static;display:none;width:100%;", ({
-  theme
-}) => theme.mediaQueries.md, "{background:", ({
-  navBarTheme
-}) => navBarTheme === 'light' && '#F4F5F9', ";display:flex;flex-direction:column;align-items:center;height:100%;min-height:100vh;width:85px;border-radius:0;padding-top:35px;}" + ( true ? "" : 0));
-/* harmony default export */ const CollapsibleNavBar_CollapsibleNavBarWrapper = (CollapsibleNavBarWrapper);
-;// ./src/components/CollapsibleNavBar/CollapsibleNavBarList.ts
-
-
-const CollapsibleNavBarList = /*#__PURE__*/base_default()(NavBar_NavBarList,  true ? {
-  target: "em9v5k50"
-} : 0)("height:auto;padding:0 0 0 15px;margin:14px 0 0 0;", ({
-  theme
-}) => theme.mediaQueries.md, "{margin-top:90px;width:100%;padding:0;}", ({
-  theme
-}) => theme.mediaQueries.lg, "{margin-top:84px;}" + ( true ? "" : 0));
-/* harmony default export */ const CollapsibleNavBar_CollapsibleNavBarList = (CollapsibleNavBarList);
-;// ./src/components/CollapsibleNavBar/CollapsibleNavToggleWrapper.ts
+;// ./src/components/CollapsibleNavBar/components/CollapsibleNavToggleWrapper.ts
 
 
 const CollapsibleNavToggleWrapper = /*#__PURE__*/base_default()(NavBar_NavToggleWrapper,  true ? {
-  target: "e1i07a9c0"
+  target: "ehcphl10"
 } : 0)("border-radius:50%;background:", ({
   theme
 }) => theme.colors.greyLighter, ";height:40px;width:40px;", ({
   theme
 }) => theme.mediaQueries.md, "{display:none;}" + ( true ? "" : 0));
-/* harmony default export */ const CollapsibleNavBar_CollapsibleNavToggleWrapper = (CollapsibleNavToggleWrapper);
-;// ./src/components/CollapsibleNavBar/CollapsibleNavToggle.tsx
+;// ./src/components/CollapsibleNavBar/components/CollapsibleNavToggle.tsx
 function CollapsibleNavToggle_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /* eslint-disable jsx-a11y/label-has-associated-control */
 
@@ -8110,7 +8086,7 @@ const CollapsibleNavToggle = ({
   id
 }) => {
   return (0,jsx_runtime_namespaceObject.jsx)(external_react_namespaceObject.Fragment, {
-    children: (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBar_CollapsibleNavToggleWrapper, {
+    children: (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavToggleWrapper, {
       children: (0,jsx_runtime_namespaceObject.jsxs)("label", {
         htmlFor: id,
         css: CollapsibleNavToggle_ref,
@@ -8119,7 +8095,16 @@ const CollapsibleNavToggle = ({
     })
   });
 };
-/* harmony default export */ const CollapsibleNavBar_CollapsibleNavToggle = (CollapsibleNavToggle);
+;// ./src/components/CollapsibleNavBar/components/CollapsibleNavBarWrapper.ts
+
+
+const CollapsibleNavBarWrapper = /*#__PURE__*/base_default()(NavBar_NavBarWrapper,  true ? {
+  target: "e3hlx7p0"
+} : 0)("transform:none;transition:unset;position:static;display:none;width:100%;", ({
+  theme
+}) => theme.mediaQueries.md, "{background:", ({
+  navBarTheme
+}) => navBarTheme === 'light' && '#F4F5F9', ";display:flex;flex-direction:column;align-items:center;height:100%;min-height:100vh;width:85px;border-radius:0;padding-top:35px;}" + ( true ? "" : 0));
 ;// ./src/components/CollapsibleNavBar/CollapsibleNavBarContext.tsx
 
 
@@ -8140,7 +8125,7 @@ const CollapsibleNavBarProvider = ({
 const useCollapsibleNavBarContext = () => {
   return (0,external_react_namespaceObject.useContext)(CollapsibleNavBarContext);
 };
-;// ./src/components/CollapsibleNavBar/CollapsibleNavContentToggle.tsx
+;// ./src/components/CollapsibleNavBar/components/CollapsibleNavContentToggle.tsx
 function CollapsibleNavContentToggle_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
@@ -8172,20 +8157,35 @@ const NavContentToggle = ({
     })
   });
 };
-;// ./src/components/CollapsibleNavBar/CollapsibleNavBarItem.ts
+;// ./src/components/CollapsibleNavBar/components/CollapsibleNavBarList.ts
+
+
+const CollapsibleNavBarList = /*#__PURE__*/base_default()(NavBar_NavBarList,  true ? {
+  target: "evfcnpp0"
+} : 0)("height:auto;padding:0 0 0 15px;margin:14px 0 0 0;", ({
+  theme
+}) => theme.mediaQueries.md, "{margin-top:90px;width:100%;padding:0;}", ({
+  theme
+}) => theme.mediaQueries.lg, "{margin-top:84px;}" + ( true ? "" : 0));
+;// ./src/components/CollapsibleNavBar/components/ItemWithSubmenu/CollapsibleNavBarItem.ts
 
 
 const CollapsibleNavBarItem = /*#__PURE__*/base_default()(NavBar_NavBarItem,  true ? {
-  target: "e1m4ul8g0"
-} : 0)("align-items:flex-start;justify-content:flex-start;height:auto;min-height:24px;padding:12px 0;&:first-of-type{padding-top:0;}&:last-of-type{padding-bottom:0;}width:100%;&>a{height:26px;}", ({
+  target: "e1alsxm0"
+} : 0)("align-items:flex-start;justify-content:flex-start;width:100%;height:auto;min-height:24px;padding:12px 0;&:first-of-type{padding-top:0;}&:last-of-type{padding-bottom:0;}&>a{height:26px;}", ({
   theme
 }) => theme.mediaQueries.md, "{justify-content:center;padding:20px 0;width:100%;}" + ( true ? "" : 0));
-/* harmony default export */ const CollapsibleNavBar_CollapsibleNavBarItem = (CollapsibleNavBarItem);
-;// ./src/components/CollapsibleNavBar/CollapsibleNavBarLink.ts
+;// ./src/components/CollapsibleNavBar/components/ItemWithSubmenu/styles.ts
+
+const AccordionTitleWrapper = navBarTheme => theme => /*#__PURE__*/(0,react_namespaceObject.css)("cursor:pointer;align-items:center;", theme.mediaQueries.md, "{display:flex;justify-content:center;}& div.icon-wrapper{width:100%;gap:0;}& div.icon-wrapper:not(.active):hover>button svg path,& div.icon-wrapper.active>button svg path{stroke:", navBarTheme === 'default' ? '#fff' : theme.colors.greyDarker80, ";fill:none;}& .trigger-icon{height:22px;}&:has(+ div > a.active){& div:nth-of-type(2) button{font-weight:900;}}" + ( true ? "" : 0),  true ? "" : 0);
+const styles_AccordionTitle = navBarTheme => theme => /*#__PURE__*/(0,react_namespaceObject.css)("padding:0 14px 0 20px;color:", navBarTheme === 'default' ? theme.colors.white : theme.colors.greyDarker, ";svg path{stroke:", navBarTheme === 'light' && theme.colors.greyDropdownFocused, ";}", theme.mediaQueries.md, "{display:none;}" + ( true ? "" : 0),  true ? "" : 0);
+const styles_AccordionContent = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;align-items:flex-start;width:100%;padding-left:45px;overflow:hidden;perspective:1px;", theme.mediaQueries.md, "{display:none;}", theme.mediaQueries.lg, "{display:none;}" + ( true ? "" : 0),  true ? "" : 0);
+const AccordionContentPopover = theme => /*#__PURE__*/(0,react_namespaceObject.css)("display:flex;", theme.mediaQueries.md, "{display:flex;}", theme.mediaQueries.lg, "{display:flex;}" + ( true ? "" : 0),  true ? "" : 0);
+;// ./src/components/CollapsibleNavBar/components/CollapsibleNavBarLink.ts
 
 
 const CollapsibleNavBarLink = /*#__PURE__*/base_default()(external_react_router_dom_namespaceObject.NavLink,  true ? {
-  target: "ekeqo5r0"
+  target: "e1sy8kzd0"
 } : 0)("cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:20px;color:", ({
   theme,
   navbartheme
@@ -8204,54 +8204,62 @@ const CollapsibleNavBarLink = /*#__PURE__*/base_default()(external_react_router_
   theme,
   navbartheme,
   ...rest
-}) => navbartheme === 'light' && !rest['data-customicon'] && theme.colors.greyDropdownFocused, ";}}&.active{cursor:default;backdrop-filter:blur(0);font-weight:900;filter:", ({
-  navbartheme,
+}) => navbartheme === 'light' && !rest['data-customicon'] && theme.colors.greyDropdownFocused, ";}}&.active,&:not(.active):hover{backdrop-filter:blur(0);filter:", ({
   theme
-}) => navbartheme === 'default' ? `drop-shadow(-4px 4px 14px ${theme.colors.white})` : `drop-shadow(-4px 4px 14px ${theme.colors.greyDropdownFocused})`, ";color:", ({
+}) => `drop-shadow(-4px 4px 14px ${theme.colors.white})`, ";color:", ({
   theme,
   navbartheme
 }) => navbartheme === 'default' ? theme.colors.white80 : theme.colors.greyDarker80, ";&>span{font-weight:900;color:", ({
   theme,
   navbartheme
-}) => navbartheme === 'default' ? theme.colors.white80 : theme.colors.greyDarker80, ";}div>svg{filter:drop-shadow(-4px 4px 14px ", ({
-  theme
-}) => theme.colors.white, ");& path{fill:", ({
+}) => navbartheme === 'default' ? theme.colors.white80 : theme.colors.greyDarker80, ";}div>svg{& path{fill:", ({
   theme,
   navbartheme,
   ...rest
-}) => !rest['data-customicon'] && navbartheme === 'default' ? theme.colors.white : theme.colors.greyDarker, ";}& circle{stroke:", ({
+}) => !rest['data-customicon'] && (navbartheme === 'default' ? theme.colors.white : theme.colors.greyDarker), ";}& circle{stroke:", ({
   theme,
   navbartheme,
   ...rest
-}) => !rest['data-customicon'] && navbartheme === 'default' ? theme.colors.white : theme.colors.greyDarker, ";}}}&:not(.active):hover{backdrop-filter:blur(0);filter:", ({
+}) => !rest['data-customicon'] && (navbartheme === 'default' ? theme.colors.white : theme.colors.greyDarker), ";}}}&.active{cursor:default;font-weight:900;filter:", ({
+  navbartheme,
   theme
-}) => `drop-shadow(-4px 4px 14px ${theme.colors.white})`, ";color:", ({
-  theme,
-  navbartheme
-}) => navbartheme === 'default' ? theme.colors.white : theme.colors.greyDarker, ";div>svg{filter:", ({
+}) => navbartheme === 'default' ? `drop-shadow(-4px 4px 14px ${theme.colors.white})` : `drop-shadow(-4px 4px 14px ${theme.colors.greyDropdownFocused})`, ";div>svg{filter:drop-shadow(-4px 4px 14px ", ({
   theme
-}) => `drop-shadow(-4px 4px 14px ${theme.colors.white})`, ";& path{fill:", ({
-  theme,
-  navbartheme
-}) => navbartheme === 'default' ? theme.colors.white : theme.colors.greyDarker, ";}& circle{stroke:", ({
-  theme,
-  navbartheme
-}) => navbartheme === 'default' ? theme.colors.white : theme.colors.greyDarker, ";}}}" + ( true ? "" : 0));
-/* harmony default export */ const CollapsibleNavBar_CollapsibleNavBarLink = (CollapsibleNavBarLink);
-;// ./src/components/CollapsibleNavBar/NavBarAccordionContent.tsx
+}) => theme.colors.white, ");}}" + ( true ? "" : 0));
+;// ./src/components/CollapsibleNavBar/components/ItemWithSubmenu/AccordionContentItem.tsx
 
-function NavBarAccordionContent_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function AccordionContentItem_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
 
-
-
-const NavBarAccordionContent_Link = /*#__PURE__*/base_default()(CollapsibleNavBar_CollapsibleNavBarLink,  true ? {
-  target: "e1gb8tyr0"
+const AccordionContentItem_Link = /*#__PURE__*/base_default()(CollapsibleNavBarLink,  true ? {
+  target: "e1yzdzuu0"
 } : 0)( true ? {
   name: "17eotse",
   styles: "width:100%;padding:4.8px 0;&:first-of-type{padding-top:15px;}&:not(.active):hover{filter:initial;}"
 } : 0);
+const NavBarAccordionContentItem = ({
+  prefix = '',
+  subMenuItem,
+  onClick
+}) => {
+  const {
+    theme
+  } = useCollapsibleNavBarContext();
+  const isExternalLink = subMenuItem.path.includes('://');
+  return (0,jsx_runtime_namespaceObject.jsx)(AccordionContentItem_Link, {
+    onClick: onClick,
+    end: true,
+    to: isExternalLink ? subMenuItem.path : '/' + prefix + subMenuItem.path,
+    navbartheme: theme,
+    children: subMenuItem.title
+  });
+};
+;// ./src/components/CollapsibleNavBar/components/ItemWithSubmenu/AccordionContent.tsx
+
+
+
+
 const NavBarAccordionContent = ({
   items,
   accordionUniqueName,
@@ -8259,24 +8267,38 @@ const NavBarAccordionContent = ({
   isPopover,
   onClick,
   ...rest
-}) => {
-  const {
-    theme
-  } = useCollapsibleNavBarContext();
-  return (0,jsx_runtime_namespaceObject.jsx)(AccordionContent, {
-    ...rest,
-    css: [styles_AccordionContent, isPopover && AccordionContentPopover,  true ? "" : 0,  true ? "" : 0],
-    children: items.map(subMenuItem => {
-      const isExternalLink = subMenuItem.path.includes('://');
-      return (0,jsx_runtime_namespaceObject.jsx)(NavBarAccordionContent_Link, {
-        onClick: onClick,
-        end: true,
-        to: isExternalLink ? subMenuItem.path : '/' + prefix + subMenuItem.path,
-        navbartheme: theme,
-        children: subMenuItem.title
-      }, `${accordionUniqueName}-link-${subMenuItem.title.replace(' ', '').toLowerCase()}`);
-    })
-  });
+}) => (0,jsx_runtime_namespaceObject.jsx)(AccordionContent, {
+  ...rest,
+  css: [styles_AccordionContent, isPopover && AccordionContentPopover,  true ? "" : 0,  true ? "" : 0],
+  children: items.map(subMenuItem => {
+    const submenuKey = `${accordionUniqueName}-link-${subMenuItem.title.replace(' ', '').toLowerCase()}`;
+    return (0,jsx_runtime_namespaceObject.jsx)(NavBarAccordionContentItem, {
+      prefix: prefix,
+      subMenuItem: subMenuItem,
+      onClick: onClick
+    }, submenuKey);
+  })
+});
+;// ./src/components/CollapsibleNavBar/CollapsibleNavBarItemContext.tsx
+
+
+const CollapsibleNavBarItemContext = /*#__PURE__*/(0,external_react_namespaceObject.createContext)({
+  isActive: false,
+  isHover: false
+});
+const CollapsibleNavBarItemProvider = ({
+  children,
+  isActive,
+  isHover
+}) => (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarItemContext.Provider, {
+  value: {
+    isActive,
+    isHover
+  },
+  children: children
+});
+const useCollapsibleNavBarItemContext = () => {
+  return (0,external_react_namespaceObject.useContext)(CollapsibleNavBarItemContext);
 };
 ;// ./src/components/Popover/hooks/usePopover.tsx
 
@@ -8518,7 +8540,7 @@ const PopoverDescription = /*#__PURE__*/external_react_namespaceObject.forwardRe
     id: id
   });
 });
-;// ./src/components/CollapsibleNavBar/NavBarPopover.tsx
+;// ./src/components/CollapsibleNavBar/components/NavBarPopover.tsx
 
 function NavBarPopover_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -8633,7 +8655,7 @@ const CollapsibleNavBarPopover = ({
     })]
   });
 };
-;// ./src/components/CollapsibleNavBar/TriggerIcon.tsx
+;// ./src/components/CollapsibleNavBar/components/TriggerIcon.tsx
 function TriggerIcon_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
@@ -8665,9 +8687,8 @@ const TriggerIcon = ({
     })
   });
 };
-;// ./src/components/CollapsibleNavBar/NavBarItemWithSubMenu.tsx
+;// ./src/components/CollapsibleNavBar/components/ItemWithSubmenu/ItemAccordionTitle.tsx
 
-function NavBarItemWithSubMenu_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 
 
@@ -8679,47 +8700,118 @@ function NavBarItemWithSubMenu_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You ha
 
 
 
-const NavBarItemWithSubMenu_Link = CollapsibleNavBar_CollapsibleNavBarLink.withComponent('div',  true ? {
-  target: "enmfiaw0"
+const ItemAccordionTitle_Link = CollapsibleNavBarLink.withComponent('div',  true ? {
+  target: "e69hc760"
 } : 0);
-var NavBarItemWithSubMenu_ref =  true ? {
+const ItemAccordionTitle = ({
+  data,
+  item,
+  accordionUniqueName,
+  useMatchPattern
+}) => {
+  const {
+    theme
+  } = useCollapsibleNavBarContext();
+  const linkRef = (0,external_react_namespaceObject.useRef)(null);
+  const classNamesList = Array.from(linkRef.current?.classList || []);
+  const [isActive, setIsActive] = (0,external_react_namespaceObject.useState)(classNamesList.includes('active'));
+  const [isHover, setIsHover] = (0,external_react_namespaceObject.useState)(false);
+  const {
+    pathname
+  } = (0,external_react_router_dom_namespaceObject.useLocation)();
+  const matchPattern = useMatchPattern ? useMatchPattern(item.prefix) : item.prefix + ':id';
+  const match = (0,external_react_router_dom_namespaceObject.useMatch)(matchPattern);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    const classNamesList = Array.from(linkRef.current?.classList || []);
+    setIsActive(classNamesList.includes('active'));
+  }, [pathname]);
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+  const Icon = () => (0,jsx_runtime_namespaceObject.jsx)(TriggerIcon, {
+    iconName: item.iconName,
+    iconSize: item.iconSize,
+    css: /*#__PURE__*/(0,react_namespaceObject.css)({
+      ...item.css
+    },  true ? "" : 0,  true ? "" : 0)
+  });
+  return (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarItemProvider, {
+    isActive: isActive,
+    isHover: isHover,
+    children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+      onClick: data.onClick,
+      css: AccordionTitleWrapper(theme),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [(0,jsx_runtime_namespaceObject.jsx)(ItemAccordionTitle_Link, {
+        to: "",
+        navbartheme: theme,
+        className: isActive || match ? ' active' : '',
+        children: (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarPopover, {
+          triggerIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon, {}),
+          title: data.title,
+          content: (0,jsx_runtime_namespaceObject.jsx)(NavBarAccordionContent, {
+            items: item.items,
+            accordionUniqueName: accordionUniqueName,
+            prefix: item.prefix,
+            id: accordionUniqueName,
+            isOpened: true,
+            isPopover: true,
+            useMatchPattern: useMatchPattern
+          })
+        })
+      }), (0,jsx_runtime_namespaceObject.jsxs)(ItemAccordionTitle_Link, {
+        to: "",
+        className: `icon-wrapper${isActive ? ' active' : ''}`,
+        navbartheme: theme
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ,
+        ref: linkRef,
+        children: [item.CustomIcon ? (0,jsx_runtime_namespaceObject.jsx)(item.CustomIcon, {}) : (0,jsx_runtime_namespaceObject.jsx)(Icon, {}), (0,jsx_runtime_namespaceObject.jsx)(AccordionTitle, {
+          ...data,
+          css: styles_AccordionTitle(theme)
+        })]
+      })]
+    })
+  });
+};
+;// ./src/components/CollapsibleNavBar/components/ItemWithSubmenu/ItemWithSubMenu.tsx
+
+function ItemWithSubMenu_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+
+
+
+var ItemWithSubMenu_ref =  true ? {
   name: "1d3w5wq",
   styles: "width:100%"
 } : 0;
-const NavBarItemWithSubMenu = ({
+const Item = ({
   item,
   useMatchPattern,
   onClick
 }) => {
   const {
-    subMenuMaxWidth,
-    theme
+    subMenuMaxWidth
   } = useCollapsibleNavBarContext();
   const {
-    iconName,
-    iconSize,
     title,
     items,
-    prefix = '',
-    css,
-    CustomIcon
+    prefix = ''
   } = item;
-  const uniqName = iconName + title.replace(' ', '').toLowerCase();
+  const uniqName = (0,external_react_namespaceObject.useId)();
   const accordionUniqName = uniqName + 'accordion';
-  const matchPattern = useMatchPattern ? useMatchPattern(prefix) : prefix + ':id';
-  const match = (0,external_react_router_dom_namespaceObject.useMatch)(matchPattern);
-  const Icon = () => (0,jsx_runtime_namespaceObject.jsx)(TriggerIcon, {
-    iconName: iconName,
-    iconSize: iconSize,
-    css: /*#__PURE__*/(0,react_namespaceObject.css)({
-      ...css
-    },  true ? "" : 0,  true ? "" : 0)
-  });
   return (0,jsx_runtime_namespaceObject.jsx)(AccordionGroupContextProvider, {
-    children: (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBar_CollapsibleNavBarItem, {
+    children: (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarItem, {
       children: (0,jsx_runtime_namespaceObject.jsx)(AccordionGroup, {
         size: "small",
-        css: NavBarItemWithSubMenu_ref,
+        css: ItemWithSubMenu_ref,
         children: (0,jsx_runtime_namespaceObject.jsx)(Accordion, {
           id: accordionUniqName,
           title: title,
@@ -8740,49 +8832,34 @@ const NavBarItemWithSubMenu = ({
             onClick: onClick,
             ...props
           }),
-          renderTitle: data => (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
-            onClick: data.onClick,
-            css: AccordionTitleWrapper(theme),
-            children: [(0,jsx_runtime_namespaceObject.jsx)(NavBarItemWithSubMenu_Link, {
-              to: "",
-              className: match ? ' active' : '',
-              navbartheme: theme,
-              children: (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarPopover, {
-                triggerIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon, {}),
-                title: data.title,
-                content: (0,jsx_runtime_namespaceObject.jsx)(NavBarAccordionContent, {
-                  items: items,
-                  accordionUniqueName: accordionUniqName,
-                  prefix: prefix,
-                  id: accordionUniqName,
-                  isOpened: true,
-                  isPopover: true
-                })
-              })
-            }), (0,jsx_runtime_namespaceObject.jsxs)(NavBarItemWithSubMenu_Link, {
-              to: "",
-              className: `icon-wrapper${match ? ' active' : ''}`,
-              navbartheme: theme,
-              children: [CustomIcon ? (0,jsx_runtime_namespaceObject.jsx)(CustomIcon, {}) : (0,jsx_runtime_namespaceObject.jsx)(Icon, {}), (0,jsx_runtime_namespaceObject.jsx)(AccordionTitle, {
-                ...data,
-                css: styles_AccordionTitle(theme)
-              })]
-            })]
+          renderTitle: data => (0,jsx_runtime_namespaceObject.jsx)(ItemAccordionTitle, {
+            data: data,
+            item: item,
+            useMatchPattern: useMatchPattern,
+            accordionUniqueName: accordionUniqName
           })
         })
       })
     })
   }, uniqName);
 };
-;// ./src/components/CollapsibleNavBar/NavBarItemWithoutSubMenu.tsx
+;// ./src/components/CollapsibleNavBar/components/ItemWithSubmenu/index.ts
+
+
 
 
 
+;// ./src/components/CollapsibleNavBar/components/ItemWithoutSubmenu/ItemWithoutSubMenu.tsx
 
 
 
 
-const NavBarItemWithoutSubMenu = ({
+
+
+
+
+
+const ItemWithoutSubMenu_Item = ({
   item,
   onClick
 }) => {
@@ -8798,6 +8875,27 @@ const NavBarItemWithoutSubMenu = ({
     CustomIcon
   } = item;
   const isExternalLink = path.includes('://');
+  const linkRef = (0,external_react_namespaceObject.useRef)(null);
+  const classNamesList = Array.from(linkRef.current?.classList || []);
+  const [isActive, setIsActive] = (0,external_react_namespaceObject.useState)(classNamesList.includes('active'));
+  const [isHover, setIsHover] = (0,external_react_namespaceObject.useState)(false);
+  const {
+    pathname
+  } = (0,external_react_router_dom_namespaceObject.useLocation)();
+  (0,external_react_namespaceObject.useEffect)(() => {
+    const classNamesList = Array.from(linkRef.current?.classList || []);
+    setIsActive(classNamesList.includes('active'));
+  }, [pathname]);
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+  (0,external_react_namespaceObject.useEffect)(() => {
+    const classNamesList = Array.from(linkRef.current?.classList || []);
+    setIsActive(classNamesList.includes('active'));
+  }, [pathname]);
   const Icon = () => (0,jsx_runtime_namespaceObject.jsx)(TriggerIcon, {
     iconName: iconName,
     iconSize: iconSize,
@@ -8806,21 +8904,47 @@ const NavBarItemWithoutSubMenu = ({
       ...css
     },  true ? "" : 0,  true ? "" : 0)
   });
-  return (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBar_CollapsibleNavBarItem, {
-    children: (0,jsx_runtime_namespaceObject.jsxs)(CollapsibleNavBar_CollapsibleNavBarLink, {
-      to: isExternalLink ? path : '/' + path,
-      end: true,
-      onClick: onClick,
-      navbartheme: theme,
-      "data-customicon": !!CustomIcon,
-      children: [(0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarPopover, {
-        triggerIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon, {}),
-        title: title
-      }), (0,jsx_runtime_namespaceObject.jsx)(Icon, {}), (0,jsx_runtime_namespaceObject.jsx)("span", {
-        children: title
-      })]
-    })
-  }, path);
+  return (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarItemProvider, {
+    isActive: isActive,
+    isHover: isHover,
+    children: (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarItem, {
+      children: (0,jsx_runtime_namespaceObject.jsxs)(CollapsibleNavBarLink, {
+        to: isExternalLink ? path : '/' + path,
+        end: true,
+        onClick: onClick,
+        ref: linkRef,
+        navbartheme: theme,
+        "data-customicon": !!CustomIcon,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: [(0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarPopover, {
+          triggerIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon, {}),
+          title: title
+        }), (0,jsx_runtime_namespaceObject.jsx)(Icon, {}), (0,jsx_runtime_namespaceObject.jsx)("span", {
+          children: title
+        })]
+      })
+    }, path)
+  });
+};
+;// ./src/components/CollapsibleNavBar/components/ItemWithoutSubmenu/index.ts
+
+;// ./src/components/CollapsibleNavBar/components/NavBarItem.tsx
+
+
+const NavBarItem_NavBarItem = ({
+  item,
+  useMatchPattern,
+  onClick
+}) => {
+  return 'items' in item ? (0,jsx_runtime_namespaceObject.jsx)(Item, {
+    item: item,
+    onClick: onClick,
+    useMatchPattern: useMatchPattern
+  }) : (0,jsx_runtime_namespaceObject.jsx)(ItemWithoutSubMenu_Item, {
+    item: item,
+    onClick: onClick
+  });
 };
 ;// ./src/consts.ts
 const SCREEN_SIZES = {
@@ -8849,12 +8973,6 @@ const SCREEN_SIZES = {
 
 
 
-
-
-
-
-
-
 /**
  * UI Component that shows the collapsible navigation bar
  */
@@ -8888,7 +9006,7 @@ const CollapsibleNavBar = ({
   return (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarProvider, {
     theme: theme,
     subMenuMaxWidth: subMenuMaxWidth,
-    children: (0,jsx_runtime_namespaceObject.jsxs)(CollapsibleNavBar_CollapsibleNavBarBase, {
+    children: (0,jsx_runtime_namespaceObject.jsxs)(CollapsibleNavBarBase, {
       className: className + (isChecked ? ' opened' : ''),
       "data-theme": theme,
       children: [(0,jsx_runtime_namespaceObject.jsx)("input", {
@@ -8898,9 +9016,9 @@ const CollapsibleNavBar = ({
         onChange: () => {
           onToggle(!isChecked);
         }
-      }), (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBar_CollapsibleNavToggle, {
+      }), (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavToggle, {
         id: toggleId
-      }), (0,jsx_runtime_namespaceObject.jsxs)(CollapsibleNavBar_CollapsibleNavBarWrapper, {
+      }), (0,jsx_runtime_namespaceObject.jsxs)(CollapsibleNavBarWrapper, {
         navBarTheme: theme,
         children: [(0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
           css: LogoWrapper,
@@ -8908,7 +9026,7 @@ const CollapsibleNavBar = ({
             id: toggleId,
             isChecked: isChecked
           })]
-        }), (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBar_CollapsibleNavBarList, {
+        }), (0,jsx_runtime_namespaceObject.jsx)(CollapsibleNavBarList, {
           navBarTheme: theme,
           children: items.map(item => {
             const {
@@ -8916,13 +9034,10 @@ const CollapsibleNavBar = ({
               title
             } = item;
             const keyName = iconName + title.replace(' ', '').toLowerCase();
-            return 'items' in item ? (0,jsx_runtime_namespaceObject.jsx)(NavBarItemWithSubMenu, {
-              item: item,
+            return (0,jsx_runtime_namespaceObject.jsx)(NavBarItem_NavBarItem, {
               onClick: handleCloseMobileMenu,
-              useMatchPattern: useMatchPattern
-            }, keyName) : (0,jsx_runtime_namespaceObject.jsx)(NavBarItemWithoutSubMenu, {
-              item: item,
-              onClick: handleCloseMobileMenu
+              useMatchPattern: useMatchPattern,
+              item: item
             }, keyName);
           })
         })]
@@ -8930,9 +9045,46 @@ const CollapsibleNavBar = ({
     })
   });
 };
+;// ./src/components/CollapsibleNavBar/CollapsibleNavBarCustomIconSVG.tsx
+
+
+
+
+
+const CustomIconSVGStyled = /*#__PURE__*/base_default()("svg",  true ? {
+  target: "etmtuj80"
+} : 0)("&.is-active>path,&:hover>path,&:not(.is-active):hover>path,&:not(.is-active).is-hover>path{fill:", ({
+  theme
+}) => theme.colors.white, ";}" + ( true ? "" : 0));
+const CollapsibleNavBarCustomIconSVG = ({
+  className,
+  css,
+  children,
+  ...rest
+}) => {
+  const {
+    isActive,
+    isHover
+  } = useCollapsibleNavBarItemContext();
+  const classNames = new utils_namespaceObject.ClassnameArray();
+  classNames.push('svg-icon');
+  classNames.toggle('is-active', isActive);
+  classNames.toggle('is-hover', isHover);
+  if (className) {
+    classNames.push(className);
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(CustomIconSVGStyled, {
+    className: classNames.join(' '),
+    css: css,
+    ...rest,
+    children: children
+  });
+};
 ;// ./src/components/CollapsibleNavBar/index.ts
 
 
+
+
 ;// ./src/components/DatePicker/constants.ts
 const DEFAULT_MASK_FORMAT = 'mm/dd/yyyy';
 const DEFAULT_MASK = '__/__/____';
@@ -10359,22 +10511,6 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
 
 
 const useDateRangePickerContext = () => (0,external_react_namespaceObject.useContext)(DateRangePickerContext);
-;// ./src/components/DateRangePicker/helpers/ClassnameArray.ts
-class ClassnameArray extends Array {
-  toggle(className, condition) {
-    const index = this.indexOf(className);
-    if (condition) {
-      if (index === -1) {
-        this.push(className);
-      }
-    } else {
-      if (index > -1) {
-        this.splice(index, 1);
-      }
-    }
-    return this;
-  }
-}
 ;// ./src/components/DateRangePicker/hooks/useRangeHighlighting.ts
 
 
@@ -10392,7 +10528,7 @@ const useRangeHighlighting = () => {
     isCalendarFirstDateSelected,
     isCalendarSecondDateSelected
   }) => {
-    const classNames = new ClassnameArray();
+    const classNames = new utils_namespaceObject.ClassnameArray();
     let isHoverRangeHighlightFrom = false;
     let isHoverRangeHighlightTo = false;
     if (hoveredDate !== null) {