@midas-ds/components 17.29.0 → 17.30.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 17.30.0 (2026-10-09)
+
+### 🚀 Features
+
+- **components,layout,table-styles:** depend on lucide-react ([#1405](https://github.com/migrationsverket/midas/pull/1405))
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 3.17.7
+
 ## 17.29.0 (2026-10-09)
 
 ### 🚀 Features

package/accordion/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/accordion-DIVTJU3O.js";
+import { n as e, t } from "../chunks/accordion-BzmYSOS3.js";
 export { e as Accordion, t as AccordionItem };

package/button/Button.stories.d.ts

@@ -17,7 +17,7 @@ export declare const PrimaryFullwidth: {
 export declare const Icon: {
     args: {
         children: undefined;
-        icon: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+        icon: import('lucide-react').LucideIcon;
         variant: string;
         'aria-label': string;
     };

package/button/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/button-CenXTGXL.js";
+import { n as e, t } from "../chunks/button-C-WkFek9.js";
 export { e as Button, t as ButtonGroup };

package/calendar/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/calendar-Bl_obez5.js";
+import { n as e, t } from "../chunks/calendar-Bt1FLxqr.js";
 export { e as Calendar, t as RangeCalendar };

package/card/index.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "../chunks/card-zIYA-SQh.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "../chunks/card-CdH2UMUW.js";
 export { o as Card, n as CardActionArea, e as CardActions, i as CardBody, a as CardContent, c as CardHeader, s as CardImage, t as CardLink, r as CardTitle };

package/checkbox/index.js

@@ -1,2 +1,2 @@
-import { i as e, n as t, r as n, t as r } from "../chunks/checkbox-Bqd8B58G.js";
+import { i as e, n as t, r as n, t as r } from "../chunks/checkbox-DiFQy3MS.js";
 export { t as Checkbox, n as CheckboxButton, e as CheckboxField, r as CheckboxGroup };

package/chunks/FeedbackStatusIcon-DvMDGBGL.js

@@ -0,0 +1,36 @@
+import { t as e } from "./useLocalizedStringFormatter-CeyBc0x0.js";
+import { jsx as t } from "react/jsx-runtime";
+import { Check as n, Flag as r, Info as i, TriangleAlert as a } from "lucide-react";
+var o = {
+	en: {
+		ok: "okay",
+		information: "information",
+		importantInformation: "important information",
+		warning: "warning"
+	},
+	sv: {
+		ok: "okej",
+		information: "information",
+		importantInformation: "viktig information",
+		warning: "varning"
+	}
+}, s = {
+	success: n,
+	info: i,
+	important: r,
+	warning: a
+}, c = {
+	success: "ok",
+	info: "information",
+	important: "importantInformation",
+	warning: "warning"
+}, l = ({ status: n, "aria-label": r, size: i = 20, ...a }) => {
+	let l = e(o), u = s[n];
+	return /* @__PURE__ */ t(u, {
+		"aria-label": r || l.format(c[n]),
+		size: i,
+		...a
+	});
+};
+//#endregion
+export { l as t };

package/chunks/{accordion-DIVTJU3O.js → accordion-BzmYSOS3.js}

@@ -1,22 +1,22 @@
 'use client';
 import { t as e } from "./clsx-Di52oYUU.js";
-import { t } from "./chevron-down-CP7nEDei.js";
-import { t as n } from "./FeedbackStatusIcon-DRI7WrSU.js";
-import { n as r } from "./button-CenXTGXL.js";
-import { t as i } from "./heading-BEl_z-5T.js";
-import { createContext as a, useContext as o, useEffect as s } from "react";
-import { Disclosure as c, DisclosureGroup as l, DisclosurePanel as u, composeRenderProps as d } from "react-aria-components";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { n as t } from "./button-C-WkFek9.js";
+import { t as n } from "./heading-BEl_z-5T.js";
+import { t as r } from "./FeedbackStatusIcon-DvMDGBGL.js";
+import { createContext as i, useContext as a, useEffect as o } from "react";
+import { Disclosure as s, DisclosureGroup as c, DisclosurePanel as l, composeRenderProps as u } from "react-aria-components";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { ChevronDown as m } from "lucide-react";
 import '../assets/accordion.css';var h = {
 	root: "_root_17bdp_1",
 	contained: "_contained_17bdp_5",
 	triggerButton: "_triggerButton_17bdp_12"
-}, g = a(void 0), _ = ({ children: t, className: n, isContained: r, size: i = "large", ...a }) => /* @__PURE__ */ p(g.Provider, {
+}, g = i(void 0), _ = ({ children: t, className: n, isContained: r, size: i = "large", ...a }) => /* @__PURE__ */ f(g.Provider, {
 	value: {
 		isContained: r,
 		size: i
 	},
-	children: /* @__PURE__ */ p(l, {
+	children: /* @__PURE__ */ f(c, {
 		className: e(h.root, r ? h.contained : h.uncontained, n),
 		...a,
 		children: t
@@ -40,45 +40,45 @@ import '../assets/accordion.css';var h = {
 	content: "_content_1ghre_133",
 	hasBackground: "_hasBackground_1ghre_138",
 	header: "_header_1ghre_146"
-}, y = ({ title: a, children: l, className: h, headingLevel: _ = "h2", type: y, hasBackground: b = !0, size: x = "large", isContained: S, iconAriaLabel: C, ...w }) => {
-	let T = o(g), E = S ?? T?.isContained ?? !1, D = typeof a == "object";
-	return s(() => {
+}, y = ({ title: i, children: c, className: h, headingLevel: _ = "h2", type: y, hasBackground: b = !0, size: x = "large", isContained: S, iconAriaLabel: C, ...w }) => {
+	let T = a(g), E = S ?? T?.isContained ?? !1, D = typeof i == "object";
+	return o(() => {
 		y && !E && console.warn("AccordionItem: When 'type' is set, it is recommended to also set 'isContained' to true for visual consistency.");
-	}, [y, E]), /* @__PURE__ */ p(c, {
+	}, [y, E]), /* @__PURE__ */ f(s, {
 		...w,
 		className: e(v.item, y && E && v[y], (x === "medium" || T?.size === "medium") && v.medium, E && v.contained, h),
-		children: d(l, (o) => /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+		children: u(c, (a) => /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("div", {
 			className: v.trigger,
-			children: /* @__PURE__ */ m(r, {
+			children: /* @__PURE__ */ p(t, {
 				className: v.triggerButton,
 				slot: "trigger",
 				variant: "icon",
 				children: [
-					/* @__PURE__ */ p(t, {
+					/* @__PURE__ */ f(m, {
 						size: 20,
 						className: v.chevronIcon
 					}),
-					/* @__PURE__ */ p("div", {
+					/* @__PURE__ */ f("div", {
 						className: v.triggerMainContent,
-						children: D ? a : /* @__PURE__ */ p(i, {
+						children: D ? i : /* @__PURE__ */ f(n, {
 							level: 3,
 							elementType: _,
 							className: v.triggerText,
-							children: a
+							children: i
 						})
 					}),
-					y && E && /* @__PURE__ */ p(n, {
+					y && E && /* @__PURE__ */ f(r, {
 						"aria-label": C,
 						className: v.statusIcon,
 						status: y
 					})
 				]
 			})
-		}), /* @__PURE__ */ p(u, {
+		}), /* @__PURE__ */ f(l, {
 			className: v.panel,
-			children: /* @__PURE__ */ p("div", {
+			children: /* @__PURE__ */ f("div", {
 				className: e(v.content, b && v.hasBackground),
-				children: o
+				children: a
 			})
 		})] }))
 	});

package/chunks/{button-CenXTGXL.js → button-C-WkFek9.js}

@@ -1,6 +1,6 @@
 'use client';
 import { t as e } from "./clsx-Di52oYUU.js";
-import { t } from "./spinner-LdHPVms_.js";
+import { t } from "./spinner-COGZlDJB.js";
 import { t as n } from "./Button.module-0C2ArlRs.js";
 import { forwardRef as r } from "react";
 import { Button as i, ButtonContext as a, composeRenderProps as o, useContextProps as s } from "react-aria-components";

package/chunks/calendar-Bt1FLxqr.js

@@ -0,0 +1,107 @@
+import { n as e, t } from "./clsx-Di52oYUU.js";
+import { n } from "./button-C-WkFek9.js";
+import { t as r } from "./heading-BEl_z-5T.js";
+import { t as i } from "./field-error-LtNtEKDp.js";
+import { n as a } from "./select-Wy6NakdH.js";
+import { a as o, c as s, o as c } from "./list-box-DmEoMvX1.js";
+import * as l from "react";
+import { Calendar as u, CalendarCell as d, CalendarGrid as f, CalendarMonthPicker as p, CalendarYearPicker as m, RangeCalendar as h, RangeCalendarContext as g, Select as _ } from "react-aria-components";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { ChevronLeft as b, ChevronRight as x } from "lucide-react";
+import '../assets/calendar.css';var S = {
+	container: "_container_mn6zv_1",
+	calendar: "_calendar_mn6zv_6",
+	day: "_day_mn6zv_28",
+	header: "_header_mn6zv_90",
+	pickers: "_pickers_mn6zv_130",
+	range: "_range_mn6zv_180"
+}, C = ({ weekdayStyle: e = "short", isReadOnly: n }) => {
+	let r = !!l.useContext(g);
+	return /* @__PURE__ */ v(f, {
+		weekdayStyle: e,
+		children: (e) => /* @__PURE__ */ v(d, {
+			date: e,
+			className: t(S.day, r && S.range),
+			"data-readonly": n || void 0
+		})
+	});
+}, w = ({ isDisabled: e, isReadOnly: t, items: n, ...r }) => /* @__PURE__ */ y(_, {
+	isDisabled: e,
+	"data-readonly": t || void 0,
+	...r,
+	children: [/* @__PURE__ */ v(a, {
+		size: "small",
+		isDisabled: e
+	}), /* @__PURE__ */ v(o, { children: /* @__PURE__ */ v(s, {
+		items: n,
+		virtualized: !1,
+		size: "small",
+		children: (e) => /* @__PURE__ */ v(c, {
+			id: e.id,
+			textValue: e.formatted,
+			children: e.formatted
+		})
+	}) })]
+}), T = ({ isDisabled: e, isReadOnly: t, showMonthYearPicker: i }) => {
+	let a = (n) => /* @__PURE__ */ v(w, {
+		...n,
+		isDisabled: e,
+		isReadOnly: t
+	});
+	return /* @__PURE__ */ y("header", {
+		className: S.header,
+		children: [
+			/* @__PURE__ */ v(n, {
+				slot: "previous",
+				size: "medium",
+				"data-readonly": t || void 0,
+				children: /* @__PURE__ */ v(b, { size: 20 })
+			}),
+			i ? /* @__PURE__ */ y("div", {
+				className: S.pickers,
+				children: [/* @__PURE__ */ v(p, { children: a }), /* @__PURE__ */ v(m, { children: a })]
+			}) : /* @__PURE__ */ v(r, {
+				level: 3,
+				elementType: "h2",
+				"data-disabled": e || void 0
+			}),
+			/* @__PURE__ */ v(n, {
+				slot: "next",
+				size: "medium",
+				"data-readonly": t || void 0,
+				children: /* @__PURE__ */ v(x, { size: 20 })
+			})
+		]
+	});
+}, E = ({ className: t, errorMessage: n, showMonthYearPicker: r, ...a }) => /* @__PURE__ */ y("div", {
+	className: S.container,
+	children: [/* @__PURE__ */ y(u, {
+		className: e(S.calendar, t),
+		"data-readonly": a.isReadOnly || void 0,
+		...a,
+		children: [/* @__PURE__ */ v(T, {
+			...a,
+			showMonthYearPicker: r
+		}), /* @__PURE__ */ v(C, { ...a })]
+	}), /* @__PURE__ */ v(i, {
+		isInvalid: a.isInvalid,
+		children: n
+	})]
+}), D = ({ className: t, errorMessage: n, showMonthYearPicker: r, commitBehavior: a, ...o }) => /* @__PURE__ */ y("div", {
+	className: S.container,
+	children: [/* @__PURE__ */ y(h, {
+		className: e(S.calendar, t),
+		"data-readonly": o.isReadOnly || void 0,
+		commitBehavior: a ?? (r ? "reset" : void 0),
+		...o,
+		children: [/* @__PURE__ */ v(T, {
+			...o,
+			showMonthYearPicker: r
+		}), /* @__PURE__ */ v(C, { ...o })]
+	}), /* @__PURE__ */ v(i, {
+		isInvalid: o.isInvalid,
+		children: n
+	})]
+});
+//#endregion
+export { E as n, D as t };

package/chunks/card-CdH2UMUW.js

@@ -0,0 +1,103 @@
+import { t as e } from "./clsx-Di52oYUU.js";
+import { t } from "./heading-BEl_z-5T.js";
+import { t as n } from "./text-DwmZ-ew8.js";
+import * as r from "react";
+import { Button as i, Link as a } from "react-aria-components";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { ArrowRight as c } from "lucide-react";
+import '../assets/card.css';var l = {
+	card: "_card_yandx_1",
+	horizontal: "_horizontal_yandx_26",
+	cardLink: "_cardLink_yandx_31",
+	cardContent: "_cardContent_yandx_42",
+	cardActions: "_cardActions_yandx_61",
+	deprecated: "_deprecated_yandx_75",
+	cardActionArea: "_cardActionArea_yandx_81",
+	cardImage: "_cardImage_yandx_114",
+	cardLinkIcon: "_cardLinkIcon_yandx_146"
+}, u = r.createContext({
+	horizontal: void 0,
+	titleId: void 0
+}), d = r.createContext(void 0), f = ({ horizontal: t, className: n, children: i, ...a }) => {
+	let s = `card-title-${r.useId()}`;
+	return /* @__PURE__ */ o(u.Provider, {
+		value: {
+			horizontal: t,
+			titleId: s
+		},
+		children: /* @__PURE__ */ o("div", {
+			...a,
+			className: e(l.card, t && l.horizontal, n),
+			children: i
+		})
+	});
+}, p = ({ children: t, ...n }) => {
+	let { horizontal: i } = r.useContext(u);
+	return /* @__PURE__ */ o(d.Provider, {
+		value: {},
+		children: /* @__PURE__ */ o("div", {
+			...n,
+			className: e(l.cardContent, i && l.horizontal),
+			children: t
+		})
+	});
+}, m = ({ elementType: n = "h2", children: i, className: a, ...s }) => {
+	let { horizontal: c, titleId: d } = r.useContext(u);
+	return /* @__PURE__ */ o(t, {
+		level: 3,
+		elementType: n,
+		className: e(a, l.cardTitle, c && l.horizontal),
+		id: d,
+		...s,
+		children: i
+	});
+}, h = ({ children: t, ...n }) => {
+	let { horizontal: i } = r.useContext(u), a = !!r.useContext(d);
+	return /* @__PURE__ */ o("div", {
+		...n,
+		className: e(l.cardActions, i && l.horizontal, a && l.deprecated),
+		children: t
+	});
+}, g = ({ children: t, className: n, ...a }) => {
+	let { titleId: s } = r.useContext(u);
+	return /* @__PURE__ */ o(i, {
+		...a,
+		"aria-labelledby": s,
+		className: e(l.cardActionArea, n),
+		children: t
+	});
+}, _ = ({ as: t = "img", className: n, ...r }) => /* @__PURE__ */ o(t, {
+	...r,
+	"data-card-image": !0,
+	className: e(l.cardImage, n)
+}), v = ({ children: t, as: n, ...r }) => /* @__PURE__ */ s(n || a, {
+	...r,
+	className: e(l.cardLink, r.className),
+	children: [t, /* @__PURE__ */ o(c, {
+		className: l.cardLinkIcon,
+		size: 24
+	})]
+}), y = { cardBody: "_cardBody_337uy_1" }, b = ({ className: t, ...n }) => /* @__PURE__ */ o("div", {
+	className: e(t, y.cardBody),
+	...n
+}), x = {
+	cardHeader: "_cardHeader_1625c_1",
+	textContainer: "_textContainer_1625c_14",
+	subHeading: "_subHeading_1625c_20"
+}, S = ({ children: t, className: r, heading: i, headingLevel: a, subHeading: c, ...l }) => /* @__PURE__ */ s("div", {
+	className: e(r, x.cardHeader),
+	...l,
+	children: [/* @__PURE__ */ s("div", {
+		className: x.textContainer,
+		children: [/* @__PURE__ */ o(m, {
+			elementType: a,
+			children: i
+		}), c && /* @__PURE__ */ o(n, {
+			slot: "description",
+			className: x.subHeading,
+			children: c
+		})]
+	}), t]
+});
+//#endregion
+export { h as a, v as c, g as i, m as l, b as n, p as o, f as r, _ as s, S as t };

package/chunks/checkbox-DiFQy3MS.js

@@ -0,0 +1,106 @@
+'use client';
+import { t as e } from "./clsx-Di52oYUU.js";
+import { t } from "./useLocalizedStringFormatter-CeyBc0x0.js";
+import { n, t as r } from "./label-Dw5p84T2.js";
+import { t as i } from "./text-DwmZ-ew8.js";
+import { t as a } from "./field-error-LtNtEKDp.js";
+import { t as o } from "./splitDataAttributes-_JTFOOIb.js";
+import * as s from "react";
+import { forwardRef as c, useContext as l } from "react";
+import { CheckboxButton as u, CheckboxField as d, CheckboxGroup as f, CheckboxGroupStateContext as p, composeRenderProps as m } from "react-aria-components";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Check as v, Minus as y } from "lucide-react";
+import { variables as b } from "@midas-ds/theme";
+import '../assets/checkbox.css';var x = {
+	indicator: "_indicator_3jfn4_1",
+	checkboxButton: "_checkboxButton_3jfn4_27",
+	checkboxField: "_checkboxField_3jfn4_144",
+	checkboxGroup: "_checkboxGroup_3jfn4_155",
+	checkboxList: "_checkboxList_3jfn4_166"
+}, S = ({ className: t, ...n }) => /* @__PURE__ */ g(d, {
+	className: e(x.checkboxField, t),
+	...n
+}), C = c(({ className: t, ...n }, r) => /* @__PURE__ */ g(u, {
+	className: e(x.checkboxButton, t),
+	ref: r,
+	...n
+})), w = c(({ className: e, description: t, errorMessage: n, errorPosition: r = "top", children: s, ...c }, l) => {
+	let [u, d] = o(c);
+	return /* @__PURE__ */ _(S, {
+		...d,
+		children: [
+			t && /* @__PURE__ */ g(i, {
+				slot: "description",
+				children: t
+			}),
+			r === "top" && /* @__PURE__ */ g(a, { children: n }),
+			/* @__PURE__ */ g(C, {
+				...u,
+				ref: l,
+				className: e,
+				children: ({ isIndeterminate: e }) => /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("div", {
+					className: x.indicator,
+					children: g(e ? y : v, {
+						size: 14,
+						color: b.iconOnColor
+					})
+				}), s] })
+			}),
+			r === "bottom" && /* @__PURE__ */ g(a, { children: n })
+		]
+	});
+});
+w.displayName = "Checkbox";
+//#endregion
+//#region src/checkbox/useSelectAll.ts
+var T = (e, t) => {
+	let n = t?.value ?? [], r = s.Children.toArray(e).filter((e) => s.isValidElement(e) && e.type === w), i = r.filter((e) => !e.props.isDisabled).map((e) => e.props.value || ""), a = r.filter((e) => e.props.isDisabled).map((e) => e.props.value || "").filter((e) => n.includes(e)), o = n.filter((e) => i.includes(e)).length, c = o === 0, l = o === i.length;
+	return {
+		allSelected: l,
+		someSelected: !c && !l,
+		checkboxValues: i,
+		disabledSelectedValues: a
+	};
+}, E = {
+	en: { selectAll: "Select all" },
+	sv: { selectAll: "Välj alla" }
+}, D = ({ checkboxes: e, label: n }) => {
+	let r = l(p), i = t(E), { allSelected: a, someSelected: o, checkboxValues: s, disabledSelectedValues: c } = T(e, r);
+	return /* @__PURE__ */ g(p.Provider, {
+		value: null,
+		children: /* @__PURE__ */ g(w, {
+			isSelected: a,
+			isIndeterminate: o,
+			isReadOnly: r?.isReadOnly,
+			isDisabled: r?.isDisabled,
+			onChange: (e) => {
+				r?.setValue(e ? [...s, ...c] : c);
+			},
+			children: n || i.format("selectAll")
+		})
+	});
+}, O = ({ label: t, description: o, errorMessage: s, errorPosition: c = "top", popover: l, showSelectAll: u, selectAllLabel: d, className: p, children: v, ...y }) => /* @__PURE__ */ g(f, {
+	...y,
+	className: e(x.checkboxGroup, p),
+	children: m(v, (e) => /* @__PURE__ */ _(h, { children: [
+		/* @__PURE__ */ g(n, {
+			popover: l,
+			children: t && /* @__PURE__ */ g(r, { children: t })
+		}),
+		o && /* @__PURE__ */ g(i, {
+			slot: "description",
+			children: o
+		}),
+		c === "top" && s && /* @__PURE__ */ g(a, { children: s }),
+		/* @__PURE__ */ _("div", {
+			className: x.checkboxList,
+			children: [u && /* @__PURE__ */ g(D, {
+				label: d,
+				checkboxes: e
+			}), e]
+		}),
+		c === "bottom" && s && /* @__PURE__ */ g(a, { children: s })
+	] }))
+});
+//#endregion
+export { S as i, w as n, C as r, O as t };

package/chunks/clear-button-Bv0YGBNG.js

@@ -0,0 +1,17 @@
+'use client';
+import { n as e } from "./button-C-WkFek9.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { X as n } from "lucide-react";
+//#region src/clear-button/ClearButton.tsx
+var r = (r) => /* @__PURE__ */ t(e, {
+	variant: "icon",
+	slot: null,
+	...r,
+	children: /* @__PURE__ */ t(n, {
+		size: 20,
+		"aria-hidden": !0
+	})
+});
+//#endregion
+export { r as t };