@royaloperahouse/chord 2.4.3-f-chord-development → 2.4.4-a-chord-development

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.4.4]
+- Table Component: Accessibility improvements
+
 ## [2.4.3]
 - Fix Page Heading spacing around the title
 

package/dist/chord.cjs.development.js

@@ -10277,14 +10277,18 @@ var MiniCard = function MiniCard(_ref) {
   }, title)))));
 };
 
-var _templateObject$1g, _templateObject2$U, _templateObject3$L, _templateObject4$A;
+var _templateObject$1g, _templateObject2$U, _templateObject3$L, _templateObject4$A, _templateObject5$s;
 var ReadMoreContainer = /*#__PURE__*/styled__default.div(_templateObject$1g || (_templateObject$1g = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0px 0px 12px 0px !important;\n  }\n  width: 100%;\n"])));
 var LinkContainer = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-top: 24px;\n  gap: 8px;\n\n  :hover {\n    cursor: pointer;\n  }\n\n  @media print {\n    visibility: hidden;\n  }\n"])));
 var FullTextContainer = /*#__PURE__*/styled__default.div(_templateObject3$L || (_templateObject3$L = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: visible;\n  }\n"])), function (_ref) {
   var isVisible = _ref.isVisible;
   return isVisible ? 'visible' : 'hidden';
 });
