@royaloperahouse/harmonic 1.0.6-c → 1.0.6-e

package/dist/harmonic.esm.js

@@ -7408,9 +7408,9 @@ var HotFilters = function HotFilters(_ref) {
 };
 
 var _templateObject$P, _templateObject2$C, _templateObject3$p;
-var ScrollContainer = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: scroll;\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-var TabsContainerWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__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 StyledTab = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__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 ScrollContainer = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: scroll;\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media ", " {\n    overflow-x: visible;\n  }\n"])), devices.mobile);
+var TabsContainerWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__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    width: 100%;\n    min-width: 0;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    gap: 10px;\n  }\n"])), devices.mobile);
+var StyledTab = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__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\n  @media ", " {\n    width: auto !important;\n    min-width: fit-content;\n    flex: 0 0 auto;\n  }\n"])), devices.mobile);
 
 var _excluded$j = ["text", "id", "isSelected"];
 /**
@@ -7436,7 +7436,7 @@ var _excluded$j = ["text", "id", "isSelected"];
  * Called when a tab is clicked. Receives the full clicked item (including
  * `allowedSelectedWith`). The parent is responsible for computing the next
  * `items` array and passing it back down with updated `isSelected` values.
- *  as long as no return statement `type` is inferred automatically as void
+ * as long as no return statement `type` is bing inferred automatically as void
  *
  * @param [customViewConfig]
  * Optional visual configuration used to customize:
@@ -8463,7 +8463,7 @@ var BrandingTextBlock = /*#__PURE__*/styled.div(_templateObject$X || (_templateO
 var BrandingTextBody = /*#__PURE__*/styled.div(_templateObject2$K || (_templateObject2$K = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-body);\n  font-size: var(--font-size-heading-6);\n  line-height: var(--line-height-heading-6);\n"])));
 var ComapctHeaderWrapper = /*#__PURE__*/styled.div(_templateObject3$x || (_templateObject3$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  display: block;\n"])));
 var CompactHeaderAssetWrapper = /*#__PURE__*/styled.div(_templateObject5$n || (_templateObject5$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 37.5vw;\n  width: 100%;\n  position: relative;\n  overflow: hidden;\n  background-color: #000;\n  img {\n    position: relative;\n    height: 100%;\n    width: 100%;\n    object-fit: cover;\n  }\n  video {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    object-fit: contain;\n    @media ", " {\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      margin: auto;\n      height: auto;\n      max-height: 100vh;\n      width: 100%;\n      object-fit: contain;\n    }\n  }\n  @media ", " {\n    height: 85vw;\n    max-height: 100vh;\n  }\n"])), devices.mobile, devices.mobile);
-var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content;\n  grid-template-rows: min-content min-content;\n  grid-template-columns: [logo] 1fr [title] 3fr [cta] 1fr;\n  align-content: center;\n  gap: 0;\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    display: flex;\n    flex-direction: column;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
+var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (_templateObject6$g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  height: 160px;\n  grid-template-rows: min-content min-content min-content;\n  grid-template-areas:\n    '. . . . . . . . . . . . . . . .'\n    '. logo logo logo title title title title title title title title cta cta . .'\n    '. . . . . . . . . . . . . . . .';\n  align-content: center;\n  gap: 0 var(--grid-column-gap);\n  background-color: ", ";\n  color: ", ";\n\n  svg {\n    width: 210px;\n    fill: ", ";\n  }\n\n  h1::selection,\n  div::selection {\n    ", ";\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr;\n    grid-template-areas:\n      'logo'\n      'title'\n      'cta';\n\n    gap: 0;\n    row-gap: 16px;\n    height: auto;\n    padding: 32px 20px;\n    svg {\n      width: 145px;\n    }\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr;\n    grid-template-areas:\n      'logo'\n      'title'\n      'cta';\n\n    gap: 0;\n    row-gap: 16px;\n    height: auto;\n    padding: 32px 20px;\n\n    svg {\n      width: 180px;\n    }\n  }\n"])), function (_ref) {
   var invert = _ref.invert,
     theme = _ref.theme;
   return invert ? theme.colors.white : theme.colors.primary;
@@ -8479,9 +8479,9 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled(Grid)(_templateObject6$g || (
   var theme = _ref4.theme;
   return theme.colors.primary === theme.colors.stream && "\n      color: " + theme.colors.stream + ";\n      background-color: " + theme.colors.white + ";\n    ";
 }, devices.tablet, devices.mobile);
-var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: logo;\n  padding-left: 50px;\n  justify-content: left;\n  align-items: center;\n  width: 100%;\n  @media ", " {\n    padding-left: 0px;\n    justify-content: center;\n  }\n  @media ", " {\n    width: fit-content;\n  }\n"])), devices.mobile, devices.tablet);
-var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: title;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-family-header);\n  text-transform: uppercase;\n  text-align: center;\n  padding: 0 2em;\n  @media ", " {\n    justify-content: center;\n  }\n"])), devices.mobile);
-var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: cta;\n  justify-content: right;\n  align-items: center;\n  padding-right: 50px;\n  @media ", " {\n    padding-right: 0px;\n    justify-content: center;\n  }\n"])), devices.mobile);
+var CompactHeaderLogoWrapper = /*#__PURE__*/styled.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: logo;\n  justify-content: left;\n  align-items: center;\n  width: 100%;\n  @media ", " {\n    padding-left: 0px;\n    justify-content: center;\n  }\n"])), devices.mobileAndTablet);
+var CompactHeaderTitleWrapper = /*#__PURE__*/styled.div(_templateObject8$9 || (_templateObject8$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: title;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-family-header);\n  text-align: center;\n\n  min-width: 0;\n  overflow: hidden;\n\n  @media ", " {\n    justify-content: center;\n    padding: 0 3em;\n  }\n"])), devices.mobileAndTablet);
+var CompactHeaderCTAWrapper = /*#__PURE__*/styled.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: cta;\n  justify-content: right;\n  align-items: center;\n  @media ", " {\n    padding-right: 0px;\n    justify-content: center;\n  }\n"])), devices.mobileAndTablet);
 var PrimaryButtonWithInversion = /*#__PURE__*/styled(PrimaryButton)(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  svg {\n    fill: ", ";\n    path {\n      fill: ", ";\n    }\n  }\n  min-width: 145px;\n"])), function (_ref5) {
   var invert = _ref5.invert,
     theme = _ref5.theme;