@midas-ds/components 16.2.3 → 16.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,9 @@
1
+ ## 16.2.4 (2026-01-09)
2
+
3
+ ### 🩹 Fixes
4
+
5
+ - **components, layout:** adjust forced colors for active links ([2b27898722](https://github.com/migrationsverket/midas/commit/2b27898722))
6
+
1
7
  ## 16.2.3 (2026-01-09)
2
8
 
3
9
  ### 🩹 Fixes
package/assets/Layout.css CHANGED
@@ -1 +1 @@
1
- ._baseLayout_1hkrq_1{--sideBarWidth: 230px;--headerHeight: 69px}@media(min-width:1024px){._baseLayout_1hkrq_1{--headerHeight: 85px}}._mainContent_1hkrq_10{display:flex;flex-direction:row}._header_1hkrq_15{position:sticky;top:0;font-family:var(--midas-typography-font-family);padding:.5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--midas-border-color-subtle);background-color:var(--midas-background-base)}._header_1hkrq_15._headerExternal_1hkrq_26{padding:1rem}@media(min-width:1024px){._header_1hkrq_15._headerExternal_1hkrq_26{padding:1.25rem 1rem;z-index:3}}@media(min-width:1024px){._header_1hkrq_15{padding:1.25rem 1rem;z-index:calc(var(--midas-z-index-sidebar) + var(--midas-z-index-above))}}._headerContent_1hkrq_41{display:flex;flex-flow:row wrap;align-items:center;gap:1rem}._headerContent_1hkrq_41>svg{display:none}@media(min-width:1024px){._headerContent_1hkrq_41{gap:2rem}._headerContent_1hkrq_41>svg{display:initial}}._logo_1hkrq_60{display:none;max-height:40px}@media(min-width:1024px){._logo_1hkrq_60{display:flex}}._headerItems_1hkrq_69{max-height:40px;display:flex;flex-direction:row}._toggleButton_1hkrq_75{display:block}@media(min-width:1024px){._toggleButton_1hkrq_75{display:none!important}}._sidebar_1hkrq_83{font-family:var(--midas-typography-font-family);background-color:var(--midas-background-base);display:flex;flex-flow:column;flex:0 0 var(--sideBarWidth);overflow-y:auto;transition:.2s;position:fixed;top:0;height:100vh;width:var(--sideBarWidth);transform:translate(calc(var(--sideBarWidth) * -1));z-index:calc(var(--midas-z-index-sidebar));border-right:1px solid var(--midas-border-color-subtle)}@media(min-width:1024px){._sidebar_1hkrq_83{position:sticky;top:var(--headerHeight);align-self:start;height:calc(100vh - var(--headerHeight));transform:none;width:var(--sideBarWidth)}}._main_1hkrq_10{font-family:var(--midas-typography-font-family);flex:0 0 auto;width:100%;min-height:100%}._app_1hkrq_116{background-clip:content-box}@media(min-width:1024px){._app_1hkrq_116{padding:2rem}}._sidebarOpened_1hkrq_124{transform:translate(0)}._sidebarHeader_1hkrq_128{padding:1rem;margin-bottom:1rem;position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;overflow:hidden}._appName_1hkrq_140{color:var(--midas-text-primary);font-size:.875rem;font-weight:400;margin:0}._collapseButton_1hkrq_147{display:none!important;padding:calc(.875rem - 1px)!important}@media(min-width:1024px){._collapseButton_1hkrq_147{display:flex!important}}._sidebarCollapsed_1hkrq_156{--sideBarWidth: 68px;transition:all .2s ease-out}._sidebarCollapsed_1hkrq_156 ._sidebarHeader_1hkrq_128{justify-content:center}._userName_1hkrq_166{color:var(--midas-text-primary);margin:0 0 .25rem;font-size:.875rem;font-weight:500;display:none}@media(min-width:1024px){._userName_1hkrq_166{display:block}}._abbr_1hkrq_178{font-size:.875rem;font-weight:500;align-self:center}._userTitle_1hkrq_184{color:var(--midas-text-primary);margin:0;font-size:.875rem;font-weight:400;display:none}@media(min-width:1024px){._userTitle_1hkrq_184{display:block}}._title_1hkrq_196{margin:0;font-size:1rem;font-weight:500;display:block}@media(min-width:1024px){._title_1hkrq_196{display:none}}._sidebarNav_1hkrq_207{padding:.5rem;overflow-y:auto;margin-bottom:auto}._list_1hkrq_213{list-style-type:none;padding:0;margin:0 0 1rem}._listGroupTitle_1hkrq_219{color:var(--midas-text-secondary);font-size:.875rem;padding:.5rem;margin:0}._listItem_1hkrq_226{display:flex;position:relative}._listItemCollapsed_1hkrq_231{justify-content:center}._listLink_1hkrq_235{all:unset;display:flex;align-items:center;gap:.5rem;padding:.625rem .5rem;color:var(--midas-text-primary);flex:1 0 0%;transition:.1s;text-decoration:none}._listLink_1hkrq_235 svg{stroke:var(--midas-icon-primary)}@media(forced-colors:active){._listLink_1hkrq_235 svg{stroke:currentColor}}._listLink_1hkrq_235[data-hovered],._listLink_1hkrq_235:visited{background-color:var(--midas-menu-item-background-hover);color:var(--midas-text-primary);cursor:pointer}:is(._listLink_1hkrq_235[data-hovered],._listLink_1hkrq_235:visited) svg{stroke:var(--midas-icon-primary);min-width:1.25rem}@media(forced-colors:active){:is(._listLink_1hkrq_235[data-hovered],._listLink_1hkrq_235:visited) svg{stroke:currentColor}}@media(forced-colors:active){._listLink_1hkrq_235[data-hovered],._listLink_1hkrq_235:visited{background-color:inherit;text-decoration:underline}}._listLink_1hkrq_235[data-pressed]{background-color:var(--midas-button-background-tertiary-active)}._listLink_1hkrq_235[data-focused]{box-shadow:none}._listLink_1hkrq_235:focus-visible{outline:none}._listLink_1hkrq_235[data-focus-visible]{box-shadow:var(--midas-state-focus);outline:none}@media(forced-colors:active){._listLink_1hkrq_235[data-focus-visible]{outline:var(--midas-state-focus-contrast-mode-outline) solid;outline-offset:var(--midas-state-focus-contrast-mode-offset)}}._listLinkCollapsed_1hkrq_298{padding:.625rem;flex-grow:unset}._active_1hkrq_303{background-color:var(--midas-menu-item-background-selected);color:var(--midas-text-primary);border-left:.125rem solid var(--midas-border-color-tertiary);font-weight:600}@media(forced-colors:active){._active_1hkrq_303{background-color:inherit;border-color:highlight;color:highlight;transition:none}}@media(forced-colors:active){._active_1hkrq_303[data-hovered]{color:highlight}}._linkText_1hkrq_323{opacity:1;display:block;transition:all .2s;transition-behavior:allow-discrete}._backdrop_1hkrq_330{pointer-events:none;display:none;position:fixed;inset:0;background-color:#3232327f;opacity:0;transition:all .1s;transition-behavior:allow-discrete}._backdrop_1hkrq_330._backdropOpened_1hkrq_340{pointer-events:all;opacity:1;display:block;transition:all .2s}@starting-style{._backdrop_1hkrq_330._backdropOpened_1hkrq_340,._linkText_1hkrq_323{opacity:0}}._skipToContent_1hkrq_358{position:absolute;top:0;right:100%;z-index:var(--midas-z-index-skip-to-content)}._skipToContent_1hkrq_358[data-focus-visible],._skipToContent_1hkrq_358:focus-visible{right:auto;left:5px;top:5px}._navbar_1hkrq_372{position:fixed;bottom:0;width:100%;font-family:var(--midas-typography-font-family);display:flex;align-items:center;justify-content:center;border-top:1px solid var(--midas-border-color-subtle);background-color:var(--midas-background-base)}._navbarList_1hkrq_384{flex:1;list-style-type:none;margin:0;padding:0;display:flex;flex-direction:row;align-items:stretch}._navbarList_1hkrq_384>li{flex:1;width:100%;display:flex;justify-content:center;align-items:stretch}@media(min-width:1024px){._navbarList_1hkrq_384{max-width:600px}}._navbarItem_1hkrq_406{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;padding:.5rem;color:var(--midas-text-primary);text-decoration:none;font-size:var(--midas-typography-font-size-10);line-height:var(--midas-typography-line-height-20);text-align:center;text-wrap:nowrap;text-overflow:ellipsis}._navbarItem_1hkrq_406[data-hovered],._navbarItem_1hkrq_406[data-active]{background-color:var(--midas-button-background-primary-base);color:var(--midas-text-on-color);cursor:pointer}@media(forced-colors:active){._navbarItem_1hkrq_406[data-hovered],._navbarItem_1hkrq_406[data-active]{color:selecteditem}}@media(forced-colors:active){._navbarItem_1hkrq_406[data-focus-visible]{outline:var(--midas-state-focus-contrast-mode-outline) solid;outline-offset:var(--midas-state-focus-contrast-mode-offset)}}._navbarItem_1hkrq_406 svg{flex:0 0 auto}@media(min-width:1024px){._navbarItem_1hkrq_406{gap:.5rem;flex-direction:row;padding:1rem .5rem}}@media(max-width:479px){._headerExternal_1hkrq_26{border:none}}._headerContentExternal_1hkrq_457{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}._headerContentExternal_1hkrq_457 ._logoExternalContainer_1hkrq_465{display:flex;align-items:center;gap:2rem}@media(min-width:1024px){._headerContentExternal_1hkrq_457 ._logoExternal_1hkrq_465{display:none}}._headerContentExternal_1hkrq_457 ._logoExternalDesktop_1hkrq_477{display:none}@media(min-width:1024px){._headerContentExternal_1hkrq_457 ._logoExternalDesktop_1hkrq_477{display:block}}@media(min-width:1024px){._navbarWrapper_1hkrq_486{display:none}}@media(prefers-reduced-motion){._sidebar_1hkrq_83,._sidebarCollapsed_1hkrq_156,._listLink_1hkrq_235,._linkText_1hkrq_323,._backdrop_1hkrq_330,._backdrop_1hkrq_330._backdropOpened_1hkrq_340{transition:none}@starting-style{._backdrop_1hkrq_330._backdropOpened_1hkrq_340,._linkText_1hkrq_323{opacity:1}}}
1
+ ._baseLayout_1n71v_1{--sideBarWidth: 230px;--headerHeight: 69px}@media(min-width:1024px){._baseLayout_1n71v_1{--headerHeight: 85px}}._mainContent_1n71v_10{display:flex;flex-direction:row}._header_1n71v_15{position:sticky;top:0;font-family:var(--midas-typography-font-family);padding:.5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--midas-border-color-subtle);background-color:var(--midas-background-base)}._header_1n71v_15._headerExternal_1n71v_26{padding:1rem}@media(min-width:1024px){._header_1n71v_15._headerExternal_1n71v_26{padding:1.25rem 1rem;z-index:3}}@media(min-width:1024px){._header_1n71v_15{padding:1.25rem 1rem;z-index:calc(var(--midas-z-index-sidebar) + var(--midas-z-index-above))}}._headerContent_1n71v_41{display:flex;flex-flow:row wrap;align-items:center;gap:1rem}._headerContent_1n71v_41>svg{display:none}@media(min-width:1024px){._headerContent_1n71v_41{gap:2rem}._headerContent_1n71v_41>svg{display:initial}}._logo_1n71v_60{display:none;max-height:40px}@media(min-width:1024px){._logo_1n71v_60{display:flex}}._headerItems_1n71v_69{max-height:40px;display:flex;flex-direction:row}._toggleButton_1n71v_75{display:block}@media(min-width:1024px){._toggleButton_1n71v_75{display:none!important}}._sidebar_1n71v_83{font-family:var(--midas-typography-font-family);background-color:var(--midas-background-base);display:flex;flex-flow:column;flex:0 0 var(--sideBarWidth);overflow-y:auto;transition:.2s;position:fixed;top:0;height:100vh;width:var(--sideBarWidth);transform:translate(calc(var(--sideBarWidth) * -1));z-index:calc(var(--midas-z-index-sidebar));border-right:1px solid var(--midas-border-color-subtle)}@media(min-width:1024px){._sidebar_1n71v_83{position:sticky;top:var(--headerHeight);align-self:start;height:calc(100vh - var(--headerHeight));transform:none;width:var(--sideBarWidth)}}._main_1n71v_10{font-family:var(--midas-typography-font-family);flex:0 0 auto;width:100%;min-height:100%}._app_1n71v_116{background-clip:content-box}@media(min-width:1024px){._app_1n71v_116{padding:2rem}}._sidebarOpened_1n71v_124{transform:translate(0)}._sidebarHeader_1n71v_128{padding:1rem;margin-bottom:1rem;position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;overflow:hidden}._appName_1n71v_140{color:var(--midas-text-primary);font-size:.875rem;font-weight:400;margin:0}._collapseButton_1n71v_147{display:none!important;padding:calc(.875rem - 1px)!important}@media(min-width:1024px){._collapseButton_1n71v_147{display:flex!important}}._sidebarCollapsed_1n71v_156{--sideBarWidth: 68px;transition:all .2s ease-out}._sidebarCollapsed_1n71v_156 ._sidebarHeader_1n71v_128{justify-content:center}._userName_1n71v_166{color:var(--midas-text-primary);margin:0 0 .25rem;font-size:.875rem;font-weight:500;display:none}@media(min-width:1024px){._userName_1n71v_166{display:block}}._abbr_1n71v_178{font-size:.875rem;font-weight:500;align-self:center}._userTitle_1n71v_184{color:var(--midas-text-primary);margin:0;font-size:.875rem;font-weight:400;display:none}@media(min-width:1024px){._userTitle_1n71v_184{display:block}}._title_1n71v_196{margin:0;font-size:1rem;font-weight:500;display:block}@media(min-width:1024px){._title_1n71v_196{display:none}}._sidebarNav_1n71v_207{padding:.5rem;overflow-y:auto;margin-bottom:auto}._list_1n71v_213{list-style-type:none;padding:0;margin:0 0 1rem}._listGroupTitle_1n71v_219{color:var(--midas-text-secondary);font-size:.875rem;padding:.5rem;margin:0}._listItem_1n71v_226{display:flex;position:relative}._listItemCollapsed_1n71v_231{justify-content:center}._listLink_1n71v_235{all:unset;display:flex;align-items:center;gap:.5rem;padding:.625rem .5rem;color:var(--midas-text-primary);flex:1 0 0%;transition:.1s;text-decoration:none}._listLink_1n71v_235 svg{stroke:var(--midas-icon-primary)}@media(forced-colors:active){._listLink_1n71v_235 svg{stroke:currentColor}}._listLink_1n71v_235[data-hovered],._listLink_1n71v_235:visited{background-color:var(--midas-menu-item-background-hover);color:var(--midas-text-primary);cursor:pointer}:is(._listLink_1n71v_235[data-hovered],._listLink_1n71v_235:visited) svg{stroke:var(--midas-icon-primary);min-width:1.25rem}@media(forced-colors:active){:is(._listLink_1n71v_235[data-hovered],._listLink_1n71v_235:visited) svg{stroke:currentColor}}@media(forced-colors:active){._listLink_1n71v_235[data-hovered],._listLink_1n71v_235:visited{background-color:inherit;text-decoration:underline}}._listLink_1n71v_235[data-pressed]{background-color:var(--midas-button-background-tertiary-active)}._listLink_1n71v_235[data-focused]{box-shadow:none}._listLink_1n71v_235:focus-visible{outline:none}._listLink_1n71v_235[data-focus-visible]{box-shadow:var(--midas-state-focus);outline:none}@media(forced-colors:active){._listLink_1n71v_235[data-focus-visible]{outline:var(--midas-state-focus-contrast-mode-outline) solid;outline-offset:var(--midas-state-focus-contrast-mode-offset)}}._listLinkCollapsed_1n71v_298{padding:.625rem;flex-grow:unset}._active_1n71v_303{background-color:var(--midas-menu-item-background-selected);color:var(--midas-text-primary);border-left:.125rem solid var(--midas-border-color-tertiary);font-weight:600}@media(forced-colors:active){._active_1n71v_303{transition:none}}._linkText_1n71v_314{opacity:1;display:block;transition:all .2s;transition-behavior:allow-discrete}._backdrop_1n71v_321{pointer-events:none;display:none;position:fixed;inset:0;background-color:#3232327f;opacity:0;transition:all .1s;transition-behavior:allow-discrete}._backdrop_1n71v_321._backdropOpened_1n71v_331{pointer-events:all;opacity:1;display:block;transition:all .2s}@starting-style{._backdrop_1n71v_321._backdropOpened_1n71v_331,._linkText_1n71v_314{opacity:0}}._skipToContent_1n71v_349{position:absolute;top:0;right:100%;z-index:var(--midas-z-index-skip-to-content)}._skipToContent_1n71v_349[data-focus-visible],._skipToContent_1n71v_349:focus-visible{right:auto;left:5px;top:5px}._navbar_1n71v_363{position:fixed;bottom:0;width:100%;font-family:var(--midas-typography-font-family);display:flex;align-items:center;justify-content:center;border-top:1px solid var(--midas-border-color-subtle);background-color:var(--midas-background-base)}._navbarList_1n71v_375{flex:1;list-style-type:none;margin:0;padding:0;display:flex;flex-direction:row;align-items:stretch}._navbarList_1n71v_375>li{flex:1;width:100%;display:flex;justify-content:center;align-items:stretch}@media(min-width:1024px){._navbarList_1n71v_375{max-width:600px}}._navbarItem_1n71v_397{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.25rem;padding:.5rem;color:var(--midas-text-primary);text-decoration:none;font-size:var(--midas-typography-font-size-10);line-height:var(--midas-typography-line-height-20);text-align:center;text-wrap:nowrap;text-overflow:ellipsis}._navbarItem_1n71v_397[data-hovered],._navbarItem_1n71v_397[data-active]{background-color:var(--midas-button-background-primary-base);color:var(--midas-text-on-color);cursor:pointer}@media(forced-colors:active){._navbarItem_1n71v_397[data-hovered],._navbarItem_1n71v_397[data-active]{text-decoration:underline}}@media(forced-colors:active){._navbarItem_1n71v_397[data-focus-visible]{outline:var(--midas-state-focus-contrast-mode-outline) solid;outline-offset:var(--midas-state-focus-contrast-mode-offset)}}._navbarItem_1n71v_397 svg{flex:0 0 auto}@media(min-width:1024px){._navbarItem_1n71v_397{gap:.5rem;flex-direction:row;padding:1rem .5rem}}@media(max-width:479px){._headerExternal_1n71v_26{border:none}}._headerContentExternal_1n71v_448{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem}._headerContentExternal_1n71v_448 ._logoExternalContainer_1n71v_456{display:flex;align-items:center;gap:2rem}@media(min-width:1024px){._headerContentExternal_1n71v_448 ._logoExternal_1n71v_456{display:none}}._headerContentExternal_1n71v_448 ._logoExternalDesktop_1n71v_468{display:none}@media(min-width:1024px){._headerContentExternal_1n71v_448 ._logoExternalDesktop_1n71v_468{display:block}}@media(min-width:1024px){._navbarWrapper_1n71v_477{display:none}}@media(prefers-reduced-motion){._sidebar_1n71v_83,._sidebarCollapsed_1n71v_156,._listLink_1n71v_235,._linkText_1n71v_314,._backdrop_1n71v_321,._backdrop_1n71v_321._backdropOpened_1n71v_331{transition:none}@starting-style{._backdrop_1n71v_321._backdropOpened_1n71v_331,._linkText_1n71v_314{opacity:1}}}
@@ -0,0 +1,465 @@
1
+ import { jsx as e, jsxs as r, Fragment as H } from "react/jsx-runtime";
2
+ import { G as S } from "./GridItem-5t1Z14sM.js";
3
+ import * as N from "react";
4
+ import { c as u } from "./clsx-AexbMWKp.js";
5
+ import { Link as L, RouterProvider as O } from "react-aria-components";
6
+ import { B as M } from "./Button-wBgWrXj3.js";
7
+ import { a as G, T as W } from "./Tooltip-m032jGgF.js";
8
+ import { a as y, B as I } from "./BadgeContainer-CKVsfTlF.js";
9
+ import { c as E } from "./createLucideIcon-D4r5Phnh.js";
10
+ import { u as C } from "./useLocalizedStringFormatter-ZgRJmvHC.js";
11
+ import { variables as j } from "@midas-ds/theme";
12
+ import { L as g } from "./Logo-InDSslpO.js";
13
+ import { X as D } from "./x-BXShoIAM.js";
14
+ import '../assets/Layout.css';const q = [
15
+ ["path", { d: "M4 12h16", key: "1lakjw" }],
16
+ ["path", { d: "M4 18h16", key: "19g7jn" }],
17
+ ["path", { d: "M4 6h16", key: "1o0s65" }]
18
+ ], A = E("menu", q);
19
+ const R = [
20
+ ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
21
+ ["path", { d: "M9 3v18", key: "fh3hqa" }],
22
+ ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
23
+ ], $ = E("panel-left-close", R);
24
+ const F = [
25
+ ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
26
+ ["path", { d: "M9 3v18", key: "fh3hqa" }],
27
+ ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
28
+ ], X = E("panel-left-open", F), J = "_baseLayout_1n71v_1", K = "_mainContent_1n71v_10", Q = "_header_1n71v_15", U = "_headerExternal_1n71v_26", V = "_headerContent_1n71v_41", Y = "_logo_1n71v_60", Z = "_headerItems_1n71v_69", ee = "_toggleButton_1n71v_75", ae = "_sidebar_1n71v_83", ne = "_main_1n71v_10", te = "_app_1n71v_116", se = "_sidebarOpened_1n71v_124", ie = "_sidebarHeader_1n71v_128", re = "_appName_1n71v_140", oe = "_collapseButton_1n71v_147", le = "_sidebarCollapsed_1n71v_156", de = "_userName_1n71v_166", ce = "_userTitle_1n71v_184", me = "_title_1n71v_196", pe = "_sidebarNav_1n71v_207", _e = "_list_1n71v_213", ve = "_listGroupTitle_1n71v_219", ue = "_listItem_1n71v_226", he = "_listItemCollapsed_1n71v_231", be = "_listLink_1n71v_235", Ne = "_listLinkCollapsed_1n71v_298", fe = "_active_1n71v_303", ke = "_backdrop_1n71v_321", Ce = "_backdropOpened_1n71v_331", xe = "_skipToContent_1n71v_349", ge = "_navbar_1n71v_363", Le = "_navbarList_1n71v_375", ye = "_navbarItem_1n71v_397", Ie = "_headerContentExternal_1n71v_448", Me = "_logoExternalContainer_1n71v_456", Ee = "_logoExternal_1n71v_456", Te = "_logoExternalDesktop_1n71v_468", Se = "_navbarWrapper_1n71v_477", a = {
29
+ baseLayout: J,
30
+ mainContent: K,
31
+ header: Q,
32
+ headerExternal: U,
33
+ headerContent: V,
34
+ logo: Y,
35
+ headerItems: Z,
36
+ toggleButton: ee,
37
+ sidebar: ae,
38
+ main: ne,
39
+ app: te,
40
+ sidebarOpened: se,
41
+ sidebarHeader: ie,
42
+ appName: re,
43
+ collapseButton: oe,
44
+ sidebarCollapsed: le,
45
+ userName: de,
46
+ userTitle: ce,
47
+ title: me,
48
+ sidebarNav: pe,
49
+ list: _e,
50
+ listGroupTitle: ve,
51
+ listItem: ue,
52
+ listItemCollapsed: he,
53
+ listLink: be,
54
+ listLinkCollapsed: Ne,
55
+ active: fe,
56
+ backdrop: ke,
57
+ backdropOpened: Ce,
58
+ skipToContent: xe,
59
+ navbar: ge,
60
+ navbarList: Le,
61
+ navbarItem: ye,
62
+ headerContentExternal: Ie,
63
+ logoExternalContainer: Me,
64
+ logoExternal: Ee,
65
+ logoExternalDesktop: Te,
66
+ navbarWrapper: Se
67
+ }, w = N.createContext(
68
+ void 0
69
+ ), ze = ({
70
+ items: t,
71
+ title: s,
72
+ user: i,
73
+ app: n,
74
+ children: o,
75
+ clientSideRouter: m,
76
+ clientSideHref: d,
77
+ headerChildren: v,
78
+ isCollapsed: _,
79
+ setIsCollapsed: p,
80
+ isOpened: h,
81
+ setIsOpened: l,
82
+ variant: b,
83
+ id: f
84
+ }) => /* @__PURE__ */ e(
85
+ w.Provider,
86
+ {
87
+ value: {
88
+ items: t,
89
+ title: s,
90
+ user: i,
91
+ app: n,
92
+ headerChildren: v,
93
+ isCollapsed: _,
94
+ setIsCollapsed: p,
95
+ isOpened: h,
96
+ setIsOpened: l,
97
+ clientSideRouter: m,
98
+ clientSideHref: d,
99
+ variant: b,
100
+ id: f
101
+ },
102
+ children: o
103
+ }
104
+ ), k = () => {
105
+ const t = N.useContext(w);
106
+ if (!t)
107
+ throw new Error("useLayoutContext must be used within a LayoutProvider");
108
+ return t;
109
+ }, P = ({
110
+ title: t,
111
+ href: s,
112
+ icon: i,
113
+ active: n,
114
+ hasBadge: o
115
+ }) => {
116
+ const { isCollapsed: m, setIsOpened: d, clientSideHref: v } = k(), _ = v ? v(s) : s, [p, h] = N.useState(!1);
117
+ return N.useEffect(() => {
118
+ if (typeof window < "u") {
119
+ const l = window.location.pathname === _ || window.location.pathname.startsWith(_ + "/");
120
+ h(n ?? l);
121
+ }
122
+ }, [n, _]), m ? /* @__PURE__ */ r(G, { children: [
123
+ /* @__PURE__ */ e(
124
+ L,
125
+ {
126
+ href: s,
127
+ "aria-label": t,
128
+ className: u(
129
+ a.listLink,
130
+ a.listLinkCollapsed,
131
+ p && a.active
132
+ ),
133
+ onPress: () => d?.(!1),
134
+ children: /* @__PURE__ */ r(y, { children: [
135
+ /* @__PURE__ */ e(
136
+ i,
137
+ {
138
+ size: 20,
139
+ "aria-label": t
140
+ }
141
+ ),
142
+ o && /* @__PURE__ */ e(I, {})
143
+ ] })
144
+ }
145
+ ),
146
+ /* @__PURE__ */ e(W, { placement: "right", children: t })
147
+ ] }) : /* @__PURE__ */ r(
148
+ L,
149
+ {
150
+ href: s,
151
+ "aria-label": t,
152
+ className: u(a.listLink, p && a.active),
153
+ onPress: () => d?.(!1),
154
+ children: [
155
+ /* @__PURE__ */ r(y, { children: [
156
+ /* @__PURE__ */ e(i, { size: 20 }),
157
+ o && /* @__PURE__ */ e(I, {})
158
+ ] }),
159
+ t
160
+ ]
161
+ }
162
+ );
163
+ }, Be = { closeMenu: "Close menu", openMenu: "Open menu", maximizeMenu: "Maximize menu", minimizeMenu: "Minimize menu", sidebarMenu: "Sidebar menu", bottomMenu: "Bottom menu", skipToContent: "Skip to main content" }, Oe = { closeMenu: "Stäng meny", openMenu: "Öppna meny", maximizeMenu: "Maximera meny", minimizeMenu: "Minimera meny", sidebarMenu: "Sidomeny", bottomMenu: "Bottenmeny", skipToContent: "Hoppa till huvudinnehåll" }, x = {
164
+ en: Be,
165
+ sv: Oe
166
+ }, we = () => {
167
+ const {
168
+ items: t,
169
+ app: s,
170
+ isOpened: i,
171
+ isCollapsed: n,
172
+ setIsCollapsed: o,
173
+ setIsOpened: m,
174
+ clientSideRouter: d,
175
+ clientSideHref: v,
176
+ id: _
177
+ } = k(), p = C(x), h = ({ group: l }) => /* @__PURE__ */ e("ul", { className: a.list, children: l.items.map((b, f) => /* @__PURE__ */ e(
178
+ "li",
179
+ {
180
+ className: u(
181
+ a.listItem,
182
+ n && a.listItemCollapsed
183
+ ),
184
+ children: /* @__PURE__ */ e(P, { ...b })
185
+ },
186
+ "link_" + f
187
+ )) });
188
+ return N.useEffect(() => {
189
+ const l = (b) => {
190
+ b.key === "Escape" && m !== void 0 && m(!1);
191
+ };
192
+ return window.addEventListener("keydown", l), () => {
193
+ window.removeEventListener("keydown", l);
194
+ };
195
+ }, [m]), /* @__PURE__ */ r(
196
+ "aside",
197
+ {
198
+ id: _,
199
+ className: u(
200
+ a.sidebar,
201
+ n && a.sidebarCollapsed,
202
+ i && a.sidebarOpened
203
+ ),
204
+ children: [
205
+ /* @__PURE__ */ r("div", { className: a.sidebarHeader, children: [
206
+ !n && /* @__PURE__ */ e("p", { className: a.appName, children: s.name }),
207
+ /* @__PURE__ */ e(
208
+ M,
209
+ {
210
+ variant: "icon",
211
+ "aria-label": n ? p.format("maximizeMenu") : p.format("minimizeMenu"),
212
+ onPress: () => o(!n),
213
+ className: a.collapseButton,
214
+ children: n ? /* @__PURE__ */ e(X, { size: 20 }) : /* @__PURE__ */ e($, { size: 20 })
215
+ }
216
+ )
217
+ ] }),
218
+ /* @__PURE__ */ e(
219
+ "nav",
220
+ {
221
+ className: a.sidebarNav,
222
+ "aria-label": p.format("sidebarMenu"),
223
+ children: /* @__PURE__ */ e("ul", { className: a.list, children: t.map((l, b) => /* @__PURE__ */ r("li", { children: [
224
+ l.title && !n && /* @__PURE__ */ e("p", { className: a.listGroupTitle, children: l.title }),
225
+ d ? /* @__PURE__ */ e(
226
+ O,
227
+ {
228
+ navigate: d,
229
+ useHref: v,
230
+ children: /* @__PURE__ */ e(h, { group: l })
231
+ }
232
+ ) : /* @__PURE__ */ e(h, { group: l })
233
+ ] }, "list_" + b)) })
234
+ }
235
+ )
236
+ ]
237
+ }
238
+ );
239
+ }, Pe = () => {
240
+ const {
241
+ title: t,
242
+ user: s,
243
+ app: i,
244
+ isOpened: n,
245
+ setIsOpened: o,
246
+ setIsCollapsed: m,
247
+ headerChildren: d,
248
+ variant: v,
249
+ id: _
250
+ } = k(), p = C(x);
251
+ return v === "external" ? /* @__PURE__ */ e("header", { className: u(a.header, a.headerExternal), children: /* @__PURE__ */ r("div", { className: a.headerContentExternal, children: [
252
+ /* @__PURE__ */ r("div", { className: a.logoExternalContainer, children: [
253
+ /* @__PURE__ */ e(
254
+ g,
255
+ {
256
+ size: "x-small",
257
+ padding: !1,
258
+ className: a.logoExternal
259
+ }
260
+ ),
261
+ /* @__PURE__ */ e(
262
+ g,
263
+ {
264
+ size: "small",
265
+ padding: !1,
266
+ className: a.logoExternalDesktop
267
+ }
268
+ ),
269
+ /* @__PURE__ */ r("div", { children: [
270
+ /* @__PURE__ */ e("p", { className: a.userName, children: s.name }),
271
+ /* @__PURE__ */ e("p", { className: a.userTitle, children: s.title })
272
+ ] })
273
+ ] }),
274
+ /* @__PURE__ */ e("div", { className: a.headerItems, children: d })
275
+ ] }) }) : /* @__PURE__ */ r(
276
+ "header",
277
+ {
278
+ className: a.header,
279
+ style: {
280
+ borderTop: `solid 4px ${i.color ? i.color : j.brandPrimary}`
281
+ },
282
+ children: [
283
+ /* @__PURE__ */ r("div", { className: a.headerContent, children: [
284
+ /* @__PURE__ */ e("div", { className: a.logo, children: /* @__PURE__ */ e(
285
+ g,
286
+ {
287
+ size: "small",
288
+ padding: !1
289
+ }
290
+ ) }),
291
+ n !== void 0 && /* @__PURE__ */ e(
292
+ M,
293
+ {
294
+ variant: "icon",
295
+ className: a.toggleButton,
296
+ "aria-label": n ? p.format("closeMenu") : p.format("openMenu"),
297
+ "aria-controls": _,
298
+ onPressStart: () => {
299
+ m(!1), o?.(!0);
300
+ },
301
+ children: n ? /* @__PURE__ */ e(
302
+ D,
303
+ {
304
+ size: 20,
305
+ "aria-hidden": "true"
306
+ }
307
+ ) : /* @__PURE__ */ e(
308
+ A,
309
+ {
310
+ size: 20,
311
+ "aria-hidden": "true"
312
+ }
313
+ )
314
+ }
315
+ ),
316
+ /* @__PURE__ */ r("div", { children: [
317
+ /* @__PURE__ */ e("p", { className: a.userName, children: s.name }),
318
+ /* @__PURE__ */ e("p", { className: a.userTitle, children: s.title }),
319
+ /* @__PURE__ */ e("p", { className: a.title, children: t })
320
+ ] })
321
+ ] }),
322
+ /* @__PURE__ */ e("div", { className: a.headerItems, children: d })
323
+ ]
324
+ }
325
+ );
326
+ }, z = ({
327
+ id: t = "main:first-of-type"
328
+ }) => {
329
+ const s = () => {
330
+ const n = document.querySelector(t);
331
+ n && (n.tabIndex = -1, n.focus(), setTimeout(() => n.removeAttribute("tabindex"), 1e3));
332
+ }, i = C(x);
333
+ return /* @__PURE__ */ e(
334
+ M,
335
+ {
336
+ onPress: s,
337
+ className: a.skipToContent,
338
+ children: i.format("skipToContent")
339
+ }
340
+ );
341
+ }, He = () => {
342
+ const { isOpened: t, setIsOpened: s } = k();
343
+ return t ? /* @__PURE__ */ e(
344
+ "div",
345
+ {
346
+ className: u(a.backdrop, a.backdropOpened),
347
+ onClick: () => {
348
+ s?.(!1);
349
+ },
350
+ "aria-hidden": !0
351
+ }
352
+ ) : null;
353
+ }, Ge = () => {
354
+ const { items: t, clientSideRouter: s, clientSideHref: i } = k(), n = C(x), o = t.at(0)?.items;
355
+ return /* @__PURE__ */ e(
356
+ "nav",
357
+ {
358
+ className: a.navbar,
359
+ "aria-label": n.format("bottomMenu"),
360
+ children: o && /* @__PURE__ */ e("ul", { className: u(a.navbarList), children: s ? /* @__PURE__ */ e(
361
+ O,
362
+ {
363
+ navigate: s,
364
+ useHref: i,
365
+ children: /* @__PURE__ */ e(B, { items: o })
366
+ }
367
+ ) : /* @__PURE__ */ e(B, { items: o }) })
368
+ }
369
+ );
370
+ }, B = ({
371
+ items: t
372
+ }) => /* @__PURE__ */ e(H, { children: t.map(({ href: s, active: i, icon: n, title: o, hasBadge: m }, d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ r(
373
+ L,
374
+ {
375
+ href: s,
376
+ className: u(a.navbarItem),
377
+ "data-active": i,
378
+ "aria-current": i && "page",
379
+ children: [
380
+ /* @__PURE__ */ r(y, { children: [
381
+ /* @__PURE__ */ e(n, { size: 20 }),
382
+ m && /* @__PURE__ */ e(I, {})
383
+ ] }),
384
+ o
385
+ ]
386
+ }
387
+ ) }, d)) }), c = ({
388
+ items: t,
389
+ title: s,
390
+ user: i,
391
+ app: n,
392
+ children: o,
393
+ headerChildren: m,
394
+ clientSideRouter: d,
395
+ clientSideHref: v,
396
+ variant: _,
397
+ className: p
398
+ }) => {
399
+ const [h, l] = N.useState(!1), [b, f] = N.useState(!1), T = N.useId();
400
+ return _ === "external" ? /* @__PURE__ */ e(
401
+ c.Provider,
402
+ {
403
+ items: t,
404
+ title: s,
405
+ user: i,
406
+ app: n,
407
+ clientSideRouter: d,
408
+ clientSideHref: v,
409
+ headerChildren: m,
410
+ isCollapsed: h,
411
+ setIsCollapsed: l,
412
+ variant: _,
413
+ id: T,
414
+ children: /* @__PURE__ */ r("div", { className: u(a.baseLayout, p), children: [
415
+ /* @__PURE__ */ e(z, {}),
416
+ /* @__PURE__ */ e(c.Header, {}),
417
+ /* @__PURE__ */ r("div", { className: a.mainContent, children: [
418
+ /* @__PURE__ */ e(c.Sidebar, {}),
419
+ /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e("main", { className: a.main, children: /* @__PURE__ */ e("div", { className: a.app, children: o }) }) }),
420
+ /* @__PURE__ */ e(c.Backdrop, {})
421
+ ] }),
422
+ /* @__PURE__ */ e("div", { className: a.navbarWrapper, children: /* @__PURE__ */ e(c.Navbar, {}) })
423
+ ] })
424
+ }
425
+ ) : /* @__PURE__ */ e(
426
+ c.Provider,
427
+ {
428
+ items: t,
429
+ title: s,
430
+ user: i,
431
+ app: n,
432
+ clientSideRouter: d,
433
+ clientSideHref: v,
434
+ headerChildren: m,
435
+ isCollapsed: h,
436
+ setIsCollapsed: l,
437
+ isOpened: b,
438
+ setIsOpened: f,
439
+ variant: _,
440
+ id: T,
441
+ children: /* @__PURE__ */ r("div", { className: u(a.baseLayout, p), children: [
442
+ /* @__PURE__ */ e(z, {}),
443
+ /* @__PURE__ */ e(c.Header, {}),
444
+ /* @__PURE__ */ r("div", { className: a.mainContent, children: [
445
+ /* @__PURE__ */ e(c.Sidebar, {}),
446
+ /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e("main", { className: a.main, children: /* @__PURE__ */ e("div", { className: a.app, children: o }) }) }),
447
+ /* @__PURE__ */ e(c.Backdrop, {})
448
+ ] })
449
+ ] })
450
+ }
451
+ );
452
+ };
453
+ c.Provider = ze;
454
+ c.Header = Pe;
455
+ c.Sidebar = we;
456
+ c.SidebarLink = P;
457
+ c.Navbar = Ge;
458
+ c.Backdrop = He;
459
+ export {
460
+ Pe as H,
461
+ c as L,
462
+ Ge as N,
463
+ we as S,
464
+ P as a
465
+ };
package/index.js CHANGED
@@ -20,7 +20,7 @@ import { G as $ } from "./chunks/GridItem-5t1Z14sM.js";
20
20
  import { H as ao } from "./chunks/Heading-D8tNNJkt.js";
