@dynatrace/strato-components 0.84.42 → 0.85.0

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 (224) 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 +2 -2
  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/useId.d.ts +12 -0
  41. package/core/hooks/useId.js +32 -0
  42. package/core/hooks/useSafeForwardProps.d.ts +10 -0
  43. package/core/hooks/useSafeForwardProps.js +34 -0
  44. package/core/index.d.ts +11 -3
  45. package/core/index.js +12 -0
  46. package/core/types/a11y-props.d.ts +8 -1
  47. package/core/types/data-props.d.ts +1 -1
  48. package/core/types/dom.d.ts +2 -13
  49. package/core/types/masking-props.d.ts +2 -1
  50. package/core/types/polymorph.d.ts +10 -7
  51. package/core/types/role-variant.d.ts +10 -0
  52. package/core/types/{focusable-element.js → role-variant.js} +17 -2
  53. package/core/types/styling-props.d.ts +1 -1
  54. package/core/types/with-children.d.ts +1 -1
  55. package/core/utils/_is-string-children.d.ts +6 -0
  56. package/core/utils/_is-string-children.js +44 -0
  57. package/core/utils/isBrowser.d.ts +1 -1
  58. package/core/utils/merge-props.d.ts +4 -5
  59. package/core/utils/seed-random.d.ts +5 -0
  60. package/core/utils/seed-random.js +34 -0
  61. package/core/utils/uuidv4.d.ts +5 -0
  62. package/core/utils/uuidv4.js +31 -0
  63. package/esm/content/index.js +7 -0
  64. package/esm/content/index.js.map +7 -0
  65. package/esm/content/progress/ProgressBar.css +52 -0
  66. package/esm/content/progress/ProgressBar.js +163 -0
  67. package/esm/content/progress/ProgressBar.js.map +7 -0
  68. package/esm/content/progress/ProgressBar.sty.js +10 -0
  69. package/esm/content/progress/ProgressBar.sty.js.map +7 -0
  70. package/esm/content/progress/ProgressBarIcon.css +5 -0
  71. package/esm/content/progress/ProgressBarIcon.js +40 -0
  72. package/esm/content/progress/ProgressBarIcon.js.map +7 -0
  73. package/esm/content/progress/ProgressBarIcon.sty.js +7 -0
  74. package/esm/content/progress/ProgressBarIcon.sty.js.map +7 -0
  75. package/esm/content/progress/ProgressBarLabel.css +9 -0
  76. package/esm/content/progress/ProgressBarLabel.js +47 -0
  77. package/esm/content/progress/ProgressBarLabel.js.map +7 -0
  78. package/esm/content/progress/ProgressBarLabel.sty.js +8 -0
  79. package/esm/content/progress/ProgressBarLabel.sty.js.map +7 -0
  80. package/esm/content/progress/ProgressBarValue.css +28 -0
  81. package/esm/content/progress/ProgressBarValue.js +44 -0
  82. package/esm/content/progress/ProgressBarValue.js.map +7 -0
  83. package/esm/content/progress/ProgressBarValue.sty.js +8 -0
  84. package/esm/content/progress/ProgressBarValue.sty.js.map +7 -0
  85. package/esm/content/progress/ProgressCircle.css +52 -0
  86. package/esm/content/progress/ProgressCircle.js +153 -0
  87. package/esm/content/progress/ProgressCircle.js.map +7 -0
  88. package/esm/content/progress/ProgressCircle.sty.js +19 -0
  89. package/esm/content/progress/ProgressCircle.sty.js.map +7 -0
  90. package/esm/content/progress/contexts/SharedProgressBarPropsContext.js +10 -0
  91. package/esm/content/progress/contexts/SharedProgressBarPropsContext.js.map +7 -0
  92. package/esm/content/progress/hooks/useProgressAriaProps.js +45 -0
  93. package/esm/content/progress/hooks/useProgressAriaProps.js.map +7 -0
  94. package/esm/content/progress/hooks/useProgressBarPropsContext.js +16 -0
  95. package/esm/content/progress/hooks/useProgressBarPropsContext.js.map +7 -0
  96. package/esm/content/progress/utils.js +22 -0
  97. package/esm/content/progress/utils.js.map +7 -0
  98. package/esm/core/components/app-root/AppRoot.js.map +1 -1
  99. package/esm/core/hooks/useAriaLabelingProps.js +12 -0
  100. package/esm/core/hooks/useAriaLabelingProps.js.map +7 -0
  101. package/esm/core/hooks/useCurrentTheme.js.map +1 -1
  102. package/esm/core/hooks/useId.js +14 -0
  103. package/esm/core/hooks/useId.js.map +7 -0
  104. package/esm/core/hooks/useSafeForwardProps.js +16 -0
  105. package/esm/core/hooks/useSafeForwardProps.js.map +7 -0
  106. package/esm/core/index.js +12 -0
  107. package/esm/core/index.js.map +2 -2
  108. package/esm/core/types/role-variant.js +12 -0
  109. package/esm/core/types/role-variant.js.map +7 -0
  110. package/esm/core/utils/_is-string-children.js +16 -0
  111. package/esm/core/utils/_is-string-children.js.map +7 -0
  112. package/esm/core/utils/isBrowser.js.map +1 -1
  113. package/esm/core/utils/merge-props.js.map +2 -2
  114. package/esm/core/utils/seed-random.js +16 -0
  115. package/esm/core/utils/seed-random.js.map +7 -0
  116. package/esm/core/utils/uuidv4.js +13 -0
  117. package/esm/core/utils/uuidv4.js.map +7 -0
  118. package/esm/index.js +2 -0
  119. package/esm/index.js.map +2 -2
  120. package/esm/layouts/container/Container.css +8 -0
  121. package/esm/layouts/container/Container.js +55 -0
  122. package/esm/layouts/container/Container.js.map +7 -0
  123. package/esm/layouts/container/Container.sty.js +7 -0
  124. package/esm/layouts/container/Container.sty.js.map +7 -0
  125. package/esm/layouts/flex/Flex.js +46 -0
  126. package/esm/layouts/flex/Flex.js.map +7 -0
  127. package/esm/layouts/grid/Grid.js +46 -0
  128. package/esm/layouts/grid/Grid.js.map +7 -0
  129. package/esm/layouts/index.js +7 -1
  130. package/esm/layouts/index.js.map +2 -2
  131. package/esm/styles/colorUtils.css +80 -0
  132. package/esm/styles/colorUtils.sty.js +9 -0
  133. package/esm/styles/colorUtils.sty.js.map +7 -0
  134. package/esm/styles/container.css +64 -0
  135. package/esm/styles/container.sty.js +9 -0
  136. package/esm/styles/container.sty.js.map +7 -0
  137. package/esm/styles/ellipsis.css +5 -0
  138. package/esm/styles/ellipsis.sty.js +6 -0
  139. package/esm/styles/ellipsis.sty.js.map +7 -0
  140. package/esm/styles/extract-util.js +15 -0
  141. package/esm/styles/extract-util.js.map +7 -0
  142. package/esm/styles/getFlexStyles.js +69 -0
  143. package/esm/styles/getFlexStyles.js.map +7 -0
  144. package/esm/styles/getGapSprinkles.js +18 -0
  145. package/esm/styles/getGapSprinkles.js.map +7 -0
  146. package/esm/styles/getGridFlexPositionSprinkles.js +25 -0
  147. package/esm/styles/getGridFlexPositionSprinkles.js.map +7 -0
  148. package/esm/styles/getGridStyles.js +78 -0
  149. package/esm/styles/getGridStyles.js.map +7 -0
  150. package/esm/styles/getLayoutSizeStyles.js +21 -0
  151. package/esm/styles/getLayoutSizeStyles.js.map +7 -0
  152. package/esm/styles/getSpacingSprinkles.js +50 -0
  153. package/esm/styles/getSpacingSprinkles.js.map +7 -0
  154. package/esm/styles/index.js +49 -0
  155. package/esm/styles/index.js.map +7 -0
  156. package/esm/styles/safe-sprinkles.js +17 -0
  157. package/esm/styles/safe-sprinkles.js.map +7 -0
  158. package/esm/styles/sprinkle-properties.js +137 -0
  159. package/esm/styles/sprinkle-properties.js.map +7 -0
  160. package/esm/styles/sprinkles.css +786 -0
  161. package/esm/styles/sprinkles.sty.js +9 -0
  162. package/esm/styles/sprinkles.sty.js.map +7 -0
  163. package/esm/typography/Link/Link.js.map +2 -2
  164. package/esm/typography/List/List.js.map +1 -1
  165. package/esm/typography/Text/Text.js.map +1 -1
  166. package/esm/typography/TextEllipsis/TextEllipsis.js.map +1 -1
  167. package/index.d.ts +2 -0
  168. package/index.js +2 -0
  169. package/lang/en.json +6 -0
  170. package/lang/uncompiled/en.json +4 -0
  171. package/layouts/container/Container.css +8 -0
  172. package/layouts/container/Container.d.ts +34 -0
  173. package/layouts/container/Container.js +80 -0
  174. package/layouts/container/Container.sty.d.ts +1 -0
  175. package/layouts/container/Container.sty.js +25 -0
  176. package/layouts/flex/Flex.d.ts +23 -0
  177. package/layouts/flex/Flex.js +72 -0
  178. package/layouts/grid/Grid.d.ts +23 -0
  179. package/layouts/grid/Grid.js +72 -0
  180. package/layouts/index.d.ts +4 -0
  181. package/layouts/index.js +7 -1
  182. package/package.json +35 -20
  183. package/styles/colorUtils.css +80 -0
  184. package/styles/colorUtils.sty.d.ts +56 -0
  185. package/styles/colorUtils.sty.js +27 -0
  186. package/styles/container.css +64 -0
  187. package/styles/container.sty.d.ts +54 -0
  188. package/styles/container.sty.js +27 -0
  189. package/styles/ellipsis.css +5 -0
  190. package/styles/ellipsis.sty.d.ts +5 -0
  191. package/styles/ellipsis.sty.js +24 -0
  192. package/styles/extract-util.d.ts +9 -0
  193. package/styles/extract-util.js +33 -0
  194. package/styles/getFlexStyles.d.ts +64 -0
  195. package/styles/getFlexStyles.js +95 -0
  196. package/styles/getGapSprinkles.d.ts +19 -0
  197. package/styles/getGapSprinkles.js +36 -0
  198. package/styles/getGridFlexPositionSprinkles.d.ts +35 -0
  199. package/styles/getGridFlexPositionSprinkles.js +43 -0
  200. package/styles/getGridStyles.d.ts +74 -0
  201. package/styles/getGridStyles.js +100 -0
  202. package/styles/getLayoutSizeStyles.d.ts +29 -0
  203. package/styles/getLayoutSizeStyles.js +39 -0
  204. package/styles/getSpacingSprinkles.d.ts +74 -0
  205. package/styles/getSpacingSprinkles.js +68 -0
  206. package/styles/index.d.ts +11 -0
  207. package/styles/index.js +47 -0
  208. package/styles/safe-sprinkles.d.ts +6 -0
  209. package/styles/safe-sprinkles.js +35 -0
  210. package/styles/sprinkle-properties.d.ts +257 -0
  211. package/styles/sprinkle-properties.js +165 -0
  212. package/styles/sprinkles.css +786 -0
  213. package/styles/sprinkles.sty.d.ts +913 -0
  214. package/styles/sprinkles.sty.js +27 -0
  215. package/styles/textStyle.sty.d.ts +1 -0
  216. package/testing/mocks/canvas-mock.js +6 -1
  217. package/typography/Link/Link.d.ts +1 -2
  218. package/typography/List/List.d.ts +4 -4
  219. package/typography/Text/Text.d.ts +3 -3
  220. package/typography/TextEllipsis/TextEllipsis.d.ts +3 -3
  221. package/typography/TextEllipsis/TextEllipsis.js +2 -2
  222. package/core/types/focusable-element.d.ts +0 -5
  223. package/esm/core/types/focusable-element.js +0 -1
  224. package/esm/core/types/focusable-element.js.map +0 -7
