@dynatrace/strato-components 1.15.0 → 1.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (200) hide show
  1. package/buttons/button/Button.css +16 -16
  2. package/buttons/button/Button.js +4 -1
  3. package/buttons/button/Button.sty.js +4 -4
  4. package/buttons/intent-button/IntentButton.d.ts +1 -0
  5. package/buttons/intent-button/IntentButton.js +4 -1
  6. package/content/progress/ProgressBar.css +71 -71
  7. package/content/progress/ProgressBar.sty.js +5 -5
  8. package/content/progress/ProgressBarIcon.css +2 -2
  9. package/content/progress/ProgressBarIcon.sty.js +1 -1
  10. package/content/progress/ProgressBarLabel.css +3 -3
  11. package/content/progress/ProgressBarLabel.sty.js +1 -1
  12. package/content/progress/ProgressBarValue.css +5 -5
  13. package/content/progress/ProgressBarValue.sty.js +1 -1
  14. package/content/progress/ProgressCircle.css +40 -40
  15. package/content/progress/ProgressCircle.sty.d.ts +13 -7
  16. package/content/progress/ProgressCircle.sty.js +5 -5
  17. package/content/skeleton/Skeleton.css +7 -7
  18. package/content/skeleton/Skeleton.js +2 -2
  19. package/content/skeleton/Skeleton.sty.js +5 -5
  20. package/content/skeleton/SkeletonText.js +3 -3
  21. package/core/components/app-root/AppRoot.js +3 -1
  22. package/core/hooks/useBehavioralTrackingProps.d.ts +2 -0
  23. package/core/hooks/useBehavioralTrackingProps.js +46 -0
  24. package/core/index.d.ts +1 -0
  25. package/core/styles/focusRing.css +66 -66
  26. package/core/styles/focusRing.sty.d.ts +34 -10
  27. package/core/styles/focusRing.sty.js +2 -2
  28. package/core/types/behavior-tracking-props.d.ts +33 -0
  29. package/core/types/behavior-tracking-props.js +16 -0
  30. package/core/utils/colorUtils.css +60 -60
  31. package/core/utils/colorUtils.sty.d.ts +15 -5
  32. package/core/utils/colorUtils.sty.js +2 -2
  33. package/esm/buttons/button/Button.css +16 -16
  34. package/esm/buttons/button/Button.js +4 -1
  35. package/esm/buttons/button/Button.js.map +2 -2
  36. package/esm/buttons/button/Button.sty.js +4 -4
  37. package/esm/buttons/button/Button.sty.js.map +1 -1
  38. package/esm/buttons/index.js.map +2 -2
  39. package/esm/buttons/intent-button/IntentButton.js +4 -1
  40. package/esm/buttons/intent-button/IntentButton.js.map +2 -2
  41. package/esm/content/progress/ProgressBar.css +71 -71
  42. package/esm/content/progress/ProgressBar.sty.js +5 -5
  43. package/esm/content/progress/ProgressBar.sty.js.map +1 -1
  44. package/esm/content/progress/ProgressBarIcon.css +2 -2
  45. package/esm/content/progress/ProgressBarIcon.sty.js +1 -1
  46. package/esm/content/progress/ProgressBarIcon.sty.js.map +1 -1
  47. package/esm/content/progress/ProgressBarLabel.css +3 -3
  48. package/esm/content/progress/ProgressBarLabel.sty.js +1 -1
  49. package/esm/content/progress/ProgressBarLabel.sty.js.map +1 -1
  50. package/esm/content/progress/ProgressBarValue.css +5 -5
  51. package/esm/content/progress/ProgressBarValue.sty.js +1 -1
  52. package/esm/content/progress/ProgressBarValue.sty.js.map +1 -1
  53. package/esm/content/progress/ProgressCircle.css +40 -40
  54. package/esm/content/progress/ProgressCircle.sty.js +5 -5
  55. package/esm/content/progress/ProgressCircle.sty.js.map +1 -1
  56. package/esm/content/skeleton/Skeleton.css +7 -7
  57. package/esm/content/skeleton/Skeleton.js +1 -1
  58. package/esm/content/skeleton/Skeleton.js.map +1 -1
  59. package/esm/content/skeleton/Skeleton.sty.js +5 -5
  60. package/esm/content/skeleton/Skeleton.sty.js.map +1 -1
  61. package/esm/content/skeleton/SkeletonText.js +1 -1
  62. package/esm/content/skeleton/SkeletonText.js.map +1 -1
  63. package/esm/core/components/app-root/AppRoot.js +3 -1
  64. package/esm/core/components/app-root/AppRoot.js.map +2 -2
  65. package/esm/core/hooks/useBehavioralTrackingProps.js +27 -0
  66. package/esm/core/hooks/useBehavioralTrackingProps.js.map +7 -0
  67. package/esm/core/index.js.map +1 -1
  68. package/esm/core/styles/focusRing.css +66 -66
  69. package/esm/core/styles/focusRing.sty.js +2 -2
  70. package/esm/core/styles/focusRing.sty.js.map +1 -1
  71. package/esm/core/types/behavior-tracking-props.js +1 -0
  72. package/esm/core/types/behavior-tracking-props.js.map +7 -0
  73. package/esm/core/utils/colorUtils.css +60 -60
  74. package/esm/core/utils/colorUtils.sty.js +2 -2
  75. package/esm/core/utils/colorUtils.sty.js.map +1 -1
  76. package/esm/layouts/container/Container.css +4 -4
  77. package/esm/layouts/container/Container.sty.js +1 -1
  78. package/esm/layouts/container/Container.sty.js.map +1 -1
  79. package/esm/layouts/divider/Divider.css +6 -6
  80. package/esm/layouts/divider/Divider.sty.js +1 -1
  81. package/esm/layouts/divider/Divider.sty.js.map +1 -1
  82. package/esm/layouts/surface/Surface.css +39 -39
  83. package/esm/layouts/surface/Surface.sty.js +2 -2
  84. package/esm/layouts/surface/Surface.sty.js.map +1 -1
  85. package/esm/layouts/surface/variables.sty.js +1 -1
  86. package/esm/layouts/surface/variables.sty.js.map +1 -1
  87. package/esm/styles/colorUtils.css +60 -60
  88. package/esm/styles/colorUtils.sty.js +2 -2
  89. package/esm/styles/colorUtils.sty.js.map +1 -1
  90. package/esm/styles/container.css +47 -47
  91. package/esm/styles/container.sty.js +2 -2
  92. package/esm/styles/container.sty.js.map +1 -1
  93. package/esm/styles/ellipsis.css +1 -1
  94. package/esm/styles/ellipsis.sty.js +1 -1
  95. package/esm/styles/ellipsis.sty.js.map +1 -1
  96. package/esm/styles/field.css +153 -153
  97. package/esm/styles/field.sty.js +2 -2
  98. package/esm/styles/field.sty.js.map +1 -1
  99. package/esm/styles/sprinkles.css +262 -262
  100. package/esm/styles/sprinkles.sty.js +1 -1
  101. package/esm/styles/sprinkles.sty.js.map +1 -1
  102. package/esm/styles/textStyle.css +8 -8
  103. package/esm/styles/textStyle.sty.js +1 -1
  104. package/esm/styles/textStyle.sty.js.map +1 -1
  105. package/esm/typography/block-quote/Blockquote.css +2 -2
  106. package/esm/typography/block-quote/Blockquote.sty.js +1 -1
  107. package/esm/typography/block-quote/Blockquote.sty.js.map +1 -1
  108. package/esm/typography/code/Code.css +1 -1
  109. package/esm/typography/code/Code.sty.js +1 -1
  110. package/esm/typography/code/Code.sty.js.map +1 -1
  111. package/esm/typography/emphasis/Emphasis.css +1 -1
  112. package/esm/typography/emphasis/Emphasis.sty.js +1 -1
  113. package/esm/typography/emphasis/Emphasis.sty.js.map +1 -1
  114. package/esm/typography/external-link/ExternalLink.css +6 -8
  115. package/esm/typography/external-link/ExternalLink.js +1 -1
  116. package/esm/typography/external-link/ExternalLink.js.map +2 -2
  117. package/esm/typography/external-link/ExternalLink.sty.js +1 -1
  118. package/esm/typography/external-link/ExternalLink.sty.js.map +1 -1
  119. package/esm/typography/heading/Heading.css +7 -7
  120. package/esm/typography/heading/Heading.sty.js +1 -1
  121. package/esm/typography/heading/Heading.sty.js.map +1 -1
  122. package/esm/typography/highlight/Highlight.css +2 -2
  123. package/esm/typography/highlight/Highlight.sty.js +1 -1
  124. package/esm/typography/highlight/Highlight.sty.js.map +1 -1
  125. package/esm/typography/link/Link.css +3 -3
  126. package/esm/typography/link/Link.sty.js +1 -1
  127. package/esm/typography/link/Link.sty.js.map +1 -1
  128. package/esm/typography/list/List.css +4 -4
  129. package/esm/typography/list/List.sty.js +2 -2
  130. package/esm/typography/list/List.sty.js.map +1 -1
  131. package/esm/typography/paragraph/Paragraph.css +3 -3
  132. package/esm/typography/paragraph/Paragraph.sty.js +1 -1
  133. package/esm/typography/paragraph/Paragraph.sty.js.map +1 -1
  134. package/esm/typography/strikethrough/Strikethrough.css +1 -1
  135. package/esm/typography/strikethrough/Strikethrough.sty.js +1 -1
  136. package/esm/typography/strikethrough/Strikethrough.sty.js.map +1 -1
  137. package/esm/typography/strong/Strong.css +1 -1
  138. package/esm/typography/strong/Strong.sty.js +1 -1
  139. package/esm/typography/strong/Strong.sty.js.map +1 -1
  140. package/esm/typography/text/Text.css +3 -3
  141. package/esm/typography/text/Text.sty.js +1 -1
  142. package/esm/typography/text/Text.sty.js.map +1 -1
  143. package/esm/typography/text-ellipsis/TextEllipsis.css +6 -6
  144. package/esm/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
  145. package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map +1 -1
  146. package/esm/typography/utils.js +17 -9
  147. package/esm/typography/utils.js.map +2 -2
  148. package/layouts/container/Container.css +4 -4
  149. package/layouts/container/Container.sty.js +1 -1
  150. package/layouts/divider/Divider.css +6 -6
  151. package/layouts/divider/Divider.sty.js +1 -1
  152. package/layouts/surface/Surface.css +39 -39
  153. package/layouts/surface/Surface.sty.d.ts +19 -6
  154. package/layouts/surface/Surface.sty.js +2 -2
  155. package/layouts/surface/variables.sty.js +1 -1
  156. package/package.json +6 -6
  157. package/styles/colorUtils.css +60 -60
  158. package/styles/colorUtils.sty.d.ts +15 -5
  159. package/styles/colorUtils.sty.js +2 -2
  160. package/styles/container.css +47 -47
  161. package/styles/container.sty.d.ts +16 -6
  162. package/styles/container.sty.js +2 -2
  163. package/styles/ellipsis.css +1 -1
  164. package/styles/ellipsis.sty.js +1 -1
  165. package/styles/field.css +153 -153
  166. package/styles/field.sty.d.ts +24 -17
  167. package/styles/field.sty.js +2 -2
  168. package/styles/sprinkles.css +262 -262
  169. package/styles/sprinkles.sty.d.ts +12 -12
  170. package/styles/sprinkles.sty.js +1 -1
  171. package/styles/textStyle.css +8 -8
  172. package/styles/textStyle.sty.js +1 -1
  173. package/typography/block-quote/Blockquote.css +2 -2
  174. package/typography/block-quote/Blockquote.sty.js +1 -1
  175. package/typography/code/Code.css +1 -1
  176. package/typography/code/Code.sty.js +1 -1
  177. package/typography/emphasis/Emphasis.css +1 -1
  178. package/typography/emphasis/Emphasis.sty.js +1 -1
  179. package/typography/external-link/ExternalLink.css +6 -8
  180. package/typography/external-link/ExternalLink.js +1 -1
  181. package/typography/external-link/ExternalLink.sty.js +1 -1
  182. package/typography/heading/Heading.css +7 -7
  183. package/typography/heading/Heading.sty.js +1 -1
  184. package/typography/highlight/Highlight.css +2 -2
  185. package/typography/highlight/Highlight.sty.js +1 -1
  186. package/typography/link/Link.css +3 -3
  187. package/typography/link/Link.sty.js +1 -1
  188. package/typography/list/List.css +4 -4
  189. package/typography/list/List.sty.js +2 -2
  190. package/typography/paragraph/Paragraph.css +3 -3
  191. package/typography/paragraph/Paragraph.sty.js +1 -1
  192. package/typography/strikethrough/Strikethrough.css +1 -1
  193. package/typography/strikethrough/Strikethrough.sty.js +1 -1
  194. package/typography/strong/Strong.css +1 -1
  195. package/typography/strong/Strong.sty.js +1 -1
  196. package/typography/text/Text.css +3 -3
  197. package/typography/text/Text.sty.js +1 -1
  198. package/typography/text-ellipsis/TextEllipsis.css +6 -6
  199. package/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
  200. package/typography/utils.js +17 -9
