@royaloperahouse/harmonic 0.2.3-k → 0.2.3-m
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.
- package/dist/components/molecules/SignUpForm/components/SignUpForm.d.ts +4 -0
- package/dist/components/molecules/SignUpForm/components/SignUpFormButton.d.ts +7 -0
- package/dist/components/molecules/SignUpForm/components/SignUpMessage.d.ts +4 -0
- package/dist/components/molecules/SignUpForm/components/SignUpTitle.d.ts +4 -0
- package/dist/harmonic.cjs.development.css +1 -1
- package/dist/harmonic.cjs.development.js +120 -101
- package/dist/harmonic.cjs.development.js.map +1 -1
- package/dist/harmonic.cjs.production.min.js +1 -1
- package/dist/harmonic.cjs.production.min.js.map +1 -1
- package/dist/harmonic.esm.js +121 -102
- package/dist/harmonic.esm.js.map +1 -1
- package/package.json +1 -1
package/dist/harmonic.esm.js
CHANGED
|
@@ -414,7 +414,7 @@ function styleInject(css, ref) {
|
|
|
414
414
|
}
|
|
415
415
|
}
|
|
416
416
|
|
|
417
|
-
var css_248z = "/* Base classes */\n.typography-module_display__ZHsz9 {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n}\n\n.typography-module_header__FVsLI {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n}\n\n.typography-module_subtitle__x3sSn {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n}\n\n.typography-module_bodycopy__-BY2U {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.typography-module_overline__y1yCC {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.typography-module_buttontext__Gp0W- {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.typography-module_captiontext__zyA-- {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.typography-module_navigationtext__Qj6Zw {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n}\n\n/* Size modifiers */\n.typography-module_display--large__RwPQD {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n}\n\n.typography-module_display--small__XWUSJ {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n}\n\n.typography-module_header--large__2vP3p {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n}\n\n.typography-module_header--medium__OgzlB {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n}\n\n.typography-module_header--small__zLuFf {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--large__1Ep9J {\n font-size: 24px;\n line-height: 32px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--medium__8FxeU {\n font-size: 20px;\n line-height: 28px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--small__Vt9bZ {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--large__BNzf2 {\n font-size:
|
|
417
|
+
var css_248z = "/* Base classes */\n.typography-module_display__ZHsz9 {\n margin: 0;\n font-family: var(--font-family-sans);\n line-height: 100%;\n}\n\n.typography-module_header__FVsLI {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n}\n\n.typography-module_subtitle__x3sSn {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n}\n\n.typography-module_bodycopy__-BY2U {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.typography-module_overline__y1yCC {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n text-transform: uppercase;\n}\n\n.typography-module_buttontext__Gp0W- {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.typography-module_captiontext__zyA-- {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.typography-module_navigationtext__Qj6Zw {\n margin: 0;\n font-family: var(--font-family-sans);\n font-weight: 500;\n}\n\n/* Size modifiers */\n.typography-module_display--large__RwPQD {\n font-size: 96px;\n font-weight: 700;\n letter-spacing: -5px;\n}\n\n.typography-module_display--small__XWUSJ {\n font-size: 68px;\n font-weight: 500;\n letter-spacing: -3px;\n}\n\n.typography-module_header--large__2vP3p {\n font-size: 44px;\n line-height: 48px;\n letter-spacing: -1.5px;\n}\n\n.typography-module_header--medium__OgzlB {\n font-size: 34px;\n line-height: 40px;\n letter-spacing: -1px;\n}\n\n.typography-module_header--small__zLuFf {\n font-size: 26px;\n line-height: 32px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--large__1Ep9J {\n font-size: 24px;\n line-height: 32px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--medium__8FxeU {\n font-size: 20px;\n line-height: 28px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_subtitle--small__Vt9bZ {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--large__BNzf2 {\n font-size: 19px;\n line-height: 28px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--medium__cwJEu {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_bodycopy--small__fTLSM {\n font-size: 15px;\n line-height: 20px;\n letter-spacing: -0.25px;\n}\n\n.typography-module_overline--large__79WUM {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: 1.7px;\n}\n\n.typography-module_overline--medium__Y5z3w {\n font-size: 15px;\n line-height: 20px;\n letter-spacing: 1.5px;\n}\n\n.typography-module_overline--small__MGEG6 {\n font-size: 13px;\n line-height: 16px;\n letter-spacing: 1.3px;\n}\n\n/* Button, Caption, Navigation text */\n.typography-module_buttontext__Gp0W- {\n font-size: 17px;\n line-height: 20px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_captiontext__zyA-- {\n font-size: 17px;\n line-height: 24px;\n letter-spacing: -0.5px;\n}\n\n.typography-module_navigationtext__Qj6Zw {\n font-size: 19px;\n line-height: 19px;\n letter-spacing: 0.4px;\n}\n\n/* Color modifiers */\n.typography-module_display--primary__9sTwU,\n.typography-module_header--primary__KF0PJ,\n.typography-module_subtitle--primary__yL-hS,\n.typography-module_bodycopy--primary__5Uo2D,\n.typography-module_overline--primary__a2NSa,\n.typography-module_buttontext--primary__HnmE3,\n.typography-module_captiontext--primary__mmafI,\n.typography-module_navigationtext--primary__vIsUl {\n color: var(--color-primary);\n}\n\n\n.typography-module_display--black__8hmsx,\n.typography-module_header--black__M3I14,\n.typography-module_subtitle--black__IQRSo,\n.typography-module_bodycopy--black__J8BNP,\n.typography-module_overline--black__RUDoj,\n.typography-module_buttontext--black__irjmz,\n.typography-module_captiontext--black__7axhP,\n.typography-module_navigationtext--black__wDz-G {\n color: var(--color-base-black);\n}\n\n.typography-module_display--white__3QA6W,\n.typography-module_header--white__mm-ex,\n.typography-module_subtitle--white__VzQ3K,\n.typography-module_bodycopy--white__NJ8J8,\n.typography-module_overline--white__cV5QV,\n.typography-module_buttontext--white__rrr8U,\n.typography-module_captiontext--white__OMFwW,\n.typography-module_navigationtext--white__5YDdY {\n color: var(--color-base-white);\n}\n\n.typography-module_display--red__khdLJ,\n.typography-module_header--red__hxuj9,\n.typography-module_subtitle--red__gSK7d,\n.typography-module_bodycopy--red__P5Mau,\n.typography-module_overline--red__OW5dE,\n.typography-module_buttontext--red__mlRi2,\n.typography-module_captiontext--red__jMQIK,\n.typography-module_navigationtext--red__-QADV {\n color: var(--color-primary-red);\n}\n\n.typography-module_display--grey__RsgTf,\n.typography-module_header--grey__rC0vN,\n.typography-module_subtitle--grey__1nkEx,\n.typography-module_bodycopy--grey__SNnaU,\n.typography-module_overline--grey__lGOsK,\n.typography-module_buttontext--grey__1Y4oX,\n.typography-module_captiontext--grey__V0MLc,\n.typography-module_navigationtext--grey__xi3sz {\n color: var(--color-base-dark-grey);\n}\n\n.typography-module_display--inherit__ZNOHM,\n.typography-module_header--inherit__qmHQE,\n.typography-module_subtitle--inherit__mly-X, \n.typography-module_bodycopy--inherit__CoC-f,\n.typography-module_overline--inherit__Cq4ni,\n.typography-module_buttontext--inherit__vguWx,\n.typography-module_captiontext--inherit__ya6gm,\n.typography-module_navigationtext--inherit__cJLWf {\n color: inherit;\n}\n\n/* Typography variants */\n.typography-module_display--serif__C0-Ve,\n.typography-module_header--serif__uTGCc {\n font-family: var(--font-family-serif);\n}\n\n.typography-module_display--em__h2bPV,\n.typography-module_header--em__UFQIA {\n font-family: var(--font-family-serif);\n font-style: italic;\n}\n\n.typography-module_display--bold__PG-8g,\n.typography-module_header--bold__InvJk,\n.typography-module_subtitle--bold__Subov,\n.typography-module_bodycopy--bold__nZX3C,\n.typography-module_overline--bold__3mUXy,\n.typography-module_buttontext--bold__rBKIJ,\n.typography-module_captiontext--bold__ebTyV,\n.typography-module_navigationtext--bold__SRlV2 {\n font-weight: 700;\n}\n\n/* Media queries */\n@media (max-width: 699px) {\n .typography-module_display--large__RwPQD {\n font-size: 38px;\n letter-spacing: -1.5px;\n }\n\n .typography-module_display--small__XWUSJ {\n font-size: 32px;\n letter-spacing: -1.5px;\n }\n\n .typography-module_header--large__2vP3p {\n font-size: 28px;\n line-height: 34px;\n letter-spacing: -1.5px;\n }\n\n .typography-module_header--medium__OgzlB {\n font-size: 24px;\n line-height: 28px;\n letter-spacing: -1px;\n }\n\n .typography-module_header--small__zLuFf {\n font-size: 20px;\n line-height: 26px;\n letter-spacing: -0.75px;\n }\n\n .typography-module_subtitle--large__1Ep9J {\n font-size: 20px;\n line-height: 28px;\n }\n \n .typography-module_subtitle--medium__8FxeU {\n font-size: 17px;\n line-height: 24px;\n }\n \n .typography-module_bodycopy--large__BNzf2 {\n font-size: 17px;\n line-height: 24px;\n }\n}";
|
|
418
418
|
var styles = {"display":"typography-module_display__ZHsz9","header":"typography-module_header__FVsLI","subtitle":"typography-module_subtitle__x3sSn","bodycopy":"typography-module_bodycopy__-BY2U","overline":"typography-module_overline__y1yCC","buttontext":"typography-module_buttontext__Gp0W-","captiontext":"typography-module_captiontext__zyA--","navigationtext":"typography-module_navigationtext__Qj6Zw","display--large":"typography-module_display--large__RwPQD","display--small":"typography-module_display--small__XWUSJ","header--large":"typography-module_header--large__2vP3p","header--medium":"typography-module_header--medium__OgzlB","header--small":"typography-module_header--small__zLuFf","subtitle--large":"typography-module_subtitle--large__1Ep9J","subtitle--medium":"typography-module_subtitle--medium__8FxeU","subtitle--small":"typography-module_subtitle--small__Vt9bZ","bodycopy--large":"typography-module_bodycopy--large__BNzf2","bodycopy--medium":"typography-module_bodycopy--medium__cwJEu","bodycopy--small":"typography-module_bodycopy--small__fTLSM","overline--large":"typography-module_overline--large__79WUM","overline--medium":"typography-module_overline--medium__Y5z3w","overline--small":"typography-module_overline--small__MGEG6","display--primary":"typography-module_display--primary__9sTwU","header--primary":"typography-module_header--primary__KF0PJ","subtitle--primary":"typography-module_subtitle--primary__yL-hS","bodycopy--primary":"typography-module_bodycopy--primary__5Uo2D","overline--primary":"typography-module_overline--primary__a2NSa","buttontext--primary":"typography-module_buttontext--primary__HnmE3","captiontext--primary":"typography-module_captiontext--primary__mmafI","navigationtext--primary":"typography-module_navigationtext--primary__vIsUl","display--black":"typography-module_display--black__8hmsx","header--black":"typography-module_header--black__M3I14","subtitle--black":"typography-module_subtitle--black__IQRSo","bodycopy--black":"typography-module_bodycopy--black__J8BNP","overline--black":"typography-module_overline--black__RUDoj","buttontext--black":"typography-module_buttontext--black__irjmz","captiontext--black":"typography-module_captiontext--black__7axhP","navigationtext--black":"typography-module_navigationtext--black__wDz-G","display--white":"typography-module_display--white__3QA6W","header--white":"typography-module_header--white__mm-ex","subtitle--white":"typography-module_subtitle--white__VzQ3K","bodycopy--white":"typography-module_bodycopy--white__NJ8J8","overline--white":"typography-module_overline--white__cV5QV","buttontext--white":"typography-module_buttontext--white__rrr8U","captiontext--white":"typography-module_captiontext--white__OMFwW","navigationtext--white":"typography-module_navigationtext--white__5YDdY","display--red":"typography-module_display--red__khdLJ","header--red":"typography-module_header--red__hxuj9","subtitle--red":"typography-module_subtitle--red__gSK7d","bodycopy--red":"typography-module_bodycopy--red__P5Mau","overline--red":"typography-module_overline--red__OW5dE","buttontext--red":"typography-module_buttontext--red__mlRi2","captiontext--red":"typography-module_captiontext--red__jMQIK","navigationtext--red":"typography-module_navigationtext--red__-QADV","display--grey":"typography-module_display--grey__RsgTf","header--grey":"typography-module_header--grey__rC0vN","subtitle--grey":"typography-module_subtitle--grey__1nkEx","bodycopy--grey":"typography-module_bodycopy--grey__SNnaU","overline--grey":"typography-module_overline--grey__lGOsK","buttontext--grey":"typography-module_buttontext--grey__1Y4oX","captiontext--grey":"typography-module_captiontext--grey__V0MLc","navigationtext--grey":"typography-module_navigationtext--grey__xi3sz","display--inherit":"typography-module_display--inherit__ZNOHM","header--inherit":"typography-module_header--inherit__qmHQE","subtitle--inherit":"typography-module_subtitle--inherit__mly-X","bodycopy--inherit":"typography-module_bodycopy--inherit__CoC-f","overline--inherit":"typography-module_overline--inherit__Cq4ni","buttontext--inherit":"typography-module_buttontext--inherit__vguWx","captiontext--inherit":"typography-module_captiontext--inherit__ya6gm","navigationtext--inherit":"typography-module_navigationtext--inherit__cJLWf","display--serif":"typography-module_display--serif__C0-Ve","header--serif":"typography-module_header--serif__uTGCc","display--em":"typography-module_display--em__h2bPV","header--em":"typography-module_header--em__UFQIA","display--bold":"typography-module_display--bold__PG-8g","header--bold":"typography-module_header--bold__InvJk","subtitle--bold":"typography-module_subtitle--bold__Subov","bodycopy--bold":"typography-module_bodycopy--bold__nZX3C","overline--bold":"typography-module_overline--bold__3mUXy","buttontext--bold":"typography-module_buttontext--bold__rBKIJ","captiontext--bold":"typography-module_captiontext--bold__ebTyV","navigationtext--bold":"typography-module_navigationtext--bold__SRlV2"};
|
|
419
419
|
styleInject(css_248z);
|
|
420
420
|
|
|
@@ -502,7 +502,7 @@ var ButtonText = function ButtonText(_ref6) {
|
|
|
502
502
|
color: color,
|
|
503
503
|
className: className
|
|
504
504
|
}, styles);
|
|
505
|
-
return /*#__PURE__*/React__default.createElement("
|
|
505
|
+
return /*#__PURE__*/React__default.createElement("span", {
|
|
506
506
|
className: classNames
|
|
507
507
|
}, children);
|
|
508
508
|
};
|
|
@@ -820,7 +820,7 @@ var devices = {
|
|
|
820
820
|
};
|
|
821
821
|
|
|
822
822
|
var _templateObject$1, _templateObject2;
|
|
823
|
-
var ButtonWrapper = /*#__PURE__*/styled.a(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: ", "\n var(--button-padding-x);\n height: var(--button-height);\n
|
|
823
|
+
var ButtonWrapper = /*#__PURE__*/styled.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) {
|
|
824
824
|
var iconName = _ref.iconName;
|
|
825
825
|
return iconName ? 'var(--button-padding-y-icon)' : 'var(--button-padding-y)';
|
|
826
826
|
}, devices.mobile);
|
|
@@ -2730,7 +2730,9 @@ var Button = function Button(_ref) {
|
|
|
2730
2730
|
iconName: iconName,
|
|
2731
2731
|
direction: iconDirection,
|
|
2732
2732
|
color: color
|
|
2733
|
-
}))) : null,
|
|
2733
|
+
}))) : null, /*#__PURE__*/React__default.createElement(ButtonText, {
|
|
2734
|
+
color: "inherit"
|
|
2735
|
+
}, truncatedString));
|
|
2734
2736
|
};
|
|
2735
2737
|
|
|
2736
2738
|
var getPointerEvents = function getPointerEvents(_ref) {
|
|
@@ -2935,7 +2937,7 @@ var getTextColor$2 = function getTextColor(_ref) {
|
|
|
2935
2937
|
};
|
|
2936
2938
|
|
|
2937
2939
|
var _templateObject$5, _templateObject2$3;
|
|
2938
|
-
var TertiaryButtonWrapper = /*#__PURE__*/styled.a(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n height: var(--button-height);\n
|
|
2940
|
+
var TertiaryButtonWrapper = /*#__PURE__*/styled.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);
|
|
2939
2941
|
var TertiaryIconWrapper = /*#__PURE__*/styled.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"])));
|
|
2940
2942
|
|
|
2941
2943
|
var _excluded$5 = ["children", "className"];
|
|
@@ -2951,7 +2953,9 @@ var TertiaryButton = function TertiaryButton(_ref) {
|
|
|
2951
2953
|
return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
|
|
2952
2954
|
className: className,
|
|
2953
2955
|
onClick: handleClick
|
|
2954
|
-
}),
|
|
2956
|
+
}), /*#__PURE__*/React__default.createElement(ButtonText, {
|
|
2957
|
+
color: "inherit"
|
|
2958
|
+
}, truncatedString), /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
|
|
2955
2959
|
"data-testid": "tertiary-icon"
|
|
2956
2960
|
}, /*#__PURE__*/React__default.createElement(Icon, {
|
|
2957
2961
|
iconName: "Arrow"
|
|
@@ -4313,6 +4317,7 @@ var TextFieldComponent = function TextFieldComponent(_ref, ref) {
|
|
|
4313
4317
|
role: "alert",
|
|
4314
4318
|
"aria-live": "assertive"
|
|
4315
4319
|
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonicWithWrapper, {
|
|
4320
|
+
color: "inherit",
|
|
4316
4321
|
size: "large"
|
|
4317
4322
|
}, error))));
|
|
4318
4323
|
};
|
|
@@ -6003,7 +6008,7 @@ var Navigation = function Navigation(_ref) {
|
|
|
6003
6008
|
onSearch = _ref.onSearch,
|
|
6004
6009
|
onLink = _ref.onLink,
|
|
6005
6010
|
_ref$crest = _ref.crest,
|
|
6006
|
-
crest = _ref$crest === void 0 ?
|
|
6011
|
+
crest = _ref$crest === void 0 ? false : _ref$crest,
|
|
6007
6012
|
className = _ref.className,
|
|
6008
6013
|
logoLink = _ref.logoLink;
|
|
6009
6014
|
var _useState = useState(dataNavTop),
|
|
@@ -7998,7 +8003,7 @@ var getBackgroundColor$1 = function getBackgroundColor(_ref2) {
|
|
|
7998
8003
|
};
|
|
7999
8004
|
|
|
8000
8005
|
var _templateObject$Q;
|
|
8001
|
-
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(Button)(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n height: 20px;\n border: none;\n padding: 0;\n
|
|
8006
|
+
var AuxiliaryButtonWrapper = /*#__PURE__*/styled(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);
|
|
8002
8007
|
|
|
8003
8008
|
var _excluded$i = ["children", "className"];
|
|
8004
8009
|
var AuxiliaryButton = function AuxiliaryButton(_ref) {
|
|
@@ -10475,11 +10480,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
|
|
|
10475
10480
|
"data-testid": "buttons-wrapper",
|
|
10476
10481
|
primaryButtonTextLength: primaryButtonText.length,
|
|
10477
10482
|
tertiaryButtonTextLength: tertiaryButtonText.length
|
|
10478
|
-
}, primaryButton ?
|
|
10479
|
-
target: "_blank"
|
|
10480
|
-
}, restPrimaryButton), primaryButtonTextTruncate)) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({
|
|
10481
|
-
target: "_blank"
|
|
10482
|
-
}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
10483
|
+
}, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? (/*#__PURE__*/React__default.createElement(TertiaryButton, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate)) : null)) : null));
|
|
10483
10484
|
};
|
|
10484
10485
|
|
|
10485
10486
|
var _templateObject$1a;
|
|
@@ -11915,17 +11916,17 @@ var Wrapper$9 = /*#__PURE__*/styled('div')(_templateObject$1n || (_templateObjec
|
|
|
11915
11916
|
return "var(--color-" + theme + ")";
|
|
11916
11917
|
});
|
|
11917
11918
|
var SignUpFormWrapper = /*#__PURE__*/styled(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);
|
|
11918
|
-
var SignUpTitleWrapper = /*#__PURE__*/styled('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-
|
|
11919
|
-
var Error$1 = /*#__PURE__*/styled.div(_templateObject4$I || (_templateObject4$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-top: 20px;\n color: var(--base-
|
|
11919
|
+
var SignUpTitleWrapper = /*#__PURE__*/styled('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);
|
|
11920
|
+
var Error$1 = /*#__PURE__*/styled.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"])));
|
|
11920
11921
|
var Form = /*#__PURE__*/styled.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);
|
|
11921
11922
|
var FormFooterWrapper = /*#__PURE__*/styled.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);
|
|
11922
|
-
var ServerError = /*#__PURE__*/styled.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--base-
|
|
11923
|
-
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n
|
|
11924
|
-
var ButtonWrapper$3 = /*#__PURE__*/styled.button(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n\n @media ", " {\n width: 100%;\n }\n
|
|
11923
|
+
var ServerError = /*#__PURE__*/styled.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
|
|
11924
|
+
var CTALinkWrapper = /*#__PURE__*/styled.a(_templateObject8$f || (_templateObject8$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-decoration: none;\n\n @media ", " {\n text-decoration: underline;\n }\n"])), devices.mobile);
|
|
11925
|
+
var ButtonWrapper$3 = /*#__PURE__*/styled.button(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
|
|
11925
11926
|
var FieldsWrapper = /*#__PURE__*/styled.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);
|
|
11926
11927
|
var MessageWrapper$1 = /*#__PURE__*/styled.div(_templateObject11$6 || (_templateObject11$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
|
|
11927
11928
|
var DropdownAreaWrapper = /*#__PURE__*/styled.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"])));
|
|
11928
|
-
var DropdownWrapper = /*#__PURE__*/styled.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-
|
|
11929
|
+
var DropdownWrapper = /*#__PURE__*/styled.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) {
|
|
11929
11930
|
var _ref3$isOpen = _ref3.isOpen,
|
|
11930
11931
|
isOpen = _ref3$isOpen === void 0 ? false : _ref3$isOpen;
|
|
11931
11932
|
return isOpen ? '180deg' : '0deg';
|
|
@@ -11933,6 +11934,54 @@ var DropdownWrapper = /*#__PURE__*/styled.div(_templateObject13$4 || (_templateO
|
|
|
11933
11934
|
var HiddenInstructions = /*#__PURE__*/styled.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"])));
|
|
11934
11935
|
var SignUpHeader = /*#__PURE__*/styled(Grid)(_templateObject15$3 || (_templateObject15$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-column: 1 / -1;\n row-gap: 0;\n"])));
|
|
11935
11936
|
|
|
11937
|
+
var themeToColor = function themeToColor(theme) {
|
|
11938
|
+
switch (theme) {
|
|
11939
|
+
case ThemeType.Core:
|
|
11940
|
+
return ThemeColor['primary-red'];
|
|
11941
|
+
case ThemeType.Stream:
|
|
11942
|
+
return ThemeColor['base-black'];
|
|
11943
|
+
case ThemeType.Cinema:
|
|
11944
|
+
return ThemeColor['primary-black'];
|
|
11945
|
+
default:
|
|
11946
|
+
return ThemeColor['primary-red'];
|
|
11947
|
+
}
|
|
11948
|
+
};
|
|
11949
|
+
|
|
11950
|
+
var SignUpTitle = function SignUpTitle(_ref) {
|
|
11951
|
+
var title = _ref.title,
|
|
11952
|
+
_ref$isMobile = _ref.isMobile,
|
|
11953
|
+
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
|
|
11954
|
+
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
11955
|
+
columnStartDesktop: 3,
|
|
11956
|
+
columnSpanDesktop: 10,
|
|
11957
|
+
columnStartDevice: 2,
|
|
11958
|
+
columnSpanDevice: 12
|
|
11959
|
+
}, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
11960
|
+
color: "black",
|
|
11961
|
+
hierarchy: "h3",
|
|
11962
|
+
serif: true,
|
|
11963
|
+
size: isMobile ? 'small' : 'medium'
|
|
11964
|
+
}, title)));
|
|
11965
|
+
};
|
|
11966
|
+
|
|
11967
|
+
var SignUpMessage = function SignUpMessage(_ref) {
|
|
11968
|
+
var message = _ref.message,
|
|
11969
|
+
_ref$withDropdown = _ref.withDropdown,
|
|
11970
|
+
withDropdown = _ref$withDropdown === void 0 ? false : _ref$withDropdown;
|
|
11971
|
+
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
11972
|
+
columnStartDesktop: 3,
|
|
11973
|
+
columnSpanDesktop: 10,
|
|
11974
|
+
columnStartDevice: 2,
|
|
11975
|
+
columnSpanDevice: withDropdown ? 11 : 12
|
|
11976
|
+
}, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
11977
|
+
size: "large"
|
|
11978
|
+
}, /*#__PURE__*/React__default.createElement("div", {
|
|
11979
|
+
dangerouslySetInnerHTML: {
|
|
11980
|
+
__html: message
|
|
11981
|
+
}
|
|
11982
|
+
}))));
|
|
11983
|
+
};
|
|
11984
|
+
|
|
11936
11985
|
var regex = {
|
|
11937
11986
|
signInEmail:
|
|
11938
11987
|
// eslint-disable-next-line max-len
|
|
@@ -11978,65 +12027,33 @@ var getFormErrorMessage = function getFormErrorMessage(field, value) {
|
|
|
11978
12027
|
return errorMessage;
|
|
11979
12028
|
};
|
|
11980
12029
|
|
|
11981
|
-
var
|
|
11982
|
-
|
|
11983
|
-
|
|
11984
|
-
|
|
11985
|
-
|
|
11986
|
-
return ThemeColor['base-black'];
|
|
11987
|
-
case ThemeType.Cinema:
|
|
11988
|
-
return ThemeColor['primary-black'];
|
|
11989
|
-
default:
|
|
11990
|
-
return ThemeColor['primary-red'];
|
|
12030
|
+
var BUTTON_TEXT = 'Sign up';
|
|
12031
|
+
var SignUpFormButton = function SignUpFormButton(_ref) {
|
|
12032
|
+
var theme = _ref.theme;
|
|
12033
|
+
if (theme === ThemeType.Core) {
|
|
12034
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButton, null, BUTTON_TEXT);
|
|
11991
12035
|
}
|
|
11992
|
-
|
|
11993
|
-
|
|
11994
|
-
|
|
11995
|
-
|
|
12036
|
+
return /*#__PURE__*/React__default.createElement(PrimaryButton, {
|
|
12037
|
+
textColor: ThemeColor['base-white'],
|
|
12038
|
+
backgroundColor: ThemeColor['base-black'],
|
|
12039
|
+
hoveredColor: ThemeColor['black-hovered'],
|
|
12040
|
+
pressedColor: ThemeColor['black-pressed']
|
|
12041
|
+
}, BUTTON_TEXT);
|
|
12042
|
+
};
|
|
12043
|
+
|
|
12044
|
+
var SignUpForm = function SignUpForm(_ref) {
|
|
12045
|
+
var submitHandler = _ref.submitHandler,
|
|
12046
|
+
errorMessage = _ref.errorMessage,
|
|
12047
|
+
ctaPrivacy = _ref.ctaPrivacy,
|
|
12048
|
+
theme = _ref.theme,
|
|
12049
|
+
isSuccess = _ref.isSuccess,
|
|
12050
|
+
setIsSuccess = _ref.setIsSuccess,
|
|
12051
|
+
formValues = _ref.formValues,
|
|
12052
|
+
setFormValues = _ref.setFormValues,
|
|
12053
|
+
_ref$isLoggedIn = _ref.isLoggedIn,
|
|
12054
|
+
isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
|
|
11996
12055
|
_ref$isMobile = _ref.isMobile,
|
|
11997
12056
|
isMobile = _ref$isMobile === void 0 ? false : _ref$isMobile;
|
|
11998
|
-
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
11999
|
-
columnStartDesktop: 3,
|
|
12000
|
-
columnSpanDesktop: 10,
|
|
12001
|
-
columnStartDevice: 2,
|
|
12002
|
-
columnSpanDevice: 12
|
|
12003
|
-
}, /*#__PURE__*/React__default.createElement(SignUpTitleWrapper, null, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
|
|
12004
|
-
color: "black",
|
|
12005
|
-
hierarchy: "h3",
|
|
12006
|
-
serif: true,
|
|
12007
|
-
size: isMobile ? 'small' : 'medium'
|
|
12008
|
-
}, title)));
|
|
12009
|
-
};
|
|
12010
|
-
var SignUpMessage = function SignUpMessage(_ref2) {
|
|
12011
|
-
var message = _ref2.message,
|
|
12012
|
-
_ref2$withDropdown = _ref2.withDropdown,
|
|
12013
|
-
withDropdown = _ref2$withDropdown === void 0 ? false : _ref2$withDropdown;
|
|
12014
|
-
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
12015
|
-
columnStartDesktop: 3,
|
|
12016
|
-
columnSpanDesktop: 10,
|
|
12017
|
-
columnStartDevice: 2,
|
|
12018
|
-
columnSpanDevice: withDropdown ? 11 : 12
|
|
12019
|
-
}, /*#__PURE__*/React__default.createElement(MessageWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
12020
|
-
size: "large"
|
|
12021
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
12022
|
-
dangerouslySetInnerHTML: {
|
|
12023
|
-
__html: message
|
|
12024
|
-
}
|
|
12025
|
-
}))));
|
|
12026
|
-
};
|
|
12027
|
-
var SignUpForm = function SignUpForm(_ref3) {
|
|
12028
|
-
var submitHandler = _ref3.submitHandler,
|
|
12029
|
-
errorMessage = _ref3.errorMessage,
|
|
12030
|
-
ctaPrivacy = _ref3.ctaPrivacy,
|
|
12031
|
-
theme = _ref3.theme,
|
|
12032
|
-
isSuccess = _ref3.isSuccess,
|
|
12033
|
-
setIsSuccess = _ref3.setIsSuccess,
|
|
12034
|
-
formValues = _ref3.formValues,
|
|
12035
|
-
setFormValues = _ref3.setFormValues,
|
|
12036
|
-
_ref3$isLoggedIn = _ref3.isLoggedIn,
|
|
12037
|
-
isLoggedIn = _ref3$isLoggedIn === void 0 ? false : _ref3$isLoggedIn,
|
|
12038
|
-
_ref3$isMobile = _ref3.isMobile,
|
|
12039
|
-
isMobile = _ref3$isMobile === void 0 ? false : _ref3$isMobile;
|
|
12040
12057
|
var _useState = useState({}),
|
|
12041
12058
|
errors = _useState[0],
|
|
12042
12059
|
setErrors = _useState[1];
|
|
@@ -12066,7 +12083,7 @@ var SignUpForm = function SignUpForm(_ref3) {
|
|
|
12066
12083
|
};
|
|
12067
12084
|
};
|
|
12068
12085
|
var handleFormSubmit = /*#__PURE__*/function () {
|
|
12069
|
-
var
|
|
12086
|
+
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
|
|
12070
12087
|
var formErrors, response;
|
|
12071
12088
|
return _regeneratorRuntime().wrap(function _callee$(_context) {
|
|
12072
12089
|
while (1) switch (_context.prev = _context.next) {
|
|
@@ -12121,7 +12138,7 @@ var SignUpForm = function SignUpForm(_ref3) {
|
|
|
12121
12138
|
}, _callee);
|
|
12122
12139
|
}));
|
|
12123
12140
|
return function handleFormSubmit(_x) {
|
|
12124
|
-
return
|
|
12141
|
+
return _ref2.apply(this, arguments);
|
|
12125
12142
|
};
|
|
12126
12143
|
}();
|
|
12127
12144
|
return /*#__PURE__*/React__default.createElement(GridItem, {
|
|
@@ -12184,45 +12201,47 @@ var SignUpForm = function SignUpForm(_ref3) {
|
|
|
12184
12201
|
size: "small"
|
|
12185
12202
|
}, ctaPrivacy.text)), /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
|
|
12186
12203
|
type: "submit"
|
|
12187
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
12188
|
-
|
|
12189
|
-
}
|
|
12204
|
+
}, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
12205
|
+
theme: theme
|
|
12206
|
+
})))) : (/*#__PURE__*/React__default.createElement(FormFooterWrapper, null, /*#__PURE__*/React__default.createElement(ButtonWrapper$3, {
|
|
12190
12207
|
type: "submit"
|
|
12191
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
12192
|
-
|
|
12193
|
-
}
|
|
12208
|
+
}, /*#__PURE__*/React__default.createElement(SignUpFormButton, {
|
|
12209
|
+
theme: theme
|
|
12210
|
+
})), /*#__PURE__*/React__default.createElement(CTALinkWrapper, {
|
|
12194
12211
|
href: ctaPrivacy.link
|
|
12195
12212
|
}, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
|
|
12196
|
-
size: "
|
|
12213
|
+
size: "medium"
|
|
12197
12214
|
}, ctaPrivacy.text))))));
|
|
12198
12215
|
};
|
|
12199
|
-
|
|
12200
|
-
|
|
12201
|
-
|
|
12202
|
-
|
|
12203
|
-
|
|
12204
|
-
|
|
12205
|
-
|
|
12206
|
-
|
|
12207
|
-
|
|
12208
|
-
|
|
12216
|
+
|
|
12217
|
+
/* eslint-disable react/no-danger */
|
|
12218
|
+
var SignUpFormComponent = function SignUpFormComponent(_ref) {
|
|
12219
|
+
var initialState = _ref.initialState,
|
|
12220
|
+
submittedState = _ref.submittedState,
|
|
12221
|
+
ctaPrivacy = _ref.ctaPrivacy,
|
|
12222
|
+
theme = _ref.theme,
|
|
12223
|
+
errorMessage = _ref.errorMessage,
|
|
12224
|
+
_ref$isLoggedIn = _ref.isLoggedIn,
|
|
12225
|
+
isLoggedIn = _ref$isLoggedIn === void 0 ? false : _ref$isLoggedIn,
|
|
12226
|
+
className = _ref.className,
|
|
12227
|
+
submitHandler = _ref.submitHandler;
|
|
12209
12228
|
var signUpHeaderId = 'signup-header';
|
|
12210
12229
|
var signUpInstructionsId = 'sign-up-instructions';
|
|
12211
12230
|
var isMobile = useMobile();
|
|
12231
|
+
var _useState = useState(false),
|
|
12232
|
+
isSuccess = _useState[0],
|
|
12233
|
+
setIsSuccess = _useState[1];
|
|
12212
12234
|
var _useState2 = useState(false),
|
|
12213
|
-
|
|
12214
|
-
|
|
12215
|
-
var _useState3 = useState(false),
|
|
12216
|
-
dropdownOpen = _useState3[0],
|
|
12217
|
-
setDropdownOpen = _useState3[1];
|
|
12235
|
+
dropdownOpen = _useState2[0],
|
|
12236
|
+
setDropdownOpen = _useState2[1];
|
|
12218
12237
|
var successRef = useRef(null);
|
|
12219
|
-
var
|
|
12238
|
+
var _useState3 = useState({
|
|
12220
12239
|
firstName: '',
|
|
12221
12240
|
lastName: '',
|
|
12222
12241
|
email: ''
|
|
12223
12242
|
}),
|
|
12224
|
-
formValues =
|
|
12225
|
-
setFormValues =
|
|
12243
|
+
formValues = _useState3[0],
|
|
12244
|
+
setFormValues = _useState3[1];
|
|
12226
12245
|
useEffect(function () {
|
|
12227
12246
|
if (isMobile && !isLoggedIn && isSuccess && successRef.current) {
|
|
12228
12247
|
successRef.current.scrollIntoView({
|