@mui/system 6.1.2 → 6.1.4

package/Grid/createGrid.js

@@ -1,32 +1,40 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import isMuiElement from '@mui/utils/isMuiElement';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import composeClasses from '@mui/utils/composeClasses';
-import systemStyled from "../styled/index.js";
-import useThemePropsSystem from "../useThemeProps/index.js";
-import useTheme from "../useTheme/index.js";
-import { extendSxProp } from "../styleFunctionSx/index.js";
-import createTheme from "../createTheme/index.js";
-import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from "./gridGenerator.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const defaultTheme = createTheme();
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createGrid;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _isMuiElement = _interopRequireDefault(require("@mui/utils/isMuiElement"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _styled = _interopRequireDefault(require("../styled"));
+var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
+var _styleFunctionSx = require("../styleFunctionSx");
+var _createTheme = _interopRequireDefault(require("../createTheme"));
+var _gridGenerator = require("./gridGenerator");
+var _jsxRuntime = require("react/jsx-runtime");
+const defaultTheme = (0, _createTheme.default)();
 
 // widening Theme to any so that the consumer can own the theme structure.
-const defaultCreateStyledComponent = systemStyled('div', {
+const defaultCreateStyledComponent = (0, _styled.default)('div', {
   name: 'MuiGrid',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 });
 function useThemePropsDefault(props) {
-  return useThemePropsSystem({
+  return (0, _useThemeProps.default)({
     props,
     name: 'MuiGrid',
     defaultTheme
   });
 }
-export default function createGrid(options = {}) {
+function createGrid(options = {}) {
   const {
     // This will allow adding custom styled fn (for example for custom sx style function)
     createStyledComponent = defaultCreateStyledComponent,
@@ -42,9 +50,9 @@ export default function createGrid(options = {}) {
       size
     } = ownerState;
     const slots = {
-      root: ['root', container && 'container', wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...generateDirectionClasses(direction), ...generateSizeClassNames(size), ...(container ? generateSpacingClassNames(spacing, theme.breakpoints.keys[0]) : [])]
+      root: ['root', container && 'container', wrap !== 'wrap' && `wrap-xs-${String(wrap)}`, ...(0, _gridGenerator.generateDirectionClasses)(direction), ...(0, _gridGenerator.generateSizeClassNames)(size), ...(container ? (0, _gridGenerator.generateSpacingClassNames)(spacing, theme.breakpoints.keys[0]) : [])]
     };
-    return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
+    return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)(componentName, slot), {});
   };
   function parseResponsiveProp(propValue, breakpoints, shouldUseValue = () => true) {
     const parsedProp = {};
@@ -69,11 +77,11 @@ export default function createGrid(options = {}) {
     }
     return parsedProp;
   }
-  const GridRoot = createStyledComponent(generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridSizeStyles, generateGridDirectionStyles, generateGridStyles, generateGridOffsetStyles);
+  const GridRoot = createStyledComponent(_gridGenerator.generateGridColumnsStyles, _gridGenerator.generateGridColumnSpacingStyles, _gridGenerator.generateGridRowSpacingStyles, _gridGenerator.generateGridSizeStyles, _gridGenerator.generateGridDirectionStyles, _gridGenerator.generateGridStyles, _gridGenerator.generateGridOffsetStyles);
   const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
-    const theme = useTheme();
+    const theme = (0, _useTheme.default)();
     const themeProps = useThemeProps(inProps);
-    const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+    const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
     const {
       className,
       children,
@@ -110,14 +118,14 @@ export default function createGrid(options = {}) {
       offset
     };
     const classes = useUtilityClasses(ownerState, theme);
-    return /*#__PURE__*/_jsx(GridRoot, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRoot, {
       ref: ref,
       as: component,
       ownerState: ownerState,
-      className: clsx(classes.root, className),
+      className: (0, _clsx.default)(classes.root, className),
       ...other,
       children: React.Children.map(children, child => {
-        if (/*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
+        if (/*#__PURE__*/React.isValidElement(child) && (0, _isMuiElement.default)(child, ['Grid']) && container && child.props.container) {
           return /*#__PURE__*/React.cloneElement(child, {
             unstable_level: child.props?.unstable_level ?? level + 1
           });
@@ -127,19 +135,19 @@ export default function createGrid(options = {}) {
     });
   });
   process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-    columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
-    columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
-    component: PropTypes.elementType,
-    container: PropTypes.bool,
-    direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
-    offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.object]),
-    rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
-    size: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])), PropTypes.object]),
-    spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
-    sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-    wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
+    children: _propTypes.default.node,
+    className: _propTypes.default.string,
+    columns: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.number), _propTypes.default.number, _propTypes.default.object]),
+    columnSpacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
+    component: _propTypes.default.elementType,
+    container: _propTypes.default.bool,
+    direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
+    offset: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])), _propTypes.default.object]),
+    rowSpacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
+    size: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.number, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool, _propTypes.default.number])), _propTypes.default.object]),
+    spacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
+    sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+    wrap: _propTypes.default.oneOf(['nowrap', 'wrap-reverse', 'wrap'])
   } : void 0;
 
   // @ts-ignore internal logic for nested grid

