@royaloperahouse/harmonic 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [0.12.0]
+- AnchorBar: add visual improvements
+- Footer: align the grid
+
 ## [0.11.0]
 - CreditListing line groups
 

package/dist/components/molecules/AnchorBar/AnchorBar.style.d.ts

@@ -1,4 +1,8 @@
-export declare const AnchorBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface AnchorBarContainerProps {
+    withShadow?: boolean;
+}
+export declare const AnchorBarContainer: import("styled-components").StyledComponent<"div", any, AnchorBarContainerProps, never>;
 export declare const CTAWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CloseButtonWrapper: import("styled-components").StyledComponent<"a", any, {}, never>;
 export declare const ContentWrapper: import("styled-components").StyledComponent<"a", any, {}, never>;
+export {};

package/dist/components/molecules/Pagination/Pagination.style.d.ts

@@ -4,6 +4,6 @@ export declare const MorePages: import("styled-components").StyledComponent<"spa
 export declare const PageNumberWrapper: import("styled-components").StyledComponent<"ol", any, {}, never>;
 export declare const LastPageItem: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const PreviousPageItem: import("styled-components").StyledComponent<"li", any, {}, never>;
-export declare const TextLinkPagination: import("styled-components").StyledComponent<({ children, size, color, className, bold, ...props }: import("../../../types/typography").IGenericTypographyProps<HTMLParagraphElement>) => import("react").JSX.Element, any, {
+export declare const TextLinkPagination: import("styled-components").StyledComponent<({ children, size, color, className, bold, tag: Tag, ...props }: import("../../../types/typography").IBodyCopyHarmonicProps) => import("react").JSX.Element, any, {
     active?: boolean | undefined;
 }, never>;

package/dist/components/organisms/Footer/Footer.style.d.ts

@@ -1,8 +1,8 @@
-export declare const FooterSection: import("styled-components").StyledComponent<"footer", any, {}, never>;
-export declare const FooterContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PolicyLinksSection: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SocialAndNewsletterSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PolicyLinksSection: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps, never>;
+export declare const SocialAndNewsletterSection: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps, never>;
 export declare const SectionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LogoAndDescriptionSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LogoAndDescriptionSection: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps, never>;
+export declare const SponsorLogoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextLinkWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../types/types").ITextLinkProps>, any, {}, never>;
 export declare const SponsorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/harmonic.cjs.development.css

@@ -388,6 +388,9 @@
   --color-secondary-orange: #ff6700;
   --color-secondary-blue: #5f9cff;
 
+  /* Shadows */
+  --shadow-floating: 0px 4px 38px 0px #0000000a;
+
   /* Core theme colors */
   --base-color-primary: #c8102e;
   --base-color-core: #c8102e;

package/dist/harmonic.cjs.development.js

@@ -2965,7 +2965,9 @@ var TertiaryButton = function TertiaryButton(_ref) {
     if (rest != null && rest.disabled) return;
     rest.onClick == null || rest.onClick(e);
   }, [rest.disabled, rest.onClick]);
-  return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({
+    "data-testid": "tertiary-button"
+  }, rest, {
     className: className,
     onClick: handleClick
   }), /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -3754,17 +3756,18 @@ var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v4/rolex.html?
 var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
 var DEFAULT_DATA_ROH = 'ImgAdvert';
 
