@telus-uds/components-web 3.3.0 → 4.0.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 (378) hide show
  1. package/.eslintrc.cjs +7 -1
  2. package/CHANGELOG.md +38 -2
  3. package/jest.config.cjs +1 -1
  4. package/lib/cjs/Badge/Badge.js +128 -0
  5. package/lib/cjs/Badge/index.js +9 -0
  6. package/lib/cjs/BlockQuote/BlockQuote.js +256 -0
  7. package/lib/cjs/BlockQuote/index.js +9 -0
  8. package/lib/cjs/Breadcrumbs/Breadcrumbs.js +264 -0
  9. package/lib/cjs/Breadcrumbs/Item/Item.js +180 -0
  10. package/lib/cjs/Breadcrumbs/index.js +13 -0
  11. package/lib/cjs/Callout/Callout.js +141 -0
  12. package/lib/cjs/Callout/index.js +9 -0
  13. package/lib/cjs/Card/Card.js +257 -0
  14. package/lib/cjs/Card/CardContent.js +97 -0
  15. package/lib/cjs/Card/CardFooter.js +85 -0
  16. package/lib/cjs/Card/index.js +9 -0
  17. package/lib/cjs/Countdown/Countdown.js +268 -0
  18. package/lib/cjs/Countdown/Segment.js +108 -0
  19. package/lib/cjs/Countdown/constants.js +10 -0
  20. package/lib/cjs/Countdown/dictionary.js +28 -0
  21. package/lib/cjs/Countdown/index.js +9 -0
  22. package/lib/cjs/Countdown/types.js +31 -0
  23. package/lib/cjs/Countdown/useCountdown.js +32 -0
  24. package/lib/cjs/DatePicker/CalendarContainer.js +214 -0
  25. package/lib/cjs/DatePicker/DatePicker.js +525 -0
  26. package/lib/cjs/DatePicker/dictionary.js +125 -0
  27. package/lib/cjs/DatePicker/index.js +9 -0
  28. package/lib/cjs/DatePicker/reactDatesCss.js +9 -0
  29. package/lib/cjs/Disclaimer/Disclaimer.js +61 -0
  30. package/lib/cjs/Disclaimer/index.js +13 -0
  31. package/lib/cjs/Footnote/Footnote.js +637 -0
  32. package/lib/cjs/Footnote/FootnoteLink.js +125 -0
  33. package/lib/cjs/Footnote/dictionary.js +18 -0
  34. package/lib/cjs/Footnote/index.js +11 -0
  35. package/lib/cjs/IconButton/IconButton.js +62 -0
  36. package/lib/cjs/IconButton/index.js +9 -0
  37. package/lib/cjs/Image/Image.js +90 -0
  38. package/lib/cjs/Image/index.js +20 -0
  39. package/lib/cjs/Image/server.js +11 -0
  40. package/lib/cjs/List/List.js +8 -0
  41. package/lib/cjs/List/ListItem.js +34 -0
  42. package/lib/cjs/List/index.js +11 -0
  43. package/lib/cjs/NavigationBar/NavigationBar.js +282 -0
  44. package/lib/cjs/NavigationBar/NavigationItem.js +94 -0
  45. package/lib/cjs/NavigationBar/NavigationSubMenu.js +164 -0
  46. package/lib/{NavigationBar → cjs/NavigationBar}/collapseItems.js +9 -4
  47. package/lib/cjs/NavigationBar/index.js +11 -0
  48. package/lib/cjs/NavigationBar/resolveItemSelection.js +22 -0
  49. package/lib/cjs/OptimizeImage/OptimizeImage.js +99 -0
  50. package/lib/cjs/OptimizeImage/index.js +9 -0
  51. package/lib/cjs/OptimizeImage/utils/getFallbackUrl.js +14 -0
  52. package/lib/cjs/OptimizeImage/utils/getImageUrls.js +19 -0
  53. package/lib/cjs/OptimizeImage/utils/getOptimizedUrl.js +24 -0
  54. package/lib/cjs/OptimizeImage/utils/hasWebpSupport.js +34 -0
  55. package/lib/cjs/OptimizeImage/utils/index.js +34 -0
  56. package/lib/cjs/OptimizeImage/utils/isSvgUrl.js +9 -0
  57. package/lib/cjs/OrderedList/Item.js +151 -0
  58. package/lib/cjs/OrderedList/ItemBase.js +34 -0
  59. package/lib/cjs/OrderedList/OrderedList.js +92 -0
  60. package/lib/cjs/OrderedList/OrderedListBase.js +52 -0
  61. package/lib/cjs/OrderedList/constants.js +8 -0
  62. package/lib/cjs/OrderedList/index.js +11 -0
  63. package/lib/cjs/Paragraph/Paragraph.js +97 -0
  64. package/lib/cjs/Paragraph/index.js +9 -0
  65. package/lib/cjs/PreviewCard/AuthorDate.js +63 -0
  66. package/lib/cjs/PreviewCard/PreviewCard.js +215 -0
  67. package/lib/cjs/PreviewCard/index.js +9 -0
  68. package/lib/cjs/PriceLockup/PriceLockup.js +356 -0
  69. package/lib/cjs/PriceLockup/index.js +9 -0
  70. package/lib/cjs/PriceLockup/tokens.js +66 -0
  71. package/lib/cjs/Progress/ProgressBar.js +99 -0
  72. package/lib/cjs/Progress/index.js +11 -0
  73. package/lib/cjs/QuantitySelector/QuantitySelector.js +267 -0
  74. package/lib/cjs/QuantitySelector/SideButton.js +77 -0
  75. package/lib/cjs/QuantitySelector/dictionary.js +32 -0
  76. package/lib/cjs/QuantitySelector/index.js +9 -0
  77. package/lib/cjs/QuantitySelector/styles.js +16 -0
  78. package/lib/cjs/ResponsiveImage/ResponsiveImage.js +107 -0
  79. package/lib/cjs/ResponsiveImage/index.js +9 -0
  80. package/lib/cjs/Ribbon/Ribbon.js +222 -0
  81. package/lib/cjs/Ribbon/index.js +9 -0
  82. package/lib/cjs/SkeletonProvider/SkeletonImage.js +45 -0
  83. package/lib/cjs/SkeletonProvider/SkeletonProvider.js +63 -0
  84. package/lib/cjs/SkeletonProvider/SkeletonTypography.js +44 -0
  85. package/lib/cjs/SkeletonProvider/index.js +9 -0
  86. package/lib/cjs/Span/Span.js +79 -0
  87. package/lib/cjs/Span/index.js +9 -0
  88. package/lib/cjs/Spinner/Spinner.js +221 -0
  89. package/lib/cjs/Spinner/SpinnerContent.js +100 -0
  90. package/lib/cjs/Spinner/constants.js +10 -0
  91. package/lib/cjs/Spinner/index.js +9 -0
  92. package/lib/cjs/StoryCard/StoryCard.js +219 -0
  93. package/lib/cjs/StoryCard/index.js +9 -0
  94. package/lib/cjs/Table/Body.js +24 -0
  95. package/lib/cjs/Table/Cell.js +187 -0
  96. package/lib/cjs/Table/Header.js +32 -0
  97. package/lib/cjs/Table/Row.js +41 -0
  98. package/lib/cjs/Table/SubHeading.js +30 -0
  99. package/lib/cjs/Table/Table.js +124 -0
  100. package/lib/cjs/Table/index.js +19 -0
  101. package/lib/cjs/TermsAndConditions/ExpandCollapse.js +160 -0
  102. package/lib/cjs/TermsAndConditions/TermsAndConditions.js +283 -0
  103. package/lib/cjs/TermsAndConditions/dictionary.js +22 -0
  104. package/lib/cjs/TermsAndConditions/index.js +13 -0
  105. package/lib/cjs/Testimonial/Testimonial.js +240 -0
  106. package/lib/cjs/Testimonial/index.js +9 -0
  107. package/lib/cjs/Toast/Toast.js +165 -0
  108. package/lib/cjs/Toast/index.js +9 -0
  109. package/lib/cjs/Video/ControlBar/ControlBar.js +294 -0
  110. package/lib/cjs/Video/ControlBar/Controls/VideoButton/VideoButton.js +76 -0
  111. package/lib/cjs/Video/ControlBar/Controls/VideoMenu/VideoMenu.js +169 -0
  112. package/lib/cjs/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.js +211 -0
  113. package/lib/cjs/Video/ControlBar/Controls/VolumeSlider/VolumeSlider.js +197 -0
  114. package/lib/cjs/Video/MiddleControlButton/MiddleControlButton.js +78 -0
  115. package/lib/cjs/Video/Video.js +964 -0
  116. package/lib/cjs/Video/index.js +9 -0
  117. package/lib/cjs/Video/videoText.js +61 -0
  118. package/lib/cjs/VideoPicker/VideoPicker.js +197 -0
  119. package/lib/cjs/VideoPicker/VideoPickerPlayer.js +54 -0
  120. package/lib/cjs/VideoPicker/VideoPickerThumbnail.js +223 -0
  121. package/lib/cjs/VideoPicker/VideoSlider.js +88 -0
  122. package/lib/cjs/VideoPicker/index.js +9 -0
  123. package/lib/cjs/VideoPicker/videoPropType.js +17 -0
  124. package/lib/cjs/WaffleGrid/WaffleGrid.js +164 -0
  125. package/lib/cjs/WaffleGrid/index.js +9 -0
  126. package/lib/cjs/WebVideo/WebVideo.js +197 -0
  127. package/lib/cjs/WebVideo/index.js +9 -0
  128. package/lib/cjs/WebVideo/utils/index.js +57 -0
  129. package/lib/cjs/baseExports.js +438 -0
  130. package/lib/cjs/index.js +317 -0
  131. package/lib/cjs/server.js +13 -0
  132. package/lib/cjs/shared/ConditionalWrapper/ConditionalWrapper.js +29 -0
  133. package/lib/cjs/shared/ConditionalWrapper/index.js +9 -0
  134. package/lib/cjs/shared/FullBleedContent/FullBleedContent.js +108 -0
  135. package/lib/cjs/shared/FullBleedContent/getFullBleedBorderRadius.js +61 -0
  136. package/lib/cjs/shared/FullBleedContent/index.js +23 -0
  137. package/lib/cjs/shared/FullBleedContent/useFullBleedContentProps.js +61 -0
  138. package/lib/cjs/shared/VideoSplash/SplashButton/SplashButton.js +91 -0
  139. package/lib/cjs/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js +229 -0
  140. package/lib/cjs/shared/VideoSplash/VideoSplash.js +72 -0
  141. package/lib/cjs/shared/VideoSplash/helpers.js +32 -0
  142. package/lib/cjs/utils/index.js +88 -0
  143. package/lib/cjs/utils/isElementFocusable.js +14 -0
  144. package/lib/cjs/utils/logger.js +24 -0
  145. package/lib/cjs/utils/media.js +45 -0
  146. package/lib/cjs/utils/renderStructuredContent.js +71 -0
  147. package/lib/cjs/utils/scrollToAnchor.js +25 -0
  148. package/lib/cjs/utils/ssr.js +50 -0
  149. package/lib/cjs/utils/theming/get-theme-from-server.js +24 -0
  150. package/lib/cjs/utils/theming/with-client-theme.js +31 -0
  151. package/lib/cjs/utils/theming/with-server-theme.js +33 -0
  152. package/lib/cjs/utils/transforms.js +11 -0
  153. package/lib/cjs/utils/useOverlaidPosition.js +222 -0
  154. package/lib/cjs/utils/useTypographyTheme.js +30 -0
  155. package/lib/{Badge → esm/Badge}/Badge.js +11 -19
  156. package/lib/{BlockQuote → esm/BlockQuote}/BlockQuote.js +17 -31
  157. package/lib/{Breadcrumbs → esm/Breadcrumbs}/Breadcrumbs.js +6 -5
  158. package/lib/{Breadcrumbs → esm/Breadcrumbs}/Item/Item.js +10 -6
  159. package/lib/{Callout → esm/Callout}/Callout.js +6 -5
  160. package/lib/{Card → esm/Card}/Card.js +10 -10
  161. package/lib/{Card → esm/Card}/CardContent.js +6 -5
  162. package/lib/{Card → esm/Card}/CardFooter.js +6 -5
  163. package/lib/{Countdown → esm/Countdown}/Countdown.js +53 -32
  164. package/lib/{Countdown → esm/Countdown}/Segment.js +6 -6
  165. package/lib/{DatePicker → esm/DatePicker}/CalendarContainer.js +5 -5
  166. package/lib/{DatePicker → esm/DatePicker}/DatePicker.js +24 -20
  167. package/lib/esm/DatePicker/reactDatesCss.js +3 -0
  168. package/lib/{Disclaimer → esm/Disclaimer}/Disclaimer.js +6 -5
  169. package/lib/{Footnote → esm/Footnote}/Footnote.js +43 -22
  170. package/lib/{Footnote → esm/Footnote}/FootnoteLink.js +6 -5
  171. package/lib/{NavigationBar → esm/NavigationBar}/NavigationBar.js +19 -20
  172. package/lib/{NavigationBar → esm/NavigationBar}/NavigationItem.js +6 -5
  173. package/lib/{NavigationBar → esm/NavigationBar}/NavigationSubMenu.js +1 -2
  174. package/lib/esm/NavigationBar/collapseItems.js +37 -0
  175. package/lib/{NavigationBar → esm/NavigationBar}/resolveItemSelection.js +1 -1
  176. package/lib/{OrderedList → esm/OrderedList}/Item.js +10 -6
  177. package/lib/{OrderedList → esm/OrderedList}/ItemBase.js +5 -5
  178. package/lib/{OrderedList → esm/OrderedList}/OrderedList.js +8 -8
  179. package/lib/{OrderedList → esm/OrderedList}/OrderedListBase.js +5 -5
  180. package/lib/{Paragraph → esm/Paragraph}/Paragraph.js +8 -16
  181. package/lib/{PreviewCard → esm/PreviewCard}/PreviewCard.js +10 -7
  182. package/lib/{PriceLockup → esm/PriceLockup}/PriceLockup.js +59 -69
  183. package/lib/{Progress → esm/Progress}/ProgressBar.js +6 -6
  184. package/lib/esm/QuantitySelector/styles.js +9 -0
  185. package/lib/{Ribbon → esm/Ribbon}/Ribbon.js +31 -57
  186. package/lib/{SkeletonProvider → esm/SkeletonProvider}/SkeletonImage.js +3 -4
  187. package/lib/esm/SkeletonProvider/SkeletonTypography.js +37 -0
  188. package/lib/{Span → esm/Span}/Span.js +7 -6
  189. package/lib/{Spinner → esm/Spinner}/Spinner.js +18 -8
  190. package/lib/{Spinner → esm/Spinner}/SpinnerContent.js +6 -5
  191. package/lib/{StoryCard → esm/StoryCard}/StoryCard.js +10 -7
  192. package/lib/{Table → esm/Table}/Cell.js +16 -45
  193. package/lib/esm/Table/Row.js +34 -0
  194. package/lib/{Table → esm/Table}/Table.js +18 -20
  195. package/lib/{TermsAndConditions → esm/TermsAndConditions}/ExpandCollapse.js +15 -8
  196. package/lib/{TermsAndConditions → esm/TermsAndConditions}/TermsAndConditions.js +22 -9
  197. package/lib/{Testimonial → esm/Testimonial}/Testimonial.js +26 -10
  198. package/lib/{Toast → esm/Toast}/Toast.js +15 -67
  199. package/lib/{Video → esm/Video}/ControlBar/ControlBar.js +18 -8
  200. package/lib/{Video → esm/Video}/ControlBar/Controls/VideoButton/VideoButton.js +7 -7
  201. package/lib/{Video → esm/Video}/ControlBar/Controls/VideoMenu/VideoMenu.js +14 -7
  202. package/lib/{Video → esm/Video}/ControlBar/Controls/VideoProgressBar/VideoProgressBar.js +14 -7
  203. package/lib/{Video → esm/Video}/ControlBar/Controls/VolumeSlider/VolumeSlider.js +10 -6
  204. package/lib/{Video → esm/Video}/MiddleControlButton/MiddleControlButton.js +6 -5
  205. package/lib/{Video → esm/Video}/Video.js +28 -12
  206. package/lib/{VideoPicker → esm/VideoPicker}/VideoPicker.js +21 -46
  207. package/lib/{VideoPicker → esm/VideoPicker}/VideoPickerThumbnail.js +19 -54
  208. package/lib/{WaffleGrid → esm/WaffleGrid}/WaffleGrid.js +14 -7
  209. package/lib/{WebVideo → esm/WebVideo}/WebVideo.js +14 -9
  210. package/lib/{baseExports.js → esm/baseExports.js} +1 -1
  211. package/lib/{index.js → esm/index.js} +1 -2
  212. package/lib/{shared → esm/shared}/FullBleedContent/FullBleedContent.js +5 -5
  213. package/lib/{shared → esm/shared}/VideoSplash/SplashButton/SplashButton.js +9 -6
  214. package/lib/{shared → esm/shared}/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js +17 -8
  215. package/lib/{shared → esm/shared}/VideoSplash/VideoSplash.js +6 -5
  216. package/lib/{utils → esm/utils}/index.js +1 -2
  217. package/lib/{utils → esm/utils}/scrollToAnchor.js +2 -2
  218. package/lib/{utils → esm/utils}/ssr.js +8 -4
  219. package/lib/{utils → esm/utils}/useOverlaidPosition.js +2 -4
  220. package/package.json +17 -16
  221. package/src/Badge/Badge.jsx +4 -3
  222. package/src/BlockQuote/BlockQuote.jsx +2 -3
  223. package/src/Breadcrumbs/Breadcrumbs.jsx +2 -3
  224. package/src/Breadcrumbs/Item/Item.jsx +2 -3
  225. package/src/Callout/Callout.jsx +2 -4
  226. package/src/Card/Card.jsx +1 -3
  227. package/src/Card/CardContent.jsx +2 -3
  228. package/src/Card/CardFooter.jsx +2 -3
  229. package/src/Countdown/Countdown.jsx +62 -36
  230. package/src/Countdown/Segment.jsx +1 -3
  231. package/src/DatePicker/CalendarContainer.jsx +1 -3
  232. package/src/DatePicker/DatePicker.jsx +2 -3
  233. package/src/DatePicker/reactDatesCss.js +1 -3
  234. package/src/Disclaimer/Disclaimer.jsx +2 -3
  235. package/src/Footnote/Footnote.jsx +2 -10
  236. package/src/Footnote/FootnoteLink.jsx +2 -3
  237. package/src/NavigationBar/NavigationBar.jsx +2 -3
  238. package/src/NavigationBar/NavigationItem.jsx +2 -3
  239. package/src/OrderedList/Item.jsx +2 -3
  240. package/src/OrderedList/ItemBase.jsx +1 -3
  241. package/src/OrderedList/OrderedList.jsx +2 -3
  242. package/src/OrderedList/OrderedListBase.jsx +1 -3
  243. package/src/Paragraph/Paragraph.jsx +2 -4
  244. package/src/PreviewCard/PreviewCard.jsx +1 -3
  245. package/src/PriceLockup/PriceLockup.jsx +2 -3
  246. package/src/Progress/ProgressBar.jsx +1 -3
  247. package/src/QuantitySelector/styles.js +1 -3
  248. package/src/Ribbon/Ribbon.jsx +2 -3
  249. package/src/Span/Span.jsx +2 -4
  250. package/src/Spinner/Spinner.jsx +2 -3
  251. package/src/Spinner/SpinnerContent.jsx +2 -3
  252. package/src/StoryCard/StoryCard.jsx +1 -3
  253. package/src/Table/Cell.jsx +4 -5
  254. package/src/Table/Row.jsx +13 -2
  255. package/src/Table/Table.jsx +14 -5
  256. package/src/TermsAndConditions/ExpandCollapse.jsx +6 -4
  257. package/src/TermsAndConditions/TermsAndConditions.jsx +2 -3
  258. package/src/Testimonial/Testimonial.jsx +2 -3
  259. package/src/Toast/Toast.jsx +2 -3
  260. package/src/Video/ControlBar/ControlBar.jsx +2 -4
  261. package/src/Video/ControlBar/Controls/VideoButton/VideoButton.jsx +2 -4
  262. package/src/Video/ControlBar/Controls/VideoMenu/VideoMenu.jsx +2 -4
  263. package/src/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.jsx +2 -4
  264. package/src/Video/ControlBar/Controls/VolumeSlider/VolumeSlider.jsx +2 -4
  265. package/src/Video/MiddleControlButton/MiddleControlButton.jsx +2 -4
  266. package/src/Video/Video.jsx +2 -4
  267. package/src/VideoPicker/VideoPicker.jsx +2 -4
  268. package/src/VideoPicker/VideoPickerThumbnail.jsx +1 -3
  269. package/src/WaffleGrid/WaffleGrid.jsx +2 -3
  270. package/src/WebVideo/WebVideo.jsx +3 -4
  271. package/src/baseExports.js +1 -0
  272. package/src/index.js +1 -2
  273. package/src/shared/FullBleedContent/FullBleedContent.jsx +1 -3
  274. package/src/shared/VideoSplash/SplashButton/SplashButton.jsx +1 -3
  275. package/src/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.jsx +1 -4
  276. package/src/shared/VideoSplash/VideoSplash.jsx +2 -3
  277. package/src/utils/index.js +1 -3
  278. package/src/utils/ssr.js +10 -3
  279. package/types/Callout.d.ts +2 -1
  280. package/types/Tooltip.d.ts +1 -0
  281. package/lib/DatePicker/reactDatesCss.js +0 -830
  282. package/lib/ExpandCollapseMini/ExpandCollapseMini.js +0 -73
  283. package/lib/ExpandCollapseMini/ExpandCollapseMiniControl.js +0 -116
  284. package/lib/ExpandCollapseMini/index.js +0 -2
  285. package/lib/QuantitySelector/styles.js +0 -18
  286. package/lib/SkeletonProvider/SkeletonTypography.js +0 -38
  287. package/lib/Table/Row.js +0 -19
  288. package/lib/utils/theming/styled-components.js +0 -26
  289. package/src/ExpandCollapseMini/ExpandCollapseMini.jsx +0 -72
  290. package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx +0 -104
  291. package/src/ExpandCollapseMini/index.js +0 -3
  292. package/src/utils/theming/styled-components.js +0 -23
  293. /package/lib/{Badge → esm/Badge}/index.js +0 -0
  294. /package/lib/{BlockQuote → esm/BlockQuote}/index.js +0 -0
  295. /package/lib/{Breadcrumbs → esm/Breadcrumbs}/index.js +0 -0
  296. /package/lib/{Callout → esm/Callout}/index.js +0 -0
  297. /package/lib/{Card → esm/Card}/index.js +0 -0
  298. /package/lib/{Countdown → esm/Countdown}/constants.js +0 -0
  299. /package/lib/{Countdown → esm/Countdown}/dictionary.js +0 -0
  300. /package/lib/{Countdown → esm/Countdown}/index.js +0 -0
  301. /package/lib/{Countdown → esm/Countdown}/types.js +0 -0
  302. /package/lib/{Countdown → esm/Countdown}/useCountdown.js +0 -0
  303. /package/lib/{DatePicker → esm/DatePicker}/dictionary.js +0 -0
  304. /package/lib/{DatePicker → esm/DatePicker}/index.js +0 -0
  305. /package/lib/{Disclaimer → esm/Disclaimer}/index.js +0 -0
  306. /package/lib/{Footnote → esm/Footnote}/dictionary.js +0 -0
  307. /package/lib/{Footnote → esm/Footnote}/index.js +0 -0
  308. /package/lib/{IconButton → esm/IconButton}/IconButton.js +0 -0
  309. /package/lib/{IconButton → esm/IconButton}/index.js +0 -0
  310. /package/lib/{Image → esm/Image}/Image.js +0 -0
  311. /package/lib/{Image → esm/Image}/index.js +0 -0
  312. /package/lib/{Image → esm/Image}/server.js +0 -0
  313. /package/lib/{List → esm/List}/List.js +0 -0
  314. /package/lib/{List → esm/List}/ListItem.js +0 -0
  315. /package/lib/{List → esm/List}/index.js +0 -0
  316. /package/lib/{NavigationBar → esm/NavigationBar}/index.js +0 -0
  317. /package/lib/{OptimizeImage → esm/OptimizeImage}/OptimizeImage.js +0 -0
  318. /package/lib/{OptimizeImage → esm/OptimizeImage}/index.js +0 -0
  319. /package/lib/{OptimizeImage → esm/OptimizeImage}/utils/getFallbackUrl.js +0 -0
  320. /package/lib/{OptimizeImage → esm/OptimizeImage}/utils/getImageUrls.js +0 -0
  321. /package/lib/{OptimizeImage → esm/OptimizeImage}/utils/getOptimizedUrl.js +0 -0
  322. /package/lib/{OptimizeImage → esm/OptimizeImage}/utils/hasWebpSupport.js +0 -0
  323. /package/lib/{OptimizeImage → esm/OptimizeImage}/utils/index.js +0 -0
  324. /package/lib/{OptimizeImage → esm/OptimizeImage}/utils/isSvgUrl.js +0 -0
  325. /package/lib/{OrderedList → esm/OrderedList}/constants.js +0 -0
  326. /package/lib/{OrderedList → esm/OrderedList}/index.js +0 -0
  327. /package/lib/{Paragraph → esm/Paragraph}/index.js +0 -0
  328. /package/lib/{PreviewCard → esm/PreviewCard}/AuthorDate.js +0 -0
  329. /package/lib/{PreviewCard → esm/PreviewCard}/index.js +0 -0
  330. /package/lib/{PriceLockup → esm/PriceLockup}/index.js +0 -0
  331. /package/lib/{PriceLockup → esm/PriceLockup}/tokens.js +0 -0
  332. /package/lib/{Progress → esm/Progress}/index.js +0 -0
  333. /package/lib/{QuantitySelector → esm/QuantitySelector}/QuantitySelector.js +0 -0
  334. /package/lib/{QuantitySelector → esm/QuantitySelector}/SideButton.js +0 -0
  335. /package/lib/{QuantitySelector → esm/QuantitySelector}/dictionary.js +0 -0
  336. /package/lib/{QuantitySelector → esm/QuantitySelector}/index.js +0 -0
  337. /package/lib/{ResponsiveImage → esm/ResponsiveImage}/ResponsiveImage.js +0 -0
  338. /package/lib/{ResponsiveImage → esm/ResponsiveImage}/index.js +0 -0
  339. /package/lib/{Ribbon → esm/Ribbon}/index.js +0 -0
  340. /package/lib/{SkeletonProvider → esm/SkeletonProvider}/SkeletonProvider.js +0 -0
  341. /package/lib/{SkeletonProvider → esm/SkeletonProvider}/index.js +0 -0
  342. /package/lib/{Span → esm/Span}/index.js +0 -0
  343. /package/lib/{Spinner → esm/Spinner}/constants.js +0 -0
  344. /package/lib/{Spinner → esm/Spinner}/index.js +0 -0
  345. /package/lib/{StoryCard → esm/StoryCard}/index.js +0 -0
  346. /package/lib/{Table → esm/Table}/Body.js +0 -0
  347. /package/lib/{Table → esm/Table}/Header.js +0 -0
  348. /package/lib/{Table → esm/Table}/SubHeading.js +0 -0
  349. /package/lib/{Table → esm/Table}/index.js +0 -0
  350. /package/lib/{TermsAndConditions → esm/TermsAndConditions}/dictionary.js +0 -0
  351. /package/lib/{TermsAndConditions → esm/TermsAndConditions}/index.js +0 -0
  352. /package/lib/{Testimonial → esm/Testimonial}/index.js +0 -0
  353. /package/lib/{Toast → esm/Toast}/index.js +0 -0
  354. /package/lib/{Video → esm/Video}/index.js +0 -0
  355. /package/lib/{Video → esm/Video}/videoText.js +0 -0
  356. /package/lib/{VideoPicker → esm/VideoPicker}/VideoPickerPlayer.js +0 -0
  357. /package/lib/{VideoPicker → esm/VideoPicker}/VideoSlider.js +0 -0
  358. /package/lib/{VideoPicker → esm/VideoPicker}/index.js +0 -0
  359. /package/lib/{VideoPicker → esm/VideoPicker}/videoPropType.js +0 -0
  360. /package/lib/{WaffleGrid → esm/WaffleGrid}/index.js +0 -0
  361. /package/lib/{WebVideo → esm/WebVideo}/index.js +0 -0
  362. /package/lib/{WebVideo → esm/WebVideo}/utils/index.js +0 -0
  363. /package/lib/{server.js → esm/server.js} +0 -0
  364. /package/lib/{shared → esm/shared}/ConditionalWrapper/ConditionalWrapper.js +0 -0
  365. /package/lib/{shared → esm/shared}/ConditionalWrapper/index.js +0 -0
  366. /package/lib/{shared → esm/shared}/FullBleedContent/getFullBleedBorderRadius.js +0 -0
  367. /package/lib/{shared → esm/shared}/FullBleedContent/index.js +0 -0
  368. /package/lib/{shared → esm/shared}/FullBleedContent/useFullBleedContentProps.js +0 -0
  369. /package/lib/{shared → esm/shared}/VideoSplash/helpers.js +0 -0
  370. /package/lib/{utils → esm/utils}/isElementFocusable.js +0 -0
  371. /package/lib/{utils → esm/utils}/logger.js +0 -0
  372. /package/lib/{utils → esm/utils}/media.js +0 -0
  373. /package/lib/{utils → esm/utils}/renderStructuredContent.js +0 -0
  374. /package/lib/{utils → esm/utils}/theming/get-theme-from-server.js +0 -0
  375. /package/lib/{utils → esm/utils}/theming/with-client-theme.js +0 -0
  376. /package/lib/{utils → esm/utils}/theming/with-server-theme.js +0 -0
  377. /package/lib/{utils → esm/utils}/transforms.js +0 -0
  378. /package/lib/{utils → esm/utils}/useTypographyTheme.js +0 -0
