@transferwise/components 0.0.0-experimental-8cc553f → 0.0.0-experimental-769973c

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 (353) hide show
  1. package/build/checkbox/Checkbox.js +1 -1
  2. package/build/checkbox/Checkbox.js.map +1 -1
  3. package/build/checkbox/Checkbox.mjs +1 -1
  4. package/build/checkbox/Checkbox.mjs.map +1 -1
  5. package/build/common/Option/Option.js +2 -2
  6. package/build/common/Option/Option.js.map +1 -1
  7. package/build/common/Option/Option.mjs +2 -2
  8. package/build/common/Option/Option.mjs.map +1 -1
  9. package/build/main.css +5397 -5944
  10. package/build/moneyInput/MoneyInput.js +28 -12
  11. package/build/moneyInput/MoneyInput.js.map +1 -1
  12. package/build/moneyInput/MoneyInput.mjs +30 -14
  13. package/build/moneyInput/MoneyInput.mjs.map +1 -1
  14. package/build/moneyInput/currencyFormatting.js +8 -2
  15. package/build/moneyInput/currencyFormatting.js.map +1 -1
  16. package/build/moneyInput/currencyFormatting.mjs +5 -4
  17. package/build/moneyInput/currencyFormatting.mjs.map +1 -1
  18. package/build/styles/accordion/Accordion.css +23 -21
  19. package/build/styles/actionButton/ActionButton.css +8 -6
  20. package/build/styles/alert/Alert.css +2 -2
  21. package/build/styles/avatar/Avatar.css +65 -65
  22. package/build/styles/avatarLayout/AvatarLayout.css +11 -11
  23. package/build/styles/avatarView/AvatarView.css +3 -3
  24. package/build/styles/avatarView/Dot.css +3 -3
  25. package/build/styles/badge/Badge.css +8 -12
  26. package/build/styles/button/Button.css +6 -6
  27. package/build/styles/button/LegacyButton.css +3 -9
  28. package/build/styles/card/Card.css +27 -18
  29. package/build/styles/carousel/Carousel.css +28 -27
  30. package/build/styles/checkboxButton/CheckboxButton.css +10 -15
  31. package/build/styles/chips/Chip.css +26 -29
  32. package/build/styles/common/Option/Option.css +42 -44
  33. package/build/styles/common/baseCard/BaseCard.css +3 -7
  34. package/build/styles/common/bottomSheet/BottomSheet.css +30 -18
  35. package/build/styles/common/circle/Circle.css +10 -10
  36. package/build/styles/common/closeButton/CloseButton.css +36 -36
  37. package/build/styles/common/liveRegion/LiveRegion.css +1 -1
  38. package/build/styles/common/panel/Panel.css +7 -7
  39. package/build/styles/criticalBanner/CriticalCommsBanner.css +7 -7
  40. package/build/styles/css/accordion.css +35 -37
  41. package/build/styles/css/alerts.css +84 -96
  42. package/build/styles/css/badge.css +25 -23
  43. package/build/styles/css/breadcrumbs.css +6 -4
  44. package/build/styles/css/button-groups.css +157 -168
  45. package/build/styles/css/buttons.css +69 -74
  46. package/build/styles/css/circles.css +54 -60
  47. package/build/styles/css/close.css +2 -2
  48. package/build/styles/css/column-layout.css +45 -48
  49. package/build/styles/css/currency-flags.css +10 -12
  50. package/build/styles/css/decision.css +14 -12
  51. package/build/styles/css/dropdowns.css +116 -142
  52. package/build/styles/css/droppable.css +45 -36
  53. package/build/styles/css/flex.css +88 -104
  54. package/build/styles/css/footer.css +15 -14
  55. package/build/styles/css/grid.css +780 -975
  56. package/build/styles/css/input-groups.css +333 -361
  57. package/build/styles/css/link-callout.css +5 -6
  58. package/build/styles/css/list-group.css +72 -66
  59. package/build/styles/css/loaders.css +11 -11
  60. package/build/styles/css/media.css +21 -25
  61. package/build/styles/css/modals.css +57 -51
  62. package/build/styles/css/navbar.css +537 -581
  63. package/build/styles/css/navs.css +84 -88
  64. package/build/styles/css/neptune-social-media.css +17 -21
  65. package/build/styles/css/neptune.css +4217 -4545
  66. package/build/styles/css/panels.css +100 -102
  67. package/build/styles/css/popovers.css +189 -217
  68. package/build/styles/css/process.css +69 -71
  69. package/build/styles/css/progress-bars.css +13 -17
  70. package/build/styles/css/select.css +35 -39
  71. package/build/styles/css/sequences.css +147 -169
  72. package/build/styles/css/table.css +50 -39
  73. package/build/styles/css/tick.css +15 -10
  74. package/build/styles/css/tooltip.css +66 -64
  75. package/build/styles/css/utilities.css +24 -24
  76. package/build/styles/css/wells.css +20 -20
  77. package/build/styles/dateInput/DateInput.css +4 -4
  78. package/build/styles/dateLookup/DateLookup.css +10 -9
  79. package/build/styles/dateLookup/dateTrigger/DateTrigger.css +9 -15
  80. package/build/styles/definitionList/DefinitionList.css +8 -14
  81. package/build/styles/dimmer/Dimmer.css +9 -19
  82. package/build/styles/divider/Divider.css +8 -7
  83. package/build/styles/drawer/Drawer.css +16 -15
  84. package/build/styles/dropFade/DropFade.css +2 -2
  85. package/build/styles/expressiveMoneyInput/ExpressiveMoneyInput.css +11 -11
  86. package/build/styles/expressiveMoneyInput/amountInput/AmountInput.css +4 -4
  87. package/build/styles/expressiveMoneyInput/chevron/Chevron.css +5 -5
  88. package/build/styles/field/Field.css +5 -5
  89. package/build/styles/flowNavigation/FlowNavigation.css +29 -28
  90. package/build/styles/flowNavigation/animatedLabel/AnimatedLabel.css +5 -5
  91. package/build/styles/header/Header.css +11 -9
  92. package/build/styles/image/Image.css +7 -7
  93. package/build/styles/info/Info.css +1 -1
  94. package/build/styles/inputs/Input.css +24 -25
  95. package/build/styles/inputs/InputGroup.css +13 -13
  96. package/build/styles/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css +10 -10
  97. package/build/styles/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css +5 -5
  98. package/build/styles/inputs/SelectInput/ClearButton/SelectInputClearButton.css +6 -6
  99. package/build/styles/inputs/SelectInput/ItemView/SelectInputItemView.css +4 -4
  100. package/build/styles/inputs/SelectInput/Option/SelectInputOption.css +4 -2
  101. package/build/styles/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +4 -4
  102. package/build/styles/inputs/SelectInput/Options/SelectInputOptions.css +17 -12
  103. package/build/styles/inputs/SelectInput/Popover/SelectInputPopover.css +4 -4
  104. package/build/styles/inputs/SelectInput/SelectInput.css +54 -47
  105. package/build/styles/inputs/TextArea.css +26 -27
  106. package/build/styles/instructionsList/InstructionsList.css +5 -5
  107. package/build/styles/legacylistItem/LegacyListItem.css +1 -1
  108. package/build/styles/link/Link.css +2 -8
  109. package/build/styles/listItem/ListItem.css +38 -35
  110. package/build/styles/listItem/ListItem.grid.css +7 -7
  111. package/build/styles/loader/Loader.css +30 -30
  112. package/build/styles/main.css +5397 -5944
  113. package/build/styles/modal/Modal.css +17 -16
  114. package/build/styles/moneyInput/MoneyInput.css +10 -20
  115. package/build/styles/navigationOption/NavigationOption.css +6 -19
  116. package/build/styles/navigationOptionsList/NavigationOptionsList.css +3 -8
  117. package/build/styles/nudge/Nudge.css +46 -72
  118. package/build/styles/overlayHeader/OverlayHeader.css +7 -6
  119. package/build/styles/phoneNumberInput/PhoneNumberInput.css +3 -9
  120. package/build/styles/popover/Popover.css +13 -10
  121. package/build/styles/progress/Progress.css +3 -3
  122. package/build/styles/progressBar/ProgressBar.css +4 -4
  123. package/build/styles/promoCard/PromoCard.css +27 -41
  124. package/build/styles/prompt/ActionPrompt/ActionPrompt.css +8 -8
  125. package/build/styles/prompt/InfoPrompt/InfoPrompt.css +7 -7
  126. package/build/styles/prompt/InlinePrompt/InlinePrompt.css +5 -6
  127. package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css +6 -6
  128. package/build/styles/radioGroup/RadioGroup.css +1 -1
  129. package/build/styles/section/Section.css +6 -6
  130. package/build/styles/segmentedControl/SegmentedControl.css +18 -15
  131. package/build/styles/select/Select.css +55 -99
  132. package/build/styles/slidingPanel/SlidingPanel.css +9 -31
  133. package/build/styles/snackbar/Snackbar.css +21 -35
  134. package/build/styles/stepper/Stepper.css +9 -12
  135. package/build/styles/styles/less/accordion.css +35 -37
  136. package/build/styles/styles/less/alerts.css +84 -96
  137. package/build/styles/styles/less/badge.css +25 -23
  138. package/build/styles/styles/less/breadcrumbs.css +6 -4
  139. package/build/styles/styles/less/button-groups.css +157 -168
  140. package/build/styles/styles/less/buttons.css +69 -74
  141. package/build/styles/styles/less/circles.css +54 -60
  142. package/build/styles/styles/less/close.css +2 -2
  143. package/build/styles/styles/less/column-layout.css +45 -48
  144. package/build/styles/styles/less/currency-flags.css +10 -12
  145. package/build/styles/styles/less/decision.css +14 -12
  146. package/build/styles/styles/less/dropdowns.css +116 -142
  147. package/build/styles/styles/less/droppable.css +45 -36
  148. package/build/styles/styles/less/flex.css +88 -104
  149. package/build/styles/styles/less/footer.css +15 -14
  150. package/build/styles/styles/less/forms/bootstrap-forms.css +244 -264
  151. package/build/styles/styles/less/forms/checkbox-radio.css +41 -41
  152. package/build/styles/styles/less/grid.css +780 -975
  153. package/build/styles/styles/less/input-groups.css +333 -361
  154. package/build/styles/styles/less/link-callout.css +5 -6
  155. package/build/styles/styles/less/list-group.css +72 -66
  156. package/build/styles/styles/less/loaders.css +11 -11
  157. package/build/styles/styles/less/media.css +21 -25
  158. package/build/styles/styles/less/modals.css +57 -51
  159. package/build/styles/styles/less/navbar.css +537 -581
  160. package/build/styles/styles/less/navs.css +84 -88
  161. package/build/styles/styles/less/neptune-social-media.css +17 -21
  162. package/build/styles/styles/less/neptune.css +4217 -4545
  163. package/build/styles/styles/less/panels.css +100 -102
  164. package/build/styles/styles/less/popovers.css +189 -217
  165. package/build/styles/styles/less/process.css +69 -71
  166. package/build/styles/styles/less/progress-bars.css +13 -17
  167. package/build/styles/styles/less/select.css +35 -39
  168. package/build/styles/styles/less/sequences.css +147 -169
  169. package/build/styles/styles/less/table.css +50 -39
  170. package/build/styles/styles/less/tick.css +15 -10
  171. package/build/styles/styles/less/tooltip.css +66 -64
  172. package/build/styles/styles/less/utilities.css +24 -24
  173. package/build/styles/styles/less/wells.css +20 -20
  174. package/build/styles/summary/Summary.css +19 -30
  175. package/build/styles/switch/Switch.css +5 -4
  176. package/build/styles/table/Table.css +60 -57
  177. package/build/styles/tabs/Tabs.css +18 -14
  178. package/build/styles/tile/Tile.css +12 -12
  179. package/build/styles/tooltip/Tooltip.css +2 -2
  180. package/build/styles/typeahead/Typeahead.css +40 -52
  181. package/build/styles/upload/Upload.css +11 -10
  182. package/build/styles/uploadInput/UploadInput.css +4 -4
  183. package/build/styles/uploadInput/uploadButton/UploadButton.css +20 -19
  184. package/build/styles/uploadInput/uploadItem/UploadItem.css +45 -44
  185. package/build/types/moneyInput/MoneyInput.d.ts +6 -0
  186. package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
  187. package/build/types/moneyInput/currencyFormatting.d.ts +4 -3
  188. package/build/types/moneyInput/currencyFormatting.d.ts.map +1 -1
  189. package/package.json +1 -1
  190. package/src/accordion/Accordion.css +23 -21
  191. package/src/accordion/Accordion.less +3 -3
  192. package/src/actionButton/ActionButton.css +8 -6
  193. package/src/alert/Alert.css +2 -2
  194. package/src/avatar/Avatar.css +65 -65
  195. package/src/avatarLayout/AvatarLayout.css +11 -11
  196. package/src/avatarView/AvatarView.css +3 -3
  197. package/src/avatarView/Dot.css +3 -3
  198. package/src/badge/Badge.css +8 -12
  199. package/src/badge/Badge.less +1 -1
  200. package/src/button/Button.css +6 -6
  201. package/src/button/LegacyButton.css +3 -9
  202. package/src/button/LegacyButton.less +1 -1
  203. package/src/card/Card.css +27 -18
  204. package/src/card/Card.less +1 -1
  205. package/src/carousel/Carousel.css +28 -27
  206. package/src/checkbox/Checkbox.tsx +1 -1
  207. package/src/checkboxButton/CheckboxButton.css +10 -15
  208. package/src/checkboxButton/CheckboxButton.less +2 -2
  209. package/src/chips/Chip.css +26 -29
  210. package/src/chips/Chip.less +1 -1
  211. package/src/common/Option/Option.css +42 -44
  212. package/src/common/Option/Option.less +2 -2
  213. package/src/common/Option/Option.tsx +2 -2
  214. package/src/common/baseCard/BaseCard.css +3 -7
  215. package/src/common/baseCard/BaseCard.less +0 -5
  216. package/src/common/bottomSheet/BottomSheet.css +30 -18
  217. package/src/common/circle/Circle.css +10 -10
  218. package/src/common/closeButton/CloseButton.css +36 -36
  219. package/src/common/liveRegion/LiveRegion.css +1 -1
  220. package/src/common/panel/Panel.css +7 -7
  221. package/src/criticalBanner/CriticalCommsBanner.css +7 -7
  222. package/src/dateInput/DateInput.css +4 -4
  223. package/src/dateLookup/DateLookup.css +10 -9
  224. package/src/dateLookup/dateTrigger/DateTrigger.css +9 -15
  225. package/src/dateLookup/dateTrigger/DateTrigger.less +1 -1
  226. package/src/definitionList/DefinitionList.css +8 -14
  227. package/src/definitionList/DefinitionList.less +1 -1
  228. package/src/dimmer/Dimmer.css +9 -19
  229. package/src/dimmer/Dimmer.less +2 -3
  230. package/src/divider/Divider.css +8 -7
  231. package/src/drawer/Drawer.css +16 -15
  232. package/src/dropFade/DropFade.css +2 -2
  233. package/src/expressiveMoneyInput/ExpressiveMoneyInput.css +11 -11
  234. package/src/expressiveMoneyInput/amountInput/AmountInput.css +4 -4
  235. package/src/expressiveMoneyInput/chevron/Chevron.css +5 -5
  236. package/src/field/Field.css +5 -5
  237. package/src/flowNavigation/FlowNavigation.css +29 -28
  238. package/src/flowNavigation/animatedLabel/AnimatedLabel.css +5 -5
  239. package/src/header/Header.css +11 -9
  240. package/src/image/Image.css +7 -7
  241. package/src/info/Info.css +1 -1
  242. package/src/inputs/Input.css +24 -25
  243. package/src/inputs/InputGroup.css +13 -13
  244. package/src/inputs/SelectInput/BottomSheet/SelectInputBottomSheet.css +10 -10
  245. package/src/inputs/SelectInput/ButtonInput/SelectInputButtonInput.css +5 -5
  246. package/src/inputs/SelectInput/ClearButton/SelectInputClearButton.css +6 -6
  247. package/src/inputs/SelectInput/ItemView/SelectInputItemView.css +4 -4
  248. package/src/inputs/SelectInput/Option/SelectInputOption.css +4 -2
  249. package/src/inputs/SelectInput/OptionContent/SelectInputOptionContent.css +4 -4
  250. package/src/inputs/SelectInput/Options/SelectInputOptions.css +17 -12
  251. package/src/inputs/SelectInput/Popover/SelectInputPopover.css +4 -4
  252. package/src/inputs/SelectInput/SelectInput.css +54 -47
  253. package/src/inputs/TextArea.css +26 -27
  254. package/src/instructionsList/InstructionsList.css +5 -5
  255. package/src/legacylistItem/LegacyListItem.css +1 -1
  256. package/src/link/Link.css +2 -8
  257. package/src/link/Link.less +1 -1
  258. package/src/listItem/ListItem.css +38 -35
  259. package/src/listItem/ListItem.grid.css +7 -7
  260. package/src/loader/Loader.css +30 -30
  261. package/src/main.css +5397 -5944
  262. package/src/modal/Modal.css +17 -16
  263. package/src/moneyInput/MoneyInput.css +10 -20
  264. package/src/moneyInput/MoneyInput.less +4 -4
  265. package/src/moneyInput/MoneyInput.story.tsx +10 -1
  266. package/src/moneyInput/MoneyInput.test.story.tsx +141 -1
  267. package/src/moneyInput/MoneyInput.test.tsx +45 -0
  268. package/src/moneyInput/MoneyInput.tsx +27 -3
  269. package/src/moneyInput/currencyFormatting.ts +11 -5
  270. package/src/navigationOption/NavigationOption.css +6 -19
  271. package/src/navigationOption/NavigationOption.less +3 -4
  272. package/src/navigationOptionsList/NavigationOptionsList.css +3 -8
  273. package/src/navigationOptionsList/NavigationOptionsList.less +1 -1
  274. package/src/nudge/Nudge.css +46 -72
  275. package/src/nudge/Nudge.less +0 -8
  276. package/src/overlayHeader/OverlayHeader.css +7 -6
  277. package/src/phoneNumberInput/PhoneNumberInput.css +3 -9
  278. package/src/phoneNumberInput/PhoneNumberInput.less +1 -1
  279. package/src/popover/Popover.css +13 -10
  280. package/src/progress/Progress.css +3 -3
  281. package/src/progressBar/ProgressBar.css +4 -4
  282. package/src/promoCard/PromoCard.css +27 -41
  283. package/src/promoCard/PromoCard.less +12 -27
  284. package/src/prompt/ActionPrompt/ActionPrompt.css +8 -8
  285. package/src/prompt/InfoPrompt/InfoPrompt.css +7 -7
  286. package/src/prompt/InlinePrompt/InlinePrompt.css +5 -6
  287. package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +6 -6
  288. package/src/radioGroup/RadioGroup.css +1 -1
  289. package/src/section/Section.css +6 -6
  290. package/src/section/Section.story.tsx +2 -8
  291. package/src/segmentedControl/SegmentedControl.css +18 -15
  292. package/src/select/Select.css +55 -99
  293. package/src/select/Select.less +9 -10
  294. package/src/slidingPanel/SlidingPanel.css +9 -31
  295. package/src/slidingPanel/SlidingPanel.less +4 -4
  296. package/src/snackbar/Snackbar.css +21 -35
  297. package/src/snackbar/Snackbar.less +3 -9
  298. package/src/stepper/Stepper.css +9 -12
  299. package/src/stepper/Stepper.less +1 -1
  300. package/src/styles/less/accordion.css +35 -37
  301. package/src/styles/less/alerts.css +84 -96
  302. package/src/styles/less/badge.css +25 -23
  303. package/src/styles/less/breadcrumbs.css +6 -4
  304. package/src/styles/less/button-groups.css +157 -168
  305. package/src/styles/less/buttons.css +69 -74
  306. package/src/styles/less/circles.css +54 -60
  307. package/src/styles/less/close.css +2 -2
  308. package/src/styles/less/column-layout.css +45 -48
  309. package/src/styles/less/currency-flags.css +10 -12
  310. package/src/styles/less/decision.css +14 -12
  311. package/src/styles/less/dropdowns.css +116 -142
  312. package/src/styles/less/droppable.css +45 -36
  313. package/src/styles/less/flex.css +88 -104
  314. package/src/styles/less/footer.css +15 -14
  315. package/src/styles/less/forms/bootstrap-forms.css +244 -264
  316. package/src/styles/less/forms/checkbox-radio.css +41 -41
  317. package/src/styles/less/grid.css +780 -975
  318. package/src/styles/less/input-groups.css +333 -361
  319. package/src/styles/less/link-callout.css +5 -6
  320. package/src/styles/less/list-group.css +72 -66
  321. package/src/styles/less/loaders.css +11 -11
  322. package/src/styles/less/media.css +21 -25
  323. package/src/styles/less/modals.css +57 -51
  324. package/src/styles/less/navbar.css +537 -581
  325. package/src/styles/less/navs.css +84 -88
  326. package/src/styles/less/neptune-social-media.css +17 -21
  327. package/src/styles/less/neptune.css +4217 -4545
  328. package/src/styles/less/panels.css +100 -102
  329. package/src/styles/less/popovers.css +189 -217
  330. package/src/styles/less/process.css +69 -71
  331. package/src/styles/less/progress-bars.css +13 -17
  332. package/src/styles/less/progress-bars.less +0 -5
  333. package/src/styles/less/select.css +35 -39
  334. package/src/styles/less/sequences.css +147 -169
  335. package/src/styles/less/table.css +50 -39
  336. package/src/styles/less/tick.css +15 -10
  337. package/src/styles/less/tick.less +6 -1
  338. package/src/styles/less/tooltip.css +66 -64
  339. package/src/styles/less/utilities.css +24 -24
  340. package/src/styles/less/wells.css +20 -20
  341. package/src/summary/Summary.css +19 -30
  342. package/src/summary/Summary.less +1 -6
  343. package/src/switch/Switch.css +5 -4
  344. package/src/table/Table.css +60 -57
  345. package/src/tabs/Tabs.css +18 -14
  346. package/src/tile/Tile.css +12 -12
  347. package/src/tooltip/Tooltip.css +2 -2
  348. package/src/typeahead/Typeahead.css +40 -52
  349. package/src/typeahead/Typeahead.less +2 -2
  350. package/src/upload/Upload.css +11 -10
  351. package/src/uploadInput/UploadInput.css +4 -4
  352. package/src/uploadInput/uploadButton/UploadButton.css +20 -19
  353. package/src/uploadInput/uploadItem/UploadItem.css +45 -44
