@stenajs-webui/elements 16.0.0 → 16.1.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 (4) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/index.es.js +5 -5
  3. package/dist/index.js +5 -5
  4. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,15 @@
1
+ # v16.1.0 (Fri Jun 17 2022)
2
+
3
+ #### 🚀 Enhancement
4
+
5
+ - Accessible font-sizes using `rem` instead of `px` [#458](https://github.com/StenaIT/stenajs-webui/pull/458) ([@mattias800](https://github.com/mattias800))
6
+
7
+ #### Authors: 1
8
+
9
+ - Mattias Andersson ([@mattias800](https://github.com/mattias800))
10
+
11
+ ---
12
+
1
13
  # v15.5.10 (Thu Jun 02 2022)
2
14
 
3
15
  #### 🐛 Bug Fix
package/dist/index.es.js CHANGED
@@ -201,7 +201,7 @@ var Banner = function (_a) {
201
201
  children))))));
202
202
  };
203
203
 
204
- var css_248z$k = ".Link-module_link__2PdX5 {\n /* Theme vars */\n --swui-link-font-family: var(--swui-font-primary);\n --swui-link-font-weight: var(--swui-font-weight-link);\n --swui-link-text-decoration: underline;\n --swui-link-letter-spacing: var(--swui-text-letter-spacing);\n --swui-link-color: var(--swui-text-action-color);\n --swui-link-color-hover: var(--swui-text-action-color-focus);\n --swui-link-color-active: var(--swui-text-action-color-active);\n --swui-link-color-focus: var(--swui-text-action-color-focus);\n --swui-link-color-disabled: var(--lhds-color-ui-600);\n --swui-link-focus-highlight-color: var(--lhds-color-blue-300);\n --swui-link-focus-highlight-color-disabled: var(--swui-link-color-disabled);\n\n /* Current */\n --current-color: var(--swui-link-color);\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n --current-letter-spacing: var(--swui-link-letter-spacing);\n --current-font-weight: var(--swui-link-font-weight);\n\n /* Styling */\n font-size: var(--current-font-size);\n line-height: var(--current-line-height);\n color: var(--current-color);\n letter-spacing: var(--current-letter-spacing);\n font-family: var(--swui-link-font-family);\n font-weight: var(--current-font-weight);\n\n box-sizing: border-box;\n outline: 1px dashed var(--current-focus-highlight-color);\n -webkit-text-decoration: var(--swui-link-text-decoration);\n text-decoration: var(--swui-link-text-decoration);\n}\n\n .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7) {\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus:not(:active) {\n --current-focus-highlight-color: var(--swui-link-focus-highlight-color);\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus.Link-module_disabled__1OQi7 {\n --current-focus-highlight-color: var(\n --swui-link-focus-highlight-color-disabled\n );\n cursor: default;\n }\n\n .Link-module_link__2PdX5:hover {\n --current-color: var(--swui-link-color-hover);\n }\n\n .Link-module_link__2PdX5:active {\n --current-color: var(--swui-link-color-active);\n }\n\n .Link-module_link__2PdX5.Link-module_disabled__1OQi7 {\n --current-color: var(--swui-link-color-disabled);\n }\n\n .Link-module_link__2PdX5.Link-module_standard__14Aap {\n }\n\n .Link-module_link__2PdX5.Link-module_bold__3-ezF {\n --current-font-weight: var(--swui-font-weight-text-bold);\n }\n\n .Link-module_link__2PdX5.Link-module_caption__3pD2O {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n font-style: italic;\n }\n\n .Link-module_link__2PdX5.Link-module_overline__1Dwj2 {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n .Link-module_link__2PdX5.Link-module_large__2-rhd {\n --current-font-size: var(--swui-font-size-large);\n --current-line-height: var(--swui-line-height-large);\n --current-letter-spacing: 0;\n }\n\n .Link-module_link__2PdX5.Link-module_medium__1zXqA {\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n }\n\n .Link-module_link__2PdX5.Link-module_small__u0ZvN {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n }\n\n .Link-module_link__2PdX5.Link-module_smaller__1hvj_ {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing: 0;\n }\n";
204
+ var css_248z$k = ".Link-module_link__2PdX5 {\n /* Theme vars */\n --swui-link-font-family: var(--swui-font-primary);\n --swui-link-font-weight: var(--swui-font-weight-link);\n --swui-link-text-decoration: underline;\n --swui-link-letter-spacing: var(--swui-text-letter-spacing);\n --swui-link-color: var(--swui-text-action-color);\n --swui-link-color-hover: var(--swui-text-action-color-focus);\n --swui-link-color-active: var(--swui-text-action-color-active);\n --swui-link-color-focus: var(--swui-text-action-color-focus);\n --swui-link-color-disabled: var(--lhds-color-ui-600);\n --swui-link-focus-highlight-color: var(--lhds-color-blue-300);\n --swui-link-focus-highlight-color-disabled: var(--swui-link-color-disabled);\n\n /* Current */\n --current-color: var(--swui-link-color);\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n --current-letter-spacing: var(--swui-link-letter-spacing);\n --current-font-weight: var(--swui-link-font-weight);\n\n /* Styling */\n font-size: var(--current-font-size);\n line-height: var(--current-line-height);\n color: var(--current-color);\n letter-spacing: var(--current-letter-spacing);\n font-family: var(--swui-link-font-family);\n font-weight: var(--current-font-weight);\n\n box-sizing: border-box;\n outline: 1px dashed var(--current-focus-highlight-color);\n -webkit-text-decoration: var(--swui-link-text-decoration);\n text-decoration: var(--swui-link-text-decoration);\n}\n\n .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7) {\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus:not(:active) {\n --current-focus-highlight-color: var(--swui-link-focus-highlight-color);\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus.Link-module_disabled__1OQi7 {\n --current-focus-highlight-color: var(\n --swui-link-focus-highlight-color-disabled\n );\n cursor: default;\n }\n\n .Link-module_link__2PdX5:hover {\n --current-color: var(--swui-link-color-hover);\n }\n\n .Link-module_link__2PdX5:active {\n --current-color: var(--swui-link-color-active);\n }\n\n .Link-module_link__2PdX5.Link-module_disabled__1OQi7 {\n --current-color: var(--swui-link-color-disabled);\n }\n\n .Link-module_link__2PdX5.Link-module_standard__14Aap {\n }\n\n .Link-module_link__2PdX5.Link-module_bold__3-ezF {\n --current-font-weight: var(--swui-font-weight-text-bold);\n }\n\n .Link-module_link__2PdX5.Link-module_caption__3pD2O {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n font-style: italic;\n }\n\n .Link-module_link__2PdX5.Link-module_overline__1Dwj2 {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing: 0.1rem;\n text-transform: uppercase;\n }\n\n .Link-module_link__2PdX5.Link-module_large__2-rhd {\n --current-font-size: var(--swui-font-size-large);\n --current-line-height: var(--swui-line-height-large);\n --current-letter-spacing: 0;\n }\n\n .Link-module_link__2PdX5.Link-module_medium__1zXqA {\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n }\n\n .Link-module_link__2PdX5.Link-module_small__u0ZvN {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n }\n\n .Link-module_link__2PdX5.Link-module_smaller__1hvj_ {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing: 0;\n }\n";
205
205
  var styles$i = {"link":"Link-module_link__2PdX5","disabled":"Link-module_disabled__1OQi7","standard":"Link-module_standard__14Aap","bold":"Link-module_bold__3-ezF","caption":"Link-module_caption__3pD2O","overline":"Link-module_overline__1Dwj2","large":"Link-module_large__2-rhd","medium":"Link-module_medium__1zXqA","small":"Link-module_small__u0ZvN","smaller":"Link-module_smaller__1hvj_"};
206
206
  styleInject(css_248z$k);
207
207
 
@@ -296,7 +296,7 @@ var BreadCrumbs = function (_a) {
296
296
  child)))); })));
297
297
  };
298
298
 
299
- var css_248z$h = ".Crumb-module_crumb__1qiJN {\n color: var(--swui-text-action-color);\n font-size: 10px;\n font-family: var(--swui-font-primary);\n font-weight: var(--swui-font-weight-text-bold);\n letter-spacing: 1px;\n text-decoration: none;\n cursor: pointer;\n}\n\n.Crumb-module_crumb__1qiJN:hover {\n text-decoration: underline;\n color: var(--swui-text-action-color-hover);\n}\n\n.Crumb-module_crumb__1qiJN:focus {\n color: var(--swui-text-action-color-focus);\n}\n\n.Crumb-module_crumb__1qiJN:active {\n text-decoration: underline;\n color: var(--swui-text-action-color-active);\n}\n";
299
+ var css_248z$h = ".Crumb-module_crumb__1qiJN {\n color: var(--swui-text-action-color);\n font-size: 1rem;\n font-family: var(--swui-font-primary);\n font-weight: var(--swui-font-weight-text-bold);\n letter-spacing: 0.1rem;\n text-decoration: none;\n cursor: pointer;\n}\n\n.Crumb-module_crumb__1qiJN:hover {\n text-decoration: underline;\n color: var(--swui-text-action-color-hover);\n}\n\n.Crumb-module_crumb__1qiJN:focus {\n color: var(--swui-text-action-color-focus);\n}\n\n.Crumb-module_crumb__1qiJN:active {\n text-decoration: underline;\n color: var(--swui-text-action-color-active);\n}\n";
300
300
  var styles$f = {"crumb":"Crumb-module_crumb__1qiJN"};
301
301
  styleInject(css_248z$h);
302
302
 
@@ -309,7 +309,7 @@ var Crumb = function (_a) {
309
309
  return React.createElement("span", { className: styles$f.crumb }, label.toUpperCase());
310
310
  };
311
311
 
