@elliemae/ds-system 2.0.0-next.7 → 2.0.0-rc.10

package/cjs/globalStyles.js

@@ -8,15 +8,18 @@ require('lodash');
 require('./theme.js');
 require('core-js/modules/web.dom-collections.iterator.js');
 require('react');
-var styledComponents = require('styled-components');
+var styled_component = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
 
 var _templateObject;
-const GlobalStyles = styledComponents.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  :root, body {\n    overscroll-behavior-y: none;\n    font-size: 16px;\n    @media (min-width: ", ") { \n    font-size: 13px;\n  }\n  }\n"])), ({
-  theme
-}) => theme.breakpoints.small);
+const GlobalStyles = styled_component.createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  :root, body {\n    overscroll-behavior-y: none;\n\n    ", "\n\n    font-size: ", ";\n\n    @media(min-width: ", ") {\n      font-size: ", ";\n    }\n\n  }\n"])), props => void 0, props => props.device === 'desktop' ? '13px' : '16px', _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.breakpoints.small;
+}, props => props.device === 'mobile' ? '16px' : '13px');
 
 exports.GlobalStyles = GlobalStyles;

package/cjs/index.js

@@ -7,9 +7,11 @@ var spaceUtilities = require('./spaceUtilities.js');
 var mobileUtilities = require('./mobileUtilities.js');
 var utils = require('./utils.js');
 var arithmetic = require('./arithmetic.js');
+var th = require('./th.js');
 var theme = require('./theme.js');
+var index = require('./styled/index.js');
 var themeProviderHOC = require('./themeProviderHOC.js');
-var styledComponents = require('styled-components');
+var styled_component = require('styled-components');
 var polished = require('polished');
 
 
@@ -52,27 +54,29 @@ exports.transition = utils.transition;
 exports.truncate = utils.truncate;
 exports.getNumberAndUnit = arithmetic.getNumberAndUnit;
 exports.op = arithmetic.op;
+exports.th = th.th;
 exports.theme = theme.theme;
+exports.styled = index.styled;
 exports.themeProviderHOC = themeProviderHOC.themeProviderHOC;
 Object.defineProperty(exports, 'createGlobalStyle', {
 	enumerable: true,
-	get: function () { return styledComponents.createGlobalStyle; }
+	get: function () { return styled_component.createGlobalStyle; }
 });
 Object.defineProperty(exports, 'css', {
 	enumerable: true,
-	get: function () { return styledComponents.css; }
+	get: function () { return styled_component.css; }
 });
 Object.defineProperty(exports, 'kfrm', {
 	enumerable: true,
-	get: function () { return styledComponents.keyframes; }
+	get: function () { return styled_component.keyframes; }
 });
 Object.defineProperty(exports, 'useTheme', {
 	enumerable: true,
-	get: function () { return styledComponents.useTheme; }
+	get: function () { return styled_component.useTheme; }
 });
 Object.defineProperty(exports, 'withTheme', {
 	enumerable: true,
-	get: function () { return styledComponents.withTheme; }
+	get: function () { return styled_component.withTheme; }
 });
 Object.defineProperty(exports, 'rgba', {
 	enumerable: true,

package/cjs/spaceUtilities.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.some.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.some.js');
 var lodash = require('lodash');
 var theme = require('./theme.js');
 

package/cjs/styled/index.d.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/cjs/styled/index.js

@@ -0,0 +1,123 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+var styled_component = require('styled-components');
+var styleGetters = require('./styleGetters.js');
+var utils = require('./utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var styled_component__default = /*#__PURE__*/_interopDefaultLegacy(styled_component);
+
+const _excluded = ["theme"],
+      _excluded2 = ["theme"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const styled = function (tag) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    name: null,
+    slot: null
+  };
+  const {
+    name: componentName,
+    slot: componentSlot
+  } = options;
+  return function (styleArg) {
+    for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      expressions[_key - 1] = arguments[_key];
+    }
+
+    /*
+     * These are the internal expression written in dimsum
+     * We just coerce with the default theme in case users
+     * forget to add the ThemeProvider
+     */
+    const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => typeof stylesArg === 'function' ? _ref => {
+      let {
+        theme: themeInput
+      } = _ref,
+          other = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+      return stylesArg(_objectSpread({
+        theme: utils.coerceWithDefaultTheme(themeInput)
+      }, other));
+    } : stylesArg) : [];
+    let transformedStyleArg = styleArg;
+    /*
+     * Here we get the style overrides from the user
+     */
+
+    if (componentName && componentSlot) {
+      expressionsWithDefaultTheme.push(props => {
+        const theme = utils.coerceWithDefaultTheme(props.theme);
+        const styleOverrides = styleGetters.getStyleOverrides(componentName, theme);
+
+        if (styleOverrides) {
+          return [styleOverrides[componentSlot]];
+        }
+
+        return null;
+      });
+    }
+    /*
+     * Here we get the variant overrides from the user (only for the root)
+     */
+
+
+    if (componentName && componentSlot === 'root') {
+      expressionsWithDefaultTheme.push(props => {
+        const theme = utils.coerceWithDefaultTheme(props.theme);
+        return styleGetters.variantsResolver(props, styleGetters.getVariantStyles(componentName, theme), theme, componentName);
+      });
+    }
+
+    const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
+
+    if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
+      // Here we are adding placeholders for all the new functions that we are gonna call
+      const placeholders = new Array(numOfCustomFnsApplied).fill('');
+      transformedStyleArg = [...styleArg, ...placeholders];
+      transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
+    } else if (typeof styleArg === 'function') {
+      // Here we just coerce with the default theme
+      transformedStyleArg = _ref2 => {
+        let {
+          theme: themeInput
+        } = _ref2,
+            other = _objectWithoutProperties__default["default"](_ref2, _excluded2);
+
+        return styleArg(_objectSpread({
+          theme: utils.coerceWithDefaultTheme(themeInput)
+        }, other));
+      };
+    }
+
+    const Component = /*#__PURE__*/styled_component__default["default"](tag).attrs({
+      className: "".concat(componentName, "-").concat(componentSlot)
+    }).withConfig({
+      componentId: "sc-rjg4in-0"
+    })(transformedStyleArg, ...expressionsWithDefaultTheme);
+    return Component;
+  };
+}; // Here we setup the necessary keys so we can continue using styled.button, styled.span, etc.
+
+Object.keys(styled_component__default["default"]).forEach(key => {
+  styled[key] = styled(key);
+});
+
+exports.styled = styled;

