@dynatrace/strato-components 1.17.0 → 1.18.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.
- package/buttons/button/Button.css +16 -16
- package/buttons/button/Button.sty.js +4 -4
- package/buttons/intent-button/IntentButton.d.ts +1 -1
- package/content/progress/ProgressBar.css +71 -71
- package/content/progress/ProgressBar.sty.js +5 -5
- package/content/progress/ProgressBarIcon.css +2 -2
- package/content/progress/ProgressBarIcon.sty.js +1 -1
- package/content/progress/ProgressBarLabel.css +3 -3
- package/content/progress/ProgressBarLabel.sty.js +1 -1
- package/content/progress/ProgressBarValue.css +5 -5
- package/content/progress/ProgressBarValue.sty.js +1 -1
- package/content/progress/ProgressCircle.css +40 -40
- package/content/progress/ProgressCircle.sty.js +5 -5
- package/content/skeleton/Skeleton.css +7 -7
- package/content/skeleton/Skeleton.sty.js +5 -5
- package/core/hooks/useBehavioralTrackingProps.d.ts +4 -0
- package/core/index.d.ts +1 -0
- package/core/index.js +2 -0
- package/core/styles/focusRing.css +66 -66
- package/core/styles/focusRing.sty.js +2 -2
- package/core/styles/focusRingStatic.css +30 -30
- package/core/styles/focusRingStatic.sty.js +1 -1
- package/core/utils/colorUtils.css +60 -60
- package/core/utils/colorUtils.sty.js +2 -2
- package/esm/buttons/button/Button.css +16 -16
- package/esm/buttons/button/Button.sty.js +4 -4
- package/esm/buttons/button/Button.sty.js.map +1 -1
- package/esm/buttons/intent-button/IntentButton.js.map +1 -1
- package/esm/content/progress/ProgressBar.css +71 -71
- package/esm/content/progress/ProgressBar.sty.js +5 -5
- package/esm/content/progress/ProgressBar.sty.js.map +1 -1
- package/esm/content/progress/ProgressBarIcon.css +2 -2
- package/esm/content/progress/ProgressBarIcon.sty.js +1 -1
- package/esm/content/progress/ProgressBarIcon.sty.js.map +1 -1
- package/esm/content/progress/ProgressBarLabel.css +3 -3
- package/esm/content/progress/ProgressBarLabel.sty.js +1 -1
- package/esm/content/progress/ProgressBarLabel.sty.js.map +1 -1
- package/esm/content/progress/ProgressBarValue.css +5 -5
- package/esm/content/progress/ProgressBarValue.sty.js +1 -1
- package/esm/content/progress/ProgressBarValue.sty.js.map +1 -1
- package/esm/content/progress/ProgressCircle.css +40 -40
- package/esm/content/progress/ProgressCircle.sty.js +5 -5
- package/esm/content/progress/ProgressCircle.sty.js.map +1 -1
- package/esm/content/skeleton/Skeleton.css +7 -7
- package/esm/content/skeleton/Skeleton.sty.js +5 -5
- package/esm/content/skeleton/Skeleton.sty.js.map +1 -1
- package/esm/core/hooks/useBehavioralTrackingProps.js.map +2 -2
- package/esm/core/index.js +2 -0
- package/esm/core/index.js.map +2 -2
- package/esm/core/styles/focusRing.css +66 -66
- package/esm/core/styles/focusRing.sty.js +2 -2
- package/esm/core/styles/focusRing.sty.js.map +1 -1
- package/esm/core/styles/focusRingStatic.css +30 -30
- package/esm/core/styles/focusRingStatic.sty.js +1 -1
- package/esm/core/styles/focusRingStatic.sty.js.map +1 -1
- package/esm/core/utils/colorUtils.css +60 -60
- package/esm/core/utils/colorUtils.sty.js +2 -2
- package/esm/core/utils/colorUtils.sty.js.map +1 -1
- package/esm/layouts/container/Container.css +4 -4
- package/esm/layouts/container/Container.sty.js +1 -1
- package/esm/layouts/container/Container.sty.js.map +1 -1
- package/esm/layouts/divider/Divider.css +6 -6
- package/esm/layouts/divider/Divider.sty.js +1 -1
- package/esm/layouts/divider/Divider.sty.js.map +1 -1
- package/esm/layouts/surface/Surface.css +39 -39
- package/esm/layouts/surface/Surface.sty.js +2 -2
- package/esm/layouts/surface/Surface.sty.js.map +1 -1
- package/esm/layouts/surface/variables.sty.js +1 -1
- package/esm/layouts/surface/variables.sty.js.map +1 -1
- package/esm/styles/colorUtils.css +60 -60
- package/esm/styles/colorUtils.sty.js +2 -2
- package/esm/styles/colorUtils.sty.js.map +1 -1
- package/esm/styles/container.css +47 -47
- package/esm/styles/container.sty.js +2 -2
- package/esm/styles/container.sty.js.map +1 -1
- package/esm/styles/ellipsis.css +1 -1
- package/esm/styles/ellipsis.sty.js +1 -1
- package/esm/styles/ellipsis.sty.js.map +1 -1
- package/esm/styles/field.css +153 -153
- package/esm/styles/field.sty.js +2 -2
- package/esm/styles/field.sty.js.map +1 -1
- package/esm/styles/sprinkles.css +262 -262
- package/esm/styles/sprinkles.sty.js +1 -1
- package/esm/styles/sprinkles.sty.js.map +1 -1
- package/esm/styles/textStyle.css +8 -8
- package/esm/styles/textStyle.sty.js +1 -1
- package/esm/styles/textStyle.sty.js.map +1 -1
- package/esm/typography/block-quote/Blockquote.css +2 -2
- package/esm/typography/block-quote/Blockquote.sty.js +1 -1
- package/esm/typography/block-quote/Blockquote.sty.js.map +1 -1
- package/esm/typography/code/Code.css +1 -1
- package/esm/typography/code/Code.sty.js +1 -1
- package/esm/typography/code/Code.sty.js.map +1 -1
- package/esm/typography/emphasis/Emphasis.css +1 -1
- package/esm/typography/emphasis/Emphasis.sty.js +1 -1
- package/esm/typography/emphasis/Emphasis.sty.js.map +1 -1
- package/esm/typography/external-link/ExternalLink.css +6 -6
- package/esm/typography/external-link/ExternalLink.sty.js +1 -1
- package/esm/typography/external-link/ExternalLink.sty.js.map +1 -1
- package/esm/typography/heading/Heading.css +7 -7
- package/esm/typography/heading/Heading.sty.js +1 -1
- package/esm/typography/heading/Heading.sty.js.map +1 -1
- package/esm/typography/highlight/Highlight.css +2 -2
- package/esm/typography/highlight/Highlight.sty.js +1 -1
- package/esm/typography/highlight/Highlight.sty.js.map +1 -1
- package/esm/typography/link/Link.css +4 -4
- package/esm/typography/link/Link.sty.js +1 -1
- package/esm/typography/link/Link.sty.js.map +1 -1
- package/esm/typography/list/List.css +4 -4
- package/esm/typography/list/List.sty.js +2 -2
- package/esm/typography/list/List.sty.js.map +1 -1
- package/esm/typography/paragraph/Paragraph.css +3 -3
- package/esm/typography/paragraph/Paragraph.sty.js +1 -1
- package/esm/typography/paragraph/Paragraph.sty.js.map +1 -1
- package/esm/typography/strikethrough/Strikethrough.css +1 -1
- package/esm/typography/strikethrough/Strikethrough.sty.js +1 -1
- package/esm/typography/strikethrough/Strikethrough.sty.js.map +1 -1
- package/esm/typography/strong/Strong.css +1 -1
- package/esm/typography/strong/Strong.sty.js +1 -1
- package/esm/typography/strong/Strong.sty.js.map +1 -1
- package/esm/typography/text/Text.css +3 -3
- package/esm/typography/text/Text.sty.js +1 -1
- package/esm/typography/text/Text.sty.js.map +1 -1
- package/esm/typography/text-ellipsis/TextEllipsis.css +6 -6
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map +1 -1
- package/layouts/container/Container.css +4 -4
- package/layouts/container/Container.sty.js +1 -1
- package/layouts/divider/Divider.css +6 -6
- package/layouts/divider/Divider.sty.js +1 -1
- package/layouts/surface/Surface.css +39 -39
- package/layouts/surface/Surface.sty.js +2 -2
- package/layouts/surface/variables.sty.js +1 -1
- package/package.json +3 -3
- package/styles/colorUtils.css +60 -60
- package/styles/colorUtils.sty.js +2 -2
- package/styles/container.css +47 -47
- package/styles/container.sty.js +2 -2
- package/styles/ellipsis.css +1 -1
- package/styles/ellipsis.sty.js +1 -1
- package/styles/field.css +153 -153
- package/styles/field.sty.js +2 -2
- package/styles/sprinkles.css +262 -262
- package/styles/sprinkles.sty.js +1 -1
- package/styles/textStyle.css +8 -8
- package/styles/textStyle.sty.js +1 -1
- package/typography/block-quote/Blockquote.css +2 -2
- package/typography/block-quote/Blockquote.sty.js +1 -1
- package/typography/code/Code.css +1 -1
- package/typography/code/Code.sty.js +1 -1
- package/typography/emphasis/Emphasis.css +1 -1
- package/typography/emphasis/Emphasis.sty.js +1 -1
- package/typography/external-link/ExternalLink.css +6 -6
- package/typography/external-link/ExternalLink.sty.js +1 -1
- package/typography/heading/Heading.css +7 -7
- package/typography/heading/Heading.sty.js +1 -1
- package/typography/highlight/Highlight.css +2 -2
- package/typography/highlight/Highlight.sty.js +1 -1
- package/typography/link/Link.css +4 -4
- package/typography/link/Link.sty.js +1 -1
- package/typography/list/List.css +4 -4
- package/typography/list/List.sty.js +2 -2
- package/typography/paragraph/Paragraph.css +3 -3
- package/typography/paragraph/Paragraph.sty.js +1 -1
- package/typography/strikethrough/Strikethrough.css +1 -1
- package/typography/strikethrough/Strikethrough.sty.js +1 -1
- package/typography/strong/Strong.css +1 -1
- package/typography/strong/Strong.sty.js +1 -1
- package/typography/text/Text.css +3 -3
- package/typography/text/Text.sty.js +1 -1
- package/typography/text-ellipsis/TextEllipsis.css +6 -6
- package/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
._z2r50s3-1-
|
|
1
|
+
._z2r50s3-1-18-0 {
|
|
2
2
|
outline: none;
|
|
3
3
|
}
|
|
4
|
-
._z2r50s3-1-
|
|
4
|
+
._z2r50s3-1-18-0:focus-visible {
|
|
5
5
|
outline: none;
|
|
6
6
|
}
|
|
7
|
-
._z2r50s4-1-
|
|
7
|
+
._z2r50s4-1-18-0 {
|
|
8
8
|
border-radius: var(--dt-borders-radius-field-subdued, 3px);
|
|
9
|
-
box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-
|
|
10
|
-
background-color: var(--_z2r50s2-1-
|
|
11
|
-
}
|
|
12
|
-
._z2r50s5-1-
|
|
13
|
-
box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-
|
|
14
|
-
}
|
|
15
|
-
._z2r50s6-1-
|
|
16
|
-
--_z2r50s0-1-
|
|
17
|
-
--_z2r50s1-1-
|
|
18
|
-
--_z2r50s2-1-
|
|
19
|
-
}
|
|
20
|
-
._z2r50s7-1-
|
|
21
|
-
--_z2r50s0-1-
|
|
22
|
-
--_z2r50s1-1-
|
|
23
|
-
--_z2r50s2-1-
|
|
24
|
-
}
|
|
25
|
-
._z2r50s8-1-
|
|
26
|
-
--_z2r50s0-1-
|
|
27
|
-
--_z2r50s1-1-
|
|
28
|
-
--_z2r50s2-1-
|
|
29
|
-
}
|
|
30
|
-
._z2r50s9-1-
|
|
31
|
-
--_z2r50s0-1-
|
|
32
|
-
--_z2r50s1-1-
|
|
33
|
-
--_z2r50s2-1-
|
|
34
|
-
}
|
|
35
|
-
._z2r50sa-1-
|
|
36
|
-
--_z2r50s0-1-
|
|
37
|
-
--_z2r50s1-1-
|
|
38
|
-
--_z2r50s2-1-
|
|
39
|
-
}
|
|
40
|
-
._z2r50sb-1-
|
|
9
|
+
box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-18-0);
|
|
10
|
+
background-color: var(--_z2r50s2-1-18-0);
|
|
11
|
+
}
|
|
12
|
+
._z2r50s5-1-18-0._z2r50s5-1-18-0 {
|
|
13
|
+
box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-18-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-18-0);
|
|
14
|
+
}
|
|
15
|
+
._z2r50s6-1-18-0 {
|
|
16
|
+
--_z2r50s0-1-18-0: var(--dt-colors-border-neutral-accent, #595a7d);
|
|
17
|
+
--_z2r50s1-1-18-0: var(--dt-colors-border-neutral-default, #dadbe4);
|
|
18
|
+
--_z2r50s2-1-18-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
|
|
19
|
+
}
|
|
20
|
+
._z2r50s7-1-18-0 {
|
|
21
|
+
--_z2r50s0-1-18-0: var(--dt-colors-border-primary-accent, #464cce);
|
|
22
|
+
--_z2r50s1-1-18-0: var(--dt-colors-border-primary-default, #d5dbf6);
|
|
23
|
+
--_z2r50s2-1-18-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
|
|
24
|
+
}
|
|
25
|
+
._z2r50s8-1-18-0 {
|
|
26
|
+
--_z2r50s0-1-18-0: var(--dt-colors-border-success-accent, #2d6761);
|
|
27
|
+
--_z2r50s1-1-18-0: var(--dt-colors-border-success-default, #d3dedd);
|
|
28
|
+
--_z2r50s2-1-18-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
|
|
29
|
+
}
|
|
30
|
+
._z2r50s9-1-18-0 {
|
|
31
|
+
--_z2r50s0-1-18-0: var(--dt-colors-border-warning-accent, #855400);
|
|
32
|
+
--_z2r50s1-1-18-0: var(--dt-colors-border-warning-default, #f9ebdb);
|
|
33
|
+
--_z2r50s2-1-18-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
|
|
34
|
+
}
|
|
35
|
+
._z2r50sa-1-18-0 {
|
|
36
|
+
--_z2r50s0-1-18-0: var(--dt-colors-border-critical-accent, #bb0731);
|
|
37
|
+
--_z2r50s1-1-18-0: var(--dt-colors-border-critical-default, #f6d6d5);
|
|
38
|
+
--_z2r50s2-1-18-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
|
|
39
|
+
}
|
|
40
|
+
._z2r50sb-1-18-0:focus-within {
|
|
41
41
|
outline: none;
|
|
42
42
|
}
|
|
43
|
-
._z2r50sc-1-
|
|
43
|
+
._z2r50sc-1-18-0._z2r50sc-1-18-0:focus-within {
|
|
44
44
|
border-radius: var(--dt-borders-radius-field-subdued, 3px);
|
|
45
|
-
box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-
|
|
46
|
-
background-color: var(--_z2r50s2-1-
|
|
47
|
-
}
|
|
48
|
-
._z2r50sd-1-
|
|
49
|
-
box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-
|
|
50
|
-
}
|
|
51
|
-
._z2r50se-1-
|
|
52
|
-
--_z2r50s0-1-
|
|
53
|
-
--_z2r50s1-1-
|
|
54
|
-
--_z2r50s2-1-
|
|
55
|
-
}
|
|
56
|
-
._z2r50sf-1-
|
|
57
|
-
--_z2r50s0-1-
|
|
58
|
-
--_z2r50s1-1-
|
|
59
|
-
--_z2r50s2-1-
|
|
60
|
-
}
|
|
61
|
-
._z2r50sg-1-
|
|
62
|
-
--_z2r50s0-1-
|
|
63
|
-
--_z2r50s1-1-
|
|
64
|
-
--_z2r50s2-1-
|
|
65
|
-
}
|
|
66
|
-
._z2r50sh-1-
|
|
67
|
-
--_z2r50s0-1-
|
|
68
|
-
--_z2r50s1-1-
|
|
69
|
-
--_z2r50s2-1-
|
|
70
|
-
}
|
|
71
|
-
._z2r50si-1-
|
|
72
|
-
--_z2r50s0-1-
|
|
73
|
-
--_z2r50s1-1-
|
|
74
|
-
--_z2r50s2-1-
|
|
45
|
+
box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-18-0);
|
|
46
|
+
background-color: var(--_z2r50s2-1-18-0);
|
|
47
|
+
}
|
|
48
|
+
._z2r50sd-1-18-0._z2r50sd-1-18-0:focus-within {
|
|
49
|
+
box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-18-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-18-0);
|
|
50
|
+
}
|
|
51
|
+
._z2r50se-1-18-0 {
|
|
52
|
+
--_z2r50s0-1-18-0: var(--dt-colors-border-neutral-accent, #595a7d);
|
|
53
|
+
--_z2r50s1-1-18-0: var(--dt-colors-border-neutral-default, #dadbe4);
|
|
54
|
+
--_z2r50s2-1-18-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
|
|
55
|
+
}
|
|
56
|
+
._z2r50sf-1-18-0 {
|
|
57
|
+
--_z2r50s0-1-18-0: var(--dt-colors-border-primary-accent, #464cce);
|
|
58
|
+
--_z2r50s1-1-18-0: var(--dt-colors-border-primary-default, #d5dbf6);
|
|
59
|
+
--_z2r50s2-1-18-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
|
|
60
|
+
}
|
|
61
|
+
._z2r50sg-1-18-0 {
|
|
62
|
+
--_z2r50s0-1-18-0: var(--dt-colors-border-success-accent, #2d6761);
|
|
63
|
+
--_z2r50s1-1-18-0: var(--dt-colors-border-success-default, #d3dedd);
|
|
64
|
+
--_z2r50s2-1-18-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
|
|
65
|
+
}
|
|
66
|
+
._z2r50sh-1-18-0 {
|
|
67
|
+
--_z2r50s0-1-18-0: var(--dt-colors-border-warning-accent, #855400);
|
|
68
|
+
--_z2r50s1-1-18-0: var(--dt-colors-border-warning-default, #f9ebdb);
|
|
69
|
+
--_z2r50s2-1-18-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
|
|
70
|
+
}
|
|
71
|
+
._z2r50si-1-18-0 {
|
|
72
|
+
--_z2r50s0-1-18-0: var(--dt-colors-border-critical-accent, #bb0731);
|
|
73
|
+
--_z2r50s1-1-18-0: var(--dt-colors-border-critical-default, #f6d6d5);
|
|
74
|
+
--_z2r50s2-1-18-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
|
|
75
75
|
}
|
|
@@ -24,5 +24,5 @@ __export(focusRing_css_exports, {
|
|
|
24
24
|
module.exports = __toCommonJS(focusRing_css_exports);
|
|
25
25
|
var import_focusRing_css_ts_vanilla = require("./focusRing.css");
|
|
26
26
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
27
|
-
var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-
|
|
28
|
-
var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-
|
|
27
|
+
var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-18-0", variantClassNames: { minimal: { true: "_z2r50s4-1-18-0", false: "_z2r50s5-1-18-0" }, variant: { neutral: "_z2r50s6-1-18-0", primary: "_z2r50s7-1-18-0", success: "_z2r50s8-1-18-0", warning: "_z2r50s9-1-18-0", critical: "_z2r50sa-1-18-0" } }, defaultVariants: {}, compoundVariants: [] });
|
|
28
|
+
var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-18-0", variantClassNames: { minimal: { true: "_z2r50sc-1-18-0", false: "_z2r50sd-1-18-0" }, variant: { neutral: "_z2r50se-1-18-0", primary: "_z2r50sf-1-18-0", success: "_z2r50sg-1-18-0", warning: "_z2r50sh-1-18-0", critical: "_z2r50si-1-18-0" } }, defaultVariants: {}, compoundVariants: [] });
|
|
@@ -1,44 +1,44 @@
|
|
|
1
|
-
._z0fq9b4-1-
|
|
1
|
+
._z0fq9b4-1-18-0 {
|
|
2
2
|
outline: none;
|
|
3
3
|
box-shadow: none;
|
|
4
4
|
}
|
|
5
|
-
._z0fq9b5-1-
|
|
6
|
-
--_z0fq9b3-1-
|
|
7
|
-
--_z0fq9b2-1-
|
|
5
|
+
._z0fq9b5-1-18-0 {
|
|
6
|
+
--_z0fq9b3-1-18-0: var(--dt-borders-width-default, 1px);
|
|
7
|
+
--_z0fq9b2-1-18-0: 0 0 0 var(--_z0fq9b3-1-18-0) var(--_z0fq9b0-1-18-0) inset;
|
|
8
8
|
}
|
|
9
|
-
._z0fq9b6-1-
|
|
10
|
-
--_z0fq9b3-1-
|
|
11
|
-
--_z0fq9b2-1-
|
|
9
|
+
._z0fq9b6-1-18-0 {
|
|
10
|
+
--_z0fq9b3-1-18-0: var(--dt-borders-width-emphasized, 2px);
|
|
11
|
+
--_z0fq9b2-1-18-0: 0 0 0 var(--_z0fq9b3-1-18-0) var(--_z0fq9b0-1-18-0) inset, 0 0 0 calc(var(--_z0fq9b3-1-18-0) + 1px) var(--_z0fq9b1-1-18-0) inset;
|
|
12
12
|
}
|
|
13
|
-
._z0fq9b7-1-
|
|
14
|
-
--_z0fq9b2-1-
|
|
13
|
+
._z0fq9b7-1-18-0 {
|
|
14
|
+
--_z0fq9b2-1-18-0: none;
|
|
15
15
|
}
|
|
16
|
-
._z0fq9b8-1-
|
|
17
|
-
box-shadow: var(--_z0fq9b2-1-
|
|
16
|
+
._z0fq9b8-1-18-0:focus-visible {
|
|
17
|
+
box-shadow: var(--_z0fq9b2-1-18-0);
|
|
18
18
|
}
|
|
19
|
-
._z0fq9b9-1-
|
|
20
|
-
box-shadow: var(--_z0fq9b2-1-
|
|
19
|
+
._z0fq9b9-1-18-0:focus-within {
|
|
20
|
+
box-shadow: var(--_z0fq9b2-1-18-0);
|
|
21
21
|
}
|
|
22
|
-
._z0fq9ba-1-
|
|
23
|
-
box-shadow: var(--_z0fq9b2-1-
|
|
22
|
+
._z0fq9ba-1-18-0:focus {
|
|
23
|
+
box-shadow: var(--_z0fq9b2-1-18-0);
|
|
24
24
|
}
|
|
25
|
-
._z0fq9bb-1-
|
|
26
|
-
--_z0fq9b0-1-
|
|
27
|
-
--_z0fq9b1-1-
|
|
25
|
+
._z0fq9bb-1-18-0 {
|
|
26
|
+
--_z0fq9b0-1-18-0: var(--dt-colors-border-neutral-accent, #595a7d);
|
|
27
|
+
--_z0fq9b1-1-18-0: var(--dt-colors-border-neutral-default, #dadbe4);
|
|
28
28
|
}
|
|
29
|
-
._z0fq9bc-1-
|
|
30
|
-
--_z0fq9b0-1-
|
|
31
|
-
--_z0fq9b1-1-
|
|
29
|
+
._z0fq9bc-1-18-0 {
|
|
30
|
+
--_z0fq9b0-1-18-0: var(--dt-colors-border-primary-accent, #464cce);
|
|
31
|
+
--_z0fq9b1-1-18-0: var(--dt-colors-border-primary-default, #d5dbf6);
|
|
32
32
|
}
|
|
33
|
-
._z0fq9bd-1-
|
|
34
|
-
--_z0fq9b0-1-
|
|
35
|
-
--_z0fq9b1-1-
|
|
33
|
+
._z0fq9bd-1-18-0 {
|
|
34
|
+
--_z0fq9b0-1-18-0: var(--dt-colors-border-success-accent, #2d6761);
|
|
35
|
+
--_z0fq9b1-1-18-0: var(--dt-colors-border-success-default, #d3dedd);
|
|
36
36
|
}
|
|
37
|
-
._z0fq9be-1-
|
|
38
|
-
--_z0fq9b0-1-
|
|
39
|
-
--_z0fq9b1-1-
|
|
37
|
+
._z0fq9be-1-18-0 {
|
|
38
|
+
--_z0fq9b0-1-18-0: var(--dt-colors-border-warning-accent, #855400);
|
|
39
|
+
--_z0fq9b1-1-18-0: var(--dt-colors-border-warning-default, #f9ebdb);
|
|
40
40
|
}
|
|
41
|
-
._z0fq9bf-1-
|
|
42
|
-
--_z0fq9b0-1-
|
|
43
|
-
--_z0fq9b1-1-
|
|
41
|
+
._z0fq9bf-1-18-0 {
|
|
42
|
+
--_z0fq9b0-1-18-0: var(--dt-colors-border-critical-accent, #bb0731);
|
|
43
|
+
--_z0fq9b1-1-18-0: var(--dt-colors-border-critical-default, #f6d6d5);
|
|
44
44
|
}
|
|
@@ -23,4 +23,4 @@ __export(focusRingStatic_css_exports, {
|
|
|
23
23
|
module.exports = __toCommonJS(focusRingStatic_css_exports);
|
|
24
24
|
var import_focusRingStatic_css_ts_vanilla = require("./focusRingStatic.css");
|
|
25
25
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
26
|
-
var focusRingStatic = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z0fq9b4-1-
|
|
26
|
+
var focusRingStatic = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z0fq9b4-1-18-0", variantClassNames: { minimal: { true: "_z0fq9b5-1-18-0", false: "_z0fq9b6-1-18-0" }, disabled: { true: "_z0fq9b7-1-18-0" }, when: { "focus-visible": "_z0fq9b8-1-18-0", "focus-within": "_z0fq9b9-1-18-0", focus: "_z0fq9ba-1-18-0" }, color: { neutral: "_z0fq9bb-1-18-0", primary: "_z0fq9bc-1-18-0", success: "_z0fq9bd-1-18-0", warning: "_z0fq9be-1-18-0", critical: "_z0fq9bf-1-18-0" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });
|
|
@@ -1,75 +1,75 @@
|
|
|
1
|
-
._k096v44-1-
|
|
2
|
-
--_k096v40-1-
|
|
3
|
-
--_k096v41-1-
|
|
4
|
-
--_k096v42-1-
|
|
1
|
+
._k096v44-1-18-0 {
|
|
2
|
+
--_k096v40-1-18-0: var(--dt-colors-text-critical-default, #bb0731);
|
|
3
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-critical-default, #bb0731);
|
|
4
|
+
--_k096v42-1-18-0: var(--dt-colors-border-critical-default, #f6d6d5);
|
|
5
5
|
}
|
|
6
|
-
._k096v45-1-
|
|
7
|
-
--_k096v40-1-
|
|
8
|
-
--_k096v41-1-
|
|
9
|
-
--_k096v42-1-
|
|
6
|
+
._k096v45-1-18-0 {
|
|
7
|
+
--_k096v40-1-18-0: var(--dt-colors-text-neutral-default, #2f2f4f);
|
|
8
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
|
|
9
|
+
--_k096v42-1-18-0: var(--dt-colors-border-neutral-default, #dadbe4);
|
|
10
10
|
}
|
|
11
|
-
._k096v46-1-
|
|
12
|
-
--_k096v40-1-
|
|
13
|
-
--_k096v41-1-
|
|
14
|
-
--_k096v42-1-
|
|
11
|
+
._k096v46-1-18-0 {
|
|
12
|
+
--_k096v40-1-18-0: var(--dt-colors-text-primary-default, #464cce);
|
|
13
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-primary-default, #464cce);
|
|
14
|
+
--_k096v42-1-18-0: var(--dt-colors-border-primary-default, #d5dbf6);
|
|
15
15
|
}
|
|
16
|
-
._k096v47-1-
|
|
17
|
-
--_k096v40-1-
|
|
18
|
-
--_k096v41-1-
|
|
19
|
-
--_k096v42-1-
|
|
16
|
+
._k096v47-1-18-0 {
|
|
17
|
+
--_k096v40-1-18-0: var(--dt-colors-text-success-default, #2d6761);
|
|
18
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-success-default, #2d6761);
|
|
19
|
+
--_k096v42-1-18-0: var(--dt-colors-border-success-default, #d3dedd);
|
|
20
20
|
}
|
|
21
|
-
._k096v48-1-
|
|
22
|
-
--_k096v40-1-
|
|
23
|
-
--_k096v41-1-
|
|
24
|
-
--_k096v42-1-
|
|
21
|
+
._k096v48-1-18-0 {
|
|
22
|
+
--_k096v40-1-18-0: var(--dt-colors-text-warning-default, #855400);
|
|
23
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-warning-default, #855400);
|
|
24
|
+
--_k096v42-1-18-0: var(--dt-colors-border-warning-default, #f9ebdb);
|
|
25
25
|
}
|
|
26
|
-
._k096v4d-1-
|
|
27
|
-
--_k096v40-1-
|
|
28
|
-
--_k096v41-1-
|
|
29
|
-
--_k096v42-1-
|
|
26
|
+
._k096v4d-1-18-0 {
|
|
27
|
+
--_k096v40-1-18-0: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
|
|
28
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
|
|
29
|
+
--_k096v42-1-18-0: var(--dt-colors-border-primary-accent, #464cce);
|
|
30
30
|
}
|
|
31
|
-
._k096v4e-1-
|
|
32
|
-
--_k096v40-1-
|
|
33
|
-
--_k096v41-1-
|
|
34
|
-
--_k096v42-1-
|
|
31
|
+
._k096v4e-1-18-0 {
|
|
32
|
+
--_k096v40-1-18-0: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
|
|
33
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
|
|
34
|
+
--_k096v42-1-18-0: var(--dt-colors-border-success-accent, #2d6761);
|
|
35
35
|
}
|
|
36
|
-
._k096v4f-1-
|
|
37
|
-
--_k096v40-1-
|
|
38
|
-
--_k096v41-1-
|
|
39
|
-
--_k096v42-1-
|
|
36
|
+
._k096v4f-1-18-0 {
|
|
37
|
+
--_k096v40-1-18-0: var(--dt-colors-text-warning-on-accent-default, #272024);
|
|
38
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-warning-on-accent-default, #272024);
|
|
39
|
+
--_k096v42-1-18-0: var(--dt-colors-border-warning-accent, #855400);
|
|
40
40
|
}
|
|
41
|
-
._k096v4g-1-
|
|
42
|
-
--_k096v40-1-
|
|
43
|
-
--_k096v41-1-
|
|
44
|
-
--_k096v42-1-
|
|
41
|
+
._k096v4g-1-18-0 {
|
|
42
|
+
--_k096v40-1-18-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
|
|
43
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
|
|
44
|
+
--_k096v42-1-18-0: var(--dt-colors-border-critical-accent, #bb0731);
|
|
45
45
|
}
|
|
46
|
-
._k096v4h-1-
|
|
47
|
-
--_k096v40-1-
|
|
48
|
-
--_k096v41-1-
|
|
49
|
-
--_k096v42-1-
|
|
46
|
+
._k096v4h-1-18-0 {
|
|
47
|
+
--_k096v40-1-18-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
48
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
|
|
49
|
+
--_k096v42-1-18-0: var(--dt-colors-border-neutral-accent, #595a7d);
|
|
50
50
|
}
|
|
51
|
-
._k096v4i-1-
|
|
52
|
-
--_k096v40-1-
|
|
53
|
-
--_k096v41-1-
|
|
54
|
-
--_k096v42-1-
|
|
51
|
+
._k096v4i-1-18-0 {
|
|
52
|
+
--_k096v40-1-18-0: var(--dt-colors-text-primary-disabled, #595a7d80);
|
|
53
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-primary-disabled, #595a7d80);
|
|
54
|
+
--_k096v42-1-18-0: var(--dt-colors-border-primary-disabled, #dadbe480);
|
|
55
55
|
}
|
|
56
|
-
._k096v4j-1-
|
|
57
|
-
--_k096v40-1-
|
|
58
|
-
--_k096v41-1-
|
|
59
|
-
--_k096v42-1-
|
|
56
|
+
._k096v4j-1-18-0 {
|
|
57
|
+
--_k096v40-1-18-0: var(--dt-colors-text-success-disabled, #595a7d80);
|
|
58
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-success-disabled, #595a7d80);
|
|
59
|
+
--_k096v42-1-18-0: var(--dt-colors-border-success-disabled, #dadbe480);
|
|
60
60
|
}
|
|
61
|
-
._k096v4k-1-
|
|
62
|
-
--_k096v40-1-
|
|
63
|
-
--_k096v41-1-
|
|
64
|
-
--_k096v42-1-
|
|
61
|
+
._k096v4k-1-18-0 {
|
|
62
|
+
--_k096v40-1-18-0: var(--dt-colors-text-warning-disabled, #595a7d80);
|
|
63
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-warning-disabled, #595a7d80);
|
|
64
|
+
--_k096v42-1-18-0: var(--dt-colors-border-warning-disabled, #dadbe480);
|
|
65
65
|
}
|
|
66
|
-
._k096v4l-1-
|
|
67
|
-
--_k096v40-1-
|
|
68
|
-
--_k096v41-1-
|
|
69
|
-
--_k096v42-1-
|
|
66
|
+
._k096v4l-1-18-0 {
|
|
67
|
+
--_k096v40-1-18-0: var(--dt-colors-text-critical-disabled, #595a7d80);
|
|
68
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-critical-disabled, #595a7d80);
|
|
69
|
+
--_k096v42-1-18-0: var(--dt-colors-border-critical-disabled, #dadbe480);
|
|
70
70
|
}
|
|
71
|
-
._k096v4m-1-
|
|
72
|
-
--_k096v40-1-
|
|
73
|
-
--_k096v41-1-
|
|
74
|
-
--_k096v42-1-
|
|
71
|
+
._k096v4m-1-18-0 {
|
|
72
|
+
--_k096v40-1-18-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
|
|
73
|
+
--_k096v41-1-18-0: var(--dt-colors-icon-neutral-disabled, #595a7d80);
|
|
74
|
+
--_k096v42-1-18-0: var(--dt-colors-border-neutral-disabled, #dadbe480);
|
|
75
75
|
}
|
|
@@ -24,5 +24,5 @@ __export(colorUtils_css_exports, {
|
|
|
24
24
|
module.exports = __toCommonJS(colorUtils_css_exports);
|
|
25
25
|
var import_colorUtils_css_ts_vanilla = require("./colorUtils.css");
|
|
26
26
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
27
|
-
var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-1-
|
|
28
|
-
var colorUtilsVars = { text: "var(--_k096v40-1-
|
|
27
|
+
var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-1-18-0", variantClassNames: { color: { critical: "_k096v44-1-18-0", neutral: "_k096v45-1-18-0", primary: "_k096v46-1-18-0", success: "_k096v47-1-18-0", warning: "_k096v48-1-18-0" }, variant: { "default": "_k096v49-1-18-0", accent: "_k096v4a-1-18-0" }, disabled: { true: "_k096v4b-1-18-0", false: "_k096v4c-1-18-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-1-18-0"], [{ color: "success", variant: "accent" }, "_k096v4e-1-18-0"], [{ color: "warning", variant: "accent" }, "_k096v4f-1-18-0"], [{ color: "critical", variant: "accent" }, "_k096v4g-1-18-0"], [{ color: "neutral", variant: "accent" }, "_k096v4h-1-18-0"], [{ color: "primary", disabled: true }, "_k096v4i-1-18-0"], [{ color: "success", disabled: true }, "_k096v4j-1-18-0"], [{ color: "warning", disabled: true }, "_k096v4k-1-18-0"], [{ color: "critical", disabled: true }, "_k096v4l-1-18-0"], [{ color: "neutral", disabled: true }, "_k096v4m-1-18-0"]] });
|
|
28
|
+
var colorUtilsVars = { text: "var(--_k096v40-1-18-0)", icon: "var(--_k096v41-1-18-0)", borderColor: "var(--_k096v42-1-18-0)" };
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
._10kgnsa0-1-
|
|
1
|
+
._10kgnsa0-1-18-0 {
|
|
2
2
|
font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
|
|
3
3
|
font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
|
|
4
4
|
font-size: var(--dt-typography-text-base-default-size, 14px);
|
|
5
5
|
line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
|
|
6
6
|
text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
|
|
7
7
|
text-transform: none;
|
|
8
|
-
background: var(--_bx32h3-1-
|
|
9
|
-
color: var(--_bx32h0-1-
|
|
8
|
+
background: var(--_bx32h3-1-18-0);
|
|
9
|
+
color: var(--_bx32h0-1-18-0);
|
|
10
10
|
display: inline-flex;
|
|
11
11
|
position: relative;
|
|
12
12
|
align-items: center;
|
|
@@ -23,42 +23,42 @@
|
|
|
23
23
|
transition-duration: var(--dt-animations-hover-duration-base, 150ms);
|
|
24
24
|
transition-property: color, background-color, transform;
|
|
25
25
|
}
|
|
26
|
-
._10kgnsa1-1-
|
|
26
|
+
._10kgnsa1-1-18-0 {
|
|
27
27
|
text-align: start;
|
|
28
28
|
justify-content: space-between;
|
|
29
29
|
}
|
|
30
|
-
._10kgnsa2-1-
|
|
30
|
+
._10kgnsa2-1-18-0 {
|
|
31
31
|
text-align: center;
|
|
32
32
|
justify-content: center;
|
|
33
33
|
}
|
|
34
|
-
._10kgnsa3-1-
|
|
34
|
+
._10kgnsa3-1-18-0 {
|
|
35
35
|
padding-top: var(--dt-spacings-size-2, 2px);
|
|
36
36
|
padding-bottom: var(--dt-spacings-size-2, 2px);
|
|
37
37
|
padding-left: var(--dt-spacings-size-4, 4px);
|
|
38
38
|
padding-right: var(--dt-spacings-size-4, 4px);
|
|
39
39
|
gap: var(--dt-spacings-size-2, 2px);
|
|
40
40
|
}
|
|
41
|
-
._10kgnsa4-1-
|
|
41
|
+
._10kgnsa4-1-18-0 {
|
|
42
42
|
padding-top: var(--dt-spacings-size-6, 6px);
|
|
43
43
|
padding-bottom: var(--dt-spacings-size-6, 6px);
|
|
44
44
|
padding-left: var(--dt-spacings-size-8, 8px);
|
|
45
45
|
padding-right: var(--dt-spacings-size-8, 8px);
|
|
46
46
|
gap: var(--dt-spacings-size-4, 4px);
|
|
47
47
|
}
|
|
48
|
-
._10kgnsa5-1-
|
|
48
|
+
._10kgnsa5-1-18-0 {
|
|
49
49
|
cursor: not-allowed;
|
|
50
50
|
}
|
|
51
|
-
._10kgnsa6-1-
|
|
51
|
+
._10kgnsa6-1-18-0 {
|
|
52
52
|
cursor: not-allowed;
|
|
53
|
-
background: var(--_bx32h2-1-
|
|
53
|
+
background: var(--_bx32h2-1-18-0);
|
|
54
54
|
}
|
|
55
|
-
._10kgnsa7-1-
|
|
55
|
+
._10kgnsa7-1-18-0 {
|
|
56
56
|
width: 100%;
|
|
57
57
|
}
|
|
58
|
-
._10kgnsa8-1-
|
|
58
|
+
._10kgnsa8-1-18-0 {
|
|
59
59
|
width: fit-content;
|
|
60
60
|
}
|
|
61
|
-
._10kgnsa9-1-
|
|
61
|
+
._10kgnsa9-1-18-0 {
|
|
62
62
|
position: absolute;
|
|
63
63
|
top: 0;
|
|
64
64
|
left: 0;
|
|
@@ -70,19 +70,19 @@
|
|
|
70
70
|
align-items: center;
|
|
71
71
|
z-index: 1;
|
|
72
72
|
}
|
|
73
|
-
._10kgnsa3-1-
|
|
73
|
+
._10kgnsa3-1-18-0 ._10kgnsaa-1-18-0:not(:has(svg:only-child)) {
|
|
74
74
|
padding-top: 0;
|
|
75
75
|
padding-bottom: 0;
|
|
76
76
|
padding-left: 2px;
|
|
77
77
|
padding-right: 2px;
|
|
78
78
|
}
|
|
79
|
-
._10kgnsa4-1-
|
|
79
|
+
._10kgnsa4-1-18-0 ._10kgnsaa-1-18-0:not(:has(svg:only-child)) {
|
|
80
80
|
padding-top: 0;
|
|
81
81
|
padding-bottom: 0;
|
|
82
82
|
padding-left: 4px;
|
|
83
83
|
padding-right: 4px;
|
|
84
84
|
}
|
|
85
|
-
._10kgnsac-1-
|
|
85
|
+
._10kgnsac-1-18-0 {
|
|
86
86
|
display: inline-flex;
|
|
87
87
|
min-width: 0;
|
|
88
88
|
max-width: 100%;
|
|
@@ -2,10 +2,10 @@ import "../../styles/ellipsis.css";
|
|
|
2
2
|
import "../../styles/field.css";
|
|
3
3
|
import "./Button.css";
|
|
4
4
|
import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
5
|
-
var button = _7a468({ defaultClassName: "_10kgnsa0-1-
|
|
6
|
-
var label = _7a468({ defaultClassName: "_10kgnsaa-1-
|
|
7
|
-
var loading = "_10kgnsa9-1-
|
|
8
|
-
var widths = { full: "_10kgnsa7-1-
|
|
5
|
+
var button = _7a468({ defaultClassName: "_10kgnsa0-1-18-0", variantClassNames: { textAlign: { start: "_10kgnsa1-1-18-0", center: "_10kgnsa2-1-18-0" }, size: { condensed: "_10kgnsa3-1-18-0", "default": "_10kgnsa4-1-18-0" }, disabled: { true: "_10kgnsa5-1-18-0" }, readOnly: { true: "_10kgnsa6-1-18-0" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
|
|
6
|
+
var label = _7a468({ defaultClassName: "_10kgnsaa-1-18-0", variantClassNames: { textual: { true: "_oqqp1n0-1-18-0", false: "_10kgnsac-1-18-0" } }, defaultVariants: {}, compoundVariants: [] });
|
|
7
|
+
var loading = "_10kgnsa9-1-18-0";
|
|
8
|
+
var widths = { full: "_10kgnsa7-1-18-0", content: "_10kgnsa8-1-18-0" };
|
|
9
9
|
export {
|
|
10
10
|
button,
|
|
11
11
|
label,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/buttons/button/Button.css.ts"],
|
|
4
|
-
"sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_10kgnsa0-1-
|
|
4
|
+
"sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_10kgnsa0-1-18-0',variantClassNames:{textAlign:{start:'_10kgnsa1-1-18-0',center:'_10kgnsa2-1-18-0'},size:{condensed:'_10kgnsa3-1-18-0','default':'_10kgnsa4-1-18-0'},disabled:{true:'_10kgnsa5-1-18-0'},readOnly:{true:'_10kgnsa6-1-18-0'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsaa-1-18-0',variantClassNames:{textual:{true:'_oqqp1n0-1-18-0',false:'_10kgnsac-1-18-0'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa9-1-18-0';\nexport var widths = {full:'_10kgnsa7-1-18-0',content:'_10kgnsa8-1-18-0'};"],
|
|
5
5
|
"mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,SAAS,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,WAAU,EAAC,OAAM,oBAAmB,QAAO,mBAAkB,GAAE,MAAK,EAAC,WAAU,oBAAmB,WAAU,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,UAAS,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1W,IAAI,QAAQ,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,mBAAkB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7K,IAAI,UAAU;AACd,IAAI,SAAS,EAAC,MAAK,oBAAmB,SAAQ,mBAAkB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/buttons/intent-button/IntentButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import { forwardRef, type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { OpenWithIcon } from '@dynatrace/strato-icons';\nimport { type IntentPayload } from '@dynatrace-sdk/navigation';\n\nimport { useIntentButton } from './useIntentButton.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { Button, type ButtonOwnProps } from '../button/Button.js';\n\nconst COMPONENT_NAME = 'IntentButton';\n\n//#region Typings\n/**\n * Accepted properties for the Button.\n * @deprecated Will be removed, use `IntentButtonProps` from preview instead.\n * @public\n */\nexport interface IntentButtonPropsBase\n extends Omit<ButtonOwnProps, 'loading' | 'type'>,\n AriaLabelingProps,\n DOMProps,\n StylingProps,\n DataTestId,\n MaskingProps {\n /** Intent payload passed between apps.*/\n payload: IntentPayload;\n\n /** Intended for setting a custom button label. When nothing is set, no label is shown. */\n children?: ReactNode;\n}\n\n/**\n * Merge own props with ID props.\n * Props for recommending an app to receive the intent. Either both properties or none of them needs to be specified.\n * @deprecated Will be removed, use `IntentButtonProps` from preview instead.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type IntentButtonProps = IntentButtonPropsBase &\n (\n | {\n appId?: never;\n intentId?: never;\n }\n | {\n /**\n * ID of the app that will be launched to handle the intent.\n */\n appId: string;\n\n /**\n * ID of the action that will be passed to the app.\n */\n intentId: string;\n }\n );\n\n//#endregion\n\n// DEPRECATION: [APPDEV-15793] BREAKING-CHANGE: IntentButton: Remove deprecated IntentButton from components\n/**\n * The `IntentButton` is a dedicated button component for sending\n * {@link https://developer.dynatrace.com/develop/intents/ | intents}.\n * It takes care of opening the intent dialog. An `IntentButton` only works\n * in the AppShell context.\n * @deprecated Will be removed, use `IntentButton` from preview instead.\n * @public\n */\nexport const IntentButton = /* @__PURE__ */ forwardRef<\n HTMLAnchorElement,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n IntentButtonProps\n>((props, forwardedRef) => {\n const intl = useIntl();\n const {\n children,\n payload,\n appId,\n intentId,\n disabled,\n onClick: onClickProp,\n 'aria-label': ariaLabelProp,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n readOnly,\n ...remainingProps\n }: // eslint-disable-next-line @typescript-eslint/no-deprecated\n IntentButtonProps = props;\n\n let label = children;\n if (typeof label === 'string') {\n label = label.trim();\n }\n\n const ariaLabel =\n ariaLabelProp ||\n intl.formatMessage({\n description: 'Intent button open label',\n defaultMessage: 'Open with',\n id: 'JQOGuaGgqJObmSY1',\n });\n\n const intentButtonProps = useIntentButton(\n payload,\n appId,\n intentId,\n onClickProp,\n );\n\n // polymorph it back to a button in case it's disabled.\n // Keep the button focusable if disabled for better screen reader support.\n if (disabled) {\n return (\n <Button\n disabled\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n aria-label={ariaLabel}\n className={consumerClassName}\n style={consumerStyle}\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n readOnly={readOnly}\n {...remainingProps}\n data-dt-component={COMPONENT_NAME}\n >\n {label}\n <Button.Suffix>\n <OpenWithIcon />\n </Button.Suffix>\n </Button>\n );\n }\n\n return (\n <Button\n as=\"a\"\n ref={forwardedRef}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n aria-label={ariaLabel ?? label}\n className={consumerClassName}\n style={consumerStyle}\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n readOnly={readOnly}\n {...remainingProps}\n {...intentButtonProps}\n data-dt-component={COMPONENT_NAME}\n >\n {label}\n <Button.Suffix>\n <OpenWithIcon />\n </Button.Suffix>\n </Button>\n );\n});\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\n(IntentButton as typeof IntentButton & { displayName: string }).displayName =\n COMPONENT_NAME;\n"],
|
|
4
|
+
"sourcesContent": ["import { forwardRef, type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { OpenWithIcon } from '@dynatrace/strato-icons';\nimport { type IntentPayload } from '@dynatrace-sdk/navigation';\n\nimport { useIntentButton } from './useIntentButton.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { Button, type ButtonOwnProps } from '../button/Button.js';\n\nconst COMPONENT_NAME = 'IntentButton';\n\n//#region Typings\n/**\n * Accepted properties for the Button.\n * @deprecated Will be removed, use `IntentButtonProps` from preview instead.\n * @public\n */\nexport interface IntentButtonPropsBase\n extends Omit<ButtonOwnProps, 'loading' | 'type'>,\n AriaLabelingProps,\n DOMProps,\n StylingProps,\n DataTestId,\n MaskingProps {\n /** Intent payload passed between apps.*/\n payload: IntentPayload;\n\n /** Intended for setting a custom button label. When nothing is set, no label is shown. */\n children?: ReactNode;\n}\n\n/**\n * Merge own props with ID props.\n * Props for recommending an app to receive the intent. Either both properties or none of them needs to be specified.\n * @deprecated Will be removed, use `IntentButtonProps` from preview instead.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type IntentButtonProps = IntentButtonPropsBase &\n (\n | {\n appId?: never;\n intentId?: never;\n }\n | {\n /**\n * ID of the app that will be launched to handle the intent.\n */\n appId: string;\n\n /**\n * ID of the action that will be passed to the app.\n */\n intentId: string;\n }\n );\n\n//#endregion\n\n// DEPRECATION: [APPDEV-15793] BREAKING-CHANGE: IntentButton: Remove deprecated IntentButton from components\n/**\n * The `IntentButton` is a dedicated button component for sending\n * {@link https://developer.dynatrace.com/develop/guides/navigation/intents/ | intents}.\n * It takes care of opening the intent dialog. An `IntentButton` only works\n * in the AppShell context.\n * @deprecated Will be removed, use `IntentButton` from preview instead.\n * @public\n */\nexport const IntentButton = /* @__PURE__ */ forwardRef<\n HTMLAnchorElement,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n IntentButtonProps\n>((props, forwardedRef) => {\n const intl = useIntl();\n const {\n children,\n payload,\n appId,\n intentId,\n disabled,\n onClick: onClickProp,\n 'aria-label': ariaLabelProp,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n readOnly,\n ...remainingProps\n }: // eslint-disable-next-line @typescript-eslint/no-deprecated\n IntentButtonProps = props;\n\n let label = children;\n if (typeof label === 'string') {\n label = label.trim();\n }\n\n const ariaLabel =\n ariaLabelProp ||\n intl.formatMessage({\n description: 'Intent button open label',\n defaultMessage: 'Open with',\n id: 'JQOGuaGgqJObmSY1',\n });\n\n const intentButtonProps = useIntentButton(\n payload,\n appId,\n intentId,\n onClickProp,\n );\n\n // polymorph it back to a button in case it's disabled.\n // Keep the button focusable if disabled for better screen reader support.\n if (disabled) {\n return (\n <Button\n disabled\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n aria-label={ariaLabel}\n className={consumerClassName}\n style={consumerStyle}\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n readOnly={readOnly}\n {...remainingProps}\n data-dt-component={COMPONENT_NAME}\n >\n {label}\n <Button.Suffix>\n <OpenWithIcon />\n </Button.Suffix>\n </Button>\n );\n }\n\n return (\n <Button\n as=\"a\"\n ref={forwardedRef}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n aria-label={ariaLabel ?? label}\n className={consumerClassName}\n style={consumerStyle}\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n readOnly={readOnly}\n {...remainingProps}\n {...intentButtonProps}\n data-dt-component={COMPONENT_NAME}\n >\n {label}\n <Button.Suffix>\n <OpenWithIcon />\n </Button.Suffix>\n </Button>\n );\n});\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\n(IntentButton as typeof IntentButton & { displayName: string }).displayName =\n COMPONENT_NAME;\n"],
|
|
5
5
|
"mappings": "AA0HM,SAeI,KAfJ;AA1HN,SAAS,kBAAkC;AAC3C,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,uBAAuB;AAMhC,SAAS,cAAmC;AAE5C,MAAM,iBAAiB;AA2DhB,MAAM,eAA+B,2BAI1C,CAAC,OAAO,iBAAiB;AACzB,QAAM,OAAO,QAAQ;AACrB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA;AAAA,IAEpB;AAAA,IACA,GAAG;AAAA,EACL,IACoB;AAEpB,MAAI,QAAQ;AACZ,MAAI,OAAO,UAAU,UAAU;AAC7B,YAAQ,MAAM,KAAK;AAAA,EACrB;AAEA,QAAM,YACJ,iBACA,KAAK,cAAc;AAAA,IACjB,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN,CAAC;AAEH,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAIA,MAAI,UAAU;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAQ;AAAA,QACR,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,cAAY;AAAA,QACZ,WAAW;AAAA,QACX,OAAO;AAAA,QAEP;AAAA,QACC,GAAG;AAAA,QACJ,qBAAmB;AAAA,QAElB;AAAA;AAAA,UACD,oBAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,KAAK;AAAA,MACL,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,MACX,OAAO;AAAA,MAEP;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAElB;AAAA;AAAA,QACD,oBAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAGA,aAA+D,cAC9D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|