package/build/checkbox/Checkbox.js CHANGED
@@ -57,7 +57,7 @@ function Checkbox({
57
57
  disabled
58
58
  }),
59
59
  children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxButton.default, {
60
- className: "p-r-2",
60
+ className: "p-r-2 p-l-0",
61
61
  checked: checked,
62
62
  disabled: innerDisabled,
63
63
  required: !innerDisabled && required,
package/build/checkbox/Checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n <label className={clsx('np-checkbox-label', { disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA;AAAM,CACQ,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,SAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxB,IAAA,mBAAmB,EAAEJ;GACtB,EACDG,SAAS,CACV;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ;AAC1C,EAAA,oBACEW,cAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAChCC,eAAA,CAAA,OAAA,EAAA;AAAOX,MAAAA,SAAS,EAAEM,SAAI,CAAC,mBAAmB,EAAE;AAAET,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACxDD,cAAA,CAACG,sBAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA;AAAO,OAAA,CAEjB,eAAAO,eAAA,CAACE,YAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,cAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,cAAA,CAACI,YAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET;AAAS,SAAO,CAAC;AAAA,OAC5C,CACR;KAAO;AACT,GAAK,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n <label className={clsx('np-checkbox-label', { disabled })}>\n <CheckboxButton\n className=\"p-r-2 p-l-0\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA;AAAM,CACQ,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,SAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxB,IAAA,mBAAmB,EAAEJ;GACtB,EACDG,SAAS,CACV;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ;AAC1C,EAAA,oBACEW,cAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAChCC,eAAA,CAAA,OAAA,EAAA;AAAOX,MAAAA,SAAS,EAAEM,SAAI,CAAC,mBAAmB,EAAE;AAAET,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACxDD,cAAA,CAACG,sBAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,aAAa;AACvBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA;AAAO,OAAA,CAEjB,eAAAO,eAAA,CAACE,YAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,cAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,cAAA,CAACI,YAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET;AAAS,SAAO,CAAC;AAAA,OAC5C,CACR;KAAO;AACT,GAAK,CAAC;AAEV;;;;"}
package/build/checkbox/Checkbox.mjs CHANGED
@@ -53,7 +53,7 @@ function Checkbox({
53
53
  disabled
54
54
  }),
55
55
  children: [/*#__PURE__*/jsx(CheckboxButton, {
56
- className: "p-r-2",
56
+ className: "p-r-2 p-l-0",
57
57
  checked: checked,
58
58
  disabled: innerDisabled,
59
59
  required: !innerDisabled && required,
package/build/checkbox/Checkbox.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.mjs","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n <label className={clsx('np-checkbox-label', { disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA;AAAM,CACQ,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,IAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxB,IAAA,mBAAmB,EAAEJ;GACtB,EACDG,SAAS,CACV;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ;AAC1C,EAAA,oBACEW,GAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAChCC,IAAA,CAAA,OAAA,EAAA;AAAOX,MAAAA,SAAS,EAAEM,IAAI,CAAC,mBAAmB,EAAE;AAAET,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACxDD,GAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA;AAAO,OAAA,CAEjB,eAAAO,IAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,GAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,GAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET;AAAS,SAAO,CAAC;AAAA,OAC5C,CACR;KAAO;AACT,GAAK,CAAC;AAEV;;;;"}
1
+ {"version":3,"file":"Checkbox.mjs","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n <label className={clsx('np-checkbox-label', { disabled })}>\n <CheckboxButton\n className=\"p-r-2 p-l-0\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA;AAAM,CACQ,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,IAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxB,IAAA,mBAAmB,EAAEJ;GACtB,EACDG,SAAS,CACV;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ;AAC1C,EAAA,oBACEW,GAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAChCC,IAAA,CAAA,OAAA,EAAA;AAAOX,MAAAA,SAAS,EAAEM,IAAI,CAAC,mBAAmB,EAAE;AAAET,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACxDD,GAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,aAAa;AACvBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA;AAAO,OAAA,CAEjB,eAAAO,IAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,GAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,GAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET;AAAS,SAAO,CAAC;AAAA,OAC5C,CACR;KAAO;AACT,GAAK,CAAC;AAEV;;;;"}
package/build/common/Option/Option.js CHANGED
@@ -40,7 +40,7 @@ const Option = /*#__PURE__*/React.forwardRef(({
40
40
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
41
41
  className: clsx.clsx('media'),
42
42
  children: [media && /*#__PURE__*/jsxRuntime.jsx("div", {
43
- className: "media-left",
43
+ className: "p-r-2 p-l-0",
44
44
  children: showMediaCircle ? /*#__PURE__*/jsxRuntime.jsx("div", {
45
45
  className: clsx.clsx('circle circle-sm text-primary', {
46
46
  'circle-inverse': inverseMediaCircle
@@ -66,7 +66,7 @@ const Option = /*#__PURE__*/React.forwardRef(({
66
66
  children: content
67
67
  })]
68
68
  }), /*#__PURE__*/jsxRuntime.jsx("div", {
69
- className: "media-right",
69
+ className: "p-l-2 p-r-0",
70
70
  children: button
71
71
  })]
72
72
  }), additionalContent ? /*#__PURE__*/jsxRuntime.jsx("div", {
package/build/common/Option/Option.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Option.js","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n additionalContent?: ReactNode;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps | AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement | HTMLAnchorElement;\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n */\nconst Option = forwardRef<ReferenceType, OptionProps>(\n (\n {\n media = '',\n title,\n content,\n as: component,\n button,\n decision = true,\n disabled = false,\n complex,\n inverseMediaCircle = true,\n className,\n showMediaAtAllSizes,\n showMediaCircle = true,\n isContainerAligned = false,\n additionalContent,\n ...rest\n },\n reference,\n ) => {\n const Element = component ?? 'label';\n\n return (\n <Element\n {...rest}\n ref={reference}\n className={clsx('np-option', className, {\n 'decision-complex': complex,\n decision,\n disabled,\n 'np-option__sm-media': showMediaAtAllSizes,\n 'np-option__container-aligned': isContainerAligned,\n })}\n disabled={disabled && Element === 'button'}\n >\n <div className={clsx('media')}>\n {media && (\n <div className=\"media-left\">\n {showMediaCircle ? (\n <div\n className={clsx('circle circle-sm text-primary', {\n 'circle-inverse': inverseMediaCircle,\n })}\n >\n {media}\n </div>\n ) : (\n <div className=\"np-option__no-media-circle\">{media}</div>\n )}\n </div>\n )}\n <div className=\"media-body\">\n {/* @ts-expect-error div can have role and aria-lavel props */}\n <Body\n type=\"body-large-bold\"\n // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag\n // so we enable header semantics via `role` and `aria-level` attrs\n role=\"heading\"\n aria-level=\"4\"\n className=\"text-primary np-option__title\"\n >\n {title}\n </Body>\n {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n </div>\n <div className=\"media-right\">{button}</div>\n </div>\n {additionalContent ? (\n <div className=\"np-option-additional-content\">{additionalContent}</div>\n ) : null}\n </Element>\n );\n },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","additionalContent","rest","reference","Element","_jsxs","ref","clsx","children","_jsx","Body","type","role"],"mappings":";;;;;;;;;AAAA;AAyCA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1BC,iBAAiB;EACjB,GAAGC;AAAI,CACR,EACDC,SAAS,KACP;AACF,EAAA,MAAMC,OAAO,GAAGb,SAAS,IAAI,OAAO;EAEpC,oBACEc,eAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfN,IAAAA,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAEV,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE;KACjC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIU,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,gBAE3CH,eAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAEU,SAAI,CAAC,OAAO,CAAE;MAAAC,QAAA,EAAA,CAC3BrB,KAAK,iBACJsB,cAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EACxBT,eAAe,gBACdU,cAAA,CAAA,KAAA,EAAA;AACEZ,UAAAA,SAAS,EAAEU,SAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEX;AACnB,WAAA,CAAE;AAAAY,UAAAA,QAAA,EAEFrB;SACE,CAAC,gBAENsB,cAAA,CAAA,KAAA,EAAA;AAAKZ,UAAAA,SAAS,EAAC,4BAA4B;AAAAW,UAAAA,QAAA,EAAErB;SAAW;OAEvD,CACN,eACDkB,eAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EAAA,cAEzBC,cAAA,CAACC,YAAI,EAAA;AACHC,UAAAA,IAAI,EAAC;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdf,UAAAA,SAAS,EAAC,+BAA+B;AAAAW,UAAAA,QAAA,EAExCpB;AAAK,SACF,CACN,EAACC,OAAO,iBAAIoB,cAAA,CAACC,YAAI,EAAA;AAACb,UAAAA,SAAS,EAAC,yBAAyB;AAAAW,UAAAA,QAAA,EAAEnB;AAAO,SAAO,CAAC;OACnE,CACL,eAAAoB,cAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;AAAAW,QAAAA,QAAA,EAAEhB;AAAM,OAAM,CAC5C;AAAA,KAAK,CACL,EAACS,iBAAiB,gBAChBQ,cAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,8BAA8B;AAAAW,MAAAA,QAAA,EAAEP;KAAuB,CAAC,GACrE,IAAI;AAAA,GACD,CAAC;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Option.js","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n additionalContent?: ReactNode;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps | AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement | HTMLAnchorElement;\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n */\nconst Option = forwardRef<ReferenceType, OptionProps>(\n (\n {\n media = '',\n title,\n content,\n as: component,\n button,\n decision = true,\n disabled = false,\n complex,\n inverseMediaCircle = true,\n className,\n showMediaAtAllSizes,\n showMediaCircle = true,\n isContainerAligned = false,\n additionalContent,\n ...rest\n },\n reference,\n ) => {\n const Element = component ?? 'label';\n\n return (\n <Element\n {...rest}\n ref={reference}\n className={clsx('np-option', className, {\n 'decision-complex': complex,\n decision,\n disabled,\n 'np-option__sm-media': showMediaAtAllSizes,\n 'np-option__container-aligned': isContainerAligned,\n })}\n disabled={disabled && Element === 'button'}\n >\n <div className={clsx('media')}>\n {media && (\n <div className=\"p-r-2 p-l-0\">\n {showMediaCircle ? (\n <div\n className={clsx('circle circle-sm text-primary', {\n 'circle-inverse': inverseMediaCircle,\n })}\n >\n {media}\n </div>\n ) : (\n <div className=\"np-option__no-media-circle\">{media}</div>\n )}\n </div>\n )}\n <div className=\"media-body\">\n {/* @ts-expect-error div can have role and aria-lavel props */}\n <Body\n type=\"body-large-bold\"\n // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag\n // so we enable header semantics via `role` and `aria-level` attrs\n role=\"heading\"\n aria-level=\"4\"\n className=\"text-primary np-option__title\"\n >\n {title}\n </Body>\n {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n </div>\n <div className=\"p-l-2 p-r-0\">{button}</div>\n </div>\n {additionalContent ? (\n <div className=\"np-option-additional-content\">{additionalContent}</div>\n ) : null}\n </Element>\n );\n },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","additionalContent","rest","reference","Element","_jsxs","ref","clsx","children","_jsx","Body","type","role"],"mappings":";;;;;;;;;AAAA;AAyCA,MAAMA,MAAM,gBAAGC,gBAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1BC,iBAAiB;EACjB,GAAGC;AAAI,CACR,EACDC,SAAS,KACP;AACF,EAAA,MAAMC,OAAO,GAAGb,SAAS,IAAI,OAAO;EAEpC,oBACEc,eAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfN,IAAAA,SAAS,EAAEU,SAAI,CAAC,WAAW,EAAEV,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE;KACjC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIU,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,gBAE3CH,eAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAEU,SAAI,CAAC,OAAO,CAAE;MAAAC,QAAA,EAAA,CAC3BrB,KAAK,iBACJsB,cAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;QAAAW,QAAA,EACzBT,eAAe,gBACdU,cAAA,CAAA,KAAA,EAAA;AACEZ,UAAAA,SAAS,EAAEU,SAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEX;AACnB,WAAA,CAAE;AAAAY,UAAAA,QAAA,EAEFrB;SACE,CAAC,gBAENsB,cAAA,CAAA,KAAA,EAAA;AAAKZ,UAAAA,SAAS,EAAC,4BAA4B;AAAAW,UAAAA,QAAA,EAAErB;SAAW;OAEvD,CACN,eACDkB,eAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EAAA,cAEzBC,cAAA,CAACC,YAAI,EAAA;AACHC,UAAAA,IAAI,EAAC;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdf,UAAAA,SAAS,EAAC,+BAA+B;AAAAW,UAAAA,QAAA,EAExCpB;AAAK,SACF,CACN,EAACC,OAAO,iBAAIoB,cAAA,CAACC,YAAI,EAAA;AAACb,UAAAA,SAAS,EAAC,yBAAyB;AAAAW,UAAAA,QAAA,EAAEnB;AAAO,SAAO,CAAC;OACnE,CACL,eAAAoB,cAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;AAAAW,QAAAA,QAAA,EAAEhB;AAAM,OAAM,CAC5C;AAAA,KAAK,CACL,EAACS,iBAAiB,gBAChBQ,cAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,8BAA8B;AAAAW,MAAAA,QAAA,EAAEP;KAAuB,CAAC,GACrE,IAAI;AAAA,GACD,CAAC;AAEd,CAAC;;;;"}
package/build/common/Option/Option.mjs CHANGED
@@ -36,7 +36,7 @@ const Option = /*#__PURE__*/forwardRef(({
36
36
  children: [/*#__PURE__*/jsxs("div", {
37
37
  className: clsx('media'),
38
38
  children: [media && /*#__PURE__*/jsx("div", {
39
- className: "media-left",
39
+ className: "p-r-2 p-l-0",
40
40
  children: showMediaCircle ? /*#__PURE__*/jsx("div", {
41
41
  className: clsx('circle circle-sm text-primary', {
42
42
  'circle-inverse': inverseMediaCircle
@@ -62,7 +62,7 @@ const Option = /*#__PURE__*/forwardRef(({
62
62
  children: content
63
63
  })]
64
64
  }), /*#__PURE__*/jsx("div", {
65
- className: "media-right",
65
+ className: "p-l-2 p-r-0",
66
66
  children: button
67
67
  })]
68
68
  }), additionalContent ? /*#__PURE__*/jsx("div", {
package/build/common/Option/Option.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Option.mjs","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n additionalContent?: ReactNode;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps | AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement | HTMLAnchorElement;\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n */\nconst Option = forwardRef<ReferenceType, OptionProps>(\n (\n {\n media = '',\n title,\n content,\n as: component,\n button,\n decision = true,\n disabled = false,\n complex,\n inverseMediaCircle = true,\n className,\n showMediaAtAllSizes,\n showMediaCircle = true,\n isContainerAligned = false,\n additionalContent,\n ...rest\n },\n reference,\n ) => {\n const Element = component ?? 'label';\n\n return (\n <Element\n {...rest}\n ref={reference}\n className={clsx('np-option', className, {\n 'decision-complex': complex,\n decision,\n disabled,\n 'np-option__sm-media': showMediaAtAllSizes,\n 'np-option__container-aligned': isContainerAligned,\n })}\n disabled={disabled && Element === 'button'}\n >\n <div className={clsx('media')}>\n {media && (\n <div className=\"media-left\">\n {showMediaCircle ? (\n <div\n className={clsx('circle circle-sm text-primary', {\n 'circle-inverse': inverseMediaCircle,\n })}\n >\n {media}\n </div>\n ) : (\n <div className=\"np-option__no-media-circle\">{media}</div>\n )}\n </div>\n )}\n <div className=\"media-body\">\n {/* @ts-expect-error div can have role and aria-lavel props */}\n <Body\n type=\"body-large-bold\"\n // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag\n // so we enable header semantics via `role` and `aria-level` attrs\n role=\"heading\"\n aria-level=\"4\"\n className=\"text-primary np-option__title\"\n >\n {title}\n </Body>\n {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n </div>\n <div className=\"media-right\">{button}</div>\n </div>\n {additionalContent ? (\n <div className=\"np-option-additional-content\">{additionalContent}</div>\n ) : null}\n </Element>\n );\n },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","additionalContent","rest","reference","Element","_jsxs","ref","clsx","children","_jsx","Body","type","role"],"mappings":";;;;;AAAA;AAyCA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1BC,iBAAiB;EACjB,GAAGC;AAAI,CACR,EACDC,SAAS,KACP;AACF,EAAA,MAAMC,OAAO,GAAGb,SAAS,IAAI,OAAO;EAEpC,oBACEc,IAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfN,IAAAA,SAAS,EAAEU,IAAI,CAAC,WAAW,EAAEV,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE;KACjC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIU,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,gBAE3CH,IAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAEU,IAAI,CAAC,OAAO,CAAE;MAAAC,QAAA,EAAA,CAC3BrB,KAAK,iBACJsB,GAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EACxBT,eAAe,gBACdU,GAAA,CAAA,KAAA,EAAA;AACEZ,UAAAA,SAAS,EAAEU,IAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEX;AACnB,WAAA,CAAE;AAAAY,UAAAA,QAAA,EAEFrB;SACE,CAAC,gBAENsB,GAAA,CAAA,KAAA,EAAA;AAAKZ,UAAAA,SAAS,EAAC,4BAA4B;AAAAW,UAAAA,QAAA,EAAErB;SAAW;OAEvD,CACN,eACDkB,IAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EAAA,cAEzBC,GAAA,CAACC,IAAI,EAAA;AACHC,UAAAA,IAAI,EAAC;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdf,UAAAA,SAAS,EAAC,+BAA+B;AAAAW,UAAAA,QAAA,EAExCpB;AAAK,SACF,CACN,EAACC,OAAO,iBAAIoB,GAAA,CAACC,IAAI,EAAA;AAACb,UAAAA,SAAS,EAAC,yBAAyB;AAAAW,UAAAA,QAAA,EAAEnB;AAAO,SAAO,CAAC;OACnE,CACL,eAAAoB,GAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;AAAAW,QAAAA,QAAA,EAAEhB;AAAM,OAAM,CAC5C;AAAA,KAAK,CACL,EAACS,iBAAiB,gBAChBQ,GAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,8BAA8B;AAAAW,MAAAA,QAAA,EAAEP;KAAuB,CAAC,GACrE,IAAI;AAAA,GACD,CAAC;AAEd,CAAC;;;;"}
1
+ {"version":3,"file":"Option.mjs","sources":["../../../src/common/Option/Option.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport { clsx } from 'clsx';\nimport { MouseEvent, forwardRef, HTMLAttributes, ReactNode, ElementType } from 'react';\n\nimport Body from '../../body';\nimport { LinkProps } from '../commonProps';\n\nexport interface BaseOptionProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'content'> {\n 'aria-label'?: string;\n 'aria-expanded'?: boolean;\n 'aria-controls'?: string;\n media?: ReactNode;\n name?: string;\n htmlFor?: string;\n title: ReactNode;\n content?: ReactNode;\n onClick?: (event: MouseEvent<HTMLElement>) => void;\n as?: ElementType;\n disabled?: boolean;\n button?: ReactNode;\n decision?: boolean;\n complex?: boolean;\n inverseMediaCircle?: boolean;\n className?: string;\n showMediaAtAllSizes?: boolean;\n showMediaCircle?: boolean;\n isContainerAligned?: boolean;\n additionalContent?: ReactNode;\n}\n\ninterface AnchorOptionProps extends BaseOptionProps, LinkProps {\n as: 'a';\n}\n\nexport type OptionProps = BaseOptionProps | AnchorOptionProps;\n\nexport type ReferenceType = HTMLElement | HTMLAnchorElement;\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n */\nconst Option = forwardRef<ReferenceType, OptionProps>(\n (\n {\n media = '',\n title,\n content,\n as: component,\n button,\n decision = true,\n disabled = false,\n complex,\n inverseMediaCircle = true,\n className,\n showMediaAtAllSizes,\n showMediaCircle = true,\n isContainerAligned = false,\n additionalContent,\n ...rest\n },\n reference,\n ) => {\n const Element = component ?? 'label';\n\n return (\n <Element\n {...rest}\n ref={reference}\n className={clsx('np-option', className, {\n 'decision-complex': complex,\n decision,\n disabled,\n 'np-option__sm-media': showMediaAtAllSizes,\n 'np-option__container-aligned': isContainerAligned,\n })}\n disabled={disabled && Element === 'button'}\n >\n <div className={clsx('media')}>\n {media && (\n <div className=\"p-r-2 p-l-0\">\n {showMediaCircle ? (\n <div\n className={clsx('circle circle-sm text-primary', {\n 'circle-inverse': inverseMediaCircle,\n })}\n >\n {media}\n </div>\n ) : (\n <div className=\"np-option__no-media-circle\">{media}</div>\n )}\n </div>\n )}\n <div className=\"media-body\">\n {/* @ts-expect-error div can have role and aria-lavel props */}\n <Body\n type=\"body-large-bold\"\n // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag\n // so we enable header semantics via `role` and `aria-level` attrs\n role=\"heading\"\n aria-level=\"4\"\n className=\"text-primary np-option__title\"\n >\n {title}\n </Body>\n {content && <Body className=\"d-block np-option__body\">{content}</Body>}\n </div>\n <div className=\"p-l-2 p-r-0\">{button}</div>\n </div>\n {additionalContent ? (\n <div className=\"np-option-additional-content\">{additionalContent}</div>\n ) : null}\n </Element>\n );\n },\n);\n\nexport default Option;\n"],"names":["Option","forwardRef","media","title","content","as","component","button","decision","disabled","complex","inverseMediaCircle","className","showMediaAtAllSizes","showMediaCircle","isContainerAligned","additionalContent","rest","reference","Element","_jsxs","ref","clsx","children","_jsx","Body","type","role"],"mappings":";;;;;AAAA;AAyCA,MAAMA,MAAM,gBAAGC,UAAU,CACvB,CACE;AACEC,EAAAA,KAAK,GAAG,EAAE;EACVC,KAAK;EACLC,OAAO;AACPC,EAAAA,EAAE,EAAEC,SAAS;EACbC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,GAAG,KAAK;EAChBC,OAAO;AACPC,EAAAA,kBAAkB,GAAG,IAAI;EACzBC,SAAS;EACTC,mBAAmB;AACnBC,EAAAA,eAAe,GAAG,IAAI;AACtBC,EAAAA,kBAAkB,GAAG,KAAK;EAC1BC,iBAAiB;EACjB,GAAGC;AAAI,CACR,EACDC,SAAS,KACP;AACF,EAAA,MAAMC,OAAO,GAAGb,SAAS,IAAI,OAAO;EAEpC,oBACEc,IAAA,CAACD,OAAO,EAAA;AAAA,IAAA,GACFF,IAAI;AACRI,IAAAA,GAAG,EAAEH,SAAU;AACfN,IAAAA,SAAS,EAAEU,IAAI,CAAC,WAAW,EAAEV,SAAS,EAAE;AACtC,MAAA,kBAAkB,EAAEF,OAAO;MAC3BF,QAAQ;MACRC,QAAQ;AACR,MAAA,qBAAqB,EAAEI,mBAAmB;AAC1C,MAAA,8BAA8B,EAAEE;KACjC,CAAE;AACHN,IAAAA,QAAQ,EAAEA,QAAQ,IAAIU,OAAO,KAAK,QAAS;AAAAI,IAAAA,QAAA,gBAE3CH,IAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAEU,IAAI,CAAC,OAAO,CAAE;MAAAC,QAAA,EAAA,CAC3BrB,KAAK,iBACJsB,GAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;QAAAW,QAAA,EACzBT,eAAe,gBACdU,GAAA,CAAA,KAAA,EAAA;AACEZ,UAAAA,SAAS,EAAEU,IAAI,CAAC,+BAA+B,EAAE;AAC/C,YAAA,gBAAgB,EAAEX;AACnB,WAAA,CAAE;AAAAY,UAAAA,QAAA,EAEFrB;SACE,CAAC,gBAENsB,GAAA,CAAA,KAAA,EAAA;AAAKZ,UAAAA,SAAS,EAAC,4BAA4B;AAAAW,UAAAA,QAAA,EAAErB;SAAW;OAEvD,CACN,eACDkB,IAAA,CAAA,KAAA,EAAA;AAAKR,QAAAA,SAAS,EAAC,YAAY;QAAAW,QAAA,EAAA,cAEzBC,GAAA,CAACC,IAAI,EAAA;AACHC,UAAAA,IAAI,EAAC;AACL;AACA;AAAA;AACAC,UAAAA,IAAI,EAAC,SAAS;AACd,UAAA,YAAA,EAAW,GAAG;AACdf,UAAAA,SAAS,EAAC,+BAA+B;AAAAW,UAAAA,QAAA,EAExCpB;AAAK,SACF,CACN,EAACC,OAAO,iBAAIoB,GAAA,CAACC,IAAI,EAAA;AAACb,UAAAA,SAAS,EAAC,yBAAyB;AAAAW,UAAAA,QAAA,EAAEnB;AAAO,SAAO,CAAC;OACnE,CACL,eAAAoB,GAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,aAAa;AAAAW,QAAAA,QAAA,EAAEhB;AAAM,OAAM,CAC5C;AAAA,KAAK,CACL,EAACS,iBAAiB,gBAChBQ,GAAA,CAAA,KAAA,EAAA;AAAKZ,MAAAA,SAAS,EAAC,8BAA8B;AAAAW,MAAAA,QAAA,EAAEP;KAAuB,CAAC,GACrE,IAAI;AAAA,GACD,CAAC;AAEd,CAAC;;;;"}