@helsenorge/designsystem-react 14.0.0-beta.9 → 14.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (229) hide show
  1. package/lib/AnchorLink.js +2 -2
  2. package/lib/AnchorLink.js.map +1 -1
  3. package/lib/Avatar.js +2 -2
  4. package/lib/Avatar.js.map +1 -1
  5. package/lib/Badge.js +2 -2
  6. package/lib/Badge.js.map +1 -1
  7. package/lib/Button.js +6 -6
  8. package/lib/Button.js.map +1 -1
  9. package/lib/CHANGELOG.md +341 -11
  10. package/lib/Checkbox.js +6 -6
  11. package/lib/Checkbox.js.map +1 -1
  12. package/lib/Close.js +3 -3
  13. package/lib/Close.js.map +1 -1
  14. package/lib/DictionaryTrigger.js +2 -2
  15. package/lib/DictionaryTrigger.js.map +1 -1
  16. package/lib/DoctorSmall.js +22 -34
  17. package/lib/DoctorSmall.js.map +1 -1
  18. package/lib/Drawer.js +6 -5
  19. package/lib/Drawer.js.map +1 -1
  20. package/lib/Duolist.js +5 -5
  21. package/lib/Duolist.js.map +1 -1
  22. package/lib/ElementHeader.js +9 -9
  23. package/lib/ElementHeader.js.map +1 -1
  24. package/lib/ElementHeaderText.js +4 -4
  25. package/lib/ElementHeaderText.js.map +1 -1
  26. package/lib/ErrorWrapper.js +2 -2
  27. package/lib/ErrorWrapper.js.map +1 -1
  28. package/lib/Expander.js +8 -8
  29. package/lib/Expander.js.map +1 -1
  30. package/lib/FormFieldTag.js +2 -2
  31. package/lib/FormFieldTag.js.map +1 -1
  32. package/lib/FormGroup.js +5 -5
  33. package/lib/FormGroup.js.map +1 -1
  34. package/lib/FormLayout.js +3 -3
  35. package/lib/FormLayout.js.map +1 -1
  36. package/lib/HelpDetails.js +3 -3
  37. package/lib/HelpDetails.js.map +1 -1
  38. package/lib/HelpTriggerIcon.js +12 -8
  39. package/lib/HelpTriggerIcon.js.map +1 -1
  40. package/lib/HelpTriggerStandalone.js +2 -2
  41. package/lib/HelpTriggerStandalone.js.map +1 -1
  42. package/lib/HighlightPanel.js +3 -3
  43. package/lib/HighlightPanel.js.map +1 -1
  44. package/lib/HorizontalScroll.js +4 -4
  45. package/lib/HorizontalScroll.js.map +1 -1
  46. package/lib/Icon.js +2 -2
  47. package/lib/Icon.js.map +1 -1
  48. package/lib/IllustrationNames.js +6 -2
  49. package/lib/IllustrationNames.js.map +1 -1
  50. package/lib/InfoTeaser.js +3 -3
  51. package/lib/InfoTeaser.js.map +1 -1
  52. package/lib/Input.js +9 -7
  53. package/lib/Input.js.map +1 -1
  54. package/lib/LazyIcon.js +3 -0
  55. package/lib/LazyIcon.js.map +1 -1
  56. package/lib/LazyIllustration.js +5 -1
  57. package/lib/LazyIllustration.js.map +1 -1
  58. package/lib/LinkList.js +5 -5
  59. package/lib/LinkList.js.map +1 -1
  60. package/lib/List.js +2 -2
  61. package/lib/List.js.map +1 -1
  62. package/lib/ListEditMode.js +4 -4
  63. package/lib/ListEditMode.js.map +1 -1
  64. package/lib/MaxCharacters.js +2 -2
  65. package/lib/MaxCharacters.js.map +1 -1
  66. package/lib/PanelTitle.js +2 -2
  67. package/lib/PanelTitle.js.map +1 -1
  68. package/lib/PopOver.js +2 -2
  69. package/lib/PopOver.js.map +1 -1
  70. package/lib/Select.js +4 -4
  71. package/lib/Select.js.map +1 -1
  72. package/lib/SingleSelectItem.js +3 -3
  73. package/lib/SingleSelectItem.js.map +1 -1
  74. package/lib/Slider.js +18 -10
  75. package/lib/Slider.js.map +1 -1
  76. package/lib/Spacer.js +2 -2
  77. package/lib/Spacer.js.map +1 -1
  78. package/lib/StatusDot.js +4 -4
  79. package/lib/StatusDot.js.map +1 -1
  80. package/lib/StatusDotList.js +2 -2
  81. package/lib/StatusDotList.js.map +1 -1
  82. package/lib/StepButtons.js +5 -5
  83. package/lib/StepButtons.js.map +1 -1
  84. package/lib/StorkMedium.js +96 -0
  85. package/lib/StorkMedium.js.map +1 -0
  86. package/lib/TabList.js +8 -8
  87. package/lib/TabList.js.map +1 -1
  88. package/lib/TabPanel.js +2 -2
  89. package/lib/TabPanel.js.map +1 -1
  90. package/lib/TableBody.js +3 -3
  91. package/lib/TableBody.js.map +1 -1
  92. package/lib/TableCell.js +3 -3
  93. package/lib/TableCell.js.map +1 -1
  94. package/lib/TableExpandedRow.js +5 -5
  95. package/lib/TableExpandedRow.js.map +1 -1
  96. package/lib/TableExpanderCell.js +3 -3
  97. package/lib/TableExpanderCell.js.map +1 -1
  98. package/lib/TableHead.js +7 -7
  99. package/lib/TableHead.js.map +1 -1
  100. package/lib/TableHeadCell.js +6 -6
  101. package/lib/TableHeadCell.js.map +1 -1
  102. package/lib/TableRow.js +6 -6
  103. package/lib/TableRow.js.map +1 -1
  104. package/lib/Textarea.js +17 -16
  105. package/lib/Textarea.js.map +1 -1
  106. package/lib/ThinkingMedium.js +98 -0
  107. package/lib/ThinkingMedium.js.map +1 -0
  108. package/lib/Title.js +2 -2
  109. package/lib/Title.js.map +1 -1
  110. package/lib/Toast.js +3 -3
  111. package/lib/Toast.js.map +1 -1
  112. package/lib/components/ArticleTeaser/index.js +4 -4
  113. package/lib/components/ArticleTeaser/index.js.map +1 -1
  114. package/lib/components/Button/styles.module.scss +1 -3
  115. package/lib/components/Chip/index.js +2 -2
  116. package/lib/components/Chip/index.js.map +1 -1
  117. package/lib/components/Drawer/styles.module.scss +4 -21
  118. package/lib/components/Drawer/styles.module.scss.d.ts +1 -1
  119. package/lib/components/Dropdown/index.js +5 -5
  120. package/lib/components/Dropdown/index.js.map +1 -1
  121. package/lib/components/DropdownOld/index.js +3 -3
  122. package/lib/components/DropdownOld/index.js.map +1 -1
  123. package/lib/components/EmptyState/index.js +2 -2
  124. package/lib/components/EmptyState/index.js.map +1 -1
  125. package/lib/components/ExpanderHierarchy/Expander.d.ts +1 -1
  126. package/lib/components/ExpanderHierarchy/index.js +7 -7
  127. package/lib/components/ExpanderHierarchy/index.js.map +1 -1
  128. package/lib/components/ExpanderList/index.js +19 -10
  129. package/lib/components/ExpanderList/index.js.map +1 -1
  130. package/lib/components/FavoriteButton/index.js +2 -2
  131. package/lib/components/FavoriteButton/index.js.map +1 -1
  132. package/lib/components/HelpBubble/index.js +3 -3
  133. package/lib/components/HelpBubble/index.js.map +1 -1
  134. package/lib/components/HelpPanel/index.js +2 -2
  135. package/lib/components/HelpPanel/index.js.map +1 -1
  136. package/lib/components/HelpTriggerIcon/HelpSign.d.ts +0 -1
  137. package/lib/components/HelpTriggerInline/index.js +2 -2
  138. package/lib/components/HelpTriggerInline/index.js.map +1 -1
  139. package/lib/components/HelpTriggerInline/styles.module.scss +1 -0
  140. package/lib/components/Icons/AdditionalIconInformation.d.ts +12 -0
  141. package/lib/components/Icons/AdditionalIconInformation.js +12 -0
  142. package/lib/components/Icons/AdditionalIconInformation.js.map +1 -1
  143. package/lib/components/Icons/IconNames.d.ts +1 -1
  144. package/lib/components/Icons/IconNames.js +3 -0
  145. package/lib/components/Icons/IconNames.js.map +1 -1
  146. package/lib/components/Icons/MeasuringTape.d.ts +3 -0
  147. package/lib/components/Icons/MeasuringTape.js +8 -0
  148. package/lib/components/Icons/MeasuringTape.js.map +1 -0
  149. package/lib/components/Icons/StarFill.d.ts +4 -0
  150. package/lib/components/Icons/StarFill.js +16 -0
  151. package/lib/components/Icons/StarFill.js.map +1 -0
  152. package/lib/components/Icons/StarStroke.d.ts +4 -0
  153. package/lib/components/Icons/StarStroke.js +16 -0
  154. package/lib/components/Icons/StarStroke.js.map +1 -0
  155. package/lib/components/Illustrations/IllustrationNames.d.ts +1 -1
  156. package/lib/components/Illustrations/Stork.d.ts +11 -0
  157. package/lib/components/Illustrations/Stork.js +16 -0
  158. package/lib/components/Illustrations/Stork.js.map +1 -0
  159. package/lib/components/Illustrations/StorkMedium.d.ts +4 -0
  160. package/lib/components/Illustrations/StorkMedium.js +2 -0
  161. package/lib/components/Illustrations/Thinking.d.ts +9 -0
  162. package/lib/components/Illustrations/Thinking.js +16 -0
  163. package/lib/components/Illustrations/Thinking.js.map +1 -0
  164. package/lib/components/Illustrations/ThinkingMedium.d.ts +4 -0
  165. package/lib/components/Illustrations/ThinkingMedium.js +2 -0
  166. package/lib/components/Loader/index.js +19 -17
  167. package/lib/components/Loader/index.js.map +1 -1
  168. package/lib/components/Modal/index.js +9 -9
  169. package/lib/components/Modal/index.js.map +1 -1
  170. package/lib/components/NotificationPanel/index.js +6 -6
  171. package/lib/components/NotificationPanel/index.js.map +1 -1
  172. package/lib/components/Panel/index.js +12 -12
  173. package/lib/components/Panel/index.js.map +1 -1
  174. package/lib/components/PanelList/index.js +3 -3
  175. package/lib/components/PanelList/index.js.map +1 -1
  176. package/lib/components/PopMenu/index.js +3 -3
  177. package/lib/components/PopMenu/index.js.map +1 -1
  178. package/lib/components/Progressbar/index.js +2 -2
  179. package/lib/components/Progressbar/index.js.map +1 -1
  180. package/lib/components/PromoPanel/index.js +2 -2
  181. package/lib/components/PromoPanel/index.js.map +1 -1
  182. package/lib/components/ServiceMessage/ServiceMessage.d.ts +3 -0
  183. package/lib/components/ServiceMessage/index.js +7 -7
  184. package/lib/components/ServiceMessage/index.js.map +1 -1
  185. package/lib/components/SharingStatus/index.js +4 -4
  186. package/lib/components/SharingStatus/index.js.map +1 -1
  187. package/lib/components/Step/index.js +2 -2
  188. package/lib/components/Step/index.js.map +1 -1
  189. package/lib/components/Stepper/index.js +2 -2
  190. package/lib/components/Stepper/index.js.map +1 -1
  191. package/lib/components/StickyNote/index.js +16 -13
  192. package/lib/components/StickyNote/index.js.map +1 -1
  193. package/lib/components/Table/index.js +3 -3
  194. package/lib/components/Table/index.js.map +1 -1
  195. package/lib/components/Tabs/index.js +4 -4
  196. package/lib/components/Tabs/index.js.map +1 -1
  197. package/lib/components/Tag/index.js +2 -2
  198. package/lib/components/Tag/index.js.map +1 -1
  199. package/lib/components/Tile/index.js +6 -5
  200. package/lib/components/Tile/index.js.map +1 -1
  201. package/lib/components/Toggle/index.js +16 -16
  202. package/lib/components/Toggle/index.js.map +1 -1
  203. package/lib/components/Toggle/styles.module.scss +4 -4
  204. package/lib/components/Validation/index.js +2 -2
  205. package/lib/components/Validation/index.js.map +1 -1
  206. package/lib/declaration.d.ts +9 -0
  207. package/lib/floating-ui.react.js +126 -129
  208. package/lib/floating-ui.react.js.map +1 -1
  209. package/lib/global.d.ts +3 -0
  210. package/lib/hooks/useIsServerSide.d.ts +1 -1
  211. package/lib/resources/Resources.d.ts +145 -0
  212. package/lib/scss/bootstrap/scss/mixins/_grid.scss +2 -1
  213. package/lib/types.d.ts +1 -0
  214. package/lib/useBreakpoint.js +15 -24
  215. package/lib/useBreakpoint.js.map +1 -1
  216. package/lib/useExpand.js +5 -3
  217. package/lib/useExpand.js.map +1 -1
  218. package/lib/useIsServerSide.js +5 -6
  219. package/lib/useIsServerSide.js.map +1 -1
  220. package/lib/useToggle.js +5 -3
  221. package/lib/useToggle.js.map +1 -1
  222. package/lib/utils2.js +7 -7
  223. package/lib/utils2.js.map +1 -1
  224. package/lib/utils3.js +5 -5
  225. package/lib/utils3.js.map +1 -1
  226. package/lib/utils6.js +2 -2
  227. package/lib/utils6.js.map +1 -1
  228. package/package.json +1 -1
  229. package/scss/bootstrap/scss/mixins/_grid.scss +2 -1
