@midas-ds/components 16.3.3 → 16.4.1

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 16.4.1 (2026-01-16)
+
+### 🧪 Tests updated
+
+- **textfield:** rename file ([8287e354be](https://github.com/migrationsverket/midas/commit/8287e354be))
+- replace jest with vitest ([6d8ca7deb3](https://github.com/migrationsverket/midas/commit/6d8ca7deb3))
+- move new tests into component folder ([306aaaa4f5](https://github.com/migrationsverket/midas/commit/306aaaa4f5))
+- **Table:** skip a11y tests for slow virtualized table ([a6055b5c91](https://github.com/migrationsverket/midas/commit/a6055b5c91))
+- move tests and stories to component folders ([967763f723](https://github.com/migrationsverket/midas/commit/967763f723))
+
+## 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/accordion/Accordion.stories.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { StoryObj } from '@storybook/react-vite';
+import { Accordion } from '.';
+type Story = StoryObj<typeof Accordion>;
+declare const _default: {
+    component: React.FC<import('./Accordion').MidasAccordion>;
+    subcomponents: {
+        AccordionItem: React.ComponentType<unknown>;
+    };
+    title: string;
+    tags: string[];
+    args: {
+        size: "large";
+    };
+};
+export default _default;
+export declare const Default: Story;
+export declare const Contained: Story;
+export declare const AllowsMultipleExpanded: Story;
+export declare const DefaultExpandedKeys: Story;
+export declare const CustomTriggerElements: Story;
+export declare const DynamicContent: Story;
+export declare const DS1060: Story;
+export declare const AccordionHasBackground: Story;

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/badge/Badge.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Badge } from './Badge';
+type Story = StoryObj<typeof Badge>;
+declare const _default: {
+    component: import('react').FC<import('react').HTMLAttributes<HTMLSpanElement>>;
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {};
+    render: (args: import('react').HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export declare const NoLabel: Story;
+export declare const WithLabel: Story;
+export declare const LongLabel: Story;

package/breadcrumbs/Breadcrumbs.stories.d.ts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Breadcrumbs } from './Breadcrumbs';
+type Story = StoryObj<typeof Breadcrumbs>;
+declare const _default: {
+    component: <T extends import('./Breadcrumbs').BreadcrumbItem>({ items, className, ...rest }: import('./Breadcrumbs').BreadcrumbsProps<T>) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+    args: {
+        items: {
+            title: string;
+            href: string;
+        }[];
+    };
+};
+export default _default;
+export declare const Primary: Story;

package/button/Button.stories.d.ts

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const TertiaryWithIcon: Story;
+export declare const PrimaryDisabled: Story;
+export declare const SecondaryDisabled: Story;
+export declare const PrimaryFullwidth: {
+    args: {
+        children: string;
+        fullwidth: boolean;
+    };
+};
+export declare const Icon: {
+    args: {
+        children: undefined;
+        icon: import('react').ForwardRefExoticComponent<Omit<import('lucide-react').LucideProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;
+        variant: string;
+        'aria-label': string;
+    };
+};
+export declare const Danger: Story;

package/button/ButtonGroup.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+import { ButtonGroup } from './ButtonGroup';
+type Story = StoryObj<typeof ButtonGroup>;
+declare const _default: {
+    component: import('react').FC<import('react').HTMLAttributes<HTMLDivElement>>;
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {};
+    argTypes: {};
+};
+export default _default;
+export declare const Primary: Story;

package/calendar/Calendar.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Calendar } from './Calendar';
+type Story = StoryObj<typeof Calendar>;
+declare const _default: {
+    component: import('react').FC<import('./Calendar').CalendarProps>;
+    render: (args: import('./Calendar').CalendarProps) => import("react/jsx-runtime").JSX.Element;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Primary: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
+export declare const UnavailableWeekends: Story;

package/calendar/RangeCalendar.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react-vite';
+import { RangeCalendar } from './RangeCalendar';
+type Story = StoryObj<typeof RangeCalendar>;
+declare const _default: {
+    component: import('react').FC<import('./RangeCalendar').RangeCalendarProps>;
+    title: string;
+    tags: string[];
+};
+export default _default;
+export declare const Primary: Story;
+export declare const SelectedDates: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;

package/card/Card.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Card } from './Card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Example: Story;
+export declare const Horizontal: Story;
+export declare const WithActions: Story;
+export declare const WithPrimaryAction: Story;
+export declare const WithLink: Story;
+export declare const WithImage: Story;
+export declare const WithContainedImage: Story;

package/checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,30 @@
+import { StoryObj } from '@storybook/react-vite';
+import { Checkbox } from './Checkbox';
+type Story = StoryObj<typeof Checkbox>;
+declare const _default: {
+    component: import('react').ForwardRefExoticComponent<import('react-aria').AriaCheckboxProps & import('react-aria-components').SlotProps & {
+        className?: string;
+    } & import('react').RefAttributes<HTMLLabelElement>>;
+    title: string;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        isDisabled: false;
+        isIndeterminate: false;
+        isInvalid: false;
+        isReadOnly: false;
+        isRequired: false;
+        value: string;
+        children: string;
+    };
+};
+export default _default;
+export declare const Primary: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;
+export declare const Indeterminate: Story;
+export declare const Selected: Story;
+export declare const Required: Story;

package/checkbox/CheckboxGroup.stories.d.ts

@@ -0,0 +1,29 @@
+import { StoryObj } from '@storybook/react-vite';
+import { CheckboxGroup } from './CheckboxGroup';
+type Story = StoryObj<typeof CheckboxGroup>;
+declare const _default: {
+    title: string;
+    component: typeof CheckboxGroup;
+    parameters: {
+        layout: string;
+    };
+    args: {
+        isInvalid: false;
+        isDisabled: false;
+        isRequired: false;
+        isReadOnly: false;
+        label: string;
+        description: string;
+        errorMessage: string;
+        errorPosition: "top";
+        children: import("react/jsx-runtime").JSX.Element[];
+    };
+    tags: string[];
+};
+export default _default;
+export declare const Primary: Story;
+export declare const ShowSelectAll: Story;
+export declare const SelectAllInteraction: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Invalid: Story;

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
+};