@midas-ds/components 16.3.3 → 16.4.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 16.4.0 (2026-01-15)
+
+### 🚀 Features
+
+- **components, date-field, date-picker, search-field:** add clear button ([#995](https://github.com/migrationsverket/midas/pull/995))
+
 ## 16.3.3 (2026-01-14)
 
 ### 🧱 Updated Dependencies

package/assets/DateField.css

@@ -1 +1 @@
-._dateField_y3sba_1{font-family:var(--midas-typography-font-family);display:flex;flex-direction:column;align-items:flex-start}._dateField_y3sba_1[data-readonly] ._inputField_y3sba_7{background-color:transparent;border-bottom-color:var(--midas-border-color-subtle)}._dateField_y3sba_1[data-disabled] ._inputField_y3sba_7{color:var(--midas-text-disabled);cursor:not-allowed;border-bottom-color:var(--midas-border-color-disabled);background-color:var(--midas-field-disabled)}._dateField_y3sba_1[data-invalid] ._inputField_y3sba_7{box-shadow:inset 0 0 0 3px var(--midas-support-border-warning);border-color:transparent}._inputField_y3sba_7{box-sizing:border-box;width:100%;min-height:var(--midas-size-150);display:flex;justify-content:flex-start;align-items:center;background-color:var(--midas-field-01-base);border:1px solid transparent;border-bottom-color:var(--midas-border-color-primary);padding:0 1rem}._inputField_y3sba_7._medium_y3sba_37{min-height:var(--midas-size-130)}._dateField_y3sba_1:not([data-disabled],[data-readonly]) ._inputField_y3sba_7 :hover{background-color:var(--midas-field-01-hover)}@media(forced-colors:active){._inputField_y3sba_7{border:1px solid var(--midas-border-color-primary)}}
+._dateField_3cnhf_1{font-family:var(--midas-typography-font-family);display:flex;flex-direction:column;align-items:flex-start}._dateField_3cnhf_1[data-readonly] ._inputField_3cnhf_7{background-color:transparent;border-bottom-color:var(--midas-border-color-subtle)}._dateField_3cnhf_1[data-disabled] ._inputField_3cnhf_7{color:var(--midas-text-disabled);cursor:not-allowed;border-bottom-color:var(--midas-border-color-disabled);background-color:var(--midas-field-disabled)}._dateField_3cnhf_1[data-invalid] ._inputField_3cnhf_7{box-shadow:inset 0 0 0 3px var(--midas-support-border-warning);border-color:transparent}._inputField_3cnhf_7{box-sizing:border-box;width:100%;min-height:var(--midas-size-150);display:flex;justify-content:flex-start;align-items:center;background-color:var(--midas-field-01-base);border:1px solid transparent;border-bottom-color:var(--midas-border-color-primary);padding:0 1rem;position:relative}._inputField_3cnhf_7._medium_3cnhf_38{min-height:var(--midas-size-130)}._dateField_3cnhf_1:not([data-disabled],[data-readonly]) ._inputField_3cnhf_7 :hover{background-color:var(--midas-field-01-hover)}._clearButton_3cnhf_47{display:flex;align-items:center;justify-content:center;position:absolute;padding:.5rem;border:none;right:.25rem;top:50%;transform:translateY(-50%);background-color:transparent}._clearButton_3cnhf_47._medium_3cnhf_38{padding:.375rem}@media(forced-colors:active){._inputField_3cnhf_7{border:1px solid var(--midas-border-color-primary)}}

package/assets/DateRangePicker.css

@@ -1 +1 @@
-._datePicker_175bg_1{font-family:var(--midas-typography-font-family);display:flex;flex-direction:column;align-items:flex-start}._inputField_175bg_8{box-sizing:border-box;width:100%;height:var(--midas-size-150);align-items:center;background-color:var(--midas-field-01-base);border-bottom:1px solid var(--midas-border-color-primary);padding-left:1rem;display:flex;justify-content:flex-start;gap:1rem}@media(forced-colors:active){._inputField_175bg_8{border:1px solid var(--midas-border-color-primary)}}._inputField_175bg_8._medium_175bg_24{height:var(--midas-size-130)}._inputField_175bg_8[data-disabled]{cursor:not-allowed;border-color:var(--midas-border-color-disabled)}._inputField_175bg_8:focus-visible,._inputField_175bg_8[data-focus-visible]{outline:none}._inputField_175bg_8[data-focus-visible]{box-shadow:var(--midas-state-focus)}._inputField_175bg_8[data-hovered]:not([data-disabled],._readOnly_175bg_42){background-color:var(--midas-field-01-hover)}._inputField_175bg_8[data-invalid]{border:none;box-shadow:inset 0 0 0 3px var(--midas-support-border-warning)}@media(forced-colors:active){._inputField_175bg_8[data-invalid]{border:1px solid var(--midas-border-color-primary)}}._inputField_175bg_8._readOnly_175bg_42{background-color:transparent;border-color:var(--midas-border-color-subtle)}._inputField_175bg_8 ._calendarButton_175bg_60{border:none;margin-left:auto;padding-right:1rem;padding-left:1rem;color:var(--midas-icon-primary);background-color:transparent;cursor:pointer}._inputField_175bg_8 ._calendarButton_175bg_60._medium_175bg_24[data-invalid]{height:calc(var(--midas-size-130) - var(--midas-size-30))}._inputField_175bg_8 ._calendarButton_175bg_60[data-invalid]{border:none;height:calc(var(--midas-size-150) - var(--midas-size-30));margin-right:3px}._inputField_175bg_8 ._calendarButton_175bg_60[data-disabled]{cursor:not-allowed;color:var(--midas-icon-disabled);border-color:var(--midas-border-color-disabled)}._inputField_175bg_8 ._calendarButton_175bg_60._readOnly_175bg_42{color:var(--midas-icon-read-only)}._inputField_175bg_8 ._calendarButton_175bg_60[data-hovered]:not([data-disabled]){background-color:var(--midas-field-01-hover)}._inputField_175bg_8 ._calendarButton_175bg_60:focus-visible,._inputField_175bg_8 ._calendarButton_175bg_60[data-focus-visible]{outline:none;box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._inputField_175bg_8 ._calendarButton_175bg_60:focus-visible,._inputField_175bg_8 ._calendarButton_175bg_60[data-focus-visible]{outline:3px solid highlight;outline-offset:2px}}._dialog_175bg_108{box-shadow:0 3px 5px #0003}
+._datePicker_10uve_1{font-family:var(--midas-typography-font-family);display:flex;flex-direction:column;align-items:flex-start}._inputField_10uve_8{box-sizing:border-box;width:100%;height:var(--midas-size-150);align-items:center;background-color:var(--midas-field-01-base);border-bottom:1px solid var(--midas-border-color-primary);padding-left:1rem;display:flex;justify-content:flex-start;gap:1rem}@media(forced-colors:active){._inputField_10uve_8{border:1px solid var(--midas-border-color-primary)}}._inputField_10uve_8._medium_10uve_24{height:var(--midas-size-130)}._inputField_10uve_8[data-disabled]{cursor:not-allowed;border-color:var(--midas-border-color-disabled)}._inputField_10uve_8:focus-visible,._inputField_10uve_8[data-focus-visible]{outline:none}._inputField_10uve_8[data-focus-visible]{box-shadow:var(--midas-state-focus)}._inputField_10uve_8[data-invalid]{border:none;box-shadow:inset 0 0 0 3px var(--midas-support-border-warning)}@media(forced-colors:active){._inputField_10uve_8[data-invalid]{border:1px solid var(--midas-border-color-primary)}}._inputField_10uve_8._readOnly_10uve_51{background-color:transparent;border-color:var(--midas-border-color-subtle)}._inputField_10uve_8 ._buttonGroup_10uve_56{display:flex;margin-left:auto;gap:0}._inputField_10uve_8 ._clearButton_10uve_62{display:flex;align-items:center;justify-content:center;border:none;padding:.5rem;color:var(--midas-icon-primary);background-color:transparent;cursor:pointer}._inputField_10uve_8 ._clearButton_10uve_62._medium_10uve_24{padding:.375rem}._inputField_10uve_8 ._clearButton_10uve_62[data-disabled]{cursor:not-allowed;color:var(--midas-icon-disabled)}._inputField_10uve_8 ._clearButton_10uve_62[data-hovered]:not([data-disabled]){background-color:var(--midas-field-01-hover)}._inputField_10uve_8 ._clearButton_10uve_62:focus-visible,._inputField_10uve_8 ._clearButton_10uve_62[data-focus-visible]{outline:none;box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._inputField_10uve_8 ._clearButton_10uve_62:focus-visible,._inputField_10uve_8 ._clearButton_10uve_62[data-focus-visible]{outline:3px solid highlight;outline-offset:2px}}._inputField_10uve_8 ._calendarButton_10uve_97{display:flex;align-items:center;justify-content:center;border:none;padding:.5rem .75rem;color:var(--midas-icon-primary);background-color:transparent;cursor:pointer}._inputField_10uve_8 ._calendarButton_10uve_97._medium_10uve_24{padding:.375rem .625rem}._inputField_10uve_8 ._calendarButton_10uve_97[data-disabled]{cursor:not-allowed;color:var(--midas-icon-disabled)}._inputField_10uve_8 ._calendarButton_10uve_97._readOnly_10uve_51{color:var(--midas-icon-read-only)}._inputField_10uve_8 ._calendarButton_10uve_97[data-hovered]:not([data-disabled]){background-color:var(--midas-field-01-hover)}._inputField_10uve_8 ._calendarButton_10uve_97:focus-visible,._inputField_10uve_8 ._calendarButton_10uve_97[data-focus-visible]{outline:none;box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._inputField_10uve_8 ._calendarButton_10uve_97:focus-visible,._inputField_10uve_8 ._calendarButton_10uve_97[data-focus-visible]{outline:3px solid highlight;outline-offset:2px}}._dialog_10uve_137{box-shadow:0 3px 5px #0003}

package/chunks/ClearButton-DavPe5uU.js

@@ -0,0 +1,21 @@
+import { jsx as r } from "react/jsx-runtime";
+import { B as o } from "./Button-BYrLbzir.js";
+import { X as i } from "./x-BXShoIAM.js";
+const m = (t) => /* @__PURE__ */ r(
+  o,
+  {
+    variant: "icon",
+    slot: null,
+    ...t,
+    children: /* @__PURE__ */ r(
+      i,
+      {
+        size: 20,
+        "aria-hidden": !0
+      }
+    )
+  }
+);
+export {
+  m as C
+};

package/chunks/DateField-D9CEvqnd.js

@@ -0,0 +1,91 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import * as _ from "react";
+import { DateField as D, DateFieldStateContext as x } from "react-aria-components";
+import { c as d } from "./clsx-AexbMWKp.js";
+import { a as g, D as B } from "./DateInputDivider-CkTB5q5k.js";
+import { F as f } from "./FieldError-Bra5aRT3.js";
+import { a as C, L as b } from "./Label-6SXmzRZE.js";
+import { T as L } from "./Text-TWzJxnto.js";
+import { C as S } from "./ClearButton-DavPe5uU.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_3cnhf_1", M = "_inputField_3cnhf_7", P = "_medium_3cnhf_38", R = "_clearButton_3cnhf_47", s = {
+  dateField: I,
+  inputField: M,
+  medium: P,
+  clearButton: R
+}, W = ({
+  isClearable: i,
+  size: t,
+  isDisabled: o,
+  isReadOnly: r
+}) => {
+  const l = V(E), a = _.useContext(x), n = N(), c = () => {
+    a?.setValue(null), n?.focusFirst();
+  };
+  return i && a?.value != null && !r ? /* @__PURE__ */ e(
+    S,
+    {
+      onPress: c,
+      size: t,
+      isDisabled: o,
+      "aria-label": l.format("clear"),
+      className: d(s.clearButton, {
+        [s.medium]: t === "medium"
+      })
+    }
+  ) : null;
+}, Q = ({
+  className: i,
+  description: t,
+  errorMessage: o,
+  errorPosition: r = "top",
+  label: l,
+  size: a = "large",
+  popover: n,
+  isClearable: c = !1,
+  isReadOnly: m,
+  isDisabled: u,
+  ...F
+}) => /* @__PURE__ */ p(
+  D,
+  {
+    ...F,
+    isReadOnly: m,
+    isDisabled: u,
+    className: d(s.dateField, i),
+    children: [
+      /* @__PURE__ */ e(C, { popover: n, children: l && /* @__PURE__ */ e(b, { children: l }) }),
+      t && /* @__PURE__ */ e(L, { slot: "description", children: t }),
+      r === "top" && /* @__PURE__ */ e(f, { children: o }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: d(s.inputField, {
+            [s.medium]: a === "medium"
+          }),
+          "data-testid": "date-field_input-field",
+          children: /* @__PURE__ */ p(v, { children: [
+            /* @__PURE__ */ e(g, { children: (h) => /* @__PURE__ */ e(B, { segment: h }) }),
+            /* @__PURE__ */ e(
+              W,
+              {
+                isClearable: c,
+                size: a,
+                isDisabled: u,
+                isReadOnly: m
+              }
+            )
+          ] })
+        }
+      ),
+      r === "bottom" && /* @__PURE__ */ e(f, { children: o })
+    ]
+  }
+);
+export {
+  Q as D
+};

package/chunks/DateRangePicker-DGfdhIjR.js

@@ -0,0 +1,191 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { Group as B, Button as F, DatePickerStateContext as b, DateRangePickerStateContext as M, Popover as S, Dialog as N, DatePicker as R, DateRangePicker as G } from "react-aria-components";
+import { a as k } from "./clsx-AexbMWKp.js";
+import { C as L, R as I } from "./RangeCalendar-Bt8q3FZi.js";
+import { a as v, D as P, b as V } from "./DateInputDivider-CkTB5q5k.js";
+import { F as _ } from "./FieldError-Bra5aRT3.js";
+import { a as g, L as y } from "./Label-6SXmzRZE.js";
+import { T as D } from "./Text-TWzJxnto.js";
+import * as f from "react";
+import { C as j } from "./ClearButton-DavPe5uU.js";
+import { FocusScope as w, useFocusManager as O } from "@react-aria/focus";
+import { c as T } from "./createLucideIcon-D4r5Phnh.js";
+import { u as $ } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import '../assets/DateRangePicker.css';const E = [
+  ["path", { d: "M8 2v4", key: "1cmpym" }],
+  ["path", { d: "M16 2v4", key: "4m81vk" }],
+  ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
+  ["path", { d: "M3 10h18", key: "8toen8" }],
+  ["path", { d: "M8 14h.01", key: "6423bh" }],
+  ["path", { d: "M12 14h.01", key: "1etili" }],
+  ["path", { d: "M16 14h.01", key: "1gbofw" }],
+  ["path", { d: "M8 18h.01", key: "lrp35t" }],
+  ["path", { d: "M12 18h.01", key: "mhygvu" }],
+  ["path", { d: "M16 18h.01", key: "kzsmim" }]
+], W = T("calendar-days", E), q = { clear: "Clear date" }, z = { clear: "Rensa datum" }, A = {
+  en: q,
+  sv: z
+}, H = "_datePicker_10uve_1", J = "_inputField_10uve_8", K = "_medium_10uve_24", Q = "_readOnly_10uve_51", U = "_buttonGroup_10uve_56", X = "_clearButton_10uve_62", Y = "_calendarButton_10uve_97", Z = "_dialog_10uve_137", r = {
+  datePicker: H,
+  inputField: J,
+  medium: K,
+  readOnly: Q,
+  buttonGroup: U,
+  clearButton: X,
+  calendarButton: Y,
+  dialog: Z
+}, ee = (t) => !!t && !!t.value && Object.prototype.hasOwnProperty.call(t.value, "start"), te = ({
+  isClearable: t,
+  isDisabled: c,
+  isReadOnly: i,
+  size: a
+}) => {
+  const n = f.useContext(b), l = f.useContext(M), m = $(A), s = O(), o = l ?? n, h = ee(o) ? !!o.value.start && o.value.end : !!o?.value;
+  return t && h && !i ? /* @__PURE__ */ e(
+    j,
+    {
+      onPress: () => {
+        o?.setValue(null), s?.focusFirst();
+      },
+      size: a,
+      isDisabled: c,
+      "aria-label": m.format("clear"),
+      className: k(r.clearButton, {
+        [r.medium]: a === "medium"
+      })
+    }
+  ) : null;
+}, C = ({
+  children: t,
+  isDisabled: c,
+  isInvalid: i,
+  isReadOnly: a,
+  size: n = "large",
+  isClearable: l = !1
+}) => /* @__PURE__ */ e(
+  B,
+  {
+    className: k(r.inputField, {
+      [r.medium]: n === "medium",
+      [r.readOnly]: a
+    }),
+    children: /* @__PURE__ */ p(w, { children: [
+      t,
+      /* @__PURE__ */ p("div", { className: r.buttonGroup, children: [
+        /* @__PURE__ */ e(
+          te,
+          {
+            isClearable: l,
+            isDisabled: c,
+            isReadOnly: a,
+            size: n
+          }
+        ),
+        /* @__PURE__ */ e(
+          F,
+          {
+            className: k(r.calendarButton, {
+              [r.medium]: n === "medium",
+              [r.readOnly]: a
+            }),
+            "data-invalid": i || void 0,
+            isDisabled: c,
+            children: /* @__PURE__ */ e(
+              W,
+              {
+                "aria-hidden": !0,
+                size: 20
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  }
+), x = ({
+  children: t
+}) => /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(N, { className: r.dialog, children: t }) }), pe = ({
+  className: t,
+  description: c,
+  errorMessage: i,
+  errorPosition: a = "top",
+  label: n,
+  popover: l,
+  isClearable: m = !1,
+  isReadOnly: s,
+  isDisabled: o,
+  size: h,
+  ...d
+}) => /* @__PURE__ */ p(
+  R,
+  {
+    className: k(r.datePicker, t),
+    isReadOnly: s,
+    isDisabled: o,
+    ...d,
+    children: [
+      /* @__PURE__ */ e(g, { popover: l, children: n && /* @__PURE__ */ e(y, { children: n }) }),
+      c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
+      a === "top" && /* @__PURE__ */ e(_, { children: i }),
+      /* @__PURE__ */ e(
+        C,
+        {
+          isClearable: m,
+          isReadOnly: s,
+          isDisabled: o,
+          size: h,
+          ...d,
+          children: /* @__PURE__ */ e(v, { children: (u) => /* @__PURE__ */ e(P, { segment: u }) })
+        }
+      ),
+      a === "bottom" && /* @__PURE__ */ e(_, { children: i }),
+      /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(L, {}) })
+    ]
+  }
+), ke = ({
+  className: t,
+  description: c,
+  errorMessage: i,
+  errorPosition: a = "top",
+  label: n,
+  popover: l,
+  isClearable: m = !1,
+  isReadOnly: s,
+  isDisabled: o,
+  size: h,
+  ...d
+}) => /* @__PURE__ */ p(
+  G,
+  {
+    className: k(r.datePicker, t),
+    isReadOnly: s,
+    isDisabled: o,
+    ...d,
+    children: [
+      /* @__PURE__ */ e(g, { popover: l, children: n && /* @__PURE__ */ e(y, { children: n }) }),
+      c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
+      a === "top" && /* @__PURE__ */ e(_, { children: i }),
+      /* @__PURE__ */ p(
+        C,
+        {
+          isClearable: m,
+          isReadOnly: s,
+          isDisabled: o,
+          size: h,
+          ...d,
+          children: [
+            /* @__PURE__ */ e(v, { slot: "start", children: (u) => /* @__PURE__ */ e(P, { segment: u }) }),
+            /* @__PURE__ */ e(V, {}),
+            /* @__PURE__ */ e(v, { slot: "end", children: (u) => /* @__PURE__ */ e(P, { segment: u }) })
+          ]
+        }
+      ),
+      a === "bottom" && /* @__PURE__ */ e(_, { children: i }),
+      /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(I, {}) })
+    ]
+  }
+);
+export {
+  pe as D,
+  ke as a
+};

package/chunks/SearchField-Jqn3dKGs.js

@@ -0,0 +1,127 @@
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { s as C } from "./TextField.module-DZslrEPC.js";
+import { B as F } from "./Button-BYrLbzir.js";
+import { C as N } from "./ClearButton-DavPe5uU.js";
+import { c as l } from "./clsx-AexbMWKp.js";
+import * as x from "react";
+import { useSearchFieldState as j } from "react-stately";
+import { useSearchField as p } from "react-aria";
+import { F as _ } from "./FieldError-Bra5aRT3.js";
+import { c as B } from "./createLucideIcon-D4r5Phnh.js";
+import { u as D } from "./useLocalizedStringFormatter-BHvsRxDk.js";
+import '../assets/SearchField.css';const E = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+], k = B("search", E), P = "_container_basio_1", T = "_inner_basio_10", w = "_inputContainer_basio_15", I = "_medium_basio_21", K = "_icon_basio_26", L = "_clear_basio_39", M = "_input_basio_15", a = {
+  container: P,
+  inner: T,
+  inputContainer: w,
+  medium: I,
+  icon: K,
+  clear: L,
+  input: M
+}, R = { search: "Search" }, V = { search: "Sök" }, O = {
+  en: R,
+  sv: V
+};
+function $(o) {
+  return !!o?.length;
+}
+const Z = ({
+  errorPosition: o = "top",
+  size: i = "large",
+  ...e
+}) => {
+  const { value: n, setValue: m } = j(e), f = D(O), d = x.useRef(null), { inputProps: r, isInvalid: s, validationErrors: h, clearButtonProps: v } = p(
+    {
+      ...e,
+      label: e.placeholder,
+      validationBehavior: "native"
+    },
+    { value: n, setValue: m },
+    d
+  ), S = ({ target: c }) => m(c.value), g = () => m(""), b = () => {
+    if (e.validate && $(e.validate(n)) || s || !n) {
+      d.current?.focus();
+      return;
+    }
+    e.onSubmit && e.onSubmit(n);
+  }, y = ({ key: c }) => {
+    c === "Enter" && b();
+  };
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: l(a.container, e.className),
+      "data-disabled": r.disabled,
+      children: [
+        o === "top" && /* @__PURE__ */ t(_, { isInvalid: s, children: e.errorMessage ?? h.join(" ") }),
+        /* @__PURE__ */ u("div", { className: a.inner, children: [
+          /* @__PURE__ */ u(
+            "div",
+            {
+              className: l(a.inputContainer, {
+                [a.medium]: i === "medium"
+              }),
+              children: [
+                /* @__PURE__ */ t(
+                  k,
+                  {
+                    size: 20,
+                    className: a.icon
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "input",
+                  {
+                    ...r,
+                    ...r.disabled && { "data-disabled": !0 },
+                    className: l(
+                      C.input,
+                      a.input,
+                      r.className,
+                      { [a.medium]: i === "medium" }
+                    ),
+                    ref: d,
+                    onChange: S,
+                    value: n,
+                    "aria-invalid": s,
+                    onKeyDown: y,
+                    "aria-label": e.placeholder,
+                    "aria-labelledby": ""
+                  }
+                ),
+                n.length > 0 && /* @__PURE__ */ t(
+                  N,
+                  {
+                    ...v,
+                    onPress: g,
+                    size: i,
+                    className: l(a.clear, {
+                      [a.medium]: i === "medium"
+                    })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            F,
+            {
+              size: i,
+              isDisabled: e.isDisabled,
+              excludeFromTabOrder: !0,
+              onPress: b,
+              type: "button",
+              children: e.buttonText ? e.buttonText : f.format("search")
+            }
+          )
+        ] }),
+        o === "bottom" && /* @__PURE__ */ t(_, { isInvalid: s, children: e.errorMessage ?? h.join(" ") })
+      ]
+    }
+  );
+};
+export {
+  Z as S
+};

package/clear-button/ClearButton.d.ts

@@ -0,0 +1,3 @@
+import { MidasButton } from '../button';
+import * as React from 'react';
+export declare const ClearButton: React.FC<MidasButton>;

package/clear-button/index.d.ts

@@ -0,0 +1 @@
+export { ClearButton } from './ClearButton';

package/clear-button/index.js

@@ -0,0 +1,4 @@
+import { C as t } from "../chunks/ClearButton-DavPe5uU.js";
+export {
+  t as ClearButton
+};

package/date-field/DateField.d.ts

@@ -13,5 +13,9 @@ export interface DateFieldProps extends AriaDateFieldProps<DateValue> {
     size?: Size;
     /** An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button. */
     popover?: InfoPopoverProps;
+    /** Show a clear button to remove the selected date
+     * @default false
+     */
+    isClearable?: boolean;
 }
 export declare const DateField: React.FC<DateFieldProps>;

package/date-field/index.js

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

package/date-field/intl/translations.json.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+  "en": {
+    "clear": "Clear date"
+  },
+  "sv": {
+    "clear": "Rensa datum"
+  }
+}
+;
+
+export default _default;

package/date-picker/DatePicker.d.ts

@@ -13,5 +13,9 @@ export interface DatePickerProps extends AriaDatePickerProps<DateValue> {
     size?: Size;
     /** An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button. */
     popover?: InfoPopoverProps;
+    /** Show a clear button to remove the selected date
+     * @default false
+     */
+    isClearable?: boolean;
 }
 export declare const DatePicker: React.FC<DatePickerProps>;

package/date-picker/DatePickerInputField.d.ts

@@ -1,6 +1,6 @@
 import { DatePickerProps } from './DatePicker';
 import * as React from 'react';
-interface DatePickerInputFieldProps extends Pick<DatePickerProps, 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'size'> {
+interface DatePickerInputFieldProps extends Pick<DatePickerProps, 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'size' | 'isClearable'> {
     children?: React.ReactNode;
 }
 export declare const DatePickerInputField: React.FC<DatePickerInputFieldProps>;

package/date-picker/DateRangePicker.d.ts

@@ -13,5 +13,9 @@ export interface DateRangePickerProps extends AriaDateRangePickerProps<DateValue
     size?: Size;
     /** An assistive text that helps the user understand the field better. Will be hidden in a popover with an info icon button. */
     popover?: InfoPopoverProps;
+    /** Show a clear button to remove the selected date range
+     * @default false
+     */
+    isClearable?: boolean;
 }
 export declare const DateRangePicker: React.FC<DateRangePickerProps>;

package/date-picker/index.js

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

package/date-picker/intl/translations.json.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+  "en": {
+    "clear": "Clear date"
+  },
+  "sv": {
+    "clear": "Rensa datum"
+  }
+}
+;
+
+export default _default;

package/date-picker/utils.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerState, DateRangePickerState } from 'react-aria-components';
+export declare const isRangePickerState: (state: DateRangePickerState | DatePickerState | null) => state is DateRangePickerState;

package/index.js

@@ -10,9 +10,9 @@ import { C as R } from "./chunks/Checkbox-BTAfwDxU.js";
 import { C as F } from "./chunks/CheckboxGroup-C6LIpj_R.js";
 import { C as v } from "./chunks/ColorSchemeSwitch-CaqrCGTA.js";
 import { C as h, a as H, b as y } from "./chunks/ComboBox-BXcuyHPd.js";
-import { D as N } from "./chunks/DateField-DPJrihTz.js";
+import { D as N } from "./chunks/DateField-D9CEvqnd.js";
 import { a as E, b as Q, D as Z } from "./chunks/DateInputDivider-CkTB5q5k.js";
-import { D as q, a as J } from "./chunks/DateRangePicker-DzgK_p0d.js";
+import { D as q, a as J } from "./chunks/DateRangePicker-DGfdhIjR.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";
@@ -28,7 +28,7 @@ import { M as Bo } from "./chunks/Dialog-DprWZBKT.js";
 import { P as So } from "./chunks/Popover-BcEtFiU1.js";
 import { P as Io } from "./chunks/ProgressBar-67lCngwJ.js";
 import { R as Po, a as Ro } from "./chunks/Radio-XQA8CylD.js";
-import { S as Fo } from "./chunks/SearchField-CxoPi6Ql.js";
+import { S as Fo } from "./chunks/SearchField-Jqn3dKGs.js";
 import { S as vo } from "./chunks/Select-BNCz_ox4.js";
 import { S as ho } from "./chunks/Select-CyYUhMOg.js";
 import { S as yo } from "./chunks/Skeleton-DqIHQLQl.js";

package/package.json

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

package/search-field/index.js

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

package/chunks/DateField-DPJrihTz.js

@@ -1,46 +0,0 @@
-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-Bra5aRT3.js";
-import { a as h, L as D } from "./Label-6SXmzRZE.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 = {
-  dateField: x,
-  inputField: y,
-  medium: L
-}, S = ({
-  className: r,
-  description: t,
-  errorMessage: d,
-  errorPosition: a = "top",
-  label: l,
-  size: o = "large",
-  popover: n,
-  ...p
-}) => /* @__PURE__ */ F(
-  u,
-  {
-    ...p,
-    className: m(i.dateField, r),
-    children: [
-      /* @__PURE__ */ e(h, { popover: n, children: l && /* @__PURE__ */ e(D, { children: l }) }),
-      t && /* @__PURE__ */ e(b, { slot: "description", children: t }),
-      a === "top" && /* @__PURE__ */ e(s, { children: d }),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          className: m(i.inputField, {
-            [i.medium]: o === "medium"
-          }),
-          "data-testid": "date-field_input-field",
-          children: /* @__PURE__ */ e(_, { children: (c) => /* @__PURE__ */ e(f, { segment: c }) })
-        }
-      ),
-      a === "bottom" && /* @__PURE__ */ e(s, { children: d })
-    ]
-  }
-);
-export {
-  S as D
-};

package/chunks/DateRangePicker-DzgK_p0d.js

@@ -1,117 +0,0 @@
-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-Bt8q3FZi.js";
-import { a as p, D as k, b as B } from "./DateInputDivider-CkTB5q5k.js";
-import { F as h } from "./FieldError-Bra5aRT3.js";
-import { a as u, L as y } from "./Label-6SXmzRZE.js";
-import { T as _ } from "./Text-TWzJxnto.js";
-import { c as C } from "./createLucideIcon-D4r5Phnh.js";
-import '../assets/DateRangePicker.css';const I = [
-  ["path", { d: "M8 2v4", key: "1cmpym" }],
-  ["path", { d: "M16 2v4", key: "4m81vk" }],
-  ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
-  ["path", { d: "M3 10h18", key: "8toen8" }],
-  ["path", { d: "M8 14h.01", key: "6423bh" }],
-  ["path", { d: "M12 14h.01", key: "1etili" }],
-  ["path", { d: "M16 14h.01", key: "1gbofw" }],
-  ["path", { d: "M8 18h.01", key: "lrp35t" }],
-  ["path", { d: "M12 18h.01", key: "mhygvu" }],
-  ["path", { d: "M16 18h.01", key: "kzsmim" }]
-], L = C("calendar-days", I), O = "_datePicker_175bg_1", R = "_inputField_175bg_8", j = "_medium_175bg_24", w = "_readOnly_175bg_42", T = "_calendarButton_175bg_60", $ = "_dialog_175bg_108", a = {
-  datePicker: O,
-  inputField: R,
-  medium: j,
-  readOnly: w,
-  calendarButton: T,
-  dialog: $
-}, g = ({
-  children: i,
-  isDisabled: r,
-  isInvalid: n,
-  isReadOnly: t,
-  size: d = "large"
-}) => /* @__PURE__ */ l(
-  P,
-  {
-    className: m(a.inputField, {
-      [a.medium]: d === "medium",
-      [a.readOnly]: t
-    }),
-    children: [
-      i,
-      /* @__PURE__ */ e(
-        b,
-        {
-          className: m(a.calendarButton, {
-            [a.medium]: d === "medium",
-            [a.readOnly]: t
-          }),
-          "data-invalid": n || void 0,
-          isDisabled: r,
-          children: /* @__PURE__ */ e(
-            L,
-            {
-              "aria-hidden": !0,
-              size: 20
-            }
-          )
-        }
-      )
-    ]
-  }
-), D = ({
-  children: i
-}) => /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(v, { className: a.dialog, children: i }) }), K = ({
-  className: i,
-  description: r,
-  errorMessage: n,
-  errorPosition: t = "top",
-  label: d,
-  popover: s,
-  ...c
-}) => /* @__PURE__ */ l(
-  x,
-  {
-    className: m(a.datePicker, i),
-    ...c,
-    children: [
-      /* @__PURE__ */ e(u, { popover: s, children: d && /* @__PURE__ */ e(y, { children: d }) }),
-      r && /* @__PURE__ */ e(_, { slot: "description", children: r }),
-      t === "top" && /* @__PURE__ */ e(h, { children: n }),
-      /* @__PURE__ */ e(g, { ...c, children: /* @__PURE__ */ e(p, { children: (o) => /* @__PURE__ */ e(k, { segment: o }) }) }),
-      t === "bottom" && /* @__PURE__ */ e(h, { children: n }),
-      /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(M, {}) })
-    ]
-  }
-), Q = ({
-  className: i,
-  description: r,
-  errorMessage: n,
-  errorPosition: t = "top",
-  label: d,
-  popover: s,
-  ...c
-}) => /* @__PURE__ */ l(
-  F,
-  {
-    className: m(a.datePicker, i),
-    ...c,
-    children: [
-      /* @__PURE__ */ e(u, { popover: s, children: d && /* @__PURE__ */ e(y, { children: d }) }),
-      r && /* @__PURE__ */ e(_, { slot: "description", children: r }),
-      t === "top" && /* @__PURE__ */ e(h, { children: n }),
-      /* @__PURE__ */ l(g, { ...c, children: [
-        /* @__PURE__ */ e(p, { slot: "start", children: (o) => /* @__PURE__ */ e(k, { segment: o }) }),
-        /* @__PURE__ */ e(B, {}),
-        /* @__PURE__ */ e(p, { slot: "end", children: (o) => /* @__PURE__ */ e(k, { segment: o }) })
-      ] }),
-      t === "bottom" && /* @__PURE__ */ e(h, { children: n }),
-      /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(N, {}) })
-    ]
-  }
-);
-export {
-  K as D,
-  Q as a
-};

