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

package/dist/components/Heading/Heading.styles.js

@@ -0,0 +1,21 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled, { css } from 'styled-components';
+var StyledHeading = styled.div.withConfig({
+  displayName: "Headingstyles__StyledHeading",
+  componentId: "sc-1gql2ct-0"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  text-align: ", ";\n  word-break: break-word;\n\n  ", "\n\n  ", "\n"], ["\n  color: ", ";\n  text-align: ", ";\n  word-break: break-word;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var textColor = _a.textColor;
+  return textColor ? textColor : '';
+}, function (_a) {
+  var textAlign = _a.textAlign;
+  return textAlign;
+}, function (_a) {
+  var textColor = _a.textColor,
+      theme = _a.theme;
+  return theme.components.heading.boldColors.enabled && theme.components.heading.boldColors.colors && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      strong {\n        font-weight: inherit;\n        color: ", ";\n      }\n    "], ["\n      strong {\n        font-weight: inherit;\n        color: ", ";\n      }\n    "])), theme.components.heading.boldColors.colors[textColor] || theme.components.heading.boldColors.colors.default);
+}, function (_a) {
+  var theme = _a.theme;
+  return !theme.components.heading.boldColors.enabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      strong {\n        font-weight: unset;\n      }\n    "], ["\n      strong {\n        font-weight: unset;\n      }\n    "])));
+});
+var templateObject_1, templateObject_2, templateObject_3;
+export { StyledHeading };

package/dist/components/Hero/Hero.js

@@ -0,0 +1,76 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { MainContainer, TextContainer, Title, SubTitle, StyledButton, MediaContainer, DynamicImage, StaticImage, Video } from './Hero.styles.js';
+import { getThemeComponents } from '../utils.js';
+
+var Text = function Text(_a) {
+  var title = _a.title,
+      subTitle = _a.subTitle,
+      button = _a.button;
+  return jsxs(TextContainer, {
+    children: [jsx(Title, {
+      dangerouslySetInnerHTML: {
+        __html: title === null || title === void 0 ? void 0 : title.replace(/\u00a0/g, ' ')
+      }
+    }, void 0), jsx(SubTitle, {
+      children: subTitle
+    }, void 0), jsx(StyledButton, {
+      linkToPage: button === null || button === void 0 ? void 0 : button.linkToPage,
+      fill: getThemeComponents().hero.buttonfill,
+      externalLink: button === null || button === void 0 ? void 0 : button.externalLink,
+      openWithNewTab: button === null || button === void 0 ? void 0 : button.openWithNewTab,
+      buttonText: button === null || button === void 0 ? void 0 : button.buttonText,
+      htmlAnchorTarget: button === null || button === void 0 ? void 0 : button.htmlAnchorTarget
+    }, void 0)]
+  }, void 0);
+};
+
+var Media = function Media(_a) {
+  var _b, _c, _d, _e;
+
+  var media = _a.media;
+  return jsxs(MediaContainer, {
+    children: [(media === null || media === void 0 ? void 0 : media.mimeType.includes('image')) && ((_b = media === null || media === void 0 ? void 0 : media.localFile) === null || _b === void 0 ? void 0 : _b.childImageSharp) && jsx(DynamicImage, {
+      image: (_d = (_c = media === null || media === void 0 ? void 0 : media.localFile) === null || _c === void 0 ? void 0 : _c.childImageSharp) === null || _d === void 0 ? void 0 : _d.gatsbyImageData,
+      alt: ""
+    }, void 0), (media === null || media === void 0 ? void 0 : media.mimeType.includes('image')) && !((_e = media === null || media === void 0 ? void 0 : media.localFile) === null || _e === void 0 ? void 0 : _e.childImageSharp) && jsx(StaticImage, {
+      src: media.mediaItemUrl,
+      alt: ""
+    }, void 0), (media === null || media === void 0 ? void 0 : media.mediaItemUrl) && (media === null || media === void 0 ? void 0 : media.mimeType.includes('video')) && jsx(Video, __assign({
+      muted: true,
+      loop: true,
+      playsInline: true,
+      autoPlay: true
+    }, {
+      children: jsx("source", {
+        type: media.mimeType,
+        src: media.mediaItemUrl
+      }, void 0)
+    }), void 0)]
+  }, void 0);
+};
+
+var Hero = forwardRef(function (_a, ref) {
+  var title = _a.title,
+      subTitle = _a.subTitle,
+      media = _a.media,
+      button = _a.button,
+      anchor = _a.anchor,
+      rest = __rest(_a, ["title", "subTitle", "media", "button", "anchor"]);
+
+  return jsxs(MainContainer, __assign({
+    id: anchor
+  }, rest, {
+    ref: ref
+  }, {
+    children: [jsx(Text, {
+      title: title,
+      subTitle: subTitle,
+      button: button
+    }, void 0), jsx(Media, {
+      media: media
+    }, void 0)]
+  }), void 0);
+});
+export { Hero, Hero as default };

