@marigold/system 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import { PolymorphicPropsWithRef, PolymorphicComponentWithRef, ComponentProps } from '@marigold/types';
 import * as _theme_ui_css from '@theme-ui/css';
 import { ResponsiveStyleValue as ResponsiveStyleValue$1, ThemeUIStyleObject, ThemeUICSSObject, ThemeUICSSProperties, NestedScaleDict } from '@theme-ui/css';
-import React, { ElementType, ReactNode } from 'react';
+import * as react from 'react';
+import { ElementType, ReactNode } from 'react';
 import * as CSS from 'csstype';
 
 /**
@@ -180,9 +181,9 @@ declare const getNormalizedStyles: (val?: ElementType<any> | undefined) => {
 };
 
 interface SVGProps extends ComponentProps<'svg'> {
-    size?: number;
+    size?: number | string | number[] | string[];
 }
-declare const SVG: React.FC<SVGProps>;
+declare const SVG: ({ size, fill, children, ...props }: SVGProps) => react.ReactSVGElement;
 
 /**
  * Value used to define a scale.
@@ -344,6 +345,7 @@ declare const __defaultTheme: Theme;
 declare const useTheme: () => {
     theme: Theme;
     css: (style: StyleObject) => _theme_ui_css.CSSObject;
+    get: (path: string) => any;
 };
 interface ThemeProviderProps<T extends Theme> {
     theme: T;

package/dist/index.js

@@ -21,7 +21,6 @@ var __spreadValues = (a2, b) => {
   return a2;
 };
 var __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -38,22 +37,16 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+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
 var src_exports = {};
@@ -73,6 +66,7 @@ __export(src_exports, {
   useResponsiveValue: () => useResponsiveValue,
   useTheme: () => useTheme
 });
+module.exports = __toCommonJS(src_exports);
 
 // src/Box.tsx
 var import_react = require("@emotion/react");
@@ -328,7 +322,8 @@ 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]);
-  return { theme, css };
+  const get = (0, import_react3.useCallback)((path) => (0, import_css2.get)(theme, path), [theme]);
+  return { theme, css, get };
 };
 function ThemeProvider({
   theme,
@@ -374,6 +369,8 @@ var Global = () => {
 // src/SVG.tsx
 var import_react7 = 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,
@@ -386,10 +383,12 @@ var SVG = (_a) => {
   ]);
   const { css } = useTheme();
   return (0, import_react7.jsx)("svg", __spreadValues({
-    width: size,
-    height: size,
     viewBox: "0 0 24 24",
-    css: css(__spreadValues({ fill }, normalizedStyles))
+    css: css(__spreadProps(__spreadValues({}, normalizedStyles), {
+      fill,
+      width: toDimension(props.width || size),
+      height: toDimension(props.height || size)
+    }))
   }, props), children);
 };
 
@@ -417,7 +416,6 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
   }, [breakpoints, index]);
   return values[index >= values.length ? values.length - 1 : index];
 };
-module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,

package/dist/index.mjs

@@ -281,14 +281,18 @@ import React, {
   useCallback,
   useContext
 } from "react";
-import { css as transformStyleObject2 } from "@theme-ui/css";
+import {
+  css as transformStyleObject2,
+  get as getfromTheme
+} from "@theme-ui/css";
 import { ThemeProvider as EmotionProvider } from "@emotion/react";
 var __defaultTheme = {};
 var InternalContext = createContext(__defaultTheme);
 var useTheme = () => {
   const theme = useContext(InternalContext);
   const css = useCallback((style) => transformStyleObject2(style)(theme), [theme]);
-  return { theme, css };
+  const get = useCallback((path) => getfromTheme(theme, path), [theme]);
+  return { theme, css, get };
 };
 function ThemeProvider({
   theme,
@@ -334,6 +338,8 @@ var Global = () => {
 // src/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,
@@ -346,10 +352,12 @@ var SVG = (_a) => {
   ]);
   const { css } = useTheme();
   return jsx2("svg", __spreadValues({
-    width: size,
-    height: size,
     viewBox: "0 0 24 24",
-    css: css(__spreadValues({ fill }, normalizedStyles))
+    css: css(__spreadProps(__spreadValues({}, normalizedStyles), {
+      fill,
+      width: toDimension(props.width || size),
+      height: toDimension(props.height || size)
+    }))
   }, props), children);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -26,9 +26,9 @@
     "directory": "packages/system"
   },
   "dependencies": {
-    "@emotion/react": "11.7.1",
+    "@emotion/react": "11.8.2",
     "@marigold/types": "0.4.0",
-    "@theme-ui/css": "0.13.1",
+    "@theme-ui/css": "0.14.2",
     "csstype": "3.0.11"
   },
   "peerDependencies": {
@@ -37,7 +37,7 @@
   },
   "devDependencies": {
     "@marigold/tsconfig": "0.3.0",
-    "tsup": "5.11.13"
+    "tsup": "5.12.4"
   },
   "scripts": {
     "build": "tsup src/index.ts",