@stenajs-webui/elements 15.5.3 → 15.5.6
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.
- package/CHANGELOG.md +12 -0
- package/dist/components/ui/cards/Card.stories.d.ts +1 -1
- package/dist/components/ui/cards/CardBody.d.ts +2 -0
- package/dist/index.es.js +16 -13
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +16 -13
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v15.5.5 (Tue Apr 26 2022)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- Add compact variant to cardbody [#453](https://github.com/StenaIT/stenajs-webui/pull/453) ([@lindskogen](https://github.com/lindskogen))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Johan Lindskogen ([@lindskogen](https://github.com/lindskogen))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v15.5.0 (Tue Apr 05 2022)
|
|
2
14
|
|
|
3
15
|
#### 🚀 Enhancement
|
|
@@ -9,7 +9,7 @@ declare const _default: {
|
|
|
9
9
|
export default _default;
|
|
10
10
|
export declare const Demo: () => JSX.Element;
|
|
11
11
|
export declare const HeaderContent: () => JSX.Element;
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const CompactCard: () => JSX.Element;
|
|
13
13
|
export declare const Details: () => JSX.Element;
|
|
14
14
|
export declare const Unpaid: () => JSX.Element;
|
|
15
15
|
export declare const Switch: () => JSX.Element;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { BoxProps } from "@stenajs-webui/core";
|
|
2
2
|
import * as React from "react";
|
|
3
|
+
export declare type CardBodyVariant = "standard" | "compact";
|
|
3
4
|
interface CardBodyProps extends Omit<BoxProps, "indent" | "spacing"> {
|
|
5
|
+
variant?: CardBodyVariant;
|
|
4
6
|
}
|
|
5
7
|
export declare const CardBody: React.FC<CardBodyProps>;
|
|
6
8
|
export {};
|
package/dist/index.es.js
CHANGED
|
@@ -215,7 +215,7 @@ var Link = forwardRef(function (_a, ref) {
|
|
|
215
215
|
React.createElement(FontAwesomeIcon, { icon: iconRight })))));
|
|
216
216
|
});
|
|
217
217
|
|
|
218
|
-
var css_248z$j = ".ResultListRow-module_resultItemRow__1EvRY {\n display:
|
|
218
|
+
var css_248z$j = ".ResultListRow-module_resultItemRow__1EvRY {\n display: flex;\n flex-direction: column;\n}\n\n .ResultListRow-module_resultItemRow__1EvRY .ResultListRow-module_link__1uK6U {\n margin-top: 4px;\n }\n";
|
|
219
219
|
var styles$h = {"resultItemRow":"ResultListRow-module_resultItemRow__1EvRY","link":"ResultListRow-module_link__1uK6U"};
|
|
220
220
|
styleInject(css_248z$j);
|
|
221
221
|
|
|
@@ -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: -webkit-inline-flex;\n display: inline-flex;\n -webkit-align-items: center;\n align-items: center;\n -webkit-justify-content: 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 -webkit-flex: none;\n flex: none;\n\n border-radius: var(--swui-button-border-radius-icon-only);\n\n width: 32px;\n height: 32px;\n -webkit-justify-content: center;\n justify-content: center;\n -webkit-align-items: center;\n align-items: center;\n display: -webkit-flex;\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: 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";
|
|
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
|
|
|
@@ -325,7 +325,7 @@ var getButtonLabel = function (label, success, successLabel, loading, loadingLab
|
|
|
325
325
|
}
|
|
326
326
|
};
|
|
327
327
|
|
|
328
|
-
var css_248z$f = ".ButtonContent-module_iconLeft__21X2y,\n.ButtonContent-module_iconRight__3uF_p {\n color: var(--current-icon-color);\n height: var(--current-line-height);\n}\n\n.ButtonContent-module_iconLeft__21X2y,\n.ButtonContent-module_iconRight__3uF_p {\n height: var(--current-icon-height);\n}\n\n.ButtonContent-module_leftWrapper__PVApU,\n.ButtonContent-module_rightWrapper__3GBms {\n display:
|
|
328
|
+
var css_248z$f = ".ButtonContent-module_iconLeft__21X2y,\n.ButtonContent-module_iconRight__3uF_p {\n color: var(--current-icon-color);\n height: var(--current-line-height);\n}\n\n.ButtonContent-module_iconLeft__21X2y,\n.ButtonContent-module_iconRight__3uF_p {\n height: var(--current-icon-height);\n}\n\n.ButtonContent-module_leftWrapper__PVApU,\n.ButtonContent-module_rightWrapper__3GBms {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.ButtonContent-module_leftWrapper__PVApU:not(:last-child) {\n margin-right: var(--swui-metrics-indent);\n}\n\n.ButtonContent-module_rightWrapper__3GBms:not(:first-child) {\n margin-left: var(--swui-metrics-indent);\n}\n\n.ButtonContent-module_spinnerLeft__14VCD {\n display: flex;\n align-items: center;\n}\n\n.ButtonContent-module_label__1aoKJ {\n white-space: nowrap;\n}\n";
|
|
329
329
|
var buttonStyles = {"iconLeft":"ButtonContent-module_iconLeft__21X2y","iconRight":"ButtonContent-module_iconRight__3uF_p","leftWrapper":"ButtonContent-module_leftWrapper__PVApU","rightWrapper":"ButtonContent-module_rightWrapper__3GBms","spinnerLeft":"ButtonContent-module_spinnerLeft__14VCD","label":"ButtonContent-module_label__1aoKJ"};
|
|
330
330
|
styleInject(css_248z$f);
|
|
331
331
|
|
|
@@ -391,7 +391,7 @@ var SecondaryButtonLink = forwardRef(function SecondaryButtonLink(_a, ref) {
|
|
|
391
391
|
return (React.createElement(PrimaryButtonLink, __assign({ ref: ref, className: cx(styles$c.secondaryButton, className) }, props)));
|
|
392
392
|
});
|
|
393
393
|
|
|
394
|
-
var css_248z$b = ".ButtonGroup-module_buttonGroup__nzigh {\n display:
|
|
394
|
+
var css_248z$b = ".ButtonGroup-module_buttonGroup__nzigh {\n display: flex;\n}\n\n .ButtonGroup-module_buttonGroup__nzigh > button {\n margin: 0;\n position: relative;\n }\n\n .ButtonGroup-module_buttonGroup__nzigh > button:not(:only-child):not(:last-child) {\n margin-right: -1px;\n }\n\n .ButtonGroup-module_buttonGroup__nzigh > button:hover,\n .ButtonGroup-module_buttonGroup__nzigh > button:focus {\n z-index: 1;\n }\n\n .ButtonGroup-module_buttonGroup__nzigh > button:not(:first-child) {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n .ButtonGroup-module_buttonGroup__nzigh > button:not(:last-child) {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n";
|
|
395
395
|
var styles$b = {"buttonGroup":"ButtonGroup-module_buttonGroup__nzigh"};
|
|
396
396
|
styleInject(css_248z$b);
|
|
397
397
|
|
|
@@ -400,7 +400,7 @@ var ButtonGroup = function (_a) {
|
|
|
400
400
|
return React.createElement("div", { className: cx(styles$b.buttonGroup, className) }, children);
|
|
401
401
|
};
|
|
402
402
|
|
|
403
|
-
var css_248z$a = ".UpDownButtons-module_upDownButtons__3an6- {\n --swui-stepper-button-focus-shadow: var(--swui-field-focus-shadow);\n --swui-stepper-button-width: 25px;\n
|
|
403
|
+
var css_248z$a = ".UpDownButtons-module_upDownButtons__3an6- {\n --swui-stepper-button-focus-shadow: var(--swui-field-focus-shadow);\n --swui-stepper-button-width: 25px;\n align-self: stretch;\n}\n\n .UpDownButtons-module_upDownButtons__3an6- .UpDownButtons-module_button__1d9KV {\n width: var(--swui-stepper-button-width);\n border: none;\n cursor: pointer;\n flex: 1;\n }\n\n .UpDownButtons-module_upDownButtons__3an6- .UpDownButtons-module_button__1d9KV:focus {\n outline: none;\n box-shadow: var(--swui-stepper-button-focus-shadow);\n }\n\n .UpDownButtons-module_upDownButtons__3an6- .UpDownButtons-module_button__1d9KV:disabled {\n background-color: var(--swui-textinput-bg-color-disabled);\n }\n";
|
|
404
404
|
var styles$a = {"upDownButtons":"UpDownButtons-module_upDownButtons__3an6-","button":"UpDownButtons-module_button__1d9KV"};
|
|
405
405
|
styleInject(css_248z$a);
|
|
406
406
|
|
|
@@ -420,7 +420,7 @@ var Card = function (_a) {
|
|
|
420
420
|
return React.createElement(Column, __assign({ shadow: "box", background: background }, boxProps));
|
|
421
421
|
};
|
|
422
422
|
|
|
423
|
-
var css_248z$9 = ".CardHeader-module_cardHeader__3-9N2 {\n display:
|
|
423
|
+
var css_248z$9 = ".CardHeader-module_cardHeader__3-9N2 {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n border-bottom: 1px solid var(--lhds-color-ui-300);\n padding: 0 calc(3 * var(--swui-metrics-indent));\n}\n\n .CardHeader-module_cardHeader__3-9N2.CardHeader-module_standard__2eUI- {\n height: 56px;\n }\n\n .CardHeader-module_cardHeader__3-9N2.CardHeader-module_compact__1f2db {\n height: 40px;\n }\n";
|
|
424
424
|
var styles$9 = {"cardHeader":"CardHeader-module_cardHeader__3-9N2","standard":"CardHeader-module_standard__2eUI-","compact":"CardHeader-module_compact__1f2db"};
|
|
425
425
|
styleInject(css_248z$9);
|
|
426
426
|
|
|
@@ -436,9 +436,12 @@ var CardHeader = function (_a) {
|
|
|
436
436
|
React.createElement(Row, { alignItems: "center" }, contentRight)));
|
|
437
437
|
};
|
|
438
438
|
|
|
439
|
-
var CardBody = function (
|
|
439
|
+
var CardBody = function (_a) {
|
|
440
|
+
var _b = _a.variant, variant = _b === void 0 ? "standard" : _b, props = __rest(_a, ["variant"]);
|
|
441
|
+
return React.createElement(Column, __assign({ indent: 3, spacing: variant === "compact" ? 1 : 3 }, props));
|
|
442
|
+
};
|
|
440
443
|
|
|
441
|
-
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:
|
|
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";
|
|
442
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"};
|
|
443
446
|
styleInject(css_248z$8);
|
|
444
447
|
|
|
@@ -484,7 +487,7 @@ var getExtraInfoLabel = function (optional, maxCharacters) {
|
|
|
484
487
|
return undefined;
|
|
485
488
|
};
|
|
486
489
|
|
|
487
|
-
var css_248z$7 = ".Badge-module_badge__25Moi {\n --swui-badge-notification-bg-color: var(--swui-primary-action-color);\n --swui-badge-warning-bg-color: var(--swui-state-alert-color);\n --swui-badge-error-bg-color: var(--swui-state-error-color);\n --swui-badge-text-color: var(--swui-white);\n --swui-badge-size: 18px;\n\n display:
|
|
490
|
+
var css_248z$7 = ".Badge-module_badge__25Moi {\n --swui-badge-notification-bg-color: var(--swui-primary-action-color);\n --swui-badge-warning-bg-color: var(--swui-state-alert-color);\n --swui-badge-error-bg-color: var(--swui-state-error-color);\n --swui-badge-text-color: var(--swui-white);\n --swui-badge-size: 18px;\n\n display: flex;\n overflow: hidden;\n border-radius: calc(var(--swui-badge-size) / 2);\n border-width: 0;\n min-width: var(--swui-badge-size);\n height: var(--swui-badge-size);\n align-items: center;\n justify-content: center;\n}\n\n .Badge-module_badge__25Moi.Badge-module_info__298ml {\n background: var(--swui-badge-notification-bg-color);\n }\n\n .Badge-module_badge__25Moi.Badge-module_warning__GXF16 {\n background: var(--swui-badge-warning-bg-color);\n }\n\n .Badge-module_badge__25Moi.Badge-module_error__1AEyC {\n background: var(--swui-badge-error-bg-color);\n }\n\n .Badge-module_badge__25Moi .Badge-module_label__8WT89 {\n line-height: var(--swui-badge-size);\n color: var(--swui-badge-text-color);\n }\n";
|
|
488
491
|
var styles$7 = {"badge":"Badge-module_badge__25Moi","info":"Badge-module_info__298ml","warning":"Badge-module_warning__GXF16","error":"Badge-module_error__1AEyC","label":"Badge-module_label__8WT89"};
|
|
489
492
|
styleInject(css_248z$7);
|
|
490
493
|
|
|
@@ -533,7 +536,7 @@ var ActionMenu = function (_a) {
|
|
|
533
536
|
|
|
534
537
|
var ActionMenuContext = React.createContext({});
|
|
535
538
|
|
|
536
|
-
var css_248z$4 = ".ActionMenuItem-module_actionMenuItem__3daZq {\n --swui-action-menu-item-height: 40px;\n\n --swui-action-menu-icon-color: var(--swui-text-primary-color);\n --swui-action-menu-icon-color-disabled: var(--swui-text-disabled-color);\n --swui-action-menu-icon-color-focus: var(--swui-text-primary-color);\n --swui-action-menu-icon-color-hover: var(--swui-text-primary-color);\n\n --swui-action-menu-item-background: var(--swui-white);\n --swui-action-menu-item-background-focus: var(\n --swui-primary-action-color-focus-light\n );\n --swui-action-menu-item-background-hover: var(\n --swui-primary-action-color-hover-light\n );\n --swui-action-menu-item-background-disabled: var(--swui-white);\n --swui-action-menu-item-background-disabled-focus: var(\n --swui-text-disabled-color-light\n );\n\n --swui-action-menu-item-label-color: var(--swui-text-primary-color);\n --swui-action-menu-item-label-color-disabled: var(--swui-text-disabled-color);\n --swui-action-menu-item-label-color-focus: var(--swui-text-primary-color);\n --swui-action-menu-item-label-color-hover: var(--swui-text-primary-color);\n\n --swui-action-menu-item-text-color: var(--swui-text-primary-color-light);\n --swui-action-menu-item-text-color-disabled: var(\n --swui-text-disabled-color-light\n );\n --swui-action-menu-item-text-color-focus: var(\n --swui-text-primary-color-light\n );\n --swui-action-menu-item-text-color-hover: var(\n --swui-text-primary-color-light\n );\n\n --current-item-background: var(--swui-action-menu-item-background);\n --current-item-label-color: var(--swui-action-menu-item-label-color);\n --current-item-text-color: var(--swui-action-menu-item-text-color);\n --current-item-icon-color: var(--swui-action-menu-icon-color);\n\n display:
|
|
539
|
+
var css_248z$4 = ".ActionMenuItem-module_actionMenuItem__3daZq {\n --swui-action-menu-item-height: 40px;\n\n --swui-action-menu-icon-color: var(--swui-text-primary-color);\n --swui-action-menu-icon-color-disabled: var(--swui-text-disabled-color);\n --swui-action-menu-icon-color-focus: var(--swui-text-primary-color);\n --swui-action-menu-icon-color-hover: var(--swui-text-primary-color);\n\n --swui-action-menu-item-background: var(--swui-white);\n --swui-action-menu-item-background-focus: var(\n --swui-primary-action-color-focus-light\n );\n --swui-action-menu-item-background-hover: var(\n --swui-primary-action-color-hover-light\n );\n --swui-action-menu-item-background-disabled: var(--swui-white);\n --swui-action-menu-item-background-disabled-focus: var(\n --swui-text-disabled-color-light\n );\n\n --swui-action-menu-item-label-color: var(--swui-text-primary-color);\n --swui-action-menu-item-label-color-disabled: var(--swui-text-disabled-color);\n --swui-action-menu-item-label-color-focus: var(--swui-text-primary-color);\n --swui-action-menu-item-label-color-hover: var(--swui-text-primary-color);\n\n --swui-action-menu-item-text-color: var(--swui-text-primary-color-light);\n --swui-action-menu-item-text-color-disabled: var(\n --swui-text-disabled-color-light\n );\n --swui-action-menu-item-text-color-focus: var(\n --swui-text-primary-color-light\n );\n --swui-action-menu-item-text-color-hover: var(\n --swui-text-primary-color-light\n );\n\n --current-item-background: var(--swui-action-menu-item-background);\n --current-item-label-color: var(--swui-action-menu-item-label-color);\n --current-item-text-color: var(--swui-action-menu-item-text-color);\n --current-item-icon-color: var(--swui-action-menu-icon-color);\n\n display: inline-flex;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n padding: 0;\n background: var(--current-item-background);\n border: none;\n align-items: stretch;\n outline: 0;\n text-decoration: none;\n font-size: var(--swui-button-text-size);\n line-height: var(--swui-button-line-height);\n font-weight: var(--swui-button-font-weight);\n font-family: var(--swui-font-buttons);\n}\n\n .ActionMenuItem-module_actionMenuItem__3daZq:not(.ActionMenuItem-module_actionMenuItemContent__j_JEf) {\n cursor: pointer;\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq:first-child {\n border-top-left-radius: var(--swui-action-menu-border-radius);\n border-top-right-radius: var(--swui-action-menu-border-radius);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq:last-child {\n border-bottom-left-radius: var(--swui-action-menu-border-radius);\n border-bottom-right-radius: var(--swui-action-menu-border-radius);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq:disabled,\n .ActionMenuItem-module_actionMenuItem__3daZq[aria-disabled=\"true\"] {\n cursor: not-allowed;\n --current-item-background: var(--swui-action-menu-item-background-disabled);\n --current-item-label-color: var(\n --swui-action-menu-item-label-color-disabled\n );\n --current-item-text-color: var(--swui-action-menu-item-text-color-disabled);\n --current-item-icon-color: var(--swui-action-menu-icon-color-disabled);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_standard__2yVXB:hover:not(.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_standard__2yVXB:disabled,.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_standard__2yVXB[aria-disabled=\"true\"],.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_standard__2yVXB.ActionMenuItem-module_actionMenuItemContent__j_JEf) {\n --current-item-background: var(--swui-action-menu-item-background-hover);\n --current-item-label-color: var(\n --swui-action-menu-item-label-color-hover\n );\n --current-item-text-color: var(--swui-action-menu-item-text-color-hover);\n --current-item-icon-color: var(--swui-action-menu-icon-color-hover);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_standard__2yVXB:focus-visible {\n --current-item-background: var(--swui-action-menu-item-background-focus);\n --current-item-label-color: var(\n --swui-action-menu-item-label-color-focus\n );\n --current-item-text-color: var(--swui-action-menu-item-text-color-focus);\n --current-item-icon-color: var(--swui-action-menu-icon-color-focus);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_standard__2yVXB:disabled:focus-visible {\n --current-item-background: var(\n --swui-action-menu-item-background-disabled-focus\n );\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO {\n --current-item-icon-color: var(--lhds-color-red-500);\n --current-item-label-color: var(--lhds-color-red-600);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO:hover:not(.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO:disabled,.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO[aria-disabled=\"true\"],.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO.ActionMenuItem-module_actionMenuItemContent__j_JEf) {\n --current-item-background: var(--lhds-color-red-50);\n --current-item-icon-color: var(--lhds-color-red-500);\n --current-item-label-color: var(--lhds-color-red-600);\n\n --current-item-text-color: var(--swui-action-menu-item-text-color-hover);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO:focus-visible {\n --current-item-background: var(--lhds-color-red-50);\n --current-item-label-color: var(--lhds-color-red-600);\n --current-item-icon-color: var(--lhds-color-red-500);\n\n --current-item-text-color: var(--swui-action-menu-item-text-color-focus);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_danger__Sq8qO:disabled:focus-visible {\n --current-item-background: var(\n --swui-action-menu-item-background-disabled-focus\n );\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP {\n --current-item-icon-color: var(--lhds-color-green-600);\n --current-item-label-color: var(--lhds-color-green-600);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP:hover:not(.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP:disabled,.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP[aria-disabled=\"true\"],.ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP.ActionMenuItem-module_actionMenuItemContent__j_JEf) {\n --current-item-background: var(--lhds-color-green-50);\n --current-item-icon-color: var(--lhds-color-green-600);\n --current-item-label-color: var(--lhds-color-green-600);\n\n --current-item-text-color: var(--swui-action-menu-item-text-color-hover);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP:focus-visible {\n --current-item-background: var(--lhds-color-green-50);\n --current-item-label-color: var(--lhds-color-green-600);\n --current-item-icon-color: var(--lhds-color-green-600);\n\n --current-item-text-color: var(--swui-action-menu-item-text-color-focus);\n }\n\n .ActionMenuItem-module_actionMenuItem__3daZq.ActionMenuItem-module_success__2qQKP:disabled:focus-visible {\n --current-item-background: var(\n --swui-action-menu-item-background-disabled-focus\n );\n }\n\n.ActionMenuItem-module_actionMenuItemLabel__T5-7U {\n color: var(--current-item-label-color);\n margin-right: auto;\n}\n\n.ActionMenuItem-module_actionMenuItemText__1zHot {\n color: var(--current-item-text-color);\n}\n\n.ActionMenuItem-module_actionMenuItemIcon__GyDyD {\n --current-icon-color: var(--current-item-icon-color);\n}\n\n.ActionMenuItem-module_actionMenuItemIconWrapper__2Pkdp {\n width: 20px;\n}\n\n.ActionMenuItem-module_actionMenuItemInnerContent__1cDjm {\n height: var(--swui-action-menu-item-height);\n}\n";
|
|
537
540
|
var styles$4 = {"actionMenuItem":"ActionMenuItem-module_actionMenuItem__3daZq","actionMenuItemContent":"ActionMenuItem-module_actionMenuItemContent__j_JEf","standard":"ActionMenuItem-module_standard__2yVXB","danger":"ActionMenuItem-module_danger__Sq8qO","success":"ActionMenuItem-module_success__2qQKP","actionMenuItemLabel":"ActionMenuItem-module_actionMenuItemLabel__T5-7U","actionMenuItemText":"ActionMenuItem-module_actionMenuItemText__1zHot","actionMenuItemIcon":"ActionMenuItem-module_actionMenuItemIcon__GyDyD","actionMenuItemIconWrapper":"ActionMenuItem-module_actionMenuItemIconWrapper__2Pkdp","actionMenuItemInnerContent":"ActionMenuItem-module_actionMenuItemInnerContent__1cDjm"};
|
|
538
541
|
styleInject(css_248z$4);
|
|
539
542
|
|
|
@@ -613,7 +616,7 @@ var ActionMenuSeparator = function () {
|
|
|
613
616
|
return React.createElement(SeparatorLine, null);
|
|
614
617
|
};
|
|
615
618
|
|
|
616
|
-
var css_248z$3 = ".Tab-module_tab__3Hb1M {\n --swui-tab-border-color: var(--lhds-color-ui-200);\n --swui-tab-border-color-hover: var(--lhds-color-blue-200);\n --swui-tab-border-color-focus: var(--lhds-color-blue-200);\n --swui-tab-border-color-selected: var(--lhds-color-blue-600);\n --swui-tab-label-color: var(--swui-text-primary-color);\n --swui-tab-label-color-selected: var(--swui-text-action-color);\n --swui-tab-outline-color-focus: var(--lhds-color-blue-400);\n\n /*\n State variables\n */\n\n --current-outer-border-bottom-color: transparent;\n --current-inset-shadow: none;\n --current-label-color: var(--swui-tab-label-color);\n\n /*\n Styling\n */\n\n outline: none;\n height: var(--swui-tab-menu-height);\n padding: 0 calc(var(--swui-metrics-indent) * 2);\n display:
|
|
619
|
+
var css_248z$3 = ".Tab-module_tab__3Hb1M {\n --swui-tab-border-color: var(--lhds-color-ui-200);\n --swui-tab-border-color-hover: var(--lhds-color-blue-200);\n --swui-tab-border-color-focus: var(--lhds-color-blue-200);\n --swui-tab-border-color-selected: var(--lhds-color-blue-600);\n --swui-tab-label-color: var(--swui-text-primary-color);\n --swui-tab-label-color-selected: var(--swui-text-action-color);\n --swui-tab-outline-color-focus: var(--lhds-color-blue-400);\n\n /*\n State variables\n */\n\n --current-outer-border-bottom-color: transparent;\n --current-inset-shadow: none;\n --current-label-color: var(--swui-tab-label-color);\n\n /*\n Styling\n */\n\n outline: none;\n height: var(--swui-tab-menu-height);\n padding: 0 calc(var(--swui-metrics-indent) * 2);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n font-size: var(--swui-font-size-small);\n font-family: var(--swui-font-buttons);\n font-weight: var(--swui-font-weight-text-bold);\n border: none;\n border-bottom: 2px solid var(--current-outer-border-bottom-color);\n cursor: pointer;\n background-color: transparent;\n color: var(--current-label-color);\n}\n\n .Tab-module_tab__3Hb1M:focus-visible {\n outline: 1px solid var(--swui-tab-outline-color-focus);\n box-shadow: inset var(--swui-primary-action-color) 0 0 4px 0;\n border: none;\n padding-bottom: 2px;\n }\n\n .Tab-module_tab__3Hb1M.Tab-module_selected__20X1B {\n --current-outer-border-bottom-color: var(--swui-tab-border-color-selected);\n --current-label-color: var(--swui-tab-label-color-selected);\n }\n\n .Tab-module_tab__3Hb1M:hover:not(.Tab-module_selected__20X1B) {\n --current-outer-border-bottom-color: var(--swui-tab-border-color-hover);\n }\n";
|
|
617
620
|
var styles$3 = {"tab":"Tab-module_tab__3Hb1M","selected":"Tab-module_selected__20X1B"};
|
|
618
621
|
styleInject(css_248z$3);
|
|
619
622
|
|
|
@@ -625,7 +628,7 @@ var Tab = forwardRef(function Tab(_a, ref) {
|
|
|
625
628
|
React.createElement(ButtonContent, { success: success, loading: loading, leftIcon: leftIcon, left: left, right: right, rightIcon: rightIcon, label: buttonLabel })));
|
|
626
629
|
});
|
|
627
630
|
|
|
628
|
-
var css_248z$2 = ".TabMenu-module_tabMenu__2cR43 {\n --swui-tab-menu-height: 40px;\n --swui-tab-menu-border-color: var(--lhds-color-ui-200);\n\n /*\n Styling\n */\n display:
|
|
631
|
+
var css_248z$2 = ".TabMenu-module_tabMenu__2cR43 {\n --swui-tab-menu-height: 40px;\n --swui-tab-menu-border-color: var(--lhds-color-ui-200);\n\n /*\n Styling\n */\n display: flex;\n height: var(--swui-tab-menu-height);\n}\n\n .TabMenu-module_tabMenu__2cR43.TabMenu-module_withBorder__10RXk {\n border-bottom: 1px solid var(--swui-tab-menu-border-color);\n }\n";
|
|
629
632
|
var styles$2 = {"tabMenu":"TabMenu-module_tabMenu__2cR43","withBorder":"TabMenu-module_withBorder__10RXk"};
|
|
630
633
|
styleInject(css_248z$2);
|
|
631
634
|
|
|
@@ -635,7 +638,7 @@ var TabMenu = function (_a) {
|
|
|
635
638
|
return (React.createElement(Row, { className: cx(styles$2.tabMenu, (_b = {}, _b[styles$2.withBorder] = enableBorder, _b)), gap: 2, role: "tablist" }, children));
|
|
636
639
|
};
|
|
637
640
|
|
|
638
|
-
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:
|
|
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";
|
|
639
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"};
|
|
640
643
|
styleInject(css_248z$1);
|
|
641
644
|
|