@napred/ds/dist/ds.m.js

import { createContext, useContext, createElement, forwardRef, useMemo, useState } from 'react';

function createNullCache() {
  return {
    get: function get() {
      return undefined;
    },
    set: function set(_, value) {
      return value;
    }
  };
}

function createSimpleCache() {
  var recs = {};
  return {
    get: function get(name) {
      return recs[name];
    },
    set: function set(name, value) {
      recs[name] = value;
      return value;
    }
  };
}

function _typeof(obj) {
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function (obj) {
      return typeof obj;
    };
  } else {
    _typeof = function (obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    };
  }

  return _typeof(obj);
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);

    if (typeof Object.getOwnPropertySymbols === 'function') {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }

    ownKeys.forEach(function (key) {
      _defineProperty(target, key, source[key]);
    });
  }

  return target;
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

    return arr2;
  }
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArray(iter) {
  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}

function _iterableToArrayLimit(arr, i) {
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance");
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

var DesignSystemContext = createContext({});

function useDesignSystem() {
  return useContext(DesignSystemContext);
}

function useStyle(componentName, props, options) {
  var ds = useDesignSystem();
  return ds.applyStyles(componentName, props, options);
}

function arrayize(val) {
  if (Array.isArray(val)) {
    return val;
  }

  return [val];
}

function cleanProps(props, blacklist) {
  return Object.keys(props).reduce(function (result, propName) {
    if (blacklist.includes(propName)) {
      return result;
    }

    return _objectSpread({}, result, _defineProperty({}, propName, props[propName]));
  }, {});
}

function convertUnit(unit) {
  var multiplier = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
  var unitType = arguments.length > 2 ? arguments[2] : undefined;
  var num = Number(unit);

  if (Number.isNaN(num)) {
    return unit.replace(/^(-?\d+(?:\.\d+)?)(?:\s*([a-zA-Z%]+))?$/, function (_, parsedNumber, parsedUnit) {
      return convertUnit(parsedNumber, multiplier, parsedUnit);
    });
  }

  var isInt = Number.isInteger(num);

  if (isInt) {
    return "".concat(num * multiplier).concat(unitType || 'px');
  } else if (unitType != null) {
    return "".concat(num * multiplier).concat(unitType);
  }

  return "".concat(num * multiplier * 100, "%");
}

function getResponsiveValue(breakpoint, value, defaultValue) {
  var defaultLength = Array.isArray(defaultValue) ? defaultValue.length : defaultValue !== undefined ? 1 : 0;
  var valueLength = value.length;
  var maxLength = Math.max(valueLength, defaultLength);
  var currentValue;
  var currentDefault;

  if (value[breakpoint] === null) {
    return null;
  }

  if (defaultValue === undefined) {
    for (var i = 0; i < valueLength; i++) {
      currentValue = value[i] === undefined ? currentValue : value[i];

      if (i === breakpoint) {
        break;
      }
    }

    return currentValue === undefined ? null : currentValue;
  }

  var defaultValues = Array.isArray(defaultValue) ? defaultValue : Array(maxLength).fill(defaultValue);

  for (var _i = 0; _i < maxLength; _i++) {
    currentDefault = defaultValues[_i] === undefined ? currentDefault : defaultValues[_i];
    currentValue = value[_i] === null ? null : value[_i] === undefined ? currentDefault : value[_i];

    if (_i === breakpoint) {
      break;
    }
  }

  return currentValue === undefined ? null : currentValue;
}

function createComponentFactory(_ref) {
  var createStyle = _ref.createStyle;
  return function createComponent(componentName, component) {
    var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
    var _options$cacheProps = options.cacheProps,
        cacheProps = _options$cacheProps === void 0 ? [] : _options$cacheProps,
        _options$stripProps = options.stripProps,
        stripProps = _options$stripProps === void 0 ? [] : _options$stripProps,
        style = options.style,
        _options$styles = options.styles,
        styles = _options$styles === void 0 ? [] : _options$styles;
    var opts = {
      cacheProps: cacheProps,
      stripProps: stripProps,
      styles: styles
    };

    if (style) {
      opts.styles = [createStyle(cacheProps, style, stripProps)].concat(_toConsumableArray(styles));
    }

    if (styles) {
      styles.forEach(function (styler) {
        var _opts$cacheProps, _opts$stripProps;

        (_opts$cacheProps = opts.cacheProps).push.apply(_opts$cacheProps, _toConsumableArray(styler.propNames));

        (_opts$stripProps = opts.stripProps).push.apply(_opts$stripProps, _toConsumableArray(styler.stripProps));
      });
    }

    var factory = forwardRef(function (_ref2, ref) {
      var _ref2$as = _ref2.as,
          as = _ref2$as === void 0 ? component : _ref2$as,
          restProps = _objectWithoutProperties(_ref2, ["as"]);

      var isDsComp = typeof as !== 'string' && as.$$nprdds;
      var props = useStyle(componentName, restProps, _objectSpread({}, opts, {
        passthrough: isDsComp
      }));
      return createElement(as, _objectSpread({}, isDsComp ? props : cleanProps(props, props.stripProps), {
        ref: ref
      }));
    });
    factory.displayName = componentName;
    factory.$$nprdds = true;
    return factory;
  };
}

function formatStyleResult(value, cssAttributes, formatter) {
  if (value == null) {
    return {};
  }

  var formattedValue = formatter(value);

  if (cssAttributes.length === 1) {
    return _defineProperty({}, cssAttributes[0], formattedValue);
  }

  return cssAttributes.reduce(function (res, attrName) {
    return _objectSpread({}, res, _defineProperty({}, attrName, formattedValue));
  }, {});
}

function createSimpleStyle(propName, cssAttribute, formatter, defaultValue) {
  var cssAttributes = Array.isArray(cssAttribute) ? cssAttribute : [cssAttribute];
  return {
    apply: function apply(props, _ref) {
      var bp = _ref.viewport;
      var propValue = arrayize(props[propName]);
      var bpValue = getResponsiveValue(bp, propValue, defaultValue);
      return formatStyleResult(bpValue, cssAttributes, formatter);
    },
    propNames: [propName],
    stripProps: [propName]
  };
}
function createNumericStyle(propName, cssAttribute, defaultValue) {
  return createSimpleStyle(propName, cssAttribute, convertUnit, defaultValue);
}
function createStringStyle(propName, cssAttribute, defaultValue) {
  return createSimpleStyle(propName, cssAttribute, function (val) {
    return val;
  }, defaultValue);
}

function createSystemStyle(propName, cssAttribute, systemName, formatter, defaultValue) {
  var cssAttributes = arrayize(cssAttribute);
  return {
    apply: function apply(props, _ref) {
      var theme = _ref.theme,
          bp = _ref.viewport;
      var propValue = arrayize(props[propName]);
      var systemValue = theme.get(systemName);
      var bpValue = getResponsiveValue(bp, propValue, defaultValue);

      if (bpValue == null) {
        return formatStyleResult(null, cssAttributes, formatter);
      }

      var bpValueNum = Number(bpValue);
      var isNegativeInt = !Number.isNaN(bpValueNum) && Number.isInteger(bpValueNum) && bpValueNum < 0;
      var systemBpValue = systemValue[isNegativeInt ? -bpValue : bpValue] || bpValue;
      return formatStyleResult(isNegativeInt ? -Number(systemBpValue) : systemBpValue, cssAttributes, formatter);
    },
    propNames: [propName],
    stripProps: [propName]
  };
}
function createNumericSystemStyle(propName, cssAttribute, systemName, defaultValue) {
  return createSystemStyle(propName, cssAttribute, systemName, convertUnit, defaultValue);
}
function createStringSystemStyle(propName, cssAttribute, systemName, defaultValue) {
  return createSystemStyle(propName, cssAttribute, systemName, function (val) {
    return val;
  }, defaultValue);
}
function createScaledFontSizeSystemStyle(propName, defaultValue) {
  return {
    apply: function apply(props, _ref2) {
      var theme = _ref2.theme,
          bp = _ref2.viewport;
      var sizeIndex = getResponsiveValue(bp, arrayize(props.fontSize), 0);
      var size = theme.get('fontSizes')[sizeIndex || 0] || sizeIndex;
      var value = getResponsiveValue(bp, arrayize(props[propName]), theme.get(propName) || defaultValue);

      if (Number.isNaN(Number(value))) {
        return _defineProperty({}, propName, value.replace(/^(-?\d+(?:\.\d+)?)(?:\s*([a-zA-Z%]+))?$/, function (_, parsedNumber, parsedUnit) {
          return convertUnit(parsedUnit === '%' ? size : parsedNumber, parsedUnit === '%' ? parsedNumber / 100 : 1);
        }));
      }

      return _defineProperty({}, propName, convertUnit(size, Number(value)));
    },
    propNames: [propName],
    stripProps: [propName]
  };
}

var bgColor = createStringSystemStyle('bgColor', 'backgroundColor', 'colors');
var borderColor = createStringSystemStyle('borderColor', 'borderColor', 'colors');
var color = createStringSystemStyle('color', 'color', 'colors');
var opacity = createStringStyle('opacity', 'opacity');
var shadow = createStringStyle('shadow', 'boxShadow');

var borderRadius = createNumericSystemStyle('borderRadius', 'borderRadius', 'borderRadiuses');
var borderRadiusTopLeft = createNumericSystemStyle('borderRadiusTopLeft', 'borderTopLeftRadius', 'borderRadiuses');
var borderRadiusTopRight = createNumericSystemStyle('borderRadiusTopRight', 'borderTopRightRadius', 'borderRadiuses');
var borderRadiusBottomLeft = createNumericSystemStyle('borderRadiusBottomLeft', 'borderBottomLeftRadius', 'borderRadiuses');
var borderRadiusBottomRight = createNumericSystemStyle('borderRadiusBottomRight', 'borderBottomRightRadius', 'borderRadiuses');
var borderStyle = createStringStyle('borderStyle', 'borderStyle');
var borderWidth = createNumericStyle('borderWidth', 'borderWidth');
var display = createStringStyle('display', 'display');
var height = createNumericStyle('height', 'height');
var minHeight = createNumericStyle('minHeight', 'minHeight');
var minWidth = createNumericStyle('minWidth', 'minWidth');
var maxHeight = createNumericStyle('maxHeight', 'maxHeight');
var maxWidth = createNumericSystemStyle('maxWidth', 'maxWidth', 'containerSizes');
var width = createNumericStyle('width', 'width');

var alignContent = createStringStyle('alignContent', 'alignContent');
var alignItems = createStringStyle('alignItems', 'alignItems');
var alignSelf = createStringStyle('alignSelf', 'alignSelf');
var flex = createStringStyle('flex', 'flex');
var flexBasis = createNumericStyle('flexBasis', 'flexBasis');
var flexDirection = createStringStyle('flexDirection', 'flexDirection');
var flexGrow = createStringStyle('flexGrow', 'flexGrow');
var flexOrder = createStringStyle('flexOrder', 'order');
var flexShrink = createStringStyle('flexShrink', 'flexShrink');
var flexWrap = createStringStyle('flexWrap', 'flexWrap');
var justifyContent = createStringStyle('justifyContent', 'justifyContent');

var overflow = createStringStyle('overflow', 'overflow');
var overflowX = createStringStyle('overflowX', 'overflowX');
var overflowY = createStringStyle('overflowY', 'overflowY');
var transition = createStringStyle('transition', 'transition');

var cursor = createStringStyle('cursor', 'cursor', null);
var pointerEvents = createStringStyle('pointerEvents', 'pointerEvents', null);

var bottom = createNumericStyle('bottom', 'bottom');
var left = createNumericStyle('left', 'left');
var right = createNumericStyle('right', 'right');
var position = createStringStyle('position', 'position');
var top = createNumericStyle('top', 'top');
var zIndex = createStringStyle('zIndex', 'zIndex');

var m = createNumericSystemStyle('m', 'margin', 'spacing');
var mb = createNumericSystemStyle('mb', 'marginBottom', 'spacing');
var ml = createNumericSystemStyle('ml', 'marginLeft', 'spacing');
var mr = createNumericSystemStyle('mr', 'marginRight', 'spacing');
var mt = createNumericSystemStyle('mt', 'marginTop', 'spacing');
var mx = createNumericSystemStyle('mx', ['marginLeft', 'marginRight'], 'spacing');
var my = createNumericSystemStyle('my', ['marginTop', 'marginBottom'], 'spacing');
var p = createNumericSystemStyle('p', 'padding', 'spacing');
var pb = createNumericSystemStyle('pb', 'paddingBottom', 'spacing');
var pl = createNumericSystemStyle('pl', 'paddingLeft', 'spacing');
var pr = createNumericSystemStyle('pr', 'paddingRight', 'spacing');
var pt = createNumericSystemStyle('pt', 'paddingTop', 'spacing');
var px = createNumericSystemStyle('px', ['paddingLeft', 'paddingRight'], 'spacing');
var py = createNumericSystemStyle('py', ['paddingTop', 'paddingBottom'], 'spacing');

var fontFamily = createStringSystemStyle('fontFamily', 'fontFamily', 'fontFamilies', 'default');
var fontSize = createNumericSystemStyle('fontSize', 'fontSize', 'fontSizes', 0);
var fontWeight = createStringStyle('fontWeight', 'fontWeight');
var lineHeight = createScaledFontSizeSystemStyle('lineHeight');
var textAlign = createStringStyle('textAlign', 'textAlign');
var textOverflow = createStringStyle('textOverflow', 'textOverflow');
var textTransform = createStringStyle('textTransform', 'textTransform');
var whiteSpace = createStringStyle('whiteSpace', 'whiteSpace');



var index = /*#__PURE__*/Object.freeze({
    bgColor: bgColor,
    borderColor: borderColor,
    color: color,
    opacity: opacity,
    shadow: shadow,
    borderRadius: borderRadius,
    borderRadiusTopLeft: borderRadiusTopLeft,
    borderRadiusTopRight: borderRadiusTopRight,
    borderRadiusBottomLeft: borderRadiusBottomLeft,
    borderRadiusBottomRight: borderRadiusBottomRight,
    borderStyle: borderStyle,
    borderWidth: borderWidth,
    display: display,
    height: height,
    minHeight: minHeight,
    minWidth: minWidth,
    maxHeight: maxHeight,
    maxWidth: maxWidth,
    width: width,
    alignContent: alignContent,
    alignItems: alignItems,
    alignSelf: alignSelf,
    flex: flex,
    flexBasis: flexBasis,
    flexDirection: flexDirection,
    flexGrow: flexGrow,
    flexOrder: flexOrder,
    flexShrink: flexShrink,
    flexWrap: flexWrap,
    justifyContent: justifyContent,
    overflow: overflow,
    overflowX: overflowX,
    overflowY: overflowY,
    transition: transition,
    cursor: cursor,
    pointerEvents: pointerEvents,
    bottom: bottom,
    left: left,
    right: right,
    position: position,
    top: top,
    zIndex: zIndex,
    m: m,
    mb: mb,
    ml: ml,
    mr: mr,
    mt: mt,
    mx: mx,
    my: my,
    p: p,
    pb: pb,
    pl: pl,
    pr: pr,
    pt: pt,
    px: px,
    py: py,
    fontFamily: fontFamily,
    fontSize: fontSize,
    fontWeight: fontWeight,
    lineHeight: lineHeight,
    textAlign: textAlign,
    textOverflow: textOverflow,
    textTransform: textTransform,
    whiteSpace: whiteSpace
});

var styleList = [alignContent, alignItems, alignSelf, bgColor, borderColor, borderRadius, borderStyle, borderWidth, borderRadiusBottomLeft, borderRadiusBottomRight, borderRadiusTopLeft, borderRadiusTopRight, bottom, color, cursor, display, flex, flexBasis, flexDirection, flexGrow, flexOrder, flexShrink, flexWrap, fontFamily, fontSize, fontWeight, height, justifyContent, left, lineHeight, m, mx, my, mb, ml, mr, mt, minHeight, minWidth, maxHeight, maxWidth, opacity, overflow, overflowX, overflowY, p, px, py, pt, pb, pl, pr, pointerEvents, position, right, shadow, transition, textAlign, textOverflow, textTransform, top, width, whiteSpace, zIndex];

function createSystem(_ref) {
  var cache = _ref.cache,
      _ref$componentStyles = _ref.componentStyles,
      componentStyles = _ref$componentStyles === void 0 ? {} : _ref$componentStyles,
      _ref$globalStyles = _ref.globalStyles,
      globalStyles = _ref$globalStyles === void 0 ? [] : _ref$globalStyles,
      styleApplicatorFactory = _ref.styleApplicatorFactory,
      theme = _ref.theme,
      _ref$viewport = _ref.viewport,
      viewport = _ref$viewport === void 0 ? 0 : _ref$viewport;

  var _useState = useState(viewport),
      _useState2 = _slicedToArray(_useState, 2),
      currentViewport = _useState2[0],
      setViewport = _useState2[1];

  var styleApplicator = useMemo(function () {
    return styleApplicatorFactory({
      cache: cache,
      componentStyles: componentStyles,
      globalStyles: globalStyles
    });
  }, [cache, componentStyles, globalStyles]);
  var applyStyles = useMemo(function () {
    return function (componentName, props) {
      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
      return styleApplicator.apply(componentName, props, {
        theme: theme,
        viewport: currentViewport
      }, options);
    };
  }, [currentViewport, theme]);
  return {
    applyStyles: applyStyles,
    setViewport: setViewport,
    theme: theme,
    viewport: currentViewport
  };
}

function createTheme(settings) {
  return {
    color: function color(valueOrName, defaultValueOrName) {
      var color = settings.colors[valueOrName];

      if (color == null) {
        if (defaultValueOrName != null) {
          return settings.colors[defaultValueOrName] || defaultValueOrName;
        }

        return valueOrName;
      }

      return color;
    },
    get: function get(attributeName, defaultValue) {
      var attributeValues = settings[attributeName];

      if (attributeValues == null) {
        if (defaultValue == null) {
          throw new Error("There is no ".concat(attributeName, " defined in theme"));
        } else {
          return defaultValue;
        }
      } else if (_typeof(attributeValues) === 'object' && !Array.isArray(attributeValues) && defaultValue != null) {
        return attributeValues[defaultValue] || defaultValue;
      }

      return attributeValues;
    }
  };
}

var MOBILE_BP = "only screen";
var TABLET_BP = "screen and (min-width: ".concat(641 / 16, "em)");
var DESKTOP_BP = "screen and (min-width: ".concat(1025 / 16, "em)");
var L_DESKTOP_BP = "screen and (min-width: ".concat(1280 / 16, "em)");
var XL_DESKTOP_BP = "screen and (min-width: ".concat(1441 / 16, "em)");
var XXL_DESKTOP_BP = "screen and (min-width: ".concat(1921 / 16, "em)");
var colors = {
  blue: '#3B5998',
  green: '#3CD048',
  greenDarker: '#54BC5D',
  grey: '#A8A8A8',
  greyDark: '#4A4A4A',
  greyDarkest: '#303030',
  greyLight: '#E7E7E7',
  greyLighter: '#F7F7F7',
  greyLightest: '#FFFFFF',
  lightBlue: '#4B6EB9',
  lightTransparent: 'rgba(255,255,255, 0.9)',
  lighterTransparent: 'rgba(255,255,255, 0.8)',
  orange: '#FD7400',
  pinkDark: '#AA2554',
  primary: '#D03C70',
  primaryLight: '#FA4B88',
  red: '#EA2E49',
  turqoise: '#1E839D',
  turqoiseDark: '#197187',
  turqoiseLight: '#26A8C9',
  twitter: '#1B95E0',
  twitterLight: '#1B95E0',
  white: '#FFFFFF',
  yellow: '#FFE11A'
};
var defaultTheme = createTheme({
  borderRadiuses: ['5px', '15px', '30px', '99999px'],
  breakpoints: [MOBILE_BP, TABLET_BP, DESKTOP_BP, L_DESKTOP_BP, XL_DESKTOP_BP, XXL_DESKTOP_BP],
  colors: colors,
  containerSizes: ['100%', '100%', '968px', '1240px', '1400px'],
  fontFamilies: {
    default: '"Palanquin", "Helvetica", sans-serif'
  },
  fontSizes: [16, 20, 24, 32, 48, 64, 72],
  gutters: [12, 12, 12],
  importFonts: ["@import url('https://fonts.googleapis.com/css?family=Palanquin:400,500,600&subset=latin-ext')"],
  lineHeight: 'normal',
  spacing: [0, 4, 8, 16, 32, 64, 128, 256, 512]
});

var IfViewport = function IfViewport(_ref) {
  var children = _ref.children,
      gt = _ref.gt,
      gte = _ref.gte,
      is = _ref.is,
      lt = _ref.lt,
      lte = _ref.lte;

  var _useDesignSystem = useDesignSystem(),
      viewport = _useDesignSystem.viewport;

  if (is != null) {
    if (Array.isArray(is) && is.includes(viewport)) {
      return children();
    }

    if (is === viewport) {
      return children();
    }
  }

  if (gt != null && viewport > gt || lt != null && viewport < lt || gte != null && viewport >= gte || lte != null && viewport <= lte) {
    return children();
  }

  if (lt != null && viewport < lt) {
    return children();
  }

  return null;
};

IfViewport.displayName = 'IfViewport';

export { defaultTheme, DesignSystemContext, IfViewport, createComponentFactory, createNullCache, createSimpleCache, useDesignSystem, useStyle, index as styles, styleList, createSimpleStyle, createNumericStyle, createStringStyle, createSystemStyle, createNumericSystemStyle, createStringSystemStyle, createScaledFontSizeSystemStyle, createSystem, createTheme, arrayize, cleanProps, convertUnit, getResponsiveValue };