@royaloperahouse/harmonic 0.2.3-j → 0.2.3-l

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/molecules/SignUpForm/components/SignUpForm.d.ts +4 -0
  2. package/dist/components/molecules/SignUpForm/components/SignUpFormButton.d.ts +7 -0
  3. package/dist/components/molecules/SignUpForm/components/SignUpMessage.d.ts +4 -0
  4. package/dist/components/molecules/SignUpForm/components/SignUpTitle.d.ts +4 -0
  5. package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts +1 -0
  6. package/dist/harmonic.cjs.development.css +1 -1
  7. package/dist/harmonic.cjs.development.js +128 -97
  8. package/dist/harmonic.cjs.development.js.map +1 -1
  9. package/dist/harmonic.cjs.production.min.js +1 -1
  10. package/dist/harmonic.cjs.production.min.js.map +1 -1
  11. package/dist/harmonic.esm.js +129 -98
  12. package/dist/harmonic.esm.js.map +1 -1
  13. package/package.json +1 -1
package/dist/components/molecules/SignUpForm/components/SignUpForm.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { FunctionComponent } from 'react';
2
+ import { SignUpFormComponentFormProps } from '../../../../types/signUpForm';
3
+ declare const SignUpForm: FunctionComponent<SignUpFormComponentFormProps>;
4
+ export default SignUpForm;
package/dist/components/molecules/SignUpForm/components/SignUpFormButton.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { ThemeType } from '../../../../types/types';
3
+ declare type Props = {
4
+ theme: ThemeType;
5
+ };
6
+ declare const SignUpFormButton: React.FC<Props>;
7
+ export default SignUpFormButton;
package/dist/components/molecules/SignUpForm/components/SignUpMessage.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { FunctionComponent } from 'react';
2
+ import { SignUpFormComponentMessageProps } from '../../../../types/signUpForm';
3
+ declare const SignUpMessage: FunctionComponent<SignUpFormComponentMessageProps>;
4
+ export default SignUpMessage;
package/dist/components/molecules/SignUpForm/components/SignUpTitle.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { FunctionComponent } from 'react';
2
+ import { SignUpFormComponentTitleProps } from '../../../../types/signUpForm';
3
+ declare const SignUpTitle: FunctionComponent<SignUpFormComponentTitleProps>;
4
+ export default SignUpTitle;
package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { FunctionComponent } from 'react';
2
2
  import { IHighlightsCarouselProps } from '../../../../types/carousel';
3
+ export declare const TYPOGRAPHY_CLASS_NAME = "highlight-carousel-text";
3
4
  declare const HighlightsCarousel: FunctionComponent<IHighlightsCarouselProps>;
4
5
  export default HighlightsCarousel;
package/dist/harmonic.cjs.development.css CHANGED
@@ -98,7 +98,7 @@
98
98
  }
99
99
 
100
100
  .typography-module_bodycopy--large__BNzf2 {
101
- font-size: 20px;
101
+ font-size: 19px;
102
102
  line-height: 28px;
103
103
  letter-spacing: -0.5px;
104
104
  }
package/dist/harmonic.cjs.development.js CHANGED
@@ -482,7 +482,7 @@ var ButtonText = function ButtonText(_ref6) {
482
482
  color: color,
483
483
  className: className
484
484
  }, styles);
485
- return /*#__PURE__*/React__default.createElement("p", {
485
+ return /*#__PURE__*/React__default.createElement("span", {
486
486
  className: classNames
487
487
  }, children);
488
488
  };
@@ -797,7 +797,7 @@ var devices = {
797
797
  };
798
798
 
799
799
  var _templateObject$1, _templateObject2;
800
- var ButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n line-height: var(--button-line-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
800
+ var ButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n width: fit-content;\n border-style: solid;\n border-width: 1px;\n cursor: pointer;\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n\n @media ", " {\n & {\n width: 100%;\n }\n }\n"])), function (_ref) {
801
801
  var iconName = _ref.iconName;
802
802
  return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
803
803
  }, devices.mobile);
