@midas-ds/components 17.0.2 โ†’ 17.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/assets/ComboBox.css +1 -1
  3. package/assets/ListBoxEmptyState.css +1 -0
  4. package/assets/TagGroup.css +1 -0
  5. package/assets/default.css +1 -1
  6. package/chunks/ComboBox-DnqZjAqe.js +102 -0
  7. package/chunks/ListBoxEmptyState-_Cn38cQ6.js +30 -0
  8. package/chunks/{Select-CzmgPK8V.js โ†’ Select-D7JfpIUT.js} +6 -6
  9. package/chunks/TagGroup-CWe0P76-.js +97 -0
  10. package/combobox/ComboBox.d.ts +3 -1
  11. package/combobox/index.js +1 -1
  12. package/index.js +65 -63
  13. package/list-box/ListBox.d.ts +2 -2
  14. package/list-box/index.d.ts +1 -0
  15. package/list-box/index.js +7 -6
  16. package/list-box/list-box-empty-state/ListBoxEmptyState.d.ts +2 -0
  17. package/list-box/list-box-empty-state/index.d.ts +1 -0
  18. package/package.json +2 -2
  19. package/select/index.js +1 -1
  20. package/tag/Tag.d.ts +17 -8
  21. package/tag/Tag.stories.d.ts +5 -1
  22. package/tag/index.d.ts +3 -1
  23. package/tag/index.js +4 -3
  24. package/tag/tag-group/TagGroup.d.ts +3 -0
  25. package/tag/tag-group/index.d.ts +1 -0
  26. package/tag/tag-list/TagList.d.ts +5 -0
  27. package/tag/tag-list/index.d.ts +1 -0
  28. package/assets/Tag.css +0 -1
  29. package/chunks/ComboBox-XaJDIr5h.js +0 -101
  30. package/chunks/ListBoxPopover-DOmhA5xx.js +0 -20
  31. package/chunks/Tag-C7VZ0T0o.js +0 -53
