@kaizen/components 0.0.0-canary-stable-bundler-20240515025934 → 0.0.0-canary-stable-bundler-20240515064749

package/dist/cjs/Table/Table.cjs

@@ -47,6 +47,7 @@ var ratioToPercent = function (width) {
   return width != null ? "".concat(width * 100, "%") : width;
 };
 var TableHeaderRowCell = function (_a) {
+  var _b;
   var labelText = _a.labelText,
     onClick = _a.onClick,
     href = _a.href,
@@ -55,6 +56,7 @@ var TableHeaderRowCell = function (_a) {
     icon = _a.icon,
     checkable = _a.checkable,
     checkedStatus = _a.checkedStatus,
+    checkboxLabel = _a.checkboxLabel,
     onCheck = _a.onCheck,
     reversed = _a.reversed,
     sortingRaw = _a.sorting,
@@ -64,37 +66,29 @@ var TableHeaderRowCell = function (_a) {
     // cell with a word longer than the column width would push the columns out of
     // alignment? I'm not sure.
     // Anyway, we can override this default behaviour by setting wrapping to "wrap".
-    _b = _a.wrapping,
+    _c = _a.wrapping,
     // I can't say for certain why "nowrap" was the default value. Normally you wouldn't
     // want to clip off information because it doesn't fit on one line.
     // My assumption is that because since the cell width rows are decoupled, a heading
     // cell with a word longer than the column width would push the columns out of
     // alignment? I'm not sure.
     // Anyway, we can override this default behaviour by setting wrapping to "wrap".
-    wrapping = _b === void 0 ? "nowrap" : _b,
-    _c = _a.align,
-    align = _c === void 0 ? "start" : _c,
+    wrapping = _c === void 0 ? "nowrap" : _c,
+    _d = _a.align,
+    align = _d === void 0 ? "start" : _d,
     tooltipInfo = _a.tooltipInfo,
-    // If set, this will hide the tooltip exclamation icon. Useful in situations where
-    // the table header does not have enough space. However, we should always show a
-    // tooltip icon as the default based on design system tooltip guidelines.
-    _d = _a.isTooltipIconHidden,
-    // If set, this will hide the tooltip exclamation icon. Useful in situations where
-    // the table header does not have enough space. However, we should always show a
-    // tooltip icon as the default based on design system tooltip guidelines.
-    isTooltipIconHidden = _d === void 0 ? false : _d,
+    _e = _a.isTooltipIconHidden,
+    isTooltipIconHidden = _e === void 0 ? false : _e,
     tooltipPortalSelector = _a.tooltipPortalSelector,
-    // If set, this will show the arrow in the direction provided
-    // when the header cell is hovered over.
     sortingArrowsOnHover = _a.sortingArrowsOnHover,
     classNameOverride = _a.classNameOverride,
     // There aren't any other props in the type definition, so I'm unsure why we
     // have this spread.
-    otherProps = tslib.__rest(_a, ["labelText", "onClick", "href", "width", "flex", "icon", "checkable", "checkedStatus", "onCheck", "reversed", "sorting", "wrapping", "align", "tooltipInfo", "isTooltipIconHidden", "tooltipPortalSelector", "sortingArrowsOnHover", "classNameOverride"]);
+    otherProps = tslib.__rest(_a, ["labelText", "onClick", "href", "width", "flex", "icon", "checkable", "checkedStatus", "checkboxLabel", "onCheck", "reversed", "sorting", "wrapping", "align", "tooltipInfo", "isTooltipIconHidden", "tooltipPortalSelector", "sortingArrowsOnHover", "classNameOverride"]);
   var sorting = sortingRaw;
-  var _e = React__default.default.useState(false),
-    isHovered = _e[0],
-    setIsHovered = _e[1];
+  var _f = React__default.default.useState(false),
+    isHovered = _f[0],
+    setIsHovered = _f[1];
   var updateHoverState = function (hoverState) {
     if (sortingArrowsOnHover && hoverState != isHovered) setIsHovered(hoverState);
   };
@@ -106,14 +100,14 @@ var TableHeaderRowCell = function (_a) {
     className: Table_module.headerRowCellLabelAndIcons
   }, icon && React__default.default.createElement("span", {
     className: Table_module.headerRowCellIcon
-  }, React.cloneElement(icon, {
-    title: labelText,
-    role: "img"
-  })), checkable && React__default.default.createElement("div", {
+  }, React.cloneElement(icon, (_b = {
+    title: labelText
+  }, _b["aria-label"] = labelText, _b.role = "img", _b))), checkable && React__default.default.createElement("div", {
     className: Table_module.headerRowCellCheckbox
   }, React__default.default.createElement(Checkbox.Checkbox, {
     checkedStatus: checkedStatus,
-    onCheck: onCheck
+    onCheck: onCheck,
+    "aria-label": checkboxLabel
   })), tooltipInfo != null && !isTooltipIconHidden ? React__default.default.createElement("div", {
     className: Table_module.headerRowCellTooltipIcon
   }, React__default.default.createElement(ExclamationIcon.ExclamationIcon, {

package/dist/cjs/Table/Table.module.scss.cjs

@@ -7,7 +7,7 @@ function _interopDefault(e) {
   };
 }
 var styleInject__default = /*#__PURE__*/_interopDefault(styleInject);
-var css_248z = ".Table-module_container__w-zFG{margin-bottom:var(--spacing-sm,.75rem);width:100%}.Table-module_headerRowCell__kW0YN{align-items:stretch;display:flex;justify-content:flex-start;padding:8px var(--spacing-md,1.5rem);position:relative;text-align:start}.Table-module_headerRowCellNoWrap__BSuzX .Table-module_headerRowCellLabel__5v6m8{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Table-module_headerRowCellAlignCenter__cobEI{justify-content:center;text-align:center}.Table-module_headerRowCellAlignEnd__dQOOQ{justify-content:flex-end;text-align:end}.Table-module_headerRowCellCheckbox__CdMiY{margin-inline-end:10px}.Table-module_headerRowCell__kW0YN .Table-module_headerRowCellTooltip__uzbpY{align-items:stretch;display:flex}.Table-module_headerRowCell__kW0YN.Table-module_headerRowCellNoWrap__BSuzX .Table-module_headerRowCellTooltip__uzbpY{overflow:hidden}.Table-module_headerRowCellButton__uikM7{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:var(--color-purple-800,#2f2438);display:block;font:inherit;margin:0;padding:0;text-decoration:none;transition:none}.Table-module_headerRowCellButton__uikM7:active,.Table-module_headerRowCellButton__uikM7:focus,.Table-module_headerRowCellButton__uikM7:hover{text-decoration:none}.Table-module_headerRowCellButton__uikM7.Table-module_headerRowCellButtonReversed__uk87N{color:var(--color-white,#fff)}.Table-module_headerRowCellButton__uikM7,.Table-module_headerRowCellNoButton__dqf1B{align-items:stretch;box-sizing:border-box;display:flex;width:100%}.Table-module_headerRowCellLabelAndIcons__OCCVi{align-items:center;display:flex;flex:1 1 100%;width:100%}.Table-module_headerRowCellTooltipIcon__X0ETJ{color:var(--color-blue-500,#0168b3);margin-inline-end:var(--spacing-xs,.375rem)}.Table-module_headerRowCellIcon__gB3zI{color:rgba(var(--color-purple-800-rgb,47,36,56),.7);height:20px}.Table-module_card__RGyjC,.Table-module_headerRowCellActive__wshmg .Table-module_headerRowCellIcon__gB3zI{color:var(--color-purple-800,#2f2438)}.Table-module_card__RGyjC{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background:var(--color-white,#fff);border:none;border:1px solid rgba(var(--color-purple-700-rgb,74,35,77),.1);box-shadow:0 4px 6px rgba(53,55,74,.04);display:block;font:inherit;margin:0;padding:0;text-decoration:none;transition:none;transition:box-shadow var(--animation-duration-rapid,.2s),border-color var(--animation-duration-rapid,.2s),margin var(--animation-duration-rapid,.2s),padding var(--animation-duration-rapid,.2s),width var(--animation-duration-rapid,.2s)}.Table-module_card__RGyjC:active,.Table-module_card__RGyjC:focus,.Table-module_card__RGyjC:hover{text-decoration:none}.Table-module_card__RGyjC.Table-module_headerRowCellButtonReversed__uk87N{color:var(--color-white,#fff)}.Table-module_card__RGyjC:not(:first-child){margin-top:-1px}.Table-module_card__RGyjC:last-child{border-bottom-left-radius:var(--border-solid-border-radius,7px);border-bottom-right-radius:var(--border-solid-border-radius,7px)}.Table-module_card__RGyjC:hover{will-change:box-shadow,border-color,margin,padding,width}.Table-module_card__RGyjC.Table-module_well__xQmO5{margin-top:var(--spacing-sm,.75rem)}.Table-module_card__RGyjC:first-child,[role=rowgroup]+.Table-module_card__RGyjC{border-top-left-radius:var(--border-solid-border-radius,7px);border-top-right-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06))}.Table-module_row__GYSl1{display:flex}.Table-module_well__xQmO5{background-color:var(--color-gray-300,#eaeaec);border-color:var(--border-borderless-border-color,transparent);border-radius:var(--border-solid-border-radius,7px);box-shadow:none;margin-bottom:var(--spacing-sm,.75rem)}.Table-module_popout__PeAVV{box-shadow:var(--shadow-large-box-shadow,0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08))}.Table-module_expanded__dasr3{margin-left:calc(var(--spacing-sm, .75rem)*-1);margin-right:calc(var(--spacing-sm, .75rem)*-1);padding-left:var(--spacing-sm,.75rem);padding-right:var(--spacing-sm,.75rem);position:relative;z-index:1}.Table-module_hasHoverState__u5n3E{cursor:pointer;text-align:left;width:100%}.Table-module_hasHoverState__u5n3E.Table-module_expanded__dasr3{width:calc(100% + var(--spacing-md, 1.5rem))}.Table-module_hasHoverState__u5n3E:focus,.Table-module_hasHoverState__u5n3E:hover{background-color:var(--color-gray-100,#f9f9f9)}.Table-module_rowCell__A5-2R{align-items:center;color:var(--color-purple-800,#2f2438);display:block;display:flex;min-height:60px;padding:0 var(--spacing-md,1.5rem);text-decoration:none}.Table-module_rowCell__A5-2R:active,.Table-module_rowCell__A5-2R:focus,.Table-module_rowCell__A5-2R:hover{text-decoration:none}.Table-module_rowCell__A5-2R.Table-module_headerRowCellButtonReversed__uk87N{color:var(--color-white,#fff)}.Table-module_defaultSpacing__zq1Ci .Table-module_rowCell__A5-2R{padding:var(--spacing-sm,.75rem) var(--spacing-md,1.5rem)}.Table-module_dataVariant__vBOag .Table-module_rowCell__A5-2R{min-height:48px}.Table-module_rowCellAlignCenter__apkoC{justify-content:center;text-align:center}.Table-module_rowCellAlignEnd__qZfa1{justify-content:flex-end;text-align:right}.Table-module_whiteText__4f-q5{color:var(--color-white,#fff)}";
+var css_248z = ".Table-module_container__w-zFG{margin-bottom:var(--spacing-sm,.75rem);width:100%}.Table-module_headerRowCell__kW0YN{align-items:stretch;display:flex;justify-content:flex-start;padding:8px var(--spacing-md,1.5rem);position:relative;text-align:start}.Table-module_headerRowCellNoWrap__BSuzX .Table-module_headerRowCellLabel__5v6m8{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Table-module_headerRowCellAlignCenter__cobEI{justify-content:center;text-align:center}.Table-module_headerRowCellAlignEnd__dQOOQ{justify-content:flex-end;text-align:end}.Table-module_headerRowCellCheckbox__CdMiY{margin-inline-end:10px}.Table-module_headerRowCell__kW0YN .Table-module_headerRowCellTooltip__uzbpY{align-items:stretch;display:flex;max-width:100%}.Table-module_headerRowCell__kW0YN.Table-module_headerRowCellNoWrap__BSuzX .Table-module_headerRowCellContent__IArYC{max-width:100%}.Table-module_headerRowCellButton__uikM7{align-items:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-sizing:border-box;color:var(--color-purple-800,#2f2438);display:block;display:flex;font:inherit;margin:0;outline:none;padding:0;text-decoration:none;transition:none;width:100%}.Table-module_headerRowCellButton__uikM7:active,.Table-module_headerRowCellButton__uikM7:focus,.Table-module_headerRowCellButton__uikM7:hover{text-decoration:none}.Table-module_headerRowCellButton__uikM7:focus-visible{outline:none;position:relative}.Table-module_headerRowCellButton__uikM7:focus-visible:after{background:transparent;border-color:var(--color-blue-500,#0168b3);border-radius:var(--border-focus-ring-border-radius,10px);border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";height:calc(100% + var(--border-focus-ring-border-width, 2px)*2 + 1px);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% + var(--border-focus-ring-border-width, 2px)*2 + 1px)}.Table-module_headerRowCellButtonReversed__uk87N{color:var(--color-white,#fff)}.Table-module_headerRowCellButtonReversed__uk87N:focus-visible:after{border-color:var(--color-blue-100,#e6f6ff)}.Table-module_headerRowCellNoButton__dqf1B{align-items:stretch;box-sizing:border-box;display:flex;width:100%}.Table-module_headerRowCellLabelAndIcons__OCCVi{align-items:center;display:flex;flex:1 1 100%;width:100%}.Table-module_headerRowCellTooltipIcon__X0ETJ{color:var(--color-blue-500,#0168b3);margin-inline-end:var(--spacing-xs,.375rem)}.Table-module_headerRowCellIcon__gB3zI{color:rgba(var(--color-purple-800-rgb,47,36,56),.7);height:20px}.Table-module_headerRowCellActive__wshmg .Table-module_headerRowCellIcon__gB3zI{color:var(--color-purple-800,#2f2438)}.Table-module_headerRowCellButtonReversed__uk87N .Table-module_headerRowCellIcon__gB3zI{color:var(--color-white,#fff)}.Table-module_card__RGyjC{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background:var(--color-white,#fff);border:none;border:1px solid rgba(var(--color-purple-700-rgb,74,35,77),.1);box-shadow:0 4px 6px rgba(53,55,74,.04);color:var(--color-purple-800,#2f2438);display:block;font:inherit;margin:0;outline:none;padding:0;text-decoration:none;transition:none;transition:box-shadow var(--animation-duration-rapid,.2s),border-color var(--animation-duration-rapid,.2s),margin var(--animation-duration-rapid,.2s),padding var(--animation-duration-rapid,.2s),width var(--animation-duration-rapid,.2s)}.Table-module_card__RGyjC:active,.Table-module_card__RGyjC:focus,.Table-module_card__RGyjC:hover{text-decoration:none}.Table-module_card__RGyjC:not(:first-child){margin-top:-1px}.Table-module_card__RGyjC:last-child{border-bottom-left-radius:var(--border-solid-border-radius,7px);border-bottom-right-radius:var(--border-solid-border-radius,7px)}.Table-module_card__RGyjC:hover{will-change:box-shadow,border-color,margin,padding,width}.Table-module_card__RGyjC:focus-visible{outline:none;position:relative}.Table-module_card__RGyjC:focus-visible:after{background:transparent;border-color:var(--color-blue-500,#0168b3);border-radius:inherit;border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";height:calc(100% + var(--border-focus-ring-border-width, 2px) + 2px);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% + var(--border-focus-ring-border-width, 2px) + 2px)}.Table-module_card__RGyjC.Table-module_well__xQmO5{margin-top:var(--spacing-sm,.75rem)}.Table-module_card__RGyjC:first-child,[role=rowgroup]+.Table-module_card__RGyjC{border-top-left-radius:var(--border-solid-border-radius,7px);border-top-right-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06))}.Table-module_row__GYSl1{display:flex}.Table-module_well__xQmO5{background-color:var(--color-gray-300,#eaeaec);border-color:var(--border-borderless-border-color,transparent);border-radius:var(--border-solid-border-radius,7px);box-shadow:none;margin-bottom:var(--spacing-sm,.75rem)}.Table-module_popout__PeAVV{box-shadow:var(--shadow-large-box-shadow,0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08))}.Table-module_expanded__dasr3{margin-left:calc(var(--spacing-sm, .75rem)*-1);margin-right:calc(var(--spacing-sm, .75rem)*-1);padding-left:var(--spacing-sm,.75rem);padding-right:var(--spacing-sm,.75rem);position:relative;z-index:1}.Table-module_hasHoverState__u5n3E{cursor:pointer;text-align:left;width:100%}.Table-module_hasHoverState__u5n3E.Table-module_expanded__dasr3{width:calc(100% + var(--spacing-md, 1.5rem))}.Table-module_hasHoverState__u5n3E:focus,.Table-module_hasHoverState__u5n3E:hover{background-color:var(--color-gray-100,#f9f9f9)}.Table-module_rowCell__A5-2R{align-items:center;color:var(--color-purple-800,#2f2438);display:block;display:flex;min-height:60px;padding:0 var(--spacing-md,1.5rem);text-decoration:none}.Table-module_rowCell__A5-2R:active,.Table-module_rowCell__A5-2R:focus,.Table-module_rowCell__A5-2R:hover{text-decoration:none}.Table-module_defaultSpacing__zq1Ci .Table-module_rowCell__A5-2R{padding:var(--spacing-sm,.75rem) var(--spacing-md,1.5rem)}.Table-module_dataVariant__vBOag .Table-module_rowCell__A5-2R{min-height:48px}.Table-module_rowCellAlignCenter__apkoC{justify-content:center;text-align:center}.Table-module_rowCellAlignEnd__qZfa1{justify-content:flex-end;text-align:right}.Table-module_whiteText__4f-q5{color:var(--color-white,#fff)}";
 var styles = {
   "container": "Table-module_container__w-zFG",
   "headerRowCell": "Table-module_headerRowCell__kW0YN",
@@ -17,6 +17,7 @@ var styles = {
   "headerRowCellAlignEnd": "Table-module_headerRowCellAlignEnd__dQOOQ",
   "headerRowCellCheckbox": "Table-module_headerRowCellCheckbox__CdMiY",
   "headerRowCellTooltip": "Table-module_headerRowCellTooltip__uzbpY",
+  "headerRowCellContent": "Table-module_headerRowCellContent__IArYC",
   "headerRowCellButton": "Table-module_headerRowCellButton__uikM7",
   "headerRowCellButtonReversed": "Table-module_headerRowCellButtonReversed__uk87N",
   "headerRowCellNoButton": "Table-module_headerRowCellNoButton__dqf1B",

package/dist/esm/Table/Table.mjs

@@ -38,6 +38,7 @@ var ratioToPercent = function (width) {
   return width != null ? "".concat(width * 100, "%") : width;
 };
 var TableHeaderRowCell = function (_a) {
+  var _b;
   var labelText = _a.labelText,
     onClick = _a.onClick,
     href = _a.href,
@@ -46,6 +47,7 @@ var TableHeaderRowCell = function (_a) {
     icon = _a.icon,
     checkable = _a.checkable,
     checkedStatus = _a.checkedStatus,
+    checkboxLabel = _a.checkboxLabel,
     onCheck = _a.onCheck,
     reversed = _a.reversed,
     sortingRaw = _a.sorting,
@@ -55,37 +57,29 @@ var TableHeaderRowCell = function (_a) {
     // cell with a word longer than the column width would push the columns out of
     // alignment? I'm not sure.
     // Anyway, we can override this default behaviour by setting wrapping to "wrap".
-    _b = _a.wrapping,
+    _c = _a.wrapping,
     // I can't say for certain why "nowrap" was the default value. Normally you wouldn't
     // want to clip off information because it doesn't fit on one line.
     // My assumption is that because since the cell width rows are decoupled, a heading
     // cell with a word longer than the column width would push the columns out of
     // alignment? I'm not sure.
     // Anyway, we can override this default behaviour by setting wrapping to "wrap".
-    wrapping = _b === void 0 ? "nowrap" : _b,
-    _c = _a.align,
-    align = _c === void 0 ? "start" : _c,
+    wrapping = _c === void 0 ? "nowrap" : _c,
+    _d = _a.align,
+    align = _d === void 0 ? "start" : _d,
     tooltipInfo = _a.tooltipInfo,
-    // If set, this will hide the tooltip exclamation icon. Useful in situations where
-    // the table header does not have enough space. However, we should always show a
-    // tooltip icon as the default based on design system tooltip guidelines.
-    _d = _a.isTooltipIconHidden,
-    // If set, this will hide the tooltip exclamation icon. Useful in situations where
-    // the table header does not have enough space. However, we should always show a
-    // tooltip icon as the default based on design system tooltip guidelines.
-    isTooltipIconHidden = _d === void 0 ? false : _d,
+    _e = _a.isTooltipIconHidden,
+    isTooltipIconHidden = _e === void 0 ? false : _e,
     tooltipPortalSelector = _a.tooltipPortalSelector,
-    // If set, this will show the arrow in the direction provided
-    // when the header cell is hovered over.
     sortingArrowsOnHover = _a.sortingArrowsOnHover,
     classNameOverride = _a.classNameOverride,
     // There aren't any other props in the type definition, so I'm unsure why we
     // have this spread.
-    otherProps = __rest(_a, ["labelText", "onClick", "href", "width", "flex", "icon", "checkable", "checkedStatus", "onCheck", "reversed", "sorting", "wrapping", "align", "tooltipInfo", "isTooltipIconHidden", "tooltipPortalSelector", "sortingArrowsOnHover", "classNameOverride"]);
+    otherProps = __rest(_a, ["labelText", "onClick", "href", "width", "flex", "icon", "checkable", "checkedStatus", "checkboxLabel", "onCheck", "reversed", "sorting", "wrapping", "align", "tooltipInfo", "isTooltipIconHidden", "tooltipPortalSelector", "sortingArrowsOnHover", "classNameOverride"]);
   var sorting = sortingRaw;
-  var _e = React.useState(false),
-    isHovered = _e[0],
-    setIsHovered = _e[1];
+  var _f = React.useState(false),
+    isHovered = _f[0],
+    setIsHovered = _f[1];
   var updateHoverState = function (hoverState) {
     if (sortingArrowsOnHover && hoverState != isHovered) setIsHovered(hoverState);
   };
@@ -97,14 +91,14 @@ var TableHeaderRowCell = function (_a) {
     className: styles.headerRowCellLabelAndIcons
   }, icon && ( /*#__PURE__*/React.createElement("span", {
     className: styles.headerRowCellIcon
-  }, /*#__PURE__*/cloneElement(icon, {
-    title: labelText,
-    role: "img"
-  }))), checkable && ( /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/cloneElement(icon, (_b = {
+    title: labelText
+  }, _b["aria-label"] = labelText, _b.role = "img", _b)))), checkable && ( /*#__PURE__*/React.createElement("div", {
     className: styles.headerRowCellCheckbox
   }, /*#__PURE__*/React.createElement(Checkbox, {
     checkedStatus: checkedStatus,
-    onCheck: onCheck
+    onCheck: onCheck,
+    "aria-label": checkboxLabel
   }))), tooltipInfo != null && !isTooltipIconHidden ? ( /*#__PURE__*/React.createElement("div", {
     className: styles.headerRowCellTooltipIcon
   }, /*#__PURE__*/React.createElement(ExclamationIcon, {

package/dist/esm/Table/Table.module.scss.mjs

@@ -1,5 +1,5 @@
 import styleInject from 'style-inject';
-var css_248z = ".Table-module_container__w-zFG{margin-bottom:var(--spacing-sm,.75rem);width:100%}.Table-module_headerRowCell__kW0YN{align-items:stretch;display:flex;justify-content:flex-start;padding:8px var(--spacing-md,1.5rem);position:relative;text-align:start}.Table-module_headerRowCellNoWrap__BSuzX .Table-module_headerRowCellLabel__5v6m8{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Table-module_headerRowCellAlignCenter__cobEI{justify-content:center;text-align:center}.Table-module_headerRowCellAlignEnd__dQOOQ{justify-content:flex-end;text-align:end}.Table-module_headerRowCellCheckbox__CdMiY{margin-inline-end:10px}.Table-module_headerRowCell__kW0YN .Table-module_headerRowCellTooltip__uzbpY{align-items:stretch;display:flex}.Table-module_headerRowCell__kW0YN.Table-module_headerRowCellNoWrap__BSuzX .Table-module_headerRowCellTooltip__uzbpY{overflow:hidden}.Table-module_headerRowCellButton__uikM7{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;color:var(--color-purple-800,#2f2438);display:block;font:inherit;margin:0;padding:0;text-decoration:none;transition:none}.Table-module_headerRowCellButton__uikM7:active,.Table-module_headerRowCellButton__uikM7:focus,.Table-module_headerRowCellButton__uikM7:hover{text-decoration:none}.Table-module_headerRowCellButton__uikM7.Table-module_headerRowCellButtonReversed__uk87N{color:var(--color-white,#fff)}.Table-module_headerRowCellButton__uikM7,.Table-module_headerRowCellNoButton__dqf1B{align-items:stretch;box-sizing:border-box;display:flex;width:100%}.Table-module_headerRowCellLabelAndIcons__OCCVi{align-items:center;display:flex;flex:1 1 100%;width:100%}.Table-module_headerRowCellTooltipIcon__X0ETJ{color:var(--color-blue-500,#0168b3);margin-inline-end:var(--spacing-xs,.375rem)}.Table-module_headerRowCellIcon__gB3zI{color:rgba(var(--color-purple-800-rgb,47,36,56),.7);height:20px}.Table-module_card__RGyjC,.Table-module_headerRowCellActive__wshmg .Table-module_headerRowCellIcon__gB3zI{color:var(--color-purple-800,#2f2438)}.Table-module_card__RGyjC{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background:var(--color-white,#fff);border:none;border:1px solid rgba(var(--color-purple-700-rgb,74,35,77),.1);box-shadow:0 4px 6px rgba(53,55,74,.04);display:block;font:inherit;margin:0;padding:0;text-decoration:none;transition:none;transition:box-shadow var(--animation-duration-rapid,.2s),border-color var(--animation-duration-rapid,.2s),margin var(--animation-duration-rapid,.2s),padding var(--animation-duration-rapid,.2s),width var(--animation-duration-rapid,.2s)}.Table-module_card__RGyjC:active,.Table-module_card__RGyjC:focus,.Table-module_card__RGyjC:hover{text-decoration:none}.Table-module_card__RGyjC.Table-module_headerRowCellButtonReversed__uk87N{color:var(--color-white,#fff)}.Table-module_card__RGyjC:not(:first-child){margin-top:-1px}.Table-module_card__RGyjC:last-child{border-bottom-left-radius:var(--border-solid-border-radius,7px);border-bottom-right-radius:var(--border-solid-border-radius,7px)}.Table-module_card__RGyjC:hover{will-change:box-shadow,border-color,margin,padding,width}.Table-module_card__RGyjC.Table-module_well__xQmO5{margin-top:var(--spacing-sm,.75rem)}.Table-module_card__RGyjC:first-child,[role=rowgroup]+.Table-module_card__RGyjC{border-top-left-radius:var(--border-solid-border-radius,7px);border-top-right-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06))}.Table-module_row__GYSl1{display:flex}.Table-module_well__xQmO5{background-color:var(--color-gray-300,#eaeaec);border-color:var(--border-borderless-border-color,transparent);border-radius:var(--border-solid-border-radius,7px);box-shadow:none;margin-bottom:var(--spacing-sm,.75rem)}.Table-module_popout__PeAVV{box-shadow:var(--shadow-large-box-shadow,0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08))}.Table-module_expanded__dasr3{margin-left:calc(var(--spacing-sm, .75rem)*-1);margin-right:calc(var(--spacing-sm, .75rem)*-1);padding-left:var(--spacing-sm,.75rem);padding-right:var(--spacing-sm,.75rem);position:relative;z-index:1}.Table-module_hasHoverState__u5n3E{cursor:pointer;text-align:left;width:100%}.Table-module_hasHoverState__u5n3E.Table-module_expanded__dasr3{width:calc(100% + var(--spacing-md, 1.5rem))}.Table-module_hasHoverState__u5n3E:focus,.Table-module_hasHoverState__u5n3E:hover{background-color:var(--color-gray-100,#f9f9f9)}.Table-module_rowCell__A5-2R{align-items:center;color:var(--color-purple-800,#2f2438);display:block;display:flex;min-height:60px;padding:0 var(--spacing-md,1.5rem);text-decoration:none}.Table-module_rowCell__A5-2R:active,.Table-module_rowCell__A5-2R:focus,.Table-module_rowCell__A5-2R:hover{text-decoration:none}.Table-module_rowCell__A5-2R.Table-module_headerRowCellButtonReversed__uk87N{color:var(--color-white,#fff)}.Table-module_defaultSpacing__zq1Ci .Table-module_rowCell__A5-2R{padding:var(--spacing-sm,.75rem) var(--spacing-md,1.5rem)}.Table-module_dataVariant__vBOag .Table-module_rowCell__A5-2R{min-height:48px}.Table-module_rowCellAlignCenter__apkoC{justify-content:center;text-align:center}.Table-module_rowCellAlignEnd__qZfa1{justify-content:flex-end;text-align:right}.Table-module_whiteText__4f-q5{color:var(--color-white,#fff)}";
+var css_248z = ".Table-module_container__w-zFG{margin-bottom:var(--spacing-sm,.75rem);width:100%}.Table-module_headerRowCell__kW0YN{align-items:stretch;display:flex;justify-content:flex-start;padding:8px var(--spacing-md,1.5rem);position:relative;text-align:start}.Table-module_headerRowCellNoWrap__BSuzX .Table-module_headerRowCellLabel__5v6m8{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Table-module_headerRowCellAlignCenter__cobEI{justify-content:center;text-align:center}.Table-module_headerRowCellAlignEnd__dQOOQ{justify-content:flex-end;text-align:end}.Table-module_headerRowCellCheckbox__CdMiY{margin-inline-end:10px}.Table-module_headerRowCell__kW0YN .Table-module_headerRowCellTooltip__uzbpY{align-items:stretch;display:flex;max-width:100%}.Table-module_headerRowCell__kW0YN.Table-module_headerRowCellNoWrap__BSuzX .Table-module_headerRowCellContent__IArYC{max-width:100%}.Table-module_headerRowCellButton__uikM7{align-items:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;box-sizing:border-box;color:var(--color-purple-800,#2f2438);display:block;display:flex;font:inherit;margin:0;outline:none;padding:0;text-decoration:none;transition:none;width:100%}.Table-module_headerRowCellButton__uikM7:active,.Table-module_headerRowCellButton__uikM7:focus,.Table-module_headerRowCellButton__uikM7:hover{text-decoration:none}.Table-module_headerRowCellButton__uikM7:focus-visible{outline:none;position:relative}.Table-module_headerRowCellButton__uikM7:focus-visible:after{background:transparent;border-color:var(--color-blue-500,#0168b3);border-radius:var(--border-focus-ring-border-radius,10px);border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";height:calc(100% + var(--border-focus-ring-border-width, 2px)*2 + 1px);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% + var(--border-focus-ring-border-width, 2px)*2 + 1px)}.Table-module_headerRowCellButtonReversed__uk87N{color:var(--color-white,#fff)}.Table-module_headerRowCellButtonReversed__uk87N:focus-visible:after{border-color:var(--color-blue-100,#e6f6ff)}.Table-module_headerRowCellNoButton__dqf1B{align-items:stretch;box-sizing:border-box;display:flex;width:100%}.Table-module_headerRowCellLabelAndIcons__OCCVi{align-items:center;display:flex;flex:1 1 100%;width:100%}.Table-module_headerRowCellTooltipIcon__X0ETJ{color:var(--color-blue-500,#0168b3);margin-inline-end:var(--spacing-xs,.375rem)}.Table-module_headerRowCellIcon__gB3zI{color:rgba(var(--color-purple-800-rgb,47,36,56),.7);height:20px}.Table-module_headerRowCellActive__wshmg .Table-module_headerRowCellIcon__gB3zI{color:var(--color-purple-800,#2f2438)}.Table-module_headerRowCellButtonReversed__uk87N .Table-module_headerRowCellIcon__gB3zI{color:var(--color-white,#fff)}.Table-module_card__RGyjC{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background:var(--color-white,#fff);border:none;border:1px solid rgba(var(--color-purple-700-rgb,74,35,77),.1);box-shadow:0 4px 6px rgba(53,55,74,.04);color:var(--color-purple-800,#2f2438);display:block;font:inherit;margin:0;outline:none;padding:0;text-decoration:none;transition:none;transition:box-shadow var(--animation-duration-rapid,.2s),border-color var(--animation-duration-rapid,.2s),margin var(--animation-duration-rapid,.2s),padding var(--animation-duration-rapid,.2s),width var(--animation-duration-rapid,.2s)}.Table-module_card__RGyjC:active,.Table-module_card__RGyjC:focus,.Table-module_card__RGyjC:hover{text-decoration:none}.Table-module_card__RGyjC:not(:first-child){margin-top:-1px}.Table-module_card__RGyjC:last-child{border-bottom-left-radius:var(--border-solid-border-radius,7px);border-bottom-right-radius:var(--border-solid-border-radius,7px)}.Table-module_card__RGyjC:hover{will-change:box-shadow,border-color,margin,padding,width}.Table-module_card__RGyjC:focus-visible{outline:none;position:relative}.Table-module_card__RGyjC:focus-visible:after{background:transparent;border-color:var(--color-blue-500,#0168b3);border-radius:inherit;border-style:var(--border-focus-ring-border-style,solid);border-width:var(--border-focus-ring-border-width,2px);content:\"\";height:calc(100% + var(--border-focus-ring-border-width, 2px) + 2px);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% + var(--border-focus-ring-border-width, 2px) + 2px)}.Table-module_card__RGyjC.Table-module_well__xQmO5{margin-top:var(--spacing-sm,.75rem)}.Table-module_card__RGyjC:first-child,[role=rowgroup]+.Table-module_card__RGyjC{border-top-left-radius:var(--border-solid-border-radius,7px);border-top-right-radius:var(--border-solid-border-radius,7px);box-shadow:var(--shadow-small-box-shadow,0 1px 3px 0 rgba(0,0,0,.1),0 3px 16px 0 rgba(0,0,0,.06))}.Table-module_row__GYSl1{display:flex}.Table-module_well__xQmO5{background-color:var(--color-gray-300,#eaeaec);border-color:var(--border-borderless-border-color,transparent);border-radius:var(--border-solid-border-radius,7px);box-shadow:none;margin-bottom:var(--spacing-sm,.75rem)}.Table-module_popout__PeAVV{box-shadow:var(--shadow-large-box-shadow,0 3px 9px 0 rgba(0,0,0,.1),0 8px 40px 0 rgba(0,0,0,.08))}.Table-module_expanded__dasr3{margin-left:calc(var(--spacing-sm, .75rem)*-1);margin-right:calc(var(--spacing-sm, .75rem)*-1);padding-left:var(--spacing-sm,.75rem);padding-right:var(--spacing-sm,.75rem);position:relative;z-index:1}.Table-module_hasHoverState__u5n3E{cursor:pointer;text-align:left;width:100%}.Table-module_hasHoverState__u5n3E.Table-module_expanded__dasr3{width:calc(100% + var(--spacing-md, 1.5rem))}.Table-module_hasHoverState__u5n3E:focus,.Table-module_hasHoverState__u5n3E:hover{background-color:var(--color-gray-100,#f9f9f9)}.Table-module_rowCell__A5-2R{align-items:center;color:var(--color-purple-800,#2f2438);display:block;display:flex;min-height:60px;padding:0 var(--spacing-md,1.5rem);text-decoration:none}.Table-module_rowCell__A5-2R:active,.Table-module_rowCell__A5-2R:focus,.Table-module_rowCell__A5-2R:hover{text-decoration:none}.Table-module_defaultSpacing__zq1Ci .Table-module_rowCell__A5-2R{padding:var(--spacing-sm,.75rem) var(--spacing-md,1.5rem)}.Table-module_dataVariant__vBOag .Table-module_rowCell__A5-2R{min-height:48px}.Table-module_rowCellAlignCenter__apkoC{justify-content:center;text-align:center}.Table-module_rowCellAlignEnd__qZfa1{justify-content:flex-end;text-align:right}.Table-module_whiteText__4f-q5{color:var(--color-white,#fff)}";
 var styles = {
   "container": "Table-module_container__w-zFG",
   "headerRowCell": "Table-module_headerRowCell__kW0YN",
@@ -9,6 +9,7 @@ var styles = {
   "headerRowCellAlignEnd": "Table-module_headerRowCellAlignEnd__dQOOQ",
   "headerRowCellCheckbox": "Table-module_headerRowCellCheckbox__CdMiY",
   "headerRowCellTooltip": "Table-module_headerRowCellTooltip__uzbpY",
+  "headerRowCellContent": "Table-module_headerRowCellContent__IArYC",
   "headerRowCellButton": "Table-module_headerRowCellButton__uikM7",
   "headerRowCellButtonReversed": "Table-module_headerRowCellButtonReversed__uk87N",
   "headerRowCellNoButton": "Table-module_headerRowCellNoButton__dqf1B",

package/dist/types/Filter/Filter/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type FilterTriggerRef = {
     triggerRef?: React.RefObject<HTMLButtonElement>;
 };

package/dist/types/Filter/FilterBar/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type FiltersValues = Record<string, any>;
 type SourceFilterAttributes<Id, Value> = {
     id: Id;

package/dist/types/Filter/FilterDatePicker/hooks/useDateValidation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DisabledDays } from "../../../Calendar";
 import { ValidationMessage, DateValidationResponse } from "../types";
 import { validateDate } from "../utils/validateDate";

package/dist/types/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { UseDateValidationArgs, ValidationMessage } from "../../../../FilterDatePicker";
 import { ValidateEndDateBeforeStartDateArgs } from "../utils/validateEndDateBeforeStartDate";
 export type UseEndDateValidationArgs = UseDateValidationArgs;

package/dist/types/Modal/GenericModal/context/ModalContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ModalContextType = {
     labelledByID: string;
     describedByID: string;

package/dist/types/MultiSelect/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FieldMessageStatus } from "../FieldMessage";
 export type MultiSelectOption = {
     label: string;

package/dist/types/Notification/ToastNotification/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataAttributes } from "../../types/DataAttributes";
 import { NotificationType } from "../types";
 export type ToastNotificationObj = {

package/dist/types/RichTextEditor/utils/core/hooks/useRichTextEditor.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { EditorState } from "prosemirror-state";
 import { CommandOrTransaction } from "../types";
 type RTEOptions = {

package/dist/types/RichTextEditor/utils/plugins/LinkManager/validation.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type ValidationResponse = {
     status: "success" | "error" | "default";
     message?: React.ReactNode;

package/dist/types/Table/Table.d.ts

@@ -3,6 +3,7 @@ import { CheckedStatus } from "../Checkbox";
 import { OverrideClassName } from "../types/OverrideClassName";
 export type TableContainerProps = {
     children?: React.ReactNode;
+    /** @default "compact" */
     variant?: "compact" | "default" | "data";
 };
 /**
@@ -17,6 +18,13 @@ export declare const TableHeader: ({ children, ...otherProps }: TableHeaderProps
 export type TableHeaderRowProps = {
     children?: React.ReactNode;
 };
+export type TableHeaderRowCellCheckboxProps = {
+    checkable?: boolean;
+    checkedStatus?: CheckedStatus;
+    /** This will be passed into the aria-label for the checkbox to provide context to the user */
+    checkboxLabel?: string;
+    onCheck?: (event: React.ChangeEvent<HTMLInputElement>) => any;
+};
 /**
  * @param width value between 1 and 0, to be calculated as a percentage
  * @param flex CSS flex shorthand as a string. Be sure to specify the flex grow,
@@ -30,9 +38,6 @@ export type TableHeaderRowCellProps = {
     flex?: string;
     href?: string;
     icon?: ReactElement;
-    checkable?: boolean;
-    checkedStatus?: CheckedStatus;
-    onCheck?: (event: React.ChangeEvent<HTMLInputElement>) => any;
     reversed?: boolean;
     /**
      * Shows an up or down arrow, to show that the column is sorted.
@@ -41,14 +46,19 @@ export type TableHeaderRowCellProps = {
     wrapping?: "nowrap" | "wrap";
     align?: "start" | "center" | "end";
     tooltipInfo?: string;
+    /** If set, this will hide the tooltip exclamation icon. Useful in situations where
+     the table header does not have enough space. This should be done with caution as tooltips
+     should have a visual indicator to users */
     isTooltipIconHidden?: boolean;
     /**
      * Specify where the tooltip should be rendered.
      */
     tooltipPortalSelector?: string | undefined;
+    /** If set, this will show the arrow in the direction provided
+    when the header cell is hovered over. */
     sortingArrowsOnHover?: "ascending" | "descending" | undefined;
-} & OverrideClassName<HTMLAttributes<HTMLElement>>;
-export declare const TableHeaderRowCell: ({ labelText, onClick, href, width, flex, icon, checkable, checkedStatus, onCheck, reversed, sorting: sortingRaw, wrapping, align, tooltipInfo, isTooltipIconHidden, tooltipPortalSelector, sortingArrowsOnHover, classNameOverride, ...otherProps }: TableHeaderRowCellProps) => JSX.Element;
+} & TableHeaderRowCellCheckboxProps & OverrideClassName<HTMLAttributes<HTMLElement>>;
+export declare const TableHeaderRowCell: ({ labelText, onClick, href, width, flex, icon, checkable, checkedStatus, checkboxLabel, onCheck, reversed, sorting: sortingRaw, wrapping, align, tooltipInfo, isTooltipIconHidden, tooltipPortalSelector, sortingArrowsOnHover, classNameOverride, ...otherProps }: TableHeaderRowCellProps) => JSX.Element;
 type ButtonClickEvent = (e: React.MouseEvent<HTMLButtonElement>) => void;
 type AnchorClickEvent = (e: React.MouseEvent<HTMLAnchorElement>) => void;
 /**

package/dist/types/TitleBlockZen/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CompanyAvatarProps, GenericAvatarProps } from "../Avatar";
 import { ButtonProps, CustomButtonProps } from "../Button";
 import { MenuItemProps } from "../Menu";

package/dist/types/utils/isRefObject.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const isRefObject: (ref: React.ForwardedRef<any>) => ref is import("react").MutableRefObject<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-stable-bundler-20240515025934",
+  "version": "0.0.0-canary-stable-bundler-20240515064749",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -75,7 +75,6 @@
     "tslib": "^2.6.2",
     "use-debounce": "^10.0.0",
     "uuid": "^9.0.1",
-    "@kaizen/package-bundler": "0.0.0-canary-stable-bundler-20240515025934",
     "@kaizen/hosted-assets": "2.0.3"
   },
   "dependenciesComments": {
@@ -99,10 +98,15 @@
     "svgo": "^3.2.0",
     "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
-    "ts-node": "^10.9.2",
-    "@kaizen/design-tokens": "10.3.20",
-    "@kaizen/package-bundler": "0.0.0-canary-stable-bundler-20240515025934",
-    "@kaizen/tailwind": "1.2.6"
+    "tsx": "^4.10.2",
+    "@kaizen/design-tokens": "0.0.0-canary-stable-bundler-20240515064749",
+    "@kaizen/package-bundler": "0.0.0-canary-stable-bundler-20240515064749",
+    "@kaizen/tailwind": "0.0.0-canary-stable-bundler-20240515064749"
+  },
+  "devDependenciesComments": {
+    "postcss": "Installed in root",
+    "postcss-cli": "Installed in root",
+    "postcss-preset-env": "Installed in root"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.6",
@@ -110,9 +114,8 @@
     "react-intl": "^6.6.6"
   },
   "scripts": {
-    "build": "pnpm package-bundler build-ui-library && pnpm styles:global",
+    "build": "pnpm package-bundler build-shared-ui && pnpm styles:global",
     "styles:global": "postcss ./styles/global.css --output dist/styles.css",
-    "help": "pnpm package-bundler help",
     "test": "FORCE_COLOR=1 jest",
     "test:ci": "pnpm test -- --ci",
     "test:treeshake": "agadoo ./dist/esm/index.mjs",

package/src/Table/Table.module.scss

@@ -20,10 +20,6 @@ $row-height-data-variant: 48px;
   &:focus {
     text-decoration: none;
   }
-
-  &.headerRowCellButtonReversed {
-    color: $color-white;
-  }
 }
 
 // Special Table-only button reset
@@ -35,6 +31,7 @@ $row-height-data-variant: 48px;
   margin: 0;
   padding: 0;
   transition: none; // override Murmur global styles :(
+  outline: none;
 }
 
 .container {
@@ -80,19 +77,55 @@ $row-height-data-variant: 48px;
 .headerRowCell .headerRowCellTooltip {
   display: flex;
   align-items: stretch;
+  max-width: 100%;
 }
 
-// overflow has to be set at this level as well as on the heading for some reason ¯\_(ツ)_/¯
-.headerRowCell.headerRowCellNoWrap .headerRowCellTooltip {
-  overflow: hidden;
+.headerRowCell.headerRowCellNoWrap .headerRowCellContent {
+  max-width: 100%;
 }
 
 .headerRowCellButton {
   @include button-reset;
   @include anchor-reset;
+
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  // Ensures that the 100% doesn't go outside of the `headerRowCell` width
+  box-sizing: border-box;
+
+  &:focus-visible {
+    outline: none;
+    position: relative;
+
+    &::after {
+      // This offset provide enough gap on reverse for contrast ratios
+      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: calc(100% + #{$focus-ring-offset});
+      height: calc(100% + #{$focus-ring-offset});
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-color: $color-blue-500;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      border-radius: $border-focus-ring-border-radius;
+    }
+  }
+}
+
+.headerRowCellButtonReversed {
+  color: $color-white;
+
+  &:focus-visible::after {
+    border-color: $color-blue-100;
+  }
 }
 
-.headerRowCellButton,
 .headerRowCellNoButton {
   display: flex;
   align-items: stretch;
@@ -120,6 +153,10 @@ $row-height-data-variant: 48px;
   .headerRowCellActive & {
     color: $color-purple-800;
   }
+
+  .headerRowCellButtonReversed & {
+    color: $color-white;
+  }
 }
 
 .card {
@@ -154,6 +191,29 @@ $row-height-data-variant: 48px;
     will-change: box-shadow, border-color, margin, padding, width;
   }
 
+  &:focus-visible {
+    outline: none;
+    position: relative;
+
+    &::after {
+      // This offset provide enough gap on on reverse for contrast ratios
+      $focus-ring-offset: calc(#{$border-focus-ring-border-width} + 2px);
+
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: calc(100% + #{$focus-ring-offset});
+      height: calc(100% + #{$focus-ring-offset});
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-color: $color-blue-500;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      border-radius: inherit;
+    }
+  }
+
   &.well {
     margin-top: $spacing-sm;
   }

package/src/Table/Table.tsx

@@ -13,6 +13,7 @@ import styles from "./Table.module.scss"
 
 export type TableContainerProps = {
   children?: React.ReactNode
+  /** @default "compact" */
   variant?: "compact" | "default" | "data"
 }
 /**
@@ -56,6 +57,14 @@ export type TableHeaderRowProps = {
 const ratioToPercent = (width?: number): string | number | undefined =>
   width != null ? `${width * 100}%` : width
 
+export type TableHeaderRowCellCheckboxProps = {
+  checkable?: boolean
+  checkedStatus?: CheckedStatus
+  /** This will be passed into the aria-label for the checkbox to provide context to the user */
+  checkboxLabel?: string
+  onCheck?: (event: React.ChangeEvent<HTMLInputElement>) => any
+}
+
 /**
  * @param width value between 1 and 0, to be calculated as a percentage
  * @param flex CSS flex shorthand as a string. Be sure to specify the flex grow,
@@ -71,9 +80,6 @@ export type TableHeaderRowCellProps = {
   flex?: string
   href?: string
   icon?: ReactElement
-  checkable?: boolean
-  checkedStatus?: CheckedStatus
-  onCheck?: (event: React.ChangeEvent<HTMLInputElement>) => any
   reversed?: boolean
   /**
    * Shows an up or down arrow, to show that the column is sorted.
@@ -82,13 +88,19 @@ export type TableHeaderRowCellProps = {
   wrapping?: "nowrap" | "wrap"
   align?: "start" | "center" | "end"
   tooltipInfo?: string
+  /** If set, this will hide the tooltip exclamation icon. Useful in situations where
+   the table header does not have enough space. This should be done with caution as tooltips
+   should have a visual indicator to users */
   isTooltipIconHidden?: boolean
   /**
    * Specify where the tooltip should be rendered.
    */
   tooltipPortalSelector?: string | undefined
+  /** If set, this will show the arrow in the direction provided
+  when the header cell is hovered over. */
   sortingArrowsOnHover?: "ascending" | "descending" | undefined
-} & OverrideClassName<HTMLAttributes<HTMLElement>>
+} & TableHeaderRowCellCheckboxProps &
+  OverrideClassName<HTMLAttributes<HTMLElement>>
 
 export const TableHeaderRowCell = ({
   labelText,
@@ -99,6 +111,7 @@ export const TableHeaderRowCell = ({
   icon,
   checkable,
   checkedStatus,
+  checkboxLabel,
   onCheck,
   reversed,
   sorting: sortingRaw,
@@ -111,13 +124,8 @@ export const TableHeaderRowCell = ({
   wrapping = "nowrap",
   align = "start",
   tooltipInfo,
-  // If set, this will hide the tooltip exclamation icon. Useful in situations where
-  // the table header does not have enough space. However, we should always show a
-  // tooltip icon as the default based on design system tooltip guidelines.
   isTooltipIconHidden = false,
   tooltipPortalSelector,
-  // If set, this will show the arrow in the direction provided
-  // when the header cell is hovered over.
   sortingArrowsOnHover,
   classNameOverride,
   // There aren't any other props in the type definition, so I'm unsure why we
@@ -143,12 +151,20 @@ export const TableHeaderRowCell = ({
     <div className={styles.headerRowCellLabelAndIcons}>
       {icon && (
         <span className={styles.headerRowCellIcon}>
-          {cloneElement(icon, { title: labelText, role: "img" })}
+          {cloneElement(icon, {
+            title: labelText,
+            ["aria-label"]: labelText, // title is unreliable so this is a sensible fallback for tables with icons as headers without aria-labels
+            role: "img",
+          })}
         </span>
       )}
       {checkable && (
         <div className={styles.headerRowCellCheckbox}>
-          <Checkbox checkedStatus={checkedStatus} onCheck={onCheck} />
+          <Checkbox
+            checkedStatus={checkedStatus}
+            onCheck={onCheck}
+            aria-label={checkboxLabel}
+          />
         </div>
       )}
       {tooltipInfo != null && !isTooltipIconHidden ? (