21
21
  import { I as eo } from "./chunks/InfoBanner-DLiVpNON.js";
22
22
  import { L as so } from "./chunks/Label-Dup4lWaR.js";
23
- import { H as xo, L as mo, N as fo, S as io, a as no } from "./chunks/Layout-LjCfmVhQ.js";
23
+ import { H as xo, L as mo, N as fo, S as io, a as no } from "./chunks/Layout-ClW2Lbvq.js";
24
24
  import { L as lo } from "./chunks/Link-yTNUNv3C.js";
25
25
  import { L as bo } from "./chunks/LinkButton-3nAekUJ4.js";
26
26
  import { L as uo } from "./chunks/Logo-InDSslpO.js";
package/layout/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { H as e, L as s, N as b, S as d, a as i } from "../chunks/Layout-LjCfmVhQ.js";
1
+ import { H as e, L as s, N as b, S as d, a as i } from "../chunks/Layout-ClW2Lbvq.js";
2
2
  export {
3
3
  e as Header,
4
4
  s as Layout,
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "description": "Midas Components",
15
15
  "homepage": "https://designsystem.migrationsverket.se/",
16
16
  "license": "CC0-1.0",
17
- "version": "16.2.3",
17
+ "version": "16.2.4",
18
18
  "module": "./index.js",
19
19
  "type": "module",
20
20
  "main": "./index.js",
@@ -1,465 +0,0 @@
1
- import { jsx as e, jsxs as i, Fragment as P } from "react/jsx-runtime";
2
- import { G as T } from "./GridItem-5t1Z14sM.js";
3
- import * as v from "react";
4
- import { c as u } from "./clsx-AexbMWKp.js";
5
- import { Link as q, RouterProvider as B } from "react-aria-components";
6
- import { B as I } from "./Button-wBgWrXj3.js";
7
- import { a as H, T as G } from "./Tooltip-m032jGgF.js";
8
- import { a as L, B as y } from "./BadgeContainer-CKVsfTlF.js";
9
- import { c as M } from "./createLucideIcon-D4r5Phnh.js";
10
- import { u as C } from "./useLocalizedStringFormatter-ZgRJmvHC.js";
11
- import { variables as W } from "@midas-ds/theme";
12
- import { L as g } from "./Logo-InDSslpO.js";
13
- import { X as j } from "./x-BXShoIAM.js";
14
- import '../assets/Layout.css';const D = [
15
- ["path", { d: "M4 12h16", key: "1lakjw" }],
16
- ["path", { d: "M4 18h16", key: "19g7jn" }],
17
- ["path", { d: "M4 6h16", key: "1o0s65" }]
18
- ], A = M("menu", D);
19
- const R = [
20
- ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
21
- ["path", { d: "M9 3v18", key: "fh3hqa" }],
22
- ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
23
- ], $ = M("panel-left-close", R);
24
- const F = [
25
- ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
26
- ["path", { d: "M9 3v18", key: "fh3hqa" }],
27
- ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
28
- ], X = M("panel-left-open", F), J = "_baseLayout_1hkrq_1", K = "_mainContent_1hkrq_10", Q = "_header_1hkrq_15", U = "_headerExternal_1hkrq_26", V = "_headerContent_1hkrq_41", Y = "_logo_1hkrq_60", Z = "_headerItems_1hkrq_69", ee = "_toggleButton_1hkrq_75", ae = "_sidebar_1hkrq_83", te = "_main_1hkrq_10", ne = "_app_1hkrq_116", se = "_sidebarOpened_1hkrq_124", re = "_sidebarHeader_1hkrq_128", ie = "_appName_1hkrq_140", oe = "_collapseButton_1hkrq_147", le = "_sidebarCollapsed_1hkrq_156", de = "_userName_1hkrq_166", ce = "_userTitle_1hkrq_184", me = "_title_1hkrq_196", pe = "_sidebarNav_1hkrq_207", he = "_list_1hkrq_213", _e = "_listGroupTitle_1hkrq_219", ue = "_listItem_1hkrq_226", ke = "_listItemCollapsed_1hkrq_231", be = "_listLink_1hkrq_235", ve = "_listLinkCollapsed_1hkrq_298", Ne = "_active_1hkrq_303", fe = "_backdrop_1hkrq_330", Ce = "_backdropOpened_1hkrq_340", xe = "_skipToContent_1hkrq_358", ge = "_navbar_1hkrq_372", qe = "_navbarList_1hkrq_384", Le = "_navbarItem_1hkrq_406", ye = "_headerContentExternal_1hkrq_457", Ie = "_logoExternalContainer_1hkrq_465", Me = "_logoExternal_1hkrq_465", Ee = "_logoExternalDesktop_1hkrq_477", Te = "_navbarWrapper_1hkrq_486", a = {
29
- baseLayout: J,
30
- mainContent: K,
31
- header: Q,
32
- headerExternal: U,
33
- headerContent: V,
34
- logo: Y,
35
- headerItems: Z,
36
- toggleButton: ee,
37
- sidebar: ae,
38
- main: te,
39
- app: ne,
40
- sidebarOpened: se,
41
- sidebarHeader: re,
42
- appName: ie,
43
- collapseButton: oe,
44
- sidebarCollapsed: le,
45
- userName: de,
46
- userTitle: ce,
47
- title: me,
48
- sidebarNav: pe,
49
- list: he,
50
- listGroupTitle: _e,
51
- listItem: ue,
52
- listItemCollapsed: ke,
53
- listLink: be,
54
- listLinkCollapsed: ve,
55
- active: Ne,
56
- backdrop: fe,
57
- backdropOpened: Ce,
58
- skipToContent: xe,
59
- navbar: ge,
60
- navbarList: qe,
61
- navbarItem: Le,
62
- headerContentExternal: ye,
63
- logoExternalContainer: Ie,
64
- logoExternal: Me,
65
- logoExternalDesktop: Ee,
66
- navbarWrapper: Te
67
- }, O = v.createContext(
68
- void 0
69
- ), Se = ({
70
- items: n,
71
- title: s,
72
- user: r,
73
- app: t,
74
- children: o,
75
- clientSideRouter: m,
76
- clientSideHref: d,
77
- headerChildren: _,
78
- isCollapsed: h,
79
- setIsCollapsed: p,
80
- isOpened: k,
81
- setIsOpened: l,
82
- variant: b,
83
- id: N
84
- }) => /* @__PURE__ */ e(
85
- O.Provider,
86
- {
87
- value: {
88
- items: n,
89
- title: s,
90
- user: r,
91
- app: t,
92
- headerChildren: _,
93
- isCollapsed: h,
94
- setIsCollapsed: p,
95
- isOpened: k,
96
- setIsOpened: l,
97
- clientSideRouter: m,
98
- clientSideHref: d,
99
- variant: b,
100
- id: N
101
- },
102
- children: o
103
- }
104
- ), f = () => {
105
- const n = v.useContext(O);
106
- if (!n)
107
- throw new Error("useLayoutContext must be used within a LayoutProvider");
108
- return n;
109
- }, w = ({
110
- title: n,
111
- href: s,
112
- icon: r,
113
- active: t,
114
- hasBadge: o
115
- }) => {
116
- const { isCollapsed: m, setIsOpened: d, clientSideHref: _ } = f(), h = _ ? _(s) : s, [p, k] = v.useState(!1);
117
- return v.useEffect(() => {
118
- if (typeof window < "u") {
119
- const l = window.location.pathname === h || window.location.pathname.startsWith(h + "/");
120
- k(t ?? l);
121
- }
122
- }, [t, h]), m ? /* @__PURE__ */ i(H, { children: [
123
- /* @__PURE__ */ e(
124
- q,
125
- {
126
- href: s,
127
- "aria-label": n,
128
- className: u(
129
- a.listLink,
130
- a.listLinkCollapsed,
131
- p && a.active
132
- ),
133
- onPress: () => d?.(!1),
134
- children: /* @__PURE__ */ i(L, { children: [
135
- /* @__PURE__ */ e(
136
- r,
137
- {
138
- size: 20,
139
- "aria-label": n
140
- }
141
- ),
142
- o && /* @__PURE__ */ e(y, {})
143
- ] })
144
- }
145
- ),
146
- /* @__PURE__ */ e(G, { placement: "right", children: n })
147
- ] }) : /* @__PURE__ */ i(
148
- q,
149
- {
150
- href: s,
151
- "aria-label": n,
152
- className: u(a.listLink, p && a.active),
153
- onPress: () => d?.(!1),
154
- children: [
155
- /* @__PURE__ */ i(L, { children: [
156
- /* @__PURE__ */ e(r, { size: 20 }),
157
- o && /* @__PURE__ */ e(y, {})
158
- ] }),
159
- n
160
- ]
161
- }
162
- );
163
- }, ze = { closeMenu: "Close menu", openMenu: "Open menu", maximizeMenu: "Maximize menu", minimizeMenu: "Minimize menu", sidebarMenu: "Sidebar menu", bottomMenu: "Bottom menu", skipToContent: "Skip to main content" }, Be = { closeMenu: "Stäng meny", openMenu: "Öppna meny", maximizeMenu: "Maximera meny", minimizeMenu: "Minimera meny", sidebarMenu: "Sidomeny", bottomMenu: "Bottenmeny", skipToContent: "Hoppa till huvudinnehåll" }, x = {
164
- en: ze,
165
- sv: Be
166
- }, Oe = () => {
167
- const {
168
- items: n,
169
- app: s,
170
- isOpened: r,
171
- isCollapsed: t,
172
- setIsCollapsed: o,
173
- setIsOpened: m,
174
- clientSideRouter: d,
175
- clientSideHref: _,
176
- id: h
177
- } = f(), p = C(x), k = ({ group: l }) => /* @__PURE__ */ e("ul", { className: a.list, children: l.items.map((b, N) => /* @__PURE__ */ e(
178
- "li",
179
- {
180
- className: u(
181
- a.listItem,
182
- t && a.listItemCollapsed
183
- ),
184
- children: /* @__PURE__ */ e(w, { ...b })
185
- },
186
- "link_" + N
187
- )) });
188
- return v.useEffect(() => {
189
- const l = (b) => {
190
- b.key === "Escape" && m !== void 0 && m(!1);
191
- };
192
- return window.addEventListener("keydown", l), () => {
193
- window.removeEventListener("keydown", l);
194
- };
195
- }, [m]), /* @__PURE__ */ i(
196
- "aside",
197
- {
198
- id: h,
199
- className: u(
200
- a.sidebar,
201
- t && a.sidebarCollapsed,
202
- r && a.sidebarOpened
203
- ),
204
- children: [
205
- /* @__PURE__ */ i("div", { className: a.sidebarHeader, children: [
206
- !t && /* @__PURE__ */ e("p", { className: a.appName, children: s.name }),
207
- /* @__PURE__ */ e(
208
- I,
209
- {
210
- variant: "icon",
211
- "aria-label": t ? p.format("maximizeMenu") : p.format("minimizeMenu"),
212
- onPress: () => o(!t),
213
- className: a.collapseButton,
214
- children: t ? /* @__PURE__ */ e(X, { size: 20 }) : /* @__PURE__ */ e($, { size: 20 })
215
- }
216
- )
217
- ] }),
218
- /* @__PURE__ */ e(
219
- "nav",
220
- {
221
- className: a.sidebarNav,
222
- "aria-label": p.format("sidebarMenu"),
223
- children: /* @__PURE__ */ e("ul", { className: a.list, children: n.map((l, b) => /* @__PURE__ */ i("li", { children: [
224
- l.title && !t && /* @__PURE__ */ e("p", { className: a.listGroupTitle, children: l.title }),
225
- d ? /* @__PURE__ */ e(
226
- B,
227
- {
228
- navigate: d,
229
- useHref: _,
230
- children: /* @__PURE__ */ e(k, { group: l })
231
- }
232
- ) : /* @__PURE__ */ e(k, { group: l })
233
- ] }, "list_" + b)) })
234
- }
235
- )
236
- ]
237
- }
238
- );
239
- }, we = () => {
240
- const {
241
- title: n,
242
- user: s,
243
- app: r,
244
- isOpened: t,
245
- setIsOpened: o,
246
- setIsCollapsed: m,
247
- headerChildren: d,
248
- variant: _,
249
- id: h
250
- } = f(), p = C(x);
251
- return _ === "external" ? /* @__PURE__ */ e("header", { className: u(a.header, a.headerExternal), children: /* @__PURE__ */ i("div", { className: a.headerContentExternal, children: [
252
- /* @__PURE__ */ i("div", { className: a.logoExternalContainer, children: [
253
- /* @__PURE__ */ e(
254
- g,
255
- {
256
- size: "x-small",
257
- padding: !1,
258
- className: a.logoExternal
259
- }
260
- ),
261
- /* @__PURE__ */ e(
262
- g,
263
- {
264
- size: "small",
265
- padding: !1,
266
- className: a.logoExternalDesktop
267
- }
268
- ),
269
- /* @__PURE__ */ i("div", { children: [
270
- /* @__PURE__ */ e("p", { className: a.userName, children: s.name }),
271
- /* @__PURE__ */ e("p", { className: a.userTitle, children: s.title })
272
- ] })
273
- ] }),
274
- /* @__PURE__ */ e("div", { className: a.headerItems, children: d })
275
- ] }) }) : /* @__PURE__ */ i(
276
- "header",
277
- {
278
- className: a.header,
279
- style: {
280
- borderTop: `solid 4px ${r.color ? r.color : W.brandPrimary}`
281
- },
282
- children: [
283
- /* @__PURE__ */ i("div", { className: a.headerContent, children: [
284
- /* @__PURE__ */ e("div", { className: a.logo, children: /* @__PURE__ */ e(
285
- g,
286
- {
287
- size: "small",
288
- padding: !1
289
- }
290
- ) }),
291
- t !== void 0 && /* @__PURE__ */ e(
292
- I,
293
- {
294
- variant: "icon",
295
- className: a.toggleButton,
296
- "aria-label": t ? p.format("closeMenu") : p.format("openMenu"),
297
- "aria-controls": h,
298
- onPressStart: () => {
299
- m(!1), o?.(!0);
300
- },
301
- children: t ? /* @__PURE__ */ e(
302
- j,
303
- {
304
- size: 20,
305
- "aria-hidden": "true"
306
- }
307
- ) : /* @__PURE__ */ e(
308
- A,
309
- {
310
- size: 20,
311
- "aria-hidden": "true"
312
- }
313
- )
314
- }
315
- ),
316
- /* @__PURE__ */ i("div", { children: [
317
- /* @__PURE__ */ e("p", { className: a.userName, children: s.name }),
318
- /* @__PURE__ */ e("p", { className: a.userTitle, children: s.title }),
319
- /* @__PURE__ */ e("p", { className: a.title, children: n })
320
- ] })
321
- ] }),
322
- /* @__PURE__ */ e("div", { className: a.headerItems, children: d })
323
- ]
324
- }
325
- );
326
- }, S = ({
327
- id: n = "main:first-of-type"
328
- }) => {
329
- const s = () => {
330
- const t = document.querySelector(n);
331
- t && (t.tabIndex = -1, t.focus(), setTimeout(() => t.removeAttribute("tabindex"), 1e3));
332
- }, r = C(x);
333
- return /* @__PURE__ */ e(
334
- I,
335
- {
336
- onPress: s,
337
- className: a.skipToContent,
338
- children: r.format("skipToContent")
339
- }
340
- );
341
- }, Pe = () => {
342
- const { isOpened: n, setIsOpened: s } = f();
343
- return n ? /* @__PURE__ */ e(
344
- "div",
345
- {
346
- className: u(a.backdrop, a.backdropOpened),
347
- onClick: () => {
348
- s?.(!1);
349
- },
350
- "aria-hidden": !0
351
- }
352
- ) : null;
353
- }, He = () => {
354
- const { items: n, clientSideRouter: s, clientSideHref: r } = f(), t = C(x), o = n.at(0)?.items;
355
- return /* @__PURE__ */ e(
356
- "nav",
357
- {
358
- className: a.navbar,
359
- "aria-label": t.format("bottomMenu"),
360
- children: o && /* @__PURE__ */ e("ul", { className: u(a.navbarList), children: s ? /* @__PURE__ */ e(
361
- B,
362
- {
363
- navigate: s,
364
- useHref: r,
365
- children: /* @__PURE__ */ e(z, { items: o })
366
- }
367
- ) : /* @__PURE__ */ e(z, { items: o }) })
368
- }
369
- );
370
- }, z = ({
371
- items: n
372
- }) => /* @__PURE__ */ e(P, { children: n.map(({ href: s, active: r, icon: t, title: o, hasBadge: m }, d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ i(
373
- q,
374
- {
375
- href: s,
376
- className: u(a.navbarItem),
377
- "data-active": r,
378
- "aria-current": r && "page",
379
- children: [
380
- /* @__PURE__ */ i(L, { children: [
381
- /* @__PURE__ */ e(t, { size: 20 }),
382
- m && /* @__PURE__ */ e(y, {})
383
- ] }),
384
- o
385
- ]
386
- }
387
- ) }, d)) }), c = ({
388
- items: n,
389
- title: s,
390
- user: r,
391
- app: t,
392
- children: o,
393
- headerChildren: m,
394
- clientSideRouter: d,
395
- clientSideHref: _,
396
- variant: h,
397
- className: p
398
- }) => {
399
- const [k, l] = v.useState(!1), [b, N] = v.useState(!1), E = v.useId();
400
- return h === "external" ? /* @__PURE__ */ e(
401
- c.Provider,
402
- {
403
- items: n,
404
- title: s,
405
- user: r,
406
- app: t,
407
- clientSideRouter: d,
408
- clientSideHref: _,
409
- headerChildren: m,
410
- isCollapsed: k,
411
- setIsCollapsed: l,
412
- variant: h,
413
- id: E,
414
- children: /* @__PURE__ */ i("div", { className: u(a.baseLayout, p), children: [
415
- /* @__PURE__ */ e(S, {}),
416
- /* @__PURE__ */ e(c.Header, {}),
417
- /* @__PURE__ */ i("div", { className: a.mainContent, children: [
418
- /* @__PURE__ */ e(c.Sidebar, {}),
419
- /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e("main", { className: a.main, children: /* @__PURE__ */ e("div", { className: a.app, children: o }) }) }),
420
- /* @__PURE__ */ e(c.Backdrop, {})
421
- ] }),
422
- /* @__PURE__ */ e("div", { className: a.navbarWrapper, children: /* @__PURE__ */ e(c.Navbar, {}) })
423
- ] })
424
- }
425
- ) : /* @__PURE__ */ e(
426
- c.Provider,
427
- {
428
- items: n,
429
- title: s,
430
- user: r,
431
- app: t,
432
- clientSideRouter: d,
433
- clientSideHref: _,
434
- headerChildren: m,
435
- isCollapsed: k,
436
- setIsCollapsed: l,
437
- isOpened: b,
438
- setIsOpened: N,
439
- variant: h,
440
- id: E,
441
- children: /* @__PURE__ */ i("div", { className: u(a.baseLayout, p), children: [
442
- /* @__PURE__ */ e(S, {}),
443
- /* @__PURE__ */ e(c.Header, {}),
444
- /* @__PURE__ */ i("div", { className: a.mainContent, children: [
445
- /* @__PURE__ */ e(c.Sidebar, {}),
446
- /* @__PURE__ */ e(T, { children: /* @__PURE__ */ e("main", { className: a.main, children: /* @__PURE__ */ e("div", { className: a.app, children: o }) }) }),
447
- /* @__PURE__ */ e(c.Backdrop, {})
448
- ] })
449
- ] })
450
- }
451
- );
452
- };
453
- c.Provider = Se;
454
- c.Header = we;
455
- c.Sidebar = Oe;
456
- c.SidebarLink = w;
457
- c.Navbar = He;
458
- c.Backdrop = Pe;
459
- export {
460
- we as H,
461
- c as L,
462
- He as N,
463
- Oe as S,
464
- w as a
465
- };