@royaloperahouse/harmonic 0.18.4 → 0.18.6

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [0.18.6]
+- CastFilter: Add greyscale option to cast filter
+
+## [0.18.5]
+- PeopleListing, PersonCard: Added person-headshot-grayscale class to display headshots in grayscale
+
 ## [0.18.4]
 - Access Icons: Add Captioned, Family Friendly, and Touch Tour icons
 

package/README.GIT

@@ -22,7 +22,7 @@ The Storybook for the latest version of the library is hosted at [Storybook - Ha
 
   * You can find these values at:
   
-    *AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' -> 'Command line or programmatic access'*
+    *AWS access portal/ Accounts tab -> 'Royal Opera House' -> 'Access keys' -> 'Option 2: Add a profile to your AWS credentials file'*
 
 * **To deploy a preview** for demo / QA you will need:
 
@@ -151,8 +151,7 @@ To publish a snapshot use:
 ```bash
 NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
 ```
-
-The version published to NPM will be named, e.g. `1.42.0-a-harmonic-development`, use this to install the snapshot package in the frontend repos.
+Use the version name to install the package in a frontend repo.
 
 ### **2. To release a stable version**
 

package/dist/components/molecules/CastFilter/CastFilters.style.d.ts

@@ -10,6 +10,7 @@ export declare const PersonToggle: import("styled-components").StyledComponent<"
 }, never>;
 export declare const PersonImage: import("styled-components").StyledComponent<"img", any, {
     isDefaultPlaceholder?: boolean | undefined;
+    greyscale?: boolean | undefined;
 }, never>;
 export declare const PersonName: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Decal: import("styled-components").StyledComponent<"div", any, {

package/dist/components/molecules/PeopleListing/CreditListing/CreditListing.style.d.ts

@@ -1,5 +1,7 @@
 export declare const ReplacementWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CreditListingWrapper: import("styled-components").StyledComponent<"div", any, {
+    $largeDesktopColumns?: 3 | 4 | undefined;
+} & {
     columnCount: number;
 }, never>;
 export declare const DescriptionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/molecules/PeopleListing/PeopleListing.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IPeopleListing } from '../../../types/types';
-declare const PeopleListing: ({ roles, className }: IPeopleListing) => React.JSX.Element;
+declare const PeopleListing: ({ roles, className, greyscale, largeDesktopColumns }: IPeopleListing) => React.JSX.Element;
 export default PeopleListing;

package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts

@@ -1 +1,3 @@
-export declare const PeopleListingGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PeopleListingGrid: import("styled-components").StyledComponent<"div", any, {
+    $largeDesktopColumns?: 3 | 4 | undefined;
+}, never>;

package/dist/components/molecules/PersonCard/PersonCard.style.d.ts

@@ -1,2 +1,4 @@
 export declare const PersonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeadshotWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeadshotWrapper: import("styled-components").StyledComponent<"div", any, {
+    greyscale?: boolean | undefined;
+}, never>;

package/dist/components/molecules/Select2/Select2.d.ts

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { DropdownIndicatorProps } from 'react-select';
 import { ISelect2Props } from '../../../types/formTypes';
 export declare const DropdownIndicator: (props: DropdownIndicatorProps) => React.JSX.Element;
-interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode'> {
+interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode' | 'className'> {
     children: React.ReactNode;
 }
 export declare const WrapperComponent: FunctionComponent<IWrapperProps>;

package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts

@@ -1,6 +1,6 @@
 interface FocusableTabProps {
     hide?: boolean;
 }
-export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, tabLinkId, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
+export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
 export declare const HiddenBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/harmonic.cjs.development.js

