@marigold/system 1.1.0 → 1.2.1

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<any> | undefined) => {
-    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

@@ -9,18 +9,18 @@ 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) => {
+var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a2, prop, b[prop]);
+      __defNormalProp(a, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
       if (__propIsEnum.call(b, prop))
-        __defNormalProp(a2, prop, b[prop]);
+        __defNormalProp(a, prop, b[prop]);
     }
-  return a2;
+  return a;
 };
-var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -56,8 +56,6 @@ __export(src_exports, {
   SVG: () => SVG,
   ThemeProvider: () => ThemeProvider,
   __defaultTheme: () => __defaultTheme,
-  getNormalizedStyles: () => getNormalizedStyles,
-  normalize: () => normalize,
   useComponentStyles: () => useComponentStyles,
   useResponsiveValue: () => useResponsiveValue,
   useStateProps: () => useStateProps,
@@ -71,76 +69,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,7 +128,6 @@ 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)
@@ -345,13 +273,8 @@ var Box = (0, import_react.forwardRef)((_a, ref) => {
 });
 
 // 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 +299,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 +405,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 +425,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 +433,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 +450,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,39 +469,7 @@ 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) => {
@@ -503,11 +485,11 @@ var SVG = (_a) => {
   const { css } = useTheme();
   return (0, import_react10.jsx)("svg", __spreadValues({
     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);
 };
 // Annotate the CommonJS export names for ESM import in node:
@@ -517,8 +499,6 @@ var SVG = (_a) => {
   SVG,
   ThemeProvider,
   __defaultTheme,
-  getNormalizedStyles,
-  normalize,
   useComponentStyles,
   useResponsiveValue,
   useStateProps,

package/dist/index.mjs

@@ -5,18 +5,18 @@ 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) => {
+var __spreadValues = (a, b) => {
   for (var prop in b || (b = {}))
     if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a2, prop, b[prop]);
+      __defNormalProp(a, prop, b[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b)) {
       if (__propIsEnum.call(b, prop))
-        __defNormalProp(a2, prop, b[prop]);
+        __defNormalProp(a, prop, b[prop]);
     }
-  return a2;
+  return a;
 };
-var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -36,76 +36,7 @@ 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,7 +95,6 @@ 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)
@@ -313,11 +243,6 @@ var Box = forwardRef((_a, ref) => {
 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 +273,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 +381,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,39 +443,7 @@ 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) => {
@@ -475,11 +459,11 @@ var SVG = (_a) => {
   const { css } = useTheme();
   return jsx2("svg", __spreadValues({
     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);
 };
 export {
@@ -488,8 +472,6 @@ export {
   SVG,
   ThemeProvider,
   __defaultTheme,
-  getNormalizedStyles,
-  normalize,
   useComponentStyles,
   useResponsiveValue,
   useStateProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -27,21 +27,21 @@
   },
   "dependencies": {
     "@emotion/react": "11.9.0",
-    "@marigold/types": "0.5.1",
+    "@marigold/types": "0.5.2",
     "@theme-ui/css": "0.14.5",
-    "csstype": "3.0.11",
+    "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",
     "@marigold/tsconfig": "0.3.0",
-    "react": "17.0.2",
-    "tsup": "5.12.9"
+    "react": "18.1.0",
+    "tsup": "6.0.1"
   },
   "scripts": {
     "build": "tsup src/index.ts",