312
- var css_248z$g = ".Button-module_button__qBMg_ {\n /* Theme vars */\n --swui-button-line-height: 16px;\n --swui-button-font-weight: 400;\n --swui-button-icon-color: var(--swui-white);\n --swui-button-text-size: var(--swui-font-size-medium);\n --swui-button-text-color: var(--swui-white);\n --swui-button-text-decoration: none;\n --swui-button-letter-spacing: var(--swui-field-letter-spacing);\n --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 2 - 1px);\n\n /* Text */\n --swui-button-text-color-focus: var(--swui-button-text-color);\n --swui-button-text-color-hover: var(--swui-button-text-color);\n --swui-button-text-color-active: var(--swui-button-text-color);\n --swui-button-text-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-text-color: var(--swui-button-text-color);\n --swui-button-danger-text-color-focus: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-hover: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-active: var(--swui-button-danger-text-color);\n\n --swui-button-success-text-color: var(--swui-button-text-color);\n --swui-button-success-text-color-focus: var(--swui-button-success-text-color);\n --swui-button-success-text-color-hover: var(--swui-button-success-text-color);\n --swui-button-success-text-color-active: var(\n --swui-button-success-text-color\n );\n\n /* Icon */\n --swui-button-icon-color-focus: var(--swui-button-icon-color);\n --swui-button-icon-color-hover: var(--swui-button-icon-color);\n --swui-button-icon-color-active: var(--swui-button-icon-color);\n --swui-button-icon-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-icon-color: var(--swui-button-icon-color);\n --swui-button-danger-icon-color-focus: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-hover: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-active: var(--swui-button-danger-icon-color);\n\n --swui-button-success-icon-color: var(--swui-button-icon-color);\n --swui-button-success-icon-color-focus: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-hover: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-active: var(\n --swui-button-success-icon-color\n );\n\n /* Background */\n --swui-button-background-color: var(--swui-primary-action-color);\n --swui-button-background-color-active: var(\n --swui-primary-action-color-active\n );\n --swui-button-background-color-focus: var(--swui-primary-action-color-focus);\n --swui-button-background-color-hover: var(--swui-primary-action-color-hover);\n --swui-button-background-color-disabled: var(\n --swui-primary-action-color-disabled\n );\n\n --swui-button-danger-background-color: var(--lhds-color-red-500);\n --swui-button-danger-background-color-active: var(--lhds-color-red-900);\n --swui-button-danger-background-color-focus: var(--lhds-color-red-700);\n --swui-button-danger-background-color-hover: var(--lhds-color-red-600);\n\n --swui-button-success-background-color: var(--lhds-color-green-600);\n --swui-button-success-background-color-active: var(--lhds-color-green-900);\n --swui-button-success-background-color-focus: var(--lhds-color-green-800);\n --swui-button-success-background-color-hover: var(--lhds-color-green-700);\n\n /* Border */\n --swui-button-border-color: var(--swui-button-background-color);\n --swui-button-border-radius: var(--swui-border-radius);\n --swui-button-border-radius-icon-only: var(--swui-border-radius);\n --swui-button-border-color-focus: var(--swui-button-background-color-focus);\n --swui-button-border-color-hover: var(--swui-button-background-color-hover);\n --swui-button-border-color-active: var(--swui-button-background-color-active);\n --swui-button-border-color-disabled: var(--lhds-color-ui-400);\n\n --swui-button-danger-border-color: var(--swui-button-danger-background-color);\n --swui-button-danger-border-color-focus: var(\n --swui-button-danger-background-color-focus\n );\n --swui-button-danger-border-color-hover: var(\n --swui-button-danger-background-color-hover\n );\n --swui-button-danger-border-color-active: var(\n --swui-button-danger-background-color-active\n );\n\n --swui-button-success-border-color: var(\n --swui-button-success-background-color\n );\n --swui-button-success-border-color-focus: var(\n --swui-button-success-background-color-focus\n );\n --swui-button-success-border-color-hover: var(\n --swui-button-success-background-color-hover\n );\n --swui-button-success-border-color-active: var(\n --swui-button-success-background-color-active\n );\n\n /* Shadow */\n --swui-button-box-shadow-focus: 0 0 4px 0 var(--lhds-color-blue-300);\n --swui-button-box-shadow-hover: 0 1px 1px 1px rgba(29, 100, 171, 0.16),\n 0 0 1px 0 rgba(29, 100, 171, 0.16);\n --swui-button-box-shadow: 0 1px 0 0 rgba(29, 100, 171, 0.08),\n 0 0 1px -1px rgba(29, 100, 171, 0.1);\n --swui-button-box-shadow-active: none;\n --swui-button-box-shadow-disabled: none;\n\n /*\n * Styling\n */\n --current-background-color: var(--swui-button-background-color);\n --current-icon-height: 16px;\n --current-icon-color: var(--swui-button-icon-color);\n --current-text-color: var(--swui-button-text-color);\n --current-border-color: var(--swui-button-border-color);\n\n box-sizing: border-box;\n letter-spacing: var(--swui-button-letter-spacing);\n -webkit-text-decoration: var(--swui-button-text-decoration);\n text-decoration: var(--swui-button-text-decoration);\n padding: var(--swui-button-padding-vertical)\n var(--swui-button-padding-horizontal);\n border: 1px solid var(--current-border-color);\n background-color: var(--current-background-color);\n border-radius: var(--swui-button-border-radius);\n box-shadow: var(--current-box-shadow, var(--swui-button-box-shadow));\n color: var(--current-text-color);\n font-size: var(--current-text-size, var(--swui-button-text-size));\n line-height: var(--current-line-height, var(--swui-button-line-height));\n font-weight: var(--swui-button-font-weight);\n font-family: var(--swui-font-buttons);\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT {\n padding: var(--swui-button-padding-vertical);\n color: var(--current-icon-color);\n flex: none;\n\n border-radius: var(--swui-button-border-radius-icon-only);\n\n width: 32px;\n height: 32px;\n justify-content: center;\n align-items: center;\n display: flex;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_small__2fGop {\n width: 24px;\n height: 24px;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_large__22CGX {\n width: 40px;\n height: 40px;\n }\n\n /*\n * State and variants\n */\n\n .Button-module_button__qBMg_.Button-module_small__2fGop {\n --current-line-height: 16px;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) / 2 - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) - 1px);\n --current-text-size: 12px;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX {\n --current-line-height: 24px;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 3 - 1px);\n --current-text-size: 16px;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX.Button-module_iconButton__1-wQT {\n --current-icon-height: 24px;\n }\n\n .Button-module_button__qBMg_:hover {\n --current-background-color: var(--swui-button-background-color-hover);\n --current-border-color: var(--swui-button-border-color-hover);\n --current-icon-color: var(--swui-button-icon-color-hover);\n --current-text-color: var(--swui-button-text-color-hover);\n --current-box-shadow: var(--swui-button-box-shadow-hover);\n }\n\n .Button-module_button__qBMg_:focus {\n outline: 0;\n --current-background-color: var(--swui-button-background-color-focus);\n --current-border-color: var(--swui-button-border-color-focus);\n --current-icon-color: var(--swui-button-icon-color-focus);\n --current-text-color: var(--swui-button-text-color-focus);\n --current-box-shadow: var(--swui-button-box-shadow-focus);\n }\n\n .Button-module_button__qBMg_:active {\n --current-background-color: var(--swui-button-background-color-active);\n --current-border-color: var(--swui-button-border-color-active);\n --current-icon-color: var(--swui-button-icon-color-active);\n --current-text-color: var(--swui-button-text-color-active);\n --current-box-shadow: var(--swui-button-box-shadow-active);\n }\n\n .Button-module_button__qBMg_:disabled {\n --current-background-color: var(--swui-button-background-color-disabled);\n --current-border-color: var(--swui-button-border-color-disabled);\n --current-icon-color: var(--swui-button-icon-color-disabled);\n --current-text-color: var(--swui-button-text-color-disabled);\n --current-box-shadow: var(--swui-button-box-shadow-disabled);\n cursor: not-allowed;\n }\n\n .Button-module_button__qBMg_.Button-module_normal__ZIWYY {\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled) {\n --current-background-color: var(--swui-button-danger-background-color);\n --current-border-color: var(--swui-button-danger-border-color);\n --current-text-color: var(--swui-button-danger-text-color);\n --current-icon-color: var(--swui-button-danger-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-danger-background-color-hover\n );\n --current-border-color: var(--swui-button-danger-border-color-hover);\n --current-text-color: var(--swui-button-danger-text-color-hover);\n --current-icon-color: var(--swui-button-danger-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-danger-background-color-focus\n );\n --current-border-color: var(--swui-button-danger-border-color-focus);\n --current-text-color: var(--swui-button-danger-text-color-focus);\n --current-icon-color: var(--swui-button-danger-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):active {\n --current-background-color: var(\n --swui-button-danger-background-color-active\n );\n --current-border-color: var(--swui-button-danger-border-color-active);\n --current-text-color: var(--swui-button-danger-text-color-active);\n --current-icon-color: var(--swui-button-danger-icon-color-active);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled) {\n --current-background-color: var(--swui-button-success-background-color);\n --current-border-color: var(--swui-button-success-border-color);\n --current-text-color: var(--swui-button-success-text-color);\n --current-icon-color: var(--swui-button-success-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-success-background-color-hover\n );\n --current-border-color: var(--swui-button-success-border-color-hover);\n --current-text-color: var(--swui-button-success-text-color-hover);\n --current-icon-color: var(--swui-button-success-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-success-background-color-focus\n );\n --current-border-color: var(--swui-button-success-border-color-focus);\n --current-text-color: var(--swui-button-success-text-color-focus);\n --current-icon-color: var(--swui-button-success-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):active {\n --current-background-color: var(\n --swui-button-success-background-color-active\n );\n --current-border-color: var(--swui-button-success-border-color-active);\n --current-text-color: var(--swui-button-success-text-color-active);\n --current-icon-color: var(--swui-button-success-icon-color-active);\n }\n";
312
+ var css_248z$g = ".Button-module_button__qBMg_ {\n /* Theme vars */\n --swui-button-line-height: 1.6rem;\n --swui-button-font-weight: 400;\n --swui-button-text-size: var(--swui-font-size-medium);\n --swui-button-text-color: var(--swui-white);\n --swui-button-text-decoration: none;\n --swui-button-letter-spacing: var(--swui-field-letter-spacing);\n --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 2 - 1px);\n\n /* Text */\n --swui-button-text-color-focus: var(--swui-button-text-color);\n --swui-button-text-color-hover: var(--swui-button-text-color);\n --swui-button-text-color-active: var(--swui-button-text-color);\n --swui-button-text-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-text-color: var(--swui-button-text-color);\n --swui-button-danger-text-color-focus: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-hover: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-active: var(--swui-button-danger-text-color);\n\n --swui-button-success-text-color: var(--swui-button-text-color);\n --swui-button-success-text-color-focus: var(--swui-button-success-text-color);\n --swui-button-success-text-color-hover: var(--swui-button-success-text-color);\n --swui-button-success-text-color-active: var(\n --swui-button-success-text-color\n );\n\n /* Icon */\n --swui-button-icon-height: 1.6rem;\n --swui-button-icon-height-large: 2.4rem;\n\n --swui-button-icon-color: var(--swui-white);\n --swui-button-icon-color-focus: var(--swui-button-icon-color);\n --swui-button-icon-color-hover: var(--swui-button-icon-color);\n --swui-button-icon-color-active: var(--swui-button-icon-color);\n --swui-button-icon-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-icon-color: var(--swui-button-icon-color);\n --swui-button-danger-icon-color-focus: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-hover: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-active: var(--swui-button-danger-icon-color);\n\n --swui-button-success-icon-color: var(--swui-button-icon-color);\n --swui-button-success-icon-color-focus: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-hover: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-active: var(\n --swui-button-success-icon-color\n );\n\n /* Background */\n --swui-button-background-color: var(--swui-primary-action-color);\n --swui-button-background-color-active: var(\n --swui-primary-action-color-active\n );\n --swui-button-background-color-focus: var(--swui-primary-action-color-focus);\n --swui-button-background-color-hover: var(--swui-primary-action-color-hover);\n --swui-button-background-color-disabled: var(\n --swui-primary-action-color-disabled\n );\n\n --swui-button-danger-background-color: var(--lhds-color-red-500);\n --swui-button-danger-background-color-active: var(--lhds-color-red-900);\n --swui-button-danger-background-color-focus: var(--lhds-color-red-700);\n --swui-button-danger-background-color-hover: var(--lhds-color-red-600);\n\n --swui-button-success-background-color: var(--lhds-color-green-600);\n --swui-button-success-background-color-active: var(--lhds-color-green-900);\n --swui-button-success-background-color-focus: var(--lhds-color-green-800);\n --swui-button-success-background-color-hover: var(--lhds-color-green-700);\n\n /* Border */\n --swui-button-border-color: var(--swui-button-background-color);\n --swui-button-border-radius: var(--swui-border-radius);\n --swui-button-border-radius-icon-only: var(--swui-border-radius);\n --swui-button-border-color-focus: var(--swui-button-background-color-focus);\n --swui-button-border-color-hover: var(--swui-button-background-color-hover);\n --swui-button-border-color-active: var(--swui-button-background-color-active);\n --swui-button-border-color-disabled: var(--lhds-color-ui-400);\n\n --swui-button-danger-border-color: var(--swui-button-danger-background-color);\n --swui-button-danger-border-color-focus: var(\n --swui-button-danger-background-color-focus\n );\n --swui-button-danger-border-color-hover: var(\n --swui-button-danger-background-color-hover\n );\n --swui-button-danger-border-color-active: var(\n --swui-button-danger-background-color-active\n );\n\n --swui-button-success-border-color: var(\n --swui-button-success-background-color\n );\n --swui-button-success-border-color-focus: var(\n --swui-button-success-background-color-focus\n );\n --swui-button-success-border-color-hover: var(\n --swui-button-success-background-color-hover\n );\n --swui-button-success-border-color-active: var(\n --swui-button-success-background-color-active\n );\n\n /* Shadow */\n --swui-button-box-shadow-focus: 0 0 4px 0 var(--lhds-color-blue-300);\n --swui-button-box-shadow-hover: 0 1px 1px 1px rgba(29, 100, 171, 0.16),\n 0 0 1px 0 rgba(29, 100, 171, 0.16);\n --swui-button-box-shadow: 0 1px 0 0 rgba(29, 100, 171, 0.08),\n 0 0 1px -1px rgba(29, 100, 171, 0.1);\n --swui-button-box-shadow-active: none;\n --swui-button-box-shadow-disabled: none;\n\n /*\n * Styling\n */\n --current-background-color: var(--swui-button-background-color);\n --current-icon-height: var(--swui-button-icon-height);\n --current-icon-color: var(--swui-button-icon-color);\n --current-text-color: var(--swui-button-text-color);\n --current-border-color: var(--swui-button-border-color);\n\n box-sizing: border-box;\n letter-spacing: var(--swui-button-letter-spacing);\n -webkit-text-decoration: var(--swui-button-text-decoration);\n text-decoration: var(--swui-button-text-decoration);\n padding: var(--swui-button-padding-vertical)\n var(--swui-button-padding-horizontal);\n border: 1px solid var(--current-border-color);\n background-color: var(--current-background-color);\n border-radius: var(--swui-button-border-radius);\n box-shadow: var(--current-box-shadow, var(--swui-button-box-shadow));\n color: var(--current-text-color);\n font-size: var(--current-text-size, var(--swui-button-text-size));\n line-height: var(--current-line-height, var(--swui-button-line-height));\n font-weight: var(--swui-button-font-weight);\n font-family: var(--swui-font-buttons);\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT {\n padding: var(--swui-button-padding-vertical);\n color: var(--current-icon-color);\n flex: none;\n\n border-radius: var(--swui-button-border-radius-icon-only);\n\n width: 32px;\n height: 32px;\n justify-content: center;\n align-items: center;\n display: flex;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_small__2fGop {\n width: 24px;\n height: 24px;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_large__22CGX {\n width: 40px;\n height: 40px;\n }\n\n /*\n * State and variants\n */\n\n .Button-module_button__qBMg_.Button-module_small__2fGop {\n --current-line-height: 1.6rem;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) / 2 - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) - 1px);\n --current-text-size: 1.2rem;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX {\n --current-line-height: 2.4rem;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 3 - 1px);\n --current-text-size: 1.6rem;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX.Button-module_iconButton__1-wQT {\n --current-icon-height: var(--swui-button-icon-height-large);\n }\n\n .Button-module_button__qBMg_:hover {\n --current-background-color: var(--swui-button-background-color-hover);\n --current-border-color: var(--swui-button-border-color-hover);\n --current-icon-color: var(--swui-button-icon-color-hover);\n --current-text-color: var(--swui-button-text-color-hover);\n --current-box-shadow: var(--swui-button-box-shadow-hover);\n }\n\n .Button-module_button__qBMg_:focus {\n outline: 0;\n --current-background-color: var(--swui-button-background-color-focus);\n --current-border-color: var(--swui-button-border-color-focus);\n --current-icon-color: var(--swui-button-icon-color-focus);\n --current-text-color: var(--swui-button-text-color-focus);\n --current-box-shadow: var(--swui-button-box-shadow-focus);\n }\n\n .Button-module_button__qBMg_:active {\n --current-background-color: var(--swui-button-background-color-active);\n --current-border-color: var(--swui-button-border-color-active);\n --current-icon-color: var(--swui-button-icon-color-active);\n --current-text-color: var(--swui-button-text-color-active);\n --current-box-shadow: var(--swui-button-box-shadow-active);\n }\n\n .Button-module_button__qBMg_:disabled {\n --current-background-color: var(--swui-button-background-color-disabled);\n --current-border-color: var(--swui-button-border-color-disabled);\n --current-icon-color: var(--swui-button-icon-color-disabled);\n --current-text-color: var(--swui-button-text-color-disabled);\n --current-box-shadow: var(--swui-button-box-shadow-disabled);\n cursor: not-allowed;\n }\n\n .Button-module_button__qBMg_.Button-module_normal__ZIWYY {\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled) {\n --current-background-color: var(--swui-button-danger-background-color);\n --current-border-color: var(--swui-button-danger-border-color);\n --current-text-color: var(--swui-button-danger-text-color);\n --current-icon-color: var(--swui-button-danger-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-danger-background-color-hover\n );\n --current-border-color: var(--swui-button-danger-border-color-hover);\n --current-text-color: var(--swui-button-danger-text-color-hover);\n --current-icon-color: var(--swui-button-danger-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-danger-background-color-focus\n );\n --current-border-color: var(--swui-button-danger-border-color-focus);\n --current-text-color: var(--swui-button-danger-text-color-focus);\n --current-icon-color: var(--swui-button-danger-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):active {\n --current-background-color: var(\n --swui-button-danger-background-color-active\n );\n --current-border-color: var(--swui-button-danger-border-color-active);\n --current-text-color: var(--swui-button-danger-text-color-active);\n --current-icon-color: var(--swui-button-danger-icon-color-active);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled) {\n --current-background-color: var(--swui-button-success-background-color);\n --current-border-color: var(--swui-button-success-border-color);\n --current-text-color: var(--swui-button-success-text-color);\n --current-icon-color: var(--swui-button-success-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-success-background-color-hover\n );\n --current-border-color: var(--swui-button-success-border-color-hover);\n --current-text-color: var(--swui-button-success-text-color-hover);\n --current-icon-color: var(--swui-button-success-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-success-background-color-focus\n );\n --current-border-color: var(--swui-button-success-border-color-focus);\n --current-text-color: var(--swui-button-success-text-color-focus);\n --current-icon-color: var(--swui-button-success-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):active {\n --current-background-color: var(\n --swui-button-success-background-color-active\n );\n --current-border-color: var(--swui-button-success-border-color-active);\n --current-text-color: var(--swui-button-success-text-color-active);\n --current-icon-color: var(--swui-button-success-icon-color-active);\n }\n";
313
313
  var styles$e = {"button":"Button-module_button__qBMg_","iconButton":"Button-module_iconButton__1-wQT","small":"Button-module_small__2fGop","large":"Button-module_large__22CGX","normal":"Button-module_normal__ZIWYY","danger":"Button-module_danger__2b61k","success":"Button-module_success__23dYZ"};
