@pedidopago/ui 1.1.0 → 1.1.4

package/dist/components/Flex/types.d.ts

@@ -1,176 +1,176 @@
-import { Ref } from 'react';
-import { defaultTheme } from 'src';
-declare type flexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
-declare type flexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
-declare type flexJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
-declare type flexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
-declare type flexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
-declare type flexJustifySelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
-declare type flexAlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
-declare type flexGrow = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
-declare type flexShrink = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
-declare type flexBasis = 'auto' | 'content' | 'max-content' | 'min-content' | 'fit-content' | 'fill-available' | (string & {});
-declare type flexSpacing = 'auto' | 'inherit' | 'initial' | 'unset' | keyof typeof defaultTheme.space | (string & {});
-export declare type IFlexProps = {
-    /**
-     * The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
-     * @default 'row'
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
-     */
-    direction?: flexDirection | {
-        base?: flexDirection;
-        sm?: flexDirection;
-        md?: flexDirection;
-        lg?: flexDirection;
-        xl?: flexDirection;
-        xxl?: flexDirection;
-    };
-    /**
-     * The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
-     * @default 'stretch'
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
-     */
-    alignItems?: flexAlignItems | {
-        base?: flexAlignItems;
-        sm?: flexAlignItems;
-        md?: flexAlignItems;
-        lg?: flexAlignItems;
-        xl?: flexAlignItems;
-        xxl?: flexAlignItems;
-    };
-    /**
-     * The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
-     * @default 'stretch'
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
-     */
-    alignContent?: flexAlignContent | {
-        base?: flexAlignContent;
-        sm?: flexAlignContent;
-        md?: flexAlignContent;
-        lg?: flexAlignContent;
-        xl?: flexAlignContent;
-        xxl?: flexAlignContent;
-    };
-    /**
-     * The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.
-     * @default 'auto'
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
-     */
-    alignSelf?: flexAlignSelf | {
-        base?: flexAlignSelf;
-        sm?: flexAlignSelf;
-        md?: flexAlignSelf;
-        lg?: flexAlignSelf;
-        xl?: flexAlignSelf;
-        xxl?: flexAlignSelf;
-    };
-    /**
-     * The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
-     * @default 'stretch'
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
-     */
-    justifyContent?: flexJustifyContent | {
-        base?: flexJustifyContent;
-        sm?: flexJustifyContent;
-        md?: flexJustifyContent;
-        lg?: flexJustifyContent;
-        xl?: flexJustifyContent;
-        xxl?: flexJustifyContent;
-    };
-    /**
-     * The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
-     * @default 'auto'
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
-     */
-    justifySelf?: flexJustifySelf | {
-        base?: flexJustifySelf;
-        sm?: flexJustifySelf;
-        md?: flexJustifySelf;
-        lg?: flexJustifySelf;
-        xl?: flexJustifySelf;
-        xxl?: flexJustifySelf;
-    };
-    /**
-     * The spacing provides a gap CSS property that sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.
-     * @default '0'
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap
-     */
-    spacing?: flexSpacing | {
-        base?: flexSpacing;
-        sm?: flexSpacing;
-        md?: flexSpacing;
-        lg?: flexSpacing;
-        xl?: flexSpacing;
-        xxl?: flexSpacing;
-    };
-    /**
-     * The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
-     * @default '0'
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
-     */
-    wrap?: flexWrap | {
-        base?: flexWrap;
-        sm?: flexWrap;
-        md?: flexWrap;
-        lg?: flexWrap;
-        xl?: flexWrap;
-        xxl?: flexWrap;
-    };
-    /**
-     * The flex-grow CSS property sets the flex grow factor of a flex item's main size.
-     * @default '0'
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
-     */
-    grow?: flexGrow | {
-        base?: flexGrow;
-        sm?: flexGrow;
-        md?: flexGrow;
-        lg?: flexGrow;
-        xl?: flexGrow;
-        xxl?: flexGrow;
-    };
-    /**
-     * The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
-     * @default '0'
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
-     */
-    shrink?: flexShrink | {
-        base?: flexShrink;
-        sm?: flexShrink;
-        md?: flexShrink;
-        lg?: flexShrink;
-        xl?: flexShrink;
-        xxl?: flexShrink;
-    };
-    /**
-     * The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
-     * @default '0'
-     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
-     */
-    basis?: flexBasis | {
-        base?: flexBasis;
-        sm?: flexBasis;
-        md?: flexBasis;
-        lg?: flexBasis;
-        xl?: flexBasis;
-        xxl?: flexBasis;
-    };
-    /**
-     * The react ref prop for the flex container.
-     * @see https://reactjs.org/docs/refs-and-the-dom.html#the-ref-callback-attribute
-     */
-    ref?: Ref<any>;
-};
-export declare type IStyledFlex = IFlexProps & {
-    theme?: typeof defaultTheme;
-    flexDirection?: flexDirection | {
-        base?: flexDirection;
-        sm?: flexDirection;
-        md?: flexDirection;
-        lg?: flexDirection;
-        xl?: flexDirection;
-        xxl?: flexDirection;
-    };
-};
-export {};
+import { Ref } from 'react';
+import { defaultTheme } from 'src';
+declare type flexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+declare type flexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+declare type flexJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around';
+declare type flexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
+declare type flexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+declare type flexJustifySelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+declare type flexAlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+declare type flexGrow = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+declare type flexShrink = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+declare type flexBasis = 'auto' | 'content' | 'max-content' | 'min-content' | 'fit-content' | 'fill-available' | (string & {});
+declare type flexSpacing = 'auto' | 'inherit' | 'initial' | 'unset' | keyof typeof defaultTheme.space | (string & {});
+export declare type IFlexProps = {
+    /**
+     * The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
+     * @default 'row'
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
+     */
+    direction?: flexDirection | {
+        base?: flexDirection;
+        sm?: flexDirection;
+        md?: flexDirection;
+        lg?: flexDirection;
+        xl?: flexDirection;
+        xxl?: flexDirection;
+    };
+    /**
+     * The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
+     * @default 'stretch'
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
+     */
+    alignItems?: flexAlignItems | {
+        base?: flexAlignItems;
+        sm?: flexAlignItems;
+        md?: flexAlignItems;
+        lg?: flexAlignItems;
+        xl?: flexAlignItems;
+        xxl?: flexAlignItems;
+    };
+    /**
+     * The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.
+     * @default 'stretch'
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+     */
+    alignContent?: flexAlignContent | {
+        base?: flexAlignContent;
+        sm?: flexAlignContent;
+        md?: flexAlignContent;
+        lg?: flexAlignContent;
+        xl?: flexAlignContent;
+        xxl?: flexAlignContent;
+    };
+    /**
+     * The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.
+     * @default 'auto'
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
+     */
+    alignSelf?: flexAlignSelf | {
+        base?: flexAlignSelf;
+        sm?: flexAlignSelf;
+        md?: flexAlignSelf;
+        lg?: flexAlignSelf;
+        xl?: flexAlignSelf;
+        xxl?: flexAlignSelf;
+    };
+    /**
+     * The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
+     * @default 'stretch'
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+     */
+    justifyContent?: flexJustifyContent | {
+        base?: flexJustifyContent;
+        sm?: flexJustifyContent;
+        md?: flexJustifyContent;
+        lg?: flexJustifyContent;
+        xl?: flexJustifyContent;
+        xxl?: flexJustifyContent;
+    };
+    /**
+     * The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
+     * @default 'auto'
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
+     */
+    justifySelf?: flexJustifySelf | {
+        base?: flexJustifySelf;
+        sm?: flexJustifySelf;
+        md?: flexJustifySelf;
+        lg?: flexJustifySelf;
+        xl?: flexJustifySelf;
+        xxl?: flexJustifySelf;
+    };
+    /**
+     * The spacing provides a gap CSS property that sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.
+     * @default '0'
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/gap
+     */
+    spacing?: flexSpacing | {
+        base?: flexSpacing;
+        sm?: flexSpacing;
+        md?: flexSpacing;
+        lg?: flexSpacing;
+        xl?: flexSpacing;
+        xxl?: flexSpacing;
+    };
+    /**
+     * The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
+     * @default '0'
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
+     */
+    wrap?: flexWrap | {
+        base?: flexWrap;
+        sm?: flexWrap;
+        md?: flexWrap;
+        lg?: flexWrap;
+        xl?: flexWrap;
+        xxl?: flexWrap;
+    };
+    /**
+     * The flex-grow CSS property sets the flex grow factor of a flex item's main size.
+     * @default '0'
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
+     */
+    grow?: flexGrow | {
+        base?: flexGrow;
+        sm?: flexGrow;
+        md?: flexGrow;
+        lg?: flexGrow;
+        xl?: flexGrow;
+        xxl?: flexGrow;
+    };
+    /**
+     * The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.
+     * @default '0'
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
+     */
+    shrink?: flexShrink | {
+        base?: flexShrink;
+        sm?: flexShrink;
+        md?: flexShrink;
+        lg?: flexShrink;
+        xl?: flexShrink;
+        xxl?: flexShrink;
+    };
+    /**
+     * The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.
+     * @default '0'
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
+     */
+    basis?: flexBasis | {
+        base?: flexBasis;
+        sm?: flexBasis;
+        md?: flexBasis;
+        lg?: flexBasis;
+        xl?: flexBasis;
+        xxl?: flexBasis;
+    };
+    /**
+     * The react ref prop for the flex container.
+     * @see https://reactjs.org/docs/refs-and-the-dom.html#the-ref-callback-attribute
+     */
+    ref?: Ref<any>;
+};
+export declare type IStyledFlex = IFlexProps & {
+    theme?: typeof defaultTheme;
+    flexDirection?: flexDirection | {
+        base?: flexDirection;
+        sm?: flexDirection;
+        md?: flexDirection;
+        lg?: flexDirection;
+        xl?: flexDirection;
+        xxl?: flexDirection;
+    };
+};
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Grid/grid.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom';
 //# sourceMappingURL=grid.test.d.ts.map

