@dhis2-ui/table 8.2.0 → 8.2.3

package/build/cjs/data-table/table-elements/table-data-cell/table-data-cell.styles.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
-const _defaultExport = [`td.jsx-1115472719{padding:14px 12px;font-size:14px;border:1px solid transparant;border-bottom:1px solid ${_uiConstants.colors.grey300};background-color:${_uiConstants.colors.white};color:${_uiConstants.colors.grey900};}`, `td.active.jsx-1115472719{background-color:${_uiConstants.colors.white};outline:2px solid ${_uiConstants.colors.grey600};outline-offset:-2px;}`, `td.bordered.jsx-1115472719{border-right:1px solid ${_uiConstants.colors.grey300};}`, "td.bordered.jsx-1115472719:last-child{border-right:1px solid transparent;}", `td.error.jsx-1115472719{color:${_uiConstants.colors.red700};}`, `td.muted.jsx-1115472719{color:${_uiConstants.colors.grey700};font-style:italic;}`, `td.valid.jsx-1115472719{color:${_uiConstants.colors.green700};}`, "td.large.jsx-1115472719{padding:20px 12px;font-size:16px;}", "tr:last-child td.jsx-1115472719{border-bottom:1px solid transparent;}", `tfoot tr:first-child td.jsx-1115472719{border-top:1px solid ${_uiConstants.colors.grey300};}`, `tr.selected>td.jsx-1115472719{background-color:${_uiConstants.colors.teal100};}`, `tr:hover>td.jsx-1115472719:not(.staticStyle){background-color:${_uiConstants.colors.grey100};}`, `tr:active>td.jsx-1115472719:not(.staticStyle){background-color:${_uiConstants.colors.grey200};}`, "tr.selected:hover>td.jsx-1115472719:not(.staticStyle){background-color:#cdeae8;}"];
+const _defaultExport = ["td.jsx-1115472719{padding:14px 12px;font-size:14px;border:1px solid transparant;border-bottom:1px solid ".concat(_uiConstants.colors.grey300, ";background-color:").concat(_uiConstants.colors.white, ";color:").concat(_uiConstants.colors.grey900, ";}"), "td.active.jsx-1115472719{background-color:".concat(_uiConstants.colors.white, ";outline:2px solid ").concat(_uiConstants.colors.grey600, ";outline-offset:-2px;}"), "td.bordered.jsx-1115472719{border-right:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "td.bordered.jsx-1115472719:last-child{border-right:1px solid transparent;}", "td.error.jsx-1115472719{color:".concat(_uiConstants.colors.red700, ";}"), "td.muted.jsx-1115472719{color:".concat(_uiConstants.colors.grey700, ";font-style:italic;}"), "td.valid.jsx-1115472719{color:".concat(_uiConstants.colors.green700, ";}"), "td.large.jsx-1115472719{padding:20px 12px;font-size:16px;}", "tr:last-child td.jsx-1115472719{border-bottom:1px solid transparent;}", "tfoot tr:first-child td.jsx-1115472719{border-top:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "tr.selected>td.jsx-1115472719{background-color:".concat(_uiConstants.colors.teal100, ";}"), "tr:hover>td.jsx-1115472719:not(.staticStyle){background-color:".concat(_uiConstants.colors.grey100, ";}"), "tr:active>td.jsx-1115472719:not(.staticStyle){background-color:".concat(_uiConstants.colors.grey200, ";}"), "tr.selected:hover>td.jsx-1115472719:not(.staticStyle){background-color:#cdeae8;}"];
 _defaultExport.__hash = "1115472719";
 var _default = _defaultExport;
 exports.default = _default;

package/build/cjs/data-table/table-elements/table-foot.js

@@ -17,18 +17,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const TableFoot = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  className,
-  dataTest,
-  role,
-  ...props
-}, ref) => /*#__PURE__*/_react.default.createElement("tfoot", _extends({}, props, {
-  className: className,
-  "data-test": dataTest,
-  ref: ref,
-  role: role
-}), children));
+const TableFoot = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    role,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("tfoot", _extends({}, props, {
+    className: className,
+    "data-test": dataTest,
+    ref: ref,
+    role: role
+  }), children);
+});
 exports.TableFoot = TableFoot;
 TableFoot.displayName = 'TableFoot';
 TableFoot.defaultProps = {

package/build/cjs/data-table/table-elements/table-head.js

@@ -17,18 +17,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const TableHead = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  className,
-  dataTest,
-  role,
-  ...props
-}, ref) => /*#__PURE__*/_react.default.createElement("thead", _extends({}, props, {
-  className: className,
-  "data-test": dataTest,
-  ref: ref,
-  role: role
-}), children));
+const TableHead = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    role,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("thead", _extends({}, props, {
+    className: className,
+    "data-test": dataTest,
+    ref: ref,
+    role: role
+  }), children);
+});
 exports.TableHead = TableHead;
 TableHead.displayName = 'TableHead';
 TableHead.defaultProps = {

package/build/cjs/data-table/table-elements/table-header-cell/table-header-cell.js

@@ -26,53 +26,56 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const AUTO = 'auto';
-const TableHeaderCell = /*#__PURE__*/(0, _react.forwardRef)(({
-  active,
-  align,
-  bordered,
-  children,
-  className,
-  colSpan,
-  dataTest,
-  error,
-  fixed,
-  large,
-  left,
-  muted,
-  rowSpan,
-  role,
-  scope,
-  staticStyle,
-  top,
-  valid,
-  width,
-  onClick,
-  ...props
-}, ref) => /*#__PURE__*/_react.default.createElement("th", _extends({}, props, {
-  ref: ref,
-  colSpan: colSpan,
-  rowSpan: rowSpan,
-  onClick: onClick,
-  "data-test": dataTest,
-  role: role,
-  scope: scope,
-  className: `jsx-${_tableHeaderCellStyles.default.__hash}` + " " + _style.default.dynamic([["1837557188", [left, top, align, width]]]) + " " + ((0, _classnames.default)(className, {
+const TableHeaderCell = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
     active,
+    align,
     bordered,
+    children,
+    className,
+    colSpan,
+    dataTest,
     error,
     fixed,
-    fixedHorizontally: fixed && left !== AUTO,
     large,
+    left,
     muted,
+    rowSpan,
+    role,
+    scope,
     staticStyle,
-    valid
-  }) || "")
-}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: _tableHeaderCellStyles.default.__hash
-}, _tableHeaderCellStyles.default), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "1837557188",
-  dynamic: [left, top, align, width]
-}, [`th.__jsx-style-dynamic-selector{left:${left};top:${top};text-align:${align};width:${width};}`])));
+    top,
+    valid,
+    width,
+    onClick,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("th", _extends({}, props, {
+    ref: ref,
+    colSpan: colSpan,
+    rowSpan: rowSpan,
+    onClick: onClick,
+    "data-test": dataTest,
+    role: role,
+    scope: scope,
+    className: "jsx-".concat(_tableHeaderCellStyles.default.__hash) + " " + _style.default.dynamic([["1837557188", [left, top, align, width]]]) + " " + ((0, _classnames.default)(className, {
+      active,
+      bordered,
+      error,
+      fixed,
+      fixedHorizontally: fixed && left !== AUTO,
+      large,
+      muted,
+      staticStyle,
+      valid
+    }) || "")
+  }), children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: _tableHeaderCellStyles.default.__hash
+  }, _tableHeaderCellStyles.default), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1837557188",
+    dynamic: [left, top, align, width]
+  }, ["th.__jsx-style-dynamic-selector{left:".concat(left, ";top:").concat(top, ";text-align:").concat(align, ";width:").concat(width, ";}")]));
+});
 exports.TableHeaderCell = TableHeaderCell;
 TableHeaderCell.displayName = 'TableHeaderCell';
 TableHeaderCell.defaultProps = {

package/build/cjs/data-table/table-elements/table-header-cell/table-header-cell.styles.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
-const _defaultExport = [`th.jsx-3777082606{padding:12px;border:1px solid transparant;border-bottom:1px solid ${_uiConstants.colors.grey300};color:${_uiConstants.colors.grey800};background-color:${_uiConstants.colors.grey200};font-weight:normal;font-size:14px;vertical-align:top;}`, "thead th.jsx-3777082606{padding:8px 12px;font-size:13px;}", `th.jsx-3777082606:last-of-type{border-right:1px solid ${_uiConstants.colors.grey300};}`, `th.active.jsx-3777082606{background-color:${_uiConstants.colors.white};outline:2px solid ${_uiConstants.colors.grey600};outline-offset:-2px;}`, `th.bordered.jsx-3777082606{border-right:1px solid ${_uiConstants.colors.grey300};}`, "th.bordered.jsx-3777082606:last-child{border-right:1px solid transparent;}", `th.error.jsx-3777082606{color:${_uiConstants.colors.red700};}`, `th.muted.jsx-3777082606{color:${_uiConstants.colors.grey700};font-style:italic;}`, `th.valid.jsx-3777082606{color:${_uiConstants.colors.green700};}`, "th.large.jsx-3777082606{padding:14px 12px;font-size:16px;}", "thead th.large.jsx-3777082606{padding:13px 12px;font-size:15px;}", "th.fixed.jsx-3777082606{position:-webkit-sticky;position:sticky;z-index:1;}", "thead th.fixed.jsx-3777082606{position:-webkit-sticky;position:sticky;z-index:2;}", `thead th.fixedHorizontally.jsx-3777082606{z-index:3;background-color:${_uiConstants.colors.grey300};}`, "tr:last-child th.jsx-3777082606{border-bottom:1px solid transparent;}", `thead tr:last-child th.jsx-3777082606{border-bottom:1px solid ${_uiConstants.colors.grey300};}`, `tbody>tr:hover>th.jsx-3777082606:not(.staticStyle),tfoot>tr:hover>th.jsx-3777082606:not(.staticStyle){background-color:${_uiConstants.colors.grey300};}`, `tbody>tr:active>th.jsx-3777082606:not(.staticStyle){background-color:${_uiConstants.colors.grey200};}`, `tfoot>tr:first-child th.jsx-3777082606{border-top:1px solid ${_uiConstants.colors.grey300};}`];
+const _defaultExport = ["th.jsx-3777082606{padding:12px;border:1px solid transparant;border-bottom:1px solid ".concat(_uiConstants.colors.grey300, ";color:").concat(_uiConstants.colors.grey800, ";background-color:").concat(_uiConstants.colors.grey200, ";font-weight:normal;font-size:14px;vertical-align:top;}"), "thead th.jsx-3777082606{padding:8px 12px;font-size:13px;}", "th.jsx-3777082606:last-of-type{border-right:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "th.active.jsx-3777082606{background-color:".concat(_uiConstants.colors.white, ";outline:2px solid ").concat(_uiConstants.colors.grey600, ";outline-offset:-2px;}"), "th.bordered.jsx-3777082606{border-right:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "th.bordered.jsx-3777082606:last-child{border-right:1px solid transparent;}", "th.error.jsx-3777082606{color:".concat(_uiConstants.colors.red700, ";}"), "th.muted.jsx-3777082606{color:".concat(_uiConstants.colors.grey700, ";font-style:italic;}"), "th.valid.jsx-3777082606{color:".concat(_uiConstants.colors.green700, ";}"), "th.large.jsx-3777082606{padding:14px 12px;font-size:16px;}", "thead th.large.jsx-3777082606{padding:13px 12px;font-size:15px;}", "th.fixed.jsx-3777082606{position:-webkit-sticky;position:sticky;z-index:1;}", "thead th.fixed.jsx-3777082606{position:-webkit-sticky;position:sticky;z-index:2;}", "thead th.fixedHorizontally.jsx-3777082606{z-index:3;background-color:".concat(_uiConstants.colors.grey300, ";}"), "tr:last-child th.jsx-3777082606{border-bottom:1px solid transparent;}", "thead tr:last-child th.jsx-3777082606{border-bottom:1px solid ".concat(_uiConstants.colors.grey300, ";}"), "tbody>tr:hover>th.jsx-3777082606:not(.staticStyle),tfoot>tr:hover>th.jsx-3777082606:not(.staticStyle){background-color:".concat(_uiConstants.colors.grey300, ";}"), "tbody>tr:active>th.jsx-3777082606:not(.staticStyle){background-color:".concat(_uiConstants.colors.grey200, ";}"), "tfoot>tr:first-child th.jsx-3777082606{border-top:1px solid ".concat(_uiConstants.colors.grey300, ";}")];
 _defaultExport.__hash = "3777082606";
 var _default = _defaultExport;
 exports.default = _default;

package/build/cjs/data-table/table-elements/table-header-cell-action.js

@@ -21,23 +21,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const TableHeaderCellAction = /*#__PURE__*/(0, _react.forwardRef)(({
-  onClick,
-  children,
-  className,
-  dataTest,
-  title,
-  ...props
-}, ref) => /*#__PURE__*/_react.default.createElement("button", _extends({}, props, {
-  "data-test": dataTest,
-  onClick: onClick,
-  title: title,
-  ref: ref,
-  className: _style.default.dynamic([["997535212", [_uiConstants.colors.grey400]]]) + " " + (className || "")
-}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "997535212",
-  dynamic: [_uiConstants.colors.grey400]
-}, ["button.__jsx-style-dynamic-selector{border:none;padding:0;background:transparent;width:24px;height:24px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;border-radius:4px;margin-left:2px;}", `button.__jsx-style-dynamic-selector:hover,button.__jsx-style-dynamic-selector:focus-visible{background:${_uiConstants.colors.grey400};}`, "button.__jsx-style-dynamic-selector:active,button.__jsx-style-dynamic-selector:focus{outline:none;}"])));
+const TableHeaderCellAction = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    onClick,
+    children,
+    className,
+    dataTest,
+    title,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("button", _extends({}, props, {
+    "data-test": dataTest,
+    onClick: onClick,
+    title: title,
+    ref: ref,
+    className: _style.default.dynamic([["997535212", [_uiConstants.colors.grey400]]]) + " " + (className || "")
+  }), children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "997535212",
+    dynamic: [_uiConstants.colors.grey400]
+  }, ["button.__jsx-style-dynamic-selector{border:none;padding:0;background:transparent;width:24px;height:24px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;border-radius:4px;margin-left:2px;}", "button.__jsx-style-dynamic-selector:hover,button.__jsx-style-dynamic-selector:focus-visible{background:".concat(_uiConstants.colors.grey400, ";}"), "button.__jsx-style-dynamic-selector:active,button.__jsx-style-dynamic-selector:focus{outline:none;}"]));
+});
 exports.TableHeaderCellAction = TableHeaderCellAction;
 TableHeaderCellAction.displayName = 'TableHeaderCellAction';
 TableHeaderCellAction.defaultProps = {

package/build/cjs/data-table/table-elements/table-row.js

@@ -21,25 +21,28 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const TableRow = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  className,
-  dataTest,
-  draggable,
-  role,
-  selected,
-  ...props
-}, ref) => /*#__PURE__*/_react.default.createElement("tr", _extends({}, props, {
-  ref: ref,
-  "data-test": dataTest,
-  role: role,
-  className: "jsx-1820444258" + " " + ((0, _classnames.default)(className, {
+const TableRow = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    draggable,
+    role,
     selected,
-    draggable
-  }) || "")
-}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "1820444258"
-}, ["tbody>tr.draggable.jsx-1820444258,tfoot>tr.draggable.jsx-1820444258{cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"])));
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("tr", _extends({}, props, {
+    ref: ref,
+    "data-test": dataTest,
+    role: role,
+    className: "jsx-1820444258" + " " + ((0, _classnames.default)(className, {
+      selected,
+      draggable
+    }) || "")
+  }), children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1820444258"
+  }, ["tbody>tr.draggable.jsx-1820444258,tfoot>tr.draggable.jsx-1820444258{cursor:move;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]));
+});
 exports.TableRow = TableRow;
 TableRow.displayName = 'TableRow';
 TableRow.defaultProps = {

package/build/cjs/data-table/table-elements/table-scroll-box.js

@@ -21,21 +21,24 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const TableScrollBox = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  className,
-  dataTest,
-  maxHeight,
-  maxWidth,
-  ...props
-}, ref) => /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
-  "data-test": dataTest,
-  ref: ref,
-  className: _style.default.dynamic([["2859562182", [_uiConstants.colors.grey300, maxHeight, maxWidth]]]) + " " + (className || "")
-}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2859562182",
-  dynamic: [_uiConstants.colors.grey300, maxHeight, maxWidth]
-}, [`div.__jsx-style-dynamic-selector{border:1px solid ${_uiConstants.colors.grey300};border-top:none;box-sizing:border-box;max-height:${maxHeight};max-width:${maxWidth};overflow:auto;}`])));
+const TableScrollBox = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    maxHeight,
+    maxWidth,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
+    "data-test": dataTest,
+    ref: ref,
+    className: _style.default.dynamic([["2859562182", [_uiConstants.colors.grey300, maxHeight, maxWidth]]]) + " " + (className || "")
+  }), children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2859562182",
+    dynamic: [_uiConstants.colors.grey300, maxHeight, maxWidth]
+  }, ["div.__jsx-style-dynamic-selector{border:1px solid ".concat(_uiConstants.colors.grey300, ";border-top:none;box-sizing:border-box;max-height:").concat(maxHeight, ";max-width:").concat(maxWidth, ";overflow:auto;}")]));
+});
 exports.TableScrollBox = TableScrollBox;
 TableScrollBox.displayName = 'TableScrollBox';
 TableScrollBox.defaultProps = {

package/build/cjs/data-table/table-elements/table-toolbar.js

@@ -23,20 +23,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const TableToolbar = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  className,
-  dataTest,
-  position,
-  ...props
-}, ref) => /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
-  "data-test": dataTest,
-  ref: ref,
-  className: _style.default.dynamic([["247244135", [_uiConstants.colors.grey300, _uiConstants.spacers.dp12]]]) + " " + ((0, _classnames.default)(className, position) || "")
-}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "247244135",
-  dynamic: [_uiConstants.colors.grey300, _uiConstants.spacers.dp12]
-}, [`div.__jsx-style-dynamic-selector{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border:1px solid ${_uiConstants.colors.grey300};padding:${_uiConstants.spacers.dp12};}`, "div.top.__jsx-style-dynamic-selector{border-bottom:none;}", "div.bottom.__jsx-style-dynamic-selector{border-top:none;}"])));
+const TableToolbar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    position,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, props, {
+    "data-test": dataTest,
+    ref: ref,
+    className: _style.default.dynamic([["247244135", [_uiConstants.colors.grey300, _uiConstants.spacers.dp12]]]) + " " + ((0, _classnames.default)(className, position) || "")
+  }), children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "247244135",
+    dynamic: [_uiConstants.colors.grey300, _uiConstants.spacers.dp12]
+  }, ["div.__jsx-style-dynamic-selector{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border:1px solid ".concat(_uiConstants.colors.grey300, ";padding:").concat(_uiConstants.spacers.dp12, ";}"), "div.top.__jsx-style-dynamic-selector{border-bottom:none;}", "div.bottom.__jsx-style-dynamic-selector{border-top:none;}"]));
+});
 exports.TableToolbar = TableToolbar;
 TableToolbar.displayName = 'TableToolbar';
 TableToolbar.defaultProps = {

package/build/cjs/data-table/table-elements/table.js

@@ -23,26 +23,29 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const Table = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  className,
-  dataTest,
-  layout,
-  role,
-  borderless,
-  width,
-  ...props
-}, ref) => /*#__PURE__*/_react.default.createElement("table", _extends({}, props, {
-  "data-test": dataTest,
-  ref: ref,
-  role: role,
-  className: _style.default.dynamic([["3140496910", [layout, width, _uiConstants.colors.grey300]]]) + " " + ((0, _classnames.default)(className, {
-    borderless
-  }) || "")
-}), children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "3140496910",
-  dynamic: [layout, width, _uiConstants.colors.grey300]
-}, [`table.__jsx-style-dynamic-selector{table-layout:${layout};border-collapse:separate;border-spacing:0;width:${width};box-sizing:border-box;border:1px solid ${_uiConstants.colors.grey300};}`, "table.borderless.__jsx-style-dynamic-selector{border:none;}"])));
+const Table = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    className,
+    dataTest,
+    layout,
+    role,
+    borderless,
+    width,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("table", _extends({}, props, {
+    "data-test": dataTest,
+    ref: ref,
+    role: role,
+    className: _style.default.dynamic([["3140496910", [layout, width, _uiConstants.colors.grey300]]]) + " " + ((0, _classnames.default)(className, {
+      borderless
+    }) || "")
+  }), children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3140496910",
+    dynamic: [layout, width, _uiConstants.colors.grey300]
+  }, ["table.__jsx-style-dynamic-selector{table-layout:".concat(layout, ";border-collapse:separate;border-spacing:0;width:").concat(width, ";box-sizing:border-box;border:1px solid ").concat(_uiConstants.colors.grey300, ";}"), "table.borderless.__jsx-style-dynamic-selector{border:none;}"]));
+});
 exports.Table = Table;
 Table.displayName = 'Table';
 Table.defaultProps = {

package/build/cjs/data-table/table-elements/table.stories.e2e.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FixedHeaderAndColumns = exports.default = void 0;
+exports.default = exports.FixedHeaderAndColumns = void 0;
 
 var _react = _interopRequireDefault(require("react"));