314
314
  styleInject(css_248z$g);
315
315
 
@@ -441,7 +441,7 @@ var CardBody = function (_a) {
441
441
  return React.createElement(Column, __assign({ indent: 3, spacing: variant === "compact" ? 1 : 3 }, props));
442
442
  };
443
443
 
444
- var css_248z$8 = ".Chip-module_chip__3Uf1d {\n /* Theme vars */\n --swui-chip-font-size: var(--swui-font-size-small);\n --swui-chip-line-height: var(--swui-line-height-small);\n --swui-chip-font-weight: var(--swui-font-weight-text);\n --swui-chip-font-family: var(--swui-font-primary);\n --swui-chip-letter-spacing: var(--swui-text-letter-spacing);\n --swui-chip-height: 24px;\n --swui-chip-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n\n /* Styling */\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n border-radius: var(--swui-chip-border-radius);\n background-color: var(--current-bg-color);\n}\n\n .Chip-module_chip__3Uf1d .Chip-module_chipCell__2bQON {\n font-family: var(--swui-chip-font-family);\n font-size: var(--swui-chip-font-size);\n font-weight: var(--swui-chip-font-weight);\n line-height: var(--swui-chip-line-height);\n color: var(--current-text-color);\n height: var(--swui-chip-height);\n display: flex;\n align-items: center;\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv {\n white-space: nowrap;\n padding: 0 var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d button {\n background: transparent;\n border: none;\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .Chip-module_chip__3Uf1d button:hover {\n background-color: var(--current-bg-color-hover);\n }\n\n .Chip-module_chip__3Uf1d button:focus {\n background-color: var(--current-bg-color-focus);\n outline: none;\n }\n\n .Chip-module_chip__3Uf1d button:active {\n background-color: var(--current-bg-color-active);\n }\n\n .Chip-module_chip__3Uf1d button:first-child {\n border-top-left-radius: var(--swui-chip-border-radius);\n border-bottom-left-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d button:last-child {\n border-top-right-radius: var(--swui-chip-border-radius);\n border-bottom-right-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_clickable__3zjMU {\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 {\n padding-left: var(--swui-metrics-space);\n padding-right: var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 svg {\n color: var(--current-text-color);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i {\n --current-bg-color: var(--swui-primary-action-color);\n --current-text-color: var(--swui-white);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY {\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n --current-bg-color-hover: var(--lhds-color-blue-200);\n --current-bg-color-focus: var(--lhds-color-blue-200);\n --current-bg-color-active: var(--lhds-color-blue-300);\n }\n";
444
+ var css_248z$8 = ".Chip-module_chip__3Uf1d {\n /* Theme vars */\n --swui-chip-font-size: var(--swui-font-size-small);\n --swui-chip-line-height: var(--swui-line-height-small);\n --swui-chip-font-weight: var(--swui-font-weight-text);\n --swui-chip-font-family: var(--swui-font-primary);\n --swui-chip-letter-spacing: var(--swui-text-letter-spacing);\n --swui-chip-height: 24px;\n --swui-chip-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n\n /* Styling */\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n border-radius: var(--swui-chip-border-radius);\n background-color: var(--current-bg-color);\n}\n\n .Chip-module_chip__3Uf1d .Chip-module_chipCell__2bQON {\n font-family: var(--swui-chip-font-family);\n font-size: var(--swui-chip-font-size);\n font-weight: var(--swui-chip-font-weight);\n line-height: var(--swui-chip-line-height);\n color: var(--current-text-color);\n min-height: var(--swui-chip-height);\n display: flex;\n align-items: center;\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv {\n white-space: nowrap;\n padding: 0 var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d button {\n background: transparent;\n border: none;\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .Chip-module_chip__3Uf1d button:hover {\n background-color: var(--current-bg-color-hover);\n }\n\n .Chip-module_chip__3Uf1d button:focus {\n background-color: var(--current-bg-color-focus);\n outline: none;\n }\n\n .Chip-module_chip__3Uf1d button:active {\n background-color: var(--current-bg-color-active);\n }\n\n .Chip-module_chip__3Uf1d button:first-child {\n border-top-left-radius: var(--swui-chip-border-radius);\n border-bottom-left-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d button:last-child {\n border-top-right-radius: var(--swui-chip-border-radius);\n border-bottom-right-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_clickable__3zjMU {\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 {\n padding-left: var(--swui-metrics-space);\n padding-right: var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 svg {\n color: var(--current-text-color);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i {\n --current-bg-color: var(--swui-primary-action-color);\n --current-text-color: var(--swui-white);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY {\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n --current-bg-color-hover: var(--lhds-color-blue-200);\n --current-bg-color-focus: var(--lhds-color-blue-200);\n --current-bg-color-active: var(--lhds-color-blue-300);\n }\n";
445
445
  var styles$8 = {"chip":"Chip-module_chip__3Uf1d","chipCell":"Chip-module_chipCell__2bQON","label":"Chip-module_label__3gHgv","clickable":"Chip-module_clickable__3zjMU","close":"Chip-module_close__2uEi1","primary":"Chip-module_primary__3kb_i","secondary":"Chip-module_secondary__2hWgY"};
