@elliemae/ds-system 2.0.0-next.1 → 2.0.0-next.11

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 (15) hide show
  1. package/cjs/arithmetic.js +2 -0
  2. package/cjs/globalStyles.js +13 -11
  3. package/cjs/mobileUtilities.js +3 -2
  4. package/cjs/spaceUtilities.js +14 -9
  5. package/cjs/themeProviderHOC.js +5 -0
  6. package/cjs/utils.js +40 -85
  7. package/esm/arithmetic.js +2 -0
  8. package/esm/globalStyles.js +9 -11
  9. package/esm/mobileUtilities.js +3 -2
  10. package/esm/spaceUtilities.js +14 -9
  11. package/esm/themeProviderHOC.js +5 -0
  12. package/esm/utils.js +40 -85
  13. package/package.json +5 -5
  14. package/cjs/package.json +0 -7
  15. package/esm/package.json +0 -7
package/cjs/arithmetic.js CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ require('core-js/modules/web.dom-collections.iterator.js');
6
+
5
7
  function getNumberAndUnit(numberStrWithUnit) {
6
8
  const [number, unit] = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
7
9
  return {
package/cjs/globalStyles.js CHANGED
@@ -2,22 +2,24 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
5
6
  require('polished');
6
7
  require('lodash');
7
8
  require('./theme.js');
9
+ require('core-js/modules/web.dom-collections.iterator.js');
8
10
  require('react');
9
11
  var styledComponents = require('styled-components');
10
12
 
11
- const GlobalStyles = styledComponents.createGlobalStyle`
12
- :root, body {
13
- overscroll-behavior-y: none;
14
- font-size: 16px;
15
- @media (min-width: ${({
16
- theme
17
- }) => theme.breakpoints.small}) {
18
- font-size: 13px;
19
- }
20
- }
21
- `;
13
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
+
15
+ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
16
+
17
+ var _templateObject;
18
+ 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"])), _ref => {
19
+ let {
20
+ theme
21
+ } = _ref;
22
+ return theme.breakpoints.small;
23
+ });
22
24
 
23
25
  exports.GlobalStyles = GlobalStyles;
package/cjs/mobileUtilities.js CHANGED
@@ -2,17 +2,18 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ require('core-js/modules/web.dom-collections.iterator.js');
5
6
  var react = require('react');
6
7
  var theme = require('./theme.js');
7
8
  var constants = require('./constants.js');
8
9
 
9
10
  function __UNSAFE_SPACE_TO_DIMSUM(unit) {
10
11
  if (constants.translateUnits[unit]) return constants.translateUnits[unit];
11
- return `${parseFloat(unit) * (constants.mobileBaseFont / constants.desktopBaseFont) / 2}px`;
12
+ return "".concat(parseFloat(unit) * (constants.mobileBaseFont / constants.desktopBaseFont) / 2, "px");
12
13
  }
13
14
  function toMobile(unit) {
14
15
  if (!isMobile()) return unit;
15
- return `${parseFloat(unit) * (constants.desktopBaseFont / constants.mobileBaseFont)}rem`;
16
+ return "".concat(parseFloat(unit) * (constants.desktopBaseFont / constants.mobileBaseFont), "rem");
16
17
  }
