@wavemaker/app-rn-runtime 12.0.0-next.45752 → 12.0.0-next.47809

package/styles/style-props.js

@@ -0,0 +1,102 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+export class StyleProps {
+  constructor() {
+    _defineProperty(this, "backgroundimage", void 0);
+    _defineProperty(this, "backgroundsize", void 0);
+    _defineProperty(this, "backgroundrepeat", void 0);
+    _defineProperty(this, "backgroundresizemode", void 0);
+    _defineProperty(this, "backgroundposition", void 0);
+    _defineProperty(this, "backgroundcolor", void 0);
+    _defineProperty(this, "bordercolor", void 0);
+    _defineProperty(this, "borderradius", void 0);
+    _defineProperty(this, "borderstyle", void 0);
+    _defineProperty(this, "borderwidth", void 0);
+    _defineProperty(this, "borderbottomwidth", void 0);
+    _defineProperty(this, "borderleftwidth", void 0);
+    _defineProperty(this, "borderrightwidth", void 0);
+    _defineProperty(this, "bordertopwidth", void 0);
+    _defineProperty(this, "color", void 0);
+    _defineProperty(this, "display", void 0);
+    _defineProperty(this, "fontsize", void 0);
+    _defineProperty(this, "fontfamily", void 0);
+    _defineProperty(this, "fontstyle", void 0);
+    _defineProperty(this, "fontvariant", void 0);
+    _defineProperty(this, "fontweight", void 0);
+    _defineProperty(this, "height", void 0);
+    _defineProperty(this, "horizontalalign", void 0);
+    _defineProperty(this, "lineheight", void 0);
+    _defineProperty(this, "margin", void 0);
+    _defineProperty(this, "marginbottom", void 0);
+    _defineProperty(this, "marginleft", void 0);
+    _defineProperty(this, "marginright", void 0);
+    _defineProperty(this, "margintop", void 0);
+    _defineProperty(this, "opacity", void 0);
+    _defineProperty(this, "overflow", void 0);
+    _defineProperty(this, "padding", void 0);
+    _defineProperty(this, "paddingbottom", void 0);
+    _defineProperty(this, "paddingleft", void 0);
+    _defineProperty(this, "paddingright", void 0);
+    _defineProperty(this, "paddingtop", void 0);
+    _defineProperty(this, "textalign", void 0);
+    _defineProperty(this, "textdecoration", void 0);
+    _defineProperty(this, "verticalalign", void 0);
+    _defineProperty(this, "width", void 0);
+    _defineProperty(this, "zindex", void 0);
+    _defineProperty(this, "top", void 0);
+    // Use appropriate type (number, string, etc.)
+    _defineProperty(this, "bottom", void 0);
+    _defineProperty(this, "left", void 0);
+    _defineProperty(this, "right", void 0);
+  }
+}
+const styleMapping = {
+  backgroundimage: 'backgroundImage',
+  backgroundsize: 'backgroundSize',
+  backgroundrepeat: 'backgroundRepeat',
+  backgroundresizemode: 'backgroundResizeMode',
+  backgroundposition: 'backgroundPosition',
+  backgroundcolor: 'backgroundColor',
+  bordercolor: 'borderColor',
+  borderradius: 'borderRadius',
+  borderstyle: 'borderStyle',
+  borderwidth: 'borderWidth',
+  borderbottomwidth: 'borderBottomWidth',
+  borderleftwidth: 'borderLeftWidth',
+  borderrightwidth: 'borderRightWidth',
+  bordertopwidth: 'borderTopWidth',
+  color: 'color',
+  display: 'display',
+  fontsize: 'fontSize',
+  fontfamily: 'fontFamily',
+  fontstyle: 'fontStyle',
+  fontvariant: 'fontVariant',
+  fontweight: 'fontWeight',
+  height: 'height',
+  //horizontalalign: any;
+  lineheight: 'lineHeight',
+  margin: 'margin',
+  marginbottom: 'marginBottom',
+  marginleft: 'marginLeft',
+  marginright: 'marginRight',
+  margintop: 'marginTop',
+  opacity: 'opacity',
+  overflow: 'overflow',
+  padding: 'padding',
+  paddingbottom: 'paddingBottom',
+  paddingleft: 'paddingLeft',
+  paddingright: 'paddingRight',
+  paddingtop: 'paddingTop',
+  textalign: 'textAlign',
+  textdecoration: 'textDecoration',
+  verticalalign: 'verticalAlign',
+  width: 'width',
+  zindex: 'zindex',
+  top: 'top',
+  bottom: 'bottom',
+  left: 'left',
+  right: 'right'
+};
+export const getStyleName = name => styleMapping[name];
+//# sourceMappingURL=style-props.js.map