446
446
  styleInject(css_248z$8);
447
447
 
@@ -638,7 +638,7 @@ var TabMenu = function (_a) {
638
638
  return (React.createElement(Row, { className: cx(styles$2.tabMenu, (_b = {}, _b[styles$2.withBorder] = enableBorder, _b)), gap: 2, role: "tablist" }, children));
639
639
  };
640
640
 
641
- var css_248z$1 = ".Tag-module_tag__1jkHo {\n /* Theme vars */\n --swui-tag-font-size: var(--swui-font-size-small);\n --swui-tag-line-height: var(--swui-line-height-small);\n --swui-tag-font-weight: var(--swui-font-weight-text);\n --swui-tag-font-family: var(--swui-font-primary);\n --swui-tag-letter-spacing: var(--swui-text-letter-spacing);\n --swui-tag-height-normal: 24px;\n --swui-tag-height-small: 16px;\n --swui-tag-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-border-color: var(--swui-primary-action-color);\n --current-height: var(--swui-tag-height-normal);\n\n /* Styling */\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n white-space: nowrap;\n border-radius: var(--swui-tag-border-radius);\n background-color: var(--current-bg-color);\n border: 1px solid var(--current-border-color);\n font-family: var(--swui-tag-font-family);\n font-size: var(--swui-tag-font-size);\n font-weight: var(--swui-tag-font-weight);\n line-height: var(--swui-tag-line-height);\n color: var(--current-text-color);\n height: var(--current-height);\n align-items: center;\n padding: 0 var(--swui-metrics-space);\n}\n\n .Tag-module_tag__1jkHo.Tag-module_small__2WMmo {\n --current-height: var(--swui-tag-height-small);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_info__1Nb3P {\n --current-border-color: var(--lhds-color-blue-300);\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_error__322oJ {\n --current-border-color: var(--lhds-color-red-300);\n --current-bg-color: var(--lhds-color-red-50);\n --current-text-color: var(--lhds-color-red-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_warning__2TcGy {\n --current-border-color: var(--lhds-color-orange-300);\n --current-bg-color: var(--lhds-color-orange-50);\n --current-text-color: var(--lhds-color-orange-900);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_success__2MOAb {\n --current-border-color: var(--lhds-color-green-300);\n --current-bg-color: var(--lhds-color-green-50);\n --current-text-color: var(--lhds-color-green-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_passive__1ZzM0 {\n --current-border-color: var(--lhds-color-ui-300);\n --current-bg-color: var(--lhds-color-ui-50);\n --current-text-color: var(--lhds-color-ui-800);\n }\n";
641
+ var css_248z$1 = ".Tag-module_tag__1jkHo {\n /* Theme vars */\n --swui-tag-font-size: var(--swui-font-size-small);\n --swui-tag-line-height: var(--swui-line-height-small);\n --swui-tag-font-weight: var(--swui-font-weight-text);\n --swui-tag-font-family: var(--swui-font-primary);\n --swui-tag-letter-spacing: var(--swui-text-letter-spacing);\n --swui-tag-height-normal: 24px;\n --swui-tag-height-small: 16px;\n --swui-tag-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-border-color: var(--swui-primary-action-color);\n --current-height: var(--swui-tag-height-normal);\n\n /* Styling */\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n white-space: nowrap;\n border-radius: var(--swui-tag-border-radius);\n background-color: var(--current-bg-color);\n border: 1px solid var(--current-border-color);\n font-family: var(--swui-tag-font-family);\n font-size: var(--swui-tag-font-size);\n font-weight: var(--swui-tag-font-weight);\n line-height: var(--swui-tag-line-height);\n color: var(--current-text-color);\n min-height: var(--current-height);\n align-items: center;\n padding: 0 var(--swui-metrics-space);\n}\n\n .Tag-module_tag__1jkHo.Tag-module_small__2WMmo {\n --current-height: var(--swui-tag-height-small);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_info__1Nb3P {\n --current-border-color: var(--lhds-color-blue-300);\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_error__322oJ {\n --current-border-color: var(--lhds-color-red-300);\n --current-bg-color: var(--lhds-color-red-50);\n --current-text-color: var(--lhds-color-red-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_warning__2TcGy {\n --current-border-color: var(--lhds-color-orange-300);\n --current-bg-color: var(--lhds-color-orange-50);\n --current-text-color: var(--lhds-color-orange-900);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_success__2MOAb {\n --current-border-color: var(--lhds-color-green-300);\n --current-bg-color: var(--lhds-color-green-50);\n --current-text-color: var(--lhds-color-green-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_passive__1ZzM0 {\n --current-border-color: var(--lhds-color-ui-300);\n --current-bg-color: var(--lhds-color-ui-50);\n --current-text-color: var(--lhds-color-ui-800);\n }\n";
642
642
  var styles$1 = {"tag":"Tag-module_tag__1jkHo","small":"Tag-module_small__2WMmo","info":"Tag-module_info__1Nb3P","error":"Tag-module_error__322oJ","warning":"Tag-module_warning__2TcGy","success":"Tag-module_success__2MOAb","passive":"Tag-module_passive__1ZzM0"};
643
643
  styleInject(css_248z$1);
644
644
 
package/dist/index.js CHANGED
@@ -228,7 +228,7 @@ var Banner = function (_a) {
228
228
  children))))));
229
229
  };
230
230
 