-var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s ease;\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"])));
+var IntroTextContainer = /*#__PURE__*/styled__default.div(_templateObject4$A || (_templateObject4$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n\n  @media print {\n    visibility: hidden;\n  }\n"])), function (_ref2) {
+  var isVisible = _ref2.isVisible;
+  return isVisible ? 'visible' : 'hidden';
+});
+var ContentContainer$5 = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow: auto;\n  transition: max-height 0.4s ease;\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  @media print {\n    visibility: visible;\n    max-height: 900px !important;\n  }\n\n"])));
 
 var keyDown = function keyDown(e, toggleFunction) {
   if (e.key === 'Enter' || e.key === 'Space') {
@@ -10317,7 +10321,7 @@ var ReadMore = function ReadMore(_ref) {
     if (readMoreContent != null && readMoreContent.current && initOpen) {
       setTextHeight(readMoreContent.current.scrollHeight + "px");
     }
-  }, [readMoreContent, initOpen, isFullTextOpen]);
+  }, [readMoreContent, initOpen]);
 
   var toggleFullText = function toggleFullText() {
     if (!fullText) return;
@@ -10334,8 +10338,8 @@ var ReadMore = function ReadMore(_ref) {
   var truncatedText = truncate ? truncateReactNodeString(introText != null ? introText : '', INTRO_CHAR_LIMIT, true) : introText;
 
   var IntroText = function IntroText() {
-    return introText ? /*#__PURE__*/React__default.createElement(ContentContainer$5, null, /*#__PURE__*/React__default.createElement(FullTextContainer, {
-      isVisible: true
+    return introText ? /*#__PURE__*/React__default.createElement(ContentContainer$5, null, /*#__PURE__*/React__default.createElement(IntroTextContainer, {
+      isVisible: !isFullTextOpen
     }, truncate ? /*#__PURE__*/React__default.createElement("div", {
       dangerouslySetInnerHTML: {
         __html: "" + truncatedText
@@ -10371,7 +10375,7 @@ var ReadMore = function ReadMore(_ref) {
   }, isFullTextOpen ? "" + hideText : "" + showMoreText)));
 };
 
-var _templateObject$1h, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$s, _templateObject6$n;
+var _templateObject$1h, _templateObject2$V, _templateObject3$M, _templateObject4$B, _templateObject5$t, _templateObject6$n;
 var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$1h || (_templateObject$1h = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n"])));
 var Sections = /*#__PURE__*/styled__default.div(_templateObject2$V || (_templateObject2$V = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n"])));
 var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateObject3$M = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  flex: 1;\n  height: 2px;\n  background-color: ", ";\n"])), function (_ref) {
@@ -10379,7 +10383,7 @@ var Section = /*#__PURE__*/styled__default.div(_templateObject3$M || (_templateO
   return "var(--base-color-" + color + ")";
 });
 var BottomLine = /*#__PURE__*/styled__default.div(_templateObject4$B || (_templateObject4$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n"])));
-var Text = /*#__PURE__*/styled__default.div(_templateObject5$s || (_templateObject5$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
+var Text = /*#__PURE__*/styled__default.div(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), function (_ref2) {
   var color = _ref2.color;
   return "var(--base-color-" + color + ")";
 });
@@ -10469,7 +10473,7 @@ var PasswordStrength = function PasswordStrength(_ref) {
   }, strengthLabel))));
 };
 
-var _templateObject$1i, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$t;
+var _templateObject$1i, _templateObject2$W, _templateObject3$N, _templateObject4$C, _templateObject5$u;
 var MenuContainer$2 = /*#__PURE__*/styled__default.nav(_templateObject$1i || (_templateObject$1i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  padding: 0;\n  margin: 0;\n"])));
 var MenuList = /*#__PURE__*/styled__default.ul(_templateObject2$W || (_templateObject2$W = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  border-right: 1px solid var(--base-color-", ");\n  li {\n    margin-left: -5px;\n  }\n"])), exports.Colors.LightGrey);
 var MobileButton = /*#__PURE__*/styled__default.button(_templateObject3$N || (_templateObject3$N = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  line-height: var(--line-height-navigation);\n  font-size: var(--font-size-navigation);\n  font-family: var(--font-family-navigation);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--letter-spacing-navigation);\n  color: var(--base-color-", ");\n  text-transform: uppercase;\n  margin: 0;\n  padding: 16px 46px 14px 20px;\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-radius: 0;\n  display: block;\n  width: 100%;\n  text-align: left;\n  cursor: pointer;\n  position: relative;\n  span {\n    width: 25px;\n    height: 25px;\n    position: absolute;\n    top: 50%;\n    margin-top: -12px;\n    right: 10px;\n  }\n"])), exports.Colors.Black, exports.Colors.White, exports.Colors.DarkGrey);
@@ -10477,7 +10481,7 @@ var MenuItem$1 = /*#__PURE__*/styled__default.a(_templateObject4$C || (_template
   var isActive = _ref.isActive;
   return isActive ? "var(--base-color-" + exports.Colors.MidGrey + ")" : 'none';
 }, exports.Colors.MidGrey);
-var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$t || (_templateObject5$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  display: ", ";\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-top: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), function (_ref2) {
+var MobileMenuList = /*#__PURE__*/styled__default.ul(_templateObject5$u || (_templateObject5$u = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  display: ", ";\n  background: var(--base-color-", ");\n  border: 1px solid var(--base-color-", ");\n  border-top: 0;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  right: 0;\n  ", " {\n    padding: 16px 20px 15px 20px;\n  }\n"])), function (_ref2) {
   var isOpen = _ref2.isOpen;
   return isOpen ? 'block' : 'none';
 }, exports.Colors.White, exports.Colors.DarkGrey, MenuItem$1);
@@ -10647,27 +10651,28 @@ var AuxiliaryNav = function AuxiliaryNav(_ref6) {
   });
 };
 
-var _templateObject$1j, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$u, _templateObject6$o, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7, _templateObject11$4;
+var _templateObject$1j, _templateObject2$X, _templateObject3$O, _templateObject4$D, _templateObject5$v, _templateObject6$o, _templateObject7$f, _templateObject8$c, _templateObject9$7, _templateObject10$7;
 var TableContainer = /*#__PURE__*/styled__default.table(_templateObject$1j || (_templateObject$1j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-collapse: collapse;\n"])));
 var Container$6 = /*#__PURE__*/styled__default.div(_templateObject2$X || (_templateObject2$X = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n"])));
 var Wrapper$7 = /*#__PURE__*/styled__default.div(_templateObject3$O || (_templateObject3$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
-var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  text-transform: uppercase;\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
+var TableHeader = /*#__PURE__*/styled__default.th(_templateObject4$D || (_templateObject4$D = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: var(--font-size-subtitle-2);\n  font-family: var(--font-family-subtitle);\n  font-feature-settings: var(--font-feature-settings-subtitle);\n  font-weight: var(--font-weight-subtitle-2);\n  letter-spacing: var(--letter-spacing-subtitle-2);\n  line-height: var(--line-height-subtitle-2);\n  padding: 30px 30px 30px 0;\n  text-align: left;\n  text-transform: uppercase;\n  border-bottom: 1px solid;\n  border-top: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    white-space: nowrap;\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  @media ", " {\n    &:last-child {\n      white-space: nowrap;\n    }\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n\n    &:last-child {\n      white-space: normal;\n    }\n  }\n"])), function (props) {
+  return "var(--base-color-" + props.lineColor + ")";
+}, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.tablet, devices.mobile);
-var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$u || (_templateObject5$u = /*#__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  padding: 30px 30px 30px 0;\n  text-align: left;\n  vertical-align: top;\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n  }\n"])), function (props) {
+var TableCell = /*#__PURE__*/styled__default.td(_templateObject5$v || (_templateObject5$v = /*#__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  padding: 30px 30px 30px 0;\n  text-align: left;\n  vertical-align: top;\n  border-bottom: 1px solid;\n  border-color: ", ";\n\n  &:last-child {\n    width: auto;\n  }\n\n  &:not(:last-child) {\n    width: ", ";\n  }\n\n  > span > svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  @media ", " {\n    padding: 20px 20px 20px 0;\n  }\n"])), function (props) {
+  return "var(--base-color-" + props.lineColor + ")";
+}, function (props) {
   return "calc(100% / " + (props.columns - 1) + ")";
 }, devices.mobile);
-var LineContainer$1 = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 1px;\n  background-color: ", ";\n  width: 100%;\n"])), function (props) {
-  return "var(--base-color-" + props.lineColor + ")";
-});
-var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 0;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: none;\n  }\n"])));
-var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
+var Pagination$1 = /*#__PURE__*/styled__default.div(_templateObject6$o || (_templateObject6$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 0;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  list-style: none;\n  max-width: fit-content;\n  margin: auto;\n  li {\n    font-size: var(--font-size-subtitle-1);\n    font-weight: var(--font-weight-body-1);\n    line-height: var(--line-height-subtitle-1);\n    letter-spacing: var(--letter-spacing-subtitle-1);\n    margin-left: 16px;\n    color: var(--base-color-dark-grey);\n    display: flex;\n    align-items: center;\n    border-bottom: none;\n  }\n"])));
+var PageNumber$1 = /*#__PURE__*/styled__default.button(_templateObject7$f || (_templateObject7$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background: none;\n  border: none;\n  padding: 0;\n  font-size: inherit;\n  color: inherit;\n  cursor: pointer;\n  display: inline-block;\n  margin: 0;\n  border-bottom: 1px solid var(--base-color-transparent);\n  line-height: var(--base-line-height);\n  text-decoration: none;\n  font-family: var(--font-family-body-1);\n\n  :hover {\n    outline: none;\n    color: var(--base-color-core);\n    border-bottom: 1px solid var(--base-color-core);\n    svg > path {\n      fill: var(--base-color-core);\n    }\n  }\n\n  /* Active state */\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   return active === 'true' && "\n      color: var(--base-color-core);\n      border-bottom: 1px solid var(--base-color-core);\n    ";
 });
-var Next = /*#__PURE__*/styled__default.span(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
-var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n\n  div:hover {\n    background-color: var(--base-color-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--base-color-light-grey);\n  }\n\n  svg path {\n    fill: var(--base-color-black) !important;\n  }\n"])));
-var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject11$4 || (_templateObject11$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
+var Next = /*#__PURE__*/styled__default.span(_templateObject8$c || (_templateObject8$c = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  width: 25px;\n  align-items: center;\n  justify-content: center;\n  margin-left: 0;\n  span {\n    height: 1.5em;\n    svg > path {\n      fill: var(--base-color-dark-grey);\n    }\n  }\n"])));
+var ScrollButtons = /*#__PURE__*/styled__default.div(_templateObject9$7 || (_templateObject9$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: flex-end;\n  padding: 0 0 24px 0;\n\n  div:hover {\n    background-color: var(--base-color-light-grey);\n  }\n\n  > div > div {\n    background-color: var(--base-color-light-grey);\n  }\n\n  svg path {\n    fill: var(--base-color-black) !important;\n  }\n"])));
+var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject10$7 || (_templateObject10$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 var Content = function Content(_ref) {
   var content = _ref.content;
@@ -10677,25 +10682,37 @@ var Content = function Content(_ref) {
     }
   }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content);
 };
+var scrollTable = function scrollTable(tableRef, direction) {
+  if (tableRef.current) {
+    var currentScroll = tableRef.current.scrollLeft;
+    var scrollAmount = direction === 'left' ? -300 : 300;
+    tableRef.current.scrollTo({
+      left: currentScroll + scrollAmount,
+      behavior: 'smooth'
+    });
+  }
+};
 
-var Cell = function Cell(_ref2) {
-  var cell = _ref2.cell,
-      cellIndex = _ref2.cellIndex,
-      columns = _ref2.columns;
+var Cell = function Cell(_ref) {
+  var cell = _ref.cell,
+      cellIndex = _ref.cellIndex,
+      columns = _ref.columns,
+      lineColor = _ref.lineColor;
   return /*#__PURE__*/React__default.createElement(TableCell, {
     key: cellIndex,
     columns: columns,
-    role: "gridcell"
+    role: "gridcell",
+    lineColor: lineColor
   }, /*#__PURE__*/React__default.createElement(Content, {
     content: cell
   }));
 };
 
-var Row = function Row(_ref3) {
-  var row = _ref3.row,
-      rowIndex = _ref3.rowIndex,
-      columns = _ref3.columns,
-      lineColor = _ref3.lineColor;
+var Row = function Row(_ref) {
+  var row = _ref.row,
+      rowIndex = _ref.rowIndex,
+      columns = _ref.columns,
+      lineColor = _ref.lineColor;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
     key: rowIndex
   }, /*#__PURE__*/React__default.createElement("tr", null, row.map(function (cell, index) {
@@ -10703,37 +10720,20 @@ var Row = function Row(_ref3) {
       key: index,
       cell: cell,
       cellIndex: index,
-      columns: columns
-    });
-  })), /*#__PURE__*/React__default.createElement("tr", {
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React__default.createElement("td", {
-    colSpan: columns,
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
-    lineColor: lineColor
-  }))));
-};
-
-var scrollTable = function scrollTable(tableRef, direction) {
-  if (tableRef.current) {
-    var currentScroll = tableRef.current.scrollLeft;
-    var scrollAmount = direction === 'left' ? -300 : 300;
-    tableRef.current.scrollTo({
-      left: currentScroll + scrollAmount,
-      behavior: 'smooth'
+      columns: columns,
+      lineColor: lineColor
     });
-  }
+  })));
 };
 
-var Table = function Table(_ref4) {
-  var columns = _ref4.columns,
-      headings = _ref4.headings,
-      children = _ref4.children,
-      lineColors = _ref4.lineColors,
-      rowsPerPage = _ref4.rowsPerPage,
-      pagination = _ref4.pagination,
-      description = _ref4.description;
+var Table = function Table(_ref) {
+  var columns = _ref.columns,
+      headings = _ref.headings,
+      children = _ref.children,
+      lineColors = _ref.lineColors,
+      rowsPerPage = _ref.rowsPerPage,
+      pagination = _ref.pagination,
+      description = _ref.description;
 
   var _useState = React.useState(0),
       currentPage = _useState[0],
@@ -10754,7 +10754,6 @@ var Table = function Table(_ref4) {
 
     horizontalScroll();
     window.addEventListener('resize', horizontalScroll);
-    console.log('~~~ horizontal Scroll ~~~');
     return function () {
       return window.removeEventListener('resize', horizontalScroll);
     };
@@ -10793,19 +10792,12 @@ var Table = function Table(_ref4) {
       key: index,
       role: "columnheader",
       scope: "col",
-      columns: columns
+      columns: columns,
+      lineColor: lineColor
     }, /*#__PURE__*/React__default.createElement(Content, {
       content: heading
     }));
-  })), /*#__PURE__*/React__default.createElement("tr", {
-    "aria-hidden": "true"
-  }, ' ', /*#__PURE__*/React__default.createElement("td", {
-    colSpan: columns,
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React__default.createElement(LineContainer$1, {
-    lineColor: lineColor,
-    role: "presentation"
-  })))), /*#__PURE__*/React__default.createElement("tbody", {
+  }))), /*#__PURE__*/React__default.createElement("tbody", {
     role: "rowgroup"
   }, ' ', Array.isArray(currentRows) && currentRows.map(function (row, rowIndex) {
     return /*#__PURE__*/React__default.createElement(Row, {