@marigold/system 1.2.1 → 2.0.0

package/dist/index.d.ts

@@ -119,7 +119,9 @@ interface Theme {
      * 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;
+    root?: {
+        [key: string]: CSSObject;
+    };
     /**
      * To configure the default breakpoints used in responsive array values,
      * add a breakpoints array to your theme.
@@ -231,8 +233,9 @@ declare const Global: ({ normalizeDocument, selector }: GlobalProps) => JSX.Elem
 
 interface SVGProps extends ComponentProps<'svg'> {
     size?: number | string | number[] | string[];
+    css?: CSSObject;
 }
-declare const SVG: ({ size, fill, children, ...props }: SVGProps) => react.ReactSVGElement;
+declare const SVG: react.ForwardRefExoticComponent<SVGProps & react.RefAttributes<SVGElement>>;
 
 interface ComponentStylesProps {
     variant?: string;

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 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __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 });
@@ -45,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -71,7 +46,9 @@ var import_deepmerge = __toESM(require("deepmerge"));
 
 // src/components/Box/selector.ts
 var createteSelector = (selectors, states, suffix = "") => {
-  return selectors.map((selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)).flat().join(", ");
+  return selectors.map(
+    (selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)
+  ).flat().join(", ");
 };
 var selector = {
   self: "&",
@@ -104,10 +81,26 @@ var pseudos = {
   "&:error": createteSelector([selector.self], state.error),
   "&:expanded": createteSelector([selector.self], state.expanded),
   "&:in-group": createteSelector(selector.grouped, state.none, selector.self),
-  "&:hover-group": createteSelector(selector.grouped, state.hover, selector.self),
-  "&:focus-group": createteSelector(selector.grouped, state.focus, selector.self),
-  "&:active-group": createteSelector(selector.grouped, state.active, selector.self),
-  "&:error-group": createteSelector(selector.grouped, state.error, selector.self)
+  "&:hover-group": createteSelector(
+    selector.grouped,
+    state.hover,
+    selector.self
+  ),
+  "&:focus-group": createteSelector(
+    selector.grouped,
+    state.focus,
+    selector.self
+  ),
+  "&:active-group": createteSelector(
+    selector.grouped,
+    state.active,
+    selector.self
+  ),
+  "&:error-group": createteSelector(
+    selector.grouped,
+    state.error,
+    selector.self
+  )
 };
 var transformPseudos = (styles) => {
   let result = {};
@@ -134,8 +127,8 @@ var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
   ]);
   return transformPseudos(themedStyles);
 };
-var Box = (0, import_react.forwardRef)((_a, ref) => {
-  var _b = _a, {
+var Box = (0, import_react.forwardRef)(
+  ({
     as = "div",
     children,
     __baseCSS,
@@ -177,100 +170,62 @@ var Box = (0, import_react.forwardRef)((_a, ref) => {
     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);
-});
+    transition,
+    ...props
+  }, ref) => (0, import_react2.jsx)(
+    as,
+    {
+      ...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
+  )
+);
 
 // src/components/Global/Global.tsx
 var import_react5 = __toESM(require("react"));
@@ -284,7 +239,10 @@ var __defaultTheme = {};
 var InternalContext = (0, import_react3.createContext)(__defaultTheme);
 var useTheme = () => {
   const theme = (0, import_react3.useContext)(InternalContext);
-  const css = (0, import_react3.useCallback)((style) => (0, import_css2.css)(style)(theme), [theme]);
+  const css = (0, import_react3.useCallback)(
+    (style) => (0, import_css2.css)(style)(theme),
+    [theme]
+  );
   const get2 = (0, import_react3.useCallback)((path) => (0, import_css2.get)(theme, path), [theme]);
   return { theme, css, get: get2 };
 };
@@ -385,7 +343,8 @@ var Global = ({ normalizeDocument = true, selector: selector2 }) => {
 };
 
 // src/components/SVG/SVG.tsx
-var import_react10 = require("@emotion/react");
+var import_react10 = require("react");
+var import_react11 = require("@emotion/react");
 
 // src/hooks/useComponentStyles.ts
 var import_deepmerge2 = __toESM(require("deepmerge"));
@@ -431,11 +390,15 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
   const { theme } = useTheme();
   const breakpoints = theme.breakpoints || emptyBreakpoints;
   if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
-    throw new RangeError(`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`);
+    throw new RangeError(
+      `Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`
+    );
   }
   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 getIndex = () => breakpoints.filter(
+      (breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
+    ).length;
     const handleResize = () => {
       const newIndex = getIndex();
       if (index !== newIndex) {
@@ -472,26 +435,25 @@ var useStateProps = (states) => {
 // src/components/SVG/SVG.tsx
 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"
-  ]);
-  const { css } = useTheme();
-  return (0, import_react10.jsx)("svg", __spreadValues({
-    viewBox: "0 0 24 24",
-    css: css({
-      fill,
-      width: toDimension(props.width || size),
-      height: toDimension(props.height || size)
-    })
-  }, props), children);
-};
+var SVG = (0, import_react10.forwardRef)(
+  ({ size = 24, fill = "currentcolor", children, css: styles, ...props }, ref) => {
+    const { css } = useTheme();
+    return (0, import_react11.jsx)(
+      "svg",
+      {
+        ...props,
+        css: css({
+          ...styles,
+          fill,
+          width: toDimension(props.width || size),
+          height: toDimension(props.height || size)
+        }),
+        ref
+      },
+      children
+    );
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,

package/dist/index.mjs

@@ -1,35 +1,3 @@
-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 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __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";
@@ -38,7 +6,9 @@ import merge from "deepmerge";
 
 // src/components/Box/selector.ts
 var createteSelector = (selectors, states, suffix = "") => {
-  return selectors.map((selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)).flat().join(", ");
+  return selectors.map(
+    (selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)
+  ).flat().join(", ");
 };
 var selector = {
   self: "&",
@@ -71,10 +41,26 @@ var pseudos = {
   "&:error": createteSelector([selector.self], state.error),
   "&:expanded": createteSelector([selector.self], state.expanded),
   "&:in-group": createteSelector(selector.grouped, state.none, selector.self),
-  "&:hover-group": createteSelector(selector.grouped, state.hover, selector.self),
-  "&:focus-group": createteSelector(selector.grouped, state.focus, selector.self),
-  "&:active-group": createteSelector(selector.grouped, state.active, selector.self),
-  "&:error-group": createteSelector(selector.grouped, state.error, selector.self)
+  "&:hover-group": createteSelector(
+    selector.grouped,
+    state.hover,
+    selector.self
+  ),
+  "&:focus-group": createteSelector(
+    selector.grouped,
+    state.focus,
+    selector.self
+  ),
+  "&:active-group": createteSelector(
+    selector.grouped,
+    state.active,
+    selector.self
+  ),
+  "&:error-group": createteSelector(
+    selector.grouped,
+    state.error,
+    selector.self
+  )
 };
 var transformPseudos = (styles) => {
   let result = {};
@@ -101,8 +87,8 @@ var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
   ]);
   return transformPseudos(themedStyles);
 };
-var Box = forwardRef((_a, ref) => {
-  var _b = _a, {
+var Box = forwardRef(
+  ({
     as = "div",
     children,
     __baseCSS,
@@ -144,100 +130,62 @@ var Box = forwardRef((_a, ref) => {
     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);
-});
+    transition,
+    ...props
+  }, ref) => jsx(
+    as,
+    {
+      ...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
+  )
+);
 
 // src/components/Global/Global.tsx
 import React2 from "react";
@@ -258,7 +206,10 @@ var __defaultTheme = {};
 var InternalContext = createContext(__defaultTheme);
 var useTheme = () => {
   const theme = useContext(InternalContext);
-  const css = useCallback((style) => transformStyleObject2(style)(theme), [theme]);
+  const css = useCallback(
+    (style) => transformStyleObject2(style)(theme),
+    [theme]
+  );
   const get2 = useCallback((path) => getfromTheme(theme, path), [theme]);
   return { theme, css, get: get2 };
 };
@@ -359,6 +310,7 @@ var Global = ({ normalizeDocument = true, selector: selector2 }) => {
 };
 
 // src/components/SVG/SVG.tsx
+import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx2 } from "@emotion/react";
 
 // src/hooks/useComponentStyles.ts
@@ -405,11 +357,15 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
   const { theme } = useTheme();
   const breakpoints = theme.breakpoints || emptyBreakpoints;
   if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
-    throw new RangeError(`Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`);
+    throw new RangeError(
+      `Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`
+    );
   }
   const [index, setIndex] = useState(defaultIndex);
   useEffect(() => {
-    const getIndex = () => breakpoints.filter((breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches).length;
+    const getIndex = () => breakpoints.filter(
+      (breakpoint) => window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
+    ).length;
     const handleResize = () => {
       const newIndex = getIndex();
       if (index !== newIndex) {
@@ -446,26 +402,25 @@ var useStateProps = (states) => {
 // src/components/SVG/SVG.tsx
 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"
-  ]);
-  const { css } = useTheme();
-  return jsx2("svg", __spreadValues({
-    viewBox: "0 0 24 24",
-    css: css({
-      fill,
-      width: toDimension(props.width || size),
-      height: toDimension(props.height || size)
-    })
-  }, props), children);
-};
+var SVG = forwardRef2(
+  ({ size = 24, fill = "currentcolor", children, css: styles, ...props }, ref) => {
+    const { css } = useTheme();
+    return jsx2(
+      "svg",
+      {
+        ...props,
+        css: css({
+          ...styles,
+          fill,
+          width: toDimension(props.width || size),
+          height: toDimension(props.height || size)
+        }),
+        ref
+      },
+      children
+    );
+  }
+);
 export {
   Box,
   Global,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -26,9 +26,9 @@
     "directory": "packages/system"
   },
   "dependencies": {
-    "@emotion/react": "11.9.0",
+    "@emotion/react": "11.10.0",
     "@marigold/types": "0.5.2",
-    "@theme-ui/css": "0.14.5",
+    "@theme-ui/css": "0.14.7",
     "csstype": "3.1.0",
     "deepmerge": "^4.2.2",
     "react-fast-compare": "^3.2.0"
@@ -38,15 +38,14 @@
     "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
-    "@babel/core": "7.17.12",
+    "@babel/core": "7.18.10",
     "@marigold/tsconfig": "0.3.0",
-    "react": "18.1.0",
-    "tsup": "6.0.1"
+    "react": "18.2.0",
+    "tsup": "6.2.2"
   },
   "scripts": {
     "build": "tsup src/index.ts",
     "watch": "tsup src/index.ts --watch",
     "clean": "rm -rf node_modules && rm -rf dist"
-  },
-  "readme": "# `@marigold/system`\n\n> Marigold system\n"
+  }
 }