@dynatrace/strato-components 1.6.2 → 1.7.3

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 (216) hide show
  1. package/buttons/button/Button.css +16 -16
  2. package/buttons/button/Button.js +1 -1
  3. package/buttons/button/Button.sty.d.ts +1 -1
  4. package/buttons/button/Button.sty.js +4 -4
  5. package/buttons/intent-button/IntentButton.js +1 -1
  6. package/content/progress/ProgressBar.css +71 -71
  7. package/content/progress/ProgressBar.sty.d.ts +2 -2
  8. package/content/progress/ProgressBar.sty.js +5 -5
  9. package/content/progress/ProgressBarIcon.css +2 -2
  10. package/content/progress/ProgressBarIcon.sty.js +1 -1
  11. package/content/progress/ProgressBarLabel.css +3 -3
  12. package/content/progress/ProgressBarLabel.sty.js +1 -1
  13. package/content/progress/ProgressBarValue.css +5 -5
  14. package/content/progress/ProgressBarValue.sty.js +1 -1
  15. package/content/progress/ProgressCircle.css +40 -40
  16. package/content/progress/ProgressCircle.sty.js +5 -5
  17. package/content/skeleton/Skeleton.css +6 -6
  18. package/content/skeleton/Skeleton.sty.js +1 -1
  19. package/core/index.d.ts +0 -4
  20. package/core/index.js +0 -8
  21. package/core/styles/focusRing.css +66 -66
  22. package/core/styles/focusRing.sty.d.ts +2 -2
  23. package/core/styles/focusRing.sty.js +2 -2
  24. package/core/utils/colorUtils.css +60 -60
  25. package/core/utils/colorUtils.sty.d.ts +3 -3
  26. package/core/utils/colorUtils.sty.js +2 -2
  27. package/core/utils/isBrowser.js +1 -1
  28. package/esm/buttons/button/Button.css +16 -16
  29. package/esm/buttons/button/Button.js +1 -1
  30. package/esm/buttons/button/Button.js.map +2 -2
  31. package/esm/buttons/button/Button.sty.js +4 -4
  32. package/esm/buttons/button/Button.sty.js.map +1 -1
  33. package/esm/buttons/intent-button/IntentButton.js +1 -1
  34. package/esm/buttons/intent-button/IntentButton.js.map +1 -1
  35. package/esm/content/progress/ProgressBar.css +71 -71
  36. package/esm/content/progress/ProgressBar.js.map +2 -2
  37. package/esm/content/progress/ProgressBar.sty.js +5 -5
  38. package/esm/content/progress/ProgressBar.sty.js.map +1 -1
  39. package/esm/content/progress/ProgressBarIcon.css +2 -2
  40. package/esm/content/progress/ProgressBarIcon.js.map +2 -2
  41. package/esm/content/progress/ProgressBarIcon.sty.js +1 -1
  42. package/esm/content/progress/ProgressBarIcon.sty.js.map +1 -1
  43. package/esm/content/progress/ProgressBarLabel.css +3 -3
  44. package/esm/content/progress/ProgressBarLabel.js.map +2 -2
  45. package/esm/content/progress/ProgressBarLabel.sty.js +1 -1
  46. package/esm/content/progress/ProgressBarLabel.sty.js.map +1 -1
  47. package/esm/content/progress/ProgressBarValue.css +5 -5
  48. package/esm/content/progress/ProgressBarValue.js.map +2 -2
  49. package/esm/content/progress/ProgressBarValue.sty.js +1 -1
  50. package/esm/content/progress/ProgressBarValue.sty.js.map +1 -1
  51. package/esm/content/progress/ProgressCircle.css +40 -40
  52. package/esm/content/progress/ProgressCircle.js.map +2 -2
  53. package/esm/content/progress/ProgressCircle.sty.js +5 -5
  54. package/esm/content/progress/ProgressCircle.sty.js.map +1 -1
  55. package/esm/content/progress/contexts/SharedProgressBarPropsContext.js.map +2 -2
  56. package/esm/content/skeleton/Skeleton.css +6 -6
  57. package/esm/content/skeleton/Skeleton.sty.js +1 -1
  58. package/esm/content/skeleton/Skeleton.sty.js.map +1 -1
  59. package/esm/core/index.js +0 -8
  60. package/esm/core/index.js.map +2 -2
  61. package/esm/core/styles/focusRing.css +66 -66
  62. package/esm/core/styles/focusRing.sty.js +2 -2
  63. package/esm/core/styles/focusRing.sty.js.map +1 -1
  64. package/esm/core/utils/colorUtils.css +60 -60
  65. package/esm/core/utils/colorUtils.sty.js +2 -2
  66. package/esm/core/utils/colorUtils.sty.js.map +1 -1
  67. package/esm/core/utils/isBrowser.js +1 -1
  68. package/esm/core/utils/isBrowser.js.map +1 -1
  69. package/esm/core/utils/merge-props.js.map +2 -2
  70. package/esm/layouts/container/Container.css +4 -4
  71. package/esm/layouts/container/Container.sty.js +1 -1
  72. package/esm/layouts/container/Container.sty.js.map +1 -1
  73. package/esm/layouts/divider/Divider.css +6 -6
  74. package/esm/layouts/divider/Divider.sty.js +1 -1
  75. package/esm/layouts/divider/Divider.sty.js.map +1 -1
  76. package/esm/layouts/surface/Surface.css +39 -39
  77. package/esm/layouts/surface/Surface.sty.js +2 -2
  78. package/esm/layouts/surface/Surface.sty.js.map +1 -1
  79. package/esm/layouts/surface/variables.sty.js +1 -1
  80. package/esm/layouts/surface/variables.sty.js.map +1 -1
  81. package/esm/styles/colorUtils.css +60 -60
  82. package/esm/styles/colorUtils.sty.js +2 -2
  83. package/esm/styles/colorUtils.sty.js.map +1 -1
  84. package/esm/styles/container.css +47 -47
  85. package/esm/styles/container.sty.js +2 -2
  86. package/esm/styles/container.sty.js.map +1 -1
  87. package/esm/styles/ellipsis.css +1 -1
  88. package/esm/styles/ellipsis.sty.js +1 -1
  89. package/esm/styles/ellipsis.sty.js.map +1 -1
  90. package/esm/styles/field.css +153 -153
  91. package/esm/styles/field.sty.js +2 -2
  92. package/esm/styles/field.sty.js.map +1 -1
  93. package/esm/styles/sprinkles.css +262 -262
  94. package/esm/styles/sprinkles.sty.js +1 -1
  95. package/esm/styles/sprinkles.sty.js.map +1 -1
  96. package/esm/styles/textStyle.css +8 -8
  97. package/esm/styles/textStyle.sty.js +1 -1
  98. package/esm/styles/textStyle.sty.js.map +1 -1
  99. package/esm/typography/block-quote/Blockquote.css +2 -2
  100. package/esm/typography/block-quote/Blockquote.sty.js +1 -1
  101. package/esm/typography/block-quote/Blockquote.sty.js.map +1 -1
  102. package/esm/typography/code/Code.css +1 -1
  103. package/esm/typography/code/Code.sty.js +1 -1
  104. package/esm/typography/code/Code.sty.js.map +1 -1
  105. package/esm/typography/emphasis/Emphasis.css +1 -1
  106. package/esm/typography/emphasis/Emphasis.sty.js +1 -1
  107. package/esm/typography/emphasis/Emphasis.sty.js.map +1 -1
  108. package/esm/typography/external-link/ExternalLink.css +6 -6
  109. package/esm/typography/external-link/ExternalLink.sty.js +1 -1
  110. package/esm/typography/external-link/ExternalLink.sty.js.map +1 -1
  111. package/esm/typography/heading/Heading.css +7 -7
  112. package/esm/typography/heading/Heading.sty.js +1 -1
  113. package/esm/typography/heading/Heading.sty.js.map +1 -1
  114. package/esm/typography/highlight/Highlight.css +5 -1
  115. package/esm/typography/highlight/Highlight.js +7 -16
  116. package/esm/typography/highlight/Highlight.js.map +2 -2
  117. package/esm/typography/highlight/Highlight.sty.js +4 -2
  118. package/esm/typography/highlight/Highlight.sty.js.map +2 -2
  119. package/esm/typography/index.js.map +1 -1
  120. package/esm/typography/link/Link.css +4 -4
  121. package/esm/typography/link/Link.sty.js +1 -1
  122. package/esm/typography/link/Link.sty.js.map +1 -1
  123. package/esm/typography/list/List.css +4 -4
  124. package/esm/typography/list/List.sty.js +2 -2
  125. package/esm/typography/list/List.sty.js.map +1 -1
  126. package/esm/typography/paragraph/Paragraph.css +3 -3
  127. package/esm/typography/paragraph/Paragraph.sty.js +1 -1
  128. package/esm/typography/paragraph/Paragraph.sty.js.map +1 -1
  129. package/esm/typography/strikethrough/Strikethrough.css +1 -1
  130. package/esm/typography/strikethrough/Strikethrough.sty.js +1 -1
  131. package/esm/typography/strikethrough/Strikethrough.sty.js.map +1 -1
  132. package/esm/typography/strong/Strong.css +1 -1
  133. package/esm/typography/strong/Strong.sty.js +1 -1
  134. package/esm/typography/strong/Strong.sty.js.map +1 -1
  135. package/esm/typography/text/Text.css +3 -3
  136. package/esm/typography/text/Text.sty.js +1 -1
  137. package/esm/typography/text/Text.sty.js.map +1 -1
  138. package/esm/typography/text-ellipsis/TextEllipsis.css +6 -6
  139. package/esm/typography/text-ellipsis/TextEllipsis.js +1 -9
  140. package/esm/typography/text-ellipsis/TextEllipsis.js.map +2 -2
  141. package/esm/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
  142. package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map +1 -1
  143. package/esm/typography/utils.js +16 -4
  144. package/esm/typography/utils.js.map +2 -2
  145. package/layouts/container/Container.css +4 -4
  146. package/layouts/container/Container.sty.js +1 -1
  147. package/layouts/divider/Divider.css +6 -6
  148. package/layouts/divider/Divider.sty.js +1 -1
  149. package/layouts/surface/Surface.css +39 -39
  150. package/layouts/surface/Surface.sty.js +2 -2
  151. package/layouts/surface/variables.sty.d.ts +1 -1
  152. package/layouts/surface/variables.sty.js +1 -1
  153. package/package.json +3 -3
  154. package/styles/colorUtils.css +60 -60
  155. package/styles/colorUtils.sty.d.ts +3 -3
  156. package/styles/colorUtils.sty.js +2 -2
  157. package/styles/container.css +47 -47
  158. package/styles/container.sty.d.ts +3 -3
  159. package/styles/container.sty.js +2 -2
  160. package/styles/ellipsis.css +1 -1
  161. package/styles/ellipsis.sty.js +1 -1
  162. package/styles/field.css +153 -153
  163. package/styles/field.sty.d.ts +4 -4
  164. package/styles/field.sty.js +2 -2
  165. package/styles/sprinkles.css +262 -262
  166. package/styles/sprinkles.sty.js +1 -1
  167. package/styles/textStyle.css +8 -8
  168. package/styles/textStyle.sty.js +1 -1
  169. package/typography/block-quote/Blockquote.css +2 -2
  170. package/typography/block-quote/Blockquote.sty.js +1 -1
  171. package/typography/code/Code.css +1 -1
  172. package/typography/code/Code.sty.js +1 -1
  173. package/typography/emphasis/Emphasis.css +1 -1
  174. package/typography/emphasis/Emphasis.sty.js +1 -1
  175. package/typography/external-link/ExternalLink.css +6 -6
  176. package/typography/external-link/ExternalLink.sty.js +1 -1
  177. package/typography/heading/Heading.css +7 -7
  178. package/typography/heading/Heading.sty.js +1 -1
  179. package/typography/highlight/Highlight.css +5 -1
  180. package/typography/highlight/Highlight.js +7 -16
  181. package/typography/highlight/Highlight.sty.d.ts +2 -1
  182. package/typography/highlight/Highlight.sty.js +4 -2
  183. package/typography/index.d.ts +1 -1
  184. package/typography/link/Link.css +4 -4
  185. package/typography/link/Link.sty.js +1 -1
  186. package/typography/list/List.css +4 -4
  187. package/typography/list/List.sty.js +2 -2
  188. package/typography/paragraph/Paragraph.css +3 -3
  189. package/typography/paragraph/Paragraph.sty.js +1 -1
  190. package/typography/strikethrough/Strikethrough.css +1 -1
  191. package/typography/strikethrough/Strikethrough.sty.js +1 -1
  192. package/typography/strong/Strong.css +1 -1
  193. package/typography/strong/Strong.sty.js +1 -1
  194. package/typography/text/Text.css +3 -3
  195. package/typography/text/Text.sty.js +1 -1
  196. package/typography/text-ellipsis/TextEllipsis.css +6 -6
  197. package/typography/text-ellipsis/TextEllipsis.d.ts +2 -2
  198. package/typography/text-ellipsis/TextEllipsis.js +1 -9
  199. package/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
  200. package/typography/utils.js +16 -4
  201. package/core/hooks/useId.d.ts +0 -12
  202. package/core/hooks/useId.js +0 -33
  203. package/core/utils/_is-string-children.d.ts +0 -6
  204. package/core/utils/_is-string-children.js +0 -35
  205. package/core/utils/seed-random.d.ts +0 -5
  206. package/core/utils/seed-random.js +0 -35
  207. package/core/utils/uuidv4.d.ts +0 -5
  208. package/core/utils/uuidv4.js +0 -32
  209. package/esm/core/hooks/useId.js +0 -14
  210. package/esm/core/hooks/useId.js.map +0 -7
  211. package/esm/core/utils/_is-string-children.js +0 -16
  212. package/esm/core/utils/_is-string-children.js.map +0 -7
  213. package/esm/core/utils/seed-random.js +0 -16
  214. package/esm/core/utils/seed-random.js.map +0 -7
  215. package/esm/core/utils/uuidv4.js +0 -13
  216. package/esm/core/utils/uuidv4.js.map +0 -7
