@sok-brand-sites/common-frontend-components 0.0.1-security → 1.643.1

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,153 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react-multi-carousel/lib/styles.css';
+import { forwardRef } from 'react';
+import { useTheme } from 'styled-components';
+import { parseHtmlContent } from '../utils.js';
+import Button from '../Button/Button.js';
+import { CarouselContainer, StyledCarousel, CarouselItem, ImageContainer, StyledSVG, DynamicImage, StaticImage, ContentContainer, Category, Title, Description, ButtonContainer, ImageInTextContainer, DynamicImageInText, StaticImageInText } from './Carousel.styles.js';
+import { useWindowSize } from '../../hooks/windowsize.js';
+var Carousel = forwardRef(function (_a, ref) {
+  var carouselItems = _a.carouselItems,
+      anchor = _a.anchor,
+      rest = __rest(_a, ["carouselItems", "anchor"]);
+
+  if (!carouselItems) return null;
+  var theme = useTheme();
+  var windowSize = useWindowSize();
+
+  var hasImage = function hasImage(item) {
+    var _a, _b, _c, _d;
+
+    return ((_a = item === null || item === void 0 ? void 0 : item.image) === null || _a === void 0 ? void 0 : _a.mediaItemUrl) || ((_d = (_c = (_b = item.image) === null || _b === void 0 ? void 0 : _b.localFile) === null || _c === void 0 ? void 0 : _c.childImageSharp) === null || _d === void 0 ? void 0 : _d.gatsbyImageData) ? true : false;
+  };
+
+  var hasMainContent = function hasMainContent(item) {
+    var _a, _b, _c, _d, _e;
+
+    return !(item === null || item === void 0 ? void 0 : item.category) && !(item === null || item === void 0 ? void 0 : item.title) && !(item === null || item === void 0 ? void 0 : item.description) && !((_a = item === null || item === void 0 ? void 0 : item.button) === null || _a === void 0 ? void 0 : _a.buttonText) && !((_b = item === null || item === void 0 ? void 0 : item.imageInText) === null || _b === void 0 ? void 0 : _b.mediaItemUrl) && !((_e = (_d = (_c = item === null || item === void 0 ? void 0 : item.imageInText) === null || _c === void 0 ? void 0 : _c.localFile) === null || _d === void 0 ? void 0 : _d.childImageSharp) === null || _e === void 0 ? void 0 : _e.gatsbyImageData) ? false : true;
+  };
+
+  var hasOnlyImages = !carouselItems.some(function (item) {
+    return hasMainContent(item);
+  });
+  var responsive = {
+    ultraWide: {
+      breakpoint: {
+        max: 8000,
+        min: 2560
+      },
+      items: hasOnlyImages ? 5 : 2,
+      partialVisibilityGutter: hasOnlyImages ? 0 : 100
+    },
+    desktopLarge: {
+      breakpoint: {
+        max: 2560,
+        min: 2000
+      },
+      items: hasOnlyImages ? 4 : 2,
+      partialVisibilityGutter: hasOnlyImages ? 0 : 100
+    },
+    desktopMedium: {
+      breakpoint: {
+        max: 2000,
+        min: parseFloat(theme.breakpoints.desktop)
+      },
+      items: hasOnlyImages ? 3 : 1,
+      partialVisibilityGutter: hasOnlyImages ? 0 : 500
+    },
+    desktopSmall: {
+      breakpoint: {
+        max: parseFloat(theme.breakpoints.desktop),
+        min: parseFloat(theme.breakpoints.tablet)
+      },
+      items: hasOnlyImages ? 2 : 1,
+      partialVisibilityGutter: hasOnlyImages ? 0 : 100
+    },
+    tablet: {
+      breakpoint: {
+        max: parseFloat(theme.breakpoints.tablet),
+        min: parseFloat(theme.breakpoints.mobile)
+      },
+      items: hasOnlyImages ? 2 : 1,
+      partialVisibilityGutter: hasOnlyImages ? 0 : 100
+    },
+    mobile: {
+      breakpoint: {
+        max: parseFloat(theme.breakpoints.mobile),
+        min: 0
+      },
+      items: hasOnlyImages ? 1 : 1,
+      partialVisibilityGutter: hasOnlyImages ? 0 : 40
+    }
+  };
+  return jsx(CarouselContainer, __assign({
+    id: anchor
+  }, {
+    children: jsx(StyledCarousel, __assign({
+      responsive: responsive,
+      centerMode: hasOnlyImages && windowSize.width > 480 ? true : undefined,
+      partialVisbile: windowSize.width <= 480 || !hasOnlyImages ? true : false,
+      showDots: !hasOnlyImages
+    }, rest, {
+      children: carouselItems.map(function (item, i) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+
+        return jsxs(CarouselItem, __assign({
+          ref: ref,
+          i: i,
+          hasOnlyImages: hasOnlyImages
+        }, {
+          children: [jsx(ImageContainer, __assign({
+            hasImage: hasImage(item),
+            hasMainContent: hasMainContent(item),
+            hasOnlyImages: hasOnlyImages
+          }, {
+            children: ((_b = (_a = item.image) === null || _a === void 0 ? void 0 : _a.mimeType) === null || _b === void 0 ? void 0 : _b.includes('svg')) ? jsx(StyledSVG, {
+              src: (_c = item === null || item === void 0 ? void 0 : item.image) === null || _c === void 0 ? void 0 : _c.mediaItemUrl
+            }, void 0) : ((_e = (_d = item.image) === null || _d === void 0 ? void 0 : _d.localFile) === null || _e === void 0 ? void 0 : _e.childImageSharp) ? jsx(DynamicImage, {
+              image: (_h = (_g = (_f = item === null || item === void 0 ? void 0 : item.image) === null || _f === void 0 ? void 0 : _f.localFile) === null || _g === void 0 ? void 0 : _g.childImageSharp) === null || _h === void 0 ? void 0 : _h.gatsbyImageData,
+              alt: ""
+            }, void 0) : jsx(StaticImage, {
+              src: (_j = item === null || item === void 0 ? void 0 : item.image) === null || _j === void 0 ? void 0 : _j.mediaItemUrl
+            }, void 0)
+          }), void 0), jsxs(ContentContainer, __assign({
+            hasImage: hasImage(item),
+            hasMainContent: hasMainContent(item)
+          }, {
+            children: [item.category && jsx(Category, {
+              children: item.category
+            }, void 0), item.title && jsx(Title, {
+              dangerouslySetInnerHTML: {
+                __html: item.title
+              }
+            }, void 0), item.description && jsx(Description, {
+              dangerouslySetInnerHTML: {
+                __html: parseHtmlContent(item.description)
+              }
+            }, void 0), ((_k = item.button) === null || _k === void 0 ? void 0 : _k.buttonText) && jsx(ButtonContainer, {
+              children: jsx(Button, {
+                linkToPage: (_l = item.button) === null || _l === void 0 ? void 0 : _l.linkToPage,
+                fill: theme.components.carousel.buttonfill,
+                externalLink: (_m = item.button) === null || _m === void 0 ? void 0 : _m.externalLink,
+                openWithNewTab: (_o = item.button) === null || _o === void 0 ? void 0 : _o.openInNewTab,
+                buttonText: (_p = item.button) === null || _p === void 0 ? void 0 : _p.buttonText,
+                htmlAnchorTarget: (_q = item.button) === null || _q === void 0 ? void 0 : _q.htmlAnchorTarget
+              }, void 0)
+            }, void 0), item.imageInText && jsx(ImageInTextContainer, {
+              children: ((_s = (_r = item.imageInText) === null || _r === void 0 ? void 0 : _r.mimeType) === null || _s === void 0 ? void 0 : _s.includes('svg')) ? jsx(StyledSVG, {
+                src: (_t = item === null || item === void 0 ? void 0 : item.imageInText) === null || _t === void 0 ? void 0 : _t.mediaItemUrl
+              }, void 0) : ((_v = (_u = item.imageInText) === null || _u === void 0 ? void 0 : _u.localFile) === null || _v === void 0 ? void 0 : _v.childImageSharp) ? jsx(DynamicImageInText, {
+                image: (_y = (_x = (_w = item === null || item === void 0 ? void 0 : item.imageInText) === null || _w === void 0 ? void 0 : _w.localFile) === null || _x === void 0 ? void 0 : _x.childImageSharp) === null || _y === void 0 ? void 0 : _y.gatsbyImageData,
+                alt: ""
+              }, void 0) : jsx(StaticImageInText, {
+                src: item.imageInText.mediaItemUrl
+              }, void 0)
+            }, void 0)]
+          }), void 0)]
+        }), i);
+      })
+    }), void 0)
+  }), void 0);
+});
+export { Carousel, Carousel as default };

