@elliemae/ds-system 2.3.0-next.0 → 3.0.0-alpha.0

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 (105) hide show
  1. package/dist/cjs/arithmetic.js +55 -0
  2. package/dist/cjs/arithmetic.js.map +7 -0
  3. package/dist/cjs/constants.js +47 -0
  4. package/dist/cjs/constants.js.map +7 -0
  5. package/dist/cjs/globalStyles.js +47 -0
  6. package/dist/cjs/globalStyles.js.map +7 -0
  7. package/dist/cjs/index.js +43 -0
  8. package/dist/cjs/index.js.map +7 -0
  9. package/dist/cjs/mobileUtilities.js +72 -0
  10. package/dist/cjs/mobileUtilities.js.map +7 -0
  11. package/dist/cjs/spaceUtilities.js +94 -0
  12. package/dist/cjs/spaceUtilities.js.map +7 -0
  13. package/dist/cjs/styled/index.d.js +27 -0
  14. package/dist/cjs/styled/index.d.js.map +7 -0
  15. package/dist/cjs/styled/index.js +89 -0
  16. package/dist/cjs/styled/index.js.map +7 -0
  17. package/dist/cjs/styled/styleGetters.js +56 -0
  18. package/dist/cjs/styled/styleGetters.js.map +7 -0
  19. package/dist/cjs/styled/types.js +35 -0
  20. package/dist/cjs/styled/types.js.map +7 -0
  21. package/dist/cjs/styled/utils.js +47 -0
  22. package/dist/cjs/styled/utils.js.map +7 -0
  23. package/dist/cjs/th.js +58 -0
  24. package/dist/cjs/th.js.map +7 -0
  25. package/dist/cjs/theme.js +36 -0
  26. package/dist/cjs/theme.js.map +7 -0
  27. package/dist/cjs/themeProviderHOC.js +42 -0
  28. package/dist/cjs/themeProviderHOC.js.map +7 -0
  29. package/dist/cjs/utils.js +294 -0
  30. package/dist/cjs/utils.js.map +7 -0
  31. package/{esm → dist/esm}/arithmetic.js +13 -25
  32. package/dist/esm/arithmetic.js.map +7 -0
  33. package/dist/esm/constants.js +18 -0
  34. package/dist/esm/constants.js.map +7 -0
  35. package/dist/esm/globalStyles.js +18 -0
  36. package/dist/esm/globalStyles.js.map +7 -0
  37. package/dist/esm/index.js +14 -0
  38. package/dist/esm/index.js.map +7 -0
  39. package/dist/esm/mobileUtilities.js +43 -0
  40. package/dist/esm/mobileUtilities.js.map +7 -0
  41. package/dist/esm/spaceUtilities.js +65 -0
  42. package/dist/esm/spaceUtilities.js.map +7 -0
  43. package/dist/esm/styled/index.d.js +2 -0
  44. package/dist/esm/styled/index.d.js.map +7 -0
  45. package/dist/esm/styled/index.js +60 -0
  46. package/dist/esm/styled/index.js.map +7 -0
  47. package/dist/esm/styled/styleGetters.js +27 -0
  48. package/dist/esm/styled/styleGetters.js.map +7 -0
  49. package/dist/esm/styled/types.js +6 -0
  50. package/dist/esm/styled/types.js.map +7 -0
  51. package/dist/esm/styled/utils.js +18 -0
  52. package/dist/esm/styled/utils.js.map +7 -0
  53. package/dist/esm/th.js +29 -0
  54. package/dist/esm/th.js.map +7 -0
  55. package/dist/esm/theme.js +7 -0
  56. package/dist/esm/theme.js.map +7 -0
  57. package/dist/esm/themeProviderHOC.js +13 -0
  58. package/dist/esm/themeProviderHOC.js.map +7 -0
  59. package/dist/esm/utils.js +265 -0
  60. package/dist/esm/utils.js.map +7 -0
  61. package/{types → dist/types}/arithmetic.d.ts +0 -0
  62. package/{types → dist/types}/constants.d.ts +0 -0
  63. package/{types → dist/types}/globalStyles.d.ts +0 -0
  64. package/{types → dist/types}/index.d.ts +0 -0
  65. package/{types → dist/types}/mobileUtilities.d.ts +0 -0
  66. package/{types → dist/types}/spaceUtilities.d.ts +0 -0
  67. package/{types → dist/types}/styled/index.d.ts +0 -0
  68. package/{types → dist/types}/styled/styleGetters.d.ts +0 -0
  69. package/{types → dist/types}/styled/types.d.ts +0 -0
  70. package/{types → dist/types}/styled/utils.d.ts +0 -0
  71. package/{types → dist/types}/tests/arithmetic.test.d.ts +0 -0
  72. package/{types → dist/types}/th.d.ts +0 -0
  73. package/{types → dist/types}/theme.d.ts +0 -0
  74. package/{types → dist/types}/themeProviderHOC.d.ts +0 -0
  75. package/{types → dist/types}/utils.d.ts +1 -2
  76. package/package.json +52 -44
  77. package/cjs/arithmetic.js +0 -43
  78. package/cjs/constants.js +0 -19
  79. package/cjs/globalStyles.js +0 -25
  80. package/cjs/index.js +0 -84
  81. package/cjs/mobileUtilities.js +0 -41
  82. package/cjs/spaceUtilities.js +0 -68
  83. package/cjs/styled/index.d.js +0 -2
  84. package/cjs/styled/index.js +0 -124
  85. package/cjs/styled/styleGetters.js +0 -44
  86. package/cjs/styled/types.js +0 -12
  87. package/cjs/styled/utils.js +0 -24
  88. package/cjs/th.js +0 -43
  89. package/cjs/theme.js +0 -9
  90. package/cjs/themeProviderHOC.js +0 -29
  91. package/cjs/utils.js +0 -184
  92. package/esm/constants.js +0 -13
  93. package/esm/globalStyles.js +0 -17
  94. package/esm/index.js +0 -11
  95. package/esm/mobileUtilities.js +0 -34
  96. package/esm/spaceUtilities.js +0 -57
  97. package/esm/styled/index.d.js +0 -1
  98. package/esm/styled/index.js +0 -115
  99. package/esm/styled/styleGetters.js +0 -38
  100. package/esm/styled/types.js +0 -1
  101. package/esm/styled/utils.js +0 -18
  102. package/esm/th.js +0 -39
  103. package/esm/theme.js +0 -5
  104. package/esm/themeProviderHOC.js +0 -20
  105. package/esm/utils.js +0 -136