package/cjs/styled/styleGetters.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/esnext.async-iterator.every.js');
+require('core-js/modules/esnext.iterator.every.js');
+var utils = require('./utils.js');
+
+const getStyleOverrides = (name, theme) => {
+  var _theme$components, _theme$components$nam;
+
+  return ((_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : (_theme$components$nam = _theme$components[name]) === null || _theme$components$nam === void 0 ? void 0 : _theme$components$nam.styleOverrides) || null;
+};
+const getVariantStyles = (name, theme) => {
+  var _theme$components2, _theme$components2$na;
+
+  const variants = ((_theme$components2 = theme.components) === null || _theme$components2 === void 0 ? void 0 : (_theme$components2$na = _theme$components2[name]) === null || _theme$components2$na === void 0 ? void 0 : _theme$components2$na.variants) || [];
+  return variants.reduce((styles, definition) => {
+    const key = utils.propsToClassKey(definition.props);
+    styles[key] = definition.style;
+    return styles;
+  }, {});
+};
+const variantsResolver = (props, styles, theme, name) => {
+  var _theme$components3, _theme$components3$na;
+
+  const themeVariants = (theme === null || theme === void 0 ? void 0 : (_theme$components3 = theme.components) === null || _theme$components3 === void 0 ? void 0 : (_theme$components3$na = _theme$components3[name]) === null || _theme$components3$na === void 0 ? void 0 : _theme$components3$na.variants) || [];
+  return themeVariants.reduce((variantsStyles, themeVariant) => {
+    const isMatch = Object.keys(themeVariant.props).every(key => props[key] === themeVariant.props[key]);
+
+    if (isMatch) {
+      variantsStyles.push(styles[utils.propsToClassKey(themeVariant.props)]);
+    }
+
+    return variantsStyles;
+  }, []);
+};
+
+exports.getStyleOverrides = getStyleOverrides;
+exports.getVariantStyles = getVariantStyles;
+exports.variantsResolver = variantsResolver;

package/cjs/styled/utils.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+var dsUtilities = require('@elliemae/ds-utilities');
+var theme = require('../theme.js');
+
+const systemTheme = theme.theme;
+const isEmpty = string => string.length === 0;
+const coerceWithDefaultTheme = themeInput => themeInput !== null && themeInput !== void 0 ? themeInput : systemTheme;
+const propsToClassKey = props => Object.keys(props).sort().reduce((classKey, key) => {
+  if (key === 'color') {
+    return classKey + isEmpty(String(classKey)) ? String(props[key]) : dsUtilities.capitalize(String(props[key]));
+  }
+
+  return "".concat(classKey).concat(isEmpty(String(classKey)) ? key : dsUtilities.capitalize(key)).concat(dsUtilities.capitalize(props[key].toString()));
+}, '');
+
+exports.coerceWithDefaultTheme = coerceWithDefaultTheme;
+exports.isEmpty = isEmpty;
+exports.propsToClassKey = propsToClassKey;

package/cjs/th.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+
+const th = property => (value, dfault) => _ref => {
+  var _result;
+
+  let {
+    theme
+  } = _ref;
+  const parts = value.split('-');
+  let result = theme[property];
+  parts.forEach(part => {
+    if (result) result = result[part];
+  });
+  return (_result = result) !== null && _result !== void 0 ? _result : dfault;
+};
+th.space = th('space');
+th.fontSize = th('fontSizes');
+th.fontWeight = th('fontWeights');
+th.lineHeight = th('lineHeights');
+th.letterSpacing = th('letterSpacings');
+th.font = th('fonts');
+th.color = th('colors');
+th.breakpoint = th('breakpoints');
+th.media = th('media');
+
+exports.th = th;

package/cjs/themeProviderHOC.js

@@ -2,10 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _jsx2 = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
-var styledComponents = require('styled-components');
+var styled_component = require('styled-components');
 var theme = require('./theme.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -17,7 +22,7 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const themeProviderHOC = Component => props => /*#__PURE__*/_jsx2__default["default"](styledComponents.ThemeProvider, {
+const themeProviderHOC = Component => props => /*#__PURE__*/_jsx2__default["default"](styled_component.ThemeProvider, {
   theme: theme.theme
 }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
 

package/cjs/utils.js

@@ -6,11 +6,11 @@ var polished = require('polished');
 var lodash = require('lodash');
 var theme = require('./theme.js');
 var mobileUtilities = require('./mobileUtilities.js');
-var styledComponents = require('styled-components');
+var styled_component = require('styled-components');
 
 /* eslint-disable no-shadow */
 function truncate(width) {
-  return props => styledComponents.css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? "width: ".concat(props.width || width, ";") : '');
+  return props => styled_component.css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? "width: ".concat(props.width || width, ";") : '');
 }
 function flexCenter() {
   return "\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  ";
@@ -19,35 +19,43 @@ function disabled() {
   return "\n    cursor: not-allowed;\n    pointer-events: none;\n  ";
 }
 function keyframes(obj) {
-  return styledComponents.keyframes(["", ""], lodash.reduce(obj, (result, value, key) => "\n    ".concat(result, "\n    ").concat(key, "% {\n      ").concat(value, "\n    }\n  "), ''));
+  return styled_component.keyframes(["", ""], lodash.reduce(obj, (result, value, key) => "\n    ".concat(result, "\n    ").concat(key, "% {\n      ").concat(value, "\n    }\n  "), ''));
 } // eslint-disable-next-line max-params
 
-function boxShadow(top, left, blur, color, inset = false) {
+function boxShadow(top, left, blur, color) {
+  let inset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   return "box-shadow: ".concat(inset ? 'inset' : '', " ").concat(top, " ").concat(left, " ").concat(blur, " ").concat(color, ";");
 }
-function color(variant = 'neutral', type = 400) {
-  return styledComponents.css(["color:", ";"], props => props.theme.colors[variant][type]);
+function color() {
+  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
+  let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
+  return styled_component.css(["color:", ";"], props => props.theme.colors[variant][type]);
 }
-function border(color = theme.theme.colors.brand[600], size = '1px', type = 'solid') {
+function border() {
+  let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.theme.colors.brand[600];
+  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1px';
+  let type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'solid';
   return "".concat(size, " ").concat(type, " ").concat(color);
 }
 function animation(animationKeyframes, animationLength, animationTimingFn) {
-  return props => styledComponents.css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
+  return props => styled_component.css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
 } // 0.0769
 
-function focus(color = theme.theme.colors.brand[600]) {
-  return () => styledComponents.css(["outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], color, polished.lighten(0.3, color));
+function focus() {
+  let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.theme.colors.brand[600];
+  return () => styled_component.css(["outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], color, polished.lighten(0.3, color));
 }
 function focusAfter(color) {
-  return styledComponents.css(["outline:none;position:relative;&:after{content:'';z-index:10;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;", "}"], focus(color));
+  return styled_component.css(["outline:none;position:relative;&:after{content:'';z-index:10;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;", "}"], focus(color));
 }
 function active() {
-  return props => styledComponents.css(["outline:none;border:1px solid ", ";border-radius:2px;"], props.theme.colors.brand[700]);
+  return props => styled_component.css(["outline:none;border:1px solid ", ";border-radius:2px;"], props.theme.colors.brand[700]);
 }
 function hover() {
-  return props => styledComponents.css(["outline:1px solid ", ";outline-offset:-1px;"], props.theme.colors.brand[600]);
+  return props => styled_component.css(["outline:1px solid ", ";outline-offset:-1px;"], props.theme.colors.brand[600]);
 }
-function textStyle(type, weight = 'regular') {
+function textStyle(type) {
+  let weight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'regular';
   // eslint-disable-next-line complexity
   return props => {
     let cssVar = "font-weight: ".concat(props.theme.fontWeights[weight], ";"); // eslint-disable-next-line default-case
@@ -101,14 +109,16 @@ function textStyle(type, weight = 'regular') {
     return cssVar;
   };
 }
-function iconColor(variant = 'neutral', type = 400) {
-  return styledComponents.css(["fill:", ";"], props => props.theme.colors[variant][type]);
+function iconColor() {
+  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
+  let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
+  return styled_component.css(["fill:", ";"], props => props.theme.colors[variant][type]);
 }
 function fakeBorder() {
-  return styledComponents.css(["box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.neutral[200]);
+  return styled_component.css(["box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.neutral[200]);
 }
 function fakeActive() {
-  return styledComponents.css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
+  return styled_component.css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
 }
 function clearFocus() {
   return "\n    border: none;\n    box-shadow: none;\n  ";
@@ -116,20 +126,21 @@ function clearFocus() {
 function buttonLink() {
   return "\n    background-color: transparent;\n    border: 1px solid transparent;\n    cursor: pointer;\n  ";
 }
-function transition(t = 'all 1s ease') {
+function transition() {
+  let t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all 1s ease';
   return "\n    transition: ".concat(t, ";\n  ");
 }
 function onlySafariAndFiredox(styles) {
-  return styledComponents.css(["@media not all and (min-resolution:0.001dpcm){", "}@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles, styles);
+  return styled_component.css(["@media not all and (min-resolution:0.001dpcm){", "}@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles, styles);
 }
 function onlySafari(styles) {
-  return styledComponents.css(["@media not all and (min-resolution:0.001dpcm){", "}"], styles);
+  return styled_component.css(["@media not all and (min-resolution:0.001dpcm){", "}"], styles);
 }
 function onlyFirefox(styles) {
-  return styledComponents.css(["@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles);
+  return styled_component.css(["@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles);
 }
 function safariAndFirefoxBold(color) {
-  return styledComponents.css(["@media not all and (min-resolution:0.001dpcm){font-weight:400;-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}@media screen and (min--moz-device-pixel-ratio:0){font-weight:400;-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}"], color, color);
+  return styled_component.css(["@media not all and (min-resolution:0.001dpcm){font-weight:400;-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}@media screen and (min--moz-device-pixel-ratio:0){font-weight:400;-webkit-font-smoothing:subpixel-antialiased;-webkit-text-stroke:0.4px ", ";}"], color, color);
 }
 
 Object.defineProperty(exports, 'rgba', {
@@ -138,23 +149,23 @@ Object.defineProperty(exports, 'rgba', {
 });
 Object.defineProperty(exports, 'createGlobalStyle', {
   enumerable: true,
-  get: function () { return styledComponents.createGlobalStyle; }
+  get: function () { return styled_component.createGlobalStyle; }
 });
 Object.defineProperty(exports, 'css', {
   enumerable: true,
-  get: function () { return styledComponents.css; }
+  get: function () { return styled_component.css; }
 });
 Object.defineProperty(exports, 'kfrm', {
   enumerable: true,
-  get: function () { return styledComponents.keyframes; }
+  get: function () { return styled_component.keyframes; }
 });
 Object.defineProperty(exports, 'useTheme', {
   enumerable: true,
-  get: function () { return styledComponents.useTheme; }
+  get: function () { return styled_component.useTheme; }
 });
 Object.defineProperty(exports, 'withTheme', {
   enumerable: true,
-  get: function () { return styledComponents.withTheme; }
+  get: function () { return styled_component.withTheme; }
 });
 exports.active = active;
 exports.animation = animation;

package/esm/globalStyles.js

@@ -7,8 +7,11 @@ import 'react';
 import { createGlobalStyle } from 'styled-components';
 
 var _templateObject;
-const GlobalStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  :root, body {\n    overscroll-behavior-y: none;\n    font-size: 16px;\n    @media (min-width: ", ") { \n    font-size: 13px;\n  }\n  }\n"])), ({
-  theme
-}) => theme.breakpoints.small);
+const GlobalStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  :root, body {\n    overscroll-behavior-y: none;\n\n    ", "\n\n    font-size: ", ";\n\n    @media(min-width: ", ") {\n      font-size: ", ";\n    }\n\n  }\n"])), props => void 0, props => props.device === 'desktop' ? '13px' : '16px', _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.breakpoints.small;
+}, props => props.device === 'mobile' ? '16px' : '13px');
 
 export { GlobalStyles };

package/esm/index.js

@@ -3,7 +3,9 @@ export { fixSpace, fixSpaceGutter, mapGap, mapGrid, mapGutter, mapSpace, mapTemp
 export { __UNSAFE_SPACE_TO_DIMSUM, isMobile, toMobile, useIsMobile } from './mobileUtilities.js';
 export { active, animation, border, boxShadow, buttonLink, clearFocus, color, disabled, fakeActive, fakeBorder, flexCenter, focus, focusAfter, hover, iconColor, keyframes, onlyFirefox, onlySafari, onlySafariAndFiredox, safariAndFirefoxBold, textStyle, transition, truncate } from './utils.js';
 export { getNumberAndUnit, op } from './arithmetic.js';
+export { th } from './th.js';
 export { theme } from './theme.js';
+export { styled } from './styled/index.js';
 export { themeProviderHOC } from './themeProviderHOC.js';
 export { createGlobalStyle, css, keyframes as kfrm, useTheme, withTheme } from 'styled-components';
 export { rgba } from 'polished';

package/esm/spaceUtilities.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
 import { get } from 'lodash';
 import { theme } from './theme.js';
 

package/esm/styled/index.d.js

@@ -0,0 +1 @@
+

package/esm/styled/index.js

@@ -0,0 +1,113 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import styled_component from 'styled-components';
+import { getStyleOverrides, variantsResolver, getVariantStyles } from './styleGetters.js';
+import { coerceWithDefaultTheme } from './utils.js';
+
+const _excluded = ["theme"],
+      _excluded2 = ["theme"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const styled = function (tag) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    name: null,
+    slot: null
+  };
+  const {
+    name: componentName,
+    slot: componentSlot
+  } = options;
+  return function (styleArg) {
+    for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      expressions[_key - 1] = arguments[_key];
+    }
+
+    /*
+     * These are the internal expression written in dimsum
+     * We just coerce with the default theme in case users
+     * forget to add the ThemeProvider
+     */
+    const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => typeof stylesArg === 'function' ? _ref => {
+      let {
+        theme: themeInput
+      } = _ref,
+          other = _objectWithoutProperties(_ref, _excluded);
+
+      return stylesArg(_objectSpread({
+        theme: coerceWithDefaultTheme(themeInput)
+      }, other));
+    } : stylesArg) : [];
+    let transformedStyleArg = styleArg;
+    /*
+     * Here we get the style overrides from the user
+     */
+
+    if (componentName && componentSlot) {
+      expressionsWithDefaultTheme.push(props => {
+        const theme = coerceWithDefaultTheme(props.theme);
+        const styleOverrides = getStyleOverrides(componentName, theme);
+
+        if (styleOverrides) {
+          return [styleOverrides[componentSlot]];
+        }
+
+        return null;
+      });
+    }
+    /*
+     * Here we get the variant overrides from the user (only for the root)
+     */
+
+
+    if (componentName && componentSlot === 'root') {
+      expressionsWithDefaultTheme.push(props => {
+        const theme = coerceWithDefaultTheme(props.theme);
+        return variantsResolver(props, getVariantStyles(componentName, theme), theme, componentName);
+      });
+    }
+
+    const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
+
+    if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
+      // Here we are adding placeholders for all the new functions that we are gonna call
+      const placeholders = new Array(numOfCustomFnsApplied).fill('');
+      transformedStyleArg = [...styleArg, ...placeholders];
+      transformedStyleArg.raw = [...styleArg.raw, ...placeholders];
+    } else if (typeof styleArg === 'function') {
+      // Here we just coerce with the default theme
+      transformedStyleArg = _ref2 => {
+        let {
+          theme: themeInput
+        } = _ref2,
+            other = _objectWithoutProperties(_ref2, _excluded2);
+
+        return styleArg(_objectSpread({
+          theme: coerceWithDefaultTheme(themeInput)
+        }, other));
+      };
+    }
+
+    const Component = /*#__PURE__*/styled_component(tag).attrs({
+      className: "".concat(componentName, "-").concat(componentSlot)
+    }).withConfig({
+      componentId: "sc-rjg4in-0"
+    })(transformedStyleArg, ...expressionsWithDefaultTheme);
+    return Component;
+  };
+}; // Here we setup the necessary keys so we can continue using styled.button, styled.span, etc.
+
+Object.keys(styled_component).forEach(key => {
+  styled[key] = styled(key);
+});
+
+export { styled };

package/esm/styled/styleGetters.js

@@ -0,0 +1,38 @@
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'core-js/modules/esnext.async-iterator.every.js';
+import 'core-js/modules/esnext.iterator.every.js';
+import { propsToClassKey } from './utils.js';
+
+const getStyleOverrides = (name, theme) => {
+  var _theme$components, _theme$components$nam;
+
+  return ((_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : (_theme$components$nam = _theme$components[name]) === null || _theme$components$nam === void 0 ? void 0 : _theme$components$nam.styleOverrides) || null;
+};
+const getVariantStyles = (name, theme) => {
+  var _theme$components2, _theme$components2$na;
+
+  const variants = ((_theme$components2 = theme.components) === null || _theme$components2 === void 0 ? void 0 : (_theme$components2$na = _theme$components2[name]) === null || _theme$components2$na === void 0 ? void 0 : _theme$components2$na.variants) || [];
+  return variants.reduce((styles, definition) => {
+    const key = propsToClassKey(definition.props);
+    styles[key] = definition.style;
+    return styles;
+  }, {});
+};
+const variantsResolver = (props, styles, theme, name) => {
+  var _theme$components3, _theme$components3$na;
+
+  const themeVariants = (theme === null || theme === void 0 ? void 0 : (_theme$components3 = theme.components) === null || _theme$components3 === void 0 ? void 0 : (_theme$components3$na = _theme$components3[name]) === null || _theme$components3$na === void 0 ? void 0 : _theme$components3$na.variants) || [];
+  return themeVariants.reduce((variantsStyles, themeVariant) => {
+    const isMatch = Object.keys(themeVariant.props).every(key => props[key] === themeVariant.props[key]);
+
+    if (isMatch) {
+      variantsStyles.push(styles[propsToClassKey(themeVariant.props)]);
+    }
+
+    return variantsStyles;
+  }, []);
+};
+
+export { getStyleOverrides, getVariantStyles, variantsResolver };

package/esm/styled/utils.js

@@ -0,0 +1,18 @@
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import { capitalize } from '@elliemae/ds-utilities';
+import { theme } from '../theme.js';
+
+const systemTheme = theme;
+const isEmpty = string => string.length === 0;
+const coerceWithDefaultTheme = themeInput => themeInput !== null && themeInput !== void 0 ? themeInput : systemTheme;
+const propsToClassKey = props => Object.keys(props).sort().reduce((classKey, key) => {
+  if (key === 'color') {
+    return classKey + isEmpty(String(classKey)) ? String(props[key]) : capitalize(String(props[key]));
+  }
+
+  return "".concat(classKey).concat(isEmpty(String(classKey)) ? key : capitalize(key)).concat(capitalize(props[key].toString()));
+}, '');
+
+export { coerceWithDefaultTheme, isEmpty, propsToClassKey };

package/esm/th.js

@@ -0,0 +1,28 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+
+const th = property => (value, dfault) => _ref => {
+  var _result;
+
+  let {
+    theme
+  } = _ref;
+  const parts = value.split('-');
+  let result = theme[property];
+  parts.forEach(part => {
+    if (result) result = result[part];
+  });
+  return (_result = result) !== null && _result !== void 0 ? _result : dfault;
+};
+th.space = th('space');
+th.fontSize = th('fontSizes');
+th.fontWeight = th('fontWeights');
+th.lineHeight = th('lineHeights');
+th.letterSpacing = th('letterSpacings');
+th.font = th('fonts');
+th.color = th('colors');
+th.breakpoint = th('breakpoints');
+th.media = th('media');
+
+export { th };

package/esm/themeProviderHOC.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx2 from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';

package/esm/utils.js

@@ -20,20 +20,27 @@ function keyframes(obj) {
   return keyframes$1(["", ""], reduce(obj, (result, value, key) => "\n    ".concat(result, "\n    ").concat(key, "% {\n      ").concat(value, "\n    }\n  "), ''));
 } // eslint-disable-next-line max-params
 
-function boxShadow(top, left, blur, color, inset = false) {
+function boxShadow(top, left, blur, color) {
+  let inset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   return "box-shadow: ".concat(inset ? 'inset' : '', " ").concat(top, " ").concat(left, " ").concat(blur, " ").concat(color, ";");
 }
-function color(variant = 'neutral', type = 400) {
+function color() {
+  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
+  let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
   return css(["color:", ";"], props => props.theme.colors[variant][type]);
 }
-function border(color = theme.colors.brand[600], size = '1px', type = 'solid') {
+function border() {
+  let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.colors.brand[600];
+  let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1px';
+  let type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'solid';
   return "".concat(size, " ").concat(type, " ").concat(color);
 }
 function animation(animationKeyframes, animationLength, animationTimingFn) {
   return props => css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
 } // 0.0769
 
-function focus(color = theme.colors.brand[600]) {
+function focus() {
+  let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.colors.brand[600];
   return () => css(["outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], color, lighten(0.3, color));
 }
 function focusAfter(color) {
@@ -45,7 +52,8 @@ function active() {
 function hover() {
   return props => css(["outline:1px solid ", ";outline-offset:-1px;"], props.theme.colors.brand[600]);
 }
-function textStyle(type, weight = 'regular') {
+function textStyle(type) {
+  let weight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'regular';
   // eslint-disable-next-line complexity
   return props => {
     let cssVar = "font-weight: ".concat(props.theme.fontWeights[weight], ";"); // eslint-disable-next-line default-case
@@ -99,7 +107,9 @@ function textStyle(type, weight = 'regular') {
     return cssVar;
   };
 }
-function iconColor(variant = 'neutral', type = 400) {
+function iconColor() {
+  let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
+  let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
   return css(["fill:", ";"], props => props.theme.colors[variant][type]);
 }
 function fakeBorder() {
@@ -114,7 +124,8 @@ function clearFocus() {
 function buttonLink() {
   return "\n    background-color: transparent;\n    border: 1px solid transparent;\n    cursor: pointer;\n  ";
 }
-function transition(t = 'all 1s ease') {
+function transition() {
+  let t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all 1s ease';
   return "\n    transition: ".concat(t, ";\n  ");
 }
 function onlySafariAndFiredox(styles) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-system",
-  "version": "2.0.0-next.7",
+  "version": "2.0.0-rc.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - System",
   "module": "./esm/index.js",
@@ -23,6 +23,22 @@
       "import": "./esm/theme.js",
       "require": "./cjs/theme.js"
     },
+    "./th": {
+      "import": "./esm/th.js",
+      "require": "./cjs/th.js"
+    },
+    "./styled/utils": {
+      "import": "./esm/styled/utils.js",
+      "require": "./cjs/styled/utils.js"
+    },
+    "./styled/styleGetters": {
+      "import": "./esm/styled/styleGetters.js",
+      "require": "./cjs/styled/styleGetters.js"
+    },
+    "./styled": {
+      "import": "./esm/styled/index.js",
+      "require": "./cjs/styled/index.js"
+    },
     "./spaceUtilities": {
       "import": "./esm/spaceUtilities.js",
       "require": "./cjs/spaceUtilities.js"
@@ -72,16 +88,15 @@
     "polished": "~3.6.7"
   },
   "devDependencies": {
-    "@elliemae/pui-theme": "~2.2.4",
-    "styled-components": "~5.3.1",
-    "styled-system": "~5.1.5"
+    "@elliemae/pui-theme": "~2.2.5",
+    "@testing-library/jest-dom": "~5.15.0",
+    "styled-components": "~5.3.3"
   },
   "peerDependencies": {
-    "@elliemae/pui-theme": "^2.2.4",
+    "@elliemae/pui-theme": "^2.2.5",
     "lodash": "^4.17.21",
     "react": "~17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.1",
-    "styled-system": "^5.1.5"
+    "styled-components": "^5.3.3"
   }
 }

package/types/index.d.ts

@@ -3,5 +3,7 @@ export * from './spaceUtilities';
 export * from './mobileUtilities';
 export * from './utils';
 export * from './arithmetic';
+export * from './th';
 export * from './theme';
+export * from './styled';
 export { themeProviderHOC } from './themeProviderHOC';

package/types/styled/index.d.ts

@@ -0,0 +1,2 @@
+import { Styled } from './index.d';
+export declare const styled: Styled;

package/types/styled/styleGetters.d.ts

@@ -0,0 +1,4 @@
+import type { StyleObject, Theme } from './index.d';
+export declare const getStyleOverrides: (name: string, theme: Theme) => StyleObject;
+export declare const getVariantStyles: (name: string, theme: Theme) => Record<string, string>;
+export declare const variantsResolver: (props: Record<string, unknown>, styles: StyleObject, theme: Theme, name: string) => StyleObject[keyof StyleObject][];

package/types/styled/utils.d.ts

@@ -0,0 +1,4 @@
+import type { Theme } from '@elliemae/pui-theme';
+export declare const isEmpty: (string: string) => boolean;
+export declare const coerceWithDefaultTheme: (themeInput: Theme) => Theme;
+export declare const propsToClassKey: (props: Record<string, unknown>) => string;

package/types/th.d.ts

@@ -0,0 +1,14 @@
+declare type thGetter = (value: string, dfault: string) => (theme: any) => string;
+declare type thConstructor = ((property: string) => thGetter) & {
+    space: thGetter;
+    fontSize: thGetter;
+    fontWeight: thGetter;
+    lineHeight: thGetter;
+    letterSpacing: thGetter;
+    font: thGetter;
+    color: thGetter;
+    breakpoint: thGetter;
+    media: thGetter;
+};
+export declare const th: thConstructor;
+export {};

package/types/utils.d.ts

@@ -7,17 +7,17 @@ export declare function flexCenter(): string;
 export declare function disabled(): string;
 export declare function keyframes(obj: Record<string, unknown>): Keyframes;
 export declare function boxShadow(top: string, left: string, blur: string, color: string, inset?: boolean): string;
-export declare function color(variant?: string, type?: number): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare function color(variant?: string, type?: number): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export declare function border(color?: string, size?: string, type?: string): string;
 export declare function animation(animationKeyframes: string, animationLength: string, animationTimingFn: string): (props: any) => import("styled-components").FlattenSimpleInterpolation;
 export declare function focus(color?: string): () => import("styled-components").FlattenSimpleInterpolation;
-export declare function focusAfter(color: string): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare function focusAfter(color: string): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export declare function active(): (props: any) => import("styled-components").FlattenSimpleInterpolation;
 export declare function hover(): (props: any) => import("styled-components").FlattenSimpleInterpolation;
 export declare function textStyle(type: string, weight?: string): (props: any) => string;
-export declare function iconColor(variant?: string, type?: number): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export declare function fakeBorder(): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export declare function fakeActive(): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare function iconColor(variant?: string, type?: number): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare function fakeBorder(): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare function fakeActive(): import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
 export declare function clearFocus(): string;
 export declare function buttonLink(): string;
 export declare function transition(t?: string): string;