@royaloperahouse/harmonic 0.18.3-b → 0.18.3-d

package/dist/harmonic.cjs.development.js

@@ -8,7 +8,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
-var dateFns = require('date-fns');
+var moment = _interopDefault(require('moment'));
 var server = require('react-dom/server');
 var Select$1 = require('react-select');
 var Select$1__default = _interopDefault(Select$1);
@@ -2152,55 +2152,6 @@ var OpenCaptions = (function (_ref) {
   }));
 });
 
-var Captioned = (function (_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
-    ariaLabel = _ref.ariaLabel;
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "100%",
-    height: "100%",
-    viewBox: "0 0 25 25",
-    fill: "none",
-    "aria-label": ariaLabel
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
-    fill: color
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M9.23998 12.89C9.23998 13.43 9.12999 13.91 8.87999 14.29C8.53999 14.83 7.92999 15.12 7.17999 15.12C6.33999 15.12 5.63998 14.71 5.23998 13.91C4.98998 13.41 4.85999 12.76 4.85999 12.01C4.85999 10.12 5.68999 8.91 7.18999 8.91C8.28999 8.91 9.06998 9.71 9.06998 10.85C9.06998 10.94 9.06999 11.14 9.03999 11.25L8.06998 11.29C8.08998 11.21 8.09999 11.06 8.09999 10.92C8.09999 10.31 7.79999 9.8 7.18999 9.8C6.35999 9.8 5.92999 10.68 5.92999 12.01C5.92999 12.53 5.98999 12.98 6.11999 13.34C6.28999 13.82 6.59999 14.22 7.18999 14.22C7.93999 14.22 8.30999 13.71 8.34999 12.69L9.24999 12.74V12.88L9.23998 12.89Z",
-    fill: color
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M13.31 15L12.94 13.77H10.99L10.62 15H9.59998L11.47 9.05H12.49L14.36 15H13.3H13.31ZM12.27 11.56C12.16 11.21 12.07 10.91 11.97 10.52C11.86 10.92 11.77 11.25 11.67 11.56L11.25 12.92H12.68L12.26 11.56H12.27Z",
-    fill: color
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M15.17 15V9.05H17.27C17.88 9.05 18.27 9.21 18.56 9.47C18.93 9.8 19.12 10.29 19.12 10.83C19.12 11.37 18.92 11.86 18.56 12.19C18.27 12.45 17.88 12.61 17.27 12.61H16.23V14.99H15.17V15ZM17.11 11.73C17.52 11.73 17.71 11.64 17.84 11.48C17.98 11.32 18.06 11.09 18.06 10.83C18.06 10.57 17.98 10.35 17.84 10.18C17.71 10.03 17.52 9.93 17.11 9.93H16.23V11.72H17.11V11.73Z",
-    fill: color
-  }));
-});
-
-var FamilyFriendly = (function (_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
-    ariaLabel = _ref.ariaLabel;
-  return /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "100%",
-    height: "100%",
-    viewBox: "0 0 25 25",
-    fill: "none",
-    "aria-label": ariaLabel
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M21 5V19H3V5H21ZM22 4H2V20H22V4Z",
-    fill: color
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M8.21 15V9.04999H11.57V9.93999H9.28V11.64H10.89V12.49H9.28V15H8.22H8.21Z",
-    fill: color
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M12.48 15V9.04999H15.84V9.93999H13.55V11.64H15.16V12.49H13.55V15H12.49H12.48Z",
-    fill: color
-  }));
-});
-
 var Forward10 = (function (_ref) {
   var _ref$color = _ref.color,
     color = _ref$color === void 0 ? '#1A1A1A' : _ref$color,
@@ -2506,7 +2457,6 @@ var IconLibrary = {
   Clips: Clips,
   Clock: Clock,
   Close: Close,
-  Captioned: Captioned,
   ClosedCaptions: ClosedCaptions,
   Confirm: Confirm,
   CreditCard: CreditCard,
@@ -2519,7 +2469,6 @@ var IconLibrary = {
   Expand12px: Expand12px,
   ExternalLink: ExternalLink,
   Facebook: Facebook,
-  FamilyFriendly: FamilyFriendly,
   Favourite: Favourite,
   FavouriteFull: FavouriteFull,
   Filter: Filter,
@@ -3875,7 +3824,6 @@ var Tab = function Tab(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
-    tabLinkId = _ref.tabLinkId,
     color = _ref.color,
     dataTestId = _ref.dataTestId,
     isOpen = _ref.isOpen;
@@ -3910,9 +3858,8 @@ var Tab = function Tab(_ref) {
     className: className,
     "data-testid": dataTestId
   }, /*#__PURE__*/React__default.createElement(TabText, {
-    id: tabLinkId,
-    trimText: trimText,
     color: color,
+    trimText: trimText,
     withTextInMobile: withTextInMobile,
     "aria-hidden": "true"
   }, title), withIcon !== 'none' && /*#__PURE__*/React__default.createElement(Icon, {
@@ -4597,31 +4544,6 @@ var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 ||
 var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7$1 || (_templateObject7$1 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
-var pad = function pad(num) {
-  return String(num || 0).padStart(2, '0');
-};
-var renderTimerValue = function renderTimerValue(value, label, separator) {
-  if (separator === void 0) {
-    separator = true;
-  }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
-    className: "harmonic-timer-value"
-  }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    color: "inherit",
-    hierarchy: "h3",
-    size: "medium",
-    "data-testid": label
-  }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
-    className: "harmonic-timer-label"
-  }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
-    color: "inherit",
-    size: "large"
-  }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    color: "inherit",
-    hierarchy: "h3",
-    size: "medium"
-  }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
-};
 var Timer = function Timer(_ref) {
   var endDate = _ref.endDate,
     title = _ref.title,
@@ -4630,22 +4552,43 @@ var Timer = function Timer(_ref) {
     bottomLine = _ref$bottomLine === void 0 ? true : _ref$bottomLine,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? ThemeColor['base-black'] : _ref$color;
-  var _useState = React.useState('00'),
-    seconds = _useState[0],
-    setSeconds = _useState[1];
-  var _useState2 = React.useState('00'),
-    minutes = _useState2[0],
-    setMinutes = _useState2[1];
-  var _useState3 = React.useState('00'),
-    hours = _useState3[0],
-    setHours = _useState3[1];
-  var _useState4 = React.useState('00'),
-    days = _useState4[0],
-    setDays = _useState4[1];
-  var _useState5 = React.useState(false),
-    isEndDateReached = _useState5[0],
-    setIsEndDateReached = _useState5[1];
-  React.useEffect(function () {
+  var _React$useState = React__default.useState('00'),
+    seconds = _React$useState[0],
+    setSeconds = _React$useState[1];
+  var _React$useState2 = React__default.useState('00'),
+    minutes = _React$useState2[0],
+    setMinutes = _React$useState2[1];
+  var _React$useState3 = React__default.useState('00'),
+    hours = _React$useState3[0],
+    setHours = _React$useState3[1];
+  var _React$useState4 = React__default.useState('00'),
+    days = _React$useState4[0],
+    setDays = _React$useState4[1];
+  var _React$useState5 = React__default.useState(false),
+    isEndDateReached = _React$useState5[0],
+    setIsEndDateReached = _React$useState5[1];
+  var renderTimerValue = function renderTimerValue(value, label, separator) {
+    if (separator === void 0) {
+      separator = true;
+    }
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
+      className: "harmonic-timer-value"
+    }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
+      color: "inherit",
+      hierarchy: "h3",
+      size: "medium"
+    }, value)), /*#__PURE__*/React__default.createElement(TimerLabel, {
+      className: "harmonic-timer-label"
+    }, /*#__PURE__*/React__default.createElement(HarmonicOverline, {
+      color: "inherit",
+      size: "large"
+    }, label))), separator && (/*#__PURE__*/React__default.createElement(HarmonicHeader, {
+      color: "inherit",
+      hierarchy: "h3",
+      size: "medium"
+    }, /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"))));
+  };
+  React__default.useEffect(function () {
     if (isEndDateReached) return undefined;
     // We use this to set values for the timer immediately
     var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
@@ -4653,21 +4596,19 @@ var Timer = function Timer(_ref) {
       return setInterval(fn, delay);
     };
     var updateValues = function updateValues() {
-      var futureDate = new Date(endDate);
-      var nowDate = new Date();
-      var diffInMs = futureDate.getTime() - nowDate.getTime();
-      if (diffInMs < 0) {
+      var futureDate = moment(endDate);
+      var nowDate = moment();
+      var differenceInMilliseconds = futureDate.valueOf() - nowDate.valueOf();
+      var difference = moment(differenceInMilliseconds).utc();
+      if (differenceInMilliseconds < 0) {
         setIsEndDateReached(true);
         if (endDateHandler) endDateHandler();
       } else {
-        var duration = dateFns.intervalToDuration({
-          start: nowDate,
-          end: futureDate
-        });
-        var daysDiff = pad(dateFns.differenceInDays(futureDate, nowDate));
-        var hoursDiff = pad(duration.hours);
-        var minutesDiff = pad(duration.minutes);
-        var secondsDiff = pad(duration.seconds);
+        var fullDaysLeft = Math.floor(futureDate.diff(nowDate, 'days', true));
+        var daysDiff = fullDaysLeft < 10 ? "0" + fullDaysLeft : fullDaysLeft.toString();
+        var hoursDiff = difference.format('HH');
+        var minutesDiff = difference.format('mm');
+        var secondsDiff = difference.format('ss');
         setDays(daysDiff);
         setHours(hoursDiff);
         setMinutes(minutesDiff);
@@ -4679,7 +4620,7 @@ var Timer = function Timer(_ref) {
       clearInterval(interval);
     };
   });
-  var hideTimer = dateFns.isPast(new Date(endDate));
+  var hideTimer = moment(endDate).isBefore(moment());
   if (hideTimer) return null;
   return /*#__PURE__*/React__default.createElement(TimerWrapper, {
     color: color
@@ -5397,7 +5338,6 @@ var Dropdown = function Dropdown(_ref) {
     className = _ref.className,
     role = _ref.role,
     ariaLabel = _ref.ariaLabel,
-    tabLinkId = _ref.tabLinkId,
     trimTabText = _ref.trimTabText;
   var node = React.useRef();
   var _useState = React.useState(false),
@@ -5494,7 +5434,6 @@ var Dropdown = function Dropdown(_ref) {
   };
   var renderTab = function renderTab() {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tab, {
-      tabLinkId: tabLinkId,
       trimText: trimTabText,
       title: title,
       titleLink: titleLink,
@@ -5574,8 +5513,7 @@ var Account = function Account(_ref) {
     iconName: iconName,
     withOptionsInMobile: false,
     withIcon: "left",
-    className: className,
-    tabLinkId: "account-link"
+    className: className
   });
 };
 
@@ -5978,7 +5916,7 @@ var Accordion = function Accordion(_ref) {
     } else if (!openAccordion) {
       setTextHeight('0px');
     }
-  }, [openAccordion, childrenVisibility, content]);
+  }, [openAccordion, childrenVisibility, content, children]);
   React.useEffect(function () {
     return function () {
       if (timeoutRef.current) {
@@ -5994,7 +5932,6 @@ var Accordion = function Accordion(_ref) {
   var toggleAccordion = function toggleAccordion() {
     if (React__default.Children.count(children) === 0) return;
     if (openAccordion) {
-      setIcon(collapsedStateIconData);
       setOpenAccordion(false);
       setTextHeight('0px');
       setIcon(collapsedStateIconData);
@@ -8935,7 +8872,7 @@ var _excluded$m = ["text"],
   _excluded3$1 = ["text"];
 var _buttonTypeToButton$1;
 var LENGTH_TEXT$1 = 28;
-var LENGTH_TEXT_PARAGRAPH = 185;
+var LENGTH_TEXT_PARAGRAPH = 130;
 var buttonTypeToButton$1 = (_buttonTypeToButton$1 = {}, _buttonTypeToButton$1[exports.ButtonType.Primary] = PrimaryButton, _buttonTypeToButton$1[exports.ButtonType.Secondary] = SecondaryButton, _buttonTypeToButton$1[exports.ButtonType.Tertiary] = TertiaryButton, _buttonTypeToButton$1);
 var PromoWithTags = function PromoWithTags(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
@@ -9980,35 +9917,35 @@ function Select(_ref3) {
 
 var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
 var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .harmonic-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .harmonic-select__control--is-focused {\n    border-color: var(--base-color-dark-grey);\n    box-shadow: ", ";\n  }\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .harmonic-select__single-value,\n  .harmonic-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .harmonic-select__placeholder {\n    color: var(--base-color-dark-grey);\n  }\n  .harmonic-select__single-value {\n    color: var(--base-color-black);\n  }\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--base-color-light-grey);\n      background: var(--base-color-light-grey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--base-color-dark-grey);\n    }\n  }\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-dark-grey);\n    background: var(--base-color-light-grey);\n  }\n  .harmonic-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--base-color-mid-grey);\n    }\n  }\n  .harmonic-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .harmonic-select__menu-notice {\n    padding: 20px 20px;\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-size: var(--font-size-body-1);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-align: left;\n  }\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
+var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .harmonic-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n\n  .harmonic-select__control--is-focused {\n    border-color: var(--color-base-dark-grey);\n    box-shadow: ", ";\n  }\n\n  .harmonic-select__control--menu-is-open {\n    .harmonic-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n\n  .harmonic-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--color-base-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n\n  .harmonic-select__single-value,\n  .harmonic-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-sans);\n    font-weight: 400;\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n\n    @media ", " {\n      font-size: 17px;\n    }\n  }\n\n  .harmonic-select__placeholder {\n    color: var(--color-base-dark-grey);\n  }\n\n  .harmonic-select__single-value {\n    color: var(--color-base-black);\n  }\n\n  .harmonic-select__value-container {\n    padding-left: 20px;\n    padding-right: 20px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n\n  .harmonic-select--is-disabled {\n    .harmonic-select__control {\n      border: 1px solid var(--color-base-light-grey);\n      background: var(--color-base-light-grey);\n    }\n    .harmonic-select__indicator,\n    .harmonic-select__single-value {\n      color: var(--color-base-dark-grey);\n    }\n  }\n\n  .harmonic-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--color-base-dark-grey);\n    background: var(--color-base-light-grey);\n  }\n\n  .harmonic-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  .harmonic-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-sans);\n    font-weight: 400;\n    font-size: 19px;\n    line-height: 26px;\n    letter-spacing: -0.5px;\n    color: var(--color-base-black);\n\n    @media ", " {\n      font-size: 17px;\n    }\n\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--color-base-mid-grey);\n    }\n  }\n\n  .harmonic-select__option--is-selected {\n    color: var(--color-base-black);\n    background: none;\n  }\n\n  .harmonic-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    color: var(--color-base-black);\n  }\n\n  .harmonic-select__menu-notice {\n    color: var(--color-base-black);\n    padding: 20px 20px;\n    text-align: left;\n  }\n\n  .harmonic-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
   var width = _ref.width;
   if (!width) return 'none';
   return width + "px";
 }, function (_ref2) {
   var error = _ref2.error;
-  if (error !== undefined) return "1px solid var(--base-color-errorstate)";
-  return "1px solid var(--base-color-dark-grey)";
+  if (error !== undefined) return "1px solid var(--color-base-errorstate)";
+  return "1px solid var(--color-base-dark-grey)";
 }, function (_ref3) {
   var error = _ref3.error;
-  if (error !== undefined) return "var(--base-color-errorstate)";
-  return "var(--base-color-dark-grey)";
+  if (error !== undefined) return "var(--color-base-errorstate)";
+  return "var(--color-base-dark-grey)";
 }, function (_ref4) {
   var darkMode = _ref4.darkMode;
-  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
-  return "0 0 0 3px var(--base-color-lapislazuli)";
-});
-var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
+  if (darkMode) return "0 0 0 4px var(--color-base-lemonchiffon)";
+  return "0 0 0 3px var(--color-base-lapislazuli)";
+}, devices.mobile, devices.mobile);
+var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 24px;\n  color: ", ";\n"])), function (_ref5) {
   var darkMode = _ref5.darkMode;