@@ -1,41 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/web.dom-collections.iterator.js');
6
- var react = require('react');
7
- var theme = require('./theme.js');
8
- var constants = require('./constants.js');
9
-
10
- function __UNSAFE_SPACE_TO_DIMSUM(unit) {
11
- if (constants.translateUnits[unit]) return constants.translateUnits[unit];
12
- return "".concat(parseFloat(unit) * (constants.mobileBaseFont / constants.desktopBaseFont) / 2, "px");
13
- }
14
- function toMobile(unit) {
15
- if (!isMobile()) return unit;
16
- return "".concat(parseFloat(unit) * (constants.desktopBaseFont / constants.mobileBaseFont), "rem");
17
- }
18
- const useIsMobile = () => {
19
- const [mobile, setMobile] = react.useState(isMobile());
20
- react.useEffect(() => {
21
- function handleResize() {
22
- setMobile(isMobile());
23
- }
24
-
25
- if (window) window.addEventListener('resize', handleResize);
26
- return () => {
27
- if (window) window.removeEventListener('resize', handleResize);
28
- };
29
- }, []);
30
- if (!window) return false;
31
- return mobile;
32
- };
33
- const isMobile = () => {
34
- if (!window) return false;
35
- return Number(theme.theme.breakpoints.medium.split('px')[0]) - window.innerWidth >= 0;
36
- };
37
-
38
- exports.__UNSAFE_SPACE_TO_DIMSUM = __UNSAFE_SPACE_TO_DIMSUM;
39
- exports.isMobile = isMobile;
40
- exports.toMobile = toMobile;
41
- exports.useIsMobile = useIsMobile;
@@ -1,68 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
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');
10
- var lodash = require('lodash');
11
- var theme = require('./theme.js');
12
-
13
- function mapGap(gutter) {
14
- if (!gutter) return '0rem';
15
- if (String(gutter).includes('rem') || String(gutter).includes('px')) return gutter;
16
- return "".concat(theme.theme.space[gutter]);
17
- }
18
- function mapGutter(gutter) {
19
- if (!gutter) return '0rem';
20
- return "".concat(theme.theme.space[gutter], " * 2");
21
- }
22
- function mapSpace(width) {
23
- if (typeof width === 'string') return lodash.get(theme.theme, width) ? "".concat(lodash.get(theme.theme, width)) : width;
24
- return "".concat(width * 100, "%");
25
- }
26
- function fixSpaceGutter(width, gutter) {
27
- if (!width) return '';
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), "))");
30
- }
31
- function fixSpace(width) {
32
- if (!width) return '';
33
- if (Array.isArray(width)) return width.map(w => mapSpace(w));
34
- return mapSpace(width);
35
- }
36
- /**
37
- * Grid
38
- *
39
- * @param grid
40
- */
41
-
42
- function numbersToFr(grid) {
43
- const den = grid.map(f => f < 1 ? Math.floor(1 / f) : f);
44
- return den.map(d => "".concat(d, "fr"));
45
- }
46
- function mapGrid(width) {
47
- if (lodash.get(theme.theme, width)) return "".concat(lodash.get(theme.theme, width));
48
- if (typeof width === 'string') return width;
49
- const den = width < 1 ? Math.floor(1 / width) : width;
50
- return "".concat(den, "fr");
51
- }
52
- function mapTemplateGrid(grid) {
53
- if (Array.isArray(grid)) {
54
- if (grid.some(w => typeof w === 'string')) return grid.map(w => mapGrid(w));
55
- return numbersToFr(grid);
56
- }
57
-
58
- return mapGrid(grid);
59
- }
60
-
61
- exports.fixSpace = fixSpace;
62
- exports.fixSpaceGutter = fixSpaceGutter;
63
- exports.mapGap = mapGap;
64
- exports.mapGrid = mapGrid;
65
- exports.mapGutter = mapGutter;
66
- exports.mapSpace = mapSpace;
67
- exports.mapTemplateGrid = mapTemplateGrid;
68
- exports.numbersToFr = numbersToFr;
@@ -1,2 +0,0 @@
1
- 'use strict';
2
-
@@ -1,124 +0,0 @@
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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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 = null,
36
- slot: componentSlot = null
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;
@@ -1,44 +0,0 @@
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;
@@ -1,12 +0,0 @@
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
- });
@@ -1,24 +0,0 @@
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 DELETED
@@ -1,43 +0,0 @@
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 => {
10
- const thGetter = function (value) {
11
- let dfault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
12
-
13
- const func = _ref => {
14
- var _ref2;
15
-
16
- let {
17
- theme
18
- } = _ref;
19
- const parts = value.split('-');
20
- let result = theme[property];
21
- parts.forEach(part => {
22
- // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
23
- if (result) result = result[part];
24
- });
25
- return (_ref2 = result) !== null && _ref2 !== void 0 ? _ref2 : dfault;
26
- };
27
-
28
- return func;
29
- };
30
-
31
- return thGetter;
32
- };
33
- th.space = th('space');
34
- th.fontSize = th('fontSizes');
35
- th.fontWeight = th('fontWeights');
36
- th.lineHeight = th('lineHeights');
37
- th.letterSpacing = th('letterSpacings');
38
- th.font = th('fonts');
39
- th.color = th('colors');
40
- th.breakpoint = th('breakpoints');
41
- th.media = th('media');
42
-
43
- exports.th = th;
package/cjs/theme.js DELETED
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var puiTheme = require('@elliemae/pui-theme');
6
-
7
- const theme = puiTheme.getDefaultTheme();
8
-
9
- exports.theme = theme;
@@ -1,29 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
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');
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');
14
- var theme = require('./theme.js');
15
- var jsxRuntime = require('react/jsx-runtime');
16
-
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
20
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
21
-
22
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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)));
28
-
29
- exports.themeProviderHOC = themeProviderHOC;
package/cjs/utils.js DELETED
@@ -1,184 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var polished = require('polished');
6
- var lodash = require('lodash');
7
- var theme = require('./theme.js');
8
- var mobileUtilities = require('./mobileUtilities.js');
9
- var styled_component = require('styled-components');
10
-
11
- /* eslint-disable no-shadow */
12
- function truncate(width) {
13
- return props => styled_component.css(["", " white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], !!width || props.width ? "width: ".concat(props.width || width, ";") : '');
14
- }
15
- function flexCenter() {
16
- return "\n display: flex;\n justify-content: center;\n align-items: center;\n ";
17
- }
18
- function disabled() {
19
- return "\n cursor: not-allowed;\n pointer-events: none;\n ";
20
- }
21
- function keyframes(obj) {
22
- return styled_component.keyframes(["", ""], lodash.reduce(obj, (result, value, key) => "\n ".concat(result, "\n ").concat(key, "% {\n ").concat(value, "\n }\n "), ''));
23
- } // eslint-disable-next-line max-params
24
-
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, ";");
28
- }
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;
32
- return styled_component.css(["color:", ";"], props => props.theme.colors[variant][type]);
33
- }
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);
39
- }
40
- function animation(animationKeyframes, animationLength, animationTimingFn) {
41
- return props => styled_component.css(["animation:", " ", " ", ";"], props.animationKeyframes || animationKeyframes, props.animationLength || animationLength, props.animationTimingFn || animationTimingFn);
42
- } // 0.0769
43
-
44
- function focus() {
45
- let color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : theme.theme.colors.brand[600];
46
- 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));
47
- }
48
- function focusAfter(color) {
49
- 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));
50
- }
51
- function active() {
52
- return props => styled_component.css(["outline:none;border:1px solid ", ";border-radius:2px;"], props.theme.colors.brand[700]);
53
- }
54
- function hover() {
55
- return props => styled_component.css(["outline:1px solid ", ";outline-offset:-1px;"], props.theme.colors.brand[600]);
56
- }
57
- function textStyle(type) {
58
- let weight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'regular';
59
- // eslint-disable-next-line complexity
60
- return props => {
61
- let cssVar = "font-weight: ".concat(props.theme.fontWeights[weight], ";"); // eslint-disable-next-line default-case
62
-
63
- switch (type) {
64
- case 'h1':
65
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile('2.7692rem'), ";\n line-height: normal;\n ");
66
- break;
67
-
68
- case 'h2':
69
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[800]), ";\n line-height: normal;\n ");
70
- break;
71
-
72
- case 'h3':
73
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[700]), ";\n line-height: 1.2;\n ");
74
- break;
75
-
76
- case 'h4':
77
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[600]), ";\n line-height: normal;\n ");
78
- break;
79
-
80
- case 'h5':
81
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[500]), ";\n line-height: normal;\n ");
82
- break;
83
-
84
- case 'section-header':
85
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.title[500]), ";\n line-height: normal;\n text-transform: uppercase;\n ");
86
- break;
87
-
88
- case 'body':
89
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[400]), ";\n line-height: normal;\n ");
90
- break;
91
-
92
- case 'body-small':
93
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[300]), ";\n line-height: normal;\n ");
94
- break;
95
-
96
- case 'body-micro':
97
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.microText[200]), ";\n line-height: normal;\n ");
98
- break;
99
-
100
- case 'list':
101
- cssVar += "\n font-size: ".concat(mobileUtilities.toMobile(props.theme.fontSizes.value[400]), ";\n line-height: normal;\n ");
102
- break;
103
-
104
- case 'link':
105
- cssVar += "\n line-height: ".concat(props.theme.xl, ";\n color: ").concat(props.theme.colors.brand[600], ";\n cursor: pointer;\n ");
106
- break;
107
- }
108
-
109
- return cssVar;
110
- };
111
- }
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;
115
- return styled_component.css(["fill:", ";"], props => props.theme.colors[variant][type]);
116
- }
117
- function fakeBorder() {
118
- return styled_component.css(["box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.neutral[200]);
119
- }
120
- function fakeActive() {
121
- return styled_component.css(["outline:none;box-shadow:inset 0 0 0 1px ", ";border-radius:2px;"], props => props.theme.colors.brand[700]);
122
- }
123
- function clearFocus() {
124
- return "\n border: none;\n box-shadow: none;\n ";
125
- }
126
- function buttonLink() {
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 ");
132
- }
133
- const onlySafariAndFirefox = styles => styled_component.css(["@media not all and (min-resolution:0.001dpcm){", "}@media screen and (min--moz-device-pixel-ratio:0){", "}"], styles, styles);
134
- const onlySafari = styles => "\n @media not all and (min-resolution: 0.001dpcm) {\n ".concat(styles, "\n }\n ");
135
- const onlyFirefox = styles => "\n @media screen and (min--moz-device-pixel-ratio: 0) {\n ".concat(styles, "\n }\n ");
136
- const safariAndFirefoxBold = color => "\n @media not all and (min-resolution: 0.001dpcm) {\n font-weight: 400;\n -webkit-font-smoothing: subpixel-antialiased;\n -webkit-text-stroke: 0.4px ".concat(color, ";\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n font-weight: 400;\n -webkit-font-smoothing: subpixel-antialiased;\n -webkit-text-stroke: 0.4px ").concat(color, ";\n }\n");
137
-
138
- Object.defineProperty(exports, 'rgba', {
139
- enumerable: true,
140
- get: function () { return polished.rgba; }
141
- });
142
- Object.defineProperty(exports, 'createGlobalStyle', {
143
- enumerable: true,
144
- get: function () { return styled_component.createGlobalStyle; }
145
- });
146
- Object.defineProperty(exports, 'css', {
147
- enumerable: true,
148
- get: function () { return styled_component.css; }
149
- });
150
- Object.defineProperty(exports, 'kfrm', {
151
- enumerable: true,
152
- get: function () { return styled_component.keyframes; }
153
- });
154
- Object.defineProperty(exports, 'useTheme', {
155
- enumerable: true,
156
- get: function () { return styled_component.useTheme; }
157
- });
158
- Object.defineProperty(exports, 'withTheme', {
159
- enumerable: true,
160
- get: function () { return styled_component.withTheme; }
161
- });
162
- exports.active = active;
163
- exports.animation = animation;
164
- exports.border = border;
165
- exports.boxShadow = boxShadow;
166
- exports.buttonLink = buttonLink;
167
- exports.clearFocus = clearFocus;
168
- exports.color = color;
169
- exports.disabled = disabled;
170
- exports.fakeActive = fakeActive;
171
- exports.fakeBorder = fakeBorder;
172
- exports.flexCenter = flexCenter;
173
- exports.focus = focus;
174
- exports.focusAfter = focusAfter;
175
- exports.hover = hover;
176
- exports.iconColor = iconColor;
177
- exports.keyframes = keyframes;
178
- exports.onlyFirefox = onlyFirefox;
179
- exports.onlySafari = onlySafari;
180
- exports.onlySafariAndFirefox = onlySafariAndFirefox;
181
- exports.safariAndFirefoxBold = safariAndFirefoxBold;
182
- exports.textStyle = textStyle;
183
- exports.transition = transition;
184
- exports.truncate = truncate;
package/esm/constants.js DELETED
@@ -1,13 +0,0 @@
1
- const desktopBaseFont = 13;
2
- const mobileBaseFont = 16;
3
- const translateUnits = {
4
- '8px': '4px',
5
- '16px': '8px',
6
- '32px': '16px',
7
- '48px': '24px',
8
- '56px': '32px',
9
- '64px': '48px',
10
- '72px': '64px'
11
- };
12
-
13
- export { desktopBaseFont, mobileBaseFont, translateUnits };
@@ -1,17 +0,0 @@
1
- import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
- import 'polished';
3
- import 'lodash';
4
- import './theme.js';
5
- import 'core-js/modules/web.dom-collections.iterator.js';
6
- import 'react';
7
- import { createGlobalStyle } from 'styled-components';
8
-
9
- var _templateObject;
10
- const GlobalStyles = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n :root, body {\n overscroll-behavior-y: none;\n\n font-size: ", ";\n\n @media(min-width: ", ") {\n font-size: ", ";\n }\n\n }\n"])), props => props.device === 'desktop' ? '13px' : '16px', _ref => {
11
- let {
12
- theme
13
- } = _ref;
14
- return theme.breakpoints.small;
15
- }, props => props.device === 'mobile' ? '16px' : '13px');
16
-
17
- export { GlobalStyles };
package/esm/index.js DELETED
@@ -1,11 +0,0 @@
1
- export { GlobalStyles } from './globalStyles.js';
2
- export { fixSpace, fixSpaceGutter, mapGap, mapGrid, mapGutter, mapSpace, mapTemplateGrid, numbersToFr } from './spaceUtilities.js';
3
- export { __UNSAFE_SPACE_TO_DIMSUM, isMobile, toMobile, useIsMobile } from './mobileUtilities.js';
4
- export { active, animation, border, boxShadow, buttonLink, clearFocus, color, disabled, fakeActive, fakeBorder, flexCenter, focus, focusAfter, hover, iconColor, keyframes, onlyFirefox, onlySafari, onlySafariAndFirefox, safariAndFirefoxBold, textStyle, transition, truncate } from './utils.js';
5
- export { getNumberAndUnit, op } from './arithmetic.js';
6
- export { th } from './th.js';
7
- export { theme } from './theme.js';
8
- export { styled } from './styled/index.js';
9
- export { themeProviderHOC } from './themeProviderHOC.js';
10
- export { createGlobalStyle, css, keyframes as kfrm, useTheme, withTheme } from 'styled-components';
11
- export { rgba } from 'polished';