@midas-ds/components 17.2.6 → 17.3.0

package/card/index.js

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

package/checkbox/index.js

@@ -1,5 +1,5 @@
-import { C as e } from "../chunks/Checkbox-CRLj7_Ox.js";
-import { C } from "../chunks/CheckboxGroup-DooCBqUG.js";
+import { C as e } from "../chunks/Checkbox-sAkQe7Q9.js";
+import { C } from "../chunks/CheckboxGroup-DGVV0X_Z.js";
 export {
   e as Checkbox,
   C as CheckboxGroup

package/chunks/AccordionItem-BuUIdVd_.js

@@ -0,0 +1,129 @@
+'use client';
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
+import { c as _ } from "./clsx-AexbMWKp.js";
+import { DisclosureGroup as v, Disclosure as x, DisclosurePanel as C } from "react-aria-components";
+import { createContext as I, useContext as N, useEffect as B } from "react";
+import { B as b } from "./Button-BhIvfqOc.js";
+import { H as k } from "./Heading-nfcRc2QF.js";
+import { F as w } from "./FeedbackStatusIcon-X9Bjgeta.js";
+import { C as A } from "./chevron-down-BBFYYzZq.js";
+import '../assets/AccordionItem.css';const T = "_root_17bdp_1", D = "_contained_17bdp_5", a = {
+  root: T,
+  contained: D
+}, d = I(void 0), et = ({
+  children: o,
+  className: s,
+  isContained: i,
+  size: c = "large",
+  ...e
+}) => /* @__PURE__ */ n(d.Provider, { value: { isContained: i, size: c }, children: /* @__PURE__ */ n(
+  v,
+  {
+    className: _(
+      a.root,
+      i ? a.contained : a.uncontained,
+      s
+    ),
+    ...e,
+    children: o
+  }
+) }), M = "_item_1l4iy_1", j = "_contained_1l4iy_18", z = "_medium_1l4iy_28", F = "_success_1l4iy_33", H = "_warning_1l4iy_39", P = "_info_1l4iy_45", S = "_important_1l4iy_51", E = "_triggerButton_1l4iy_62", G = "_triggerText_1l4iy_66", R = "_trigger_1l4iy_62", W = "_triggerMainContent_1l4iy_77", $ = "_chevronIcon_1l4iy_94", q = "_statusIcon_1l4iy_100", J = "_panel_1l4iy_122", K = "_content_1l4iy_130", L = "_hasBackground_1l4iy_135", O = "_header_1l4iy_139", t = {
+  item: M,
+  contained: j,
+  medium: z,
+  success: F,
+  warning: H,
+  info: P,
+  important: S,
+  triggerButton: E,
+  triggerText: G,
+  trigger: R,
+  triggerMainContent: W,
+  "	": "_	_1l4iy_1",
+  chevronIcon: $,
+  statusIcon: q,
+  panel: J,
+  content: K,
+  hasBackground: L,
+  header: O
+}, ot = ({
+  title: o,
+  children: s,
+  className: i,
+  headingLevel: c = "h2",
+  type: e,
+  hasBackground: g = !0,
+  size: u = "large",
+  isContained: h,
+  iconAriaLabel: y,
+  ...f
+}) => {
+  const l = N(d), r = h ?? l?.isContained ?? !1, p = typeof o == "object";
+  return B(() => {
+    e && !r && console.warn(
+      "AccordionItem: When 'type' is set, it is recommended to also set 'isContained' to true for visual consistency."
+    );
+  }, [e, r]), /* @__PURE__ */ m(
+    x,
+    {
+      ...f,
+      className: _(
+        t.item,
+        e && t[e],
+        (u === "medium" || l?.size === "medium") && t.medium,
+        r && t.contained,
+        i
+      ),
+      children: [
+        /* @__PURE__ */ n("div", { className: t.trigger, children: /* @__PURE__ */ m(
+          b,
+          {
+            className: t.triggerButton,
+            slot: "trigger",
+            variant: "icon",
+            children: [
+              /* @__PURE__ */ n(
+                A,
+                {
+                  size: 20,
+                  className: t.chevronIcon
+                }
+              ),
+              /* @__PURE__ */ n("div", { className: t.triggerMainContent, children: p ? o : /* @__PURE__ */ n(
+                k,
+                {
+                  level: 3,
+                  elementType: c,
+                  className: t.triggerText,
+                  children: o
+                }
+              ) }),
+              e && /* @__PURE__ */ n(
+                w,
+                {
+                  "aria-label": y,
+                  className: t.statusIcon,
+                  status: e
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ n(C, { className: t.panel, children: /* @__PURE__ */ n(
+          "div",
+          {
+            className: _(
+              t.content,
+              g && t.hasBackground
+            ),
+            children: s
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  et as A,
+  ot as a
+};

package/chunks/{Button-CaLOUTDO.js → Button-BhIvfqOc.js}

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as e, jsxs as h, Fragment as y } from "react/jsx-runtime";
-import { B as r } from "./Button.module-Cm0H98vy.js";
+import { B as r } from "./Button.module-BW0TvYZ2.js";
 import { useContextProps as B, ButtonContext as x, Button as P } from "react-aria-components";
 import { c as S } from "./clsx-AexbMWKp.js";
 import { S as w } from "./Spinner-CfKMn18u.js";

package/chunks/Button.module-BW0TvYZ2.js

@@ -0,0 +1,14 @@
+import '../assets/Button.css';const n = "_button_7n7qm_1", t = "_secondary_7n7qm_48", _ = "_tertiary_7n7qm_71", o = "_iconBtn_7n7qm_91", i = "_medium_7n7qm_111", c = "_danger_7n7qm_116", r = "_iconRight_7n7qm_138", m = "_fullwidth_7n7qm_142", s = "_primary_7n7qm_152", e = {
+  button: n,
+  secondary: t,
+  tertiary: _,
+  iconBtn: o,
+  medium: i,
+  danger: c,
+  iconRight: r,
+  fullwidth: m,
+  primary: s
+};
+export {
+  e as B
+};

package/chunks/{Card-DMSnokPn.js → Card-CVwiT9zm.js}

@@ -1,7 +1,7 @@
 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 { H as m } from "./Heading-nfcRc2QF.js";
 import { Button as _, Link as C } from "react-aria-components";
 import { A as x } from "./arrow-right-BVcFGZmy.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 = {

package/chunks/{Checkbox-CRLj7_Ox.js → Checkbox-sAkQe7Q9.js}

@@ -1,13 +1,13 @@
-import { jsxs as L, jsx as t } from "react/jsx-runtime";
-import S, { forwardRef as u, useContext as H, useRef as j } from "react";
+import { jsxs as S, jsx as t } from "react/jsx-runtime";
+import H, { forwardRef as u, useContext as j, useRef as z } from "react";
 import { VisuallyHidden as D, mergeProps as h, useCheckboxGroupItem as M, useCheckbox as O, useHover as V, usePress as q, useFocusRing as w } from "react-aria";
 import { useContextProps as A, CheckboxContext as T, useSlottedContext as E, FormContext as J } from "react-aria-components";
 import { a as x } from "./clsx-AexbMWKp.js";
-import { variables as m } from "@midas-ds/theme";
+import { variables as k } from "@midas-ds/theme";
 import { c as K } from "./createLucideIcon-CP-mMPfa.js";
 import { C as Q } from "./check-Bt2UikoU.js";
 import { useToggleState as U } from "@react-stately/toggle";
-import '../assets/Checkbox.css';const W = [["path", { d: "M5 12h14", key: "1ays0h" }]], X = K("minus", W), Y = S.createContext(null), Z = "_checkboxInner_tzrii_1", $ = "_checkbox_tzrii_1", ee = "_checkboxGroup_tzrii_143", oe = "_checkboxList_tzrii_154", b = {
+import '../assets/Checkbox.css';const W = [["path", { d: "M5 12h14", key: "1ays0h" }]], X = K("minus", W), Y = H.createContext(null), Z = "_checkboxInner_3tk0i_1", $ = "_checkbox_3tk0i_1", ee = "_checkboxGroup_3tk0i_143", oe = "_checkboxList_3tk0i_154", m = {
   checkboxInner: Z,
   checkbox: $,
   checkboxGroup: ee,
@@ -30,14 +30,14 @@ import '../assets/Checkbox.css';const W = [["path", { d: "M5 12h14", key: "1ays0
     inputRef: I,
     children: R
   }, y) => {
-    const { hoverProps: G, isHovered: P } = e, { pressProps: g, isPressed: N } = o, { isFocused: z, isFocusVisible: B, focusProps: F } = c;
-    return /* @__PURE__ */ L(
+    const { hoverProps: G, isHovered: P } = e, { pressProps: g, isPressed: N } = o, { isFocused: B, isFocusVisible: F, focusProps: L } = c;
+    return /* @__PURE__ */ S(
       "label",
       {
         ref: y,
         ...h(G, g, i),
         slot: n || void 0,
-        className: x(b.checkbox, a),
+        className: x(m.checkbox, a),
         "data-hovered": P || void 0,
         "data-selected": r || void 0,
         "data-indeterminate": s || void 0,
@@ -45,27 +45,27 @@ import '../assets/Checkbox.css';const W = [["path", { d: "M5 12h14", key: "1ays0
         "data-disabled": d || void 0,
         "data-readonly": f || void 0,
         "data-invalid": C || void 0,
-        "data-focused": z || void 0,
-        "data-focus-visible": B || void 0,
+        "data-focused": B || void 0,
+        "data-focus-visible": F || void 0,
         "data-required": _ || void 0,
         children: [
-          /* @__PURE__ */ t("div", { className: x(b.checkboxInner), children: s ? /* @__PURE__ */ t(
+          /* @__PURE__ */ t("div", { className: x(m.checkboxInner), children: s ? /* @__PURE__ */ t(
             X,
             {
               size: 14,
-              color: m.iconOnColor
+              color: k.iconOnColor
             }
           ) : /* @__PURE__ */ t(
             Q,
             {
               size: 14,
-              color: m.iconOnColor
+              color: k.iconOnColor
             }
           ) }),
           /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(
             "input",
             {
-              ...h(p, F),
+              ...h(p, L),
               ref: I
             }
           ) }),
@@ -76,7 +76,7 @@ import '../assets/Checkbox.css';const W = [["path", { d: "M5 12h14", key: "1ays0
   }
 );
 l.displayName = "CheckboxInner";
-const k = u((e, o) => {
+const b = u((e, o) => {
   const c = M(
     {
       ...e,
@@ -94,7 +94,7 @@ const k = u((e, o) => {
     }
   );
 });
-k.displayName = "CheckBoxGroupItem";
+b.displayName = "CheckBoxGroupItem";
 const v = u((e, o) => {
   const c = O(e, U(e), e.inputRef);
   return /* @__PURE__ */ t(
@@ -110,12 +110,12 @@ v.displayName = "SingleCheckbox";
 const te = u(
   (e, o) => {
     [e, o] = A(e, o, T);
-    const c = E(J), i = e.validationBehavior ?? c?.validationBehavior ?? "native", n = H(Y), a = j(null), r = V(e), s = q({
+    const c = E(J), i = e.validationBehavior ?? c?.validationBehavior ?? "native", n = j(Y), a = z(null), r = V(e), s = q({
       ref: o,
       isDisabled: e.isDisabled
     }), d = w();
     return n ? /* @__PURE__ */ t(
-      k,
+      b,
       {
         ...e,
         state: n,
@@ -142,5 +142,5 @@ te.displayName = "Checkbox";
 export {
   te as C,
   Y as a,
-  b as s
+  m as s
 };

package/chunks/{CheckboxGroup-DooCBqUG.js → CheckboxGroup-DGVV0X_Z.js}

@@ -1,12 +1,12 @@
 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-6GZmmff9.js";
-import { T as y } from "./Text-BuXvuoqM.js";
+import { a as k, L as S } from "./Label-s4J9sYdy.js";
+import { T as y } from "./Text-D0r_W4lH.js";
 import * as r from "react";
-import { C as d, s as u, a as g } from "./Checkbox-CRLj7_Ox.js";
+import { C as d, s as u, a as g } from "./Checkbox-sAkQe7Q9.js";
 import { FieldErrorContext as A } from "react-aria-components";
-import { F as P } from "./FieldError-BMTrvSof.js";
+import { F as P } from "./FieldError-krpMBtie.js";
 import { u as V } from "./useLocalizedStringFormatter-BHvsRxDk.js";
 const F = (e, { value: t }) => {
   const a = r.Children.toArray(e).filter(

package/chunks/{ClearButton-DPm_d7SL.js → ClearButton-DBr9Zfwq.js}

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as r } from "react/jsx-runtime";
-import { B as o } from "./Button-CaLOUTDO.js";
+import { B as o } from "./Button-BhIvfqOc.js";
 import { X as i } from "./x-B9bYxG31.js";
 const m = (t) => /* @__PURE__ */ r(
   o,

package/chunks/{ColorSchemeSwitch-DOQ0yjtt.js → ColorSchemeSwitch-DkY8VTVR.js}

@@ -2,7 +2,7 @@
 import { jsxs as e, jsx as t } from "react/jsx-runtime";
 import * as i from "react";
 import { VisuallyHidden as a } from "react-aria";
-import { a as y, T as r } from "./ToggleButtonGroup-CXKTrLbb.js";
+import { a as y, T as r } from "./ToggleButtonGroup-Bv9xpwTT.js";
 import { c as d } from "./createLucideIcon-CP-mMPfa.js";
 import { u } from "./useLocalizedStringFormatter-BHvsRxDk.js";
 import '../assets/ColorSchemeSwitch.css';const g = [

package/chunks/ComboBox-Dx4GD2oe.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import L from "react";
+import { ComboBox as F, Input as w, Button as R } from "react-aria-components";
+import { c as s } from "./clsx-AexbMWKp.js";
+import { a as y, L as B } from "./Label-s4J9sYdy.js";
+import { T as C } from "./Text-D0r_W4lH.js";
+import { F as u } from "./FieldError-krpMBtie.js";
+import { L as N } from "./ListBox-CDlOUvzJ.js";
+import { a as g, L as E } from "./ListBoxEmptyState-CXKkWQy1.js";
+import { C as S } from "./chevron-down-BBFYYzZq.js";
+import { u as T } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import '../assets/ComboBox.css';const j = "_combobox_1v46d_1", I = "_inputField_1v46d_6", O = "_medium_1v46d_27", U = "_wrap_1v46d_79", z = "_button_1v46d_85", D = "_icon_1v46d_121", t = {
+  combobox: j,
+  inputField: I,
+  medium: O,
+  wrap: U,
+  button: z,
+  icon: D
+}, M = { showList: "Show list", noResultsFound: "No results found" }, V = { showList: "Visa lista", noResultsFound: "Inga träffar" }, W = {
+  en: M,
+  sv: V
+};
+function Y({
+  label: i,
+  description: r,
+  errorMessage: n,
+  children: p,
+  items: f,
+  className: _,
+  errorPosition: a = "top",
+  size: d = "large",
+  popover: h,
+  listBoxProps: b,
+  ...e
+}) {
+  const m = L.useRef(null), l = T(W), x = (v) => {
+    v.currentTarget.value && m.current?.select();
+  };
+  return /* @__PURE__ */ c(
+    F,
+    {
+      className: s(t.combobox, _),
+      ...e,
+      "data-readonly": e.isReadOnly || void 0,
+      children: [
+        /* @__PURE__ */ o(y, { popover: h, children: i && /* @__PURE__ */ o(B, { children: i }) }),
+        r && /* @__PURE__ */ o(C, { slot: "description", children: r }),
+        a === "top" && /* @__PURE__ */ o(u, { "data-testid": "fieldError", children: n }),
+        /* @__PURE__ */ c("div", { className: t.wrap, children: [
+          /* @__PURE__ */ o(
+            w,
+            {
+              className: s(t.inputField, {
+                [t.medium]: d === "medium"
+              }),
+              "data-readonly": e.isReadOnly || void 0,
+              onMouseUp: x,
+              ref: m
+            }
+          ),
+          /* @__PURE__ */ o(
+            R,
+            {
+              className: s(t.button, {
+                [t.medium]: d === "medium"
+              }),
+              "aria-label": l.format("showList"),
+              children: /* @__PURE__ */ o(
+                "div",
+                {
+                  className: t.icon,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ o(
+                    S,
+                    {
+                      size: 20,
+                      "aria-hidden": !0
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        a === "bottom" && /* @__PURE__ */ o(u, { "data-testid": "fieldError", children: n }),
+        /* @__PURE__ */ o(g, { offset: 4, children: /* @__PURE__ */ o(
+          N,
+          {
+            items: f,
+            renderEmptyState: () => /* @__PURE__ */ o(E, { children: l.format("noResultsFound") }),
+            ...b,
+            children: p
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  Y as C
+};

package/chunks/{DateField-6CclHfL2.js → DateField-h3l0qG7u.js}

@@ -1,18 +1,18 @@
 import { jsxs as p, jsx as e } from "react/jsx-runtime";
 import * as x from "react";
-import { DateField as g, DateFieldStateContext as h } from "react-aria-components";
+import { DateField as h, DateFieldStateContext as D } from "react-aria-components";
 import { c as d } from "./clsx-AexbMWKp.js";
-import { D, b as B } from "./DateInputDivider-DwopMIb9.js";
-import { F } from "./FieldError-BMTrvSof.js";
-import { a as C, L as b } from "./Label-6GZmmff9.js";
-import { T as L } from "./Text-BuXvuoqM.js";
-import { C as S } from "./ClearButton-DPm_d7SL.js";
+import { D as g, b as B } from "./DateInputDivider-DwopMIb9.js";
+import { F } from "./FieldError-krpMBtie.js";
+import { a as C, L as b } from "./Label-s4J9sYdy.js";
+import { T as L } from "./Text-D0r_W4lH.js";
+import { C as S } from "./ClearButton-DBr9Zfwq.js";
 import { FocusScope as v, useFocusManager as N } from "@react-aria/focus";
 import { u as V } from "./useLocalizedStringFormatter-BHvsRxDk.js";
 import '../assets/DateField.css';const j = { clear: "Clear date" }, T = { clear: "Rensa datum" }, E = {
   en: j,
   sv: T
-}, I = "_dateField_g5lxa_1", M = "_inputField_g5lxa_7", P = "_medium_g5lxa_38", R = "_clearButton_g5lxa_47", l = {
+}, I = "_dateField_58xuo_1", M = "_inputField_58xuo_7", P = "_medium_58xuo_38", R = "_clearButton_58xuo_47", o = {
   dateField: I,
   inputField: M,
   medium: P,
@@ -21,20 +21,20 @@ import '../assets/DateField.css';const j = { clear: "Clear date" }, T = { clear:
   isClearable: i,
   size: t,
   isDisabled: s,
-  isReadOnly: o
+  isReadOnly: r
 }) => {
-  const r = V(E), a = x.useContext(h), n = N(), m = () => {
+  const l = V(E), a = x.useContext(D), n = N(), m = () => {
     a?.setValue(null), n?.focusFirst();
   };
-  return i && a?.value != null && !o ? /* @__PURE__ */ e(
+  return i && a?.value != null && !r ? /* @__PURE__ */ e(
     S,
     {
       onPress: m,
       size: t,
       isDisabled: s,
-      "aria-label": r.format("clear"),
-      className: d(l.clearButton, {
-        [l.medium]: t === "medium"
+      "aria-label": l.format("clear"),
+      className: d(o.clearButton, {
+        [o.medium]: t === "medium"
       })
     }
   ) : null;
@@ -42,8 +42,8 @@ import '../assets/DateField.css';const j = { clear: "Clear date" }, T = { clear:
   className: i,
   description: t,
   errorMessage: s,
-  errorPosition: o = "top",
-  label: r,
+  errorPosition: r = "top",
+  label: l,
   size: a = "large",
   popover: n,
   isClearable: m = !1,
@@ -51,25 +51,25 @@ import '../assets/DateField.css';const j = { clear: "Clear date" }, T = { clear:
   isDisabled: u,
   ...f
 }) => /* @__PURE__ */ p(
-  g,
+  h,
   {
     ...f,
     isReadOnly: c,
     isDisabled: u,
-    className: d(l.dateField, i),
+    className: d(o.dateField, i),
     children: [
-      /* @__PURE__ */ e(C, { popover: n, children: r && /* @__PURE__ */ e(b, { children: r }) }),
+      /* @__PURE__ */ e(C, { popover: n, children: l && /* @__PURE__ */ e(b, { children: l }) }),
       t && /* @__PURE__ */ e(L, { slot: "description", children: t }),
-      o === "top" && /* @__PURE__ */ e(F, { children: s }),
+      r === "top" && /* @__PURE__ */ e(F, { children: s }),
       /* @__PURE__ */ e(
         "div",
         {
-          className: d(l.inputField, {
-            [l.medium]: a === "medium"
+          className: d(o.inputField, {
+            [o.medium]: a === "medium"
           }),
           "data-testid": "date-field_input-field",
           children: /* @__PURE__ */ p(v, { children: [
-            /* @__PURE__ */ e(D, { children: (_) => /* @__PURE__ */ e(B, { segment: _ }) }),
+            /* @__PURE__ */ e(g, { children: (_) => /* @__PURE__ */ e(B, { segment: _ }) }),
             /* @__PURE__ */ e(
               W,
               {
@@ -82,7 +82,7 @@ import '../assets/DateField.css';const j = { clear: "Clear date" }, T = { clear:
           ] })
         }
       ),
-      o === "bottom" && /* @__PURE__ */ e(F, { children: s })
+      r === "bottom" && /* @__PURE__ */ e(F, { children: s })
     ]
   }
 );