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

package/dist/components/ImageCarousel/ImageCarousel.js

@@ -0,0 +1,102 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import 'react-multi-carousel/lib/styles.css';
+import { forwardRef } from 'react';
+import { getTheme, getCurrentThemeName } from '../utils.js';
+import { ImageCarouselContainer, StyledImageCarousel, ImageCarouselItem, ImageContainer, StyledSVG, DynamicImage, StaticImage } from './ImageCarousel.styles.js';
+import { useWindowSize } from '../../hooks/windowsize.js';
+var ImageCarousel = forwardRef(function (_a, ref) {
+  var imageCarouselItems = _a.imageCarouselItems,
+      anchor = _a.anchor,
+      rest = __rest(_a, ["imageCarouselItems", "anchor"]);
+
+  if (!imageCarouselItems) return null;
+  var theme = getTheme(getCurrentThemeName());
+  var windowSize = useWindowSize(); // duplicate items if there are too few to fill the screen
+
+  var imageItems = imageCarouselItems.length < 9 ? imageCarouselItems.concat(imageCarouselItems) : imageCarouselItems;
+  var responsive = {
+    ultraWide: {
+      breakpoint: {
+        max: 8000,
+        min: 2560
+      },
+      items: 5,
+      partialVisibilityGutter: 0
+    },
+    desktopLarge: {
+      breakpoint: {
+        max: 2560,
+        min: 2000
+      },
+      items: 4,
+      partialVisibilityGutter: 0
+    },
+    desktopMedium: {
+      breakpoint: {
+        max: 2000,
+        min: parseFloat(theme.breakpoints.desktop)
+      },
+      items: 3,
+      partialVisibilityGutter: 0
+    },
+    desktopSmall: {
+      breakpoint: {
+        max: parseFloat(theme.breakpoints.desktop),
+        min: parseFloat(theme.breakpoints.tablet)
+      },
+      items: 2,
+      partialVisibilityGutter: 0
+    },
+    tablet: {
+      breakpoint: {
+        max: parseFloat(theme.breakpoints.tablet),
+        min: parseFloat(theme.breakpoints.mobile)
+      },
+      items: 2,
+      partialVisibilityGutter: 0
+    },
+    mobile: {
+      breakpoint: {
+        max: parseFloat(theme.breakpoints.mobile),
+        min: 0
+      },
+      items: 1,
+      partialVisibilityGutter: 0
+    }
+  };
+  return jsx(ImageCarouselContainer, __assign({
+    ref: ref,
+    id: anchor
+  }, {
+    children: jsx(StyledImageCarousel, __assign({
+      responsive: responsive,
+      centerMode: windowSize.width > 480 ? true : undefined,
+      partialVisbile: windowSize.width <= 480 ? true : false,
+      showDots: false,
+      infinite: true
+    }, rest, {
+      children: imageItems.map(function (item, i) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+
+        return jsx(ImageCarouselItem, __assign({
+          landscape: i % 2 === 0
+        }, {
+          children: jsx(ImageContainer, __assign({
+            landscape: i % 2 === 0
+          }, {
+            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)
+        }), i);
+      })
+    }), void 0)
+  }), void 0);
+});
+export { ImageCarousel, ImageCarousel as default };

package/dist/components/ImageCarousel/ImageCarousel.styles.js

@@ -0,0 +1,96 @@
+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 ImageCarouselContainer = styled.div.withConfig({
+  displayName: "ImageCarouselstyles__ImageCarouselContainer",
+  componentId: "sc-f0j8g6-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow-x: hidden;\n"], ["\n  overflow-x: hidden;\n"])));
+var StyledImageCarousel = styled(MultiCarousel).withConfig({
+  displayName: "ImageCarouselstyles__StyledImageCarousel",
+  componentId: "sc-f0j8g6-1"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  align-items: stretch;\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  width: 100%;\n  align-items: stretch;\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"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing4;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.imageCarousel.arrowBackgroundColor && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        filter: brightness(1);\n        background-color: ", " !important;\n\n        :hover {\n          filter: brightness(0.8);\n        }\n      "], ["\n        filter: brightness(1);\n        background-color: ", " !important;\n\n        :hover {\n          filter: brightness(0.8);\n        }\n      "])), theme.components.imageCarousel.arrowBackgroundColor);
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.imageCarousel.arrowColor;
+}, media.widerThanRestrictedWidthContainer(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      left: 15%;\n    "], ["\n      left: 15%;\n    "]))), media.widerThanRestrictedWidthContainer(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      right: 15%;\n    "], ["\n      right: 15%;\n    "]))));
+var ImageCarouselItem = styled.div.withConfig({
+  displayName: "ImageCarouselstyles__ImageCarouselItem",
+  componentId: "sc-f0j8g6-2"
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  height: 100%;\n  min-height: 25rem;\n  display: flex;\n  align-items: center;\n\n  margin: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  height: 100%;\n  min-height: 25rem;\n  display: flex;\n  align-items: center;\n\n  margin: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return "0 " + theme.spacings.spacing16 + " !important";
+}, media.mobileLarge(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    margin: ", ";\n\n    ", "\n  "], ["\n    margin: ", ";\n\n    ", "\n  "])), function (_a) {
+  var theme = _a.theme;
+  return "0 " + theme.spacings.spacing32 + " !important";
+}, function (_a) {
+  var landscape = _a.landscape;
+  return landscape && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        margin: ", ";\n      "], ["\n        margin: ", ";\n      "])), function (_a) {
+    var theme = _a.theme;
+    return "0 -" + theme.spacings.spacing16 + " !important";
+  });
+}), media.tablet(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    margin-right: ", ";\n    margin-left: ", ";\n\n    ", "\n  "], ["\n    margin-right: ", ";\n    margin-left: ", ";\n\n    ", "\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, function (_a) {
+  var landscape = _a.landscape;
+  return landscape && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n        margin: ", ";\n      "], ["\n        margin: ", ";\n      "])), function (_a) {
+    var theme = _a.theme;
+    return "0 -" + theme.spacings.spacing16 + " !important";
+  });
+}), media.desktop(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    margin: ", ";\n\n    ", "\n  "], ["\n    margin: ", ";\n\n    ", "\n  "])), function (_a) {
+  var theme = _a.theme;
+  return "0 " + theme.spacings.spacing64 + " !important";
+}, function (_a) {
+  var landscape = _a.landscape;
+  return landscape && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n        margin: ", ";\n      "], ["\n        margin: ", ";\n      "])), function (_a) {
+    var theme = _a.theme;
+    return "0 -" + theme.spacings.spacing48 + " !important";
+  });
+}));
+var ImageContainer = styled.div.withConfig({
+  displayName: "ImageCarouselstyles__ImageContainer",
+  componentId: "sc-f0j8g6-3"
+})(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  width: 100%;\n  height: 100% !important;\n  padding: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // tablet large\n  @media screen and (min-width: 896px) {\n    height: 100% !important;\n    padding: 0;\n\n    ", "\n  }\n\n  ", "\n"], ["\n  width: 100%;\n  height: 100% !important;\n  padding: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  // tablet large\n  @media screen and (min-width: 896px) {\n    height: 100% !important;\n    padding: 0;\n\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return "0 " + theme.spacings.spacing56;
+}, function (_a) {
+  var landscape = _a.landscape;
+  return landscape && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      height: 50% !important;\n      padding: 0;\n    "], ["\n      height: 50% !important;\n      padding: 0;\n    "])));
+}, media.mobileLarge(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    height: 90% !important;\n    padding: 0;\n\n    ", "\n  "], ["\n    height: 90% !important;\n    padding: 0;\n\n    ", "\n  "])), function (_a) {
+  var landscape = _a.landscape;
+  return landscape && css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n        height: 45% !important;\n      "], ["\n        height: 45% !important;\n      "])));
+}), media.tablet(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    height: 95% !important;\n    padding: 0;\n\n    ", "\n  "], ["\n    height: 95% !important;\n    padding: 0;\n\n    ", "\n  "])), function (_a) {
+  var landscape = _a.landscape;
+  return landscape && css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n        height: 45% !important;\n      "], ["\n        height: 45% !important;\n      "])));
+}), function (_a) {
+  var landscape = _a.landscape;
+  return landscape && css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n        height: 55% !important;\n      "], ["\n        height: 55% !important;\n      "])));
+}, media.desktop(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    height: 100% !important;\n    padding: 0;\n\n    ", "\n  "], ["\n    height: 100% !important;\n    padding: 0;\n\n    ", "\n  "])), function (_a) {
+  var landscape = _a.landscape;
+  return landscape && css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n        height: 65% !important;\n      "], ["\n        height: 65% !important;\n      "])));
+}));
+var ImageCSS = css(templateObject_22 || (templateObject_22 = __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: "ImageCarouselstyles__StaticImage",
+  componentId: "sc-f0j8g6-4"
+})(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), ImageCSS);
+var DynamicImage = styled(GatsbyImage).withConfig({
+  displayName: "ImageCarouselstyles__DynamicImage",
+  componentId: "sc-f0j8g6-5"
+})(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), ImageCSS);
+var StyledSVG = styled.img.withConfig({
+  displayName: "ImageCarouselstyles__StyledSVG",
+  componentId: "sc-f0j8g6-6"
+})(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n  ", ";\n  object-fit: unset;\n"], ["\n  ", ";\n  object-fit: unset;\n"])), ImageCSS);
+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;
+export { DynamicImage, ImageCarouselContainer, ImageCarouselItem, ImageContainer, StaticImage, StyledImageCarousel, StyledSVG };

package/dist/components/LanguageSelector/LanguageSelector.js

@@ -0,0 +1,72 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { LanguageSelect, SimpleSelectorContainer, StyledLinkButton, StyledLink } from './LanguageSelector.styles.js';
+import { getTheme, getCurrentThemeName, parseInternalLink } from '../utils.js';
+var LanguageSelector = forwardRef(function (_a, ref) {
+  var translations = _a.translations,
+      simple = _a.simple,
+      onClickActive = _a.onClickActive,
+      selectProps = _a.selectProps,
+      rest = __rest(_a, ["translations", "simple", "onClickActive", "selectProps"]);
+
+  var theme = getTheme(getCurrentThemeName()); // If the site has a specific language enabled but the current page
+  // has no translation for that language, the language selector
+  // will not show that language in the current page
+
+  var allAvailableLanguages = translations.order.map(function (lang, i) {
+    return {
+      key: i,
+      value: lang,
+      label: lang
+    };
+  }).filter(function (lang) {
+    return translations.paths[lang.value];
+  });
+  var languageOptions = allAvailableLanguages.filter(function (option) {
+    return option.value !== translations.currentLanguage;
+  });
+
+  var handleChange = function handleChange(value) {
+    window.location.href = parseInternalLink(translations.paths[value]);
+  };
+
+  return jsxs(Fragment, {
+    children: [!simple && jsx(LanguageSelect, __assign({
+      options: languageOptions,
+      defaultValue: translations.currentLanguage,
+      onChange: function onChange(value) {
+        return handleChange(value);
+      },
+      bordered: false,
+      dropdownStyle: {
+        background: theme.components.languageSelector.dropdownBackground,
+        position: 'fixed'
+      },
+      dropdownAlign: {
+        offset: [0, 1]
+      }
+    }, selectProps), void 0), simple && jsx(SimpleSelectorContainer, __assign({}, rest, {
+      ref: ref
+    }, {
+      children: allAvailableLanguages.map(function (lang) {
+        return jsx(Fragment, {
+          children: lang.value === translations.currentLanguage && simple ? jsx(StyledLinkButton, __assign({
+            onClick: onClickActive ? function () {
+              return onClickActive();
+            } : undefined,
+            active: lang.value === translations.currentLanguage
+          }, {
+            children: lang.value
+          }), "translation-" + lang.value) : jsx(StyledLink, __assign({
+            href: translations.paths[lang.value],
+            active: lang.value === translations.currentLanguage
+          }, {
+            children: lang.value
+          }), "translation-" + lang.value)
+        }, void 0);
+      })
+    }), void 0)]
+  }, void 0);
+});
+export { LanguageSelector, LanguageSelector as default };

package/dist/components/LanguageSelector/LanguageSelector.styles.js

@@ -0,0 +1,72 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled, { css } from 'styled-components';
+import { Select } from '@sok/design-system';
+/*
+  Note: Some of the dropdowb styling is applied in GlobalStyle.tsx due to
+  antd Select rendering html elements outside of this component.
+*/
+
+var LanguageSelect = styled(Select).withConfig({
+  displayName: "LanguageSelectorstyles__LanguageSelect",
+  componentId: "sc-n828tp-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .ant-select-selection-item {\n    min-width: 50px;\n    padding-right: ", " !important;\n    color: ", ";\n    font-family: ", " !important;\n    font-size: ", " !important;\n    font-weight: ", " !important;\n  }\n\n  &.ant-select-focused {\n    outline: 1px auto ", ";\n  }\n\n  .ant-select-arrow {\n    color: ", " !important;\n  }\n"], ["\n  .ant-select-selection-item {\n    min-width: 50px;\n    padding-right: ", " !important;\n    color: ", ";\n    font-family: ", " !important;\n    font-size: ", " !important;\n    font-weight: ", " !important;\n  }\n\n  &.ant-select-focused {\n    outline: 1px auto ", ";\n  }\n\n  .ant-select-arrow {\n    color: ", " !important;\n  }\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing24;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.languageSelector.textColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.languageSelector.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.languageSelector.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.languageSelector.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.languageSelector.focusColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.languageSelector.arrowColor;
+});
+var linkStyles = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n\n  color: ", ";\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  ", "\n"], ["\n  display: block;\n\n  color: ", ";\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.globalStyle.a.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.globalStyle.p.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.globalStyle.p.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.globalStyle.p.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.globalStyle.p.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var active = _a.active;
+  return active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), function (_a) {
+    var theme = _a.theme;
+    return theme.components.languageSelector.activeColor;
+  });
+});
+var StyledLink = styled.a.withConfig({
+  displayName: "LanguageSelectorstyles__StyledLink",
+  componentId: "sc-n828tp-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), linkStyles);
+var StyledLinkButton = styled.button.withConfig({
+  displayName: "LanguageSelectorstyles__StyledLinkButton",
+  componentId: "sc-n828tp-2"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: transparent;\n  border: none;\n  padding: 0;\n\n  ", "\n"], ["\n  background: transparent;\n  border: none;\n  padding: 0;\n\n  ", "\n"])), linkStyles);
+var SimpleSelectorContainer = styled.div.withConfig({
+  displayName: "LanguageSelectorstyles__SimpleSelectorContainer",
+  componentId: "sc-n828tp-3"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  column-gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  column-gap: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+export { LanguageSelect, SimpleSelectorContainer, StyledLink, StyledLinkButton };

package/dist/components/Layout/Layout.js

@@ -0,0 +1,15 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { MainContainer } from './Layout.styles.js';
+var Layout = forwardRef(function (_a, ref) {
+  var children = _a.children,
+      rest = __rest(_a, ["children"]);
+
+  return jsx(MainContainer, __assign({}, rest, {
+    ref: ref
+  }, {
+    children: children
+  }), void 0);
+});
+export { Layout, Layout as default };

package/dist/components/Layout/Layout.styles.js

@@ -0,0 +1,8 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled from 'styled-components';
+var MainContainer = styled.div.withConfig({
+  displayName: "Layoutstyles__MainContainer",
+  componentId: "sc-1ak65wr-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n"])));
+var templateObject_1;
+export { MainContainer };

package/dist/components/List/List.js

@@ -0,0 +1,25 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { StyledList } from './List.styles.js';
+import { parseHtmlContent } from '../utils.js';
+
+var List = function List(_a) {
+  var textColor = _a.textColor,
+      values = _a.values,
+      ordered = _a.ordered,
+      className = _a.className,
+      anchor = _a.anchor,
+      rest = __rest(_a, ["textColor", "values", "ordered", "className", "anchor"]);
+
+  return jsx(StyledList, __assign({
+    id: anchor,
+    as: ordered ? 'ol' : 'ul',
+    textColor: textColor,
+    dangerouslySetInnerHTML: {
+      __html: parseHtmlContent(values)
+    },
+    className: className
+  }, rest), void 0);
+};
+
+export { List, List as default };

package/dist/components/List/List.styles.js

@@ -0,0 +1,11 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled from 'styled-components';
+var StyledList = styled.div.withConfig({
+  displayName: "Liststyles__StyledList",
+  componentId: "sc-1d3hz2-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  li {\n    color: ", ";\n  }\n"], ["\n  li {\n    color: ", ";\n  }\n"])), function (_a) {
+  var textColor = _a.textColor;
+  return textColor;
+});
+var templateObject_1;
+export { StyledList };

package/dist/components/MarginWrapper/MarginWrapper.js

@@ -0,0 +1,17 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { Wrapper } from './MarginWrapper.styles.js';
+
+var MarginWrapper = function MarginWrapper(_a) {
+  var children = _a.children,
+      smallBottomMargin = _a.smallBottomMargin,
+      noBottomMargin = _a.noBottomMargin;
+  return jsx(Wrapper, __assign({
+    smallBottomMargin: smallBottomMargin,
+    noBottomMargin: noBottomMargin
+  }, {
+    children: children
+  }), void 0);
+};
+
+export { MarginWrapper, MarginWrapper as default };

package/dist/components/MarginWrapper/MarginWrapper.styles.js

@@ -0,0 +1,38 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled, { css } from 'styled-components';
+import media from '../../styles/media.js';
+/*
+  More detailed documentation on layout: https://confluence.sok.fi/display/DIGIALUSTAT/Page+layout+rules
+  Also see src/components/utils.ts helper functions
+*/
+
+var Wrapper = styled.div.withConfig({
+  displayName: "MarginWrapperstyles__Wrapper",
+  componentId: "sc-13ewons-0"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  /*\n    Default bottom margin between blocks\n  */\n\n  margin-bottom: ", ";\n\n  ", "\n\n  ", "\n\n  /*\n    Bottom margin needs to be removed for a columns block with\n    background color when the next block is also a columns block with\n    background color\n    OR\n    if the block last columns block with background color on the page\n  */\n  ", "\n\n  /*\n    Smaller bottom margin needs to be used for consecutive text blocks\n  */\n  ", "\n"], ["\n  /*\n    Default bottom margin between blocks\n  */\n\n  margin-bottom: ", ";\n\n  ", "\n\n  ", "\n\n  /*\n    Bottom margin needs to be removed for a columns block with\n    background color when the next block is also a columns block with\n    background color\n    OR\n    if the block last columns block with background color on the page\n  */\n  ", "\n\n  /*\n    Smaller bottom margin needs to be used for consecutive text blocks\n  */\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.marginwrapper.block.mobile.margin.bottom;
+}, media.tablet(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.marginwrapper.block.tablet.margin.bottom;
+}), media.desktop(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    margin-bottom: ", ";\n  "], ["\n    margin-bottom: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.marginwrapper.block.desktop.margin.bottom;
+}), function (_a) {
+  var noBottomMargin = _a.noBottomMargin;
+  return noBottomMargin && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      margin-bottom: 0;\n\n      ", "\n\n      ", "\n    "], ["\n      margin-bottom: 0;\n\n      ", "\n\n      ", "\n    "])), media.tablet(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        margin-bottom: 0;\n     "], ["\n        margin-bottom: 0;\n     "]))), media.desktop(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n        margin-bottom: 0;\n      "], ["\n        margin-bottom: 0;\n      "]))));
+}, function (_a) {
+  var smallBottomMargin = _a.smallBottomMargin;
+  return smallBottomMargin && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      margin-bottom: ", ";\n\n      ", "\n\n      ", "\n    "], ["\n      margin-bottom: ", ";\n\n      ", "\n\n      ", "\n    "])), function (_a) {
+    var theme = _a.theme;
+    return theme.components.marginwrapper.textBlock.mobile.margin.bottom;
+  }, media.tablet(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        margin-bottom: ", ";\n     "], ["\n        margin-bottom: ", ";\n     "])), function (_a) {
+    var theme = _a.theme;
+    return theme.components.marginwrapper.textBlock.tablet.margin.bottom;
+  }), media.desktop(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        margin-bottom: ", ";\n      "], ["\n        margin-bottom: ", ";\n      "])), function (_a) {
+    var theme = _a.theme;
+    return theme.components.marginwrapper.textBlock.desktop.margin.bottom;
+  }));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+export { Wrapper };