package/dist/components/Grid/grid.test.js

@@ -8,68 +8,72 @@ require("@testing-library/jest-dom");
 
 var _ = _interopRequireDefault(require("."));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('Grid', function () {
   it('should render the grid container', function () {
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       container: true,
       "data-testid": "grid-container"
     }));
     expect(_react.screen.getByTestId('grid-container')).toBeInTheDocument();
   });
   it('should render grid container with item element', function () {
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
       container: true,
-      "data-testid": "grid-container"
-    }, /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item"
-    })));
+      "data-testid": "grid-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item"
+      })
+    }));
     expect(_react.screen.getByTestId('grid-item')).toBeInTheDocument();
   });
   it('should render grid container with multiple items', function () {
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
       container: true,
       templateColumns: "repeat(12, 1fr)",
-      "data-testid": "grid-container"
-    }, /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item-1"
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item-2"
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item-3"
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item-4"
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item-5"
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item-6"
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item-7"
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item-8"
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item-9"
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item-10"
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item-11"
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      "data-testid": "grid-item-12"
-    })));
+      "data-testid": "grid-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-3"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-4"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-5"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-6"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-7"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-8"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-9"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-10"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-11"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        "data-testid": "grid-item-12"
+      })]
+    }));
     expect(_react.screen.getByTestId('grid-item-1')).toBeInTheDocument();
     expect(_react.screen.getByTestId('grid-item-2')).toBeInTheDocument();
     expect(_react.screen.getByTestId('grid-item-3')).toBeInTheDocument();
