@marigold/system 2.1.3 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.d.ts +1 -1
  2. package/dist/index.js +4 -5
  3. package/dist/index.mjs +4 -5
  4. package/package.json +5 -5
package/dist/index.d.ts CHANGED
@@ -208,7 +208,7 @@ interface Theme {
208
208
  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'> {
209
209
  }
210
210
  interface BoxOwnProps extends StyleProps {
211
- css?: CSSObject;
211
+ css?: CSSObject | CSSObject[];
212
212
  /**
213
213
  * Use to set base styles for the component
214
214
  * @internal
package/dist/index.js CHANGED
@@ -56,7 +56,7 @@ var selector = {
56
56
  };
57
57
  var state = {
58
58
  none: [""],
59
- hover: [":hover", "[data-hover]"],
59
+ hover: [":hover:not([disabled])", "[data-hover]"],
60
60
  focus: [":focus", "[data-focus]"],
61
61
  focusVisible: [":focus-visible", "[data-focus-visible]"],
62
62
  active: [":active", "[data-active]"],
@@ -119,11 +119,11 @@ var transformPseudos = (styles) => {
119
119
  };
120
120
 
121
121
  // src/components/Box/Box.tsx
122
- var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
122
+ var createThemedStyle = ({ __baseCSS, styles, css }) => (theme) => {
123
123
  const themedStyles = import_deepmerge.default.all([
124
124
  (0, import_css.css)(__baseCSS)(theme),
125
125
  (0, import_css.css)(styles)(theme),
126
- (0, import_css.css)(css)(theme)
126
+ ...Array.isArray(css) ? css.map((c) => (0, import_css.css)(c)(theme)) : [(0, import_css.css)(css)(theme)]
127
127
  ]);
128
128
  return transformPseudos(themedStyles);
129
129
  };
@@ -177,7 +177,6 @@ var Box = (0, import_react.forwardRef)(
177
177
  {
178
178
  ...props,
179
179
  css: createThemedStyle({
180
- as,
181
180
  __baseCSS,
182
181
  css,
183
182
  styles: {
@@ -438,7 +437,7 @@ var useStateProps = (states) => {
438
437
 
439
438
  // src/components/SVG/SVG.tsx
440
439
  var toDimension = (value) => Array.isArray(value) ? value.map(ensureNumberOrToken) : ensureNumberOrToken(value);
441
- var ensureNumberOrToken = (value) => typeof value === "string" && /[0-9]+/.test(value) ? Number(value) : value;
440
+ var ensureNumberOrToken = (value) => typeof value === "string" && /^[0-9]+$/.test(value) ? Number(value) : value;
442
441
  var SVG = (0, import_react10.forwardRef)(
443
442
  ({ size = 24, fill, children, css: styles, ...props }, ref) => {
444
443
  const { css } = useTheme();
package/dist/index.mjs CHANGED
@@ -16,7 +16,7 @@ var selector = {
16
16
  };
17
17
  var state = {
18
18
  none: [""],
19
- hover: [":hover", "[data-hover]"],
19
+ hover: [":hover:not([disabled])", "[data-hover]"],
20
20
  focus: [":focus", "[data-focus]"],
21
21
  focusVisible: [":focus-visible", "[data-focus-visible]"],
22
22
  active: [":active", "[data-active]"],
@@ -79,11 +79,11 @@ var transformPseudos = (styles) => {
79
79
  };
80
80
 
81
81
  // src/components/Box/Box.tsx
82
- var createThemedStyle = ({ as, __baseCSS, styles, css }) => (theme) => {
82
+ var createThemedStyle = ({ __baseCSS, styles, css }) => (theme) => {
83
83
  const themedStyles = merge.all([
84
84
  transformStyleObject(__baseCSS)(theme),
85
85
  transformStyleObject(styles)(theme),
86
- transformStyleObject(css)(theme)
86
+ ...Array.isArray(css) ? css.map((c) => transformStyleObject(c)(theme)) : [transformStyleObject(css)(theme)]
87
87
  ]);
88
88
  return transformPseudos(themedStyles);
89
89
  };
@@ -137,7 +137,6 @@ var Box = forwardRef(
137
137
  {
138
138
  ...props,
139
139
  css: createThemedStyle({
140
- as,
141
140
  __baseCSS,
142
141
  css,
143
142
  styles: {
@@ -405,7 +404,7 @@ var useStateProps = (states) => {
405
404
 
406
405
  // src/components/SVG/SVG.tsx
407
406
  var toDimension = (value) => Array.isArray(value) ? value.map(ensureNumberOrToken) : ensureNumberOrToken(value);
408
- var ensureNumberOrToken = (value) => typeof value === "string" && /[0-9]+/.test(value) ? Number(value) : value;
407
+ var ensureNumberOrToken = (value) => typeof value === "string" && /^[0-9]+$/.test(value) ? Number(value) : value;
409
408
  var SVG = forwardRef2(
410
409
  ({ size = 24, fill, children, css: styles, ...props }, ref) => {
411
410
  const { css } = useTheme();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marigold/system",
3
- "version": "2.1.3",
3
+ "version": "3.0.0",
4
4
  "description": "Marigold System Library",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -26,8 +26,8 @@
26
26
  "directory": "packages/system"
27
27
  },
28
28
  "dependencies": {
29
- "@emotion/react": "11.10.0",
30
- "@marigold/types": "0.5.2",
29
+ "@emotion/react": "11.10.4",
30
+ "@marigold/types": "0.5.3",
31
31
  "@theme-ui/css": "0.14.7",
32
32
  "csstype": "3.1.0",
33
33
  "deepmerge": "^4.2.2",
@@ -38,10 +38,10 @@
38
38
  "react-dom": "16.x || 17.x || 18.x"
39
39
  },
40
40
  "devDependencies": {
41
- "@babel/core": "7.18.13",
41
+ "@babel/core": "7.19.0",
42
42
  "@marigold/tsconfig": "0.3.0",
43
43
  "react": "18.2.0",
44
- "tsup": "6.2.2"
44
+ "tsup": "6.2.3"
45
45
  },
46
46
  "scripts": {
47
47
  "build": "tsup src/index.ts",