@dynatrace/strato-components 0.84.31 → 0.84.51

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 (404) hide show
  1. package/content/index.d.ts +7 -0
  2. package/content/index.js +25 -0
  3. package/content/progress/ProgressBar.css +52 -0
  4. package/content/progress/ProgressBar.d.ts +56 -0
  5. package/content/progress/ProgressBar.js +191 -0
  6. package/content/progress/ProgressBar.sty.d.ts +42 -0
  7. package/content/progress/ProgressBar.sty.js +28 -0
  8. package/content/progress/ProgressBarIcon.css +5 -0
  9. package/content/progress/ProgressBarIcon.d.ts +15 -0
  10. package/content/progress/ProgressBarIcon.js +68 -0
  11. package/content/progress/ProgressBarIcon.sty.d.ts +1 -0
  12. package/content/progress/ProgressBarIcon.sty.js +25 -0
  13. package/content/progress/ProgressBarLabel.css +9 -0
  14. package/content/progress/ProgressBarLabel.d.ts +15 -0
  15. package/content/progress/ProgressBarLabel.js +75 -0
  16. package/content/progress/ProgressBarLabel.sty.d.ts +13 -0
  17. package/content/progress/ProgressBarLabel.sty.js +26 -0
  18. package/content/progress/ProgressBarValue.css +28 -0
  19. package/content/progress/ProgressBarValue.d.ts +15 -0
  20. package/content/progress/ProgressBarValue.js +72 -0
  21. package/content/progress/ProgressBarValue.sty.d.ts +34 -0
  22. package/content/progress/ProgressBarValue.sty.js +26 -0
  23. package/content/progress/ProgressCircle.css +52 -0
  24. package/content/progress/ProgressCircle.d.ts +51 -0
  25. package/content/progress/ProgressCircle.js +174 -0
  26. package/content/progress/ProgressCircle.sty.d.ts +41 -0
  27. package/content/progress/ProgressCircle.sty.js +37 -0
  28. package/content/progress/contexts/SharedProgressBarPropsContext.d.ts +9 -0
  29. package/content/progress/contexts/SharedProgressBarPropsContext.js +38 -0
  30. package/content/progress/hooks/useProgressAriaProps.d.ts +38 -0
  31. package/content/progress/hooks/useProgressAriaProps.js +63 -0
  32. package/content/progress/hooks/useProgressBarPropsContext.d.ts +2 -0
  33. package/content/progress/hooks/useProgressBarPropsContext.js +32 -0
  34. package/content/progress/utils.d.ts +2 -0
  35. package/content/progress/utils.js +50 -0
  36. package/core/components/app-root/AppRoot.d.ts +4 -4
  37. package/core/hooks/useAriaLabelingProps.d.ts +6 -0
  38. package/core/hooks/useAriaLabelingProps.js +30 -0
  39. package/core/hooks/useCurrentTheme.d.ts +1 -1
  40. package/core/hooks/useFontsUpdated.d.ts +9 -0
  41. package/core/hooks/useFontsUpdated.js +51 -0
  42. package/core/hooks/useId.d.ts +12 -0
  43. package/core/hooks/useId.js +32 -0
  44. package/core/hooks/useMergeRefs.d.ts +7 -0
  45. package/core/hooks/useMergeRefs.js +34 -0
  46. package/core/hooks/useSafeForwardProps.d.ts +10 -0
  47. package/core/hooks/useSafeForwardProps.js +34 -0
  48. package/core/index.d.ts +12 -0
  49. package/core/index.js +12 -0
  50. package/core/styles/focusRing.css +88 -0
  51. package/core/styles/focusRing.sty.d.ts +96 -0
  52. package/core/styles/focusRing.sty.js +27 -0
  53. package/core/styles/useFocusRing.d.ts +49 -0
  54. package/core/styles/useFocusRing.js +83 -0
  55. package/core/types/a11y-props.d.ts +26 -0
  56. package/core/types/a11y-props.js +15 -0
  57. package/core/types/data-props.d.ts +1 -1
  58. package/core/types/dom.d.ts +8 -0
  59. package/core/types/dom.js +15 -0
  60. package/core/types/heading.d.ts +9 -0
  61. package/core/types/heading.js +15 -0
  62. package/core/types/masking-props.d.ts +2 -1
  63. package/core/types/polymorph.d.ts +28 -0
  64. package/core/types/polymorph.js +15 -0
  65. package/core/types/role-variant.d.ts +10 -0
  66. package/core/types/role-variant.js +30 -0
  67. package/core/types/styling-props.d.ts +1 -1
  68. package/core/types/with-children.d.ts +1 -1
  69. package/core/utils/_is-string-children.d.ts +6 -0
  70. package/core/utils/_is-string-children.js +44 -0
  71. package/core/utils/colorUtils.css +80 -0
  72. package/core/utils/colorUtils.sty.d.ts +48 -0
  73. package/core/utils/colorUtils.sty.js +27 -0
  74. package/core/utils/isBrowser.d.ts +1 -1
  75. package/core/utils/merge-props.d.ts +4 -5
  76. package/core/utils/seed-random.d.ts +5 -0
  77. package/core/utils/seed-random.js +34 -0
  78. package/core/utils/uuidv4.d.ts +5 -0
  79. package/core/utils/uuidv4.js +31 -0
  80. package/esm/content/index.js +7 -0
  81. package/esm/content/index.js.map +7 -0
  82. package/esm/content/progress/ProgressBar.css +52 -0
  83. package/esm/content/progress/ProgressBar.js +163 -0
  84. package/esm/content/progress/ProgressBar.js.map +7 -0
  85. package/esm/content/progress/ProgressBar.sty.js +10 -0
  86. package/esm/content/progress/ProgressBar.sty.js.map +7 -0
  87. package/esm/content/progress/ProgressBarIcon.css +5 -0
  88. package/esm/content/progress/ProgressBarIcon.js +40 -0
  89. package/esm/content/progress/ProgressBarIcon.js.map +7 -0
  90. package/esm/content/progress/ProgressBarIcon.sty.js +7 -0
  91. package/esm/content/progress/ProgressBarIcon.sty.js.map +7 -0
  92. package/esm/content/progress/ProgressBarLabel.css +9 -0
  93. package/esm/content/progress/ProgressBarLabel.js +47 -0
  94. package/esm/content/progress/ProgressBarLabel.js.map +7 -0
  95. package/esm/content/progress/ProgressBarLabel.sty.js +8 -0
  96. package/esm/content/progress/ProgressBarLabel.sty.js.map +7 -0
  97. package/esm/content/progress/ProgressBarValue.css +28 -0
  98. package/esm/content/progress/ProgressBarValue.js +44 -0
  99. package/esm/content/progress/ProgressBarValue.js.map +7 -0
  100. package/esm/content/progress/ProgressBarValue.sty.js +8 -0
  101. package/esm/content/progress/ProgressBarValue.sty.js.map +7 -0
  102. package/esm/content/progress/ProgressCircle.css +52 -0
  103. package/esm/content/progress/ProgressCircle.js +153 -0
  104. package/esm/content/progress/ProgressCircle.js.map +7 -0
  105. package/esm/content/progress/ProgressCircle.sty.js +19 -0
  106. package/esm/content/progress/ProgressCircle.sty.js.map +7 -0
  107. package/esm/content/progress/contexts/SharedProgressBarPropsContext.js +10 -0
  108. package/esm/content/progress/contexts/SharedProgressBarPropsContext.js.map +7 -0
  109. package/esm/content/progress/hooks/useProgressAriaProps.js +45 -0
  110. package/esm/content/progress/hooks/useProgressAriaProps.js.map +7 -0
  111. package/esm/content/progress/hooks/useProgressBarPropsContext.js +16 -0
  112. package/esm/content/progress/hooks/useProgressBarPropsContext.js.map +7 -0
  113. package/esm/content/progress/utils.js +22 -0
  114. package/esm/content/progress/utils.js.map +7 -0
  115. package/esm/core/components/app-root/AppRoot.js.map +1 -1
  116. package/esm/core/hooks/useAriaLabelingProps.js +12 -0
  117. package/esm/core/hooks/useAriaLabelingProps.js.map +7 -0
  118. package/esm/core/hooks/useCurrentTheme.js.map +1 -1
  119. package/esm/core/hooks/useFontsUpdated.js +33 -0
  120. package/esm/core/hooks/useFontsUpdated.js.map +7 -0
  121. package/esm/core/hooks/useId.js +14 -0
  122. package/esm/core/hooks/useId.js.map +7 -0
  123. package/esm/core/hooks/useMergeRefs.js +16 -0
  124. package/esm/core/hooks/useMergeRefs.js.map +7 -0
  125. package/esm/core/hooks/useSafeForwardProps.js +16 -0
  126. package/esm/core/hooks/useSafeForwardProps.js.map +7 -0
  127. package/esm/core/index.js +12 -0
  128. package/esm/core/index.js.map +2 -2
  129. package/esm/core/styles/focusRing.css +88 -0
  130. package/esm/core/styles/focusRing.sty.js +9 -0
  131. package/esm/core/styles/focusRing.sty.js.map +7 -0
  132. package/esm/core/styles/useFocusRing.js +69 -0
  133. package/esm/core/styles/useFocusRing.js.map +7 -0
  134. package/esm/core/types/a11y-props.js +1 -0
  135. package/esm/core/types/a11y-props.js.map +7 -0
  136. package/esm/core/types/dom.js +1 -0
  137. package/esm/core/types/dom.js.map +7 -0
  138. package/esm/core/types/heading.js +1 -0
  139. package/esm/core/types/heading.js.map +7 -0
  140. package/esm/core/types/polymorph.js +1 -0
  141. package/esm/core/types/polymorph.js.map +7 -0
  142. package/esm/core/types/role-variant.js +12 -0
  143. package/esm/core/types/role-variant.js.map +7 -0
  144. package/esm/core/utils/_is-string-children.js +16 -0
  145. package/esm/core/utils/_is-string-children.js.map +7 -0
  146. package/esm/core/utils/colorUtils.css +80 -0
  147. package/esm/core/utils/colorUtils.sty.js +9 -0
  148. package/esm/core/utils/colorUtils.sty.js.map +7 -0
  149. package/esm/core/utils/isBrowser.js.map +1 -1
  150. package/esm/core/utils/merge-props.js.map +2 -2
  151. package/esm/core/utils/seed-random.js +16 -0
  152. package/esm/core/utils/seed-random.js.map +7 -0
  153. package/esm/core/utils/uuidv4.js +13 -0
  154. package/esm/core/utils/uuidv4.js.map +7 -0
  155. package/esm/index.js +4 -0
  156. package/esm/index.js.map +2 -2
  157. package/esm/layouts/Divider/Divider.css +23 -0
  158. package/esm/layouts/Divider/Divider.js +39 -0
  159. package/esm/layouts/Divider/Divider.js.map +7 -0
  160. package/esm/layouts/Divider/Divider.sty.js +8 -0
  161. package/esm/layouts/Divider/Divider.sty.js.map +7 -0
  162. package/esm/layouts/container/Container.css +8 -0
  163. package/esm/layouts/container/Container.js +55 -0
  164. package/esm/layouts/container/Container.js.map +7 -0
  165. package/esm/layouts/container/Container.sty.js +7 -0
  166. package/esm/layouts/container/Container.sty.js.map +7 -0
  167. package/esm/layouts/flex/Flex.js +46 -0
  168. package/esm/layouts/flex/Flex.js.map +7 -0
  169. package/esm/layouts/grid/Grid.js +46 -0
  170. package/esm/layouts/grid/Grid.js.map +7 -0
  171. package/esm/layouts/index.js +11 -0
  172. package/esm/layouts/index.js.map +7 -0
  173. package/esm/styles/colorUtils.css +80 -0
  174. package/esm/styles/colorUtils.sty.js +9 -0
  175. package/esm/styles/colorUtils.sty.js.map +7 -0
  176. package/esm/styles/container.css +64 -0
  177. package/esm/styles/container.sty.js +9 -0
  178. package/esm/styles/container.sty.js.map +7 -0
  179. package/esm/styles/ellipsis.css +5 -0
  180. package/esm/styles/ellipsis.sty.js +6 -0
  181. package/esm/styles/ellipsis.sty.js.map +7 -0
  182. package/esm/styles/extract-util.js +15 -0
  183. package/esm/styles/extract-util.js.map +7 -0
  184. package/esm/styles/getFlexStyles.js +69 -0
  185. package/esm/styles/getFlexStyles.js.map +7 -0
  186. package/esm/styles/getGapSprinkles.js +18 -0
  187. package/esm/styles/getGapSprinkles.js.map +7 -0
  188. package/esm/styles/getGridFlexPositionSprinkles.js +25 -0
  189. package/esm/styles/getGridFlexPositionSprinkles.js.map +7 -0
  190. package/esm/styles/getGridStyles.js +78 -0
  191. package/esm/styles/getGridStyles.js.map +7 -0
  192. package/esm/styles/getLayoutSizeStyles.js +21 -0
  193. package/esm/styles/getLayoutSizeStyles.js.map +7 -0
  194. package/esm/styles/getSpacingSprinkles.js +50 -0
  195. package/esm/styles/getSpacingSprinkles.js.map +7 -0
  196. package/esm/styles/index.js +49 -0
  197. package/esm/styles/index.js.map +7 -0
  198. package/esm/styles/safe-sprinkles.js +17 -0
  199. package/esm/styles/safe-sprinkles.js.map +7 -0
  200. package/esm/styles/sprinkle-properties.js +137 -0
  201. package/esm/styles/sprinkle-properties.js.map +7 -0
  202. package/esm/styles/sprinkles.css +786 -0
  203. package/esm/styles/sprinkles.sty.js +9 -0
  204. package/esm/styles/sprinkles.sty.js.map +7 -0
  205. package/esm/styles/textStyle.css +64 -0
  206. package/esm/styles/textStyle.sty.js +7 -0
  207. package/esm/styles/textStyle.sty.js.map +7 -0
  208. package/esm/typography/BlockQuote/Blockquote.css +17 -0
  209. package/esm/typography/BlockQuote/Blockquote.js +34 -0
  210. package/esm/typography/BlockQuote/Blockquote.js.map +7 -0
  211. package/esm/typography/BlockQuote/Blockquote.sty.js +6 -0
  212. package/esm/typography/BlockQuote/Blockquote.sty.js.map +7 -0
  213. package/esm/typography/Code/Code.css +16 -0
  214. package/esm/typography/Code/Code.js +34 -0
  215. package/esm/typography/Code/Code.js.map +7 -0
  216. package/esm/typography/Code/Code.sty.js +6 -0
  217. package/esm/typography/Code/Code.sty.js.map +7 -0
  218. package/esm/typography/Emphasis/Emphasis.css +4 -0
  219. package/esm/typography/Emphasis/Emphasis.js +34 -0
  220. package/esm/typography/Emphasis/Emphasis.js.map +7 -0
  221. package/esm/typography/Emphasis/Emphasis.sty.js +6 -0
  222. package/esm/typography/Emphasis/Emphasis.sty.js.map +7 -0
  223. package/esm/typography/ExternalLink/ExternalLink.css +28 -0
  224. package/esm/typography/ExternalLink/ExternalLink.js +56 -0
  225. package/esm/typography/ExternalLink/ExternalLink.js.map +7 -0
  226. package/esm/typography/ExternalLink/ExternalLink.sty.js +6 -0
  227. package/esm/typography/ExternalLink/ExternalLink.sty.js.map +7 -0
  228. package/esm/typography/Heading/Heading.css +54 -0
  229. package/esm/typography/Heading/Heading.js +36 -0
  230. package/esm/typography/Heading/Heading.js.map +7 -0
  231. package/esm/typography/Heading/Heading.sty.js +7 -0
  232. package/esm/typography/Heading/Heading.sty.js.map +7 -0
  233. package/esm/typography/Highlight/Highlight.css +4 -0
  234. package/esm/typography/Highlight/Highlight.js +111 -0
  235. package/esm/typography/Highlight/Highlight.js.map +7 -0
  236. package/esm/typography/Highlight/Highlight.sty.js +6 -0
  237. package/esm/typography/Highlight/Highlight.sty.js.map +7 -0
  238. package/esm/typography/Link/Link.css +15 -0
  239. package/esm/typography/Link/Link.js +49 -0
  240. package/esm/typography/Link/Link.js.map +7 -0
  241. package/esm/typography/Link/Link.sty.js +6 -0
  242. package/esm/typography/Link/Link.sty.js.map +7 -0
  243. package/esm/typography/List/List.css +16 -0
  244. package/esm/typography/List/List.js +81 -0
  245. package/esm/typography/List/List.js.map +7 -0
  246. package/esm/typography/List/List.sty.js +8 -0
  247. package/esm/typography/List/List.sty.js.map +7 -0
  248. package/esm/typography/Paragraph/Paragraph.css +19 -0
  249. package/esm/typography/Paragraph/Paragraph.js +49 -0
  250. package/esm/typography/Paragraph/Paragraph.js.map +7 -0
  251. package/esm/typography/Paragraph/Paragraph.sty.js +7 -0
  252. package/esm/typography/Paragraph/Paragraph.sty.js.map +7 -0
  253. package/esm/typography/Strikethrough/Strikethrough.css +5 -0
  254. package/esm/typography/Strikethrough/Strikethrough.js +32 -0
  255. package/esm/typography/Strikethrough/Strikethrough.js.map +7 -0
  256. package/esm/typography/Strikethrough/Strikethrough.sty.js +6 -0
  257. package/esm/typography/Strikethrough/Strikethrough.sty.js.map +7 -0
  258. package/esm/typography/Strong/Strong.css +4 -0
  259. package/esm/typography/Strong/Strong.js +34 -0
  260. package/esm/typography/Strong/Strong.js.map +7 -0
  261. package/esm/typography/Strong/Strong.sty.js +6 -0
  262. package/esm/typography/Strong/Strong.sty.js.map +7 -0
  263. package/esm/typography/Text/Text.css +18 -0
  264. package/esm/typography/Text/Text.js +43 -0
  265. package/esm/typography/Text/Text.js.map +7 -0
  266. package/esm/typography/Text/Text.sty.js +7 -0
  267. package/esm/typography/Text/Text.sty.js.map +7 -0
  268. package/esm/typography/TextEllipsis/TextEllipsis.css +22 -0
  269. package/esm/typography/TextEllipsis/TextEllipsis.js +143 -0
  270. package/esm/typography/TextEllipsis/TextEllipsis.js.map +7 -0
  271. package/esm/typography/TextEllipsis/TextEllipsis.sty.js +7 -0
  272. package/esm/typography/TextEllipsis/TextEllipsis.sty.js.map +7 -0
  273. package/esm/typography/index.js +43 -0
  274. package/esm/typography/index.js.map +7 -0
  275. package/esm/typography/utils.js +101 -0
  276. package/esm/typography/utils.js.map +7 -0
  277. package/index.d.ts +4 -0
  278. package/index.js +4 -0
  279. package/lang/en.json +12 -0
  280. package/lang/uncompiled/en.json +10 -1
  281. package/layouts/Divider/Divider.css +23 -0
  282. package/layouts/Divider/Divider.d.ts +39 -0
  283. package/layouts/Divider/Divider.js +67 -0
  284. package/layouts/Divider/Divider.sty.d.ts +16 -0
  285. package/layouts/Divider/Divider.sty.js +26 -0
  286. package/layouts/container/Container.css +8 -0
  287. package/layouts/container/Container.d.ts +34 -0
  288. package/layouts/container/Container.js +80 -0
  289. package/layouts/container/Container.sty.d.ts +1 -0
  290. package/layouts/container/Container.sty.js +25 -0
  291. package/layouts/flex/Flex.d.ts +23 -0
  292. package/layouts/flex/Flex.js +72 -0
  293. package/layouts/grid/Grid.d.ts +23 -0
  294. package/layouts/grid/Grid.js +72 -0
  295. package/layouts/index.d.ts +6 -0
  296. package/layouts/index.js +29 -0
  297. package/package.json +34 -4
  298. package/styles/colorUtils.css +80 -0
  299. package/styles/colorUtils.sty.d.ts +56 -0
  300. package/styles/colorUtils.sty.js +27 -0
  301. package/styles/container.css +64 -0
  302. package/styles/container.sty.d.ts +54 -0
  303. package/styles/container.sty.js +27 -0
  304. package/styles/ellipsis.css +5 -0
  305. package/styles/ellipsis.sty.d.ts +5 -0
  306. package/styles/ellipsis.sty.js +24 -0
  307. package/styles/extract-util.d.ts +9 -0
  308. package/styles/extract-util.js +33 -0
  309. package/styles/getFlexStyles.d.ts +64 -0
  310. package/styles/getFlexStyles.js +95 -0
  311. package/styles/getGapSprinkles.d.ts +19 -0
  312. package/styles/getGapSprinkles.js +36 -0
  313. package/styles/getGridFlexPositionSprinkles.d.ts +35 -0
  314. package/styles/getGridFlexPositionSprinkles.js +43 -0
  315. package/styles/getGridStyles.d.ts +74 -0
  316. package/styles/getGridStyles.js +100 -0
  317. package/styles/getLayoutSizeStyles.d.ts +29 -0
  318. package/styles/getLayoutSizeStyles.js +39 -0
  319. package/styles/getSpacingSprinkles.d.ts +74 -0
  320. package/styles/getSpacingSprinkles.js +68 -0
  321. package/styles/index.d.ts +11 -0
  322. package/styles/index.js +47 -0
  323. package/styles/safe-sprinkles.d.ts +6 -0
  324. package/styles/safe-sprinkles.js +35 -0
  325. package/styles/sprinkle-properties.d.ts +257 -0
  326. package/styles/sprinkle-properties.js +165 -0
  327. package/styles/sprinkles.css +786 -0
  328. package/styles/sprinkles.sty.d.ts +913 -0
  329. package/styles/sprinkles.sty.js +27 -0
  330. package/styles/textStyle.css +64 -0
  331. package/styles/textStyle.sty.d.ts +13 -0
  332. package/styles/textStyle.sty.js +25 -0
  333. package/testing/mocks/canvas-mock.js +6 -1
  334. package/testing/mocks/text-ellipsis-mock.d.ts +1 -1
  335. package/testing/mocks/text-ellipsis-mock.js +8 -3
  336. package/typography/BlockQuote/Blockquote.css +17 -0
  337. package/typography/BlockQuote/Blockquote.d.ts +19 -0
  338. package/typography/BlockQuote/Blockquote.js +62 -0
  339. package/typography/BlockQuote/Blockquote.sty.d.ts +1 -0
  340. package/typography/BlockQuote/Blockquote.sty.js +24 -0
  341. package/typography/Code/Code.css +16 -0
  342. package/typography/Code/Code.d.ts +17 -0
  343. package/typography/Code/Code.js +62 -0
  344. package/typography/Code/Code.sty.d.ts +1 -0
  345. package/typography/Code/Code.sty.js +24 -0
  346. package/typography/Emphasis/Emphasis.css +4 -0
  347. package/typography/Emphasis/Emphasis.d.ts +14 -0
  348. package/typography/Emphasis/Emphasis.js +62 -0
  349. package/typography/Emphasis/Emphasis.sty.d.ts +1 -0
  350. package/typography/Emphasis/Emphasis.sty.js +24 -0
  351. package/typography/ExternalLink/ExternalLink.css +28 -0
  352. package/typography/ExternalLink/ExternalLink.d.ts +21 -0
  353. package/typography/ExternalLink/ExternalLink.js +82 -0
  354. package/typography/ExternalLink/ExternalLink.sty.d.ts +1 -0
  355. package/typography/ExternalLink/ExternalLink.sty.js +24 -0
  356. package/typography/Heading/Heading.css +54 -0
  357. package/typography/Heading/Heading.d.ts +24 -0
  358. package/typography/Heading/Heading.js +64 -0
  359. package/typography/Heading/Heading.sty.d.ts +52 -0
  360. package/typography/Heading/Heading.sty.js +25 -0
  361. package/typography/Highlight/Highlight.css +4 -0
  362. package/typography/Highlight/Highlight.d.ts +27 -0
  363. package/typography/Highlight/Highlight.js +139 -0
  364. package/typography/Highlight/Highlight.sty.d.ts +1 -0
  365. package/typography/Highlight/Highlight.sty.js +24 -0
  366. package/typography/Link/Link.css +15 -0
  367. package/typography/Link/Link.d.ts +16 -0
  368. package/typography/Link/Link.js +75 -0
  369. package/typography/Link/Link.sty.d.ts +1 -0
  370. package/typography/Link/Link.sty.js +24 -0
  371. package/typography/List/List.css +16 -0
  372. package/typography/List/List.d.ts +39 -0
  373. package/typography/List/List.js +109 -0
  374. package/typography/List/List.sty.d.ts +2 -0
  375. package/typography/List/List.sty.js +26 -0
  376. package/typography/Paragraph/Paragraph.css +19 -0
  377. package/typography/Paragraph/Paragraph.d.ts +19 -0
  378. package/typography/Paragraph/Paragraph.js +77 -0
  379. package/typography/Paragraph/Paragraph.sty.d.ts +16 -0
  380. package/typography/Paragraph/Paragraph.sty.js +25 -0
  381. package/typography/Strikethrough/Strikethrough.css +5 -0
  382. package/typography/Strikethrough/Strikethrough.d.ts +15 -0
  383. package/typography/Strikethrough/Strikethrough.js +60 -0
  384. package/typography/Strikethrough/Strikethrough.sty.d.ts +1 -0
  385. package/typography/Strikethrough/Strikethrough.sty.js +24 -0
  386. package/typography/Strong/Strong.css +4 -0
  387. package/typography/Strong/Strong.d.ts +14 -0
  388. package/typography/Strong/Strong.js +62 -0
  389. package/typography/Strong/Strong.sty.d.ts +1 -0
  390. package/typography/Strong/Strong.sty.js +24 -0
  391. package/typography/Text/Text.css +18 -0
  392. package/typography/Text/Text.d.ts +26 -0
  393. package/typography/Text/Text.js +71 -0
  394. package/typography/Text/Text.sty.d.ts +16 -0
  395. package/typography/Text/Text.sty.js +25 -0
  396. package/typography/TextEllipsis/TextEllipsis.css +22 -0
  397. package/typography/TextEllipsis/TextEllipsis.d.ts +32 -0
  398. package/typography/TextEllipsis/TextEllipsis.js +167 -0
  399. package/typography/TextEllipsis/TextEllipsis.sty.d.ts +15 -0
  400. package/typography/TextEllipsis/TextEllipsis.sty.js +25 -0
  401. package/typography/index.d.ts +28 -0
  402. package/typography/index.js +54 -0
  403. package/typography/utils.d.ts +52 -0
  404. package/typography/utils.js +119 -0