package/CHANGELOG.md CHANGED
@@ -1,3 +1,46 @@
1
+ ## 17.2.0 (2026-02-18)
2
+
3
+ ### ๐Ÿš€ Features
4
+
5
+ - **components, tag:** deprecate dismissable prop ([228210703b](https://github.com/migrationsverket/midas/commit/228210703b))
6
+ - **components, tag:** add color prop ([85ed37965d](https://github.com/migrationsverket/midas/commit/85ed37965d))
7
+
8
+ ### ๐Ÿฉน Fixes
9
+
10
+ - **components, tag:** replace color tokens ([311347b851](https://github.com/migrationsverket/midas/commit/311347b851))
11
+
12
+ ### ๐Ÿญ Refactoring
13
+
14
+ - **components,tag:** use tag-scoped tokens instead of support tokens ([60a549a2f0](https://github.com/migrationsverket/midas/commit/60a549a2f0))
15
+
16
+ ### ๐Ÿ“– Documentation changes
17
+
18
+ - **components, tag:** add stories for color variants ([d80920757c](https://github.com/migrationsverket/midas/commit/d80920757c))
19
+
20
+ ### ๐Ÿ”ง Maintenance
21
+
22
+ - **components, tag:** add deprecation comment for lint tracking ([fa1dbcb0b0](https://github.com/migrationsverket/midas/commit/fa1dbcb0b0))
23
+
24
+ ### ๐Ÿงช Tests updated
25
+
26
+ - **components, tag:** add test for deprecated dismissable prop ([efa39bfb4a](https://github.com/migrationsverket/midas/commit/efa39bfb4a))
27
+ - **components, tag:** typos ([18ff479ba3](https://github.com/migrationsverket/midas/commit/18ff479ba3))
28
+
29
+ ### ๐Ÿงฑ Updated Dependencies
30
+
31
+ - Updated theme to 3.11.0
32
+
33
+ ## 17.1.0 (2026-02-18)
34
+
35
+ ### ๐Ÿš€ Features
36
+
37
+ - **components, combobox:** add new prop listBoxProps ([#1061](https://github.com/migrationsverket/midas/pull/1061))
38
+
39
+ ### ๐Ÿงช Tests updated
40
+
41
+ - **components:** setup custom render wrapper ([527bc0edf4](https://github.com/migrationsverket/midas/commit/527bc0edf4))
42
+ - **components:** make browser tests pass in headed Playwright mode ([22e76b8727](https://github.com/migrationsverket/midas/commit/22e76b8727))
43
+
1
44
  ## 17.0.2 (2026-02-17)
2
45
 
3
46
  ### ๐Ÿฉน Fixes
package/assets/ComboBox.css CHANGED
@@ -1 +1 @@
1
- ._combobox_1m9te_1{font-family:var(--midas-typography-font-family);display:flex;flex-direction:column}._combobox_1m9te_1[data-invalid] ._inputField_1m9te_6{border:.125rem solid var(--midas-support-border-warning)}._inputField_1m9te_6{box-sizing:border-box;width:-webkit-fill-available;padding-left:1rem;border:none;border-bottom:1px solid var(--midas-border-color-primary);border-radius:0;font-size:1rem;color:var(--midas-text-primary);height:var(--midas-size-150);background-color:var(--midas-field-01-base)}@media(forced-colors:active){._inputField_1m9te_6{border:1px solid}}._inputField_1m9te_6._medium_1m9te_27{height:var(--midas-size-130)}._inputField_1m9te_6[data-hovered],._inputField_1m9te_6:has(+[data-hovered]){background-color:var(--midas-field-01-hover)}._inputField_1m9te_6::placeholder{color:var(--midas-text-placeholder)}._inputField_1m9te_6:focus-visible,._inputField_1m9te_6[data-focus-visible]{outline:none}._inputField_1m9te_6[data-focused],._inputField_1m9te_6[data-focus-visible]{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._inputField_1m9te_6[data-focused],._inputField_1m9te_6[data-focus-visible]{outline:3px solid highlight;outline-offset:2px}}._inputField_1m9te_6[data-disabled]{color:var(--midas-text-disabled);background:var(--midas-field-disabled);box-shadow:none;border-bottom:.063rem solid var(--midas-border-color-disabled);cursor:not-allowed}._inputField_1m9te_6[data-readonly]{background-color:transparent;border-color:var(--midas-border-color-subtle)}._inputField_1m9te_6[data-readonly][data-focused],._inputField_1m9te_6[data-readonly][data-focus-visible]{box-shadow:none}._text_1m9te_74{font-size:.875rem;margin-bottom:.5rem}._wrap_1m9te_79{grid-area:Input;position:relative;gap:.5rem}._button_1m9te_85{display:flex;align-items:center;border:none;padding:var(--midas-size-70);color:var(--midas-icon-primary);background-color:transparent;position:absolute;top:0;right:0;height:var(--midas-size-150);transition:transform .3s ease}._button_1m9te_85._medium_1m9te_27{height:var(--midas-size-130);padding:var(--midas-size-50) var(--midas-size-70)}._button_1m9te_85[aria-expanded=true]{transform:rotate(180deg)}._button_1m9te_85[data-disabled]{cursor:not-allowed;color:var(--midas-icon-disabled)}[data-readonly] ._button_1m9te_85[data-disabled]{color:var(--midas-icon-read-only)}._button_1m9te_85[data-hovered]{cursor:pointer}._icon_1m9te_121{display:flex;align-items:center;transition:transform .3s ease}span._emptyState_1m9te_127{display:block;line-height:var(--midas-typography-line-height-30);padding:var(--midas-size-80) var(--midas-size-80) var(--midas-size-60) var(--midas-size-80)}@media(prefers-reduced-motion){._button_1m9te_85,._icon_1m9te_121{transition:none}}
1
+ ._combobox_1awtk_1{font-family:var(--midas-typography-font-family);display:flex;flex-direction:column}._combobox_1awtk_1[data-invalid] ._inputField_1awtk_6{border:.125rem solid var(--midas-support-border-warning)}._inputField_1awtk_6{box-sizing:border-box;width:-webkit-fill-available;padding-left:1rem;border:none;border-bottom:1px solid var(--midas-border-color-primary);border-radius:0;font-size:1rem;color:var(--midas-text-primary);height:var(--midas-size-150);background-color:var(--midas-field-01-base)}@media(forced-colors:active){._inputField_1awtk_6{border:1px solid}}._inputField_1awtk_6._medium_1awtk_27{height:var(--midas-size-130)}._inputField_1awtk_6[data-hovered],._inputField_1awtk_6:has(+[data-hovered]){background-color:var(--midas-field-01-hover)}._inputField_1awtk_6::placeholder{color:var(--midas-text-placeholder)}._inputField_1awtk_6:focus-visible,._inputField_1awtk_6[data-focus-visible]{outline:none}._inputField_1awtk_6[data-focused],._inputField_1awtk_6[data-focus-visible]{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._inputField_1awtk_6[data-focused],._inputField_1awtk_6[data-focus-visible]{outline:3px solid highlight;outline-offset:2px}}._inputField_1awtk_6[data-disabled]{color:var(--midas-text-disabled);background:var(--midas-field-disabled);box-shadow:none;border-bottom:.063rem solid var(--midas-border-color-disabled);cursor:not-allowed}._inputField_1awtk_6[data-readonly]{background-color:transparent;border-color:var(--midas-border-color-subtle)}._inputField_1awtk_6[data-readonly][data-focused],._inputField_1awtk_6[data-readonly][data-focus-visible]{box-shadow:none}._text_1awtk_74{font-size:.875rem;margin-bottom:.5rem}._wrap_1awtk_79{grid-area:Input;position:relative;gap:.5rem}._button_1awtk_85{display:flex;align-items:center;border:none;padding:var(--midas-size-70);color:var(--midas-icon-primary);background-color:transparent;position:absolute;top:0;right:0;height:var(--midas-size-150);transition:transform .3s ease}._button_1awtk_85._medium_1awtk_27{height:var(--midas-size-130);padding:var(--midas-size-50) var(--midas-size-70)}._button_1awtk_85[aria-expanded=true]{transform:rotate(180deg)}._button_1awtk_85[data-disabled]{cursor:not-allowed;color:var(--midas-icon-disabled)}[data-readonly] ._button_1awtk_85[data-disabled]{color:var(--midas-icon-read-only)}._button_1awtk_85[data-hovered]{cursor:pointer}._icon_1awtk_121{display:flex;align-items:center;transition:transform .3s ease}@media(prefers-reduced-motion){._button_1awtk_85,._icon_1awtk_121{transition:none}}
package/assets/ListBoxEmptyState.css ADDED
@@ -0,0 +1 @@
1
+ ._listBoxEmptyState_18j20_1{display:block;line-height:var(--midas-typography-line-height-30);padding:var(--midas-size-80) var(--midas-size-80) var(--midas-size-60) var(--midas-size-80)}
package/assets/TagGroup.css ADDED
@@ -0,0 +1 @@
1
+ ._button_137b0_1{color:var(--midas-icon-primary);min-height:unset!important;padding:var(--midas-size-20)!important;border-radius:1.5rem;border:unset}._button_137b0_1[data-hovered]{background-color:var(--midas-button-icon-hover)}._button_137b0_1[data-pressed]{background-color:var(--midas-button-icon-active)}._button_137b0_1._green_137b0_16[data-hovered],._button_137b0_1._red_137b0_17[data-hovered],._button_137b0_1._blue_137b0_18[data-hovered],._button_137b0_1._yellow_137b0_19[data-hovered]{background-color:var(--midas-button-icon-hover)}._button_137b0_1._green_137b0_16[data-pressed],._button_137b0_1._red_137b0_17[data-pressed],._button_137b0_1._blue_137b0_18[data-pressed],._button_137b0_1._yellow_137b0_19[data-pressed]{background-color:var(--midas-button-icon-active)}._tag_137b0_31{display:inline-flex;align-items:center;border-radius:1.25rem;background-color:var(--midas-field-01-base);font-size:.875rem;font-family:var(--midas-typography-font-family);border:1px solid var(--midas-border-color-primary);color:var(--midas-text-primary)}._tag_137b0_31._green_137b0_16{background-color:var(--midas-tag-green-background);border:1px solid var(--midas-tag-green-border-color)}._tag_137b0_31._blue_137b0_18{background-color:var(--midas-tag-blue-background);border:1px solid var(--midas-tag-blue-border-color)}._tag_137b0_31._yellow_137b0_19{background-color:var(--midas-tag-yellow-background);border:1px solid var(--midas-tag-yellow-border-color)}._tag_137b0_31._red_137b0_17{background-color:var(--midas-tag-red-background);border:1px solid var(--midas-tag-red-border-color)}._tag_137b0_31[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed;border-color:var(--midas-border-color-disabled);background-color:var(--midas-field-01-base)}._tag_137b0_31[data-focused],._tag_137b0_31[data-focus-visible]{outline:none}._tag_137b0_31[data-focus-visible]{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._tag_137b0_31[data-focus-visible]{outline:3px solid highlight;outline-offset:2px}}._tagText_137b0_83{line-height:1.15;padding:7px var(--midas-size-40)}._dismissable_137b0_88 ._tagText_137b0_83{padding:7px var(--midas-size-10) 7px var(--midas-size-40)}._tagList_uoyyb_1{display:flex;flex-wrap:wrap;gap:var(--midas-spacing-20)}
package/assets/default.css CHANGED
@@ -1 +1 @@
1
- :root{--midas-window-sizes-sm: 480px;--midas-window-sizes-md: 768px;--midas-window-sizes-lg: 1024px;--midas-window-sizes-xl: 1280px;--midas-button-background-secondary-base: transparent;--midas-button-icon-active: light-dark(#00000033, #ffffff33);--midas-color-black-base: #000000;--midas-color-black-hover: #0d0d0d;--midas-color-black-opacity5: rgba(0, 0, 0, .05);--midas-color-white-base: #ffffff;--midas-color-white-hover: #e6e6e6;--midas-color-white-opacity13: rgba(255, 255, 255, .13);--midas-color-gray-10: #f2f2f2;--midas-color-gray-20: #e6e6e6;--midas-color-gray-30: #d9d9d9;--midas-color-gray-40: #cccccc;--midas-color-gray-50: #bfbfbf;--midas-color-gray-60: #b3b3b3;--midas-color-gray-70: #a6a6a6;--midas-color-gray-80: #999999;--midas-color-gray-90: #8c8c8c;--midas-color-gray-100: #808080;--midas-color-gray-110: #737373;--midas-color-gray-120: #666666;--midas-color-gray-130: #5d5d5d;--midas-color-gray-140: #525252;--midas-color-gray-150: #474747;--midas-color-gray-160: #383838;--midas-color-gray-170: #333333;--midas-color-gray-180: #262626;--midas-color-gray-190: #212121;--midas-color-gray-200: #171717;--midas-color-blue-10: #eaf2f6;--midas-color-blue-20: #d5e5ed;--midas-color-blue-40: #abcbdb;--midas-color-blue-50: #94bcd1;--midas-color-blue-60: #82b0c9;--midas-color-blue-70: #6ca3c0;--midas-color-blue-80: #5897b8;--midas-color-blue-90: #4289ad;--midas-color-blue-100: #2e7ca5;--midas-color-blue-110: #2c7399;--midas-color-blue-120: #29698c;--midas-color-blue-130: #25607f;--midas-color-blue-150: #143c50;--midas-color-purple-80: #b46ab4;--midas-color-purple-110: #954b95;--midas-color-red-100: #b90835;--midas-color-orange-100: oklch(.66 .18 45);--midas-color-signal-blue-10: #eaf2f6;--midas-color-signal-blue-20: #d5e5ed;--midas-color-signal-blue-100: #0066cc;--midas-color-signal-blue-170: #162b33;--midas-color-signal-blue-180: #112127;--midas-color-signal-green-20: #d5f2d9;--midas-color-signal-green-30: #bae5c5;--midas-color-signal-green-100: #008d3c;--midas-color-signal-green-150: #194b33;--midas-color-signal-green-170: #163328;--midas-color-signal-green-180: #112722;--midas-color-signal-yellow-10: #fff8e2;--midas-color-signal-yellow-20: #fff1cd;--midas-color-signal-yellow-30: #ffeab8;--midas-color-signal-yellow-40: #ffe3a3;--midas-color-signal-yellow-50: #ffdc8b;--midas-color-signal-yellow-60: #ffd47b;--midas-color-signal-yellow-70: #fdcd5d;--midas-color-signal-yellow-80: #fbc640;--midas-color-signal-yellow-90: #fabf1b;--midas-color-signal-yellow-100: #fab900;--midas-color-signal-yellow-110: #daa105;--midas-color-signal-yellow-120: #bd8c1e;--midas-color-signal-yellow-130: #a17927;--midas-color-signal-yellow-140: #88672a;--midas-color-signal-yellow-150: #70562b;--midas-color-signal-yellow-160: #5a4629;--midas-color-signal-yellow-170: #453826;--midas-color-signal-yellow-180: #322a20;--midas-color-signal-yellow-190: #201c18;--midas-color-signal-yellow-200: #0f0e0e;--midas-color-signal-red-10: #ffefef;--midas-color-signal-red-20: #ffdfdf;--midas-color-signal-red-30: #fcc8c8;--midas-color-signal-red-40: #f9b0b0;--midas-color-signal-red-50: #f69999;--midas-color-signal-red-60: #f38181;--midas-color-signal-red-70: #ef6a6a;--midas-color-signal-red-80: #ec5252;--midas-color-signal-red-90: #e93b3b;--midas-color-signal-red-100: #e62323;--midas-color-signal-red-110: #d12020;--midas-color-signal-red-120: #bc1d1d;--midas-color-signal-red-130: #a71919;--midas-color-signal-red-140: #921616;--midas-color-signal-red-150: #7d1313;--midas-color-signal-red-160: #691010;--midas-color-signal-red-170: #540d0d;--midas-color-signal-red-180: #3f0a0a;--midas-color-signal-red-190: #2a0606;--midas-color-signal-red-200: #150303;--midas-border-width: 1px;--midas-calendar-date-background-hover: light-dark(#0000001a, #ffffff1a);--midas-size-10: .125rem;--midas-size-15: .188rem;--midas-size-20: .25rem;--midas-size-30: .375rem;--midas-size-40: .5rem;--midas-size-50: .625rem;--midas-size-60: .75rem;--midas-size-70: .875rem;--midas-size-75: .938rem;--midas-size-80: 1rem;--midas-size-90: 1.25rem;--midas-size-100: 1.5rem;--midas-size-110: 1.75rem;--midas-size-120: 2rem;--midas-size-130: 2.5rem;--midas-size-140: 2.75rem;--midas-size-150: 3rem;--midas-size-00: 0rem;--midas-size-05: .063rem;--midas-spacing-10: .125rem;--midas-spacing-20: .25rem;--midas-spacing-30: .5rem;--midas-spacing-40: .75rem;--midas-spacing-50: 1rem;--midas-spacing-60: 1.5rem;--midas-spacing-70: 2rem;--midas-spacing-80: 2.5rem;--midas-spacing-90: 3rem;--midas-spacing-100: 4rem;--midas-spacing-110: 5rem;--midas-spacing-120: 6rem;--midas-state-focus: 0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white);--midas-state-focus-inset: inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black);--midas-state-focus-contrast-mode-outline: 2px;--midas-state-focus-contrast-mode-offset: 2px;--midas-transition-duration-slow: .5s;--midas-transition-duration-normal: .3s;--midas-transition-duration-fast: .25s;--midas-transition-timing-ease-out: cubic-bezier(0, 0, .58, 1);--midas-transition-timing-ease-in: cubic-bezier(.42, 0, 1, 1);--midas-typography-font-family: Inter, sans-serif;--midas-typography-font-size-10: .75rem;--midas-typography-font-size-20: .875rem;--midas-typography-font-size-30: 1rem;--midas-typography-font-size-40: 1.125rem;--midas-typography-font-size-50: 1.25rem;--midas-typography-font-size-60: 1.5rem;--midas-typography-font-size-70: 1.625rem;--midas-typography-font-size-80: 2rem;--midas-typography-font-size-90: 2.25rem;--midas-typography-font-size-100: 2.625rem;--midas-typography-line-height-10: 1rem;--midas-typography-line-height-20: 1.125rem;--midas-typography-line-height-30: 1.25rem;--midas-typography-line-height-40: 1.375rem;--midas-typography-line-height-50: 1.5rem;--midas-typography-line-height-60: 1.75rem;--midas-typography-line-height-70: 2rem;--midas-typography-line-height-80: 2.25rem;--midas-typography-line-height-90: 2.5rem;--midas-typography-line-height-100: 3rem;--midas-typography-weight-thin: 100;--midas-typography-weight-extra-light: 200;--midas-typography-weight-light: 300;--midas-typography-weight-regular: 400;--midas-typography-weight-medium: 500;--midas-typography-weight-semi-bold: 600;--midas-typography-weight-bold: 700;--midas-typography-weight-extra-bold: 800;--midas-typography-weight-black: 900;--midas-z-index-base: 1;--midas-z-index-above: 10;--midas-z-index-sidebar: 500;--midas-z-index-modal: 1000;--midas-z-index-toast: 1100;--midas-z-index-skip-to-content: 1200;--midas-breakpoints-xs: (max-width: calc(var(--midas-window-sizes-sm) - 1px));--midas-breakpoints-sm: (min-width: var(--midas-window-sizes-sm));--midas-breakpoints-md: (min-width: var(--midas-window-sizes-md));--midas-breakpoints-lg: (min-width: var(--midas-window-sizes-lg));--midas-breakpoints-xl: (min-width: var(--midas-window-sizes-xl));--midas-button-background-primary-base: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-100));--midas-button-background-primary-hover: light-dark(var(--midas-color-blue-130), var(--midas-color-blue-130));--midas-button-background-primary-active: light-dark(var(--midas-color-blue-100), var(--midas-color-blue-150));--midas-button-background-secondary-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--midas-button-background-secondary-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-180));--midas-button-background-tertiary-hover: light-dark(var(--midas-color-black-opacity5), var(--midas-color-white-opacity13));--midas-button-background-tertiary-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-180));--midas-button-background-danger-base: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-button-background-danger-hover: light-dark(var(--midas-color-signal-red-120), var(--midas-color-signal-red-120));--midas-button-background-danger-active: light-dark(var(--midas-color-signal-red-150), var(--midas-color-signal-red-150));--midas-button-background-disabled: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-button-border-secondary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-button-icon-hover: light-dark(var(--midas-color-black-opacity5), var(--midas-color-white-opacity13));--midas-background-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-background-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--midas-background-inverse: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-layer-01-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-layer-01-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-layer-01-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-layer-01-selected-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-150));--midas-layer-02-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-160));--midas-layer-02-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-150));--midas-layer-02-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-140));--midas-layer-02-selected-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-130));--midas-layer-accent-01-base: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-layer-accent-01-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-150));--midas-layer-accent-01-selected: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-layer-accent-02-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-layer-accent-02-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-layer-accent-02-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-brand-primary: light-dark(var(--midas-color-red-100), var(--midas-color-red-100));--midas-border-color-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-border-color-secondary: light-dark(var(--midas-color-gray-110), var(--midas-color-gray-90));--midas-border-color-subtle: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-border-color-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-100));--midas-border-color-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-field-01-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-field-01-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-field-01-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-field-02-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-160));--midas-field-02-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-150));--midas-field-02-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-140));--midas-field-disabled: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-skeleton-01: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-skeleton-02: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-icon-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-icon-secondary: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-icon-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-icon-inverse: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-icon-on-color: light-dark(var(--midas-color-white-base), var(--midas-color-white-base));--midas-icon-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-icon-success: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-icon-info: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-icon-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-icon-important: var(--midas-color-orange-100);--midas-icon-read-only: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-160));--midas-link-enabled: light-dark(var(--midas-color-blue-120), var(--midas-color-blue-70));--midas-link-hover: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-50));--midas-link-pressed: light-dark(var(--midas-color-gray-200), var(--midas-color-blue-40));--midas-link-visited: light-dark(var(--midas-color-purple-110), var(--midas-color-purple-80));--midas-support-border-success: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-support-border-info: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-support-border-important: var(--midas-color-orange-100);--midas-support-border-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-support-background-success: light-dark(var(--midas-color-signal-green-20), var(--midas-color-signal-green-180));--midas-support-background-success-hover: light-dark(var(--midas-color-signal-green-30), var(--midas-color-signal-green-170));--midas-support-background-info: light-dark(var(--midas-color-signal-blue-10), var(--midas-color-signal-blue-180));--midas-support-background-info-hover: light-dark(var(--midas-color-signal-blue-20), var(--midas-color-signal-blue-170));--midas-support-background-important: light-dark(var(--midas-color-signal-yellow-10), var(--midas-color-signal-yellow-180));--midas-support-background-important-hover: light-dark(var(--midas-color-signal-yellow-20), var(--midas-color-signal-yellow-170));--midas-support-background-warning: light-dark(var(--midas-color-signal-red-20), var(--midas-color-signal-red-180));--midas-support-background-warning-hover: light-dark(var(--midas-color-signal-red-30), var(--midas-color-signal-red-170));--midas-text-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-text-secondary: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-text-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-text-on-color: light-dark(var(--midas-color-white-base), var(--midas-color-white-base));--midas-text-inverse: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-200));--midas-text-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-text-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-80));--midas-text-placeholder: light-dark(var(--midas-color-gray-70), var(--midas-color-gray-140));--midas-text-read-only: light-dark(var(--midas-color-gray-110), var(--midas-color-gray-80));--midas-badge-background: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-calendar-date-background-selected: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-80));--midas-calendar-date-background-start-range: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-80));--midas-calendar-date-background-in-range: light-dark(var(--midas-color-blue-20), var(--midas-color-blue-150));--midas-calendar-date-background-end-range: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-80));--midas-logo-primary: light-dark(var(--midas-color-red-100), var(--midas-color-white-base));--midas-menu-item-background-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-190));--midas-menu-item-background-selected: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-menu-text-section-header: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-spacing-xsmall: var(--midas-size-20);--midas-spacing-small: var(--midas-size-40);--midas-spacing-medium: var(--midas-size-80);--midas-spacing-large: var(--midas-size-100);--midas-spacing-xlarge: var(--midas-size-120);--midas-transition-panel-collapse: var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-out) 0ms;--midas-transition-panel-expand: var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-in) 0ms;--midas-typography-body: var(--midas-typography-weight-regular) var(--midas-typography-font-size-30)/var(--midas-typography-line-height-30) var(--midas-typography-font-family);--midas-typography-body-small: var(--midas-typography-weight-regular) var(--midas-typography-font-size-20)/var(--midas-typography-line-height-20) var(--midas-typography-font-family);--midas-typography-description: var(--midas-typography-weight-regular) var(--midas-typography-font-size-20)/var(--midas-typography-line-height-20) var(--midas-typography-font-family);--midas-typography-description-small: var(--midas-typography-weight-regular) var(--midas-typography-font-size-10)/var(--midas-typography-line-height-10) var(--midas-typography-font-family);--midas-state-invalid: inset 0 0 0 2px var(--midas-support-border-warning)}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100 900;src:url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{color-scheme:light dark}
1
+ :root{--midas-window-sizes-sm: 480px;--midas-window-sizes-md: 768px;--midas-window-sizes-lg: 1024px;--midas-window-sizes-xl: 1280px;--midas-button-background-secondary-base: transparent;--midas-button-icon-active: light-dark(#00000033, #ffffff33);--midas-color-black-base: #000000;--midas-color-black-hover: #0d0d0d;--midas-color-black-opacity5: rgba(0, 0, 0, .05);--midas-color-white-base: #ffffff;--midas-color-white-hover: #e6e6e6;--midas-color-white-opacity13: rgba(255, 255, 255, .13);--midas-color-gray-10: #f2f2f2;--midas-color-gray-20: #e6e6e6;--midas-color-gray-30: #d9d9d9;--midas-color-gray-40: #cccccc;--midas-color-gray-50: #bfbfbf;--midas-color-gray-60: #b3b3b3;--midas-color-gray-70: #a6a6a6;--midas-color-gray-80: #999999;--midas-color-gray-90: #8c8c8c;--midas-color-gray-100: #808080;--midas-color-gray-110: #737373;--midas-color-gray-120: #666666;--midas-color-gray-130: #5d5d5d;--midas-color-gray-140: #525252;--midas-color-gray-150: #474747;--midas-color-gray-160: #383838;--midas-color-gray-170: #333333;--midas-color-gray-180: #262626;--midas-color-gray-190: #212121;--midas-color-gray-200: #171717;--midas-color-blue-10: #eaf2f6;--midas-color-blue-20: #d5e5ed;--midas-color-blue-40: #abcbdb;--midas-color-blue-50: #94bcd1;--midas-color-blue-60: #82b0c9;--midas-color-blue-70: #6ca3c0;--midas-color-blue-80: #5897b8;--midas-color-blue-90: #4289ad;--midas-color-blue-100: #2e7ca5;--midas-color-blue-110: #2c7399;--midas-color-blue-120: #29698c;--midas-color-blue-130: #25607f;--midas-color-blue-150: #143c50;--midas-color-purple-80: #b46ab4;--midas-color-purple-110: #954b95;--midas-color-red-100: #b90835;--midas-color-orange-100: oklch(.66 .18 45);--midas-color-signal-blue-10: #eaf2f6;--midas-color-signal-blue-20: #d5e5ed;--midas-color-signal-blue-100: #0066cc;--midas-color-signal-blue-170: #162b33;--midas-color-signal-blue-180: #112127;--midas-color-signal-green-20: #d5f2d9;--midas-color-signal-green-30: #bae5c5;--midas-color-signal-green-100: #008d3c;--midas-color-signal-green-150: #194b33;--midas-color-signal-green-170: #163328;--midas-color-signal-green-180: #112722;--midas-color-signal-yellow-10: #fff8e2;--midas-color-signal-yellow-20: #fff1cd;--midas-color-signal-yellow-30: #ffeab8;--midas-color-signal-yellow-40: #ffe3a3;--midas-color-signal-yellow-50: #ffdc8b;--midas-color-signal-yellow-60: #ffd47b;--midas-color-signal-yellow-70: #fdcd5d;--midas-color-signal-yellow-80: #fbc640;--midas-color-signal-yellow-90: #fabf1b;--midas-color-signal-yellow-100: #fab900;--midas-color-signal-yellow-110: #daa105;--midas-color-signal-yellow-120: #bd8c1e;--midas-color-signal-yellow-130: #a17927;--midas-color-signal-yellow-140: #88672a;--midas-color-signal-yellow-150: #70562b;--midas-color-signal-yellow-160: #5a4629;--midas-color-signal-yellow-170: #453826;--midas-color-signal-yellow-180: #322a20;--midas-color-signal-yellow-190: #201c18;--midas-color-signal-yellow-200: #0f0e0e;--midas-color-signal-red-10: #ffefef;--midas-color-signal-red-20: #ffdfdf;--midas-color-signal-red-30: #fcc8c8;--midas-color-signal-red-40: #f9b0b0;--midas-color-signal-red-50: #f69999;--midas-color-signal-red-60: #f38181;--midas-color-signal-red-70: #ef6a6a;--midas-color-signal-red-80: #ec5252;--midas-color-signal-red-90: #e93b3b;--midas-color-signal-red-100: #e62323;--midas-color-signal-red-110: #d12020;--midas-color-signal-red-120: #bc1d1d;--midas-color-signal-red-130: #a71919;--midas-color-signal-red-140: #921616;--midas-color-signal-red-150: #7d1313;--midas-color-signal-red-160: #691010;--midas-color-signal-red-170: #540d0d;--midas-color-signal-red-180: #3f0a0a;--midas-color-signal-red-190: #2a0606;--midas-color-signal-red-200: #150303;--midas-border-width: 1px;--midas-calendar-date-background-hover: light-dark(#0000001a, #ffffff1a);--midas-size-10: .125rem;--midas-size-15: .188rem;--midas-size-20: .25rem;--midas-size-30: .375rem;--midas-size-40: .5rem;--midas-size-50: .625rem;--midas-size-60: .75rem;--midas-size-70: .875rem;--midas-size-75: .938rem;--midas-size-80: 1rem;--midas-size-90: 1.25rem;--midas-size-100: 1.5rem;--midas-size-110: 1.75rem;--midas-size-120: 2rem;--midas-size-130: 2.5rem;--midas-size-140: 2.75rem;--midas-size-150: 3rem;--midas-size-00: 0rem;--midas-size-05: .063rem;--midas-spacing-10: .125rem;--midas-spacing-20: .25rem;--midas-spacing-30: .5rem;--midas-spacing-40: .75rem;--midas-spacing-50: 1rem;--midas-spacing-60: 1.5rem;--midas-spacing-70: 2rem;--midas-spacing-80: 2.5rem;--midas-spacing-90: 3rem;--midas-spacing-100: 4rem;--midas-spacing-110: 5rem;--midas-spacing-120: 6rem;--midas-state-focus: 0 0 0 2px light-dark(white, black), 0 0 0 4px light-dark(black, white);--midas-state-focus-inset: inset 0 0 0 2px light-dark(black, white), inset 0 0 0 4px light-dark(white, black);--midas-state-focus-contrast-mode-outline: 2px;--midas-state-focus-contrast-mode-offset: 2px;--midas-transition-duration-slow: .5s;--midas-transition-duration-normal: .3s;--midas-transition-duration-fast: .25s;--midas-transition-timing-ease-out: cubic-bezier(0, 0, .58, 1);--midas-transition-timing-ease-in: cubic-bezier(.42, 0, 1, 1);--midas-typography-font-family: Inter, sans-serif;--midas-typography-font-size-10: .75rem;--midas-typography-font-size-20: .875rem;--midas-typography-font-size-30: 1rem;--midas-typography-font-size-40: 1.125rem;--midas-typography-font-size-50: 1.25rem;--midas-typography-font-size-60: 1.5rem;--midas-typography-font-size-70: 1.625rem;--midas-typography-font-size-80: 2rem;--midas-typography-font-size-90: 2.25rem;--midas-typography-font-size-100: 2.625rem;--midas-typography-line-height-10: 1rem;--midas-typography-line-height-20: 1.125rem;--midas-typography-line-height-30: 1.25rem;--midas-typography-line-height-40: 1.375rem;--midas-typography-line-height-50: 1.5rem;--midas-typography-line-height-60: 1.75rem;--midas-typography-line-height-70: 2rem;--midas-typography-line-height-80: 2.25rem;--midas-typography-line-height-90: 2.5rem;--midas-typography-line-height-100: 3rem;--midas-typography-weight-thin: 100;--midas-typography-weight-extra-light: 200;--midas-typography-weight-light: 300;--midas-typography-weight-regular: 400;--midas-typography-weight-medium: 500;--midas-typography-weight-semi-bold: 600;--midas-typography-weight-bold: 700;--midas-typography-weight-extra-bold: 800;--midas-typography-weight-black: 900;--midas-z-index-base: 1;--midas-z-index-above: 10;--midas-z-index-sidebar: 500;--midas-z-index-modal: 1000;--midas-z-index-toast: 1100;--midas-z-index-skip-to-content: 1200;--midas-breakpoints-xs: (max-width: calc(var(--midas-window-sizes-sm) - 1px));--midas-breakpoints-sm: (min-width: var(--midas-window-sizes-sm));--midas-breakpoints-md: (min-width: var(--midas-window-sizes-md));--midas-breakpoints-lg: (min-width: var(--midas-window-sizes-lg));--midas-breakpoints-xl: (min-width: var(--midas-window-sizes-xl));--midas-button-background-primary-base: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-100));--midas-button-background-primary-hover: light-dark(var(--midas-color-blue-130), var(--midas-color-blue-130));--midas-button-background-primary-active: light-dark(var(--midas-color-blue-100), var(--midas-color-blue-150));--midas-button-background-secondary-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--midas-button-background-secondary-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-180));--midas-button-background-tertiary-hover: light-dark(var(--midas-color-black-opacity5), var(--midas-color-white-opacity13));--midas-button-background-tertiary-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-180));--midas-button-background-danger-base: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-button-background-danger-hover: light-dark(var(--midas-color-signal-red-120), var(--midas-color-signal-red-120));--midas-button-background-danger-active: light-dark(var(--midas-color-signal-red-150), var(--midas-color-signal-red-150));--midas-button-background-disabled: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-button-border-secondary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-button-icon-hover: light-dark(var(--midas-color-black-opacity5), var(--midas-color-white-opacity13));--midas-background-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-background-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-190));--midas-background-inverse: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-layer-01-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-layer-01-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-layer-01-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-layer-01-selected-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-150));--midas-layer-02-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-160));--midas-layer-02-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-150));--midas-layer-02-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-140));--midas-layer-02-selected-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-130));--midas-layer-accent-01-base: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-layer-accent-01-hover: light-dark(var(--midas-color-gray-40), var(--midas-color-gray-150));--midas-layer-accent-01-selected: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-layer-accent-02-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-layer-accent-02-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-layer-accent-02-selected: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-brand-primary: light-dark(var(--midas-color-red-100), var(--midas-color-red-100));--midas-border-color-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-border-color-secondary: light-dark(var(--midas-color-gray-110), var(--midas-color-gray-90));--midas-border-color-subtle: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-border-color-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-100));--midas-border-color-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-field-01-base: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-field-01-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-170));--midas-field-01-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-field-02-base: light-dark(var(--midas-color-white-base), var(--midas-color-gray-160));--midas-field-02-hover: light-dark(var(--midas-color-white-hover), var(--midas-color-gray-150));--midas-field-02-active: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-140));--midas-field-disabled: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-skeleton-01: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-skeleton-02: light-dark(var(--midas-color-gray-30), var(--midas-color-gray-160));--midas-icon-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-icon-secondary: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-icon-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-icon-inverse: light-dark(var(--midas-color-white-base), var(--midas-color-gray-200));--midas-icon-on-color: light-dark(var(--midas-color-white-base), var(--midas-color-white-base));--midas-icon-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-icon-success: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-icon-info: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-icon-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-icon-important: var(--midas-color-orange-100);--midas-icon-read-only: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-160));--midas-link-enabled: light-dark(var(--midas-color-blue-120), var(--midas-color-blue-70));--midas-link-hover: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-50));--midas-link-pressed: light-dark(var(--midas-color-gray-200), var(--midas-color-blue-40));--midas-link-visited: light-dark(var(--midas-color-purple-110), var(--midas-color-purple-80));--midas-support-border-success: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-support-border-info: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-support-border-important: var(--midas-color-orange-100);--midas-support-border-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-support-background-success: light-dark(var(--midas-color-signal-green-20), var(--midas-color-signal-green-180));--midas-support-background-success-hover: light-dark(var(--midas-color-signal-green-30), var(--midas-color-signal-green-170));--midas-support-background-info: light-dark(var(--midas-color-signal-blue-10), var(--midas-color-signal-blue-180));--midas-support-background-info-hover: light-dark(var(--midas-color-signal-blue-20), var(--midas-color-signal-blue-170));--midas-support-background-important: light-dark(var(--midas-color-signal-yellow-10), var(--midas-color-signal-yellow-180));--midas-support-background-important-hover: light-dark(var(--midas-color-signal-yellow-20), var(--midas-color-signal-yellow-170));--midas-support-background-warning: light-dark(var(--midas-color-signal-red-20), var(--midas-color-signal-red-180));--midas-support-background-warning-hover: light-dark(var(--midas-color-signal-red-30), var(--midas-color-signal-red-170));--midas-tag-green-background: light-dark(var(--midas-color-signal-green-20), var(--midas-color-signal-green-180));--midas-tag-green-border-color: light-dark(var(--midas-color-signal-green-100), var(--midas-color-signal-green-100));--midas-tag-blue-background: light-dark(var(--midas-color-signal-blue-10), var(--midas-color-signal-blue-180));--midas-tag-blue-border-color: light-dark(var(--midas-color-signal-blue-100), var(--midas-color-signal-blue-100));--midas-tag-yellow-background: light-dark(var(--midas-color-signal-yellow-10), var(--midas-color-signal-yellow-180));--midas-tag-yellow-border-color: var(--midas-color-orange-100);--midas-tag-red-background: light-dark(var(--midas-color-signal-red-20), var(--midas-color-signal-red-180));--midas-tag-red-border-color: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-text-primary: light-dark(var(--midas-color-gray-200), var(--midas-color-gray-10));--midas-text-secondary: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-text-tertiary: light-dark(var(--midas-color-blue-150), var(--midas-color-gray-10));--midas-text-on-color: light-dark(var(--midas-color-white-base), var(--midas-color-white-base));--midas-text-inverse: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-200));--midas-text-disabled: light-dark(var(--midas-color-gray-50), var(--midas-color-gray-140));--midas-text-warning: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-80));--midas-text-placeholder: light-dark(var(--midas-color-gray-70), var(--midas-color-gray-140));--midas-text-read-only: light-dark(var(--midas-color-gray-110), var(--midas-color-gray-80));--midas-badge-background: light-dark(var(--midas-color-signal-red-100), var(--midas-color-signal-red-100));--midas-calendar-date-background-selected: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-80));--midas-calendar-date-background-start-range: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-80));--midas-calendar-date-background-in-range: light-dark(var(--midas-color-blue-20), var(--midas-color-blue-150));--midas-calendar-date-background-end-range: light-dark(var(--midas-color-blue-150), var(--midas-color-blue-80));--midas-logo-primary: light-dark(var(--midas-color-red-100), var(--midas-color-white-base));--midas-menu-item-background-hover: light-dark(var(--midas-color-gray-20), var(--midas-color-gray-190));--midas-menu-item-background-selected: light-dark(var(--midas-color-gray-10), var(--midas-color-gray-180));--midas-menu-text-section-header: light-dark(var(--midas-color-gray-140), var(--midas-color-gray-70));--midas-spacing-xsmall: var(--midas-size-20);--midas-spacing-small: var(--midas-size-40);--midas-spacing-medium: var(--midas-size-80);--midas-spacing-large: var(--midas-size-100);--midas-spacing-xlarge: var(--midas-size-120);--midas-transition-panel-collapse: var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-out) 0ms;--midas-transition-panel-expand: var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-in) 0ms;--midas-typography-body: var(--midas-typography-weight-regular) var(--midas-typography-font-size-30)/var(--midas-typography-line-height-30) var(--midas-typography-font-family);--midas-typography-body-small: var(--midas-typography-weight-regular) var(--midas-typography-font-size-20)/var(--midas-typography-line-height-20) var(--midas-typography-font-family);--midas-typography-description: var(--midas-typography-weight-regular) var(--midas-typography-font-size-20)/var(--midas-typography-line-height-20) var(--midas-typography-font-family);--midas-typography-description-small: var(--midas-typography-weight-regular) var(--midas-typography-font-size-10)/var(--midas-typography-line-height-10) var(--midas-typography-font-family);--midas-state-invalid: inset 0 0 0 2px var(--midas-support-border-warning)}@font-face{font-family:Inter;font-style:normal;font-display:swap;font-weight:100 900;src:url(https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{color-scheme:light dark}
package/chunks/ComboBox-DnqZjAqe.js ADDED
@@ -0,0 +1,102 @@
1
+ 'use client';
2
+ import { jsxs as c, jsx as o } from "react/jsx-runtime";
3
+ import L from "react";
4
+ import { ComboBox as F, Input as v, Button as R } from "react-aria-components";
5
+ import { c as s } from "./clsx-AexbMWKp.js";
6
+ import { a as y, L as B } from "./Label-6GZmmff9.js";
7
+ import { T as k } from "./Text-BuXvuoqM.js";
8
+ import { F as u } from "./FieldError-BMTrvSof.js";
9
+ import { L as C } from "./ListBox-D5BBeZWL.js";
10
+ import { a as N, L as g } from "./ListBoxEmptyState-_Cn38cQ6.js";
11
+ import { C as E } from "./chevron-down-BBFYYzZq.js";
12
+ import { u as S } from "./useLocalizedStringFormatter-BHvsRxDk.js";
13
+ import '../assets/ComboBox.css';const T = "_combobox_1awtk_1", j = "_inputField_1awtk_6", I = "_medium_1awtk_27", O = "_wrap_1awtk_79", U = "_button_1awtk_85", z = "_icon_1awtk_121", t = {
14
+ combobox: T,
15
+ inputField: j,
16
+ medium: I,
17
+ wrap: O,
18
+ button: U,
19
+ icon: z
20
+ }, D = { showList: "Show list", noResultsFound: "No results found" }, M = { showList: "Visa lista", noResultsFound: "Inga trรคffar" }, V = {
21
+ en: D,
22
+ sv: M
23
+ };
24
+ function Y({
25
+ label: a,
26
+ description: i,
27
+ errorMessage: r,
28
+ children: p,
29
+ items: f,
30
+ className: _,
31
+ errorPosition: n = "top",
32
+ size: m = "large",
33
+ popover: h,
34
+ listBoxProps: b,
35
+ ...e
36
+ }) {
37
+ const d = L.useRef(null), l = S(V), w = (x) => {
38
+ x.currentTarget.value && d.current?.select();
39
+ };
40
+ return /* @__PURE__ */ c(
41
+ F,
42
+ {
43
+ className: s(t.combobox, _),
44
+ ...e,
45
+ "data-readonly": e.isReadOnly || void 0,
46
+ children: [
47
+ /* @__PURE__ */ o(y, { popover: h, children: a && /* @__PURE__ */ o(B, { children: a }) }),
48
+ i && /* @__PURE__ */ o(k, { slot: "description", children: i }),
49
+ n === "top" && /* @__PURE__ */ o(u, { "data-testid": "fieldError", children: r }),
50
+ /* @__PURE__ */ c("div", { className: t.wrap, children: [
51
+ /* @__PURE__ */ o(
52
+ v,
53
+ {
54
+ className: s(t.inputField, {
55
+ [t.medium]: m === "medium"
56
+ }),
57
+ "data-readonly": e.isReadOnly || void 0,
58
+ onMouseUp: w,
59
+ ref: d
60
+ }
61
+ ),
62
+ /* @__PURE__ */ o(
63
+ R,
64
+ {
65
+ className: s(t.button, {
66
+ [t.medium]: m === "medium"
67
+ }),
68
+ "aria-label": l.format("showList"),
69
+ children: /* @__PURE__ */ o(
70
+ "div",
71
+ {
72
+ className: t.icon,
73
+ "aria-hidden": "true",
74
+ children: /* @__PURE__ */ o(
75
+ E,
76
+ {
77
+ size: 20,
78
+ "aria-hidden": !0
79
+ }
80
+ )
81
+ }
82
+ )
83
+ }
84
+ )
85
+ ] }),
86
+ n === "bottom" && /* @__PURE__ */ o(u, { "data-testid": "fieldError", children: r }),
87
+ /* @__PURE__ */ o(N, { offset: 4, children: /* @__PURE__ */ o(
88
+ C,
89
+ {
90
+ items: f,
91
+ renderEmptyState: () => /* @__PURE__ */ o(g, { children: l.format("noResultsFound") }),
92
+ ...b,
93
+ children: p
94
+ }
95
+ ) })
96
+ ]
97
+ }
98
+ );
99
+ }
100
+ export {
101
+ Y as C
102
+ };
package/chunks/ListBoxEmptyState-_Cn38cQ6.js ADDED
@@ -0,0 +1,30 @@
1
+ import { jsx as s } from "react/jsx-runtime";
2
+ import { c as m } from "./clsx-AexbMWKp.js";
3
+ import { Popover as r } from "react-aria-components";
4
+ import { s as a } from "./ListBox-D5BBeZWL.js";
5
+ import { T as p } from "./Text-BuXvuoqM.js";
6
+ import '../assets/ListBoxEmptyState.css';const n = ({
7
+ className: t,
8
+ children: o,
9
+ ...e
10
+ }) => /* @__PURE__ */ s(
11
+ r,
12
+ {
13
+ className: m(t, a.listBoxPopover),
14
+ offset: 0,
15
+ ...e,
16
+ children: o
17
+ }
18
+ ), i = "_listBoxEmptyState_18j20_1", x = {
19
+ listBoxEmptyState: i
20
+ }, E = ({ className: t, ...o }) => /* @__PURE__ */ s(
21
+ p,
22
+ {
23
+ className: m(t, x.listBoxEmptyState),
24
+ ...o
25
+ }
26
+ );
27
+ export {
28
+ E as L,
29
+ n as a
30
+ };
package/chunks/{Select-CzmgPK8V.js โ†’ Select-D7JfpIUT.js} RENAMED
@@ -12,17 +12,17 @@ import { useFocusManager as M } from "react-aria";
12
12
  import { X as F } from "./x-B9bYxG31.js";
13
13
  import { L } from "./ListBox-D5BBeZWL.js";
14
14
  import { P as I } from "./Popover-BcEtFiU1.js";
15
- import { a as G, T as k } from "./Tag-C7VZ0T0o.js";
15
+ import { a as G, T as k } from "./TagGroup-CWe0P76-.js";
16
16
  import { C as R } from "./chevron-down-BBFYYzZq.js";
17
17
  import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Select all", selectedItems: "Selected items", selected: "selected" }, w = { clearAll: "Rensa alla", selectAll: "Vรคlj alla", selectedItems: "Valda objekt", selected: "valda" }, u = {
18
18
  en: $,
19
19
  sv: w
20
- }, P = "_select_11rjo_1", z = "_triggerContainer_11rjo_7", E = "_trigger_11rjo_7", K = "_medium_11rjo_29", D = "_icon_11rjo_66", W = "_selectValue_11rjo_72", X = "_placeholder_11rjo_78", q = "_multiSelectValue_11rjo_88", H = "_selectValueTag_11rjo_112", J = "_clearButton_11rjo_126", O = "_truncate_11rjo_138", Q = "_popover_11rjo_175", U = "_selectAll_11rjo_201", Y = "_tagGroup_11rjo_269", a = {
20
+ }, P = "_select_11rjo_1", z = "_triggerContainer_11rjo_7", D = "_trigger_11rjo_7", E = "_medium_11rjo_29", K = "_icon_11rjo_66", W = "_selectValue_11rjo_72", X = "_placeholder_11rjo_78", q = "_multiSelectValue_11rjo_88", H = "_selectValueTag_11rjo_112", J = "_clearButton_11rjo_126", O = "_truncate_11rjo_138", Q = "_popover_11rjo_175", U = "_selectAll_11rjo_201", Y = "_tagGroup_11rjo_269", a = {
21
21
  select: P,
22
22
  triggerContainer: z,
23
- trigger: E,
24
- medium: K,
25
- icon: D,
23
+ trigger: D,
24
+ medium: E,
25
+ icon: K,
26
26
  selectValue: W,
27
27
  placeholder: X,
28
28
  multiSelectValue: q,
@@ -108,7 +108,7 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
108
108
  children: /* @__PURE__ */ e(j, { items: l.selectedItems, children: (s) => /* @__PURE__ */ e(
109
109
  k,
110
110
  {
111
- dismissable: !0,
111
+ isDismissable: !0,
112
112
  id: s.key,
113
113
  isDisabled: r,
114
114
  textValue: s.textValue,
package/chunks/TagGroup-CWe0P76-.js ADDED
@@ -0,0 +1,97 @@
1
+ import { jsx as i, jsxs as u, Fragment as b } from "react/jsx-runtime";
2
+ import { Tag as T, composeRenderProps as f, useContextProps as d, TagListContext as p, TagList as x, TagGroupContext as y, TagGroup as h } from "react-aria-components";
3
+ import { B as L } from "./Button-CaLOUTDO.js";
4
+ import { c } from "./clsx-AexbMWKp.js";
5
+ import { X as v } from "./x-B9bYxG31.js";
6
+ import { forwardRef as _, Children as N, isValidElement as w } from "react";
7
+ import '../assets/TagGroup.css';const G = "_button_137b0_1", C = "_green_137b0_16", R = "_red_137b0_17", V = "_blue_137b0_18", $ = "_yellow_137b0_19", E = "_tag_137b0_31", j = "_tagText_137b0_83", z = "_dismissable_137b0_88", a = {
8
+ button: G,
9
+ green: C,
10
+ red: R,
11
+ blue: V,
12
+ yellow: $,
13
+ tag: E,
14
+ tagText: j,
15
+ dismissable: z
16
+ }, q = ({
17
+ className: r,
18
+ color: e,
19
+ dismissable: o = !1,
20
+ isDismissable: t,
21
+ type: s,
22
+ ...n
23
+ }) => {
24
+ const g = t || typeof t > "u" && o;
25
+ return /* @__PURE__ */ i(
26
+ T,
27
+ {
28
+ className: c(
29
+ a.tag,
30
+ g && a.dismissable,
31
+ {
32
+ [a.green]: e ? e === "green" : s === "success",
33
+ [a.blue]: e ? e === "blue" : s === "info",
34
+ [a.yellow]: e ? e === "yellow" : s === "important",
35
+ [a.red]: e ? e === "red" : s === "warning"
36
+ },
37
+ r
38
+ ),
39
+ ...n,
40
+ textValue: n.textValue || (typeof n.children == "string" ? n.children : void 0),
41
+ children: f(n.children, (l) => /* @__PURE__ */ u(b, { children: [
42
+ /* @__PURE__ */ i("div", { className: a.tagText, children: l }),
43
+ g && /* @__PURE__ */ i(
44
+ L,
45
+ {
46
+ variant: "icon",
47
+ size: "medium",
48
+ className: a.button,
49
+ slot: "remove",
50
+ children: /* @__PURE__ */ i(v, { size: 20 })
51
+ }
52
+ )
53
+ ] }))
54
+ }
55
+ );
56
+ }, B = "_tagList_uoyyb_1", P = {
57
+ tagList: B
58
+ }, k = (r, e) => {
59
+ const [{ className: o, ...t }, s] = d(
60
+ r,
61
+ e,
62
+ p
63
+ );
64
+ return /* @__PURE__ */ i(
65
+ x,
66
+ {
67
+ className: c(o, P.tagList),
68
+ ref: s,
69
+ ...t
70
+ }
71
+ );
72
+ }, m = _(k), A = _(
73
+ (r, e) => {
74
+ const [{ className: o, children: t, ...s }, n] = d(
75
+ r,
76
+ e,
77
+ y
78
+ ), g = N.toArray(t).filter(w).find((l) => l.type === m);
79
+ return !g && process.env.NODE_ENV === "development" && console.warn(
80
+ "Using a TagGroup without providing a TagList component is deprecated since v17.0.0, see: https://designsystem.migrationsverket.se/components/tag/"
81
+ ), /* @__PURE__ */ i(
82
+ h,
83
+ {
84
+ className: c(o),
85
+ ref: n,
86
+ ...s,
87
+ children: g ? t : /* @__PURE__ */ i(m, { children: t })
88
+ }
89
+ );
90
+ }
91
+ );
92
+ A.displayName = "TagGroup";
93
+ export {
94
+ q as T,
95
+ A as a,
96
+ m as b
97
+ };
package/combobox/ComboBox.d.ts CHANGED
@@ -2,6 +2,7 @@ import { default as React } from 'react';
2
2
  import { ComboBoxProps as AriaComboBoxProps, ValidationResult } from 'react-aria-components';
3
3
  import { InfoPopoverProps } from '../label';
4
4
  import { Size } from '../common/types';
5
+ import { ListBoxProps } from '../list-box';
5
6
  export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children'> {
6
7
  label?: string;
7
8
  description?: string;
@@ -15,5 +16,6 @@ export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<
15
16
  * */
16
17
  size?: Size;
17
18
  popover?: InfoPopoverProps;
19
+ listBoxProps?: ListBoxProps<T>;
18
20
  }
19
- export declare function ComboBox<T extends object>({ label, description, errorMessage, children, items, className, errorPosition, size, popover, ...props }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
21
+ export declare function ComboBox<T extends object>({ label, description, errorMessage, children, items, className, errorPosition, size, popover, listBoxProps, ...props }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
package/combobox/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { C as r } from "../chunks/ComboBox-XaJDIr5h.js";
1
+ import { C as r } from "../chunks/ComboBox-DnqZjAqe.js";
2
2
  export {
3
3
  r as ComboBox
4
4
  };
package/index.js CHANGED
@@ -4,13 +4,13 @@ import { B as m, a as i } from "./chunks/BadgeContainer-CKVsfTlF.js";
4
4
  import { B as n, a as d } from "./chunks/Breadcrumb-CHldDcyz.js";
5
5
  import { B as c } from "./chunks/Button-CaLOUTDO.js";
6
6
  import { B as u } from "./chunks/ButtonGroup-Dr6HOBo2.js";
7
- import { C, R as B } from "./chunks/RangeCalendar-DIMxoHhy.js";
8
- import { C as L, a as S, b as D, c as I, d as R, e as G, f as P } from "./chunks/Card-DMSnokPn.js";
7
+ import { C as B, R as C } from "./chunks/RangeCalendar-DIMxoHhy.js";
8
+ import { C as b, a as S, b as D, c as I, d as R, e as G, f as P } from "./chunks/Card-DMSnokPn.js";
9
9
  import { C as v } from "./chunks/CharacterCounter-Dgnv-orm.js";
10
10
  import { C as M } from "./chunks/Checkbox-CRLj7_Ox.js";
11
11
  import { C as h } from "./chunks/CheckboxGroup-DooCBqUG.js";
12
- import { C as N } from "./chunks/ColorSchemeSwitch-DOQ0yjtt.js";
13
- import { C as y } from "./chunks/ComboBox-XaJDIr5h.js";
12
+ import { C as y } from "./chunks/ColorSchemeSwitch-DOQ0yjtt.js";
13
+ import { C as N } from "./chunks/ComboBox-DnqZjAqe.js";
14
14
  import { D as z } from "./chunks/DateField-6CclHfL2.js";
15
15
  import { D as Q, a as V, b as Z } from "./chunks/DateInputDivider-DwopMIb9.js";
16
16
  import { D as q, a as J } from "./chunks/DateRangePicker-BoL-sn9u.js";
@@ -23,33 +23,33 @@ import { I as so } from "./chunks/InfoBanner-C4HnaXQO.js";
23
23
  import { L as xo } from "./chunks/Label-6GZmmff9.js";
24
24
  import { H as io, L as fo, N as no, S as To, a as co } from "./chunks/Layout-CFhqS9ej.js";
25
25
  import { L as uo } from "./chunks/Link-rqGQvFQq.js";
26
- import { L as Co } from "./chunks/LinkButton-B1zayj7k.js";
27
- import { L as bo } from "./chunks/Logo-CCxPAmgw.js";
26
+ import { L as Bo } from "./chunks/LinkButton-B1zayj7k.js";
27
+ import { L as Lo } from "./chunks/Logo-CCxPAmgw.js";
28
28
  import { M as So } from "./chunks/Dialog-BHxDzbf8.js";
29
29
  import { P as Io } from "./chunks/Popover-BcEtFiU1.js";
30
30
  import { P as Go } from "./chunks/ProgressBar-Dg0JMQ71.js";
31
31
  import { R as ko, a as vo } from "./chunks/Radio-CAIyBgBp.js";
32
32
  import { S as Mo } from "./chunks/SearchField-zJUxVnR1.js";
33
- import { S as ho } from "./chunks/Select-CzmgPK8V.js";
34
- import { S as No } from "./chunks/Skeleton-DqIHQLQl.js";
35
- import { S as yo } from "./chunks/Spinner-CfKMn18u.js";
33
+ import { S as ho } from "./chunks/Select-D7JfpIUT.js";
34
+ import { S as yo } from "./chunks/Skeleton-DqIHQLQl.js";
35
+ import { S as No } from "./chunks/Spinner-CfKMn18u.js";
36
36
  import { C as zo, a as Oo, R as Qo, T as Vo, b as Zo, c as jo } from "./chunks/Table-UbdCFrkS.js";
37
37
  import { T as Jo, a as Ko, b as Uo, c as Wo } from "./chunks/TabList-BaR443mu.js";
38
- import { T as Yo, a as _o } from "./chunks/Tag-C7VZ0T0o.js";
39
- import { T as oa } from "./chunks/Text-BuXvuoqM.js";
40
- import { I as ra, T as ea, a as ta, b as sa } from "./chunks/TextArea-BAMrTLDJ.js";
41
- import { G as xa, T as ma, a as ia, b as fa, t as na } from "./chunks/Toast-UPM-1ipu.js";
42
- import { T as Ta, a as ca } from "./chunks/ToggleButtonGroup-CXKTrLbb.js";
43
- import { T as ua, a as ga } from "./chunks/Tooltip-rDmOkGmX.js";
44
- import { L as Ba } from "./chunks/ListBox-D5BBeZWL.js";
45
- import { L as La, a as Sa, b as Da, c as Ia, d as Ra } from "./chunks/ListBoxHeader-CL9bFH22.js";
46
- import { L as Pa } from "./chunks/ListBoxPopover-DOmhA5xx.js";
47
- import { M as va, a as Fa, b as Ma, c as Aa, S as ha } from "./chunks/Separator-XIzn8lsq.js";
38
+ import { T as Yo, a as _o, b as $o } from "./chunks/TagGroup-CWe0P76-.js";
39
+ import { T as aa } from "./chunks/Text-BuXvuoqM.js";
40
+ import { I as ea, T as ta, a as sa, b as pa } from "./chunks/TextArea-BAMrTLDJ.js";
41
+ import { G as ma, T as ia, a as fa, b as na, t as da } from "./chunks/Toast-UPM-1ipu.js";
42
+ import { T as ca, a as la } from "./chunks/ToggleButtonGroup-CXKTrLbb.js";
43
+ import { T as ga, a as Ba } from "./chunks/Tooltip-rDmOkGmX.js";
44
+ import { L as La } from "./chunks/ListBox-D5BBeZWL.js";
45
+ import { L as Sa, a as Da, b as Ia, c as Ra, d as Ga } from "./chunks/ListBoxHeader-CL9bFH22.js";
46
+ import { L as ka, a as va } from "./chunks/ListBoxEmptyState-_Cn38cQ6.js";
47
+ import { M as Ma, a as Aa, b as ha, c as Ha, S as ya } from "./chunks/Separator-XIzn8lsq.js";
48
48
  import { c as Na } from "./chunks/clsx-AexbMWKp.js";
49
- import { DialogTrigger as ya, MenuTrigger as Ea, RouterProvider as za } from "react-aria-components";
50
- import { u as Qa } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
51
- import { useToastState as Za } from "react-stately";
52
- const o = "17.0.2", a = {
49
+ import { DialogTrigger as za, MenuTrigger as Oa, RouterProvider as Qa } from "react-aria-components";
50
+ import { u as Za } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
51
+ import { useToastState as qa } from "react-stately";
52
+ const o = "17.2.0", a = {
53
53
  version: o
54
54
  }, r = a.version;
55
55
  export {
@@ -61,8 +61,8 @@ export {
61
61
  d as Breadcrumbs,
62
62
  c as Button,
63
63
  u as ButtonGroup,
64
- C as Calendar,
65
- L as Card,
64
+ B as Calendar,
65
+ b as Card,
66
66
  S as CardActionArea,
67
67
  D as CardActions,
68
68
  I as CardContent,
@@ -73,59 +73,60 @@ export {
73
73
  v as CharacterCounter,
74
74
  M as Checkbox,
75
75
  h as CheckboxGroup,
76
- N as ColorSchemeSwitch,
76
+ y as ColorSchemeSwitch,
77
77
  Oo as Column,
78
- y as ComboBox,
78
+ N as ComboBox,
79
79
  z as DateField,
80
80
  Q as DateInput,
81
81
  V as DateInputDivider,
82
82
  q as DatePicker,
83
83
  J as DateRangePicker,
84
84
  Z as DateSegment,
85
- ya as DialogTrigger,
85
+ za as DialogTrigger,
86
86
  X as DropZone,
87
87
  U as FieldError,
88
88
  Y as FileTrigger,
89
- xa as GlobalToastRegion,
89
+ ma as GlobalToastRegion,
90
90
  $ as Grid,
91
91
  ao as GridItem,
92
92
  io as Header,
93
93
  eo as Heading,
94
94
  so as InfoBanner,
95
- ra as Input,
95
+ ea as Input,
96
96
  xo as Label,
97
97
  fo as Layout,
98
98
  uo as Link,
99
- Co as LinkButton,
100
- Ba as ListBox,
101
- La as ListBoxButton,
102
- Sa as ListBoxHeader,
103
- Da as ListBoxItem,
104
- Ia as ListBoxLoadMoreItem,
105
- Pa as ListBoxPopover,
106
- Ra as ListBoxSection,
107
- bo as Logo,
108
- va as Menu,
109
- Fa as MenuItem,
110
- Ma as MenuPopover,
111
- Aa as MenuSection,
112
- Ea as MenuTrigger,
99
+ Bo as LinkButton,
100
+ La as ListBox,
101
+ Sa as ListBoxButton,
102
+ ka as ListBoxEmptyState,
103
+ Da as ListBoxHeader,
104
+ Ia as ListBoxItem,
105
+ Ra as ListBoxLoadMoreItem,
106
+ va as ListBoxPopover,
107
+ Ga as ListBoxSection,
108
+ Lo as Logo,
109
+ Ma as Menu,
110
+ Aa as MenuItem,
111
+ ha as MenuPopover,
112
+ Ha as MenuSection,
113
+ Oa as MenuTrigger,
113
114
  So as Modal,
114
115
  no as Navbar,
115
116
  Io as Popover,
116
117
  Go as ProgressBar,
117
118
  ko as Radio,
118
119
  vo as RadioGroup,
119
- B as RangeCalendar,
120
- za as RouterProvider,
120
+ C as RangeCalendar,
121
+ Qa as RouterProvider,
121
122
  Qo as Row,
122
123
  Mo as SearchField,
123
124
  ho as Select,
124
- ha as Separator,
125
+ ya as Separator,
125
126
  To as Sidebar,
126
127
  co as SidebarLink,
127
- No as Skeleton,
128
- yo as Spinner,
128
+ yo as Skeleton,
129
+ No as Spinner,
129
130
  Jo as Tab,
130
131
  Ko as TabList,
131
132
  Uo as TabPanel,
@@ -135,20 +136,21 @@ export {
135
136
  Wo as Tabs,
136
137
  Yo as Tag,
137
138
  _o as TagGroup,
138
- oa as Text,
139
- ea as TextArea,
140
- ta as TextField,
141
- sa as TextFieldBase,
142
- ma as Toast,
143
- ia as ToastProvider,
144
- fa as ToastRegion,
145
- Ta as ToggleButton,
146
- ca as ToggleButtonGroup,
147
- ua as Tooltip,
148
- ga as TooltipTrigger,
139
+ $o as TagList,
140
+ aa as Text,
141
+ ta as TextArea,
142
+ sa as TextField,
143
+ pa as TextFieldBase,
144
+ ia as Toast,
145
+ fa as ToastProvider,
146
+ na as ToastRegion,
147
+ ca as ToggleButton,
148
+ la as ToggleButtonGroup,
149
+ ga as Tooltip,
150
+ Ba as TooltipTrigger,
149
151
  r as VERSION,
150
152
  Na as clsx,
151
- na as toastQueue,
152
- Qa as useLocalizedStringFormatter,
153
- Za as useToastState
153
+ da as toastQueue,
154
+ Za as useLocalizedStringFormatter,
155
+ qa as useToastState
154
156
  };
package/list-box/ListBox.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { ListBoxProps } from 'react-aria-components';
2
- import { Node } from '@react-types/shared';
3
- export declare const ListBox: <T extends object | Node<object>>({ className, children, ...rest }: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
2
+ export type { ListBoxProps };
3
+ export declare const ListBox: <T extends object>({ className, children, ...rest }: ListBoxProps<T>) => import("react/jsx-runtime").JSX.Element;
package/list-box/index.d.ts CHANGED
@@ -5,3 +5,4 @@ export * from './ListBoxPopover';
5
5
  export * from './ListBoxSection';
6
6
  export * from './ListBoxLoadMoreItem';
7
7
  export * from './ListBoxHeader';
8
+ export * from './list-box-empty-state';
package/list-box/index.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import { L as s } from "../chunks/ListBox-D5BBeZWL.js";
2
- import { L as a, a as e, b as x, c as r, d as i } from "../chunks/ListBoxHeader-CL9bFH22.js";
3
- import { L as m } from "../chunks/ListBoxPopover-DOmhA5xx.js";
2
+ import { L, a as e, b as x, c as i, d as r } from "../chunks/ListBoxHeader-CL9bFH22.js";
3
+ import { L as m, a as p } from "../chunks/ListBoxEmptyState-_Cn38cQ6.js";
4
4
  export {
5
5
  s as ListBox,
6
- a as ListBoxButton,
6
+ L as ListBoxButton,
7
+ m as ListBoxEmptyState,
7
8
  e as ListBoxHeader,
8
9
  x as ListBoxItem,
9
- r as ListBoxLoadMoreItem,
10
- m as ListBoxPopover,
11
- i as ListBoxSection
10
+ i as ListBoxLoadMoreItem,
11
+ p as ListBoxPopover,
12
+ r as ListBoxSection
12
13
  };
package/list-box/list-box-empty-state/ListBoxEmptyState.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { TextProps } from '../../text';
2
+ export declare const ListBoxEmptyState: ({ className, ...rest }: TextProps) => import("react/jsx-runtime").JSX.Element;
package/list-box/list-box-empty-state/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './ListBoxEmptyState';
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "description": "Midas Components",
15
15
  "homepage": "https://designsystem.migrationsverket.se/",
16
16
  "license": "CC0-1.0",
17
- "version": "17.0.2",
17
+ "version": "17.2.0",
18
18
  "module": "./index.js",
19
19
  "type": "module",
20
20
  "main": "./index.js",
@@ -41,7 +41,7 @@
41
41
  "./*": "./*/index.js"
42
42
  },
43
43
  "dependencies": {
44
- "@midas-ds/theme": "3.10.8",
44
+ "@midas-ds/theme": "3.11.0",
45
45
  "react-aria-components": "1.14.0"
46
46
  }
47
47
  }
package/select/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { S as r } from "../chunks/Select-CzmgPK8V.js";
1
+ import { S as r } from "../chunks/Select-D7JfpIUT.js";
2
2
  export {
3
3
  r as Select
4
4
  };
package/tag/Tag.d.ts CHANGED
@@ -1,13 +1,22 @@
1
- import { TagGroupProps as AriaTagGroupProps, TagProps as AriaTagProps } from 'react-aria-components';
1
+ import { TagProps as AriaTagProps } from 'react-aria-components';
2
2
  import { FeedbackStatus } from '../common/types';
3
- import * as React from 'react';
4
- export interface TagGroupProp extends AriaTagGroupProps {
5
- children: React.ReactNode;
6
- }
7
3
  export interface TagProps extends AriaTagProps {
8
- children: React.ReactNode;
4
+ /**
5
+ * Sets the background and border color of the tag
6
+ */
7
+ color?: 'green' | 'blue' | 'yellow' | 'red';
8
+ /**
9
+ * Add a button for dismissing the tab
10
+ * @deprecated since v17.0.0 please use `isDismissable` instead
11
+ */
9
12
  dismissable?: boolean;
13
+ /**
14
+ * Add a button for dismissing the tab
15
+ */
16
+ isDismissable?: boolean;
17
+ /**
18
+ * @deprecated since v17.0.0 please use the prop `color` instead
19
+ */
10
20
  type?: FeedbackStatus;
11
21
  }
12
- export declare const TagGroup: React.FC<TagGroupProp>;
13
- export declare const Tag: React.FC<TagProps>;
22
+ export declare const Tag: ({ className, color, dismissable, isDismissable, type, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
package/tag/Tag.stories.d.ts CHANGED
@@ -4,5 +4,9 @@ type Story = StoryObj<typeof Tag>;
4
4
  declare const _default: Meta<typeof Tag>;
5
5
  export default _default;
6
6
  export declare const Primary: Story;
7
- export declare const Status: Story;
7
+ export declare const Green: Story;
8
+ export declare const Blue: Story;
9
+ export declare const Yellow: Story;
10
+ export declare const Red: Story;
8
11
  export declare const Disabled: Story;
12
+ export declare const WithoutTagList: Story;
package/tag/index.d.ts CHANGED
@@ -1 +1,3 @@
1
- export { Tag, TagGroup, type TagGroupProp, type TagProps } from './Tag';
1
+ export * from './Tag';
2
+ export * from './tag-group';
3
+ export * from './tag-list';
package/tag/index.js CHANGED
@@ -1,5 +1,6 @@
1
- import { T as r, a as T } from "../chunks/Tag-C7VZ0T0o.js";
1
+ import { T, a as g, b as o } from "../chunks/TagGroup-CWe0P76-.js";
2
2
  export {
3
- r as Tag,
4
- T as TagGroup
3
+ T as Tag,
4
+ g as TagGroup,
5
+ o as TagList
5
6
  };
package/tag/tag-group/TagGroup.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { TagGroupProps } from 'react-aria-components';
2
+ export type { TagGroupProps };
3
+ export declare const TagGroup: import('react').ForwardRefExoticComponent<TagGroupProps & import('react').RefAttributes<HTMLDivElement>>;
package/tag/tag-group/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './TagGroup';
package/tag/tag-list/TagList.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { TagListProps } from 'react-aria-components';
2
+ import { ForwardedRef } from 'react';
3
+ export type { TagListProps };
4
+ declare const TagListInner: <T extends object>(props: TagListProps<T>, ref?: ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
5
+ export declare const TagList: <T>(props: TagListProps<T>, ref?: ForwardedRef<HTMLDivElement>) => ReturnType<typeof TagListInner>;
package/tag/tag-list/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './TagList';
package/assets/Tag.css DELETED
@@ -1 +0,0 @@
1
- ._button_1nm6n_1{color:var(--midas-icon-primary);min-height:unset!important;padding:var(--midas-size-20)!important;border-radius:1.5rem;border:unset}._button_1nm6n_1[data-hovered]{background-color:var(--midas-button-icon-hover)}._button_1nm6n_1[data-pressed]{background-color:var(--midas-button-icon-active)}._button_1nm6n_1._success_1nm6n_16[data-hovered],._button_1nm6n_1._warning_1nm6n_17[data-hovered],._button_1nm6n_1._info_1nm6n_18[data-hovered],._button_1nm6n_1._important_1nm6n_19[data-hovered]{background-color:var(--midas-button-icon-hover)}._button_1nm6n_1._success_1nm6n_16[data-pressed],._button_1nm6n_1._warning_1nm6n_17[data-pressed],._button_1nm6n_1._info_1nm6n_18[data-pressed],._button_1nm6n_1._important_1nm6n_19[data-pressed]{background-color:var(--midas-button-icon-active)}._tag_1nm6n_31{display:inline-flex;align-items:center;border-radius:1.25rem;background-color:var(--midas-field-01-base);font-size:.875rem;font-family:var(--midas-typography-font-family);border:1px solid var(--midas-border-color-primary);color:var(--midas-text-primary)}._tag_1nm6n_31._success_1nm6n_16{background-color:var(--midas-support-background-success);border:1px solid var(--midas-support-border-success)}._tag_1nm6n_31._info_1nm6n_18{background-color:var(--midas-support-background-info);border:1px solid var(--midas-support-border-info)}._tag_1nm6n_31._important_1nm6n_19{background-color:var(--midas-support-background-important);border:1px solid var(--midas-support-border-important)}._tag_1nm6n_31._warning_1nm6n_17{background-color:var(--midas-support-background-warning);border:1px solid var(--midas-support-border-warning)}._tag_1nm6n_31[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed;border-color:var(--midas-border-color-disabled);background-color:var(--midas-field-01-base)}._tag_1nm6n_31[data-focused],._tag_1nm6n_31[data-focus-visible]{outline:none}._tag_1nm6n_31[data-focus-visible]{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._tag_1nm6n_31[data-focus-visible]{outline:3px solid highlight;outline-offset:2px}}._tagText_1nm6n_83{line-height:1.15;padding:7px var(--midas-size-40)}._dismissable_1nm6n_88 ._tagText_1nm6n_83{padding:7px var(--midas-size-10) 7px var(--midas-size-40)}._tagList_1nm6n_92{display:flex;flex-wrap:wrap;gap:.25rem}
package/chunks/ComboBox-XaJDIr5h.js DELETED
@@ -1,101 +0,0 @@
1
- 'use client';
2
- import { jsxs as l, jsx as t } from "react/jsx-runtime";
3
- import y from "react";
4
- import { ComboBox as F, Input as w, Button as v } from "react-aria-components";
5
- import { c as s } from "./clsx-AexbMWKp.js";
6
- import { a as R, L as N } from "./Label-6GZmmff9.js";
7
- import { T as u } from "./Text-BuXvuoqM.js";
8
- import { F as p } from "./FieldError-BMTrvSof.js";
9
- import { L as S } from "./ListBox-D5BBeZWL.js";
10
- import { L as B } from "./ListBoxPopover-DOmhA5xx.js";
11
- import { C } from "./chevron-down-BBFYYzZq.js";
12
- import { u as g } from "./useLocalizedStringFormatter-BHvsRxDk.js";
13
- import '../assets/ComboBox.css';const E = "_combobox_1m9te_1", T = "_inputField_1m9te_6", j = "_medium_1m9te_27", I = "_wrap_1m9te_79", O = "_button_1m9te_85", U = "_icon_1m9te_121", z = "_emptyState_1m9te_127", o = {
14
- combobox: E,
15
- inputField: T,
16
- medium: j,
17
- wrap: I,
18
- button: O,
19
- icon: U,
20
- emptyState: z
21
- }, D = { showList: "Show list", noResultsFound: "No results found" }, M = { showList: "Visa lista", noResultsFound: "Inga trรคffar" }, V = {
22
- en: D,
23
- sv: M
24
- };
25
- function X({
26
- label: r,
27
- description: i,
28
- errorMessage: a,
29
- children: f,
30
- items: _,
31
- className: h,
32
- errorPosition: n = "top",
33
- size: m = "large",
34
- popover: b,
35
- ...e
36
- }) {
37
- const d = y.useRef(null), c = g(V), x = (L) => {
38
- L.currentTarget.value && d.current?.select();
39
- };
40
- return /* @__PURE__ */ l(
41
- F,
42
- {
43
- className: s(o.combobox, h),
44
- ...e,
45
- "data-readonly": e.isReadOnly || void 0,
46
- children: [
47
- /* @__PURE__ */ t(R, { popover: b, children: r && /* @__PURE__ */ t(N, { children: r }) }),
48
- i && /* @__PURE__ */ t(u, { slot: "description", children: i }),
49
- n === "top" && /* @__PURE__ */ t(p, { "data-testid": "fieldError", children: a }),
50
- /* @__PURE__ */ l("div", { className: o.wrap, children: [
51
- /* @__PURE__ */ t(
52
- w,
53
- {
54
- className: s(o.inputField, {
55
- [o.medium]: m === "medium"
56
- }),
57
- "data-readonly": e.isReadOnly || void 0,
58
- onMouseUp: x,
59
- ref: d
60
- }
61
- ),
62
- /* @__PURE__ */ t(
63
- v,
64
- {
65
- className: s(o.button, {
66
- [o.medium]: m === "medium"
67
- }),
68
- "aria-label": c.format("showList"),
69
- children: /* @__PURE__ */ t(
70
- "div",
71
- {
72
- className: o.icon,
73
- "aria-hidden": "true",
74
- children: /* @__PURE__ */ t(
75
- C,
76
- {
77
- size: 20,
78
- "aria-hidden": !0
79
- }
80
- )
81
- }
82
- )
83
- }
84
- )
85
- ] }),
86
- n === "bottom" && /* @__PURE__ */ t(p, { "data-testid": "fieldError", children: a }),
87
- /* @__PURE__ */ t(B, { offset: 4, children: /* @__PURE__ */ t(
88
- S,
89
- {
90
- items: _,
91
- renderEmptyState: () => /* @__PURE__ */ t(u, { className: o.emptyState, children: c.format("noResultsFound") }),
92
- children: f
93
- }
94
- ) })
95
- ]
96
- }
97
- );
98
- }
99
- export {
100
- X as C
101
- };
package/chunks/ListBoxPopover-DOmhA5xx.js DELETED
@@ -1,20 +0,0 @@
1
- import { jsx as t } from "react/jsx-runtime";
2
- import { c as m } from "./clsx-AexbMWKp.js";
3
- import { Popover as e } from "react-aria-components";
4
- import { s as p } from "./ListBox-D5BBeZWL.js";
5
- const c = ({
6
- className: o,
7
- children: r,
8
- ...s
9
- }) => /* @__PURE__ */ t(
10
- e,
11
- {
12
- className: m(o, p.listBoxPopover),
13
- offset: 0,
14
- ...s,
15
- children: r
16
- }
17
- );
18
- export {
19
- c as L
20
- };
package/chunks/Tag-C7VZ0T0o.js DELETED
@@ -1,53 +0,0 @@
1
- import { jsxs as r, jsx as n } from "react/jsx-runtime";
2
- import { Tag as c, TagGroup as _, TagList as e } from "react-aria-components";
3
- import { B as g } from "./Button-CaLOUTDO.js";
4
- import { c as u } from "./clsx-AexbMWKp.js";
5
- import { X as l } from "./x-B9bYxG31.js";
6
- import '../assets/Tag.css';const T = "_button_1nm6n_1", p = "_success_1nm6n_16", f = "_warning_1nm6n_17", d = "_info_1nm6n_18", x = "_important_1nm6n_19", b = "_tag_1nm6n_31", w = "_tagText_1nm6n_83", L = "_dismissable_1nm6n_88", N = "_tagList_1nm6n_92", s = {
7
- button: T,
8
- success: p,
9
- warning: f,
10
- info: d,
11
- important: x,
12
- tag: b,
13
- tagText: w,
14
- dismissable: L,
15
- tagList: N
16
- }, B = ({ children: o, ...t }) => /* @__PURE__ */ n(_, { ...t, children: /* @__PURE__ */ n(e, { className: s.tagList, children: o }) }), $ = ({
17
- children: o,
18
- dismissable: t,
19
- className: i,
20
- type: a,
21
- ...m
22
- }) => /* @__PURE__ */ r(
23
- c,
24
- {
25
- className: u(
26
- s.tag,
27
- t && s.dismissable,
28
- a === "success" && s.success,
29
- a === "info" && s.info,
30
- a === "important" && s.important,
31
- a === "warning" && s.warning,
32
- i
33
- ),
34
- ...m,
35
- children: [
36
- /* @__PURE__ */ n("div", { className: s.tagText, children: o }),
37
- t && /* @__PURE__ */ n(
38
- g,
39
- {
40
- variant: "icon",
41
- size: "medium",
42
- className: s.button,
43
- slot: "remove",
44
- children: /* @__PURE__ */ n(l, { size: 20 })
45
- }
46
- )
47
- ]
48
- }
49
- );
50
- export {
51
- $ as T,
52
- B as a
53
- };