@skodaflow/web-library 7.0.3 → 7.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 (175) hide show
  1. package/cjs/components/alert/Alert.d.ts +3 -0
  2. package/cjs/components/alert/Alert.js +1 -1
  3. package/cjs/components/alert/Alert.js.map +1 -1
  4. package/cjs/components/banner/banner.js +1 -1
  5. package/cjs/components/banner/banner.js.map +1 -1
  6. package/cjs/components/box/box.component.d.ts +3 -0
  7. package/cjs/components/box/index.d.ts +1 -0
  8. package/cjs/components/index.d.ts +1 -0
  9. package/cjs/components/menu/menu.js +1 -1
  10. package/cjs/components/menu/menu.js.map +1 -1
  11. package/cjs/components/modal/modal.js +1 -1
  12. package/cjs/components/modal/modal.js.map +1 -1
  13. package/cjs/design/skoda/SkodaThemeProvider.d.ts +8 -2
  14. package/cjs/design/skoda/SkodaThemeProvider.js +1 -1
  15. package/cjs/design/skoda/SkodaThemeProvider.js.map +1 -1
  16. package/cjs/design/skoda/SkodaThemeWidgetProvider.d.ts +20 -1
  17. package/cjs/design/skoda/SkodaThemeWidgetProvider.js +1 -1
  18. package/cjs/design/skoda/SkodaThemeWidgetProvider.js.map +1 -1
  19. package/cjs/design/skoda/components/accordion/accordionSummary.theme.js +1 -1
  20. package/cjs/design/skoda/components/accordion/accordionSummary.theme.js.map +1 -1
  21. package/cjs/design/skoda/components/autocomplete.theme.js +1 -1
  22. package/cjs/design/skoda/components/autocomplete.theme.js.map +1 -1
  23. package/cjs/design/skoda/components/dialog/dialogContentText.theme.d.ts +2 -0
  24. package/cjs/design/skoda/components/dialog/dialogContentText.theme.js +2 -0
  25. package/cjs/design/skoda/components/dialog/dialogContentText.theme.js.map +1 -0
  26. package/cjs/design/skoda/components/form/select.theme.js +1 -1
  27. package/cjs/design/skoda/components/form/select.theme.js.map +1 -1
  28. package/cjs/design/skoda/components/modal.theme.js +1 -1
  29. package/cjs/design/skoda/components/modal.theme.js.map +1 -1
  30. package/cjs/design/skoda/components/popover.theme.js +1 -1
  31. package/cjs/design/skoda/components/popover.theme.js.map +1 -1
  32. package/cjs/design/skoda/components/tabs/tabs.theme.js +1 -1
  33. package/cjs/design/skoda/components/tabs/tabs.theme.js.map +1 -1
  34. package/cjs/design/skoda/index.d.ts +1 -1
  35. package/cjs/design/skoda/theme.d.ts +5 -2
  36. package/cjs/design/skoda/theme.js +1 -1
  37. package/cjs/design/skoda/theme.js.map +1 -1
  38. package/cjs/index.js +1 -1
  39. package/cjs/layout/Error/ErrorContent.js +1 -1
  40. package/cjs/layout/Error/ErrorContent.js.map +1 -1
  41. package/cjs/layout/Footer/FooterIconButton.d.ts +10 -4
  42. package/cjs/layout/Footer/FooterIconButton.js +1 -1
  43. package/cjs/layout/Footer/FooterIconButton.js.map +1 -1
  44. package/cjs/layout/Footer/FooterMenu.d.ts +7 -3
  45. package/cjs/layout/Footer/FooterMenu.js +1 -1
  46. package/cjs/layout/Footer/FooterMenu.js.map +1 -1
  47. package/cjs/layout/Footer/FooterSectionContact.d.ts +9 -3
  48. package/cjs/layout/Footer/FooterSectionContact.js +1 -1
  49. package/cjs/layout/Footer/FooterSectionContact.js.map +1 -1
  50. package/cjs/layout/Footer/PredefinedFooterIconButtons.d.ts +2 -2
  51. package/cjs/layout/Footer/PredefinedFooterIconButtons.js +1 -1
  52. package/cjs/layout/Footer/PredefinedFooterIconButtons.js.map +1 -1
  53. package/cjs/layout/Footer/assets/FacebookIcon.d.ts +1 -0
  54. package/cjs/layout/Footer/assets/FacebookIcon.js +2 -0
  55. package/cjs/layout/Footer/assets/FacebookIcon.js.map +1 -0
  56. package/cjs/layout/Footer/assets/InstagramIcon.d.ts +1 -0
  57. package/cjs/layout/Footer/assets/InstagramIcon.js +2 -0
  58. package/cjs/layout/Footer/assets/InstagramIcon.js.map +1 -0
  59. package/cjs/layout/Footer/assets/TwitterIcon.d.ts +1 -0
  60. package/cjs/layout/Footer/assets/{twitter_icon.svg.js.map → TwitterIcon.js} +2 -1
  61. package/cjs/layout/Footer/assets/TwitterIcon.js.map +1 -0
  62. package/cjs/layout/Footer/assets/YoutubeIcon.d.ts +1 -0
  63. package/cjs/layout/Footer/assets/{youtube_icon.svg.js.map → YoutubeIcon.js} +2 -1
  64. package/cjs/layout/Footer/assets/YoutubeIcon.js.map +1 -0
  65. package/cjs/layout/Footer/assets/index.d.ts +4 -0
  66. package/cjs/layout/Header/HeaderButton.js +1 -1
  67. package/cjs/layout/Header/HeaderButton.js.map +1 -1
  68. package/cjs/layout/SideMenu/SideMenu.d.ts +3 -3
  69. package/cjs/layout/SideMenu/SideMenu.js +1 -1
  70. package/cjs/layout/SideMenu/SideMenu.js.map +1 -1
  71. package/cjs/organisms/carousel2/components/NavButton.js +1 -1
  72. package/cjs/organisms/carousel2/components/NavButton.js.map +1 -1
  73. package/cjs/organisms/gallery/Gallery.js +1 -1
  74. package/cjs/organisms/gallery/Gallery.js.map +1 -1
  75. package/cjs/organisms/gallery/GalleryTrigger.js +1 -1
  76. package/cjs/organisms/gallery/GalleryTrigger.js.map +1 -1
  77. package/cjs/organisms/notification/Notification.js +1 -1
  78. package/cjs/organisms/notification/Notification.js.map +1 -1
  79. package/cjs/utils/useFeatureFlag/useFeatureFlag.js +1 -1
  80. package/cjs/utils/useFeatureFlag/useFeatureFlag.js.map +1 -1
  81. package/components/alert/Alert.d.ts +3 -0
  82. package/components/alert/Alert.js +1 -1
  83. package/components/alert/Alert.js.map +1 -1
  84. package/components/banner/banner.js +1 -1
  85. package/components/banner/banner.js.map +1 -1
  86. package/components/box/box.component.d.ts +3 -0
  87. package/components/box/index.d.ts +1 -0
  88. package/components/index.d.ts +1 -0
  89. package/components/menu/menu.js +1 -1
  90. package/components/menu/menu.js.map +1 -1
  91. package/components/modal/modal.js +1 -1
  92. package/components/modal/modal.js.map +1 -1
  93. package/design/skoda/SkodaThemeProvider.d.ts +8 -2
  94. package/design/skoda/SkodaThemeProvider.js +1 -1
  95. package/design/skoda/SkodaThemeProvider.js.map +1 -1
  96. package/design/skoda/SkodaThemeWidgetProvider.d.ts +20 -1
  97. package/design/skoda/SkodaThemeWidgetProvider.js +1 -1
  98. package/design/skoda/SkodaThemeWidgetProvider.js.map +1 -1
  99. package/design/skoda/components/accordion/accordionSummary.theme.js +1 -1
  100. package/design/skoda/components/accordion/accordionSummary.theme.js.map +1 -1
  101. package/design/skoda/components/autocomplete.theme.js +1 -1
  102. package/design/skoda/components/autocomplete.theme.js.map +1 -1
  103. package/design/skoda/components/dialog/dialogContentText.theme.d.ts +2 -0
  104. package/design/skoda/components/dialog/dialogContentText.theme.js +2 -0
  105. package/design/skoda/components/dialog/dialogContentText.theme.js.map +1 -0
  106. package/design/skoda/components/form/select.theme.js +1 -1
  107. package/design/skoda/components/form/select.theme.js.map +1 -1
  108. package/design/skoda/components/modal.theme.js +1 -1
  109. package/design/skoda/components/modal.theme.js.map +1 -1
  110. package/design/skoda/components/popover.theme.js +1 -1
  111. package/design/skoda/components/popover.theme.js.map +1 -1
  112. package/design/skoda/components/tabs/tabs.theme.js +1 -1
  113. package/design/skoda/components/tabs/tabs.theme.js.map +1 -1
  114. package/design/skoda/index.d.ts +1 -1
  115. package/design/skoda/theme.d.ts +5 -2
  116. package/design/skoda/theme.js +1 -1
  117. package/design/skoda/theme.js.map +1 -1
  118. package/index.js +1 -1
  119. package/layout/Error/ErrorContent.js +1 -1
  120. package/layout/Error/ErrorContent.js.map +1 -1
  121. package/layout/Footer/FooterIconButton.d.ts +10 -4
  122. package/layout/Footer/FooterIconButton.js +1 -1
  123. package/layout/Footer/FooterIconButton.js.map +1 -1
  124. package/layout/Footer/FooterMenu.d.ts +7 -3
  125. package/layout/Footer/FooterMenu.js +1 -1
  126. package/layout/Footer/FooterMenu.js.map +1 -1
  127. package/layout/Footer/FooterSectionContact.d.ts +9 -3
  128. package/layout/Footer/FooterSectionContact.js +1 -1
  129. package/layout/Footer/FooterSectionContact.js.map +1 -1
  130. package/layout/Footer/PredefinedFooterIconButtons.d.ts +2 -2
  131. package/layout/Footer/PredefinedFooterIconButtons.js +1 -1
  132. package/layout/Footer/PredefinedFooterIconButtons.js.map +1 -1
  133. package/layout/Footer/assets/FacebookIcon.d.ts +1 -0
  134. package/layout/Footer/assets/FacebookIcon.js +2 -0
  135. package/layout/Footer/assets/FacebookIcon.js.map +1 -0
  136. package/layout/Footer/assets/InstagramIcon.d.ts +1 -0
  137. package/layout/Footer/assets/InstagramIcon.js +2 -0
  138. package/layout/Footer/assets/InstagramIcon.js.map +1 -0
  139. package/layout/Footer/assets/TwitterIcon.d.ts +1 -0
  140. package/layout/Footer/assets/TwitterIcon.js +2 -0
  141. package/layout/Footer/assets/TwitterIcon.js.map +1 -0
  142. package/layout/Footer/assets/YoutubeIcon.d.ts +1 -0
  143. package/layout/Footer/assets/YoutubeIcon.js +2 -0
  144. package/layout/Footer/assets/YoutubeIcon.js.map +1 -0
  145. package/layout/Footer/assets/index.d.ts +4 -0
  146. package/layout/Header/HeaderButton.js +1 -1
  147. package/layout/Header/HeaderButton.js.map +1 -1
  148. package/layout/SideMenu/SideMenu.d.ts +3 -3
  149. package/layout/SideMenu/SideMenu.js +1 -1
  150. package/layout/SideMenu/SideMenu.js.map +1 -1
  151. package/organisms/carousel2/components/NavButton.js +1 -1
  152. package/organisms/carousel2/components/NavButton.js.map +1 -1
  153. package/organisms/gallery/Gallery.js +1 -1
  154. package/organisms/gallery/Gallery.js.map +1 -1
  155. package/organisms/gallery/GalleryTrigger.js +1 -1
  156. package/organisms/gallery/GalleryTrigger.js.map +1 -1
  157. package/organisms/notification/Notification.js +1 -1
  158. package/organisms/notification/Notification.js.map +1 -1
  159. package/package.json +1 -1
  160. package/utils/useFeatureFlag/useFeatureFlag.js +1 -1
  161. package/utils/useFeatureFlag/useFeatureFlag.js.map +1 -1
  162. package/cjs/layout/Footer/assets/facebook_icon.svg.js +0 -2
  163. package/cjs/layout/Footer/assets/facebook_icon.svg.js.map +0 -1
  164. package/cjs/layout/Footer/assets/instagram_icon.svg.js +0 -2
  165. package/cjs/layout/Footer/assets/instagram_icon.svg.js.map +0 -1
  166. package/cjs/layout/Footer/assets/twitter_icon.svg.js +0 -2
  167. package/cjs/layout/Footer/assets/youtube_icon.svg.js +0 -2
  168. package/layout/Footer/assets/facebook_icon.svg.js +0 -2
  169. package/layout/Footer/assets/facebook_icon.svg.js.map +0 -1
  170. package/layout/Footer/assets/instagram_icon.svg.js +0 -2
  171. package/layout/Footer/assets/instagram_icon.svg.js.map +0 -1
  172. package/layout/Footer/assets/twitter_icon.svg.js +0 -2
  173. package/layout/Footer/assets/twitter_icon.svg.js.map +0 -1
  174. package/layout/Footer/assets/youtube_icon.svg.js +0 -2
  175. package/layout/Footer/assets/youtube_icon.svg.js.map +0 -1
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime");require("../../components/accordion/accordion.js"),require("../../components/backdrop/backdrop.js"),require("../../components/button/button.js"),require("tslib");var r=require("@mui/material");require("../../design/skoda/theme.js"),require("react"),require("@mui/material/styles"),require("../cardOwnedVehicle/cardOwnedVehicle.js"),require("../cardPhotoAdjustable/cardPhotoAdjustable.js"),require("../cardPhotoFixed/cardPhotoFixed.js"),require("../cardPromoVehicle/cardPromoVehicleComponent.js"),require("../common/styled/cardStandardWrapperStyled.js"),require("../cardTypeOnly/cardTypeOnly.js"),require("embla-carousel-react"),require("embla-carousel-class-names"),require("embla-carousel-autoplay"),require("../carousel/styledComponents/styledCarouselHorizontal.js"),require("../carousel/styledComponents/styledCarouselVertical.js"),require("../../components/controls/controls.js"),require("../../components/numbering/numbering.js"),require("../../utils/enum.js"),require("../heroImageCard/heroImageCard.js"),require("@googlemaps/react-wrapper"),require("@googlemaps/markerclusterer"),require("../maps/utils/mapIcons.js"),require("../maps/mapComponents/mapStyled.js"),require("../shortcutLink/shortcutLink.js"),require("../textCta/textCta.js"),require("../tile/tile.js"),require("@mui/system"),require("../carousel2/galleryCarousel/galleryContext.js"),require("../carousel2/galleryCarousel/galleryItemContext.js"),require("../carousel2/heroCarousel/heroCarouselContext.js"),require("./NotificationCenter.js"),require("../../layout/Header/HeaderContext.js"),require("../../layout/Header/HeaderButton.js"),require("../../layout/Header/HeaderNavigationHero.js"),require("../../layout/Header/HeaderNavigationLink.js"),require("../../layout/Header/HeaderNavigationMenu.js"),require("../../layout/Header/PredefinedHeaderButtons.js"),require("../../layout/Header/HeaderOverheadItem.js"),require("../gallery/Gallery.js"),require("../gallery/GalleryItem.js"),require("../../components/icon/icon.definitions.js"),require("../../layout/SideMenu/SideMenuItem.js"),require("@mui/material/Unstable_Grid2"),require("../../layout/SecondaryNavigation/SecondaryNavigationCta.js"),require("../../layout/SecondaryNavigation/SecondaryNavigationItem.js"),require("@mui/material/Container"),require("../../production/Button/Button.js"),require("../../components/cardContainer/cardContainer.js"),require("../../components/cardMenu/cardMenu.js"),require("../../components/checkbox/checkbox.js"),require("../../components/chip/chipImage/chipImage.js"),require("../../components/chip/regular/chip.js"),require("../../components/chip/chipMultiselect/multiSelectChip.js"),require("../../components/chip/chipDropdownChildren/chipDropdownChildren.js"),require("../../components/divider/divider.js"),require("../../components/drawer/drawer.js"),require("../../components/flag/flag.js"),require("@mui/material/Grid");var i=require("../../components/indicator/indicator.js");require("../../components/label/label.js"),require("../../components/labelCO2/labelCO2.js"),require("../../components/labelFeature/labelFeature.js"),require("../../components/labelPromotional/labelPromotional.js"),require("../../components/labelStatus/labelStatus.js"),require("../../components/menu/menu.js"),require("@mui/material/MenuItem"),require("@mui/material/MobileStepper"),require("../../components/mobileStepper/mobileStepperButton.js"),require("../../components/modal/modal.js"),require("../../components/modal/modalTitle.js"),require("../../components/pagination/pagination.js"),require("../../components/progressBar/progressBar.js"),require("../../components/radioButton/radioButton.js"),require("../../components/selectInput/selectInput.js"),require("../../components/slider/slider.js"),require("../../components/snackbar/snackbar.js"),require("../../components/stepper/stepper.js"),require("../../components/textArea/textArea.js"),require("../../components/common/styled/textFieldStyled.js"),require("../../components/helperTextContent/index.js"),require("../../components/toggleSwitch/toggleSwitch.js"),require("../../components/avatar/Avatar.js"),require("../../components/iconButton/index.js"),require("../../components/alert/AlertButton.js"),require("minimatch");const t=r.styled(r.Box)((({theme:e})=>({display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"50%",width:"56px",height:"56px",background:e.palette.onSurface.os200,flexShrink:0})));exports.Notification=o=>{const a=r.useTheme();return e.jsxs(r.Box,{sx:{background:"grey"===o.color?a.palette.surface.primary:a.palette.onSurface.os0,padding:"24px 32px",display:"flex",flexDirection:"row",gap:"24px",alignItems:"center",position:"relative"},"data-testid":"Notification",children:[o.icon&&e.jsx(t,{sx:{display:{sm:"flex",xs:"none"},overflow:"hidden",img:{width:"100%",height:"100%",objectFit:"cover"}},"data-testid":"Notification.icon",children:o.icon}),e.jsxs(r.Box,{sx:{width:"100%",maxWidth:"100%",overflow:"hidden",display:"flex",gap:"8px",flexDirection:"column"},children:[e.jsxs(r.Box,{display:"flex",alignItems:"center",children:[o.isNew&&e.jsx(i.Indicator,{color:"neutral"}),e.jsx(r.Box,{sx:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:e.jsx(r.Typography,{variant:"subheadline","data-testid":"Notification.headline",children:o.headline})})]}),e.jsx(r.Box,{"data-testid":"Notification.description",children:"string"==typeof o.description?e.jsx(r.Typography,{sx:{lineHeight:"16px",maxHeight:"32px",overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:"2",WebkitBoxOrient:"vertical"},variant:"disclaimer",children:o.description}):o.description}),o.footer&&e.jsx(r.Typography,{variant:"disclaimer",color:a.palette.onSurface.os500,"data-testid":"Notification.footer",children:o.footer}),o.buttons&&e.jsx(r.Stack,{direction:"row",spacing:1,"data-testid":"Notification.buttons",children:o.buttons})]}),o.onDismiss&&e.jsx(r.IconButton,{onClick:o.onDismiss,size:"small",sx:{position:"absolute",right:"8px",top:"8px",".sa-i":{height:"28px"}},"data-testid":"Notification.dismiss",children:e.jsx(r.Icon,{fontSize:"small",className:"ballotx close"})})]})};
1
+ "use strict";var e=require("react/jsx-runtime");require("../../components/accordion/accordion.js"),require("../../components/backdrop/backdrop.js"),require("../../components/button/button.js"),require("tslib"),require("react");var r=require("@mui/material");require("@emotion/react"),require("@emotion/cache"),require("stylis"),require("stylis-plugin-rtl"),require("../../design/skoda/theme.js"),require("../../design/skoda/theme.breakpoints.js"),require("@mui/material/styles"),require("@mui/system"),require("../cardOwnedVehicle/cardOwnedVehicle.js"),require("../cardPhotoAdjustable/cardPhotoAdjustable.js"),require("../cardPhotoFixed/cardPhotoFixed.js"),require("../cardPromoVehicle/cardPromoVehicleComponent.js"),require("../common/styled/cardStandardWrapperStyled.js"),require("../cardTypeOnly/cardTypeOnly.js"),require("embla-carousel-react"),require("embla-carousel-class-names"),require("embla-carousel-autoplay"),require("../carousel/styledComponents/styledCarouselHorizontal.js"),require("../carousel/styledComponents/styledCarouselVertical.js"),require("../../components/controls/controls.js"),require("../../components/numbering/numbering.js"),require("../../utils/enum.js"),require("../heroImageCard/heroImageCard.js"),require("@googlemaps/react-wrapper"),require("@googlemaps/markerclusterer"),require("../maps/utils/mapIcons.js"),require("../maps/mapComponents/mapStyled.js"),require("../shortcutLink/shortcutLink.js"),require("../textCta/textCta.js"),require("../tile/tile.js"),require("../carousel2/galleryCarousel/galleryContext.js"),require("../carousel2/galleryCarousel/galleryItemContext.js"),require("../carousel2/heroCarousel/heroCarouselContext.js"),require("./NotificationCenter.js"),require("../../layout/Header/HeaderContext.js"),require("../../layout/Header/HeaderButton.js"),require("../../layout/Header/HeaderNavigationHero.js"),require("../../layout/Header/HeaderNavigationLink.js"),require("../../layout/Header/HeaderNavigationMenu.js"),require("../../layout/Header/PredefinedHeaderButtons.js"),require("../../layout/Header/HeaderOverheadItem.js"),require("../gallery/Gallery.js"),require("../gallery/GalleryItem.js"),require("../../components/icon/icon.definitions.js"),require("../../layout/SideMenu/SideMenuItem.js"),require("../../layout/Footer/PredefinedFooterIconButtons.js"),require("../../layout/SecondaryNavigation/SecondaryNavigationCta.js"),require("../../layout/SecondaryNavigation/SecondaryNavigationItem.js"),require("@mui/material/Container"),require("../../production/Button/Button.js"),require("../../components/cardContainer/cardContainer.js"),require("../../components/cardMenu/cardMenu.js"),require("../../components/checkbox/checkbox.js"),require("../../components/chip/chipImage/chipImage.js"),require("../../components/chip/regular/chip.js"),require("../../components/chip/chipMultiselect/multiSelectChip.js"),require("../../components/chip/chipDropdownChildren/chipDropdownChildren.js"),require("../../components/divider/divider.js"),require("../../components/drawer/drawer.js"),require("../../components/flag/flag.js"),require("@mui/material/Grid");var i=require("../../components/indicator/indicator.js");require("../../components/label/label.js"),require("../../components/labelCO2/labelCO2.js"),require("../../components/labelFeature/labelFeature.js"),require("../../components/labelPromotional/labelPromotional.js"),require("../../components/labelStatus/labelStatus.js"),require("../../components/menu/menu.js"),require("@mui/material/MenuItem"),require("@mui/material/MobileStepper"),require("../../components/mobileStepper/mobileStepperButton.js"),require("../../components/modal/modal.js"),require("../../components/modal/modalTitle.js"),require("../../components/pagination/pagination.js"),require("../../components/progressBar/progressBar.js"),require("../../components/radioButton/radioButton.js"),require("../../components/selectInput/selectInput.js"),require("../../components/slider/slider.js"),require("../../components/snackbar/snackbar.js"),require("../../components/stepper/stepper.js"),require("../../components/textArea/textArea.js"),require("../../components/common/styled/textFieldStyled.js"),require("../../components/helperTextContent/index.js"),require("../../components/toggleSwitch/toggleSwitch.js"),require("../../components/avatar/Avatar.js"),require("../../components/iconButton/index.js"),require("../../components/alert/AlertButton.js"),require("minimatch");const o=r.styled(r.Box)((({theme:e})=>({display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"50%",width:"56px",height:"56px",background:e.palette.onSurface.os200,flexShrink:0})));exports.Notification=t=>{const s=r.useTheme();return e.jsxs(r.Box,{sx:{background:"grey"===t.color?s.palette.surface.primary:s.palette.onSurface.os0,padding:"24px 32px",display:"flex",flexDirection:"row",gap:"24px",alignItems:"center",position:"relative"},"data-testid":"Notification",children:[t.icon&&e.jsx(o,{sx:{display:{sm:"flex",xs:"none"},overflow:"hidden",img:{width:"100%",height:"100%",objectFit:"cover"}},"data-testid":"Notification.icon",children:t.icon}),e.jsxs(r.Box,{sx:{width:"100%",maxWidth:"100%",overflow:"hidden",display:"flex",gap:"8px",flexDirection:"column"},children:[e.jsxs(r.Box,{display:"flex",alignItems:"center",children:[t.isNew&&e.jsx(i.Indicator,{color:"neutral"}),e.jsx(r.Box,{sx:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:e.jsx(r.Typography,{variant:"subheadline","data-testid":"Notification.headline",children:t.headline})})]}),e.jsx(r.Box,{"data-testid":"Notification.description",children:"string"==typeof t.description?e.jsx(r.Typography,{sx:{lineHeight:"16px",maxHeight:"32px",overflow:"hidden",textOverflow:"ellipsis",display:"-webkit-box",WebkitLineClamp:"2",WebkitBoxOrient:"vertical"},variant:"disclaimer",children:t.description}):t.description}),t.footer&&e.jsx(r.Typography,{variant:"disclaimer",color:s.palette.onSurface.os500,"data-testid":"Notification.footer",children:t.footer}),t.buttons&&e.jsx(r.Stack,{direction:"row",spacing:1,"data-testid":"Notification.buttons",children:t.buttons})]}),t.onDismiss&&e.jsx(r.IconButton,{onClick:t.onDismiss,size:"small",sx:{position:"absolute",right:"8px",top:"8px",".sa-i":{height:"28px"}},"data-testid":"Notification.dismiss",children:e.jsx(r.Icon,{fontSize:"small",className:"ballotx close"})})]})};
2
2
  //# sourceMappingURL=Notification.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Notification.js","sources":["../../../../src/organisms/notification/Notification.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Indicator } from '@/src/components';\nimport { Box, Icon, IconButton, Stack, Typography, styled, useTheme } from '@mui/material';\nexport const Notification = (props) => {\n const theme = useTheme();\n return (_jsxs(Box, { sx: {\n background: props.color === 'grey' ? theme.palette.surface.primary : theme.palette.onSurface.os0,\n padding: '24px 32px',\n display: 'flex',\n flexDirection: 'row',\n gap: '24px',\n alignItems: 'center',\n position: 'relative',\n }, \"data-testid\": \"Notification\", children: [props.icon && (_jsx(IconBox, { sx: {\n display: { sm: 'flex', xs: 'none' },\n overflow: 'hidden',\n img: { width: '100%', height: '100%', objectFit: 'cover' },\n }, \"data-testid\": \"Notification.icon\", children: props.icon })), _jsxs(Box, { sx: {\n width: '100%',\n maxWidth: '100%',\n overflow: 'hidden',\n display: 'flex',\n gap: '8px',\n flexDirection: 'column',\n }, children: [_jsxs(Box, { display: \"flex\", alignItems: \"center\", children: [props.isNew && _jsx(Indicator, { color: \"neutral\" }), _jsx(Box, { sx: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }, children: _jsx(Typography, { variant: \"subheadline\", \"data-testid\": \"Notification.headline\", children: props.headline }) })] }), _jsx(Box, { \"data-testid\": \"Notification.description\", children: typeof props.description === 'string' ? (_jsx(Typography, { sx: {\n lineHeight: '16px',\n maxHeight: '32px',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n display: '-webkit-box',\n WebkitLineClamp: '2',\n WebkitBoxOrient: 'vertical',\n }, variant: \"disclaimer\", children: props.description })) : (props.description) }), props.footer && (_jsx(Typography, { variant: \"disclaimer\", color: theme.palette.onSurface.os500, \"data-testid\": \"Notification.footer\", children: props.footer })), props.buttons && (_jsx(Stack, { direction: \"row\", spacing: 1, \"data-testid\": \"Notification.buttons\", children: props.buttons }))] }), props.onDismiss && (_jsx(IconButton, { onClick: props.onDismiss, size: \"small\", sx: {\n position: 'absolute',\n right: '8px',\n top: '8px',\n '.sa-i': {\n height: '28px',\n },\n }, \"data-testid\": \"Notification.dismiss\", children: _jsx(Icon, { fontSize: \"small\", className: \"ballotx close\" }) }))] }));\n};\nconst IconBox = styled(Box)(({ theme }) => ({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '50%',\n width: '56px',\n height: '56px',\n background: theme.palette.onSurface.os200,\n flexShrink: 0,\n}));\n//# sourceMappingURL=Notification.js.map"],"names":["IconBox","styled","Box","theme","display","justifyContent","alignItems","borderRadius","width","height","background","palette","onSurface","os200","flexShrink","props","useTheme","_jsxs","jsxs","sx","color","surface","primary","os0","padding","flexDirection","gap","position","children","icon","_jsx","jsx","sm","xs","overflow","img","objectFit","maxWidth","isNew","Indicator","whiteSpace","textOverflow","Typography","variant","headline","description","lineHeight","maxHeight","WebkitLineClamp","WebkitBoxOrient","footer","os500","buttons","Stack","direction","spacing","onDismiss","IconButton","onClick","size","right","top","Icon","fontSize","className"],"mappings":"krIAGY,MA0CNA,EAAUC,EAAAA,OAAOC,EAAAA,IAAPD,EAAY,EAAGE,YAAa,CACxCC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,aAAc,MACdC,MAAO,OACPC,OAAQ,OACRC,WAAYP,EAAMQ,QAAQC,UAAUC,MACpCC,WAAY,2BAlDaC,IACzB,MAAMZ,EAAQa,EAAAA,WACd,OAAQC,EAAKC,KAAChB,MAAK,CAAEiB,GAAI,CACjBT,WAA4B,SAAhBK,EAAMK,MAAmBjB,EAAMQ,QAAQU,QAAQC,QAAUnB,EAAMQ,QAAQC,UAAUW,IAC7FC,QAAS,YACTpB,QAAS,OACTqB,cAAe,MACfC,IAAK,OACLpB,WAAY,SACZqB,SAAU,YACX,cAAe,eAAgBC,SAAU,CAACb,EAAMc,MAASC,EAAIC,IAAC/B,EAAS,CAAEmB,GAAI,CACpEf,QAAS,CAAE4B,GAAI,OAAQC,GAAI,QAC3BC,SAAU,SACVC,IAAK,CAAE3B,MAAO,OAAQC,OAAQ,OAAQ2B,UAAW,UAClD,cAAe,oBAAqBR,SAAUb,EAAMc,OAAUZ,EAAKC,KAAChB,MAAK,CAAEiB,GAAI,CAC9EX,MAAO,OACP6B,SAAU,OACVH,SAAU,SACV9B,QAAS,OACTsB,IAAK,MACLD,cAAe,UAChBG,SAAU,CAACX,EAAKC,KAAChB,MAAK,CAAEE,QAAS,OAAQE,WAAY,SAAUsB,SAAU,CAACb,EAAMuB,OAASR,EAAAA,IAAKS,EAASA,UAAE,CAAEnB,MAAO,YAAcU,EAAIC,IAAC7B,MAAK,CAAEiB,GAAI,CAC/HqB,WAAY,SACZN,SAAU,SACVO,aAAc,YACfb,SAAUE,EAAIC,IAACW,aAAY,CAAEC,QAAS,cAAe,cAAe,wBAAyBf,SAAUb,EAAM6B,gBAAoBd,EAAIC,IAAC7B,EAAGA,IAAE,CAAE,cAAe,2BAA4B0B,SAAuC,iBAAtBb,EAAM8B,YAA4Bf,EAAIC,IAACW,EAAUA,WAAE,CAAEvB,GAAI,CACrQ2B,WAAY,OACZC,UAAW,OACXb,SAAU,SACVO,aAAc,WACdrC,QAAS,cACT4C,gBAAiB,IACjBC,gBAAiB,YAClBN,QAAS,aAAcf,SAAUb,EAAM8B,cAAmB9B,EAAiB,cAAMA,EAAMmC,QAAWpB,EAAIC,IAACW,aAAY,CAAEC,QAAS,aAAcvB,MAAOjB,EAAMQ,QAAQC,UAAUuC,MAAO,cAAe,sBAAuBvB,SAAUb,EAAMmC,SAAYnC,EAAMqC,SAAYtB,EAAAA,IAAKuB,EAAKA,MAAE,CAAEC,UAAW,MAAOC,QAAS,EAAG,cAAe,uBAAwB3B,SAAUb,EAAMqC,aAAiBrC,EAAMyC,WAAc1B,EAAAA,IAAK2B,EAAAA,WAAY,CAAEC,QAAS3C,EAAMyC,UAAWG,KAAM,QAASxC,GAAI,CACzdQ,SAAU,WACViC,MAAO,MACPC,IAAK,MACL,QAAS,CACLpD,OAAQ,SAEb,cAAe,uBAAwBmB,SAAUE,EAAIC,IAAC+B,EAAIA,KAAE,CAAEC,SAAU,QAASC,UAAW,sBAA4B"}
