@royaloperahouse/harmonic 1.0.6-e → 1.0.6-g

package/dist/harmonic.esm.js

@@ -5543,22 +5543,25 @@ var NavTopContainer = /*#__PURE__*/styled.div(_templateObject12 || (_templateObj
 var NavTopContainerMobile = /*#__PURE__*/styled.div(_templateObject13 || (_templateObject13 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n\n  @media ", " {\n    display: flex;\n    width: fit-content;\n    align-items: center;\n    height: 10%;\n    margin-left: 20px;\n    padding-bottom: 36px;\n  }\n"])), devices.mobileAndTablet);
 
 var _templateObject$B, _templateObject2$q, _templateObject3$f, _templateObject4$e, _templateObject5$a, _templateObject6$6, _templateObject7$4;
-var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  border-top: 2px solid var(--color-base-light-grey);\n  border-bottom: ", ";\n"])), function (_ref) {
-  var showLine = _ref.showLine;
-  return showLine ? '2px solid var(--color-base-light-grey)' : 'none';
+var AccordionContainer = /*#__PURE__*/styled.div(_templateObject$B || (_templateObject$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  border-top: ", ";\n  border-bottom: ", ";\n"])), function (_ref) {
+  var showTopLine = _ref.showTopLine;
+  return showTopLine ? '2px solid var(--color-base-light-grey)' : 'none';
+}, function (_ref2) {
+  var showBottomLine = _ref2.showBottomLine;
+  return showBottomLine ? '2px solid var(--color-base-light-grey)' : 'none';
 });
-var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  opacity: ", ";\n  transition: opacity 0.2s ease;\n  pointer-events: ", ";\n\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n  \n  @media print { \n    visibility: visible;\n  }\n}\n"])), function (_ref2) {
-  var isVisible = _ref2.isVisible;
-  return isVisible ? 1 : 0;
-}, function (_ref3) {
+var ChildrenContainer = /*#__PURE__*/styled.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0px 20px 28px 20px;\n\n  opacity: ", ";\n  transition: opacity 0.2s ease;\n  pointer-events: ", ";\n\n\n  @media ", " {\n    margin: 12px 0px 24px 0px;\n  }\n  \n  @media print { \n    visibility: visible;\n  }\n}\n"])), function (_ref3) {
   var isVisible = _ref3.isVisible;
+  return isVisible ? 1 : 0;
+}, function (_ref4) {
+  var isVisible = _ref4.isVisible;
   return isVisible ? 'auto' : 'none';
 }, devices.mobile);
