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

package/dist/components/BlockGenerator/BlockContent.js

@@ -0,0 +1,139 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsx } from 'react/jsx-runtime';
+import { components } from '../constants.js';
+import Button from '../Button/Button.js';
+import SideBySide from '../SideBySide/SideBySide.js';
+import Hero from '../Hero/Hero.js';
+import SubHero from '../SubHero/SubHero.js';
+import Paragraph from '../Paragraph/Paragraph.js';
+import Columns from '../Columns/Columns.js';
+import AccordionBlock from '../Accordion/Accordion.js';
+import Card from '../Card/Card.js';
+import FullBgHero from '../FullBgHero/FullBgHero.js';
+import Embed from '../Embed/Embed.js';
+import List from '../List/List.js';
+import Table from '../Table/Table.js';
+import Carousel from '../Carousel/Carousel.js';
+import CarouselNarrow from '../CarouselNarrow/CarouselNarrow.js';
+import FormBuilder from '../FormBuilder/FormBuilder.js';
+import Heading from '../Heading/Heading.js';
+import Promotion from '../Promotion/Promotion.js';
+import AnimationWrapper from '../AnimationWrapper/AnimationWrapper.js';
+import IconLinks from '../IconLinks/IconLinks.js';
+import ImageCarousel from '../ImageCarousel/ImageCarousel.js';
+import PlaceOfBusinessSearch from '../PlaceOfBusiness/PlaceOfBusinessSearch/PlaceOfBusinessSearch.js';
+import 'react';
+import '../PlaceOfBusiness/PlaceOfBusinessInfo/PlaceOfBusinessInfo.styles.js';
+import 'date-fns';
+import '../PlaceOfBusiness/OpenToday/OpenToday.styles.js';
+import '../PlaceOfBusiness/LogoTitle/LogoTitle.styles.js';
+import '../PlaceOfBusiness/OpeningHours/OpeningHours.styles.js';
+import '../PlaceOfBusiness/ContactInformation/ContactInformation.styles.js';
+import '../SocialMediaLinks/SocialMediaLinks.styles.js';
+import '../utils.js';
+import '../PlaceOfBusiness/Services/Services.styles.js';
+import 'axios';
+import '../PlaceOfBusiness/PlaceOfBusinessListItem/PlaceOfBusinessListItem.styles.js';
+import OverlayCards from '../OverlayCards/OverlayCards.js';
+import '../OverlayCards/OverlayCards.types.js';
+
+var BlockContent = function BlockContent(_a) {
+  var block = _a.block,
+      blockBackgroundColor = _a.blockBackgroundColor,
+      databaseId = _a.databaseId;
+
+  var getBlock = function getBlock(block) {
+    switch (block.name) {
+      case components.PARAGRAPH:
+        return jsx(Paragraph, __assign({}, block.attributes), void 0);
+
+      case components.HERO:
+        return jsx(Hero, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.SUB_HERO:
+        return jsx(SubHero, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.BUTTON:
+        return jsx(Button, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.SIDE_BY_SIDE:
+        return jsx(SideBySide, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.ACCORDION:
+        return jsx(AccordionBlock, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.CARD:
+        return jsx(Card, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.FULL_BG_HERO:
+        return jsx(FullBgHero, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.EMBED:
+        return jsx(Embed, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.LIST:
+        return jsx(List, __assign({}, block.attributes), void 0);
+
+      case components.TABLE:
+        return jsx(Table, {
+          block: block
+        }, void 0);
+
+      case components.COLUMNS:
+        return jsx(Columns, {
+          block: block,
+          databaseId: databaseId
+        }, void 0);
+
+      case components.CAROUSEL:
+        return jsx(Carousel, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.CAROUSEL_NARROW:
+        return jsx(CarouselNarrow, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.ICON_LINKS:
+        return jsx(IconLinks, __assign({}, block.fields, block.attributes, {
+          blockBackgroundColor: blockBackgroundColor
+        }), void 0);
+
+      case components.HEADING:
+        return jsx(Heading, __assign({}, block.attributes), void 0);
+
+      case components.PROMOTION:
+        return jsx(Promotion, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.FORM_BUILDER:
+        return jsx(FormBuilder, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.IMAGE_CAROUSEL:
+        return jsx(ImageCarousel, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.OVERLAY_CARDS:
+        return jsx(OverlayCards, __assign({}, block.fields, block.attributes), void 0);
+
+      case components.PLACE_OF_BUSINESS_SEARCH:
+        return jsx(PlaceOfBusinessSearch, __assign({}, block.fields, block.attributes, {
+          databaseId: databaseId
+        }), void 0);
+
+      default:
+        // Directly render the HTML returned by WordPress core blocks
+        // Todo: Possibly remove this and create cases above for all
+        // the block we specifically want to support
+        return jsx("div", {
+          className: block.name,
+          dangerouslySetInnerHTML: {
+            __html: block.saveContent
+          }
+        }, void 0);
+    }
+  };
+
+  return jsx(AnimationWrapper, __assign({
+    blockName: block.name
+  }, {
+    children: getBlock(block)
+  }), void 0);
+};
+
+export { BlockContent, BlockContent as default };

package/dist/components/BlockGenerator/BlockGenerator.js

@@ -0,0 +1,62 @@
+import { __assign } from '../../_virtual/_tslib.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { smallBottomMargin, noBottomMargin, noBottomPadding, ConditionalWrapper } from '../utils.js';
+import { Block } from './BlockGenerator.styles.js';
+import RestrictedWidthContainer from '../RestrictedWidthContainer/RestrictedWidthContainer.js';
+import MarginWrapper from '../MarginWrapper/MarginWrapper.js';
+import BlockContent from './BlockContent.js';
+import { components, hideOverflowComponents, fullWidthComponents } from '../constants.js'; // Databaseid is the id of a WP Post/Page/Custom Post
+// Currently used in PlaceOfBusinessSearch
+
+var BlockGenerator = function BlockGenerator(_a) {
+  var blocks = _a.blocks,
+      databaseId = _a.databaseId;
+
+  var blockIsColumnsWithBackgroundColor = function blockIsColumnsWithBackgroundColor(currentBlock) {
+    var _a, _b;
+
+    return currentBlock.name === components.COLUMNS && ((_a = currentBlock.attributes) === null || _a === void 0 ? void 0 : _a.backgroundColor) && ((_b = currentBlock.attributes) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== 'primary';
+  };
+
+  var wrapWithRestrictedWidthContainer = function wrapWithRestrictedWidthContainer(currentBlock) {
+    var _a, _b, _c;
+
+    return !fullWidthComponents.includes(currentBlock.name) && !(currentBlock.name === components.COLUMNS && ((_a = currentBlock.innerBlocks) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_c = (_b = currentBlock.innerBlocks[0]) === null || _b === void 0 ? void 0 : _b.innerBlocks[0]) === null || _c === void 0 ? void 0 : _c.name) === components.IMAGE_CAROUSEL);
+  };
+
+  return jsx(Fragment, {
+    children: blocks.map(function (currentBlock, currentIndex) {
+      var _a;
+
+      return jsx(MarginWrapper, __assign({
+        smallBottomMargin: currentIndex + 1 < blocks.length && smallBottomMargin(currentBlock, blocks[currentIndex + 1]),
+        noBottomMargin: blocks.length && noBottomMargin(currentBlock, blocks[currentIndex + 1])
+      }, {
+        children: jsx(Block, __assign({
+          applyColumnsBackgroundStyles: blockIsColumnsWithBackgroundColor(currentBlock),
+          applyHeroBackgroundStyles: currentBlock.name === components.HERO,
+          backgroundColor: (_a = currentBlock.attributes) === null || _a === void 0 ? void 0 : _a.backgroundColor,
+          noBottomPadding: currentIndex + 1 < blocks.length && noBottomPadding(currentBlock, blocks[currentIndex + 1])
+        }, {
+          children: jsx(ConditionalWrapper, __assign({
+            condition: wrapWithRestrictedWidthContainer(currentBlock),
+            wrapper: function wrapper(children) {
+              return jsx(RestrictedWidthContainer, __assign({
+                hideOverflow: hideOverflowComponents.includes(currentBlock.name)
+              }, {
+                children: children
+              }), void 0);
+            }
+          }, {
+            children: jsx(BlockContent, {
+              block: currentBlock,
+              databaseId: databaseId
+            }, void 0)
+          }), void 0)
+        }), void 0)
+      }), currentIndex);
+    })
+  }, void 0);
+};
+
+export { BlockGenerator, BlockGenerator as default };

package/dist/components/BlockGenerator/BlockGenerator.styles.js

@@ -0,0 +1,44 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled, { css } from 'styled-components';
+import media from '../../styles/media.js';
+var columnsBackgroundStyles = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  background-color: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var backgroundColor = _a.backgroundColor;
+  return backgroundColor;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.blockGenerator.block.mobile.padding.top;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.blockGenerator.block.mobile.padding.bottom;
+}, function (_a) {
+  var noBottomPadding = _a.noBottomPadding;
+  return noBottomPadding && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      padding-bottom: 0 !important;\n    "], ["\n      padding-bottom: 0 !important;\n    "])));
+}, media.tablet(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.blockGenerator.block.tablet.padding.top;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.blockGenerator.block.tablet.padding.bottom;
+}), media.desktop(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.blockGenerator.block.desktop.padding.top;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.blockGenerator.block.desktop.padding.bottom;
+}));
+var heroBackgroundStyles = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.blockGenerator.heroBackgroundColor;
+});
+var Block = styled.div.withConfig({
+  displayName: "BlockGeneratorstyles__Block",
+  componentId: "sc-u777aw-0"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n\n  ", "\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  width: 100%;\n\n  ", "\n  ", "\n"])), function (_a) {
+  var applyColumnsBackgroundStyles = _a.applyColumnsBackgroundStyles;
+  return applyColumnsBackgroundStyles && columnsBackgroundStyles;
+}, function (_a) {
+  var applyHeroBackgroundStyles = _a.applyHeroBackgroundStyles;
+  return applyHeroBackgroundStyles && heroBackgroundStyles;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+export { Block };

package/dist/components/Button/Button.js

@@ -0,0 +1,49 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ButtonContainer, StyledButton } from './Button.styles.js';
+import { ButtonShape, ButtonType } from '@sok/design-system';
+import { parseLink, parseInternalLink, ConditionalWrapper } from '../utils.js';
+import { useTheme } from 'styled-components';
+var Button = forwardRef(function (_a, ref) {
+  var buttonText = _a.buttonText,
+      fill = _a.fill,
+      linkToPage = _a.linkToPage,
+      externalLink = _a.externalLink,
+      openWithNewTab = _a.openWithNewTab,
+      align = _a.align,
+      anchor = _a.anchor,
+      htmlAnchorTarget = _a.htmlAnchorTarget,
+      onClick = _a.onClick,
+      rest = __rest(_a, ["buttonText", "fill", "linkToPage", "externalLink", "openWithNewTab", "align", "anchor", "htmlAnchorTarget", "onClick"]);
+
+  var theme = useTheme();
+  var parsedExternalLink = parseLink(externalLink);
+  var parsedInternalLink = parseInternalLink(linkToPage === null || linkToPage === void 0 ? void 0 : linkToPage.uri, htmlAnchorTarget);
+  var href = parsedInternalLink || parsedExternalLink || undefined;
+  return jsx(Fragment, {
+    children: buttonText && jsx(ConditionalWrapper, __assign({
+      condition: !!align,
+      wrapper: function wrapper(children) {
+        return jsx(ButtonContainer, __assign({
+          align: align,
+          ref: ref
+        }, rest, {
+          children: children
+        }), void 0);
+      }
+    }, {
+      children: jsx(StyledButton, {
+        id: anchor,
+        text: buttonText,
+        href: href,
+        fillBackground: fill === undefined ? true : fill,
+        shape: theme.components.button.rounded ? ButtonShape.ROUND : undefined,
+        target: href ? openWithNewTab ? '__blank' : '_self' : undefined,
+        type: fill ? ButtonType.PRIMARY : ButtonType.DEFAULT,
+        onClick: !href ? onClick : undefined
+      }, void 0)
+    }), void 0)
+  }, void 0);
+});
+export { Button, Button as default };

package/dist/components/Button/Button.styles.js

@@ -0,0 +1,46 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled, { css } from 'styled-components';
+import { Button } from '@sok/design-system';
+var ButtonContainer = styled.div.withConfig({
+  displayName: "Buttonstyles__ButtonContainer",
+  componentId: "sc-1otcepy-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: '100%';\n  display: flex;\n  justify-content: ", ";\n"], ["\n  width: '100%';\n  display: flex;\n  justify-content: ", ";\n"])), function (_a) {
+  var align = _a.align;
+  return align ? align : 'normal';
+});
+var StyledButton = styled(Button).withConfig({
+  displayName: "Buttonstyles__StyledButton",
+  componentId: "sc-1otcepy-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: block;\n  max-width: 100%;\n  min-height: 2.5rem;\n  height: unset !important;\n  padding: 0.625rem 1.75rem !important;\n  text-align: center !important;\n  font-family: ", " !important;\n  font-size: ", " !important;\n  line-height: ", " !important;\n  color: ", " !important;\n  border: ", " !important;\n  background-color: ", " !important;\n  transition: all 1s ease-in-out;\n\n  :focus {\n    box-shadow: 0px 0px 0px 3px ", " !important;\n  }\n\n  :hover {\n    ", "\n  }\n\n  ", "\n"], ["\n  display: block;\n  max-width: 100%;\n  min-height: 2.5rem;\n  height: unset !important;\n  padding: 0.625rem 1.75rem !important;\n  text-align: center !important;\n  font-family: ", " !important;\n  font-size: ", " !important;\n  line-height: ", " !important;\n  color: ", " !important;\n  border: ", " !important;\n  background-color: ", " !important;\n  transition: all 1s ease-in-out;\n\n  :focus {\n    box-shadow: 0px 0px 0px 3px ", " !important;\n  }\n\n  :hover {\n    ", "\n  }\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.button.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.button.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.button.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.button.textColor;
+}, function (_a) {
+  var theme = _a.theme,
+      fillBackground = _a.fillBackground;
+  return fillBackground ? 'none' : theme.components.button.border;
+}, function (_a) {
+  var fillBackground = _a.fillBackground,
+      theme = _a.theme;
+  return fillBackground ? theme.components.button.backgroundColor : 'color:transparent';
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.button.focusColor;
+}, function (_a) {
+  var theme = _a.theme,
+      fillBackground = _a.fillBackground;
+  return !fillBackground && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        background-color: ", " !important;\n      "], ["\n        background-color: ", " !important;\n      "])), theme.components.button.hoverColor);
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.button.borderRadius && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      border-radius: ", " !important;\n    "], ["\n      border-radius: ", " !important;\n    "])), theme.components.button.borderRadius);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+export { ButtonContainer, StyledButton };

package/dist/components/Card/Card.js

@@ -0,0 +1,79 @@
+import { __rest, __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { CardContainer, MediaContainer, DynamicImage, StaticImage, SVGImage, TextContainer, CardCategory, CardHeader, CardText } from './Card.styles.js';
+import { parseHtmlContent } from '../utils.js';
+import Button from '../Button/Button.js';
+
+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.mimeType.includes('svg')) && (media === null || media === void 0 ? void 0 : media.localFile) && jsx(SVGImage, {
+      src: media.mediaItemUrl,
+      alt: ""
+    }, void 0)]
+  }, void 0);
+};
+
+var Text = function Text(_a) {
+  var cardCategory = _a.cardCategory,
+      cardHeader = _a.cardHeader,
+      cardText = _a.cardText,
+      button = _a.button;
+  return jsxs(TextContainer, {
+    children: [cardCategory && jsx(CardCategory, {
+      dangerouslySetInnerHTML: {
+        __html: parseHtmlContent(cardCategory)
+      }
+    }, void 0), cardHeader && jsx(CardHeader, {
+      dangerouslySetInnerHTML: {
+        __html: parseHtmlContent(cardHeader)
+      }
+    }, void 0), cardText && jsx(CardText, {
+      dangerouslySetInnerHTML: {
+        __html: parseHtmlContent(cardText)
+      }
+    }, void 0), jsx(Button, {
+      linkToPage: button === null || button === void 0 ? void 0 : button.linkToPage,
+      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,
+      align: 'left'
+    }, void 0)]
+  }, void 0);
+};
+
+var Card = forwardRef(function (_a, ref) {
+  var media = _a.media,
+      cardCategory = _a.cardCategory,
+      cardHeader = _a.cardHeader,
+      cardText = _a.cardText,
+      button = _a.button,
+      anchor = _a.anchor,
+      rest = __rest(_a, ["media", "cardCategory", "cardHeader", "cardText", "button", "anchor"]);
+
+  return jsxs(CardContainer, __assign({
+    id: anchor
+  }, rest, {
+    ref: ref
+  }, {
+    children: [jsx(Media, {
+      media: media
+    }, void 0), jsx(Text, {
+      cardCategory: cardCategory,
+      cardHeader: cardHeader,
+      cardText: cardText,
+      button: button
+    }, void 0)]
+  }), void 0);
+});
+export { Card, Card as default };

package/dist/components/Card/Card.styles.js

@@ -0,0 +1,137 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled, { css } from 'styled-components';
+import { GatsbyImage } from 'gatsby-plugin-image';
+import media from '../../styles/media.js';
+import { ButtonContainer } from '../Button/Button.styles.js';
+var ImageCSS = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.2s ease-in-out;\n"], ["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.2s ease-in-out;\n"])));
+var DynamicImage = styled(GatsbyImage).withConfig({
+  displayName: "Cardstyles__DynamicImage",
+  componentId: "sc-1qwd4xh-0"
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ImageCSS);
+var StaticImage = styled.img.withConfig({
+  displayName: "Cardstyles__StaticImage",
+  componentId: "sc-1qwd4xh-1"
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ImageCSS);
+var SVGImage = styled.img.withConfig({
+  displayName: "Cardstyles__SVGImage",
+  componentId: "sc-1qwd4xh-2"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  object-fit: none;\n"], ["\n  ", ";\n  object-fit: none;\n"])), ImageCSS);
+var CardContainer = styled.div.withConfig({
+  displayName: "Cardstyles__CardContainer",
+  componentId: "sc-1qwd4xh-3"
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);\n  text-decoration: none;\n  transition: box-shadow 0.3s ease-in-out;\n\n  :hover {\n    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n    ", " {\n      transform: scale(1.04);\n    }\n    ", " {\n      transform: scale(1.04);\n    }\n    ", " {\n      transform: scale(1.04);\n    }\n  }\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);\n  text-decoration: none;\n  transition: box-shadow 0.3s ease-in-out;\n\n  :hover {\n    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n    ", " {\n      transform: scale(1.04);\n    }\n    ", " {\n      transform: scale(1.04);\n    }\n    ", " {\n      transform: scale(1.04);\n    }\n  }\n"])), DynamicImage, StaticImage, SVGImage);
+var TextContainer = styled.div.withConfig({
+  displayName: "Cardstyles__TextContainer",
+  componentId: "sc-1qwd4xh-4"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: 0px;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  padding: ", ";\n  background-color: ", ";\n\n  ", " {\n    margin-top: auto;\n  }\n\n  ", "\n"], ["\n  margin: 0px;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  padding: ", ";\n  background-color: ", ";\n\n  ", " {\n    margin-top: auto;\n  }\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.backgroundColor;
+}, ButtonContainer, media.desktop(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding-bottom: ", ";\n  "], ["\n    padding-bottom: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing64;
+}));
+var CardCategory = styled.div.withConfig({
+  displayName: "Cardstyles__CardCategory",
+  componentId: "sc-1qwd4xh-5"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: ", ";\n  word-wrap: break-word;\n\n  ", "\n\n  ", "\n"], ["\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: ", ";\n  word-wrap: break-word;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing12;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.category.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.category.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.category.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.category.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.category.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.category.textTransform;
+}, media.tablet(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.category.fontSizes.tablet.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.category.fontSizes.tablet.lineHeight;
+}), media.desktop(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.category.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.category.fontSizes.desktop.lineHeight;
+}));
+var CardHeader = styled.div.withConfig({
+  displayName: "Cardstyles__CardHeader",
+  componentId: "sc-1qwd4xh-6"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  padding: 0;\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: ", ";\n  letter-spacing: ", ";\n  word-wrap: break-word;\n\n  b {\n    color: ", ";\n    font-weight: inherit;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  padding: 0;\n  margin-bottom: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: ", ";\n  letter-spacing: ", ";\n  word-wrap: break-word;\n\n  b {\n    color: ", ";\n    font-weight: inherit;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.header.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.header.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.header.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.header.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.header.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.header.textTransform;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.header.letterSpacing;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.colors.primary900;
+}, media.tablet(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.header.fontSizes.tablet.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.header.fontSizes.tablet.lineHeight;
+}), media.desktop(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.header.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.header.fontSizes.desktop.lineHeight;
+}));
+var CardText = styled.div.withConfig({
+  displayName: "Cardstyles__CardText",
+  componentId: "sc-1qwd4xh-7"
+})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  width: 100%;\n  word-wrap: break-word;\n\n  p,\n  ul,\n  ol {\n    margin: revert;\n  }\n"], ["\n  margin-bottom: ", ";\n  width: 100%;\n  word-wrap: break-word;\n\n  p,\n  ul,\n  ol {\n    margin: revert;\n  }\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+});
+var MediaContainer = styled.div.withConfig({
+  displayName: "Cardstyles__MediaContainer",
+  componentId: "sc-1qwd4xh-8"
+})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  width: 100%;\n  height: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"], ["\n  width: 100%;\n  height: ", ";\n  overflow: hidden;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.mediaHeight.mobile;
+}, media.tablet(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    height: ", ";\n  "], ["\n    height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.mediaHeight.tablet;
+}), media.desktop(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    height: ", ";\n  "], ["\n    height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.card.mediaHeight.desktop;
+}));
+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;
+export { CardCategory, CardContainer, CardHeader, CardText, DynamicImage, MediaContainer, SVGImage, StaticImage, TextContainer };