@xstyled/styled-components - npm Package Compare versions

Comparing version 1.20.0-alpha.1 to 2.0.0-alpha.0

dist/breakpoints.d.ts

@@ -0,5 +1,6 @@
+/// <reference types="react" />
 export { useViewportWidth } from '@xstyled/core';
-export declare function useBreakpoints(): import("@xstyled/system/dist/media").Breakpoints;
+export declare function useBreakpoints(): Record<import("react").ReactText, number>;
 export declare function useBreakpoint(): string | null;
 export declare function useUp(key: string | number): boolean;
 export declare function useDown(key: string | number): boolean;

dist/index.d.ts

 export { isStyledComponent, keyframes, ServerStyleSheet, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, withTheme, } from 'styled-components';
 export { css } from './css';
 export { createGlobalStyle } from './createGlobalStyle';
-export { Box, styled as default, InnerBox } from './styled';
+export { styled as default } from './styled';
+export * from './x';
+export * from './createX';
 export * from './colorModes';
 export * from './theme';
 export * from './breakpoints';
+export * from './preflight';
 export * from '@xstyled/system';

dist/styled-components.cjs.development.js

@@ -7,12 +7,12 @@ 'use strict';
 
-var scStyled = require('styled-components');
-var scStyled__default = _interopDefault(scStyled);
+var styled$1 = require('styled-components');
+var styled$1__default = _interopDefault(styled$1);
 var util = require('@xstyled/util');
 var core = require('@xstyled/core');
-var React = require('react');
 var system = require('@xstyled/system');
+var react = require('react');
 
 /* eslint-disable no-continue, no-loop-func, no-cond-assign */
 function css() {
-  var scCssArgs = scStyled.css.apply(void 0, arguments);
+  var scCssArgs = styled$1.css.apply(void 0, arguments);
   var flattenedArgs = util.flattenStrings(scCssArgs);
@@ -24,3 +24,3 @@ return flattenedArgs.map(core.transform);
   // @ts-ignore
-  return scStyled.createGlobalStyle([css.apply(void 0, arguments)]);
+  return styled$1.createGlobalStyle([css.apply(void 0, arguments)]);
 };
@@ -37,2 +37,33 @@
 
+/* eslint-disable no-continue, no-loop-func, no-cond-assign */
+var tags = /*#__PURE__*/Object.keys(styled$1__default);
+var createX = function createX(generator) {
+  // @ts-ignore
+  var x = {
+    extend: function extend() {
+      for (var _len = arguments.length, generators = new Array(_len), _key = 0; _key < _len; _key++) {
+        generators[_key] = arguments[_key];
+      }
+
+      return createX(system.compose.apply(void 0, [generator].concat(generators)));
+    }
+  };
+  tags.forEach(function (tag) {
+    // @ts-ignore
+    x[tag] = styled$1__default(tag).withConfig({
+      shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
+        if (typeof prop === 'string' && generator.meta.props.includes(prop)) return false;
+        return defaultValidatorFn(prop);
+      }
+    })(function () {
+      return ["&&{", generator, "}"];
+    });
+  });
+  return x;
+};
+
+var x = /*#__PURE__*/createX(system.system); // Retro-compatibility
+
+var Box = x.div;
+
 function _templateObject() {
@@ -68,14 +99,11 @@ var data = _taggedTemplateLiteralLoose(["", ""]);
 var styled = function styled(component) {
-  return getCreateStyle(scStyled__default(component));
-};
-var InnerBox = /*#__PURE__*/system.createSystemComponent(React, 'div');
-var Box = /*#__PURE__*/styled(InnerBox)(core.createBox); // @ts-ignore
+  return getCreateStyle(styled$1__default(component));
+}; // @ts-ignore
 