@@ -2707,7 +2707,9 @@ var Button = function Button(_ref) {
2707
2707
  iconName: iconName,
2708
2708
  direction: iconDirection,
2709
2709
  color: color
2710
- }))) : null, truncatedString);
2710
+ }))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
2711
+ color: "inherit"
2712
+ }, truncatedString));
2711
2713
  };
2712
2714
 
2713
2715
  var getPointerEvents = function getPointerEvents(_ref) {
@@ -2912,7 +2914,7 @@ var getTextColor$2 = function getTextColor(_ref) {
2912
2914
  };
2913
2915
 
2914
2916
  var _templateObject$5, _templateObject2$3;
2915
- var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\n color: ", ";\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor$2, getPointerEvents, getTextColor$2, COLORS$2.hover, COLORS$2.hover, COLORS$2.pressed, COLORS$2.pressed);
2917
+ var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n color: ", ";\n width: fit-content;\n background: none;\n border-style: none;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n text-decoration: none;\n box-sizing: border-box;\n pointer-events: ", ";\n\n path {\n fill: ", ";\n }\n\n :hover:not(:active) {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n :active {\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n"])), getTextColor$2, getPointerEvents, getTextColor$2, COLORS$2.hover, COLORS$2.hover, COLORS$2.pressed, COLORS$2.pressed);
2916
2918
  var TertiaryIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: var(--button-icon-width);\n min-width: 20px;\n height: var(--button-icon-height);\n margin-left: var(--button-icon-margin);\n display: inline-block;\n"])));
2917
2919
 
2918
2920
  var _excluded$5 = ["children", "className"];
@@ -2928,7 +2930,9 @@ var TertiaryButton = function TertiaryButton(_ref) {
2928
2930
  return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
2929
2931
  className: className,
2930
2932
  onClick: handleClick
2931
- }), truncatedString, /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
2933
+ }), /*#__PURE__*/React__default.createElement(ButtonText, {
2934
+ color: "inherit"
2935
+ }, truncatedString), /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
2932
2936
  "data-testid": "tertiary-icon"
2933
2937
  }, /*#__PURE__*/React__default.createElement(Icon, {
2934
2938
  iconName: "Arrow"
@@ -4289,6 +4293,7 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
4289
4293
  role: "alert",
4290
4294
  "aria-live": "assertive"
4291
4295
  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper, {
4296
+ color: "inherit",
4292
4297
  size: "large"
4293
4298
  }, error))));
4294
4299
  };