package/Grid/gridClasses.js

@@ -1,13 +1,21 @@
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-export function getGridUtilityClass(slot) {
-  return generateUtilityClass('MuiGrid', slot);
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.getGridUtilityClass = getGridUtilityClass;
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+function getGridUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiGrid', slot);
 }
 const SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 const DIRECTIONS = ['column-reverse', 'column', 'row-reverse', 'row'];
 const WRAPS = ['nowrap', 'wrap-reverse', 'wrap'];
 const GRID_SIZES = ['auto', 'grow', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
-const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'item',
+const gridClasses = (0, _generateUtilityClasses.default)('MuiGrid', ['root', 'container', 'item',
 // spacings
 ...SPACINGS.map(spacing => `spacing-xs-${spacing}`),
 // direction values
@@ -16,4 +24,4 @@ const gridClasses = generateUtilityClasses('MuiGrid', ['root', 'container', 'ite
 ...WRAPS.map(wrap => `wrap-xs-${wrap}`),
 // grid sizes for all breakpoints
 ...GRID_SIZES.map(size => `grid-xs-${size}`), ...GRID_SIZES.map(size => `grid-sm-${size}`), ...GRID_SIZES.map(size => `grid-md-${size}`), ...GRID_SIZES.map(size => `grid-lg-${size}`), ...GRID_SIZES.map(size => `grid-xl-${size}`)]);
-export default gridClasses;
+var _default = exports.default = gridClasses;

package/Grid/gridGenerator.d.ts

@@ -11,13 +11,9 @@ interface Props {
 }
 export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
 export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
-export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => Record<string, string | number | undefined>;
-export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {
-    [x: string]: string;
-};
-export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {
-    [x: string]: string;
-};
+export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {};
+export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {};
 export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
 export declare const generateGridStyles: ({ ownerState }: Props) => {};
 export declare const generateSizeClassNames: (size: GridOwnerState["size"]) => string[];

package/Grid/gridGenerator.js

@@ -1,39 +1,24 @@
-import { traverseBreakpoints } from "./traverseBreakpoints.js";
-function appendLevel(level) {
-  if (!level) {
-    return '';
-  }
-  return `Level${level}`;
-}
-function isNestedContainer(ownerState) {
-  return ownerState.unstable_level > 0 && ownerState.container;
-}
-function createGetSelfSpacing(ownerState) {
-  return function getSelfSpacing(axis) {
-    return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level)})`;
-  };
-}
-function createGetParentSpacing(ownerState) {
-  return function getParentSpacing(axis) {
-    if (ownerState.unstable_level === 0) {
-      return `var(--Grid-${axis}Spacing)`;
-    }
-    return `var(--Grid-${axis}Spacing${appendLevel(ownerState.unstable_level - 1)})`;
-  };
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateSpacingClassNames = exports.generateSizeClassNames = exports.generateGridStyles = exports.generateGridSizeStyles = exports.generateGridRowSpacingStyles = exports.generateGridOffsetStyles = exports.generateGridDirectionStyles = exports.generateGridColumnsStyles = exports.generateGridColumnSpacingStyles = exports.generateDirectionClasses = void 0;
+var _traverseBreakpoints = require("./traverseBreakpoints");
+function getSelfSpacingVar(axis) {
+  return `--Grid-${axis}Spacing`;
 }
-function getParentColumns(ownerState) {
-  if (ownerState.unstable_level === 0) {
-    return `var(--Grid-columns)`;
-  }
-  return `var(--Grid-columns${appendLevel(ownerState.unstable_level - 1)})`;
+function getParentSpacingVar(axis) {
+  return `--Grid-parent-${axis}Spacing`;
 }
-export const generateGridSizeStyles = ({
+const selfColumnsVar = '--Grid-columns';
+const parentColumnsVar = '--Grid-parent-columns';
+const generateGridSizeStyles = ({
   theme,
   ownerState
 }) => {
-  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
-  traverseBreakpoints(theme.breakpoints, ownerState.size, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.size, (appendStyle, value) => {
     let style = {};
     if (value === 'grow') {
       style = {
@@ -55,20 +40,20 @@ export const generateGridSizeStyles = ({
       style = {
         flexGrow: 0,
         flexBasis: 'auto',
-        width: `calc(100% * ${value} / ${getParentColumns(ownerState)} - (${getParentColumns(ownerState)} - ${value}) * (${getParentSpacing('column')} / ${getParentColumns(ownerState)}))`
+        width: `calc(100% * ${value} / var(${parentColumnsVar}) - (var(${parentColumnsVar}) - ${value}) * (var(${getParentSpacingVar('column')}) / var(${parentColumnsVar})))`
       };
     }
     appendStyle(styles, style);
   });
   return styles;
 };
-export const generateGridOffsetStyles = ({
+exports.generateGridSizeStyles = generateGridSizeStyles;
+const generateGridOffsetStyles = ({
   theme,
   ownerState
 }) => {
-  const getParentSpacing = createGetParentSpacing(ownerState);
   const styles = {};
-  traverseBreakpoints(theme.breakpoints, ownerState.offset, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.offset, (appendStyle, value) => {
     let style = {};
     if (value === 'auto') {
       style = {
@@ -77,73 +62,77 @@ export const generateGridOffsetStyles = ({
     }
     if (typeof value === 'number') {
       style = {
-        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / ${getParentColumns(ownerState)} + ${getParentSpacing('column')} * ${value} / ${getParentColumns(ownerState)})`
+        marginLeft: value === 0 ? '0px' : `calc(100% * ${value} / var(${parentColumnsVar}) + var(${getParentSpacingVar('column')}) * ${value} / var(${parentColumnsVar}))`
       };
     }
     appendStyle(styles, style);
   });
   return styles;
 };
