@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,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%;
@@ -44,8 +44,10 @@ var import_ProgressCircle = require("../../content/progress/ProgressCircle.js");
44
44
  var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
45
45
  var import_useFocusRing = require("../../core/styles/useFocusRing.js");
46
46
  var import_merge_props = require("../../core/utils/merge-props.js");
47
+ var import_parse_boolean = require("../../core/utils/parse-boolean.js");
47
48
  var import_Flex = require("../../layouts/flex/Flex.js");
48
49
  var import_Grid = require("../../layouts/grid/Grid.js");
50
+ var import_InputGroup_css = require("../../layouts/input-group/InputGroup.sty.js");
49
51
  var import_field_css = require("../../styles/field.sty.js");
50
52
  function getButtonSlots(children) {
51
53
  const slots = {};
@@ -67,7 +69,7 @@ function getButtonSlots(children) {
67
69
  break;
68
70
  }
69
71
  } else {
70
- if (child) {
72
+ if (child !== null && child !== void 0) {
71
73
  slots.freeform ??= [];
72
74
  slots.freeform.push(child);
73
75
  }
@@ -102,7 +104,7 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
102
104
  ...remainingProps
103
105
  } = props;
104
106
  const slots = getButtonSlots(children);
105
- const ariaDisabled = ariaDisabledProp === true || ariaDisabledProp === "true";
107
+ const ariaDisabled = (0, import_parse_boolean.parseBoolean)(ariaDisabledProp);
106
108
  const nativeDisabledOrLoading = (0, import_react.useMemo)(
107
109
  () => loading ? true : disabled,
108
110
  [disabled, loading]
@@ -180,6 +182,7 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
180
182
  readOnly
181
183
  }),
182
184
  focusClassName,
185
+ import_InputGroup_css.inputGroupChildCSS,
183
186
  {
184
187
  [`${import_Button_css.buttonWidthsCSS.content}`]: width === "content",
185
188
  [`${import_Button_css.buttonWidthsCSS.full}`]: width === "full"
@@ -211,7 +214,8 @@ const _Button = /* @__PURE__ */ (0, import_react.forwardRef)(
211
214
  [`${import_Button_css.buttonWidthsCSS.content}`]: width === "content",
212
215
  [`${import_Button_css.buttonWidthsCSS.full}`]: width === "full"
213
216
  },
214
- focusClassName
217
+ focusClassName,
218
+ import_InputGroup_css.inputGroupChildCSS
215
219
  ),
216
220
  style: {
217
221
  width: width !== "content" && width !== "full" ? width : void 0,
@@ -27,7 +27,7 @@ var import_ellipsis_css_ts_vanilla = require("../../styles/ellipsis.css");
27
27
  var import_field_css_ts_vanilla = require("../../styles/field.css");
28
28
  var import_Button_css_ts_vanilla = require("./Button.css");
29
29
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
30
- var buttonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Button_buttonCSS__10kgnsa0", variantClassNames: { textAlign: { start: "Button_buttonCSS_textAlign_start__10kgnsa1", center: "Button_buttonCSS_textAlign_center__10kgnsa2" }, size: { condensed: "Button_buttonCSS_size_condensed__10kgnsa3", "default": "Button_buttonCSS_size_default__10kgnsa4" }, disabled: { true: "Button_buttonCSS_disabled_true__10kgnsa5" }, readOnly: { true: "Button_buttonCSS_readOnly_true__10kgnsa6" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
31
- var buttonLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Button_buttonLabelCSS__10kgnsaa", variantClassNames: { textual: { true: "ellipsis_ellipsisCSS__oqqp1n0", false: "Button_buttonLabelCSS_textual_false__10kgnsac" } }, defaultVariants: {}, compoundVariants: [] });
32
- var buttonLoadingCSS = "Button_buttonLoadingCSS__10kgnsa9";
33
- var buttonWidthsCSS = { full: "Button_buttonWidthsCSS_full__10kgnsa7", content: "Button_buttonWidthsCSS_content__10kgnsa8" };
30
+ var buttonCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0", variantClassNames: { textAlign: { start: "_10kgnsa1", center: "_10kgnsa2" }, size: { condensed: "_10kgnsa3", "default": "_10kgnsa4" }, disabled: { true: "_10kgnsa5" }, readOnly: { true: "_10kgnsa6" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
31
+ var buttonLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsaa", variantClassNames: { textual: { true: "oqqp1n0", false: "_10kgnsac" } }, defaultVariants: {}, compoundVariants: [] });
32
+ var buttonLoadingCSS = "_10kgnsa9";
33
+ var buttonWidthsCSS = { full: "_10kgnsa7", content: "_10kgnsa8" };
@@ -32,7 +32,7 @@ function supportsPreventScroll() {
32
32
  return true;
33
33
  }
34
34
  });
