sixseconds-modules 2.0.2 → 2.0.3

package/dist/index.cjs.js

@@ -12873,7 +12873,7 @@ const IMAGES = {
   Us,
   DefaultLang
 };
-const styleText = '@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");\n\n/* ==========================================================================\n   Style isolation — keep the header looking the same in every host app.\n\n   Two layers work together (see providers/shadowIsland.tsx):\n     1. `:host`  — the Shadow DOM boundary reset. Inherited properties\n        (font, color, line-height, letter-spacing, text-align, …) are the\n        only things that cross a shadow boundary, so we neutralise them once\n        here and re-establish our own baseline. Host author rules cannot\n        reach past the boundary at all.\n     2. `.sixseconds-header-root` — a defensive reset for the light DOM. It\n        applies when this stylesheet is used outside the shadow root (e.g. a\n        consumer imports `sixseconds-modules/styles`, or during the brief\n        pre-mount window), so leaked host rules for bare tags (button, a, ul,\n        li, *, resets) get reverted before our styles apply.\n\n   IMPORTANT — specificity/order contract:\n     `.sixseconds-header-root, .sixseconds-header-root *` is specificity\n     (0,1,0), identical to an Emotion-generated class. This reset is declared\n     ABOVE all component rules, so at equal specificity our own MUI/Emotion\n     styles (injected/declared later) always win. Never raise this reset to\n     an element-qualified selector or add `!important` — that would beat the\n     header\'s own styling. `all: revert` also intentionally leaves custom\n     properties, `direction` and `unicode-bidi` untouched, so RTL keeps\n     working.\n   ========================================================================== */\n\n:host {\n  /* `!important` is load-bearing: for NORMAL declarations the outer (document)\n     tree wins the shadow cascade, so a host page rule that happens to match our\n     host element (e.g. `div { font-family: … }`) would otherwise beat this reset\n     and re-leak inherited props across the boundary. `!important` makes the inner\n     (shadow) tree win. `all` intentionally leaves `direction`/`unicode-bidi` and\n     custom properties untouched, so RTL context still inherits (the header has\n     `[dir=\'rtl\']` handling) — this is desired. Our isolated MUI theme does not\n     enable CSS variables, so no `--mui-*` host var is consumed inside the tree. */\n  all: initial !important;\n  box-sizing: border-box !important;\n  display: block !important;\n  font-family: "Inter", sans-serif !important;\n  color: #1a1c1e !important;\n  line-height: 1.5 !important;\n  text-align: start !important;\n  -webkit-font-smoothing: antialiased !important;\n}\n\n.sixseconds-header-root,\n.sixseconds-header-root *,\n.sixseconds-header-root *::before,\n.sixseconds-header-root *::after {\n  all: revert;\n  box-sizing: border-box;\n}\n\n.sixseconds-header-root blockquote,\n.sixseconds-header-root dl,\n.sixseconds-header-root dd,\n.sixseconds-header-root h1,\n.sixseconds-header-root h2,\n.sixseconds-header-root h3,\n.sixseconds-header-root h4,\n.sixseconds-header-root h5,\n.sixseconds-header-root h6,\n.sixseconds-header-root hr,\n.sixseconds-header-root figure,\n.sixseconds-header-root p,\n.sixseconds-header-root pre,\n.sixseconds-header-root span,\n.sixseconds-header-root a,\n.sixseconds-header-root div,\n.sixseconds-header-root li,\n.sixseconds-header-root button {\n  font-family: "Inter", sans-serif !important;\n}\n\n.sixseconds-header-main-list-menu {\n  display: flex;\n}\n\n.sixseconds-header-main-list-menu li {\n  padding: 0.5rem 0.5rem;\n}\n\n.sixseconds-header-main-list-menu li a {\n  padding: 0 0.25rem;\n  font-weight: 500;\n  font-size: 12px;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item {\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-link {\n  text-decoration: none;\n  color: #2a2a2a;\n  /* Closer to 6seconds */\n  font-weight: 500;\n  font-size: 15px;\n  padding: 8px 4px;\n  transition: color 0.2s ease;\n  font-family: "Inter", sans-serif;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-link:hover {\n  color: #0073b1;\n}\n\n/* Submenu (Dropdown) */\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-data {\n  position: absolute;\n  top: 150%;\n  left: 0;\n  background: white;\n  border: 1px solid #e2e8f0;\n  border-top: 3px solid #0073b1;\n  box-shadow:\n    0px 12px 48px rgba(0, 0, 0, 0.12),\n    0 4px 16px rgba(0, 0, 0, 0.08);\n  /* Even more premium shadow */\n  display: block;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(12px);\n  width: 200px;\n  z-index: 1000;\n  border-radius: 4px;\n  /* More angular per 6seconds style */\n  padding: 8px 0;\n  transition:\n    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    visibility 0.25s;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-data li {\n  list-style: none;\n  padding: 0;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-link {\n  display: block;\n  padding: 12px 28px;\n  text-decoration: none;\n  color: #2a2a2a;\n  /* Darker grey */\n  font-weight: 400;\n  font-size: 14.5px;\n  line-height: 1.4;\n  white-space: normal;\n  transition: all 0.2s ease;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-link:hover {\n  background: #f0f7fb;\n  color: #0073b1;\n  padding-left: 32px;\n  /* Slight nudge */\n}\n\n/* Caret rotation on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-desktop-caret {\n  transform: rotate(180deg);\n}\n\n/* Show dropdown on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-submenu-data {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sixseconds-header-small-device-menu {\n  display: none;\n  width: 100%;\n  left: 0;\n  top: 64px;\n  background-color: #fff;\n  position: fixed;\n  overflow-y: auto;\n  height: 95vh;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n}\n\n.sixseconds-header-small-device-menu a.sixseconds-header-bg-main-menu {\n  display: block;\n  text-decoration: none;\n}\n\n.sixseconds-header-submenu-child li {\n  padding: 0.5rem 0;\n}\n\n.sixseconds-header-submenu-child li a {\n  text-decoration: none;\n}\n\n.sixseconds-header-layout-mobile-menu {\n  padding-bottom: 12px;\n  padding-inline: 0;\n  height: 95vh;\n  overflow-y: auto;\n  padding-top: 8px;\n}\n\n.sixseconds-header-small-device-menu a {\n  background-color: transparent;\n  font-size: 16px;\n  /* Slightly larger */\n  font-weight: 600;\n  /* Bolder for parent items */\n  color: #1a1c1e;\n  margin-bottom: 4px;\n  padding: 16px 20px;\n  border-bottom: 1px solid #f1f3f4;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.sixseconds-header-small-device-menu .sixseconds-header-submenu-child {\n  padding-left: 0px;\n  min-width: 100%;\n  max-width: 100%;\n  margin-top: 0;\n  background-color: #fbfbfc;\n  /* Slightly different background for sub-items */\n  color: #1a1c1e;\n}\n\n.sixseconds-header-small-device-menu ul li .sixseconds-header-submenu-child-link {\n  padding: 12px 32px;\n  /* Indent more */\n  font-weight: 400;\n  /* Regular weight for sub-links */\n  font-size: 14px;\n}\n\n.sixseconds-header-small-device-menu ul li a {\n  background-color: transparent;\n  color: #4a4d50;\n}\n\n.sixseconds-header-small-device-menu ul {\n  padding-left: 15px;\n}\n\n.sixseconds-header-desktop-menu {\n  display: flex;\n}\n\n.sixseconds-header-button-hamburger {\n  display: none;\n  position: absolute;\n  right: 20px;\n  top: 18px;\n  z-index: 9;\n}\n\n.sixseconds-header-root .tox-editor-header {\n  background-color: transparent;\n}\n\n.sixseconds-header-hamburger-icon-btn {\n  padding: 8px;\n  color: #5f6368;\n}\n\n.sixseconds-header-desktop-menu .sixseconds-header-menu-item .sixseconds-header-menu-link {\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.sixseconds-header-small-device-menu {\n  padding-inline: 20px;\n}\n\n@media screen and (max-width: 600px) and (min-width: 320px) {\n  .sixseconds-header-notification-icon-error .MuiBadge-badge {\n    font-size: 10px;\n    padding: 0 4px;\n    min-width: 16px;\n    right: 5px;\n    background-color: #d32f2f;\n  }\n\n  .sixseconds-header-submenu nav {\n    padding: 0 !important;\n  }\n\n  .sixseconds-header-root .MuiPagination-root.MuiPagination-outlined {\n    display: flex;\n    justify-content: center;\n    margin-left: 0;\n  }\n\n  .sixseconds-header-toggle-btn-menu {\n    position: absolute;\n    right: 20px;\n    top: 12px;\n    z-index: 99;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n    width: 100%;\n    position: fixed;\n    left: 0;\n    background: #fff;\n    top: 64px;\n  }\n\n  .main.sixseconds-header-login-page .sixseconds-header-login-body {\n    width: 90% !important;\n  }\n\n  .sixseconds-header-submenu {\n    width: 100%;\n    max-width: 100% !important;\n  }\n\n  .sixseconds-header-sidebar {\n    width: 280px !important;\n    background-color: #f9fafb;\n    z-index: 99;\n    border-right: 1px solid #e0e0e0;\n  }\n\n  .sixseconds-header-sidemenu {\n    width: 280px;\n    background-color: #f9fafb;\n  }\n\n  .sixseconds-header-logo {\n    opacity: 1;\n  }\n\n  .sixseconds-header-profile .sixseconds-header-menu {\n    min-width: 280px;\n    width: 100% !important;\n  }\n}\n\n@media screen and (max-width: 1024px) and (min-width: 600px) {\n  .sixseconds-header-toggle-btn-menu {\n    position: absolute;\n    right: 20px;\n    top: 12px;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n  }\n\n  .main.sixseconds-header-login-page .sixseconds-header-login-body {\n    width: 450px !important;\n  }\n\n  .sixseconds-header-banner {\n    margin-left: 0 !important;\n  }\n\n  .sixseconds-header-submenu {\n    width: 100%;\n    max-width: 100% !important;\n  }\n\n  .sixseconds-header-sidebar {\n    width: 280px !important;\n    background-color: #f9fafb;\n    z-index: 99;\n  }\n\n  .sixseconds-header-sidemenu {\n    width: 280px;\n    background-color: #f9fafb;\n  }\n\n  .sixseconds-header-logo {\n    opacity: 1;\n  }\n\n  .sixseconds-header-profile .sixseconds-header-menu {\n    min-width: 280px;\n    width: 100% !important;\n  }\n}\n\n@media screen and (max-width: 1380px) and (min-width: 1024px) {\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n    width: 100%;\n    position: fixed;\n    left: 0;\n    background: #fff;\n    top: 64px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n}\n';
+const styleText = '@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");\n\n/* ==========================================================================\n   Style isolation — keep the header looking the same in every host app.\n\n   Two layers work together (see providers/shadowIsland.tsx):\n     1. `:host`  — the Shadow DOM boundary reset. Inherited properties\n        (font, color, line-height, letter-spacing, text-align, …) are the\n        only things that cross a shadow boundary, so we neutralise them once\n        here and re-establish our own baseline. Host author rules cannot\n        reach past the boundary at all.\n     2. `:where(.sixseconds-header-root …)` — a small, zero-specificity baseline\n        (box-sizing, replaced-element sizing) that replaces the host normalize the\n        boundary blocks, without ever overriding the component\'s own styles.\n\n   Inside the shadow tree the boundary already blocks the host\'s author CSS, so\n   NO aggressive `all: revert` is used here — that would strip the very baseline\n   the header needs (the host\'s global normalize no longer reaches inside the\n   boundary), which is what made replaced elements render at their intrinsic\n   size. Instead we provide our own small baseline below, written with `:where()`\n   so it has ZERO specificity and can never override the component\'s own Emotion\n   styles (a plain `.sixseconds-header-root svg {}` would be (0,1,1) and would\n   clobber MUI icon sizing).\n   ========================================================================== */\n\n:host {\n  /* `!important` is load-bearing: for NORMAL declarations the outer (document)\n     tree wins the shadow cascade, so a host page rule that happens to match our\n     host element (e.g. `div { font-family: … }`) would otherwise beat this reset\n     and re-leak inherited props across the boundary. `!important` makes the inner\n     (shadow) tree win. `all` intentionally leaves `direction`/`unicode-bidi` and\n     custom properties untouched, so RTL context still inherits (the header has\n     `[dir=\'rtl\']` handling) — this is desired. Our isolated MUI theme does not\n     enable CSS variables, so no `--mui-*` host var is consumed inside the tree. */\n  all: initial !important;\n  box-sizing: border-box !important;\n  display: block !important;\n  font-family: "Inter", sans-serif !important;\n  color: #1a1c1e !important;\n  line-height: 1.5 !important;\n  text-align: start !important;\n  -webkit-font-smoothing: antialiased !important;\n}\n\n/* Baseline for the isolated tree — replaces what the host\'s normalize used to\n   provide. `:where()` keeps specificity at 0 so Emotion/MUI always win; these\n   rules only fill in defaults nothing else sets. */\n\n:where(.sixseconds-header-root),\n:where(.sixseconds-header-root *),\n:where(.sixseconds-header-root *::before),\n:where(.sixseconds-header-root *::after) {\n  box-sizing: border-box;\n}\n\n:where(.sixseconds-header-root img),\n:where(.sixseconds-header-root svg),\n:where(.sixseconds-header-root video),\n:where(.sixseconds-header-root canvas) {\n  max-width: 100%;\n}\n\n:where(.sixseconds-header-root img),\n:where(.sixseconds-header-root svg),\n:where(.sixseconds-header-root video) {\n  height: auto;\n}\n\n.sixseconds-header-root blockquote,\n.sixseconds-header-root dl,\n.sixseconds-header-root dd,\n.sixseconds-header-root h1,\n.sixseconds-header-root h2,\n.sixseconds-header-root h3,\n.sixseconds-header-root h4,\n.sixseconds-header-root h5,\n.sixseconds-header-root h6,\n.sixseconds-header-root hr,\n.sixseconds-header-root figure,\n.sixseconds-header-root p,\n.sixseconds-header-root pre,\n.sixseconds-header-root span,\n.sixseconds-header-root a,\n.sixseconds-header-root div,\n.sixseconds-header-root li,\n.sixseconds-header-root button {\n  font-family: "Inter", sans-serif !important;\n}\n\n.sixseconds-header-main-list-menu {\n  display: flex;\n}\n\n.sixseconds-header-main-list-menu li {\n  padding: 0.5rem 0.5rem;\n}\n\n.sixseconds-header-main-list-menu li a {\n  padding: 0 0.25rem;\n  font-weight: 500;\n  font-size: 12px;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item {\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-link {\n  text-decoration: none;\n  color: #2a2a2a;\n  /* Closer to 6seconds */\n  font-weight: 500;\n  font-size: 15px;\n  padding: 8px 4px;\n  transition: color 0.2s ease;\n  font-family: "Inter", sans-serif;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-link:hover {\n  color: #0073b1;\n}\n\n/* Submenu (Dropdown) */\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-data {\n  position: absolute;\n  top: 150%;\n  left: 0;\n  background: white;\n  border: 1px solid #e2e8f0;\n  border-top: 3px solid #0073b1;\n  box-shadow:\n    0px 12px 48px rgba(0, 0, 0, 0.12),\n    0 4px 16px rgba(0, 0, 0, 0.08);\n  /* Even more premium shadow */\n  display: block;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(12px);\n  width: 200px;\n  z-index: 1000;\n  border-radius: 4px;\n  /* More angular per 6seconds style */\n  padding: 8px 0;\n  transition:\n    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    visibility 0.25s;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-data li {\n  list-style: none;\n  padding: 0;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-link {\n  display: block;\n  padding: 12px 28px;\n  text-decoration: none;\n  color: #2a2a2a;\n  /* Darker grey */\n  font-weight: 400;\n  font-size: 14.5px;\n  line-height: 1.4;\n  white-space: normal;\n  transition: all 0.2s ease;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-link:hover {\n  background: #f0f7fb;\n  color: #0073b1;\n  padding-left: 32px;\n  /* Slight nudge */\n}\n\n/* Caret rotation on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-desktop-caret {\n  transform: rotate(180deg);\n}\n\n/* Show dropdown on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-submenu-data {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sixseconds-header-small-device-menu {\n  display: none;\n  width: 100%;\n  left: 0;\n  top: 64px;\n  background-color: #fff;\n  position: fixed;\n  overflow-y: auto;\n  height: 95vh;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n}\n\n.sixseconds-header-small-device-menu a.sixseconds-header-bg-main-menu {\n  display: block;\n  text-decoration: none;\n}\n\n.sixseconds-header-submenu-child li {\n  padding: 0.5rem 0;\n}\n\n.sixseconds-header-submenu-child li a {\n  text-decoration: none;\n}\n\n.sixseconds-header-layout-mobile-menu {\n  padding-bottom: 12px;\n  padding-inline: 0;\n  height: 95vh;\n  overflow-y: auto;\n  padding-top: 8px;\n}\n\n.sixseconds-header-small-device-menu a {\n  background-color: transparent;\n  font-size: 16px;\n  /* Slightly larger */\n  font-weight: 600;\n  /* Bolder for parent items */\n  color: #1a1c1e;\n  margin-bottom: 4px;\n  padding: 16px 20px;\n  border-bottom: 1px solid #f1f3f4;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.sixseconds-header-small-device-menu .sixseconds-header-submenu-child {\n  padding-left: 0px;\n  min-width: 100%;\n  max-width: 100%;\n  margin-top: 0;\n  background-color: #fbfbfc;\n  /* Slightly different background for sub-items */\n  color: #1a1c1e;\n}\n\n.sixseconds-header-small-device-menu ul li .sixseconds-header-submenu-child-link {\n  padding: 12px 32px;\n  /* Indent more */\n  font-weight: 400;\n  /* Regular weight for sub-links */\n  font-size: 14px;\n}\n\n.sixseconds-header-small-device-menu ul li a {\n  background-color: transparent;\n  color: #4a4d50;\n}\n\n.sixseconds-header-small-device-menu ul {\n  padding-left: 15px;\n}\n\n.sixseconds-header-desktop-menu {\n  display: flex;\n}\n\n.sixseconds-header-button-hamburger {\n  display: none;\n  position: absolute;\n  right: 20px;\n  top: 18px;\n  z-index: 9;\n}\n\n.sixseconds-header-root .tox-editor-header {\n  background-color: transparent;\n}\n\n.sixseconds-header-hamburger-icon-btn {\n  padding: 8px;\n  color: #5f6368;\n}\n\n.sixseconds-header-desktop-menu .sixseconds-header-menu-item .sixseconds-header-menu-link {\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.sixseconds-header-small-device-menu {\n  padding-inline: 20px;\n}\n\n@media screen and (max-width: 600px) and (min-width: 320px) {\n  .sixseconds-header-notification-icon-error .MuiBadge-badge {\n    font-size: 10px;\n    padding: 0 4px;\n    min-width: 16px;\n    right: 5px;\n    background-color: #d32f2f;\n  }\n\n  .sixseconds-header-submenu nav {\n    padding: 0 !important;\n  }\n\n  .sixseconds-header-root .MuiPagination-root.MuiPagination-outlined {\n    display: flex;\n    justify-content: center;\n    margin-left: 0;\n  }\n\n  .sixseconds-header-toggle-btn-menu {\n    position: absolute;\n    right: 20px;\n    top: 12px;\n    z-index: 99;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n    width: 100%;\n    position: fixed;\n    left: 0;\n    background: #fff;\n    top: 64px;\n  }\n\n  .main.sixseconds-header-login-page .sixseconds-header-login-body {\n    width: 90% !important;\n  }\n\n  .sixseconds-header-submenu {\n    width: 100%;\n    max-width: 100% !important;\n  }\n\n  .sixseconds-header-sidebar {\n    width: 280px !important;\n    background-color: #f9fafb;\n    z-index: 99;\n    border-right: 1px solid #e0e0e0;\n  }\n\n  .sixseconds-header-sidemenu {\n    width: 280px;\n    background-color: #f9fafb;\n  }\n\n  .sixseconds-header-logo {\n    opacity: 1;\n  }\n\n  .sixseconds-header-profile .sixseconds-header-menu {\n    min-width: 280px;\n    width: 100% !important;\n  }\n}\n\n@media screen and (max-width: 1024px) and (min-width: 600px) {\n  .sixseconds-header-toggle-btn-menu {\n    position: absolute;\n    right: 20px;\n    top: 12px;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n  }\n\n  .main.sixseconds-header-login-page .sixseconds-header-login-body {\n    width: 450px !important;\n  }\n\n  .sixseconds-header-banner {\n    margin-left: 0 !important;\n  }\n\n  .sixseconds-header-submenu {\n    width: 100%;\n    max-width: 100% !important;\n  }\n\n  .sixseconds-header-sidebar {\n    width: 280px !important;\n    background-color: #f9fafb;\n    z-index: 99;\n  }\n\n  .sixseconds-header-sidemenu {\n    width: 280px;\n    background-color: #f9fafb;\n  }\n\n  .sixseconds-header-logo {\n    opacity: 1;\n  }\n\n  .sixseconds-header-profile .sixseconds-header-menu {\n    min-width: 280px;\n    width: 100% !important;\n  }\n}\n\n@media screen and (max-width: 1380px) and (min-width: 1024px) {\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n    width: 100%;\n    position: fixed;\n    left: 0;\n    background: #fff;\n    top: 64px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n}\n';
 const EMOTION_KEY = "sixseconds";
 const FONT_HREF = "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";
 const SHADOW_STYLES = styleText.replace(/@import\s+url\([^)]*\)\s*;?/gi, "");