package/lib/cjs/utils/ssr.js ADDED
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _styledComponents = require("styled-components");
8
+ var _componentsBase = require("@telus-uds/components-base");
9
+ /**
10
+ * Returns object with `renderApp` and `getStyles` functions.
11
+ * Weave these into your app's server-side render process:
12
+ *
13
+ * - Call `renderApp` first to do the actual server-side render
14
+ * - After the render is complete, call `getStyles`
15
+ * - Include the style tags returned by `getStyles` in the SSR <head>
16
+ *
17
+ * This wraps ssrStyles from @telus-uds/components-base and adds Styled Components support.
18
+ *
19
+ * @param {string} [appName] - optional unique identifier if ssrStyles is called multiple times for multiple apps
20
+ * @param {object} [options] -
21
+ * - `styleGetters`: optional array of additional style getter functions to call after render
22
+ * - `collectStyles`: optional function, takes the rendered app, returns either the same or a new app element
23
+ * @param {boolean} [options.styleGetters]
24
+ * @param {(ReactElement) => ReactElement} [options.collectStyles]
25
+ */
26
+ const ssrStyles = function () {
27
+ let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Allium app';
28
+ let {
29
+ styleGetters = [],
30
+ collectStyles = renderedApp => renderedApp
31
+ } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
32
+ let router = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'pages';
33
+ const sheet = new _styledComponents.ServerStyleSheet();
34
+ const getStyledComponentsStyles = () => {
35
+ const styles = sheet.getStyleElement();
36
+ sheet.seal();
37
+ return styles;
38
+ };
39
+ if (router === 'app') {
40
+ return (0, _componentsBase.ssrStyles)(appName, {
41
+ styleGetters: [...styleGetters],
42
+ collectStyles
43
+ });
44
+ }
45
+ return (0, _componentsBase.ssrStyles)(appName, {
46
+ styleGetters: [getStyledComponentsStyles, ...styleGetters],
47
+ collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))
48
+ });
49
+ };
50
+ var _default = exports.default = ssrStyles;
package/lib/cjs/utils/theming/get-theme-from-server.js ADDED
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = getTheme;
7
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
8
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
9
+ const cachedTheme = {};
10
+ const theme = process.env.UDS_THEME;
11
+ async function importTheme(componentName) {
12
+ try {
13
+ cachedTheme[componentName] = await (specifier => new Promise(r => r(specifier)).then(s => _interopRequireWildcard(require(s))))(`@telus-uds/theme-${theme}/build/rn/${componentName}.js`);
14
+ } catch (_) {
15
+ throw new Error(`An error occurred while trying to import theme-${process.env.UDS_THEME}. Please check that the theme has been installed in your app or that you are not importing a server component inside a client component.`);
16
+ }
17
+ }
18
+ async function getTheme(componentName) {
19
+ if (cachedTheme[componentName]) {
20
+ return cachedTheme[componentName];
21
+ }
22
+ await importTheme(componentName);
23
+ return cachedTheme[componentName];
24
+ }
package/lib/cjs/utils/theming/with-client-theme.js ADDED
@@ -0,0 +1,31 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _componentsBase = require("@telus-uds/components-base");
10
+ var _jsxRuntime = require("react/jsx-runtime");
11
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
12
+ const withClientTheme = Component => {
13
+ const UdsStyledComponent = _ref => {
14
+ let {
15
+ tokens: tokenOverrides,
16
+ variant,
17
+ ...props
18
+ } = _ref;
19
+ const theme = (0, _componentsBase.useThemeTokens)(Component.displayName, tokenOverrides, variant);
20
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
21
+ theme: theme,
22
+ ...props
23
+ });
24
+ };
25
+ UdsStyledComponent.propTypes = {
26
+ tokens: (0, _componentsBase.getTokensPropType)(Component.displayName),
27
+ variant: _propTypes.default.string
28
+ };
29
+ return UdsStyledComponent;
30
+ };
31
+ var _default = exports.default = withClientTheme;
package/lib/cjs/utils/theming/with-server-theme.js ADDED
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _server = require("@telus-uds/components-base/server");
10
+ var _getThemeFromServer = _interopRequireDefault(require("./get-theme-from-server"));
11
+ var _jsxRuntime = require("react/jsx-runtime");
12
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
+ const withServerTheme = (Component, componentName) => {
14
+ const UdsStyledComponent = async _ref => {
15
+ let {
16
+ tokens: tokenOverrides,
17
+ variant,
18
+ ...props
19
+ } = _ref;
20
+ const componentTheme = await (0, _getThemeFromServer.default)(componentName);
21
+ const themeTokens = (0, _server.getThemeTokens)(componentTheme, tokenOverrides, variant);
22
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
23
+ theme: themeTokens,
24
+ ...props
25
+ });
26
+ };
27
+ UdsStyledComponent.propTypes = {
28
+ tokens: (0, _server.getTokensPropType)(componentName),
29
+ variant: _propTypes.default.string
30
+ };
31
+ return UdsStyledComponent;
32
+ };
33
+ var _default = exports.default = withServerTheme;
package/lib/cjs/utils/transforms.js ADDED
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.transformGradient = exports.default = void 0;
7
+ const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
8
+ exports.transformGradient = transformGradient;
9
+ var _default = exports.default = {
10
+ transformGradient
11
+ };
package/lib/cjs/utils/useOverlaidPosition.js ADDED
@@ -0,0 +1,222 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = require("react");
8
+ var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
10
+ // TODO: add react-native as a peer dep and support native apps too.
11
+ // That requires some fiddling with Allium repo storybook config, babel, etc,
12
+ // unless ADS gets merged back into UDS monorepo.
13
+
14
+ const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
15
+ const offset = Math.max(0, initialOffset);
16
+ const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
17
+ const tooWideBy = Math.max(0, otherEdgeOverflow - offset);
18
+ const adjusted = {
19
+ offset: Math.max(0, offset - otherEdgeOverflow)
20
+ };
21
+ if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
22
+ return adjusted;
23
+ };
24
+ const getPosition = _ref => {
25
+ let {
26
+ edge,
27
+ fromEdge,
28
+ sourceSize
29
+ } = _ref;
30
+ switch (edge) {
31
+ case 'near':
32
+ return fromEdge;
33
+ case 'mid':
34
+ return fromEdge + sourceSize / 2;
35
+ case 'far':
36
+ return fromEdge + sourceSize;
37
+ default:
38
+ return 0;
39
+ }
40
+ };
41
+ const getEdgeType = (align, alignSide) => {
42
+ const alignTo = align[alignSide];
43
+ const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
44
+ return edge;
45
+ };
46
+
47
+ /**
48
+ * Based on UDS's private getTooltipPosition but generalised.
49
+ *
50
+ * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
51
+ * to the source (button) and we have a limited set of positions, an easy and consistent way
52
+ * of positioning it is to check all of the possible positions and pick one that will be rendered
53
+ * within the window bounds. This way we can also rely on the tooltip being actually rendered
54
+ * before it is shown, which makes it account for the width being limiting in styles, custom font
55
+ * rendering, etc.
56
+ */
57
+ function getOverlaidPosition(_ref2) {
58
+ let {
59
+ sourceLayout,
60
+ targetDimensions,
61
+ windowDimensions,
62
+ offsets = {},
63
+ align
64
+ } = _ref2;
65
+ // Web-only: this will be difficult to mimic on native because there's no global scroll position.
66
+ // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
67
+ // that can be passed to the appropriate ScrollView?
68
+ const {
69
+ scrollX = 0,
70
+ scrollY = 0
71
+ } = typeof window === 'object' ? window : {};
72
+
73
+ // Will have top, bottom, left and/or right offsets depending on `align`
74
+ const positioning = {};
75
+ if (align.top) positioning.top = getPosition({
76
+ edge: getEdgeType(align, 'top'),
77
+ fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
78
+ sourceSize: sourceLayout.height
79
+ });
80
+ if (align.middle) positioning.top = getPosition({
81
+ edge: getEdgeType(align, 'middle'),
82
+ fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
83
+ sourceSize: sourceLayout.height
84
+ });
85
+ if (align.bottom) positioning.bottom = getPosition({
86
+ edge: getEdgeType(align, 'bottom'),
87
+ fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
88
+ sourceSize: sourceLayout.height
89
+ });
90
+ if (align.left) positioning.left = getPosition({
91
+ edge: getEdgeType(align, 'left'),
92
+ fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
93
+ sourceSize: sourceLayout.width
94
+ });
95
+ if (align.center) positioning.left = getPosition({
96
+ edge: getEdgeType(align, 'center'),
97
+ fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
98
+ sourceSize: sourceLayout.width
99
+ });
100
+ if (align.right) positioning.right = getPosition({
101
+ edge: getEdgeType(align, 'right'),
102
+ fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
103
+ sourceSize: sourceLayout.width
104
+ });
105
+ if (!(align.left && align.right)) {
106
+ // Check if the position and/or width need adjusting to fit on the screen
107
+ const side = align.right ? 'right' : 'left';
108
+ const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
109
+ if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
110
+ if (typeof adjusted.offset === 'number') {
111
+ positioning[side] = adjusted.offset;
112
+ }
113
+ }
114
+ return positioning;
115
+ }
116
+
117
+ /**
118
+ * Positions an element in a modal or portal so that it appears tooltip-like below the
119
+ * target element.
120
+ *
121
+ * @TODO - add support for positioning other than 'below' like UDS's tooltip (this is not
122
+ * a small task because UDS's tooltip logic only really works for short text - it might be
123
+ * better to use a third-party library).
124
+ */
125
+ const useOverlaidPosition = _ref3 => {
126
+ let {
127
+ isShown = false,
128
+ offsets,
129
+ // By default, align the overlaid target's `top` to the bottom of the source, and center horizontally.
130
+ align = {
131
+ center: 'center',
132
+ top: 'bottom'
133
+ }
134
+ } = _ref3;
135
+ // Element in main document flow that the targetRef element is positioned around
136
+ const sourceRef = (0, _react.useRef)(null);
137
+ const [sourceLayout, setSourceLayout] = (0, _react.useState)(null);
138
+
139
+ // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
140
+ const targetRef = (0, _react.useRef)(null);
141
+ const [targetDimensions, setTargetDimensions] = (0, _react.useState)(null);
142
+ const [windowDimensions, setWindowDimensions] = (0, _react.useState)(null);
143
+ const onTargetLayout = (0, _react.useCallback)(_ref4 => {
144
+ let {
145
+ nativeEvent: {
146
+ layout: {
147
+ width,
148
+ height
149
+ }
150
+ }
151
+ } = _ref4;
152
+ // NOTE: UDS's Tooltip logic injects some additional width to allow for antialiasing etc of text,
153
+ // avoiding adding unnecessary line breaks to text that is slightly wider than it thinks it is.
154
+ // That is probably something specific to text tooltips that doesn't belong in a generic hook.
155
+ setTargetDimensions(previousDimensions => {
156
+ // Re-render on first non-zero width / height: avoid infinite loops on changes, or mispositioning
157
+ // if user scrolls while a slidedown animation is changing the height and recalculating position.
158
+ if (!previousDimensions && width && height) {
159
+ return {
160
+ width,
161
+ height
162
+ };
163
+ }
164
+ return previousDimensions;
165
+ });
166
+ }, []);
167
+ const readyToShow = Boolean(isShown && sourceRef.current);
168
+ (0, _react.useEffect)(() => {
169
+ const handleDimensionsChange = _ref5 => {
170
+ let {
171
+ window
172
+ } = _ref5;
173
+ sourceRef.current?.measureInWindow((x, y, width, height) => {
174
+ // Could add a debouncer here if there's too many rerenders during gradual resizes
175
+ setWindowDimensions(window);
176
+ setSourceLayout({
177
+ x,
178
+ y,
179
+ width,
180
+ height
181
+ });
182
+ });
183
+ };
184
+ let subscription;
185
+ const unsubscribe = () => {
186
+ if (typeof subscription?.remove === 'function') {
187
+ // React Native >=0.65.0
188
+ subscription.remove();
189
+ } else if (typeof _Dimensions.default.remove === 'function') {
190
+ // React Native <0.65.0
191
+ _Dimensions.default.remove('change', handleDimensionsChange);
192
+ }
193
+ setSourceLayout(null);
194
+ setTargetDimensions(null);
195
+ };
196
+ if (readyToShow) {
197
+ subscription = _Dimensions.default.addEventListener('change', handleDimensionsChange);
198
+ handleDimensionsChange({
199
+ window: _Dimensions.default.get('window')
200
+ });
201
+ } else {
202
+ unsubscribe();
203
+ }
204
+ return unsubscribe;
205
+ }, [readyToShow]);
206
+ const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
207
+ const overlaidPosition = isReady ? getOverlaidPosition({
208
+ sourceLayout,
209
+ targetDimensions,
210
+ windowDimensions,
211
+ offsets,
212
+ align
213
+ }) : {};
214
+ return {
215
+ overlaidPosition,
216
+ sourceRef,
217
+ targetRef,
218
+ onTargetLayout,
219
+ isReady
220
+ };
221
+ };
222
+ var _default = exports.default = useOverlaidPosition;
package/lib/cjs/utils/useTypographyTheme.js ADDED
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _componentsBase = require("@telus-uds/components-base");
8
+ const useTypographyTheme = (variant, tokens) => {
9
+ const viewport = (0, _componentsBase.useViewport)();
10
+ const themeTokens = (0, _componentsBase.useThemeTokens)('Typography', tokens, variant, {
11
+ viewport
12
+ });
13
+ const {
14
+ themeOptions
15
+ } = (0, _componentsBase.useTheme)();
16
+ const {
17
+ fontSize,
18
+ lineHeight,
19
+ ...rnStyles
20
+ } = (0, _componentsBase.applyTextStyles)({
21
+ ...themeTokens,
22
+ themeOptions
23
+ });
24
+ return {
25
+ ...rnStyles,
26
+ fontSize: `${fontSize}px`,
27
+ lineHeight: `${lineHeight}px`
28
+ };
29
+ };
30
+ var _default = exports.default = useTypographyTheme;
package/lib/{Badge → esm/Badge}/Badge.js RENAMED
@@ -1,41 +1,34 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { selectSystemProps, Typography, getTokensPropType, useThemeTokens } from '@telus-uds/components-base';
4
- import { htmlAttrs, transformGradient, styledComponents } from '../utils';
4
+ import styled from 'styled-components';
5
+ import { htmlAttrs, transformGradient } from '../utils';
5
6
  import { jsx as _jsx } from "react/jsx-runtime";