1
+ {"version":3,"file":"Notification.js","sources":["../../../../src/organisms/notification/Notification.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Indicator } from '@/src/components';\nimport { Box, Icon, IconButton, Stack, Typography, styled, useTheme } from '@mui/material';\nexport const Notification = (props) => {\n const theme = useTheme();\n return (_jsxs(Box, { sx: {\n background: props.color === 'grey' ? theme.palette.surface.primary : theme.palette.onSurface.os0,\n padding: '24px 32px',\n display: 'flex',\n flexDirection: 'row',\n gap: '24px',\n alignItems: 'center',\n position: 'relative',\n }, \"data-testid\": \"Notification\", children: [props.icon && (_jsx(IconBox, { sx: {\n display: { sm: 'flex', xs: 'none' },\n overflow: 'hidden',\n img: { width: '100%', height: '100%', objectFit: 'cover' },\n }, \"data-testid\": \"Notification.icon\", children: props.icon })), _jsxs(Box, { sx: {\n width: '100%',\n maxWidth: '100%',\n overflow: 'hidden',\n display: 'flex',\n gap: '8px',\n flexDirection: 'column',\n }, children: [_jsxs(Box, { display: \"flex\", alignItems: \"center\", children: [props.isNew && _jsx(Indicator, { color: \"neutral\" }), _jsx(Box, { sx: {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }, children: _jsx(Typography, { variant: \"subheadline\", \"data-testid\": \"Notification.headline\", children: props.headline }) })] }), _jsx(Box, { \"data-testid\": \"Notification.description\", children: typeof props.description === 'string' ? (_jsx(Typography, { sx: {\n lineHeight: '16px',\n maxHeight: '32px',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n display: '-webkit-box',\n WebkitLineClamp: '2',\n WebkitBoxOrient: 'vertical',\n }, variant: \"disclaimer\", children: props.description })) : (props.description) }), props.footer && (_jsx(Typography, { variant: \"disclaimer\", color: theme.palette.onSurface.os500, \"data-testid\": \"Notification.footer\", children: props.footer })), props.buttons && (_jsx(Stack, { direction: \"row\", spacing: 1, \"data-testid\": \"Notification.buttons\", children: props.buttons }))] }), props.onDismiss && (_jsx(IconButton, { onClick: props.onDismiss, size: \"small\", sx: {\n position: 'absolute',\n right: '8px',\n top: '8px',\n '.sa-i': {\n height: '28px',\n },\n }, \"data-testid\": \"Notification.dismiss\", children: _jsx(Icon, { fontSize: \"small\", className: \"ballotx close\" }) }))] }));\n};\nconst IconBox = styled(Box)(({ theme }) => ({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: '50%',\n width: '56px',\n height: '56px',\n background: theme.palette.onSurface.os200,\n flexShrink: 0,\n}));\n//# sourceMappingURL=Notification.js.map"],"names":["IconBox","styled","Box","theme","display","justifyContent","alignItems","borderRadius","width","height","background","palette","onSurface","os200","flexShrink","props","useTheme","_jsxs","jsxs","sx","color","surface","primary","os0","padding","flexDirection","gap","position","children","icon","_jsx","jsx","sm","xs","overflow","img","objectFit","maxWidth","isNew","Indicator","whiteSpace","textOverflow","Typography","variant","headline","description","lineHeight","maxHeight","WebkitLineClamp","WebkitBoxOrient","footer","os500","buttons","Stack","direction","spacing","onDismiss","IconButton","onClick","size","right","top","Icon","fontSize","className"],"mappings":"81IAGY,MA0CNA,EAAUC,EAAAA,OAAOC,EAAAA,IAAPD,EAAY,EAAGE,YAAa,CACxCC,QAAS,OACTC,eAAgB,SAChBC,WAAY,SACZC,aAAc,MACdC,MAAO,OACPC,OAAQ,OACRC,WAAYP,EAAMQ,QAAQC,UAAUC,MACpCC,WAAY,2BAlDaC,IACzB,MAAMZ,EAAQa,EAAAA,WACd,OAAQC,EAAKC,KAAChB,MAAK,CAAEiB,GAAI,CACjBT,WAA4B,SAAhBK,EAAMK,MAAmBjB,EAAMQ,QAAQU,QAAQC,QAAUnB,EAAMQ,QAAQC,UAAUW,IAC7FC,QAAS,YACTpB,QAAS,OACTqB,cAAe,MACfC,IAAK,OACLpB,WAAY,SACZqB,SAAU,YACX,cAAe,eAAgBC,SAAU,CAACb,EAAMc,MAASC,EAAIC,IAAC/B,EAAS,CAAEmB,GAAI,CACpEf,QAAS,CAAE4B,GAAI,OAAQC,GAAI,QAC3BC,SAAU,SACVC,IAAK,CAAE3B,MAAO,OAAQC,OAAQ,OAAQ2B,UAAW,UAClD,cAAe,oBAAqBR,SAAUb,EAAMc,OAAUZ,EAAKC,KAAChB,MAAK,CAAEiB,GAAI,CAC9EX,MAAO,OACP6B,SAAU,OACVH,SAAU,SACV9B,QAAS,OACTsB,IAAK,MACLD,cAAe,UAChBG,SAAU,CAACX,EAAKC,KAAChB,MAAK,CAAEE,QAAS,OAAQE,WAAY,SAAUsB,SAAU,CAACb,EAAMuB,OAASR,EAAAA,IAAKS,EAASA,UAAE,CAAEnB,MAAO,YAAcU,EAAIC,IAAC7B,MAAK,CAAEiB,GAAI,CAC/HqB,WAAY,SACZN,SAAU,SACVO,aAAc,YACfb,SAAUE,EAAIC,IAACW,aAAY,CAAEC,QAAS,cAAe,cAAe,wBAAyBf,SAAUb,EAAM6B,gBAAoBd,EAAIC,IAAC7B,EAAGA,IAAE,CAAE,cAAe,2BAA4B0B,SAAuC,iBAAtBb,EAAM8B,YAA4Bf,EAAIC,IAACW,EAAUA,WAAE,CAAEvB,GAAI,CACrQ2B,WAAY,OACZC,UAAW,OACXb,SAAU,SACVO,aAAc,WACdrC,QAAS,cACT4C,gBAAiB,IACjBC,gBAAiB,YAClBN,QAAS,aAAcf,SAAUb,EAAM8B,cAAmB9B,EAAiB,cAAMA,EAAMmC,QAAWpB,EAAIC,IAACW,aAAY,CAAEC,QAAS,aAAcvB,MAAOjB,EAAMQ,QAAQC,UAAUuC,MAAO,cAAe,sBAAuBvB,SAAUb,EAAMmC,SAAYnC,EAAMqC,SAAYtB,EAAAA,IAAKuB,EAAKA,MAAE,CAAEC,UAAW,MAAOC,QAAS,EAAG,cAAe,uBAAwB3B,SAAUb,EAAMqC,aAAiBrC,EAAMyC,WAAc1B,EAAAA,IAAK2B,EAAAA,WAAY,CAAEC,QAAS3C,EAAMyC,UAAWG,KAAM,QAASxC,GAAI,CACzdQ,SAAU,WACViC,MAAO,MACPC,IAAK,MACL,QAAS,CACLpD,OAAQ,SAEb,cAAe,uBAAwBmB,SAAUE,EAAIC,IAAC+B,EAAIA,KAAE,CAAEC,SAAU,QAASC,UAAW,sBAA4B"}
@@ -1,2 +1,2 @@
1
- "use strict";require("react"),exports.evaluateFeatureFlag=function(e){try{return"true"==`${process.env[`VITE_FEATURE_FLAG_${e}`]}`}catch(e){return!1}};
1
+ "use strict";require("react"),exports.evaluateFeatureFlag=function(e){try{return"true"==`${process.env[`SKODAFLOW_FEATURE_FLAG_${e}`]}`}catch(e){return!1}};
2
2
  //# sourceMappingURL=useFeatureFlag.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useFeatureFlag.js","sources":["../../../../src/utils/useFeatureFlag/useFeatureFlag.tsx"],"sourcesContent":["import { useMemo } from 'react';\n/**\n * Returns allowed or disabled state of the feature based on the feature flag\n *\n * @param {string} featureFlag - shortcut name of the feature flag in .env,\n * e.g. 'DARK_MODE' which translates to 'VITE_FEATURE_FLAG_DARK_MODE'\n * @returns {boolean} allowed state of the feature\n */\nexport function evaluateFeatureFlag(featureFlag) {\n try {\n // check if feature is active or not\n const featureFlagValue = process.env[`VITE_FEATURE_FLAG_${featureFlag}`];\n return `${featureFlagValue}` === 'true';\n }\n catch (_a) {\n return false;\n }\n}\n/**\n * Component that renders or not renders content based on the featureFlag\n *\n * @param {string} featureFlag - shortcut name of the feature flag in .env,\n * e.g. 'DARK_MODE' which translates to 'VITE_FEATURE_FLAG_DARK_MODE'\n * @param children - content\n */\nexport function FeatureFlagBlock({ children, featureFlag }) {\n const featureFlagEnabled = useFeatureFlag(featureFlag);\n return featureFlagEnabled ? children : null;\n}\n/**\n * Returns cached allowed or disabled state of the feature based on the feature flag\n * @param {string} featureFlag - shortcut name of the feature flag in .env,\n * e.g. 'DARK_MODE' which translates to 'VITE_FEATURE_FLAG_DARK_MODE'\n */\nexport default function useFeatureFlag(featureFlag) {\n return useMemo(() => evaluateFeatureFlag(featureFlag), [featureFlag]);\n}\n//# sourceMappingURL=useFeatureFlag.js.map"],"names":["featureFlag","process","env","_a"],"mappings":"0DAQO,SAA6BA,GAChC,IAGI,MAAiC,QAA1B,GADkBC,QAAQC,IAAI,qBAAqBF,MAE7D,CACD,MAAOG,GACH,OAAO,CACV,CACL"}
