@onewelcome/react-lib-components 0.1.8-alpha → 0.1.9-alpha

package/dist/react-lib-components.esm.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, Fragment, useRef, createRef, useLayoutEffec
 import { createPortal } from 'react-dom';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -15,7 +15,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -1588,8 +1587,8 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, children), domRoot)));
 });
 
-var css$C = ".Pagination_module_paginationWrapper__7eec36d0 {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--greyed-out);\n  display: flex;\n  flex-direction: column;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_formElement__7eec36d0 {\n  height: 2.5rem;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_formElement__7eec36d0 button {\n  min-height: 2.5rem;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_total__7eec36d0 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_total__7eec36d0 span > span {\n  font-weight: 700;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  margin-left: 0.25rem;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pagination__7eec36d0 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 1rem;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pagination__7eec36d0 .Pagination_module_previous__7eec36d0,\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pagination__7eec36d0 .Pagination_module_next__7eec36d0 {\n  display: flex;\n  align-items: center;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pagination__7eec36d0 .Pagination_module_previous__7eec36d0 button,\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pagination__7eec36d0 .Pagination_module_next__7eec36d0 button {\n  margin: 0.25rem;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pagination__7eec36d0 .Pagination_module_previous__7eec36d0 button span:before,\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pagination__7eec36d0 .Pagination_module_next__7eec36d0 button span:before {\n  font-size: 0.75rem;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_perPage__7eec36d0 {\n  display: none;\n  align-items: center;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_page__7eec36d0 {\n  display: flex;\n  align-items: center;\n  flex-basis: min-content;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pageSizeSelect__7eec36d0 {\n  border-color: #fff;\n  margin: 0 0.25rem;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pageSizeSelect__7eec36d0 button {\n  min-width: 3.4375rem;\n  padding: 0;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pageSizeSelect__7eec36d0 button div[data-display] {\n  left: 0.5rem;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pageSizeSelect__7eec36d0 button div:not([data-display]) {\n  right: 0.5rem;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_currentValueInput__7eec36d0 {\n  margin: 0 0.25rem 0 0;\n  padding: 0;\n}\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_currentValueInput__7eec36d0 input {\n  border-radius: var(--input-border-radius);\n  padding: 0 1rem;\n  width: auto;\n  text-align: center;\n}\n\n@media screen and (min-width: 30em) {\n  .Pagination_module_paginationWrapper__7eec36d0 {\n    flex-direction: row;\n  }\n  .Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_total__7eec36d0 {\n    justify-content: flex-start;\n  }\n  .Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pagination__7eec36d0 {\n    margin-top: 0;\n    justify-content: flex-end;\n  }\n  .Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pagination__7eec36d0 .Pagination_module_previous__7eec36d0 button,\n.Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_pagination__7eec36d0 .Pagination_module_next__7eec36d0 button {\n    margin: 0.5rem;\n  }\n}\n@media screen and (min-width: 48em) {\n  .Pagination_module_paginationWrapper__7eec36d0 .Pagination_module_perPage__7eec36d0 {\n    display: flex;\n  }\n}";
-var modules_e3c5bce1 = {"pagination-wrapper":"Pagination_module_paginationWrapper__7eec36d0","form-element":"Pagination_module_formElement__7eec36d0","total":"Pagination_module_total__7eec36d0","pagination":"Pagination_module_pagination__7eec36d0","previous":"Pagination_module_previous__7eec36d0","next":"Pagination_module_next__7eec36d0","per-page":"Pagination_module_perPage__7eec36d0","page":"Pagination_module_page__7eec36d0","page-size-select":"Pagination_module_pageSizeSelect__7eec36d0","current-value-input":"Pagination_module_currentValueInput__7eec36d0"};
+var css$C = ".Pagination_module_paginationWrapper__87a18f48 {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  color: var(--greyed-out);\n  display: flex;\n  flex-direction: column;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_formElement__87a18f48 {\n  height: 2.5rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_formElement__87a18f48 button {\n  min-height: 2.5rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_total__87a18f48 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_total__87a18f48 span > span {\n  font-weight: 700;\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  margin-left: 0.25rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 {\n  flex: 1 0 auto;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: 1rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_previous__87a18f48,\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_next__87a18f48 {\n  display: flex;\n  align-items: center;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_previous__87a18f48 button,\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_next__87a18f48 button {\n  margin: 0.25rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_previous__87a18f48 button span:before,\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_next__87a18f48 button span:before {\n  font-size: 0.75rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_perPage__87a18f48 {\n  display: none;\n  align-items: center;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_page__87a18f48 {\n  display: flex;\n  align-items: center;\n  flex-basis: min-content;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pageSizeSelect__87a18f48 {\n  border-color: #fff;\n  margin: 0 0.25rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pageSizeSelect__87a18f48 button {\n  min-width: 3.4375rem;\n  padding: 0;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pageSizeSelect__87a18f48 button div[data-display] {\n  left: 0.5rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pageSizeSelect__87a18f48 button div:not([data-display]) {\n  right: 0.5rem;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_currentValueInput__87a18f48 {\n  margin: 0 0.25rem 0 0;\n  padding: 0;\n}\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_currentValueInput__87a18f48 input {\n  border-radius: var(--input-border-radius);\n  padding: 0 1rem;\n  width: auto;\n  text-align: center;\n}\n\n@media screen and (min-width: 30em) {\n  .Pagination_module_paginationWrapper__87a18f48 {\n    flex-direction: row;\n  }\n  .Pagination_module_paginationWrapper__87a18f48 .Pagination_module_total__87a18f48 {\n    justify-content: flex-start;\n  }\n  .Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 {\n    margin-top: 0;\n    justify-content: flex-end;\n  }\n  .Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_previous__87a18f48 button,\n.Pagination_module_paginationWrapper__87a18f48 .Pagination_module_pagination__87a18f48 .Pagination_module_next__87a18f48 button {\n    margin: 0 0.5rem;\n  }\n}\n@media screen and (min-width: 48em) {\n  .Pagination_module_paginationWrapper__87a18f48 .Pagination_module_perPage__87a18f48 {\n    display: flex;\n  }\n}";
+var modules_e3c5bce1 = {"pagination-wrapper":"Pagination_module_paginationWrapper__87a18f48","form-element":"Pagination_module_formElement__87a18f48","total":"Pagination_module_total__87a18f48","pagination":"Pagination_module_pagination__87a18f48","previous":"Pagination_module_previous__87a18f48","next":"Pagination_module_next__87a18f48","per-page":"Pagination_module_perPage__87a18f48","page":"Pagination_module_page__87a18f48","page-size-select":"Pagination_module_pageSizeSelect__87a18f48","current-value-input":"Pagination_module_currentValueInput__87a18f48"};
 n(css$C,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var css$B = ".Input_module_inputWrapper__ca7df3b0 {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0 1.25rem;\n  background-color: var(--input-background-color);\n  border-color: var(--input-border-color);\n  border-style: var(--input-border-style);\n  border-width: var(--input-border-width);\n  border-radius: var(--input-border-radius);\n  transition: all 0.2s ease-in-out;\n}\n.Input_module_inputWrapper__ca7df3b0:hover:not(:disabled) {\n  border-color: var(--default);\n}\n.Input_module_inputWrapper__ca7df3b0.Input_module_disabled__ca7df3b0, .Input_module_inputWrapper__ca7df3b0.Input_module_disabled__ca7df3b0 input {\n  background-color: var(--disabled);\n  border-color: #fff;\n  cursor: not-allowed;\n}\n.Input_module_inputWrapper__ca7df3b0.Input_module_error__ca7df3b0 {\n  border-color: var(--error);\n}\n.Input_module_inputWrapper__ca7df3b0.Input_module_focus__ca7df3b0 {\n  border-color: var(--color-primary);\n}\n\n.Input_module_input__ca7df3b0 {\n  height: 4rem;\n  border: 0;\n  color: var(--greyed-out);\n  font-size: var(--font-size);\n  font-family: var(--font-family);\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0;\n}\n.Input_module_input__ca7df3b0:focus:not(:disabled) {\n  outline: none;\n  border-color: var(--color-primary);\n}\n\n.Input_module_error__ca7df3b0 input {\n  color: var(--error);\n  padding-right: 3.75rem;\n}\n.Input_module_error__ca7df3b0 input.Input_module_removeExtraIndent__ca7df3b0 {\n  padding-right: 1.25rem;\n}\n\n.Input_module_warning__ca7df3b0 {\n  color: var(--error);\n  position: absolute;\n  height: 100%;\n  width: 1.25rem;\n  right: 1.25rem;\n  top: 0px;\n  font-size: 1.125rem;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.Input_module_warning__ca7df3b0:before {\n  height: 1.3125rem;\n}\n.Input_module_warning__ca7df3b0.Input_module_extraIndent__ca7df3b0 {\n  right: 3.75rem;\n}\n\n.Input_module_inputWrapper__ca7df3b0 [data-prefix],\n.Input_module_inputWrapper__ca7df3b0 [data-suffix] {\n  transition: all 0.2s ease-in-out;\n  display: block;\n  z-index: 1;\n}";
@@ -3540,8 +3539,8 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })))));
 });
 
