@capillarytech/blaze-ui 6.1.6-beta.1 → 6.1.7

package/CapNavigationSPA/CapNavigationSPASidebar/index.js

@@ -1,373 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import classNames from "classnames";
-import { useRef, useState, useCallback } from "react";
-import CapIcon from "../../CapIcon/index.js";
-import styles from "./styles.module.scss.js";
-const SIDEBAR_DIVIDER_BEFORE_KEY = "data-management";
-const DEFAULT_ICON_MAP = {
-  loyalty: "loyalty-tag",
-  // Figma 583:6938 – heart inside tag
-  engage: "engage-nav",
-  // Figma 646-59790 – megaphone with settings
-  rewards: "rewards-outline",
-  insights: "insights-nav",
-  // Figma 646-59984 – bar chart in frame
-  aira: "aira-nav",
-  // Figma 646-59790 – three sparkles, stroke icon
-  members: "members",
-  audiences: "groups",
-  creatives: "creatives-nav",
-  // Figma 646-59984 – document with pen
-  "data-management": "data-management",
-  extensions: "code",
-  settings: "settings"
-};
-const CapNavigationSPASidebar = ({
-  items,
-  selectedKey = "",
-  onItemClick,
-  settingsLabel = "Settings",
-  logo,
-  className,
-  collapsed = false,
-  onCollapseExpand,
-  navigateToLink = true
-}) => {
-  const wrapperRef = useRef(null);
-  const [hoverExpandedKey, setHoverExpandedKey] = useState(null);
-  const [clickExpandedKey, setClickExpandedKey] = useState(null);
-  const [hoverL1TooltipKey, setHoverL1TooltipKey] = useState(null);
-  const expandedParentKey = clickExpandedKey ?? hoverExpandedKey;
-  const closeFlyout = useCallback(() => {
-    setHoverExpandedKey(null);
-    setClickExpandedKey(null);
-    setHoverL1TooltipKey(null);
-  }, []);
-  const handleClick = useCallback(
-    (item) => {
-      if (navigateToLink && item.link && item.link !== window.location.pathname) {
-        window.location.pathname = item.link;
-      }
-      onItemClick == null ? void 0 : onItemClick(item);
-    },
-    [navigateToLink, onItemClick]
-  );
-  const toggleParentExpanded = useCallback(
-    (parentKey) => {
-      if (expandedParentKey === parentKey) {
-        closeFlyout();
-      } else {
-        setHoverExpandedKey(null);
-        setClickExpandedKey(parentKey);
-      }
-    },
-    [expandedParentKey, closeFlyout]
-  );
-  const handleItemClick = useCallback(
-    (item) => {
-      var _a, _b;
-      if (collapsed) {
-        if (onCollapseExpand) {
-          onCollapseExpand();
-        }
-        if ((_a = item.children) == null ? void 0 : _a.length) {
-          setHoverExpandedKey(null);
-          setClickExpandedKey(item.key);
-        } else {
-          closeFlyout();
-          handleClick(item);
-        }
-        return;
-      }
-      if ((_b = item.children) == null ? void 0 : _b.length) {
-        toggleParentExpanded(item.key);
-      } else {
-        closeFlyout();
-        handleClick(item);
-      }
-    },
-    [collapsed, onCollapseExpand, toggleParentExpanded, closeFlyout, handleClick]
-  );
-  const getIconType = (item) => item.iconType ?? DEFAULT_ICON_MAP[item.key] ?? void 0;
-  const handleWrapperMouseLeave = useCallback(() => {
-    setHoverExpandedKey(null);
-    setHoverL1TooltipKey(null);
-  }, []);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: wrapperRef,
-      className: styles["cap-navigation-spa-sidebar__wrapper"],
-      onMouseLeave: handleWrapperMouseLeave,
-      children: /* @__PURE__ */ jsxs(
-        "aside",
-        {
-          className: classNames(
-            styles["cap-navigation-spa-sidebar"],
-            collapsed && styles["cap-navigation-spa-sidebar--collapsed"],
-            className
-          ),
-          "data-testid": "cap-navigation-spa-sidebar",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__logo"], children: logo !== void 0 ? logo : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                CapIcon,
-                {
-                  type: "capillary",
-                  size: "s",
-                  className: styles["cap-navigation-spa-sidebar__logo-icon"]
-                }
-              ),
-              !collapsed && /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__logo-text"], children: "capillary" })
-            ] }) }),
-            /* @__PURE__ */ jsx("nav", { className: styles["cap-navigation-spa-sidebar__nav"], children: items.flatMap((item) => {
-              var _a, _b, _c, _d;
-              const isExpandedWithChildren = !collapsed && ((_a = item.children) == null ? void 0 : _a.length) && expandedParentKey === item.key;
-              const parentButton = /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  className: classNames(
-                    styles["cap-navigation-spa-sidebar__item"],
-                    expandedParentKey === item.key && styles["cap-navigation-spa-sidebar__item--expanded"],
-                    expandedParentKey === item.key && item.key === "loyalty" && styles["cap-navigation-spa-sidebar__item--expanded-loyalty"],
-                    expandedParentKey === item.key && item.key === "engage" && styles["cap-navigation-spa-sidebar__item--expanded-engage"],
-                    expandedParentKey === item.key && item.key === "insights" && styles["cap-navigation-spa-sidebar__item--expanded-insights"],
-                    expandedParentKey === item.key && item.key === "members" && styles["cap-navigation-spa-sidebar__item--expanded-members"],
-                    expandedParentKey === item.key && item.key === "rewards" && styles["cap-navigation-spa-sidebar__item--expanded-rewards"],
-                    expandedParentKey === item.key && item.key === "audiences" && styles["cap-navigation-spa-sidebar__item--expanded-audiences"],
-                    expandedParentKey === item.key && item.key === "data-management" && styles["cap-navigation-spa-sidebar__item--expanded-data-management"],
-                    expandedParentKey === item.key && item.key === "extensions" && styles["cap-navigation-spa-sidebar__item--expanded-extensions"],
-                    expandedParentKey === item.key && item.key === "settings" && styles["cap-navigation-spa-sidebar__item--expanded-settings"]
-                  ),
-                  onClick: () => handleItemClick(item),
-                  onMouseEnter: () => {
-                    var _a2;
-                    if ((_a2 = item.children) == null ? void 0 : _a2.length) {
-                      if (collapsed) {
-                        setHoverExpandedKey(item.key);
-                      }
-                      setHoverL1TooltipKey(null);
-                    } else if (collapsed) {
-                      setHoverL1TooltipKey(item.key);
-                    }
-                  },
-                  "data-testid": `cap-navigation-spa-sidebar-item-${item.key}`,
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-icon"], children: getIconType(item) ? /* @__PURE__ */ jsx(CapIcon, { type: getIconType(item), size: "s" }) : /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-dot"] }) }),
-                    !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-label"], children: item.title }),
-                      ((_b = item.children) == null ? void 0 : _b.length) ? /* @__PURE__ */ jsx(
-                        CapIcon,
-                        {
-                          type: expandedParentKey === item.key ? "chevron-down" : "chevron-right",
-                          size: "s",
-                          className: styles["cap-navigation-spa-sidebar__item-chevron"]
-                        }
-                      ) : null
-                    ] })
-                  ]
-                },
-                item.key
-              );
-              const showCollapsedFlyout = collapsed && ((_c = item.children) == null ? void 0 : _c.length) && expandedParentKey === item.key;
-              const showL1TooltipFlyout = collapsed && !((_d = item.children) == null ? void 0 : _d.length) && hoverL1TooltipKey === item.key;
-              const l2Inline = isExpandedWithChildren ? /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: styles["cap-navigation-spa-sidebar__l2-wrapper"],
-                  children: [
-                    /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l2-divider"], "aria-hidden": true }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: styles["cap-navigation-spa-sidebar__l2-inline"],
-                        onMouseEnter: () => setHoverExpandedKey(item.key),
-                        "data-testid": `cap-navigation-spa-sidebar-l2-${item.key}`,
-                        children: item.children.map((child) => /* @__PURE__ */ jsx(
-                          "button",
-                          {
-                            type: "button",
-                            className: classNames(
-                              styles["cap-navigation-spa-sidebar__l2-inline-item"],
-                              selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected"],
-                              item.key === "loyalty" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty"],
-                              item.key === "engage" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-engage"],
-                              item.key === "insights" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-insights"],
-                              item.key === "members" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-members"],
-                              item.key === "rewards" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-rewards"],
-                              item.key === "audiences" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-audiences"],
-                              item.key === "data-management" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-data-management"],
-                              item.key === "extensions" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-extensions"],
-                              item.key === "settings" && selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-inline-item--selected-settings"]
-                            ),
-                            onClick: () => {
-                              handleClick(child);
-                            },
-                            "data-testid": `cap-navigation-spa-sidebar-l2-item-${child.key}`,
-                            children: child.title
-                          },
-                          child.key
-                        ))
-                      },
-                      `${item.key}-l2`
-                    )
-                  ]
-                },
-                `${item.key}-l2-wrapper`
-              ) : null;
-              const collapsedFlyout = showCollapsedFlyout ? /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: styles["cap-navigation-spa-sidebar__l2-flyout"],
-                  onMouseEnter: () => setHoverExpandedKey(item.key),
-                  "data-testid": `cap-navigation-spa-sidebar-l2-flyout-${item.key}`,
-                  role: "menu",
-                  "aria-label": item.title,
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"],
-                        "aria-hidden": true
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-card"], children: [
-                      /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l2-flyout-parent"], children: item.title }),
-                      item.children.map((child) => /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          type: "button",
-                          className: classNames(
-                            styles["cap-navigation-spa-sidebar__l2-flyout-item"],
-                            selectedKey === child.key && styles["cap-navigation-spa-sidebar__l2-flyout-item--selected"]
-                          ),
-                          onClick: () => {
-                            setClickExpandedKey(item.key);
-                            if (collapsed && onCollapseExpand) {
-                              onCollapseExpand();
-                            }
-                            handleClick(child);
-                          },
-                          "data-testid": `cap-navigation-spa-sidebar-l2-flyout-item-${child.key}`,
-                          role: "menuitem",
-                          children: child.title
-                        },
-                        child.key
-                      ))
-                    ] })
-                  ]
-                },
-                `${item.key}-l2-flyout`
-              ) : null;
-              const l1TooltipFlyout = showL1TooltipFlyout ? /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: styles["cap-navigation-spa-sidebar__l1-tooltip-flyout"],
-                  onMouseEnter: () => setHoverL1TooltipKey(item.key),
-                  "data-testid": `cap-navigation-spa-sidebar-l1-tooltip-${item.key}`,
-                  role: "tooltip",
-                  "aria-label": item.title,
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: styles["cap-navigation-spa-sidebar__l2-flyout-arrow"],
-                        "aria-hidden": true
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l1-tooltip-card"], children: /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__l1-tooltip-label"], children: item.title }) })
-                  ]
-                },
-                `${item.key}-l1-tooltip`
-              ) : null;
-              const wrapForCollapsedFlyout = collapsed;
-              const renderedButton = wrapForCollapsedFlyout ? /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: styles["cap-navigation-spa-sidebar__item-flyout-wrap"],
-                  onMouseLeave: closeFlyout,
-                  children: [
-                    parentButton,
-                    collapsedFlyout,
-                    l1TooltipFlyout
-                  ]
-                },
-                `${item.key}-flyout-wrap`
-              ) : parentButton;
-              if (item.key === SIDEBAR_DIVIDER_BEFORE_KEY) {
-                return [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: styles["cap-navigation-spa-sidebar__divider"],
-                      "aria-hidden": true
-                    },
-                    `divider-${item.key}`
-                  ),
-                  renderedButton,
-                  ...l2Inline ? [l2Inline] : []
-                ];
-              }
-              if (item.key === "settings") {
-                return [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: styles["cap-navigation-spa-sidebar__divider"],
-                      "aria-hidden": true
-                    },
-                    "divider-settings"
-                  ),
-                  renderedButton,
-                  ...l2Inline ? [l2Inline] : []
-                ];
-              }
-              return [renderedButton, ...l2Inline ? [l2Inline] : []];
-            }) }),
-            /* @__PURE__ */ jsxs("div", { className: styles["cap-navigation-spa-sidebar__footer"], children: [
-              !items.some((i) => i.key === "settings") && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  className: styles["cap-navigation-spa-sidebar__item"],
-                  onClick: () => {
-                    closeFlyout();
-                    const settingsItem = { key: "settings", title: settingsLabel, link: "/settings" };
-                    handleClick(settingsItem);
-                  },
-                  "data-testid": "cap-navigation-spa-sidebar-settings",
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-icon"], children: /* @__PURE__ */ jsx(CapIcon, { type: "settings", size: "s" }) }),
-                    !collapsed && /* @__PURE__ */ jsx("span", { className: styles["cap-navigation-spa-sidebar__item-label"], children: settingsLabel })
-                  ]
-                }
-              ),
-              onCollapseExpand && /* @__PURE__ */ jsx("div", { className: styles["cap-navigation-spa-sidebar__collapse-wrap"], children: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: styles["cap-navigation-spa-sidebar__collapse-btn"],
-                  onClick: onCollapseExpand,
-                  "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
-                  "data-testid": "cap-navigation-spa-sidebar-collapse-toggle",
-                  children: /* @__PURE__ */ jsx(
-                    CapIcon,
-                    {
-                      type: collapsed ? "sidebar-expand" : "sidebar-collapse",
-                      size: "s",
-                      className: styles["cap-navigation-spa-sidebar__collapse-btn-icon"]
-                    }
-                  )
-                }
-              ) })
-            ] })
-          ]
-        }
-      )
-    }
-  );
-};
-export {
-  CapNavigationSPASidebar as default
-};

