@midas-ds/layout 0.0.18 → 0.0.20

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 0.0.20 (2026-03-23)
+
+### 🩹 Fixes
+
+- **layout, navigation:** decouple navigation-link from link component ([d33aa75a22](https://github.com/migrationsverket/midas/commit/d33aa75a22))
+
+## 0.0.19 (2026-03-20)
+
+### 🩹 Fixes
+
+- **layout, panel:** rename context provider ([6996c35755](https://github.com/migrationsverket/midas/commit/6996c35755))
+- **layout:** replace setPanels with addPanel/closePanel API and add bring-to-front behavior ([a151c18a8c](https://github.com/migrationsverket/midas/commit/a151c18a8c))
+- **layout, panel:** add controlled state support ([d7d5777852](https://github.com/migrationsverket/midas/commit/d7d5777852))
+- **layout, panel:** unshift and aria hide nested panels ([21c7b4ba91](https://github.com/migrationsverket/midas/commit/21c7b4ba91))
+- **layout, panel:** change api to support multiple panels ([9987fe9ebe](https://github.com/migrationsverket/midas/commit/9987fe9ebe))
+- **layout, panel:** make dismiss panel globally configurable ([eadc5621b2](https://github.com/migrationsverket/midas/commit/eadc5621b2))
+
 ## 0.0.18 (2026-03-19)
 
 ### 🧱 Updated Dependencies

package/assets/LayoutContent.css

@@ -0,0 +1 @@
+._layout_4r2tn_1{display:flex;flex-direction:column;font-family:var(--midas-typography-font-family);width:100%;height:100dvh}._layoutContent_yqjxz_1{display:flex;position:relative;height:100%;overflow:hidden}

package/assets/Panel.css

@@ -1 +1 @@
-._collapsePanel_1uy7t_1{width:15rem}._collapsePanel_1uy7t_1._collapsed_1uy7t_4{width:80px}@media(max-width:640px){._collapsePanel_1uy7t_1{display:none}}._panelHeader_1uy7t_13{gap:0}._panelTitle_1uy7t_17{font-size:var(--midas-typography-font-size-20);display:block}._panelBody_1rrgz_1{background-color:var(--midas-background-base);box-sizing:border-box;padding:1rem;transition:width var(--midas-transition-duration-fast) ease-out;width:100%}._panelHeader_11qv1_1{align-items:center;display:flex;justify-content:space-between}._panelTitle_w7y4m_1{display:block}._dismissPanel_1vxt8_1{position:absolute!important;top:0;right:0;width:320px;height:100%;overflow:hidden}._dismissPanel_1vxt8_1[data-entering]{animation:_slide-horizontally_1vxt8_1 var(--midas-transition-duration-fast)}._dismissPanel_1vxt8_1[data-exiting]{animation:_slide-horizontally_1vxt8_1 var(--midas-transition-duration-fast) reverse ease-in}@media(prefers-reduced-motion:reduce){._dismissPanel_1vxt8_1[data-entering],._dismissPanel_1vxt8_1[data-exiting]{animation-duration:1ms}}@media not (min-width:800px){._dismissPanel_1vxt8_1{bottom:0;width:100%;height:25%;left:0;top:unset}._dismissPanel_1vxt8_1[data-entering]{animation:_slide-vertically_1vxt8_1 var(--midas-transition-duration-fast)}._dismissPanel_1vxt8_1[data-exiting]{animation:_slide-vertically_1vxt8_1 var(--midas-transition-duration-fast) reverse ease-in}}._panelTitle_1vxt8_44{font-size:var(--midas-typography-font-size-20);display:block}@keyframes _slide-horizontally_1vxt8_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _slide-vertically_1vxt8_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}
+._collapsePanel_1uy7t_1{width:15rem}._collapsePanel_1uy7t_1._collapsed_1uy7t_4{width:80px}@media(max-width:640px){._collapsePanel_1uy7t_1{display:none}}._panelHeader_1uy7t_13{gap:0}._panelTitle_1uy7t_17{font-size:var(--midas-typography-font-size-20);display:block}._panelBody_1rrgz_1{background-color:var(--midas-background-base);box-sizing:border-box;padding:1rem;transition:width var(--midas-transition-duration-fast) ease-out;width:100%}._panelHeader_11qv1_1{align-items:center;display:flex;justify-content:space-between}._panelTitle_w7y4m_1{display:block}._dismissPanel_11141_1{position:absolute!important;top:0;right:0;width:320px;height:100%;overflow:hidden}._dismissPanel_11141_1[data-promoting]{animation:_promote_11141_1 var(--midas-transition-duration-fast) ease-out}@media(prefers-reduced-motion:reduce){._dismissPanel_11141_1[data-promoting]{animation-duration:1ms}}._dismissPanel_11141_1[data-entering]{animation:_slide-horizontally_11141_1 var(--midas-transition-duration-fast)}._dismissPanel_11141_1[data-exiting]{animation:_slide-horizontally_11141_1 var(--midas-transition-duration-fast) reverse ease-in}@media(prefers-reduced-motion:reduce){._dismissPanel_11141_1[data-entering],._dismissPanel_11141_1[data-exiting]{animation-duration:1ms}}@media not (min-width:800px){._dismissPanel_11141_1{bottom:0;width:100%;height:25%;left:0;top:unset}._dismissPanel_11141_1[data-entering]{animation:_slide-vertically_11141_1 var(--midas-transition-duration-fast)}._dismissPanel_11141_1[data-exiting]{animation:_slide-vertically_11141_1 var(--midas-transition-duration-fast) reverse ease-in}}._panelTitle_11141_54{font-size:var(--midas-typography-font-size-20);display:block}@keyframes _promote_11141_1{0%{opacity:.7;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes _slide-horizontally_11141_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _slide-vertically_11141_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}

package/chunks/LayoutContent-DhVL-boV.js

@@ -0,0 +1,22 @@
+import { jsx as n } from "react/jsx-runtime";
+import '../assets/LayoutContent.css';const a = "_layout_4r2tn_1", s = {
+  layout: a
+}, u = ({ className: t, ...o }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: `${t ?? ""} ${s.layout}`,
+    ...o
+  }
+), y = "_layoutContent_yqjxz_1", l = {
+  layoutContent: y
+}, c = ({ className: t, ...o }) => /* @__PURE__ */ n(
+  "div",
+  {
+    className: `${t ?? ""} ${l.layoutContent}`,
+    ...o
+  }
+);
+export {
+  u as L,
+  c as a
+};

package/chunks/Main-Ce4U9_ce.js

@@ -0,0 +1,13 @@
+import { jsx as i } from "react/jsx-runtime";
+import '../assets/Main.css';const o = "_main_vtpiw_1", s = {
+  main: o
+}, t = ({ className: n, ...a }) => /* @__PURE__ */ i(
+  "main",
+  {
+    className: [n, s.main].filter(Boolean).join(" "),
+    ...a
+  }
+);
+export {
+  t as M
+};

package/chunks/Panel-EbJUawMh.js

@@ -0,0 +1,281 @@
+'use client';
+import { jsx as l, jsxs as f } from "react/jsx-runtime";
+import { forwardRef as b, useRef as w, useEffect as I, createContext as M, useState as z, useContext as B } from "react";
+import { C as H, P as j } from "./PanelContext-D6WQ7_yb.js";
+import { c as h, T as A } from "./Text-B18MZHuN.js";
+import { useControlledState as v } from "@react-stately/utils";
+import { u as L } from "./useIsMobileDevice-D0iMVFPx.js";
+import { c as _, u as C, B as O } from "./Button-CCH8cWvV.js";
+import { useExitAnimation as R, useObjectRef as q, useEnterAnimation as F, filterDOMProps as X } from "@react-aria/utils";
+import '../assets/Panel.css';const G = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
+], J = _("panel-left-close", G);
+const K = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
+], Q = _("panel-left-open", K);
+const U = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+], V = _("x", U), W = { expandSidebar: "Expand sidebar", collapseSidebar: "Collapse sidebar", closePanel: "Close panel" }, Y = { expandSidebar: "Expandera sidopanel", collapseSidebar: "Minimera sidopanel", closePanel: "Stäng panel" }, T = {
+  en: W,
+  sv: Y
+}, Z = "_collapsePanel_1uy7t_1", ee = "_collapsed_1uy7t_4", ne = "_panelTitle_1uy7t_17", x = {
+  collapsePanel: Z,
+  collapsed: ee,
+  panelTitle: ne
+}, se = ({
+  children: e,
+  className: s,
+  isCollapsed: o,
+  defaultCollapsed: m = !1,
+  onCollapseChange: r,
+  title: c,
+  ...p
+}) => {
+  const i = C(T), P = L(), [n, a] = v(
+    o,
+    m,
+    r
+  ), t = () => a((d) => !d);
+  return P ? null : /* @__PURE__ */ l(H.Provider, { value: { isCollapsed: n }, children: /* @__PURE__ */ l(
+    E,
+    {
+      className: h(s, x.collapsePanel, {
+        [x.collapsed]: n
+      }),
+      ...p,
+      children: /* @__PURE__ */ f("aside", { children: [
+        /* @__PURE__ */ f(D, { children: [
+          /* @__PURE__ */ l("div", { children: !n && c && /* @__PURE__ */ l(
+            N,
+            {
+              className: x.panelTitle,
+              title: c
+            }
+          ) }),
+          /* @__PURE__ */ l(
+            O,
+            {
+              variant: "icon",
+              "aria-label": n ? i.format("expandSidebar") : i.format("collapseSidebar"),
+              onPress: t,
+              children: n ? /* @__PURE__ */ l(Q, { size: 20 }) : /* @__PURE__ */ l(J, { size: 20 })
+            }
+          )
+        ] }),
+        e
+      ] })
+    }
+  ) });
+}, ae = "_panelBody_1rrgz_1", te = {
+  panelBody: ae
+}, E = b(
+  ({ className: e, ...s }, o) => /* @__PURE__ */ l(
+    "div",
+    {
+      ref: o,
+      className: h(e, te.panelBody),
+      ...s
+    }
+  )
+), le = "_panelHeader_11qv1_1", oe = {
+  panelHeader: le
+}, D = ({ className: e, ...s }) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: h(e, oe.panelHeader),
+    ...s
+  }
+), ie = "_panelTitle_w7y4m_1", re = {
+  panelTitle: ie
+}, N = ({ className: e, title: s, ...o }) => /* @__PURE__ */ l(
+  A,
+  {
+    className: h(e, re.panelTitle),
+    ...o,
+    children: s
+  }
+), ce = "_dismissPanel_11141_1", de = "_panelTitle_11141_54", y = {
+  dismissPanel: ce,
+  panelTitle: de
+}, S = (e) => {
+  const { onExited: s } = e, [o, m] = v(
+    e.isOpen,
+    e.defaultOpen || !1,
+    e.onOpenChange
+  ), r = w(null), c = R(r, o), p = () => m((i) => !i);
+  return I(() => {
+    !o && !c && s?.();
+  }, [o, c, s]), !o && !c ? null : /* @__PURE__ */ l(
+    pe,
+    {
+      isExiting: c,
+      onPress: p,
+      ref: r,
+      ...e
+    }
+  );
+}, pe = b(
+  ({
+    className: e,
+    title: s,
+    onPress: o,
+    children: m,
+    isExiting: r,
+    defaultOpen: c,
+    promoting: p,
+    onPromotionEnd: i,
+    "aria-hidden": P,
+    ...n
+  }, a) => {
+    const t = C(T), d = q(a), u = F(d, !c), $ = (g) => {
+      g.target === g.currentTarget && p && i?.();
+    };
+    return /* @__PURE__ */ f(
+      E,
+      {
+        "aria-hidden": P || void 0,
+        className: h(e, y.dismissPanel),
+        ref: d,
+        "data-entering": u || void 0,
+        "data-exiting": r || void 0,
+        "data-promoting": p || void 0,
+        onAnimationEnd: $,
+        ...X(n),
+        children: [
+          /* @__PURE__ */ f(D, { children: [
+            /* @__PURE__ */ l("div", { children: s && /* @__PURE__ */ l(
+              N,
+              {
+                className: y.panelTitle,
+                title: s
+              }
+            ) }),
+            /* @__PURE__ */ l(
+              O,
+              {
+                variant: "icon",
+                "aria-label": t.format("closePanel"),
+                onPress: o,
+                children: /* @__PURE__ */ l(V, { size: 20 })
+              }
+            )
+          ] }),
+          m
+        ]
+      }
+    );
+  }
+), k = M({
+  panels: [],
+  addPanel: () => {
+  },
+  closePanel: () => {
+  },
+  removePanel: () => {
+  },
+  resetPromoting: () => {
+  }
+}), be = ({
+  children: e,
+  className: s,
+  ...o
+}) => {
+  const { panels: m, closePanel: r, removePanel: c, resetPromoting: p } = me();
+  return /* @__PURE__ */ f(
+    "aside",
+    {
+      className: s,
+      ...o,
+      children: [
+        m.map(({ id: i, ...P }, n, { length: a }) => /* @__PURE__ */ l(
+          S,
+          {
+            "aria-hidden": n < a - 1 || void 0,
+            id: i,
+            "data-debug": "Panel (dismiss)",
+            onOpenChange: (t) => {
+              t || r(i);
+            },
+            onExited: () => c(i),
+            onPromotionEnd: () => p(i),
+            ...P
+          },
+          i
+        )),
+        e
+      ]
+    }
+  );
+}, ve = ({
+  children: e,
+  defaultPanels: s = [],
+  panelBehavior: o = "bring-to-front"
+}) => {
+  const [m, r] = z(
+    s.map((n) => ({ ...n, isOpen: !0, defaultOpen: !0 }))
+  ), c = (n) => {
+    r((a) => {
+      const t = a.findIndex((d) => d.id === n.id);
+      if (t === -1)
+        return [...a, { ...n, isOpen: !0 }];
+      if (o === "bring-to-front") {
+        if (t === a.length - 1) return a;
+        const d = a[t];
+        return [
+          ...a.filter((u) => u.id !== n.id),
+          { ...d, isOpen: !0, promoting: !0 }
+        ];
+      }
+      return o === "pop-to" ? a.map(
+        (d, u) => u > t ? { ...d, isOpen: !1 } : d
+      ) : a;
+    });
+  }, p = (n) => {
+    r(
+      (a) => a.map((t) => t.id === n ? { ...t, isOpen: !1 } : t)
+    );
+  }, i = (n) => {
+    r((a) => a.filter((t) => t.id !== n));
+  }, P = (n) => {
+    r(
+      (a) => a.map((t) => t.id === n ? { ...t, promoting: !1 } : t)
+    );
+  };
+  return /* @__PURE__ */ l(
+    k.Provider,
+    {
+      value: { panels: m, addPanel: c, closePanel: p, removePanel: i, resetPromoting: P },
+      children: e
+    }
+  );
+}, me = () => {
+  const e = B(k);
+  if (!e)
+    throw new Error(
+      "useDismissPanels must be used within a DismissPanelContext"
+    );
+  return e;
+}, Ce = ({
+  variant: e = "collapse",
+  ...s
+}) => /* @__PURE__ */ f(j.Provider, { value: { variant: e }, children: [
+  e === "collapse" && /* @__PURE__ */ l(se, { ...s }),
+  e === "dismiss" && /* @__PURE__ */ l(S, { ...s })
+] });
+export {
+  se as C,
+  S as D,
+  Ce as P,
+  k as a,
+  be as b,
+  ve as c,
+  E as d,
+  D as e,
+  N as f,
+  me as u
+};

package/index.js

@@ -1,33 +1,37 @@
-import { H as o, a as s, b as t, M as n } from "./chunks/Header-DwXIrGCD.js";
-import { L as r, a as l } from "./chunks/Layout-bfQkpzAm.js";
-import { M as m } from "./chunks/Main-DcX_nPtP.js";
-import { N as P, a as M, b as N, c as f, d as C, e as b } from "./chunks/NavigationSubMenu-6PJ0fOjF.js";
-import { C as v, D as g, P as u, a as H, b as c, c as L } from "./chunks/Panel-C1cbU0dG.js";
-import { C as A, P as D } from "./chunks/PanelContext-D6WQ7_yb.js";
-import { N as k } from "./chunks/Navbar-wOOCcsru.js";
-import { M as I } from "./chunks/MobileMenuContext-Coj0sJ0N.js";
+import { H as s, a as o, b as t, M as n } from "./chunks/Header-DwXIrGCD.js";
+import { L as r, a as l } from "./chunks/LayoutContent-DhVL-boV.js";
+import { M as m } from "./chunks/Main-Ce4U9_ce.js";
+import { N as p, a as d, b as f, c as u, d as C, e as M } from "./chunks/NavigationSubMenu-6PJ0fOjF.js";
+import { C as v, D as b, a as g, b as D, c as H, P as c, d as L, e as y, f as A, u as S } from "./chunks/Panel-EbJUawMh.js";
+import { C as B, P as I } from "./chunks/PanelContext-D6WQ7_yb.js";
+import { N as T } from "./chunks/Navbar-wOOCcsru.js";
+import { M as j } from "./chunks/MobileMenuContext-Coj0sJ0N.js";
 export {
   v as CollapsePanel,
-  A as CollapsePanelContext,
-  g as DismissPanel,
-  o as Header,
-  s as HeaderAction,
+  B as CollapsePanelContext,
+  b as DismissPanel,
+  g as DismissPanelContext,
+  D as DismissPanelOutlet,
+  H as DismissPanelProvider,
+  s as Header,
+  o as HeaderAction,
   t as HeaderActions,
   r as Layout,
   l as LayoutContent,
   m as Main,
   n as MobileMenu,
-  I as MobileMenuContext,
-  k as Navbar,
-  P as Navigation,
-  M as NavigationHeader,
-  N as NavigationItem,
-  f as NavigationLink,
+  j as MobileMenuContext,
+  T as Navbar,
+  p as Navigation,
+  d as NavigationHeader,
+  f as NavigationItem,
+  u as NavigationLink,
   C as NavigationSection,
-  b as NavigationSubMenu,
-  u as Panel,
-  H as PanelBody,
-  D as PanelContext,
-  c as PanelHeader,
-  L as PanelTitle
+  M as NavigationSubMenu,
+  c as Panel,
+  L as PanelBody,
+  I as PanelContext,
+  y as PanelHeader,
+  A as PanelTitle,
+  S as useDismissPanels
 };

package/layout/Layout.d.ts

@@ -1,7 +1,3 @@
 import { DetailedHTMLProps, HTMLAttributes } from 'react';
-type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-export type LayoutProps = DivProps;
-export type LayoutContentProps = DivProps;
-export declare const LayoutContent: ({ className, children, ...rest }: DivProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Layout: ({ className, children, ...rest }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export type LayoutProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export declare const Layout: ({ className, ...rest }: LayoutProps) => import("react/jsx-runtime").JSX.Element;

package/layout/Layout.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { Layout } from '.';
 type Story = StoryObj<typeof Layout>;
 declare const _default: {
-    component: ({ className, children, ...rest }: import('./Layout').LayoutProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ className, ...rest }: import('./Layout').LayoutProps) => import("react/jsx-runtime").JSX.Element;
     title: string;
     tags: string[];
     args: {

package/layout/index.d.ts

@@ -1 +1,2 @@
 export * from './Layout';
+export * from './layout-content';

package/layout/index.js

@@ -1,4 +1,4 @@
-import { L as t, a as L } from "../chunks/Layout-bfQkpzAm.js";
+import { L as t, a as L } from "../chunks/LayoutContent-DhVL-boV.js";
 export {
   t as Layout,
   L as LayoutContent

package/layout/layout-content/LayoutContent.d.ts

@@ -0,0 +1,3 @@
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+export type LayoutContentProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export declare const LayoutContent: ({ className, ...rest }: LayoutContentProps) => import("react/jsx-runtime").JSX.Element;

package/layout/layout-content/index.d.ts

@@ -0,0 +1 @@
+export * from './LayoutContent';

package/main/index.js

@@ -1,4 +1,4 @@
-import { M as r } from "../chunks/Main-DcX_nPtP.js";
+import { M as r } from "../chunks/Main-Ce4U9_ce.js";
 export {
   r as Main
 };

package/navigation/navigation-link/NavigationLink.d.ts

@@ -1,13 +1,17 @@
-import { ReactNode, ElementType } from 'react';
+import { ReactNode, ElementType, ComponentProps } from 'react';
 import { Link } from 'react-aria-components';
-import { LinkComponentProps } from '../../../../components/src/index.ts';
-export interface NavigationLinkComponentProps<C extends ElementType> extends Pick<LinkComponentProps<C>, 'className' | 'as'> {
+export interface NavigationLinkComponentProps<C extends ElementType> {
     /** The icon to display. */
     children: ReactNode;
     /** The visible label text and tooltip content. */
     title: string;
     isActive?: boolean;
     variant?: 'sidebar' | 'navbar';
+    className?: string;
+    /** Replace base component with any Client Side Routing link instead.
+     * @see {@link https://designsystem.migrationsverket.se/dev/client-side-routing/|Client side routing}
+     */
+    as?: C;
 }
-export type NavigationLinkProps<C extends React.ElementType> = NavigationLinkComponentProps<C> & Omit<React.ComponentProps<C>, keyof LinkComponentProps<C>>;
-export declare const NavigationLink: <C extends React.ElementType = typeof Link>({ as, children, className, isActive, title, "aria-label": ariaLabel, ...rest }: NavigationLinkProps<C>) => import("react/jsx-runtime").JSX.Element;
+export type NavigationLinkProps<C extends ElementType> = NavigationLinkComponentProps<C> & Omit<ComponentProps<C>, keyof NavigationLinkComponentProps<C>>;
+export declare const NavigationLink: <C extends ElementType = typeof Link>({ as, children, className, isActive, title, "aria-label": ariaLabel, ...rest }: NavigationLinkProps<C>) => import("react/jsx-runtime").JSX.Element;

package/navigation/navigation-link/NavigationLink.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { NavigationLink } from '.';
 type Story = StoryObj<typeof NavigationLink>;
 declare const _default: {
-    component: <C extends React.ElementType = (props: import('react-aria-components').LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null>({ as, children, className, isActive, title, "aria-label": ariaLabel, ...rest }: import('./NavigationLink').NavigationLinkProps<C>) => import("react/jsx-runtime").JSX.Element;
+    component: <C extends import('react').ElementType = (props: import('react-aria-components').LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null>({ as, children, className, isActive, title, "aria-label": ariaLabel, ...rest }: import('./NavigationLink').NavigationLinkProps<C>) => import("react/jsx-runtime").JSX.Element;
     title: string;
     tags: string[];
     args: {

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Layout components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/panel/Panel.d.ts

@@ -1,3 +1,4 @@
+import { Key } from 'react-aria-components';
 import { CollapseTriggerProps } from './collapse-panel';
 import { DismissTriggerProps } from './dismiss-panel';
 import { PanelBodyProps } from './panel-body';
@@ -6,5 +7,6 @@ export type PanelVariant = 'collapse' | 'dismiss' | undefined;
 export type PanelTriggerProps<T extends PanelVariant> = T extends 'collapse' ? CollapseTriggerProps : T extends 'dismiss' ? DismissTriggerProps : never;
 export type PanelProps<T extends PanelVariant> = PanelBodyProps & Pick<PanelTitleProps, 'title'> & PanelTriggerProps<T> & {
     variant?: T;
+    id: Key;
 };
 export declare const Panel: <T extends PanelVariant>({ variant, ...rest }: PanelProps<T>) => import("react/jsx-runtime").JSX.Element;

package/panel/collapse-panel/CollapsePanel.d.ts

@@ -1,7 +1,8 @@
-import { PanelBodyProps } from '..';
+import { PanelProps } from '..';
 export interface CollapseTriggerProps {
     isCollapsed?: boolean;
     defaultCollapsed?: boolean;
     onCollapseChange?: (isCollapsed: boolean) => void;
 }
-export declare const CollapsePanel: ({ children, className, isCollapsed: isCollapsedProp, defaultCollapsed, onCollapseChange, title, ...rest }: PanelBodyProps & CollapseTriggerProps) => import("react/jsx-runtime").JSX.Element | null;
+export type CollapsePanelProps = Omit<PanelProps<'collapse'>, 'variant'> & CollapseTriggerProps;
+export declare const CollapsePanel: ({ children, className, isCollapsed: isCollapsedProp, defaultCollapsed, onCollapseChange, title, ...rest }: CollapsePanelProps) => import("react/jsx-runtime").JSX.Element | null;

package/panel/dismiss-panel/DismissPanel.d.ts

@@ -1,7 +1,11 @@
-import { PanelBodyProps } from '../panel-body';
+import { PanelProps } from '..';
 export interface DismissTriggerProps {
     isOpen?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
+    onExited?: () => void;
+    promoting?: boolean;
+    onPromotionEnd?: () => void;
 }
-export declare const DismissPanel: (props: PanelBodyProps & DismissTriggerProps) => import("react/jsx-runtime").JSX.Element | null;
+export type DismissPanelProps = Omit<PanelProps<'dismiss'>, 'variant'> & DismissTriggerProps;
+export declare const DismissPanel: (props: DismissPanelProps) => import("react/jsx-runtime").JSX.Element | null;

package/panel/dismiss-panel/DismissPanelContext.d.ts

@@ -0,0 +1,12 @@
+import { DismissPanelProps } from '.';
+export interface PanelItem extends DismissPanelProps {
+    promoting?: boolean;
+}
+export interface DismissPanelContextValue {
+    panels: PanelItem[];
+    addPanel: (panel: Omit<PanelItem, 'isOpen' | 'defaultOpen'>) => void;
+    closePanel: (id: string) => void;
+    removePanel: (id: string) => void;
+    resetPromoting: (id: string) => void;
+}
+export declare const DismissPanelContext: import('react').Context<DismissPanelContextValue>;

package/panel/dismiss-panel/DismissPanelOutlet.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export type PanelRegionProps = HTMLAttributes<HTMLElement>;
+export declare const DismissPanelOutlet: ({ children, className, ...rest }: PanelRegionProps) => import("react/jsx-runtime").JSX.Element;

package/panel/dismiss-panel/DismissPanelProvider.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { PanelItem } from './DismissPanelContext';
+export type PanelBehavior = 'bring-to-front' | 'pop-to';
+export interface DismissPanelProviderProps {
+    children: ReactNode;
+    defaultPanels?: PanelItem[];
+    panelBehavior?: PanelBehavior;
+}
+export declare const DismissPanelProvider: ({ children, defaultPanels, panelBehavior, }: DismissPanelProviderProps) => import("react/jsx-runtime").JSX.Element;

package/panel/dismiss-panel/index.d.ts

@@ -1 +1,5 @@
 export * from './DismissPanel';
+export * from './DismissPanelContext';
+export * from './DismissPanelOutlet';
+export * from './DismissPanelProvider';
+export * from './useDismissPanels';

package/panel/dismiss-panel/useDismissPanels.d.ts

@@ -0,0 +1 @@
+export declare const useDismissPanels: () => import('./DismissPanelContext').DismissPanelContextValue;

package/panel/index.js

@@ -1,12 +1,16 @@
-import { C as l, D as s, P as n, a as P, b as o, c as t } from "../chunks/Panel-C1cbU0dG.js";
-import { C as r, P as p } from "../chunks/PanelContext-D6WQ7_yb.js";
+import { C as e, D as l, a as n, b as P, c as i, P as o, d as t, e as m, f as r, u as C } from "../chunks/Panel-EbJUawMh.js";
+import { C as x, P as d } from "../chunks/PanelContext-D6WQ7_yb.js";
 export {
-  l as CollapsePanel,
-  r as CollapsePanelContext,
-  s as DismissPanel,
-  n as Panel,
-  P as PanelBody,
-  p as PanelContext,
-  o as PanelHeader,
-  t as PanelTitle
+  e as CollapsePanel,
+  x as CollapsePanelContext,
+  l as DismissPanel,
+  n as DismissPanelContext,
+  P as DismissPanelOutlet,
+  i as DismissPanelProvider,
+  o as Panel,
+  t as PanelBody,
+  d as PanelContext,
+  m as PanelHeader,
+  r as PanelTitle,
+  C as useDismissPanels
 };

package/panel/panel-body/PanelBody.d.ts

@@ -1,3 +1,3 @@
-import { DetailedHTMLProps, HTMLAttributes } from 'react';
-export type PanelBodyProps = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
-export declare const PanelBody: import('react').ForwardRefExoticComponent<Omit<PanelBodyProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
+import { HTMLAttributes } from 'react';
+export type PanelBodyProps = HTMLAttributes<HTMLDivElement>;
+export declare const PanelBody: import('react').ForwardRefExoticComponent<PanelBodyProps & import('react').RefAttributes<HTMLDivElement>>;

package/assets/Layout.css

@@ -1 +0,0 @@
-._layout_13ndd_1{display:flex;flex-direction:column;font-family:var(--midas-typography-font-family);width:100%;height:100dvh}._content_13ndd_9{display:flex;position:relative;height:100%;overflow:hidden}

package/chunks/Layout-bfQkpzAm.js

@@ -1,23 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import '../assets/Layout.css';const c = "_layout_13ndd_1", e = "_content_13ndd_9", a = {
-  layout: c,
-  content: e
-}, y = ({ className: t, children: o, ...n }) => /* @__PURE__ */ s(
-  "div",
-  {
-    className: `${t ?? ""} ${a.content}`,
-    ...n,
-    children: o
-  }
-), d = ({ className: t, children: o, ...n }) => /* @__PURE__ */ s(
-  "div",
-  {
-    className: `${t ?? ""} ${a.layout}`,
-    ...n,
-    children: o
-  }
-);
-export {
-  d as L,
-  y as a
-};

package/chunks/Main-DcX_nPtP.js

@@ -1,13 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import '../assets/Main.css';const i = "_main_vtpiw_1", m = {
-  main: i
-}, o = ({ className: a, ...n }) => /* @__PURE__ */ s(
-  "main",
-  {
-    className: `${a} ${m.main}`,
-    ...n
-  }
-);
-export {
-  o as M
-};

package/chunks/Panel-C1cbU0dG.js

@@ -1,167 +0,0 @@
-'use client';
-import { jsx as a, jsxs as r } from "react/jsx-runtime";
-import { C as S, P as O } from "./PanelContext-D6WQ7_yb.js";
-import { c as d, T as $ } from "./Text-B18MZHuN.js";
-import { useControlledState as _ } from "@react-stately/utils";
-import { u as B } from "./useIsMobileDevice-D0iMVFPx.js";
-import { forwardRef as y, useRef as M } from "react";
-import { c as P, u, B as x } from "./Button-CCH8cWvV.js";
-import { useExitAnimation as z, useObjectRef as D, useEnterAnimation as E, filterDOMProps as H } from "@react-aria/utils";
-import '../assets/Panel.css';const I = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M9 3v18", key: "fh3hqa" }],
-  ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
-], j = P("panel-left-close", I);
-const w = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M9 3v18", key: "fh3hqa" }],
-  ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
-], L = P("panel-left-open", w);
-const R = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-], q = P("x", R), A = { expandSidebar: "Expand sidebar", collapseSidebar: "Collapse sidebar", closePanel: "Close panel" }, F = { expandSidebar: "Expandera sidopanel", collapseSidebar: "Minimera sidopanel", closePanel: "Stäng panel" }, v = {
-  en: A,
-  sv: F
-}, X = "_collapsePanel_1uy7t_1", G = "_collapsed_1uy7t_4", J = "_panelTitle_1uy7t_17", f = {
-  collapsePanel: X,
-  collapsed: G,
-  panelTitle: J
-}, K = ({
-  children: e,
-  className: s,
-  isCollapsed: l,
-  defaultCollapsed: t = !1,
-  onCollapseChange: o,
-  title: i,
-  ...c
-}) => {
-  const p = u(v), m = B(), [n, g] = _(
-    l,
-    t,
-    o
-  ), N = () => g((k) => !k);
-  return m ? null : /* @__PURE__ */ a(S.Provider, { value: { isCollapsed: n }, children: /* @__PURE__ */ r(
-    b,
-    {
-      className: d(s, f.collapsePanel, {
-        [f.collapsed]: n
-      }),
-      ...c,
-      children: [
-        /* @__PURE__ */ r(T, { children: [
-          /* @__PURE__ */ a("div", { children: !n && i && /* @__PURE__ */ a(
-            C,
-            {
-              className: f.panelTitle,
-              title: i
-            }
-          ) }),
-          /* @__PURE__ */ a(
-            x,
-            {
-              variant: "icon",
-              "aria-label": n ? p.format("expandSidebar") : p.format("collapseSidebar"),
-              onPress: N,
-              children: n ? /* @__PURE__ */ a(L, { size: 20 }) : /* @__PURE__ */ a(j, { size: 20 })
-            }
-          )
-        ] }),
-        e
-      ]
-    }
-  ) });
-}, Q = "_panelBody_1rrgz_1", U = {
-  panelBody: Q
-}, b = y(
-  ({ className: e, ...s }, l) => /* @__PURE__ */ a(
-    "aside",
-    {
-      ref: l,
-      className: d(e, U.panelBody),
-      ...s
-    }
-  )
-), V = "_panelHeader_11qv1_1", W = {
-  panelHeader: V
-}, T = ({ className: e, ...s }) => /* @__PURE__ */ a(
-  "div",
-  {
-    className: d(e, W.panelHeader),
-    ...s
-  }
-), Y = "_panelTitle_w7y4m_1", Z = {
-  panelTitle: Y
-}, C = ({ className: e, title: s, ...l }) => /* @__PURE__ */ a(
-  $,
-  {
-    className: d(e, Z.panelTitle),
-    ...l,
-    children: s
-  }
-), ee = "_dismissPanel_1vxt8_1", se = "_panelTitle_1vxt8_44", h = {
-  dismissPanel: ee,
-  panelTitle: se
-}, ae = (e) => {
-  const [s, l] = _(
-    e.isOpen,
-    e.defaultOpen || !1,
-    e.onOpenChange
-  ), t = M(null), o = z(t, s), i = () => l((c) => !c);
-  return !s && !o ? null : /* @__PURE__ */ a(
-    le,
-    {
-      isExiting: o,
-      onPress: i,
-      ref: t,
-      ...e
-    }
-  );
-}, le = y(({ className: e, title: s, onPress: l, children: t, isExiting: o, ...i }, c) => {
-  const p = u(v), m = D(c), n = E(m);
-  return /* @__PURE__ */ r(
-    b,
-    {
-      className: d(e, h.dismissPanel),
-      ref: m,
-      "data-entering": n || void 0,
-      "data-exiting": o || void 0,
-      ...H(i),
-      children: [
-        /* @__PURE__ */ r(T, { children: [
-          /* @__PURE__ */ a("div", { children: s && /* @__PURE__ */ a(
-            C,
-            {
-              className: h.panelTitle,
-              title: s
-            }
-          ) }),
-          /* @__PURE__ */ a(
-            x,
-            {
-              variant: "icon",
-              "aria-label": p.format("closePanel"),
-              onPress: l,
-              children: /* @__PURE__ */ a(q, { size: 20 })
-            }
-          )
-        ] }),
-        t
-      ]
-    }
-  );
-}), me = ({
-  variant: e = "collapse",
-  ...s
-}) => /* @__PURE__ */ r(O.Provider, { value: { variant: e }, children: [
-  e === "collapse" && /* @__PURE__ */ a(K, { ...s }),
-  e === "dismiss" && /* @__PURE__ */ a(ae, { ...s })
-] });
-export {
-  K as C,
-  ae as D,
-  me as P,
-  b as a,
-  T as b,
-  C as c
-};