@@ -5978,7 +5983,7 @@ var Navigation = function Navigation(_ref) {
5978
5983
  onSearch = _ref.onSearch,
5979
5984
  onLink = _ref.onLink,
5980
5985
  _ref$crest = _ref.crest,
5981
- crest = _ref$crest === void 0 ? true : _ref$crest,
5986
+ crest = _ref$crest === void 0 ? false : _ref$crest,
5982
5987
  className = _ref.className,
5983
5988
  logoLink = _ref.logoLink;
5984
5989
  var _useState = React.useState(dataNavTop),
@@ -7936,7 +7941,7 @@ var Carousel = function Carousel(_ref) {
7936
7941
  };
7937
7942
 
7938
7943
  var _templateObject$P, _templateObject2$C, _templateObject3$p, _templateObject4$k, _templateObject5$f, _templateObject6$d, _templateObject7$9, _templateObject8$6, _templateObject9$3, _templateObject10$3, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17;
7939
- var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n color: var(--color-base-white);\n user-select: none;\n\n .color-primary {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
7944
+ var HighlightsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$P || (_templateObject$P = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n grid-template-rows: max-content minmax(0, 1fr);\n gap: 0 var(--grid-column-gap);\n background-color: var(--color-base-black);\n user-select: none;\n\n .highlight-carousel-text {\n color: var(--color-base-white);\n }\n\n @media ", " {\n & {\n grid-template-rows: min-content max-content max-content;\n }\n }\n"])), devices.mobile);
7940
7945
  var CarouselTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$C || (_templateObject2$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 1 / 1 / 1 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n padding-top: 40px;\n padding-left: 50px;\n padding-right: 36px;\n user-select: text;\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 12;\n padding: 12px 0 12px var(--grid-margin);\n min-height: 64px;\n box-sizing: border-box;\n width: 100%;\n }\n }\n\n @media ", " {\n & {\n grid-area: 1 / 1 / 2 / 11;\n width: 100%;\n padding: 8px 0 8px 20px;\n min-height: 28px;\n }\n }\n"])), devices.tablet, devices.mobile);
7941
7946
  var HeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0;\n padding: 0;\n"])));
7942
7947
  var InfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$k || (_templateObject4$k = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: 2 / 1 / 2 / 7;\n box-sizing: border-box;\n width: calc(100% + var(--grid-column-gap));\n align-self: center;\n padding: 36px 36px 36px 50px;\n\n @media ", " {\n & {\n grid-area: 2 / 1 / 2 / 7;\n padding: 0 12px 12px var(--grid-margin);\n }\n }\n\n @media ", " {\n & {\n grid-area: 3 / 1 / 4 / 15;\n width: 100%;\n padding: 0 20px;\n margin: 24px 0;\n }\n }\n"])), devices.tablet, devices.mobile);
@@ -7971,7 +7976,7 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
7971
7976
  };
7972
7977
 
7973
7978
  var _templateObject$Q;
7974
- 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 font-family: var(--font-family-sans);\n font-size: var(--button-font-size);\n font-weight: var(--button-font-weight);\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);
7979
+ 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);
7975
7980
 
7976
7981
  var _excluded$i = ["children", "className"];
7977
7982
  var AuxiliaryButton = function AuxiliaryButton(_ref) {
@@ -8085,6 +8090,7 @@ var InfoSection = function InfoSection(_ref) {
8085
8090
  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, timerParams && (/*#__PURE__*/React__default.createElement(TimerWrapper$1, {
8086
8091
  "data-testid": "highlight-carousel-timer-wrapper"
8087
8092
  }, finishedTimers.includes(currentSlideIndex) ? (/*#__PURE__*/React__default.createElement(HarmonicSubtitle, {
8093
+ className: "highlight-carousel-text",
8088
8094
  size: "large"
8089
8095
  }, timerParams.endDateText)) : (/*#__PURE__*/React__default.createElement(Timer, {
8090
8096
  color: exports.Colors.White,
@@ -8092,19 +8098,24 @@ var InfoSection = function InfoSection(_ref) {
8092
8098
  endDate: timerParams.endDate,
8093
8099
  title: timerParams.title
8094
8100
  })))), logo ? /*#__PURE__*/React__default.createElement(InfoLogoWrapper, null, logo) : null, /*#__PURE__*/React__default.createElement(InfoTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
8101
+ className: TYPOGRAPHY_CLASS_NAME,
8095
8102
  size: "large",
8096
8103
  hierarchy: "h3"
8097
8104
  }, infoTitle), /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8105
+ className: TYPOGRAPHY_CLASS_NAME,
8098
8106
  size: "large"
8099
8107
  }, infoTimeframe)), /*#__PURE__*/React__default.createElement(InfoTextWrapper, null, /*#__PURE__*/React__default.createElement(InfoSubtitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
8108
+ className: TYPOGRAPHY_CLASS_NAME,
8100
8109
  size: "large"
8101
8110
  }, infoSubtitle)), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8111
+ className: TYPOGRAPHY_CLASS_NAME,
8102
8112
  size: "large"
