@midas-ds/components 17.1.0 → 17.2.0

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 17.2.0 (2026-02-18)
+
+### 🚀 Features
+
+- **components, tag:** deprecate dismissable prop ([228210703b](https://github.com/migrationsverket/midas/commit/228210703b))
+- **components, tag:** add color prop ([85ed37965d](https://github.com/migrationsverket/midas/commit/85ed37965d))
+
+### 🩹 Fixes
+
+- **components, tag:** replace color tokens ([311347b851](https://github.com/migrationsverket/midas/commit/311347b851))
+
+### 🏭 Refactoring
+
+- **components,tag:** use tag-scoped tokens instead of support tokens ([60a549a2f0](https://github.com/migrationsverket/midas/commit/60a549a2f0))
+
+### 📖 Documentation changes
+
+- **components, tag:** add stories for color variants ([d80920757c](https://github.com/migrationsverket/midas/commit/d80920757c))
+
+### 🔧 Maintenance
+
+- **components, tag:** add deprecation comment for lint tracking ([fa1dbcb0b0](https://github.com/migrationsverket/midas/commit/fa1dbcb0b0))
+
+### 🧪 Tests updated
+
+- **components, tag:** add test for deprecated dismissable prop ([efa39bfb4a](https://github.com/migrationsverket/midas/commit/efa39bfb4a))
+- **components, tag:** typos ([18ff479ba3](https://github.com/migrationsverket/midas/commit/18ff479ba3))
+
+### 🧱 Updated Dependencies
+
+- Updated theme to 3.11.0
+
 ## 17.1.0 (2026-02-18)
 
 ### 🚀 Features

package/assets/TagGroup.css

@@ -0,0 +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

@@ -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}
+: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/{Select-CzmgPK8V.js → Select-D7JfpIUT.js}

@@ -12,17 +12,17 @@ import { useFocusManager as M } from "react-aria";
 import { X as F } from "./x-B9bYxG31.js";
 import { L } from "./ListBox-D5BBeZWL.js";
 import { P as I } from "./Popover-BcEtFiU1.js";
-import { a as G, T as k } from "./Tag-C7VZ0T0o.js";
+import { a as G, T as k } from "./TagGroup-CWe0P76-.js";
 import { C as R } from "./chevron-down-BBFYYzZq.js";
 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 = {
   en: $,
   sv: w
-}, 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 = {
+}, 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 = {
   select: P,
   triggerContainer: z,
-  trigger: E,
-  medium: K,
-  icon: D,
+  trigger: D,
+  medium: E,
+  icon: K,
   selectValue: W,
   placeholder: X,
   multiSelectValue: q,
@@ -108,7 +108,7 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
       children: /* @__PURE__ */ e(j, { items: l.selectedItems, children: (s) => /* @__PURE__ */ e(
         k,
         {
-          dismissable: !0,
+          isDismissable: !0,
           id: s.key,
           isDisabled: r,
           textValue: s.textValue,

package/chunks/TagGroup-CWe0P76-.js

@@ -0,0 +1,97 @@
+import { jsx as i, jsxs as u, Fragment as b } from "react/jsx-runtime";
+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";
+import { B as L } from "./Button-CaLOUTDO.js";
+import { c } from "./clsx-AexbMWKp.js";
+import { X as v } from "./x-B9bYxG31.js";
+import { forwardRef as _, Children as N, isValidElement as w } from "react";
+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 = {
+  button: G,
+  green: C,
+  red: R,
+  blue: V,
+  yellow: $,
+  tag: E,
+  tagText: j,
+  dismissable: z
+}, q = ({
+  className: r,
+  color: e,
+  dismissable: o = !1,
+  isDismissable: t,
+  type: s,
+  ...n
+}) => {
+  const g = t || typeof t > "u" && o;
+  return /* @__PURE__ */ i(
+    T,
+    {
+      className: c(
+        a.tag,
+        g && a.dismissable,
+        {
+          [a.green]: e ? e === "green" : s === "success",
+          [a.blue]: e ? e === "blue" : s === "info",
+          [a.yellow]: e ? e === "yellow" : s === "important",
+          [a.red]: e ? e === "red" : s === "warning"
+        },
+        r
+      ),
+      ...n,
+      textValue: n.textValue || (typeof n.children == "string" ? n.children : void 0),
+      children: f(n.children, (l) => /* @__PURE__ */ u(b, { children: [
+        /* @__PURE__ */ i("div", { className: a.tagText, children: l }),
+        g && /* @__PURE__ */ i(
+          L,
+          {
+            variant: "icon",
+            size: "medium",
+            className: a.button,
+            slot: "remove",
+            children: /* @__PURE__ */ i(v, { size: 20 })
+          }
+        )
+      ] }))
+    }
+  );
+}, B = "_tagList_uoyyb_1", P = {
+  tagList: B
+}, k = (r, e) => {
+  const [{ className: o, ...t }, s] = d(
+    r,
+    e,
+    p
+  );
+  return /* @__PURE__ */ i(
+    x,
+    {
+      className: c(o, P.tagList),
+      ref: s,
+      ...t
+    }
+  );
+}, m = _(k), A = _(
+  (r, e) => {
+    const [{ className: o, children: t, ...s }, n] = d(
+      r,
+      e,
+      y
+    ), g = N.toArray(t).filter(w).find((l) => l.type === m);
+    return !g && process.env.NODE_ENV === "development" && console.warn(
+      "Using a TagGroup without providing a TagList component is deprecated since v17.0.0, see: https://designsystem.migrationsverket.se/components/tag/"
+    ), /* @__PURE__ */ i(
+      h,
+      {
+        className: c(o),
+        ref: n,
+        ...s,
+        children: g ? t : /* @__PURE__ */ i(m, { children: t })
+      }
+    );
+  }
+);
+A.displayName = "TagGroup";
+export {
+  q as T,
+  A as a,
+  m as b
+};

package/index.js

@@ -30,26 +30,26 @@ import { P as Io } from "./chunks/Popover-BcEtFiU1.js";
 import { P as Go } from "./chunks/ProgressBar-Dg0JMQ71.js";
 import { R as ko, a as vo } from "./chunks/Radio-CAIyBgBp.js";
 import { S as Mo } from "./chunks/SearchField-zJUxVnR1.js";
-import { S as ho } from "./chunks/Select-CzmgPK8V.js";
+import { S as ho } from "./chunks/Select-D7JfpIUT.js";
 import { S as yo } from "./chunks/Skeleton-DqIHQLQl.js";
 import { S as No } from "./chunks/Spinner-CfKMn18u.js";
 import { C as zo, a as Oo, R as Qo, T as Vo, b as Zo, c as jo } from "./chunks/Table-UbdCFrkS.js";
 import { T as Jo, a as Ko, b as Uo, c as Wo } from "./chunks/TabList-BaR443mu.js";
-import { T as Yo, a as _o } from "./chunks/Tag-C7VZ0T0o.js";
-import { T as oa } from "./chunks/Text-BuXvuoqM.js";
-import { I as ra, T as ea, a as ta, b as sa } from "./chunks/TextArea-BAMrTLDJ.js";
-import { G as xa, T as ma, a as ia, b as fa, t as na } from "./chunks/Toast-UPM-1ipu.js";
-import { T as Ta, a as ca } from "./chunks/ToggleButtonGroup-CXKTrLbb.js";
-import { T as ua, a as ga } from "./chunks/Tooltip-rDmOkGmX.js";
-import { L as Ca } from "./chunks/ListBox-D5BBeZWL.js";
-import { L as ba, a as Sa, b as Da, c as Ia, d as Ra } from "./chunks/ListBoxHeader-CL9bFH22.js";
-import { L as Pa, a as ka } from "./chunks/ListBoxEmptyState-_Cn38cQ6.js";
-import { M as Fa, a as Ma, b as Aa, c as ha, S as Ha } from "./chunks/Separator-XIzn8lsq.js";
-import { c as Ea } from "./chunks/clsx-AexbMWKp.js";
-import { DialogTrigger as wa, MenuTrigger as za, RouterProvider as Oa } from "react-aria-components";
-import { u as Va } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
-import { useToastState as ja } from "react-stately";
-const o = "17.1.0", a = {
+import { T as Yo, a as _o, b as $o } from "./chunks/TagGroup-CWe0P76-.js";
+import { T as aa } from "./chunks/Text-BuXvuoqM.js";
+import { I as ea, T as ta, a as sa, b as pa } from "./chunks/TextArea-BAMrTLDJ.js";
+import { G as ma, T as ia, a as fa, b as na, t as da } from "./chunks/Toast-UPM-1ipu.js";
+import { T as ca, a as la } from "./chunks/ToggleButtonGroup-CXKTrLbb.js";
+import { T as ga, a as Ba } from "./chunks/Tooltip-rDmOkGmX.js";
+import { L as La } from "./chunks/ListBox-D5BBeZWL.js";
+import { L as Sa, a as Da, b as Ia, c as Ra, d as Ga } from "./chunks/ListBoxHeader-CL9bFH22.js";
+import { L as ka, a as va } from "./chunks/ListBoxEmptyState-_Cn38cQ6.js";
+import { M as Ma, a as Aa, b as ha, c as Ha, S as ya } from "./chunks/Separator-XIzn8lsq.js";
+import { c as Na } from "./chunks/clsx-AexbMWKp.js";
+import { DialogTrigger as za, MenuTrigger as Oa, RouterProvider as Qa } from "react-aria-components";
+import { u as Za } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
+import { useToastState as qa } from "react-stately";
+const o = "17.2.0", a = {
   version: o
 }, r = a.version;
 export {
@@ -82,35 +82,35 @@ export {
   q as DatePicker,
   J as DateRangePicker,
   Z as DateSegment,
-  wa as DialogTrigger,
+  za as DialogTrigger,
   X as DropZone,
   U as FieldError,
   Y as FileTrigger,
-  xa as GlobalToastRegion,
+  ma as GlobalToastRegion,
   $ as Grid,
   ao as GridItem,
   io as Header,
   eo as Heading,
   so as InfoBanner,
-  ra as Input,
+  ea as Input,
   xo as Label,
   fo as Layout,
   uo as Link,
   Bo as LinkButton,
-  Ca as ListBox,
-  ba as ListBoxButton,
-  Pa as ListBoxEmptyState,
-  Sa as ListBoxHeader,
-  Da as ListBoxItem,
-  Ia as ListBoxLoadMoreItem,
-  ka as ListBoxPopover,
-  Ra as ListBoxSection,
+  La as ListBox,
+  Sa as ListBoxButton,
+  ka as ListBoxEmptyState,
+  Da as ListBoxHeader,
+  Ia as ListBoxItem,
+  Ra as ListBoxLoadMoreItem,
+  va as ListBoxPopover,
+  Ga as ListBoxSection,
   Lo as Logo,
-  Fa as Menu,
-  Ma as MenuItem,
-  Aa as MenuPopover,
-  ha as MenuSection,
-  za as MenuTrigger,
+  Ma as Menu,
+  Aa as MenuItem,
+  ha as MenuPopover,
+  Ha as MenuSection,
+  Oa as MenuTrigger,
   So as Modal,
   no as Navbar,
   Io as Popover,
@@ -118,11 +118,11 @@ export {
   ko as Radio,
   vo as RadioGroup,
   C as RangeCalendar,
-  Oa as RouterProvider,
+  Qa as RouterProvider,
   Qo as Row,
   Mo as SearchField,
   ho as Select,
-  Ha as Separator,
+  ya as Separator,
   To as Sidebar,
   co as SidebarLink,
   yo as Skeleton,
@@ -136,20 +136,21 @@ export {
   Wo as Tabs,
   Yo as Tag,
   _o as TagGroup,
-  oa as Text,
-  ea as TextArea,
-  ta as TextField,
-  sa as TextFieldBase,
-  ma as Toast,
-  ia as ToastProvider,
-  fa as ToastRegion,
-  Ta as ToggleButton,
-  ca as ToggleButtonGroup,
-  ua as Tooltip,
-  ga as TooltipTrigger,
+  $o as TagList,
+  aa as Text,
+  ta as TextArea,
+  sa as TextField,
+  pa as TextFieldBase,
+  ia as Toast,
+  fa as ToastProvider,
+  na as ToastRegion,
+  ca as ToggleButton,
+  la as ToggleButtonGroup,
+  ga as Tooltip,
+  Ba as TooltipTrigger,
   r as VERSION,
-  Ea as clsx,
-  na as toastQueue,
-  Va as useLocalizedStringFormatter,
-  ja as useToastState
+  Na as clsx,
+  da as toastQueue,
+  Za as useLocalizedStringFormatter,
+  qa as useToastState
 };

package/package.json

@@ -14,7 +14,7 @@
   "description": "Midas Components",
   "homepage": "https://designsystem.migrationsverket.se/",
   "license": "CC0-1.0",
-  "version": "17.1.0",
+  "version": "17.2.0",
   "module": "./index.js",
   "type": "module",
   "main": "./index.js",
@@ -41,7 +41,7 @@
     "./*": "./*/index.js"
   },
   "dependencies": {
-    "@midas-ds/theme": "3.10.8",
+    "@midas-ds/theme": "3.11.0",
     "react-aria-components": "1.14.0"
   }
 }

package/select/index.js

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

package/tag/Tag.d.ts

@@ -1,13 +1,22 @@
-import { TagGroupProps as AriaTagGroupProps, TagProps as AriaTagProps } from 'react-aria-components';
+import { TagProps as AriaTagProps } from 'react-aria-components';
 import { FeedbackStatus } from '../common/types';
-import * as React from 'react';
-export interface TagGroupProp extends AriaTagGroupProps {
-    children: React.ReactNode;
-}
 export interface TagProps extends AriaTagProps {
-    children: React.ReactNode;
+    /**
+     * Sets the background and border color of the tag
+     */
+    color?: 'green' | 'blue' | 'yellow' | 'red';
+    /**
+     * Add a button for dismissing the tab
+     * @deprecated since v17.0.0 please use `isDismissable` instead
+     */
     dismissable?: boolean;
+    /**
+     * Add a button for dismissing the tab
+     */
+    isDismissable?: boolean;
+    /**
+     * @deprecated since v17.0.0 please use the prop `color` instead
+     */
     type?: FeedbackStatus;
 }
-export declare const TagGroup: React.FC<TagGroupProp>;
-export declare const Tag: React.FC<TagProps>;
+export declare const Tag: ({ className, color, dismissable, isDismissable, type, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;

package/tag/Tag.stories.d.ts

@@ -4,5 +4,9 @@ type Story = StoryObj<typeof Tag>;
 declare const _default: Meta<typeof Tag>;
 export default _default;
 export declare const Primary: Story;
-export declare const Status: Story;
+export declare const Green: Story;
+export declare const Blue: Story;
+export declare const Yellow: Story;
+export declare const Red: Story;
 export declare const Disabled: Story;
+export declare const WithoutTagList: Story;

package/tag/index.d.ts

@@ -1 +1,3 @@
-export { Tag, TagGroup, type TagGroupProp, type TagProps } from './Tag';
+export * from './Tag';
+export * from './tag-group';
+export * from './tag-list';

package/tag/index.js

@@ -1,5 +1,6 @@
-import { T as r, a as T } from "../chunks/Tag-C7VZ0T0o.js";
+import { T, a as g, b as o } from "../chunks/TagGroup-CWe0P76-.js";
 export {
-  r as Tag,
-  T as TagGroup
+  T as Tag,
+  g as TagGroup,
+  o as TagList
 };

package/tag/tag-group/TagGroup.d.ts

@@ -0,0 +1,3 @@
+import { TagGroupProps } from 'react-aria-components';
+export type { TagGroupProps };
+export declare const TagGroup: import('react').ForwardRefExoticComponent<TagGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/tag/tag-group/index.d.ts

@@ -0,0 +1 @@
+export * from './TagGroup';

package/tag/tag-list/TagList.d.ts

@@ -0,0 +1,5 @@
+import { TagListProps } from 'react-aria-components';
+import { ForwardedRef } from 'react';
+export type { TagListProps };
+declare const TagListInner: <T extends object>(props: TagListProps<T>, ref?: ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const TagList: <T>(props: TagListProps<T>, ref?: ForwardedRef<HTMLDivElement>) => ReturnType<typeof TagListInner>;

package/tag/tag-list/index.d.ts

@@ -0,0 +1 @@
+export * from './TagList';

package/assets/Tag.css

@@ -1 +0,0 @@
-._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/Tag-C7VZ0T0o.js

@@ -1,53 +0,0 @@
-import { jsxs as r, jsx as n } from "react/jsx-runtime";
-import { Tag as c, TagGroup as _, TagList as e } from "react-aria-components";
-import { B as g } from "./Button-CaLOUTDO.js";
-import { c as u } from "./clsx-AexbMWKp.js";
-import { X as l } from "./x-B9bYxG31.js";
-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 = {
-  button: T,
-  success: p,
-  warning: f,
-  info: d,
-  important: x,
-  tag: b,
-  tagText: w,
-  dismissable: L,
-  tagList: N
-}, B = ({ children: o, ...t }) => /* @__PURE__ */ n(_, { ...t, children: /* @__PURE__ */ n(e, { className: s.tagList, children: o }) }), $ = ({
-  children: o,
-  dismissable: t,
-  className: i,
-  type: a,
-  ...m
-}) => /* @__PURE__ */ r(
-  c,
-  {
-    className: u(
-      s.tag,
-      t && s.dismissable,
-      a === "success" && s.success,
-      a === "info" && s.info,
-      a === "important" && s.important,
-      a === "warning" && s.warning,
-      i
-    ),
-    ...m,
-    children: [
-      /* @__PURE__ */ n("div", { className: s.tagText, children: o }),
-      t && /* @__PURE__ */ n(
-        g,
-        {
-          variant: "icon",
-          size: "medium",
-          className: s.button,
-          slot: "remove",
-          children: /* @__PURE__ */ n(l, { size: 20 })
-        }
-      )
-    ]
-  }
-);
-export {
-  $ as T,
-  B as a
-};