@dynatrace/strato-components 0.85.32 → 0.85.50

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 (204) hide show
  1. package/buttons/button/Button.css +17 -17
  2. package/buttons/button/Button.js +7 -3
  3. package/buttons/button/Button.sty.js +4 -4
  4. package/buttons/button/utils/focus-without-scrolling.js +1 -1
  5. package/content/progress/ProgressBar.css +14 -14
  6. package/content/progress/ProgressBar.sty.js +2 -2
  7. package/content/progress/ProgressBarIcon.css +2 -2
  8. package/content/progress/ProgressBarIcon.sty.js +1 -1
  9. package/content/progress/ProgressBarLabel.css +4 -4
  10. package/content/progress/ProgressBarLabel.sty.js +1 -1
  11. package/content/progress/ProgressBarValue.css +9 -9
  12. package/content/progress/ProgressBarValue.sty.js +1 -1
  13. package/content/progress/ProgressCircle.css +15 -15
  14. package/content/progress/ProgressCircle.sty.js +6 -6
  15. package/content/skeleton/Skeleton.css +6 -6
  16. package/content/skeleton/Skeleton.sty.js +1 -1
  17. package/core/components/app-root/AppRoot.d.ts +1 -1
  18. package/core/components/app-root/AppRoot.js +1 -1
  19. package/core/index.d.ts +1 -0
  20. package/core/index.js +2 -0
  21. package/core/styles/focusRing.css +76 -76
  22. package/core/styles/focusRing.sty.js +2 -2
  23. package/core/utils/_is-string-children.d.ts +1 -1
  24. package/core/utils/colorUtils.css +64 -64
  25. package/core/utils/colorUtils.sty.js +2 -2
  26. package/core/utils/focus-management/attempt-focus.js +1 -1
  27. package/core/utils/parse-boolean.d.ts +9 -0
  28. package/core/utils/parse-boolean.js +31 -0
  29. package/esm/buttons/button/Button.css +17 -17
  30. package/esm/buttons/button/Button.js +7 -3
  31. package/esm/buttons/button/Button.js.map +2 -2
  32. package/esm/buttons/button/Button.sty.js +4 -4
  33. package/esm/buttons/button/Button.sty.js.map +2 -2
  34. package/esm/buttons/button/utils/focus-without-scrolling.js +1 -1
  35. package/esm/buttons/button/utils/focus-without-scrolling.js.map +2 -2
  36. package/esm/content/progress/ProgressBar.css +14 -14
  37. package/esm/content/progress/ProgressBar.sty.js +2 -2
  38. package/esm/content/progress/ProgressBar.sty.js.map +2 -2
  39. package/esm/content/progress/ProgressBarIcon.css +2 -2
  40. package/esm/content/progress/ProgressBarIcon.sty.js +1 -1
  41. package/esm/content/progress/ProgressBarIcon.sty.js.map +1 -1
  42. package/esm/content/progress/ProgressBarLabel.css +4 -4
  43. package/esm/content/progress/ProgressBarLabel.sty.js +1 -1
  44. package/esm/content/progress/ProgressBarLabel.sty.js.map +2 -2
  45. package/esm/content/progress/ProgressBarValue.css +9 -9
  46. package/esm/content/progress/ProgressBarValue.sty.js +1 -1
  47. package/esm/content/progress/ProgressBarValue.sty.js.map +2 -2
  48. package/esm/content/progress/ProgressCircle.css +15 -15
  49. package/esm/content/progress/ProgressCircle.sty.js +6 -6
  50. package/esm/content/progress/ProgressCircle.sty.js.map +2 -2
  51. package/esm/content/skeleton/Skeleton.css +6 -6
  52. package/esm/content/skeleton/Skeleton.sty.js +1 -1
  53. package/esm/content/skeleton/Skeleton.sty.js.map +2 -2
  54. package/esm/core/components/app-root/AppRoot.js +1 -1
  55. package/esm/core/components/app-root/AppRoot.js.map +2 -2
  56. package/esm/core/index.js +2 -0
  57. package/esm/core/index.js.map +2 -2
  58. package/esm/core/styles/focusRing.css +76 -76
  59. package/esm/core/styles/focusRing.sty.js +2 -2
  60. package/esm/core/styles/focusRing.sty.js.map +2 -2
  61. package/esm/core/utils/_is-string-children.js.map +2 -2
  62. package/esm/core/utils/colorUtils.css +64 -64
  63. package/esm/core/utils/colorUtils.sty.js +2 -2
  64. package/esm/core/utils/colorUtils.sty.js.map +2 -2
  65. package/esm/core/utils/focus-management/attempt-focus.js +1 -1
  66. package/esm/core/utils/focus-management/attempt-focus.js.map +2 -2
  67. package/esm/core/utils/merge-props.js.map +1 -1
  68. package/esm/core/utils/parse-boolean.js +13 -0
  69. package/esm/core/utils/parse-boolean.js.map +7 -0
  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 +2 -2
  76. package/esm/layouts/index.js +6 -0
  77. package/esm/layouts/index.js.map +2 -2
  78. package/esm/layouts/input-group/InputGroup.css +12 -0
  79. package/esm/layouts/input-group/InputGroup.sty.js +8 -0
  80. package/esm/layouts/input-group/InputGroup.sty.js.map +7 -0
  81. package/esm/layouts/surface/Surface.css +39 -39
  82. package/esm/layouts/surface/Surface.sty.js +2 -2
  83. package/esm/layouts/surface/Surface.sty.js.map +2 -2
  84. package/esm/layouts/surface/variables.sty.js +1 -1
  85. package/esm/layouts/surface/variables.sty.js.map +1 -1
  86. package/esm/styles/colorUtils.css +64 -64
  87. package/esm/styles/colorUtils.sty.js +2 -2
  88. package/esm/styles/colorUtils.sty.js.map +2 -2
  89. package/esm/styles/container.css +47 -47
  90. package/esm/styles/container.sty.js +2 -2
  91. package/esm/styles/container.sty.js.map +2 -2
  92. package/esm/styles/ellipsis.css +1 -1
  93. package/esm/styles/ellipsis.sty.js +1 -1
  94. package/esm/styles/ellipsis.sty.js.map +1 -1
  95. package/esm/styles/field.css +153 -153
  96. package/esm/styles/field.sty.js +2 -2
  97. package/esm/styles/field.sty.js.map +2 -2
  98. package/esm/styles/index.js +2 -0
  99. package/esm/styles/index.js.map +2 -2
  100. package/esm/styles/sprinkles.css +262 -262
  101. package/esm/styles/sprinkles.sty.js +1 -1
  102. package/esm/styles/sprinkles.sty.js.map +2 -2
  103. package/esm/styles/textStyle.css +8 -8
  104. package/esm/styles/textStyle.sty.js +1 -1
  105. package/esm/styles/textStyle.sty.js.map +2 -2
  106. package/esm/typography/block-quote/Blockquote.css +2 -2
  107. package/esm/typography/block-quote/Blockquote.sty.js +1 -1
  108. package/esm/typography/block-quote/Blockquote.sty.js.map +1 -1
  109. package/esm/typography/code/Code.css +1 -1
  110. package/esm/typography/code/Code.sty.js +1 -1
  111. package/esm/typography/code/Code.sty.js.map +1 -1
  112. package/esm/typography/emphasis/Emphasis.css +1 -1
  113. package/esm/typography/emphasis/Emphasis.sty.js +1 -1
  114. package/esm/typography/emphasis/Emphasis.sty.js.map +1 -1
  115. package/esm/typography/external-link/ExternalLink.css +6 -6
  116. package/esm/typography/external-link/ExternalLink.sty.js +1 -1
  117. package/esm/typography/external-link/ExternalLink.sty.js.map +1 -1
  118. package/esm/typography/heading/Heading.css +8 -8
  119. package/esm/typography/heading/Heading.js.map +2 -2
  120. package/esm/typography/heading/Heading.sty.js +1 -1
  121. package/esm/typography/heading/Heading.sty.js.map +2 -2
  122. package/esm/typography/highlight/Highlight.css +1 -1
  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 +4 -4
  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.js +1 -1
  130. package/esm/typography/list/List.js.map +1 -1
  131. package/esm/typography/list/List.sty.js +2 -2
  132. package/esm/typography/list/List.sty.js.map +1 -1
  133. package/esm/typography/paragraph/Paragraph.css +4 -4
  134. package/esm/typography/paragraph/Paragraph.sty.js +1 -1
  135. package/esm/typography/paragraph/Paragraph.sty.js.map +2 -2
  136. package/esm/typography/strikethrough/Strikethrough.css +1 -1
  137. package/esm/typography/strikethrough/Strikethrough.sty.js +1 -1
  138. package/esm/typography/strikethrough/Strikethrough.sty.js.map +1 -1
  139. package/esm/typography/strong/Strong.css +1 -1
  140. package/esm/typography/strong/Strong.sty.js +1 -1
  141. package/esm/typography/strong/Strong.sty.js.map +1 -1
  142. package/esm/typography/text/Text.css +3 -3
  143. package/esm/typography/text/Text.sty.js +1 -1
  144. package/esm/typography/text/Text.sty.js.map +2 -2
  145. package/esm/typography/text-ellipsis/TextEllipsis.css +4 -4
  146. package/esm/typography/text-ellipsis/TextEllipsis.sty.js +1 -1
  147. package/esm/typography/text-ellipsis/TextEllipsis.sty.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/index.d.ts +2 -1
  153. package/layouts/index.js +3 -0
  154. package/layouts/input-group/InputGroup.css +12 -0
  155. package/layouts/input-group/InputGroup.sty.d.ts +4 -0
  156. package/layouts/input-group/InputGroup.sty.js +26 -0
  157. package/layouts/surface/Surface.css +39 -39
  158. package/layouts/surface/Surface.sty.js +2 -2
  159. package/layouts/surface/variables.sty.d.ts +1 -0
  160. package/layouts/surface/variables.sty.js +1 -1
  161. package/package.json +3 -3
  162. package/styles/colorUtils.css +64 -64
  163. package/styles/colorUtils.sty.js +2 -2
  164. package/styles/container.css +47 -47
  165. package/styles/container.sty.js +2 -2
  166. package/styles/ellipsis.css +1 -1
  167. package/styles/ellipsis.sty.js +1 -1
  168. package/styles/field.css +153 -153
  169. package/styles/field.sty.js +2 -2
  170. package/styles/index.d.ts +2 -1
  171. package/styles/index.js +2 -0
  172. package/styles/safe-sprinkles.d.ts +1 -1
  173. package/styles/sprinkles.css +262 -262
  174. package/styles/sprinkles.sty.js +1 -1
  175. package/styles/textStyle.css +8 -8
  176. package/styles/textStyle.sty.js +1 -1
  177. package/testing/mocks/table-virtualization-mock.js +6 -3
  178. package/typography/block-quote/Blockquote.css +2 -2
  179. package/typography/block-quote/Blockquote.sty.js +1 -1
  180. package/typography/code/Code.css +1 -1
  181. package/typography/code/Code.sty.js +1 -1
  182. package/typography/emphasis/Emphasis.css +1 -1
  183. package/typography/emphasis/Emphasis.sty.js +1 -1
  184. package/typography/external-link/ExternalLink.css +6 -6
  185. package/typography/external-link/ExternalLink.sty.js +1 -1
  186. package/typography/heading/Heading.css +8 -8
  187. package/typography/heading/Heading.sty.js +1 -1
  188. package/typography/highlight/Highlight.css +1 -1
  189. package/typography/highlight/Highlight.sty.js +1 -1
  190. package/typography/link/Link.css +4 -4
  191. package/typography/link/Link.sty.js +1 -1
  192. package/typography/list/List.css +4 -4
  193. package/typography/list/List.js +1 -1
  194. package/typography/list/List.sty.js +2 -2
  195. package/typography/paragraph/Paragraph.css +4 -4
  196. package/typography/paragraph/Paragraph.sty.js +1 -1
  197. package/typography/strikethrough/Strikethrough.css +1 -1
  198. package/typography/strikethrough/Strikethrough.sty.js +1 -1
  199. package/typography/strong/Strong.css +1 -1
  200. package/typography/strong/Strong.sty.js +1 -1
  201. package/typography/text/Text.css +3 -3
  202. package/typography/text/Text.sty.js +1 -1
  203. package/typography/text-ellipsis/TextEllipsis.css +4 -4
  204. package/typography/text-ellipsis/TextEllipsis.sty.js +1 -1
