@midas-ds/components 17.17.3 → 17.19.0

package/CHANGELOG.md

@@ -1,3 +1,43 @@
+## 17.19.0 (2026-08-13)
+
+### 🚀 Features
+
+- **components,list-box:** add virtualized opt-out to ListBox/Select/ComboBox ([fc140394ec9](https://github.com/migrationsverket/midas/commit/fc140394ec9))
+
+### 🩹 Fixes
+
+- **components,combobox:** stop relying on ArrowDown to open in CI ([9b40aeb068a](https://github.com/migrationsverket/midas/commit/9b40aeb068a))
+- **components,combobox:** fix flaky virtualized opt-out test in CI ([8b4f9bffe21](https://github.com/migrationsverket/midas/commit/8b4f9bffe21))
+
+## 17.18.0 (2026-08-13)
+
+### 🚀 Features
+
+- **components,calendar:** make Calendar generic over selection mode ([8d5d4074ff7](https://github.com/migrationsverket/midas/commit/8d5d4074ff7))
+- **components,deps:** bump react-aria-components to 1.20.0 ([b38ce4d3001](https://github.com/migrationsverket/midas/commit/b38ce4d3001))
+
+### 🩹 Fixes
+
+- **components,checkbox:** keep Checkbox functional with the new RAC API ([59b959a2238](https://github.com/migrationsverket/midas/commit/59b959a2238))
+- **components,select:** thread generic type through SelectValue for RAC 1.20 ([9dac80b4a3d](https://github.com/migrationsverket/midas/commit/9dac80b4a3d))
+- **components,date-picker:** drop unnecessary Dialog wrapper around Calendar popover ([#10430](https://github.com/migrationsverket/midas/issues/10430))
+- **components,checkbox,radio:** use Space instead of Enter in keyboard tests ([0440d5274d4](https://github.com/migrationsverket/midas/commit/0440d5274d4))
+
+### 📖 Documentation changes
+
+- **components,date-picker:** add DateRangePicker story for anchor-date-aware isDateUnavailable ([157ca1e7740](https://github.com/migrationsverket/midas/commit/157ca1e7740))
+- **components,calendar:** add RangeCalendar story for anchor-date-aware isDateUnavailable ([c4828b8f6b5](https://github.com/migrationsverket/midas/commit/c4828b8f6b5))
+
+### 🧪 Tests updated
+
+- **components,table:** verify interactive cell content works with RAC 1.20 ([08accacef11](https://github.com/migrationsverket/midas/commit/08accacef11))
+- **components,combobox:** tolerate sub-pixel layout rounding in toggle-button overlap check ([46403b50321](https://github.com/migrationsverket/midas/commit/46403b50321))
+- **components,menu:** update test-utils API for RAC 1.20 ([a2bc23753f0](https://github.com/migrationsverket/midas/commit/a2bc23753f0))
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 3.15.5
+
 ## 17.17.3 (2026-07-08)
 
 ### 🧱 Updated Dependencies

package/assets/checkbox.css

@@ -1 +1 @@
-._checkboxInner_v5u0z_1{--border-color:var(--midas-border-color-primary);width:var(--midas-size-icon-sm);height:var(--midas-size-icon-sm);box-sizing:border-box;border:1px solid var(--border-color);transition:background-color 50ms,border-color 50ms;display:flex}._checkboxInner_v5u0z_1[data-readonly]{--border-color:var(--midas-border-color-subtle)}._checkboxInner_v5u0z_1 svg path{stroke-dasharray:24;stroke-dashoffset:24px;transition:stroke-dashoffset var(--midas-transition-duration-quick) var(--midas-transition-timing-ease-in-out)}._checkbox_v5u0z_1[data-selected] svg path,._checkbox_v5u0z_1[data-indeterminate] svg path{stroke-dashoffset:0}._checkbox_v5u0z_1{--checkbox-base-color:var(--midas-button-background-primary-base);--checkbox-hover-color:var(--midas-button-background-primary-hover);--checkbox-active-color:var(--midas-button-background-primary-active);--checkbox-disabled-border:var(--midas-border-color-disabled);--checkbox-disabled-background:var(--midas-field-disabled);--checkbox-readonly-border:var(--midas-border-color-subtle);--checkbox-warning-border:var(--midas-support-border-warning);font-family:var(--midas-typography-font-family);font-weight:var(--midas-typography-weight-regular);gap:var(--midas-space-small);cursor:pointer;width:max-content;color:var(--midas-text-primary);line-height:var(--midas-typography-line-height-30);align-items:center;display:flex}._checkbox_v5u0z_1[data-focus-visible],._checkbox_v5u0z_1:focus-visible{box-shadow:var(--midas-state-focus);outline:none}@media (forced-colors:active){._checkbox_v5u0z_1[data-focus-visible],._checkbox_v5u0z_1:focus-visible{outline:var(--midas-state-focus-contrast-mode-outline) solid;outline-offset:var(--midas-state-focus-contrast-mode-offset)}}._checkbox_v5u0z_1[data-hovered] ._checkboxInner_v5u0z_1{border-color:var(--checkbox-hover-color)}._checkbox_v5u0z_1[data-pressed] ._checkboxInner_v5u0z_1{border-color:var(--checkbox-active-color)}._checkbox_v5u0z_1[data-selected] ._checkboxInner_v5u0z_1,._checkbox_v5u0z_1[data-indeterminate] ._checkboxInner_v5u0z_1{background:var(--checkbox-base-color);border-color:var(--checkbox-base-color)}._checkbox_v5u0z_1[data-selected][data-hovered] ._checkboxInner_v5u0z_1,._checkbox_v5u0z_1[data-indeterminate][data-hovered] ._checkboxInner_v5u0z_1{background:var(--checkbox-hover-color);border-color:var(--checkbox-hover-color)}._checkbox_v5u0z_1[data-selected][data-pressed] ._checkboxInner_v5u0z_1,._checkbox_v5u0z_1[data-indeterminate][data-pressed] ._checkboxInner_v5u0z_1{background:var(--checkbox-active-color);border-color:var(--checkbox-active-color)}._checkbox_v5u0z_1[data-invalid] ._checkboxInner_v5u0z_1{outline:2px solid var(--checkbox-warning-border);outline-offset:-2px}._checkbox_v5u0z_1[data-invalid][data-hovered] ._checkboxInner_v5u0z_1{opacity:.5;transition:opacity 50ms}._checkbox_v5u0z_1[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed}._checkbox_v5u0z_1[data-disabled] ._checkboxInner_v5u0z_1{pointer-events:none;border:1px solid var(--checkbox-disabled-border)}._checkbox_v5u0z_1[data-disabled][data-selected] ._checkboxInner_v5u0z_1,._checkbox_v5u0z_1[data-disabled][data-indeterminate] ._checkboxInner_v5u0z_1{background:var(--checkbox-disabled-background)}._checkbox_v5u0z_1[data-readonly],._checkbox_v5u0z_1[data-readonly][data-indeterminate],._checkbox_v5u0z_1[data-readonly][data-selected]{pointer-events:none;border-color:var(--checkbox-readonly-border);background-color:#0000}:is(._checkbox_v5u0z_1[data-readonly],._checkbox_v5u0z_1[data-readonly][data-indeterminate],._checkbox_v5u0z_1[data-readonly][data-selected]) ._checkboxInner_v5u0z_1{border-color:var(--checkbox-readonly-border);background:0 0}:is(._checkbox_v5u0z_1[data-readonly],._checkbox_v5u0z_1[data-readonly][data-indeterminate],._checkbox_v5u0z_1[data-readonly][data-selected]) svg{stroke:currentColor}._checkboxGroup_v5u0z_144{font-family:var(--midas-typography-font-family);font-size:var(--midas-typography-font-size-30);flex-direction:column;min-width:150px;display:flex}._checkboxGroup_v5u0z_144[data-disabled]{color:var(--midas-text-disabled)}._checkboxGroup_v5u0z_144 ._checkboxList_v5u0z_155{gap:var(--midas-space-small);flex-direction:column;display:flex}@media (width<=479px){._checkboxGroup_v5u0z_144 ._checkbox_v5u0z_1{padding:var(--midas-space-70) var(--midas-space-medium);border:1px solid var(--midas-border-color-primary);width:auto}._checkboxGroup_v5u0z_144 ._checkbox_v5u0z_1[data-hovered]{background-color:var(--midas-layer-01-hover)}._checkboxGroup_v5u0z_144 ._checkbox_v5u0z_1[data-invalid]{border:2px solid var(--checkbox-warning-border)}._checkboxGroup_v5u0z_144 ._checkbox_v5u0z_1[data-disabled]{border-color:var(--checkbox-disabled-border);pointer-events:none}._checkboxGroup_v5u0z_144 ._checkbox_v5u0z_1[data-readonly]{border-color:var(--checkbox-readonly-border)}}@media (forced-colors:active){._checkbox_v5u0z_1[data-hovered] ._checkboxInner_v5u0z_1,._checkbox_v5u0z_1[data-selected] ._checkboxInner_v5u0z_1,._checkbox_v5u0z_1[data-indeterminate] ._checkboxInner_v5u0z_1{border-color:selecteditem}._checkbox_v5u0z_1[data-selected] ._checkboxInner_v5u0z_1,._checkbox_v5u0z_1[data-indeterminate] ._checkboxInner_v5u0z_1{background:selecteditem}._checkbox_v5u0z_1[data-disabled]{color:graytext}._checkbox_v5u0z_1[data-disabled] ._checkboxInner_v5u0z_1{border-color:graytext}._checkbox_v5u0z_1[data-disabled][data-selected] ._checkboxInner_v5u0z_1,._checkbox_v5u0z_1[data-disabled][data-indeterminate] ._checkboxInner_v5u0z_1{background:graytext}}@media (prefers-reduced-motion){._checkboxInner_v5u0z_1 svg path{transition:none}}
+._checkboxInner_lybbg_1{--border-color:var(--midas-border-color-primary);width:var(--midas-size-icon-sm);height:var(--midas-size-icon-sm);box-sizing:border-box;border:1px solid var(--border-color);transition:background-color 50ms,border-color 50ms;display:flex}._checkboxInner_lybbg_1[data-readonly]{--border-color:var(--midas-border-color-subtle)}._checkboxInner_lybbg_1 svg path{stroke-dasharray:24;stroke-dashoffset:24px;transition:stroke-dashoffset var(--midas-transition-duration-quick) var(--midas-transition-timing-ease-in-out)}._checkbox_lybbg_1[data-selected] svg path,._checkbox_lybbg_1[data-indeterminate] svg path{stroke-dashoffset:0}._checkbox_lybbg_1{--checkbox-base-color:var(--midas-button-background-primary-base);--checkbox-hover-color:var(--midas-button-background-primary-hover);--checkbox-active-color:var(--midas-button-background-primary-active);--checkbox-disabled-border:var(--midas-border-color-disabled);--checkbox-disabled-background:var(--midas-field-disabled);--checkbox-readonly-border:var(--midas-border-color-subtle);--checkbox-warning-border:var(--midas-support-border-warning);font-family:var(--midas-typography-font-family);font-weight:var(--midas-typography-weight-regular);gap:var(--midas-space-small);cursor:pointer;width:max-content;color:var(--midas-text-primary);line-height:var(--midas-typography-line-height-30);align-items:center;display:flex}._checkbox_lybbg_1[data-focus-visible],._checkbox_lybbg_1:focus-visible{box-shadow:var(--midas-state-focus);outline:none}@media (forced-colors:active){._checkbox_lybbg_1[data-focus-visible],._checkbox_lybbg_1:focus-visible{outline:var(--midas-state-focus-contrast-mode-outline) solid;outline-offset:var(--midas-state-focus-contrast-mode-offset)}}._checkbox_lybbg_1[data-hovered] ._checkboxInner_lybbg_1{border-color:var(--checkbox-hover-color)}._checkbox_lybbg_1[data-pressed] ._checkboxInner_lybbg_1{border-color:var(--checkbox-active-color)}._checkbox_lybbg_1[data-selected] ._checkboxInner_lybbg_1,._checkbox_lybbg_1[data-indeterminate] ._checkboxInner_lybbg_1{background:var(--checkbox-base-color);border-color:var(--checkbox-base-color)}._checkbox_lybbg_1[data-selected][data-hovered] ._checkboxInner_lybbg_1,._checkbox_lybbg_1[data-indeterminate][data-hovered] ._checkboxInner_lybbg_1{background:var(--checkbox-hover-color);border-color:var(--checkbox-hover-color)}._checkbox_lybbg_1[data-selected][data-pressed] ._checkboxInner_lybbg_1,._checkbox_lybbg_1[data-indeterminate][data-pressed] ._checkboxInner_lybbg_1{background:var(--checkbox-active-color);border-color:var(--checkbox-active-color)}._checkbox_lybbg_1[data-invalid] ._checkboxInner_lybbg_1{outline:2px solid var(--checkbox-warning-border);outline-offset:-2px}._checkbox_lybbg_1[data-invalid][data-hovered] ._checkboxInner_lybbg_1{opacity:.5;transition:opacity 50ms}._checkbox_lybbg_1[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed}._checkbox_lybbg_1[data-disabled] ._checkboxInner_lybbg_1{pointer-events:none;border:1px solid var(--checkbox-disabled-border)}._checkbox_lybbg_1[data-disabled][data-selected] ._checkboxInner_lybbg_1,._checkbox_lybbg_1[data-disabled][data-indeterminate] ._checkboxInner_lybbg_1{background:var(--checkbox-disabled-background)}._checkbox_lybbg_1[data-readonly],._checkbox_lybbg_1[data-readonly][data-indeterminate],._checkbox_lybbg_1[data-readonly][data-selected]{pointer-events:none;border-color:var(--checkbox-readonly-border);background-color:#0000}:is(._checkbox_lybbg_1[data-readonly],._checkbox_lybbg_1[data-readonly][data-indeterminate],._checkbox_lybbg_1[data-readonly][data-selected]) ._checkboxInner_lybbg_1{border-color:var(--checkbox-readonly-border);background:0 0}:is(._checkbox_lybbg_1[data-readonly],._checkbox_lybbg_1[data-readonly][data-indeterminate],._checkbox_lybbg_1[data-readonly][data-selected]) svg{stroke:currentColor}._checkboxWrapper_lybbg_141{align-items:flex-start;gap:var(--midas-space-05);flex-direction:column;width:100%;display:flex}._checkboxGroup_lybbg_152{font-family:var(--midas-typography-font-family);font-size:var(--midas-typography-font-size-30);flex-direction:column;min-width:150px;display:flex}._checkboxGroup_lybbg_152[data-disabled]{color:var(--midas-text-disabled)}._checkboxGroup_lybbg_152 ._checkboxList_lybbg_163{gap:var(--midas-space-small);flex-direction:column;display:flex}@media (width<=479px){._checkboxGroup_lybbg_152 ._checkbox_lybbg_1{padding:var(--midas-space-70) var(--midas-space-medium);border:1px solid var(--midas-border-color-primary);width:auto}._checkboxGroup_lybbg_152 ._checkbox_lybbg_1[data-hovered]{background-color:var(--midas-layer-01-hover)}._checkboxGroup_lybbg_152 ._checkbox_lybbg_1[data-invalid]{border:2px solid var(--checkbox-warning-border)}._checkboxGroup_lybbg_152 ._checkbox_lybbg_1[data-disabled]{border-color:var(--checkbox-disabled-border);pointer-events:none}._checkboxGroup_lybbg_152 ._checkbox_lybbg_1[data-readonly]{border-color:var(--checkbox-readonly-border)}}@media (forced-colors:active){._checkbox_lybbg_1[data-hovered] ._checkboxInner_lybbg_1,._checkbox_lybbg_1[data-selected] ._checkboxInner_lybbg_1,._checkbox_lybbg_1[data-indeterminate] ._checkboxInner_lybbg_1{border-color:selecteditem}._checkbox_lybbg_1[data-selected] ._checkboxInner_lybbg_1,._checkbox_lybbg_1[data-indeterminate] ._checkboxInner_lybbg_1{background:selecteditem}._checkbox_lybbg_1[data-disabled]{color:graytext}._checkbox_lybbg_1[data-disabled] ._checkboxInner_lybbg_1{border-color:graytext}._checkbox_lybbg_1[data-disabled][data-selected] ._checkboxInner_lybbg_1,._checkbox_lybbg_1[data-disabled][data-indeterminate] ._checkboxInner_lybbg_1{background:graytext}}@media (prefers-reduced-motion){._checkboxInner_lybbg_1 svg path{transition:none}}

package/assets/date-picker.css

@@ -1 +1 @@
-._dropdownAnimation_1ljkv_4{opacity:1;transition:opacity var(--midas-transition-duration-quick) var(--midas-transition-timing-ease-out)}._dropdownAnimation_1ljkv_4[data-entering]{opacity:0}._dropdownAnimation_1ljkv_4[data-exiting]{opacity:0;transition-timing-function:var(--midas-transition-timing-ease-in)}@media (prefers-reduced-motion){._dropdownAnimation_1ljkv_4{transition:none}}._datePicker_feay3_1{font-family:var(--midas-typography-font-family);flex-direction:column;align-items:flex-start;display:flex}._inputField_feay3_8{box-sizing:border-box;width:100%;height:var(--midas-size-control);background-color:var(--midas-field-01-base);border-bottom:1px solid var(--midas-border-color-primary);justify-content:flex-start;align-items:center;gap:1rem;padding-left:1rem;display:flex}@media (forced-colors:active){._inputField_feay3_8{border:1px solid var(--midas-border-color-primary)}}._inputField_feay3_8._medium_feay3_24{height:var(--midas-size-control-md)}._inputField_feay3_8[data-disabled]{cursor:not-allowed;border-color:var(--midas-border-color-disabled)}._inputField_feay3_8:focus-visible,._inputField_feay3_8[data-focus-visible]{outline:none}._inputField_feay3_8[data-invalid]{box-shadow:var(--midas-state-invalid);border:none}@media (forced-colors:active){._inputField_feay3_8[data-invalid]{border:1px solid var(--midas-border-color-primary)}}._inputField_feay3_8._readOnly_feay3_47{border-color:var(--midas-border-color-subtle);background-color:#0000}._inputField_feay3_8 ._buttonGroup_feay3_52{height:100%;margin-left:auto;display:flex}._inputField_feay3_8 ._iconButton_feay3_58{aspect-ratio:1;border:none;height:100%;padding:0}._inputField_feay3_8 ._iconButton_feay3_58[data-disabled]{background-color:#0000}._inputField_feay3_8 ._iconButton_feay3_58:focus-visible,._inputField_feay3_8 ._iconButton_feay3_58[data-focus-visible]{box-shadow:var(--midas-state-focus-inset);outline:none}@media (forced-colors:active){._inputField_feay3_8 ._iconButton_feay3_58:focus-visible,._inputField_feay3_8 ._iconButton_feay3_58[data-focus-visible]{outline-offset:2px;outline:3px solid highlight}}._dialog_feay3_85{box-shadow:0 3px 5px #0003}
+._dropdownAnimation_1ljkv_4{opacity:1;transition:opacity var(--midas-transition-duration-quick) var(--midas-transition-timing-ease-out)}._dropdownAnimation_1ljkv_4[data-entering]{opacity:0}._dropdownAnimation_1ljkv_4[data-exiting]{opacity:0;transition-timing-function:var(--midas-transition-timing-ease-in)}@media (prefers-reduced-motion){._dropdownAnimation_1ljkv_4{transition:none}}._datePicker_10ewm_1{font-family:var(--midas-typography-font-family);flex-direction:column;align-items:flex-start;display:flex}._inputField_10ewm_8{box-sizing:border-box;width:100%;height:var(--midas-size-control);background-color:var(--midas-field-01-base);border-bottom:1px solid var(--midas-border-color-primary);justify-content:flex-start;align-items:center;gap:1rem;padding-left:1rem;display:flex}@media (forced-colors:active){._inputField_10ewm_8{border:1px solid var(--midas-border-color-primary)}}._inputField_10ewm_8._medium_10ewm_24{height:var(--midas-size-control-md)}._inputField_10ewm_8[data-disabled]{cursor:not-allowed;border-color:var(--midas-border-color-disabled)}._inputField_10ewm_8:focus-visible,._inputField_10ewm_8[data-focus-visible]{outline:none}._inputField_10ewm_8[data-invalid]{box-shadow:var(--midas-state-invalid);border:none}@media (forced-colors:active){._inputField_10ewm_8[data-invalid]{border:1px solid var(--midas-border-color-primary)}}._inputField_10ewm_8._readOnly_10ewm_47{border-color:var(--midas-border-color-subtle);background-color:#0000}._inputField_10ewm_8 ._buttonGroup_10ewm_52{height:100%;margin-left:auto;display:flex}._inputField_10ewm_8 ._iconButton_10ewm_58{aspect-ratio:1;border:none;height:100%;padding:0}._inputField_10ewm_8 ._iconButton_10ewm_58[data-disabled]{background-color:#0000}._inputField_10ewm_8 ._iconButton_10ewm_58:focus-visible,._inputField_10ewm_8 ._iconButton_10ewm_58[data-focus-visible]{box-shadow:var(--midas-state-focus-inset);outline:none}@media (forced-colors:active){._inputField_10ewm_8 ._iconButton_10ewm_58:focus-visible,._inputField_10ewm_8 ._iconButton_10ewm_58[data-focus-visible]{outline-offset:2px;outline:3px solid highlight}}._popover_10ewm_81{box-shadow:0 3px 5px #0003}

package/breadcrumbs/Breadcrumbs.stories.d.ts

@@ -9,7 +9,7 @@ declare const _default: {
     component: <T extends object>({ className, ...rest }: import('./Breadcrumbs').BreadcrumbsProps<T>) => import("react/jsx-runtime").JSX.Element;
     subcomponents: {
         Breadcrumb: ({ className, children, ...rest }: import('./Breadcrumb').BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
-        Link: <C extends React.ElementType = (props: import('react-aria-components').LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null>({ children, standalone, target, stretched, download, icon: customIcon, className, as, ...rest }: import('..').LinkProps<C>) => import("react/jsx-runtime").JSX.Element;
+        Link: <C extends React.ElementType = (props: import('react-aria-components').LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null>({ children, standalone, target, stretched, download, icon: customIcon, className, as, ...rest }: import('..').LinkProps<C>) => import("react/jsx-runtime").JSX.Element;
     };
     title: string;
     tags: string[];

package/calendar/Calendar.d.ts

@@ -1,6 +1,6 @@
 import { CalendarProps as AriaCalendarProps, DateValue } from 'react-aria-components';
-import * as React from 'react';
-export interface CalendarProps extends AriaCalendarProps<DateValue> {
+import { CalendarSelectionMode } from 'react-stately/useCalendarState';
+export interface CalendarProps<M extends CalendarSelectionMode = 'single'> extends AriaCalendarProps<DateValue, M> {
     errorMessage?: string;
 }
-export declare const Calendar: React.FC<CalendarProps>;
+export declare const Calendar: <M extends CalendarSelectionMode = "single">({ className, errorMessage, ...rest }: CalendarProps<M>) => import("react/jsx-runtime").JSX.Element;

package/calendar/Calendar.stories.d.ts

@@ -1,9 +1,9 @@
 import { StoryObj } from '@storybook/react-vite';
 import { Calendar } from './Calendar';
-type Story = StoryObj<typeof Calendar>;
+type Story = StoryObj<typeof Calendar<'single'>>;
 declare const _default: {
-    component: import('react').FC<import('./Calendar').CalendarProps>;
-    render: (args: import('./Calendar').CalendarProps) => import("react/jsx-runtime").JSX.Element;
+    component: <M extends import('react-stately/useCalendarState').CalendarSelectionMode = "single">({ className, errorMessage, ...rest }: import('./Calendar').CalendarProps<M>) => import("react/jsx-runtime").JSX.Element;
+    render: (args: import('./Calendar').CalendarProps<"single">) => import("react/jsx-runtime").JSX.Element;
     title: string;
     tags: string[];
 };
@@ -13,3 +13,4 @@ export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Invalid: Story;
 export declare const UnavailableWeekends: Story;
+export declare const MultiSelect: StoryObj<typeof Calendar<'multiple'>>;

package/calendar/RangeCalendar.stories.d.ts

@@ -11,3 +11,4 @@ export declare const Primary: Story;
 export declare const SelectedDates: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
+export declare const MaxRangeDuration: Story;

package/checkbox/Checkbox.d.ts

@@ -1,3 +1,6 @@
 export declare const Checkbox: import('react').ForwardRefExoticComponent<import('react-aria').AriaCheckboxProps & import('react-aria-components').SlotProps & {
     className?: string;
+    description?: string;
+    errorMessage?: string | ((validation: import('react-aria-components').ValidationResult) => string);
+    errorPosition?: "top" | "bottom";
 } & import('react').RefAttributes<HTMLLabelElement>>;

package/checkbox/Checkbox.stories.d.ts

@@ -4,6 +4,9 @@ type Story = StoryObj<typeof Checkbox>;
 declare const _default: {
     component: import('react').ForwardRefExoticComponent<import('react-aria').AriaCheckboxProps & import('react-aria-components').SlotProps & {
         className?: string;
+        description?: string;
+        errorMessage?: string | ((validation: import('react-aria-components').ValidationResult) => string);
+        errorPosition?: "top" | "bottom";
     } & import('react').RefAttributes<HTMLLabelElement>>;
     title: string;
     tags: string[];
@@ -27,4 +30,6 @@ export declare const ReadOnly: Story;
 export declare const Invalid: Story;
 export declare const Indeterminate: Story;
 export declare const Selected: Story;
+export declare const WithDescription: Story;
+export declare const WithErrorMessage: Story;
 export declare const Required: Story;

package/checkbox/context.d.ts

@@ -1,3 +1,3 @@
-import { CheckboxGroupState } from '@react-stately/checkbox';
+import { CheckboxGroupState } from 'react-stately';
 import { default as React } from 'react';
 export declare const CheckboxGroupContext: React.Context<CheckboxGroupState | null>;

package/checkbox/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/checkbox-B1fsgVOD.js";
+import { n as e, t } from "../chunks/checkbox-DEN5T_Km.js";
 export { e as Checkbox, t as CheckboxGroup };

package/checkbox/types.d.ts

@@ -1,8 +1,11 @@
 import { AriaCheckboxProps, CheckboxAria, FocusRingAria, HoverResult, PressResult } from 'react-aria';
-import { SlotProps } from 'react-aria-components';
+import { SlotProps, ValidationResult } from 'react-aria-components';
 import { CheckboxGroupState } from 'react-stately';
 export type CheckboxProps = AriaCheckboxProps & SlotProps & {
     className?: string;
+    description?: string;
+    errorMessage?: string | ((validation: ValidationResult) => string);
+    errorPosition?: 'top' | 'bottom';
 };
 export interface CheckboxComponentProps extends CheckboxProps {
     focusRingAria: FocusRingAria;

package/chunks/{checkbox-B1fsgVOD.js → checkbox-DEN5T_Km.js}

@@ -11,46 +11,71 @@ import { CheckboxContext as p, FieldErrorContext as m, FormContext as h, useCont
 import { jsx as v, jsxs as y } from "react/jsx-runtime";
 import { VisuallyHidden as b, mergeProps as x, useCheckbox as S, useCheckboxGroup as C, useCheckboxGroupItem as w, useFocusRing as T, useHover as E, usePress as D } from "react-aria";
 import { variables as O } from "@midas-ds/theme";
-import { useToggleState as k } from "@react-stately/toggle";
-import { useCheckboxGroupState as A } from "react-stately";
+import { useCheckboxGroupState as k, useToggleState as A } from "react-stately";
 import '../assets/checkbox.css';var j = t("minus", [["path", {
 	d: "M5 12h14",
 	key: "1ays0h"
 }]]), M = l.createContext(null), N = {
-	checkboxInner: "_checkboxInner_v5u0z_1",
-	checkbox: "_checkbox_v5u0z_1",
-	checkboxGroup: "_checkboxGroup_v5u0z_144",
-	checkboxList: "_checkboxList_v5u0z_155"
-}, P = u(({ hoverResult: t, pressResult: r, focusRingAria: i, labelProps: a, slot: o, className: s, isSelected: c, isIndeterminate: l, isDisabled: u, isInvalid: d, isReadOnly: f, isRequired: p, inputProps: m, inputRef: h, children: g }, _) => {
-	let { hoverProps: S, isHovered: C } = t, { pressProps: w, isPressed: T } = r, { isFocused: E, isFocusVisible: D, focusProps: k } = i;
-	return /* @__PURE__ */ y("label", {
-		ref: _,
-		...x(S, w, a),
-		slot: o || void 0,
-		className: e(N.checkbox, s),
-		"data-hovered": C || void 0,
-		"data-selected": c || void 0,
-		"data-indeterminate": l || void 0,
-		"data-pressed": T || void 0,
-		"data-disabled": u || void 0,
-		"data-readonly": f || void 0,
-		"data-invalid": d || void 0,
-		"data-focused": E || void 0,
-		"data-focus-visible": D || void 0,
-		"data-required": p || void 0,
+	checkboxInner: "_checkboxInner_lybbg_1",
+	checkbox: "_checkbox_lybbg_1",
+	checkboxWrapper: "_checkboxWrapper_lybbg_141",
+	checkboxGroup: "_checkboxGroup_lybbg_152",
+	checkboxList: "_checkboxList_lybbg_163"
+}, P = u(({ hoverResult: t, pressResult: r, focusRingAria: o, labelProps: s, slot: c, className: l, isSelected: u, isIndeterminate: d, isDisabled: f, isInvalid: p, isReadOnly: h, isRequired: g, inputProps: _, inputRef: S, children: C, description: w, errorMessage: T, errorPosition: E = "top", descriptionProps: D, errorMessageProps: k, validationErrors: A, validationDetails: M }, P) => {
+	let { hoverProps: F, isHovered: I } = t, { pressProps: L, isPressed: R } = r, { isFocused: z, isFocusVisible: B, focusProps: V } = o, H = /* @__PURE__ */ y("label", {
+		ref: P,
+		...x(F, L, s),
+		slot: w || T ? void 0 : c || void 0,
+		className: e(N.checkbox, l),
+		"data-hovered": I || void 0,
+		"data-selected": u || void 0,
+		"data-indeterminate": d || void 0,
+		"data-pressed": R || void 0,
+		"data-disabled": f || void 0,
+		"data-readonly": h || void 0,
+		"data-invalid": p || void 0,
+		"data-focused": z || void 0,
+		"data-focus-visible": B || void 0,
+		"data-required": g || void 0,
 		children: [
 			/* @__PURE__ */ v("div", {
 				className: e(N.checkboxInner),
-				children: v(l ? j : n, {
+				children: v(d ? j : n, {
 					size: 14,
 					color: O.iconOnColor
 				})
 			}),
 			/* @__PURE__ */ v(b, { children: /* @__PURE__ */ v("input", {
-				...x(m, k),
-				ref: h
+				...x(_, V),
+				ref: S
 			}) }),
-			g
+			C
+		]
+	});
+	if (!w && !T) return H;
+	let U = T && /* @__PURE__ */ v(m.Provider, {
+		value: {
+			isInvalid: !!p,
+			validationErrors: A,
+			validationDetails: M
+		},
+		children: /* @__PURE__ */ v(a, {
+			...k,
+			children: T
+		})
+	});
+	return /* @__PURE__ */ y("div", {
+		className: N.checkboxWrapper,
+		slot: c || void 0,
+		children: [
+			w && /* @__PURE__ */ v(i, {
+				slot: "description",
+				...D,
+				children: w
+			}),
+			E === "top" && U,
+			H,
+			E === "bottom" && U
 		]
 	});
 });
@@ -72,7 +97,7 @@ F.displayName = "CheckBoxGroupItem";
 //#endregion
 //#region packages/components/src/checkbox/SingleCheckbox.tsx
 var I = u((e, t) => {
-	let n = S(e, k(e), e.inputRef);
+	let n = S(e, A(e), e.inputRef);
 	return /* @__PURE__ */ v(P, {
 		...e,
 		...n,
@@ -125,7 +150,7 @@ var R = (e, { value: t }) => {
 //#endregion
 //#region packages/components/src/checkbox/CheckboxGroup.tsx
 function V(e) {
-	let t = A(e), n = r(B), { groupProps: a, labelProps: c, descriptionProps: l } = C(e, t), { allSelected: u, someSelected: d, checkboxValues: f } = R(e.children, t), p = (e) => {
+	let t = k(e), n = r(B), { groupProps: a, labelProps: c, descriptionProps: l } = C(e, t), { allSelected: u, someSelected: d, checkboxValues: f } = R(e.children, t), p = (e) => {
 		t.setValue(e ? f : []);
 	};
 	return /* @__PURE__ */ y("div", {

package/chunks/{combobox-Ids5V9io.js → combobox-UjxDfSoD.js}

@@ -5,7 +5,7 @@ import { t as n } from "./useLocalizedStringFormatter-bRLuRzVD.js";
 import { t as r } from "./text-mAeDlv5N.js";
 import { t as i } from "./field-error-DYp2kgFr.js";
 import { n as a, t as o } from "./label-Bius53F0.js";
-import { a as s, c, t as l } from "./list-box-BozMU8so.js";
+import { a as s, c, t as l } from "./list-box-DvX6VTa1.js";
 import { useRef as u } from "react";
 import { Button as d, ComboBox as f, Input as p } from "react-aria-components";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";

package/chunks/{date-field-U4owDpGF.js → date-field-CYk8-UEY.js}

@@ -7,7 +7,7 @@ import { t as o } from "./clear-button-Cb4MTvBR.js";
 import * as s from "react";
 import { DateField as c, DateFieldStateContext as l, DateInput as u, DateSegment as d } from "react-aria-components";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { FocusScope as m, useFocusManager as h } from "@react-aria/focus";
+import { FocusScope as m, useFocusManager as h } from "react-aria";
 import '../assets/date-field.css';var g = {
 	en: { clear: "Clear date" },
 	sv: { clear: "Rensa datum" }

package/chunks/date-picker-BQcIYROH.js

@@ -0,0 +1,187 @@
+'use client';
+import { n as e } from "./clsx-BtlV5Vo3.js";
+import { t } from "./createLucideIcon-DhIhuN5D.js";
+import { n, t as r } from "./calendar-C0rlcHfr.js";
+import { t as i } from "./useLocalizedStringFormatter-bRLuRzVD.js";
+import { n as a } from "./button-CFjf-bDe.js";
+import { t as o } from "./text-mAeDlv5N.js";
+import { t as s } from "./field-error-DYp2kgFr.js";
+import { n as c, t as l } from "./label-Bius53F0.js";
+import { t as u } from "./clear-button-Cb4MTvBR.js";
+import { n as d, r as f, t as p } from "./date-field-CYk8-UEY.js";
+import * as m from "react";
+import { DatePicker as h, DatePickerStateContext as g, DateRangePicker as _, DateRangePickerStateContext as v, Group as y, Popover as b } from "react-aria-components";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { FocusScope as C, useFocusManager as w } from "react-aria";
+import '../assets/date-picker.css';var T = t("calendar-days", [
+	["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"
+	}]
+]), E = {
+	en: {
+		clear: "Clear date",
+		"open-calendar": "Open calendar"
+	},
+	sv: {
+		clear: "Rensa datum",
+		"open-calendar": "Öppna kalender"
+	}
+}, D = {
+	datePicker: "_datePicker_10ewm_1",
+	inputField: "_inputField_10ewm_8",
+	medium: "_medium_10ewm_24",
+	readOnly: "_readOnly_10ewm_47",
+	buttonGroup: "_buttonGroup_10ewm_52",
+	iconButton: "_iconButton_10ewm_58",
+	popover: "_popover_10ewm_81 _dropdownAnimation_1ljkv_4"
+}, O = (e) => !!e && !!e.value && Object.prototype.hasOwnProperty.call(e.value, "start"), k = ({ isClearable: t, isDisabled: n, isReadOnly: r, size: a }) => {
+	let o = m.useContext(g), s = m.useContext(v), c = i(E), l = w(), d = s ?? o, f = O(d) ? !!d.value.start && d.value.end : !!d?.value;
+	return t && f && !r ? /* @__PURE__ */ x(u, {
+		onPress: () => {
+			d?.setValue(null), l?.focusFirst();
+		},
+		size: a,
+		isDisabled: n,
+		"aria-label": c.format("clear"),
+		className: e(D.iconButton, { [D.medium]: a === "medium" })
+	}) : null;
+}, A = ({ children: t, isDisabled: n, isInvalid: r, isReadOnly: o, size: s = "large", isClearable: c = !1 }) => {
+	let l = i(E);
+	return /* @__PURE__ */ x(y, {
+		className: e(D.inputField, {
+			[D.medium]: s === "medium",
+			[D.readOnly]: o
+		}),
+		children: /* @__PURE__ */ S(C, { children: [t, /* @__PURE__ */ S("div", {
+			className: D.buttonGroup,
+			children: [/* @__PURE__ */ x(k, {
+				isClearable: c,
+				isDisabled: n,
+				isReadOnly: o,
+				size: s
+			}), /* @__PURE__ */ x(a, {
+				variant: "icon",
+				"aria-label": l.format("open-calendar"),
+				className: e(D.iconButton, {
+					[D.medium]: s === "medium",
+					[D.readOnly]: o
+				}),
+				"data-invalid": r || void 0,
+				size: s,
+				children: /* @__PURE__ */ x(T, {
+					"aria-hidden": !0,
+					size: 20
+				})
+			})]
+		})] })
+	});
+}, j = ({ children: e }) => /* @__PURE__ */ x(b, {
+	className: D.popover,
+	children: e
+}), M = m.forwardRef(({ className: t, description: r, errorMessage: i, errorPosition: a = "top", label: u, popover: p, isClearable: m = !1, isReadOnly: g, isDisabled: _, size: v, ...y }, b) => /* @__PURE__ */ S(h, {
+	className: e(D.datePicker, t),
+	isReadOnly: g,
+	isDisabled: _,
+	ref: b,
+	...y,
+	children: [
+		/* @__PURE__ */ x(c, {
+			popover: p,
+			children: u && /* @__PURE__ */ x(l, { children: u })
+		}),
+		r && /* @__PURE__ */ x(o, {
+			slot: "description",
+			children: r
+		}),
+		a === "top" && /* @__PURE__ */ x(s, { children: i }),
+		/* @__PURE__ */ x(A, {
+			isClearable: m,
+			isReadOnly: g,
+			isDisabled: _,
+			size: v,
+			...y,
+			children: /* @__PURE__ */ x(d, { children: (e) => /* @__PURE__ */ x(f, { segment: e }) })
+		}),
+		a === "bottom" && /* @__PURE__ */ x(s, { children: i }),
+		/* @__PURE__ */ x(j, { children: /* @__PURE__ */ x(n, {}) })
+	]
+})), N = ({ className: t, description: n, errorMessage: i, errorPosition: a = "top", label: u, popover: m, isClearable: h = !1, isReadOnly: g, isDisabled: v, size: y, ...b }) => /* @__PURE__ */ S(_, {
+	className: e(D.datePicker, t),
+	isReadOnly: g,
+	isDisabled: v,
+	...b,
+	children: [
+		/* @__PURE__ */ x(c, {
+			popover: m,
+			children: u && /* @__PURE__ */ x(l, { children: u })
+		}),
+		n && /* @__PURE__ */ x(o, {
+			slot: "description",
+			children: n
+		}),
+		a === "top" && /* @__PURE__ */ x(s, { children: i }),
+		/* @__PURE__ */ S(A, {
+			isClearable: h,
+			isReadOnly: g,
+			isDisabled: v,
+			size: y,
+			...b,
+			children: [
+				/* @__PURE__ */ x(d, {
+					slot: "start",
+					children: (e) => /* @__PURE__ */ x(f, { segment: e })
+				}),
+				/* @__PURE__ */ x(p, {}),
+				/* @__PURE__ */ x(d, {
+					slot: "end",
+					children: (e) => /* @__PURE__ */ x(f, { segment: e })
+				})
+			]
+		}),
+		a === "bottom" && /* @__PURE__ */ x(s, { children: i }),
+		/* @__PURE__ */ x(j, { children: /* @__PURE__ */ x(r, {}) })
+	]
+});
+//#endregion
+export { M as n, N as t };

package/chunks/{list-box-BozMU8so.js → list-box-DvX6VTa1.js}

@@ -24,15 +24,18 @@ var g = class extends l {
 	item: "_item_48j4n_187",
 	option: "_option_48j4n_188",
 	inputCheckbox: "_inputCheckbox_48j4n_188"
-}, v = ({ className: t, children: n, ...r }) => /* @__PURE__ */ m(d, {
-	layout: g,
-	layoutOptions: { headingHeight: 38 },
-	children: /* @__PURE__ */ m(a, {
+}, v = ({ className: t, children: n, virtualized: r = !0, ...i }) => {
+	let o = /* @__PURE__ */ m(a, {
 		className: e(_.listBox, t),
-		...r,
+		...i,
 		children: n
-	})
-}), y = ({ className: t, children: n, ...r }) => /* @__PURE__ */ m("button", {
+	});
+	return r ? /* @__PURE__ */ m(d, {
+		layout: g,
+		layoutOptions: { headingHeight: 38 },
+		children: o
+	}) : o;
+}, y = ({ className: t, children: n, ...r }) => /* @__PURE__ */ m("button", {
 	type: "button",
 	className: e(_.listBoxItem, _.listBoxButton, t),
 	...r,

package/chunks/{select-iEvRNP3W.js → select-DneAUko_.js}

@@ -1,19 +1,18 @@
 import { n as e, t } from "./clsx-BtlV5Vo3.js";
 import { t as n } from "./chevron-down-Buf0eTzo.js";
-import { n as r } from "./checkbox-B1fsgVOD.js";
+import { n as r } from "./checkbox-DEN5T_Km.js";
 import { t as i } from "./x-Bs_QW3q8.js";
 import { t as a } from "./useLocalizedStringFormatter-bRLuRzVD.js";
 import { t as o } from "./text-mAeDlv5N.js";
 import { t as s } from "./field-error-DYp2kgFr.js";
 import { n as c, t as l } from "./label-Bius53F0.js";
 import { t as u } from "./popover-Bx2Rch_E.js";
-import { c as d } from "./list-box-BozMU8so.js";
+import { c as d } from "./list-box-DvX6VTa1.js";
 import { n as f, r as p, t as m } from "./tag-CELJrUEQ.js";
 import h, { useContext as g } from "react";
 import { Button as _, Select as v, SelectStateContext as y, SelectValue as b } from "react-aria-components";
 import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { useFocusManager as w } from "react-aria";
-import { FocusScope as T } from "@react-aria/focus";
+import { FocusScope as w, useFocusManager as T } from "react-aria";
 import '../assets/select.css';var E = {
 	en: {
 		clearAll: "Clear all",
@@ -68,7 +67,7 @@ import '../assets/select.css';var E = {
 		})
 	});
 }, A = ({ isDisabled: e }) => {
-	let t = h.useContext(y), n = a(E), r = w();
+	let t = h.useContext(y), n = a(E), r = T();
 	return /* @__PURE__ */ S(_, {
 		"aria-label": n.format("clearAll"),
 		className: D.clearButton,
@@ -126,15 +125,15 @@ import '../assets/select.css';var E = {
 };
 //#endregion
 //#region packages/components/src/select/Select.tsx
-function N({ children: e, description: n, errorMessage: r, errorPosition: i = "top", items: a, label: f, popover: p, popoverProps: m, size: h = "large", ...g }) {
-	return /* @__PURE__ */ S(T, { children: /* @__PURE__ */ C(v, {
-		...g,
-		className: t(g.className, D.select),
+function N({ children: e, description: n, errorMessage: r, errorPosition: i = "top", items: a, label: f, popover: p, popoverProps: m, listBoxProps: h, size: g = "large", ..._ }) {
+	return /* @__PURE__ */ S(w, { children: /* @__PURE__ */ C(v, {
+		..._,
+		className: t(_.className, D.select),
 		children: [
 			/* @__PURE__ */ S(c, {
 				popover: p,
 				children: f && /* @__PURE__ */ S(l, {
-					"data-disabled": g.isDisabled || void 0,
+					"data-disabled": _.isDisabled || void 0,
 					children: f
 				})
 			}),
@@ -145,11 +144,11 @@ function N({ children: e, description: n, errorMessage: r, errorPosition: i = "t
 			i === "top" && /* @__PURE__ */ S(s, { children: r }),
 			/* @__PURE__ */ C("div", {
 				className: D.triggerContainer,
-				"data-disabled": g.isDisabled || void 0,
+				"data-disabled": _.isDisabled || void 0,
 				children: [/* @__PURE__ */ S(M, {
-					size: h,
-					...g
-				}), g.selectionMode === "multiple" ? /* @__PURE__ */ S(k, { ...g }) : null]
+					size: g,
+					..._
+				}), _.selectionMode === "multiple" ? /* @__PURE__ */ S(k, { ..._ }) : null]
 			}),
 			i === "bottom" && /* @__PURE__ */ S(s, { children: r }),
 			/* @__PURE__ */ C(u, {
@@ -157,13 +156,14 @@ function N({ children: e, description: n, errorMessage: r, errorPosition: i = "t
 				hideArrow: !0,
 				...m,
 				className: t(m?.className, D.popover),
-				children: [g.isSelectableAll && /* @__PURE__ */ S(O, {}), /* @__PURE__ */ S(d, {
+				children: [_.isSelectableAll && /* @__PURE__ */ S(O, {}), /* @__PURE__ */ S(d, {
 					escapeKeyBehavior: "none",
 					items: a,
+					...h,
 					children: e
 				})]
 			}),
-			/* @__PURE__ */ S(j, { ...g })
+			/* @__PURE__ */ S(j, { ..._ })
 		]
 	}) });
 }

package/chunks/{table-lU-UeRjC.js → table-jarDZ4q4.js}

@@ -1,7 +1,7 @@
 'use client';
 import { t as e } from "./clsx-BtlV5Vo3.js";
 import { t } from "./createLucideIcon-DhIhuN5D.js";
-import { n } from "./checkbox-B1fsgVOD.js";
+import { n } from "./checkbox-DEN5T_Km.js";
 import { Button as r, Cell as i, Collection as a, Column as o, Row as s, Table as c, TableBody as l, TableHeader as u, useTableOptions as d } from "react-aria-components";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import '../assets/table.css';var h = t("arrow-down", [["path", {

package/chunks/{time-field-BROZiten.js → time-field-Dv9xYdex.js}

@@ -4,11 +4,11 @@ import { t as n } from "./text-mAeDlv5N.js";
 import { t as r } from "./field-error-DYp2kgFr.js";
 import { n as i, t as a } from "./label-Bius53F0.js";
 import { t as o } from "./clear-button-Cb4MTvBR.js";
-import { n as s, r as c } from "./date-field-U4owDpGF.js";
+import { n as s, r as c } from "./date-field-CYk8-UEY.js";
 import * as l from "react";
 import { TimeField as u, TimeFieldStateContext as d } from "react-aria-components";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { FocusScope as m, useFocusManager as h } from "@react-aria/focus";
+import { FocusScope as m, useFocusManager as h } from "react-aria";
 import '../assets/time-field.css';var g = {
 	en: { clear: "Clear time" },
 	sv: { clear: "Rensa tid" }

package/combobox/ComboBox.stories.d.ts

@@ -22,7 +22,7 @@ declare const _default: {
         };
     };
     render: (args: import('./ComboBox').ComboBoxProps<{
-        id: import('react-aria').Key;
+        id: import('react-aria-components').Key;
         name: string;
     }>) => import("react/jsx-runtime").JSX.Element;
 };
@@ -35,6 +35,7 @@ export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Required: Story;
 export declare const Sectioned: Story<Section>;
+export declare const NotVirtualized: Story<Section>;
 export declare const PerformanceTest: Story;
 export declare const AsynchronousLoadingWithEmptyMessage: Story;
 export declare const InfiniteScroll: Story;

package/combobox/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/combobox-Ids5V9io.js";
+import { t as e } from "../chunks/combobox-UjxDfSoD.js";
 export { e as ComboBox };

package/date-field/index.js

@@ -1,2 +1,2 @@
-import { i as e, n as t, r as n, t as r } from "../chunks/date-field-U4owDpGF.js";
+import { i as e, n as t, r as n, t as r } from "../chunks/date-field-CYk8-UEY.js";
 export { e as DateField, t as DateInput, r as DateInputDivider, n as DateSegment };

package/date-picker/DateRangePicker.stories.d.ts

@@ -36,3 +36,4 @@ export declare const Disabled: Story;
 export declare const ReadOnly: Story;
 export declare const Invalid: Story;
 export declare const WithClearButton: Story;
+export declare const MaxRangeDuration: Story;

package/date-picker/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../chunks/date-picker-C9KL-4Lj.js";
+import { n as e, t } from "../chunks/date-picker-BQcIYROH.js";
 export { e as DatePicker, t as DateRangePicker };

package/index.js

@@ -5,11 +5,11 @@ import { t as n } from "./chunks/clsx-BtlV5Vo3.js";
 import { t as r } from "./chunks/spinner-C3WiZYld.js";
 import { a as i, i as a, n as o, r as s, t as c } from "./chunks/layout-BzK7P4Xn.js";
 import { t as l } from "./chunks/link-CZNuhFX6.js";
-import { a as u, i as d, n as f, o as p, r as m, t as h } from "./chunks/table-lU-UeRjC.js";
+import { a as u, i as d, n as f, o as p, r as m, t as h } from "./chunks/table-jarDZ4q4.js";
 import { t as g } from "./chunks/link-button-ZsK6UGko.js";
-import { n as _, t as v } from "./chunks/date-picker-C9KL-4Lj.js";
+import { n as _, t as v } from "./chunks/date-picker-BQcIYROH.js";
 import { n as y, t as b } from "./chunks/calendar-C0rlcHfr.js";
-import { n as x, t as S } from "./chunks/checkbox-B1fsgVOD.js";
+import { n as x, t as S } from "./chunks/checkbox-DEN5T_Km.js";
 import { n as C, t as w } from "./chunks/color-scheme-switch-FjmPZdE4.js";
 import { t as T } from "./chunks/search-field-Ci2UjkmK.js";
 import { n as E, t as D } from "./chunks/file-list-DYOuch5G.js";
@@ -28,9 +28,9 @@ import { n as X, r as Z, t as Q } from "./chunks/modal-Dr0ythpF.js";
 import { t as $ } from "./chunks/icons-Dw_ZbztW.js";
 import { n as ee, t as te } from "./chunks/toggle-button-DlPo9GJW.js";
 import { a as ne, i as re, n as ie, o as ae, r as oe, t as se } from "./chunks/menu-CB6VDQ-u.js";
-import { t as ce } from "./chunks/combobox-Ids5V9io.js";
-import { a as le, c as ue, i as de, n as fe, o as pe, r as me, s as he, t as ge } from "./chunks/list-box-BozMU8so.js";
-import { i as _e, n as ve, r as ye, t as be } from "./chunks/date-field-U4owDpGF.js";
+import { t as ce } from "./chunks/combobox-UjxDfSoD.js";
+import { a as le, c as ue, i as de, n as fe, o as pe, r as me, s as he, t as ge } from "./chunks/list-box-DvX6VTa1.js";
+import { i as _e, n as ve, r as ye, t as be } from "./chunks/date-field-CYk8-UEY.js";
 import { n as xe, t as Se } from "./chunks/file-upload-CZRTVw5O.js";
 import { n as Ce, t as we } from "./chunks/grid-CUYMbO7c.js";
 import { t as Te } from "./chunks/info-banner-hHq0Atii.js";
@@ -38,12 +38,12 @@ import { n as Ee, t as De } from "./chunks/tooltip-BE_r_CBm.js";
 import { n as Oe, t as ke } from "./chunks/logo-D7tz-4hp.js";
 import { t as Ae } from "./chunks/progress-bar-5H5WvG7R.js";
 import { n as je, t as Me } from "./chunks/radio-CsAvwCn2.js";
-import { t as Ne } from "./chunks/select-iEvRNP3W.js";
+import { t as Ne } from "./chunks/select-DneAUko_.js";
 import { n as Pe, r as Fe, t as Ie } from "./chunks/tag-CELJrUEQ.js";
 import { t as Le } from "./chunks/skeleton-OqKFBcmO.js";
 import { i as Re, n as ze, r as Be, t as Ve } from "./chunks/tabs-eshGdQJJ.js";
 import { i as He, n as Ue, r as We, t as Ge } from "./chunks/textfield-5Sw4fgE5.js";
-import { t as Ke } from "./chunks/time-field-BROZiten.js";
+import { t as Ke } from "./chunks/time-field-Dv9xYdex.js";
 import { a as qe, i as Je, n as Ye, o as Xe, r as Ze, t as Qe } from "./chunks/toast-AYzfHBcQ.js";
 //#endregion
 //#region packages/components/src/version.ts
@@ -59,7 +59,7 @@ var $e = {
 	description: "Midas Components",
 	homepage: "https://designsystem.migrationsverket.se/",
 	license: "CC0-1.0",
-	version: "17.17.3",
+	version: "17.19.0",
 	module: "./index.js",
 	type: "module",
 	main: "./index.js",
@@ -82,7 +82,7 @@ var $e = {
 		"./*": "./*/index.js"
 	},
 	dependencies: {
-		"@midas-ds/theme": "3.15.4",
+		"@midas-ds/theme": "3.15.5",
 		"@react-aria/focus": "^3.21.5",
 		"@react-stately/toggle": "^3.9.5",
 		"@react-stately/utils": "^3.11.0",

package/list-box/ListBox.d.ts

@@ -1,3 +1,6 @@
-import { ListBoxProps } from 'react-aria-components';
-export type { ListBoxProps };
-export declare const ListBox: <T extends object>({ className, children, ...rest }: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
+import { ListBoxProps as AriaListBoxProps } from 'react-aria-components';
+export interface ListBoxProps<T extends object> extends AriaListBoxProps<T> {
+    /** @default true */
+    virtualized?: boolean;
+}
+export declare const ListBox: <T extends object>({ className, children, virtualized, ...rest }: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;

package/list-box/ListBox.stories.d.ts

@@ -3,7 +3,7 @@ import { Fruit } from '../../../../tools/test-utils/src/index.ts';
 import { ListBox } from './ListBox';
 type Story = StoryObj<typeof ListBox<Fruit>>;
 declare const _default: {
-    component: <T extends object>({ className, children, ...rest }: import('react-aria-components').ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
+    component: <T extends object>({ className, children, virtualized, ...rest }: import('./ListBox').ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
     subcomponents: {
         ListBoxItem: <T extends object>({ children, className, textValue, ...rest }: import('react-aria-components').ListBoxItemProps<T>) => import("react/jsx-runtime").JSX.Element;
     };
@@ -20,3 +20,4 @@ declare const _default: {
 };
 export default _default;
 export declare const SelectionModeSingle: Story;
+export declare const NotVirtualized: Story;

package/list-box/index.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../chunks/list-box-BozMU8so.js";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "../chunks/list-box-DvX6VTa1.js";
 export { t as ListBox, o as ListBoxButton, s as ListBoxEmptyState, r as ListBoxHeader, i as ListBoxItem, a as ListBoxLoadMoreItem, e as ListBoxPopover, n as ListBoxSection };

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "17.17.3",
+  "version": "17.19.0",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",
@@ -41,7 +41,7 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@midas-ds/theme": "3.15.4",
+    "@midas-ds/theme": "3.15.5",
     "@react-aria/focus": "^3.21.5",
     "@react-stately/toggle": "^3.9.5",
     "@react-stately/utils": "^3.11.0",

package/select/Select.d.ts

@@ -1,6 +1,7 @@
 import { SelectProps, ValidationResult } from 'react-aria-components';
 import { InfoPopoverProps } from '../label';
 import { Size } from '../common/types';
+import { ListBoxProps } from '../list-box';
 import { Popover } from '../popover';
 import * as React from 'react';
 export type SelectionMode = 'single' | 'multiple';
@@ -35,5 +36,9 @@ export interface MidasSelectProps<T extends object, M extends SelectionMode = 's
      * Props passed to the internal Popover element.
      */
     popoverProps?: Omit<React.ComponentProps<typeof Popover>, 'children'>;
+    /**
+     * Props passed to the internal ListBox element.
+     */
+    listBoxProps?: Omit<ListBoxProps<T>, 'items' | 'children'>;
 }
-export declare function Select<T extends object, M extends SelectionMode = 'single'>({ children, description, errorMessage, errorPosition, items, label, popover, popoverProps, size, ...props }: MidasSelectProps<T, M>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<T extends object, M extends SelectionMode = 'single'>({ children, description, errorMessage, errorPosition, items, label, popover, popoverProps, listBoxProps, size, ...props }: MidasSelectProps<T, M>): import("react/jsx-runtime").JSX.Element;

package/select/Select.stories.d.ts

@@ -41,6 +41,7 @@ export declare const WithTags: Story<Item, 'multiple'>;
 export declare const SelectAllEnabled: Story<Item, 'multiple'>;
 export declare const DS872: Story;
 export declare const StaticSections: Story;
+export declare const NotVirtualized: Story;
 export declare const DynamicSections: Story<Section>;
 export declare const RequiredMultipleWithTags: Story<Item, 'multiple'>;
 export declare const RequiredMultipleWithClearAll: Story<Item, 'multiple'>;

package/select/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/select-iEvRNP3W.js";
+import { t as e } from "../chunks/select-DneAUko_.js";
 export { e as Select };

package/table/Table.stories.d.ts

@@ -28,4 +28,5 @@ export declare const Primary: Story;
 export declare const Striped: Story;
 export declare const Virtualized: Story;
 export declare const StripedWithLink: Story;
+export declare const InteractiveCells: Story;
 export declare const Sorting: Story;

package/table/index.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/table-lU-UeRjC.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/table-jarDZ4q4.js";
 export { a as Cell, n as Column, i as Row, t as Table, e as TableBody, r as TableHeader };

package/textfield/TextArea.stories.d.ts

@@ -28,10 +28,8 @@ export declare const Disabled: {
         isDisabled: boolean;
         size?: import('..').Size;
         children?: import('react').ReactNode;
-        style?: (import('react').CSSProperties | ((values: import('react-aria-components').TextFieldRenderProps & {
-            defaultStyle: import('react').CSSProperties;
-        }) => import('react').CSSProperties | undefined)) | undefined;
-        render?: ((props: import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, renderProps: import('react-aria-components').TextFieldRenderProps) => import('react').ReactElement) | undefined;
+        style?: import('react-aria-components').StyleOrFunction<import('react-aria-components').TextFieldRenderProps> | undefined;
+        render?: import('react-aria-components').DOMRenderFunction<"div", import('react-aria-components').TextFieldRenderProps> | undefined;
         id?: string;
         dir?: string | undefined;
         lang?: string | undefined;
@@ -115,20 +113,20 @@ export declare const Disabled: {
         'aria-haspopup'?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog";
         'aria-label'?: string;
         'aria-labelledby'?: string;
-        onCopy?: import('react').ClipboardEventHandler<HTMLInputElement>;
-        onCut?: import('react').ClipboardEventHandler<HTMLInputElement>;
-        onPaste?: import('react').ClipboardEventHandler<HTMLInputElement>;
-        onCompositionEnd?: import('react').CompositionEventHandler<HTMLInputElement>;
-        onCompositionStart?: import('react').CompositionEventHandler<HTMLInputElement>;
-        onCompositionUpdate?: import('react').CompositionEventHandler<HTMLInputElement>;
+        onCopy?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCut?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
+        onPaste?: import('react').ClipboardEventHandler<HTMLInputElement> | undefined;
+        onCompositionEnd?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionStart?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
+        onCompositionUpdate?: import('react').CompositionEventHandler<HTMLInputElement> | undefined;
         onFocus?: ((e: import('react').FocusEvent<HTMLInputElement, Element>) => void) | undefined;
         onBlur?: ((e: import('react').FocusEvent<HTMLInputElement, Element>) => void) | undefined;
         onChange?: ((value: string) => void) | undefined;
-        onBeforeInput?: import('react').FormEventHandler<HTMLInputElement>;
-        onInput?: import('react').FormEventHandler<HTMLInputElement>;
+        onBeforeInput?: import('react').FormEventHandler<HTMLInputElement> | undefined;
+        onInput?: import('react').FormEventHandler<HTMLInputElement> | undefined;
         onKeyDown?: (e: import('@react-types/shared').KeyboardEvent) => void;
         onKeyUp?: (e: import('@react-types/shared').KeyboardEvent) => void;
-        onSelect?: import('react').ReactEventHandler<HTMLInputElement>;
+        onSelect?: import('react').ReactEventHandler<HTMLInputElement> | undefined;
         autoFocus?: boolean;
         onFocusChange?: (isFocused: boolean) => void;
         excludeFromTabOrder?: boolean;
@@ -151,9 +149,7 @@ export declare const Disabled: {
         validate?: ((value: string) => import('@react-types/shared').ValidationError | true | null | undefined) | undefined;
         errorPosition?: "top" | "bottom";
         showCounter?: boolean;
-        className?: string | ((values: import('react-aria-components').InputRenderProps & {
-            defaultClassName: string | undefined;
-        }) => string);
+        className?: import('react-aria-components').ClassNameOrFunction<import('react-aria-components').InputRenderProps>;
         color?: string | undefined;
         role?: import('react').AriaRole | undefined;
         suppressHydrationWarning?: boolean | undefined;

package/time-field/TimeField.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { TimeField } from './TimeField';
 type Story = StoryObj<typeof TimeField>;
 declare const _default: {
-    component: <T extends import('react-aria').TimeValue>(props: import('./TimeField').TimeFieldProps<T> & {
+    component: <T extends import('react-aria-components').TimeValue>(props: import('./TimeField').TimeFieldProps<T> & {
         ref?: React.Ref<HTMLDivElement>;
     }) => React.ReactElement | null;
     title: string;

package/time-field/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../chunks/time-field-BROZiten.js";
+import { t as e } from "../chunks/time-field-Dv9xYdex.js";
 export { e as TimeField };

package/chunks/date-picker-C9KL-4Lj.js

@@ -1,191 +0,0 @@
-'use client';
-import { n as e } from "./clsx-BtlV5Vo3.js";
-import { t } from "./createLucideIcon-DhIhuN5D.js";
-import { n, t as r } from "./calendar-C0rlcHfr.js";
-import { t as i } from "./useLocalizedStringFormatter-bRLuRzVD.js";
-import { n as a } from "./button-CFjf-bDe.js";
-import { t as o } from "./text-mAeDlv5N.js";
-import { t as s } from "./field-error-DYp2kgFr.js";
-import { n as c, t as l } from "./label-Bius53F0.js";
-import { t as u } from "./clear-button-Cb4MTvBR.js";
-import { n as d, r as f, t as p } from "./date-field-U4owDpGF.js";
-import * as m from "react";
-import { DatePicker as h, DatePickerStateContext as g, DateRangePicker as _, DateRangePickerStateContext as v, Dialog as y, Group as b, Popover as x } from "react-aria-components";
-import { jsx as S, jsxs as C } from "react/jsx-runtime";
-import { FocusScope as w, useFocusManager as T } from "@react-aria/focus";
-import '../assets/date-picker.css';var E = t("calendar-days", [
-	["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"
-	}]
-]), D = {
-	en: {
-		clear: "Clear date",
-		"open-calendar": "Open calendar"
-	},
-	sv: {
-		clear: "Rensa datum",
-		"open-calendar": "Öppna kalender"
-	}
-}, O = {
-	datePicker: "_datePicker_feay3_1",
-	inputField: "_inputField_feay3_8",
-	medium: "_medium_feay3_24",
-	readOnly: "_readOnly_feay3_47",
-	buttonGroup: "_buttonGroup_feay3_52",
-	iconButton: "_iconButton_feay3_58",
-	popover: "_popover_feay3_81 _dropdownAnimation_1ljkv_4",
-	dialog: "_dialog_feay3_85"
-}, k = (e) => !!e && !!e.value && Object.prototype.hasOwnProperty.call(e.value, "start"), A = ({ isClearable: t, isDisabled: n, isReadOnly: r, size: a }) => {
-	let o = m.useContext(g), s = m.useContext(v), c = i(D), l = T(), d = s ?? o, f = k(d) ? !!d.value.start && d.value.end : !!d?.value;
-	return t && f && !r ? /* @__PURE__ */ S(u, {
-		onPress: () => {
-			d?.setValue(null), l?.focusFirst();
-		},
-		size: a,
-		isDisabled: n,
-		"aria-label": c.format("clear"),
-		className: e(O.iconButton, { [O.medium]: a === "medium" })
-	}) : null;
-}, j = ({ children: t, isDisabled: n, isInvalid: r, isReadOnly: o, size: s = "large", isClearable: c = !1 }) => {
-	let l = i(D);
-	return /* @__PURE__ */ S(b, {
-		className: e(O.inputField, {
-			[O.medium]: s === "medium",
-			[O.readOnly]: o
-		}),
-		children: /* @__PURE__ */ C(w, { children: [t, /* @__PURE__ */ C("div", {
-			className: O.buttonGroup,
-			children: [/* @__PURE__ */ S(A, {
-				isClearable: c,
-				isDisabled: n,
-				isReadOnly: o,
-				size: s
-			}), /* @__PURE__ */ S(a, {
-				variant: "icon",
-				"aria-label": l.format("open-calendar"),
-				className: e(O.iconButton, {
-					[O.medium]: s === "medium",
-					[O.readOnly]: o
-				}),
-				"data-invalid": r || void 0,
-				size: s,
-				children: /* @__PURE__ */ S(E, {
-					"aria-hidden": !0,
-					size: 20
-				})
-			})]
-		})] })
-	});
-}, M = ({ children: e }) => /* @__PURE__ */ S(x, {
-	className: O.popover,
-	children: /* @__PURE__ */ S(y, {
-		className: O.dialog,
-		children: e
-	})
-}), N = m.forwardRef(({ className: t, description: r, errorMessage: i, errorPosition: a = "top", label: u, popover: p, isClearable: m = !1, isReadOnly: g, isDisabled: _, size: v, ...y }, b) => /* @__PURE__ */ C(h, {
-	className: e(O.datePicker, t),
-	isReadOnly: g,
-	isDisabled: _,
-	ref: b,
-	...y,
-	children: [
-		/* @__PURE__ */ S(c, {
-			popover: p,
-			children: u && /* @__PURE__ */ S(l, { children: u })
-		}),
-		r && /* @__PURE__ */ S(o, {
-			slot: "description",
-			children: r
-		}),
-		a === "top" && /* @__PURE__ */ S(s, { children: i }),
-		/* @__PURE__ */ S(j, {
-			isClearable: m,
-			isReadOnly: g,
-			isDisabled: _,
-			size: v,
-			...y,
-			children: /* @__PURE__ */ S(d, { children: (e) => /* @__PURE__ */ S(f, { segment: e }) })
-		}),
-		a === "bottom" && /* @__PURE__ */ S(s, { children: i }),
-		/* @__PURE__ */ S(M, { children: /* @__PURE__ */ S(n, {}) })
-	]
-})), P = ({ className: t, description: n, errorMessage: i, errorPosition: a = "top", label: u, popover: m, isClearable: h = !1, isReadOnly: g, isDisabled: v, size: y, ...b }) => /* @__PURE__ */ C(_, {
-	className: e(O.datePicker, t),
-	isReadOnly: g,
-	isDisabled: v,
-	...b,
-	children: [
-		/* @__PURE__ */ S(c, {
-			popover: m,
-			children: u && /* @__PURE__ */ S(l, { children: u })
-		}),
-		n && /* @__PURE__ */ S(o, {
-			slot: "description",
-			children: n
-		}),
-		a === "top" && /* @__PURE__ */ S(s, { children: i }),
-		/* @__PURE__ */ C(j, {
-			isClearable: h,
-			isReadOnly: g,
-			isDisabled: v,
-			size: y,
-			...b,
-			children: [
-				/* @__PURE__ */ S(d, {
-					slot: "start",
-					children: (e) => /* @__PURE__ */ S(f, { segment: e })
-				}),
-				/* @__PURE__ */ S(p, {}),
-				/* @__PURE__ */ S(d, {
-					slot: "end",
-					children: (e) => /* @__PURE__ */ S(f, { segment: e })
-				})
-			]
-		}),
-		a === "bottom" && /* @__PURE__ */ S(s, { children: i }),
-		/* @__PURE__ */ S(M, { children: /* @__PURE__ */ S(r, {}) })
-	]
-});
-//#endregion
-export { N as n, P as t };