17
18
  const useIsMobile = () => {
18
19
  const [mobile, setMobile] = react.useState(isMobile());
package/cjs/spaceUtilities.js CHANGED
@@ -2,26 +2,31 @@
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
12
 
8
13
  function mapGap(gutter) {
9
14
  if (!gutter) return '0rem';
10
15
  if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;
11
- return `${theme.theme.space[gutter]}`;
16
+ return "".concat(theme.theme.space[gutter]);
12
17
  }
13
18
  function mapGutter(gutter) {
14
19
  if (!gutter) return '0rem';
15
- return `${theme.theme.space[gutter]} * 2`;
20
+ return "".concat(theme.theme.space[gutter], " * 2");
16
21
  }
17
22
  function mapSpace(width) {
18
- if (typeof width === 'string') return lodash.get(theme.theme, width) ? `${lodash.get(theme.theme, width)}` : width;
19
- return `${width * 100}%`;
23
+ if (typeof width === 'string') return lodash.get(theme.theme, width) ? "".concat(lodash.get(theme.theme, width)) : width;
24
+ return "".concat(width * 100, "%");
20
25
  }
21
26
  function fixSpaceGutter(width, gutter) {
22
27
  if (!width) return '';
23
- if (Array.isArray(width)) return width.map(w => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);
24
- return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;
28
+ if (Array.isArray(width)) return width.map(w => "calc(".concat(mapSpace(w), " - (").concat(mapGutter(gutter), "))"));
29
+ return "calc(".concat(mapSpace(width), " - (").concat(mapGutter(gutter), "))");
25
30
  }
26
31
  function fixSpace(width) {
27
32
  if (!width) return '';
@@ -36,13 +41,13 @@ function fixSpace(width) {
36
41
 
37
42
  function numbersToFr(grid) {
38
43
  const den = grid.map(f => f < 1 ? Math.floor(1 / f) : f);
39
- return den.map(d => `${d}fr`);
44
+ return den.map(d => "".concat(d, "fr"));
40
45
  }
41
46
  function mapGrid(width) {
42
- if (lodash.get(theme.theme, width)) return `${lodash.get(theme.theme, width)}`;
47
+ if (lodash.get(theme.theme, width)) return "".concat(lodash.get(theme.theme, width));
43
48
  if (typeof width === 'string') return width;
44
49
  const den = width < 1 ? Math.floor(1 / width) : width;
45
- return `${den}fr`;
50
+ return "".concat(den, "fr");
46
51
  }
47
52
  function mapTemplateGrid(grid) {
48
53
  if (Array.isArray(grid)) {
package/cjs/themeProviderHOC.js CHANGED
@@ -2,6 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
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');
5
10
  var _jsx2 = require('@babel/runtime/helpers/jsx');
6
11
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
12
  require('react');
package/cjs/utils.js CHANGED
@@ -10,44 +10,39 @@ var styledComponents = require('styled-components');
10
10
 
11
11
  /* eslint-disable no-shadow */
12
12
  function truncate(width) {
13
- return props => styledComponents.css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? `width: ${props.width || width};` : '');
13
+ return props => styledComponents.css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? "width: ".concat(props.width || width, ";") : '');
14
14
  }
15
15
  function flexCenter() {
16
- return `
17
- display: flex;
18
- justify-content: center;
19
- align-items: center;
20
- `;
16
+ return "\n display: flex;\n justify-content: center;\n align-items: center;\n ";
21
17
  }
22
18
  function disabled() {
23
- return `
24
- cursor: not-allowed;
25
- pointer-events: none;
26
- `;
19
+ return "\n cursor: not-allowed;\n pointer-events: none;\n ";
27
20
  }
28
21
  function keyframes(obj) {
29
- return styledComponents.keyframes(["", ""], lodash.reduce(obj, (result, value, key) => `
30
- ${result}
31
- ${key}% {
32
- ${value}
33
- }
34
- `, ''));
22
+ return styledComponents.keyframes(["", ""], lodash.reduce(obj, (result, value, key) => "\n ".concat(result, "\n ").concat(key, "% {\n ").concat(value, "\n }\n "), ''));
35
23
  } // eslint-disable-next-line max-params
36
24
 
37
- function boxShadow(top, left, blur, color, inset = false) {
38
- return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;
25
+ function boxShadow(top, left, blur, color) {
26
+ let inset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
27
+ return "box-shadow: ".concat(inset ? 'inset' : '', " ").concat(top, " ").concat(left, " ").concat(blur, " ").concat(color, ";");
39
28
  }
40
- function color(variant = 'neutral', type = 400) {
29
+ function color() {
30
+ let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
31
+ let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
41
32
  return styledComponents.css(["color:", ";"], props => props.theme.colors[variant][type]);
42
33
  }
43
- function border(color = theme.theme.colors.brand[600], size = '1px', type = 'solid') {
44
- return `${size} ${type} ${color}`;
34
+ function border() {
35
+ let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.theme.colors.brand[600];
36
+ let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1px';
37
+ let type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'solid';
38
+ return "".concat(size, " ").concat(type, " ").concat(color);
45
39
  }
46
40
  function animation(animationKeyframes, animationLength, animationTimingFn) {
47
41
  return props => styledComponents.css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
48
42
  } // 0.0769
49
43
 
50
- function focus(color = theme.theme.colors.brand[600]) {
44
+ function focus() {
45
+ let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.theme.colors.brand[600];
51
46
  return () => styledComponents.css(["outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], color, polished.lighten(0.3, color));
52
47
  }
53
48
  function focusAfter(color) {
@@ -59,96 +54,64 @@ function active() {
59
54
  function hover() {
60
55
  return props => styledComponents.css(["outline:1px solid ", ";outline-offset:-1px;"], props.theme.colors.brand[600]);
61
56
  }
62
- function textStyle(type, weight = 'regular') {
57
+ function textStyle(type) {
58
+ let weight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'regular';
63
59
  // eslint-disable-next-line complexity
64
60
  return props => {
65
- let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`; // eslint-disable-next-line default-case
61
+ let cssVar = "font-weight: ".concat(props.theme.fontWeights[weight], ";"); // eslint-disable-next-line default-case
66
62
 
67
63
  switch (type) {
68
64
  case 'h1':
69
- cssVar += `
70
- font-size: ${mobileUtilities.toMobile('2.7692rem')};
71
- line-height: normal;
72
- `;
65
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile('2.7692rem'), ";\n line-height: normal;\n ");
73
66
  break;
74
67
 
75
68
  case 'h2':
76
- cssVar += `
77
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[800])};
78
- line-height: normal;
79
- `;
69
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[800]), ";\n line-height: normal;\n ");
80
70
  break;
81
71
 
82
72
  case 'h3':
83
- cssVar += `
84
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[700])};
85
- line-height: 1.2;
86
- `;
73
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[700]), ";\n line-height: 1.2;\n ");
87
74
  break;
88
75
 
89
76
  case 'h4':
90
- cssVar += `
91
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[600])};
92
- line-height: normal;
93
- `;
77
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[600]), ";\n line-height: normal;\n ");
94
78
  break;
95
79
 
96
80
  case 'h5':
97
- cssVar += `
98
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[500])};
99
- line-height: normal;
100
- `;
81
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[500]), ";\n line-height: normal;\n ");
101
82
  break;
102
83
 
103
84
  case 'section-header':
104
- cssVar += `
105
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.title[500])};
106
- line-height: normal;
107
- text-transform: uppercase;
108
- `;
85
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[500]), ";\n line-height: normal;\n text-transform: uppercase;\n ");
109
86
  break;
110
87
 
111
88
  case 'body':
112
- cssVar += `
113
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.value[400])};
114
- line-height: normal;
115
- `;
89
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[400]), ";\n line-height: normal;\n ");
116
90
  break;
117
91
 
118
92
  case 'body-small':
119
- cssVar += `
120
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.value[300])};
121
- line-height: normal;
122
- `;
93
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[300]), ";\n line-height: normal;\n ");
123
94
  break;
124
95
 
125
96
  case 'body-micro':
126
- cssVar += `
127
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.microText[200])};
128
- line-height: normal;
129
- `;
97
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.microText[200]), ";\n line-height: normal;\n ");
130
98
  break;
131
99
 
132
100
  case 'list':
133
- cssVar += `
134
- font-size: ${mobileUtilities.toMobile(props.theme.fontSizes.value[400])};
135
- line-height: normal;
136
- `;
101
+ cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[400]), ";\n line-height: normal;\n ");
137
102
  break;
138
103
 
139
104
  case 'link':
140
- cssVar += `
141
- line-height: ${props.theme.xl};
142
- color: ${props.theme.colors.brand[600]};
143
- cursor: pointer;
144
- `;
105
+ cssVar += "\n line-height: ".concat(props.theme.xl, ";\n color: ").concat(props.theme.colors.brand[600], ";\n cursor: pointer;\n ");
145
106
  break;
146
107
  }
147
108
 
148
109
  return cssVar;
149
110
  };
150
111
  }
151
- function iconColor(variant = 'neutral', type = 400) {
112
+ function iconColor() {
113
+ let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
114
+ let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
152
115
  return styledComponents.css(["fill:", ";"], props => props.theme.colors[variant][type]);
153
116
  }
154
117
  function fakeBorder() {
@@ -158,22 +121,14 @@ function fakeActive() {
158
121
  return styledComponents.css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
159
122
  }
160
123
  function clearFocus() {
161
- return `
162
- border: none;
163
- box-shadow: none;
164
- `;
124
+ return "\n border: none;\n box-shadow: none;\n ";
165
125
  }
166
126
  function buttonLink() {
167
- return `
168
- background-color: transparent;
169
- border: 1px solid transparent;
170
- cursor: pointer;
171
- `;
172
- }
173
- function transition(t = 'all 1s ease') {
174
- return `
175
- transition: ${t};
176
- `;
127
+ return "\n background-color: transparent;\n border: 1px solid transparent;\n cursor: pointer;\n ";
128
+ }
129
+ function transition() {
130
+ let t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all 1s ease';
131
+ return "\n transition: ".concat(t, ";\n ");
177
132
  }
178
133
  function onlySafariAndFiredox(styles) {
179
134
  return styledComponents.css(["@media not all and (min-resolution:0.001dpcm){", "}@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles, styles);
package/esm/arithmetic.js CHANGED
@@ -1,3 +1,5 @@
1
+ import 'core-js/modules/web.dom-collections.iterator.js';
2
+
1
3
  function getNumberAndUnit(numberStrWithUnit) {
2
4
  const [number, unit] = String(numberStrWithUnit).match(/[a-z]+|[(/^\-?\d*.\d+|\d+),?]+/gi);
3
5
  return {
package/esm/globalStyles.js CHANGED
@@ -1,19 +1,17 @@
1
+ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
1
2
  import 'polished';
2
3
  import 'lodash';
3
4
  import './theme.js';
5
+ import 'core-js/modules/web.dom-collections.iterator.js';
4
6
  import 'react';
5
7
  import { createGlobalStyle } from 'styled-components';
6
8
 
7
- const GlobalStyles = createGlobalStyle`
8
- :root, body {
9
- overscroll-behavior-y: none;
10
- font-size: 16px;
11
- @media (min-width: ${({
12
- theme
13
- }) => theme.breakpoints.small}) {
14
- font-size: 13px;
15
- }
16
- }
17
- `;
9
+ var _templateObject;
10
+ 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"])), _ref => {
11
+ let {
12
+ theme
13
+ } = _ref;
14
+ return theme.breakpoints.small;
15
+ });
18
16
 
19
17
  export { GlobalStyles };
package/esm/mobileUtilities.js CHANGED
@@ -1,14 +1,15 @@
1
+ import 'core-js/modules/web.dom-collections.iterator.js';
1
2
  import { useState, useEffect } from 'react';
2
3
  import { theme } from './theme.js';
3
4
  import { translateUnits, mobileBaseFont, desktopBaseFont } from './constants.js';
4
5
 
5
6
  function __UNSAFE_SPACE_TO_DIMSUM(unit) {
6
7
  if (translateUnits[unit]) return translateUnits[unit];
7
- return `${parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2}px`;
8
+ return "".concat(parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2, "px");
8
9
  }
9
10
  function toMobile(unit) {
10
11
  if (!isMobile()) return unit;
11
- return `${parseFloat(unit) * (desktopBaseFont / mobileBaseFont)}rem`;
12
+ return "".concat(parseFloat(unit) * (desktopBaseFont / mobileBaseFont), "rem");
12
13
  }
13
14
  const useIsMobile = () => {
14
15
  const [mobile, setMobile] = useState(isMobile());
package/esm/spaceUtilities.js CHANGED
@@ -1,23 +1,28 @@
1
+ import 'core-js/modules/esnext.async-iterator.map.js';
2
+ import 'core-js/modules/esnext.iterator.map.js';
3
+ import 'core-js/modules/esnext.async-iterator.some.js';
4
+ import 'core-js/modules/esnext.iterator.constructor.js';
5
+ import 'core-js/modules/esnext.iterator.some.js';
1
6
  import { get } from 'lodash';
2
7
  import { theme } from './theme.js';
3
8
 
4
9
  function mapGap(gutter) {
5
10
  if (!gutter) return '0rem';
6
11
  if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;
7
- return `${theme.space[gutter]}`;
12
+ return "".concat(theme.space[gutter]);
8
13
  }
9
14
  function mapGutter(gutter) {
10
15
  if (!gutter) return '0rem';
11
- return `${theme.space[gutter]} * 2`;
16
+ return "".concat(theme.space[gutter], " * 2");
12
17
  }
13
18
  function mapSpace(width) {
14
- if (typeof width === 'string') return get(theme, width) ? `${get(theme, width)}` : width;
15
- return `${width * 100}%`;
19
+ if (typeof width === 'string') return get(theme, width) ? "".concat(get(theme, width)) : width;
20
+ return "".concat(width * 100, "%");
16
21
  }
17
22
  function fixSpaceGutter(width, gutter) {
18
23
  if (!width) return '';
19
- if (Array.isArray(width)) return width.map(w => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);
20
- return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;
24
+ if (Array.isArray(width)) return width.map(w => "calc(".concat(mapSpace(w), " - (").concat(mapGutter(gutter), "))"));
25
+ return "calc(".concat(mapSpace(width), " - (").concat(mapGutter(gutter), "))");
21
26
  }
22
27
  function fixSpace(width) {
23
28
  if (!width) return '';
@@ -32,13 +37,13 @@ function fixSpace(width) {
32
37
 
33
38
  function numbersToFr(grid) {
34
39
  const den = grid.map(f => f < 1 ? Math.floor(1 / f) : f);
35
- return den.map(d => `${d}fr`);
40
+ return den.map(d => "".concat(d, "fr"));
36
41
  }
37
42
  function mapGrid(width) {
38
- if (get(theme, width)) return `${get(theme, width)}`;
43
+ if (get(theme, width)) return "".concat(get(theme, width));
39
44
  if (typeof width === 'string') return width;
40
45
  const den = width < 1 ? Math.floor(1 / width) : width;
41
- return `${den}fr`;
46
+ return "".concat(den, "fr");
42
47
  }
43
48
  function mapTemplateGrid(grid) {
44
49
  if (Array.isArray(grid)) {
package/esm/themeProviderHOC.js CHANGED
@@ -1,3 +1,8 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
1
6
  import _jsx2 from '@babel/runtime/helpers/esm/jsx';
2
7
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
8
  import 'react';
package/esm/utils.js CHANGED
@@ -8,44 +8,39 @@ export { createGlobalStyle, css, keyframes as kfrm, useTheme, withTheme } from '
8
8
 
9
9
  /* eslint-disable no-shadow */
10
10
  function truncate(width) {
11
- return props => css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? `width: ${props.width || width};` : '');
11
+ return props => css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? "width: ".concat(props.width || width, ";") : '');
12
12
  }
13
13
  function flexCenter() {
14
- return `
15
- display: flex;
16
- justify-content: center;
17
- align-items: center;
18
- `;
14
+ return "\n display: flex;\n justify-content: center;\n align-items: center;\n ";
19
15
  }
20
16
  function disabled() {
21
- return `
22
- cursor: not-allowed;
23
- pointer-events: none;
24
- `;
17
+ return "\n cursor: not-allowed;\n pointer-events: none;\n ";
25
18
  }
26
19
  function keyframes(obj) {
27
- return keyframes$1(["", ""], reduce(obj, (result, value, key) => `
28
- ${result}
29
- ${key}% {
30
- ${value}
31
- }
32
- `, ''));
20
+ return keyframes$1(["", ""], reduce(obj, (result, value, key) => "\n ".concat(result, "\n ").concat(key, "% {\n ").concat(value, "\n }\n "), ''));
33
21
  } // eslint-disable-next-line max-params
34
22
 
35
- function boxShadow(top, left, blur, color, inset = false) {
36
- return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;
23
+ function boxShadow(top, left, blur, color) {
24
+ let inset = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
25
+ return "box-shadow: ".concat(inset ? 'inset' : '', " ").concat(top, " ").concat(left, " ").concat(blur, " ").concat(color, ";");
37
26
  }
38
- function color(variant = 'neutral', type = 400) {
27
+ function color() {
28
+ let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
29
+ let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
39
30
  return css(["color:", ";"], props => props.theme.colors[variant][type]);
40
31
  }
41
- function border(color = theme.colors.brand[600], size = '1px', type = 'solid') {
42
- return `${size} ${type} ${color}`;
32
+ function border() {
33
+ let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.colors.brand[600];
34
+ let size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1px';
35
+ let type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'solid';
36
+ return "".concat(size, " ").concat(type, " ").concat(color);
43
37
  }
44
38
  function animation(animationKeyframes, animationLength, animationTimingFn) {
45
39
  return props => css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
46
40
  } // 0.0769
47
41
 
48
- function focus(color = theme.colors.brand[600]) {
42
+ function focus() {
43
+ let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.colors.brand[600];
49
44
  return () => css(["outline:none;border:1px solid ", ";box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], color, lighten(0.3, color));
50
45
  }
51
46
  function focusAfter(color) {
@@ -57,96 +52,64 @@ function active() {
57
52
  function hover() {
58
53
  return props => css(["outline:1px solid ", ";outline-offset:-1px;"], props.theme.colors.brand[600]);
59
54
  }
60
- function textStyle(type, weight = 'regular') {
55
+ function textStyle(type) {
56
+ let weight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'regular';
61
57
  // eslint-disable-next-line complexity
62
58
  return props => {
63
- let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`; // eslint-disable-next-line default-case
59
+ let cssVar = "font-weight: ".concat(props.theme.fontWeights[weight], ";"); // eslint-disable-next-line default-case
64
60
 