package/lib/ThinkingMedium.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThinkingMedium.js","names":["ThinkingMedium: React.FC<BaseSvgIllustrationProps>"],"sources":["../src/components/Illustrations/ThinkingMedium.tsx"],"sourcesContent":["import type React from 'react';\n\nimport type { Palette } from './Thinking';\n\nimport { type BaseSvgIllustrationProps, ViewBoxSize } from '../Illustration';\n\nconst ThinkingMedium: React.FC<BaseSvgIllustrationProps> = ({ color, svgProperties, title }) => {\n const palette = ((): Palette => {\n switch (color) {\n case 'blueberry':\n return {\n lines: '#000',\n shapes1: '#188097',\n shapes2: '#AFDAE3',\n };\n case 'cherry':\n return {\n lines: '#000',\n shapes1: '#A31F0E',\n shapes2: '#F05A3B',\n };\n default:\n return {\n lines: '#1D1C1A',\n shapes1: '#989693',\n shapes2: '#D6D3D2',\n };\n }\n })();\n\n return (\n <svg {...svgProperties} viewBox={ViewBoxSize.Medium}>\n {title}\n <path d=\"m301.601 134.422-11.125 19.26-11.115-19.26h22.24Z\" fill={palette.lines} />\n <path\n d=\"M215.7 117.402c6.645 0 12.033-5.387 12.033-12.033s-5.388-12.033-12.033-12.033c-6.646 0-12.033 5.387-12.033 12.033s5.387 12.033 12.033 12.033Z\"\n fill={palette.shapes2}\n />\n <path\n d=\"M352.636 188.933a543.85 543.85 0 0 1-15.73 3.395 116.773 116.773 0 0 0-4.179-9.625c-2.107-4.28-6.387-8.313-9.121-10.633l21.21-6.968 7.809 23.82.011.011ZM138.19 133.719l-15.753-14.487c-1.659-1.524-5.11-.448-7.72 2.386-2.611 2.835-3.373 6.375-1.726 7.899l15.753 14.487c1.659 1.524 5.11.448 7.72-2.386 2.611-2.835 3.373-6.376 1.726-7.899Z\"\n fill={palette.lines}\n />\n <path\n d=\"M120.712 127.141c2.608-2.839 3.38-6.372 1.726-7.892-1.655-1.519-5.109-.449-7.717 2.391-2.607 2.839-3.38 6.373-1.725 7.892 1.654 1.519 5.109.449 7.716-2.391Zm170.674-32.739-1.429 27.457 13.427.699 1.429-27.457-13.427-.7Zm45.811 97.869a586.22 586.22 0 0 1-11.417 2.196c-26.576 4.84-50.587 7.271-71.931 8.089 1.132-22.531 19.764-40.447 42.576-40.447 19.204 0 35.439 12.706 40.772 30.162Z\"\n fill={palette.shapes1}\n />\n <path d=\"m362.978 139.172 2.957 11.047-11.047-2.969 8.09-8.078Z\" fill={palette.shapes2} />\n <path\n d=\"M299.965 451.799c-.918 0-1.669-.74-1.68-1.658l-.874-66.329a1.679 1.679 0 0 1 1.658-1.703h.022c.919 0 1.67.74 1.681 1.659l.874 66.328a1.678 1.678 0 0 1-1.658 1.703h-.023Zm-91.784-142.302c-1.288 0-2.621-.269-4.022-.84-7.563-3.149-18.767-21.871-24.66-50.352-.964-4.672-.605-12.358 3.607-18.632 2.869-4.291 7.093-7.07 12.191-8.022 13.87-2.611 20.75 7.036 21.041 7.45a1.68 1.68 0 0 1-2.756 1.927c-.258-.358-6.006-8.268-17.658-6.072-4.258.807-7.63 3.025-10.017 6.588-3.394 5.075-4.011 11.731-3.103 16.089 4.807 23.215 14.969 44.716 22.666 47.92 3.26 1.367 7.607 1.21 15.036-10.252a1.68 1.68 0 0 1 2.319-.493c.784.504.997 1.546.493 2.331-4.078 6.285-8.974 12.369-15.126 12.369l-.011-.011Z\"\n fill={palette.lines}\n />\n <path\n d=\"M215.699 255.82c-.47 0-.941-.191-1.266-.583-.078-.09-7.977-9.087-15.17-9.087h-.056c-2.353.012-4.336 1.02-6.062 3.059a1.683 1.683 0 0 1-2.364.202 1.683 1.683 0 0 1-.201-2.364c2.364-2.801 5.266-4.235 8.616-4.258 8.784-.045 17.422 9.826 17.792 10.252a1.684 1.684 0 0 1-.168 2.375 1.64 1.64 0 0 1-1.098.415l-.023-.011Zm-7.697 36.301c-.28 0-.56-.067-.818-.213a1.686 1.686 0 0 1-.65-2.285c5.569-9.938.807-13.871-3.787-17.68-2.521-2.084-4.907-4.056-4.661-6.902.225-2.667 2.712-5.176 8.325-8.403a1.681 1.681 0 1 1 1.681 2.913c-5.636 3.238-6.588 5.008-6.656 5.781-.089 1.098 1.625 2.521 3.451 4.034 4.583 3.787 11.518 9.523 4.583 21.915a1.673 1.673 0 0 1-1.468.863v-.023Zm-62.989-99.709c-.717 0-1.389-.47-1.614-1.198a10.523 10.523 0 0 1-.28-1.166c-.874-5.131 2.588-10.005 7.72-10.879a9.398 9.398 0 0 1 7.742 2.151 1.686 1.686 0 0 1-2.196 2.555 6.06 6.06 0 0 0-4.986-1.389c-3.305.56-5.535 3.708-4.963 7.002.045.258.101.516.179.751a1.683 1.683 0 0 1-1.12 2.095 1.8 1.8 0 0 1-.493.067l.011.011Zm128.276-75.598c-4.583 0-8.314-3.731-8.314-8.313 0-4.583 3.731-8.313 8.314-8.313 4.582 0 8.313 3.73 8.313 8.313 0 4.582-3.731 8.313-8.313 8.313Zm0-13.276a4.954 4.954 0 0 0-4.953 4.952 4.954 4.954 0 0 0 4.953 4.952 4.954 4.954 0 0 0 4.952-4.952 4.954 4.954 0 0 0-4.952-4.952Zm-19.496 100.226h-.1a1.682 1.682 0 0 1-1.58-1.782c1.389-23.293 20.783-41.544 44.155-41.544 19.473 0 36.447 12.481 42.24 31.057a1.677 1.677 0 0 1-1.109 2.107 1.677 1.677 0 0 1-2.107-1.109c-5.344-17.165-21.03-28.694-39.024-28.694-21.59 0-39.506 16.862-40.794 38.385a1.682 1.682 0 0 1-1.681 1.58Zm-12.089-111.67a1.4 1.4 0 0 1-.37-.045l-11.551-2.565a1.66 1.66 0 0 1-1.221-1.098 1.655 1.655 0 0 1 .302-1.614l8.134-9.803-13.019-2.095a1.678 1.678 0 0 1-.918-2.846l10.531-10.532a1.671 1.671 0 0 1 2.376 0c.649.66.661 1.725 0 2.375l-8.202 8.202 12.672 2.039c.594.09 1.098.504 1.311 1.064.213.56.101 1.199-.28 1.67l-8.258 9.949 8.874 1.972a1.68 1.68 0 0 1 1.277 2.005 1.683 1.683 0 0 1-1.635 1.311l-.023.011Zm-68.042 68.289a1.663 1.663 0 0 1-1.524-.975c-1.311-2.868-1.994-5.355-2.241-7.484-4.157-.84-8.257-3.63-10.162-9.658-.784-2.498-1.087-4.952-.93-7.283a14.842 14.842 0 0 1-2.812-1.613c-2.812-2.028-4.448-4.717-4.863-8-1.109-8.75 7.025-18.666 7.373-19.092a1.685 1.685 0 0 1 2.364-.224c.717.594.818 1.647.224 2.364-.079.09-7.563 9.221-6.622 16.526.303 2.353 1.445 4.213 3.496 5.692.493.359.974.65 1.445.896a15.674 15.674 0 0 1 5.076-7.764c3.417-2.846 7.63-3.877 10.218-2.498 1.232.649 1.938 1.927 1.927 3.484-.034 3.44-3.294 7.776-7.417 9.86-2.308 1.165-4.728 1.591-7.104 1.277-.022 1.591.213 3.372.841 5.355 1.333 4.247 4.022 6.409 6.901 7.216.348-3.384 1.815-5.479 2.757-6.487 2.33-2.51 5.859-3.563 8.582-2.555 1.893.695 3.07 2.319 3.148 4.325.146 3.832-3.675 7.305-9.086 8.235a13.47 13.47 0 0 1-1.916.202c.291 1.792.919 3.742 1.86 5.815.392.84.022 1.837-.829 2.229a1.739 1.739 0 0 1-.695.157h-.011Zm5.322-17.983c-1.199 0-2.723.561-3.922 1.86-1.098 1.177-1.725 2.734-1.893 4.572a13.605 13.605 0 0 0 1.501-.157c3.552-.616 6.375-2.768 6.297-4.796-.011-.414-.135-.997-.953-1.299a2.92 2.92 0 0 0-1.03-.168v-.012Zm-16.403-9.837c2.039.258 3.787-.28 5.109-.941 3.428-1.737 5.557-5.187 5.58-6.902 0-.157-.012-.425-.135-.493-1.165-.616-3.977.023-6.498 2.118-1.166.975-3.137 3.003-4.045 6.218h-.011Zm105.431-42.398a1.69 1.69 0 0 1-1.188-.493 1.67 1.67 0 0 1 0-2.376l7.574-7.574a1.67 1.67 0 0 1 2.375 0c.65.661.661 1.726 0 2.376l-7.574 7.574a1.69 1.69 0 0 1-1.187.493Zm-2.017-12.601a1.69 1.69 0 0 1-1.188-.493 1.67 1.67 0 0 1 0-2.375l7.294-7.294a1.67 1.67 0 0 1 2.375 0c.65.661.662 1.725 0 2.375l-7.293 7.294a1.69 1.69 0 0 1-1.188.493Zm88.165 42.094c-1.423 0-2.879-.213-4.336-.65-2.42-.729-4.526-2.23-6.263-4.146a17.099 17.099 0 0 1-7.328 1.95c-9.052.257-13.075-7.115-13.96-11.07a1.68 1.68 0 0 1 1.277-2.005 1.68 1.68 0 0 1 2.006 1.266c.09.369 2.106 8.739 10.577 8.447a13.455 13.455 0 0 0 5.389-1.31c-1.67-2.667-2.745-5.726-3.137-8.549-.493-3.597.235-6.196 2.061-7.35 1.065-.661 2.902-1.087 5.658.717 3.843 2.532 5.434 6.196 4.336 10.073-.638 2.252-2.084 4.302-4.044 5.938 1.266 1.311 2.745 2.319 4.392 2.812 4.773 1.434 8.257-.37 10.33-2.14 3.316-2.812 4.65-6.689 4.47-8.067a1.678 1.678 0 0 1 1.446-1.882c.918-.135 1.759.526 1.882 1.445.358 2.711-1.692 7.72-5.625 11.058-2.677 2.275-5.826 3.451-9.131 3.451v.012Zm-11.686-20.627a.539.539 0 0 0-.235.045c-.381.235-.863 1.557-.516 4.044.325 2.342 1.233 4.93 2.622 7.171 1.446-1.255 2.454-2.734 2.868-4.179.684-2.432-.336-4.627-2.946-6.353-.885-.582-1.457-.74-1.77-.74l-.023.012Zm-221.762 28.11c2.608-2.839 3.38-6.372 1.726-7.892-1.655-1.519-5.109-.449-7.717 2.391-2.607 2.839-3.38 6.373-1.725 7.892 1.654 1.519 5.109.449 7.716-2.391Z\"\n fill={palette.lines}\n />\n <path\n d=\"M114.963 131.871c-1.187 0-2.263-.358-3.092-1.12-1.244-1.143-1.692-2.98-1.244-5.053.392-1.782 1.401-3.63 2.868-5.221 3.283-3.574 7.72-4.672 10.095-2.488 2.376 2.185 1.67 6.689-1.613 10.275-2.14 2.33-4.773 3.607-7.003 3.607h-.011Zm1.009-9.12c-1.042 1.143-1.793 2.476-2.051 3.664-.19.863-.101 1.546.235 1.86.706.638 3.194.056 5.345-2.286s2.521-4.874 1.826-5.523c-.706-.639-3.193-.056-5.344 2.285h-.011Z\"\n fill={palette.lines}\n />\n <path\n d=\"M130.705 146.358c-1.187 0-2.263-.358-3.092-1.12l-15.753-14.487a1.682 1.682 0 0 1 2.274-2.476l15.753 14.487c.695.638 3.194.056 5.345-2.286 2.151-2.341 2.521-4.874 1.826-5.523l-15.753-14.487a1.681 1.681 0 1 1 2.274-2.476l15.753 14.486c2.376 2.185 1.659 6.689-1.624 10.263-2.14 2.331-4.773 3.608-7.003 3.608v.011Zm133.318 13.154a17.92 17.92 0 0 1-3.149-.28c-6.308-1.12-10.677-5.188-9.949-9.255.381-2.106 2.005-3.787 4.594-4.739 2.274-.84 5.097-1.02 7.943-.504 6.308 1.12 10.678 5.187 9.95 9.254-.381 2.107-2.006 3.787-4.594 4.74-1.423.526-3.07.784-4.795.784Zm-3.698-11.697c-1.333 0-2.599.19-3.652.583-1.401.515-2.286 1.299-2.443 2.173-.336 1.86 2.689 4.549 7.227 5.356 2.241.403 4.504.269 6.196-.348 1.4-.515 2.285-1.299 2.442-2.173.336-1.86-2.689-4.549-7.226-5.356a14.23 14.23 0 0 0-2.555-.224l.011-.011Z\"\n fill={palette.lines}\n />\n <path\n d=\"M250.678 162.53c-.1 0-.201 0-.302-.022a1.677 1.677 0 0 1-1.356-1.95l1.905-10.599a1.684 1.684 0 0 1 1.949-1.356 1.677 1.677 0 0 1 1.356 1.95l-1.905 10.599a1.676 1.676 0 0 1-1.647 1.389v-.011Zm17.771 11.269c-.101 0-.202 0-.303-.022a1.677 1.677 0 0 1-1.356-1.95l3.306-18.431a1.684 1.684 0 0 1 1.949-1.355 1.676 1.676 0 0 1 1.356 1.949l-3.305 18.431a1.678 1.678 0 0 1-1.647 1.389v-.011Zm-27.327-32.967a1.67 1.67 0 0 1-1.546-1.031l-5.233-12.391a1.661 1.661 0 0 1 0-1.289c.168-.414.493-.739.908-.918l25.332-10.689a1.68 1.68 0 0 1 2.196.896l5.233 12.392c.179.414.179.874 0 1.288-.168.415-.493.74-.908.919l-25.332 10.689a1.7 1.7 0 0 1-.65.134Zm-3.025-13.176 3.921 9.288 22.24-9.377-3.921-9.289-22.24 9.378Zm-6.891 29.578c-.426 0-.841-.157-1.165-.47l-12.291-11.899-6.297 6.498a1.67 1.67 0 0 1-2.375.034 1.67 1.67 0 0 1-.034-2.375l7.462-7.709a1.68 1.68 0 0 1 2.375-.033l13.501 13.075a1.67 1.67 0 0 1 .034 2.375 1.7 1.7 0 0 1-1.21.516v-.012Zm-46.945 21.455c-.426 0-.841-.157-1.166-.47a1.672 1.672 0 0 1-.033-2.376l14.857-15.338a1.67 1.67 0 0 1 2.375-.034c.672.65.683 1.715.033 2.376l-14.856 15.338a1.699 1.699 0 0 1-1.21.515v-.011Zm147.67-14.599c-.291 0-.582-.078-.84-.224l-20.672-11.932a1.683 1.683 0 0 1-.616-2.297l11.932-20.672a1.706 1.706 0 0 1 1.02-.784 1.701 1.701 0 0 1 1.277.168l20.672 11.932a1.683 1.683 0 0 1 .616 2.297l-11.932 20.672a1.703 1.703 0 0 1-1.02.784 1.925 1.925 0 0 1-.437.056Zm-18.375-14.229 17.759 10.252 10.252-17.759-17.759-10.252-10.252 17.759Zm-152.465 15.736h-.056l-15.653-.47a1.708 1.708 0 0 1-1.434-.886 1.696 1.696 0 0 1 .045-1.68l8.235-13.322c.314-.515.885-.851 1.479-.795a1.703 1.703 0 0 1 1.434.885l7.417 13.792a1.7 1.7 0 0 1-.044 1.681 1.689 1.689 0 0 1-1.435.795h.012Zm-12.695-3.742 9.838.291-4.661-8.661-5.177 8.37Zm142.08-6.875a1.69 1.69 0 0 1-1.457-.84l-11.114-19.26a1.666 1.666 0 0 1 0-1.68 1.687 1.687 0 0 1 1.456-.841h22.24a1.69 1.69 0 0 1 1.457.841 1.67 1.67 0 0 1 0 1.68l-11.115 19.26c-.302.516-.851.84-1.456.84h-.011Zm-8.213-19.259 8.213 14.218 8.212-14.218h-16.425Z\"\n fill={palette.lines}\n />\n <path d=\"m198.109 134.477 18.476 24.761-30.689 3.619 12.213-28.38Z\" fill={palette.lines} />\n <path\n d=\"M185.897 164.536a1.671 1.671 0 0 1-1.345-.672 1.69 1.69 0 0 1-.202-1.669l12.202-28.391c.235-.549.75-.93 1.344-1.009a1.654 1.654 0 0 1 1.546.661l18.487 24.761a1.69 1.69 0 0 1 .202 1.67c-.235.549-.751.93-1.345 1.008l-30.688 3.63c-.067 0-.134.011-.201.011Zm12.593-26.733-9.904 23.036 24.906-2.947-15.002-20.1v.011Zm117.554 116.906c-4.941 0-10.655-1.065-17.165-3.855a1.69 1.69 0 0 1-.885-2.207 1.688 1.688 0 0 1 2.207-.885c24.447 10.498 36.077-5.019 36.559-5.692a1.685 1.685 0 0 1 2.342-.381c.75.538.918 1.591.381 2.342-.101.146-7.899 10.678-23.451 10.678h.012Z\"\n fill={palette.lines}\n />\n <path\n d=\"M198.277 198.441c0 .896-.056 1.77-.145 2.633-20.089-1.972-35.854-5.143-47.047-8.022 2.443-10.611 11.944-18.521 23.283-18.521 13.198 0 23.909 10.7 23.909 23.91Z\"\n fill={palette.shapes2}\n />\n <path\n d=\"M253.961 168.822a15.8 15.8 0 0 1-2.073 7.865l-14.43-8.335-8.101 14.027c-4.482-2.846-7.462-7.854-7.462-13.557 0-8.862 7.171-16.033 16.033-16.033 8.863 0 16.033 7.171 16.033 16.033Z\"\n fill={palette.shapes1}\n />\n <path\n d=\"M154.043 449.909a1.76 1.76 0 0 1-.784-.19 1.68 1.68 0 0 1-.695-2.275c2.824-5.344 5.468-10.162 8.034-14.834 21.164-38.576 29.926-54.541 3.428-121.71-15.551-39.416-21.243-70.149-23.282-88.994-1.972-18.162-1.053-28.885-.773-31.417a2.363 2.363 0 0 1 0-.571c.123-.852.963-1.457 1.792-1.446.359.012.695.146.975.359.706.246 3.025.964 10.577 2.902 13.602 3.496 28.738 6.072 44.984 7.663 17.681 1.726 36.347 2.23 55.483 1.468 23.025-.885 47.147-3.596 71.695-8.056a464.258 464.258 0 0 0 11.384-2.196 553.362 553.362 0 0 0 15.394-3.327 565.684 565.684 0 0 0 7.249-1.714c.46-.112.941-.023 1.334.246.392.269.649.684.717 1.154.045.336 1.098 8.302-3.608 29.187l42.912 86.148c.224.46.235.986.022 1.457a1.697 1.697 0 0 1-1.12.93l-30.812 7.663c-.056 37.702-2.677 71.404-30.733 73.107-9.893.605-33.052 2.006-55.437-4.033-27.473-7.406-44.772-23.428-51.427-47.618a1.674 1.674 0 0 1 1.176-2.061 1.675 1.675 0 0 1 2.062 1.176c6.319 22.957 22.822 38.184 49.062 45.265 21.86 5.893 44.638 4.515 54.363 3.921 25.467-1.546 27.584-34.497 27.584-71.056a1.69 1.69 0 0 1 1.278-1.636l30.049-7.473-42.251-84.815a1.682 1.682 0 0 1-.134-1.121c3.417-15.002 3.809-23.282 3.776-26.688-1.782.426-3.552.84-5.311 1.244a595.78 595.78 0 0 1-15.473 3.35c-3.72.762-7.574 1.501-11.451 2.207-24.705 4.493-48.984 7.227-72.165 8.112-19.283.75-38.106.257-55.942-1.491-16.415-1.602-31.719-4.212-45.5-7.753-4.269-1.098-7.395-1.938-9.311-2.498-.706 9.624-1.838 51.718 23.977 117.172 27.069 68.637 17.456 86.16-3.619 124.557-2.555 4.661-5.199 9.467-8.011 14.789a1.683 1.683 0 0 1-1.49.896h.022Z\"\n fill={palette.lines}\n />\n <path\n d=\"M217.985 203.765a1.683 1.683 0 0 1-1.456-2.521l19.517-33.826a1.71 1.71 0 0 1 1.02-.784 1.701 1.701 0 0 1 1.277.168l22.756 13.143a1.681 1.681 0 0 1 .616 2.296 1.673 1.673 0 0 1-2.297.617l-21.299-12.302-18.677 32.368a1.683 1.683 0 0 1-1.457.841Z\"\n fill={palette.lines}\n />\n </svg>\n );\n};\n\nexport default ThinkingMedium;\n"],"mappings":";;AAMA,IAAMA,kBAAsD,EAAE,OAAO,eAAe,YAAY;CAC9F,MAAM,iBAA0B;AAC9B,UAAQ,OAAR;GACE,KAAK,YACH,QAAO;IACL,OAAO;IACP,SAAS;IACT,SAAS;IACV;GACH,KAAK,SACH,QAAO;IACL,OAAO;IACP,SAAS;IACT,SAAS;IACV;GACH,QACE,QAAO;IACL,OAAO;IACP,SAAS;IACT,SAAS;IACV;;KAEH;AAEJ,QACE,qBAAC,OAAA;EAAI,GAAI;EAAe,SAAS,YAAY;;GAC1C;GACD,oBAAC,QAAA;IAAK,GAAE;IAAoD,MAAM,QAAQ;KAAS;GACnF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IAAK,GAAE;IAAyD,MAAM,QAAQ;KAAW;GAC1F,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IAAK,GAAE;IAA4D,MAAM,QAAQ;KAAS;GAC3F,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;GACF,oBAAC,QAAA;IACC,GAAE;IACF,MAAM,QAAQ;KACd;;GACE;;AAIV,IAAA,yBAAe"}
package/lib/Title.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { n as AnalyticsId } from "./constants2.js";
2
- import classNames from "classnames";
2
+ import cn from "classnames";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import titleStyles from "./components/Title/styles.module.scss";
5
5
  const instanceOfTitleMargin = (margin) => {
@@ -9,7 +9,7 @@ const Title = (props) => {
9
9
  const { id, children, className, htmlMarkup = "h1", appearance = "title1", margin = 0, testId, ref } = props;
10
10
  return /* @__PURE__ */ jsx(htmlMarkup, {
11
11
  id,
12
- className: classNames(titleStyles.title, {
12
+ className: cn(titleStyles.title, {
13
13
  [titleStyles["title--feature"]]: appearance === "titleFeature",
14
14
  [titleStyles["title--title1"]]: appearance === "title1",
15
15
  [titleStyles["title--title2"]]: appearance === "title2",
package/lib/Title.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Title.js","names":["Title: React.FC<TitleProps>"],"sources":["../src/components/Title/utils.ts","../src/components/Title/Title.tsx"],"sourcesContent":["import type { TitleMargin } from './Title';\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n","import classNames from 'classnames';\n\nimport { instanceOfTitleMargin } from './utils';\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';\n\nexport interface TitleProps {\n children: React.ReactNode;\n /** Gives a unique id to the title */\n id?: string;\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds top and bottom margin in rem. */\n margin?: number | TitleMargin;\n /** Changes the underlying element of the title. */\n htmlMarkup?: TitleTags;\n /** Changes the appearance of the title. */\n appearance?: TitleAppearances;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the heading element */\n ref?: React.Ref<HTMLHeadingElement | null>;\n}\n\nexport const Title: React.FC<TitleProps> = (props: TitleProps) => {\n const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId, ref } = props;\n const titleClasses = classNames(\n titleStyles.title,\n {\n [titleStyles['title--feature']]: appearance === 'titleFeature',\n [titleStyles['title--title1']]: appearance === 'title1',\n [titleStyles['title--title2']]: appearance === 'title2',\n [titleStyles['title--title3']]: appearance === 'title3',\n [titleStyles['title--title4']]: appearance === 'title4',\n [titleStyles['title--title5']]: appearance === 'title5',\n [titleStyles['title--title6']]: appearance === 'title6',\n },\n className\n );\n const CustomTag = htmlMarkup;\n\n const inlineStyle = instanceOfTitleMargin(margin)\n ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n return (\n <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n {children}\n </CustomTag>\n );\n};\n\nexport interface TitleMargin {\n marginTop: number;\n marginBottom: number;\n}\n\nexport default Title;\n"],"mappings":";;;;AAEA,MAAa,yBAAyB,WAA2C;AAC/E,QAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,YAAY,IAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,eAAe;;ACyBlI,MAAaA,SAA+B,UAAsB;CAChE,MAAM,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,QAAQ,QAAQ;AAoBvG,QACE,oBAPgB,YAOf;EAAc;EAAI,WApBA,WACnB,YAAY,OACZ;IACG,YAAY,oBAAoB,eAAe;IAC/C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;GAChD,EACD,UACD;EAQ6C,OAL1B,sBAAsB,OAAO,GAC7C;GAAE,WAAW,GAAG,OAAO,UAAU;GAAM,cAAc,GAAG,OAAO,aAAa;GAAM,GAClF;GAAE,WAAW,GAAG,OAAO;GAAM,cAAc,GAAG,OAAO;GAAM;EAGQ;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAC1H;GACS;;AAShB,IAAA,gBAAe"}
1
+ {"version":3,"file":"Title.js","names":["Title: React.FC<TitleProps>"],"sources":["../src/components/Title/utils.ts","../src/components/Title/Title.tsx"],"sourcesContent":["import type { TitleMargin } from './Title';\n\nexport const instanceOfTitleMargin = (margin: unknown): margin is TitleMargin => {\n return Object.prototype.hasOwnProperty.call(margin, 'marginTop') && Object.prototype.hasOwnProperty.call(margin, 'marginBottom');\n};\n","import classNames from 'classnames';\n\nimport { instanceOfTitleMargin } from './utils';\nimport { AnalyticsId } from '../../constants';\n\nimport titleStyles from './styles.module.scss';\n\nexport type TitleTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';\nexport type TitleAppearances = 'titleFeature' | 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6';\n\nexport interface TitleProps {\n children: React.ReactNode;\n /** Gives a unique id to the title */\n id?: string;\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds top and bottom margin in rem. */\n margin?: number | TitleMargin;\n /** Changes the underlying element of the title. */\n htmlMarkup?: TitleTags;\n /** Changes the appearance of the title. */\n appearance?: TitleAppearances;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Ref passed to the heading element */\n ref?: React.Ref<HTMLHeadingElement | null>;\n}\n\nexport const Title: React.FC<TitleProps> = (props: TitleProps) => {\n const { id, children, className, htmlMarkup = 'h1', appearance = 'title1', margin = 0, testId, ref } = props;\n const titleClasses = classNames(\n titleStyles.title,\n {\n [titleStyles['title--feature']]: appearance === 'titleFeature',\n [titleStyles['title--title1']]: appearance === 'title1',\n [titleStyles['title--title2']]: appearance === 'title2',\n [titleStyles['title--title3']]: appearance === 'title3',\n [titleStyles['title--title4']]: appearance === 'title4',\n [titleStyles['title--title5']]: appearance === 'title5',\n [titleStyles['title--title6']]: appearance === 'title6',\n },\n className\n );\n const CustomTag = htmlMarkup;\n\n const inlineStyle = instanceOfTitleMargin(margin)\n ? { marginTop: `${margin.marginTop}rem`, marginBottom: `${margin.marginBottom}rem` }\n : { marginTop: `${margin}rem`, marginBottom: `${margin}rem` };\n\n return (\n <CustomTag id={id} className={titleClasses} style={inlineStyle} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.Title}>\n {children}\n </CustomTag>\n );\n};\n\nexport interface TitleMargin {\n marginTop: number;\n marginBottom: number;\n}\n\nexport default Title;\n"],"mappings":";;;;AAEA,MAAa,yBAAyB,WAA2C;AAC/E,QAAO,OAAO,UAAU,eAAe,KAAK,QAAQ,YAAY,IAAI,OAAO,UAAU,eAAe,KAAK,QAAQ,eAAe;;ACyBlI,MAAaA,SAA+B,UAAsB;CAChE,MAAM,EAAE,IAAI,UAAU,WAAW,aAAa,MAAM,aAAa,UAAU,SAAS,GAAG,QAAQ,QAAQ;AAoBvG,QACE,oBAPgB,YAOf;EAAc;EAAI,WApBA,GACnB,YAAY,OACZ;IACG,YAAY,oBAAoB,eAAe;IAC/C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;IAC9C,YAAY,mBAAmB,eAAe;GAChD,EACD,UACD;EAQ6C,OAL1B,sBAAsB,OAAO,GAC7C;GAAE,WAAW,GAAG,OAAO,UAAU;GAAM,cAAc,GAAG,OAAO,aAAa;GAAM,GAClF;GAAE,WAAW,GAAG,OAAO;GAAM,cAAc,GAAG,OAAO;GAAM;EAGQ;EAAK,eAAa;EAAQ,oBAAkB,YAAY;EAC1H;GACS;;AAShB,IAAA,gBAAe"}
package/lib/Toast.js CHANGED
@@ -3,7 +3,7 @@ import { t as Icon_default } from "./Icon.js";
3
3
  import { t as CheckFill_default } from "./CheckFill.js";
4
4
  import { t as useIsMobileBreakpoint } from "./useIsMobileBreakpoint.js";
5
5
  import { t as Close_default } from "./Close.js";
6
- import classNames from "classnames";
6
+ import cn from "classnames";
7
7
  import { jsx, jsxs } from "react/jsx-runtime";
8
8
  import styles from "./components/Toast/styles.module.scss";
9
9
  var Toast = ({ testId, title, message, onClose }) => {
@@ -18,7 +18,7 @@ var Toast = ({ testId, title, message, onClose }) => {
18
18
  /* @__PURE__ */ jsx(Icon_default, {
19
19
  size: isMobile ? IconSize.XSmall : IconSize.Small,
20
20
  svgIcon: CheckFill_default,
21
- className: classNames(styles["toast__icon"], styles["toast__icon--check"])
21
+ className: cn(styles["toast__icon"], styles["toast__icon--check"])
22
22
  }),
23
23
  /* @__PURE__ */ jsxs("div", {
24
24
  className: styles["toast__text-container"],
@@ -33,7 +33,7 @@ var Toast = ({ testId, title, message, onClose }) => {
33
33
  /* @__PURE__ */ jsx(Close_default, {
34
34
  onClick: handleClose,
35
35
  color: "black",
36
- className: classNames(styles["toast__icon"], styles["toast__icon--close"]),
36
+ className: cn(styles["toast__icon"], styles["toast__icon--close"]),
37
37
  testId: `${testId}-close`
38
38
  })
39
39
  ]
package/lib/Toast.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.js","names":["Toast: React.FC<ToastProps>"],"sources":["../src/components/Toast/Toast.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\n\nimport styles from './styles.module.scss';\n\nexport interface ToastProps {\n /** Sets the data-testid attribute. */\n testId?: string;\n /** The title to display in the toast */\n title: string;\n /** The message to display in the toast */\n message?: string;\n /** Callback when toast is closed */\n onClose?: () => void;\n}\n\nconst Toast: React.FC<ToastProps> = ({ testId, title, message, onClose }) => {\n const isMobile = useIsMobileBreakpoint();\n\n const handleClose = (): void => {\n if (onClose) {\n onClose();\n }\n };\n\n return (\n <output className={styles['toast']} data-testid={testId}>\n <Icon\n size={isMobile ? IconSize.XSmall : IconSize.Small}\n svgIcon={CheckFill}\n className={classNames(styles['toast__icon'], styles['toast__icon--check'])}\n />\n <div className={styles['toast__text-container']}>\n <span className={styles['toast__title']}>{title}</span>\n {message && <span className={styles['toast__description']}>{message}</span>}\n </div>\n <Close\n onClick={handleClose}\n color=\"black\"\n className={classNames(styles['toast__icon'], styles['toast__icon--close'])}\n testId={`${testId}-close`}\n />\n </output>\n );\n};\n\nexport default Toast;\n"],"mappings":";;;;;;;;AAoBA,IAAMA,SAA+B,EAAE,QAAQ,OAAO,SAAS,cAAc;CAC3E,MAAM,WAAW,uBAAuB;CAExC,MAAM,oBAA0B;AAC9B,MAAI,QACF,UAAS;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW,OAAO;EAAU,eAAa;;GAC/C,oBAAC,cAAA;IACC,MAAM,WAAW,SAAS,SAAS,SAAS;IAC5C,SAAS;IACT,WAAW,WAAW,OAAO,gBAAgB,OAAO,sBAAsB;KAC1E;GACF,qBAAC,OAAA;IAAI,WAAW,OAAO;eACrB,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAkB;MAAa,EACtD,WAAW,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAwB;MAAe,CAAA;KACvE;GACN,oBAAC,eAAA;IACC,SAAS;IACT,OAAM;IACN,WAAW,WAAW,OAAO,gBAAgB,OAAO,sBAAsB;IAC1E,QAAQ,GAAG,OAAO;KAClB;;GACK;;AAIb,IAAA,gBAAe"}
1
+ {"version":3,"file":"Toast.js","names":["Toast: React.FC<ToastProps>"],"sources":["../src/components/Toast/Toast.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport Close from '../Close';\nimport Icon, { IconSize } from '../Icon';\nimport CheckFill from '../Icons/CheckFill';\n\nimport styles from './styles.module.scss';\n\nexport interface ToastProps {\n /** Sets the data-testid attribute. */\n testId?: string;\n /** The title to display in the toast */\n title: string;\n /** The message to display in the toast */\n message?: string;\n /** Callback when toast is closed */\n onClose?: () => void;\n}\n\nconst Toast: React.FC<ToastProps> = ({ testId, title, message, onClose }) => {\n const isMobile = useIsMobileBreakpoint();\n\n const handleClose = (): void => {\n if (onClose) {\n onClose();\n }\n };\n\n return (\n <output className={styles['toast']} data-testid={testId}>\n <Icon\n size={isMobile ? IconSize.XSmall : IconSize.Small}\n svgIcon={CheckFill}\n className={classNames(styles['toast__icon'], styles['toast__icon--check'])}\n />\n <div className={styles['toast__text-container']}>\n <span className={styles['toast__title']}>{title}</span>\n {message && <span className={styles['toast__description']}>{message}</span>}\n </div>\n <Close\n onClick={handleClose}\n color=\"black\"\n className={classNames(styles['toast__icon'], styles['toast__icon--close'])}\n testId={`${testId}-close`}\n />\n </output>\n );\n};\n\nexport default Toast;\n"],"mappings":";;;;;;;;AAoBA,IAAMA,SAA+B,EAAE,QAAQ,OAAO,SAAS,cAAc;CAC3E,MAAM,WAAW,uBAAuB;CAExC,MAAM,oBAA0B;AAC9B,MAAI,QACF,UAAS;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW,OAAO;EAAU,eAAa;;GAC/C,oBAAC,cAAA;IACC,MAAM,WAAW,SAAS,SAAS,SAAS;IAC5C,SAAS;IACT,WAAW,GAAW,OAAO,gBAAgB,OAAO,sBAAsB;KAC1E;GACF,qBAAC,OAAA;IAAI,WAAW,OAAO;eACrB,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAkB;MAAa,EACtD,WAAW,oBAAC,QAAA;KAAK,WAAW,OAAO;eAAwB;MAAe,CAAA;KACvE;GACN,oBAAC,eAAA;IACC,SAAS;IACT,OAAM;IACN,WAAW,GAAW,OAAO,gBAAgB,OAAO,sBAAsB;IAC1E,QAAQ,GAAG,OAAO;KAClB;;GACK;;AAIb,IAAA,gBAAe"}
package/lib/components/ArticleTeaser/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { n as AnalyticsId, s as LanguageLocales } from "../../constants2.js";
2
2
  import { n as useLanguage } from "../../useLanguage.js";
3
- import classNames from "classnames";
3
+ import cn from "classnames";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  import styles from "./styles.module.scss";
6
6
  var HN_Designsystem_ArticleTeaser_en_GB_default = {
@@ -27,16 +27,16 @@ var ArticleTeaser = (props) => {
27
27
  ...resources
28
28
  };
29
29
  return /* @__PURE__ */ jsxs(WrapperTag, {
30
- className: classNames(styles.articleteaser),
30
+ className: cn(styles.articleteaser),
31
31
  "data-testid": testId,
32
32
  "data-analyticsid": AnalyticsId.ArticleTeaser,
33
33
  children: [/* @__PURE__ */ jsx("div", {
34
- className: classNames(styles["articleteaser__content"], { [styles["articleteaser__content--collapsed"]]: !expanded }),
34
+ className: cn(styles["articleteaser__content"], { [styles["articleteaser__content--collapsed"]]: !expanded }),
35
35
  style: { maxHeight: expanded ? "none" : props.heightCollapsed },
36
36
  children
37
37
  }), /* @__PURE__ */ jsx("button", {
38
38
  type: "button",
39
- className: classNames(styles["articleteaser__button"], { [styles["articleteaser__button--expanded"]]: expanded }),
39
+ className: cn(styles["articleteaser__button"], { [styles["articleteaser__button--expanded"]]: expanded }),
40
40
  onClick: onExpand,
41
41
  "aria-expanded": expanded,
42
42
  "aria-controls": contentId,
package/lib/components/ArticleTeaser/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["ArticleTeaser: React.FC<ArticleTeaserProps>","mergedResources: HNDesignsystemArticleTeaser"],"sources":["../../../src/resources/HN.Designsystem.ArticleTeaser.en-GB.json","../../../src/resources/HN.Designsystem.ArticleTeaser.nb-NO.json","../../../src/components/ArticleTeaser/resourceHelper.ts","../../../src/components/ArticleTeaser/ArticleTeaser.tsx","../../../src/components/ArticleTeaser/index.ts"],"sourcesContent":["{\n \"expandButtonClose\": \"Show more\",\n \"expandButtonOpen\": \"Show less\"\n}\n","{\n \"expandButtonClose\": \"Vis mer\",\n \"expandButtonOpen\": \"Vis mindre\"\n}\n","import type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.ArticleTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.ArticleTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemArticleTeaser => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type ArticleTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface ArticleTeaserProps {\n /** Callback for the button. Should be used for setting the expanded boolean */\n onExpand: () => void;\n /** What's in the box? */\n children: React.ReactNode;\n /** Id of the content, used to set aria-controls */\n contentId: string;\n /** If the component is expanded or not */\n expanded: boolean;\n /** For overriding the height of the collapsed teaser */\n heightCollapsed?: string;\n /** Changes the underlying element of the wrapper */\n htmlMarkup?: ArticleTeaserTags;\n /** Resources for component */\n resources?: Partial<HNDesignsystemArticleTeaser>;\n /** Sets the data-testid attribute */\n testId?: string;\n}\n\nconst ArticleTeaser: React.FC<ArticleTeaserProps> = props => {\n const { onExpand, children, contentId, expanded, htmlMarkup = 'div', resources, testId } = props;\n const WrapperTag = htmlMarkup;\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemArticleTeaser = {\n ...defaultResources,\n ...resources,\n };\n\n return (\n <WrapperTag className={classNames(styles.articleteaser)} data-testid={testId} data-analyticsid={AnalyticsId.ArticleTeaser}>\n <div\n className={classNames(styles['articleteaser__content'], {\n [styles['articleteaser__content--collapsed']]: !expanded,\n })}\n style={{\n maxHeight: expanded ? 'none' : props.heightCollapsed,\n }}\n >\n {children}\n </div>\n <button\n type=\"button\"\n className={classNames(styles['articleteaser__button'], {\n [styles['articleteaser__button--expanded']]: expanded,\n })}\n onClick={onExpand}\n aria-expanded={expanded}\n aria-controls={contentId}\n >\n {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n </button>\n </WrapperTag>\n );\n};\n\nexport default ArticleTeaser;\n","import ArticleTeaser from './ArticleTeaser';\nexport * from './ArticleTeaser';\nexport default ArticleTeaser;\n"],"mappings":";;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAA2D;AACtF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACmBb,IAAMA,iBAA8C,UAAS;CAC3D,MAAM,EAAE,UAAU,UAAU,WAAW,UAAU,aAAa,OAAO,WAAW,WAAW;CAC3F,MAAM,aAAa;CAEnB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA+C;EACnD,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;AAED,QACE,qBAAC,YAAA;EAAW,WAAW,WAAW,OAAO,cAAc;EAAE,eAAa;EAAQ,oBAAkB,YAAY;aAC1G,oBAAC,OAAA;GACC,WAAW,WAAW,OAAO,2BAA2B,GACrD,OAAO,uCAAuC,CAAC,UACjD,CAAC;GACF,OAAO,EACL,WAAW,WAAW,SAAS,MAAM,iBACtC;GAEA;IACG,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,WAAW,OAAO,0BAA0B,GACpD,OAAO,qCAAqC,UAC9C,CAAC;GACF,SAAS;GACT,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;AChEjB,IAAA,wBDoEe"}
1
+ {"version":3,"file":"index.js","names":["ArticleTeaser: React.FC<ArticleTeaserProps>","mergedResources: HNDesignsystemArticleTeaser"],"sources":["../../../src/resources/HN.Designsystem.ArticleTeaser.en-GB.json","../../../src/resources/HN.Designsystem.ArticleTeaser.nb-NO.json","../../../src/components/ArticleTeaser/resourceHelper.ts","../../../src/components/ArticleTeaser/ArticleTeaser.tsx","../../../src/components/ArticleTeaser/index.ts"],"sourcesContent":["{\n \"expandButtonClose\": \"Show more\",\n \"expandButtonOpen\": \"Show less\"\n}\n","{\n \"expandButtonClose\": \"Vis mer\",\n \"expandButtonOpen\": \"Vis mindre\"\n}\n","import type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.ArticleTeaser.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.ArticleTeaser.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemArticleTeaser => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import classNames from 'classnames';\n\nimport type { HNDesignsystemArticleTeaser } from '../../resources/Resources';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { useLanguage } from '../../hooks/useLanguage';\n\nimport styles from './styles.module.scss';\n\nexport type ArticleTeaserTags = 'div' | 'section' | 'aside' | 'article';\n\nexport interface ArticleTeaserProps {\n /** Callback for the button. Should be used for setting the expanded boolean */\n onExpand: () => void;\n /** What's in the box? */\n children: React.ReactNode;\n /** Id of the content, used to set aria-controls */\n contentId: string;\n /** If the component is expanded or not */\n expanded: boolean;\n /** For overriding the height of the collapsed teaser */\n heightCollapsed?: string;\n /** Changes the underlying element of the wrapper */\n htmlMarkup?: ArticleTeaserTags;\n /** Resources for component */\n resources?: Partial<HNDesignsystemArticleTeaser>;\n /** Sets the data-testid attribute */\n testId?: string;\n}\n\nconst ArticleTeaser: React.FC<ArticleTeaserProps> = props => {\n const { onExpand, children, contentId, expanded, htmlMarkup = 'div', resources, testId } = props;\n const WrapperTag = htmlMarkup;\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemArticleTeaser = {\n ...defaultResources,\n ...resources,\n };\n\n return (\n <WrapperTag className={classNames(styles.articleteaser)} data-testid={testId} data-analyticsid={AnalyticsId.ArticleTeaser}>\n <div\n className={classNames(styles['articleteaser__content'], {\n [styles['articleteaser__content--collapsed']]: !expanded,\n })}\n style={{\n maxHeight: expanded ? 'none' : props.heightCollapsed,\n }}\n >\n {children}\n </div>\n <button\n type=\"button\"\n className={classNames(styles['articleteaser__button'], {\n [styles['articleteaser__button--expanded']]: expanded,\n })}\n onClick={onExpand}\n aria-expanded={expanded}\n aria-controls={contentId}\n >\n {expanded ? mergedResources.expandButtonOpen : mergedResources.expandButtonClose}\n </button>\n </WrapperTag>\n );\n};\n\nexport default ArticleTeaser;\n","import ArticleTeaser from './ArticleTeaser';\nexport * from './ArticleTeaser';\nexport default ArticleTeaser;\n"],"mappings":";;;;;;;;;;;;;AEMA,MAAa,gBAAgB,aAA2D;AACtF,SAAQ,UAAR;EACE,KAAK,gBAAgB,QACnB,QAAO;EACT,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACmBb,IAAMA,iBAA8C,UAAS;CAC3D,MAAM,EAAE,UAAU,UAAU,WAAW,UAAU,aAAa,OAAO,WAAW,WAAW;CAC3F,MAAM,aAAa;CAEnB,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA+C;EACnD,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;AAED,QACE,qBAAC,YAAA;EAAW,WAAW,GAAW,OAAO,cAAc;EAAE,eAAa;EAAQ,oBAAkB,YAAY;aAC1G,oBAAC,OAAA;GACC,WAAW,GAAW,OAAO,2BAA2B,GACrD,OAAO,uCAAuC,CAAC,UACjD,CAAC;GACF,OAAO,EACL,WAAW,WAAW,SAAS,MAAM,iBACtC;GAEA;IACG,EACN,oBAAC,UAAA;GACC,MAAK;GACL,WAAW,GAAW,OAAO,0BAA0B,GACpD,OAAO,qCAAqC,UAC9C,CAAC;GACF,SAAS;GACT,iBAAe;GACf,iBAAe;aAEd,WAAW,gBAAgB,mBAAmB,gBAAgB;IACxD,CAAA;GACE;;AChEjB,IAAA,wBDoEe"}
package/lib/components/Button/styles.module.scss CHANGED
@@ -94,9 +94,7 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
94
94
  }
95
95
 
96
96
  :disabled > & {
97
- @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
98
- color: palette.$neutral700;
99
- }
97
+ color: palette.$neutral700;
100
98
  }
101
99
  }
102
100
 
package/lib/components/Chip/index.js CHANGED
@@ -4,7 +4,7 @@ import { t as palette } from "../../palette.js";
4
4
  import { t as Icon_default } from "../../Icon.js";
5
5
  import { t as Undo_default } from "../../Undo.js";
6
6
  import { t as X_default } from "../../X.js";
7
- import classNames from "classnames";
7
+ import cn from "classnames";
8
8
  import { jsx, jsxs } from "react/jsx-runtime";
9
9
  import styles from "./styles.module.scss";
10
10
  let ChipSize = /* @__PURE__ */ function(ChipSize$1) {
@@ -26,7 +26,7 @@ let ChipVariant = /* @__PURE__ */ function(ChipVariant$1) {
26
26
  var Chip = (props) => {
27
27
  const { children, size = ChipSize.medium, color = "blueberry", variant = "normal", action, onClick, testId } = props;
28
28
  const { refObject, isHovered } = usePseudoClasses();
29
- const chipClasses = classNames(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], { [styles[`chip--undo`]]: action === "undo" });
29
+ const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], { [styles[`chip--undo`]]: action === "undo" });
30
30
  const getActionIcon = () => {
31
31
  switch (action) {
32
32
  case "undo": return Undo_default;
package/lib/components/Chip/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["Chip: React.FC<ChipProps>"],"sources":["../../../src/components/Chip/constants.ts","../../../src/components/Chip/Chip.tsx","../../../src/components/Chip/index.ts"],"sourcesContent":["export enum ChipSize {\n medium = 'medium',\n large = 'large',\n}\n\nexport enum ChipAction {\n remove = 'remove',\n undo = 'undo',\n}\n\nexport enum ChipVariant {\n normal = 'normal',\n oncolor = 'oncolor',\n emphasised = 'emphasised',\n}\n","import cn from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\n\nimport { ChipSize, type ChipAction, type ChipVariant } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n /** Sets the text of the chip */\n children: string;\n /** Sets the size of the chip. Default: medium */\n size?: keyof typeof ChipSize;\n /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n color?: ChipColors;\n /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n variant?: keyof typeof ChipVariant;\n /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n action: keyof typeof ChipAction;\n /* Called when action is set and the chip is clicked on. action must also be set. */\n onClick: () => void;\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n [styles[`chip--undo`]]: action === 'undo',\n });\n\n const getActionIcon = (): SvgIcon => {\n switch (action) {\n case 'undo':\n return Undo;\n case 'remove':\n return X;\n }\n };\n\n return (\n <button className={chipClasses} onClick={onClick} ref={refObject} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n {children}\n <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n </button>\n );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport { ChipSize, ChipAction, ChipVariant } from './constants';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;AAAA,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,YAAA;AACA,YAAA,WAAA;;;AAGF,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,UAAA;;;AAGF,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,YAAA;AACA,eAAA,aAAA;AACA,eAAA,gBAAA;;;ACqBF,IAAMA,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,OAAO,SAAS,QAAQ,QAAQ,aAAa,UAAU,UAAU,QAAQ,SAAS,WAAW;CAE/G,MAAM,EAAE,WAAW,cAAc,kBAAqC;CAEtE,MAAM,cAAc,WAAG,OAAO,MAAM,OAAO,SAAS,SAAS,OAAO,SAAS,UAAU,OAAO,SAAS,YAAY,GAChH,OAAO,gBAAgB,WAAW,QACpC,CAAC;CAEF,MAAM,sBAA+B;AACnC,UAAQ,QAAR;GACE,KAAK,OACH,QAAO;GACT,KAAK,SACH,QAAO;;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW;EAAsB;EAAS,KAAK;EAAW,MAAK;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aAChI,UACD,oBAAC,cAAA;GAAK,SAAS,eAAe;GAAE,MAAM,SAAS;GAAS,OAAO,QAAQ,GAAG,MAAM;GAAkB;IAAa,CAAA;GACxG;;ACrDb,IAAA,eDyDe"}
1
+ {"version":3,"file":"index.js","names":["Chip: React.FC<ChipProps>"],"sources":["../../../src/components/Chip/constants.ts","../../../src/components/Chip/Chip.tsx","../../../src/components/Chip/index.ts"],"sourcesContent":["export enum ChipSize {\n medium = 'medium',\n large = 'large',\n}\n\nexport enum ChipAction {\n remove = 'remove',\n undo = 'undo',\n}\n\nexport enum ChipVariant {\n normal = 'normal',\n oncolor = 'oncolor',\n emphasised = 'emphasised',\n}\n","import cn from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { SvgIcon } from '../Icon';\n\nimport { ChipSize, type ChipAction, type ChipVariant } from './constants';\nimport { AnalyticsId } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { palette } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n /** Sets the text of the chip */\n children: string;\n /** Sets the size of the chip. Default: medium */\n size?: keyof typeof ChipSize;\n /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n color?: ChipColors;\n /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n variant?: keyof typeof ChipVariant;\n /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n action: keyof typeof ChipAction;\n /* Called when action is set and the chip is clicked on. action must also be set. */\n onClick: () => void;\n /** Sets the data-testid attribute on the expander button. */\n testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n\n const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n [styles[`chip--undo`]]: action === 'undo',\n });\n\n const getActionIcon = (): SvgIcon => {\n switch (action) {\n case 'undo':\n return Undo;\n case 'remove':\n return X;\n }\n };\n\n return (\n <button className={chipClasses} onClick={onClick} ref={refObject} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n {children}\n <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n </button>\n );\n};\n\nexport default Chip;\n","import Chip from './Chip';\nexport { ChipSize, ChipAction, ChipVariant } from './constants';\nexport * from './Chip';\nexport default Chip;\n"],"mappings":";;;;;;;;;AAAA,IAAY,WAAA,yBAAA,YAAL;AACL,YAAA,YAAA;AACA,YAAA,WAAA;;;AAGF,IAAY,aAAA,yBAAA,cAAL;AACL,cAAA,YAAA;AACA,cAAA,UAAA;;;AAGF,IAAY,cAAA,yBAAA,eAAL;AACL,eAAA,YAAA;AACA,eAAA,aAAA;AACA,eAAA,gBAAA;;;ACqBF,IAAMA,QAA4B,UAAS;CACzC,MAAM,EAAE,UAAU,OAAO,SAAS,QAAQ,QAAQ,aAAa,UAAU,UAAU,QAAQ,SAAS,WAAW;CAE/G,MAAM,EAAE,WAAW,cAAc,kBAAqC;CAEtE,MAAM,cAAc,GAAG,OAAO,MAAM,OAAO,SAAS,SAAS,OAAO,SAAS,UAAU,OAAO,SAAS,YAAY,GAChH,OAAO,gBAAgB,WAAW,QACpC,CAAC;CAEF,MAAM,sBAA+B;AACnC,UAAQ,QAAR;GACE,KAAK,OACH,QAAO;GACT,KAAK,SACH,QAAO;;;AAIb,QACE,qBAAC,UAAA;EAAO,WAAW;EAAsB;EAAS,KAAK;EAAW,MAAK;EAAS,eAAa;EAAQ,oBAAkB,YAAY;aAChI,UACD,oBAAC,cAAA;GAAK,SAAS,eAAe;GAAE,MAAM,SAAS;GAAS,OAAO,QAAQ,GAAG,MAAM;GAAkB;IAAa,CAAA;GACxG;;ACrDb,IAAA,eDyDe"}
package/lib/components/Drawer/styles.module.scss CHANGED
@@ -73,15 +73,8 @@
73
73
 
74
74
  &__header {
75
75
  display: flex;
76
- align-items: center;
77
76
  justify-content: space-between;
78
-
79
- // legg til padding for å gi plass til close button
80
- padding: var(--core-space-xs) 2.75rem var(--core-space-xs) var(--core-space-2xs);
81
-
82
- @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
83
- padding: var(--core-space-xs) 2.75rem var(--core-space-xs) var(--core-space-xs);
84
- }
77
+ padding: var(--core-space-xs);
85
78
 
86
79
  @include breakpoints.tiny-screens-media-query {
87
80
  padding: var(--core-space-4xs) 0;
@@ -89,22 +82,12 @@
89
82
  align-items: flex-start;
90
83
  }
91
84
 
92
- &--no-close-button {
93
- padding: var(--core-space-xs) var(--core-space-2xs);
94
-
95
- @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
96
- padding: var(--core-space-xs);
97
- }
85
+ &__title {
86
+ margin-top: 0.5rem !important;
98
87
  }
99
88
 
100
89
  &__close-button {
101
- position: absolute;
102
- top: 0;
103
- right: 0;
104
-
105
- @include breakpoints.tiny-screens-media-query {
106
- position: relative;
107
- }
90
+ align-self: flex-start;
108
91
  }
109
92
  }
110
93
 
package/lib/components/Drawer/styles.module.scss.d.ts CHANGED
@@ -12,7 +12,7 @@ export type Styles = {
12
12
  drawer__footer: string;
13
13
  drawer__header: string;
14
14
  'drawer__header__close-button': string;
15
- 'drawer__header--no-close-button': string;
15
+ drawer__header__title: string;
16
16
  drawer__overlay: string;
17
17
  };
18
18
 
package/lib/components/Dropdown/index.js CHANGED
@@ -18,7 +18,7 @@ import { t as ChevronDown_default } from "../../ChevronDown.js";
18
18
  import { t as ChevronUp_default } from "../../ChevronUp.js";
19
19
  import { t as PlusSmall_default } from "../../PlusSmall.js";
20
20
  import { t as Label_default } from "../../Label.js";
21
- import classNames from "classnames";
21
+ import cn from "classnames";
22
22
  import React, { useEffect, useId, useRef } from "react";
23
23
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
24
24
  import { clamp } from "motion/react";
@@ -81,14 +81,14 @@ const DropdownBase = (props) => {
81
81
  ...getResources(language),
82
82
  ...resources
83
83
  };
84
- const toggleClasses = classNames(styles.dropdown__toggle, {
84
+ const toggleClasses = cn(styles.dropdown__toggle, {
85
85
  [styles["dropdown__toggle--open"]]: isOpen && !disabled,
86
86
  [styles["dropdown__toggle--with-icon"]]: typeof svgIcon !== "undefined",
87
87
  [styles["dropdown__toggle--transparent"]]: variant === "transparent",
88
88
  [styles["dropdown__toggle--borderless"]]: variant === "borderless"
89
89
  });
90
- const contentClasses = classNames(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
91
- const listItemClasses = classNames(styles["dropdown__list-item"], { [styles["dropdown__list-item--single-select"]]: isSingleSelect });
90
+ const contentClasses = cn(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
91
+ const listItemClasses = cn(styles["dropdown__list-item"], { [styles["dropdown__list-item--single-select"]]: isSingleSelect });
92
92
  const { refs, floatingStyles } = useFloating({
93
93
  strategy: "fixed",
94
94
  placement: "bottom-start",
@@ -185,7 +185,7 @@ const DropdownBase = (props) => {
185
185
  const label = element.props.label;
186
186
  if (React.isValidElement(label) && isComponent(label, Label_default)) return React.cloneElement(element, {
187
187
  ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),
188
- label: React.cloneElement(label, { labelClassName: classNames(label.props?.labelClassName, styles["dropdown__multiselect-item"]) })
188
+ label: React.cloneElement(label, { labelClassName: cn(label.props?.labelClassName, styles["dropdown__multiselect-item"]) })
189
189
  });
190
190
  }
191
191
  return React.cloneElement(child, { ref: mergeRefs([element.props.ref, childrenRefList.current[index]]) });
package/lib/components/Dropdown/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["SingleSelect: React.FC<SingleSelectProps>","DropdownBase: React.FC<DropdownProps>","mergedResources: HNDesignsystemDropdown"],"sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/SingleSelect/SingleSelect.tsx","../../../src/components/Dropdown/Dropdown.tsx","../../../src/components/Dropdown/index.ts"],"sourcesContent":["import type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React from 'react';\n\nimport { SingleSelectContext } from './utils';\n\nexport type SingleSelectContextType = {\n name?: string;\n disabled?: boolean;\n required?: boolean;\n value?: string;\n onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n};\n\nexport interface SingleSelectProps {\n name?: string;\n disabled?: boolean;\n defaultValue?: string;\n onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n children: React.ReactNode;\n}\n\nexport const SingleSelect: React.FC<SingleSelectProps> = ({ name, disabled, defaultValue, onValueChange, children }) => {\n const [selected, setSelected] = React.useState<string | undefined>(defaultValue);\n\n const context = React.useMemo<SingleSelectContextType>(\n () => ({\n name,\n disabled,\n value: selected,\n onValueChange: (v, e): void => {\n setSelected(v);\n onValueChange?.(v, e);\n },\n }),\n [name, disabled, selected, onValueChange]\n );\n\n return <SingleSelectContext.Provider value={context}>{children}</SingleSelectContext.Provider>;\n};\n","import type { ComponentType } from 'react';\nimport React, { useEffect, useRef, useId } from 'react';\n\nimport { autoUpdate, offset, shift, size, useFloating, flip } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { clamp } from 'motion/react';\n\nimport type { SingleSelectItemProps } from './SingleSelect/SingleSelectItem';\nimport type { HNDesignsystemDropdown } from '../../resources/Resources';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { LabelProps } from '../Label';\n\nimport {\n AnalyticsId,\n IconSize,\n KeyboardEventKey,\n LanguageLocales,\n ZIndex,\n usePseudoClasses,\n useKeyboardEvent,\n useOutsideEvent,\n useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { SingleSelectItem } from './SingleSelect/SingleSelectItem';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox from '../Checkbox';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Label from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport { SingleSelect } from './SingleSelect/SingleSelect';\n\nimport styles from './styles.module.scss';\n\ntype DropdownVariants = 'fill' | 'transparent' | 'borderless';\n\nexport interface DropdownProps {\n /** Text on the trigger button that opens the dropdown */\n triggerText: string;\n /** Sets the dropdown content */\n children: React.ReactNode;\n /** Minimum width for the dropdown in pixels. Does not affect trigger button. */\n dropdownMinWidth?: number;\n /** Minimum width for the trigger in pixels. Does not apply for borderless variant */\n triggerMinWidth?: number;\n /** Disables rendring of the close button in the list */\n noCloseButton?: boolean;\n /** Called when dropdown is open/closed */\n onToggle?: (isOpen: boolean) => void;\n /** Whether the dropdown is open or not */\n open?: boolean;\n /** Makes the dropdown disabled */\n disabled?: boolean;\n /** Sets the data-testid attribute on the dropdown button */\n testId?: string;\n /** Overrides the default z-index of the DropDownContent */\n zIndex?: number;\n /** Resources for component */\n resources?: Partial<HNDesignsystemDropdown>;\n /** Adds an icon to the trigger */\n svgIcon?: SvgIcon | IconName;\n /** Sets the visual variant of the Dropdown */\n variant?: DropdownVariants;\n}\n\nexport const DropdownBase: React.FC<DropdownProps> = props => {\n const {\n triggerText,\n noCloseButton = false,\n onToggle,\n dropdownMinWidth,\n triggerMinWidth,\n open = false,\n children,\n testId,\n disabled,\n zIndex = ZIndex.PopOver,\n resources,\n svgIcon,\n variant = 'fill',\n } = props;\n\n const dropdownRef = useRef<HTMLDivElement>(null);\n const optionsRef = useRef<HTMLUListElement>(null);\n const childrenRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses<HTMLButtonElement | null>(buttonRef);\n const openedByKeyboard = useRef<boolean>(false);\n const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n const isMobile = useIsMobileBreakpoint();\n const triggerActualMinWidth = variant !== 'borderless' && typeof triggerMinWidth != 'undefined' ? `${triggerMinWidth}px` : 'auto';\n const triggerMinWidthLimit = isMobile ? 96 : 112;\n const dropdownFloatingPadding = 15;\n const maxWidth = isMobile ? 384 : 400;\n const maxHeight = isMobile ? 384 : 464;\n const toggleTextId = useId();\n const optionIdPrefix = useId();\n const contentId = useId();\n const leftIconProps = {\n className: styles['dropdown__left-icon'],\n size: IconSize.XSmall,\n isHovered: !disabled && isHovered,\n };\n\n const isSingleSelect = React.Children.toArray(children).every(\n child => React.isValidElement(child) && isComponent<SingleSelectItemProps>(child, SingleSelectItem)\n );\n const isMultiSelect = React.Children.toArray(children).every(\n child => React.isValidElement(child) && isComponent<CheckboxProps>(child, Checkbox)\n );\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n const mergedResources: HNDesignsystemDropdown = {\n ...defaultResources,\n ...resources,\n };\n\n const toggleClasses = classNames(styles.dropdown__toggle, {\n [styles['dropdown__toggle--open']]: isOpen && !disabled,\n [styles['dropdown__toggle--with-icon']]: typeof svgIcon !== 'undefined',\n [styles['dropdown__toggle--transparent']]: variant === 'transparent',\n [styles['dropdown__toggle--borderless']]: variant === 'borderless',\n });\n const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n const listItemClasses = classNames(styles['dropdown__list-item'], { [styles['dropdown__list-item--single-select']]: isSingleSelect });\n\n const { refs, floatingStyles } = useFloating({\n strategy: 'fixed',\n placement: 'bottom-start',\n middleware: [\n offset(8),\n // Hvis det ikke er plass på høyre side flipper vi dropdownlisten fra bottom-start til bottom-end\n flip({ mainAxis: false, fallbackPlacements: ['bottom-end'], padding: dropdownFloatingPadding }),\n // Shift fungerer som en fallback for flip og unngår at availableWidth ikke oppdaterer seg ved skjermbreddeendring\n shift({ padding: dropdownFloatingPadding }),\n // Hvis det ikke er plass på noen av sidene krymper vi bredden på listen med size\n size({\n padding: dropdownFloatingPadding,\n apply({ availableWidth, availableHeight, elements, rects }) {\n const triggerW = rects.reference.width;\n const minProp = typeof dropdownMinWidth !== 'undefined' ? clamp(0, maxWidth, dropdownMinWidth) : 0;\n const targetW = Math.max(triggerW, minProp);\n\n Object.assign(elements.floating.style, {\n maxWidth: `${Math.min(targetW, availableWidth)}px`,\n maxHeight: `${Math.min(maxHeight, availableHeight)}px`,\n overflowY: 'auto',\n overflowX: 'hidden',\n });\n },\n }),\n ],\n whileElementsMounted: isOpen ? autoUpdate : undefined,\n });\n\n const handleOpen = (isKeyboard: boolean): void => {\n openedByKeyboard.current = isKeyboard;\n toggleIsOpen();\n };\n\n const handleClose = (): void => {\n if (!isOpen) return;\n\n toggleIsOpen();\n buttonRef.current?.focus();\n };\n\n useEffect(() => {\n if (isOpen && openedByKeyboard.current) {\n const firstEnabled = childrenRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n firstEnabled?.current?.focus();\n openedByKeyboard.current = false;\n }\n }, [isOpen]);\n\n const focusByIndex = (nextIndex: number): void => {\n childrenRefList.current?.[nextIndex]?.current?.focus();\n };\n\n const isListNavKey = (key: string): boolean =>\n key === KeyboardEventKey.ArrowDown || key === KeyboardEventKey.ArrowUp || key === KeyboardEventKey.Home || key === KeyboardEventKey.End;\n\n const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n if (!childrenRefList.current) return;\n\n const key = event.key as KeyboardEventKey;\n\n if (key === KeyboardEventKey.Escape) {\n if (isOpen) {\n event.preventDefault();\n handleClose();\n }\n return;\n }\n\n if (!isOpen) {\n if (isListNavKey(key)) {\n event.preventDefault();\n handleOpen(true);\n }\n return;\n }\n\n if (!isListNavKey(key)) {\n return;\n }\n\n const index = childrenRefList.current.findIndex(x => x.current === (event.target as HTMLElement));\n let nextIndex = index;\n\n if (key === KeyboardEventKey.Home) {\n nextIndex = 0;\n } else if (key === KeyboardEventKey.End) {\n nextIndex = childrenRefList.current.length - 1;\n } else if (key === KeyboardEventKey.ArrowDown && index < childrenRefList.current.length - 1) {\n nextIndex = index + 1;\n } else if (key === KeyboardEventKey.ArrowUp && index > 0) {\n nextIndex = index - 1;\n }\n\n if (nextIndex !== -1) {\n event.preventDefault();\n focusByIndex(nextIndex);\n }\n };\n\n useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n KeyboardEventKey.ArrowDown,\n KeyboardEventKey.ArrowUp,\n KeyboardEventKey.End,\n KeyboardEventKey.Enter,\n KeyboardEventKey.Escape,\n KeyboardEventKey.Home,\n KeyboardEventKey.Space,\n ]);\n\n useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n const renderChildren = React.Children.map(children, (child, index) => {\n const element = child as React.ReactElement<{ ref?: React.Ref<HTMLElement | null> }>;\n\n return (\n <li className={listItemClasses} id={`${optionIdPrefix}-${index}`}>\n {React.isValidElement(element) && childrenRefList.current && childrenRefList.current[index]\n ? ((): React.ReactElement => {\n if (isMultiSelect && isComponent<CheckboxProps>(element, Checkbox)) {\n const label = element.props.label;\n if (React.isValidElement(label) && isComponent<LabelProps>(label, Label)) {\n return React.cloneElement(element, {\n ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),\n label: React.cloneElement(label, {\n labelClassName: classNames((label.props as LabelProps)?.labelClassName, styles['dropdown__multiselect-item']),\n }),\n });\n }\n }\n\n return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),\n });\n })()\n : child}\n </li>\n );\n });\n\n return (\n <div className={styles.dropdown} ref={dropdownRef}>\n <button\n type=\"button\"\n onClick={(): false | void => handleOpen(false)}\n className={toggleClasses}\n ref={mergeRefs([buttonRef, refs.setReference])}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Dropdown}\n disabled={disabled}\n aria-labelledby={toggleTextId}\n aria-haspopup={true}\n aria-controls={contentId}\n aria-expanded={isOpen}\n style={{\n width: triggerActualMinWidth,\n maxWidth: '100%',\n minWidth: `${triggerMinWidthLimit}px`,\n }}\n >\n {svgIcon && (\n <>\n {typeof svgIcon === 'string' ? (\n <LazyIcon {...leftIconProps} iconName={svgIcon} />\n ) : (\n <Icon {...leftIconProps} svgIcon={svgIcon} />\n )}\n </>\n )}\n <span id={toggleTextId} className={styles.dropdown__toggle__text}>\n {triggerText}\n </span>\n <Icon\n svgIcon={!isSingleSelect ? PlusSmall : isOpen ? ChevronUp : ChevronDown}\n className={styles['dropdown__right-icon']}\n isHovered={!disabled && isHovered}\n size={IconSize.XSmall}\n />\n </button>\n <div\n key={dropdownMinWidth ?? 'auto'}\n id={contentId}\n className={contentClasses}\n ref={refs.setFloating}\n style={{\n ...floatingStyles,\n zIndex: zIndex,\n }}\n >\n <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={toggleTextId} tabIndex={-1} ref={optionsRef}>\n {isSingleSelect && <SingleSelect onValueChange={() => handleClose()}>{renderChildren}</SingleSelect>}\n {isMultiSelect && renderChildren}\n </ul>\n {!isSingleSelect && !noCloseButton && (\n <div className={styles.dropdown__close}>\n <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport interface DropdownCompound extends React.FC<DropdownProps> {\n SingleSelectItem: ComponentType<SingleSelectItemProps>;\n}\nconst Dropdown = DropdownBase as DropdownCompound;\nDropdown.SingleSelectItem = SingleSelectItem;\nDropdownBase.displayName = 'Dropdown';\n\nexport default Dropdown;\n","import Dropdown from './Dropdown';\nexport * from './Dropdown';\nexport default Dropdown;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["SingleSelect: React.FC<SingleSelectProps>","DropdownBase: React.FC<DropdownProps>","mergedResources: HNDesignsystemDropdown"],"sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/SingleSelect/SingleSelect.tsx","../../../src/components/Dropdown/Dropdown.tsx","../../../src/components/Dropdown/index.ts"],"sourcesContent":["import type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React from 'react';\n\nimport { SingleSelectContext } from './utils';\n\nexport type SingleSelectContextType = {\n name?: string;\n disabled?: boolean;\n required?: boolean;\n value?: string;\n onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n};\n\nexport interface SingleSelectProps {\n name?: string;\n disabled?: boolean;\n defaultValue?: string;\n onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n children: React.ReactNode;\n}\n\nexport const SingleSelect: React.FC<SingleSelectProps> = ({ name, disabled, defaultValue, onValueChange, children }) => {\n const [selected, setSelected] = React.useState<string | undefined>(defaultValue);\n\n const context = React.useMemo<SingleSelectContextType>(\n () => ({\n name,\n disabled,\n value: selected,\n onValueChange: (v, e): void => {\n setSelected(v);\n onValueChange?.(v, e);\n },\n }),\n [name, disabled, selected, onValueChange]\n );\n\n return <SingleSelectContext.Provider value={context}>{children}</SingleSelectContext.Provider>;\n};\n","import type { ComponentType } from 'react';\nimport React, { useEffect, useRef, useId } from 'react';\n\nimport { autoUpdate, offset, shift, size, useFloating, flip } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { clamp } from 'motion/react';\n\nimport type { SingleSelectItemProps } from './SingleSelect/SingleSelectItem';\nimport type { HNDesignsystemDropdown } from '../../resources/Resources';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { LabelProps } from '../Label';\n\nimport {\n AnalyticsId,\n IconSize,\n KeyboardEventKey,\n LanguageLocales,\n ZIndex,\n usePseudoClasses,\n useKeyboardEvent,\n useOutsideEvent,\n useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { SingleSelectItem } from './SingleSelect/SingleSelectItem';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox from '../Checkbox';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Label from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport { SingleSelect } from './SingleSelect/SingleSelect';\n\nimport styles from './styles.module.scss';\n\ntype DropdownVariants = 'fill' | 'transparent' | 'borderless';\n\nexport interface DropdownProps {\n /** Text on the trigger button that opens the dropdown */\n triggerText: string;\n /** Sets the dropdown content */\n children: React.ReactNode;\n /** Minimum width for the dropdown in pixels. Does not affect trigger button. */\n dropdownMinWidth?: number;\n /** Minimum width for the trigger in pixels. Does not apply for borderless variant */\n triggerMinWidth?: number;\n /** Disables rendring of the close button in the list */\n noCloseButton?: boolean;\n /** Called when dropdown is open/closed */\n onToggle?: (isOpen: boolean) => void;\n /** Whether the dropdown is open or not */\n open?: boolean;\n /** Makes the dropdown disabled */\n disabled?: boolean;\n /** Sets the data-testid attribute on the dropdown button */\n testId?: string;\n /** Overrides the default z-index of the DropDownContent */\n zIndex?: number;\n /** Resources for component */\n resources?: Partial<HNDesignsystemDropdown>;\n /** Adds an icon to the trigger */\n svgIcon?: SvgIcon | IconName;\n /** Sets the visual variant of the Dropdown */\n variant?: DropdownVariants;\n}\n\nexport const DropdownBase: React.FC<DropdownProps> = props => {\n const {\n triggerText,\n noCloseButton = false,\n onToggle,\n dropdownMinWidth,\n triggerMinWidth,\n open = false,\n children,\n testId,\n disabled,\n zIndex = ZIndex.PopOver,\n resources,\n svgIcon,\n variant = 'fill',\n } = props;\n\n const dropdownRef = useRef<HTMLDivElement>(null);\n const optionsRef = useRef<HTMLUListElement>(null);\n const childrenRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n const buttonRef = React.useRef<HTMLButtonElement>(null);\n const { isHovered } = usePseudoClasses<HTMLButtonElement | null>(buttonRef);\n const openedByKeyboard = useRef<boolean>(false);\n const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n const isMobile = useIsMobileBreakpoint();\n const triggerActualMinWidth = variant !== 'borderless' && typeof triggerMinWidth != 'undefined' ? `${triggerMinWidth}px` : 'auto';\n const triggerMinWidthLimit = isMobile ? 96 : 112;\n const dropdownFloatingPadding = 15;\n const maxWidth = isMobile ? 384 : 400;\n const maxHeight = isMobile ? 384 : 464;\n const toggleTextId = useId();\n const optionIdPrefix = useId();\n const contentId = useId();\n const leftIconProps = {\n className: styles['dropdown__left-icon'],\n size: IconSize.XSmall,\n isHovered: !disabled && isHovered,\n };\n\n const isSingleSelect = React.Children.toArray(children).every(\n child => React.isValidElement(child) && isComponent<SingleSelectItemProps>(child, SingleSelectItem)\n );\n const isMultiSelect = React.Children.toArray(children).every(\n child => React.isValidElement(child) && isComponent<CheckboxProps>(child, Checkbox)\n );\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n const mergedResources: HNDesignsystemDropdown = {\n ...defaultResources,\n ...resources,\n };\n\n const toggleClasses = classNames(styles.dropdown__toggle, {\n [styles['dropdown__toggle--open']]: isOpen && !disabled,\n [styles['dropdown__toggle--with-icon']]: typeof svgIcon !== 'undefined',\n [styles['dropdown__toggle--transparent']]: variant === 'transparent',\n [styles['dropdown__toggle--borderless']]: variant === 'borderless',\n });\n const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n const listItemClasses = classNames(styles['dropdown__list-item'], { [styles['dropdown__list-item--single-select']]: isSingleSelect });\n\n const { refs, floatingStyles } = useFloating({\n strategy: 'fixed',\n placement: 'bottom-start',\n middleware: [\n offset(8),\n // Hvis det ikke er plass på høyre side flipper vi dropdownlisten fra bottom-start til bottom-end\n flip({ mainAxis: false, fallbackPlacements: ['bottom-end'], padding: dropdownFloatingPadding }),\n // Shift fungerer som en fallback for flip og unngår at availableWidth ikke oppdaterer seg ved skjermbreddeendring\n shift({ padding: dropdownFloatingPadding }),\n // Hvis det ikke er plass på noen av sidene krymper vi bredden på listen med size\n size({\n padding: dropdownFloatingPadding,\n apply({ availableWidth, availableHeight, elements, rects }) {\n const triggerW = rects.reference.width;\n const minProp = typeof dropdownMinWidth !== 'undefined' ? clamp(0, maxWidth, dropdownMinWidth) : 0;\n const targetW = Math.max(triggerW, minProp);\n\n Object.assign(elements.floating.style, {\n maxWidth: `${Math.min(targetW, availableWidth)}px`,\n maxHeight: `${Math.min(maxHeight, availableHeight)}px`,\n overflowY: 'auto',\n overflowX: 'hidden',\n });\n },\n }),\n ],\n whileElementsMounted: isOpen ? autoUpdate : undefined,\n });\n\n const handleOpen = (isKeyboard: boolean): void => {\n openedByKeyboard.current = isKeyboard;\n toggleIsOpen();\n };\n\n const handleClose = (): void => {\n if (!isOpen) return;\n\n toggleIsOpen();\n buttonRef.current?.focus();\n };\n\n useEffect(() => {\n if (isOpen && openedByKeyboard.current) {\n const firstEnabled = childrenRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n firstEnabled?.current?.focus();\n openedByKeyboard.current = false;\n }\n }, [isOpen]);\n\n const focusByIndex = (nextIndex: number): void => {\n childrenRefList.current?.[nextIndex]?.current?.focus();\n };\n\n const isListNavKey = (key: string): boolean =>\n key === KeyboardEventKey.ArrowDown || key === KeyboardEventKey.ArrowUp || key === KeyboardEventKey.Home || key === KeyboardEventKey.End;\n\n const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n if (!childrenRefList.current) return;\n\n const key = event.key as KeyboardEventKey;\n\n if (key === KeyboardEventKey.Escape) {\n if (isOpen) {\n event.preventDefault();\n handleClose();\n }\n return;\n }\n\n if (!isOpen) {\n if (isListNavKey(key)) {\n event.preventDefault();\n handleOpen(true);\n }\n return;\n }\n\n if (!isListNavKey(key)) {\n return;\n }\n\n const index = childrenRefList.current.findIndex(x => x.current === (event.target as HTMLElement));\n let nextIndex = index;\n\n if (key === KeyboardEventKey.Home) {\n nextIndex = 0;\n } else if (key === KeyboardEventKey.End) {\n nextIndex = childrenRefList.current.length - 1;\n } else if (key === KeyboardEventKey.ArrowDown && index < childrenRefList.current.length - 1) {\n nextIndex = index + 1;\n } else if (key === KeyboardEventKey.ArrowUp && index > 0) {\n nextIndex = index - 1;\n }\n\n if (nextIndex !== -1) {\n event.preventDefault();\n focusByIndex(nextIndex);\n }\n };\n\n useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n KeyboardEventKey.ArrowDown,\n KeyboardEventKey.ArrowUp,\n KeyboardEventKey.End,\n KeyboardEventKey.Enter,\n KeyboardEventKey.Escape,\n KeyboardEventKey.Home,\n KeyboardEventKey.Space,\n ]);\n\n useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n const renderChildren = React.Children.map(children, (child, index) => {\n const element = child as React.ReactElement<{ ref?: React.Ref<HTMLElement | null> }>;\n\n return (\n <li className={listItemClasses} id={`${optionIdPrefix}-${index}`}>\n {React.isValidElement(element) && childrenRefList.current && childrenRefList.current[index]\n ? ((): React.ReactElement => {\n if (isMultiSelect && isComponent<CheckboxProps>(element, Checkbox)) {\n const label = element.props.label;\n if (React.isValidElement(label) && isComponent<LabelProps>(label, Label)) {\n return React.cloneElement(element, {\n ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),\n label: React.cloneElement(label, {\n labelClassName: classNames((label.props as LabelProps)?.labelClassName, styles['dropdown__multiselect-item']),\n }),\n });\n }\n }\n\n return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),\n });\n })()\n : child}\n </li>\n );\n });\n\n return (\n <div className={styles.dropdown} ref={dropdownRef}>\n <button\n type=\"button\"\n onClick={(): false | void => handleOpen(false)}\n className={toggleClasses}\n ref={mergeRefs([buttonRef, refs.setReference])}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Dropdown}\n disabled={disabled}\n aria-labelledby={toggleTextId}\n aria-haspopup={true}\n aria-controls={contentId}\n aria-expanded={isOpen}\n style={{\n width: triggerActualMinWidth,\n maxWidth: '100%',\n minWidth: `${triggerMinWidthLimit}px`,\n }}\n >\n {svgIcon && (\n <>\n {typeof svgIcon === 'string' ? (\n <LazyIcon {...leftIconProps} iconName={svgIcon} />\n ) : (\n <Icon {...leftIconProps} svgIcon={svgIcon} />\n )}\n </>\n )}\n <span id={toggleTextId} className={styles.dropdown__toggle__text}>\n {triggerText}\n </span>\n <Icon\n svgIcon={!isSingleSelect ? PlusSmall : isOpen ? ChevronUp : ChevronDown}\n className={styles['dropdown__right-icon']}\n isHovered={!disabled && isHovered}\n size={IconSize.XSmall}\n />\n </button>\n <div\n key={dropdownMinWidth ?? 'auto'}\n id={contentId}\n className={contentClasses}\n ref={refs.setFloating}\n style={{\n ...floatingStyles,\n zIndex: zIndex,\n }}\n >\n <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={toggleTextId} tabIndex={-1} ref={optionsRef}>\n {isSingleSelect && <SingleSelect onValueChange={() => handleClose()}>{renderChildren}</SingleSelect>}\n {isMultiSelect && renderChildren}\n </ul>\n {!isSingleSelect && !noCloseButton && (\n <div className={styles.dropdown__close}>\n <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport interface DropdownCompound extends React.FC<DropdownProps> {\n SingleSelectItem: ComponentType<SingleSelectItemProps>;\n}\nconst Dropdown = DropdownBase as DropdownCompound;\nDropdown.SingleSelectItem = SingleSelectItem;\nDropdownBase.displayName = 'Dropdown';\n\nexport default Dropdown;\n","import Dropdown from './Dropdown';\nexport * from './Dropdown';\nexport default Dropdown;\n"],"mappings":"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"}
package/lib/components/DropdownOld/index.js CHANGED
@@ -10,7 +10,7 @@ import { t as useKeyboardEvent } from "../../useKeyboardEvent.js";
10
10
  import { t as useOutsideEvent } from "../../useOutsideEvent.js";
11
11
  import { n as HN_Designsystem_Dropdown_en_GB_default, t as HN_Designsystem_Dropdown_nb_NO_default } from "../../HN.Designsystem.Dropdown.nb-NO.js";
12
12
  import { t as PlusSmall_default } from "../../PlusSmall.js";
13
- import classNames from "classnames";
13
+ import cn from "classnames";
14
14
  import React, { useEffect, useId, useRef } from "react";
15
15
  import { jsx, jsxs } from "react/jsx-runtime";
16
16
  import styles from "./styles.module.scss";
@@ -94,7 +94,7 @@ var DropdownOld = (props) => {
94
94
  KeyboardEventKey.Space
95
95
  ]);
96
96
  useOutsideEvent(dropdownRef, () => isOpen && handleClose());
97
- const toggleClasses = classNames(styles.dropdown__toggle, !disabled && {
97
+ const toggleClasses = cn(styles.dropdown__toggle, !disabled && {
98
98
  [styles["dropdown__toggle--on-white"]]: onColor === DropdownOldOnColor.onwhite,
99
99
  [styles["dropdown__toggle--on-grey"]]: onColor === DropdownOldOnColor.ongrey,
100
100
  [styles["dropdown__toggle--on-blueberry"]]: onColor === DropdownOldOnColor.onblueberry,
@@ -103,7 +103,7 @@ var DropdownOld = (props) => {
103
103
  [styles["dropdown__toggle--fluid"]]: fluid,
104
104
  [styles["dropdown__toggle--open"]]: isOpen
105
105
  });
106
- const contentClasses = classNames(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
106
+ const contentClasses = cn(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
107
107
  const renderChildren = React.Children.map(children, (child, index) => {
108
108
  const element = child;
109
109
  return /* @__PURE__ */ jsx("li", {
package/lib/components/DropdownOld/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["DropdownOld: React.FC<DropdownOldProps>","mergedResources: HNDesignsystemDropdown"],"sources":["../../../src/components/DropdownOld/constants.ts","../../../src/components/DropdownOld/resourceHelper.ts","../../../src/components/DropdownOld/DropdownOld.tsx","../../../src/components/DropdownOld/index.ts"],"sourcesContent":["export enum DropdownOldOnColor {\n onwhite = 'onwhite',\n ongrey = 'ongrey',\n onblueberry = 'onblueberry',\n oncherry = 'oncherry',\n}\n","import type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useEffect, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { DropdownOldOnColor } from './constants';\nimport {\n AnalyticsId,\n IconSize,\n KeyboardEventKey,\n LanguageLocales,\n ZIndex,\n theme,\n usePseudoClasses,\n useKeyboardEvent,\n useOutsideEvent,\n useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport interface DropdownOldProps {\n /** Label for dropdown. Visible for screen readers */\n label: string;\n /** Text on the trigger button that opens the dropdown */\n placeholder: string;\n /** Sets the dropdown content */\n children: React.ReactNode;\n /** @deprecated Close button text */\n closeText?: string;\n /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n dropdownMinWidth?: number;\n /** No close button */\n noCloseButton?: boolean;\n /** Called when dropdown is open/closed */\n onToggle?: (isOpen: boolean) => void;\n /** Whether the dropdown is open or not */\n open?: boolean;\n /** Changes the visuals of the dropdown */\n onColor?: keyof typeof DropdownOldOnColor;\n /** Makes the background of the trigger transparent */\n transparent?: boolean;\n /** Makes the width of the full component adjust to its parent */\n fluid?: boolean;\n /** Makes the dropdown disabled */\n disabled?: boolean;\n /** Sets the data-testid attribute on the dropdown button */\n testId?: string;\n /** Overrides the default z-index of the DropDownContent */\n zIndex?: number;\n /** Resources for component */\n resources?: Partial<HNDesignsystemDropdown>;\n}\n\nconst DropdownOld: React.FC<DropdownOldProps> = props => {\n const {\n label,\n placeholder,\n noCloseButton = false,\n onToggle,\n dropdownMinWidth,\n open = false,\n children,\n onColor = DropdownOldOnColor.onwhite,\n transparent = false,\n fluid = false,\n testId,\n disabled,\n zIndex = ZIndex.PopOver,\n resources,\n } = props;\n\n const dropdownRef = useRef<HTMLDivElement>(null);\n const optionsRef = useRef<HTMLUListElement>(null);\n const { refObject: buttonRef, isHovered } = usePseudoClasses<HTMLButtonElement>();\n const openedByKeyboard = useRef<boolean>(false);\n const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n const labelId = useId();\n const toggleLabelId = useId();\n const optionIdPrefix = useId();\n const contentId = useId();\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemDropdown = {\n ...defaultResources,\n ...resources,\n closeText: props.closeText ?? resources?.closeText ?? defaultResources.closeText,\n };\n\n const handleOpen = (isKeyboard: boolean): void => {\n openedByKeyboard.current = isKeyboard;\n toggleIsOpen();\n };\n\n const handleClose = (): void => {\n toggleIsOpen();\n buttonRef.current?.focus();\n };\n\n useEffect(() => {\n if (isOpen && openedByKeyboard.current) {\n const firstEnabled = inputRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n firstEnabled?.current?.focus();\n openedByKeyboard.current = false;\n }\n }, [isOpen]);\n\n const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n if (!inputRefList.current) {\n return;\n }\n\n if (event.key === KeyboardEventKey.Escape) {\n if (isOpen) handleClose();\n return;\n }\n\n if (!isOpen) {\n handleOpen(true);\n event.preventDefault();\n return;\n }\n\n const index = inputRefList.current.findIndex(x => x.current === event.target);\n let nextIndex = index;\n\n if (event.key === KeyboardEventKey.Home) {\n nextIndex = 0;\n } else if (event.key === KeyboardEventKey.End) {\n nextIndex = inputRefList.current.length - 1;\n } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n nextIndex = index + 1;\n } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n nextIndex = index - 1;\n } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n nextIndex = index;\n }\n\n if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n event.preventDefault();\n\n inputRefList.current[nextIndex].current?.focus();\n }\n };\n\n useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n KeyboardEventKey.ArrowDown,\n KeyboardEventKey.ArrowUp,\n KeyboardEventKey.End,\n KeyboardEventKey.Enter,\n KeyboardEventKey.Escape,\n KeyboardEventKey.Home,\n KeyboardEventKey.Space,\n ]);\n\n useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n const toggleClasses = classNames(\n styles.dropdown__toggle,\n !disabled && {\n [styles['dropdown__toggle--on-white']]: onColor === DropdownOldOnColor.onwhite,\n [styles['dropdown__toggle--on-grey']]: onColor === DropdownOldOnColor.ongrey,\n [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOldOnColor.onblueberry,\n [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOldOnColor.oncherry,\n [styles['dropdown__toggle--transparent']]: transparent,\n [styles['dropdown__toggle--fluid']]: fluid,\n [styles['dropdown__toggle--open']]: isOpen,\n }\n );\n\n const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n const renderChildren = React.Children.map(children, (child, index) => {\n const element = child as React.ReactElement<{ children?: React.ReactNode; ref?: React.Ref<HTMLElement | null> }>;\n\n return (\n <li className={styles.dropdown__input} id={`${optionIdPrefix}-${index}`}>\n {React.isValidElement(element) && inputRefList.current && inputRefList.current[index]\n ? React.cloneElement(element, {\n ref: mergeRefs([element.props.ref, inputRefList.current[index]]),\n })\n : child}\n </li>\n );\n });\n\n return (\n <div className={styles.dropdown} ref={dropdownRef}>\n <span id={labelId} className={styles.dropdown__label}>\n {label}\n </span>\n <button\n type=\"button\"\n onClick={(): false | void => handleOpen(false)}\n className={toggleClasses}\n ref={buttonRef}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Dropdown}\n disabled={disabled}\n aria-labelledby={toggleLabelId}\n aria-haspopup={true}\n aria-controls={contentId}\n aria-expanded={isOpen}\n >\n <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n {placeholder}\n </span>\n <Icon\n color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n svgIcon={PlusSmall}\n className={styles.dropdown__icon}\n isHovered={!disabled && isHovered}\n size={IconSize.XSmall}\n />\n </button>\n <div\n id={contentId}\n className={contentClasses}\n style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}\n >\n <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={labelId} tabIndex={-1} ref={optionsRef}>\n {renderChildren}\n </ul>\n {!noCloseButton && (\n <div className={styles.dropdown__close}>\n <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport default DropdownOld;\n","import DropdownOld from './DropdownOld';\nexport { DropdownOldOnColor } from './constants';\nexport * from './DropdownOld';\nexport default DropdownOld;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["DropdownOld: React.FC<DropdownOldProps>","mergedResources: HNDesignsystemDropdown"],"sources":["../../../src/components/DropdownOld/constants.ts","../../../src/components/DropdownOld/resourceHelper.ts","../../../src/components/DropdownOld/DropdownOld.tsx","../../../src/components/DropdownOld/index.ts"],"sourcesContent":["export enum DropdownOldOnColor {\n onwhite = 'onwhite',\n ongrey = 'ongrey',\n onblueberry = 'onblueberry',\n oncherry = 'oncherry',\n}\n","import type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n switch (language) {\n case LanguageLocales.ENGLISH:\n return enGB;\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React, { useEffect, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { DropdownOldOnColor } from './constants';\nimport {\n AnalyticsId,\n IconSize,\n KeyboardEventKey,\n LanguageLocales,\n ZIndex,\n theme,\n usePseudoClasses,\n useKeyboardEvent,\n useOutsideEvent,\n useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport interface DropdownOldProps {\n /** Label for dropdown. Visible for screen readers */\n label: string;\n /** Text on the trigger button that opens the dropdown */\n placeholder: string;\n /** Sets the dropdown content */\n children: React.ReactNode;\n /** @deprecated Close button text */\n closeText?: string;\n /** Minimum width for the dropdown in pixels. Does not affect trigger button */\n dropdownMinWidth?: number;\n /** No close button */\n noCloseButton?: boolean;\n /** Called when dropdown is open/closed */\n onToggle?: (isOpen: boolean) => void;\n /** Whether the dropdown is open or not */\n open?: boolean;\n /** Changes the visuals of the dropdown */\n onColor?: keyof typeof DropdownOldOnColor;\n /** Makes the background of the trigger transparent */\n transparent?: boolean;\n /** Makes the width of the full component adjust to its parent */\n fluid?: boolean;\n /** Makes the dropdown disabled */\n disabled?: boolean;\n /** Sets the data-testid attribute on the dropdown button */\n testId?: string;\n /** Overrides the default z-index of the DropDownContent */\n zIndex?: number;\n /** Resources for component */\n resources?: Partial<HNDesignsystemDropdown>;\n}\n\nconst DropdownOld: React.FC<DropdownOldProps> = props => {\n const {\n label,\n placeholder,\n noCloseButton = false,\n onToggle,\n dropdownMinWidth,\n open = false,\n children,\n onColor = DropdownOldOnColor.onwhite,\n transparent = false,\n fluid = false,\n testId,\n disabled,\n zIndex = ZIndex.PopOver,\n resources,\n } = props;\n\n const dropdownRef = useRef<HTMLDivElement>(null);\n const optionsRef = useRef<HTMLUListElement>(null);\n const { refObject: buttonRef, isHovered } = usePseudoClasses<HTMLButtonElement>();\n const openedByKeyboard = useRef<boolean>(false);\n const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n const labelId = useId();\n const toggleLabelId = useId();\n const optionIdPrefix = useId();\n const contentId = useId();\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemDropdown = {\n ...defaultResources,\n ...resources,\n closeText: props.closeText ?? resources?.closeText ?? defaultResources.closeText,\n };\n\n const handleOpen = (isKeyboard: boolean): void => {\n openedByKeyboard.current = isKeyboard;\n toggleIsOpen();\n };\n\n const handleClose = (): void => {\n toggleIsOpen();\n buttonRef.current?.focus();\n };\n\n useEffect(() => {\n if (isOpen && openedByKeyboard.current) {\n const firstEnabled = inputRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n firstEnabled?.current?.focus();\n openedByKeyboard.current = false;\n }\n }, [isOpen]);\n\n const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n if (!inputRefList.current) {\n return;\n }\n\n if (event.key === KeyboardEventKey.Escape) {\n if (isOpen) handleClose();\n return;\n }\n\n if (!isOpen) {\n handleOpen(true);\n event.preventDefault();\n return;\n }\n\n const index = inputRefList.current.findIndex(x => x.current === event.target);\n let nextIndex = index;\n\n if (event.key === KeyboardEventKey.Home) {\n nextIndex = 0;\n } else if (event.key === KeyboardEventKey.End) {\n nextIndex = inputRefList.current.length - 1;\n } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n nextIndex = index + 1;\n } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n nextIndex = index - 1;\n } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n nextIndex = index;\n }\n\n if (nextIndex !== -1 && event.key !== KeyboardEventKey.Space) {\n event.preventDefault();\n\n inputRefList.current[nextIndex].current?.focus();\n }\n };\n\n useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n KeyboardEventKey.ArrowDown,\n KeyboardEventKey.ArrowUp,\n KeyboardEventKey.End,\n KeyboardEventKey.Enter,\n KeyboardEventKey.Escape,\n KeyboardEventKey.Home,\n KeyboardEventKey.Space,\n ]);\n\n useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n const toggleClasses = classNames(\n styles.dropdown__toggle,\n !disabled && {\n [styles['dropdown__toggle--on-white']]: onColor === DropdownOldOnColor.onwhite,\n [styles['dropdown__toggle--on-grey']]: onColor === DropdownOldOnColor.ongrey,\n [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOldOnColor.onblueberry,\n [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOldOnColor.oncherry,\n [styles['dropdown__toggle--transparent']]: transparent,\n [styles['dropdown__toggle--fluid']]: fluid,\n [styles['dropdown__toggle--open']]: isOpen,\n }\n );\n\n const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n const renderChildren = React.Children.map(children, (child, index) => {\n const element = child as React.ReactElement<{ children?: React.ReactNode; ref?: React.Ref<HTMLElement | null> }>;\n\n return (\n <li className={styles.dropdown__input} id={`${optionIdPrefix}-${index}`}>\n {React.isValidElement(element) && inputRefList.current && inputRefList.current[index]\n ? React.cloneElement(element, {\n ref: mergeRefs([element.props.ref, inputRefList.current[index]]),\n })\n : child}\n </li>\n );\n });\n\n return (\n <div className={styles.dropdown} ref={dropdownRef}>\n <span id={labelId} className={styles.dropdown__label}>\n {label}\n </span>\n <button\n type=\"button\"\n onClick={(): false | void => handleOpen(false)}\n className={toggleClasses}\n ref={buttonRef}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Dropdown}\n disabled={disabled}\n aria-labelledby={toggleLabelId}\n aria-haspopup={true}\n aria-controls={contentId}\n aria-expanded={isOpen}\n >\n <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n {placeholder}\n </span>\n <Icon\n color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n svgIcon={PlusSmall}\n className={styles.dropdown__icon}\n isHovered={!disabled && isHovered}\n size={IconSize.XSmall}\n />\n </button>\n <div\n id={contentId}\n className={contentClasses}\n style={{ width: fluid ? '100%' : `auto`, minWidth: dropdownMinWidth ?? 'auto', zIndex: zIndex }}\n >\n <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={labelId} tabIndex={-1} ref={optionsRef}>\n {renderChildren}\n </ul>\n {!noCloseButton && (\n <div className={styles.dropdown__close}>\n <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport default DropdownOld;\n","import DropdownOld from './DropdownOld';\nexport { DropdownOldOnColor } from './constants';\nexport * from './DropdownOld';\nexport default DropdownOld;\n"],"mappings":"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"}
package/lib/components/EmptyState/index.js CHANGED
@@ -3,7 +3,7 @@ import { t as Icon_default } from "../../Icon.js";
3
3
  import { n as useBreakpoint, t as Breakpoint } from "../../useBreakpoint.js";
4
4
  import { t as Title_default } from "../../Title2.js";
5
5
  import { t as EmptyBox_default } from "../../EmptyBox.js";
6
- import classNames from "classnames";
6
+ import cn from "classnames";
7
7
  import { jsx, jsxs } from "react/jsx-runtime";
8
8
  import styles from "./styles.module.scss";
9
9
  var EmptyBoxBeeMedium = ({ color, svgProperties }) => {
@@ -206,7 +206,7 @@ var EmptyBoxBeeSmall = ({ color, svgProperties }) => {
206
206
  var EmptyBoxBeeSmall_default = EmptyBoxBeeSmall;
207
207
  var EmptyState = (props) => {
208
208
  const { onColor = "neutral", titleHtmlMarkup, testId, type = "dashed", size = "normal", title, additionalText } = props;
209
- const classes = classNames(styles.emptystate, {
209
+ const classes = cn(styles.emptystate, {
210
210
  [styles["emptystate--dashed"]]: type === "dashed",
211
211
  [styles["emptystate--blank"]]: type === "blank",
212
212
  [styles["emptystate--compact"]]: size === "compact"