@vtex/admin-ui-system - npm Package Compare versions

Comparing version 0.8.1-experimental.2 to 0.8.1-experimental.3

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [0.8.1-experimental.3](https://github.com/vtex/onda/compare/@vtex/admin-ui-system@0.8.1-experimental.2...@vtex/admin-ui-system@0.8.1-experimental.3) (2021-01-19)
+
+
+### Features
+
+* **admin-system:** create a unique emotion instance along with the createSystem function ([f9dfb6c](https://github.com/vtex/onda/commit/f9dfb6cd04df69d10f271c42d01d605b16732fbf))
+
+
+
+
+
 ## [0.8.1-experimental.2](https://github.com/vtex/onda/compare/@vtex/admin-ui-system@0.8.1-experimental.1...@vtex/admin-ui-system@0.8.1-experimental.2) (2021-01-15)
@@ -8,0 +19,0 @@

dist/admin-ui-system.cjs.development.js

@@ -9,3 +9,3 @@ 'use strict';
 var React__default = _interopDefault(React);
-var css = require('@emotion/css');
+var createEmotion = _interopDefault(require('@emotion/css/create-instance'));
 var react = require('@emotion/react');
@@ -471,6 +471,7 @@ var deepmerge = _interopDefault(require('deepmerge'));
 
-function createSystem(theme) {
+function createSystem(theme, appKey) {
+  var emotionInstance = createEmotionInstance(appKey);
   var ThemeProvider = createThemeProvider(theme);
 
-  var _createThemeConsumers = createThemeConsumers(theme),
+  var _createThemeConsumers = createThemeConsumers(theme, emotionInstance),
       cn = _createThemeConsumers.cn,
@@ -480,2 +481,3 @@ stylesOf = _createThemeConsumers.stylesOf;
   return {
+    emotionInstance: emotionInstance,
     ThemeProvider: ThemeProvider,
@@ -486,4 +488,9 @@ cn: cn,
 }
+function createEmotionInstance(appKey) {
+  return createEmotion({
+    key: "vtex-admin-ui-" + appKey
+  });
+}
 function createThemeProvider(theme) {
-  return function ThemeProvider$1(_ref) {
+  return function AdminProvider(_ref) {
     var children = _ref.children;
@@ -495,3 +502,3 @@ return React__default.createElement(ThemeProvider, {
 }
-function createThemeConsumers(theme) {
+function createThemeConsumers(theme, emotionInstance) {
   return {
@@ -504,3 +511,3 @@ stylesOf: function stylesOf(themeKey) {
       var rawStyles = styles(styleProp)(theme);
-      var className = css.css(rawStyles);
+      var className = emotionInstance.css(rawStyles);
       return className;
@@ -519,2 +526,3 @@ }
 
+var emotionInstance = /*#__PURE__*/createEmotionInstance('vtex-admin-ui-icons');
 /**
@@ -527,3 +535,3 @@ * Generate a single classname after merge sx, themeKey & style props
 
-  var _createThemeConsumers = createThemeConsumers(theme),
+  var _createThemeConsumers = createThemeConsumers(theme, emotionInstance),
       cn = _createThemeConsumers.cn;
@@ -789,20 +797,2 @@
 
-Object.defineProperty(exports, 'css', {
-  enumerable: true,
-  get: function () {
-    return css.css;
-  }
-});
-Object.defineProperty(exports, 'cx', {
-  enumerable: true,
-  get: function () {
-    return css.cx;
-  }
-});
-Object.defineProperty(exports, 'keyframes', {
-  enumerable: true,
-  get: function () {
-    return css.keyframes;
-  }
-});
 exports.get = get;
@@ -815,2 +805,3 @@ exports.pick = lodash_pick;
 exports.complement = complement;
+exports.createEmotionInstance = createEmotionInstance;
 exports.createSystem = createSystem;
@@ -817,0 +808,0 @@ exports.createThemeConsumers = createThemeConsumers;

dist/admin-ui-system.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=e(r),n=require("@emotion/css"),o=require("@emotion/react"),i=e(require("deepmerge")),a=e(require("@emotion/react/package.json")),s=e(require("lodash.get")),d=e(require("lodash.pick")),c=e(require("lodash.omit")),u=e(require("lodash.merge")),l=e(require("@emotion/is-prop-valid")),p=e(require("tiny-invariant")),f=require("polished");function g(){return(g=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var m=r.createContext({EMOTION_VERSION:a.version,theme:{}}),b=function(){return r.useContext(m)},h="function"==typeof Symbol&&Symbol.for,y=h?Symbol.for("react.element"):60103,v=h?Symbol.for("react.forward_ref"):60103,S={isMergeableObject:function(e){return!!e&&"object"==typeof e&&e.$$typeof!==y&&e.$$typeof!==v},arrayMerge:function(e,r){return r}},x=function(e,r){return i(e,r,S)};function k(e){var r=e.context;return t.createElement(o.ThemeContext.Provider,{value:r.theme},t.createElement(m.Provider,{value:r},e.children))}function B(e){var r=e.theme,n=e.children,o=b(),i="function"==typeof r?g({},o,{theme:r(o.theme)}):x.all({},o,{theme:r});return t.createElement(k,{context:i},n)}x.all=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return i.all(r,S)};var z=function(e){return"function"==typeof e},E=function(e){return 0===Object.keys(e).length&&e.constructor===Object};function I(e,r){var t={};for(var n in e)l(n)&&!r.includes(n)&&(t[n]=e[n]);return t}var R=function(e,r){var t;return g({},e,((t={})[r]=function(e,r){if("number"!=typeof r||r>=0){if("string"==typeof r&&r.startsWith("-")){var t=r.substring(1);return"-"+s(e,t,t)}return s(e,r,r)}var n=Math.abs(r),o=s(e,n,n);return"string"==typeof o?"-"+o:-1*Number(o)},t))},w={bg:"backgroundColor",fontSettings:"fontVariationSettings"},W=[40,52,64].map((function(e){return e+"em"})),j={space:[0,4,8,16,32,64,128,256,512],fontSizes:[12,14,16,20,24,32,48,64,72]},T={marginX:["marginLeft","marginRight"],marginY:["marginTop","marginBottom"],paddingX:["paddingLeft","paddingRight"],paddingY:["paddingTop","paddingBottom"],size:["width","height"]},O=["margin","marginTop","marginRight","marginBottom","marginLeft","marginX","marginY","marginBlock","marginBlockEnd","marginBlockStart","marginInline","marginInlineEnd","marginInlineStart","top","bottom","left","right"].reduce(R,{}),P={color:"colors",backgroundColor:"colors",borderColor:"colors",caretColor:"colors",columnRuleColor:"colors",opacity:"opacities",transition:"transitions",margin:"space",marginTop:"space",marginRight:"space",marginBottom:"space",marginLeft:"space",marginX:"space",marginY:"space",marginBlock:"space",marginBlockEnd:"space",marginBlockStart:"space",marginInline:"space",marginInlineEnd:"space",marginInlineStart:"space",padding:"space",paddingTop:"space",paddingRight:"space",paddingBottom:"space",paddingLeft:"space",paddingX:"space",paddingY:"space",paddingBlock:"space",paddingBlockEnd:"space",paddingBlockStart:"space",paddingInline:"space",paddingInlineEnd:"space",paddingInlineStart:"space",scrollPadding:"space",scrollPaddingTop:"space",scrollPaddingRight:"space",scrollPaddingBottom:"space",scrollPaddingLeft:"space",scrollPaddingX:"space",scrollPaddingY:"space",inset:"space",insetBlock:"space",insetBlockEnd:"space",insetBlockStart:"space",insetInline:"space",insetInlineEnd:"space",insetInlineStart:"space",top:"space",right:"space",bottom:"space",left:"space",gridGap:"space",gridColumnGap:"space",gridRowGap:"space",gap:"space",columnGap:"space",rowGap:"space",fontFamily:"fonts",fontSize:"fontSizes",fontWeight:"fontWeights",lineHeight:"lineHeights",letterSpacing:"letterSpacings",border:"border",borderTop:"borders",borderRight:"borders",borderBottom:"borders",borderLeft:"borders",borderWidth:"borderWidths",borderStyle:"borderStyles",borderRadius:"radii",borderTopRightRadius:"radii",borderTopLeftRadius:"radii",borderBottomRightRadius:"radii",borderBottomLeftRadius:"radii",borderTopWidth:"borderWidths",borderTopColor:"colors",borderTopStyle:"borderStyles",borderBottomWidth:"borderWidths",borderBottomColor:"colors",borderBottomStyle:"borderStyles",borderLeftWidth:"borderWidths",borderLeftColor:"colors",borderLeftStyle:"borderStyles",borderRightWidth:"borderWidths",borderRightColor:"colors",borderRightStyle:"borderStyles",borderBlock:"borders",borderBlockEnd:"borders",borderBlockEndStyle:"borderStyles",borderBlockEndWidth:"borderWidths",borderBlockStart:"borders",borderBlockStartStyle:"borderStyles",borderBlockStartWidth:"borderWidths",borderBlockStyle:"borderStyles",borderBlockWidth:"borderWidths",borderEndEndRadius:"radii",borderEndStartRadius:"radii",borderInline:"borders",borderInlineEnd:"borders",borderInlineEndStyle:"borderStyles",borderInlineEndWidth:"borderWidths",borderInlineStart:"borders",borderInlineStartStyle:"borderStyles",borderInlineStartWidth:"borderWidths",borderInlineStyle:"borderStyles",borderInlineWidth:"borderWidths",borderStartEndRadius:"radii",borderStartStartRadius:"radii",outlineColor:"colors",boxShadow:"shadows",textShadow:"shadows",zIndex:"zIndices",width:"sizes",minWidth:"sizes",maxWidth:"sizes",height:"sizes",minHeight:"sizes",maxHeight:"sizes",flexBasis:"sizes",size:"sizes",blockSize:"sizes",inlineSize:"sizes",maxBlockSize:"sizes",maxInlineSize:"sizes",minBlockSize:"sizes",minInlineSize:"sizes",fill:"colors",stroke:"colors",fontVariationSettings:"fontSettings",text:"text"},C=function e(r){return void 0===r&&(r={}),function(t){void 0===t&&(t={});var n=g({},j,"theme"in t?t.theme:t),o={},i="function"==typeof r?r(n):r;i.themeKey&&delete(i=g({},s(n,i.themeKey),i)).themeKey;var a=function(e){return function(r){var t={},n=[null].concat((r&&r.breakpoints||W).map((function(e){return"@media screen and (min-width: "+e+")"})));for(var o in e){var i=o,a=e[i];if("function"==typeof a&&(a=a(null!=r?r:{})),null!=a)if(Array.isArray(a))for(var s=0;s<a.slice(0,n.length).length;s++){var d,c=n[s];c?(t[c]=null!==(d=t[c])&&void 0!==d?d:{},null!=a[s]&&(t[c][i]=a[s])):t[i]=a[s]}else t[i]=a}return t}}(i)(n);for(var d in a){var c=a[d],u="function"==typeof c?c(n):c;if(u&&"object"==typeof u)o[d]=e(u)(n);else{var l=d in w?w[d]:d,p=s(n,l in P?P[l]:void 0,s(n,l,{})),f=s(O,l,s)(p,u,u),m=f&&"object"==typeof f;if(m){var b,h=f.default;h?"object"==typeof h?(f=e(h)(n),Object.assign(o,f),delete o[l]):((b={})[l]=h,f=b,Object.assign(o,f)):(f=e(f)(n),Object.assign(o,f),delete o[l])}if(l in T)for(var y=T[l],v=0;v<y.length;v++)o[y[v]]=f;else m||(o[l]=f)}}return o}};function L(e){return function(r){return t.createElement(B,{theme:e},r.children)}}function q(e){return{stylesOf:function(r){return s(e,r,{})},cn:function(r){var t=C(r)(e);return n.css(t)}}}function H(){var e=b().theme;return(E(e)||!e)&&p(!1),e}var M=function(e,r){var t=s(e,"colors."+r,r);return/^var\(--/.test(t)?t.replace(/^var\(--(\w+)(.*?), /,"").replace(/\)/,""):t},A=function(e,r){return function(t){return f.desaturate(r,M(t,e))}};Object.defineProperty(exports,"css",{enumerable:!0,get:function(){return n.css}}),Object.defineProperty(exports,"cx",{enumerable:!0,get:function(){return n.cx}}),Object.defineProperty(exports,"keyframes",{enumerable:!0,get:function(){return n.keyframes}}),exports.get=s,exports.pick=d,exports.omit=c,exports.isPropValid=l,exports.alpha=function(e,r){return function(t){return f.rgba(M(t,e),r)}},exports.cleanProps=function(e,r){void 0===r&&(r=[]);var t=I(e,r);return c.apply(void 0,[t].concat(r))},exports.complement=function(e){return function(r){return f.complement(M(r,e))}},exports.createSystem=function(e){var r=L(e),t=q(e);return{ThemeProvider:r,cn:t.cn,stylesOf:t.stylesOf}},exports.createThemeConsumers=q,exports.createThemeProvider=L,exports.darken=function(e,r){return function(t){return f.darken(r,M(t,e))}},exports.desaturate=A,exports.forwardRef=function(e){return t.forwardRef(e)},exports.getColor=M,exports.grayscale=function(e){return A(e,1)},exports.hue=function(e,r){return function(t){return f.setHue(r,M(t,e))}},exports.invert=function(e){return function(r){return f.invert(M(r,e))}},exports.isFunction=z,exports.isObjectEmpty=E,exports.jsxs=function(e){var r=e.children,n=e.component,o=e.props,i=e.element,a=e.ref;return z(r)?r(o):t.createElement(n,g({as:i},o,{ref:a}),null!=r?r:null==o?void 0:o.children)},exports.lighten=function(e,r){return function(t){return f.lighten(r,M(t,e))}},exports.lightness=function(e,r){return function(t){return f.setLightness(r,M(t,e))}},exports.merge=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return u.apply(void 0,[{}].concat(r))},exports.mix=function(e,r,t){return void 0===t&&(t=.5),function(n){return f.mix(t,M(n,e),M(n,r))}},exports.pickHTMLProps=I,exports.rotate=function(e,r){return function(t){return f.adjustHue(r,M(t,e))}},exports.saturate=function(e,r){return function(t){return f.saturate(r,M(t,e))}},exports.saturation=function(e,r){return function(t){return f.setSaturation(r,M(t,e))}},exports.shade=function(e,r){return function(t){return f.shade(r,M(t,e))}},exports.styles=C,exports.tint=function(e,r){return function(t){return f.tint(r,M(t,e))}},exports.transformScale=R,exports.transparentize=function(e,r){return function(t){return f.transparentize(r,M(t,e))}},exports.useClassName=function(e){return(0,q(H()).cn)(e)},exports.useResponsiveValue=function(e){return function(e,t){void 0===t&&(t={});var n=H(),o="function"==typeof e?e(n.theme):e,i=function(e){void 0===e&&(e={});var t=H(),n=e.defaultIndex,o=void 0===n?0:n,i=t.theme&&t.theme.breakpoints||W;if("number"!=typeof o)throw new TypeError("Default breakpoint index should be a number. Got: "+o+", "+typeof o);if(o<0||o>i.length-1)throw new RangeError("Default breakpoint index out of range. Theme has "+i.length+" breakpoints, got index "+o);var a=r.useState(o),s=a[0],d=a[1];return r.useEffect((function(){var e=function(){var e=i.filter((function(e){return window.matchMedia("screen and (min-width: "+e+")").matches})).length;s!==e&&d(e)};return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[i,s]),s}(t);return o[i>=o.length?o.length-1:i]}(Array.isArray(e)?e:[e])},exports.useTheme=H;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),t=e(r),n=e(require("@emotion/css/create-instance")),o=require("@emotion/react"),i=e(require("deepmerge")),a=e(require("@emotion/react/package.json")),s=e(require("lodash.get")),d=e(require("lodash.pick")),c=e(require("lodash.omit")),u=e(require("lodash.merge")),l=e(require("@emotion/is-prop-valid")),p=e(require("tiny-invariant")),f=require("polished");function g(){return(g=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}var m=r.createContext({EMOTION_VERSION:a.version,theme:{}}),b=function(){return r.useContext(m)},h="function"==typeof Symbol&&Symbol.for,y=h?Symbol.for("react.element"):60103,v=h?Symbol.for("react.forward_ref"):60103,S={isMergeableObject:function(e){return!!e&&"object"==typeof e&&e.$$typeof!==y&&e.$$typeof!==v},arrayMerge:function(e,r){return r}},x=function(e,r){return i(e,r,S)};function k(e){var r=e.context;return t.createElement(o.ThemeContext.Provider,{value:r.theme},t.createElement(m.Provider,{value:r},e.children))}function B(e){var r=e.theme,n=e.children,o=b(),i="function"==typeof r?g({},o,{theme:r(o.theme)}):x.all({},o,{theme:r});return t.createElement(k,{context:i},n)}x.all=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return i.all(r,S)};var E=function(e){return"function"==typeof e},z=function(e){return 0===Object.keys(e).length&&e.constructor===Object};function I(e,r){var t={};for(var n in e)l(n)&&!r.includes(n)&&(t[n]=e[n]);return t}var R=function(e,r){var t;return g({},e,((t={})[r]=function(e,r){if("number"!=typeof r||r>=0){if("string"==typeof r&&r.startsWith("-")){var t=r.substring(1);return"-"+s(e,t,t)}return s(e,r,r)}var n=Math.abs(r),o=s(e,n,n);return"string"==typeof o?"-"+o:-1*Number(o)},t))},w={bg:"backgroundColor",fontSettings:"fontVariationSettings"},W=[40,52,64].map((function(e){return e+"em"})),T={space:[0,4,8,16,32,64,128,256,512],fontSizes:[12,14,16,20,24,32,48,64,72]},j={marginX:["marginLeft","marginRight"],marginY:["marginTop","marginBottom"],paddingX:["paddingLeft","paddingRight"],paddingY:["paddingTop","paddingBottom"],size:["width","height"]},C=["margin","marginTop","marginRight","marginBottom","marginLeft","marginX","marginY","marginBlock","marginBlockEnd","marginBlockStart","marginInline","marginInlineEnd","marginInlineStart","top","bottom","left","right"].reduce(R,{}),O={color:"colors",backgroundColor:"colors",borderColor:"colors",caretColor:"colors",columnRuleColor:"colors",opacity:"opacities",transition:"transitions",margin:"space",marginTop:"space",marginRight:"space",marginBottom:"space",marginLeft:"space",marginX:"space",marginY:"space",marginBlock:"space",marginBlockEnd:"space",marginBlockStart:"space",marginInline:"space",marginInlineEnd:"space",marginInlineStart:"space",padding:"space",paddingTop:"space",paddingRight:"space",paddingBottom:"space",paddingLeft:"space",paddingX:"space",paddingY:"space",paddingBlock:"space",paddingBlockEnd:"space",paddingBlockStart:"space",paddingInline:"space",paddingInlineEnd:"space",paddingInlineStart:"space",scrollPadding:"space",scrollPaddingTop:"space",scrollPaddingRight:"space",scrollPaddingBottom:"space",scrollPaddingLeft:"space",scrollPaddingX:"space",scrollPaddingY:"space",inset:"space",insetBlock:"space",insetBlockEnd:"space",insetBlockStart:"space",insetInline:"space",insetInlineEnd:"space",insetInlineStart:"space",top:"space",right:"space",bottom:"space",left:"space",gridGap:"space",gridColumnGap:"space",gridRowGap:"space",gap:"space",columnGap:"space",rowGap:"space",fontFamily:"fonts",fontSize:"fontSizes",fontWeight:"fontWeights",lineHeight:"lineHeights",letterSpacing:"letterSpacings",border:"border",borderTop:"borders",borderRight:"borders",borderBottom:"borders",borderLeft:"borders",borderWidth:"borderWidths",borderStyle:"borderStyles",borderRadius:"radii",borderTopRightRadius:"radii",borderTopLeftRadius:"radii",borderBottomRightRadius:"radii",borderBottomLeftRadius:"radii",borderTopWidth:"borderWidths",borderTopColor:"colors",borderTopStyle:"borderStyles",borderBottomWidth:"borderWidths",borderBottomColor:"colors",borderBottomStyle:"borderStyles",borderLeftWidth:"borderWidths",borderLeftColor:"colors",borderLeftStyle:"borderStyles",borderRightWidth:"borderWidths",borderRightColor:"colors",borderRightStyle:"borderStyles",borderBlock:"borders",borderBlockEnd:"borders",borderBlockEndStyle:"borderStyles",borderBlockEndWidth:"borderWidths",borderBlockStart:"borders",borderBlockStartStyle:"borderStyles",borderBlockStartWidth:"borderWidths",borderBlockStyle:"borderStyles",borderBlockWidth:"borderWidths",borderEndEndRadius:"radii",borderEndStartRadius:"radii",borderInline:"borders",borderInlineEnd:"borders",borderInlineEndStyle:"borderStyles",borderInlineEndWidth:"borderWidths",borderInlineStart:"borders",borderInlineStartStyle:"borderStyles",borderInlineStartWidth:"borderWidths",borderInlineStyle:"borderStyles",borderInlineWidth:"borderWidths",borderStartEndRadius:"radii",borderStartStartRadius:"radii",outlineColor:"colors",boxShadow:"shadows",textShadow:"shadows",zIndex:"zIndices",width:"sizes",minWidth:"sizes",maxWidth:"sizes",height:"sizes",minHeight:"sizes",maxHeight:"sizes",flexBasis:"sizes",size:"sizes",blockSize:"sizes",inlineSize:"sizes",maxBlockSize:"sizes",maxInlineSize:"sizes",minBlockSize:"sizes",minInlineSize:"sizes",fill:"colors",stroke:"colors",fontVariationSettings:"fontSettings",text:"text"},L=function e(r){return void 0===r&&(r={}),function(t){void 0===t&&(t={});var n=g({},T,"theme"in t?t.theme:t),o={},i="function"==typeof r?r(n):r;i.themeKey&&delete(i=g({},s(n,i.themeKey),i)).themeKey;var a=function(e){return function(r){var t={},n=[null].concat((r&&r.breakpoints||W).map((function(e){return"@media screen and (min-width: "+e+")"})));for(var o in e){var i=o,a=e[i];if("function"==typeof a&&(a=a(null!=r?r:{})),null!=a)if(Array.isArray(a))for(var s=0;s<a.slice(0,n.length).length;s++){var d,c=n[s];c?(t[c]=null!==(d=t[c])&&void 0!==d?d:{},null!=a[s]&&(t[c][i]=a[s])):t[i]=a[s]}else t[i]=a}return t}}(i)(n);for(var d in a){var c=a[d],u="function"==typeof c?c(n):c;if(u&&"object"==typeof u)o[d]=e(u)(n);else{var l=d in w?w[d]:d,p=s(n,l in O?O[l]:void 0,s(n,l,{})),f=s(C,l,s)(p,u,u),m=f&&"object"==typeof f;if(m){var b,h=f.default;h?"object"==typeof h?(f=e(h)(n),Object.assign(o,f),delete o[l]):((b={})[l]=h,f=b,Object.assign(o,f)):(f=e(f)(n),Object.assign(o,f),delete o[l])}if(l in j)for(var y=j[l],v=0;v<y.length;v++)o[y[v]]=f;else m||(o[l]=f)}}return o}};function P(e){return n({key:"vtex-admin-ui-"+e})}function q(e){return function(r){return t.createElement(B,{theme:e},r.children)}}function H(e,r){return{stylesOf:function(r){return s(e,r,{})},cn:function(t){var n=L(t)(e);return r.css(n)}}}function M(){var e=b().theme;return(z(e)||!e)&&p(!1),e}var A=P("vtex-admin-ui-icons"),G=function(e,r){var t=s(e,"colors."+r,r);return/^var\(--/.test(t)?t.replace(/^var\(--(\w+)(.*?), /,"").replace(/\)/,""):t},X=function(e,r){return function(t){return f.desaturate(r,G(t,e))}};exports.get=s,exports.pick=d,exports.omit=c,exports.isPropValid=l,exports.alpha=function(e,r){return function(t){return f.rgba(G(t,e),r)}},exports.cleanProps=function(e,r){void 0===r&&(r=[]);var t=I(e,r);return c.apply(void 0,[t].concat(r))},exports.complement=function(e){return function(r){return f.complement(G(r,e))}},exports.createEmotionInstance=P,exports.createSystem=function(e,r){var t=P(r),n=q(e),o=H(e,t);return{emotionInstance:t,ThemeProvider:n,cn:o.cn,stylesOf:o.stylesOf}},exports.createThemeConsumers=H,exports.createThemeProvider=q,exports.darken=function(e,r){return function(t){return f.darken(r,G(t,e))}},exports.desaturate=X,exports.forwardRef=function(e){return t.forwardRef(e)},exports.getColor=G,exports.grayscale=function(e){return X(e,1)},exports.hue=function(e,r){return function(t){return f.setHue(r,G(t,e))}},exports.invert=function(e){return function(r){return f.invert(G(r,e))}},exports.isFunction=E,exports.isObjectEmpty=z,exports.jsxs=function(e){var r=e.children,n=e.component,o=e.props,i=e.element,a=e.ref;return E(r)?r(o):t.createElement(n,g({as:i},o,{ref:a}),null!=r?r:null==o?void 0:o.children)},exports.lighten=function(e,r){return function(t){return f.lighten(r,G(t,e))}},exports.lightness=function(e,r){return function(t){return f.setLightness(r,G(t,e))}},exports.merge=function(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return u.apply(void 0,[{}].concat(r))},exports.mix=function(e,r,t){return void 0===t&&(t=.5),function(n){return f.mix(t,G(n,e),G(n,r))}},exports.pickHTMLProps=I,exports.rotate=function(e,r){return function(t){return f.adjustHue(r,G(t,e))}},exports.saturate=function(e,r){return function(t){return f.saturate(r,G(t,e))}},exports.saturation=function(e,r){return function(t){return f.setSaturation(r,G(t,e))}},exports.shade=function(e,r){return function(t){return f.shade(r,G(t,e))}},exports.styles=L,exports.tint=function(e,r){return function(t){return f.tint(r,G(t,e))}},exports.transformScale=R,exports.transparentize=function(e,r){return function(t){return f.transparentize(r,G(t,e))}},exports.useClassName=function(e){return(0,H(M(),A).cn)(e)},exports.useResponsiveValue=function(e){return function(e,t){void 0===t&&(t={});var n=M(),o="function"==typeof e?e(n.theme):e,i=function(e){void 0===e&&(e={});var t=M(),n=e.defaultIndex,o=void 0===n?0:n,i=t.theme&&t.theme.breakpoints||W;if("number"!=typeof o)throw new TypeError("Default breakpoint index should be a number. Got: "+o+", "+typeof o);if(o<0||o>i.length-1)throw new RangeError("Default breakpoint index out of range. Theme has "+i.length+" breakpoints, got index "+o);var a=r.useState(o),s=a[0],d=a[1];return r.useEffect((function(){var e=function(){var e=i.filter((function(e){return window.matchMedia("screen and (min-width: "+e+")").matches})).length;s!==e&&d(e)};return e(),window.addEventListener("resize",e),function(){return window.removeEventListener("resize",e)}}),[i,s]),s}(t);return o[i>=o.length?o.length-1:i]}(Array.isArray(e)?e:[e])},exports.useTheme=M;
 //# sourceMappingURL=admin-ui-system.cjs.production.min.js.map

dist/admin-ui-system.esm.js

 import React, { useContext, createContext, useState, useEffect } from 'react';
-import { css } from '@emotion/css';
-export { css, cx, keyframes } from '@emotion/css';
+import createEmotion from '@emotion/css/create-instance';
 import { ThemeContext } from '@emotion/react';
@@ -467,6 +466,7 @@ import deepmerge from 'deepmerge';
 
-function createSystem(theme) {
+function createSystem(theme, appKey) {
+  var emotionInstance = createEmotionInstance(appKey);
   var ThemeProvider = createThemeProvider(theme);
 
-  var _createThemeConsumers = createThemeConsumers(theme),
+  var _createThemeConsumers = createThemeConsumers(theme, emotionInstance),
       cn = _createThemeConsumers.cn,
@@ -476,2 +476,3 @@ stylesOf = _createThemeConsumers.stylesOf;
   return {
+    emotionInstance: emotionInstance,
     ThemeProvider: ThemeProvider,
@@ -482,4 +483,9 @@ cn: cn,
 }
+function createEmotionInstance(appKey) {
+  return createEmotion({
+    key: "vtex-admin-ui-" + appKey
+  });
+}
 function createThemeProvider(theme) {
-  return function ThemeProvider$1(_ref) {
+  return function AdminProvider(_ref) {
     var children = _ref.children;
@@ -491,3 +497,3 @@ return React.createElement(ThemeProvider, {
 }
-function createThemeConsumers(theme) {
+function createThemeConsumers(theme, emotionInstance) {
   return {
@@ -500,3 +506,3 @@ stylesOf: function stylesOf(themeKey) {
       var rawStyles = styles(styleProp)(theme);
-      var className = css(rawStyles);
+      var className = emotionInstance.css(rawStyles);
       return className;
@@ -515,2 +521,3 @@ }
 
+var emotionInstance = /*#__PURE__*/createEmotionInstance('vtex-admin-ui-icons');
 /**
@@ -523,3 +530,3 @@ * Generate a single classname after merge sx, themeKey & style props
 
-  var _createThemeConsumers = createThemeConsumers(theme),
+  var _createThemeConsumers = createThemeConsumers(theme, emotionInstance),
       cn = _createThemeConsumers.cn;
@@ -785,3 +792,3 @@
 
-export { alpha, cleanProps, complement, createSystem, createThemeConsumers, createThemeProvider, darken, desaturate, forwardRef, getColor, grayscale, hue, invert, isFunction, isObjectEmpty, jsxs, lighten, lightness, merge$1 as merge, mix, pickHTMLProps, rotate, saturate, saturation, shade, styles, tint, transformScale, transparentize, useClassName, useResponsiveValue$1 as useResponsiveValue, useTheme };
+export { alpha, cleanProps, complement, createEmotionInstance, createSystem, createThemeConsumers, createThemeProvider, darken, desaturate, forwardRef, getColor, grayscale, hue, invert, isFunction, isObjectEmpty, jsxs, lighten, lightness, merge$1 as merge, mix, pickHTMLProps, rotate, saturate, saturation, shade, styles, tint, transformScale, transparentize, useClassName, useResponsiveValue$1 as useResponsiveValue, useTheme };
 //# sourceMappingURL=admin-ui-system.esm.js.map

dist/createSystem.d.ts

 import React from 'react';
+import { Emotion } from '@emotion/css/create-instance';
 import { StyleProp } from './types';
-export declare function createSystem<T>(theme: T): CreateSystemReturn;
+export declare function createSystem<T>(theme: T, appKey: string): CreateSystemReturn;
+export declare function createEmotionInstance(appKey: string): Emotion;
 export declare function createThemeProvider<T>(theme: T): ({ children, }: React.PropsWithChildren<unknown>) => JSX.Element;
-export declare function createThemeConsumers<T>(theme: T): {
+export declare function createThemeConsumers<T>(theme: T, emotionInstance: Emotion): {
     stylesOf(themeKey: string): StyleProp;
@@ -11,2 +13,4 @@ cn(styleProp: StyleProp): string;
     ThemeProvider: ReturnType<typeof createThemeProvider>;
-} & ReturnType<typeof createThemeConsumers>;
+} & ReturnType<typeof createThemeConsumers> & {
+    emotionInstance: ReturnType<typeof createEmotionInstance>;
+};

dist/index.d.ts

@@ -8,2 +8,1 @@ export * from './createSystem';
 export * from './color';
-export { keyframes, css, cx } from '@emotion/css';

package.json

 {
   "name": "@vtex/admin-ui-system",
-  "version": "0.8.1-experimental.2",
+  "version": "0.8.1-experimental.3",
   "main": "dist/index.js",
@@ -57,3 +57,3 @@ "module": "dist/admin-ui-system.esm.js",
   },
-  "gitHead": "4bad6023bfcc0029e85c01d749ae3e8bfe401fc2"
+  "gitHead": "abb31fb33c0200e7328bdb545a84caa0fa95bf9d"
 }

src/__tests__/stylesOf.test.ts

@@ -1,2 +0,2 @@
-import { createThemeConsumers } from '../createSystem'
+import { createEmotionInstance, createThemeConsumers } from '../createSystem'
 
@@ -21,3 +21,4 @@ describe('stylesOf test', () => {
   it('should be able to consume a themeKey', () => {
-    const { stylesOf } = createThemeConsumers(theme)
+    const emotionInstance = createEmotionInstance('admin-ui-system')
+    const { stylesOf } = createThemeConsumers(theme, emotionInstance)
     const styles = stylesOf('components.alert')
@@ -29,3 +30,4 @@
   it('should be able to consume a scale', () => {
-    const { stylesOf } = createThemeConsumers(theme)
+    const emotionInstance = createEmotionInstance('admin-ui-system')
+    const { stylesOf } = createThemeConsumers(theme, emotionInstance)
     const styles = stylesOf('sizes')
@@ -37,3 +39,4 @@
   it('should be able to consume a scale value', () => {
-    const { stylesOf } = createThemeConsumers(theme)
+    const emotionInstance = createEmotionInstance('admin-ui-system')
+    const { stylesOf } = createThemeConsumers(theme, emotionInstance)
     const styles = stylesOf('sizes.half')
@@ -40,0 +43,0 @@

src/hooks/useClassName.ts

@@ -1,5 +0,7 @@
-import { createThemeConsumers } from '../createSystem'
+import { createEmotionInstance, createThemeConsumers } from '../createSystem'
 import { StyleObject } from '../types'
 import { useTheme } from './useTheme'
 
+const emotionInstance = createEmotionInstance('vtex-admin-ui-icons')
+
 /**
@@ -10,3 +12,3 @@ * Generate a single classname after merge sx, themeKey & style props
   const theme = useTheme()
-  const { cn } = createThemeConsumers(theme)
+  const { cn } = createThemeConsumers(theme, emotionInstance)
   const className = cn(styles)
@@ -13,0 +15,0 @@

src/index.ts

@@ -8,2 +8,1 @@ export * from './createSystem'
 export * from './color'
-export { keyframes, css, cx } from '@emotion/css'

No alert changes

Improved metrics

Total package byte prevSize

273256

increased by1.68%

Lines of code

4193

increased by0.77%

No dependency changes