@midas-ds/components 17.27.5 → 17.28.1

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 17.28.1 (2026-10-08)
+
+### 🩹 Fixes
+
+- **components,radio,checkbox:** forward data-* attributes ([#1409](https://github.com/migrationsverket/midas/pull/1409))
+
+## 17.28.0 (2026-10-08)
+
+### 🚀 Features
+
+- **components,stack:** add Stack component ([811b12f3cc2](https://github.com/migrationsverket/midas/commit/811b12f3cc2))
+
+### 🧪 Tests updated
+
+- **components,stack:** add visual regression baselines ([5653f8c8e8b](https://github.com/migrationsverket/midas/commit/5653f8c8e8b))
+- remove chromatic ([7c0e6fe5135](https://github.com/migrationsverket/midas/commit/7c0e6fe5135))
+
 ## 17.27.5 (2026-10-07)
 
 ### 🩹 Fixes

package/assets/stack.css

@@ -0,0 +1 @@
+@layer midas{._stack_1g0ly_7{box-sizing:border-box;justify-content:flex-start;align-items:stretch;gap:var(--midas-stack-spacing,var(--midas-space-small));flex-direction:column;display:flex}._stack_1g0ly_7:is(ul,ol){margin:0;padding:0;list-style:none}._stack_1g0ly_7:is(fieldset){border:0;min-inline-size:0;margin:0;padding:0}._stack_1g0ly_7[data-direction=row]{flex-direction:row}._stack_1g0ly_7[data-direction=row-reverse]{flex-direction:row-reverse}._stack_1g0ly_7[data-direction=column-reverse]{flex-direction:column-reverse}._stack_1g0ly_7[data-align=start]{align-items:flex-start}._stack_1g0ly_7[data-align=center]{align-items:center}._stack_1g0ly_7[data-align=end]{align-items:flex-end}._stack_1g0ly_7[data-align=baseline]{align-items:baseline}._stack_1g0ly_7[data-justify=center]{justify-content:center}._stack_1g0ly_7[data-justify=end]{justify-content:flex-end}._stack_1g0ly_7[data-justify=between]{justify-content:space-between}._stack_1g0ly_7[data-justify=around]{justify-content:space-around}._stack_1g0ly_7[data-justify=evenly]{justify-content:space-evenly}._stack_1g0ly_7[data-wrap]{flex-wrap:wrap}._stack_1g0ly_7[data-spacing=xsmall]{--midas-stack-spacing:var(--midas-space-xsmall)}._stack_1g0ly_7[data-spacing=small]{--midas-stack-spacing:var(--midas-space-small)}._stack_1g0ly_7[data-spacing=medium]{--midas-stack-spacing:var(--midas-space-medium)}._stack_1g0ly_7[data-spacing=large]{--midas-stack-spacing:var(--midas-space-large)}._stack_1g0ly_7[data-spacing=xlarge]{--midas-stack-spacing:var(--midas-space-xlarge)}}

package/calendar/index.js

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

package/checkbox/index.js

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

package/chunks/{calendar-BZPktkdE.js → calendar-Bl_obez5.js}

@@ -4,7 +4,7 @@ import { t as r } from "./chevron-right-DwqboCdU.js";
 import { n as i } from "./button-CenXTGXL.js";
 import { t as a } from "./heading-BEl_z-5T.js";
 import { t as o } from "./field-error-LtNtEKDp.js";
-import { n as s } from "./select-KQzDIamx.js";
+import { n as s } from "./select-oLCNpryY.js";
 import { a as c, c as l, o as u } from "./list-box-BN_MSiOD.js";
 import * as d from "react";
 import { Calendar as f, CalendarCell as p, CalendarGrid as m, CalendarMonthPicker as h, CalendarYearPicker as g, RangeCalendar as _, RangeCalendarContext as v, Select as y } from "react-aria-components";

package/chunks/checkbox-Bqd8B58G.js

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

package/chunks/{date-picker-BomOO1LI.js → date-picker-DZivTUB_.js}

@@ -1,7 +1,7 @@
 'use client';
 import { n as e } from "./clsx-Di52oYUU.js";
 import { t } from "./createLucideIcon-BgluSHFG.js";
-import { n, t as r } from "./calendar-BZPktkdE.js";
+import { n, t as r } from "./calendar-Bl_obez5.js";
 import { t as i } from "./useLocalizedStringFormatter-CeyBc0x0.js";
 import { n as a } from "./button-CenXTGXL.js";
 import { n as o, t as s } from "./label-LWlgvAwz.js";

package/chunks/radio-BD1EuxSa.js

@@ -0,0 +1,53 @@
+import { t as e } from "./clsx-Di52oYUU.js";
+import { n as t, t as n } from "./label-LWlgvAwz.js";
+import { t as r } from "./text-DwmZ-ew8.js";
+import { t as i } from "./field-error-LtNtEKDp.js";
+import { t as a } from "./splitDataAttributes-_JTFOOIb.js";
+import { Group as o, RadioButton as s, RadioField as c, RadioGroup as l, composeRenderProps as u } from "react-aria-components";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import '../assets/radio.css';//#region src/radio/RadioField.tsx
+var m = (e) => /* @__PURE__ */ f(c, { ...e }), h = {
+	radioGroup: "_radioGroup_1l7aa_1",
+	wrap: "_wrap_1l7aa_12",
+	radioButton: "_radioButton_1l7aa_25"
+}, g = ({ className: t, ...n }) => /* @__PURE__ */ f(s, {
+	className: e(h.radioButton, t),
+	...n
+}), _ = ({ children: e, className: t, ...n }) => {
+	let [r, i] = a(n);
+	return /* @__PURE__ */ f(m, {
+		...i,
+		children: /* @__PURE__ */ f(g, {
+			...r,
+			className: t,
+			children: e
+		})
+	});
+}, v = ({ label: a, description: s, errorMessage: c, children: m, className: g, errorPosition: _ = "top", popover: v, ...y }) => /* @__PURE__ */ f(l, {
+	...y,
+	className: e(h.radioGroup, g),
+	children: u(m, (e) => /* @__PURE__ */ p(d, { children: [
+		/* @__PURE__ */ f(t, {
+			popover: v,
+			children: a && /* @__PURE__ */ f(n, { children: a })
+		}),
+		s && /* @__PURE__ */ f(r, {
+			slot: "description",
+			children: s
+		}),
+		_ === "top" && /* @__PURE__ */ f(i, {
+			"data-testid": "fieldError",
+			children: c
+		}),
+		/* @__PURE__ */ f(o, {
+			className: h.wrap,
+			children: e
+		}),
+		_ === "bottom" && /* @__PURE__ */ f(i, {
+			"data-testid": "fieldError",
+			children: c
+		})
+	] }))
+});
+//#endregion
+export { m as i, _ as n, g as r, v as t };

package/chunks/{select-KQzDIamx.js → select-oLCNpryY.js}

@@ -1,6 +1,6 @@
 import { n as e, t } from "./clsx-Di52oYUU.js";
 import { t as n } from "./chevron-down-CP7nEDei.js";
-import { n as r } from "./checkbox-DcXA9GSd.js";
+import { n as r } from "./checkbox-Bqd8B58G.js";
 import { t as i } from "./x-BJAOO5a5.js";
 import { t as a } from "./useLocalizedStringFormatter-CeyBc0x0.js";
 import { n as o, t as s } from "./label-LWlgvAwz.js";

package/chunks/splitDataAttributes-_JTFOOIb.js

@@ -0,0 +1,8 @@
+//#region src/utils/splitDataAttributes.ts
+function e(e) {
+	let t = {}, n = {};
+	for (let [r, i] of Object.entries(e)) r.startsWith("data-") ? t[r] = i : n[r] = i;
+	return [t, n];
+}
+//#endregion
+export { e as t };

package/chunks/stack-LF3ExhH9.js

@@ -0,0 +1,22 @@
+'use client';
+import { t as e } from "./clsx-Di52oYUU.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import '../assets/stack.css';var r = { stack: "_stack_1g0ly_7" }, i = t.forwardRef(({ children: t, elementType: i = "div", direction: a = "column", spacing: o = "small", alignItems: s = "stretch", justifyContent: c = "start", wrap: l = !1, className: u, role: d, ...f }, p) => {
+	let m = i, h = i === "ul" || i === "ol";
+	return /* @__PURE__ */ n(m, {
+		...f,
+		ref: p,
+		role: d ?? (h ? "list" : void 0),
+		className: e(r.stack, u),
+		"data-direction": a,
+		"data-align": s,
+		"data-justify": c,
+		"data-wrap": l || void 0,
+		"data-spacing": o,
+		children: t
+	});
+});
+i.displayName = "Stack";
+//#endregion
+export { i as t };

package/chunks/{table-zT6eQ3ZZ.js → table-CmNWoAYO.js}

@@ -1,7 +1,7 @@
 'use client';
 import { t as e } from "./clsx-Di52oYUU.js";
 import { t } from "./createLucideIcon-BgluSHFG.js";
-import { n } from "./checkbox-DcXA9GSd.js";
+import { n } from "./checkbox-Bqd8B58G.js";
 import { Button as r, Cell as i, Collection as a, Column as o, Row as s, Table as c, TableBody as l, TableHeader as u, useTableOptions as d } from "react-aria-components";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import '../assets/table.css';var h = t("arrow-down", [["path", {

package/date-picker/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/date-picker-BomOO1LI.js";
+import { n as e, t } from "../chunks/date-picker-DZivTUB_.js";
 export { e as DatePicker, t as DateRangePicker };

package/index.d.ts

@@ -32,6 +32,7 @@ export * from './search-field';
 export * from './select';
 export * from './skeleton';
 export * from './spinner';
+export * from './stack';
 export * from './table';
 export * from './tabs';
 export * from './tag';

package/index.js

@@ -4,12 +4,12 @@ import { n as e, t } from "./chunks/accordion-DIVTJU3O.js";
 import { t as n } from "./chunks/clsx-Di52oYUU.js";
 import { t as r } from "./chunks/spinner-LdHPVms_.js";
 import { n as i, t as a } from "./chunks/link-BAgs4RwY.js";
-import { a as o, i as s, n as c, o as l, r as u, t as d } from "./chunks/table-zT6eQ3ZZ.js";
+import { a as o, i as s, n as c, o as l, r as u, t as d } from "./chunks/table-CmNWoAYO.js";
 import { t as f } from "./chunks/link-button-BuPMEGUj.js";
-import { n as p, t as m } from "./chunks/date-picker-BomOO1LI.js";
-import { n as h, t as g } from "./chunks/calendar-BZPktkdE.js";
+import { n as p, t as m } from "./chunks/date-picker-DZivTUB_.js";
+import { n as h, t as g } from "./chunks/calendar-Bl_obez5.js";
 import { a as _, i as v, n as y, r as b, t as x } from "./chunks/layout-Db5um0f7.js";
-import { i as S, n as C, r as w, t as T } from "./chunks/checkbox-DcXA9GSd.js";
+import { i as S, n as C, r as w, t as T } from "./chunks/checkbox-Bqd8B58G.js";
 import { n as E, t as D } from "./chunks/color-scheme-switch-DVZjdwc9.js";
 import { t as O } from "./chunks/search-field-BvfOHvUI.js";
 import { n as k, t as A } from "./chunks/file-list-TmEuO1fJ.js";
@@ -23,7 +23,7 @@ import { t as B } from "./chunks/popover-DGcogqbS.js";
 import { n as V, r as H, t as U } from "./chunks/modal-C-UsxdO0.js";
 import { t as W } from "./chunks/text-DwmZ-ew8.js";
 import { t as G } from "./chunks/field-error-LtNtEKDp.js";
-import { n as K, t as q } from "./chunks/select-KQzDIamx.js";
+import { n as K, t as q } from "./chunks/select-oLCNpryY.js";
 import { a as J, c as Y, i as X, n as Z, o as Q, r as $, s as ee, t as te } from "./chunks/list-box-BN_MSiOD.js";
 import { n as ne, r as re, t as ie } from "./chunks/tag-BIcqtf7b.js";
 import { a as ae, c as oe, i as se, l as ce, n as le, o as ue, r as de, s as fe, t as pe } from "./chunks/card-zIYA-SQh.js";
@@ -40,15 +40,16 @@ import { t as Ne } from "./chunks/info-banner-osR4e6nB.js";
 import { n as Pe, t as Fe } from "./chunks/tooltip-BkesIUIF.js";
 import { n as Ie, t as Le } from "./chunks/logo-DyZ2pXt7.js";
 import { t as Re } from "./chunks/progress-bar-7w_kWo2f.js";
-import { i as ze, n as Be, r as Ve, t as He } from "./chunks/radio-C-MUMGu7.js";
+import { i as ze, n as Be, r as Ve, t as He } from "./chunks/radio-BD1EuxSa.js";
 import { t as Ue } from "./chunks/skeleton-B_BPRPJy.js";
-import { i as We, n as Ge, r as Ke, t as qe } from "./chunks/tabs-Co09VWvC.js";
-import { i as Je, n as Ye, r as Xe, t as Ze } from "./chunks/textfield-CXqzzOtw.js";
-import { t as Qe } from "./chunks/time-field-CmjGBQph.js";
-import { a as $e, i as et, n as tt, o as nt, r as rt, t as it } from "./chunks/toast-gJgjitZF.js";
+import { t as We } from "./chunks/stack-LF3ExhH9.js";
+import { i as Ge, n as Ke, r as qe, t as Je } from "./chunks/tabs-Co09VWvC.js";
+import { i as Ye, n as Xe, r as Ze, t as Qe } from "./chunks/textfield-CXqzzOtw.js";
+import { t as $e } from "./chunks/time-field-CmjGBQph.js";
+import { a as et, i as tt, n as nt, o as rt, r as it, t as at } from "./chunks/toast-gJgjitZF.js";
 //#endregion
 //#region src/version.ts
-var at = {
+var ot = {
 	name: "@midas-ds/components",
 	author: { name: "Migrationsverket" },
 	keywords: [
@@ -60,7 +61,7 @@ var at = {
 	description: "Midas Components",
 	homepage: "https://designsystem.migrationsverket.se/",
 	license: "CC0-1.0",
-	version: "17.27.5",
+	version: "17.28.1",
 	module: "./index.js",
 	type: "module",
 	main: "./index.js",
@@ -92,4 +93,4 @@ var at = {
 	}
 }.version;
 //#endregion
-export { e as Accordion, t as AccordionItem, F as Badge, I as BadgeContainer, R as Breadcrumb, L as Breadcrumbs, M as Button, N as ButtonGroup, h as Calendar, de as Card, se as CardActionArea, ae as CardActions, le as CardBody, ue as CardContent, pe as CardHeader, fe as CardImage, oe as CardLink, ce as CardTitle, d as Cell, me as CharacterCounter, C as Checkbox, w as CheckboxButton, S as CheckboxField, T as CheckboxGroup, E as ColorSchemeSwitch, D as ColorSchemeSwitchMenu, c as Column, we as ComboBox, he as ContrastFilled, Te as DateField, Ee as DateInput, Oe as DateInputDivider, p as DatePicker, m as DateRangePicker, De as DateSegment, U as DialogTrigger, ke as DropZone, G as FieldError, k as FileList, A as FileListItem, Ae as FileTrigger, it as GlobalToastRegion, je as Grid, Me as GridItem, b as Header, P as Heading, Ne as InfoBanner, Xe as Input, z as Label, x as Layout, a as Link, f as LinkButton, Y as ListBox, ee as ListBoxButton, te as ListBoxEmptyState, Z as ListBoxHeader, Q as ListBoxItem, $ as ListBoxLoadMoreItem, J as ListBoxPopover, X as ListBoxSection, Le as Logo, Ie as LogoContext, ve as Menu, ye as MenuItem, Se as MenuPopover, be as MenuSection, xe as MenuTrigger, V as Modal, H as ModalOverlay, y as Navbar, B as Popover, Re as ProgressBar, Be as Radio, Ve as RadioButton, ze as RadioField, He as RadioGroup, g as RangeCalendar, i as RouterProvider, u as Row, O as SearchField, q as Select, K as SelectTrigger, Ce as Separator, v as Sidebar, _ as SidebarLink, Ue as Skeleton, r as Spinner, Ke as Tab, qe as TabList, Ge as TabPanel, s as Table, o as TableBody, l as TableHeader, We as Tabs, re as Tag, ie as TagGroup, ne as TagList, W as Text, Ze as TextArea, Ye as TextField, Je as TextFieldBase, Qe as TimeField, tt as Toast, rt as ToastProvider, et as ToastRegion, ge as ToggleButton, _e as ToggleButtonGroup, Fe as Tooltip, Pe as TooltipTrigger, at as VERSION, n as clsx, $e as toastQueue, j as useLocalizedStringFormatter, nt as useToastState };
+export { e as Accordion, t as AccordionItem, F as Badge, I as BadgeContainer, R as Breadcrumb, L as Breadcrumbs, M as Button, N as ButtonGroup, h as Calendar, de as Card, se as CardActionArea, ae as CardActions, le as CardBody, ue as CardContent, pe as CardHeader, fe as CardImage, oe as CardLink, ce as CardTitle, d as Cell, me as CharacterCounter, C as Checkbox, w as CheckboxButton, S as CheckboxField, T as CheckboxGroup, E as ColorSchemeSwitch, D as ColorSchemeSwitchMenu, c as Column, we as ComboBox, he as ContrastFilled, Te as DateField, Ee as DateInput, Oe as DateInputDivider, p as DatePicker, m as DateRangePicker, De as DateSegment, U as DialogTrigger, ke as DropZone, G as FieldError, k as FileList, A as FileListItem, Ae as FileTrigger, at as GlobalToastRegion, je as Grid, Me as GridItem, b as Header, P as Heading, Ne as InfoBanner, Ze as Input, z as Label, x as Layout, a as Link, f as LinkButton, Y as ListBox, ee as ListBoxButton, te as ListBoxEmptyState, Z as ListBoxHeader, Q as ListBoxItem, $ as ListBoxLoadMoreItem, J as ListBoxPopover, X as ListBoxSection, Le as Logo, Ie as LogoContext, ve as Menu, ye as MenuItem, Se as MenuPopover, be as MenuSection, xe as MenuTrigger, V as Modal, H as ModalOverlay, y as Navbar, B as Popover, Re as ProgressBar, Be as Radio, Ve as RadioButton, ze as RadioField, He as RadioGroup, g as RangeCalendar, i as RouterProvider, u as Row, O as SearchField, q as Select, K as SelectTrigger, Ce as Separator, v as Sidebar, _ as SidebarLink, Ue as Skeleton, r as Spinner, We as Stack, qe as Tab, Je as TabList, Ke as TabPanel, s as Table, o as TableBody, l as TableHeader, Ge as Tabs, re as Tag, ie as TagGroup, ne as TagList, W as Text, Qe as TextArea, Xe as TextField, Ye as TextFieldBase, $e as TimeField, nt as Toast, it as ToastProvider, tt as ToastRegion, ge as ToggleButton, _e as ToggleButtonGroup, Fe as Tooltip, Pe as TooltipTrigger, ot as VERSION, n as clsx, et as toastQueue, j as useLocalizedStringFormatter, rt as useToastState };

package/package.json

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

package/radio/Radio.d.ts

@@ -1,3 +1,3 @@
 import { RadioFieldProps } from 'react-aria-components';
 export type RadioProps = RadioFieldProps;
-export declare const Radio: ({ children, className, ...rest }: RadioProps) => import('react').JSX.Element;
+export declare const Radio: ({ children, className, ...props }: RadioProps) => import('react').JSX.Element;

package/radio/Radio.stories.d.ts

@@ -7,7 +7,7 @@ declare const _default: {
         children: string;
         isDisabled: false;
     };
-    component: ({ children, className, ...rest }: import('./Radio').RadioProps) => import('react').JSX.Element;
+    component: ({ children, className, ...props }: import('./Radio').RadioProps) => import('react').JSX.Element;
     decorators: (Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
         className?: import('react-aria-components').ClassNameOrFunction<import('react-aria-components').RadioFieldRenderProps> | undefined;
         inputRef?: import('react').Ref<HTMLInputElement | null> | undefined;

package/radio/RadioGroup.stories.d.ts

@@ -4,7 +4,7 @@ declare const _default: {
     title: string;
     component: import('react').FC<import('./RadioGroup').RadioGroupProps>;
     subcomponents: {
-        Radio: ({ children, className, ...rest }: import('./Radio').RadioProps) => import('react').JSX.Element;
+        Radio: ({ children, className, ...props }: import('./Radio').RadioProps) => import('react').JSX.Element;
     };
     tags: string[];
     args: {

package/radio/index.js

@@ -1,2 +1,2 @@
-import { i as e, n as t, r as n, t as r } from "../chunks/radio-C-MUMGu7.js";
+import { i as e, n as t, r as n, t as r } from "../chunks/radio-BD1EuxSa.js";
 export { t as Radio, n as RadioButton, e as RadioField, r as RadioGroup };

package/select/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/select-KQzDIamx.js";
+import { n as e, t } from "../chunks/select-oLCNpryY.js";
 export { t as Select, e as SelectTrigger };

package/stack/Stack.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+/** The Midas semantic space tokens, `--midas-space-*` */
+export type StackSpacing = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+export type StackElementType = 'div' | 'ul' | 'ol' | 'section' | 'nav' | 'fieldset' | 'form' | 'header' | 'footer' | 'aside' | 'article';
+export interface StackProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    /**
+     * The HTML element to render, e.g. `ul` for a list of items
+     * @default 'div'
+     */
+    elementType?: StackElementType;
+    /** @default 'column' */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /**
+     * Space between the items, from the Midas semantic space tokens
+     * @default 'small'
+     */
+    spacing?: StackSpacing;
+    /**
+     * How the items line up across the direction: horizontally in a column,
+     * vertically in a row. `stretch` makes them as wide as the Stack in a
+     * column and as tall as it in a row
+     * @default 'stretch'
+     */
+    alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /**
+     * How the items are placed along the direction: vertically in a column,
+     * horizontally in a row. `between` puts the first and last item at the
+     * edges, `around` gives each item equal space on both sides and `evenly`
+     * makes every gap the same, edges included
+     * @default 'start'
+     */
+    justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+    /** Let the items wrap onto several lines */
+    wrap?: boolean;
+}
+/**
+ * Lays out its children in one direction, with spacing from the Midas space
+ * tokens.
+ *
+ * @see {@link https://designsystem.migrationsverket.se/components/stack}
+ */
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLElement>>;

package/stack/Stack.stories.d.ts

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Stack } from '.';
+type Story = StoryObj<typeof Stack>;
+declare const _default: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Stack').StackProps & import('react').RefAttributes<HTMLElement>>;
+    tags: string[];
+    args: {
+        children: import('react').JSX.Element[];
+        direction: "column";
+        alignItems: "stretch";
+        justifyContent: "start";
+        wrap: false;
+    };
+};
+export default _default;
+export declare const Vertical: Story;
+export declare const Horizontal: Story;
+/** Every Midas semantic space token */
+export declare const Spacing: Story;
+/** A list keeps its list semantics, also without bullets */
+export declare const AsList: Story;
+export declare const Wrap: Story;
+export declare const SpaceBetween: Story;

package/stack/index.d.ts

@@ -0,0 +1,2 @@
+export { Stack } from './Stack';
+export type { StackElementType, StackProps, StackSpacing } from './Stack';

package/stack/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../chunks/stack-LF3ExhH9.js";
+export { e as Stack };

package/table/index.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/table-zT6eQ3ZZ.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/table-CmNWoAYO.js";
 export { a as Cell, n as Column, i as Row, t as Table, e as TableBody, r as TableHeader };

package/utils/splitDataAttributes.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Splits `data-*` attributes (e.g. `data-testid`) off a component's props.
+ *
+ * For components that render a field wrapper around the element the user
+ * interacts with, like Radio and Checkbox: the data attributes belong on the
+ * interactive element, so tests that click by test id hit the label rather
+ * than the wrapper.
+ */
+export declare function splitDataAttributes<T extends object>(props: T): readonly [Record<`data-${string}`, unknown>, T];

package/chunks/checkbox-DcXA9GSd.js

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

package/chunks/radio-C-MUMGu7.js

@@ -1,48 +0,0 @@
-import { t as e } from "./clsx-Di52oYUU.js";
-import { n as t, t as n } from "./label-LWlgvAwz.js";
-import { t as r } from "./text-DwmZ-ew8.js";
-import { t as i } from "./field-error-LtNtEKDp.js";
-import { Group as a, RadioButton as o, RadioField as s, RadioGroup as c, composeRenderProps as l } from "react-aria-components";
-import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
-import '../assets/radio.css';//#region src/radio/RadioField.tsx
-var p = (e) => /* @__PURE__ */ d(s, { ...e }), m = {
-	radioGroup: "_radioGroup_1l7aa_1",
-	wrap: "_wrap_1l7aa_12",
-	radioButton: "_radioButton_1l7aa_25"
-}, h = ({ className: t, ...n }) => /* @__PURE__ */ d(o, {
-	className: e(m.radioButton, t),
-	...n
-}), g = ({ children: e, className: t, ...n }) => /* @__PURE__ */ d(p, {
-	...n,
-	children: /* @__PURE__ */ d(h, {
-		className: t,
-		children: e
-	})
-}), _ = ({ label: o, description: s, errorMessage: p, children: h, className: g, errorPosition: _ = "top", popover: v, ...y }) => /* @__PURE__ */ d(c, {
-	...y,
-	className: e(m.radioGroup, g),
-	children: l(h, (e) => /* @__PURE__ */ f(u, { children: [
-		/* @__PURE__ */ d(t, {
-			popover: v,
-			children: o && /* @__PURE__ */ d(n, { children: o })
-		}),
-		s && /* @__PURE__ */ d(r, {
-			slot: "description",
-			children: s
-		}),
-		_ === "top" && /* @__PURE__ */ d(i, {
-			"data-testid": "fieldError",
-			children: p
-		}),
-		/* @__PURE__ */ d(a, {
-			className: m.wrap,
-			children: e
-		}),
-		_ === "bottom" && /* @__PURE__ */ d(i, {
-			"data-testid": "fieldError",
-			children: p
-		})
-	] }))
-});
-//#endregion
-export { p as i, g as n, h as r, _ as t };