@royaloperahouse/chord 0.3.7 → 0.3.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## [0.3.8]
+- Add possibility to configure GridItem for TextOnly component
+- Rich Text Editor Styling fix
+- Tweaks to Button layout for components
+- Anchor navigation arrows fix
+
 ## [0.3.7]
 - Typography change for Subtitle 2
 - AltHeader, BodyText, Header, Overline and Subtitle Components
@@ -8,33 +14,33 @@
 - made 'devices' public
 
 ## [0.3.6]
--   PageHeading Component
--   SectionTitle multiline fix
+- PageHeading Component
+- SectionTitle multiline fix
 
 ## [0.3.5]
--   Fix for Searchbox border on iOS
--   Fix for Accordion - Mobile Styling Issue
--   Fix for Card Component - Styling Issues
--   Change in Search layout
+- Fix for Searchbox border on iOS
+- Fix for Accordion - Mobile Styling Issue
+- Fix for Card Component - Styling Issues
+- Change in Search layout
 
 ## [0.3.4]
--   Added Rotator Buttons
--   General Gotham SSm A & B font setup fixes
--   Fix for Footer font and size in mobile view
--   Subtitles 2 typography changes
+- Added Rotator Buttons
+- General Gotham SSm A & B font setup fixes
+- Fix for Footer font and size in mobile view
+- Subtitles 2 typography changes
 
 ## [0.3.3]
--   Added AnchorTapBar Component
--   Added Accordion Component
--   Added Card Component
--   Fixes to fonts setup
--   Fix for Navigation Search font and mobile view
+- Added AnchorTapBar Component
+- Added Accordion Component
+- Added Card Component
+- Fixes to fonts setup
+- Fix for Navigation Search font and mobile view
 
 ## [0.3.0]
--   Design system project renamed and moved to chord
+- Design system project renamed and moved to chord
 
 ## [0.2.0]
--   public NPM Library 
+- public NPM Library 
 
 ## [0.1.0]
--   Initial version
+- Initial version

package/dist/chord.cjs.development.js

@@ -3511,7 +3511,7 @@ var TabsList = /*#__PURE__*/styled__default.ul(_templateObject7$2 || (_templateO
   var tabsOverflow = _ref3.tabsOverflow;
   return tabsOverflow ? 'calc(100% - 50px)' : '100%';
 });
