@royaloperahouse/harmonic 0.12.0-h → 0.12.0-j

package/dist/harmonic.esm.js

@@ -10320,13 +10320,13 @@ var Pagination = function Pagination(_ref) {
 };
 
 var _templateObject$18, _templateObject2$T, _templateObject3$H, _templateObject4$z, _templateObject5$t, _templateObject6$m, _templateObject7$i;
-var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$18 || (_templateObject$18 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\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 PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: 60px 1fr;\n  grid-template-areas: 'headshot role-person';\n  grid-column-gap: 10px;\n"])));
-var HeadshotWrapper = /*#__PURE__*/styled.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 60px;\n    height: 60px;\n  }\n"])));
-var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
-var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
-var PersonLink = /*#__PURE__*/styled.a(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\n  text-decoration: underline;\n\n  :hover {\n    color: var(--base-color-primary);\n    :after {\n      color: var(--base-color-black);\n    }\n  }\n\n  :visited {\n    color: var(--base-color-black);\n  }\n"])));
-var ReplacementWrapper = /*#__PURE__*/styled.span(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-dark-grey);\n"])));
+var PeopleListingGrid = /*#__PURE__*/styled(Grid)(_templateObject$18 || (_templateObject$18 = /*#__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 PersonWrapper = /*#__PURE__*/styled.div(_templateObject2$T || (_templateObject2$T = /*#__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.div(_templateObject3$H || (_templateObject3$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 82px;\n    height: 82px;\n  }\n"])));
+var RoleContent = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject4$z || (_templateObject4$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-base-dark-grey);\n  }\n  overflow-wrap: break-word;\n  padding-bottom: 4px;\n"])));
+var TextWrapper$2 = /*#__PURE__*/styled.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-primary-black);\n  }\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
+var PersonLink = /*#__PURE__*/styled.a(_templateObject6$m || (_templateObject6$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  text-decoration: underline;\n  text-underline-offset: 6px;\n\n  && {\n    color: var(--color-primary-black);\n\n    :hover {\n      color: var(--color-rbo-black-hovered);\n      :after {\n        color: var(--color-primary-black);\n      }\n    }\n\n    :visited {\n      color: var(--color-primary-black);\n    }\n  }\n"])));
+var ReplacementContent = /*#__PURE__*/styled.span(_templateObject7$i || (_templateObject7$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--base-color-dark-grey);\n  }\n"])));
 
 var Person = function Person(_ref) {
   var person = _ref.person,
@@ -10342,10 +10342,7 @@ var Person = function Person(_ref) {
       href: link
     }, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null);
   }
-  return /*#__PURE__*/React__default.createElement("span", null, name, replacement && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', /*#__PURE__*/React__default.createElement(ReplacementWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1,
-    tag: "span"
-  }, replacement)))), personSeparator);
+  return /*#__PURE__*/React__default.createElement("span", null, name, replacement && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, ' ', /*#__PURE__*/React__default.createElement(ReplacementContent, null, replacement))), personSeparator);
 };
 
 /* eslint-disable no-extra-boolean-cast */
@@ -10353,13 +10350,10 @@ function hasHeadshot(role) {
   return +(!!role.people[0].headshot && role.people[0].useHeadshot);
 }
 function textSection(role) {
-  return /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
+  return /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleContent, {
     title: "role",
     "data-roh": role.dataROH
-  }, /*#__PURE__*/React__default.createElement(Overline, {
-    level: 1
-  }, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1,
+  }, role.name), /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     tag: "p"
   }, role.people.map(function (person, personIndex) {
     return /*#__PURE__*/React__default.createElement(Person, {
@@ -10370,8 +10364,11 @@ function textSection(role) {
   })));
 }
 var PeopleListing = function PeopleListing(_ref) {
-  var roles = _ref.roles;
-  return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.sort(function (a, b) {
+  var roles = _ref.roles,
+    className = _ref.className;
+  return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
+    className: className
+  }, roles.sort(function (a, b) {
     return hasHeadshot(b) - hasHeadshot(a);
   }).map(function (role, index) {
     return /*#__PURE__*/React__default.createElement(GridItem, {
@@ -10384,13 +10381,13 @@ var PeopleListing = function PeopleListing(_ref) {
 };
 
 var _templateObject$19, _templateObject2$U, _templateObject3$I, _templateObject4$A;
-var ReplacementWrapper$1 = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
+var ReplacementWrapper = /*#__PURE__*/styled.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n"])));
 var CreditListingWrapper = /*#__PURE__*/styled(PeopleListingGrid)(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  p {\n    line-height: 1.5;\n  }\n\n  grid-template-columns: ", ";\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: repeat(2, 1fr);\n  }\n"])), function (_ref) {
   var columnCount = _ref.columnCount;
   return "repeat(" + columnCount + ", 1fr)";
 }, devices.mobile, devices.tablet);
 var DescriptionWrapper = /*#__PURE__*/styled.div(_templateObject3$I || (_templateObject3$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  p {\n    line-height: 25px;\n    margin-bottom: 3px;\n  }\n"])));
-var RoleWrapper$1 = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
+var RoleWrapper = /*#__PURE__*/styled.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  min-height: 1.5em;\n"])));
 
 // Get the total character length of a property in an array of objects
 var getConcatenatedPropLength = function getConcatenatedPropLength(array, prop) {
@@ -10479,7 +10476,7 @@ var CreditListing = function CreditListing(_ref) {
       columnSpanSmallDevice: 1,
       key: "credit-entry-" + name + "-" + index,
       "data-testid": "credit-entry"
-    }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper$1, {
+    }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
       title: "role",
       "data-roh": dataROH
     }, /*#__PURE__*/React__default.createElement(Overline, {
@@ -10500,7 +10497,7 @@ var CreditListing = function CreditListing(_ref) {
           withSeparator: personArray.length !== personIndex + 1
         });
       }));
-    }), replacement && (/*#__PURE__*/React__default.createElement(ReplacementWrapper$1, null, /*#__PURE__*/React__default.createElement(BodyText, {
+    }), replacement && (/*#__PURE__*/React__default.createElement(ReplacementWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
       level: 1,
       tag: "p"
     }, replacement))), musicTitle && musicTitle.length > 0 && (/*#__PURE__*/React__default.createElement(BodyText, {