8103
8113
  }, /*#__PURE__*/React__default.createElement(HtmlBodyText, {
8104
8114
  dangerouslySetInnerHTML: {
8105
8115
  __html: description
8106
8116
  }
8107
8117
  })), additionalInfo && (/*#__PURE__*/React__default.createElement(AdditionalInfoWrapper, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8118
+ className: TYPOGRAPHY_CLASS_NAME,
8108
8119
  size: "large"
8109
8120
  }, additionalInfo)))));
8110
8121
  };
@@ -11882,17 +11893,17 @@ var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1n || (_temp
11882
11893
  return "var(--color-" + theme + ")";
11883
11894
  });
11884
11895
  var SignUpFormWrapper = /*#__PURE__*/styled__default(Grid)(_templateObject2$14 || (_templateObject2$14 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n gap: 0 var(--grid-column-gap);\n margin-bottom: 32px;\n\n @media ", " {\n margin-bottom: 30px;\n }\n"])), devices.mobile);
11885
- var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--base-color-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
11886
- var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--base-color-errorstate);\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
11896
+ var SignUpTitleWrapper = /*#__PURE__*/styled__default('div')(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n position: relative;\n top: -25px;\n left: -20px;\n height: 52px;\n background: var(--color-base-white);\n display: inline-block;\n padding: 0 20px;\n\n @media ", " {\n top: -18px;\n height: 37px;\n padding: 0 13px;\n left: -13px;\n }\n"])), devices.mobile);
11897
+ var Error$1 = /*#__PURE__*/styled__default.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--color-base-errorstate);\n\n a {\n text-decoration: underline;\n color: inherit;\n }\n"])));
11887
11898
  var Form = /*#__PURE__*/styled__default.form(_templateObject5$A || (_templateObject5$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n align-items: center;\n ", " {\n margin-top: -20px;\n }\n a[href] {\n color: inherit;\n }\n"])), Error$1);
11888
11899
  var FormFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject6$s || (_templateObject6$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 32px;\n display: flex;\n gap: 28px;\n align-items: center;\n\n @media ", " {\n flex-direction: column;\n align-items: flex-start;\n }\n"])), devices.mobile);
11889
- var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-color-errorstate);\n"])));
11890
- var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--base-color-black);\n div {\n text-decoration: underline;\n }\n"])));
11891
- var ButtonWrapper$3 = /*#__PURE__*/styled__default.button(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n\n @media ", " {\n width: 100%;\n }\n &:focus {\n outline: 3px solid var(--base-color-lapislazuli);\n }\n"])), devices.mobile);
11900
+ var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
11901
+ var CTALinkWrapper = /*#__PURE__*/styled__default.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
11902
+ var ButtonWrapper$3 = /*#__PURE__*/styled__default.button(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
11892
11903
  var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject10$a || (_templateObject10$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 36px;\n\n @media ", " {\n grid-template-columns: 1fr;\n gap: 20px;\n }\n"])), devices.mobile);
11893
11904
  var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject11$6 || (_templateObject11$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11894
11905
  var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject12$4 || (_templateObject12$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n gap: var(--grid-column-gap);\n cursor: pointer;\n"])));
11895
- var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject13$4 || (_templateObject13$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--base-color-black);\n margin: 0;\n }\n"])), function (_ref3) {
11906
+ var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject13$4 || (_templateObject13$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n width: fit-content;\n transform: rotate(", ");\n .dropdown-icon > div {\n border-bottom: none;\n color: var(--color-base-black);\n margin: 0;\n }\n"])), function (_ref3) {
11896
11907
  var _ref3$isOpen = _ref3.isOpen,
11897
11908
  isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
11898
11909
  return isOpen ? '180deg' : '0deg';
@@ -11900,6 +11911,54 @@ var DropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject13$4 || (_
11900
11911
  var HiddenInstructions = /*#__PURE__*/styled__default.div(_templateObject14$4 || (_templateObject14$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n"])));
11901
11912
  var SignUpHeader = /*#__PURE__*/styled__default(Grid)(_templateObject15$3 || (_templateObject15$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n row-gap: 0;\n"])));
11902
11913
 
11914
+ var themeToColor = function themeToColor(theme) {
11915
+ switch (theme) {
11916
+ case exports.ThemeType.Core:
11917
+ return ThemeColor['primary-red'];
11918
+ case exports.ThemeType.Stream:
11919
+ return ThemeColor['base-black'];
11920
+ case exports.ThemeType.Cinema:
11921
+ return ThemeColor['primary-black'];
11922
+ default:
11923
+ return ThemeColor['primary-red'];
11924
+ }
11925
+ };
11926
+
11927
+ var SignUpTitle = function SignUpTitle(_ref) {
11928
+ var title = _ref.title,
11929
+ _ref$isMobile = _ref.isMobile,
11930
+ isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
11931
+ return /*#__PURE__*/React__default.createElement(GridItem, {
11932
+ columnStartDesktop: 3,
11933
+ columnSpanDesktop: 10,
11934
+ columnStartDevice: 2,
11935
+ columnSpanDevice: 12
11936
+ }, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
11937
+ color: "black",
11938
+ hierarchy: "h3",
11939
+ serif: true,
11940
+ size: isMobile ? 'small' : 'medium'
11941
+ }, title)));
11942
+ };
11943
+
11944
+ var SignUpMessage = function SignUpMessage(_ref) {
11945
+ var message = _ref.message,
11946
+ _ref$withDropdown = _ref.withDropdown,
11947
+ withDropdown = _ref$withDropdown === void 0 ? false : _ref$withDropdown;
11948
+ return /*#__PURE__*/React__default.createElement(GridItem, {
11949
+ columnStartDesktop: 3,
11950
+ columnSpanDesktop: 10,
11951
+ columnStartDevice: 2,
11952
+ columnSpanDevice: withDropdown ? 11 : 12
11953
+ }, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
11954
+ size: "large"
11955
+ }, /*#__PURE__*/React__default.createElement("div", {
11956
+ dangerouslySetInnerHTML: {
11957
+ __html: message
11958
+ }
11959
+ }))));
11960
+ };
11961
+
11903
11962
  var regex = {
11904
11963
  signInEmail:
11905
11964
  // eslint-disable-next-line max-len
@@ -11945,65 +12004,33 @@ var getFormErrorMessage = function getFormErrorMessage(field, value) {
11945
12004
  return errorMessage;
11946
12005
  };
11947
12006
 
11948
- var themeToColor = function themeToColor(theme) {
11949
- switch (theme) {
11950
- case exports.ThemeType.Core:
11951
- return ThemeColor['primary-red'];
11952
- case exports.ThemeType.Stream:
11953
- return ThemeColor['base-black'];
11954
- case exports.ThemeType.Cinema:
11955
- return ThemeColor['primary-black'];
11956
- default:
11957
- return ThemeColor['primary-red'];
12007
+ var BUTTON_TEXT = 'Sign up';
12008
+ var SignUpFormButton = function SignUpFormButton(_ref) {
12009
+ var theme = _ref.theme;
12010
+ if (theme === exports.ThemeType.Core) {
12011
+ return /*#__PURE__*/React__default.createElement(PrimaryButton, null, BUTTON_TEXT);
11958
12012
  }
11959
- };
11960
-
11961
- var SignUpTitle = function SignUpTitle(_ref) {
11962
- var title = _ref.title,
12013
+ return /*#__PURE__*/React__default.createElement(PrimaryButton, {
12014
+ textColor: ThemeColor['base-white'],
12015
+ backgroundColor: ThemeColor['base-black'],
12016
+ hoveredColor: ThemeColor['black-hovered'],
12017
+ pressedColor: ThemeColor['black-pressed']
12018
+ }, BUTTON_TEXT);
12019
+ };
12020
+
12021
+ var SignUpForm = function SignUpForm(_ref) {
12022
+ var submitHandler = _ref.submitHandler,
12023
+ errorMessage = _ref.errorMessage,
12024
+ ctaPrivacy = _ref.ctaPrivacy,
12025
+ theme = _ref.theme,
12026
+ isSuccess = _ref.isSuccess,
12027
+ setIsSuccess = _ref.setIsSuccess,
12028
+ formValues = _ref.formValues,
12029
+ setFormValues = _ref.setFormValues,
12030
+ _ref$isLoggedIn = _ref.isLoggedIn,
12031
+ isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
11963
12032
  _ref$isMobile = _ref.isMobile,
11964
12033
  isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
11965
- return /*#__PURE__*/React__default.createElement(GridItem, {
11966
- columnStartDesktop: 3,
11967
- columnSpanDesktop: 10,
11968
- columnStartDevice: 2,
11969
- columnSpanDevice: 12
11970
- }, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
11971
- color: "black",
11972
- hierarchy: "h3",
11973
- serif: true,
11974
- size: isMobile ? 'small' : 'medium'
11975
- }, title)));
11976
- };
11977
- var SignUpMessage = function SignUpMessage(_ref2) {
11978
- var message = _ref2.message,
11979
- _ref2$withDropdown = _ref2.withDropdown,
11980
- withDropdown = _ref2$withDropdown === void 0 ? false : _ref2$withDropdown;
11981
- return /*#__PURE__*/React__default.createElement(GridItem, {
11982
- columnStartDesktop: 3,
11983
- columnSpanDesktop: 10,
11984
- columnStartDevice: 2,
11985
- columnSpanDevice: withDropdown ? 11 : 12
11986
- }, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
11987
- size: "large"
11988
- }, /*#__PURE__*/React__default.createElement("div", {
11989
- dangerouslySetInnerHTML: {
11990
- __html: message
11991
- }
11992
- }))));
11993
- };
11994
- var SignUpForm = function SignUpForm(_ref3) {
11995
- var submitHandler = _ref3.submitHandler,
11996
- errorMessage = _ref3.errorMessage,
11997
- ctaPrivacy = _ref3.ctaPrivacy,
11998
- theme = _ref3.theme,
11999
- isSuccess = _ref3.isSuccess,
12000
- setIsSuccess = _ref3.setIsSuccess,
12001
- formValues = _ref3.formValues,
12002
- setFormValues = _ref3.setFormValues,
12003
- _ref3$isLoggedIn = _ref3.isLoggedIn,
12004
- isLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
12005
- _ref3$isMobile = _ref3.isMobile,
12006
- isMobile = _ref3$isMobile === void 0 ? false : _ref3$isMobile;
12007
12034
  var _useState = React.useState({}),
12008
12035
  errors = _useState[0],
12009
12036
  setErrors = _useState[1];
@@ -12033,7 +12060,7 @@ var SignUpForm = function SignUpForm(_ref3) {
12033
12060
  };
12034
12061
  };
12035
12062
  var handleFormSubmit = /*#__PURE__*/function () {
12036
- var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
12063
+ var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
12037
12064
  var formErrors, response;
12038
12065
  return _regeneratorRuntime().wrap(function _callee$(_context) {
12039
12066
  while (1) switch (_context.prev = _context.next) {
@@ -12088,7 +12115,7 @@ var SignUpForm = function SignUpForm(_ref3) {
12088
12115
  }, _callee);
12089
12116
  }));
12090
12117
  return function handleFormSubmit(_x) {
12091
- return _ref4.apply(this, arguments);
12118
+ return _ref2.apply(this, arguments);
12092
12119
  };
12093
12120
  }();
12094
12121
  return /*#__PURE__*/React__default.createElement(GridItem, {
@@ -12151,45 +12178,47 @@ var SignUpForm = function SignUpForm(_ref3) {
12151
12178
  size: "small"
12152
12179
  }, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
12153
12180
  type: "submit"
12154
- }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
12155
- backgroundColor: themeToColor(theme)
12156
- }, "Sign up")))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
12181
+ }, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
12182
+ theme: theme
12183
+ })))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
12157
12184
  type: "submit"