package/dist/components/OverlayCards/OverlayCard/OverlayCard.js

@@ -0,0 +1,132 @@
+import { __assign } from '../../../_virtual/_tslib.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { OverlayCardContainer, DynamicImage, StaticImage, SvgContainer, SvgImage, OverlayBackground, OverlayLink, TextContainer, Title, Description, OverlayCardContainerLink, OverlayBackgroundHover, OverlayTextContainerHover } from './OverlayCard.styles.js';
+import { parseInternalLink, parseLink } from '../../utils.js';
+import { OverlayLogicOptions } from '../OverlayCards.types.js';
+
+var OverlayCardShowOnClick = function OverlayCardShowOnClick(_a) {
+  var _b, _c, _d;
+
+  var showLink = _a.showLink,
+      onClick = _a.onClick,
+      item = _a.item,
+      href = _a.href,
+      openInNewTab = _a.openInNewTab;
+  var title = item.title,
+      description = item.description,
+      image = item.image,
+      svg = item.svg;
+  return jsxs(OverlayCardContainer, __assign({
+    role: "button",
+    onClick: onClick
+  }, {
+    children: [(image === null || image === void 0 ? void 0 : image.mimeType.includes('image')) && ((_b = image === null || image === void 0 ? void 0 : image.localFile) === null || _b === void 0 ? void 0 : _b.childImageSharp) && jsx(DynamicImage, {
+      image: (_c = image.localFile.childImageSharp) === null || _c === void 0 ? void 0 : _c.gatsbyImageData,
+      alt: ""
+    }, void 0), (image === null || image === void 0 ? void 0 : image.mimeType.includes('image')) && !((_d = image === null || image === void 0 ? void 0 : image.localFile) === null || _d === void 0 ? void 0 : _d.childImageSharp) && jsx(StaticImage, {
+      src: image.mediaItemUrl,
+      alt: ""
+    }, void 0), svg && jsx(SvgContainer, {
+      children: jsx(SvgImage, {
+        src: svg.mediaItemUrl
+      }, void 0)
+    }, void 0), showLink && jsxs(Fragment, {
+      children: [jsx(OverlayBackground, {}, void 0), jsx(OverlayLink, __assign({
+        target: openInNewTab ? '__blank' : undefined,
+        rel: openInNewTab ? 'noopener' : undefined,
+        href: href
+      }, {
+        children: jsxs(TextContainer, {
+          children: [title && jsx(Title, {
+            children: title
+          }, void 0), jsx(Description, {
+            dangerouslySetInnerHTML: {
+              __html: description
+            }
+          }, void 0)]
+        }, void 0)
+      }), void 0)]
+    }, void 0)]
+  }), void 0);
+};
+
+var OverlayCardShowOnHover = function OverlayCardShowOnHover(_a) {
+  var _b, _c, _d;
+
+  var item = _a.item,
+      alwaysShowInMobile = _a.alwaysShowInMobile,
+      href = _a.href,
+      openInNewTab = _a.openInNewTab;
+  var title = item.title,
+      description = item.description,
+      image = item.image,
+      svg = item.svg;
+  return jsxs(OverlayCardContainerLink, __assign({
+    target: openInNewTab ? '__blank' : undefined,
+    rel: openInNewTab ? 'noopener' : undefined,
+    href: href
+  }, {
+    children: [(image === null || image === void 0 ? void 0 : image.mimeType.includes('image')) && ((_b = image === null || image === void 0 ? void 0 : image.localFile) === null || _b === void 0 ? void 0 : _b.childImageSharp) && jsx(DynamicImage, {
+      image: (_c = image.localFile.childImageSharp) === null || _c === void 0 ? void 0 : _c.gatsbyImageData,
+      alt: ""
+    }, void 0), (image === null || image === void 0 ? void 0 : image.mimeType.includes('image')) && !((_d = image === null || image === void 0 ? void 0 : image.localFile) === null || _d === void 0 ? void 0 : _d.childImageSharp) && jsx(StaticImage, {
+      src: image.mediaItemUrl,
+      alt: ""
+    }, void 0), svg && jsx(SvgContainer, {
+      children: jsx(SvgImage, {
+        src: svg.mediaItemUrl
+      }, void 0)
+    }, void 0), jsx(OverlayBackgroundHover, {
+      alwaysShowInMobile: alwaysShowInMobile
+    }, void 0), jsx(OverlayTextContainerHover, __assign({
+      alwaysShowInMobile: alwaysShowInMobile
+    }, {
+      children: jsxs(TextContainer, {
+        children: [title && jsx(Title, {
+          children: title
+        }, void 0), jsx(Description, {
+          dangerouslySetInnerHTML: {
+            __html: description
+          }
+        }, void 0)]
+      }, void 0)
+    }), void 0)]
+  }), void 0);
+};
+
+var OverlayCard = function OverlayCard(_a) {
+  var enableLinks = _a.enableLinks,
+      showLink = _a.showLink,
+      onClick = _a.onClick,
+      item = _a.item,
+      overlayLogic = _a.overlayLogic;
+  var externalLink = item.externalLink,
+      linkToPage = item.linkToPage;
+  var parsedInternalLink = (linkToPage === null || linkToPage === void 0 ? void 0 : linkToPage.uri) ? parseInternalLink(linkToPage.uri) : undefined;
+  var parsedExternalLink = externalLink ? parseLink(externalLink) : undefined;
+  /*  It is possible to add both internal and external link to the card while creating the content,
+  so if the card has an internal link, that will be used as href. If enableLinks is false, href will
+  always be undefined */
+
+  var href = enableLinks ? parsedInternalLink || parsedExternalLink : undefined;
+  var openInNewTab = href === parsedExternalLink;
+
+  if (overlayLogic === OverlayLogicOptions.SHOW_DESCRIPTION_ON_CLICK) {
+    return jsx(OverlayCardShowOnClick, {
+      openInNewTab: openInNewTab,
+      href: href,
+      enableLinks: enableLinks,
+      showLink: showLink,
+      onClick: onClick,
+      item: item
+    }, void 0);
+  } else if (overlayLogic === OverlayLogicOptions.SHOW_DESCRIPTION_ON_HOVER || overlayLogic === OverlayLogicOptions.ALWAYS_SHOW_DESCRIPTION_IN_MOBILE) return jsx(OverlayCardShowOnHover, {
+    openInNewTab: openInNewTab,
+    href: href,
+    alwaysShowInMobile: overlayLogic === OverlayLogicOptions.ALWAYS_SHOW_DESCRIPTION_IN_MOBILE,
+    enableLinks: enableLinks,
+    item: item
+  }, void 0);else return null;
+};
+
+export { OverlayCard, OverlayCard as default };