231
- var css_248z$k = ".Link-module_link__2PdX5 {\n /* Theme vars */\n --swui-link-font-family: var(--swui-font-primary);\n --swui-link-font-weight: var(--swui-font-weight-link);\n --swui-link-text-decoration: underline;\n --swui-link-letter-spacing: var(--swui-text-letter-spacing);\n --swui-link-color: var(--swui-text-action-color);\n --swui-link-color-hover: var(--swui-text-action-color-focus);\n --swui-link-color-active: var(--swui-text-action-color-active);\n --swui-link-color-focus: var(--swui-text-action-color-focus);\n --swui-link-color-disabled: var(--lhds-color-ui-600);\n --swui-link-focus-highlight-color: var(--lhds-color-blue-300);\n --swui-link-focus-highlight-color-disabled: var(--swui-link-color-disabled);\n\n /* Current */\n --current-color: var(--swui-link-color);\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n --current-letter-spacing: var(--swui-link-letter-spacing);\n --current-font-weight: var(--swui-link-font-weight);\n\n /* Styling */\n font-size: var(--current-font-size);\n line-height: var(--current-line-height);\n color: var(--current-color);\n letter-spacing: var(--current-letter-spacing);\n font-family: var(--swui-link-font-family);\n font-weight: var(--current-font-weight);\n\n box-sizing: border-box;\n outline: 1px dashed var(--current-focus-highlight-color);\n -webkit-text-decoration: var(--swui-link-text-decoration);\n text-decoration: var(--swui-link-text-decoration);\n}\n\n .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7) {\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus:not(:active) {\n --current-focus-highlight-color: var(--swui-link-focus-highlight-color);\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus.Link-module_disabled__1OQi7 {\n --current-focus-highlight-color: var(\n --swui-link-focus-highlight-color-disabled\n );\n cursor: default;\n }\n\n .Link-module_link__2PdX5:hover {\n --current-color: var(--swui-link-color-hover);\n }\n\n .Link-module_link__2PdX5:active {\n --current-color: var(--swui-link-color-active);\n }\n\n .Link-module_link__2PdX5.Link-module_disabled__1OQi7 {\n --current-color: var(--swui-link-color-disabled);\n }\n\n .Link-module_link__2PdX5.Link-module_standard__14Aap {\n }\n\n .Link-module_link__2PdX5.Link-module_bold__3-ezF {\n --current-font-weight: var(--swui-font-weight-text-bold);\n }\n\n .Link-module_link__2PdX5.Link-module_caption__3pD2O {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n font-style: italic;\n }\n\n .Link-module_link__2PdX5.Link-module_overline__1Dwj2 {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing: 1px;\n text-transform: uppercase;\n }\n\n .Link-module_link__2PdX5.Link-module_large__2-rhd {\n --current-font-size: var(--swui-font-size-large);\n --current-line-height: var(--swui-line-height-large);\n --current-letter-spacing: 0;\n }\n\n .Link-module_link__2PdX5.Link-module_medium__1zXqA {\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n }\n\n .Link-module_link__2PdX5.Link-module_small__u0ZvN {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n }\n\n .Link-module_link__2PdX5.Link-module_smaller__1hvj_ {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing: 0;\n }\n";
231
+ var css_248z$k = ".Link-module_link__2PdX5 {\n /* Theme vars */\n --swui-link-font-family: var(--swui-font-primary);\n --swui-link-font-weight: var(--swui-font-weight-link);\n --swui-link-text-decoration: underline;\n --swui-link-letter-spacing: var(--swui-text-letter-spacing);\n --swui-link-color: var(--swui-text-action-color);\n --swui-link-color-hover: var(--swui-text-action-color-focus);\n --swui-link-color-active: var(--swui-text-action-color-active);\n --swui-link-color-focus: var(--swui-text-action-color-focus);\n --swui-link-color-disabled: var(--lhds-color-ui-600);\n --swui-link-focus-highlight-color: var(--lhds-color-blue-300);\n --swui-link-focus-highlight-color-disabled: var(--swui-link-color-disabled);\n\n /* Current */\n --current-color: var(--swui-link-color);\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n --current-letter-spacing: var(--swui-link-letter-spacing);\n --current-font-weight: var(--swui-link-font-weight);\n\n /* Styling */\n font-size: var(--current-font-size);\n line-height: var(--current-line-height);\n color: var(--current-color);\n letter-spacing: var(--current-letter-spacing);\n font-family: var(--swui-link-font-family);\n font-weight: var(--current-font-weight);\n\n box-sizing: border-box;\n outline: 1px dashed var(--current-focus-highlight-color);\n -webkit-text-decoration: var(--swui-link-text-decoration);\n text-decoration: var(--swui-link-text-decoration);\n}\n\n .Link-module_link__2PdX5:not(.Link-module_disabled__1OQi7) {\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus:not(:active) {\n --current-focus-highlight-color: var(--swui-link-focus-highlight-color);\n cursor: pointer;\n }\n\n .Link-module_link__2PdX5:focus.Link-module_disabled__1OQi7 {\n --current-focus-highlight-color: var(\n --swui-link-focus-highlight-color-disabled\n );\n cursor: default;\n }\n\n .Link-module_link__2PdX5:hover {\n --current-color: var(--swui-link-color-hover);\n }\n\n .Link-module_link__2PdX5:active {\n --current-color: var(--swui-link-color-active);\n }\n\n .Link-module_link__2PdX5.Link-module_disabled__1OQi7 {\n --current-color: var(--swui-link-color-disabled);\n }\n\n .Link-module_link__2PdX5.Link-module_standard__14Aap {\n }\n\n .Link-module_link__2PdX5.Link-module_bold__3-ezF {\n --current-font-weight: var(--swui-font-weight-text-bold);\n }\n\n .Link-module_link__2PdX5.Link-module_caption__3pD2O {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n font-style: italic;\n }\n\n .Link-module_link__2PdX5.Link-module_overline__1Dwj2 {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing: 0.1rem;\n text-transform: uppercase;\n }\n\n .Link-module_link__2PdX5.Link-module_large__2-rhd {\n --current-font-size: var(--swui-font-size-large);\n --current-line-height: var(--swui-line-height-large);\n --current-letter-spacing: 0;\n }\n\n .Link-module_link__2PdX5.Link-module_medium__1zXqA {\n --current-font-size: var(--swui-font-size-medium);\n --current-line-height: var(--swui-line-height-medium);\n }\n\n .Link-module_link__2PdX5.Link-module_small__u0ZvN {\n --current-font-size: var(--swui-font-size-small);\n --current-line-height: var(--swui-line-height-small);\n --current-letter-spacing: 0;\n }\n\n .Link-module_link__2PdX5.Link-module_smaller__1hvj_ {\n --current-font-size: var(--swui-font-size-smaller);\n --current-line-height: var(--swui-line-height-smaller);\n --current-letter-spacing: 0;\n }\n";
232
232
  var styles$i = {"link":"Link-module_link__2PdX5","disabled":"Link-module_disabled__1OQi7","standard":"Link-module_standard__14Aap","bold":"Link-module_bold__3-ezF","caption":"Link-module_caption__3pD2O","overline":"Link-module_overline__1Dwj2","large":"Link-module_large__2-rhd","medium":"Link-module_medium__1zXqA","small":"Link-module_small__u0ZvN","smaller":"Link-module_smaller__1hvj_"};
233
233
  styleInject(css_248z$k);
234
234
 
@@ -323,7 +323,7 @@ var BreadCrumbs = function (_a) {
323
323
  child)))); })));
324
324
  };
325
325
 
326
- var css_248z$h = ".Crumb-module_crumb__1qiJN {\n color: var(--swui-text-action-color);\n font-size: 10px;\n font-family: var(--swui-font-primary);\n font-weight: var(--swui-font-weight-text-bold);\n letter-spacing: 1px;\n text-decoration: none;\n cursor: pointer;\n}\n\n.Crumb-module_crumb__1qiJN:hover {\n text-decoration: underline;\n color: var(--swui-text-action-color-hover);\n}\n\n.Crumb-module_crumb__1qiJN:focus {\n color: var(--swui-text-action-color-focus);\n}\n\n.Crumb-module_crumb__1qiJN:active {\n text-decoration: underline;\n color: var(--swui-text-action-color-active);\n}\n";
326
+ var css_248z$h = ".Crumb-module_crumb__1qiJN {\n color: var(--swui-text-action-color);\n font-size: 1rem;\n font-family: var(--swui-font-primary);\n font-weight: var(--swui-font-weight-text-bold);\n letter-spacing: 0.1rem;\n text-decoration: none;\n cursor: pointer;\n}\n\n.Crumb-module_crumb__1qiJN:hover {\n text-decoration: underline;\n color: var(--swui-text-action-color-hover);\n}\n\n.Crumb-module_crumb__1qiJN:focus {\n color: var(--swui-text-action-color-focus);\n}\n\n.Crumb-module_crumb__1qiJN:active {\n text-decoration: underline;\n color: var(--swui-text-action-color-active);\n}\n";
327
327
  var styles$f = {"crumb":"Crumb-module_crumb__1qiJN"};
328
328
  styleInject(css_248z$h);
329
329
 
@@ -336,7 +336,7 @@ var Crumb = function (_a) {
336
336
  return React__namespace.createElement("span", { className: styles$f.crumb }, label.toUpperCase());
337
337
  };
338
338
 
