@mui/system 6.1.2 → 6.1.3

package/{node → esm}/colorManipulator/colorManipulator.js

@@ -1,30 +1,6 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.alpha = alpha;
-exports.blend = blend;
-exports.colorChannel = void 0;
-exports.darken = darken;
-exports.decomposeColor = decomposeColor;
-exports.emphasize = emphasize;
-exports.getContrastRatio = getContrastRatio;
-exports.getLuminance = getLuminance;
-exports.hexToRgb = hexToRgb;
-exports.hslToRgb = hslToRgb;
-exports.lighten = lighten;
-exports.private_safeAlpha = private_safeAlpha;
-exports.private_safeColorChannel = void 0;
-exports.private_safeDarken = private_safeDarken;
-exports.private_safeEmphasize = private_safeEmphasize;
-exports.private_safeLighten = private_safeLighten;
-exports.recomposeColor = recomposeColor;
-exports.rgbToHex = rgbToHex;
-var _formatMuiErrorMessage2 = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
-var _clamp = _interopRequireDefault(require("@mui/utils/clamp"));
+import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
 /* eslint-disable @typescript-eslint/naming-convention */
+import clamp from '@mui/utils/clamp';
 
 /**
  * Returns a number whose value is limited to the given range.
@@ -39,7 +15,7 @@ function clampWrapper(value, min = 0, max = 1) {
       console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`);
     }
   }
-  return (0, _clamp.default)(value, min, max);
+  return clamp(value, min, max);
 }
 
 /**
@@ -47,7 +23,7 @@ function clampWrapper(value, min = 0, max = 1) {
  * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
  * @returns {string} A CSS rgb color string
  */
