@midas-ds/components 16.2.5 → 16.3.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 16.3.0 (2026-01-13)
+
+### 🚀 Features
+
+- **components:** add displayName to forwardRef components" ([474d161db5](https://github.com/migrationsverket/midas/commit/474d161db5))
+
+### 🔙 Rollback changes
+
+- Revert "refactor: remove React.forwardRef" ([c4f26cd721](https://github.com/migrationsverket/midas/commit/c4f26cd721))
+
 ## 16.2.5 (2026-01-09)
 
 ### 🏭 Refactoring

package/calendar/index.js

@@ -1,4 +1,4 @@
-import { C as r, R as n } from "../chunks/RangeCalendar-BF-6p7u2.js";
+import { C as r, R as n } from "../chunks/RangeCalendar-BSth1Fmv.js";
 export {
   r as Calendar,
   n as RangeCalendar

package/character-counter/CharacterCounter.d.ts

@@ -1,7 +1,5 @@
-import { Ref } from 'react';
 import { InputProps } from 'react-aria-components';
 export interface CharacterCounterProps extends InputProps {
     isLonely?: boolean;
-    ref?: Ref<HTMLInputElement>;
 }
-export declare const CharacterCounter: ({ ref, ...props }: CharacterCounterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CharacterCounter: import('react').ForwardRefExoticComponent<CharacterCounterProps & import('react').RefAttributes<HTMLInputElement>>;

package/character-counter/index.js

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

package/checkbox/Checkbox.d.ts

@@ -1,2 +1,3 @@
-import { CheckboxProps } from './types';
-export declare const Checkbox: ({ ref, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: import('react').ForwardRefExoticComponent<import('react-aria').AriaCheckboxProps & import('react-aria-components').SlotProps & {
+    className?: string;
+} & import('react').RefAttributes<HTMLLabelElement>>;

package/checkbox/CheckboxGroupItem.d.ts

@@ -1,2 +1,2 @@
 import { CheckboxGroupItemProps } from './types';
-export declare const CheckBoxGroupItem: ({ ref, ...props }: CheckboxGroupItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckBoxGroupItem: import('react').ForwardRefExoticComponent<CheckboxGroupItemProps & import('react').RefAttributes<HTMLLabelElement>>;

package/checkbox/CheckboxInner.d.ts

@@ -1,2 +1 @@
-import { CheckboxInnerProps } from './types';
-export declare const CheckboxInner: ({ ref, ...props }: CheckboxInnerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxInner: import('react').ForwardRefExoticComponent<import('./types').CheckboxComponentProps & import('react-aria').CheckboxAria & import('react').RefAttributes<HTMLLabelElement>>;

package/checkbox/SingleCheckbox.d.ts

@@ -1,2 +1,2 @@
 import { CheckboxComponentProps } from './types';
-export declare const SingleCheckbox: ({ ref, ...props }: CheckboxComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SingleCheckbox: import('react').ForwardRefExoticComponent<CheckboxComponentProps & import('react').RefAttributes<HTMLLabelElement>>;

package/checkbox/index.js

@@ -1,5 +1,5 @@
-import { C as e } from "../chunks/Checkbox-gsEu5wcB.js";
-import { C } from "../chunks/CheckboxGroup-A7UJMi5J.js";
+import { C as e } from "../chunks/Checkbox-BTAfwDxU.js";
+import { C } from "../chunks/CheckboxGroup-BQ8EpX7O.js";
 export {
   e as Checkbox,
   C as CheckboxGroup

package/checkbox/types.d.ts

@@ -3,7 +3,6 @@ import { SlotProps } from 'react-aria-components';
 import { CheckboxGroupState } from 'react-stately';
 export type CheckboxProps = AriaCheckboxProps & SlotProps & {
     className?: string;
-    ref?: React.Ref<HTMLLabelElement>;
 };
 export interface CheckboxComponentProps extends CheckboxProps {
     focusRingAria: FocusRingAria;

package/chunks/CharacterCounter-R6vh7AE5.js

@@ -0,0 +1,22 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { useContextProps as d, InputContext as h } from "react-aria-components";
+import '../assets/CharacterCounter.css';const C = "_characterCounter_1f0mh_1", m = {
+  characterCounter: C
+}, u = i((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: m.characterCounter,
+      "data-exceeded": o && r > e || void 0,
+      "data-lonely": c || void 0,
+      children: o ? `${r} / ${e}` : r
+    }
+  );
+});
+u.displayName = "CharacterCounter";
+export {
+  u as C
+};

package/chunks/Checkbox-BTAfwDxU.js

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

package/chunks/{CheckboxGroup-A7UJMi5J.js → CheckboxGroup-BQ8EpX7O.js}

@@ -4,9 +4,9 @@ import { useCheckboxGroupState as v } from "react-stately";
 import { a as k, L as S } from "./Label-Dup4lWaR.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-gsEu5wcB.js";
+import { C as d, s as u, a as g } from "./Checkbox-BTAfwDxU.js";
 import { FieldErrorContext as A } from "react-aria-components";
-import { F as P } from "./FieldError-Bc0acYNs.js";
+import { F as P } from "./FieldError-Bra5aRT3.js";
 import { u as V } from "./useLocalizedStringFormatter-ZgRJmvHC.js";
 const F = (e, { value: t }) => {
   const a = r.Children.toArray(e).filter(

package/chunks/{ComboBox-yl5zHYPk.js → ComboBox-DVK0dL2W.js}

@@ -4,7 +4,7 @@ import { ComboBox as y, Input as B, Button as F, Collection as w } from "react-a
 import { c as s } from "./clsx-AexbMWKp.js";
 import { a as C, L as S } from "./Label-Dup4lWaR.js";
 import { T as u } from "./Text-TWzJxnto.js";
-import { F as h } from "./FieldError-Bc0acYNs.js";
+import { F as h } from "./FieldError-Bra5aRT3.js";
 import { L as v } from "./ListBox-D5BBeZWL.js";
 import { a as R, L as N, b as E } from "./ListBoxSection-MZB_5DdD.js";
 import { C as I } from "./chevron-down-DgT-uSF9.js";

package/chunks/{DateField-BsT1K-bB.js → DateField-06YL8tj_.js}

@@ -2,7 +2,7 @@ import { jsxs as F, jsx as e } from "react/jsx-runtime";
 import { DateField as u } from "react-aria-components";
 import { c as m } from "./clsx-AexbMWKp.js";
 import { a as _, D as f } from "./DateInputDivider-CkTB5q5k.js";
-import { F as s } from "./FieldError-Bc0acYNs.js";
+import { F as s } from "./FieldError-Bra5aRT3.js";
 import { a as h, L as D } from "./Label-Dup4lWaR.js";
 import { T as b } from "./Text-TWzJxnto.js";
 import '../assets/DateField.css';const x = "_dateField_y3sba_1", y = "_inputField_y3sba_7", L = "_medium_y3sba_37", i = {

package/chunks/{DateRangePicker-BsK7pMRv.js → DateRangePicker-CZRWDV_g.js}

@@ -1,9 +1,9 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { Group as P, Button as b, Popover as f, Dialog as v, DatePicker as x, DateRangePicker as F } from "react-aria-components";
 import { a as m } from "./clsx-AexbMWKp.js";
-import { C as M, R as N } from "./RangeCalendar-BF-6p7u2.js";
+import { C as M, R as N } from "./RangeCalendar-BSth1Fmv.js";
 import { a as p, D as k, b as B } from "./DateInputDivider-CkTB5q5k.js";
-import { F as h } from "./FieldError-Bc0acYNs.js";
+import { F as h } from "./FieldError-Bra5aRT3.js";
 import { a as u, L as y } from "./Label-Dup4lWaR.js";
 import { T as _ } from "./Text-TWzJxnto.js";
 import { c as C } from "./createLucideIcon-D4r5Phnh.js";

package/chunks/FieldError-Bra5aRT3.js

@@ -0,0 +1,24 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as n, useContext as f } from "react";
+import { FieldErrorContext as c, FieldError as d } from "react-aria-components";
+import { c as a } from "./clsx-AexbMWKp.js";
+import { T as m } from "./Text-TWzJxnto.js";
+import '../assets/FieldError.css';const E = "_fieldError_u3cks_1", u = {
+  fieldError: E
+}, x = n(
+  (r, s) => {
+    const { children: o, isInvalid: l } = r, e = a(u.fieldError, r.className), t = f(c);
+    return !t && l && typeof o != "function" ? /* @__PURE__ */ i(m, { className: e, children: o }) : t?.isInvalid ? /* @__PURE__ */ i(
+      d,
+      {
+        ...r,
+        ref: s,
+        className: e
+      }
+    ) : null;
+  }
+);
+x.displayName = "FieldError";
+export {
+  x as F
+};

package/chunks/{Radio-CSFYbin8.js → Radio-BDHczAt5.js}

@@ -3,7 +3,7 @@ import { Radio as u, RadioGroup as _, Group as f } from "react-aria-components";
 import { c as p } from "./clsx-AexbMWKp.js";
 import { a as G, L as R } from "./Label-Dup4lWaR.js";
 import { T as h } from "./Text-TWzJxnto.js";
-import { F as t } from "./FieldError-Bc0acYNs.js";
+import { F as t } from "./FieldError-Bra5aRT3.js";
 import '../assets/Radio.css';const x = "_radioGroup_1ls9z_1", w = "_wrap_1ls9z_12", z = "_radio_1ls9z_1", s = {
   radioGroup: x,
   wrap: w,

package/chunks/{RangeCalendar-BF-6p7u2.js → RangeCalendar-BSth1Fmv.js}

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as o } from "react/jsx-runtime";
 import { RangeCalendarContext as h, CalendarGrid as C, CalendarCell as g, Calendar as v, RangeCalendar as _ } from "react-aria-components";
 import { c as p, a as l } from "./clsx-AexbMWKp.js";
-import { F as c } from "./FieldError-Bc0acYNs.js";
+import { F as c } from "./FieldError-Bra5aRT3.js";
 import * as y from "react";
 import { B as i } from "./Button-wBgWrXj3.js";
 import { H as f } from "./Heading-D8tNNJkt.js";

package/chunks/{SearchField-mBHZ9pFg.js → SearchField-DTkfUFwn.js}

@@ -5,7 +5,7 @@ import { c as l } from "./clsx-AexbMWKp.js";
 import * as x from "react";
 import { useSearchFieldState as j } from "react-stately";
 import { useSearchField as C } from "react-aria";
-import { F as f } from "./FieldError-Bc0acYNs.js";
+import { F as f } from "./FieldError-Bra5aRT3.js";
 import { c as p } from "./createLucideIcon-D4r5Phnh.js";
 import { X as B } from "./x-BXShoIAM.js";
 import { u as D } from "./useLocalizedStringFormatter-ZgRJmvHC.js";

package/chunks/{Select-Df4333VV.js → Select-C8Fr7Vn3.js}

@@ -4,9 +4,9 @@ import { FocusScope as b } from "@react-aria/focus";
 import { a as T, L as N } from "./Label-Dup4lWaR.js";
 import { a as y, c as h } from "./clsx-AexbMWKp.js";
 import { T as B } from "./Text-TWzJxnto.js";
-import { F as _ } from "./FieldError-Bc0acYNs.js";
+import { F as _ } from "./FieldError-Bra5aRT3.js";
 import f, { useContext as p } from "react";
-import { C as L } from "./Checkbox-gsEu5wcB.js";
+import { C as L } from "./Checkbox-BTAfwDxU.js";
 import { u } from "./useLocalizedStringFormatter-ZgRJmvHC.js";
 import { useFocusManager as M } from "react-aria";
 import { X as F } from "./x-BXShoIAM.js";

package/chunks/{Select-BjD5iQvX.js → Select-CPM82ww2.js}

@@ -19,11 +19,11 @@ import { useFormValidation as ce } from "@react-aria/form";
 import { useVisuallyHidden as de } from "@react-aria/visually-hidden";
 import { a as ue, L as me } from "./Label-Dup4lWaR.js";
 import { T as ge } from "./Text-TWzJxnto.js";
-import { C as fe } from "./Checkbox-gsEu5wcB.js";
+import { C as fe } from "./Checkbox-BTAfwDxU.js";
 import { X as pe } from "./x-BXShoIAM.js";
 import { u as B } from "./useLocalizedStringFormatter-ZgRJmvHC.js";
 import { C as ye } from "./chevron-down-DgT-uSF9.js";
-import { F as he } from "./FieldError-Bc0acYNs.js";
+import { F as he } from "./FieldError-Bra5aRT3.js";
 import '../assets/Select2.css';const T = ({ item: e }) => /* @__PURE__ */ o(
   X,
   {

package/chunks/{Table-t3rVzb31.js → Table-BgsgXhC_.js}

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as i, Fragment as b } from "react/jsx-runtime";
 import { Table as w, useTableOptions as u, TableHeader as g, Collection as p, Row as N, Button as k, Column as f, Cell as x, TableBody as T } from "react-aria-components";
-import { C as h } from "./Checkbox-gsEu5wcB.js";
+import { C as h } from "./Checkbox-BTAfwDxU.js";
 import { c as a } from "./clsx-AexbMWKp.js";
 import { c as d } from "./createLucideIcon-D4r5Phnh.js";
 import '../assets/Table.css';const C = [

package/chunks/TextArea-DQ_dAC-2.js

@@ -0,0 +1,137 @@
+import { jsxs as c, jsx as s, Fragment as P } from "react/jsx-runtime";
+import { forwardRef as l, useState as C } from "react";
+import { useContextProps as p, TextFieldContext as b, TextField as g, InputContext as f, Input as I, TextArea as v } from "react-aria-components";
+import { a as A, c as h } from "./clsx-AexbMWKp.js";
+import { s as d } from "./TextField.module-DZslrEPC.js";
+import { T as w } from "./Text-TWzJxnto.js";
+import { B } from "./Button-wBgWrXj3.js";
+import { u as L } from "./useLocalizedStringFormatter-ZgRJmvHC.js";
+import { F as u } from "./FieldError-Bra5aRT3.js";
+import { C as E } from "./CharacterCounter-R6vh7AE5.js";
+import { a as S, L as $ } from "./Label-Dup4lWaR.js";
+const x = l(
+  (e, a) => {
+    [e] = p(e, a, b);
+    const {
+      label: r,
+      description: o,
+      errorMessage: i,
+      showCounter: n,
+      errorPosition: t = "top",
+      size: m = "large",
+      popover: N,
+      children: y
+    } = e;
+    return /* @__PURE__ */ c(
+      g,
+      {
+        ...e,
+        className: A(d.textField, {
+          [d.medium]: m === "medium"
+        }),
+        children: [
+          /* @__PURE__ */ s(S, { popover: N, children: r && /* @__PURE__ */ s($, { children: r }) }),
+          o && /* @__PURE__ */ s(w, { slot: "description", children: o }),
+          n && /* @__PURE__ */ s(E, { isLonely: !o }),
+          t === "top" && /* @__PURE__ */ s(u, { "data-testid": "fieldError", children: i }),
+          y,
+          t === "bottom" && /* @__PURE__ */ s(
+            u,
+            {
+              "data-testid": "fieldError",
+              className: d.bottomError,
+              children: i
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+x.displayName = "TextFieldBase";
+const j = { hide: "Hide", show: "Show" }, z = { hide: "Dölj", show: "Visa" }, D = {
+  en: j,
+  sv: z
+}, T = l(
+  (e, a) => {
+    [e, a] = p(e, a, f);
+    const [r, o] = C(!1), i = () => o((t) => !t), n = L(D);
+    return /* @__PURE__ */ c(P, { children: [
+      r && /* @__PURE__ */ s(
+        w,
+        {
+          slot: "description",
+          className: d.passwordText,
+          children: e.value
+        }
+      ),
+      /* @__PURE__ */ s(
+        B,
+        {
+          variant: "tertiary",
+          onPress: i,
+          className: d.passwordButton,
+          children: r ? n.format("hide") : n.format("show")
+        }
+      )
+    ] });
+  }
+);
+T.displayName = "PasswordField";
+const F = l(
+  ({ skipContext: e = !1, ...a }, r) => {
+    const [o, i] = p(
+      a,
+      r,
+      f
+    ), n = e ? r : i, t = e ? a : o;
+    return /* @__PURE__ */ c("div", { className: d.wrap, children: [
+      /* @__PURE__ */ s(
+        I,
+        {
+          ...t,
+          ref: n,
+          className: h(d.input, t.className)
+        }
+      ),
+      t.type === "password" && /* @__PURE__ */ s(T, { ...t })
+    ] });
+  }
+);
+F.displayName = "Input";
+const H = l(
+  ({ className: e, list: a, type: r, min: o, max: i, form: n, ...t }, m) => /* @__PURE__ */ s(x, { ...t, children: /* @__PURE__ */ s(
+    F,
+    {
+      className: h(e),
+      form: n,
+      list: a,
+      min: o,
+      max: i,
+      ref: m,
+      type: r,
+      skipContext: !0
+    }
+  ) })
+);
+H.displayName = "TextField";
+const M = l(
+  ({ className: e, cols: a, form: r, rows: o, wrap: i, ...n }, t) => /* @__PURE__ */ s(x, { ...n, children: /* @__PURE__ */ s(
+    v,
+    {
+      className: h(d.textArea, e),
+      cols: a,
+      form: r,
+      ref: t,
+      rows: o,
+      wrap: i
+    }
+  ) })
+);
+M.displayName = "TextArea";
+export {
+  F as I,
+  x as T,
+  H as a,
+  M as b
+};

package/combobox/index.js

@@ -1,4 +1,4 @@
-import { C as a, a as b, b as x } from "../chunks/ComboBox-yl5zHYPk.js";
+import { C as a, a as b, b as x } from "../chunks/ComboBox-DVK0dL2W.js";
 export {
   a as ComboBox,
   b as ComboBoxItem,

package/date-field/index.js

@@ -1,4 +1,4 @@
-import { D as t } from "../chunks/DateField-BsT1K-bB.js";
+import { D as t } from "../chunks/DateField-06YL8tj_.js";
 import { a as r, b as o, D as p } from "../chunks/DateInputDivider-CkTB5q5k.js";
 export {
   t as DateField,

package/date-picker/index.js

@@ -1,4 +1,4 @@
-import { D as r, a as t } from "../chunks/DateRangePicker-BsK7pMRv.js";
+import { D as r, a as t } from "../chunks/DateRangePicker-CZRWDV_g.js";
 export {
   r as DatePicker,
   t as DateRangePicker

package/field-error/FieldError.d.ts

@@ -1,7 +1,5 @@
-import { Ref } from 'react';
 import { FieldErrorProps as AriaFieldErrorProps } from 'react-aria-components';
 export interface FieldErrorProps extends AriaFieldErrorProps {
     isInvalid?: boolean;
-    ref?: Ref<HTMLElement>;
 }
-export declare const FieldError: ({ ref, ...props }: FieldErrorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FieldError: import('react').ForwardRefExoticComponent<FieldErrorProps & import('react').RefAttributes<HTMLElement>>;

package/field-error/index.js

@@ -1,4 +1,4 @@
-import { F as e } from "../chunks/FieldError-Bc0acYNs.js";
+import { F as e } from "../chunks/FieldError-Bra5aRT3.js";
 export {
   e as FieldError
 };

package/index.js

@@ -3,17 +3,17 @@ import { B as s, a as p } from "./chunks/BadgeContainer-CKVsfTlF.js";
 import { B as m } from "./chunks/Breadcrumbs-By2bMbQd.js";
 import { B as i } from "./chunks/Button-wBgWrXj3.js";
 import { B as d } from "./chunks/ButtonGroup-Dr6HOBo2.js";
-import { C as l, R as C } from "./chunks/RangeCalendar-BF-6p7u2.js";
+import { C as l, R as C } from "./chunks/RangeCalendar-BSth1Fmv.js";
 import { C as g, d as u, c as B, a as c, e as L, f as S, b as D } from "./chunks/Card-ia98VoKL.js";
-import { C as G } from "./chunks/CharacterCounter-_m-SgTMV.js";
-import { C as R } from "./chunks/Checkbox-gsEu5wcB.js";
-import { C as M } from "./chunks/CheckboxGroup-A7UJMi5J.js";
+import { C as G } from "./chunks/CharacterCounter-R6vh7AE5.js";
+import { C as R } from "./chunks/Checkbox-BTAfwDxU.js";
+import { C as M } from "./chunks/CheckboxGroup-BQ8EpX7O.js";
 import { C as v } from "./chunks/ColorSchemeSwitch-DugvPh6T.js";
-import { C as h, a as H, b as y } from "./chunks/ComboBox-yl5zHYPk.js";
-import { D as N } from "./chunks/DateField-BsT1K-bB.js";
+import { C as h, a as H, b as y } from "./chunks/ComboBox-DVK0dL2W.js";
+import { D as N } from "./chunks/DateField-06YL8tj_.js";
 import { a as Q, b as Z, D as j } from "./chunks/DateInputDivider-CkTB5q5k.js";
-import { D as z, a as J } from "./chunks/DateRangePicker-BsK7pMRv.js";
-import { F as O } from "./chunks/FieldError-Bc0acYNs.js";
+import { D as z, a as J } from "./chunks/DateRangePicker-CZRWDV_g.js";
+import { F as O } from "./chunks/FieldError-Bra5aRT3.js";
 import { D as V, F as W } from "./chunks/FileUpload-h1PxqQmb.js";
 import { G as Y } from "./chunks/Grid-B-WgMwON.js";
 import { G as $ } from "./chunks/GridItem-5t1Z14sM.js";
@@ -27,17 +27,17 @@ import { L as uo } from "./chunks/Logo-InDSslpO.js";
 import { M as co } from "./chunks/Dialog-DC0cGNj5.js";
 import { P as So } from "./chunks/Popover-BcEtFiU1.js";
 import { P as Io } from "./chunks/ProgressBar-CbwvcHvk.js";
-import { R as Po, a as Ro } from "./chunks/Radio-CSFYbin8.js";
-import { S as Mo } from "./chunks/SearchField-mBHZ9pFg.js";
-import { S as vo } from "./chunks/Select-Df4333VV.js";
-import { S as ho } from "./chunks/Select-BjD5iQvX.js";
+import { R as Po, a as Ro } from "./chunks/Radio-BDHczAt5.js";
+import { S as Mo } from "./chunks/SearchField-DTkfUFwn.js";
+import { S as vo } from "./chunks/Select-C8Fr7Vn3.js";
+import { S as ho } from "./chunks/Select-CPM82ww2.js";
 import { S as yo } from "./chunks/Skeleton-DqIHQLQl.js";
 import { S as No } from "./chunks/Spinner-BORNnHph.js";
-import { b as Qo, C as Zo, R as jo, T as qo, c as zo, a as Jo } from "./chunks/Table-t3rVzb31.js";
+import { b as Qo, C as Zo, R as jo, T as qo, c as zo, a as Jo } from "./chunks/Table-BgsgXhC_.js";
 import { a as Oo, c as Uo, b as Vo, T as Wo } from "./chunks/TabList-D2XV5ixe.js";
 import { T as Yo, a as _o } from "./chunks/Tag-DxBoeE_n.js";
 import { T as oa } from "./chunks/Text-TWzJxnto.js";
-import { I as ra, b as ea, a as ta, T as sa } from "./chunks/TextArea-B2BePnZz.js";
+import { I as ra, b as ea, a as ta, T as sa } from "./chunks/TextArea-DQ_dAC-2.js";
 import { G as xa, b as ma, T as fa, a as ia, t as na } from "./chunks/Toast-DTwUGSJ8.js";
 import { T as Ta, a as la } from "./chunks/ToggleButtonGroup-CXKTrLbb.js";
 import { T as ba, a as ga } from "./chunks/Tooltip-m032jGgF.js";

package/legacy-select/Select.d.ts

@@ -1,6 +1,8 @@
-import { SelectContainerProps } from './types';
+import { SelectProps } from './types';
 import * as React from 'react';
 /**
  * @deprecated since v15.2.0 Kept for backwards compatibility, but will be removed in a future version. Use `Select` from `@midas-ds/components` instead.
  */
-export declare const Select: React.ForwardRefExoticComponent<Omit<SelectContainerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "children" | "items"> & {
+    options: import('..').ListBoxOption[];
+} & React.RefAttributes<HTMLButtonElement>>;

package/legacy-select/index.js

@@ -1,4 +1,4 @@
-import { S as c } from "../chunks/Select-BjD5iQvX.js";
+import { S as c } from "../chunks/Select-CPM82ww2.js";
 export {
   c as LegacySelect
 };

package/legacy-select/types.d.ts

@@ -3,7 +3,7 @@ import { FormValidationState } from '@react-stately/form';
 import { OverlayTriggerProps } from '@react-types/overlays';
 import { ListState } from '@react-stately/list';
 import { AsyncLoadable, CollectionBase, FocusableProps, InputBase, LabelableProps, MultipleSelection, TextInputBase, Validation, Key, Node, CollectionChildren } from '@react-types/shared';
-import { HTMLAttributes, Ref } from 'react';
+import { HTMLAttributes } from 'react';
 import { AriaListBoxOptions } from 'react-aria';
 import { AriaButtonProps } from '@react-types/button';
 import { AriaSelectProps } from '@react-types/select';
@@ -176,5 +176,4 @@ export interface SelectProps extends MultiSelectStateProps<ListBoxOption> {
 export type SelectContainerProps = Omit<SelectProps, 'children' | 'items'> & {
     /** Item objects in the collection. */
     options: ListBoxOption[];
-    ref?: Ref<HTMLButtonElement>;
 };

package/package.json

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

package/radio/index.js

@@ -1,4 +1,4 @@
-import { R as r, a as R } from "../chunks/Radio-CSFYbin8.js";
+import { R as r, a as R } from "../chunks/Radio-BDHczAt5.js";
 export {
   r as Radio,
   R as RadioGroup

package/search-field/index.js

@@ -1,4 +1,4 @@
-import { S as a } from "../chunks/SearchField-mBHZ9pFg.js";
+import { S as a } from "../chunks/SearchField-DTkfUFwn.js";
 export {
   a as SearchField
 };

package/select/index.js

@@ -1,4 +1,4 @@
-import { S as r } from "../chunks/Select-Df4333VV.js";
+import { S as r } from "../chunks/Select-C8Fr7Vn3.js";
 export {
   r as Select
 };

package/table/index.js

@@ -1,4 +1,4 @@
-import { b as l, C as s, R as o, T as b, c as T, a as r } from "../chunks/Table-t3rVzb31.js";
+import { b as l, C as s, R as o, T as b, c as T, a as r } from "../chunks/Table-BgsgXhC_.js";
 export {
   l as Cell,
   s as Column,

package/textfield/Input.d.ts

@@ -1,10 +1,8 @@
 import { InputProps as AriaInputProps } from 'react-aria-components';
-import { Ref } from 'react';
 export interface InputProps extends AriaInputProps {
     /** If the component should use local props and ref instead of a parent context
      * @default false
      */
     skipContext?: boolean;
-    ref?: Ref<HTMLInputElement>;
 }
-export declare const Input: ({ ref: localRef, skipContext, ...localProps }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/textfield/PasswordField.d.ts

@@ -1,2 +1,2 @@
 import { InputProps } from './Input';
-export declare const PasswordField: ({ ref, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PasswordField: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/textfield/TextArea.d.ts

@@ -1,8 +1,5 @@
-import { Ref } from 'react';
 import { TextFieldBaseProps } from './TextFieldBase';
 import { TextAreaProps as AriaTextAreaProps } from 'react-aria-components';
 import { Complement } from '../utils/types';
-export interface TextAreaProps extends Omit<TextFieldBaseProps, 'type' | 'pattern'>, Complement<TextFieldBaseProps, AriaTextAreaProps> {
-    ref?: Ref<HTMLTextAreaElement>;
-}
-export declare const TextArea: ({ className, form, rows, wrap, ref, ...rest }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
+export type TextAreaProps = Omit<TextFieldBaseProps, 'type' | 'pattern'> & Complement<TextFieldBaseProps, AriaTextAreaProps>;
+export declare const TextArea: import('react').ForwardRefExoticComponent<Omit<TextFieldBaseProps, "type" | "pattern"> & Complement<TextFieldBaseProps, AriaTextAreaProps> & import('react').RefAttributes<HTMLTextAreaElement>>;

package/textfield/TextField.d.ts

@@ -1,8 +1,5 @@
-import { Ref } from 'react';
 import { TextFieldBaseProps } from './TextFieldBase';
 import { InputProps } from './Input';
 import { Complement } from '../utils/types';
-export interface TextFieldProps extends TextFieldBaseProps, Complement<TextFieldBaseProps, InputProps> {
-    ref?: Ref<HTMLInputElement>;
-}
-export declare const TextField: ({ className, form, list, min, max, ref, type, ...rest }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export type TextFieldProps = TextFieldBaseProps & Complement<TextFieldBaseProps, InputProps>;
+export declare const TextField: import('react').ForwardRefExoticComponent<TextFieldBaseProps & Complement<TextFieldBaseProps, InputProps> & import('react').RefAttributes<HTMLInputElement>>;

package/textfield/TextFieldBase.d.ts

@@ -23,4 +23,4 @@ export interface TextFieldBaseProps extends Omit<TextFieldProps, 'className'> {
     size?: Size;
     popover?: InfoPopoverProps;
 }
-export declare const TextFieldBase: (props: TextFieldBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextFieldBase: import('react').ForwardRefExoticComponent<TextFieldBaseProps & import('react').RefAttributes<HTMLDivElement>>;

package/textfield/index.js

@@ -1,4 +1,4 @@
-import { I as s, b as t, a as x, T } from "../chunks/TextArea-B2BePnZz.js";
+import { I as s, b as t, a as x, T } from "../chunks/TextArea-DQ_dAC-2.js";
 export {
   s as Input,
   t as TextArea,

package/chunks/CharacterCounter-_m-SgTMV.js

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

package/chunks/Checkbox-gsEu5wcB.js

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

package/chunks/FieldError-Bc0acYNs.js

@@ -1,21 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useContext as l } from "react";
-import { FieldErrorContext as c, FieldError as f } from "react-aria-components";
-import { c as m } from "./clsx-AexbMWKp.js";
-import { T as d } from "./Text-TWzJxnto.js";
-import '../assets/FieldError.css';const a = "_fieldError_u3cks_1", E = {
-  fieldError: a
-}, v = ({ ref: s, ...r }) => {
-  const { children: o, isInvalid: n } = r, t = m(E.fieldError, r.className), e = l(c);
-  return !e && n && typeof o != "function" ? /* @__PURE__ */ i(d, { className: t, children: o }) : e?.isInvalid ? /* @__PURE__ */ i(
-    f,
-    {
-      ...r,
-      ref: s,
-      className: t
-    }
-  ) : null;
-};
-export {
-  v as F
-};

package/chunks/TextArea-B2BePnZz.js

@@ -1,136 +0,0 @@
-import { jsxs as l, jsx as e, Fragment as T } from "react/jsx-runtime";
-import { TextField as F, useContextProps as h, InputContext as u, Input as N, TextArea as P } from "react-aria-components";
-import { a as b, c as m } from "./clsx-AexbMWKp.js";
-import { s as c } from "./TextField.module-DZslrEPC.js";
-import { useState as g } from "react";
-import { T as x } from "./Text-TWzJxnto.js";
-import { B as C } from "./Button-wBgWrXj3.js";
-import { u as v } from "./useLocalizedStringFormatter-ZgRJmvHC.js";
-import { F as p } from "./FieldError-Bc0acYNs.js";
-import { C as I } from "./CharacterCounter-_m-SgTMV.js";
-import { a as L, L as y } from "./Label-Dup4lWaR.js";
-const f = (t) => {
-  const {
-    label: s,
-    description: r,
-    errorMessage: a,
-    showCounter: n,
-    errorPosition: o = "top",
-    size: i = "large",
-    popover: d,
-    children: w
-  } = t;
-  return /* @__PURE__ */ l(
-    F,
-    {
-      ...t,
-      className: b(c.textField, {
-        [c.medium]: i === "medium"
-      }),
-      children: [
-        /* @__PURE__ */ e(L, { popover: d, children: s && /* @__PURE__ */ e(y, { children: s }) }),
-        r && /* @__PURE__ */ e(x, { slot: "description", children: r }),
-        n && /* @__PURE__ */ e(I, { isLonely: !r }),
-        o === "top" && /* @__PURE__ */ e(p, { "data-testid": "fieldError", children: a }),
-        w,
-        o === "bottom" && /* @__PURE__ */ e(
-          p,
-          {
-            "data-testid": "fieldError",
-            className: c.bottomError,
-            children: a
-          }
-        )
-      ]
-    }
-  );
-}, A = { hide: "Hide", show: "Show" }, B = { hide: "Dölj", show: "Visa" }, E = {
-  en: A,
-  sv: B
-}, S = ({ ref: t, ...s }) => {
-  [s, t] = h(s, t, u);
-  const [r, a] = g(!1), n = () => a((i) => !i), o = v(E);
-  return /* @__PURE__ */ l(T, { children: [
-    r && /* @__PURE__ */ e(
-      x,
-      {
-        slot: "description",
-        className: c.passwordText,
-        children: s.value
-      }
-    ),
-    /* @__PURE__ */ e(
-      C,
-      {
-        variant: "tertiary",
-        onPress: n,
-        className: c.passwordButton,
-        children: r ? o.format("hide") : o.format("show")
-      }
-    )
-  ] });
-}, $ = ({
-  ref: t,
-  skipContext: s = !1,
-  ...r
-}) => {
-  const [a, n] = h(
-    r,
-    t,
-    u
-  ), o = s ? t : n, i = s ? r : a;
-  return /* @__PURE__ */ l("div", { className: c.wrap, children: [
-    /* @__PURE__ */ e(
-      N,
-      {
-        ...i,
-        ref: o,
-        className: m(c.input, i.className)
-      }
-    ),
-    i.type === "password" && /* @__PURE__ */ e(S, { ...i })
-  ] });
-}, K = ({
-  className: t,
-  form: s,
-  list: r,
-  min: a,
-  max: n,
-  ref: o,
-  type: i,
-  ...d
-}) => /* @__PURE__ */ e(f, { ...d, children: /* @__PURE__ */ e(
-  $,
-  {
-    className: m(t),
-    form: s,
-    list: r,
-    min: a,
-    max: n,
-    ref: o,
-    type: i,
-    skipContext: !0
-  }
-) }), O = ({
-  className: t,
-  form: s,
-  rows: r,
-  wrap: a,
-  ref: n,
-  ...o
-}) => /* @__PURE__ */ e(f, { ...o, children: /* @__PURE__ */ e(
-  P,
-  {
-    className: m(c.textArea, t),
-    form: s,
-    ref: n,
-    rows: r,
-    wrap: a
-  }
-) });
-export {
-  $ as I,
-  f as T,
-  K as a,
-  O as b
-};