339
- var css_248z$g = ".Button-module_button__qBMg_ {\n /* Theme vars */\n --swui-button-line-height: 16px;\n --swui-button-font-weight: 400;\n --swui-button-icon-color: var(--swui-white);\n --swui-button-text-size: var(--swui-font-size-medium);\n --swui-button-text-color: var(--swui-white);\n --swui-button-text-decoration: none;\n --swui-button-letter-spacing: var(--swui-field-letter-spacing);\n --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 2 - 1px);\n\n /* Text */\n --swui-button-text-color-focus: var(--swui-button-text-color);\n --swui-button-text-color-hover: var(--swui-button-text-color);\n --swui-button-text-color-active: var(--swui-button-text-color);\n --swui-button-text-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-text-color: var(--swui-button-text-color);\n --swui-button-danger-text-color-focus: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-hover: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-active: var(--swui-button-danger-text-color);\n\n --swui-button-success-text-color: var(--swui-button-text-color);\n --swui-button-success-text-color-focus: var(--swui-button-success-text-color);\n --swui-button-success-text-color-hover: var(--swui-button-success-text-color);\n --swui-button-success-text-color-active: var(\n --swui-button-success-text-color\n );\n\n /* Icon */\n --swui-button-icon-color-focus: var(--swui-button-icon-color);\n --swui-button-icon-color-hover: var(--swui-button-icon-color);\n --swui-button-icon-color-active: var(--swui-button-icon-color);\n --swui-button-icon-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-icon-color: var(--swui-button-icon-color);\n --swui-button-danger-icon-color-focus: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-hover: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-active: var(--swui-button-danger-icon-color);\n\n --swui-button-success-icon-color: var(--swui-button-icon-color);\n --swui-button-success-icon-color-focus: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-hover: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-active: var(\n --swui-button-success-icon-color\n );\n\n /* Background */\n --swui-button-background-color: var(--swui-primary-action-color);\n --swui-button-background-color-active: var(\n --swui-primary-action-color-active\n );\n --swui-button-background-color-focus: var(--swui-primary-action-color-focus);\n --swui-button-background-color-hover: var(--swui-primary-action-color-hover);\n --swui-button-background-color-disabled: var(\n --swui-primary-action-color-disabled\n );\n\n --swui-button-danger-background-color: var(--lhds-color-red-500);\n --swui-button-danger-background-color-active: var(--lhds-color-red-900);\n --swui-button-danger-background-color-focus: var(--lhds-color-red-700);\n --swui-button-danger-background-color-hover: var(--lhds-color-red-600);\n\n --swui-button-success-background-color: var(--lhds-color-green-600);\n --swui-button-success-background-color-active: var(--lhds-color-green-900);\n --swui-button-success-background-color-focus: var(--lhds-color-green-800);\n --swui-button-success-background-color-hover: var(--lhds-color-green-700);\n\n /* Border */\n --swui-button-border-color: var(--swui-button-background-color);\n --swui-button-border-radius: var(--swui-border-radius);\n --swui-button-border-radius-icon-only: var(--swui-border-radius);\n --swui-button-border-color-focus: var(--swui-button-background-color-focus);\n --swui-button-border-color-hover: var(--swui-button-background-color-hover);\n --swui-button-border-color-active: var(--swui-button-background-color-active);\n --swui-button-border-color-disabled: var(--lhds-color-ui-400);\n\n --swui-button-danger-border-color: var(--swui-button-danger-background-color);\n --swui-button-danger-border-color-focus: var(\n --swui-button-danger-background-color-focus\n );\n --swui-button-danger-border-color-hover: var(\n --swui-button-danger-background-color-hover\n );\n --swui-button-danger-border-color-active: var(\n --swui-button-danger-background-color-active\n );\n\n --swui-button-success-border-color: var(\n --swui-button-success-background-color\n );\n --swui-button-success-border-color-focus: var(\n --swui-button-success-background-color-focus\n );\n --swui-button-success-border-color-hover: var(\n --swui-button-success-background-color-hover\n );\n --swui-button-success-border-color-active: var(\n --swui-button-success-background-color-active\n );\n\n /* Shadow */\n --swui-button-box-shadow-focus: 0 0 4px 0 var(--lhds-color-blue-300);\n --swui-button-box-shadow-hover: 0 1px 1px 1px rgba(29, 100, 171, 0.16),\n 0 0 1px 0 rgba(29, 100, 171, 0.16);\n --swui-button-box-shadow: 0 1px 0 0 rgba(29, 100, 171, 0.08),\n 0 0 1px -1px rgba(29, 100, 171, 0.1);\n --swui-button-box-shadow-active: none;\n --swui-button-box-shadow-disabled: none;\n\n /*\n * Styling\n */\n --current-background-color: var(--swui-button-background-color);\n --current-icon-height: 16px;\n --current-icon-color: var(--swui-button-icon-color);\n --current-text-color: var(--swui-button-text-color);\n --current-border-color: var(--swui-button-border-color);\n\n box-sizing: border-box;\n letter-spacing: var(--swui-button-letter-spacing);\n -webkit-text-decoration: var(--swui-button-text-decoration);\n text-decoration: var(--swui-button-text-decoration);\n padding: var(--swui-button-padding-vertical)\n var(--swui-button-padding-horizontal);\n border: 1px solid var(--current-border-color);\n background-color: var(--current-background-color);\n border-radius: var(--swui-button-border-radius);\n box-shadow: var(--current-box-shadow, var(--swui-button-box-shadow));\n color: var(--current-text-color);\n font-size: var(--current-text-size, var(--swui-button-text-size));\n line-height: var(--current-line-height, var(--swui-button-line-height));\n font-weight: var(--swui-button-font-weight);\n font-family: var(--swui-font-buttons);\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT {\n padding: var(--swui-button-padding-vertical);\n color: var(--current-icon-color);\n flex: none;\n\n border-radius: var(--swui-button-border-radius-icon-only);\n\n width: 32px;\n height: 32px;\n justify-content: center;\n align-items: center;\n display: flex;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_small__2fGop {\n width: 24px;\n height: 24px;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_large__22CGX {\n width: 40px;\n height: 40px;\n }\n\n /*\n * State and variants\n */\n\n .Button-module_button__qBMg_.Button-module_small__2fGop {\n --current-line-height: 16px;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) / 2 - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) - 1px);\n --current-text-size: 12px;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX {\n --current-line-height: 24px;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 3 - 1px);\n --current-text-size: 16px;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX.Button-module_iconButton__1-wQT {\n --current-icon-height: 24px;\n }\n\n .Button-module_button__qBMg_:hover {\n --current-background-color: var(--swui-button-background-color-hover);\n --current-border-color: var(--swui-button-border-color-hover);\n --current-icon-color: var(--swui-button-icon-color-hover);\n --current-text-color: var(--swui-button-text-color-hover);\n --current-box-shadow: var(--swui-button-box-shadow-hover);\n }\n\n .Button-module_button__qBMg_:focus {\n outline: 0;\n --current-background-color: var(--swui-button-background-color-focus);\n --current-border-color: var(--swui-button-border-color-focus);\n --current-icon-color: var(--swui-button-icon-color-focus);\n --current-text-color: var(--swui-button-text-color-focus);\n --current-box-shadow: var(--swui-button-box-shadow-focus);\n }\n\n .Button-module_button__qBMg_:active {\n --current-background-color: var(--swui-button-background-color-active);\n --current-border-color: var(--swui-button-border-color-active);\n --current-icon-color: var(--swui-button-icon-color-active);\n --current-text-color: var(--swui-button-text-color-active);\n --current-box-shadow: var(--swui-button-box-shadow-active);\n }\n\n .Button-module_button__qBMg_:disabled {\n --current-background-color: var(--swui-button-background-color-disabled);\n --current-border-color: var(--swui-button-border-color-disabled);\n --current-icon-color: var(--swui-button-icon-color-disabled);\n --current-text-color: var(--swui-button-text-color-disabled);\n --current-box-shadow: var(--swui-button-box-shadow-disabled);\n cursor: not-allowed;\n }\n\n .Button-module_button__qBMg_.Button-module_normal__ZIWYY {\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled) {\n --current-background-color: var(--swui-button-danger-background-color);\n --current-border-color: var(--swui-button-danger-border-color);\n --current-text-color: var(--swui-button-danger-text-color);\n --current-icon-color: var(--swui-button-danger-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-danger-background-color-hover\n );\n --current-border-color: var(--swui-button-danger-border-color-hover);\n --current-text-color: var(--swui-button-danger-text-color-hover);\n --current-icon-color: var(--swui-button-danger-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-danger-background-color-focus\n );\n --current-border-color: var(--swui-button-danger-border-color-focus);\n --current-text-color: var(--swui-button-danger-text-color-focus);\n --current-icon-color: var(--swui-button-danger-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):active {\n --current-background-color: var(\n --swui-button-danger-background-color-active\n );\n --current-border-color: var(--swui-button-danger-border-color-active);\n --current-text-color: var(--swui-button-danger-text-color-active);\n --current-icon-color: var(--swui-button-danger-icon-color-active);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled) {\n --current-background-color: var(--swui-button-success-background-color);\n --current-border-color: var(--swui-button-success-border-color);\n --current-text-color: var(--swui-button-success-text-color);\n --current-icon-color: var(--swui-button-success-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-success-background-color-hover\n );\n --current-border-color: var(--swui-button-success-border-color-hover);\n --current-text-color: var(--swui-button-success-text-color-hover);\n --current-icon-color: var(--swui-button-success-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-success-background-color-focus\n );\n --current-border-color: var(--swui-button-success-border-color-focus);\n --current-text-color: var(--swui-button-success-text-color-focus);\n --current-icon-color: var(--swui-button-success-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):active {\n --current-background-color: var(\n --swui-button-success-background-color-active\n );\n --current-border-color: var(--swui-button-success-border-color-active);\n --current-text-color: var(--swui-button-success-text-color-active);\n --current-icon-color: var(--swui-button-success-icon-color-active);\n }\n";
339
+ var css_248z$g = ".Button-module_button__qBMg_ {\n /* Theme vars */\n --swui-button-line-height: 1.6rem;\n --swui-button-font-weight: 400;\n --swui-button-text-size: var(--swui-font-size-medium);\n --swui-button-text-color: var(--swui-white);\n --swui-button-text-decoration: none;\n --swui-button-letter-spacing: var(--swui-field-letter-spacing);\n --swui-button-padding-vertical: calc(var(--swui-metrics-spacing) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-spacing) * 2 - 1px);\n\n /* Text */\n --swui-button-text-color-focus: var(--swui-button-text-color);\n --swui-button-text-color-hover: var(--swui-button-text-color);\n --swui-button-text-color-active: var(--swui-button-text-color);\n --swui-button-text-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-text-color: var(--swui-button-text-color);\n --swui-button-danger-text-color-focus: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-hover: var(--swui-button-danger-text-color);\n --swui-button-danger-text-color-active: var(--swui-button-danger-text-color);\n\n --swui-button-success-text-color: var(--swui-button-text-color);\n --swui-button-success-text-color-focus: var(--swui-button-success-text-color);\n --swui-button-success-text-color-hover: var(--swui-button-success-text-color);\n --swui-button-success-text-color-active: var(\n --swui-button-success-text-color\n );\n\n /* Icon */\n --swui-button-icon-height: 1.6rem;\n --swui-button-icon-height-large: 2.4rem;\n\n --swui-button-icon-color: var(--swui-white);\n --swui-button-icon-color-focus: var(--swui-button-icon-color);\n --swui-button-icon-color-hover: var(--swui-button-icon-color);\n --swui-button-icon-color-active: var(--swui-button-icon-color);\n --swui-button-icon-color-disabled: var(--swui-text-disabled-color);\n\n --swui-button-danger-icon-color: var(--swui-button-icon-color);\n --swui-button-danger-icon-color-focus: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-hover: var(--swui-button-danger-icon-color);\n --swui-button-danger-icon-color-active: var(--swui-button-danger-icon-color);\n\n --swui-button-success-icon-color: var(--swui-button-icon-color);\n --swui-button-success-icon-color-focus: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-hover: var(--swui-button-success-icon-color);\n --swui-button-success-icon-color-active: var(\n --swui-button-success-icon-color\n );\n\n /* Background */\n --swui-button-background-color: var(--swui-primary-action-color);\n --swui-button-background-color-active: var(\n --swui-primary-action-color-active\n );\n --swui-button-background-color-focus: var(--swui-primary-action-color-focus);\n --swui-button-background-color-hover: var(--swui-primary-action-color-hover);\n --swui-button-background-color-disabled: var(\n --swui-primary-action-color-disabled\n );\n\n --swui-button-danger-background-color: var(--lhds-color-red-500);\n --swui-button-danger-background-color-active: var(--lhds-color-red-900);\n --swui-button-danger-background-color-focus: var(--lhds-color-red-700);\n --swui-button-danger-background-color-hover: var(--lhds-color-red-600);\n\n --swui-button-success-background-color: var(--lhds-color-green-600);\n --swui-button-success-background-color-active: var(--lhds-color-green-900);\n --swui-button-success-background-color-focus: var(--lhds-color-green-800);\n --swui-button-success-background-color-hover: var(--lhds-color-green-700);\n\n /* Border */\n --swui-button-border-color: var(--swui-button-background-color);\n --swui-button-border-radius: var(--swui-border-radius);\n --swui-button-border-radius-icon-only: var(--swui-border-radius);\n --swui-button-border-color-focus: var(--swui-button-background-color-focus);\n --swui-button-border-color-hover: var(--swui-button-background-color-hover);\n --swui-button-border-color-active: var(--swui-button-background-color-active);\n --swui-button-border-color-disabled: var(--lhds-color-ui-400);\n\n --swui-button-danger-border-color: var(--swui-button-danger-background-color);\n --swui-button-danger-border-color-focus: var(\n --swui-button-danger-background-color-focus\n );\n --swui-button-danger-border-color-hover: var(\n --swui-button-danger-background-color-hover\n );\n --swui-button-danger-border-color-active: var(\n --swui-button-danger-background-color-active\n );\n\n --swui-button-success-border-color: var(\n --swui-button-success-background-color\n );\n --swui-button-success-border-color-focus: var(\n --swui-button-success-background-color-focus\n );\n --swui-button-success-border-color-hover: var(\n --swui-button-success-background-color-hover\n );\n --swui-button-success-border-color-active: var(\n --swui-button-success-background-color-active\n );\n\n /* Shadow */\n --swui-button-box-shadow-focus: 0 0 4px 0 var(--lhds-color-blue-300);\n --swui-button-box-shadow-hover: 0 1px 1px 1px rgba(29, 100, 171, 0.16),\n 0 0 1px 0 rgba(29, 100, 171, 0.16);\n --swui-button-box-shadow: 0 1px 0 0 rgba(29, 100, 171, 0.08),\n 0 0 1px -1px rgba(29, 100, 171, 0.1);\n --swui-button-box-shadow-active: none;\n --swui-button-box-shadow-disabled: none;\n\n /*\n * Styling\n */\n --current-background-color: var(--swui-button-background-color);\n --current-icon-height: var(--swui-button-icon-height);\n --current-icon-color: var(--swui-button-icon-color);\n --current-text-color: var(--swui-button-text-color);\n --current-border-color: var(--swui-button-border-color);\n\n box-sizing: border-box;\n letter-spacing: var(--swui-button-letter-spacing);\n -webkit-text-decoration: var(--swui-button-text-decoration);\n text-decoration: var(--swui-button-text-decoration);\n padding: var(--swui-button-padding-vertical)\n var(--swui-button-padding-horizontal);\n border: 1px solid var(--current-border-color);\n background-color: var(--current-background-color);\n border-radius: var(--swui-button-border-radius);\n box-shadow: var(--current-box-shadow, var(--swui-button-box-shadow));\n color: var(--current-text-color);\n font-size: var(--current-text-size, var(--swui-button-text-size));\n line-height: var(--current-line-height, var(--swui-button-line-height));\n font-weight: var(--swui-button-font-weight);\n font-family: var(--swui-font-buttons);\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT {\n padding: var(--swui-button-padding-vertical);\n color: var(--current-icon-color);\n flex: none;\n\n border-radius: var(--swui-button-border-radius-icon-only);\n\n width: 32px;\n height: 32px;\n justify-content: center;\n align-items: center;\n display: flex;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_small__2fGop {\n width: 24px;\n height: 24px;\n }\n\n .Button-module_button__qBMg_.Button-module_iconButton__1-wQT.Button-module_large__22CGX {\n width: 40px;\n height: 40px;\n }\n\n /*\n * State and variants\n */\n\n .Button-module_button__qBMg_.Button-module_small__2fGop {\n --current-line-height: 1.6rem;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) / 2 - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) - 1px);\n --current-text-size: 1.2rem;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX {\n --current-line-height: 2.4rem;\n --swui-button-padding-vertical: calc(var(--swui-metrics-space) - 1px);\n --swui-button-padding-horizontal: calc(var(--swui-metrics-space) * 3 - 1px);\n --current-text-size: 1.6rem;\n }\n\n .Button-module_button__qBMg_.Button-module_large__22CGX.Button-module_iconButton__1-wQT {\n --current-icon-height: var(--swui-button-icon-height-large);\n }\n\n .Button-module_button__qBMg_:hover {\n --current-background-color: var(--swui-button-background-color-hover);\n --current-border-color: var(--swui-button-border-color-hover);\n --current-icon-color: var(--swui-button-icon-color-hover);\n --current-text-color: var(--swui-button-text-color-hover);\n --current-box-shadow: var(--swui-button-box-shadow-hover);\n }\n\n .Button-module_button__qBMg_:focus {\n outline: 0;\n --current-background-color: var(--swui-button-background-color-focus);\n --current-border-color: var(--swui-button-border-color-focus);\n --current-icon-color: var(--swui-button-icon-color-focus);\n --current-text-color: var(--swui-button-text-color-focus);\n --current-box-shadow: var(--swui-button-box-shadow-focus);\n }\n\n .Button-module_button__qBMg_:active {\n --current-background-color: var(--swui-button-background-color-active);\n --current-border-color: var(--swui-button-border-color-active);\n --current-icon-color: var(--swui-button-icon-color-active);\n --current-text-color: var(--swui-button-text-color-active);\n --current-box-shadow: var(--swui-button-box-shadow-active);\n }\n\n .Button-module_button__qBMg_:disabled {\n --current-background-color: var(--swui-button-background-color-disabled);\n --current-border-color: var(--swui-button-border-color-disabled);\n --current-icon-color: var(--swui-button-icon-color-disabled);\n --current-text-color: var(--swui-button-text-color-disabled);\n --current-box-shadow: var(--swui-button-box-shadow-disabled);\n cursor: not-allowed;\n }\n\n .Button-module_button__qBMg_.Button-module_normal__ZIWYY {\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled) {\n --current-background-color: var(--swui-button-danger-background-color);\n --current-border-color: var(--swui-button-danger-border-color);\n --current-text-color: var(--swui-button-danger-text-color);\n --current-icon-color: var(--swui-button-danger-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-danger-background-color-hover\n );\n --current-border-color: var(--swui-button-danger-border-color-hover);\n --current-text-color: var(--swui-button-danger-text-color-hover);\n --current-icon-color: var(--swui-button-danger-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-danger-background-color-focus\n );\n --current-border-color: var(--swui-button-danger-border-color-focus);\n --current-text-color: var(--swui-button-danger-text-color-focus);\n --current-icon-color: var(--swui-button-danger-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_danger__2b61k:not(:disabled):active {\n --current-background-color: var(\n --swui-button-danger-background-color-active\n );\n --current-border-color: var(--swui-button-danger-border-color-active);\n --current-text-color: var(--swui-button-danger-text-color-active);\n --current-icon-color: var(--swui-button-danger-icon-color-active);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled) {\n --current-background-color: var(--swui-button-success-background-color);\n --current-border-color: var(--swui-button-success-border-color);\n --current-text-color: var(--swui-button-success-text-color);\n --current-icon-color: var(--swui-button-success-icon-color);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):hover {\n --current-background-color: var(\n --swui-button-success-background-color-hover\n );\n --current-border-color: var(--swui-button-success-border-color-hover);\n --current-text-color: var(--swui-button-success-text-color-hover);\n --current-icon-color: var(--swui-button-success-icon-color-hover);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):focus {\n outline: 0;\n --current-background-color: var(\n --swui-button-success-background-color-focus\n );\n --current-border-color: var(--swui-button-success-border-color-focus);\n --current-text-color: var(--swui-button-success-text-color-focus);\n --current-icon-color: var(--swui-button-success-icon-color-focus);\n }\n\n .Button-module_button__qBMg_.Button-module_success__23dYZ:not(:disabled):active {\n --current-background-color: var(\n --swui-button-success-background-color-active\n );\n --current-border-color: var(--swui-button-success-border-color-active);\n --current-text-color: var(--swui-button-success-text-color-active);\n --current-icon-color: var(--swui-button-success-icon-color-active);\n }\n";
340
340
  var styles$e = {"button":"Button-module_button__qBMg_","iconButton":"Button-module_iconButton__1-wQT","small":"Button-module_small__2fGop","large":"Button-module_large__22CGX","normal":"Button-module_normal__ZIWYY","danger":"Button-module_danger__2b61k","success":"Button-module_success__23dYZ"};
