@royaloperahouse/chord 0.7.24 → 0.7.27

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # CHANGELOG
 
+## [0.7.27]
+- Extend ContactCard capabilities
+- Extend Tertiary Button text length
+
+## [0.7.26]
+- Add storybook-deployer package
+- Update README with instructions for deployment
+
+## [0.7.25]
+- PeopleListing: add headshot
+
 ## [0.7.24]
 - Add new ContactCard component
 

package/README.GIT

@@ -42,6 +42,29 @@ yarn build-storybook
 
 This will create a static copy in `./storybook-static`, and there is an index.html page inside the core directory. This allows the site to be previewed directly in the git repository via serving pages (it needs to be configured for that branch).
 
+To deploy the storybook publically:
+
+### Prerequisites
+
+Make sure you have credentials for the *parent* 'Royal Opera House' AWS account in your `~/.aws/credentials` file. The deploy script expects these to be called `[parent]`.
+
+You can get these values at:
+
+AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' ->
+'Command line or programmatic access'
+
+### Deployment
+
+To deploy, first *build* the storybook as above
+
+then use:
+
+```bash
+yarn deploy-storybook
+```
+
+This will deploy the contents of `./storybook-static` to S3 as a static site accessible at [chord.roh.org.uk](chord.roh.org.uk)
+
 To build the package use:
 
 ```bash

package/dist/chord.cjs.development.js

@@ -2118,7 +2118,7 @@ var TertiaryButtonWrapper = /*#__PURE__*/styled__default.a(_templateObject$5 ||
   var color = _ref.color;
   return color;
 });
-var TertiaryIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n  display: inline-block;\n"])));
+var TertiaryIconWrapper = /*#__PURE__*/styled__default.span(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: var(--button-icon-width);\n  min-width: 20px;\n  height: var(--button-icon-height);\n  margin-left: var(--button-icon-margin);\n  display: inline-block;\n"])));
 
 var _excluded$3 = ["children", "color"];
 
@@ -2127,7 +2127,7 @@ var Button$1 = function Button(_ref) {
       color = _ref.color,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
-  var truncatedString = children.substring(0, 30);
+  var truncatedString = children.substring(0, 100);
   return /*#__PURE__*/React__default.createElement(TertiaryButtonWrapper, Object.assign({}, rest, {
     color: color
   }), truncatedString, /*#__PURE__*/React__default.createElement(TertiaryIconWrapper, {
@@ -2611,7 +2611,7 @@ var SponsorLogo = function SponsorLogo(_ref) {
 };
 
 var _templateObject$d;
-var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/rolex.html?size=80';
+var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v3/rolex.html?size=80';
 var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
 var DEFAULT_DATA_ROH = 'ImgAdvert';
 var SponsorshipStyled = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  height: 80px;\n  margin: 0px;\n  overflow: hidden;\n  padding: 0;\n  width: 80px;\n\n  & > iframe {\n    border: 0;\n    display: block;\n    margin: 0px;\n    padding: 0px;\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n  }\n\n  @media ", " {\n    & {\n      height: 40px;\n      width: 40px;\n    }\n    & iframe {\n      height: 80px;\n      transform: scale(0.5) translate(-40px, -40px);\n      width: 80px;\n    }\n  }\n"])), devices.mobile);
@@ -4988,10 +4988,16 @@ var Cards = function Cards(_ref) {
 
 var _templateObject$H, _templateObject2$q, _templateObject3$j, _templateObject4$d, _templateObject5$9;
 var ContentWrapper = /*#__PURE__*/styled__default.div(_templateObject$H || (_templateObject$H = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  & > div {\n    margin-bottom: 2px;\n\n    &:first-child {\n      margin-bottom: 4px;\n\n      @media ", " {\n        margin-bottom: 6px;\n      }\n    }\n  }\n\n  @media ", " {\n    grid-column: 2 / span 12;\n  }\n"])), devices.mobile, devices.mobileAndTablet);
-var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-top: 2px solid var(--base-color-lightgrey);\n  border-bottom: 2px solid var(--base-color-lightgrey);\n  padding: 30px 0;\n\n  @media ", " {\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  }\n"])), devices.mobileAndTablet);
+var Wrapper$2 = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n  padding: 30px 0;\n\n  @media ", " {\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  }\n"])), function (_ref) {
+  var hideBottomBorder = _ref.hideBottomBorder;
+  return "border-bottom: " + (hideBottomBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
+}, function (_ref2) {
+  var hideTopBorder = _ref2.hideTopBorder;
+  return "border-top: " + (hideTopBorder ? 'none' : '2px solid var(--base-color-midgrey)') + ";";
+}, devices.mobileAndTablet);
 var AddressWrapperDesktop = /*#__PURE__*/styled__default.div(_templateObject3$j || (_templateObject3$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
 var AddressWrapperMobile = /*#__PURE__*/styled__default.div(_templateObject4$d || (_templateObject4$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  & > div {\n    margin-bottom: 2px;\n  }\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
-var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  @media ", " {\n    flex-direction: column;\n    margin: 4px 0;\n  }\n\n  div {\n    text-decoration: underline;\n\n    &:before {\n      display: inline-block;\n      content: '';\n      background-color: var(--base-color-black);\n      width: 1px;\n      height: 18px;\n      margin: 0 8px -4px;\n\n      @media ", " {\n        display: none;\n      }\n    }\n\n    &:first-child:before {\n      display: none;\n    }\n  }\n"])), devices.mobile, devices.mobile);
+var DetailsWrapper = /*#__PURE__*/styled__default.div(_templateObject5$9 || (_templateObject5$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n\n  @media ", " {\n    flex-direction: column;\n    margin: 4px 0;\n  }\n\n  a {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\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-decoration: underline;\n\n    &:before {\n      display: inline-block;\n      content: '';\n      background-color: var(--base-color-black);\n      width: 1px;\n      height: 18px;\n      margin: 0 8px -4px;\n\n      @media ", " {\n        display: none;\n      }\n    }\n\n    &:first-child:before {\n      display: none;\n    }\n  }\n"])), devices.mobile, devices.mobile);
 
 var divideAddressString = function divideAddressString(address) {
   return address.split(',').map(function (chunk) {
@@ -5007,30 +5013,45 @@ var ContactCard = function ContactCard(_ref) {
       email = _ref.email,
       phone = _ref.phone,
       website = _ref.website,
-      address = _ref.address;
+      address = _ref.address,
+      _ref$hideBottomBorder = _ref.hideBottomBorder,
+      hideBottomBorder = _ref$hideBottomBorder === void 0 ? false : _ref$hideBottomBorder,
+      _ref$hideTopBorder = _ref.hideTopBorder,
+      hideTopBorder = _ref$hideTopBorder === void 0 ? false : _ref$hideTopBorder;
   var hasDetails = email || phone || website;
+  var addressString = address == null ? void 0 : address.substring(0, 110);
+  var descriptionText = description == null ? void 0 : description.substring(0, 110);
   return /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
     columnStartDesktop: 3,
     columnSpanDesktop: 8,
     columnStartDevice: 1,
     columnSpanDevice: 14
-  }, /*#__PURE__*/React__default.createElement(Wrapper$2, null, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
+  }, /*#__PURE__*/React__default.createElement(Wrapper$2, {
+    "data-testid": "contact-card-wrapper",
+    hideBottomBorder: hideBottomBorder,
+    hideTopBorder: hideTopBorder
+  }, /*#__PURE__*/React__default.createElement(ContentWrapper, null, /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1
-  }, name), description && /*#__PURE__*/React__default.createElement(Subtitle, {
+  }, name), descriptionText && /*#__PURE__*/React__default.createElement(Subtitle, {
     level: 2
-  }, description), hasDetails && /*#__PURE__*/React__default.createElement(DetailsWrapper, {
+  }, descriptionText), hasDetails && /*#__PURE__*/React__default.createElement(DetailsWrapper, {
     "data-testid": "contact-card-details-block"
-  }, email && /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
-  }, email), phone && /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
-  }, phone), website && /*#__PURE__*/React__default.createElement(BodyText, {
-    level: 1
-  }, website)), address && /*#__PURE__*/React__default.createElement("div", {
+  }, email && /*#__PURE__*/React__default.createElement("a", {
+    tabIndex: 0,
+    href: "mailto:" + email
+  }, email), phone && /*#__PURE__*/React__default.createElement("a", {
+    tabIndex: 0,
+    href: "tel:" + phone
+  }, phone), website && /*#__PURE__*/React__default.createElement("a", {
+    tabIndex: 0,
+    href: website,
+    target: "_blank",
+    rel: "noreferrer"
+  }, website)), addressString && /*#__PURE__*/React__default.createElement("div", {
     "data-testid": "contact-card-address-block"
   }, /*#__PURE__*/React__default.createElement(AddressWrapperDesktop, null, /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1
-  }, address)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(address)))))));
+  }, addressString)), /*#__PURE__*/React__default.createElement(AddressWrapperMobile, null, divideAddressString(addressString)))))));
 };
 
 var _templateObject$I, _templateObject2$r, _templateObject3$k, _templateObject4$e, _templateObject5$a;
@@ -5238,10 +5259,13 @@ var PageHeadingStream = function PageHeadingStream(_ref) {
   }), /*#__PURE__*/React__default.createElement(StreamBadge, null)));
 };
 
-var _templateObject$L, _templateObject2$u, _templateObject3$n;
-var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$L || (_templateObject$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: var(--line-height-people-listing-gap) var(--grid-column-gap);\n\n  p {\n    margin: 0;\n  }\n"])));
-var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n"])));
-var PersonLink = /*#__PURE__*/styled__default.a(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-black);\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 _templateObject$L, _templateObject2$u, _templateObject3$n, _templateObject4$h, _templateObject5$d, _templateObject6$a;
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$L || (_templateObject$L = /*#__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  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet);
+var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject2$u || (_templateObject2$u = /*#__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__default.div(_templateObject3$n || (_templateObject3$n = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  grid-area: headshot;\n  img {\n    width: 60px;\n    height: 60px;\n  }\n"])));
+var RoleWrapper = /*#__PURE__*/styled__default.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-darkgrey);\n  overflow-wrap: break-word;\n  margin-bottom: 4px;\n"])));
+var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-area: role-person;\n"])));
+var PersonLink = /*#__PURE__*/styled__default.a(_templateObject6$a || (_templateObject6$a = /*#__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 Person = function Person(_ref) {
   var person = _ref.person,
@@ -5256,34 +5280,37 @@ var Person = function Person(_ref) {
   }, name), personSeparator ? /*#__PURE__*/React__default.createElement("span", null, separator) : null) : /*#__PURE__*/React__default.createElement("span", null, name, personSeparator));
 };
 
+var textSection = function textSection(role) {
+  return /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(RoleWrapper, {
+    title: "role",
+    "data-roh": role.dataROH
+  }, /*#__PURE__*/React__default.createElement(Overline, {
+    level: 1
+  }, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
+    level: 1,
+    tag: "p"
+  }, role.people.map(function (person, personIndex) {
+    return /*#__PURE__*/React__default.createElement(Person, {
+      key: "" + person.name + personIndex,
+      person: person,
+      withSeparator: role.people.length !== personIndex + 1
+    });
+  })));
+};
+
 var PeopleListing = function PeopleListing(_ref) {
   var roles = _ref.roles;
   return /*#__PURE__*/React__default.createElement(PeopleListingGrid, null, roles.map(function (role, index) {
     return /*#__PURE__*/React__default.createElement(GridItem, {
-      key: role.name + "-" + index,
-      columnStartDesktop: index % 4 * 3 + 3,
-      columnSpanDesktop: 3,
-      columnStartDevice: index % 2 * 6 + 2,
-      columnSpanDevice: 6
-    }, /*#__PURE__*/React__default.createElement(RoleWrapper, {
-      title: "role",
-      "data-roh": role.dataROH
-    }, /*#__PURE__*/React__default.createElement(Overline, {
-      level: 1
-    }, role.name)), /*#__PURE__*/React__default.createElement(BodyText, {
-      level: 1,
-      tag: "p"
-    }, role.people.map(function (person, personIndex) {
-      return /*#__PURE__*/React__default.createElement(Person, {
-        key: "" + person.name + personIndex,
-        person: person,
-        withSeparator: role.people.length !== personIndex + 1
-      });
-    })));
+      key: role.name + "-" + index
+    }, role.people[0].headshot && role.people[0].useHeadshot ? /*#__PURE__*/React__default.createElement(PersonWrapper, null, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
+      src: role.people[0].headshot,
+      alt: role.people[0].name
+    })), textSection(role)) : textSection(role));
   }));
 };
 
-var _templateObject$M, _templateObject2$v, _templateObject3$o, _templateObject4$h, _templateObject5$d, _templateObject6$a, _templateObject7$7;
+var _templateObject$M, _templateObject2$v, _templateObject3$o, _templateObject4$i, _templateObject5$e, _templateObject6$b, _templateObject7$7;
 var LENGTH_TEXT = 28;
 var LENGTH_TEXT_TABLET$1 = 10;
 var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$M || (_templateObject$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  grid-template-areas: ", ";\n\n  @media ", " {\n    & {\n      grid-template-areas: ", ";\n    }\n  }\n\n  @media ", " {\n    & {\n      grid-template-columns: var(--grid-margin) minmax(0, 1fr) var(--grid-margin);\n      grid-template-rows: min-content 24px min-content;\n      gap: 0;\n      grid-template-areas:\n        'row1 row1 row1'\n        '. . .'\n        '. row2 .';\n    }\n  }\n"])), function (_ref) {
@@ -5301,9 +5328,9 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
   var imageToLeft = _ref4.imageToLeft;
   return imageToLeft ? 'right' : 'left';
 }, devices.mobile);
-var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$h || (_templateObject4$h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 32px 0;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      margin: 0 0 24px 0;\n    }\n  }\n"])), devices.mobile);
-var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$d || (_templateObject5$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
+var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$i || (_templateObject4$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 32px 0;\n\n  h2,\n  h3 {\n    margin: 0;\n  }\n\n  @media ", " {\n    & {\n      margin: 0 0 24px 0;\n    }\n  }\n"])), devices.mobile);
+var PromoWithTitleSubtitle = /*#__PURE__*/styled__default.span(_templateObject5$e || (_templateObject5$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-size: var(--font-size-subtitle-1);\n  font-weight: var(--font-weight-subtitle-1);\n  line-height: var(--line-height-subtitle-1);\n  letter-spacing: var(--letter-spacing-subtitle-1);\n  text-transform: var(--text-transform-subtitle);\n  margin-bottom: var(--editorial-subtitle-margin-bottom);\n  display: block;\n  overflow-wrap: break-word;\n"])));
+var PromoWithTitleText = /*#__PURE__*/styled__default.div(_templateObject6$b || (_templateObject6$b = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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  line-height: var(--line-height-body-1);\n  letter-spacing: var(--letter-spacing-body-1);\n  text-transform: var(--text-transform-body);\n  margin: 0;\n  padding: 0;\n  white-space: break-spaces;\n  overflow-wrap: break-word;\n\n  em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  a {\n    text-decoration: underline;\n    cursor: pointer;\n\n    &[href^='tel:'] {\n      text-decoration: none;\n    }\n\n    &:link {\n      color: ", ";\n    }\n\n    &:visited {\n      color: ", ";\n    }\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), function (_ref5) {
   var theme = _ref5.theme;
   return theme.colors.black;
 }, function (_ref6) {
@@ -5506,7 +5533,7 @@ var ImageWithCaption = function ImageWithCaption(_ref) {
 };
 
 var _templateObject$Q, _templateObject2$x, _templateObject3$p;
-var TextWrapper$2 = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
+var TextWrapper$3 = /*#__PURE__*/styled__default.div(_templateObject$Q || (_templateObject$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h4 {\n    margin: 0;\n  }\n"])));
 var AttributionWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
   var displayAttribution = _ref.displayAttribution;
   return "display: " + (displayAttribution ? 'block' : 'none') + ";";
@@ -5521,7 +5548,7 @@ var Quote = function Quote(_ref) {
     columnSpanDesktop: 8,
     columnStartDevice: 2,
     columnSpanDevice: 12
-  }, /*#__PURE__*/React__default.createElement(TextWrapper$2, null, /*#__PURE__*/React__default.createElement(AltHeader, {
+  }, /*#__PURE__*/React__default.createElement(TextWrapper$3, null, /*#__PURE__*/React__default.createElement(AltHeader, {
     level: 4
   }, /*#__PURE__*/React__default.createElement("div", {
     dangerouslySetInnerHTML: {