@elliemae/ds-system 1.60.0 → 2.0.0-alpha.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/cjs/arithmetic.js +12 -20
  2. package/cjs/constants.js +3 -4
  3. package/cjs/globalStyles.js +7 -9
  4. package/cjs/index.js +27 -17
  5. package/cjs/mobileUtilities.js +7 -17
  6. package/cjs/spaceUtilities.js +11 -20
  7. package/cjs/styled/index.d.js +2 -0
  8. package/cjs/styled/index.js +124 -0
  9. package/cjs/styled/styleGetters.js +44 -0
  10. package/cjs/styled/types.js +12 -0
  11. package/cjs/styled/utils.js +24 -0
  12. package/cjs/th.js +32 -0
  13. package/cjs/theme.js +1 -2
  14. package/cjs/themeProviderHOC.js +18 -12
  15. package/cjs/utils.js +52 -84
  16. package/esm/arithmetic.js +12 -16
  17. package/esm/constants.js +3 -4
  18. package/esm/globalStyles.js +7 -9
  19. package/esm/index.js +4 -9
  20. package/esm/mobileUtilities.js +6 -12
  21. package/esm/spaceUtilities.js +11 -20
  22. package/esm/styled/index.d.js +1 -0
  23. package/esm/styled/index.js +115 -0
  24. package/esm/styled/styleGetters.js +38 -0
  25. package/esm/styled/types.js +1 -0
  26. package/esm/styled/utils.js +18 -0
  27. package/esm/th.js +28 -0
  28. package/esm/theme.js +1 -2
  29. package/esm/themeProviderHOC.js +15 -10
  30. package/esm/utils.js +31 -71
  31. package/package.json +83 -12
  32. package/types/arithmetic.d.ts +5 -0
  33. package/types/constants.d.ts +11 -0
  34. package/types/globalStyles.d.ts +1 -0
  35. package/types/index.d.ts +9 -0
  36. package/types/mobileUtilities.d.ts +4 -0
  37. package/types/spaceUtilities.d.ts +13 -0
  38. package/types/styled/index.d.ts +2 -0
  39. package/types/styled/styleGetters.d.ts +4 -0
  40. package/types/styled/types.d.ts +28 -0
  41. package/types/styled/utils.d.ts +6 -0
  42. package/types/tests/arithmetic.test.d.ts +1 -0
  43. package/types/th.d.ts +14 -0
  44. package/types/theme.d.ts +2 -0
  45. package/types/themeProviderHOC.d.ts +2 -0
  46. package/types/utils.d.ts +27 -0
  47. package/arithmetic/package.json +0 -10
  48. package/cjs/arithmetic.js.map +0 -1
  49. package/cjs/constants.js.map +0 -1
  50. package/cjs/globalStyles.js.map +0 -1
  51. package/cjs/index.js.map +0 -1
  52. package/cjs/mobileUtilities.js.map +0 -1
  53. package/cjs/spaceUtilities.js.map +0 -1
  54. package/cjs/theme.js.map +0 -1
  55. package/cjs/themeProviderHOC.js.map +0 -1
  56. package/cjs/utils.js.map +0 -1
  57. package/constants/package.json +0 -10
  58. package/esm/arithmetic.js.map +0 -1
  59. package/esm/constants.js.map +0 -1
  60. package/esm/globalStyles.js.map +0 -1
  61. package/esm/index.js.map +0 -1
  62. package/esm/mobileUtilities.js.map +0 -1
  63. package/esm/spaceUtilities.js.map +0 -1
  64. package/esm/theme.js.map +0 -1
  65. package/esm/themeProviderHOC.js.map +0 -1
  66. package/esm/utils.js.map +0 -1
  67. package/globalStyles/package.json +0 -10
  68. package/mobileUtilities/package.json +0 -10
  69. package/spaceUtilities/package.json +0 -10
  70. package/theme/package.json +0 -10
  71. package/themeProviderHOC/package.json +0 -10
  72. package/utils/package.json +0 -10