6
7
  const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
7
- const {
8
- styled
9
- } = styledComponents;
10
- const BadgeContainer = styled.div`
11
- background: ${_ref => {
8
+ const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
9
+ displayName: "Badge__BadgeContainer",
10
+ componentId: "components-web__sc-tsiuo2-0"
11
+ })(["background:", ";border:", ";display:inline-flex;justify-content:center;align-items:center;height:fit-content;padding:", ";border-radius:", ";width:fit-content;", ""], _ref => {
12
12
  let {
13
13
  background
14
14
  } = _ref;
15
15
  return background;
16
- }};
17
- border: ${_ref2 => {
16
+ }, _ref2 => {
18
17
  let {
19
18
  border
20
19
  } = _ref2;
21
20
  return border;
22
- }};
23
- display: inline-flex;
24
- justify-content: center;
25
- padding: ${_ref3 => {
21
+ }, _ref3 => {
26
22
  let {
27
23
  padding
28
24
  } = _ref3;
29
25
  return padding;
30
- }};
31
- border-radius: ${_ref4 => {
26
+ }, _ref4 => {
32
27
  let {
33
28
  radius
34
29
  } = _ref4;
35
30
  return radius;
36
- }};
37
- width: fit-content;
38
- ${_ref5 => {
31
+ }, _ref5 => {
39
32
  let {
40
33
  isOutlineOffer,
41
34
  isAlternative,
@@ -47,8 +40,7 @@ const BadgeContainer = styled.div`
47
40
  -webkit-background-clip: text;