12158
- }, /*#__PURE__*/React__default.createElement(PrimaryButton, {
12159
- backgroundColor: themeToColor(theme)
12160
- }, "Sign up")), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
12185
+ }, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
12186
+ theme: theme
12187
+ })), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
12161
12188
  href: ctaPrivacy.link
12162
12189
  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
12163
- size: "large"
12190
+ size: "medium"
12164
12191
  }, ctaPrivacy.text))))));
12165
12192
  };
12166
- var SignUpFormComponent = function SignUpFormComponent(_ref5) {
12167
- var initialState = _ref5.initialState,
12168
- submittedState = _ref5.submittedState,
12169
- ctaPrivacy = _ref5.ctaPrivacy,
12170
- theme = _ref5.theme,
12171
- errorMessage = _ref5.errorMessage,
12172
- _ref5$isLoggedIn = _ref5.isLoggedIn,
12173
- isLoggedIn = _ref5$isLoggedIn === void 0 ? false : _ref5$isLoggedIn,
12174
- className = _ref5.className,
12175
- submitHandler = _ref5.submitHandler;
12193
+
12194
+ /* eslint-disable react/no-danger */
12195
+ var SignUpFormComponent = function SignUpFormComponent(_ref) {
12196
+ var initialState = _ref.initialState,
12197
+ submittedState = _ref.submittedState,
12198
+ ctaPrivacy = _ref.ctaPrivacy,
12199
+ theme = _ref.theme,
12200
+ errorMessage = _ref.errorMessage,
12201
+ _ref$isLoggedIn = _ref.isLoggedIn,
12202
+ isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
12203
+ className = _ref.className,
12204
+ submitHandler = _ref.submitHandler;
12176
12205
  var signUpHeaderId = 'signup-header';
12177
12206
  var signUpInstructionsId = 'sign-up-instructions';
12178
12207
  var isMobile = useMobile();
12208
+ var _useState = React.useState(false),
12209
+ isSuccess = _useState[0],
12210
+ setIsSuccess = _useState[1];
12179
12211
  var _useState2 = React.useState(false),
12180
- isSuccess = _useState2[0],
12181
- setIsSuccess = _useState2[1];
12182
- var _useState3 = React.useState(false),
12183
- dropdownOpen = _useState3[0],
12184
- setDropdownOpen = _useState3[1];
12212
+ dropdownOpen = _useState2[0],
12213
+ setDropdownOpen = _useState2[1];
12185
12214
  var successRef = React.useRef(null);
12186
- var _useState4 = React.useState({
12215
+ var _useState3 = React.useState({
12187
12216
  firstName: '',
12188
12217
  lastName: '',
12189
12218
  email: ''
12190
12219
  }),
12191
- formValues = _useState4[0],
12192
- setFormValues = _useState4[1];
12220
+ formValues = _useState3[0],
12221
+ setFormValues = _useState3[1];
12193
12222
  React.useEffect(function () {
12194
12223
  if (isMobile && !isLoggedIn && isSuccess && successRef.current) {
12195
12224
  successRef.current.scrollIntoView({
@@ -12337,6 +12366,7 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
12337
12366
  }));
12338
12367
  };
12339
12368
 
12369
+ var TYPOGRAPHY_CLASS_NAME = 'highlight-carousel-text';
12340
12370
  var HighlightsCarousel = function HighlightsCarousel(_ref) {
12341
12371
  var logo = _ref.logo,
12342
12372
  carouselTitle = _ref.carouselTitle,
@@ -12383,6 +12413,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
12383
12413
  }, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
12384
12414
  id: carouselTitleId
12385
12415
  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
12416
+ className: TYPOGRAPHY_CLASS_NAME,
12386
12417
  size: "medium",
12387
12418
  serif: true,
12388
12419
  hierarchy: titleSemanticLevelValue