@@ -7,27 +7,37 @@ export declare const colorUtilsCSS: import("@vanilla-extract/recipes").RuntimeFn
7
7
  color: {
8
8
  critical: {
9
9
  vars: {
10
- [x: string]: string;
10
+ [vars.text]: string;
11
+ [vars.icon]: string;
12
+ [vars.borderColor]: string;
11
13
  };
12
14
  };
13
15
  neutral: {
14
16
  vars: {
15
- [x: string]: string;
17
+ [vars.text]: string;
18
+ [vars.icon]: string;
19
+ [vars.borderColor]: string;
16
20
  };
17
21
  };
18
22
  primary: {
19
23
  vars: {
20
- [x: string]: string;
24
+ [vars.text]: string;
25
+ [vars.icon]: string;
26
+ [vars.borderColor]: string;
21
27
  };
22
28
  };
23
29
  success: {
24
30
  vars: {
25
- [x: string]: string;
31
+ [vars.text]: string;
32
+ [vars.icon]: string;
33
+ [vars.borderColor]: string;
26
34
  };
27
35
  };
28
36
  warning: {
29
37
  vars: {
30
- [x: string]: string;
38
+ [vars.text]: string;
39
+ [vars.icon]: string;
40
+ [vars.borderColor]: string;
31
41
  };
32
42
  };
33
43
  };