-export const generateGridColumnsStyles = ({
+exports.generateGridOffsetStyles = generateGridOffsetStyles;
+const generateGridColumnsStyles = ({
   theme,
   ownerState
 }) => {
   if (!ownerState.container) {
     return {};
   }
-  const styles = isNestedContainer(ownerState) ? {
-    [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: getParentColumns(ownerState)
-  } : {
-    '--Grid-columns': 12
+  const styles = {
+    [selfColumnsVar]: 12
   };
-  traverseBreakpoints(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columns, (appendStyle, value) => {
+    const columns = value ?? 12;
     appendStyle(styles, {
-      [`--Grid-columns${appendLevel(ownerState.unstable_level)}`]: value
+      [selfColumnsVar]: columns,
+      '> *': {
+        [parentColumnsVar]: columns
+      }
     });
   });
   return styles;
 };
-export const generateGridRowSpacingStyles = ({
+exports.generateGridColumnsStyles = generateGridColumnsStyles;
+const generateGridRowSpacingStyles = ({
   theme,
   ownerState
 }) => {
   if (!ownerState.container) {
     return {};
   }
-  const getParentSpacing = createGetParentSpacing(ownerState);
-  const styles = isNestedContainer(ownerState) ? {
-    // Set the default spacing as its parent spacing.
-    // It will be overridden if spacing props are provided
-    [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('row')
-  } : {};
-  traverseBreakpoints(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
+  const styles = {};
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.rowSpacing, (appendStyle, value) => {
+    const spacing = typeof value === 'string' ? value : theme.spacing?.(value);
     appendStyle(styles, {
-      [`--Grid-rowSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
+      [getSelfSpacingVar('row')]: spacing,
+      '> *': {
+        [getParentSpacingVar('row')]: spacing
+      }
     });
   });
   return styles;
 };
-export const generateGridColumnSpacingStyles = ({
+exports.generateGridRowSpacingStyles = generateGridRowSpacingStyles;
+const generateGridColumnSpacingStyles = ({
   theme,
   ownerState
 }) => {
   if (!ownerState.container) {
     return {};
   }
-  const getParentSpacing = createGetParentSpacing(ownerState);
-  const styles = isNestedContainer(ownerState) ? {
-    // Set the default spacing as its parent spacing.
-    // It will be overridden if spacing props are provided
-    [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: getParentSpacing('column')
-  } : {};
-  traverseBreakpoints(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
+  const styles = {};
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.columnSpacing, (appendStyle, value) => {
+    const spacing = typeof value === 'string' ? value : theme.spacing?.(value);
     appendStyle(styles, {
-      [`--Grid-columnSpacing${appendLevel(ownerState.unstable_level)}`]: typeof value === 'string' ? value : theme.spacing?.(value)
+      [getSelfSpacingVar('column')]: spacing,
+      '> *': {
+        [getParentSpacingVar('column')]: spacing
+      }
     });
   });
   return styles;
 };
-export const generateGridDirectionStyles = ({
+exports.generateGridColumnSpacingStyles = generateGridColumnSpacingStyles;
+const generateGridDirectionStyles = ({
   theme,
   ownerState
 }) => {
@@ -151,17 +140,17 @@ export const generateGridDirectionStyles = ({
     return {};
   }
   const styles = {};
-  traverseBreakpoints(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
+  (0, _traverseBreakpoints.traverseBreakpoints)(theme.breakpoints, ownerState.direction, (appendStyle, value) => {
     appendStyle(styles, {
       flexDirection: value
     });
   });
   return styles;
 };
-export const generateGridStyles = ({
+exports.generateGridDirectionStyles = generateGridDirectionStyles;
+const generateGridStyles = ({
   ownerState
 }) => {
-  const getSelfSpacing = createGetSelfSpacing(ownerState);
   return {
     minWidth: 0,
     boxSizing: 'border-box',
@@ -171,11 +160,12 @@ export const generateGridStyles = ({
       ...(ownerState.wrap && ownerState.wrap !== 'wrap' && {
         flexWrap: ownerState.wrap
       }),
-      gap: `${getSelfSpacing('row')} ${getSelfSpacing('column')}`
+      gap: `var(${getSelfSpacingVar('row')}) var(${getSelfSpacingVar('column')})`
     })
   };
 };
-export const generateSizeClassNames = size => {
+exports.generateGridStyles = generateGridStyles;
+const generateSizeClassNames = size => {
   const classNames = [];
   Object.entries(size).forEach(([key, value]) => {
     if (value !== false && value !== undefined) {
@@ -184,7 +174,8 @@ export const generateSizeClassNames = size => {
   });
   return classNames;
 };
-export const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
+exports.generateSizeClassNames = generateSizeClassNames;
+const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') => {
   function isValidSpacing(val) {
     if (val === undefined) {
       return false;
@@ -205,7 +196,8 @@ export const generateSpacingClassNames = (spacing, smallestBreakpoint = 'xs') =>
   }
   return [];
 };
-export const generateDirectionClasses = direction => {
+exports.generateSpacingClassNames = generateSpacingClassNames;
+const generateDirectionClasses = direction => {
   if (direction === undefined) {
     return [];
   }
@@ -213,4 +205,5 @@ export const generateDirectionClasses = direction => {
     return Object.entries(direction).map(([key, value]) => `direction-${key}-${value}`);
   }
   return [`direction-xs-${String(direction)}`];
-};
+};
+exports.generateDirectionClasses = generateDirectionClasses;

package/Grid/index.js

@@ -1,6 +1,63 @@
-export { default } from "./Grid.js";
-export { default as createGrid } from "./createGrid.js";
-export * from "./GridProps.js";
-export { default as gridClasses } from "./gridClasses.js";
-export * from "./gridClasses.js";
-export { traverseBreakpoints as unstable_traverseBreakpoints } from "./traverseBreakpoints.js";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  createGrid: true,
+  gridClasses: true,
+  unstable_traverseBreakpoints: true
+};
+Object.defineProperty(exports, "createGrid", {
+  enumerable: true,
+  get: function () {
+    return _createGrid.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Grid.default;
+  }
+});
+Object.defineProperty(exports, "gridClasses", {
+  enumerable: true,
+  get: function () {
+    return _gridClasses.default;
+  }
+});
+Object.defineProperty(exports, "unstable_traverseBreakpoints", {
+  enumerable: true,
+  get: function () {
+    return _traverseBreakpoints.traverseBreakpoints;
+  }
+});
+var _Grid = _interopRequireDefault(require("./Grid"));
+var _createGrid = _interopRequireDefault(require("./createGrid"));
+var _GridProps = require("./GridProps");
+Object.keys(_GridProps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridProps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridProps[key];
+    }
+  });
+});
+var _gridClasses = _interopRequireWildcard(require("./gridClasses"));
+Object.keys(_gridClasses).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _gridClasses[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridClasses[key];
+    }
+  });
+});
+var _traverseBreakpoints = require("./traverseBreakpoints");

package/Grid/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Grid/index.js",
+  "module": "../esm/Grid/index.js",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Grid/traverseBreakpoints.js

@@ -1,5 +1,12 @@
-export const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
-export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.traverseBreakpoints = exports.filterBreakpointKeys = void 0;
+const filterBreakpointKeys = (breakpointsKeys, responsiveKeys) => breakpointsKeys.filter(key => responsiveKeys.includes(key));
+exports.filterBreakpointKeys = filterBreakpointKeys;
+const traverseBreakpoints = (breakpoints, responsive, iterator) => {
   const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`.
 
   if (Array.isArray(responsive)) {
@@ -39,4 +46,5 @@ export const traverseBreakpoints = (breakpoints, responsive, iterator) => {
       Object.assign(responsiveStyles, style);
     }, responsive);
   }
-};
+};
+exports.traverseBreakpoints = traverseBreakpoints;

package/InitColorSchemeScript/InitColorSchemeScript.js

@@ -1,12 +1,21 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
+exports.default = InitColorSchemeScript;
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Split this component for RSC import
  */
-import * as React from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const DEFAULT_MODE_STORAGE_KEY = 'mode';
-export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
-export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
-export default function InitColorSchemeScript(options) {
+
+const DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_MODE_STORAGE_KEY = 'mode';
+const DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
+const DEFAULT_ATTRIBUTE = exports.DEFAULT_ATTRIBUTE = 'data-color-scheme';
+function InitColorSchemeScript(options) {
   const {
     defaultLightColorScheme = 'light',
     defaultDarkColorScheme = 'dark',
@@ -41,7 +50,7 @@ export default function InitColorSchemeScript(options) {
   } else {
     setter += `${colorSchemeNode}.setAttribute('${attribute}', colorScheme);`;
   }
-  return /*#__PURE__*/_jsx("script", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
     suppressHydrationWarning: true,
     nonce: typeof window === 'undefined' ? nonce : ''
     // eslint-disable-next-line react/no-danger

package/InitColorSchemeScript/index.js

@@ -1 +1,13 @@
-export { default } from "./InitColorSchemeScript.js";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _InitColorSchemeScript.default;
+  }
+});
+var _InitColorSchemeScript = _interopRequireDefault(require("./InitColorSchemeScript"));

package/InitColorSchemeScript/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/InitColorSchemeScript/index.js",
+  "module": "../esm/InitColorSchemeScript/index.js",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/RtlProvider/index.js

@@ -1,22 +1,31 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { jsx as _jsx } from "react/jsx-runtime";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRtl = exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
 const RtlContext = /*#__PURE__*/React.createContext();
 function RtlProvider({
   value,
   ...props
 }) {
-  return /*#__PURE__*/_jsx(RtlContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RtlContext.Provider, {
     value: value ?? true,
     ...props
   });
 }
 process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
-  children: PropTypes.node,
-  value: PropTypes.bool
+  children: _propTypes.default.node,
+  value: _propTypes.default.bool
 } : void 0;
-export const useRtl = () => {
+const useRtl = () => {
   const value = React.useContext(RtlContext);
   return value ?? false;
 };
-export default RtlProvider;
+exports.useRtl = useRtl;
+var _default = exports.default = RtlProvider;