-var css$e = ".Wrapper_module_floatingWrapper__0b897a43 {\n  position: relative;\n}\n\n.Wrapper_module_floatingLabel__0b897a43 {\n  font-size: 1rem;\n  position: absolute;\n  z-index: 1;\n  top: 1.3125rem;\n  left: 1.35rem;\n  transform-origin: left top;\n  transition: all 0.2s ease-in-out;\n  pointer-events: none;\n}\n.Wrapper_module_floatingLabel__0b897a43.Wrapper_module_floatingLabelActive__0b897a43 {\n  font-size: 0.75rem;\n  transform: translateY(-0.75rem);\n  color: var(--default);\n}\n.Wrapper_module_floatingLabel__0b897a43.Wrapper_module_error__0b897a43 {\n  color: var(--error);\n}\n\n.Wrapper_module_wrapper__0b897a43 + fieldset,\n.Wrapper_module_wrapper__0b897a43 + .Wrapper_module_wrapper__0b897a43 {\n  margin-top: 1rem;\n}\n\n.Wrapper_module_required__0b897a43:after {\n  content: \" *\";\n}";
-var modules_e401a244 = {"floating-wrapper":"Wrapper_module_floatingWrapper__0b897a43","floating-label":"Wrapper_module_floatingLabel__0b897a43","floating-label-active":"Wrapper_module_floatingLabelActive__0b897a43","error":"Wrapper_module_error__0b897a43","wrapper":"Wrapper_module_wrapper__0b897a43","required":"Wrapper_module_required__0b897a43"};
+var css$e = ".Wrapper_module_floatingWrapper__24a1c678 {\n  position: relative;\n}\n\n.Wrapper_module_floatingLabel__24a1c678 {\n  font-family: var(--font-family);\n  font-size: 1rem;\n  position: absolute;\n  z-index: 1;\n  top: 1.3125rem;\n  left: 1.35rem;\n  transform-origin: left top;\n  transition: all 0.2s ease-in-out;\n  pointer-events: none;\n}\n.Wrapper_module_floatingLabel__24a1c678.Wrapper_module_floatingLabelActive__24a1c678 {\n  font-size: 0.75rem;\n  transform: translateY(-0.75rem);\n  color: var(--default);\n}\n.Wrapper_module_floatingLabel__24a1c678.Wrapper_module_error__24a1c678 {\n  color: var(--error);\n}\n\n.Wrapper_module_wrapper__24a1c678 + fieldset,\n.Wrapper_module_wrapper__24a1c678 + .Wrapper_module_wrapper__24a1c678 {\n  margin-top: 1rem;\n}\n\n.Wrapper_module_required__24a1c678:after {\n  content: \" *\";\n}";
+var modules_e401a244 = {"floating-wrapper":"Wrapper_module_floatingWrapper__24a1c678","floating-label":"Wrapper_module_floatingLabel__24a1c678","floating-label-active":"Wrapper_module_floatingLabelActive__24a1c678","error":"Wrapper_module_error__24a1c678","wrapper":"Wrapper_module_wrapper__24a1c678","required":"Wrapper_module_required__24a1c678"};
 n(css$e,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var _excluded$h = ["children", "className", "error", "errorMessage", "errorId", "errorMessageIcon", "errorMessageIconPosition", "helperText", "helperId", "floatingLabel", "floatingLabelActive", "required", "helperProps", "helperIndent", "labelProps", "label", "disabled", "name", "innerClassName"];
@@ -4384,8 +4383,8 @@ var WizardSteps = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 
-var css$7 = ".DataGrid_module_tableWrapper__66a6f06a {\n  overflow-x: auto;\n}\n\n.DataGrid_module_table__66a6f06a {\n  border-collapse: collapse;\n  padding-top: 0.5rem;\n  width: 100%;\n  position: relative;\n}\n\n.DataGrid_module_pagination__66a6f06a {\n  margin-top: 1rem;\n  padding: 0 1rem;\n}\n\n@media only screen and (min-width: 50em) {\n  .DataGrid_module_pagination__66a6f06a {\n    padding: 0 1.25rem;\n  }\n}";
-var modules_b8d590e8 = {"table-wrapper":"DataGrid_module_tableWrapper__66a6f06a","table":"DataGrid_module_table__66a6f06a","pagination":"DataGrid_module_pagination__66a6f06a"};
+var css$7 = ".DataGrid_module_gridWrapper__f048f02f {\n  padding: 1rem 0;\n}\n\n.DataGrid_module_tableWrapper__f048f02f {\n  overflow-x: auto;\n}\n\n.DataGrid_module_table__f048f02f {\n  border-collapse: collapse;\n  padding-top: 0.5rem;\n  width: 100%;\n  position: relative;\n}\n\n.DataGrid_module_pagination__f048f02f {\n  margin-top: 1rem;\n  padding: 0 1rem;\n}\n\n@media only screen and (min-width: 50em) {\n  .DataGrid_module_pagination__f048f02f {\n    padding: 0 1.25rem;\n  }\n}";
+var modules_b8d590e8 = {"grid-wrapper":"DataGrid_module_gridWrapper__f048f02f","table-wrapper":"DataGrid_module_tableWrapper__f048f02f","table":"DataGrid_module_table__f048f02f","pagination":"DataGrid_module_pagination__f048f02f"};
 n(css$7,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var css$6 = ".DataGridHeaderCell_module_headerCell__cbbe0d16 {\n  font-weight: normal;\n  text-align: left;\n  padding: 0 0.625rem;\n}\n.DataGridHeaderCell_module_headerCell__cbbe0d16:first-child {\n  padding-left: 1rem;\n}\n.DataGridHeaderCell_module_headerCell__cbbe0d16:last-child {\n  padding-right: 1rem;\n}\n.DataGridHeaderCell_module_headerCell__cbbe0d16 > * {\n  display: inline-flex;\n}\n.DataGridHeaderCell_module_headerCell__cbbe0d16 > button {\n  padding: 0;\n  margin: 0;\n  border: 0;\n  background: none;\n  cursor: pointer;\n}\n\n.DataGridHeaderCell_module_headline__cbbe0d16 {\n  font-family: var(--font-family);\n  font-size: var(--font-size);\n  line-height: 1.5;\n  font-weight: 700;\n  color: var(--default);\n}\n\n.DataGridHeaderCell_module_sortingIndicatorContainer__cbbe0d16 {\n  display: flex;\n  flex-direction: column;\n  padding-left: 0.5rem;\n  justify-content: center;\n}\n.DataGridHeaderCell_module_sortingIndicatorContainer__cbbe0d16 > * {\n  font-size: 0.625rem;\n}\n.DataGridHeaderCell_module_sortingIndicatorContainer__cbbe0d16 .DataGridHeaderCell_module_indicator__cbbe0d16 {\n  color: var(--greyed-out);\n}\n.DataGridHeaderCell_module_sortingIndicatorContainer__cbbe0d16 .DataGridHeaderCell_module_indicator__cbbe0d16.DataGridHeaderCell_module_active__cbbe0d16 {\n  color: var(--color-primary);\n}\n.DataGridHeaderCell_module_sortingIndicatorContainer__cbbe0d16 .DataGridHeaderCell_module_indicator__cbbe0d16.DataGridHeaderCell_module_hidden__cbbe0d16 {\n  visibility: hidden;\n}\n\n@media only screen and (min-width: 50em) {\n  .DataGridHeaderCell_module_headerCell__cbbe0d16:first-child {\n    padding-left: 1.25rem;\n  }\n  .DataGridHeaderCell_module_headerCell__cbbe0d16:last-child {\n    padding-right: 1.25rem;\n  }\n}";
@@ -4446,7 +4445,7 @@ var css$5 = ".DataGridHeader_module_thead__e75f00b8::after {\n  content: \"\";\n
 var modules_bec66042 = {"thead":"DataGridHeader_module_thead__e75f00b8","row":"DataGridHeader_module_row__e75f00b8","context-menu":"DataGridHeader_module_contextMenu__e75f00b8"};
 n(css$5,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$6 = ["initialSort", "onSort", "headers", "disableContextMenuColumn", "enableMultiSorting"];
+var _excluded$6 = ["initialSort", "onSort", "headers", "disableContextMenuColumn", "enableMultiSorting", "spacing"];
 var sortingStates = [undefined, 'ASC', 'DESC'];
 var DataGridHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var initialSort = _ref.initialSort,
@@ -4454,6 +4453,7 @@ var DataGridHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       headers = _ref.headers,
       disableContextMenuColumn = _ref.disableContextMenuColumn,
       enableMultiSorting = _ref.enableMultiSorting,
+      spacing = _ref.spacing,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   var _useState = useState(initialSort || []),
@@ -4496,11 +4496,21 @@ var DataGridHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setSortList(newSort);
   };
 
-  var headerCells = headers.map(function (header) {
+  var headerCells = headers.map(function (header, index) {
     if (header.hidden) {
       return null;
     }
 
+    var headerStyle = {};
+
+    if (index === 0) {
+      headerStyle.paddingLeft = spacing == null ? void 0 : spacing.paddingLeft;
+    }
+
+    if (index === headers.length - 1 && disableContextMenuColumn) {
+      headerStyle.paddingRight = spacing == null ? void 0 : spacing.paddingRight;
+    }
+
     var sort = sortList.find(function (item) {
       return item.name === header.name;
     });
@@ -4510,7 +4520,8 @@ var DataGridHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       headline: header.headline,
       disableSorting: header.disableSorting || !onSort,
       onSort: wrapOnSort,
-      activeSortDirection: sort == null ? void 0 : sort.direction
+      activeSortDirection: sort == null ? void 0 : sort.direction,
+      style: headerStyle
     });
   });
   return React.createElement("thead", _extends({}, rest, {
@@ -4519,13 +4530,16 @@ var DataGridHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), React.createElement("tr", {
     className: modules_bec66042['row']
   }, headerCells, !disableContextMenuColumn && React.createElement("td", {
+    style: {
+      paddingRight: spacing == null ? void 0 : spacing.paddingRight
+    },
     "aria-label": "context menu",
     className: modules_bec66042['context-menu']
   })));
 });
 
-var css$4 = ".DataGridActions_module_actions__b4702fe2 {\n  margin-bottom: 1rem;\n  padding: 0 1rem;\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.DataGridActions_module_leftActions__b4702fe2 {\n  flex: 1;\n}\n\n.DataGridActions_module_rightActions__b4702fe2 {\n  display: flex;\n  gap: 1rem;\n}\n\n.DataGridActions_module_desktop__b4702fe2 {\n  display: none;\n}\n\n@media only screen and (min-width: 50em) {\n  .DataGridActions_module_actions__b4702fe2 {\n    padding: 0 1.25rem;\n  }\n}\n@media only screen and (min-width: 30em) {\n  .DataGridActions_module_desktop__b4702fe2 {\n    display: block;\n  }\n\n  .DataGridActions_module_mobile__b4702fe2 {\n    display: none;\n  }\n}";
-var modules_3f552d89 = {"actions":"DataGridActions_module_actions__b4702fe2","left-actions":"DataGridActions_module_leftActions__b4702fe2","right-actions":"DataGridActions_module_rightActions__b4702fe2","desktop":"DataGridActions_module_desktop__b4702fe2","mobile":"DataGridActions_module_mobile__b4702fe2"};
+var css$4 = ".DataGridActions_module_actions__a2bfe2f8 {\n  margin-bottom: 1rem;\n  padding: 0 1rem;\n  display: flex;\n  flex-wrap: wrap;\n}\n\n.DataGridActions_module_leftActions__a2bfe2f8 {\n  flex: 1;\n}\n\n.DataGridActions_module_rightActions__a2bfe2f8 {\n  display: flex;\n  gap: 1rem;\n}\n\n.DataGridActions_module_desktop__a2bfe2f8 {\n  display: none;\n}\n\n@media only screen and (min-width: 50em) {\n  .DataGridActions_module_actions__a2bfe2f8 {\n    padding: 0 1.25rem;\n  }\n}\n@media only screen and (min-width: 30em) {\n  .DataGridActions_module_desktop__a2bfe2f8 {\n    display: block;\n  }\n  .DataGridActions_module_mobile__a2bfe2f8 {\n    display: none;\n  }\n}";
+var modules_3f552d89 = {"actions":"DataGridActions_module_actions__a2bfe2f8","left-actions":"DataGridActions_module_leftActions__a2bfe2f8","right-actions":"DataGridActions_module_rightActions__a2bfe2f8","desktop":"DataGridActions_module_desktop__a2bfe2f8","mobile":"DataGridActions_module_mobile__a2bfe2f8"};
 n(css$4,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
 var css$3 = ".DataGridColumnsToggle_module_popover__89304f63 {\n  background-color: var(--modal-background-color);\n  z-index: 1;\n  min-width: 17.5rem;\n}\n\n.DataGridColumnsToggle_module_backdrop__89304f63 {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  background-color: transparent;\n}\n\n.DataGridColumnsToggle_module_header__89304f63 {\n  min-width: 5rem;\n  padding: 1rem 0.5rem 1rem 1.5rem;\n  background-color: var(--modal-header-background-color);\n  border-top-left-radius: 0.5rem;\n  border-top-right-radius: 0.5rem;\n  display: flex;\n  align-items: center;\n}\n\n.DataGridColumnsToggle_module_title__89304f63 {\n  flex: 1;\n  margin: 0;\n}\n\n.DataGridColumnsToggle_module_closeBtn__89304f63 {\n  margin-left: 0.5rem;\n}\n\n.DataGridColumnsToggle_module_content__89304f63 {\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1.25rem;\n}";
@@ -4688,15 +4702,30 @@ var css$2 = ".DataGridCell_module_srOnly__5fbf1b86 {\n  position: absolute;\n  w
 var modules_e636700c = {"sr-only":"DataGridCell_module_srOnly__5fbf1b86","hidden":"DataGridCell_module_hidden__5fbf1b86","slide-in":"DataGridCell_module_slideIn__5fbf1b86","slide-out":"DataGridCell_module_slideOut__5fbf1b86","cell":"DataGridCell_module_cell__5fbf1b86","loading":"DataGridCell_module_loading__5fbf1b86","shimmer":"DataGridCell_module_shimmer__5fbf1b86"};
 n(css$2,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$3 = ["children", "className", "isLoading"];
+var _excluded$3 = ["children", "className", "isLoading", "spacing", "cellIndex", "columnLength", "disableContextMenuColumn"];
 var DataGridCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       isLoading = _ref.isLoading,
+      spacing = _ref.spacing,
+      cellIndex = _ref.cellIndex,
+      columnLength = _ref.columnLength,
+      disableContextMenuColumn = _ref.disableContextMenuColumn,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
+  var cellStyle = {};
+
+  if (cellIndex === 0) {
+    cellStyle.paddingLeft = spacing == null ? void 0 : spacing.paddingLeft;
+  }
+
+  if (cellIndex === columnLength && !disableContextMenuColumn || columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn) {
+    cellStyle.paddingRight = spacing == null ? void 0 : spacing.paddingRight;
+  }
+
   return React.createElement("td", _extends({}, rest, {
     ref: ref,
+    style: _extends({}, rest.style, cellStyle),
     className: modules_e636700c['cell'] + " " + (className != null ? className : '')
   }), isLoading && React.createElement("div", {
     className: modules_e636700c['loading'],
@@ -4712,17 +4741,29 @@ var css$1 = ".DataGridRow_module_row__620d6a13 {\n  background-color: var(--data
 var modules_fb55f208 = {"row":"DataGridRow_module_row__620d6a13","loading":"DataGridRow_module_loading__620d6a13"};
 n(css$1,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$2 = ["children", "className", "headers", "isLoading"];
+var _excluded$2 = ["children", "className", "headers", "isLoading", "spacing", "disableContextMenuColumn"];
 var DataGridRow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       headers = _ref.headers,
       isLoading = _ref.isLoading,
+      spacing = _ref.spacing,
+      disableContextMenuColumn = _ref.disableContextMenuColumn,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
   var visibleCells = React.Children.map(children, function (child, index) {
-    var visible = (headers == null ? void 0 : headers.length) > index ? !headers[index].hidden : true;
-    return visible && child;
+    if (child) {
+      var cellWithSpacing = React.cloneElement(child, {
+        spacing: spacing,
+        cellIndex: index,
+        columnLength: headers == null ? void 0 : headers.length,
+        disableContextMenuColumn: disableContextMenuColumn
+      });
+      var visible = (headers == null ? void 0 : headers.length) > index ? !headers[index].hidden : true;
+      return visible && cellWithSpacing;
+    }
+
+    return null;
   });
   var classNames = [modules_fb55f208['row']];
   className && classNames.push(className);
@@ -4737,7 +4778,7 @@ var css = ".DataGridBody_module_empty__243e0ebe {\n  text-align: center;\n  heig
 var modules_532fe2cf = {"empty":"DataGridBody_module_empty__243e0ebe"};
 n(css,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
 
-var _excluded$1 = ["children", "data", "headers", "isLoading", "disableContextMenuColumn", "emptyLabel"];
+var _excluded$1 = ["children", "data", "headers", "isLoading", "disableContextMenuColumn", "emptyLabel", "spacing"];
 var skeletonLoadingRows = 9;
 
 var DataGridBodyInner = function DataGridBodyInner(_ref, ref) {
@@ -4747,6 +4788,7 @@ var DataGridBodyInner = function DataGridBodyInner(_ref, ref) {
       isLoading = _ref.isLoading,
       disableContextMenuColumn = _ref.disableContextMenuColumn,
       emptyLabel = _ref.emptyLabel,
+      spacing = _ref.spacing,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
   var renderContent = function renderContent() {
@@ -4787,7 +4829,9 @@ var DataGridBodyInner = function DataGridBodyInner(_ref, ref) {
         item: item,
         index: index
       }), {
-        headers: headers
+        headers: headers,
+        spacing: spacing,
+        disableContextMenuColumn: disableContextMenuColumn
       });
     });
   };
@@ -4799,7 +4843,7 @@ var DataGridBodyInner = function DataGridBodyInner(_ref, ref) {
 
 var DataGridBody = /*#__PURE__*/React.forwardRef(DataGridBodyInner);
 
-var _excluded = ["children", "data", "initialSort", "onSort", "headers", "actions", "paginationProps", "disableContextMenuColumn", "isLoading", "enableMultiSorting", "emptyLabel"];
+var _excluded = ["children", "data", "initialSort", "onSort", "headers", "actions", "paginationProps", "disableContextMenuColumn", "isLoading", "enableMultiSorting", "emptyLabel", "spacing", "style"];
 
 var DataGridInner = function DataGridInner(_ref, ref) {
   var _paginationProps$clas;
@@ -4816,6 +4860,8 @@ var DataGridInner = function DataGridInner(_ref, ref) {
       isLoading = _ref.isLoading,
       enableMultiSorting = _ref.enableMultiSorting,
       emptyLabel = _ref.emptyLabel,
+      spacing = _ref.spacing,
+      style = _ref.style,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   if (!headers) {
@@ -4830,6 +4876,7 @@ var DataGridInner = function DataGridInner(_ref, ref) {
       internalHeaders = _useState[0],
       setInternalHeaders = _useState[1];
 
+  var styleWithSpacing = useSpacing(spacing, style);
   useEffect(function () {
     return setInternalHeaders(headers);
   }, [headers]);
@@ -4842,9 +4889,46 @@ var DataGridInner = function DataGridInner(_ref, ref) {
     }));
   };
 
+  if (styleWithSpacing != null && styleWithSpacing.padding) {
+    var splitPaddings = styleWithSpacing.padding.toString().split(' ');
+    var paddingLeftIndex = 0;
+
+    if (splitPaddings.length >= 2) {
+      paddingLeftIndex = 1;
+    }
+
+    if (splitPaddings.length === 4) {
+      paddingLeftIndex = 3;
+    }
+
+    Object.defineProperties(styleWithSpacing, {
+      paddingTop: {
+        value: splitPaddings[0]
+      },
+      paddingRight: {
+        value: splitPaddings[splitPaddings.length - 1 > 0 ? 1 : 0]
+      },
+      paddingBottom: {
+        value: splitPaddings[splitPaddings.length / 3 >= 1 ? 2 : 0]
+      },
+      paddingLeft: {
+        value: splitPaddings[paddingLeftIndex]
+      }
+    });
+  }
+
   return React.createElement("div", _extends({}, rest, {
-    ref: ref
+    className: modules_b8d590e8['grid-wrapper'],
+    ref: ref,
+    style: {
+      paddingTop: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingTop,
+      paddingBottom: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingBottom
+    }
   }), React.createElement(DataGridActions, _extends({}, actions, {
+    style: {
+      paddingLeft: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingLeft,
+      paddingRight: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingRight
+    },
     headers: internalHeaders,
     onColumnToggled: onColumnToggled
   })), React.createElement("div", {
@@ -4856,15 +4940,21 @@ var DataGridInner = function DataGridInner(_ref, ref) {
     initialSort: initialSort,
     onSort: onSort,
     disableContextMenuColumn: disableContextMenuColumn,
-    enableMultiSorting: enableMultiSorting
+    enableMultiSorting: enableMultiSorting,
+    spacing: styleWithSpacing
   }), React.createElement(DataGridBody, {
     children: children,
     data: data,
     headers: internalHeaders,
     isLoading: isLoading,
     disableContextMenuColumn: disableContextMenuColumn,
-    emptyLabel: emptyLabel
+    emptyLabel: emptyLabel,
+    spacing: styleWithSpacing
   }))), paginationProps && !isLoading && React.createElement(Pagination, _extends({}, paginationProps, {
+    style: _extends({}, paginationProps.style, {
+      paddingLeft: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingLeft,
+      paddingRight: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingRight
+    }),
     className: modules_b8d590e8['pagination'] + " " + ((_paginationProps$clas = paginationProps.className) != null ? _paginationProps$clas : '')
   })));
 };