@marigold/system 2.1.1 → 2.2.0

package/dist/index.d.ts

@@ -208,7 +208,7 @@ interface Theme {
 interface StyleProps extends Pick<CSSObject, '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'> {
 }
 interface BoxOwnProps extends StyleProps {
-    css?: CSSObject;
+    css?: CSSObject | CSSObject[];
     /**
      * Use to set base styles for the component
      * @internal

package/dist/index.js

@@ -119,11 +119,11 @@ var transformPseudos = (styles) => {
 };
 
 // src/components/Box/Box.tsx
-var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
+var createThemedStyle = ({ __baseCSS, styles, css }) => (theme) => {
   const themedStyles = import_deepmerge.default.all([
     (0, import_css.css)(__baseCSS)(theme),
     (0, import_css.css)(styles)(theme),
-    (0, import_css.css)(css)(theme)
+    ...Array.isArray(css) ? css.map((c) => (0, import_css.css)(c)(theme)) : [(0, import_css.css)(css)(theme)]
   ]);
   return transformPseudos(themedStyles);
 };
@@ -177,7 +177,6 @@ var Box = (0, import_react.forwardRef)(
     {
       ...props,
       css: createThemedStyle({
-        as,
         __baseCSS,
         css,
         styles: {
@@ -295,6 +294,10 @@ var element = {
     display: "block",
     maxWidth: "100%"
   },
+  svg: {
+    display: "block",
+    fill: "currentColor"
+  },
   button: {
     display: "block",
     appearance: "none",
@@ -389,9 +392,9 @@ var emptyBreakpoints = ["40em", "52em", "64em"];
 var useResponsiveValue = (values, defaultIndex = 0) => {
   const { theme } = useTheme();
   const breakpoints = theme.breakpoints || emptyBreakpoints;
-  if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
+  if (defaultIndex < 0 || defaultIndex >= breakpoints.length + 1) {
     throw new RangeError(
-      `Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`
+      `Default breakpoint index is out of bounds. Theme has ${breakpoints.length + 1} breakpoints, default is ${defaultIndex}.`
     );
   }
   const [index, setIndex] = (0, import_react8.useState)(defaultIndex);
@@ -434,9 +437,9 @@ 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 ensureNumberOrToken = (value) => typeof value === "string" && /^[0-9]+$/.test(value) ? Number(value) : value;
 var SVG = (0, import_react10.forwardRef)(
-  ({ size = 24, fill = "currentcolor", children, css: styles, ...props }, ref) => {
+  ({ size = 24, fill, children, css: styles, ...props }, ref) => {
     const { css } = useTheme();
     return (0, import_react11.jsx)(
       "svg",

package/dist/index.mjs

@@ -79,11 +79,11 @@ var transformPseudos = (styles) => {
 };
 
 // src/components/Box/Box.tsx
-var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
+var createThemedStyle = ({ __baseCSS, styles, css }) => (theme) => {
   const themedStyles = merge.all([
     transformStyleObject(__baseCSS)(theme),
     transformStyleObject(styles)(theme),
-    transformStyleObject(css)(theme)
+    ...Array.isArray(css) ? css.map((c) => transformStyleObject(c)(theme)) : [transformStyleObject(css)(theme)]
   ]);
   return transformPseudos(themedStyles);
 };
@@ -137,7 +137,6 @@ var Box = forwardRef(
     {
       ...props,
       css: createThemedStyle({
-        as,
         __baseCSS,
         css,
         styles: {
@@ -262,6 +261,10 @@ var element = {
     display: "block",
     maxWidth: "100%"
   },
+  svg: {
+    display: "block",
+    fill: "currentColor"
+  },
   button: {
     display: "block",
     appearance: "none",
@@ -356,9 +359,9 @@ var emptyBreakpoints = ["40em", "52em", "64em"];
 var useResponsiveValue = (values, defaultIndex = 0) => {
   const { theme } = useTheme();
   const breakpoints = theme.breakpoints || emptyBreakpoints;
-  if (defaultIndex < 0 || defaultIndex >= breakpoints.length) {
+  if (defaultIndex < 0 || defaultIndex >= breakpoints.length + 1) {
     throw new RangeError(
-      `Default breakpoint index is out of bounds. Theme has ${breakpoints.length} breakpoints, default is ${defaultIndex}.`
+      `Default breakpoint index is out of bounds. Theme has ${breakpoints.length + 1} breakpoints, default is ${defaultIndex}.`
     );
   }
   const [index, setIndex] = useState(defaultIndex);
@@ -401,9 +404,9 @@ 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 ensureNumberOrToken = (value) => typeof value === "string" && /^[0-9]+$/.test(value) ? Number(value) : value;
 var SVG = forwardRef2(
-  ({ size = 24, fill = "currentcolor", children, css: styles, ...props }, ref) => {
+  ({ size = 24, fill, children, css: styles, ...props }, ref) => {
     const { css } = useTheme();
     return jsx2(
       "svg",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -26,8 +26,8 @@
     "directory": "packages/system"
   },
   "dependencies": {
-    "@emotion/react": "11.10.0",
-    "@marigold/types": "0.5.2",
+    "@emotion/react": "11.10.4",
+    "@marigold/types": "0.5.3",
     "@theme-ui/css": "0.14.7",
     "csstype": "3.1.0",
     "deepmerge": "^4.2.2",
@@ -38,10 +38,10 @@
     "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
-    "@babel/core": "7.18.10",
+    "@babel/core": "7.19.0",
     "@marigold/tsconfig": "0.3.0",
     "react": "18.2.0",
-    "tsup": "6.2.2"
+    "tsup": "6.2.3"
   },
   "scripts": {
     "build": "tsup src/index.ts",