48
41
  ${gradient && '-webkit-text-fill-color: transparent;'}
49
42
  }`;
50
- }}
51
- `;
43
+ });
52
44
  const fontSizeMapping = {
53
45
  12: 'micro',
54
46
  14: 'small',
package/lib/{BlockQuote → esm/BlockQuote}/BlockQuote.js RENAMED
@@ -1,67 +1,53 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { Link, selectSystemProps, StackView, Typography, useTheme, useThemeTokens, useResponsiveThemeTokens, createMediaQueryStyles, withLinkRouter, useViewport, getTokensPropType, StyleSheet } from '@telus-uds/components-base';
4
- import { htmlAttrs, transformGradient, styledComponents } from '../utils';
4
+ import styled from 'styled-components';
5
+ import { htmlAttrs, transformGradient } from '../utils';
5
6
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
7
  const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
7
- const {
8
- styled
9
- } = styledComponents;
10
- const BlockQuoteContainer = styled.blockquote`
11
- margin: 0;
12
- position: relative;
13
- padding-left: ${_ref => {
8
+ const BlockQuoteContainer = /*#__PURE__*/styled.blockquote.withConfig({
9
+ displayName: "BlockQuote__BlockQuoteContainer",
10
+ componentId: "components-web__sc-vals3u-0"
11
+ })(["margin:0;position:relative;padding-left:", ";padding-right:", ";padding-bottom:", ";padding-top:", ";&::before{content:'';left:0;top:0;position:absolute;height:100%;width:", ";background:", ";}"], _ref => {
14
12
  let {
15
13
  paddingLeft
16
14
  } = _ref;
17
15
  return `${paddingLeft}px`;
18
- }};
19
- padding-right: ${_ref2 => {
16
+ }, _ref2 => {
20
17
  let {
21
18
  paddingRight
22
19
  } = _ref2;
23
20
  return `${paddingRight}px`;
24
- }};
25
- padding-bottom: ${_ref3 => {
21
+ }, _ref3 => {
26
22
  let {
27
23
  paddingBottom
28
24
  } = _ref3;
29
25
  return `${paddingBottom}px`;
30
- }};
31
- padding-top: ${_ref4 => {
26
+ }, _ref4 => {
32
27
  let {
33
28
  paddingTop
34
29
  } = _ref4;
35
30
  return `${paddingTop}px`;
36
- }};
37
- &::before {
38
- content: '';
39
- left: 0;
40
- top: 0;
41
- position: absolute;
42
- height: 100%;
43
- width: ${_ref5 => {
31
+ }, _ref5 => {
44
32
  let {
45
33
  width
46
34
  } = _ref5;
47
35
  return `${width}px`;
48
- }};
49
- background: ${_ref6 => {
36
+ }, _ref6 => {
50
37
  let {
51
38
  backgroundGradient
52
39
  } = _ref6;
53
40
  return backgroundGradient && transformGradient(backgroundGradient);
54
- }};
55
- }
56
- `;
57
- const QuoteContainer = styled.div`
58
- margin-bottom: ${_ref7 => {
41
+ });
42
+ const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
43
+ displayName: "BlockQuote__QuoteContainer",
44
+ componentId: "components-web__sc-vals3u-1"
45
+ })(["margin-bottom:", ";"], _ref7 => {
59
46
  let {
60
47
  marginBottom
61
48
  } = _ref7;
62
49
  return `${marginBottom}px`;
63
- }};
64
- `;
50
+ });
65
51
  const selectTitleHeadingTokens = themeTokens => ({
66
52
  fontSize: themeTokens.titleHeadingFontSize,
67
53
  fontName: themeTokens.titleHeadingFontName,
package/lib/{Breadcrumbs → esm/Breadcrumbs}/Breadcrumbs.js RENAMED
@@ -3,14 +3,15 @@ import PropTypes from 'prop-types';
3
3
  import { Helmet, HelmetProvider } from 'react-helmet-async';
4
4
  import { isEqual } from 'lodash';
5
5
  import { componentPropType, selectSystemProps, unpackFragment, withLinkRouter, getTokensPropType, useThemeTokens, useViewport } from '@telus-uds/components-base';
6
- import { htmlAttrs, styledComponents } from '../utils';
6
+ import styled from 'styled-components';
7
+ import { htmlAttrs } from '../utils';
7
8
  import Item from './Item/Item';
8
9
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
9
10
  const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
10
- const {
11
- styled
12
- } = styledComponents;
13
- const StyledList = styled.ol({
11
+ const StyledList = /*#__PURE__*/styled.ol.withConfig({
12
+ displayName: "Breadcrumbs__StyledList",
13
+ componentId: "components-web__sc-gwwxrc-0"
14
+ })({
14
15
  display: 'flex',
15
16
  flexDirection: 'row',
16
17
  flexWrap: 'wrap',
package/lib/{Breadcrumbs → esm/Breadcrumbs}/Item/Item.js RENAMED
@@ -1,13 +1,14 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { Link, Typography, applyTextStyles, clickProps, selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
4
- import { htmlAttrs, styledComponents } from '../../utils';
4
+ import styled from 'styled-components';
5
+ import { htmlAttrs } from '../../utils';
5
6
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
6
7
  const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
7
- const {
8
- styled
9
- } = styledComponents;
10
- const StyledItemContainer = styled.li({
8
+ const StyledItemContainer = /*#__PURE__*/styled.li.withConfig({
9
+ displayName: "Item__StyledItemContainer",
10
+ componentId: "components-web__sc-1rfdaul-0"
11
+ })({
11
12
  display: 'inline-block',
12
13
  paddingLeft: _ref => {
13
14
  let {
@@ -24,7 +25,10 @@ const StyledItemContainer = styled.li({
24
25
  },
25
26
  marginBottom: '8px'
26
27
  });
27
- const IconContainer = styled.span({
28
+ const IconContainer = /*#__PURE__*/styled.span.withConfig({
29
+ displayName: "Item__IconContainer",
30
+ componentId: "components-web__sc-1rfdaul-1"
31
+ })({
28
32
  display: 'inline-block',
29
33
  paddingLeft: _ref3 => {
30
34
  let {
package/lib/{Callout → esm/Callout}/Callout.js RENAMED
@@ -1,12 +1,10 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { Icon, selectSystemProps, Typography, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
4
- import { htmlAttrs, styledComponents } from '../utils';
4
+ import styled from 'styled-components';
5
+ import { htmlAttrs } from '../utils';
5
6
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
6
7
  const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
7
- const {
8
- styled
9
- } = styledComponents;
10
8
  const getAlignment = (rounded, textAlignToFlex) => {
11
9
  if (textAlignToFlex) {
12
10
  switch (textAlignToFlex) {
@@ -32,7 +30,10 @@ const verticalAlignToFlex = verticalAlign => {
32
30
  return 'top';
33
31
  }
34
32
  };
35
- const CalloutContainer = styled.div(_ref => {
33
+ const CalloutContainer = /*#__PURE__*/styled.div.withConfig({
34
+ displayName: "Callout__CalloutContainer",
35
+ componentId: "components-web__sc-1a7ptx-0"
36
+ })(_ref => {
36
37
  let {
37
38
  rounded,
38
39
  verticalAlign,