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

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

@@ -0,0 +1,133 @@
+import { __makeTemplateObject } from '../../../_virtual/_tslib.js';
+import { GatsbyImage } from 'gatsby-plugin-image';
+import styled, { css } from 'styled-components';
+import media from '../../../styles/media.js';
+var ImageCSS = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  object-fit: cover;\n  height: 100%;\n"], ["\n  width: 100%;\n  object-fit: cover;\n  height: 100%;\n"])));
+var OverlayCSS = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n"])));
+var ShowInMobileCSS = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n\n  ", "\n"], ["\n  display: flex;\n  flex-direction: row;\n\n  ", "\n"])), media.desktop(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: none;\n  "], ["\n    display: none;\n  "]))));
+var OverlayCardContainer = styled.div.withConfig({
+  displayName: "OverlayCardstyles__OverlayCardContainer",
+  componentId: "sc-cykn5q-0"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  cursor: pointer;\n"], ["\n  position: relative;\n  height: ", ";\n  cursor: pointer;\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.cardHeight;
+});
+var OverlayCardContainerLink = styled.a.withConfig({
+  displayName: "OverlayCardstyles__OverlayCardContainerLink",
+  componentId: "sc-cykn5q-1"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  cursor: pointer;\n\n  &:hover {\n    filter: unset;\n\n    // needed for showing OverlayBackgroundHover\n    // and OverlayTextContainerHover on hover\n    div {\n      display: flex;\n      flex-direction: column;\n    }\n  }\n"], ["\n  position: relative;\n  height: ", ";\n  cursor: pointer;\n\n  &:hover {\n    filter: unset;\n\n    // needed for showing OverlayBackgroundHover\n    // and OverlayTextContainerHover on hover\n    div {\n      display: flex;\n      flex-direction: column;\n    }\n  }\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.cardHeight;
+});
+var DynamicImage = styled(GatsbyImage).withConfig({
+  displayName: "OverlayCardstyles__DynamicImage",
+  componentId: "sc-cykn5q-2"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ImageCSS);
+var StaticImage = styled.img.withConfig({
+  displayName: "OverlayCardstyles__StaticImage",
+  componentId: "sc-cykn5q-3"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ImageCSS);
+var SvgImage = styled.img.withConfig({
+  displayName: "OverlayCardstyles__SvgImage",
+  componentId: "sc-cykn5q-4"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  max-width: 70%;\n  max-height: 70%;\n  min-width: 50%;\n  min-height: 50%;\n  object-fit: contain;\n"], ["\n  max-width: 70%;\n  max-height: 70%;\n  min-width: 50%;\n  min-height: 50%;\n  object-fit: contain;\n"])));
+var OverlayBackground = styled.div.withConfig({
+  displayName: "OverlayCardstyles__OverlayBackground",
+  componentId: "sc-cykn5q-5"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  ", "\n\n  background-color: ", ";\n  opacity: ", ";\n"], ["\n  ", "\n\n  background-color: ", ";\n  opacity: ", ";\n"])), OverlayCSS, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.overlayBackgroundColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.overlayBackgroundOpacity;
+});
+var OverlayBackgroundHover = styled.div.withConfig({
+  displayName: "OverlayCardstyles__OverlayBackgroundHover",
+  componentId: "sc-cykn5q-6"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n\n  background-color: ", ";\n  opacity: ", ";\n\n  ", "\n"], ["\n  ", "\n\n  background-color: ", ";\n  opacity: ", ";\n\n  ", "\n"])), OverlayCSS, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.overlayBackgroundColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.overlayBackgroundOpacity;
+}, function (_a) {
+  var alwaysShowInMobile = _a.alwaysShowInMobile;
+  return alwaysShowInMobile ? css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), ShowInMobileCSS) : css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n          display: none;\n        "], ["\n          display: none;\n        "])));
+});
+var OverlayLink = styled.a.withConfig({
+  displayName: "OverlayCardstyles__OverlayLink",
+  componentId: "sc-cykn5q-7"
+})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", "\n\n  text-decoration: none;\n\n  &:hover {\n    filter: unset;\n  }\n"], ["\n  ", "\n\n  text-decoration: none;\n\n  &:hover {\n    filter: unset;\n  }\n"])), OverlayCSS);
+var OverlayTextContainerHover = styled.div.withConfig({
+  displayName: "OverlayCardstyles__OverlayTextContainerHover",
+  componentId: "sc-cykn5q-8"
+})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), OverlayCSS, function (_a) {
+  var alwaysShowInMobile = _a.alwaysShowInMobile;
+  return alwaysShowInMobile ? css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n          ", "\n        "], ["\n          ", "\n        "])), ShowInMobileCSS) : css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n          display: none;\n        "], ["\n          display: none;\n        "])));
+});
+var SvgContainer = styled.div.withConfig({
+  displayName: "OverlayCardstyles__SvgContainer",
+  componentId: "sc-cykn5q-9"
+})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n\n  display:flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 100%;\n  height: 100%;\n"], ["\n  ", "\n\n  display:flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 100%;\n  height: 100%;\n"])), OverlayCSS);
+var TextContainer = styled.div.withConfig({
+  displayName: "OverlayCardstyles__TextContainer",
+  componentId: "sc-cykn5q-10"
+})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  text-align: ", ";\n\n\n  margin: ", ";\n\n  padding: ", ";\n"], ["\n  text-align: ", ";\n\n\n  margin: ", ";\n\n  padding: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.centerText ? 'center' : 'left';
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.centerText ? '0 auto' : '0';
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+});
+var Title = styled.p.withConfig({
+  displayName: "OverlayCardstyles__Title",
+  componentId: "sc-cykn5q-11"
+})(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  color: ", ";\n  word-break: break-word;\n  margin-bottom: ", ";\n\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  color: ", ";\n  word-break: break-word;\n  margin-bottom: ", ";\n\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.title.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing24;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.title.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.title.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.title.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.title.fontSizes.mobile.lineHeight;
+}, media.tablet(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  "], ["\n  font-size: ", ";\n  line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.title.fontSizes.tablet.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.title.fontSizes.tablet.lineHeight;
+}), media.desktop(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  font-size: ", ";\n  line-height: ", ";\n  "], ["\n  font-size: ", ";\n  line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.title.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.title.fontSizes.desktop.lineHeight;
+}));
+var Description = styled.p.withConfig({
+  displayName: "OverlayCardstyles__Description",
+  componentId: "sc-cykn5q-12"
+})(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  color: ", ";\n  word-break: break-word;\n\n  p {\n    color: ", ";\n    word-break: break-word;\n    margin: 0;\n    margin-bottom: ", ";\n  }\n"], ["\n  color: ", ";\n  word-break: break-word;\n\n  p {\n    color: ", ";\n    word-break: break-word;\n    margin: 0;\n    margin-bottom: ", ";\n  }\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.description.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.description.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+});
+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;
+export { Description, DynamicImage, OverlayBackground, OverlayBackgroundHover, OverlayCardContainer, OverlayCardContainerLink, OverlayLink, OverlayTextContainerHover, StaticImage, SvgContainer, SvgImage, TextContainer, Title };

