@marigold/system 5.1.0 → 5.3.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;
@@ -258,7 +259,7 @@ declare function useComponentStyles<Part extends string, Parts extends ReadonlyA
  */
 declare const useResponsiveValue: <T>(values: T[], defaultIndex?: number) => T;
 
-type ComponentState = 'hover' | 'focus' | 'focusVisible' | 'active' | 'visited' | 'disabled' | 'readOnly' | 'checked' | 'selected' | 'indeterminate' | 'expanded' | 'error';
+type ComponentState = 'hover' | 'focus' | 'focusVisible' | 'active' | 'visited' | 'disabled' | 'readOnly' | 'checked' | 'selected' | 'indeterminate' | 'expanded' | 'error' | 'hasIcon';
 type StateAttrKeyProps = `data-${KebabCase<ComponentState>}`;
 type StateAttrProps = {
     [key in StateAttrKeyProps]?: '';

package/dist/index.js

@@ -35,6 +35,7 @@ __export(src_exports, {
   SVG: () => SVG,
   ThemeProvider: () => ThemeProvider,
   __defaultTheme: () => __defaultTheme,
+  keyframes: () => import_react12.keyframes,
   useComponentStyles: () => useComponentStyles,
   useResponsiveValue: () => useResponsiveValue,
   useStateProps: () => useStateProps,
@@ -71,7 +72,8 @@ var state = {
   selected: ["[aria-selected=true]", "[data-selected]"],
   error: [":invalid", "[aria-invalid=true]", "[data-error]"],
   expanded: ["[aria-expanded=true]", "[data-expanded]"],
-  required: [":required", "[aria-required]"]
+  required: [":required", "[aria-required]"],
+  hasIcon: ["[data-has-icon]"]
 };
 var pseudos = {
   "&:hover": createteSelector([selector.self], state.hover),
@@ -86,6 +88,7 @@ var pseudos = {
   "&:error": createteSelector([selector.self], state.error),
   "&:expanded": createteSelector([selector.self], state.expanded),
   "&:required": createteSelector([selector.self], state.required),
+  "&:has-icon": createteSelector([selector.self], state.hasIcon),
   // Selector for elements that are part of a group
   "&:in-group": createteSelector(selector.grouped, state.none, selector.self),
   "&:hover-group": createteSelector(
@@ -386,11 +389,11 @@ var SVG = (0, import_react10.forwardRef)(
       {
         ...props,
         css: css({
+          width: toDimension(props.width || size),
+          height: toDimension(props.height || size),
           ...styles,
           fill,
-          flex: "0 0 auto",
-          width: toDimension(props.width || size),
-          height: toDimension(props.height || size)
+          flex: "0 0 auto"
         }),
         ref
       },
@@ -398,6 +401,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,
@@ -405,6 +411,7 @@ var SVG = (0, import_react10.forwardRef)(
   SVG,
   ThemeProvider,
   __defaultTheme,
+  keyframes,
   useComponentStyles,
   useResponsiveValue,
   useStateProps,

package/dist/index.mjs

@@ -27,7 +27,8 @@ var state = {
   selected: ["[aria-selected=true]", "[data-selected]"],
   error: [":invalid", "[aria-invalid=true]", "[data-error]"],
   expanded: ["[aria-expanded=true]", "[data-expanded]"],
-  required: [":required", "[aria-required]"]
+  required: [":required", "[aria-required]"],
+  hasIcon: ["[data-has-icon]"]
 };
 var pseudos = {
   "&:hover": createteSelector([selector.self], state.hover),
@@ -42,6 +43,7 @@ var pseudos = {
   "&:error": createteSelector([selector.self], state.error),
   "&:expanded": createteSelector([selector.self], state.expanded),
   "&:required": createteSelector([selector.self], state.required),
+  "&:has-icon": createteSelector([selector.self], state.hasIcon),
   // Selector for elements that are part of a group
   "&:in-group": createteSelector(selector.grouped, state.none, selector.self),
   "&:hover-group": createteSelector(
@@ -349,11 +351,11 @@ var SVG = forwardRef2(
       {
         ...props,
         css: css({
+          width: toDimension(props.width || size),
+          height: toDimension(props.height || size),
           ...styles,
           fill,
-          flex: "0 0 auto",
-          width: toDimension(props.width || size),
-          height: toDimension(props.height || size)
+          flex: "0 0 auto"
         }),
         ref
       },
@@ -361,12 +363,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.1.0",
+  "version": "5.3.0",
   "description": "Marigold System Library",
   "license": "MIT",
   "keywords": [
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@emotion/react": "11.10.6",
-    "@theme-ui/css": "0.15.4",
+    "@theme-ui/css": "0.15.5",
     "csstype": "3.1.1",
     "deepmerge": "^4.2.2",
     "react-fast-compare": "^3.2.0",
@@ -38,7 +38,7 @@
     "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.6.3",
     "@marigold/tsconfig": "0.4.0"