@dnanpm/styleguide 4.0.9 → 4.0.10

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 (415) hide show
  1. package/build/cjs/components/Accordion/Accordion.js +66 -54
  2. package/build/cjs/components/AccordionItem/AccordionItem.js +94 -73
  3. package/build/cjs/components/AmountSelector/AmountSelector.js +121 -134
  4. package/build/cjs/components/Box/Box.js +38 -13
  5. package/build/cjs/components/Breadcrumb/Breadcrumb.js +73 -71
  6. package/build/cjs/components/Button/Button.js +131 -127
  7. package/build/cjs/components/ButtonArrow/ButtonArrow.js +47 -49
  8. package/build/cjs/components/ButtonCard/ButtonCard.js +97 -112
  9. package/build/cjs/components/ButtonClose/ButtonClose.js +24 -18
  10. package/build/cjs/components/ButtonIcon/ButtonIcon.js +103 -106
  11. package/build/cjs/components/ButtonPrimary/ButtonPrimary.d.ts +43 -2
  12. package/build/cjs/components/ButtonPrimary/ButtonPrimary.js +7 -35
  13. package/build/cjs/components/ButtonSecondary/ButtonSecondary.d.ts +43 -2
  14. package/build/cjs/components/ButtonSecondary/ButtonSecondary.js +7 -35
  15. package/build/cjs/components/Carousel/Carousel.d.ts +8 -2
  16. package/build/cjs/components/Carousel/Carousel.js +315 -346
  17. package/build/cjs/components/Checkbox/Checkbox.js +49 -108
  18. package/build/cjs/components/Chip/Chip.js +40 -34
  19. package/build/cjs/components/DateTimePicker/DateTimePicker.js +198 -334
  20. package/build/cjs/components/Divider/Divider.js +29 -15
  21. package/build/cjs/components/DnaLogo/DnaLogo.js +87 -51
  22. package/build/cjs/components/Drawer/Drawer.js +172 -167
  23. package/build/cjs/components/EmptyState/EmptyState.js +24 -12
  24. package/build/cjs/components/EnergyLabel/EnergyLabel.js +77 -73
  25. package/build/cjs/components/Expander/Expander.js +43 -38
  26. package/build/cjs/components/Floater/Floater.js +36 -14
  27. package/build/cjs/components/Footer/Components/FooterComponents.d.ts +4 -2
  28. package/build/cjs/components/Footer/Components/FooterComponents.js +305 -346
  29. package/build/cjs/components/Footer/Footer.js +51 -80
  30. package/build/cjs/components/Footer/context/FooterContext.js +9 -9
  31. package/build/cjs/components/Hero/Hero.js +101 -149
  32. package/build/cjs/components/Icon/Icon.js +41 -22
  33. package/build/cjs/components/Icons/Small/hlArrowBackSmall.js +12 -4
  34. package/build/cjs/components/Icons/Small/hlArrowForwardSmall.js +12 -4
  35. package/build/cjs/components/Icons/Small/hlArrowUnderSmall.js +12 -4
  36. package/build/cjs/components/Icons/Small/hlCalendarSmall.js +12 -4
  37. package/build/cjs/components/Icons/Small/hlChevronDownSmall.js +12 -4
  38. package/build/cjs/components/Icons/Small/hlChevronLeftSmall.js +12 -4
  39. package/build/cjs/components/Icons/Small/hlChevronRightSmall.js +12 -4
  40. package/build/cjs/components/Icons/Small/hlChevronUpSmall.js +12 -4
  41. package/build/cjs/components/Icons/Small/hlClockSmall.js +14 -5
  42. package/build/cjs/components/Icons/Small/hlDownloadSmall.js +18 -6
  43. package/build/cjs/components/Icons/Small/hlExternalSmall.js +12 -4
  44. package/build/cjs/components/Icons/Small/hlUploadSmall.js +18 -6
  45. package/build/cjs/components/Icons/Social/facebook.js +13 -4
  46. package/build/cjs/components/Icons/Social/instagram.js +13 -4
  47. package/build/cjs/components/Icons/Social/linkedin.js +13 -4
  48. package/build/cjs/components/Icons/Social/tiktok.js +12 -4
  49. package/build/cjs/components/Icons/Social/twitter.js +13 -4
  50. package/build/cjs/components/Icons/Social/youtube.js +12 -4
  51. package/build/cjs/components/Icons/hl404.js +12 -4
  52. package/build/cjs/components/Icons/hl4gSim.js +12 -4
  53. package/build/cjs/components/Icons/hl5gSim.js +12 -4
  54. package/build/cjs/components/Icons/hlBattery.js +16 -6
  55. package/build/cjs/components/Icons/hlBell.js +12 -4
  56. package/build/cjs/components/Icons/hlCableTVCard.js +12 -4
  57. package/build/cjs/components/Icons/hlCalendar.js +56 -15
  58. package/build/cjs/components/Icons/hlCall.js +12 -4
  59. package/build/cjs/components/Icons/hlCameraBack.js +18 -6
  60. package/build/cjs/components/Icons/hlCameraFront.js +14 -5
  61. package/build/cjs/components/Icons/hlCart.js +16 -6
  62. package/build/cjs/components/Icons/hlCartEmpty.js +16 -6
  63. package/build/cjs/components/Icons/hlChat.js +24 -7
  64. package/build/cjs/components/Icons/hlCheck.js +12 -4
  65. package/build/cjs/components/Icons/hlChevronDown.js +12 -4
  66. package/build/cjs/components/Icons/hlChevronLeft.js +12 -4
  67. package/build/cjs/components/Icons/hlChevronRight.js +12 -4
  68. package/build/cjs/components/Icons/hlChevronUp.js +12 -4
  69. package/build/cjs/components/Icons/hlCompensation.js +12 -4
  70. package/build/cjs/components/Icons/hlCookie.js +12 -4
  71. package/build/cjs/components/Icons/hlCopy.js +14 -5
  72. package/build/cjs/components/Icons/hlCoupon.js +16 -6
  73. package/build/cjs/components/Icons/hlDelivery.js +14 -4
  74. package/build/cjs/components/Icons/hlDigiturva.js +14 -4
  75. package/build/cjs/components/Icons/hlDisplaySize.js +19 -6
  76. package/build/cjs/components/Icons/hlDocument.js +14 -5
  77. package/build/cjs/components/Icons/hlDownload.js +18 -6
  78. package/build/cjs/components/Icons/hlEnvelope.js +12 -4
  79. package/build/cjs/components/Icons/hlError.js +22 -6
  80. package/build/cjs/components/Icons/hlEuro.js +12 -4
  81. package/build/cjs/components/Icons/hlExclamationMark.js +12 -4
  82. package/build/cjs/components/Icons/hlExpand.js +12 -4
  83. package/build/cjs/components/Icons/hlExternal.js +12 -4
  84. package/build/cjs/components/Icons/hlEyeClosed.js +12 -4
  85. package/build/cjs/components/Icons/hlEyeOpen.js +14 -5
  86. package/build/cjs/components/Icons/hlFaceId.js +12 -4
  87. package/build/cjs/components/Icons/hlFastDelivery.js +12 -4
  88. package/build/cjs/components/Icons/hlFingerprint.js +20 -8
  89. package/build/cjs/components/Icons/hlGlobe.js +12 -4
  90. package/build/cjs/components/Icons/hlHeadphones.js +12 -4
  91. package/build/cjs/components/Icons/hlHeadset.js +18 -6
  92. package/build/cjs/components/Icons/hlHeart.js +12 -4
  93. package/build/cjs/components/Icons/hlHome.js +12 -4
  94. package/build/cjs/components/Icons/hlHub.js +14 -5
  95. package/build/cjs/components/Icons/hlImage.js +12 -4
  96. package/build/cjs/components/Icons/hlInfo.js +18 -6
  97. package/build/cjs/components/Icons/hlInstallment.js +14 -5
  98. package/build/cjs/components/Icons/hlIotSim.js +14 -5
  99. package/build/cjs/components/Icons/hlLaptop.js +13 -4
  100. package/build/cjs/components/Icons/hlLink.js +16 -5
  101. package/build/cjs/components/Icons/hlLiveVideo.js +12 -4
  102. package/build/cjs/components/Icons/hlLock.js +18 -6
  103. package/build/cjs/components/Icons/hlMagnifyingGlass.js +14 -5
  104. package/build/cjs/components/Icons/hlMarker.js +14 -5
  105. package/build/cjs/components/Icons/hlMemory.js +14 -5
  106. package/build/cjs/components/Icons/hlMenu.js +12 -4
  107. package/build/cjs/components/Icons/hlMinimize.js +12 -4
  108. package/build/cjs/components/Icons/hlMinus.js +12 -4
  109. package/build/cjs/components/Icons/hlMobileData.js +12 -4
  110. package/build/cjs/components/Icons/hlMobilePayment.js +19 -6
  111. package/build/cjs/components/Icons/hlModem.js +26 -8
  112. package/build/cjs/components/Icons/hlMore.js +22 -6
  113. package/build/cjs/components/Icons/hlOs.js +14 -5
  114. package/build/cjs/components/Icons/hlPackage.js +12 -4
  115. package/build/cjs/components/Icons/hlPaperclip.js +12 -4
  116. package/build/cjs/components/Icons/hlPaytime.js +12 -4
  117. package/build/cjs/components/Icons/hlPen.js +12 -4
  118. package/build/cjs/components/Icons/hlPerson.js +12 -4
  119. package/build/cjs/components/Icons/hlPhone.js +17 -5
  120. package/build/cjs/components/Icons/hlPlaylist.js +13 -4
  121. package/build/cjs/components/Icons/hlPlus.js +14 -5
  122. package/build/cjs/components/Icons/hlPrepaid.js +12 -4
  123. package/build/cjs/components/Icons/hlProcessor.js +14 -5
  124. package/build/cjs/components/Icons/hlServices.js +12 -4
  125. package/build/cjs/components/Icons/hlSettings.js +12 -4
  126. package/build/cjs/components/Icons/hlShield.js +14 -5
  127. package/build/cjs/components/Icons/hlSim.js +14 -5
  128. package/build/cjs/components/Icons/hlSimSimple.js +18 -6
  129. package/build/cjs/components/Icons/hlSmile.js +22 -7
  130. package/build/cjs/components/Icons/hlSpeechBubble.js +14 -5
  131. package/build/cjs/components/Icons/hlSquaretrade.js +13 -4
  132. package/build/cjs/components/Icons/hlStar.js +12 -4
  133. package/build/cjs/components/Icons/hlStarFilled.js +12 -4
  134. package/build/cjs/components/Icons/hlTrash.js +14 -5
  135. package/build/cjs/components/Icons/hlTv.js +12 -4
  136. package/build/cjs/components/Icons/hlUnlock.js +14 -6
  137. package/build/cjs/components/Icons/hlUpload.js +18 -6
  138. package/build/cjs/components/Icons/hlWarning.js +18 -6
  139. package/build/cjs/components/Icons/hlWifi.js +18 -6
  140. package/build/cjs/components/Icons/hlWrench.js +12 -4
  141. package/build/cjs/components/Icons/hlX.js +12 -4
  142. package/build/cjs/components/InfoDialog/InfoDialog.js +31 -46
  143. package/build/cjs/components/Input/Input.js +143 -159
  144. package/build/cjs/components/Label/Label.js +22 -22
  145. package/build/cjs/components/LabelText/LabelText.js +24 -17
  146. package/build/cjs/components/MainHeaderNavigation/ChildComponents/BusinessMenu.js +29 -44
  147. package/build/cjs/components/MainHeaderNavigation/ChildComponents/DesktopMenu.js +167 -153
  148. package/build/cjs/components/MainHeaderNavigation/ChildComponents/LanguageSelector.js +34 -20
  149. package/build/cjs/components/MainHeaderNavigation/ChildComponents/LinkModifier.js +50 -32
  150. package/build/cjs/components/MainHeaderNavigation/ChildComponents/LoginTooltip.js +17 -5
  151. package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts +5 -2
  152. package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js +100 -95
  153. package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts +6 -2
  154. package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js +4 -58
  155. package/build/cjs/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js +20 -4
  156. package/build/cjs/components/MainHeaderNavigation/ChildComponents/MobileMenu.js +187 -159
  157. package/build/cjs/components/MainHeaderNavigation/ChildComponents/PageSearch.js +16 -5
  158. package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.js +305 -272
  159. package/build/cjs/components/MainHeaderNavigation/context/NavContext.js +61 -49
  160. package/build/cjs/components/MainHeaderNavigation/globalNavStyles.d.ts +31 -16
  161. package/build/cjs/components/MainHeaderNavigation/globalNavStyles.js +39 -172
  162. package/build/cjs/components/Modal/Modal.js +127 -145
  163. package/build/cjs/components/Notification/Notification.js +74 -54
  164. package/build/cjs/components/NotificationBadge/NotificationBadge.js +29 -32
  165. package/build/cjs/components/Overlay/Overlay.js +70 -68
  166. package/build/cjs/components/Pill/Pill.js +91 -82
  167. package/build/cjs/components/PillGroup/PillGroup.js +50 -33
  168. package/build/cjs/components/PixelLoader/PixelLoader.js +37 -34
  169. package/build/cjs/components/PriorityNavigation/PriorityNavigation.js +281 -303
  170. package/build/cjs/components/PriorityNavigationItem/PriorityNavigationItem.js +27 -49
  171. package/build/cjs/components/ProgressIndicator/ProgressIndicator.js +140 -109
  172. package/build/cjs/components/RadioButton/RadioButton.js +91 -114
  173. package/build/cjs/components/ReadMore/ReadMore.js +86 -69
  174. package/build/cjs/components/Search/Search.js +52 -64
  175. package/build/cjs/components/Selectbox/Selectbox.js +279 -94
  176. package/build/cjs/components/Skeleton/Skeleton.js +69 -56
  177. package/build/cjs/components/Switch/Switch.js +62 -76
  178. package/build/cjs/components/Tab/Tab.js +55 -53
  179. package/build/cjs/components/Tabs/Tabs.js +93 -71
  180. package/build/cjs/components/Textarea/Textarea.js +76 -73
  181. package/build/cjs/components/Toaster/Toaster.js +59 -44
  182. package/build/cjs/components/Tooltip/Tooltip.js +74 -87
  183. package/build/cjs/hooks/useCloseOutsideOrElementClicked.js +23 -21
  184. package/build/cjs/hooks/useDebounce.js +9 -9
  185. package/build/cjs/hooks/useDocHeight.js +13 -13
  186. package/build/cjs/hooks/useOutsideClick.js +10 -10
  187. package/build/cjs/hooks/useResizeObserver.js +37 -24
  188. package/build/cjs/hooks/useScrollPosition.js +55 -54
  189. package/build/cjs/hooks/useWindowSize.js +20 -20
  190. package/build/cjs/themes/globalStyles.js +4 -4
  191. package/build/cjs/themes/gridTheme.js +1 -1
  192. package/build/cjs/themes/theme.js +12 -12
  193. package/build/cjs/themes/themeComponents/base.js +9 -8
  194. package/build/cjs/themes/themeComponents/breakpoints.js +6 -6
  195. package/build/cjs/themes/themeComponents/color.js +76 -74
  196. package/build/cjs/themes/themeComponents/fontFamily.js +3 -3
  197. package/build/cjs/themes/themeComponents/fontSize.js +31 -15
  198. package/build/cjs/themes/themeComponents/fontWeight.js +16 -16
  199. package/build/cjs/themes/themeComponents/forms.js +3 -2
  200. package/build/cjs/themes/themeComponents/layout.js +27 -27
  201. package/build/cjs/themes/themeComponents/lineHeight.js +32 -16
  202. package/build/cjs/themes/themeComponents/navigation.js +13 -13
  203. package/build/cjs/themes/themeComponents/radius.js +26 -26
  204. package/build/cjs/utils/common.js +15 -19
  205. package/build/cjs/utils/createStyled.d.ts +154 -134
  206. package/build/cjs/utils/createStyled.js +16 -2
  207. package/build/cjs/utils/styledUtils.js +2 -6
  208. package/build/es/components/Accordion/Accordion.js +66 -54
  209. package/build/es/components/AccordionItem/AccordionItem.js +94 -73
  210. package/build/es/components/AmountSelector/AmountSelector.js +121 -134
  211. package/build/es/components/Box/Box.js +38 -13
  212. package/build/es/components/Breadcrumb/Breadcrumb.js +73 -71
  213. package/build/es/components/Button/Button.js +131 -127
  214. package/build/es/components/ButtonArrow/ButtonArrow.js +47 -49
  215. package/build/es/components/ButtonCard/ButtonCard.js +97 -112
  216. package/build/es/components/ButtonClose/ButtonClose.js +24 -18
  217. package/build/es/components/ButtonIcon/ButtonIcon.js +103 -106
  218. package/build/es/components/ButtonPrimary/ButtonPrimary.d.ts +43 -2
  219. package/build/es/components/ButtonPrimary/ButtonPrimary.js +7 -35
  220. package/build/es/components/ButtonSecondary/ButtonSecondary.d.ts +43 -2
  221. package/build/es/components/ButtonSecondary/ButtonSecondary.js +7 -35
  222. package/build/es/components/Carousel/Carousel.d.ts +8 -2
  223. package/build/es/components/Carousel/Carousel.js +315 -346
  224. package/build/es/components/Checkbox/Checkbox.js +49 -108
  225. package/build/es/components/Chip/Chip.js +40 -34
  226. package/build/es/components/DateTimePicker/DateTimePicker.js +198 -334
  227. package/build/es/components/Divider/Divider.js +29 -15
  228. package/build/es/components/DnaLogo/DnaLogo.js +87 -51
  229. package/build/es/components/Drawer/Drawer.js +172 -167
  230. package/build/es/components/EmptyState/EmptyState.js +24 -12
  231. package/build/es/components/EnergyLabel/EnergyLabel.js +77 -73
  232. package/build/es/components/Expander/Expander.js +43 -38
  233. package/build/es/components/Floater/Floater.js +36 -14
  234. package/build/es/components/Footer/Components/FooterComponents.d.ts +4 -2
  235. package/build/es/components/Footer/Components/FooterComponents.js +305 -346
  236. package/build/es/components/Footer/Footer.js +51 -80
  237. package/build/es/components/Footer/context/FooterContext.js +9 -9
  238. package/build/es/components/Hero/Hero.js +101 -149
  239. package/build/es/components/Icon/Icon.js +41 -22
  240. package/build/es/components/Icons/Small/hlArrowBackSmall.js +12 -4
  241. package/build/es/components/Icons/Small/hlArrowForwardSmall.js +12 -4
  242. package/build/es/components/Icons/Small/hlArrowUnderSmall.js +12 -4
  243. package/build/es/components/Icons/Small/hlCalendarSmall.js +12 -4
  244. package/build/es/components/Icons/Small/hlChevronDownSmall.js +12 -4
  245. package/build/es/components/Icons/Small/hlChevronLeftSmall.js +12 -4
  246. package/build/es/components/Icons/Small/hlChevronRightSmall.js +12 -4
  247. package/build/es/components/Icons/Small/hlChevronUpSmall.js +12 -4
  248. package/build/es/components/Icons/Small/hlClockSmall.js +14 -5
  249. package/build/es/components/Icons/Small/hlDownloadSmall.js +18 -6
  250. package/build/es/components/Icons/Small/hlExternalSmall.js +12 -4
  251. package/build/es/components/Icons/Small/hlUploadSmall.js +18 -6
  252. package/build/es/components/Icons/Social/facebook.js +13 -4
  253. package/build/es/components/Icons/Social/instagram.js +13 -4
  254. package/build/es/components/Icons/Social/linkedin.js +13 -4
  255. package/build/es/components/Icons/Social/tiktok.js +12 -4
  256. package/build/es/components/Icons/Social/twitter.js +13 -4
  257. package/build/es/components/Icons/Social/youtube.js +12 -4
  258. package/build/es/components/Icons/hl404.js +12 -4
  259. package/build/es/components/Icons/hl4gSim.js +12 -4
  260. package/build/es/components/Icons/hl5gSim.js +12 -4
  261. package/build/es/components/Icons/hlBattery.js +16 -6
  262. package/build/es/components/Icons/hlBell.js +12 -4
  263. package/build/es/components/Icons/hlCableTVCard.js +12 -4
  264. package/build/es/components/Icons/hlCalendar.js +56 -15
  265. package/build/es/components/Icons/hlCall.js +12 -4
  266. package/build/es/components/Icons/hlCameraBack.js +18 -6
  267. package/build/es/components/Icons/hlCameraFront.js +14 -5
  268. package/build/es/components/Icons/hlCart.js +16 -6
  269. package/build/es/components/Icons/hlCartEmpty.js +16 -6
  270. package/build/es/components/Icons/hlChat.js +24 -7
  271. package/build/es/components/Icons/hlCheck.js +12 -4
  272. package/build/es/components/Icons/hlChevronDown.js +12 -4
  273. package/build/es/components/Icons/hlChevronLeft.js +12 -4
  274. package/build/es/components/Icons/hlChevronRight.js +12 -4
  275. package/build/es/components/Icons/hlChevronUp.js +12 -4
  276. package/build/es/components/Icons/hlCompensation.js +12 -4
  277. package/build/es/components/Icons/hlCookie.js +12 -4
  278. package/build/es/components/Icons/hlCopy.js +14 -5
  279. package/build/es/components/Icons/hlCoupon.js +16 -6
  280. package/build/es/components/Icons/hlDelivery.js +14 -4
  281. package/build/es/components/Icons/hlDigiturva.js +14 -4
  282. package/build/es/components/Icons/hlDisplaySize.js +19 -6
  283. package/build/es/components/Icons/hlDocument.js +14 -5
  284. package/build/es/components/Icons/hlDownload.js +18 -6
  285. package/build/es/components/Icons/hlEnvelope.js +12 -4
  286. package/build/es/components/Icons/hlError.js +22 -6
  287. package/build/es/components/Icons/hlEuro.js +12 -4
  288. package/build/es/components/Icons/hlExclamationMark.js +12 -4
  289. package/build/es/components/Icons/hlExpand.js +12 -4
  290. package/build/es/components/Icons/hlExternal.js +12 -4
  291. package/build/es/components/Icons/hlEyeClosed.js +12 -4
  292. package/build/es/components/Icons/hlEyeOpen.js +14 -5
  293. package/build/es/components/Icons/hlFaceId.js +12 -4
  294. package/build/es/components/Icons/hlFastDelivery.js +12 -4
  295. package/build/es/components/Icons/hlFingerprint.js +20 -8
  296. package/build/es/components/Icons/hlGlobe.js +12 -4
  297. package/build/es/components/Icons/hlHeadphones.js +12 -4
  298. package/build/es/components/Icons/hlHeadset.js +18 -6
  299. package/build/es/components/Icons/hlHeart.js +12 -4
  300. package/build/es/components/Icons/hlHome.js +12 -4
  301. package/build/es/components/Icons/hlHub.js +14 -5
  302. package/build/es/components/Icons/hlImage.js +12 -4
  303. package/build/es/components/Icons/hlInfo.js +18 -6
  304. package/build/es/components/Icons/hlInstallment.js +14 -5
  305. package/build/es/components/Icons/hlIotSim.js +14 -5
  306. package/build/es/components/Icons/hlLaptop.js +13 -4
  307. package/build/es/components/Icons/hlLink.js +16 -5
  308. package/build/es/components/Icons/hlLiveVideo.js +12 -4
  309. package/build/es/components/Icons/hlLock.js +18 -6
  310. package/build/es/components/Icons/hlMagnifyingGlass.js +14 -5
  311. package/build/es/components/Icons/hlMarker.js +14 -5
  312. package/build/es/components/Icons/hlMemory.js +14 -5
  313. package/build/es/components/Icons/hlMenu.js +12 -4
  314. package/build/es/components/Icons/hlMinimize.js +12 -4
  315. package/build/es/components/Icons/hlMinus.js +12 -4
  316. package/build/es/components/Icons/hlMobileData.js +12 -4
  317. package/build/es/components/Icons/hlMobilePayment.js +19 -6
  318. package/build/es/components/Icons/hlModem.js +26 -8
  319. package/build/es/components/Icons/hlMore.js +22 -6
  320. package/build/es/components/Icons/hlOs.js +14 -5
  321. package/build/es/components/Icons/hlPackage.js +12 -4
  322. package/build/es/components/Icons/hlPaperclip.js +12 -4
  323. package/build/es/components/Icons/hlPaytime.js +12 -4
  324. package/build/es/components/Icons/hlPen.js +12 -4
  325. package/build/es/components/Icons/hlPerson.js +12 -4
  326. package/build/es/components/Icons/hlPhone.js +17 -5
  327. package/build/es/components/Icons/hlPlaylist.js +13 -4
  328. package/build/es/components/Icons/hlPlus.js +14 -5
  329. package/build/es/components/Icons/hlPrepaid.js +12 -4
  330. package/build/es/components/Icons/hlProcessor.js +14 -5
  331. package/build/es/components/Icons/hlServices.js +12 -4
  332. package/build/es/components/Icons/hlSettings.js +12 -4
  333. package/build/es/components/Icons/hlShield.js +14 -5
  334. package/build/es/components/Icons/hlSim.js +14 -5
  335. package/build/es/components/Icons/hlSimSimple.js +18 -6
  336. package/build/es/components/Icons/hlSmile.js +22 -7
  337. package/build/es/components/Icons/hlSpeechBubble.js +14 -5
  338. package/build/es/components/Icons/hlSquaretrade.js +13 -4
  339. package/build/es/components/Icons/hlStar.js +12 -4
  340. package/build/es/components/Icons/hlStarFilled.js +12 -4
  341. package/build/es/components/Icons/hlTrash.js +14 -5
  342. package/build/es/components/Icons/hlTv.js +12 -4
  343. package/build/es/components/Icons/hlUnlock.js +14 -6
  344. package/build/es/components/Icons/hlUpload.js +18 -6
  345. package/build/es/components/Icons/hlWarning.js +18 -6
  346. package/build/es/components/Icons/hlWifi.js +18 -6
  347. package/build/es/components/Icons/hlWrench.js +12 -4
  348. package/build/es/components/Icons/hlX.js +12 -4
  349. package/build/es/components/InfoDialog/InfoDialog.js +31 -46
  350. package/build/es/components/Input/Input.js +143 -159
  351. package/build/es/components/Label/Label.js +22 -22
  352. package/build/es/components/LabelText/LabelText.js +24 -17
  353. package/build/es/components/MainHeaderNavigation/ChildComponents/BusinessMenu.js +29 -44
  354. package/build/es/components/MainHeaderNavigation/ChildComponents/DesktopMenu.js +167 -153
  355. package/build/es/components/MainHeaderNavigation/ChildComponents/LanguageSelector.js +34 -20
  356. package/build/es/components/MainHeaderNavigation/ChildComponents/LinkModifier.js +50 -32
  357. package/build/es/components/MainHeaderNavigation/ChildComponents/LoginTooltip.js +17 -5
  358. package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.d.ts +5 -2
  359. package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js +100 -95
  360. package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts +6 -2
  361. package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js +4 -58
  362. package/build/es/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js +20 -4
  363. package/build/es/components/MainHeaderNavigation/ChildComponents/MobileMenu.js +187 -159
  364. package/build/es/components/MainHeaderNavigation/ChildComponents/PageSearch.js +16 -5
  365. package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.js +305 -272
  366. package/build/es/components/MainHeaderNavigation/context/NavContext.js +61 -49
  367. package/build/es/components/MainHeaderNavigation/globalNavStyles.d.ts +31 -16
  368. package/build/es/components/MainHeaderNavigation/globalNavStyles.js +39 -172
  369. package/build/es/components/Modal/Modal.js +127 -145
  370. package/build/es/components/Notification/Notification.js +74 -54
  371. package/build/es/components/NotificationBadge/NotificationBadge.js +29 -32
  372. package/build/es/components/Overlay/Overlay.js +70 -68
  373. package/build/es/components/Pill/Pill.js +91 -82
  374. package/build/es/components/PillGroup/PillGroup.js +50 -33
  375. package/build/es/components/PixelLoader/PixelLoader.js +37 -34
  376. package/build/es/components/PriorityNavigation/PriorityNavigation.js +281 -303
  377. package/build/es/components/PriorityNavigationItem/PriorityNavigationItem.js +27 -49
  378. package/build/es/components/ProgressIndicator/ProgressIndicator.js +140 -109
  379. package/build/es/components/RadioButton/RadioButton.js +91 -114
  380. package/build/es/components/ReadMore/ReadMore.js +86 -69
  381. package/build/es/components/Search/Search.js +52 -64
  382. package/build/es/components/Selectbox/Selectbox.js +279 -94
  383. package/build/es/components/Skeleton/Skeleton.js +69 -56
  384. package/build/es/components/Switch/Switch.js +62 -76
  385. package/build/es/components/Tab/Tab.js +55 -53
  386. package/build/es/components/Tabs/Tabs.js +93 -71
  387. package/build/es/components/Textarea/Textarea.js +76 -73
  388. package/build/es/components/Toaster/Toaster.js +59 -44
  389. package/build/es/components/Tooltip/Tooltip.js +74 -87
  390. package/build/es/hooks/useCloseOutsideOrElementClicked.js +23 -21
  391. package/build/es/hooks/useDebounce.js +9 -9
  392. package/build/es/hooks/useDocHeight.js +13 -13
  393. package/build/es/hooks/useOutsideClick.js +10 -10
  394. package/build/es/hooks/useResizeObserver.js +37 -24
  395. package/build/es/hooks/useScrollPosition.js +55 -54
  396. package/build/es/hooks/useWindowSize.js +20 -20
  397. package/build/es/themes/globalStyles.js +4 -4
  398. package/build/es/themes/gridTheme.js +1 -1
  399. package/build/es/themes/theme.js +12 -12
  400. package/build/es/themes/themeComponents/base.js +9 -8
  401. package/build/es/themes/themeComponents/breakpoints.js +6 -6
  402. package/build/es/themes/themeComponents/color.js +76 -74
  403. package/build/es/themes/themeComponents/fontFamily.js +3 -3
  404. package/build/es/themes/themeComponents/fontSize.js +31 -15
  405. package/build/es/themes/themeComponents/fontWeight.js +16 -16
  406. package/build/es/themes/themeComponents/forms.js +3 -2
  407. package/build/es/themes/themeComponents/layout.js +27 -27
  408. package/build/es/themes/themeComponents/lineHeight.js +32 -16
  409. package/build/es/themes/themeComponents/navigation.js +13 -13
  410. package/build/es/themes/themeComponents/radius.js +26 -26
  411. package/build/es/utils/common.js +15 -19
  412. package/build/es/utils/createStyled.d.ts +154 -134
  413. package/build/es/utils/createStyled.js +16 -2
  414. package/build/es/utils/styledUtils.js +2 -6
  415. package/package.json +15 -13