-styled.box = /*#__PURE__*/styled(Box);
-Object.keys(scStyled__default).forEach(function (key) {
+styled.box = /*#__PURE__*/styled(x.div);
+Object.keys(styled$1__default).forEach(function (key) {
   // @ts-ignore
   styled[key] = styled(key); // @ts-ignore
 
-  styled[key + "Box"] = styled( // @ts-ignore
-  Box.withComponent(system.createSystemComponent(React, key)));
+  styled[key + "Box"] = styled(x[key]);
 });
@@ -92,3 +120,3 @@
 }
-var ColorModeStyle = /*#__PURE__*/scStyled.createGlobalStyle( /*#__PURE__*/_templateObject$1(), function (p) {
+var ColorModeStyle = /*#__PURE__*/styled$1.createGlobalStyle( /*#__PURE__*/_templateObject$1(), function (p) {
   return core.createColorStyles(p.theme, {
@@ -99,11 +127,50 @@ targetSelector: p.targetSelector
 var ColorModeProvider = /*#__PURE__*/core.createColorModeProvider({
-  ThemeContext: scStyled.ThemeContext,
-  ThemeProvider: scStyled.ThemeProvider,
+  ThemeContext: styled$1.ThemeContext,
+  ThemeProvider: styled$1.ThemeProvider,
   ColorModeStyle: ColorModeStyle
 });
 
-function useTheme() {
-  return React.useContext(scStyled.ThemeContext);
-}
+var useTheme = function useTheme() {
+  return react.useContext(styled$1.ThemeContext);
+};
 
+var createUseGetter = function createUseGetter(getter) {
+  return function (value, defaultValue) {
+    var theme = useTheme();
+    return react.useMemo(function () {
+      return getter(value, defaultValue)({
+        theme: theme
+      });
+    }, [value, defaultValue, theme]);
+  };
+};
+
+var useTh = /*#__PURE__*/createUseGetter(system.th);
+var useAngle = /*#__PURE__*/createUseGetter(system.th.angle);
+var useAnimation = /*#__PURE__*/createUseGetter(system.th.animation);
+var useBorder = /*#__PURE__*/createUseGetter(system.th.border);
+var useBorderColor = /*#__PURE__*/createUseGetter(system.th.borderColor);
+var useBorderStyle = /*#__PURE__*/createUseGetter(system.th.borderStyle);
+var useBorderWidth = /*#__PURE__*/createUseGetter(system.th.borderWidth);
+var useColor = /*#__PURE__*/createUseGetter(system.th.color);
+var useDuration = /*#__PURE__*/createUseGetter(system.th.duration);
+var useFont = /*#__PURE__*/createUseGetter(system.th.font);
+var useFontSize = /*#__PURE__*/createUseGetter(system.th.fontSize);
+var useFontWeight = /*#__PURE__*/createUseGetter(system.th.fontWeight);
+var useInset = /*#__PURE__*/createUseGetter(system.th.inset);
+var useLetterSpacing = /*#__PURE__*/createUseGetter(system.th.letterSpacing);
+var useLineHeight = /*#__PURE__*/createUseGetter(system.th.lineHeight);
+var usePercent = /*#__PURE__*/createUseGetter(system.th.percent);
+var usePx = /*#__PURE__*/createUseGetter(system.th.px);
+var useRadius = /*#__PURE__*/createUseGetter(system.th.radius);
+var useRingWidth = /*#__PURE__*/createUseGetter(system.th.ringWidth);
+var useShadow = /*#__PURE__*/createUseGetter(system.th.shadow);
+var useSize = /*#__PURE__*/createUseGetter(system.th.size);
+var useSpace = /*#__PURE__*/createUseGetter(system.th.space);
+var useTimingFunctions = /*#__PURE__*/createUseGetter(system.th.timingFunctions);
+var useTransform = /*#__PURE__*/createUseGetter(system.th.transform);
+var useTransition = /*#__PURE__*/createUseGetter(system.th.transition);
+var useTransitionProperty = /*#__PURE__*/createUseGetter(system.th.transitionProperty);
+var useZIndex = /*#__PURE__*/createUseGetter(system.th.zIndex);
+
 function useBreakpoints() {
@@ -122,2 +189,6 @@ return core.useThemeBreakpoints(useTheme());
 
+var Preflight = /*#__PURE__*/system.createPreflight({
+  createGlobalStyle: styled$1.createGlobalStyle
+});
+
 Object.keys(system).forEach(function (k) {
@@ -134,3 +205,3 @@ if (k !== 'default') Object.defineProperty(exports, k, {
   get: function () {
-    return scStyled.ServerStyleSheet;
+    return styled$1.ServerStyleSheet;
   }
@@ -141,3 +212,3 @@ });
   get: function () {
-    return scStyled.StyleSheetManager;
+    return styled$1.StyleSheetManager;
   }
@@ -148,3 +219,3 @@ });
   get: function () {
-    return scStyled.ThemeConsumer;
+    return styled$1.ThemeConsumer;
   }
@@ -155,3 +226,3 @@ });
   get: function () {
-    return scStyled.ThemeContext;
+    return styled$1.ThemeContext;
   }
@@ -162,3 +233,3 @@ });
   get: function () {
-    return scStyled.ThemeProvider;
+    return styled$1.ThemeProvider;
   }
@@ -169,3 +240,3 @@ });
   get: function () {
-    return scStyled.isStyledComponent;
+    return styled$1.isStyledComponent;
   }
@@ -176,3 +247,3 @@ });
   get: function () {
-    return scStyled.keyframes;
+    return styled$1.keyframes;
   }
