@marigold/system 1.2.2 → 2.1.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

@@ -17,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
@@ -43,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: "&",
@@ -76,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 = {};
@@ -106,99 +127,105 @@ var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
   ]);
   return transformPseudos(themedStyles);
 };
-var Box = (0, import_react.forwardRef)(({
-  as = "div",
-  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,
-  ...props
-}, ref) => (0, import_react2.jsx)(as, {
-  ...props,
-  css: createThemedStyle({
-    as,
+var Box = (0, import_react.forwardRef)(
+  ({
+    as = "div",
+    children,
     __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));
+    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,
+    ...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"));
@@ -212,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 };
 };
@@ -313,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"));
@@ -359,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) {
@@ -400,23 +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

@@ -6,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: "&",
@@ -39,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 = {};
@@ -69,99 +87,105 @@ var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
   ]);
   return transformPseudos(themedStyles);
 };
-var Box = forwardRef(({
-  as = "div",
-  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,
-  ...props
-}, ref) => jsx(as, {
-  ...props,
-  css: createThemedStyle({
-    as,
+var Box = forwardRef(
+  ({
+    as = "div",
+    children,
     __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));
+    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,
+    ...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";
@@ -182,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 };
 };
@@ -283,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
@@ -329,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) {
@@ -370,23 +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.2.2",
+  "version": "2.1.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,15 +38,14 @@
     "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
-    "@babel/core": "7.18.6",
+    "@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",
     "watch": "tsup src/index.ts --watch",
     "clean": "rm -rf node_modules && rm -rf dist"
-  },
-  "readme": "# `@marigold/system`\n\n> Marigold system\n"
+  }
 }