35
- } catch (e) {
35
+ } catch {
36
36
  }
37
37
  }
38
38
  return supportsPreventScrollCached;
@@ -1,4 +1,4 @@
1
- @keyframes ProgressBar_indeterminateAnimationKeyframes__13n9uwh0 {
1
+ @keyframes _13n9uwh0 {
2
2
  0% {
3
3
  transform: translateX(-100%) scaleX(0);
4
4
  }
@@ -6,45 +6,45 @@
6
6
  transform: translateX(100%) scaleX(1.5);
7
7
  }
8
8
  }
9
- .ProgressBar_progressCSS__13n9uwh1 {
9
+ ._13n9uwh1 {
10
10
  width: 100%;
11
11
  border-radius: var(--dt-borders-radius-container-subdued, 8px);
12
12
  overflow: hidden;
13
13
  position: relative;
14
14
  }
15
- .ProgressBar_progressCSS_size_condensed__13n9uwh2 {
15
+ ._13n9uwh2 {
16
16
  height: 6px;
17
17
  }
18
- .ProgressBar_progressCSS_size_default__13n9uwh3 {
18
+ ._13n9uwh3 {
19
19
  height: 8px;
20
20
  }
21
- .ProgressBar_progressCSS_variant_onAccent__13n9uwh4 {
21
+ ._13n9uwh4 {
22
22
  background-color: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
23
23
  }
24
- .ProgressBar_progressCSS_variant_primary__13n9uwh5 {
24
+ ._13n9uwh5 {
25
25
  background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
26
26
  }
27
- .ProgressBar_progressCSS_variant_success__13n9uwh6 {
27
+ ._13n9uwh6 {
28
28
  background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
29
29
  }
30
- .ProgressBar_progressCSS_variant_warning__13n9uwh7 {
30
+ ._13n9uwh7 {
31
31
  background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
32
32
  }
33
- .ProgressBar_progressCSS_variant_critical__13n9uwh8 {
33
+ ._13n9uwh8 {
34
34
  background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
35
35
  }
36
- .ProgressBar_progressCSS_variant_neutral__13n9uwh9 {
36
+ ._13n9uwh9 {
37
37
  background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
38
38
  }
39
- .ProgressBar_progressBarFillCSS__13n9uwha {
39
+ ._13n9uwha {
40
40
  height: 100%;
41
41
  transition-duration: var(--dt-timings-fast-default, 170ms);
42
42
  transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
43
- background-color: var(--vars_borderColor__17bwkb02);
43
+ background-color: var(--_17bwkb02);
44
44
  }
45
- .ProgressBar_progressBarFillCSS_indeterminate_true__13n9uwhb {
45
+ ._13n9uwhb {
46
46
  width: 100%;
47
- animation-name: ProgressBar_indeterminateAnimationKeyframes__13n9uwh0;
47
+ animation-name: _13n9uwh0;
48
48
  animation-duration: var(--dt-timings-slow-gentle, 800ms);
49
49
  animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
50
50
  animation-iteration-count: infinite;
@@ -24,5 +24,5 @@ module.exports = __toCommonJS(ProgressBar_css_exports);
24
24
  var import_colorUtils_css_ts_vanilla = require("../../styles/colorUtils.css");
25
25
  var import_ProgressBar_css_ts_vanilla = require("./ProgressBar.css");
26
26
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
27
- var progressBarFillCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "ProgressBar_progressBarFillCSS__13n9uwha", variantClassNames: { indeterminate: { true: "ProgressBar_progressBarFillCSS_indeterminate_true__13n9uwhb" } }, defaultVariants: {}, compoundVariants: [] });
28
- var progressCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "ProgressBar_progressCSS__13n9uwh1", variantClassNames: { size: { condensed: "ProgressBar_progressCSS_size_condensed__13n9uwh2", "default": "ProgressBar_progressCSS_size_default__13n9uwh3" }, variant: { onAccent: "ProgressBar_progressCSS_variant_onAccent__13n9uwh4", primary: "ProgressBar_progressCSS_variant_primary__13n9uwh5", success: "ProgressBar_progressCSS_variant_success__13n9uwh6", warning: "ProgressBar_progressCSS_variant_warning__13n9uwh7", critical: "ProgressBar_progressCSS_variant_critical__13n9uwh8", neutral: "ProgressBar_progressCSS_variant_neutral__13n9uwh9" } }, defaultVariants: {}, compoundVariants: [] });
27
+ var progressBarFillCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_13n9uwha", variantClassNames: { indeterminate: { true: "_13n9uwhb" } }, defaultVariants: {}, compoundVariants: [] });
28
+ var progressCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_13n9uwh1", variantClassNames: { size: { condensed: "_13n9uwh2", "default": "_13n9uwh3" }, variant: { onAccent: "_13n9uwh4", primary: "_13n9uwh5", success: "_13n9uwh6", warning: "_13n9uwh7", critical: "_13n9uwh8", neutral: "_13n9uwh9" } }, defaultVariants: {}, compoundVariants: [] });
@@ -1,5 +1,5 @@
1
- .ProgressBarIcon_progressBarIconContainerCSS__szm9t40 {
1
+ .szm9t40 {
2
2
  display: flex;
3
3
  margin-left: auto;
4
- color: var(--vars_borderColor__17bwkb02);
4
+ color: var(--_17bwkb02);
5
5
  }
@@ -22,4 +22,4 @@ __export(ProgressBarIcon_css_exports, {
22
22
  module.exports = __toCommonJS(ProgressBarIcon_css_exports);
23
23
  var import_colorUtils_css_ts_vanilla = require("../../styles/colorUtils.css");
24
24
  var import_ProgressBarIcon_css_ts_vanilla = require("./ProgressBarIcon.css");
25
- var progressBarIconContainerCSS = "ProgressBarIcon_progressBarIconContainerCSS__szm9t40";
25
+ var progressBarIconContainerCSS = "szm9t40";
@@ -1,9 +1,9 @@
1
- .ProgressBarLabel_progressBarLabelCSS__1ceb8vp0 {
2
- color: var(--vars_text__6levse0);
1
+ ._1ceb8vp0 {
2
+ color: var(--_6levse0);
3
3
  }
4
- .ProgressBarLabel_progressBarLabelCSS_size_default__1ceb8vp2 {
4
+ ._1ceb8vp2 {
5
5
  word-break: break-word;
6
6
  }
7
- .ProgressBarLabel_progressBarLabelCSS_childIsText_false__1ceb8vp3 {
7
+ ._1ceb8vp3 {
8
8
  word-break: break-word;
9
9
  }
@@ -23,4 +23,4 @@ module.exports = __toCommonJS(ProgressBarLabel_css_exports);
23
23
  var import_container_css_ts_vanilla = require("../../styles/container.css");
24
24
  var import_ProgressBarLabel_css_ts_vanilla = require("./ProgressBarLabel.css");
25
25
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
26
- var progressBarLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "ProgressBarLabel_progressBarLabelCSS__1ceb8vp0", variantClassNames: { size: { condensed: "ProgressBarLabel_progressBarLabelCSS_size_condensed__1ceb8vp1", "default": "ProgressBarLabel_progressBarLabelCSS_size_default__1ceb8vp2" }, childIsText: { false: "ProgressBarLabel_progressBarLabelCSS_childIsText_false__1ceb8vp3" } }, defaultVariants: {}, compoundVariants: [] });
26
+ var progressBarLabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ceb8vp0", variantClassNames: { size: { condensed: "_1ceb8vp1", "default": "_1ceb8vp2" }, childIsText: { false: "_1ceb8vp3" } }, defaultVariants: {}, compoundVariants: [] });
@@ -1,28 +1,28 @@
1
- .ProgressBarValue_progressBarValueCSS_variant_onAccent__1ri4i7o1 {
1
+ ._1ri4i7o1 {
2
2
  color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
3
3
  }
4
- .ProgressBarValue_progressBarValueCSS_variant_primary__1ri4i7o2 {
4
+ ._1ri4i7o2 {
5
5
  color: var(--dt-colors-text-neutral-subdued, #545587);
6
6
  }
7
- .ProgressBarValue_progressBarValueCSS_variant_success__1ri4i7o3 {
7
+ ._1ri4i7o3 {
8
8
  color: var(--dt-colors-text-neutral-subdued, #545587);
9
9
  }
10
- .ProgressBarValue_progressBarValueCSS_variant_warning__1ri4i7o4 {
10
+ ._1ri4i7o4 {
11
11
  color: var(--dt-colors-text-neutral-subdued, #545587);
12
12
  }
13
- .ProgressBarValue_progressBarValueCSS_variant_critical__1ri4i7o5 {
13
+ ._1ri4i7o5 {
14
14
  color: var(--dt-colors-text-neutral-subdued, #545587);
15
15
  }
16
- .ProgressBarValue_progressBarValueCSS_variant_neutral__1ri4i7o6 {
16
+ ._1ri4i7o6 {
17
17
  color: var(--dt-colors-text-neutral-subdued, #545587);
18
18
  }
19
- .ProgressBarValue_progressBarValueCSS_size_default__1ri4i7o8 {
19
+ ._1ri4i7o8 {
20
20
  word-break: break-word;
21
21
  }
22
- .ProgressBarValue_progressBarValueCSS_childIsText_false__1ri4i7oa {
22
+ ._1ri4i7oa {
23
23
  word-break: break-word;
24
24
  }
25
- .ProgressBarValue_progressBarValueCSS_compound_0__1ri4i7ob {
25
+ ._1ri4i7ob {
26
26
  margin-left: auto;
27
27
  align-self: center;
28
28
  }
@@ -23,4 +23,4 @@ module.exports = __toCommonJS(ProgressBarValue_css_exports);
23
23
  var import_ellipsis_css_ts_vanilla = require("../../styles/ellipsis.css");
24
24
  var import_ProgressBarValue_css_ts_vanilla = require("./ProgressBarValue.css");
25
25
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
26
- var progressBarValueCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "ProgressBarValue__1ri4i7o0", variantClassNames: { variant: { onAccent: "ProgressBarValue_progressBarValueCSS_variant_onAccent__1ri4i7o1", primary: "ProgressBarValue_progressBarValueCSS_variant_primary__1ri4i7o2", success: "ProgressBarValue_progressBarValueCSS_variant_success__1ri4i7o3", warning: "ProgressBarValue_progressBarValueCSS_variant_warning__1ri4i7o4", critical: "ProgressBarValue_progressBarValueCSS_variant_critical__1ri4i7o5", neutral: "ProgressBarValue_progressBarValueCSS_variant_neutral__1ri4i7o6" }, size: { condensed: "ProgressBarValue_progressBarValueCSS_size_condensed__1ri4i7o7", "default": "ProgressBarValue_progressBarValueCSS_size_default__1ri4i7o8" }, childIsText: { true: "ProgressBarValue_progressBarValueCSS_childIsText_true__1ri4i7o9", false: "ProgressBarValue_progressBarValueCSS_childIsText_false__1ri4i7oa" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "ProgressBarValue_progressBarValueCSS_compound_0__1ri4i7ob ellipsis_ellipsisCSS__oqqp1n0"]] });
26
+ var progressBarValueCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ri4i7o0", variantClassNames: { variant: { onAccent: "_1ri4i7o1", primary: "_1ri4i7o2", success: "_1ri4i7o3", warning: "_1ri4i7o4", critical: "_1ri4i7o5", neutral: "_1ri4i7o6" }, size: { condensed: "_1ri4i7o7", "default": "_1ri4i7o8" }, childIsText: { true: "_1ri4i7o9", false: "_1ri4i7oa" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7ob oqqp1n0"]] });
@@ -1,4 +1,4 @@
1
- @keyframes ProgressCircle_circularIndeterminateKeyframes__kvldjh0 {
1
+ @keyframes kvldjh0 {
2
2
  0% {
3
3
  transform: rotate(0deg);
4
4
  }
@@ -6,47 +6,47 @@
6
6
  transform: rotate(360deg);
7
7
  }
8
8
  }
9
- .ProgressCircle_progressCircleRootCSS__kvldjh1 {
9
+ .kvldjh1 {
10
10
  display: inline-block;
11
- color: var(--vars_borderColor__17bwkb02);
11
+ color: var(--_17bwkb02);
12
12
  }
13
- .ProgressCircle_ProgressCircleSVGCSS__kvldjh2 {
13
+ .kvldjh2 {
14
14
  display: block;
15
15
  transform: rotate(-90deg);
16
16
  }
17
- .ProgressCircle_progressCircleCSS__kvldjh3 {
17
+ .kvldjh3 {
18
18
  stroke: currentColor;
19
19
  transform-origin: center;
20
20
  }
21
- .ProgressCircle_progressCircleCSS_indeterminate_true__kvldjh4 {
21
+ .kvldjh4 {
22
22
  stroke-dasharray: 90 360;
23
23
  transform-origin: 50 50;
24
- animation-name: ProgressCircle_circularIndeterminateKeyframes__kvldjh0;
24
+ animation-name: kvldjh0;
25
25
  animation-duration: var(--dt-timings-slow-gentle, 800ms);
26
26
  animation-timing-function: cubic-bezier(0.5, 0.15, 0.5, 0.8);
27
27
  animation-iteration-count: infinite;
28
28
  }
29
- .ProgressCircle_progressCircleCSS_indeterminate_false__kvldjh5 {
29
+ .kvldjh5 {
30
30
  animation-duration: var(--dt-timings-fast-moderate, 200ms);
31
31
  transition-property: stroke-dashoffset;
32
32
  }
33
- .ProgressCircle_progressCircleBackgroundCSS__kvldjh6 {
33
+ .kvldjh6 {
34
34
  stroke: var(--dt-colors-border-neutral-default, #d2d3e1);
35
35
  }
36
- .ProgressCircle_progressCircleBackgroundCSS_variant_onAccent__kvldjh7 {
36
+ .kvldjh7 {
37
37
  stroke: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
38
38
  }
39
- .ProgressCircle_progressCircleContainerCSS__kvldjhd {
39
+ .kvldjhd {
40
40
  display: flex;
41
41
  flex-direction: column;
42
42
  align-items: center;
43
43
  }
44
- .ProgressCircle_progressCircleContainerCSS_size_small__kvldjhe {
44
+ .kvldjhe {
45
45
  gap: var(--dt-spacings-size-8, 8px);
46
46
  }
47
- .ProgressCircle_progressCircleContainerCSS_size_large__kvldjhf {
47
+ .kvldjhf {
48
48
  gap: var(--dt-spacings-size-12, 12px);
49
49
  }
50
- .ProgressCircle_progressCircleChildCSS__kvldjhg {
51
- color: var(--vars_text__6levse0);
50
+ .kvldjhg {
51
+ color: var(--_6levse0);
52
52
  }
@@ -29,9 +29,9 @@ var import_colorUtils_css_ts_vanilla = require("../../styles/colorUtils.css");
29
29
  var import_container_css_ts_vanilla = require("../../styles/container.css");
30
30
  var import_ProgressCircle_css_ts_vanilla = require("./ProgressCircle.css");
31
31
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
32
- var ProgressCircleSVGCSS = "ProgressCircle_ProgressCircleSVGCSS__kvldjh2";
33
- var progressCircleBackgroundCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "ProgressCircle_progressCircleBackgroundCSS__kvldjh6", variantClassNames: { variant: { onAccent: "ProgressCircle_progressCircleBackgroundCSS_variant_onAccent__kvldjh7", primary: "ProgressCircle_progressCircleBackgroundCSS_variant_primary__kvldjh8", success: "ProgressCircle_progressCircleBackgroundCSS_variant_success__kvldjh9", warning: "ProgressCircle_progressCircleBackgroundCSS_variant_warning__kvldjha", critical: "ProgressCircle_progressCircleBackgroundCSS_variant_critical__kvldjhb", neutral: "ProgressCircle_progressCircleBackgroundCSS_variant_neutral__kvldjhc" } }, defaultVariants: {}, compoundVariants: [] });
34
- var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "ProgressCircle_progressCircleCSS__kvldjh3", variantClassNames: { indeterminate: { true: "ProgressCircle_progressCircleCSS_indeterminate_true__kvldjh4", false: "ProgressCircle_progressCircleCSS_indeterminate_false__kvldjh5" } }, defaultVariants: {}, compoundVariants: [] });
35
- var progressCircleChildCSS = "ProgressCircle_progressCircleChildCSS__kvldjhg";
36
- var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "ProgressCircle_progressCircleContainerCSS__kvldjhd", variantClassNames: { size: { small: "ProgressCircle_progressCircleContainerCSS_size_small__kvldjhe", large: "ProgressCircle_progressCircleContainerCSS_size_large__kvldjhf" } }, defaultVariants: {}, compoundVariants: [] });
37
- var progressCircleRootCSS = "ProgressCircle_progressCircleRootCSS__kvldjh1";
32
+ var ProgressCircleSVGCSS = "kvldjh2";
33
+ var progressCircleBackgroundCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "kvldjh6", variantClassNames: { variant: { onAccent: "kvldjh7", primary: "kvldjh8", success: "kvldjh9", warning: "kvldjha", critical: "kvldjhb", neutral: "kvldjhc" } }, defaultVariants: {}, compoundVariants: [] });
34
+ var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "kvldjh3", variantClassNames: { indeterminate: { true: "kvldjh4", false: "kvldjh5" } }, defaultVariants: {}, compoundVariants: [] });
35
+ var progressCircleChildCSS = "kvldjhg";
36
+ var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "kvldjhd", variantClassNames: { size: { small: "kvldjhe", large: "kvldjhf" } }, defaultVariants: {}, compoundVariants: [] });
37
+ var progressCircleRootCSS = "kvldjh1";
@@ -1,4 +1,4 @@
1
- @keyframes Skeleton_skeletonAnimationKeyframes__1a1ozfd0 {
1
+ @keyframes _1a1ozfd0 {
2
2
  0% {
3
3
  transform: translateX(-100%) scaleX(0);
4
4
  }
@@ -6,12 +6,12 @@
6
6
  transform: translateX(100%) scaleX(1.5);
7
7
  }
8
8
  }
9
- .Skeleton_skeletonPlaceholderCSS__1a1ozfd1 {
9
+ ._1a1ozfd1 {
10
10
  position: relative;
11
11
  overflow: hidden;
12
12
  background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
13
13
  }
14
- .Skeleton_skeletonPlaceholderCSS__1a1ozfd1:after {
14
+ ._1a1ozfd1:after {
15
15
  content: "";
16
16
  position: absolute;
17
17
  top: 0;
@@ -21,13 +21,13 @@
21
21
  background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
22
22
  animation-iteration-count: infinite;
23
23
  transform-origin: left center;
24
- animation-name: Skeleton_skeletonAnimationKeyframes__1a1ozfd0;
24
+ animation-name: _1a1ozfd0;
25
25
  animation-duration: var(--dt-timings-slow-gentle, 800ms);
26
26
  animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
27
27
  }
28
- .Skeleton_skeletonPlaceholderCSS_variant_default__1a1ozfd2 {
28
+ ._1a1ozfd2 {
29
29
  border-radius: var(--dt-borders-radius-container-subdued, 8px);
30
30
  }
31
- .Skeleton_skeletonPlaceholderCSS_variant_rounded__1a1ozfd3 {
31
+ ._1a1ozfd3 {
32
32
  border-radius: 9999px;
33
33
  }
@@ -22,4 +22,4 @@ __export(Skeleton_css_exports, {
22
22
  module.exports = __toCommonJS(Skeleton_css_exports);
23
23
  var import_Skeleton_css_ts_vanilla = require("./Skeleton.css");
24
24
  var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
25
- var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "Skeleton_skeletonPlaceholderCSS__1a1ozfd1", variantClassNames: { variant: { "default": "Skeleton_skeletonPlaceholderCSS_variant_default__1a1ozfd2", rounded: "Skeleton_skeletonPlaceholderCSS_variant_rounded__1a1ozfd3" } }, defaultVariants: {}, compoundVariants: [] });
25
+ var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd1", variantClassNames: { variant: { "default": "_1a1ozfd2", rounded: "_1a1ozfd3" } }, defaultVariants: {}, compoundVariants: [] });
@@ -1,6 +1,6 @@
1
1
  import React, { type PropsWithChildren } from 'react';
2
2
  import 'wicg-inert';
3
- import './AppRoot.css.js';
3
+ import './AppRoot.sty.js';
4
4
  import { type DataTestId } from '../../types/data-props.js';
5
5
  import { type MaskingProps } from '../../types/masking-props.js';
6
6
  import { type StylingProps } from '../../types/styling-props.js';
@@ -60,7 +60,7 @@ const AppRoot = /* @__PURE__ */ (0, import_react.forwardRef)(
60
60
  let timezone = (0, import_user_preferences.getTimezone)();
61
61
  try {
62
62
  new Intl.DateTimeFormat(language, { timeZone: timezone });
63
- } catch (error) {
63
+ } catch {
64
64
  timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
65
65
  }
66
66
  (0, import_react.useLayoutEffect)(() => {
package/core/index.d.ts CHANGED
@@ -27,3 +27,4 @@ export { roleVariants } from './types/role-variant.js';
27
27
  export type { RoleVariantType } from './types/role-variant.js';
28
28
  export { uuidv4 as _uuidv4 } from './utils/uuidv4.js';
29
29
  export { isStringChildren as _isStringChildren } from './utils/_is-string-children.js';
30
+ export { parseBoolean as _parseBoolean } from './utils/parse-boolean.js';
package/core/index.js CHANGED
@@ -28,6 +28,7 @@ __export(core_exports, {
28
28
  _isFocusable: () => import_is_focusable.isFocusable,
29
29
  _isStringChildren: () => import_is_string_children.isStringChildren,
30
30
  _mergeProps: () => import_merge_props.mergeProps,
31
+ _parseBoolean: () => import_parse_boolean.parseBoolean,
31
32
  _useAriaLabelingProps: () => import_useAriaLabelingProps.useAriaLabelingProps,
32
33
  _useFocusContext: () => import_useFocusContext.useFocusContext,
33
34
  _useId: () => import_useId.useId,
@@ -55,3 +56,4 @@ var import_useSafeForwardProps = require("./hooks/useSafeForwardProps.js");
55
56
  var import_role_variant = require("./types/role-variant.js");
56
57
  var import_uuidv4 = require("./utils/uuidv4.js");
57
58
  var import_is_string_children = require("./utils/_is-string-children.js");
59
+ var import_parse_boolean = require("./utils/parse-boolean.js");