@@ -183,3 +254,3 @@ });
   get: function () {
-    return scStyled.withTheme;
+    return styled$1.withTheme;
   }
@@ -213,11 +284,40 @@ });
 exports.ColorModeProvider = ColorModeProvider;
-exports.InnerBox = InnerBox;
+exports.Preflight = Preflight;
 exports.createGlobalStyle = createGlobalStyle;
+exports.createX = createX;
 exports.css = css;
 exports.default = styled;
+exports.useAngle = useAngle;
+exports.useAnimation = useAnimation;
+exports.useBorder = useBorder;
+exports.useBorderColor = useBorderColor;
+exports.useBorderStyle = useBorderStyle;
+exports.useBorderWidth = useBorderWidth;
 exports.useBreakpoint = useBreakpoint;
 exports.useBreakpoints = useBreakpoints;
+exports.useColor = useColor;
 exports.useDown = useDown;
+exports.useDuration = useDuration;
+exports.useFont = useFont;
+exports.useFontSize = useFontSize;
+exports.useFontWeight = useFontWeight;
+exports.useInset = useInset;
+exports.useLetterSpacing = useLetterSpacing;
+exports.useLineHeight = useLineHeight;
+exports.usePercent = usePercent;
+exports.usePx = usePx;
+exports.useRadius = useRadius;
+exports.useRingWidth = useRingWidth;
+exports.useShadow = useShadow;
+exports.useSize = useSize;
+exports.useSpace = useSpace;
+exports.useTh = useTh;
 exports.useTheme = useTheme;
+exports.useTimingFunctions = useTimingFunctions;
+exports.useTransform = useTransform;
+exports.useTransition = useTransition;
+exports.useTransitionProperty = useTransitionProperty;
 exports.useUp = useUp;
+exports.useZIndex = useZIndex;
+exports.x = x;
 //# sourceMappingURL=styled-components.cjs.development.js.map