@@ -13,361 +13,320 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
 
14
14
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
 
16
- const linkHoverStyles = styledComponents.css `
17
- &:hover,
18
- &:focus,
19
- &:active {
20
- text-decoration: underline;
21
- text-decoration-thickness: from-font;
22
- }
23
- `;
24
- const LinksListEl = styledComponents.styled.li `
25
- a {
26
- ${linkHoverStyles}
27
- }
28
- button,
29
- button:focus {
30
- border: 0;
31
- text-underline-offset: 0.2em;
32
- ${linkHoverStyles}
33
- }
34
- `;
35
- const BaseContainer = styledComponents.styled.div `
36
- display: grid;
37
- padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
38
- gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3)};
39
- grid-template-columns: repeat(1, minmax(0, 1fr));
40
- max-width: ${theme.default.layout.content.containerMaxWidth.wide}px;
41
- margin-left: auto;
42
- margin-right: auto;
43
-
44
- @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
45
- grid-template-columns: repeat(3, minmax(0, 1fr));
46
- padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
47
- }
48
- `;
49
- const CategoryLinks = styledComponents.styled.ul `
50
- display: ${({ $active }) => ($active ? 'flex' : 'none')};
51
- transition:
52
- all 0.3s ease-in-out,
53
- padding 0s linear ${({ $active }) => ($active ? '0s' : '0.3s')};
54
- max-height: ${({ $active }) => ($active ? '500' : '0')}px;
55
- flex-direction: column;
56
- gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
57
- `;
58
- const CategoryHeader = styledComponents.styled.button `
59
- display: flex;
60
- text-align: left;
61
- gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
62
- width: 100%;
63
- border: 0;
64
- margin: 0;
65
- padding: 0;
66
- color: ${theme.default.color.text.white};
67
- background: transparent;
68
- justify-content: space-between;
69
- &:focus-visible {
70
- outline: 1px solid transparent;
71
- box-shadow:
72
- 0px 0px 0px 2px ${theme.default.color.focus.light},
73
- 0px 0px 0px 4px ${theme.default.color.focus.dark};
74
- ${theme.default.radius.s};
75
- }
76
- `;
77
- const CategoryName = styledComponents.styled.h2 `
78
- font-size: ${theme.default.fontSize.h4};
79
- line-height: ${theme.default.lineHeight.h4};
80
- margin: 0;
81
- `;
82
- const CategoryWrapper = styledComponents.styled.div `
83
- ${CategoryLinks} {
84
- margin-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
85
- margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
86
- }
87
-
88
- svg {
89
- transition: transform 0.2s ease-in;
90
- transform: ${({ $active }) => ($active && 'rotate(180deg)') || 'rotate(0deg)'};
91
- }
92
- `;
93
- const CategoryContainer = styledComponents.styled(BaseContainer) `
94
- @media (max-width: ${({ $collapseSize }) => $collapseSize}px) {
95
- gap: 0;
96
- padding: 0;
97
- padding-top: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
98
-
99
- > div {
100
- border-bottom: 1px solid ${theme.default.color.default.white};
101
- padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.7)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)}
102
- ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.2)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
103
- }
104
- }
105
- `;
106
- const LangLinksContainer = styledComponents.styled.div `
107
- display: flex;
108
- gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.4)};
109
- justify-content: center;
110
- `;
111
- const LangLink = styledComponents.styled.a `
112
- background: ${({ $isActive }) => $isActive ? theme.default.color.background.white.default : 'transparent'};
113
- color: ${({ $isActive }) => ($isActive ? theme.default.color.text.plum : theme.default.color.text.white)};
114
- &:hover,
115
- &:active,
116
- &:focus {
117
- color: ${({ $isActive }) => $isActive
118
- ? theme.default.color.text.plum
119
- : theme.default.color.text.white + theme.default.color.transparency.T80};
120
- }
121
- }
122
- `;
123
- const TopContainer = styledComponents.styled(BaseContainer) `
124
- h2 {
125
- margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
126
- }
127
- ul {
128
- display: flex;
129
- flex-direction: column;
130
- gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
131
- padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)} 0;
132
- }
133
- a {
134
- display: inline-flex;
135
- align-items: center;
136
- gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.8)};
137
- font-weight: ${theme.default.fontWeight.bold};
138
- }
139
- > div > svg {
140
- margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
141
- }
142
- `;
143
- const AppSection = styledComponents.styled.div `
144
- text-align: center;
145
-
146
- img {
147
- max-width: 100%;
148
- }
149
- `;
150
- const AppList = styledComponents.styled.div `
151
- display: flex;
152
- gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
153
- justify-content: center;
154
- a {
155
- display: block;
156
- width: 142px;
157
- }
158
- `;
159
- const BottomContainer = styledComponents.styled(BaseContainer) `
160
- display: flex;
161
- flex-direction: column;
162
- gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3)};
163
-
164
- a {
165
- font-weight: ${theme.default.fontWeight.medium};
166
- }
167
-
168
- ${LangLinksContainer} {
169
- ${LangLink} {
170
- display: flex;
171
- align-items: center;
172
- justify-content: center;
173
- width: 32px;
174
- height: 32px;
175
- border-radius: ${theme.default.radius.circle};
176
- transition: all 0.2s ease;
177
- &:hover,
178
- &:active,
179
- &:focus {
180
- text-decoration: none;
181
- }
182
- }
183
- }
184
-
185
- @media (min-width: ${({ $collapseSize }) => $collapseSize + 1}px) {
186
- flex-direction: row;
187
- align-items: flex-start;
188
- justify-content: space-between;
189
- position: relative;
190
-
191
- &:before {
192
- content: '';
193
- display: block;
194
- position: absolute;
195
- top: 0;
196
- left: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4)};
197
- width: calc(100% - ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 8)});
198
- border-top: 1px solid ${theme.default.color.default.white};
199
- }
200
-
201
- ${AppSection} {
202
- text-align: left;
203
- width: 142px;
204
- flex: 0 0 auto;
205
-
206
- p {
207
- margin-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)};
208
- }
209
-
210
- ${AppList} {
211
- flex-direction: column;
212
- }
213
- }
214
- }
215
- `;
216
- const BottomCenter = styledComponents.styled.div `
217
- display: flex;
218
- flex-direction: column;
219
- gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3)};
220
- align-items: center;
221
- max-width: 520px;
222
- margin: 0 auto;
223
- font-size: ${theme.default.fontSize.s};
224
- `;
225
- const SocialMediaLinksContainer = styledComponents.styled.div `
226
- white-space: nowrap;
227
- text-align: center;
228
- a {
229
- display: inline-block;
230
- margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
231
- }
232
- `;
233
- const GeneralInformationContainer = styledComponents.styled.div `
234
- text-align: center;
235
- display: flex;
236
- gap: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5)};
237
- flex-wrap: wrap;
238
- justify-content: center;
239
-
240
- a {
241
- ${linkHoverStyles}
242
- }
243
- `;
16
+ const linkHoverStyles = styledComponents.css(["&:hover,&:focus,&:active{text-decoration:underline;text-decoration-thickness:from-font;}"]);
17
+ const LinksListEl = styledComponents.styled.li.withConfig({
18
+ displayName: "FooterComponents__LinksListEl",
19
+ componentId: "sc-10hh8e5-0"
20
+ })(["a{", "}button,button:focus{border:0;text-underline-offset:0.2em;", "}"], linkHoverStyles, linkHoverStyles);
21
+ const BaseContainer = styledComponents.styled.div.withConfig({
22
+ displayName: "FooterComponents__BaseContainer",
23
+ componentId: "sc-10hh8e5-1"
24
+ })(["display:grid;padding:", ";gap:", ";grid-template-columns:repeat(1,minmax(0,1fr));max-width:", "px;margin-left:auto;margin-right:auto;@media (min-width:", "px){grid-template-columns:repeat(3,minmax(0,1fr));padding:", ";}"], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2), styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3), theme.default.layout.content.containerMaxWidth.wide, ({
25
+ $collapseSize
26
+ }) => $collapseSize + 1, styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4));
27
+ const CategoryLinks = styledComponents.styled.ul.withConfig({
28
+ displayName: "FooterComponents__CategoryLinks",
29
+ componentId: "sc-10hh8e5-2"
30
+ })(["display:", ";transition:all 0.3s ease-in-out,padding 0s linear ", ";max-height:", "px;flex-direction:column;gap:", ";"], ({
31
+ $active
32
+ }) => $active ? 'flex' : 'none', ({
33
+ $active
34
+ }) => $active ? '0s' : '0.3s', ({
35
+ $active
36
+ }) => $active ? '500' : '0', styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1));
37
+ const CategoryHeader = styledComponents.styled.button.withConfig({
38
+ displayName: "FooterComponents__CategoryHeader",
39
+ componentId: "sc-10hh8e5-3"
40
+ })(["display:flex;text-align:left;gap:", ";width:100%;border:0;margin:0;padding:0;color:", ";background:transparent;justify-content:space-between;&:focus-visible{outline:1px solid transparent;box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";", ";}"], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2), theme.default.color.text.white, theme.default.color.focus.light, theme.default.color.focus.dark, theme.default.radius.s);
41
+ const CategoryName = styledComponents.styled.h2.withConfig({
42
+ displayName: "FooterComponents__CategoryName",
43
+ componentId: "sc-10hh8e5-4"
44
+ })(["font-size:", ";line-height:", ";margin:0;"], theme.default.fontSize.h4, theme.default.lineHeight.h4);
45
+ const CategoryWrapper = styledComponents.styled.div.withConfig({
46
+ displayName: "FooterComponents__CategoryWrapper",
47
+ componentId: "sc-10hh8e5-5"
48
+ })(["", "{margin-top:", ";margin-bottom:", ";}svg{transition:transform 0.2s ease-in;transform:", ";}"], CategoryLinks, styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2), styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1), ({
49
+ $active
50
+ }) => $active && 'rotate(180deg)' || 'rotate(0deg)');
51
+ const CategoryContainer = styledComponents.styled(BaseContainer).withConfig({
52
+ displayName: "FooterComponents__CategoryContainer",
53
+ componentId: "sc-10hh8e5-6"
54
+ })(["@media (max-width:", "px){gap:0;padding:0;padding-top:", ";> div{border-bottom:1px solid ", ";padding:", " ", " ", " ", ";}}"], ({
55
+ $collapseSize
56
+ }) => $collapseSize, styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1), theme.default.color.default.white, styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.7), styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2), styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2.2), styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2));
57
+ const LangLinksContainer = styledComponents.styled.div.withConfig({
58
+ displayName: "FooterComponents__LangLinksContainer",
59
+ componentId: "sc-10hh8e5-7"
60
+ })(["display:flex;gap:", ";justify-content:center;"], styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.4));
61
+ const LangLink = styledComponents.styled.a.withConfig({
62
+ displayName: "FooterComponents__LangLink",
63
+ componentId: "sc-10hh8e5-8"
64
+ })(["background:", ";color:", ";&:hover,&:active,&:focus{color:", ";}}"], ({
65
+ $isActive
66
+ }) => $isActive ? theme.default.color.background.white.default : 'transparent', ({
67
+ $isActive
68
+ }) => $isActive ? theme.default.color.text.plum : theme.default.color.text.white, ({
69
+ $isActive
70
+ }) => $isActive ? theme.default.color.text.plum : theme.default.color.text.white + theme.default.color.transparency.T80);
71
+ const TopContainer = styledComponents.styled(BaseContainer).withConfig({
72
+ displayName: "FooterComponents__TopContainer",
73
+ componentId: "sc-10hh8e5-9"
74
+ })(["h2{margin-bottom:", ";}ul{display:flex;flex-direction:column;gap:", ";padding:", " 0;}a{display:inline-flex;align-items:center;gap:", ";font-weight:", ";}> div > svg{margin-bottom:", ";}"], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5), styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1), styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5), styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.8), theme.default.fontWeight.bold, styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2));
75
+ const AppSection = styledComponents.styled.div.withConfig({
76
+ displayName: "FooterComponents__AppSection",
77
+ componentId: "sc-10hh8e5-10"
78
+ })(["text-align:center;img{max-width:100%;}"]);
79
+ const AppList = styledComponents.styled.div.withConfig({
80
+ displayName: "FooterComponents__AppList",
81
+ componentId: "sc-10hh8e5-11"
82
+ })(["display:flex;gap:", ";justify-content:center;a{display:block;width:142px;}"], styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1));
83
+ const BottomContainer = styledComponents.styled(BaseContainer).withConfig({
84
+ displayName: "FooterComponents__BottomContainer",
85
+ componentId: "sc-10hh8e5-12"
86
+ })(["display:flex;flex-direction:column;gap:", ";a{font-weight:", ";}", "{", "{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:", ";transition:all 0.2s ease;&:hover,&:active,&:focus{text-decoration:none;}}}@media (min-width:", "px){flex-direction:row;align-items:flex-start;justify-content:space-between;position:relative;&:before{content:'';display:block;position:absolute;top:0;left:", ";width:calc(100% - ", ");border-top:1px solid ", ";}", "{text-align:left;width:142px;flex:0 0 auto;p{margin-bottom:", ";}", "{flex-direction:column;}}}"], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3), theme.default.fontWeight.medium, LangLinksContainer, LangLink, theme.default.radius.circle, ({
87
+ $collapseSize
88
+ }) => $collapseSize + 1, styledUtils.getMultipliedSize(theme.default.base.baseHeight, 4), styledUtils.getMultipliedSize(theme.default.base.baseHeight, 8), theme.default.color.default.white, AppSection, styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1), AppList);
89
+ const BottomCenter = styledComponents.styled.div.withConfig({
90
+ displayName: "FooterComponents__BottomCenter",
91
+ componentId: "sc-10hh8e5-13"
92
+ })(["display:flex;flex-direction:column;gap:", ";align-items:center;max-width:520px;margin:0 auto;font-size:", ";"], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 3), theme.default.fontSize.s);
93
+ const SocialMediaLinksContainer = styledComponents.styled.div.withConfig({
94
+ displayName: "FooterComponents__SocialMediaLinksContainer",
95
+ componentId: "sc-10hh8e5-14"
96
+ })(["white-space:nowrap;text-align:center;a{display:inline-block;margin:0 ", ";}"], styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1));
97
+ const GeneralInformationContainer = styledComponents.styled.div.withConfig({
98
+ displayName: "FooterComponents__GeneralInformationContainer",
99
+ componentId: "sc-10hh8e5-15"
100
+ })(["text-align:center;display:flex;gap:", ";flex-wrap:wrap;justify-content:center;a{", "}"], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.5), linkHoverStyles);
244
101
  const socialMediaIcons = {
245
- facebook: icons.Facebook,
246
- instagram: icons.Instagram,
247
- linkedin: icons.Linkedin,
248
- tiktok: icons.Tiktok,
249
- threads: icons.Threads,
250
- twitter: icons.X,
251
- youtube: icons.Youtube,
102
+ facebook: icons.Facebook,
103
+ instagram: icons.Instagram,
104
+ linkedin: icons.Linkedin,
105
+ tiktok: icons.Tiktok,
106
+ threads: icons.Threads,
107
+ twitter: icons.X,
108
+ youtube: icons.Youtube
252
109
  };