@@ -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-15-0", variantClassNames: { color: { critical: "_k096v44-1-15-0", neutral: "_k096v45-1-15-0", primary: "_k096v46-1-15-0", success: "_k096v47-1-15-0", warning: "_k096v48-1-15-0" }, variant: { "default": "_k096v49-1-15-0", accent: "_k096v4a-1-15-0" }, disabled: { true: "_k096v4b-1-15-0", false: "_k096v4c-1-15-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-1-15-0"], [{ color: "success", variant: "accent" }, "_k096v4e-1-15-0"], [{ color: "warning", variant: "accent" }, "_k096v4f-1-15-0"], [{ color: "critical", variant: "accent" }, "_k096v4g-1-15-0"], [{ color: "neutral", variant: "accent" }, "_k096v4h-1-15-0"], [{ color: "primary", disabled: true }, "_k096v4i-1-15-0"], [{ color: "success", disabled: true }, "_k096v4j-1-15-0"], [{ color: "warning", disabled: true }, "_k096v4k-1-15-0"], [{ color: "critical", disabled: true }, "_k096v4l-1-15-0"], [{ color: "neutral", disabled: true }, "_k096v4m-1-15-0"]] });
28
- var colorUtilsVars = { text: "var(--_k096v40-1-15-0)", icon: "var(--_k096v41-1-15-0)", borderColor: "var(--_k096v42-1-15-0)" };
27
+ var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-1-16-1", variantClassNames: { color: { critical: "_k096v44-1-16-1", neutral: "_k096v45-1-16-1", primary: "_k096v46-1-16-1", success: "_k096v47-1-16-1", warning: "_k096v48-1-16-1" }, variant: { "default": "_k096v49-1-16-1", accent: "_k096v4a-1-16-1" }, disabled: { true: "_k096v4b-1-16-1", false: "_k096v4c-1-16-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-1-16-1"], [{ color: "success", variant: "accent" }, "_k096v4e-1-16-1"], [{ color: "warning", variant: "accent" }, "_k096v4f-1-16-1"], [{ color: "critical", variant: "accent" }, "_k096v4g-1-16-1"], [{ color: "neutral", variant: "accent" }, "_k096v4h-1-16-1"], [{ color: "primary", disabled: true }, "_k096v4i-1-16-1"], [{ color: "success", disabled: true }, "_k096v4j-1-16-1"], [{ color: "warning", disabled: true }, "_k096v4k-1-16-1"], [{ color: "critical", disabled: true }, "_k096v4l-1-16-1"], [{ color: "neutral", disabled: true }, "_k096v4m-1-16-1"]] });
28
+ var colorUtilsVars = { text: "var(--_k096v40-1-16-1)", icon: "var(--_k096v41-1-16-1)", borderColor: "var(--_k096v42-1-16-1)" };
@@ -1,12 +1,12 @@
1
- ._10kgnsa0-1-15-0 {
1
+ ._10kgnsa0-1-16-1 {
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-15-0);
9
- color: var(--_bx32h0-1-15-0);
8
+ background: var(--_bx32h3-1-16-1);
9
+ color: var(--_bx32h0-1-16-1);
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-15-0 {
26
+ ._10kgnsa1-1-16-1 {
27
27
  text-align: start;
28
28
  justify-content: space-between;
29
29
  }
30
- ._10kgnsa2-1-15-0 {
30
+ ._10kgnsa2-1-16-1 {
31
31
  text-align: center;
32
32
  justify-content: center;
33
33
  }
34
- ._10kgnsa3-1-15-0 {
34
+ ._10kgnsa3-1-16-1 {
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-15-0 {
41
+ ._10kgnsa4-1-16-1 {
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-15-0 {
48
+ ._10kgnsa5-1-16-1 {
49
49
  cursor: not-allowed;
50
50
  }
51
- ._10kgnsa6-1-15-0 {
51
+ ._10kgnsa6-1-16-1 {
52
52
  cursor: not-allowed;
53
- background: var(--_bx32h2-1-15-0);
53
+ background: var(--_bx32h2-1-16-1);
54
54
  }
55
- ._10kgnsa7-1-15-0 {
55
+ ._10kgnsa7-1-16-1 {
56
56
  width: 100%;
57
57
  }
58
- ._10kgnsa8-1-15-0 {
58
+ ._10kgnsa8-1-16-1 {
59
59
  width: fit-content;
60
60
  }
61
- ._10kgnsa9-1-15-0 {
61
+ ._10kgnsa9-1-16-1 {
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-15-0 ._10kgnsaa-1-15-0:not(:has(svg:only-child)) {
73
+ ._10kgnsa3-1-16-1 ._10kgnsaa-1-16-1: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-15-0 ._10kgnsaa-1-15-0:not(:has(svg:only-child)) {
79
+ ._10kgnsa4-1-16-1 ._10kgnsaa-1-16-1: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-15-0 {
85
+ ._10kgnsac-1-16-1 {
86
86
  display: inline-flex;
87
87
  min-width: 0;
88
88
  max-width: 100%;
@@ -19,6 +19,7 @@ import { parseBoolean } from "../../core/utils/parse-boolean.js";
19
19
  import { Flex } from "../../layouts/flex/Flex.js";
20
20
  import { Grid } from "../../layouts/grid/Grid.js";
21
21
  import { fieldColors } from "../../styles/field.sty.js";
22
+ const COMPONENT_NAME = "Button";
22
23
  function getButtonSlots(children) {
23
24
  const slots = {};
24
25
  Children.forEach(children, (child) => {
@@ -142,6 +143,7 @@ const _Button = /* @__PURE__ */ forwardRef(
142
143
  return /* @__PURE__ */ jsx(
143
144
  Component,
144
145
  {
146
+ "data-dt-component": COMPONENT_NAME,
145
147
  ...buttonMergedProps,
146
148
  className: clsx(
147
149
  consumerClassName,
@@ -168,6 +170,7 @@ const _Button = /* @__PURE__ */ forwardRef(
168
170
  return /* @__PURE__ */ jsxs(
169
171
  Component,
170
172
  {
173
+ "data-dt-component": COMPONENT_NAME,
171
174
  className: clsx(
172
175
  consumerClassName,
173
176
  "strato-inputgroup",
@@ -237,7 +240,7 @@ const _Button = /* @__PURE__ */ forwardRef(
237
240
  );
238
241
  }
239
242
  );
240
- _Button.displayName = "Button";
243
+ _Button.displayName = COMPONENT_NAME;
241
244
  const Button = Object.assign(_Button, {
242
245
  Suffix,
243
246
  Prefix,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/buttons/button/Button.tsx"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport * as CSS from 'csstype';\nimport {\n type ElementType,\n type MouseEventHandler,\n type PointerEvent,\n type ReactElement,\n type ReactNode,\n forwardRef,\n useMemo,\n Children,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport * as styles from './Button.sty.js';\nimport { Label } from './Label.js';\nimport { Prefix } from './Prefix.js';\nimport { Suffix } from './Suffix.js';\nimport { ProgressCircle } from '../../content/progress/ProgressCircle.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport {\n type AriaDisabledProps,\n type AriaLabelingProps,\n} from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { parseBoolean } from '../../core/utils/parse-boolean.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Grid } from '../../layouts/grid/Grid.js';\nimport { fieldColors } from '../../styles/field.sty.js';\n\n//#region Typings\n\n/**\n * Accepted properties for the Button.\n * @public\n */\nexport interface ButtonOwnProps\n extends AriaLabelingProps,\n AriaDisabledProps,\n WithChildren,\n StylingProps,\n DataTestId,\n MaskingProps {\n /**\n * If a button is disabled e.g. it cannot be interacted with.\n * @defaultValue false\n */\n disabled?: boolean;\n\n /**\n * Different variants have different styles.\n * @defaultValue 'default'\n */\n variant?: 'default' | 'emphasized' | 'accent';\n\n /**\n * The HTML button type.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}\n * @defaultValue 'button'\n */\n type?: 'button' | 'reset' | 'submit';\n\n /** Called when the button is interacted with. */\n onClick?: MouseEventHandler;\n\n /**\n * The width of the button.\n * @defaultValue 'content'\n */\n width?: 'content' | 'full' | CSS.Property.Width<string & {}>;\n\n /**\n * The color of the button. This should be chosen based on the context\n * the button is used in.\n * @defaultValue 'neutral'\n */\n color?: 'primary' | 'neutral' | 'success' | 'critical' | 'warning';\n\n /**\n * Controls the text alignment inside the button. Only affects the button\n * if the width is not set to 'content'.\n * @defaultValue 'center'\n */\n textAlign?: 'center' | 'start';\n\n /**\n * The size of the button.\n * @defaultValue 'default'\n */\n size?: 'default' | 'condensed';\n\n /**\n * The current loading state of the button. If true, a loading icon is shown and the button is disabled.\n * @defaultValue false\n */\n loading?: boolean;\n\n /**\n * Determines whether the element is in read-only mode.\n * @defaultValue false\n * @deprecated - readOnly is not a valid property on a button. Please use disabled if needed.\n */\n readOnly?: boolean;\n}\n\n/**\n * Merge own props with others inherited from the underlying element type.\n * @public\n */\nexport type ButtonProps<E extends ElementType> = PolymorphicComponentProps<\n E,\n ButtonOwnProps\n>;\n\ntype ButtonSlots = {\n label?: ReactNode;\n prefix?: ReactNode;\n suffix?: ReactNode;\n freeform?: ReactNode[];\n};\n\n//#endregion\n\n/**\n * Iterates over child nodes to extract specific component slots.\n * @public\n */\nexport default function getButtonSlots(children: ReactNode) {\n const slots: ButtonSlots = {};\n\n Children.forEach(children, (child) => {\n if (isElement(child)) {\n switch (child.type) {\n case Suffix:\n slots.suffix = child;\n break;\n case Prefix:\n slots.prefix = child;\n break;\n case Label:\n slots.label = child;\n break;\n default:\n slots.freeform ??= [];\n slots.freeform.push(child);\n break;\n }\n } else {\n if (child !== null && child !== undefined) {\n slots.freeform ??= [];\n slots.freeform.push(child);\n }\n }\n });\n\n return slots;\n}\n\nconst _Button: <E extends ElementType = 'button'>(\n props: ButtonProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n <E extends ElementType>(props: ButtonProps<E>, ref: typeof props.ref) => {\n const {\n children,\n variant = 'default',\n disabled,\n 'aria-disabled': ariaDisabledProp,\n required,\n id: propId,\n type = 'button',\n onClick,\n ariaLabel,\n width = 'content',\n color = 'neutral',\n textAlign = 'center',\n size = 'default',\n loading = false,\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 as,\n ...remainingProps\n }: ButtonProps<E> = props;\n const slots = getButtonSlots(children);\n\n const ariaDisabled = parseBoolean(ariaDisabledProp);\n\n const nativeDisabledOrLoading = useMemo(\n () => (loading ? true : disabled),\n [disabled, loading],\n );\n const disabledOrLoading = useMemo(\n () => nativeDisabledOrLoading || ariaDisabled,\n [ariaDisabled, nativeDisabledOrLoading],\n );\n\n const { focusProps, focusClassName } = useFocusRing({\n variant: !disabledOrLoading ? color : 'neutral',\n disabled: nativeDisabledOrLoading,\n });\n\n const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n\n const handleButtonClick: MouseEventHandler<HTMLElement> = (event) => {\n if (nativeDisabledOrLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n onClick?.(event);\n };\n\n const buttonProps = {\n ref,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n required,\n disabled: nativeDisabledOrLoading && !ariaDisabled,\n id: propId,\n type,\n ...ariaLabelingProps,\n 'aria-disabled': ariaDisabledProp,\n onClick: handleButtonClick,\n };\n\n // Propagation needs to be disabled on the disabled button because\n // it would still trigger actions on parents that would listen to it.\n // For example the menu or the useOverlay hook.\n const disabledPropagationProps = {\n onPointerDown(evt: PointerEvent) {\n if (nativeDisabledOrLoading) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n },\n onPointerUp(evt: PointerEvent) {\n if (nativeDisabledOrLoading) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n },\n };\n\n const hasChildren = children || children === 0;\n\n const buttonMergedProps = {\n ...mergeProps(\n buttonProps,\n disabledPropagationProps,\n // Need to cast this one as the inference of mergeProps would generate\n // a not allowed overlap. The remainingProps type is too complex due to the\n // polymorphic inheritance.\n remainingProps as Record<string, unknown>,\n focusProps,\n ),\n };\n\n const intl = useIntl();\n\n // Make the component polymorphic\n const Component = as || 'button';\n\n // Render a void element if no children are set and it's not loading (so self-closing polymorphed tags won't break)\n if (!hasChildren) {\n return (\n <Component\n {...buttonMergedProps}\n className={clsx(\n consumerClassName,\n 'strato-inputgroup',\n fieldColors({ variant, color, disabled: disabledOrLoading }),\n styles.button({\n disabled: disabledOrLoading,\n textAlign,\n size,\n readOnly,\n }),\n focusClassName,\n {\n [`${styles.widths.content}`]: width === 'content',\n [`${styles.widths.full}`]: width === 'full',\n },\n )}\n style={{\n width: width !== 'content' && width !== 'full' ? width : undefined,\n }}\n />\n );\n }\n\n return (\n <Component\n className={clsx(\n consumerClassName,\n 'strato-inputgroup',\n fieldColors({\n variant,\n color,\n disabled: disabledOrLoading || ariaDisabled,\n }),\n styles.button({\n disabled: disabledOrLoading || ariaDisabled,\n textAlign,\n size,\n readOnly,\n }),\n {\n [`${styles.widths.content}`]: width === 'content',\n [`${styles.widths.full}`]: width === 'full',\n },\n focusClassName,\n )}\n style={{\n width: width !== 'content' && width !== 'full' ? width : undefined,\n ...consumerStyle,\n }}\n {...buttonMergedProps}\n >\n {loading && (\n <div className={styles.loading}>\n <ProgressCircle\n size=\"small\"\n color={color}\n aria-label={intl.formatMessage({\n defaultMessage: 'Loading',\n id: 'cycz+bYG+VH7Of4e',\n description: 'Label for the loading state.',\n })}\n />\n </div>\n )}\n <Grid\n gap={size === 'default' ? 4 : 2}\n grid=\"auto / auto-flow auto\"\n width=\"100%\"\n maxWidth=\"100%\"\n alignItems=\"center\"\n justifyContent={textAlign === 'start' ? 'space-between' : 'center'}\n style={{\n visibility: loading ? 'hidden' : undefined,\n }}\n >\n {textAlign === 'start' ? (\n <Flex minWidth={0} gap={size === 'default' ? 4 : 2}>\n {slots.prefix}\n {slots.label}\n {slots.freeform && <Button.Label>{slots.freeform}</Button.Label>}\n </Flex>\n ) : (\n <>\n {slots.prefix}\n {slots.label}\n {slots.freeform && <Button.Label>{slots.freeform}</Button.Label>}\n </>\n )}\n {slots.suffix}\n </Grid>\n </Component>\n );\n },\n);\n\n(_Button as typeof _Button & { displayName: string }).displayName = 'Button';\n\n/**\n * Buttons let users trigger actions or events\n * with a single click, or by pressing\n * `Enter` or `Space` while the button has focus.\n * @public\n */\nexport const Button = Object.assign(_Button, {\n Suffix,\n Prefix,\n Label,\n});\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport * as CSS from 'csstype';\nimport {\n type ElementType,\n type MouseEventHandler,\n type PointerEvent,\n type ReactElement,\n type ReactNode,\n forwardRef,\n useMemo,\n Children,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport * as styles from './Button.sty.js';\nimport { Label } from './Label.js';\nimport { Prefix } from './Prefix.js';\nimport { Suffix } from './Suffix.js';\nimport { ProgressCircle } from '../../content/progress/ProgressCircle.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport {\n type AriaDisabledProps,\n type AriaLabelingProps,\n} from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport { parseBoolean } from '../../core/utils/parse-boolean.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Grid } from '../../layouts/grid/Grid.js';\nimport { fieldColors } from '../../styles/field.sty.js';\n\nconst COMPONENT_NAME = 'Button';\n\n//#region Typings\n\n/**\n * Accepted properties for the Button.\n * @public\n */\nexport interface ButtonOwnProps\n extends AriaLabelingProps,\n AriaDisabledProps,\n WithChildren,\n StylingProps,\n DataTestId,\n MaskingProps {\n /**\n * If a button is disabled e.g. it cannot be interacted with.\n * @defaultValue false\n */\n disabled?: boolean;\n\n /**\n * Different variants have different styles.\n * @defaultValue 'default'\n */\n variant?: 'default' | 'emphasized' | 'accent';\n\n /**\n * The HTML button type.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}\n * @defaultValue 'button'\n */\n type?: 'button' | 'reset' | 'submit';\n\n /** Called when the button is interacted with. */\n onClick?: MouseEventHandler;\n\n /**\n * The width of the button.\n * @defaultValue 'content'\n */\n width?: 'content' | 'full' | CSS.Property.Width<string & {}>;\n\n /**\n * The color of the button. This should be chosen based on the context\n * the button is used in.\n * @defaultValue 'neutral'\n */\n color?: 'primary' | 'neutral' | 'success' | 'critical' | 'warning';\n\n /**\n * Controls the text alignment inside the button. Only affects the button\n * if the width is not set to 'content'.\n * @defaultValue 'center'\n */\n textAlign?: 'center' | 'start';\n\n /**\n * The size of the button.\n * @defaultValue 'default'\n */\n size?: 'default' | 'condensed';\n\n /**\n * The current loading state of the button. If true, a loading icon is shown and the button is disabled.\n * @defaultValue false\n */\n loading?: boolean;\n\n /**\n * Determines whether the element is in read-only mode.\n * @defaultValue false\n * @deprecated - readOnly is not a valid property on a button. Please use disabled if needed.\n */\n readOnly?: boolean;\n}\n\n/**\n * Merge own props with others inherited from the underlying element type.\n * @public\n */\nexport type ButtonProps<E extends ElementType> = PolymorphicComponentProps<\n E,\n ButtonOwnProps\n>;\n\ntype ButtonSlots = {\n label?: ReactNode;\n prefix?: ReactNode;\n suffix?: ReactNode;\n freeform?: ReactNode[];\n};\n\n//#endregion\n\n/**\n * Iterates over child nodes to extract specific component slots.\n * @public\n */\nexport default function getButtonSlots(children: ReactNode) {\n const slots: ButtonSlots = {};\n\n Children.forEach(children, (child) => {\n if (isElement(child)) {\n switch (child.type) {\n case Suffix:\n slots.suffix = child;\n break;\n case Prefix:\n slots.prefix = child;\n break;\n case Label:\n slots.label = child;\n break;\n default:\n slots.freeform ??= [];\n slots.freeform.push(child);\n break;\n }\n } else {\n if (child !== null && child !== undefined) {\n slots.freeform ??= [];\n slots.freeform.push(child);\n }\n }\n });\n\n return slots;\n}\n\nconst _Button: <E extends ElementType = 'button'>(\n props: ButtonProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n <E extends ElementType>(props: ButtonProps<E>, ref: typeof props.ref) => {\n const {\n children,\n variant = 'default',\n disabled,\n 'aria-disabled': ariaDisabledProp,\n required,\n id: propId,\n type = 'button',\n onClick,\n ariaLabel,\n width = 'content',\n color = 'neutral',\n textAlign = 'center',\n size = 'default',\n loading = false,\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 as,\n ...remainingProps\n }: ButtonProps<E> = props;\n const slots = getButtonSlots(children);\n\n const ariaDisabled = parseBoolean(ariaDisabledProp);\n\n const nativeDisabledOrLoading = useMemo(\n () => (loading ? true : disabled),\n [disabled, loading],\n );\n const disabledOrLoading = useMemo(\n () => nativeDisabledOrLoading || ariaDisabled,\n [ariaDisabled, nativeDisabledOrLoading],\n );\n\n const { focusProps, focusClassName } = useFocusRing({\n variant: !disabledOrLoading ? color : 'neutral',\n disabled: nativeDisabledOrLoading,\n });\n\n const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n\n const handleButtonClick: MouseEventHandler<HTMLElement> = (event) => {\n if (nativeDisabledOrLoading) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n onClick?.(event);\n };\n\n const buttonProps = {\n ref,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n required,\n disabled: nativeDisabledOrLoading && !ariaDisabled,\n id: propId,\n type,\n ...ariaLabelingProps,\n 'aria-disabled': ariaDisabledProp,\n onClick: handleButtonClick,\n };\n\n // Propagation needs to be disabled on the disabled button because\n // it would still trigger actions on parents that would listen to it.\n // For example the menu or the useOverlay hook.\n const disabledPropagationProps = {\n onPointerDown(evt: PointerEvent) {\n if (nativeDisabledOrLoading) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n },\n onPointerUp(evt: PointerEvent) {\n if (nativeDisabledOrLoading) {\n evt.preventDefault();\n evt.stopPropagation();\n }\n },\n };\n\n const hasChildren = children || children === 0;\n\n const buttonMergedProps = {\n ...mergeProps(\n buttonProps,\n disabledPropagationProps,\n // Need to cast this one as the inference of mergeProps would generate\n // a not allowed overlap. The remainingProps type is too complex due to the\n // polymorphic inheritance.\n remainingProps as Record<string, unknown>,\n focusProps,\n ),\n };\n\n const intl = useIntl();\n\n // Make the component polymorphic\n const Component = as || 'button';\n\n // Render a void element if no children are set and it's not loading (so self-closing polymorphed tags won't break)\n if (!hasChildren) {\n return (\n <Component\n data-dt-component={COMPONENT_NAME}\n {...buttonMergedProps}\n className={clsx(\n consumerClassName,\n 'strato-inputgroup',\n fieldColors({ variant, color, disabled: disabledOrLoading }),\n styles.button({\n disabled: disabledOrLoading,\n textAlign,\n size,\n readOnly,\n }),\n focusClassName,\n {\n [`${styles.widths.content}`]: width === 'content',\n [`${styles.widths.full}`]: width === 'full',\n },\n )}\n style={{\n width: width !== 'content' && width !== 'full' ? width : undefined,\n }}\n />\n );\n }\n\n return (\n <Component\n data-dt-component={COMPONENT_NAME}\n className={clsx(\n consumerClassName,\n 'strato-inputgroup',\n fieldColors({\n variant,\n color,\n disabled: disabledOrLoading || ariaDisabled,\n }),\n styles.button({\n disabled: disabledOrLoading || ariaDisabled,\n textAlign,\n size,\n readOnly,\n }),\n {\n [`${styles.widths.content}`]: width === 'content',\n [`${styles.widths.full}`]: width === 'full',\n },\n focusClassName,\n )}\n style={{\n width: width !== 'content' && width !== 'full' ? width : undefined,\n ...consumerStyle,\n }}\n {...buttonMergedProps}\n >\n {loading && (\n <div className={styles.loading}>\n <ProgressCircle\n size=\"small\"\n color={color}\n aria-label={intl.formatMessage({\n defaultMessage: 'Loading',\n id: 'cycz+bYG+VH7Of4e',\n description: 'Label for the loading state.',\n })}\n />\n </div>\n )}\n <Grid\n gap={size === 'default' ? 4 : 2}\n grid=\"auto / auto-flow auto\"\n width=\"100%\"\n maxWidth=\"100%\"\n alignItems=\"center\"\n justifyContent={textAlign === 'start' ? 'space-between' : 'center'}\n style={{\n visibility: loading ? 'hidden' : undefined,\n }}\n >\n {textAlign === 'start' ? (\n <Flex minWidth={0} gap={size === 'default' ? 4 : 2}>\n {slots.prefix}\n {slots.label}\n {slots.freeform && <Button.Label>{slots.freeform}</Button.Label>}\n </Flex>\n ) : (\n <>\n {slots.prefix}\n {slots.label}\n {slots.freeform && <Button.Label>{slots.freeform}</Button.Label>}\n </>\n )}\n {slots.suffix}\n </Grid>\n </Component>\n );\n },\n);\n\n(_Button as typeof _Button & { displayName: string }).displayName =\n COMPONENT_NAME;\n\n/**\n * Buttons let users trigger actions or events\n * with a single click, or by pressing\n * `Enter` or `Space` while the button has focus.\n * @public\n */\nexport const Button = Object.assign(_Button, {\n Suffix,\n Prefix,\n Label,\n});\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -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-15-0", variantClassNames: { textAlign: { start: "_10kgnsa1-1-15-0", center: "_10kgnsa2-1-15-0" }, size: { condensed: "_10kgnsa3-1-15-0", "default": "_10kgnsa4-1-15-0" }, disabled: { true: "_10kgnsa5-1-15-0" }, readOnly: { true: "_10kgnsa6-1-15-0" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
6
- var label = _7a468({ defaultClassName: "_10kgnsaa-1-15-0", variantClassNames: { textual: { true: "_oqqp1n0-1-15-0", false: "_10kgnsac-1-15-0" } }, defaultVariants: {}, compoundVariants: [] });
7
- var loading = "_10kgnsa9-1-15-0";
8
- var widths = { full: "_10kgnsa7-1-15-0", content: "_10kgnsa8-1-15-0" };
5
+ var button = _7a468({ defaultClassName: "_10kgnsa0-1-16-1", variantClassNames: { textAlign: { start: "_10kgnsa1-1-16-1", center: "_10kgnsa2-1-16-1" }, size: { condensed: "_10kgnsa3-1-16-1", "default": "_10kgnsa4-1-16-1" }, disabled: { true: "_10kgnsa5-1-16-1" }, readOnly: { true: "_10kgnsa6-1-16-1" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
6
+ var label = _7a468({ defaultClassName: "_10kgnsaa-1-16-1", variantClassNames: { textual: { true: "_oqqp1n0-1-16-1", false: "_10kgnsac-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
7
+ var loading = "_10kgnsa9-1-16-1";
8
+ var widths = { full: "_10kgnsa7-1-16-1", content: "_10kgnsa8-1-16-1" };
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-15-0',variantClassNames:{textAlign:{start:'_10kgnsa1-1-15-0',center:'_10kgnsa2-1-15-0'},size:{condensed:'_10kgnsa3-1-15-0','default':'_10kgnsa4-1-15-0'},disabled:{true:'_10kgnsa5-1-15-0'},readOnly:{true:'_10kgnsa6-1-15-0'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsaa-1-15-0',variantClassNames:{textual:{true:'_oqqp1n0-1-15-0',false:'_10kgnsac-1-15-0'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa9-1-15-0';\nexport var widths = {full:'_10kgnsa7-1-15-0',content:'_10kgnsa8-1-15-0'};"],
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-16-1',variantClassNames:{textAlign:{start:'_10kgnsa1-1-16-1',center:'_10kgnsa2-1-16-1'},size:{condensed:'_10kgnsa3-1-16-1','default':'_10kgnsa4-1-16-1'},disabled:{true:'_10kgnsa5-1-16-1'},readOnly:{true:'_10kgnsa6-1-16-1'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsaa-1-16-1',variantClassNames:{textual:{true:'_oqqp1n0-1-16-1',false:'_10kgnsac-1-16-1'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa9-1-16-1';\nexport var widths = {full:'_10kgnsa7-1-16-1',content:'_10kgnsa8-1-16-1'};"],
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/index.ts"],
4
- "sourcesContent": ["export { Button } from './button/Button.js';\nexport type { ButtonOwnProps, ButtonProps } from './button/Button.js';\nexport type { ButtonLabelProps } from './button/Label.js';\nexport type { ButtonPrefixProps } from './button/Prefix.js';\nexport type { ButtonSuffixProps } from './button/Suffix.js';\nexport type {\n AriaButtonProps as _AriaButtonProps,\n ButtonAria as _ButtonAria,\n AriaBaseButtonProps as _AriaBaseButtonProps,\n} from './button/types/button-aria.js';\nexport { focusWithoutScrolling as _focusWithoutScrolling } from './button/utils/focus-without-scrolling.js';\nexport {\n isVirtualPointerEvent as _isVirtualPointerEvent,\n isVirtualClick as _isVirtualClick,\n} from './button/utils/is-virtual-event.js';\nexport { IntentButton } from './intent-button/IntentButton.js';\nexport type {\n IntentButtonProps,\n IntentButtonPropsBase,\n} from './intent-button/IntentButton.js';\n"],
5
- "mappings": "AAAA,SAAS,cAAc;AAUvB,SAAkC,6BAA8B;AAChE;AAAA,EAC2B;AAAA,EACP;AAAA,OACb;AACP,SAAS,oBAAoB;",
4
+ "sourcesContent": ["export { Button } from './button/Button.js';\nexport type { ButtonOwnProps, ButtonProps } from './button/Button.js';\nexport type { ButtonLabelProps } from './button/Label.js';\nexport type { ButtonPrefixProps } from './button/Prefix.js';\nexport type { ButtonSuffixProps } from './button/Suffix.js';\nexport type {\n AriaButtonProps as _AriaButtonProps,\n ButtonAria as _ButtonAria,\n AriaBaseButtonProps as _AriaBaseButtonProps,\n} from './button/types/button-aria.js';\nexport { focusWithoutScrolling as _focusWithoutScrolling } from './button/utils/focus-without-scrolling.js';\nexport {\n isVirtualPointerEvent as _isVirtualPointerEvent,\n isVirtualClick as _isVirtualClick,\n} from './button/utils/is-virtual-event.js';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { IntentButton } from './intent-button/IntentButton.js';\nexport type {\n IntentButtonProps,\n IntentButtonPropsBase,\n} from './intent-button/IntentButton.js';\n"],
5
+ "mappings": "AAAA,SAAS,cAAc;AAUvB,SAAkC,6BAA8B;AAChE;AAAA,EAC2B;AAAA,EACP;AAAA,OACb;AAEP,SAAS,oBAAoB;",
6
6
  "names": []
7
7
  }
@@ -4,6 +4,7 @@ import { useIntl } from "react-intl";
4
4
  import { OpenWithIcon } from "@dynatrace/strato-icons";
5
5
  import { useIntentButton } from "./useIntentButton.js";
6
6
  import { Button } from "../button/Button.js";
7
+ const COMPONENT_NAME = "IntentButton";
7
8
  const IntentButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
8
9
  const intl = useIntl();
9
10
  const {
@@ -51,6 +52,7 @@ const IntentButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
51
52
  style: consumerStyle,
52
53
  readOnly,
53
54
  ...remainingProps,
55
+ "data-dt-component": COMPONENT_NAME,
54
56
  children: [
55
57
  label,
56
58
  /* @__PURE__ */ jsx(Button.Suffix, { children: /* @__PURE__ */ jsx(OpenWithIcon, {}) })
@@ -72,6 +74,7 @@ const IntentButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
72
74
  readOnly,
73
75
  ...remainingProps,
74
76
  ...intentButtonProps,
77
+ "data-dt-component": COMPONENT_NAME,
75
78
  children: [
76
79
  label,
77
80
  /* @__PURE__ */ jsx(Button.Suffix, { children: /* @__PURE__ */ jsx(OpenWithIcon, {}) })
@@ -79,7 +82,7 @@ const IntentButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
79
82
  }
80
83
  );
81
84
  });
82
- IntentButton.displayName = "IntentButton";
85
+ IntentButton.displayName = COMPONENT_NAME;
83
86
  export {
84
87
  IntentButton
85
88
  };
@@ -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\n//#region Typings\n/**\n * Accepted properties for the Button.\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 * @public\n */\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/**\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 * @public\n */\nexport const IntentButton = /* @__PURE__ */ forwardRef<\n HTMLAnchorElement,\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 }: 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 >\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 >\n {label}\n <Button.Suffix>\n <OpenWithIcon />\n </Button.Suffix>\n </Button>\n );\n});\n\n(IntentButton as typeof IntentButton & { displayName: string }).displayName =\n 'IntentButton';\n"],
5
- "mappings": "AAiHM,SAcI,KAdJ;AAjHN,SAAS,kBAAkC;AAC3C,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,uBAAuB;AAMhC,SAAS,cAAmC;AAsDrC,MAAM,eAA+B,2BAG1C,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,IAAuB;AAEvB,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,QAEH;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,MAEH;AAAA;AAAA,QACD,oBAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,aAA+D,cAC9D;",
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 * @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 * @public\n */\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 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 }: 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
+ "mappings": "AAqHM,SAeI,KAfJ;AArHN,SAAS,kBAAkC;AAC3C,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,uBAAuB;AAMhC,SAAS,cAAmC;AAE5C,MAAM,iBAAiB;AAwDhB,MAAM,eAA+B,2BAG1C,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,IAAuB;AAEvB,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
  }
@@ -1,4 +1,4 @@
1
- @keyframes _13n9uwh0-1-15-0 {
1
+ @keyframes _13n9uwh0-1-16-1 {
2
2
  0% {
3
3
  transform: translateX(-100%) scaleX(0);
4
4
  }
@@ -6,92 +6,92 @@
6
6
  transform: translateX(100%) scaleX(1.5);
7
7
  }
8
8
  }
9
- ._13n9uwh5-1-15-0 {
10
- color: var(--_13n9uwh1-1-15-0);
11
- }
12
- ._13n9uwhd-1-15-0 {
13
- --_13n9uwh1-1-15-0: var(--dt-colors-text-neutral-default, #2f2f4f);
14
- --_13n9uwh4-1-15-0: var(--dt-colors-text-neutral-subdued, #595a7d);
15
- --_13n9uwh2-1-15-0: var(--dt-colors-border-neutral-default, #dadbe4);
16
- --_13n9uwh3-1-15-0: var(--dt-colors-border-primary-accent, #464cce);
17
- }
18
- ._13n9uwhe-1-15-0 {
19
- --_13n9uwh1-1-15-0: var(--dt-colors-text-neutral-default, #2f2f4f);
20
- --_13n9uwh4-1-15-0: var(--dt-colors-text-neutral-subdued, #595a7d);
21
- --_13n9uwh2-1-15-0: var(--dt-colors-border-neutral-default, #dadbe4);
22
- --_13n9uwh3-1-15-0: var(--dt-colors-border-success-accent, #2d6761);
23
- }
24
- ._13n9uwhf-1-15-0 {
25
- --_13n9uwh1-1-15-0: var(--dt-colors-text-neutral-default, #2f2f4f);
26
- --_13n9uwh4-1-15-0: var(--dt-colors-text-neutral-subdued, #595a7d);
27
- --_13n9uwh2-1-15-0: var(--dt-colors-border-neutral-default, #dadbe4);
28
- --_13n9uwh3-1-15-0: var(--dt-colors-border-warning-accent, #855400);
29
- }
30
- ._13n9uwhg-1-15-0 {
31
- --_13n9uwh1-1-15-0: var(--dt-colors-text-neutral-default, #2f2f4f);
32
- --_13n9uwh4-1-15-0: var(--dt-colors-text-neutral-subdued, #595a7d);
33
- --_13n9uwh2-1-15-0: var(--dt-colors-border-neutral-default, #dadbe4);
34
- --_13n9uwh3-1-15-0: var(--dt-colors-border-critical-accent, #bb0731);
35
- }
36
- ._13n9uwhh-1-15-0 {
37
- --_13n9uwh1-1-15-0: var(--dt-colors-text-neutral-default, #2f2f4f);
38
- --_13n9uwh4-1-15-0: var(--dt-colors-text-neutral-subdued, #595a7d);
39
- --_13n9uwh2-1-15-0: var(--dt-colors-border-neutral-default, #dadbe4);
40
- --_13n9uwh3-1-15-0: var(--dt-colors-border-neutral-accent, #595a7d);
9
+ ._13n9uwh5-1-16-1 {
10
+ color: var(--_13n9uwh1-1-16-1);
11
+ }
12
+ ._13n9uwhd-1-16-1 {
13
+ --_13n9uwh1-1-16-1: var(--dt-colors-text-neutral-default, #2f2f4f);
14
+ --_13n9uwh4-1-16-1: var(--dt-colors-text-neutral-subdued, #595a7d);
15
+ --_13n9uwh2-1-16-1: var(--dt-colors-border-neutral-default, #dadbe4);
16
+ --_13n9uwh3-1-16-1: var(--dt-colors-border-primary-accent, #464cce);
17
+ }
18
+ ._13n9uwhe-1-16-1 {
19
+ --_13n9uwh1-1-16-1: var(--dt-colors-text-neutral-default, #2f2f4f);
20
+ --_13n9uwh4-1-16-1: var(--dt-colors-text-neutral-subdued, #595a7d);
21
+ --_13n9uwh2-1-16-1: var(--dt-colors-border-neutral-default, #dadbe4);
22
+ --_13n9uwh3-1-16-1: var(--dt-colors-border-success-accent, #2d6761);
23
+ }
24
+ ._13n9uwhf-1-16-1 {
25
+ --_13n9uwh1-1-16-1: var(--dt-colors-text-neutral-default, #2f2f4f);
26
+ --_13n9uwh4-1-16-1: var(--dt-colors-text-neutral-subdued, #595a7d);
27
+ --_13n9uwh2-1-16-1: var(--dt-colors-border-neutral-default, #dadbe4);
28
+ --_13n9uwh3-1-16-1: var(--dt-colors-border-warning-accent, #855400);
29
+ }
30
+ ._13n9uwhg-1-16-1 {
31
+ --_13n9uwh1-1-16-1: var(--dt-colors-text-neutral-default, #2f2f4f);
32
+ --_13n9uwh4-1-16-1: var(--dt-colors-text-neutral-subdued, #595a7d);
33
+ --_13n9uwh2-1-16-1: var(--dt-colors-border-neutral-default, #dadbe4);
34
+ --_13n9uwh3-1-16-1: var(--dt-colors-border-critical-accent, #bb0731);
35
+ }
36
+ ._13n9uwhh-1-16-1 {
37
+ --_13n9uwh1-1-16-1: var(--dt-colors-text-neutral-default, #2f2f4f);
38
+ --_13n9uwh4-1-16-1: var(--dt-colors-text-neutral-subdued, #595a7d);
39
+ --_13n9uwh2-1-16-1: var(--dt-colors-border-neutral-default, #dadbe4);
40
+ --_13n9uwh3-1-16-1: var(--dt-colors-border-neutral-accent, #595a7d);
41
41
  color: var(--dt-colors-text-neutral-default, #2f2f4f);
42
42
  }
43
- ._13n9uwhi-1-15-0 {
44
- --_13n9uwh1-1-15-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
45
- --_13n9uwh4-1-15-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
46
- --_13n9uwh2-1-15-0: var(--dt-colors-border-primary-on-accent-disabled, #f4f4fb33);
47
- --_13n9uwh3-1-15-0: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
48
- }
49
- ._13n9uwhj-1-15-0 {
50
- --_13n9uwh1-1-15-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
51
- --_13n9uwh4-1-15-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
52
- --_13n9uwh2-1-15-0: var(--dt-colors-border-success-on-accent-disabled, #f1f4f433);
53
- --_13n9uwh3-1-15-0: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
54
- }
55
- ._13n9uwhk-1-15-0 {
56
- --_13n9uwh1-1-15-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
57
- --_13n9uwh4-1-15-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
58
- --_13n9uwh2-1-15-0: var(--dt-colors-border-warning-on-accent-disabled, #27202433);
59
- --_13n9uwh3-1-15-0: var(--dt-colors-border-warning-on-accent-default, #272024);
60
- }
61
- ._13n9uwhl-1-15-0 {
62
- --_13n9uwh1-1-15-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
63
- --_13n9uwh4-1-15-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
64
- --_13n9uwh2-1-15-0: var(--dt-colors-border-critical-on-accent-disabled, #f9f1f333);
65
- --_13n9uwh3-1-15-0: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
66
- }
67
- ._13n9uwhm-1-15-0 {
68
- --_13n9uwh1-1-15-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
69
- --_13n9uwh4-1-15-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
70
- --_13n9uwh2-1-15-0: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
71
- --_13n9uwh3-1-15-0: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
72
- }
73
- ._13n9uwhn-1-15-0 {
43
+ ._13n9uwhi-1-16-1 {
44
+ --_13n9uwh1-1-16-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
45
+ --_13n9uwh4-1-16-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
46
+ --_13n9uwh2-1-16-1: var(--dt-colors-border-primary-on-accent-disabled, #f4f4fb33);
47
+ --_13n9uwh3-1-16-1: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
48
+ }
49
+ ._13n9uwhj-1-16-1 {
50
+ --_13n9uwh1-1-16-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
51
+ --_13n9uwh4-1-16-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
52
+ --_13n9uwh2-1-16-1: var(--dt-colors-border-success-on-accent-disabled, #f1f4f433);
53
+ --_13n9uwh3-1-16-1: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
54
+ }
55
+ ._13n9uwhk-1-16-1 {
56
+ --_13n9uwh1-1-16-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
57
+ --_13n9uwh4-1-16-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
58
+ --_13n9uwh2-1-16-1: var(--dt-colors-border-warning-on-accent-disabled, #27202433);
59
+ --_13n9uwh3-1-16-1: var(--dt-colors-border-warning-on-accent-default, #272024);
60
+ }
61
+ ._13n9uwhl-1-16-1 {
62
+ --_13n9uwh1-1-16-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
63
+ --_13n9uwh4-1-16-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
64
+ --_13n9uwh2-1-16-1: var(--dt-colors-border-critical-on-accent-disabled, #f9f1f333);
65
+ --_13n9uwh3-1-16-1: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
66
+ }
67
+ ._13n9uwhm-1-16-1 {
68
+ --_13n9uwh1-1-16-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
69
+ --_13n9uwh4-1-16-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
70
+ --_13n9uwh2-1-16-1: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
71
+ --_13n9uwh3-1-16-1: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
72
+ }
73
+ ._13n9uwhn-1-16-1 {
74
74
  width: 100%;
75
75
  border-radius: var(--dt-borders-radius-container-subdued, 6px);
76
76
  overflow: hidden;
77
77
  position: relative;
78
- background: var(--_13n9uwh2-1-15-0);
78
+ background: var(--_13n9uwh2-1-16-1);
79
79
  }
80
- ._13n9uwho-1-15-0 {
80
+ ._13n9uwho-1-16-1 {
81
81
  height: 6px;
82
82
  }
83
- ._13n9uwhp-1-15-0 {
83
+ ._13n9uwhp-1-16-1 {
84
84
  height: 8px;
85
85
  }
86
- ._13n9uwhq-1-15-0 {
86
+ ._13n9uwhq-1-16-1 {
87
87
  height: 100%;
88
88
  transition-duration: var(--dt-timings-fast-default, 170ms);
89
89
  transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
90
- background-color: var(--_13n9uwh3-1-15-0);
90
+ background-color: var(--_13n9uwh3-1-16-1);
91
91
  }
92
- ._13n9uwhr-1-15-0 {
92
+ ._13n9uwhr-1-16-1 {
93
93
  width: 100%;
94
- animation-name: _13n9uwh0-1-15-0;
94
+ animation-name: _13n9uwh0-1-16-1;
95
95
  animation-duration: var(--dt-timings-slowest-gentle, 1500ms);
96
96
  animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
97
97
  animation-iteration-count: infinite;
@@ -1,10 +1,10 @@
1
1
  import "./ProgressBar.css";
2
2
  import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
3
- var progressBarFillCSS = _7a468({ defaultClassName: "_13n9uwhq-1-15-0", variantClassNames: { indeterminate: { true: "_13n9uwhr-1-15-0" } }, defaultVariants: {}, compoundVariants: [] });
4
- var progressCSS = _7a468({ defaultClassName: "_13n9uwhn-1-15-0", variantClassNames: { size: { condensed: "_13n9uwho-1-15-0", "default": "_13n9uwhp-1-15-0" } }, defaultVariants: {}, compoundVariants: [] });
5
- var progressIndicatorColorVar = "var(--_13n9uwh3-1-15-0)";
6
- var progressRoot = _7a468({ defaultClassName: "_13n9uwh5-1-15-0", variantClassNames: { color: { primary: "_13n9uwh6-1-15-0", success: "_13n9uwh7-1-15-0", warning: "_13n9uwh8-1-15-0", critical: "_13n9uwh9-1-15-0", neutral: "_13n9uwha-1-15-0" }, onAccent: { true: "_13n9uwhb-1-15-0", false: "_13n9uwhc-1-15-0" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", onAccent: false }, "_13n9uwhd-1-15-0"], [{ color: "success", onAccent: false }, "_13n9uwhe-1-15-0"], [{ color: "warning", onAccent: false }, "_13n9uwhf-1-15-0"], [{ color: "critical", onAccent: false }, "_13n9uwhg-1-15-0"], [{ color: "neutral", onAccent: false }, "_13n9uwhh-1-15-0"], [{ color: "primary", onAccent: true }, "_13n9uwhi-1-15-0"], [{ color: "success", onAccent: true }, "_13n9uwhj-1-15-0"], [{ color: "warning", onAccent: true }, "_13n9uwhk-1-15-0"], [{ color: "critical", onAccent: true }, "_13n9uwhl-1-15-0"], [{ color: "neutral", onAccent: true }, "_13n9uwhm-1-15-0"]] });
7
- var progressValueColorVar = "var(--_13n9uwh4-1-15-0)";
3
+ var progressBarFillCSS = _7a468({ defaultClassName: "_13n9uwhq-1-16-1", variantClassNames: { indeterminate: { true: "_13n9uwhr-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
4
+ var progressCSS = _7a468({ defaultClassName: "_13n9uwhn-1-16-1", variantClassNames: { size: { condensed: "_13n9uwho-1-16-1", "default": "_13n9uwhp-1-16-1" } }, defaultVariants: {}, compoundVariants: [] });
5
+ var progressIndicatorColorVar = "var(--_13n9uwh3-1-16-1)";
6
+ var progressRoot = _7a468({ defaultClassName: "_13n9uwh5-1-16-1", variantClassNames: { color: { primary: "_13n9uwh6-1-16-1", success: "_13n9uwh7-1-16-1", warning: "_13n9uwh8-1-16-1", critical: "_13n9uwh9-1-16-1", neutral: "_13n9uwha-1-16-1" }, onAccent: { true: "_13n9uwhb-1-16-1", false: "_13n9uwhc-1-16-1" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", onAccent: false }, "_13n9uwhd-1-16-1"], [{ color: "success", onAccent: false }, "_13n9uwhe-1-16-1"], [{ color: "warning", onAccent: false }, "_13n9uwhf-1-16-1"], [{ color: "critical", onAccent: false }, "_13n9uwhg-1-16-1"], [{ color: "neutral", onAccent: false }, "_13n9uwhh-1-16-1"], [{ color: "primary", onAccent: true }, "_13n9uwhi-1-16-1"], [{ color: "success", onAccent: true }, "_13n9uwhj-1-16-1"], [{ color: "warning", onAccent: true }, "_13n9uwhk-1-16-1"], [{ color: "critical", onAccent: true }, "_13n9uwhl-1-16-1"], [{ color: "neutral", onAccent: true }, "_13n9uwhm-1-16-1"]] });
7
+ var progressValueColorVar = "var(--_13n9uwh4-1-16-1)";
8
8
  export {
9
9
  progressBarFillCSS,
10
10
  progressCSS,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/content/progress/ProgressBar.css.ts"],
4
- "sourcesContent": ["import './ProgressBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarFillCSS = _7a468({defaultClassName:'_13n9uwhq-1-15-0',variantClassNames:{indeterminate:{true:'_13n9uwhr-1-15-0'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCSS = _7a468({defaultClassName:'_13n9uwhn-1-15-0',variantClassNames:{size:{condensed:'_13n9uwho-1-15-0','default':'_13n9uwhp-1-15-0'}},defaultVariants:{},compoundVariants:[]});\nexport var progressIndicatorColorVar = 'var(--_13n9uwh3-1-15-0)';\nexport var progressRoot = _7a468({defaultClassName:'_13n9uwh5-1-15-0',variantClassNames:{color:{primary:'_13n9uwh6-1-15-0',success:'_13n9uwh7-1-15-0',warning:'_13n9uwh8-1-15-0',critical:'_13n9uwh9-1-15-0',neutral:'_13n9uwha-1-15-0'},onAccent:{true:'_13n9uwhb-1-15-0',false:'_13n9uwhc-1-15-0'}},defaultVariants:{},compoundVariants:[[{color:'primary',onAccent:false},'_13n9uwhd-1-15-0'],[{color:'success',onAccent:false},'_13n9uwhe-1-15-0'],[{color:'warning',onAccent:false},'_13n9uwhf-1-15-0'],[{color:'critical',onAccent:false},'_13n9uwhg-1-15-0'],[{color:'neutral',onAccent:false},'_13n9uwhh-1-15-0'],[{color:'primary',onAccent:true},'_13n9uwhi-1-15-0'],[{color:'success',onAccent:true},'_13n9uwhj-1-15-0'],[{color:'warning',onAccent:true},'_13n9uwhk-1-15-0'],[{color:'critical',onAccent:true},'_13n9uwhl-1-15-0'],[{color:'neutral',onAccent:true},'_13n9uwhm-1-15-0']]});\nexport var progressValueColorVar = 'var(--_13n9uwh4-1-15-0)';"],
4
+ "sourcesContent": ["import './ProgressBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarFillCSS = _7a468({defaultClassName:'_13n9uwhq-1-16-1',variantClassNames:{indeterminate:{true:'_13n9uwhr-1-16-1'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCSS = _7a468({defaultClassName:'_13n9uwhn-1-16-1',variantClassNames:{size:{condensed:'_13n9uwho-1-16-1','default':'_13n9uwhp-1-16-1'}},defaultVariants:{},compoundVariants:[]});\nexport var progressIndicatorColorVar = 'var(--_13n9uwh3-1-16-1)';\nexport var progressRoot = _7a468({defaultClassName:'_13n9uwh5-1-16-1',variantClassNames:{color:{primary:'_13n9uwh6-1-16-1',success:'_13n9uwh7-1-16-1',warning:'_13n9uwh8-1-16-1',critical:'_13n9uwh9-1-16-1',neutral:'_13n9uwha-1-16-1'},onAccent:{true:'_13n9uwhb-1-16-1',false:'_13n9uwhc-1-16-1'}},defaultVariants:{},compoundVariants:[[{color:'primary',onAccent:false},'_13n9uwhd-1-16-1'],[{color:'success',onAccent:false},'_13n9uwhe-1-16-1'],[{color:'warning',onAccent:false},'_13n9uwhf-1-16-1'],[{color:'critical',onAccent:false},'_13n9uwhg-1-16-1'],[{color:'neutral',onAccent:false},'_13n9uwhh-1-16-1'],[{color:'primary',onAccent:true},'_13n9uwhi-1-16-1'],[{color:'success',onAccent:true},'_13n9uwhj-1-16-1'],[{color:'warning',onAccent:true},'_13n9uwhk-1-16-1'],[{color:'critical',onAccent:true},'_13n9uwhl-1-16-1'],[{color:'neutral',onAccent:true},'_13n9uwhm-1-16-1']]});\nexport var progressValueColorVar = 'var(--_13n9uwh4-1-16-1)';"],
5
5
  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,eAAc,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxK,IAAI,cAAc,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,MAAK,EAAC,WAAU,oBAAmB,WAAU,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1L,IAAI,4BAA4B;AAChC,IAAI,eAAe,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,OAAM,EAAC,SAAQ,oBAAmB,SAAQ,oBAAmB,SAAQ,oBAAmB,UAAS,oBAAmB,SAAQ,mBAAkB,GAAE,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,KAAI,GAAE,kBAAkB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;AAC91B,IAAI,wBAAwB;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,5 @@
1
- ._szm9t40-1-15-0 {
1
+ ._szm9t40-1-16-1 {
2
2
  display: flex;
3
3
  margin-left: auto;
4
- color: var(--_13n9uwh3-1-15-0);
4
+ color: var(--_13n9uwh3-1-16-1);
5
5
  }