-var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 74px;\n  height: var(--anchor-tabs-height);\n  background-color: var(--base-color-white);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n\n  @media ", " {\n    & {\n      width: 50px;\n    }\n  }\n"])), devices.mobile);
+var ArrowsContainer = /*#__PURE__*/styled__default.div(_templateObject8$2 || (_templateObject8$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 74px;\n  height: var(--anchor-tabs-height);\n  background-color: var(--base-color-white);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n"])));
 var ArrowWrapper = /*#__PURE__*/styled__default.div(_templateObject9$1 || (_templateObject9$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 24px;\n  height: 24px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: flex-center;\n\n  :hover {\n    && svg path {\n      fill: var(--base-color-primary);\n    }\n  }\n"])));
 var ButtonsMobileWrapper = /*#__PURE__*/styled__default.div(_templateObject10 || (_templateObject10 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    & {\n      display: block;\n    }\n  }\n"])), devices.mobile);
 var PrimaryButtonReverse = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject11 || (_templateObject11 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (_ref4) {
@@ -3737,6 +3737,9 @@ var Accordions = function Accordions(_ref) {
 };
 
 var _templateObject$y, _templateObject2$i, _templateObject3$c, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$3;
+var LENGTH_LARGE_TEXT = 28;
+var LENGTH_SMALL_TEXT = 19;
+var LENGTH_TEXT_TABLET = 10;
 var CardContainer = /*#__PURE__*/styled__default.div(_templateObject$y || (_templateObject$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n\n  .targetLink {\n    text-decoration: none;\n    color: inherit;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
 var HoverContainer = /*#__PURE__*/styled__default.div(_templateObject2$i || (_templateObject2$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: var(--editorial-spacing-hover);\n  background-color: var(--base-color-primary);\n  position: absolute;\n  width: 100%;\n  z-index: 10;\n"])));
 var ProgressContainer = /*#__PURE__*/styled__default.div(_templateObject3$c || (_templateObject3$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: -10px;\n"])));
@@ -3744,7 +3747,28 @@ var ContentContainer$1 = /*#__PURE__*/styled__default.div(_templateObject4$8 ||
 var TitleContainer$2 = /*#__PURE__*/styled__default.div(_templateObject5$6 || (_templateObject5$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: calc(-1 * var(--editorial-margin-between)) 0 calc(-1 * var(--editorial-margin-between)) 0;\n"])));
 var TextContainer = /*#__PURE__*/styled__default.div(_templateObject6$5 || (_templateObject6$5 = /*#__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-top: var(--editorial-spacing-hover);\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    font-style: normal;\n  }\n"])));
 var SubtitleContainer = /*#__PURE__*/styled__default.span(_templateObject7$3 || (_templateObject7$3 = /*#__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-2);\n  font-weight: var(--font-weight-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  text-transform: var(--text-transform-subtitle);\n  display: block;\n  overflow-wrap: break-word;\n"])));
-var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  opacity: 0;\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n  }\n"])), devices.mobile, devices.tablet);
+var ButtonsContainer$1 = /*#__PURE__*/styled__default.div(_templateObject8$3 || (_templateObject8$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  opacity: 0;\n  display: flex;\n  gap: 16px;\n  margin-top: var(--editorial-margin-between);\n\n  ", "\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  @media ", " {\n    opacity: 1 !important;\n    gap: 24px;\n    margin-top: 24px;\n    align-items: flex-start;\n\n    ", "\n  }\n"])), function (_ref) {
+  var size = _ref.size,
+      primaryButtonTextLength = _ref.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref.tertiaryButtonTextLength;
+  var isLinksLayoutColumn = size === 'small' ? primaryButtonTextLength >= LENGTH_SMALL_TEXT || tertiaryButtonTextLength >= LENGTH_SMALL_TEXT : primaryButtonTextLength >= LENGTH_LARGE_TEXT || tertiaryButtonTextLength >= LENGTH_LARGE_TEXT;
+
+  if (isLinksLayoutColumn) {
+    return "\n        flex-direction: column;\n      ";
+  }
+
+  return '';
+}, devices.mobile, devices.tablet, function (_ref2) {
+  var primaryButtonTextLength = _ref2.primaryButtonTextLength,
+      tertiaryButtonTextLength = _ref2.tertiaryButtonTextLength;
+  var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET;
+
+  if (isLinksLayoutColumnTablet) {
+    return "\n          flex-direction: column;\n        ";
+  }
+
+  return '';
+});
 
 var _templateObject$z, _templateObject2$j, _templateObject3$d;
 var ProgressView = /*#__PURE__*/styled__default.div(_templateObject$z || (_templateObject$z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 10px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n"])));
@@ -3771,21 +3795,30 @@ var Progress = function Progress(_ref) {
 
 var _excluded$8 = ["text"],
     _excluded2$1 = ["text"];
+var LENGTH_LARGE_TEXT$1 = 28;
+var LENGTH_SMALL_TEXT$1 = 19;
 
 var Card = function Card(_ref) {
   var _ref$progress = _ref.progress,
       progress = _ref$progress === void 0 ? 0 : _ref$progress,
-      title = _ref.title,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
       subtitle = _ref.subtitle,
       _ref$text = _ref.text,
       text = _ref$text === void 0 ? '' : _ref$text,
       links = _ref.links,
-      tags = _ref.tags,
+      _ref$tags = _ref.tags,
+      tags = _ref$tags === void 0 ? [] : _ref$tags,
       image = _ref.image,
       _ref$withContinueWatc = _ref.withContinueWatching,
       withContinueWatching = _ref$withContinueWatc === void 0 ? false : _ref$withContinueWatc,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'small' : _ref$size;
+
+  var truncate = function truncate(str, n) {
+    return str.length >= n ? str.substr(0, n) : str;
+  };
+
   var node = React.useRef();
 
   var _useState = React.useState(false),
@@ -3795,15 +3828,20 @@ var Card = function Card(_ref) {
   var primaryButton = links == null ? void 0 : links[0];
 
   var _ref2 = primaryButton || {},
-      primaryButtonText = _ref2.text,
+      _ref2$text = _ref2.text,
+      primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
       restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$8);
 
+  var primaryButtonTextTruncate = size === 'small' ? truncate(primaryButtonText, LENGTH_SMALL_TEXT$1) : truncate(primaryButtonText, LENGTH_LARGE_TEXT$1);
   var tertiaryButton = links == null ? void 0 : links[1];
 
   var _ref3 = tertiaryButton || {},
-      tertiaryButtonText = _ref3.text,
+      _ref3$text = _ref3.text,
+      tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
       restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$1);
 
+  var tertiaryButtonTextTruncate = size === 'small' ? truncate(tertiaryButtonText, LENGTH_SMALL_TEXT$1) : truncate(tertiaryButtonText, LENGTH_LARGE_TEXT$1);
+
   var hoverHandler = function hoverHandler(value) {
     if (value) {
       node.current.style.opacity = '1';
@@ -3816,10 +3854,6 @@ var Card = function Card(_ref) {
     setHovered(value);
   };
 
-  var truncate = function truncate(str, n) {
-    return str.length > n ? str.substr(0, n - 1) + '…' : str;
-  };
-
   return /*#__PURE__*/React__default.createElement(CardContainer, {
     onMouseOver: function onMouseOver() {
       return hoverHandler(true);
@@ -3829,8 +3863,8 @@ var Card = function Card(_ref) {
     },
     "data-testid": "cardcontainer"
   }, ' ', /*#__PURE__*/React__default.createElement("a", {
-    href: primaryButton.href,
-    target: primaryButton.target,
+    href: primaryButton == null ? void 0 : primaryButton.href,
+    target: primaryButton == null ? void 0 : primaryButton.target,
     className: "targetLink"
   }, hovered && /*#__PURE__*/React__default.createElement(HoverContainer, {
     "data-testid": "hovercontainer"
@@ -3842,8 +3876,8 @@ var Card = function Card(_ref) {
   })), withContinueWatching && /*#__PURE__*/React__default.createElement(ProgressContainer, null, /*#__PURE__*/React__default.createElement(Progress, {
     progress: progress
   }))), /*#__PURE__*/React__default.createElement(ContentContainer$1, null, /*#__PURE__*/React__default.createElement("a", {
-    href: primaryButton.href,
-    target: primaryButton.target,
+    href: primaryButton == null ? void 0 : primaryButton.href,
+    target: primaryButton == null ? void 0 : primaryButton.target,
     className: "targetLink"
   }, tags ? /*#__PURE__*/React__default.createElement(TypeTags, {
     list: tags
@@ -3855,8 +3889,11 @@ var Card = function Card(_ref) {
     }
   })), links ? /*#__PURE__*/React__default.createElement(ButtonsContainer$1, {
     ref: node,
-    "data-testid": "buttonscontainer"
-  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonText) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonText) : null) : null));
+    "data-testid": "buttonscontainer",
+    size: size,
+    primaryButtonTextLength: primaryButtonText.length,
+    tertiaryButtonTextLength: tertiaryButtonText.length
+  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
 };
 
 var _templateObject$A, _templateObject2$k;
@@ -4148,6 +4185,8 @@ var PeopleListing = function PeopleListing(_ref) {
 };
 
 var _templateObject$G, _templateObject2$p, _templateObject3$h, _templateObject4$c, _templateObject5$a, _templateObject6$8, _templateObject7$6;
+var LENGTH_TEXT = 28;
+var LENGTH_TEXT_TABLET$1 = 10;
 var PromoWithTitleGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$G || (_templateObject$G = /*#__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) {
   var imageToLeft = _ref.imageToLeft;
   return imageToLeft ? "'left left left left left left left left . right right right right right . .'" : "'. . left left left left left . right right right right right right right right'";
@@ -4166,35 +4205,70 @@ var PromoWithTitleContentWrapper = /*#__PURE__*/styled__default.div(_templateObj
 var PromoWithTitleContainer = /*#__PURE__*/styled__default.div(_templateObject4$c || (_templateObject4$c = /*#__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$a || (_templateObject5$a = /*#__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$8 || (_templateObject6$8 = /*#__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    font-style: normal;\n  }\n"])));
-var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 16px;\n  margin-top: 32px;\n\n  @media ", " {\n    gap: 24px;\n    margin-top: 24px;\n    flex-direction: column;\n    align-items: center;\n  }\n"])), devices.mobile);
+var ButtonsContainer$2 = /*#__PURE__*/styled__default.div(_templateObject7$6 || (_templateObject7$6 = /*#__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) {
+  var _ref5$primaryButtonTe = _ref5.primaryButtonTextLength,
+      primaryButtonTextLength = _ref5$primaryButtonTe === void 0 ? 0 : _ref5$primaryButtonTe,
+      _ref5$tertiaryButtonT = _ref5.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref5$tertiaryButtonT === void 0 ? 0 : _ref5$tertiaryButtonT;
+  var isLinksLayoutColumn = primaryButtonTextLength >= LENGTH_TEXT || tertiaryButtonTextLength >= LENGTH_TEXT;
+
+  if (isLinksLayoutColumn) {
+    return "\n        flex-direction: column;\n      ";
+  }
+
+  return '';
+}, devices.mobile, devices.tablet, function (_ref6) {
+  var _ref6$primaryButtonTe = _ref6.primaryButtonTextLength,
+      primaryButtonTextLength = _ref6$primaryButtonTe === void 0 ? 0 : _ref6$primaryButtonTe,
+      _ref6$tertiaryButtonT = _ref6.tertiaryButtonTextLength,
+      tertiaryButtonTextLength = _ref6$tertiaryButtonT === void 0 ? 0 : _ref6$tertiaryButtonT;
+  var isLinksLayoutColumnTablet = primaryButtonTextLength >= LENGTH_TEXT_TABLET$1 || tertiaryButtonTextLength >= LENGTH_TEXT_TABLET$1;
+
+  if (isLinksLayoutColumnTablet) {
+    return "\n          flex-direction: column;\n        ";
+  }
+
+  return '';
+});
 
 var _excluded$e = ["text"],
     _excluded2$2 = ["text"];
+var LENGTH_TEXT$1 = 28;
 
 var PromoWithTitle = function PromoWithTitle(_ref) {
   var _ref$imagePosition = _ref.imagePosition,
       imagePosition = _ref$imagePosition === void 0 ? 'left' : _ref$imagePosition,
-      title = _ref.title,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
       _ref$titleSize = _ref.titleSize,
       titleSize = _ref$titleSize === void 0 ? 'large' : _ref$titleSize,
       subtitle = _ref.subtitle,
       text = _ref.text,
       links = _ref.links,
       children = _ref.children;
+
+  var truncate = function truncate(str, n) {
+    return str.length >= n ? str.substr(0, n) : str;
+  };
+
   var imageToLeft = imagePosition === 'left';
   var titleLevel = titleSize === 'large' ? 2 : 3;
   var primaryButton = links == null ? void 0 : links[0];
 
   var _ref2 = primaryButton || {},
-      primaryButtonText = _ref2.text,
+      _ref2$text = _ref2.text,
+      primaryButtonText = _ref2$text === void 0 ? '' : _ref2$text,
       restPrimaryButton = _objectWithoutPropertiesLoose(_ref2, _excluded$e);
 
+  var primaryButtonTextTruncate = truncate(primaryButtonText, LENGTH_TEXT$1);
   var tertiaryButton = links == null ? void 0 : links[1];
 
   var _ref3 = tertiaryButton || {},
-      tertiaryButtonText = _ref3.text,
+      _ref3$text = _ref3.text,
+      tertiaryButtonText = _ref3$text === void 0 ? '' : _ref3$text,
       restTertiaryButton = _objectWithoutPropertiesLoose(_ref3, _excluded2$2);
 
+  var tertiaryButtonTextTruncate = truncate(tertiaryButtonText, LENGTH_TEXT$1);
   return /*#__PURE__*/React__default.createElement(PromoWithTitleGrid, {
     imageToLeft: imageToLeft
   }, /*#__PURE__*/React__default.createElement(PromoWithTitleImageWrapper, {
@@ -4212,8 +4286,10 @@ var PromoWithTitle = function PromoWithTitle(_ref) {
       __html: text
     }
   }), links ? /*#__PURE__*/React__default.createElement(ButtonsContainer$2, {
-    "data-testid": "buttons-wrapper"
-  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonText) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonText) : null) : null));
+    "data-testid": "buttons-wrapper",
+    primaryButtonTextLength: primaryButtonText.length,
+    tertiaryButtonTextLength: tertiaryButtonText.length
+  }, primaryButton ? /*#__PURE__*/React__default.createElement(PrimaryButton, Object.assign({}, restPrimaryButton), primaryButtonTextTruncate) : null, tertiaryButton ? /*#__PURE__*/React__default.createElement(Button$1, Object.assign({}, restTertiaryButton), tertiaryButtonTextTruncate) : null) : null));
 };
 
 var _templateObject$H;
@@ -4244,16 +4320,24 @@ var SectionTitle = function SectionTitle(_ref) {
 };
 
 var _templateObject$I;
-var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  & ul {\n    padding: 0;\n    list-style: none;\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    width: 20px;\n  }\n\n  & li {\n    line-height: var(--line-height-listing);\n  }\n"])));
+var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\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\n  & h1 {\n    font-size: var(--font-size-header-4);\n    font-family: var(--font-family-header);\n    font-feature-settings: var(--font-feature-settings-header);\n    font-weight: var(--font-weight-header-4);\n    letter-spacing: var(--letter-spacing-header-4);\n    line-height: var(--line-height-header-4);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & h2 {\n    font-size: var(--font-size-subtitle-1);\n    font-family: var(--font-family-subtitle);\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    font-weight: var(--font-weight-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    line-height: var(--line-height-subtitle-1);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n  }\n\n  & em {\n    font-family: var(--font-family-body-italics);\n  }\n\n  & u {\n    font-size: var(--font-size-body-1);\n    font-family: var(--font-family-body);\n  }\n\n  & ul {\n    padding: 0;\n    list-style: none;\n    margin-left: 20px;\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    width: 0px;\n    margin-left: 20px;\n  }\n\n  & li {\n    text-indent: -20px;\n    line-height: var(--line-height-listing);\n  }\n"])));
 
 var TextOnly = function TextOnly(_ref) {
   var _ref$text = _ref.text,
-      text = _ref$text === void 0 ? '' : _ref$text;
+      text = _ref$text === void 0 ? '' : _ref$text,
+      _ref$columnStartDeskt = _ref.columnStartDesktop,
+      columnStartDesktop = _ref$columnStartDeskt === void 0 ? 3 : _ref$columnStartDeskt,
+      _ref$columnSpanDeskto = _ref.columnSpanDesktop,
+      columnSpanDesktop = _ref$columnSpanDeskto === void 0 ? 8 : _ref$columnSpanDeskto,
+      _ref$columnStartDevic = _ref.columnStartDevice,
+      columnStartDevice = _ref$columnStartDevic === void 0 ? 2 : _ref$columnStartDevic,
+      _ref$columnSpanDevice = _ref.columnSpanDevice,
+      columnSpanDevice = _ref$columnSpanDevice === void 0 ? 12 : _ref$columnSpanDevice;
   return /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(GridItem, {
-    columnStartDesktop: 3,
-    columnSpanDesktop: 8,
-    columnStartDevice: 2,
-    columnSpanDevice: 12
+    columnStartDesktop: columnStartDesktop,
+    columnSpanDesktop: columnSpanDesktop,
+    columnStartDevice: columnStartDevice,
+    columnSpanDevice: columnSpanDevice
   }, /*#__PURE__*/React__default.createElement(TextContainer$1, {
     dangerouslySetInnerHTML: {
       __html: text