@wavemaker-ai/app-rn-runtime 1.0.0-rc.647469

package/styles/theme.js

@@ -0,0 +1,725 @@
+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, Platform } from 'react-native';
+import { deepCopy, isWebPreviewMode } from '@wavemaker-ai/app-rn-runtime/core/utils';
+import EventNotifier from '@wavemaker-ai/app-rn-runtime/core/event-notifier';
+import ViewPort, { EVENTS as ViewPortEvents } from '@wavemaker-ai/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-ai/app-rn-runtime/core/injector';
+import { isNativeStyle } from '@wavemaker-ai/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': '0px',
+  // 0-479px (phones portrait)
+  'MAX_EXTRA_SMALL_DEVICE': '479px',
+  'MIN_SMALL_DEVICE': '480px',
+  // 480-767px (phones landscape, small tablets portrait)
+  'MAX_SMALL_DEVICE': '767px',
+  'MIN_MEDIUM_DEVICE': '768px',
+  // 768-1023px (tablets portrait, small laptops)
+  'MAX_MEDIUM_DEVICE': '1023px',
+  'MIN_LARGE_DEVICE': '1024px',
+  // 1024px+ (tablets landscape, desktops)
+  'MAX_LARGE_DEVICE': '1000000px'
+};
+export const getBreakPointValue = name => {
+  if (Platform.OS === 'web') {
+    return DEVICE_BREAK_POINTS[name];
+  }
+  return DEVICE_BREAK_POINTS_NATIVE_MOBILE[name];
+};
+
+/** Split `var()` inner content into custom property name and optional fallback. Only commas outside `()` count (so rgba(), linear-gradient(), etc. stay intact). */
+function splitVarArguments(content) {
+  let depth = 0;
+  for (let i = 0; i < content.length; i++) {
+    const c = content[i];
+    if (c === '(') {
+      depth++;
+    } else if (c === ')') {
+      depth--;
+    } else if (c === ',' && depth === 0) {
+      return {
+        variableName: content.substring(0, i).trim(),
+        fallback: content.substring(i + 1).trim()
+      };
+    }
+  }
+  return {
+    variableName: content.trim()
+  };
+}
+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, resetCache = true) {
+    this.traceEnabled = flag;
+    if (resetCache && resetCache !== 'false') {
+      this.reset();
+    }
+    this.children.forEach(t => t.enableTrace(flag, resetCache));
+  }
+  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);
+        const {
+          variableName,
+          fallback
+        } = splitVarArguments(content);
+        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) {
+          var _ref, _ref2, _ref3, _ref4, _ref5, _inheritedTokens$vari;
+          resolvedValue = (_ref = (_ref2 = (_ref3 = (_ref4 = (_ref5 = (_inheritedTokens$vari = inheritedTokens[variableName]) !== null && _inheritedTokens$vari !== void 0 ? _inheritedTokens$vari : inheritedTokens[`--${variableName}`]) !== null && _ref5 !== void 0 ? _ref5 : baseTokens[variableName]) !== null && _ref4 !== void 0 ? _ref4 : ThemeVariables.INSTANCE[variableName]) !== null && _ref3 !== void 0 ? _ref3 : ThemeVariables.INSTANCE[variableName.substring(2)]) !== null && _ref2 !== void 0 ? _ref2 : ThemeVariables.INSTANCE[camelCase(variableName.substring(2))]) !== null && _ref !== void 0 ? _ref : fallback;
+        }
+        val = val.replace(s, resolvedValue);
+        if (isNumber(resolvedValue) && val.trim() === resolvedValue + '') {
+          val = resolvedValue;
+        } else {
+          val = this.replaceVariables(val, baseTokens, classNames, inheritedTokens);
+        }
+      });
+    }
+    if (isString(val) && val.match(/^-?\d+(\.\d+)?$/)) {
+      return parseFloat(val);
+    }
+    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'])) {
+      var _style$marginLeft, _style$marginRight, _style$marginTop, _style$marginBottom;
+      style['marginLeft'] = (_style$marginLeft = style['marginLeft']) !== null && _style$marginLeft !== void 0 ? _style$marginLeft : style['margin'];
+      style['marginRight'] = (_style$marginRight = style['marginRight']) !== null && _style$marginRight !== void 0 ? _style$marginRight : style['margin'];
+      style['marginTop'] = (_style$marginTop = style['marginTop']) !== null && _style$marginTop !== void 0 ? _style$marginTop : style['margin'];
+      style['marginBottom'] = (_style$marginBottom = style['marginBottom']) !== null && _style$marginBottom !== void 0 ? _style$marginBottom : style['margin'];
+      delete style['margin'];
+    }
+    if (!isNil(style['opacity']) && typeof style['opacity'] === 'string' && style['opacity'].endsWith('%')) {
+      const percentage = parseFloat(style['opacity']);
+      if (!isNaN(percentage)) {
+        style['opacity'] = percentage / 100;
+      }
+    }
+    const processStyleValue = value => {
+      if (typeof value === 'string') {
+        const num = parseFloat(value);
+        return isNaN(num) ? value : num;
+      }
+      return value;
+    };
+
+    /** True when borderWidth is a single value or shorthand that resolves to the same width on all sides. */
+    const isUniformBorderWidthValue = value => {
+      if (value == null) {
+        return false;
+      }
+      if (typeof value === 'number') {
+        return !Number.isNaN(value);
+      }
+      if (typeof value === 'string') {
+        const tokens = value.trim().split(/\s+/).filter(Boolean);
+        if (tokens.length <= 1) {
+          return true;
+        }
+        const parsed = tokens.map(t => processStyleValue(t));
+        const [t, r = t, b = t, l = r] = parsed;
+        return t === r && r === b && b === l;
+      }
+      if (isObject(value) && !isArray(value)) {
+        const vals = Object.values(value).map(v => processStyleValue(v));
+        if (!vals.length) {
+          return false;
+        }
+        return vals.every(v => v === vals[0]);
+      }
+      if (typeof value !== 'object' && !isNaN(Number(value))) {
+        return true;
+      }
+      return false;
+    };
+    const normalizeUniformBorderWidth = value => {
+      if (typeof value === 'number') {
+        return value;
+      }
+      if (typeof value === 'string') {
+        const tokens = value.trim().split(/\s+/).filter(Boolean);
+        return tokens.length ? processStyleValue(tokens[0]) : value;
+      }
+      if (isObject(value) && !isArray(value)) {
+        const first = Object.values(value)[0];
+        return processStyleValue(first);
+      }
+      if (typeof value !== 'object' && !isNaN(Number(value))) {
+        return Number(value);
+      }
+      return value;
+    };
+
+    /** Border-like shorthands: only fill sides that are still nullish so explicit longhands (e.g. borderLeftWidth) win. */
+    const mergeBorderLikeBoxModelResult = (target, result) => {
+      Object.keys(result).forEach(key => {
+        var _target$key;
+        target[key] = (_target$key = target[key]) !== null && _target$key !== void 0 ? _target$key : result[key];
+      });
+    };
+    const applyBoxModelProperty = (property, value) => {
+      if (value == null) return;
+      const result = {};
+      const positions = ['Top', 'Right', 'Bottom', 'Left'];
+      const isBorderRadius = property === 'border';
+      const isBorderWidth = property === 'borderWidth';
+      const borderRadiusKeys = {
+        Top: 'borderTopLeftRadius',
+        Right: 'borderTopRightRadius',
+        Bottom: 'borderBottomRightRadius',
+        Left: 'borderBottomLeftRadius'
+      };
+      const getProp = pos => {
+        if (isBorderRadius) {
+          return borderRadiusKeys[pos];
+        } else if (isBorderWidth) {
+          return `border${pos}Width`;
+        }
+        return property + pos;
+      };
+      if (typeof value === 'string') {
+        const values = value.trim().split(/\s+/).map(processStyleValue);
+        const [t, r = t, b = t, l = r] = values; // Destructure with defaults
+
+        result[getProp('Top')] = t;
+        result[getProp('Right')] = r;
+        result[getProp('Bottom')] = b;
+        result[getProp('Left')] = l;
+      } else if (typeof value === 'number' || !isNaN(Number(value))) {
+        const numValue = Number(value);
+        positions.forEach(pos => {
+          result[getProp(pos)] = numValue;
+        });
+      } else if (isObject(value)) {
+        Object.entries(value).forEach(([key, val]) => {
+          const pos = key.charAt(0).toUpperCase() + key.slice(1).toLowerCase();
+          result[getProp(pos)] = processStyleValue(val);
+        });
+      }
+      if (Object.keys(result).length > 0) {
+        if (property === 'padding' || property === 'margin') {
+          Object.assign(style, result);
+        } else {
+          mergeBorderLikeBoxModelResult(style, result);
+        }
+      }
+    };
+    const paddingPositions = ['Top', 'Right', 'Bottom', 'Left'];
+    const hasOverridePadding = paddingPositions.some(pos => !isNil(style[`_Padding${pos}`]));
+    if (hasOverridePadding || !isNil(style['padding'])) {
+      applyBoxModelProperty('padding', style['padding']);
+      paddingPositions.forEach(pos => {
+        const overrideKey = `_Padding${pos}`;
+        const overrideValue = style[overrideKey];
+        if (!isNil(overrideValue)) {
+          style[`padding${pos}`] = processStyleValue(overrideValue);
+        }
+        delete style[overrideKey];
+      });
+      delete style['padding'];
+    }
+    if (!isNil(style['borderWidth'])) {
+      const bw = style['borderWidth'];
+      if (isUniformBorderWidthValue(bw)) {
+        style['borderWidth'] = normalizeUniformBorderWidth(bw);
+      } else {
+        applyBoxModelProperty('borderWidth', bw);
+        delete style['borderWidth'];
+      }
+    }
+    if (!isNil(style['borderRadius'])) {
+      applyBoxModelProperty('border', style['borderRadius']);
+      delete style['borderRadius'];
+    }
+    if (!isNil(style['margin'])) {
+      applyBoxModelProperty('margin', style['margin']);
+      delete style['margin'];
+    }
+    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'];
+          }
+        }
+      }
+    }
+    if (!isNil(style['color']) && style['color'] === 'transparent') {
+      style['color'] = 'rgba(255, 255, 255, 0)';
+    }
+    if (!isNil(style['color']) && style['color'] === 'transparent') {
+      style['color'] = 'rgba(255, 255, 255, 0)';
+    }
+    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', getBreakPointValue('MIN_EXTRA_SMALL_DEVICE'));
+  addColStyles('sm', getBreakPointValue('MIN_SMALL_DEVICE'));
+  addColStyles('md', getBreakPointValue('MIN_MEDIUM_DEVICE'));
+  addColStyles('lg', getBreakPointValue('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', getBreakPointValue('MIN_EXTRA_SMALL_DEVICE'), getBreakPointValue('MAX_LARGE_DEVICE'));
+  addDisplayStyles('xs', getBreakPointValue('MIN_EXTRA_SMALL_DEVICE'), getBreakPointValue('MAX_EXTRA_SMALL_DEVICE'));
+  addDisplayStyles('sm', getBreakPointValue('MIN_SMALL_DEVICE'), getBreakPointValue('MAX_SMALL_DEVICE'));
+  addDisplayStyles('md', getBreakPointValue('MIN_MEDIUM_DEVICE'), getBreakPointValue('MAX_MEDIUM_DEVICE'));
+  addDisplayStyles('lg', getBreakPointValue('MIN_LARGE_DEVICE'), getBreakPointValue('MAX_LARGE_DEVICE'));
+  const addElevationClasses = () => {
+    for (let i = 1; i <= 10; i++) {
+      addStyle(`elevate${i}`, '', {
+        root: {
+          boxShadow: `${i}px ${i}px ${i}px rgba(0, 0, 0, 0.27)`,
+          zIndex: 1
+        }
+      });
+    }
+  };
+  addElevationClasses();
+  addStyle('hidden', '', {
+    root: Platform.OS === 'web' ? {
+      display: 'none'
+    } : {
+      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