package/dist/components/OverlayCards/OverlayCards.js

@@ -0,0 +1,46 @@
+import { __rest, __read, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import OverlayCard from './OverlayCard/OverlayCard.js';
+import { MainContainer } from './OverlayCards.styles.js';
+/*
+If there is a need later on for adding a link in the description, then there should be
+another field e.g. "Html Description" in WP acf fields, that is shown ONLY WHEN
+"Enable links" is false.The "Description" acf field should be hidden when "Html Description"
+field is shown. This is to prevent adding links inside links.
+ */
+
+var OverlayCards = forwardRef(function (_a, ref) {
+  var overlayCardsItems = _a.overlayCardsItems,
+      enableLinks = _a.enableLinks,
+      anchor = _a.anchor,
+      overlayLogic = _a.overlayLogic,
+      rest = __rest(_a, ["overlayCardsItems", "enableLinks", "anchor", "overlayLogic"]);
+
+  var _b = __read(useState(undefined), 2),
+      visibleIndex = _b[0],
+      setVisibleIndex = _b[1];
+
+  var handleClick = function handleClick(i) {
+    setVisibleIndex(i);
+  };
+
+  return jsx(MainContainer, __assign({
+    ref: ref
+  }, rest, {
+    id: anchor ? anchor : undefined
+  }, {
+    children: overlayCardsItems && overlayCardsItems.map(function (item, i) {
+      return jsx(OverlayCard, {
+        overlayLogic: overlayLogic,
+        onClick: function onClick() {
+          return handleClick(i);
+        },
+        showLink: !!(visibleIndex === i),
+        item: item,
+        enableLinks: enableLinks
+      }, "overlay-card-" + i + "-" + item.title);
+    })
+  }), void 0);
+});
+export { OverlayCards, OverlayCards as default };

package/dist/components/OverlayCards/OverlayCards.styles.js

@@ -0,0 +1,14 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled from 'styled-components';
+var MainContainer = styled.div.withConfig({
+  displayName: "OverlayCardsstyles__MainContainer",
+  componentId: "sc-6xe5ku-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  --scalableCardWidth: 380px;\n\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--scalableCardWidth)), max-content));\n  grid-gap: ", ";\n  grid-row-gap: ", ";\n  justify-content: center;\n  margin: 0px;\n  width: 100%;\n  flex-flow: row wrap;\n"], ["\n  --scalableCardWidth: 380px;\n\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--scalableCardWidth)), max-content));\n  grid-gap: ", ";\n  grid-row-gap: ", ";\n  justify-content: center;\n  margin: 0px;\n  width: 100%;\n  flex-flow: row wrap;\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.gap;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.overlayCards.gap;
+});
+var templateObject_1;
+export { MainContainer };

package/dist/components/OverlayCards/OverlayCards.types.js

@@ -0,0 +1,9 @@
+var OverlayLogicOptions;
+
+(function (OverlayLogicOptions) {
+  OverlayLogicOptions["SHOW_DESCRIPTION_ON_HOVER"] = "show_description_on_hover";
+  OverlayLogicOptions["SHOW_DESCRIPTION_ON_CLICK"] = "show_description_on_click";
+  OverlayLogicOptions["ALWAYS_SHOW_DESCRIPTION_IN_MOBILE"] = "always_show_description_in_mobile";
+})(OverlayLogicOptions || (OverlayLogicOptions = {}));
+
+export { OverlayLogicOptions };

package/dist/components/Paragraph/Paragraph.js

@@ -0,0 +1,29 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { StyledParagraph } from './Paragraph.styles.js';
+import { parseHtmlContent } from '../utils.js';
+/*
+  NB! textColor from WordPress is likely not working due to global p styles overriding the color.
+  Todo: fix or remove
+*/
+
+var Paragraph = forwardRef(function (_a, ref) {
+  var align = _a.align,
+      textColor = _a.textColor,
+      content = _a.content,
+      anchor = _a.anchor,
+      rest = __rest(_a, ["align", "textColor", "content", "anchor"]);
+
+  return jsx(StyledParagraph, __assign({
+    id: anchor,
+    align: align,
+    textColor: textColor,
+    dangerouslySetInnerHTML: {
+      __html: parseHtmlContent(content)
+    }
+  }, rest, {
+    ref: ref
+  }), void 0);
+});
+export { Paragraph, Paragraph as default };

package/dist/components/Paragraph/Paragraph.styles.js

@@ -0,0 +1,14 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled from 'styled-components';
+var StyledParagraph = styled.p.withConfig({
+  displayName: "Paragraphstyles__StyledParagraph",
+  componentId: "sc-kt6swv-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  text-align: ", ";\n  margin: 0;\n"], ["\n  color: ", ";\n  text-align: ", ";\n  margin: 0;\n"])), function (_a) {
+  var textColor = _a.textColor;
+  return textColor ? textColor : '';
+}, function (_a) {
+  var align = _a.align;
+  return align;
+});
+var templateObject_1;
+export { StyledParagraph };