1
+ {"version":3,"file":"useFeatureFlag.js","sources":["../../../../src/utils/useFeatureFlag/useFeatureFlag.tsx"],"sourcesContent":["import { useMemo } from 'react';\n/**\n * Returns allowed or disabled state of the feature based on the feature flag\n *\n * @param {string} featureFlag - shortcut name of the feature flag in .env,\n * e.g. 'DARK_MODE' which translates to 'VITE_FEATURE_FLAG_DARK_MODE'\n * @returns {boolean} allowed state of the feature\n */\nexport function evaluateFeatureFlag(featureFlag) {\n try {\n // check if feature is active or not\n const featureFlagValue = process.env[`SKODAFLOW_FEATURE_FLAG_${featureFlag}`];\n return `${featureFlagValue}` === 'true';\n }\n catch (_a) {\n return false;\n }\n}\n/**\n * Component that renders or not renders content based on the featureFlag\n *\n * @param {string} featureFlag - shortcut name of the feature flag in .env,\n * e.g. 'DARK_MODE' which translates to 'VITE_FEATURE_FLAG_DARK_MODE'\n * @param children - content\n */\nexport function FeatureFlagBlock({ children, featureFlag }) {\n const featureFlagEnabled = useFeatureFlag(featureFlag);\n return featureFlagEnabled ? children : null;\n}\n/**\n * Returns cached allowed or disabled state of the feature based on the feature flag\n * @param {string} featureFlag - shortcut name of the feature flag in .env,\n * e.g. 'DARK_MODE' which translates to 'VITE_FEATURE_FLAG_DARK_MODE'\n */\nexport default function useFeatureFlag(featureFlag) {\n return useMemo(() => evaluateFeatureFlag(featureFlag), [featureFlag]);\n}\n//# sourceMappingURL=useFeatureFlag.js.map"],"names":["featureFlag","process","env","_a"],"mappings":"0DAQO,SAA6BA,GAChC,IAGI,MAAiC,QAA1B,GADkBC,QAAQC,IAAI,0BAA0BF,MAElE,CACD,MAAOG,GACH,OAAO,CACV,CACL"}
@@ -3,6 +3,9 @@ export type AlertProps = PropsWithChildren<{
3
3
  type?: 'success' | 'warning' | 'error';
4
4
  actions?: React.ReactNode;
5
5
  width?: string | number;
6
+ /**
7
+ * @deprecated direction is taken from the theme
8
+ */
6
9
  direction?: 'rtl' | 'ltr';
7
10
  }>;
8
11
  export declare const Alert: React.FC<AlertProps>;
@@ -1,2 +1,2 @@
1
- import{jsxs as t,jsx as r}from"react/jsx-runtime";import{Box as e}from"@mui/material";import i from"./assets/successIcon.svg.js";import s from"./assets/warningIcon.svg.js";import l from"./assets/errorIcon.svg.js";const n=({type:n,children:o,actions:a,width:d,direction:c="ltr"})=>t(e,{dir:null!=c?c:"ltr",sx:{padding:1,paddingLeft:"ltr"===c?2:1,paddingRight:"rtl"===c?2:1,background:t=>t.palette.brand.tertiary,borderRadius:1,color:t=>t.palette.onSurface.os0,display:"flex",alignItems:"center",gap:"11px",minWidth:"300px",maxWidth:null!=d?d:"624px",width:null!=d?d:"auto"},"data-testid":"Alert",children:[n&&t(e,{sx:{height:"40px",display:"flex",flexDirection:"column",justifyContent:"center"},"data-testid":"Alert.icon",children:["success"===n&&r("img",{src:i}),"error"===n&&r("img",{src:l}),"warning"===n&&r("img",{src:s})]}),r(e,{sx:{flexGrow:1},"data-testid":"Alert.content",children:o}),a&&r(e,{sx:{paddingLeft:"ltr"===c?"11px":void 0,paddingRight:"rtl"===c?"11px":void 0,borderLeft:t=>`${"ltr"===c?"1px":"0px"} solid ${t.palette.onSurface.os600}`,borderRight:t=>`${"rtl"===c?"1px":"0px"} solid ${t.palette.onSurface.os600}`,alignSelf:"stretch",display:"flex",flexDirection:"row",alignItems:"center"},"data-testid":"Alert.actions",children:a})]});export{n as Alert};
1
+ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Box as r}from"@mui/material";import i from"./assets/successIcon.svg.js";import s from"./assets/warningIcon.svg.js";import n from"./assets/errorIcon.svg.js";const a=({type:a,children:o,actions:d,width:l})=>t(r,{sx:{padding:1,paddingLeft:2,paddingRight:1,background:t=>t.palette.brand.tertiary,borderRadius:1,color:t=>t.palette.onSurface.os0,display:"flex",alignItems:"center",gap:"11px",minWidth:"300px",maxWidth:null!=l?l:"624px",width:null!=l?l:"auto"},"data-testid":"Alert",children:[a&&t(r,{sx:{height:"40px",display:"flex",flexDirection:"column",justifyContent:"center"},"data-testid":"Alert.icon",children:["success"===a&&e("img",{src:i}),"error"===a&&e("img",{src:n}),"warning"===a&&e("img",{src:s})]}),e(r,{sx:{flexGrow:1},"data-testid":"Alert.content",children:o}),d&&e(r,{sx:{paddingLeft:"11px",borderLeft:t=>`1px solid ${t.palette.onSurface.os600}`,alignSelf:"stretch",display:"flex",flexDirection:"row",alignItems:"center"},"data-testid":"Alert.actions",children:d})]});export{a as Alert};
2
2
  //# sourceMappingURL=Alert.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.js","sources":["../../../src/components/alert/Alert.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Box } from '@mui/material';\nimport successIcon from './assets/successIcon.svg';\nimport warningIcon from './assets/warningIcon.svg';\nimport errorIcon from './assets/errorIcon.svg';\nexport const Alert = ({ type, children, actions, width, direction = 'ltr' }) => {\n return (_jsxs(Box, { dir: direction !== null && direction !== void 0 ? direction : 'ltr', sx: {\n padding: 1,\n paddingLeft: direction === 'ltr' ? 2 : 1,\n paddingRight: direction === 'rtl' ? 2 : 1,\n background: (theme) => theme.palette.brand.tertiary,\n borderRadius: 1,\n color: (theme) => theme.palette.onSurface.os0,\n display: 'flex',\n alignItems: 'center',\n gap: '11px',\n minWidth: '300px',\n maxWidth: width !== null && width !== void 0 ? width : '624px',\n width: width !== null && width !== void 0 ? width : 'auto',\n }, \"data-testid\": \"Alert\", children: [type && (_jsxs(Box, { sx: {\n height: '40px',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n }, \"data-testid\": \"Alert.icon\", children: [type === 'success' && _jsx(\"img\", { src: successIcon }), type === 'error' && _jsx(\"img\", { src: errorIcon }), type === 'warning' && _jsx(\"img\", { src: warningIcon })] })), _jsx(Box, { sx: {\n flexGrow: 1,\n }, \"data-testid\": \"Alert.content\", children: children }), actions && (_jsx(Box, { sx: {\n paddingLeft: direction === 'ltr' ? '11px' : undefined,\n paddingRight: direction === 'rtl' ? '11px' : undefined,\n borderLeft: (theme) => `${direction === 'ltr' ? '1px' : '0px'} solid ${theme.palette.onSurface.os600}`,\n borderRight: (theme) => `${direction === 'rtl' ? '1px' : '0px'} solid ${theme.palette.onSurface.os600}`,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n }, \"data-testid\": \"Alert.actions\", children: actions }))] }));\n};\n//# sourceMappingURL=Alert.js.map"],"names":["Alert","type","children","actions","width","direction","_jsxs","Box","dir","sx","padding","paddingLeft","paddingRight","background","theme","palette","brand","tertiary","borderRadius","color","onSurface","os0","display","alignItems","gap","minWidth","maxWidth","height","flexDirection","justifyContent","_jsx","src","successIcon","errorIcon","warningIcon","flexGrow","undefined","borderLeft","os600","borderRight","alignSelf"],"mappings":"qNAKY,MAACA,EAAQ,EAAGC,OAAMC,WAAUC,UAASC,QAAOC,YAAY,SACxDC,EAAMC,EAAK,CAAEC,IAAKH,QAA6CA,EAAY,MAAOI,GAAI,CACtFC,QAAS,EACTC,YAA2B,QAAdN,EAAsB,EAAI,EACvCO,aAA4B,QAAdP,EAAsB,EAAI,EACxCQ,WAAaC,GAAUA,EAAMC,QAAQC,MAAMC,SAC3CC,aAAc,EACdC,MAAQL,GAAUA,EAAMC,QAAQK,UAAUC,IAC1CC,QAAS,OACTC,WAAY,SACZC,IAAK,OACLC,SAAU,QACVC,SAAUtB,QAAqCA,EAAQ,QACvDA,MAAOA,QAAqCA,EAAQ,QACrD,cAAe,QAASF,SAAU,CAACD,GAASK,EAAMC,EAAK,CAAEE,GAAI,CACpDkB,OAAQ,OACRL,QAAS,OACTM,cAAe,SACfC,eAAgB,UACjB,cAAe,aAAc3B,SAAU,CAAU,YAATD,GAAsB6B,EAAK,MAAO,CAAEC,IAAKC,IAAyB,UAAT/B,GAAoB6B,EAAK,MAAO,CAAEC,IAAKE,IAAuB,YAAThC,GAAsB6B,EAAK,MAAO,CAAEC,IAAKG,OAAqBJ,EAAKvB,EAAK,CAAEE,GAAI,CACnO0B,SAAU,GACX,cAAe,gBAAiBjC,SAAUA,IAAaC,GAAY2B,EAAKvB,EAAK,CAAEE,GAAI,CAClFE,YAA2B,QAAdN,EAAsB,YAAS+B,EAC5CxB,aAA4B,QAAdP,EAAsB,YAAS+B,EAC7CC,WAAavB,GAAU,GAAiB,QAAdT,EAAsB,MAAQ,eAAeS,EAAMC,QAAQK,UAAUkB,QAC/FC,YAAczB,GAAU,GAAiB,QAAdT,EAAsB,MAAQ,eAAeS,EAAMC,QAAQK,UAAUkB,QAChGE,UAAW,UACXlB,QAAS,OACTM,cAAe,MACfL,WAAY,UACb,cAAe,gBAAiBrB,SAAUC"}