dist/styled-components.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("styled-components"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("@xstyled/util"),o=require("@xstyled/core"),u=require("react"),i=require("@xstyled/system");function c(){var e=t.css.apply(void 0,arguments),r=n.flattenStrings(e);return r.map(o.transform)}function s(e,t){return t||(t=e.slice(0)),e.raw=t,e}function p(){var e=s(["",""]);return p=function(){return e},e}var a=function(e){return function e(t){var r=function(){return t(p(),c.apply(void 0,arguments))};return r.attrs=function(r){return e(t.attrs(r))},r.withConfig=function(r){return e(t.withConfig(r))},r}(r(e))},f=i.createSystemComponent(u,"div"),l=a(f)(o.createBox);function m(){var e=s(["",""]);return m=function(){return e},e}a.box=a(l),Object.keys(r).forEach((function(e){a[e]=a(e),a[e+"Box"]=a(l.withComponent(i.createSystemComponent(u,e)))}));var d=t.createGlobalStyle(m(),(function(e){return o.createColorStyles(e.theme,{targetSelector:e.targetSelector})})),y=o.createColorModeProvider({ThemeContext:t.ThemeContext,ThemeProvider:t.ThemeProvider,ColorModeStyle:d});function x(){return u.useContext(t.ThemeContext)}Object.keys(i).forEach((function(e){"default"!==e&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return i[e]}})})),Object.defineProperty(exports,"ServerStyleSheet",{enumerable:!0,get:function(){return t.ServerStyleSheet}}),Object.defineProperty(exports,"StyleSheetManager",{enumerable:!0,get:function(){return t.StyleSheetManager}}),Object.defineProperty(exports,"ThemeConsumer",{enumerable:!0,get:function(){return t.ThemeConsumer}}),Object.defineProperty(exports,"ThemeContext",{enumerable:!0,get:function(){return t.ThemeContext}}),Object.defineProperty(exports,"ThemeProvider",{enumerable:!0,get:function(){return t.ThemeProvider}}),Object.defineProperty(exports,"isStyledComponent",{enumerable:!0,get:function(){return t.isStyledComponent}}),Object.defineProperty(exports,"keyframes",{enumerable:!0,get:function(){return t.keyframes}}),Object.defineProperty(exports,"withTheme",{enumerable:!0,get:function(){return t.withTheme}}),Object.defineProperty(exports,"getColorModeInitScriptElement",{enumerable:!0,get:function(){return o.getColorModeInitScriptElement}}),Object.defineProperty(exports,"getColorModeInitScriptTag",{enumerable:!0,get:function(){return o.getColorModeInitScriptTag}}),Object.defineProperty(exports,"useColorMode",{enumerable:!0,get:function(){return o.useColorMode}}),Object.defineProperty(exports,"useViewportWidth",{enumerable:!0,get:function(){return o.useViewportWidth}}),exports.Box=l,exports.ColorModeProvider=y,exports.InnerBox=f,exports.createGlobalStyle=function(){return t.createGlobalStyle([c.apply(void 0,arguments)])},exports.css=c,exports.default=a,exports.useBreakpoint=function(){return o.useThemeBreakpoint(x())},exports.useBreakpoints=function(){return o.useThemeBreakpoints(x())},exports.useDown=function(e){return o.useThemeDown(x(),e)},exports.useTheme=x,exports.useUp=function(e){return o.useThemeUp(x(),e)};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("styled-components"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=require("@xstyled/util"),n=require("@xstyled/core"),u=require("@xstyled/system"),s=require("react");function i(){var e=t.css.apply(void 0,arguments),r=o.flattenStrings(e);return r.map(n.transform)}function p(e,t){return t||(t=e.slice(0)),e.raw=t,e}var c=Object.keys(r),a=function e(t){var o={extend:function(){for(var r=arguments.length,o=new Array(r),n=0;n<r;n++)o[n]=arguments[n];return e(u.compose.apply(void 0,[t].concat(o)))}};return c.forEach((function(e){o[e]=r(e).withConfig({shouldForwardProp:function(e,r){return("string"!=typeof e||!t.meta.props.includes(e))&&r(e)}})((function(){return["&&{",t,"}"]}))})),o},l=a(u.system),f=l.div;function h(){var e=p(["",""]);return h=function(){return e},e}var x=function(e){return function e(t){var r=function(){return t(h(),i.apply(void 0,arguments))};return r.attrs=function(r){return e(t.attrs(r))},r.withConfig=function(r){return e(t.withConfig(r))},r}(r(e))};function d(){var e=p(["",""]);return d=function(){return e},e}x.box=x(l.div),Object.keys(r).forEach((function(e){x[e]=x(e),x[e+"Box"]=x(l[e])}));var m=t.createGlobalStyle(d(),(function(e){return n.createColorStyles(e.theme,{targetSelector:e.targetSelector})})),y=n.createColorModeProvider({ThemeContext:t.ThemeContext,ThemeProvider:t.ThemeProvider,ColorModeStyle:m}),g=function(){return s.useContext(t.ThemeContext)},b=function(e){return function(t,r){var o=g();return s.useMemo((function(){return e(t,r)({theme:o})}),[t,r,o])}},S=b(u.th),P=b(u.th.angle),v=b(u.th.animation),C=b(u.th.border),T=b(u.th.borderColor),j=b(u.th.borderStyle),O=b(u.th.borderWidth),w=b(u.th.color),M=b(u.th.duration),B=b(u.th.font),k=b(u.th.fontSize),W=b(u.th.fontWeight),I=b(u.th.inset),F=b(u.th.letterSpacing),q=b(u.th.lineHeight),z=b(u.th.percent),E=b(u.th.px),G=b(u.th.radius),A=b(u.th.ringWidth),D=b(u.th.shadow),H=b(u.th.size),L=b(u.th.space),R=b(u.th.timingFunctions),U=b(u.th.transform),V=b(u.th.transition),_=b(u.th.transitionProperty),X=b(u.th.zIndex),Z=u.createPreflight({createGlobalStyle:t.createGlobalStyle});Object.keys(u).forEach((function(e){"default"!==e&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return u[e]}})})),Object.defineProperty(exports,"ServerStyleSheet",{enumerable:!0,get:function(){return t.ServerStyleSheet}}),Object.defineProperty(exports,"StyleSheetManager",{enumerable:!0,get:function(){return t.StyleSheetManager}}),Object.defineProperty(exports,"ThemeConsumer",{enumerable:!0,get:function(){return t.ThemeConsumer}}),Object.defineProperty(exports,"ThemeContext",{enumerable:!0,get:function(){return t.ThemeContext}}),Object.defineProperty(exports,"ThemeProvider",{enumerable:!0,get:function(){return t.ThemeProvider}}),Object.defineProperty(exports,"isStyledComponent",{enumerable:!0,get:function(){return t.isStyledComponent}}),Object.defineProperty(exports,"keyframes",{enumerable:!0,get:function(){return t.keyframes}}),Object.defineProperty(exports,"withTheme",{enumerable:!0,get:function(){return t.withTheme}}),Object.defineProperty(exports,"getColorModeInitScriptElement",{enumerable:!0,get:function(){return n.getColorModeInitScriptElement}}),Object.defineProperty(exports,"getColorModeInitScriptTag",{enumerable:!0,get:function(){return n.getColorModeInitScriptTag}}),Object.defineProperty(exports,"useColorMode",{enumerable:!0,get:function(){return n.useColorMode}}),Object.defineProperty(exports,"useViewportWidth",{enumerable:!0,get:function(){return n.useViewportWidth}}),exports.Box=f,exports.ColorModeProvider=y,exports.Preflight=Z,exports.createGlobalStyle=function(){return t.createGlobalStyle([i.apply(void 0,arguments)])},exports.createX=a,exports.css=i,exports.default=x,exports.useAngle=P,exports.useAnimation=v,exports.useBorder=C,exports.useBorderColor=T,exports.useBorderStyle=j,exports.useBorderWidth=O,exports.useBreakpoint=function(){return n.useThemeBreakpoint(g())},exports.useBreakpoints=function(){return n.useThemeBreakpoints(g())},exports.useColor=w,exports.useDown=function(e){return n.useThemeDown(g(),e)},exports.useDuration=M,exports.useFont=B,exports.useFontSize=k,exports.useFontWeight=W,exports.useInset=I,exports.useLetterSpacing=F,exports.useLineHeight=q,exports.usePercent=z,exports.usePx=E,exports.useRadius=G,exports.useRingWidth=A,exports.useShadow=D,exports.useSize=H,exports.useSpace=L,exports.useTh=S,exports.useTheme=g,exports.useTimingFunctions=R,exports.useTransform=U,exports.useTransition=V,exports.useTransitionProperty=_,exports.useUp=function(e){return n.useThemeUp(g(),e)},exports.useZIndex=X,exports.x=l;
 //# sourceMappingURL=styled-components.cjs.production.min.js.map