package/dist/components/PlaceOfBusiness/ContactInformation/ContactInformation.js

@@ -0,0 +1,45 @@
+import { __assign } from '../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ContactInfoContainer, Title } from './ContactInformation.styles.js';
+import translationJSON from '../../../locales/translations.json.js';
+
+var ContactInformation = function ContactInformation(_a) {
+  var _b, _c;
+
+  var location = _a.location,
+      contactInfo = _a.contactInfo,
+      website = _a.website,
+      lang = _a.lang;
+  var fullAddress = (location === null || location === void 0 ? void 0 : location.address) ? (location.address.street ? location.address.street + "," : '') + " " + location.address.postcode + " " + location.address.postcodeName : undefined;
+  return jsxs(ContactInfoContainer, {
+    children: [jsx(Title, {
+      children: translationJSON.placeOfBusiness.placeOfBusinessInfo.contactInfo[lang]
+    }, void 0), fullAddress && jsxs("div", {
+      children: [jsx("p", {
+        children: fullAddress
+      }, void 0), jsx("a", __assign({
+        href: "https://www.google.com/maps/place/" + fullAddress,
+        rel: "noopener noreferrer",
+        target: "_blank"
+      }, {
+        children: translationJSON.placeOfBusiness.getRoute[lang]
+      }), void 0)]
+    }, void 0), ((_b = contactInfo === null || contactInfo === void 0 ? void 0 : contactInfo.phoneNumber) === null || _b === void 0 ? void 0 : _b.number) && jsxs("div", {
+      children: [jsx("p", {
+        children: translationJSON.placeOfBusiness.phone[lang] + ": " + contactInfo.phoneNumber.number
+      }, void 0), ((_c = contactInfo === null || contactInfo === void 0 ? void 0 : contactInfo.phoneNumber) === null || _c === void 0 ? void 0 : _c.callCharge) && jsx("p", {
+        children: contactInfo.phoneNumber.callCharge
+      }, void 0)]
+    }, void 0), jsx("a", __assign({
+      href: "https://s-ryhma.fi/yhteystiedot"
+    }, {
+      children: translationJSON.placeOfBusiness.placeOfBusinessInfo.reclamationsAndInvoicing[lang]
+    }), void 0), (website === null || website === void 0 ? void 0 : website.url) && jsx("a", __assign({
+      href: website.url
+    }, {
+      children: translationJSON.placeOfBusiness.placeOfBusinessInfo.ownWebsite[lang]
+    }), void 0)]
+  }, void 0);
+};
+
+export { ContactInformation, ContactInformation as default };

