@elliemae/ds-system 2.3.0-alpha.8 → 2.3.0-next.2

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/cjs/arithmetic.js +43 -0
  2. package/cjs/constants.js +19 -0
  3. package/cjs/globalStyles.js +25 -0
  4. package/cjs/index.js +84 -0
  5. package/cjs/mobileUtilities.js +41 -0
  6. package/cjs/spaceUtilities.js +68 -0
  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 +43 -0
  13. package/cjs/theme.js +9 -0
  14. package/cjs/themeProviderHOC.js +29 -0
  15. package/cjs/utils.js +184 -0
  16. package/{dist/esm → esm}/arithmetic.js +25 -13
  17. package/esm/constants.js +13 -0
  18. package/esm/globalStyles.js +17 -0
  19. package/esm/index.js +11 -0
  20. package/esm/mobileUtilities.js +34 -0
  21. package/esm/spaceUtilities.js +57 -0
  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 +39 -0
  28. package/esm/theme.js +5 -0
  29. package/esm/themeProviderHOC.js +20 -0
  30. package/esm/utils.js +136 -0
  31. package/package.json +45 -47
  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 +27 -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 +17 -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/dist/cjs/arithmetic.js +0 -55
  48. package/dist/cjs/arithmetic.js.map +0 -7
  49. package/dist/cjs/constants.js +0 -47
  50. package/dist/cjs/constants.js.map +0 -7
  51. package/dist/cjs/globalStyles.js +0 -47
  52. package/dist/cjs/globalStyles.js.map +0 -7
  53. package/dist/cjs/index.js +0 -43
  54. package/dist/cjs/index.js.map +0 -7
  55. package/dist/cjs/mobileUtilities.js +0 -72
  56. package/dist/cjs/mobileUtilities.js.map +0 -7
  57. package/dist/cjs/spaceUtilities.js +0 -94
  58. package/dist/cjs/spaceUtilities.js.map +0 -7
  59. package/dist/cjs/styled/index.d.js +0 -27
  60. package/dist/cjs/styled/index.d.js.map +0 -7
  61. package/dist/cjs/styled/index.js +0 -89
  62. package/dist/cjs/styled/index.js.map +0 -7
  63. package/dist/cjs/styled/styleGetters.js +0 -56
  64. package/dist/cjs/styled/styleGetters.js.map +0 -7
  65. package/dist/cjs/styled/types.js +0 -35
  66. package/dist/cjs/styled/types.js.map +0 -7
  67. package/dist/cjs/styled/utils.js +0 -47
  68. package/dist/cjs/styled/utils.js.map +0 -7
  69. package/dist/cjs/th.js +0 -58
  70. package/dist/cjs/th.js.map +0 -7
  71. package/dist/cjs/theme.js +0 -36
  72. package/dist/cjs/theme.js.map +0 -7
  73. package/dist/cjs/themeProviderHOC.js +0 -42
  74. package/dist/cjs/themeProviderHOC.js.map +0 -7
  75. package/dist/cjs/utils.js +0 -294
  76. package/dist/cjs/utils.js.map +0 -7
  77. package/dist/esm/arithmetic.js.map +0 -7
  78. package/dist/esm/constants.js +0 -18
  79. package/dist/esm/constants.js.map +0 -7
  80. package/dist/esm/globalStyles.js +0 -18
  81. package/dist/esm/globalStyles.js.map +0 -7
  82. package/dist/esm/index.js +0 -14
  83. package/dist/esm/index.js.map +0 -7
  84. package/dist/esm/mobileUtilities.js +0 -43
  85. package/dist/esm/mobileUtilities.js.map +0 -7
  86. package/dist/esm/spaceUtilities.js +0 -65
  87. package/dist/esm/spaceUtilities.js.map +0 -7
  88. package/dist/esm/styled/index.d.js +0 -2
  89. package/dist/esm/styled/index.d.js.map +0 -7
  90. package/dist/esm/styled/index.js +0 -60
  91. package/dist/esm/styled/index.js.map +0 -7
  92. package/dist/esm/styled/styleGetters.js +0 -27
  93. package/dist/esm/styled/styleGetters.js.map +0 -7
  94. package/dist/esm/styled/types.js +0 -6
  95. package/dist/esm/styled/types.js.map +0 -7
  96. package/dist/esm/styled/utils.js +0 -18
  97. package/dist/esm/styled/utils.js.map +0 -7
  98. package/dist/esm/th.js +0 -29
  99. package/dist/esm/th.js.map +0 -7
  100. package/dist/esm/theme.js +0 -7
  101. package/dist/esm/theme.js.map +0 -7
  102. package/dist/esm/themeProviderHOC.js +0 -13
  103. package/dist/esm/themeProviderHOC.js.map +0 -7
  104. package/dist/esm/utils.js +0 -265
  105. package/dist/esm/utils.js.map +0 -7
