@royaloperahouse/harmonic 0.9.3-b → 0.9.3-d

package/dist/components/Typography/Typography.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { IGenericTypographyProps, IHarmonicHeaderProps } from '../../types/typography';
+import { IBodyCopyHarmonicProps, IGenericTypographyProps, IHarmonicHeaderProps } from '../../types/typography';
 export declare const DisplayHeader: ({ children, size, em, color, serif, className }: IGenericTypographyProps) => React.JSX.Element;
 export declare const HarmonicHeader: ({ children, size, em, color, serif, hierarchy: Tag, className, }: IHarmonicHeaderProps) => React.JSX.Element;
 export declare const HarmonicSubtitle: ({ children, size, color, className }: IGenericTypographyProps) => React.JSX.Element;
-export declare const BodyCopyHarmonic: ({ children, size, color, className, bold, ...props }: IGenericTypographyProps) => React.JSX.Element;
+export declare const BodyCopyHarmonic: ({ children, size, color, className, bold, tag: Tag, ...props }: IBodyCopyHarmonicProps) => React.JSX.Element;
 export declare const HarmonicOverline: ({ children, size, color, className, ...props }: IGenericTypographyProps) => React.JSX.Element;
 export declare const ButtonText: ({ children, color, className }: IGenericTypographyProps) => React.JSX.Element;
 export declare const Caption: ({ children, color, className }: IGenericTypographyProps) => React.JSX.Element;

package/dist/harmonic.cjs.development.js

