@marigold/system 5.0.0 → 5.2.0

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { ResponsiveStyleValue as ResponsiveStyleValue$1, ThemeUIStyleObject, The
 import * as react from 'react';
 import { ReactNode } from 'react';
 import * as CSS from 'csstype';
+export { keyframes } from '@emotion/react';
 
 type ResponsiveStyleValue<T> = ResponsiveStyleValue$1<T>;
 type StyleObject = ThemeUIStyleObject;

package/dist/index.js

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -31,6 +35,7 @@ __export(src_exports, {
   SVG: () => SVG,
   ThemeProvider: () => ThemeProvider,
   __defaultTheme: () => __defaultTheme,
+  keyframes: () => import_react12.keyframes,
   useComponentStyles: () => useComponentStyles,
   useResponsiveValue: () => useResponsiveValue,
   useStateProps: () => useStateProps,
@@ -82,6 +87,7 @@ var pseudos = {
   "&:error": createteSelector([selector.self], state.error),
   "&:expanded": createteSelector([selector.self], state.expanded),
   "&:required": createteSelector([selector.self], state.required),
+  // Selector for elements that are part of a group
   "&:in-group": createteSelector(selector.grouped, state.none, selector.self),
   "&:hover-group": createteSelector(
     selector.grouped,
@@ -166,11 +172,7 @@ function ThemeProvider({
   theme,
   children
 }) {
-  return /* @__PURE__ */ import_react3.default.createElement(import_react4.ThemeProvider, {
-    theme
-  }, /* @__PURE__ */ import_react3.default.createElement(InternalContext.Provider, {
-    value: theme
-  }, children));
+  return /* @__PURE__ */ import_react3.default.createElement(import_react4.ThemeProvider, { theme }, /* @__PURE__ */ import_react3.default.createElement(InternalContext.Provider, { value: theme }, children));
 }
 
 // src/components/Global/normalize.ts
@@ -179,13 +181,25 @@ var document = {
     height: "100%"
   },
   html: {
+    /**
+     * Prevent Mobile Safari from zooming stuff ...
+     * Source: https://css-tricks.com/your-css-reset-needs-text-size-adjust-probably/
+     */
     textSizeAdjust: "none"
   },
   body: {
     lineHeight: 1.5,
     WebkitFontSmoothing: "antialiased",
+    /**
+     * We have to duplicate this here, since the "*" selector will not be
+     * applied to the body element if a custom `selector` is used.
+     */
     margin: 0
   },
+  /**
+   * CSS snippet and idea from:
+   * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
+   */
   "@media screen and (prefers-reduced-motion: reduce), (update: slow)": {
     "*": {
       animationDuration: "0.001ms !important",
@@ -211,6 +225,10 @@ var element = {
     display: "block",
     maxWidth: "100%"
   },
+  /**
+   * No `maxWidth` for SVG since this makes them responsive
+   * and will cause icons to shrink.
+   */
   svg: {
     display: "block",
     fill: "currentColor"
@@ -249,17 +267,23 @@ var element = {
 };
 
 // src/components/Global/Global.tsx
+var mergeRoot = ({ body, ...rest }) => typeof body === "object" ? {
+  ...body,
+  ...rest
+} : {
+  body,
+  ...rest
+};
 var Global = ({ normalizeDocument = true, selector: selector2 }) => {
   const { css, theme } = useTheme();
   const rootStyles = css((theme == null ? void 0 : theme.root) || {});
   const styles = [
     normalizeDocument ? document : {},
+    // Prefix normalization and root styles with selector if provided.
     selector2 ? { [`:where(${selector2})`]: element } : element,
-    selector2 ? { [`:where(${selector2})`]: rootStyles } : rootStyles
+    selector2 ? { [`:where(${selector2})`]: mergeRoot(rootStyles) } : rootStyles
   ];
-  return /* @__PURE__ */ import_react5.default.createElement(import_react6.Global, {
-    styles
-  });
+  return /* @__PURE__ */ import_react5.default.createElement(import_react6.Global, { styles });
 };
 
 // src/components/SVG/SVG.tsx
@@ -375,6 +399,9 @@ var SVG = (0, import_react10.forwardRef)(
     );
   }
 );
+
+// src/keyframes.ts
+var import_react12 = require("@emotion/react");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Box,
@@ -382,6 +409,7 @@ var SVG = (0, import_react10.forwardRef)(
   SVG,
   ThemeProvider,
   __defaultTheme,
+  keyframes,
   useComponentStyles,
   useResponsiveValue,
   useStateProps,

package/dist/index.mjs

@@ -42,6 +42,7 @@ var pseudos = {
   "&:error": createteSelector([selector.self], state.error),
   "&:expanded": createteSelector([selector.self], state.expanded),
   "&:required": createteSelector([selector.self], state.required),
+  // Selector for elements that are part of a group
   "&:in-group": createteSelector(selector.grouped, state.none, selector.self),
   "&:hover-group": createteSelector(
     selector.grouped,
@@ -133,11 +134,7 @@ function ThemeProvider({
   theme,
   children
 }) {
-  return /* @__PURE__ */ React.createElement(EmotionProvider, {
-    theme
-  }, /* @__PURE__ */ React.createElement(InternalContext.Provider, {
-    value: theme
-  }, children));
+  return /* @__PURE__ */ React.createElement(EmotionProvider, { theme }, /* @__PURE__ */ React.createElement(InternalContext.Provider, { value: theme }, children));
 }
 
 // src/components/Global/normalize.ts
@@ -146,13 +143,25 @@ var document = {
     height: "100%"
   },
   html: {
+    /**
+     * Prevent Mobile Safari from zooming stuff ...
+     * Source: https://css-tricks.com/your-css-reset-needs-text-size-adjust-probably/
+     */
     textSizeAdjust: "none"
   },
   body: {
     lineHeight: 1.5,
     WebkitFontSmoothing: "antialiased",
+    /**
+     * We have to duplicate this here, since the "*" selector will not be
+     * applied to the body element if a custom `selector` is used.
+     */
     margin: 0
   },
+  /**
+   * CSS snippet and idea from:
+   * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
+   */
   "@media screen and (prefers-reduced-motion: reduce), (update: slow)": {
     "*": {
       animationDuration: "0.001ms !important",
@@ -178,6 +187,10 @@ var element = {
     display: "block",
     maxWidth: "100%"
   },
+  /**
+   * No `maxWidth` for SVG since this makes them responsive
+   * and will cause icons to shrink.
+   */
   svg: {
     display: "block",
     fill: "currentColor"
@@ -216,17 +229,23 @@ var element = {
 };
 
 // src/components/Global/Global.tsx
+var mergeRoot = ({ body, ...rest }) => typeof body === "object" ? {
+  ...body,
+  ...rest
+} : {
+  body,
+  ...rest
+};
 var Global = ({ normalizeDocument = true, selector: selector2 }) => {
   const { css, theme } = useTheme();
   const rootStyles = css((theme == null ? void 0 : theme.root) || {});
   const styles = [
     normalizeDocument ? document : {},
+    // Prefix normalization and root styles with selector if provided.
     selector2 ? { [`:where(${selector2})`]: element } : element,
-    selector2 ? { [`:where(${selector2})`]: rootStyles } : rootStyles
+    selector2 ? { [`:where(${selector2})`]: mergeRoot(rootStyles) } : rootStyles
   ];
-  return /* @__PURE__ */ React2.createElement(EmotionGlobal, {
-    styles
-  });
+  return /* @__PURE__ */ React2.createElement(EmotionGlobal, { styles });
 };
 
 // src/components/SVG/SVG.tsx
@@ -342,12 +361,16 @@ var SVG = forwardRef2(
     );
   }
 );
+
+// src/keyframes.ts
+import { keyframes } from "@emotion/react";
 export {
   Box,
   Global,
   SVG,
   ThemeProvider,
   __defaultTheme,
+  keyframes,
   useComponentStyles,
   useResponsiveValue,
   useStateProps,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -26,8 +26,8 @@
     "directory": "packages/system"
   },
   "dependencies": {
-    "@emotion/react": "11.10.5",
-    "@theme-ui/css": "0.15.4",
+    "@emotion/react": "11.10.6",
+    "@theme-ui/css": "0.15.5",
     "csstype": "3.1.1",
     "deepmerge": "^4.2.2",
     "react-fast-compare": "^3.2.0",
@@ -38,9 +38,9 @@
     "react-dom": "16.x || 17.x || 18.x"
   },
   "devDependencies": {
-    "@babel/core": "7.20.12",
+    "@babel/core": "7.21.0",
     "react": "18.2.0",
-    "tsup": "6.5.0",
+    "tsup": "6.6.3",
     "@marigold/tsconfig": "0.4.0"
   },
   "scripts": {