dist/styled-components.esm.js

@@ -1,10 +0,9 @@
-import scStyled, { css as css$1, createGlobalStyle as createGlobalStyle$1, ThemeContext, ThemeProvider } from 'styled-components';
+import styled$1, { css as css$1, createGlobalStyle as createGlobalStyle$1, ThemeContext, ThemeProvider } from 'styled-components';
 export { ServerStyleSheet, StyleSheetManager, ThemeConsumer, ThemeContext, ThemeProvider, isStyledComponent, keyframes, withTheme } from 'styled-components';
 import { flattenStrings } from '@xstyled/util';
-import { transform, createBox, createColorModeProvider, createColorStyles, useThemeBreakpoints, useThemeBreakpoint, useThemeUp, useThemeDown } from '@xstyled/core';
+import { transform, createColorModeProvider, createColorStyles, useThemeBreakpoints, useThemeBreakpoint, useThemeUp, useThemeDown } from '@xstyled/core';
 export { getColorModeInitScriptElement, getColorModeInitScriptTag, useColorMode, useViewportWidth } from '@xstyled/core';
-import * as React from 'react';
-import { useContext } from 'react';
-import { createSystemComponent } from '@xstyled/system';
+import { compose, system, th, createPreflight } from '@xstyled/system';
 export * from '@xstyled/system';
