@midas-ds/components 15.4.0 → 15.5.0

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 15.5.0 (2025-12-11)
+
+### 🚀 Features
+
+- **components, accordion:** add an aria-label to the status icon ([e2f126366e](https://github.com/migrationsverket/midas/commit/e2f126366e))
+
+### 🏭 Refactoring
+
+- **components:** create a common component for status icons ([be6b2480f7](https://github.com/migrationsverket/midas/commit/be6b2480f7))
+
+## 15.4.1 (2025-12-10)
+
+### 🩹 Fixes
+
+- **components:** externalize dependecies ([5e95894058](https://github.com/migrationsverket/midas/commit/5e95894058))
+
 ## 15.4.0 (2025-12-08)
 
 ### 🚀 Features

package/accordion/AccordionItem.d.ts

@@ -1,6 +1,7 @@
 import { DisclosureProps } from 'react-aria-components';
 import { HeadingProps } from '../heading';
 import { FeedbackStatus, Size } from '../common/types';
+import { FeedbackStatusIconProps } from '../common/FeedbackStatusIcon';
 import * as React from 'react';
 interface MidasAccordionItem extends Omit<DisclosureProps, 'children'> {
     /** The text displayed in the collapsed state. If a ReactNode is provided, a heading will not be automatically added, and you must provide one yourself. */
@@ -20,6 +21,10 @@ interface MidasAccordionItem extends Omit<DisclosureProps, 'children'> {
      *  @default 'large'
      **/
     size?: Size;
+    /**
+     * Change the aria-label of the status icon shown when defining the `type`
+     */
+    iconAriaLabel?: FeedbackStatusIconProps['aria-label'];
 }
 export declare const AccordionItem: React.FC<MidasAccordionItem>;
 export {};

package/accordion/index.js

@@ -1,4 +1,4 @@
-import { a as r, A as a } from "../chunks/AccordionItem-BCoomT4-.js";
+import { a as r, A as a } from "../chunks/AccordionItem-BDkCTxFM.js";
 export {
   r as Accordion,
   a as AccordionItem

package/badge/index.js

@@ -1,4 +1,4 @@
-import { B as o, a as r } from "../chunks/BadgeContainer-BJAC-kV0.js";
+import { B as o, a as r } from "../chunks/BadgeContainer-CKVsfTlF.js";
 export {
   o as Badge,
   r as BadgeContainer

package/breadcrumbs/index.js

@@ -1,4 +1,4 @@
-import { B as e } from "../chunks/Breadcrumbs-CnuqEeOL.js";
+import { B as e } from "../chunks/Breadcrumbs-By2bMbQd.js";
 export {
   e as Breadcrumbs
 };

package/button/index.js

@@ -1,5 +1,5 @@
-import { B as r } from "../chunks/Button-CHs1wv7n.js";
-import { B as p } from "../chunks/ButtonGroup-B6mr4JGY.js";
+import { B as r } from "../chunks/Button-DbQwg49l.js";
+import { B as p } from "../chunks/ButtonGroup-Dr6HOBo2.js";
 export {
   r as Button,
   p as ButtonGroup

package/calendar/index.js

@@ -1,4 +1,4 @@
-import { C as r, R as n } from "../chunks/RangeCalendar-CIxwICEf.js";
+import { C as r, R as n } from "../chunks/RangeCalendar-CuXHsT-k.js";
 export {
   r as Calendar,
   n as RangeCalendar

package/card/index.js

@@ -1,4 +1,4 @@
-import { C, d, c as s, a as e, e as t, f as n, b as o } from "../chunks/Card-D58EJCcV.js";
+import { C, d, c as s, a as e, e as t, f as n, b as o } from "../chunks/Card-ia98VoKL.js";
 export {
   C as Card,
   d as CardActionArea,

package/character-counter/index.js

@@ -1,4 +1,4 @@
-import { C as e } from "../chunks/CharacterCounter-CzCvDmNP.js";
+import { C as e } from "../chunks/CharacterCounter-DeuE2det.js";
 export {
   e as CharacterCounter
 };

package/checkbox/index.js

@@ -1,5 +1,5 @@
-import { C as e } from "../chunks/Checkbox-CogzFDe3.js";
-import { C } from "../chunks/CheckboxGroup-BLx25gqn.js";
+import { C as e } from "../chunks/Checkbox-ClhO-AzB.js";
+import { C } from "../chunks/CheckboxGroup-CIFMaanI.js";
 export {
   e as Checkbox,
   C as CheckboxGroup

package/chunks/AccordionItem-BDkCTxFM.js

@@ -0,0 +1,132 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { c as d } from "./clsx-AexbMWKp.js";
+import { DisclosureGroup as v, Disclosure as x, DisclosurePanel as I } from "react-aria-components";
+import { createContext as N, useContext as B, useEffect as b } from "react";
+import { B as k } from "./Button-DbQwg49l.js";
+import { H as w } from "./Heading-D8tNNJkt.js";
+import { F as A } from "./FeedbackStatusIcon-COWuMusk.js";
+import { C as T } from "./chevron-down-DgT-uSF9.js";
+import '../assets/AccordionItem.css';const D = "_root_17bdp_1", M = "_contained_17bdp_5", _ = {
+  root: D,
+  contained: M
+}, u = N(void 0), ne = ({
+  variant: o,
+  children: c,
+  className: r,
+  isContained: i,
+  size: n = "large",
+  ...a
+}) => {
+  const s = i || o === "contained";
+  return /* @__PURE__ */ t(u.Provider, { value: { isContained: s, size: n }, children: /* @__PURE__ */ t(
+    v,
+    {
+      className: d(
+        _.root,
+        s ? _.contained : _.uncontained,
+        r
+      ),
+      ...a,
+      children: c
+    }
+  ) });
+}, j = "_item_1em4f_1", z = "_contained_1em4f_18", F = "_medium_1em4f_28", H = "_success_1em4f_33", P = "_warning_1em4f_39", S = "_info_1em4f_45", y = "_important_1em4f_51", E = "_triggerButton_1em4f_62", G = "_triggerText_1em4f_66", R = "_trigger_1em4f_62", W = "_triggerMainContent_1em4f_77", $ = "_chevronIcon_1em4f_94", q = "_statusIcon_1em4f_100", J = "_panel_1em4f_122", K = "_content_1em4f_130", L = "_hasBackground_1em4f_135", O = "_header_1em4f_139", e = {
+  item: j,
+  contained: z,
+  medium: F,
+  success: H,
+  warning: P,
+  info: S,
+  important: y,
+  triggerButton: E,
+  triggerText: G,
+  trigger: R,
+  triggerMainContent: W,
+  "	": "_	_1em4f_1",
+  chevronIcon: $,
+  statusIcon: q,
+  panel: J,
+  content: K,
+  hasBackground: L,
+  header: O
+}, oe = ({
+  title: o,
+  children: c,
+  className: r,
+  headingLevel: i = "h2",
+  type: n,
+  hasBackground: a = !0,
+  size: s = "large",
+  isContained: f,
+  iconAriaLabel: h,
+  ...p
+}) => {
+  const g = B(u), m = f ?? g?.isContained ?? !1, C = typeof o == "object";
+  return b(() => {
+    n && !m && console.warn(
+      "AccordionItem: When 'type' is set, it is recommended to also set 'isContained' to true for visual consistency."
+    );
+  }, [n, m]), /* @__PURE__ */ l(
+    x,
+    {
+      ...p,
+      className: d(
+        e.item,
+        n && e[n],
+        (s === "medium" || g?.size === "medium") && e.medium,
+        m && e.contained,
+        r
+      ),
+      children: [
+        /* @__PURE__ */ t("div", { className: e.trigger, children: /* @__PURE__ */ l(
+          k,
+          {
+            className: e.triggerButton,
+            slot: "trigger",
+            variant: "icon",
+            children: [
+              /* @__PURE__ */ t(
+                T,
+                {
+                  size: 20,
+                  className: e.chevronIcon
+                }
+              ),
+              /* @__PURE__ */ t("div", { className: e.triggerMainContent, children: C ? o : /* @__PURE__ */ t(
+                w,
+                {
+                  level: 3,
+                  elementType: i,
+                  className: e.triggerText,
+                  children: o
+                }
+              ) }),
+              n && /* @__PURE__ */ t(
+                A,
+                {
+                  "aria-label": h,
+                  className: e.statusIcon,
+                  status: n
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ t(I, { className: e.panel, children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: d(
+              e.content,
+              a && e.hasBackground
+            ),
+            children: c
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  oe as A,
+  ne as a
+};

package/chunks/{BadgeContainer-BJAC-kV0.js → BadgeContainer-CKVsfTlF.js}

@@ -1,6 +1,6 @@
 import { jsx as r } from "react/jsx-runtime";
 import * as i from "react";
-import { c as t } from "./clsx-CuNqTHjr.js";
+import { c as t } from "./clsx-AexbMWKp.js";
 import '../assets/BadgeContainer.css';const d = "_badge_6i93e_1", c = "_hasChildren_6i93e_10", C = "_badgeContainer_6i93e_19", s = {
   badge: d,
   hasChildren: c,

package/chunks/Breadcrumbs-By2bMbQd.js

@@ -0,0 +1,28 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Breadcrumbs as t, Breadcrumb as i } from "react-aria-components";
+import { c as d } from "./clsx-AexbMWKp.js";
+import { L as p } from "./Link-yTNUNv3C.js";
+import '../assets/Breadcrumbs.css';const l = "_container_1k7pu_1", u = {
+  container: l
+}, h = ({
+  items: c,
+  className: a,
+  ...s
+}) => /* @__PURE__ */ r(
+  t,
+  {
+    className: d(u.container, a),
+    ...s,
+    children: c.map(({ title: o, href: e, isDisabled: n }, m) => /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(
+      p,
+      {
+        href: e,
+        isDisabled: n,
+        children: o
+      }
+    ) }, o.toLocaleLowerCase() + m))
+  }
+);
+export {
+  h as B
+};

package/chunks/Button-DbQwg49l.js

@@ -0,0 +1,46 @@
+import { jsx as e, jsxs as c, Fragment as l } from "react/jsx-runtime";
+import { B as r } from "./Button.module-Cm0H98vy.js";
+import { Button as u } from "react-aria-components";
+import { c as p } from "./clsx-AexbMWKp.js";
+import { S as g } from "./Spinner-CL9evrHm.js";
+const S = ({
+  variant: i = "primary",
+  fullwidth: o,
+  className: m,
+  iconPlacement: s,
+  size: d = "large",
+  icon: n,
+  iconSize: a,
+  ...t
+}) => /* @__PURE__ */ e(
+  u,
+  {
+    className: p(
+      r.button,
+      i === "primary" && r.primary,
+      i === "secondary" && r.secondary,
+      i === "tertiary" && r.tertiary,
+      i === "danger" && r.danger,
+      i === "icon" && r.iconBtn,
+      o && r.fullwidth,
+      d === "medium" && r.medium,
+      s === "right" && r.iconRight,
+      m
+    ),
+    ...t,
+    children: /* @__PURE__ */ c(l, { children: [
+      n && !t.isPending && /* @__PURE__ */ e(
+        n,
+        {
+          "aria-hidden": !0,
+          size: a ?? 20
+        }
+      ),
+      t.isPending && /* @__PURE__ */ e(g, { small: !0 }),
+      t.children
+    ] })
+  }
+);
+export {
+  S as B
+};

package/chunks/{ButtonGroup-B6mr4JGY.js → ButtonGroup-Dr6HOBo2.js}

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { c as a } from "./clsx-CuNqTHjr.js";
+import { c as a } from "./clsx-AexbMWKp.js";
 import '../assets/ButtonGroup.css';const n = "_buttonGroup_o1hqg_1", p = {
   buttonGroup: n
 }, b = ({

package/chunks/Card-ia98VoKL.js

@@ -0,0 +1,130 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { c } from "./clsx-AexbMWKp.js";
+import * as i from "react";
+import { H as m } from "./Heading-D8tNNJkt.js";
+import { Button as _, Link as C } from "react-aria-components";
+import { A as x } from "./arrow-right-DNeP8Eqv.js";
+import '../assets/Card.css';const A = "_card_1x9yi_1", h = "_horizontal_1x9yi_11", u = "_cardLink_1x9yi_16", I = "_cardContent_1x9yi_21", z = "_cardActions_1x9yi_40", k = "_cardActionArea_1x9yi_50", p = "_cardImage_1x9yi_83", y = "_cardLinkIcon_1x9yi_115", n = {
+  card: A,
+  horizontal: h,
+  cardLink: u,
+  cardContent: I,
+  cardActions: z,
+  cardActionArea: k,
+  cardImage: p,
+  cardLinkIcon: y
+}, e = i.createContext({
+  horizontal: void 0,
+  titleId: void 0
+}), j = ({
+  horizontal: a,
+  className: o,
+  children: t,
+  ...s
+}) => {
+  const d = `card-title-${i.useId()}`;
+  return /* @__PURE__ */ r(e.Provider, { value: { horizontal: a, titleId: d }, children: /* @__PURE__ */ r(
+    "div",
+    {
+      ...s,
+      className: c(
+        n.card,
+        a && n.horizontal,
+        o
+      ),
+      children: t
+    }
+  ) });
+}, H = ({
+  children: a,
+  ...o
+}) => {
+  const { horizontal: t } = i.useContext(e);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ...o,
+      className: c(n.cardContent, t && n.horizontal),
+      children: a
+    }
+  );
+}, R = ({
+  elementType: a = "h2",
+  children: o
+}) => {
+  const { horizontal: t, titleId: s } = i.useContext(e);
+  return /* @__PURE__ */ r(
+    m,
+    {
+      level: t ? 5 : 3,
+      elementType: a,
+      isExpressive: t,
+      className: c(n.cardTitle, t && n.horizontal),
+      id: s,
+      children: o
+    }
+  );
+}, T = ({
+  children: a,
+  ...o
+}) => {
+  const { horizontal: t } = i.useContext(e);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ...o,
+      className: c(n.cardActions, t && n.horizontal),
+      children: a
+    }
+  );
+}, w = ({ children: a, className: o, ...t }) => {
+  const { titleId: s } = i.useContext(e);
+  return /* @__PURE__ */ r(
+    _,
+    {
+      ...t,
+      "aria-labelledby": s,
+      className: c(n.cardActionArea, o),
+      children: a
+    }
+  );
+}, B = ({
+  as: a = "img",
+  className: o,
+  ...t
+}) => /* @__PURE__ */ r(
+  a,
+  {
+    ...t,
+    className: c(n.cardImage, o)
+  }
+), E = ({
+  children: a,
+  as: o,
+  ...t
+}) => /* @__PURE__ */ l(
+  o || C,
+  {
+    ...t,
+    className: c(n.cardLink, t.className),
+    children: [
+      a,
+      /* @__PURE__ */ r(
+        x,
+        {
+          className: n.cardLinkIcon,
+          size: 24
+        }
+      )
+    ]
+  }
+);
+export {
+  j as C,
+  H as a,
+  R as b,
+  T as c,
+  w as d,
+  B as e,
+  E as f
+};

package/chunks/CharacterCounter-DeuE2det.js

@@ -0,0 +1,21 @@
+import { jsx as s } from "react/jsx-runtime";
+import * as i from "react";
+import { useContextProps as d, InputContext as h } from "react-aria-components";
+import '../assets/CharacterCounter.css';const m = "_characterCounter_1f0mh_1", u = {
+  characterCounter: m
+}, f = i.forwardRef((t, a) => {
+  [t] = d(t, a, h);
+  const { maxLength: e, value: n, isLonely: c } = t, { length: r } = n?.toString() ?? "", o = e !== void 0;
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      className: u.characterCounter,
+      "data-exceeded": o && r > e || void 0,
+      "data-lonely": c || void 0,
+      children: o ? `${r} / ${e}` : r
+    }
+  );
+});
+export {
+  f as C
+};

package/chunks/Checkbox-ClhO-AzB.js

@@ -0,0 +1,122 @@
+import { jsxs as v, jsx as t } from "react/jsx-runtime";
+import * as i from "react";
+import f from "react";
+import { mergeProps as u, VisuallyHidden as k, useCheckboxGroupItem as C, useCheckbox as R, useHover as _, usePress as I, useFocusRing as P } from "react-aria";
+import { useContextProps as g, CheckboxContext as G, useSlottedContext as y, FormContext as w } from "react-aria-components";
+import { a as h } from "./clsx-AexbMWKp.js";
+import { variables as m } from "@midas-ds/theme";
+import { c as B } from "./createLucideIcon-D4r5Phnh.js";
+import { C as F } from "./check-BxlvVsvD.js";
+import { useToggleState as L } from "@react-stately/toggle";
+import '../assets/Checkbox.css';const N = [["path", { d: "M5 12h14", key: "1ays0h" }]], S = B("minus", N), D = f.createContext(null), H = "_checkboxInner_19c98_1", O = "_checkbox_19c98_1", j = "_checkboxGroup_19c98_143", q = "_checkboxList_19c98_154", x = {
+  checkboxInner: H,
+  checkbox: O,
+  checkboxGroup: j,
+  checkboxList: q
+}, b = i.forwardRef((e, o) => {
+  const { hoverProps: c, isHovered: s } = e.hoverResult, { pressProps: n, isPressed: a } = e.pressResult, { isFocused: r, isFocusVisible: d, focusProps: l } = e.focusRingAria;
+  return /* @__PURE__ */ v(
+    "label",
+    {
+      ref: o,
+      ...u(c, n, e.labelProps),
+      slot: e.slot || void 0,
+      className: h(x.checkbox, e.className),
+      "data-hovered": s || void 0,
+      "data-selected": e.isSelected || void 0,
+      "data-indeterminate": e.isIndeterminate || void 0,
+      "data-pressed": a || void 0,
+      "data-disabled": e.isDisabled || void 0,
+      "data-readonly": e.isReadOnly || void 0,
+      "data-invalid": e.isInvalid || void 0,
+      "data-focused": r || void 0,
+      "data-focus-visible": d || void 0,
+      "data-required": e.isRequired || void 0,
+      children: [
+        /* @__PURE__ */ t("div", { className: h(x.checkboxInner), children: e.isIndeterminate ? /* @__PURE__ */ t(
+          S,
+          {
+            size: 14,
+            color: m.iconOnColor
+          }
+        ) : /* @__PURE__ */ t(
+          F,
+          {
+            size: 14,
+            color: m.iconOnColor
+          }
+        ) }),
+        /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(
+          "input",
+          {
+            ...u(e.inputProps, l),
+            ref: e.inputRef
+          }
+        ) }),
+        e.children
+      ]
+    }
+  );
+}), z = i.forwardRef((e, o) => {
+  const c = C(
+    {
+      ...e,
+      value: e.value || ""
+    },
+    e.state,
+    e.inputRef
+  );
+  return /* @__PURE__ */ t(
+    b,
+    {
+      ...e,
+      ...c,
+      ref: o
+    }
+  );
+}), A = i.forwardRef((e, o) => {
+  const c = R(e, L(e), e.inputRef);
+  return /* @__PURE__ */ t(
+    b,
+    {
+      ...e,
+      ...c,
+      ref: o
+    }
+  );
+}), X = i.forwardRef(
+  (e, o) => {
+    [e, o] = g(e, o, G);
+    const c = y(w), s = e.validationBehavior ?? c?.validationBehavior ?? "native", n = i.useContext(D), a = i.useRef(null), r = _(e), d = I({
+      ref: o,
+      isDisabled: e.isDisabled
+    }), l = P();
+    return n ? /* @__PURE__ */ t(
+      z,
+      {
+        ...e,
+        state: n,
+        inputRef: a,
+        hoverResult: r,
+        pressResult: d,
+        focusRingAria: l,
+        validationBehavior: s
+      }
+    ) : /* @__PURE__ */ t(
+      A,
+      {
+        ...e,
+        inputRef: a,
+        hoverResult: r,
+        pressResult: d,
+        focusRingAria: l,
+        validationBehavior: s
+      }
+    );
+  }
+);
+export {
+  X as C,
+  D as a,
+  x as s
+};

package/chunks/CheckboxGroup-CIFMaanI.js

@@ -0,0 +1,84 @@
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { useCheckboxGroup as C } from "react-aria";
+import { useCheckboxGroupState as v } from "react-stately";
+import { a as k, L as S } from "./Label-B7taTXkd.js";
+import { T as y } from "./Text-TWzJxnto.js";
+import * as r from "react";
+import { C as d, s as u, a as g } from "./Checkbox-ClhO-AzB.js";
+import { FieldErrorContext as A } from "react-aria-components";
+import { F as P } from "./FieldError-C0HRIcAx.js";
+import { u as V } from "./useLocalizedStringFormatter-ZgRJmvHC.js";
+const F = (e, { value: t }) => {
+  const a = r.Children.toArray(e).filter(
+    (l) => r.isValidElement(l) && l.type === d
+  ), c = r.Children.count(a), n = r.Children.toArray(e).filter((l) => r.isValidElement(l)).filter((l) => !!l && l.type === d).map((l) => l.props.value), s = t.length === 0, i = t.length === c;
+  return {
+    allSelected: i,
+    someSelected: !s && !i,
+    checkboxValues: n
+  };
+}, b = ({ state: e, errorMessage: t }) => /* @__PURE__ */ o(A.Provider, { value: e.displayValidation, children: /* @__PURE__ */ o(P, { children: t }) }), G = { selectAll: "Select all" }, L = { selectAll: "Välj alla" }, E = {
+  en: G,
+  sv: L
+};
+function W(e) {
+  const t = v(e), a = V(E), { groupProps: c, labelProps: n, descriptionProps: s } = C(
+    e,
+    t
+  ), { allSelected: i, someSelected: m, checkboxValues: l } = F(
+    e.children,
+    t
+  ), x = (f) => {
+    t.setValue(f ? l : []);
+  };
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ...c,
+      className: u.checkboxGroup,
+      "data-readonly": e.isReadOnly || void 0,
+      "data-disabled": e.isDisabled || void 0,
+      children: [
+        /* @__PURE__ */ o(k, { popover: e.popover, children: e.label && /* @__PURE__ */ o(S, { ...n, children: e.label }) }),
+        e.description && /* @__PURE__ */ o(
+          y,
+          {
+            slot: "description",
+            ...s,
+            children: e.description
+          }
+        ),
+        e.errorPosition === "top" && /* @__PURE__ */ o(
+          b,
+          {
+            ...e,
+            state: t
+          }
+        ),
+        /* @__PURE__ */ h("div", { className: u.checkboxList, children: [
+          e.showSelectAll && /* @__PURE__ */ o(
+            d,
+            {
+              isSelected: i,
+              isIndeterminate: m,
+              isReadOnly: e.isReadOnly,
+              onChange: x,
+              children: e.selectAllLabel || a.format("selectAll")
+            }
+          ),
+          /* @__PURE__ */ o(g.Provider, { value: t, children: e.children })
+        ] }),
+        e.errorPosition === "bottom" && /* @__PURE__ */ o(
+          b,
+          {
+            ...e,
+            state: t
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  W as C
+};