-/* eslint-disable jsx-a11y/iframe-has-title */
+var _excluded$7 = ["src", "dataRoh", "title"];
 var Sponsorship = function Sponsorship(_ref) {
   var _ref$src = _ref.src,
     src = _ref$src === void 0 ? DEFAULT_SPONSORSHIP_IFRAME : _ref$src,
     _ref$dataRoh = _ref.dataRoh,
     dataRoh = _ref$dataRoh === void 0 ? DEFAULT_DATA_ROH : _ref$dataRoh,
     _ref$title = _ref.title,
-    title = _ref$title === void 0 ? DEFAULT_SPONSORSHIP_TITLE : _ref$title;
+    title = _ref$title === void 0 ? DEFAULT_SPONSORSHIP_TITLE : _ref$title,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var linkText = title + " sponsorship";
   var linkDescription = linkText + " - visit " + title + "'s website (opens in new tab)";
-  return /*#__PURE__*/React__default.createElement(SponsorshipWrapper, null, /*#__PURE__*/React__default.createElement(SponsorshipLink, {
+  return /*#__PURE__*/React__default.createElement(SponsorshipWrapper, Object.assign({}, rest), /*#__PURE__*/React__default.createElement(SponsorshipLink, {
     href: "https://www.rolex.com",
     target: "_blank",
     rel: "noopener noreferrer",
@@ -3904,7 +3907,7 @@ var TabLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$l || (_templ
 });
 var TabLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$d || (_templateObject2$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-right: var(--button-icon-margin);\n"])));
 
-var _excluded$7 = ["children", "iconName", "iconDirection", "color", "hoverColor"];
+var _excluded$8 = ["children", "iconName", "iconDirection", "color", "hoverColor"];
 var TabLink = function TabLink(_ref) {
   var children = _ref.children,
     iconName = _ref.iconName,
@@ -3913,7 +3916,7 @@ var TabLink = function TabLink(_ref) {
     color = _ref$color === void 0 ? ThemeColor['base-dark-grey'] : _ref$color,
     _ref$hoverColor = _ref.hoverColor,
     hoverColor = _ref$hoverColor === void 0 ? ThemeColor['primary-red'] : _ref$hoverColor,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   return /*#__PURE__*/React__default.createElement(TabLinkWrapper, Object.assign({
     color: color,
     iconName: iconName,
@@ -3962,7 +3965,7 @@ var TextAreaError = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_tem
   return darkMode ? 'var(--base-color-white)' : 'var(--base-color-errorstate)';
 });
 
-var _excluded$8 = ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"];
+var _excluded$9 = ["label", "error", "width", "darkMode", "height", "columnStartDesktop", "columnStartDevice", "columnSpanDesktop", "columnSpanDevice", "maxLength", "tabIndex"];
 /**
  * An HTML textarea component for Harmonic.
  *
@@ -4023,7 +4026,7 @@ var TextArea = function TextArea(_ref) {
     maxLength = _ref$maxLength === void 0 ? 950 : _ref$maxLength,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
-    textareaProps = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    textareaProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
   return /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,
     columnSpanDesktop: columnSpanDesktop,
@@ -4083,7 +4086,7 @@ var ErrorLabel$1 = /*#__PURE__*/styled__default.div(_templateObject6$1 || (_temp
 });
 var BodyCopyHarmonicWithWrapper = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-state-error);\n"])));
 
-var _excluded$9 = ["label", "type", "error", "darkMode", "width"];
+var _excluded$a = ["label", "type", "error", "darkMode", "width"];
 /**
  * A text field component, that wraps around the native `<input />` element
  * and adds some extra states and information around it (i.e. a text and an error labels,
@@ -4130,7 +4133,7 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     width = _ref.width,
-    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   var _useState = React.useState(false),
     showPassword = _useState[0],
     setShowPassword = _useState[1];
@@ -4228,7 +4231,7 @@ var ErrorLabel$2 = /*#__PURE__*/styled__default.p(_templateObject5$3 || (_templa
   return darkMode ? theme.colors.white : theme.colors.error;
 });
 
-var _excluded$a = ["label", "error", "darkMode", "width"];
+var _excluded$b = ["label", "error", "darkMode", "width"];
 /**
  * @deprecated
  *
@@ -4242,7 +4245,7 @@ var TextFieldLegacy = function TextFieldLegacy(_ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     width = _ref.width,
-    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", {
     htmlFor: "text-field-input"
   }, /*#__PURE__*/React__default.createElement(TextLabel$2, {
@@ -4271,13 +4274,13 @@ var TextLinkWrapper = /*#__PURE__*/styled__default.a(_templateObject$p || (_temp
 }, devices.mobile);
 var TextLinkIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$h || (_templateObject2$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n"])));
 
-var _excluded$b = ["children", "iconName", "iconDirection", "textColor"];
+var _excluded$c = ["children", "iconName", "iconDirection", "textColor"];
 var TextLink = function TextLink(_ref) {
   var children = _ref.children,
     iconName = _ref.iconName,
     iconDirection = _ref.iconDirection,
     textColor = _ref.textColor,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var truncatedString = children.substring(0, 30);
   return /*#__PURE__*/React__default.createElement(TextLinkWrapper, Object.assign({
     color: textColor,
@@ -4470,7 +4473,7 @@ var ErrorLabel$3 = /*#__PURE__*/styled__default.div(_templateObject6$2 || (_temp
   return 'var(--base-color-errorstate)';
 });
 
-var _excluded$c = ["children", "disabled", "error", "darkMode", "blackBox"];
+var _excluded$d = ["children", "disabled", "error", "darkMode", "blackBox"];
 /**
  * A Tickbox component, that wraps around the native `<input type="checkbox"/>` element
  * and adds some extra styling, states and information around it (i.e. an error label,
@@ -4499,7 +4502,7 @@ var Tickbox2Component = function Tickbox2Component(_ref, ref) {
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     _ref$blackBox = _ref.blackBox,
     blackBox = _ref$blackBox === void 0 ? false : _ref$blackBox,
-    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   return /*#__PURE__*/React__default.createElement(Container$2, null, /*#__PURE__*/React__default.createElement(TickboxLabel$2, {
     darkMode: darkMode,
     blackBox: blackBox
@@ -6082,12 +6085,12 @@ var Navigation = function Navigation(_ref) {
 };
 
 var _templateObject$D, _templateObject2$t, _templateObject3$j, _templateObject4$f, _templateObject5$b, _templateObject6$8, _templateObject7$5;
-var FooterSection = /*#__PURE__*/styled__default.footer(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-black);\n  color: var(--color-base-white);\n  padding: 44px 50px;\n\n  @media ", " {\n    padding: 40px 32px;\n  }\n\n  @media ", " {\n    padding: 20px;\n  }\n"])), devices.tablet, devices.mobile);
-var FooterContainer = /*#__PURE__*/styled__default.div(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  gap: 40px;\n  max-width: 1140px;\n  margin: 0 auto;\n\n  @media ", " {\n    gap: 24px;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr;\n    gap: 40px;\n  }\n"])), devices.tablet, devices.mobile);
-var PolicyLinksSection = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: span 4;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  @media ", " {\n    gap: 20px;\n  }\n\n  @media ", " {\n    gap: 12px;\n    order: 2;\n  }\n"])), devices.tablet, devices.mobile);
-var SocialAndNewsletterSection = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: span 4;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 20px;\n\n  @media ", " {\n    order: 1;\n    gap: 40px;\n  }\n"])), devices.mobile);
-var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  @media ", " {\n    gap: 24px;\n  }\n"])), devices.mobile);
-var LogoAndDescriptionSection = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-column: span 4;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  img {\n    margin-bottom: 12px;\n  }\n\n  @media ", " {\n    order: 3;\n    gap: 24px;\n  }\n"])), devices.mobile);
+var FooterSection = /*#__PURE__*/styled__default(Grid)(_templateObject$D || (_templateObject$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: var(--color-base-black);\n  color: var(--color-base-white);\n  padding: 44px 0px;\n  grid-template-areas: '. . policy policy policy policy social social social social logo logo logo logo . .';\n\n  @media ", " {\n    padding: 40px 0px;\n    gap: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 0px;\n    row-gap: 40px;\n    grid-template-areas:\n      '. social social social social social social social social social social social social .'\n      '. policy policy policy policy policy policy policy policy policy policy policy policy .'\n      '. logo logo logo logo logo logo logo logo logo logo logo logo .';\n  }\n"])), devices.tablet, devices.mobile);
+var PolicyLinksSection = /*#__PURE__*/styled__default(GridItem)(_templateObject2$t || (_templateObject2$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: policy;\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n\n  @media ", " {\n    gap: 20px;\n  }\n\n  @media ", " {\n    gap: 12px;\n  }\n"])), devices.tablet, devices.mobile);
+var SocialAndNewsletterSection = /*#__PURE__*/styled__default(GridItem)(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: social;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: 20px;\n\n  @media ", " {\n    gap: 40px;\n  }\n"])), devices.mobile);
+var SectionWrapper = /*#__PURE__*/styled__default.div(_templateObject4$f || (_templateObject4$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n\n  @media ", " {\n    gap: 24px;\n  }\n"])), devices.mobile);
+var LogoAndDescriptionSection = /*#__PURE__*/styled__default(GridItem)(_templateObject5$b || (_templateObject5$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: logo;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  @media ", " {\n    gap: 24px;\n  }\n"])), devices.mobile);
+var SponsorLogoContainer = /*#__PURE__*/styled__default.div(_templateObject6$8 || (_templateObject6$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 290px;\n\n  @media ", " {\n    max-width: unset;\n  }\n"])), devices.mobile);
 var TextLinkWrapper$2 = /*#__PURE__*/styled__default(TextLink)(_templateObject7$5 || (_templateObject7$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-sans);\n  font-size: 17px;\n  line-height: 24px;\n  letter-spacing: 0.4px;\n  color: var(--color-base-white);\n  border-bottom: unset;\n  text-decoration: underline;\n  text-underline-offset: 6px;\n  margin-bottom: 0;\n  padding-bottom: 0;\n"])));
 
 var _templateObject$E;
@@ -6121,12 +6124,14 @@ var Footer = function Footer(_ref) {
     additionalInfo = data.additionalInfo;
   var sponsorImageSource = data.sponsorImageSource || SPONSOR_IMAGE_SOURCE;
   var _useViewport = useViewport(),
-    isMobile = _useViewport.isMobile;
+    isMobile = _useViewport.isMobile,
+    isTablet = _useViewport.isTablet;
   return /*#__PURE__*/React__default.createElement(FooterSection, {
     className: className,
     "aria-label": "Footer",
-    role: "contentinfo"
-  }, /*#__PURE__*/React__default.createElement(FooterContainer, null, /*#__PURE__*/React__default.createElement(PolicyLinksSection, {
+    role: "contentinfo",
+    as: "footer"
+  }, /*#__PURE__*/React__default.createElement(PolicyLinksSection, {
     "data-testid": "policy-links"
   }, /*#__PURE__*/React__default.createElement(PolicyLinks, {
     items: policyLinks
@@ -6146,7 +6151,7 @@ var Footer = function Footer(_ref) {
     "data-roh": newsletter.link.dataRoh,
     "aria-label": newsletter.link.title,
     tabIndex: isMobile ? 3 : undefined
-  }, newsletter.link.title))), /*#__PURE__*/React__default.createElement(LogoAndDescriptionSection, null, /*#__PURE__*/React__default.createElement("div", {
+  }, newsletter.link.title))), /*#__PURE__*/React__default.createElement(LogoAndDescriptionSection, null, /*#__PURE__*/React__default.createElement(SponsorLogoContainer, {
     "data-testid": "arts-logo"
   }, /*#__PURE__*/React__default.createElement(SponsorLogo, Object.assign({
     imageSource: sponsorImageSource,
@@ -6158,9 +6163,9 @@ var Footer = function Footer(_ref) {
   }))), /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "additional-info"
   }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
-    size: isMobile ? 'medium' : 'small',
+    size: isTablet ? 'small' : 'medium',
     color: "white"
-  }, additionalInfo)))));
+  }, additionalInfo))));
 };
 
 var _templateObject$F, _templateObject2$u, _templateObject3$k, _templateObject4$g, _templateObject5$c, _templateObject6$9;
@@ -6188,7 +6193,7 @@ var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject5$c || (_t
 });
 var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject6$9 || (_templateObject6$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-primary);\n    }\n  }\n"])));
 
-var _excluded$d = ["id", "text"];
+var _excluded$e = ["id", "text"];
 var AnchorTabBar = function AnchorTabBar(_ref) {
   var tabs = _ref.tabs,
     onTabClick = _ref.onTabClick,
@@ -6381,7 +6386,7 @@ var AnchorTabBar = function AnchorTabBar(_ref) {
   }, tabs.map(function (_ref4) {
     var id = _ref4.id,
       text = _ref4.text,
-      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$d);
+      rest = _objectWithoutPropertiesLoose(_ref4, _excluded$e);
     return /*#__PURE__*/React__default.createElement("li", {
       key: id
     }, /*#__PURE__*/React__default.createElement(TabLink, Object.assign({
@@ -6436,7 +6441,7 @@ var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_template
 var MessageWrapper = /*#__PURE__*/styled__default.div(_templateObject9$2 || (_templateObject9$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  margin-right: var(--grid-outer-margin);\n  height: var(--button-height);\n\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n\n  @media ", " {\n    & {\n      margin-right: var(--grid-margin);\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), devices.tablet, devices.mobile);
 var MessageWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject0$2 || (_templateObject0$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  display: none;\n\n  @media ", " {\n    & {\n      display: flex;\n      align-items: center;\n      margin-left: var(--grid-margin);\n      padding: 12px 0;\n    }\n  }\n"])), devices.mobile);
 
-var _excluded$e = ["text"],
+var _excluded$f = ["text"],
   _excluded2$1 = ["text"];
 var TitleWithCTA = function TitleWithCTA(_ref) {
   var title = _ref.title,
@@ -6446,7 +6451,7 @@ var TitleWithCTA = function TitleWithCTA(_ref) {
     message = _ref.message;
   var _ref2 = (links == null ? void 0 : links[0]) || {},
     primaryButtonText = _ref2.text,
-    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
+    primaryButtonProps = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
   var _ref3 = (links == null ? void 0 : links[1]) || {},
     secondaryButtonText = _ref3.text,
     secondaryButtonProps = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
@@ -7272,7 +7277,7 @@ var CloseButton = /*#__PURE__*/styled__default.button(_templateObject2$z || (_te
 var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var Overlay = /*#__PURE__*/styled__default(Grid)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  align-content: center;\n  background-color: rgba(0, 0, 0, 0.4);\n"])));
 
-var _excluded$f = ["isOpen", "setIsOpen", "children", "appElementId"];
+var _excluded$g = ["isOpen", "setIsOpen", "children", "appElementId"];
 var MAX_Z_INDEX = 9999999999;
 if (Modal.defaultStyles.content) {
   Modal.defaultStyles.content.position = 'static';
@@ -7346,7 +7351,7 @@ var ModalWindow = function ModalWindow(_ref) {
     setIsOpen = _ref.setIsOpen,
     children = _ref.children,
     appElementId = _ref.appElementId,
-    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    modalProps = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   var isMobile = useMobile();
   var customStyles = {
     overlay: {
@@ -7540,7 +7545,7 @@ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
   return movedSlides;
 };
 
-var _excluded$g = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange"];
+var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange"];
 var MAX_CLONES_NUMBER = 6;
 var CLICK_DRAG_THRESHOLD = 10;
 var getClonesCount = function getClonesCount(infinite, childrenLength) {
@@ -7565,7 +7570,7 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$slidesAriaHidden = _ref.slidesAriaHidden,
     slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
     onActiveChange = _ref.onActiveChange,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var containerRef = React.useRef(null);
   var childRefs = React.useRef([]);
   var startX = React.useRef(0);
@@ -7961,18 +7966,18 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
 var _templateObject$Q;
 var AuxiliaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  height: 20px;\n  border: none;\n  padding: 0;\n  color: ", ";\n  width: fit-content;\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  cursor: pointer;\n  text-decoration: none;\n  box-sizing: border-box;\n\n  && span svg * {\n    fill: ", ";\n  }\n\n  .auxiliaryButtonIcon {\n    width: 12px;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])), getBackgroundColor$1, getTextColor$3, getTextColor$3);
 
-var _excluded$h = ["children", "className"];
+var _excluded$i = ["children", "className"];
 var AuxiliaryButton = function AuxiliaryButton(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(AuxiliaryButtonWrapper, Object.assign({}, props, {
     iconClassName: "auxiliaryButtonIcon",
     className: className
   }), children);
 };
 
-var _excluded$i = ["text"],
+var _excluded$j = ["text"],
   _excluded2$2 = ["text"];
 var _buttonTypeToButton;
 var buttonTypeToButton = (_buttonTypeToButton = {}, _buttonTypeToButton[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton);
@@ -7983,7 +7988,7 @@ var Buttons = function Buttons(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$i);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
     _ref3$text = _ref3.text,
@@ -8407,7 +8412,7 @@ var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject12$2 ||
   return '';
 });
 
-var _excluded$j = ["text"],
+var _excluded$k = ["text"],
   _excluded2$3 = ["text"];
 var _buttonTypeToButton$1;
 var LENGTH_LARGE_TEXT$1 = 28;
@@ -8457,7 +8462,7 @@ var Card = function Card(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$j);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$k);
   var primaryButtonTextTruncate = size === 'small' ? truncate(firstButtonText, LENGTH_SMALL_TEXT$2) : truncate(firstButtonText, LENGTH_LARGE_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
@@ -8812,7 +8817,7 @@ var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$Z || (_
 var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  min-width: 400px;\n  justify-content: space-between;\n  gap: 16px;\n  font-family: var(--font-family-sans);\n\n  @media ", " {\n    gap: 10px;\n  }\n"])), devices.mobile);
 var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-base-black);\n  min-width: fit-content;\n\n  :hover {\n    color: var(--color-base-white);\n  }\n"])));
 
-var _excluded$k = ["text", "onClick"];
+var _excluded$l = ["text", "onClick"];
 var HotFilters = function HotFilters(_ref) {
   var items = _ref.items,
     className = _ref.className,
@@ -8828,7 +8833,7 @@ var HotFilters = function HotFilters(_ref) {
   }, /*#__PURE__*/React__default.createElement(HotFilterOptionsWrapper, null, items.map(function (item, index) {
     var text = item.text,
       _onClick = item.onClick,
-      rest = _objectWithoutPropertiesLoose(item, _excluded$k);
+      rest = _objectWithoutPropertiesLoose(item, _excluded$l);
     var isSelected = index === selectedIndex;
     return /*#__PURE__*/React__default.createElement(StyledHotFiltersButton, Object.assign({
       key: index,
@@ -9158,7 +9163,7 @@ var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject6$i || (_tem
 var ButtonWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: button;\n  align-self: end;\n  display: flex;\n  justify-content: center;\n  margin-top: 40px;\n\n  @media ", " {\n    & {\n      margin-top: 0px;\n      margin-bottom: 20px;\n    }\n  }\n"])), devices.mobile);
 var ScrollDownWrapper = /*#__PURE__*/styled__default.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 20px;\n  left: var(--grid-outer-margin);\n  width: fit-content;\n  z-index: ", ";\n\n  @keyframes UpDown {\n    0%,\n    100% {\n      transform: translateY(0);\n    }\n    50% {\n      transform: translateY(8px);\n    }\n  }\n\n  a {\n    font-size: var(--font-size-overline-1);\n    font-weight: var(--font-weight-overline-1);\n    letter-spacing: var(--letter-spacing-overline-1);\n    border: none;\n    padding: 0;\n    :hover {\n      border: none;\n\n      > span {\n        animation: UpDown 1500ms linear infinite;\n      }\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n\n  @media ", " {\n    & {\n      display: none;\n    }\n  }\n"])), zIndexes.contentOverlay, devices.mobile, devices.tablet);
 
-var _excluded$l = ["text"];
+var _excluded$m = ["text"];
 var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var children = _ref.children,
     text = _ref.text,
@@ -9176,7 +9181,7 @@ var PageHeadingImpact = function PageHeadingImpact(_ref) {
   var truncatedText = text == null ? void 0 : text.substring(0, 75);
   var _ref2 = link || {},
     linkText = _ref2.text,
-    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$l);
+    restLink = _objectWithoutPropertiesLoose(_ref2, _excluded$m);
   return /*#__PURE__*/React__default.createElement(ImpactWrapper, {
     bgUrlDesktop: bgUrlDesktop,
     bgUrlDevice: bgUrlDevice,
@@ -9590,7 +9595,7 @@ var CompactHeaderBranding = function CompactHeaderBranding(_ref) {
   return /*#__PURE__*/React__default.createElement(CompactHeaderLogoWrapper, null, renderBranding(brandingStyle, invert, brandingText, brandingLink));
 };
 
-var _excluded$m = ["text"];
+var _excluded$n = ["text"];
 var useResponsiveVideo = function useResponsiveVideo(video, poster) {
   var mobileVideo = video.mobile || video.desktop;
   var desktopVideo = video.desktop || video.mobile;
@@ -9695,7 +9700,7 @@ var PageHeadingCompact = function PageHeadingCompact(_ref4) {
     showCopy = _ref4$showCopy === void 0 ? true : _ref4$showCopy;
   var _ref5 = link || {},
     linkText = _ref5.text,
-    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$m);
+    restLink = _objectWithoutPropertiesLoose(_ref5, _excluded$n);
   // const titleSize = title && title.length > 20 ? 4 : 3;
   var video = {
     elementId: 'compact-header-video',
@@ -10160,7 +10165,7 @@ var PromoWithTagsContainer = /*#__PURE__*/styled__default.div(_templateObject17
 var TimerWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject18 || (_templateObject18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 32px;\n"])));
 var EndDateText = /*#__PURE__*/styled__default.div(_templateObject19 || (_templateObject19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-bottom: 1px solid var(--base-color-black);\n  padding-bottom: 32px;\n  margin-bottom: 32px;\n\n  @media ", " {\n    padding-bottom: 20px;\n    margin-bottom: 20px;\n  }\n"])), devices.mobile);
 
-var _excluded$n = ["text"],
+var _excluded$o = ["text"],
   _excluded2$4 = ["text"],
   _excluded3 = ["text"];
 var _buttonTypeToButton$2;
@@ -10223,7 +10228,7 @@ var PromoWithTags = function PromoWithTags(_ref) {
   var _ref2 = firstButton || {},
     _ref2$text = _ref2.text,
     firstButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$n);
+    restFirstButton = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
   var primaryButtonTextTruncate = truncate(firstButtonText, LENGTH_TEXT$1);
   var secondButton = links == null ? void 0 : links[1];
   var _ref3 = secondButton || {},
@@ -10492,7 +10497,7 @@ var PromoChild = function PromoChild(_ref) {
   }));
 };
 
-var _excluded$o = ["text"],
+var _excluded$p = ["text"],
   _excluded2$5 = ["text"];
 var LENGTH_TEXT$3 = 28;
 var PromoWithTitle = function PromoWithTitle(_ref) {
@@ -10519,7 +10524,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref2 = primaryButton || {},
     _ref2$text = _ref2.text,
     primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
-    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
+    restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
   var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$3);
   var tertiaryButton = links == null ? void 0 : links[1];
   var _ref3 = tertiaryButton || {},
@@ -11204,7 +11209,7 @@ var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$C || (_temp
   return "var(--base-color-errorstate)";
 });
 
-var _excluded$p = ["label", "error", "width", "darkMode", "isSearchable", "components"];
+var _excluded$q = ["label", "error", "width", "darkMode", "isSearchable", "components"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -11255,7 +11260,7 @@ var SelectComponent = function SelectComponent(_ref2) {
     _ref2$isSearchable = _ref2.isSearchable,
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$p);
+    selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$q);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -11273,7 +11278,7 @@ var SelectComponent = function SelectComponent(_ref2) {
   })));
 };
 
-var _excluded$q = ["label", "error", "width", "darkMode", "components"];
+var _excluded$r = ["label", "error", "width", "darkMode", "components"];
 /**
  * The Select2Async component is similar to Select 2, but uses react-select async
  * component for select instead of regular react-select component. This can be used
@@ -11295,7 +11300,7 @@ var SelectComponent$1 = function SelectComponent(_ref) {
     _ref$darkMode = _ref.darkMode,
     darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
     components = _ref.components,
-    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    selectProps = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
@@ -12390,10 +12395,13 @@ var SignUpFormComponent = function SignUpFormComponent(_ref) {
   }))))));
 };
 
-var _templateObject$1o, _templateObject3$U, _templateObject4$J;
-var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  min-height: 70px;\n  background: var(--color-base-white);\n  z-index: ", ";\n  align-content: center;\n\n  @media ", " {\n    min-height: 60px;\n  }\n"])), zIndexes.anchor, devices.mobile);
-var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 24px;\n  min-width: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  border: none;\n  padding: 0;\n  background: none;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media ", " {\n    min-height: 12px;\n    min-width: 12px;\n    max-height: 12px;\n    max-width: 12px;\n  }\n"])), devices.mobile);
-var ContentWrapper$3 = /*#__PURE__*/styled__default.a(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
+var _templateObject$1o, _templateObject2$16, _templateObject4$J, _templateObject5$C;
+var AnchorBarContainer = /*#__PURE__*/styled__default(Grid)(_templateObject$1o || (_templateObject$1o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  min-height: 70px;\n  background: var(--color-base-white);\n  z-index: ", ";\n  align-content: center;\n  border-bottom: 1px solid var(--color-base-light-grey);\n\n  ", "\n\n  @media ", " {\n    min-height: 60px;\n  }\n"])), zIndexes.anchor, function (_ref) {
+  var withShadow = _ref.withShadow;
+  return withShadow && styled.css(_templateObject2$16 || (_templateObject2$16 = _taggedTemplateLiteralLoose(["\n      box-shadow: var(--shadow-floating);\n    "])));
+}, devices.mobile);
+var CloseButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject4$J || (_templateObject4$J = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 24px;\n  min-width: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  border: none;\n  padding: 0;\n  background: none;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media ", " {\n    min-height: 12px;\n    min-width: 12px;\n    max-height: 12px;\n    max-width: 12px;\n  }\n"])), devices.mobile);
+var ContentWrapper$3 = /*#__PURE__*/styled__default.a(_templateObject5$C || (_templateObject5$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 
 var AnchorBar = function AnchorBar(_ref) {
   var cta = _ref.cta,
@@ -12401,7 +12409,9 @@ var AnchorBar = function AnchorBar(_ref) {
     onCloseHandler = _ref.onCloseHandler,
     _ref$showAnchorBar = _ref.showAnchorBar,
     showAnchorBar = _ref$showAnchorBar === void 0 ? true : _ref$showAnchorBar,
-    className = _ref.className;
+    className = _ref.className,
+    _ref$withShadow = _ref.withShadow,
+    withShadow = _ref$withShadow === void 0 ? false : _ref$withShadow;
   var _useState = React.useState(showAnchorBar),
     isRendered = _useState[0],
     setIsRendered = _useState[1];
@@ -12423,7 +12433,8 @@ var AnchorBar = function AnchorBar(_ref) {
     var _cta$href;
     return /*#__PURE__*/React__default.createElement(AnchorBarContainer, {
       "data-testid": "anchor-bar",
-      className: className
+      className: className,
+      withShadow: withShadow
     }, /*#__PURE__*/React__default.createElement(GridItem, {
       columnStartDesktop: 2,
       columnSpanDesktop: 14,
@@ -12646,11 +12657,11 @@ var HarmonicThemeProvider = function HarmonicThemeProvider(_ref) {
   return themedChildren.length === 1 ? themedChildren[0] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, themedChildren);
 };
 
-var _excluded$r = ["logo", "slides"];
+var _excluded$s = ["logo", "slides"];
 var HighlightsCinema = function HighlightsCinema(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12667,10 +12678,10 @@ var HighlightsCinema = function HighlightsCinema(_ref) {
   })));
 };
 
-var _excluded$s = ["slides"];
+var _excluded$t = ["slides"];
 var HighlightsCore = function HighlightsCore(_ref) {
   var slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12684,11 +12695,11 @@ var HighlightsCore = function HighlightsCore(_ref) {
   })));
 };
 
-var _excluded$t = ["logo", "slides"];
+var _excluded$u = ["logo", "slides"];
 var HighlightsStream = function HighlightsStream(_ref) {
   var logo = _ref.logo,
     slides = _ref.slides,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var slidesWithLinks = slides.map(function (slide) {
     var links = processSlideLinks(slide.links);
     return _extends({}, slide, {
@@ -12705,9 +12716,9 @@ var HighlightsStream = function HighlightsStream(_ref) {
   })));
 };
 
-var _templateObject$1p, _templateObject3$V;
+var _templateObject$1p, _templateObject3$U;
 var CarouselWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$1p || (_templateObject$1p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  user-select: none;\n  display: flex;\n\n  .swipe-slide {\n    width: 100%;\n  }\n"])));
-var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$V || (_templateObject3$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
+var ButtonsWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n  margin-left: 6px;\n"])));
 
 var MinimalCarousel = function MinimalCarousel(_ref) {
   var children = _ref.children;