+import { useContext, useMemo } from 'react';
 
@@ -32,2 +31,33 @@ /* eslint-disable no-continue, no-loop-func, no-cond-assign */
 
+/* eslint-disable no-continue, no-loop-func, no-cond-assign */
+var tags = /*#__PURE__*/Object.keys(styled$1);
+var createX = function createX(generator) {
+  // @ts-ignore
+  var x = {
+    extend: function extend() {
+      for (var _len = arguments.length, generators = new Array(_len), _key = 0; _key < _len; _key++) {
+        generators[_key] = arguments[_key];
+      }
+
+      return createX(compose.apply(void 0, [generator].concat(generators)));
+    }
+  };
+  tags.forEach(function (tag) {
+    // @ts-ignore
+    x[tag] = styled$1(tag).withConfig({
+      shouldForwardProp: function shouldForwardProp(prop, defaultValidatorFn) {
+        if (typeof prop === 'string' && generator.meta.props.includes(prop)) return false;
+        return defaultValidatorFn(prop);
+      }
+    })(function () {
+      return ["&&{", generator, "}"];
+    });
+  });
+  return x;
+};
+
+var x = /*#__PURE__*/createX(system); // Retro-compatibility
+
+var Box = x.div;
+
 function _templateObject() {
@@ -63,14 +93,11 @@ var data = _taggedTemplateLiteralLoose(["", ""]);
 var styled = function styled(component) {
-  return getCreateStyle(scStyled(component));
-};
-var InnerBox = /*#__PURE__*/createSystemComponent(React, 'div');
-var Box = /*#__PURE__*/styled(InnerBox)(createBox); // @ts-ignore
+  return getCreateStyle(styled$1(component));
+}; // @ts-ignore
 