341
341
  styleInject(css_248z$g);
342
342
 
@@ -468,7 +468,7 @@ var CardBody = function (_a) {
468
468
  return React__namespace.createElement(core.Column, __assign({ indent: 3, spacing: variant === "compact" ? 1 : 3 }, props));
469
469
  };
470
470
 
471
- var css_248z$8 = ".Chip-module_chip__3Uf1d {\n /* Theme vars */\n --swui-chip-font-size: var(--swui-font-size-small);\n --swui-chip-line-height: var(--swui-line-height-small);\n --swui-chip-font-weight: var(--swui-font-weight-text);\n --swui-chip-font-family: var(--swui-font-primary);\n --swui-chip-letter-spacing: var(--swui-text-letter-spacing);\n --swui-chip-height: 24px;\n --swui-chip-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n\n /* Styling */\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n border-radius: var(--swui-chip-border-radius);\n background-color: var(--current-bg-color);\n}\n\n .Chip-module_chip__3Uf1d .Chip-module_chipCell__2bQON {\n font-family: var(--swui-chip-font-family);\n font-size: var(--swui-chip-font-size);\n font-weight: var(--swui-chip-font-weight);\n line-height: var(--swui-chip-line-height);\n color: var(--current-text-color);\n height: var(--swui-chip-height);\n display: flex;\n align-items: center;\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv {\n white-space: nowrap;\n padding: 0 var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d button {\n background: transparent;\n border: none;\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .Chip-module_chip__3Uf1d button:hover {\n background-color: var(--current-bg-color-hover);\n }\n\n .Chip-module_chip__3Uf1d button:focus {\n background-color: var(--current-bg-color-focus);\n outline: none;\n }\n\n .Chip-module_chip__3Uf1d button:active {\n background-color: var(--current-bg-color-active);\n }\n\n .Chip-module_chip__3Uf1d button:first-child {\n border-top-left-radius: var(--swui-chip-border-radius);\n border-bottom-left-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d button:last-child {\n border-top-right-radius: var(--swui-chip-border-radius);\n border-bottom-right-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_clickable__3zjMU {\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 {\n padding-left: var(--swui-metrics-space);\n padding-right: var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 svg {\n color: var(--current-text-color);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i {\n --current-bg-color: var(--swui-primary-action-color);\n --current-text-color: var(--swui-white);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY {\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n --current-bg-color-hover: var(--lhds-color-blue-200);\n --current-bg-color-focus: var(--lhds-color-blue-200);\n --current-bg-color-active: var(--lhds-color-blue-300);\n }\n";
471
+ var css_248z$8 = ".Chip-module_chip__3Uf1d {\n /* Theme vars */\n --swui-chip-font-size: var(--swui-font-size-small);\n --swui-chip-line-height: var(--swui-line-height-small);\n --swui-chip-font-weight: var(--swui-font-weight-text);\n --swui-chip-font-family: var(--swui-font-primary);\n --swui-chip-letter-spacing: var(--swui-text-letter-spacing);\n --swui-chip-height: 24px;\n --swui-chip-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n\n /* Styling */\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n border-radius: var(--swui-chip-border-radius);\n background-color: var(--current-bg-color);\n}\n\n .Chip-module_chip__3Uf1d .Chip-module_chipCell__2bQON {\n font-family: var(--swui-chip-font-family);\n font-size: var(--swui-chip-font-size);\n font-weight: var(--swui-chip-font-weight);\n line-height: var(--swui-chip-line-height);\n color: var(--current-text-color);\n min-height: var(--swui-chip-height);\n display: flex;\n align-items: center;\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_label__3gHgv {\n white-space: nowrap;\n padding: 0 var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d button {\n background: transparent;\n border: none;\n cursor: pointer;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n\n .Chip-module_chip__3Uf1d button:hover {\n background-color: var(--current-bg-color-hover);\n }\n\n .Chip-module_chip__3Uf1d button:focus {\n background-color: var(--current-bg-color-focus);\n outline: none;\n }\n\n .Chip-module_chip__3Uf1d button:active {\n background-color: var(--current-bg-color-active);\n }\n\n .Chip-module_chip__3Uf1d button:first-child {\n border-top-left-radius: var(--swui-chip-border-radius);\n border-bottom-left-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d button:last-child {\n border-top-right-radius: var(--swui-chip-border-radius);\n border-bottom-right-radius: var(--swui-chip-border-radius);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_clickable__3zjMU {\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 {\n padding-left: var(--swui-metrics-space);\n padding-right: var(--swui-metrics-space);\n }\n\n .Chip-module_chip__3Uf1d .Chip-module_close__2uEi1 svg {\n color: var(--current-text-color);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_primary__3kb_i {\n --current-bg-color: var(--swui-primary-action-color);\n --current-text-color: var(--swui-white);\n --current-bg-color-hover: var(--lhds-color-blue-600);\n --current-bg-color-focus: var(--lhds-color-blue-700);\n --current-bg-color-active: var(--lhds-color-blue-800);\n }\n\n .Chip-module_chip__3Uf1d.Chip-module_secondary__2hWgY {\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n --current-bg-color-hover: var(--lhds-color-blue-200);\n --current-bg-color-focus: var(--lhds-color-blue-200);\n --current-bg-color-active: var(--lhds-color-blue-300);\n }\n";
472
472
  var styles$8 = {"chip":"Chip-module_chip__3Uf1d","chipCell":"Chip-module_chipCell__2bQON","label":"Chip-module_label__3gHgv","clickable":"Chip-module_clickable__3zjMU","close":"Chip-module_close__2uEi1","primary":"Chip-module_primary__3kb_i","secondary":"Chip-module_secondary__2hWgY"};