package/dist/components/Carousel/Carousel.styles.js

@@ -0,0 +1,261 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import MultiCarousel from 'react-multi-carousel';
+import styled, { css } from 'styled-components';
+import { GatsbyImage } from 'gatsby-plugin-image';
+import media from '../../styles/media.js';
+var CarouselContainer = styled.div.withConfig({
+  displayName: "Carouselstyles__CarouselContainer",
+  componentId: "sc-1n3xpas-0"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  --maxWidth: ", ";\n  --restrictedWidthContainerDesktopMarginLeft: ", ";\n\n  overflow-x: hidden;\n  margin-left: ", ";\n\n  ", "\n\n  ", "\n\n    ", "\n"], ["\n  --maxWidth: ", ";\n  --restrictedWidthContainerDesktopMarginLeft: ", ";\n\n  overflow-x: hidden;\n  margin-left: ", ";\n\n  ", "\n\n  ", "\n\n    ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.restrictedWidthContainer.maxWidth;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.restrictedWidthContainer.desktop.margin.left;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.restrictedWidthContainer.mobile.margin.left;
+}, media.tablet(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.restrictedWidthContainer.tablet.margin.left;
+}), media.desktop(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin-left: ", ";\n    "], ["\n      margin-left: ", ";\n    "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.restrictedWidthContainer.desktop.margin.left;
+}), media.widerThanRestrictedWidthContainer(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      margin-left: max(\n        calc((100vw - var(--maxWidth)) - 15px) / 2,\n        calc(var(--restrictedWidthContainerDesktopMarginLeft))\n      );\n    "], ["\n      margin-left: max(\n        calc((100vw - var(--maxWidth)) - 15px) / 2,\n        calc(var(--restrictedWidthContainerDesktopMarginLeft))\n      );\n    "]))));
+var StyledCarousel = styled(MultiCarousel).withConfig({
+  displayName: "Carouselstyles__StyledCarousel",
+  componentId: "sc-1n3xpas-1"
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: 100%;\n  align-items: stretch;\n  padding-bottom: ", ";\n\n  .react-multiple-carousel__arrow {\n    top: 45%;\n    z-index: 99;\n    margin-right: ", ";\n    overflow: overlay;\n\n    ", "\n\n    :before {\n      color: ", ";\n    }\n  }\n\n  .react-multiple-carousel__arrow--left {\n    ", ";\n  }\n\n  .react-multiple-carousel__arrow--right {\n    ", ";\n  }\n\n  .react-multi-carousel-dot-list {\n    margin-right: ", ";\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n\n  .react-multi-carousel-dot > button {\n    background-color: ", ";\n    border: none;\n  }\n\n  .react-multi-carousel-dot--active > button {\n    background-color: ", ";\n    border: none;\n  }\n"], ["\n  width: 100%;\n  align-items: stretch;\n  padding-bottom: ", ";\n\n  .react-multiple-carousel__arrow {\n    top: 45%;\n    z-index: 99;\n    margin-right: ", ";\n    overflow: overlay;\n\n    ", "\n\n    :before {\n      color: ", ";\n    }\n  }\n\n  .react-multiple-carousel__arrow--left {\n    ", ";\n  }\n\n  .react-multiple-carousel__arrow--right {\n    ", ";\n  }\n\n  .react-multi-carousel-dot-list {\n    margin-right: ", ";\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n\n  .react-multi-carousel-dot > button {\n    background-color: ", ";\n    border: none;\n  }\n\n  .react-multi-carousel-dot--active > button {\n    background-color: ", ";\n    border: none;\n  }\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing4;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.arrowBackgroundColor && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        filter: brightness(1);\n        background-color: ", ";\n\n        :hover {\n          filter: brightness(0.8);\n        }\n      "], ["\n        filter: brightness(1);\n        background-color: ", ";\n\n        :hover {\n          filter: brightness(0.8);\n        }\n      "])), theme.components.carousel.arrowBackgroundColor);
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.arrowColor;
+}, media.widerThanRestrictedWidthContainer(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      left: 15%;\n    "], ["\n      left: 15%;\n    "]))), media.widerThanRestrictedWidthContainer(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      right: 15%;\n    "], ["\n      right: 15%;\n    "]))), function (_a) {
+  var theme = _a.theme;
+  return theme.components.restrictedWidthContainer.mobile.margin.right;
+}, media.tablet(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin-right: ", ";\n    "], ["\n      margin-right: ", ";\n    "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.restrictedWidthContainer.tablet.margin.right;
+}), media.desktop(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      margin-right: ", ";\n    "], ["\n      margin-right: ", ";\n    "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.restrictedWidthContainer.desktop.margin.right;
+}), media.widerThanRestrictedWidthContainer(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      margin-right: max(calc((100vw - var(--maxWidth)) - 15px) / 2, var(--restrictedWidthContainerDesktopMarginLeft));\n    "], ["\n      margin-right: max(calc((100vw - var(--maxWidth)) - 15px) / 2, var(--restrictedWidthContainerDesktopMarginLeft));\n    "]))), function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.dotColor.default;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.dotColor.active;
+});
+var CarouselItem = styled.div.withConfig({
+  displayName: "Carouselstyles__CarouselItem",
+  componentId: "sc-1n3xpas-2"
+})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  height: 100%;\n  min-height: 25rem;\n  background: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  display: flex;\n  flex-wrap: wrap;\n\n  ", "\n\n  ", "\n\n  ", "\n\n    ", "\n"], ["\n  height: 100%;\n  min-height: 25rem;\n  background: ", ";\n  margin-right: ", ";\n  margin-left: ", ";\n  display: flex;\n  flex-wrap: wrap;\n\n  ", "\n\n  ", "\n\n  ", "\n\n    ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.carouselItem.backgroundColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, media.tablet(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    flex-wrap: unset;\n    margin-right: ", ";\n    margin-left: ", ";\n\n  "], ["\n    flex-wrap: unset;\n    margin-right: ", ";\n    margin-left: ", ";\n\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}), media.desktop(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    flex-wrap: unset;\n    margin-right: ", ";\n    margin-left: ", ";\n  "], ["\n    flex-wrap: unset;\n    margin-right: ", ";\n    margin-left: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}), function (_a) {
+  var hasOnlyImages = _a.hasOnlyImages;
+  return hasOnlyImages && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      margin: ", ";\n    "], ["\n      margin: ", ";\n    "])), function (_a) {
+    var theme = _a.theme;
+    return "0 " + theme.spacings.spacing16 + " !important";
+  });
+}, function (_a) {
+  var i = _a.i;
+  return i === 0 && css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      margin-left: 0 !important;\n    "], ["\n      margin-left: 0 !important;\n    "])));
+});
+var ImageContainer = styled.div.withConfig({
+  displayName: "Carouselstyles__ImageContainer",
+  componentId: "sc-1n3xpas-3"
+})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: ", ";\n  width: 100%;\n  height: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  display: ", ";\n  width: 100%;\n  height: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var hasImage = _a.hasImage;
+  return hasImage ? 'block' : 'none';
+}, function (_a) {
+  var theme = _a.theme,
+      hasMainContent = _a.hasMainContent;
+  return hasMainContent ? theme.components.carousel.imageMobileHeight : '100%';
+}, media.tablet(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n    max-height: unset;\n    position: relative;\n  "], ["\n    width: ", ";\n    height: 100%;\n    max-height: unset;\n    position: relative;\n  "])), function (_a) {
+  var hasMainContent = _a.hasMainContent;
+  return hasMainContent ? '40%' : '100%';
+}), media.desktop(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    width: ", ";\n    height: 100%;\n    max-height: unset;\n    position: relative;\n  "], ["\n    width: ", ";\n    height: 100%;\n    max-height: unset;\n    position: relative;\n  "])), function (_a) {
+  var hasMainContent = _a.hasMainContent;
+  return hasMainContent ? '40%' : '100%';
+}));
+var ImageCSS = css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  pointer-events: none;\n  user-select: none;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  pointer-events: none;\n  user-select: none;\n"])));
+var StaticImage = styled.img.withConfig({
+  displayName: "Carouselstyles__StaticImage",
+  componentId: "sc-1n3xpas-4"
+})(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), ImageCSS);
+var DynamicImage = styled(GatsbyImage).withConfig({
+  displayName: "Carouselstyles__DynamicImage",
+  componentId: "sc-1n3xpas-5"
+})(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), ImageCSS);
+var ImageInTextContainer = styled.div.withConfig({
+  displayName: "Carouselstyles__ImageInTextContainer",
+  componentId: "sc-1n3xpas-6"
+})(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var DynamicImageInText = styled(GatsbyImage).withConfig({
+  displayName: "Carouselstyles__DynamicImageInText",
+  componentId: "sc-1n3xpas-7"
+})(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), ImageCSS);
+var StaticImageInText = styled.img.withConfig({
+  displayName: "Carouselstyles__StaticImageInText",
+  componentId: "sc-1n3xpas-8"
+})(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), ImageCSS);
+var StyledSVG = styled.img.withConfig({
+  displayName: "Carouselstyles__StyledSVG",
+  componentId: "sc-1n3xpas-9"
+})(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  ", ";\n  object-fit: unset;\n"], ["\n  ", ";\n  object-fit: unset;\n"])), ImageCSS);
+var ContentContainer = styled.div.withConfig({
+  displayName: "Carouselstyles__ContentContainer",
+  componentId: "sc-1n3xpas-10"
+})(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  display: ", ";\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  display: ", ";\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var hasMainContent = _a.hasMainContent;
+  return hasMainContent ? 'block' : 'none';
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32 + " " + theme.spacings.spacing16;
+}, media.tablet(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    width: ", ";\n    height: unset;\n    padding: ", ";\n  "], ["\n    width: ", ";\n    height: unset;\n    padding: ", ";\n  "])), function (_a) {
+  var hasImage = _a.hasImage;
+  return hasImage ? '60%' : '100%';
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing64 + " " + theme.spacings.spacing32;
+}), media.desktop(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n    width: ", ";\n    height: unset;\n    padding: ", ";\n  "], ["\n    width: ", ";\n    height: unset;\n    padding: ", ";\n  "])), function (_a) {
+  var hasImage = _a.hasImage;
+  return hasImage ? '60%' : '100%';
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing64 + " " + theme.spacings.spacing32;
+}));
+var Category = styled.div.withConfig({
+  displayName: "Carouselstyles__Category",
+  componentId: "sc-1n3xpas-11"
+})(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: ", ";\n  word-wrap: break-word;\n\n  ", "\n\n  ", "\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: ", ";\n  word-wrap: break-word;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.category.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.category.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.category.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.category.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.category.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.category.textTransform;
+}, media.tablet(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n     font-size: ", ";\n    line-height: ", ";\n  "], ["\n     font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.category.fontSizes.tablet.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.category.fontSizes.tablet.lineHeight;
+}), media.desktop(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.category.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.category.fontSizes.desktop.lineHeight;
+}));
+var Title = styled.div.withConfig({
+  displayName: "Carouselstyles__Title",
+  componentId: "sc-1n3xpas-12"
+})(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: initial;\n  color: ", ";\n  text-transform: ", ";\n  word-wrap: break-word;\n\n  margin-bottom: ", ";\n\n  b {\n    color: ", ";\n    font-weight: inherit;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: initial;\n  color: ", ";\n  text-transform: ", ";\n  word-wrap: break-word;\n\n  margin-bottom: ", ";\n\n  b {\n    color: ", ";\n    font-weight: inherit;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.title.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.title.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.title.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.title.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.title.textTransform;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.colors.primary900;
+}, media.tablet(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    margin-bottom: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    margin-bottom: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.title.fontSizes.tablet.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.title.fontSizes.tablet.lineHeight;
+}), media.desktop(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n    margin-bottom: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    margin-bottom: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.title.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.title.fontSizes.desktop.lineHeight;
+}));
+var Description = styled.div.withConfig({
+  displayName: "Carouselstyles__Description",
+  componentId: "sc-1n3xpas-13"
+})(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  margin-bottom: ", ";\n  word-wrap: break-word;\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  margin-bottom: ", ";\n  word-wrap: break-word;\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.description.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.description.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.description.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.description.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.carousel.description.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+});
+var ButtonContainer = styled.div.withConfig({
+  displayName: "Carouselstyles__ButtonContainer",
+  componentId: "sc-1n3xpas-14"
+})(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37;
+export { ButtonContainer, CarouselContainer, CarouselItem, Category, ContentContainer, Description, DynamicImage, DynamicImageInText, ImageContainer, ImageInTextContainer, StaticImage, StaticImageInText, StyledCarousel, StyledSVG, Title };

package/dist/components/CarouselNarrow/CarouselNarrow.js

@@ -0,0 +1,120 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import 'react-multi-carousel/lib/styles.css';
+import { forwardRef } from 'react';
+import { useTheme } from 'styled-components';
+import { parseLink, parseInternalLink, parseHtmlContent } from '../utils.js';
+import { CarouselContainer, StyledCarousel, CarouselItem, ImageContainer, StyledSVG, DynamicImage, StaticImage, ContentContainer, Title, Description, StyledLink } from './CarouselNarrow.styles.js';
+var ItemsToShow = {
+  ultraWide: 3,
+  desktop: 3,
+  tablet: 2,
+  mobile: 1
+};
+var CarouselNarrow = forwardRef(function (_a, ref) {
+  var carouselItems = _a.carouselItems,
+      anchor = _a.anchor,
+      rest = __rest(_a, ["carouselItems", "anchor"]);
+
+  if (!carouselItems) return null;
+  var theme = useTheme();
+  var responsive = {
+    ultraWide: {
+      breakpoint: {
+        max: 4000,
+        min: parseFloat(theme.breakpoints.desktop)
+      },
+      items: ItemsToShow.ultraWide
+    },
+    desktop: {
+      breakpoint: {
+        max: parseFloat(theme.breakpoints.desktop),
+        min: parseFloat(theme.breakpoints.tablet)
+      },
+      items: ItemsToShow.desktop
+    },
+    tablet: {
+      breakpoint: {
+        max: parseFloat(theme.breakpoints.tablet),
+        min: parseFloat(theme.breakpoints.mobile)
+      },
+      items: ItemsToShow.tablet
+    },
+    mobile: {
+      breakpoint: {
+        max: parseFloat(theme.breakpoints.mobile),
+        min: 0
+      },
+      items: ItemsToShow.mobile
+    }
+  };
+
+  var hasImage = function hasImage(item) {
+    var _a, _b, _c, _d;
+
+    return ((_a = item === null || item === void 0 ? void 0 : item.media) === null || _a === void 0 ? void 0 : _a.mediaItemUrl) || ((_d = (_c = (_b = item.media) === null || _b === void 0 ? void 0 : _b.localFile) === null || _c === void 0 ? void 0 : _c.childImageSharp) === null || _d === void 0 ? void 0 : _d.gatsbyImageData) ? true : false;
+  };
+
+  var hasMainContent = function hasMainContent(item) {
+    var _a;
+
+    return !(item === null || item === void 0 ? void 0 : item.category) && !(item === null || item === void 0 ? void 0 : item.title) && !(item === null || item === void 0 ? void 0 : item.description) && !((_a = item === null || item === void 0 ? void 0 : item.button) === null || _a === void 0 ? void 0 : _a.buttonText) ? false : true;
+  };
+
+  return jsx(CarouselContainer, __assign({
+    ref: ref,
+    id: anchor
+  }, {
+    children: jsx(StyledCarousel, __assign({
+      responsive: responsive,
+      partialVisible: true,
+      showDots: true
+    }, rest, {
+      itemsToShow: ItemsToShow,
+      linkCount: carouselItems.length
+    }, {
+      children: carouselItems.map(function (item, i) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+
+        var parsedExternalLink = parseLink((_a = item.button) === null || _a === void 0 ? void 0 : _a.externalLink);
+        var parsedInternalLink = parseInternalLink((_b = item.button.linkToPage) === null || _b === void 0 ? void 0 : _b.uri, (_c = item.button) === null || _c === void 0 ? void 0 : _c.htmlAnchorTarget);
+        return jsxs(CarouselItem, __assign({
+          color: item.color
+        }, {
+          children: [jsx(ImageContainer, __assign({
+            hasImage: hasImage(item),
+            hasMainContent: hasMainContent(item)
+          }, {
+            children: ((_e = (_d = item.media) === null || _d === void 0 ? void 0 : _d.mimeType) === null || _e === void 0 ? void 0 : _e.includes('svg')) ? jsx(StyledSVG, {
+              hasMainContent: hasMainContent(item),
+              src: (_f = item === null || item === void 0 ? void 0 : item.media) === null || _f === void 0 ? void 0 : _f.mediaItemUrl
+            }, void 0) : ((_h = (_g = item.media) === null || _g === void 0 ? void 0 : _g.localFile) === null || _h === void 0 ? void 0 : _h.childImageSharp) ? jsx(DynamicImage, {
+              hasMainContent: hasMainContent(item),
+              image: (_l = (_k = (_j = item === null || item === void 0 ? void 0 : item.media) === null || _j === void 0 ? void 0 : _j.localFile) === null || _k === void 0 ? void 0 : _k.childImageSharp) === null || _l === void 0 ? void 0 : _l.gatsbyImageData,
+              alt: ""
+            }, void 0) : jsx(StaticImage, {
+              hasMainContent: hasMainContent(item),
+              src: (_m = item === null || item === void 0 ? void 0 : item.media) === null || _m === void 0 ? void 0 : _m.mediaItemUrl
+            }, void 0)
+          }), void 0), jsxs(ContentContainer, {
+            children: [item.title && jsx(Title, {
+              dangerouslySetInnerHTML: {
+                __html: item.title
+              }
+            }, void 0), item.description && jsx(Description, {
+              dangerouslySetInnerHTML: {
+                __html: parseHtmlContent(item.description)
+              }
+            }, void 0), jsx(StyledLink, __assign({
+              href: parsedInternalLink ? parsedInternalLink : parsedExternalLink,
+              target: ((_o = item.button) === null || _o === void 0 ? void 0 : _o.openInNewTab) ? '__blank' : '_self'
+            }, {
+              children: (_p = item.button) === null || _p === void 0 ? void 0 : _p.buttonText
+            }), void 0)]
+          }, void 0)]
+        }), i);
+      })
+    }), void 0)
+  }), void 0);
+});
+export { CarouselNarrow, CarouselNarrow as default };