@royaloperahouse/harmonic 0.4.1-h → 0.4.1-j

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 (11) hide show
  1. package/dist/components/atoms/ControlledDropdown/ControlledDropdown.d.ts +2 -2
  2. package/dist/components/atoms/ControlledDropdown/ControlledDropdown.style.d.ts +2 -2
  3. package/dist/components/molecules/PageHeading/PageHeading.style.d.ts +0 -1
  4. package/dist/harmonic.cjs.development.js +93 -62
  5. package/dist/harmonic.cjs.development.js.map +1 -1
  6. package/dist/harmonic.cjs.production.min.js +1 -1
  7. package/dist/harmonic.cjs.production.min.js.map +1 -1
  8. package/dist/harmonic.esm.js +94 -63
  9. package/dist/harmonic.esm.js.map +1 -1
  10. package/dist/types/types.d.ts +4 -0
  11. package/package.json +1 -1
package/dist/components/atoms/ControlledDropdown/ControlledDropdown.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { FunctionComponent } from 'react';
1
+ import React from 'react';
2
2
  import { IControlledDropdownProps } from '../../../types/types';
3
- declare const ControlledDropdown: FunctionComponent<IControlledDropdownProps>;
3
+ declare const ControlledDropdown: React.ForwardRefExoticComponent<IControlledDropdownProps & React.RefAttributes<HTMLDivElement>>;
4
4
  export default ControlledDropdown;
package/dist/components/atoms/ControlledDropdown/ControlledDropdown.style.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { IControlledDropdownHeaderProps } from '../../../types/types';
2
2
  export declare const ControlledDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const ControlledDropdownHeaderContainer: import("styled-components").StyledComponent<"span", any, IControlledDropdownHeaderProps, never>;