473
473
  styleInject(css_248z$8);
474
474
 
@@ -665,7 +665,7 @@ var TabMenu = function (_a) {
665
665
  return (React__namespace.createElement(core.Row, { className: cx__default["default"](styles$2.tabMenu, (_b = {}, _b[styles$2.withBorder] = enableBorder, _b)), gap: 2, role: "tablist" }, children));
666
666
  };
667
667
 
668
- var css_248z$1 = ".Tag-module_tag__1jkHo {\n /* Theme vars */\n --swui-tag-font-size: var(--swui-font-size-small);\n --swui-tag-line-height: var(--swui-line-height-small);\n --swui-tag-font-weight: var(--swui-font-weight-text);\n --swui-tag-font-family: var(--swui-font-primary);\n --swui-tag-letter-spacing: var(--swui-text-letter-spacing);\n --swui-tag-height-normal: 24px;\n --swui-tag-height-small: 16px;\n --swui-tag-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-border-color: var(--swui-primary-action-color);\n --current-height: var(--swui-tag-height-normal);\n\n /* Styling */\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n white-space: nowrap;\n border-radius: var(--swui-tag-border-radius);\n background-color: var(--current-bg-color);\n border: 1px solid var(--current-border-color);\n font-family: var(--swui-tag-font-family);\n font-size: var(--swui-tag-font-size);\n font-weight: var(--swui-tag-font-weight);\n line-height: var(--swui-tag-line-height);\n color: var(--current-text-color);\n height: var(--current-height);\n align-items: center;\n padding: 0 var(--swui-metrics-space);\n}\n\n .Tag-module_tag__1jkHo.Tag-module_small__2WMmo {\n --current-height: var(--swui-tag-height-small);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_info__1Nb3P {\n --current-border-color: var(--lhds-color-blue-300);\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_error__322oJ {\n --current-border-color: var(--lhds-color-red-300);\n --current-bg-color: var(--lhds-color-red-50);\n --current-text-color: var(--lhds-color-red-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_warning__2TcGy {\n --current-border-color: var(--lhds-color-orange-300);\n --current-bg-color: var(--lhds-color-orange-50);\n --current-text-color: var(--lhds-color-orange-900);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_success__2MOAb {\n --current-border-color: var(--lhds-color-green-300);\n --current-bg-color: var(--lhds-color-green-50);\n --current-text-color: var(--lhds-color-green-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_passive__1ZzM0 {\n --current-border-color: var(--lhds-color-ui-300);\n --current-bg-color: var(--lhds-color-ui-50);\n --current-text-color: var(--lhds-color-ui-800);\n }\n";
668
+ var css_248z$1 = ".Tag-module_tag__1jkHo {\n /* Theme vars */\n --swui-tag-font-size: var(--swui-font-size-small);\n --swui-tag-line-height: var(--swui-line-height-small);\n --swui-tag-font-weight: var(--swui-font-weight-text);\n --swui-tag-font-family: var(--swui-font-primary);\n --swui-tag-letter-spacing: var(--swui-text-letter-spacing);\n --swui-tag-height-normal: 24px;\n --swui-tag-height-small: 16px;\n --swui-tag-border-radius: var(--swui-border-radius);\n\n /* State vars */\n --current-text-color: var(--swui-white);\n --current-bg-color: var(--lhds-color-blue-50);\n --current-border-color: var(--swui-primary-action-color);\n --current-height: var(--swui-tag-height-normal);\n\n /* Styling */\n box-sizing: border-box;\n display: inline-flex;\n flex-direction: row;\n white-space: nowrap;\n border-radius: var(--swui-tag-border-radius);\n background-color: var(--current-bg-color);\n border: 1px solid var(--current-border-color);\n font-family: var(--swui-tag-font-family);\n font-size: var(--swui-tag-font-size);\n font-weight: var(--swui-tag-font-weight);\n line-height: var(--swui-tag-line-height);\n color: var(--current-text-color);\n min-height: var(--current-height);\n align-items: center;\n padding: 0 var(--swui-metrics-space);\n}\n\n .Tag-module_tag__1jkHo.Tag-module_small__2WMmo {\n --current-height: var(--swui-tag-height-small);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_info__1Nb3P {\n --current-border-color: var(--lhds-color-blue-300);\n --current-bg-color: var(--lhds-color-blue-100);\n --current-text-color: var(--lhds-color-blue-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_error__322oJ {\n --current-border-color: var(--lhds-color-red-300);\n --current-bg-color: var(--lhds-color-red-50);\n --current-text-color: var(--lhds-color-red-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_warning__2TcGy {\n --current-border-color: var(--lhds-color-orange-300);\n --current-bg-color: var(--lhds-color-orange-50);\n --current-text-color: var(--lhds-color-orange-900);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_success__2MOAb {\n --current-border-color: var(--lhds-color-green-300);\n --current-bg-color: var(--lhds-color-green-50);\n --current-text-color: var(--lhds-color-green-800);\n }\n\n .Tag-module_tag__1jkHo.Tag-module_passive__1ZzM0 {\n --current-border-color: var(--lhds-color-ui-300);\n --current-bg-color: var(--lhds-color-ui-50);\n --current-text-color: var(--lhds-color-ui-800);\n }\n";
669
669
  var styles$1 = {"tag":"Tag-module_tag__1jkHo","small":"Tag-module_small__2WMmo","info":"Tag-module_info__1Nb3P","error":"Tag-module_error__322oJ","warning":"Tag-module_warning__2TcGy","success":"Tag-module_success__2MOAb","passive":"Tag-module_passive__1ZzM0"};
670
670
  styleInject(css_248z$1);
671
671
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stenajs-webui/elements",
3
- "version": "16.0.0",
3
+ "version": "16.1.0",
4
4
  "description": "",
5
5
  "author": "mattias800",
6
6
  "license": "MIT",
@@ -28,8 +28,8 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@react-aria/focus": "3.3.0",
31
- "@stenajs-webui/core": "16.0.0",
32
- "@stenajs-webui/theme": "16.0.0",
31
+ "@stenajs-webui/core": "16.1.0",
32
+ "@stenajs-webui/theme": "16.1.0",
33
33
  "classnames": "^2.3.1"
34
34
  },
35
35
  "peerDependencies": {
@@ -62,5 +62,5 @@
62
62
  "files": [
63
63
  "dist"
64
64
  ],
65
- "gitHead": "b3ff5d9173979455c8e6f8334e8feb601283d3bb"
65
+ "gitHead": "dee8022bada52c4c5f81400825548308c2f412cb"
66
66
  }