65
61
  switch (type) {
66
62
  case 'h1':
67
- cssVar += `
68
- font-size: ${toMobile('2.7692rem')};
69
- line-height: normal;
70
- `;
63
+ cssVar += "\n font-size: ".concat(toMobile('2.7692rem'), ";\n line-height: normal;\n ");
71
64
  break;
72
65
 
73
66
  case 'h2':
74
- cssVar += `
75
- font-size: ${toMobile(props.theme.fontSizes.title[800])};
76
- line-height: normal;
77
- `;
67
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.title[800]), ";\n line-height: normal;\n ");
78
68
  break;
79
69
 
80
70
  case 'h3':
81
- cssVar += `
82
- font-size: ${toMobile(props.theme.fontSizes.title[700])};
83
- line-height: 1.2;
84
- `;
71
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.title[700]), ";\n line-height: 1.2;\n ");
85
72
  break;
86
73
 
87
74
  case 'h4':
88
- cssVar += `
89
- font-size: ${toMobile(props.theme.fontSizes.title[600])};
90
- line-height: normal;
91
- `;
75
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.title[600]), ";\n line-height: normal;\n ");
92
76
  break;
93
77
 
94
78
  case 'h5':
95
- cssVar += `
96
- font-size: ${toMobile(props.theme.fontSizes.title[500])};
97
- line-height: normal;
98
- `;
79
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.title[500]), ";\n line-height: normal;\n ");
99
80
  break;