253
- const mapCorporateSelector = (languagesObject) => Object.keys(languagesObject.urls).map(e => ({
254
- title: e,
255
- url: languagesObject.urls[e],
110
+ const mapCorporateSelector = languagesObject => Object.keys(languagesObject.urls).map(e => ({
111
+ title: e,
112
+ url: languagesObject.urls[e]
256
113
  }));
257
- const TopSection = ({ topSection }) => {
258
- const { collapseSize, language } = React.useContext(FooterContext.default);
259
- return (React__default.default.createElement(TopContainer, { "$collapseSize": collapseSize }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (React__default.default.createElement("div", { key: `service-section-${index}`, "data-testid": `service-section-${index}` },
260
- section.svgIconName[language] === 'user' && React__default.default.createElement(icons.User, { size: "3rem" }),
261
- section.svgIconName[language] === 'headset' && React__default.default.createElement(icons.Headset, { size: "3rem" }),
262
- section.svgIconName[language] === 'shop' && React__default.default.createElement(icons.Shop, { size: "3rem" }),
263
- React__default.default.createElement(CategoryName, null, section.title[language]),
264
- React__default.default.createElement("ul", null, section.linkItems.map((item, i) => (React__default.default.createElement(LinksListEl, { key: `category-link-${i}`, "data-testid": `category-link-${i}` }, item.openChat[language] ? (React__default.default.createElement(ButtonIcon.default, { darkBg: true, icon: icons.ArrowRight, className: "js-dna-chatbot-cta-btn" }, item.linkText[language])) : (React__default.default.createElement("a", { href: item.linkURL[language] },
265
- React__default.default.createElement(icons.ArrowRight, null),
266
- item.linkText[language])))))))))));
114
+ const TopSection = ({
115
+ topSection
116
+ }) => {
117
+ const {
118
+ collapseSize,
119
+ language
120
+ } = React.useContext(FooterContext.default);
121
+ return /*#__PURE__*/React__default.default.createElement(TopContainer, {
122
+ "$collapseSize": collapseSize
123
+ }, topSection === null || topSection === void 0 ? void 0 : topSection.map((section, index) => (/*#__PURE__*/React__default.default.createElement("div", {
124
+ key: `service-section-${index}`,
125
+ "data-testid": `service-section-${index}`
126
+ }, section.svgIconName[language] === 'user' && /*#__PURE__*/React__default.default.createElement(icons.User, {
127
+ size: "3rem"
128
+ }), section.svgIconName[language] === 'headset' && /*#__PURE__*/React__default.default.createElement(icons.Headset, {
129
+ size: "3rem"
130
+ }), section.svgIconName[language] === 'shop' && /*#__PURE__*/React__default.default.createElement(icons.Shop, {
131
+ size: "3rem"
132
+ }), /*#__PURE__*/React__default.default.createElement(CategoryName, null, section.title[language]), /*#__PURE__*/React__default.default.createElement("ul", null, section.linkItems.map((item, i) => (/*#__PURE__*/React__default.default.createElement(LinksListEl, {
133
+ key: `category-link-${i}`,
134
+ "data-testid": `category-link-${i}`
135
+ }, item.openChat[language] ? (/*#__PURE__*/React__default.default.createElement(ButtonIcon.default, {
136
+ darkBg: true,
137
+ icon: icons.ArrowRight,
138
+ className: "js-dna-chatbot-cta-btn"
139
+ }, item.linkText[language])) : (/*#__PURE__*/React__default.default.createElement("a", {
140
+ href: item.linkURL[language]
141
+ }, /*#__PURE__*/React__default.default.createElement(icons.ArrowRight, null), item.linkText[language]))))))))));
267
142
  };
268
- const Categories = ({ categories }) => {
269
- const { collapseSize, language, isCollapsed, setIsCollapsed, isMobileFooter } = React.useContext(FooterContext.default);
270
- const toggleCollapse = (currentIndex) => {
271
- if (isMobileFooter) {
272
- setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), { [currentIndex]: !isCollapsed[currentIndex] }));
273
- }
274
- };
275
- return (React__default.default.createElement(CategoryContainer, { "$collapseSize": collapseSize, "data-testid": "category-container" }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (React__default.default.createElement(CategoryWrapper, { "$active": isCollapsed[index], "data-testid": `category-${index}`, key: `category-${index}` },
276
- React__default.default.createElement(CategoryHeader, { onClick: () => toggleCollapse(index), "aria-expanded": isMobileFooter ? isCollapsed[index] : true },
277
- React__default.default.createElement(CategoryName, null, category.description[language]),
278
- isMobileFooter && React__default.default.createElement(icons.ChevronDown, null)),
279
- React__default.default.createElement(CategoryLinks, { "$active": isMobileFooter ? isCollapsed[index] : true }, category.category.map((categoryLink, linkIndex) => (React__default.default.createElement(LinksListEl, { key: `category-${index}-link-${linkIndex}`, "data-testid": `category-${index}-link-${linkIndex}` },
280
- React__default.default.createElement("a", { href: categoryLink.urls[language] }, categoryLink.titles[language]))))))))));
143
+ const Categories = ({
144
+ categories
145
+ }) => {
146
+ const {
147
+ collapseSize,
148
+ language,
149
+ isCollapsed,
150
+ setIsCollapsed,
151
+ isMobileFooter
152
+ } = React.useContext(FooterContext.default);
153
+ const toggleCollapse = currentIndex => {
154
+ if (isMobileFooter) {
155
+ setIsCollapsed(Object.assign(Object.assign({}, isCollapsed), {
156
+ [currentIndex]: !isCollapsed[currentIndex]
157
+ }));
158
+ }
159
+ };
160
+ return /*#__PURE__*/React__default.default.createElement(CategoryContainer, {
161
+ "$collapseSize": collapseSize,
162
+ "data-testid": "category-container"
163
+ }, categories === null || categories === void 0 ? void 0 : categories.map((category, index) => (/*#__PURE__*/React__default.default.createElement(CategoryWrapper, {
164
+ "$active": isCollapsed[index],
165
+ "data-testid": `category-${index}`,
166
+ key: `category-${index}`
167
+ }, /*#__PURE__*/React__default.default.createElement(CategoryHeader, {
168
+ onClick: () => toggleCollapse(index),
169
+ "aria-expanded": isMobileFooter ? isCollapsed[index] : true
170
+ }, /*#__PURE__*/React__default.default.createElement(CategoryName, null, category.description[language]), isMobileFooter && /*#__PURE__*/React__default.default.createElement(icons.ChevronDown, null)), /*#__PURE__*/React__default.default.createElement(CategoryLinks, {
171
+ "$active": isMobileFooter ? isCollapsed[index] : true
172
+ }, category.category.map((categoryLink, linkIndex) => (/*#__PURE__*/React__default.default.createElement(LinksListEl, {
173
+ key: `category-${index}-link-${linkIndex}`,
174
+ "data-testid": `category-${index}-link-${linkIndex}`
175
+ }, /*#__PURE__*/React__default.default.createElement("a", {
176
+ href: categoryLink.urls[language]
177
+ }, categoryLink.titles[language])))))))));
281
178
  };