@@ -0,0 +1,9 @@
1
+ import "./sprinkles.css";
2
+ import { createSprinkles as _ad221 } from "@vanilla-extract/sprinkles/createRuntimeSprinkles";
3
+ var globalSprinkleProperties = { conditions: void 0, styles: { gap: { values: { "0": { defaultClass: "sprinkles_gap_0__1bzvwaf0" }, "2": { defaultClass: "sprinkles_gap_2__1bzvwaf1" }, "4": { defaultClass: "sprinkles_gap_4__1bzvwaf2" }, "6": { defaultClass: "sprinkles_gap_6__1bzvwaf3" }, "8": { defaultClass: "sprinkles_gap_8__1bzvwaf4" }, "12": { defaultClass: "sprinkles_gap_12__1bzvwaf5" }, "16": { defaultClass: "sprinkles_gap_16__1bzvwaf6" }, "20": { defaultClass: "sprinkles_gap_20__1bzvwaf7" }, "24": { defaultClass: "sprinkles_gap_24__1bzvwaf8" }, "32": { defaultClass: "sprinkles_gap_32__1bzvwaf9" }, "40": { defaultClass: "sprinkles_gap_40__1bzvwafa" }, "48": { defaultClass: "sprinkles_gap_48__1bzvwafb" }, "56": { defaultClass: "sprinkles_gap_56__1bzvwafc" }, "64": { defaultClass: "sprinkles_gap_64__1bzvwafd" } } }, rowGap: { values: { "0": { defaultClass: "sprinkles_rowGap_0__1bzvwafe" }, "2": { defaultClass: "sprinkles_rowGap_2__1bzvwaff" }, "4": { defaultClass: "sprinkles_rowGap_4__1bzvwafg" }, "6": { defaultClass: "sprinkles_rowGap_6__1bzvwafh" }, "8": { defaultClass: "sprinkles_rowGap_8__1bzvwafi" }, "12": { defaultClass: "sprinkles_rowGap_12__1bzvwafj" }, "16": { defaultClass: "sprinkles_rowGap_16__1bzvwafk" }, "20": { defaultClass: "sprinkles_rowGap_20__1bzvwafl" }, "24": { defaultClass: "sprinkles_rowGap_24__1bzvwafm" }, "32": { defaultClass: "sprinkles_rowGap_32__1bzvwafn" }, "40": { defaultClass: "sprinkles_rowGap_40__1bzvwafo" }, "48": { defaultClass: "sprinkles_rowGap_48__1bzvwafp" }, "56": { defaultClass: "sprinkles_rowGap_56__1bzvwafq" }, "64": { defaultClass: "sprinkles_rowGap_64__1bzvwafr" } } }, columnGap: { values: { "0": { defaultClass: "sprinkles_columnGap_0__1bzvwafs" }, "2": { defaultClass: "sprinkles_columnGap_2__1bzvwaft" }, "4": { defaultClass: "sprinkles_columnGap_4__1bzvwafu" }, "6": { defaultClass: "sprinkles_columnGap_6__1bzvwafv" }, "8": { defaultClass: "sprinkles_columnGap_8__1bzvwafw" }, "12": { defaultClass: "sprinkles_columnGap_12__1bzvwafx" }, "16": { defaultClass: "sprinkles_columnGap_16__1bzvwafy" }, "20": { defaultClass: "sprinkles_columnGap_20__1bzvwafz" }, "24": { defaultClass: "sprinkles_columnGap_24__1bzvwaf10" }, "32": { defaultClass: "sprinkles_columnGap_32__1bzvwaf11" }, "40": { defaultClass: "sprinkles_columnGap_40__1bzvwaf12" }, "48": { defaultClass: "sprinkles_columnGap_48__1bzvwaf13" }, "56": { defaultClass: "sprinkles_columnGap_56__1bzvwaf14" }, "64": { defaultClass: "sprinkles_columnGap_64__1bzvwaf15" } } }, paddingTop: { values: { "0": { defaultClass: "sprinkles_paddingTop_0__1bzvwaf16" }, "2": { defaultClass: "sprinkles_paddingTop_2__1bzvwaf17" }, "4": { defaultClass: "sprinkles_paddingTop_4__1bzvwaf18" }, "6": { defaultClass: "sprinkles_paddingTop_6__1bzvwaf19" }, "8": { defaultClass: "sprinkles_paddingTop_8__1bzvwaf1a" }, "12": { defaultClass: "sprinkles_paddingTop_12__1bzvwaf1b" }, "16": { defaultClass: "sprinkles_paddingTop_16__1bzvwaf1c" }, "20": { defaultClass: "sprinkles_paddingTop_20__1bzvwaf1d" }, "24": { defaultClass: "sprinkles_paddingTop_24__1bzvwaf1e" }, "32": { defaultClass: "sprinkles_paddingTop_32__1bzvwaf1f" }, "40": { defaultClass: "sprinkles_paddingTop_40__1bzvwaf1g" }, "48": { defaultClass: "sprinkles_paddingTop_48__1bzvwaf1h" }, "56": { defaultClass: "sprinkles_paddingTop_56__1bzvwaf1i" }, "64": { defaultClass: "sprinkles_paddingTop_64__1bzvwaf1j" } } }, paddingBottom: { values: { "0": { defaultClass: "sprinkles_paddingBottom_0__1bzvwaf1k" }, "2": { defaultClass: "sprinkles_paddingBottom_2__1bzvwaf1l" }, "4": { defaultClass: "sprinkles_paddingBottom_4__1bzvwaf1m" }, "6": { defaultClass: "sprinkles_paddingBottom_6__1bzvwaf1n" }, "8": { defaultClass: "sprinkles_paddingBottom_8__1bzvwaf1o" }, "12": { defaultClass: "sprinkles_paddingBottom_12__1bzvwaf1p" }, "16": { defaultClass: "sprinkles_paddingBottom_16__1bzvwaf1q" }, "20": { defaultClass: "sprinkles_paddingBottom_20__1bzvwaf1r" }, "24": { defaultClass: "sprinkles_paddingBottom_24__1bzvwaf1s" }, "32": { defaultClass: "sprinkles_paddingBottom_32__1bzvwaf1t" }, "40": { defaultClass: "sprinkles_paddingBottom_40__1bzvwaf1u" }, "48": { defaultClass: "sprinkles_paddingBottom_48__1bzvwaf1v" }, "56": { defaultClass: "sprinkles_paddingBottom_56__1bzvwaf1w" }, "64": { defaultClass: "sprinkles_paddingBottom_64__1bzvwaf1x" } } }, paddingLeft: { values: { "0": { defaultClass: "sprinkles_paddingLeft_0__1bzvwaf1y" }, "2": { defaultClass: "sprinkles_paddingLeft_2__1bzvwaf1z" }, "4": { defaultClass: "sprinkles_paddingLeft_4__1bzvwaf20" }, "6": { defaultClass: "sprinkles_paddingLeft_6__1bzvwaf21" }, "8": { defaultClass: "sprinkles_paddingLeft_8__1bzvwaf22" }, "12": { defaultClass: "sprinkles_paddingLeft_12__1bzvwaf23" }, "16": { defaultClass: "sprinkles_paddingLeft_16__1bzvwaf24" }, "20": { defaultClass: "sprinkles_paddingLeft_20__1bzvwaf25" }, "24": { defaultClass: "sprinkles_paddingLeft_24__1bzvwaf26" }, "32": { defaultClass: "sprinkles_paddingLeft_32__1bzvwaf27" }, "40": { defaultClass: "sprinkles_paddingLeft_40__1bzvwaf28" }, "48": { defaultClass: "sprinkles_paddingLeft_48__1bzvwaf29" }, "56": { defaultClass: "sprinkles_paddingLeft_56__1bzvwaf2a" }, "64": { defaultClass: "sprinkles_paddingLeft_64__1bzvwaf2b" } } }, paddingRight: { values: { "0": { defaultClass: "sprinkles_paddingRight_0__1bzvwaf2c" }, "2": { defaultClass: "sprinkles_paddingRight_2__1bzvwaf2d" }, "4": { defaultClass: "sprinkles_paddingRight_4__1bzvwaf2e" }, "6": { defaultClass: "sprinkles_paddingRight_6__1bzvwaf2f" }, "8": { defaultClass: "sprinkles_paddingRight_8__1bzvwaf2g" }, "12": { defaultClass: "sprinkles_paddingRight_12__1bzvwaf2h" }, "16": { defaultClass: "sprinkles_paddingRight_16__1bzvwaf2i" }, "20": { defaultClass: "sprinkles_paddingRight_20__1bzvwaf2j" }, "24": { defaultClass: "sprinkles_paddingRight_24__1bzvwaf2k" }, "32": { defaultClass: "sprinkles_paddingRight_32__1bzvwaf2l" }, "40": { defaultClass: "sprinkles_paddingRight_40__1bzvwaf2m" }, "48": { defaultClass: "sprinkles_paddingRight_48__1bzvwaf2n" }, "56": { defaultClass: "sprinkles_paddingRight_56__1bzvwaf2o" }, "64": { defaultClass: "sprinkles_paddingRight_64__1bzvwaf2p" } } }, marginTop: { values: { "0": { defaultClass: "sprinkles_marginTop_0__1bzvwaf2q" }, "2": { defaultClass: "sprinkles_marginTop_2__1bzvwaf2r" }, "4": { defaultClass: "sprinkles_marginTop_4__1bzvwaf2s" }, "6": { defaultClass: "sprinkles_marginTop_6__1bzvwaf2t" }, "8": { defaultClass: "sprinkles_marginTop_8__1bzvwaf2u" }, "12": { defaultClass: "sprinkles_marginTop_12__1bzvwaf2v" }, "16": { defaultClass: "sprinkles_marginTop_16__1bzvwaf2w" }, "20": { defaultClass: "sprinkles_marginTop_20__1bzvwaf2x" }, "24": { defaultClass: "sprinkles_marginTop_24__1bzvwaf2y" }, "32": { defaultClass: "sprinkles_marginTop_32__1bzvwaf2z" }, "40": { defaultClass: "sprinkles_marginTop_40__1bzvwaf30" }, "48": { defaultClass: "sprinkles_marginTop_48__1bzvwaf31" }, "56": { defaultClass: "sprinkles_marginTop_56__1bzvwaf32" }, "64": { defaultClass: "sprinkles_marginTop_64__1bzvwaf33" }, auto: { defaultClass: "sprinkles_marginTop_auto__1bzvwaf34" } } }, marginBottom: { values: { "0": { defaultClass: "sprinkles_marginBottom_0__1bzvwaf35" }, "2": { defaultClass: "sprinkles_marginBottom_2__1bzvwaf36" }, "4": { defaultClass: "sprinkles_marginBottom_4__1bzvwaf37" }, "6": { defaultClass: "sprinkles_marginBottom_6__1bzvwaf38" }, "8": { defaultClass: "sprinkles_marginBottom_8__1bzvwaf39" }, "12": { defaultClass: "sprinkles_marginBottom_12__1bzvwaf3a" }, "16": { defaultClass: "sprinkles_marginBottom_16__1bzvwaf3b" }, "20": { defaultClass: "sprinkles_marginBottom_20__1bzvwaf3c" }, "24": { defaultClass: "sprinkles_marginBottom_24__1bzvwaf3d" }, "32": { defaultClass: "sprinkles_marginBottom_32__1bzvwaf3e" }, "40": { defaultClass: "sprinkles_marginBottom_40__1bzvwaf3f" }, "48": { defaultClass: "sprinkles_marginBottom_48__1bzvwaf3g" }, "56": { defaultClass: "sprinkles_marginBottom_56__1bzvwaf3h" }, "64": { defaultClass: "sprinkles_marginBottom_64__1bzvwaf3i" }, auto: { defaultClass: "sprinkles_marginBottom_auto__1bzvwaf3j" } } }, marginLeft: { values: { "0": { defaultClass: "sprinkles_marginLeft_0__1bzvwaf3k" }, "2": { defaultClass: "sprinkles_marginLeft_2__1bzvwaf3l" }, "4": { defaultClass: "sprinkles_marginLeft_4__1bzvwaf3m" }, "6": { defaultClass: "sprinkles_marginLeft_6__1bzvwaf3n" }, "8": { defaultClass: "sprinkles_marginLeft_8__1bzvwaf3o" }, "12": { defaultClass: "sprinkles_marginLeft_12__1bzvwaf3p" }, "16": { defaultClass: "sprinkles_marginLeft_16__1bzvwaf3q" }, "20": { defaultClass: "sprinkles_marginLeft_20__1bzvwaf3r" }, "24": { defaultClass: "sprinkles_marginLeft_24__1bzvwaf3s" }, "32": { defaultClass: "sprinkles_marginLeft_32__1bzvwaf3t" }, "40": { defaultClass: "sprinkles_marginLeft_40__1bzvwaf3u" }, "48": { defaultClass: "sprinkles_marginLeft_48__1bzvwaf3v" }, "56": { defaultClass: "sprinkles_marginLeft_56__1bzvwaf3w" }, "64": { defaultClass: "sprinkles_marginLeft_64__1bzvwaf3x" }, auto: { defaultClass: "sprinkles_marginLeft_auto__1bzvwaf3y" } } }, marginRight: { values: { "0": { defaultClass: "sprinkles_marginRight_0__1bzvwaf3z" }, "2": { defaultClass: "sprinkles_marginRight_2__1bzvwaf40" }, "4": { defaultClass: "sprinkles_marginRight_4__1bzvwaf41" }, "6": { defaultClass: "sprinkles_marginRight_6__1bzvwaf42" }, "8": { defaultClass: "sprinkles_marginRight_8__1bzvwaf43" }, "12": { defaultClass: "sprinkles_marginRight_12__1bzvwaf44" }, "16": { defaultClass: "sprinkles_marginRight_16__1bzvwaf45" }, "20": { defaultClass: "sprinkles_marginRight_20__1bzvwaf46" }, "24": { defaultClass: "sprinkles_marginRight_24__1bzvwaf47" }, "32": { defaultClass: "sprinkles_marginRight_32__1bzvwaf48" }, "40": { defaultClass: "sprinkles_marginRight_40__1bzvwaf49" }, "48": { defaultClass: "sprinkles_marginRight_48__1bzvwaf4a" }, "56": { defaultClass: "sprinkles_marginRight_56__1bzvwaf4b" }, "64": { defaultClass: "sprinkles_marginRight_64__1bzvwaf4c" }, auto: { defaultClass: "sprinkles_marginRight_auto__1bzvwaf4d" } } }, justifySelf: { values: { center: { defaultClass: "sprinkles_justifySelf_center__1bzvwaf4e" }, end: { defaultClass: "sprinkles_justifySelf_end__1bzvwaf4f" }, "flex-end": { defaultClass: "sprinkles_justifySelf_flex-end__1bzvwaf4g" }, "flex-start": { defaultClass: "sprinkles_justifySelf_flex-start__1bzvwaf4h" }, "self-end": { defaultClass: "sprinkles_justifySelf_self-end__1bzvwaf4i" }, "self-start": { defaultClass: "sprinkles_justifySelf_self-start__1bzvwaf4j" }, start: { defaultClass: "sprinkles_justifySelf_start__1bzvwaf4k" }, auto: { defaultClass: "sprinkles_justifySelf_auto__1bzvwaf4l" }, baseline: { defaultClass: "sprinkles_justifySelf_baseline__1bzvwaf4m" }, left: { defaultClass: "sprinkles_justifySelf_left__1bzvwaf4n" }, normal: { defaultClass: "sprinkles_justifySelf_normal__1bzvwaf4o" }, right: { defaultClass: "sprinkles_justifySelf_right__1bzvwaf4p" }, stretch: { defaultClass: "sprinkles_justifySelf_stretch__1bzvwaf4q" } } }, alignSelf: { values: { center: { defaultClass: "sprinkles_alignSelf_center__1bzvwaf4r" }, end: { defaultClass: "sprinkles_alignSelf_end__1bzvwaf4s" }, "flex-end": { defaultClass: "sprinkles_alignSelf_flex-end__1bzvwaf4t" }, "flex-start": { defaultClass: "sprinkles_alignSelf_flex-start__1bzvwaf4u" }, "self-end": { defaultClass: "sprinkles_alignSelf_self-end__1bzvwaf4v" }, "self-start": { defaultClass: "sprinkles_alignSelf_self-start__1bzvwaf4w" }, start: { defaultClass: "sprinkles_alignSelf_start__1bzvwaf4x" }, auto: { defaultClass: "sprinkles_alignSelf_auto__1bzvwaf4y" }, baseline: { defaultClass: "sprinkles_alignSelf_baseline__1bzvwaf4z" }, normal: { defaultClass: "sprinkles_alignSelf_normal__1bzvwaf50" }, stretch: { defaultClass: "sprinkles_alignSelf_stretch__1bzvwaf51" } } }, placeSelf: { values: { center: { defaultClass: "sprinkles_placeSelf_center__1bzvwaf52" }, end: { defaultClass: "sprinkles_placeSelf_end__1bzvwaf53" }, "flex-end": { defaultClass: "sprinkles_placeSelf_flex-end__1bzvwaf54" }, "flex-start": { defaultClass: "sprinkles_placeSelf_flex-start__1bzvwaf55" }, "self-end": { defaultClass: "sprinkles_placeSelf_self-end__1bzvwaf56" }, "self-start": { defaultClass: "sprinkles_placeSelf_self-start__1bzvwaf57" }, start: { defaultClass: "sprinkles_placeSelf_start__1bzvwaf58" }, auto: { defaultClass: "sprinkles_placeSelf_auto__1bzvwaf59" }, baseline: { defaultClass: "sprinkles_placeSelf_baseline__1bzvwaf5a" }, normal: { defaultClass: "sprinkles_placeSelf_normal__1bzvwaf5b" }, stretch: { defaultClass: "sprinkles_placeSelf_stretch__1bzvwaf5c" } } }, justifyItems: { values: { center: { defaultClass: "sprinkles_justifyItems_center__1bzvwaf5d" }, end: { defaultClass: "sprinkles_justifyItems_end__1bzvwaf5e" }, "flex-end": { defaultClass: "sprinkles_justifyItems_flex-end__1bzvwaf5f" }, "flex-start": { defaultClass: "sprinkles_justifyItems_flex-start__1bzvwaf5g" }, "self-end": { defaultClass: "sprinkles_justifyItems_self-end__1bzvwaf5h" }, "self-start": { defaultClass: "sprinkles_justifyItems_self-start__1bzvwaf5i" }, start: { defaultClass: "sprinkles_justifyItems_start__1bzvwaf5j" }, baseline: { defaultClass: "sprinkles_justifyItems_baseline__1bzvwaf5k" }, left: { defaultClass: "sprinkles_justifyItems_left__1bzvwaf5l" }, legacy: { defaultClass: "sprinkles_justifyItems_legacy__1bzvwaf5m" }, normal: { defaultClass: "sprinkles_justifyItems_normal__1bzvwaf5n" }, right: { defaultClass: "sprinkles_justifyItems_right__1bzvwaf5o" }, stretch: { defaultClass: "sprinkles_justifyItems_stretch__1bzvwaf5p" } } }, alignItems: { values: { center: { defaultClass: "sprinkles_alignItems_center__1bzvwaf5q" }, end: { defaultClass: "sprinkles_alignItems_end__1bzvwaf5r" }, "flex-end": { defaultClass: "sprinkles_alignItems_flex-end__1bzvwaf5s" }, "flex-start": { defaultClass: "sprinkles_alignItems_flex-start__1bzvwaf5t" }, "self-end": { defaultClass: "sprinkles_alignItems_self-end__1bzvwaf5u" }, "self-start": { defaultClass: "sprinkles_alignItems_self-start__1bzvwaf5v" }, start: { defaultClass: "sprinkles_alignItems_start__1bzvwaf5w" }, baseline: { defaultClass: "sprinkles_alignItems_baseline__1bzvwaf5x" }, normal: { defaultClass: "sprinkles_alignItems_normal__1bzvwaf5y" }, stretch: { defaultClass: "sprinkles_alignItems_stretch__1bzvwaf5z" } } }, placeItems: { values: { center: { defaultClass: "sprinkles_placeItems_center__1bzvwaf60" }, end: { defaultClass: "sprinkles_placeItems_end__1bzvwaf61" }, "flex-end": { defaultClass: "sprinkles_placeItems_flex-end__1bzvwaf62" }, "flex-start": { defaultClass: "sprinkles_placeItems_flex-start__1bzvwaf63" }, "self-end": { defaultClass: "sprinkles_placeItems_self-end__1bzvwaf64" }, "self-start": { defaultClass: "sprinkles_placeItems_self-start__1bzvwaf65" }, start: { defaultClass: "sprinkles_placeItems_start__1bzvwaf66" }, baseline: { defaultClass: "sprinkles_placeItems_baseline__1bzvwaf67" }, normal: { defaultClass: "sprinkles_placeItems_normal__1bzvwaf68" }, stretch: { defaultClass: "sprinkles_placeItems_stretch__1bzvwaf69" } } }, justifyContent: { values: { "space-around": { defaultClass: "sprinkles_justifyContent_space-around__1bzvwaf6a" }, "space-between": { defaultClass: "sprinkles_justifyContent_space-between__1bzvwaf6b" }, "space-evenly": { defaultClass: "sprinkles_justifyContent_space-evenly__1bzvwaf6c" }, stretch: { defaultClass: "sprinkles_justifyContent_stretch__1bzvwaf6d" }, center: { defaultClass: "sprinkles_justifyContent_center__1bzvwaf6e" }, end: { defaultClass: "sprinkles_justifyContent_end__1bzvwaf6f" }, "flex-end": { defaultClass: "sprinkles_justifyContent_flex-end__1bzvwaf6g" }, "flex-start": { defaultClass: "sprinkles_justifyContent_flex-start__1bzvwaf6h" }, start: { defaultClass: "sprinkles_justifyContent_start__1bzvwaf6i" }, left: { defaultClass: "sprinkles_justifyContent_left__1bzvwaf6j" }, normal: { defaultClass: "sprinkles_justifyContent_normal__1bzvwaf6k" }, right: { defaultClass: "sprinkles_justifyContent_right__1bzvwaf6l" } } }, alignContent: { values: { "space-around": { defaultClass: "sprinkles_alignContent_space-around__1bzvwaf6m" }, "space-between": { defaultClass: "sprinkles_alignContent_space-between__1bzvwaf6n" }, "space-evenly": { defaultClass: "sprinkles_alignContent_space-evenly__1bzvwaf6o" }, stretch: { defaultClass: "sprinkles_alignContent_stretch__1bzvwaf6p" }, center: { defaultClass: "sprinkles_alignContent_center__1bzvwaf6q" }, end: { defaultClass: "sprinkles_alignContent_end__1bzvwaf6r" }, "flex-end": { defaultClass: "sprinkles_alignContent_flex-end__1bzvwaf6s" }, "flex-start": { defaultClass: "sprinkles_alignContent_flex-start__1bzvwaf6t" }, start: { defaultClass: "sprinkles_alignContent_start__1bzvwaf6u" }, baseline: { defaultClass: "sprinkles_alignContent_baseline__1bzvwaf6v" }, normal: { defaultClass: "sprinkles_alignContent_normal__1bzvwaf6w" } } }, placeContent: { values: { "space-around": { defaultClass: "sprinkles_placeContent_space-around__1bzvwaf6x" }, "space-between": { defaultClass: "sprinkles_placeContent_space-between__1bzvwaf6y" }, "space-evenly": { defaultClass: "sprinkles_placeContent_space-evenly__1bzvwaf6z" }, stretch: { defaultClass: "sprinkles_placeContent_stretch__1bzvwaf70" }, center: { defaultClass: "sprinkles_placeContent_center__1bzvwaf71" }, end: { defaultClass: "sprinkles_placeContent_end__1bzvwaf72" }, "flex-end": { defaultClass: "sprinkles_placeContent_flex-end__1bzvwaf73" }, "flex-start": { defaultClass: "sprinkles_placeContent_flex-start__1bzvwaf74" }, start: { defaultClass: "sprinkles_placeContent_start__1bzvwaf75" }, baseline: { defaultClass: "sprinkles_placeContent_baseline__1bzvwaf76" }, normal: { defaultClass: "sprinkles_placeContent_normal__1bzvwaf77" } } }, display: { values: { flex: { defaultClass: "sprinkles_display_flex__1bzvwaf78" }, grid: { defaultClass: "sprinkles_display_grid__1bzvwaf79" } } } } };
4
+ var internalSprinkles = _ad221(globalSprinkleProperties);
5
+ export {
6
+ globalSprinkleProperties,
7
+ internalSprinkles
8
+ };
9
+ //# sourceMappingURL=sprinkles.sty.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/styles/sprinkles.css.ts"],
4
+ "sourcesContent": ["import './sprinkles.css';\nimport { createSprinkles as _ad221 } from '@vanilla-extract/sprinkles/createRuntimeSprinkles';\nexport var globalSprinkleProperties = {conditions:undefined,styles:{gap:{values:{'0':{defaultClass:'sprinkles_gap_0__1bzvwaf0'},'2':{defaultClass:'sprinkles_gap_2__1bzvwaf1'},'4':{defaultClass:'sprinkles_gap_4__1bzvwaf2'},'6':{defaultClass:'sprinkles_gap_6__1bzvwaf3'},'8':{defaultClass:'sprinkles_gap_8__1bzvwaf4'},'12':{defaultClass:'sprinkles_gap_12__1bzvwaf5'},'16':{defaultClass:'sprinkles_gap_16__1bzvwaf6'},'20':{defaultClass:'sprinkles_gap_20__1bzvwaf7'},'24':{defaultClass:'sprinkles_gap_24__1bzvwaf8'},'32':{defaultClass:'sprinkles_gap_32__1bzvwaf9'},'40':{defaultClass:'sprinkles_gap_40__1bzvwafa'},'48':{defaultClass:'sprinkles_gap_48__1bzvwafb'},'56':{defaultClass:'sprinkles_gap_56__1bzvwafc'},'64':{defaultClass:'sprinkles_gap_64__1bzvwafd'}}},rowGap:{values:{'0':{defaultClass:'sprinkles_rowGap_0__1bzvwafe'},'2':{defaultClass:'sprinkles_rowGap_2__1bzvwaff'},'4':{defaultClass:'sprinkles_rowGap_4__1bzvwafg'},'6':{defaultClass:'sprinkles_rowGap_6__1bzvwafh'},'8':{defaultClass:'sprinkles_rowGap_8__1bzvwafi'},'12':{defaultClass:'sprinkles_rowGap_12__1bzvwafj'},'16':{defaultClass:'sprinkles_rowGap_16__1bzvwafk'},'20':{defaultClass:'sprinkles_rowGap_20__1bzvwafl'},'24':{defaultClass:'sprinkles_rowGap_24__1bzvwafm'},'32':{defaultClass:'sprinkles_rowGap_32__1bzvwafn'},'40':{defaultClass:'sprinkles_rowGap_40__1bzvwafo'},'48':{defaultClass:'sprinkles_rowGap_48__1bzvwafp'},'56':{defaultClass:'sprinkles_rowGap_56__1bzvwafq'},'64':{defaultClass:'sprinkles_rowGap_64__1bzvwafr'}}},columnGap:{values:{'0':{defaultClass:'sprinkles_columnGap_0__1bzvwafs'},'2':{defaultClass:'sprinkles_columnGap_2__1bzvwaft'},'4':{defaultClass:'sprinkles_columnGap_4__1bzvwafu'},'6':{defaultClass:'sprinkles_columnGap_6__1bzvwafv'},'8':{defaultClass:'sprinkles_columnGap_8__1bzvwafw'},'12':{defaultClass:'sprinkles_columnGap_12__1bzvwafx'},'16':{defaultClass:'sprinkles_columnGap_16__1bzvwafy'},'20':{defaultClass:'sprinkles_columnGap_20__1bzvwafz'},'24':{defaultClass:'sprinkles_columnGap_24__1bzvwaf10'},'32':{defaultClass:'sprinkles_columnGap_32__1bzvwaf11'},'40':{defaultClass:'sprinkles_columnGap_40__1bzvwaf12'},'48':{defaultClass:'sprinkles_columnGap_48__1bzvwaf13'},'56':{defaultClass:'sprinkles_columnGap_56__1bzvwaf14'},'64':{defaultClass:'sprinkles_columnGap_64__1bzvwaf15'}}},paddingTop:{values:{'0':{defaultClass:'sprinkles_paddingTop_0__1bzvwaf16'},'2':{defaultClass:'sprinkles_paddingTop_2__1bzvwaf17'},'4':{defaultClass:'sprinkles_paddingTop_4__1bzvwaf18'},'6':{defaultClass:'sprinkles_paddingTop_6__1bzvwaf19'},'8':{defaultClass:'sprinkles_paddingTop_8__1bzvwaf1a'},'12':{defaultClass:'sprinkles_paddingTop_12__1bzvwaf1b'},'16':{defaultClass:'sprinkles_paddingTop_16__1bzvwaf1c'},'20':{defaultClass:'sprinkles_paddingTop_20__1bzvwaf1d'},'24':{defaultClass:'sprinkles_paddingTop_24__1bzvwaf1e'},'32':{defaultClass:'sprinkles_paddingTop_32__1bzvwaf1f'},'40':{defaultClass:'sprinkles_paddingTop_40__1bzvwaf1g'},'48':{defaultClass:'sprinkles_paddingTop_48__1bzvwaf1h'},'56':{defaultClass:'sprinkles_paddingTop_56__1bzvwaf1i'},'64':{defaultClass:'sprinkles_paddingTop_64__1bzvwaf1j'}}},paddingBottom:{values:{'0':{defaultClass:'sprinkles_paddingBottom_0__1bzvwaf1k'},'2':{defaultClass:'sprinkles_paddingBottom_2__1bzvwaf1l'},'4':{defaultClass:'sprinkles_paddingBottom_4__1bzvwaf1m'},'6':{defaultClass:'sprinkles_paddingBottom_6__1bzvwaf1n'},'8':{defaultClass:'sprinkles_paddingBottom_8__1bzvwaf1o'},'12':{defaultClass:'sprinkles_paddingBottom_12__1bzvwaf1p'},'16':{defaultClass:'sprinkles_paddingBottom_16__1bzvwaf1q'},'20':{defaultClass:'sprinkles_paddingBottom_20__1bzvwaf1r'},'24':{defaultClass:'sprinkles_paddingBottom_24__1bzvwaf1s'},'32':{defaultClass:'sprinkles_paddingBottom_32__1bzvwaf1t'},'40':{defaultClass:'sprinkles_paddingBottom_40__1bzvwaf1u'},'48':{defaultClass:'sprinkles_paddingBottom_48__1bzvwaf1v'},'56':{defaultClass:'sprinkles_paddingBottom_56__1bzvwaf1w'},'64':{defaultClass:'sprinkles_paddingBottom_64__1bzvwaf1x'}}},paddingLeft:{values:{'0':{defaultClass:'sprinkles_paddingLeft_0__1bzvwaf1y'},'2':{defaultClass:'sprinkles_paddingLeft_2__1bzvwaf1z'},'4':{defaultClass:'sprinkles_paddingLeft_4__1bzvwaf20'},'6':{defaultClass:'sprinkles_paddingLeft_6__1bzvwaf21'},'8':{defaultClass:'sprinkles_paddingLeft_8__1bzvwaf22'},'12':{defaultClass:'sprinkles_paddingLeft_12__1bzvwaf23'},'16':{defaultClass:'sprinkles_paddingLeft_16__1bzvwaf24'},'20':{defaultClass:'sprinkles_paddingLeft_20__1bzvwaf25'},'24':{defaultClass:'sprinkles_paddingLeft_24__1bzvwaf26'},'32':{defaultClass:'sprinkles_paddingLeft_32__1bzvwaf27'},'40':{defaultClass:'sprinkles_paddingLeft_40__1bzvwaf28'},'48':{defaultClass:'sprinkles_paddingLeft_48__1bzvwaf29'},'56':{defaultClass:'sprinkles_paddingLeft_56__1bzvwaf2a'},'64':{defaultClass:'sprinkles_paddingLeft_64__1bzvwaf2b'}}},paddingRight:{values:{'0':{defaultClass:'sprinkles_paddingRight_0__1bzvwaf2c'},'2':{defaultClass:'sprinkles_paddingRight_2__1bzvwaf2d'},'4':{defaultClass:'sprinkles_paddingRight_4__1bzvwaf2e'},'6':{defaultClass:'sprinkles_paddingRight_6__1bzvwaf2f'},'8':{defaultClass:'sprinkles_paddingRight_8__1bzvwaf2g'},'12':{defaultClass:'sprinkles_paddingRight_12__1bzvwaf2h'},'16':{defaultClass:'sprinkles_paddingRight_16__1bzvwaf2i'},'20':{defaultClass:'sprinkles_paddingRight_20__1bzvwaf2j'},'24':{defaultClass:'sprinkles_paddingRight_24__1bzvwaf2k'},'32':{defaultClass:'sprinkles_paddingRight_32__1bzvwaf2l'},'40':{defaultClass:'sprinkles_paddingRight_40__1bzvwaf2m'},'48':{defaultClass:'sprinkles_paddingRight_48__1bzvwaf2n'},'56':{defaultClass:'sprinkles_paddingRight_56__1bzvwaf2o'},'64':{defaultClass:'sprinkles_paddingRight_64__1bzvwaf2p'}}},marginTop:{values:{'0':{defaultClass:'sprinkles_marginTop_0__1bzvwaf2q'},'2':{defaultClass:'sprinkles_marginTop_2__1bzvwaf2r'},'4':{defaultClass:'sprinkles_marginTop_4__1bzvwaf2s'},'6':{defaultClass:'sprinkles_marginTop_6__1bzvwaf2t'},'8':{defaultClass:'sprinkles_marginTop_8__1bzvwaf2u'},'12':{defaultClass:'sprinkles_marginTop_12__1bzvwaf2v'},'16':{defaultClass:'sprinkles_marginTop_16__1bzvwaf2w'},'20':{defaultClass:'sprinkles_marginTop_20__1bzvwaf2x'},'24':{defaultClass:'sprinkles_marginTop_24__1bzvwaf2y'},'32':{defaultClass:'sprinkles_marginTop_32__1bzvwaf2z'},'40':{defaultClass:'sprinkles_marginTop_40__1bzvwaf30'},'48':{defaultClass:'sprinkles_marginTop_48__1bzvwaf31'},'56':{defaultClass:'sprinkles_marginTop_56__1bzvwaf32'},'64':{defaultClass:'sprinkles_marginTop_64__1bzvwaf33'},auto:{defaultClass:'sprinkles_marginTop_auto__1bzvwaf34'}}},marginBottom:{values:{'0':{defaultClass:'sprinkles_marginBottom_0__1bzvwaf35'},'2':{defaultClass:'sprinkles_marginBottom_2__1bzvwaf36'},'4':{defaultClass:'sprinkles_marginBottom_4__1bzvwaf37'},'6':{defaultClass:'sprinkles_marginBottom_6__1bzvwaf38'},'8':{defaultClass:'sprinkles_marginBottom_8__1bzvwaf39'},'12':{defaultClass:'sprinkles_marginBottom_12__1bzvwaf3a'},'16':{defaultClass:'sprinkles_marginBottom_16__1bzvwaf3b'},'20':{defaultClass:'sprinkles_marginBottom_20__1bzvwaf3c'},'24':{defaultClass:'sprinkles_marginBottom_24__1bzvwaf3d'},'32':{defaultClass:'sprinkles_marginBottom_32__1bzvwaf3e'},'40':{defaultClass:'sprinkles_marginBottom_40__1bzvwaf3f'},'48':{defaultClass:'sprinkles_marginBottom_48__1bzvwaf3g'},'56':{defaultClass:'sprinkles_marginBottom_56__1bzvwaf3h'},'64':{defaultClass:'sprinkles_marginBottom_64__1bzvwaf3i'},auto:{defaultClass:'sprinkles_marginBottom_auto__1bzvwaf3j'}}},marginLeft:{values:{'0':{defaultClass:'sprinkles_marginLeft_0__1bzvwaf3k'},'2':{defaultClass:'sprinkles_marginLeft_2__1bzvwaf3l'},'4':{defaultClass:'sprinkles_marginLeft_4__1bzvwaf3m'},'6':{defaultClass:'sprinkles_marginLeft_6__1bzvwaf3n'},'8':{defaultClass:'sprinkles_marginLeft_8__1bzvwaf3o'},'12':{defaultClass:'sprinkles_marginLeft_12__1bzvwaf3p'},'16':{defaultClass:'sprinkles_marginLeft_16__1bzvwaf3q'},'20':{defaultClass:'sprinkles_marginLeft_20__1bzvwaf3r'},'24':{defaultClass:'sprinkles_marginLeft_24__1bzvwaf3s'},'32':{defaultClass:'sprinkles_marginLeft_32__1bzvwaf3t'},'40':{defaultClass:'sprinkles_marginLeft_40__1bzvwaf3u'},'48':{defaultClass:'sprinkles_marginLeft_48__1bzvwaf3v'},'56':{defaultClass:'sprinkles_marginLeft_56__1bzvwaf3w'},'64':{defaultClass:'sprinkles_marginLeft_64__1bzvwaf3x'},auto:{defaultClass:'sprinkles_marginLeft_auto__1bzvwaf3y'}}},marginRight:{values:{'0':{defaultClass:'sprinkles_marginRight_0__1bzvwaf3z'},'2':{defaultClass:'sprinkles_marginRight_2__1bzvwaf40'},'4':{defaultClass:'sprinkles_marginRight_4__1bzvwaf41'},'6':{defaultClass:'sprinkles_marginRight_6__1bzvwaf42'},'8':{defaultClass:'sprinkles_marginRight_8__1bzvwaf43'},'12':{defaultClass:'sprinkles_marginRight_12__1bzvwaf44'},'16':{defaultClass:'sprinkles_marginRight_16__1bzvwaf45'},'20':{defaultClass:'sprinkles_marginRight_20__1bzvwaf46'},'24':{defaultClass:'sprinkles_marginRight_24__1bzvwaf47'},'32':{defaultClass:'sprinkles_marginRight_32__1bzvwaf48'},'40':{defaultClass:'sprinkles_marginRight_40__1bzvwaf49'},'48':{defaultClass:'sprinkles_marginRight_48__1bzvwaf4a'},'56':{defaultClass:'sprinkles_marginRight_56__1bzvwaf4b'},'64':{defaultClass:'sprinkles_marginRight_64__1bzvwaf4c'},auto:{defaultClass:'sprinkles_marginRight_auto__1bzvwaf4d'}}},justifySelf:{values:{center:{defaultClass:'sprinkles_justifySelf_center__1bzvwaf4e'},end:{defaultClass:'sprinkles_justifySelf_end__1bzvwaf4f'},'flex-end':{defaultClass:'sprinkles_justifySelf_flex-end__1bzvwaf4g'},'flex-start':{defaultClass:'sprinkles_justifySelf_flex-start__1bzvwaf4h'},'self-end':{defaultClass:'sprinkles_justifySelf_self-end__1bzvwaf4i'},'self-start':{defaultClass:'sprinkles_justifySelf_self-start__1bzvwaf4j'},start:{defaultClass:'sprinkles_justifySelf_start__1bzvwaf4k'},auto:{defaultClass:'sprinkles_justifySelf_auto__1bzvwaf4l'},baseline:{defaultClass:'sprinkles_justifySelf_baseline__1bzvwaf4m'},left:{defaultClass:'sprinkles_justifySelf_left__1bzvwaf4n'},normal:{defaultClass:'sprinkles_justifySelf_normal__1bzvwaf4o'},right:{defaultClass:'sprinkles_justifySelf_right__1bzvwaf4p'},stretch:{defaultClass:'sprinkles_justifySelf_stretch__1bzvwaf4q'}}},alignSelf:{values:{center:{defaultClass:'sprinkles_alignSelf_center__1bzvwaf4r'},end:{defaultClass:'sprinkles_alignSelf_end__1bzvwaf4s'},'flex-end':{defaultClass:'sprinkles_alignSelf_flex-end__1bzvwaf4t'},'flex-start':{defaultClass:'sprinkles_alignSelf_flex-start__1bzvwaf4u'},'self-end':{defaultClass:'sprinkles_alignSelf_self-end__1bzvwaf4v'},'self-start':{defaultClass:'sprinkles_alignSelf_self-start__1bzvwaf4w'},start:{defaultClass:'sprinkles_alignSelf_start__1bzvwaf4x'},auto:{defaultClass:'sprinkles_alignSelf_auto__1bzvwaf4y'},baseline:{defaultClass:'sprinkles_alignSelf_baseline__1bzvwaf4z'},normal:{defaultClass:'sprinkles_alignSelf_normal__1bzvwaf50'},stretch:{defaultClass:'sprinkles_alignSelf_stretch__1bzvwaf51'}}},placeSelf:{values:{center:{defaultClass:'sprinkles_placeSelf_center__1bzvwaf52'},end:{defaultClass:'sprinkles_placeSelf_end__1bzvwaf53'},'flex-end':{defaultClass:'sprinkles_placeSelf_flex-end__1bzvwaf54'},'flex-start':{defaultClass:'sprinkles_placeSelf_flex-start__1bzvwaf55'},'self-end':{defaultClass:'sprinkles_placeSelf_self-end__1bzvwaf56'},'self-start':{defaultClass:'sprinkles_placeSelf_self-start__1bzvwaf57'},start:{defaultClass:'sprinkles_placeSelf_start__1bzvwaf58'},auto:{defaultClass:'sprinkles_placeSelf_auto__1bzvwaf59'},baseline:{defaultClass:'sprinkles_placeSelf_baseline__1bzvwaf5a'},normal:{defaultClass:'sprinkles_placeSelf_normal__1bzvwaf5b'},stretch:{defaultClass:'sprinkles_placeSelf_stretch__1bzvwaf5c'}}},justifyItems:{values:{center:{defaultClass:'sprinkles_justifyItems_center__1bzvwaf5d'},end:{defaultClass:'sprinkles_justifyItems_end__1bzvwaf5e'},'flex-end':{defaultClass:'sprinkles_justifyItems_flex-end__1bzvwaf5f'},'flex-start':{defaultClass:'sprinkles_justifyItems_flex-start__1bzvwaf5g'},'self-end':{defaultClass:'sprinkles_justifyItems_self-end__1bzvwaf5h'},'self-start':{defaultClass:'sprinkles_justifyItems_self-start__1bzvwaf5i'},start:{defaultClass:'sprinkles_justifyItems_start__1bzvwaf5j'},baseline:{defaultClass:'sprinkles_justifyItems_baseline__1bzvwaf5k'},left:{defaultClass:'sprinkles_justifyItems_left__1bzvwaf5l'},legacy:{defaultClass:'sprinkles_justifyItems_legacy__1bzvwaf5m'},normal:{defaultClass:'sprinkles_justifyItems_normal__1bzvwaf5n'},right:{defaultClass:'sprinkles_justifyItems_right__1bzvwaf5o'},stretch:{defaultClass:'sprinkles_justifyItems_stretch__1bzvwaf5p'}}},alignItems:{values:{center:{defaultClass:'sprinkles_alignItems_center__1bzvwaf5q'},end:{defaultClass:'sprinkles_alignItems_end__1bzvwaf5r'},'flex-end':{defaultClass:'sprinkles_alignItems_flex-end__1bzvwaf5s'},'flex-start':{defaultClass:'sprinkles_alignItems_flex-start__1bzvwaf5t'},'self-end':{defaultClass:'sprinkles_alignItems_self-end__1bzvwaf5u'},'self-start':{defaultClass:'sprinkles_alignItems_self-start__1bzvwaf5v'},start:{defaultClass:'sprinkles_alignItems_start__1bzvwaf5w'},baseline:{defaultClass:'sprinkles_alignItems_baseline__1bzvwaf5x'},normal:{defaultClass:'sprinkles_alignItems_normal__1bzvwaf5y'},stretch:{defaultClass:'sprinkles_alignItems_stretch__1bzvwaf5z'}}},placeItems:{values:{center:{defaultClass:'sprinkles_placeItems_center__1bzvwaf60'},end:{defaultClass:'sprinkles_placeItems_end__1bzvwaf61'},'flex-end':{defaultClass:'sprinkles_placeItems_flex-end__1bzvwaf62'},'flex-start':{defaultClass:'sprinkles_placeItems_flex-start__1bzvwaf63'},'self-end':{defaultClass:'sprinkles_placeItems_self-end__1bzvwaf64'},'self-start':{defaultClass:'sprinkles_placeItems_self-start__1bzvwaf65'},start:{defaultClass:'sprinkles_placeItems_start__1bzvwaf66'},baseline:{defaultClass:'sprinkles_placeItems_baseline__1bzvwaf67'},normal:{defaultClass:'sprinkles_placeItems_normal__1bzvwaf68'},stretch:{defaultClass:'sprinkles_placeItems_stretch__1bzvwaf69'}}},justifyContent:{values:{'space-around':{defaultClass:'sprinkles_justifyContent_space-around__1bzvwaf6a'},'space-between':{defaultClass:'sprinkles_justifyContent_space-between__1bzvwaf6b'},'space-evenly':{defaultClass:'sprinkles_justifyContent_space-evenly__1bzvwaf6c'},stretch:{defaultClass:'sprinkles_justifyContent_stretch__1bzvwaf6d'},center:{defaultClass:'sprinkles_justifyContent_center__1bzvwaf6e'},end:{defaultClass:'sprinkles_justifyContent_end__1bzvwaf6f'},'flex-end':{defaultClass:'sprinkles_justifyContent_flex-end__1bzvwaf6g'},'flex-start':{defaultClass:'sprinkles_justifyContent_flex-start__1bzvwaf6h'},start:{defaultClass:'sprinkles_justifyContent_start__1bzvwaf6i'},left:{defaultClass:'sprinkles_justifyContent_left__1bzvwaf6j'},normal:{defaultClass:'sprinkles_justifyContent_normal__1bzvwaf6k'},right:{defaultClass:'sprinkles_justifyContent_right__1bzvwaf6l'}}},alignContent:{values:{'space-around':{defaultClass:'sprinkles_alignContent_space-around__1bzvwaf6m'},'space-between':{defaultClass:'sprinkles_alignContent_space-between__1bzvwaf6n'},'space-evenly':{defaultClass:'sprinkles_alignContent_space-evenly__1bzvwaf6o'},stretch:{defaultClass:'sprinkles_alignContent_stretch__1bzvwaf6p'},center:{defaultClass:'sprinkles_alignContent_center__1bzvwaf6q'},end:{defaultClass:'sprinkles_alignContent_end__1bzvwaf6r'},'flex-end':{defaultClass:'sprinkles_alignContent_flex-end__1bzvwaf6s'},'flex-start':{defaultClass:'sprinkles_alignContent_flex-start__1bzvwaf6t'},start:{defaultClass:'sprinkles_alignContent_start__1bzvwaf6u'},baseline:{defaultClass:'sprinkles_alignContent_baseline__1bzvwaf6v'},normal:{defaultClass:'sprinkles_alignContent_normal__1bzvwaf6w'}}},placeContent:{values:{'space-around':{defaultClass:'sprinkles_placeContent_space-around__1bzvwaf6x'},'space-between':{defaultClass:'sprinkles_placeContent_space-between__1bzvwaf6y'},'space-evenly':{defaultClass:'sprinkles_placeContent_space-evenly__1bzvwaf6z'},stretch:{defaultClass:'sprinkles_placeContent_stretch__1bzvwaf70'},center:{defaultClass:'sprinkles_placeContent_center__1bzvwaf71'},end:{defaultClass:'sprinkles_placeContent_end__1bzvwaf72'},'flex-end':{defaultClass:'sprinkles_placeContent_flex-end__1bzvwaf73'},'flex-start':{defaultClass:'sprinkles_placeContent_flex-start__1bzvwaf74'},start:{defaultClass:'sprinkles_placeContent_start__1bzvwaf75'},baseline:{defaultClass:'sprinkles_placeContent_baseline__1bzvwaf76'},normal:{defaultClass:'sprinkles_placeContent_normal__1bzvwaf77'}}},display:{values:{flex:{defaultClass:'sprinkles_display_flex__1bzvwaf78'},grid:{defaultClass:'sprinkles_display_grid__1bzvwaf79'}}}}};\nexport var internalSprinkles = _ad221(globalSprinkleProperties);"],
5
+ "mappings": "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",
6
+ "names": []
7
+ }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/typography/Link/Link.tsx"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport React, { ElementType, forwardRef, ReactElement } from 'react';\n\nimport {\n type DataTestId,\n type StylingProps,\n type WithChildren,\n _mergeProps,\n} from '../../core/index.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { linkCSS } from '../Link/Link.sty.js';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport type LinkProps<E extends ElementType> = PolymorphicComponentProps<\n E,\n WithChildren & StylingProps & DataTestId & MaskingProps\n>;\n\n/**\n * @public\n * Use the `Link` component to navigate to a different page within the application.\n * For external resources in a different domain, use the\n * {@link https://developer.dynatrace.com/reference/design-system/preview/typography/ExternalLink/ | `ExternalLink`}\n * component instead.\n */\nexport const Link: <E extends ElementType = 'a'>(\n props: LinkProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n <E extends ElementType>(\n {\n children,\n as,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n className: consumerClassName,\n style: consumerStyle,\n ...remainingProps\n }: LinkProps<E>,\n ref: typeof remainingProps.ref,\n ) => {\n const { focusProps, focusClassName } = useFocusRing({\n variant: 'primary',\n isMinimal: true,\n });\n const LinkTag = as || 'a';\n\n return (\n <LinkTag\n ref={ref}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n className={clsx(focusClassName, linkCSS, consumerClassName)}\n style={consumerStyle}\n {..._mergeProps(\n // Need to cast this one as the inference of mergeProps would generate\n // a not allowed overlap. The remainingProps type is too complex due to the\n // polymorphic inheritance.\n remainingProps as Record<string, unknown>,\n focusProps,\n )}\n >\n {children}\n </LinkTag>\n );\n },\n);\n\n(Link as typeof Link & { displayName: string }).displayName = 'Link';\n"],
5
- "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAsB,kBAAgC;AAE7D;AAAA,EAIE;AAAA,OACK;AACP,SAAS,oBAAoB;AAG7B,SAAS,eAAe;AAkBjB,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD,SAAS;AAAA,MACT,WAAW;AAAA,IACb,CAAC;AACD,UAAM,UAAU,MAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,gBAAgB,SAAS,iBAAiB;AAAA,QAC1D,OAAO;AAAA,QACN,GAAG;AAAA;AAAA;AAAA;AAAA,UAIF;AAAA,UACA;AAAA,QACF;AAAA;AAAA,MAEC;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport React, { ElementType, forwardRef, ReactElement } from 'react';\n\nimport {\n type PolymorphicComponentProps,\n type DataTestId,\n type StylingProps,\n type WithChildren,\n _mergeProps,\n} from '../../core/index.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport { linkCSS } from '../Link/Link.sty.js';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport type LinkProps<E extends ElementType> = PolymorphicComponentProps<\n E,\n WithChildren & StylingProps & DataTestId & MaskingProps\n>;\n\n/**\n * @public\n * Use the `Link` component to navigate to a different page within the application.\n * For external resources in a different domain, use the\n * {@link https://developer.dynatrace.com/reference/design-system/preview/typography/ExternalLink/ | `ExternalLink`}\n * component instead.\n */\nexport const Link: <E extends ElementType = 'a'>(\n props: LinkProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n <E extends ElementType>(\n {\n children,\n as,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n className: consumerClassName,\n style: consumerStyle,\n ...remainingProps\n }: LinkProps<E>,\n ref: typeof remainingProps.ref,\n ) => {\n const { focusProps, focusClassName } = useFocusRing({\n variant: 'primary',\n isMinimal: true,\n });\n const LinkTag = as || 'a';\n\n return (\n <LinkTag\n ref={ref}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n className={clsx(focusClassName, linkCSS, consumerClassName)}\n style={consumerStyle}\n {..._mergeProps(\n // Need to cast this one as the inference of mergeProps would generate\n // a not allowed overlap. The remainingProps type is too complex due to the\n // polymorphic inheritance.\n remainingProps as Record<string, unknown>,\n focusProps,\n )}\n >\n {children}\n </LinkTag>\n );\n },\n);\n\n(Link as typeof Link & { displayName: string }).displayName = 'Link';\n"],
5
+ "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAsB,kBAAgC;AAE7D;AAAA,EAKE;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,eAAe;AAkBjB,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,YAAY,eAAe,IAAI,aAAa;AAAA,MAClD,SAAS;AAAA,MACT,WAAW;AAAA,IACb,CAAC;AACD,UAAM,UAAU,MAAM;AAEtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,gBAAgB,SAAS,iBAAiB;AAAA,QAC1D,OAAO;AAAA,QACN,GAAG;AAAA;AAAA;AAAA;AAAA,UAIF;AAAA,UACA;AAAA,QACF;AAAA;AAAA,MAEC;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/typography/List/List.tsx"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { listCSS, listItemCSS } from './List.sty.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { Text } from '../Text/Text.js';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport interface ListProps<TOrdered extends boolean = false>\n extends WithChildren,\n StylingProps,\n DataTestId,\n MaskingProps {\n /**\n * Whether the List is ordered or not. This changes whether numbers or bullets are used.\n * @defaultValue false\n */\n ordered?: TOrdered;\n /**\n * Sets the text style for the List.\n * @defaultValue 'base'\n */\n textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';\n /**\n * Sets the text style for the List.\n * @defaultValue 'text'\n */\n fontStyle?: 'text' | 'code';\n /**\n * Sets the starting number of the first item in an ordered list.\n * The value is always treated as an integer (floor).\n * @defaultValue 1\n */\n start?: number;\n}\n\n/** Maps a list of (potentially) nested list items to HTML list structure. */\nfunction interleaveListItems(listItems: React.ReactNode) {\n const items: React.ReactNode[][] = [];\n\n React.Children.forEach(listItems, (listItem) => {\n if (React.isValidElement(listItem)) {\n if (listItem.type === List) {\n if (items.length === 0) {\n items.push([listItem]);\n } else {\n items[items.length - 1].push(listItem);\n }\n } else {\n items.push([listItem]);\n }\n }\n });\n\n return items.map((values, index) => {\n const itemKey = `list-item-${getItemKey(values, index)}`;\n return (\n <li key={itemKey} className={listItemCSS}>\n {values}\n </li>\n );\n });\n}\n\n/**\n * Generates a key for a list item. We try to avoid\n * generating [Object object] by looking down levels\n * recursively. If there is an existing key defined in\n * a descendant uses that as part of the key otherwise\n * if we get a string value, use that. Otherwise uses\n * the index if nothing was found.\n * @param values - nodes inside the list item\n * @param index - current zero based index\n * @returns a key generated for the item\n */\nfunction getItemKey(values: React.ReactNode[], index: number): string | number {\n const isArray = Array.isArray(values);\n const value = isArray ? values?.[0] : values;\n if (React.isValidElement(value)) {\n if (value.key) {\n return value.key;\n } else if (value.props && value.props.children) {\n return getItemKey(value.props.children, index);\n }\n return value as unknown as string | number;\n }\n\n if (value === undefined) {\n return index;\n }\n\n return value as unknown as string | number;\n}\n\n/**\n * @public\n * The `List` component groups a set of related content in a list and can be arbitrarily nested.\n * List items are preceded by either a consecutive number (for ordered lists) or a bullet point\n * (for unordered lists).\n */\nexport const List = /* @__PURE__ */ forwardRef(\n <TOrdered extends boolean = false>(\n props: ListProps<TOrdered>,\n ref: React.ForwardedRef<\n TOrdered extends true ? HTMLOListElement : HTMLUListElement\n >,\n ) => {\n const {\n children,\n ordered = false,\n textStyle,\n fontStyle,\n start = 1,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n className: consumerClassName,\n style: consumerStyle,\n ...remainingProps\n } = props;\n\n return (\n <Text\n ref={ref}\n as={ordered ? 'ol' : 'ul'}\n {...(ordered && {\n start,\n })}\n textStyle={textStyle}\n fontStyle={fontStyle}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n className={clsx(listCSS, consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\n >\n {interleaveListItems(children)}\n </Text>\n );\n },\n);\n\n(List as typeof List & { displayName: string }).displayName = 'List';\n"],
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport React, { forwardRef } from 'react';\n\nimport { listCSS, listItemCSS } from './List.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { Text } from '../Text/Text.js';\n\n/**\n * The props for the Link component.\n * @public\n */\nexport interface ListProps<TOrdered extends boolean = false>\n extends WithChildren,\n StylingProps,\n DataTestId,\n MaskingProps {\n /**\n * Whether the List is ordered or not. This changes whether numbers or bullets are used.\n * @defaultValue false\n */\n ordered?: TOrdered;\n /**\n * Sets the text style for the List.\n * @defaultValue 'base'\n */\n textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';\n /**\n * Sets the text style for the List.\n * @defaultValue 'text'\n */\n fontStyle?: 'text' | 'code';\n /**\n * Sets the starting number of the first item in an ordered list.\n * The value is always treated as an integer (floor).\n * @defaultValue 1\n */\n start?: number;\n}\n\n/** Maps a list of (potentially) nested list items to HTML list structure. */\nfunction interleaveListItems(listItems: React.ReactNode) {\n const items: React.ReactNode[][] = [];\n\n React.Children.forEach(listItems, (listItem) => {\n if (React.isValidElement(listItem)) {\n if (listItem.type === List) {\n if (items.length === 0) {\n items.push([listItem]);\n } else {\n items[items.length - 1].push(listItem);\n }\n } else {\n items.push([listItem]);\n }\n }\n });\n\n return items.map((values, index) => {\n const itemKey = `list-item-${getItemKey(values, index)}`;\n return (\n <li key={itemKey} className={listItemCSS}>\n {values}\n </li>\n );\n });\n}\n\n/**\n * Generates a key for a list item. We try to avoid\n * generating [Object object] by looking down levels\n * recursively. If there is an existing key defined in\n * a descendant uses that as part of the key otherwise\n * if we get a string value, use that. Otherwise uses\n * the index if nothing was found.\n * @param values - nodes inside the list item\n * @param index - current zero based index\n * @returns a key generated for the item\n */\nfunction getItemKey(values: React.ReactNode[], index: number): string | number {\n const isArray = Array.isArray(values);\n const value = isArray ? values?.[0] : values;\n if (React.isValidElement(value)) {\n if (value.key) {\n return value.key;\n } else if (value.props && value.props.children) {\n return getItemKey(value.props.children, index);\n }\n return value as unknown as string | number;\n }\n\n if (value === undefined) {\n return index;\n }\n\n return value as unknown as string | number;\n}\n\n/**\n * @public\n * The `List` component groups a set of related content in a list and can be arbitrarily nested.\n * List items are preceded by either a consecutive number (for ordered lists) or a bullet point\n * (for unordered lists).\n */\nexport const List = /* @__PURE__ */ forwardRef(\n <TOrdered extends boolean = false>(\n props: ListProps<TOrdered>,\n ref: React.ForwardedRef<\n TOrdered extends true ? HTMLOListElement : HTMLUListElement\n >,\n ) => {\n const {\n children,\n ordered = false,\n textStyle,\n fontStyle,\n start = 1,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n className: consumerClassName,\n style: consumerStyle,\n ...remainingProps\n } = props;\n\n return (\n <Text\n ref={ref}\n as={ordered ? 'ol' : 'ul'}\n {...(ordered && {\n start,\n })}\n textStyle={textStyle}\n fontStyle={fontStyle}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n className={clsx(listCSS, consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\n >\n {interleaveListItems(children)}\n </Text>\n );\n },\n);\n\n(List as typeof List & { displayName: string }).displayName = 'List';\n"],
5
5
  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAAS,kBAAkB;AAElC,SAAS,SAAS,mBAAmB;AAKrC,SAAS,YAAY;AAmCrB,SAAS,oBAAoB,WAA4B;AACvD,QAAM,QAA6B,CAAC;AAEpC,QAAM,SAAS,QAAQ,WAAW,CAAC,aAAa;AAC9C,QAAI,MAAM,eAAe,QAAQ,GAAG;AAClC,UAAI,SAAS,SAAS,MAAM;AAC1B,YAAI,MAAM,WAAW,GAAG;AACtB,gBAAM,KAAK,CAAC,QAAQ,CAAC;AAAA,QACvB,OAAO;AACL,gBAAM,MAAM,SAAS,CAAC,EAAE,KAAK,QAAQ;AAAA,QACvC;AAAA,MACF,OAAO;AACL,cAAM,KAAK,CAAC,QAAQ,CAAC;AAAA,MACvB;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO,MAAM,IAAI,CAAC,QAAQ,UAAU;AAClC,UAAM,UAAU,aAAa,WAAW,QAAQ,KAAK,CAAC;AACtD,WACE,oCAAC,QAAG,KAAK,SAAS,WAAW,eAC1B,MACH;AAAA,EAEJ,CAAC;AACH;AAaA,SAAS,WAAW,QAA2B,OAAgC;AAC7E,QAAM,UAAU,MAAM,QAAQ,MAAM;AACpC,QAAM,QAAQ,UAAU,SAAS,CAAC,IAAI;AACtC,MAAI,MAAM,eAAe,KAAK,GAAG;AAC/B,QAAI,MAAM,KAAK;AACb,aAAO,MAAM;AAAA,IACf,WAAW,MAAM,SAAS,MAAM,MAAM,UAAU;AAC9C,aAAO,WAAW,MAAM,MAAM,UAAU,KAAK;AAAA,IAC/C;AACA,WAAO;AAAA,EACT;AAEA,MAAI,UAAU,QAAW;AACvB,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAQO,MAAM,OAAuB;AAAA,EAClC,CACE,OACA,QAGG;AACH,UAAM;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,UAAU,OAAO;AAAA,QACpB,GAAI,WAAW;AAAA,UACd;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,WAAW,KAAK,SAAS,iBAAiB;AAAA,QAC1C,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEH,oBAAoB,QAAQ;AAAA,IAC/B;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/typography/Text/Text.tsx"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport React, { type ElementType, type ReactElement, forwardRef } from 'react';\n\nimport { textCSS } from './Text.sty.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { 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 { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * @public\n * The props for the text component without any props coming from polymorphing. */\nexport interface TextOwnProps\n extends WithChildren,\n DOMProps,\n AriaLabelingProps,\n StylingProps,\n DataTestId,\n MaskingProps {\n /** Sets the text style. Variants include \"base\", \"base-emphasized\", etc. */\n textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';\n /** Sets the font style. Can either be \"text\" or \"code\" */\n fontStyle?: 'text' | 'code';\n}\n\n/**\n * @public\n * Combined props for the text component - polymorphing and own props. */\nexport type TextProps<E extends ElementType> = PolymorphicComponentProps<\n E,\n TextOwnProps\n>;\n\n/**\n * @public\n * Use the `Text` component for text that is rendered without any semantic markup.\n */\nexport const Text: <E extends ElementType = 'span'>(\n props: TextProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n <E extends ElementType>(\n {\n children,\n textStyle,\n fontStyle,\n as,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n ...remainingProps\n }: TextProps<E>,\n ref: typeof remainingProps.ref,\n ) => {\n const TextTag = as || 'span';\n\n let ellipsis: undefined | 'singleLine' | 'multiLine';\n\n return (\n <TextTag\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n ref={ref}\n className={clsx([\n textCSS({ ellipsis }),\n (fontStyle || textStyle) && textStyleCSS({ fontStyle, textStyle }),\n consumerClassName,\n ])}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </TextTag>\n );\n },\n);\n\n(Text as typeof Text & { displayName: string }).displayName = 'Text';\n"],
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport React, { type ElementType, type ReactElement, forwardRef } from 'react';\n\nimport { textCSS } from './Text.sty.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 { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * @public\n * The props for the text component without any props coming from polymorphing. */\nexport interface TextOwnProps\n extends WithChildren,\n DOMProps,\n AriaLabelingProps,\n StylingProps,\n DataTestId,\n MaskingProps {\n /** Sets the text style. Variants include \"base\", \"base-emphasized\", etc. */\n textStyle?: 'base' | 'base-emphasized' | 'small' | 'small-emphasized';\n /** Sets the font style. Can either be \"text\" or \"code\" */\n fontStyle?: 'text' | 'code';\n}\n\n/**\n * @public\n * Combined props for the text component - polymorphing and own props. */\nexport type TextProps<E extends ElementType> = PolymorphicComponentProps<\n E,\n TextOwnProps\n>;\n\n/**\n * @public\n * Use the `Text` component for text that is rendered without any semantic markup.\n */\nexport const Text: <E extends ElementType = 'span'>(\n props: TextProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n <E extends ElementType>(\n {\n children,\n textStyle,\n fontStyle,\n as,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n ...remainingProps\n }: TextProps<E>,\n ref: typeof remainingProps.ref,\n ) => {\n const TextTag = as || 'span';\n\n let ellipsis: undefined | 'singleLine' | 'multiLine';\n\n return (\n <TextTag\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n ref={ref}\n className={clsx([\n textCSS({ ellipsis }),\n (fontStyle || textStyle) && textStyleCSS({ fontStyle, textStyle }),\n consumerClassName,\n ])}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </TextTag>\n );\n },\n);\n\n(Text as typeof Text & { displayName: string }).displayName = 'Text';\n"],
5
5
  "mappings": "AAAA,OAAO,UAAU;AACjB,OAAO,SAA8C,kBAAkB;AAEvE,SAAS,eAAe;AAQxB,SAAS,oBAAoB;AA8BtB,MAAM,OAE8B;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU,MAAM;AAEtB,QAAI;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB;AAAA,QACA,WAAW,KAAK;AAAA,UACd,QAAQ,EAAE,SAAS,CAAC;AAAA,WACnB,aAAa,cAAc,aAAa,EAAE,WAAW,UAAU,CAAC;AAAA,UACjE;AAAA,QACF,CAAC;AAAA,QACD,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AAEC,KAA+C,cAAc;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/typography/TextEllipsis/TextEllipsis.tsx"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport React, {\n forwardRef,\n HTMLAttributes,\n RefObject,\n useLayoutEffect,\n useRef,\n} from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { textEllipsisCSS } from './TextEllipsis.sty.js';\nimport { _useFontsUpdated } from '../../core/hooks/useFontsUpdated.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport type { _Font } from '../utils.js';\nimport { _centerEllipsizeText } from '../utils.js';\n\n/**\n * Available modes for how overly long text is truncated and where the ellipsis is placed.\n * @internal\n * */\nexport type _TruncationMode = 'start' | 'middle' | 'end';\n\n/**\n * The props for the TextEllipsis component.\n * @public\n * */\nexport interface TextEllipsisProps\n extends HTMLAttributes<HTMLSpanElement>,\n StylingProps,\n DataTestId,\n MaskingProps {\n /** The children (as text) passed to the component. */\n children: string;\n /**\n * The mode used for for truncating the text, either at the start, in the middle or at the end.\n * @defaultValue 'end'\n */\n truncationMode?: 'start' | 'middle' | 'end';\n /** Gets called when text needs to get truncated due to lack of horizontal space. */\n onTextOverflow?: (ellipsized: boolean) => void;\n}\n\n/**\n * Returns an object containing all font-related CSS properties from\n * a given DOM element that are relevant for rendering formatted text\n * in a 2D canvas context.\n *\n * @param textWrapper - The HTML element to extract the CSS properties from\n */\nfunction getFontProps(textWrapper: HTMLSpanElement): _Font {\n const computedStyle = window.getComputedStyle(textWrapper, null);\n\n return {\n fontStyle: computedStyle.getPropertyValue('font-style'),\n fontWeight: computedStyle.getPropertyValue('font-weight'),\n fontSize: computedStyle.getPropertyValue('font-size'),\n fontFamily: computedStyle.getPropertyValue('font-family'),\n };\n}\n\n/**\n * Determines whether a CSS text-ellipsis is currently rendered in a container.\n * Note: `containerWidth` is only passed to avoid unnecessary reflows by calling `getBoundingClientRect()`\n */\nfunction isNativeEllipsisActive(\n textWrapper: HTMLSpanElement,\n containerWidth: number,\n): boolean {\n const textWidth =\n Math.floor(textWrapper.getBoundingClientRect().width * 100) / 100;\n\n return textWidth > containerWidth;\n}\n\n/**\n * Detects whether a given formatted text has enough space within its\n * parent container and applies or removes an ellipsis accordingly.\n *\n * @param originalText - The text to be truncated if its width exceeds <code>maxWidthInPx</code>\n * @param truncationMode - The mode used for for truncating the text, either at the start, in the middle or at the end\n * @param containerRef - Object ref pointing towards the root element of the TextEllipsis component\n * @param wasEllipsized - Whether an ellipsis was applied during the last render cycle\n * @param onTextOverflow - Callback that gets called whenever the state of the ellipsis changes since the last render cycle\n */\nfunction renderEllipsizedText(\n originalText: string,\n truncationMode: TextEllipsisProps['truncationMode'],\n containerRef: RefObject<HTMLSpanElement>,\n wasEllipsized: boolean,\n onTextOverflow?: (ellipsized: boolean) => void,\n): boolean {\n const containerElement = containerRef.current;\n const textWrapper: HTMLSpanElement | null =\n (containerElement?.firstElementChild as HTMLSpanElement) || null;\n\n if (containerElement !== null && textWrapper !== null) {\n if (textWrapper.textContent !== originalText) {\n textWrapper.textContent = originalText; // always reset to full text before measuring container width\n }\n\n const containerWidth =\n Math.ceil(containerElement.getBoundingClientRect().width * 100) / 100;\n\n if (truncationMode === 'middle') {\n if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n const ellipsizedText = _centerEllipsizeText(\n originalText,\n getFontProps(textWrapper),\n containerWidth,\n );\n textWrapper.textContent = ellipsizedText;\n\n if (ellipsizedText !== originalText) {\n if (onTextOverflow && !wasEllipsized) {\n onTextOverflow(true);\n }\n\n return true;\n }\n }\n\n if (onTextOverflow && wasEllipsized) {\n onTextOverflow(false);\n }\n } else if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n if (onTextOverflow && !wasEllipsized) {\n onTextOverflow(true);\n }\n\n return true;\n } else if (onTextOverflow && wasEllipsized) {\n onTextOverflow(false);\n }\n }\n\n return false;\n}\n\nconst ComputedTextEllipsis = /* @__PURE__ */ forwardRef<\n HTMLSpanElement,\n TextEllipsisProps\n>((props, forwardedRef) => {\n const {\n children,\n truncationMode = 'end',\n onTextOverflow,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n ...remainingProps\n } = props;\n\n // resize observer is needed to re-render the component in case of resizing\n const { ref: observerContainerRef } = useResizeObserver<HTMLSpanElement>();\n const containerRef = useRef<HTMLSpanElement | null>(null);\n const ellipsisStateRef = useRef<boolean>(false);\n const mergedRef = useMergeRefs<HTMLSpanElement | null>([\n observerContainerRef,\n (instance: HTMLSpanElement) => {\n containerRef.current = instance;\n },\n forwardedRef,\n ]);\n const containerWidth = containerRef.current?.getBoundingClientRect().width;\n const fontsUpdated = _useFontsUpdated();\n\n useLayoutEffect(() => {\n ellipsisStateRef.current = renderEllipsizedText(\n children,\n truncationMode,\n containerRef,\n ellipsisStateRef.current,\n onTextOverflow,\n );\n }, [containerWidth, children, truncationMode, fontsUpdated, onTextOverflow]);\n\n return (\n <span\n ref={mergedRef}\n aria-label={children}\n data-ellipsis\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\n >\n <span>{children}</span>\n </span>\n );\n});\n\nconst CssTextEllipsis = /* @__PURE__ */ forwardRef<\n HTMLSpanElement,\n TextEllipsisProps\n>((props, forwardedRef) => {\n const {\n children,\n truncationMode = 'end',\n onTextOverflow,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n } = props;\n\n return (\n <span\n ref={forwardedRef}\n aria-label={children}\n data-ellipsis\n data-testid={dataTestId}\n className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\n >\n <span>{children}</span>\n </span>\n );\n});\n\n/**\n * @public\n * Use the `TextEllipsis` component to truncate text and show an ellipsis whenever\n * there is insufficient space to render the entire text. While some of our Strato\n * components provide ellipsis out of the box, you need to take care of this yourself\n * when writing your own components.\n */\nexport const TextEllipsis = /* @__PURE__ */ forwardRef<\n HTMLSpanElement,\n TextEllipsisProps\n>((props, forwardedRef) => {\n // in case onTextOverflow is not defined and the ellipsis is start or end\n // we can use css only which is significantly more performant\n const cssOnlyEllipsis =\n !props.onTextOverflow && props.truncationMode !== 'middle';\n\n return cssOnlyEllipsis ? (\n <CssTextEllipsis ref={forwardedRef} {...props} />\n ) : (\n <ComputedTextEllipsis ref={forwardedRef} {...props} />\n );\n});\n\n(TextEllipsis as typeof TextEllipsis & { displayName: string }).displayName =\n 'TextEllipsis';\n"],
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport React, {\n forwardRef,\n HTMLAttributes,\n RefObject,\n useLayoutEffect,\n useRef,\n} from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport { textEllipsisCSS } from './TextEllipsis.sty.js';\nimport { _useFontsUpdated } from '../../core/hooks/useFontsUpdated.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type _Font } from '../utils.js';\nimport { _centerEllipsizeText } from '../utils.js';\n\n/**\n * Available modes for how overly long text is truncated and where the ellipsis is placed.\n * @internal\n * */\nexport type _TruncationMode = 'start' | 'middle' | 'end';\n\n/**\n * The props for the TextEllipsis component.\n * @public\n * */\nexport interface TextEllipsisProps\n extends HTMLAttributes<HTMLSpanElement>,\n StylingProps,\n DataTestId,\n MaskingProps {\n /** The children (as text) passed to the component. */\n children: string;\n /**\n * The mode used for for truncating the text, either at the start, in the middle or at the end.\n * @defaultValue 'end'\n */\n truncationMode?: 'start' | 'middle' | 'end';\n /** Gets called when text needs to get truncated due to lack of horizontal space. */\n onTextOverflow?: (ellipsized: boolean) => void;\n}\n\n/**\n * Returns an object containing all font-related CSS properties from\n * a given DOM element that are relevant for rendering formatted text\n * in a 2D canvas context.\n *\n * @param textWrapper - The HTML element to extract the CSS properties from\n */\nfunction getFontProps(textWrapper: HTMLSpanElement): _Font {\n const computedStyle = window.getComputedStyle(textWrapper, null);\n\n return {\n fontStyle: computedStyle.getPropertyValue('font-style'),\n fontWeight: computedStyle.getPropertyValue('font-weight'),\n fontSize: computedStyle.getPropertyValue('font-size'),\n fontFamily: computedStyle.getPropertyValue('font-family'),\n };\n}\n\n/**\n * Determines whether a CSS text-ellipsis is currently rendered in a container.\n * Note: `containerWidth` is only passed to avoid unnecessary reflows by calling `getBoundingClientRect()`\n */\nfunction isNativeEllipsisActive(\n textWrapper: HTMLSpanElement,\n containerWidth: number,\n): boolean {\n const textWidth =\n Math.floor(textWrapper.getBoundingClientRect().width * 100) / 100;\n\n return textWidth > containerWidth;\n}\n\n/**\n * Detects whether a given formatted text has enough space within its\n * parent container and applies or removes an ellipsis accordingly.\n *\n * @param originalText - The text to be truncated if its width exceeds <code>maxWidthInPx</code>\n * @param truncationMode - The mode used for for truncating the text, either at the start, in the middle or at the end\n * @param containerRef - Object ref pointing towards the root element of the TextEllipsis component\n * @param wasEllipsized - Whether an ellipsis was applied during the last render cycle\n * @param onTextOverflow - Callback that gets called whenever the state of the ellipsis changes since the last render cycle\n */\nfunction renderEllipsizedText(\n originalText: string,\n truncationMode: TextEllipsisProps['truncationMode'],\n containerRef: RefObject<HTMLSpanElement>,\n wasEllipsized: boolean,\n onTextOverflow?: (ellipsized: boolean) => void,\n): boolean {\n const containerElement = containerRef.current;\n const textWrapper: HTMLSpanElement | null =\n (containerElement?.firstElementChild as HTMLSpanElement) || null;\n\n if (containerElement !== null && textWrapper !== null) {\n if (textWrapper.textContent !== originalText) {\n textWrapper.textContent = originalText; // always reset to full text before measuring container width\n }\n\n const containerWidth =\n Math.ceil(containerElement.getBoundingClientRect().width * 100) / 100;\n\n if (truncationMode === 'middle') {\n if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n const ellipsizedText = _centerEllipsizeText(\n originalText,\n getFontProps(textWrapper),\n containerWidth,\n );\n textWrapper.textContent = ellipsizedText;\n\n if (ellipsizedText !== originalText) {\n if (onTextOverflow && !wasEllipsized) {\n onTextOverflow(true);\n }\n\n return true;\n }\n }\n\n if (onTextOverflow && wasEllipsized) {\n onTextOverflow(false);\n }\n } else if (isNativeEllipsisActive(textWrapper, containerWidth)) {\n if (onTextOverflow && !wasEllipsized) {\n onTextOverflow(true);\n }\n\n return true;\n } else if (onTextOverflow && wasEllipsized) {\n onTextOverflow(false);\n }\n }\n\n return false;\n}\n\nconst ComputedTextEllipsis = /* @__PURE__ */ forwardRef<\n HTMLSpanElement,\n TextEllipsisProps\n>((props, forwardedRef) => {\n const {\n children,\n truncationMode = 'end',\n onTextOverflow,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n ...remainingProps\n } = props;\n\n // resize observer is needed to re-render the component in case of resizing\n const { ref: observerContainerRef } = useResizeObserver<HTMLSpanElement>();\n const containerRef = useRef<HTMLSpanElement | null>(null);\n const ellipsisStateRef = useRef<boolean>(false);\n const mergedRef = useMergeRefs<HTMLSpanElement | null>([\n observerContainerRef,\n (instance: HTMLSpanElement) => {\n containerRef.current = instance;\n },\n forwardedRef,\n ]);\n const containerWidth = containerRef.current?.getBoundingClientRect().width;\n const fontsUpdated = _useFontsUpdated();\n\n useLayoutEffect(() => {\n ellipsisStateRef.current = renderEllipsizedText(\n children,\n truncationMode,\n containerRef,\n ellipsisStateRef.current,\n onTextOverflow,\n );\n }, [containerWidth, children, truncationMode, fontsUpdated, onTextOverflow]);\n\n return (\n <span\n ref={mergedRef}\n aria-label={children}\n data-ellipsis\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\n >\n <span>{children}</span>\n </span>\n );\n});\n\nconst CssTextEllipsis = /* @__PURE__ */ forwardRef<\n HTMLSpanElement,\n TextEllipsisProps\n>((props, forwardedRef) => {\n const {\n children,\n truncationMode = 'end',\n onTextOverflow,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n } = props;\n\n return (\n <span\n ref={forwardedRef}\n aria-label={children}\n data-ellipsis\n data-testid={dataTestId}\n className={clsx(textEllipsisCSS({ truncationMode }), consumerClassName)}\n style={consumerStyle}\n {...remainingProps}\n >\n <span>{children}</span>\n </span>\n );\n});\n\n/**\n * @public\n * Use the `TextEllipsis` component to truncate text and show an ellipsis whenever\n * there is insufficient space to render the entire text. While some of our Strato\n * components provide ellipsis out of the box, you need to take care of this yourself\n * when writing your own components.\n */\nexport const TextEllipsis = /* @__PURE__ */ forwardRef<\n HTMLSpanElement,\n TextEllipsisProps\n>((props, forwardedRef) => {\n // in case onTextOverflow is not defined and the ellipsis is start or end\n // we can use css only which is significantly more performant\n const cssOnlyEllipsis =\n !props.onTextOverflow && props.truncationMode !== 'middle';\n\n return cssOnlyEllipsis ? (\n <CssTextEllipsis ref={forwardedRef} {...props} />\n ) : (\n <ComputedTextEllipsis ref={forwardedRef} {...props} />\n );\n});\n\n(TextEllipsis as typeof TextEllipsis & { displayName: string }).displayName =\n 'TextEllipsis';\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  export * from './core/index.js';
2
+ export * from './content/index.js';
2
3
  export * from './layouts/index.js';
4
+ export * from './styles/index.js';
3
5
  export * from './typography/index.js';
package/index.js CHANGED
@@ -15,5 +15,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
15
15
  var src_exports = {};
16
16
  module.exports = __toCommonJS(src_exports);
17
17
  __reExport(src_exports, require("./core/index.js"), module.exports);
18
+ __reExport(src_exports, require("./content/index.js"), module.exports);
18
19
  __reExport(src_exports, require("./layouts/index.js"), module.exports);
20
+ __reExport(src_exports, require("./styles/index.js"), module.exports);
19
21
  __reExport(src_exports, require("./typography/index.js"), module.exports);
package/lang/en.json CHANGED
@@ -1,4 +1,10 @@
1
1
  {
2
+ "3J6qHQEUwDxvZuIl": [
3
+ {
4
+ "type": 0,
5
+ "value": "Loading"
6
+ }
7
+ ],
2
8
  "JzYy8MUVfPcyf4l5": [
3
9
  {
4
10
  "type": 0,
@@ -1,4 +1,8 @@
1
1
  {
2
+ "3J6qHQEUwDxvZuIl": {
3
+ "notes": "Default label for the progress-bar.",
4
+ "translation": "Loading"
5
+ },
2
6
  "JzYy8MUVfPcyf4l5": {
3
7
  "notes": "External link icon that describes the external link icon",
4
8
  "translation": "Opening the link in a new window"
@@ -0,0 +1,8 @@
1
+ .Container_containerCSS__f32lcd0 {
2
+ border-style: var(--dt-borders-style-default, solid);
3
+ border-width: var(--dt-borders-width-emphasized, 2px);
4
+ border-radius: var(--dt-borders-radius-container-default, 12px);
5
+ color: var(--vars_text__6levse0);
6
+ border-color: var(--vars_borderColor__6levse2);
7
+ background-color: var(--vars_background__6levse1);
8
+ }
@@ -0,0 +1,34 @@
1
+ import { type ElementType, type ReactElement } from 'react';
2
+ import type { DataTestId } from '../../core/types/data-props.js';
3
+ import type { MaskingProps } from '../../core/types/masking-props.js';
4
+ import type { PolymorphicComponentProps } from '../../core/types/polymorph.js';
5
+ import type { StylingProps } from '../../core/types/styling-props.js';
6
+ import type { WithChildren } from '../../core/types/with-children.js';
7
+ import { type LayoutSizeProps, type SpacingProps } from '../../styles/index.js';
8
+ /**
9
+ * Accepted properties for Container
10
+ * @public
11
+ */
12
+ export interface ContainerOwnProps extends WithChildren, DataTestId, StylingProps, SpacingProps, LayoutSizeProps, MaskingProps {
13
+ /**
14
+ * The visual style of the container.
15
+ * @defaultValue 'default'
16
+ */
17
+ variant?: 'minimal' | 'default' | 'emphasized' | 'accent';
18
+ /**
19
+ * The color of the container. This should be chosen based on the context
20
+ * the container is used in.
21
+ * @defaultValue 'neutral'
22
+ */
23
+ color?: 'primary' | 'neutral' | 'success' | 'warning' | 'critical';
24
+ }
25
+ /**
26
+ * Merge own props with others inherited from the underlying element type
27
+ * @public
28
+ */
29
+ export type ContainerProps<E extends ElementType> = PolymorphicComponentProps<E, ContainerOwnProps>;
30
+ /**
31
+ * Containers can be used to group content that is related. Additionally, they emphasize and highlight your grouped content.
32
+ * @public
33
+ */
34
+ export declare const Container: <E extends ElementType = 'div'>(props: ContainerProps<E>) => ReactElement | null;
@@ -0,0 +1,80 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+ var Container_exports = {};
29
+ __export(Container_exports, {
30
+ Container: () => Container
31
+ });
32
+ module.exports = __toCommonJS(Container_exports);
33
+ var import_clsx = __toESM(require("clsx"));
34
+ var import_react = __toESM(require("react"));
35
+ var import_Container_css = require("./Container.sty.js");
36
+ var import_container_css = require("../../styles/container.sty.js");
37
+ var import_styles = require("../../styles/index.js");
38
+ const Container = /* @__PURE__ */ (0, import_react.forwardRef)(
39
+ ({
40
+ as,
41
+ children,
42
+ variant = "default",
43
+ color = "neutral",
44
+ className: consumerClassName,
45
+ style: consumerStyle,
46
+ "data-testid": dataTestId,
47
+ "data-dtrum-mask": dataDtrumMask,
48
+ "data-dtrum-allow": dataDtrumAllow,
49
+ ...remainingProps
50
+ }, ref) => {
51
+ const [spacingClasses, sprinkleRestProps] = (0, import_styles._getSpacingSprinkles)(
52
+ remainingProps,
53
+ { padding: 16 }
54
+ );
55
+ const [sizeStyles, sizeRestProps] = (0, import_styles._getLayoutSizeStyles)(sprinkleRestProps);
56
+ const Component = as || "div";
57
+ return /* @__PURE__ */ import_react.default.createElement(
58
+ Component,
59
+ {
60
+ ref,
61
+ className: (0, import_clsx.default)(
62
+ (0, import_container_css.containerColorsCSS)({ color, variant }),
63
+ import_Container_css.containerCSS,
64
+ spacingClasses,
65
+ consumerClassName
66
+ ),
67
+ style: {
68
+ ...sizeStyles,
69
+ ...consumerStyle
70
+ },
71
+ "data-testid": dataTestId,
72
+ "data-dtrum-mask": dataDtrumMask,
73
+ "data-dtrum-allow": dataDtrumAllow,
74
+ ...sizeRestProps
75
+ },
76
+ children
77
+ );
78
+ }
79
+ );
80
+ Container.displayName = "Container";
@@ -0,0 +1 @@
1
+ export declare const containerCSS: string;
@@ -0,0 +1,25 @@
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 Container_css_exports = {};
19
+ __export(Container_css_exports, {
20
+ containerCSS: () => containerCSS
21
+ });
22
+ module.exports = __toCommonJS(Container_css_exports);
23
+ var import_container_css_ts_vanilla = require("../../styles/container.css");
24
+ var import_Container_css_ts_vanilla = require("./Container.css");
25
+ var containerCSS = "Container_containerCSS__f32lcd0";
@@ -0,0 +1,23 @@
1
+ import { type ElementType, type ReactElement } from 'react';
2
+ import { type DataTestId } from '../../core/types/data-props.js';
3
+ import { type MaskingProps } from '../../core/types/masking-props.js';
4
+ import { type PolymorphicComponentProps } from '../../core/types/polymorph.js';
5
+ import { type StylingProps } from '../../core/types/styling-props.js';
6
+ import { type WithChildren } from '../../core/types/with-children.js';
7
+ import { type FlexStyleProps } from '../../styles/getFlexStyles.js';
8
+ /**
9
+ * Flex own props.
10
+ * @public
11
+ */
12
+ export type FlexOwnProps = WithChildren & StylingProps & FlexStyleProps & DataTestId & MaskingProps;
13
+ /**
14
+ * Merge own props with others inherited from the underlying element type.
15
+ * @public
16
+ */
17
+ export type FlexProps<E extends ElementType> = PolymorphicComponentProps<E, FlexOwnProps>;
18
+ /**
19
+ * The `Flex` component can be used to layout its children with Flexbox.
20
+ * The component can be customized with flexbox props.
21
+ * @public
22
+ */
23
+ export declare const Flex: <E extends ElementType = 'div'>(props: FlexProps<E>) => ReactElement | null;
@@ -0,0 +1,72 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __export = (target, all) => {
8
+ for (var name in all)
9
+ __defProp(target, name, { get: all[name], enumerable: true });
10
+ };
11
+ var __copyProps = (to, from, except, desc) => {
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from))
14
+ if (!__hasOwnProp.call(to, key) && key !== except)
15
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
+ }
17
+ return to;
18
+ };
19
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
20
+ // If the importer is in node compatibility mode or this is not an ESM
21
+ // file that has been converted to a CommonJS file using a Babel-
22
+ // compatible transform (i.e. "__esModule" has not been set), then set
23
+ // "default" to the CommonJS "module.exports" for node compatibility.
24
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
25
+ mod
26
+ ));
27
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
28
+ var Flex_exports = {};
29
+ __export(Flex_exports, {
30
+ Flex: () => Flex
31
+ });
32
+ module.exports = __toCommonJS(Flex_exports);
33
+ var import_clsx = __toESM(require("clsx"));
34
+ var import_react = __toESM(require("react"));
35
+ var import_getFlexStyles = require("../../styles/getFlexStyles.js");
36
+ const Flex = /* @__PURE__ */ (0, import_react.forwardRef)(
37
+ (props, forwardedRef) => {
38
+ const {
39
+ children,
40
+ id,
41
+ as,
42
+ className: consumerClassName,
43
+ style: consumerStyle,
44
+ "data-testid": dataTestId,
45
+ "data-dtrum-mask": dataDtrumMask,
46
+ "data-dtrum-allow": dataDtrumAllow,
47
+ ...remainingProps
48
+ } = props;
49
+ const [flexClassNames, flexStyles, nonFlexStyleProps] = (0, import_getFlexStyles.getFlexStyles)(
50
+ remainingProps,
51
+ { gap: 8 }
52
+ );
53
+ const Component = as ?? "div";
54
+ return /* @__PURE__ */ import_react.default.createElement(
55
+ Component,
56
+ {
57
+ ref: forwardedRef,
58
+ id,
59
+ "data-testid": dataTestId,
60
+ "data-dtrum-mask": dataDtrumMask,
61
+ "data-dtrum-allow": dataDtrumAllow,
62
+ className: (0, import_clsx.default)(flexClassNames, consumerClassName),
63
+ style: {
64
+ ...flexStyles,
65
+ ...consumerStyle
66
+ },
67
+ ...nonFlexStyleProps
68
+ },
69
+ children
70
+ );
71
+ }
72
+ );
@@ -0,0 +1,23 @@
1
+ import { ElementType, ReactElement } from 'react';
2
+ import { type DataTestId } from '../../core/types/data-props.js';
3
+ import { type MaskingProps } from '../../core/types/masking-props.js';
4
+ import { type PolymorphicComponentProps } from '../../core/types/polymorph.js';
5
+ import { type StylingProps } from '../../core/types/styling-props.js';
6
+ import { type WithChildren } from '../../core/types/with-children.js';
7
+ import { type GridStyleProps } from '../../styles/getGridStyles.js';
8
+ /**
9
+ * Defines grid own props.
10
+ * @public
11
+ */
12
+ export type GridOwnProps = WithChildren & StylingProps & GridStyleProps & DataTestId & MaskingProps;
13
+ /**
14
+ * Merge own props with others inherited from the underlying element type.
15
+ * @public
16
+ */
17
+ export type GridProps<E extends ElementType> = PolymorphicComponentProps<E, GridOwnProps>;
18
+ /**
19
+ * The `Grid` component can be used to layout its children with the help of CSS Grid.
20
+ * The component can be customized with CSS grid props.
21
+ * @public
22
+ */
23
+ export declare const Grid: <E extends ElementType = 'div'>(props: GridProps<E>) => ReactElement | null;