100
81
 
101
82
  case 'section-header':
102
- cssVar += `
103
- font-size: ${toMobile(props.theme.fontSizes.title[500])};
104
- line-height: normal;
105
- text-transform: uppercase;
106
- `;
83
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.title[500]), ";\n line-height: normal;\n text-transform: uppercase;\n ");
107
84
  break;
108
85
 
109
86
  case 'body':
110
- cssVar += `
111
- font-size: ${toMobile(props.theme.fontSizes.value[400])};
112
- line-height: normal;
113
- `;
87
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.value[400]), ";\n line-height: normal;\n ");
114
88
  break;
115
89
 
116
90
  case 'body-small':
117
- cssVar += `
118
- font-size: ${toMobile(props.theme.fontSizes.value[300])};
119
- line-height: normal;
120
- `;
91
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.value[300]), ";\n line-height: normal;\n ");
121
92
  break;
122
93
 
123
94
  case 'body-micro':
124
- cssVar += `
125
- font-size: ${toMobile(props.theme.fontSizes.microText[200])};
126
- line-height: normal;
127
- `;
95
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.microText[200]), ";\n line-height: normal;\n ");
128
96
  break;
129
97
 
130
98
  case 'list':
131
- cssVar += `
132
- font-size: ${toMobile(props.theme.fontSizes.value[400])};
133
- line-height: normal;
134
- `;
99
+ cssVar += "\n font-size: ".concat(toMobile(props.theme.fontSizes.value[400]), ";\n line-height: normal;\n ");
135
100
  break;