@@ -84,7 +88,7 @@ describe('Grid', function () {
     expect(_react.screen.getByTestId('grid-item-12')).toBeInTheDocument();
   });
   it('should render grid container with multiply elements of different sizes', function () {
-    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, {
+    (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.default, {
       container: true,
       gridGap: 6,
       "data-testid": "grid-container",
@@ -92,40 +96,41 @@ describe('Grid', function () {
       templateRows: "repeat(2, 1fr)",
       style: {
         height: '200px'
-      }
-    }, /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      rowSpan: 2,
-      colSpan: 2,
-      "data-testid": "grid-item-xs-2",
-      style: {
-        background: '#000'
-      }
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      rowSpan: 2,
-      colSpan: 4,
-      "data-testid": "grid-item-xs-4",
-      style: {
-        background: '#000'
-      }
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      rowSpan: 2,
-      colSpan: 6,
-      "data-testid": "grid-item-xs-6",
-      style: {
-        background: '#000'
-      }
-    }), /*#__PURE__*/React.createElement(_.default, {
-      item: true,
-      rowSpan: 2,
-      colSpan: 10,
-      "data-testid": "grid-item-xs-10",
-      style: {
-        background: '#000'
-      }
-    })));
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        rowSpan: 2,
+        colSpan: 2,
+        "data-testid": "grid-item-xs-2",
+        style: {
+          background: '#000'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        rowSpan: 2,
+        colSpan: 4,
+        "data-testid": "grid-item-xs-4",
+        style: {
+          background: '#000'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        rowSpan: 2,
+        colSpan: 6,
+        "data-testid": "grid-item-xs-6",
+        style: {
+          background: '#000'
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+        item: true,
+        rowSpan: 2,
+        colSpan: 10,
+        "data-testid": "grid-item-xs-10",
+        style: {
+          background: '#000'
+        }
+      })]
+    }));
     expect(_react.screen.getByTestId('grid-container')).toBeInTheDocument();
     expect(_react.screen.getByTestId('grid-item-xs-2')).toBeInTheDocument();
     expect(_react.screen.getByTestId('grid-item-xs-4')).toBeInTheDocument();

package/dist/components/Grid/index.d.ts

@@ -1,5 +1,5 @@
-import { FC, HTMLAttributes } from 'react';
-import { IGridProps } from './types';
-declare const Grid: FC<HTMLAttributes<HTMLDivElement> & IGridProps>;
-export default Grid;
+import { FC, HTMLAttributes } from 'react';
+import { IGridProps } from './types';
+declare const Grid: FC<HTMLAttributes<HTMLDivElement> & IGridProps>;
+export default Grid;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Grid/index.js

@@ -7,9 +7,15 @@ exports.default = void 0;
 
 var _styles = require("./styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _excluded = ["container", "item", "gridGap", "templateAreas", "templateColumns", "templateRows", "colSpan", "colEnd", "colStart", "rowEnd", "rowStart", "rowSpan", "children"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -31,7 +37,7 @@ var Grid = function Grid(_ref) {
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(_styles.GridComponent, _extends({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GridComponent, _objectSpread(_objectSpread({
     container: container,
     item: item,
     gridGap: gridGap,
@@ -44,7 +50,9 @@ var Grid = function Grid(_ref) {
     rowEnd: rowEnd,
     rowStart: rowStart,
     rowSpan: rowSpan
-  }, rest), children);
+  }, rest), {}, {
+    children: children
+  }));
 };
 
 var _default = Grid;