package/core/index.js CHANGED
@@ -28,15 +28,11 @@ __export(core_exports, {
28
28
  _getLastFocusableChild: () => import_get_last_focusable_child.getLastFocusableChild,
29
29
  _isBrowser: () => import_isBrowser.isBrowser,
30
30
  _isFocusable: () => import_is_focusable.isFocusable,
31
- _isStringChildren: () => import_is_string_children.isStringChildren,
32
31
  _mergeProps: () => import_merge_props.mergeProps,
33
- _mulberry32: () => import_seed_random.mulberry32,
34
32
  _parseBoolean: () => import_parse_boolean.parseBoolean,
35
33
  _useAriaLabelingProps: () => import_useAriaLabelingProps.useAriaLabelingProps,
36
34
  _useFocusContext: () => import_useFocusContext.useFocusContext,
37
- _useId: () => import_useId.useId,
38
35
  _useSafeForwardProps: () => import_useSafeForwardProps.useSafeForwardProps,
39
- _uuidv4: () => import_uuidv4.uuidv4,
40
36
  useCurrentTheme: () => import_useCurrentTheme.useCurrentTheme
41
37
  });
42
38
  module.exports = __toCommonJS(core_exports);
@@ -52,11 +48,7 @@ var import_get_last_focusable_child = require("./utils/focus-management/get-last
52
48
  var import_is_focusable = require("./utils/focus-management/is-focusable.js");
53
49
  var import_isBrowser = require("./utils/isBrowser.js");
54
50
  var import_merge_props = require("./utils/merge-props.js");
55
- var import_useId = require("./hooks/useId.js");
56
51
  var import_useAriaLabelingProps = require("./hooks/useAriaLabelingProps.js");
57
52
  var import_useSafeForwardProps = require("./hooks/useSafeForwardProps.js");
58
- var import_uuidv4 = require("./utils/uuidv4.js");
59
53
  var import_can_receive_default_text_format = require("./utils/can-receive-default-text-format.js");
60
- var import_is_string_children = require("./utils/_is-string-children.js");
61
54
  var import_parse_boolean = require("./utils/parse-boolean.js");
62
- var import_seed_random = require("./utils/seed-random.js");
@@ -1,75 +1,75 @@
1
- ._z2r50s3-1-6-2 {
1
+ ._z2r50s3-1-7-3 {
2
2
  outline: none;
3
3
  }
4
- ._z2r50s3-1-6-2:focus-visible {
4
+ ._z2r50s3-1-7-3:focus-visible {
5
5
  outline: none;
6
6
  }
7
- ._z2r50s4-1-6-2 {
7
+ ._z2r50s4-1-7-3 {
8
8
  border-radius: var(--dt-borders-radius-field-subdued, 4px);
9
- box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-6-2);
10
- background-color: var(--_z2r50s2-1-6-2);
11
- }
12
- ._z2r50s5-1-6-2._z2r50s5-1-6-2 {
13
- box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-6-2), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-6-2);
14
- }
15
- ._z2r50s6-1-6-2 {
16
- --_z2r50s0-1-6-2: var(--dt-colors-border-neutral-accent, #545587);
17
- --_z2r50s1-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
18
- --_z2r50s2-1-6-2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
19
- }
20
- ._z2r50s7-1-6-2 {
21
- --_z2r50s0-1-6-2: var(--dt-colors-border-primary-accent, #454cc9);
22
- --_z2r50s1-1-6-2: var(--dt-colors-border-primary-default, #ccd3f3);
23
- --_z2r50s2-1-6-2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
24
- }
25
- ._z2r50s8-1-6-2 {
26
- --_z2r50s0-1-6-2: var(--dt-colors-border-success-accent, #2c6360);
27
- --_z2r50s1-1-6-2: var(--dt-colors-border-success-default, #cad6d7);
28
- --_z2r50s2-1-6-2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
29
- }
30
- ._z2r50s9-1-6-2 {
31
- --_z2r50s0-1-6-2: var(--dt-colors-border-warning-accent, #805100);
32
- --_z2r50s1-1-6-2: var(--dt-colors-border-warning-default, #f4e5d5);
33
- --_z2r50s2-1-6-2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
34
- }
35
- ._z2r50sa-1-6-2 {
36
- --_z2r50s0-1-6-2: var(--dt-colors-border-critical-accent, #b80031);
37
- --_z2r50s1-1-6-2: var(--dt-colors-border-critical-default, #f1cdcf);
38
- --_z2r50s2-1-6-2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
39
- }
40
- ._z2r50sb-1-6-2:focus-within {
9
+ box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-7-3);
10
+ background-color: var(--_z2r50s2-1-7-3);
11
+ }
12
+ ._z2r50s5-1-7-3._z2r50s5-1-7-3 {
13
+ box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-7-3), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-7-3);
14
+ }
15
+ ._z2r50s6-1-7-3 {
16
+ --_z2r50s0-1-7-3: var(--dt-colors-border-neutral-accent, #545587);
17
+ --_z2r50s1-1-7-3: var(--dt-colors-border-neutral-default, #d2d3e1);
18
+ --_z2r50s2-1-7-3: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
19
+ }
20
+ ._z2r50s7-1-7-3 {
21
+ --_z2r50s0-1-7-3: var(--dt-colors-border-primary-accent, #454cc9);
22
+ --_z2r50s1-1-7-3: var(--dt-colors-border-primary-default, #ccd3f3);
23
+ --_z2r50s2-1-7-3: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
24
+ }
25
+ ._z2r50s8-1-7-3 {
26
+ --_z2r50s0-1-7-3: var(--dt-colors-border-success-accent, #2c6360);
27
+ --_z2r50s1-1-7-3: var(--dt-colors-border-success-default, #cad6d7);
28
+ --_z2r50s2-1-7-3: var(--dt-colors-background-field-success-emphasized, #d4dddf);
29
+ }
30
+ ._z2r50s9-1-7-3 {
31
+ --_z2r50s0-1-7-3: var(--dt-colors-border-warning-accent, #805100);
32
+ --_z2r50s1-1-7-3: var(--dt-colors-border-warning-default, #f4e5d5);
33
+ --_z2r50s2-1-7-3: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
34
+ }
35
+ ._z2r50sa-1-7-3 {
36
+ --_z2r50s0-1-7-3: var(--dt-colors-border-critical-accent, #b80031);
37
+ --_z2r50s1-1-7-3: var(--dt-colors-border-critical-default, #f1cdcf);
38
+ --_z2r50s2-1-7-3: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
39
+ }
40
+ ._z2r50sb-1-7-3:focus-within {
41
41
  outline: none;
42
42
  }
43
- ._z2r50sc-1-6-2:focus-within {
43
+ ._z2r50sc-1-7-3:focus-within {
44
44
  border-radius: var(--dt-borders-radius-field-subdued, 4px);
45
- box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-6-2);
46
- background-color: var(--_z2r50s2-1-6-2);
47
- }
48
- ._z2r50sd-1-6-2:focus-within {
49
- box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-6-2), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-6-2);
50
- }
51
- ._z2r50se-1-6-2 {
52
- --_z2r50s0-1-6-2: var(--dt-colors-border-neutral-accent, #545587);
53
- --_z2r50s1-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
54
- --_z2r50s2-1-6-2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
55
- }
56
- ._z2r50sf-1-6-2 {
57
- --_z2r50s0-1-6-2: var(--dt-colors-border-primary-accent, #454cc9);
58
- --_z2r50s1-1-6-2: var(--dt-colors-border-primary-default, #ccd3f3);
59
- --_z2r50s2-1-6-2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
60
- }
61
- ._z2r50sg-1-6-2 {
62
- --_z2r50s0-1-6-2: var(--dt-colors-border-success-accent, #2c6360);
63
- --_z2r50s1-1-6-2: var(--dt-colors-border-success-default, #cad6d7);
64
- --_z2r50s2-1-6-2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
65
- }
66
- ._z2r50sh-1-6-2 {
67
- --_z2r50s0-1-6-2: var(--dt-colors-border-warning-accent, #805100);
68
- --_z2r50s1-1-6-2: var(--dt-colors-border-warning-default, #f4e5d5);
69
- --_z2r50s2-1-6-2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
70
- }
71
- ._z2r50si-1-6-2 {
72
- --_z2r50s0-1-6-2: var(--dt-colors-border-critical-accent, #b80031);
73
- --_z2r50s1-1-6-2: var(--dt-colors-border-critical-default, #f1cdcf);
74
- --_z2r50s2-1-6-2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
45
+ box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-1-7-3);
46
+ background-color: var(--_z2r50s2-1-7-3);
47
+ }
48
+ ._z2r50sd-1-7-3:focus-within {
49
+ box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-1-7-3), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-1-7-3);
50
+ }
51
+ ._z2r50se-1-7-3 {
52
+ --_z2r50s0-1-7-3: var(--dt-colors-border-neutral-accent, #545587);
53
+ --_z2r50s1-1-7-3: var(--dt-colors-border-neutral-default, #d2d3e1);
54
+ --_z2r50s2-1-7-3: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
55
+ }
56
+ ._z2r50sf-1-7-3 {
57
+ --_z2r50s0-1-7-3: var(--dt-colors-border-primary-accent, #454cc9);
58
+ --_z2r50s1-1-7-3: var(--dt-colors-border-primary-default, #ccd3f3);
59
+ --_z2r50s2-1-7-3: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
60
+ }
61
+ ._z2r50sg-1-7-3 {
62
+ --_z2r50s0-1-7-3: var(--dt-colors-border-success-accent, #2c6360);
63
+ --_z2r50s1-1-7-3: var(--dt-colors-border-success-default, #cad6d7);
64
+ --_z2r50s2-1-7-3: var(--dt-colors-background-field-success-emphasized, #d4dddf);
65
+ }
66
+ ._z2r50sh-1-7-3 {
67
+ --_z2r50s0-1-7-3: var(--dt-colors-border-warning-accent, #805100);
68
+ --_z2r50s1-1-7-3: var(--dt-colors-border-warning-default, #f4e5d5);
69
+ --_z2r50s2-1-7-3: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
70
+ }
71
+ ._z2r50si-1-7-3 {
72
+ --_z2r50s0-1-7-3: var(--dt-colors-border-critical-accent, #b80031);
73
+ --_z2r50s1-1-7-3: var(--dt-colors-border-critical-default, #f1cdcf);
74
+ --_z2r50s2-1-7-3: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
75
75
  }
@@ -3,7 +3,7 @@ export declare const focusRingCSS: import("@vanilla-extract/recipes").RuntimeFn<
3
3
  true: {
4
4
  borderRadius: string;
5
5
  boxShadow: string;
6
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
6
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
7
7
  };
8
8
  false: {
9
9
  selectors: {
@@ -47,7 +47,7 @@ export declare const focusRingFocusWithinCSS: import("@vanilla-extract/recipes")
47
47
  ':focus-within': {
48
48
  borderRadius: string;
49
49
  boxShadow: string;
50
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
50
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
51
51
  };
52
52
  };
53
53
  false: {
@@ -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-6-2", variantClassNames: { minimal: { true: "_z2r50s4-1-6-2", false: "_z2r50s5-1-6-2" }, variant: { neutral: "_z2r50s6-1-6-2", primary: "_z2r50s7-1-6-2", success: "_z2r50s8-1-6-2", warning: "_z2r50s9-1-6-2", critical: "_z2r50sa-1-6-2" } }, defaultVariants: {}, compoundVariants: [] });
28
- var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-6-2", variantClassNames: { minimal: { true: "_z2r50sc-1-6-2", false: "_z2r50sd-1-6-2" }, variant: { neutral: "_z2r50se-1-6-2", primary: "_z2r50sf-1-6-2", success: "_z2r50sg-1-6-2", warning: "_z2r50sh-1-6-2", critical: "_z2r50si-1-6-2" } }, defaultVariants: {}, compoundVariants: [] });
27
+ var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50s3-1-7-3", variantClassNames: { minimal: { true: "_z2r50s4-1-7-3", false: "_z2r50s5-1-7-3" }, variant: { neutral: "_z2r50s6-1-7-3", primary: "_z2r50s7-1-7-3", success: "_z2r50s8-1-7-3", warning: "_z2r50s9-1-7-3", critical: "_z2r50sa-1-7-3" } }, defaultVariants: {}, compoundVariants: [] });
28
+ var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z2r50sb-1-7-3", variantClassNames: { minimal: { true: "_z2r50sc-1-7-3", false: "_z2r50sd-1-7-3" }, variant: { neutral: "_z2r50se-1-7-3", primary: "_z2r50sf-1-7-3", success: "_z2r50sg-1-7-3", warning: "_z2r50sh-1-7-3", critical: "_z2r50si-1-7-3" } }, defaultVariants: {}, compoundVariants: [] });
@@ -1,75 +1,75 @@
1
- ._k096v44-1-6-2 {
2
- --_k096v40-1-6-2: var(--dt-colors-text-critical-default, #b80031);
3
- --_k096v41-1-6-2: var(--dt-colors-icon-critical-default, #b80031);
4
- --_k096v42-1-6-2: var(--dt-colors-border-critical-default, #f1cdcf);
1
+ ._k096v44-1-7-3 {
2
+ --_k096v40-1-7-3: var(--dt-colors-text-critical-default, #b80031);
3
+ --_k096v41-1-7-3: var(--dt-colors-icon-critical-default, #b80031);
4
+ --_k096v42-1-7-3: var(--dt-colors-border-critical-default, #f1cdcf);
5
5
  }
6
- ._k096v45-1-6-2 {
7
- --_k096v40-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
8
- --_k096v41-1-6-2: var(--dt-colors-icon-neutral-default, #2b2a58);
9
- --_k096v42-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
6
+ ._k096v45-1-7-3 {
7
+ --_k096v40-1-7-3: var(--dt-colors-text-neutral-default, #2b2a58);
8
+ --_k096v41-1-7-3: var(--dt-colors-icon-neutral-default, #2b2a58);
9
+ --_k096v42-1-7-3: var(--dt-colors-border-neutral-default, #d2d3e1);
10
10
  }
11
- ._k096v46-1-6-2 {
12
- --_k096v40-1-6-2: var(--dt-colors-text-primary-default, #454cc9);
13
- --_k096v41-1-6-2: var(--dt-colors-icon-primary-default, #454cc9);
14
- --_k096v42-1-6-2: var(--dt-colors-border-primary-default, #ccd3f3);
11
+ ._k096v46-1-7-3 {
12
+ --_k096v40-1-7-3: var(--dt-colors-text-primary-default, #454cc9);
13
+ --_k096v41-1-7-3: var(--dt-colors-icon-primary-default, #454cc9);
14
+ --_k096v42-1-7-3: var(--dt-colors-border-primary-default, #ccd3f3);
15
15
  }
16
- ._k096v47-1-6-2 {
17
- --_k096v40-1-6-2: var(--dt-colors-text-success-default, #2c6360);
18
- --_k096v41-1-6-2: var(--dt-colors-icon-success-default, #2c6360);
19
- --_k096v42-1-6-2: var(--dt-colors-border-success-default, #cad6d7);
16
+ ._k096v47-1-7-3 {
17
+ --_k096v40-1-7-3: var(--dt-colors-text-success-default, #2c6360);
18
+ --_k096v41-1-7-3: var(--dt-colors-icon-success-default, #2c6360);
19
+ --_k096v42-1-7-3: var(--dt-colors-border-success-default, #cad6d7);
20
20
  }
21
- ._k096v48-1-6-2 {
22
- --_k096v40-1-6-2: var(--dt-colors-text-warning-default, #805100);
23
- --_k096v41-1-6-2: var(--dt-colors-icon-warning-default, #805100);
24
- --_k096v42-1-6-2: var(--dt-colors-border-warning-default, #f4e5d5);
21
+ ._k096v48-1-7-3 {
22
+ --_k096v40-1-7-3: var(--dt-colors-text-warning-default, #805100);
23
+ --_k096v41-1-7-3: var(--dt-colors-icon-warning-default, #805100);
24
+ --_k096v42-1-7-3: var(--dt-colors-border-warning-default, #f4e5d5);
25
25
  }
26
- ._k096v4d-1-6-2 {
27
- --_k096v40-1-6-2: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
28
- --_k096v41-1-6-2: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
29
- --_k096v42-1-6-2: var(--dt-colors-border-primary-accent, #454cc9);
26
+ ._k096v4d-1-7-3 {
27
+ --_k096v40-1-7-3: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
28
+ --_k096v41-1-7-3: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
29
+ --_k096v42-1-7-3: var(--dt-colors-border-primary-accent, #454cc9);
30
30
  }
31
- ._k096v4e-1-6-2 {
32
- --_k096v40-1-6-2: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
33
- --_k096v41-1-6-2: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
34
- --_k096v42-1-6-2: var(--dt-colors-border-success-accent, #2c6360);
31
+ ._k096v4e-1-7-3 {
32
+ --_k096v40-1-7-3: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
33
+ --_k096v41-1-7-3: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
34
+ --_k096v42-1-7-3: var(--dt-colors-border-success-accent, #2c6360);
35
35
  }
36
- ._k096v4f-1-6-2 {
37
- --_k096v40-1-6-2: var(--dt-colors-text-warning-on-accent-default, #272025);
38
- --_k096v41-1-6-2: var(--dt-colors-icon-warning-on-accent-default, #272025);
39
- --_k096v42-1-6-2: var(--dt-colors-border-warning-accent, #805100);
36
+ ._k096v4f-1-7-3 {
37
+ --_k096v40-1-7-3: var(--dt-colors-text-warning-on-accent-default, #272025);
38
+ --_k096v41-1-7-3: var(--dt-colors-icon-warning-on-accent-default, #272025);
39
+ --_k096v42-1-7-3: var(--dt-colors-border-warning-accent, #805100);
40
40
  }
41
- ._k096v4g-1-6-2 {
42
- --_k096v40-1-6-2: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
43
- --_k096v41-1-6-2: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
44
- --_k096v42-1-6-2: var(--dt-colors-border-critical-accent, #b80031);
41
+ ._k096v4g-1-7-3 {
42
+ --_k096v40-1-7-3: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
43
+ --_k096v41-1-7-3: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
44
+ --_k096v42-1-7-3: var(--dt-colors-border-critical-accent, #b80031);
45
45
  }
46
- ._k096v4h-1-6-2 {
47
- --_k096v40-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
48
- --_k096v41-1-6-2: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
49
- --_k096v42-1-6-2: var(--dt-colors-border-neutral-accent, #545587);
46
+ ._k096v4h-1-7-3 {
47
+ --_k096v40-1-7-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
48
+ --_k096v41-1-7-3: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
49
+ --_k096v42-1-7-3: var(--dt-colors-border-neutral-accent, #545587);
50
50
  }
51
- ._k096v4i-1-6-2 {
52
- --_k096v40-1-6-2: var(--dt-colors-text-primary-disabled, #54558780);
53
- --_k096v41-1-6-2: var(--dt-colors-icon-primary-disabled, #54558780);
54
- --_k096v42-1-6-2: var(--dt-colors-border-primary-disabled, #d2d3e180);
51
+ ._k096v4i-1-7-3 {
52
+ --_k096v40-1-7-3: var(--dt-colors-text-primary-disabled, #54558780);
53
+ --_k096v41-1-7-3: var(--dt-colors-icon-primary-disabled, #54558780);
54
+ --_k096v42-1-7-3: var(--dt-colors-border-primary-disabled, #d2d3e180);
55
55
  }
56
- ._k096v4j-1-6-2 {
57
- --_k096v40-1-6-2: var(--dt-colors-text-success-disabled, #54558780);
58
- --_k096v41-1-6-2: var(--dt-colors-icon-success-disabled, #54558780);
59
- --_k096v42-1-6-2: var(--dt-colors-border-success-disabled, #d2d3e180);
56
+ ._k096v4j-1-7-3 {
57
+ --_k096v40-1-7-3: var(--dt-colors-text-success-disabled, #54558780);
58
+ --_k096v41-1-7-3: var(--dt-colors-icon-success-disabled, #54558780);
59
+ --_k096v42-1-7-3: var(--dt-colors-border-success-disabled, #d2d3e180);
60
60
  }
61
- ._k096v4k-1-6-2 {
62
- --_k096v40-1-6-2: var(--dt-colors-text-warning-disabled, #54558780);
63
- --_k096v41-1-6-2: var(--dt-colors-icon-warning-disabled, #54558780);
64
- --_k096v42-1-6-2: var(--dt-colors-border-warning-disabled, #d2d3e180);
61
+ ._k096v4k-1-7-3 {
62
+ --_k096v40-1-7-3: var(--dt-colors-text-warning-disabled, #54558780);
63
+ --_k096v41-1-7-3: var(--dt-colors-icon-warning-disabled, #54558780);
64
+ --_k096v42-1-7-3: var(--dt-colors-border-warning-disabled, #d2d3e180);
65
65
  }
66
- ._k096v4l-1-6-2 {
67
- --_k096v40-1-6-2: var(--dt-colors-text-critical-disabled, #54558780);
68
- --_k096v41-1-6-2: var(--dt-colors-icon-critical-disabled, #54558780);
69
- --_k096v42-1-6-2: var(--dt-colors-border-critical-disabled, #d2d3e180);
66
+ ._k096v4l-1-7-3 {
67
+ --_k096v40-1-7-3: var(--dt-colors-text-critical-disabled, #54558780);
68
+ --_k096v41-1-7-3: var(--dt-colors-icon-critical-disabled, #54558780);
69
+ --_k096v42-1-7-3: var(--dt-colors-border-critical-disabled, #d2d3e180);
70
70
  }
71
- ._k096v4m-1-6-2 {
72
- --_k096v40-1-6-2: var(--dt-colors-text-neutral-disabled, #54558780);
73
- --_k096v41-1-6-2: var(--dt-colors-icon-neutral-disabled, #54558780);
74
- --_k096v42-1-6-2: var(--dt-colors-border-neutral-disabled, #d2d3e180);
71
+ ._k096v4m-1-7-3 {
72
+ --_k096v40-1-7-3: var(--dt-colors-text-neutral-disabled, #54558780);
73
+ --_k096v41-1-7-3: var(--dt-colors-icon-neutral-disabled, #54558780);
74
+ --_k096v42-1-7-3: var(--dt-colors-border-neutral-disabled, #d2d3e180);
75
75
  }
@@ -1,7 +1,7 @@
1
1
  declare const vars: {
2
- text: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
3
- icon: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
4
- borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
2
+ text: `var(--${string})` | `var(--${string}, ${string})`;
3
+ icon: `var(--${string})` | `var(--${string}, ${string})`;
4
+ borderColor: `var(--${string})` | `var(--${string}, ${string})`;
5
5
  };
6
6
  export declare const colorUtilsCSS: import("@vanilla-extract/recipes").RuntimeFn<{
7
7
  color: {
@@ -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-6-2", variantClassNames: { color: { critical: "_k096v44-1-6-2", neutral: "_k096v45-1-6-2", primary: "_k096v46-1-6-2", success: "_k096v47-1-6-2", warning: "_k096v48-1-6-2" }, variant: { "default": "_k096v49-1-6-2", accent: "_k096v4a-1-6-2" }, disabled: { true: "_k096v4b-1-6-2", false: "_k096v4c-1-6-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-1-6-2"], [{ color: "success", variant: "accent" }, "_k096v4e-1-6-2"], [{ color: "warning", variant: "accent" }, "_k096v4f-1-6-2"], [{ color: "critical", variant: "accent" }, "_k096v4g-1-6-2"], [{ color: "neutral", variant: "accent" }, "_k096v4h-1-6-2"], [{ color: "primary", disabled: true }, "_k096v4i-1-6-2"], [{ color: "success", disabled: true }, "_k096v4j-1-6-2"], [{ color: "warning", disabled: true }, "_k096v4k-1-6-2"], [{ color: "critical", disabled: true }, "_k096v4l-1-6-2"], [{ color: "neutral", disabled: true }, "_k096v4m-1-6-2"]] });
28
- var colorUtilsVars = { text: "var(--_k096v40-1-6-2)", icon: "var(--_k096v41-1-6-2)", borderColor: "var(--_k096v42-1-6-2)" };
27
+ var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_k096v43-1-7-3", variantClassNames: { color: { critical: "_k096v44-1-7-3", neutral: "_k096v45-1-7-3", primary: "_k096v46-1-7-3", success: "_k096v47-1-7-3", warning: "_k096v48-1-7-3" }, variant: { "default": "_k096v49-1-7-3", accent: "_k096v4a-1-7-3" }, disabled: { true: "_k096v4b-1-7-3", false: "_k096v4c-1-7-3" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_k096v4d-1-7-3"], [{ color: "success", variant: "accent" }, "_k096v4e-1-7-3"], [{ color: "warning", variant: "accent" }, "_k096v4f-1-7-3"], [{ color: "critical", variant: "accent" }, "_k096v4g-1-7-3"], [{ color: "neutral", variant: "accent" }, "_k096v4h-1-7-3"], [{ color: "primary", disabled: true }, "_k096v4i-1-7-3"], [{ color: "success", disabled: true }, "_k096v4j-1-7-3"], [{ color: "warning", disabled: true }, "_k096v4k-1-7-3"], [{ color: "critical", disabled: true }, "_k096v4l-1-7-3"], [{ color: "neutral", disabled: true }, "_k096v4m-1-7-3"]] });
28
+ var colorUtilsVars = { text: "var(--_k096v40-1-7-3)", icon: "var(--_k096v41-1-7-3)", borderColor: "var(--_k096v42-1-7-3)" };
@@ -22,7 +22,7 @@ __export(isBrowser_exports, {
22
22
  });
23
23
  module.exports = __toCommonJS(isBrowser_exports);
24
24
  const isBrowser = (() => {
25
- return !!(typeof window !== "undefined" && window.document && /* eslint-disable-next-line deprecation/deprecation --
25
+ return !!(typeof window !== "undefined" && window.document && /* eslint-disable-next-line @typescript-eslint/no-deprecated --
26
26
  one overload of createElement is deprecated, apparently our plugin does not get that */
27
27
  window.document.createElement);
28
28
  })();
@@ -1,12 +1,12 @@
1
- ._10kgnsa0-1-6-2 {
1
+ ._10kgnsa0-1-7-3 {
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-6-2);
9
- color: var(--_bx32h0-1-6-2);
8
+ background: var(--_bx32h3-1-7-3);
9
+ color: var(--_bx32h0-1-7-3);
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-6-2 {
26
+ ._10kgnsa1-1-7-3 {
27
27
  text-align: start;
28
28
  justify-content: space-between;
29
29
  }
30
- ._10kgnsa2-1-6-2 {
30
+ ._10kgnsa2-1-7-3 {
31
31
  text-align: center;
32
32
  justify-content: center;
33
33
  }
34
- ._10kgnsa3-1-6-2 {
34
+ ._10kgnsa3-1-7-3 {
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-6-2 {
41
+ ._10kgnsa4-1-7-3 {
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-6-2 {
48
+ ._10kgnsa5-1-7-3 {
49
49
  cursor: not-allowed;
50
50
  }
51
- ._10kgnsa6-1-6-2 {
51
+ ._10kgnsa6-1-7-3 {
52
52
  cursor: not-allowed;
53
- background: var(--_bx32h2-1-6-2);
53
+ background: var(--_bx32h2-1-7-3);
54
54
  }
55
- ._10kgnsa7-1-6-2 {
55
+ ._10kgnsa7-1-7-3 {
56
56
  width: 100%;
57
57
  }
58
- ._10kgnsa8-1-6-2 {
58
+ ._10kgnsa8-1-7-3 {
59
59
  width: fit-content;
60
60
  }
61
- ._10kgnsa9-1-6-2 {
61
+ ._10kgnsa9-1-7-3 {
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-6-2 ._10kgnsaa-1-6-2:not(:has(svg:only-child)) {
73
+ ._10kgnsa3-1-7-3 ._10kgnsaa-1-7-3: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-6-2 ._10kgnsaa-1-6-2:not(:has(svg:only-child)) {
79
+ ._10kgnsa4-1-7-3 ._10kgnsaa-1-7-3: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-6-2 {
85
+ ._10kgnsac-1-7-3 {
86
86
  display: inline-flex;
87
87
  min-width: 0;
88
88
  max-width: 100%;
@@ -69,7 +69,7 @@ const _Button = /* @__PURE__ */ forwardRef(
69
69
  "data-testid": dataTestId,
70
70
  "data-dtrum-mask": dataDtrumMask,
71
71
  "data-dtrum-allow": dataDtrumAllow,
72
- // eslint-disable-next-line deprecation/deprecation
72
+ // eslint-disable-next-line @typescript-eslint/no-deprecated
73
73
  readOnly,
74
74
  as,
75
75
  ...remainingProps
@@ -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 { buttonCSS, buttonLoadingCSS, buttonWidthsCSS } 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 { fieldColorsCSS } 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 // eslint-disable-next-line @typescript-eslint/no-restricted-types\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\nexport const _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 deprecation/deprecation\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 fieldColorsCSS({ variant, color, disabled: disabledOrLoading }),\n buttonCSS({\n disabled: disabledOrLoading,\n textAlign,\n size,\n readOnly,\n }),\n focusClassName,\n {\n [`${buttonWidthsCSS.content}`]: width === 'content',\n [`${buttonWidthsCSS.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 fieldColorsCSS({\n variant,\n color,\n disabled: disabledOrLoading || ariaDisabled,\n }),\n buttonCSS({\n disabled: disabledOrLoading || ariaDisabled,\n textAlign,\n size,\n readOnly,\n }),\n {\n [`${buttonWidthsCSS.content}`]: width === 'content',\n [`${buttonWidthsCSS.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={buttonLoadingCSS}>\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 allow users to trigger actions or events\n * with a single click anywhere within the button container.\n * Users can also trigger a button 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 { buttonCSS, buttonLoadingCSS, buttonWidthsCSS } 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 { fieldColorsCSS } 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\nexport const _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 fieldColorsCSS({ variant, color, disabled: disabledOrLoading }),\n buttonCSS({\n disabled: disabledOrLoading,\n textAlign,\n size,\n readOnly,\n }),\n focusClassName,\n {\n [`${buttonWidthsCSS.content}`]: width === 'content',\n [`${buttonWidthsCSS.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 fieldColorsCSS({\n variant,\n color,\n disabled: disabledOrLoading || ariaDisabled,\n }),\n buttonCSS({\n disabled: disabledOrLoading || ariaDisabled,\n textAlign,\n size,\n readOnly,\n }),\n {\n [`${buttonWidthsCSS.content}`]: width === 'content',\n [`${buttonWidthsCSS.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={buttonLoadingCSS}>\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 allow users to trigger actions or events\n * with a single click anywhere within the button container.\n * Users can also trigger a button 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 buttonCSS = _7a468({ defaultClassName: "_10kgnsa0-1-6-2", variantClassNames: { textAlign: { start: "_10kgnsa1-1-6-2", center: "_10kgnsa2-1-6-2" }, size: { condensed: "_10kgnsa3-1-6-2", "default": "_10kgnsa4-1-6-2" }, disabled: { true: "_10kgnsa5-1-6-2" }, readOnly: { true: "_10kgnsa6-1-6-2" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
6
- var buttonLabelCSS = _7a468({ defaultClassName: "_10kgnsaa-1-6-2", variantClassNames: { textual: { true: "_oqqp1n0-1-6-2", false: "_10kgnsac-1-6-2" } }, defaultVariants: {}, compoundVariants: [] });
7
- var buttonLoadingCSS = "_10kgnsa9-1-6-2";
8
- var buttonWidthsCSS = { full: "_10kgnsa7-1-6-2", content: "_10kgnsa8-1-6-2" };
5
+ var buttonCSS = _7a468({ defaultClassName: "_10kgnsa0-1-7-3", variantClassNames: { textAlign: { start: "_10kgnsa1-1-7-3", center: "_10kgnsa2-1-7-3" }, size: { condensed: "_10kgnsa3-1-7-3", "default": "_10kgnsa4-1-7-3" }, disabled: { true: "_10kgnsa5-1-7-3" }, readOnly: { true: "_10kgnsa6-1-7-3" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
6
+ var buttonLabelCSS = _7a468({ defaultClassName: "_10kgnsaa-1-7-3", variantClassNames: { textual: { true: "_oqqp1n0-1-7-3", false: "_10kgnsac-1-7-3" } }, defaultVariants: {}, compoundVariants: [] });
7
+ var buttonLoadingCSS = "_10kgnsa9-1-7-3";
8
+ var buttonWidthsCSS = { full: "_10kgnsa7-1-7-3", content: "_10kgnsa8-1-7-3" };
9
9
  export {
10
10
  buttonCSS,
11
11
  buttonLabelCSS,
@@ -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 buttonCSS = _7a468({defaultClassName:'_10kgnsa0-1-6-2',variantClassNames:{textAlign:{start:'_10kgnsa1-1-6-2',center:'_10kgnsa2-1-6-2'},size:{condensed:'_10kgnsa3-1-6-2','default':'_10kgnsa4-1-6-2'},disabled:{true:'_10kgnsa5-1-6-2'},readOnly:{true:'_10kgnsa6-1-6-2'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var buttonLabelCSS = _7a468({defaultClassName:'_10kgnsaa-1-6-2',variantClassNames:{textual:{true:'_oqqp1n0-1-6-2',false:'_10kgnsac-1-6-2'}},defaultVariants:{},compoundVariants:[]});\nexport var buttonLoadingCSS = '_10kgnsa9-1-6-2';\nexport var buttonWidthsCSS = {full:'_10kgnsa7-1-6-2',content:'_10kgnsa8-1-6-2'};"],
4
+ "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var buttonCSS = _7a468({defaultClassName:'_10kgnsa0-1-7-3',variantClassNames:{textAlign:{start:'_10kgnsa1-1-7-3',center:'_10kgnsa2-1-7-3'},size:{condensed:'_10kgnsa3-1-7-3','default':'_10kgnsa4-1-7-3'},disabled:{true:'_10kgnsa5-1-7-3'},readOnly:{true:'_10kgnsa6-1-7-3'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var buttonLabelCSS = _7a468({defaultClassName:'_10kgnsaa-1-7-3',variantClassNames:{textual:{true:'_oqqp1n0-1-7-3',false:'_10kgnsac-1-7-3'}},defaultVariants:{},compoundVariants:[]});\nexport var buttonLoadingCSS = '_10kgnsa9-1-7-3';\nexport var buttonWidthsCSS = {full:'_10kgnsa7-1-7-3',content:'_10kgnsa8-1-7-3'};"],
5
5
  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,OAAM,mBAAkB,QAAO,kBAAiB,GAAE,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,UAAS,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtW,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnL,IAAI,mBAAmB;AACvB,IAAI,kBAAkB,EAAC,MAAK,mBAAkB,SAAQ,kBAAiB;",
6
6
  "names": []
7
7
  }
@@ -19,7 +19,7 @@ const IntentButton = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
19
19
  "data-testid": dataTestId,
20
20
  "data-dtrum-mask": dataDtrumMask,
21
21
  "data-dtrum-allow": dataDtrumAllow,
22
- // eslint-disable-next-line deprecation/deprecation
22
+ // eslint-disable-next-line @typescript-eslint/no-deprecated
23
23
  readOnly,
24
24
  ...remainingProps
25
25
  } = props;