@@ -205,7 +205,7 @@ var createClassNames = function createClassNames(baseClass, options, styles) {
 
 var typographyStyles = {"display":"typography-module_display__ZHsz9","header":"typography-module_header__FVsLI","subtitle":"typography-module_subtitle__x3sSn","bodycopy":"typography-module_bodycopy__-BY2U","overline":"typography-module_overline__y1yCC","buttontext":"typography-module_buttontext__Gp0W-","captiontext":"typography-module_captiontext__zyA--","navigationtext":"typography-module_navigationtext__Qj6Zw","display--large":"typography-module_display--large__RwPQD","display--small":"typography-module_display--small__XWUSJ","header--large":"typography-module_header--large__2vP3p","header--medium":"typography-module_header--medium__OgzlB","header--small":"typography-module_header--small__zLuFf","subtitle--large":"typography-module_subtitle--large__1Ep9J","subtitle--small":"typography-module_subtitle--small__Vt9bZ","bodycopy--large":"typography-module_bodycopy--large__BNzf2","bodycopy--medium":"typography-module_bodycopy--medium__cwJEu","bodycopy--small":"typography-module_bodycopy--small__fTLSM","overline--large":"typography-module_overline--large__79WUM","overline--small":"typography-module_overline--small__MGEG6","display--primary":"typography-module_display--primary__9sTwU","header--primary":"typography-module_header--primary__KF0PJ","subtitle--primary":"typography-module_subtitle--primary__yL-hS","bodycopy--primary":"typography-module_bodycopy--primary__5Uo2D","overline--primary":"typography-module_overline--primary__a2NSa","buttontext--primary":"typography-module_buttontext--primary__HnmE3","captiontext--primary":"typography-module_captiontext--primary__mmafI","navigationtext--primary":"typography-module_navigationtext--primary__vIsUl","display--black":"typography-module_display--black__8hmsx","header--black":"typography-module_header--black__M3I14","subtitle--black":"typography-module_subtitle--black__IQRSo","bodycopy--black":"typography-module_bodycopy--black__J8BNP","overline--black":"typography-module_overline--black__RUDoj","buttontext--black":"typography-module_buttontext--black__irjmz","captiontext--black":"typography-module_captiontext--black__7axhP","navigationtext--black":"typography-module_navigationtext--black__wDz-G","display--white":"typography-module_display--white__3QA6W","header--white":"typography-module_header--white__mm-ex","subtitle--white":"typography-module_subtitle--white__VzQ3K","bodycopy--white":"typography-module_bodycopy--white__NJ8J8","overline--white":"typography-module_overline--white__cV5QV","buttontext--white":"typography-module_buttontext--white__rrr8U","captiontext--white":"typography-module_captiontext--white__OMFwW","navigationtext--white":"typography-module_navigationtext--white__5YDdY","display--red":"typography-module_display--red__khdLJ","header--red":"typography-module_header--red__hxuj9","subtitle--red":"typography-module_subtitle--red__gSK7d","bodycopy--red":"typography-module_bodycopy--red__P5Mau","overline--red":"typography-module_overline--red__OW5dE","buttontext--red":"typography-module_buttontext--red__mlRi2","captiontext--red":"typography-module_captiontext--red__jMQIK","navigationtext--red":"typography-module_navigationtext--red__-QADV","display--grey":"typography-module_display--grey__RsgTf","header--grey":"typography-module_header--grey__rC0vN","subtitle--grey":"typography-module_subtitle--grey__1nkEx","bodycopy--grey":"typography-module_bodycopy--grey__SNnaU","overline--grey":"typography-module_overline--grey__lGOsK","buttontext--grey":"typography-module_buttontext--grey__1Y4oX","captiontext--grey":"typography-module_captiontext--grey__V0MLc","navigationtext--grey":"typography-module_navigationtext--grey__xi3sz","display--inherit":"typography-module_display--inherit__ZNOHM","header--inherit":"typography-module_header--inherit__qmHQE","subtitle--inherit":"typography-module_subtitle--inherit__mly-X","bodycopy--inherit":"typography-module_bodycopy--inherit__CoC-f","overline--inherit":"typography-module_overline--inherit__Cq4ni","buttontext--inherit":"typography-module_buttontext--inherit__vguWx","captiontext--inherit":"typography-module_captiontext--inherit__ya6gm","navigationtext--inherit":"typography-module_navigationtext--inherit__cJLWf","display--serif":"typography-module_display--serif__C0-Ve","header--serif":"typography-module_header--serif__uTGCc","display--em":"typography-module_display--em__h2bPV","header--em":"typography-module_header--em__UFQIA","display--bold":"typography-module_display--bold__PG-8g","header--bold":"typography-module_header--bold__InvJk","subtitle--bold":"typography-module_subtitle--bold__Subov","bodycopy--bold":"typography-module_bodycopy--bold__nZX3C","overline--bold":"typography-module_overline--bold__3mUXy","buttontext--bold":"typography-module_buttontext--bold__rBKIJ","captiontext--bold":"typography-module_captiontext--bold__ebTyV","navigationtext--bold":"typography-module_navigationtext--bold__SRlV2"};
 
-var _excluded = ["children", "size", "color", "className", "bold"],
+var _excluded = ["children", "size", "color", "className", "bold", "tag"],
   _excluded2 = ["children", "size", "color", "className"];
 /* ~~~ Headers - size and hierarchy set separately ~~~ */
 var HarmonicHeader = function HarmonicHeader(_ref2) {
@@ -253,6 +253,8 @@ var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
     color = _ref4$color === void 0 ? 'inherit' : _ref4$color,
     className = _ref4.className,
     bold = _ref4.bold,
+    _ref4$tag = _ref4.tag,
+    Tag = _ref4$tag === void 0 ? 'p' : _ref4$tag,
     props = _objectWithoutPropertiesLoose(_ref4, _excluded);
   var classNames = createClassNames('bodycopy', {
     size: size,
@@ -260,7 +262,7 @@ var BodyCopyHarmonic = function BodyCopyHarmonic(_ref4) {
     bold: bold,
     className: className
   }, typographyStyles);
-  return /*#__PURE__*/React__default.createElement("p", Object.assign({
+  return /*#__PURE__*/React__default.createElement(Tag, Object.assign({
     className: classNames
   }, props), children);
 };
@@ -6878,7 +6880,7 @@ var Theme = function Theme(_ref) {
 };
 
 var _templateObject$I;
-var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-black);\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n\n  & h1,\n  h2,\n  h3,\n  h4 {\n    font-feature-settings: var(--font-feature-settings-header);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 80px 0 16px;\n\n    @media ", " {\n      margin-top: 60px;\n    }\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 80px 0 16px;\n\n    @media ", " {\n      margin-top: 60px;\n    }\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: var(--color-base-black);\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  & ul {\n    padding: 0;\n    list-style: none;\n    margin: 0 0 0 30px;\n\n    li {\n      text-indent: -20px;\n      line-height: var(--line-height-listing);\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0 0 0 20px;\n\n    li {\n      line-height: var(--line-height-listing);\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    width: 0px;\n    margin-left: 12px;\n    margin-right: 8px;\n  }\n"])), devices.mobileAndTablet, devices.mobileAndTablet);
+var TextContainer$1 = /*#__PURE__*/styled__default.div(_templateObject$I || (_templateObject$I = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-base-black);\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-body);\n\n  & h1,\n  h2,\n  h3,\n  h4 {\n    font-feature-settings: var(--font-feature-settings-header);\n    text-transform: var(--text-transform-header);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 0px;\n    }\n  }\n\n  & h5,\n  h6 {\n    font-feature-settings: var(--font-feature-settings-subtitle);\n    text-transform: var(--text-transform-subtitle);\n    white-space: break-spaces;\n    overflow-wrap: break-word;\n    margin: 60px 0 16px;\n\n    + p {\n      margin-top: 10px;\n    }\n  }\n\n  & a {\n    color: var(--color-base-black);\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  p {\n    margin: 30px 0;\n  }\n\n  & ul {\n    padding: 0;\n    list-style: none;\n    margin: 0 0 0 30px;\n\n    li {\n      text-indent: -20px;\n      line-height: var(--line-height-listing);\n    }\n  }\n\n  & ol {\n    padding: 0;\n    margin: 0 0 0 20px;\n\n    li {\n      line-height: var(--line-height-listing);\n    }\n  }\n\n  & ul > li:before {\n    display: inline-block;\n    content: '\u2014';\n    width: 0px;\n    margin-left: 12px;\n    margin-right: 8px;\n  }\n"])));
 
 var addTypographyClasses = function addTypographyClasses(html) {
   return html.replace(/<h1>/g, "<h1 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h2>/g, "<h2 class=\"" + typographyStyles.header + " " + typographyStyles['header--large'] + "\">").replace(/<h3>/g, "<h3 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h4>/g, "<h4 class=\"" + typographyStyles.header + " " + typographyStyles['header--medium'] + "\">").replace(/<h5>/g, "<h5 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">").replace(/<h6>/g, "<h6 class=\"" + typographyStyles.header + " " + typographyStyles['header--small'] + "\">");