-var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 28px;\n  padding-bottom: 28px;\n  color: var(--color-primary-black);\n\n  && svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  :hover {\n    cursor: ", ";\n    pointer-events: ", ";\n  }\n\n  @media ", " {\n    padding-top: 16px;\n    padding-bottom: 16px;\n  }\n"])), function (_ref4) {
-  var hasChildren = _ref4.hasChildren;
-  return hasChildren ? 'pointer' : 'default';
-}, function (_ref5) {
+var TitleContainer$1 = /*#__PURE__*/styled.div(_templateObject3$f || (_templateObject3$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding-top: 28px;\n  padding-bottom: 28px;\n  color: var(--color-primary-black);\n\n  && svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  :hover {\n    cursor: ", ";\n    pointer-events: ", ";\n  }\n\n  @media ", " {\n    padding-top: 16px;\n    padding-bottom: 16px;\n  }\n"])), function (_ref5) {
   var hasChildren = _ref5.hasChildren;
+  return hasChildren ? 'pointer' : 'default';
+}, function (_ref6) {
+  var hasChildren = _ref6.hasChildren;
   return hasChildren ? 'auto' : 'none';
 }, devices.mobile);
 var TitleText = /*#__PURE__*/styled(HarmonicSubtitle)(_templateObject4$e || (_templateObject4$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: calc(100% - 32px);\n"])));
@@ -5567,14 +5570,14 @@ var ContentContainer = /*#__PURE__*/styled(ExtendedBodyCopyHarmonic).withConfig(
   shouldForwardProp: function shouldForwardProp(prop) {
     return prop !== 'textHeight';
   }
-})(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-height: ", ";\n  overflow: ", ";\n  margin-bottom: ", ";\n\n  @media print {\n    max-height: max-content;\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  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), function (_ref6) {
-  var textHeight = _ref6.textHeight;
-  return textHeight;
-}, function (_ref7) {
+})(_templateObject6$6 || (_templateObject6$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  max-height: ", ";\n  overflow: ", ";\n  margin-bottom: ", ";\n\n  @media print {\n    max-height: max-content;\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  @media ", " {\n    transition: 100% 0.2s ease;\n  }\n"])), function (_ref7) {
   var textHeight = _ref7.textHeight;
-  return textHeight === '0px' ? 'hidden' : 'visible';
+  return textHeight;
 }, function (_ref8) {
   var textHeight = _ref8.textHeight;
+  return textHeight === '0px' ? 'hidden' : 'visible';
+}, function (_ref9) {
+  var textHeight = _ref9.textHeight;
   return textHeight === '0px' ? '0px' : '12px';
 }, devices.mobile);
 var PrintHideWrapper = /*#__PURE__*/styled.div(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media print {\n    display: none;\n  }\n"])));
@@ -5596,14 +5599,17 @@ var Accordion = function Accordion(_ref) {
   var _expandedStateIcon$ic, _collapsedStateIcon$i;
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
-    _ref$showLine = _ref.showLine,
-    showLine = _ref$showLine === void 0 ? true : _ref$showLine,
+    _ref$showTopLine = _ref.showTopLine,
+    showTopLine = _ref$showTopLine === void 0 ? true : _ref$showTopLine,
+    _ref$showBottomLine = _ref.showBottomLine,
+    showBottomLine = _ref$showBottomLine === void 0 ? true : _ref$showBottomLine,
     children = _ref.children,
     _ref$initOpen = _ref.initOpen,
     initOpen = _ref$initOpen === void 0 ? false : _ref$initOpen,
     className = _ref.className,
     expandedStateIcon = _ref.expandedStateIcon,
-    collapsedStateIcon = _ref.collapsedStateIcon;
+    collapsedStateIcon = _ref.collapsedStateIcon,
+    childrenContainerStyle = _ref.childrenContainerStyle;
   var _useState = useState(initOpen),
     openAccordion = _useState[0],
     setOpenAccordion = _useState[1];
@@ -5739,7 +5745,8 @@ var Accordion = function Accordion(_ref) {
   };
   var contentContainerId = title + "-accordion-content";
   return /*#__PURE__*/React__default.createElement(AccordionContainer, {
-    showLine: showLine,
+    showTopLine: showTopLine,
+    showBottomLine: showBottomLine,
     className: className
   }, /*#__PURE__*/React__default.createElement(TitleContainer$1, {
     onClick: toggleAccordion,
@@ -5758,9 +5765,10 @@ var Accordion = function Accordion(_ref) {
     "aria-live": openAccordion ? 'polite' : 'off',
     tag: "div",
     size: "large"
-  }, childrenVisibility && /*#__PURE__*/React__default.createElement(ChildrenContainer, {
-    isVisible: childrenVisibility
-  }, children)));
+  }, childrenVisibility && (/*#__PURE__*/React__default.createElement(ChildrenContainer, {
+    isVisible: childrenVisibility,
+    style: childrenContainerStyle
+  }, children))));
 };
 
 var _templateObject$C;
@@ -5779,7 +5787,7 @@ var Accordions = function Accordions(_ref) {
     return /*#__PURE__*/React__default.createElement(Accordion, {
       key: accordion.title + "-" + index,
       title: accordion.title,
-      showLine: isLastAccordion(index),
+      showBottomLine: isLastAccordion(index),
       expandedStateIcon: accordion.expandedStateIcon,
       collapsedStateIcon: accordion.collapsedStateIcon
     }, accordion.children);
@@ -10659,7 +10667,8 @@ var ReadMore = function ReadMore(_ref) {
   return /*#__PURE__*/React__default.createElement(AccordionContainer, {
     tabIndex: 0,
     onKeyDown: handleKeyDown,
-    className: className
+    className: className,
+    showTopLine: false
   }, /*#__PURE__*/React__default.createElement(ReadMoreContainer, {
     "aria-label": title,
     "aria-expanded": isFullTextOpen,