-function hexToRgb(color) {
+export function hexToRgb(color) {
   color = color.slice(1);
   const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
   let colors = color.match(re);
@@ -70,7 +46,7 @@ function intToHex(int) {
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {object} - A MUI color object: {type: string, values: number[]}
  */
-function decomposeColor(color) {
+export function decomposeColor(color) {
   // Idempotent
   if (color.type) {
     return color;
@@ -81,8 +57,7 @@ function decomposeColor(color) {
   const marker = color.indexOf('(');
   const type = color.substring(0, marker);
   if (!['rgb', 'rgba', 'hsl', 'hsla', 'color'].includes(type)) {
-    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.
-The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().` : (0, _formatMuiErrorMessage2.default)(9, color));
+    throw new Error(process.env.NODE_ENV !== "production" ? `MUI: Unsupported \`${color}\` color.\n` + 'The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color().' : _formatMuiErrorMessage(9, color));
   }
   let values = color.substring(marker + 1, color.length - 1);
   let colorSpace;
@@ -93,8 +68,7 @@ The following formats are supported: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
       values[3] = values[3].slice(1);
     }
     if (!['srgb', 'display-p3', 'a98-rgb', 'prophoto-rgb', 'rec-2020'].includes(colorSpace)) {
-      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.
-The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.` : (0, _formatMuiErrorMessage2.default)(10, colorSpace));
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: unsupported \`${colorSpace}\` color space.\n` + 'The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rgb, rec-2020.' : _formatMuiErrorMessage(10, colorSpace));
     }
   } else {
     values = values.split(',');
@@ -113,12 +87,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {string} - The channel for the color, that can be used in rgba or hsla colors
  */
-const colorChannel = color => {
+export const colorChannel = color => {
   const decomposedColor = decomposeColor(color);
   return decomposedColor.values.slice(0, 3).map((val, idx) => decomposedColor.type.includes('hsl') && idx !== 0 ? `${val}%` : val).join(' ');
 };
-exports.colorChannel = colorChannel;
-const private_safeColorChannel = (color, warning) => {
+export const private_safeColorChannel = (color, warning) => {
   try {
     return colorChannel(color);
   } catch (error) {
@@ -136,8 +109,7 @@ const private_safeColorChannel = (color, warning) => {
  * @param {array} color.values - [n,n,n] or [n,n,n,n]
  * @returns {string} A CSS color string
  */
-exports.private_safeColorChannel = private_safeColorChannel;
-function recomposeColor(color) {
+export function recomposeColor(color) {
   const {
     type,
     colorSpace
@@ -165,7 +137,7 @@ function recomposeColor(color) {
  * @param {string} color - RGB color, i.e. rgb(n, n, n)
  * @returns {string} A CSS rgb color string, i.e. #nnnnnn
  */
-function rgbToHex(color) {
+export function rgbToHex(color) {
   // Idempotent
   if (color.startsWith('#')) {
     return color;
@@ -181,7 +153,7 @@ function rgbToHex(color) {
  * @param {string} color - HSL color values
  * @returns {string} rgb color values
  */
-function hslToRgb(color) {
+export function hslToRgb(color) {
   color = decomposeColor(color);
   const {
     values
@@ -210,7 +182,7 @@ function hslToRgb(color) {
  * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color()
  * @returns {number} The relative brightness of the color in the range 0 - 1
  */
-function getLuminance(color) {
+export function getLuminance(color) {
   color = decomposeColor(color);
   let rgb = color.type === 'hsl' || color.type === 'hsla' ? decomposeColor(hslToRgb(color)).values : color.values;
   rgb = rgb.map(val => {
@@ -232,7 +204,7 @@ function getLuminance(color) {
  * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
  * @returns {number} A contrast ratio value in the range 0 - 21.
  */
-function getContrastRatio(foreground, background) {
+export function getContrastRatio(foreground, background) {
   const lumA = getLuminance(foreground);
   const lumB = getLuminance(background);
   return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
@@ -245,7 +217,7 @@ function getContrastRatio(foreground, background) {
  * @param {number} value - value to set the alpha channel to in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-function alpha(color, value) {
+export function alpha(color, value) {
   color = decomposeColor(color);
   value = clampWrapper(value);
   if (color.type === 'rgb' || color.type === 'hsl') {
@@ -258,7 +230,7 @@ function alpha(color, value) {
   }
   return recomposeColor(color);
 }
-function private_safeAlpha(color, value, warning) {
+export function private_safeAlpha(color, value, warning) {
   try {
     return alpha(color, value);
   } catch (error) {
@@ -275,7 +247,7 @@ function private_safeAlpha(color, value, warning) {
  * @param {number} coefficient - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-function darken(color, coefficient) {
+export function darken(color, coefficient) {
   color = decomposeColor(color);
   coefficient = clampWrapper(coefficient);
   if (color.type.includes('hsl')) {
@@ -287,7 +259,7 @@ function darken(color, coefficient) {
   }
   return recomposeColor(color);
 }
-function private_safeDarken(color, coefficient, warning) {
+export function private_safeDarken(color, coefficient, warning) {
   try {
     return darken(color, coefficient);
   } catch (error) {
@@ -304,7 +276,7 @@ function private_safeDarken(color, coefficient, warning) {
  * @param {number} coefficient - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-function lighten(color, coefficient) {
+export function lighten(color, coefficient) {
   color = decomposeColor(color);
   coefficient = clampWrapper(coefficient);
   if (color.type.includes('hsl')) {
@@ -320,7 +292,7 @@ function lighten(color, coefficient) {
   }
   return recomposeColor(color);
 }
-function private_safeLighten(color, coefficient, warning) {
+export function private_safeLighten(color, coefficient, warning) {
   try {
     return lighten(color, coefficient);
   } catch (error) {
@@ -338,10 +310,10 @@ function private_safeLighten(color, coefficient, warning) {
  * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-function emphasize(color, coefficient = 0.15) {
+export function emphasize(color, coefficient = 0.15) {
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
 }
-function private_safeEmphasize(color, coefficient, warning) {
+export function private_safeEmphasize(color, coefficient, warning) {
   try {
     return emphasize(color, coefficient);
   } catch (error) {
@@ -360,7 +332,7 @@ function private_safeEmphasize(color, coefficient, warning) {
  * @param {number} opacity - Opacity multiplier in the range 0 - 1
  * @param {number} [gamma=1.0] - Gamma correction factor. For gamma-correct blending, 2.2 is usual.
  */
-function blend(background, overlay, opacity, gamma = 1.0) {
+export function blend(background, overlay, opacity, gamma = 1.0) {
   const blendChannel = (b, o) => Math.round((b ** (1 / gamma) * (1 - opacity) + o ** (1 / gamma) * opacity) ** gamma);
   const backgroundColor = decomposeColor(background);
   const overlayColor = decomposeColor(overlay);

package/esm/colorManipulator/index.js

@@ -0,0 +1 @@
+export * from "./colorManipulator.js";

package/{node → esm}/compose/compose.js

@@ -1,11 +1,4 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _merge = _interopRequireDefault(require("../merge"));
+import merge from "../merge/index.js";
 function compose(...styles) {
   const handlers = styles.reduce((acc, style) => {
     style.filterProps.forEach(prop => {
@@ -19,7 +12,7 @@ function compose(...styles) {
   const fn = props => {
     return Object.keys(props).reduce((acc, prop) => {
       if (handlers[prop]) {
-        return (0, _merge.default)(acc, handlers[prop](props));
+        return merge(acc, handlers[prop](props));
       }
       return acc;
     }, {});
@@ -28,4 +21,4 @@ function compose(...styles) {
   fn.filterProps = styles.reduce((acc, style) => acc.concat(style.filterProps), []);
   return fn;
 }
-var _default = exports.default = compose;
+export default compose;

package/esm/compose/index.js

@@ -0,0 +1 @@
+export { default } from "./compose.js";

package/esm/createBox/createBox.js

@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import clsx from 'clsx';
+import styled from '@mui/styled-engine';
+import styleFunctionSx, { extendSxProp } from "../styleFunctionSx/index.js";
+import useTheme from "../useTheme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function createBox(options = {}) {
+  const {
+    themeId,
+    defaultTheme,
+    defaultClassName = 'MuiBox-root',
+    generateClassName
+  } = options;
+  const BoxRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
+  })(styleFunctionSx);
+  const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
+    const theme = useTheme(defaultTheme);
+    const {
+      className,
+      component = 'div',
+      ...other
+    } = extendSxProp(inProps);
+    return /*#__PURE__*/_jsx(BoxRoot, {
+      as: component,
+      ref: ref,
+      className: clsx(className, generateClassName ? generateClassName(defaultClassName) : defaultClassName),
+      theme: themeId ? theme[themeId] || theme : theme,
+      ...other
+    });
+  });
+  return Box;
+}

package/esm/createBox/index.js

@@ -0,0 +1 @@
+export { default } from "./createBox.js";

package/{node → esm}/createBreakpoints/createBreakpoints.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.breakpointKeys = void 0;
-exports.default = createBreakpoints;
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
-const breakpointKeys = exports.breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
+export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
@@ -24,7 +17,7 @@ const sortBreakpointsValues = values => {
 };
 
 // Keep in mind that @media is inclusive by the CSS specification.
-function createBreakpoints(breakpoints) {
+export default function createBreakpoints(breakpoints) {
   const {
     // The breakpoint **start** at this value.
     // For instance with the first breakpoint xs: [xs, sm).

package/esm/createBreakpoints/index.js

@@ -0,0 +1,3 @@
+/** This export is intended for internal integration with Pigment CSS */
+/* eslint-disable import/prefer-default-export */
+export { default as unstable_createBreakpoints } from "./createBreakpoints.js";

package/esm/createStyled/createStyled.js

@@ -0,0 +1,276 @@
+import styledEngineStyled, { internal_mutateStyles as mutateStyles } from '@mui/styled-engine';
+import { isPlainObject } from '@mui/utils/deepmerge';
+import capitalize from '@mui/utils/capitalize';
+import getDisplayName from '@mui/utils/getDisplayName';
+import createTheme from "../createTheme/index.js";
+import styleFunctionSx from "../styleFunctionSx/index.js";
+import preprocessStyles from "../preprocessStyles.js";
+
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable no-labels */
+/* eslint-disable no-lone-blocks */
+
+export const systemDefaultTheme = createTheme();
+
+// Update /system/styled/#api in case if this changes
+export function shouldForwardProp(prop) {
+  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
+}
+function defaultOverridesResolver(slot) {
+  if (!slot) {
+    return null;
+  }
+  return (_props, styles) => styles[slot];
+}
+function attachTheme(props, themeId, defaultTheme) {
+  props.theme = isObjectEmpty(props.theme) ? defaultTheme : props.theme[themeId] || props.theme;
+}
+function processStyle(props, style) {
+  /*
+   * Style types:
+   *  - null/undefined
+   *  - string
+   *  - CSS style object: { [cssKey]: [cssValue], variants }
+   *  - Processed style object: { style, variants, isProcessed: true }
+   *  - Array of any of the above
+   */
+
+  const resolvedStyle = typeof style === 'function' ? style(props) : style;
+  if (Array.isArray(resolvedStyle)) {
+    return resolvedStyle.flatMap(subStyle => processStyle(props, subStyle));
+  }
+  if (Array.isArray(resolvedStyle?.variants)) {
+    let rootStyle;
+    if (resolvedStyle.isProcessed) {
+      rootStyle = resolvedStyle.style;
+    } else {
+      const {
+        variants,
+        ...otherStyles
+      } = resolvedStyle;
+      rootStyle = otherStyles;
+    }
+    return processStyleVariants(props, resolvedStyle.variants, [rootStyle]);
+  }
+  if (resolvedStyle?.isProcessed) {
+    return resolvedStyle.style;
+  }
+  return resolvedStyle;
+}
+function processStyleVariants(props, variants, results = []) {
+  let mergedState; // We might not need it, initialized lazily
+
+  variantLoop: for (let i = 0; i < variants.length; i += 1) {
+    const variant = variants[i];
+    if (typeof variant.props === 'function') {
+      mergedState ??= {
+        ...props,
+        ...props.ownerState,
+        ownerState: props.ownerState
+      };
+      if (!variant.props(mergedState)) {
+        continue;
+      }
+    } else {
+      for (const key in variant.props) {
+        if (props[key] !== variant.props[key] && props.ownerState?.[key] !== variant.props[key]) {
+          continue variantLoop;
+        }
+      }
+    }
+    if (typeof variant.style === 'function') {
+      mergedState ??= {
+        ...props,
+        ...props.ownerState,
+        ownerState: props.ownerState
+      };
+      results.push(variant.style(mergedState));
+    } else {
+      results.push(variant.style);
+    }
+  }
+  return results;
+}
+export default function createStyled(input = {}) {
+  const {
+    themeId,
+    defaultTheme = systemDefaultTheme,
+    rootShouldForwardProp = shouldForwardProp,
+    slotShouldForwardProp = shouldForwardProp
+  } = input;
+  function styleAttachTheme(props) {
+    attachTheme(props, themeId, defaultTheme);
+  }
+  const styled = (tag, inputOptions = {}) => {
+    // If `tag` is already a styled component, filter out the `sx` style function
+    // to prevent unnecessary styles generated by the composite components.
+    mutateStyles(tag, styles => styles.filter(style => style !== styleFunctionSx));
+    const {
+      name: componentName,
+      slot: componentSlot,
+      skipVariantsResolver: inputSkipVariantsResolver,
+      skipSx: inputSkipSx,
+      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+      // For more details: https://github.com/mui/material-ui/pull/37908
+      overridesResolver = defaultOverridesResolver(lowercaseFirstLetter(componentSlot)),
+      ...options
+    } = inputOptions;
+
+    // if skipVariantsResolver option is defined, take the value, otherwise, true for root and false for other slots.
+    const skipVariantsResolver = inputSkipVariantsResolver !== undefined ? inputSkipVariantsResolver :
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    componentSlot && componentSlot !== 'Root' && componentSlot !== 'root' || false;
+    const skipSx = inputSkipSx || false;
+    let shouldForwardPropOption = shouldForwardProp;
+
+    // TODO v6: remove `Root` in the next major release
+    // For more details: https://github.com/mui/material-ui/pull/37908
+    if (componentSlot === 'Root' || componentSlot === 'root') {
+      shouldForwardPropOption = rootShouldForwardProp;
+    } else if (componentSlot) {
+      // any other slot specified
+      shouldForwardPropOption = slotShouldForwardProp;
+    } else if (isStringTag(tag)) {
+      // for string (html) tag, preserve the behavior in emotion & styled-components.
+      shouldForwardPropOption = undefined;
+    }
+    const defaultStyledResolver = styledEngineStyled(tag, {
+      shouldForwardProp: shouldForwardPropOption,
+      label: generateStyledLabel(componentName, componentSlot),
+      ...options
+    });
+    const transformStyle = style => {
+      // On the server Emotion doesn't use React.forwardRef for creating components, so the created
+      // component stays as a function. This condition makes sure that we do not interpolate functions
+      // which are basically components used as a selectors.
+      if (typeof style === 'function' && style.__emotion_real !== style) {
+        return function styleFunctionProcessor(props) {
+          return processStyle(props, style);
+        };
+      }
+      if (isPlainObject(style)) {
+        const serialized = preprocessStyles(style);
+        if (!serialized.variants) {
+          return serialized.style;
+        }
+        return function styleObjectProcessor(props) {
+          return processStyle(props, serialized);
+        };
+      }
+      return style;
+    };
+    const muiStyledResolver = (...expressionsInput) => {
+      const expressionsHead = [];
+      const expressionsBody = expressionsInput.map(transformStyle);
+      const expressionsTail = [];
+
+      // Preprocess `props` to set the scoped theme value.
+      // This must run before any other expression.
+      expressionsHead.push(styleAttachTheme);
+      if (componentName && overridesResolver) {
+        expressionsTail.push(function styleThemeOverrides(props) {
+          const theme = props.theme;
+          const styleOverrides = theme.components?.[componentName]?.styleOverrides;
+          if (!styleOverrides) {
+            return null;
+          }
+          const resolvedStyleOverrides = {};
+
+          // TODO: v7 remove iteration and use `resolveStyleArg(styleOverrides[slot])` directly
+          // eslint-disable-next-line guard-for-in
+          for (const slotKey in styleOverrides) {
+            resolvedStyleOverrides[slotKey] = processStyle(props, styleOverrides[slotKey]);
+          }
+          return overridesResolver(props, resolvedStyleOverrides);
+        });
+      }
+      if (componentName && !skipVariantsResolver) {
+        expressionsTail.push(function styleThemeVariants(props) {
+          const theme = props.theme;
+          const themeVariants = theme?.components?.[componentName]?.variants;
+          if (!themeVariants) {
+            return null;
+          }
+          return processStyleVariants(props, themeVariants);
+        });
+      }
+      if (!skipSx) {
+        expressionsTail.push(styleFunctionSx);
+      }
+
+      // This function can be called as a tagged template, so the first argument would contain
+      // CSS `string[]` values.
+      if (Array.isArray(expressionsBody[0])) {
+        const inputStrings = expressionsBody.shift();
+
+        // We need to add placeholders in the tagged template for the custom functions we have
+        // possibly added (attachTheme, overrides, variants, and sx).
+        const placeholdersHead = new Array(expressionsHead.length).fill('');
+        const placeholdersTail = new Array(expressionsTail.length).fill('');
+        let outputStrings;
+        // prettier-ignore
+        {
+          outputStrings = [...placeholdersHead, ...inputStrings, ...placeholdersTail];
+          outputStrings.raw = [...placeholdersHead, ...inputStrings.raw, ...placeholdersTail];
+        }
+
+        // The only case where we put something before `attachTheme`
+        expressionsHead.unshift(outputStrings);
+      }
+      const expressions = [...expressionsHead, ...expressionsBody, ...expressionsTail];
+      const Component = defaultStyledResolver(...expressions);
+      if (tag.muiName) {
+        Component.muiName = tag.muiName;
+      }
+      if (process.env.NODE_ENV !== 'production') {
+        Component.displayName = generateDisplayName(componentName, componentSlot, tag);
+      }
+      return Component;
+    };
+    if (defaultStyledResolver.withConfig) {
+      muiStyledResolver.withConfig = defaultStyledResolver.withConfig;
+    }
+    return muiStyledResolver;
+  };
+  return styled;
+}
+function generateDisplayName(componentName, componentSlot, tag) {
+  if (componentName) {
+    return `${componentName}${capitalize(componentSlot || '')}`;
+  }
+  return `Styled(${getDisplayName(tag)})`;
+}
+function generateStyledLabel(componentName, componentSlot) {
+  let label;
+  if (process.env.NODE_ENV !== 'production') {
+    if (componentName) {
+      // TODO v6: remove `lowercaseFirstLetter()` in the next major release
+      // For more details: https://github.com/mui/material-ui/pull/37908
+      label = `${componentName}-${lowercaseFirstLetter(componentSlot || 'Root')}`;
+    }
+  }
+  return label;
+}
+function isObjectEmpty(object) {
+  // eslint-disable-next-line
+  for (const _ in object) {
+    return false;
+  }
+  return true;
+}
+
+// https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
+function isStringTag(tag) {
+  return typeof tag === 'string' &&
+  // 96 is one less than the char code
+  // for "a" so this is checking that
+  // it's a lowercase character
+  tag.charCodeAt(0) > 96;
+}
+function lowercaseFirstLetter(string) {
+  if (!string) {
+    return string;
+  }
+  return string.charAt(0).toLowerCase() + string.slice(1);
+}

package/esm/createStyled/index.js

@@ -0,0 +1,2 @@
+export { default } from "./createStyled.js";
+export * from "./createStyled.js";

package/{node → esm}/createTheme/applyStyles.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = applyStyles;
 /**
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
  * It works with:
@@ -62,7 +56,7 @@ exports.default = applyStyles;
  *   })
  *```
  */
-function applyStyles(key, styles) {
+export default function applyStyles(key, styles) {
   // @ts-expect-error this is 'any' type
   const theme = this;
   if (theme.vars) {

package/{node → esm}/createTheme/createSpacing.js

@@ -1,18 +1,13 @@
-"use strict";
+import { createUnarySpacing } from "../spacing/index.js";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createSpacing;
-var _spacing = require("../spacing");
 // The different signatures imply different meaning for their arguments that can't be expressed structurally.
 // We express the difference with variable names.
 
-function createSpacing(spacingInput = 8,
+export default function createSpacing(spacingInput = 8,
 // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
 // Smaller components, such as icons, can align to a 4dp grid.
 // https://m2.material.io/design/layout/understanding-layout.html
-transform = (0, _spacing.createUnarySpacing)({
+transform = createUnarySpacing({
   spacing: spacingInput
 })) {
   // Already transformed.