1
+ {"version":3,"file":"Alert.js","sources":["../../../src/components/alert/Alert.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Box } from '@mui/material';\nimport successIcon from './assets/successIcon.svg';\nimport warningIcon from './assets/warningIcon.svg';\nimport errorIcon from './assets/errorIcon.svg';\nexport const Alert = ({ type, children, actions, width }) => {\n return (_jsxs(Box, { sx: {\n padding: 1,\n paddingLeft: 2,\n paddingRight: 1,\n background: (theme) => theme.palette.brand.tertiary,\n borderRadius: 1,\n color: (theme) => theme.palette.onSurface.os0,\n display: 'flex',\n alignItems: 'center',\n gap: '11px',\n minWidth: '300px',\n maxWidth: width !== null && width !== void 0 ? width : '624px',\n width: width !== null && width !== void 0 ? width : 'auto',\n }, \"data-testid\": \"Alert\", children: [type && (_jsxs(Box, { sx: {\n height: '40px',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n }, \"data-testid\": \"Alert.icon\", children: [type === 'success' && _jsx(\"img\", { src: successIcon }), type === 'error' && _jsx(\"img\", { src: errorIcon }), type === 'warning' && _jsx(\"img\", { src: warningIcon })] })), _jsx(Box, { sx: {\n flexGrow: 1,\n }, \"data-testid\": \"Alert.content\", children: children }), actions && (_jsx(Box, { sx: {\n paddingLeft: '11px',\n borderLeft: (theme) => `1px solid ${theme.palette.onSurface.os600}`,\n alignSelf: 'stretch',\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'center',\n }, \"data-testid\": \"Alert.actions\", children: actions }))] }));\n};\n//# sourceMappingURL=Alert.js.map"],"names":["Alert","type","children","actions","width","_jsxs","Box","sx","padding","paddingLeft","paddingRight","background","theme","palette","brand","tertiary","borderRadius","color","onSurface","os0","display","alignItems","gap","minWidth","maxWidth","height","flexDirection","justifyContent","_jsx","src","successIcon","errorIcon","warningIcon","flexGrow","borderLeft","os600","alignSelf"],"mappings":"qNAKY,MAACA,EAAQ,EAAGC,OAAMC,WAAUC,UAASC,WACrCC,EAAMC,EAAK,CAAEC,GAAI,CACjBC,QAAS,EACTC,YAAa,EACbC,aAAc,EACdC,WAAaC,GAAUA,EAAMC,QAAQC,MAAMC,SAC3CC,aAAc,EACdC,MAAQL,GAAUA,EAAMC,QAAQK,UAAUC,IAC1CC,QAAS,OACTC,WAAY,SACZC,IAAK,OACLC,SAAU,QACVC,SAAUpB,QAAqCA,EAAQ,QACvDA,MAAOA,QAAqCA,EAAQ,QACrD,cAAe,QAASF,SAAU,CAACD,GAASI,EAAMC,EAAK,CAAEC,GAAI,CACpDkB,OAAQ,OACRL,QAAS,OACTM,cAAe,SACfC,eAAgB,UACjB,cAAe,aAAczB,SAAU,CAAU,YAATD,GAAsB2B,EAAK,MAAO,CAAEC,IAAKC,IAAyB,UAAT7B,GAAoB2B,EAAK,MAAO,CAAEC,IAAKE,IAAuB,YAAT9B,GAAsB2B,EAAK,MAAO,CAAEC,IAAKG,OAAqBJ,EAAKtB,EAAK,CAAEC,GAAI,CACnO0B,SAAU,GACX,cAAe,gBAAiB/B,SAAUA,IAAaC,GAAYyB,EAAKtB,EAAK,CAAEC,GAAI,CAClFE,YAAa,OACbyB,WAAatB,GAAU,aAAaA,EAAMC,QAAQK,UAAUiB,QAC5DC,UAAW,UACXhB,QAAS,OACTM,cAAe,MACfL,WAAY,UACb,cAAe,gBAAiBnB,SAAUC"}
@@ -1,2 +1,2 @@
1
- import{jsxs as r,jsx as t}from"react/jsx-runtime";import"tslib";import{useTheme as o,lighten as i,Stack as e,Box as a,Typography as s}from"@mui/material";import"../../design/skoda/theme.js";import{useMemo as m}from"react";import"@mui/material/styles";import"../accordion/accordion.js";import"../backdrop/backdrop.js";import"../button/button.js";import"../cardContainer/cardContainer.js";import"../cardMenu/cardMenu.js";import"../checkbox/checkbox.js";import"../chip/chipImage/chipImage.js";import"../chip/regular/chip.js";import"../chip/chipMultiselect/multiSelectChip.js";import"../chip/chipDropdownChildren/chipDropdownChildren.js";import"../controls/controls.js";import"../divider/divider.js";import"../drawer/drawer.js";import"../flag/flag.js";import"@mui/material/Grid";import{Icon as n}from"../icon/icon.js";import"../icon/icon.definitions.js";import"../indicator/indicator.js";import"../label/label.js";import"../labelCO2/labelCO2.js";import"../labelFeature/labelFeature.js";import"../labelPromotional/labelPromotional.js";import"../labelStatus/labelStatus.js";import"../menu/menu.js";import"@mui/material/MenuItem";import"@mui/material/MobileStepper";import"../mobileStepper/mobileStepperButton.js";import"../modal/modal.js";import"../modal/modalTitle.js";import"../numbering/numbering.js";import"../pagination/pagination.js";import"../progressBar/progressBar.js";import"../radioButton/radioButton.js";import"../selectInput/selectInput.js";import"../slider/slider.js";import"../snackbar/snackbar.js";import"../stepper/stepper.js";import"../textArea/textArea.js";import"../common/styled/textFieldStyled.js";import"../helperTextContent/index.js";import"../toggleSwitch/toggleSwitch.js";import"../avatar/Avatar.js";import"../iconButton/index.js";import"../alert/AlertButton.js";import"../../organisms/gallery/Gallery.js";import"../../organisms/gallery/GalleryItem.js";import"minimatch";import"../../utils/enum.js";import"../../organisms/cardOwnedVehicle/cardOwnedVehicle.js";import"../../organisms/cardPhotoAdjustable/cardPhotoAdjustable.js";import"../../organisms/cardPhotoFixed/cardPhotoFixed.js";import"../../organisms/cardPromoVehicle/cardPromoVehicleComponent.js";import"../../organisms/common/styled/cardStandardWrapperStyled.js";import"../../organisms/cardTypeOnly/cardTypeOnly.js";import"embla-carousel-react";import"embla-carousel-class-names";import"embla-carousel-autoplay";import"../../organisms/carousel/styledComponents/styledCarouselHorizontal.js";import"../../organisms/carousel/styledComponents/styledCarouselVertical.js";import"../../organisms/heroImageCard/heroImageCard.js";import"@googlemaps/react-wrapper";import"@googlemaps/markerclusterer";import"../../organisms/maps/utils/mapIcons.js";import"../../organisms/maps/mapComponents/mapStyled.js";import"../../organisms/shortcutLink/shortcutLink.js";import"../../organisms/textCta/textCta.js";import"../../organisms/tile/tile.js";import"@mui/system";import"../../organisms/carousel2/galleryCarousel/galleryContext.js";import"../../organisms/carousel2/galleryCarousel/galleryItemContext.js";import"../../organisms/carousel2/heroCarousel/heroCarouselContext.js";import"../../organisms/notification/Notification.js";import"../../organisms/notification/NotificationCenter.js";import"../../layout/Header/HeaderContext.js";import"../../layout/Header/HeaderButton.js";import"../../layout/Header/HeaderNavigationHero.js";import"../../layout/Header/HeaderNavigationLink.js";import"../../layout/Header/HeaderNavigationMenu.js";import"../../layout/Header/PredefinedHeaderButtons.js";import"../../layout/Header/HeaderOverheadItem.js";import"../../layout/SideMenu/SideMenuItem.js";import"@mui/material/Unstable_Grid2";import"../../layout/SecondaryNavigation/SecondaryNavigationCta.js";import"../../layout/SecondaryNavigation/SecondaryNavigationItem.js";import"@mui/material/Container";import"../../production/Button/Button.js";const p=({children:p,variant:l="info",buttons:d})=>{const c=o(),[u,j]=m((()=>{switch(l){case"error":return[c.palette.error.main,i(c.palette.error.light,.9)];case"warning":return[c.palette.warning.main,i(c.palette.warning.light,.9)];default:return[c.palette.info.main,i(c.palette.info.light,.9)]}}),[l,c]);return r(e,{direction:{md:"row",sm:"column"},spacing:0,sx:{borderLeft:"6px solid",alignItems:"flex-start",borderColor:u,backgroundColor:j},"data-testid":"Banner",children:[r(e,{direction:"row",spacing:2,sx:{padding:{md:"12px 16px",sm:"16px",xs:"11px 16px"},flexGrow:1,alignItems:"center"},children:[t(n,{name:"info"===l?"circle-info":"circle-exclamation",iconStyle:"filled",color:l,sx:{alignSelf:"flex-start",color:u,marginTop:{lg:"2px !important",md:"1px !important",sm:"-2px !important"}}}),t(a,{children:"string"==typeof p?t(s,{children:p}):p})]}),d&&t(e,{direction:"row",spacing:1,useFlexGap:!0,sx:{padding:"8px 16px",textWrap:"nowrap",flexWrap:"wrap",alignSelf:"center",marginRight:"auto"},"data-testid":"Banner.buttons",children:d})]})};export{p as Banner};
1
+ import{jsxs as t,jsx as r}from"react/jsx-runtime";import"tslib";import{useMemo as o}from"react";import{useTheme as i,lighten as e,Stack as a,Box as s,Typography as m}from"@mui/material";import"@emotion/react";import"@emotion/cache";import"stylis";import"stylis-plugin-rtl";import"../../design/skoda/theme.js";import"../../design/skoda/theme.breakpoints.js";import"@mui/material/styles";import"@mui/system";import"../accordion/accordion.js";import"../backdrop/backdrop.js";import"../button/button.js";import"../cardContainer/cardContainer.js";import"../cardMenu/cardMenu.js";import"../checkbox/checkbox.js";import"../chip/chipImage/chipImage.js";import"../chip/regular/chip.js";import"../chip/chipMultiselect/multiSelectChip.js";import"../chip/chipDropdownChildren/chipDropdownChildren.js";import"../controls/controls.js";import"../divider/divider.js";import"../drawer/drawer.js";import"../flag/flag.js";import"@mui/material/Grid";import{Icon as n}from"../icon/icon.js";import"../icon/icon.definitions.js";import"../indicator/indicator.js";import"../label/label.js";import"../labelCO2/labelCO2.js";import"../labelFeature/labelFeature.js";import"../labelPromotional/labelPromotional.js";import"../labelStatus/labelStatus.js";import"../menu/menu.js";import"@mui/material/MenuItem";import"@mui/material/MobileStepper";import"../mobileStepper/mobileStepperButton.js";import"../modal/modal.js";import"../modal/modalTitle.js";import"../numbering/numbering.js";import"../pagination/pagination.js";import"../progressBar/progressBar.js";import"../radioButton/radioButton.js";import"../selectInput/selectInput.js";import"../slider/slider.js";import"../snackbar/snackbar.js";import"../stepper/stepper.js";import"../textArea/textArea.js";import"../common/styled/textFieldStyled.js";import"../helperTextContent/index.js";import"../toggleSwitch/toggleSwitch.js";import"../avatar/Avatar.js";import"../iconButton/index.js";import"../alert/AlertButton.js";import"../../organisms/gallery/Gallery.js";import"../../organisms/gallery/GalleryItem.js";import"minimatch";import"../../utils/enum.js";import"../../organisms/cardOwnedVehicle/cardOwnedVehicle.js";import"../../organisms/cardPhotoAdjustable/cardPhotoAdjustable.js";import"../../organisms/cardPhotoFixed/cardPhotoFixed.js";import"../../organisms/cardPromoVehicle/cardPromoVehicleComponent.js";import"../../organisms/common/styled/cardStandardWrapperStyled.js";import"../../organisms/cardTypeOnly/cardTypeOnly.js";import"embla-carousel-react";import"embla-carousel-class-names";import"embla-carousel-autoplay";import"../../organisms/carousel/styledComponents/styledCarouselHorizontal.js";import"../../organisms/carousel/styledComponents/styledCarouselVertical.js";import"../../organisms/heroImageCard/heroImageCard.js";import"@googlemaps/react-wrapper";import"@googlemaps/markerclusterer";import"../../organisms/maps/utils/mapIcons.js";import"../../organisms/maps/mapComponents/mapStyled.js";import"../../organisms/shortcutLink/shortcutLink.js";import"../../organisms/textCta/textCta.js";import"../../organisms/tile/tile.js";import"../../organisms/carousel2/galleryCarousel/galleryContext.js";import"../../organisms/carousel2/galleryCarousel/galleryItemContext.js";import"../../organisms/carousel2/heroCarousel/heroCarouselContext.js";import"../../organisms/notification/Notification.js";import"../../organisms/notification/NotificationCenter.js";import"../../layout/Header/HeaderContext.js";import"../../layout/Header/HeaderButton.js";import"../../layout/Header/HeaderNavigationHero.js";import"../../layout/Header/HeaderNavigationLink.js";import"../../layout/Header/HeaderNavigationMenu.js";import"../../layout/Header/PredefinedHeaderButtons.js";import"../../layout/Header/HeaderOverheadItem.js";import"../../layout/SideMenu/SideMenuItem.js";import"../../layout/Footer/PredefinedFooterIconButtons.js";import"../../layout/SecondaryNavigation/SecondaryNavigationCta.js";import"../../layout/SecondaryNavigation/SecondaryNavigationItem.js";import"@mui/material/Container";import"../../production/Button/Button.js";const p=({children:p,variant:l="info",buttons:c})=>{const d=i(),[u,j]=o((()=>{switch(l){case"error":return[d.palette.error.main,e(d.palette.error.light,.9)];case"warning":return[d.palette.warning.main,e(d.palette.warning.light,.9)];default:return[d.palette.info.main,e(d.palette.info.light,.9)]}}),[l,d]);return t(a,{direction:{md:"row",sm:"column"},spacing:0,sx:{borderLeft:"6px solid",alignItems:"flex-start",borderColor:u,backgroundColor:j},"data-testid":"Banner",children:[t(a,{direction:"row",spacing:2,sx:{padding:{md:"12px 16px",sm:"16px",xs:"11px 16px"},flexGrow:1,alignItems:"center"},children:[r(n,{name:"info"===l?"circle-info":"circle-exclamation",iconStyle:"filled",color:l,sx:{alignSelf:"flex-start",color:u,marginTop:{lg:"2px !important",md:"1px !important",sm:"-2px !important"}}}),r(s,{children:"string"==typeof p?r(m,{children:p}):p})]}),c&&r(a,{direction:"row",spacing:1,useFlexGap:!0,sx:{padding:"8px 16px",textWrap:"nowrap",flexWrap:"wrap",alignSelf:"center",marginRight:"auto"},"data-testid":"Banner.buttons",children:c})]})};export{p as Banner};
2
2
  //# sourceMappingURL=banner.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"banner.js","sources":["../../../src/components/banner/banner.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Icon } from '@/src';\nimport { Box, Stack, Typography, lighten, useTheme } from '@mui/material';\nimport { useMemo } from 'react';\n/**\n * Alert notification banner\n */\nexport const Banner = ({ children, variant = 'info', buttons }) => {\n const theme = useTheme();\n const [borderColor, backgroundColor] = useMemo(() => {\n switch (variant) {\n case 'error':\n return [theme.palette.error.main, lighten(theme.palette.error.light, 0.9)];\n case 'warning':\n return [theme.palette.warning.main, lighten(theme.palette.warning.light, 0.9)];\n case 'info':\n default:\n return [theme.palette.info.main, lighten(theme.palette.info.light, 0.9)];\n }\n }, [variant, theme]);\n return (_jsxs(Stack, { direction: { md: 'row', sm: 'column' }, spacing: 0, sx: {\n borderLeft: '6px solid',\n alignItems: 'flex-start',\n borderColor,\n backgroundColor,\n }, \"data-testid\": \"Banner\", children: [_jsxs(Stack, { direction: \"row\", spacing: 2, sx: { padding: { md: '12px 16px', sm: '16px', xs: '11px 16px' }, flexGrow: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: variant === 'info' ? 'circle-info' : 'circle-exclamation', iconStyle: \"filled\", color: variant, sx: {\n alignSelf: 'flex-start',\n color: borderColor,\n marginTop: { lg: '2px !important', md: '1px !important', sm: '-2px !important' },\n } }), _jsx(Box, { children: typeof children === 'string' ? _jsx(Typography, { children: children }) : children })] }), buttons && (_jsx(Stack, { direction: \"row\", spacing: 1, useFlexGap: true, sx: { padding: '8px 16px', textWrap: 'nowrap', flexWrap: 'wrap', alignSelf: 'center', marginRight: 'auto' }, \"data-testid\": \"Banner.buttons\", children: buttons }))] }));\n};\n//# sourceMappingURL=banner.js.map"],"names":["Banner","children","variant","buttons","theme","useTheme","borderColor","backgroundColor","useMemo","palette","error","main","lighten","light","warning","info","_jsxs","Stack","direction","md","sm","spacing","sx","borderLeft","alignItems","padding","xs","flexGrow","_jsx","Icon","name","iconStyle","color","alignSelf","marginTop","lg","Box","Typography","useFlexGap","textWrap","flexWrap","marginRight"],"mappings":"izHAOY,MAACA,EAAS,EAAGC,WAAUC,UAAU,OAAQC,cACjD,MAAMC,EAAQC,KACPC,EAAaC,GAAmBC,GAAQ,KAC3C,OAAQN,GACJ,IAAK,QACD,MAAO,CAACE,EAAMK,QAAQC,MAAMC,KAAMC,EAAQR,EAAMK,QAAQC,MAAMG,MAAO,KACzE,IAAK,UACD,MAAO,CAACT,EAAMK,QAAQK,QAAQH,KAAMC,EAAQR,EAAMK,QAAQK,QAAQD,MAAO,KAE7E,QACI,MAAO,CAACT,EAAMK,QAAQM,KAAKJ,KAAMC,EAAQR,EAAMK,QAAQM,KAAKF,MAAO,KAC1E,GACF,CAACX,EAASE,IACb,OAAQY,EAAMC,EAAO,CAAEC,UAAW,CAAEC,GAAI,MAAOC,GAAI,UAAYC,QAAS,EAAGC,GAAI,CACvEC,WAAY,YACZC,WAAY,aACZlB,cACAC,mBACD,cAAe,SAAUN,SAAU,CAACe,EAAMC,EAAO,CAAEC,UAAW,MAAOG,QAAS,EAAGC,GAAI,CAAEG,QAAS,CAAEN,GAAI,YAAaC,GAAI,OAAQM,GAAI,aAAeC,SAAU,EAAGH,WAAY,UAAYvB,SAAU,CAAC2B,EAAKC,EAAM,CAAEC,KAAkB,SAAZ5B,EAAqB,cAAgB,qBAAsB6B,UAAW,SAAUC,MAAO9B,EAASoB,GAAI,CACxSW,UAAW,aACXD,MAAO1B,EACP4B,UAAW,CAAEC,GAAI,iBAAkBhB,GAAI,iBAAkBC,GAAI,sBAC3DQ,EAAKQ,EAAK,CAAEnC,SAA8B,iBAAbA,EAAwB2B,EAAKS,EAAY,CAAEpC,SAAUA,IAAcA,OAAiBE,GAAYyB,EAAKX,EAAO,CAAEC,UAAW,MAAOG,QAAS,EAAGiB,YAAY,EAAMhB,GAAI,CAAEG,QAAS,WAAYc,SAAU,SAAUC,SAAU,OAAQP,UAAW,SAAUQ,YAAa,QAAU,cAAe,iBAAkBxC,SAAUE,MAAiB"}