-styled.box = /*#__PURE__*/styled(Box);
-Object.keys(scStyled).forEach(function (key) {
+styled.box = /*#__PURE__*/styled(x.div);
+Object.keys(styled$1).forEach(function (key) {
   // @ts-ignore
   styled[key] = styled(key); // @ts-ignore
 
-  styled[key + "Box"] = styled( // @ts-ignore
-  Box.withComponent(createSystemComponent(React, key)));
+  styled[key + "Box"] = styled(x[key]);
 });
@@ -98,6 +125,45 @@
 
-function useTheme() {
+var useTheme = function useTheme() {
   return useContext(ThemeContext);
-}
+};
 
+var createUseGetter = function createUseGetter(getter) {
+  return function (value, defaultValue) {
+    var theme = useTheme();
+    return useMemo(function () {
+      return getter(value, defaultValue)({
+        theme: theme
+      });
+    }, [value, defaultValue, theme]);
+  };
+};
+
+var useTh = /*#__PURE__*/createUseGetter(th);
+var useAngle = /*#__PURE__*/createUseGetter(th.angle);
+var useAnimation = /*#__PURE__*/createUseGetter(th.animation);
+var useBorder = /*#__PURE__*/createUseGetter(th.border);
+var useBorderColor = /*#__PURE__*/createUseGetter(th.borderColor);
+var useBorderStyle = /*#__PURE__*/createUseGetter(th.borderStyle);
+var useBorderWidth = /*#__PURE__*/createUseGetter(th.borderWidth);
+var useColor = /*#__PURE__*/createUseGetter(th.color);
+var useDuration = /*#__PURE__*/createUseGetter(th.duration);
+var useFont = /*#__PURE__*/createUseGetter(th.font);
+var useFontSize = /*#__PURE__*/createUseGetter(th.fontSize);
+var useFontWeight = /*#__PURE__*/createUseGetter(th.fontWeight);
+var useInset = /*#__PURE__*/createUseGetter(th.inset);
+var useLetterSpacing = /*#__PURE__*/createUseGetter(th.letterSpacing);
+var useLineHeight = /*#__PURE__*/createUseGetter(th.lineHeight);
+var usePercent = /*#__PURE__*/createUseGetter(th.percent);
+var usePx = /*#__PURE__*/createUseGetter(th.px);
+var useRadius = /*#__PURE__*/createUseGetter(th.radius);
+var useRingWidth = /*#__PURE__*/createUseGetter(th.ringWidth);
+var useShadow = /*#__PURE__*/createUseGetter(th.shadow);
+var useSize = /*#__PURE__*/createUseGetter(th.size);
+var useSpace = /*#__PURE__*/createUseGetter(th.space);
+var useTimingFunctions = /*#__PURE__*/createUseGetter(th.timingFunctions);
+var useTransform = /*#__PURE__*/createUseGetter(th.transform);
+var useTransition = /*#__PURE__*/createUseGetter(th.transition);
+var useTransitionProperty = /*#__PURE__*/createUseGetter(th.transitionProperty);
+var useZIndex = /*#__PURE__*/createUseGetter(th.zIndex);
+
 function useBreakpoints() {
@@ -116,4 +182,8 @@ return useThemeBreakpoints(useTheme());
 
+var Preflight = /*#__PURE__*/createPreflight({
+  createGlobalStyle: createGlobalStyle$1
+});
+
 export default styled;
-export { Box, ColorModeProvider, InnerBox, createGlobalStyle, css, useBreakpoint, useBreakpoints, useDown, useTheme, useUp };
+export { Box, ColorModeProvider, Preflight, createGlobalStyle, createX, css, useAngle, useAnimation, useBorder, useBorderColor, useBorderStyle, useBorderWidth, useBreakpoint, useBreakpoints, useColor, useDown, useDuration, useFont, useFontSize, useFontWeight, useInset, useLetterSpacing, useLineHeight, usePercent, usePx, useRadius, useRingWidth, useShadow, useSize, useSpace, useTh, useTheme, useTimingFunctions, useTransform, useTransition, useTransitionProperty, useUp, useZIndex, x };
 //# sourceMappingURL=styled-components.esm.js.map

dist/styled.d.ts

 import { ThemedStyledFunction, ThemedBaseStyledInterface, DefaultTheme } from 'styled-components';
 import { SystemProps } from '@xstyled/system';
-import { BoxElements } from './types';
+import { BoxElements } from './BoxElements';
 declare type ThemedXStyledComponentFactories<T extends object> = {
@@ -11,4 +11,2 @@ [Key in keyof BoxElements]: ThemedStyledFunction<BoxElements[Key], T, SystemProps<T>>;
 export declare const styled: XStyledInterface;
-export declare const InnerBox: import("@xstyled/system").ComponentWithAs<SystemProps<DefaultTheme>, "div">;
-export declare const Box: import("styled-components").StyledComponent<import("@xstyled/system").ComponentWithAs<SystemProps<DefaultTheme>, "div">, DefaultTheme, SystemProps<DefaultTheme>, never>;
 export {};

dist/theme.d.ts

@@ -1,1 +0,28 @@
-export declare function useTheme(): any;
+export declare const useTheme: () => any;
+export declare const useTh: (value: any, defaultValue?: any) => any;
+export declare const useAngle: (value: any, defaultValue?: any) => any;
+export declare const useAnimation: (value: any, defaultValue?: any) => any;
+export declare const useBorder: (value: any, defaultValue?: any) => any;
+export declare const useBorderColor: (value: any, defaultValue?: any) => any;
+export declare const useBorderStyle: (value: any, defaultValue?: any) => any;
+export declare const useBorderWidth: (value: any, defaultValue?: any) => any;
+export declare const useColor: (value: any, defaultValue?: any) => any;
+export declare const useDuration: (value: any, defaultValue?: any) => any;
+export declare const useFont: (value: any, defaultValue?: any) => any;
+export declare const useFontSize: (value: any, defaultValue?: any) => any;
+export declare const useFontWeight: (value: any, defaultValue?: any) => any;
+export declare const useInset: (value: any, defaultValue?: any) => any;
+export declare const useLetterSpacing: (value: any, defaultValue?: any) => any;
+export declare const useLineHeight: (value: any, defaultValue?: any) => any;
+export declare const usePercent: (value: any, defaultValue?: any) => any;
+export declare const usePx: (value: any, defaultValue?: any) => any;
+export declare const useRadius: (value: any, defaultValue?: any) => any;
+export declare const useRingWidth: (value: any, defaultValue?: any) => any;
+export declare const useShadow: (value: any, defaultValue?: any) => any;
+export declare const useSize: (value: any, defaultValue?: any) => any;
+export declare const useSpace: (value: any, defaultValue?: any) => any;
+export declare const useTimingFunctions: (value: any, defaultValue?: any) => any;
+export declare const useTransform: (value: any, defaultValue?: any) => any;
+export declare const useTransition: (value: any, defaultValue?: any) => any;
+export declare const useTransitionProperty: (value: any, defaultValue?: any) => any;
+export declare const useZIndex: (value: any, defaultValue?: any) => any;

package.json

 {
   "name": "@xstyled/styled-components",
   "description": "Xstyled bindings for styled-components.",
-  "version": "1.20.0-alpha.1",
+  "version": "2.0.0-alpha.0",
   "keywords": [
@@ -18,2 +18,3 @@ "styled-components",
   "scripts": {
+    "reset": "rm -rf dist && rm -rf node_modules/.cache",
     "watch": "tsdx watch",
@@ -37,7 +38,7 @@ "build": "tsdx build",
     "@babel/runtime": "^7.11.2",
-    "@xstyled/core": "^1.20.0-alpha.0",
-    "@xstyled/system": "^1.20.0-alpha.0",
-    "@xstyled/util": "^1.20.0-alpha.0"
+    "@xstyled/core": "^2.0.0-alpha.0",
+    "@xstyled/system": "^2.0.0-alpha.0",
+    "@xstyled/util": "^2.0.0-alpha.0"
   },
-  "gitHead": "7780d96dbc389025dcc239de26fbabc48b636c28"
+  "gitHead": "2a912eaa023a83245411eeb88c78dc1e1f23379e"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

153714

increased by189.09%

Number of package files

22

increased by15.79%

Lines of code

1423

increased by176.31%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@xstyled/core@2.5.0(transitive)

• + Added@xstyled/system@2.5.0(transitive)

• + Added@xstyled/util@2.2.3(transitive)

• - Removed@xstyled/core@1.20.0-alpha.0(transitive)

• - Removed@xstyled/system@1.20.0-alpha.0(transitive)

• - Removed@xstyled/util@1.20.0-alpha.0(transitive)

• Updated@xstyled/core@^2.0.0-alpha.0

• Updated@xstyled/system@^2.0.0-alpha.0

• Updated@xstyled/util@^2.0.0-alpha.0