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

package/dist/DataGrid/DataGrid.d.ts

@@ -2,6 +2,7 @@ import React, { ComponentPropsWithRef, ReactElement, Ref } from 'react';
 import { Props as ButtonProps } from '../Button/Button';
 import { HeaderCell, OnSortFunction, Sort } from './datagrid.interfaces';
 import { Props as PaginationProps } from '../Pagination/Pagination';
+import { Spacing } from '../hooks/useSpacing';
 export interface Props<T> extends ComponentPropsWithRef<'div'> {
     children: ({ item, index }: {
         item: T;
@@ -24,6 +25,7 @@ export interface Props<T> extends ComponentPropsWithRef<'div'> {
     disableContextMenuColumn?: boolean;
     isLoading?: boolean;
     enableMultiSorting?: boolean;
+    spacing?: Spacing;
 }
 export declare const DataGrid: <T extends {}>(p: Props<T> & {
     ref?: React.Ref<HTMLDivElement> | undefined;

package/dist/DataGrid/DataGridBody/DataGridBody.d.ts

@@ -10,6 +10,7 @@ export interface Props<T> extends ComponentPropsWithRef<'tbody'> {
     isLoading?: boolean;
     disableContextMenuColumn?: boolean;
     emptyLabel?: string;
+    spacing?: React.CSSProperties;
 }
 export declare const DataGridBody: <T extends {}>(p: Props<T> & {
     ref?: React.Ref<HTMLTableSectionElement> | undefined;

package/dist/DataGrid/DataGridBody/DataGridCell.d.ts

@@ -2,5 +2,9 @@ import React, { ComponentPropsWithRef, ReactChild } from 'react';
 export interface Props extends ComponentPropsWithRef<'td'> {
     children?: ReactChild;
     isLoading?: boolean;
+    spacing?: React.CSSProperties;
+    cellIndex?: number;
+    columnLength?: number;
+    disableContextMenuColumn?: boolean;
 }
-export declare const DataGridCell: React.ForwardRefExoticComponent<Pick<Props, "abbr" | "slot" | "style" | "title" | "key" | "align" | "colSpan" | "headers" | "rowSpan" | "scope" | "height" | "width" | "valign" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isLoading"> & React.RefAttributes<HTMLTableCellElement>>;
+export declare const DataGridCell: React.ForwardRefExoticComponent<Pick<Props, "abbr" | "slot" | "style" | "title" | "key" | "align" | "colSpan" | "headers" | "rowSpan" | "scope" | "height" | "width" | "valign" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isLoading" | "spacing" | "cellIndex" | "columnLength" | "disableContextMenuColumn"> & React.RefAttributes<HTMLTableCellElement>>;

package/dist/DataGrid/DataGridBody/DataGridRow.d.ts

@@ -3,5 +3,7 @@ import { HeaderCell } from '../datagrid.interfaces';
 export interface Props extends ComponentPropsWithRef<'tr'> {
     headers?: HeaderCell[];
     isLoading?: boolean;
+    spacing?: React.CSSProperties;
+    disableContextMenuColumn?: boolean;
 }
-export declare const DataGridRow: React.ForwardRefExoticComponent<Pick<Props, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "headers" | "isLoading"> & React.RefAttributes<HTMLTableRowElement>>;
+export declare const DataGridRow: React.ForwardRefExoticComponent<Pick<Props, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "headers" | "isLoading" | "spacing" | "disableContextMenuColumn"> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/DataGrid/DataGridHeader/DataGridHeader.d.ts

@@ -6,5 +6,6 @@ export interface Props extends ComponentPropsWithRef<'thead'> {
     onSort?: OnSortFunction;
     disableContextMenuColumn?: boolean;
     enableMultiSorting?: boolean;
+    spacing?: React.CSSProperties;
 }
-export declare const DataGridHeader: React.ForwardRefExoticComponent<Pick<Props, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "headers" | "initialSort" | "onSort" | "disableContextMenuColumn" | "enableMultiSorting"> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const DataGridHeader: React.ForwardRefExoticComponent<Pick<Props, "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "headers" | "initialSort" | "onSort" | "disableContextMenuColumn" | "enableMultiSorting" | "spacing"> & React.RefAttributes<HTMLTableSectionElement>>;

package/dist/hooks/useSpacing.d.ts

@@ -14,5 +14,5 @@ export interface Spacing {
     marginLeft?: SpacingMultiplierStringOrNumber;
     marginRight?: SpacingMultiplierStringOrNumber;
 }
-export declare const useSpacing: (spacingProps?: Spacing | undefined, style?: CSSProperties | undefined) => CSSProperties | undefined;
+export declare const useSpacing: (spacingProps?: Spacing, style?: CSSProperties) => CSSProperties | undefined;
 export {};

package/dist/hooks/useWrapper.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Type as InputTypes } from '../Form/Input/Input';
-export declare const useWrapper: (value?: string | undefined, placeholder?: string | undefined, type?: InputTypes | undefined) => {
+export declare const useWrapper: (value?: string, placeholder?: string, type?: InputTypes) => {
     helperId: string;
     errorId: string;
     labelId: string;

package/dist/react-lib-components.cjs.development.js

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 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];
 
@@ -23,7 +23,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -1596,8 +1595,8 @@ var Tooltip = /*#__PURE__*/React__default["default"].forwardRef(function (_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}";
@@ -3548,8 +3547,8 @@ var FormGroup = /*#__PURE__*/React__default["default"].forwardRef(function (_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"];
@@ -4392,8 +4391,8 @@ var WizardSteps = /*#__PURE__*/React__default["default"].forwardRef(function (_r
   }));
 });
 
-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}";
@@ -4454,7 +4453,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__default["default"].forwardRef(function (_ref, ref) {
   var initialSort = _ref.initialSort,
@@ -4462,6 +4461,7 @@ var DataGridHeader = /*#__PURE__*/React__default["default"].forwardRef(function
       headers = _ref.headers,
       disableContextMenuColumn = _ref.disableContextMenuColumn,
       enableMultiSorting = _ref.enableMultiSorting,
+      spacing = _ref.spacing,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   var _useState = React.useState(initialSort || []),
@@ -4504,11 +4504,21 @@ var DataGridHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     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;
     });
@@ -4518,7 +4528,8 @@ var DataGridHeader = /*#__PURE__*/React__default["default"].forwardRef(function
       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__default["default"].createElement("thead", _extends({}, rest, {
@@ -4527,13 +4538,16 @@ var DataGridHeader = /*#__PURE__*/React__default["default"].forwardRef(function
   }), React__default["default"].createElement("tr", {
     className: modules_bec66042['row']
   }, headerCells, !disableContextMenuColumn && React__default["default"].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}";
@@ -4696,15 +4710,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__default["default"].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__default["default"].createElement("td", _extends({}, rest, {
     ref: ref,
+    style: _extends({}, rest.style, cellStyle),
     className: modules_e636700c['cell'] + " " + (className != null ? className : '')
   }), isLoading && React__default["default"].createElement("div", {
     className: modules_e636700c['loading'],
@@ -4720,17 +4749,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__default["default"].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__default["default"].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__default["default"].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);
@@ -4745,7 +4786,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) {
@@ -4755,6 +4796,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() {
@@ -4795,7 +4837,9 @@ var DataGridBodyInner = function DataGridBodyInner(_ref, ref) {
         item: item,
         index: index
       }), {
-        headers: headers
+        headers: headers,
+        spacing: spacing,
+        disableContextMenuColumn: disableContextMenuColumn
       });
     });
   };
@@ -4807,7 +4851,7 @@ var DataGridBodyInner = function DataGridBodyInner(_ref, ref) {
 
 var DataGridBody = /*#__PURE__*/React__default["default"].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;
@@ -4824,6 +4868,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) {
@@ -4838,6 +4884,7 @@ var DataGridInner = function DataGridInner(_ref, ref) {
       internalHeaders = _useState[0],
       setInternalHeaders = _useState[1];
 
+  var styleWithSpacing = useSpacing(spacing, style);
   React.useEffect(function () {
     return setInternalHeaders(headers);
   }, [headers]);
@@ -4850,9 +4897,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__default["default"].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__default["default"].createElement(DataGridActions, _extends({}, actions, {
+    style: {
+      paddingLeft: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingLeft,
+      paddingRight: styleWithSpacing == null ? void 0 : styleWithSpacing.paddingRight
+    },
     headers: internalHeaders,
     onColumnToggled: onColumnToggled
   })), React__default["default"].createElement("div", {
@@ -4864,15 +4948,21 @@ var DataGridInner = function DataGridInner(_ref, ref) {
     initialSort: initialSort,
     onSort: onSort,
     disableContextMenuColumn: disableContextMenuColumn,
-    enableMultiSorting: enableMultiSorting
+    enableMultiSorting: enableMultiSorting,
+    spacing: styleWithSpacing
   }), React__default["default"].createElement(DataGridBody, {
     children: children,
     data: data,
     headers: internalHeaders,
     isLoading: isLoading,
     disableContextMenuColumn: disableContextMenuColumn,
-    emptyLabel: emptyLabel
+    emptyLabel: emptyLabel,
+    spacing: styleWithSpacing
   }))), paginationProps && !isLoading && React__default["default"].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 : '')
   })));
 };