1
+ {"version":3,"file":"banner.js","sources":["../../../src/components/banner/banner.tsx"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Icon } from '@/src';\nimport { Box, Stack, Typography, lighten, useTheme } from '@mui/material';\nimport { useMemo } from 'react';\n/**\n * Alert notification banner\n */\nexport const Banner = ({ children, variant = 'info', buttons }) => {\n const theme = useTheme();\n const [borderColor, backgroundColor] = useMemo(() => {\n switch (variant) {\n case 'error':\n return [theme.palette.error.main, lighten(theme.palette.error.light, 0.9)];\n case 'warning':\n return [theme.palette.warning.main, lighten(theme.palette.warning.light, 0.9)];\n case 'info':\n default:\n return [theme.palette.info.main, lighten(theme.palette.info.light, 0.9)];\n }\n }, [variant, theme]);\n return (_jsxs(Stack, { direction: { md: 'row', sm: 'column' }, spacing: 0, sx: {\n borderLeft: '6px solid',\n alignItems: 'flex-start',\n borderColor,\n backgroundColor,\n }, \"data-testid\": \"Banner\", children: [_jsxs(Stack, { direction: \"row\", spacing: 2, sx: { padding: { md: '12px 16px', sm: '16px', xs: '11px 16px' }, flexGrow: 1, alignItems: 'center' }, children: [_jsx(Icon, { name: variant === 'info' ? 'circle-info' : 'circle-exclamation', iconStyle: \"filled\", color: variant, sx: {\n alignSelf: 'flex-start',\n color: borderColor,\n marginTop: { lg: '2px !important', md: '1px !important', sm: '-2px !important' },\n } }), _jsx(Box, { children: typeof children === 'string' ? _jsx(Typography, { children: children }) : children })] }), buttons && (_jsx(Stack, { direction: \"row\", spacing: 1, useFlexGap: true, sx: { padding: '8px 16px', textWrap: 'nowrap', flexWrap: 'wrap', alignSelf: 'center', marginRight: 'auto' }, \"data-testid\": \"Banner.buttons\", children: buttons }))] }));\n};\n//# sourceMappingURL=banner.js.map"],"names":["Banner","children","variant","buttons","theme","useTheme","borderColor","backgroundColor","useMemo","palette","error","main","lighten","light","warning","info","_jsxs","Stack","direction","md","sm","spacing","sx","borderLeft","alignItems","padding","xs","flexGrow","_jsx","Icon","name","iconStyle","color","alignSelf","marginTop","lg","Box","Typography","useFlexGap","textWrap","flexWrap","marginRight"],"mappings":"88HAOY,MAACA,EAAS,EAAGC,WAAUC,UAAU,OAAQC,cACjD,MAAMC,EAAQC,KACPC,EAAaC,GAAmBC,GAAQ,KAC3C,OAAQN,GACJ,IAAK,QACD,MAAO,CAACE,EAAMK,QAAQC,MAAMC,KAAMC,EAAQR,EAAMK,QAAQC,MAAMG,MAAO,KACzE,IAAK,UACD,MAAO,CAACT,EAAMK,QAAQK,QAAQH,KAAMC,EAAQR,EAAMK,QAAQK,QAAQD,MAAO,KAE7E,QACI,MAAO,CAACT,EAAMK,QAAQM,KAAKJ,KAAMC,EAAQR,EAAMK,QAAQM,KAAKF,MAAO,KAC1E,GACF,CAACX,EAASE,IACb,OAAQY,EAAMC,EAAO,CAAEC,UAAW,CAAEC,GAAI,MAAOC,GAAI,UAAYC,QAAS,EAAGC,GAAI,CACvEC,WAAY,YACZC,WAAY,aACZlB,cACAC,mBACD,cAAe,SAAUN,SAAU,CAACe,EAAMC,EAAO,CAAEC,UAAW,MAAOG,QAAS,EAAGC,GAAI,CAAEG,QAAS,CAAEN,GAAI,YAAaC,GAAI,OAAQM,GAAI,aAAeC,SAAU,EAAGH,WAAY,UAAYvB,SAAU,CAAC2B,EAAKC,EAAM,CAAEC,KAAkB,SAAZ5B,EAAqB,cAAgB,qBAAsB6B,UAAW,SAAUC,MAAO9B,EAASoB,GAAI,CACxSW,UAAW,aACXD,MAAO1B,EACP4B,UAAW,CAAEC,GAAI,iBAAkBhB,GAAI,iBAAkBC,GAAI,sBAC3DQ,EAAKQ,EAAK,CAAEnC,SAA8B,iBAAbA,EAAwB2B,EAAKS,EAAY,CAAEpC,SAAUA,IAAcA,OAAiBE,GAAYyB,EAAKX,EAAO,CAAEC,UAAW,MAAOG,QAAS,EAAGiB,YAAY,EAAMhB,GAAI,CAAEG,QAAS,WAAYc,SAAU,SAAUC,SAAU,OAAQP,UAAW,SAAUQ,YAAa,QAAU,cAAe,iBAAkBxC,SAAUE,MAAiB"}
@@ -0,0 +1,3 @@
1
+ import { BoxProps as MuiBoxProps } from '@mui/material';
2
+ export type BoxProps = MuiBoxProps;
3
+ export declare const Box: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export { Box } from '@mui/material';
@@ -2,6 +2,7 @@ export * from './accordion';
2
2
  export * from './backdrop';
3
3
  export * from './button';
4
4
  export * from './banner';
5
+ export * from './box';
5
6
  export * from './cardContainer';
6
7
  export * from './cardMenu';
7
8
  export * from './checkbox';
@@ -1,2 +1,2 @@
1
- import{__rest as e}from"tslib";import{jsxs as t,jsx as o,Fragment as i}from"react/jsx-runtime";import{forwardRef as r,useState as l,useCallback as n,useEffect as a}from"react";import{styled as p}from"@mui/material/styles";import c from"@mui/material/MenuItem";import m from"@mui/material/MenuList";import g from"@mui/material/Paper";import s from"@mui/material/ListItemText";import u from"@mui/material/ListItemIcon";import{Checkbox as d}from"../checkbox/checkbox.js";import{ToggleSwitch as h}from"../toggleSwitch/toggleSwitch.js";import{Icon as f}from"../icon/icon.js";import"../icon/icon.definitions.js";import x from"@mui/material/Divider";import{Typography as b}from"@mui/material";import{Flag as S}from"../flag/flag.js";const v=r(((r,p)=>{var{setIsOpen:g,reactHook:v,items:M,hasIcon:L,multipleSelection:j,groupToggleSelection:k,groupLabel:y="",toggleLabel:T}=r,O=e(r,["setIsOpen","reactHook","items","hasIcon","multipleSelection","groupToggleSelection","groupLabel","toggleLabel"]);const{state:w,setState:R}=v,[C,W]=l(!1),H=n((()=>{((e,t,o,i)=>{const r=!e;o((()=>r?[...t]:[])),i(r)})(C,M,R,W)}),[M,R,C]),D=n(((e,t)=>{((e,t,o,i,r,l)=>{const n=e?i.includes(o):i.find((e=>e.value.toString()===o)),a=e?[o]:l.filter((e=>e.value.toString()===o));r(t?n?i.filter((t=>e?t!==o:t.value.toString()!==o)):e=>[...a,...e]:n?[]:a)})(t,j,e.currentTarget.id,w,R,M)}),[M,w,j,R]),P=n(((e,i)=>{const r=e?w.includes(i):w.some((e=>e.value===i.value)),l=e?i:i.title,n=e?i:i.value;return t(c,{id:n,selected:r,onClick:t=>D(t,e),children:[L&&!e&&o(u,{children:o(S,{flag:i.flag,title:i.title})}),o(s,{children:o(b,{noWrap:!0,children:l})}),j&&o(d,{checked:r})]},n)}),[w,L,j,D]);return a((()=>{((e,t,o,i,r)=>{e&&t&&(i.length===o.length&&r(!0),i.length<o.length&&r(!1))})(j,k,M,w,W)}),[k,M,w,j]),t(I,Object.assign({},O,{ref:p,groupLabel:y,groupToggleSelection:k,multipleSelection:j.toString(),sx:y||k&&j?{paddingTop:"0px"}:{},children:[y.length>0&&t(i,{children:[t(c,{children:[o(s,{children:o(b,{noWrap:!0,children:y})}),o(u,{onClick:()=>g(!1),children:o(f,{name:"close"})})]}),o(x,{variant:"middle"})]}),j&&k&&o(i,{children:t(c,{className:"menu-select-all",children:[o(s,{children:T||"Select all"}),o(h,{onClick:H,checked:C})]})}),o(m,{children:M.map((e=>P("string"==typeof e,e)))})]}))})),I=p(g,{shouldForwardProp:e=>"multipleSelection"!==e&&"groupLabel"!==e&&"groupToggleSelection"!==e})((t=>{var{theme:o}=t;const i=e(t,["theme"]);let r={};const l={height:"48px",padding:"0px 24px"};return"true"===i.multipleSelection&&(l.paddingRight="16px"),r=Object.assign(Object.assign({},r),{boxShadow:"0px 3px 8px rgba(0, 0, 0, 0.15)","& .MuiList-root":{maxHeight:"240px",overflow:"overlay",padding:"0px",borderRadius:"4px"},"& .MuiTypography-root":{fontSize:"16px",lineHeight:"24px",color:o.palette.onSurface.os900,fontWeight:"500",paddingRight:"16px"},"& li > .MuiListItemIcon-root":{minWidth:"0px",marginRight:"16px"},"& .MuiDivider-root":{marginTop:"0px",marginBottom:"0px"},"& li.menu-select-all":{"& .MuiTypography-root":{textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"},"&:hover":{backgroundColor:o.palette.onSurface.os0}},"& .MuiMenuItem-root":l}),i.groupLabel&&i.groupLabel.length>0?r=Object.assign(Object.assign({},r),{"& > .MuiMenuItem-root:first-of-type":{borderRadius:"4px",paddingRight:"21px","& .MuiTypography-root":{fontWeight:"700"},"& .MuiListItemIcon-root":{marginRight:"0px",color:o.palette.onSurface.os900,"& .MuiIcon-root:before":{position:"relative",top:"-3px"}},"&:hover":{backgroundColor:`${o.palette.background.primary}`}}}):i.multipleSelection&&i.groupToggleSelection&&(r=Object.assign(Object.assign({},r),{"& > .MuiMenuItem-root:first-of-type":{borderRadius:"4px"}})),r}));export{v as Menu};
1
+ import{__rest as e}from"tslib";import{jsxs as t,jsx as o,Fragment as i}from"react/jsx-runtime";import{forwardRef as r,useState as l,useCallback as n,useEffect as a}from"react";import{styled as p}from"@mui/material/styles";import c from"@mui/material/MenuItem";import m from"@mui/material/MenuList";import g from"@mui/material/Paper";import s from"@mui/material/ListItemText";import u from"@mui/material/ListItemIcon";import{Checkbox as d}from"../checkbox/checkbox.js";import{ToggleSwitch as h}from"../toggleSwitch/toggleSwitch.js";import{Icon as f}from"../icon/icon.js";import"../icon/icon.definitions.js";import x from"@mui/material/Divider";import{Typography as b}from"@mui/material";import{Flag as S}from"../flag/flag.js";const v=r(((r,p)=>{var{setIsOpen:g,reactHook:v,items:I,hasIcon:L,multipleSelection:j,groupToggleSelection:k,groupLabel:y="",toggleLabel:T}=r,O=e(r,["setIsOpen","reactHook","items","hasIcon","multipleSelection","groupToggleSelection","groupLabel","toggleLabel"]);const{state:w,setState:R}=v,[C,W]=l(!1),H=n((()=>{((e,t,o,i)=>{const r=!e;o((()=>r?[...t]:[])),i(r)})(C,I,R,W)}),[I,R,C]),D=n(((e,t)=>{((e,t,o,i,r,l)=>{const n=e?i.includes(o):i.find((e=>e.value.toString()===o)),a=e?[o]:l.filter((e=>e.value.toString()===o));r(t?n?i.filter((t=>e?t!==o:t.value.toString()!==o)):e=>[...a,...e]:n?[]:a)})(t,j,e.currentTarget.id,w,R,I)}),[I,w,j,R]),F=n(((e,i)=>{const r=e?w.includes(i):w.some((e=>e.value===i.value)),l=e?i:i.title,n=e?i:i.value;return t(c,{id:n,selected:r,onClick:t=>D(t,e),children:[L&&!e&&o(u,{children:o(S,{flag:i.flag,title:i.title})}),o(s,{children:o(b,{noWrap:!0,children:l})}),j&&o(d,{checked:r})]},n)}),[w,L,j,D]);return a((()=>{((e,t,o,i,r)=>{e&&t&&(i.length===o.length&&r(!0),i.length<o.length&&r(!1))})(j,k,I,w,W)}),[k,I,w,j]),t(M,Object.assign({},O,{ref:p,groupLabel:y,groupToggleSelection:k,multipleSelection:j.toString(),sx:y||k&&j?{paddingTop:"0px"}:{},children:[y.length>0&&t(i,{children:[t(c,{children:[o(s,{children:o(b,{noWrap:!0,children:y})}),o(u,{onClick:()=>g(!1),children:o(f,{name:"close"})})]}),o(x,{variant:"middle"})]}),j&&k&&o(i,{children:t(c,{className:"menu-select-all",children:[o(s,{children:T||"Select all"}),o(h,{onClick:H,checked:C})]})}),o(m,{children:I.map((e=>F("string"==typeof e,e)))})]}))})),M=p(g,{shouldForwardProp:e=>"multipleSelection"!==e&&"groupLabel"!==e&&"groupToggleSelection"!==e})((t=>{var{theme:o}=t;const i=e(t,["theme"]);let r={};const l={height:"48px",padding:"0px 24px"};return"true"===i.multipleSelection&&(l.paddingRight="16px"),r=Object.assign(Object.assign({},r),{boxShadow:"0px 3px 8px rgba(0, 0, 0, 0.15)","& .MuiList-root":{maxHeight:"240px",overflow:"overlay",padding:"0px",borderRadius:"4px"},"& .MuiTypography-root":{fontSize:"16px",lineHeight:"24px",color:o.palette.onSurface.os900,fontWeight:"500",paddingRight:0},"& li > .MuiListItemIcon-root":{minWidth:"0px",marginRight:"16px"},"& .MuiDivider-root":{marginTop:"0px",marginBottom:"0px"},"& li.menu-select-all":{"& .MuiTypography-root":{textOverflow:"ellipsis",overflow:"hidden",whiteSpace:"nowrap"},"&:hover":{backgroundColor:o.palette.onSurface.os0}},"& .MuiMenuItem-root":l,"& .MuiFormControlLabel-root":{marginLeft:"16px",marginRight:0}}),i.groupLabel&&i.groupLabel.length>0?r=Object.assign(Object.assign({},r),{"& > .MuiMenuItem-root:first-of-type":{borderRadius:"4px",paddingRight:"21px","& .MuiTypography-root":{fontWeight:"700"},"& .MuiListItemIcon-root":{marginRight:"0px",color:o.palette.onSurface.os900,"& .MuiIcon-root:before":{position:"relative",top:"-3px"}},"&:hover":{backgroundColor:`${o.palette.background.primary}`}}}):i.multipleSelection&&i.groupToggleSelection&&(r=Object.assign(Object.assign({},r),{"& > .MuiMenuItem-root:first-of-type":{borderRadius:"4px"}})),r}));export{v as Menu};
2
2
  //# sourceMappingURL=menu.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { styled } from '@mui/material/styles';\nimport MenuItem from '@mui/material/MenuItem';\nimport MenuList from '@mui/material/MenuList';\nimport MuiPaper from '@mui/material/Paper';\nimport ListItemText from '@mui/material/ListItemText';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport { Checkbox } from '../checkbox';\nimport { ToggleSwitch } from '../toggleSwitch';\nimport { Icon } from '../icon';\nimport Divider from '@mui/material/Divider';\nimport { Typography } from '@mui/material';\nimport { Flag } from '../flag';\n/**\n * @description SkodaFlow Menu component.\n * Properties are inherited from HTML Div element.\n * @param props PaperProps\n * @returns React Functional Component\n */\n/**\n * @function onToggleClickHandler\n * @description Set itemsstate and toggle checked on toggle click.\n */\nconst onToggleClickHandler = (currToggleChecked, initItems, setItems, setToggle) => {\n const expectedFutureToggleCheckedState = !currToggleChecked;\n setItems(() => (expectedFutureToggleCheckedState ? [...initItems] : []));\n setToggle(expectedFutureToggleCheckedState);\n};\n/**\n * @function onMenuItemClickHandler\n * @description Set itemsstate on menu item click.\n */\nconst onMenuItemClickHandler = (isString, multipleSelection, id, itemsState, setItemsState, initItems) => {\n const itemExist = isString ? itemsState.includes(id) : itemsState.find((item) => item.value.toString() === id);\n const newItem = isString\n ? [id]\n : initItems.filter((item) => item.value.toString() === id);\n //if the menu is not multiple selection\n if (!multipleSelection) {\n //if the item is already selected (itemExist === true): return an empty array (deselect item)\n //else return the new item selected (object or string depending on the array of items passed)\n if (itemExist) {\n setItemsState([]);\n }\n else {\n setItemsState(newItem);\n }\n }\n //if the menu is multiple selection\n else {\n if (itemExist) {\n const listWithoutItem = itemsState.filter((item) => (isString ? item !== id : item.value.toString() !== id));\n setItemsState(listWithoutItem);\n }\n else {\n setItemsState((prevArr) => [...newItem, ...prevArr]);\n }\n }\n};\n/**\n * @function setToggle\n * @description Set toggle based on menu items change.\n */\nconst setToggle = (multipleSelection, groupToggleSelection, initItems, itemsState, setToggleChecked) => {\n if (multipleSelection && groupToggleSelection) {\n if (itemsState.length === initItems.length)\n setToggleChecked(true);\n if (itemsState.length < initItems.length)\n setToggleChecked(false);\n }\n};\nexport const Menu = forwardRef((_a, ref) => {\n var { setIsOpen, reactHook, items, hasIcon, multipleSelection, groupToggleSelection, groupLabel = '', toggleLabel } = _a, props = __rest(_a, [\"setIsOpen\", \"reactHook\", \"items\", \"hasIcon\", \"multipleSelection\", \"groupToggleSelection\", \"groupLabel\", \"toggleLabel\"]);\n const { state: itemsState, setState: setItemsState } = reactHook;\n const [toggleChecked, setToggleChecked] = useState(false);\n const onToggleClickHandlerWithUseCallback = useCallback(() => {\n onToggleClickHandler(toggleChecked, items, setItemsState, setToggleChecked);\n }, [items, setItemsState, toggleChecked]);\n //callback fired when an item in the menu list is clicked\n const onMenuItemClickHandlerWithUseCallback = useCallback((e, isString) => {\n onMenuItemClickHandler(isString, multipleSelection, e.currentTarget.id, itemsState, setItemsState, items);\n }, [items, itemsState, multipleSelection, setItemsState]);\n //Return the menuItem depending on the type of the item (string or MenuItemObject)\n const handleTypeItem = useCallback((isString, item) => {\n const selected = isString\n ? itemsState.includes(item)\n : itemsState.some((itemState) => itemState.value === item.value);\n const title = isString ? item : item.title;\n const id = isString ? item : item.value;\n return (_jsxs(MenuItem, { id: id, selected: selected, onClick: (e) => onMenuItemClickHandlerWithUseCallback(e, isString), children: [hasIcon && !isString && (_jsx(ListItemIcon, { children: _jsx(Flag, { flag: item.flag, title: item.title }) })), _jsx(ListItemText, { children: _jsx(Typography, { noWrap: true, children: title }) }), multipleSelection && _jsx(Checkbox, { checked: selected })] }, id));\n }, [itemsState, hasIcon, multipleSelection, onMenuItemClickHandlerWithUseCallback]);\n useEffect(() => {\n setToggle(multipleSelection, groupToggleSelection, items, itemsState, setToggleChecked);\n }, [groupToggleSelection, items, itemsState, multipleSelection]);\n return (_jsxs(PaperStyled, Object.assign({}, props, { ref: ref, groupLabel: groupLabel, groupToggleSelection: groupToggleSelection, multipleSelection: multipleSelection.toString(), sx: groupLabel || (groupToggleSelection && multipleSelection) ? { paddingTop: '0px' } : {}, children: [groupLabel.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(MenuItem, { children: [_jsx(ListItemText, { children: _jsx(Typography, { noWrap: true, children: groupLabel }) }), _jsx(ListItemIcon, { onClick: () => setIsOpen(false), children: _jsx(Icon, { name: \"close\" }) })] }), _jsx(Divider, { variant: \"middle\" })] })), multipleSelection && groupToggleSelection && (_jsx(_Fragment, { children: _jsxs(MenuItem, { className: \"menu-select-all\", children: [_jsx(ListItemText, { children: toggleLabel ? toggleLabel : 'Select all' }), _jsx(ToggleSwitch, { onClick: onToggleClickHandlerWithUseCallback, checked: toggleChecked })] }) })), _jsx(MenuList, { children: items.map((item) => {\n const isString = typeof item === 'string';\n return handleTypeItem(isString, item);\n }) })] })));\n});\n/**\n * @description Menu styling defintion based on props\n */\nconst PaperStyled = styled(MuiPaper, {\n shouldForwardProp: (prop) => prop !== 'multipleSelection' && prop !== 'groupLabel' && prop !== 'groupToggleSelection',\n})((_a) => {\n var { theme } = _a, args = __rest(_a, [\"theme\"]);\n const props = args;\n let styles = {};\n const hasmultipleSelection = props.multipleSelection === 'true';\n const itemStyles = {\n height: '48px',\n padding: '0px 24px',\n };\n if (hasmultipleSelection)\n itemStyles.paddingRight = '16px';\n styles = Object.assign(Object.assign({}, styles), { boxShadow: '0px 3px 8px rgba(0, 0, 0, 0.15)', '& .MuiList-root': {\n maxHeight: '240px',\n overflow: 'overlay',\n padding: '0px',\n borderRadius: '4px',\n }, '& .MuiTypography-root': {\n fontSize: '16px',\n lineHeight: '24px',\n color: theme.palette.onSurface.os900,\n fontWeight: '500',\n paddingRight: '16px',\n }, '& li > .MuiListItemIcon-root': {\n minWidth: '0px',\n marginRight: '16px',\n }, '& .MuiDivider-root': {\n marginTop: '0px',\n marginBottom: '0px',\n }, '& li.menu-select-all': {\n '& .MuiTypography-root': {\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n '&:hover': {\n backgroundColor: theme.palette.onSurface.os0,\n },\n }, '& .MuiMenuItem-root': itemStyles });\n if (props.groupLabel && props.groupLabel.length > 0) {\n styles = Object.assign(Object.assign({}, styles), { '& > .MuiMenuItem-root:first-of-type': {\n borderRadius: '4px',\n paddingRight: '21px',\n '& .MuiTypography-root': {\n fontWeight: '700',\n },\n '& .MuiListItemIcon-root': {\n marginRight: '0px',\n color: theme.palette.onSurface.os900,\n '& .MuiIcon-root:before': {\n position: 'relative',\n top: '-3px',\n },\n },\n '&:hover': {\n backgroundColor: `${theme.palette.background.primary}`,\n },\n } });\n }\n else if (props.multipleSelection && props.groupToggleSelection) {\n styles = Object.assign(Object.assign({}, styles), { '& > .MuiMenuItem-root:first-of-type': {\n borderRadius: '4px',\n } });\n }\n return styles;\n});\n//# sourceMappingURL=menu.js.map"],"names":["Menu","forwardRef","_a","ref","setIsOpen","reactHook","items","hasIcon","multipleSelection","groupToggleSelection","groupLabel","toggleLabel","props","__rest","state","itemsState","setState","setItemsState","toggleChecked","setToggleChecked","useState","onToggleClickHandlerWithUseCallback","useCallback","currToggleChecked","initItems","setItems","setToggle","expectedFutureToggleCheckedState","onToggleClickHandler","onMenuItemClickHandlerWithUseCallback","e","isString","id","itemExist","includes","find","item","value","toString","newItem","filter","prevArr","onMenuItemClickHandler","currentTarget","handleTypeItem","selected","some","itemState","title","_jsxs","MenuItem","onClick","children","_jsx","ListItemIcon","Flag","flag","ListItemText","Typography","noWrap","Checkbox","checked","useEffect","length","PaperStyled","Object","assign","sx","paddingTop","_Fragment","Icon","name","Divider","variant","className","ToggleSwitch","MenuList","map","styled","MuiPaper","shouldForwardProp","prop","theme","styles","itemStyles","height","padding","paddingRight","boxShadow","maxHeight","overflow","borderRadius","fontSize","lineHeight","color","palette","onSurface","os900","fontWeight","minWidth","marginRight","marginTop","marginBottom","textOverflow","whiteSpace","backgroundColor","os0","position","top","background","primary"],"mappings":"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"}
1
+ {"version":3,"file":"menu.js","sources":["../../../src/components/menu/menu.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { forwardRef, useCallback, useEffect, useState } from 'react';\nimport { styled } from '@mui/material/styles';\nimport MenuItem from '@mui/material/MenuItem';\nimport MenuList from '@mui/material/MenuList';\nimport MuiPaper from '@mui/material/Paper';\nimport ListItemText from '@mui/material/ListItemText';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport { Checkbox } from '../checkbox';\nimport { ToggleSwitch } from '../toggleSwitch';\nimport { Icon } from '../icon';\nimport Divider from '@mui/material/Divider';\nimport { Typography } from '@mui/material';\nimport { Flag } from '../flag';\n/**\n * @description SkodaFlow Menu component.\n * Properties are inherited from HTML Div element.\n * @param props PaperProps\n * @returns React Functional Component\n */\n/**\n * @function onToggleClickHandler\n * @description Set itemsstate and toggle checked on toggle click.\n */\nconst onToggleClickHandler = (currToggleChecked, initItems, setItems, setToggle) => {\n const expectedFutureToggleCheckedState = !currToggleChecked;\n setItems(() => (expectedFutureToggleCheckedState ? [...initItems] : []));\n setToggle(expectedFutureToggleCheckedState);\n};\n/**\n * @function onMenuItemClickHandler\n * @description Set itemsstate on menu item click.\n */\nconst onMenuItemClickHandler = (isString, multipleSelection, id, itemsState, setItemsState, initItems) => {\n const itemExist = isString ? itemsState.includes(id) : itemsState.find((item) => item.value.toString() === id);\n const newItem = isString\n ? [id]\n : initItems.filter((item) => item.value.toString() === id);\n //if the menu is not multiple selection\n if (!multipleSelection) {\n //if the item is already selected (itemExist === true): return an empty array (deselect item)\n //else return the new item selected (object or string depending on the array of items passed)\n if (itemExist) {\n setItemsState([]);\n }\n else {\n setItemsState(newItem);\n }\n }\n //if the menu is multiple selection\n else {\n if (itemExist) {\n const listWithoutItem = itemsState.filter((item) => (isString ? item !== id : item.value.toString() !== id));\n setItemsState(listWithoutItem);\n }\n else {\n setItemsState((prevArr) => [...newItem, ...prevArr]);\n }\n }\n};\n/**\n * @function setToggle\n * @description Set toggle based on menu items change.\n */\nconst setToggle = (multipleSelection, groupToggleSelection, initItems, itemsState, setToggleChecked) => {\n if (multipleSelection && groupToggleSelection) {\n if (itemsState.length === initItems.length)\n setToggleChecked(true);\n if (itemsState.length < initItems.length)\n setToggleChecked(false);\n }\n};\nexport const Menu = forwardRef((_a, ref) => {\n var { setIsOpen, reactHook, items, hasIcon, multipleSelection, groupToggleSelection, groupLabel = '', toggleLabel } = _a, props = __rest(_a, [\"setIsOpen\", \"reactHook\", \"items\", \"hasIcon\", \"multipleSelection\", \"groupToggleSelection\", \"groupLabel\", \"toggleLabel\"]);\n const { state: itemsState, setState: setItemsState } = reactHook;\n const [toggleChecked, setToggleChecked] = useState(false);\n const onToggleClickHandlerWithUseCallback = useCallback(() => {\n onToggleClickHandler(toggleChecked, items, setItemsState, setToggleChecked);\n }, [items, setItemsState, toggleChecked]);\n //callback fired when an item in the menu list is clicked\n const onMenuItemClickHandlerWithUseCallback = useCallback((e, isString) => {\n onMenuItemClickHandler(isString, multipleSelection, e.currentTarget.id, itemsState, setItemsState, items);\n }, [items, itemsState, multipleSelection, setItemsState]);\n //Return the menuItem depending on the type of the item (string or MenuItemObject)\n const handleTypeItem = useCallback((isString, item) => {\n const selected = isString\n ? itemsState.includes(item)\n : itemsState.some((itemState) => itemState.value === item.value);\n const title = isString ? item : item.title;\n const id = isString ? item : item.value;\n return (_jsxs(MenuItem, { id: id, selected: selected, onClick: (e) => onMenuItemClickHandlerWithUseCallback(e, isString), children: [hasIcon && !isString && (_jsx(ListItemIcon, { children: _jsx(Flag, { flag: item.flag, title: item.title }) })), _jsx(ListItemText, { children: _jsx(Typography, { noWrap: true, children: title }) }), multipleSelection && _jsx(Checkbox, { checked: selected })] }, id));\n }, [itemsState, hasIcon, multipleSelection, onMenuItemClickHandlerWithUseCallback]);\n useEffect(() => {\n setToggle(multipleSelection, groupToggleSelection, items, itemsState, setToggleChecked);\n }, [groupToggleSelection, items, itemsState, multipleSelection]);\n return (_jsxs(PaperStyled, Object.assign({}, props, { ref: ref, groupLabel: groupLabel, groupToggleSelection: groupToggleSelection, multipleSelection: multipleSelection.toString(), sx: groupLabel || (groupToggleSelection && multipleSelection) ? { paddingTop: '0px' } : {}, children: [groupLabel.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(MenuItem, { children: [_jsx(ListItemText, { children: _jsx(Typography, { noWrap: true, children: groupLabel }) }), _jsx(ListItemIcon, { onClick: () => setIsOpen(false), children: _jsx(Icon, { name: \"close\" }) })] }), _jsx(Divider, { variant: \"middle\" })] })), multipleSelection && groupToggleSelection && (_jsx(_Fragment, { children: _jsxs(MenuItem, { className: \"menu-select-all\", children: [_jsx(ListItemText, { children: toggleLabel ? toggleLabel : 'Select all' }), _jsx(ToggleSwitch, { onClick: onToggleClickHandlerWithUseCallback, checked: toggleChecked })] }) })), _jsx(MenuList, { children: items.map((item) => {\n const isString = typeof item === 'string';\n return handleTypeItem(isString, item);\n }) })] })));\n});\n/**\n * @description Menu styling defintion based on props\n */\nconst PaperStyled = styled(MuiPaper, {\n shouldForwardProp: (prop) => prop !== 'multipleSelection' && prop !== 'groupLabel' && prop !== 'groupToggleSelection',\n})((_a) => {\n var { theme } = _a, args = __rest(_a, [\"theme\"]);\n const props = args;\n let styles = {};\n const hasmultipleSelection = props.multipleSelection === 'true';\n const itemStyles = {\n height: '48px',\n padding: '0px 24px',\n };\n if (hasmultipleSelection)\n itemStyles.paddingRight = '16px';\n styles = Object.assign(Object.assign({}, styles), { boxShadow: '0px 3px 8px rgba(0, 0, 0, 0.15)', '& .MuiList-root': {\n maxHeight: '240px',\n overflow: 'overlay',\n padding: '0px',\n borderRadius: '4px',\n }, '& .MuiTypography-root': {\n fontSize: '16px',\n lineHeight: '24px',\n color: theme.palette.onSurface.os900,\n fontWeight: '500',\n paddingRight: 0,\n }, '& li > .MuiListItemIcon-root': {\n minWidth: '0px',\n marginRight: '16px',\n }, '& .MuiDivider-root': {\n marginTop: '0px',\n marginBottom: '0px',\n }, '& li.menu-select-all': {\n '& .MuiTypography-root': {\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n '&:hover': {\n backgroundColor: theme.palette.onSurface.os0,\n },\n }, '& .MuiMenuItem-root': itemStyles, '& .MuiFormControlLabel-root': {\n marginLeft: '16px',\n marginRight: 0,\n } });\n if (props.groupLabel && props.groupLabel.length > 0) {\n styles = Object.assign(Object.assign({}, styles), { '& > .MuiMenuItem-root:first-of-type': {\n borderRadius: '4px',\n paddingRight: '21px',\n '& .MuiTypography-root': {\n fontWeight: '700',\n },\n '& .MuiListItemIcon-root': {\n marginRight: '0px',\n color: theme.palette.onSurface.os900,\n '& .MuiIcon-root:before': {\n position: 'relative',\n top: '-3px',\n },\n },\n '&:hover': {\n backgroundColor: `${theme.palette.background.primary}`,\n },\n } });\n }\n else if (props.multipleSelection && props.groupToggleSelection) {\n styles = Object.assign(Object.assign({}, styles), { '& > .MuiMenuItem-root:first-of-type': {\n borderRadius: '4px',\n } });\n }\n return styles;\n});\n//# sourceMappingURL=menu.js.map"],"names":["Menu","forwardRef","_a","ref","setIsOpen","reactHook","items","hasIcon","multipleSelection","groupToggleSelection","groupLabel","toggleLabel","props","__rest","state","itemsState","setState","setItemsState","toggleChecked","setToggleChecked","useState","onToggleClickHandlerWithUseCallback","useCallback","currToggleChecked","initItems","setItems","setToggle","expectedFutureToggleCheckedState","onToggleClickHandler","onMenuItemClickHandlerWithUseCallback","e","isString","id","itemExist","includes","find","item","value","toString","newItem","filter","prevArr","onMenuItemClickHandler","currentTarget","handleTypeItem","selected","some","itemState","title","_jsxs","MenuItem","onClick","children","_jsx","ListItemIcon","Flag","flag","ListItemText","Typography","noWrap","Checkbox","checked","useEffect","length","PaperStyled","Object","assign","sx","paddingTop","_Fragment","Icon","name","Divider","variant","className","ToggleSwitch","MenuList","map","styled","MuiPaper","shouldForwardProp","prop","theme","styles","itemStyles","height","padding","paddingRight","boxShadow","maxHeight","overflow","borderRadius","fontSize","lineHeight","color","palette","onSurface","os900","fontWeight","minWidth","marginRight","marginTop","marginBottom","textOverflow","whiteSpace","backgroundColor","os0","marginLeft","position","top","background","primary"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{__rest as t}from"tslib";import{jsx as o,jsxs as a}from"react/jsx-runtime";import{forwardRef as i,useState as n,useEffect as e,useCallback as d}from"react";import{styled as l}from"@mui/material/styles";import r from"@mui/material/Modal";import{Button as s}from"../button/button.js";import{Icon as c}from"../icon/icon.js";import"../icon/icon.definitions.js";import{ContentDiv as m}from"./contentDiv.js";import{useTheme as p}from"@mui/material";const u=i(((i,l)=>{var{children:r,open:u,handleClose:b,onClickTopButton:h,onClickBottomButton:f,ariaLabelledby:g,ariaDescribedBy:B,firstButton:v,secondButton:C,hasCloseButton:k,size:w,firstButtonVariant:W,secondButtonVariant:F,secondButtonVisible:y,defaultButtonSection:M=!0,maxWidth:T,modalLoadedCallback:z,disableAutoFocus:j,disableEnforceFocus:V}=i,L=t(i,["children","open","handleClose","onClickTopButton","onClickBottomButton","ariaLabelledby","ariaDescribedBy","firstButton","secondButton","hasCloseButton","size","firstButtonVariant","secondButtonVariant","secondButtonVisible","defaultButtonSection","maxWidth","modalLoadedCallback","disableAutoFocus","disableEnforceFocus"]);const[O,D]=n(!1),[S,A]=n(!1),E=p();e((()=>{const t=window.matchMedia(`(min-width: ${E.breakpoints.values.md}px)`);A(t.matches)}),[E.breakpoints.values.md]);const H=d((()=>{if(S&&"large"===(w||"large"))return!1}),[S,w]);return o(x,Object.assign({},L,{ref:l,open:u,size:w,onClose:b,isOverFlowing:O,"aria-labelledby":g,"aria-describedby":B,compactButtons:H(),maxWidth:T,"data-testid":"Modal",disableEnforceFocus:V,disableAutoFocus:j,children:a("div",{className:"modal-container","data-testid":"Modal.container",children:[k&&o("button",{onClick:b,"data-testid":"Modal.close",children:o(c,{name:"close",fontSize:"medium"})}),o(m,{setIsOverFlowing:D,className:"modal-container--content",modalLoadedCallback:z,"data-testid":"Modal.content",children:r}),M&&a("div",{className:"modal-container--action-buttons","data-testid":"Modal.buttons",children:[o(s,{label:v,onClick:h,fullWidth:!0,variant:W,compact:H(),"data-testid":"Modal.button1","data-variant":W}),y&&o(s,{label:C,onClick:f,fullWidth:!0,variant:F,compact:H(),"data-testid":"Modal.button2","data-variant":F})]})]})}))})),x=l(r,{shouldForwardProp:t=>"compactButtons"!==t&&"isOverFlowing"!==t&&"maxWidth"!==t})((o=>{var{theme:a}=o,i=t(o,["theme"]);const n=i.compactButtons?"16px":"24px",e=i.maxWidth?i.maxWidth:"calc(100% - 40px)",d="large"===(i.size||"large"),l=i.size&&"full-width"===i.size,r=d?{maxWidth:"624px",marginTop:"40px",padding:"40px"}:l?{maxWidth:e,marginTop:"40px",padding:"40px"}:{maxWidth:"408px",marginTop:"48px",padding:"24px 40px 40px 40px"};return{"& .modal-container":{maxHeight:"calc(100vh - 64px)",minHeight:"300px",display:"flex",flexDirection:"column","&--content":{overflowX:"hidden",overflowY:"overlay",marginTop:"48px",padding:"0px 24px"},"&--action-buttons":{padding:"32px 24px",paddingBottom:n,boxShadow:i.isOverFlowing?"0px 0px 32px rgba(0, 0, 0, 0.15)":null,"div:first-of-type":{marginBottom:"15px"}}},[a.breakpoints.up("md")]:{"& .modal-container":{maxHeight:"calc(100vh - 160px)",margin:"0px",width:"100%",maxWidth:r.maxWidth,"&--content":{marginTop:r.marginTop,padding:"0px 40px"},"&--action-buttons":{padding:r.padding,paddingBottom:n}}}}}));export{u as Modal};
1
+ import{__rest as t}from"tslib";import{jsx as o,jsxs as a}from"react/jsx-runtime";import{forwardRef as i,useState as n,useEffect as e,useCallback as d}from"react";import{styled as l}from"@mui/material/styles";import r from"@mui/material/Modal";import{Button as s}from"../button/button.js";import{Icon as c}from"../icon/icon.js";import"../icon/icon.definitions.js";import{ContentDiv as m}from"./contentDiv.js";import{useTheme as p}from"@mui/material";const u=i(((i,l)=>{var{children:r,open:u,handleClose:b,onClickTopButton:h,onClickBottomButton:f,ariaLabelledby:g,ariaDescribedBy:B,firstButton:v,secondButton:C,hasCloseButton:k,size:w,firstButtonVariant:W,secondButtonVariant:F,secondButtonVisible:y,defaultButtonSection:M=!0,maxWidth:T,modalLoadedCallback:z,disableAutoFocus:j,disableEnforceFocus:V}=i,L=t(i,["children","open","handleClose","onClickTopButton","onClickBottomButton","ariaLabelledby","ariaDescribedBy","firstButton","secondButton","hasCloseButton","size","firstButtonVariant","secondButtonVariant","secondButtonVisible","defaultButtonSection","maxWidth","modalLoadedCallback","disableAutoFocus","disableEnforceFocus"]);const[O,D]=n(!1),[S,A]=n(!1),E=p();e((()=>{const t=window.matchMedia(`(min-width: ${E.breakpoints.values.md}px)`);A(t.matches)}),[E.breakpoints.values.md]);const H=d((()=>{if(S&&"large"===(w||"large"))return!1}),[S,w]);return o(x,Object.assign({},L,{ref:l,open:u,size:w,onClose:b,isOverFlowing:O,"aria-labelledby":g,"aria-describedby":B,compactButtons:H(),maxWidth:T,"data-testid":"Modal",disableEnforceFocus:V,disableAutoFocus:j,dir:E.direction,children:a("div",{className:"modal-container","data-testid":"Modal.container",children:[k&&o("button",{onClick:b,"data-testid":"Modal.close",children:o(c,{name:"close",fontSize:"medium"})}),o(m,{setIsOverFlowing:D,className:"modal-container--content",modalLoadedCallback:z,"data-testid":"Modal.content",children:r}),M&&a("div",{className:"modal-container--action-buttons","data-testid":"Modal.buttons",children:[o(s,{label:v,onClick:h,fullWidth:!0,variant:W,compact:H(),"data-testid":"Modal.button1","data-variant":W}),y&&o(s,{label:C,onClick:f,fullWidth:!0,variant:F,compact:H(),"data-testid":"Modal.button2","data-variant":F})]})]})}))})),x=l(r,{shouldForwardProp:t=>"compactButtons"!==t&&"isOverFlowing"!==t&&"maxWidth"!==t})((o=>{var{theme:a}=o,i=t(o,["theme"]);const n=i.compactButtons?"16px":"24px",e=i.maxWidth?i.maxWidth:"calc(100% - 40px)",d="large"===(i.size||"large"),l=i.size&&"full-width"===i.size,r=d?{maxWidth:"624px",marginTop:"40px",padding:"40px"}:l?{maxWidth:e,marginTop:"40px",padding:"40px"}:{maxWidth:"408px",marginTop:"48px",padding:"24px 40px 40px 40px"};return{"& .modal-container":{maxHeight:"calc(100vh - 64px)",minHeight:"300px",display:"flex",flexDirection:"column","&--content":{overflowX:"hidden",overflowY:"auto",marginTop:"48px",padding:"0px 24px"},"&--action-buttons":{padding:"32px 24px",paddingBottom:n,boxShadow:i.isOverFlowing?"0px 0px 32px rgba(0, 0, 0, 0.15)":null,"div:first-of-type":{marginBottom:"15px"}}},[a.breakpoints.up("md")]:{"& .modal-container":{maxHeight:"calc(100vh - 160px)",margin:"0px",width:"100%",maxWidth:r.maxWidth,"&--content":{marginTop:r.marginTop,padding:"0px 40px"},"&--action-buttons":{padding:r.padding,paddingBottom:n}}}}}));export{u as Modal};
2
2
  //# sourceMappingURL=modal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"modal.js","sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useState, forwardRef } from 'react';\nimport { styled } from '@mui/material/styles';\nimport MuiModal from '@mui/material/Modal';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { ContentDiv } from './contentDiv';\nimport { useTheme } from '@mui/material';\n/**\n * @description Styled SkodaFlow Modal component\n * @param props ModalProps\n * @returns React Functional Component\n */\nexport const Modal = forwardRef((_a, ref) => {\n var { children, open, handleClose, onClickTopButton, onClickBottomButton, ariaLabelledby, ariaDescribedBy, firstButton, secondButton, hasCloseButton, size, firstButtonVariant, secondButtonVariant, secondButtonVisible, defaultButtonSection = true, maxWidth, modalLoadedCallback, disableAutoFocus, disableEnforceFocus } = _a, props = __rest(_a, [\"children\", \"open\", \"handleClose\", \"onClickTopButton\", \"onClickBottomButton\", \"ariaLabelledby\", \"ariaDescribedBy\", \"firstButton\", \"secondButton\", \"hasCloseButton\", \"size\", \"firstButtonVariant\", \"secondButtonVariant\", \"secondButtonVisible\", \"defaultButtonSection\", \"maxWidth\", \"modalLoadedCallback\", \"disableAutoFocus\", \"disableEnforceFocus\"]);\n const [isOverFlowing, setIsOverFlowing] = useState(false);\n const [desktopView, setDesktopView] = useState(false);\n const theme = useTheme();\n useEffect(() => {\n const mq = window.matchMedia(`(min-width: ${theme.breakpoints.values.md}px)`);\n setDesktopView(mq.matches);\n }, [theme.breakpoints.values.md]);\n const isCompactButton = useCallback(() => {\n const isModalLarge = (size || 'large') === 'large';\n if (desktopView && isModalLarge)\n return false;\n }, [desktopView, size]);\n return (_jsx(ModalStyled, Object.assign({}, props, { ref: ref, open: open, size: size, onClose: handleClose, isOverFlowing: isOverFlowing, \"aria-labelledby\": ariaLabelledby, \"aria-describedby\": ariaDescribedBy, compactButtons: isCompactButton(), maxWidth: maxWidth, \"data-testid\": \"Modal\", disableEnforceFocus: disableEnforceFocus, disableAutoFocus: disableAutoFocus, children: _jsxs(\"div\", { className: \"modal-container\", \"data-testid\": \"Modal.container\", children: [hasCloseButton && (_jsx(\"button\", { onClick: handleClose, \"data-testid\": \"Modal.close\", children: _jsx(Icon, { name: \"close\", fontSize: \"medium\" }) })), _jsx(ContentDiv, { setIsOverFlowing: setIsOverFlowing, className: \"modal-container--content\", modalLoadedCallback: modalLoadedCallback, \"data-testid\": \"Modal.content\", children: children }), defaultButtonSection && (_jsxs(\"div\", { className: \"modal-container--action-buttons\", \"data-testid\": \"Modal.buttons\", children: [_jsx(Button, { label: firstButton, onClick: onClickTopButton, fullWidth: true, variant: firstButtonVariant, compact: isCompactButton(), \"data-testid\": \"Modal.button1\", \"data-variant\": firstButtonVariant }), secondButtonVisible && (_jsx(Button, { label: secondButton, onClick: onClickBottomButton, fullWidth: true, variant: secondButtonVariant, compact: isCompactButton(), \"data-testid\": \"Modal.button2\", \"data-variant\": secondButtonVariant }))] }))] }) })));\n});\n/**\n * @description Modal styling definition\n */\nconst ModalStyled = styled(MuiModal, {\n shouldForwardProp: (prop) => prop !== 'compactButtons' && prop !== 'isOverFlowing' && prop !== 'maxWidth',\n})((_a) => {\n var { theme } = _a, args = __rest(_a, [\"theme\"]);\n const bottomButtonPadding = args.compactButtons ? '16px' : '24px';\n const smallModalWidth = '408px';\n const largeModalWidth = '624px';\n const fullWidthModal = args.maxWidth ? args.maxWidth : 'calc(100% - 40px)';\n const isModalLarge = (args.size || 'large') === 'large';\n const isModalFullWidth = args.size && args.size === 'full-width';\n const sizeBasedStyles = isModalLarge\n ? { maxWidth: largeModalWidth, marginTop: '40px', padding: '40px' }\n : isModalFullWidth\n ? { maxWidth: fullWidthModal, marginTop: '40px', padding: '40px' }\n : {\n maxWidth: smallModalWidth,\n marginTop: '48px',\n padding: '24px 40px 40px 40px',\n };\n return {\n '& .modal-container': {\n maxHeight: 'calc(100vh - 64px)',\n minHeight: '300px',\n display: 'flex',\n flexDirection: 'column',\n '&--content': {\n overflowX: 'hidden',\n overflowY: 'overlay',\n marginTop: '48px',\n padding: '0px 24px',\n },\n '&--action-buttons': {\n padding: '32px 24px',\n paddingBottom: bottomButtonPadding,\n boxShadow: args.isOverFlowing ? '0px 0px 32px rgba(0, 0, 0, 0.15)' : null,\n 'div:first-of-type': {\n marginBottom: '15px',\n },\n },\n },\n [theme.breakpoints.up('md')]: {\n '& .modal-container': {\n maxHeight: 'calc(100vh - 160px)',\n margin: '0px',\n width: '100%',\n maxWidth: sizeBasedStyles.maxWidth,\n '&--content': {\n marginTop: sizeBasedStyles.marginTop,\n padding: '0px 40px',\n },\n '&--action-buttons': {\n padding: sizeBasedStyles.padding,\n paddingBottom: bottomButtonPadding,\n },\n },\n },\n };\n});\n//# sourceMappingURL=modal.js.map"],"names":["Modal","forwardRef","_a","ref","children","open","handleClose","onClickTopButton","onClickBottomButton","ariaLabelledby","ariaDescribedBy","firstButton","secondButton","hasCloseButton","size","firstButtonVariant","secondButtonVariant","secondButtonVisible","defaultButtonSection","maxWidth","modalLoadedCallback","disableAutoFocus","disableEnforceFocus","props","__rest","isOverFlowing","setIsOverFlowing","useState","desktopView","setDesktopView","theme","useTheme","useEffect","mq","window","matchMedia","breakpoints","values","md","matches","isCompactButton","useCallback","_jsx","ModalStyled","Object","assign","onClose","compactButtons","_jsxs","className","onClick","Icon","name","fontSize","ContentDiv","Button","label","fullWidth","variant","compact","styled","MuiModal","shouldForwardProp","prop","args","bottomButtonPadding","fullWidthModal","isModalLarge","isModalFullWidth","sizeBasedStyles","marginTop","padding","maxHeight","minHeight","display","flexDirection","overflowX","overflowY","paddingBottom","boxShadow","marginBottom","up","margin","width"],"mappings":"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"}
1
+ {"version":3,"file":"modal.js","sources":["../../../src/components/modal/modal.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useState, forwardRef } from 'react';\nimport { styled } from '@mui/material/styles';\nimport MuiModal from '@mui/material/Modal';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { ContentDiv } from './contentDiv';\nimport { useTheme } from '@mui/material';\n/**\n * @description Styled SkodaFlow Modal component\n * @param props ModalProps\n * @returns React Functional Component\n */\nexport const Modal = forwardRef((_a, ref) => {\n var { children, open, handleClose, onClickTopButton, onClickBottomButton, ariaLabelledby, ariaDescribedBy, firstButton, secondButton, hasCloseButton, size, firstButtonVariant, secondButtonVariant, secondButtonVisible, defaultButtonSection = true, maxWidth, modalLoadedCallback, disableAutoFocus, disableEnforceFocus } = _a, props = __rest(_a, [\"children\", \"open\", \"handleClose\", \"onClickTopButton\", \"onClickBottomButton\", \"ariaLabelledby\", \"ariaDescribedBy\", \"firstButton\", \"secondButton\", \"hasCloseButton\", \"size\", \"firstButtonVariant\", \"secondButtonVariant\", \"secondButtonVisible\", \"defaultButtonSection\", \"maxWidth\", \"modalLoadedCallback\", \"disableAutoFocus\", \"disableEnforceFocus\"]);\n const [isOverFlowing, setIsOverFlowing] = useState(false);\n const [desktopView, setDesktopView] = useState(false);\n const theme = useTheme();\n useEffect(() => {\n const mq = window.matchMedia(`(min-width: ${theme.breakpoints.values.md}px)`);\n setDesktopView(mq.matches);\n }, [theme.breakpoints.values.md]);\n const isCompactButton = useCallback(() => {\n const isModalLarge = (size || 'large') === 'large';\n if (desktopView && isModalLarge)\n return false;\n }, [desktopView, size]);\n return (_jsx(ModalStyled, Object.assign({}, props, { ref: ref, open: open, size: size, onClose: handleClose, isOverFlowing: isOverFlowing, \"aria-labelledby\": ariaLabelledby, \"aria-describedby\": ariaDescribedBy, compactButtons: isCompactButton(), maxWidth: maxWidth, \"data-testid\": \"Modal\", disableEnforceFocus: disableEnforceFocus, disableAutoFocus: disableAutoFocus, dir: theme.direction, children: _jsxs(\"div\", { className: \"modal-container\", \"data-testid\": \"Modal.container\", children: [hasCloseButton && (_jsx(\"button\", { onClick: handleClose, \"data-testid\": \"Modal.close\", children: _jsx(Icon, { name: \"close\", fontSize: \"medium\" }) })), _jsx(ContentDiv, { setIsOverFlowing: setIsOverFlowing, className: \"modal-container--content\", modalLoadedCallback: modalLoadedCallback, \"data-testid\": \"Modal.content\", children: children }), defaultButtonSection && (_jsxs(\"div\", { className: \"modal-container--action-buttons\", \"data-testid\": \"Modal.buttons\", children: [_jsx(Button, { label: firstButton, onClick: onClickTopButton, fullWidth: true, variant: firstButtonVariant, compact: isCompactButton(), \"data-testid\": \"Modal.button1\", \"data-variant\": firstButtonVariant }), secondButtonVisible && (_jsx(Button, { label: secondButton, onClick: onClickBottomButton, fullWidth: true, variant: secondButtonVariant, compact: isCompactButton(), \"data-testid\": \"Modal.button2\", \"data-variant\": secondButtonVariant }))] }))] }) })));\n});\n/**\n * @description Modal styling definition\n */\nconst ModalStyled = styled(MuiModal, {\n shouldForwardProp: (prop) => prop !== 'compactButtons' && prop !== 'isOverFlowing' && prop !== 'maxWidth',\n})((_a) => {\n var { theme } = _a, args = __rest(_a, [\"theme\"]);\n const bottomButtonPadding = args.compactButtons ? '16px' : '24px';\n const smallModalWidth = '408px';\n const largeModalWidth = '624px';\n const fullWidthModal = args.maxWidth ? args.maxWidth : 'calc(100% - 40px)';\n const isModalLarge = (args.size || 'large') === 'large';\n const isModalFullWidth = args.size && args.size === 'full-width';\n const sizeBasedStyles = isModalLarge\n ? { maxWidth: largeModalWidth, marginTop: '40px', padding: '40px' }\n : isModalFullWidth\n ? { maxWidth: fullWidthModal, marginTop: '40px', padding: '40px' }\n : {\n maxWidth: smallModalWidth,\n marginTop: '48px',\n padding: '24px 40px 40px 40px',\n };\n return {\n '& .modal-container': {\n maxHeight: 'calc(100vh - 64px)',\n minHeight: '300px',\n display: 'flex',\n flexDirection: 'column',\n '&--content': {\n overflowX: 'hidden',\n overflowY: 'auto',\n marginTop: '48px',\n padding: '0px 24px',\n },\n '&--action-buttons': {\n padding: '32px 24px',\n paddingBottom: bottomButtonPadding,\n boxShadow: args.isOverFlowing ? '0px 0px 32px rgba(0, 0, 0, 0.15)' : null,\n 'div:first-of-type': {\n marginBottom: '15px',\n },\n },\n },\n [theme.breakpoints.up('md')]: {\n '& .modal-container': {\n maxHeight: 'calc(100vh - 160px)',\n margin: '0px',\n width: '100%',\n maxWidth: sizeBasedStyles.maxWidth,\n '&--content': {\n marginTop: sizeBasedStyles.marginTop,\n padding: '0px 40px',\n },\n '&--action-buttons': {\n padding: sizeBasedStyles.padding,\n paddingBottom: bottomButtonPadding,\n },\n },\n },\n };\n});\n//# sourceMappingURL=modal.js.map"],"names":["Modal","forwardRef","_a","ref","children","open","handleClose","onClickTopButton","onClickBottomButton","ariaLabelledby","ariaDescribedBy","firstButton","secondButton","hasCloseButton","size","firstButtonVariant","secondButtonVariant","secondButtonVisible","defaultButtonSection","maxWidth","modalLoadedCallback","disableAutoFocus","disableEnforceFocus","props","__rest","isOverFlowing","setIsOverFlowing","useState","desktopView","setDesktopView","theme","useTheme","useEffect","mq","window","matchMedia","breakpoints","values","md","matches","isCompactButton","useCallback","_jsx","ModalStyled","Object","assign","onClose","compactButtons","dir","direction","_jsxs","className","onClick","Icon","name","fontSize","ContentDiv","Button","label","fullWidth","variant","compact","styled","MuiModal","shouldForwardProp","prop","args","bottomButtonPadding","fullWidthModal","isModalLarge","isModalFullWidth","sizeBasedStyles","marginTop","padding","maxHeight","minHeight","display","flexDirection","overflowX","overflowY","paddingBottom","boxShadow","marginBottom","up","margin","width"],"mappings":"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"}
@@ -1,10 +1,16 @@
1
1
  import React from 'react';
2
2
  import { ScopedCssBaselineProps } from '@mui/material';
3
- import { DefaultTheme } from '@mui/system';
3
+ import { Theme } from '@mui/material/styles';
4
4
  import './theme.extensions';
5
5
  export type SkodaThemeProviderProps = {
6
6
  children?: React.ReactNode;
7
- theme?: Partial<DefaultTheme>;
7
+ /**
8
+ * Theme to be used
9
+ */
10
+ theme?: Partial<Theme>;
11
+ /**
12
+ * Disable adding extra ScopedCssBaseline as CssBaseline is being used
13
+ */
8
14
  globalBaseline?: boolean;
9
15
  } & ScopedCssBaselineProps;
10
16
  /**
@@ -1,2 +1,2 @@
1
- import{__rest as e}from"tslib";import{jsx as r}from"react/jsx-runtime";import{StyledEngineProvider as i,ThemeProvider as t,ScopedCssBaseline as m}from"@mui/material";import{theme as l}from"./theme.js";const n=n=>{var{children:o,theme:a=l,globalBaseline:c=!1}=n,h=e(n,["children","theme","globalBaseline"]);return r(i,{injectFirst:!0,children:r(t,{theme:a,children:c?o:r(m,Object.assign({},h,{children:o}))})})};export{n as SkodaThemeProvider};
1
+ import{__rest as r}from"tslib";import{jsx as t}from"react/jsx-runtime";import{useMemo as i}from"react";import{ThemeProvider as e,ScopedCssBaseline as o}from"@mui/material";import{CacheProvider as m}from"@emotion/react";import l from"@emotion/cache";import{prefixer as n}from"stylis";import s from"stylis-plugin-rtl";import{theme as c}from"./theme.js";const a=a=>{var{children:p,theme:d=c,globalBaseline:h=!1}=a,f=r(a,["children","theme","globalBaseline"]);const g=i((()=>l(Object.assign({prepend:!0,key:"rtl"===d.direction?"rtl":"css"},"rtl"===d.direction?{stylisPlugins:[n,s]}:{}))),[d.direction]);return t(m,{value:g,children:t(e,{theme:d,children:h?p:t(o,Object.assign({},f,"rtl"===d.direction?{dir:"rtl"}:{},{children:p}))})})};export{a as SkodaThemeProvider};
2
2
  //# sourceMappingURL=SkodaThemeProvider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SkodaThemeProvider.js","sources":["../../../src/design/skoda/SkodaThemeProvider.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { ScopedCssBaseline, StyledEngineProvider, ThemeProvider } from '@mui/material';\nimport { theme as skodaTheme } from './theme';\nimport './theme.extensions';\n/**\n * Wrapper of ThemeProvider that additionally provide Scoped CssBaseline\n */\nexport const SkodaThemeProvider = (_a) => {\n var { children, theme = skodaTheme, globalBaseline = false } = _a, rest = __rest(_a, [\"children\", \"theme\", \"globalBaseline\"]);\n return (_jsx(StyledEngineProvider, { injectFirst: true, children: _jsx(ThemeProvider, { theme: theme, children: globalBaseline ? children : _jsx(ScopedCssBaseline, Object.assign({}, rest, { children: children })) }) }));\n};\n//# sourceMappingURL=SkodaThemeProvider.js.map"],"names":["SkodaThemeProvider","_a","children","theme","skodaTheme","globalBaseline","rest","__rest","_jsx","StyledEngineProvider","injectFirst","ThemeProvider","ScopedCssBaseline","Object","assign"],"mappings":"yMAQY,MAACA,EAAsBC,IAC/B,IAAIC,SAAEA,EAAQC,MAAEA,EAAQC,EAAUC,eAAEA,GAAiB,GAAUJ,EAAIK,EAAOC,EAAON,EAAI,CAAC,WAAY,QAAS,mBAC3G,OAAQO,EAAKC,EAAsB,CAAEC,aAAa,EAAMR,SAAUM,EAAKG,EAAe,CAAER,MAAOA,EAAOD,SAAUG,EAAiBH,EAAWM,EAAKI,EAAmBC,OAAOC,OAAO,CAAA,EAAIR,EAAM,CAAEJ,SAAUA,QAAoB"}
1
+ {"version":3,"file":"SkodaThemeProvider.js","sources":["../../../src/design/skoda/SkodaThemeProvider.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useMemo } from 'react';\nimport { ScopedCssBaseline, ThemeProvider } from '@mui/material';\nimport { CacheProvider } from '@emotion/react';\nimport createCache from '@emotion/cache';\nimport { prefixer } from 'stylis';\nimport rtlPlugin from 'stylis-plugin-rtl';\nimport { theme as skodaTheme } from './theme';\nimport './theme.extensions';\n/**\n * Wrapper of ThemeProvider that additionally provide Scoped CssBaseline\n */\nexport const SkodaThemeProvider = (_a) => {\n var { children, theme = skodaTheme, globalBaseline = false } = _a, rest = __rest(_a, [\"children\", \"theme\", \"globalBaseline\"]);\n const cache = useMemo(() => {\n return createCache(Object.assign({ \n // inject first\n prepend: true, \n // rtl/ltr cache\n key: theme.direction === 'rtl' ? 'rtl' : 'css' }, (theme.direction === 'rtl' ? { stylisPlugins: [prefixer, rtlPlugin] } : {})));\n }, [theme.direction]);\n return (_jsx(CacheProvider, { value: cache, children: _jsx(ThemeProvider, { theme: theme, children: globalBaseline ? (children) : (_jsx(ScopedCssBaseline, Object.assign({}, rest, (theme.direction === 'rtl' ? { dir: 'rtl' } : {}), { children: children }))) }) }));\n};\n//# sourceMappingURL=SkodaThemeProvider.js.map"],"names":["SkodaThemeProvider","_a","children","theme","skodaTheme","globalBaseline","rest","__rest","cache","useMemo","createCache","Object","assign","prepend","key","direction","stylisPlugins","prefixer","rtlPlugin","_jsx","CacheProvider","value","ThemeProvider","ScopedCssBaseline","dir"],"mappings":"+VAaY,MAACA,EAAsBC,IAC/B,IAAIC,SAAEA,EAAQC,MAAEA,EAAQC,EAAUC,eAAEA,GAAiB,GAAUJ,EAAIK,EAAOC,EAAON,EAAI,CAAC,WAAY,QAAS,mBAC3G,MAAMO,EAAQC,GAAQ,IACXC,EAAYC,OAAOC,OAAO,CAE7BC,SAAS,EAETC,IAAyB,QAApBX,EAAMY,UAAsB,MAAQ,OAA8B,QAApBZ,EAAMY,UAAsB,CAAEC,cAAe,CAACC,EAAUC,IAAe,CAAE,KACjI,CAACf,EAAMY,YACV,OAAQI,EAAKC,EAAe,CAAEC,MAAOb,EAAON,SAAUiB,EAAKG,EAAe,CAAEnB,MAAOA,EAAOD,SAAUG,EAAc,EAAiBc,EAAKI,EAAmBZ,OAAOC,OAAO,CAAA,EAAIN,EAA2B,QAApBH,EAAMY,UAAsB,CAAES,IAAK,OAAU,CAAE,EAAG,CAAEtB,SAAUA,QAAqB"}
@@ -1,5 +1,24 @@
1
1
  import { SkodaThemeProviderProps } from './SkodaThemeProvider';
2
+ import { BoxProps, PaletteMode } from '@mui/material';
3
+ import { Direction } from '@mui/material/styles';
4
+ export type SkodaThemeWidgetProviderProps = {
5
+ /**
6
+ * Theme overrides
7
+ */
8
+ theme?: object;
9
+ /**
10
+ * Props passed to container
11
+ */
12
+ containerProps?: BoxProps;
13
+ /**
14
+ * Options for Škoda theme generation
15
+ */
16
+ skodaThemeOptions?: {
17
+ mode?: PaletteMode;
18
+ direction?: Direction;
19
+ };
20
+ } & Omit<SkodaThemeProviderProps, 'theme'>;
2
21
  /**
3
22
  * Alternative theme provider when the responsive style should be applied based on the container and not window
4
23
  */
5
- export declare const SkodaThemeWidgetProvider: ({ theme, ...rest }: SkodaThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
24
+ export declare const SkodaThemeWidgetProvider: ({ theme, containerProps, skodaThemeOptions, ...rest }: SkodaThemeWidgetProviderProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,2 +1,2 @@
1
- import{__rest as r}from"tslib";import{jsx as e}from"react/jsx-runtime";import{useMemo as t}from"react";import{SkodaThemeProvider as m}from"./SkodaThemeProvider.js";import{createSkodaTheme as i}from"./theme.js";import{Box as o}from"@mui/material";import{createTheme as s}from"@mui/material/styles";const n=n=>{var{theme:a}=n,p=r(n,["theme"]);const c=t((()=>{const r=i({widget:!0});return a?s(r,a):r}),[a]);return e(o,{sx:{containerType:"inline-size"},children:e(m,Object.assign({},p,{theme:c}))})};export{n as SkodaThemeWidgetProvider};
1
+ import{__rest as e}from"tslib";import{jsx as t}from"react/jsx-runtime";import{useMemo as n,useState as r,useEffect as i,useRef as o,useLayoutEffect as s,useCallback as m}from"react";import{SkodaThemeProvider as c}from"./SkodaThemeProvider.js";import{createSkodaTheme as a}from"./theme.js";import{flowBreakpoints as d}from"./theme.breakpoints.js";import{Box as p,debounce as u}from"@mui/material";import{createTheme as l}from"@mui/material/styles";import{createBreakpoints as h}from"@mui/system";const v=r=>{var{theme:i,containerProps:o,skodaThemeOptions:s}=r,m=e(r,["theme","containerProps","skodaThemeOptions"]);const d=o||{},{sx:u}=d,h=e(d,["sx"]),{containerBreakpoints:v,containerRef:f}=w(),b=n((()=>{const e=a({widget:!0,breakpointsOptions:v,mode:null==s?void 0:s.mode,direction:null==s?void 0:s.direction});return i?l(e,i):e}),[i,v]);return t(p,Object.assign({sx:Object.assign({containerType:"inline-size"},u||{}),ref:f},h,{children:t(c,Object.assign({},m,{theme:b}))}))},w=()=>{const e=n((()=>h(d)),[]),[t,c]=r(d),[a,p]=r(window.innerWidth);i((()=>{const e=()=>{p(window.innerWidth)};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const l=o(null),[v,w]=r(0),f=n((()=>new window.ResizeObserver((e=>{w(e[0].contentRect.width||0)}))),[]);s((()=>((null==l?void 0:l.current)&&f.observe(l.current),()=>{f.disconnect()})),[null==l?void 0:l.current]);const b=m(((t,n)=>{const r=t-n,i=e.keys.reduce(((t,n)=>Object.assign(Object.assign({},t),{[n]:Math.round(100*(e.values[n]+r))/100})),{});c({values:i})}),[e]),j=n((()=>u(b,250)),[b]);return s((()=>{j(a,v)}),[a,v]),{containerBreakpoints:t,containerRef:l}};export{v as SkodaThemeWidgetProvider};
2
2
  //# sourceMappingURL=SkodaThemeWidgetProvider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"SkodaThemeWidgetProvider.js","sources":["../../../src/design/skoda/SkodaThemeWidgetProvider.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useMemo } from 'react';\nimport { SkodaThemeProvider } from './SkodaThemeProvider';\nimport { createSkodaTheme } from './theme';\nimport { Box } from '@mui/material';\nimport { createTheme } from '@mui/material/styles';\n/**\n * Alternative theme provider when the responsive style should be applied based on the container and not window\n */\nexport const SkodaThemeWidgetProvider = (_a) => {\n var { theme } = _a, rest = __rest(_a, [\"theme\"]);\n const composedTheme = useMemo(() => {\n const containerTheme = createSkodaTheme({ widget: true });\n // in case theme is provided, make composition\n if (theme) {\n return createTheme(containerTheme, theme);\n }\n return containerTheme;\n }, [theme]);\n return (_jsx(Box, { sx: { containerType: 'inline-size' }, children: _jsx(SkodaThemeProvider, Object.assign({}, rest, { theme: composedTheme })) }));\n};\n//# sourceMappingURL=SkodaThemeWidgetProvider.js.map"],"names":["SkodaThemeWidgetProvider","_a","theme","rest","__rest","composedTheme","useMemo","containerTheme","createSkodaTheme","widget","createTheme","_jsx","Box","sx","containerType","children","SkodaThemeProvider","Object","assign"],"mappings":"ySAUY,MAACA,EAA4BC,IACrC,IAAIC,MAAEA,GAAUD,EAAIE,EAAOC,EAAOH,EAAI,CAAC,UACvC,MAAMI,EAAgBC,GAAQ,KAC1B,MAAMC,EAAiBC,EAAiB,CAAEC,QAAQ,IAElD,OAAIP,EACOQ,EAAYH,EAAgBL,GAEhCK,CAAc,GACtB,CAACL,IACJ,OAAQS,EAAKC,EAAK,CAAEC,GAAI,CAAEC,cAAe,eAAiBC,SAAUJ,EAAKK,EAAoBC,OAAOC,OAAO,CAAA,EAAIf,EAAM,CAAED,MAAOG,MAAsB"}
1
+ {"version":3,"file":"SkodaThemeWidgetProvider.js","sources":["../../../src/design/skoda/SkodaThemeWidgetProvider.tsx"],"sourcesContent":["import { __rest } from \"tslib\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useMemo, useLayoutEffect, useCallback, useState, useEffect, useRef } from 'react';\nimport { SkodaThemeProvider } from './SkodaThemeProvider';\nimport { createSkodaTheme } from './theme';\nimport { flowBreakpoints } from './theme.breakpoints';\nimport { debounce, Box } from '@mui/material';\nimport { createTheme } from '@mui/material/styles';\nimport { createBreakpoints } from '@mui/system';\n/**\n * Alternative theme provider when the responsive style should be applied based on the container and not window\n */\nexport const SkodaThemeWidgetProvider = (_a) => {\n var { theme, containerProps, skodaThemeOptions } = _a, rest = __rest(_a, [\"theme\", \"containerProps\", \"skodaThemeOptions\"]);\n const _b = containerProps || {}, { sx: containerSx } = _b, rest_container = __rest(_b, [\"sx\"]);\n const { containerBreakpoints, containerRef } = useContainerBreakpoints();\n const composedTheme = useMemo(() => {\n const containerTheme = createSkodaTheme({\n widget: true,\n breakpointsOptions: containerBreakpoints,\n mode: skodaThemeOptions === null || skodaThemeOptions === void 0 ? void 0 : skodaThemeOptions.mode,\n direction: skodaThemeOptions === null || skodaThemeOptions === void 0 ? void 0 : skodaThemeOptions.direction,\n });\n // in case theme is provided, make composition\n if (theme) {\n return createTheme(containerTheme, theme);\n }\n return containerTheme;\n }, [theme, containerBreakpoints]);\n return (_jsx(Box, Object.assign({ sx: Object.assign({ containerType: 'inline-size' }, (containerSx || {})), ref: containerRef }, rest_container, { children: _jsx(SkodaThemeProvider, Object.assign({}, rest, { theme: composedTheme })) })));\n};\nconst useContainerBreakpoints = () => {\n const windowBreakpoints = useMemo(() => createBreakpoints(flowBreakpoints), []);\n const [containerBreakpoints, setContainerBreakpoints] = useState(flowBreakpoints);\n // monitor window width\n const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n useEffect(() => {\n const windowResizeFn = () => {\n setWindowWidth(window.innerWidth);\n };\n window.addEventListener('resize', windowResizeFn);\n return () => {\n window.removeEventListener('resize', windowResizeFn);\n };\n }, []);\n // measure container size\n const containerRef = useRef(null);\n const [containerWidth, setContainerWidth] = useState(0);\n const observer = useMemo(() => new window.ResizeObserver((entries) => {\n setContainerWidth(entries[0].contentRect.width || 0);\n }), []);\n useLayoutEffect(() => {\n (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) && observer.observe(containerRef.current);\n return () => {\n observer.disconnect();\n };\n }, [containerRef === null || containerRef === void 0 ? void 0 : containerRef.current]);\n // generate container breakpoints\n const handleResize = useCallback((window, container) => {\n const difference = window - container;\n const newContainerBreakpoints = windowBreakpoints.keys.reduce((prev, curr) => (Object.assign(Object.assign({}, prev), { \n // round to two decimal places\n [curr]: Math.round((windowBreakpoints.values[curr] + difference) * 100) / 100 })), {});\n setContainerBreakpoints({ values: newContainerBreakpoints });\n }, [windowBreakpoints]);\n const debounceHandleResize = useMemo(() => debounce(handleResize, 250), [handleResize]);\n useLayoutEffect(() => {\n debounceHandleResize(windowWidth, containerWidth);\n }, [windowWidth, containerWidth]);\n return { containerBreakpoints, containerRef };\n};\n//# sourceMappingURL=SkodaThemeWidgetProvider.js.map"],"names":["SkodaThemeWidgetProvider","_a","theme","containerProps","skodaThemeOptions","rest","__rest","_b","sx","containerSx","rest_container","containerBreakpoints","containerRef","useContainerBreakpoints","composedTheme","useMemo","containerTheme","createSkodaTheme","widget","breakpointsOptions","mode","direction","createTheme","_jsx","Box","Object","assign","containerType","ref","children","SkodaThemeProvider","windowBreakpoints","createBreakpoints","flowBreakpoints","setContainerBreakpoints","useState","windowWidth","setWindowWidth","window","innerWidth","useEffect","windowResizeFn","addEventListener","removeEventListener","useRef","containerWidth","setContainerWidth","observer","ResizeObserver","entries","contentRect","width","useLayoutEffect","current","observe","disconnect","handleResize","useCallback","container","difference","newContainerBreakpoints","keys","reduce","prev","curr","Math","round","values","debounceHandleResize","debounce"],"mappings":"+eAYY,MAACA,EAA4BC,IACrC,IAAIC,MAAEA,EAAKC,eAAEA,EAAcC,kBAAEA,GAAsBH,EAAII,EAAOC,EAAOL,EAAI,CAAC,QAAS,iBAAkB,sBACrG,MAAMM,EAAKJ,GAAkB,IAAMK,GAAIC,GAAgBF,EAAIG,EAAiBJ,EAAOC,EAAI,CAAC,QAClFI,qBAAEA,EAAoBC,aAAEA,GAAiBC,IACzCC,EAAgBC,GAAQ,KAC1B,MAAMC,EAAiBC,EAAiB,CACpCC,QAAQ,EACRC,mBAAoBR,EACpBS,KAAMhB,aAA6D,EAASA,EAAkBgB,KAC9FC,UAAWjB,aAA6D,EAASA,EAAkBiB,YAGvG,OAAInB,EACOoB,EAAYN,EAAgBd,GAEhCc,CAAc,GACtB,CAACd,EAAOS,IACX,OAAQY,EAAKC,EAAKC,OAAOC,OAAO,CAAElB,GAAIiB,OAAOC,OAAO,CAAEC,cAAe,eAAkBlB,GAAe,CAAA,GAAMmB,IAAKhB,GAAgBF,EAAgB,CAAEmB,SAAUN,EAAKO,EAAoBL,OAAOC,OAAO,CAAE,EAAErB,EAAM,CAAEH,MAAOY,OAAuB,EAE5OD,EAA0B,KAC5B,MAAMkB,EAAoBhB,GAAQ,IAAMiB,EAAkBC,IAAkB,KACrEtB,EAAsBuB,GAA2BC,EAASF,IAE1DG,EAAaC,GAAkBF,EAASG,OAAOC,YACtDC,GAAU,KACN,MAAMC,EAAiB,KACnBJ,EAAeC,OAAOC,WAAW,EAGrC,OADAD,OAAOI,iBAAiB,SAAUD,GAC3B,KACHH,OAAOK,oBAAoB,SAAUF,EAAe,CACvD,GACF,IAEH,MAAM7B,EAAegC,EAAO,OACrBC,EAAgBC,GAAqBX,EAAS,GAC/CY,EAAWhC,GAAQ,IAAM,IAAIuB,OAAOU,gBAAgBC,IACtDH,EAAkBG,EAAQ,GAAGC,YAAYC,OAAS,EAAE,KACpD,IACJC,GAAgB,MACXxC,aAAmD,EAASA,EAAayC,UAAYN,EAASO,QAAQ1C,EAAayC,SAC7G,KACHN,EAASQ,YAAY,IAE1B,CAAC3C,aAAmD,EAASA,EAAayC,UAE7E,MAAMG,EAAeC,GAAY,CAACnB,EAAQoB,KACtC,MAAMC,EAAarB,EAASoB,EACtBE,EAA0B7B,EAAkB8B,KAAKC,QAAO,CAACC,EAAMC,IAAUvC,OAAOC,OAAOD,OAAOC,OAAO,CAAE,EAAEqC,GAAO,CAElHC,CAACA,GAAOC,KAAKC,MAAsD,KAA/CnC,EAAkBoC,OAAOH,GAAQL,IAAqB,OAAS,CAAE,GACzFzB,EAAwB,CAAEiC,OAAQP,GAA0B,GAC7D,CAAC7B,IACEqC,EAAuBrD,GAAQ,IAAMsD,EAASb,EAAc,MAAM,CAACA,IAIzE,OAHAJ,GAAgB,KACZgB,EAAqBhC,EAAaS,EAAe,GAClD,CAACT,EAAaS,IACV,CAAElC,uBAAsBC,eAAc"}
@@ -1,2 +1,2 @@
1
- import{jsx as o}from"react/jsx-runtime";import"../../../../components/accordion/accordion.js";import"../../../../components/backdrop/backdrop.js";import"../../../../components/button/button.js";import"tslib";import"@mui/material";import"../../theme.js";import"react";import"@mui/material/styles";import"../../../../organisms/cardOwnedVehicle/cardOwnedVehicle.js";import"../../../../organisms/cardPhotoAdjustable/cardPhotoAdjustable.js";import"../../../../organisms/cardPhotoFixed/cardPhotoFixed.js";import"../../../../organisms/cardPromoVehicle/cardPromoVehicleComponent.js";import"../../../../organisms/common/styled/cardStandardWrapperStyled.js";import"../../../../organisms/cardTypeOnly/cardTypeOnly.js";import"embla-carousel-react";import"embla-carousel-class-names";import"embla-carousel-autoplay";import"../../../../organisms/carousel/styledComponents/styledCarouselHorizontal.js";import"../../../../organisms/carousel/styledComponents/styledCarouselVertical.js";import{Controller as t}from"../../../../components/controls/controls.js";import"../../../../components/numbering/numbering.js";import"../../../../utils/enum.js";import"../../../../organisms/heroImageCard/heroImageCard.js";import"@googlemaps/react-wrapper";import"@googlemaps/markerclusterer";import"../../../../organisms/maps/utils/mapIcons.js";import"../../../../organisms/maps/mapComponents/mapStyled.js";import"../../../../organisms/shortcutLink/shortcutLink.js";import"../../../../organisms/textCta/textCta.js";import"../../../../organisms/tile/tile.js";import"@mui/system";import"../../../../organisms/carousel2/galleryCarousel/galleryContext.js";import"../../../../organisms/carousel2/galleryCarousel/galleryItemContext.js";import"../../../../organisms/carousel2/heroCarousel/heroCarouselContext.js";import"../../../../organisms/notification/Notification.js";import"../../../../organisms/notification/NotificationCenter.js";import"../../../../layout/Header/HeaderContext.js";import"../../../../layout/Header/HeaderButton.js";import"../../../../layout/Header/HeaderNavigationHero.js";import"../../../../layout/Header/HeaderNavigationLink.js";import"../../../../layout/Header/HeaderNavigationMenu.js";import"../../../../layout/Header/PredefinedHeaderButtons.js";import"../../../../layout/Header/HeaderOverheadItem.js";import"../../../../organisms/gallery/Gallery.js";import"../../../../organisms/gallery/GalleryItem.js";import"../../../../components/icon/icon.definitions.js";import"../../../../layout/SideMenu/SideMenuItem.js";import"@mui/material/Unstable_Grid2";import"../../../../layout/SecondaryNavigation/SecondaryNavigationCta.js";import"../../../../layout/SecondaryNavigation/SecondaryNavigationItem.js";import"@mui/material/Container";import"../../../../production/Button/Button.js";import"../../../../components/cardContainer/cardContainer.js";import"../../../../components/cardMenu/cardMenu.js";import"../../../../components/checkbox/checkbox.js";import"../../../../components/chip/chipImage/chipImage.js";import"../../../../components/chip/regular/chip.js";import"../../../../components/chip/chipMultiselect/multiSelectChip.js";import"../../../../components/chip/chipDropdownChildren/chipDropdownChildren.js";import"../../../../components/divider/divider.js";import"../../../../components/drawer/drawer.js";import"../../../../components/flag/flag.js";import"@mui/material/Grid";import"../../../../components/indicator/indicator.js";import"../../../../components/label/label.js";import"../../../../components/labelCO2/labelCO2.js";import"../../../../components/labelFeature/labelFeature.js";import"../../../../components/labelPromotional/labelPromotional.js";import"../../../../components/labelStatus/labelStatus.js";import"../../../../components/menu/menu.js";import"@mui/material/MenuItem";import"@mui/material/MobileStepper";import"../../../../components/mobileStepper/mobileStepperButton.js";import"../../../../components/modal/modal.js";import"../../../../components/modal/modalTitle.js";import"../../../../components/pagination/pagination.js";import"../../../../components/progressBar/progressBar.js";import"../../../../components/radioButton/radioButton.js";import"../../../../components/selectInput/selectInput.js";import"../../../../components/slider/slider.js";import"../../../../components/snackbar/snackbar.js";import"../../../../components/stepper/stepper.js";import"../../../../components/textArea/textArea.js";import"../../../../components/common/styled/textFieldStyled.js";import"../../../../components/helperTextContent/index.js";import"../../../../components/toggleSwitch/toggleSwitch.js";import"../../../../components/avatar/Avatar.js";import"../../../../components/iconButton/index.js";import"../../../../components/alert/AlertButton.js";import"minimatch";const e={defaultProps:{expandIcon:o(t,{controlType:"plus"})},styleOverrides:{}};export{e as flowAccordionSummary};
1
+ import{jsx as o}from"react/jsx-runtime";import"../../../../components/accordion/accordion.js";import"../../../../components/backdrop/backdrop.js";import"../../../../components/button/button.js";import"tslib";import"react";import"@mui/material";import"@emotion/react";import"@emotion/cache";import"stylis";import"stylis-plugin-rtl";import"../../theme.js";import"../../theme.breakpoints.js";import"@mui/material/styles";import"@mui/system";import"../../../../organisms/cardOwnedVehicle/cardOwnedVehicle.js";import"../../../../organisms/cardPhotoAdjustable/cardPhotoAdjustable.js";import"../../../../organisms/cardPhotoFixed/cardPhotoFixed.js";import"../../../../organisms/cardPromoVehicle/cardPromoVehicleComponent.js";import"../../../../organisms/common/styled/cardStandardWrapperStyled.js";import"../../../../organisms/cardTypeOnly/cardTypeOnly.js";import"embla-carousel-react";import"embla-carousel-class-names";import"embla-carousel-autoplay";import"../../../../organisms/carousel/styledComponents/styledCarouselHorizontal.js";import"../../../../organisms/carousel/styledComponents/styledCarouselVertical.js";import{Controller as t}from"../../../../components/controls/controls.js";import"../../../../components/numbering/numbering.js";import"../../../../utils/enum.js";import"../../../../organisms/heroImageCard/heroImageCard.js";import"@googlemaps/react-wrapper";import"@googlemaps/markerclusterer";import"../../../../organisms/maps/utils/mapIcons.js";import"../../../../organisms/maps/mapComponents/mapStyled.js";import"../../../../organisms/shortcutLink/shortcutLink.js";import"../../../../organisms/textCta/textCta.js";import"../../../../organisms/tile/tile.js";import"../../../../organisms/carousel2/galleryCarousel/galleryContext.js";import"../../../../organisms/carousel2/galleryCarousel/galleryItemContext.js";import"../../../../organisms/carousel2/heroCarousel/heroCarouselContext.js";import"../../../../organisms/notification/Notification.js";import"../../../../organisms/notification/NotificationCenter.js";import"../../../../layout/Header/HeaderContext.js";import"../../../../layout/Header/HeaderButton.js";import"../../../../layout/Header/HeaderNavigationHero.js";import"../../../../layout/Header/HeaderNavigationLink.js";import"../../../../layout/Header/HeaderNavigationMenu.js";import"../../../../layout/Header/PredefinedHeaderButtons.js";import"../../../../layout/Header/HeaderOverheadItem.js";import"../../../../organisms/gallery/Gallery.js";import"../../../../organisms/gallery/GalleryItem.js";import"../../../../components/icon/icon.definitions.js";import"../../../../layout/SideMenu/SideMenuItem.js";import"../../../../layout/Footer/PredefinedFooterIconButtons.js";import"../../../../layout/SecondaryNavigation/SecondaryNavigationCta.js";import"../../../../layout/SecondaryNavigation/SecondaryNavigationItem.js";import"@mui/material/Container";import"../../../../production/Button/Button.js";import"../../../../components/cardContainer/cardContainer.js";import"../../../../components/cardMenu/cardMenu.js";import"../../../../components/checkbox/checkbox.js";import"../../../../components/chip/chipImage/chipImage.js";import"../../../../components/chip/regular/chip.js";import"../../../../components/chip/chipMultiselect/multiSelectChip.js";import"../../../../components/chip/chipDropdownChildren/chipDropdownChildren.js";import"../../../../components/divider/divider.js";import"../../../../components/drawer/drawer.js";import"../../../../components/flag/flag.js";import"@mui/material/Grid";import"../../../../components/indicator/indicator.js";import"../../../../components/label/label.js";import"../../../../components/labelCO2/labelCO2.js";import"../../../../components/labelFeature/labelFeature.js";import"../../../../components/labelPromotional/labelPromotional.js";import"../../../../components/labelStatus/labelStatus.js";import"../../../../components/menu/menu.js";import"@mui/material/MenuItem";import"@mui/material/MobileStepper";import"../../../../components/mobileStepper/mobileStepperButton.js";import"../../../../components/modal/modal.js";import"../../../../components/modal/modalTitle.js";import"../../../../components/pagination/pagination.js";import"../../../../components/progressBar/progressBar.js";import"../../../../components/radioButton/radioButton.js";import"../../../../components/selectInput/selectInput.js";import"../../../../components/slider/slider.js";import"../../../../components/snackbar/snackbar.js";import"../../../../components/stepper/stepper.js";import"../../../../components/textArea/textArea.js";import"../../../../components/common/styled/textFieldStyled.js";import"../../../../components/helperTextContent/index.js";import"../../../../components/toggleSwitch/toggleSwitch.js";import"../../../../components/avatar/Avatar.js";import"../../../../components/iconButton/index.js";import"../../../../components/alert/AlertButton.js";import"minimatch";const e={defaultProps:{expandIcon:o(t,{controlType:"plus"})},styleOverrides:{}};export{e as flowAccordionSummary};
2
2
  //# sourceMappingURL=accordionSummary.theme.js.map