package/dist/index.es.js

@@ -12855,7 +12855,7 @@ const IMAGES = {
   Us,
   DefaultLang
 };
-const styleText = '@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");\n\n/* ==========================================================================\n   Style isolation — keep the header looking the same in every host app.\n\n   Two layers work together (see providers/shadowIsland.tsx):\n     1. `:host`  — the Shadow DOM boundary reset. Inherited properties\n        (font, color, line-height, letter-spacing, text-align, …) are the\n        only things that cross a shadow boundary, so we neutralise them once\n        here and re-establish our own baseline. Host author rules cannot\n        reach past the boundary at all.\n     2. `.sixseconds-header-root` — a defensive reset for the light DOM. It\n        applies when this stylesheet is used outside the shadow root (e.g. a\n        consumer imports `sixseconds-modules/styles`, or during the brief\n        pre-mount window), so leaked host rules for bare tags (button, a, ul,\n        li, *, resets) get reverted before our styles apply.\n\n   IMPORTANT — specificity/order contract:\n     `.sixseconds-header-root, .sixseconds-header-root *` is specificity\n     (0,1,0), identical to an Emotion-generated class. This reset is declared\n     ABOVE all component rules, so at equal specificity our own MUI/Emotion\n     styles (injected/declared later) always win. Never raise this reset to\n     an element-qualified selector or add `!important` — that would beat the\n     header\'s own styling. `all: revert` also intentionally leaves custom\n     properties, `direction` and `unicode-bidi` untouched, so RTL keeps\n     working.\n   ========================================================================== */\n\n:host {\n  /* `!important` is load-bearing: for NORMAL declarations the outer (document)\n     tree wins the shadow cascade, so a host page rule that happens to match our\n     host element (e.g. `div { font-family: … }`) would otherwise beat this reset\n     and re-leak inherited props across the boundary. `!important` makes the inner\n     (shadow) tree win. `all` intentionally leaves `direction`/`unicode-bidi` and\n     custom properties untouched, so RTL context still inherits (the header has\n     `[dir=\'rtl\']` handling) — this is desired. Our isolated MUI theme does not\n     enable CSS variables, so no `--mui-*` host var is consumed inside the tree. */\n  all: initial !important;\n  box-sizing: border-box !important;\n  display: block !important;\n  font-family: "Inter", sans-serif !important;\n  color: #1a1c1e !important;\n  line-height: 1.5 !important;\n  text-align: start !important;\n  -webkit-font-smoothing: antialiased !important;\n}\n\n.sixseconds-header-root,\n.sixseconds-header-root *,\n.sixseconds-header-root *::before,\n.sixseconds-header-root *::after {\n  all: revert;\n  box-sizing: border-box;\n}\n\n.sixseconds-header-root blockquote,\n.sixseconds-header-root dl,\n.sixseconds-header-root dd,\n.sixseconds-header-root h1,\n.sixseconds-header-root h2,\n.sixseconds-header-root h3,\n.sixseconds-header-root h4,\n.sixseconds-header-root h5,\n.sixseconds-header-root h6,\n.sixseconds-header-root hr,\n.sixseconds-header-root figure,\n.sixseconds-header-root p,\n.sixseconds-header-root pre,\n.sixseconds-header-root span,\n.sixseconds-header-root a,\n.sixseconds-header-root div,\n.sixseconds-header-root li,\n.sixseconds-header-root button {\n  font-family: "Inter", sans-serif !important;\n}\n\n.sixseconds-header-main-list-menu {\n  display: flex;\n}\n\n.sixseconds-header-main-list-menu li {\n  padding: 0.5rem 0.5rem;\n}\n\n.sixseconds-header-main-list-menu li a {\n  padding: 0 0.25rem;\n  font-weight: 500;\n  font-size: 12px;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item {\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-link {\n  text-decoration: none;\n  color: #2a2a2a;\n  /* Closer to 6seconds */\n  font-weight: 500;\n  font-size: 15px;\n  padding: 8px 4px;\n  transition: color 0.2s ease;\n  font-family: "Inter", sans-serif;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-link:hover {\n  color: #0073b1;\n}\n\n/* Submenu (Dropdown) */\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-data {\n  position: absolute;\n  top: 150%;\n  left: 0;\n  background: white;\n  border: 1px solid #e2e8f0;\n  border-top: 3px solid #0073b1;\n  box-shadow:\n    0px 12px 48px rgba(0, 0, 0, 0.12),\n    0 4px 16px rgba(0, 0, 0, 0.08);\n  /* Even more premium shadow */\n  display: block;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(12px);\n  width: 200px;\n  z-index: 1000;\n  border-radius: 4px;\n  /* More angular per 6seconds style */\n  padding: 8px 0;\n  transition:\n    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    visibility 0.25s;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-data li {\n  list-style: none;\n  padding: 0;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-link {\n  display: block;\n  padding: 12px 28px;\n  text-decoration: none;\n  color: #2a2a2a;\n  /* Darker grey */\n  font-weight: 400;\n  font-size: 14.5px;\n  line-height: 1.4;\n  white-space: normal;\n  transition: all 0.2s ease;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-link:hover {\n  background: #f0f7fb;\n  color: #0073b1;\n  padding-left: 32px;\n  /* Slight nudge */\n}\n\n/* Caret rotation on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-desktop-caret {\n  transform: rotate(180deg);\n}\n\n/* Show dropdown on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-submenu-data {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sixseconds-header-small-device-menu {\n  display: none;\n  width: 100%;\n  left: 0;\n  top: 64px;\n  background-color: #fff;\n  position: fixed;\n  overflow-y: auto;\n  height: 95vh;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n}\n\n.sixseconds-header-small-device-menu a.sixseconds-header-bg-main-menu {\n  display: block;\n  text-decoration: none;\n}\n\n.sixseconds-header-submenu-child li {\n  padding: 0.5rem 0;\n}\n\n.sixseconds-header-submenu-child li a {\n  text-decoration: none;\n}\n\n.sixseconds-header-layout-mobile-menu {\n  padding-bottom: 12px;\n  padding-inline: 0;\n  height: 95vh;\n  overflow-y: auto;\n  padding-top: 8px;\n}\n\n.sixseconds-header-small-device-menu a {\n  background-color: transparent;\n  font-size: 16px;\n  /* Slightly larger */\n  font-weight: 600;\n  /* Bolder for parent items */\n  color: #1a1c1e;\n  margin-bottom: 4px;\n  padding: 16px 20px;\n  border-bottom: 1px solid #f1f3f4;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.sixseconds-header-small-device-menu .sixseconds-header-submenu-child {\n  padding-left: 0px;\n  min-width: 100%;\n  max-width: 100%;\n  margin-top: 0;\n  background-color: #fbfbfc;\n  /* Slightly different background for sub-items */\n  color: #1a1c1e;\n}\n\n.sixseconds-header-small-device-menu ul li .sixseconds-header-submenu-child-link {\n  padding: 12px 32px;\n  /* Indent more */\n  font-weight: 400;\n  /* Regular weight for sub-links */\n  font-size: 14px;\n}\n\n.sixseconds-header-small-device-menu ul li a {\n  background-color: transparent;\n  color: #4a4d50;\n}\n\n.sixseconds-header-small-device-menu ul {\n  padding-left: 15px;\n}\n\n.sixseconds-header-desktop-menu {\n  display: flex;\n}\n\n.sixseconds-header-button-hamburger {\n  display: none;\n  position: absolute;\n  right: 20px;\n  top: 18px;\n  z-index: 9;\n}\n\n.sixseconds-header-root .tox-editor-header {\n  background-color: transparent;\n}\n\n.sixseconds-header-hamburger-icon-btn {\n  padding: 8px;\n  color: #5f6368;\n}\n\n.sixseconds-header-desktop-menu .sixseconds-header-menu-item .sixseconds-header-menu-link {\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.sixseconds-header-small-device-menu {\n  padding-inline: 20px;\n}\n\n@media screen and (max-width: 600px) and (min-width: 320px) {\n  .sixseconds-header-notification-icon-error .MuiBadge-badge {\n    font-size: 10px;\n    padding: 0 4px;\n    min-width: 16px;\n    right: 5px;\n    background-color: #d32f2f;\n  }\n\n  .sixseconds-header-submenu nav {\n    padding: 0 !important;\n  }\n\n  .sixseconds-header-root .MuiPagination-root.MuiPagination-outlined {\n    display: flex;\n    justify-content: center;\n    margin-left: 0;\n  }\n\n  .sixseconds-header-toggle-btn-menu {\n    position: absolute;\n    right: 20px;\n    top: 12px;\n    z-index: 99;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n    width: 100%;\n    position: fixed;\n    left: 0;\n    background: #fff;\n    top: 64px;\n  }\n\n  .main.sixseconds-header-login-page .sixseconds-header-login-body {\n    width: 90% !important;\n  }\n\n  .sixseconds-header-submenu {\n    width: 100%;\n    max-width: 100% !important;\n  }\n\n  .sixseconds-header-sidebar {\n    width: 280px !important;\n    background-color: #f9fafb;\n    z-index: 99;\n    border-right: 1px solid #e0e0e0;\n  }\n\n  .sixseconds-header-sidemenu {\n    width: 280px;\n    background-color: #f9fafb;\n  }\n\n  .sixseconds-header-logo {\n    opacity: 1;\n  }\n\n  .sixseconds-header-profile .sixseconds-header-menu {\n    min-width: 280px;\n    width: 100% !important;\n  }\n}\n\n@media screen and (max-width: 1024px) and (min-width: 600px) {\n  .sixseconds-header-toggle-btn-menu {\n    position: absolute;\n    right: 20px;\n    top: 12px;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n  }\n\n  .main.sixseconds-header-login-page .sixseconds-header-login-body {\n    width: 450px !important;\n  }\n\n  .sixseconds-header-banner {\n    margin-left: 0 !important;\n  }\n\n  .sixseconds-header-submenu {\n    width: 100%;\n    max-width: 100% !important;\n  }\n\n  .sixseconds-header-sidebar {\n    width: 280px !important;\n    background-color: #f9fafb;\n    z-index: 99;\n  }\n\n  .sixseconds-header-sidemenu {\n    width: 280px;\n    background-color: #f9fafb;\n  }\n\n  .sixseconds-header-logo {\n    opacity: 1;\n  }\n\n  .sixseconds-header-profile .sixseconds-header-menu {\n    min-width: 280px;\n    width: 100% !important;\n  }\n}\n\n@media screen and (max-width: 1380px) and (min-width: 1024px) {\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n    width: 100%;\n    position: fixed;\n    left: 0;\n    background: #fff;\n    top: 64px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n}\n';
+const styleText = '@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");\n\n/* ==========================================================================\n   Style isolation — keep the header looking the same in every host app.\n\n   Two layers work together (see providers/shadowIsland.tsx):\n     1. `:host`  — the Shadow DOM boundary reset. Inherited properties\n        (font, color, line-height, letter-spacing, text-align, …) are the\n        only things that cross a shadow boundary, so we neutralise them once\n        here and re-establish our own baseline. Host author rules cannot\n        reach past the boundary at all.\n     2. `:where(.sixseconds-header-root …)` — a small, zero-specificity baseline\n        (box-sizing, replaced-element sizing) that replaces the host normalize the\n        boundary blocks, without ever overriding the component\'s own styles.\n\n   Inside the shadow tree the boundary already blocks the host\'s author CSS, so\n   NO aggressive `all: revert` is used here — that would strip the very baseline\n   the header needs (the host\'s global normalize no longer reaches inside the\n   boundary), which is what made replaced elements render at their intrinsic\n   size. Instead we provide our own small baseline below, written with `:where()`\n   so it has ZERO specificity and can never override the component\'s own Emotion\n   styles (a plain `.sixseconds-header-root svg {}` would be (0,1,1) and would\n   clobber MUI icon sizing).\n   ========================================================================== */\n\n:host {\n  /* `!important` is load-bearing: for NORMAL declarations the outer (document)\n     tree wins the shadow cascade, so a host page rule that happens to match our\n     host element (e.g. `div { font-family: … }`) would otherwise beat this reset\n     and re-leak inherited props across the boundary. `!important` makes the inner\n     (shadow) tree win. `all` intentionally leaves `direction`/`unicode-bidi` and\n     custom properties untouched, so RTL context still inherits (the header has\n     `[dir=\'rtl\']` handling) — this is desired. Our isolated MUI theme does not\n     enable CSS variables, so no `--mui-*` host var is consumed inside the tree. */\n  all: initial !important;\n  box-sizing: border-box !important;\n  display: block !important;\n  font-family: "Inter", sans-serif !important;\n  color: #1a1c1e !important;\n  line-height: 1.5 !important;\n  text-align: start !important;\n  -webkit-font-smoothing: antialiased !important;\n}\n\n/* Baseline for the isolated tree — replaces what the host\'s normalize used to\n   provide. `:where()` keeps specificity at 0 so Emotion/MUI always win; these\n   rules only fill in defaults nothing else sets. */\n\n:where(.sixseconds-header-root),\n:where(.sixseconds-header-root *),\n:where(.sixseconds-header-root *::before),\n:where(.sixseconds-header-root *::after) {\n  box-sizing: border-box;\n}\n\n:where(.sixseconds-header-root img),\n:where(.sixseconds-header-root svg),\n:where(.sixseconds-header-root video),\n:where(.sixseconds-header-root canvas) {\n  max-width: 100%;\n}\n\n:where(.sixseconds-header-root img),\n:where(.sixseconds-header-root svg),\n:where(.sixseconds-header-root video) {\n  height: auto;\n}\n\n.sixseconds-header-root blockquote,\n.sixseconds-header-root dl,\n.sixseconds-header-root dd,\n.sixseconds-header-root h1,\n.sixseconds-header-root h2,\n.sixseconds-header-root h3,\n.sixseconds-header-root h4,\n.sixseconds-header-root h5,\n.sixseconds-header-root h6,\n.sixseconds-header-root hr,\n.sixseconds-header-root figure,\n.sixseconds-header-root p,\n.sixseconds-header-root pre,\n.sixseconds-header-root span,\n.sixseconds-header-root a,\n.sixseconds-header-root div,\n.sixseconds-header-root li,\n.sixseconds-header-root button {\n  font-family: "Inter", sans-serif !important;\n}\n\n.sixseconds-header-main-list-menu {\n  display: flex;\n}\n\n.sixseconds-header-main-list-menu li {\n  padding: 0.5rem 0.5rem;\n}\n\n.sixseconds-header-main-list-menu li a {\n  padding: 0 0.25rem;\n  font-weight: 500;\n  font-size: 12px;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item {\n  position: relative;\n  padding: 0 16px;\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-link {\n  text-decoration: none;\n  color: #2a2a2a;\n  /* Closer to 6seconds */\n  font-weight: 500;\n  font-size: 15px;\n  padding: 8px 4px;\n  transition: color 0.2s ease;\n  font-family: "Inter", sans-serif;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-link:hover {\n  color: #0073b1;\n}\n\n/* Submenu (Dropdown) */\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-data {\n  position: absolute;\n  top: 150%;\n  left: 0;\n  background: white;\n  border: 1px solid #e2e8f0;\n  border-top: 3px solid #0073b1;\n  box-shadow:\n    0px 12px 48px rgba(0, 0, 0, 0.12),\n    0 4px 16px rgba(0, 0, 0, 0.08);\n  /* Even more premium shadow */\n  display: block;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(12px);\n  width: 200px;\n  z-index: 1000;\n  border-radius: 4px;\n  /* More angular per 6seconds style */\n  padding: 8px 0;\n  transition:\n    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),\n    visibility 0.25s;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-data li {\n  list-style: none;\n  padding: 0;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-link {\n  display: block;\n  padding: 12px 28px;\n  text-decoration: none;\n  color: #2a2a2a;\n  /* Darker grey */\n  font-weight: 400;\n  font-size: 14.5px;\n  line-height: 1.4;\n  white-space: normal;\n  transition: all 0.2s ease;\n}\n\n.sixseconds-header-main-list-menu .sixseconds-header-submenu-link:hover {\n  background: #f0f7fb;\n  color: #0073b1;\n  padding-left: 32px;\n  /* Slight nudge */\n}\n\n/* Caret rotation on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-desktop-caret {\n  transform: rotate(180deg);\n}\n\n/* Show dropdown on hover */\n\n.sixseconds-header-main-list-menu .sixseconds-header-menu-item:hover .sixseconds-header-submenu-data {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.sixseconds-header-small-device-menu {\n  display: none;\n  width: 100%;\n  left: 0;\n  top: 64px;\n  background-color: #fff;\n  position: fixed;\n  overflow-y: auto;\n  height: 95vh;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\n}\n\n.sixseconds-header-small-device-menu a.sixseconds-header-bg-main-menu {\n  display: block;\n  text-decoration: none;\n}\n\n.sixseconds-header-submenu-child li {\n  padding: 0.5rem 0;\n}\n\n.sixseconds-header-submenu-child li a {\n  text-decoration: none;\n}\n\n.sixseconds-header-layout-mobile-menu {\n  padding-bottom: 12px;\n  padding-inline: 0;\n  height: 95vh;\n  overflow-y: auto;\n  padding-top: 8px;\n}\n\n.sixseconds-header-small-device-menu a {\n  background-color: transparent;\n  font-size: 16px;\n  /* Slightly larger */\n  font-weight: 600;\n  /* Bolder for parent items */\n  color: #1a1c1e;\n  margin-bottom: 4px;\n  padding: 16px 20px;\n  border-bottom: 1px solid #f1f3f4;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.sixseconds-header-small-device-menu .sixseconds-header-submenu-child {\n  padding-left: 0px;\n  min-width: 100%;\n  max-width: 100%;\n  margin-top: 0;\n  background-color: #fbfbfc;\n  /* Slightly different background for sub-items */\n  color: #1a1c1e;\n}\n\n.sixseconds-header-small-device-menu ul li .sixseconds-header-submenu-child-link {\n  padding: 12px 32px;\n  /* Indent more */\n  font-weight: 400;\n  /* Regular weight for sub-links */\n  font-size: 14px;\n}\n\n.sixseconds-header-small-device-menu ul li a {\n  background-color: transparent;\n  color: #4a4d50;\n}\n\n.sixseconds-header-small-device-menu ul {\n  padding-left: 15px;\n}\n\n.sixseconds-header-desktop-menu {\n  display: flex;\n}\n\n.sixseconds-header-button-hamburger {\n  display: none;\n  position: absolute;\n  right: 20px;\n  top: 18px;\n  z-index: 9;\n}\n\n.sixseconds-header-root .tox-editor-header {\n  background-color: transparent;\n}\n\n.sixseconds-header-hamburger-icon-btn {\n  padding: 8px;\n  color: #5f6368;\n}\n\n.sixseconds-header-desktop-menu .sixseconds-header-menu-item .sixseconds-header-menu-link {\n  font-size: 14px;\n  font-weight: 500;\n}\n\n.sixseconds-header-small-device-menu {\n  padding-inline: 20px;\n}\n\n@media screen and (max-width: 600px) and (min-width: 320px) {\n  .sixseconds-header-notification-icon-error .MuiBadge-badge {\n    font-size: 10px;\n    padding: 0 4px;\n    min-width: 16px;\n    right: 5px;\n    background-color: #d32f2f;\n  }\n\n  .sixseconds-header-submenu nav {\n    padding: 0 !important;\n  }\n\n  .sixseconds-header-root .MuiPagination-root.MuiPagination-outlined {\n    display: flex;\n    justify-content: center;\n    margin-left: 0;\n  }\n\n  .sixseconds-header-toggle-btn-menu {\n    position: absolute;\n    right: 20px;\n    top: 12px;\n    z-index: 99;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n    width: 100%;\n    position: fixed;\n    left: 0;\n    background: #fff;\n    top: 64px;\n  }\n\n  .main.sixseconds-header-login-page .sixseconds-header-login-body {\n    width: 90% !important;\n  }\n\n  .sixseconds-header-submenu {\n    width: 100%;\n    max-width: 100% !important;\n  }\n\n  .sixseconds-header-sidebar {\n    width: 280px !important;\n    background-color: #f9fafb;\n    z-index: 99;\n    border-right: 1px solid #e0e0e0;\n  }\n\n  .sixseconds-header-sidemenu {\n    width: 280px;\n    background-color: #f9fafb;\n  }\n\n  .sixseconds-header-logo {\n    opacity: 1;\n  }\n\n  .sixseconds-header-profile .sixseconds-header-menu {\n    min-width: 280px;\n    width: 100% !important;\n  }\n}\n\n@media screen and (max-width: 1024px) and (min-width: 600px) {\n  .sixseconds-header-toggle-btn-menu {\n    position: absolute;\n    right: 20px;\n    top: 12px;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n  }\n\n  .main.sixseconds-header-login-page .sixseconds-header-login-body {\n    width: 450px !important;\n  }\n\n  .sixseconds-header-banner {\n    margin-left: 0 !important;\n  }\n\n  .sixseconds-header-submenu {\n    width: 100%;\n    max-width: 100% !important;\n  }\n\n  .sixseconds-header-sidebar {\n    width: 280px !important;\n    background-color: #f9fafb;\n    z-index: 99;\n  }\n\n  .sixseconds-header-sidemenu {\n    width: 280px;\n    background-color: #f9fafb;\n  }\n\n  .sixseconds-header-logo {\n    opacity: 1;\n  }\n\n  .sixseconds-header-profile .sixseconds-header-menu {\n    min-width: 280px;\n    width: 100% !important;\n  }\n}\n\n@media screen and (max-width: 1380px) and (min-width: 1024px) {\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-desktop-menu {\n    display: none;\n  }\n\n  .sixseconds-header-small-device-menu {\n    display: block;\n    width: 100%;\n    position: fixed;\n    left: 0;\n    background: #fff;\n    top: 64px;\n  }\n\n  .sixseconds-header-button-hamburger {\n    display: block;\n  }\n\n  .sixseconds-header-right-icons {\n    padding-right: 25px;\n  }\n}\n';
 const EMOTION_KEY = "sixseconds";
 const FONT_HREF = "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap";
 const SHADOW_STYLES = styleText.replace(/@import\s+url\([^)]*\)\s*;?/gi, "");