-  if (darkMode) return "var(--base-color-white)";
-  return "var(--base-color-black)";
+  if (darkMode) return "var(--color-base-white)";
+  return "var(--color-base-black)";
 });
 var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
   var darkMode = _ref6.darkMode;
-  if (darkMode) return "var(--base-color-white)";
-  return "var(--base-color-errorstate)";
+  if (darkMode) return "var(--color-base-white)";
+  return "var(--color-base-errorstate)";
 });
 
-var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
+var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -10019,12 +9956,15 @@ var WrapperComponent = function WrapperComponent(_ref) {
     error = _ref.error,
     width = _ref.width,
     darkMode = _ref.darkMode,
-    children = _ref.children;
-  return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
+    children = _ref.children,
+    className = _ref.className;
+  return /*#__PURE__*/React__default.createElement(Container$4, {
+    className: className
+  }, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
     darkMode: darkMode,
     "data-testid": "select2-text-label"
-  }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 6
+  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: 'large'
   }, label))), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
     width: width,
     error: error,
@@ -10032,8 +9972,8 @@ var WrapperComponent = function WrapperComponent(_ref) {
   }, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
     darkMode: darkMode,
     "data-testid": "select2-error-label"
-  }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 6
+  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
+    size: 'medium'
   }, error))));
 };
 /**
@@ -10059,12 +9999,14 @@ var SelectComponent = function SelectComponent(_ref2) {
     _ref2$isSearchable = _ref2.isSearchable,
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
+    className = _ref2.className,
     selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
     width: width,
-    darkMode: darkMode
+    darkMode: darkMode,
+    className: className
   }, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
     components: _extends({
       DropdownIndicator: DropdownIndicator,
@@ -11498,9 +11440,14 @@ var BodyContent = function BodyContent(_ref2) {
     _ref2$renderGridItem = _ref2.renderGridItem,
     renderGridItem = _ref2$renderGridItem === void 0 ? true : _ref2$renderGridItem;
   var textContainerClassName = !renderGrid && !renderGridItem ? className : undefined;
-  var content = /*#__PURE__*/React__default.createElement(BodyContentTextContainer, {
+  var content = /*#__PURE__*/React__default.createElement(TextContainer$1, {
+    tag: "div",
+    size: "large",
+    "data-testid": "text-container",
     className: textContainerClassName,
-    html: text
+    dangerouslySetInnerHTML: {
+      __html: addTypographyClasses(text)
+    }
   });
   var gridItemOrContent = renderGridItem ? (/*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: columnStartDesktop,