@marigold/system 1.1.1 → 1.2.2

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { Simplify, PolymorphicPropsWithRef, PolymorphicComponentWithRef, Compone
 import * as _theme_ui_css from '@theme-ui/css';
 import { ResponsiveStyleValue as ResponsiveStyleValue$1, ThemeUIStyleObject, ThemeUICSSObject, ThemeUICSSProperties, NestedScaleDict } from '@theme-ui/css';
 import * as react from 'react';
-import { ReactNode, ElementType } from 'react';
+import { ReactNode } from 'react';
 import * as CSS from 'csstype';
 
 declare type ResponsiveStyleValue<T> = ResponsiveStyleValue$1<T>;
@@ -114,6 +114,12 @@ interface ZeroSizeScale<T> extends SizeScale<T> {
  * Base theme with typings for available scales properties.
  */
 interface Theme {
+    /**
+     * Styles that applied to the root of the app, where the root can be either the document
+     * for full page apps or an element if you're only using Marigold on a portion of the page.
+     * This is useful for additional normalizationor and to style non-Marigold elements.
+     */
+    root?: CSSObject;
     /**
      * To configure the default breakpoints used in responsive array values,
      * add a breakpoints array to your theme.
@@ -211,7 +217,17 @@ interface BoxProps extends PolymorphicPropsWithRef<BoxOwnProps, 'div'> {
 }
 declare const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'>;
 
-declare const Global: () => JSX.Element;
+declare type GlobalProps = {
+    /**
+     * CSS Selector to change the element that the styles will be applied to.
+     */
+    selector?: string;
+    /**
+     * Normalize `html` and `body`? Defaults to `true`.
+     */
+    normalizeDocument?: boolean;
+};
+declare const Global: ({ normalizeDocument, selector }: GlobalProps) => JSX.Element;
 
 interface SVGProps extends ComponentProps<'svg'> {
     size?: number | string | number[] | string[];
@@ -271,153 +287,4 @@ interface ThemeProviderProps<T extends Theme> {
 }
 declare function ThemeProvider<T extends Theme>({ theme, children, }: ThemeProviderProps<T>): JSX.Element;
 
-/**
- * Normalize styling of certain elements between browsers.
- * Based on https://www.joshwcomeau.com/css/custom-css-reset/
- */
-
-declare const normalize: {
-    readonly base: {
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly a: {
-        readonly textDecoration: "none";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly p: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly h1: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly h2: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly h3: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly h4: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly h5: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly h6: {
-        readonly overflowWrap: "break-word";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly img: {
-        readonly display: "block";
-        readonly maxWidth: "100%";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly picture: {
-        readonly display: "block";
-        readonly maxWidth: "100%";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly video: {
-        readonly display: "block";
-        readonly maxWidth: "100%";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly canvas: {
-        readonly display: "block";
-        readonly maxWidth: "100%";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly svg: {
-        readonly display: "block";
-        readonly maxWidth: "100%";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly select: {
-        readonly display: "block";
-        readonly appearance: "none";
-        readonly font: "inherit";
-        readonly '&::-ms-expand': {
-            readonly display: "none";
-        };
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly button: {
-        readonly display: "block";
-        readonly appearance: "none";
-        readonly font: "inherit";
-        readonly background: "transparent";
-        readonly textAlign: "center";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly textarea: {
-        readonly display: "block";
-        readonly appearance: "none";
-        readonly font: "inherit";
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-    readonly input: {
-        readonly display: "block";
-        readonly appearance: "none";
-        readonly font: "inherit";
-        readonly '&::-ms-clear': {
-            readonly display: "none";
-        };
-        readonly '&::-webkit-search-cancel-button': {
-            readonly WebkitAppearance: "none";
-        };
-        readonly boxSizing: "border-box";
-        readonly margin: 0;
-        readonly minWidth: 0;
-    };
-};
-declare type NormalizedElement = keyof typeof normalize;
-/**
- * Type-safe helper to get normalization. If no normalization is found,
- * returns the *base* normalization.
- */
-declare const getNormalizedStyles: (val?: ElementType) => {
-    readonly boxSizing: "border-box";
-    readonly margin: 0;
-    readonly minWidth: 0;
-};
-
-export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, ComponentState, ComponentStyleParts, ComponentStylesProps, Global, NormalizedElement, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, StateAttrKeyProps, StateAttrProps, StyleObject, StyleProps, Theme, ThemeComponentProps, ThemeExtension, ThemeExtensionsWithParts, ThemeProvider, ThemeProviderProps, UseStateProps, ZeroScale, ZeroSizeScale, __defaultTheme, getNormalizedStyles, normalize, useComponentStyles, useResponsiveValue, useStateProps, useTheme };
+export { Box, BoxOwnProps, BoxProps, CSSObject, CSSProperties, ComponentState, ComponentStyleParts, ComponentStylesProps, Global, GlobalProps, ResponsiveStyleValue, SVG, SVGProps, Scale, ScaleValue, SizeScale, StateAttrKeyProps, StateAttrProps, StyleObject, StyleProps, Theme, ThemeComponentProps, ThemeExtension, ThemeExtensionsWithParts, ThemeProvider, ThemeProviderProps, UseStateProps, ZeroScale, ZeroSizeScale, __defaultTheme, useComponentStyles, useResponsiveValue, useStateProps, useTheme };

package/dist/index.js

@@ -1,38 +1,10 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a2, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a2, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a2, prop, b[prop]);
-    }
-  return a2;
-};
-var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -56,8 +28,6 @@ __export(src_exports, {
   SVG: () => SVG,
   ThemeProvider: () => ThemeProvider,
   __defaultTheme: () => __defaultTheme,
-  getNormalizedStyles: () => getNormalizedStyles,
-  normalize: () => normalize,
   useComponentStyles: () => useComponentStyles,
   useResponsiveValue: () => useResponsiveValue,
   useStateProps: () => useStateProps,
@@ -71,76 +41,7 @@ var import_react2 = require("@emotion/react");
 var import_css = require("@theme-ui/css");
 var import_deepmerge = __toESM(require("deepmerge"));
 
-// src/normalize.ts
-var base = {
-  boxSizing: "border-box",
-  margin: 0,
-  minWidth: 0
-};
-var a = __spreadProps(__spreadValues({}, base), {
-  textDecoration: "none"
-});
-var text = __spreadProps(__spreadValues({}, base), {
-  overflowWrap: "break-word"
-});
-var media = __spreadProps(__spreadValues({}, base), {
-  display: "block",
-  maxWidth: "100%"
-});
-var button = __spreadProps(__spreadValues({}, base), {
-  display: "block",
-  appearance: "none",
-  font: "inherit",
-  background: "transparent",
-  textAlign: "center"
-});
-var input = __spreadProps(__spreadValues({}, base), {
-  display: "block",
-  appearance: "none",
-  font: "inherit",
-  "&::-ms-clear": {
-    display: "none"
-  },
-  "&::-webkit-search-cancel-button": {
-    WebkitAppearance: "none"
-  }
-});
-var select = __spreadProps(__spreadValues({}, base), {
-  display: "block",
-  appearance: "none",
-  font: "inherit",
-  "&::-ms-expand": {
-    display: "none"
-  }
-});
-var textarea = __spreadProps(__spreadValues({}, base), {
-  display: "block",
-  appearance: "none",
-  font: "inherit"
-});
-var normalize = {
-  base,
-  a,
-  p: text,
-  h1: text,
-  h2: text,
-  h3: text,
-  h4: text,
-  h5: text,
-  h6: text,
-  img: media,
-  picture: media,
-  video: media,
-  canvas: media,
-  svg: media,
-  select,
-  button,
-  textarea,
-  input
-};
-var getNormalizedStyles = (val) => typeof val === "string" && val in normalize ? normalize[val] : normalize.base;
-
-// src/components/Box/utils.ts
+// src/components/Box/selector.ts
 var createteSelector = (selectors, states, suffix = "") => {
   return selectors.map((selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)).flat().join(", ");
 };
@@ -199,159 +100,109 @@ var transformPseudos = (styles) => {
 // src/components/Box/Box.tsx
 var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
   const themedStyles = import_deepmerge.default.all([
-    getNormalizedStyles(as),
     (0, import_css.css)(__baseCSS)(theme),
     (0, import_css.css)(styles)(theme),
     (0, import_css.css)(css)(theme)
   ]);
   return transformPseudos(themedStyles);
 };
-var Box = (0, import_react.forwardRef)((_a, ref) => {
-  var _b = _a, {
-    as = "div",
-    children,
+var Box = (0, import_react.forwardRef)(({
+  as = "div",
+  children,
+  __baseCSS,
+  css,
+  display,
+  height,
+  width,
+  minWidth,
+  maxWidth,
+  position,
+  top,
+  bottom,
+  right,
+  left,
+  zIndex,
+  p,
+  px,
+  py,
+  pt,
+  pb,
+  pl,
+  pr,
+  m,
+  mx,
+  my,
+  mt,
+  mb,
+  ml,
+  mr,
+  flexDirection,
+  flexWrap,
+  flexShrink,
+  flexGrow,
+  alignItems,
+  justifyContent,
+  bg,
+  border,
+  borderRadius,
+  boxShadow,
+  opacity,
+  overflow,
+  transition,
+  ...props
+}, ref) => (0, import_react2.jsx)(as, {
+  ...props,
+  css: createThemedStyle({
+    as,
     __baseCSS,
     css,
-    display,
-    height,
-    width,
-    minWidth,
-    maxWidth,
-    position,
-    top,
-    bottom,
-    right,
-    left,
-    zIndex,
-    p,
-    px,
-    py,
-    pt,
-    pb,
-    pl,
-    pr,
-    m,
-    mx,
-    my,
-    mt,
-    mb,
-    ml,
-    mr,
-    flexDirection,
-    flexWrap,
-    flexShrink,
-    flexGrow,
-    alignItems,
-    justifyContent,
-    bg,
-    border,
-    borderRadius,
-    boxShadow,
-    opacity,
-    overflow,
-    transition
-  } = _b, props = __objRest(_b, [
-    "as",
-    "children",
-    "__baseCSS",
-    "css",
-    "display",
-    "height",
-    "width",
-    "minWidth",
-    "maxWidth",
-    "position",
-    "top",
-    "bottom",
-    "right",
-    "left",
-    "zIndex",
-    "p",
-    "px",
-    "py",
-    "pt",
-    "pb",
-    "pl",
-    "pr",
-    "m",
-    "mx",
-    "my",
-    "mt",
-    "mb",
-    "ml",
-    "mr",
-    "flexDirection",
-    "flexWrap",
-    "flexShrink",
-    "flexGrow",
-    "alignItems",
-    "justifyContent",
-    "bg",
-    "border",
-    "borderRadius",
-    "boxShadow",
-    "opacity",
-    "overflow",
-    "transition"
-  ]);
-  return (0, import_react2.jsx)(as, __spreadProps(__spreadValues({}, props), {
-    css: createThemedStyle({
-      as,
-      __baseCSS,
-      css,
-      styles: {
-        display,
-        height,
-        width,
-        minWidth,
-        maxWidth,
-        position,
-        top,
-        bottom,
-        right,
-        left,
-        zIndex,
-        p,
-        px,
-        py,
-        pt,
-        pb,
-        pl,
-        pr,
-        m,
-        mx,
-        my,
-        mt,
-        mb,
-        ml,
-        mr,
-        flexDirection,
-        flexWrap,
-        flexShrink,
-        flexGrow,
-        alignItems,
-        justifyContent,
-        bg,
-        border,
-        borderRadius,
-        boxShadow,
-        opacity,
-        overflow,
-        transition
-      }
-    }),
-    ref
-  }), children);
-});
+    styles: {
+      display,
+      height,
+      width,
+      minWidth,
+      maxWidth,
+      position,
+      top,
+      bottom,
+      right,
+      left,
+      zIndex,
+      p,
+      px,
+      py,
+      pt,
+      pb,
+      pl,
+      pr,
+      m,
+      mx,
+      my,
+      mt,
+      mb,
+      ml,
+      mr,
+      flexDirection,
+      flexWrap,
+      flexShrink,
+      flexGrow,
+      alignItems,
+      justifyContent,
+      bg,
+      border,
+      borderRadius,
+      boxShadow,
+      opacity,
+      overflow,
+      transition
+    }
+  }),
+  ref
+}, children));
 
 // src/components/Global/Global.tsx
-var import_react8 = __toESM(require("react"));
-var import_react9 = require("@emotion/react");
-
-// src/hooks/useComponentStyles.ts
-var import_deepmerge2 = __toESM(require("deepmerge"));
-var import_react5 = require("react");
-var import_react_fast_compare = __toESM(require("react-fast-compare"));
+var import_react5 = __toESM(require("react"));
+var import_react6 = require("@emotion/react");
 
 // src/hooks/useTheme.tsx
 var import_react3 = __toESM(require("react"));
@@ -376,7 +227,98 @@ function ThemeProvider({
   }, children));
 }
 
+// src/components/Global/normalize.ts
+var document = {
+  "html, body": {
+    height: "100%"
+  },
+  html: {
+    textSizeAdjust: "none"
+  },
+  body: {
+    lineHeight: 1.5,
+    WebkitFontSmoothing: "antialiased",
+    margin: 0
+  },
+  "@media screen and (prefers-reduced-motion: reduce), (update: slow)": {
+    "*": {
+      animationDuration: "0.001ms !important",
+      animationIterationCount: "1 !important",
+      transitionDuration: "0.001ms !important"
+    }
+  }
+};
+var element = {
+  "*, *::before, *::after": {
+    boxSizing: "border-box"
+  },
+  "*": {
+    margin: 0
+  },
+  a: {
+    textDecoration: "none"
+  },
+  "p, h1, h2, h3, h4, h5, h6": {
+    overflowWrap: "break-word"
+  },
+  "img, picture, video, canvas, svg": {
+    display: "block",
+    maxWidth: "100%"
+  },
+  button: {
+    display: "block",
+    appearance: "none",
+    font: "inherit",
+    background: "transparent",
+    textAlign: "center"
+  },
+  input: {
+    display: "block",
+    appearance: "none",
+    font: "inherit",
+    "&::-ms-clear": {
+      display: "none"
+    },
+    "&::-webkit-search-cancel-button": {
+      WebkitAppearance: "none"
+    }
+  },
+  select: {
+    display: "block",
+    appearance: "none",
+    font: "inherit",
+    "&::-ms-expand": {
+      display: "none"
+    }
+  },
+  textarea: {
+    display: "block",
+    appearance: "none",
+    font: "inherit"
+  }
+};
+
+// src/components/Global/Global.tsx
+var Global = ({ normalizeDocument = true, selector: selector2 }) => {
+  const { css, theme } = useTheme();
+  const rootStyles = css((theme == null ? void 0 : theme.root) || {});
+  const styles = [
+    normalizeDocument ? document : {},
+    selector2 ? { [`:where(${selector2})`]: element } : element,
+    selector2 ? { [`:where(${selector2})`]: rootStyles } : rootStyles
+  ];
+  return /* @__PURE__ */ import_react5.default.createElement(import_react6.Global, {
+    styles
+  });
+};
+
+// src/components/SVG/SVG.tsx
+var import_react10 = require("@emotion/react");
+
 // src/hooks/useComponentStyles.ts
+var import_deepmerge2 = __toESM(require("deepmerge"));
+var import_react7 = require("react");
+var import_react_fast_compare = __toESM(require("react-fast-compare"));
 var get = (obj, path, fallback) => {
   const key = path.split(".");
   let result = obj;
@@ -391,12 +333,12 @@ function useComponentStyles(componentName, props = {}, options = {}) {
   var _a, _b;
   const { theme } = useTheme();
   const componentStyles = get(theme, `components.${componentName}`);
-  const stylesRef = (0, import_react5.useRef)({});
+  const stylesRef = (0, import_react7.useRef)({});
   if (componentStyles) {
-    const base2 = componentStyles.base || {};
+    const base = componentStyles.base || {};
     const size = ((_a = componentStyles.size) == null ? void 0 : _a[props.size]) || {};
     const variant = ((_b = componentStyles.variant) == null ? void 0 : _b[props.variant]) || {};
-    let styles = import_deepmerge2.default.all([base2, size, variant]);
+    let styles = import_deepmerge2.default.all([base, size, variant]);
     if (options.parts) {
       styles = options.parts.reduce((result, part) => {
         result[part] = styles[part] || {};
@@ -411,7 +353,7 @@ function useComponentStyles(componentName, props = {}, options = {}) {
 }
 
 // src/hooks/useResponsiveValue.ts
-var import_react6 = require("react");
+var import_react8 = require("react");
 var emptyBreakpoints = ["40em", "52em", "64em"];
 var useResponsiveValue = (values, defaultIndex = 0) => {
   const { theme } = useTheme();
@@ -419,8 +361,8 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
   if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
     throw new RangeError(`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`);
   }
-  const [index, setIndex] = (0, import_react6.useState)(defaultIndex);
-  (0, import_react6.useEffect)(() => {
+  const [index, setIndex] = (0, import_react8.useState)(defaultIndex);
+  (0, import_react8.useEffect)(() => {
     const getIndex = () => breakpoints.filter((breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches).length;
     const handleResize = () => {
       const newIndex = getIndex();
@@ -436,12 +378,12 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
 };
 
 // src/hooks/useStateProps.ts
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_react_fast_compare2 = __toESM(require("react-fast-compare"));
 var KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g;
 var toKebap = (val) => val.replace(KEBAB_REGEX, (match) => `-${match.toLocaleLowerCase()}`);
 var useStateProps = (states) => {
-  const statePropsRef = (0, import_react7.useRef)({});
+  const statePropsRef = (0, import_react9.useRef)({});
   let stateProps = {};
   for (let state2 in states) {
     if (states[state2]) {
@@ -455,60 +397,25 @@ var useStateProps = (states) => {
   return statePropsRef.current;
 };
 
-// src/components/Global/Global.tsx
-var reduceMotionStyles = {
-  "@media screen and (prefers-reduced-motion: reduce), (update: slow)": {
-    "*": {
-      animationDuration: "0.001ms !important",
-      animationIterationCount: "1 !important",
-      transitionDuration: "0.001ms !important"
-    }
-  }
-};
-var Global = () => {
-  const { css } = useTheme();
-  const styles = css({
-    html: {
-      height: "100%",
-      textSizeAdjust: "none",
-      variant: "root.html"
-    },
-    body: {
-      height: "100%",
-      lineHeight: 1.5,
-      WebkitFontSmoothing: "antialiased",
-      variant: "root.body"
-    }
-  });
-  return /* @__PURE__ */ import_react8.default.createElement(import_react9.Global, {
-    styles: __spreadValues({ reduceMotionStyles }, styles)
-  });
-};
-
 // src/components/SVG/SVG.tsx
-var import_react10 = require("@emotion/react");
-var normalizedStyles = getNormalizedStyles("svg");
 var toDimension = (value) => Array.isArray(value) ? value.map(ensureNumberOrToken) : ensureNumberOrToken(value);
 var ensureNumberOrToken = (value) => typeof value === "string" && /[0-9]+/.test(value) ? Number(value) : value;
-var SVG = (_a) => {
-  var _b = _a, {
-    size = 24,
-    fill = "currentcolor",
-    children
-  } = _b, props = __objRest(_b, [
-    "size",
-    "fill",
-    "children"
-  ]);
+var SVG = ({
+  size = 24,
+  fill = "currentcolor",
+  children,
+  ...props
+}) => {
   const { css } = useTheme();
-  return (0, import_react10.jsx)("svg", __spreadValues({
+  return (0, import_react10.jsx)("svg", {
     viewBox: "0 0 24 24",
-    css: css(__spreadProps(__spreadValues({}, normalizedStyles), {
+    css: css({
       fill,
       width: toDimension(props.width || size),
       height: toDimension(props.height || size)
-    }))
-  }, props), children);
+    }),
+    ...props
+  }, children);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -517,8 +424,6 @@ var SVG = (_a) => {
   SVG,
   ThemeProvider,
   __defaultTheme,
-  getNormalizedStyles,
-  normalize,
   useComponentStyles,
   useResponsiveValue,
   useStateProps,

package/dist/index.mjs

@@ -1,111 +1,10 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a2, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a2, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a2, prop, b[prop]);
-    }
-  return a2;
-};
-var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-
 // src/components/Box/Box.tsx
 import { forwardRef } from "react";
 import { jsx } from "@emotion/react";
 import { css as transformStyleObject } from "@theme-ui/css";
 import merge from "deepmerge";
 
-// src/normalize.ts
-var base = {
-  boxSizing: "border-box",
-  margin: 0,
-  minWidth: 0
-};
-var a = __spreadProps(__spreadValues({}, base), {
-  textDecoration: "none"
-});
-var text = __spreadProps(__spreadValues({}, base), {
-  overflowWrap: "break-word"
-});
-var media = __spreadProps(__spreadValues({}, base), {
-  display: "block",
-  maxWidth: "100%"
-});
-var button = __spreadProps(__spreadValues({}, base), {
-  display: "block",
-  appearance: "none",
-  font: "inherit",
-  background: "transparent",
-  textAlign: "center"
-});
-var input = __spreadProps(__spreadValues({}, base), {
-  display: "block",
-  appearance: "none",
-  font: "inherit",
-  "&::-ms-clear": {
-    display: "none"
-  },
-  "&::-webkit-search-cancel-button": {
-    WebkitAppearance: "none"
-  }
-});
-var select = __spreadProps(__spreadValues({}, base), {
-  display: "block",
-  appearance: "none",
-  font: "inherit",
-  "&::-ms-expand": {
-    display: "none"
-  }
-});
-var textarea = __spreadProps(__spreadValues({}, base), {
-  display: "block",
-  appearance: "none",
-  font: "inherit"
-});
-var normalize = {
-  base,
-  a,
-  p: text,
-  h1: text,
-  h2: text,
-  h3: text,
-  h4: text,
-  h5: text,
-  h6: text,
-  img: media,
-  picture: media,
-  video: media,
-  canvas: media,
-  svg: media,
-  select,
-  button,
-  textarea,
-  input
-};
-var getNormalizedStyles = (val) => typeof val === "string" && val in normalize ? normalize[val] : normalize.base;
-
-// src/components/Box/utils.ts
+// src/components/Box/selector.ts
 var createteSelector = (selectors, states, suffix = "") => {
   return selectors.map((selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)).flat().join(", ");
 };
@@ -164,160 +63,110 @@ var transformPseudos = (styles) => {
 // src/components/Box/Box.tsx
 var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
   const themedStyles = merge.all([
-    getNormalizedStyles(as),
     transformStyleObject(__baseCSS)(theme),
     transformStyleObject(styles)(theme),
     transformStyleObject(css)(theme)
   ]);
   return transformPseudos(themedStyles);
 };
-var Box = forwardRef((_a, ref) => {
-  var _b = _a, {
-    as = "div",
-    children,
+var Box = forwardRef(({
+  as = "div",
+  children,
+  __baseCSS,
+  css,
+  display,
+  height,
+  width,
+  minWidth,
+  maxWidth,
+  position,
+  top,
+  bottom,
+  right,
+  left,
+  zIndex,
+  p,
+  px,
+  py,
+  pt,
+  pb,
+  pl,
+  pr,
+  m,
+  mx,
+  my,
+  mt,
+  mb,
+  ml,
+  mr,
+  flexDirection,
+  flexWrap,
+  flexShrink,
+  flexGrow,
+  alignItems,
+  justifyContent,
+  bg,
+  border,
+  borderRadius,
+  boxShadow,
+  opacity,
+  overflow,
+  transition,
+  ...props
+}, ref) => jsx(as, {
+  ...props,
+  css: createThemedStyle({
+    as,
     __baseCSS,
     css,
-    display,
-    height,
-    width,
-    minWidth,
-    maxWidth,
-    position,
-    top,
-    bottom,
-    right,
-    left,
-    zIndex,
-    p,
-    px,
-    py,
-    pt,
-    pb,
-    pl,
-    pr,
-    m,
-    mx,
-    my,
-    mt,
-    mb,
-    ml,
-    mr,
-    flexDirection,
-    flexWrap,
-    flexShrink,
-    flexGrow,
-    alignItems,
-    justifyContent,
-    bg,
-    border,
-    borderRadius,
-    boxShadow,
-    opacity,
-    overflow,
-    transition
-  } = _b, props = __objRest(_b, [
-    "as",
-    "children",
-    "__baseCSS",
-    "css",
-    "display",
-    "height",
-    "width",
-    "minWidth",
-    "maxWidth",
-    "position",
-    "top",
-    "bottom",
-    "right",
-    "left",
-    "zIndex",
-    "p",
-    "px",
-    "py",
-    "pt",
-    "pb",
-    "pl",
-    "pr",
-    "m",
-    "mx",
-    "my",
-    "mt",
-    "mb",
-    "ml",
-    "mr",
-    "flexDirection",
-    "flexWrap",
-    "flexShrink",
-    "flexGrow",
-    "alignItems",
-    "justifyContent",
-    "bg",
-    "border",
-    "borderRadius",
-    "boxShadow",
-    "opacity",
-    "overflow",
-    "transition"
-  ]);
-  return jsx(as, __spreadProps(__spreadValues({}, props), {
-    css: createThemedStyle({
-      as,
-      __baseCSS,
-      css,
-      styles: {
-        display,
-        height,
-        width,
-        minWidth,
-        maxWidth,
-        position,
-        top,
-        bottom,
-        right,
-        left,
-        zIndex,
-        p,
-        px,
-        py,
-        pt,
-        pb,
-        pl,
-        pr,
-        m,
-        mx,
-        my,
-        mt,
-        mb,
-        ml,
-        mr,
-        flexDirection,
-        flexWrap,
-        flexShrink,
-        flexGrow,
-        alignItems,
-        justifyContent,
-        bg,
-        border,
-        borderRadius,
-        boxShadow,
-        opacity,
-        overflow,
-        transition
-      }
-    }),
-    ref
-  }), children);
-});
+    styles: {
+      display,
+      height,
+      width,
+      minWidth,
+      maxWidth,
+      position,
+      top,
+      bottom,
+      right,
+      left,
+      zIndex,
+      p,
+      px,
+      py,
+      pt,
+      pb,
+      pl,
+      pr,
+      m,
+      mx,
+      my,
+      mt,
+      mb,
+      ml,
+      mr,
+      flexDirection,
+      flexWrap,
+      flexShrink,
+      flexGrow,
+      alignItems,
+      justifyContent,
+      bg,
+      border,
+      borderRadius,
+      boxShadow,
+      opacity,
+      overflow,
+      transition
+    }
+  }),
+  ref
+}, children));
 
 // src/components/Global/Global.tsx
 import React2 from "react";
 import { Global as EmotionGlobal } from "@emotion/react";
 
-// src/hooks/useComponentStyles.ts
-import merge2 from "deepmerge";
-import { useRef } from "react";
-import isEqual from "react-fast-compare";
-
 // src/hooks/useTheme.tsx
 import React, {
   createContext,
@@ -348,7 +197,98 @@ function ThemeProvider({
   }, children));
 }
 
+// src/components/Global/normalize.ts
+var document = {
+  "html, body": {
+    height: "100%"
+  },
+  html: {
+    textSizeAdjust: "none"
+  },
+  body: {
+    lineHeight: 1.5,
+    WebkitFontSmoothing: "antialiased",
+    margin: 0
+  },
+  "@media screen and (prefers-reduced-motion: reduce), (update: slow)": {
+    "*": {
+      animationDuration: "0.001ms !important",
+      animationIterationCount: "1 !important",
+      transitionDuration: "0.001ms !important"
+    }
+  }
+};
+var element = {
+  "*, *::before, *::after": {
+    boxSizing: "border-box"
+  },
+  "*": {
+    margin: 0
+  },
+  a: {
+    textDecoration: "none"
+  },
+  "p, h1, h2, h3, h4, h5, h6": {
+    overflowWrap: "break-word"
+  },
+  "img, picture, video, canvas, svg": {
+    display: "block",
+    maxWidth: "100%"
+  },
+  button: {
+    display: "block",
+    appearance: "none",
+    font: "inherit",
+    background: "transparent",
+    textAlign: "center"
+  },
+  input: {
+    display: "block",
+    appearance: "none",
+    font: "inherit",
+    "&::-ms-clear": {
+      display: "none"
+    },
+    "&::-webkit-search-cancel-button": {
+      WebkitAppearance: "none"
+    }
+  },
+  select: {
+    display: "block",
+    appearance: "none",
+    font: "inherit",
+    "&::-ms-expand": {
+      display: "none"
+    }
+  },
+  textarea: {
+    display: "block",
+    appearance: "none",
+    font: "inherit"
+  }
+};
+
+// src/components/Global/Global.tsx
+var Global = ({ normalizeDocument = true, selector: selector2 }) => {
+  const { css, theme } = useTheme();
+  const rootStyles = css((theme == null ? void 0 : theme.root) || {});
+  const styles = [
+    normalizeDocument ? document : {},
+    selector2 ? { [`:where(${selector2})`]: element } : element,
+    selector2 ? { [`:where(${selector2})`]: rootStyles } : rootStyles
+  ];
+  return /* @__PURE__ */ React2.createElement(EmotionGlobal, {
+    styles
+  });
+};
+
+// src/components/SVG/SVG.tsx
+import { jsx as jsx2 } from "@emotion/react";
+
 // src/hooks/useComponentStyles.ts
+import merge2 from "deepmerge";
+import { useRef } from "react";
+import isEqual from "react-fast-compare";
 var get = (obj, path, fallback) => {
   const key = path.split(".");
   let result = obj;
@@ -365,10 +305,10 @@ function useComponentStyles(componentName, props = {}, options = {}) {
   const componentStyles = get(theme, `components.${componentName}`);
   const stylesRef = useRef({});
   if (componentStyles) {
-    const base2 = componentStyles.base || {};
+    const base = componentStyles.base || {};
     const size = ((_a = componentStyles.size) == null ? void 0 : _a[props.size]) || {};
     const variant = ((_b = componentStyles.variant) == null ? void 0 : _b[props.variant]) || {};
-    let styles = merge2.all([base2, size, variant]);
+    let styles = merge2.all([base, size, variant]);
     if (options.parts) {
       styles = options.parts.reduce((result, part) => {
         result[part] = styles[part] || {};
@@ -427,60 +367,25 @@ var useStateProps = (states) => {
   return statePropsRef.current;
 };
 
-// src/components/Global/Global.tsx
-var reduceMotionStyles = {
-  "@media screen and (prefers-reduced-motion: reduce), (update: slow)": {
-    "*": {
-      animationDuration: "0.001ms !important",
-      animationIterationCount: "1 !important",
-      transitionDuration: "0.001ms !important"
-    }
-  }
-};
-var Global = () => {
-  const { css } = useTheme();
-  const styles = css({
-    html: {
-      height: "100%",
-      textSizeAdjust: "none",
-      variant: "root.html"
-    },
-    body: {
-      height: "100%",
-      lineHeight: 1.5,
-      WebkitFontSmoothing: "antialiased",
-      variant: "root.body"
-    }
-  });
-  return /* @__PURE__ */ React2.createElement(EmotionGlobal, {
-    styles: __spreadValues({ reduceMotionStyles }, styles)
-  });
-};
-
 // src/components/SVG/SVG.tsx
-import { jsx as jsx2 } from "@emotion/react";
-var normalizedStyles = getNormalizedStyles("svg");
 var toDimension = (value) => Array.isArray(value) ? value.map(ensureNumberOrToken) : ensureNumberOrToken(value);
 var ensureNumberOrToken = (value) => typeof value === "string" && /[0-9]+/.test(value) ? Number(value) : value;
-var SVG = (_a) => {
-  var _b = _a, {
-    size = 24,
-    fill = "currentcolor",
-    children
-  } = _b, props = __objRest(_b, [
-    "size",
-    "fill",
-    "children"
-  ]);
+var SVG = ({
+  size = 24,
+  fill = "currentcolor",
+  children,
+  ...props
+}) => {
   const { css } = useTheme();
-  return jsx2("svg", __spreadValues({
+  return jsx2("svg", {
     viewBox: "0 0 24 24",
-    css: css(__spreadProps(__spreadValues({}, normalizedStyles), {
+    css: css({
       fill,
       width: toDimension(props.width || size),
       height: toDimension(props.height || size)
-    }))
-  }, props), children);
+    }),
+    ...props
+  }, children);
 };
 export {
   Box,
@@ -488,8 +393,6 @@ export {
   SVG,
   ThemeProvider,
   __defaultTheme,
-  getNormalizedStyles,
-  normalize,
   useComponentStyles,
   useResponsiveValue,
   useStateProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "1.1.1",
+  "version": "1.2.2",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -26,22 +26,22 @@
     "directory": "packages/system"
   },
   "dependencies": {
-    "@emotion/react": "11.9.0",
-    "@marigold/types": "0.5.1",
-    "@theme-ui/css": "0.14.5",
+    "@emotion/react": "11.9.3",
+    "@marigold/types": "0.5.2",
+    "@theme-ui/css": "0.14.6",
     "csstype": "3.1.0",
     "deepmerge": "^4.2.2",
     "react-fast-compare": "^3.2.0"
   },
   "peerDependencies": {
-    "react": "^16.x || ^17.0.0",
-    "react-dom": "^16.x || ^17.0.0"
+    "react": "16.x || 17.x || 18.x",
+    "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
-    "@babel/core": "7.17.12",
+    "@babel/core": "7.18.6",
     "@marigold/tsconfig": "0.3.0",
-    "react": "17.0.2",
-    "tsup": "6.0.1"
+    "react": "18.2.0",
+    "tsup": "6.1.3"
   },
   "scripts": {
     "build": "tsup src/index.ts",