282
- const GeneralInformation = ({ generalInformation }) => {
283
- const { language } = React.useContext(FooterContext.default);
284
- const currentYear = new Date().getFullYear();
285
- const COOKIE_SETTINGS_URL = 'cookie-settings';
286
- const OT_SDK_CLASSNAME = 'ot-sdk-show-settings';
287
- // TODO after release: Remove redundant `isNewModelUsed` condition and refactor it's usages (STYLE-905)
288
- const isNewModelUsed = !!generalInformation.mandatoryLinks;
289
- const typeToClassMap = {
290
- cookie: 'ot-sdk-show-settings',
291
- };
292
- const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
293
- const getOrderedLinks = () => {
294
- if (isNewModelUsed && Array.isArray(generalInformation.mandatoryLinks)) {
295
- return generalInformation.mandatoryLinks;
296
- }
297
- return orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
298
- };
299
- const getLinkHref = (item) => {
300
- var _a;
301
- if (!((_a = item.urls) === null || _a === void 0 ? void 0 : _a[language]))
302
- return '#!';
303
- return item.urls[language] !== COOKIE_SETTINGS_URL ? item.urls[language] : '#!';
304
- };
305
- const getLinkClassName = (item) => {
306
- var _a;
307
- if (isNewModelUsed) {
308
- return ((_a = item.urls) === null || _a === void 0 ? void 0 : _a[language]) === COOKIE_SETTINGS_URL ? OT_SDK_CLASSNAME : '';
309
- }
310
- return item.type ? typeToClassMap[item.type] : '';
311
- };
312
- const orderedGeneralInformation = getOrderedLinks();
313
- return (React__default.default.createElement(GeneralInformationContainer, { "data-testid": "general-information-section" },
314
- orderedGeneralInformation.map((item, index) => item && (React__default.default.createElement(React.Fragment, { key: `general-information-link-${index}` },
315
- React__default.default.createElement("a", { href: getLinkHref(item), className: getLinkClassName(item) }, item.titles[language]),
316
- React__default.default.createElement("span", { "aria-hidden": "true" }, "|")))),
317
- "DNA ",
318
- currentYear));
179
+ const GeneralInformation = ({
180
+ generalInformation
181
+ }) => {
182
+ const {
183
+ language
184
+ } = React.useContext(FooterContext.default);
185
+ const currentYear = new Date().getFullYear();
186
+ const COOKIE_SETTINGS_URL = 'cookie-settings';
187
+ const OT_SDK_CLASSNAME = 'ot-sdk-show-settings';
188
+ // TODO after release: Remove redundant `isNewModelUsed` condition and refactor it's usages (STYLE-905)
189
+ const isNewModelUsed = !!generalInformation.mandatoryLinks;
190
+ const typeToClassMap = {
191
+ cookie: 'ot-sdk-show-settings'
192
+ };
193
+ const orderMap = ['privacyPolicy', 'cookieSettings', 'terms'];
194
+ const getOrderedLinks = () => {
195
+ if (isNewModelUsed && Array.isArray(generalInformation.mandatoryLinks)) {
196
+ return generalInformation.mandatoryLinks;
197
+ }
198
+ return orderMap.map(id => new Map(Object.entries(generalInformation)).get(id));
199
+ };
200
+ const getLinkHref = item => {
201
+ var _a;
202
+ if (!((_a = item.urls) === null || _a === void 0 ? void 0 : _a[language])) return '#!';
203
+ return item.urls[language] !== COOKIE_SETTINGS_URL ? item.urls[language] : '#!';
204
+ };
205
+ const getLinkClassName = item => {
206
+ var _a;
207
+ if (isNewModelUsed) {
208
+ return ((_a = item.urls) === null || _a === void 0 ? void 0 : _a[language]) === COOKIE_SETTINGS_URL ? OT_SDK_CLASSNAME : '';
209
+ }
210
+ return item.type ? typeToClassMap[item.type] : '';
211
+ };
212
+ const orderedGeneralInformation = getOrderedLinks();
213
+ return /*#__PURE__*/React__default.default.createElement(GeneralInformationContainer, {
214
+ "data-testid": "general-information-section"
215
+ }, orderedGeneralInformation.map((item, index) => item && (/*#__PURE__*/React__default.default.createElement(React.Fragment, {
216
+ key: `general-information-link-${index}`
217
+ }, /*#__PURE__*/React__default.default.createElement("a", {
218
+ href: getLinkHref(item),
219
+ className: getLinkClassName(item)
220
+ }, item.titles[language]), /*#__PURE__*/React__default.default.createElement("span", {
221
+ "aria-hidden": "true"
222
+ }, "|")))), "DNA ", currentYear);
319
223
  };
320
- const LanguageLinks = ({ languages }) => (React__default.default.createElement(LangLinksContainer, { "data-testid": "language-selector-section" }, languages.map(language => (React__default.default.createElement(LangLink, { "aria-label": language.ariaLabel, href: language.url, lang: language.title.toLowerCase(),
321
- // not currently in use
322
- // isActive={currentLanguage === language.title.toLowerCase()}
323
- key: language.title }, language.title.toUpperCase())))));
324
- const SocialMediaLinks = ({ socialMedia }) => {
325
- const { language } = React.useContext(FooterContext.default);
326
- return (React__default.default.createElement(SocialMediaLinksContainer, { "data-testid": "social-media-section" }, socialMedia &&
327
- Object.keys(socialMedia).map(socialMediaKey => {
328
- var _a, _b;
329
- const socialMediaName = socialMediaKey.charAt(0).toUpperCase() +
330
- socialMediaKey.toLowerCase().slice(1);
331
- const currentObject = socialMedia[socialMediaKey];
332
- const url = (_a = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls) === null || _a === void 0 ? void 0 : _a[language];
333
- const ariaLabel = (_b = currentObject === null || currentObject === void 0 ? void 0 : currentObject.ariaLabels) === null || _b === void 0 ? void 0 : _b[language];
334
- const SocialIcon = socialMediaIcons[socialMediaKey.toLowerCase()];
335
- if (!url) {
336
- return null;
337
- }
338
- return (React__default.default.createElement("a", { href: url, key: `social-media-link-${socialMediaKey}`, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : socialMediaName }, SocialIcon && React__default.default.createElement(SocialIcon, null)));
339
- })));
224
+ const LanguageLinks = ({
225
+ languages
226
+ }) => (/*#__PURE__*/React__default.default.createElement(LangLinksContainer, {
227
+ "data-testid": "language-selector-section"
228
+ }, languages.map(language => (/*#__PURE__*/React__default.default.createElement(LangLink, {
229
+ "aria-label": language.ariaLabel,
230
+ href: language.url,
231
+ lang: language.title.toLowerCase(),
232
+ // not currently in use
233
+ // isActive={currentLanguage === language.title.toLowerCase()}
234
+ key: language.title
235
+ }, language.title.toUpperCase())))));
236
+ const SocialMediaLinks = ({
237
+ socialMedia
238
+ }) => {
239
+ const {
240
+ language
241
+ } = React.useContext(FooterContext.default);
242
+ return /*#__PURE__*/React__default.default.createElement(SocialMediaLinksContainer, {
243
+ "data-testid": "social-media-section"
244
+ }, socialMedia && Object.keys(socialMedia).map(socialMediaKey => {
245
+ var _a, _b;
246
+ const socialMediaName = socialMediaKey.charAt(0).toUpperCase() + socialMediaKey.toLowerCase().slice(1);
247
+ const currentObject = socialMedia[socialMediaKey];
248
+ const url = (_a = currentObject === null || currentObject === void 0 ? void 0 : currentObject.urls) === null || _a === void 0 ? void 0 : _a[language];
249
+ const ariaLabel = (_b = currentObject === null || currentObject === void 0 ? void 0 : currentObject.ariaLabels) === null || _b === void 0 ? void 0 : _b[language];
250
+ const SocialIcon = socialMediaIcons[socialMediaKey.toLowerCase()];
251
+ if (!url) {
252
+ return null;
253
+ }
254
+ return /*#__PURE__*/React__default.default.createElement("a", {
255
+ href: url,
256
+ key: `social-media-link-${socialMediaKey}`,
257
+ "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : socialMediaName
258
+ }, SocialIcon && /*#__PURE__*/React__default.default.createElement(SocialIcon, null));
259
+ }));
340
260
  };
341
- const ApplicationLinks = ({ applicationLinks, language, }) => {
342
- var _a, _b, _c, _d, _e, _f;
343
- const { appStore, googlePlay, title } = applicationLinks;
344
- return (React__default.default.createElement(AppSection, null,
345
- React__default.default.createElement("p", null, title[language]),
346
- React__default.default.createElement(AppList, null,
347
- ((_a = appStore.urls) === null || _a === void 0 ? void 0 : _a[language]) && (React__default.default.createElement("a", { "aria-label": (_b = appStore.ariaLabels) === null || _b === void 0 ? void 0 : _b[language], href: appStore.urls[language], target: "_blank", rel: "noopener noreferrer" },
348
- React__default.default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/App_Store_Badge.png", alt: (_c = appStore.alts) === null || _c === void 0 ? void 0 : _c[language] }))),
349
- ((_d = googlePlay.urls) === null || _d === void 0 ? void 0 : _d[language]) && (React__default.default.createElement("a", { "aria-label": (_e = googlePlay.ariaLabels) === null || _e === void 0 ? void 0 : _e[language], href: googlePlay.urls[language], target: "_blank", rel: "noopener noreferrer" },
350
- React__default.default.createElement("img", { src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/Google_Play_Badge.png", alt: (_f = googlePlay.alts) === null || _f === void 0 ? void 0 : _f[language] }))))));
261
+ const ApplicationLinks = ({
262
+ applicationLinks,
263
+ language
264
+ }) => {
265
+ var _a, _b, _c, _d, _e, _f;
266
+ const {
267
+ appStore,
268
+ googlePlay,
269
+ title
270
+ } = applicationLinks;
271
+ return /*#__PURE__*/React__default.default.createElement(AppSection, null, /*#__PURE__*/React__default.default.createElement("p", null, title[language]), /*#__PURE__*/React__default.default.createElement(AppList, null, ((_a = appStore.urls) === null || _a === void 0 ? void 0 : _a[language]) && (/*#__PURE__*/React__default.default.createElement("a", {
272
+ "aria-label": (_b = appStore.ariaLabels) === null || _b === void 0 ? void 0 : _b[language],
273
+ href: appStore.urls[language],
274
+ target: "_blank",
275
+ rel: "noopener noreferrer"
276
+ }, /*#__PURE__*/React__default.default.createElement("img", {
277
+ src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/App_Store_Badge.png",
278
+ alt: (_c = appStore.alts) === null || _c === void 0 ? void 0 : _c[language]
279
+ }))), ((_d = googlePlay.urls) === null || _d === void 0 ? void 0 : _d[language]) && (/*#__PURE__*/React__default.default.createElement("a", {
280
+ "aria-label": (_e = googlePlay.ariaLabels) === null || _e === void 0 ? void 0 : _e[language],
281
+ href: googlePlay.urls[language],
282
+ target: "_blank",
283
+ rel: "noopener noreferrer"
284
+ }, /*#__PURE__*/React__default.default.createElement("img", {
285
+ src: "https://res.cloudinary.com/dnaoyj/image/upload/dpr_2,f_auto,q_auto,w_142/v1/Assets/Icons%20and%20logos/Other%20icons/Google_Play_Badge.png",
286
+ alt: (_f = googlePlay.alts) === null || _f === void 0 ? void 0 : _f[language]
287
+ })))));
351
288
  };
352
- const BottomSection = ({ items }) => {
353
- const { applicationLinks, businessSelector, customLinks, generalInformation, languageSelector, socialMedia, } = items.footerNavigation;
354
- const { collapseSize, language } = React.useContext(FooterContext.default);
355
- let languages = [];
356
- if (items.businessId === 'Corporate') {
357
- if (languageSelector) {
358
- languages = mapCorporateSelector(languageSelector);
359
- }
360
- }
361
- else {
362
- languages = customLinks || [];
289
+ const BottomSection = ({
290
+ items
291
+ }) => {
292
+ const {
293
+ applicationLinks,
294
+ businessSelector,
295
+ customLinks,
296
+ generalInformation,
297
+ languageSelector,
298
+ socialMedia
299
+ } = items.footerNavigation;
300
+ const {
301
+ collapseSize,
302
+ language
303
+ } = React.useContext(FooterContext.default);
304
+ let languages = [];
305
+ if (items.businessId === 'Corporate') {
306
+ if (languageSelector) {
307
+ languages = mapCorporateSelector(languageSelector);
363
308
  }
364
- return (React__default.default.createElement(BottomContainer, { "$collapseSize": collapseSize, "data-testid": "bottom-section" },
365
- languages.length > 0 && (React__default.default.createElement(LanguageLinks, { currentLanguage: language, languages: languages })),
366
- React__default.default.createElement(BottomCenter, null,
367
- socialMedia && React__default.default.createElement(SocialMediaLinks, { socialMedia: socialMedia }),
368
- React__default.default.createElement(BusinessMenu.default, { items: businessSelector === null || businessSelector === void 0 ? void 0 : businessSelector.items, currentBusinessId: items.businessId, lang: language }),
369
- generalInformation && (React__default.default.createElement(GeneralInformation, { generalInformation: generalInformation }))),
370
- applicationLinks && (React__default.default.createElement(ApplicationLinks, { applicationLinks: applicationLinks, language: language }))));
309
+ } else {
310
+ languages = customLinks || [];
311
+ }
312
+ return /*#__PURE__*/React__default.default.createElement(BottomContainer, {
313
+ "$collapseSize": collapseSize,
314
+ "data-testid": "bottom-section"
315
+ }, languages.length > 0 && (/*#__PURE__*/React__default.default.createElement(LanguageLinks, {
316
+ currentLanguage: language,
317
+ languages: languages
318
+ })), /*#__PURE__*/React__default.default.createElement(BottomCenter, null, socialMedia && /*#__PURE__*/React__default.default.createElement(SocialMediaLinks, {
319
+ socialMedia: socialMedia
320
+ }), /*#__PURE__*/React__default.default.createElement(BusinessMenu.default, {
321
+ items: businessSelector === null || businessSelector === void 0 ? void 0 : businessSelector.items,
322
+ currentBusinessId: items.businessId,
323
+ lang: language
324
+ }), generalInformation && (/*#__PURE__*/React__default.default.createElement(GeneralInformation, {
325
+ generalInformation: generalInformation
326
+ }))), applicationLinks && (/*#__PURE__*/React__default.default.createElement(ApplicationLinks, {
327
+ applicationLinks: applicationLinks,
328
+ language: language
329
+ })));
371
330
  };
372
331
 
373
332
  exports.ApplicationLinks = ApplicationLinks;