@@ -5979,21 +5979,69 @@ var Accordion = function Accordion(_ref) {
   var content = React.useRef(null);
   var timeoutRef = React.useRef(null);
   var rafRef = React.useRef(null);
+  var resizeObserverRef = React.useRef(null);
+  var intervalRef = React.useRef(null);
   React.useEffect(function () {
-    if (content != null && content.current && initOpen) {
+    if (content.current && initOpen) {
       setTextHeight(content.current.scrollHeight + "px");
     }
-  }, [content, initOpen]);
+  }, [initOpen]);
   React.useEffect(function () {
-    if (openAccordion && content != null && content.current) {
-      rafRef.current = window.requestAnimationFrame(function () {
-        var _content$current$scro, _content$current;
-        setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
-      });
-    } else if (!openAccordion) {
+    var cleanup = function cleanup() {
+      return undefined;
+    };
+    var el = content.current;
+    if (!el) return cleanup;
+    if (!openAccordion) {
       setTextHeight('0px');
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      if (intervalRef.current) {
+        window.clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      if (rafRef.current) {
+        window.cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      return cleanup;
+    }
+    var updateHeight = function updateHeight() {
+      setTextHeight(el.scrollHeight + "px");
+    };
+    rafRef.current = window.requestAnimationFrame(updateHeight);
+    if (typeof ResizeObserver !== 'undefined') {
+      var ro = new ResizeObserver(updateHeight);
+      ro.observe(el);
+      resizeObserverRef.current = ro;
+      intervalRef.current = window.setInterval(updateHeight, 200);
+      return function () {
+        ro.disconnect();
+        resizeObserverRef.current = null;
+        if (intervalRef.current) {
+          window.clearInterval(intervalRef.current);
+          intervalRef.current = null;
+        }
+        if (rafRef.current) {
+          window.cancelAnimationFrame(rafRef.current);
+          rafRef.current = null;
+        }
+      };
     }
-  }, [openAccordion, childrenVisibility, content]);
+    intervalRef.current = window.setInterval(updateHeight, 200);
+    return function () {
+      if (intervalRef.current) {
+        window.clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      if (rafRef.current) {
+        window.cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [openAccordion, childrenVisibility, children]);
   React.useEffect(function () {
     return function () {
       if (timeoutRef.current) {
@@ -6004,6 +6052,14 @@ var Accordion = function Accordion(_ref) {
         window.cancelAnimationFrame(rafRef.current);
         rafRef.current = null;
       }
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+      if (intervalRef.current) {
+        window.clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
     };
   }, []);
   var toggleAccordion = function toggleAccordion() {
@@ -6549,17 +6605,20 @@ var PersonToggle = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_temp
   var isSelected = _ref.isSelected;
   return isSelected ? 'var(--color-primary-red)' : 'var(--color-base-light-grey)';
 });
-var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 8px);\n  height: calc(100% - 8px);\n  margin: 4px;\n  object-fit: cover;\n  border-radius: 50%;\n\n  // This is really specific to the SVG that we have been provided\n  // as a fallback person image. I don't think there's a simpler and\n  // more general way to handle this, so if we're given a new placeholder\n  // image later, we may have to change the scale here\n  ", "\n"])), function (_ref2) {
-  var isDefaultPlaceholder = _ref2.isDefaultPlaceholder;
+var PersonImage = /*#__PURE__*/styled__default.img(_templateObject9$3 || (_templateObject9$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: calc(100% - 8px);\n  height: calc(100% - 8px);\n  margin: 4px;\n  object-fit: cover;\n  border-radius: 50%;\n  filter: ", ";\n\n  // This is really specific to the SVG that we have been provided\n  // as a fallback person image. I don't think there's a simpler and\n  // more general way to handle this, so if we're given a new placeholder\n  // image later, we may have to change the scale here\n  ", "\n"])), function (_ref2) {
+  var greyscale = _ref2.greyscale;
+  return greyscale ? 'grayscale(100%)' : 'none';
+}, function (_ref3) {
+  var isDefaultPlaceholder = _ref3.isDefaultPlaceholder;
   return isDefaultPlaceholder && "\n    transform: scale(1.24);\n  ";
 });
 var PersonName = /*#__PURE__*/styled__default.div(_templateObject0$3 || (_templateObject0$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-width: 86px;\n  display: flex;\n  flex-wrap: wrap;\n  text-align: center;\n\n  @media ", " {\n    max-width: unset;\n    text-align: left;\n    font-size: 17px;\n    line-height: 24px;\n  }\n"])), devices.mobile);
-var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--color-primary-red);\n  display: ", ";\n  position: absolute;\n  top: 6px;\n  right: -6px;\n  align-items: center;\n  justify-content: center;\n\n  span {\n    display: ", ";\n    width: 65%;\n    height: 65%;\n  }\n"])), function (_ref3) {
-  var isSelected = _ref3.isSelected;
-  return isSelected ? 'flex' : 'none';
-}, function (_ref4) {
+var Decal = /*#__PURE__*/styled__default.div(_templateObject1$2 || (_templateObject1$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: var(--color-primary-red);\n  display: ", ";\n  position: absolute;\n  top: 6px;\n  right: -6px;\n  align-items: center;\n  justify-content: center;\n\n  span {\n    display: ", ";\n    width: 65%;\n    height: 65%;\n  }\n"])), function (_ref4) {
   var isSelected = _ref4.isSelected;
   return isSelected ? 'flex' : 'none';
+}, function (_ref5) {
+  var isSelected = _ref5.isSelected;
+  return isSelected ? 'flex' : 'none';
 });
 var EmptySelectionTextSpacer = /*#__PURE__*/styled__default.div(_templateObject10$2 || (_templateObject10$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: hidden;\n\n  @media ", " {\n    visibility: visible;\n    min-height: var(--button-height);\n  }\n"])), devices.mobile);
 
@@ -6967,6 +7026,8 @@ var CastFilters = function CastFilters(_ref) {
     onSelect = _ref.onSelect,
     onApply = _ref.onApply,
     onClear = _ref.onClear,
+    _ref$greyscale = _ref.greyscale,
+    greyscale = _ref$greyscale === void 0 ? false : _ref$greyscale,
     _ref$selectedIndices = _ref.selectedIndices,
     selectedIndices = _ref$selectedIndices === void 0 ? [] : _ref$selectedIndices;
   var _useViewport = useViewport(),
@@ -7107,7 +7168,8 @@ var CastFilters = function CastFilters(_ref) {
         src: personImage,
         alt: image ? name : "Placeholder image for " + name,
         draggable: false,
-        isDefaultPlaceholder: !(!!image || !!placeholderImage)
+        isDefaultPlaceholder: !(!!image || !!placeholderImage),
+        greyscale: greyscale
       }), /*#__PURE__*/React__default.createElement(Decal, {
         isSelected: isSelected
       }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -8628,7 +8690,10 @@ var Pagination = function Pagination(_ref) {
 };
 
 var _templateObject$Y;
-var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 40px 36px;\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Y || (_templateObject$Y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 40px 36px;\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: ", ";\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop, function (_ref) {
+  var $largeDesktopColumns = _ref.$largeDesktopColumns;
+  return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
+});
 
 var _templateObject$Z, _templateObject2$M;
 var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-primary-black);\n  }\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
@@ -8677,11 +8742,15 @@ var PersonDetails = function PersonDetails(_ref) {
 
 var _templateObject$$, _templateObject2$O;
 var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 82px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 16px;\n"])));
-var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 82px;\n    height: 82px;\n  }\n"])));
+var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 82px;\n    height: 82px;\n    filter: ", ";\n  }\n"])), function (_ref) {
+  var greyscale = _ref.greyscale;
+  return greyscale ? 'grayscale(100%)' : 'none';
+});
 
 var PersonCard = function PersonCard(_ref) {
   var role = _ref.role,
-    className = _ref.className;
+    className = _ref.className,
+    greyscale = _ref.greyscale;
   var hasHeadshot = React__default.useMemo(function () {
     var _role$people;
     var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
@@ -8689,7 +8758,9 @@ var PersonCard = function PersonCard(_ref) {
   }, [role]);
   if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
     className: className
-  }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, {
+    greyscale: greyscale
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: role.people[0].headshot,
     alt: role.people[0].name
   })), /*#__PURE__*/React__default.createElement(PersonDetails, {
@@ -8703,14 +8774,19 @@ var PersonCard = function PersonCard(_ref) {
 
 var PeopleListing = function PeopleListing(_ref) {
   var roles = _ref.roles,
-    className = _ref.className;
+    className = _ref.className,
+    greyscale = _ref.greyscale,
+    largeDesktopColumns = _ref.largeDesktopColumns;
   return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
-    className: className
+    className: className,
+    "$largeDesktopColumns": largeDesktopColumns
   }, roles.map(function (role, index) {
     return /*#__PURE__*/React__default.createElement(GridItem, {
       key: role.name + "-" + index
     }, /*#__PURE__*/React__default.createElement(PersonCard, {
-      role: role
+      role: role,
+      className: className,
+      greyscale: greyscale
     }));
   }));
 };
@@ -9994,35 +10070,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-primary-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-primary-black);\n  }\n\n  .harmonic-select__single-value {\n    color: var(--color-primary-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-mid-grey);\n  }\n\n  .harmonic-select__menu-list {\n    padding: 10px 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-primary-black);\n\n    @media ", " {\n      font-size: 17px;\n    }\n\n    &:active,\n    &.harmonic-select__option--is-focused {\n      background: var(--color-base-light-grey);\n    }\n  }\n\n  .harmonic-select__option--is-selected {\n    color: var(--color-primary-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-primary-black);\n  }\n\n  .harmonic-select__menu-notice {\n    color: var(--color-primary-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-state-error)";
+  return "1px solid var(--color-base-mid-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-state-error)";
+  return "var(--color-base-dark-grey)";
 }, function (_ref4) {
   var darkMode = _ref4.darkMode;
-  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
+  if (darkMode) return "0 0 0 1px var(--color-state-medium)";
   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) {
+}, devices.mobile, devices.mobile);
+var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n\n  @media ", " {\n    margin: 0 0 12px;\n  }\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-primary-black)";
+}, devices.mobile);
 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-state-error)";
 });
 
-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"
@@ -10033,12 +10109,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,
@@ -10046,8 +10125,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))));
 };
 /**
@@ -10073,12 +10152,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,