@midas-ds/components 17.4.0 → 17.5.1

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 17.5.1 (2026-02-25)
+
+### 🩹 Fixes
+
+- **components, breadcrumbs:** adjust styling according to spec ([0c08821279](https://github.com/migrationsverket/midas/commit/0c08821279))
+
+## 17.5.0 (2026-02-25)
+
+### 🚀 Features
+
+- **components, info-banner:** change HTML element to aside ([e2df5f3877](https://github.com/migrationsverket/midas/commit/e2df5f3877))
+- **components, info-banner:** add styling for unordered lists ([f048a5e9cb](https://github.com/migrationsverket/midas/commit/f048a5e9cb))
+
+### 🏭 Refactoring
+
+- **components, info-banner:** use react-stately controlled state hook ([d813124151](https://github.com/migrationsverket/midas/commit/d813124151))
+
+### 🧪 Tests updated
+
+- **components, info-banner:** add tests ([ddee571e0c](https://github.com/migrationsverket/midas/commit/ddee571e0c))
+
 ## 17.4.0 (2026-02-25)
 
 ### 🚀 Features

package/assets/Breadcrumb.css

@@ -1 +1 @@
-._container_zw1qy_1{padding-inline-start:0;font-family:var(--midas-typography-font-family);display:flex;flex-flow:row wrap;gap:.25rem;list-style:none;margin:0}._container_zw1qy_1 li{display:flex;align-items:baseline}._container_zw1qy_1 li[data-current=true] a{cursor:default}._separator_zw1qy_20{color:var(--midas-text-disabled);padding:0 5px}
+._container_14dns_1{align-items:center;padding-inline-start:0;font-family:var(--midas-typography-font-family);display:flex;flex-flow:row wrap;list-style:none;margin:0}._container_14dns_1 li{display:flex;align-items:center}._container_14dns_1 li[data-current=true] a{cursor:default}._separator_14dns_20{color:var(--midas-text-disabled);padding:0 var(--midas-space-30)}

package/assets/InfoBanner.css

@@ -1 +1 @@
-._infoBanner_1oj11_1{font-family:var(--midas-typography-font-family);color:var(--midas-text-primary);display:flex;font-size:1rem;flex-direction:row;gap:1rem;padding:1rem;line-height:1.3;border-left:3px solid var(--border);background-color:var(--bg)}._infoBanner_1oj11_1._success_1oj11_11{--border: var(--midas-support-border-success);--bg: var(--midas-support-background-success)}._infoBanner_1oj11_1._info_1oj11_1{--border: var(--midas-support-border-info);--bg: var(--midas-support-background-info)}._infoBanner_1oj11_1._important_1oj11_21{--border: var(--midas-support-border-important);--bg: var(--midas-support-background-important)}._infoBanner_1oj11_1._warning_1oj11_26{--border: var(--midas-support-border-warning);--bg: var(--midas-support-background-warning)}@media(forced-colors:active){._infoBanner_1oj11_1{border:1px solid;border-left:3px solid var(--border)}}._content_1oj11_40{display:flex;flex-direction:column;flex:1 0 0%}._heading_1oj11_46{font-weight:500;margin-bottom:.25rem}._text_1oj11_51{line-height:var(--midas-typography-line-height-40);white-space:pre-line;margin:0}._icon_1oj11_57{color:var(--midas-icon-primary);min-width:20px}@media(forced-colors:active){._icon_1oj11_57{color:currentColor}}._dismissable_1oj11_66{margin-top:-1rem;margin-right:-1rem;justify-self:flex-end}
+._infoBanner_8niki_1{font-family:var(--midas-typography-font-family);color:var(--midas-text-primary);display:flex;font-size:1rem;flex-direction:row;gap:1rem;padding:1rem;line-height:1.3;border-left:3px solid var(--border);background-color:var(--bg)}._infoBanner_8niki_1._success_8niki_11{--border: var(--midas-support-border-success);--bg: var(--midas-support-background-success)}._infoBanner_8niki_1._info_8niki_1{--border: var(--midas-support-border-info);--bg: var(--midas-support-background-info)}._infoBanner_8niki_1._important_8niki_21{--border: var(--midas-support-border-important);--bg: var(--midas-support-background-important)}._infoBanner_8niki_1._warning_8niki_26{--border: var(--midas-support-border-warning);--bg: var(--midas-support-background-warning)}@media(forced-colors:active){._infoBanner_8niki_1{border:1px solid;border-left:3px solid var(--border)}}._content_8niki_40{display:flex;flex-direction:column;flex:1 0 0%}._heading_8niki_46{font-weight:500;margin-bottom:.25rem}._text_8niki_51{line-height:var(--midas-typography-line-height-40);white-space:pre-line;margin:0}._text_8niki_51 ul{margin:var(--midas-space-xsmall) 0 0 var(--midas-space-medium);padding:0}._text_8niki_51 ul li{margin-bottom:var(--midas-space-60)}._icon_8niki_66{color:var(--midas-icon-primary);min-width:20px}@media(forced-colors:active){._icon_8niki_66{color:currentColor}}._dismissable_8niki_75{margin-top:-1rem;margin-right:-1rem;justify-self:flex-end}

package/breadcrumbs/index.js

@@ -1,4 +1,4 @@
-import { B as e, a as m } from "../chunks/Breadcrumb-CHldDcyz.js";
+import { B as e, a as m } from "../chunks/Breadcrumb-Bs836gOn.js";
 export {
   e as Breadcrumb,
   m as Breadcrumbs

package/chunks/{Breadcrumb-CHldDcyz.js → Breadcrumb-Bs836gOn.js}

@@ -1,8 +1,8 @@
 import { jsx as s, jsxs as m, Fragment as i } from "react/jsx-runtime";
-import { Breadcrumbs as u, Breadcrumb as p } from "react-aria-components";
+import { Breadcrumbs as u, Breadcrumb as d } from "react-aria-components";
 import { c as e } from "./clsx-AexbMWKp.js";
-import '../assets/Breadcrumb.css';const d = "_container_zw1qy_1", l = "_separator_zw1qy_20", o = {
-  container: d,
+import '../assets/Breadcrumb.css';const p = "_container_14dns_1", l = "_separator_14dns_20", n = {
+  container: p,
   separator: l
 }, f = ({
   className: a,
@@ -10,23 +10,23 @@ import '../assets/Breadcrumb.css';const d = "_container_zw1qy_1", l = "_separato
 }) => /* @__PURE__ */ s(
   u,
   {
-    className: e(o.container, a),
+    className: e(n.container, a),
     ...r
   }
 ), x = ({
   className: a,
   children: r,
-  ...c
+  ...o
 }) => /* @__PURE__ */ s(
-  p,
+  d,
   {
     className: e(a),
-    ...c,
+    ...o,
     children: (t) => {
-      const n = !t.isCurrent;
+      const c = !t.isCurrent;
       return /* @__PURE__ */ m(i, { children: [
         typeof r == "function" ? r(t) : r,
-        n ? /* @__PURE__ */ s("span", { "aria-hidden": "true", className: o.separator, children: "/" }) : null
+        c ? /* @__PURE__ */ s("span", { "aria-hidden": "true", className: n.separator, children: "/" }) : null
       ] });
     }
   }

package/chunks/InfoBanner-D_pwTOHH.js

@@ -0,0 +1,76 @@
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { c as g } from "./clsx-AexbMWKp.js";
+import { B as h } from "./Button-BhIvfqOc.js";
+import { F as k } from "./FeedbackStatusIcon-X9Bjgeta.js";
+import { useControlledState as x } from "@react-stately/utils";
+import { X as B } from "./x-B9bYxG31.js";
+import { u as N } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import '../assets/InfoBanner.css';const b = "_infoBanner_8niki_1", v = "_success_8niki_11", I = "_info_8niki_1", S = "_important_8niki_21", w = "_warning_8niki_26", C = "_content_8niki_40", F = "_heading_8niki_46", O = "_text_8niki_51", j = "_icon_8niki_66", z = "_dismissable_8niki_75", n = {
+  infoBanner: b,
+  success: v,
+  info: I,
+  important: S,
+  warning: w,
+  content: C,
+  heading: F,
+  text: O,
+  icon: j,
+  dismissable: z
+}, L = { close: "Close" }, P = { close: "Stäng" }, X = {
+  en: L,
+  sv: P
+}, J = ({
+  title: e,
+  message: a,
+  type: o,
+  children: c,
+  isDismissable: r = !1,
+  defaultOpen: l = !0,
+  isOpen: m,
+  onOpenChange: _,
+  ...t
+}) => {
+  const [d, f] = x(
+    m,
+    l,
+    _
+  ), u = N(X), p = () => {
+    f(!1);
+  };
+  return d ? /* @__PURE__ */ i(
+    "aside",
+    {
+      ...t,
+      className: g(n.infoBanner, n[o], t.className),
+      children: [
+        /* @__PURE__ */ s(
+          k,
+          {
+            "aria-hidden": !0,
+            className: n.icon,
+            status: o
+          }
+        ),
+        /* @__PURE__ */ i("div", { className: n.content, children: [
+          e && /* @__PURE__ */ s("strong", { className: n.heading, children: e }),
+          /* @__PURE__ */ i("div", { className: n.text, children: [
+            a,
+            c
+          ] })
+        ] }),
+        r && /* @__PURE__ */ s("div", { className: n.dismissable, children: /* @__PURE__ */ s(
+          h,
+          {
+            variant: "icon",
+            "aria-label": u.format("close"),
+            onPress: p,
+            children: /* @__PURE__ */ s(B, { size: 20 })
+          }
+        ) })
+      ]
+    }
+  ) : null;
+};
+export {
+  J as I
+};

package/index.js

@@ -1,7 +1,7 @@
 'use client';
 import { A as s, a as p } from "./chunks/AccordionItem-BuUIdVd_.js";
 import { B as m, a as i } from "./chunks/BadgeContainer-CKVsfTlF.js";
-import { B as n, a as d } from "./chunks/Breadcrumb-CHldDcyz.js";
+import { B as n, a as d } from "./chunks/Breadcrumb-Bs836gOn.js";
 import { B as c } from "./chunks/Button-BhIvfqOc.js";
 import { B as u } from "./chunks/ButtonGroup-Dr6HOBo2.js";
 import { C as B, R as C } from "./chunks/RangeCalendar-LheFd9WF.js";
@@ -19,7 +19,7 @@ import { D as X, F as Y } from "./chunks/FileUpload-Cu8DCSjX.js";
 import { G as $ } from "./chunks/Grid-CettmpaZ.js";
 import { G as ao } from "./chunks/GridItem-z7zclNdT.js";
 import { H as eo } from "./chunks/Heading-nfcRc2QF.js";
-import { I as so } from "./chunks/InfoBanner-otmuemqy.js";
+import { I as so } from "./chunks/InfoBanner-D_pwTOHH.js";
 import { L as xo } from "./chunks/Label-s4J9sYdy.js";
 import { H as io, L as fo, N as no, S as To, a as co } from "./chunks/Layout-hXzqx4cY.js";
 import { L as uo } from "./chunks/Link-rqGQvFQq.js";
@@ -49,7 +49,7 @@ import { c as Na } from "./chunks/clsx-AexbMWKp.js";
 import { DialogTrigger as za, MenuTrigger as Oa, RouterProvider as Qa } from "react-aria-components";
 import { u as Za } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
 import { useToastState as qa } from "react-stately";
-const o = "17.4.0", a = {
+const o = "17.5.1", a = {
   version: o
 }, r = a.version;
 export {

package/info-banner/index.js

@@ -1,4 +1,4 @@
-import { I as r } from "../chunks/InfoBanner-otmuemqy.js";
+import { I as r } from "../chunks/InfoBanner-D_pwTOHH.js";
 export {
   r as InfoBanner
 };

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "17.4.0",
+  "version": "17.5.1",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",

package/chunks/InfoBanner-otmuemqy.js

@@ -1,72 +0,0 @@
-import { jsxs as e, jsx as n } from "react/jsx-runtime";
-import * as h from "react";
-import { c as j } from "./clsx-AexbMWKp.js";
-import { B as x } from "./Button-BhIvfqOc.js";
-import { F as B } from "./FeedbackStatusIcon-X9Bjgeta.js";
-import { X as N } from "./x-B9bYxG31.js";
-import { u as b } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import '../assets/InfoBanner.css';const v = "_infoBanner_1oj11_1", S = "_success_1oj11_11", w = "_info_1oj11_1", C = "_important_1oj11_21", F = "_warning_1oj11_26", I = "_content_1oj11_40", z = "_heading_1oj11_46", O = "_text_1oj11_51", k = "_icon_1oj11_57", y = "_dismissable_1oj11_66", s = {
-  infoBanner: v,
-  success: S,
-  info: w,
-  important: C,
-  warning: F,
-  content: I,
-  heading: z,
-  text: O,
-  icon: k,
-  dismissable: y
-}, L = { close: "Close" }, P = { close: "Stäng" }, R = {
-  en: L,
-  sv: P
-}, H = ({
-  title: t,
-  message: r,
-  type: i,
-  children: l,
-  isDismissable: m = !1,
-  defaultOpen: _ = !0,
-  isOpen: a,
-  onOpenChange: d,
-  ...c
-}) => {
-  const o = typeof a < "u", [f, u] = h.useState(_), p = b(R), g = () => {
-    d?.(!1), o || u(!1);
-  };
-  return o && a || !o && f ? /* @__PURE__ */ e(
-    "div",
-    {
-      ...c,
-      className: j(s.infoBanner, s[i], c.className),
-      children: [
-        /* @__PURE__ */ n(
-          B,
-          {
-            "aria-hidden": !0,
-            className: s.icon,
-            status: i
-          }
-        ),
-        /* @__PURE__ */ e("div", { className: s.content, children: [
-          t && /* @__PURE__ */ n("strong", { className: s.heading, children: t }),
-          /* @__PURE__ */ e("div", { className: s.text, children: [
-            r,
-            l
-          ] })
-        ] }),
-        m && /* @__PURE__ */ n("div", { className: s.dismissable, children: /* @__PURE__ */ n(
-          x,
-          {
-            variant: "icon",
-            "aria-label": p.format("close"),
-            onPress: g,
-            children: /* @__PURE__ */ n(N, { size: 20 })
-          }
-        ) })
-      ]
-    }
-  ) : null;
-};
-export {
-  H as I
-};