package/CapNavigationSPA/CapNavigationSPASidebar/styles.css

@@ -1,318 +0,0 @@
-/* Color Palette */
-/* Fonts */
-/* Backward Compatibility Aliases */
-/* Component Heights */
-/* Border Radius */
-/* Border Width */
-/* Transition */
-/* Timezones Footer */
-.cap-navigation-spa-sidebar__wrapper {
-  position: relative;
-  display: flex;
-  flex-shrink: 0;
-}
-.cap-navigation-spa-sidebar {
-  width: 17.143rem;
-  min-width: 17.143rem;
-  height: 100%;
-  background-color: #fafbfc;
-  border-right: 1px solid #dfe2e7;
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  transition: width 0.2s ease, min-width 0.2s ease;
-}
-.cap-navigation-spa-sidebar--collapsed {
-  width: 5.714rem;
-  min-width: 5.714rem;
-  background-color: #fafbfc;
-}
-.cap-navigation-spa-sidebar__logo {
-  height: 5rem;
-  padding: 1rem 0.857rem 1rem 1.429rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-}
-.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__logo {
-  padding: 1rem 0.571rem;
-  justify-content: center;
-}
-.cap-navigation-spa-sidebar__logo-icon {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.cap-navigation-spa-sidebar__logo-text {
-  font-family: "Roboto", sans-serif;
-  font-size: 1.143rem;
-  font-weight: 500;
-  color: #091e42;
-}
-.cap-navigation-spa-sidebar__nav {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  padding: 0;
-}
-.cap-navigation-spa-sidebar__item {
-  display: flex;
-  align-items: center;
-  height: 2.857rem;
-  padding: 0 1.429rem 0 1.429rem;
-  gap: 1rem;
-  width: 100%;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-family: "Roboto", sans-serif;
-  font-size: 1rem;
-  font-weight: 400;
-  color: #091e42;
-  text-align: left;
-  transition: background-color 0.15s ease;
-}
-.cap-navigation-spa-sidebar__item:hover {
-  background-color: #ebecf0;
-}
-.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__item {
-  padding: 0 0.571rem;
-  justify-content: center;
-}
-.cap-navigation-spa-sidebar__item-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  color: #091e42;
-}
-.cap-navigation-spa-sidebar__item-dot {
-  width: 0.25rem;
-  height: 0.25rem;
-  border-radius: 50%;
-  background-color: currentColor;
-}
-.cap-navigation-spa-sidebar__item-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-.cap-navigation-spa-sidebar__item--expanded {
-  background-color: #ebecf0;
-}
-.cap-navigation-spa-sidebar__item--expanded-loyalty,
-.cap-navigation-spa-sidebar__item--expanded-engage,
-.cap-navigation-spa-sidebar__item--expanded-insights,
-.cap-navigation-spa-sidebar__item--expanded-members,
-.cap-navigation-spa-sidebar__item--expanded-rewards,
-.cap-navigation-spa-sidebar__item--expanded-audiences,
-.cap-navigation-spa-sidebar__item--expanded-data-management,
-.cap-navigation-spa-sidebar__item--expanded-extensions,
-.cap-navigation-spa-sidebar__item--expanded-settings {
-  background-color: #e9f0fe;
-}
-.cap-navigation-spa-sidebar__item-chevron {
-  flex-shrink: 0;
-  margin-left: auto;
-  color: #091e42;
-}
-.cap-navigation-spa-sidebar__l2-wrapper {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-.cap-navigation-spa-sidebar__l2-divider {
-  height: 1px;
-  background-color: #dfe2e7;
-  width: 100%;
-  flex-shrink: 0;
-}
-.cap-navigation-spa-sidebar__l2-inline {
-  display: flex;
-  flex-direction: column;
-  margin-left: 2.286rem;
-  padding: 0;
-  border-left: 2px solid #dfe2e7;
-  background-color: #fafbfc;
-}
-.cap-navigation-spa-sidebar__l2-inline-item {
-  display: flex;
-  align-items: center;
-  height: 2.857rem;
-  padding: 0 1.714rem 0 1.286rem;
-  width: 100%;
-  border: none;
-  background-color: #fafbfc;
-  cursor: pointer;
-  font-family: "Roboto", sans-serif;
-  font-size: 1rem;
-  font-weight: 400;
-  color: #091e42;
-  text-align: left;
-  transition: background-color 0.15s ease;
-}
-.cap-navigation-spa-sidebar__l2-inline-item:hover {
-  background-color: #ebecf0;
-}
-.cap-navigation-spa-sidebar__l2-inline-item--selected {
-  background-color: #e9f0fe;
-}
-.cap-navigation-spa-sidebar__l2-inline-item--selected-loyalty,
-.cap-navigation-spa-sidebar__l2-inline-item--selected-engage,
-.cap-navigation-spa-sidebar__l2-inline-item--selected-insights,
-.cap-navigation-spa-sidebar__l2-inline-item--selected-members,
-.cap-navigation-spa-sidebar__l2-inline-item--selected-rewards,
-.cap-navigation-spa-sidebar__l2-inline-item--selected-audiences,
-.cap-navigation-spa-sidebar__l2-inline-item--selected-data-management,
-.cap-navigation-spa-sidebar__l2-inline-item--selected-extensions,
-.cap-navigation-spa-sidebar__l2-inline-item--selected-settings {
-  margin-left: -2px;
-  background-color: #ebecf0;
-  box-shadow: inset 2px 0 0 #2466ea;
-}
-.cap-navigation-spa-sidebar__divider {
-  height: 1px;
-  background-color: #dfe2e7;
-  margin: 1rem 0.857rem;
-  flex-shrink: 0;
-}
-.cap-navigation-spa-sidebar__footer {
-  padding: 0.571rem 0 1rem;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__footer {
-  padding: 0.571rem 0.571rem 1rem;
-}
-.cap-navigation-spa-sidebar__collapse-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 5.714rem;
-  height: 2.857rem;
-  padding: 0;
-  margin-top: 0;
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  color: #091e42;
-  border-radius: 0;
-  transition: background-color 0.15s ease;
-  flex-shrink: 0;
-}
-.cap-navigation-spa-sidebar__collapse-btn:hover {
-  background-color: #ebecf0;
-}
-.cap-navigation-spa-sidebar__collapse-btn-icon {
-  font-size: 16px;
-}
-.cap-navigation-spa-sidebar__collapse-wrap {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-}
-.cap-navigation-spa-sidebar--collapsed .cap-navigation-spa-sidebar__collapse-wrap {
-  justify-content: center;
-}
-.cap-navigation-spa-sidebar__item-flyout-wrap {
-  position: relative;
-}
-.cap-navigation-spa-sidebar__l2-flyout {
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  padding-left: 4px;
-  z-index: 10;
-  pointer-events: auto;
-}
-.cap-navigation-spa-sidebar__l2-flyout-arrow {
-  width: 0;
-  height: 0;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-right: 5px solid #ffffff;
-  align-self: center;
-  margin-left: -3px;
-  filter: drop-shadow(0 0 1px rgba(9, 30, 66, 0.15));
-}
-.cap-navigation-spa-sidebar__l2-flyout-card {
-  background-color: #ffffff;
-  border: 1px solid #dfe2e7;
-  border-radius: 6px;
-  box-shadow: 0 4px 4px rgba(9, 30, 66, 0.15), 0 0 1px rgba(9, 30, 66, 0.15);
-  min-width: 200px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-.cap-navigation-spa-sidebar__l2-flyout-parent {
-  padding: 8px 16px 10px;
-  font-family: "Roboto", sans-serif;
-  font-size: 1rem;
-  font-weight: 500;
-  color: #091e42;
-  border-bottom: 1px solid #dfe2e7;
-  flex-shrink: 0;
-}
-.cap-navigation-spa-sidebar__l2-flyout-item {
-  display: flex;
-  align-items: center;
-  height: 2.857rem;
-  padding: 0 1rem;
-  width: 100%;
-  border: none;
-  background-color: #fafbfc;
-  cursor: pointer;
-  font-family: "Roboto", sans-serif;
-  font-size: 1rem;
-  font-weight: 400;
-  color: #091e42;
-  text-align: left;
-  transition: background-color 0.15s ease;
-}
-.cap-navigation-spa-sidebar__l2-flyout-item:hover {
-  background-color: #ebecf0;
-}
-.cap-navigation-spa-sidebar__l2-flyout-item--selected {
-  background-color: #e9f0fe;
-}
-.cap-navigation-spa-sidebar__l1-tooltip-flyout {
-  position: absolute;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  padding-left: 4px;
-  z-index: 10;
-  pointer-events: auto;
-}
-.cap-navigation-spa-sidebar__l1-tooltip-card {
-  background-color: #ffffff;
-  border: 1px solid #dfe2e7;
-  border-radius: 6px;
-  box-shadow: 0 4px 4px rgba(9, 30, 66, 0.15), 0 0 1px rgba(9, 30, 66, 0.15);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-.cap-navigation-spa-sidebar__l1-tooltip-label {
-  padding: 8px 16px 10px;
-  font-family: "Roboto", sans-serif;
-  font-size: 1rem;
-  font-weight: 400;
-  color: #091e42;
-  white-space: nowrap;
-}