package/styles/style-props.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleProps","constructor","_defineProperty","styleMapping","backgroundimage","backgroundsize","backgroundrepeat","backgroundresizemode","backgroundposition","backgroundcolor","bordercolor","borderradius","borderstyle","borderwidth","borderbottomwidth","borderleftwidth","borderrightwidth","bordertopwidth","color","display","fontsize","fontfamily","fontstyle","fontvariant","fontweight","height","lineheight","margin","marginbottom","marginleft","marginright","margintop","opacity","overflow","padding","paddingbottom","paddingleft","paddingright","paddingtop","textalign","textdecoration","verticalalign","width","zindex","top","bottom","left","right","getStyleName","name"],"sources":["style-props.ts"],"sourcesContent":["export class StyleProps {\n    backgroundimage?: any;\n    backgroundsize?: any;\n    backgroundrepeat?: any;\n    backgroundresizemode?: any;\n    backgroundposition?: any;\n    backgroundcolor?: any;\n    bordercolor?: any;\n    borderradius?: any;\n    borderstyle?: any;\n    borderwidth?: any;\n    borderbottomwidth?: any;\n    borderleftwidth?: any;\n    borderrightwidth?: any;\n    bordertopwidth?: any;\n    color?: any;\n    display?: any;\n    fontsize?: any;\n    fontfamily?: any;\n    fontstyle?: any;\n    fontvariant?: any;\n    fontweight?: any;\n    height?: any;\n    horizontalalign?: any;\n    lineheight?: any;\n    margin?: any;\n    marginbottom?: any;\n    marginleft?: any;\n    marginright?: any;\n    margintop?: any;\n    opacity?: any;\n    overflow?: any;\n    padding?: any;\n    paddingbottom?: any;\n    paddingleft?: any;\n    paddingright?: any;\n    paddingtop?: any;\n    textalign?: any;\n    textdecoration?: any;\n    verticalalign?: any;\n    width?: any;\n    zindex?: any;\n    top?: number | string;  // Use appropriate type (number, string, etc.)\n    bottom?: number | string;\n    left?: number | string;\n    right?: number | string;\n}\n\nconst styleMapping = {\n    backgroundimage: 'backgroundImage',\n    backgroundsize: 'backgroundSize',\n    backgroundrepeat: 'backgroundRepeat',\n    backgroundresizemode: 'backgroundResizeMode',\n    backgroundposition: 'backgroundPosition',\n    backgroundcolor: 'backgroundColor',\n    bordercolor: 'borderColor',\n    borderradius: 'borderRadius',\n    borderstyle: 'borderStyle',\n    borderwidth: 'borderWidth',\n    borderbottomwidth: 'borderBottomWidth',\n    borderleftwidth: 'borderLeftWidth',\n    borderrightwidth: 'borderRightWidth',\n    bordertopwidth: 'borderTopWidth',\n    color: 'color',\n    display: 'display',\n    fontsize: 'fontSize',\n    fontfamily: 'fontFamily',\n    fontstyle: 'fontStyle',\n    fontvariant: 'fontVariant',\n    fontweight: 'fontWeight',\n    height: 'height',\n    //horizontalalign: any;\n    lineheight: 'lineHeight',\n    margin: 'margin',\n    marginbottom: 'marginBottom',\n    marginleft: 'marginLeft',\n    marginright: 'marginRight',\n    margintop: 'marginTop',\n    opacity: 'opacity',\n    overflow: 'overflow',\n    padding: 'padding',\n    paddingbottom: 'paddingBottom',\n    paddingleft: 'paddingLeft',\n    paddingright: 'paddingRight',\n    paddingtop: 'paddingTop',\n    textalign: 'textAlign',\n    textdecoration: 'textDecoration',\n    verticalalign: 'verticalAlign',\n    width: 'width',\n    zindex: 'zindex',\n    top: 'top',\n    bottom: 'bottom',\n    left: 'left',\n    right: 'right'\n    };\n\nexport const getStyleName = (name: string) => (styleMapping as any)[name];\n"],"mappings":";;;AAAA,OAAO,MAAMA,UAAU,CAAC;EAAAC,YAAA;IAAAC,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;IA0CI;IAAAA,eAAA;IAAAA,eAAA;IAAAA,eAAA;EAAA;AAI5B;AAEA,MAAMC,YAAY,GAAG;EACjBC,eAAe,EAAE,iBAAiB;EAClCC,cAAc,EAAE,gBAAgB;EAChCC,gBAAgB,EAAE,kBAAkB;EACpCC,oBAAoB,EAAE,sBAAsB;EAC5CC,kBAAkB,EAAE,oBAAoB;EACxCC,eAAe,EAAE,iBAAiB;EAClCC,WAAW,EAAE,aAAa;EAC1BC,YAAY,EAAE,cAAc;EAC5BC,WAAW,EAAE,aAAa;EAC1BC,WAAW,EAAE,aAAa;EAC1BC,iBAAiB,EAAE,mBAAmB;EACtCC,eAAe,EAAE,iBAAiB;EAClCC,gBAAgB,EAAE,kBAAkB;EACpCC,cAAc,EAAE,gBAAgB;EAChCC,KAAK,EAAE,OAAO;EACdC,OAAO,EAAE,SAAS;EAClBC,QAAQ,EAAE,UAAU;EACpBC,UAAU,EAAE,YAAY;EACxBC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE,aAAa;EAC1BC,UAAU,EAAE,YAAY;EACxBC,MAAM,EAAE,QAAQ;EAChB;EACAC,UAAU,EAAE,YAAY;EACxBC,MAAM,EAAE,QAAQ;EAChBC,YAAY,EAAE,cAAc;EAC5BC,UAAU,EAAE,YAAY;EACxBC,WAAW,EAAE,aAAa;EAC1BC,SAAS,EAAE,WAAW;EACtBC,OAAO,EAAE,SAAS;EAClBC,QAAQ,EAAE,UAAU;EACpBC,OAAO,EAAE,SAAS;EAClBC,aAAa,EAAE,eAAe;EAC9BC,WAAW,EAAE,aAAa;EAC1BC,YAAY,EAAE,cAAc;EAC5BC,UAAU,EAAE,YAAY;EACxBC,SAAS,EAAE,WAAW;EACtBC,cAAc,EAAE,gBAAgB;EAChCC,aAAa,EAAE,eAAe;EAC9BC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,QAAQ;EAChBC,GAAG,EAAE,KAAK;EACVC,MAAM,EAAE,QAAQ;EAChBC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE;AACP,CAAC;AAEL,OAAO,MAAMC,YAAY,GAAIC,IAAY,IAAM9C,YAAY,CAAS8C,IAAI,CAAC","ignoreList":[]}

package/styles/theme.js

@@ -0,0 +1,548 @@
+var _Theme;
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { cloneDeep, isNil, forEach, flatten, isArray, isEmpty, isObject, isString, get, reverse, isNumber } from 'lodash';
+import React from 'react';
+import { camelCase } from 'lodash-es';
+import { Dimensions } from 'react-native';
+import { deepCopy, isWebPreviewMode } from '@wavemaker/app-rn-runtime/core/utils';
+import EventNotifier from '@wavemaker/app-rn-runtime/core/event-notifier';
+import ViewPort, { EVENTS as ViewPortEvents } from '@wavemaker/app-rn-runtime/core/viewport';
+import MediaQueryList from './MediaQueryList';
+import ThemeVariables from './theme.variables';
+import ColorMix from './color-mix';
+import { getErrorMessage, getStyleReference, isValidStyleProp } from './style-prop.validator';
+import injector from '@wavemaker/app-rn-runtime/core/injector';
+import { isNativeStyle } from '@wavemaker/app-rn-runtime/core/utils';
+export const DEFAULT_CLASS = 'DEFAULT_CLASS';
+if (typeof window !== "undefined") {
+  // @ts-ignore: does not properly extend MediaQueryList
+  window.matchMedia = query => new MediaQueryList(query);
+}
+export const DEVICE_BREAK_POINTS = {
+  'MIN_EXTRA_SMALL_DEVICE': '0px',
+  'MAX_EXTRA_SMALL_DEVICE': '767px',
+  'MIN_SMALL_DEVICE': '768px',
+  'MAX_SMALL_DEVICE': '991px',
+  'MIN_MEDIUM_DEVICE': '992px',
+  'MAX_MEDIUM_DEVICE': '1199px',
+  'MIN_LARGE_DEVICE': '1200px',
+  'MAX_LARGE_DEVICE': '1000000px'
+};
+export const DEVICE_BREAK_POINTS_NATIVE_MOBILE = {
+  'MIN_EXTRA_SMALL_DEVICE': '0',
+  // 0-479px (phones portrait)
+  'MAX_EXTRA_SMALL_DEVICE': '479',
+  'MIN_SMALL_DEVICE': '480',
+  // 480-767px (phones landscape, small tablets portrait)
+  'MAX_SMALL_DEVICE': '767',
+  'MIN_MEDIUM_DEVICE': '768',
+  // 768-1023px (tablets portrait, small laptops)
+  'MAX_MEDIUM_DEVICE': '1023',
+  'MIN_LARGE_DEVICE': '1024',
+  // 1024px+ (tablets landscape, desktops)
+  'MAX_LARGE_DEVICE': '1000000'
+};
+export let ThemeEvent = /*#__PURE__*/function (ThemeEvent) {
+  ThemeEvent["CHANGE"] = "change";
+  return ThemeEvent;
+}({});
+;
+export class Theme {
+  constructor(parent, name) {
+    var _this$getAppConfig;
+    this.parent = parent;
+    this.name = name;
+    _defineProperty(this, "eventNotifer", new EventNotifier());
+    _defineProperty(this, "children", []);
+    _defineProperty(this, "styles", {});
+    _defineProperty(this, "cache", {});
+    _defineProperty(this, "traceEnabled", false);
+    _defineProperty(this, "revertLayoutToExpo50", void 0);
+    _defineProperty(this, "styleGenerators", []);
+    this.revertLayoutToExpo50 = ((_this$getAppConfig = this.getAppConfig()) === null || _this$getAppConfig === void 0 ? void 0 : _this$getAppConfig.revertLayoutToExpo50) || false;
+    if (parent) {
+      this.traceEnabled = parent.traceEnabled;
+    } else {
+      this.traceEnabled = isWebPreviewMode();
+    }
+  }
+  getAppConfig() {
+    return injector.get('APP_CONFIG');
+  }
+  enableTrace(flag) {
+    this.traceEnabled = flag;
+    this.reset();
+    this.children.forEach(t => t.enableTrace(flag));
+  }
+  subscribe(event, fn) {
+    return this.eventNotifer.subscribe(event, fn);
+  }
+  notify(event) {
+    this.eventNotifer.notify(event, []);
+    this.children.forEach(t => t.notify(event));
+  }
+  replaceVariables(val, baseTokens, classNames, inheritedTokens = {}) {
+    if (isString(val)) {
+      (val.match(/_*var\([^\)]*\)/g) || []).forEach(s => {
+        const content = s.substring(4, s.length - 1);
+        let [variableName, fallback] = content.split(",").map(str => str.trim());
+        let resolvedValue;
+        let variants = ThemeVariables.INSTANCE.variants;
+        if (variants && typeof classNames === 'string') {
+          const classList = classNames.split(/\s+/);
+          for (const cls of classList) {
+            if (variants[cls] && variants[cls][variableName]) {
+              resolvedValue = variants[cls][variableName];
+              break;
+            }
+          }
+        }
+        if (!resolvedValue) {
+          resolvedValue = inheritedTokens[variableName] || inheritedTokens[`--${variableName}`] || baseTokens[variableName] || ThemeVariables.INSTANCE[variableName] || ThemeVariables.INSTANCE[variableName.substring(2)] || ThemeVariables.INSTANCE[camelCase(variableName.substring(2))] || fallback;
+        }
+        val = val.replace(s, resolvedValue);
+        if (isNumber(resolvedValue) && val.trim() === resolvedValue + '') {
+          val = resolvedValue;
+        } else {
+          val = this.replaceVariables(val, baseTokens, classNames, inheritedTokens);
+        }
+      });
+    }
+    return val;
+  }
+  clearCache() {
+    this.cache = {};
+    this.children.forEach(t => t.clearCache());
+  }
+  registerStyle(fn) {
+    this.styleGenerators.push(fn);
+    fn(ThemeVariables.INSTANCE, this.addStyle.bind(this));
+  }
+  checkStyleProperties(name, value) {
+    if (isObject(value)) {
+      Object.keys(value).map(k => this.checkStyleProperties(k, value[k]));
+    } else if (name && !(isString(value) && value.startsWith('calc(')) && !isValidStyleProp(name, value)) {
+      console.log(`%cInvalid Style property in ${this.name}: ${getErrorMessage(name, value)}`, 'background-color: #FF0000;font-weight: bold; color: #fff');
+      console.log(`Refer: ${getStyleReference(name)}`);
+    }
+  }
+  addStyle(name, extend, style) {
+    this.styles[name] = deepCopy(this.getStyle(extend), this.styles[name], style);
+  }
+  addTrace(styleName, mergedChildstyle, childStyle, parentStyle) {
+    if (!this.traceEnabled) {
+      return;
+    }
+    let addTrace = !isEmpty(childStyle);
+    forEach(mergedChildstyle, (v, k) => {
+      if (v && !isString(v) && !isArray(v) && isObject(v)) {
+        addTrace = false;
+        if (!isNativeStyle(k, 'property')) {
+          this.addTrace(styleName + '.' + k, v, childStyle && childStyle[k], parentStyle && parentStyle[k]);
+        }
+      }
+    });
+    if (addTrace) {
+      mergedChildstyle['__trace'] = [{
+        name: styleName,
+        value: childStyle
+      }, ...((parentStyle === null || parentStyle === void 0 ? void 0 : parentStyle.__trace) || [])];
+    } else {
+      mergedChildstyle['__trace'] = [...((parentStyle === null || parentStyle === void 0 ? void 0 : parentStyle.__trace) || [])];
+    }
+  }
+  flatten(style, prefix = "", result = {}) {
+    let collect = !isEmpty(style);
+    forEach(style, (v, k) => {
+      if (v && !isString(v) && !isArray(v) && isObject(v)) {
+        collect = false;
+        this.flatten(v, (prefix ? prefix + '.' : '') + k, result);
+      }
+    });
+    if (collect) {
+      result[prefix] = style;
+    }
+    return result;
+  }
+  extractTopLevelVariables(style) {
+    const vars = {};
+    for (const key in style) {
+      if (key.startsWith('--')) {
+        vars[key] = style[key];
+      }
+    }
+    return vars;
+  }
+  mergeStyle(...styles) {
+    const style = deepCopy(...styles);
+    if (this.traceEnabled) {
+      const flattenStyles = this.flatten(style);
+      Object.keys(flattenStyles).forEach(k => {
+        const s = flattenStyles[k];
+        if (!isNativeStyle(k, 'path')) {
+          s['__trace'] = flatten(reverse(styles.map(v => {
+            const cs = get(v, k);
+            if (cs && cs.__trace) {
+              return [...cs.__trace];
+            }
+            return [];
+          }).filter(t => t.length > 0)));
+        }
+      });
+    }
+    const baseTokens = this.extractTopLevelVariables(style);
+    const classnames = Array.isArray(styles) ? styles.filter(isString).join(' ') : Object.values(styles).filter(isString).join(' ');
+    return this.cleanseStyleProperties(style, baseTokens, classnames);
+  }
+  cleanseStyleProperties(style, baseTokens, classnames, inheritedTokens = {}) {
+    if (!(style && isObject(style)) || isString(style) || isArray(style)) {
+      return style;
+    }
+    style = style;
+    if (isObject(style) && !isArray(style)) {
+      const resolveStyle = (v, inheritedTokens = {}) => {
+        v = this.replaceVariables(v, baseTokens, classnames, inheritedTokens);
+        if (isString(v) && v.startsWith("color-mix(")) {
+          v = ColorMix.valueOf(v);
+        }
+        return v;
+      };
+      const classNames = Object.keys(style);
+      const resolvedTokens = {
+        ...inheritedTokens
+      };
+      // For inline token in obj
+      classNames.forEach(k => {
+        if (k.startsWith('--')) {
+          let v = resolveStyle(style[k], resolvedTokens);
+          resolvedTokens[k] = v;
+          const variableName = k.substring(2);
+          ThemeVariables.INSTANCE[variableName] = v;
+          ThemeVariables.INSTANCE[camelCase(variableName)] = v;
+        }
+      });
+
+      // For edge case when prop is before inline token
+      classNames.forEach(k => {
+        if (!k.startsWith('--')) {
+          if (isObject(style[k]) && !isArray(style[k])) {
+            this.cleanseStyleProperties(style[k], baseTokens, classnames, resolvedTokens);
+          } else {
+            style[k] = resolveStyle(style[k], resolvedTokens);
+          }
+        }
+      });
+    }
+    if (!isNil(style['shadowRadius'])) {
+      if (style['shadowRadius'] <= 0) {
+        style['shadowColor'] = 'transparent';
+      } else if (isNil(style['elevation'])) {
+        style['elevation'] = 2;
+      }
+    }
+    if (!isNil(style['margin'])) {
+      style['marginLeft'] = style['marginLeft'] || style['margin'];
+      style['marginRight'] = style['marginRight'] || style['margin'];
+      style['marginTop'] = style['marginTop'] || style['margin'];
+      style['marginBottom'] = style['marginBottom'] || style['margin'];
+      delete style['margin'];
+    }
+    if (!isNil(style['padding'])) {
+      style['paddingLeft'] = style['paddingLeft'] || style['padding'];
+      style['paddingRight'] = style['paddingRight'] || style['padding'];
+      style['paddingTop'] = style['paddingTop'] || style['padding'];
+      style['paddingBottom'] = style['paddingBottom'] || style['padding'];
+      delete style['padding'];
+    }
+    if (this.revertLayoutToExpo50 && !isNil(style['flexDirection']) && style['flexDirection'] === 'row-reverse') {
+      if (!isNil(style['paddingLeft']) || !isNil(style['paddingRight'])) {
+        if (!isNil(style['paddingLeft']) && !isNil(style['paddingRight'])) {
+          [style['paddingLeft'], style['paddingRight']] = [style['paddingRight'], style['paddingLeft']];
+        } else {
+          const [paddingLeft, paddingRight] = [style['paddingLeft'], style['paddingRight']];
+          if (paddingLeft !== undefined) {
+            style['paddingRight'] = paddingLeft;
+            delete style['paddingLeft'];
+          }
+          if (paddingRight !== undefined) {
+            style['paddingLeft'] = paddingRight;
+            delete style['paddingRight'];
+          }
+        }
+      }
+      if (!isNil(style['marginLeft']) || !isNil(style['marginRight'])) {
+        if (!isNil(style['marginLeft']) && !isNil(style['marginRight'])) {
+          [style['marginLeft'], style['marginRight']] = [style['marginRight'], style['marginLeft']];
+        } else {
+          const [marginLeft, marginRight] = [style['marginLeft'], style['marginRight']];
+          if (marginLeft !== undefined) {
+            style['marginRight'] = marginLeft;
+            delete style['marginLeft'];
+          }
+          if (marginRight !== undefined) {
+            style['marginLeft'] = marginRight;
+            delete style['marginRight'];
+          }
+        }
+      }
+    }
+    let screenWidth = Dimensions.get('window').width;
+    let screenHeight = Dimensions.get('window').height;
+    Object.keys(style).forEach((k, i) => {
+      let stylePropertyValue = style[k];
+      if (typeof stylePropertyValue === 'string' && stylePropertyValue.endsWith('vw')) {
+        stylePropertyValue = stylePropertyValue.replace('vw', '');
+        style[k] = Number(stylePropertyValue) / 100 * screenWidth;
+      }
+      if (typeof stylePropertyValue === 'string' && stylePropertyValue.endsWith('vh')) {
+        stylePropertyValue = stylePropertyValue.replace('vh', '');
+        style[k] = Number(stylePropertyValue) / 100 * screenHeight;
+      }
+    });
+    return style;
+  }
+  getStyle(name) {
+    let style = this.cache[name];
+    if (style) {
+      return style;
+    }
+    if (!name) {
+      return {};
+    }
+    if (name.indexOf(' ') > 0) {
+      style = this.mergeStyle(...name.split(' ').map(c => this.getStyle(c)));
+    } else {
+      const parentStyle = this.parent && this.parent.getStyle(name);
+      const mediaQuery = (this.styles[name] || {})['@media'];
+      let clonedStyle = {
+        root: {}
+      };
+      if (!mediaQuery || matchMedia(mediaQuery).matches) {
+        clonedStyle = cloneDeep(this.styles[name]) || {};
+        clonedStyle['root'] = clonedStyle['root'] || {};
+        const extraTextStyles = this.getTextStyle(clonedStyle) || {};
+        clonedStyle['text'] = Object.assign({}, extraTextStyles, clonedStyle['text'] || {});
+        Object.keys(clonedStyle).forEach(k => {
+          const isValObject = isObject(clonedStyle[k]);
+          if (!extraTextStyles[k] && (!isValObject || k === 'shadowOffset')) {
+            clonedStyle['root'][k] = clonedStyle['root'][k] || clonedStyle[k];
+          }
+        });
+      }
+      if (this !== Theme.BASE && isWebPreviewMode()) {
+        this.checkStyleProperties('', clonedStyle);
+      }
+      style = deepCopy(parentStyle, clonedStyle);
+      this.addTrace(`@${this.name}:${name}`, style, clonedStyle, parentStyle);
+    }
+    this.cache[name] = style;
+    return style;
+  }
+  $new(name = "", styles = {}) {
+    const newTheme = new Theme(this, name);
+    newTheme.reset(styles);
+    this.children.push(newTheme);
+    return newTheme;
+  }
+  destroy() {
+    const i = this.parent.children.indexOf(this);
+    if (i >= 0) {
+      this.parent.children.splice(i, 1);
+    }
+  }
+  getTextStyle(s) {
+    if (!s) {
+      return {};
+    }
+    const textStyle = {
+      color: s.color,
+      fontFamily: s.fontFamily,
+      fontSize: s.fontSize,
+      fontStyle: s.fontStyle,
+      fontWeight: s.fontWeight,
+      includeFontPadding: s.includeFontPadding,
+      fontVariant: s.fontVariant,
+      letterSpacing: s.letterSpacing,
+      lineHeight: s.lineHeight,
+      textAlign: s.textAlign,
+      textAlignVertical: s.textAlignVertical,
+      textDecorationColor: s.textDecorationColor,
+      textDecorationStyle: s.textDecorationStyle,
+      textShadowColor: s.textShadowColor,
+      textShadowOffset: s.textShadowOffset,
+      textShadowRadius: s.textShadowRadius,
+      textTransform: s.textTransform,
+      verticalAlign: s.verticalAlign,
+      writingDirection: s.writingDirection,
+      userSelect: s.userSelect
+    };
+    Object.keys(textStyle).forEach(k => {
+      if (!textStyle[k]) {
+        delete textStyle[k];
+      }
+    });
+    return textStyle;
+  }
+  reset(styles) {
+    this.styles = {};
+    this.clearCache();
+    if (styles) {
+      this.registerStyle((themeVariables, addStyle) => {
+        Object.keys(styles).forEach(k => {
+          addStyle(k, '', styles[k]);
+        });
+      });
+    } else {
+      this.styleGenerators.forEach(fn => fn(ThemeVariables.INSTANCE, this.addStyle.bind(this)));
+    }
+    this.notify(ThemeEvent.CHANGE);
+  }
+}
+_Theme = Theme;
+_defineProperty(Theme, "BASE", new _Theme(null, 'default'));
+ViewPort.subscribe(ViewPortEvents.SIZE_CHANGE, () => {
+  _Theme.BASE.reset();
+});
+export default Theme.BASE;
+const ThemeContext = /*#__PURE__*/React.createContext(null);
+export const ThemeProvider = ThemeContext.Provider;
+export const ThemeConsumer = ThemeContext.Consumer;
+/**
+ * Common styles
+ */
+Theme.BASE.registerStyle((themeVariables, addStyle) => {
+  const addColStyles = (device, minWidth) => {
+    for (let i = 1; i <= 12; i++) {
+      addStyle(`col-${device}-${i}`, '', {
+        "@media": `(min-width: ${minWidth})`,
+        root: {
+          width: 100 * i / 12 + '%'
+        }
+      });
+    }
+  };
+  addColStyles('xs', DEVICE_BREAK_POINTS.MIN_EXTRA_SMALL_DEVICE);
+  addColStyles('sm', DEVICE_BREAK_POINTS.MIN_SMALL_DEVICE);
+  addColStyles('md', DEVICE_BREAK_POINTS.MIN_MEDIUM_DEVICE);
+  addColStyles('lg', DEVICE_BREAK_POINTS.MIN_LARGE_DEVICE);
+  addStyle('d-none', '', {
+    root: {
+      display: 'none'
+    }
+  });
+  addStyle('d-flex', '', {
+    root: {
+      display: 'flex'
+    }
+  });
+  const addDisplayStyles = (device, minWidth, maxWidth) => {
+    addStyle(`d-${device}-none`, '', {
+      "@media": `(min-width: ${minWidth}) and (max-width: ${maxWidth})`,
+      root: {
+        display: 'none'
+      }
+    });
+    addStyle(`d-${device}-flex`, '', {
+      "@media": `(min-width: ${minWidth}) and (max-width: ${maxWidth})`,
+      root: {
+        display: 'flex'
+      }
+    });
+  };
+  addDisplayStyles('all', DEVICE_BREAK_POINTS.MIN_EXTRA_SMALL_DEVICE, DEVICE_BREAK_POINTS.MAX_LARGE_DEVICE);
+  addDisplayStyles('xs', DEVICE_BREAK_POINTS.MIN_EXTRA_SMALL_DEVICE, DEVICE_BREAK_POINTS.MAX_EXTRA_SMALL_DEVICE);
+  addDisplayStyles('sm', DEVICE_BREAK_POINTS.MIN_SMALL_DEVICE, DEVICE_BREAK_POINTS.MAX_SMALL_DEVICE);
+  addDisplayStyles('md', DEVICE_BREAK_POINTS.MIN_MEDIUM_DEVICE, DEVICE_BREAK_POINTS.MAX_MEDIUM_DEVICE);
+  addDisplayStyles('lg', DEVICE_BREAK_POINTS.MIN_LARGE_DEVICE, DEVICE_BREAK_POINTS.MAX_LARGE_DEVICE);
+  const addElevationClasses = () => {
+    for (let i = 1; i <= 10; i++) {
+      addStyle(`elevate${i}`, '', {
+        root: {
+          shadowColor: "#000000",
+          shadowOffset: {
+            width: i,
+            height: i
+          },
+          shadowOpacity: 0.27,
+          shadowRadius: i,
+          elevation: i,
+          zIndex: 1
+        }
+      });
+    }
+  };
+  addElevationClasses();
+  addStyle('hidden', '', {
+    root: {
+      width: 0,
+      height: 0,
+      transform: [{
+        scale: 0
+      }],
+      overflow: 'hidden'
+    }
+  });
+  addStyle('bg-danger', '', {
+    root: {
+      backgroundColor: themeVariables.dangerColor
+    }
+  });
+  addStyle('bg-info', '', {
+    root: {
+      backgroundColor: themeVariables.infoColor
+    }
+  });
+  addStyle('bg-primary', '', {
+    root: {
+      backgroundColor: themeVariables.primaryColor
+    }
+  });
+  addStyle('bg-success', '', {
+    root: {
+      backgroundColor: themeVariables.successColor
+    }
+  });
+  addStyle('bg-warning', '', {
+    root: {
+      backgroundColor: themeVariables.warningColor
+    }
+  });
+  addStyle('border-danger', '', {
+    root: {
+      borderColor: themeVariables.dangerColor
+    }
+  });
+  addStyle('border-info', '', {
+    root: {
+      borderColor: themeVariables.infoColor
+    }
+  });
+  addStyle('border-primary', '', {
+    root: {
+      borderColor: themeVariables.primaryColor
+    }
+  });
+  addStyle('border-success', '', {
+    root: {
+      borderColor: themeVariables.successColor
+    }
+  });
+  addStyle('border-warning', '', {
+    root: {
+      borderColor: themeVariables.warningColor
+    }
+  });
+  addStyle('hide-context-menu', '', {
+    text: {
+      userSelect: 'none'
+    }
+  });
+  addStyle('hide-context-menu-input', '', {
+    text: {
+      userSelect: 'none'
+    }
+  });
+});
+//# sourceMappingURL=theme.js.map