package/dist/components/PlaceOfBusiness/ContactInformation/ContactInformation.styles.js

@@ -0,0 +1,37 @@
+import { __makeTemplateObject } from '../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+import media from '../../../styles/media.js';
+var ContactInfoContainer = styled.div.withConfig({
+  displayName: "ContactInformationstyles__ContactInfoContainer",
+  componentId: "sc-1lxjdtv-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  row-gap: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+});
+var Title = styled.div.withConfig({
+  displayName: "ContactInformationstyles__Title",
+  componentId: "sc-1lxjdtv-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n\n  ", "\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.contactInformation.title.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.contactInformation.title.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.contactInformation.title.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.contactInformation.title.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.contactInformation.title.color;
+}, media.desktop(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.contactInformation.title.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.contactInformation.title.fontSizes.desktop.lineHeight;
+}));
+var templateObject_1, templateObject_2, templateObject_3;
+export { ContactInfoContainer, Title };

package/dist/components/PlaceOfBusiness/LogoTitle/LogoTitle.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { LogoTitleContainer, Logo, Title } from './LogoTitle.styles.js';
+
+var LogoTitle = function LogoTitle(_a) {
+  var name = _a.name,
+      logoUrl = _a.logoUrl;
+  return jsxs(LogoTitleContainer, {
+    children: [jsx(Logo, {
+      src: logoUrl
+    }, void 0), jsx(Title, {
+      children: name
+    }, void 0)]
+  }, void 0);
+};
+
+export { LogoTitle, LogoTitle as default };

package/dist/components/PlaceOfBusiness/LogoTitle/LogoTitle.styles.js

@@ -0,0 +1,44 @@
+import { __makeTemplateObject } from '../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+import media from '../../../styles/media.js';
+var LogoTitleContainer = styled.div.withConfig({
+  displayName: "LogoTitlestyles__LogoTitleContainer",
+  componentId: "sc-xrz176-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  column-gap: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  column-gap: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+});
+var Logo = styled.img.withConfig({
+  displayName: "LogoTitlestyles__Logo",
+  componentId: "sc-xrz176-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.logoTitle.logoSize;
+});
+var Title = styled.div.withConfig({
+  displayName: "LogoTitlestyles__Title",
+  componentId: "sc-xrz176-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n\n  ", "\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.logoTitle.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.logoTitle.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.logoTitle.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.logoTitle.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.logoTitle.color;
+}, media.desktop(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        font-size: ", ";\n        line-height: ", ";\n      "], ["\n        font-size: ", ";\n        line-height: ", ";\n      "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.logoTitle.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.logoTitle.fontSizes.desktop.lineHeight;
+}));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+export { Logo, LogoTitleContainer, Title };

package/dist/components/PlaceOfBusiness/OpenToday/OpenToday.js

@@ -0,0 +1,43 @@
+import { __assign } from '../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getOpenHours, isOpenNow } from '../utils.js';
+import translationJSON from '../../../locales/translations.json.js';
+import { MainContainer, OpenTodayLabel, OpeningHoursContainer, StatusCircleContainer } from './OpenToday.styles.js';
+import { GreenCircle, RedCircle } from '../../../assets/icons/Icons.js';
+import { format } from 'date-fns';
+
+var OpenToday = function OpenToday(_a) {
+  var _b, _c;
+
+  var weeklyOpeningTimes = _a.weeklyOpeningTimes,
+      large = _a.large,
+      lang = _a.lang;
+  var formattedCurrentDate = format(new Date(), 'yyyy-MM-dd');
+  var openingTimesToday = (_c = (_b = weeklyOpeningTimes === null || weeklyOpeningTimes === void 0 ? void 0 : weeklyOpeningTimes[0]) === null || _b === void 0 ? void 0 : _b.openingTimes) === null || _c === void 0 ? void 0 : _c.find(function (day) {
+    return day.date === formattedCurrentDate;
+  });
+  var openHours = getOpenHours(lang, openingTimesToday);
+  return jsxs(MainContainer, __assign({
+    "data-testid": "pob-open-today"
+  }, {
+    children: [jsx(OpenTodayLabel, __assign({
+      large: !!large
+    }, {
+      children: translationJSON.placeOfBusiness.openToday[lang]
+    }), void 0), jsxs(OpeningHoursContainer, {
+      children: [isOpenNow(formattedCurrentDate, openingTimesToday) ? jsx(StatusCircleContainer, {
+        children: jsx(GreenCircle, {}, void 0)
+      }, void 0) : jsx(StatusCircleContainer, {
+        children: jsx(RedCircle, {}, void 0)
+      }, void 0), jsx("div", {
+        children: openHours.map(function (time, i) {
+          return jsx("p", {
+            children: time
+          }, i);
+        })
+      }, void 0)]
+    }, void 0)]
+  }), void 0);
+};
+
+export { OpenToday, OpenToday as default };

package/dist/components/PlaceOfBusiness/OpenToday/OpenToday.styles.js

@@ -0,0 +1,63 @@
+import { __makeTemplateObject } from '../../../_virtual/_tslib.js';
+import styled, { css } from 'styled-components';
+import media from '../../../styles/media.js';
+var MainContainer = styled.div.withConfig({
+  displayName: "OpenTodaystyles__MainContainer",
+  componentId: "sc-d29eug-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var StatusCircleContainer = styled.div.withConfig({
+  displayName: "OpenTodaystyles__StatusCircleContainer",
+  componentId: "sc-d29eug-1"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  margin-right: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8;
+});
+var OpeningHoursContainer = styled.div.withConfig({
+  displayName: "OpenTodaystyles__OpeningHoursContainer",
+  componentId: "sc-d29eug-2"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n"], ["\n  display: flex;\n  align-items: center;\n  word-break: break-word;\n"])));
+var OpenTodayLabel = styled.div.withConfig({
+  displayName: "OpenTodaystyles__OpenTodayLabel",
+  componentId: "sc-d29eug-3"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  color: ", ";\n\n  ", "\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  color: ", ";\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.openToday.title.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.openToday.title.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.openToday.title.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.openToday.title.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.placeOfBusiness.listItem.labelColor;
+}, function (_a) {
+  var large = _a.large;
+  return large && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-family: ", ";\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n\n      ", "\n    "], ["\n      font-family: ", ";\n      font-weight: ", ";\n      font-size: ", ";\n      line-height: ", ";\n      color: ", ";\n\n      ", "\n    "])), function (_a) {
+    var theme = _a.theme;
+    return theme.components.placeOfBusiness.openToday.large.title.fontFamily;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.placeOfBusiness.openToday.large.title.fontWeight;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.placeOfBusiness.openToday.large.title.fontSizes.mobile.fontSize;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.placeOfBusiness.openToday.large.title.fontSizes.mobile.lineHeight;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.placeOfBusiness.openToday.large.title.color;
+  }, media.desktop(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.placeOfBusiness.openToday.large.title.fontSizes.desktop.fontSize;
+  }, function (_a) {
+    var theme = _a.theme;
+    return theme.components.placeOfBusiness.openToday.large.title.fontSizes.desktop.lineHeight;
+  }));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+export { MainContainer, OpenTodayLabel, OpeningHoursContainer, StatusCircleContainer };

package/dist/components/PlaceOfBusiness/OpeningHours/OpeningHours.js

@@ -0,0 +1,77 @@
+import { __read, __assign } from '../../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { OpeningHoursContainer, OpeningHoursList, HoursRow, Day, Hours, ButtonsContainer, Button } from './OpeningHours.styles.js';
+import { getOpenHours } from '../utils.js';
+import translationJSON from '../../../locales/translations.json.js';
+import { getISOWeek, startOfWeek, endOfWeek, format, addDays } from 'date-fns';
+
+var OpeningHours = function OpeningHours(_a) {
+  var weeklyOpeningTimes = _a.weeklyOpeningTimes,
+      lang = _a.lang;
+
+  var _b = __read(useState(0), 2),
+      selectedWeekIndex = _b[0],
+      setSelectedWeekIndex = _b[1];
+
+  var translationsCommon = translationJSON.common;
+  var translationsDays = translationsCommon.dayAbbreviations;
+  var today = new Date();
+  var currentWeekNumber = getISOWeek(today);
+  var startOfThisWeek = startOfWeek(today, {
+    weekStartsOn: 1
+  });
+  var endOfThisWeek = endOfWeek(today, {
+    weekStartsOn: 1
+  });
+  var dateRangesPerWeek = [0, 1, 2].map(function (week) {
+    var startDate = format(addDays(startOfThisWeek, 7 * week), 'd.M.yyyy');
+    var endDate = format(addDays(endOfThisWeek, 7 * week), 'd.M.yyyy');
+    return startDate + " - " + endDate;
+  });
+  var weekDays = [translationsDays.monday[lang], translationsDays.tuesday[lang], translationsDays.wednesday[lang], translationsDays.thursday[lang], translationsDays.friday[lang], translationsDays.saturday[lang], translationsDays.sunday[lang]];
+  return jsxs(OpeningHoursContainer, __assign({
+    "data-testid": "pob-opening-hours"
+  }, {
+    children: [jsx("p", {
+      children: dateRangesPerWeek[selectedWeekIndex]
+    }, void 0), jsx(OpeningHoursList, {
+      children: weekDays.map(function (day, i) {
+        var _a, _b;
+
+        return jsxs(HoursRow, {
+          children: [jsx(Day, {
+            children: jsx("p", {
+              children: jsx("strong", {
+                children: day
+              }, void 0)
+            }, void 0)
+          }, void 0), jsx(Hours, {
+            children: getOpenHours(lang, (_b = (_a = weeklyOpeningTimes === null || weeklyOpeningTimes === void 0 ? void 0 : weeklyOpeningTimes[selectedWeekIndex]) === null || _a === void 0 ? void 0 : _a.openingTimes) === null || _b === void 0 ? void 0 : _b[i]).map(function (time, i) {
+              return jsx("p", {
+                children: time
+              }, i);
+            })
+          }, void 0)]
+        }, day);
+      })
+    }, void 0), jsxs(ButtonsContainer, {
+      children: [jsx("p", {
+        children: jsx("strong", {
+          children: translationsCommon.week[lang]
+        }, void 0)
+      }, void 0), [0, 1, 2].map(function (i) {
+        return jsx(Button, __assign({
+          active: selectedWeekIndex === i,
+          onClick: function onClick() {
+            return setSelectedWeekIndex(i);
+          }
+        }, {
+          children: currentWeekNumber + i
+        }), i);
+      })]
+    }, void 0)]
+  }), void 0);
+};
+
+export { OpeningHours, OpeningHours as default };