@marigold/system 1.3.0 → 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

@@ -343,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"));
@@ -434,27 +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 = ({
-  size = 24,
-  fill = "currentcolor",
-  children,
-  ...props
-}) => {
-  const { css } = useTheme();
-  return (0, import_react10.jsx)(
-    "svg",
-    {
-      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

@@ -310,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
@@ -401,27 +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 = ({
-  size = 24,
-  fill = "currentcolor",
-  children,
-  ...props
-}) => {
-  const { css } = useTheme();
-  return jsx2(
-    "svg",
-    {
-      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.3.0",
+  "version": "2.0.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -26,9 +26,9 @@
     "directory": "packages/system"
   },
   "dependencies": {
-    "@emotion/react": "11.9.3",
+    "@emotion/react": "11.10.0",
     "@marigold/types": "0.5.2",
-    "@theme-ui/css": "0.14.6",
+    "@theme-ui/css": "0.14.7",
     "csstype": "3.1.0",
     "deepmerge": "^4.2.2",
     "react-fast-compare": "^3.2.0"
@@ -38,10 +38,10 @@
     "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
-    "@babel/core": "7.18.9",
+    "@babel/core": "7.18.10",
     "@marigold/tsconfig": "0.3.0",
     "react": "18.2.0",
-    "tsup": "6.1.3"
+    "tsup": "6.2.2"
   },
   "scripts": {
     "build": "tsup src/index.ts",