@@ -0,0 +1,34 @@
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 seed_random_exports = {};
19
+ __export(seed_random_exports, {
20
+ mulberry32: () => mulberry32
21
+ });
22
+ module.exports = __toCommonJS(seed_random_exports);
23
+ const memoizedRandomGenerators = {};
24
+ function mulberry32(seed) {
25
+ if (memoizedRandomGenerators[seed] === void 0) {
26
+ memoizedRandomGenerators[seed] = () => {
27
+ let t = seed += 1831565813;
28
+ t = Math.imul(t ^ t >>> 15, t | 1);
29
+ t ^= t + Math.imul(t ^ t >>> 7, t | 61);
30
+ return ((t ^ t >>> 14) >>> 0) / 4294967296;
31
+ };
32
+ }
33
+ return memoizedRandomGenerators[seed];
34
+ }
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Generates a uuidv4
3
+ * @internal
4
+ */
5
+ export declare function uuidv4(seed?: number): string;
@@ -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 uuidv4_exports = {};
19
+ __export(uuidv4_exports, {
20
+ uuidv4: () => uuidv4
21
+ });
22
+ module.exports = __toCommonJS(uuidv4_exports);
23
+ var import_seed_random = require("./seed-random.js");
24
+ function uuidv4(seed) {
25
+ const random = seed !== void 0 ? (0, import_seed_random.mulberry32)(seed) : Math.random;
26
+ return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (char) => {
27
+ const randomNumber = random() * 16 | 0;
28
+ const value = char === "x" ? randomNumber : randomNumber & 3 | 8;
29
+ return value.toString(16);
30
+ });
31
+ }
@@ -0,0 +1,7 @@
1
+ import { ProgressBar } from "./progress/ProgressBar.js";
2
+ import { ProgressCircle } from "./progress/ProgressCircle.js";
3
+ export {
4
+ ProgressBar,
5
+ ProgressCircle
6
+ };
7
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/content/index.ts"],
4
+ "sourcesContent": ["export { ProgressBar } from './progress/ProgressBar.js';\nexport type { ProgressBarProps } from './progress/ProgressBar.js';\nexport type { ProgressBarIconProps } from './progress/ProgressBarIcon.js';\nexport type { ProgressBarLabelProps } from './progress/ProgressBarLabel.js';\nexport type { ProgressBarValueProps } from './progress/ProgressBarValue.js';\nexport { ProgressCircle } from './progress/ProgressCircle.js';\nexport type { ProgressCircleProps } from './progress/ProgressCircle.js';\n"],
5
+ "mappings": "AAAA,SAAS,mBAAmB;AAK5B,SAAS,sBAAsB;",
6
+ "names": []
7
+ }
@@ -0,0 +1,52 @@
1
+ @keyframes ProgressBar_indeterminateAnimationKeyframes__13n9uwh0 {
2
+ 0% {
3
+ transform: translateX(-100%) scaleX(0);
4
+ }
5
+ 100% {
6
+ transform: translateX(100%) scaleX(1.5);
7
+ }
8
+ }
9
+ .ProgressBar_progressCSS__13n9uwh1 {
10
+ width: 100%;
11
+ border-radius: var(--dt-borders-radius-container-subdued, 8px);
12
+ overflow: hidden;
13
+ position: relative;
14
+ }
15
+ .ProgressBar_progressCSS_size_condensed__13n9uwh2 {
16
+ height: 6px;
17
+ }
18
+ .ProgressBar_progressCSS_size_default__13n9uwh3 {
19
+ height: 8px;
20
+ }
21
+ .ProgressBar_progressCSS_variant_onAccent__13n9uwh4 {
22
+ background-color: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
23
+ }
24
+ .ProgressBar_progressCSS_variant_primary__13n9uwh5 {
25
+ background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
26
+ }
27
+ .ProgressBar_progressCSS_variant_success__13n9uwh6 {
28
+ background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
29
+ }
30
+ .ProgressBar_progressCSS_variant_warning__13n9uwh7 {
31
+ background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
32
+ }
33
+ .ProgressBar_progressCSS_variant_critical__13n9uwh8 {
34
+ background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
35
+ }
36
+ .ProgressBar_progressCSS_variant_neutral__13n9uwh9 {
37
+ background-color: var(--dt-colors-border-neutral-default, #d2d3e1);
38
+ }
39
+ .ProgressBar_progressBarFillCSS__13n9uwha {
40
+ height: 100%;
41
+ transition-duration: var(--dt-timings-fast-default, 170ms);
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);
44
+ }
45
+ .ProgressBar_progressBarFillCSS_indeterminate_true__13n9uwhb {
46
+ width: 100%;
47
+ animation-name: ProgressBar_indeterminateAnimationKeyframes__13n9uwh0;
48
+ animation-duration: var(--dt-timings-slow-gentle, 800ms);
49
+ animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
50
+ animation-iteration-count: infinite;
51
+ transform-origin: left center;
52
+ }
@@ -0,0 +1,163 @@
1
+ import clsx from "clsx";
2
+ import React, { forwardRef } from "react";
3
+ import { isElement } from "react-is";
4
+ import Spacings from "@dynatrace/strato-design-tokens/spacings";
5
+ import { SharedProgressBarPropsContext } from "./contexts/SharedProgressBarPropsContext.js";
6
+ import { useProgressAriaProps } from "./hooks/useProgressAriaProps.js";
7
+ import { progressBarFillCSS, progressCSS } from "./ProgressBar.sty.js";
8
+ import { ProgressBarIcon } from "./ProgressBarIcon.js";
9
+ import { ProgressBarLabel } from "./ProgressBarLabel.js";
10
+ import { ProgressBarValue } from "./ProgressBarValue.js";
11
+ import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
12
+ import { useId } from "../../core/hooks/useId.js";
13
+ import { useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
14
+ import { colorUtilsCSS } from "../../styles/colorUtils.sty.js";
15
+ function getProgressBarSlots(children) {
16
+ const slots = {
17
+ value: null,
18
+ label: null,
19
+ icon: null
20
+ };
21
+ React.Children.forEach(children, (child) => {
22
+ if (isElement(child)) {
23
+ switch (child.type) {
24
+ case ProgressBarLabel:
25
+ slots.label = child;
26
+ break;
27
+ case ProgressBarIcon:
28
+ slots.icon = child;
29
+ break;
30
+ case ProgressBarValue:
31
+ default:
32
+ slots.value = child;
33
+ break;
34
+ }
35
+ } else {
36
+ if (!slots.value) {
37
+ slots.value = child;
38
+ }
39
+ }
40
+ });
41
+ return slots;
42
+ }
43
+ const _ProgressBar = forwardRef(
44
+ (props, forwardedRef) => {
45
+ const {
46
+ value: originalValue,
47
+ max = 100,
48
+ min = 0,
49
+ density = "default",
50
+ variant = "primary",
51
+ children,
52
+ id: propId,
53
+ "aria-valuetext": ariaValuetext,
54
+ className: consumerClassName,
55
+ style: consumerStyle,
56
+ "data-testid": dataTestId,
57
+ "data-dtrum-mask": dataDtrumMask,
58
+ "data-dtrum-allow": dataDtrumAllow,
59
+ ...remainingProps
60
+ } = props;
61
+ const slots = getProgressBarSlots(children);
62
+ const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(
63
+ originalValue,
64
+ min,
65
+ max,
66
+ ariaValuetext
67
+ );
68
+ const ariaLabelingProps = useAriaLabelingProps(remainingProps);
69
+ const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);
70
+ const generatedId = useId({ prefix: "progress-bar" });
71
+ const id = propId ?? generatedId;
72
+ if (!slots.label && !ariaLabelingProps["aria-label"] && !ariaLabelingProps["aria-labelledby"]) {
73
+ // eslint-disable-next-line no-console
74
+ console.warn(
75
+ "If no label is provided please make sure to provide an aria label on your progressCircle element."
76
+ );
77
+ }
78
+ const progressStyles = {};
79
+ if (!isIndeterminate && value !== void 0) {
80
+ const percentage = (value - min) / (max - min);
81
+ progressStyles["width"] = `${Math.round(percentage * 100)}%`;
82
+ }
83
+ return /* @__PURE__ */ React.createElement(SharedProgressBarPropsContext.Provider, { value: { id, variant, density } }, /* @__PURE__ */ React.createElement(
84
+ "div",
85
+ {
86
+ className: consumerClassName,
87
+ style: {
88
+ display: "flex",
89
+ flexDirection: "column",
90
+ gap: Spacings.Size6,
91
+ width: "100%",
92
+ ...consumerStyle
93
+ },
94
+ "data-testid": dataTestId,
95
+ "data-dtrum-mask": dataDtrumMask,
96
+ "data-dtrum-allow": dataDtrumAllow,
97
+ ref: forwardedRef,
98
+ ...forwardProps
99
+ },
100
+ /* @__PURE__ */ React.createElement(
101
+ "div",
102
+ {
103
+ style: {
104
+ display: "flex",
105
+ justifyContent: "space-between",
106
+ gap: Spacings.Size8
107
+ }
108
+ },
109
+ density === "condensed" ? /* @__PURE__ */ React.createElement(
110
+ "div",
111
+ {
112
+ style: {
113
+ display: "flex",
114
+ justifyContent: "space-between",
115
+ alignItems: "flex-end",
116
+ flex: 1,
117
+ gap: Spacings.Size16,
118
+ minWidth: 0
119
+ }
120
+ },
121
+ slots.label,
122
+ density === "condensed" && slots.value
123
+ ) : slots.label,
124
+ slots.icon
125
+ ),
126
+ /* @__PURE__ */ React.createElement(
127
+ "div",
128
+ {
129
+ className: progressCSS({ size: density, variant }),
130
+ id,
131
+ ...progressAriaProps,
132
+ ...ariaLabelingProps
133
+ },
134
+ /* @__PURE__ */ React.createElement(
135
+ "div",
136
+ {
137
+ className: clsx(
138
+ colorUtilsCSS({
139
+ color: variant,
140
+ variant: variant === "onAccent" ? "default" : "accent"
141
+ }),
142
+ progressBarFillCSS({
143
+ indeterminate: isIndeterminate
144
+ })
145
+ ),
146
+ style: progressStyles
147
+ }
148
+ )
149
+ ),
150
+ density === "default" && slots.value
151
+ ));
152
+ }
153
+ );
154
+ _ProgressBar.displayName = "ProgressBar";
155
+ const ProgressBar = Object.assign(_ProgressBar, {
156
+ Value: ProgressBarValue,
157
+ Label: ProgressBarLabel,
158
+ Icon: ProgressBarIcon
159
+ });
160
+ export {
161
+ ProgressBar
162
+ };
163
+ //# sourceMappingURL=ProgressBar.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/content/progress/ProgressBar.tsx"],
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport React, { CSSProperties, forwardRef } from 'react';\nimport { isElement } from 'react-is';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\n// asd\n\nimport { SharedProgressBarPropsContext } from './contexts/SharedProgressBarPropsContext.js';\nimport { useProgressAriaProps } from './hooks/useProgressAriaProps.js';\nimport { progressBarFillCSS, progressCSS } from './ProgressBar.sty.js';\nimport { ProgressBarIcon } from './ProgressBarIcon.js';\nimport { ProgressBarLabel } from './ProgressBarLabel.js';\nimport { ProgressBarValue } from './ProgressBarValue.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type RoleVariantType } from '../../core/types/role-variant.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { colorUtilsCSS } from '../../styles/colorUtils.sty.js';\n\n/**\n * Accepted properties for ProgressBar.\n * @public\n */\nexport interface ProgressBarProps\n extends WithChildren,\n DOMProps,\n AriaLabelingProps,\n StylingProps,\n DataTestId,\n MaskingProps {\n /**\n * The current value.\n * @defaultValue 'indeterminate'\n */\n value?: number | 'indeterminate';\n /**\n * The minimum allowed value.\n * @defaultValue 0\n */\n min?: number;\n /**\n * The maximum allowed value.\n * @defaultValue 100\n */\n max?: number;\n /**\n * Controls the density of the rendering.\n * @defaultValue 'default'\n */\n density?: 'default' | 'condensed';\n /**\n * Controls the appearance of the progress.\n * @defaultValue 'primary'\n */\n variant?: RoleVariantType;\n /**\n * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.\n * By default, the value will be given as a percentage. If the value is not a percentage, you should provide aria-valuetext.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n * @defaultValue the value of the progress as percentage.\n */\n 'aria-valuetext'?: string;\n}\n\ntype ProgressBarSlots = {\n value?: React.ReactNode;\n label?: React.ReactNode;\n icon?: React.ReactNode;\n};\n\nfunction getProgressBarSlots(children: React.ReactNode) {\n const slots: ProgressBarSlots = {\n value: null,\n label: null,\n icon: null,\n };\n\n React.Children.forEach(children, (child) => {\n if (isElement(child)) {\n switch (child.type) {\n case ProgressBarLabel:\n slots.label = child;\n break;\n case ProgressBarIcon:\n slots.icon = child;\n break;\n case ProgressBarValue:\n default:\n slots.value = child;\n break;\n }\n } else {\n if (!slots.value) {\n slots.value = child;\n }\n }\n });\n\n return slots;\n}\n\nconst _ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n (props, forwardedRef) => {\n const {\n value: originalValue,\n max = 100,\n min = 0,\n density = 'default',\n variant = 'primary',\n children,\n id: propId,\n 'aria-valuetext': ariaValuetext,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n ...remainingProps\n }: ProgressBarProps = props;\n\n const slots = getProgressBarSlots(children);\n const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(\n originalValue,\n min,\n max,\n ariaValuetext,\n );\n const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n\n const generatedId = useId({ prefix: 'progress-bar' });\n const id = propId ?? generatedId;\n\n if (\n !slots.label &&\n !ariaLabelingProps['aria-label'] &&\n !ariaLabelingProps['aria-labelledby']\n ) {\n process.env.NODE_ENV === 'development' &&\n // eslint-disable-next-line no-console\n console.warn(\n 'If no label is provided please make sure to provide an aria label on your progressCircle element.',\n );\n }\n\n const progressStyles: CSSProperties = {};\n if (!isIndeterminate && value !== undefined) {\n const percentage = (value - min) / (max - min);\n progressStyles['width'] = `${Math.round(percentage * 100)}%`;\n }\n\n return (\n <SharedProgressBarPropsContext.Provider value={{ id, variant, density }}>\n {/* TODO: this can be replaced by using the FLEX component. Using the flex component currently causes a circular from core -> layout -> core */}\n <div\n className={consumerClassName}\n style={{\n display: 'flex',\n flexDirection: 'column',\n gap: Spacings.Size6,\n width: '100%',\n ...consumerStyle,\n }}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n ref={forwardedRef}\n {...forwardProps}\n >\n {/* //TODO: this can be replaced by using the FLEX component. Using the flex component currently causes a circular from core -> layout -> core */}\n <div\n style={{\n display: 'flex',\n justifyContent: 'space-between',\n gap: Spacings.Size8,\n }}\n >\n {density === 'condensed' ? (\n <div\n style={{\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'flex-end',\n flex: 1,\n gap: Spacings.Size16,\n minWidth: 0,\n }}\n >\n {/* //TODO: this can be replaced by using the FLEX component. Using the flex component currently causes a circular from core -> layout -> core */}\n {slots.label}\n {density === 'condensed' && slots.value}\n </div>\n ) : (\n slots.label\n )}\n {slots.icon}\n </div>\n <div\n className={progressCSS({ size: density, variant })}\n id={id}\n {...progressAriaProps}\n {...ariaLabelingProps}\n >\n <div\n className={clsx(\n colorUtilsCSS({\n color: variant,\n variant: variant === 'onAccent' ? 'default' : 'accent',\n }),\n progressBarFillCSS({\n indeterminate: isIndeterminate,\n }),\n )}\n style={progressStyles}\n />\n </div>\n {density === 'default' && slots.value}\n </div>\n </SharedProgressBarPropsContext.Provider>\n );\n },\n);\n\n(_ProgressBar as typeof _ProgressBar & { displayName: string }).displayName =\n 'ProgressBar';\n\n/**\n * Use the `ProgressBar` component to show your users that a system operation such as downloading, uploading, or processing is progressing.\n * The `ProgressBar` can be used to visualize determinate or indeterminate progress.\n * @public\n */\nexport const ProgressBar = Object.assign(_ProgressBar, {\n Value: ProgressBarValue,\n Label: ProgressBarLabel,\n Icon: ProgressBarIcon,\n});\n"],
5
+ "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAwB,kBAAkB;AACjD,SAAS,iBAAiB;AAE1B,OAAO,cAAc;AAIrB,SAAS,qCAAqC;AAC9C,SAAS,4BAA4B;AACrC,SAAS,oBAAoB,mBAAmB;AAChD,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAQpC,SAAS,qBAAqB;AAqD9B,SAAS,oBAAoB,UAA2B;AACtD,QAAM,QAA0B;AAAA,IAC9B,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAEA,QAAM,SAAS,QAAQ,UAAU,CAAC,UAAU;AAC1C,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AACH,gBAAM,QAAQ;AACd;AAAA,QACF,KAAK;AACH,gBAAM,OAAO;AACb;AAAA,QACF,KAAK;AAAA,QACL;AACE,gBAAM,QAAQ;AACd;AAAA,MACJ;AAAA,IACF,OAAO;AACL,UAAI,CAAC,MAAM,OAAO;AAChB,cAAM,QAAQ;AAAA,MAChB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,eAAe;AAAA,EACnB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA,IAAI;AAAA,MACJ,kBAAkB;AAAA,MAClB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAsB;AAEtB,UAAM,QAAQ,oBAAoB,QAAQ;AAC1C,UAAM,EAAE,OAAO,iBAAiB,kBAAkB,IAAI;AAAA,MACpD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,UAAM,oBAAoB,qBAAqB,cAAc;AAC7D,UAAM,eAAe,oBAAoB,gBAAgB,iBAAiB;AAE1E,UAAM,cAAc,MAAM,EAAE,QAAQ,eAAe,CAAC;AACpD,UAAM,KAAK,UAAU;AAErB,QACE,CAAC,MAAM,SACP,CAAC,kBAAkB,YAAY,KAC/B,CAAC,kBAAkB,iBAAiB,GACpC;AACA;AAAA,MAEE,QAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACJ;AAEA,UAAM,iBAAgC,CAAC;AACvC,QAAI,CAAC,mBAAmB,UAAU,QAAW;AAC3C,YAAM,cAAc,QAAQ,QAAQ,MAAM;AAC1C,qBAAe,OAAO,IAAI,GAAG,KAAK,MAAM,aAAa,GAAG,CAAC;AAAA,IAC3D;AAEA,WACE,oCAAC,8BAA8B,UAA9B,EAAuC,OAAO,EAAE,IAAI,SAAS,QAAQ,KAEpE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,OAAO;AAAA,UACL,SAAS;AAAA,UACT,eAAe;AAAA,UACf,KAAK,SAAS;AAAA,UACd,OAAO;AAAA,UACP,GAAG;AAAA,QACL;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,KAAK;AAAA,QACJ,GAAG;AAAA;AAAA,MAGJ;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,YACL,SAAS;AAAA,YACT,gBAAgB;AAAA,YAChB,KAAK,SAAS;AAAA,UAChB;AAAA;AAAA,QAEC,YAAY,cACX;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,MAAM;AAAA,cACN,KAAK,SAAS;AAAA,cACd,UAAU;AAAA,YACZ;AAAA;AAAA,UAGC,MAAM;AAAA,UACN,YAAY,eAAe,MAAM;AAAA,QACpC,IAEA,MAAM;AAAA,QAEP,MAAM;AAAA,MACT;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,YAAY,EAAE,MAAM,SAAS,QAAQ,CAAC;AAAA,UACjD;AAAA,UACC,GAAG;AAAA,UACH,GAAG;AAAA;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,cAAc;AAAA,gBACZ,OAAO;AAAA,gBACP,SAAS,YAAY,aAAa,YAAY;AAAA,cAChD,CAAC;AAAA,cACD,mBAAmB;AAAA,gBACjB,eAAe;AAAA,cACjB,CAAC;AAAA,YACH;AAAA,YACA,OAAO;AAAA;AAAA,QACT;AAAA,MACF;AAAA,MACC,YAAY,aAAa,MAAM;AAAA,IAClC,CACF;AAAA,EAEJ;AACF;AAEC,aAA+D,cAC9D;AAOK,MAAM,cAAc,OAAO,OAAO,cAAc;AAAA,EACrD,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR,CAAC;",
6
+ "names": []
7
+ }
@@ -0,0 +1,10 @@
1
+ import "../../styles/colorUtils.css";
2
+ import "./ProgressBar.css";
3
+ import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
4
+ var progressBarFillCSS = _7a468({ defaultClassName: "ProgressBar_progressBarFillCSS__13n9uwha", variantClassNames: { indeterminate: { true: "ProgressBar_progressBarFillCSS_indeterminate_true__13n9uwhb" } }, defaultVariants: {}, compoundVariants: [] });
5
+ var progressCSS = _7a468({ 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: [] });
6
+ export {
7
+ progressBarFillCSS,
8
+ progressCSS
9
+ };
10
+ //# sourceMappingURL=ProgressBar.sty.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/content/progress/ProgressBar.css.ts"],
4
+ "sourcesContent": ["import '../../styles/colorUtils.css';\nimport './ProgressBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarFillCSS = _7a468({defaultClassName:'ProgressBar_progressBarFillCSS__13n9uwha',variantClassNames:{indeterminate:{true:'ProgressBar_progressBarFillCSS_indeterminate_true__13n9uwhb'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCSS = _7a468({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:[]});"],
5
+ "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,4CAA2C,mBAAkB,EAAC,eAAc,EAAC,MAAK,8DAA6D,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC3O,IAAI,cAAc,OAAO,EAAC,kBAAiB,qCAAoC,mBAAkB,EAAC,MAAK,EAAC,WAAU,oDAAmD,WAAU,iDAAgD,GAAE,SAAQ,EAAC,UAAS,sDAAqD,SAAQ,qDAAoD,SAAQ,qDAAoD,SAAQ,qDAAoD,UAAS,sDAAqD,SAAQ,oDAAmD,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
6
+ "names": []
7
+ }
@@ -0,0 +1,5 @@
1
+ .ProgressBarIcon_progressBarIconContainerCSS__szm9t40 {
2
+ display: flex;
3
+ margin-left: auto;
4
+ color: var(--vars_borderColor__17bwkb02);
5
+ }
@@ -0,0 +1,40 @@
1
+ import clsx from "clsx";
2
+ import React, { forwardRef } from "react";
3
+ import { _useSharedProgressBarPropsContext } from "./hooks/useProgressBarPropsContext.js";
4
+ import { progressBarIconContainerCSS } from "./ProgressBarIcon.sty.js";
5
+ import { colorUtilsCSS } from "../../styles/colorUtils.sty.js";
6
+ const ProgressBarIcon = forwardRef(
7
+ (props, forwardedRef) => {
8
+ const {
9
+ children,
10
+ className: consumerClassName,
11
+ style: consumerStyle,
12
+ "data-testid": dataTestId,
13
+ ...remainingProps
14
+ } = props;
15
+ const { variant } = _useSharedProgressBarPropsContext();
16
+ return /* @__PURE__ */ React.createElement(
17
+ "div",
18
+ {
19
+ "data-testid": dataTestId,
20
+ ref: forwardedRef,
21
+ className: clsx(
22
+ consumerClassName,
23
+ colorUtilsCSS({
24
+ color: variant,
25
+ variant: variant === "onAccent" ? "default" : "accent"
26
+ }),
27
+ progressBarIconContainerCSS
28
+ ),
29
+ style: consumerStyle,
30
+ ...remainingProps
31
+ },
32
+ children
33
+ );
34
+ }
35
+ );
36
+ ProgressBarIcon.displayName = "ProgressBar.Icon";
37
+ export {
38
+ ProgressBarIcon
39
+ };
40
+ //# sourceMappingURL=ProgressBarIcon.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/content/progress/ProgressBarIcon.tsx"],
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { _useSharedProgressBarPropsContext } from './hooks/useProgressBarPropsContext.js';\nimport { progressBarIconContainerCSS } from './ProgressBarIcon.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { colorUtilsCSS } from '../../styles/colorUtils.sty.js';\n\n/**\n * Accepted properties for ProgressBarIcon.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ProgressBarIconProps\n extends WithChildren,\n StylingProps,\n DataTestId {}\n\n/**\n * The ProgressBarIcon subcomponent is rendered inside the ProgressBar component.\n * @public\n */\nexport const ProgressBarIcon = forwardRef<HTMLDivElement, ProgressBarIconProps>(\n (props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n }: ProgressBarIconProps = props;\n const { variant } = _useSharedProgressBarPropsContext();\n return (\n <div\n data-testid={dataTestId}\n ref={forwardedRef}\n className={clsx(\n consumerClassName,\n colorUtilsCSS({\n color: variant,\n variant: variant === 'onAccent' ? 'default' : 'accent',\n }),\n progressBarIconContainerCSS,\n )}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </div>\n );\n },\n);\n\n(\n ProgressBarIcon as typeof ProgressBarIcon & { displayName: string }\n).displayName = 'ProgressBar.Icon';\n"],
5
+ "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,yCAAyC;AAClD,SAAS,mCAAmC;AAI5C,SAAS,qBAAqB;AAgBvB,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAA0B;AAC1B,UAAM,EAAE,QAAQ,IAAI,kCAAkC;AACtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,cAAc;AAAA,YACZ,OAAO;AAAA,YACP,SAAS,YAAY,aAAa,YAAY;AAAA,UAChD,CAAC;AAAA,UACD;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAGE,gBACA,cAAc;",
6
+ "names": []
7
+ }
@@ -0,0 +1,7 @@
1
+ import "../../styles/colorUtils.css";
2
+ import "./ProgressBarIcon.css";
3
+ var progressBarIconContainerCSS = "ProgressBarIcon_progressBarIconContainerCSS__szm9t40";
4
+ export {
5
+ progressBarIconContainerCSS
6
+ };
7
+ //# sourceMappingURL=ProgressBarIcon.sty.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/content/progress/ProgressBarIcon.css.ts"],
4
+ "sourcesContent": ["import '../../styles/colorUtils.css';\nimport './ProgressBarIcon.css';\nexport var progressBarIconContainerCSS = 'ProgressBarIcon_progressBarIconContainerCSS__szm9t40';"],
5
+ "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,8BAA8B;",
6
+ "names": []
7
+ }
@@ -0,0 +1,9 @@
1
+ .ProgressBarLabel_progressBarLabelCSS__1ceb8vp0 {
2
+ color: var(--vars_text__6levse0);
3
+ }
4
+ .ProgressBarLabel_progressBarLabelCSS_size_default__1ceb8vp2 {
5
+ word-break: break-word;
6
+ }
7
+ .ProgressBarLabel_progressBarLabelCSS_childIsText_false__1ceb8vp3 {
8
+ word-break: break-word;
9
+ }
@@ -0,0 +1,47 @@
1
+ import clsx from "clsx";
2
+ import React, { forwardRef } from "react";
3
+ import { _useSharedProgressBarPropsContext } from "./hooks/useProgressBarPropsContext.js";
4
+ import { progressBarLabelCSS } from "./ProgressBarLabel.sty.js";
5
+ import { isStringChildren } from "../../core/utils/_is-string-children.js";
6
+ import { containerColorsCSS } from "../../styles/container.sty.js";
7
+ import { ellipsisCSS } from "../../styles/ellipsis.sty.js";
8
+ import { textStyleCSS } from "../../styles/textStyle.sty.js";
9
+ const ProgressBarLabel = forwardRef((props, forwardedRef) => {
10
+ const {
11
+ children,
12
+ className: consumerClassName,
13
+ style: consumerStyle,
14
+ "data-testid": dataTestId,
15
+ ...remainingProps
16
+ } = props;
17
+ const { id, variant, density } = _useSharedProgressBarPropsContext();
18
+ const childIsText = isStringChildren(children);
19
+ return /* @__PURE__ */ React.createElement(
20
+ "label",
21
+ {
22
+ "data-testid": dataTestId,
23
+ ref: forwardedRef,
24
+ htmlFor: id,
25
+ className: clsx(
26
+ {
27
+ [ellipsisCSS]: density === "condensed" && childIsText
28
+ },
29
+ consumerClassName,
30
+ containerColorsCSS({
31
+ color: "neutral",
32
+ variant: variant === "onAccent" ? "accent" : "default"
33
+ }),
34
+ progressBarLabelCSS({ size: density, childIsText }),
35
+ textStyleCSS({ textStyle: "base" })
36
+ ),
37
+ style: consumerStyle,
38
+ ...remainingProps
39
+ },
40
+ children
41
+ );
42
+ });
43
+ ProgressBarLabel.displayName = "ProgressBar.Label";
44
+ export {
45
+ ProgressBarLabel
46
+ };
47
+ //# sourceMappingURL=ProgressBarLabel.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/content/progress/ProgressBarLabel.tsx"],
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { _useSharedProgressBarPropsContext } from './hooks/useProgressBarPropsContext.js';\nimport { progressBarLabelCSS } from './ProgressBarLabel.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { isStringChildren } from '../../core/utils/_is-string-children.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\nimport { ellipsisCSS } from '../../styles/ellipsis.sty.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * Accepted properties for ProgressBarLabel.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ProgressBarLabelProps\n extends WithChildren,\n StylingProps,\n DataTestId {}\n\n/**\n * ProgressBarLabel sub-component is rendered inside ProgressBar component.\n * @public\n */\nexport const ProgressBarLabel = forwardRef<\n HTMLLabelElement,\n ProgressBarLabelProps\n>((props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n }: ProgressBarLabelProps = props;\n\n const { id, variant, density } = _useSharedProgressBarPropsContext();\n\n const childIsText = isStringChildren(children);\n\n return (\n <label\n data-testid={dataTestId}\n ref={forwardedRef}\n htmlFor={id}\n className={clsx(\n {\n [ellipsisCSS]: density === 'condensed' && childIsText,\n },\n consumerClassName,\n containerColorsCSS({\n color: 'neutral',\n variant: variant === 'onAccent' ? 'accent' : 'default',\n }),\n progressBarLabelCSS({ size: density, childIsText }),\n textStyleCSS({ textStyle: 'base' }),\n )}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </label>\n );\n});\n\n(\n ProgressBarLabel as typeof ProgressBarLabel & { displayName: string }\n).displayName = 'ProgressBar.Label';\n"],
5
+ "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,yCAAyC;AAClD,SAAS,2BAA2B;AAIpC,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAgBtB,MAAM,mBAAmB,WAG9B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAA2B;AAE3B,QAAM,EAAE,IAAI,SAAS,QAAQ,IAAI,kCAAkC;AAEnE,QAAM,cAAc,iBAAiB,QAAQ;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,UACE,CAAC,WAAW,GAAG,YAAY,eAAe;AAAA,QAC5C;AAAA,QACA;AAAA,QACA,mBAAmB;AAAA,UACjB,OAAO;AAAA,UACP,SAAS,YAAY,aAAa,WAAW;AAAA,QAC/C,CAAC;AAAA,QACD,oBAAoB,EAAE,MAAM,SAAS,YAAY,CAAC;AAAA,QAClD,aAAa,EAAE,WAAW,OAAO,CAAC;AAAA,MACpC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AAGC,iBACA,cAAc;",
6
+ "names": []
7
+ }
@@ -0,0 +1,8 @@
1
+ import "../../styles/container.css";
2
+ import "./ProgressBarLabel.css";
3
+ import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
4
+ var progressBarLabelCSS = _7a468({ 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: [] });
5
+ export {
6
+ progressBarLabelCSS
7
+ };
8
+ //# sourceMappingURL=ProgressBarLabel.sty.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/content/progress/ProgressBarLabel.css.ts"],
4
+ "sourcesContent": ["import '../../styles/container.css';\nimport './ProgressBarLabel.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarLabelCSS = _7a468({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:[]});"],
5
+ "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,kDAAiD,mBAAkB,EAAC,MAAK,EAAC,WAAU,iEAAgE,WAAU,8DAA6D,GAAE,aAAY,EAAC,OAAM,mEAAkE,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
6
+ "names": []
7
+ }
@@ -0,0 +1,28 @@
1
+ .ProgressBarValue_progressBarValueCSS_variant_onAccent__1ri4i7o1 {
2
+ color: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
3
+ }
4
+ .ProgressBarValue_progressBarValueCSS_variant_primary__1ri4i7o2 {
5
+ color: var(--dt-colors-text-neutral-subdued, #545587);
6
+ }
7
+ .ProgressBarValue_progressBarValueCSS_variant_success__1ri4i7o3 {
8
+ color: var(--dt-colors-text-neutral-subdued, #545587);
9
+ }
10
+ .ProgressBarValue_progressBarValueCSS_variant_warning__1ri4i7o4 {
11
+ color: var(--dt-colors-text-neutral-subdued, #545587);
12
+ }
13
+ .ProgressBarValue_progressBarValueCSS_variant_critical__1ri4i7o5 {
14
+ color: var(--dt-colors-text-neutral-subdued, #545587);
15
+ }
16
+ .ProgressBarValue_progressBarValueCSS_variant_neutral__1ri4i7o6 {
17
+ color: var(--dt-colors-text-neutral-subdued, #545587);
18
+ }
19
+ .ProgressBarValue_progressBarValueCSS_size_default__1ri4i7o8 {
20
+ word-break: break-word;
21
+ }
22
+ .ProgressBarValue_progressBarValueCSS_childIsText_false__1ri4i7oa {
23
+ word-break: break-word;
24
+ }
25
+ .ProgressBarValue_progressBarValueCSS_compound_0__1ri4i7ob {
26
+ margin-left: auto;
27
+ align-self: center;
28
+ }
@@ -0,0 +1,44 @@
1
+ import clsx from "clsx";
2
+ import React, { forwardRef } from "react";
3
+ import { useIntl } from "react-intl";
4
+ import { _useSharedProgressBarPropsContext } from "./hooks/useProgressBarPropsContext.js";
5
+ import { progressBarValueCSS } from "./ProgressBarValue.sty.js";
6
+ import { isStringChildren } from "../../core/utils/_is-string-children.js";
7
+ import { textStyleCSS } from "../../styles/textStyle.sty.js";
8
+ const ProgressBarValue = forwardRef((props, forwardedRef) => {
9
+ const {
10
+ children,
11
+ className: consumerClassName,
12
+ style: consumerStyle,
13
+ "data-testid": dataTestId,
14
+ ...remainingProps
15
+ } = props;
16
+ const intl = useIntl();
17
+ const progressBarDefaultLabel = intl.formatMessage({
18
+ defaultMessage: "Loading",
19
+ id: "3J6qHQEUwDxvZuIl",
20
+ description: "Default label for the progress-bar."
21
+ });
22
+ const { variant, density } = _useSharedProgressBarPropsContext();
23
+ const childIsText = isStringChildren(children);
24
+ return /* @__PURE__ */ React.createElement(
25
+ "div",
26
+ {
27
+ "data-testid": dataTestId,
28
+ ref: forwardedRef,
29
+ className: clsx(
30
+ consumerClassName,
31
+ progressBarValueCSS({ variant, size: density, childIsText }),
32
+ textStyleCSS({ textStyle: "small" })
33
+ ),
34
+ style: consumerStyle,
35
+ ...remainingProps
36
+ },
37
+ children || progressBarDefaultLabel
38
+ );
39
+ });
40
+ ProgressBarValue.displayName = "ProgressBar.Value";
41
+ export {
42
+ ProgressBarValue
43
+ };
44
+ //# sourceMappingURL=ProgressBarValue.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/content/progress/ProgressBarValue.tsx"],
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _useSharedProgressBarPropsContext } from './hooks/useProgressBarPropsContext.js';\nimport { progressBarValueCSS } from './ProgressBarValue.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { isStringChildren } from '../../core/utils/_is-string-children.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * Accepted properties for ProgressBarValue.\n * @public\n * */\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ProgressBarValueProps\n extends WithChildren,\n StylingProps,\n DataTestId {}\n\n/**\n * ProgressBarValue sub-component is rendered inside ProgressBar component.\n * @public\n */\nexport const ProgressBarValue = forwardRef<\n HTMLDivElement,\n ProgressBarValueProps\n>((props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n }: ProgressBarValueProps = props;\n const intl = useIntl();\n\n const progressBarDefaultLabel = intl.formatMessage({\n defaultMessage: 'Loading',\n id: '3J6qHQEUwDxvZuIl',\n description: 'Default label for the progress-bar.',\n });\n\n const { variant, density } = _useSharedProgressBarPropsContext();\n\n const childIsText = isStringChildren(children);\n\n return (\n <div\n data-testid={dataTestId}\n ref={forwardedRef}\n className={clsx(\n consumerClassName,\n progressBarValueCSS({ variant, size: density, childIsText }),\n textStyleCSS({ textStyle: 'small' }),\n )}\n style={consumerStyle}\n {...remainingProps}\n >\n {children || progressBarDefaultLabel}\n </div>\n );\n});\n\n(\n ProgressBarValue as typeof ProgressBarValue & { displayName: string }\n).displayName = 'ProgressBar.Value';\n"],
5
+ "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAClC,SAAS,eAAe;AAExB,SAAS,yCAAyC;AAClD,SAAS,2BAA2B;AAIpC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAgBtB,MAAM,mBAAmB,WAG9B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAA2B;AAC3B,QAAM,OAAO,QAAQ;AAErB,QAAM,0BAA0B,KAAK,cAAc;AAAA,IACjD,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM,EAAE,SAAS,QAAQ,IAAI,kCAAkC;AAE/D,QAAM,cAAc,iBAAiB,QAAQ;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,oBAAoB,EAAE,SAAS,MAAM,SAAS,YAAY,CAAC;AAAA,QAC3D,aAAa,EAAE,WAAW,QAAQ,CAAC;AAAA,MACrC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,IAEH,YAAY;AAAA,EACf;AAEJ,CAAC;AAGC,iBACA,cAAc;",
6
+ "names": []
7
+ }
@@ -0,0 +1,8 @@
1
+ import "../../styles/ellipsis.css";
2
+ import "./ProgressBarValue.css";
3
+ import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
4
+ var progressBarValueCSS = _7a468({ 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"]] });
5
+ export {
6
+ progressBarValueCSS
7
+ };
8
+ //# sourceMappingURL=ProgressBarValue.sty.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../src/content/progress/ProgressBarValue.css.ts"],
4
+ "sourcesContent": ["import '../../styles/ellipsis.css';\nimport './ProgressBarValue.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarValueCSS = _7a468({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']]});"],
5
+ "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,8BAA6B,mBAAkB,EAAC,SAAQ,EAAC,UAAS,mEAAkE,SAAQ,kEAAiE,SAAQ,kEAAiE,SAAQ,kEAAiE,UAAS,mEAAkE,SAAQ,iEAAgE,GAAE,MAAK,EAAC,WAAU,iEAAgE,WAAU,8DAA6D,GAAE,aAAY,EAAC,MAAK,mEAAkE,OAAM,mEAAkE,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,MAAK,aAAY,aAAY,KAAI,GAAE,yFAAyF,CAAC,EAAC,CAAC;",
6
+ "names": []
7
+ }