4
- export declare const ControlledDropdownHeaderContainerLink: import("styled-components").StyledComponent<"span", any, IControlledDropdownHeaderProps & {
3
+ export declare const ControlledDropdownHeaderContainer: import("styled-components").StyledComponent<"button", any, IControlledDropdownHeaderProps, never>;
4
+ export declare const ControlledDropdownHeaderContainerLink: import("styled-components").StyledComponent<"button", any, IControlledDropdownHeaderProps & {
5
5
  as: string;
6
6
  }, "as">;
7
7
  export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
package/dist/components/molecules/PageHeading/PageHeading.style.d.ts CHANGED
@@ -5,7 +5,6 @@ export declare const PageHeadingWrapper: import("styled-components").StyledCompo
5
5
  export declare const PageHeadingGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
6
6
  export declare const BadgeWrapper: import("styled-components").StyledComponent<"div", any, IPageHeadingWrapperProps, never>;
7
7
  export declare const TitleWrapper: import("styled-components").StyledComponent<"div", any, IPageHeadingWrapperProps, never>;
8
- export declare const HarmonicHeaderWithWrapper: import("styled-components").StyledComponent<({ children, size, em, color, serif, hierarchy: Tag, className, }: import("../../../types/typography").IHarmonicHeaderProps) => import("react").JSX.Element, any, {}, never>;
9
8
  export declare const ChildrenWrapper: import("styled-components").StyledComponent<"div", any, IPageHeadingWrapperProps, never>;
10
9
  export declare const TextWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
11
10
  export declare const LogoWrapper: import("styled-components").StyledComponent<"div", any, IPageHeadingWrapperProps, never>;
package/dist/harmonic.cjs.development.js CHANGED
@@ -2939,7 +2939,7 @@ var OptionsContainer = /*#__PURE__*/styled__default.div(_templateObject3 || (_te
2939
2939
 
2940
2940
  var _templateObject$7, _templateObject2$5, _templateObject3$1, _templateObject4;
2941
2941
  var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: fit-content;\n"])));
2942
- var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.span(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 6px;\n border-bottom: 1px solid transparent;\n height: 24px;\n line-height: 24px;\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--harmonic-letter-spacing-navigation);\n color: var(--color-primary-black);\n text-decoration: none;\n cursor: pointer;\n width: max-content;\n\n ", "\n"])), function (_ref) {
2942
+ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.button(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n\n display: flex;\n gap: 6px;\n border-bottom: 1px solid transparent;\n height: 24px;\n line-height: 24px;\n font-size: var(--harmonic-font-size-navigation);\n font-family: var(--font-family-sans);\n font-weight: var(--font-weight-navigation);\n letter-spacing: var(--harmonic-letter-spacing-navigation);\n color: var(--color-primary-black);\n text-decoration: none;\n cursor: pointer;\n width: max-content;\n\n &:focus {\n outline: 2px solid var(--color-primary-black);\n outline-offset: 2px;\n }\n\n ", "\n"])), function (_ref) {
2943
2943
  var active = _ref.active;
2944
2944
  if (active) {
2945
2945
  return "\n & {\n color: var(--color-primary-red);\n }\n && svg path {\n fill: var(--color-primary-red);\n } \n ";
@@ -2947,12 +2947,12 @@ var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.span(_templ
2947
2947
  return '';
2948
2948
  });
2949
2949
  var ControlledDropdownHeaderContainerLink = /*#__PURE__*/styled__default(ControlledDropdownHeaderContainer).attrs({
2950
- as: 'a'
2950
+ as: 'button'
2951
2951
  })(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
2952
2952
  var IconWrapper = /*#__PURE__*/styled__default.span(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 24px;\n height: 24px;\n\n span > svg path {\n fill: var(--color-primary-black);\n }\n"])));
2953
2953
 
2954
2954
  /* eslint-disable no-useless-return */
2955
- var ControlledDropdown = function ControlledDropdown(_ref) {
2955
+ var ControlledDropdown = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
2956
2956
  var text = _ref.text,
2957
2957
  options = _ref.options,
2958
2958
  active = _ref.active,
@@ -2960,32 +2960,22 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
2960
2960
  onOptionClick = _ref.onOptionClick,
2961
2961
  _onMouseEnter = _ref.onMouseEnter,
2962
2962
  _onMouseLeave = _ref.onMouseLeave,
2963
+ _onFocusLeave = _ref.onFocusLeave,
2963
2964
  onReset = _ref.onReset,
2964
2965
  _onFocus = _ref.onFocus,
2965
2966
  _onBlur = _ref.onBlur,
2966
2967
  className = _ref.className;
2967
- var ref = React.useRef();
2968
- var resetHandler = React.useCallback(function () {
2968
+ ControlledDropdown.displayName = 'ControlledDropdown';
2969
+ var internalRef = React.useRef(null);
2970
+ React.useImperativeHandle(ref, function () {
2971
+ return internalRef.current;
2972
+ });
2973
+ var resetHandler = function resetHandler() {
2969
2974
  return onReset == null ? void 0 : onReset();
2970
- }, []);
2971
- React.useEffect(function () {
2972
- if (window.innerWidth > breakpoints.sm) {
2973
- var mouseClickHandler = function mouseClickHandler(e) {
2974
- var _ref$current;
2975
- if (ref != null && (_ref$current = ref.current) != null && _ref$current.contains(e.target)) {
2976
- return;
2977
- } else if (active) {
2978
- resetHandler();
2979
- }
2980
- };
2981
- document.addEventListener('click', mouseClickHandler);
2982
- return function () {
2983
- document.removeEventListener('click', mouseClickHandler);
2984
- };
2985
- }
2986
- // eslint-disable-next-line consistent-return
2987
- return;
2988
- }, [ref, resetHandler, active]);
2975
+ };
2976
+ var isDropdown = React.useMemo(function () {
2977
+ return !!(options != null && options.length);
2978
+ }, [options]);
2989
2979
  var handleOptionKeyDown = function handleOptionKeyDown(e, link) {
2990
2980
  if (e.key === 'Enter') {
2991
2981
  onOptionClick == null || onOptionClick(link);
@@ -3005,13 +2995,15 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
3005
2995
  _onBlur == null || _onBlur();
3006
2996
  }
3007
2997
  };
3008
- var isDropdown = !!(options != null && options.length);
3009
2998
  var wrapperEvents = {
3010
2999
  onMouseEnter: function onMouseEnter() {
3011
3000
  return _onMouseEnter == null ? void 0 : _onMouseEnter();
3012
3001
  },
3013
3002
  onMouseLeave: function onMouseLeave() {
3014
3003
  return _onMouseLeave == null ? void 0 : _onMouseLeave();
3004
+ },
3005
+ onFocusLeave: function onFocusLeave() {
3006
+ return _onFocusLeave == null ? void 0 : _onFocusLeave();
3015
3007
  }
3016
3008
  };
3017
3009
  var headerEvents = {
@@ -3027,21 +3019,51 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
3027
3019
  },
3028
3020
  onKeyDown: handleHeaderKeyDown
3029
3021
  };
3022
+ React.useEffect(function () {
3023
+ var mouseEvent = function mouseEvent(e) {
3024
+ var _internalRef$current;
3025
+ if (internalRef != null && (_internalRef$current = internalRef.current) != null && _internalRef$current.contains(e.target)) return;
3026
+ if (active) resetHandler();
3027
+ };
3028
+ if (window.innerWidth > breakpoints.sm) {
3029
+ document.addEventListener('click', mouseEvent);
3030
+ }
3031
+ return function () {
3032
+ document.removeEventListener('click', mouseEvent);
3033
+ };
3034
+ }, [resetHandler, active]);
3035
+ React.useEffect(function () {
3036
+ var handleFocusOut = function handleFocusOut(e) {
3037
+ if (internalRef.current && !internalRef.current.contains(e.relatedTarget)) {
3038
+ _onFocusLeave == null || _onFocusLeave();
3039
+ }
3040
+ };
3041
+ var node = internalRef.current;
3042
+ if (node) node.addEventListener('focusout', handleFocusOut);
3043
+ return function () {
3044
+ return node == null ? void 0 : node.removeEventListener('focusout', handleFocusOut);
3045
+ };
3046
+ }, [_onFocusLeave]);
3030
3047
  return /*#__PURE__*/React__default.createElement(ControlledDropdownWrapper, Object.assign({
3031
- ref: ref
3048
+ ref: internalRef
3032
3049
  }, wrapperEvents, {
3033
3050
  className: className
3034
3051
  }), isDropdown ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainer, Object.assign({
3035
3052
  active: active
3036
3053
  }, headerEvents, {
3037
- tabIndex: 0,
3038
- "data-testid": "span-container"
3054
+ "data-testid": "span-container",
3055
+ role: "menuitem",
3056
+ "aria-controls": "dropdown-menu",
3057
+ "aria-haspopup": "menu",
3058
+ "aria-expanded": active
3039
3059
  }), text, /*#__PURE__*/React__default.createElement(IconWrapper, {
3040
3060
  "data-testid": "dropdown-icon"
3041
3061
  }, /*#__PURE__*/React__default.createElement(Icon, {
3042
3062
  iconName: "DropdownArrow"
3043
3063
  }))), active && options ? (/*#__PURE__*/React__default.createElement(OptionsContainer, {
3044
- withOptionsInMobile: true
3064
+ withOptionsInMobile: true,
3065
+ role: "menu",
3066
+ id: "dropdown-menu"
3045
3067
  }, options.map(function (optionItem, index) {
3046
3068
  return /*#__PURE__*/React__default.createElement(OptionItem, {
3047
3069
  key: "key-" + index + "-" + optionItem.option,
@@ -3055,15 +3077,17 @@ var ControlledDropdown = function ControlledDropdown(_ref) {
3055
3077
  onBlur: function onBlur() {
3056
3078
  return handleOptionBlur(index);
3057
3079
  },
3058
- href: optionItem.optionLink
3080
+ href: optionItem.optionLink,
3081
+ role: "menuitem"
3059
3082
  }, optionItem.option);
3060
3083
  }))) : null)) : (/*#__PURE__*/React__default.createElement(ControlledDropdownHeaderContainerLink, Object.assign({
3061
3084
  active: active
3062
3085
  }, headerEvents, {
3063
3086
  "data-testid": "link-container",
3087
+ role: "menuitem",
3064
3088
  tabIndex: 0
3065
3089
  }), text)));
3066
- };
3090
+ });
3067
3091
 
3068
3092
  var _templateObject$8;
3069
3093
  var Grid = /*#__PURE__*/styled__default.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-template-rows: max-content;\n gap: var(--grid-column-gap);\n margin: 0;\n"])));
@@ -5582,6 +5606,7 @@ var Tabs = function Tabs(_ref) {
5582
5606
  var _useState3 = React.useState(-1),
5583
5607
  hoverOverDropdown = _useState3[0],
5584
5608
  setHoverOverDropdown = _useState3[1];
5609
+ var dropdownRefs = React.useRef([]);
5585
5610
  var onClickHandler = function onClickHandler(value) {
5586
5611
  setOpenMenu(value);
5587
5612
  if (onShowMenu) {
@@ -5621,23 +5646,25 @@ var Tabs = function Tabs(_ref) {
5621
5646
  setHoverOverDropdown(-1);
5622
5647
  }
5623
5648
  };
5624
- var _onFocus = function onFocus(i) {
5625
- return setActiveDropdown(i);
5649
+ var onDropdownFocusLeave = function onDropdownFocusLeave() {
5650
+ onResetActive();
5626
5651
  };
5627
- var _onBlur = function onBlur(i) {
5628
- var _items$length;
5629
- if (i === ((_items$length = items == null ? void 0 : items.length) != null ? _items$length : 0) - 1) {
5652
+ var handleBlur = function handleBlur(index) {
5653
+ var currentDropdown = dropdownRefs.current[index];
5654
+ var active = document.activeElement;
5655
+ if (currentDropdown && (!active || !currentDropdown.contains(active))) {
5630
5656
  onResetActive();
5631
5657
  }
5632
5658
  };
5633
5659
  return /*#__PURE__*/React__default.createElement(TabsContainer, {
5660
+ role: "menubar",
5634
5661
  className: className
5635
5662
  }, /*#__PURE__*/React__default.createElement(ItemsContainer, {
5636
5663
  showMenu: showMenu
5637
5664
  }, items.map(function (item, index) {
5638
5665
  return /*#__PURE__*/React__default.createElement(ControlledDropdown, {
5639
5666
  key: "key-" + item.title,
5640
- text: item.title,
5667
+ text: item.title || '',
5641
5668
  options: item.options,
5642
5669
  onClick: function onClick() {
5643
5670
  return onDropdownClick(index, item.titleLink);
@@ -5649,14 +5676,17 @@ var Tabs = function Tabs(_ref) {
5649
5676
  onMouseLeave: function onMouseLeave() {
5650
5677
  return onDropdownMouseLeave();
5651
5678
  },
5652
- onFocus: function onFocus() {
5653
- return _onFocus(index);
5679
+ onFocusLeave: function onFocusLeave() {
5680
+ return onDropdownFocusLeave();
5654
5681
  },
5655
5682
  onBlur: function onBlur() {
5656
- return _onBlur(index);
5683
+ return handleBlur(index);
5657
5684
  },
5658
5685
  onReset: onResetActive,
5659
- active: isActiveDropdown(index)
5686
+ active: isActiveDropdown(index),
5687
+ ref: function ref(el) {
5688
+ dropdownRefs.current[index] = el;
5689
+ }
5660
5690
  });
5661
5691
  })), !showMenu && (/*#__PURE__*/React__default.createElement(MenuContainer$1, null, openMenu ? (/*#__PURE__*/React__default.createElement("a", {
5662
5692
  "data-testid": "mobile-menu-close",
@@ -8830,7 +8860,7 @@ var Information = function Information(_ref) {
8830
8860
  })))));
8831
8861
  };
8832
8862
 
8833
- var _templateObject$_, _templateObject2$L, _templateObject3$y, _templateObject4$t, _templateObject5$m, _templateObject6$h, _templateObject7$c, _templateObject8$8, _templateObject9$5;
8863
+ var _templateObject$_, _templateObject2$L, _templateObject3$y, _templateObject4$t, _templateObject5$m, _templateObject6$h, _templateObject7$c, _templateObject8$8;
8834
8864
  var PageHeadingWrapper = /*#__PURE__*/styled__default('div')(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 80px;\n background-color: var(--page-header-bg-color);\n color: var(--color-base-white);\n\n ", ";\n\n h1,\n h2,\n h3 {\n margin: 0;\n padding: 0;\n }\n\n @media ", " {\n padding-bottom: 0;\n }\n"])), function (_ref) {
8835
8865
  var isPageHeadingWithoutTitle = _ref.isPageHeadingWithoutTitle;
8836
8866
  return isPageHeadingWithoutTitle && "\n padding-bottom: 42px;\n ";
@@ -8844,20 +8874,19 @@ var TitleWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject4$t || (_te
8844
8874
  var isPageHeadingWithoutTitle = _ref3.isPageHeadingWithoutTitle;
8845
8875
  return isPageHeadingWithoutTitle && "\n margin-top: 42px;\n ";
8846
8876
  }, devices.mobile);
8847
- var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-text);\n"])));
8848
- var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 43px;\n\n ", ";\n\n @media ", " {\n & {\n height: 33px;\n margin-top: 10px;\n margin-bottom: 20px;\n }\n }\n"])), function (_ref4) {
8877
+ var ChildrenWrapper = /*#__PURE__*/styled__default.div(_templateObject5$m || (_templateObject5$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-bottom: 20px;\n width: fit-content;\n height: 43px;\n\n ", ";\n\n @media ", " {\n & {\n height: 33px;\n margin-top: 10px;\n margin-bottom: 20px;\n }\n }\n"])), function (_ref4) {
8849
8878
  var isPageHeadingWithoutTitle = _ref4.isPageHeadingWithoutTitle;
8850
8879
  return isPageHeadingWithoutTitle && "\n margin: 10px 0;\n ";
8851
8880
  }, devices.mobile);
8852
- var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
8853
- var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
8881
+ var TextWrapper = /*#__PURE__*/styled__default.div(_templateObject6$h || (_templateObject6$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n color: var(--color-base-white);\n grid-area: text;\n align-self: end;\n margin-top: 12px;\n\n h6 {\n margin: 0;\n padding: 0;\n }\n"])));
8882
+ var LogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$c || (_templateObject7$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: logo;\n justify-self: end;\n margin-top: 20px;\n position: relative;\n\n > div {\n position: absolute;\n top: 0;\n right: 0;\n }\n\n ", ";\n\n @media ", " {\n & {\n align-self: start;\n margin-top: 0;\n\n ", ";\n }\n }\n"])), function (_ref5) {
8854
8883
  var isPageHeadingWithoutTitle = _ref5.isPageHeadingWithoutTitle;
8855
8884
  return isPageHeadingWithoutTitle && "\n margin-top: 40px;\n ";
8856
8885
  }, devices.mobile, function (_ref6) {
8857
8886
  var isPageHeadingWithoutTitle = _ref6.isPageHeadingWithoutTitle;
8858
8887
  return isPageHeadingWithoutTitle && "\n margin-top: 15px;\n ";
8859
8888
  });
8860
- var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
8889
+ var ButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject8$8 || (_templateObject8$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n grid-area: button;\n justify-self: end;\n align-self: end;\n\n @media ", " {\n & {\n justify-self: center;\n align-self: center;\n width: 100%;\n margin-top: 16px;\n }\n }\n"])), devices.mobile);
8861
8890
 
8862
8891
  var PageHeading = function PageHeading(_ref) {
8863
8892
  var title = _ref.title,
@@ -8912,13 +8941,15 @@ var PageHeading = function PageHeading(_ref) {
8912
8941
  isPageHeadingWithoutTitle: isTitleUnAvailable
8913
8942
  }, renderBadge(theme), children ? (/*#__PURE__*/React__default.createElement(ChildrenWrapper, {
8914
8943
  isPageHeadingWithoutTitle: isTitleUnAvailable
8915
- }, children)) : null, !isTitleUnAvailable && (/*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
8944
+ }, children)) : null, !isTitleUnAvailable && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
8945
+ color: "white",
8916
8946
  size: "large",
8917
8947
  hierarchy: hierarchy
8918
8948
  }, truncatedTitle))), text ? (/*#__PURE__*/React__default.createElement(TextWrapper, {
8919
8949
  "data-testid": "page-heading-text"
8920
8950
  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
8921
8951
  color: "white",
8952
+ size: "large",
8922
8953
  dangerouslySetInnerHTML: {
8923
8954
  __html: truncatedText
8924
8955
  }
@@ -9045,7 +9076,7 @@ var PageHeadingPanel = function PageHeadingPanel(_ref) {
9045
9076
  })))));
9046
9077
  };
9047
9078
 
9048
- var _templateObject$11, _templateObject2$O, _templateObject3$B, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$e, _templateObject8$a, _templateObject9$6, _templateObject0$5, _templateObject1$3;
9079
+ var _templateObject$11, _templateObject2$O, _templateObject3$B, _templateObject4$w, _templateObject5$p, _templateObject6$j, _templateObject7$e, _templateObject8$a, _templateObject9$5, _templateObject0$5, _templateObject1$3;
9049
9080
  var Wrapper$5 = /*#__PURE__*/styled__default.section(_templateObject$11 || (_templateObject$11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
9050
9081
  var ImageWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n\n picture,\n img {\n width: 100%;\n height: 100%;\n }\n"])));
9051
9082
  var SponsorWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject3$B || (_templateObject3$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n top: 20px;\n right: var(--grid-outer-margin);\n width: fit-content;\n z-index: ", ";\n\n @media ", " {\n & {\n right: var(--grid-margin);\n }\n }\n"])), zIndexes.sponsorship, devices.mobileAndTablet);
@@ -9066,7 +9097,7 @@ var MainButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject8$a || (
9066
9097
  var isAdditionalButtonPresent = _ref4.isAdditionalButtonPresent;
9067
9098
  return isAdditionalButtonPresent ? '20px' : '0';
9068
9099
  });
9069
- var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$6 || (_templateObject9$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
9100
+ var AdditionalButtonWrapper = /*#__PURE__*/styled__default.div(_templateObject9$5 || (_templateObject9$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n @media ", " {\n width: 100%;\n display: flex;\n justify-content: center;\n }\n"])), devices.mobile);
9070
9101
  var TitleWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject0$5 || (_templateObject0$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: center;\n padding: 10px 0;\n\n h1,\n h2,\n h3 {\n color: ", ";\n }\n\n @media ", " {\n padding: 0;\n order: 2;\n margin-bottom: ", ";\n }\n"])), function (_ref5) {
9071
9102
  var theme = _ref5.theme;
9072
9103
  return theme == exports.ThemeType.Cinema ? 'var(--color-base-black)' : 'var(--color-base-white)';
@@ -9259,7 +9290,7 @@ var PageHeadingPromo = function PageHeadingPromo(_ref) {
9259
9290
  })))))))))));
9260
9291
  };
9261
9292
 
9262
- var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject5$q, _templateObject6$k, _templateObject7$f, _templateObject8$b, _templateObject9$7, _templateObject0$6;
9293
+ var _templateObject$12, _templateObject2$P, _templateObject3$C, _templateObject5$q, _templateObject6$k, _templateObject7$f, _templateObject8$b, _templateObject9$6, _templateObject0$6;
9263
9294
  var BrandingTextBlock = /*#__PURE__*/styled__default.div(_templateObject$12 || (_templateObject$12 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n font-size: var(--font-size-body-2);\n font-family: var(--font-family-header);\n text-transform: uppercase;\n margin: 0;\n white-space: nowrap;\n @media screen and (max-width: 920px) {\n white-space: normal;\n }\n @media ", " {\n white-space: nowrap;\n }\n"])), devices.mobile);
9264
9295
  var BrandingTextBody = /*#__PURE__*/styled__default.div(_templateObject2$P || (_templateObject2$P = /*#__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"])));
9265
9296
  var ComapctHeaderWrapper = /*#__PURE__*/styled__default.div(_templateObject3$C || (_templateObject3$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n display: block;\n"])));
@@ -9282,7 +9313,7 @@ var CompactHeaderCopyWrapper = /*#__PURE__*/styled__default(Grid)(_templateObjec
9282
9313
  }, devices.tablet, devices.mobile);
9283
9314
  var CompactHeaderLogoWrapper = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__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);
9284
9315
  var CompactHeaderTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject8$b || (_templateObject8$b = /*#__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);
9285
- var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__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);
9316
+ var CompactHeaderCTAWrapper = /*#__PURE__*/styled__default.div(_templateObject9$6 || (_templateObject9$6 = /*#__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);
9286
9317
  var PrimaryButtonWithInversion = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject0$6 || (_templateObject0$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n min-width: 145px;\n"])), function (_ref5) {
9287
9318
  var invert = _ref5.invert,
9288
9319
  theme = _ref5.theme;
@@ -9776,7 +9807,7 @@ var CreditListing = function CreditListing(_ref) {
9776
9807
  }, creditEntries);
9777
9808
  };
9778
9809
 
9779
- var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$A, _templateObject5$s, _templateObject6$m, _templateObject7$h, _templateObject8$c, _templateObject9$8, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
9810
+ var _templateObject$16, _templateObject2$T, _templateObject3$G, _templateObject4$A, _templateObject5$s, _templateObject6$m, _templateObject7$h, _templateObject8$c, _templateObject9$7, _templateObject0$7, _templateObject1$4, _templateObject10$3, _templateObject11$3, _templateObject12$3, _templateObject13$2, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
9780
9811
  var LENGTH_TEXT = 28;
9781
9812
  var LENGTH_TEXT_TABLET$1 = 12;
9782
9813
  var GridTemplateImageToLeft = "'left left left left left left left left . right right right right right . .'";
@@ -9826,7 +9857,7 @@ var PromoWithTagsTagWrapper = /*#__PURE__*/styled__default.div(_templateObject5$
9826
9857
  var PromoWithTagsAdditionalText = /*#__PURE__*/styled__default(PromoWithTagsText)(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 24px 0;\n"])));
9827
9858
  var TextLinksContainer = /*#__PURE__*/styled__default.div(_templateObject7$h || (_templateObject7$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n margin: 24px 0 4px 0;\n"])));
9828
9859
  var TextLinkWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin-right: 24px;\n margin-bottom: 20px;\n\n &:last-child {\n margin-right: 0;\n }\n"])));
9829
- var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
9860
+ var ExtraContentWrapper = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n padding-right: 68px;\n\n iframe {\n height: 800px;\n }\n\n @media ", " {\n padding: 30px 0 0;\n }\n\n @media ", " {\n padding: 0;\n position: initial;\n }\n"])), devices.tablet, devices.mobile);
9830
9861
  var IconWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject0$7 || (_templateObject0$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: absolute;\n top: 25px;\n right: 35px;\n width: 24px;\n height: 24px;\n\n @media ", " {\n top: 30px;\n right: 30px;\n }\n\n @media ", " {\n top: 3px;\n right: 20px;\n }\n"])), devices.tablet, devices.mobile);
9831
9862
  var PrimaryButtonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$4 || (_templateObject1$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n height: var(--button-height);\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
9832
9863
  var MobileTitleWrapper = /*#__PURE__*/styled__default.div(_templateObject10$3 || (_templateObject10$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: none;\n margin: 0 50px 0 20px;\n\n h2,\n h3 {\n margin: 0;\n }\n\n @media ", " {\n display: block;\n }\n"])), devices.mobile);
@@ -10046,7 +10077,7 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
10046
10077
  var imageToLeft = _ref4.imageToLeft;
10047
10078
  return imageToLeft ? 'right' : 'left';
10048
10079
  }, devices.mobile);
10049
- var HarmonicHeaderWithWrapper$1 = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
10080
+ var HarmonicHeaderWithWrapper = /*#__PURE__*/styled__default(HarmonicHeader)(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding-bottom: 32px;\n\n @media ", " {\n padding-bottom: 24px;\n }\n"])), devices.mobile);
10050
10081
  var HarmonicSubtitleWithWrapper = /*#__PURE__*/styled__default(HarmonicSubtitle)(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-wrap: break-word;\n margin-bottom: 16px;\n"])));
10051
10082
  var BodyCopyHarmonicWithWrapper$1 = /*#__PURE__*/styled__default(BodyCopyHarmonic)(_templateObject6$n || (_templateObject6$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n padding: 0;\n margin: 0;\n margin-bottom: 32px;\n whiete-space: break-spaces;\n overflow-wrap: break-word;\n\n a {\n text-decoration: underline;\n cursor: pointer;\n\n &[href^='tel:'] {\n text-decoration: none;\n }\n\n &:link {\n color: var(--color-primary-black);\n }\n\n &:visited {\n color: var(--color-base-dark-grey);\n }\n\n &:hover {\n color: var(--color-primary-red);\n }\n }\n @media ", " {\n margin-bottom: 24px;\n }\n"])), devices.mobile);
10052
10083
  var ButtonsContainer$3 = /*#__PURE__*/styled__default.div(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n gap: 16px;\n margin-top: 32px;\n\n ", "\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n flex-direction: column;\n align-items: center;\n }\n\n @media ", " {\n gap: 24px;\n margin-top: 24px;\n align-items: flex-start;\n\n ", "\n }\n"])), function (_ref5) {
@@ -10234,7 +10265,7 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
10234
10265
  }, children), /*#__PURE__*/React__default.createElement(PromoWithTitleContentWrapper, {
10235
10266
  "data-testid": "content-wrapper",
10236
10267
  imageToLeft: imageToLeft
10237
- }, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper$1, {
10268
+ }, /*#__PURE__*/React__default.createElement(HarmonicHeaderWithWrapper, {
10238
10269
  size: titleSize,
10239
10270
  hierarchy: titleHierarchy
10240
10271
  }, title), subtitle ? /*#__PURE__*/React__default.createElement(HarmonicSubtitleWithWrapper, {
@@ -10482,7 +10513,7 @@ var SectionTitle = function SectionTitle(_ref) {
10482
10513
  }, description)))));
10483
10514
  };
10484
10515
 
10485
- var _templateObject$1d, _templateObject2$X, _templateObject3$K, _templateObject4$C, _templateObject5$u, _templateObject6$o, _templateObject7$j, _templateObject8$d, _templateObject9$9, _templateObject0$8, _templateObject1$5;
10516
+ var _templateObject$1d, _templateObject2$X, _templateObject3$K, _templateObject4$C, _templateObject5$u, _templateObject6$o, _templateObject7$j, _templateObject8$d, _templateObject9$8, _templateObject0$8, _templateObject1$5;
10486
10517
  var stateStyles = /*#__PURE__*/styled.css(_templateObject$1d || (_templateObject$1d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n &:focus,\n &.focus {\n outline: ", ";\n }\n\n &.disabled {\n background-color: ", ";\n color: ", ";\n pointer-events: none;\n cursor: none;\n }\n"])), function (_ref) {
10487
10518
  var theme = _ref.theme;
10488
10519
  return "3px solid " + theme.colors.lapisLazuli;
@@ -10510,7 +10541,7 @@ var ArrowIcon = /*#__PURE__*/styled__default(Icon).attrs(function (_ref5) {
10510
10541
  var Wrapper$6 = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: initial;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n"])), noMarginAndPaddingStyles);
10511
10542
  var SelectWrapper = /*#__PURE__*/styled__default.div(_templateObject7$j || (_templateObject7$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n height: inherit;\n"])), noMarginAndPaddingStyles);
10512
10543
  var Options = /*#__PURE__*/styled__default.div(_templateObject8$d || (_templateObject8$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n z-index: 1;\n\n ", "\n ", "\n"])), noMarginAndPaddingStyles, borderStyles);
10513
- var Option = /*#__PURE__*/styled__default.li(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
10544
+ var Option = /*#__PURE__*/styled__default.li(_templateObject9$8 || (_templateObject9$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n ", "\n ", "\n\n ", "\n"])), noMarginAndPaddingStyles, listItemStyles, function (_ref6) {
10514
10545
  var theme = _ref6.theme,
10515
10546
  hover = _ref6.hover;
10516
10547
  var _theme$colors = theme.colors,
@@ -11471,7 +11502,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
11471
11502
  }, strengthLabel))));
11472
11503
  };
11473
11504
 
11474
- var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$I, _templateObject5$z, _templateObject6$r, _templateObject7$k, _templateObject8$e, _templateObject9$a, _templateObject0$9;
11505
+ var _templateObject$1l, _templateObject2$13, _templateObject3$R, _templateObject4$I, _templateObject5$z, _templateObject6$r, _templateObject7$k, _templateObject8$e, _templateObject9$9, _templateObject0$9;
11475
11506
  var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1l || (_templateObject$1l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n border-collapse: collapse;\n"])));
11476
11507
  var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$13 || (_templateObject2$13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n overflow-x: auto;\n"])));
11477
11508
  var Wrapper$8 = /*#__PURE__*/styled__default.div(_templateObject3$R || (_templateObject3$R = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
@@ -11491,7 +11522,7 @@ var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject7$k || (_t
11491
11522
  return active === 'true' && "\n color: var(--base-color-core);\n border-bottom: 1px solid var(--base-color-core);\n ";
11492
11523
  });
11493
11524
  var Next = /*#__PURE__*/styled__default.span(_templateObject8$e || (_templateObject8$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: inline-flex;\n width: 25px;\n align-items: center;\n justify-content: center;\n margin-left: 0;\n span {\n height: 1.5em;\n svg > path {\n fill: var(--base-color-dark-grey);\n }\n }\n"])));
11494
- var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n\n div:hover {\n background-color: var(--base-color-light-grey);\n }\n\n > div > div {\n background-color: var(--base-color-light-grey);\n }\n\n svg path {\n fill: var(--base-color-black) !important;\n }\n"])));
11525
+ var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject9$9 || (_templateObject9$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: flex-end;\n padding: 0 0 24px 0;\n\n div:hover {\n background-color: var(--base-color-light-grey);\n }\n\n > div > div {\n background-color: var(--base-color-light-grey);\n }\n\n svg path {\n fill: var(--base-color-black) !important;\n }\n"])));
11495
11526
  var AriaDescription$2 = /*#__PURE__*/styled__default.span(_templateObject0$9 || (_templateObject0$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n left: -9999px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n"])));
11496
11527
 
11497
11528
  /* eslint-disable react/no-danger */
@@ -11675,7 +11706,7 @@ var Table = function Table(_ref) {
11675
11706
  }))))))))));
11676
11707
  };
11677
11708
 
11678
- var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$J, _templateObject5$A, _templateObject6$s, _templateObject7$l, _templateObject8$f, _templateObject9$b, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
11709
+ var _templateObject$1m, _templateObject2$14, _templateObject3$S, _templateObject4$J, _templateObject5$A, _templateObject6$s, _templateObject7$l, _templateObject8$f, _templateObject9$a, _templateObject0$a, _templateObject1$6, _templateObject10$4, _templateObject11$4, _templateObject12$4, _templateObject13$3;
11679
11710
  var Wrapper$9 = /*#__PURE__*/styled__default('div')(_templateObject$1m || (_templateObject$1m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n border-top: 4px solid ", ";\n border-bottom: 4px solid ", ";\n"])), function (_ref) {
11680
11711
  var theme = _ref.theme;
11681
11712
  return "var(--color-" + theme + ")";
@@ -11690,7 +11721,7 @@ var Form = /*#__PURE__*/styled__default.form(_templateObject5$A || (_templateObj
11690
11721
  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);
11691
11722
  var ServerError = /*#__PURE__*/styled__default.div(_templateObject7$l || (_templateObject7$l = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n text-align: left;\n color: var(--color-base-errorstate);\n"])));
11692
11723
  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);
11693
- var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$b || (_templateObject9$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
11724
+ var ButtonWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject9$a || (_templateObject9$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n all: unset;\n width: fit-content;\n color: var(--base-color-white);\n text-decoration: none;\n\n @media ", " {\n width: 100%;\n }\n"])), devices.mobile);
11694
11725
  var FieldsWrapper = /*#__PURE__*/styled__default.div(_templateObject0$a || (_templateObject0$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);
11695
11726
  var MessageWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject1$6 || (_templateObject1$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n div > p {\n margin: 0;\n }\n"])));
11696
11727
  var DropdownAreaWrapper = /*#__PURE__*/styled__default.div(_templateObject10$4 || (_templateObject10$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"])));