package/dist/components/Hero/Hero.styles.js

@@ -0,0 +1,128 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled, { css } from 'styled-components';
+import { GatsbyImage } from 'gatsby-plugin-image';
+import Button from '../Button/Button.js';
+import media from '../../styles/media.js';
+var MainContainer = styled.div.withConfig({
+  displayName: "Herostyles__MainContainer",
+  componentId: "sc-q1rhnk-0"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  ", "\n\n  ", "\n"])), media.tablet(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    min-height: 30rem;\n    flex-direction: row;\n    position: relative;\n  "], ["\n    min-height: 30rem;\n    flex-direction: row;\n    position: relative;\n  "]))), media.desktop(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    min-height: 40rem;\n    flex-direction: row;\n    position: relative;\n  "], ["\n    min-height: 40rem;\n    flex-direction: row;\n    position: relative;\n  "]))));
+var Title = styled.div.withConfig({
+  displayName: "Herostyles__Title",
+  componentId: "sc-q1rhnk-1"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  padding: 0;\n  margin: ", " 0;\n  word-wrap: break-word;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: ", ";\n  word-break: break-word;\n\n  ", "\n\n  ", "\n"], ["\n  padding: 0;\n  margin: ", " 0;\n  word-wrap: break-word;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: ", ";\n  word-break: break-word;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.title.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.title.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.title.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.title.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.title.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.title.textTransform;
+}, media.tablet(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.title.fontSizes.tablet.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.title.fontSizes.tablet.lineHeight;
+}), media.desktop(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.title.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.title.fontSizes.desktop.lineHeight;
+}));
+var SubTitle = styled.div.withConfig({
+  displayName: "Herostyles__SubTitle",
+  componentId: "sc-q1rhnk-2"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0;\n  margin-bottom: ", ";\n  width: 100%;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  padding: 0;\n  margin: 0;\n  margin-bottom: ", ";\n  width: 100%;\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.subTitle.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.subTitle.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.subTitle.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.subTitle.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.subTitle.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.subTitle.textTransform;
+}, media.tablet(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    width: 80%;\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    width: 80%;\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.subTitle.fontSizes.tablet.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.subTitle.fontSizes.tablet.lineHeight;
+}), media.desktop(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    width: 80%;\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    width: 80%;\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.subTitle.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.subTitle.fontSizes.desktop.lineHeight;
+}));
+var TextContainer = styled.div.withConfig({
+  displayName: "Herostyles__TextContainer",
+  componentId: "sc-q1rhnk-3"
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  align-items: flex-start;\n  margin-top: auto;\n  margin-bottom: auto;\n  height: 100%;\n  width: 100%;\n  order: 2;\n\n  b {\n    color: ", ";\n    font-weight: inherit;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  align-items: flex-start;\n  margin-top: auto;\n  margin-bottom: auto;\n  height: 100%;\n  width: 100%;\n  order: 2;\n\n  b {\n    color: ", ";\n    font-weight: inherit;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.hero.boldColor;
+}, media.tablet(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    order: 1;\n    width: 60%;\n    margin-right: ", ";\n  "], ["\n    order: 1;\n    width: 60%;\n    margin-right: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}), media.desktop(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    order: 1;\n    width: 60%;\n    margin-right: ", ";\n  "], ["\n    order: 1;\n    width: 60%;\n    margin-right: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}));
+var MediaContainer = styled.div.withConfig({
+  displayName: "Herostyles__MediaContainer",
+  componentId: "sc-q1rhnk-4"
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n  position: relative;\n  margin-left: ", ";\n  margin-right: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: flex-end;\n  position: relative;\n  margin-left: ", ";\n  margin-right: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return "-" + theme.components.restrictedWidthContainer.mobile.margin.left;
+}, function (_a) {
+  var theme = _a.theme;
+  return "-" + theme.components.restrictedWidthContainer.mobile.margin.right;
+}, media.tablet(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    order: 1;\n    width: 40%;\n    margin-left: unset;\n    margin-right: unset;\n  "], ["\n    order: 1;\n    width: 40%;\n    margin-left: unset;\n    margin-right: unset;\n  "]))), media.desktop(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    order: 1;\n    width: 40%;\n    margin-left: unset;\n    margin-right: unset;\n  "], ["\n    order: 1;\n    width: 40%;\n    margin-left: unset;\n    margin-right: unset;\n  "]))));
+var StyledButton = styled(Button).withConfig({
+  displayName: "Herostyles__StyledButton",
+  componentId: "sc-q1rhnk-5"
+})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  margin-bottom: ", ";\n"], ["\n  margin-bottom: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+});
+var ImageCSS = css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  max-height: 25rem;\n\n  ", "\n\n  ", "\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  max-height: 25rem;\n\n  ", "\n\n  ", "\n"])), media.tablet(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    height: 100%;\n    max-height: unset;\n    position: absolute !important;\n  "], ["\n    height: 100%;\n    max-height: unset;\n    position: absolute !important;\n  "]))), media.desktop(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    height: 100%;\n    max-height: unset;\n    position: absolute !important;\n  "], ["\n    height: 100%;\n    max-height: unset;\n    position: absolute !important;\n  "]))));
+var DynamicImage = styled(GatsbyImage).withConfig({
+  displayName: "Herostyles__DynamicImage",
+  componentId: "sc-q1rhnk-6"
+})(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ImageCSS);
+var StaticImage = styled.img.withConfig({
+  displayName: "Herostyles__StaticImage",
+  componentId: "sc-q1rhnk-7"
+})(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ImageCSS);
+var Video = styled.video.withConfig({
+  displayName: "Herostyles__Video",
+  componentId: "sc-q1rhnk-8"
+})(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  max-height: 25rem;\n  object-fit: cover;\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  width: 100%;\n  max-height: 25rem;\n  object-fit: cover;\n\n  ", "\n\n  ", "\n"])), media.tablet(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n    height: 100%;\n    max-height: unset;\n    position: absolute !important;\n  "], ["\n    height: 100%;\n    max-height: unset;\n    position: absolute !important;\n  "]))), media.desktop(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n    height: 100%;\n    max-height: unset;\n    position: absolute !important;\n  "], ["\n    height: 100%;\n    max-height: unset;\n    position: absolute !important;\n  "]))));
+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;
+export { DynamicImage, MainContainer, MediaContainer, StaticImage, StyledButton, SubTitle, TextContainer, Title, Video };

package/dist/components/IconLinks/IconLinks.js

@@ -0,0 +1,118 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react-multi-carousel/lib/styles.css';
+import { forwardRef } from 'react';
+import { useTheme } from 'styled-components';
+import { parseLink, parseInternalLink } from '../utils.js';
+import { MainContainer, TitleContainer, ContentsContainer, BlurBox, StyledCarousel, LinkContainer, StyledLink, ImageContainer, StyledSVG, DynamicImage, StaticImage, LinkLabel } from './IconLinks.styles.js';
+var ItemsToShow = {
+  ultraWide: 6,
+  desktop: 5,
+  tablet: 4,
+  mobile: 3
+};
+var IconLinks = forwardRef(function (_a, ref) {
+  var iconLinks = _a.iconLinks,
+      title = _a.title,
+      anchor = _a.anchor,
+      blockBackgroundColor = _a.blockBackgroundColor,
+      rest = __rest(_a, ["iconLinks", "title", "anchor", "blockBackgroundColor"]);
+
+  if (iconLinks === null) {
+    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;
+  };
+
+  return jsxs(MainContainer, {
+    children: [jsx(TitleContainer, {
+      children: title
+    }, void 0), jsxs(ContentsContainer, __assign({
+      id: anchor
+    }, {
+      children: [jsx(BlurBox, {
+        isRightBox: false,
+        itemsToShow: ItemsToShow,
+        linkCount: iconLinks.length,
+        blockBackgroundColor: blockBackgroundColor
+      }, void 0), jsx(StyledCarousel, __assign({
+        responsive: responsive
+      }, rest, {
+        itemsToShow: ItemsToShow,
+        linkCount: iconLinks.length
+      }, {
+        children: iconLinks.map(function (item, i) {
+          var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+
+          var parsedExternalLink = parseLink((_a = item.link) === null || _a === void 0 ? void 0 : _a.externalLink);
+          var parsedInternalLink = parseInternalLink((_b = item.link.linkToPage) === null || _b === void 0 ? void 0 : _b.uri, (_c = item.link) === null || _c === void 0 ? void 0 : _c.htmlAnchorTarget);
+          return jsx(LinkContainer, __assign({
+            ref: ref
+          }, {
+            children: jsxs(StyledLink, __assign({
+              href: parsedInternalLink ? parsedInternalLink : parsedExternalLink,
+              target: item.link.openWithNewTab ? '__blank' : '_self'
+            }, {
+              children: [jsx(ImageContainer, __assign({
+                hasImage: hasImage(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, {
+                  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, {
+                  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, {
+                  src: (_m = item === null || item === void 0 ? void 0 : item.media) === null || _m === void 0 ? void 0 : _m.mediaItemUrl
+                }, void 0)
+              }), void 0), item.label && jsx(LinkLabel, {
+                children: item.label
+              }, void 0)]
+            }), void 0)
+          }), i);
+        })
+      }), void 0), jsx(BlurBox, {
+        isRightBox: true,
+        itemsToShow: ItemsToShow,
+        linkCount: iconLinks.length,
+        blockBackgroundColor: blockBackgroundColor
+      }, void 0)]
+    }), void 0)]
+  }, void 0);
+});
+export { IconLinks, IconLinks as default };

package/dist/components/IconLinks/IconLinks.styles.js

@@ -0,0 +1,259 @@
+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 MainContainer = styled.div.withConfig({
+  displayName: "IconLinksstyles__MainContainer",
+  componentId: "sc-1gtib87-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow-x: hidden;\n  text-align: center;\n  margin: ", " 0;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  overflow-x: hidden;\n  text-align: center;\n  margin: ", " 0;\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8;
+});
+var TitleContainer = styled.div.withConfig({
+  displayName: "IconLinksstyles__TitleContainer",
+  componentId: "sc-1gtib87-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: initial;\n  margin-top: 0;\n  margin-bottom: ", ";\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: initial;\n  margin-top: 0;\n  margin-bottom: ", ";\n  color: ", ";\n  text-transform: ", ";\n  word-wrap: break-word;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.title.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.title.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.title.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing48;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.title.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.title.textTransform;
+}, media.tablet(templateObject_2 || (templateObject_2 = __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.spacing64;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.title.fontSizes.tablet.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.title.fontSizes.tablet.lineHeight;
+}), media.desktop(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing64;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.title.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.title.fontSizes.desktop.lineHeight;
+}));
+var ContentsContainer = styled.div.withConfig({
+  displayName: "IconLinksstyles__ContentsContainer",
+  componentId: "sc-1gtib87-2"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow-x: hidden;\n  display: flex;\n  width: 100%;\n"], ["\n  overflow-x: hidden;\n  display: flex;\n  width: 100%;\n"])));
+var BlurBox = styled.div.withConfig({
+  displayName: "IconLinksstyles__BlurBox",
+  componentId: "sc-1gtib87-3"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  z-index: 10;\n  left: ", ";\n  margin-left: ", ";\n  display: ", ";\n\n  filter: blur(15px);\n  background-color: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  z-index: 10;\n  left: ", ";\n  margin-left: ", ";\n  display: ", ";\n\n  filter: blur(15px);\n  background-color: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.blurBoxWidth.mobile;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.blurBoxHeight.mobile;
+}, function (_a) {
+  var isRightBox = _a.isRightBox;
+  return isRightBox ? '100%' : 'unset';
+}, function (_a) {
+  var theme = _a.theme,
+      isRightBox = _a.isRightBox;
+  return isRightBox ? "-" + theme.components.iconLinks.blurBoxWidth.mobile : 'unset';
+}, function (_a) {
+  var linkCount = _a.linkCount,
+      itemsToShow = _a.itemsToShow;
+  return linkCount <= itemsToShow.mobile ? 'none' : 'block';
+}, function (_a) {
+  var theme = _a.theme,
+      blockBackgroundColor = _a.blockBackgroundColor;
+  return blockBackgroundColor ? blockBackgroundColor : theme.components.globalStyle.backgroundColor;
+}, media.tablet(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    width: ", ";\n    height: ", ";\n    margin-left: ", ";\n    display:", ";\n  "], ["\n    width: ", ";\n    height: ", ";\n    margin-left: ", ";\n    display:", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.blurBoxWidth.tablet;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.blurBoxHeight.tablet;
+}, function (_a) {
+  var theme = _a.theme,
+      isRightBox = _a.isRightBox;
+  return isRightBox ? "-" + theme.components.iconLinks.blurBoxWidth.tablet : 'unset';
+}, function (props) {
+  return props.linksCount <= props.itemsToShow.tablet ? 'none' : 'block';
+}), media.desktop(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    display:none;\n  "], ["\n    display:none;\n  "]))));
+var StyledCarousel = styled(MultiCarousel).withConfig({
+  displayName: "IconLinksstyles__StyledCarousel",
+  componentId: "sc-1gtib87-4"
+})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  --maxWidth: ", ";\n  --restrictedWidthContainerDesktopMarginLeft: ", ";\n\n  width: 100%;\n  align-items: stretch;\n  margin-bottom: ", ";\n  justify-content: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .react-multiple-carousel__arrow {\n    top: 20%;\n    z-index: 99;\n    overflow: overlay;\n    margin: 0 ", ";\n    background-color: transparent;\n\n    ", "\n\n    ", "\n\n   ::before {\n      color: ", ";\n    }\n  }\n"], ["\n  --maxWidth: ", ";\n  --restrictedWidthContainerDesktopMarginLeft: ", ";\n\n  width: 100%;\n  align-items: stretch;\n  margin-bottom: ", ";\n  justify-content: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  .react-multiple-carousel__arrow {\n    top: 20%;\n    z-index: 99;\n    overflow: overlay;\n    margin: 0 ", ";\n    background-color: transparent;\n\n    ", "\n\n    ", "\n\n   ::before {\n      color: ", ";\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.spacings.spacing16;
+}, function (_a) {
+  var linkCount = _a.linkCount,
+      itemsToShow = _a.itemsToShow;
+  return linkCount <= itemsToShow.mobile ? 'center' : 'normal';
+}, media.tablet(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    justify-content: ", ";\n  "], ["\n    justify-content: ", ";\n  "])), function (_a) {
+  var linkCount = _a.linkCount,
+      itemsToShow = _a.itemsToShow;
+  return linkCount <= itemsToShow.tablet ? 'center' : 'normal';
+}), media.desktop(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    justify-content: ", ";\n  "], ["\n    justify-content: ", ";\n  "])), function (_a) {
+  var linkCount = _a.linkCount,
+      itemsToShow = _a.itemsToShow;
+  return linkCount <= itemsToShow.desktop ? 'center' : 'normal';
+}), media.widerThanRestrictedWidthContainer(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n     justify-content: ", ";\n  "], ["\n     justify-content: ", ";\n  "])), function (_a) {
+  var linkCount = _a.linkCount,
+      itemsToShow = _a.itemsToShow;
+  return linkCount <= itemsToShow.ultraWide ? 'center' : 'normal';
+}), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.arrowButtonMargin.mobile;
+}, media.tablet(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      margin: 0 ", ";\n    "], ["\n      margin: 0 ", ";\n    "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.arrowButtonMargin.tablet;
+}), media.desktop(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      margin: 0 ", ";\n    "], ["\n      margin: 0 ", ";\n    "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.arrowButtonMargin.desktop;
+}), function (_a) {
+  var theme = _a.theme;
+  return theme.colors.grey500;
+});
+var LinkContainer = styled.div.withConfig({
+  displayName: "IconLinksstyles__LinkContainer",
+  componentId: "sc-1gtib87-5"
+})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  align-items: center;\n\n  ", "\n\n  ", "\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  box-sizing: border-box;\n  align-items: center;\n\n  ", "\n\n  ", "\n"])), media.tablet(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    flex-wrap: unset;\n  "], ["\n    flex-wrap: unset;\n  "]))), media.desktop(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    flex-wrap: unset;\n  "], ["\n    flex-wrap: unset;\n  "]))));
+var StyledLink = styled.a.withConfig({
+  displayName: "IconLinksstyles__StyledLink",
+  componentId: "sc-1gtib87-6"
+})(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  box-sizing: border-box;\n  width: ", ";\n  box-shadow: none;\n  cursor: pointer;\n  transition: 0.3s;\n  text-decoration: none;\n\n  border-bottom: inset 2px ", ";\n\n  ", "\n\n  ", "\n\n  img {\n    filter: grayscale(100) brightness(0);\n  }\n\n  :hover {\n    transition: 0.1s;\n    filter: brightness(1);\n    p {\n      color: ", ";\n    }\n\n    img {\n      transition: 0.2s;\n      filter: grayscale(0);\n    }\n\n    border-bottom: inset 2px ", ";\n    box-shadow: inset 0 -5px 0 ", ";\n  }\n"], ["\n  box-sizing: border-box;\n  width: ", ";\n  box-shadow: none;\n  cursor: pointer;\n  transition: 0.3s;\n  text-decoration: none;\n\n  border-bottom: inset 2px ", ";\n\n  ", "\n\n  ", "\n\n  img {\n    filter: grayscale(100) brightness(0);\n  }\n\n  :hover {\n    transition: 0.1s;\n    filter: brightness(1);\n    p {\n      color: ", ";\n    }\n\n    img {\n      transition: 0.2s;\n      filter: grayscale(0);\n    }\n\n    border-bottom: inset 2px ", ";\n    box-shadow: inset 0 -5px 0 ", ";\n  }\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.itemWidth.mobile;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.colors.grey600;
+}, media.tablet(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n     width: ", ";\n  "], ["\n     width: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.itemWidth.tablet;
+}), media.desktop(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n     width: ", ";\n  "], ["\n     width: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.itemWidth.desktop;
+}), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.hoverColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.hoverColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.hoverColor;
+});
+var ImageContainer = styled.div.withConfig({
+  displayName: "IconLinksstyles__ImageContainer",
+  componentId: "sc-1gtib87-7"
+})(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  display: ", ";\n  height: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  display: ", ";\n  height: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var hasImage = _a.hasImage;
+  return hasImage ? 'block' : 'none';
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.mediaHeight.mobile;
+}, media.tablet(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n    max-height: unset;\n    position: relative;\n  "], ["\n    width: 100%;\n    height: ", ";\n    max-height: unset;\n    position: relative;\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.mediaHeight.tablet;
+}), media.desktop(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n    width: 100%;\n    height: ", ";\n    max-height: unset;\n    position: relative;\n  "], ["\n    width: 100%;\n    height: ", ";\n    max-height: unset;\n    position: relative;\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.mediaHeight.desktop;
+}));
+var ImageCSS = css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n  width: ", ";\n  height: 100%;\n  object-fit: cover;\n  pointer-events: none;\n  user-select: none;\n\n  ", "\n\n  ", "\n"], ["\n  width: ", ";\n  height: 100%;\n  object-fit: cover;\n  pointer-events: none;\n  user-select: none;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.imageWidth.mobile;
+}, media.tablet(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n    width: ", ";\n  "], ["\n    width: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.imageWidth.tablet;
+}), media.desktop(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n    width: ", ";\n  "], ["\n    width: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.imageWidth.desktop;
+}));
+var ResponsiveImageCSS = css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), media.tablet(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n    max-height: 70vh;\n    position: unset;\n  "], ["\n    max-height: 70vh;\n    position: unset;\n  "]))), media.desktop(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n    max-height: 70vh;\n    position: unset;\n  "], ["\n    max-height: 70vh;\n    position: unset;\n  "]))));
+var StaticImage = styled.img.withConfig({
+  displayName: "IconLinksstyles__StaticImage",
+  componentId: "sc-1gtib87-8"
+})(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), ImageCSS, ResponsiveImageCSS);
+var DynamicImage = styled(GatsbyImage).withConfig({
+  displayName: "IconLinksstyles__DynamicImage",
+  componentId: "sc-1gtib87-9"
+})(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  ", ";\n"])), ImageCSS, ResponsiveImageCSS);
+var StyledSVG = styled.img.withConfig({
+  displayName: "IconLinksstyles__StyledSVG",
+  componentId: "sc-1gtib87-10"
+})(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n  ", ";\n  object-fit: unset;\n"], ["\n  ", ";\n  object-fit: unset;\n"])), ImageCSS);
+var LinkLabel = styled.p.withConfig({
+  displayName: "IconLinksstyles__LinkLabel",
+  componentId: "sc-1gtib87-11"
+})(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  margin-top: ", ";\n  margin-bottom: ", ";\n  white-space: nowrap;\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  margin-top: ", ";\n  margin-bottom: ", ";\n  white-space: nowrap;\n\n  b {\n    color: ", ";\n    font-weight: inherit;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.linkLabel.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.linkLabel.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.linkLabel.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.linkLabel.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.linkLabel.textTransform;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, 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-top: ", ";\n    margin-bottom: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing24;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.linkLabel.fontSizes.tablet.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.linkLabel.fontSizes.tablet.lineHeight;
+}), media.desktop(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n    margin-top: ", ";\n    margin-bottom: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    margin-top: ", ";\n    margin-bottom: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing24;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.linkLabel.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.iconLinks.linkLabel.fontSizes.desktop.lineHeight;
+}));
+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;
+export { BlurBox, ContentsContainer, DynamicImage, ImageContainer, LinkContainer, LinkLabel, MainContainer, StaticImage, StyledCarousel, StyledLink, StyledSVG, TitleContainer };