package/cjs/arithmetic.js CHANGED
@@ -2,31 +2,24 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
6
-
7
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
-
9
- var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
5
+ require('core-js/modules/web.dom-collections.iterator.js');
10
6
 
11
7
  function getNumberAndUnit(numberStrWithUnit) {
12
- var _String$match = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi),
13
- _String$match2 = _slicedToArray__default['default'](_String$match, 2),
14
- number = _String$match2[0],
15
- unit = _String$match2[1];
16
-
8
+ const [number, unit] = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
17
9
  return {
18
- number: number,
19
- unit: unit
10
+ number,
11
+ unit
20
12
  };
21
13
  }
22
14
  function op(operator, n1, n2) {
23
- var _getNumberAndUnit = getNumberAndUnit(n1),
24
- number = _getNumberAndUnit.number,
25
- unit = _getNumberAndUnit.unit;
26
-
27
- var _getNumberAndUnit2 = getNumberAndUnit(n2),
28
- number2 = _getNumberAndUnit2.number,
29
- unit2 = _getNumberAndUnit2.unit;
15
+ const {
16
+ number,
17
+ unit
18
+ } = getNumberAndUnit(n1);
19
+ const {
20
+ number: number2,
21
+ unit: unit2
22
+ } = getNumberAndUnit(n2);
30
23
 
31
24
  switch (operator) {
32
25
  case '*':
@@ -48,4 +41,3 @@ function op(operator, n1, n2) {
48
41
 
49
42
  exports.getNumberAndUnit = getNumberAndUnit;
50
43
  exports.op = op;
51
- //# sourceMappingURL=arithmetic.js.map
package/cjs/constants.js CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var desktopBaseFont = 13;
6
- var mobileBaseFont = 16;
7
- var translateUnits = {
5
+ const desktopBaseFont = 13;
6
+ const mobileBaseFont = 16;
7
+ const translateUnits = {
8
8
  '8px': '4px',
9
9
  '16px': '8px',
10
10
  '32px': '16px',
@@ -17,4 +17,3 @@ var translateUnits = {
17
17
  exports.desktopBaseFont = desktopBaseFont;
18
18
  exports.mobileBaseFont = mobileBaseFont;
19
19
  exports.translateUnits = translateUnits;
20
- //# sourceMappingURL=constants.js.map
@@ -3,25 +3,23 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
- var utils = require('./utils.js');
7
6
  require('polished');
8
7
  require('lodash');
9
8
  require('./theme.js');
10
- require('@elliemae/pui-theme');
11
- require('./mobileUtilities.js');
12
- require('@babel/runtime/helpers/slicedToArray');
9
+ require('core-js/modules/web.dom-collections.iterator.js');
13
10
  require('react');
14
- require('./constants.js');
11
+ var styled_component = require('styled-components');
15
12
 
16
13
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
14
 
18
15
  var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
19
16
 
20
17
  var _templateObject;
21
- var GlobalStyles = utils.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"])), function (_ref) {
22
- var theme = _ref.theme;
18
+ 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 => {
19
+ let {
20
+ theme
21
+ } = _ref;
23
22
  return theme.breakpoints.small;
24
- });
23
+ }, props => props.device === 'mobile' ? '16px' : '13px');
25
24
 
26
25
  exports.GlobalStyles = GlobalStyles;
27
- //# sourceMappingURL=globalStyles.js.map
package/cjs/index.js CHANGED
@@ -7,16 +7,12 @@ var spaceUtilities = require('./spaceUtilities.js');
7
7
  var mobileUtilities = require('./mobileUtilities.js');
8
8
  var utils = require('./utils.js');
9
9
  var arithmetic = require('./arithmetic.js');
10
+ var th = require('./th.js');
10
11
  var theme = require('./theme.js');
12
+ var index = require('./styled/index.js');
11
13
  var themeProviderHOC = require('./themeProviderHOC.js');
14
+ var styled_component = require('styled-components');
12
15
  var polished = require('polished');
13
- require('@babel/runtime/helpers/taggedTemplateLiteral');
14
- require('lodash');
15
- require('@elliemae/pui-theme');
16
- require('@babel/runtime/helpers/slicedToArray');
17
- require('react');
18
- require('./constants.js');
19
- require('styled-components');
20
16
 
21
17
 
22
18
 
@@ -40,8 +36,6 @@ exports.boxShadow = utils.boxShadow;
40
36
  exports.buttonLink = utils.buttonLink;
41
37
  exports.clearFocus = utils.clearFocus;
42
38
  exports.color = utils.color;
43
- exports.createGlobalStyle = utils.createGlobalStyle;
44
- exports.css = utils.css;
45
39
  exports.disabled = utils.disabled;
46
40
  exports.fakeActive = utils.fakeActive;
47
41
  exports.fakeBorder = utils.fakeBorder;
@@ -51,24 +45,40 @@ exports.focusAfter = utils.focusAfter;
51
45
  exports.hover = utils.hover;
52
46
  exports.iconColor = utils.iconColor;
53
47
  exports.keyframes = utils.keyframes;
54
- exports.kfrm = utils.kfrm;
55
48
  exports.onlyFirefox = utils.onlyFirefox;
56
49
  exports.onlySafari = utils.onlySafari;
57
- exports.onlySafariAndFiredox = utils.onlySafariAndFiredox;
50
+ exports.onlySafariAndFirefox = utils.onlySafariAndFirefox;
58
51
  exports.safariAndFirefoxBold = utils.safariAndFirefoxBold;
59
52
  exports.textStyle = utils.textStyle;
60
53
  exports.transition = utils.transition;
61
54
  exports.truncate = utils.truncate;
62
- exports.useTheme = utils.useTheme;
63
- exports.withTheme = utils.withTheme;
64
55
  exports.getNumberAndUnit = arithmetic.getNumberAndUnit;
65
56
  exports.op = arithmetic.op;
57
+ exports.th = th.th;
66
58
  exports.theme = theme.theme;
59
+ exports.styled = index.styled;
67
60
  exports.themeProviderHOC = themeProviderHOC.themeProviderHOC;
61
+ Object.defineProperty(exports, 'createGlobalStyle', {
62
+ enumerable: true,
63
+ get: function () { return styled_component.createGlobalStyle; }
64
+ });
65
+ Object.defineProperty(exports, 'css', {
66
+ enumerable: true,
67
+ get: function () { return styled_component.css; }
68
+ });
69
+ Object.defineProperty(exports, 'kfrm', {
70
+ enumerable: true,
71
+ get: function () { return styled_component.keyframes; }
72
+ });
73
+ Object.defineProperty(exports, 'useTheme', {
74
+ enumerable: true,
75
+ get: function () { return styled_component.useTheme; }
76
+ });
77
+ Object.defineProperty(exports, 'withTheme', {
78
+ enumerable: true,
79
+ get: function () { return styled_component.withTheme; }
80
+ });
68
81
  Object.defineProperty(exports, 'rgba', {
69
82
  enumerable: true,
70
- get: function () {
71
- return polished.rgba;
72
- }
83
+ get: function () { return polished.rgba; }
73
84
  });
74
- //# sourceMappingURL=index.js.map
@@ -2,15 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
6
- var React = require('react');
5
+ require('core-js/modules/web.dom-collections.iterator.js');
6
+ var react = require('react');
7
7
  var theme = require('./theme.js');
8
8
  var constants = require('./constants.js');
9
- require('@elliemae/pui-theme');
10
-
11
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
-
13
- var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
14
9
 
15
10
  function __UNSAFE_SPACE_TO_DIMSUM(unit) {
16
11
  if (constants.translateUnits[unit]) return constants.translateUnits[unit];
@@ -20,26 +15,22 @@ function toMobile(unit) {
20
15
  if (!isMobile()) return unit;
21
16
  return "".concat(parseFloat(unit) * (constants.desktopBaseFont / constants.mobileBaseFont), "rem");
22
17
  }
23
- var useIsMobile = function useIsMobile() {
24
- var _useState = React.useState(isMobile()),
25
- _useState2 = _slicedToArray__default['default'](_useState, 2),
26
- mobile = _useState2[0],
27
- setMobile = _useState2[1];
28
-
29
- React.useEffect(function () {
18
+ const useIsMobile = () => {
19
+ const [mobile, setMobile] = react.useState(isMobile());
20
+ react.useEffect(() => {
30
21
  function handleResize() {
31
22
  setMobile(isMobile());
32
23
  }
33
24
 
34
25
  if (window) window.addEventListener('resize', handleResize);
35
- return function () {
26
+ return () => {
36
27
  if (window) window.removeEventListener('resize', handleResize);
37
28
  };
38
29
  }, []);
39
30
  if (!window) return false;
40
31
  return mobile;
41
32
  };
42
- var isMobile = function isMobile() {
33
+ const isMobile = () => {
43
34
  if (!window) return false;
44
35
  return Number(theme.theme.breakpoints.medium.split('px')[0]) - window.innerWidth >= 0;
45
36
  };
@@ -48,4 +39,3 @@ exports.__UNSAFE_SPACE_TO_DIMSUM = __UNSAFE_SPACE_TO_DIMSUM;
48
39
  exports.isMobile = isMobile;
49
40
  exports.toMobile = toMobile;
50
41
  exports.useIsMobile = useIsMobile;
51
- //# sourceMappingURL=mobileUtilities.js.map
@@ -2,9 +2,13 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ require('core-js/modules/esnext.async-iterator.map.js');
6
+ require('core-js/modules/esnext.iterator.map.js');
7
+ require('core-js/modules/esnext.async-iterator.some.js');
8
+ require('core-js/modules/esnext.iterator.constructor.js');
9
+ require('core-js/modules/esnext.iterator.some.js');
5
10
  var lodash = require('lodash');
6
11
  var theme = require('./theme.js');
7
- require('@elliemae/pui-theme');
8
12
 
9
13
  function mapGap(gutter) {
10
14
  if (!gutter) return '0rem';
@@ -21,16 +25,12 @@ function mapSpace(width) {
21
25
  }
22
26
  function fixSpaceGutter(width, gutter) {
23
27
  if (!width) return '';
24
- if (Array.isArray(width)) return width.map(function (w) {
25
- return "calc(".concat(mapSpace(w), " - (").concat(mapGutter(gutter), "))");
26
- });
28
+ if (Array.isArray(width)) return width.map(w => "calc(".concat(mapSpace(w), " - (").concat(mapGutter(gutter), "))"));
27
29
  return "calc(".concat(mapSpace(width), " - (").concat(mapGutter(gutter), "))");
28
30
  }
29
31
  function fixSpace(width) {
30
32
  if (!width) return '';
31
- if (Array.isArray(width)) return width.map(function (w) {
32
- return mapSpace(w);
33
- });
33
+ if (Array.isArray(width)) return width.map(w => mapSpace(w));
34
34
  return mapSpace(width);
35
35
  }
36
36
  /**
@@ -40,26 +40,18 @@ function fixSpace(width) {
40
40
  */
41
41
 
42
42
  function numbersToFr(grid) {
43
- var den = grid.map(function (f) {
44
- return f < 1 ? Math.floor(1 / f) : f;
45
- });
46
- return den.map(function (d) {
47
- return "".concat(d, "fr");
48
- });
43
+ const den = grid.map(f => f < 1 ? Math.floor(1 / f) : f);
44
+ return den.map(d => "".concat(d, "fr"));
49
45
  }
50
46
  function mapGrid(width) {
51
47
  if (lodash.get(theme.theme, width)) return "".concat(lodash.get(theme.theme, width));
52
48
  if (typeof width === 'string') return width;
53
- var den = width < 1 ? Math.floor(1 / width) : width;
49
+ const den = width < 1 ? Math.floor(1 / width) : width;
54
50
  return "".concat(den, "fr");
55
51
  }
56
52
  function mapTemplateGrid(grid) {
57
53
  if (Array.isArray(grid)) {
58
- if (grid.some(function (w) {
59
- return typeof w === 'string';
60
- })) return grid.map(function (w) {
61
- return mapGrid(w);
62
- });
54
+ if (grid.some(w => typeof w === 'string')) return grid.map(w => mapGrid(w));
63
55
  return numbersToFr(grid);
64
56
  }
65
57
 
@@ -74,4 +66,3 @@ exports.mapGutter = mapGutter;
74
66
  exports.mapSpace = mapSpace;
75
67
  exports.mapTemplateGrid = mapTemplateGrid;
76
68
  exports.numbersToFr = numbersToFr;
77
- //# sourceMappingURL=spaceUtilities.js.map
@@ -0,0 +1,2 @@
1
+ 'use strict';
2
+
@@ -0,0 +1,124 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
+ require('core-js/modules/esnext.async-iterator.map.js');
7
+ require('core-js/modules/esnext.iterator.map.js');
8
+ require('core-js/modules/web.dom-collections.iterator.js');
9
+ require('core-js/modules/esnext.async-iterator.reduce.js');
10
+ require('core-js/modules/esnext.iterator.constructor.js');
11
+ require('core-js/modules/esnext.iterator.reduce.js');
12
+ require('core-js/modules/esnext.async-iterator.filter.js');
13
+ require('core-js/modules/esnext.iterator.filter.js');
14
+ require('core-js/modules/esnext.async-iterator.for-each.js');
15
+ require('core-js/modules/esnext.iterator.for-each.js');
16
+ var styled_component = require('styled-components');
17
+ var styleGetters = require('./styleGetters.js');
18
+ var utils = require('./utils.js');
19
+
20
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
21
+
22
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
23
+ var styled_component__default = /*#__PURE__*/_interopDefaultLegacy(styled_component);
24
+
25
+ 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; }
26
+
27
+ 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; }
28
+
29
+ const styledFunction = function (tag) {
30
+ let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
31
+ name: null,
32
+ slot: null
33
+ };
34
+ const {
35
+ name: componentName,
36
+ slot: componentSlot
37
+ } = options;
38
+
39
+ const func = function (styleArg) {
40
+ for (var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
41
+ expressions[_key - 1] = arguments[_key];
42
+ }
43
+
44
+ /*
45
+ * These are the internal expression written in dimsum
46
+ * We just coerce with the default theme in case users
47
+ * forget to add the ThemeProvider
48
+ */
49
+ const expressionsWithDefaultTheme = expressions ? expressions.map(stylesArg => typeof stylesArg === 'function' ? props => stylesArg(_objectSpread(_objectSpread({}, props), {}, {
50
+ theme: utils.coerceWithDefaultTheme(props.theme)
51
+ })) : stylesArg) : [];
52
+ let transformedStyleArg = styleArg;
53
+ /*
54
+ * Here we get the style overrides from the user
55
+ */
56
+
57
+ if (componentName && componentSlot) {
58
+ expressionsWithDefaultTheme.push(props => {
59
+ const theme = utils.coerceWithDefaultTheme(props.theme);
60
+ const styleOverrides = styleGetters.getStyleOverrides(componentName, theme);
61
+
62
+ if (styleOverrides) {
63
+ return [styleOverrides[componentSlot]];
64
+ }
65
+
66
+ return null;
67
+ });
68
+ }
69
+ /*
70
+ * Here we get the variant overrides from the user (only for the root)
71
+ */
72
+
73
+
74
+ if (componentName && componentSlot === 'root') {
75
+ expressionsWithDefaultTheme.push(props => {
76
+ const theme = utils.coerceWithDefaultTheme(props.theme);
77
+ return styleGetters.variantsResolver(props, styleGetters.getVariantStyles(componentName, theme), theme, componentName);
78
+ });
79
+ }
80
+
81
+ const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
82
+
83
+ if (Array.isArray(styleArg) && numOfCustomFnsApplied > 0) {
84
+ // Here we are adding placeholders for all the new functions that we are gonna call
85
+ const placeholders = new Array(numOfCustomFnsApplied).fill('');
86
+ transformedStyleArg = Object.assign([...styleArg, ...placeholders], {
87
+ raw: [...styleArg.raw, ...placeholders]
88
+ });
89
+ } else if (typeof styleArg === 'function') {
90
+ // Here we just coerce with the default theme
91
+ transformedStyleArg = props => styleArg(_objectSpread(_objectSpread({}, props), {}, {
92
+ theme: utils.coerceWithDefaultTheme(props.theme)
93
+ }));
94
+ }
95
+
96
+ let Component = /*#__PURE__*/styled_component__default["default"](tag);
97
+ const displayName = componentName !== null && componentSlot !== null ? "".concat(componentName).concat(componentSlot) : null;
98
+
99
+ if (displayName !== null) {
100
+ Component = Component.attrs({
101
+ className: "".concat(componentName).concat(componentSlot)
102
+ });
103
+ }
104
+
105
+ Component = Component(transformedStyleArg, ...expressionsWithDefaultTheme);
106
+
107
+ if (displayName !== null) {
108
+ Component.displayName = displayName;
109
+ }
110
+
111
+ return Component;
112
+ };
113
+
114
+ return func;
115
+ };
116
+
117
+ const styledObject = Object.keys(styled_component__default["default"]).reduce((obj, key) => {
118
+ const castedKey = key;
119
+ obj[castedKey] = styledFunction(castedKey);
120
+ return obj;
121
+ }, {});
122
+ const styled = Object.assign(styledFunction, styledObject);
123
+
124
+ exports.styled = styled;
@@ -0,0 +1,44 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ require('core-js/modules/esnext.async-iterator.reduce.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.reduce.js');
8
+ require('core-js/modules/esnext.async-iterator.every.js');
9
+ require('core-js/modules/esnext.iterator.every.js');
10
+ var utils = require('./utils.js');
11
+
12
+ const getStyleOverrides = (name, theme) => {
13
+ var _theme$components, _theme$components$nam;
14
+
15
+ 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;
16
+ };
17
+ const getVariantStyles = (name, theme) => {
18
+ var _theme$components2, _theme$components2$na;
19
+
20
+ 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) || [];
21
+ return variants.reduce((styles, definition) => {
22
+ const key = utils.propsToClassKey(definition.props);
23
+ styles[key] = definition.style;
24
+ return styles;
25
+ }, {});
26
+ };
27
+ const variantsResolver = (props, styles, theme, name) => {
28
+ var _theme$components3, _theme$components3$na;
29
+
30
+ 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) || [];
31
+ return themeVariants.reduce((variantsStyles, themeVariant) => {
32
+ const isMatch = Object.keys(themeVariant.props).every(key => props[key] === themeVariant.props[key]);
33
+
34
+ if (isMatch) {
35
+ variantsStyles.push(styles[utils.propsToClassKey(themeVariant.props)]);
36
+ }
37
+
38
+ return variantsStyles;
39
+ }, []);
40
+ };
41
+
42
+ exports.getStyleOverrides = getStyleOverrides;
43
+ exports.getVariantStyles = getVariantStyles;
44
+ exports.variantsResolver = variantsResolver;
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var styled_component = require('styled-components');
6
+
7
+
8
+
9
+ Object.defineProperty(exports, 'CSSObject', {
10
+ enumerable: true,
11
+ get: function () { return styled_component.CSSObject; }
12
+ });
@@ -0,0 +1,24 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ require('core-js/modules/esnext.async-iterator.reduce.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.reduce.js');
8
+ var dsUtilities = require('@elliemae/ds-utilities');
9
+ var theme = require('../theme.js');
10
+
11
+ const systemTheme = theme.theme;
12
+ const isEmpty = string => string.length === 0;
13
+ const coerceWithDefaultTheme = themeInput => themeInput !== null && themeInput !== void 0 ? themeInput : systemTheme;
14
+ const propsToClassKey = props => Object.keys(props).sort().reduce((classKey, key) => {
15
+ if (key === 'color') {
16
+ return classKey + isEmpty(String(classKey)) ? String(props[key]) : dsUtilities.capitalize(String(props[key]));
17
+ }
18
+
19
+ return "".concat(classKey).concat(isEmpty(String(classKey)) ? key : dsUtilities.capitalize(key)).concat(dsUtilities.capitalize(props[key].toString()));
20
+ }, '');
21
+
22
+ exports.coerceWithDefaultTheme = coerceWithDefaultTheme;
23
+ exports.isEmpty = isEmpty;
24
+ exports.propsToClassKey = propsToClassKey;
package/cjs/th.js ADDED
@@ -0,0 +1,32 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ require('core-js/modules/esnext.async-iterator.for-each.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.for-each.js');
8
+
9
+ const th = property => (value, dfault) => _ref => {
10
+ var _result;
11
+
12
+ let {
13
+ theme
14
+ } = _ref;
15
+ const parts = value.split('-');
16
+ let result = theme[property];
17
+ parts.forEach(part => {
18
+ if (result) result = result[part];
19
+ });
20
+ return (_result = result) !== null && _result !== void 0 ? _result : dfault;
21
+ };
22
+ th.space = th('space');
23
+ th.fontSize = th('fontSizes');
24
+ th.fontWeight = th('fontWeights');
25
+ th.lineHeight = th('lineHeights');
26
+ th.letterSpacing = th('letterSpacings');
27
+ th.font = th('fonts');
28
+ th.color = th('colors');
29
+ th.breakpoint = th('breakpoints');
30
+ th.media = th('media');
31
+
32
+ exports.th = th;
package/cjs/theme.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var puiTheme = require('@elliemae/pui-theme');
6
6
 
7
- var theme = puiTheme.getDefaultTheme();
7
+ const theme = puiTheme.getDefaultTheme();
8
8
 
9
9
  exports.theme = theme;
10
- //# sourceMappingURL=theme.js.map
@@ -2,22 +2,28 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var React = require('react');
6
- var styledComponents = require('styled-components');
5
+ require('core-js/modules/esnext.async-iterator.filter.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.filter.js');
8
+ require('core-js/modules/esnext.async-iterator.for-each.js');
9
+ require('core-js/modules/esnext.iterator.for-each.js');
10
+ var _jsx2 = require('@babel/runtime/helpers/jsx');
11
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
12
+ require('react');
13
+ var styled_component = require('styled-components');
7
14
  var theme = require('./theme.js');
8
- require('@elliemae/pui-theme');
15
+ var jsxRuntime = require('react/jsx-runtime');
9
16
 
10
17
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
18
 
12
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
19
+ var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
20
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
13
21
 
14
- var themeProviderHOC = function themeProviderHOC(Component) {
15
- return function (props) {
16
- return /*#__PURE__*/React__default['default'].createElement(styledComponents.ThemeProvider, {
17
- theme: theme.theme
18
- }, /*#__PURE__*/React__default['default'].createElement(Component, props));
19
- };
20
- };
22
+ 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; }
23
+
24
+ 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; }
25
+ const themeProviderHOC = Component => props => /*#__PURE__*/_jsx2__default["default"](styled_component.ThemeProvider, {
26
+ theme: theme.theme
27
+ }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
21
28
 
22
29
  exports.themeProviderHOC = themeProviderHOC;
23
- //# sourceMappingURL=themeProviderHOC.js.map