136
101
 
137
102
  case 'link':
138
- cssVar += `
139
- line-height: ${props.theme.xl};
140
- color: ${props.theme.colors.brand[600]};
141
- cursor: pointer;
142
- `;
103
+ cssVar += "\n line-height: ".concat(props.theme.xl, ";\n color: ").concat(props.theme.colors.brand[600], ";\n cursor: pointer;\n ");
143
104
  break;
144
105
  }
145
106
 
146
107
  return cssVar;
147
108
  };
148
109
  }
149
- function iconColor(variant = 'neutral', type = 400) {
110
+ function iconColor() {
111
+ let variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'neutral';
112
+ let type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 400;
150
113
  return css(["fill:", ";"], props => props.theme.colors[variant][type]);
151
114
  }
152
115
  function fakeBorder() {
@@ -156,22 +119,14 @@ function fakeActive() {
156
119
  return css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
157
120
  }
158
121
  function clearFocus() {
159
- return `
160
- border: none;
161
- box-shadow: none;
162
- `;
122
+ return "\n border: none;\n box-shadow: none;\n ";
163
123
  }
164
124
  function buttonLink() {
165
- return `
166
- background-color: transparent;
167
- border: 1px solid transparent;
168
- cursor: pointer;
169
- `;
170
- }
171
- function transition(t = 'all 1s ease') {
172
- return `
173
- transition: ${t};
174
- `;
125
+ return "\n background-color: transparent;\n border: 1px solid transparent;\n cursor: pointer;\n ";
126
+ }
127
+ function transition() {
128
+ let t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all 1s ease';
129
+ return "\n transition: ".concat(t, ";\n ");
175
130
  }
176
131
  function onlySafariAndFiredox(styles) {
177
132
  return css(["@media not all and (min-resolution:0.001dpcm){", "}@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles, styles);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-system",
3
- "version": "2.0.0-next.1",
3
+ "version": "2.0.0-next.11",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - System",
6
6
  "module": "./esm/index.js",
@@ -72,16 +72,16 @@
72
72
  "polished": "~3.6.7"
73
73
  },
74
74
  "devDependencies": {
75
- "@elliemae/pui-theme": "~2.2.4",
76
- "styled-components": "~5.3.1",
75
+ "@elliemae/pui-theme": "~2.2.5",
76
+ "styled-components": "~5.3.3",
77
77
  "styled-system": "~5.1.5"
78
78
  },
79
79
  "peerDependencies": {
80
- "@elliemae/pui-theme": "^2.2.4",
80
+ "@elliemae/pui-theme": "^2.2.5",
81
81
  "lodash": "^4.17.21",
82
82
  "react": "~17.0.2",
83
83
  "react-dom": "^17.0.2",
84
- "styled-components": "^5.3.1",
84
+ "styled-components": "^5.3.3",
85
85
  "styled-system": "^5.1.5"
86
86
  }
87
87
  }
package/cjs/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "commonjs",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }
package/esm/package.json DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "type": "module",
3
- "sideEffects": [
4
- "*.css",
5
- "*.scss"
6
- ]
7
- }