package/dist/styles.css

@@ -9,21 +9,18 @@
         only things that cross a shadow boundary, so we neutralise them once
         here and re-establish our own baseline. Host author rules cannot
         reach past the boundary at all.
-     2. `.sixseconds-header-root` — a defensive reset for the light DOM. It
-        applies when this stylesheet is used outside the shadow root (e.g. a
-        consumer imports `sixseconds-modules/styles`, or during the brief
-        pre-mount window), so leaked host rules for bare tags (button, a, ul,
-        li, *, resets) get reverted before our styles apply.
-
-   IMPORTANT — specificity/order contract:
-     `.sixseconds-header-root, .sixseconds-header-root *` is specificity
-     (0,1,0), identical to an Emotion-generated class. This reset is declared
-     ABOVE all component rules, so at equal specificity our own MUI/Emotion
-     styles (injected/declared later) always win. Never raise this reset to
-     an element-qualified selector or add `!important` — that would beat the
-     header's own styling. `all: revert` also intentionally leaves custom
-     properties, `direction` and `unicode-bidi` untouched, so RTL keeps
-     working.
+     2. `:where(.sixseconds-header-root …)` — a small, zero-specificity baseline
+        (box-sizing, replaced-element sizing) that replaces the host normalize the
+        boundary blocks, without ever overriding the component's own styles.
+
+   Inside the shadow tree the boundary already blocks the host's author CSS, so
+   NO aggressive `all: revert` is used here — that would strip the very baseline
+   the header needs (the host's global normalize no longer reaches inside the
+   boundary), which is what made replaced elements render at their intrinsic
+   size. Instead we provide our own small baseline below, written with `:where()`
+   so it has ZERO specificity and can never override the component's own Emotion
+   styles (a plain `.sixseconds-header-root svg {}` would be (0,1,1) and would
+   clobber MUI icon sizing).
    ========================================================================== */
 :host {
   /* `!important` is load-bearing: for NORMAL declarations the outer (document)
@@ -44,14 +41,29 @@
   -webkit-font-smoothing: antialiased !important;
 }
 
-.sixseconds-header-root,
-.sixseconds-header-root *,
-.sixseconds-header-root *::before,
-.sixseconds-header-root *::after {
-  all: revert;
+/* Baseline for the isolated tree — replaces what the host's normalize used to
+   provide. `:where()` keeps specificity at 0 so Emotion/MUI always win; these
+   rules only fill in defaults nothing else sets. */
+:where(.sixseconds-header-root),
+:where(.sixseconds-header-root *),
+:where(.sixseconds-header-root *::before),
+:where(.sixseconds-header-root *::after) {
   box-sizing: border-box;
 }
 
+:where(.sixseconds-header-root img),
+:where(.sixseconds-header-root svg),
+:where(.sixseconds-header-root video),
+:where(.sixseconds-header-root canvas) {
+  max-width: 100%;
+}
+
+:where(.sixseconds-header-root img),
+:where(.sixseconds-header-root svg),
+:where(.sixseconds-header-root video) {
+  height: auto;
+}
+
 .sixseconds-header-root blockquote,
 .sixseconds-header-root dl,
 .sixseconds-header-root dd,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sixseconds-modules",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",