@cruk/cruk-react-components 5.0.8 → 6.0.1

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 (326) hide show
  1. package/README.md +20 -7
  2. package/lib/{src/components → components}/AddressLookup/AddressLookup.stories.d.ts +1 -1
  3. package/lib/{src/components → components}/AddressLookup/index.d.ts +1 -1
  4. package/lib/{src/components → components}/Box/Box.stories.d.ts +1 -1
  5. package/lib/{src/components → components}/Box/index.d.ts +1 -1
  6. package/lib/{src/components → components}/Button/Button.stories.d.ts +1 -1
  7. package/lib/{src/components → components}/Button/index.d.ts +1 -1
  8. package/lib/{src/components → components}/Checkbox/Checkbox.stories.d.ts +1 -1
  9. package/lib/{src/components → components}/Checkbox/index.d.ts +3 -3
  10. package/lib/{src/components → components}/Collapse/styles.d.ts +11 -3
  11. package/lib/{src/components → components}/DateField/styles.d.ts +12 -6
  12. package/lib/components/ErrorText/styles.d.ts +16 -0
  13. package/lib/{src/components → components}/Footer/styles.d.ts +3 -9
  14. package/lib/components/GlobalStyle.d.ts +2 -0
  15. package/lib/components/GlobalStyleNoFontFace.d.ts +2 -0
  16. package/lib/{src/components → components}/InfoBox/InfoBox.stories.d.ts +1 -1
  17. package/lib/{src/components → components}/InfoBox/index.d.ts +1 -1
  18. package/lib/components/InfoBox/styles.d.ts +13 -0
  19. package/lib/{src/components → components}/Link/Link.stories.d.ts +4 -1
  20. package/lib/{src/components → components}/Link/index.d.ts +4 -1
  21. package/lib/components/Link/styles.d.ts +20 -0
  22. package/lib/components/Modal/styles.d.ts +32 -0
  23. package/lib/{src/components → components}/Radio/Radio.stories.d.ts +1 -1
  24. package/lib/{src/components → components}/Radio/index.d.ts +3 -3
  25. package/lib/{src/components → components}/RadioConsent/styles.d.ts +6 -3
  26. package/lib/{src/components → components}/Select/Selelct.stories.d.ts +1 -1
  27. package/lib/{src/components → components}/Select/index.d.ts +3 -3
  28. package/lib/{src/components → components}/Text/Text.stories.d.ts +1 -1
  29. package/lib/{src/components → components}/Text/index.d.ts +1 -1
  30. package/lib/{src/components → components}/TextAreaField/TextAreaField.stories.d.ts +1 -1
  31. package/lib/{src/components → components}/TextAreaField/index.d.ts +1 -1
  32. package/lib/{src/components → components}/TextField/TextField.stories.d.ts +1 -1
  33. package/lib/{src/components → components}/TextField/index.d.ts +1 -1
  34. package/lib/{src/components → components}/TextField/styles.d.ts +2 -6
  35. package/lib/components/ThemeCheatSheet.d.ts +7 -0
  36. package/lib/{src/hooks → hooks}/useScrollPosition.d.ts +2 -2
  37. package/lib/node_modules/tslib/tslib.es6.js +1 -1
  38. package/lib/node_modules/tslib/tslib.es6.js.map +1 -1
  39. package/lib/src/components/AddressLookup/index.js +1 -1
  40. package/lib/src/components/AddressLookup/index.js.map +1 -1
  41. package/lib/src/components/AddressLookup/styles.js +1 -38
  42. package/lib/src/components/AddressLookup/styles.js.map +1 -1
  43. package/lib/src/components/Avatar/index.js +1 -1
  44. package/lib/src/components/Avatar/index.js.map +1 -1
  45. package/lib/src/components/Avatar/styles.js +1 -10
  46. package/lib/src/components/Avatar/styles.js.map +1 -1
  47. package/lib/src/components/Badge/index.js +1 -1
  48. package/lib/src/components/Badge/index.js.map +1 -1
  49. package/lib/src/components/Badge/styles.js +1 -17
  50. package/lib/src/components/Badge/styles.js.map +1 -1
  51. package/lib/src/components/Box/index.js +1 -1
  52. package/lib/src/components/Box/index.js.map +1 -1
  53. package/lib/src/components/Box/styles.js +1 -13
  54. package/lib/src/components/Box/styles.js.map +1 -1
  55. package/lib/src/components/Button/index.js +1 -1
  56. package/lib/src/components/Button/index.js.map +1 -1
  57. package/lib/src/components/Button/styles.js +1 -108
  58. package/lib/src/components/Button/styles.js.map +1 -1
  59. package/lib/src/components/Carousel/Dots.js +1 -1
  60. package/lib/src/components/Carousel/Dots.js.map +1 -1
  61. package/lib/src/components/Carousel/index.js +1 -1
  62. package/lib/src/components/Carousel/index.js.map +1 -1
  63. package/lib/src/components/Carousel/styles.js +1 -96
  64. package/lib/src/components/Carousel/styles.js.map +1 -1
  65. package/lib/src/components/Checkbox/index.js +1 -1
  66. package/lib/src/components/Checkbox/index.js.map +1 -1
  67. package/lib/src/components/Checkbox/styles.js +1 -105
  68. package/lib/src/components/Checkbox/styles.js.map +1 -1
  69. package/lib/src/components/Collapse/index.js +1 -1
  70. package/lib/src/components/Collapse/index.js.map +1 -1
  71. package/lib/src/components/Collapse/styles.js +1 -31
  72. package/lib/src/components/Collapse/styles.js.map +1 -1
  73. package/lib/src/components/DateField/index.js +1 -1
  74. package/lib/src/components/DateField/index.js.map +1 -1
  75. package/lib/src/components/DateField/styles.js +1 -26
  76. package/lib/src/components/DateField/styles.js.map +1 -1
  77. package/lib/src/components/Divider.js +1 -17
  78. package/lib/src/components/Divider.js.map +1 -1
  79. package/lib/src/components/ErrorText/index.js +1 -1
  80. package/lib/src/components/ErrorText/index.js.map +1 -1
  81. package/lib/src/components/ErrorText/styles.js +1 -5
  82. package/lib/src/components/ErrorText/styles.js.map +1 -1
  83. package/lib/src/components/Flex.js +1 -7
  84. package/lib/src/components/Flex.js.map +1 -1
  85. package/lib/src/components/Fontface.js +1 -1
  86. package/lib/src/components/Fontface.js.map +1 -1
  87. package/lib/src/components/Footer/index.js +1 -1
  88. package/lib/src/components/Footer/index.js.map +1 -1
  89. package/lib/src/components/Footer/styles.js +1 -69
  90. package/lib/src/components/Footer/styles.js.map +1 -1
  91. package/lib/src/components/GlobalStyle.js +1 -37
  92. package/lib/src/components/GlobalStyle.js.map +1 -1
  93. package/lib/src/components/GlobalStyleNoFontFace.js +1 -37
  94. package/lib/src/components/GlobalStyleNoFontFace.js.map +1 -1
  95. package/lib/src/components/Header/index.js +1 -1
  96. package/lib/src/components/Header/index.js.map +1 -1
  97. package/lib/src/components/Header/styles.js +1 -109
  98. package/lib/src/components/Header/styles.js.map +1 -1
  99. package/lib/src/components/Heading/index.js +1 -1
  100. package/lib/src/components/Heading/index.js.map +1 -1
  101. package/lib/src/components/Heading/styles.js +1 -75
  102. package/lib/src/components/Heading/styles.js.map +1 -1
  103. package/lib/src/components/IconFa/index.js +1 -1
  104. package/lib/src/components/IconFa/index.js.map +1 -1
  105. package/lib/src/components/IconFa/styles.js +1 -10
  106. package/lib/src/components/IconFa/styles.js.map +1 -1
  107. package/lib/src/components/InfoBox/index.js +1 -1
  108. package/lib/src/components/InfoBox/index.js.map +1 -1
  109. package/lib/src/components/InfoBox/styles.js +1 -12
  110. package/lib/src/components/InfoBox/styles.js.map +1 -1
  111. package/lib/src/components/LabelWrapper/index.js +1 -1
  112. package/lib/src/components/LabelWrapper/index.js.map +1 -1
  113. package/lib/src/components/LabelWrapper/styles.js +1 -15
  114. package/lib/src/components/LabelWrapper/styles.js.map +1 -1
  115. package/lib/src/components/LegendWrapper/index.js +1 -1
  116. package/lib/src/components/LegendWrapper/index.js.map +1 -1
  117. package/lib/src/components/LegendWrapper/styles.js +1 -34
  118. package/lib/src/components/LegendWrapper/styles.js.map +1 -1
  119. package/lib/src/components/Link/index.js +1 -1
  120. package/lib/src/components/Link/index.js.map +1 -1
  121. package/lib/src/components/Link/styles.js +1 -29
  122. package/lib/src/components/Link/styles.js.map +1 -1
  123. package/lib/src/components/Loader/index.js +1 -1
  124. package/lib/src/components/Loader/index.js.map +1 -1
  125. package/lib/src/components/Loader/styles.js +1 -45
  126. package/lib/src/components/Loader/styles.js.map +1 -1
  127. package/lib/src/components/Modal/index.js +1 -1
  128. package/lib/src/components/Modal/index.js.map +1 -1
  129. package/lib/src/components/Modal/styles.js +1 -59
  130. package/lib/src/components/Modal/styles.js.map +1 -1
  131. package/lib/src/components/Pagination/index.js +1 -1
  132. package/lib/src/components/Pagination/index.js.map +1 -1
  133. package/lib/src/components/Pagination/styles.js +1 -92
  134. package/lib/src/components/Pagination/styles.js.map +1 -1
  135. package/lib/src/components/PopOver/index.js +1 -1
  136. package/lib/src/components/PopOver/index.js.map +1 -1
  137. package/lib/src/components/PopOver/styles.js +1 -81
  138. package/lib/src/components/PopOver/styles.js.map +1 -1
  139. package/lib/src/components/ProgressBar/index.js +1 -1
  140. package/lib/src/components/ProgressBar/index.js.map +1 -1
  141. package/lib/src/components/ProgressBar/styles.js +1 -132
  142. package/lib/src/components/ProgressBar/styles.js.map +1 -1
  143. package/lib/src/components/Radio/index.js +1 -1
  144. package/lib/src/components/Radio/index.js.map +1 -1
  145. package/lib/src/components/Radio/styles.js +1 -125
  146. package/lib/src/components/Radio/styles.js.map +1 -1
  147. package/lib/src/components/RadioConsent/index.js +1 -1
  148. package/lib/src/components/RadioConsent/index.js.map +1 -1
  149. package/lib/src/components/RadioConsent/styles.js +1 -26
  150. package/lib/src/components/RadioConsent/styles.js.map +1 -1
  151. package/lib/src/components/Select/index.js +1 -1
  152. package/lib/src/components/Select/index.js.map +1 -1
  153. package/lib/src/components/Select/styles.js +1 -41
  154. package/lib/src/components/Select/styles.js.map +1 -1
  155. package/lib/src/components/Spacing/index.js +1 -1
  156. package/lib/src/components/Spacing/index.js.map +1 -1
  157. package/lib/src/components/Step/index.js +1 -1
  158. package/lib/src/components/Step/index.js.map +1 -1
  159. package/lib/src/components/Step/styles.js +1 -79
  160. package/lib/src/components/Step/styles.js.map +1 -1
  161. package/lib/src/components/Text/index.js +1 -1
  162. package/lib/src/components/Text/index.js.map +1 -1
  163. package/lib/src/components/Text/styles.js +1 -19
  164. package/lib/src/components/Text/styles.js.map +1 -1
  165. package/lib/src/components/TextAreaField/index.js +1 -1
  166. package/lib/src/components/TextAreaField/index.js.map +1 -1
  167. package/lib/src/components/TextAreaField/styles.js +1 -29
  168. package/lib/src/components/TextAreaField/styles.js.map +1 -1
  169. package/lib/src/components/TextField/index.js +1 -1
  170. package/lib/src/components/TextField/index.js.map +1 -1
  171. package/lib/src/components/TextField/styles.js +1 -110
  172. package/lib/src/components/TextField/styles.js.map +1 -1
  173. package/lib/src/components/Totaliser/index.js +1 -1
  174. package/lib/src/components/Totaliser/index.js.map +1 -1
  175. package/lib/src/components/Totaliser/styles.js +1 -59
  176. package/lib/src/components/Totaliser/styles.js.map +1 -1
  177. package/lib/src/components/UserBlock/index.js +1 -1
  178. package/lib/src/components/UserBlock/index.js.map +1 -1
  179. package/lib/src/components/UserBlock/styles.js +1 -21
  180. package/lib/src/components/UserBlock/styles.js.map +1 -1
  181. package/lib/src/hooks/useEffectBrowser.js +1 -1
  182. package/lib/src/hooks/useEffectBrowser.js.map +1 -1
  183. package/lib/src/hooks/useKey.js +1 -1
  184. package/lib/src/hooks/useKey.js.map +1 -1
  185. package/lib/src/hooks/useLayoutEffectBrowser.js +1 -1
  186. package/lib/src/hooks/useLayoutEffectBrowser.js.map +1 -1
  187. package/lib/src/hooks/useScrollPosition.js +1 -1
  188. package/lib/src/hooks/useScrollPosition.js.map +1 -1
  189. package/lib/src/themes/bowelbabe.js +1 -1
  190. package/lib/src/themes/bowelbabe.js.map +1 -1
  191. package/lib/src/themes/cruk.js +1 -1
  192. package/lib/src/themes/cruk.js.map +1 -1
  193. package/lib/src/themes/rfl.js +1 -1
  194. package/lib/src/themes/rfl.js.map +1 -1
  195. package/lib/src/themes/su2c.js +1 -1
  196. package/lib/src/themes/su2c.js.map +1 -1
  197. package/lib/src/utils/Helper.js +1 -1
  198. package/lib/src/utils/Helper.js.map +1 -1
  199. package/lib/src/utils/debounce.js +1 -1
  200. package/lib/src/utils/debounce.js.map +1 -1
  201. package/lib/src/utils/themeUtils.js +1 -1
  202. package/lib/src/utils/themeUtils.js.map +1 -1
  203. package/package.json +15 -15
  204. package/lib/.storybook/main.d.ts +0 -3
  205. package/lib/.storybook/preview.d.ts +0 -3
  206. package/lib/src/components/ErrorText/styles.d.ts +0 -8
  207. package/lib/src/components/GlobalStyle.d.ts +0 -2
  208. package/lib/src/components/GlobalStyleNoFontFace.d.ts +0 -2
  209. package/lib/src/components/InfoBox/styles.d.ts +0 -10
  210. package/lib/src/components/Link/styles.d.ts +0 -12
  211. package/lib/src/components/Modal/styles.d.ts +0 -21
  212. package/lib/src/components/ThemeCheatSheet.d.ts +0 -7
  213. /package/lib/{src/components → components}/AddressLookup/AddressLookUp.test.cypress.d.ts +0 -0
  214. /package/lib/{src/components → components}/AddressLookup/styles.d.ts +0 -0
  215. /package/lib/{src/components → components}/AllThemesWrapper.d.ts +0 -0
  216. /package/lib/{src/components → components}/Avatar/Avatar.stories.d.ts +0 -0
  217. /package/lib/{src/components → components}/Avatar/Avatar.test.cypress.d.ts +0 -0
  218. /package/lib/{src/components → components}/Avatar/index.d.ts +0 -0
  219. /package/lib/{src/components → components}/Avatar/styles.d.ts +0 -0
  220. /package/lib/{src/components → components}/Badge/Badge.stories.d.ts +0 -0
  221. /package/lib/{src/components → components}/Badge/Badge.test.cypress.d.ts +0 -0
  222. /package/lib/{src/components → components}/Badge/index.d.ts +0 -0
  223. /package/lib/{src/components → components}/Badge/styles.d.ts +0 -0
  224. /package/lib/{src/components → components}/Box/Box.test.cypress.d.ts +0 -0
  225. /package/lib/{src/components → components}/Box/styles.d.ts +0 -0
  226. /package/lib/{src/components → components}/Button/Button.test.cypress.d.ts +0 -0
  227. /package/lib/{src/components → components}/Button/styles.d.ts +0 -0
  228. /package/lib/{src/components → components}/Carousel/Carousel.stories.d.ts +0 -0
  229. /package/lib/{src/components → components}/Carousel/Carousel.test.cypress.d.ts +0 -0
  230. /package/lib/{src/components → components}/Carousel/Dots.d.ts +0 -0
  231. /package/lib/{src/components → components}/Carousel/index.d.ts +0 -0
  232. /package/lib/{src/components → components}/Carousel/styles.d.ts +0 -0
  233. /package/lib/{src/components → components}/Checkbox/CheckBox.test.cypress.d.ts +0 -0
  234. /package/lib/{src/components → components}/Checkbox/styles.d.ts +0 -0
  235. /package/lib/{src/components → components}/Collapse/Collapse.stories.d.ts +0 -0
  236. /package/lib/{src/components → components}/Collapse/Collapse.test.cypress.d.ts +0 -0
  237. /package/lib/{src/components → components}/Collapse/index.d.ts +0 -0
  238. /package/lib/{src/components → components}/DateField/DateField.stories.d.ts +0 -0
  239. /package/lib/{src/components → components}/DateField/DateField.test.cypress.d.ts +0 -0
  240. /package/lib/{src/components → components}/DateField/index.d.ts +0 -0
  241. /package/lib/{src/components → components}/Divider.d.ts +0 -0
  242. /package/lib/{src/components → components}/ErrorText/ErrorText.stories.d.ts +0 -0
  243. /package/lib/{src/components → components}/ErrorText/ErrorText.test.cypress.d.ts +0 -0
  244. /package/lib/{src/components → components}/ErrorText/index.d.ts +0 -0
  245. /package/lib/{src/components → components}/Flex.d.ts +0 -0
  246. /package/lib/{src/components → components}/Fontface.d.ts +0 -0
  247. /package/lib/{src/components → components}/Footer/Footer.stories.d.ts +0 -0
  248. /package/lib/{src/components → components}/Footer/Footer.test.cypress.d.ts +0 -0
  249. /package/lib/{src/components → components}/Footer/index.d.ts +0 -0
  250. /package/lib/{src/components → components}/Header/Header.stories.d.ts +0 -0
  251. /package/lib/{src/components → components}/Header/Header.test.cypress.d.ts +0 -0
  252. /package/lib/{src/components → components}/Header/index.d.ts +0 -0
  253. /package/lib/{src/components → components}/Header/styles.d.ts +0 -0
  254. /package/lib/{src/components → components}/Heading/Heading.stories.d.ts +0 -0
  255. /package/lib/{src/components → components}/Heading/Heading.test.cypress.d.ts +0 -0
  256. /package/lib/{src/components → components}/Heading/index.d.ts +0 -0
  257. /package/lib/{src/components → components}/Heading/styles.d.ts +0 -0
  258. /package/lib/{src/components → components}/IconFa/IconFa.stories.d.ts +0 -0
  259. /package/lib/{src/components → components}/IconFa/IconFa.test.cypress.d.ts +0 -0
  260. /package/lib/{src/components → components}/IconFa/index.d.ts +0 -0
  261. /package/lib/{src/components → components}/IconFa/styles.d.ts +0 -0
  262. /package/lib/{src/components → components}/InfoBox/InfoBox.test.cypress.d.ts +0 -0
  263. /package/lib/{src/components → components}/LabelWrapper/index.d.ts +0 -0
  264. /package/lib/{src/components → components}/LabelWrapper/styles.d.ts +0 -0
  265. /package/lib/{src/components → components}/LegendWrapper/LegendWrapper.stories.d.ts +0 -0
  266. /package/lib/{src/components → components}/LegendWrapper/LegendWrapper.test.cypress.d.ts +0 -0
  267. /package/lib/{src/components → components}/LegendWrapper/index.d.ts +0 -0
  268. /package/lib/{src/components → components}/LegendWrapper/styles.d.ts +0 -0
  269. /package/lib/{src/components → components}/Link/Link.test.cypress.d.ts +0 -0
  270. /package/lib/{src/components → components}/Loader/Loader.stories.d.ts +0 -0
  271. /package/lib/{src/components → components}/Loader/Loader.test.cypress.d.ts +0 -0
  272. /package/lib/{src/components → components}/Loader/index.d.ts +0 -0
  273. /package/lib/{src/components → components}/Loader/styles.d.ts +0 -0
  274. /package/lib/{src/components → components}/Modal/Modal.stories.d.ts +0 -0
  275. /package/lib/{src/components → components}/Modal/Modal.test.cypress.d.ts +0 -0
  276. /package/lib/{src/components → components}/Modal/index.d.ts +0 -0
  277. /package/lib/{src/components → components}/Pagination/Pagination.stories.d.ts +0 -0
  278. /package/lib/{src/components → components}/Pagination/Pagination.test.cypress.d.ts +0 -0
  279. /package/lib/{src/components → components}/Pagination/index.d.ts +0 -0
  280. /package/lib/{src/components → components}/Pagination/styles.d.ts +0 -0
  281. /package/lib/{src/components → components}/PopOver/PopOver.test.cypress.d.ts +0 -0
  282. /package/lib/{src/components → components}/PopOver/Popover.stories.d.ts +0 -0
  283. /package/lib/{src/components → components}/PopOver/index.d.ts +0 -0
  284. /package/lib/{src/components → components}/PopOver/styles.d.ts +0 -0
  285. /package/lib/{src/components → components}/ProgressBar/ProgressBar.stories.d.ts +0 -0
  286. /package/lib/{src/components → components}/ProgressBar/ProgressBar.test.cypress.d.ts +0 -0
  287. /package/lib/{src/components → components}/ProgressBar/index.d.ts +0 -0
  288. /package/lib/{src/components → components}/ProgressBar/styles.d.ts +0 -0
  289. /package/lib/{src/components → components}/Radio/Radio.test.cypress.d.ts +0 -0
  290. /package/lib/{src/components → components}/Radio/styles.d.ts +0 -0
  291. /package/lib/{src/components → components}/RadioConsent/Radio.stories.d.ts +0 -0
  292. /package/lib/{src/components → components}/RadioConsent/RadioConsent.test.cypress.d.ts +0 -0
  293. /package/lib/{src/components → components}/RadioConsent/index.d.ts +0 -0
  294. /package/lib/{src/components → components}/Select/Select.test.cypress.d.ts +0 -0
  295. /package/lib/{src/components → components}/Select/styles.d.ts +0 -0
  296. /package/lib/{src/components → components}/Spacing/index.d.ts +0 -0
  297. /package/lib/{src/components → components}/Step/Step.stories.d.ts +0 -0
  298. /package/lib/{src/components → components}/Step/Step.test.cypress.d.ts +0 -0
  299. /package/lib/{src/components → components}/Step/index.d.ts +0 -0
  300. /package/lib/{src/components → components}/Step/styles.d.ts +0 -0
  301. /package/lib/{src/components → components}/Text/Text.test.cypress.d.ts +0 -0
  302. /package/lib/{src/components → components}/Text/styles.d.ts +0 -0
  303. /package/lib/{src/components → components}/TextAreaField/TextAreaField.test.cypress.d.ts +0 -0
  304. /package/lib/{src/components → components}/TextAreaField/styles.d.ts +0 -0
  305. /package/lib/{src/components → components}/TextField/TextField.test.cypress.d.ts +0 -0
  306. /package/lib/{src/components → components}/Totaliser/Totaliser.stories.d.ts +0 -0
  307. /package/lib/{src/components → components}/Totaliser/Totaliser.test.cypress.d.ts +0 -0
  308. /package/lib/{src/components → components}/Totaliser/index.d.ts +0 -0
  309. /package/lib/{src/components → components}/Totaliser/styles.d.ts +0 -0
  310. /package/lib/{src/components → components}/UserBlock/UserBlock.stories.d.ts +0 -0
  311. /package/lib/{src/components → components}/UserBlock/UserBlock.test.cypress.d.ts +0 -0
  312. /package/lib/{src/components → components}/UserBlock/index.d.ts +0 -0
  313. /package/lib/{src/components → components}/UserBlock/styles.d.ts +0 -0
  314. /package/lib/{src/components → components}/index.d.ts +0 -0
  315. /package/lib/{src/hooks → hooks}/useEffectBrowser.d.ts +0 -0
  316. /package/lib/{src/hooks → hooks}/useKey.d.ts +0 -0
  317. /package/lib/{src/hooks → hooks}/useLayoutEffectBrowser.d.ts +0 -0
  318. /package/lib/{src/themes → themes}/bowelbabe.d.ts +0 -0
  319. /package/lib/{src/themes → themes}/cruk.d.ts +0 -0
  320. /package/lib/{src/themes → themes}/rfl.d.ts +0 -0
  321. /package/lib/{src/themes → themes}/su2c.d.ts +0 -0
  322. /package/lib/{src/types.d.ts → types.d.ts} +0 -0
  323. /package/lib/{src/utils → utils}/Helper.d.ts +0 -0
  324. /package/lib/{src/utils → utils}/__tests__/testHelpers.test.d.ts +0 -0
  325. /package/lib/{src/utils → utils}/debounce.d.ts +0 -0
  326. /package/lib/{src/utils → utils}/themeUtils.d.ts +0 -0