package/dist/cjs/theme.js DELETED
@@ -1,36 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __reExport = (target, module2, copyDefault, desc) => {
13
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
- for (let key of __getOwnPropNames(module2))
15
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
- }
18
- return target;
19
- };
20
- var __toESM = (module2, isNodeMode) => {
21
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
- };
23
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
- return (module2, temp) => {
25
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
- };
27
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
- var theme_exports = {};
29
- __export(theme_exports, {
30
- theme: () => theme
31
- });
32
- var React = __toESM(require("react"));
33
- var import_pui_theme = require("@elliemae/pui-theme");
34
- const theme = (0, import_pui_theme.getDefaultTheme)();
35
- module.exports = __toCommonJS(theme_exports);
36
- //# sourceMappingURL=theme.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/theme.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { getDefaultTheme } from '@elliemae/pui-theme';\nimport type { Theme } from '@elliemae/pui-theme';\n\nexport const theme = getDefaultTheme() as Theme;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgC;AAGzB,MAAM,QAAQ;",
6
- "names": []
7
- }
@@ -1,42 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __reExport = (target, module2, copyDefault, desc) => {
13
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
- for (let key of __getOwnPropNames(module2))
15
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
- }
18
- return target;
19
- };
20
- var __toESM = (module2, isNodeMode) => {
21
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
- };
23
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
- return (module2, temp) => {
25
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
- };
27
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
- var themeProviderHOC_exports = {};
29
- __export(themeProviderHOC_exports, {
30
- themeProviderHOC: () => themeProviderHOC
31
- });
32
- var React = __toESM(require("react"));
33
- var import_react = __toESM(require("react"));
34
- var import_styled_components = require("styled-components");
35
- var import_theme = require("./theme");
36
- const themeProviderHOC = (Component) => (props) => /* @__PURE__ */ import_react.default.createElement(import_styled_components.ThemeProvider, {
37
- theme: import_theme.theme
38
- }, /* @__PURE__ */ import_react.default.createElement(Component, {
39
- ...props
40
- }));
41
- module.exports = __toCommonJS(themeProviderHOC_exports);
42
- //# sourceMappingURL=themeProviderHOC.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/themeProviderHOC.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React from 'react';\nimport { ThemeProvider } from 'styled-components';\nimport { theme } from './theme';\n\nexport const themeProviderHOC = (Component: React.ElementType) => (\n props: Record<string, unknown>,\n): JSX.Element => (\n <ThemeProvider theme={theme}>\n <Component {...props} />\n </ThemeProvider>\n);\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAA8B;AAC9B,mBAAsB;AAEf,MAAM,mBAAmB,CAAC,cAAiC,CAChE,UAEA,mDAAC,wCAAD;AAAA,EAAe,OAAO;AAAA,GACpB,mDAAC,WAAD;AAAA,KAAe;AAAA;",
6
- "names": []
7
- }
package/dist/cjs/utils.js DELETED
@@ -1,294 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __reExport = (target, module2, copyDefault, desc) => {
13
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
- for (let key of __getOwnPropNames(module2))
15
- if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
- }
18
- return target;
19
- };
20
- var __toESM = (module2, isNodeMode) => {
21
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
- };
23
- var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
- return (module2, temp) => {
25
- return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
- };
27
- })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
- var utils_exports = {};
29
- __export(utils_exports, {
30
- active: () => active,
31
- animation: () => animation,
32
- border: () => border,
33
- boxShadow: () => boxShadow,
34
- buttonLink: () => buttonLink,
35
- clearFocus: () => clearFocus,
36
- color: () => color,
37
- createGlobalStyle: () => import_styled_components.createGlobalStyle,
38
- css: () => import_styled_components.css,
39
- disabled: () => disabled,
40
- fakeActive: () => fakeActive,
41
- fakeBorder: () => fakeBorder,
42
- flexCenter: () => flexCenter,
43
- focus: () => focus,
44
- focusAfter: () => focusAfter,
45
- hover: () => hover,
46
- iconColor: () => iconColor,
47
- keyframes: () => keyframes,
48
- kfrm: () => import_styled_components.keyframes,
49
- onlyFirefox: () => onlyFirefox,
50
- onlySafari: () => onlySafari,
51
- onlySafariAndFirefox: () => onlySafariAndFirefox,
52
- rgba: () => import_polished.rgba,
53
- safariAndFirefoxBold: () => safariAndFirefoxBold,
54
- textStyle: () => textStyle,
55
- transition: () => transition,
56
- truncate: () => truncate,
57
- useTheme: () => import_styled_components.useTheme,
58
- withTheme: () => import_styled_components.withTheme
59
- });
60
- var React = __toESM(require("react"));
61
- var import_polished = require("polished");
62
- var import_lodash = require("lodash");
63
- var import_styled_components = require("styled-components");
64
- var import_theme = require("./theme");
65
- var import_mobileUtilities = require("./mobileUtilities");
66
- function truncate(width) {
67
- return (props) => import_styled_components.css`
68
- ${!!width || props.width ? `width: ${props.width || width};` : ""}
69
- white-space: nowrap;
70
- overflow: hidden;
71
- text-overflow: ellipsis;
72
- `;
73
- }
74
- function flexCenter() {
75
- return `
76
- display: flex;
77
- justify-content: center;
78
- align-items: center;
79
- `;
80
- }
81
- function disabled() {
82
- return `
83
- cursor: not-allowed;
84
- pointer-events: none;
85
- `;
86
- }
87
- function keyframes(obj) {
88
- return import_styled_components.keyframes`${(0, import_lodash.reduce)(obj, (result, value, key) => `
89
- ${result}
90
- ${key}% {
91
- ${value}
92
- }
93
- `, "")}
94
- `;
95
- }
96
- function boxShadow(top, left, blur, color2, inset = false) {
97
- return `box-shadow: ${inset ? "inset" : ""} ${top} ${left} ${blur} ${color2};`;
98
- }
99
- function color(variant = "neutral", type = 400) {
100
- return import_styled_components.css`
101
- color: ${(props) => props.theme.colors[variant][type]};
102
- `;
103
- }
104
- function border(color2 = import_theme.theme.colors.brand[600], size = "1px", type = "solid") {
105
- return `${size} ${type} ${color2}`;
106
- }
107
- function animation(animationKeyframes, animationLength, animationTimingFn) {
108
- return (props) => import_styled_components.css`
109
- animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}
110
- ${props.animationTimingFn || animationTimingFn};
111
- `;
112
- }
113
- function focus(color2 = import_theme.theme.colors.brand[600]) {
114
- return () => import_styled_components.css`
115
- outline: none;
116
- border: 1px solid ${color2};
117
- box-shadow: inset 0 0 0 1px ${(0, import_polished.lighten)(0.3, color2)};
118
- border-radius: 2px;
119
- `;
120
- }
121
- function focusAfter(color2) {
122
- return import_styled_components.css`
123
- outline: none;
124
- position: relative;
125
- &:after {
126
- content: '';
127
- z-index: 10;
128
- position: absolute;
129
- top: 0;
130
- left: 0;
131
- width: 100%;
132
- height: 100%;
133
- pointer-events: none;
134
- ${focus(color2)}
135
- }
136
- `;
137
- }
138
- function active() {
139
- return (props) => import_styled_components.css`
140
- outline: none;
141
- border: 1px solid ${props.theme.colors.brand[700]};
142
- border-radius: 2px;
143
- `;
144
- }
145
- function hover() {
146
- return (props) => import_styled_components.css`
147
- outline: 1px solid ${props.theme.colors.brand[600]};
148
- outline-offset: -1px;
149
- `;
150
- }
151
- function textStyle(type, weight = "regular") {
152
- return (props) => {
153
- let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`;
154
- switch (type) {
155
- case "h1":
156
- cssVar += `
157
- font-size: ${(0, import_mobileUtilities.toMobile)("2.7692rem")};
158
- line-height: normal;
159
- `;
160
- break;
161
- case "h2":
162
- cssVar += `
163
- font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[800])};
164
- line-height: normal;
165
- `;
166
- break;
167
- case "h3":
168
- cssVar += `
169
- font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[700])};
170
- line-height: 1.2;
171
- `;
172
- break;
173
- case "h4":
174
- cssVar += `
175
- font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[600])};
176
- line-height: normal;
177
- `;
178
- break;
179
- case "h5":
180
- cssVar += `
181
- font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[500])};
182
- line-height: normal;
183
- `;
184
- break;
185
- case "section-header":
186
- cssVar += `
187
- font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.title[500])};
188
- line-height: normal;
189
- text-transform: uppercase;
190
- `;
191
- break;
192
- case "body":
193
- cssVar += `
194
- font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.value[400])};
195
- line-height: normal;
196
- `;
197
- break;
198
- case "body-small":
199
- cssVar += `
200
- font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.value[300])};
201
- line-height: normal;
202
- `;
203
- break;
204
- case "body-micro":
205
- cssVar += `
206
- font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.microText[200])};
207
- line-height: normal;
208
- `;
209
- break;
210
- case "list":
211
- cssVar += `
212
- font-size: ${(0, import_mobileUtilities.toMobile)(props.theme.fontSizes.value[400])};
213
- line-height: normal;
214
- `;
215
- break;
216
- case "link":
217
- cssVar += `
218
- line-height: ${props.theme.xl};
219
- color: ${props.theme.colors.brand[600]};
220
- cursor: pointer;
221
- `;
222
- break;
223
- }
224
- return cssVar;
225
- };
226
- }
227
- function iconColor(variant = "neutral", type = 400) {
228
- return import_styled_components.css`
229
- fill: ${(props) => props.theme.colors[variant][type]};
230
- `;
231
- }
232
- function fakeBorder() {
233
- return import_styled_components.css`
234
- box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};
235
- border-radius: 2px;
236
- `;
237
- }
238
- function fakeActive() {
239
- return import_styled_components.css`
240
- outline: none;
241
- box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};
242
- border-radius: 2px;
243
- `;
244
- }
245
- function clearFocus() {
246
- return `
247
- border: none;
248
- box-shadow: none;
249
- `;
250
- }
251
- function buttonLink() {
252
- return `
253
- background-color: transparent;
254
- border: 1px solid transparent;
255
- cursor: pointer;
256
- `;
257
- }
258
- function transition(t = "all 1s ease") {
259
- return `
260
- transition: ${t};
261
- `;
262
- }
263
- const onlySafariAndFirefox = (styles) => import_styled_components.css`
264
- @media not all and (min-resolution: 0.001dpcm) {
265
- ${styles}
266
- }
267
- @media screen and (min--moz-device-pixel-ratio: 0) {
268
- ${styles}
269
- }
270
- `;
271
- const onlySafari = (styles) => `
272
- @media not all and (min-resolution: 0.001dpcm) {
273
- ${styles}
274
- }
275
- `;
276
- const onlyFirefox = (styles) => `
277
- @media screen and (min--moz-device-pixel-ratio: 0) {
278
- ${styles}
279
- }
280
- `;
281
- const safariAndFirefoxBold = (color2) => `
282
- @media not all and (min-resolution: 0.001dpcm) {
283
- font-weight: 400;
284
- -webkit-font-smoothing: subpixel-antialiased;
285
- -webkit-text-stroke: 0.4px ${color2};
286
- }
287
- @media screen and (min--moz-device-pixel-ratio: 0) {
288
- font-weight: 400;
289
- -webkit-font-smoothing: subpixel-antialiased;
290
- -webkit-text-stroke: 0.4px ${color2};
291
- }
292
- `;
293
- module.exports = __toCommonJS(utils_exports);
294
- //# sourceMappingURL=utils.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../src/utils.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable no-shadow */\n/* eslint-disable max-lines */\n// https://github.com/styled-components/babel-plugin-styled-components/issues/216#issuecomment-516941240\nimport { lighten, rgba } from 'polished';\nimport { reduce } from 'lodash';\nimport { Keyframes, css, withTheme, keyframes as kfrm, createGlobalStyle, useTheme } from 'styled-components';\nimport { theme } from './theme';\nimport { toMobile } from './mobileUtilities';\n\nexport { withTheme, createGlobalStyle, rgba, useTheme, kfrm, css };\n\nexport function truncate(width?: string) {\n return (props) => css`\n ${!!width || props.width ? `width: ${props.width || width};` : ''}\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n `;\n}\n\nexport function flexCenter(): string {\n return `\n display: flex;\n justify-content: center;\n align-items: center;\n `;\n}\n\nexport function disabled(): string {\n return `\n cursor: not-allowed;\n pointer-events: none;\n `;\n}\n\nexport function keyframes(obj: Record<string, unknown>): Keyframes {\n return kfrm`${reduce(\n obj,\n (result, value, key) => `\n ${result}\n ${key}% {\n ${value}\n }\n `,\n '',\n )}\n `;\n}\n\n// eslint-disable-next-line max-params\nexport function boxShadow(top: string, left: string, blur: string, color: string, inset = false): string {\n return `box-shadow: ${inset ? 'inset' : ''} ${top} ${left} ${blur} ${color};`;\n}\n\nexport function color(variant = 'neutral', type = 400) {\n return css`\n color: ${(props) => props.theme.colors[variant][type]};\n `;\n}\n\nexport function border(color = theme.colors.brand[600], size = '1px', type = 'solid'): string {\n return `${size} ${type} ${color}`;\n}\n\nexport function animation(animationKeyframes: string, animationLength: string, animationTimingFn: string) {\n return (props) => css`\n animation: ${props.animationKeyframes || animationKeyframes} ${props.animationLength || animationLength}\n ${props.animationTimingFn || animationTimingFn};\n `;\n}\n// 0.0769\nexport function focus(color: string = theme.colors.brand[600]) {\n return () => css`\n outline: none;\n border: 1px solid ${color};\n box-shadow: inset 0 0 0 1px ${lighten(0.3, color)};\n border-radius: 2px;\n `;\n}\n\nexport function focusAfter(color: string) {\n return css`\n outline: none;\n position: relative;\n &:after {\n content: '';\n z-index: 10;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n ${focus(color)}\n }\n `;\n}\n\nexport function active() {\n return (props) => css`\n outline: none;\n border: 1px solid ${props.theme.colors.brand[700]};\n border-radius: 2px;\n `;\n}\n\nexport function hover() {\n return (props) => css`\n outline: 1px solid ${props.theme.colors.brand[600]};\n outline-offset: -1px;\n `;\n}\n\nexport function textStyle(type: string, weight = 'regular') {\n // eslint-disable-next-line complexity\n return (props): string => {\n let cssVar = `font-weight: ${props.theme.fontWeights[weight]};`;\n // eslint-disable-next-line default-case\n switch (type) {\n case 'h1':\n cssVar += `\n font-size: ${toMobile('2.7692rem')};\n line-height: normal;\n `;\n break;\n case 'h2':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[800])};\n line-height: normal;\n `;\n break;\n case 'h3':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[700])};\n line-height: 1.2;\n `;\n break;\n case 'h4':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[600])};\n line-height: normal;\n `;\n break;\n case 'h5':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[500])};\n line-height: normal;\n `;\n break;\n case 'section-header':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.title[500])};\n line-height: normal;\n text-transform: uppercase;\n `;\n break;\n case 'body':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[400])};\n line-height: normal;\n `;\n break;\n case 'body-small':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[300])};\n line-height: normal;\n `;\n break;\n case 'body-micro':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.microText[200])};\n line-height: normal;\n `;\n break;\n case 'list':\n cssVar += `\n font-size: ${toMobile(props.theme.fontSizes.value[400])};\n line-height: normal;\n `;\n break;\n case 'link':\n cssVar += `\n line-height: ${props.theme.xl};\n color: ${props.theme.colors.brand[600]};\n cursor: pointer;\n `;\n break;\n }\n return cssVar;\n };\n}\n\nexport function iconColor(variant = 'neutral', type = 400) {\n return css`\n fill: ${(props) => props.theme.colors[variant][type]};\n `;\n}\n\nexport function fakeBorder() {\n return css`\n box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.neutral[200]};\n border-radius: 2px;\n `;\n}\n\nexport function fakeActive() {\n return css`\n outline: none;\n box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]};\n border-radius: 2px;\n `;\n}\n\nexport function clearFocus(): string {\n return `\n border: none;\n box-shadow: none;\n `;\n}\n\nexport function buttonLink(): string {\n return `\n background-color: transparent;\n border: 1px solid transparent;\n cursor: pointer;\n `;\n}\n\nexport function transition(t = 'all 1s ease'): string {\n return `\n transition: ${t};\n `;\n}\n\nexport const onlySafariAndFirefox = (styles: string): string => css`\n @media not all and (min-resolution: 0.001dpcm) {\n ${styles}\n }\n @media screen and (min--moz-device-pixel-ratio: 0) {\n ${styles}\n }\n`;\n\nexport const onlySafari = (styles: string): string => `\n @media not all and (min-resolution: 0.001dpcm) {\n ${styles}\n }\n `;\n\nexport const onlyFirefox = (styles: string): string => `\n @media screen and (min--moz-device-pixel-ratio: 0) {\n ${styles}\n }\n `;\n\nexport const safariAndFirefoxBold = (color: string): string => `\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 ${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 ${color};\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "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",
6
- "names": []
7
- }
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/arithmetic.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export function getNumberAndUnit(\n numberStrWithUnit: string | number,\n): { number: string; unit: string } {\n const [number, unit] = String(numberStrWithUnit).match(\n /[a-z]+|[(/^\\-?\\d*.\\d+|\\d+),?]+/gi,\n );\n return { number, unit };\n}\n\nexport function op(operator: string, n1: string, n2: string | number): string {\n const { number, unit } = getNumberAndUnit(n1);\n const { number: number2, unit: unit2 } = getNumberAndUnit(n2);\n switch (operator) {\n case '*':\n return Number(number) * Number(number2) + (unit || unit2);\n case '+':\n return Number(number) + Number(number2) + (unit || unit2);\n case '-':\n return Number(number) - Number(number2) + (unit || unit2);\n case '/':\n return Number(number) / Number(number2) + (unit || unit2);\n default:\n return Number(number) + Number(number2) + (unit || unit2);\n }\n}\n"],
5
- "mappings": "AAAA;ACAO,0BACL,mBACkC;AAClC,QAAM,CAAC,QAAQ,QAAQ,OAAO,mBAAmB,MAC/C;AAEF,SAAO,EAAE,QAAQ;AAAA;AAGZ,YAAY,UAAkB,IAAY,IAA6B;AAC5E,QAAM,EAAE,QAAQ,SAAS,iBAAiB;AAC1C,QAAM,EAAE,QAAQ,SAAS,MAAM,UAAU,iBAAiB;AAC1D,UAAQ;AAAA,SACD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA,SAChD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA,SAChD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA,SAChD;AACH,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA;AAEnD,aAAO,OAAO,UAAU,OAAO,WAAY,SAAQ;AAAA;AAAA;",
6
- "names": []
7
- }
@@ -1,18 +0,0 @@
1
- import * as React from "react";
2
- const desktopBaseFont = 13;
3
- const mobileBaseFont = 16;
4
- const translateUnits = {
5
- "8px": "4px",
6
- "16px": "8px",
7
- "32px": "16px",
8
- "48px": "24px",
9
- "56px": "32px",
10
- "64px": "48px",
11
- "72px": "64px"
12
- };
13
- export {
14
- desktopBaseFont,
15
- mobileBaseFont,
16
- translateUnits
17
- };
18
- //# sourceMappingURL=constants.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/constants.ts"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const desktopBaseFont = 13;\n\nexport const mobileBaseFont = 16;\n\nexport const translateUnits = {\n '8px': '4px',\n '16px': '8px',\n '32px': '16px',\n '48px': '24px',\n '56px': '32px',\n '64px': '48px',\n '72px': '64px',\n};\n"],
5
- "mappings": "AAAA;ACAO,MAAM,kBAAkB;AAExB,MAAM,iBAAiB;AAEvB,MAAM,iBAAiB;AAAA,EAC5B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA;",
6
- "names": []
7
- }
@@ -1,18 +0,0 @@
1
- import * as React from "react";
2
- import { createGlobalStyle } from "./utils";
3
- const GlobalStyles = createGlobalStyle`
4
- :root, body {
5
- overscroll-behavior-y: none;
6
-
7
- font-size: ${(props) => props.device === "desktop" ? "13px" : "16px"};
8
-
9
- @media(min-width: ${({ theme }) => theme.breakpoints.small}) {
10
- font-size: ${(props) => props.device === "mobile" ? "16px" : "13px"};
11
- }
12
-
13
- }
14
- `;
15
- export {
16
- GlobalStyles
17
- };
18
- //# sourceMappingURL=globalStyles.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/globalStyles.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createGlobalStyle } from './utils';\n\nexport const GlobalStyles = createGlobalStyle`\n :root, body {\n overscroll-behavior-y: none;\n\n font-size: ${(props) => (props.device === 'desktop' ? '13px' : '16px')};\n\n @media(min-width: ${({ theme }) => theme.breakpoints.small}) {\n font-size: ${(props) => (props.device === 'mobile' ? '16px' : '13px')};\n }\n\n }\n`;\n"],
5
- "mappings": "AAAA;ACAA;AAEO,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA,iBAIX,CAAC,UAAW,MAAM,WAAW,YAAY,SAAS;AAAA;AAAA,wBAE3C,CAAC,EAAE,YAAY,MAAM,YAAY;AAAA,mBACtC,CAAC,UAAW,MAAM,WAAW,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
7
- }
package/dist/esm/index.js DELETED
@@ -1,14 +0,0 @@
1
- import * as React from "react";
2
- export * from "./globalStyles";
3
- export * from "./spaceUtilities";
4
- export * from "./mobileUtilities";
5
- export * from "./utils";
6
- export * from "./arithmetic";
7
- export * from "./th";
8
- export * from "./theme";
9
- export * from "./styled";
10
- import { themeProviderHOC } from "./themeProviderHOC";
11
- export {
12
- themeProviderHOC
13
- };
14
- //# sourceMappingURL=index.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './globalStyles';\nexport * from './spaceUtilities';\nexport * from './mobileUtilities';\nexport * from './utils';\nexport * from './arithmetic';\nexport * from './th';\nexport * from './theme';\nexport * from './styled';\nexport { themeProviderHOC } from './themeProviderHOC';\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
6
- "names": []
7
- }
@@ -1,43 +0,0 @@
1
- import * as React from "react";
2
- import { useState, useEffect } from "react";
3
- import { theme } from "./theme";
4
- import { desktopBaseFont, mobileBaseFont, translateUnits } from "./constants";
5
- function __UNSAFE_SPACE_TO_DIMSUM(unit) {
6
- if (translateUnits[unit])
7
- return translateUnits[unit];
8
- return `${parseFloat(unit) * (mobileBaseFont / desktopBaseFont) / 2}px`;
9
- }
10
- function toMobile(unit) {
11
- if (!isMobile())
12
- return unit;
13
- return `${parseFloat(unit) * (desktopBaseFont / mobileBaseFont)}rem`;
14
- }
15
- const useIsMobile = () => {
16
- const [mobile, setMobile] = useState(isMobile());
17
- useEffect(() => {
18
- function handleResize() {
19
- setMobile(isMobile());
20
- }
21
- if (window)
22
- window.addEventListener("resize", handleResize);
23
- return () => {
24
- if (window)
25
- window.removeEventListener("resize", handleResize);
26
- };
27
- }, []);
28
- if (!window)
29
- return false;
30
- return mobile;
31
- };
32
- const isMobile = () => {
33
- if (!window)
34
- return false;
35
- return Number(theme.breakpoints.medium.split("px")[0]) - window.innerWidth >= 0;
36
- };
37
- export {
38
- __UNSAFE_SPACE_TO_DIMSUM,
39
- isMobile,
40
- toMobile,
41
- useIsMobile
42
- };
43
- //# sourceMappingURL=mobileUtilities.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/mobileUtilities.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useEffect } from 'react';\nimport { theme } from './theme';\nimport { desktopBaseFont, mobileBaseFont, translateUnits } from './constants';\n\n// eslint-disable-next-line no-underscore-dangle\nexport function __UNSAFE_SPACE_TO_DIMSUM(unit: string): string {\n if (translateUnits[unit]) return translateUnits[unit];\n return `${(parseFloat(unit) * (mobileBaseFont / desktopBaseFont)) / 2}px`;\n}\n\nexport function toMobile(unit: string): string {\n if (!isMobile()) return unit;\n return `${parseFloat(unit) * (desktopBaseFont / mobileBaseFont)}rem`;\n}\n\nexport const useIsMobile = (): boolean => {\n const [mobile, setMobile] = useState<boolean>(isMobile());\n useEffect(() => {\n function handleResize() {\n setMobile(isMobile());\n }\n if (window) window.addEventListener('resize', handleResize);\n return () => {\n if (window) window.removeEventListener('resize', handleResize);\n };\n }, []);\n if (!window) return false;\n return mobile;\n};\n\nexport const isMobile = (): boolean => {\n if (!window) return false;\n return (\n Number(theme.breakpoints.medium.split('px')[0]) - window.innerWidth >= 0\n );\n};\n"],
5
- "mappings": "AAAA;ACAA;AACA;AACA;AAGO,kCAAkC,MAAsB;AAC7D,MAAI,eAAe;AAAO,WAAO,eAAe;AAChD,SAAO,GAAI,WAAW,QAAS,kBAAiB,mBAAoB;AAAA;AAG/D,kBAAkB,MAAsB;AAC7C,MAAI,CAAC;AAAY,WAAO;AACxB,SAAO,GAAG,WAAW,QAAS,mBAAkB;AAAA;AAG3C,MAAM,cAAc,MAAe;AACxC,QAAM,CAAC,QAAQ,aAAa,SAAkB;AAC9C,YAAU,MAAM;AACd,4BAAwB;AACtB,gBAAU;AAAA;AAEZ,QAAI;AAAQ,aAAO,iBAAiB,UAAU;AAC9C,WAAO,MAAM;AACX,UAAI;AAAQ,eAAO,oBAAoB,UAAU;AAAA;AAAA,KAElD;AACH,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO;AAAA;AAGF,MAAM,WAAW,MAAe;AACrC,MAAI,CAAC;AAAQ,WAAO;AACpB,SACE,OAAO,MAAM,YAAY,OAAO,MAAM,MAAM,MAAM,OAAO,cAAc;AAAA;",
6
- "names": []
7
- }
@@ -1,65 +0,0 @@
1
- import * as React from "react";
2
- import { get } from "lodash";
3
- import { theme } from "./theme";
4
- function mapGap(gutter) {
5
- if (!gutter)
6
- return "0rem";
7
- if (String(gutter).includes("rem") || String(gutter).includes("px"))
8
- return gutter;
9
- return `${theme.space[gutter]}`;
10
- }
11
- function mapGutter(gutter) {
12
- if (!gutter)
13
- return "0rem";
14
- return `${theme.space[gutter]} * 2`;
15
- }
16
- function mapSpace(width) {
17
- if (typeof width === "string")
18
- return get(theme, width) ? `${get(theme, width)}` : width;
19
- return `${width * 100}%`;
20
- }
21
- function fixSpaceGutter(width, gutter) {
22
- if (!width)
23
- return "";
24
- if (Array.isArray(width))
25
- return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);
26
- return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;
27
- }
28
- function fixSpace(width) {
29
- if (!width)
30
- return "";
31
- if (Array.isArray(width))
32
- return width.map((w) => mapSpace(w));
33
- return mapSpace(width);
34
- }
35
- function numbersToFr(grid) {
36
- const den = grid.map((f) => f < 1 ? Math.floor(1 / f) : f);
37
- return den.map((d) => `${d}fr`);
38
- }
39
- function mapGrid(width) {
40
- if (get(theme, width))
41
- return `${get(theme, width)}`;
42
- if (typeof width === "string")
43
- return width;
44
- const den = width < 1 ? Math.floor(1 / width) : width;
45
- return `${den}fr`;
46
- }
47
- function mapTemplateGrid(grid) {
48
- if (Array.isArray(grid)) {
49
- if (grid.some((w) => typeof w === "string"))
50
- return grid.map((w) => mapGrid(w));
51
- return numbersToFr(grid);
52
- }
53
- return mapGrid(grid);
54
- }
55
- export {
56
- fixSpace,
57
- fixSpaceGutter,
58
- mapGap,
59
- mapGrid,
60
- mapGutter,
61
- mapSpace,
62
- mapTemplateGrid,
63
- numbersToFr
64
- };
65
- //# sourceMappingURL=spaceUtilities.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/spaceUtilities.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { get } from 'lodash';\nimport { theme } from './theme';\n\nexport function mapGap(gutter: number | string): number | string {\n if (!gutter) return '0rem';\n if (String(gutter).includes('rem') || String(gutter).includes('px'))\n return gutter;\n return `${theme.space[gutter]}`;\n}\n\nexport function mapGutter(gutter: string | number): string {\n if (!gutter) return '0rem';\n return `${theme.space[gutter]} * 2`;\n}\n\nexport function mapSpace(width: string | number): string {\n if (typeof width === 'string')\n return get(theme, width) ? `${get(theme, width)}` : width;\n return `${width * 100}%`;\n}\n\nexport function fixSpaceGutter(\n width: string | number,\n gutter: string | number,\n): string | string[] {\n if (!width) return '';\n if (Array.isArray(width))\n return width.map((w) => `calc(${mapSpace(w)} - (${mapGutter(gutter)}))`);\n return `calc(${mapSpace(width)} - (${mapGutter(gutter)}))`;\n}\n\nexport function fixSpace(width: string | number): string | string[] {\n if (!width) return '';\n if (Array.isArray(width)) return width.map((w) => mapSpace(w));\n return mapSpace(width);\n}\n\n/**\n * Grid\n *\n * @param grid\n */\nexport function numbersToFr(grid: number[]): string[] {\n const den = grid.map((f) => (f < 1 ? Math.floor(1 / f) : f));\n return den.map((d) => `${d}fr`);\n}\nexport function mapGrid(width: string | number): string {\n if (get(theme, width)) return `${get(theme, width)}`;\n if (typeof width === 'string') return width;\n const den = width < 1 ? Math.floor(1 / width) : width;\n return `${den}fr`;\n}\n\nexport function mapTemplateGrid(grid: number[]): string | string[] {\n if (Array.isArray(grid)) {\n if (grid.some((w) => typeof w === 'string'))\n return grid.map((w) => mapGrid(w));\n return numbersToFr(grid);\n }\n return mapGrid(grid);\n}\n"],
5
- "mappings": "AAAA;ACAA;AACA;AAEO,gBAAgB,QAA0C;AAC/D,MAAI,CAAC;AAAQ,WAAO;AACpB,MAAI,OAAO,QAAQ,SAAS,UAAU,OAAO,QAAQ,SAAS;AAC5D,WAAO;AACT,SAAO,GAAG,MAAM,MAAM;AAAA;AAGjB,mBAAmB,QAAiC;AACzD,MAAI,CAAC;AAAQ,WAAO;AACpB,SAAO,GAAG,MAAM,MAAM;AAAA;AAGjB,kBAAkB,OAAgC;AACvD,MAAI,OAAO,UAAU;AACnB,WAAO,IAAI,OAAO,SAAS,GAAG,IAAI,OAAO,WAAW;AACtD,SAAO,GAAG,QAAQ;AAAA;AAGb,wBACL,OACA,QACmB;AACnB,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ;AAChB,WAAO,MAAM,IAAI,CAAC,MAAM,QAAQ,SAAS,SAAS,UAAU;AAC9D,SAAO,QAAQ,SAAS,aAAa,UAAU;AAAA;AAG1C,kBAAkB,OAA2C;AAClE,MAAI,CAAC;AAAO,WAAO;AACnB,MAAI,MAAM,QAAQ;AAAQ,WAAO,MAAM,IAAI,CAAC,MAAM,SAAS;AAC3D,SAAO,SAAS;AAAA;AAQX,qBAAqB,MAA0B;AACpD,QAAM,MAAM,KAAK,IAAI,CAAC,MAAO,IAAI,IAAI,KAAK,MAAM,IAAI,KAAK;AACzD,SAAO,IAAI,IAAI,CAAC,MAAM,GAAG;AAAA;AAEpB,iBAAiB,OAAgC;AACtD,MAAI,IAAI,OAAO;AAAQ,WAAO,GAAG,IAAI,OAAO;AAC5C,MAAI,OAAO,UAAU;AAAU,WAAO;AACtC,QAAM,MAAM,QAAQ,IAAI,KAAK,MAAM,IAAI,SAAS;AAChD,SAAO,GAAG;AAAA;AAGL,yBAAyB,MAAmC;AACjE,MAAI,MAAM,QAAQ,OAAO;AACvB,QAAI,KAAK,KAAK,CAAC,MAAM,OAAO,MAAM;AAChC,aAAO,KAAK,IAAI,CAAC,MAAM,QAAQ;AACjC,WAAO,YAAY;AAAA;AAErB,SAAO,QAAQ;AAAA;",
6
- "names": []
7
- }
@@ -1,2 +0,0 @@
1
- import * as React from "react";
2
- //# sourceMappingURL=index.d.js.map
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
5
- "mappings": "AAAA;",
6
- "names": []
7
- }