@@ -1,88 +1,88 @@
1
- .focusRing_focusRingCSS__z2r50s3 {
1
+ .z2r50s3 {
2
2
  outline: none;
3
3
  }
4
- .focusRing_focusRingCSS__z2r50s3:focus-visible {
4
+ .z2r50s3:focus-visible {
5
5
  outline: none;
6
6
  }
7
- .focusRing_focusRingCSS_minimal_true__z2r50s4 {
7
+ .z2r50s4 {
8
8
  border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
9
- box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--outerShadow__z2r50s0);
10
- background-color: var(--backgroundColor__z2r50s2);
11
- }
12
- .focusRing_focusRingCSS_minimal_false__z2r50s5.focusRing_focusRingCSS_minimal_false__z2r50s5 {
13
- box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--outerShadow__z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--innerShadow__z2r50s1);
14
- }
15
- .focusRing_focusRingCSS_variant_neutral__z2r50s6 {
16
- --outerShadow__z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
17
- --innerShadow__z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
18
- --backgroundColor__z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
19
- }
20
- .focusRing_focusRingCSS_variant_primary__z2r50s7 {
21
- --outerShadow__z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
22
- --innerShadow__z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
23
- --backgroundColor__z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
24
- }
25
- .focusRing_focusRingCSS_variant_success__z2r50s8 {
26
- --outerShadow__z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
27
- --innerShadow__z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
28
- --backgroundColor__z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
29
- }
30
- .focusRing_focusRingCSS_variant_warning__z2r50s9 {
31
- --outerShadow__z2r50s0: var(--dt-colors-border-warning-accent, #805100);
32
- --innerShadow__z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
33
- --backgroundColor__z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
34
- }
35
- .focusRing_focusRingCSS_variant_critical__z2r50sa {
36
- --outerShadow__z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
37
- --innerShadow__z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
38
- --backgroundColor__z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
39
- }
40
- .focusRing_focusRingCSS_variant_onAccent__z2r50sb {
41
- --outerShadow__z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
42
- --innerShadow__z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
43
- --backgroundColor__z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
44
- }
45
- .focusRing_focusRingFocusWithinCSS__z2r50sc:focus-within {
9
+ box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--z2r50s0);
10
+ background-color: var(--z2r50s2);
11
+ }
12
+ .z2r50s5.z2r50s5 {
13
+ box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--z2r50s1);
14
+ }
15
+ .z2r50s6 {
16
+ --z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
17
+ --z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
18
+ --z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
19
+ }
20
+ .z2r50s7 {
21
+ --z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
22
+ --z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
23
+ --z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
24
+ }
25
+ .z2r50s8 {
26
+ --z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
27
+ --z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
28
+ --z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
29
+ }
30
+ .z2r50s9 {
31
+ --z2r50s0: var(--dt-colors-border-warning-accent, #805100);
32
+ --z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
33
+ --z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
34
+ }
35
+ .z2r50sa {
36
+ --z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
37
+ --z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
38
+ --z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
39
+ }
40
+ .z2r50sb {
41
+ --z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
42
+ --z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
43
+ --z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
44
+ }
45
+ .z2r50sc:focus-within {
46
46
  outline: none;
47
47
  :focus-visible {
48
48
  outline: none;
49
49
  }
50
50
  }
51
- .focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd:focus-within {
51
+ .z2r50sd:focus-within {
52
52
  border-radius: calc(var(--dt-borders-radius-field-subdued, 4px) / 2);
53
- box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--outerShadow__z2r50s0);
54
- background-color: var(--backgroundColor__z2r50s2);
55
- }
56
- .focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se:focus-within {
57
- box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--outerShadow__z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--innerShadow__z2r50s1);
58
- }
59
- .focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf {
60
- --outerShadow__z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
61
- --innerShadow__z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
62
- --backgroundColor__z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
63
- }
64
- .focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg {
65
- --outerShadow__z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
66
- --innerShadow__z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
67
- --backgroundColor__z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
68
- }
69
- .focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh {
70
- --outerShadow__z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
71
- --innerShadow__z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
72
- --backgroundColor__z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
73
- }
74
- .focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si {
75
- --outerShadow__z2r50s0: var(--dt-colors-border-warning-accent, #805100);
76
- --innerShadow__z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
77
- --backgroundColor__z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
78
- }
79
- .focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj {
80
- --outerShadow__z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
81
- --innerShadow__z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
82
- --backgroundColor__z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
83
- }
84
- .focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk {
85
- --outerShadow__z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
86
- --innerShadow__z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
87
- --backgroundColor__z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
53
+ box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--z2r50s0);
54
+ background-color: var(--z2r50s2);
55
+ }
56
+ .z2r50se:focus-within {
57
+ box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--z2r50s0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--z2r50s1);
58
+ }
59
+ .z2r50sf {
60
+ --z2r50s0: var(--dt-colors-border-neutral-accent, #545587);
61
+ --z2r50s1: var(--dt-colors-border-neutral-default, #d2d3e1);
62
+ --z2r50s2: var(--dt-colors-background-field-neutral-emphasized, #dadbe7);
63
+ }
64
+ .z2r50sg {
65
+ --z2r50s0: var(--dt-colors-border-primary-accent, #454cc9);
66
+ --z2r50s1: var(--dt-colors-border-primary-default, #ccd3f3);
67
+ --z2r50s2: var(--dt-colors-background-field-primary-emphasized, #d6dbf4);
68
+ }
69
+ .z2r50sh {
70
+ --z2r50s0: var(--dt-colors-border-success-accent, #2c6360);
71
+ --z2r50s1: var(--dt-colors-border-success-default, #cad6d7);
72
+ --z2r50s2: var(--dt-colors-background-field-success-emphasized, #d4dddf);
73
+ }
74
+ .z2r50si {
75
+ --z2r50s0: var(--dt-colors-border-warning-accent, #805100);
76
+ --z2r50s1: var(--dt-colors-border-warning-default, #f4e5d5);
77
+ --z2r50s2: var(--dt-colors-background-field-warning-emphasized, #f4e8de);
78
+ }
79
+ .z2r50sj {
80
+ --z2r50s0: var(--dt-colors-border-critical-accent, #b80031);
81
+ --z2r50s1: var(--dt-colors-border-critical-default, #f1cdcf);
82
+ --z2r50s2: var(--dt-colors-background-field-critical-emphasized, #f2d7d9);
83
+ }
84
+ .z2r50sk {
85
+ --z2r50s0: var(--dt-colors-border-on-accent-default, #f3f3f7);
86
+ --z2r50s1: var(--dt-colors-border-on-accent-default, #f3f3f7);
87
+ --z2r50s2: var(--dt-colors-background-field-on-accent-emphasized, #f3f3f733);
88
88
  }
@@ -23,5 +23,5 @@ __export(focusRing_css_exports, {
23
23
  module.exports = __toCommonJS(focusRing_css_exports);
24
24
  var import_focusRing_css_ts_vanilla = require("./focusRing.css");
25
25
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
26
- var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "focusRing_focusRingCSS__z2r50s3", variantClassNames: { minimal: { true: "focusRing_focusRingCSS_minimal_true__z2r50s4", false: "focusRing_focusRingCSS_minimal_false__z2r50s5" }, variant: { neutral: "focusRing_focusRingCSS_variant_neutral__z2r50s6", primary: "focusRing_focusRingCSS_variant_primary__z2r50s7", success: "focusRing_focusRingCSS_variant_success__z2r50s8", warning: "focusRing_focusRingCSS_variant_warning__z2r50s9", critical: "focusRing_focusRingCSS_variant_critical__z2r50sa", onAccent: "focusRing_focusRingCSS_variant_onAccent__z2r50sb" } }, defaultVariants: {}, compoundVariants: [] });
27
- var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "focusRing_focusRingFocusWithinCSS__z2r50sc", variantClassNames: { minimal: { true: "focusRing_focusRingFocusWithinCSS_minimal_true__z2r50sd", false: "focusRing_focusRingFocusWithinCSS_minimal_false__z2r50se" }, variant: { neutral: "focusRing_focusRingFocusWithinCSS_variant_neutral__z2r50sf", primary: "focusRing_focusRingFocusWithinCSS_variant_primary__z2r50sg", success: "focusRing_focusRingFocusWithinCSS_variant_success__z2r50sh", warning: "focusRing_focusRingFocusWithinCSS_variant_warning__z2r50si", critical: "focusRing_focusRingFocusWithinCSS_variant_critical__z2r50sj", onAccent: "focusRing_focusRingFocusWithinCSS_variant_onAccent__z2r50sk" } }, defaultVariants: {}, compoundVariants: [] });
26
+ var focusRingCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "z2r50s3", variantClassNames: { minimal: { true: "z2r50s4", false: "z2r50s5" }, variant: { neutral: "z2r50s6", primary: "z2r50s7", success: "z2r50s8", warning: "z2r50s9", critical: "z2r50sa", onAccent: "z2r50sb" } }, defaultVariants: {}, compoundVariants: [] });
27
+ var focusRingFocusWithinCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "z2r50sc", variantClassNames: { minimal: { true: "z2r50sd", false: "z2r50se" }, variant: { neutral: "z2r50sf", primary: "z2r50sg", success: "z2r50sh", warning: "z2r50si", critical: "z2r50sj", onAccent: "z2r50sk" } }, defaultVariants: {}, compoundVariants: [] });
@@ -3,4 +3,4 @@ import React from 'react';
3
3
  * Returns whether children only consist of text nodes.
4
4
  * @internal
5
5
  */
6
- export declare function isStringChildren(children: React.ReactNode): boolean;
6
+ export declare function isStringChildren(children: React.ReactNode): children is string;
@@ -1,80 +1,80 @@
1
- .colorUtils_colorUtilsCSS_color_critical__k096v44 {
2
- --vars_text__k096v40: var(--dt-colors-text-critical-default, #b80031);
3
- --vars_icon__k096v41: var(--dt-colors-icon-critical-default, #b80031);
4
- --vars_borderColor__k096v42: var(--dt-colors-border-critical-default, #f1cdcf);
1
+ .k096v44 {
2
+ --k096v40: var(--dt-colors-text-critical-default, #b80031);
3
+ --k096v41: var(--dt-colors-icon-critical-default, #b80031);
4
+ --k096v42: var(--dt-colors-border-critical-default, #f1cdcf);
5
5
  }
6
- .colorUtils_colorUtilsCSS_color_neutral__k096v45 {
7
- --vars_text__k096v40: var(--dt-colors-text-neutral-default, #2b2a58);
8
- --vars_icon__k096v41: var(--dt-colors-icon-neutral-default, #2b2a58);
9
- --vars_borderColor__k096v42: var(--dt-colors-border-neutral-default, #d2d3e1);
6
+ .k096v45 {
7
+ --k096v40: var(--dt-colors-text-neutral-default, #2b2a58);
8
+ --k096v41: var(--dt-colors-icon-neutral-default, #2b2a58);
9
+ --k096v42: var(--dt-colors-border-neutral-default, #d2d3e1);
10
10
  }
11
- .colorUtils_colorUtilsCSS_color_primary__k096v46 {
12
- --vars_text__k096v40: var(--dt-colors-text-primary-default, #454cc9);
13
- --vars_icon__k096v41: var(--dt-colors-icon-primary-default, #454cc9);
14
- --vars_borderColor__k096v42: var(--dt-colors-border-primary-default, #ccd3f3);
11
+ .k096v46 {
12
+ --k096v40: var(--dt-colors-text-primary-default, #454cc9);
13
+ --k096v41: var(--dt-colors-icon-primary-default, #454cc9);
14
+ --k096v42: var(--dt-colors-border-primary-default, #ccd3f3);
15
15
  }
16
- .colorUtils_colorUtilsCSS_color_success__k096v47 {
17
- --vars_text__k096v40: var(--dt-colors-text-success-default, #2c6360);
18
- --vars_icon__k096v41: var(--dt-colors-icon-success-default, #2c6360);
19
- --vars_borderColor__k096v42: var(--dt-colors-border-success-default, #cad6d7);
16
+ .k096v47 {
17
+ --k096v40: var(--dt-colors-text-success-default, #2c6360);
18
+ --k096v41: var(--dt-colors-icon-success-default, #2c6360);
19
+ --k096v42: var(--dt-colors-border-success-default, #cad6d7);
20
20
  }
21
- .colorUtils_colorUtilsCSS_color_warning__k096v48 {
22
- --vars_text__k096v40: var(--dt-colors-text-warning-default, #805100);
23
- --vars_icon__k096v41: var(--dt-colors-icon-warning-default, #805100);
24
- --vars_borderColor__k096v42: var(--dt-colors-border-warning-default, #f4e5d5);
21
+ .k096v48 {
22
+ --k096v40: var(--dt-colors-text-warning-default, #805100);
23
+ --k096v41: var(--dt-colors-icon-warning-default, #805100);
24
+ --k096v42: var(--dt-colors-border-warning-default, #f4e5d5);
25
25
  }
26
- .colorUtils_colorUtilsCSS_color_onAccent__k096v49 {
27
- --vars_text__k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
28
- --vars_icon__k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
29
- --vars_borderColor__k096v42: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
26
+ .k096v49 {
27
+ --k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
28
+ --k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
29
+ --k096v42: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
30
30
  }
31
- .colorUtils_colorUtilsCSS_compound_0__k096v4e {
32
- --vars_text__k096v40: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
33
- --vars_icon__k096v41: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
34
- --vars_borderColor__k096v42: var(--dt-colors-border-primary-accent, #454cc9);
31
+ .k096v4e {
32
+ --k096v40: var(--dt-colors-text-primary-on-accent-default, #f4f4fb);
33
+ --k096v41: var(--dt-colors-icon-primary-on-accent-default, #f4f4fb);
34
+ --k096v42: var(--dt-colors-border-primary-accent, #454cc9);
35
35
  }
36
- .colorUtils_colorUtilsCSS_compound_1__k096v4f {
37
- --vars_text__k096v40: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
38
- --vars_icon__k096v41: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
39
- --vars_borderColor__k096v42: var(--dt-colors-border-success-accent, #2c6360);
36
+ .k096v4f {
37
+ --k096v40: var(--dt-colors-text-success-on-accent-default, #f1f4f4);
38
+ --k096v41: var(--dt-colors-icon-success-on-accent-default, #f1f4f4);
39
+ --k096v42: var(--dt-colors-border-success-accent, #2c6360);
40
40
  }
41
- .colorUtils_colorUtilsCSS_compound_2__k096v4g {
42
- --vars_text__k096v40: var(--dt-colors-text-warning-on-accent-default, #272025);
43
- --vars_icon__k096v41: var(--dt-colors-icon-warning-on-accent-default, #272025);
44
- --vars_borderColor__k096v42: var(--dt-colors-border-warning-accent, #805100);
41
+ .k096v4g {
42
+ --k096v40: var(--dt-colors-text-warning-on-accent-default, #272025);
43
+ --k096v41: var(--dt-colors-icon-warning-on-accent-default, #272025);
44
+ --k096v42: var(--dt-colors-border-warning-accent, #805100);
45
45
  }
46
- .colorUtils_colorUtilsCSS_compound_3__k096v4h {
47
- --vars_text__k096v40: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
48
- --vars_icon__k096v41: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
49
- --vars_borderColor__k096v42: var(--dt-colors-border-critical-accent, #b80031);
46
+ .k096v4h {
47
+ --k096v40: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
48
+ --k096v41: var(--dt-colors-icon-critical-on-accent-default, #f9f1f3);
49
+ --k096v42: var(--dt-colors-border-critical-accent, #b80031);
50
50
  }
51
- .colorUtils_colorUtilsCSS_compound_4__k096v4i {
52
- --vars_text__k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
53
- --vars_icon__k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
54
- --vars_borderColor__k096v42: var(--dt-colors-border-neutral-accent, #545587);
51
+ .k096v4i {
52
+ --k096v40: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
53
+ --k096v41: var(--dt-colors-icon-neutral-on-accent-default, #f3f3f6);
54
+ --k096v42: var(--dt-colors-border-neutral-accent, #545587);
55
55
  }
56
- .colorUtils_colorUtilsCSS_compound_5__k096v4j {
57
- --vars_text__k096v40: var(--dt-colors-text-primary-disabled, #54558780);
58
- --vars_icon__k096v41: var(--dt-colors-icon-primary-disabled, #54558780);
59
- --vars_borderColor__k096v42: var(--dt-colors-border-primary-disabled, #d2d3e180);
56
+ .k096v4j {
57
+ --k096v40: var(--dt-colors-text-primary-disabled, #54558780);
58
+ --k096v41: var(--dt-colors-icon-primary-disabled, #54558780);
59
+ --k096v42: var(--dt-colors-border-primary-disabled, #d2d3e180);
60
60
  }
61
- .colorUtils_colorUtilsCSS_compound_6__k096v4k {
62
- --vars_text__k096v40: var(--dt-colors-text-success-disabled, #54558780);
63
- --vars_icon__k096v41: var(--dt-colors-icon-success-disabled, #54558780);
64
- --vars_borderColor__k096v42: var(--dt-colors-border-success-disabled, #d2d3e180);
61
+ .k096v4k {
62
+ --k096v40: var(--dt-colors-text-success-disabled, #54558780);
63
+ --k096v41: var(--dt-colors-icon-success-disabled, #54558780);
64
+ --k096v42: var(--dt-colors-border-success-disabled, #d2d3e180);
65
65
  }
66
- .colorUtils_colorUtilsCSS_compound_7__k096v4l {
67
- --vars_text__k096v40: var(--dt-colors-text-warning-disabled, #54558780);
68
- --vars_icon__k096v41: var(--dt-colors-icon-warning-disabled, #54558780);
69
- --vars_borderColor__k096v42: var(--dt-colors-border-warning-disabled, #d2d3e180);
66
+ .k096v4l {
67
+ --k096v40: var(--dt-colors-text-warning-disabled, #54558780);
68
+ --k096v41: var(--dt-colors-icon-warning-disabled, #54558780);
69
+ --k096v42: var(--dt-colors-border-warning-disabled, #d2d3e180);
70
70
  }
71
- .colorUtils_colorUtilsCSS_compound_8__k096v4m {
72
- --vars_text__k096v40: var(--dt-colors-text-critical-disabled, #54558780);
73
- --vars_icon__k096v41: var(--dt-colors-icon-critical-disabled, #54558780);
74
- --vars_borderColor__k096v42: var(--dt-colors-border-critical-disabled, #d2d3e180);
71
+ .k096v4m {
72
+ --k096v40: var(--dt-colors-text-critical-disabled, #54558780);
73
+ --k096v41: var(--dt-colors-icon-critical-disabled, #54558780);
74
+ --k096v42: var(--dt-colors-border-critical-disabled, #d2d3e180);
75
75
  }
76
- .colorUtils_colorUtilsCSS_compound_9__k096v4n {
77
- --vars_text__k096v40: var(--dt-colors-text-neutral-disabled, #54558780);
78
- --vars_icon__k096v41: var(--dt-colors-icon-neutral-disabled, #54558780);
79
- --vars_borderColor__k096v42: var(--dt-colors-border-neutral-disabled, #d2d3e180);
76
+ .k096v4n {
77
+ --k096v40: var(--dt-colors-text-neutral-disabled, #54558780);
78
+ --k096v41: var(--dt-colors-icon-neutral-disabled, #54558780);
79
+ --k096v42: var(--dt-colors-border-neutral-disabled, #d2d3e180);
80
80
  }
@@ -23,5 +23,5 @@ __export(colorUtils_css_exports, {
23
23
  module.exports = __toCommonJS(colorUtils_css_exports);
24
24
  var import_colorUtils_css_ts_vanilla = require("./colorUtils.css");
25
25
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
26
- var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "colorUtils__k096v43", variantClassNames: { color: { critical: "colorUtils_colorUtilsCSS_color_critical__k096v44", neutral: "colorUtils_colorUtilsCSS_color_neutral__k096v45", primary: "colorUtils_colorUtilsCSS_color_primary__k096v46", success: "colorUtils_colorUtilsCSS_color_success__k096v47", warning: "colorUtils_colorUtilsCSS_color_warning__k096v48", onAccent: "colorUtils_colorUtilsCSS_color_onAccent__k096v49" }, variant: { "default": "colorUtils_colorUtilsCSS_variant_default__k096v4a", accent: "colorUtils_colorUtilsCSS_variant_accent__k096v4b" }, disabled: { true: "colorUtils_colorUtilsCSS_disabled_true__k096v4c", false: "colorUtils_colorUtilsCSS_disabled_false__k096v4d" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_0__k096v4e"], [{ color: "success", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_1__k096v4f"], [{ color: "warning", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_2__k096v4g"], [{ color: "critical", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_3__k096v4h"], [{ color: "neutral", variant: "accent" }, "colorUtils_colorUtilsCSS_compound_4__k096v4i"], [{ color: "primary", disabled: true }, "colorUtils_colorUtilsCSS_compound_5__k096v4j"], [{ color: "success", disabled: true }, "colorUtils_colorUtilsCSS_compound_6__k096v4k"], [{ color: "warning", disabled: true }, "colorUtils_colorUtilsCSS_compound_7__k096v4l"], [{ color: "critical", disabled: true }, "colorUtils_colorUtilsCSS_compound_8__k096v4m"], [{ color: "neutral", disabled: true }, "colorUtils_colorUtilsCSS_compound_9__k096v4n"]] });
27
- var colorUtilsVars = { text: "var(--vars_text__k096v40)", icon: "var(--vars_icon__k096v41)", borderColor: "var(--vars_borderColor__k096v42)" };
26
+ var colorUtilsCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "k096v43", variantClassNames: { color: { critical: "k096v44", neutral: "k096v45", primary: "k096v46", success: "k096v47", warning: "k096v48", onAccent: "k096v49" }, variant: { "default": "k096v4a", accent: "k096v4b" }, disabled: { true: "k096v4c", false: "k096v4d" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "k096v4e"], [{ color: "success", variant: "accent" }, "k096v4f"], [{ color: "warning", variant: "accent" }, "k096v4g"], [{ color: "critical", variant: "accent" }, "k096v4h"], [{ color: "neutral", variant: "accent" }, "k096v4i"], [{ color: "primary", disabled: true }, "k096v4j"], [{ color: "success", disabled: true }, "k096v4k"], [{ color: "warning", disabled: true }, "k096v4l"], [{ color: "critical", disabled: true }, "k096v4m"], [{ color: "neutral", disabled: true }, "k096v4n"]] });
27
+ var colorUtilsVars = { text: "var(--k096v40)", icon: "var(--k096v41)", borderColor: "var(--k096v42)" };
@@ -27,7 +27,7 @@ const attemptFocus = (element) => {
27
27
  }
28
28
  try {
29
29
  element.focus({ preventScroll: true });
30
- } catch (e) {
30
+ } catch {
31
31
  }
32
32
  return document.activeElement === element;
33
33
  };
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Converts a `Booleanish` value to `boolean` or `undefined`.
3
+ *
4
+ * Booleanish is used by react to type attributes like `aria-disabled`
5
+ *
6
+ * @internal
7
+ * @see {@link https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L27 | `Booleanish` from @types/react}
8
+ */
9
+ export declare function parseBoolean(booleanish: boolean | 'true' | 'false' | undefined): boolean | undefined;
@@ -0,0 +1,31 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+ var parse_boolean_exports = {};
19
+ __export(parse_boolean_exports, {
20
+ parseBoolean: () => parseBoolean
21
+ });
22
+ module.exports = __toCommonJS(parse_boolean_exports);
23
+ function parseBoolean(booleanish) {
24
+ if (booleanish === void 0) {
25
+ return;
26
+ }
27
+ if (typeof booleanish === "boolean") {
28
+ return booleanish;
29
+ }
30
+ return booleanish === "true";
31
+ }
@@ -1,12 +1,12 @@
1
- .Button_buttonCSS__10kgnsa0 {
1
+ ._10kgnsa0 {
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(--vars_background__bx32h3);
9
- color: var(--vars_text__bx32h0);
8
+ background: var(--bx32h3);
9
+ color: var(--bx32h0);
10
10
  display: inline-flex;
11
11
  position: relative;
12
12
  align-items: center;
@@ -23,46 +23,46 @@
23
23
  transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
24
24
  transition-property: color, background-color, transform;
25
25
  }
26
- .Button_buttonCSS__10kgnsa0:hover {
26
+ ._10kgnsa0:hover {
27
27
  transition-timing-function: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1));
28
28
  transition-duration: var(--dt-animations-fade-in-duration-base, 250ms);
29
29
  }
30
- .Button_buttonCSS_textAlign_start__10kgnsa1 {
30
+ ._10kgnsa1 {
31
31
  text-align: start;
32
32
  justify-content: space-between;
33
33
  }
34
- .Button_buttonCSS_textAlign_center__10kgnsa2 {
34
+ ._10kgnsa2 {
35
35
  text-align: center;
36
36
  justify-content: center;
37
37
  }
38
- .Button_buttonCSS_size_condensed__10kgnsa3 {
38
+ ._10kgnsa3 {
39
39
  padding-top: var(--dt-spacings-size-2, 2px);
40
40
  padding-bottom: var(--dt-spacings-size-2, 2px);
41
41
  padding-left: var(--dt-spacings-size-4, 4px);
42
42
  padding-right: var(--dt-spacings-size-4, 4px);
43
43
  gap: var(--dt-spacings-size-2, 2px);
44
44
  }
45
- .Button_buttonCSS_size_default__10kgnsa4 {
45
+ ._10kgnsa4 {
46
46
  padding-top: var(--dt-spacings-size-6, 6px);
47
47
  padding-bottom: var(--dt-spacings-size-6, 6px);
48
48
  padding-left: var(--dt-spacings-size-8, 8px);
49
49
  padding-right: var(--dt-spacings-size-8, 8px);
50
50
  gap: var(--dt-spacings-size-4, 4px);
51
51
  }
52
- .Button_buttonCSS_disabled_true__10kgnsa5 {
52
+ ._10kgnsa5 {
53
53
  cursor: not-allowed;
54
54
  }
55
- .Button_buttonCSS_readOnly_true__10kgnsa6 {
55
+ ._10kgnsa6 {
56
56
  cursor: not-allowed;
57
- background: var(--vars_backgroundStatic__bx32h2);
57
+ background: var(--bx32h2);
58
58
  }
59
- .Button_buttonWidthsCSS_full__10kgnsa7 {
59
+ ._10kgnsa7 {
60
60
  width: 100%;
61
61
  }
62
- .Button_buttonWidthsCSS_content__10kgnsa8 {
62
+ ._10kgnsa8 {
63
63
  width: fit-content;
64
64
  }
65
- .Button_buttonLoadingCSS__10kgnsa9 {
65
+ ._10kgnsa9 {
66
66
  position: absolute;
67
67
  top: 0;
68
68
  left: 0;
@@ -74,19 +74,19 @@
74
74
  align-items: center;
75
75
  z-index: 1;
76
76
  }
77
- .Button_buttonCSS_size_condensed__10kgnsa3 .Button_buttonLabelCSS__10kgnsaa:not(:has(svg:only-child)) {
77
+ ._10kgnsa3 ._10kgnsaa:not(:has(svg:only-child)) {
78
78
  padding-top: 0;
79
79
  padding-bottom: 0;
80
80
  padding-left: 2px;
81
81
  padding-right: 2px;
82
82
  }
83
- .Button_buttonCSS_size_default__10kgnsa4 .Button_buttonLabelCSS__10kgnsaa:not(:has(svg:only-child)) {
83
+ ._10kgnsa4 ._10kgnsaa:not(:has(svg:only-child)) {
84
84
  padding-top: 0;
85
85
  padding-bottom: 0;
86
86
  padding-left: 4px;
87
87
  padding-right: 4px;
88
88
  }
89
- .Button_buttonLabelCSS_textual_false__10kgnsac {
89
+ ._10kgnsac {
90
90
  display: inline-flex;
91
91
  min-width: 0;
92
92
  max-width: 100%;
@@ -13,8 +13,10 @@ import { ProgressCircle } from "../../content/progress/ProgressCircle.js";
13
13
  import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
14
14
  import { useFocusRing } from "../../core/styles/useFocusRing.js";
15
15
  import { mergeProps } from "../../core/utils/merge-props.js";
16
+ import { parseBoolean } from "../../core/utils/parse-boolean.js";
16
17
  import { Flex } from "../../layouts/flex/Flex.js";
17
18
  import { Grid } from "../../layouts/grid/Grid.js";
19
+ import { inputGroupChildCSS } from "../../layouts/input-group/InputGroup.sty.js";
18
20
  import { fieldColorsCSS } from "../../styles/field.sty.js";
19
21
  function getButtonSlots(children) {
20
22
  const slots = {};
@@ -36,7 +38,7 @@ function getButtonSlots(children) {
36
38
  break;
37
39
  }
38
40
  } else {
39
- if (child) {
41
+ if (child !== null && child !== void 0) {
40
42
  slots.freeform ??= [];
41
43
  slots.freeform.push(child);
42
44
  }
@@ -71,7 +73,7 @@ const _Button = /* @__PURE__ */ forwardRef(
71
73
  ...remainingProps
72
74
  } = props;
73
75
  const slots = getButtonSlots(children);
74
- const ariaDisabled = ariaDisabledProp === true || ariaDisabledProp === "true";
76
+ const ariaDisabled = parseBoolean(ariaDisabledProp);
75
77
  const nativeDisabledOrLoading = useMemo(
76
78
  () => loading ? true : disabled,
77
79
  [disabled, loading]
@@ -149,6 +151,7 @@ const _Button = /* @__PURE__ */ forwardRef(
149
151
  readOnly
150
152
  }),
151
153
  focusClassName,
154
+ inputGroupChildCSS,
152
155
  {
153
156
  [`${buttonWidthsCSS.content}`]: width === "content",
154
157
  [`${buttonWidthsCSS.full}`]: width === "full"
@@ -180,7 +183,8 @@ const _Button = /* @__PURE__ */ forwardRef(
180
183
  [`${buttonWidthsCSS.content}`]: width === "content",
181
184
  [`${buttonWidthsCSS.full}`]: width === "full"
182
185
  },
183
- focusClassName
186
+ focusClassName,
187
+ inputGroupChildCSS
184
188
  ),
185
189
  style: {
186
190
  width: width !== "content" && width !== "full" ? width : void 0,
@@ -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 React, {\n type ElementType,\n type MouseEventHandler,\n type PointerEvent,\n type ReactElement,\n type ReactNode,\n forwardRef,\n useMemo,\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 { 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/ban-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 */\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 React.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) {\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 readOnly,\n as,\n ...remainingProps\n }: ButtonProps<E> = props;\n const slots = getButtonSlots(children);\n\n const ariaDisabled =\n ariaDisabledProp === true || ariaDisabledProp === 'true';\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 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 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 variant={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 React, {\n type ElementType,\n type MouseEventHandler,\n type PointerEvent,\n type ReactElement,\n type ReactNode,\n forwardRef,\n useMemo,\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 { inputGroupChildCSS } from '../../layouts/input-group/InputGroup.sty.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 */\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 React.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 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 fieldColorsCSS({ variant, color, disabled: disabledOrLoading }),\n buttonCSS({\n disabled: disabledOrLoading,\n textAlign,\n size,\n readOnly,\n }),\n focusClassName,\n inputGroupChildCSS,\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 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 inputGroupChildCSS,\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 variant={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
  }