package/chunks/SearchField-CxoPi6Ql.js

@@ -1,135 +0,0 @@
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { s as N } from "./TextField.module-DZslrEPC.js";
-import { B as _ } from "./Button-BYrLbzir.js";
-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-Bra5aRT3.js";
-import { c as p } from "./createLucideIcon-D4r5Phnh.js";
-import { X as B } from "./x-BXShoIAM.js";
-import { u as D } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import '../assets/SearchField.css';const E = [
-  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], k = p("search", E), P = "_container_basio_1", T = "_inner_basio_10", w = "_inputContainer_basio_15", I = "_medium_basio_21", K = "_icon_basio_26", L = "_clear_basio_39", M = "_input_basio_15", a = {
-  container: P,
-  inner: T,
-  inputContainer: w,
-  medium: I,
-  icon: K,
-  clear: L,
-  input: M
-}, R = { search: "Search" }, V = { search: "Sök" }, O = {
-  en: R,
-  sv: V
-};
-function X(r) {
-  return !!r?.length;
-}
-const Z = ({
-  errorPosition: r = "top",
-  size: t = "large",
-  ...e
-}) => {
-  const { value: i, setValue: d } = j(e), v = D(O), m = x.useRef(null), { inputProps: o, isInvalid: s, validationErrors: h, clearButtonProps: S } = C(
-    {
-      ...e,
-      label: e.placeholder,
-      validationBehavior: "native"
-    },
-    { value: i, setValue: d },
-    m
-  ), g = ({ target: c }) => d(c.value), y = () => d(""), b = () => {
-    if (e.validate && X(e.validate(i)) || s || !i) {
-      m.current?.focus();
-      return;
-    }
-    e.onSubmit && e.onSubmit(i);
-  }, F = ({ key: c }) => {
-    c === "Enter" && b();
-  };
-  return /* @__PURE__ */ u(
-    "div",
-    {
-      className: l(a.container, e.className),
-      "data-disabled": o.disabled,
-      children: [
-        r === "top" && /* @__PURE__ */ n(f, { isInvalid: s, children: e.errorMessage ?? h.join(" ") }),
-        /* @__PURE__ */ u("div", { className: a.inner, children: [
-          /* @__PURE__ */ u(
-            "div",
-            {
-              className: l(a.inputContainer, {
-                [a.medium]: t === "medium"
-              }),
-              children: [
-                /* @__PURE__ */ n(
-                  k,
-                  {
-                    size: 20,
-                    className: a.icon
-                  }
-                ),
-                /* @__PURE__ */ n(
-                  "input",
-                  {
-                    ...o,
-                    ...o.disabled && { "data-disabled": !0 },
-                    className: l(
-                      N.input,
-                      a.input,
-                      o.className,
-                      { [a.medium]: t === "medium" }
-                    ),
-                    ref: m,
-                    onChange: g,
-                    value: i,
-                    "aria-invalid": s,
-                    onKeyDown: F,
-                    "aria-label": e.placeholder,
-                    "aria-labelledby": ""
-                  }
-                ),
-                i.length > 0 && /* @__PURE__ */ n(
-                  _,
-                  {
-                    variant: "icon",
-                    size: t,
-                    className: l(a.clear, {
-                      [a.medium]: t === "medium"
-                    }),
-                    onPress: y,
-                    ...S,
-                    children: /* @__PURE__ */ n(
-                      B,
-                      {
-                        size: 20,
-                        "aria-hidden": !0
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ n(
-            _,
-            {
-              size: t,
-              isDisabled: e.isDisabled,
-              excludeFromTabOrder: !0,
-              onPress: b,
-              type: "button",
-              children: e.buttonText ? e.buttonText : v.format("search")
-            }
-          )
-        ] }),
-        r === "bottom" && /* @__PURE__ */ n(f, { isInvalid: s, children: e.errorMessage ?? h.join(" ") })
-      ]
-    }
-  );
-};
-export {
-  Z as S
-};