@@ -1,2 +1,2 @@
1
- function i(i){return{...i,margin:void 0,marginTop:void 0,marginRight:void 0,marginBottom:void 0,marginLeft:void 0,marginVertical:void 0,marginHorizontal:void 0,padding:void 0,paddingTop:void 0,paddingRight:void 0,paddingBottom:void 0,paddingLeft:void 0,paddingVertical:void 0,paddingHorizontal:void 0,$margin:i.margin,$marginTop:i.marginTop,$marginRight:i.marginRight,$marginBottom:i.marginBottom,$marginLeft:i.marginLeft,$marginVertical:i.marginVertical,$marginHorizontal:i.marginHorizontal,$padding:i.padding,$paddingTop:i.paddingTop,$paddingRight:i.paddingRight,$paddingBottom:i.paddingBottom,$paddingLeft:i.paddingLeft,$paddingVertical:i.paddingVertical,$paddingHorizontal:i.paddingHorizontal}}function n(i,n){const{$margin:a,$marginHorizontal:t,$marginVertical:g,$marginTop:d,$marginRight:o,$marginBottom:p,$marginLeft:r,$padding:m,$paddingHorizontal:$,$paddingVertical:l,$paddingTop:c,$paddingRight:e,$paddingBottom:u,$paddingLeft:s}=i,f=a?n.spacing[a]:null,v=g?n.spacing[g]:null,h=t?n.spacing[t]:null,z=d?n.spacing[d]:null,B=o?n.spacing[o]:null,H=p?n.spacing[p]:null,L=r?n.spacing[r]:null,R=f?`margin: ${f} !important;`:"",T=z?`margin-top: ${z} !important;`:v?`margin-top: ${v} !important;`:"",V=B?`margin-right: ${B} !important;`:h?`margin-right: ${h} !important;`:"",b=H?`margin-bottom: ${H} !important;`:v?`margin-bottom: ${v} !important;`:"",x=L?`margin-left: ${L} !important;`:h?`margin-left: ${h} !important;`:"",j=m?n.spacing[m]:null,k=l?n.spacing[l]:null,q=$?n.spacing[$]:null,w=c?n.spacing[c]:null,y=e?n.spacing[e]:null,A=u?n.spacing[u]:null,C=s?n.spacing[s]:null;return`\n ${R}\n ${T}\n ${V}\n ${b}\n ${x}\n ${j?`padding: ${j} !important;`:""}\n ${w?`padding-top: ${w} !important;`:k?`padding-top: ${k} !important;`:""}\n ${y?`padding-right: ${y} !important;`:q?`padding-right: ${q} !important;`:""}\n ${A?`padding-bottom: ${A} !important;`:k?`padding-bottom: ${k} !important;`:""}\n ${C?`padding-left: ${C} !important;`:q?`padding-left: ${q} !important;`:""}\n `}export{n as default,n as spacing,i as spacingPropsToSpacingPropsInternal};
1
+ import{__assign as n}from"../../../node_modules/tslib/tslib.es6.js";function a(a){return n(n({},a),{margin:void 0,marginTop:void 0,marginRight:void 0,marginBottom:void 0,marginLeft:void 0,marginVertical:void 0,marginHorizontal:void 0,padding:void 0,paddingTop:void 0,paddingRight:void 0,paddingBottom:void 0,paddingLeft:void 0,paddingVertical:void 0,paddingHorizontal:void 0,$margin:a.margin,$marginTop:a.marginTop,$marginRight:a.marginRight,$marginBottom:a.marginBottom,$marginLeft:a.marginLeft,$marginVertical:a.marginVertical,$marginHorizontal:a.marginHorizontal,$padding:a.padding,$paddingTop:a.paddingTop,$paddingRight:a.paddingRight,$paddingBottom:a.paddingBottom,$paddingLeft:a.paddingLeft,$paddingVertical:a.paddingVertical,$paddingHorizontal:a.paddingHorizontal})}function i(n,a){var i=n.$margin,t=n.$marginHorizontal,o=n.$marginVertical,g=n.$marginTop,d=n.$marginRight,p=n.$marginBottom,r=n.$marginLeft,c=n.$padding,m=n.$paddingHorizontal,l=n.$paddingVertical,$=n.$paddingTop,e=n.$paddingRight,s=n.$paddingBottom,u=n.$paddingLeft,f=i?a.spacing[i]:null,v=o?a.spacing[o]:null,h=t?a.spacing[t]:null,z=g?a.spacing[g]:null,B=d?a.spacing[d]:null,H=p?a.spacing[p]:null,L=r?a.spacing[r]:null,R=f?"margin: ".concat(f," !important;"):"",T=z?"margin-top: ".concat(z," !important;"):v?"margin-top: ".concat(v," !important;"):"",V=B?"margin-right: ".concat(B," !important;"):h?"margin-right: ".concat(h," !important;"):"",b=H?"margin-bottom: ".concat(H," !important;"):v?"margin-bottom: ".concat(v," !important;"):"",j=L?"margin-left: ".concat(L," !important;"):h?"margin-left: ".concat(h," !important;"):"",x=c?a.spacing[c]:null,_=l?a.spacing[l]:null,k=m?a.spacing[m]:null,q=$?a.spacing[$]:null,w=e?a.spacing[e]:null,y=s?a.spacing[s]:null,A=u?a.spacing[u]:null,C=x?"padding: ".concat(x," !important;"):"",D=q?"padding-top: ".concat(q," !important;"):_?"padding-top: ".concat(_," !important;"):"",E=w?"padding-right: ".concat(w," !important;"):k?"padding-right: ".concat(k," !important;"):"",F=y?"padding-bottom: ".concat(y," !important;"):_?"padding-bottom: ".concat(_," !important;"):"",G=A?"padding-left: ".concat(A," !important;"):k?"padding-left: ".concat(k," !important;"):"";return"\n ".concat(R,"\n ").concat(T,"\n ").concat(V,"\n ").concat(b,"\n ").concat(j,"\n ").concat(C,"\n ").concat(D,"\n ").concat(E,"\n ").concat(F,"\n ").concat(G,"\n ")}export{i as default,i as spacing,a as spacingPropsToSpacingPropsInternal};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/Spacing/index.tsx"],"sourcesContent":["import { type SpaceType, type ThemeType } from \"../../types\";\n\nexport type SpacingProps = {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInterface {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n}\n\nexport type SpacingPropsInternal = {\n $margin?: SpaceType;\n $marginTop?: SpaceType;\n $marginRight?: SpaceType;\n $marginBottom?: SpaceType;\n $marginLeft?: SpaceType;\n $marginVertical?: SpaceType;\n $marginHorizontal?: SpaceType;\n $padding?: SpaceType;\n $paddingTop?: SpaceType;\n $paddingRight?: SpaceType;\n $paddingBottom?: SpaceType;\n $paddingLeft?: SpaceType;\n $paddingVertical?: SpaceType;\n $paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInternalInterface {\n $margin?: SpaceType;\n $marginTop?: SpaceType;\n $marginRight?: SpaceType;\n $marginBottom?: SpaceType;\n $marginLeft?: SpaceType;\n $marginVertical?: SpaceType;\n $marginHorizontal?: SpaceType;\n $padding?: SpaceType;\n $paddingTop?: SpaceType;\n $paddingRight?: SpaceType;\n $paddingBottom?: SpaceType;\n $paddingLeft?: SpaceType;\n $paddingVertical?: SpaceType;\n $paddingHorizontal?: SpaceType;\n}\n\nexport function spacingPropsToSpacingPropsInternal(\n props: SpacingPropsInterface,\n): SpacingPropsInternalInterface {\n const internalProps = {\n ...props,\n margin: undefined,\n marginTop: undefined,\n marginRight: undefined,\n marginBottom: undefined,\n marginLeft: undefined,\n marginVertical: undefined,\n marginHorizontal: undefined,\n padding: undefined,\n paddingTop: undefined,\n paddingRight: undefined,\n paddingBottom: undefined,\n paddingLeft: undefined,\n paddingVertical: undefined,\n paddingHorizontal: undefined,\n $margin: props.margin,\n $marginTop: props.marginTop,\n $marginRight: props.marginRight,\n $marginBottom: props.marginBottom,\n $marginLeft: props.marginLeft,\n $marginVertical: props.marginVertical,\n $marginHorizontal: props.marginHorizontal,\n $padding: props.padding,\n $paddingTop: props.paddingTop,\n $paddingRight: props.paddingRight,\n $paddingBottom: props.paddingBottom,\n $paddingLeft: props.paddingLeft,\n $paddingVertical: props.paddingVertical,\n $paddingHorizontal: props.paddingHorizontal,\n };\n return internalProps;\n}\n\nexport function spacing(props: SpacingPropsInternal, theme: ThemeType) {\n const {\n $margin,\n $marginHorizontal,\n $marginVertical,\n $marginTop,\n $marginRight,\n $marginBottom,\n $marginLeft,\n $padding,\n $paddingHorizontal,\n $paddingVertical,\n $paddingTop,\n $paddingRight,\n $paddingBottom,\n $paddingLeft,\n } = props;\n\n const ma = $margin ? theme.spacing[$margin] : null;\n const mv = $marginVertical ? theme.spacing[$marginVertical] : null;\n const mh = $marginHorizontal ? theme.spacing[$marginHorizontal] : null;\n const mt = $marginTop ? theme.spacing[$marginTop] : null;\n const mr = $marginRight ? theme.spacing[$marginRight] : null;\n const mb = $marginBottom ? theme.spacing[$marginBottom] : null;\n const ml = $marginLeft ? theme.spacing[$marginLeft] : null;\n\n const maString = ma ? `margin: ${ma} !important;` : \"\";\n const mtString = mt\n ? `margin-top: ${mt} !important;`\n : mv\n ? `margin-top: ${mv} !important;`\n : \"\";\n const mrString = mr\n ? `margin-right: ${mr} !important;`\n : mh\n ? `margin-right: ${mh} !important;`\n : \"\";\n const mbString = mb\n ? `margin-bottom: ${mb} !important;`\n : mv\n ? `margin-bottom: ${mv} !important;`\n : \"\";\n const mlString = ml\n ? `margin-left: ${ml} !important;`\n : mh\n ? `margin-left: ${mh} !important;`\n : \"\";\n\n const pa = $padding ? theme.spacing[$padding] : null;\n const pv = $paddingVertical ? theme.spacing[$paddingVertical] : null;\n const ph = $paddingHorizontal ? theme.spacing[$paddingHorizontal] : null;\n const pt = $paddingTop ? theme.spacing[$paddingTop] : null;\n const pr = $paddingRight ? theme.spacing[$paddingRight] : null;\n const pb = $paddingBottom ? theme.spacing[$paddingBottom] : null;\n const pl = $paddingLeft ? theme.spacing[$paddingLeft] : null;\n\n const paString = pa ? `padding: ${pa} !important;` : \"\";\n const ptString = pt\n ? `padding-top: ${pt} !important;`\n : pv\n ? `padding-top: ${pv} !important;`\n : \"\";\n const prString = pr\n ? `padding-right: ${pr} !important;`\n : ph\n ? `padding-right: ${ph} !important;`\n : \"\";\n const pbString = pb\n ? `padding-bottom: ${pb} !important;`\n : pv\n ? `padding-bottom: ${pv} !important;`\n : \"\";\n const plString = pl\n ? `padding-left: ${pl} !important;`\n : ph\n ? `padding-left: ${ph} !important;`\n : \"\";\n\n return `\n ${maString}\n ${mtString}\n ${mrString}\n ${mbString}\n ${mlString}\n ${paString}\n ${ptString}\n ${prString}\n ${pbString}\n ${plString}\n `;\n}\n\nexport default spacing;\n"],"names":["spacingPropsToSpacingPropsInternal","props","margin","undefined","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","$margin","$marginTop","$marginRight","$marginBottom","$marginLeft","$marginVertical","$marginHorizontal","$padding","$paddingTop","$paddingRight","$paddingBottom","$paddingLeft","$paddingVertical","$paddingHorizontal","spacing","theme","ma","mv","mh","mt","mr","mb","ml","maString","mtString","mrString","mbString","mlString","pa","pv","ph","pt","pr","pb","pl"],"mappings":"AAsEM,SAAUA,EACdC,GAiCA,MA/BsB,IACjBA,EACHC,YAAQC,EACRC,eAAWD,EACXE,iBAAaF,EACbG,kBAAcH,EACdI,gBAAYJ,EACZK,oBAAgBL,EAChBM,sBAAkBN,EAClBO,aAASP,EACTQ,gBAAYR,EACZS,kBAAcT,EACdU,mBAAeV,EACfW,iBAAaX,EACbY,qBAAiBZ,EACjBa,uBAAmBb,EACnBc,QAAShB,EAAMC,OACfgB,WAAYjB,EAAMG,UAClBe,aAAclB,EAAMI,YACpBe,cAAenB,EAAMK,aACrBe,YAAapB,EAAMM,WACnBe,gBAAiBrB,EAAMO,eACvBe,kBAAmBtB,EAAMQ,iBACzBe,SAAUvB,EAAMS,QAChBe,YAAaxB,EAAMU,WACnBe,cAAezB,EAAMW,aACrBe,eAAgB1B,EAAMY,cACtBe,aAAc3B,EAAMa,YACpBe,iBAAkB5B,EAAMc,gBACxBe,mBAAoB7B,EAAMe,kBAG9B,CAEgB,SAAAe,EAAQ9B,EAA6B+B,GACnD,MAAMf,QACJA,EAAOM,kBACPA,EAAiBD,gBACjBA,EAAeJ,WACfA,EAAUC,aACVA,EAAYC,cACZA,EAAaC,YACbA,EAAWG,SACXA,EAAQM,mBACRA,EAAkBD,iBAClBA,EAAgBJ,YAChBA,EAAWC,cACXA,EAAaC,eACbA,EAAcC,aACdA,GACE3B,EAEEgC,EAAKhB,EAAUe,EAAMD,QAAQd,GAAW,KACxCiB,EAAKZ,EAAkBU,EAAMD,QAAQT,GAAmB,KACxDa,EAAKZ,EAAoBS,EAAMD,QAAQR,GAAqB,KAC5Da,EAAKlB,EAAac,EAAMD,QAAQb,GAAc,KAC9CmB,EAAKlB,EAAea,EAAMD,QAAQZ,GAAgB,KAClDmB,EAAKlB,EAAgBY,EAAMD,QAAQX,GAAiB,KACpDmB,EAAKlB,EAAcW,EAAMD,QAAQV,GAAe,KAEhDmB,EAAWP,EAAK,WAAWA,gBAAmB,GAC9CQ,EAAWL,EACb,eAAeA,gBACfF,EACE,eAAeA,gBACf,GACAQ,EAAWL,EACb,iBAAiBA,gBACjBF,EACE,iBAAiBA,gBACjB,GACAQ,EAAWL,EACb,kBAAkBA,gBAClBJ,EACE,kBAAkBA,gBAClB,GACAU,EAAWL,EACb,gBAAgBA,gBAChBJ,EACE,gBAAgBA,gBAChB,GAEAU,EAAKrB,EAAWQ,EAAMD,QAAQP,GAAY,KAC1CsB,EAAKjB,EAAmBG,EAAMD,QAAQF,GAAoB,KAC1DkB,EAAKjB,EAAqBE,EAAMD,QAAQD,GAAsB,KAC9DkB,EAAKvB,EAAcO,EAAMD,QAAQN,GAAe,KAChDwB,EAAKvB,EAAgBM,EAAMD,QAAQL,GAAiB,KACpDwB,EAAKvB,EAAiBK,EAAMD,QAAQJ,GAAkB,KACtDwB,EAAKvB,EAAeI,EAAMD,QAAQH,GAAgB,KAwBxD,MAAO,SACHY,UACAC,UACAC,UACAC,UACAC,UA3BaC,EAAK,YAAYA,gBAAmB,WACpCG,EACb,gBAAgBA,gBAChBF,EACE,gBAAgBA,gBAChB,WACWG,EACb,kBAAkBA,gBAClBF,EACE,kBAAkBA,gBAClB,WACWG,EACb,mBAAmBA,gBACnBJ,EACE,mBAAmBA,gBACnB,WACWK,EACb,iBAAiBA,gBACjBJ,EACE,iBAAiBA,gBACjB,QAcR"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/Spacing/index.tsx"],"sourcesContent":["import { type SpaceType, type ThemeType } from \"../../types\";\n\nexport type SpacingProps = {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInterface {\n margin?: SpaceType;\n marginTop?: SpaceType;\n marginRight?: SpaceType;\n marginBottom?: SpaceType;\n marginLeft?: SpaceType;\n marginVertical?: SpaceType;\n marginHorizontal?: SpaceType;\n padding?: SpaceType;\n paddingTop?: SpaceType;\n paddingRight?: SpaceType;\n paddingBottom?: SpaceType;\n paddingLeft?: SpaceType;\n paddingVertical?: SpaceType;\n paddingHorizontal?: SpaceType;\n}\n\nexport type SpacingPropsInternal = {\n $margin?: SpaceType;\n $marginTop?: SpaceType;\n $marginRight?: SpaceType;\n $marginBottom?: SpaceType;\n $marginLeft?: SpaceType;\n $marginVertical?: SpaceType;\n $marginHorizontal?: SpaceType;\n $padding?: SpaceType;\n $paddingTop?: SpaceType;\n $paddingRight?: SpaceType;\n $paddingBottom?: SpaceType;\n $paddingLeft?: SpaceType;\n $paddingVertical?: SpaceType;\n $paddingHorizontal?: SpaceType;\n};\n\ninterface SpacingPropsInternalInterface {\n $margin?: SpaceType;\n $marginTop?: SpaceType;\n $marginRight?: SpaceType;\n $marginBottom?: SpaceType;\n $marginLeft?: SpaceType;\n $marginVertical?: SpaceType;\n $marginHorizontal?: SpaceType;\n $padding?: SpaceType;\n $paddingTop?: SpaceType;\n $paddingRight?: SpaceType;\n $paddingBottom?: SpaceType;\n $paddingLeft?: SpaceType;\n $paddingVertical?: SpaceType;\n $paddingHorizontal?: SpaceType;\n}\n\nexport function spacingPropsToSpacingPropsInternal(\n props: SpacingPropsInterface,\n): SpacingPropsInternalInterface {\n const internalProps = {\n ...props,\n margin: undefined,\n marginTop: undefined,\n marginRight: undefined,\n marginBottom: undefined,\n marginLeft: undefined,\n marginVertical: undefined,\n marginHorizontal: undefined,\n padding: undefined,\n paddingTop: undefined,\n paddingRight: undefined,\n paddingBottom: undefined,\n paddingLeft: undefined,\n paddingVertical: undefined,\n paddingHorizontal: undefined,\n $margin: props.margin,\n $marginTop: props.marginTop,\n $marginRight: props.marginRight,\n $marginBottom: props.marginBottom,\n $marginLeft: props.marginLeft,\n $marginVertical: props.marginVertical,\n $marginHorizontal: props.marginHorizontal,\n $padding: props.padding,\n $paddingTop: props.paddingTop,\n $paddingRight: props.paddingRight,\n $paddingBottom: props.paddingBottom,\n $paddingLeft: props.paddingLeft,\n $paddingVertical: props.paddingVertical,\n $paddingHorizontal: props.paddingHorizontal,\n };\n return internalProps;\n}\n\nexport function spacing(props: SpacingPropsInternal, theme: ThemeType) {\n const {\n $margin,\n $marginHorizontal,\n $marginVertical,\n $marginTop,\n $marginRight,\n $marginBottom,\n $marginLeft,\n $padding,\n $paddingHorizontal,\n $paddingVertical,\n $paddingTop,\n $paddingRight,\n $paddingBottom,\n $paddingLeft,\n } = props;\n\n const ma = $margin ? theme.spacing[$margin] : null;\n const mv = $marginVertical ? theme.spacing[$marginVertical] : null;\n const mh = $marginHorizontal ? theme.spacing[$marginHorizontal] : null;\n const mt = $marginTop ? theme.spacing[$marginTop] : null;\n const mr = $marginRight ? theme.spacing[$marginRight] : null;\n const mb = $marginBottom ? theme.spacing[$marginBottom] : null;\n const ml = $marginLeft ? theme.spacing[$marginLeft] : null;\n\n const maString = ma ? `margin: ${ma} !important;` : \"\";\n const mtString = mt\n ? `margin-top: ${mt} !important;`\n : mv\n ? `margin-top: ${mv} !important;`\n : \"\";\n const mrString = mr\n ? `margin-right: ${mr} !important;`\n : mh\n ? `margin-right: ${mh} !important;`\n : \"\";\n const mbString = mb\n ? `margin-bottom: ${mb} !important;`\n : mv\n ? `margin-bottom: ${mv} !important;`\n : \"\";\n const mlString = ml\n ? `margin-left: ${ml} !important;`\n : mh\n ? `margin-left: ${mh} !important;`\n : \"\";\n\n const pa = $padding ? theme.spacing[$padding] : null;\n const pv = $paddingVertical ? theme.spacing[$paddingVertical] : null;\n const ph = $paddingHorizontal ? theme.spacing[$paddingHorizontal] : null;\n const pt = $paddingTop ? theme.spacing[$paddingTop] : null;\n const pr = $paddingRight ? theme.spacing[$paddingRight] : null;\n const pb = $paddingBottom ? theme.spacing[$paddingBottom] : null;\n const pl = $paddingLeft ? theme.spacing[$paddingLeft] : null;\n\n const paString = pa ? `padding: ${pa} !important;` : \"\";\n const ptString = pt\n ? `padding-top: ${pt} !important;`\n : pv\n ? `padding-top: ${pv} !important;`\n : \"\";\n const prString = pr\n ? `padding-right: ${pr} !important;`\n : ph\n ? `padding-right: ${ph} !important;`\n : \"\";\n const pbString = pb\n ? `padding-bottom: ${pb} !important;`\n : pv\n ? `padding-bottom: ${pv} !important;`\n : \"\";\n const plString = pl\n ? `padding-left: ${pl} !important;`\n : ph\n ? `padding-left: ${ph} !important;`\n : \"\";\n\n return `\n ${maString}\n ${mtString}\n ${mrString}\n ${mbString}\n ${mlString}\n ${paString}\n ${ptString}\n ${prString}\n ${pbString}\n ${plString}\n `;\n}\n\nexport default spacing;\n"],"names":["spacingPropsToSpacingPropsInternal","props","__assign","margin","undefined","marginTop","marginRight","marginBottom","marginLeft","marginVertical","marginHorizontal","padding","paddingTop","paddingRight","paddingBottom","paddingLeft","paddingVertical","paddingHorizontal","$margin","$marginTop","$marginRight","$marginBottom","$marginLeft","$marginVertical","$marginHorizontal","$padding","$paddingTop","$paddingRight","$paddingBottom","$paddingLeft","$paddingVertical","$paddingHorizontal","spacing","theme","ma","mv","mh","mt","mr","mb","ml","maString","concat","mtString","mrString","mbString","mlString","pa","pv","ph","pt","pr","pb","pl","paString","ptString","prString","pbString","plString"],"mappings":"oEAsEM,SAAUA,EACdC,GAiCA,OA/BmBC,EAAAA,EAAA,CAAA,EACdD,GAAK,CACRE,YAAQC,EACRC,eAAWD,EACXE,iBAAaF,EACbG,kBAAcH,EACdI,gBAAYJ,EACZK,oBAAgBL,EAChBM,sBAAkBN,EAClBO,aAASP,EACTQ,gBAAYR,EACZS,kBAAcT,EACdU,mBAAeV,EACfW,iBAAaX,EACbY,qBAAiBZ,EACjBa,uBAAmBb,EACnBc,QAASjB,EAAME,OACfgB,WAAYlB,EAAMI,UAClBe,aAAcnB,EAAMK,YACpBe,cAAepB,EAAMM,aACrBe,YAAarB,EAAMO,WACnBe,gBAAiBtB,EAAMQ,eACvBe,kBAAmBvB,EAAMS,iBACzBe,SAAUxB,EAAMU,QAChBe,YAAazB,EAAMW,WACnBe,cAAe1B,EAAMY,aACrBe,eAAgB3B,EAAMa,cACtBe,aAAc5B,EAAMc,YACpBe,iBAAkB7B,EAAMe,gBACxBe,mBAAoB9B,EAAMgB,mBAG9B,CAEgB,SAAAe,EAAQ/B,EAA6BgC,GAEjD,IAAAf,EAcEjB,EAAKiB,QAbPM,EAaEvB,EAAKuB,kBAZPD,EAYEtB,kBAXFkB,EAWElB,EAXQkB,WACVC,EAUEnB,EAVUmB,aACZC,EASEpB,EAAKoB,cARPC,EAQErB,EAAKqB,YAPPG,EAOExB,EAPMwB,SACRM,EAME9B,EANgB8B,mBAClBD,EAKE7B,EAAK6B,iBAJPJ,EAIEzB,EAAKyB,YAHPC,EAGE1B,gBAFF2B,EAEE3B,iBADF4B,EACE5B,eAEEiC,EAAKhB,EAAUe,EAAMD,QAAQd,GAAW,KACxCiB,EAAKZ,EAAkBU,EAAMD,QAAQT,GAAmB,KACxDa,EAAKZ,EAAoBS,EAAMD,QAAQR,GAAqB,KAC5Da,EAAKlB,EAAac,EAAMD,QAAQb,GAAc,KAC9CmB,EAAKlB,EAAea,EAAMD,QAAQZ,GAAgB,KAClDmB,EAAKlB,EAAgBY,EAAMD,QAAQX,GAAiB,KACpDmB,EAAKlB,EAAcW,EAAMD,QAAQV,GAAe,KAEhDmB,EAAWP,EAAK,WAAWQ,OAAAR,EAAgB,gBAAG,GAC9CS,EAAWN,EACb,eAAeK,OAAAL,EAAgB,gBAC/BF,EACE,eAAeO,OAAAP,EAAgB,gBAC/B,GACAS,EAAWN,EACb,iBAAiBI,OAAAJ,EAAgB,gBACjCF,EACE,iBAAiBM,OAAAN,EAAgB,gBACjC,GACAS,EAAWN,EACb,kBAAkBG,OAAAH,EAAgB,gBAClCJ,EACE,kBAAkBO,OAAAP,EAAgB,gBAClC,GACAW,EAAWN,EACb,gBAAgBE,OAAAF,EAAgB,gBAChCJ,EACE,gBAAgBM,OAAAN,EAAgB,gBAChC,GAEAW,EAAKtB,EAAWQ,EAAMD,QAAQP,GAAY,KAC1CuB,EAAKlB,EAAmBG,EAAMD,QAAQF,GAAoB,KAC1DmB,EAAKlB,EAAqBE,EAAMD,QAAQD,GAAsB,KAC9DmB,EAAKxB,EAAcO,EAAMD,QAAQN,GAAe,KAChDyB,EAAKxB,EAAgBM,EAAMD,QAAQL,GAAiB,KACpDyB,EAAKxB,EAAiBK,EAAMD,QAAQJ,GAAkB,KACtDyB,EAAKxB,EAAeI,EAAMD,QAAQH,GAAgB,KAElDyB,EAAWP,EAAK,YAAYL,OAAAK,EAAgB,gBAAG,GAC/CQ,EAAWL,EACb,gBAAgBR,OAAAQ,EAAgB,gBAChCF,EACE,gBAAgBN,OAAAM,EAAgB,gBAChC,GACAQ,EAAWL,EACb,kBAAkBT,OAAAS,EAAgB,gBAClCF,EACE,kBAAkBP,OAAAO,EAAgB,gBAClC,GACAQ,EAAWL,EACb,mBAAmBV,OAAAU,EAAgB,gBACnCJ,EACE,mBAAmBN,OAAAM,EAAgB,gBACnC,GACAU,EAAWL,EACb,iBAAiBX,OAAAW,EAAgB,gBACjCJ,EACE,iBAAiBP,OAAAO,EAAgB,gBACjC,GAEN,MAAO,SAAAP,OACHD,EACA,UAAAC,OAAAC,mBACAC,EAAQ,UAAAF,OACRG,EACA,UAAAH,OAAAI,mBACAQ,EAAQ,UAAAZ,OACRa,EACA,UAAAb,OAAAc,mBACAC,EAAQ,UAAAf,OACRgB,EAAQ,OAEd"}
@@ -1,2 +1,2 @@
1
- import e from"react";import{useTheme as t,ThemeProvider as r}from"styled-components";import{crukTheme as n}from"../../themes/cruk.js";import{StepWrapper as l,StepList as m,StepItem as a,StepBar as c,StepTick as o}from"./styles.js";function s({steps:s=[],current:i=1,children:p}){const u=t(),y={...n,...u},f=Array.isArray(s)?Object.keys(s).length:0;return e.createElement(r,{theme:y},e.createElement(l,null,e.createElement(m,{$total:f},Array.isArray(s)&&s.map(((t,r)=>{const n=`step${r}`;return e.createElement(a,{key:n,$active:r+1===i,$done:r+1<i},e.createElement(c,null,r+1<i&&e.createElement(o,null)),t)}))),p))}export{s as Step,s as default};
1
+ import{__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import t from"react";import{useTheme as r,ThemeProvider as n}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{StepWrapper as l,StepList as m,StepItem as a,StepBar as s,StepTick as c}from"./styles.js";function i(i){var u=i.steps,p=void 0===u?[]:u,d=i.current,f=void 0===d?1:d,y=i.children,E=r(),v=e(e({},o),E),h=Array.isArray(p)?Object.keys(p).length:0;return t.createElement(n,{theme:v},t.createElement(l,null,t.createElement(m,{$total:h},Array.isArray(p)&&p.map((function(e,r){var n="step".concat(r);return t.createElement(a,{key:n,$active:r+1===f,$done:r+1<f},t.createElement(s,null,r+1<f&&t.createElement(c,null)),e)}))),y))}export{i as Step,i as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/Step/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StepBar, StepItem, StepList, StepTick, StepWrapper } from \"./styles\";\n\nexport type StepProps = {\n /** current step number */\n current: number;\n /** list of step */\n steps: string[];\n children?: ReactNode;\n};\n\n// TODO think about AriaAttributes and how we want to pass them down\n\n/**\n *\n * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.\n * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.\n */\nexport function Step({ steps = [], current = 1, children }: StepProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const totalSteps: number = Array.isArray(steps)\n ? Object.keys(steps).length\n : 0;\n\n return (\n <ThemeProvider theme={theme}>\n <StepWrapper>\n <StepList $total={totalSteps}>\n {Array.isArray(steps) &&\n steps.map((step, i) => {\n const key = `step${i}`;\n return (\n <StepItem\n key={key}\n $active={i + 1 === current}\n $done={i + 1 < current}\n >\n <StepBar>{i + 1 < current && <StepTick />}</StepBar>\n {step}\n </StepItem>\n );\n })}\n </StepList>\n {children}\n </StepWrapper>\n </ThemeProvider>\n );\n}\nexport default Step;\n"],"names":["Step","steps","current","children","foundTheme","useTheme","theme","defaultTheme","totalSteps","Array","isArray","Object","keys","length","React","createElement","ThemeProvider","StepWrapper","StepList","map","step","i","key","StepItem","$active","$done","StepBar","StepTick"],"mappings":"uOAsBgB,SAAAA,GAAKC,MAAEA,EAAQ,GAAEC,QAAEA,EAAU,EAACC,SAAEA,IAC9C,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAECI,EAAqBC,MAAMC,QAAQT,GACrCU,OAAOC,KAAKX,GAAOY,OACnB,EAEJ,OACEC,EAACC,cAAAC,EAAc,CAAAV,MAAOA,GACpBQ,EAAAC,cAACE,EAAW,KACVH,EAACC,cAAAG,UAAiBV,GACfC,MAAMC,QAAQT,IACbA,EAAMkB,KAAI,CAACC,EAAMC,KACf,MAAMC,EAAM,OAAOD,IACnB,OACEP,EAACC,cAAAQ,GACCD,IAAKA,EACIE,QAAAH,EAAI,IAAMnB,EAAOuB,MACnBJ,EAAI,EAAInB,GAEfY,EAACC,cAAAW,EAAS,KAAAL,EAAI,EAAInB,GAAWY,EAAAC,cAACY,EAAQ,OACrCP,EACQ,KAIlBjB,GAIT"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/Step/index.tsx"],"sourcesContent":["import React, { type ReactNode } from \"react\";\nimport { ThemeProvider, useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport { StepBar, StepItem, StepList, StepTick, StepWrapper } from \"./styles\";\n\nexport type StepProps = {\n /** current step number */\n current: number;\n /** list of step */\n steps: string[];\n children?: ReactNode;\n};\n\n// TODO think about AriaAttributes and how we want to pass them down\n\n/**\n *\n * Visually show where a user is in a multi-step process. Calculate the number of steps and the width of each step required to fit the progress bar in the parent container.\n * Step display progress through a sequence by breaking it up into multiple logical steps. They may also be used for navigation.\n */\nexport function Step({ steps = [], current = 1, children }: StepProps) {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const totalSteps: number = Array.isArray(steps)\n ? Object.keys(steps).length\n : 0;\n\n return (\n <ThemeProvider theme={theme}>\n <StepWrapper>\n <StepList $total={totalSteps}>\n {Array.isArray(steps) &&\n steps.map((step, i) => {\n const key = `step${i}`;\n return (\n <StepItem\n key={key}\n $active={i + 1 === current}\n $done={i + 1 < current}\n >\n <StepBar>{i + 1 < current && <StepTick />}</StepBar>\n {step}\n </StepItem>\n );\n })}\n </StepList>\n {children}\n </StepWrapper>\n </ThemeProvider>\n );\n}\nexport default Step;\n"],"names":["Step","_a","_b","steps","undefined","_c","current","children","foundTheme","useTheme","theme","__assign","defaultTheme","totalSteps","Array","isArray","Object","keys","length","React","createElement","ThemeProvider","StepWrapper","StepList","map","step","i","key","concat","StepItem","$active","$done","StepBar","StepTick"],"mappings":"2SAsBM,SAAUA,EAAKC,GAAE,IAAAC,EAAAD,EAAAE,MAAAA,OAAQC,IAAAF,EAAA,KAAIG,EAAAJ,EAAAK,QAAAA,OAAUF,IAAAC,EAAA,EAACA,EAAEE,EAAQN,EAAAM,SAChDC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAECK,EAAqBC,MAAMC,QAAQZ,GACrCa,OAAOC,KAAKd,GAAOe,OACnB,EAEJ,OACEC,EAACC,cAAAC,EAAc,CAAAX,MAAOA,GACpBS,EAAAC,cAACE,EAAW,KACVH,EAACC,cAAAG,UAAiBV,GACfC,MAAMC,QAAQZ,IACbA,EAAMqB,KAAI,SAACC,EAAMC,GACf,IAAMC,EAAM,OAAOC,OAAAF,GACnB,OACEP,EAACC,cAAAS,GACCF,IAAKA,EACIG,QAAAJ,EAAI,IAAMpB,EAAOyB,MACnBL,EAAI,EAAIpB,GAEfa,EAACC,cAAAY,EAAS,KAAAN,EAAI,EAAIpB,GAAWa,EAAAC,cAACa,EAAQ,OACrCR,EAGP,KAEHlB,GAIT"}
@@ -1,80 +1,2 @@
1
- import o,{css as t}from"styled-components";const e=o.div`
2
- box-sizing: border-box;
3
- *,
4
- *:after,
5
- *:before {
6
- box-sizing: border-box;
7
- }
8
- text-align: center;
9
- text-transform: capitalize;
10
- `,r=o.ul`
11
- list-style: none;
12
- padding: 0;
13
- margin: 0;
14
- display: flex;
15
- justify-content: space-between;
16
- width: 100%;
17
-
18
- ${({$total:o})=>o&&t`
19
- li {
20
- width: ${100/o}%;
21
- }
22
- li:last-child span:after {
23
- display: none;
24
- }
25
- `}
26
- `,i=o.span`
27
- border-radius: 50%;
28
- background-clip: padding-box;
29
- width: 24px;
30
- height: 24px;
31
- background-color: ${({theme:o})=>o.colors.stepBackground};
32
- display: block;
33
- margin: 0 auto 0.5em auto;
34
- border: 2px solid ${({theme:o})=>o.colors.stepBorder};
35
- text-indent: -999px;
36
-
37
- &:after {
38
- display: block;
39
- position: absolute;
40
- width: 100%;
41
- height: 2px;
42
- content: "";
43
- background-color: transparent;
44
- border-bottom: 2px solid ${({theme:o})=>o.colors.stepBorder};
45
- left: 50%;
46
- top: 11px;
47
- margin-left: 12px;
48
- }
49
- `,a=o.span`
50
- display: block;
51
- transform: rotate(45deg);
52
- transform-origin: center center;
53
- height: 14px;
54
- width: 8px;
55
- border-bottom: ${({theme:{colors:{textLight:o}}})=>`2px solid ${o}`};
56
- border-right: ${({theme:{colors:{textLight:o}}})=>`2px solid ${o}`};
57
- margin-top: 4px;
58
- margin-left: 8px;
59
- `,l=o.li`
60
- display: flex;
61
- flex-direction: column;
62
- position: relative;
63
- font-family: ${({theme:o})=>o.typography.fontFamilyBase};
64
-
65
- ${({theme:o,$active:e})=>e&&t`
66
- ${i} {
67
- border-color: ${o.colors.tertiary};
68
- }
69
- `}
70
- ${({$done:o,theme:e})=>o&&t`
71
- ${i} {
72
- border: none;
73
- background-color: ${e.colors.tertiary};
74
- &:after {
75
- border-bottom: 2px solid ${e.colors.tertiary};
76
- }
77
- }
78
- `}
79
- `;export{i as StepBar,l as StepItem,r as StepList,a as StepTick,e as StepWrapper};
1
+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t,{css as o}from"styled-components";var r,e,i,a,l,d,p,s,c=t.div(r||(r=n(["\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n text-align: center;\n text-transform: capitalize;\n"],["\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n text-align: center;\n text-transform: capitalize;\n"]))),b=t.ul(i||(i=n(["\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ","\n"],["\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ","\n"])),(function(t){var r=t.$total;return r&&o(e||(e=n(["\n li {\n width: ","%;\n }\n li:last-child span:after {\n display: none;\n }\n "],["\n li {\n width: ","%;\n }\n li:last-child span:after {\n display: none;\n }\n "])),100/r)})),x=t.span(a||(a=n(["\n border-radius: 50%;\n background-clip: padding-box;\n width: 24px;\n height: 24px;\n background-color: ",";\n display: block;\n margin: 0 auto 0.5em auto;\n border: 2px solid ",';\n text-indent: -999px;\n\n &:after {\n display: block;\n position: absolute;\n width: 100%;\n height: 2px;\n content: "";\n background-color: transparent;\n border-bottom: 2px solid ',";\n left: 50%;\n top: 11px;\n margin-left: 12px;\n }\n"],["\n border-radius: 50%;\n background-clip: padding-box;\n width: 24px;\n height: 24px;\n background-color: ",";\n display: block;\n margin: 0 auto 0.5em auto;\n border: 2px solid ",';\n text-indent: -999px;\n\n &:after {\n display: block;\n position: absolute;\n width: 100%;\n height: 2px;\n content: "";\n background-color: transparent;\n border-bottom: 2px solid ',";\n left: 50%;\n top: 11px;\n margin-left: 12px;\n }\n"])),(function(n){return n.theme.colors.stepBackground}),(function(n){return n.theme.colors.stepBorder}),(function(n){return n.theme.colors.stepBorder})),f=t.span(l||(l=n(["\n display: block;\n transform: rotate(45deg);\n transform-origin: center center;\n height: 14px;\n width: 8px;\n border-bottom: ",";\n border-right: ",";\n margin-top: 4px;\n margin-left: 8px;\n"],["\n display: block;\n transform: rotate(45deg);\n transform-origin: center center;\n height: 14px;\n width: 8px;\n border-bottom: ",";\n border-right: ",";\n margin-top: 4px;\n margin-left: 8px;\n"])),(function(n){var t=n.theme.colors.textLight;return"2px solid ".concat(t)}),(function(n){var t=n.theme.colors.textLight;return"2px solid ".concat(t)})),g=t.li(s||(s=n(["\n display: flex;\n flex-direction: column;\n position: relative;\n font-family: ",";\n\n ","\n ","\n"],["\n display: flex;\n flex-direction: column;\n position: relative;\n font-family: ",";\n\n ","\n ","\n"])),(function(n){return n.theme.typography.fontFamilyBase}),(function(t){var r=t.theme;return t.$active&&o(d||(d=n(["\n "," {\n border-color: ",";\n }\n "],["\n "," {\n border-color: ",";\n }\n "])),x,r.colors.tertiary)}),(function(t){var r=t.$done,e=t.theme;return r&&o(p||(p=n(["\n "," {\n border: none;\n background-color: ",";\n &:after {\n border-bottom: 2px solid ",";\n }\n }\n "],["\n "," {\n border: none;\n background-color: ",";\n &:after {\n border-bottom: 2px solid ",";\n }\n }\n "])),x,e.colors.tertiary,e.colors.tertiary)}));export{x as StepBar,g as StepItem,b as StepList,f as StepTick,c as StepWrapper};
80
2
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sources":["../../../../src/components/Step/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StepWrapper = styled.div`\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n text-align: center;\n text-transform: capitalize;\n`;\n\nexport const StepList = styled.ul<{\n $total: number;\n}>`\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ${({ $total }) =>\n $total &&\n css`\n li {\n width: ${100 / $total}%;\n }\n li:last-child span:after {\n display: none;\n }\n `}\n`;\n\nexport const StepBar = styled.span<{\n theme: ThemeType;\n}>`\n border-radius: 50%;\n background-clip: padding-box;\n width: 24px;\n height: 24px;\n background-color: ${({ theme }) => theme.colors.stepBackground};\n display: block;\n margin: 0 auto 0.5em auto;\n border: 2px solid ${({ theme }) => theme.colors.stepBorder};\n text-indent: -999px;\n\n &:after {\n display: block;\n position: absolute;\n width: 100%;\n height: 2px;\n content: \"\";\n background-color: transparent;\n border-bottom: 2px solid ${({ theme }) => theme.colors.stepBorder};\n left: 50%;\n top: 11px;\n margin-left: 12px;\n }\n`;\n\nexport const StepTick = styled.span<{\n theme: ThemeType;\n}>`\n display: block;\n transform: rotate(45deg);\n transform-origin: center center;\n height: 14px;\n width: 8px;\n border-bottom: ${({\n theme: {\n colors: { textLight },\n },\n }) => `2px solid ${textLight}`};\n border-right: ${({\n theme: {\n colors: { textLight },\n },\n }) => `2px solid ${textLight}`};\n margin-top: 4px;\n margin-left: 8px;\n`;\n\nexport const StepItem = styled.li<{\n $active: boolean;\n $done: boolean;\n theme: ThemeType;\n}>`\n display: flex;\n flex-direction: column;\n position: relative;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n ${({ theme, $active }) =>\n $active &&\n css`\n ${StepBar} {\n border-color: ${theme.colors.tertiary};\n }\n `}\n ${({ $done, theme }) =>\n $done &&\n css`\n ${StepBar} {\n border: none;\n background-color: ${theme.colors.tertiary};\n &:after {\n border-bottom: 2px solid ${theme.colors.tertiary};\n }\n }\n `}\n`;\n"],"names":["StepWrapper","styled","div","StepList","ul","$total","css","StepBar","span","theme","colors","stepBackground","stepBorder","StepTick","textLight","StepItem","li","typography","fontFamilyBase","$active","tertiary","$done"],"mappings":"2CAGa,MAAAA,EAAcC,EAAOC,GAAG;;;;;;;;;EAWxBC,EAAWF,EAAOG,EAE7B;;;;;;;;IAQE,EAAGC,YACHA,GACAC,CAAG;;iBAEU,IAAMD;;;;;;EAQVE,EAAUN,EAAOO,IAE5B;;;;;sBAKoB,EAAGC,WAAYA,EAAMC,OAAOC;;;sBAG5B,EAAGF,WAAYA,EAAMC,OAAOE;;;;;;;;;;+BAUnB,EAAGH,WAAYA,EAAMC,OAAOE;;;;;EAO9CC,EAAWZ,EAAOO,IAE7B;;;;;;mBAMiB,EACfC,OACEC,QAAUI,iBAER,aAAaA;kBACH,EACdL,OACEC,QAAUI,iBAER,aAAaA;;;EAKRC,EAAWd,EAAOe,EAI7B;;;;iBAIe,EAAGP,WAAYA,EAAMQ,WAAWC;;IAE7C,EAAGT,QAAOU,aACVA,GACAb,CAAG;QACCC;wBACgBE,EAAMC,OAAOU;;;IAGjC,EAAGC,QAAOZ,WACVY,GACAf,CAAG;QACCC;;4BAEoBE,EAAMC,OAAOU;;qCAEJX,EAAMC,OAAOU;;;;"}
1
+ {"version":3,"file":"styles.js","sources":["../../../../src/components/Step/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\nexport const StepWrapper = styled.div`\n box-sizing: border-box;\n *,\n *:after,\n *:before {\n box-sizing: border-box;\n }\n text-align: center;\n text-transform: capitalize;\n`;\n\nexport const StepList = styled.ul<{\n $total: number;\n}>`\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n ${({ $total }) =>\n $total &&\n css`\n li {\n width: ${100 / $total}%;\n }\n li:last-child span:after {\n display: none;\n }\n `}\n`;\n\nexport const StepBar = styled.span<{\n theme: ThemeType;\n}>`\n border-radius: 50%;\n background-clip: padding-box;\n width: 24px;\n height: 24px;\n background-color: ${({ theme }) => theme.colors.stepBackground};\n display: block;\n margin: 0 auto 0.5em auto;\n border: 2px solid ${({ theme }) => theme.colors.stepBorder};\n text-indent: -999px;\n\n &:after {\n display: block;\n position: absolute;\n width: 100%;\n height: 2px;\n content: \"\";\n background-color: transparent;\n border-bottom: 2px solid ${({ theme }) => theme.colors.stepBorder};\n left: 50%;\n top: 11px;\n margin-left: 12px;\n }\n`;\n\nexport const StepTick = styled.span<{\n theme: ThemeType;\n}>`\n display: block;\n transform: rotate(45deg);\n transform-origin: center center;\n height: 14px;\n width: 8px;\n border-bottom: ${({\n theme: {\n colors: { textLight },\n },\n }) => `2px solid ${textLight}`};\n border-right: ${({\n theme: {\n colors: { textLight },\n },\n }) => `2px solid ${textLight}`};\n margin-top: 4px;\n margin-left: 8px;\n`;\n\nexport const StepItem = styled.li<{\n $active: boolean;\n $done: boolean;\n theme: ThemeType;\n}>`\n display: flex;\n flex-direction: column;\n position: relative;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n\n ${({ theme, $active }) =>\n $active &&\n css`\n ${StepBar} {\n border-color: ${theme.colors.tertiary};\n }\n `}\n ${({ $done, theme }) =>\n $done &&\n css`\n ${StepBar} {\n border: none;\n background-color: ${theme.colors.tertiary};\n &:after {\n border-bottom: 2px solid ${theme.colors.tertiary};\n }\n }\n `}\n`;\n"],"names":["StepWrapper","styled","div","templateObject_1","__makeTemplateObject","StepList","ul","templateObject_3","_a","$total","css","templateObject_2","StepBar","span","templateObject_4","theme","colors","stepBackground","stepBorder","StepTick","templateObject_5","textLight","concat","StepItem","li","templateObject_8","typography","fontFamilyBase","$active","templateObject_6","tertiary","$done","templateObject_7"],"mappings":"2HAGa,oBAAAA,EAAcC,EAAOC,IAAGC,IAAAA,EAAAC,EAAA,CAAA,yJAAA,CAAA,4JAWxBC,EAAWJ,EAAOK,GAAEC,IAAAA,EAAAH,EAAA,CAAA,gIAAA,MAAA,CAE/B,gIAiBG,SATD,SAACI,GAAE,IAAAC,EAAMD,EAAAC,OACT,OAAAA,GACAC,EAAGC,IAAAA,EAAAP,EAAA,CAAA,gCAAA,wFAAA,CAAA,gCAEsB,0FAAZ,IAAMK,EAHnB,IAWSG,EAAUX,EAAOY,KAAIC,IAAAA,EAAAV,EAAA,CAAA,kHAAA,2EAAA,kNAAA,oEAAA,CAEhC,kHAK8D,2EAGJ,kNAUS,uEAb/C,SAACI,GAAc,OAAPA,EAAAO,MAAaC,OAAOC,cAAb,IAGf,SAACT,GAAc,OAAPA,EAAAO,MAAaC,OAAOE,UAAb,IAUN,SAACV,GAAc,OAAPA,EAAAO,MAAaC,OAAOE,UAAb,IAOjCC,EAAWlB,EAAOY,KAE7BO,IAAAA,EAAAhB,EAAA,CAAA,0IAAA,sBAAA,gDAAA,CAAA,0IAU8B,sBAKA,mDATb,SAACI,GAEJ,IAAAa,EAASb,EAAAO,MAAAC,OAAAK,UAEjB,MAAA,aAAAC,OAAaD,EAAb,IACU,SAACb,GAEH,IAAAa,EAASb,EAAAO,MAAAC,OAAAK,UAEjB,MAAA,aAAAC,OAAaD,EAAb,IAKKE,EAAWtB,EAAOuB,GAAEC,IAAAA,EAAArB,EAAA,CAAA,wFAAA,UAAA,OAAA,MAAA,CAI/B,wFAI6D,UAQ1D,OAWA,SAnBY,SAACI,GAAc,OAAPA,EAAAO,MAAaW,WAAWC,cAAjB,IAE5B,SAACnB,OAAEO,EAAKP,EAAAO,MACR,OADiBP,EAAAoB,SAEjBlB,EAAGmB,IAAAA,EAAAzB,EAAA,CAAA,WAAA,6BAAA,oBAAA,CAAA,WACQ,6BAC8B,sBADrCQ,EACgBG,EAAMC,OAAOc,SAHjC,IAMA,SAACtB,OAAEuB,EAAKvB,EAAAuB,MAAEhB,EAAKP,EAAAO,MACf,OAAAgB,GACArB,EAAGsB,IAAAA,EAAA5B,EAAA,CAAA,WAAA,wDAAA,4DAAA,+BAAA,CAAA,WACQ,wDAEkC,4DAES,iCAJlDQ,EAEoBG,EAAMC,OAAOc,SAEJf,EAAMC,OAAOc,SAN9C"}
@@ -1,2 +1,2 @@
1
- import t,{forwardRef as e}from"react";import{useTheme as o}from"styled-components";import{crukTheme as r}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as m}from"../Spacing/index.js";import{TextStyled as i}from"./styles.js";const a=e(((e,a)=>{const l=o(),x={...r,...l},{textColor:n,textAlign:s,textSize:p,textWeight:f,textFontFamily:c,wordBreak:$,overflowWrap:d,...g}=e,y=m(g);return t.createElement(i,{$textColor:n,$textAlign:s,$textSize:p,$textWeight:f,$textFontFamily:c,$wordBreak:$,$overflowWrap:d,...y,theme:x,ref:a})}));a.displayName="Text";export{a as Text,a as default};
1
+ import{__assign as t,__rest as e}from"../../../node_modules/tslib/tslib.es6.js";import r from"react";import{useTheme as o}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{spacingPropsToSpacingPropsInternal as m}from"../Spacing/index.js";import{TextStyled as l}from"./styles.js";var x=function(x){var a=o(),n=t(t({},i),a),f=x.textColor,s=x.textAlign,p=x.textSize,d=x.textWeight,g=x.textFontFamily,$=x.wordBreak,c=x.overflowWrap,w=x.ref,F=e(x,["textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref"]),W=m(F);return r.createElement(l,t({$textColor:f,$textAlign:s,$textSize:p,$textWeight:d,$textFontFamily:g,$wordBreak:$,$overflowWrap:c},W,{theme:n,ref:w}))};export{x as Text,x as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import React, {\n type HTMLAttributes,\n type Ref,\n forwardRef,\n type ElementType,\n type LegacyRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n spacingPropsToSpacingPropsInternal,\n type SpacingProps,\n} from \"../Spacing\";\nimport {\n type WordBreakType,\n type FontSizeType,\n type OverflowWrapType,\n} from \"../../types\";\nimport { TextStyled } from \"./styles\";\n\n// the 'as' prop is for styled component casting\n// text hover color prop is only used in Link which extends Text\n\n/**\n * Text is to be used as the main paragraph component (or span using as=\"span\"). Using the Text component is preferred to simply adding text to a div and styling that div, this will guarantee we are always using the correct font and default text colour.\n */\nexport type TextProps = SpacingProps &\n HTMLAttributes<HTMLElement> & {\n /** text colour */\n textColor?: string;\n /** text horizontal alignment */\n textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n /** font size FontSizeType t-shirt sizes */\n textSize?: FontSizeType;\n /** font weight theme.typography{fontWeightHeavy/fontWeightNormal/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */\n textWeight?: number | string;\n /** font family theme.typography{fontFamilyBase/fontFamilyHeadings} is better than a random string */\n textFontFamily?: string;\n /** styled-components polymorphism where you can set this to \"span\", \"p\" or \"h2\" it default to \"p\" */\n as?: ElementType;\n /** word-break behaviour */\n wordBreak?: WordBreakType;\n /** overflow-wrap behaviour */\n overflowWrap?: OverflowWrapType;\n /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n ref?: Ref<HTMLElement>;\n };\n\nexport const Text = forwardRef((props: TextProps, ref?: Ref<HTMLElement>) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const {\n textColor,\n textAlign,\n textSize,\n textWeight,\n textFontFamily,\n wordBreak,\n overflowWrap,\n ...rest\n } = props;\n\n const withInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n\n return (\n <TextStyled\n $textColor={textColor}\n $textAlign={textAlign}\n $textSize={textSize}\n $textWeight={textWeight}\n $textFontFamily={textFontFamily}\n $wordBreak={wordBreak}\n $overflowWrap={overflowWrap}\n {...withInternalSpacingProps}\n theme={theme}\n ref={ref as LegacyRef<HTMLParagraphElement>}\n />\n );\n});\n\nText.displayName = \"Text\";\n\nexport default Text;\n"],"names":["Text","forwardRef","props","ref","foundTheme","useTheme","theme","defaultTheme","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","TextStyled","$textColor","$textAlign","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap","displayName"],"mappings":"sPAkDa,MAAAA,EAAOC,GAAW,CAACC,EAAkBC,KAChD,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,IAECI,UACJA,EAASC,UACTA,EAASC,SACTA,EAAQC,WACRA,EAAUC,eACVA,EAAcC,UACdA,EAASC,aACTA,KACGC,GACDb,EAEEc,EAA2BC,EAAmCF,GAEpE,OACEG,EAAAC,cAACC,EAAU,CAAAC,WACGb,EAASc,WACTb,EAASc,UACVb,EAAQc,YACNb,EAAUc,gBACNb,EAAcc,WACnBb,EAASc,cACNb,KACXE,EACJV,MAAOA,EACPH,IAAKA,GACL,IAINH,EAAK4B,YAAc"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/Text/index.tsx"],"sourcesContent":["import React, { type HTMLAttributes, type Ref, type ElementType } from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\n\nimport {\n spacingPropsToSpacingPropsInternal,\n type SpacingProps,\n} from \"../Spacing\";\nimport {\n type WordBreakType,\n type FontSizeType,\n type OverflowWrapType,\n} from \"../../types\";\nimport { TextStyled } from \"./styles\";\n\n// the 'as' prop is for styled component casting\n// text hover color prop is only used in Link which extends Text\n\n/**\n * Text is to be used as the main paragraph component (or span using as=\"span\"). Using the Text component is preferred to simply adding text to a div and styling that div, this will guarantee we are always using the correct font and default text colour.\n */\nexport type TextProps = SpacingProps &\n HTMLAttributes<HTMLElement> & {\n /** text colour */\n textColor?: string;\n /** text horizontal alignment */\n textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n /** font size FontSizeType t-shirt sizes */\n textSize?: FontSizeType;\n /** font weight theme.typography{fontWeightHeavy/fontWeightNormal/fontWeightMedium/fontWeightLight/fontWeightVLight} is better than a random number */\n textWeight?: number | string;\n /** font family theme.typography{fontFamilyBase/fontFamilyHeadings} is better than a random string */\n textFontFamily?: string;\n /** styled-components polymorphism where you can set this to \"span\", \"p\" or \"h2\" it default to \"p\" */\n as?: ElementType;\n /** word-break behaviour */\n wordBreak?: WordBreakType;\n /** overflow-wrap behaviour */\n overflowWrap?: OverflowWrapType;\n /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n ref?: Ref<HTMLElement>;\n };\n\nexport const Text = (props: TextProps) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n const {\n textColor,\n textAlign,\n textSize,\n textWeight,\n textFontFamily,\n wordBreak,\n overflowWrap,\n ref,\n ...rest\n } = props;\n\n const withInternalSpacingProps = spacingPropsToSpacingPropsInternal(rest);\n\n return (\n <TextStyled\n $textColor={textColor}\n $textAlign={textAlign}\n $textSize={textSize}\n $textWeight={textWeight}\n $textFontFamily={textFontFamily}\n $wordBreak={wordBreak}\n $overflowWrap={overflowWrap}\n {...withInternalSpacingProps}\n theme={theme}\n ref={ref as Ref<HTMLParagraphElement>}\n />\n );\n};\n\nexport default Text;\n"],"names":["Text","props","foundTheme","useTheme","theme","__assign","defaultTheme","textColor","textAlign","textSize","textWeight","textFontFamily","wordBreak","overflowWrap","ref","rest","withInternalSpacingProps","spacingPropsToSpacingPropsInternal","React","createElement","TextStyled","$textColor","$textAlign","$textSize","$textWeight","$textFontFamily","$wordBreak","$overflowWrap"],"mappings":"qTA4CO,IAAMA,EAAO,SAACC,GACnB,IAAMC,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGHK,EASEN,EAAKM,UARPC,EAQEP,EAROO,UACTC,EAOER,WANFS,EAMET,EAAKS,WALPC,EAKEV,iBAJFW,EAIEX,EAAKW,UAHPC,EAGEZ,EAHUY,aACZC,EAEEb,MADCc,IACDd,EAVE,CAUL,YAAA,YAAA,WAAA,aAAA,iBAAA,YAAA,eAAA,QAEKe,EAA2BC,EAAmCF,GAEpE,OACEG,EAAAC,cAACC,EAAUf,EAAA,CAAAgB,WACGd,EAASe,WACTd,EAASe,UACVd,EAAQe,YACNd,EAAUe,gBACNd,EAAce,WACnBd,EAASe,cACNd,GACXG,EAAwB,CAC5BZ,MAAOA,EACPU,IAAKA,IAGX"}
@@ -1,20 +1,2 @@
1
- import t from"styled-components";import{spacing as e}from"../Spacing/index.js";const o=t.p`
2
- font-family: ${({$textFontFamily:t,theme:e})=>t||e.typography.fontFamilyBase};
3
- word-break: ${({$wordBreak:t})=>t||"normal"};
4
- overflow-wrap: ${({$overflowWrap:t})=>t||"break-word"};
5
- color: ${({theme:{colors:t},$textColor:e})=>e&&void 0!==t[e]?t[e]:e||t.textDark};
6
- text-align: ${({$textAlign:t})=>t||"left"};
7
- font-size: ${({theme:{fontSizes:t,fontSizes:{m:e}},$textSize:o})=>o?t[o]:e};
8
- line-height: ${({theme:t})=>t.typography.lineHeight};
9
- font-weight: ${({$textWeight:t,theme:e})=>t||e.typography.fontWeightBase};
10
- padding: 0;
11
- margin: 0;
12
- margin-bottom: ${({as:t,theme:{spacing:{xs:e}}})=>void 0===t||"p"===t?`${e}`:0};
13
-
14
- &:last-child {
15
- margin-bottom: 0;
16
- }
17
-
18
- ${t=>e(t,t.theme)}
19
- `;export{o as TextStyled};
1
+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import t from"styled-components";import{spacing as o}from"../Spacing/index.js";var e,r=t.p(e||(e=n(["\n font-family: ",";\n word-break: ",";\n overflow-wrap: ",";\n color: ",";\n text-align: ",";\n font-size: ",";\n line-height: ",";\n font-weight: ",";\n padding: 0;\n margin: 0;\n margin-bottom: ",";\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ","\n"],["\n font-family: ",";\n word-break: ",";\n overflow-wrap: ",";\n color: ",";\n text-align: ",";\n font-size: ",";\n line-height: ",";\n font-weight: ",";\n padding: 0;\n margin: 0;\n margin-bottom: ",";\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ","\n"])),(function(n){var t=n.$textFontFamily,o=n.theme;return t||o.typography.fontFamilyBase}),(function(n){return n.$wordBreak||"normal"}),(function(n){return n.$overflowWrap||"break-word"}),(function(n){var t=n.theme.colors,o=n.$textColor;return o&&void 0!==t[o]?t[o]:o||t.textDark}),(function(n){return n.$textAlign||"left"}),(function(n){var t=n.theme,o=t.fontSizes,e=t.fontSizes.m,r=n.$textSize;return r?o[r]:e}),(function(n){return n.theme.typography.lineHeight}),(function(n){var t=n.$textWeight,o=n.theme;return t||o.typography.fontWeightBase}),(function(n){var t=n.as,o=n.theme.spacing.xs;return void 0===t||"p"===t?"".concat(o):0}),(function(n){return o(n,n.theme)}));export{r as TextStyled};
20
2
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sources":["../../../../src/components/Text/styles.ts"],"sourcesContent":["import { type ElementType } from \"react\";\nimport styled from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\nimport {\n type WordBreakType,\n type FontSizeType,\n type ThemeType,\n type ColorKeyType,\n type OverflowWrapType,\n} from \"../../types\";\n\nexport type TextStyledProps = SpacingPropsInternal & {\n $textColor?: string;\n $textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n $textSize?: FontSizeType;\n $textWeight?: number | string;\n as?: ElementType;\n $wordBreak?: WordBreakType;\n $overflowWrap?: OverflowWrapType;\n $textFontFamily?: string;\n theme: ThemeType;\n};\n\nexport const TextStyled = styled.p<TextStyledProps>`\n font-family: ${({ $textFontFamily, theme }) =>\n $textFontFamily || theme.typography.fontFamilyBase};\n word-break: ${({ $wordBreak }) => $wordBreak || \"normal\"};\n overflow-wrap: ${({ $overflowWrap }) => $overflowWrap || \"break-word\"};\n color: ${({ theme: { colors }, $textColor }) =>\n $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n ? colors[$textColor as ColorKeyType]\n : $textColor || colors.textDark};\n text-align: ${({ $textAlign }) => $textAlign || \"left\"};\n font-size: ${({\n theme: {\n fontSizes,\n fontSizes: { m },\n },\n $textSize,\n }) => ($textSize ? fontSizes[$textSize] : m)};\n line-height: ${({ theme }) => theme.typography.lineHeight};\n font-weight: ${({ $textWeight, theme }) =>\n $textWeight || theme.typography.fontWeightBase};\n padding: 0;\n margin: 0;\n margin-bottom: ${({\n as,\n theme: {\n spacing: { xs },\n },\n }) => (typeof as === \"undefined\" || as === \"p\" ? `${xs}` : 0)};\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n"],"names":["TextStyled","styled","p","$textFontFamily","theme","typography","fontFamilyBase","$wordBreak","$overflowWrap","colors","$textColor","textDark","$textAlign","fontSizes","m","$textSize","lineHeight","$textWeight","fontWeightBase","as","spacing","xs","props"],"mappings":"+EAwBa,MAAAA,EAAaC,EAAOC,CAAkB;iBAClC,EAAGC,kBAAiBC,WACjCD,GAAmBC,EAAMC,WAAWC;gBACxB,EAAGC,gBAAiBA,GAAc;mBAC/B,EAAGC,mBAAoBA,GAAiB;WAChD,EAAGJ,OAASK,UAAUC,gBAC7BA,QAA4D,IAAvCD,EAAOC,GACxBD,EAAOC,GACPA,GAAcD,EAAOE;gBACb,EAAGC,gBAAiBA,GAAc;eACnC,EACXR,OACES,YACAA,WAAaC,MAEfC,eACKA,EAAYF,EAAUE,GAAaD;iBAC3B,EAAGV,WAAYA,EAAMC,WAAWW;iBAChC,EAAGC,cAAab,WAC7Ba,GAAeb,EAAMC,WAAWa;;;mBAGjB,EACfC,KACAf,OACEgB,SAAWC,eAEM,IAAPF,GAA6B,MAAPA,EAAa,GAAGE,IAAO;;;;;;IAMxDC,GAAUF,EAAQE,EAAOA,EAAMlB;"}
1
+ {"version":3,"file":"styles.js","sources":["../../../../src/components/Text/styles.ts"],"sourcesContent":["import { type ElementType } from \"react\";\nimport styled from \"styled-components\";\n\nimport { spacing, type SpacingPropsInternal } from \"../Spacing\";\nimport {\n type WordBreakType,\n type FontSizeType,\n type ThemeType,\n type ColorKeyType,\n type OverflowWrapType,\n} from \"../../types\";\n\nexport type TextStyledProps = SpacingPropsInternal & {\n $textColor?: string;\n $textAlign?: \"left\" | \"right\" | \"center\" | \"justify\";\n $textSize?: FontSizeType;\n $textWeight?: number | string;\n as?: ElementType;\n $wordBreak?: WordBreakType;\n $overflowWrap?: OverflowWrapType;\n $textFontFamily?: string;\n theme: ThemeType;\n};\n\nexport const TextStyled = styled.p<TextStyledProps>`\n font-family: ${({ $textFontFamily, theme }) =>\n $textFontFamily || theme.typography.fontFamilyBase};\n word-break: ${({ $wordBreak }) => $wordBreak || \"normal\"};\n overflow-wrap: ${({ $overflowWrap }) => $overflowWrap || \"break-word\"};\n color: ${({ theme: { colors }, $textColor }) =>\n $textColor && typeof colors[$textColor as ColorKeyType] !== \"undefined\"\n ? colors[$textColor as ColorKeyType]\n : $textColor || colors.textDark};\n text-align: ${({ $textAlign }) => $textAlign || \"left\"};\n font-size: ${({\n theme: {\n fontSizes,\n fontSizes: { m },\n },\n $textSize,\n }) => ($textSize ? fontSizes[$textSize] : m)};\n line-height: ${({ theme }) => theme.typography.lineHeight};\n font-weight: ${({ $textWeight, theme }) =>\n $textWeight || theme.typography.fontWeightBase};\n padding: 0;\n margin: 0;\n margin-bottom: ${({\n as,\n theme: {\n spacing: { xs },\n },\n }) => (typeof as === \"undefined\" || as === \"p\" ? `${xs}` : 0)};\n\n &:last-child {\n margin-bottom: 0;\n }\n\n ${(props) => spacing(props, props.theme as ThemeType)}\n`;\n"],"names":["TextStyled","styled","p","templateObject_1","__makeTemplateObject","_a","$textFontFamily","theme","typography","fontFamilyBase","$wordBreak","$overflowWrap","colors","$textColor","textDark","$textAlign","_b","fontSizes","m","$textSize","lineHeight","$textWeight","fontWeightBase","as","xs","spacing","props"],"mappings":"+JAwBO,MAAMA,EAAaC,EAAOC,EAACC,IAAAA,EAAAC,EAAA,CAAA,oBAAA,oBAAA,uBAAA,eAAA,oBAAA,mBAAA,qBAAA,qBAAA,oDAAA,0DAAA,MAAA,CAAiB,oBAEG,oBACI,uBACa,eAIlC,oBACmB,mBAOV,qBACa,qBAET,oDAQa,0DAMR,SAhCtC,SAACC,OAAEC,EAAeD,EAAAC,gBAAEC,EAAKF,EAAAE,MACtC,OAAAD,GAAmBC,EAAMC,WAAWC,cAApC,IACY,SAACJ,GAAmB,OAAPA,EAAAK,YAAqB,QAAd,IACjB,SAACL,GAAsB,OAAPA,EAAAM,eAAwB,YAAjB,IAC/B,SAACN,OAAWO,EAAMP,EAAAE,MAAAK,OAAIC,EAAUR,EAAAQ,WACvC,OAAAA,QAA4D,IAAvCD,EAAOC,GACxBD,EAAOC,GACPA,GAAcD,EAAOE,QAFzB,IAGY,SAACT,GAAmB,OAAPA,EAAAU,YAAqB,MAAd,IACrB,SAACV,OACZW,EAGCX,EAAAE,MAFCU,EAASD,EAAAC,UACIC,EAACF,EAAAC,UAAAC,EAEhBC,EAASd,EAAAc,UACL,OAACA,EAAYF,EAAUE,GAAaD,CAApC,IACS,SAACb,GAAc,OAAPA,EAAAE,MAAaC,WAAWY,UAAjB,IACf,SAACf,OAAEgB,EAAWhB,EAAAgB,YAAEd,EAAKF,EAAAE,MAClC,OAAAc,GAAed,EAAMC,WAAWc,cAAhC,IAGe,SAACjB,OAChBkB,EAAElB,EAAAkB,GAEWC,EAAEnB,EAAAE,MAAAkB,QAAAD,GAEX,YAAe,IAAPD,GAA6B,MAAPA,EAAa,UAAGC,GAAO,CAArD,IAMJ,SAACE,GAAU,OAAAD,EAAQC,EAAOA,EAAMnB,MAAmB"}
@@ -1,2 +1,2 @@
1
- import e,{forwardRef as r}from"react";import{useTheme as t}from"styled-components";import{crukTheme as i}from"../../themes/cruk.js";import{ErrorText as o}from"../ErrorText/index.js";import{LabelWrapper as a}from"../LabelWrapper/index.js";import s from"./styles.js";const m=r((({errorMessage:r,hasError:m,hintText:d,label:n,resize:l="vertical",lineCount:p=3,...c},x)=>{const f=t(),u={...i,...f};return e.createElement(a,{label:n,hintText:d,required:c.required||!1},e.createElement(s,{...c,"aria-invalid":m||!!r||!1,"aria-describedby":c.id&&r?`${c.id}-error`:void 0,$hasError:m||!!r||!1,$resize:l,$lineCount:p,theme:u,ref:x,"data-hj-suppress":!0}),!!r&&e.createElement(o,{marginTop:"xxs",id:c.id?`${c.id}-error`:void 0},r))}));m.displayName="TextAreaField";export{m as TextAreaField,m as default};
1
+ import{__rest as r,__assign as e}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{useTheme as t}from"styled-components";import{crukTheme as o}from"../../themes/cruk.js";import{ErrorText as s}from"../ErrorText/index.js";import{LabelWrapper as a}from"../LabelWrapper/index.js";import n from"./styles.js";var m=function(m){var d=m.errorMessage,l=m.hasError,p=m.hintText,c=m.label,f=m.resize,u=void 0===f?"vertical":f,h=m.lineCount,x=void 0===h?3:h,b=m.ref,v=r(m,["errorMessage","hasError","hintText","label","resize","lineCount","ref"]),E=t(),j=e(e({},o),E);return i.createElement(a,{label:c,hintText:p,required:v.required||!1},i.createElement(n,e({},v,{"aria-invalid":l||!!d||!1,"aria-describedby":v.id&&d?"".concat(v.id,"-error"):void 0,$hasError:l||!!d||!1,$resize:u,$lineCount:x,theme:j,ref:b,"data-hj-suppress":!0})),!!d&&i.createElement(s,{marginTop:"xxs",id:v.id?"".concat(v.id,"-error"):void 0},d))};export{m as TextAreaField,m as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/TextAreaField/index.tsx"],"sourcesContent":["import React, {\n type ReactNode,\n type TextareaHTMLAttributes,\n type Ref,\n forwardRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport { StyledTextArea } from \"./styles\";\n\nexport type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n /** error message text */\n errorMessage?: string;\n /** flag for error styling */\n hasError?: boolean;\n /** hint text */\n hintText?: ReactNode;\n /** label text */\n label: string;\n /** resize behaviour using the resize button on the bottom right of the component */\n resize?: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n /** number of visible lines of text before scroll is required this affect the height of the input field */\n lineCount?: number;\n /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n ref?: Ref<HTMLTextAreaElement>;\n};\n\n/**\n * TextAreaField lets users enter and edit multiline text.\n */\nexport const TextAreaField = forwardRef(\n (\n {\n errorMessage,\n hasError,\n hintText,\n label,\n resize = \"vertical\",\n lineCount = 3,\n ...props\n }: TextAreaFieldProps,\n ref?: Ref<HTMLTextAreaElement>,\n ) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n return (\n <LabelWrapper\n label={label}\n hintText={hintText}\n required={props.required || false}\n >\n <StyledTextArea\n {...props}\n aria-invalid={hasError || !!errorMessage || false}\n aria-describedby={\n !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n }\n $hasError={hasError || !!errorMessage || false}\n $resize={resize}\n $lineCount={lineCount}\n theme={theme}\n ref={ref}\n data-hj-suppress\n />\n {!!errorMessage && (\n <ErrorText\n marginTop=\"xxs\"\n id={props.id ? `${props.id}-error` : undefined}\n >\n {errorMessage}\n </ErrorText>\n )}\n </LabelWrapper>\n );\n },\n);\n\nTextAreaField.displayName = \"TextAreaField\";\n\nexport default TextAreaField;\n"],"names":["TextAreaField","forwardRef","errorMessage","hasError","hintText","label","resize","lineCount","props","ref","foundTheme","useTheme","theme","defaultTheme","React","createElement","LabelWrapper","required","StyledTextArea","id","undefined","$resize","$lineCount","ErrorText","marginTop","displayName"],"mappings":"yQAkCO,MAAMA,EAAgBC,GAC3B,EAEIC,eACAC,WACAC,WACAC,QACAC,SAAS,WACTC,YAAY,KACTC,GAELC,KAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGL,OACEI,EAACC,cAAAC,GACCX,MAAOA,EACPD,SAAUA,EACVa,SAAUT,EAAMS,WAAY,GAE5BH,EAACC,cAAAG,EACK,IAAAV,EACU,eAAAL,KAAcD,IAAgB,EAAK,mBAE7CM,EAAMW,IAAQjB,EAAe,GAAGM,EAAMW,gBAAaC,YAE5CjB,KAAcD,IAAgB,EAChCmB,QAAAf,EACGgB,WAAAf,EACZK,MAAOA,EACPH,IAAKA,EAEL,oBAAA,MACCP,GACDY,gBAACS,EAAS,CACRC,UAAU,MACVL,GAAIX,EAAMW,GAAK,GAAGX,EAAMW,gBAAaC,GAEpClB,GAGQ,IAKrBF,EAAcyB,YAAc"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/TextAreaField/index.tsx"],"sourcesContent":["import React, {\n type ReactNode,\n type TextareaHTMLAttributes,\n type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport { StyledTextArea } from \"./styles\";\n\nexport type TextAreaFieldProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n /** error message text */\n errorMessage?: string;\n /** flag for error styling */\n hasError?: boolean;\n /** hint text */\n hintText?: ReactNode;\n /** label text */\n label: string;\n /** resize behaviour using the resize button on the bottom right of the component */\n resize?: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n /** number of visible lines of text before scroll is required this affect the height of the input field */\n lineCount?: number;\n /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n ref?: Ref<HTMLTextAreaElement>;\n};\n\n/**\n * TextAreaField lets users enter and edit multiline text.\n */\nexport const TextAreaField = ({\n errorMessage,\n hasError,\n hintText,\n label,\n resize = \"vertical\",\n lineCount = 3,\n ref,\n ...props\n}: TextAreaFieldProps) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n return (\n <LabelWrapper\n label={label}\n hintText={hintText}\n required={props.required || false}\n >\n <StyledTextArea\n {...props}\n aria-invalid={hasError || !!errorMessage || false}\n aria-describedby={\n !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n }\n $hasError={hasError || !!errorMessage || false}\n $resize={resize}\n $lineCount={lineCount}\n theme={theme}\n ref={ref}\n data-hj-suppress\n />\n {!!errorMessage && (\n <ErrorText\n marginTop=\"xxs\"\n id={props.id ? `${props.id}-error` : undefined}\n >\n {errorMessage}\n </ErrorText>\n )}\n </LabelWrapper>\n );\n};\n\nexport default TextAreaField;\n"],"names":["TextAreaField","_a","errorMessage","hasError","hintText","label","_b","resize","undefined","_c","lineCount","ref","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","React","createElement","LabelWrapper","required","StyledTextArea","id","concat","$resize","$lineCount","ErrorText","marginTop"],"mappings":"wUAiCO,IAAMA,EAAgB,SAACC,GAC5B,IAAAC,EAAYD,EAAAC,aACZC,aACAC,EAAQH,EAAAG,SACRC,EAAKJ,EAAAI,MACLC,EAAAL,EAAAM,OAAAA,OAAMC,IAAAF,EAAG,WAAUA,EACnBG,EAAAR,EAAAS,UAAAA,aAAY,EAACD,EACbE,EAAGV,EAAAU,IACAC,EAAKC,EAAAZ,EARoB,2EAUtBa,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGL,OACEK,EAACC,cAAAC,GACChB,MAAOA,EACPD,SAAUA,EACVkB,SAAUV,EAAMU,WAAY,GAE5BH,EAACC,cAAAG,EACKN,EAAA,CAAA,EAAAL,EACU,CAAA,eAAAT,KAAcD,IAAgB,EAAK,mBAE7CU,EAAMY,IAAQtB,EAAe,GAAGuB,OAAAb,EAAMY,GAAE,eAAWhB,YAE5CL,KAAcD,IAAgB,EAChCwB,QAAAnB,EACGoB,WAAAjB,EACZM,MAAOA,EACPL,IAAKA,EAEL,oBAAA,OACCT,GACDiB,gBAACS,EAAS,CACRC,UAAU,MACVL,GAAIZ,EAAMY,GAAK,GAAGC,OAAAb,EAAMY,kBAAahB,GAEpCN,GAKX"}
@@ -1,30 +1,2 @@
1
- import o,{css as e}from"styled-components";const r=o.textarea`
2
- resize: ${({$resize:o})=>o};
3
- background-color: ${({theme:o})=>o.colors.backgroundLight};
4
- background-image: none;
5
- border: ${({theme:o,$hasError:e})=>`solid ${o.utilities.inputBorderWidth}\n ${e?o.colors.textError:o.colors.textInputBorder}`};
6
- color: ${({theme:o})=>o.colors.textDark};
7
- display: block;
8
- font-family: ${({theme:o})=>o.typography.fontFamilyBase};
9
- font-size: ${({theme:o})=>o.fontSizes.m};
10
- padding: 6px 8px;
11
- width: 100%;
12
- height: ${({$lineCount:o,theme:e})=>`calc(${e.typography.lineHeight} * ${o})`};
13
-
14
- transition: border-color 150ms linear;
15
- &:hover {
16
- border-color: ${({theme:o})=>o.colors.secondary};
17
- }
18
- &:disabled {
19
- border-color: ${({theme:o})=>o.colors.disabled};
20
- color: ${({theme:o})=>o.colors.disabled};
21
- }
22
-
23
- ${({theme:o})=>o.utilities.useDefaultFocusRect?null:e`
24
- &:focus {
25
- outline: 0;
26
- border-color: ${o.colors.tertiary};
27
- }
28
- `};
29
- `;export{r as StyledTextArea,r as default};
1
+ import{__makeTemplateObject as n}from"../../../node_modules/tslib/tslib.es6.js";import o,{css as r}from"styled-components";var e,t,i=o.textarea(t||(t=n(["\n resize: ",";\n background-color: ",";\n background-image: none;\n border: ",";\n color: ",";\n display: block;\n font-family: ",";\n font-size: ",";\n padding: 6px 8px;\n width: 100%;\n height: ",";\n\n transition: border-color 150ms linear;\n &:hover {\n border-color: ",";\n }\n &:disabled {\n border-color: ",";\n color: ",";\n }\n\n ",";\n"],["\n resize: ",";\n background-color: ",";\n background-image: none;\n border: ",";\n color: ",";\n display: block;\n font-family: ",";\n font-size: ",";\n padding: 6px 8px;\n width: 100%;\n height: ",";\n\n transition: border-color 150ms linear;\n &:hover {\n border-color: ",";\n }\n &:disabled {\n border-color: ",";\n color: ",";\n }\n\n ",";\n"])),(function(n){return n.$resize}),(function(n){return n.theme.colors.backgroundLight}),(function(n){var o=n.theme,r=n.$hasError;return"solid ".concat(o.utilities.inputBorderWidth,"\n ").concat(r?o.colors.textError:o.colors.textInputBorder)}),(function(n){return n.theme.colors.textDark}),(function(n){return n.theme.typography.fontFamilyBase}),(function(n){return n.theme.fontSizes.m}),(function(n){var o=n.$lineCount,r=n.theme;return"calc(".concat(r.typography.lineHeight," * ").concat(o,")")}),(function(n){return n.theme.colors.secondary}),(function(n){return n.theme.colors.disabled}),(function(n){return n.theme.colors.disabled}),(function(o){var t=o.theme;return t.utilities.useDefaultFocusRect?null:r(e||(e=n(["\n &:focus {\n outline: 0;\n border-color: ",";\n }\n "],["\n &:focus {\n outline: 0;\n border-color: ",";\n }\n "])),t.colors.tertiary)}));export{i as StyledTextArea,i as default};
30
2
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sources":["../../../../src/components/TextAreaField/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype StyledTextareaProps = {\n $hasError: boolean;\n $lineCount: number;\n $resize: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n theme: ThemeType;\n};\n\nconst StyledTextArea = styled.textarea<StyledTextareaProps>`\n resize: ${({ $resize }) => $resize};\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n background-image: none;\n border: ${({ theme, $hasError }) => `solid ${theme.utilities.inputBorderWidth}\n ${$hasError ? theme.colors.textError : theme.colors.textInputBorder}`};\n color: ${({ theme }) => theme.colors.textDark};\n display: block;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n font-size: ${({ theme }) => theme.fontSizes.m};\n padding: 6px 8px;\n width: 100%;\n height: ${({ $lineCount, theme }) =>\n `calc(${theme.typography.lineHeight} * ${$lineCount})`};\n\n transition: border-color 150ms linear;\n &:hover {\n border-color: ${({ theme }) => theme.colors.secondary};\n }\n &:disabled {\n border-color: ${({ theme }) => theme.colors.disabled};\n color: ${({ theme }) => theme.colors.disabled};\n }\n\n ${({ theme }) =>\n !theme.utilities.useDefaultFocusRect\n ? css`\n &:focus {\n outline: 0;\n border-color: ${theme.colors.tertiary};\n }\n `\n : null};\n`;\n\nexport default StyledTextArea;\nexport { StyledTextArea };\n"],"names":["StyledTextArea","styled","textarea","$resize","theme","colors","backgroundLight","$hasError","utilities","inputBorderWidth","textError","textInputBorder","textDark","typography","fontFamilyBase","fontSizes","m","$lineCount","lineHeight","secondary","disabled","useDefaultFocusRect","css","tertiary"],"mappings":"2CAUA,MAAMA,EAAiBC,EAAOC,QAA6B;YAC/C,EAAGC,aAAcA;sBACP,EAAGC,WAAYA,EAAMC,OAAOC;;YAEtC,EAAGF,QAAOG,eAAgB,SAASH,EAAMI,UAAUC,yBACzDF,EAAYH,EAAMC,OAAOK,UAAYN,EAAMC,OAAOM;WAC7C,EAAGP,WAAYA,EAAMC,OAAOO;;iBAEtB,EAAGR,WAAYA,EAAMS,WAAWC;eAClC,EAAGV,WAAYA,EAAMW,UAAUC;;;YAGlC,EAAGC,aAAYb,WACvB,QAAQA,EAAMS,WAAWK,gBAAgBD;;;;oBAIzB,EAAGb,WAAYA,EAAMC,OAAOc;;;oBAG5B,EAAGf,WAAYA,EAAMC,OAAOe;aACnC,EAAGhB,WAAYA,EAAMC,OAAOe;;;IAGrC,EAAGhB,WACFA,EAAMI,UAAUa,oBAOb,KANAC,CAAG;;;4BAGiBlB,EAAMC,OAAOkB;;;"}
1
+ {"version":3,"file":"styles.js","sources":["../../../../src/components/TextAreaField/styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { type ThemeType } from \"../../types\";\n\ntype StyledTextareaProps = {\n $hasError: boolean;\n $lineCount: number;\n $resize: \"both\" | \"vertical\" | \"horizontal\" | \"none\";\n theme: ThemeType;\n};\n\nconst StyledTextArea = styled.textarea<StyledTextareaProps>`\n resize: ${({ $resize }) => $resize};\n background-color: ${({ theme }) => theme.colors.backgroundLight};\n background-image: none;\n border: ${({ theme, $hasError }) => `solid ${theme.utilities.inputBorderWidth}\n ${$hasError ? theme.colors.textError : theme.colors.textInputBorder}`};\n color: ${({ theme }) => theme.colors.textDark};\n display: block;\n font-family: ${({ theme }) => theme.typography.fontFamilyBase};\n font-size: ${({ theme }) => theme.fontSizes.m};\n padding: 6px 8px;\n width: 100%;\n height: ${({ $lineCount, theme }) =>\n `calc(${theme.typography.lineHeight} * ${$lineCount})`};\n\n transition: border-color 150ms linear;\n &:hover {\n border-color: ${({ theme }) => theme.colors.secondary};\n }\n &:disabled {\n border-color: ${({ theme }) => theme.colors.disabled};\n color: ${({ theme }) => theme.colors.disabled};\n }\n\n ${({ theme }) =>\n !theme.utilities.useDefaultFocusRect\n ? css`\n &:focus {\n outline: 0;\n border-color: ${theme.colors.tertiary};\n }\n `\n : null};\n`;\n\nexport default StyledTextArea;\nexport { StyledTextArea };\n"],"names":["StyledTextArea","styled","textarea","templateObject_2","__makeTemplateObject","_a","$resize","theme","colors","backgroundLight","$hasError","concat","utilities","inputBorderWidth","textError","textInputBorder","textDark","typography","fontFamilyBase","fontSizes","m","$lineCount","lineHeight","secondary","disabled","useDefaultFocusRect","css","templateObject_1","tertiary"],"mappings":"2HAUA,QAAMA,EAAiBC,EAAOC,SAAQC,IAAAA,EAAAC,EAAA,CAAA,eAAA,0BAAA,2CAAA,eAAA,wCAAA,mBAAA,qDAAA,iFAAA,6CAAA,iBAAA,eAAA,OAAA,CAAqB,eACvB,0BAC6B,2CAGQ,eAC1B,wCAEgB,mBAChB,qDAIW,iFAID,6CAGD,iBACP,eAWrC,UA/BA,SAACC,GAAgB,OAAPA,EAAAC,OAAO,IACP,SAACD,GAAc,OAAPA,EAAAE,MAAaC,OAAOC,eAAb,IAEzB,SAACJ,OAAEE,EAAKF,EAAAE,MAAEG,EAASL,EAAAK,UAAO,MAAA,SAAAC,OAASJ,EAAMK,UAAUC,iBACzD,UAAAF,OAAAD,EAAYH,EAAMC,OAAOM,UAAYP,EAAMC,OAAOO,gBADlB,IAE3B,SAACV,GAAc,OAAPA,EAAAE,MAAaC,OAAOQ,QAAb,IAET,SAACX,GAAc,OAAPA,EAAAE,MAAaU,WAAWC,cAAjB,IACjB,SAACb,GAAc,OAAPA,EAAAE,MAAaY,UAAUC,CAAhB,IAGlB,SAACf,OAAEgB,EAAUhB,EAAAgB,WAAEd,EAAKF,EAAAE,MAC5B,MAAA,QAAAI,OAAQJ,EAAMU,WAAWK,WAAU,OAAAX,OAAMU,EAAa,IAAtD,IAIgB,SAAChB,GAAc,OAAPA,EAAAE,MAAaC,OAAOe,SAAb,IAGf,SAAClB,GAAc,OAAPA,EAAAE,MAAaC,OAAOgB,QAAb,IACtB,SAACnB,GAAc,OAAPA,EAAAE,MAAaC,OAAOgB,QAAb,IAGxB,SAACnB,GAAE,IAAAE,EAAKF,EAAAE,MACR,OAACA,EAAMK,UAAUa,oBAOb,KANAC,EAAGC,IAAAA,EAAAvB,EAAA,CAAA,6EAAA,4BAAA,CAAA,6EAGsC,8BAArBG,EAAMC,OAAOoB,SAJrC"}
@@ -1,2 +1,2 @@
1
- import e,{forwardRef as r}from"react";import{useTheme as i}from"styled-components";import{crukTheme as t}from"../../themes/cruk.js";import{ErrorText as a}from"../ErrorText/index.js";import{LabelWrapper as l}from"../LabelWrapper/index.js";import{ExtraLeft as s,StyledInputWrapper as d,StyledInput as m,ExtraRight as o,Extra as n,ExtraWrapper as c}from"./styles.js";const h=r((({errorMessage:r,extraBottom:h,extraLeft:p,extraRight:E,extraTop:b,hasError:x,hintText:V,isValid:u,isValidVisible:$,isInvalidVisible:f,label:v,hideRequiredInLabel:T,...j},I)=>{const g=i(),q={...t,...g},y=e.createElement(e.Fragment,null,!!p&&e.createElement(s,{theme:q},p),e.createElement(d,{$hasError:x||!!r||!1,$isValid:void 0!==u?u:!x&&!r,"aria-invalid":x||!!r||!1,$isValidVisible:$||!1,$isInvalidVisible:f||!1,theme:q},e.createElement(m,{$hasError:x||!!r||!1,$isValid:void 0!==u?u:!x&&!r,"aria-invalid":x||!!r||!1,"aria-describedby":j.id&&r?`${j.id}-error`:void 0,$isValidVisible:$||!1,$isInvalidVisible:f||!1,...j,theme:q,"data-hj-suppress":!0,ref:I})),!!E&&e.createElement(o,{theme:q},E));return e.createElement(l,{label:v,hintText:V,required:j.required||!1,hideRequiredInLabel:T},!!b&&e.createElement(n,{theme:q},b),E||p?e.createElement(c,null,y):y,!!h&&e.createElement(n,{theme:q},h),!!r&&e.createElement(a,{marginTop:"xxs",id:j.id?`${j.id}-error`:void 0},r))}));h.displayName="TextField";export{h as TextField,h as default};
1
+ import{__rest as e,__assign as r}from"../../../node_modules/tslib/tslib.es6.js";import i from"react";import{useTheme as t}from"styled-components";import{crukTheme as a}from"../../themes/cruk.js";import{ErrorText as l}from"../ErrorText/index.js";import{LabelWrapper as s}from"../LabelWrapper/index.js";import{ExtraLeft as o,StyledInputWrapper as d,StyledInput as m,ExtraRight as n,Extra as h,ExtraWrapper as b}from"./styles.js";var c=function(c){var x=c.errorMessage,p=c.extraBottom,V=c.extraLeft,E=c.extraRight,f=c.extraTop,u=c.hasError,v=c.hintText,$=c.isValid,I=c.isValidVisible,T=c.isInvalidVisible,g=c.label,j=c.hideRequiredInLabel,L=c.ref,q=e(c,["errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredInLabel","ref"]),R=t(),y=r(r({},a),R),B=i.createElement(i.Fragment,null,!!V&&i.createElement(o,{theme:y},V),i.createElement(d,{$hasError:u||!!x||!1,$isValid:void 0!==$?$:!u&&!x,"aria-invalid":u||!!x||!1,$isValidVisible:I||!1,$isInvalidVisible:T||!1,theme:y},i.createElement(m,r({$hasError:u||!!x||!1,$isValid:void 0!==$?$:!u&&!x,"aria-invalid":u||!!x||!1,"aria-describedby":q.id&&x?"".concat(q.id,"-error"):void 0,$isValidVisible:I||!1,$isInvalidVisible:T||!1},q,{theme:y,"data-hj-suppress":!0,ref:L}))),!!E&&i.createElement(n,{theme:y},E));return i.createElement(s,{label:g,hintText:v,required:q.required||!1,hideRequiredInLabel:j},!!f&&i.createElement(h,{theme:y},f),E||V?i.createElement(b,null,B):B,!!p&&i.createElement(h,{theme:y},p),!!x&&i.createElement(l,{marginTop:"xxs",id:q.id?"".concat(q.id,"-error"):void 0},x))};export{c as TextField,c as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/TextField/index.tsx"],"sourcesContent":["import React, {\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n forwardRef,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport {\n ExtraLeft,\n ExtraRight,\n Extra,\n ExtraWrapper,\n StyledInput,\n StyledInputWrapper,\n} from \"./styles\";\n\nexport type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n /** error message text */\n errorMessage?: string;\n /** custom component/text that appears underneath the input field */\n extraBottom?: ReactNode;\n /** custom component/text that appears to the left of the input field for example prefixes like \"£\" */\n extraLeft?: ReactNode;\n /** custom component/text that appears to the right of the input field for example a search button */\n extraRight?: ReactNode;\n /** custom component/text that appears above the input field for example a url domain */\n extraTop?: ReactNode;\n /** flag for error styling */\n hasError?: boolean;\n /** flag which controls the whether a cross icon or check icon is displayed to the right of the input field */\n isValid?: boolean;\n /** flag to hide or show the check icon when valid */\n isValidVisible?: boolean;\n /** flag to hide or show the cross icon when invalid */\n isInvalidVisible?: boolean;\n /** hint text */\n hintText?: ReactNode;\n /** label text */\n label: string;\n /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n hideRequiredInLabel?: boolean;\n /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * TextFields let users enter and edit text. For multiline text entry please consider using the TextAreaFieldComponent.\n * */\nexport const TextField = forwardRef(\n (\n {\n errorMessage,\n extraBottom,\n extraLeft,\n extraRight,\n extraTop,\n hasError,\n hintText,\n isValid,\n isValidVisible,\n isInvalidVisible,\n label,\n hideRequiredInLabel,\n ...props\n }: TextFieldProps,\n ref?: Ref<HTMLInputElement>,\n ) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n const renderContent = (\n <>\n {!!extraLeft && <ExtraLeft theme={theme}>{extraLeft}</ExtraLeft>}\n <StyledInputWrapper\n $hasError={hasError || !!errorMessage || false}\n $isValid={\n typeof isValid !== \"undefined\"\n ? isValid\n : !hasError && !errorMessage\n }\n aria-invalid={hasError || !!errorMessage || false}\n $isValidVisible={isValidVisible || false}\n $isInvalidVisible={isInvalidVisible || false}\n theme={theme}\n >\n <StyledInput\n $hasError={hasError || !!errorMessage || false}\n $isValid={\n typeof isValid !== \"undefined\"\n ? isValid\n : !hasError && !errorMessage\n }\n aria-invalid={hasError || !!errorMessage || false}\n aria-describedby={\n !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n }\n $isValidVisible={isValidVisible || false}\n $isInvalidVisible={isInvalidVisible || false}\n {...props}\n theme={theme}\n data-hj-suppress\n ref={ref}\n />\n </StyledInputWrapper>\n {!!extraRight && <ExtraRight theme={theme}>{extraRight}</ExtraRight>}\n </>\n );\n\n return (\n <LabelWrapper\n label={label}\n hintText={hintText}\n required={props.required || false}\n hideRequiredInLabel={hideRequiredInLabel}\n >\n {!!extraTop && <Extra theme={theme}>{extraTop}</Extra>}\n {!!extraRight || !!extraLeft ? (\n <ExtraWrapper>{renderContent}</ExtraWrapper>\n ) : (\n renderContent\n )}\n {!!extraBottom && <Extra theme={theme}>{extraBottom}</Extra>}\n {!!errorMessage && (\n <ErrorText\n marginTop=\"xxs\"\n id={props.id ? `${props.id}-error` : undefined}\n >\n {errorMessage}\n </ErrorText>\n )}\n </LabelWrapper>\n );\n },\n);\n\nTextField.displayName = \"TextField\";\n\nexport default TextField;\n"],"names":["TextField","forwardRef","errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredInLabel","props","ref","foundTheme","useTheme","theme","defaultTheme","renderContent","React","createElement","Fragment","ExtraLeft","StyledInputWrapper","$hasError","$isValid","$isValidVisible","$isInvalidVisible","StyledInput","id","undefined","ExtraRight","LabelWrapper","required","Extra","ExtraWrapper","ErrorText","marginTop","displayName"],"mappings":"4WAqDa,MAAAA,EAAYC,GACvB,EAEIC,eACAC,cACAC,YACAC,aACAC,WACAC,WACAC,WACAC,UACAC,iBACAC,mBACAC,QACAC,yBACGC,GAELC,KAEA,MAAMC,EAAaC,IACbC,EAAQ,IACTC,KACAH,GAGCI,EACJC,EAAAC,cAAAD,EAAAE,SAAA,OACKnB,GAAaiB,EAACC,cAAAE,EAAU,CAAAN,MAAOA,GAAQd,GAC1CiB,EAAAC,cAACG,EAAkB,CAAAC,UACNnB,KAAcL,IAAgB,EAAKyB,cAEzB,IAAZlB,EACHA,GACCF,IAAaL,EAEN,eAAAK,KAAcL,IAAgB,EAAK0B,gBAChClB,IAAkB,EAAKmB,kBACrBlB,IAAoB,EACvCO,MAAOA,GAEPG,EAAAC,cAACQ,EAAW,CAAAJ,UACCnB,KAAcL,IAAgB,EAAKyB,cAEzB,IAAZlB,EACHA,GACCF,IAAaL,EAEN,eAAAK,KAAcL,IAAgB,EAAK,mBAE7CY,EAAMiB,IAAQ7B,EAAe,GAAGY,EAAMiB,gBAAaC,EAEtCJ,gBAAAlB,IAAkB,EAChBmB,kBAAAlB,IAAoB,KACnCG,EACJI,MAAOA,EAAK,oBAAA,EAEZH,IAAKA,OAGNV,GAAcgB,EAAAC,cAACW,EAAW,CAAAf,MAAOA,GAAQb,IAIhD,OACEgB,gBAACa,EAAY,CACXtB,MAAOA,EACPJ,SAAUA,EACV2B,SAAUrB,EAAMqB,WAAY,EAC5BtB,oBAAqBA,KAElBP,GAAYe,EAACC,cAAAc,EAAM,CAAAlB,MAAOA,GAAQZ,GAClCD,GAAgBD,EACjBiB,gBAACgB,EAAY,KAAEjB,GAA6B,IAI3CjB,GAAekB,EAACC,cAAAc,EAAM,CAAAlB,MAAOA,GAAQf,KACrCD,GACDmB,gBAACiB,EAAS,CACRC,UAAU,MACVR,GAAIjB,EAAMiB,GAAK,GAAGjB,EAAMiB,gBAAaC,GAEpC9B,GAGQ,IAKrBF,EAAUwC,YAAc"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/TextField/index.tsx"],"sourcesContent":["import React, {\n type InputHTMLAttributes,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { useTheme } from \"styled-components\";\n\nimport { crukTheme as defaultTheme } from \"../../themes/cruk\";\nimport { ErrorText } from \"../ErrorText\";\nimport { LabelWrapper } from \"../LabelWrapper\";\n\nimport {\n ExtraLeft,\n ExtraRight,\n Extra,\n ExtraWrapper,\n StyledInput,\n StyledInputWrapper,\n} from \"./styles\";\n\nexport type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n /** error message text */\n errorMessage?: string;\n /** custom component/text that appears underneath the input field */\n extraBottom?: ReactNode;\n /** custom component/text that appears to the left of the input field for example prefixes like \"£\" */\n extraLeft?: ReactNode;\n /** custom component/text that appears to the right of the input field for example a search button */\n extraRight?: ReactNode;\n /** custom component/text that appears above the input field for example a url domain */\n extraTop?: ReactNode;\n /** flag for error styling */\n hasError?: boolean;\n /** flag which controls the whether a cross icon or check icon is displayed to the right of the input field */\n isValid?: boolean;\n /** flag to hide or show the check icon when valid */\n isValidVisible?: boolean;\n /** flag to hide or show the cross icon when invalid */\n isInvalidVisible?: boolean;\n /** hint text */\n hintText?: ReactNode;\n /** label text */\n label: string;\n /** flag to stop (required) appearing in label, useful for compound form components like DateInput */\n hideRequiredInLabel?: boolean;\n /** react reference to the DOM element sometime used to scroll to or set focus after an error */\n ref?: Ref<HTMLInputElement>;\n};\n\n/**\n * TextFields let users enter and edit text. For multiline text entry please consider using the TextAreaFieldComponent.\n * */\nexport const TextField = ({\n errorMessage,\n extraBottom,\n extraLeft,\n extraRight,\n extraTop,\n hasError,\n hintText,\n isValid,\n isValidVisible,\n isInvalidVisible,\n label,\n hideRequiredInLabel,\n ref,\n ...props\n}: TextFieldProps) => {\n const foundTheme = useTheme();\n const theme = {\n ...defaultTheme,\n ...foundTheme,\n };\n\n const renderContent = (\n <>\n {!!extraLeft && <ExtraLeft theme={theme}>{extraLeft}</ExtraLeft>}\n <StyledInputWrapper\n $hasError={hasError || !!errorMessage || false}\n $isValid={\n typeof isValid !== \"undefined\" ? isValid : !hasError && !errorMessage\n }\n aria-invalid={hasError || !!errorMessage || false}\n $isValidVisible={isValidVisible || false}\n $isInvalidVisible={isInvalidVisible || false}\n theme={theme}\n >\n <StyledInput\n $hasError={hasError || !!errorMessage || false}\n $isValid={\n typeof isValid !== \"undefined\"\n ? isValid\n : !hasError && !errorMessage\n }\n aria-invalid={hasError || !!errorMessage || false}\n aria-describedby={\n !!props.id && !!errorMessage ? `${props.id}-error` : undefined\n }\n $isValidVisible={isValidVisible || false}\n $isInvalidVisible={isInvalidVisible || false}\n {...props}\n theme={theme}\n data-hj-suppress\n ref={ref}\n />\n </StyledInputWrapper>\n {!!extraRight && <ExtraRight theme={theme}>{extraRight}</ExtraRight>}\n </>\n );\n\n return (\n <LabelWrapper\n label={label}\n hintText={hintText}\n required={props.required || false}\n hideRequiredInLabel={hideRequiredInLabel}\n >\n {!!extraTop && <Extra theme={theme}>{extraTop}</Extra>}\n {!!extraRight || !!extraLeft ? (\n <ExtraWrapper>{renderContent}</ExtraWrapper>\n ) : (\n renderContent\n )}\n {!!extraBottom && <Extra theme={theme}>{extraBottom}</Extra>}\n {!!errorMessage && (\n <ErrorText\n marginTop=\"xxs\"\n id={props.id ? `${props.id}-error` : undefined}\n >\n {errorMessage}\n </ErrorText>\n )}\n </LabelWrapper>\n );\n};\n\nexport default TextField;\n"],"names":["TextField","_a","errorMessage","extraBottom","extraLeft","extraRight","extraTop","hasError","hintText","isValid","isValidVisible","isInvalidVisible","label","hideRequiredInLabel","ref","props","__rest","foundTheme","useTheme","theme","__assign","defaultTheme","renderContent","React","createElement","Fragment","ExtraLeft","StyledInputWrapper","$isValid","$isInvalidVisible","StyledInput","$hasError","id","undefined","$isValidVisible","ExtraRight","LabelWrapper","required","Extra","ExtraWrapper","ErrorText","marginTop","concat"],"mappings":"2aAoDO,IAAMA,EAAY,SAACC,GACxB,IAAAC,EAAYD,EAAAC,aACZC,EAAWF,EAAAE,YACXC,EAASH,EAAAG,UACTC,EAAUJ,EAAAI,WACVC,EAAQL,EAAAK,SACRC,EAAQN,EAAAM,SACRC,EAAQP,EAAAO,SACRC,EAAOR,EAAAQ,QACPC,EAAcT,EAAAS,eACdC,EAAgBV,EAAAU,iBAChBC,EAAKX,EAAAW,MACLC,EAAmBZ,EAAAY,oBACnBC,EAAGb,EAAAa,IACAC,EAAKC,EAAAf,EAdgB,4KAgBlBgB,EAAaC,IACbC,EACDC,EAAAA,EAAA,CAAA,EAAAC,GACAJ,GAGCK,EACJC,EAAAC,cAAAD,EAAAE,SAAA,OACKrB,GAAamB,EAACC,cAAAE,EAAU,CAAAP,MAAOA,GAAQf,GAC1CmB,EAACC,cAAAG,aACYpB,KAAcL,IAAgB,EAAK0B,cAEzB,IAAZnB,EAA0BA,GAAWF,IAAaL,EAE7C,eAAAK,KAAcL,IAAgB,kBAC3BQ,IAAkB,EAChBmB,kBAAAlB,IAAoB,EACvCQ,MAAOA,GAEPI,EAAAC,cAACM,EAAWV,EAAA,CAAAW,UACCxB,KAAcL,IAAgB,EAAK0B,cAEzB,IAAZnB,EACHA,GACCF,IAAaL,EAEN,eAAAK,KAAcL,IAAgB,EAAK,mBAE7Ca,EAAMiB,IAAQ9B,EAAe,UAAGa,EAAMiB,GAAE,eAAWC,EAEtCC,gBAAAxB,IAAkB,EAChBmB,kBAAAlB,IAAoB,GACnCI,EAAK,CACTI,MAAOA,EAAK,oBAAA,EAEZL,IAAKA,QAGNT,GAAckB,EAAAC,cAACW,EAAW,CAAAhB,MAAOA,GAAQd,IAIhD,OACEkB,gBAACa,EAAY,CACXxB,MAAOA,EACPJ,SAAUA,EACV6B,SAAUtB,EAAMsB,WAAY,EAC5BxB,oBAAqBA,KAElBP,GAAYiB,EAACC,cAAAc,EAAM,CAAAnB,MAAOA,GAAQb,GAClCD,GAAgBD,EACjBmB,gBAACgB,EAAY,KAAEjB,GAA6B,IAI3CnB,GAAeoB,EAACC,cAAAc,EAAM,CAAAnB,MAAOA,GAAQhB,KACrCD,GACDqB,gBAACiB,EAAS,CACRC,UAAU,MACVT,GAAIjB,EAAMiB,GAAK,GAAGU,OAAA3B,EAAMiB,kBAAaC,GAEpC/B,GAKX"}