@semcore/core 16.5.1-prerelease.5 → 17.0.0-prerelease.14

package/lib/esm/enhancement/uncontrolledProps.mjs

@@ -1,25 +1,18 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _toArray from "@babel/runtime/helpers/esm/toArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { callAllEventHandlers } from "../utils/assignProps.mjs";
 import capitalizeFirstLetter from "../utils/capitalizeFirstLetter.mjs";
 function assign(target, source) {
-  return Object.defineProperties(target, Object.keys(source).reduce(function(descriptors, key) {
+  return Object.defineProperties(target, Object.keys(source).reduce((descriptors, key) => {
     descriptors[key] = Object.getOwnPropertyDescriptor(source, key);
     return descriptors;
   }, {}));
 }
 function defaultProp(prop) {
-  return "default".concat(capitalizeFirstLetter(prop));
+  return `default${capitalizeFirstLetter(prop)}`;
 }
 function handlerProp(prop) {
   if (prop === "value") prop = "";
   if (prop === "checked") prop = "";
-  return "on".concat(capitalizeFirstLetter(prop), "Change");
+  return `on${capitalizeFirstLetter(prop)}Change`;
 }
 function isControlled(propValue) {
   return propValue !== void 0;
@@ -28,48 +21,46 @@ function uncontrolledProp(self, propName, propValue, propDefaultValue, propHandl
   function getValue() {
     return isControlled(propValue) ? propValue : propName in self.state ? self.state[propName] : propDefaultValue;
   }
-  return [getValue(), function(value) {
-    var oldValue = getValue();
+  return [getValue(), (value, ...args) => {
+    const oldValue = getValue();
     if (oldValue === value) return false;
-    if (!isControlled(propValue)) self.setState(_defineProperty({}, propName, value));
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
-    }
-    return callAllEventHandlers.apply(void 0, [propHandler].concat(_toConsumableArray(chainHandler))).apply(void 0, [value].concat(args));
+    if (!isControlled(propValue)) self.setState({
+      [propName]: value
+    });
+    return callAllEventHandlers(propHandler, ...chainHandler)(value, ...args);
   }];
 }
 function uncontrolledUniversal(props, config, uncontrolledProp2) {
-  var handlerProps = {};
-  var uncontrolledProps = Object.keys(config).reduce(function(result, propName) {
-    var handlerName = handlerProp(propName);
-    var defaultPropName = defaultProp(propName);
-    var propDefaultValue = result[defaultPropName], propValue = result[propName], propHandler = result[handlerName], other = _objectWithoutProperties(result, [defaultPropName, propName, handlerName].map(_toPropertyKey));
+  const handlerProps = {};
+  const uncontrolledProps = Object.keys(config).reduce((result, propName) => {
+    const handlerName = handlerProp(propName);
+    const defaultPropName = defaultProp(propName);
+    const {
+      [defaultPropName]: propDefaultValue,
+      [propName]: propValue,
+      [handlerName]: propHandler,
+      ...other
+    } = result;
     if (propDefaultValue === void 0) {
       console.warn(defaultPropName, 'must be installed in "defaultProps"');
     }
-    var setter = config[propName];
-    var chainHandler = [];
-    if (Array.isArray(setter)) {
-      var _setter = setter;
-      var _setter2 = _toArray(_setter);
-      setter = _setter2[0];
-      chainHandler = _setter2.slice(1);
-    }
-    setter = setter || function(v) {
-      return v;
-    };
-    var _uncontrolledProp = uncontrolledProp2(propName, propValue, propDefaultValue, propHandler, chainHandler), _uncontrolledProp2 = _slicedToArray(_uncontrolledProp, 2), value = _uncontrolledProp2[0], handler = _uncontrolledProp2[1];
+    let setter = config[propName];
+    let chainHandler = [];
+    if (Array.isArray(setter)) [setter, ...chainHandler] = setter;
+    setter = setter || ((v) => v);
+    const [value, handler] = uncontrolledProp2(propName, propValue, propDefaultValue, propHandler, chainHandler);
     handlerProps[propName] = handler;
-    return _objectSpread(_objectSpread({}, other), {}, _defineProperty(_defineProperty({}, propName, value), handlerName, function(eventOrValue) {
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
-      var result2 = [setter.apply(void 0, [eventOrValue].concat(args))].concat(args);
-      if (eventOrValue !== null && eventOrValue !== void 0 && eventOrValue.target) {
-        result2.push(eventOrValue);
+    return {
+      ...other,
+      [propName]: value,
+      [handlerName]: (eventOrValue, ...args) => {
+        const result2 = [setter(eventOrValue, ...args), ...args];
+        if (eventOrValue == null ? void 0 : eventOrValue.target) {
+          result2.push(eventOrValue);
+        }
+        return handler(...result2);
       }
-      return handler.apply(void 0, _toConsumableArray(result2));
-    }));
+    };
   }, props);
   return [uncontrolledProps, handlerProps];
 }
@@ -78,25 +69,26 @@ function uncontrolled(self, props, config) {
 }
 function Enhancement() {
   return {
-    condition: function condition(Component) {
+    condition: function(Component) {
       return Boolean(Component.prototype.uncontrolledProps);
     },
-    init: function init() {
+    init: function() {
       this.state = this.state || {};
       assign(this, {
         get handlers() {
-          var _uncontrolled = uncontrolled(this, this.props, this.uncontrolledProps()), _uncontrolled2 = _slicedToArray(_uncontrolled, 2), uncontrolledHandlers = _uncontrolled2[1];
+          const [, uncontrolledHandlers] = uncontrolled(this, this.props, this.uncontrolledProps());
           return uncontrolledHandlers;
         }
       });
     },
-    context: function context(_context) {
-      return _objectSpread(_objectSpread({}, _context), {}, {
+    context: function(context) {
+      return {
+        ...context,
         handlers: this.handlers
-      });
+      };
     },
-    asProps: function asProps(props) {
-      var _uncontrolled3 = uncontrolled(this, props, this.uncontrolledProps()), _uncontrolled4 = _slicedToArray(_uncontrolled3, 1), uncontrolledProps = _uncontrolled4[0];
+    asProps: function(props) {
+      const [uncontrolledProps] = uncontrolled(this, props, this.uncontrolledProps());
       return uncontrolledProps;
     }
   };

package/lib/esm/register.mjs

@@ -1,28 +1,20 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var Register = /* @__PURE__ */ (function() {
-  function Register2() {
-    _classCallCheck(this, Register2);
+class Register {
+  constructor() {
     _defineProperty(this, "data", {});
   }
-  return _createClass(Register2, [{
-    key: "get",
-    value: function get(name, defaultValue) {
-      if (name in this.data) {
-        return this.data[name];
-      } else {
-        return this.set(name, defaultValue);
-      }
-    }
-  }, {
-    key: "set",
-    value: function set(name, value) {
-      this.data[name] = value;
+  get(name, defaultValue) {
+    if (name in this.data) {
       return this.data[name];
+    } else {
+      return this.set(name, defaultValue);
     }
-  }]);
-})();
+  }
+  set(name, value) {
+    this.data[name] = value;
+    return this.data[name];
+  }
+}
 const register = new Register();
 export {
   Register,

package/lib/esm/styled/reshadow-core.mjs

@@ -1,9 +1,5 @@
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _Symbol = function _Symbol2(key) {
-  return typeof Symbol !== "undefined" ? Symbol(key) : key;
-};
-var KEYS = {
+const _Symbol = (key) => typeof Symbol !== "undefined" ? Symbol(key) : key;
+const KEYS = {
   __id__: _Symbol("__id__"),
   __store__: _Symbol("__store__"),
   __prev__: _Symbol("__prev__"),
@@ -18,44 +14,48 @@ var KEYS = {
    */
   __classProp__: "className"
 };
-var index = 0;
-var use = function use2(obj) {
-  var result = {};
+let index = 0;
+const use = (obj) => {
+  const result = {};
   result[KEYS.__use__] = obj;
   return result;
 };
-var create = function create2(args) {
-  var len = args.length;
-  var newStyle = {};
-  var id = "";
-  var vars = null;
-  var uses = null;
-  for (var i = 0; i < len; i++) {
-    var _style = args[i];
-    if (!_style) continue;
-    if (!_style[KEYS.__id__]) {
-      _style[KEYS.__id__] = ++index;
-      _style[KEYS.__store__] = _defineProperty({}, "_" + _style[KEYS.__id__], _style);
+const create = (args) => {
+  const len = args.length;
+  let newStyle = {};
+  let id = "";
+  let vars = null;
+  let uses = null;
+  for (let i = 0; i < len; i++) {
+    const style2 = args[i];
+    if (!style2) continue;
+    if (!style2[KEYS.__id__]) {
+      style2[KEYS.__id__] = ++index;
+      style2[KEYS.__store__] = {
+        ["_" + style2[KEYS.__id__]]: style2
+      };
     }
-    id += "_" + _style[KEYS.__id__];
-    if (_style[KEYS.__style__]) {
-      vars = Object.assign(vars || {}, _style[KEYS.__style__]);
+    id += "_" + style2[KEYS.__id__];
+    if (style2[KEYS.__style__]) {
+      vars = Object.assign(vars || {}, style2[KEYS.__style__]);
     }
-    if (_style[KEYS.__use__]) {
-      uses = Object.assign(uses || {}, _style[KEYS.__use__]);
+    if (style2[KEYS.__use__]) {
+      uses = Object.assign(uses || {}, style2[KEYS.__use__]);
     }
-    if (_style[KEYS.__store__][id]) {
-      newStyle = _style[KEYS.__store__][id];
+    if (style2[KEYS.__store__][id]) {
+      newStyle = style2[KEYS.__store__][id];
       continue;
     }
     newStyle = Object.create(newStyle);
-    for (var key in _style) {
+    for (const key in style2) {
       if (key in KEYS) continue;
-      newStyle[key] = appendClassName(_style[key], newStyle[key]);
+      newStyle[key] = appendClassName(style2[key], newStyle[key]);
     }
-    _style[KEYS.__store__][id] = newStyle;
+    style2[KEYS.__store__][id] = newStyle;
     newStyle[KEYS.__id__] = index;
-    newStyle[KEYS.__store__] = _defineProperty({}, "_" + _style[KEYS.__id__], newStyle);
+    newStyle[KEYS.__store__] = {
+      ["_" + style2[KEYS.__id__]]: newStyle
+    };
   }
   if (vars || use) {
     newStyle = Object.create(newStyle);
@@ -64,130 +64,117 @@ var create = function create2(args) {
   }
   return newStyle;
 };
-var isSSR = !(typeof window !== "undefined" && window.document && window.document.createElement);
-var serverMap = {};
-var getStyles = function getStyles2() {
-  return {
-    map: serverMap,
-    get css() {
-      var serverStyles2 = "";
-      for (var id in serverMap) {
-        serverStyles2 += '<style type="text/css" id="'.concat(id, '">').concat(serverMap[id], "</style>");
-      }
-      return serverStyles2;
+const isSSR = !(typeof window !== "undefined" && window.document && window.document.createElement);
+const serverMap = {};
+const getStyles = () => ({
+  map: serverMap,
+  get css() {
+    let serverStyles2 = "";
+    for (const id in serverMap) {
+      serverStyles2 += `<style type="text/css" id="${id}">${serverMap[id]}</style>`;
     }
-  };
-};
-var clearStyles = function clearStyles2() {
+    return serverStyles2;
+  }
+});
+const clearStyles = () => {
   serverStyles = "";
 };
-var RESHADOW_ID = "__reshadow__";
-var appendChildToDocumentHead = function appendChildToDocumentHead2(element) {
-  return document.head.appendChild(element);
-};
-var css = function css2(code, hash) {
-  var id = "reshadow-".concat(hash);
+const RESHADOW_ID = "__reshadow__";
+const appendChildToDocumentHead = (element) => document.head.appendChild(element);
+const css = (code, hash) => {
+  const id = `reshadow-${hash}`;
   if (isSSR) {
     serverMap[id] = code;
     return;
   }
-  var container = document.getElementById(RESHADOW_ID);
+  let container = document.getElementById(RESHADOW_ID);
   if (!container) {
     container = document.createElement("object");
     container.id = RESHADOW_ID;
     if (document.head) {
       appendChildToDocumentHead(container);
     } else {
-      document.addEventListener("DOMContentLoaded", function() {
+      document.addEventListener("DOMContentLoaded", () => {
         appendChildToDocumentHead(container);
       });
     }
   }
-  var css3 = document.getElementById(id);
-  if (!css3) {
-    css3 = document.createElement("style");
-    css3.id = id;
-    css3.type = "text/css";
-    container.appendChild(css3);
+  let css2 = document.getElementById(id);
+  if (!css2) {
+    css2 = document.createElement("style");
+    css2.id = id;
+    css2.type = "text/css";
+    container.appendChild(css2);
   }
-  css3.innerHTML = code;
+  css2.innerHTML = code;
 };
-var styles = {};
-var style;
-var stack = [];
-var _styled = function styled(elem) {
-  var curr = stack.pop() || [];
+let styles = {};
+let style;
+const stack = [];
+const styled = (elem) => {
+  const curr = stack.pop() || [];
   styles = curr[0] || styles;
   style = curr[1] || style;
-  _styled[KEYS.__styles__] = styles;
-  _styled[KEYS.__style__] = style;
+  styled[KEYS.__styles__] = styles;
+  styled[KEYS.__style__] = style;
   return elem;
 };
-_styled[KEYS.__styles__] = styles;
-var set = function set2(args, newStyle) {
-  var newStyles = create(args);
+styled[KEYS.__styles__] = styles;
+const set = (args, newStyle) => {
+  const newStyles = create(args);
   stack.push([styles, style]);
   styles = newStyles;
   style = newStyle;
   if (styles[KEYS.__style__]) {
     style = style ? Object.assign({}, style, styles[KEYS.__style__]) : styles[KEYS.__style__];
   }
-  _styled[KEYS.__styles__] = styles;
-  _styled[KEYS.__style__] = style;
-};
-var USE_PREFIX = "use--";
-var ELEMENT_PREFIX = "__";
-var MOD_PREFIX = "_";
-var MOD_SEPARATOR = "_";
-var parseElement = function parseElement2(name) {
-  return name.replace(ELEMENT_PREFIX, "");
-};
-var parseAttribute = function parseAttribute2(name) {
-  return name.replace(MOD_PREFIX, "").split(MOD_SEPARATOR);
-};
-var appendClassName = function appendClassName2(className) {
-  var cn = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "";
+  styled[KEYS.__styles__] = styles;
+  styled[KEYS.__style__] = style;
+};
+const USE_PREFIX = "use--";
+const ELEMENT_PREFIX = "__";
+const MOD_PREFIX = "_";
+const MOD_SEPARATOR = "_";
+const parseElement = (name) => name.replace(ELEMENT_PREFIX, "");
+const parseAttribute = (name) => name.replace(MOD_PREFIX, "").split(MOD_SEPARATOR);
+const appendClassName = (className, cn = "") => {
   if (className) {
     cn += (cn ? " " : "") + className;
   }
   return cn;
 };
-var appendElement = function appendElement2(styles2, key) {
-  var cn = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "";
-  return appendClassName(styles2[ELEMENT_PREFIX + key], cn);
-};
-var appendModifier = function appendModifier2(styles2, key, value) {
-  var cn = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "";
+const appendElement = (styles2, key, cn = "") => appendClassName(styles2[ELEMENT_PREFIX + key], cn);
+const appendModifier = (styles2, key, value, cn = "") => {
   if (value === void 0 || value === null || value === false || value === "") return cn;
   cn = appendClassName(styles2[MOD_PREFIX + key], cn);
-  if (typeof value === "boolean" || _typeof(value) === "object" || typeof value === "function") return cn;
+  if (typeof value === "boolean" || typeof value === "object" || typeof value === "function") return cn;
   cn = appendClassName(styles2[MOD_SEPARATOR + key + MOD_SEPARATOR + value], cn);
   return cn;
 };
 function map(element) {
-  var currStyles = _styled[KEYS.__styles__];
-  var nextProps = {};
-  var cn = appendElement(currStyles, element);
-  var vars = null;
-  var uses = currStyles[KEYS.__use__] || {};
-  var len = arguments.length;
-  var useProps;
-  for (var i = len - 1; i > 0; i--) {
-    var currProps = arguments[i];
+  const currStyles = styled[KEYS.__styles__];
+  const nextProps = {};
+  let cn = appendElement(currStyles, element);
+  let vars = null;
+  const uses = currStyles[KEYS.__use__] || {};
+  const len = arguments.length;
+  let useProps;
+  for (let i = len - 1; i > 0; i--) {
+    const currProps = arguments[i];
     if (!currProps) continue;
     useProps = useProps || currProps[KEYS.__use__];
     if (!vars && KEYS.__style__ in currProps) {
-      vars = _styled[KEYS.__style__];
+      vars = styled[KEYS.__style__];
     }
-    for (var key in currProps) {
+    for (const key in currProps) {
       if (key === KEYS.__use__ || key === KEYS.__style__ || key in nextProps) {
         continue;
       }
-      var value = currProps[key];
+      const value = currProps[key];
       cn = appendModifier(currStyles, key, value, cn);
-      var valueType = _typeof(value);
+      const valueType = typeof value;
       if (valueType === "string" || valueType === "boolean" || valueType === "number") {
-        var useKey = key + "_" + value;
+        const useKey = key + "_" + value;
         if (key + "_true" in uses || useKey in uses) {
           cn = appendModifier(currStyles, USE_PREFIX + key, value, cn);
           if (uses[useKey]) {
@@ -199,9 +186,9 @@ function map(element) {
     }
   }
   if (useProps) {
-    for (var _key in useProps) {
-      var _value = useProps[_key];
-      cn = appendModifier(currStyles, USE_PREFIX + _key, _value, cn);
+    for (const key in useProps) {
+      const value = useProps[key];
+      cn = appendModifier(currStyles, USE_PREFIX + key, value, cn);
     }
   }
   cn = appendClassName(nextProps[KEYS.__classProp__], cn);
@@ -229,6 +216,6 @@ export {
   parseAttribute,
   parseElement,
   set,
-  _styled as styled,
+  styled,
   use
 };

package/lib/esm/styled/sstyled.mjs

@@ -1,28 +1,25 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _cn from "classnames";
+import cn from "classnames";
 import { getStyles as getStyles$1 } from "./reshadow-core.mjs";
-var RESHADOW_ID = "__reshadow__";
-var isSSR = !(typeof window !== "undefined" && window.document && window.document.createElement);
-var serverMap = getStyles$1().map;
-var getStyles = function getStyles2() {
-  return {
-    map: serverMap,
-    get css() {
-      var serverStyles = "";
-      for (var id in serverMap) {
-        serverStyles += "<style type='text/css' id='".concat(id, "'>").concat(serverMap[id], "</style>");
-      }
-      return serverStyles;
+const RESHADOW_ID = "__reshadow__";
+const isSSR = !(typeof window !== "undefined" && window.document && window.document.createElement);
+const serverMap = getStyles$1().map;
+const getStyles = () => ({
+  map: serverMap,
+  get css() {
+    let serverStyles = "";
+    for (const id in serverMap) {
+      serverStyles += `<style type='text/css' id='${id}'>${serverMap[id]}</style>`;
     }
-  };
-};
+    return serverStyles;
+  }
+});
 function insert(code, hash) {
-  var id = "reshadow-".concat(hash);
+  const id = "reshadow-".concat(hash);
   if (isSSR) {
     serverMap[id] = code;
     return;
   }
-  var container = document.getElementById(RESHADOW_ID);
+  let container = document.getElementById(RESHADOW_ID);
   if (!container) {
     container = document.createElement("object");
     container.id = RESHADOW_ID;
@@ -34,7 +31,7 @@ function insert(code, hash) {
       });
     }
   }
-  var css = document.getElementById(id);
+  let css = document.getElementById(id);
   if (!css) {
     css = document.createElement("style");
     css.id = id;
@@ -43,35 +40,30 @@ function insert(code, hash) {
   }
   css.innerHTML = code;
 }
-function merge() {
-  var s1 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-  var s2 = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-  return Object.entries(s2).reduce(function(acc, _ref) {
-    var _ref2 = _slicedToArray(_ref, 2), key = _ref2[0], value = _ref2[1];
+function merge(s1 = {}, s2 = {}) {
+  return Object.entries(s2).reduce((acc, [key, value]) => {
     if (key.startsWith("@") || key.startsWith("--")) {
       acc[key] = value;
     } else {
-      acc[key] = _cn(acc[key], value);
+      acc[key] = cn(acc[key], value);
     }
     return acc;
   }, Object.assign({}, s1));
 }
 function getClassAndVars(styles, name, props) {
   function getPropValue(key, props2) {
-    var _props;
-    return (_props = props2["use:".concat(key)]) !== null && _props !== void 0 ? _props : props2[key];
+    return props2[`use:${key}`] ?? props2[key];
   }
-  return Object.entries(styles).reduce(function(acc, _ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2), key = _ref4[0], value = _ref4[1];
+  return Object.entries(styles).reduce((acc, [key, value]) => {
     if (key.startsWith("--")) {
       acc[1][value] = getPropValue(key.substring(2), props);
     } else if (name === key) {
       acc[0][value] = true;
     } else {
-      var _key$split = key.split("="), _key$split2 = _slicedToArray(_key$split, 2), mod = _key$split2[0], modValue = _key$split2[1];
-      var propValue = getPropValue(mod, props);
+      const [mod, modValue] = key.split("=");
+      const propValue = getPropValue(mod, props);
       if (modValue === void 0) {
-        acc[0][value] = Boolean(propValue !== null && propValue !== void 0 ? propValue : false);
+        acc[0][value] = Boolean(propValue ?? false);
       } else {
         acc[0][value] = propValue == modValue;
       }
@@ -79,14 +71,13 @@ function getClassAndVars(styles, name, props) {
     return acc;
   }, [{}, {}]);
 }
-var reshadowMap = /* @__PURE__ */ new WeakMap();
+const reshadowMap = /* @__PURE__ */ new WeakMap();
 function reshadowToShadow(obj) {
   if (reshadowMap.has(obj)) {
     return reshadowMap.get(obj);
   }
-  var shadowStyle = Object.entries(obj).reduce(function(style, _ref5) {
-    var _ref6 = _slicedToArray(_ref5, 2), name = _ref6[0], value = _ref6[1];
-    var n = name;
+  const shadowStyle = Object.entries(obj).reduce((style, [name, value]) => {
+    let n = name;
     if (name.startsWith("__")) {
       n = name.replace(/^__/, "");
     } else if (name.startsWith("_")) {
@@ -98,13 +89,12 @@ function reshadowToShadow(obj) {
   reshadowMap.set(obj, shadowStyle);
   return shadowStyle;
 }
-function sstyled() {
-  var styles = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+function sstyled(styles = {}) {
   return {
-    cn: function cn(name, props) {
-      var _getClassAndVars = getClassAndVars(reshadowToShadow(styles), name, props), _getClassAndVars2 = _slicedToArray(_getClassAndVars, 2), classes = _getClassAndVars2[0], style = _getClassAndVars2[1];
+    cn(name, props) {
+      const [classes, style] = getClassAndVars(reshadowToShadow(styles), name, props);
       if (Object.keys(classes).length) {
-        props.className = _cn(props.className, classes);
+        props.className = cn(props.className, classes);
       }
       if (Object.keys(style).length) {
         props.style = Object.assign(style, props.style);